/* =====================================================================
   NEXUS Foerderportal - Gestaltung.

   Setzt auf styles.css auf (--maxw, --pad, --mut, --acc-2, --inv) und
   bringt alles Eigene mit dem Praefix fdr- mit. styles.css bleibt
   unberuehrt.

   Der Leitgedanke: ein Foerderantrag ist fuer die meisten Menschen etwas
   Unangenehmes. Die Oberflaeche darf deshalb nichts von einem Amt haben.
   Viel Luft, eine Frage im Mittelpunkt, ein sichtbarer Fortschritt, und
   an jeder Stelle die Antwort auf "wo stehe ich gerade".

   Regeln, die hier durchgehalten werden:
   - Abstaende ausschliesslich in Vielfachen von 4.
   - Eine Akzentfarbe, sonst eine getoente Neutralrampe.
   - Glas nur, wo etwas wirklich ueber etwas anderem liegt.
   - Hierarchie ueber Groesse, Farbe und Abstand, nicht ueber Fettung.
   ===================================================================== */

/* ------------------------------------------------------------- Vorhang */
/* Bis geklaert ist, ob dieses Konto ueberhaupt Zugang hat, zeigt die Seite
   nichts. Ein Delay waere falsch: es bremst alle und verhindert das
   Aufblitzen bei langsamen Verbindungen trotzdem nicht. */
html.fdr-warten body > *{visibility:hidden;}
html.fdr-warten body::after{content:"";position:fixed;left:50%;top:50%;width:10px;height:10px;
  margin:-5px 0 0 -5px;border-radius:50%;background:#B79BEA;opacity:.5;
  animation:fdr-warten 1.2s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes fdr-warten{0%,100%{transform:scale(.7);opacity:.25;}50%{transform:scale(1);opacity:.75;}}

/* ---------------------------------------------------------------- Werte */
:root{
  --fdr-glas:      rgba(22, 14, 40, .72);
  --fdr-glas-hell: rgba(255, 255, 255, .055);
  --fdr-kante:     rgba(255, 255, 255, .10);
  --fdr-kante-warm:rgba(183, 155, 234, .38);
  --fdr-schimmer:  inset 0 1px 0 rgba(255, 255, 255, .07);
  --fdr-tiefe:     0 24px 64px -24px rgba(0, 0, 0, .8);
  --fdr-tiefe-kurz:0 8px 24px -12px rgba(0, 0, 0, .6);
  --fdr-raus:      cubic-bezier(.16, 1, .3, 1);
  --fdr-rein:      cubic-bezier(.4, 0, .2, 1);
  --fdr-gruen:     #6FCF97;
  --fdr-gelb:      #F2C94C;
  --fdr-rot:       #EB5757;
  --fdr-4: 4px; --fdr-8: 8px; --fdr-12: 12px; --fdr-16: 16px;
  --fdr-24: 24px; --fdr-32: 32px; --fdr-48: 48px; --fdr-64: 64px;
}

body{background:var(--bg);color:var(--white);font-family:var(--font);margin:0;
  -webkit-font-smoothing:antialiased;}
.fdr *{box-sizing:border-box;}

/* ------------------------------------------------------------ Leiste */
.fdr-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--fdr-24);
  padding:var(--fdr-12) var(--pad);background:rgba(10,6,19,.82);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--fdr-kante);flex-wrap:wrap;row-gap:var(--fdr-8);}
.fdr-nav__marke{display:flex;align-items:baseline;gap:var(--fdr-8);text-decoration:none;color:inherit;
  flex:0 0 auto;}
.fdr-nav__wort{font-weight:900;letter-spacing:-.02em;font-size:17px;}
.fdr-nav__bereich{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-2);
  font-weight:600;}
.fdr-nav__punkte{display:flex;gap:var(--fdr-4);flex:1 1 auto;min-width:0;}
.fdr-nav__link{padding:var(--fdr-8) var(--fdr-12);border-radius:999px;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--mut);white-space:nowrap;
  transition:color .18s var(--fdr-rein),background .18s var(--fdr-rein);}
.fdr-nav__link:hover{color:#fff;}
.fdr-nav__link.is-aktiv{background:var(--fdr-glas-hell);color:#fff;box-shadow:var(--fdr-schimmer);}
.fdr-nav__rechts{display:flex;align-items:center;gap:var(--fdr-12);flex:0 0 auto;}
.fdr-nav__name{font-size:12.5px;color:var(--mut);max-width:24ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.fdr-nav__ab{background:none;border:1px solid var(--fdr-kante);color:var(--mut);
  padding:var(--fdr-8) var(--fdr-12);border-radius:999px;font:inherit;font-size:12.5px;
  cursor:pointer;transition:color .18s,border-color .18s;}
.fdr-nav__ab:hover{color:#fff;border-color:var(--fdr-kante-warm);}
@media(max-width:640px){
  .fdr-nav__name{display:none;}
}

/* -------------------------------------------------------------- Rahmen */
.fdr{max-width:var(--maxw);margin:0 auto;padding:var(--fdr-32) var(--pad) var(--fdr-64);}
.fdr--schmal{max-width:820px;}
.fdr a{color:var(--acc-2);}

.fdr-kopf{margin-bottom:var(--fdr-32);}
.fdr-kopf h1{font-size:clamp(28px,4.2vw,44px);line-height:1.06;letter-spacing:-.028em;
  margin:var(--fdr-4) 0 var(--fdr-8);font-weight:800;text-wrap:balance;}
.fdr-kopf h1 em{font-style:normal;color:var(--acc-2);}
.fdr-kopf p{color:var(--mut);margin:0;font-size:15px;line-height:1.65;max-width:60ch;}
.fdr-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-2);
  margin:0;font-weight:600;}

/* --------------------------------------------------------------- Karten */
.fdr-karte{border:1px solid var(--fdr-kante);border-radius:var(--r);background:var(--fdr-glas-hell);
  padding:var(--fdr-24);box-shadow:var(--fdr-schimmer);}
.fdr-karte + .fdr-karte{margin-top:var(--fdr-16);}
.fdr-karte__kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--fdr-16);margin-bottom:var(--fdr-12);flex-wrap:wrap;}
.fdr-karte h2{font-size:19px;margin:0;letter-spacing:-.01em;font-weight:700;}
.fdr-karte h3{font-size:15.5px;margin:0 0 var(--fdr-4);font-weight:600;}
.fdr-karte p{color:var(--mut);font-size:14.5px;line-height:1.65;margin:0;
  overflow-wrap:anywhere;}

.fdr-gitter{display:grid;gap:var(--fdr-16);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

/* ---------------------------------------------------------------- Ampel */
.fdr-ampel{display:inline-flex;align-items:center;gap:var(--fdr-8);font-size:12.5px;
  font-weight:600;padding:var(--fdr-4) var(--fdr-12);border-radius:999px;
  border:1px solid var(--fdr-kante);white-space:nowrap;}
.fdr-ampel::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.fdr-ampel--gruen{color:var(--fdr-gruen);}
.fdr-ampel--gelb{color:var(--fdr-gelb);}
.fdr-ampel--rot{color:var(--fdr-rot);}
.fdr-ampel--still{color:var(--mut);}

/* ------------------------------------------------------------ Phasen */
.fdr-phasen{display:flex;gap:var(--fdr-4);margin:var(--fdr-24) 0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--fdr-4);}
.fdr-phasen::-webkit-scrollbar{display:none;}
.fdr-phase{flex:1 1 0;min-width:96px;border-radius:10px;padding:var(--fdr-12);
  border:1px solid var(--fdr-kante);background:rgba(255,255,255,.02);}
.fdr-phase__nr{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);}
.fdr-phase__text{font-size:13px;font-weight:600;margin-top:var(--fdr-4);line-height:1.3;}
.fdr-phase.is-erledigt{border-color:rgba(111,207,151,.34);}
.fdr-phase.is-erledigt .fdr-phase__nr{color:var(--fdr-gruen);}
.fdr-phase.is-hier{background:var(--inv);border-color:var(--fdr-kante-warm);
  box-shadow:var(--fdr-tiefe-kurz);}
.fdr-phase.is-hier .fdr-phase__nr{color:var(--acc-2);}

/* ----------------------------------------------------------- Fortschritt */
.fdr-balken{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.fdr-balken__fuell{height:100%;background:linear-gradient(90deg,#6E32C4,#B79BEA);
  border-radius:999px;transition:width .5s var(--fdr-raus);}
.fdr-balken__text{font-size:12px;color:var(--mut);margin-top:var(--fdr-8);}

/* ------------------------------------------------------------ Formular */
.fdr-schritt{margin-bottom:var(--fdr-32);}
.fdr-frage{margin-bottom:var(--fdr-24);}
.fdr-frage__label{display:block;font-size:16px;font-weight:600;margin-bottom:var(--fdr-8);
  line-height:1.4;letter-spacing:-.005em;}
.fdr-frage__hilfe{display:block;font-size:13.5px;color:var(--mut);margin:calc(var(--fdr-8) * -1) 0 var(--fdr-12);
  line-height:1.55;max-width:62ch;}
.fdr-frage__pflicht{color:var(--acc-2);margin-left:var(--fdr-4);}

.fdr-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--fdr-16);}
@media(max-width:620px){.fdr-paar{grid-template-columns:1fr;}}

/* Zwei Felder nebeneinander, aber NICHT als Grid mit festen Zeilen: dort
   richten sich alle Zellen an der hoechsten aus, und zwischen einem
   kurzen und einem erklaerten Feld klaffen dann dreistellige Pixelmengen
   Leere. Ein umbrechender Flex-Fluss laesst jedes Feld so hoch sein, wie
   es ist, und die Stapelreihenfolge auf dem Handy bleibt die des
   Quelltextes. */
.fdr-felder{display:flex;flex-wrap:wrap;gap:0 var(--fdr-16);align-items:flex-start;}
.fdr-felder > .fdr-frage{flex:1 1 100%;min-width:0;}
.fdr-felder > .fdr-frage--halb{flex:1 1 calc(50% - 8px);min-width:220px;}
@media(max-width:620px){
  .fdr-felder > .fdr-frage--halb{flex:1 1 100%;}
}

.fdr input[type=text],.fdr input[type=email],.fdr input[type=tel],.fdr input[type=number],
.fdr input[type=date],.fdr input[type=password],.fdr select,.fdr textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--fdr-kante);
  border-radius:12px;padding:var(--fdr-12) var(--fdr-16);color:#fff;font:inherit;font-size:15px;
  transition:border-color .18s var(--fdr-rein),background .18s var(--fdr-rein);}
.fdr textarea{min-height:120px;resize:vertical;line-height:1.6;}
.fdr input:focus,.fdr select:focus,.fdr textarea:focus{outline:none;
  border-color:var(--fdr-kante-warm);background:rgba(255,255,255,.06);}
.fdr input::placeholder,.fdr textarea::placeholder{color:rgba(255,255,255,.30);}
.fdr select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B79BEA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
  padding-right:44px;}
.fdr option{background:#160e28;color:#fff;}

.fdr-fehler input,.fdr-fehler select,.fdr-fehler textarea{border-color:rgba(235,87,87,.6);}
.fdr-fehler__text{color:var(--fdr-rot);font-size:13px;margin-top:var(--fdr-4);}

/* Auswahl als Karten. Ein Klick statt Klappliste, weil die Trigger-Fragen
   den Rest des Ablaufs bestimmen und sichtbar bleiben sollen. */
.fdr-wahl{display:grid;gap:var(--fdr-8);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.fdr-wahl__knopf{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--fdr-kante);
  border-radius:12px;padding:var(--fdr-16);color:#fff;font:inherit;font-size:14.5px;cursor:pointer;
  transition:border-color .18s var(--fdr-rein),background .18s var(--fdr-rein),transform .12s;}
.fdr-wahl__knopf:hover{border-color:var(--fdr-kante-warm);background:rgba(255,255,255,.06);}
.fdr-wahl__knopf:active{transform:scale(.985);}
.fdr-wahl__knopf.is-gewaehlt{background:var(--inv);border-color:var(--fdr-kante-warm);
  box-shadow:var(--fdr-schimmer);}

/* --------------------------------------------------------------- Knoepfe */
.fdr-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--fdr-8);
  padding:var(--fdr-12) var(--fdr-24);border-radius:999px;border:1px solid var(--fdr-kante);
  background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background .18s var(--fdr-rein),border-color .18s var(--fdr-rein),transform .12s;}
.fdr-knopf:hover{background:rgba(255,255,255,.08);border-color:var(--fdr-kante-warm);}
.fdr-knopf:active{transform:scale(.98);}
.fdr-knopf--haupt{background:var(--inv);border-color:transparent;box-shadow:var(--fdr-tiefe-kurz);}
.fdr-knopf--haupt:hover{background:var(--inv);filter:brightness(1.12);}
.fdr-knopf--still{background:none;color:var(--mut);}
.fdr-knopf--still:hover{color:#fff;}
.fdr-knopf[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.fdr-knopf--klein{padding:var(--fdr-8) var(--fdr-16);font-size:13px;}

.fdr-zeile{display:flex;gap:var(--fdr-12);align-items:center;flex-wrap:wrap;
  margin-top:var(--fdr-24);}
.fdr-zeile--enden{justify-content:space-between;}

/* --------------------------------------------------------------- Listen */
.fdr-liste{list-style:none;margin:0;padding:0;}
.fdr-liste li{display:flex;gap:var(--fdr-12);align-items:flex-start;padding:var(--fdr-12) 0;
  border-top:1px solid var(--fdr-kante);}
.fdr-liste li:first-child{border-top:none;}
.fdr-liste__text{flex:1 1 auto;min-width:0;}
.fdr-liste__titel{font-size:14.5px;font-weight:600;overflow-wrap:anywhere;}
.fdr-liste__unter{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.5;
  overflow-wrap:anywhere;}

.fdr-marke{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:3px var(--fdr-8);border-radius:6px;background:rgba(235,87,87,.16);
  color:#ff9a9a;margin-left:var(--fdr-8);vertical-align:middle;}
.fdr-marke--wir{background:rgba(111,207,151,.14);color:var(--fdr-gruen);}
.fdr-marke--still{background:rgba(255,255,255,.06);color:var(--mut);}

/* -------------------------------------------------------------- Tabelle */
.fdr-tabellenrahmen{overflow-x:auto;border:1px solid var(--fdr-kante);border-radius:var(--r);}
.fdr-tabelle{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px;}
.fdr-tabelle th{text-align:left;padding:var(--fdr-12) var(--fdr-16);color:var(--mut);
  font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--fdr-kante);white-space:nowrap;}
.fdr-tabelle td{padding:var(--fdr-12) var(--fdr-16);border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;overflow-wrap:anywhere;}
.fdr-tabelle tr:last-child td{border-bottom:none;}
.fdr-tabelle tbody tr{cursor:pointer;transition:background .14s;}
.fdr-tabelle tbody tr:hover{background:rgba(255,255,255,.03);}

/* --------------------------------------------------------------- Anmerkung */
.fdr-notiz{border-left:2px solid var(--fdr-kante-warm);padding:var(--fdr-8) 0 var(--fdr-8) var(--fdr-16);
  color:var(--mut);font-size:13.5px;line-height:1.65;margin:var(--fdr-16) 0;max-width:64ch;}

.fdr-leer{text-align:center;padding:var(--fdr-48) var(--fdr-24);color:var(--mut);
  border:1px dashed var(--fdr-kante);border-radius:var(--r);}
.fdr-leer h3{color:#fff;margin:0 0 var(--fdr-8);font-size:17px;}
.fdr-leer p{margin:0 auto var(--fdr-24);max-width:44ch;font-size:14.5px;line-height:1.6;}

/* ---------------------------------------------------------------- Toast */
.fdr-toast{position:fixed;left:50%;bottom:var(--fdr-24);transform:translateX(-50%);
  background:var(--fdr-glas);border:1px solid var(--fdr-kante-warm);border-radius:999px;
  padding:var(--fdr-12) var(--fdr-24);font-size:14px;box-shadow:var(--fdr-tiefe);z-index:80;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:calc(100vw - 48px);
  text-align:center;transition:opacity .4s,transform .4s;}
.fdr-toast--fehler{border-color:rgba(235,87,87,.5);}
.fdr-toast.is-weg{opacity:0;transform:translateX(-50%) translateY(8px);}

/* ------------------------------------------------------------ Anmeldung */
.fdr-auth{min-height:100vh;display:grid;place-items:center;padding:var(--fdr-24);}
.fdr-auth__karte{width:100%;max-width:420px;border:1px solid var(--fdr-kante);border-radius:20px;
  background:var(--fdr-glas);padding:var(--fdr-32);box-shadow:var(--fdr-tiefe);}
.fdr-auth__marke{font-weight:900;font-size:22px;letter-spacing:-.02em;margin-bottom:var(--fdr-4);}
.fdr-auth__eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-2);
  margin:0 0 var(--fdr-24);font-weight:600;}
.fdr-auth__feld{margin-bottom:var(--fdr-16);}
.fdr-auth__feld label{display:block;font-size:13px;color:var(--mut);margin-bottom:var(--fdr-8);}
.fdr-auth__msg{min-height:0;font-size:13.5px;line-height:1.55;margin-bottom:var(--fdr-16);
  color:var(--fdr-rot);}
.fdr-auth__msg:empty{display:none;}
.fdr-auth__unten{margin-top:var(--fdr-16);text-align:center;font-size:13px;}

/* ------------------------------------------------------- Aufteilung */
.fdr-zweispalt{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--fdr-24);align-items:start;}
@media(max-width:940px){.fdr-zweispalt{grid-template-columns:1fr;}}

/* Zwei eigene Spalten, kein Grid mit festen Zeilen: Grid-Zeilen richten
   sich an der hoechsten Zelle aus, und dann klaffen im Formular
   dreistellige Pixelmengen Leere. */
.fdr-spalte{display:flex;flex-direction:column;gap:var(--fdr-16);min-width:0;}

@media print{
  .fdr-nav,.fdr-zeile,.fdr-toast{display:none !important;}
  body{background:#fff;color:#000;}
}