/* walther architektur ag — Designsystem, zweite Fassung
   Aufbau nach der Colorlib-Vorlage "Arclabs": dunkle Leiste, grosse schmale
   Versalien, helle Abschnitte im Wechsel, zentrierte Ueberschriften mit
   kleiner Akzentzeile. Farben aber aus dem Originallogo der Firma:
   Blau #467CC0, Orange #F7980B. */

:root{
  --weiss:#FFFFFF;
  --papier:#F6F5F2;
  --nacht:#12233A;          /* dunkle Leiste und Fuss */
  --nacht-tief:#0C1A2C;
  --tinte:#1B2733;
  --tinte-weich:#4A5766;
  --grau:#7A828C;
  --linie:#E2E0DA;
  --linie-dunkel:rgba(255,255,255,.14);
  --blau:#467CC0;
  --blau-hell:#6E9BD6;
  --orange:#F7980B;        /* Markenton, fuer Flaechen und Striche */
  --orange-text:#A25E08;   /* dunklere Variante, nur fuer Schrift auf Hell */

  --rand:clamp(1.25rem,5vw,5.5rem);
  --breit:1440px;
  --kurve:cubic-bezier(.22,1,.36,1);
  --kopf:82px;
}
@media (min-width:1000px){ :root{ --kopf:94px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--kopf); }
body{
  margin:0; background:var(--weiss); color:var(--tinte);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* ---------- Schrift ---------- */
h1,h2,h3,h4{ margin:0; font-family:"Barlow Condensed",Impact,sans-serif; font-weight:700;
  line-height:.98; letter-spacing:.005em; text-transform:uppercase; text-wrap:balance; }
.t-riesig{ font-size:clamp(3rem,9vw,8.5rem); }
.t-gross{  font-size:clamp(2.4rem,5.4vw,4.75rem); }
.t-mittel{ font-size:clamp(1.75rem,3vw,2.9rem); }
.t-klein{  font-size:clamp(1.25rem,1.7vw,1.65rem); }

.marke{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange-text); font-weight:400;
}
/* Auf dunklem Grund traegt der volle Markenton */
.block--nacht .marke,.ruf .marke,.seitenkopf .marke,.karte__inhalt .marke,.mobilmenue .marke{ color:var(--orange); }
.karte__inhalt .marke{ color:#fff; }
.marke--strich{ display:inline-flex; align-items:center; gap:.75rem; }
.marke--strich::before{ content:""; width:28px; height:1px; background:var(--orange); flex:none; }
.lead{ font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem); line-height:1.65; color:var(--tinte-weich); }
.fliess p{ margin:0 0 1.2em; color:var(--tinte-weich); max-width:68ch; }
.fliess p:last-child{ margin-bottom:0; }

/* ---------- Raster ---------- */
.huelle{ width:100%; max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand); }
.block{ padding-block:clamp(4.5rem,9vw,8.5rem); }
.block--eng{ padding-block:clamp(3rem,5.5vw,5rem); }
.block--papier{ background:var(--papier); }
.block--nacht{ background:var(--nacht); color:rgba(255,255,255,.78); }
.block--nacht h2,.block--nacht h3{ color:#fff; }

/* zentrierter Abschnittskopf, wie in der Vorlage */
.kopfzeile{ text-align:center; max-width:44rem; margin:0 auto clamp(2.5rem,5vw,4rem); }
.kopfzeile .marke{ display:inline-block; margin-bottom:1rem; }
.kopfzeile p{ margin:1.25rem 0 0; color:var(--tinte-weich); }
.block--nacht .kopfzeile p{ color:rgba(255,255,255,.66); }
.kopfzeile--links{ text-align:left; margin-inline:0; }

/* ---------- Leiste ---------- */
.leiste{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--kopf);
  display:flex; align-items:center;
  /* Ohne Hintergrund steht die Leiste ueber der hellen Scroll-Szene, darum
     dunkle Schrift. Sobald sie Hintergrund bekommt, dreht sich das um. */
  color:var(--tinte); background:transparent;
  transition:background .4s var(--kurve), color .4s var(--kurve), box-shadow .4s var(--kurve);
}
.leiste.fest{ background:var(--nacht); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.08); }
.leiste__innen{ width:100%; max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.logo{ display:block; width:clamp(185px,19vw,240px); color:currentColor; flex:none; }
.logo svg{ width:100%; height:auto; }
.logo__text{ fill:currentColor; }
.logo__blau{ fill:var(--blau); }
.leiste.fest .logo__blau,.fuss .logo__blau{ fill:var(--blau-hell); }
.logo__orange{ fill:var(--orange); }
.logo__linie{ fill:currentColor; opacity:.4; }

.navi{ display:none; }
@media (min-width:1060px){ .navi{ display:flex; align-items:center; gap:clamp(1.4rem,2.2vw,2.4rem); } }
.navi a{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:600;
  font-size:1.0625rem; letter-spacing:.08em; text-decoration:none; white-space:nowrap;
  padding-block:.35rem; position:relative; transition:color .3s;
}
.navi a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--kurve); }
.navi a:hover{ color:var(--orange); }
.navi a:hover::after,.navi a[aria-current="page"]::after{ transform:scaleX(1); }
.navi a[aria-current="page"]{ color:var(--orange); }

.burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 9px; margin-right:-9px; background:none; border:0; cursor:pointer; }
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; background:currentColor; transition:transform .4s var(--kurve); }
.burger span:nth-child(1){ width:26px; }
.burger span:nth-child(2){ width:18px; }
body.offen .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.offen .burger span:nth-child(2){ transform:translateY(-7px) rotate(-45deg); width:26px; }

.mobilmenue{
  position:fixed; inset:0; z-index:55; background:var(--nacht); color:#fff;
  padding:calc(var(--kopf) + 2rem) var(--rand) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .38s var(--kurve), transform .5s var(--kurve), visibility .38s;
  overflow-y:auto;
}
body.offen .mobilmenue{ opacity:1; visibility:visible; transform:none; }
.mobilmenue a{ text-decoration:none; }
.mobilmenue__liste{ display:flex; flex-direction:column; }
.mobilmenue__liste a{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:700;
  font-size:clamp(1.9rem,8vw,2.8rem); letter-spacing:.02em; line-height:1.1;
  padding-block:.42em; border-bottom:1px solid var(--linie-dunkel);
}
.mobilmenue__liste a[aria-current="page"]{ color:var(--orange); }
.mobilmenue__fuss{ margin-top:2.5rem; display:grid; gap:.4rem; font-size:.9375rem; color:rgba(255,255,255,.6); }
.mobilmenue__fuss a{ color:#fff; }

/* ---------- Scroll-Szene ---------- */
.szene{ position:relative; height:310svh; background:var(--papier); }
.buehne{ position:sticky; top:0; height:100svh; overflow:clip; }
.buehne canvas{ position:absolute; inset:0; width:100%; height:100%; }
.buehne__schleier{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(246,245,242,.95) 0%, rgba(246,245,242,.72) 30%, rgba(246,245,242,0) 56%);
}
.buehne__text{
  position:absolute; z-index:2; left:var(--rand); top:50%; transform:translateY(-50%);
  width:min(30rem,78vw);
}
.buehne__text h1{ margin-top:1.1rem; }
.stufen{ position:relative; margin-top:clamp(1.6rem,3vw,2.4rem); min-height:7.5rem; }
.stufe{ position:absolute; inset:0 auto auto 0; opacity:0; transform:translateY(12px);
  transition:opacity .45s var(--kurve), transform .45s var(--kurve); }
.stufe.an{ opacity:1; transform:none; }
.stufe b{ display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  font-size:1.45rem; font-weight:700; letter-spacing:.03em; }
.stufe span{ display:block; margin-top:.35rem; color:var(--tinte-weich); max-width:34ch; line-height:1.6; font-size:.9375rem; }

.balken{ position:absolute; z-index:2; left:var(--rand); bottom:clamp(1.75rem,4vh,2.75rem); display:flex; gap:6px; }
.balken i{ position:relative; width:38px; height:2px; background:rgba(27,39,51,.18); overflow:hidden; }
.balken i em{ position:absolute; inset:0; background:var(--orange); transform-origin:left; transform:scaleX(0); }

.lader{ position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:var(--papier); transition:opacity .5s; font-family:"IBM Plex Mono",monospace;
  font-size:.75rem; letter-spacing:.14em; color:var(--grau); }
.lader.weg{ opacity:0; pointer-events:none; }

/* Das Standbild tritt nur auf kleinen Geraeten an die Stelle der Bildfolge. */
.buehne__standbild{ display:none; }
.buehne__standbild img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:820px){
  /* Mobil kein Scroll-Ablauf: ein ruhiges Standbild statt der 156 Frames.
     Damit faellt auch der lange Scrollweg weg. */
  .szene{ height:100svh; }
  .buehne canvas,.balken,.lader,.stufen{ display:none; }
  .buehne__standbild{ display:block; position:absolute; inset:0; }
  .buehne__text{ bottom:3.5rem; }
  /* Oben ein dunkler Schleier, damit die Leiste auf dem Foto lesbar bleibt,
     unten der helle, auf dem die Schrift steht. */
  .buehne__schleier{
    background:
      linear-gradient(to bottom, rgba(14,26,44,.58) 0%, rgba(14,26,44,.18) 14%, rgba(14,26,44,0) 26%),
      linear-gradient(0deg, rgba(246,245,242,.98) 0%, rgba(246,245,242,.9) 26%, rgba(246,245,242,.35) 44%, rgba(246,245,242,0) 58%);
  }
  /* Ueber dem Standbild ist die Leiste hell, nicht dunkel. */
  .leiste:not(.fest){ color:#fff; }
  .leiste:not(.fest) .logo__blau{ fill:var(--blau-hell); }
  .buehne__text{ top:auto; bottom:5.5rem; transform:none; width:calc(100% - 2 * var(--rand)); }
  .stufen{ min-height:6.5rem; }
}

/* ---------- Kleiner Seitenkopf ---------- */
.seitenkopf{
  position:relative; background:var(--nacht); color:#fff;
  padding-top:calc(var(--kopf) + clamp(3.5rem,8vw,6.5rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
  overflow:clip;
}
.seitenkopf__bild{ position:absolute; inset:0; opacity:.26; }
.seitenkopf__bild img{ width:100%; height:100%; object-fit:cover; }
.seitenkopf .huelle{ position:relative; z-index:2; }
.seitenkopf .lead{ color:rgba(255,255,255,.72); max-width:52ch; margin-top:1.3rem; }
.krume{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; color:rgba(255,255,255,.55); }
.krume a{ text-decoration:none; color:rgba(255,255,255,.72); }
.krume a:hover{ color:var(--orange); }

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:600;
  font-size:1.0625rem; letter-spacing:.09em; text-decoration:none;
  padding:.85rem 1.8rem; border:1px solid currentColor;
  transition:background .32s var(--kurve), color .32s var(--kurve), border-color .32s var(--kurve);
}
.knopf svg{ width:15px; height:15px; flex:none; }
.knopf--voll{ background:var(--blau); border-color:var(--blau); color:#fff; }
.knopf--voll:hover{ background:var(--nacht); border-color:var(--nacht); }
.knopf--linie{ color:var(--tinte); }
.knopf--linie:hover{ background:var(--orange); border-color:var(--orange); color:var(--nacht); }
.knopf--hell{ color:currentColor; }
.knopf--hell:hover{ background:var(--orange); border-color:var(--orange); color:var(--nacht); }

.mehr{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:600;
  font-size:1rem; letter-spacing:.09em; color:var(--blau);
  transition:gap .3s var(--kurve), color .3s; }
.mehr:hover{ gap:.95rem; color:var(--orange); }
.mehr svg{ width:14px; height:14px; }

/* ---------- Zahlenband ---------- */
.zahlen{ display:grid; gap:2.5rem 1rem; grid-template-columns:repeat(2,1fr); text-align:center; }
@media (min-width:820px){ .zahlen{ grid-template-columns:repeat(4,1fr); } }
.zahl b{ display:block; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; color:var(--orange); }
.zahl span{ display:block; margin-top:.55rem; font-size:.875rem; letter-spacing:.04em; color:rgba(255,255,255,.66); }

/* ---------- Leistungen ---------- */
.leistungen{ display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); }
@media (min-width:720px){ .leistungen{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .leistungen{ grid-template-columns:repeat(3,1fr); } }
.leistung{ position:relative; overflow:clip; background:var(--weiss);
  padding:clamp(1.75rem,2.6vw,2.5rem); }
/* Hintergrundbild je Leistung, unter einem hellen Schleier. Beim Darueberfahren
   tritt es hervor — die Schrift bleibt in beiden Zustaenden gut lesbar. */
.leistung__grund{ position:absolute; inset:0; display:block; }
.leistung__grund img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--kurve); }
.leistung__grund::after{ content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.91); transition:background .45s var(--kurve); }
.leistung > :not(.leistung__grund){ position:relative; }
.leistung:hover .leistung__grund::after{ background:rgba(255,255,255,.76); }
.leistung:hover .leistung__grund img{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){ .leistung:hover .leistung__grund img{ transform:none; } }
.leistung__nr{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--orange); }
.leistung h3{ margin-top:.9rem; font-size:1.35rem; letter-spacing:.02em; }
.leistung p{ margin:.7rem 0 0; font-size:.9375rem; color:var(--tinte-weich); line-height:1.6; }

/* ---------- Projektkarten ---------- */
.karten{ display:grid; gap:clamp(1.25rem,2.4vw,2rem); }
@media (min-width:680px){ .karten{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .karten--drei{ grid-template-columns:repeat(3,1fr); } }
.karte{ display:block; text-decoration:none; position:relative; overflow:clip; background:var(--nacht); }
.karte__bild{ position:relative; aspect-ratio:4/3; overflow:clip; }
.karte__bild img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--kurve), opacity .5s; }
.karte:hover .karte__bild img{ transform:scale(1.06); opacity:.55; }
.karte__inhalt{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(1.1rem,2vw,1.6rem);
  background:linear-gradient(to top, rgba(12,26,44,.96) 0%, rgba(12,26,44,.86) 34%, rgba(12,26,44,.46) 68%, rgba(12,26,44,0) 100%);
  color:#fff;
}
.karte__inhalt .marke{ display:block; margin-bottom:.5rem; }
.karte h3{ font-size:clamp(1.3rem,1.9vw,1.7rem); letter-spacing:.02em; }
.karte__ort{ margin:.2rem 0 0; font-size:.875rem; color:rgba(255,255,255,.7); }
.karte__kurz{ margin:.6rem 0 0; font-size:.9375rem; line-height:1.55; color:rgba(255,255,255,.82);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--kurve), opacity .4s, margin .5s; }
@media (hover:hover){
  .karte__kurz{ margin-top:0; }
  .karte:hover .karte__kurz{ max-height:8rem; opacity:1; margin-top:.6rem; }
}
@media (hover:none){ .karte__kurz{ max-height:none; opacity:1; } }

/* ---------- Wechselreihen ---------- */
.reihe{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:center; }
@media (min-width:960px){
  .reihe{ grid-template-columns:repeat(12,1fr); }
  .reihe__bild{ grid-column:1 / 8; }
  .reihe__text{ grid-column:8 / 13; padding-left:clamp(1rem,2vw,2rem); }
  .reihe--gedreht .reihe__bild{ grid-column:6 / 13; grid-row:1; }
  .reihe--gedreht .reihe__text{ grid-column:1 / 6; grid-row:1; padding-left:0; padding-right:clamp(1rem,2vw,2rem); }
}
.reihe + .reihe{ margin-top:clamp(3.5rem,8vw,7rem); }
.reihe__text h3{ margin-bottom:.9rem; }
.reihe__text p{ color:var(--tinte-weich); margin:0 0 1.5rem; }

.rahmen{ position:relative; overflow:clip; background:var(--papier); }
.rahmen img,.rahmen video{ width:100%; transition:transform 1.1s var(--kurve); }
.rahmen--169{ aspect-ratio:16/9; }
.rahmen--43{ aspect-ratio:4/3; }
.rahmen--169 img,.rahmen--43 img,.rahmen--169 video{ height:100%; object-fit:cover; }
a.rahmen:hover img,a.rahmen:hover video{ transform:scale(1.04); }
/* Punktraster als Dekoration, wie in der Vorlage */
.rahmen-gruppe{ position:relative; }
.rahmen-gruppe::before{
  content:""; position:absolute; z-index:0; width:46%; height:58%;
  left:-1.5rem; bottom:-1.5rem;
  background-image:radial-gradient(var(--orange) 1.1px, transparent 1.1px);
  background-size:14px 14px; opacity:.28; pointer-events:none;
}
.reihe--gedreht .rahmen-gruppe::before{ left:auto; right:-1.5rem; }
.rahmen-gruppe > *{ position:relative; z-index:1; }
@media (max-width:680px){ .rahmen-gruppe::before{ display:none; } }

/* ---------- Fakten ---------- */
.fakten{ margin:0; border-top:1px solid var(--linie); }
.fakten > div{ display:grid; grid-template-columns:minmax(8rem,34%) 1fr; gap:1rem;
  padding-block:.9rem; border-bottom:1px solid var(--linie); }
.fakten dt{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau); padding-top:.2rem; }
.fakten dd{ margin:0; font-size:.9375rem; }

/* ---------- Bildstrecke ---------- */
.strecke{ display:grid; gap:clamp(.5rem,1vw,.9rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .strecke{ grid-template-columns:repeat(3,1fr); } }
.strecke__feld{ position:relative; margin:0; padding:0; border:0; overflow:clip;
  background:var(--papier); cursor:zoom-in; aspect-ratio:4/3; }
.strecke__feld img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--kurve), opacity .4s; }
.strecke__feld:hover img{ transform:scale(1.05); opacity:.82; }
.strecke__lupe{ position:absolute; right:.6rem; bottom:.6rem; width:30px; height:30px;
  display:grid; place-items:center; background:var(--orange); color:var(--nacht);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--kurve); }
.strecke__feld:hover .strecke__lupe{ opacity:1; transform:none; }
.strecke__lupe svg{ width:14px; height:14px; }

/* ---------- Leuchtkasten ---------- */
.kasten{ position:fixed; inset:0; z-index:100; background:rgba(9,17,28,.96);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .34s var(--kurve), visibility .34s; }
.kasten.offen{ opacity:1; visibility:visible; }
.kasten img{ max-width:min(100%,1500px); max-height:82svh; object-fit:contain; }
.kasten__zeile{ position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2rem); text-align:center;
  color:rgba(255,255,255,.7); font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.1em; }
.kasten__knopf{ position:absolute; width:46px; height:46px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:0; color:#fff; cursor:pointer; transition:background .25s; }
.kasten__knopf:hover{ background:var(--orange); color:var(--nacht); }
.kasten__knopf svg{ width:17px; height:17px; }
.kasten__zu{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.kasten__vor{ right:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%); }
.kasten__zurueck{ left:clamp(1rem,3vw,2rem); top:50%; transform:translateY(-50%); }

/* ---------- Film ---------- */
.filmfeld{ position:relative; overflow:clip; background:var(--papier); }
.filmfeld video{ width:100%; }

/* ---------- Kontakt ---------- */
.kontaktgitter{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:900px){ .kontaktgitter{ grid-template-columns:1fr 1fr; } }
.kontaktzeile{ display:grid; gap:.25rem; padding-block:1.1rem; border-bottom:1px solid var(--linie); }
.kontaktzeile:first-child{ border-top:1px solid var(--linie); }
.kontaktzeile dt{ font-family:"IBM Plex Mono",monospace; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grau); }
.kontaktzeile dd{ margin:0; font-size:1.0625rem; }
.kontaktzeile a{ text-decoration:none; border-bottom:1px solid var(--linie); transition:border-color .3s, color .3s; }
.kontaktzeile a:hover{ color:var(--blau); border-bottom-color:var(--blau); }

.person{ padding-block:1.4rem; border-bottom:1px solid var(--linie); }
.person:first-of-type{ border-top:1px solid var(--linie); }
.person h3{ font-size:1.4rem; letter-spacing:.02em; }
.person p{ margin:.2rem 0 0; color:var(--grau); font-size:.9375rem; }
.person a{ display:inline-block; margin-top:.55rem; color:var(--blau); text-decoration:none;
  border-bottom:1px solid rgba(70,124,192,.35); font-size:.9375rem; }
.person a:hover{ border-bottom-color:var(--blau); }

/* ---------- Werkverzeichnis ---------- */
.werk{ display:grid; gap:2.5rem; }
@media (min-width:820px){ .werk{ grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,4rem); } }
.werk ul{ list-style:none; margin:1rem 0 0; padding:0; border-top:1px solid var(--linie); }
.werk li{ padding-block:.75rem; border-bottom:1px solid var(--linie); font-size:.9375rem; color:var(--tinte-weich); }

/* ---------- Ruf ---------- */
.ruf{ position:relative; background:var(--nacht); color:#fff; overflow:clip; text-align:center; }
.ruf h2{ max-width:20ch; margin-inline:auto; }
.ruf p{ color:rgba(255,255,255,.7); max-width:50ch; margin:1.3rem auto 0; }
.ruf .knopf{ margin-top:2.3rem; }

/* ---------- Fuss ---------- */
.fuss{ background:var(--nacht-tief); color:rgba(255,255,255,.6); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.fuss a{ color:rgba(255,255,255,.82); text-decoration:none; }
.fuss a:hover{ color:var(--orange); }
.fuss__gitter{ display:grid; gap:2.5rem; }
@media (min-width:820px){ .fuss__gitter{ grid-template-columns:1.5fr 1fr 1fr; gap:3rem; } }
.fuss h4{ font-family:"IBM Plex Mono",monospace; font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange); margin:0 0 1.1rem; font-weight:400; }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.9375rem; }
.fuss__unten{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--linie-dunkel);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8125rem; color:rgba(255,255,255,.45); }
.fuss .logo{ width:240px; margin-bottom:1.3rem; }

/* ---------- Enthüllen ---------- */
.zeig{ opacity:0; transform:translateY(24px); }
.zeig.da{ opacity:1; transform:none; transition:opacity .85s var(--kurve), transform .95s var(--kurve); }
.gestaffelt > *{ opacity:0; transform:translateY(24px); }
.gestaffelt.da > *{ opacity:1; transform:none; transition:opacity .85s var(--kurve), transform .95s var(--kurve); }
.gestaffelt.da > *:nth-child(2){ transition-delay:.09s; }
.gestaffelt.da > *:nth-child(3){ transition-delay:.18s; }
.gestaffelt.da > *:nth-child(4){ transition-delay:.27s; }
.gestaffelt.da > *:nth-child(5){ transition-delay:.36s; }
.gestaffelt.da > *:nth-child(6){ transition-delay:.45s; }

/* ---------- Hilfen ---------- */
.nurlesbar{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.springlink{ position:absolute; left:.5rem; top:.5rem; z-index:200; background:var(--orange);
  color:var(--nacht); padding:.7rem 1.1rem; text-decoration:none; transform:translateY(-180%); transition:transform .25s; }
.springlink:focus{ transform:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .zeig,.gestaffelt > *{ opacity:1 !important; transform:none !important; }
  /* Die Scroll-Szene bleibt bewusst in Betrieb: sie bewegt sich nur, solange
     der Besucher selbst scrollt, nichts laeuft von allein. Frueher wurde sie
     hier auf den Endzustand gesetzt — dann standen alle fuenf Phasen
     uebereinander und der Kopf sah kaputt aus. Weg faellt nur das Ueberblenden,
     das erledigt bereits die Regel oben. */
  .stufe{ transform:none !important; }
}

/* Projektseite: Text und Fakten nebeneinander */
@media (min-width:960px){
  .projekt-gitter{ grid-template-columns:1.35fr .65fr; }
}

/* ---------- Kontaktformular ---------- */
.formular{ display:grid; gap:1.1rem; }
.feld{ display:grid; gap:.4rem; }
.feld label{ font-family:"IBM Plex Mono",monospace; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grau); }
.feld label .pflicht{ color:var(--orange-text); }
.feld input,.feld textarea{
  font:inherit; color:var(--tinte); background:var(--weiss);
  border:1px solid var(--linie); border-radius:0; padding:.8rem .9rem;
  transition:border-color .25s var(--kurve), box-shadow .25s var(--kurve);
  width:100%;
}
.feld textarea{ min-height:9rem; resize:vertical; line-height:1.6; }
.feld input:focus,.feld textarea:focus{
  outline:none; border-color:var(--blau);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent);
}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{ border-color:#B3261E; }
.feld__hinweis{ font-size:.8125rem; color:#B3261E; }
.feld--doppelt{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .feld--doppelt{ grid-template-columns:1fr 1fr; } }

/* Honigtopf: fuer Menschen unsichtbar, fuer Automaten verlockend */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formular__fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:.4rem; }
.formular__notiz{ font-size:.8125rem; color:var(--grau); max-width:38ch; line-height:1.6; }
.formular button[type="submit"]{ cursor:pointer; background:var(--blau); border:1px solid var(--blau); color:#fff; }
.formular button[type="submit"]:hover:not(:disabled){ background:var(--nacht); border-color:var(--nacht); }
.formular button[type="submit"]:disabled{ opacity:.55; cursor:progress; }

.meldung{ padding:1.1rem 1.25rem; border-left:3px solid var(--blau); background:var(--papier);
  font-size:.9375rem; line-height:1.65; display:none; }
.meldung.an{ display:block; }
.meldung--gut{ border-left-color:#2E7D32; }
.meldung--schlecht{ border-left-color:#B3261E; }
.meldung a{ color:var(--blau); }