@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-regular-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-medium-italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intervogue";
  src: url("/static/fonts/intervogue-bold-italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --anthropia-teal: #007D87;
  --anthropia-teal-hover: #006269;
  --anthropia-white: #FFFFFF;
  --anthropia-gold: #E1BC48;
  --anthropia-sea-salt: #F7F7F7;
  --anthropia-bronze: #FCA14A;
  --anthropia-sky: #72CEEA;
  --anthropia-coral: #FF7474;

  --cluster-green: #2E7D32;
  --cluster-light-green: #66BB6A;
  --cluster-amber: #F9A825;
  --cluster-orange: #EF6C00;
  --cluster-red: #C62828;

  --text-primary: #1a1a1a;
  --text-muted: #6b7280;
  --border-subtle: #e5e7eb;

  --font-sans: "Intervogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body); /* DS-Baseline: Body normal (17px) */
  line-height: var(--lh-body); /* 1.5 – Standard für mehrzeiligen Fließtext */
  color: var(--text-primary);
  background-color: var(--anthropia-white);
  margin: 0;
}

.heading-letterspaced {
  letter-spacing: 0.10em; /* DS-Heading-Tracking (war 0.06em) */
  text-transform: uppercase;
  font-weight: 500;
}

strong {
  font-weight: 700;
}

.cta-button {
  background-color: var(--anthropia-teal);
  color: var(--anthropia-white);
  padding: 0.625rem 1.25rem;
  border: none;
  font-weight: 500;
  text-transform: uppercase; /* DS-Button-Look */
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cta-button:hover {
  background-color: var(--anthropia-teal-hover);
}

.cta-button-secondary {
  background-color: transparent;
  color: var(--anthropia-teal);
  border: 1px solid var(--anthropia-teal);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  text-transform: uppercase; /* DS-Button-Look */
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cta-button-secondary:hover {
  background-color: var(--anthropia-sea-salt);
}

.card {
  background-color: var(--anthropia-white);
  border: 1px solid var(--border-subtle);
  padding: 1.25rem;
}

.card:hover {
  border-color: var(--anthropia-teal);
}

.tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--anthropia-sea-salt);
  color: var(--text-muted);
}

.tag-teal {
  background-color: var(--anthropia-teal);
  color: var(--anthropia-white);
}

.tag-gold {
  background-color: var(--anthropia-gold);
  color: var(--text-primary);
}

.tag-orange {
  background-color: var(--cluster-orange);
  color: var(--text-primary);
}

.tag-sandbox {
  background-color: var(--anthropia-coral);
  color: var(--anthropia-white);
}

/* Diskussionsbedarf – bewusst NICHT wie das gefüllte IFA-Orange (tag-orange),
   sondern heller Chip mit orangem Rand + oranger Schrift = klar unterscheidbar,
   bleibt aber im Warn-Ton. */
.tag-strittig {
  background-color: var(--anthropia-sea-salt);
  color: var(--cluster-orange);
  border: 1px solid var(--cluster-orange);
}

/* Impact-Cluster – einheitlicher, neutraler Chip mit Icon + Name, deutlich
   abgesetzt von den Status-/IFA-Tags. */
.tag-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--anthropia-white);
  color: var(--anthropia-teal);
  border: 1px solid var(--anthropia-teal);
}

.tag-cluster img {
  height: 0.95rem;
  width: 0.95rem;
  object-fit: contain;
}

/* Nur-Icon-Variante (Kanban-Karten): kompakter Symbol-Chip ohne Volltext,
   wie die Wiederbewerber-/IFA-Tags. Name nur als Tooltip. Icon etwas größer
   als im Volltext-Chip, damit es auf der Karte erkennbar bleibt. */
.tag-cluster-icon {
  display: inline-flex;
  align-items: center;
  background-color: var(--anthropia-white);
  border: 1px solid var(--anthropia-teal);
  padding: 0.125rem 0.25rem;
}

.tag-cluster-icon img {
  height: 1.1rem;
  width: 1.1rem;
  object-fit: contain;
}

.divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: 1rem 0;
}

/* ======================================================================
   ANTHROPIA DESIGN SYSTEM — Phase 0 (additiv, 0 sichtbare Änderung)
   Quelle: branding/anthropia-design-system/project/colors_and_type.css
   Bewusst OHNE Basis-Element-Overrides (h1-h6/body/a) und OHNE Neudefinition
   bestehender Klassen (.card/.cta-button/.tag*). Tokens + Klassen liegen nur
   bereit; sie greifen erst, wenn Templates sie nutzen (Phase 1+).
   ====================================================================== */
:root {
  /* Farben (Ergänzungen zu den bestehenden oben) */
  --anthropia-teal-deep: #006269; /* nur Hover/Press, nie als Primärfläche */
  --accent-startups: #E1BC48; /* Gold – Impact Factory / Startups */
  --accent-scaleups: #FCA14A; /* Bronze – IFA NRW / Scaleups */
  --accent-business: #72CEEA; /* Sky – Business / Partner / IFI */
  --accent-society:  #FF7474; /* Coral – Gesellschaft / Politik */

  --ink-default: #1A1A1A;
  --ink-muted:   #5A5F60;
  --ink-faint:   #9AA0A1;
  --ink-inverse: #FFFFFF;

  --surface-default: #FFFFFF;
  --surface-alt:     #F7F7F7;
  --surface-teal:    #007D87;
  --surface-overlay: rgba(0, 125, 135, 0.7);

  --border-hairline: #F7F7F7;
  --border-teal:     #007D87;
  --border-ink:      #1A1A1A;

  /* WCAG-geprüfte Paare – statt raten. (Teal-auf-Gold = 2.68:1 → verboten.) */
  --on-accent:     #1A1A1A; /* Ink auf Gold 9.5:1 / auf jeder Akzentfläche */
  --on-teal:       #FFFFFF; /* volles Weiß auf Teal 4.9:1 – nie < 100 % */
  --ink-on-white:  #1A1A1A;
  --muted-on-white:#5A5F60; /* hellster Ink für Fließtext auf Weiß */

  /* Schriftgewichte – Bold/Black/Ultra nur für Logos */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Letterspacing */
  --ls-display: 0.16em;
  --ls-heading: 0.10em;
  --ls-button:  0.16em;
  --ls-body:    0.01em;
  --ls-tight:   0;

  /* Zeilenhöhe */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;

  /* Typo-Skala */
  --t-display: clamp(48px, 6vw, 96px);
  --t-h1:      clamp(36px, 4vw, 64px);
  --t-h2:      clamp(28px, 2.6vw, 40px);
  --t-h3:      20px;
  --t-h4:      16px;
  --t-eyebrow: 13px;
  --t-body:    17px;
  --t-body-sm: 14px;
  --t-caption: 12px;
  --t-button:  14px;

  /* Spacing-Skala */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout / Radii */
  --container-max: 1280px;
  --gutter: 32px;
  --radius-none: 0px;
  --radius-pill: 9999px; /* nur Störer-Kreis */
  --border-width: 1px;
}

/* ---- Semantische Typo-Klassen (neu, ungenutzt) ----
   Headings tragen den vollen DS-Look: Medium, uppercase, Teal, Tracking.
   Beim Migrieren ersetzen sie die verstreuten text-*-Utilities. */
.display, .h1, .h2, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--anthropia-teal);
  margin: 0;
}
.display { font-size: var(--t-display); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.h1 { font-size: var(--t-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.h2 { font-size: var(--t-h2); letter-spacing: var(--ls-heading); line-height: var(--lh-snug); }
.h3 { font-size: var(--t-h3); letter-spacing: var(--ls-heading); line-height: var(--lh-snug); }
.eyebrow {
  font-size: var(--t-eyebrow); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--anthropia-teal);
}
.body    { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink-default); }
.body-sm { font-size: var(--t-body-sm); line-height: 1.5; letter-spacing: var(--ls-body); }
.caption { font-size: var(--t-caption); letter-spacing: 0.04em; color: var(--ink-muted); }

/* ---- Komponenten (neu, kollisionsfrei, ungenutzt) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--t-button);
  letter-spacing: var(--ls-button); text-transform: uppercase;
  padding: 14px 28px; border: 1px solid transparent; border-radius: var(--radius-none);
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background-color .12s linear, color .12s linear;
  background: var(--anthropia-gold); color: var(--on-accent); /* Standard-CTA: Gold + Ink (9.5:1) */
}
.btn:hover { background: #d0ab38; }
.btn:active { background: #bf9a2e; }
.btn--solid { background: var(--anthropia-teal); color: var(--anthropia-white); }
.btn--solid:hover { background: var(--anthropia-teal-deep); }
.btn--solid:active { background: #00484e; }
.btn--ghost { background: transparent; color: var(--anthropia-teal); border-color: var(--anthropia-teal); }
.btn--ghost:hover { background: var(--anthropia-teal); color: var(--anthropia-white); }
.btn--inverse { background: var(--anthropia-white); color: var(--anthropia-teal); }

.input {
  font-family: var(--font-sans); font-size: var(--t-body); letter-spacing: var(--ls-body);
  padding: 14px 16px; background: var(--anthropia-white); border: 1px solid var(--ink-muted);
  border-radius: var(--radius-none); color: var(--ink-default); width: 100%;
}
.input:focus { outline: 2px solid var(--anthropia-teal); outline-offset: -2px; border-color: var(--anthropia-teal); }
.input::placeholder { color: var(--ink-faint); }

/* ---- Disclosure / Dropdown (Konvention) ----
   Jede <summary>, die ein <details> auf-/zuklappt, ist ein Bedienelement und
   wird deshalb klar von reinen Überschriften abgesetzt: Teal-Text, Cursor,
   ausgeblendeter nativer Marker, Unterstreichung bei Hover/Fokus. Reine
   Überschriften bleiben Ink. Farbige Varianten (Warnung/Gefahr) setzen ihre
   Textfarbe per Utility NACH dieser Klasse und überschreiben so das Teal. */
.disclosure {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--anthropia-teal);
}
.disclosure::-webkit-details-marker { display: none; }
.disclosure::marker { content: ""; }
.disclosure:hover { text-decoration: underline; }
details[open] > .disclosure { margin-bottom: 0.25rem; }

/* ---- Info-Box / Read-out (Konvention) ----
   Nicht-interaktiver Textkasten (Kurzbeschreibung, KI-Zusammenfassung,
   Batch-Beschreibung): Sea-Salt-Fläche mit linker Teal-Kante, KEIN Hover –
   diese Felder sind reine Anzeige, kein Bedienelement. */
.infobox {
  background-color: var(--anthropia-sea-salt);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--anthropia-teal);
  padding: 1.25rem;
}

/* ---- A11y-Utilities (opt-in; greifen nur bei Nutzung bzw. Motion-Präferenz) ---- */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 1000;
  background: var(--anthropia-teal); color: #fff; padding: 10px 16px;
  text-decoration: none; transition: top .12s linear;
}
.skip-link:focus { top: 8px; }
.tap-min { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}