/* =========================================================
   Webentwicklung Fischer – Startseite
   Hero · Demo-Bühne mit 3-Positionen-Schieber · Leistungen · Über · Kontakt
   ========================================================= */

:root {
  --secpad: 96px;
  /* Signalfarben der drei Demo-Welten – shell.js interpoliert dazwischen */
  --w0: 176 82 44;    /* Steingut & Salz  – Terrakotta */
  --w1: 13 133 127;   /* Praxis Ankerwiese – Petrol   */
  --w2: 91 108 255;   /* Nordkant          – Indigo   */
  --acc: 176 82 44;   /* aktive, interpolierte Welt-Farbe (JS) */
}

/* Ankersprung: die Überschrift soll ~40 px unter dem Kopf stehen, nicht die
   Section-Oberkante – sonst wirkt es wie „zu wenig gescrollt“. Gerechnet gegen
   scroll-padding-top (Kopfhöhe + 18 px) und das Innenpolster der Section. */
section[id] { scroll-margin-top: calc(-12px - var(--secpad)); }
/* Die Bühne trägt ihr Polster selbst statt über .section-inner. */
#demo { scroll-margin-top: 0; }
/* Nur oben und unten setzen – die Kurzform würde den Seitenrand aus .wrap
   überschreiben, weil beide Klassen auf demselben Element sitzen. */
.section-inner {
  padding-top: var(--secpad);
  padding-bottom: var(--secpad);
}

/* =========================================================
   1 · HERO
   ========================================================= */
.hero-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -240px; right: -180px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(31, 63, 208, .09), transparent 66%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 22, 27, .045) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 78%);
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 8vw, 92px) 24px clamp(40px, 5vw, 60px);
  max-width: 860px;
}
.hero h1 {
  font-size: clamp(2.3rem, 6.2vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.038em;
  font-weight: 700;
  margin: 18px 0 0;
}
.hero h1 .em {
  position: relative;
  white-space: nowrap;
}
.hero h1 .em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .07em;
  height: .3em;
  background: linear-gradient(90deg, rgba(var(--acc), .26), rgba(var(--acc), .09));
  border-radius: 3px;
  z-index: -1;
  transition: background .5s var(--ease);
}
.hero .lead {
  font-size: clamp(1.03rem, 1.7vw, 1.2rem);
  color: var(--muted);
  max-width: 62ch;
  margin: 22px 0 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .55em; }
.hero-meta .tick { color: rgb(var(--acc)); font-size: 1em; transition: color .5s var(--ease); }

/* =========================================================
   2 · DEMO-BÜHNE
   ========================================================= */
/* Auf dunklem Grund muss der Daumen hell sein, sonst verschwindet er.
   Wichtig: scrollbar-color wird dort, wo es steht, einmal aufgeloest und
   danach als fertiger Wert vererbt. Ein neues --sb-daumen allein aendert
   in Firefox also nichts, die Zeile muss jedes Mal mit. */
.stagewrap, .w-nordkant {
  --sb-daumen: rgba(232, 233, 238, .26);
  --sb-daumen-hover: rgba(232, 233, 238, .42);
  scrollbar-color: var(--sb-daumen) var(--sb-bahn);
}
/* Die beiden hellen Welten liegen in der dunklen Bühne, brauchen aber
   wieder einen dunklen Daumen. Farbe je aus der eigenen Welt. */
.w-atelier {
  --sb-daumen: #d5cbb7;
  --sb-daumen-hover: #bdb098;
  scrollbar-color: var(--sb-daumen) var(--sb-bahn);
}
.w-praxis {
  --sb-daumen: #c3d3d0;
  --sb-daumen-hover: #a3b8b4;
  scrollbar-color: var(--sb-daumen) var(--sb-bahn);
}

.stagewrap {
  position: relative;
  background: #0f1116;
  color: #e8e9ee;
  isolation: isolate;
  padding: clamp(40px, 5.5vw, 66px) 0 clamp(44px, 6vw, 72px);
  overflow: hidden;
}
.stagewrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
  background-size: 24px 24px;
  z-index: -2;
  pointer-events: none;
}
/* farbiger Schein, folgt der aktiven Welt */
.stagewrap::after {
  content: '';
  position: absolute;
  top: -18%; left: 50%;
  width: min(1100px, 120%); height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(var(--acc), .30), rgba(var(--acc), .07) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  transition: background .55s var(--ease);
  filter: blur(6px);
}

.stage-wrapinner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---- Kopfzeile der Bühne ---- */
.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.stage-head .kicker { color: rgba(232, 233, 238, .5); }
.stage-head .kicker .num { color: rgb(var(--acc)); transition: color .5s var(--ease); }
.stage-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.028em;
  line-height: 1.14;
  margin: 10px 0 0;
  max-width: 20ch;
}
.stage-head p {
  margin: 0;
  font-size: .95rem;
  color: rgba(232, 233, 238, .58);
  max-width: 40ch;
}

/* =========================================================
   2a · DER SCHIEBER
   ========================================================= */
.switcher {
  position: relative;
  margin-bottom: clamp(20px, 2.6vw, 28px);
  user-select: none;
  -webkit-user-select: none;
}

.switcher-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.wl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  border-radius: 12px;
  text-align: left;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  opacity: .42;
}
.wl:nth-child(2) { text-align: center; align-items: center; }
.wl:nth-child(3) { text-align: right; align-items: flex-end; }
.wl:hover { opacity: .72; }
.wl.is-active { opacity: 1; }

.wl-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: rgba(232, 233, 238, .45);
  transition: color .3s var(--ease);
}
.wl.is-active .wl-num { color: rgb(var(--acc)); }
.wl-name {
  font-weight: 650;
  font-size: clamp(.95rem, 1.7vw, 1.18rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.wl-kind {
  font-size: .78rem;
  color: rgba(232, 233, 238, .5);
  line-height: 1.25;
}

/* Schiene */
.rail {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 26px;                 /* = Puck-Radius, hält den Griff drinnen */
  cursor: grab;
  touch-action: pan-y;
}
.rail.is-dragging { cursor: grabbing; }

.rail-track {
  position: absolute;
  left: 26px; right: 26px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.rail-fill {
  position: absolute;
  left: 26px;
  height: 6px;
  border-radius: 999px;
  width: calc((100% - 52px) * var(--pn, 0));
  background: linear-gradient(90deg, rgba(var(--acc), .35), rgb(var(--acc)));
  box-shadow: 0 0 16px rgba(var(--acc), .55);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.rail-stops {
  position: absolute;
  left: 26px; right: 26px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.rail-stops i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #0f1116;
  border: 2px solid rgba(255, 255, 255, .22);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.rail-stops i.is-passed { border-color: rgb(var(--acc)); }
.rail-stops i.is-active { transform: scale(1.25); }

.puck {
  position: absolute;
  top: 50%;
  left: calc(26px + (100% - 52px) * var(--pn, 0));
  transform: translate(-50%, -50%);
  width: 52px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fdfdfd, #e6e6ea);
  border: 1px solid rgba(0, 0, 0, .22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px rgba(0, 0, 0, .4),
    0 0 0 6px rgba(var(--acc), .14),
    0 0 26px rgba(var(--acc), .38);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: box-shadow .4s var(--ease), width .22s var(--ease);
}
.rail.is-dragging .puck { cursor: grabbing; width: 58px; }
.puck::before, .puck::after,
.puck i {
  content: '';
  width: 2px; height: 13px;
  border-radius: 2px;
  background: rgba(20, 22, 27, .3);
}
.puck:focus-visible {
  outline: 2.5px solid #fff;
  outline-offset: 4px;
}

.rail-hint {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 233, 238, .34);
  display: flex;
  align-items: center;
  gap: .6em;
  transition: opacity .3s var(--ease);
}
.switcher.has-moved .rail-hint { opacity: 0; }

/* =========================================================
   2b · WERKZEUGLEISTE
   ========================================================= */
.stage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 14px;
}
.toolgroup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .48em .95em;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(232, 233, 238, .62);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tool:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tool[aria-pressed="true"], .tool.is-on {
  background: rgba(var(--acc), .9);
  color: #fff;
  box-shadow: 0 2px 12px rgba(var(--acc), .45);
}
.tool svg { width: 15px; height: 15px; flex-shrink: 0; }

/* =========================================================
   2c · BROWSER-RAHMEN & BÜHNE
   ========================================================= */
.frame {
  --frame-w: 100%;
  width: var(--frame-w);
  max-width: 100%;
  margin: 0 auto;
  background: #16181f;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .3),
    0 18px 40px -14px rgba(0, 0, 0, .6),
    0 50px 90px -40px rgba(var(--acc), .5);
  transition: width .5s var(--ease), box-shadow .5s var(--ease), border-radius .4s var(--ease);
}
.frame.is-mobile { border-radius: 30px; }

.frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  background: linear-gradient(180deg, #22252e, #1b1e26);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  flex-shrink: 0;
}
.frame-dots { display: flex; gap: 6px; flex-shrink: 0; }
.frame-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.frame-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5em;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  font-family: var(--mono);
  font-size: .72rem;
  color: rgba(232, 233, 238, .55);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame-url .lock { color: rgba(var(--acc), 1); flex-shrink: 0; transition: color .4s var(--ease); }
.frame-url .host { color: rgba(232, 233, 238, .85); }
.frame-tag {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 233, 238, .45);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 5px;
  padding: 2px 7px;
}
@media (max-width: 560px) { .frame-tag { display: none; } }

.stage {
  --stage-h: clamp(520px, 72vh, 780px);
  position: relative;
  height: var(--stage-h);
  background: #fff;
  overflow: hidden;
  transition: height .4s var(--ease);
}

/* --- die einzelne Demo-Welt --- */
.world {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  container-name: stage;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
  transform-origin: 50% 45%;
}
.world.is-live { visibility: visible; }
.world.is-front { }
.world:not(.is-front) { pointer-events: none; }

.world-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Scrollleiste jeder Welt: Farbe kommt aus der Welt, nicht fest verdrahtet.
   Vorher stand hier ein neutrales Grau, das in keiner der drei Welten sass. */
.world-scroll {
  scrollbar-color: var(--sb-daumen) var(--sb-bahn);
}
.world-scroll::-webkit-scrollbar { width: 10px; }
.world-scroll::-webkit-scrollbar-track { background: transparent; }
.world-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-daumen);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.world-scroll::-webkit-scrollbar-thumb:hover { background: var(--sb-daumen-hover); background-clip: padding-box; }

/* Ebene für Schubladen, Dialoge, Hinweise – immer über dem Seiteninhalt */
.world-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.world-overlay > * { pointer-events: auto; }

/* ---- Sandbox-Fußnote unter dem Rahmen ---- */
.stage-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 16px auto 0;
  max-width: 900px;
  font-size: .8rem;
  color: rgba(232, 233, 238, .45);
  text-align: center;
  justify-content: center;
  line-height: 1.5;
}
.stage-note .note-kurz { display: none; }
.stage-note .pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgb(var(--acc));
  border: 1px solid rgba(var(--acc), .4);
  background: rgba(var(--acc), .1);
  border-radius: 999px;
  padding: 3px 10px;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}

/* ---- Vollbild ----
   Als Flex-Spalte gebaut: der Rahmen bekommt den gesamten Restplatz, egal wie
   viel Höhe Schieber und Werkzeuge gerade brauchen. */
.stagewrap.is-full {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 14px 0 12px;
  overflow: hidden;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.stagewrap.is-full .stage-head,
.stagewrap.is-full .rail-hint { display: none; }

.stagewrap.is-full .stage-wrapinner,
.stagewrap.is-full .frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.stagewrap.is-full .switcher,
.stagewrap.is-full .stage-tools,
.stagewrap.is-full .stage-note { flex-shrink: 0; }

.stagewrap.is-full .switcher { margin-bottom: 10px; }
.stagewrap.is-full .switcher-labels { margin-bottom: 4px; gap: 6px; }
.stagewrap.is-full .wl { padding: 2px; }
.stagewrap.is-full .wl-kind { display: none; }
.stagewrap.is-full .wl-name { font-size: .95rem; }
.stagewrap.is-full .rail { height: 42px; }
.stagewrap.is-full .stage-tools { margin-bottom: 10px; }

.stagewrap.is-full .stage {
  flex: 1;
  min-height: 220px;
  height: auto;
}
.stagewrap.is-full .stage-note {
  margin-top: 8px;
  font-size: .73rem;
}
.stagewrap.is-full .note-lang { display: none; }
.stagewrap.is-full .note-kurz { display: inline; }
body.is-locked { overflow: hidden; }

/* =========================================================
   3 · DOSSIER – „Was in dieser Demo steckt“
   ========================================================= */
.dossier-section {
  background: linear-gradient(180deg, #0f1116 0%, #0f1116 46%, var(--paper) 46%);
  padding-bottom: var(--secpad);
}
.dossier {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.dossier-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.dossier-main { padding: clamp(28px, 3.4vw, 44px); }
.dossier-main .kicker .num { color: rgb(var(--acc)); transition: color .45s var(--ease); }
.dossier-main h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  letter-spacing: -.026em;
  line-height: 1.16;
  margin: 12px 0 0;
}
.dossier-main > p {
  color: var(--muted);
  margin: 14px 0 0;
  font-size: .99rem;
  max-width: 46ch;
}
/* Untereinander statt umbrechender Pillen: gleich lange Zeilen, egal wie lang
   der Text ist, und die Spalte füllt sich gleichmäßig. */
.dossier-chips {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.dchip {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: baseline;
  gap: .7em;
  font-size: .89rem;
  color: var(--ink-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.dchip::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgb(var(--acc));
  transform: translateY(-2px);
  transition: background .45s var(--ease);
}

.dossier-side {
  background: var(--paper);
  border-left: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dossier-side h3 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}
/* Die Schritte tragen die Spalte: jeder bekommt denselben Anteil an der
   verfügbaren Höhe, getrennt durch Haarlinien. So füllt der Inhalt den
   Kasten, statt oben zu kleben und darunter ein Loch zu lassen. */
.dtry {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--line-soft);
}
.dtry li {
  flex: 1;
  min-height: 54px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  align-content: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.dtry .n {
  font-family: var(--mono);
  font-size: .7rem;
  color: #fff;
  background: var(--ink);
  border-radius: 7px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dossier-cta {
  margin-top: auto;
  padding-top: 18px;
}

/* Weicher Wechsel beim Weltenwechsel */
.dossier-fade { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.dossier-fade.is-swapping { opacity: 0; transform: translateY(6px); }

/* =========================================================
   4 · LEISTUNGEN
   ========================================================= */
.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -.032em;
  line-height: 1.12;
  margin: 14px 0 0;
}
.section-head > p {
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 1.01rem;
}

/* Leistungen: keine Karten, nur Raster und Haarlinien – wie die Kopfzeile. */
.leistungen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.leistung {
  padding: 26px 22px 2px 0;
  min-width: 0;
}
.leistung + .leistung {
  border-left: 1px solid var(--line-soft);
  padding-left: 22px;
}
.leistung .l-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--muted-2);
}
.leistung h3 {
  font-size: 1.02rem;
  letter-spacing: -.018em;
  margin: 11px 0 0;
}
.leistung p {
  color: var(--muted);
  font-size: .92rem;
  margin: 9px 0 0;
}

/* =========================================================
   5 · ÜBER
   ========================================================= */
#ueber { background: var(--panel); border-block: 1px solid var(--line); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: stretch;
}
.about-body { display: flex; flex-direction: column; }
.about-body p {
  color: var(--ink-soft);
  margin: 0 0 16px;
  font-size: 1rem;
}
.about-body p:last-of-type { margin-bottom: 0; }
.about-sig {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.about-sig .who { line-height: 1.3; }
.about-sig .who b { display: block; font-size: .97rem; }
.about-sig .who span { font-size: .85rem; color: var(--muted); }

/* Ebenfalls entkastet: nur Linien, kein Rahmen, kein Fond. */
.facts {
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* füllt die Spalte bündig, Briefing §23 */
  align-self: stretch;
}
.facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.facts > div:last-child { border-bottom: 0; }
.facts .k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts .v { margin: 0; font-weight: 550; font-size: .95rem; text-align: right; }

/* =========================================================
   6 · KONTAKT
   ========================================================= */
/* Dieser Abschnitt lief auf knapp 990 px hinaus und sprengte damit ein
   16:9-Fenster. Gestaucht wird an vielen kleinen Stellen statt an einer
   großen: eigener Abschnittsrand, engere Karten, dichtere Formularzeilen.
   Der Rand steckt in --secpad, damit der Ankersprung mitrechnet. */
#kontakt { --secpad: 60px; }
#kontakt .section-head { margin-bottom: 24px; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr);
  gap: 18px;
  align-items: stretch;
}
.contact-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.contact-card::after {
  content: '';
  position: absolute;
  right: -140px; bottom: -180px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(var(--acc), .34), transparent 66%);
  pointer-events: none;
  transition: background .5s var(--ease);
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
}
.contact-card > div > p {
  color: rgba(247, 246, 242, .68);
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: .99rem;
}
.contact-lines {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-lines li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: .97rem;
}
.contact-lines .lbl {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 246, 242, .42);
}
.contact-lines a { text-decoration: none; border-bottom: 1px solid rgba(247, 246, 242, .25); }
.contact-lines a:hover { border-bottom-color: rgba(247, 246, 242, .8); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-card .btn-primary { background: var(--paper); color: var(--ink); }
.contact-card .btn-primary:hover { background: #fff; }
.contact-card .btn-ghost { color: var(--paper); border-color: rgba(247, 246, 242, .3); }
.contact-card .btn-ghost:hover { border-color: var(--paper); background: rgba(247, 246, 242, .1); }

/* ---- Kontaktformular ---- */
.contact-form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 30px);
  box-shadow: var(--sh-2);
}
.contact-form-card h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0;
}
.cf-intro { color: var(--muted); margin: 10px 0 0; font-size: .98rem; max-width: 52ch; }

.cf { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.cf-field label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-field label span[aria-hidden] { color: var(--accent); }
.cf-opt { text-transform: none; letter-spacing: 0; font-size: .72em; opacity: .75; }

.cf input[type="text"],
.cf input[type="email"],
.cf input[type="tel"],
.cf textarea {
  font-family: var(--sans);
  font-size: .97rem;
  line-height: 1.35;
  color: var(--ink);
  background-color: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .72em .9em;
  width: 100%;
  min-width: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
/* Der Zieh-Griff unten rechts ist reine Browser-Optik. Statt ihn zu zeigen,
   waechst das Feld selbst mit dem Text (Hoehe kommt aus kontakt.js). */
.cf textarea {
  resize: none;
  overflow-y: auto;
  min-height: 92px;
  max-height: 260px;
  line-height: 1.55;
}
.cf textarea::-webkit-resizer { display: none; }
.cf input:hover, .cf textarea:hover { border-color: var(--muted-2); }
.cf input:focus, .cf textarea:focus {
  outline: none;
  background-color: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 63, 208, .13);
}
.cf .is-fehler input, .cf .is-fehler textarea { border-color: #c0392b; }
.cf .is-fehler input:focus, .cf .is-fehler textarea:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .14); }

/* =========================================================
   Themenauswahl: eigenes Auswahlfeld, kein <select>.
   Der Browser zeichnet hier nichts, weder das Menue noch eine
   Scrollleiste noch einen Fokusring. Alle Farben und Masse kommen
   aus den Tokens in style.css, damit das Feld exakt so aussieht
   wie die Eingabefelder daneben.
   ========================================================= */
.cf-eigenlabel {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.cf-wahl { position: relative; min-width: 0; }

.cf-wahl-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8em;
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: .97rem;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .72em .9em;
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.cf-wahl-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-wahl-pfeil {
  width: 12px; height: 8px;
  flex-shrink: 0;
  color: var(--muted-2);
  transition: transform .22s var(--ease), color .18s var(--ease);
}
.cf-wahl-knopf:hover { border-color: var(--muted-2); }
.cf-wahl-knopf:hover .cf-wahl-pfeil { color: var(--muted); }
.cf-wahl-knopf:focus-visible,
.cf-wahl-knopf[aria-expanded="true"] {
  outline: none;
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 63, 208, .13);
}
.cf-wahl-knopf[aria-expanded="true"] .cf-wahl-pfeil { transform: rotate(180deg); color: var(--accent); }

/* Das Menue: eigene Flaeche, eigener Rahmen, eigener Schatten.
   Es ist breiter als das Feld sein darf, damit kein Text abgeschnitten wird. */
.cf-wahl-liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-3);
  padding: 5px;
}
.cf-wahl-liste[hidden] { display: none; }
/* Die Liste ist sichtbar, sobald sie da ist. Das Einblenden ist eine reine
   Zugabe: bliebe die Bewegung aus, waere die Liste trotzdem zu sehen.
   Mit opacity 0 als Grundzustand haette ein ausbleibender Uebergang sie
   unsichtbar stehen lassen. */
.cf-wahl-liste.is-auf { animation: cf-wahl-auf .16s var(--ease); }
@keyframes cf-wahl-auf {
  from { opacity: 0; transform: translateY(-6px); }
}
/* nach oben klappen, wenn unten kein Platz ist */
.cf-wahl-liste.is-hoch { top: auto; bottom: calc(100% + 6px); }
.cf-wahl-liste.is-hoch.is-auf { animation-name: cf-wahl-auf-hoch; }
@keyframes cf-wahl-auf-hoch {
  from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-wahl-liste.is-auf { animation: none; }
}
/* rechtsbuendig, wenn das Menue sonst aus der Karte liefe */
.cf-wahl-liste.is-rechts { left: auto; right: 0; }

.cf-wahl-opt {
  padding: .58em .75em;
  border-radius: 7px;
  font-size: .93rem;
  line-height: 1.35;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.cf-wahl-opt.is-aktiv { background: var(--accent-w); color: var(--ink); }
.cf-wahl-opt.is-gewaehlt { font-weight: 600; color: var(--accent); }
.cf-wahl-opt.is-gewaehlt.is-aktiv { background: var(--accent); color: var(--panel); }

.cf-err { font-size: .8rem; color: #c0392b; min-height: 0; display: none; }
.cf-err.is-da { display: block; }

/* Spamfalle – für Menschen unsichtbar, aber nicht display:none (Bots prüfen das) */
.cf-trap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Einwilligung als eigener Schalter, keine rohe Checkbox */
.cf-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  background: transparent;
  border: 0;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.cf-check-box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  margin-top: 1px;
  position: relative;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.cf-check-box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.5);
  opacity: 0;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.cf-check:hover .cf-check-box { border-color: var(--muted-2); }
.cf-check[aria-checked="true"] .cf-check-box { background: var(--accent); border-color: var(--accent); }
.cf-check[aria-checked="true"] .cf-check-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.cf-check-txt { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.cf-check-txt a { color: var(--accent); text-underline-offset: 2px; }
.cf.is-fehler-datenschutz .cf-check-box { border-color: #c0392b; }

.cf-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cf-status { font-size: .87rem; color: var(--muted); }
.cf-status.is-gut { color: #1c7a4a; }
.cf-status.is-fehler { color: #c0392b; }
.cf button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Bestätigung nach dem Senden */
.cf-danke {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 22px 24px;
  margin-top: 24px;
}
.cf-danke h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.015em; }
.cf-danke p { margin: 0 0 8px; color: var(--muted); font-size: .93rem; }
.cf-danke p:last-child { margin-bottom: 0; }

.contact-aside {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.2vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cc-titel { font-size: 1.05rem; letter-spacing: -.018em; margin: 0 0 18px; }

/* Ablauf – gibt der Karte Substanz, statt die Höhe mit Leerraum zu strecken */
.cc-ablauf {
  border-top: 1px solid rgba(247, 246, 242, .16);
  padding-top: 22px;
}
.cc-ablauf h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 246, 242, .45);
}
.cc-ablauf ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cc-ablauf li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: .89rem;
  line-height: 1.5;
  color: rgba(247, 246, 242, .78);
}
.cc-ablauf .n {
  font-family: var(--mono);
  font-size: .68rem;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 246, 242, .28);
  border-radius: 6px;
  color: var(--paper);
  margin-top: 1px;
}
.cc-fuss {
  margin: 0;
  padding-top: 4px;
  font-size: .84rem;
  color: rgba(247, 246, 242, .5);
  line-height: 1.5;
}
.contact-aside h3 { font-size: 1.05rem; letter-spacing: -.018em; margin: 0; }
.contact-aside > p { color: var(--muted); font-size: .93rem; margin: 0; }
.contact-aside ul {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.contact-aside li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  font-size: .92rem;
  color: var(--ink-soft);
  align-items: start;
}
.contact-aside li::before {
  content: '';
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(var(--acc), .14);
  border: 1.5px solid rgba(var(--acc), .55);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}

/* =========================================================
   7 · EINBLENDEN BEIM SCROLLEN
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   8 · RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  :root { --secpad: 72px; }
  #kontakt { --secpad: 45px; }          /* dasselbe Verhältnis wie am Desktop */
  .dossier-card { grid-template-columns: minmax(0, 1fr); }
  .dossier-side { border-left: 0; border-top: 1px solid var(--line); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  /* Leistungen zweispaltig: Trennlinien wandern mit */
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung:nth-child(odd) { border-left: 0; padding-left: 0; }
  .leistung:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 22px; }
  .leistung:nth-child(n+3) { border-top: 1px solid var(--line-soft); padding-top: 26px; }
}

@media (max-width: 760px) {
  .stage-tools { justify-content: center; }
  .toolgroup.devices { display: none; }   /* Gerätewechsel ergibt auf Handy keinen Sinn */
  .frame { --frame-w: 100% !important; }
  .stage { --stage-h: clamp(500px, 76vh, 660px); }
  .stagewrap.is-full .stage { --stage-h: max(360px, calc(100vh - 208px)); }
}

@media (max-width: 620px) {
  :root { --secpad: 58px; }
  #kontakt { --secpad: 36px; }
  /* Menuezeilen auf Fingergroesse bringen */
  .cf-wahl-opt { padding: .82em .8em; }
  .wl-kind { display: none; }
  .wl-name { font-size: .88rem; }
  .switcher-labels { gap: 6px; }
  .contact-lines li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .facts .v { text-align: left; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }

  /* Leistungen einspaltig: nur noch waagerechte Linien */
  .leistungen { grid-template-columns: minmax(0, 1fr); }
  .leistung, .leistung:nth-child(even) { border-left: 0; padding-left: 0; padding-right: 0; }
  .leistung + .leistung { border-top: 1px solid var(--line-soft); padding-top: 24px; }
}

@media (max-width: 400px) {
  .stage-wrapinner, .dossier { padding-inline: 16px; }
  .wl-num { display: none; }
  .rail { padding: 0 22px; }
  .rail-track, .rail-fill, .rail-stops { left: 22px; right: 22px; }
  .rail-fill { width: calc((100% - 44px) * var(--pn, 0)); }
  .puck { left: calc(22px + (100% - 44px) * var(--pn, 0)); width: 44px; }
}