/* ============================================================
   PHÖNIX Website · phoenixcitadel.de
   Quelle: PHÖNIX_Corporate_Design.md v2.4.0 (07.08.2026)
   Modus: HELL = Fassung nach außen (Sir-Entscheid 07.08.2026)
   Regeln: ein Signatur-Akzent #FF6A00, nie flächig, nie zweite
   Farbe. Orange als TEXT auf hell NUR #A34200. Grün nur
   Systemstatus (auf dieser Seite ungenutzt). Kein Gradient.
   Rahmen max 1px. Body min 16px. Fonts lokal (SIL OFL).
   ============================================================ */

@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Helle Rampe (CD v2.4.0, Außenfassung) */
  --papier:  #F8FAFC;
  --flaeche: #EDF0F5;
  --karte:   #E2E7EF;
  --linie:   #D3DAE5;
  /* Text auf hell */
  --tinte:     #05070F;
  --sekundaer: #1E2D40;
  --gedaempft: #475569;
  /* Signatur-Akzent (Linien/Flächen: FF6A00 · Text auf hell: A34200) */
  --signal:      #FF6A00;
  --signal-text: #A34200;
  --signal-bg:   rgba(255,106,0,0.08);
  /* Statusfarben hell (nur Systemstatus, kein Branding) */
  --warn-text: #8A6100;
  /* Radius */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--papier);
  color: var(--sekundaer);
  font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Kopf ---------- */
.kopf {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke svg { display: block; }
.wortmarke {
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  font-weight: 900; font-size: 20px; letter-spacing: 3px;
  color: var(--tinte); line-height: 1;
}
.tagline {
  display: block; font-family: 'IBM Plex Sans', sans-serif; font-weight: 500;
  font-size: 8px; text-transform: uppercase; letter-spacing: .22em;
  color: var(--tinte); opacity: .5; margin-top: 3px;
}

/* Navigation: Desktop-Liste, reines CSS-Aufklappen für Leistungen */
.nav ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav a, .nav summary {
  display: block; padding: 8px 12px; text-decoration: none;
  color: var(--sekundaer); font-weight: 500; font-size: 15px;
  border-radius: var(--r-md); cursor: pointer;
}
.nav a:hover, .nav a:focus-visible { color: var(--tinte); background: var(--flaeche); }
.nav .aktiv { color: var(--tinte); box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.aufklapp { position: relative; }
.aufklapp > span {
  display: block; padding: 8px 12px; color: var(--sekundaer);
  font-weight: 500; font-size: 15px; border-radius: var(--r-md); cursor: default;
}
.aufklapp-menue {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 250px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-lg);
  padding: 6px; box-shadow: 0 8px 24px rgba(5,7,15,0.08);
}
.aufklapp:hover .aufklapp-menue,
.aufklapp:focus-within .aufklapp-menue { display: block; }
.aufklapp-menue a { white-space: nowrap; }

/* Mobile: <details>-Menü, funktioniert ohne JavaScript */
.mnav { display: none; }
.mnav summary { list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }

@media (max-width: 780px) {
  .nav { display: none; }
  .mnav { display: block; position: relative; }
  .mnav summary {
    padding: 8px 14px; border: 1px solid var(--linie); border-radius: var(--r-md);
    font-weight: 500; font-size: 15px; color: var(--tinte);
  }
  .mnav[open] summary { background: var(--flaeche); }
  .mnav-menue {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 240px; background: var(--papier);
    border: 1px solid var(--linie); border-radius: var(--r-lg);
    padding: 6px; box-shadow: 0 8px 24px rgba(5,7,15,0.10);
  }
  .mnav-menue a {
    display: block; padding: 10px 12px; text-decoration: none;
    color: var(--sekundaer); font-weight: 500; font-size: 15px; border-radius: var(--r-md);
  }
  .mnav-menue a:hover { background: var(--flaeche); color: var(--tinte); }
}

/* ---------- Inhalt ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.sektion { padding: 48px 0; border-bottom: 1px solid var(--linie); }
.sektion:last-of-type { border-bottom: none; }

h1, h2, h3 { color: var(--tinte); font-family: 'IBM Plex Sans', sans-serif; }
h1 { font-weight: 200; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-weight: 300; font-size: 26px; line-height: 1.3; margin-bottom: 16px; }
h3 { font-weight: 600; font-size: 18px; line-height: 1.4; margin-bottom: 8px; }

p { margin-bottom: 16px; max-width: 76ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--tinte); }

a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--signal-text); text-decoration-color: var(--signal-text); }

ul.liste, ol.liste { margin: 0 0 16px 22px; max-width: 74ch; }
ul.liste li, ol.liste li { margin-bottom: 10px; }
ol.liste li::marker { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--gedaempft); }

/* Kicker: Sperrsatz + Akzent-Schiene (Orange nur als Linie, Text A34200) */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--signal-text); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--signal); border-radius: 2px; }

/* Hero */
.hero { padding: 64px 0 56px; border-bottom: 1px solid var(--linie); }
.hero p.unterbau { font-size: 19px; font-weight: 300; color: var(--sekundaer); max-width: 66ch; margin-top: 18px; }

/* Buttons */
.knopfzeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knopf {
  display: inline-block; padding: 12px 22px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.2;
}
.knopf-primaer { background: var(--tinte); color: var(--papier); border: 1px solid var(--tinte); }
.knopf-primaer:hover, .knopf-primaer:focus-visible { background: var(--sekundaer); color: var(--papier); }
.knopf-sekundaer { background: transparent; color: var(--tinte); border: 1px solid var(--tinte); }
.knopf-sekundaer:hover, .knopf-sekundaer:focus-visible { background: var(--flaeche); color: var(--tinte); }

/* Karten */
.kartenzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-lg);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.karte h3 { margin-bottom: 0; }
.karte .karten-kicker {
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gedaempft); display: inline-flex; align-items: center; gap: 8px;
}
.karte .karten-kicker::before { content: ""; width: 8px; height: 8px; background: var(--signal); border-radius: 2px; }
.karte p { font-size: 16px; margin-bottom: 0; }
.karte .mehr { margin-top: auto; font-weight: 500; font-size: 15px; }

/* Hervorgehobene Fläche (dezent, Signal-BG laut CD) */
.hebel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--signal); border-radius: var(--r-md);
  padding: 18px 22px; margin: 20px 0; max-width: 80ch;
}
.hebel p { font-size: 16px; }

/* Ablauf-Zeitleiste */
.zeitleiste { list-style: none; margin: 24px 0 0; counter-reset: schritt; max-width: 76ch; }
.zeitleiste li {
  position: relative; padding: 0 0 26px 56px; counter-increment: schritt;
  border-left: 1px solid var(--linie); margin-left: 20px;
}
.zeitleiste li:last-child { border-left-color: transparent; padding-bottom: 0; }
.zeitleiste li::before {
  content: counter(schritt);
  position: absolute; left: -21px; top: -2px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--papier); border: 1px solid var(--tinte);
  color: var(--tinte); font-family: 'IBM Plex Mono', monospace; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.zeitleiste h3 { margin-bottom: 4px; }
.zeitleiste p { font-size: 16px; }
.zeitleiste + p { margin-top: 20px; }

/* Q&A */
.qa { max-width: 78ch; }
.qa h3 { margin-top: 26px; }
.qa h3:first-of-type { margin-top: 18px; }
.qa p { font-size: 16px; }

/* Tabellen (Fristen-Tafel) */
.tafel { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; }
.tafel th {
  text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gedaempft);
  border-bottom: 1px solid var(--tinte); padding: 10px 14px 8px;
}
.tafel td { border-bottom: 1px solid var(--linie); padding: 12px 14px; vertical-align: top; }
.tafel td.datum { font-family: 'IBM Plex Mono', monospace; font-size: 15px; white-space: nowrap; color: var(--tinte); }
.tafel td.quelle { font-size: 14px; color: var(--gedaempft); }

/* Zahlen, Normen, Daten im Fließtext */
.mono { font-family: 'IBM Plex Mono', monospace; font-size: 0.94em; }

/* Interner Platzhalter: sichtbar, mit Symbol (Warnung nie nur Farbe) */
.platzhalter {
  border: 1px dashed var(--warn-text); border-radius: var(--r-md);
  background: var(--flaeche); color: var(--warn-text);
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.55;
  padding: 12px 16px; margin: 14px 0; max-width: 80ch;
}
.platzhalter::before { content: "⚠ PLATZHALTER · "; font-weight: 700; letter-spacing: .04em; }

/* Kontakt-CTA */
.kontakt { background: var(--flaeche); border-top: 1px solid var(--linie); }
.kontakt-innen { max-width: 1080px; margin: 0 auto; padding: 48px 24px; }
.kontakt p { max-width: 70ch; }
.mail { font-family: 'IBM Plex Mono', monospace; font-size: 17px; color: var(--tinte); }

/* Stand-Zeile + Fußbereich */
.stand {
  max-width: 1080px; margin: 0 auto; padding: 20px 24px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gedaempft);
}
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); }
.fuss-innen {
  max-width: 1080px; margin: 0 auto; padding: 28px 24px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between;
}
.fuss a { color: var(--gedaempft); font-size: 14px; }
.fuss .zeile { font-size: 14px; color: var(--gedaempft); }
.fuss .positionierung { width: 100%; font-size: 13px; color: var(--gedaempft); }

/* Definitionslisten (Wissensseite Begriffe) */
.begriff { margin: 22px 0; max-width: 78ch; }
.begriff dt { font-weight: 600; color: var(--tinte); font-size: 18px; margin-bottom: 6px; }
.begriff dd { margin: 0 0 6px 0; font-size: 16px; }
.begriff dd b { font-weight: 500; color: var(--gedaempft); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; display: inline-block; min-width: 150px; }

/* Adressblock */
.adresse { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--sekundaer); margin-bottom: 16px; }

@media (max-width: 780px) {
  .sektion { padding: 36px 0; }
  .hero { padding: 44px 0 40px; }
  h2 { font-size: 23px; }
  .zeitleiste li { padding-left: 46px; margin-left: 16px; }
}

@media print {
  .kopf, .fuss, .mnav, .kontakt { display: none; }
}