/* ============================================================
   Reinda — Design System
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Printvetica";
  src: url("fonts/Printvetica.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kobata";
  src: url("fonts/Kobata-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Living Uncut";
  src: url("fonts/Living-Uncut-Sans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nudica Mono";
  src: url("fonts/nudicamono-medium-webfont.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

/* Barrierefreiheit: legasthenie-freundliche Schrift (Open Dyslexic) */
@font-face {
  font-family: "OpenDyslexic";
  src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette: paper + ink + electric blue (matches existing Spenden_Blau) + warm red accent */
  --paper: #FAFAFA;
  --paper-soft: #EEEEEE;
  --paper-deep: #E4E4E4;
  --ink: #0F0F0F;
  --ink-soft: #2A2A2A;
  --ink-mute: #727272;
  --blau: #0000FF;
  --green: #00FF00;
  --green-ink: #00FF00;
  --hot: #00FF00;
  --error-red: #D40000;

  /* Type */
  --f-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "Nudica Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --t-mono-xs: 11px;
  --t-mono-sm: 12px;
  --t-mono:    13px;
  --t-body:    17px;
  --t-body-lg: 19px;
  --t-lead:    22px;
  --t-h4:      28px;
  --t-h3:      40px;
  --t-h2:      64px;
  --t-h1:      112px;

  --bw: 1.5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  margin: 0;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--blau);
  color: var(--paper);
}

/* ===== Type utilities ===== */

.mono { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.02em; }
.mono-sm { font-family: var(--f-mono); font-size: var(--t-mono-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.mono-xs { font-family: var(--f-mono); font-size: var(--t-mono-xs); letter-spacing: 0.06em; text-transform: uppercase; }

.h1 {
  font-family: "Printvetica", var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, var(--t-h1));
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
}
.h2 {
  font-family: "Printvetica", var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, var(--t-h2));
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}
.h3 {
  font-family: "Printvetica", var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
.h4 {
  font-family: "Printvetica", var(--f-display);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.body-lg {
  font-size: var(--t-body-lg);
  line-height: 1.5;
}

/* ===== Layout ===== */

.shell { max-width: 100%; margin: 0 auto; }
.pad-x { padding-left: 40px; padding-right: 40px; }
.row { display: flex; }
.col { display: flex; flex-direction: column; }

hr.rule {
  border: none;
  border-top: var(--bw) solid var(--ink);
  margin: 0;
}

/* ===== Components ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--bw) solid var(--ink);
  border-radius: 50px;
  background: var(--paper);
  color: var(--ink);
  transition: all 0.18s ease;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* Locked / disabled button — used by the submit button until every
   required field and the Mindestkriterien are confirmed. */
.btn:disabled,
.btn[disabled] {
  background: var(--paper);
  color: var(--ink-mute);
  border-color: color-mix(in oklab, var(--ink) 28%, transparent);
  cursor: not-allowed;
  opacity: 1;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--paper);
  color: var(--ink-mute);
  border-color: color-mix(in oklab, var(--ink) 28%, transparent);
}
.btn:disabled .arrow,
.btn[disabled] .arrow { opacity: 0.55; }

.btn-primary {
  background: var(--blau);
  color: var(--paper);
  border-color: var(--blau);
}
.btn-primary:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-lg {
  font-size: 14px;
}

/* The Living Uncut arrow glyphs sit ~0.064em below their own box centre
   (ink centre is low relative to the baseline strut), so even though the
   span box is perfectly centred by the flex parent the glyph LOOKS low —
   unequal space above vs below. Nudge every Arrow-component glyph up by
   that amount so it reads optically centred everywhere it appears. */
.arrow {
  transform: translateY(-0.064em);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
.btn:hover .arrow { transform: translate(4px, -0.064em); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  white-space: nowrap;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blau);
}
.dot.green { background: var(--green); }

.step-letter {
  font-family: "Printvetica", var(--f-display);
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  transform-origin: left bottom;
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.step-letter.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .step-letter { opacity: 1; transform: none; transition: none; }
}

/* Subtle scroll-triggered fade-in (plays once, then stays) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}

/* Subtle route transition: incoming page fades + lifts in. */
@keyframes route-fade-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.route-fade {
  animation: route-fade-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .route-fade { animation: none; }
}

/* ===== Forms ===== */

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .hint {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.input, .textarea, .select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--bw) solid var(--ink);
  padding: 12px 0 10px;
  font-size: var(--t-body);
  font-family: var(--f-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--blau); }
.textarea { min-height: 88px; resize: vertical; line-height: 1.45; padding-top: 8px; }
.select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.checkbox-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: var(--bw) solid var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.checkbox-row:last-child { border-bottom: var(--bw) solid var(--ink); }
.checkbox-row:hover { background: var(--paper-soft); }
.checkbox-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.15s ease;
}
.checkbox-row.checked .checkbox-box { background: var(--blau); border-color: var(--blau); }
.checkbox-row.checked .checkbox-box::after {
  content: "";
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -2px);
}
.checkbox-row .label-main { font-size: var(--t-body); line-height: 1.4; }
.checkbox-row .label-sub { font-family: var(--f-mono); font-size: 12px; color: var(--ink-mute); margin-top: 3px; }

/* ===== Marquee ===== */

.marquee {
  overflow: hidden;
  border-top: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 0;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.marquee-track > span { padding: 0 24px; display: inline-flex; align-items: center; gap: 24px; }
.marquee-track .sep { color: var(--hot); }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Misc ===== */

.link-underline {
  position: relative;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.15s;
}
.link-underline:hover { color: var(--blau); }
.footer-linkbtn { color: #fafafa; }

/* External-link arrow marker (↗). iOS Safari forcibly substitutes its own
   system glyph for U+2197 regardless of font-family, so we don't rely on the
   codepoint at all: this renders the EXACT Living Uncut ↗ outline (extracted
   from the font) as a currentColor-tinted alpha mask. Identical on every
   browser/device, inherits link colour, turns blue on hover. The literal
   glyph stays in the DOM (for copy/paste + a11y) but is clipped out of view. */
.ext-arrow {
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  margin-left: -0.3em;
  vertical-align: 0em;
  overflow: hidden;
  text-indent: 3em;
  white-space: nowrap;
  background-color: currentColor;
  -webkit-mask: url("assets/ext-arrow.png") no-repeat center / contain;
          mask: url("assets/ext-arrow.png") no-repeat center / contain;
}
@media (max-width: 760px) {
  .ext-arrow { width: 0.58em; height: 0.58em; }
}

/* Right-pointing arrow marker for the mobile drawer — uses the Living Uncut
   Sans → glyph (U+2192), same as desktop uses the font's arrow glyphs.
   Force TEXT presentation so iOS never swaps in a color emoji. */
.menu-arrow {
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  font-variant-emoji: text;
  -webkit-font-feature-settings: normal;
  font-family: "Living Uncut", var(--f-mono), "Helvetica Neue", Arial, sans-serif;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Hide scrollbar but keep scrollability */
.no-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ===== Term tooltips ===== */
.term {
  position: relative;
  cursor: help;
  text-decoration: underline dotted var(--blau);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
  color: inherit;
  font-family: "Space Grotesk", sans-serif;
  font-style: normal;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.term:hover { color: var(--blau); }
.h1 .term, .h2 .term, .h3 .term, .h4 .term {
  font-family: "Printvetica", var(--f-display);
}
.term-tip {
  position: fixed;
  z-index: 9999;
  max-width: calc(100vw - 24px);
  background: #EEEEEE;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 14px 16px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;

  /* Subtle enter/exit animation */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.term-tip.term-tip-above {
  transform: translateY(calc(-100% - 4px));
}
.term-tip.term-tip-visible {
  opacity: 1;
  transform: translateY(0);
}
.term-tip.term-tip-above.term-tip-visible {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .term-tip { transition: none; }
}
.term-tip::before {
  content: "";
  position: absolute;
  left: var(--arrowX, 18px);
  top: -7px;
  width: 12px; height: 12px;
  background: #EEEEEE;
  border-left: 1.5px solid var(--ink);
  border-top: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.term-tip.term-tip-above::before {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.term-tip .term-label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: 6px;
}
.term-tip .term-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.term.tip-right .term-tip {
  left: auto;
  right: 0;
}
.term.tip-right .term-tip::before {
  left: auto;
  right: 18px;
}

.kv { display: grid; grid-template-columns: 1fr; gap: 0; }
.kv-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: var(--bw) solid var(--ink);
}
.kv-row:last-child { border-bottom: var(--bw) solid var(--ink); }
.kv-row .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.kv-row .v { font-size: var(--t-body); line-height: 1.5; }

/* Compact variant for venue primary facts */
.kv.kv-compact { grid-template-columns: 1fr; }
.kv.kv-compact .kv-row {
  grid-template-columns: 150px 1fr; gap: 0; padding: 0 14px;
  border-left: var(--bw) solid var(--ink);
  border-right: var(--bw) solid var(--ink);
}
.kv.kv-compact .kv-row .k { padding: 11px 16px 11px 0; }
.kv.kv-compact .kv-row .v {
  padding: 11px 0 11px 16px;
  border-left: var(--bw) solid var(--ink);
}
.kv.kv-compact .kv-row .v { font-size: 15px; line-height: 1.45; }

/* On mobile the fixed label column squeezes long values (addresses, rooms).
   Stack the label above the value and drop the internal divider for air. */
@media (max-width: 640px) {
  .kv.kv-compact .kv-row {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
  .kv.kv-compact .kv-row .k {
    padding: 0 0 5px 0;
    color: var(--ink-mute);
  }
  .kv.kv-compact .kv-row .v {
    padding: 0;
    border-left: none;
    font-size: 16px;
  }
}

/* Technik / Infrastruktur — grid of rectangle tiles, visually distinct
   from the ruled facts list above it. */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.spec-item { border: var(--bw) solid var(--ink); padding: 12px 14px; background: #EEEEEE; }
.spec-item .sk {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--blau); margin-bottom: 5px;
}
.spec-item .sv { font-size: 14px; line-height: 1.4; }
@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr; } }

/* Collapsible toggle bar for the Technik / Infrastruktur section */
.spec-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-align: left;
  background: #EEEEEE; border: var(--bw) solid var(--ink);
  padding: 12px 14px; cursor: pointer;
  transition: background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.spec-toggle:hover { background: #EEEEEE; color: var(--ink); }
.spec-toggle .spec-ic {
  flex: 0 0 auto; font-size: 18px; line-height: 1; font-weight: 400;
  width: 18px; text-align: center;
  font-family: "Living Uncut", var(--f-mono), monospace;
  font-variant-emoji: text;
}
.spec-grid { animation: spec-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes spec-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cursor highlight for clickable list items */
.list-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-top: var(--bw) solid var(--ink);
  align-items: baseline;
  cursor: pointer;
  transition: background 0.15s ease, padding 0.15s ease;
}
.list-row:last-child { border-bottom: var(--bw) solid var(--ink); }
.list-row:hover { background: var(--paper-soft); padding-left: 14px; padding-right: 14px; }
.list-row .num { font-family: var(--f-mono); font-size: 12px; color: var(--ink-mute); }

@media (max-width: 980px) {
  .pad-x { padding-left: 24px; padding-right: 24px; }
}

/* Mobile: a black hairline fades in once a stacking-card label "docks"
   (pins) under the header. Toggled via .is-stuck from page-open-call. */
.oc-label-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.oc-label-bar.is-stuck::after { opacity: 1; }

/* Location card headers pin under the nav (position: sticky). When a header is
   docked, fade in a hairline separator at its base — same cue as the home
   page's pinned section labels. */
.loc-sticky-head {
  transition: border-top-left-radius 0.28s ease, border-top-right-radius 0.28s ease,
              background-color 0.28s ease, background 0.28s ease, color 0.28s ease,
              backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
  padding-top: 40px;
  padding-bottom: 30px;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
@media (max-width: 980px) {
  .loc-sticky-head { padding-top: 24px; }
}
@media (max-width: 780px) {
  .loc-sticky-head { padding-top: 18px; }
}
.loc-sticky-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.loc-sticky-head.is-stuck-head.is-open::after { opacity: 1; }
.loc-sticky-head.is-stuck-head.is-open {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  /* Docked under the nav: fade to the EXACT same frosted grey as the menu
     header (paper @ 72% + matching blur), and fade the text from white to ink
     so it stays legible. Colour + transparency animate together. */
  background: color-mix(in srgb, var(--paper) 72%, transparent) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Mobile drawer items stagger-fade in (top → bottom) when the menu opens. */
@keyframes drawerItemIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.drawer-item {
  opacity: 0;
  animation: drawerItemIn 0.34s cubic-bezier(.2,.6,.2,1) both;
}
/* Closing: the whole panel slides up and tucks behind the header, carrying
   its content with it (instead of emptying out first). */
.drawer-panel.is-closing {
  animation: drawerPanelUp 0.36s cubic-bezier(.5,0,.2,1) both;
  pointer-events: none;
}
@keyframes drawerPanelUp {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-101%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-item { animation: none; opacity: 1; }
  .drawer-panel.is-closing { animation: none; }
}
/* Smoothly flatten the rounded top corners once a label docks under the
   header — the radius isn't visible in the docked state anyway, and keeping
   it caused tiny paper-coloured slivers ("Blitzer") at the left/right edges. */
.oc-label-bar {
  transition: border-top-left-radius 0.28s ease, border-top-right-radius 0.28s ease,
              background-color 0.28s ease, background 0.28s ease,
              backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
.oc-label-bar.is-flat {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background: color-mix(in srgb, var(--head-bg, var(--paper)) 60%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

@media (max-width: 780px) {
  .pad-x { padding-left: 18px; padding-right: 18px; }
  :root {
    --t-h1: 56px;
    --t-h2: 40px;
    --t-h3: 28px;
    --t-h4: 22px;
    --t-body: 16px;
    --t-lead: 20px;
  }
  .kv-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .list-row { grid-template-columns: 32px 1fr; }
  .list-row > :last-child { grid-column: 1 / -1; }
  .marquee-track { font-size: 20px; }
  .term-tip { width: 260px; }
}

/* ============================================================
   Submission form — friendly, low-barrier overhaul
   (keeps paper/ink/blue identity, just gentler + bigger)
   ============================================================ */

/* Big tappable chip (used for format/time/people/tech/support pickers).
   Distinct from .chip — generous padding, larger type, multi-line aware. */
.chip-xl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  min-height: 52px;
  font-family: var(--f-body);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  line-height: 1.2;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
  user-select: none;
}
.chip-xl:hover { background: var(--paper-soft); transform: translateY(-1px); }
.chip-xl.on {
  background: var(--blau);
  color: var(--paper);
  box-shadow: none;
  transform: translateY(-1px);
}
.chip-xl .ic {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 18px;
}
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Segmented control (2-3 options, equal-width row). */
.segment {
  display: grid;
  gap: 0;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
}
.segment > button {
  appearance: none;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-right: var(--bw) solid var(--ink);
  padding: 16px 18px;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.segment > button:last-child { border-right: none; }
.segment > button:hover { background: var(--paper-soft); }
.segment > button.on { background: var(--blau); color: var(--paper); }

/* Soft "field card" used for the long inputs in low-barrier mode. */
.input-soft {
  width: 100%;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  padding: 16px 18px;
  font-size: 18px;
  font-family: var(--f-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.18s ease;
  border-radius: 0;
}
.input-soft::placeholder { color: var(--ink-mute); }
.input-soft:focus {
  border-color: var(--blau);
}
textarea.input-soft {
  min-height: 140px;
  line-height: 1.5;
  resize: vertical;
}

/* Big friendly label */
.field-label {
  display: block;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.field-help {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-mute);
  margin-bottom: 18px;
  line-height: 1.45;
  max-width: 56ch;
}

/* Required-field marker + inline validation */
.field-label .req-star {
  color: var(--green-ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 700;
}
.field-error {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--error-red);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.35;
}
.sf-q.has-error .input-soft { border-color: var(--error-red); }
.sf-q.has-error .input-soft:focus { border-color: var(--error-red); }
/* The "ERFORDERLICH" marker turns red once the field is flagged as missing */
.sf-q.has-error .field-label .req-star { color: var(--error-red); }

/* Slightly more compact inputs & selection boxes on mobile */
@media (max-width: 780px) {
  .chip-xl {
    padding: 11px 15px;
    min-height: 44px;
    font-size: 15px;
    gap: 8px;
  }
  .chip-grid { gap: 8px; }
  .input-soft {
    padding: 12px 14px;
    font-size: 16px;
  }
  textarea.input-soft { min-height: 112px; }
  .segment > button {
    padding: 12px 14px;
    font-size: 16px;
  }
}

/* Intent card (concrete vs rough idea entry choice) */
.intent-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 30px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background 0.15s ease;
  position: relative;
  min-height: 240px;
}
.intent-card:hover {
  background: var(--paper-soft);
  transform: translateY(-1px);
}
.intent-card.intent-blau:hover { background: var(--paper-soft); transform: translateY(-1px); }
.intent-card .intent-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.intent-card .intent-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 8px;
}
.intent-card .intent-body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 4px;
}
@media (min-width: 781px) {
  .intent-card .intent-body {
    max-width: 66.6667%;
  }
}
.intent-card .intent-arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau);
}

/* ===== Step status rail — editorial labels + animated progress track ===== */
.sf-rail {
  display: grid;
  gap: 14px;
  padding: 4px 0 2px;
}

@media (max-width: 780px) {
  .sf-rail { gap: 10px; }
}

/* ===== Unified focus rail — current step + numbered segment track ===== */
.sf-rail--focus {
  gap: 16px;
  padding: 2px 0;
}
.sf-rail-seg {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 8px;
}
.sf-seg {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  text-align: left;
}
.sf-seg-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.sf-seg-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink-mute);
  flex: 0 0 auto;
  transition: color 0.2s ease;
}
.sf-seg-name {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: color 0.2s ease;
}
.sf-seg-bar {
  position: relative;
  height: 3px;
  background: var(--paper-deep);
  overflow: hidden;
}
.sf-seg-fill {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(0);
}
.sf-seg.done .sf-seg-num { color: var(--green-ink); }
.sf-seg.done .sf-seg-name { color: var(--ink-soft); }
.sf-seg.done .sf-seg-fill { transform: scaleX(1); }
.sf-seg.active .sf-seg-num { color: var(--green-ink); font-weight: 700; }
.sf-seg.active .sf-seg-name { color: var(--ink); font-weight: 700; }
.sf-seg.active .sf-seg-fill { transform: scaleX(1); }
/* The fill's grow/drain is driven by the Web Animations API (see
   page-submission.jsx) so it animates reliably regardless of React's render
   timing: forward a step you enter grows from the left (L→R); backward the
   step you leave drains right→left, while the step you land on — already
   filled — simply stays. These class rules are the static fallback. */
.sf-seg.todo .sf-seg-num { color: var(--ink-mute); }
.sf-seg.todo .sf-seg-name { color: var(--ink-mute); }
.sf-seg.locked { cursor: not-allowed; }
.sf-seg.locked .sf-seg-num,
.sf-seg.locked .sf-seg-name { opacity: 0.55; }

/* Desktop — more generous sizing, with a completion check on done steps */
@media (min-width: 781px) {
  .sf-rail--focus { gap: 22px; padding: 6px 0 4px; }
  .sf-rail-seg { gap: 14px; }
  .sf-seg { gap: 10px; }
  .sf-seg-top { gap: 8px; }
  .sf-seg-num { font-size: 13px; }
  .sf-seg-name { font-size: 24px; }
  .sf-seg-bar { height: 3px; }
  .sf-seg:hover .sf-seg-name { color: var(--ink-soft); }
  .sf-seg.active:hover .sf-seg-name { color: var(--ink); }
}

/* ===== Review / summary (step 05) ===== */
.sf-sum-section {
  border-top: var(--bw) solid var(--ink);
  padding: 22px 0 24px;
}
.sf-sum-section:last-child { border-bottom: var(--bw) solid var(--ink); }
.sf-sum-head {
  display: flex;
  align-items: baseline;
  /* 8px matches the step-rail's .sf-seg-top gap so each summary title lines up
     flush with its name in the progress rail above. */
  gap: 8px;
  margin-bottom: 16px;
}
.sf-sum-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--green-ink);
}
.sf-sum-name {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}
.sf-sum-edit {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 0;
  border-bottom: var(--bw) solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sf-sum-edit:hover {
  color: var(--ink);
  border-bottom-color: var(--blau);
}
.sf-sum-rows {
  display: grid;
  gap: 0;
}
.sf-sum-row {
  display: grid;
  grid-template-columns: minmax(160px, 28%) 1fr;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.sf-sum-row:first-child { border-top: none; }
.sf-sum-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 2px;
}
.sf-sum-value {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sf-sum-value.empty { color: var(--ink-mute); }
@media (max-width: 640px) {
  .sf-sum-row { grid-template-columns: 1fr; gap: 4px; }
  .sf-sum-name { font-size: 20px; }
}

/* Step body transition */
.sf-step {
  animation: sf-step-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: opacity;
}
@keyframes sf-step-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-step { animation: none; }
}

/* Nav row */
.sf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  padding-bottom: 0;
}
.sf-nav .btn-ghost {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
}
.sf-nav .btn-ghost:hover { color: var(--blau); }
.sf-nav .btn-ghost[disabled] { opacity: 0.3; cursor: default; }

/* Question block — keeps each question airy */
.sf-q { margin-bottom: 40px; }
.sf-q:last-child { margin-bottom: 0; }

/* Done page panel */
.sf-done-card {
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  padding: 36px 32px;
  display: grid;
  gap: 14px;
  max-width: 640px;
}
.sf-done-card .row-icon {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Inline highlight — solid neon-green underline for selected phrases */
.hl-green {
  text-decoration: underline solid var(--green);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  color: var(--ink);
}

/* Footer "supported by" line — looser line-height on mobile */
.footer-supported { max-width: 880px; line-height: 1.6; }
@media (max-width: 780px) {
  .footer-supported { line-height: 1.8; }
}

/* Footer wordmark — bottom padding matches pad-x at each breakpoint */
.footer-wordmark {
  padding-top: 45px;
  padding-bottom: 45px;
  line-height: 0;
  border-bottom: 1.5px solid var(--paper);
}
@media (max-width: 780px) {
  .footer-wordmark { padding-top: 20px; padding-bottom: 20px; }
  .footer-links { padding-top: 20px !important; }
  .footer-colophon { flex: 1 1 100%; justify-content: space-between; }
}
/* ===== Custom Cursor =====
   Einfacher schwarzer Punkt als Mauszeiger. Der native Zeiger wird
   ausgeblendet — aber nur auf Geräten mit echtem Mauszeiger. */
html.cursor-invert,
html.cursor-invert * { cursor: none !important; }

/* Wrapper: trägt NUR die Position (GPU-Transform, ohne Transition). */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
/* Innerer Punkt: grünes Quadrat, das beim Hover zum Kreis wird. */
.custom-cursor-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--green, #00FF00);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    border-radius 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}
.custom-cursor.is-visible .custom-cursor-dot { opacity: 1; }
.custom-cursor.is-link .custom-cursor-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.custom-cursor.is-down .custom-cursor-dot { transform: translate(-50%, -50%) scale(0.7); }


/* ============================================================
   Accessibility widget — floating button + settings panel
   ============================================================ */

/* Keep FAB + panel readable when content is dark-inverted */
:root[data-a11y-contrast="dark"] .a11y-fab {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
:root[data-a11y-contrast="dark"] .a11y-panel {
  background: #161616;
  color: #FAFAFA;
  border-color: #FAFAFA;
}
:root[data-a11y-contrast="dark"] .a11y-panel-head {
  background: #FAFAFA;
  color: #0F0F0F;
}
:root[data-a11y-contrast="dark"] .a11y-close {
  color: #0F0F0F;
  border-color: #0F0F0F;
}
:root[data-a11y-contrast="dark"] .a11y-close:hover {
  background: #0F0F0F;
  color: #FAFAFA;
}
:root[data-a11y-contrast="dark"] .a11y-segs { border-color: #FAFAFA; }
:root[data-a11y-contrast="dark"] .a11y-seg {
  background: #161616;
  color: #FAFAFA;
  border-color: #FAFAFA;
}
:root[data-a11y-contrast="dark"] .a11y-seg.is-on {
  background: #FAFAFA;
  color: #0F0F0F;
}
:root[data-a11y-contrast="dark"] .a11y-seg:hover:not(.is-on) { background: #2A2A2A; }
:root[data-a11y-contrast="dark"] .a11y-reset {
  background: #161616;
  color: #FAFAFA;
  border-color: #FAFAFA;
}
:root[data-a11y-contrast="dark"] .a11y-reset:hover:not(:disabled) {
  background: #FAFAFA;
  color: #0F0F0F;
}
:root[data-a11y-contrast="dark"] .a11y-foot,
:root[data-a11y-contrast="dark"] .a11y-field-value,
:root[data-a11y-contrast="dark"] .a11y-field-help {
  color: #999;
}

.a11y-fab {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9000;
  width: 56px;
  height: 56px;
  background: var(--blau);
  color: var(--paper);
  border: 1.5px solid var(--blau);
  border-radius: 50%;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.a11y-fab:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.a11y-fab:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 4px;
}
.a11y-fab-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
}

.a11y-panel {
  position: fixed;
  right: 40px;
  bottom: 110px;
  z-index: 9001;
  width: 380px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 120px);
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: 15px;
}

.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.a11y-panel-head .mono-sm { color: inherit; }

.a11y-close {
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-family: var(--f-mono);
}
.a11y-close:hover { background: var(--paper); color: var(--ink); }

.a11y-panel-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.a11y-field { display: flex; flex-direction: column; gap: 8px; }
.a11y-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.a11y-field-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 500;
}
.a11y-field-value {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.a11y-field-help {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
  margin: -2px 0 2px;
}

.a11y-segs {
  display: flex;
  flex-wrap: nowrap;
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.a11y-seg {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-right: 1.5px solid var(--ink);
  transition: background 0.12s ease, color 0.12s ease;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.a11y-seg:last-child { border-right: none; }
.a11y-seg.is-on { background: var(--ink); color: var(--paper); }
.a11y-seg:hover:not(.is-on) { background: var(--paper-soft); }
.a11y-seg:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: -3px;
}

.a11y-reset {
  margin-top: 6px;
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.a11y-reset:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.a11y-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.a11y-foot {
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .a11y-fab {
    right: 20px; bottom: 20px;
    width: 52px; height: 52px;
  }
  .a11y-panel {
    right: 12px; left: 12px;
    bottom: 196px;
    width: auto;
    max-width: none;
  }
}

/* ===== Reading guide ===== */
.a11y-guide {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 36px;
  background: color-mix(in oklab, var(--blau) 16%, transparent);
  border-top: 2px solid var(--blau);
  border-bottom: 2px solid var(--blau);
  pointer-events: none;
  z-index: 8998;
  mix-blend-mode: multiply;
}

/* ============================================================
   Application of a11y settings
   ============================================================ */

/* Line height — applied within #root so it cascades to all content */
:root[data-a11y-lh="tight"] #root  { --a11y-lh: 1.2; }
:root[data-a11y-lh="normal"] #root { --a11y-lh: 1.45; }
:root[data-a11y-lh="wide"] #root   { --a11y-lh: 1.9; }
:root[data-a11y-lh="tight"] #root,
:root[data-a11y-lh="wide"] #root {
  line-height: var(--a11y-lh) !important;
}
:root[data-a11y-lh="tight"] #root p,
:root[data-a11y-lh="tight"] #root li,
:root[data-a11y-lh="tight"] #root .lead,
:root[data-a11y-lh="tight"] #root .body-lg { line-height: 1.25 !important; }
:root[data-a11y-lh="wide"] #root p,
:root[data-a11y-lh="wide"] #root li,
:root[data-a11y-lh="wide"] #root .lead,
:root[data-a11y-lh="wide"] #root .body-lg { line-height: 1.9 !important; }

/* Letter spacing */
:root[data-a11y-ls="wide"] #root  { letter-spacing: 0.04em !important; }
:root[data-a11y-ls="wide"] #root .mono,
:root[data-a11y-ls="wide"] #root .mono-sm,
:root[data-a11y-ls="wide"] #root .mono-xs { letter-spacing: 0.1em !important; }

/* Legasthenie-freundliche Schrift (Open Dyslexic) — überschreibt alle Schriften
   im Inhaltsbereich, inkl. Display/Headlines und Mono, für maximale Lesbarkeit. */
:root[data-a11y-font="dyslexic"] #root,
:root[data-a11y-font="dyslexic"] #root * {
  font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}

/* Contrast: Schwarz/Weiß — apply grayscale only to the content (#root) */
:root[data-a11y-contrast="mono"] #root {
  filter: grayscale(1) contrast(1.1);
}

/* Contrast: Dunkel — invert the content area only, then counter-invert images */
:root[data-a11y-contrast="dark"] body { background: #0A0A0A; }
:root[data-a11y-contrast="dark"] #root {
  filter: invert(1) hue-rotate(180deg);
  background: #FAFAFA; /* inverted to #050505 */
}
:root[data-a11y-contrast="dark"] #root img,
:root[data-a11y-contrast="dark"] #root video,
:root[data-a11y-contrast="dark"] #root iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* Reduced motion */
:root[data-a11y-motion="reduced"] #root *,
:root[data-a11y-motion="reduced"] #root *::before,
:root[data-a11y-motion="reduced"] #root *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Underline links */
:root[data-a11y-links="underline"] #root a:not(.btn):not(.a11y-fab) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
}

/* Strong focus rings */
:root[data-a11y-focus="strong"] #root *:focus-visible {
  outline: 3px solid var(--blau) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--blau) 22%, transparent) !important;
}

/* ============================================================
   AFK Screen
   ============================================================ */
.afk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(255, 255, 255, 0.9); /* 90% Weiß, leicht transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Standard (idle): ausgeblendet, aber gemountet (Modell vorgeladen), KEINE Transition */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* sichtbar — sofort da, ohne Einblenden */
.afk-overlay.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Ausblenden: bleibt sichtbar, Opazität steuert die Web Animations API */
.afk-overlay.is-fading {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* model-viewer / video zentriert */
.afk-overlay model-viewer { --poster-color: transparent; }
/* grauer Ladebalken oben ausblenden */
.afk-overlay model-viewer::part(default-progress-bar) { display: none; }

/* Platzhalter */
.afk-ph {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}
.afk-ph-core {
  width: 26px;
  height: 26px;
  background: var(--blau, #0000FF);
  animation: afk-pulse 1.6s ease-in-out infinite;
}
.afk-ph-orbit {
  position: absolute;
  inset: 0;
  border: var(--bw, 1.5px) solid var(--ink, #0F0F0F);
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--ink, #0F0F0F) 8%, transparent) 0 2px,
    transparent 2px 9px
  );
  animation: afk-spin 9s linear infinite;
}
.afk-ph-label {
  font-family: var(--f-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute, #727272);
}
@keyframes afk-spin { to { transform: rotate(360deg); } }

/* ===== ALTCHA box (selbst-gehosteter Spam-Schutz) ===== */
.sf-altcha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  max-width: 100%;
}
.sf-altcha-box {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: var(--paper);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sf-altcha[data-state="done"] .sf-altcha-box {
  background: var(--green);
  border-color: var(--ink);
  color: var(--ink);
}
.sf-altcha[data-state="error"] .sf-altcha-box {
  border-color: var(--blau);
  color: var(--blau);
}
.sf-altcha-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink-mute);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: afk-spin 0.7s linear infinite;
}
.sf-altcha-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-altcha-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}
.sf-altcha-help {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.sf-altcha-retry {
  flex: 0 0 auto;
  margin-left: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid var(--blau);
  color: var(--blau);
  padding: 2px 0;
  cursor: pointer;
}
.sf-altcha-retry:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .sf-altcha-spin { animation: none; }
}
@keyframes afk-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* ===== Top-bar nav links ===== */
.topbar-nav-link {
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
.topbar-nav-link--active {
  color: var(--ink);
  border-bottom-color: var(--blau);
}
.topbar-nav-link:not(.topbar-nav-link--active):hover {
  color: var(--ink);
  border-bottom-color: var(--blau);
}