:root{
  --navy:#17334f;
  --navy-deep:#122a41;
  --navy-soft:#2c4c6b;
  --sand:#e2d8c5;
  --sand-light:#efe9de;
  --sand-badge:#ded3bd;
  --band:#f3f3f2;
  --ink:#3d4650;
  --muted:#6f7b86;
  --line:#e2e2df;
  --white:#fff;
  --maxw:1180px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;
  --script:"Caveat",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;background:#e6e4df}
body{
  /* die ganze Seite als klar begrenzter Bogen. Vorher trug nur .hero diesen Deckel,
     dadurch sass der Hero eingerueckt waehrend alles darunter randlos durchlief. */
  max-width:1520px;margin:0 auto;
  box-shadow:0 0 50px rgba(10,28,46,.09);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- Typo bits ---------- */
.eyebrow{
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  margin:0 0 14px;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--navy);margin:0}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:.01em}
h3{font-size:21px;line-height:1.3}
.rule{width:56px;height:1px;background:var(--navy);opacity:.35;margin:26px 0}
.script{font-family:var(--script);color:var(--navy);font-size:30px;line-height:1.25}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;
  font-size:13px;letter-spacing:.06em;
  padding:14px 26px;border:1px solid var(--navy);
  transition:background .25s ease,color .25s ease;
}
.btn:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.btn--ghost{background:rgba(255,255,255,.72);color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn .arw{width:16px;height:9px;flex:none}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid var(--line);
}
.header__inner{
  max-width:1320px;margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:16px;color:var(--navy)}
/* Die Viermastbark kommt als PNG mit Alphakanal. Auf dem weissen Kopf liest sie sich als
   Linienzeichnung, auf dem dunklen Fuss fuellen sich die Segel weiss. Beides ist gewollt. */
.brand__mark{width:152px;height:56px;flex:none;object-fit:contain}
.brand__stack{display:flex;flex-direction:column}
.brand__name{display:block;font-family:var(--serif);font-size:24px;letter-spacing:.17em;color:var(--navy);line-height:1;white-space:nowrap}
.brand__sub{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;color:#5b6772;text-transform:uppercase;margin-top:7px;line-height:1.4;white-space:nowrap}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:13px;white-space:nowrap;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover{color:var(--navy);border-color:var(--navy)}
.nav a.is-active{color:var(--navy);border-color:var(--navy)}
.header__tools{display:flex;align-items:center;gap:22px}
.iconbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--navy);display:flex}
.btn--head{font-size:12px;letter-spacing:.09em;text-transform:uppercase;padding:13px 22px;gap:8px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#0b1c2c}
.hero__media{position:relative;height:clamp(560px,76vh,760px)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%;
  animation:heroZoom 18s ease-out both}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hero__media img{animation:none}
}
/* Weissschleier von links. Loest die fruehere radiale Ellipse ab, die als
   Pseudoelement an der Textbox hing und deren Rand leicht sichtbar wurde. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    /* Deckung bis rund 48 Prozent halten, dort endet die H1 bei 1440 Pixel.
       Faellt sie frueher ab, rutscht die Ueberschrift unter AA. */
    linear-gradient(96deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.46) 20%,
      rgba(255,255,255,.34) 34%,
      rgba(255,255,255,.18) 46%,
      rgba(255,255,255,.04) 56%,
      rgba(255,255,255,0)   64%),
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0)  22%,
      rgba(255,255,255,0)  70%,
      rgba(10,28,46,.18)  100%);
}
.hero__inner{
  position:absolute;inset:0;
  /* 1320 wie .header__inner, sonst steht die H1 versetzt zum Logo darueber */
  max-width:1320px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__box{
  /* 700 statt 620: schmaler bricht die Vertrauenszeile um und laesst einen
     Trennpunkt am Zeilenende haengen */
  max-width:700px;position:relative;z-index:3;color:var(--ink);
  /* Traegt den Kontrast, darum darf der Verlauf dahinter viel leichter sein.
     Die Unschaerfe holt zurueck, was die niedrige Deckkraft kostet. */
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:12px;
  padding:36px 40px 32px;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#22344a;
}
.hero__eyebrow i{width:34px;height:1px;background:currentColor;opacity:.55;flex:none}
.hero__trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 13px;margin:16px 0 0;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
}
.hero__trust i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.hero__cue{
  /* linksbuendig zur Textspalte: dort deckt der Schleier, mittig auf der Einfahrt
     braeuchte der Hinweis einen eigenen Kasten, um ueberhaupt lesbar zu sein */
  position:absolute;z-index:3;left:0;right:0;bottom:30px;
  max-width:1320px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy-deep);
}
.hero h1{
  font-size:clamp(36px,3.7vw,55px);font-weight:500;color:var(--navy);letter-spacing:.05em;line-height:1.05;margin-bottom:18px;
}
.hero__sub{font-family:var(--serif);font-size:clamp(19px,1.75vw,25px);line-height:1.3;color:var(--navy);font-weight:500;margin:0}
.hero .rule{background:var(--navy);opacity:.35;margin:18px 0;width:44px}
.hero__claim{font-family:var(--serif);font-size:clamp(18px,1.6vw,23px);line-height:1.35;color:var(--navy);font-weight:500;margin:0 0 18px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta .btn{font-size:12px;padding:12px 20px;gap:10px}
.badge{
  position:absolute;z-index:3;
  width:132px;height:132px;border-radius:50%;
  background:var(--sand-badge);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--script);color:var(--navy);font-size:21px;line-height:1.15;
  padding:18px;
  box-shadow:0 6px 24px rgba(10,28,45,.18);
}
.badge::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(23,51,79,.22)}
.badge--hero{top:36px;right:44px}
.badge__heart{display:block;font-size:15px;margin-top:6px;opacity:.65}

/* ---------- Feature strip ---------- */
.features{background:var(--band);border-bottom:1px solid var(--line)}
.features__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:30px 0;
}
.feature{text-align:center;padding:0 22px;position:relative}
.feature + .feature::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#dcdcd9;
}
.feature svg{width:30px;height:30px;color:var(--navy);margin:0 auto 14px}
.feature b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);font-weight:500;line-height:1.2}
.feature span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---------- Placeholder images ---------- */
.ph{position:relative;overflow:hidden;background:#e9e5dd}
.ph::after{
  content:attr(data-label);
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(23,51,79,.5);
}
.ph--duene{background:
  radial-gradient(circle at 74% 24%,rgba(255,236,196,.95) 0%,rgba(255,236,196,0) 34%),
  linear-gradient(180deg,#b9d2e2 0%,#dfd6bb 46%,#cdbf9c 68%,#b6a884 100%);
}
.ph--steg{background:
  radial-gradient(circle at 30% 26%,rgba(255,231,186,.95) 0%,rgba(255,231,186,0) 38%),
  linear-gradient(180deg,#a8c6db 0%,#e2d5b6 44%,#c4b492 72%,#9f9273 100%);
}
.ph--gras{background:
  linear-gradient(180deg,#bcd6e6 0%,#d8dfd2 34%,#ddd6bf 62%,#cdc3a6 100%);
}
.ph--room{background:linear-gradient(160deg,#f3f0ea 0%,#e6e1d8 58%,#d8d2c6 100%)}
.ph--room::before{
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:44px;height:44px;opacity:.32;
  background:currentColor;color:var(--navy);
  -webkit-mask:var(--roomicon) center/contain no-repeat;
  mask:var(--roomicon) center/contain no-repeat;
}

/* ---------- Welcome ---------- */
.welcome{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.welcome__media{min-height:420px}
.welcome__media img{width:100%;height:100%;object-fit:cover}
.welcome__text{padding:76px 72px;position:relative}
.welcome__text p{margin:0 0 20px;max-width:46ch;color:#4b545e}
.birds{position:absolute;top:56px;right:64px;width:74px;color:var(--navy);opacity:.55}
.welcome__sign{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:26px}
.welcome__sign svg{width:96px;color:var(--navy);opacity:.9;flex:none}

/* ---------- Wohnungen ---------- */
.fewos{padding:82px 0 90px}
.fewos__head{display:grid;grid-template-columns:1fr minmax(0,460px);gap:48px;align-items:end;margin-bottom:40px}
.fewos__head > p{margin:0;color:var(--muted);font-size:15px;max-width:44ch;justify-self:end}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{position:relative;background:#fff;border:1px solid var(--line);min-width:0;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.card:hover{box-shadow:0 12px 30px rgba(23,51,79,.12);transform:translateY(-3px)}
.card__img{aspect-ratio:4/3}
img.card__img{display:block;width:100%;object-fit:cover}
.card__body{padding:18px 14px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px;margin-bottom:8px}
.card__meta{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 18px}
/* Bei sechs Spalten ist der Knopf nur rund 155 Pixel breit. Mit nowrap kann der Text
   nicht schrumpfen, zu grosse Werte druecken den Pfeil aus dem Innenabstand heraus.
   Gemessen muss "Wohnung ansehen" plus Pfeil unter 155 bleiben. */
.card .btn{font-size:10.5px;letter-spacing:.04em;padding:11px 12px;gap:8px;
  justify-content:space-between;width:100%;margin-top:auto;white-space:nowrap}
.card .btn .arw{width:13px}
/* Die ganze Kachel klickbar machen, ohne einen zweiten Link zu setzen: der
   vorhandene Knopf spannt sich unsichtbar ueber die Kachel. Ein Link im Bild
   waere ein zweiter Tabstopp zum selben Ziel, verschachtelte Links waeren
   ungueltiges Markup. */
.card .btn::after{content:"";position:absolute;inset:0}
.card{cursor:pointer}
.card__medien{overflow:hidden}
.card:hover .card__img{transform:scale(1.04)}
.card__img{transition:transform .4s ease}
@media(prefers-reduced-motion:reduce){
  .card__img{transition:none}
  .card:hover .card__img{transform:none}
}

/* ---------- Deich ---------- */
.deich{background:var(--sand);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.deich__text{padding:84px 0 84px 0;display:flex;flex-direction:column;justify-content:center}
.deich__textinner{width:100%;max-width:calc(var(--maxw)/2);margin-left:auto;padding:0 44px 0 32px;position:relative}
.deich__textinner p{color:#54504a;max-width:42ch;margin:0 0 30px}
.deich .birds{position:static;margin:0;width:64px;opacity:.45}
.deich__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.deich__top h2{white-space:nowrap}
.deich__media{min-height:420px}
.deich__media img{width:100%;height:100%;object-fit:cover}

/* ---------- Haus & Garten ---------- */
.garten{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;padding:86px 0}
.garten__text{padding-right:64px}
.garten__text p{color:#4b545e;max-width:40ch;margin:0 0 30px}
.garten__grid{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:390px}
.garten__grid img{width:100%;height:100%;object-fit:cover}
.garten__grid a:first-child{grid-row:span 2}
.garten__grid a{display:block;overflow:hidden;height:100%}
.garten__grid img{transition:transform .5s ease}
.garten__grid a:hover img{transform:scale(1.04)}

/* ---------- Kontakt ---------- */
.kontakt{position:relative;overflow:hidden}
.kontakt__bg{position:absolute;inset:0}
.kontakt__bg::after{content:"";position:absolute;inset:0;left:0;right:0;top:0;bottom:0;transform:none;background:rgba(238,233,221,.5)}
.kontakt__inner{position:relative;z-index:2;text-align:center;padding:78px 32px 86px;max-width:var(--maxw);margin:0 auto}
.kontakt .eyebrow{color:var(--navy);opacity:.7}
.kontakt h2{margin-bottom:10px}
.kontakt__lead{font-family:var(--serif);font-size:20px;color:var(--navy);margin:0 0 42px}
.contacts{display:flex;justify-content:center;gap:76px;flex-wrap:wrap;margin-bottom:42px}
.contact{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;color:var(--navy);line-height:1.5}
.contact__ic{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.contact__ic svg{width:18px;height:18px}
.contact b{font-weight:700;font-size:14px}
.contact > span:not(.contact__ic){color:var(--navy);opacity:.85}
.contact .contact__ic{color:#fff;opacity:1}
.badge--kontakt{top:64px;right:56px;font-size:22px}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.86)}
.footer__inner{max-width:1320px;margin:0 auto;padding:44px 32px 36px;display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer .brand svg{color:#fff}
.footer .brand__name{color:#fff}
.footer .brand{color:#fff}
.footer__marke{display:flex;flex-direction:column;gap:16px}
.footer__adresse{margin:0;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.footer__adresse b{color:#fff;font-weight:700;letter-spacing:.04em}
.footer .brand__sub{color:rgba(255,255,255,.6)}
.footer__nav{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;padding-top:6px}
.footer__nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer__right{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:6px}
.footer__legal{display:flex;gap:22px;font-size:12.5px;color:rgba(255,255,255,.62)}
.footer__script{font-family:var(--script);font-size:17px;color:var(--sand-badge);opacity:.85}

/* ---------- Anfrageformular ---------- */
.anfrage{
  max-width:720px;margin:0 auto;text-align:left;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(23,51,79,.14);
  padding:34px 34px 30px;
}
.anfrage__reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:18px}
.anfrage__feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.anfrage__feld--voll{grid-column:1 / -1}
/* Anreise, Abreise und Personen teilen sich eine Zeile, sonst bleibt rechts eine Luecke */
.anfrage__reihe--drei{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 20px;margin-bottom:18px}
/* nur die Feldbeschriftungen, nicht die Einwilligungszeile, die ist auch ein label */
.anfrage__feld label{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);opacity:.75;
}
.anfrage input,.anfrage select,.anfrage textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid rgba(23,51,79,.22);
  padding:11px 13px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.anfrage textarea{resize:vertical;min-height:120px;line-height:1.6}
.anfrage input:focus,.anfrage select:focus,.anfrage textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(23,51,79,.12);
}
/* Honigtopf: fuer Menschen unsichtbar, fuer Maschinen verlockend.
   Kein display:none, das ueberspringen manche Bots gezielt. */
.anfrage__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage__ok{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;line-height:1.55;color:var(--ink);margin:4px 0 22px;
}
.anfrage__ok input{width:16px;height:16px;flex:none;margin-top:3px;padding:0}
.anfrage__ok span{opacity:.9;letter-spacing:0;text-transform:none}
.anfrage__ok a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.anfrage .btn{border:0;cursor:pointer;font-family:var(--sans);width:100%;justify-content:center}
.anfrage__hinweis{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center}

/* ---------- Danke- und Fehlerseite ---------- */
.meldung{max-width:var(--maxw);margin:0 auto;padding:110px 32px 120px;text-align:center}
.meldung h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(30px,3.6vw,44px);margin:0 0 16px}
.meldung p{font-size:16.5px;max-width:52ch;margin:0 auto 16px}
.meldung .btn{margin-top:26px}
.meldung__ic{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
.meldung__ic svg{width:28px;height:28px}

/* ---------- Impressum und Datenschutz ---------- */
.legal{padding:54px 0 76px}
.legal h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(32px,4vw,46px);line-height:1.12;margin:0}
.legal__body{max-width:68ch;margin-top:38px}
.legal__body h2{font-size:24px;margin:46px 0 14px}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{font-size:17px;margin:28px 0 10px}
.legal__body p{margin:0 0 14px;color:#4b545e;font-size:15px}
.legal__body ul{margin:0 0 14px;padding-left:20px;color:#4b545e;font-size:15px}
.legal__body li{margin:0 0 7px}
.legal__body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal__body address{font-style:normal;color:#4b545e;font-size:15px;line-height:1.7;margin:0 0 14px}
.legal__stand{font-size:13px;color:var(--muted);margin-top:42px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  /* Navigation bleibt sichtbar und rutscht in eine eigene Zeile unter die Marke.
     Zweizeilig waere der Kopf rund 170 Pixel hoch, klebend haette er ein Fuenftel
     des Telefonbildschirms belegt. Darum hier nicht klebend. */
  .header{position:static}
  html{scroll-padding-top:12px}
  .header__inner{gap:14px 24px}
  .header__tools{order:2;margin-left:auto}
  .nav{
    order:3;width:100%;margin-left:0;justify-content:center;
    gap:12px 20px;padding-top:12px;border-top:1px solid var(--line);
  }
  .cards{grid-template-columns:repeat(3,1fr)}
  .welcome__text{padding:60px 40px}
  .deich__textinner{padding:0 40px}
}
@media(max-width:860px){
  .wrap{padding:0 22px}
  .header__inner{padding:12px 22px;gap:12px 18px}
  .nav{gap:10px 16px}
  .nav a{font-size:12.5px}
  .features__grid{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:26px 0}
  .feature:nth-child(3)::before,.feature + .feature::before{display:none}
  .feature:nth-child(even)::before{display:block}
  .welcome,.deich,.garten{grid-template-columns:1fr}
  .fewos{padding:56px 0 64px}
  .fewos__head{grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .fewos__head > p{justify-self:start;max-width:none}
  .hero__media{height:clamp(440px,86vw,560px)}
  .hero__media img{object-position:center 58%}
  .hero__box{max-width:none}
  /* schmaler Schirm: der Text nimmt die volle Breite, der Schleier muss mit */
  .hero__media::after{
    background:
      linear-gradient(96deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.94) 58%,
        rgba(255,255,255,.86) 78%,
        rgba(255,255,255,.62) 92%,
        rgba(255,255,255,.40) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.28) 0%,
        rgba(255,255,255,0)  22%,
        rgba(255,255,255,0)  70%,
        rgba(10,28,46,.18)  100%);
  }
  .hero__cue{display:none}
  /* gestapelt haengen die Trennpunkte am Zeilenende in der Luft */
  .hero__trust{display:block;line-height:1.9}
  .hero__trust i{display:none}
  .hero__trust span{display:block}
  .deich__text{padding:56px 0}
  .garten{padding:60px 0;gap:36px}
  .garten__text{padding-right:0}
  .garten__grid{height:320px}
  .birds{display:none}
  .badge{width:118px;height:118px;font-size:19px;padding:16px}
  .badge--hero{top:24px;right:22px}
  .badge--kontakt{top:26px;right:20px}
  .contacts{gap:34px}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .footer__right{margin-left:0;align-items:flex-start;text-align:left}
}
@media(max-width:600px){
  .anfrage{padding:24px 20px 22px}
  .anfrage__reihe{grid-template-columns:1fr;gap:16px}
  .meldung{padding:70px 22px 80px}
  .deich__textinner{padding:0 22px}
  /* auf dem Telefon muss die Ueberschrift umbrechen duerfen */
  .deich__top h2{white-space:normal}
  .header__inner{padding:11px 18px;gap:12px}
  .brand{gap:10px;min-width:0}
  .brand__mark{width:124px;height:46px}
  .brand__name{font-size:18px;letter-spacing:.13em}
  .brand__sub{font-size:7.5px;letter-spacing:.13em;margin-top:5px}
  .brand__loc{display:none}
  /* Knopf heisst hier nur noch "Anfragen", capitalize macht aus dem Rest wieder ein A */
  .btn--head{font-size:11px;padding:10px 14px;letter-spacing:.04em;text-transform:capitalize}
  .btn__lead{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card__body{padding:14px 12px 16px}
  .card h3{font-size:17px}
  .card__meta{font-size:12px;margin-bottom:14px}
  .card .btn{font-size:10.5px;padding:10px 12px;gap:8px;white-space:nowrap}
  .card .btn .arw{width:13px}
  .hero__inner{padding:0 22px}
  .hero__box{padding:24px 22px 22px;border-radius:10px}
  .welcome__text{padding:48px 22px}
  .hero__cta{flex-direction:column;align-items:flex-start}
  .badge{display:none}
}
@media(max-width:480px){
  /* zwei Spalten werden hier zu schmal fuer "Wohnung ansehen" in einer Zeile */
  .cards{grid-template-columns:1fr;gap:20px}
  .card__img{aspect-ratio:3/2}
  .card__body{padding:18px 18px 20px}
  .card h3{font-size:20px}
  .card__meta{font-size:13px;margin-bottom:18px}
  .card .btn{font-size:11.5px;padding:12px 16px}
  .card .btn .arw{width:16px}
}
@media(max-width:380px){
  /* iPhone SE und aehnlich schmal: der Markenblock muss unter den Knopf passen */
  .header__inner{padding:10px 14px;gap:10px}
  .brand__mark{width:104px;height:38px}
  .brand__name{font-size:15px;letter-spacing:.08em}
  .brand__sub{font-size:7px;letter-spacing:.1em;margin-top:4px}
  .header__tools{gap:10px}
  .btn--head{font-size:10.5px;padding:9px 11px}
}

/* ---------- Detailseite einer Wohnung ---------- */
.detail{padding:54px 0 10px}
.back{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.back:hover{color:var(--navy)}
.back svg{width:16px;height:9px;flex:none;transform:rotate(180deg)}
.detail h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(32px,4vw,48px);line-height:1.12;margin:0}
.detail__top{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start;margin-top:34px}
.detail__top p{margin:0;color:#4b545e;max-width:56ch}
.facts{border-top:1px solid var(--line)}
.fact{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.fact dt{color:var(--muted)}
.fact dd{margin:0;color:var(--navy);text-align:right}
.detail__cta{margin-top:26px;width:100%;justify-content:space-between}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:38px 0 8px}
.gal figure{margin:0}
.gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--band)}
.gal figcaption{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.preise{background:var(--band);padding:62px 0 70px;margin-top:56px}
.preise__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start;margin-top:30px}
.ptab{width:100%;border-collapse:collapse;font-size:14px}
.ptab th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line)}
.ptab td{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.ptab td:last-child,.ptab th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.ptab caption{caption-side:top;text-align:left;font-size:14px;color:var(--muted);padding-bottom:14px}
.hinweis{font-size:13px;color:var(--muted);margin:20px 0 0;max-width:46ch}
.ptab__zeit{font-size:12px;color:var(--muted)}
.nachbar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:46px 0 64px}
.nachbar a{font-family:var(--serif);font-size:20px;color:var(--navy)}
.nachbar a:hover{color:var(--navy-soft)}
@media(max-width:1080px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.detail__top,.preise__grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:600px){.gal{grid-template-columns:1fr}}
/* Anfrageblock am Fuss der Detailseite */
.wanfrage{background:var(--sand-light);border-top:1px solid var(--line)}
.wanfrage__inner{max-width:var(--maxw);margin:0 auto;padding:62px 32px 72px;text-align:center}
.wanfrage h2{margin-bottom:10px}
.wanfrage__lead{font-family:var(--serif);font-size:20px;color:var(--navy);margin:0 0 36px}
@media(max-width:600px){.wanfrage__inner{padding:48px 22px 56px}}