/* ==========================================================================
   Ferienwohnung am Peeneufer
   Stylesheet, eine Datei, keine externen Abhaengigkeiten
   ========================================================================== */

:root {
  --tief:      #1c3a4b;
  --tief-hell: #2a5568;
  --see:       #3d7f96;
  --see-hell:  #e7f0f2;
  --schilf:    #7f8f63;
  --sand:      #e6dccb;
  --sand-hell: #f2ece1;
  --papier:    #fdfbf7;
  --hell:      #f4f0e9;
  --text:      #2b3238;
  --grau:      #64707a;
  --linie:     #ddd5c8;
  --weiss:     #ffffff;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breit: 1140px;
  --schmal: 720px;
  --radius: 4px;
  --schatten: 0 2px 14px rgba(28, 58, 75, .09);

  /* Ab hier: alles, was eine Design-Variante veraendern koennen soll.
     Eine Variante ist eine zweite CSS-Datei, die nur diese Werte ueberschreibt.
     Die HTML-Seiten bleiben dabei unveraendert. */
  --bereich-y: 3.2rem;      /* Luft ueber und unter jedem Abschnitt */
  --radius-knopf: 4px;
  --radius-bild: 4px;
  --radius-karte: 4px;
  --karte-bg: #ffffff;
  --karte-rand: 1px solid var(--linie);
  --karte-schatten: var(--schatten);
  --kopf-bg: rgba(253, 251, 247, .96);
  --kopf-rand: 1px solid var(--linie);
  --hero-hoehe: clamp(340px, 62vh, 620px);
  --hero-verlauf: linear-gradient(to top, rgba(15,32,42,.72) 0%, rgba(15,32,42,.28) 45%, rgba(15,32,42,.1) 100%);
  --band-bg: linear-gradient(140deg, #1c3a4b 0%, #2a5568 60%, #3d7f96 130%);
  --augenbraue-transform: uppercase;
  --augenbraue-spacing: .16em;
  --h1-gewicht: 400;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Der Kopf klebt oben. Ohne diesen Abstand landet ein Sprungziel wie
     buchung.php#anfrage genau darunter und die Ueberschrift ist verdeckt.
     Der Wert entspricht der Kopfhoehe plus etwas Luft. */
  scroll-padding-top: 106px;
}
@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

/* Das hidden-Attribut muss staerker sein als jede display-Regel weiter unten.
   Ohne diese Zeile bleiben die Pfeile der Bildvergroesserung sichtbar, obwohl
   das Skript sie ausgeblendet hat: .lupe-knopf setzt display:flex und gewinnt
   sonst gegen die Vorgabe des Browsers. */
[hidden] { display: none !important; }

a { color: var(--see); }
a:hover { color: var(--tief); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tief);
  line-height: 1.25;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--h1-gewicht); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; letter-spacing: .01em; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

/* --- Skip-Link ----------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tief); color: #fff; padding: .7rem 1.2rem;
}
.skip:focus { left: 0; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--kopf-bg);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: var(--kopf-rand);
}
.kopf-innen {
  max-width: var(--breit); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.marke svg { width: 34px; height: 34px; flex: none; }
.logo-kreis  { fill: var(--logo-kreis, #1c3a4b); }
.logo-welle1 { stroke: var(--logo-welle1, #7fc0d4); }
.logo-welle2 { stroke: var(--logo-welle2, #3d7f96); }
.logo-schilf { stroke: var(--logo-schilf, #8a9a6b); }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name { font-family: var(--serif); font-size: 1.12rem; color: var(--tief); }
.marke-ort { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grau); }

.nav { display: flex; align-items: center; gap: .2rem; }
.nav a {
  display: block; padding: .45rem .7rem; text-decoration: none;
  color: var(--text); font-size: .93rem; border-radius: var(--radius);
}
.nav a:hover { background: var(--hell); color: var(--tief); }
.nav a[aria-current="page"] { color: var(--tief); box-shadow: inset 0 -2px 0 var(--see); }

.sprache {
  margin-left: .6rem; padding-left: .8rem; border-left: 1px solid var(--linie);
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.sprache a {
  text-decoration: none; color: var(--grau); padding: .3rem .35rem;
  display: inline-flex; align-items: center; gap: .38rem;
}
.sprache a:hover { color: var(--tief); }
.sprache .aktiv { color: var(--tief); font-weight: 600; }
/* Die Flagge ist Beiwerk und traegt keine Bedeutung, der Text daneben schon.
   Deshalb steht sie im SVG auf aria-hidden und hier nur auf leiser. */
.flagge {
  width: 20px; height: 13px; flex: none; display: block;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(28, 58, 75, .18);
  opacity: .78; transition: opacity .15s ease;
}
.sprache a:hover .flagge, .sprache .aktiv .flagge { opacity: 1; }

.menue-knopf {
  display: none; background: none; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .45rem .6rem; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--tief);
}

@media (max-width: 900px) {
  .menue-knopf { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: .5rem 1.25rem 1rem; box-shadow: var(--schatten);
  }
  .nav.offen { display: flex; }
  .nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .sprache { margin: .6rem 0 0; padding: .6rem 0 0; border-left: 0; border-top: 1px solid var(--linie); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; background: var(--tief); overflow: hidden; }
/* Der Verlauf liegt ueber der ganzen Bildbreite, nicht nur ueber der Textspalte.
   Sonst zeichnen sich links und rechts zwei senkrechte Kanten ab. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--hero-verlauf); pointer-events: none;
}
.hero img { width: 100%; height: var(--hero-hoehe); object-fit: cover; opacity: .92; }
.hero-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  max-width: var(--breit); margin: 0 auto; padding: 2rem 1.25rem 2.6rem; z-index: 2;
}
.hero-text h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.hero-text p { color: #f2ece1; font-size: 1.12rem; max-width: 34em; margin-bottom: 1.2em; }

.seitenkopf {
  background: var(--tief);
  background-image: var(--band-bg);
  color: #fff; padding: 3rem 1.25rem 2.6rem;
}
.seitenkopf-innen { max-width: var(--breit); margin: 0 auto; }
.seitenkopf h1 { color: #fff; margin-bottom: .25em; }
.seitenkopf p { color: #dfe9ec; max-width: 40em; margin: 0; font-size: 1.05rem; }

/* --- Layout -------------------------------------------------------------- */
.bereich { padding: var(--bereich-y) 1.25rem; }
.bereich.hell { background: var(--hell); }
.bereich.sand { background: var(--sand-hell); }
.bereich.tief { background: var(--tief); color: #e6eef0; }
.bereich.tief h2, .bereich.tief h3 { color: #fff; }
.bereich.tief a { color: #b9dde8; }
.innen { max-width: var(--breit); margin: 0 auto; }
.innen.schmal { max-width: var(--schmal); }

.vorspann { font-size: 1.12rem; color: var(--grau); max-width: 40em; }
.augenbraue {
  display: block; font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: var(--augenbraue-spacing); text-transform: var(--augenbraue-transform);
  color: var(--see); margin-bottom: .7rem;
}

/* --- Raster -------------------------------------------------------------- */
.raster { display: grid; gap: 1.6rem; }
.raster.zwei   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.drei   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.raster.vier   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.raster.versetzt { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2.6rem; }
@media (max-width: 800px) { .raster.versetzt { grid-template-columns: 1fr; gap: 1.6rem; } }

.karte {
  background: var(--karte-bg); border: var(--karte-rand); border-radius: var(--radius-karte);
  padding: 1.5rem 1.5rem 1.2rem; box-shadow: var(--karte-schatten);
}
.karte h3 { margin-top: 0; }
.karte p:last-child, .karte ul:last-child { margin-bottom: 0; }
.karte-bild { padding: 0; overflow: hidden; }
.karte-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karte-bild { border-radius: var(--radius-karte); }
.karte-bild .karte-inhalt { padding: 1.2rem 1.4rem 1.4rem; }

.merkmal { display: flex; gap: .9rem; align-items: flex-start; }
.merkmal svg { width: 26px; height: 26px; flex: none; color: var(--see); margin-top: .25rem; }
.merkmal h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: .25em; }
.merkmal p { font-size: .95rem; color: var(--grau); margin: 0; }

/* --- Zahlenreihe unter dem Hero ------------------------------------------ */
.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  background: var(--weiss);
}
.zahlen div { padding: 1.5rem 1rem; text-align: center; border-left: 1px solid var(--linie); }
.zahlen div:first-child { border-left: 0; }
.zahlen b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--tief); line-height: 1.1;
}
.zahlen span {
  display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grau); margin-top: .4rem;
}
@media (max-width: 620px) {
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahlen div:nth-child(3) { border-left: 0; }
  .zahlen div:nth-child(n+3) { border-top: 1px solid var(--linie); }
}

/* --- Aufklappbare Fragen (FAQ) ------------------------------------------- */
.frage {
  border-bottom: 1px solid var(--linie); background: var(--weiss);
}
.frage summary {
  cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; color: var(--tief);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--see); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.frage[open] summary::after { content: "\2013"; }
.frage summary:hover { background: var(--hell); }
.frage .antwort { padding: 0 1.1rem 1.1rem; }
.frage .antwort p:last-child { margin-bottom: 0; }
.fragen { border-top: 1px solid var(--linie); }

/* --- Hinweisboxen -------------------------------------------------------- */
.hinweis {
  border-left: 3px solid var(--see); background: var(--see-hell);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.6rem 0;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis h4 { margin-top: 0; color: var(--tief); }
.hinweis.sand { border-left-color: var(--schilf); background: var(--sand-hell); }
.hinweis.offen { border-left-color: #c08a2e; background: #faf2e2; }

/* --- Tabellen ------------------------------------------------------------ */
.tabelle-huelle { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--weiss); }
caption { text-align: left; font-size: .9rem; color: var(--grau); padding-bottom: .5rem; }
th, td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--linie); }
th { background: var(--hell); font-weight: 600; color: var(--tief); font-size: .88rem;
     letter-spacing: .03em; text-transform: uppercase; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
tbody tr:hover { background: var(--sand-hell); }

/* --- Listen -------------------------------------------------------------- */
.haken { list-style: none; padding: 0; }
.haken li { position: relative; padding-left: 1.6rem; margin-bottom: .45em; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .45rem; height: .8rem; border: solid var(--see);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.zwei-spalten { columns: 2; column-gap: 2.5rem; }
.zwei-spalten li { break-inside: avoid; }
@media (max-width: 640px) { .zwei-spalten { columns: 1; } }

.daten { margin: 0; }
.daten div { display: flex; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.daten dt { flex: 0 0 42%; color: var(--grau); margin: 0; font-size: .93rem; }
.daten dd { margin: 0; font-weight: 500; }

/* --- Knoepfe ------------------------------------------------------------- */
.knopf {
  display: inline-block; padding: .8rem 1.6rem; border-radius: var(--radius-knopf);
  background: var(--see); color: #fff; text-decoration: none; font-weight: 600;
  font-size: .97rem; border: 1px solid var(--see); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--tief); border-color: var(--tief); color: #fff; }
.knopf.rand { background: transparent; color: var(--tief); border-color: var(--tief); }
.knopf.rand:hover { background: var(--tief); color: #fff; }
.knopf.hell { background: #fff; color: var(--tief); border-color: #fff; }
.knopf.hell:hover { background: var(--sand); border-color: var(--sand); color: var(--tief); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* --- Galerie ------------------------------------------------------------- */
/* min(..., 100%) ist wichtig: Ohne das waere die Spalte auf einem schmalen
   Handy breiter als der Bildschirm und die ganze Seite liesse sich seitlich
   schieben. */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
/* Vier Bilder in drei Spalten lassen das vierte allein stehen. Diese Fassung
   stellt zwei mal zwei, das ist ruhiger. */
.galerie.paare { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-bild); }
.galerie figcaption { font-size: .85rem; color: var(--grau); padding-top: .45rem; }

.bild-rahmen { border: var(--karte-rand); border-radius: var(--radius-bild); background: var(--karte-bg); padding: .8rem; }
.bild-rahmen img { border-radius: calc(var(--radius-bild) - 2px); }
.bild-rahmen figcaption { font-size: .85rem; color: var(--grau); padding-top: .6rem; text-align: center; }

/* --- Formular ------------------------------------------------------------ */
.formular { display: grid; gap: 1.1rem; }
.feld { display: flex; flex-direction: column; gap: .35rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .feld-paar { grid-template-columns: 1fr; } }
label { font-size: .9rem; font-weight: 600; color: var(--tief); }
label .opt { font-weight: 400; color: var(--grau); }
input, select, textarea {
  font: inherit; font-size: .97rem; padding: .65rem .8rem; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--see); outline-offset: 1px; border-color: var(--see); }
textarea { min-height: 8rem; resize: vertical; }
.pflichthinweis { font-size: .85rem; color: var(--grau); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.zustimmung input { width: auto; margin-top: .35rem; flex: none; }
.zustimmung label { font-weight: 400; color: var(--text); }
.meldung { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.meldung.gut { background: #e6f2e8; border-left: 3px solid #4a8055; }
.meldung.schlecht { background: #fbe9e7; border-left: 3px solid #b3453a; }

/* --- Platzhalterflaechen ------------------------------------------------- */
.platzhalter {
  border: 2px dashed var(--linie); border-radius: var(--radius); background: var(--sand-hell);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--grau);
}
.platzhalter strong { display: block; color: var(--tief); font-family: var(--serif);
  font-size: 1.2rem; margin-bottom: .4rem; }

/* --- CTA-Band ------------------------------------------------------------ */
.band {
  background-image: var(--band-bg);
  color: #fff; text-align: center; padding: var(--bereich-y) 1.25rem;
}
.band h2 { color: #fff; }
.band p { color: #dbe7ea; max-width: 36em; margin: 0 auto 1.6rem; }
.band .knopfreihe { justify-content: center; }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { background: #16303e; color: #b6c6cd; padding: 3rem 1.25rem 1.6rem; font-size: .93rem; }
.fuss-innen { max-width: var(--breit); margin: 0 auto; display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fuss h3 { color: #fff; font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.fuss a { color: #cfe0e6; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .45em; }
.fuss-unten {
  max-width: var(--breit); margin: 2.2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.13); display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .85rem; color: #8ea3ac;
}

/* --- Noch offene Angaben -------------------------------------------------
   Alles, was Thomas vor dem Livegang noch eintragen muss, ist so markiert.
   Sichtbar gelb, damit nichts uebersehen wird. Vor dem Livegang verschwindet
   die Markierung mit dem Text, den sie umschliesst.
   -------------------------------------------------------------------------- */
.tbd {
  background: #fdf0c9; color: #7a5b00; padding: 0 .32em;
  border-radius: 2px; box-decoration-break: clone; font-style: normal;
}

/* --- Hinweisstreifen der Testfassung -------------------------------------
   Nur waehrend der Testphase sichtbar, siehe TESTFASSUNG in build.py. */
.testband {
  position: relative; z-index: 60;
  background: #e8a33b; color: #3a2a08; text-align: center;
  padding: .55rem 1rem; font-size: .88rem; line-height: 1.4;
}
.testband strong { color: #2e2106; }

/* --- Bilder vergroessern -------------------------------------------------
   Jedes Bild im Inhalt steckt in einem Link auf die Bilddatei selbst. Ohne
   JavaScript oeffnet ein Klick also einfach das Bild, das ist ein sinnvolles
   Verhalten und kein Fehlerfall. Mit JavaScript faengt site.js den Klick ab
   und zeigt das Bild im Overlay unten.
   -------------------------------------------------------------------------- */
/* Eine Bildgruppe: sichtbar ist nur das Kartenbild. Die weiteren Aufnahmen
   des Raums stehen unsichtbar daneben und erscheinen erst in der
   Vergroesserung, siehe data-lupe in site.js. Sie sind display:none und
   werden deshalb erst geladen, wenn jemand sie wirklich ansieht. */
.bildgruppe { position: relative; }
.bildgruppe .karte { margin: 0; }
.bildgruppe .karte-bild { position: relative; }

/* Der Zaehler im Bild sagt, dass hinter der Karte mehr steckt. Er faengt
   keine Klicks ab, sonst waere ausgerechnet die Ecke tot, auf die man
   klickt. */
.fotozahl {
  position: absolute; top: .7rem; right: .7rem; z-index: 2; pointer-events: none;
  background: rgba(16, 34, 44, .74); color: #fff;
  font-size: .78rem; letter-spacing: .04em; font-weight: 600;
  padding: .28rem .6rem; border-radius: 999px;
  backdrop-filter: saturate(140%) blur(3px);
}
.karte-bild:hover .fotozahl { background: rgba(16, 34, 44, .9); }

.schmalband { padding-top: 1.6rem; padding-bottom: 1.6rem; }
button.knopf { font: inherit; cursor: pointer; }

.lupe { display: block; line-height: 0; cursor: zoom-in; }
.lupe img { transition: filter .18s ease; }
.lupe:hover img { filter: brightness(1.04); }
.lupe:focus-visible { outline: 3px solid var(--see); outline-offset: 3px; }

dialog.lupe-fenster {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden; color: #fff;
}
dialog.lupe-fenster::backdrop { background: rgba(8, 18, 24, .92); }
.lupe-buehne {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; padding: 3.5rem 1rem 2.5rem;
}
.lupe-buehne img {
  max-width: min(1400px, 92vw); max-height: 80vh; width: auto; height: auto;
  object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lupe-text { margin: 0; font-size: .95rem; color: #d6e2e8; text-align: center; max-width: 44em; }
.lupe-zaehler { font-size: .82rem; color: #8ea3ad; letter-spacing: .1em; }
.lupe-gruppe {
  font-size: .8rem; color: #b9cdd6; letter-spacing: .14em; text-transform: uppercase;
  margin: 0;
}
.lupe-knopf {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 1.6rem; line-height: 1; font-family: var(--sans);
  transition: background .15s ease;
}
.lupe-knopf:hover { background: rgba(255,255,255,.26); }
.lupe-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Der Schliessen-Knopf traegt sichtbar das Wort, nicht nur ein Kreuz. Ein
   blosses x wird auf dem Handy oft nicht als Ausgang erkannt. */
.lupe-zu {
  top: 1rem; right: 1rem; font-size: 1rem; width: auto; height: 44px;
  border-radius: 22px; padding: 0 1.1rem; gap: .5rem; font-weight: 600;
}
.lupe-zu b { font-size: 1.5rem; font-weight: 400; line-height: 1; }
.lupe-zurueck { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lupe-vor { right: 1.2rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lupe-knopf { width: 44px; height: 44px; }
  .lupe-zu { width: auto; padding: 0 .9rem; }
  .lupe-zurueck { left: .5rem; }
  .lupe-vor { right: .5rem; }
  .lupe-buehne img { max-height: 68vh; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.lupe-fenster[open] .lupe-buehne img { animation: lupe-auf .22s ease-out; }
  @keyframes lupe-auf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}

/* --- Preise und Angebotsstern -------------------------------------------
   Der Stern sitzt in einer eigenen Zeile neben dem Angebotstext, nicht frei
   schwebend ueber der Tabelle. So kann er nichts verdecken, egal wie breit
   das Fenster ist.
   -------------------------------------------------------------------------- */
.preisblock { position: relative; }

.angebot-kopf {
  display: flex; align-items: center; gap: 1.2rem; justify-content: space-between;
  background: var(--sand-hell); border-radius: var(--radius-karte, 14px);
  padding: 1rem 1.3rem; margin-bottom: 1.4rem;
}
.angebot-worte strong {
  display: block; color: var(--tief); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em;
}
.angebot-worte span { display: block; color: var(--grau); font-size: .95rem; }

.angebot-stern {
  flex: none; width: 116px; height: 116px; display: grid; place-items: center;
  position: relative; transform: rotate(-9deg);
  filter: drop-shadow(0 3px 10px rgba(20, 65, 92, .2));
}
.angebot-stern svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.angebot-stern svg polygon { fill: var(--schilf, #e8a33b); }
.stern-text {
  position: relative; text-align: center; line-height: 1.15;
  color: #4a3406; padding: 0 .55rem;
}
.stern-text b {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase;
}
.stern-text.lang b { font-size: .6rem; }
.stern-text i { display: block; font-style: normal; font-size: 1.1rem; font-weight: 700; }

@media (max-width: 560px) {
  .angebot-kopf { flex-direction: column-reverse; align-items: flex-start; gap: .9rem; }
  .angebot-stern { width: 104px; height: 104px; }
}

table.preise s, .preisblock table s { color: var(--grau); text-decoration-thickness: 1px; margin-right: .35em; }
table.preise .angebotspreis, .preisblock .angebotspreis { color: #a86a05; }
table.preise tr.jetzt, .preisblock tr.jetzt { background: var(--see-hell); }
.jetzt-marke {
  display: inline-block; vertical-align: 2px; margin-left: .4em;
  background: var(--see); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .1rem .5rem;
}
.preisblock + .daten { margin-top: 1.6rem; }

/* Der Angebotshinweis im Anfrage-Band der Startseite */
.band-angebot {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--schilf, #e8a33b); color: #3a2a08;
  border-radius: 999px; padding: .45rem 1.1rem;
  font-size: .95rem; font-weight: 700; margin: 0 auto 1.2rem;
}
.band-angebot::before { content: "\2605"; font-size: 1.05rem; }

/* Die Zahlenreihe mit fuenf Kacheln, wenn ein Preis angezeigt wird */
.zahlen.fuenf { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .zahlen.fuenf { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .zahlen.fuenf { grid-template-columns: repeat(2, 1fr); } }

/* --- Gaestebuch ----------------------------------------------------------
   Sterne sind zweimal dasselbe SVG uebereinander: unten die graue Reihe,
   darueber die goldene, beschnitten auf den passenden Anteil. Damit sind
   auch Zwischenwerte wie 4,3 richtig dargestellt, ohne halbe Sternbilder.
   -------------------------------------------------------------------------- */
.sterne {
  position: relative; display: inline-block; width: 108px; height: 21.6px;
  flex: none; line-height: 0;
}
.sterne svg { display: block; width: 108px; height: 21.6px; }
.sterne-leer svg polygon { fill: #d8dee2; }
.sterne-voll {
  position: absolute; left: 0; top: 0; height: 100%; overflow: hidden;
  display: block;
}
.sterne-voll svg polygon { fill: var(--schilf, #e8a33b); }

.notenkopf {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--sand-hell); border-radius: var(--radius-karte, 14px);
  padding: 1.1rem 1.4rem; margin-bottom: 1.8rem;
}
.note { display: flex; align-items: baseline; gap: .3rem; }
.note strong {
  font-family: var(--serif); font-size: 2.6rem; line-height: 1;
  color: var(--tief); font-weight: 400;
}
.note span { color: var(--grau); font-size: .95rem; }
.note-rechts p { margin: .3rem 0 0; }

.bewertungen { display: grid; gap: 1.2rem; }
.bewertung {
  background: var(--karte-bg, #fff); border: var(--karte-rand, 1px solid var(--linie));
  border-radius: var(--radius-karte, 4px); padding: 1.2rem 1.4rem;
  box-shadow: var(--karte-schatten, none);
}
.bewertung-kopf {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.bewertung-kopf p { margin: 0; }
.bewertung-name { font-weight: 700; color: var(--tief); }
.bewertung-name .klein { font-weight: 400; }
.bewertung-text { margin: .8rem 0 0; }

.antwort {
  margin: 1rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid var(--see);
  background: var(--see-hell); border-radius: 0 var(--radius-karte, 4px) var(--radius-karte, 4px) 0;
}
.antwort p { margin: 0; }
.antwort p + p { margin-top: .4rem; }
.antwort-kopf { font-weight: 700; color: var(--tief); font-size: .93rem; }

/* Sternauswahl im Formular.
   Im Quelltext stehen die Sterne von 5 nach 1, damit der Geschwisterwaehler
   alle kleineren einfaerben kann. flex-direction: row-reverse dreht die
   Anzeige wieder um, sichtbar steht also der erste Stern links. Ohne CSS
   bleiben es fuenf normale, beschriftete Optionsfelder. */
.sternwahl { border: 0; padding: 0; margin: 0 0 1.2rem; }
.sternwahl legend { padding: 0; font-weight: 700; color: var(--tief); }
.sternwahl-reihe {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: .2rem; margin-top: .3rem;
}
.sternwahl-reihe input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.sternwahl-reihe label {
  cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 6px; margin: 0; font-weight: 400;
}
.sternwahl-reihe label svg { width: 34px; height: 34px; }
.sternwahl-reihe label svg polygon { fill: #d8dee2; transition: fill .12s ease; }
.sternwahl-reihe input:checked ~ label svg polygon { fill: var(--schilf, #e8a33b); }
.sternwahl-reihe:hover input:checked ~ label svg polygon { fill: #d8dee2; }
.sternwahl-reihe label:hover svg polygon,
.sternwahl-reihe label:hover ~ label svg polygon { fill: var(--schilf, #e8a33b); }
.sternwahl-reihe input:focus-visible + label { outline: 3px solid var(--see); outline-offset: 2px; }

.feldhinweis { display: block; font-size: .84rem; color: var(--grau); margin-top: .3rem; }
.hinweis.echtheit p { font-size: .93rem; }

/* Nur fuer Vorlesegeraete sichtbar */
.versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .notenkopf { gap: .8rem; }
  .bewertung-kopf .sterne { width: 90px; height: 18px; }
  .bewertung-kopf .sterne svg { width: 90px; height: 18px; }
}


/* --- Kleinkram ----------------------------------------------------------- */
.klein { font-size: .87rem; color: var(--grau); }
.mt0 { margin-top: 0; }
.zentriert { text-align: center; }
.abstand-oben { margin-top: 2.4rem; }

@media print {
  .kopf, .band, .knopfreihe, .fuss { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* ----------------------------------------------------------------- Rechner */
.rechner {
  background: var(--flaeche-hell, #f2f5f8);
  border-radius: var(--radius-gross, 18px);
  padding: 1.4rem 1.4rem 1.2rem;
  margin: 0 0 1.6rem;
}
.rechner h3 { margin: 0 0 .2rem; }
.rechner > p.klein { margin: 0 0 1rem; }
.rechner-felder {
  display: grid;
  gap: .8rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.rechner-felder label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-weight: 600;
  font-size: .92rem;
}
.rechner-felder input[type="date"],
.rechner-felder select {
  font: inherit;
  padding: .55rem .6rem;
  border: 1px solid var(--rand, #c8d3dd);
  border-radius: var(--radius-klein, 10px);
  background: #fff;
  color: inherit;
  min-height: 44px;
}
.rechner-tier {
  flex-direction: row !important;
  align-items: center;
  gap: .5rem !important;
  min-height: 44px;
}
.rechner-tier input { width: 1.15rem; height: 1.15rem; }
.r-aus { display: block; margin-top: 1.1rem; }
.r-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rand, #c8d3dd);
}
.r-zeile span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-summe {
  border-bottom: 0;
  border-top: 2px solid currentColor;
  margin-top: .3rem;
  padding-top: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
}
.r-mittel { margin: .3rem 0 0; font-size: .85rem; opacity: .75; }
.r-hinweis { margin: .6rem 0 0; font-size: .9rem; opacity: .8; }
.r-warnung {
  opacity: 1;
  background: var(--akzent-blass, #fdf3e0);
  border-left: 4px solid var(--akzent, #e08a14);
  padding: .6rem .8rem;
  border-radius: 0 var(--radius-klein, 10px) var(--radius-klein, 10px) 0;
}
.r-uebernehmen { margin-top: 1rem; }
@media (max-width: 480px) {
  .rechner { padding: 1.1rem 1rem 1rem; }
}

/* Der Angebotshinweis im Ergebnis des Preisrechners */
.r-angebot { color: #8a6206; font-weight: 700; }


/* ==========================================================================
   Variante G: Frisch am Wasser  (Variante D mit Parallax)

   Farben, Formen und Schrift wie in Variante D: weiss, Ostseeblau,
   Sonnengelb, runde Ecken, serifenlose Ueberschriften. Dazu vier
   Scroll-Effekte, alle ohne JavaScript:

   1. Das Titelbild steht still, der Inhalt schiebt sich darueber hinweg.
   2. Die Zahlenkachel schwebt weiterhin ueber dem Bild und wandert mit.
   3. Das Anfrage-Band am Seitenende hat ein feststehendes Foto im Ruecken.
   4. Karten und Bilder blenden sich beim Hereinscrollen ein und fahren
      dabei leicht zurueck.

   Auf Handys und bei "Bewegung reduzieren" schalten sich die Effekte
   selbst ab, siehe ganz unten.
   ========================================================================== */

:root {
  --logo-kreis: #1682ab;
  --logo-welle1: #ffffff;
  --logo-welle2: #bfe4f0;
  --logo-schilf: #e8a33b;

  --tief:      #14415c;
  --tief-hell: #1d6485;
  --see:       #1682ab;
  --see-hell:  #e4f2f7;
  --schilf:    #e8a33b;
  --sand:      #ffeccc;
  --sand-hell: #fff6e8;
  --papier:    #ffffff;
  --hell:      #f4f8fa;
  --text:      #263238;
  --grau:      #5f7079;
  --linie:     #e3eaee;

  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bereich-y: 4.6rem;
  --radius-knopf: 999px;
  --radius-bild: 18px;
  --radius-karte: 18px;
  --karte-bg: #ffffff;
  --karte-rand: 0;
  --karte-schatten: 0 6px 26px rgba(20, 65, 92, .10);
  --kopf-bg: rgba(255, 255, 255, .94);
  --kopf-rand: 1px solid var(--linie);
  --hero-verlauf: linear-gradient(to top, rgba(10,40,58,.72) 0%, rgba(10,40,58,.20) 48%, rgba(10,40,58,0) 84%);
  --band-bg: none;
  --h1-gewicht: 700;
}

/* --- Schrift und Formen wie in Variante D -------------------------------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.augenbraue { color: var(--see); font-weight: 700; letter-spacing: .12em; }
.bild-rahmen { border: 0; padding: 0; background: none; box-shadow: var(--karte-schatten); overflow: hidden; }
.bild-rahmen img { border-radius: 18px; }
.bild-rahmen figcaption { padding: .9rem 1.1rem; }
.karte-bild { overflow: hidden; }
.galerie img { border-radius: 18px; }
.haken li::before { border-color: var(--schilf); }
.knopf { font-weight: 700; padding: .85rem 1.9rem; }
.band .knopf.hell { background: var(--schilf); border-color: var(--schilf); color: #3a2a08; }
.band .knopf.hell:hover { background: #f5b955; border-color: #f5b955; color: #3a2a08; }
.merkmal svg { color: var(--see); }
.fuss { background: #14415c; }

/* --- 1. Das stehende Titelbild ------------------------------------------
   Das Bild wird am Fenster festgemacht, der Hero behaelt nur noch seine
   Hoehe. Alles Folgende liegt darueber und deckt es beim Scrollen zu.
   ----------------------------------------------------------------------- */
.hero {
  height: 92vh; height: 92svh;
  background: none; overflow: visible;
}
.hero img {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100svh;
  object-fit: cover; opacity: 1;
}
.hero::before { position: fixed; z-index: 1; }
.hero-text { z-index: 2; padding-bottom: 8.5rem; }

main > *:not(.hero) { position: relative; z-index: 3; background-color: var(--papier); }
.fuss { position: relative; z-index: 3; }

/* --- 2. Die schwebende Zahlenkachel -------------------------------------
   Sie schiebt sich mit ihrer oberen Haelfte ueber das stehende Titelbild.
   Die untere Haelfte bekommt ein weisses Band ueber die volle Breite, sonst
   blitzt links und rechts neben der Kachel das Bild durch und es sieht nach
   Fehler statt nach Absicht aus.
   ----------------------------------------------------------------------- */
.zahlen {
  position: relative;
  max-width: var(--breit); margin: -3.6rem auto 0;
  border: 0; border-radius: 18px; box-shadow: 0 10px 34px rgba(20, 65, 92, .16);
  overflow: hidden; width: calc(100% - 2.5rem);
  background-color: #fff;
}
.zahlen::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 100vw; top: 55%; bottom: -1px; z-index: -1;
  background: var(--papier);
}
.zahlen div { border-left: 1px solid var(--linie); padding: 1.7rem 1rem; }
.zahlen b { color: var(--see); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }

/* --- 3. Das Anfrage-Band mit stehendem Foto ------------------------------ */
.band {
  background-image: linear-gradient(rgba(11, 52, 76, .76), rgba(11, 52, 76, .76)),
                    url("../bilder/garten.jpg");
  background-size: cover;
  background-position: center 45%;
  background-attachment: fixed;
  padding-block: 7rem;
}
.band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Unterseiten: derselbe Effekt im Seitenkopf */
.seitenkopf {
  background-image: linear-gradient(rgba(11, 52, 76, .74), rgba(11, 52, 76, .74)),
                    url("../bilder/titelbild.jpg");
  background-size: cover;
  background-position: center 50%;
  background-attachment: fixed;
  padding-block: 5rem 4rem;
}

/* --- 4. Einblenden beim Hereinscrollen ---------------------------------- */
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes langsam-heran {
  from { transform: scale(1.10); }
  to   { transform: scale(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .karte, .galerie figure, .merkmal, .platzhalter, .tabelle-huelle, .fragen, .bild-rahmen {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    .galerie img, .karte-bild img, .bild-rahmen img {
      animation: langsam-heran linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 44%;
    }
    .galerie figure { overflow: hidden; border-radius: 18px; }
  }
}

/* --- Abschalter --------------------------------------------------------- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero img { position: static; width: 100%; height: clamp(360px, 62vh, 560px); }
  .hero::before { position: absolute; }
  .hero-text { padding-bottom: 7rem; }
  .band, .seitenkopf { background-attachment: scroll; }
  .band { padding-block: var(--bereich-y); }
}