@font-face {
  font-family: "Archivo";
  src: url("assets/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --nacht: #1b1424;
  --akzent: #6a17d6;                
  --akzent-hell: #7f33e6;
  --rand: clamp(20px, 4.2vw, 68px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--seite);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

summary:focus-visible { outline: 2px solid var(--akzent-text); outline-offset: 3px; }
main:focus { outline: none; }


.kopfleiste {
  position: sticky; top: 0; z-index: 40; height: 64px;
  display: flex; align-items: center; gap: 20px; padding: 0 var(--rand);
  background: rgba(17, 8, 33, 0.96);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(12px)) {
  
  .kopfleiste { background: rgba(17, 8, 33, 0.95); backdrop-filter: blur(14px) saturate(140%); }
}

.kopfleiste::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--verlauf); opacity: 0.85;
}
.kopfleiste-marke { display: inline-flex; align-items: center; min-height: 44px; }
.kopfleiste-marke img { display: block; height: 34px; width: auto; }

.hauptnav { display: flex; gap: 4px; margin-left: auto; }
.hauptnav a, .kopfleiste-kontakt, .menue summary {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; color: var(--text); text-decoration: none;
  font-size: 0.9rem; letter-spacing: 0.02em;
  transition: color 160ms ease;
}
.hauptnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; background: var(--akzent-strich);
  box-shadow: 0 0 10px rgba(157, 107, 255, 0.7);   
}
.kopfleiste-kontakt { border: 1px solid var(--linie); padding: 0 20px; transition: transform 160ms var(--raus), color 160ms ease; }
.kopfleiste-kontakt:active { transform: scale(0.97); }


.menue { display: none; }
.menue summary { list-style: none; cursor: pointer; border: 1px solid var(--linie); }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { color: var(--akzent-hell); border-color: var(--akzent-strich); }
.menue nav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: 4px var(--rand) 14px;
  background: rgba(17, 8, 33, 0.98); border-bottom: 1px solid var(--linie);
}
.menue nav a {
  display: flex; align-items: center; min-height: 52px; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.menue nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--akzent-strich); padding-left: 16px; }

@media (hover: hover) and (pointer: fine) {
  .hauptnav a:hover, .kopfleiste-kontakt:hover, .menue summary:hover, .menue nav a:hover { color: var(--akzent-hell); }
}

@media (max-width: 820px) {
  .kopfleiste { gap: 12px; }
  .kopfleiste-marke img { height: 30px; }
  .hauptnav { display: none; }
  .menue { display: block; margin-left: auto; }
  .kopfleiste-kontakt { padding: 0 14px; }
}


h1 {
  font-family: "Archivo Weit", "Archivo", "Segoe UI", system-ui, sans-serif; margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: 1.03; font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.02em; text-wrap: balance; max-width: 15em; color: var(--text);
}
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

.seitenkopf {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 96px);
  
  background:
    radial-gradient(ellipse 48% 85% at 90% 12%, rgba(36, 82, 224, 0.34) 0%, transparent 72%),
    radial-gradient(ellipse 52% 70% at 68% 108%, rgba(168, 31, 224, 0.30) 0%, transparent 72%),
    radial-gradient(ellipse 55% 90% at 2% 0%, rgba(106, 23, 214, 0.26) 0%, transparent 70%),
    linear-gradient(168deg, var(--led-tief) 0%, var(--nacht) 100%);
}
.seitenkopf > * { position: relative; z-index: 1; }

.seitenkopf::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(106, 23, 214, 0.26) 0%, transparent 100%);
}

.seitenkopf::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 200%; height: 3px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 38%, rgba(191, 230, 255, 0.95) 50%, transparent 62%) 0 0 / 50% 100% repeat-x,
    linear-gradient(90deg, var(--led-blau), var(--led-violett), var(--led-magenta), var(--led-violett), var(--led-blau)) 0 0 / 50% 100% repeat-x;
  box-shadow: 0 -2px 14px rgba(168, 31, 224, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .seitenkopf::after { animation: led-lauf 9s linear infinite; }
}
@keyframes led-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.seitenkopf .teilung { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.seitenkopf .teilung-text { gap: 24px; }
.einleitung { margin: 0; color: var(--leise); font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 32em; }
.kopf-bild { position: relative; width: min(60%, 240px); }
.kopf-bild::before {
  content: ""; position: absolute; inset: -14%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(106, 23, 214, 0.34) 0%, rgba(36, 82, 224, 0.12) 46%, transparent 68%);
}
.kopf-bild img { position: relative; display: block; width: 100%; height: auto; }

@media (min-width: 961px) {
  .seitenkopf .teilung { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kopf-bild { width: min(100%, 400px); justify-self: end; }
}


.sprungleiste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sprungleiste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 600;
  border: 1px solid var(--akzent-strich); transition: color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sprungleiste a:hover { color: var(--akzent-hell); background: var(--flaeche-hell); }
}


.bahn { background: var(--flaeche); border-block: 1px solid var(--linie); }
.abschnitt p.aussage {
  font-family: "Archivo Weit", "Archivo", sans-serif; font-weight: 750; font-stretch: 108%;
  font-size: clamp(1.45rem, 2.8vw, 2.4rem); line-height: 1.14; letter-spacing: -0.01em;
  color: var(--text); max-width: 24em;
}
.hervor {
  display: grid; gap: 28px; padding: clamp(24px, 3.4vw, 52px);
  background: linear-gradient(150deg, var(--violett-tief) 0%, var(--flaeche) 64%);
  border: 1px solid var(--linie);
}
.hervor .spalte:first-child { border-top: 0; padding-top: 0; }


.weg-stand, .ablauf-stand { background: var(--verlauf); }


.spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.spalte { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--linie); justify-items: start; }
.spalte .zeile { margin-top: 4px; }


.zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.zeilen > li {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start;
  gap: 16px clamp(24px, 6vw, 96px);
  padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--linie);
}
.zeilen-kopf, .zeilen-text { display: grid; gap: 14px; align-content: start; justify-items: start; }
.zeilen-text { gap: 16px; }
.zeilen-text h4 {
  margin: 8px 0 0; font-family: "Archivo Weit", "Archivo", sans-serif; font-size: 1.12rem;
  font-weight: 750; font-stretch: 106%; color: var(--text);
}
.zeilen-text h4:first-child { margin-top: 0; }
.trio { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.trio li { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.trio strong { color: var(--text); font-size: 1rem; }
.trio span { color: var(--leise); font-size: 0.95rem; }


.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 12px; }
.zahl-kachel { display: grid; gap: 8px; align-content: start; padding: 20px 22px; background: var(--flaeche); border: 1px solid var(--linie); }
.zahl-gross {
  font-family: "Archivo Weit", "Archivo", sans-serif; font-weight: 800; font-stretch: 118%;
  font-size: clamp(3rem, 6vw, 4.8rem); line-height: 0.95; color: var(--akzent-text);
}
.punkte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.punkte li {
  position: relative; padding: 18px 0 18px 36px; border-bottom: 1px solid var(--linie);
  color: var(--text); font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}
.punkte li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 12px; height: 12px; background: var(--akzent-strich); }


.abl-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.abl-spalte { display: grid; gap: 16px; }
.abl-spalte h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.abl-drei .ablauf-schritt { grid-template-columns: 5.4em minmax(0, 1fr); }
.ablauf-text { display: grid; gap: 4px; }
.abl-drei .ablauf-was { font-size: 1.08rem; }
.ablauf-detail { color: var(--leise); font-size: 0.93rem; line-height: 1.45; }


.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.drei .kachel { display: grid; align-content: start; }
.drei .kachel-text { gap: 14px; }
.kachel-mini { display: block; width: clamp(96px, 9vw, 132px); height: auto; margin-bottom: 6px; transition: transform 300ms var(--raus); }
.k-auto { background: linear-gradient(160deg, var(--violett-tief) 0%, var(--flaeche) 70%); }
.k-marke { background: linear-gradient(200deg, var(--gruen-zart) 0%, var(--flaeche) 64%); }
@media (hover: hover) and (pointer: fine) {
  .drei .kachel:hover .kachel-mini { transform: rotate(6deg) scale(1.06); }
}


.fragen-teil { align-items: start; }
.fragen-teil h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: "Archivo Weit", "Archivo", sans-serif; font-weight: 700; font-stretch: 106%;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.2; color: var(--text);
  transition: color 160ms ease;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+"; flex: none; font-size: 1.7rem; line-height: 1; color: var(--akzent-text);
  transition: transform 200ms var(--raus);
}
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details > p { padding: 0 0 24px; max-width: 40em; }
@media (hover: hover) and (pointer: fine) {
  .fragen summary:hover { color: var(--akzent-text); }
}


@media (min-width: 961px) {
  .weg-liste.drei-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  
  .weg-drei { padding-left: 34px; }
  .weg-drei .weg-linie { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 4px; height: auto; margin: 0; }
  .weg-drei .weg-stand { transform-origin: 50% 0; animation-name: weg-fuellen-hoch; }
  .weg-drei .weg-liste { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .weg-drei .weg-schritt::before { left: -34px; top: 6px; }
}


.lesen { padding-block: clamp(32px, 5vw, 72px) var(--abschnitt); }
.lesen-innen { display: grid; gap: 22px; max-width: 46em; margin-inline: 0; }
.lesen-innen h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-top: 18px; max-width: none; }
.lesen .hinweis { padding: 14px 18px; background: var(--flaeche); border-left: 4px solid var(--akzent-strich); color: var(--text); max-width: none; }
.lesen .platzhalter { padding: 14px 18px; border: 1px dashed var(--linie); color: var(--text); max-width: none; }



.taste + .klein { margin-top: 24px; }
.band .breite > h2, .band-innen > h2 { overflow-wrap: break-word; }


.fuss nav { max-width: 100%; }


@media (max-width: 1100px) {
  .abl-drei { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .drei { grid-template-columns: minmax(0, 1fr); }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .zeilen > li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .abl-drei .ablauf-schritt { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .hervor { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .kopfleiste-kontakt, .hauptnav a, .menue summary, .sprungleiste a, .kachel-mini,
  .fragen summary, .fragen summary::after { transition: none; }
}


.lesen, .lesen > * { min-width: 0; }
.lesen * { overflow-wrap: anywhere; }