/* Urlaub am Salzhaff – Gestaltung.
   Farben aus dem Logo: Marineblau und Gold, dazu Sand und warme Akzente.
   Textfarben sind auf WCAG AA gerechnet (siehe CLAUDE.md), nicht geschätzt.
   Keine externen Ressourcen – Schrift liegt lokal. */

@font-face{font-family:"Roboto";src:url("/schrift/Roboto-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/schrift/Roboto-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --marine:#12384f; --marine-tief:#0b2534;
  --aktion:#0e6a7d;      /* Haff-Petrol: Schaltflächen und Akzente, 6,2:1 gegen Weiss */
  --aktion-tief:#0a505e; /* gedrückt / Hover */
  --gold-hell:#f0c87a;   /* warmer Akzent, nur auf dunklem Grund */
  --gruen:#0f7a63;       /* WhatsApp-Aktion, dunkel genug für weissen Text */
  --sand:#f8f4ee; --weiss:#fff;
  --text:#23303a; --text-leise:#56646f;
  --rand:#e5ddd2; --schatten:0 1px 2px rgba(11,37,52,.06),0 10px 28px rgba(11,37,52,.09);
  --bahn:1180px; --radius:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);background:var(--weiss);line-height:1.65;font-size:17px;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine)}
h1,h2,h3{line-height:1.16;color:var(--marine-tief);margin:0 0 .5em;letter-spacing:-.01em;
  text-wrap:balance}   /* verhindert einzelne Wörter auf der letzten Zeile */
h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem)}
h2{font-size:clamp(1.55rem,1.15rem + 1.7vw,2.4rem)}
h3{font-size:1.18rem}
p{margin:0 0 1.1em}
.bahn{width:min(100% - 2.5rem,var(--bahn));margin-inline:auto}
.schmal{width:min(100% - 2.5rem,780px)}
.mitte{text-align:center;margin-inline:auto;max-width:64ch}
.dach{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:var(--aktion);margin:0 0 .6em}
.fuehrung{font-size:1.1rem;color:var(--text-leise);max-width:68ch}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.7rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--aktion);outline-offset:3px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rand)}
.kopf-reihe{display:flex;align-items:center;gap:1.4rem;padding:.55rem 0}
.marke img{width:clamp(160px,19vw,240px)}
.nav{display:none;margin-left:auto;gap:1.5rem}
.nav a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--marine);padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--aktion)}
.knopf-kopf{margin-left:auto;padding:.55rem 1.15rem;font-size:.92rem}
@media (min-width:940px){.nav{display:flex}.knopf-kopf{margin-left:0}}

/* Knöpfe */
.knopf{display:inline-block;background:var(--aktion);color:#fff;text-decoration:none;font-weight:700;
  padding:.85rem 1.7rem;border-radius:999px;border:2px solid var(--aktion);transition:background .15s,transform .15s}
.knopf:hover{background:var(--aktion-tief);border-color:var(--aktion-tief);transform:translateY(-1px)}
.knopf-leer{background:transparent;color:var(--marine);border-color:currentColor}
.knopf-leer:hover{background:var(--marine);color:#fff;border-color:var(--marine)}
.knopf-gross{padding:1rem 2rem;font-size:1.05rem}

/* Held */
.held{position:relative;isolation:isolate;min-height:clamp(460px,66vh,680px);display:grid;align-items:end}
.held-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.held::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,38,.3) 0%,rgba(6,26,38,.5) 45%,rgba(6,26,38,.88) 100%)}
.held-text{padding:3.5rem 0 3rem;color:#fff}
/* 18ch erzwang einen Umbruch bei 'Dein Ferienhaus am Salzhaff' (27 Zeichen). */
.held-text h1{color:#fff;max-width:26ch;text-shadow:0 2px 24px rgba(0,0,0,.32)}
.held-text .fuehrung{color:rgba(255,255,255,.94);max-width:58ch}
.held-text .dach{color:var(--gold-hell)}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.held-knoepfe .knopf-leer{color:#fff}
.held-knoepfe .knopf-leer:hover{background:#fff;color:var(--marine-tief);border-color:#fff}

/* Merkmalleiste unter dem Held */
.merkmale{background:var(--marine);color:#eaf1f5}
.merkmale-reihe{display:flex;flex-wrap:wrap;gap:1rem 3.2rem;justify-content:center;padding:1.25rem 0;
  font-size:.95rem;font-weight:700;letter-spacing:.02em}
.merkmale-reihe span{display:flex;align-items:center;gap:.5rem}

/* Abschnitte */
.abschnitt{padding:clamp(3.2rem,7vw,5.6rem) 0}
.abschnitt-hell{background:var(--sand)}
.abschnitt-dunkel{background:var(--marine);color:#eaf1f5}
.abschnitt-dunkel h2{color:#fff}
.abschnitt-dunkel .fuehrung{color:rgba(255,255,255,.9)}
.abschnitt-dunkel .dach{color:var(--gold-hell)}

/* Häuser */
.haeuser{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2.4rem}
.haus{background:#fff;border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schatten);display:flex;flex-direction:column}
.haus-bild{aspect-ratio:4/3;object-fit:cover;width:100%}
.haus-inhalt{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;flex:1;
  align-items:center;text-align:center}
/* Die Kachel ist ein Flex-Container; ohne align-self würde das Logo auf volle
   Breite gestreckt und damit verzerrt (gemessen 264x54 statt 125x54). */
.haus-logo{height:58px;width:auto;align-self:center;margin-bottom:1rem;object-fit:contain}
.haus-werbung{color:var(--text);font-size:1rem;margin-bottom:.6em}
.haus-daten{color:var(--text-leise);font-size:.9rem;margin-bottom:1.4em}
.haus .knopf{margin-top:auto;align-self:center}

/* Zwei Spalten */
.zwei-spalten{display:grid;gap:2.5rem;align-items:center}
@media (min-width:920px){.zwei-spalten{grid-template-columns:1fr 1fr;gap:3.5rem}}
.bild-rahmen{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}

/* Galerie – gilt für Objektseiten UND übernommene Seiten */
/* Galerien laufen waagerecht statt als hohes Raster: 180 Galerien hatten 20
   Bilder, die Seiten wurden dadurch über 13.000 px lang (gemessen). */
/* Dieselbe Darstellung wie der Streifen der Startseite: zwei Reihen, seitlich
   schiebbar (David 12.09.2026). */
.galerie{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:clamp(200px,21vw,260px);gap:.8rem;overflow-x:auto;
  scroll-snap-type:x proximity;margin-top:2rem;padding-bottom:.6rem;
  scrollbar-width:thin;scroll-behavior:smooth}
.galerie > *{scroll-snap-align:start}
.galerie a{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--schatten);line-height:0}
.galerie img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .35s}
.galerie a:hover img{transform:scale(1.04)}
.galerie figure{margin:0}

/* Bildband */
.band{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:clamp(200px,21vw,260px);gap:.8rem;overflow-x:auto;
  scroll-snap-type:x proximity;margin-top:2.2rem;padding-bottom:.6rem;
  scrollbar-width:thin;scroll-behavior:smooth}
.band > picture{scroll-snap-align:start}
.band img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:10px;box-shadow:var(--schatten)}
.streifen-huelle{position:relative;margin:1.6rem 0}
.band-pfeil{position:absolute;top:calc(50% + .6rem);transform:translateY(-50%);z-index:2;
  width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--rand);
  background:rgba(255,255,255,.94);color:var(--marine-tief);font-size:1.5rem;line-height:1;
  cursor:pointer;box-shadow:var(--schatten)}
.band-pfeil:hover{background:#fff;border-color:var(--aktion);color:var(--aktion)}
.streifen-huelle.ohne-schieber .band-pfeil{display:none}
.band-zurueck{left:-.8rem}
.band-vor{right:-.8rem}
@media (max-width:700px){.band-pfeil{display:none}}

/* FeWo-Manager-Module (Buchung, Anfrage, Belegungskalender) */
.modul{margin:2.2rem 0 0}
.modul-rahmen{background:#fff;border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:.5rem;overflow:hidden}
/* Kein min-height: das Modul meldet seine Höhe selbst (siehe build.py).
   Ein Mindestwert würde die Meldung überstimmen und Leerraum erzeugen.
   Der Startwert steht als height-Attribut am iframe. */
.modul-rahmen iframe{display:block;width:100%;border:0;border-radius:12px}
/* display:block überstimmt sonst das hidden-Attribut – das noch nicht
   geladene Modul belegte dadurch 820 px leeren Raum. */
.modul-rahmen iframe[hidden]{display:none}
.modul-hinweis{font-size:.88rem;color:var(--text-leise);margin:.8rem 0 0}

/* Text-Seiten (Landingpages, Recht)
   Vorher stand hier nur max-width:74ch – ohne margin-inline:auto. Der Text war
   damit auf Lesebreite begrenzt, klebte aber am linken Rand der 1180-px-Bahn:
   gemessen 707 px Text und 473 px leerer Streifen rechts, auf allen 122
   übernommenen Seiten. Das Raster stellt die Lesespalte mittig und lässt
   Galerien, Hauskarten und Buchungsmodule die volle Bahn nutzen. */
/* David 12.09.2026: „schau dir mal die Body breite von der Startseite an und
   dann von einer Unterseite" – der Inhalt soll auf allen Seiten dieselbe Flucht
   und Breite haben. Vorher stand die Lesespalte als 88ch-Raster mittig IN der
   Bahn: gemessen linker Rand 287 px und 841 px Breite, während die Kacheln der
   Startseite bei 50 px beginnen und 1180 px nutzen. Jetzt füllt der Inhalt die
   Bahn wie überall sonst. */
.lesetext{max-width:none}
.lesetext h2{margin-top:1.8em}
.lesetext ul{padding-left:1.2em}
.lesetext li{margin-bottom:.4em}

/* Fuß */
.fuss{background:var(--marine-tief);color:#c8d5dd;padding:3rem 0 1.5rem;font-size:.95rem}
.fuss-gitter{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fuss a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.fuss a:hover{border-bottom-color:var(--gold-hell)}
.fuss-marke{font-weight:700;color:#fff;font-size:1.05rem;margin:0 0 .4em}
.fuss-titel{font-weight:700;color:#fff;margin:0 0 .4em}
.fuss-klein{color:#c8d5dd;margin:0;line-height:1.85}
.fuss-zeile{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.2rem}
.fuss-zeile p{margin:0;font-size:.88rem;color:#9db0bc}

/* WhatsApp – nur ein Link, kein fremdes Skript, lädt nichts nach */
.whatsapp{position:fixed;right:1rem;bottom:1rem;z-index:40;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--gruen);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:.7rem 1.1rem;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.whatsapp:hover{background:#0c6252}
@media (max-width:520px){.whatsapp span{display:none}.whatsapp{padding:.85rem;border-radius:50%}}

/* Objektseiten */
.eckdaten{color:var(--text-leise);font-size:1.02rem;margin:-.3em 0 1.6em}
.merkmale-liste{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.merkmale-liste li{position:relative;padding-left:1.6rem;color:var(--text)}
.merkmale-liste li::before{content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;
  border-radius:50%;background:var(--aktion)}
.haus-ohne-bild{aspect-ratio:4/3;display:grid;place-items:center;background:var(--sand);
  color:var(--text-leise);font-weight:700;border-bottom:1px solid var(--rand)}

/* Bilder in übernommenen Seiten */
.lesetext figure{margin:1.8rem 0;border-radius:12px;overflow:hidden;box-shadow:var(--schatten)}
.lesetext .galerie{margin:1.8rem 0}
.lesetext .galerie figure{margin:0;border-radius:10px}
.lesetext .galerie a{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--schatten);line-height:0}
.lesetext .galerie img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .35s}
.lesetext .galerie a:hover img{transform:scale(1.04)}

/* Einzelbilder in übernommenen Seiten: begrenzte Höhe, sonst wird eine Seite
   über 10.000 px lang (gemessen an /urlaub-in-pepelow-am-salzhaff/). */
/* Kein display:flex auf <figure>: darin steckt ein <picture>, das dann keine
   Groesse mehr bekommt – die Bilder wurden unsichtbar (gemessen: Hoehe 0). */
.lesetext figure{text-align:center;background:var(--sand)}
.lesetext figure picture{display:inline-block;max-width:100%}
.lesetext figure img{max-height:430px;width:auto;max-width:100%;margin:0 auto}
.lesetext .galerie figure{background:none}
.lesetext .galerie img{max-height:none}

/* Einwilligung */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--marine-tief);
  color:#e7eef3;box-shadow:0 -6px 28px rgba(0,0,0,.25);padding:1.1rem 0}
.einwilligung-innen{display:grid;gap:1rem;align-items:center}
@media (min-width:860px){.einwilligung-innen{grid-template-columns:1fr auto;gap:2rem}}
.einwilligung p{margin:0 0 .4em;font-size:.94rem;line-height:1.55}
.einwilligung-titel{font-weight:700;color:#fff;font-size:1.02rem}
.einwilligung a{color:var(--gold-hell)}
.einwilligung-knoepfe{display:flex;gap:.7rem;flex-wrap:wrap}
.einwilligung-knoepfe .knopf{padding:.7rem 1.3rem;font-size:.95rem}
.einwilligung-knoepfe .knopf-leer{color:#fff}
.einwilligung-knoepfe .knopf-leer:hover{background:#fff;color:var(--marine-tief);border-color:#fff}

/* Gesperrtes Modul */
.modul-sperre{background:var(--sand);border-radius:12px;padding:2rem 1.6rem;text-align:center}
.modul-sperre-titel{font-weight:700;color:var(--marine-tief);font-size:1.1rem;margin:0 0 .5em}
.modul-sperre p{color:var(--text-leise);max-width:58ch;margin-inline:auto}
.modul-sperre-klein{font-size:.86rem}

/* Bild vergrössern (statt neues Fenster) */
.galerie-knopf{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%;
  border-radius:10px;overflow:hidden;box-shadow:var(--schatten);line-height:0}
.galerie-knopf img{width:100%;transition:transform .35s}
.galerie-knopf:hover img{transform:scale(1.04)}
.lupe{border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:92vh;border-radius:14px}
.lupe::backdrop{background:rgba(8,26,36,.86)}
.lupe img{display:block;max-width:100%;max-height:88vh;width:auto;border-radius:14px}
.lupe-zu{position:absolute;top:.5rem;right:.6rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lupe-zu:hover{background:rgba(0,0,0,.75)}

/* Zusammengefasste Schlagwortzeile aus der alten Seite */
.dach-zeile{color:var(--text-leise);font-size:1.02rem;margin:-.4em 0 1.6em}

/* Seitenverzeichnis im Fuss: klein und ruhig, aber lesbar.
   Text in Hintergrundfarbe wäre versteckter Text – das wertet Google als Spam. */
/* Kein pauschales margin:0 hier: .bahn zentriert über margin-inline:auto, und
   margin:0 hebt das auf – der Block sass dadurch bei linkem Rand 0, während
   der übrige Fussinhalt bei 50 px steht (gemessen 12.09.2026). Er soll in
   derselben Flucht stehen wie Gitter und Copyright-Zeile, nur darunter. */
.fuss-verzeichnis{margin-inline:auto;padding:0}
.fuss-verzeichnis > summary{list-style:none;cursor:pointer;text-align:center;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#14384c;padding:.8rem 0 .4rem}
.fuss-verzeichnis > summary::-webkit-details-marker{display:none}
.fuss-verzeichnis > summary:hover{color:#6d828f}
.fuss-verzeichnis nav{padding:.4rem 0 1.4rem;text-align:center;
  font-size:.72rem;line-height:1.95;color:#13364a}
.fuss-verzeichnis nav a{color:#13364a;border-bottom:0;text-decoration:none}
.fuss-verzeichnis nav a:hover{color:#9fb3be}
.fuss-verzeichnis a{color:#8fa3af;text-decoration:none;border:0}
.fuss-verzeichnis a:hover{color:#fff;text-decoration:underline}
.fuss-zeile{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:1.2rem}

/* Hausvorstellungen in übernommenen Seiten.
   Im Altbestand lief jede Vorstellung als loser Fliesstext durch – Bild,
   Absatz, Liste, Aufklapper und zwei einzeln untereinander stehende Knöpfe.
   Ohne Rahmen war nicht erkennbar, wo ein Haus aufhört und das nächste
   anfängt. Auf 112 Seiten, 336 Blöcke. */
.objekt-karte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:1.8rem;margin:2.6rem 0}
.objekt-karte > h3{margin-top:0;font-size:1.45rem;color:var(--marine-tief);
  padding-bottom:.6rem;border-bottom:1px solid var(--rand)}
.objekt-karte > h3 em{font-style:normal;color:var(--aktion)}
/* Das Titelbild war 430x430 und machte die Kachel 1377 px hoch. */
.objekt-karte > figure{margin-top:0}
.objekt-karte > figure img{max-height:260px;width:100%;object-fit:cover;border-radius:10px}
.objekt-karte .streifen-huelle{margin:1rem 0}
/* KEIN grid-template-columns hier: das erzeugt EXPLIZITE Spalten, die sich den
   Restplatz teilen, während grid-auto-columns nur für die impliziten danach
   gilt. Gemessen am 13.09.2026: die ersten fünf Spalten 185 px, die folgenden
   260 px – sichtbar als Formatsprung mitten im Streifen. Rest aus der Zeit,
   als die Galerie in der Kachel noch ein Raster war. */
.objekt-karte .galerie{margin:1.4rem 0}
.objekt-karte details{border:1px solid var(--rand);border-radius:10px;background:var(--sand);
  padding:.2rem .9rem;margin:.7rem 0}
.objekt-karte details[open]{padding-bottom:.8rem}
.objekt-karte summary{cursor:pointer;font-weight:700;padding:.7rem .2rem;color:var(--marine-tief)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0 0}
.knopf-reihe .knopf{margin:0}
@media (max-width:600px){
  .objekt-karte{padding:1.2rem}
  .knopf-reihe .knopf{width:100%;text-align:center}
}


/* „Gefällt dir die Seite?" – teilt über die Freigabe des Geräts, sonst wird
   der Link in die Zwischenablage gelegt. Kein fremder Dienst, keine Zählpixel:
   sonst bräuchte es wieder eine Einwilligung. */
.teilen-block{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.9rem;padding:1.6rem 0 .4rem}
.teilen-frage{margin:0;color:#c8d5dd;font-size:.98rem}
.teilen-block .teilen-knopf{padding:.55rem 1.2rem;font-size:.92rem;color:#fff}
.teilen-block .teilen-knopf:hover{background:#fff;color:var(--marine-tief);border-color:#fff}
.teilen-hinweis{font-size:.88rem;color:var(--gold-hell)}


/* Roomtour bei YouTube – bewusst ein Link und kein eingebettetes Video:
   eine Einbettung lädt YouTube-Skripte und setzt Cookies, dafür bräuchte es
   wieder eine Einwilligung. Dezent gehalten, damit der Buchungsknopf der
   deutlichste Weg bleibt. */
.video-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-size:.92rem;color:var(--aktion);text-decoration:none;
  border-bottom:1px solid transparent}
.video-link:hover{border-bottom-color:var(--aktion)}
.video-link span{font-size:.78rem}
.video-zeile{margin:.2rem 0 1.4rem}

/* Roomtour-Link direkt unter den Eckdaten der Objektseite */
.eckdaten + .video-zeile{margin:-.4rem 0 1.4rem}

/* WhatsApp im Kontaktbereich – gleiche Nummer wie das Telefon, in der
   WhatsApp-Farbe, damit er sich von den beiden anderen Wegen abhebt. */
.knopf-whatsapp{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gruen);border-color:var(--gruen);color:#fff}
.knopf-whatsapp:hover{background:#0c6450;border-color:#0c6450;color:#fff}