/* Küstenquartier Greetsiel — AMMAVI2 eGbR
   Palette: Deichgrün/Petrol, Klinkerrot, Muschelkreide, Reetsand */

:root{
  --tief:#2F6B84;
  --tiefer:#22526A;
  --klinker:#A0523A;
  --klinker-hell:#C07A5D;
  --sand:#D9CBB0;
  --kreide:#F7F7F2;
  --meer:#E7F0F4;
  --blau:#1F5A75;
  --weiss:#FFFFFF;
  --text:#1D2422;
  --grau:#69736F;
  --linie:#DCDCD3;

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

  --max:1120px;
  --pad:clamp(20px,5vw,56px);
}

*,*::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-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--kreide);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(16px,.4vw + 15px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.6rem,8vw,5rem);line-height:1.02}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.12}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25}
p{margin:0 0 1.05em}
a{color:inherit}
img{max-width:100%;display:block}

:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
section[id],div[id]{scroll-margin-top:74px}
.eng{max-width:62ch}

/* ---------- Klinker-Läuferverband als einziges Trennelement ---------- */
.klinkerband{
  height:26px;
  background-color:var(--kreide);
  background-image:
    linear-gradient(var(--sand),var(--sand)),
    linear-gradient(#E7DCC4,#E7DCC4);
  background-repeat:repeat-x,repeat-x;
  background-size:52px 11px,52px 11px;
  background-position:0 2px,26px 15px;
  position:relative;
}
.klinkerband::before,.klinkerband::after{
  content:"";position:absolute;left:0;right:0;height:11px;
  background:repeating-linear-gradient(to right,transparent 0 48px,var(--kreide) 48px 52px);
}
.klinkerband::before{top:2px}
.klinkerband::after{top:15px;transform:translateX(26px)}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(245,246,241,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf-inner{display:flex;align-items:center;gap:24px;min-height:62px}
.marke{font-family:var(--serif);font-size:1.18rem;text-decoration:none;white-space:nowrap}
.marke span{color:var(--blau)}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{text-decoration:none;font-size:.94rem;color:var(--grau)}
.nav a:hover{color:var(--tief)}
.nav .knopf{color:var(--weiss)}
@media (max-width:820px){.nav a:not(.knopf){display:none}}

.knopf{
  display:inline-block;background:var(--tief);color:var(--weiss);
  text-decoration:none;padding:.62em 1.25em;border-radius:2px;
  font-size:.95rem;transition:background .18s ease;
}
.knopf:hover{background:var(--blau)}
.knopf-hell{background:var(--weiss);color:var(--tief)}
.dunkel a.knopf{color:var(--weiss)}
.dunkel a.knopf-hell{color:var(--tief)}
.dunkel a.knopf-hell:hover{color:var(--tiefer)}
.knopf-hell:hover{background:var(--sand);color:var(--tiefer)}

/* ---------- Hero ---------- */
.hero{background:var(--tiefer)}
.hero picture,.hero img{width:100%;height:auto;display:block}
.hero-band{background:var(--tief);color:var(--weiss);padding:clamp(20px,2.8vw,30px) 0 clamp(24px,3.2vw,36px)}
.hero-band h1{margin:0 0 .25em;font-size:clamp(2.2rem,5.5vw,3.6rem);text-wrap:balance}
.hero-ort{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--sand);margin:0 0 .4em}
.hero-zeile{max-width:52ch;color:rgba(255,255,255,.92);margin:0}
.hero-cta{margin:1.15em 0 0}
.knopf-sand{background:var(--sand);color:var(--tiefer);font-size:1.02rem;padding:.75em 1.5em}
.knopf-sand:hover{background:#E7DCC4;color:var(--tiefer)}

/* ---------- Abschnitte ---------- */
section{padding:clamp(56px,7vw,104px) 0}
section.eng-oben{padding-top:clamp(40px,5vw,72px)}
.dunkel{background:var(--tief);color:var(--kreide)}
.meer{background:var(--meer)}
.meer .nachbar{background:var(--weiss)}
.dunkel h2,.dunkel h3{color:var(--weiss)}
.dunkel a{color:var(--sand)}

.zweispalt{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:860px){.zweispalt{grid-template-columns:1fr}}

.vorspann{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55;font-family:var(--serif)}

/* Eckdaten */
.eckdaten{border-top:2px solid var(--tief)}
.eckdaten dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.eckdaten dt{padding:.7em 0;border-bottom:1px solid var(--linie);color:var(--grau);font-size:.94rem}
.eckdaten dd{padding:.7em 0;border-bottom:1px solid var(--linie);margin:0;text-align:right}

/* Wohnungen */
.wohnungen{margin-top:2.4rem;border-top:1px solid rgba(255,255,255,.22)}
.wohnung{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.22);
}
.wohnung .nr{font-family:var(--serif);font-size:2rem;color:var(--sand);line-height:1}
.wohnung h3{margin-bottom:.25em}
.wohnung p{margin:0;color:rgba(241,241,235,.82);font-size:.97rem}
.wohnung .aktion{white-space:nowrap}
.wohnung .bald{color:rgba(241,241,235,.6);font-size:.92rem}
@media (max-width:700px){
  .wohnung{grid-template-columns:auto 1fr;gap:14px}
  .wohnung .aktion{grid-column:2}
}

/* Ausstattung */
.spalten{columns:3 220px;column-gap:clamp(28px,4vw,52px);margin-top:2rem}
.gruppe{break-inside:avoid;margin:0 0 1.9rem}
.gruppe h3{font-size:1.02rem;font-family:var(--sans);font-weight:600;margin-bottom:.5em;
  padding-bottom:.4em;border-bottom:2px solid var(--blau)}
.gruppe ul{margin:0;padding:0;list-style:none}
.gruppe li{padding:.24em 0;font-size:.97rem;color:var(--grau)}

/* Architektenansicht */
.ansicht{margin:clamp(40px,6vw,72px) 0 0;background:var(--weiss);padding:clamp(16px,2.5vw,28px);border:1px solid var(--linie)}
.ansicht img{width:100%;height:auto}
.ansicht figcaption{font-size:.86rem;color:var(--grau);padding-top:.7em}

/* Entfernungen */
.entfernung{margin:0;padding:0;list-style:none;border-top:1px solid var(--linie)}
.entfernung li{display:flex;justify-content:space-between;gap:16px;
  padding:.6em 0;border-bottom:1px solid var(--linie);font-size:.98rem}
.entfernung .m{color:var(--blau);font-variant-numeric:tabular-nums}
.dunkel .entfernung,.dunkel .entfernung li{border-color:rgba(255,255,255,.22)}
.dunkel .entfernung .m{color:var(--sand)}
.dunkel .nachbar{background:rgba(255,255,255,.07);border-left-color:var(--sand)}

/* Nachbar-Kasten */
.nachbar{background:var(--weiss);border-left:4px solid var(--blau);padding:clamp(22px,3vw,34px)}
.nachbar h3{margin-bottom:.5em}
.nachbar p:last-child{margin-bottom:0}

/* Bildstrecken — gleiche Kachelhöhe je Zeile, breite Kachel = zwei Spalten */
.strecke{display:grid;gap:14px;margin-top:2.5rem;align-items:start}
.strecke-4{grid-template-columns:repeat(4,1fr)}
.strecke-3{grid-template-columns:repeat(3,1fr)}
.strecke-2{grid-template-columns:repeat(2,1fr)}
.strecke figure{margin:0}
.strecke img{width:100%;height:auto;background:#dcdcd3}
.strecke .gross{grid-column:span 2}
.hoch img{aspect-ratio:3/4;object-fit:cover}
.hoch .gross img{aspect-ratio:3/2;object-fit:cover}
.quer img{aspect-ratio:4/3;object-fit:cover}
.quer .gross img{aspect-ratio:8/3;object-fit:cover}
.strecke figcaption{font-size:.86rem;color:var(--grau);padding-top:.5em}
.dunkel .strecke figcaption{color:rgba(241,241,235,.7)}
.strecke .notiz{
  align-self:end;font-size:.9rem;color:var(--grau);
  border-top:2px solid var(--blau);padding-top:.8em;margin:0;
}
@media (max-width:900px){
  .strecke-4,.strecke-3{grid-template-columns:repeat(2,1fr)}
  .strecke .notiz{grid-column:span 2}
}
@media (max-width:560px){
  .strecke-4,.strecke-3,.strecke-2{grid-template-columns:1fr}
  .strecke .gross{grid-column:span 1}
  .hoch .gross img{aspect-ratio:3/4}
  .quer .gross img{aspect-ratio:4/3}
  .strecke .notiz{grid-column:span 1}
}

.hinweis{font-size:.9rem;color:var(--grau);margin-top:1.5rem;max-width:60ch}
.dunkel .hinweis{color:rgba(241,241,235,.72)}

/* Bauzeit */
.fakten,
.bauzeit{margin:2.5rem 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.fakten li,
.bauzeit li{border-top:2px solid var(--blau);padding-top:.9em}
.fakten b,
.bauzeit b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;margin-bottom:.15em}
.fakten span,
.bauzeit span{font-size:.95rem;color:var(--grau)}
.dunkel .fakten li,.dunkel .bauzeit li{border-top-color:var(--sand)}
.dunkel .fakten span,
.dunkel .bauzeit span{color:rgba(241,241,235,.75)}
@media (max-width:700px){.fakten,.bauzeit{grid-template-columns:1fr}}
.fakten-eins{grid-template-columns:1fr!important;gap:22px!important;margin-top:0!important}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
@media (max-width:760px){.kontakt-grid{grid-template-columns:1fr}}
.kontakt-grid a{color:var(--blau)}
.direkt{background:var(--weiss);border-left:4px solid var(--blau);padding:clamp(22px,3vw,32px);align-self:start}
.direkt h3{margin-bottom:.5em}
.kontaktzeile{margin:0 0 .35em;font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem)}
.kontaktzeile a{text-decoration:none;border-bottom:1px solid rgba(47,107,132,.35)}
.kontaktzeile a:hover{border-bottom-color:var(--blau)}
.direkt .kontaktzeile:last-child{font-size:clamp(1rem,1.4vw,1.15rem);word-break:break-word}
.kontakt-grid a.knopf{color:var(--weiss)}
.kontakt-grid a.knopf:hover{color:var(--weiss)}

/* Fußzeile */
.fuss{background:var(--tiefer);color:rgba(241,241,235,.72);padding:44px 0 52px;font-size:.92rem}
.fuss a{color:rgba(241,241,235,.72)}
.fuss-inner{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline}
.fuss nav{margin-left:auto;display:flex;gap:22px}
.fuss .name{font-family:var(--serif);font-size:1.05rem;color:var(--kreide)}

/* Rechtstexte */
.recht{max-width:74ch;padding-block:clamp(48px,6vw,88px)}
.recht h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6em}
.recht h2{font-size:1.45rem;margin:2.2em 0 .5em}
.recht h3{font-size:1.1rem;margin:1.6em 0 .3em}
.recht ul{padding-left:1.15em}
.recht li{margin-bottom:.3em}
.recht address{font-style:normal;margin-bottom:1.2em}
.zurueck{display:inline-block;margin-bottom:2.4em;text-decoration:none;color:var(--blau);font-size:.95rem}
.platzhalter{background:#FBE9C8;border-left:4px solid #C99A2E;padding:.9em 1.1em;margin:1.2em 0;font-size:.94rem}