/* Lichtbestand · gemeinsame Gestaltung für alle Seiten
   Schriften, Farben, Grundtypo, Knöpfe, Kopf mit Navigation (Aufklapper „Leistungen“ und „Projekte“) und Handy-Menü,
   Abschnittsköpfe, Lichtlinie (Faden), Merkmal-Listen, Fakten (dl), Kennzahl-Schilder, Fragen, Kontakt, Fuß mit allen
   Seiten. Was nur die Startseite braucht (Startbild, Leistungen, Bühne, Vorgehen, Dahinter), steht in css/start.css,
   was nur Unterseiten brauchen (Seitenkopf, Blöcke, Karten, Ablauf …), in css/seite.css.
   Idee: eine gelbe Lichtlinie als roter Faden (im Startbild ein Lichtstrahl durch die Schichten eines Handys). Schwarz, Weiß, Lampengelb #FFD400 als einzige Akzentfarbe.
   Schriften nur über --titel, --text und --mono setzen; Größen mit Luft, damit eine andere Titelschrift nicht bricht.
   Bewegung: nur wenn erwünscht; mit prefers-reduced-motion oder „Bewegung anhalten“ (.bewegung-aus) steht alles still. */

/* ---------- Schriften (lokal, OFL, Lizenzen in assets/fonts/) ----------
   Saira seit 23.10.2026 auf die genutzten Achsen beschnitten (Gewicht 400–900, Breite 100–125 %; fontTools
   varLib.instancer, Hinting bleibt): 96 → 57 KB. Die vollen Dateien liegen in docs/alt-2026-10-23/fonts/. */
@font-face {
  font-family: "Saira";
  src: url("../assets/fonts/saira-latin.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 100% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  src: url("../assets/fonts/saira-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 100% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-mono-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-mono-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben und Maße ---------- */
:root {
  color-scheme: dark;
  --schwarz: #0B0B0B;
  --tief: #050505;
  --weiss: #FFFFFF;
  --gelb: #FFD400;          /* Lampengelb, die einzige Akzentfarbe */
  --gelb-hell: #FFE45C;     /* nur für Lichtkerne */
  --grau-1: #D6D6D6;        /* Fließtext auf Schwarz */
  --grau-2: #A8A8A8;        /* leise Angaben, Kontrast über 7:1 */
  --linie: #262626;         /* Haarlinien */
  --linie-hell: #444444;

  --rand: clamp(16px, 4.4vw, 72px);
  --breite: 1600px;
  --fase: 10px;             /* 45°-Fase wie im Zeichen */
  --kopf-hoch: clamp(72px, 6.4vw, 104px);   /* Kopf über dem Startbild */
  --kopf-flach: 64px;                        /* Kopf als feste Leiste */
  --titel: "Saira", "Arial Black", sans-serif;   /* Titel breit: font-stretch var(--breit) */
  --text: "Saira", "Segoe UI", system-ui, sans-serif;
  --text-gewicht: 440;      /* Saira 400 wirkt auf Schwarz zu dünn */
  --breit: 125%;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--tief);
  scroll-padding-top: calc(var(--kopf-flach) + 12px);
}
body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--text);
  font-weight: var(--text-gewicht);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, svg, video { display: block; max-width: 100%; }
p, ul, ol, dl, dd, h1, h2, h3 { margin: 0; }
a { color: inherit; }
::selection { background: var(--gelb); color: var(--schwarz); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; }

.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 60;
  padding: 12px 18px;
  background: var(--gelb); color: var(--schwarz); font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 16px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Zeichen: l und b aus einer Linie. Farbe über color. */
.zeichen {
  height: 34px; width: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 6; stroke-linejoin: miter; stroke-miterlimit: 4;
}
.zeichen path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Etikett mit Nummer: Strich, Nummer weiß, Wort gelb */
.kicker {
  display: flex; align-items: flex-start; gap: .9em;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gelb);
}
.kicker::before { content: ""; flex: none; width: 2.4em; height: 2px; margin-top: calc(.65em - 1px); background: currentColor; }   /* bricht der Kicker um, bleibt der Strich an der ersten Zeile */
.kicker-nr { color: var(--weiss); letter-spacing: .08em; }

h2 {
  font-family: var(--titel);
  font-weight: 850;
  font-stretch: var(--breit);
  font-size: clamp(2.375rem, 1.1rem + 4.2vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Knöpfe: Fläche mit zwei Fasen; die Fase sitzt auf ::before, damit der Fokusrahmen nicht mit abgeschnitten wird */
.knopf {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 52px;
  padding: .8em 1.4em;
  color: var(--schwarz);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gelb);
  clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase));
  transition: background-color .2s ease;
}
.knopf:hover::before { background: var(--weiss); }
.knopf-klein { --fase: 7px; min-height: 44px; padding: .55em 1.05em; font-size: .9375rem; }
.pfeil { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.knopf-schwarz { color: var(--gelb); }
.knopf-schwarz::before { background: var(--schwarz); }
.knopf-schwarz:hover { color: var(--weiss); }
.knopf-schwarz:hover::before { background: var(--schwarz); }

.textlink {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gelb);
  text-underline-offset: .3em;
  padding-block: .4em;
}
.textlink:hover { color: var(--gelb); }

/* Link mit Pfeil, z. B. „Projekt Waldzeit ansehen“ */
.pfeillink {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--gelb);
}
.pfeillink .pfeil { color: var(--gelb); transition: translate .25s ease; }
/* immer weiß, auch in .text (dort erbt ein Link sonst das Grau des Absatzes); leise: grau mit feiner Linie */
.pfeillink:not(.pfeillink-leise) { color: var(--weiss); }
.pfeillink-leise { color: var(--grau-1); box-shadow: inset 0 -1px 0 var(--linie-hell); }
.pfeillink-leise:hover { box-shadow: inset 0 -2px 0 var(--gelb); }
.pfeillink:hover { color: var(--gelb); }
.pfeillink:hover .pfeil { translate: .3em 0; }

.etikett {
  display: inline-block;
  padding: .45em .7em .4em;
  background: var(--gelb);
  color: var(--schwarz);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .04em;
}
.etikett-leise { background: transparent; color: var(--grau-1); box-shadow: inset 0 0 0 1px var(--linie-hell); }

/* ---------- Kopf: über dem Bild oben durchsichtig, ab 60 px Scrollen eine feste schwarze Leiste ----------
   Navigation: „Leistungen“ und „Projekte“ sind Aufklapper (button mit aria-expanded, js/kopf.js), „Vorgehen“ und
   „Studio“ einfache Links. Ohne JavaScript öffnen die Aufklapper bei Maus und Tastaturfokus (:focus-within). */
.kopf {
  --kopf-jetzt: var(--kopf-hoch);
  position: absolute; inset: 0 0 auto; z-index: 50;
}
.js .kopf { position: fixed; }
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tief);
  box-shadow: inset 0 -1px 0 var(--linie-hell);
  opacity: 0;
  transition: opacity .3s ease;
}
.kopf.ist-kompakt { --kopf-jetzt: var(--kopf-flach); }
.kopf.ist-kompakt::before, .kopf.hat-auf::before { opacity: 1; }
.kopf-leiste {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: min(100% - 2 * var(--rand), var(--breite));
  min-height: var(--kopf-jetzt);
  margin-inline: auto;
  transition: min-height .3s ease;
}
.marke { display: inline-flex; align-items: center; gap: 14px; padding-block: 6px; color: var(--weiss); text-decoration: none; }
.marke .zeichen { color: var(--gelb); transition: height .3s ease; }
.ist-kompakt .marke .zeichen { height: 28px; }
.marke-name {
  font-family: var(--mono); font-weight: 500; font-size: .9375rem; line-height: 1;
  letter-spacing: .3em; margin-right: -.3em;
}

.kopf-nav { display: flex; align-items: center; align-self: stretch; gap: clamp(16px, 2vw, 36px); }
.kopf-liste { display: flex; align-self: stretch; gap: clamp(2px, .8vw, 16px); list-style: none; margin: 0; padding: 0; }
.kopf-liste > li { position: relative; display: flex; align-items: center; }
.kopf-liste > li > a, .nav-auf {
  display: flex; align-items: center; gap: .7em;
  min-height: 44px;
  padding: 12px 8px;
  border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer;
  font: 600 .8125rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline 2px transparent; text-underline-offset: .7em;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.kopf-liste > li > a:hover, .nav-auf:hover { text-decoration-color: var(--gelb); }
.kopf-liste a[aria-current="page"], .ist-hier > .nav-auf { color: var(--gelb); }
.kopf-liste > li > a[aria-current="page"] { text-decoration-color: var(--gelb); }
/* Winkel aus zwei Kanten; offen zeigt er nach oben */
.nav-pfeil {
  flex: none; width: 7px; height: 7px;
  border-right: 2px solid var(--gelb); border-bottom: 2px solid var(--gelb);
  rotate: 45deg; translate: 0 -2px;
  transition: rotate .25s ease, translate .25s ease;
}
.nav-auf[aria-expanded="true"] .nav-pfeil { rotate: -135deg; translate: 0 2px; }
.kopf-nr, .menue-fuss, .menue-link { display: none; }

/* Aufklapp-Liste: eine schwarze Tafel genau unter der Leiste, oben die gelbe Linie */
.untermenue {
  position: absolute; top: 100%; left: -14px; z-index: 1;
  min-width: 21rem; margin: 0; padding: 10px 0 12px; list-style: none;
  background: var(--tief);
  border: 1px solid var(--linie-hell); border-top: 2px solid var(--gelb);
  box-shadow: 0 32px 64px -24px rgb(0 0 0 / .95);
}
.untermenue a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  min-height: 44px;
  padding: 11px 22px;
  font-weight: 650; font-size: 1.0625rem; line-height: 1.3;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.untermenue a:hover { color: var(--gelb); background: #141414; }
.untermenue a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gelb); }
.untermenue-art { flex: none; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-2); }
.js .nav-auf[aria-expanded="false"] + .untermenue { display: none; }
/* ohne JavaScript: unsichtbar, aber per Tab erreichbar; bei Maus oder Fokus in der Gruppe sichtbar */
html:not(.js) .nav-gruppe:not(:hover):not(:focus-within) > .untermenue {
  clip-path: inset(50%); width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; overflow: hidden;
}

.menue-knopf, .menue-link {
  align-items: center; gap: 12px;
  min-height: 44px;
  padding: 8px 16px 8px 14px;
  border: 1px solid rgb(255 255 255 / .32);
  border-radius: 0;
  background: var(--tief);
  color: var(--weiss);
  font: 600 .8125rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.menue-knopf { display: none; }
/* schmal: Briefsymbol links neben „Menü“, springt zum Kontakt (ein Tipp statt zwei); breit steht dort „Projekt anfragen“ */
.kopf-kontakt {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  border: 1px solid rgb(255 255 255 / .32);
  background: var(--tief); color: var(--gelb);
}
.kopf-kontakt .pfeil { width: 20px; height: 20px; stroke-width: 1.9; }
.kopf-kontakt:hover { border-color: var(--gelb); }
.menue-knopf:hover, .menue-link:hover { border-color: var(--gelb); }
.menue-icon { position: relative; width: 18px; height: 10px; }
.menue-icon span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--gelb);
  transition: translate .25s ease, rotate .25s ease;
}
.menue-icon span:first-child { top: 0; }
.menue-icon span:last-child { bottom: 0; }
.menue-knopf[aria-expanded="true"] .menue-icon span:first-child { translate: 0 4px; rotate: 45deg; }
.menue-knopf[aria-expanded="true"] .menue-icon span:last-child { translate: 0 -4px; rotate: -45deg; }

/* bis 1079 px: Zeichen und Knopf „Menü“; das Menü ist eine schwarze Vollbild-Ebene mit großen Links,
   „Leistungen“ und „Projekte“ klappen darin nach unten auf */
@media (max-width: 1079px) {
  /* ohne JavaScript: statt des Menüs ein Link auf die Liste aller Seiten im Fuß */
  html:not(.js) .kopf-nav { display: none; }
  html:not(.js) .menue-link { display: inline-flex; }
  .kopf-kontakt { display: inline-flex; }
  /* bei offenem Menü steht dort „Projekt anfragen“; das Symbol tritt zurück (sonst bliebe das Menü über dem Sprungziel offen) */
  .js .kopf.ist-offen .kopf-kontakt { visibility: hidden; }

  .js .menue-knopf:not([hidden]) { display: inline-flex; }
  .js .kopf-nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(var(--kopf-flach) + clamp(20px, 5svh, 56px)) var(--rand) max(28px, env(safe-area-inset-bottom));
    background: var(--tief);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .js .kopf.ist-offen { --kopf-jetzt: var(--kopf-flach); }
  .js .kopf.ist-offen::before { opacity: 1; }
  .js .kopf.ist-offen .kopf-nav { visibility: visible; opacity: 1; transition: opacity .25s ease; }
  .js .kopf-liste { flex-direction: column; align-self: auto; gap: 0; border-bottom: 1px solid var(--linie); }
  .js .kopf-liste > li { display: block; translate: 0 14px; opacity: 0; transition: translate .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
  .js .ist-offen .kopf-liste > li { translate: 0 0; opacity: 1; }
  .js .ist-offen .kopf-liste > li:nth-child(2) { transition-delay: .04s; }
  .js .ist-offen .kopf-liste > li:nth-child(3) { transition-delay: .08s; }
  .js .ist-offen .kopf-liste > li:nth-child(4) { transition-delay: .12s; }
  .js .kopf-liste > li > a, .js .nav-auf {
    display: flex; align-items: baseline; gap: 18px; width: 100%;
    padding: .28em 0 .3em;
    border-top: 1px solid var(--linie);
    font-family: var(--titel); font-weight: 850; font-stretch: var(--breit);
    font-size: clamp(2rem, .9rem + 6vw, 3.75rem); line-height: 1.05; letter-spacing: -.02em;
    text-align: left; text-transform: none; text-decoration: none;
  }
  .js .kopf-liste > li > a:hover, .js .nav-auf:hover { color: var(--gelb); }
  .js .nav-pfeil { align-self: center; margin-left: auto; width: 14px; height: 14px; border-width: 0 3px 3px 0; translate: 0 -4px; }
  .js .nav-auf[aria-expanded="true"] .nav-pfeil { translate: 0 4px; }
  .js .kopf-nr {
    display: inline; flex: none; min-width: 2.6em;
    font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
    color: var(--gelb); translate: 0 -.4em;
  }
  .js .untermenue {
    position: static; min-width: 0;
    padding: 2px 0 22px calc(2.6 * .8125rem + 18px);
    border: 0; background: none; box-shadow: none;
  }
  .js .untermenue a {
    justify-content: flex-start; gap: 14px;
    padding: 9px 0;
    font-family: var(--titel); font-weight: 700; font-stretch: 100%;
    font-size: clamp(1.1875rem, 1rem + 1.2vw, 1.5rem); line-height: 1.2;
  }
  .js .untermenue a:hover { background: none; }
  .js .untermenue a[aria-current="page"] { box-shadow: none; color: var(--gelb); }
  .js .kopf-anfrage { align-self: flex-start; margin-top: clamp(24px, 5svh, 44px); min-height: 52px; padding: .8em 1.4em; font-size: 1.0625rem; }
  .js .menue-fuss { display: block; margin-top: auto; padding-top: 32px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; line-height: 1.9; color: var(--grau-2); }
  .js .menue-fuss a { color: var(--weiss); text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .menue-offen { overflow: hidden; }
}
@media (max-width: 559px) {
  .kopf-leiste { gap: 10px; }
  .marke { gap: 10px; }
  .marke .zeichen { height: 28px; }
  .marke-name { font-size: .8125rem; letter-spacing: .22em; margin-right: -.22em; }
}
@media (max-width: 379px) { .marke-name { display: none; } }

/* ---------- Abschnitte ---------- */
.abschnitt { position: relative; padding-block: clamp(96px, 12vw, 190px); }
.abschnitt-kopf {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: grid; gap: 22px;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--linie);
}
.abschnitt-kopf > .kicker { margin-bottom: clamp(8px, 2vw, 28px); }
.abschnitt-text { max-width: 46ch; color: var(--grau-1); font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); text-wrap: pretty; }
@media (min-width: 1000px) {
  /* H2 und Text beginnen oben auf einer Höhe: kein Loch über der H2, die H2 kommt beim Scrollen zuerst */
  .abschnitt-kopf { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: clamp(40px, 6vw, 120px); }
  .abschnitt-kopf > .kicker { grid-column: 1 / -1; }
  .abschnitt-kopf .abschnitt-text { margin-top: .5em; }
}

/* Liste mit Strich und Fase wie die Linie im Zeichen */
.merkmale { list-style: none; padding: 0; margin: 22px 0 32px; max-width: min(100%, 34rem); border-bottom: 1px solid var(--linie); }
.merkmale li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--linie);
  color: var(--grau-1);
  line-height: 1.4;
}
.merkmale li::before {
  content: ""; position: absolute; left: 0; top: calc(14px + .62em);
  width: 18px; height: 2px; background: var(--gelb);
}
.merkmale li::after {
  content: ""; position: absolute; left: 16px; top: calc(14px + .62em);
  width: 8px; height: 2px; background: var(--gelb); transform: rotate(-45deg); transform-origin: 1px 1px;
}

/* ---------- Lichtlinie (Faden): SVG, das js/bewegung.js baut und mit dem Scrollen zeichnet ---------- */
.faden {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none;
  overflow: visible; pointer-events: none;
}
.faden path { fill: none; stroke: var(--gelb); stroke-linecap: round; stroke-linejoin: round; }
.faden-hof { stroke-width: 22; opacity: .06; }
.faden-schein { stroke-width: 8; opacity: .2; }
.faden-kern { stroke: var(--gelb-hell); stroke-width: 2.2; }
.faden-kopf { opacity: 0; transition: opacity .3s ease; }
.faden-kopf.ist-sichtbar { opacity: 1; }
.kopf-hof { fill: var(--gelb); opacity: .16; }
.kopf-schein { fill: var(--gelb-hell); opacity: .55; }
.kopf-kern { fill: var(--weiss); }

/* ---------- Fragen ---------- */
.fragen { background: var(--tief); }
.fragen-innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; display: grid; gap: clamp(40px, 6vw, 64px); }
.fragen-kopf { display: grid; gap: 22px; align-content: start; padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--linie); }
.fragen-kopf > .kicker { margin-bottom: clamp(8px, 2vw, 28px); }
/* so groß wie die Block-H2 (nicht die große Abschnitts-H2): passt in die schmale Kopfspalte */
.fragen-kopf h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.625rem); line-height: .98; }
.fragen-kopf .textlink { white-space: nowrap; }
.fragen-liste { border-bottom: 1px solid var(--linie); }
.frage { border-top: 1px solid var(--linie); }
.frage summary {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 28px; gap: 14px; align-items: baseline;
  min-height: 44px;
  padding: clamp(20px, 2.4vw, 32px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--titel); font-weight: 760; font-stretch: var(--breit);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover .frage-text { color: var(--gelb); }
.frage-nr { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--gelb); }
/* Plus aus zwei Strichen; offen bleibt nur der waagerechte */
.frage-zeichen { position: relative; align-self: center; width: 22px; height: 22px; }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2px; background: var(--gelb); transition: rotate .3s ease; }
.frage-zeichen::after { rotate: 90deg; }
.frage[open] .frage-zeichen::after { rotate: 0deg; }
.frage[open] summary .frage-text { color: var(--gelb); }
.antwort { padding: 0 0 clamp(24px, 3vw, 40px) calc(2.6rem + 14px); }
.antwort p { max-width: 62ch; color: var(--grau-1); }
.antwort a { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--gelb); text-underline-offset: .22em; }
.antwort a:hover { color: var(--gelb); }
@media (max-width: 559px) {
  .frage summary { grid-template-columns: minmax(0, 1fr) 24px; }
  .frage-nr { grid-column: 1 / -1; }
  .antwort { padding-left: 0; }
}
@media (min-width: 1000px) {
  .fragen-innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 120px); }
  .fragen-kopf { position: sticky; top: calc(var(--kopf-flach) + 32px); align-self: start; }
}

/* ---------- Kontakt: vollflächig Lampengelb, das Zeichen als große schwarze Linie ---------- */
.kontakt {
  position: relative; overflow: hidden;
  background: var(--gelb);
  color: var(--schwarz);
  padding: clamp(88px, 13vw, 190px) var(--rand) clamp(28px, 4vw, 48px);
}
.kontakt ::selection { background: var(--schwarz); color: var(--gelb); }
.kontakt :focus-visible { outline-color: var(--schwarz); }
.kicker-schwarz, .kicker-schwarz .kicker-nr { color: var(--schwarz); }
.kontakt-innen { width: min(100%, var(--breite)); margin-inline: auto; display: grid; gap: 40px; }
.kontakt-zeichen { height: clamp(96px, 26vw, 140px); stroke-width: 3; color: var(--schwarz); }
.kontakt-inhalt { display: grid; justify-items: start; gap: 26px; }
.kontakt-titel { font-size: clamp(2.6rem, 1rem + 6.4vw, 7.5rem); font-weight: 900; line-height: .92; }
.kontakt-titel span { display: block; }
.kontakt-text { max-width: 44ch; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; }
.kontakt .knopf { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); padding: .85em 1.5em; }
/* schmal: Mail-Knopf direkt unter die Überschrift (nach „Projekt anfragen“ sofort im Bild), das Zeichen nach unten */
@media (max-width: 899.98px) {
  .kontakt-inhalt > .kicker, .kontakt-titel { order: -2; }
  .kontakt-mail { order: -1; }
  .kontakt-zeichen { order: 2; height: clamp(64px, 18vw, 96px); }
}
.absender { font-family: var(--mono); font-size: .875rem; font-weight: 600; letter-spacing: .06em; }
.kontakt-website {
  width: min(100%, var(--breite)); margin: clamp(72px, 10vw, 140px) auto 0;
  padding-top: 22px; border-top: 1px solid rgb(11 11 11 / .3);
  font-size: .9375rem;
}
.kontakt-website a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.kontakt-website a:hover { text-decoration-thickness: 3px; }
@media (min-width: 900px) {
  .kontakt-innen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; }
  .kontakt-zeichen { order: 2; height: clamp(260px, 30vw, 460px); stroke-width: 1.6; }
}

/* ---------- Fuß: Marke und Kontakt, darunter alle Seiten in vier Gruppen (id="seiten": Ziel von „Menü“ ohne JavaScript) ---------- */
.fuss {
  background: var(--schwarz);
  color: var(--grau-2);
  font-size: .9375rem;
}
.fuss-innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: grid; gap: 44px;
  padding-block: clamp(56px, 7vw, 104px) clamp(36px, 4vw, 56px);
}
.fuss-marke { display: inline-flex; align-items: center; gap: 12px; color: var(--weiss); font-family: var(--mono); font-weight: 500; font-size: .8125rem; letter-spacing: .3em; }
.fuss-marke .zeichen { height: 22px; color: var(--gelb); stroke-width: 8; }
.fuss-text { margin-top: 20px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; line-height: 1.9; }
.fuss-text a { color: var(--weiss); text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.fuss-text a:hover { color: var(--gelb); }
.fuss-seiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 36px 28px; }
/* mittelbreit zwei mal zwei Gruppen statt drei und einer übrigen */
@media (min-width: 560px) and (max-width: 999.98px) { .fuss-seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuss-titel {
  margin: 0 0 12px;
  font-family: var(--mono); font-weight: 600; font-stretch: normal;
  font-size: .8125rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gelb);
}
.fuss-seiten ul { list-style: none; margin: 0; padding: 0; }
.fuss-seiten a { display: inline-block; padding: 6px 0; color: var(--grau-1); line-height: 1.35; text-decoration: underline 2px transparent; text-underline-offset: .3em; }
.fuss-seiten a:hover { color: var(--weiss); text-decoration-color: var(--gelb); }
.fuss-seiten a[aria-current="page"] { color: var(--gelb); }
@media (min-width: 1000px) {
  .fuss-innen { grid-template-columns: minmax(16rem, 1fr) minmax(0, 3fr); column-gap: clamp(40px, 6vw, 120px); }
  .fuss-seiten { grid-template-columns: 1.25fr 1fr 1.1fr .9fr; }
}

/* ---------- Kennzeichen und Fakten (Startseite „Projekte“ und Projektseiten) ---------- */
.werk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 18px; }
/* Live-Adresse neben dem Knopf „Live ansehen“ */
.adresse { font-family: var(--mono); font-size: .875rem; letter-spacing: .02em; color: var(--grau-2); }
/* Aufgabe, Lösung, Leistungen, Technik: Etikett links, Text rechts, Haarlinien. Schmal (Container unter 430 px) untereinander. */
.werk-fakten { margin-top: 26px; max-width: 36rem; border-top: 1px solid var(--linie); }
.werk-fakten > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 18px; padding: 12px 0 13px; border-bottom: 1px solid var(--linie); }
.werk-fakten dt { padding-top: .25em; font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); line-height: 1.3; }
.werk-fakten dd { color: var(--grau-1); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.werk-fakten-leise { margin-top: 0; margin-bottom: 30px; }
.werk-fakten-leise dd { font-family: var(--mono); font-size: .875rem; line-height: 1.6; letter-spacing: .01em; }
@container (max-width: 430px) {
  .werk-fakten > div { grid-template-columns: minmax(0, 1fr); }
}

/* Kennzahl-Schilder: dunkel, feine Linie, eine Fase mit gelber Kante (auf der Startseite schweben sie um das Handy) */
.schilder { list-style: none; padding: 0; margin: 28px 0 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.schild {
  --f: 10px;
  position: relative;
  flex: 1 1 9.5rem;
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px 14px;
  background: rgb(14 14 14 / .82);
  border: 1px solid rgb(255 255 255 / .17);
  clip-path: polygon(var(--f) 0, 100% 0, 100% 100%, 0 100%, 0 var(--f));
}
.schild::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: calc(var(--f) + 3px); height: calc(var(--f) + 3px);
  background: var(--gelb);
  clip-path: polygon(0 var(--f), var(--f) 0, calc(var(--f) + 3px) 0, 0 calc(var(--f) + 3px));
}
.schild-label { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-2); line-height: 1.2; }
.schild-wert { margin-top: auto; font-family: var(--mono); font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); font-weight: 600; line-height: 1.2; color: var(--weiss); font-variant-numeric: tabular-nums; }
.ganz { white-space: nowrap; }
/* lange Bindestrich-Wörter erst ab 560 px ungetrennt; schmal passen sie nicht in eine Zeile */
@media (min-width: 560px) { .ganz-breit { white-space: nowrap; } }
.schild-notiz { font-family: var(--mono); font-size: .8125rem; color: var(--grau-1); line-height: 1.2; }

/* ---------- Bewegung (nur wenn erwünscht) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Das Zeichen zeichnet sich beim Laden selbst */
  .kopf .zeichen path { animation: zeichnen 1.4s cubic-bezier(.65, 0, .35, 1) .15s both; }
  /* Zeichen im Kontaktfeld: zeichnet sich mit dem Scrollen (js/bewegung.js setzt --v) */
  .js:not(.bewegung-aus) .kontakt-zeichen path { stroke-dashoffset: calc(1 - var(--v, 1)); }
}
@keyframes zeichnen { from { stroke-dashoffset: 1; } }

@media (prefers-reduced-motion: reduce) {
  .kopf-leiste, .marke .zeichen, .kopf::before, .menue-icon span, .frage-zeichen::before, .frage-zeichen::after,
  .pfeillink .pfeil, .faden-kopf, .nav-pfeil { transition: none; }
  .js .kopf-liste > li, .js .kopf-nav { transition: none; translate: none; }
}

@media (forced-colors: active) {
  .knopf::before { background: ButtonFace; border: 2px solid ButtonText; }
  .knopf { color: ButtonText; }
  .faden { display: none; }
}

/* ---------- Projektkarten, 23.10.2026 ----------
   Archiv der Projekte (/projekte/) und kompakt mit .ist-kurz als Teaser (z. B. auf der Startseite).
   ul.projektkarten > li.projektkarte > div.projektkarte-text (h3.projektkarte-name, p.werk-meta mit .kicker und
   .etikett, p.projektkarte-satz, ul.merkmale, p.projektkarte-technik, p.projektkarte-links) und
   div.projektkarte-bild (gerahmtes Handy). Im HTML steht der Name zuerst (wird zuerst vorgelesen), das Bild holt CSS
   nach oben. Art und Etiketten stehen unter dem Namen, damit die Namen nebeneinanderliegender Karten auf einer Höhe sind.
   Die ganze Karte ist klickbar: Der Hauptlink a.projektkarte-link (Projektseite) legt mit ::after eine Fläche über die
   Karte, a.projektkarte-live („Live ansehen“) liegt darüber und bleibt ein eigener Link. Keine Links ineinander.
   Spalten nach der Breite der Liste (Container „projektkarten“): ab 940 px drei nebeneinander, 560–939 px je Karte
   Bild links und Text rechts, darunter untereinander. Kompakt (.ist-kurz, nur Handy, Name, Art, ein Satz, Link):
   ab 940 px drei nebeneinander, darunter je Karte Bild klein links. */
.projektkarten {
  container: projektkarten / inline-size;
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.projektkarte {
  --f: 14px;
  position: relative; isolation: isolate;
  flex: 1 1 100%; min-width: 0;
  display: flex; flex-direction: column;
}
/* Fläche mit Fase auf ::before (wie beim Knopf), damit der Fokusrahmen der Karte nicht mit abgeschnitten wird */
.projektkarte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #111111;
  border: 1px solid var(--linie);
  clip-path: polygon(var(--f) 0, 100% 0, 100% 100%, 0 100%, 0 var(--f));
  transition: border-color .25s ease;
}
/* gelbe Kante genau auf der Fase (die Karte selbst hat keinen Rand, darum ab 0) */
.projektkarte::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(var(--f) + 3px); height: calc(var(--f) + 3px);
  background: var(--gelb);
  clip-path: polygon(0 var(--f), var(--f) 0, calc(var(--f) + 3px) 0, 0 calc(var(--f) + 3px));
  pointer-events: none;
}
.projektkarte-bild {
  order: -1;
  display: flex; justify-content: center; align-items: flex-end;
  padding: clamp(28px, 3vw, 40px) 20px 0;
  border-bottom: 1px solid var(--linie);
}
/* Das Handy steht auf der Haarlinie */
.projektkarte-bild img {
  width: min(52%, 190px); height: auto;
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / .7));
  transition: translate .4s cubic-bezier(.2, .7, .2, 1);
}
.projektkarte-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; }
.projektkarte .werk-meta { gap: 10px 12px; margin: 0; }
.projektkarte .werk-meta .kicker { gap: .8em; letter-spacing: .1em; }
.projektkarte .werk-meta .kicker::before { width: 1.6em; }
.projektkarte-name {
  font-family: var(--titel); font-weight: 850; font-stretch: var(--breit);
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1; letter-spacing: -.02em;
  hyphens: manual; overflow-wrap: break-word;
}
.projektkarte-satz { color: var(--grau-1); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.projektkarte .merkmale { margin: 2px 0 0; max-width: none; }
.projektkarte .merkmale li { padding-block: 11px; font-size: .9375rem; }
.projektkarte .merkmale li::before { top: calc(11px + .62em); }
.projektkarte .merkmale li::after { top: calc(11px + .62em); }
.projektkarte-technik { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; line-height: 1.6; color: var(--grau-2); }
.projektkarte-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 26px; margin-top: auto; padding-top: 4px; }
/* Hauptlink: Fläche über der ganzen Karte; der Fokusrahmen liegt um die Karte */
.projektkarte-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.projektkarte-link:focus-visible { outline: none; }
.projektkarte-link:focus-visible::after { outline: 3px solid var(--gelb); outline-offset: 4px; }
/* zweiter Link über der Fläche */
.projektkarte-live {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 44px;
  color: var(--grau-1); font-weight: 650; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--linie-hell);
  transition: color .2s ease;
}
.projektkarte-live .pfeil { color: var(--gelb); }
.projektkarte-live:hover { color: var(--gelb); box-shadow: inset 0 -2px 0 var(--gelb); }
.projektkarte:has(.projektkarte-link:hover, .projektkarte-link:focus-visible)::before { border-color: var(--linie-hell); }
@media (prefers-reduced-motion: no-preference) {
  .projektkarte:has(.projektkarte-link:hover) .projektkarte-bild img { translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .projektkarte::before, .projektkarte-bild img, .projektkarte-live { transition: none; }
}

/* Archiv: mittelbreit Bild links, breit drei Spalten */
@container projektkarten (min-width: 560px) and (max-width: 939.98px) {
  .projektkarten:not(.ist-kurz) .projektkarte { flex-direction: row; }
  .projektkarten:not(.ist-kurz) .projektkarte-bild {
    flex: 0 0 38%; align-items: center;
    padding: 36px 20px;
    border-bottom: 0; border-right: 1px solid var(--linie);
  }
  .projektkarten:not(.ist-kurz) .projektkarte-bild img { width: min(78%, 200px); }
  .projektkarten:not(.ist-kurz) .projektkarte-text { padding: 30px 30px 28px; }
}
@container projektkarten (min-width: 940px) {
  .projektkarten:not(.ist-kurz) .projektkarte { flex: 0 1 calc((100% - 28px) / 3); }
}

/* Kompakt (.ist-kurz): bis 939 px Listenbreite Bild klein links, ab 940 px drei Spalten (bei 768 sonst zu klein) */
.projektkarten.ist-kurz .projektkarte-text { gap: 10px; padding: 18px 20px 20px; }
.projektkarten.ist-kurz .projektkarte-name { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); }
.projektkarten.ist-kurz .projektkarte-satz { font-size: .9375rem; line-height: 1.5; }
.projektkarten.ist-kurz .projektkarte-bild { padding: 24px 16px 0; }
.projektkarten.ist-kurz .projektkarte-bild img { width: min(46%, 150px); }
@container projektkarten (max-width: 939.98px) {
  .projektkarten.ist-kurz .projektkarte { flex-direction: row; }
  .projektkarten.ist-kurz .projektkarte-bild {
    flex: 0 0 34%; align-items: center;
    padding: 18px 10px;
    border-bottom: 0; border-right: 1px solid var(--linie);
  }
  .projektkarten.ist-kurz .projektkarte-bild img { width: min(88%, 120px); }
  .projektkarten.ist-kurz .projektkarte-text { padding: 16px 16px 14px; }
}
@container projektkarten (min-width: 560px) and (max-width: 939.98px) {
  .projektkarten.ist-kurz .projektkarte-bild { flex-basis: 28%; padding: 24px 16px; }
  .projektkarten.ist-kurz .projektkarte-bild img { width: min(80%, 150px); }
  .projektkarten.ist-kurz .projektkarte-text { padding: 24px 26px 20px; justify-content: center; }
}
@container projektkarten (min-width: 940px) {
  .projektkarten.ist-kurz .projektkarte { flex: 0 1 calc((100% - 28px) / 3); }
}
@media (forced-colors: active) {
  .projektkarte::before { border-color: CanvasText; }
  .projektkarte-link:focus-visible::after { outline-color: Highlight; }
}