/* =========================================================
   SCHRIFTEN - liegen auf unserem eigenen Server
   ---------------------------------------------------------
   Frueher wurden Literata und Open Sans bei Google geladen.
   Dabei wandert die IP-Adresse jedes Besuchers zu Google in
   die USA - in Deutschland ein Datenschutzproblem. Deshalb
   liegen die drei Schriftdateien jetzt selbst im Ordner
   themes/fewo/assets/css, neben dieser Datei. Die Seite nimmt damit zu
   niemandem mehr Kontakt auf ausser zum eigenen Server.

   Es sind "variable" Schriften: eine Datei enthaelt alle
   Strichstaerken. Deshalb reichen drei Dateien statt sieben.
   ========================================================= */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-display:swap;
  font-weight:200 900;
  src:url(literata-latin-wght.woff2) format('woff2-variations'),
      url(literata-latin-wght.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-display:swap;
  font-weight:300 800;
  src:url(open-sans-latin-wght.woff2) format('woff2-variations'),
      url(open-sans-latin-wght.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Petit Formal Script';
  font-style:normal;
  font-display:swap;
  font-weight:400;
  src:url(petit-formal-script-latin-400.woff2) format('woff2');
}

/* ============================================================
   Zur schönen Aussicht — Startseiten-Entwurf
   Farbwelt: Navy und Terrakotta aus der Print-Vorlage „Last Minute
   am Meer", der Sandton aus dem bestehenden Auftritt (Hausfarbe).
     Navy       #1E344A   Hauptfarbe, Überschriften, dunkle Flächen
     Terrakotta #9F442F   Akzent, Buttons, Links  (ersetzt das Seeblau)
     Sand       #EFDEA6   Hausfarbe: Bänder, Akzente auf Dunkel
     Sand hell  #FCF8EB   Seitengrund (aufgehellter Sandton)
     Sand mittel#F5EAC6   Kästen, Tabellenköpfe
   Schriften: Open Sans (Fließtext, wie bisher),
              Literata (Ãœberschriften), Petit Formal Script (Wortmarke)
   Alle Farben stehen als CSS-Variablen hier in :root.
   ============================================================ */

:root{
  /* --- Markenfarben aus der Print-Vorlage --- */
  --indigo-900:#16283A;  /* tiefstes Navy: Fußzeile */
  --indigo:#1E344A;      /* CI-Navy */
  --indigo-400:#4C6B85;
  --sea:#9F442F;         /* Terrakotta: Buttons, Akzente */
  /* Wandelt-Blau: der Farbton der Schaltflaechen beim Vermittlungsbuero.
     Wird zurzeit nicht verwendet — liegt hier bereit, falls die Knoepfe,
     die zu Wandelt fuehren, doch einmal in deren Blau stehen sollen. */
  --wandelt:#416D91;
  --wandelt-700:#2E4D67;
  --sea-700:#8A3A28;     /* dunkler, für Links auf hellem Grund */
  --sand:#EFDEA6;        /* Hausfarbe Sand */
  --sand-100:#F8F1D6;
  --gold:#BE8A22;        /* Sternefarbe */

  --paper:#FCF8EB;
  --paper-blur:rgba(252,248,235,.91);
  --surface:#FFFFFF;
  --surface-2:#F5EAC6;
  --ink:#1F2C38;
  --muted:#64707C;
  --line:#E7DBB4;
  --line-strong:#D5C387;

  --ribbon-bg:#EFDEA6;
  --ribbon-ink:#1E344A;
  --tint-sea:rgba(159,68,47,.13);
  --tint-indigo:rgba(30,52,74,.11);
  --tint-sand:#F6EDCD;
  --tint-sand-ink:#6B5316;
  --panel-bg:#1E344A;
  --panel-border:transparent;

  --shadow:0 1px 2px rgba(30,33,69,.06), 0 8px 24px -12px rgba(30,33,69,.18);
  --shadow-lg:0 2px 4px rgba(30,33,69,.06), 0 24px 48px -20px rgba(30,33,69,.28);

  --display:"Literata","Iowan Old Style",Georgia,serif;
  --body:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --script:"Petit Formal Script","Snell Roundhand",cursive;

  --r:10px;
  --wrap:74rem;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --indigo-900:#0E1A25;
    --indigo:#9FBAD1;
    --indigo-400:#B9CBDA;
    --sea:#D2694C;
    --wandelt:#6E9CC4; --wandelt-700:#8FB6D6;
    --sea-700:#EC9578;
    --sand:#EFDEA6;
    --sand-100:#332C16;
    --gold:#DFAE55;
    --paper:#14212D;
    --surface:#1C2C3A;
    --surface-2:#26394A;
    --ink:#EDE6D9;
    --muted:#9AA9B5;
    --line:#2F4356;
    --line-strong:#41586D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
    --paper-blur:rgba(20,33,45,.88);
    --ribbon-bg:#EFDEA6; --ribbon-ink:#1E344A;
    --tint-sea:rgba(210,105,76,.20); --tint-indigo:rgba(159,186,209,.18);
    --tint-sand:#332C16; --tint-sand-ink:#EFDEA6;
    --panel-bg:#1B2C3B; --panel-border:#2F4356;
  }
}
:root[data-theme="dark"]{
  --indigo-900:#0D0F22; --indigo:#8B90D6; --indigo-400:#A9ADE6;
  --sea:#4FBEE6; --sea-700:#7FD2F0; --wandelt:#6E9CC4; --wandelt-700:#8FB6D6; --sand:#E8D9A6; --sand-100:#2A2717; --gold:#EFCB63;
  --paper:#12142A; --surface:#1A1D38; --surface-2:#222648;
  --ink:#ECEDF7; --muted:#A5AAC9; --line:#2F3457; --line-strong:#3E4470;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
  --paper-blur:rgba(18,20,42,.86);
  --ribbon-bg:#E8D9A6; --ribbon-ink:#221F10;
  --tint-sea:rgba(79,190,230,.18); --tint-indigo:rgba(139,144,214,.20);
  --tint-sand:#2A2717; --tint-sand-ink:#E8D9A6;
  --panel-bg:#191C3A; --panel-border:#2F3457;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--sea-700);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--sea);outline-offset:2px;border-radius:4px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.012em;text-wrap:balance;margin:0}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.15}
h3{font-size:1.15rem;line-height:1.3}
p{margin:0 0 1rem}
.kicker{
  font-family:var(--body);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sea-700);
  margin:0 0 .6rem;
}
.lede{font-size:1.1rem;color:var(--muted);max-width:44rem}
section{padding:clamp(3rem,7vw,5.5rem) 0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--body);font-size:.95rem;font-weight:700;
  padding:.72rem 1.35rem;border-radius:var(--r);
  border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
/* Knoepfe bleiben in beiden Farbschemata terrakotta: das aufgehellte
   Rot des Dunkelmodus traegt die weisse Schrift nicht. */
.btn-primary{background:#9F442F;color:#fff;border-color:#9F442F}
.btn-primary:hover{background:#8A3A28;border-color:#8A3A28}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-onDark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-onDark:hover{background:rgba(255,255,255,.24)}

/* Schaltflaechen, die zum Vermittlungsbuero Wandelt fuehren.
   Sie tragen Terrakotta wie alle anderen Schaltflaechen; erkennbar sind sie
   am Text "Wohnung ansehen" und am kleinen Pfeil.
   Falls sie doch einmal im Blau von Wandelt stehen sollen: in den beiden
   Zeilen darunter var(--sea) durch var(--wandelt) und var(--sea-700) durch
   var(--wandelt-700) ersetzen. Die Farben sind oben schon hinterlegt. */
.btn-wandelt{background:#9F442F;color:#fff;border-color:#9F442F}
.btn-wandelt:hover{background:#8A3A28;border-color:#8A3A28}
.card a.go.btn-wandelt{background:#9F442F}
.card a.go.btn-wandelt:hover{background:#8A3A28}
.extern{font-size:.9em;margin-left:.15em}

/* ---------------- Kopfzeile ---------------- */
/* Die Kopfzeile ist bewusst in beiden Farbschemata sandfarben:
   Das Logo ist mit weissem Segel und weissen Nebenzeilen für genau
   diesen Untergrund gestaltet. Deshalb stehen hier feste Farbwerte. */
header.site{
  position:sticky;top:0;z-index:50;
  background:#EFDEA6;
  border-bottom:1px solid rgba(30,52,74,.22);
}
header.site nav.main a{color:#1F2C38}
header.site nav.main a:hover{border-bottom-color:#9F442F}
header.site .tel{color:#1E344A}
/* Die Regel fuer die Menuepunkte (header.site nav.main a) faerbt sonst auch
   den Knopf dunkel — deshalb steht die Schriftfarbe hier mit derselben
   Genauigkeit noch einmal. */
header.site .btn-primary{background:#9F442F;border-color:#9F442F;white-space:nowrap}
header.site nav.main a.btn-primary{color:#fff}
header.site nav.main a.btn-primary:hover{color:#fff;border-bottom-color:transparent}
/* Der Knopf in der Kopfzeile sitzt neben dem Logo und braucht deshalb
   etwas mehr Luft als die Knoepfe im Seiteninhalt. */
header.site .btn-kopf{
  font-size:.92rem;letter-spacing:.005em;
  padding:.72rem 1.5rem;line-height:1.25;border-radius:9px;
  box-shadow:0 1px 2px rgba(30,33,69,.14);
}
header.site .btn-kopf:hover{box-shadow:0 3px 10px -2px rgba(138,58,40,.45)}
@media (max-width:560px){
  header.site .btn-kopf{padding:.62rem 1.05rem;font-size:.86rem}
}
header.site .btn-primary:hover{background:#8A3A28;border-color:#8A3A28}
.bar{display:flex;align-items:center;gap:1.5rem;padding-top:.7rem;padding-bottom:.7rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--indigo)}
.brand img{height:58px;width:auto}
/* Fallback-Wortmarke, falls die Logodatei nicht geladen werden kann */
.brand .wordmark{display:none;flex-direction:column;line-height:1;gap:.12rem}
.brand .wordmark .over{font-family:var(--body);font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.brand .wordmark .mid{display:flex;align-items:center;gap:.4rem}
.brand .wordmark .main{font-family:var(--script);font-size:1.72rem;color:#4E5E8E;line-height:1.15;white-space:nowrap}
.brand .wordmark .swoosh{width:1.5rem;height:1rem;flex:none;fill:none;stroke:#4E5E8E;stroke-width:1.6;stroke-linecap:round}
.brand .wordmark .under{font-family:var(--body);font-size:.54rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;align-self:flex-end}
.brand.nologo img{display:none}
.brand.nologo .wordmark{display:flex}
nav.main{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
nav.main a{
  color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:600;
  padding:.3rem 0;border-bottom:2px solid transparent;
  white-space:nowrap;   /* Menuepunkte nie innerhalb eines Wortes umbrechen */
}
nav.main a:hover{border-bottom-color:var(--sea)}
.tel{font-weight:700;color:var(--indigo);text-decoration:none;white-space:nowrap}
/* Zwischen 900 und 1150 Pixeln wird es eng: Schrift, Abstaende und Logo
   ruecken etwas zusammen, damit alle Punkte in einer Zeile bleiben. */
@media (max-width:1150px){
  nav.main a{font-size:.89rem}
  .brand img{height:50px}
  header.site .btn-kopf{padding:.66rem 1.15rem;font-size:.87rem}
}


/* ---------------- Hero ---------------- */
/* Der Kopfbereich nimmt bewusst viel Platz ein: Das Foto soll wirken,
   deshalb eine Mindesthoehe statt nur Innenabstand. */
.hero{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(28rem,74vh,46rem);
}
.hero-media{position:absolute;inset:0;z-index:-2;background:linear-gradient(160deg,#16283A 0%,#22415C 45%,#4C6B85 100%)}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  opacity:0;transition:opacity 1.4s ease;
}
.hero-media img.aktiv{opacity:1}

/* Punkte zum Umschalten, unten rechts im Bild */
.heropunkte{
  position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.2rem,3vw,2rem);
  z-index:2;display:flex;gap:.55rem;
}
.heropunkte button{
  width:.78rem;height:.78rem;border-radius:999px;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);border:1.5px solid rgba(255,255,255,.85);
  transition:background-color .2s, transform .2s;
}
.heropunkte button[aria-selected="true"]{background:#fff;transform:scale(1.15)}
.heropunkte button:hover{background:rgba(255,255,255,.8)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Weicher Schatten links unter dem Text, damit die helle Schrift auf
     allen vier Bildern steht. Rechts bleibt das Foto fast unberuehrt. */
  /* Der Text steht unten. Dort wird das Bild nach unten hin dunkler,
     der Himmel oben bleibt unberuehrt. Zusaetzlich etwas Schatten von
     links, wo die Schrift beginnt. */
  background:
    linear-gradient(180deg, rgba(12,24,38,0) 10%, rgba(12,24,38,.18) 34%, rgba(12,24,38,.44) 54%, rgba(12,24,38,.66) 76%, rgba(12,24,38,.76) 100%),
    linear-gradient(96deg, rgba(12,24,38,.32) 0%, rgba(12,24,38,.16) 46%, rgba(12,24,38,0) 80%);
}
.hero-inner{max-width:44rem;padding-bottom:clamp(1rem,3vw,2rem)}
.hero .kicker{color:#fff;text-shadow:0 1px 4px rgba(10,20,30,.6)}
.hero h1{
  font-size:clamp(2.15rem,6vw,3.8rem);line-height:1.04;color:#fff;
  margin:0 0 1rem;text-shadow:0 1px 3px rgba(10,20,30,.45);
}
.hero p.sub{font-size:clamp(1.05rem,2.2vw,1.22rem);color:#fff;max-width:38rem;margin-bottom:1.8rem;text-shadow:0 1px 3px rgba(10,20,30,.5)}
.hero .btn-onDark{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn-onDark:hover{background:rgba(255,255,255,.3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
/* Die Zahlenreihe im Kopfbereich wird zurzeit nicht verwendet.
   Das Markup dafuer stand unter ÄNDERN 1 und kann jederzeit zurueck. */
.facts{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,.28);
  margin-top:clamp(2rem,5vw,3.2rem);
}
.facts div{
  /* 9.5rem Grundbreite: so stehen die vier Zahlen auf dem Schirm in einer
     Reihe und brechen auf dem Handy sauber in zwei Paare um. */
  flex:1 1 9.5rem;padding:1.1rem 1rem 1.2rem 0;
}
.facts b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.1}
.facts span{font-size:.86rem;color:rgba(255,255,255,.82)}
.stars{color:var(--gold);letter-spacing:.06em}

/* ---------------- Sandband ---------------- */
.ribbon{background:var(--ribbon-bg);color:var(--ribbon-ink)}
.ribbon .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  padding-top:1rem;padding-bottom:1rem;font-size:.96rem;
}
.ribbon b{font-weight:700}
.ribbon a{color:var(--ribbon-ink);font-weight:700;margin-left:auto;white-space:nowrap}

/* ---------------- Buchungshinweis ---------------- */
/* Farblich abgesetzter Infokasten mit Akzentkante in Terrakotta. */
.buchen{
  display:block;
  background:var(--tint-sand);
  border:1px solid var(--line-strong);
  border-left:5px solid var(--sea);
  border-radius:10px;
  padding:1.2rem 1.5rem 1.3rem;
  margin:1.8rem 0 .4rem;
}
.buchen-titel{
  font-family:var(--display);font-size:1.12rem;font-weight:600;
  margin:0 0 .45rem;color:var(--ink);
}
.buchen-text{
  margin:0;font-size:.97rem;line-height:1.62;color:var(--tint-sand-ink);
  max-width:56rem;
}
.buchen-text b{color:var(--ink);font-weight:700}

/* ---------------- Wohnungsfinder ---------------- */
.finder-head{display:flex;flex-wrap:wrap;align-items:end;gap:1.5rem;margin-bottom:1.8rem}
.finder-head .lede{margin-bottom:0}
.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:1rem 0 1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem;
}
.filters .lbl{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.4rem}
.chip{
  font-family:var(--body);font-size:.88rem;font-weight:600;
  padding:.42rem .9rem;border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);
  transition:background-color .15s, border-color .15s, color .15s;
}
.chip:hover{border-color:var(--indigo)}
.chip[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip.reset{border-style:dashed;color:var(--muted);font-weight:600}
.count{margin-left:auto;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}

.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.hausblock{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.hauskopf{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding-bottom:.7rem;margin-bottom:1.3rem;border-bottom:2px solid var(--line-strong);
}
.hauskopf h3{font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:-.01em}
.hauskopf .anzahl{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
.hauskopf .hausnote{flex:1 1 100%;margin:0;font-size:.93rem;color:var(--muted)}
.hauskopf .hausnote b{color:var(--sea-700);font-weight:700}
.badge.hund{background:var(--tint-sea);color:var(--sea-700)}
.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--indigo-400)}
.card .bild{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.card .inhalt{display:flex;flex-direction:column;flex:1;padding:1.05rem 1.25rem 1.1rem}
.card .top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.15rem}
.card h3{font-size:1.16rem}
.card .haus{font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.card dl{
  display:grid;grid-template-columns:auto auto;gap:.15rem 1.4rem;
  margin:.85rem 0 0;font-size:.9rem;
}
.card dt{color:var(--muted)}
.card dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.badge{
  font-size:.75rem;font-weight:700;letter-spacing:.01em;
  padding:.2rem .55rem;border-radius:5px;
  background:var(--surface-2);color:var(--ink);
}
.badge.see{background:var(--tint-indigo);color:var(--indigo)}
.badge.bf{background:var(--tint-sea);color:var(--sea-700)}
.badge.sand{background:var(--tint-sand);color:var(--tint-sand-ink)}
.card .foot{
  display:flex;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
}
.price{line-height:1.2}
.price b{font-family:var(--display);font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums}
.price span{display:block;font-size:.75rem;color:var(--muted)}
.card a.go{
  flex:1;text-align:center;
  font-size:.9rem;font-weight:700;text-decoration:none;color:#fff;background:#9F442F;
  padding:.62rem .9rem;border-radius:8px;white-space:nowrap;
}
.card a.go:hover{background:#8A3A28}
.empty{padding:2.5rem 0;color:var(--muted);text-align:center;display:none}
.pricenote{margin-top:1.6rem;font-size:.84rem;color:var(--muted);max-width:48rem}

/* ---------------- Panels ---------------- */
.panel{background:var(--panel-bg);color:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--panel-border)}
.panel .inner{padding:clamp(2rem,5vw,3.4rem)}
.panel h2{color:#fff}
.panel .kicker{color:var(--sand)}
.panel p{color:rgba(255,255,255,.86)}
.split{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:860px){.split{grid-template-columns:1.05fr .95fr;align-items:center}}
.checklist{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.checklist li{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;font-size:.96rem;color:rgba(255,255,255,.92)}
.checklist svg{width:1.05rem;height:1.05rem;margin-top:.32rem;fill:none;stroke:var(--sand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.onDarkLink{color:var(--sand);font-weight:700}

/* ---------------- Bildkacheln ---------------- */
/* Der Wellen-Hintergrund liegt unter jedem Bild. Er trägt die
   Markenfarben und erscheint, solange ein Foto (noch) fehlt. */
.figure{
  position:relative;border-radius:12px;overflow:hidden;
  min-height:16rem;box-shadow:var(--shadow);
  background:#1E344A url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Crect fill='%231E344A' width='600' height='400'/%3E%3Ccircle cx='452' cy='104' r='44' fill='%239F442F'/%3E%3Cpath fill='%2316283A' opacity='.75' d='M0 244C118 206 198 300 318 264 428 231 500 284 600 252V400H0Z'/%3E%3Cpath fill='%239F442F' opacity='.35' d='M0 288C120 258 200 330 320 302 440 275 512 318 600 296V400H0Z'/%3E%3Cpath fill='%23EFDEA6' opacity='.92' d='M0 330C130 300 212 356 332 332 452 308 522 344 600 326V400H0Z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.figure img{width:100%;height:100%;object-fit:cover;min-height:16rem}
.figure figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.2rem .95rem .75rem;font-size:.8rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(22,40,58,.84));
}

/* ---------------- Bewertungen ---------------- */
.rating{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem;
  padding:1.5rem 1.7rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.score{display:flex;align-items:baseline;gap:.5rem}
.score b{font-family:var(--display);font-size:2.6rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.score span{color:var(--muted);font-size:.9rem}
blockquote{
  margin:0;font-family:var(--display);font-size:1.12rem;line-height:1.5;
  border-left:3px solid var(--sea);padding-left:1.1rem;flex:1 1 20rem;
}
blockquote cite{display:block;font-family:var(--body);font-style:normal;font-size:.82rem;color:var(--muted);margin-top:.5rem}

/* ---------------- Bewertungs-Schiene ---------------- */
/* Sandband: hebt einen ganzen Abschnitt vom hellen Seitengrund ab.
   Wird bei den Bewertungen und bei der Dahme-Rubrik verwendet.
   Der graue Fliesstext waere auf Sand zu schwach, deshalb wird er
   innerhalb des Bandes dunkler gesetzt. */
/* WICHTIG: Das Sandband behaelt in BEIDEN Farbschemata seinen hellen
   Grund — die Hausfarbe soll auch im Dunkelmodus Hausfarbe bleiben.
   Deshalb muessen hier saemtliche Textfarben fest auf die hellen Werte
   gesetzt werden. Sonst dreht der Dunkelmodus die Schrift auf Hell und
   sie steht unlesbar auf dem hellen Sand. Bitte nichts davon loeschen. */
.sandband{
  background:#EFDEA6;
  color:#1F2C38;
  --ink:#1F2C38;
  --muted:#4C5763;
  --line:rgba(30,52,74,.18);
  --line-strong:rgba(30,52,74,.32);
  --surface:#FFFFFF;
  --surface-2:#F6EDCD;
  --indigo:#1E344A;
  --indigo-400:#4C6B85;
  --sea:#9F442F;
  --sea-700:#8A3A28;
  --gold:#A9761A;
  --tint-sand:#F6EDCD;
  --tint-sand-ink:#6B5316;
  --tint-indigo:rgba(30,52,74,.11);
  --tint-sea:rgba(159,68,47,.13);
  --shadow:0 1px 2px rgba(30,33,69,.06), 0 8px 24px -12px rgba(30,33,69,.18);
  padding:clamp(2.6rem,6vw,4rem) 0 clamp(2.2rem,5vw,3.2rem);
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
.sandband .kicker{color:var(--sea-700)}
.sandband h2.bewtitel{color:var(--indigo)}
.sandband .pfeil{background:rgba(255,255,255,.7);border-color:rgba(30,52,74,.28);color:var(--indigo)}
.sandband .pfeil:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.sandband .bewkarte{border-color:rgba(30,52,74,.14)}
.sandband .bewspur::-webkit-scrollbar-thumb{background:rgba(30,52,74,.3)}
.sandband .bewspur{scrollbar-color:rgba(30,52,74,.3) transparent}

.bewkopf{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-bottom:.2rem;
}
/* Die Ueberschrift steht hier bewusst klein und gesperrt: Das Siegel
   traegt den Auftritt, die Zeile darunter ordnet ihn nur ein. */
.bewkopf h2.bewtitel{
  margin:0;font-family:var(--body);font-size:.82rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;line-height:1.4;
}
.bewnav{display:flex;justify-content:center;gap:.5rem;margin:1.5rem 0 1.4rem}
.pfeil{
  width:2.6rem;height:2.6rem;border-radius:999px;cursor:pointer;font-size:1.05rem;
  background:var(--surface);color:var(--indigo);border:1.5px solid var(--line-strong);
  display:grid;place-items:center;transition:background-color .15s,border-color .15s,color .15s;
}
.pfeil:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* Das Siegel: dunkler Kreis mit Goldring, darunter ein Band in Terrakotta.
   Note und Anzahl stehen im Markup unter ÄNDERN 4. */
.siegel{
  position:relative;flex:0 0 auto;
  width:9.5rem;height:9.5rem;display:grid;place-items:center;
  margin-bottom:1.9rem;
}
.siegelring{position:absolute;inset:0;width:100%;height:100%}
.siegelinhalt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  color:#fff;line-height:1;
}
.siegelinhalt b{
  font-family:var(--display);font-size:2.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.siegelsterne{color:var(--gold);font-size:.82rem;letter-spacing:.12em;margin-top:.28rem}
.siegelvon{font-size:.72rem;color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem}
.siegelband{
  position:absolute;left:50%;bottom:-.55rem;transform:translateX(-50%);
  white-space:nowrap;background:var(--sea);color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;
  padding:.34rem .9rem;border-radius:7px;
  box-shadow:0 3px 10px -3px rgba(30,33,69,.45);
}

.bewspur{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(19rem,22rem);gap:1rem;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.35rem .35rem 1.1rem;margin:0 -.35rem;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.bewspur::-webkit-scrollbar{height:8px}
.bewspur::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.bewkarte{
  scroll-snap-align:start;margin:0;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.3rem 1.2rem;box-shadow:var(--shadow);
}
.bewsterne{color:var(--gold);letter-spacing:.14em;font-size:.95rem;margin-bottom:.6rem}
.bewkarte blockquote{
  border:0;padding:0;margin:0 0 .6rem;flex:1;
  font-family:var(--display);font-size:1rem;line-height:1.5;color:var(--ink);
  /* Lange Bewertungen werden zunaechst nach neun Zeilen abgeschnitten,
     der Knopf darunter klappt sie auf. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;
}
.bewkarte.offen blockquote{-webkit-line-clamp:unset;overflow:visible}
.mehr{
  align-self:flex-start;background:none;border:0;cursor:pointer;padding:0 0 .8rem;
  font-family:var(--body);font-size:.84rem;font-weight:700;color:var(--sea-700);
}
.mehr:hover{text-decoration:underline}
.bewkarte figcaption{
  font-size:.84rem;color:var(--muted);
  padding-top:.7rem;border-top:1px solid var(--line);
}
.bewkarte figcaption b{display:block;color:var(--ink);font-size:.9rem}
@media (max-width:620px){
  .bewspur{grid-auto-columns:minmax(15rem,84vw)}
  .siegel{width:8.2rem;height:8.2rem}
  .siegelinhalt b{font-size:2.1rem}
}

/* ---------------- Info-Raster ---------------- */
.cols{display:grid;gap:1.6rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cols h3{margin-bottom:.4rem}
.cols ul{margin:0;padding-left:1.1rem;font-size:.95rem}
.cols li{margin-bottom:.3rem}
.cols p{font-size:.95rem;color:var(--muted)}

/* ---------------- Hakenliste auf hellem Grund ---------------- */
ul.check{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem}
ul.check li{position:relative;padding-left:1.7rem;font-size:.97rem;color:var(--muted)}
ul.check li b{color:var(--ink);font-weight:700}
ul.check li::before{
  content:"";position:absolute;left:0;top:.45rem;width:.85rem;height:.5rem;
  border-left:2.4px solid var(--sea);border-bottom:2.4px solid var(--sea);
  transform:rotate(-45deg);
}

/* ---------------- Tippliste (Dahme erleben) ---------------- */
.tipps{
  list-style:none;padding:0;margin:0;
  display:grid;gap:.1rem 2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
}
.tipps li{
  position:relative;padding:.85rem 0 .85rem 1.6rem;
  font-size:1rem;line-height:1.6;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.tipps li b{display:block;color:var(--ink);font-weight:700;font-family:var(--display);font-size:1.06rem;letter-spacing:-.008em}
.tipps li::before{
  content:"";position:absolute;left:0;top:1.35rem;
  width:.55rem;height:.55rem;border-radius:2px;
  background:var(--sea);
}
.linkzeile{
  margin-top:1.6rem;font-size:.93rem;color:var(--muted);
  padding-top:1.1rem;border-top:1px solid var(--line);
}
.linkzeile a{font-weight:600;white-space:nowrap}

/* ---------------- Webcam-Kachel ---------------- */
.camkachel{
  position:relative;display:block;overflow:hidden;border-radius:14px;
  aspect-ratio:21/9;text-decoration:none;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--indigo-900);
  transition:transform .18s ease, box-shadow .18s ease;
}
.camkachel:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.camkachel img{width:100%;height:100%;object-fit:cover;display:block}
.camtext{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:clamp(1rem,2.5vw,1.6rem);
  background:linear-gradient(180deg, rgba(22,40,58,0) 45%, rgba(22,40,58,.45) 100%);
}
.cammarke{
  background:var(--sea);color:#fff;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;
  padding:.6rem 1.15rem;border-radius:9px;
  box-shadow:0 4px 14px -4px rgba(12,24,36,.6);
}
.camkachel:hover .cammarke{background:var(--sea-700)}
.camquelle{margin-top:1rem;font-size:.84rem;color:var(--muted);max-width:48rem}
@media (max-width:640px){
  .camkachel{aspect-ratio:4/3}
}

/* ---------------- Historienbilder (Ãœber uns) ---------------- */
.historie{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.historie figure{margin:0}
.historie figure:first-child{grid-column:1 / -1}
/* Die Historienfotos behalten ihr Originalformat — alte Aufnahmen
   vertragen keinen Beschnitt. */
.historie img{
  width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-2);
}
.historie figcaption{margin-top:.4rem;font-size:.82rem;color:var(--muted)}
.historie:empty{display:none}

/* ---------------- Kontakt ---------------- */
.contact{background:var(--surface-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:2rem 3rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.contact address{font-style:normal;font-size:1rem;line-height:1.8}
.contact address a{font-weight:600}
.bookbox{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:1.4rem 1.5rem;box-shadow:var(--shadow);
}
.bookbox h3{margin-bottom:.5rem}
.bookbox p{font-size:.93rem;color:var(--muted)}

/* ---------------- Fuß ---------------- */
footer.site{background:var(--indigo-900);color:rgba(255,255,255,.72);font-size:.88rem}
footer.site .wrap{padding-top:2.4rem;padding-bottom:2.4rem}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline}
.footnav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.2rem;font-weight:600}
.footline{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:#fff;color:var(--indigo);padding:.6rem 1rem;border-radius:8px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------- Menue auf schmalen Bildschirmen ---------------- */
/* Bis 900 Pixel verschwinden die Menuepunkte aus der Kopfzeile und
   wandern in ein Feld, das der Knopf mit den drei Strichen aufklappt.
   Vorher waren sie auf dem Handy einfach weg. */
.burger{
  display:none;
  margin-left:auto;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  gap:5px;flex-direction:column;
  background:transparent;border:1px solid rgba(30,52,74,.28);
  border-radius:9px;cursor:pointer;padding:0;
}
.burger span{display:block;width:20px;height:2px;background:#1F2C38;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menuepunkte{display:flex;align-items:center;gap:1.6rem}

@media (max-width:1150px){
  .menuepunkte{gap:1.15rem}
}

@media (max-width:900px){
  .burger{display:flex}
  nav.main{gap:.7rem}
  .brand img{height:52px}
  .menuepunkte{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#EFDEA6;
    border-bottom:1px solid rgba(30,52,74,.22);
    box-shadow:0 14px 24px -14px rgba(22,40,58,.45);
    padding:.2rem 1.5rem 1rem;
  }
  .menuepunkte.offen{display:flex}
  header.site nav.main .menuepunkte a{
    font-size:1.02rem;padding:.9rem .2rem;
    border-bottom:1px solid rgba(30,52,74,.16);
  }
  header.site nav.main .menuepunkte a:hover{border-bottom-color:rgba(30,52,74,.16)}
  /* Der Knopf am Ende des aufgeklappten Feldes */
  header.site nav.main a.btn-mobil{
    display:block;text-align:center;margin-top:.85rem;
    border-bottom:none;background:#9F442F;color:#fff;
    border-radius:9px;padding:.85rem 1rem;font-size:.98rem;
  }
  header.site nav.main a.btn-mobil:hover{background:#8A3A28;border-bottom-color:transparent}
}

/* Ueber 900 Pixel bleibt alles wie bisher: Punkte in einer Zeile,
   der Knopf rechts daneben, kein Burger, kein zweiter Knopf. */
@media (min-width:901px){
  a.btn-mobil{display:none}
}
/* Unter 700 Pixeln wird es neben Logo und Burger zu eng fuer den
   Knopf in der Leiste - er steht dann nur noch im aufgeklappten Feld. */
@media (max-width:700px){
  header.site .btn-kopf{display:none}
}