@font-face { font-family: "Spectral"; src: url(/assets/fonts/spectral-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/assets/fonts/spectral-300-kursiv.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(/assets/fonts/mulish.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --grund: #F4F8F9; --flaeche: #FFFFFF; --text: #1E3A4C; --leise: #4F6573;
  --wasser: #7FB3C8; --dunst: #D9E8EE; --schilfgold: #C9A45C; --gold-text: #82632A;
  --akzent: var(--text); --akzent-text: #FFFFFF; --linie: #CFE0E7; --fehler: #A23B2E; --fokus: var(--text);
  --feld: #FFFFFF;
  --schrift-titel: "Spectral", Georgia, serif; --schrift-text: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --titel-gewicht: 300; --rundung: 3px; --rundung-fenster: 6px; --groesse: 17px;
}
em { font-style: italic; }
.fw-huelle { width: min(1140px, calc(100% - 2 * var(--rand))); margin-inline: auto; }
.logo-welle { fill: none; stroke: var(--wasser); stroke-width: 2.4; stroke-linecap: round; }
.logo-halm { fill: none; stroke: #F4F8F9; stroke-width: 2.2; stroke-linecap: round; }
.logo-kolben { fill: var(--schilfgold); }
.logo-wort { fill: #F4F8F9; font: 300 36px var(--schrift-titel); }

/* Kopf: Panorama, Horizont, Spiegelung */
.fw-kopf { position: relative; --band-h: clamp(240px, 36svh, 42.86vw); --strip-h: 56px; }
.fw-kopf .fw-band { height: var(--band-h); }
.fw-band img { object-position: 50% 58%; }
.fw-horizont {
  position: absolute; z-index: 2; inset: var(--band-h) 0 auto; height: var(--strip-h);
  border-top: 1px solid var(--schilfgold);
  background: linear-gradient(#142836C4, #142836A8 62%, #14283600);
}
.fw-horizont-zeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.fw-logo { display: block; line-height: 0; }
.fw-logo svg { height: 40px; width: auto; overflow: visible; }
.fw-knopf-hell { min-height: 44px; padding: 8px 18px; background: var(--schilfgold); border-color: var(--schilfgold); color: var(--text); }

.fw-nav {
  position: absolute; z-index: 3; top: var(--band-h); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 32px; height: var(--strip-h); padding-inline: 40px; color: #F4F8F9;
  background: radial-gradient(closest-side, #14283680 50%, #14283600);
}
.fw-nav a { padding: 8px 0; line-height: 1.5; text-decoration: none; letter-spacing: .02em; text-shadow: 0 1px 10px #142836; }
.fw-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--schilfgold); }

.fw-spiegel {
  position: relative; height: calc(var(--band-h) * .6); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 96%); mask-image: linear-gradient(#000 20%, transparent 96%);
}
.fw-spiegelbild { position: absolute; inset: 0 0 auto; height: var(--band-h); transform: scaleY(-1); }
.fw-spiegelbild::before {
  content: ""; position: absolute; inset: 0 -16px;
  background: url(/assets/light/bilder/ferienwohnung-quer-1600.webp) 50% 58% / cover no-repeat;
  filter: brightness(.88) saturate(.85);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--wx, 0) * 12px)) scaleY(calc(1 - .03 * var(--welle, 0)));
}
.fw-licht {
  position: absolute; inset: 0 -16px; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, #FFFFFF00 0 9px, #FFFFFF59 9px 11px, #FFFFFF00 11px 23px, #FFFFFF33 23px 24px);
  opacity: calc(.8 * var(--welle, 0));
  transform: translate(calc(var(--wx, 0) * -10px), calc(var(--welle, 0) * 8px));
}

/* Titel mit seinem Spiegelbild im See */
.fw-kopf-text { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; margin-top: 4px; padding-bottom: 56px; position: relative; }
.fw-titel { --zeilen: 2.16em; }
.fw-kopf h1, .fw-titel-spiegel { font-size: clamp(44px, 4.6vw, 68px); line-height: 1.08; }
.fw-titel-spiegel {
  height: calc(var(--zeilen) * .42); margin-top: 8px;
  font-family: var(--schrift-titel); font-weight: 300; color: var(--schilfgold);
  border-top: 1px solid var(--schilfgold);
  -webkit-mask-image: linear-gradient(#000e, transparent 95%); mask-image: linear-gradient(#000e, transparent 95%);
}
.fw-titel-spiegel span {
  display: block; height: var(--zeilen); transform-origin: 50% 0;
  transform: translate(calc(var(--wx, 0) * 6px), calc(var(--zeilen) * .42 + 2px)) scaleY(-.42);
}
.fw-wohnung h3, .fw-tun dt { color: var(--gold-text); }
.fw-kopf-satz { display: grid; gap: 18px; justify-items: start; padding-top: 12px; }
.fw-kopf-satz p { max-width: 38ch; font-size: 19px; line-height: 1.5; color: var(--leise); }

section h2 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.05; }

/* Zwei Wohnungen wie ein Prospekt, gespiegelt: jede mit ihrem Bild */
.fw-wohnungen { padding-block: 64px 96px; }
.fw-wohnung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: start; margin-top: 48px; }
.fw-steg { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); margin-top: 88px; }
.fw-wohnung-text { display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--schilfgold); }
.fw-seeblick .fw-wohnung-text { padding-right: 56px; }
.fw-steg .fw-wohnung-text { padding-left: 56px; }
.fw-wohnung h3 { font: italic 300 clamp(44px, 5vw, 72px)/1.05 var(--schrift-titel); }
.fw-eckdaten { font-weight: 600; letter-spacing: .04em; }
.fw-wohnung-text p:last-child { max-width: 34ch; font-size: 19px; color: var(--leise); }
.fw-wohnung-bild { aspect-ratio: 5 / 4; background: none; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.fw-balkon img { object-position: 50% 72%; }
.fw-stegbild img { object-position: 100% 62%; transform: scale(1.4); transform-origin: 84% 96%; }
.fw-kennzeichnung { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--leise); }

/* Preisrechner wie eine Buchungskarte am Steg */
.fw-preis { padding-block: 96px; background: linear-gradient(var(--dunst), #E9F2F5); }
.fw-rechner { margin-top: 36px; }
.fw-rechner-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.fw-eingaben { display: grid; gap: 30px; }
.fw-preis .frage legend, .fw-paar label, .fw-anfrage-teil .frage > label {
  margin-bottom: 6px; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
}
.fw-preis .wahl { gap: 4px 28px; }
.fw-preis .chip span {
  gap: 12px; padding: 9px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font: italic 300 22px/1.5 var(--schrift-titel);
}
.fw-preis .chip span::before {
  content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--text); border-radius: 50%;
  transition: background-color .2s, box-shadow .3s;
}
.fw-preis .chip input:checked + span { background: none; color: var(--text); border-bottom-color: var(--schilfgold); }
.fw-preis .chip input:checked + span::before { background: var(--text); box-shadow: 0 0 0 4px var(--grund), 0 0 0 5.5px var(--schilfgold); }
.fw-preis .chip input:hover + span::before { box-shadow: 0 0 0 4px #C9A45C40; }
.fw-preis .eingabe {
  min-height: 46px; padding: 8px 0; border: 0; border-bottom: 1.5px solid var(--text); border-radius: 0;
  background: transparent; font: 300 24px/1.4 var(--schrift-titel);
}
.fw-preis .eingabe:focus { border-bottom-color: var(--schilfgold); outline-offset: 4px; }
.fw-preis .eingabe[aria-invalid] { border-bottom-color: var(--fehler); }
.fw-preis .formhinweis { font: italic 300 17px/1.5 var(--schrift-titel); color: var(--leise); }
.fw-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.fw-paar .formhinweis { grid-column: 1 / -1; margin-top: 0; }
.fw-paar label { display: block; }
.fw-aufstellung { display: grid; gap: 12px; padding: 30px; background: var(--flaeche); border-top: 3px solid var(--schilfgold); box-shadow: 0 20px 60px #1E3A4C14; }
.fw-rechner-fehler { color: var(--fehler); font-size: 18px; line-height: 1.5; }
.fw-rechner-fehler:empty { display: none; }
.fw-aufstellung table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fw-aufstellung th, .fw-aufstellung td { padding: 10px 0; border-bottom: 1px solid var(--linie); font-weight: 400; text-align: left; vertical-align: top; }
.fw-aufstellung td { padding-left: 16px; text-align: right; white-space: nowrap; }
.fw-aufstellung tfoot th, .fw-aufstellung tfoot td { padding-top: 14px; border-bottom: 0; border-top: 2px solid var(--text); font: 300 30px/1.2 var(--schrift-titel); }
.fw-klein { font-size: 15px; line-height: 1.5; color: var(--leise); }
.fw-aufstellung .knopf { justify-self: start; margin-top: 8px; }
.fw-anfrage-teil { display: grid; gap: 20px; max-width: 520px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--schilfgold); }
.fw-anfrage-teil[hidden] { display: none; }
.fw-anfrage-teil .knopf { justify-self: start; }
.fw-summe-welle { display: block; width: 100%; height: 14px; }
.fw-summe-welle path { fill: none; stroke: var(--schilfgold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fw-summe-welle.laeuft path { stroke-dasharray: 1; animation: fw-welle-durch 1.2s cubic-bezier(.65, 0, .35, 1); }
@keyframes fw-welle-durch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Was man hier macht, Gut zu wissen */
.fw-umgebung { padding-block: 104px 48px; }
.fw-tun { margin: 32px 0 0; }
.fw-tun div { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.fw-tun dt { font: italic 300 40px/1.15 var(--schrift-titel); }
.fw-tun dd { margin: 0; font-size: 19px; color: var(--leise); }
.fw-wissen { padding-block: 48px 96px; }
.fw-fakten { list-style: none; margin: 28px 0 0; padding: 0; max-width: 640px; }
.fw-fakten li { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 19px; line-height: 1.5; }
.fw-fakten svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--schilfgold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Abschluss: am Ende des Stegs */
.fw-abschluss { padding-top: 40px; background: linear-gradient(transparent, var(--dunst) 70%); }
.fw-abschluss-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.fw-steg-bild { display: grid; justify-items: center; }
.fw-steg-bild .knopf { position: relative; z-index: 1; }
.fw-steg-bild svg { display: block; width: 100%; max-width: 480px; height: auto; }
.fw-horizontlinie { fill: none; stroke: var(--schilfgold); stroke-width: 1.5; }
.fw-wasserlinie { fill: none; stroke: var(--wasser); stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.fw-brett-hell { fill: #BE9765; }
.fw-brett-dunkel { fill: #B08856; }
.fw-fugen { fill: none; stroke: #6B5136; stroke-width: .8; }
.fw-kante { fill: none; stroke: #4A3726; stroke-width: 2.4; stroke-linecap: round; }
.fw-pfosten { fill: none; stroke: #4A3726; stroke-width: 4; stroke-linecap: round; }
.fw-abschluss-text { display: grid; gap: 14px; justify-items: start; padding-bottom: 64px; }
.beispielangaben { font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.fw-adresse { font: 300 26px/1.35 var(--schrift-titel); }
.fw-leise { color: var(--leise); }
.fw-textlink {
  min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: 600 16px/1.5 var(--schrift-text); color: var(--text);
  text-decoration: underline; text-decoration-color: var(--schilfgold); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.fw-textlink:hover { text-decoration-color: var(--text); }
.beispiel-ferienwohnung .fuss { padding-top: 0; background: var(--dunst); width: 100%; padding-inline: max(var(--rand), calc((100% - 1180px) / 2)); }
.fw-ende { display: block; width: 100%; height: 4px; }
.fw-ende path { fill: none; stroke: var(--schilfgold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (max-width: 1099px) {
  .fw-nav { gap: 20px; font-size: 15px; }
}

@media (max-width: 900px) {
  .fw-rechner-raster { grid-template-columns: 1fr; gap: 32px; }
  .fw-wohnung { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .fw-steg { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .fw-seeblick .fw-wohnung-text { padding-right: 32px; }
  .fw-steg .fw-wohnung-text { padding-left: 32px; }
}

@media (max-width: 759px) {
  .fw-kopf { --band-h: 56.25vw; --strip-h: 52px; }
  .fw-band img { object-position: 60% 50%; }
  .fw-spiegelbild::before { background-image: url(/assets/light/bilder/ferienwohnung-quer-800.webp); background-position: 60% 50%; }
  .fw-spiegel { height: calc(var(--band-h) * .7); }
  .fw-logo svg { height: 32px; }
  .fw-nav { position: static; translate: none; justify-content: center; gap: 28px; height: 44px; margin-top: -6px; color: var(--text); }
  .fw-nav { background: none; padding-inline: 0; }
  .fw-nav a { text-shadow: none; }
  .fw-kopf-text { grid-template-columns: 1fr; gap: 10px; margin-top: 6px; padding-bottom: 48px; }
  .fw-kopf h1, .fw-titel-spiegel { font-size: clamp(32px, 9.4vw, 40px); }
  .fw-kopf-satz { gap: 16px; padding-top: 0; }
  .fw-kopf-satz p { font-size: 17px; }
  .fw-wohnungen { padding-block: 40px 64px; }
  .fw-wohnung, .fw-steg { grid-template-columns: 1fr; margin-top: 28px; background: var(--flaeche); box-shadow: 0 12px 40px #1E3A4C14; }
  .fw-seeblick .fw-wohnung-bild { order: -1; }
  .fw-wohnung-bild { aspect-ratio: 4 / 5; -webkit-mask-image: none; mask-image: none; }
  .fw-stegbild img { transform: none; }
  .fw-wohnung-text, .fw-seeblick .fw-wohnung-text, .fw-steg .fw-wohnung-text { padding: 18px 20px 24px; border-top: 3px solid var(--schilfgold); }
  .fw-wohnung h3 { font-size: 44px; }
  .fw-preis { padding-block: 64px; }
  .fw-paar { grid-template-columns: 1fr; }
  .fw-preis .chip span { font-size: 20px; }
  .fw-aufstellung { padding: 22px 18px; }
  .fw-aufstellung tfoot th, .fw-aufstellung tfoot td { font-size: 26px; }
  .fw-umgebung { padding-block: 64px 32px; }
  .fw-tun div { grid-template-columns: 1fr; gap: 4px; }
  .fw-tun dt { font-size: 34px; }
  .fw-wissen { padding-block: 32px 64px; }
  .fw-abschluss-raster { grid-template-columns: 1fr; gap: 32px; }
  .fw-abschluss-text { order: -1; padding-bottom: 0; }
  .fw-adresse { font-size: 22px; }
}