/* ==========================================================================
   Hotel Stadthof Glarus - eigene Ebene ueber dem Litho-Theme
   --------------------------------------------------------------------------
   WIRD ALS LETZTE CSS-DATEI GELADEN und ueberschreibt nur gezielt.
   Das Theme selbst (style.css, responsive.css) bleibt unangetastet, damit
   ein spaeteres Theme-Update nicht unsere Aenderungen ueberschreibt.

   Warum !important: die Theme-Regeln sind stellenweise sehr spezifisch.
   Wo es ohne geht, steht kein !important.
   ========================================================================== */

:root{
  --sh-tinte:#232323;        /* Anthrazit aus dem Logo, ersetzt #333045 */
  --sh-tinte-hell:#3a3a3a;
  --sh-messing:#c89965;      /* Markenakzent, schon im Theme vorhanden */
  --sh-messing-hell:#d8ab78;
  --sh-papier:#f4f1ec;
  --sh-papier-tief:#eae3d9;  /* zweiter und letzter Neutralton, siehe 9.6 */
  --sh-linie:#e2ddd5;
  --sh-weich:#57524d;

  /* Ein Radius fuer alles: gleicher Wert wie .btn-round-edge im Theme. */
  --sh-radius:4px;

  /* Ein Abstandstakt statt der gemischten margin-*-rem-Klassen. */
  --sh-takt:clamp(56px,6.5vw,104px);
  --sh-takt-gross:clamp(76px,8.5vw,132px);
  --sh-takt-klein:clamp(34px,3.6vw,56px);
}

/* ---------------------------------------------------------------
   1 · Farbe: Template-Violett raus
   #333045 und #262b35 sind Litho-Reste und gehoeren nicht zur Marke.
   --------------------------------------------------------------- */
.bg-dark-purple{ background-color:var(--sh-tinte) !important; }
.text-dark-purple,
.btn-link.text-dark-purple,
a.text-dark-purple-hover:hover{ color:var(--sh-tinte) !important; }
.text-slate-blue,
.btn-link.text-slate-blue,
a.text-slate-blue-hover:hover{ color:var(--sh-tinte) !important; }
.bg-transparent-dark-purple{ background-color:rgba(35,35,35,.65) !important; }

/* ---------------------------------------------------------------
   2 · Knoepfe: der Buchen-Knopf muss der sichtbarste sein
   Vorher: dunkelgrau auf dunklem Video, kleiner als die Menuepunkte.
   --------------------------------------------------------------- */
.btn-dark-purple{
  background-color:var(--sh-messing) !important;
  border-color:var(--sh-messing) !important;
  color:#1a1a1a !important;
  font-weight:700;
  letter-spacing:.08em;
}
.btn-dark-purple:hover{
  background-color:var(--sh-messing-hell) !important;
  border-color:var(--sh-messing-hell) !important;
  color:#1a1a1a !important;
}
/* Zweitrangige Aktion: nur Umriss, damit sie dem Hauptknopf nicht Konkurrenz macht */
.sh-btn-linie{
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,.75) !important;
  color:#fff !important;
}
.sh-btn-linie:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:#fff !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------
   3 · Hero
   --------------------------------------------------------------- */
.sh-hero-titel{
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.06;
  letter-spacing:-.025em;
  font-weight:700;
  color:#fff;
  margin:14px 0 14px;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.sh-hero-ort{
  font-size:12.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sh-messing);
  font-weight:600;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.sh-hero-unter{
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.5;
  color:rgba(255,255,255,.92);
  margin:0 auto 30px;
  max-width:52ch;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

/* Faktenleiste am unteren Rand des Heros */
.sh-fakten{
  display:flex; justify-content:center; flex-wrap:wrap;
  background:var(--sh-tinte);
  border-top:1px solid rgba(255,255,255,.1);
}
.sh-fakt{
  padding:15px 30px; color:#fff; font-size:13.5px; letter-spacing:.03em;
  border-right:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; gap:9px;
}
.sh-fakt:last-child{ border-right:0; }
.sh-fakt b{ color:var(--sh-messing); font-weight:700; }

/* ---------------------------------------------------------------
   4 · Wochenkarte: aus dem leeren Abschnitt wird ein Blatt
   --------------------------------------------------------------- */
.sh-karte{ background:var(--sh-papier); }
.sh-karte-blatt{
  aspect-ratio:1/1.414;
  background:#fff;
  border:1px solid var(--sh-linie);
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.1);
  width:100%; max-width:320px; margin:0 auto;
  overflow:hidden; position:relative; display:block;
}
.sh-karte-blatt iframe{ width:100%; height:100%; border:0; display:block; }
.sh-karte-leer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; color:#9a938c; font-size:14px; margin:0;
}

/* ---------------------------------------------------------------
   5 · Zimmerkarten statt Reiter
   --------------------------------------------------------------- */
.sh-zimmer-gitter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:26px;
}
.sh-zk{
  border:1px solid var(--sh-linie);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff;
  transition:box-shadow .18s ease, transform .18s ease;
}
.sh-zk:hover{ box-shadow:0 12px 30px rgba(0,0,0,.11); transform:translateY(-2px); }
.sh-zk-bild{ aspect-ratio:4/3; overflow:hidden; background:#eee; position:relative; }
.sh-zk-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-zk-zahl{
  position:absolute; left:12px; bottom:12px;
  background:rgba(0,0,0,.72); color:#fff;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
}
.sh-zk-text{ padding:20px; display:flex; flex-direction:column; flex:1; }
.sh-zk-text h4{ margin:0 0 4px; font-size:18px; letter-spacing:-.01em; color:var(--sh-tinte); }
.sh-zk-mass{ font-size:13px; color:var(--sh-weich); margin:0 0 14px; }
.sh-zk-liste{ list-style:none; margin:0 0 18px; padding:0; font-size:13.5px; color:var(--sh-weich); }
.sh-zk-liste li{ padding:3px 0; }
.sh-zk-fuss{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  gap:12px; border-top:1px solid var(--sh-linie); padding-top:14px;
}
.sh-zk-preis{ font-size:13px; color:var(--sh-weich); line-height:1.2; }
.sh-zk-preis b{ font-size:17px; color:var(--sh-tinte); display:block; letter-spacing:-.01em; }

/* ---------------------------------------------------------------
   6 · Lesbarkeit
   Messing auf Creme war zu kontrastarm. Nur dort korrigiert, wo der
   Text auf hellem Grund steht.
   --------------------------------------------------------------- */
.sh-hinweis{ color:var(--sh-weich) !important; font-size:14.5px; }

/* ---------------------------------------------------------------
   7 · Kleine Bildschirme
   --------------------------------------------------------------- */
@media (max-width:991px){
  .sh-fakten{ flex-direction:column; }
  .sh-fakt{
    border-right:0; border-bottom:1px solid rgba(255,255,255,.14);
    justify-content:center; padding:11px 16px; font-size:13px;
  }
  .sh-fakt:last-child{ border-bottom:0; }
}

@media (max-width:575px){
  .sh-hero-titel{ text-shadow:0 2px 18px rgba(0,0,0,.6); }
}

@media (prefers-reduced-motion:reduce){
  .sh-zk{ transition:none; }
  .sh-zk:hover{ transform:none; }
}

/* ---------------------------------------------------------------
   8 · Hero ohne Slider
   Der Revolution Slider hatte genau eine Folie und lud 18 Skripte
   dafuer. Der Titel war ein PNG (images/Alpen.png) - dadurch kein H1,
   nicht skalierbar, fuer Suchmaschinen unsichtbar. Jetzt echtes Markup.
   --------------------------------------------------------------- */
.sh-hero{
  position:relative;
  height:calc(100vh - 200px);
  min-height:430px;
  max-height:720px;
  overflow:hidden;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sh-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.sh-hero__schleier{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(10,10,10,.6) 0%,
    rgba(10,10,10,.32) 42%,
    rgba(10,10,10,.8) 100%);
}
.sh-hero__inhalt{
  position:relative; z-index:2;
  text-align:center;
  padding:0 24px 90px;
  max-width:900px;
}
.sh-hero__knoepfe{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

@media (max-width:991px){
  .sh-hero{ height:auto; max-height:none; min-height:0; }
  .sh-hero__inhalt{ padding:120px 24px 46px; }
  .sh-hero__video{ position:absolute; }
}
@media (max-width:575px){
  .sh-hero__inhalt{ padding:104px 20px 40px; }
  .sh-hero__knoepfe .btn{ width:100%; }
}

/* ==========================================================================
   9 · Politur
   --------------------------------------------------------------------------
   Gemeinsame Ordnung fuer Start, Ueber uns, Restaurant, Veranstaltung und
   Kontakt. Alle Regeln haengen an `.sh-politur` am <body> genau dieser fuenf
   Seiten. `rooms.html` traegt die Klasse bewusst nicht, damit die Zimmerseite
   unabhaengig davon gepflegt werden kann.

   Warum keine Regeln auf h1..h6 als Element: die Gliederung (h2/h3) und die
   Schriftgroesse sind hier getrennt. Sonst haette das Geraderuecken der
   Ueberschriftenebenen jede Seite optisch umgeworfen. Die Ebene sagt, was der
   Text bedeutet; die sh-t*-Klasse sagt, wie gross er ist.
   ========================================================================== */

/* ---------------------------------------------------------------
   9.1 · Takt: ein Abstandsraster statt gemischter Randklassen
   Das Theme setzt 130px je Sektion und legt darauf Innenraender von
   bis zu 9rem. Beides zusammen ergab Luecken von ueber 400px.
   Bootstraps py-0/pb-0/p-0 tragen !important und bleiben wirksam.
   --------------------------------------------------------------- */
.sh-politur section{
  padding-top:var(--sh-takt);
  padding-bottom:var(--sh-takt);
}
.sh-politur section.big-section{
  padding-top:var(--sh-takt-gross);
  padding-bottom:var(--sh-takt-gross);
}
.sh-politur section.half-section{
  padding-top:var(--sh-takt-klein);
  padding-bottom:var(--sh-takt-klein);
}

/* Wo eine Sektion ihr Polster ausdruecklich in Pixeln angibt, gilt diese
   Angabe weiter. Diese Werte sind auf die ueberlappenden Bloecke
   abgestimmt (overlap-height / overlap-section); der Takt oben wuerde
   sie verschieben und die Ueberlappung zerreissen. */
.sh-politur section.no-padding,
.sh-politur section.no-padding-tb{ padding-top:0; padding-bottom:0; }
.sh-politur section.padding-80px-bottom{ padding-bottom:80px; }
.sh-politur section.padding-70px-bottom{ padding-bottom:70px; }
.sh-politur section.padding-50px-bottom{ padding-bottom:50px; }
.sh-politur section.padding-60px-top{ padding-top:60px; }

.sh-politur .margin-9-rem-bottom,
.sh-politur .margin-8-half-rem-bottom,
.sh-politur .margin-8-rem-bottom,
.sh-politur .margin-7-half-rem-bottom{ margin-bottom:var(--sh-takt) !important; }

.sh-politur .margin-6-rem-bottom,
.sh-politur .margin-5-rem-bottom,
.sh-politur .margin-4-half-rem-bottom{ margin-bottom:var(--sh-takt-klein) !important; }

.sh-politur .margin-7-rem-top,
.sh-politur .margin-6-rem-top,
.sh-politur .margin-5-rem-top,
.sh-politur .margin-4-half-rem-top{ margin-top:var(--sh-takt-klein) !important; }

.sh-politur .margin-5-rem-tb{
  margin-top:var(--sh-takt-klein) !important;
  margin-bottom:var(--sh-takt-klein) !important;
}

/* ---------------------------------------------------------------
   9.2 · Schriftskala
   Hero 54 > Seitentitel 44 > Abschnitt 34 > Unterabschnitt 23 > Karte 17.
   Jede Stufe ist deutlich von der naechsten unterscheidbar.
   --------------------------------------------------------------- */
.sh-politur .sh-t-seite,
.sh-politur .sh-t1,
.sh-politur .sh-t2,
.sh-politur .sh-t3{
  font-family:'Poppins',sans-serif;
  font-weight:600;
}
.sh-politur .sh-t-seite{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.14;
  letter-spacing:-.022em;
}
.sh-politur .sh-t1{
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.22;
  letter-spacing:-.016em;
}
.sh-politur .sh-t2{
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.34;
  letter-spacing:-.01em;
}
.sh-politur .sh-t3{
  font-size:17px;
  line-height:1.42;
  letter-spacing:-.005em;
}

/* ---------------------------------------------------------------
   9.3 · Eyebrow
   Eine einzige Form fuer die kleine Zeile ueber jeder Ueberschrift.
   Vorher standen auf den fuenf Seiten vier Varianten mit
   unterschiedlicher Groesse, Laufweite und Farbe nebeneinander.
   Die Messinglinie davor ist der eine gemeinsame Akzent.
   --------------------------------------------------------------- */
/* Flex statt inline: bei langen Eyebrows laeuft die zweite Zeile sonst
   unter die Linie und die Zeile kippt optisch nach links. */
.sh-politur .sh-eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  font-family:'Poppins',sans-serif;
  font-size:12px !important;
  line-height:1.55;
  letter-spacing:.26em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  color:var(--sh-messing) !important;
  margin:0 0 16px;
}
.sh-politur .sh-eyebrow::before{
  content:"";
  flex:0 1 26px;   /* darf in engen Spalten schrumpfen, statt den Text zu brechen */
  height:1px;
  background:currentColor;
  opacity:.6;
}
/* Zentrierte Eyebrows bekommen die Linie auf beiden Seiten, sonst
   sitzt die Zeile sichtbar aus der Mitte. */
.sh-politur .text-center .sh-eyebrow,
.sh-politur .sh-eyebrow.text-center{ justify-content:center; }
.sh-politur .text-center .sh-eyebrow::after,
.sh-politur .sh-eyebrow.text-center::after{
  content:"";
  flex:0 1 26px;
  height:1px;
  background:currentColor;
  opacity:.6;
}
/* Unter 400px Spaltenbreite tragen die Linien nichts mehr bei. */
@media (max-width:575px){
  .sh-politur .sh-eyebrow{ gap:9px; letter-spacing:.2em !important; }
}
/* Auf dunklem Grund und auf Messingflaechen. */
.sh-politur .sh-eyebrow-hell{ color:#fff !important; }
.sh-politur .sh-eyebrow-tinte{ color:var(--sh-tinte) !important; }

/* Der Hero benutzt dieselbe Laufweite, damit Start- und Unterseiten
   dieselbe Handschrift haben. Bewusst auf .sh-politur begrenzt: die
   Zimmerseite traegt die Klasse nicht und behaelt ihre eigene Fassung.
   Der zweite Schatten haelt die Messingzeile lesbar, wenn das
   Hero-Video gerade durch ein helles Bild laeuft. */
.sh-politur .sh-hero-ort{
  font-size:12px;
  letter-spacing:.26em;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 18px rgba(0,0,0,.9);
}

/* ---------------------------------------------------------------
   9.4 · Zeilenlaenge
   Ueber etwa 70 Zeichen verliert das Auge beim Ruecksprung die Zeile.
   Zentrierte Absaetze bleiben zentriert.
   --------------------------------------------------------------- */
.sh-politur section p{ max-width:70ch; }
.sh-politur .text-center p,
.sh-politur p.text-center,
.sh-politur .mx-auto p{ margin-left:auto; margin-right:auto; }
.sh-politur .sh-hero-unter{ max-width:52ch; }
.sh-politur .list-style-01 li,
.sh-politur .list-style-02 li{ max-width:74ch; }

/* ---------------------------------------------------------------
   9.5 · Knoepfe: genau zwei Formen
   Primaer = Messing gefuellt. Sekundaer = Umriss Anthrazit.
   Alles andere im Theme (olivgruen, dunkelgrau, blau) wird auf diese
   beiden zurueckgefuehrt.
   --------------------------------------------------------------- */
.sh-politur .btn:not(.rounded-circle):not(.btn-link){
  border-radius:var(--sh-radius) !important;
}

.sh-politur .btn.btn-dark-gray,
.sh-politur .btn.btn-olivine-green,
.sh-politur .btn.btn-yellow-ochre,
.sh-politur .btn.btn-orange-zest{
  background:var(--sh-messing);
  border-color:var(--sh-messing);
  color:#1a1a1a;
  font-weight:600;
  letter-spacing:.08em;
}
.sh-politur .btn.btn-dark-gray:hover,
.sh-politur .btn.btn-dark-gray:focus,
.sh-politur .btn.btn-olivine-green:hover,
.sh-politur .btn.btn-olivine-green:focus,
.sh-politur .btn.btn-yellow-ochre:hover,
.sh-politur .btn.btn-yellow-ochre:focus,
.sh-politur .btn.btn-orange-zest:hover,
.sh-politur .btn.btn-orange-zest:focus{
  background:var(--sh-messing-hell);
  border-color:var(--sh-messing-hell);
  color:#1a1a1a;
}

.sh-politur .btn.btn-transparent-dark-gray{
  background:transparent;
  border-color:var(--sh-tinte);
  color:var(--sh-tinte);
  font-weight:600;
  letter-spacing:.08em;
}
.sh-politur .btn.btn-transparent-dark-gray:hover,
.sh-politur .btn.btn-transparent-dark-gray:focus{
  background:var(--sh-tinte);
  border-color:var(--sh-tinte);
  color:#fff;
}

/* Textknopf: derselbe Akzent, dieselbe Laufweite. */
.sh-politur .btn.btn-link{
  letter-spacing:.08em;
  font-weight:600;
}

/* Tastaturbedienung sichtbar halten. */
.sh-politur .btn:focus-visible,
.sh-politur a:focus-visible{
  outline:2px solid var(--sh-messing);
  outline-offset:3px;
}

/* ---------------------------------------------------------------
   9.6 · Farbe: ein Akzent, zwei Neutraltoene
   Vorher: Messing, Ocker-hell (#c3964e), Orange (#ca7741) als Akzente
   und vier fast gleiche Hintergruende (#f7f7f7, #f8f4f0, #f8f2eb,
   #eee7de) nebeneinander.
   --------------------------------------------------------------- */
.sh-politur .text-orange-zest,
.sh-politur .btn-link.text-orange-zest,
.sh-politur a.text-orange-zest-hover:hover,
.sh-politur .text-yellow-ochre-light,
.sh-politur .btn-link.text-yellow-ochre-light,
.sh-politur a.text-yellow-ochre-light-hover:hover{ color:var(--sh-messing) !important; }

.sh-politur .bg-yellow-ochre-light{ background-color:var(--sh-messing) !important; }
.sh-politur .border-color-orange-zest{ border-color:var(--sh-messing) !important; }

.sh-politur .bg-light-gray,
.sh-politur .bg-light-cream,
.sh-politur .bg-light-desert-storm{ background-color:var(--sh-papier) !important; }
.sh-politur .bg-medium-desert-storm{ background-color:var(--sh-papier-tief) !important; }

/* Messingflaechen tragen Anthrazit, nie Weiss.
   Weiss auf #c89965 kommt auf 2.5:1 und ist auch fuer grosse Schrift
   zu wenig; Anthrazit darauf erreicht 6.4:1. Die Topbar und das
   Messingband auf der Startseite machen das schon so, die uebrigen
   Messingflaechen ziehen jetzt nach. */
/* !important ist hier noetig: Bootstrap in theme-vendors.min.css setzt
   .text-white selbst mit !important. */
.sh-politur .bg-orange-zest,
.sh-politur .bg-yellow-ochre,
.sh-politur .bg-yellow-ochre-light,
.sh-politur .bg-orange-zest.text-white,
.sh-politur .bg-yellow-ochre.text-white,
.sh-politur .bg-yellow-ochre-light.text-white,
.sh-politur .bg-orange-zest .text-white,
.sh-politur .bg-yellow-ochre .text-white,
.sh-politur .bg-yellow-ochre-light .text-white{ color:var(--sh-tinte) !important; }
.sh-politur .bg-yellow-ochre-light .opacity-6{ opacity:.78; }

/* Zitat: sieht aus wie bisher, ist aber keine Ueberschrift mehr. */
.sh-politur .sh-zitat{
  font-family:'Poppins',sans-serif;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.42;
  font-weight:300;
  max-width:26ch;
}

/* Kopfbild Kontakt: helles Motiv plus Messingschleier trug den weissen
   Titel nicht. Der Schleier wird dunkel, das Bild bleibt unangetastet. */
.sh-politur .sh-kopf-schleier{
  background-image:linear-gradient(165deg,rgba(18,17,15,.66),rgba(18,17,15,.38)) !important;
  opacity:1 !important;
}

/* ---------------------------------------------------------------
   9.7 · Karten, Bilder, Schatten
   Ein Radius, eine Schattenfamilie.
   --------------------------------------------------------------- */
.sh-politur .border-radius-5px,
.sh-politur .border-radius-6px{ border-radius:var(--sh-radius) !important; }

.sh-politur .feature-box-shadow .feature-box-overlay{
  border-radius:var(--sh-radius) !important;
  box-shadow:0 10px 30px rgba(35,35,35,.07);
}
.sh-politur .box-shadow-large,
.sh-politur .box-shadow-extra-large{
  box-shadow:0 16px 44px rgba(35,35,35,.13) !important;
}
.sh-politur .box-shadow-small{
  box-shadow:0 6px 18px rgba(35,35,35,.08) !important;
}

/* ---------------------------------------------------------------
   9.8 · Oeffnungszeiten (Kontakt)
   Der Absatz selbst bleibt unangetastet: sein Inhalt kommt aus dem
   PMS (data-sc-text="oeffnungszeiten"). Zentriert liefen die mit
   Leerzeichen gesetzten Spalten auseinander, linksbuendig stehen die
   Tage untereinander.
   --------------------------------------------------------------- */
.sh-politur .sh-zeiten{
  display:inline-block;
  text-align:left;
  line-height:1.9;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------
   9.9 · Fusszeile
   --------------------------------------------------------------- */
.sh-politur .footer-hotel-resort .footer-top{ padding-top:var(--sh-takt); padding-bottom:var(--sh-takt-klein); }
.sh-politur .footer-hotel-resort .footer-top span{ letter-spacing:.16em; }
.sh-politur .footer-hotel-resort a{ transition:color .16s ease; }

@media (prefers-reduced-motion:reduce){
  .sh-politur .footer-hotel-resort a{ transition:none; }
}

/* ==========================================================================
   10 · Bewegungsschicht (GSAP)
   --------------------------------------------------------------------------
   Die einzige CSS-Regel, die zur Animationsschicht gehoert. Alles andere steht
   in js/sh-animationen.js.

   Diese Klasse setzt ausschliesslich jener Code, und nur an Elementen, die im
   selben Moment eine Animation bekommen. Ohne JavaScript wird sie nie gesetzt,
   dann ist jeder Inhalt sofort sichtbar. Bewusst nur opacity: kein display,
   kein Rand, keine Hoehe - nichts davon verschiebt das Layout, die Seite steht
   also vom ersten Aufbau an genau dort, wo sie hingehoert.
   ========================================================================== */
.sh-anim-aus{ opacity:0; }

/* Doppelter Boden. js/sh-animationen.js setzt die Klasse bei
   "Bewegung reduzieren" gar nicht erst und nimmt sie beim Umschalten wieder
   weg. Sollte sie doch einmal an einem Element haengen bleiben, bleibt der
   Inhalt trotzdem lesbar. */
@media (prefers-reduced-motion:reduce){
  .sh-anim-aus{ opacity:1; }
}

/* ==========================================================================
   11 · Bewertungen (nur index.html)
   --------------------------------------------------------------------------
   Ersatz fuer das Elfsight-Widget, das WIDGET_DISABLED meldete. Die drei
   Zitate stehen fest im Markup und werden von Hand gepflegt: kein Skript,
   kein fremdes Konto, kein Netzverkehr, keine dritte Partei mehr an dieser
   Stelle.

   Karten uebernehmen bewusst Radius, Rand, Schatten und das Anheben um zwei
   Pixel von den Zimmerkarten (Abschnitt 5) - eine Kartenform auf der ganzen
   Website, nicht zwei. Alle Selektoren beginnen mit .sh-bewertungen und
   greifen nirgends sonst.
   ========================================================================== */

/* Traeger der Sternenform. Steht einmal im Markup, alle Reihen zeigen darauf. */
.sh-bewertungen-vorlage{ position:absolute; width:0; height:0; overflow:hidden; }

.sh-bewertungen-sterne{
  display:block;
  height:auto;
  fill:var(--sh-messing);
}

/* --- Kopf ------------------------------------------------------------ */
.sh-bewertungen-kopf{ margin-bottom:var(--sh-takt-klein); }
.sh-bewertungen-kopf .sh-bewertungen-sterne{
  width:132px;
  margin:0 auto 18px;
}
/* Die Wertung ist die Ueberschrift des Abschnitts: eine belegte Zahl sagt
   mehr als eine Zeile Werbetext. Farbe hier statt ueber .text-dark-purple,
   damit die Sektion ohne Theme-Klassen auskommt. */
.sh-bewertungen-wert{
  color:var(--sh-tinte);
  margin:0;
}

/* --- Karten ---------------------------------------------------------- */
.sh-bewertungen-gitter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:26px;
}
.sh-bewertungen-karte{
  margin:0;
  padding:26px 26px 22px;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--sh-linie);
  border-radius:var(--sh-radius);
  box-shadow:0 6px 18px rgba(35,35,35,.08);
  transition:box-shadow .18s ease, transform .18s ease;
}
.sh-bewertungen-karte:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.11);
  transform:translateY(-2px);
}
.sh-bewertungen-karte .sh-bewertungen-sterne{
  width:96px;
  margin:0 0 17px;
}

/* Rand und Polster ausdruecklich zurueckgesetzt: das Theme gibt blockquote
   einen eigenen Balken, den diese Karte nicht braucht.

   Die Karten einer Reihe sind gleich hoch, die Zitate aber unterschiedlich
   lang - "The best service and hospitality." ist vier Zeilen kuerzer als das
   laengste. Senkrecht mittig gesetzt verteilt sich der Rest gleichmaessig
   ueber und unter dem Text, statt als Loch ueber der Namenszeile zu stehen. */
.sh-bewertungen-zitat{
  flex:1;
  display:flex;
  align-items:center;
  margin:0 0 20px;
  padding:0;
  border:0;
}
.sh-bewertungen-zitat p{
  margin:0;
  font-size:15px;
  line-height:1.62;
  color:var(--sh-weich);
}
/* Anfuehrungszeichen aus dem Stylesheet, nicht aus dem Text: so bleibt im
   Markup genau der Wortlaut stehen, der bei Google steht. Englische Form,
   weil die Zitate englisch sind und nicht uebersetzt werden. */
.sh-bewertungen-zitat p::before{ content:"\201C"; }
.sh-bewertungen-zitat p::after{ content:"\201D"; }

.sh-bewertungen-fuss{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--sh-linie);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.sh-bewertungen-name{
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--sh-tinte);
}
.sh-bewertungen-quelle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sh-weich);
  white-space:nowrap;
}

/* --- Knopf ----------------------------------------------------------- */
.sh-bewertungen-aktion{ margin-top:var(--sh-takt-klein); }

@media (max-width:575px){
  .sh-bewertungen-karte{ padding:22px 20px 18px; }
  .sh-bewertungen-kopf .sh-bewertungen-sterne{ width:114px; }
}

@media (prefers-reduced-motion:reduce){
  .sh-bewertungen-karte{ transition:none; }
  .sh-bewertungen-karte:hover{ transform:none; }
}