*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette matched to the real IFRS15 tool's current design system (/srv/docker/ifrs15/app/static/style.css,
   itself sourced from leoninestudios.com bronze/champagne/anthracite) — light page, no dark bar.
   Fixed light theme regardless of visitor OS/browser setting — a dark variant read poorly
   (Commander feedback 2026-07-17), so this page intentionally does not follow prefers-color-scheme. */
:root {
  color-scheme: light;
  --page:      #f4f3f1;
  --surface:   rgba(244,243,241,.92);
  --nav-ink:      #262626;
  --nav-ink-soft: #575757;
  --card:      #ffffff;
  --border:    #d9d4cc;
  --ink:       #262626;
  --ink-soft:  #575757;
  --ink-muted: #79766f;
  --eyebrow:   #8a6a43;
  --accent:    #ab8353;
  --accent-ink:#ffffff;
  --accent-dk: #8a6a43;
  --accent-dk-ink: #ffffff;
  --accent-bg: #f5ede1;
  --green:     #155724;
  --good:      #155724;
  --good-bg:   #d4edda;
  --warning:   #856404;
  --warning-bg:#fff3cd;
  --critical:  #721c24;
  --critical-bg:#ffe0e0;
  --radius: 12px;
}

body {
  background: var(--page); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.55;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 28px; }

/* ── Elevation ───────────────────────────────────────────────────── */
:root {
  --shadow-sm: 0 1px 2px rgba(38,38,38,.05), 0 1px 1px rgba(38,38,38,.04);
  --shadow-md: 0 2px 4px rgba(38,38,38,.04), 0 12px 28px -12px rgba(38,38,38,.16);
  --shadow-lg: 0 4px 8px rgba(38,38,38,.04), 0 24px 48px -16px rgba(38,38,38,.20);
}

/* ── Top nav ─────────────────────────────────────────────────────── */
.topnav { border-bottom: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.topnav .brand { font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--nav-ink); }
.topnav .brand span { color: var(--accent); }
.topnav nav a { color: var(--nav-ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 600; margin-left: 26px; }
.topnav nav a:hover { color: var(--accent-dk); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 76px 0; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -220px; right: -220px; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: .10;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--eyebrow); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 20px; }
.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; }
.hero p.lead { color: var(--ink-soft); font-size: 17.5px; line-height: 1.65; margin-top: 22px; max-width: 62ch; }
.hero p.lead:first-of-type { font-size: 21px; font-weight: 500; color: var(--ink); line-height: 1.5; margin-top: 28px; }

/* Foto als rechter Umfluss statt als eigene Rasterspalte.
   Im Master lag es in `grid-template-columns: 1fr 240px`; die Zeilenhöhe
   richtete sich damit nach dem höheren der beiden — dem Bild mit 366 px.
   Nachdem der Begrüßungstext auf zwei kurze Absätze zusammengestrichen war,
   stand darunter ein leeres Feld von rund 130 px. Als Float laufen die
   folgenden Absätze daneben weiter und die Lücke entfällt ganz.
   `overflow: hidden` auf .hero fängt den Float bereits ein, ein Clearfix
   ist deshalb nicht nötig; .cta-row räumt trotzdem auf, damit die
   Unterschrift dem Bild nie in die Quere kommt. */
.hero-photo { float: right; margin: 6px 0 22px 38px; shape-outside: margin-box; }
.hero .cta-row { clear: both; }
.hero-photo img {
  display: block; width: 240px; height: 360px; object-fit: cover;
  border-radius: 20px; border: 3px solid var(--card); outline: 1px solid var(--border);
  box-shadow: var(--shadow-lg); transform: rotate(2deg); transition: transform .25s ease;
}
.hero-photo img:hover { transform: rotate(0deg) scale(1.015); }

@media (max-width: 760px) {
  /* Auf dem Handy bliebe neben einem 168 px breiten Bild keine lesbare Spalte
     übrig — dort steht das Foto wieder für sich. Es muss im Quelltext vorne
     stehen, damit der Float greift; auf dem Handy würde es damit aber vor der
     Überschrift landen. Flexbox schiebt es zurück an seinen Platz: die beiden
     Begrüßungsabsätze tragen kein data-reveal, alles danach schon — daran
     lässt sich die Reihenfolge des Masters ohne zusätzliche Klassen
     nachbilden (Überschrift, Begrüßungsblock, Foto, Rest, Knöpfe). */
  .hero .wrap { display: flex; flex-direction: column; }
  .hero-photo { float: none; order: 1; margin: 4px 0 22px 0; }
  .hero p.lead[data-reveal] { order: 2; }
  .hero .cta-row { order: 3; }
  .hero-photo img { width: 168px; height: 252px; transform: rotate(1.5deg); }
}
.hero p.lead a, .about-card a, .hero .eyebrow a { color: var(--accent-dk); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; transition: opacity .15s ease; }
.hero p.lead a:hover, .about-card a:hover, .hero .eyebrow a:hover { opacity: .75; }
.hero .eyebrow a { text-transform: uppercase; letter-spacing: inherit; }
.hero .cta-row { display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.cta-signature { height: 78px; width: auto; margin-left: 6px; opacity: 0.92; transform: rotate(-3deg) translateY(-14px); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: all .18s ease; }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-dk); color: var(--accent-dk-ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent-dk); transform: translateY(-1px); }
.btn.sm { padding: 7px 14px; font-size: 12.5px; }

/* ── Cards / sections ────────────────────────────────────────────── */
.section { padding: 36px 0 76px 0; }
.section h2.section-title { font-size: 28px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 26px; }

.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.build-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease; }
.build-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.build-card .tag { display: inline-flex; align-self: flex-start; padding: 4px 12px; border-radius: 12px;
  background: var(--accent-bg); color: var(--accent-dk); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.build-card h3 { font-size: 19.5px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.build-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; flex: 1; }
.build-card .meta { display: flex; gap: 16px; font-size: 12px; color: var(--ink-muted); margin-top: 4px; flex-wrap: wrap; }
.build-card .meta b { color: var(--ink-soft); }

.about-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; box-shadow: var(--shadow-sm); }
.about-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
.about-card p:last-child { margin-bottom: 0; }

.photo-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; margin-top: 18px; box-shadow: var(--shadow-sm); display: inline-block; }
.photo-card img { display: block; width: 100%; max-width: 420px; border-radius: 10px; }
.photo-card .photo-caption { font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; padding: 0 4px; }

.download-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 48px 0 56px 0; margin-top: 20px; }
footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
footer .contact { font-size: 13px; color: var(--ink-soft); }
footer .contact a { color: var(--accent-dk); text-decoration: none; }
footer .disclaimer { font-size: 12px; color: var(--ink-muted); max-width: 46ch; }
footer .contact a.sign-out-link { display: inline-block; margin-top: 10px; color: var(--ink-muted);
  font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
footer .contact a.sign-out-link:hover { color: var(--accent-dk); }

/* ── Disclaimer banner (demo pages) ─────────────────────────────── */
.demo-banner { background: var(--accent-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 14px 18px; font-size: 13px; color: var(--ink-soft); margin-bottom: 26px; }
.demo-banner b { color: var(--ink); }

.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dk); text-decoration: none;
  font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.back-link:hover { text-decoration: underline; }

/* ── Detail page: hero conclusion card ──────────────────────────── */
.fazit-hero { display: flex; align-items: center; gap: 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--good-bg) 0%, var(--good-bg) 100%);
  border: 1px solid var(--good); padding: 22px 26px; margin-bottom: 22px; }
.fazit-hero .fazit-icon { font-size: 34px; }
.fazit-hero .fazit-num { font-size: 22px; font-weight: 800; color: var(--ink); }
.fazit-hero .fazit-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 3px; }
.fazit-hero .fazit-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.summary-box { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 22px; }
.summary-box h2 { font-size: 11.5px; font-weight: 700; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.summary-box p { font-size: 14.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.7; }
.summary-box p:last-child { margin-bottom: 0; }

.meta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.meta-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.meta-card h2 { font-size: 11.5px; font-weight: 700; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.meta-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 0; font-size: 13px; }
.meta-row .l { color: var(--ink-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; padding-top: 2px; }
.meta-row .v { color: var(--ink); }

.section-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.section-block .sec-title { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); }
.sec-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.section-block .sec-body { padding: 14px 18px 16px 18px; }

.check-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13.5px; }
.check-item .ic { color: var(--good); font-weight: 700; width: 16px; flex-shrink: 0; }
.check-item.no .ic { color: var(--ink-muted); }

.konklusion-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; font-weight: 600; }
.konklusion-item .badge { padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.konklusion-item .badge.ja { background: var(--good-bg); color: var(--good); }
.konklusion-item .badge.nein { background: var(--critical-bg); color: var(--critical); }

.cite { font-size: 11.5px; font-style: italic; color: var(--ink-muted); margin: 2px 0 10px 26px; }

.hinweis-item { background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 10px 14px; margin: 8px 0; font-size: 13px; color: var(--ink); line-height: 1.6; }

.audit-timeline { list-style: none; margin-top: 6px; }
.audit-timeline li { display: flex; gap: 12px; padding: 8px 0; font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
.audit-timeline li:last-child { border-bottom: none; }
.audit-timeline .t { color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Stat tiles ──────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat-tile .label { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.stat-tile .value { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-tile .value.good { color: var(--good); }
.stat-tile .value.warning { color: #b8790a; }
.stat-tile .value.critical { color: var(--critical); }
.stat-tile .sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ── Mini grouped bar chart ──────────────────────────────────────── */
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.chart-card h2 { font-size: 11.5px; font-weight: 700; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.chart-card .chart-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 18px; }
.legend { display: flex; gap: 18px; margin-bottom: 16px; font-size: 12px; color: var(--ink-soft); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bars { display: flex; align-items: flex-end; gap: 18px; height: 180px; border-bottom: 1px solid var(--border); padding-bottom: 2px; min-width: 0; }
.bar-group { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; position: relative; min-width: 0; }
.bar { width: 16px; border-radius: 3px 3px 0 0; position: relative; flex: 0 1 16px; min-width: 4px; }
.bar.capacity { background: var(--accent); }
.bar.demand { background: var(--green); }
.bar-labels { display: flex; gap: 18px; margin-top: 8px; }
.bar-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--ink-muted); min-width: 0; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.role-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.role-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.role-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--ink); }
.role-table tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.pill.hire { background: var(--critical-bg); color: var(--critical); }
.pill.freelance { background: var(--warning-bg); color: #9a6300; }
.pill.balanced { background: var(--good-bg); color: var(--good); }
.pill.reduce { background: var(--accent-bg); color: var(--accent-dk); }

.action-list { list-style: none; }
.action-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.action-list li:last-child { border-bottom: none; }
.action-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }

@media (max-width: 720px) {
  .build-grid, .meta-cards, .stat-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 48px 0; }
  .hero h1 { font-size: 34px; max-width: none; }
  .hero p.lead:first-of-type { font-size: 18px; }
  .section h2.section-title { font-size: 22px; }
  .hero::before { width: 380px; height: 380px; top: -140px; right: -140px; }
  .topnav .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .topnav nav a { margin-left: 0; margin-right: 18px; }
}

/* ── Wizard (flick-through steps) ───────────────────────────────── */
.wizard { margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 40px 32px 40px; box-shadow: var(--shadow-md); }
.wizard-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.wizard-steps-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.wizard-steps-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--page); color: var(--ink-muted); font-weight: 700; font-size: 12.5px; cursor: pointer;
  transition: all .18s ease; padding: 0; }
.wizard-steps-nav button:hover { border-color: var(--accent); color: var(--accent-dk); transform: translateY(-1px); }
.wizard-steps-nav button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.wizard-steps-nav button.done { background: var(--accent-bg); color: var(--accent-dk); border-color: var(--accent-bg); }
.wizard-counter { font-size: 12.5px; color: var(--ink-muted); font-weight: 700; white-space: nowrap; }
.wizard-progress { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 32px; }
.wizard-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .35s cubic-bezier(.4,0,.2,1); }

.wizard-viewport { overflow: hidden; transition: height .38s cubic-bezier(.4,0,.2,1); }
.wizard-track { display: flex; align-items: flex-start; transition: transform .38s cubic-bezier(.4,0,.2,1); touch-action: pan-y; cursor: grab; will-change: transform; }
.wizard-track.dragging { transition: none; cursor: grabbing; }
.wizard-slide { flex: 0 0 100%; min-width: 0; padding-right: 6px; overflow-x: hidden; }

.wizard-slide-eyebrow { font-size: 12px; font-weight: 700; color: var(--eyebrow); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.wizard-slide-title { font-size: 23px; font-weight: 800; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.01em; }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; }
.wizard-nav .spacer { flex: 1; }
.wizard-hint { font-size: 11.5px; color: var(--ink-muted); text-align: center; margin-top: 14px; }

@media (max-width: 640px) {
  .wizard { padding: 26px 22px 24px 22px; border-radius: 16px; }
  .wizard-steps-nav button { width: 28px; height: 28px; font-size: 11px; }
  .chart-card { padding: 18px 14px; }
  .bars, .bar-labels { gap: 6px; }
  .bar-group { gap: 3px; }
  .bar { width: 11px; flex-basis: 11px; }
}

/* ── Intake mockup (upload screen, slide 0) ─────────────────────── */
.dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 28px; text-align: center;
  color: var(--ink-muted); margin-bottom: 16px; background: var(--card); }
.dropzone .dz-icon { font-size: 26px; margin-bottom: 6px; }
.dropzone p { margin: 3px 0; font-size: 13px; }
.staged-files { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.staged-files li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.staged-files li .fi { color: var(--accent-dk); }
.intake-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.field .field-value { padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
  background: var(--page); color: var(--ink); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ── CV wizard extras ────────────────────────────────────────────── */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tag-row span { display: inline-block; padding: 7px 14px; border-radius: 12px; background: var(--accent-bg);
  color: var(--accent-dk); font-size: 12.5px; font-weight: 700; }
.role-card { background: var(--page); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; margin-bottom: 14px; }
.role-card .role-org { font-size: 16px; font-weight: 700; color: var(--ink); }
.role-card .role-title { font-size: 13px; color: var(--accent-dk); font-weight: 700; margin-top: 3px; }
.role-card .role-period { font-size: 12px; color: var(--ink-muted); margin-top: 3px; margin-bottom: 16px; }
.role-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.role-card ul li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.role-card ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent-dk); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   MOTION-SCHICHT (assets/motion.js)
   Alles hier ist additiv — ohne JS und bei prefers-reduced-motion bleibt
   die Seite vollständig lesbar und statisch.
   ══════════════════════════════════════════════════════════════════════ */

/* Gate: Startzustände greifen NUR, wenn motion.js gelaufen ist. Sonst würde
   ein JS-Fehler die halbe Seite unsichtbar lassen. */
html.motion-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
html.motion-on [data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
html.motion-on [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
html.motion-on [data-reveal="scale"] { transform: scale(.94); }
html.motion-on [data-reveal].is-in   { opacity: 1; transform: none; }

/* Scroll-Fortschritt unter der Topnav */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3.5px; z-index: 40;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dk) 100%);
  pointer-events: none;
}

/* Ring am Zeiger. Bewusst ZUSÄTZLICH zum echten Cursor, nicht als Ersatz —
   ein verschwundener Mauszeiger auf einem fremden Rechner ist ein
   Ärgernis, das eine Bewerbungsseite sich nicht leisten muss. */
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity .3s ease, width .22s ease, height .22s ease, margin .22s ease;
}
.cursor-ring.is-live { opacity: 1; }
.cursor-ring.is-hot  { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
.cursor-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cursor-ring .tr { fill: none; stroke: var(--border); stroke-width: 1.5; opacity: .55; }
.cursor-ring .pg { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  transition: stroke-dashoffset .1s linear; }
/* Fünf modulare Spulen und der verkippte Plasmaquerschnitt — derselbe
   Gegenstand wie im Hero, nur auf 44 px eingedampft. Fünf, weil ein
   Stellarator Feldperioden hat und W7-X deren fünf; nicht, weil fünf
   hübsch aussieht. */
.cursor-ring .coil-marks line { stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; opacity: .5; }
.cursor-ring .plasma { fill: none; stroke: var(--accent-dk); stroke-width: 1.3; opacity: .55;
  transition: transform .22s ease; transform-origin: 22px 22px; }
.cursor-ring.is-hot .plasma { opacity: .85; }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* Die Regeln für die Stellarator-Grafik im Hero (.stell-band / .stell-stage /
   .stell-caption) sind am 23.08.2026 zusammen mit dem Abschnitt entfernt
   worden — siehe Kommentar an der Stelle in index.html. */

/* Topnav verdichtet sich, sobald man scrollt */
.topnav { transition: padding .25s ease, box-shadow .25s ease, background .25s ease; }
.topnav.is-scrolled { box-shadow: var(--shadow-md); background: rgba(244,243,241,.97); }
.topnav.is-scrolled .wrap { padding-top: 11px; padding-bottom: 11px; }

/* ── Laufbahn-Kurve ──────────────────────────────────────────────
   SVG statt Canvas: scharf in jeder Größe, echter Text (Screenreader,
   Suche, Übersetzung), Animation über CSS statt Neuzeichnen pro Frame. */
.arc-section { padding: 30px 0 84px 0; }
/* Grafik über die volle Wrap-Breite. Vorher lag sie in einer Grid-Spalte von
   478 px und wurde damit auf Faktor 0,66 heruntergerechnet — die 12,5-px-Schrift
   kam als 8,3 px an, die Achsenbeschriftung als 6,6 px. Über die volle Breite
   ist der Faktor 1,26, die Beschriftung also größer als notiert, nicht kleiner. */
.arc-stage { min-width: 0; margin-bottom: 34px; }
.arc-svg { display: block; width: 100%; height: auto; overflow: visible; }

.arc-axis line { stroke: var(--border); stroke-width: 1; }
.arc-tick line { stroke: var(--ink-muted); stroke-width: 1; }
.arc-tick text { font-size: 12px; font-weight: 700; fill: var(--ink-muted);
  text-anchor: middle; letter-spacing: .04em; }
.arc-axis-label { font-size: 12.5px; font-weight: 800; fill: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .1em; text-anchor: start; }

.arc-line { stroke: var(--accent-dk); stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; }
.arc-lead { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }

.arc-dot circle { fill: var(--card); stroke: var(--accent-dk); stroke-width: 3; }
.arc-dot.arc-now circle { fill: var(--accent-dk); stroke: var(--accent-dk); }
.arc-role { font-size: 15px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.arc-org  { font-size: 12.5px; font-weight: 600; fill: var(--ink-soft); text-anchor: middle; }
.arc-when { font-size: 12px; font-weight: 700; fill: var(--accent-dk); text-anchor: middle;
  letter-spacing: .03em; }
.arc-when-b { font-size: 12px; }

/* .arc-copy und .arc-stats sind seit 23.08.2026 ungenutzt — Block und Kacheln
   wurden aus index.html genommen. Regeln bleiben stehen, falls sie zurueck sollen. */
.arc-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; align-items: start; }
.arc-copy p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin: 0; }
.arc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 12px; }
.arc-stats .gs { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 15px; box-shadow: var(--shadow-sm); }
.arc-stats .gs .n { font-size: 23px; font-weight: 800; color: var(--accent-dk);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.arc-stats .gs .l { font-size: 10.5px; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }

/* Einlauf: erst zeichnet sich die Laufbahn, dann erscheinen die Stationen
   in zeitlicher Reihenfolge. Wird von motion.js per .is-running ausgelöst. */
html.motion-on .arc-svg .arc-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.motion-on .arc-svg.is-running .arc-line {
  transition: stroke-dashoffset 1.5s cubic-bezier(.35,.1,.25,1); stroke-dashoffset: 0; }

html.motion-on .arc-svg .arc-area,
html.motion-on .arc-svg .arc-dot,
html.motion-on .arc-svg .arc-lead,
html.motion-on .arc-svg .arc-when-b { opacity: 0; transition: opacity .45s ease; }
html.motion-on .arc-svg.is-running .arc-area,
html.motion-on .arc-svg.is-running .arc-dot,
html.motion-on .arc-svg.is-running .arc-lead,
html.motion-on .arc-svg.is-running .arc-when-b { opacity: 1; }

html.motion-on .arc-svg.is-running .arc-area { transition-delay: 1.1s; }
html.motion-on .arc-svg.is-running .arc-dot[data-i="0"],
html.motion-on .arc-svg.is-running .arc-lead[data-i="0"] { transition-delay: .25s; }
html.motion-on .arc-svg.is-running .arc-dot[data-i="1"],
html.motion-on .arc-svg.is-running .arc-lead[data-i="1"] { transition-delay: .55s; }
html.motion-on .arc-svg.is-running .arc-dot[data-i="2"],
html.motion-on .arc-svg.is-running .arc-lead[data-i="2"] { transition-delay: .85s; }
html.motion-on .arc-svg.is-running .arc-dot[data-i="3"],
html.motion-on .arc-svg.is-running .arc-lead[data-i="3"] { transition-delay: 1.15s; }
html.motion-on .arc-svg.is-running .arc-dot[data-i="4"],
html.motion-on .arc-svg.is-running .arc-lead[data-i="4"] { transition-delay: 1.45s; }
html.motion-on .arc-svg.is-running .arc-when-b:nth-of-type(1) { transition-delay: .55s; }
html.motion-on .arc-svg.is-running .arc-when-b:nth-of-type(2) { transition-delay: 1.15s; }

/* Farbverlauf unter der Kurve — Hex im Markup als Grundlage, hier an die
   Palette gebunden, falls der Browser var() in SVG-Stops unterstützt. */
.arc-fill-a { stop-color: var(--accent); }
.arc-fill-b { stop-color: var(--accent); }

/* Die aktuelle Rolle bekommt einen ruhigen Puls — der Blick soll dort landen.
   Bewusst über stroke-opacity auf einem eigenen Ring statt über das
   SVG-Attribut r: dessen CSS-Animation wird nicht überall gleich unterstützt,
   und geprüft werden kann das hier nicht. */
.arc-halo { stroke: var(--accent); stroke-width: 2; opacity: 0; }
@keyframes arc-halo-pulse {
  0%   { opacity: .55; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
.arc-svg.is-running .arc-halo { animation: arc-halo-pulse 2.8s ease-out infinite 2s; }

@media (max-width: 900px) {
  .arc-copy { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 460px) {
  .arc-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .cursor-ring { display: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}