/*
Theme Name: R+S ObjektService
Theme URI: https://r-s-objektservice.de/
Description: Child-Theme zu GeneratePress. Bildet das Erscheinungsbild der
  vorherigen Divi-Seite nach. Alle Anpassungen gehoeren hierher - das
  Eltern-Theme bleibt unveraendert und damit aktualisierbar. Genau daran ist die
  Vorgaengerseite gescheitert: dort wurde direkt im Divi-Theme programmiert.
Author: tüit GmbH
Template: generatepress
Version: 2.8.0
*/

/* Open Sans liegt im Theme, nicht bei Google - kein externer Aufruf beim
   Seitenabruf, damit auch kein Einwilligungsthema. Variable Schrift, deshalb
   deckt eine Datei alle Staerken ab. */
@font-face {
    font-family: "Open Sans";
    src: url("schriften/open-sans.woff2") format("woff2-variations");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --rs-akzent:       #00abc8;   /* Ueberschriften, Kopfleiste */
    --rs-akzent-hell:  #69c5da;   /* Kachelflaechen, Verweise */
    --rs-text:         #666666;
    --rs-text-dunkel:  #333333;
    --rs-flaeche:      rgba(0, 0, 0, 0.04);
    --rs-fuss:         #00abc8;
}

body,
button, input, select, textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--rs-text);
}

h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; font-weight: 600; }
h1 { font-size: 30px; color: var(--rs-akzent); line-height: 1.2; }
h2 { font-size: 20px; color: var(--rs-text-dunkel); }
h3 { font-size: 18px; color: var(--rs-text-dunkel); }

a { color: var(--rs-akzent-hell); text-decoration: none; }
a:hover, a:focus { color: var(--rs-akzent); text-decoration: underline; }

/* Abschnittsueberschriften ("UNSERE KUNDEN") stehen in einer Gruppe: tuerkis
   und in Versalien. WordPress schiebt dabei einen inner-container ein, ohne
   den Selektor greift die Regel nicht.
   Eine h2 direkt im Inhalt ist dagegen eine normale Zwischenzeile - im
   Original dunkel und fett, nicht in Versalien. */
.wp-block-group > h2,
.wp-block-group__inner-container > h2 {
    color: var(--rs-akzent);
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.entry-content > h2 {
    color: var(--rs-text-dunkel);
    font-size: 20px;
    margin-bottom: 1.2rem;
}

/* --- Kopfbereich ------------------------------------------------------- */
/* Im Original liegt der gesamte Kopf auf einem durchgehenden tuerkisen Band,
   Logo links, Menue rechts in Weiss. GeneratePress faerbt von Haus aus nur die
   Navigation, deshalb Band und Navigation hier zusammenfuehren. */
.site-header {
    background-color: var(--rs-akzent);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200;
}
.site-logo img, .header-image {
    /* Wie im Original: das Logo fuellt das 112 px hohe Band genau aus. */
    max-height: 112px;
    width: auto;
    display: block;
}
/* GeneratePress setzt 40 px Innenabstand oben und unten, das machte das Band
   154 px hoch statt 112 px wie im Original. */
.site-header .inside-header {
    align-items: center;
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Logo und Menue liegen bei GeneratePress als Floats nebeneinander; ohne den
   Innenabstand klebte das Menue oben im Band. Als Flex-Zeile sitzt es mittig.
   Unter 769 px bleibt das Mobil-Layout (Logo ueber dem Menue) unangetastet. */
@media (min-width: 769px) {
    .site-header .inside-header {
        display: flex;
        justify-content: space-between;
    }
}
.site-header .main-title a, .site-header .site-description { color: #ffffff; }

.main-navigation { background-color: transparent; }
.main-navigation .main-nav ul li a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
    color: #ffffff;
    background-color: transparent;
    text-decoration: underline;
}
/* Feine Trenner zwischen den Menuepunkten, wie im Original. */
.main-navigation .main-nav > ul > li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* --- Hero: Diaschau ohne JavaScript ------------------------------------ */
/* Die vier Bilder des alten Sliders liegen uebereinander und werden per
   Keyframes eingeblendet. Kein Skript, kein Plugin, nichts was altert. */
.rs-hero {
    position: relative;
    /* Das Original wuchs mit der Fensterbreite: 541 px bei 1920, 385 px bei
       1366, also 28,2 % der Breite. Die Mobilregeln weiter unten gelten weiter. */
    height: 28.2vw;
    border-bottom: 12px solid var(--rs-akzent);
    overflow: hidden;
    margin-bottom: 0;
}
.rs-hero .wp-block-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    animation: rs-blende 32s infinite;
}
/* Negative Verzoegerung: die erste Folie steht beim Seitenaufbau schon voll
   da, statt eine Sekunde lang aus Weiss einzublenden. */
.rs-hero .wp-block-cover:nth-child(1) { animation-delay: -1s; }
.rs-hero .wp-block-cover:nth-child(2) { animation-delay:  7s; }
.rs-hero .wp-block-cover:nth-child(3) { animation-delay: 15s; }
.rs-hero .wp-block-cover:nth-child(4) { animation-delay: 23s; }
.rs-hero .wp-block-cover__background { background: transparent !important; }
/* Bildausschnitt je Folie wie im alten Divi-Slider: Folie 1 traegt den
   Schriftzug oben rechts im Bild, Folie 4 war unten angeschlagen. 75 %
   horizontal haelt den Schriftzug auch auf schmalen Bildschirmen im Bild. */
.rs-hero .wp-block-cover:nth-child(1) .wp-block-cover__image-background { object-position: 75% top; }
.rs-hero .wp-block-cover:nth-child(4) .wp-block-cover__image-background { object-position: center bottom; }

@keyframes rs-blende {
     0%  { opacity: 0; }
     3%  { opacity: 1; }
    25%  { opacity: 1; }
    28%  { opacity: 0; }
   100%  { opacity: 0; }
}
/* Wer Bewegung abgeschaltet hat, sieht das erste Bild stehen. */
@media (prefers-reduced-motion: reduce) {
    .rs-hero .wp-block-cover { animation: none; }
    .rs-hero .wp-block-cover:nth-child(1) { opacity: 1; }
}

/* --- Kacheln ----------------------------------------------------------- */
/* Muster aus dem Original: Bild oben, darunter ein tuerkiser Kasten mit
   Titel, Beschreibung und Verweis. Die Titel sind mal h2 (Kunden), mal h3
   (Leistungen) - deshalb :is(). Getroffen werden nur Spalten, die genau so
   aufgebaut sind; Textspalten neben Galerien bleiben unberuehrt. */
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) {
    background-color: var(--rs-akzent-hell);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    padding-bottom: 1.2rem;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) > figure.wp-block-image {
    margin: 0 0 1rem 0;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) > figure.wp-block-image img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) > :is(h2, h3) {
    color: var(--rs-text-dunkel);
    font-size: 18px;
    text-transform: none;
    text-align: center;
    margin: 0 1rem 0.6rem;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) > p {
    color: #ffffff;
    text-align: center;
    margin: 0 1rem 1rem;
    flex-grow: 1;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) .wp-block-buttons {
    justify-content: center;
    margin-top: auto;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) .wp-block-buttons
    .wp-block-button .wp-block-button__link {
    background: transparent;
    color: var(--rs-text-dunkel);
    font-size: 13px;
    padding: 0;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) .wp-block-button__link::before {
    content: "\2197\00a0";
}

/* --- Schaltflaechen ---------------------------------------------------- */
.entry-content .wp-block-button__link,
.wp-block-button__link {
    background-color: var(--rs-akzent);
    border-radius: 3px;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
}
.entry-content .wp-block-button__link:hover,
.wp-block-button__link:hover { background-color: var(--rs-akzent-hell); text-decoration: none; }

/* --- Abschnittsflaechen ------------------------------------------------ */
/* Hero und farbige Baender laufen ueber die volle Fensterbreite, der Inhalt
   darin bleibt auf den 1080 px des Originals. GeneratePress sperrt sonst alles
   in den Inhaltscontainer. */
.rs-hero,
.entry-content > .wp-block-group.has-background {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.entry-content > .wp-block-group.has-background > .wp-block-group__inner-container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.wp-block-columns { gap: 1.8rem; }

/* --- Seitliche Schaltflaechen ------------------------------------------ */
/* Im Original ein Plugin, das vier Bilder rechts an den Rand geheftet hat.
   Hier als reines CSS im Theme - ein Plugin weniger, das gepflegt werden muss. */
.rs-seitenbuttons {
    position: fixed;
    right: 0;
    /* Im Original unterhalb des Sliders, nicht im Bild. */
    top: 66%;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rs-seitenbuttons a {
    display: block;
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(0 0 6px rgba(0, 171, 200, 0.55));
}
.rs-seitenbuttons a:hover {
    transform: translateX(-4px);
    filter: drop-shadow(0 0 10px rgba(0, 171, 200, 0.9));
}
.rs-seitenbuttons img { display: block; width: 210px; height: auto; }

@media (max-width: 1400px) {
    .rs-seitenbuttons img { width: 165px; }
}
@media (max-width: 900px) {
    .rs-seitenbuttons { display: none; }
}

/* --- Fussbereich ------------------------------------------------------- */
.site-footer .footer-widgets,
.site-info {
    background-color: var(--rs-fuss);
    color: #ffffff;
}
.site-footer .footer-widgets h3 {
    color: var(--rs-akzent-hell);
    font-size: 15px;
    text-transform: uppercase;
}
.site-footer a, .site-info a { color: var(--rs-akzent-hell); }
.site-footer .wp-block-list { list-style: none; padding-left: 0; }

/* --- Formulare --------------------------------------------------------- */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #cccccc;
    background: #ffffff;
}
.wpcf7 input[type="submit"] {
    background-color: var(--rs-akzent);
    color: #ffffff;
    border: 0;
    border-radius: 3px;
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background-color: var(--rs-akzent-hell); }

@media (max-width: 768px) {
    .rs-hero { height: 320px; }
    .entry-content > h2, .wp-block-group > h2 { font-size: 22px; }
}

/* --- Zitat-Diaschau ----------------------------------------------------- */
/* Im Original ein Divi-Slider mit drei Kundenstimmen. Gleiches Prinzip wie
   beim Hero: uebereinander gelegt, per Keyframes gewechselt, ohne Skript. */
.rs-zitate {
    position: relative;
    height: 360px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}
.rs-zitate .rs-zitat {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    animation: rs-blende 24s infinite;
}
.rs-zitate .rs-zitat:nth-child(1) { animation-delay:  0s; }
.rs-zitate .rs-zitat:nth-child(2) { animation-delay:  8s; }
.rs-zitate .rs-zitat:nth-child(3) { animation-delay: 16s; }
.rs-zitate .wp-block-columns {
    max-width: 1080px;
    margin: 0 auto;
    align-items: center;
    padding: 1.5rem;
    width: 100%;
}
.rs-zitate .wp-block-image img { max-height: 280px; width: auto; object-fit: cover; }
.rs-zitate p {
    color: #ffffff;
    font-size: 20px;
    font-style: italic;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .rs-zitate .rs-zitat { animation: none; }
    .rs-zitate .rs-zitat:nth-child(1) { opacity: 1; }
}
@media (max-width: 768px) {
    .rs-zitate { height: 460px; }
}

/* GeneratePress faerbt Blockschaltflaechen ueber eine tiefer verschachtelte
   Regel grau. Gleiche Tiefe statt !important. */
.entry-content .wp-block-buttons .wp-block-button .wp-block-button__link {
    background-color: var(--rs-akzent);
    color: #ffffff;
}
.entry-content .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
    background-color: var(--rs-akzent-hell);
}

/* --- Lesbarkeit auf farbigen Baendern ----------------------------------- */
/* Abschnitte mit der kraeftigen Akzentfarbe tragen im Original weissen Text.
   Die Farbe steht als Inline-Stil am Block, deshalb der Attributselektor. */
.wp-block-group.has-background[style*="00abc8"] :is(p, li, h2, h3, h4),
.rs-zitat :is(p, li, h2, h3, h4) {
    color: #ffffff;
}
.wp-block-group.has-background[style*="00abc8"] a { color: #ffffff; text-decoration: underline; }

/* GeneratePress setzt 40 px Abstand ueber den Inhalt. Wo ein Hero steht, soll
   er direkt unter dem Kopfband anschliessen - sonst bleibt ein weisser Streifen. */
.site-content:has(.rs-hero) { padding-top: 0; }

/* ======================================================================
   Feinschliff nach dem Abgleich mit der alten Seite
   ====================================================================== */

/* Absaetze brauchen Luft. Divi hatte groessere Abstaende als der
   Blockeditor von Haus aus. */
.entry-content p { margin-bottom: 1.3em; }
.entry-content p:last-child { margin-bottom: 0; }

/* Freistehende Bilder im Textfluss - etwa das ISO-Siegel - stehen im
   Original mittig und deutlich kleiner. */
.entry-content > figure.wp-block-image,
.wp-block-group__inner-container > figure.wp-block-image {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.entry-content > figure.wp-block-image img,
.wp-block-group__inner-container > figure.wp-block-image img {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

/* Kachelreihen: senkrechter Abstand wie der waagerechte. */
.wp-block-columns + .wp-block-columns { margin-top: 1.8rem; }

/* Kundenstimmen: Text mittig neben dem Bild, in Weiss. */
.rs-zitat .wp-block-columns { align-items: center; }
.rs-zitat .wp-block-column:last-child { display: flex; align-items: center; justify-content: center; }
.rs-zitat :is(p, div) { color: #ffffff; font-size: 20px; font-style: italic; text-align: center; }

/* Abschnitte mit hinterlegtem Foto laufen ueber die volle Breite und
   bekommen einen Schleier, damit der Text lesbar bleibt. */
.rs-bildabschnitt {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
}
.rs-bildabschnitt > .wp-block-cover__inner-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
/* Aufhellung kommt jetzt aus der dim-Ebene des Cover-Blocks (dimRatio 30). */
.rs-bildabschnitt .wp-block-cover__background { background-color: #ffffff; }

/* Handy-Ansicht im Abschnitt "Digitale Qualitaetssicherung": im Original
   knapp 185 px breit, nicht bildschirmfuellend. */
.wp-block-group.has-background[style*="00abc8"] figure.wp-block-image img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
}
.wp-block-group.has-background[style*="00abc8"] .wp-block-columns { align-items: center; }

/* --- Fussbereich ------------------------------------------------------- */
.site-footer .footer-widgets {
    background-color: var(--rs-fuss);
    background-image: url("/wp-content/uploads/2021/09/AdobeStock_268785700_-LIGHTFIELD-STUDIOS_web.jpg");
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #ffffff;
    padding-block: 3rem;
}
.site-footer .footer-widgets h3 { color: #ffffff; }
.site-footer .footer-widgets a { color: #ffffff; }
.site-footer .footer-widgets a:hover { text-decoration: underline; }
.site-info { background-color: #1b1b1b; color: #ffffff; }

/* Vier gleich breite Spalten lassen das Formular gedrueckt wirken -
   die Formularspalte bekommt mehr Platz. */
.footer-widgets .inside-footer-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.7fr;
    gap: 2rem;
}
.footer-widgets .inside-footer-widgets > div { width: auto; max-width: none; padding: 0; }
.site-footer .wpcf7 input[type="text"],
.site-footer .wpcf7 input[type="email"],
.site-footer .wpcf7 textarea {
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    margin-bottom: 0.6rem;
}
.site-footer .wpcf7 textarea { min-height: 110px; }
.site-footer .wpcf7 label { display: block; margin-bottom: 0.4rem; }
.site-footer .rs-fusslogo img { max-width: 190px; height: auto; margin-bottom: 1rem; }

@media (max-width: 900px) {
    .footer-widgets .inside-footer-widgets { grid-template-columns: 1fr; }
}

/* Im Abschnitt mit hinterlegtem Foto trennen im Original feine Linien die
   Zeilen voneinander. */
.rs-bildabschnitt .wp-block-columns {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding-bottom: 0.9rem;
}
.rs-bildabschnitt .wp-block-columns:last-child { border-bottom: 0; }
.rs-bildabschnitt .wp-block-column:first-child:has(figure) { flex-basis: 90px; flex-grow: 0; }
.rs-bildabschnitt figure.wp-block-image img { max-width: 48px; }

/* Ueberschrift im Abschnitt "Digitale Qualitaetssicherung" weiss und gross,
   der Fliesstext darunter in Weiss - schwarz waere auf dem Tuerkis unlesbar. */
.wp-block-group.has-background[style*="00abc8"] h2 {
    color: #ffffff;
    font-size: 26px;
    text-transform: uppercase;
}

/* Im Original stehen alle Zeilen des Vorteile-Abschnitts in 600 - bei uns war
   nur die letzte fett und fiel damit aus der Reihe. */
.rs-bildabschnitt p { font-weight: 600; }

/* Fussbereich: drei Spalten statt vier. Die beiden Linklisten stehen
   untereinander in einer Spalte, das Formular bekommt den frei gewordenen
   Platz - so wie im Original. */
.footer-widgets .inside-footer-widgets {
    grid-template-columns: 1fr 1fr 2fr;
}
.site-footer .footer-widgets .wp-block-list { line-height: 1.45; margin-bottom: 1.2rem; }
.site-footer .footer-widgets h3 { margin-bottom: 0.5rem; }

/* Muss ans Dateiende: die Dreispalten-Regel weiter oben wuerde eine frueher
   notierte Mobilregel sonst ueberschreiben. */
@media (max-width: 900px) {
    .footer-widgets .inside-footer-widgets { grid-template-columns: 1fr; }
    .rs-hero { height: 240px; border-bottom-width: 8px; }
}

/* --- Kacheln "Aehnliche Leistungen" ------------------------------------ */
/* Dort steht der Titel im Original als Balken IM Bild, nicht darunter.
   Erkennbar an der weissen Textfarbe, die Divi am Modul hinterlegt hat. */
.wp-block-column:has(> figure.wp-block-image):has(> p[style*="FFFFFF"]) {
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.wp-block-column:has(> figure.wp-block-image):has(> p[style*="FFFFFF"]) > figure.wp-block-image {
    margin: 0;
}
.wp-block-column:has(> figure.wp-block-image):has(> p[style*="FFFFFF"]) > figure.wp-block-image img {
    width: 100%;
    height: var(--rs-kachelbild);
    object-fit: cover;
    display: block;
}
.wp-block-column:has(> figure.wp-block-image) > p[style*="FFFFFF"] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.55rem 0.8rem;
    background: rgba(0, 171, 200, 0.88);
}

/* Kachel komplett anklickbar. Der Verweis steckt im Titelbalken; seine
   Trefferflaeche wird nach oben ueber das Bild gezogen. Die Hoehe steht in
   einer Variablen, damit Bildhoehe und Trefferflaeche zusammenbleiben. */
:root { --rs-kachelbild: 190px; }

.wp-block-column:has(> figure.wp-block-image) > p[style*="FFFFFF"] a {
    color: #ffffff;
    text-decoration: none;
}
.wp-block-column:has(> figure.wp-block-image) > p[style*="FFFFFF"] a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(-1 * var(--rs-kachelbild));
}
.wp-block-column:has(> figure.wp-block-image):has(> p[style*="FFFFFF"]):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.wp-block-column:has(> figure.wp-block-image):has(> p[style*="FFFFFF"]):hover
    > p[style*="FFFFFF"] {
    background: rgb(0, 171, 200);
}
.wp-block-column:has(> figure.wp-block-image) > p[style*="FFFFFF"] a:focus-visible::after {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

/* Auch die grossen Kacheln auf Start- und Leistungsseite folgen dem Verweis,
   der bisher nur am "mehr Infos"-Text hing. */
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)) { position: relative; }
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3))
    .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.wp-block-column:has(> figure.wp-block-image):has(> :is(h2, h3)):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* --- Bedienung der Diaschauen ------------------------------------------ */
/* Sobald das Skript laeuft, uebernimmt es den Wechsel: Keyframes aus,
   Sichtbarkeit ueber .ist-aktiv. Ohne Skript bleibt alles wie vorher. */
.rs-hero.hat-steuerung .wp-block-cover,
.rs-zitate.hat-steuerung .rs-zitat {
    animation: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.rs-hero.hat-steuerung .wp-block-cover.ist-aktiv,
.rs-zitate.hat-steuerung .rs-zitat.ist-aktiv {
    opacity: 1;
    pointer-events: auto;
}

.rs-steuerung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.rs-punkte { display: flex; gap: 8px; }
.rs-punkt {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.rs-punkt.ist-aktiv { background: #ffffff; }
.rs-pfeil {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: var(--rs-akzent);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.rs-pfeil:hover { background: #ffffff; }
.rs-punkt:focus-visible,
.rs-pfeil:focus-visible { outline: 3px solid var(--rs-akzent); outline-offset: 2px; }

/* Im tuerkisen Zitatband sind weisse Flaechen zu grell. */
.rs-zitate .rs-pfeil { background: rgba(255, 255, 255, 0.9); }