/* Allwicher Engineering & Consulting
   Welt: Kachelraster aus dem Signet, gezeichnet mit der Präzision einer technischen Zeichnung.
   Engineering ist das Raster, KI leuchtet darin in den Tönen der Datenmatrix. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/MonaSans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  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: "Mona Sans";
  src: url("/assets/fonts/MonaSans-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

:root {
  /* Marke */
  --ground: #F8F8F8;
  --white: #FFFFFF;
  --tile: #E9EDF6;
  --hell: #E1E7F4;
  --blau: #899DD0;
  --dunkel: #455FA1;
  --tief: #233057;
  --tief-tile: #2B3A66;
  --text: #151515;
  --grau: #575756;
  --auf-tief: #C9D2EC;

  /* Raster */
  --cols: 12;
  --fuge: 4px;
  --rand: clamp(16px, 3vw, 44px);
  --fehler: #A3262A;
  --kopf-h: 84px;

  /* Typografie */
  --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(17px, 0.35vw + 15.5px, 19px);
  --fs-label: 12px;
  --fs-h1-sub: clamp(34px, 3.8vw, 60px);
  --fs-h2: clamp(28px, 2.9vw, 46px);
  --fs-h3: clamp(19px, 1.25vw, 22px);
  --fs-lead: clamp(18px, 1.3vw, 22px);

  /* Abstände (für das Regler-Panel in Phase 6) */
  --abschnitt: clamp(48px, 4.8vw, 88px);
  --text-breite: 64ch;

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 760px) {
  :root { --cols: 6; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Sicherheitsnetz: Die Seite lässt sich nicht seitlich verschieben, auch wenn etwas übersteht.
   Nicht auf html/body: Safari lässt dann nichts mehr kleben (Kopfzeile, Leistungen, Ansicht-Titel).
   Deshalb nur auf Bereiche, die selbst nichts Klebendes enthalten, und bei den anderen auf deren nicht klebende Teile. */
@supports (overflow: clip) {
  main > :not(:has(.lage, .ansicht__titel)), .fuss,
  .kopfzeile, .lage__liste, .ansicht__inhalt { overflow-x: clip; }
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--blau) var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  caret-color: var(--dunkel);
  overflow-x: hidden;
}
::selection { background: var(--tief); color: var(--white); }
img, svg { display: block; max-width: 100%; }
a { color: var(--dunkel); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--tief); }
:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { color: var(--tief); font-weight: 700; letter-spacing: -0.028em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; line-height: 1.25; font-weight: 680; }
p, li { text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--tief); color: var(--white); padding: 10px 16px; font-weight: 650; }
.skip:focus { top: 8px; }
.skip:hover { color: var(--white); }

/* ---------- Kacheln als Bauteil ---------- */
.tile-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 30px;
  font: 650 17px/1.2 var(--font); letter-spacing: -0.005em; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.tile-btn--primary { background: var(--tief); color: var(--white); }
.tile-btn--primary:hover { background: var(--dunkel); color: var(--white); }
.tile-btn--secondary { background: var(--white); color: var(--tief); }
.tile-btn--secondary:hover { background: var(--hell); color: var(--tief); }
.tile-btn--light { background: var(--white); color: var(--tief); }
.tile-btn--light:hover { background: var(--hell); }
.tile-btn .pfeil { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--fuge); }

/* Positionsnummer aus der Zeichnung */
.pos {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--tief); background: var(--white);
  color: var(--tief); font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
a.pos:hover { background: var(--tief); color: var(--white); }

/* Maßlinie */
.mass { position: relative; height: 16px; border-left: 1px solid var(--dunkel); border-right: 1px solid var(--dunkel); }
.mass::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px solid var(--dunkel); }
.mass--tief { border-color: var(--blau); }
.mass--tief::after { border-color: var(--blau); }
/* Maßlinie wird einmal von links nach rechts gezogen, wenn sie ins Bild kommt (main.js setzt .gezeichnet) */
.mass-zieht .mass { clip-path: inset(-2px 100% -2px -2px); }
/* Animation statt Übergang: Chromium überspringt Übergänge bei Linien, die schon beim Laden im Bild sind.
   2 px Luft rundherum, damit am Ende nichts von halben Pixeln abgeschnitten wird. */
.mass-zieht .mass.gezeichnet { animation: masszug .8s cubic-bezier(.65, 0, .35, 1) .15s both; }
@keyframes masszug { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px); } }
@media print { .mass-zieht .mass { clip-path: none; } }

/* Schriftfeld-Zelle */
.sf-label { display: block; font-size: var(--fs-label); font-weight: 650; letter-spacing: 0.02em; color: var(--grau); line-height: 1.3; margin-bottom: 4px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--kopf-h); padding: 0 var(--rand); /* Wortmarke auf der Inhaltslinie */
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.kopf.is-scrolled { border-bottom-color: var(--hell); }
.kopf__logo { display: flex; align-items: center; gap: 16px; text-decoration: none; }
/* Zusatz im Kopf: Maßlinie zieht auf, ENGINEERING & CONSULTING erscheint als Maßzahl, danach zieht sich alles zurück.
   Einmal pro Besuch (main.js, ohne Speicher im Browser) und beim Darüberfahren. */
.kopf__zusatz { position: relative; display: flex; align-items: center; justify-content: center; width: 228px; height: 14px; pointer-events: none; }
.kopf__zusatz::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--dunkel); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease) .55s; }
.kopf__zusatz::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; border-left: 1px solid var(--dunkel); border-right: 1px solid var(--dunkel); opacity: 0; transition: opacity .2s ease .5s; }
.kopf__zusatz-text { position: relative; z-index: 1; padding: 0 8px; background: var(--ground); font-size: 10.5px; font-weight: 650; letter-spacing: .15em; line-height: 1; color: var(--dunkel); white-space: nowrap;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(24, end); }
.kopf__logo.zeigt .kopf__zusatz::before { transform: scaleX(1); transition-delay: 0s; }
.kopf__logo.zeigt .kopf__zusatz::after { opacity: 1; transition-delay: .35s; }
.kopf__logo.zeigt .kopf__zusatz-text { clip-path: inset(0 0 0 0); transition: clip-path .9s steps(24, end) .5s; }
@media (hover: hover) {
  .kopf__logo:hover .kopf__zusatz::before { transform: scaleX(1); transition-delay: 0s; }
  .kopf__logo:hover .kopf__zusatz::after { opacity: 1; transition-delay: .35s; }
  .kopf__logo:hover .kopf__zusatz-text { clip-path: inset(0 0 0 0); transition: clip-path .9s steps(24, end) .5s; }
}
@media (prefers-reduced-motion: reduce) { .kopf__zusatz::before, .kopf__zusatz::after, .kopf__zusatz-text { transition: none !important; } }
/* nur wo neben der Wortmarke Platz ist */
@media (max-width: 1249px) and (min-width: 1081px), (max-width: 600px) { .kopf__zusatz { display: none; } }
.kopf__logo .logo { height: var(--logo-h, 25px); width: auto; display: block; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav__list { display: flex; gap: clamp(16px, 2vw, 32px); list-style: none; padding: 0; }
.nav__list > li { position: relative; }
.nav__link { color: var(--tief); text-decoration: none; font-size: 15px; font-weight: 560; padding: 8px 0; display: inline-block; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--dunkel); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Startsymbol: Haus in Linienzeichnung, Text nur für Screenreader (mobil sichtbar) */
.nav__home { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav__home[aria-current="page"] { border-bottom-color: var(--dunkel); }
.nav__haus { display: block; }
.nav__home-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__sub {
  position: absolute; left: -16px; top: 100%; min-width: 240px; padding: 6px; list-style: none;
  background: var(--white); display: grid; gap: var(--fuge);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  border: 1px solid var(--hell);
}
.nav__list > li:hover .nav__sub, .nav__list > li:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: 10px 12px; color: var(--tief); text-decoration: none; font-size: 15px; font-weight: 560; background: var(--ground); }
.nav__sub a:hover { background: var(--hell); }
.lang { display: flex; gap: 6px; font-size: 14px; font-weight: 600; color: var(--grau); }
.lang a { color: var(--grau); text-decoration: none; }
.lang a:hover { color: var(--tief); }
.lang [aria-current="true"] { color: var(--tief); }
.kopf__cta { min-height: 48px; padding: 0 22px; font-size: 15px; }
.menu-btn { display: none; }

@media (max-width: 1080px) {
  :root { --kopf-h: 68px; }
  .kopf { backdrop-filter: none; background: var(--ground); }
  .kopf__logo .logo { height: 21px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
    background: var(--tief); color: var(--white); border: 0; font: 650 15px var(--font); cursor: pointer;
  }
  .nav {
    position: fixed; top: 68px; left: 0; right: 0; height: calc(100dvh - 68px); z-index: 29; background: var(--ground);
    flex-direction: column; align-items: stretch; gap: var(--fuge); padding: var(--fuge);
    overflow-y: auto; display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: var(--fuge); }
  .nav__link { display: block; background: var(--white); padding: 18px 16px; font-size: 18px; }
  .nav__home { display: flex; border-bottom: 0; }
  .nav__home-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav__link:hover, .nav__link[aria-current="page"] { text-decoration: none; background: var(--hell); }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: var(--fuge) 0 0 24px; background: transparent; }
  .nav__sub a { background: var(--white); padding: 14px 16px; }
  .lang { padding: 16px; background: var(--white); font-size: 16px; }
  .kopf__cta { display: flex; min-height: 60px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abschnitt) var(--rand); position: relative; }
.abschnitt--weiss { background: var(--white); }
.abschnitt--hell { background: var(--hell); }
.abschnitt--tief { background: var(--tief); color: var(--white); }
.abschnitt--tief h2, .abschnitt--tief h3 { color: var(--white); }
.abschnitt--tief a { color: var(--auf-tief); }
.abschnitt--tief a:hover, .fuss a:hover, #form-success a:hover { color: var(--white); }
.abschnitt--tief .pos { background: transparent; color: var(--white); border-color: var(--blau); }
.inner { max-width: 1352px; margin: 0 auto; }
.kopfzeile { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); margin-bottom: clamp(24px, 2.8vw, 44px); }
.kopfzeile > * { grid-column: 1 / span 9; }
.kopfzeile .mass { margin-bottom: 24px; }
.kopfzeile p { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.45; color: var(--grau); max-width: 52ch; }
.abschnitt--tief .kopfzeile p { color: var(--auf-tief); }
@media (max-width: 760px) { .kopfzeile > * { grid-column: 1 / -1; } }

/* Zweispaltig wie eine Ansicht: Überschrift links, Inhalt rechts */
.ansicht { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge) clamp(16px, 2vw, 32px); align-items: start; }
.ansicht__titel { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 36px); }
.ansicht__titel .mass { margin-bottom: 26px; max-width: 220px; }
.ansicht__inhalt { grid-column: 6 / span 7; }
.ansicht__inhalt > * + * { margin-top: 22px; }
.ansicht__inhalt p { max-width: var(--text-breite); }
@media (max-width: 960px) {
  .ansicht__titel, .ansicht__inhalt { grid-column: 1 / -1; position: static; }
  .ansicht__titel { margin-bottom: 20px; }
}

/* Liste in Kacheln */
.kachelliste { list-style: none; padding: 0; display: grid; gap: var(--fuge); }
.kachelliste li { background: var(--white); padding: 18px 22px 18px 58px; position: relative; line-height: 1.5; }
.kachelliste li::before { content: ""; position: absolute; left: 22px; top: 25px; width: 14px; height: 14px; background: var(--blau); }
.abschnitt--weiss .kachelliste li { background: var(--ground); }
.abschnitt--tief .kachelliste li { background: var(--tief-tile); color: var(--white); }
.abschnitt--tief .kachelliste li::before { background: var(--blau); }
.kachelliste--zwei { grid-template-columns: repeat(2, 1fr); }
.usecases h3 { margin-bottom: 8px; }
.usecases p { font-size: 16px; line-height: 1.5; }
/* freie sechste Zelle: leuchtende Kachel, damit der Block im Raster bleibt */
.usecases::after { content: ""; background: var(--blau); min-height: 60px; }
@media (min-width: 1100px) { .usecases { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .usecases::after { display: none; } }
@media (max-width: 760px) { .kachelliste--zwei { grid-template-columns: 1fr; } }

/* Stationen eines Ablaufs */
.stationen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: var(--fuge); counter-reset: st; position: relative; }
.station { background: var(--white); padding: 20px 20px 24px; position: relative; }
.station__nr { display: block; font-size: 15px; font-weight: 700; color: var(--dunkel); font-variant-numeric: tabular-nums; margin-bottom: 22px; position: relative; }
.station__nr::after { content: ""; position: absolute; left: 34px; right: -26px; top: 50%; border-top: 1px solid var(--blau); }
.station:last-child .station__nr::after { display: none; }
.station h3 { margin-bottom: 10px; }
.station p { font-size: 15.5px; line-height: 1.5; color: #2A2A2A; }
.abschnitt--weiss .station { background: var(--ground); }
@media (max-width: 1080px) { .stationen { grid-template-columns: repeat(2, 1fr); } .station__nr::after { display: none; } }
@media (max-width: 600px) { .stationen { grid-template-columns: 1fr; } .station { min-height: 0; } .station__nr { margin-bottom: 16px; } }

/* Entwicklungsstreifen: das Raster wird zur Datenmatrix */
.entwicklung { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--fuge); margin-top: var(--fuge); }
.entwicklung i { aspect-ratio: 1; background: var(--tile); transition: background-color .5s var(--ease); }
.entwicklung i.t1 { background: var(--blau); } .entwicklung i.t2 { background: var(--dunkel); } .entwicklung i.t3 { background: var(--tief); }
@media (max-width: 760px) { .entwicklung { grid-template-columns: repeat(12, 1fr); } }

/* Stückliste (Tabelle) */
.stueckliste { width: 100%; border-collapse: collapse; font-size: 17px; }
.stueckliste th { text-align: left; font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); padding: 0 16px 12px 0; border-bottom: 2px solid var(--tief); }
.stueckliste td { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--blau); vertical-align: top; line-height: 1.55; }
.stueckliste td:first-child { width: 72px; }
.stueckliste td:nth-child(2) { width: 28%; font-weight: 680; color: var(--tief); font-size: 19px; }
@media (max-width: 760px) {
  .stueckliste thead { display: none; }
  .stueckliste tr { display: grid; grid-template-columns: 54px 1fr; border-bottom: 1px solid var(--blau); padding: 18px 0; }
  .stueckliste td { border: 0; padding: 0; width: auto !important; }
  .stueckliste td:nth-child(3) { grid-column: 2; margin-top: 6px; }
}

/* Fragen */
.fragen { border-top: 2px solid var(--tief); }
.frage { border-bottom: 1px solid var(--blau); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0; font-size: clamp(18px, 1.3vw, 22px); font-weight: 650; color: var(--tief); letter-spacing: -0.01em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; flex: none; width: 22px; height: 22px; background:
  linear-gradient(var(--tief), var(--tief)) center / 100% 2px no-repeat,
  linear-gradient(var(--tief), var(--tief)) center / 2px 100% no-repeat; transition: transform .3s var(--ease); }
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--dunkel); }
.frage__antwort { padding: 0 0 28px; max-width: var(--text-breite); }

/* ---------- Startseite: erster Bildschirm ---------- */
.hero { --t: min(calc((100cqw - (var(--cols) + 1) * var(--fuge)) / var(--cols)), calc((100svh - var(--kopf-h) - 7 * var(--fuge)) / 6.15)); container-type: inline-size; position: relative; padding: 0 var(--fuge) var(--fuge); isolation: isolate; }
.hero__feld {
  position: absolute; inset: 0 var(--fuge) var(--fuge); z-index: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: var(--t); gap: var(--fuge); align-content: start;
}
.hero__feld > i { background: var(--tile); }
.hero__feld > i.l1 { background: var(--blau); } .hero__feld > i.l2 { background: var(--dunkel); } .hero__feld > i.l3 { background: var(--tief); }
.hero__feld > i.lit { animation: aufleuchten .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 250ms); }
@keyframes aufleuchten { from { background: var(--tile); } }
@media (prefers-reduced-motion: reduce) { .hero__feld > i.lit { animation: none; } }
.hero__aw { position: absolute; z-index: 1; right: var(--fuge); top: 0; bottom: var(--fuge); width: calc(5 / 12 * 100cqw); pointer-events: none; }
.hero__aw polyline, .hero__aw line { stroke: var(--ground); }
.hero__inhalt {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--fuge);
  padding-top: calc(var(--t) * 0.62); min-height: calc(var(--t) * 6 + var(--fuge) * 5);
}
.hero__copy { grid-column: 1 / span 7; padding: 0 0 0 clamp(8px, 2.6cqw, 40px); }
/* Maßlinie so lang wie die Überschrift: der Textblock ist nur so breit wie sein breitester Inhalt */
.hero__copy { justify-self: start; width: max-content; max-width: 100%; }
.hero__copy .mass { margin-bottom: calc(var(--t) * 0.16 + 8px); }
.hero h1 { font-size: calc(var(--hero-h1, clamp(40px, min(5.6cqw, 10.2svh), 88px)) * var(--h1-k, 1)); line-height: .98; letter-spacing: -0.032em; }
.hero__zeile { display: block; }
.hero__sub { margin-top: 14px; font-size: clamp(19px, min(1.95cqw, 3.2svh), 30px); font-weight: 600; color: var(--dunkel); letter-spacing: -0.012em; line-height: 1.25; }
.hero__intro { grid-column: 1 / span 6; margin-top: calc(var(--t) * 0.18); align-self: start; background: var(--ground); padding: 12px clamp(14px, 2.6cqw, 40px); font-size: var(--hero-intro, clamp(15.5px, min(1.2cqw, 2.1svh), 18px)); line-height: 1.5; }
/* Statt Absatz: ein Satz als Ansage, darunter eine kleine Belegzeile (Simon 2026-10-20: leicht, nicht mächtig) */
.hero__kern { padding-top: 14px; padding-bottom: 14px; }
.hero__ansatz { margin: 0; color: var(--tief); font-size: clamp(18px, min(1.45cqw, 2.6svh), 23px); font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
.hero__beleg { margin: 8px 0 0; font-size: clamp(13px, min(0.95cqw, 1.8svh), 15px); font-weight: 600; letter-spacing: .01em; color: var(--grau); line-height: 1.45; }
.hero__trenner { color: var(--blau); padding: 0 .2em; }
/* Satz als Bemaßung: „Vom Anwendungsfall ├──────┤ bis in die Serie.“ Die drei Wege stehen übereinander darunter:
   Vom Anfang laufen drei Leitungen zu den Wegen, von dort drei zum Ende (gleichzeitig, nicht nacheinander).
   Danach läuft eine feine Bezugslinie vor dem AW nach unten und rechts ins Schriftfeld, das kurz pulsiert (main.js).
   Beim ersten Erscheinen einmal, sonst bei Maus darüber oder Fokus. Ruhige, weiche Bewegungen. Handy: nur der Satz
   (Simon 2026-10-20). */
.hero__kern { position: relative; z-index: 4; --weich: cubic-bezier(.45, 0, .2, 1); }
/* Das Feld ist so breit wie sein Inhalt, ohne hellen Balken (Desktop); die Linie mindestens so lang, wie die drei Wege
   brauchen, und so, dass der Satz bündig mit der Überschrift endet (--spanne setzt main.js). Handy: mit Balken. */
@media (min-width: 761px) { .hero__intro.hero__kern { justify-self: start; max-width: 100%; background: transparent; } }
@media (min-width: 1100px) { .hero__intro.hero__kern { grid-column: 1 / span 7; } }
.hero__ansatz--spanne { display: flex; align-items: center; gap: 14px; }
.hero__ende { flex: none; }
.hero__spanne { position: relative; flex: 0 1 auto; width: var(--spanne, 240px); min-width: 80px; height: 16px; }
.hero__spanne .mass { position: absolute; left: 0; right: 0; top: 0; }
/* Leitungen: Pfade mit pathLength 1, gezogen über stroke-dashoffset. Die Verzögerung --d gilt nur fürs Ziehen beim
   Öffnen; Farbwechsel beim Darüberfahren laufen sofort und ohne Durchsicht (Kacheln bleiben deckend). */
.hero__netz { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero__netz path { fill: none; stroke: var(--blau); stroke-width: 1; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .5s var(--weich), stroke .25s var(--weich); }
.hero__netz rect { fill: var(--blau); opacity: 0; transition: opacity .3s var(--weich), fill .25s var(--weich); }
.hero__weg { position: absolute; display: flex; gap: 2px; background: var(--ground); text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .35s var(--weich), transform .35s var(--weich); }
/* Trefferfläche über die Lücken zwischen den Kacheln, damit beim Wechseln nichts flackert */
.hero__weg::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.hero__weg-nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--tief); color: var(--white); font-size: 13px; font-weight: 700; transition: background-color .25s var(--weich); }
.hero__weg-tx { flex: 1 1 auto; display: flex; align-items: center; height: 30px; padding: 0 14px 0 12px; background: var(--white); color: var(--tief); font-size: 14px; font-weight: 650; transition: background-color .25s var(--weich), color .25s var(--weich); }
.hero__weg:hover .hero__weg-nr, .hero__weg:focus-visible .hero__weg-nr { background: var(--blau); }
.hero__weg:hover .hero__weg-tx, .hero__weg:focus-visible .hero__weg-tx { background: var(--hell); }
.hero__kern.ist-offen .hero__netz path, .hero__kern:focus-within .hero__netz path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--weich) var(--d, 0s), stroke .25s var(--weich); }
.hero__kern.ist-offen .hero__netz rect, .hero__kern:focus-within .hero__netz rect { opacity: 1; transition: opacity .4s var(--weich) var(--d, 0s), fill .25s var(--weich); }
.hero__kern.ist-offen .hero__weg, .hero__kern:focus-within .hero__weg { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s var(--weich) calc(.55s + var(--n) * 90ms), transform .45s var(--weich) calc(.55s + var(--n) * 90ms); }
@media (hover: hover) {
  .hero__kern:hover .hero__netz path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--weich) var(--d, 0s), stroke .25s var(--weich); }
  .hero__kern:hover .hero__netz rect { opacity: 1; transition: opacity .4s var(--weich) var(--d, 0s), fill .25s var(--weich); }
  .hero__kern:hover .hero__weg { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s var(--weich) calc(.55s + var(--n) * 90ms), transform .45s var(--weich) calc(.55s + var(--n) * 90ms); }
  /* Maus über einem Weg: seine Bahnen dunkel, die anderen Kacheln und Bahnen hell (deckend, nichts scheint durch) */
  .hero__kern:has(.hero__weg:hover) .hero__weg:not(:hover) .hero__weg-nr { background: #A9B4D6; }
  .hero__kern:has(.hero__weg:hover) .hero__weg:not(:hover) .hero__weg-tx { color: #8E97B3; }
  .hero__kern:has(.hero__weg:hover) .hero__netz [data-k] { stroke: #C3CBE3; }
  .hero__kern:has(.hero__weg:nth-of-type(1):hover) .hero__netz [data-k="0"],
  .hero__kern:has(.hero__weg:nth-of-type(2):hover) .hero__netz [data-k="1"],
  .hero__kern:has(.hero__weg:nth-of-type(3):hover) .hero__netz [data-k="2"] { stroke: var(--tief); }
}
/* Bezugslinie zum Schriftfeld und pulsierender Rahmen; eckige Punkte an Anfang und Ende */
.hero__bezug { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.hero__bezug path { fill: none; stroke: var(--blau); stroke-width: 1; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1), stroke-width .3s var(--ease); }
.hero__bezug.zieht path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1), stroke-width .3s var(--ease); }
.hero__bezug.steht path { stroke-dashoffset: 0; transition: stroke-width .3s var(--ease); }
.hero__bezug rect { fill: var(--blau); opacity: 0; transition: opacity .5s var(--ease); }
.hero__bezug.zieht .bezug-start, .hero__bezug.steht .bezug-start, .hero__bezug.da rect { opacity: 1; }
.hero__bezug.stark path { stroke-width: 2; }
/* In der Linie: Die Maßlinie blendet beim Öffnen aus, die Bahnen übernehmen; sonst schiene sie durch Weg 2 */
.hero__spanne .mass::after { transition: opacity .35s var(--ease); }
.wege-inline.ist-offen .hero__spanne .mass::after, .wege-inline:focus-within .hero__spanne .mass::after { opacity: 0; }
@media (hover: hover) { .wege-inline:hover .hero__spanne .mass::after { opacity: 0; } }
.hero__sf { position: relative; }
.hero__sf::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--blau); opacity: 0; pointer-events: none; }
.hero__sf.pulst::after { animation: sf-puls 2.6s ease-in-out both; }
@keyframes sf-puls {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(69, 95, 161, .45); }
  12% { opacity: 1; box-shadow: 0 0 0 0 rgba(69, 95, 161, .45); }
  45% { box-shadow: 0 0 0 12px rgba(69, 95, 161, 0); }
  50% { box-shadow: 0 0 0 0 rgba(69, 95, 161, .45); }
  85% { opacity: 1; box-shadow: 0 0 0 12px rgba(69, 95, 161, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 12px rgba(69, 95, 161, 0); }
}
.hero__spanne i { display: none; }
@media (max-width: 760px) {
  /* Handy (Simon 2026-10-20): Anfang oben links, Maßlinie über die volle Breite mit den drei Wegen als beschriftete
     Teilstriche, Ende unten rechts. Keine Leitungen, keine Bezugslinie. */
  .hero__ansatz--spanne { flex-direction: column; align-items: stretch; gap: 0; }
  .hero__ansatz--spanne .hero__ende:first-child { margin-bottom: 26px; }
  .hero__ansatz--spanne .hero__ende:last-child { align-self: flex-end; margin-top: 30px; }
  .hero__spanne { flex: none; width: 100%; }
  .hero__spanne i { display: block; font-style: normal; position: absolute; left: var(--x); top: 3px; height: 10px; border-left: 1px solid var(--blau); }
  .hero__spanne b { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); font-size: 12.5px; font-weight: 650; letter-spacing: 0; color: var(--blau); white-space: nowrap; line-height: 1.2; }
  .hero__spanne i.unten b { bottom: auto; top: 14px; }
  .hero__wege, .hero__netz, .hero__bezug { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__netz path, .hero__netz rect, .hero__weg, .hero__bezug path { transition: none !important; } .hero__sf.pulst::after { animation: none; } }
.hero__ctas { grid-column: 1 / span 5; align-self: end; display: flex; gap: var(--fuge); margin-top: calc(var(--t) * 0.22); }
.hero__ctas .tile-btn { min-height: calc(var(--t) * 0.56); flex: 1 1 auto; }
.hero__pos { --cw: calc((100cqw - 11 * var(--fuge)) / 12); position: absolute; z-index: 3; left: calc(var(--fuge) + 7 * (var(--cw) + var(--fuge)) + var(--cw) / 2 - 20px); display: flex; gap: var(--fuge); text-decoration: none; }
/* Nummer und Benennung als Kacheln, wie die Karten der drei Wege */
.hero__pos-nr { display: grid; place-items: center; width: 40px; height: 40px; background: var(--tief); color: var(--white); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s var(--ease); }
.hero__pos-text { display: flex; align-items: center; height: 40px; background: var(--hell); color: var(--tief); font-size: clamp(14px, 1.1cqw, 16px); font-weight: 650; padding: 0 14px; white-space: nowrap; transition: background-color .2s var(--ease); }
.hero__pos:hover .hero__pos-nr, .hero__pos:focus-visible .hero__pos-nr { background: var(--dunkel); }
.hero__pos:hover .hero__pos-text, .hero__pos:focus-visible .hero__pos-text { background: var(--white); }
.hero__pos--1 { top: calc(var(--t) * 1.5 - 20px + var(--fuge)); }
.hero__pos--2 { top: calc(var(--t) * 2.5 - 20px + var(--fuge) * 2); }
.hero__pos--3 { top: calc(var(--t) * 3.5 - 20px + var(--fuge) * 3); }
.hero__sf { grid-column: 9 / span 4; align-self: end; margin-top: calc(var(--t) * 0.22); display: grid; grid-template-columns: 1fr 1fr; gap: var(--fuge); }
.hero__sf > div { background: var(--white); padding: 10px 14px; font-size: clamp(13px, 1.05cqw, 16px); color: var(--tief); line-height: 1.35; }
.hero__sf > .hero__sf-mail { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .hero__inhalt { padding-top: calc(var(--t) * 2.35); min-height: 0; }
  .hero__copy { grid-column: 1 / -1; padding-left: 12px; padding-right: 12px; width: auto; justify-self: stretch; }
  .hero h1 { font-size: clamp(38px, 11cqw, 56px); }
  .hero__sub { font-size: 20px; }
  .hero__intro { grid-column: 1 / -1; margin-top: calc(var(--t) * 0.5); padding: 14px 12px; }
  .hero__ctas { grid-column: 1 / -1; flex-direction: column; margin-top: var(--fuge); }
  .hero__ctas .tile-btn { min-height: 60px; }
  /* AW im Seitenverhältnis der Zeichnung (viewBox 500 × 600) über drei Spalten, neben Maßlinie und Überschrift (Simon 2026-10-20, Variante C1) */
  .hero__aw { width: calc(3 / 6 * 100cqw); bottom: auto; height: calc(3 / 6 * 100cqw * 1.2); }
  .hero__pos { display: none; }
  .hero__sf { grid-column: 1 / -1; margin-top: var(--fuge); }
  .hero__sf > div { font-size: 15px; padding: 12px; }
  .hero__sf > .hero__sf-mail { display: none; }
}

/* Drei Wege: Kacheln mit angedockter Nummer, Links als Zeilen, Rückseite mit dem Vorgehen */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fuge); }
.weg { position: relative; perspective: 1600px; display: grid; grid-template-rows: 1fr auto; gap: var(--fuge); }
.weg__karte { display: grid; height: 100%; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.weg__seite { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: var(--fuge); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.weg__seite--hinten { transform: rotateY(180deg); }
/* Die verdeckte Seite zusätzlich ausblenden, Wechsel genau dann, wenn die Karte auf der Kante steht (90°):
   Safari zeigt die Rückseite sonst je nach Version gespiegelt über der Vorderseite.
   Mit --ease ist die Kante schon nach rund 10 % der Zeit erreicht (61 ms von 600 ms). */
.weg__seite { transition: visibility 0s linear 61ms; }
.weg:not(.is-flipped) .weg__seite--hinten, .weg.is-flipped .weg__seite--vorne { visibility: hidden; }
.weg.is-flipped .weg__karte { transform: rotateY(180deg); }
.weg__kopf { display: grid; grid-template-columns: 58px 1fr; gap: var(--fuge); }
.weg__nr { display: grid; place-items: center; background: var(--tief); color: var(--white); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 58px; }
.weg__titel { display: flex; flex-direction: column; justify-content: center; gap: 3px; background: var(--hell); color: var(--tief); padding: 10px 18px; font-size: clamp(19px, 1.45vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.weg__unter { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--dunkel); line-height: 1.3; }
.weg--ki .weg__unter { color: var(--white); opacity: .88; }
.weg--ki .weg__titel { background: var(--blau); color: var(--white); }
.weg__koerper { background: var(--white); padding: 20px 24px 0; display: flex; flex-direction: column; }
.weg__text { margin-bottom: 20px; }
/* Hauptlink: unten genau eine Zeile, rechts daneben die Dreh-Kachel */
.weg__haupt-liste { margin: auto -24px 0; display: grid; }
.weg__haupt { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 24px; border-top: 1px solid var(--hell); color: var(--tief); font-weight: 650; text-decoration: none; transition: background-color .2s var(--ease); position: relative; }
.weg__text + .weg__haupt:hover, .weg__haupt:focus-visible { background: var(--hell); color: var(--tief); }
.weg__haupt:hover .weg__pfeil { transform: translateX(4px); }
.weg__seite--hinten .weg__koerper { padding-bottom: 22px; }
.weg__text { line-height: 1.6; }
.weg__pfeil { flex: none; transition: transform .2s var(--ease); }
.weg__schritte { list-style: none; padding: 0; display: grid; gap: var(--fuge); counter-reset: schritt; }
.weg__schritte li { background: var(--ground); padding: 8px 12px 8px 42px; font-size: 15px; font-weight: 600; color: var(--tief); position: relative; counter-increment: schritt; line-height: 1.35; }
.weg__schritte li::before { content: counter(schritt, decimal-leading-zero); position: absolute; left: 12px; top: 8px; font-size: var(--fs-label); font-weight: 650; color: var(--dunkel); line-height: 1.75; }
/* Vorgehen: eigene Kachel unter der Karte, über die volle Breite */
.weg__dreh { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; background: var(--tile); border: 0; cursor: pointer; font: 650 15px var(--font); color: var(--tief); text-align: left; transition: background-color .2s var(--ease), color .2s var(--ease); }
.weg__dreh-icon { display: grid; place-items: center; }
.weg__dreh-icon svg { transition: transform .45s var(--ease); }
.weg__dreh:hover, .weg__dreh:focus-visible { background: var(--tief); color: var(--white); }
.weg__dreh:hover .weg__dreh-icon svg { transform: rotate(-90deg); }
.weg.is-flipped .weg__dreh { background: var(--hell); }
.weg.is-flipped .weg__dreh:hover { background: var(--tief); }
@media (prefers-reduced-motion: reduce) { .weg__karte, .weg__seite, .weg__dreh-icon svg { transition: none; } }
@media (max-width: 960px) {
  .wege { grid-template-columns: 1fr; }
  /* einspaltig (Handy, Tablet hochkant): weich an- und auslaufende Drehung, Kante genau in der Mitte */
  .weg__karte { transition: transform .7s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
  .weg__seite { transition: visibility 0s linear .35s; }
}
/* Handy: Wege klar getrennt, Untertitel in einer Zeile, damit alle Köpfe gleich hoch sind (Simon 2026-10-20, V1) */
@media (max-width: 600px) {
  .wege { gap: 32px; }
  .weg__kopf { grid-template-columns: 48px 1fr; }
  .weg__nr { min-height: 56px; font-size: 22px; }
  .weg__titel { padding: 9px 14px; }
  .weg__unter { font-size: 13px; }
}
@media (max-width: 374px) { .weg__unter { font-size: 12.5px; } }

/* Ausgangslage wählen */
.lage { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); }
.lage__liste { grid-column: 1 / span 7; list-style: none; padding: 0; display: grid; gap: var(--fuge); }
.lage__btn {
  width: 100%; text-align: left; background: var(--white); border: 0; cursor: pointer;
  padding: 13px 20px 13px 58px; position: relative; font: 560 clamp(15.5px, 1.05vw, 17px)/1.4 var(--font); color: var(--text);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.lage__btn::before { content: ""; position: absolute; left: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--tief); background: var(--white); transition: background-color .25s var(--ease); }
.lage__btn:hover { background: var(--hell); }
.lage__btn[aria-pressed="true"] { background: var(--tief); color: var(--white); }
.lage__btn[aria-pressed="true"]::before { background: var(--blau); border-color: var(--blau); }
.lage__matrix { grid-column: 9 / span 4; align-self: start; position: sticky; top: calc(var(--kopf-h) + 24px); }
.lage__matrix p { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); margin-bottom: 10px; }
.lage__felder { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fuge); list-style: none; padding: 0; }
.lage__felder li { display: flex; }
.lage__felder a {
  flex: 1; min-height: clamp(64px, 6.5vh, 92px); display: flex; align-items: flex-end; padding: 12px 14px; text-decoration: none;
  background: var(--tile); color: var(--tief); font-weight: 650; font-size: clamp(14px, 1vw, 17px); line-height: 1.25;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.lage__felder a.is-lit { background: var(--dunkel); color: var(--white); }
.lage__felder a.is-lit.is-stark { background: var(--tief); }
.lage__felder a:hover { outline: 2px solid var(--tief); outline-offset: -2px; }
.haltung { margin-top: 28px !important; font-size: clamp(22px, 1.9vw, 30px) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.12; color: var(--tief) !important; }
.haltung__zeile { display: block; }
@media (max-width: 960px) { .lage__liste, .lage__matrix { grid-column: 1 / -1; position: static; } .lage__matrix { margin-top: 24px; } .lage__felder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .lage__felder { grid-template-columns: repeat(2, 1fr); } }
/* Handy und Tablet hochkant: Die Leistungen bleiben beim Durchgehen der Ausgangslagen unten im Bild,
   damit das Aufleuchten ohne Scrollen zu sehen ist (Simon 2026-10-20, Variante A) */
@media (max-width: 960px) {
  .lage__matrix { display: contents; }
  .lage__matrix > p:first-child { grid-column: 1 / -1; margin: 20px 0 0; }
  .lage__felder { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; background: var(--ground); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
  .lage__felder a { min-height: 40px; align-items: center; padding: 6px 12px; font-size: 14px; }
  .haltung { grid-column: 1 / -1; }
}

/* Kombination (Tiefblau) */
.kombi__text { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge) clamp(16px, 2vw, 32px); }
.kombi__text > .links { grid-column: 1 / span 6; }
.kombi__text > .rechts { grid-column: 7 / span 6; }
.kombi__text p { color: var(--auf-tief); font-size: clamp(17px, 1.25vw, 20px); }
.kombi__text p + p { margin-top: 20px; }
.punkte { list-style: none; padding: 0; display: grid; gap: var(--fuge); }
.punkte li { background: var(--tief-tile); padding: 16px 20px; display: grid; grid-template-columns: 38px 1fr; gap: 18px; align-items: start; color: var(--white); line-height: 1.5; }
.kombi__text .abgrenzung { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--blau); color: var(--white); font-size: clamp(17px, 1.2vw, 19px); }
@media (max-width: 960px) { .kombi__text > .links, .kombi__text > .rechts { grid-column: 1 / -1; } .kombi__text > .rechts { margin-top: 28px; } }

/* Erfahrung mit Porträt */
.erfahrung { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); }
.portraet { grid-column: 1 / span 4; display: grid; gap: var(--fuge); align-self: start; max-width: 340px; }
.portraet__bild { background: var(--ground); padding: 20px 20px 0; }
.portraet__bild img, .portraet__bild canvas { width: 100%; height: auto; }
/* Kachelbilder nie breiter als ihr Platz (das Skript setzt die Breite in Pixeln) */
.is-bild canvas { max-width: 100%; height: auto; }
.portraet, .portraet__bild, .seitenmatrix, .seitenkopf__seite { min-width: 0; }
.portraet__bild [data-portrait] { display: block; position: relative; }
/* Schublade im Kachelporträt: Links im Spalt zwischen den Kopfhälften (Lage, Größe und Sichtbarkeit setzt main.js) */
.schublade { position: absolute; left: 0; top: 0; }
.schublade a { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; white-space: nowrap; font-weight: 650; letter-spacing: .01em; line-height: 1.2; color: var(--tief); text-decoration: none; padding: 2px 4px; background: var(--ground); }
.schublade a:hover, .schublade a:focus-visible { color: var(--blau); }
.portraet__bild noscript img { width: 100%; height: auto; }
.portraet__unter { background: var(--white); padding: 14px 18px; font-size: 15px; color: var(--tief); line-height: 1.4; }
/* Über mich: Kachelporträt größer, im Schriftfeld das echte Foto als runder Avatar (Kreis wie die Positionsnummern) */
.seitenkopf__seite.portraet--gross { grid-column: 9 / span 4; max-width: 460px; justify-self: end; width: 100%; }
.portraet__unter--foto { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; }
.portraet__unter--foto img { width: 84px; height: 84px; border-radius: 50%; padding: 2px; border: 1.5px solid var(--tief); background: var(--white); object-fit: cover; display: block; }
@media (max-width: 960px) { .seitenkopf__seite.portraet--gross { grid-column: 1 / -1; justify-self: start; max-width: 380px; } }
.erfahrung__rechts { grid-column: 5 / span 8; }
.fakten { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fuge); margin-top: 24px; }
.fakt { background: var(--ground); padding: 18px 20px 16px; display: flex; flex-direction: column; }
.fakt__zeit { margin-top: auto; padding-top: 12px; font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); }
.fakt--ki .fakt__zeit { color: var(--auf-tief); }
.abschnitt--weiss .fakt { background: var(--ground); }
.fakt h3 { margin-bottom: 10px; }
.fakt p { font-size: 16px; line-height: 1.55; }
.fakt--ki { background: var(--tief) !important; color: var(--white); }
.fakt--ki h3 { color: var(--white); }
.fakt--ki .sf-label { color: var(--auf-tief); }
.erfahrung__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.erfahrung__link { display: inline-flex; flex: none; }
@media (max-width: 960px) { .portraet, .erfahrung__rechts { grid-column: 1 / -1; } .portraet { max-width: 420px; } .erfahrung__rechts { margin-top: 36px; } }
@media (max-width: 600px) { .fakten { grid-template-columns: 1fr; } }

/* Abschluss als Schriftfeld */
.schluss { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); }
.schluss__titel { grid-column: 1 / span 7; background: var(--white); padding: clamp(24px, 2.6vw, 44px); }
.schluss__titel p { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.45; color: var(--grau); max-width: 36ch; }
.schluss__feld { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(84px, auto); gap: var(--fuge); }
.schluss__feld > div { background: var(--white); padding: 16px 18px; color: var(--tief); font-size: 16px; line-height: 1.4; }
.schluss__feld > div a { color: var(--tief); font-weight: 600; text-decoration: none; }
.schluss__feld > div a:hover { text-decoration: underline; }
.schluss__feld .tile-btn { grid-column: 1 / -1; justify-content: space-between; font-size: 19px; min-height: 76px; }
.schluss__feld .voll { grid-column: 1 / -1; }
.abschnitt--weiss .schluss__titel, .abschnitt--weiss .schluss__feld > div { background: var(--ground); }
@media (max-width: 960px) { .schluss__titel, .schluss__feld { grid-column: 1 / -1; } }
@media (max-width: 480px) { .schluss__feld { grid-template-columns: 1fr; } }

/* ---------- Unterseiten ---------- */
.seitenkopf { container-type: inline-size; padding: 0 var(--fuge); position: relative; }
.seitenkopf__band { --t: calc((100cqw - (var(--cols) + 1) * var(--fuge)) / var(--cols)); display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: calc(var(--t) * .5); gap: var(--fuge); }
.seitenkopf__band i { background: var(--tile); }
.seitenkopf__band i.l1 { background: var(--blau); } .seitenkopf__band i.l2 { background: var(--dunkel); } .seitenkopf__band i.l3 { background: var(--tief); }
.seitenkopf__inhalt { padding: clamp(36px, 4vw, 68px) var(--rand) clamp(40px, 4.5vw, 72px); }
.seitenkopf__inhalt .inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge) clamp(16px, 2vw, 32px); }
.seitenkopf__text { grid-column: 1 / span 8; }
.seitenkopf__text .mass { margin-bottom: 28px; }
/* Handy: lange Wörter in Überschriften (z. B. „Datenschutzerklärung“) trennen statt über den Rand laufen */
@media (max-width: 760px) { h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } }
/* Handy: Maßlinie näher an der Überschrift (Simon 2026-10-20) */
@media (max-width: 760px) {
  .kopfzeile .mass, .ansicht__titel .mass, .seitenkopf__text .mass { margin-bottom: 16px; }
  .erfahrung__kopf .mass { margin-bottom: 16px !important; } /* Abstand steht dort im style-Attribut */
}
.seitenkopf h1 { font-size: var(--fs-h1-sub); line-height: 1.02; }
.seitenkopf__intro { margin-top: 20px; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; max-width: 58ch; }
.seitenkopf__text .btn-row { margin-top: 26px; }
.seitenkopf__seite { grid-column: 10 / span 3; align-self: end; }
.seitenmatrix { grid-column: 9 / span 4; align-self: start; display: grid; gap: var(--fuge); }
.seitenmatrix__feld { position: relative; }
.seitenmatrix__bild i.l1 { background: var(--blau); } .seitenmatrix__bild i.l2 { background: var(--dunkel); } .seitenmatrix__bild i.l3 { background: var(--tief); }
.seitenmatrix__bild { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fuge); grid-column: 1 / -1; }
.seitenmatrix__bild i { aspect-ratio: 1; background: var(--tile); }
.seitenmatrix__bild.is-bild { display: block; }
.seitenmatrix__bild canvas { display: block; }
/* Positionsnummer als eckige Kachel in der Ecke, wie bei den drei Wegen */
.seitenmatrix__nr { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; background: var(--tief); color: var(--white); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1; }
.seitenmatrix__sf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fuge); }
.seitenmatrix__sf > div { background: var(--white); padding: 10px 14px; font-size: 15px; color: var(--tief); line-height: 1.35; }
.seitenmatrix__sf a { color: inherit; text-decoration: none; }
.seitenmatrix__leistung { grid-column: 1 / -1; font-weight: 650; }
@media (max-width: 960px) { .seitenkopf__text, .seitenkopf__seite { grid-column: 1 / -1; } .seitenkopf__seite { margin-top: 32px; max-width: 320px; } .seitenmatrix { max-width: 420px; } }

.beispiel { background: var(--tief); color: var(--white); padding: clamp(28px, 3vw, 48px); }
.beispiel p { color: var(--auf-tief); font-size: clamp(18px, 1.35vw, 21px); }

/* Werdegang als Zeichnung */
.werdegang { list-style: none; padding: 0; border-left: 2px solid var(--tief); }
.werdegang > li { position: relative; padding: 0 0 28px 34px; }
.werdegang > li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; background: var(--tief); }
.werdegang > li.ki::before { background: var(--blau); }
.werdegang .zeit { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); }
.werdegang h3 { margin: 6px 0 10px; }
.werdegang ul { padding-left: 1.1em; display: grid; gap: 8px; margin-top: 10px; }
/* Rollen innerhalb einer Station: Rolle fett, Zeitraum und Auftraggeber als Feldbezeichnung daneben */
.werdegang__rolle { margin-top: 2px; color: var(--tief); }
.werdegang__intro { max-width: 64ch; }
.rollen { display: grid; gap: var(--fuge); margin-top: 18px; }
.rolle { background: var(--ground); padding: 16px 20px; }
.abschnitt--weiss .rolle { background: var(--ground); }
.rolle__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--tief); }
.rolle__kopf span { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); }
.rolle ul { margin-top: 8px; gap: 6px; font-size: 16px; line-height: 1.5; }
/* Kenntnisse: Schriftfeld-Kacheln mit Begriffen als eckige Marken */
.kenntnisse { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fuge); }
.kenntnis { background: var(--white); padding: 16px 18px 18px; }
.kenntnis h3.sf-label { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); margin: 0 0 10px; line-height: 1.3; }
.marken { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.marken li { background: var(--tile); color: var(--tief); font-size: 15px; font-weight: 560; line-height: 1.3; padding: 6px 10px; }
.kenntnisse__sprachen { margin-top: 14px; color: var(--tief); }
.kenntnisse__sprachen .sf-label { display: inline; margin-right: 10px; }
@media (max-width: 760px) { .kenntnisse { grid-template-columns: 1fr; } }
/* Engineering: CATIA-Kachel mit Reitern, darunter die übrigen Werkzeuge */
.ansicht__inhalt > .catia + .werkzeuge { margin-top: var(--fuge); }
.catia { background: var(--white); }
.catia__kopf { padding: 20px 22px 16px; }
.catia__kopf h3 { font-size: clamp(22px, 1.7vw, 28px); letter-spacing: -0.02em; margin: 2px 0 6px; }
.catia__kopf p { font-size: 16px; line-height: 1.5; color: var(--grau); max-width: 60ch; }
.catia__reiterleiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fuge); padding: 0 22px; }
.catia__reiter { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: var(--tile); color: var(--tief); border: 0; cursor: pointer; font: 650 16px/1.25 var(--font); transition: background-color .2s var(--ease), color .2s var(--ease); }
.catia__zahl { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); }
.catia__reiter:hover { background: var(--hell); }
.catia__reiter[aria-selected="true"] { background: var(--tief); color: var(--white); }
.catia__reiter[aria-selected="true"] .catia__zahl { color: var(--auf-tief); }
.catia__feld { padding: 16px 22px 22px; }
.catia__feld p { font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
.catia__feld + .catia__feld { border-top: 1px solid var(--hell); }
.js .catia__feld + .catia__feld { border-top: 0; }
.catia__feld[hidden] { display: none; }
.werkzeuge { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fuge); }
.werkzeug { background: var(--white); padding: 18px 20px 20px; }
.werkzeug h3 { font-size: 18px; letter-spacing: -0.01em; margin: 2px 0 8px; line-height: 1.3; }
.werkzeug p { font-size: 15.5px; line-height: 1.5; }
@media (max-width: 760px) { .catia__reiterleiste { grid-template-columns: repeat(2, 1fr); } .werkzeuge { grid-template-columns: 1fr; } }

/* Kontakt und Formular */
.kontakt { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge) clamp(16px, 2vw, 32px); }
.kontakt__form { grid-column: 1 / span 7; }
.kontakt__direkt { grid-column: 9 / span 4; display: grid; gap: var(--fuge); align-self: start; }
.abschnitt--formular { padding-top: clamp(32px, 3.5vw, 56px); }
.kontakt__direkt > div { background: var(--ground); padding: 16px 20px; color: var(--tief); }
.kontakt__direkt a { color: var(--tief); font-weight: 600; text-decoration: none; }
.kontakt__direkt a:hover { text-decoration: underline; }
@media (max-width: 960px) { .kontakt__form, .kontakt__direkt { grid-column: 1 / -1; } .kontakt__direkt { margin-top: 32px; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fuge); }
.field { background: var(--white); padding: 14px 18px 16px; display: flex; flex-direction: column; position: relative; }
.field--voll { grid-column: 1 / -1; }
.field label, .field .label { font-size: var(--fs-label); font-weight: 650; letter-spacing: .02em; color: var(--grau); margin-bottom: 6px; }
.field .opt { font-weight: 500; }
.field input, .field select, .field textarea {
  font: 500 17px/1.5 var(--font); color: var(--text); background: transparent; border: 0; border-bottom: 1.5px solid var(--blau);
  padding: 6px 0 8px; border-radius: 0; width: 100%; appearance: none;
}
.field select { background: linear-gradient(45deg, transparent 50%, var(--tief) 50%) calc(100% - 10px) 55% / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--tief) 50%) calc(100% - 4px) 55% / 7px 7px no-repeat; padding-right: 28px; cursor: pointer; }
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--tief); }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--dunkel); }
.field .hint { font-size: 14px; color: var(--grau); margin-top: 8px; }
.field-error { display: none; font-size: 14px; font-weight: 600; color: var(--fehler); margin-top: 8px; }
.field.has-error .field-error { display: block; }
.field.has-error { box-shadow: inset 0 0 0 2px var(--fehler); }
.form__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--fuge) 24px; align-items: center; margin-top: 12px; }
.form__fuss p { font-size: 15px; color: var(--grau); max-width: 46ch; }
.form__fuss .tile-btn { min-width: 240px; justify-content: space-between; }
.form__fuss .tile-btn[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; font-size: 15px; }
.form-status.is-error { color: var(--fehler); font-weight: 600; }
#form-wrap.is-sent form { display: none; }
#form-success { background: var(--tief); color: var(--white); padding: clamp(28px, 3vw, 48px); }
#form-success h2 { color: var(--white); font-size: clamp(28px, 2.6vw, 40px); }
#form-success p { color: var(--auf-tief); margin-top: 14px; font-size: 19px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* Rechtstexte */
/* Rechtstexte: Spalte links an der Inhaltskante, Zeilenlänge begrenzt */
.rechtstext > * { max-width: 72ch; }
.rechtstext h2 { font-size: clamp(24px, 2vw, 30px); margin: 40px 0 12px; }
.rechtstext p + p { margin-top: 14px; }
.rechtstext ul { margin: 10px 0 14px 1.2em; padding: 0; display: grid; gap: 6px; }
.rechtstext ul + p { margin-top: 14px; }
/* Offene Stellen in Entwürfen: gut sichtbar, der Build bricht ab, solange eine im Text steht */
mark.offen { background: #FFE98A; color: var(--text); padding: 0 4px; }
.offen-hinweis { margin-bottom: 8px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tief); color: var(--white); padding: clamp(48px, 5vw, 80px) var(--rand) 28px; }
.fuss__feld { max-width: 1352px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fuge); }
.fuss__feld > div { background: var(--tief-tile); padding: 16px 18px; font-size: 15px; line-height: 1.45; }
.fuss__feld .sf-label { color: var(--auf-tief); }
.fuss__feld a { color: var(--white); text-decoration: none; }
.fuss__feld a:hover { text-decoration: underline; }
.fuss__logo { grid-column: 1 / span 4; grid-row: span 2; display: flex; align-items: center; }
.fuss__logo { justify-content: center; }
.fuss__logo .logo { width: min(88%, 360px); height: auto; }
/* Zusatz im Fußlogo läuft einmal ein wie im Kopf (Maßlinie zieht auf, dann der Text in Stufen) und bleibt dann stehen.
   main.js setzt .fuss-zieht und, sobald das Logo im Bild ist, .zeigt (Simon 2026-10-20) */
/* nach dem Einlaufen fällt der Zuschnitt ganz weg (fill-mode backwards), damit das Logo exakt wie vorher gezeichnet wird */
.fuss-zieht .fuss__logo:not(.zeigt) .logo__zusatz-linie, .fuss-zieht .fuss__logo:not(.zeigt) .logo__zusatz-text { clip-path: inset(-2px 100% -2px -2px); }
.fuss-zieht .fuss__logo.zeigt .logo__zusatz-linie { animation: fuss-linie .6s var(--ease) .1s backwards; }
.fuss-zieht .fuss__logo.zeigt .logo__zusatz-text { animation: fuss-text .9s steps(24, end) .6s backwards; }
@keyframes fuss-linie { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px); } }
@keyframes fuss-text { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px); } }
.fuss__name { grid-column: 5 / span 4; }
.fuss__adr { grid-column: 9 / span 4; }
.fuss__tel { grid-column: 5 / span 2; } .fuss__mail { grid-column: 7 / span 3; } .fuss__li { grid-column: 10 / span 3; }
.fuss__recht { grid-column: 1 / span 8; } .fuss__lang { grid-column: 9 / span 4; }
.fuss__lang [aria-current="true"] { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 960px) { .fuss__feld > div { grid-column: 1 / -1 !important; } .fuss__logo { grid-row: auto; } }

/* Einblenden: Inhalt ist sichtbar, Bewegung nur als Zugabe */
.reveal { transition: transform .9s var(--ease), opacity .9s var(--ease); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-in) { opacity: 1; transform: none; } }

/* Abschnittsassistent: Kachelsäule am rechten Rand, füllt sich beim Scrollen wie die Datenmatrix */
.leitfaden { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 25; transition: opacity .3s var(--ease), visibility .3s; }
.leitfaden.is-ruhend { opacity: 0; visibility: hidden; pointer-events: none; }
.leitfaden ol { list-style: none; margin: 0; padding: 6px; display: grid; gap: 6px; background: transparent; transition: background-color .25s var(--ease); }
.leitfaden:hover ol, .leitfaden:focus-within ol { background: var(--ground); outline: 1px solid var(--hell); }
.leitfaden a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: var(--tief); }
.leitfaden i { display: block; width: var(--lf, 14px); height: var(--lf, 14px); background: var(--tile); box-shadow: 0 0 0 1px rgba(35, 48, 87, .14); flex: none; transition: background-color .35s var(--ease), transform .25s var(--ease); }
.leitfaden a.is-done i { background: var(--blau); }
.leitfaden a[aria-current="true"] i { background: var(--tief); transform: scale(1.25); }
.leitfaden__name { font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .3s var(--ease), opacity .25s var(--ease); }
.leitfaden:hover .leitfaden__name, .leitfaden:focus-within .leitfaden__name { max-width: 180px; opacity: 1; }
.leitfaden:hover .leitfaden__name { color: var(--grau); }
.leitfaden:hover a:hover .leitfaden__name, .leitfaden a[aria-current="true"] .leitfaden__name { color: var(--tief); }
.leitfaden a:hover i { background: var(--dunkel); }
/* über tiefblauen Flächen: aktive Kachel hell, damit sie nicht im Grund verschwindet */
.leitfaden.auf-tief i { box-shadow: none; background: rgba(255, 255, 255, .16); }
.leitfaden.auf-tief a.is-done i { background: var(--blau); }
.leitfaden.auf-tief a[aria-current="true"] i { background: var(--white); }
@media (max-width: 1180px) { .leitfaden { display: none; } }
@media (prefers-reduced-motion: reduce) { .leitfaden i, .leitfaden__name { transition: none; } }