/* Fonts: self-hosted (Archivo, JetBrains Mono; SIL OFL 1.1, see fonts/README.md). latin + latin-ext only. */
/* Archivo 400 700 · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext-553e4de4.woff2) format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 400 700 · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-6cbde114.woff2) format("woff2");
  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;
}
/* JetBrains Mono 400 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-b19c2080.woff2) format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-cc27b304.woff2) format("woff2");
  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;
}
/* JetBrains Mono 500 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-b19c2080.woff2) format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-cc27b304.woff2) format("woff2");
  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;
}
/* JetBrains Mono 700 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-b19c2080.woff2) format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 700 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-cc27b304.woff2) format("woff2");
  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;
}

:root {
  --bg: #fbfaff;
  --bg-2: #f3f0fa;
  --line: #e3ddf0;
  --purple: #6c3ce0;
  --purple-hi: #6c3ce0;
  --purple-deep: #2e1766;
  --ink: #170f2e;
  --muted: #5c5475;
  --accent: #ffb547;
  --accent-ink: #170f2e;
  --hl: #6c3ce0;
  --btn-bg: #6c3ce0;
  --btn-ink: #ffffff;
  --warn: #b45f00;
  --maxw: 1280px;
  --gut: 32px;
  --gap: 24px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Archivo", system-ui, sans-serif;
}

/* dark islands: figures, terminals, code, log, contact band */
.frame, .term, .code, .island, .cta-band {
  --bg: #0d0918;
  --bg-2: #161028;
  --line: #2a2244;
  --ink: #f4f1ff;
  --muted: #9e97b8;
  --purple-hi: #b79cff;
  --hl: #ffb547;
  --btn-bg: #ffb547;
  --btn-ink: #170f2e;
  color: var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* grain */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 100;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); }
  80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}
@keyframes blink { 50% { opacity: 0; } }

.label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.label b { color: var(--hl); font-weight: 500; }

/* visible placeholder: anything in .ph still needs real content */
.ph {
  font-family: var(--mono); font-size: .86em; font-weight: 400; letter-spacing: 0;
  color: var(--muted); white-space: nowrap;
  border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);
  padding: 0 .4em;
}

/* nav */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.top .wrap { display: flex; align-items: stretch; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo b { color: var(--purple-hi); font-weight: 700; }
.logo .mark { display: block; margin-right: 10px; flex: none; }
.nav-r { display: flex; align-items: stretch; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.links { display: flex; }
.links > a, .drop-t, .menu-btn { display: flex; align-items: center; gap: 8px; padding: 0 24px; border-left: 1px solid var(--line); transition: color .15s, background .15s; }
.links > a:hover, .drop-t:hover, .drop:focus-within .drop-t, .drop:hover .drop-t { color: var(--ink); background: var(--bg-2); }
.links > a[aria-current="page"], .drop-t[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.drop-t i { width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .15s, margin .15s; }
.drop:hover .drop-t i, .drop:focus-within .drop-t i { transform: rotate(225deg); margin-top: 3px; }
.cta-nav { display: flex; align-items: center; padding: 0 24px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 500; transition: filter .15s; }
.cta-nav:hover { filter: brightness(1.08); }
.cta-nav .arr { margin-left: 1ch; }
.menu-btn { display: none; background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: var(--ink); cursor: pointer; }

/* Leistungen panel: every service one click away */
.drop { position: relative; display: flex; }
.drop-p {
  position: absolute; top: 100%; right: -1px; z-index: 60; width: min(620px, calc(100vw - 2 * var(--gut)));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 24px 24px 0; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(23,15,46,.35);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.drop:hover .drop-p, .drop:focus-within .drop-p { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.drop-c .label { margin-bottom: 8px; }
.drop-c a { display: block; padding: 10px 0 11px; border-top: 1px solid var(--line); }
.drop-c a b { display: block; font-family: var(--sans); font-stretch: 106%; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; transition: color .15s; }
.drop-c a span:not(.tag) { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.drop-c a:hover b, .drop-c a[aria-current="page"] b { color: var(--purple); }
.drop-c .tag { vertical-align: .15em; margin-left: 6px; }
.drop-f { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 4px 0 8px; border-top: 1px solid var(--ink); }
.drop-f .link { border-bottom: 0; font-size: 13px; color: var(--ink); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  padding: 15px 22px; border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink);
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  transition: border-color .15s, gap .15s;
}
.link:hover { border-color: var(--hl); gap: 14px; }

/* type */
h1, h2, h3 { font-weight: 600; }
h1 {
  font-stretch: 110%;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1; letter-spacing: -.035em;
}
h1 .m { color: var(--muted); }
.nw { white-space: nowrap; }
.caret { display: inline-block; width: .42em; height: .74em; background: var(--accent); margin-left: .1em; animation: blink 1s steps(1) infinite; }
h2 { font-stretch: 108%; line-height: 1.05; letter-spacing: -.03em; }
.lead { font-size: 19px; color: var(--muted); max-width: 58ch; }
.lead strong { color: var(--ink); font-weight: 500; }

/* ── document header (every page) ── */
.docmeta { border-bottom: 1px solid var(--line); }
.docmeta dl { display: flex; justify-content: space-between; gap: var(--gap); padding-top: 16px; padding-bottom: 18px; }
.docmeta dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.docmeta dd { font-family: var(--mono); font-size: 12.5px; margin-top: 3px; }
.docmeta dd a:hover { color: var(--purple); }
.docmeta dd b { color: var(--purple); font-weight: 500; }

/* ── hero ── */
.hero { padding: 64px 0 104px; }
.hero h1 { grid-column: 1 / -1; max-width: 22em; }
.hero .sub { margin-top: 48px; align-items: start; }
.hero-tight { padding: 48px 0 56px; }
.hero-tight .sub { margin-top: 32px; }
.hero-lead { grid-column: 1 / span 6; grid-row: 1; }
.hero-act { grid-column: 1 / span 3; grid-row: 1; display: flex; flex-direction: column; align-items: start; gap: 8px; }
.hero-act + .hero-lead { grid-column: 4 / span 6; }
.hero-svc { grid-column: 8 / span 5; grid-row: 1; }
.hero-svc .label { margin-bottom: 10px; }
.hero-svc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 11px 0 12px; border-top: 1px solid var(--line); }
.hero-svc a:last-child { border-bottom: 1px solid var(--line); }
.hero-svc b { font-stretch: 106%; font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: color .15s; }
.hero-svc span:not(.tag) { grid-row: 2; color: var(--muted); font-size: 14px; }
.hero-svc i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--mono); color: var(--muted); transition: color .15s, transform .15s; }
.hero-svc a:hover b, .hero-svc a:hover i { color: var(--purple); }
.hero-svc a:hover i { transform: translateX(4px); }
.hero-svc .tag { vertical-align: .15em; }
.actions { display: flex; gap: 28px; align-items: center; margin-top: 36px; flex-wrap: wrap; }


/* ── dark island (home log) ── */
.island { background: var(--bg); position: relative; overflow: hidden; }
.island::after, .cta-band::after, .frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.island > .wrap { position: relative; z-index: 4; padding-top: 104px; padding-bottom: 104px; align-items: start; }
.island-head { grid-column: 1 / span 4; }
.island-head .label { margin-bottom: 20px; }
.island-head .q { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 40px; max-width: 14em; }
.island-head p { color: var(--muted); font-size: 15px; margin-top: 32px; max-width: 32ch; }
.island-head p strong { color: var(--ink); font-weight: 500; }
.island .log { grid-column: 5 / span 8; }
.big {
  font-stretch: 112%; font-weight: 600;
  font-size: clamp(120px, 15vw, 224px); line-height: .8; letter-spacing: -.06em;
}
.big sup { color: var(--accent); font-size: .3em; vertical-align: top; margin-left: .04em; letter-spacing: 0; }

/* advisories log */
.log { font-family: var(--mono); font-size: 13.5px; border-top: 1px solid var(--ink); }
.log-row {
  display: grid; grid-template-columns: 11em 6.5em 4.5em minmax(0, 1fr) 6em; column-gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line); align-items: baseline;
  transition: background .15s;
}
.log-row > :last-child { justify-self: end; }
.log-row.head { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 12px 0; }
.log-row:not(.head):hover { background: var(--bg-2); }
.log-row .f { color: var(--muted); }
.sev { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.sev::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; }
.sev-h { color: var(--warn); } .sev-h::before { background: var(--accent); }
.island .sev-h, .code .sev-h { color: var(--accent); }
.sev-m { color: var(--purple-hi); } .sev-m::before { background: var(--purple-hi); }
.sev-l { color: var(--muted); } .sev-l::before { background: var(--muted); }
.log-row > a { transition: color .15s; }
.log-row > a:hover { color: var(--hl); text-decoration: underline; }
.log-ns { padding: 18px 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.log-ns a { color: var(--hl); }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: 48px; }
.tally > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.tally b { display: block; font-stretch: 112%; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.tally > div:first-child b { color: var(--purple); }
.tally span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; max-width: 22ch; }
.log-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.log-foot a { color: var(--hl); }

/* ── sections ── */
.sec { padding: 120px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--ink);
}
.cap h2 { font-size: clamp(28px, 3vw, 42px); }
.cap h2 .pn { font-family: var(--mono); font-size: 14px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--purple); margin-right: .9em; vertical-align: .55em; }

/* service index */
.ix {
  display: grid; grid-template-columns: 3.5em minmax(0, 4fr) minmax(0, 6fr) 2em; column-gap: var(--gap);
  padding: 26px 12px 28px; border-bottom: 1px solid var(--line); align-items: baseline;
  transition: background .15s;
}
.ix .n { font-family: var(--mono); font-size: 12px; color: var(--purple); }
.ix h3 { font-stretch: 108%; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.ix .desc { color: var(--muted); font-size: 16px; max-width: 54ch; }
.ix .go { font-family: var(--mono); justify-self: end; transition: color .15s, transform .15s; }
a.ix:hover { background: var(--bg-2); }
a.ix:hover .go { color: var(--purple); transform: translateX(4px); }
.ix.feat { background: var(--bg-2); padding-top: 32px; padding-bottom: 32px; }
.ix.feat .desc p { color: var(--ink); }
.ix h3 .tag { display: table; margin: 10px 0 0; }
.ix.feat .subl { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }
.ix.feat .subl .link { padding: 6px 0; font-size: 13px; }
.tag {
  display: inline-block; vertical-align: .3em; margin-left: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; font-stretch: 100%;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 3px 7px;
}

/* figures: frame with crop marks */
.crop { position: relative; }
.crop::before {
  content: ""; position: absolute; inset: -8px; pointer-events: none; z-index: 6;
  --c: var(--muted);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 14px no-repeat;
}
.frame {
  position: relative; overflow: hidden; aspect-ratio: 4/5;
  background:
    radial-gradient(circle, rgba(183,156,255,.28) 1px, transparent 1.2px) 0 0 / 8px 8px,
    linear-gradient(180deg, var(--purple-deep), var(--bg-2));
}
.frame > svg, .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame > img { filter: grayscale(1) contrast(1.15); mix-blend-mode: luminosity; }
.frame > .ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* team */
.team > .wrap { align-items: start; }
.team-head { grid-column: 1 / span 4; }
.team-head h2 { font-size: clamp(28px, 3vw, 42px); }
.team-head p { color: var(--muted); margin-top: 24px; max-width: 34ch; }
.team-head .link { margin-top: 20px; }
.people { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.person .frame { aspect-ratio: 1; }
.person h3 { font-size: 18px; margin-top: 22px; }
.person .role { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.person p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.person .link { font-size: 12.5px; padding: 6px 0; margin-top: 10px; }
.person .ph, .part .intro .ph { white-space: normal; }

/* contact band (end of every page except Kontakt) */
.cta-band { background: var(--purple-deep); position: relative; overflow: hidden; }
.cta-band > .wrap { position: relative; z-index: 4; padding-top: 104px; padding-bottom: 104px; align-items: start; }
.cta-band .label { grid-column: 1 / -1; margin-bottom: 28px; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.cta-band h2 { font-size: clamp(30px, 3.4vw, 48px); }
.cta-copy { grid-column: 1 / span 7; }
.cta-copy p { color: var(--muted); margin-top: 20px; max-width: 44ch; }
.cta-band .act { grid-column: 9 / span 4; align-self: end; display: flex; flex-direction: column; align-items: start; gap: 18px; }
.form textarea::placeholder, .inquiry ::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.form .check a, .inquiry .check a { text-decoration: underline; }
.mail {
  font-family: var(--mono); font-size: clamp(16px, 1.5vw, 19px);
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px;
}

/* ── document body (subpages): sticky contents + parts ── */
.doc { border-top: 1px solid var(--line); }
.doc > .wrap { align-items: start; }
.toc { grid-column: 1 / span 3; position: sticky; top: 64px; padding: 72px 0; font-family: var(--mono); font-size: 13px; }
.toc .label { margin-bottom: 14px; }
.toc a { display: grid; grid-template-columns: 2.2em 1fr; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); transition: color .15s; }
.toc a:last-child { border-bottom: 1px solid var(--line); }
.toc a span { color: var(--muted); }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on span { color: var(--purple); }
.parts { grid-column: 4 / span 9; }
.part { padding: 72px 0 88px; scroll-margin-top: 40px; }
.part + .part { border-top: 1px solid var(--line); }
.part h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 20px; }
.part h2 .pn { font-family: var(--mono); font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--purple); margin-right: .9em; vertical-align: .4em; }
.part > p.intro { color: var(--muted); max-width: 60ch; margin-bottom: 40px; }
.part .after { margin-top: 32px; color: var(--muted); max-width: 60ch; }
.part .after a { color: var(--purple); }
.part code { font-family: var(--mono); font-size: .86em; }
.part h2 + .ix { border-top: 1px solid var(--ink); }

/* definition grid */
.dl2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.dl2 > div { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.dl2 dt { font-stretch: 106%; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dl2 dd { color: var(--muted); font-size: 15px; margin-top: 6px; max-width: 44ch; }
.dl2 dd code { font-family: var(--mono); font-size: 13px; color: var(--ink); }

/* annotated code */
.code { background: var(--bg); position: relative; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.code .bar { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.code .bar i { width: 7px; height: 7px; background: var(--accent); align-self: center; }
.code pre { font-variant-ligatures: none; padding: 22px 20px 26px; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; color: var(--muted); overflow-x: auto; border-right: 1px solid var(--line); }
.code pre .k { color: var(--purple-hi); }
.code pre .s { color: var(--ink); }
.code .mk { color: var(--accent); }
.code .notes { padding: 22px 20px; font-size: 14px; color: var(--muted); }
.code .notes li { display: grid; grid-template-columns: 1.8em 1fr; margin-bottom: 16px; }
.code .notes li strong { color: var(--ink); font-weight: 500; }

.code.stack { grid-template-columns: minmax(0, 1fr); }
.fig-gap { height: 56px; }
.code.stack pre { border-right: 0; border-bottom: 1px solid var(--line); }
.code.stack .notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.code.stack .notes li { margin-bottom: 0; }
.code pre .d { display: inline-block; width: 100%; background: rgba(183,156,255,.07); }
.code pre .a { display: inline-block; width: 100%; color: var(--ink); background: rgba(255,181,71,.08); }
.code pre .c { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.code pre .p { color: var(--purple-hi); }
.code pre .ok { color: var(--accent); }
.code .bar .sev::before { width: 7px; height: 7px; margin: 0 6px 0 4px; }

/* diagrams inside dark panels (inline SVG, styled here) */
.defs { position: absolute; }
.dia { padding: 28px 24px 24px; border-bottom: 1px solid var(--line); }
.dia svg { display: block; width: 100%; height: auto; overflow: visible; }
.dia text { font-family: var(--mono); font-size: 12.5px; fill: var(--muted); }
.dia text.t { fill: var(--ink); }
.dia text.a { fill: var(--accent); }
.dia text.s { font-size: 10.5px; letter-spacing: .06em; }
.dia text.mid { text-anchor: middle; }
.dia .bx { fill: var(--bg-2); stroke: var(--line); }
.dia .bx.hi { stroke: var(--purple-hi); }
.dia .bx.acc { stroke: var(--accent); }
.dia .bx.dash { fill: none; stroke: var(--muted); stroke-opacity: .55; stroke-dasharray: 4 4; }
.dia .sq { fill: var(--accent); }
.dia .ln { fill: none; stroke: var(--muted); stroke-width: 1; }
.dia .ln.hi { stroke: var(--purple-hi); }
.dia .ln.acc { stroke: var(--accent); stroke-width: 1.5; }
.dia .ln.dash { stroke-dasharray: 4 4; }
.dia .ln.off { stroke-opacity: .45; }
.dia .pin circle { fill: var(--accent); }
.dia .pin text { fill: #170f2e; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* worked examples (home): tabs left, panel right; stacked without JS */
.cases-intro { color: var(--muted); max-width: 60ch; margin: 28px 0 56px; }
.cases { align-items: start; }
.case-tabs { grid-column: 1 / span 4; border-top: 1px solid var(--ink); }
.case-tab {
  position: relative; display: grid; grid-template-columns: 2.6em 1fr; width: 100%;
  padding: 18px 16px 20px 20px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; text-align: left; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.case-tab .n { font-family: var(--mono); font-size: 12px; color: var(--purple); padding-top: 4px; }
.case-tab q { display: block; quotes: "„" "“"; font-size: 17px; line-height: 1.35; }
.case-tab small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.case-tab:hover { color: var(--ink); }
.case-tab[aria-selected="true"] { color: var(--ink); background: var(--bg-2); }
.case-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 6px; top: 27px; width: 7px; height: 7px; background: var(--accent); }
.case-tab:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.case-panels { grid-column: 5 / span 8; }
.js .case-panels { display: grid; }
.js .case-panels { grid-template-columns: minmax(0, 1fr); }
.js .case { grid-area: 1 / 1; min-width: 0; }
.js .case:not(.on) { visibility: hidden; }
html:not(.js) .case-tabs { display: none; }
html:not(.js) .case-panels { grid-column: 1 / -1; }
html:not(.js) .case + .case { margin-top: 72px; }
.situ { font-size: 18px; max-width: 62ch; margin-bottom: 24px; }
.situ .label { display: block; margin-bottom: 6px; }
.case .link { margin-top: 20px; }

/* terminal */
.term { background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.term-bar { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.term-bar i { width: 7px; height: 7px; background: var(--accent); align-self: center; }
.term pre { padding: 16px 14px 18px; min-height: 196px; white-space: pre-wrap; color: var(--muted); font: inherit; }
.term .ok { color: var(--accent); }
.term .p { color: var(--purple-hi); }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); }
.steps li { position: relative; border-top: 1px solid var(--ink); padding: 18px 0 8px; }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--accent); }
.steps .n { font-family: var(--mono); font-size: 12px; color: var(--purple); }
.steps h3 { font-stretch: 106%; font-size: 19px; letter-spacing: -.01em; margin: 8px 0 6px; }
.steps p { color: var(--muted); font-size: 15px; }

/* faq */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap);
  padding: 22px 0; cursor: pointer; list-style: none;
  font-stretch: 106%; font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--purple); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); padding: 0 0 26px; max-width: 62ch; }

/* inquiry (Kontakt): fieldsets as document parts */
.inquiry fieldset { border: 0; min-width: 0; }
.inquiry .part { padding: 40px 0 44px; }
.inquiry .part:first-child { padding-top: 48px; }
.inquiry legend { float: left; width: 100%; padding: 0; margin-bottom: 18px; font-stretch: 108%; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.inquiry legend + * { clear: both; }
.inquiry legend .pn { font-family: var(--mono); font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--purple); margin-right: .9em; vertical-align: .3em; }
.inquiry .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gap); }
.inquiry .opts + .fields { margin-top: 24px; }
.inquiry .wide { grid-column: 1 / -1; }
.inquiry label em { font-style: normal; text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--muted) 75%, transparent); margin-left: 4px; }
.inquiry [hidden] { display: none; }
.inquiry textarea { min-height: 120px; }
.inquiry .send { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }

/* single-choice options: always show a radio circle so they read as "pick one" */
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; display: block; padding: 14px 16px 15px 44px; margin: 0 -1px -1px 0; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt::before { content: ""; position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.opt b { display: block; font-stretch: 106%; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.opt span { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.opt:hover { background: var(--bg-2); }
.opt:hover::before { border-color: var(--purple); }
.opt:has(input:checked) { z-index: 1; border-color: var(--purple); background: var(--bg-2); }
.opt:has(input:checked)::before { border-color: var(--purple); box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 7px var(--purple); }
.opt:has(input:focus-visible) { outline: 2px solid var(--purple); outline-offset: 2px; z-index: 2; }
.opts.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inquiry .opts.chips .opt { margin: 0; padding: 8px 14px 9px 36px; font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.opts.chips .opt::before { left: 13px; top: 50%; width: 12px; height: 12px; margin-top: -7px; }
.opts.chips .opt:has(input:checked)::before { box-shadow: inset 0 0 0 2.5px var(--bg-2), inset 0 0 0 6px var(--purple); }
.toc .toc-gap { margin-top: 28px; }
.toc a.done span { font-size: 0; }
.toc a.done span::before { content: "✓"; font-size: 13px; color: var(--purple); }

/* contact form */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.form .wide { grid-column: 1 / -1; }
.form label, .inquiry .fields > div > label { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.form input, .form select, .form textarea, .inquiry input:not([type=radio]):not([type=checkbox]), .inquiry select, .inquiry textarea {
  width: 100%; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 0;
  border-radius: 0; outline: none; transition: border-color .15s;
}
.form select option, .inquiry select option { background: var(--bg); }
.form textarea, .inquiry textarea { min-height: 160px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { border-color: var(--purple); }
.form .check, .inquiry .check { display: flex; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.form .check input, .inquiry .check input { width: auto; margin-top: 5px; accent-color: var(--purple); }
.facts { border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.facts > div { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.facts dd { margin-top: 4px; }
.facts dd a { color: var(--purple); }

/* footer */
footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer .g { padding-top: 56px; padding-bottom: 56px; }
footer .g > :nth-child(1) { grid-column: 1 / span 5; }
footer .g > :nth-child(2) { grid-column: 7 / span 3; }
footer .g > :nth-child(3) { grid-column: 10 / span 3; }
footer .about { margin-top: 16px; max-width: 36ch; }
footer h2 { font-family: var(--mono); font-stretch: 100%; font-size: 11px; font-weight: 500; line-height: 1.6; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: 16px; }
footer li { padding: 3px 0; }
footer a:hover { color: var(--ink); }
footer .bottom { border-top: 1px solid var(--line); padding: 20px 0; font-family: var(--mono); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .hero h1 { grid-column: 1 / -1; }
  .hero-act { grid-column: 1 / span 4; }
  .hero-lead { grid-column: 1 / -1; }
  .hero-act + .hero-lead { grid-column: 5 / span 8; }
  .hero-svc { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .island-head, .island .log { grid-column: 1 / -1; }
  .island .log { margin-top: 64px; }
  .team-head, .people { grid-column: 1 / -1; }
  .people { margin-top: 48px; }
  .cta-copy, .cta-band .act { grid-column: 1 / -1; }
  .cta-band .act { margin-top: 32px; }
  .case-tabs, .case-panels { grid-column: 1 / -1; }
  .case-panels { margin-top: 40px; }
  .toc { display: none; }
  .parts { grid-column: 1 / -1; }
  .log-row { grid-template-columns: 11em 6.5em 4.5em minmax(0, 1fr); }
  .log-row > :last-child { display: none; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .g { grid-template-columns: minmax(0, 1fr); }
  .g > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .menu-btn { display: flex; }
  .links { display: none; position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; flex-direction: column; padding: 8px var(--gut) 24px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(23,15,46,.35); }
  nav.top.open .links { display: flex; }
  .links > a, .drop-t { border-left: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .drop { display: block; }
  .drop-t i { display: none; }
  .drop-p { position: static; width: auto; opacity: 1; visibility: visible; transform: none; display: block; padding: 8px 0 8px 16px; border: 0; box-shadow: none; }
  .drop-c .label { margin: 12px 0 4px; }
  .drop-f { display: none; }
  .docmeta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--gap); }
  .hero { padding: 56px 0 72px; }
  h1 { font-size: 32px; font-stretch: 100%; }
  h2 { hyphens: auto; overflow-wrap: break-word; }
  .docmeta dl > div:nth-child(2), .docmeta dl > div:nth-child(3) { display: none; }
  .hero .sub { margin-top: 40px; }
  .hero-act { margin-bottom: 28px; }
  .sec { padding: 80px 0; }
  .island > .wrap, .cta-band > .wrap { padding-top: 72px; padding-bottom: 72px; }
  .island .log { margin-top: 48px; }
  .log-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .log-row.head { display: none; }
  .log-row > :nth-child(3) { display: none; }
  .log-row > :nth-child(4) { grid-column: 1 / -1; }
  .log-foot { flex-direction: column; gap: 8px; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .ix { grid-template-columns: 2.6em minmax(0, 1fr); row-gap: 8px; padding-left: 8px; padding-right: 8px; }
  .ix .desc { grid-column: 2; }
  .ix .go { display: none; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .part { padding: 56px 0 64px; }
  .dl2, .facts, .form, .steps, .inquiry .fields, .opts { grid-template-columns: minmax(0, 1fr); }
  .steps { row-gap: 28px; }
  .code { grid-template-columns: minmax(0, 1fr); }
  .code.stack .notes { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .dia { overflow-x: auto; padding: 20px 16px; }
  .dia svg { min-width: 600px; }
  .case-tab { padding: 14px 12px 16px 18px; }
  .case-tab q { font-size: 16px; }
  .code pre { border-right: 0; border-bottom: 1px solid var(--line); }
  footer .g { row-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Server notices (contact form result) and the form honeypot */
.notice { border-bottom: 1px solid var(--line); background: #f3effc; padding: 14px 0; font-family: var(--mono); font-size: 13px; }
.notice.err { border-bottom-color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Language menu in the header (same behaviour as the Leistungen panel, works without JS) */
.lang-sw { position: relative; display: flex; }
.lang-t { display: flex; align-items: center; gap: 8px; padding: 0 20px; border: 0; border-left: 1px solid var(--line); background: none; font: inherit; color: var(--muted); letter-spacing: .06em; cursor: pointer; transition: color .15s, background .15s; }
.lang-t:hover, .lang-sw:hover .lang-t, .lang-sw:focus-within .lang-t { color: var(--ink); background: var(--bg-2); }
.lang-t .globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.lang-t i { width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .15s, margin .15s; }
.lang-sw:hover .lang-t i, .lang-sw:focus-within .lang-t i { transform: rotate(225deg); margin-top: 3px; }
.lang-p {
  position: absolute; top: 100%; right: -1px; z-index: 60; min-width: 220px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(23,15,46,.35);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.lang-sw:hover .lang-p, .lang-sw:focus-within .lang-p { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.lang-p a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 20px; }
.lang-p a b { font-family: var(--sans); font-stretch: 106%; font-size: 15px; font-weight: 600; color: var(--ink); transition: color .15s; }
.lang-p a span { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.lang-p a:hover b, .lang-p a[aria-current] b { color: var(--purple); }
.lang-p a[aria-current] { box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 760px) {
  .lang-t { gap: 6px; padding: 0 12px; }
  .lang-t i { display: none; }
  .cta-nav { white-space: nowrap; padding: 0 16px; }
}
@media (max-width: 400px) {
  .lang-t { padding: 0 11px; }
  .lang-t .lang-code, .cta-nav .arr { display: none; }
  .menu-btn { padding: 0 14px; }
  .cta-nav { padding: 0 12px; }
}