/*
Theme Name: Salon Otto
Description: Theme für salonotto.de nach der Visitenkarte: Logofarben, Barbierstreifen, Terminbuchung zuerst.
Author: Mike Seebauer
Version: 1.9.6
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: salonotto
*/

/* Schriften liegen im Theme, von Google wird nichts geladen (Datenschutz). */
@font-face{font-family:"Lobster";font-weight:400;font-display:swap;src:url("fonts/lobster-400.woff2") format("woff2")}
@font-face{font-family:"Old Standard TT";font-weight:400;font-display:swap;src:url("fonts/old-standard-tt-400.woff2") format("woff2")}
@font-face{font-family:"Old Standard TT";font-weight:700;font-display:swap;src:url("fonts/old-standard-tt-700.woff2") format("woff2")}

:root{
  /* Farben aus dem Logo, gemessen am 11.11.2026. Rot und Blau überall genau diese Töne, auch in bilder/pol.svg. */
  --beige:#F5E7D6;      /* Innenkreis des Logos: Seitengrund und Schrift auf Knöpfen */
  --gold:#A5744B;       /* Ring des Logos: große Schrift, Linien, Rahmen */
  --goldtief:#7A5131;   /* dasselbe Gold dunkler: Fließtext und Menü (Kontrast 5,7 : 1 auf Beige) */
  --rot:#AE1917;        /* Schleife des Logos: Überschriften, Links, Barbierstreifen */
  --rottief:#681008;    /* Schatten der Schleife */
  --blau:#1F6F8F;       /* Blau des Barbierstreifens: alle Knöpfe (Mike, 11.11.2026) */
  --blautief:#144B61;   /* Knopf beim Darüberfahren */
  --blauband:#1A6181;   /* Bänder hinter der Schleife, etwas dunkler wie im Logo */
  --blaufalte:#0E3A4C;  /* Faltecke zwischen Schleife und Band */
  --papier:#FBF4EA;     /* helleres Beige für Felder und Fotorahmen */
  --rand:clamp(16px,5vw,48px);
  --streifen:14px;      /* Höhe des Barbierstreifens als Trenner */
  /* Bilder des Themes; ?v nur hochzählen, wenn sich die SVG-Datei ändert */
  --pol:url("bilder/pol.svg?v=1.4.2");
  --papierbild:url("bilder/papier.svg?v=1.4.2");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:200px}
html:has(body.admin-bar){scroll-padding-top:232px}
body{margin:0;color:var(--goldtief);font:400 19px/1.6 "Old Standard TT",Georgia,serif;
  background:var(--beige) var(--papierbild) 0 0/900px 900px}
img{max-width:100%;height:auto}
a{color:var(--rot)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.screen-reader-text{position:absolute;left:-9999px}
.screen-reader-text:focus{left:8px;top:8px;z-index:99;background:var(--papier);padding:8px 12px}

/* Barbierstreifen als Trenner statt Linien: über Abschnittsüberschriften, Seitentiteln und dem Fuß */
.abschnitt>h2,.seitenkopf h1,.fuss{background:var(--pol) repeat-x 0 0/auto var(--streifen)}

/* Knöpfe als Schleife wie im Logo, nur in Blau: Band mit feiner heller Innenlinie, dahinter links unten und
   rechts oben je ein Band mit Kerbe, an der Ecke eine dunkle Falte. Kein dunkler Streifen darunter. Schrift genau mittig.
   --zipfel: wie weit die Bänder herausstehen, --versatz: wie weit sie nach unten bzw. oben versetzt sind. */
.knopf,.leiste a.jetzt,.schleife,.wp-block-button__link,.wpcf7-submit{--zipfel:18px;--versatz:7px;position:relative;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;text-decoration:none;cursor:pointer;border:0;border-radius:0;background:var(--blau);color:var(--beige);box-shadow:inset 0 0 0 4px var(--blau),inset 0 0 0 5px rgba(245,231,214,.7);margin:var(--versatz) var(--zipfel)}
.knopf::before,.leiste a.jetzt::before,.schleife::before,.wp-block-button__link::before,
.knopf::after,.leiste a.jetzt::after,.schleife::after,.wp-block-button__link::after{content:"";position:absolute;width:calc(var(--zipfel) + var(--versatz));height:100%;pointer-events:none}
.knopf::before,.leiste a.jetzt::before,.schleife::before,.wp-block-button__link::before{left:calc(-1 * var(--zipfel));top:var(--versatz);background:linear-gradient(90deg,var(--blauband) var(--zipfel),var(--blaufalte) var(--zipfel));clip-path:polygon(0 0,var(--zipfel) 0,var(--zipfel) calc(100% - var(--versatz)),100% calc(100% - var(--versatz)),var(--zipfel) 100%,0 100%,calc(var(--zipfel) * .5) 50%)}
.knopf::after,.leiste a.jetzt::after,.schleife::after,.wp-block-button__link::after{right:calc(-1 * var(--zipfel));top:calc(-1 * var(--versatz));background:linear-gradient(90deg,var(--blaufalte) var(--versatz),var(--blauband) var(--versatz));clip-path:polygon(0 var(--versatz),var(--versatz) 0,100% 0,calc(100% - var(--zipfel) * .5) 50%,100% 100%,var(--versatz) 100%,var(--versatz) var(--versatz))}
.knopf:hover,.leiste a.jetzt:hover,.schleife:hover,.wp-block-button__link:hover,.wpcf7-submit:hover{background:var(--blautief);box-shadow:inset 0 0 0 4px var(--blautief),inset 0 0 0 5px rgba(245,231,214,.7);color:var(--beige)}

/* Telefon als Symbol */
.symbol{width:24px;height:24px;flex:none;display:block}
/* Anrufen: Hörer links, daneben die Nummer, in Schriftfarbe. In der Kopfleiste und unter der Schleife */
.anruf,.leiste a.telefon{display:inline-flex;align-items:center;gap:8px;color:var(--goldtief);font-weight:700;text-decoration:none;white-space:nowrap}
.anruf{font-size:21px;letter-spacing:.04em}
.anruf .symbol{width:22px;height:22px}
.anruf:hover,.leiste a.telefon:hover{color:var(--rot)}

/* Kleine Überschriften in Versalien: überall dieselbe Größe, Sperrung und Farbe (1.6.0) */
.auftakt .seit,.eckdaten h2,.preisliste h3,.fuss h2,.neuigkeiten .marke{font:700 15px/1.5 "Old Standard TT",Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* Trennlinien aus dem Seiteninhalt werden zum Barbierstreifen */
hr,.wp-block-separator{border:0;height:var(--streifen);background:var(--pol) repeat-x 0 0/auto 100%;opacity:1;margin:2em 0}

/* Kopf: Barbierstreifen ohne Linie darunter, dann mit Abstand das Menü */
.pol{height:clamp(34px,4.2vw,56px);background:var(--pol) repeat-x 0 0/auto 100%}
.leiste{position:sticky;top:0;z-index:50;display:flex;justify-content:center;align-items:center;gap:clamp(14px,3.5vw,48px);flex-wrap:wrap;padding:clamp(18px,2.4vw,28px) var(--rand) 12px;background:var(--beige) var(--papierbild) 0 0/900px 900px;box-shadow:0 6px 12px -8px rgba(122,81,49,.45)}
.admin-bar .leiste{top:32px}
.leiste .marke{display:block;line-height:0}
.leiste .marke img{width:clamp(108px,10vw,140px);height:auto}
.leiste ul{display:flex;gap:clamp(12px,3vw,40px);flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.leiste a{font-weight:700;font-size:17px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--goldtief)}
.leiste a:hover{color:var(--rot)}
/* Der Menüpunkt zur Cituro-Buchung steht schon als Knopf daneben */
.leiste li:has(a[href*="cituro.com"]){display:none}
.leiste a.jetzt{--zipfel:14px;--versatz:6px;min-height:46px;padding:0 20px;letter-spacing:.08em}
.leiste a.telefon{letter-spacing:.06em;text-transform:none}
.leiste a.telefon .symbol{width:22px;height:22px}
/* Ziffern sind niedriger als die Großbuchstaben von PREISE und GALERIE, deshalb etwas größer */
.leiste a.telefon span{font-size:1.18em}
/* Facebook und Instagram: mittig unter der Kopfleiste am Anfang von main (Mike 11.11.: „Unterhalb der Navigation in Main!“), Trefferfläche 44 px */
.profile.oben{display:flex;justify-content:center;gap:10px;margin:14px 0 0;padding:0 var(--rand)}
.profile.oben a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--goldtief)}
.profile.oben a:hover{color:var(--rot)}

/* Auftakt: Headline über die ganze Breite, darunter Begrüßung, Schleife und Telefon */
.auftakt{max-width:1240px;margin:0 auto;padding:clamp(32px,5vw,72px) var(--rand) clamp(28px,4vw,48px);text-align:center}
.auftakt .seit{margin:0 0 12px}
.auftakt h1{font:400 clamp(40px,7vw,116px)/1.05 "Lobster",cursive;color:var(--rot);margin:0 0 18px;text-wrap:balance}
.auftakt .gruss{font-size:clamp(19px,1.6vw,22px);line-height:1.5;margin:0 auto 30px;max-width:36em;text-wrap:pretty}
.wege{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,26px)}
.schleife{--zipfel:30px;--versatz:12px;min-height:72px;padding:0 46px;font:400 clamp(28px,3vw,38px)/1 "Lobster",cursive;transform:rotate(-3deg);text-shadow:1px 1px 0 rgba(14,58,76,.45)}

/* Eckdaten auf einen Blick */
.eckdaten{max-width:1040px;margin:0 auto clamp(40px,6vw,72px);padding:0 var(--rand);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);text-align:center}
.eckdaten div{padding:6px 8px}
.eckdaten h2{margin:0 0 4px}
.eckdaten p{margin:0;line-height:1.5}
.eckdaten a{color:var(--goldtief);text-decoration-color:var(--gold);text-underline-offset:3px}
.eckdaten a:hover{color:var(--rot)}
.eckdaten .route{margin-top:6px;font-weight:700;letter-spacing:.04em}

/* Abschnitte */
.abschnitt{max-width:1040px;margin:0 auto;padding:0 var(--rand) clamp(44px,6vw,84px)}
.abschnitt>h2,.seitenkopf h1{font:400 clamp(34px,4vw,52px)/1.05 "Lobster",cursive;color:var(--rot);text-align:center;padding:calc(var(--streifen) + clamp(18px,2.4vw,28px)) 0 0;margin:0 0 clamp(20px,3vw,32px)}
.text{max-width:40em;margin:0 auto}
.text h2,.text h3{font-weight:700;color:var(--goldtief);margin:1.6em 0 .4em}
.text h2{font-size:26px}.text h3{font-size:21px}
/* Steht der Seitentitel im Inhalt noch einmal als erste Zeile (Impressum), zeigt ihn nur der Seitenkopf */
.seitenkopf+.abschnitt>.text>h1:first-child{display:none}

/* Einblicke: drei Bilder aus dem Salon wie lose Fotos, vor der Geschichte */
/* Etwas breiter als der Abschnitt, bis 1200 px, mittig (Mike, 11.11.2026: „ein bisschen größer“) */
.einblicke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.5vw,32px);width:min(1200px,calc(100vw - 2 * var(--rand)));margin:0 0 clamp(28px,4vw,48px) 50%;transform:translateX(-50%)}
.einblicke figure{margin:0;padding:clamp(5px,.8vw,9px);background:var(--papier);box-shadow:5px 6px 0 rgba(165,116,75,.25)}
.einblicke figure:nth-child(1){transform:rotate(-2deg)}
.einblicke figure:nth-child(2){transform:rotate(1.2deg) translateY(6px)}
.einblicke figure:nth-child(3){transform:rotate(-1deg)}
.einblicke img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Galerie (NextGEN): zwei Bilder nebeneinander, so breit wie der ganze Abschnitt, gerahmt wie die Fotos auf der Startseite.
   Die Originalbilder setzt functions.php statt der Vorschauen ein. Bleibt eines übrig, steht es mittig. */
.text:has(.ngg-galleryoverview){max-width:none}
.ngg-galleryoverview{--luecke:clamp(12px,3vw,32px);display:grid!important;grid-template-columns:1fr 1fr;gap:var(--luecke);margin:0!important;padding:0!important}
.ngg-galleryoverview .ngg-clear{display:none}
.ngg-galleryoverview .ngg-navigation{grid-column:1/-1}
.ngg-gallery-thumbnail-box{float:none!important;width:auto!important;margin:0!important;padding:0!important}
.ngg-gallery-thumbnail-box:nth-child(odd of .ngg-gallery-thumbnail-box):nth-last-child(1 of .ngg-gallery-thumbnail-box){grid-column:1/-1;justify-self:center;width:calc(50% - var(--luecke) / 2)!important}
.ngg-gallery-thumbnail{float:none!important;margin:0!important;padding:clamp(5px,.8vw,10px)!important;border:0!important;background:var(--papier)!important;box-shadow:5px 6px 0 rgba(165,116,75,.25)!important;text-align:left!important}
.ngg-gallery-thumbnail a{display:block;margin:0!important;line-height:0}
.ngg-gallery-thumbnail img{display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:4/5;object-fit:cover;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}

/* Preise */
.preise{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px)}
.preisliste h2{font:400 clamp(28px,3vw,36px)/1.1 "Lobster",cursive;color:var(--rot);text-align:center;margin:0 0 6px}
.preisliste h3{margin:24px 0 6px}
.preisliste dl{margin:0;line-height:1.5}
.preisliste dl div{display:flex;align-items:last baseline;gap:8px;padding:3px 0}
/* Pünktchen direkt hinter dem letzten Wort, auch wenn eine Leistung über zwei Zeilen geht (1.6.2) */
.preisliste dt{flex:1;min-width:0;overflow:hidden}
/* Breite minus Rand ergibt null: die Pünktchen rutschen nie allein in eine neue Zeile */
.preisliste dt::after{content:"";display:inline-block;box-sizing:border-box;width:100%;height:2px;margin-right:-100%;padding-left:8px;background:linear-gradient(90deg,var(--gold) 50%,transparent 0) content-box 0 0/4px 2px repeat-x;transform:translateY(-5px)}
.preisliste dd{margin:0;font-weight:700;white-space:nowrap}
.preishinweis{text-align:center;margin:30px 0 0}
.preise-buchen{text-align:center;margin:26px 0 0}

/* Team: Bilder mit Namen aus der Team-Seite */
.team .wp-block-columns,.team .wp-block-group{display:contents}
.team .text{max-width:none}
/* Zwei Fotos nebeneinander über die ganze Breite wie in der Galerie (Mike, 11.11.2026), das letzte bei ungerader Zahl mittig */
.team .raster{--luecke:clamp(12px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px) var(--luecke)}
.team .raster>figure:nth-child(odd):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - var(--luecke) / 2)}
.team figure{margin:0;text-align:center}
.team figure img{width:100%;aspect-ratio:1;object-fit:cover;display:block;padding:clamp(5px,.8vw,10px);background:var(--papier);box-shadow:5px 6px 0 rgba(165,116,75,.25)}
/* Leicht schief wie lose Fotos, wie die Salonfotos unter „Herzlich Willkommen“ (Mike, 11.11.2026). Namen bleiben gerade.
   Muster über zwei Reihen, damit nebeneinander nie zwei gleich gekippt sind. */
.team .raster>figure:nth-child(4n+1) img{transform:rotate(-2deg)}
.team .raster>figure:nth-child(4n+2) img{transform:rotate(1.2deg) translateY(6px)}
.team .raster>figure:nth-child(4n+3) img{transform:rotate(1.5deg)}
.team .raster>figure:nth-child(4n+4) img{transform:rotate(-1deg) translateY(4px)}
.team figcaption{font:400 clamp(22px,2.4vw,28px)/1.2 "Lobster",cursive;color:var(--goldtief);margin-top:12px}
.team figcaption strong,.team figcaption em{font-weight:400;font-style:normal}
.team p:empty{display:none}

/* Unterseiten */
.seitenkopf{max-width:1040px;margin:0 auto;padding:clamp(24px,4vw,48px) var(--rand) 0}
/* Alle Knöpfe im Inhalt gleich groß, gleiche Schrift (1.6.0) */
.knopf,.wp-block-button__link,.wpcf7-submit{min-height:52px;padding:0 26px;font:700 18px/1 "Old Standard TT",Georgia,serif;letter-spacing:.04em}
/* Die Bänder brauchen links und rechts gleich viel Platz, sonst rutscht der Knopf aus der Mitte */
.wp-block-button{padding:0 18px}
.wp-block-button .wp-block-button__link{margin-left:0;margin-right:0}
.wpcf7 input:not([type=submit]),.wpcf7 textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--gold);background:var(--papier);color:var(--goldtief)}
.wpcf7 label{display:block;font-weight:700}

/* Fuß: oben der Barbierstreifen statt Linie */
.fuss{background-color:rgba(251,244,234,.55)}
.fuss .innen{max-width:1040px;margin:0 auto;padding:calc(var(--streifen) + 32px) var(--rand) 28px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px)}
.fuss h2{margin:0 0 6px}
.fuss section{margin-bottom:22px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss p{margin:0 0 8px}
/* Facebook und Instagram auch im Fuß, mittig unter beiden Spalten (Mike 11.11.: „Und im Footer auch noch“) */
.fuss .folgen{max-width:1040px;margin:0 auto;padding:0 var(--rand) 36px;text-align:center}
.fuss .folgen .profile{display:flex;justify-content:center;gap:10px;margin:0}
.fuss .profile a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--goldtief)}
.fuss .profile a:hover{color:var(--rot)}
.fuss .profile .symbol{width:28px;height:28px}

/* Schwebender Cituro-Knopf in den Farben der Seite, Schrift mittig. Cituro setzt eigene Stile, darum !important. */
.cituroBookingButton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;text-align:center!important;line-height:1!important;background:var(--blau)!important;color:var(--beige)!important;border-radius:0!important;font-family:"Old Standard TT",Georgia,serif!important;font-weight:700!important;box-shadow:inset 0 0 0 4px var(--blau),inset 0 0 0 5px rgba(245,231,214,.7)!important}
.cituroBookingButton:hover,.cituroBookingButton:focus-visible{background:var(--blautief)!important;box-shadow:inset 0 0 0 4px var(--blautief),inset 0 0 0 5px rgba(245,231,214,.7)!important}
.cituroBookingButton svg{fill:currentColor;flex:none}
/* Bänder wie bei den anderen Knöpfen */
.cituroBookingButton{--zipfel:14px;--versatz:6px;overflow:visible!important}
.cituroBookingButton::before,.cituroBookingButton::after{content:"";position:absolute;width:calc(var(--zipfel) + var(--versatz));height:100%;pointer-events:none}
.cituroBookingButton::before{left:calc(-1 * var(--zipfel));top:var(--versatz);background:linear-gradient(90deg,var(--blauband) var(--zipfel),var(--blaufalte) var(--zipfel));clip-path:polygon(0 0,var(--zipfel) 0,var(--zipfel) calc(100% - var(--versatz)),100% calc(100% - var(--versatz)),var(--zipfel) 100%,0 100%,calc(var(--zipfel) * .5) 50%)}
.cituroBookingButton::after{right:calc(-1 * var(--zipfel));top:calc(-1 * var(--versatz));background:linear-gradient(90deg,var(--blaufalte) var(--versatz),var(--blauband) var(--versatz));clip-path:polygon(0 var(--versatz),var(--versatz) 0,100% 0,calc(100% - var(--zipfel) * .5) 50%,100% 100%,var(--versatz) 100%,var(--versatz) var(--versatz))}

/* Neuigkeiten als Fenster in der Mitte, wie ein Zettel aus dem Salon: Barbierstreifen oben, Papier, roter Titel, blaue Schleife (1.7.0) */
.neuigkeiten{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--gold);border-top:0;color:var(--goldtief);
  background:var(--papier) var(--pol) repeat-x 0 0/auto var(--streifen);box-shadow:8px 8px 0 rgba(122,81,49,.35)}
.neuigkeiten:focus{outline:none}
.neuigkeiten::backdrop{background:rgba(58,36,20,.55)}
.neuigkeiten[open]{animation:neuigkeiten-auf .35s ease-out}
.neuigkeiten[open]::backdrop{animation:neuigkeiten-grund .35s ease-out}
@keyframes neuigkeiten-auf{from{opacity:0;transform:translateY(16px) rotate(-1deg)}}
@keyframes neuigkeiten-grund{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.neuigkeiten[open],.neuigkeiten[open]::backdrop{animation:none}}
.neuigkeiten form{position:relative;padding:calc(var(--streifen) + 30px) clamp(22px,5vw,40px) 34px;text-align:center}
.neuigkeiten .marke{margin:0 0 6px}
.neuigkeiten h2{font:400 clamp(30px,4vw,40px)/1.1 "Lobster",cursive;color:var(--rot);margin:0 0 14px;text-wrap:balance}
.neuigkeiten .nachricht{margin:0 0 26px;text-wrap:pretty}
.neuigkeiten .zu{position:absolute;top:calc(var(--streifen) + 6px);right:8px;width:40px;height:40px;border:0;background:none;font:400 30px/1 Georgia,serif;color:var(--goldtief);cursor:pointer}
.neuigkeiten .zu:hover{color:var(--rot)}


@media (max-width:760px){
  /* Am Handy klebt schon der Cituro-Balken unten, die Leiste scrollt mit */
  .leiste{position:static}
  html,html:has(body.admin-bar){scroll-padding-top:0}
  .preise,.fuss .innen,.eckdaten{grid-template-columns:1fr}
  .einblicke{grid-template-columns:1fr 1fr}
  .einblicke figure:nth-child(3){display:none}
  .eckdaten{gap:10px}
  .leiste .marke{flex-basis:100%;text-align:center}
  .leiste .marke img{width:156px}
  .leiste{gap:10px 18px;padding-bottom:16px}
  .leiste a{font-size:18px;letter-spacing:.06em}
  /* Am Handy ist die feine Schrift sonst schwer zu lesen: Fließtext und kleine Überschriften größer */
  body{font-size:22px;line-height:1.55}
  .auftakt .gruss{font-size:22px}
  .auftakt .seit,.eckdaten h2,.preisliste h3,.fuss h2,.neuigkeiten .marke{font-size:17px}
  /* Am Handy steht unten schon der Cituro-Balken, der Knopf oben fällt weg */
  .leiste a.jetzt{display:none}
  /* Cituro am Handy: kein Balken über die ganze Breite, sondern eine Schleife mittig unten, mit Platz für die Bänder */
  .cituroContainer{justify-content:center!important;padding:0 0 14px!important;pointer-events:none;transition:opacity .3s,transform .3s,visibility .3s}
  body .cituroContainer button.cituroBookingButton{--zipfel:14px;--versatz:6px;box-sizing:border-box!important;width:60%!important;max-width:60vw!important;flex:0 0 auto!important;margin:0 auto!important;min-height:56px;padding:14px 16px!important;font-size:18px!important;pointer-events:auto}
  /* Startseite: erst einblenden, wenn die Schleife oben weggescrollt ist (Skript in footer.php) */
  .cituro-wartet .cituroContainer{opacity:0;visibility:hidden;transform:translateY(110%)}
  .cituro-wartet .cituroBookingButton{pointer-events:none}
  /* Knopf im Fuß mittig */
  .fuss .wp-block-buttons{justify-content:center}
  .schleife{--zipfel:22px;--versatz:9px;min-height:62px;padding:0 30px}
  /* Telefon unter der Schleife so groß wie der Fließtext, Eckdaten wie der Fließtext */
  .anruf{font-size:22px}
}