@font-face {
  font-family: "Fraunces Local";
  src: url("/assets/fonts/Fraunces-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #f4f0e6;
  --paper-2: #ebe4d7;
  --card: #fffaf0;
  --soft: #ede5d6;
  --soft2: #f8f3e9;
  --ink: #171b17;
  --ink2: #50594f;
  --ink3: #596559;
  --line: rgba(31, 53, 43, .19);
  --forest: #17392f;
  --forest2: #0f2b24;
  --acc: #df5312;
  --acc2: #b73d08;
  --accsoft: #f3dac7;
  --brass: #9c783b;
  --brass-light: #d5ba79;
  --warm: #df5312;
  --warmsoft: #f6e2d3;
  --ok: #4f8b68;
  --oksoft: #e1eee6;
  --warn: #bf7715;
  --warnsoft: #f5e7ce;
  --bad: #a94732;
  --badsoft: #f4dfd9;
  --serif: "Fraunces Local", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --retro-shadow: 0 18px 48px rgba(15,43,36,.12), 0 2px 3px rgba(15,43,36,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 7%, rgba(213,186,121,.17), transparent 28rem),
    linear-gradient(90deg, rgba(23,57,47,.032) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 72px 100%, auto;
  font: 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(23,57,47,.22) 0 .45px, transparent .7px),
    radial-gradient(circle at 80% 70%, rgba(156,120,59,.2) 0 .4px, transparent .65px);
  background-size: 7px 7px, 11px 11px;
}

a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--acc2); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(223,83,18,.46);
  outline-offset: 3px;
}

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 32px; }
nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(244,240,230,.91);
  backdrop-filter: blur(18px) saturate(120%);
}
.navin {
  max-width: 1120px;
  min-height: 76px;
  margin-inline: auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lock { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.logo,
.brand {
  color: var(--forest);
  font: 720 25px/.9 var(--serif);
  letter-spacing: -.045em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
}
.logo .ai,
.brand .ai { color: var(--acc); }
.logo .chk,
.brand .chk { width: .6em; height: .6em; flex: none; }
.logo .chk path,
.brand .chk path { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lock .seg {
  padding-left: 1px;
  color: var(--forest);
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .105em;
  text-transform: uppercase;
  white-space: nowrap;
}
nav a:not(.logo):not(.brand):not(.navcta) {
  color: var(--ink2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
nav a:not(.logo):not(.brand):not(.navcta):hover,
nav a[aria-current="page"] { color: var(--forest); }
.navcta,
.btn.b1,
.fwrap button[type="submit"],
.console .btn:not(.ghost) {
  border: 1px solid var(--acc2);
  border-radius: 3px;
  background: var(--acc);
  color: var(--card) !important;
  box-shadow: 0 4px 0 var(--acc2);
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.navcta:hover,
.btn.b1:hover,
.fwrap button[type="submit"]:hover,
.console .btn:not(.ghost):hover { background: var(--acc2); transform: translateY(-1px); }
.navcta:active,
.btn.b1:active,
.fwrap button[type="submit"]:active,
.console .btn:not(.ghost):active { transform: translateY(2px); box-shadow: 0 2px 0 var(--acc2); }

h1,
h2,
h3 {
  color: var(--forest);
  font-family: var(--serif);
  letter-spacing: -.035em;
  line-height: 1.04;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(31px, 4vw, 47px); }
h3 { letter-spacing: -.02em; }
.hero h1 { font-size: clamp(46px, 6.2vw, 74px); max-width: 16ch; }
.eyebrow,
.code {
  color: var(--acc2);
  font: 750 11px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lead,
.sub,
p,
li { color: var(--ink2); }
.lead,
.sub { line-height: 1.55; }
section { border-color: var(--line); }

/* "Ueber uns" und "Methodik" bringen als einzige Seiten keinen eigenen
   <style>-Block mit. Ihre Struktur lag in trust.css: Abschnittsabstand,
   Trennlinie und die Abstaende der Ueberschriften. Ohne Ersatz fielen sie auf
   Browser-Vorgaben zurueck - jede Ueberschrift stand danach exakt gleich weit
   vom vorigen Abschnitt wie von ihrem eigenen Text (je 39 px), also gruppierte
   sich nichts mehr. Die Werte hier entsprechen den neu gebauten Seiten.
   Gefasst auf main.wrap, damit die uebrigen Seiten unberuehrt bleiben. */
main.wrap > section {
  border-top: 1px solid var(--line);
  padding-block: 74px;
}
main.wrap > header { padding-block: 64px 0; }
main.wrap :is(h1, h2, h3) { margin: 0; }
main.wrap > section > :is(h2, h3) { margin-bottom: 14px; }
main.wrap h1 { margin-bottom: 18px; }
main.wrap h3 { margin-bottom: 8px; }
main.wrap :is(p, ul, ol) { margin: 0 0 16px; }
main.wrap :is(p, ul, ol):last-child { margin-bottom: 0; }
main.wrap > header > p,
main.wrap > section > p,
main.wrap > section > ul,
main.wrap > section > ol { max-width: 70ch; }
main.wrap .eyebrow { margin-bottom: 14px; }
main.wrap .grid { margin-top: 26px; }

/* retro.css gibt Karten und Hinweisboxen nur ihr Aussehen - Rahmen, Grund,
   Messingkante -, den Innenabstand bringen die neu gebauten Seiten selbst mit.
   Auf diesen zwei Seiten fehlte er deshalb ganz: Der Text sass direkt auf der
   Rahmenlinie, waehrend die Messingkante (::before, 18px eingerueckt) daneben
   in der Luft haengt. Dieselbe Ursache wie bei Footer und Abschnitten. */
main.wrap .card { padding: 22px 20px 20px; }
main.wrap .card :last-child { margin-bottom: 0; }
main.wrap .card h3 { font-size: 17.5px; margin-bottom: 7px; }
main.wrap .card p { font-size: 15px; }

main.wrap .note { margin-top: 22px; padding: 16px 18px; }
main.wrap .note :last-child { margin-bottom: 0; }

main.wrap .lead { font-size: 18px; max-width: 66ch; margin-bottom: 0; }

main.wrap .steps { margin-top: 26px; }
main.wrap .step { padding: 17px 0; border-bottom: 1px solid var(--line); }
main.wrap .step:last-child { border-bottom: 0; padding-bottom: 0; }
main.wrap .step h3 { font-size: 16px; margin-bottom: 5px; }
main.wrap .step p { font-size: 15px; margin-bottom: 0; }

main.wrap .limits { margin-top: 22px; padding-left: 0; list-style: none; }
main.wrap .limits li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  font-size: 15px;
}
main.wrap .limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 2px;
  background: var(--brass);
}
main.wrap .limits li:last-child { margin-bottom: 0; }

main.wrap .links { margin-top: 22px; font-size: 15px; }
main.wrap a { color: var(--acc2); text-underline-offset: 3px; }
main.wrap a:hover { color: var(--acc); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
main > h1 { font-size: clamp(36px, 6vw, 56px); }

.card,
.pc2,
.flow,
.pk,
.bz,
.fwrap,
.recon,
.case,
.out,
.box {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,250,240,.87);
  box-shadow: var(--retro-shadow);
}
.card,
.pc2,
.pk,
.bz { position: relative; }
.card::before,
.pc2::before,
.pk::before,
.bz::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 3px;
  background: var(--brass);
}
.note,
.ki,
.kicker,
.warn {
  border-radius: 3px;
  border: 1px solid rgba(156,120,59,.38);
  background: rgba(213,186,121,.16);
}
.note,
.warn { border-left: 4px solid var(--brass); }
.limits li,
.synthetic,
.fn,
.step .n,
.clock,
.badge,
.f,
code { border-radius: 3px; }

.btn,
.btn.b2 {
  border-radius: 3px;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.btn.b2,
.btn.ghost {
  border: 1px solid var(--brass);
  background: rgba(255,250,240,.75);
  color: var(--forest);
  box-shadow: none;
}
.btn.b2:hover,
.btn.ghost:hover { border-color: var(--forest); background: var(--card); transform: translateY(-1px); }

.spec,
.ptable { border-color: var(--line); background: rgba(255,250,240,.82); }
.spec th,
.ptable th { background: rgba(156,120,59,.12); color: var(--forest); font-family: var(--mono); }
.spec td,
.ptable td { border-color: var(--line); }
details { border-color: var(--line); }
summary { color: var(--forest); font-family: var(--serif); font-size: 19px; }
summary::after { color: var(--acc); }

.console {
  border: 1px solid rgba(213,186,121,.52);
  border-radius: 4px;
  background: var(--forest2);
  color: var(--card);
  box-shadow: 0 24px 65px rgba(15,43,36,.24);
}
.console .cbar,
.console .stats,
.console .stat,
.console .row { border-color: rgba(213,186,121,.18); }
.console .cbar,
.console .case .top { background: rgba(255,250,240,.045); }
.console .clock { color: var(--brass-light); background: rgba(213,186,121,.1); }
.console .lbl,
.console .stat .k,
.console .row .vwz,
.console .empty { color: rgba(255,250,240,.58); }
.console .stat .v,
.console .row .amt,
.console .row .res,
.console .row .res b { color: var(--card); }

.fwrap input,
.fwrap select,
.fwrap textarea {
  border-color: rgba(23,57,47,.25);
  border-radius: 3px;
  background: var(--card);
}
.fwrap input:focus,
.fwrap select:focus,
.fwrap textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(223,83,18,.14); }

/* Eine Fusszeile fuer alle Seiten. Vorher setzte jede Seite ihre eigene: die
   Hoehen lagen zwischen 44 und 95 px, es gab drei Schriftgroessen, mal eine
   Trennlinie und mal keine, mal unterstrichene Links und mal nicht. Die
   Selektoren tragen bewusst "body" davor, damit sie die aelteren Regeln in den
   seiteneigenen style-Bloecken schlagen, ohne dass jede Seite angefasst werden
   muss. Seiten mit Huellcontainer (.shell, .fin) bekommen dieselben Werte.
   Die Startseite laedt diese Datei nicht und traegt die Werte inline. */
body footer {
  border-top: 1px solid var(--line);
  padding-block: 32px;
  font-size: 13.5px;
  color: var(--ink3);
}
body footer,
body footer > .shell,
body footer > .fin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  padding-inline: 0;
}
body footer > .fin { padding-block: 0; }
body footer > .fin {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 32px;
}
body footer > :last-child,
body footer > .shell > :last-child,
body footer > .fin > :last-child { margin-inline-start: auto; }
body footer a {
  color: var(--ink3);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body footer a:hover { color: var(--acc); }
body footer .logo,
body footer .brand { text-decoration: none; }

/* "Ueber uns" und "Methodik" stammen aus der Vorgaenger-Gestaltung und tragen
   noch <footer class="wrap">. Ihr Layout lag in trust.css; ohne Ersatz fielen
   sie auf display:block zurueck und die Eintraege liefen ohne Abstand
   zusammen ("...2026ImpressumDatenschutz..."). Die uebrigen Seiten bringen
   ihre eigene footer-Regel mit und bleiben unberuehrt. */
footer.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-block: 32px;
  font-size: 13.5px;
  /* Die lange Mailadresse hat sonst keine Umbruchstelle und ragt heraus. */
  overflow-wrap: anywhere;
}
footer.wrap a:first-of-type { margin-inline-start: auto; }
footer.wrap a:hover { color: var(--acc); }

@media (max-width: 760px) {
  .wrap { padding-inline: 20px; }
  .navin { min-height: 64px; padding: 10px 20px; gap: 10px 14px; flex-wrap: wrap; }
  .logo,
  .brand { font-size: 21px; }
  .lock .seg { font-size: 8px; }
  nav a:not(.logo):not(.brand):not(.navcta) { font-size: 12px; }
  .navcta { padding: 7px 10px; font-size: 12px; }
  h1 { font-size: clamp(38px, 12vw, 54px); }
  h2 { font-size: clamp(29px, 9vw, 40px); }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .grid { grid-template-columns: 1fr; }
  /* Auf schmalen Displays bricht der Footer ohnehin um. Der Auto-Abstand
     wuerde die Links dann in eine eigene rechtsbuendige Zeile schieben. */
  footer.wrap { margin-top: 40px; gap: 8px 18px; }
  footer.wrap a:first-of-type { margin-inline-start: 0; }
  body footer > .fin { padding-inline: 20px; }
}

@media (max-width: 400px) {
  body { overflow-wrap: anywhere; }
  .navin > a:not(.brand) { display: none; }
  footer .sp { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}