/* Bewerbungsportal — Gewand nach der BBK-Celle-Gestaltungsrichtlinie (DNA-Ebene 3: Verein).
   Führend: 16_VEREINE/BBK/celle/04_ASSETS/design-system/ (bbk-celle-gestaltungsrichtlinie.html).
   Prinzip: ein Rot als einziges Signal, viel Weiß, feine Linien, zwei Schriften
   (Source Serif 4 für Titel, IBM Plex Sans für Text und Labels). KEINE Verläufe, KEINE Schatten.
   Der Akzent bleibt eine Variable (--akz), damit weitere Mandanten ihre Vereinsfarbe setzen
   können; Standard ist BBK-Rot #BD1C33. Keine Roman-Thomas-Hausschrift, keine erfundene Marke. */

/* ---------- Schriften (selbst gehostet, exakt aus der Richtlinie) ---------- */
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-SemiBold.woff2") format("woff2");font-weight:600;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-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --grund:#FFFFFF;         /* Seitengrund, weiß */
  --karte-flaeche:#F6F6F6; /* Karten heben sich leicht vom Grund ab (ganz helles Grau) */
  --feld:#FFFFFF;          /* Eingabefelder, weißer Grund, der Rand macht sie erkennbar */
  --feld-linie:#D8D8D8;    /* Feldrand */
  --flaeche:#EEEEEE;       /* Info- und Hinweiskästen */
  --linie:#E0E0E0;         /* feine Trennlinien */
  --ink:#1A1A1A;           /* Textschwarz, Fließtext, Titel */
  --ink-2:#5B5B5B;         /* etwas leiser */
  --label:#8F8F8F;         /* gesperrte Labels, Sekundärtext */
  --akz:#BD1C33;           /* Markenrot, einziges Signal (Mandant kann überschreiben) */
  --akz-lo:#9E1329;        /* Rot gedrückt (hover/active) */
  --akz-soft:rgba(189,28,51,.14);
  /* Laute Warnung: volle rote Flaeche, weisse Schrift. Roman am 26.08.2026,
     damit die Bildmeldung im Formular nicht uebersehen wird. Kontrast 6,2:1. */
  --warn-flaeche:#BD1C33;
  --warn-ink:#FFFFFF;
  --serif:"Source Serif 4",Georgia,serif;
  --ui:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  --r:3px;              /* Radien bleiben minimal */
  --breite:760px;
}
html[data-theme="dark"]{
  --grund:#151515; --karte-flaeche:#1E1E1E; --feld:#262626; --feld-linie:#3A3A3A;
  --flaeche:#232323; --linie:#333333;
  --ink:#ECECEC; --ink-2:#B7B7B7; --label:#8C8C8C;
  --akz:#E5566B; --akz-lo:#EE6E82; --akz-soft:rgba(229,86,107,.20);
  /* im Dunkelmodus eine Spur heller als das Markenrot, damit sich die
     Flaeche vom dunklen Grund abhebt; weisse Schrift bleibt bei 5,7:1 */
  --warn-flaeche:#C42340; --warn-ink:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  color:var(--ink);font-family:var(--ui);line-height:1.6;font-size:15.5px;
  background:var(--grund);min-height:100vh;
}

/* ---------- Kopfband ---------- */
.kopf-band{max-width:var(--breite);margin:0 auto;padding:34px 20px 0}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 0 18px;border-bottom:1px solid var(--linie)}
.marke{display:inline-flex;align-items:center;gap:16px;min-width:0}
.marke-logo{width:46px;height:46px;flex-shrink:0;object-fit:contain;display:block}
/* Logo-Umschaltung: rotes Positiv auf hell, weiße Negativfassung auf dunkel */
.marke-logo--dunkel{display:none}
[data-theme="dark"] .marke-logo--hell{display:none}
[data-theme="dark"] .marke-logo--dunkel{display:block}
.mtext{display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1.15;min-width:0}
.mname{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mclaim{font-size:10px;font-weight:700;color:var(--label);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--linie);cursor:pointer;border-radius:50%;color:var(--label);background:var(--grund);
  transition:color .12s ease,border-color .12s ease}
.theme-toggle:hover{color:var(--akz);border-color:var(--akz)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}.theme-toggle .ic-moon{display:block}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* ---------- Inhaltshülle ---------- */
.huelle{max-width:var(--breite);margin:0 auto;padding:30px 20px 60px}

/* Titel: Source Serif 4 Regular, groß und ruhig, NICHT fett, gemischte Schreibung */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.18;
  color:var(--ink);margin:.1rem 0 .6rem;letter-spacing:0}
/* Abschnittskopf: IBM Plex Sans Bold, Versalien, gesperrt, Rot */
/* Abschnitts-Headline: Titelschrift (Source Serif 4) als Versalien, rot */
h2{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--akz);margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--linie)}
h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ink);margin:22px 0 8px}

.untertitel{color:var(--ink-2);margin:0 0 30px;font-size:.95rem}
.untertitel a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--linie)}
.untertitel a:hover{color:var(--akz)}
/* button that looks like the plain links above (logout form) */
.link-knopf{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--ink-2);border-bottom:1px solid var(--linie)}
.link-knopf:hover{color:var(--akz)}
a{color:var(--akz)}
a:hover{color:var(--akz-lo)}
p{margin:0 0 .8rem}

/* ---------- Karten: flache weiße Blöcke, feine Linie, kein Schatten ---------- */
.karte{
  background:var(--karte-flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:1.9rem 2rem;margin:0 0 1.1rem;
}

/* Aufzaehlung in einer Karte. Ohne Abstand nach unten klebt der folgende Absatz
   am letzten Punkt und liest sich wie ein Teil davon. Am 01.08.2026 auf der
   Seite fuer ungueltige Links am gerenderten Pixel gemessen. */
.karte ul{margin:0 0 .9rem;padding-left:1.15rem}
.karte li+li{margin-top:.35rem}

/* ---------- Formularfelder: Label über feiner Unterstrich-Linie ---------- */
label{display:block;font-family:var(--ui);font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;margin:20px 0 6px}
label .optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--label)}

input[type="text"],input[type="email"],input[type="password"],
input[type="datetime-local"],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--feld-linie);border-radius:var(--r);
  font:inherit;color:var(--ink);background:var(--feld);
  transition:border-color .14s ease,box-shadow .14s ease}
textarea{min-height:104px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akz);box-shadow:0 0 0 2px var(--akz-soft)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--label) 50%),linear-gradient(135deg,var(--label) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type="file"]{width:100%;padding:10px 12px;border:1px solid var(--feld-linie);border-radius:var(--r);
  background:var(--feld);font-size:.9rem;color:var(--ink-2);cursor:pointer}
input[type="file"]::file-selector-button{
  border:1px solid var(--ink);border-radius:var(--r);padding:8px 16px;margin-right:14px;cursor:pointer;
  font:inherit;font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:var(--grund);transition:color .12s ease,border-color .12s ease}
input[type="file"]::file-selector-button:hover{color:var(--akz);border-color:var(--akz)}

.hinweis{color:var(--ink-2);font-size:.85rem;margin:6px 0 0}

/* ---------- Zustände: Hinweis-Kasten mit rotem Balken links ---------- */
.fehler{
  color:var(--ink);background:var(--flaeche);border-left:3px solid var(--akz);
  border-radius:0 var(--r) var(--r) 0;padding:11px 16px;margin:8px 0;font-size:.9rem}
/* Die Bildmeldung ist der haeufigste Abbruchgrund und darf nicht zu uebersehen
   sein: ganze Flaeche im Markenrot, weisse Schrift. */
.bild-fehler{
  color:var(--warn-ink);background:var(--warn-flaeche);border-radius:var(--r);
  padding:14px 18px;margin:10px 0;font-size:.9rem;font-weight:400;
  scroll-margin:24px}
.erfolg{
  color:var(--ink);background:var(--flaeche);border-left:3px solid var(--ink);
  border-radius:0 var(--r) var(--r) 0;padding:11px 16px;margin:8px 0 16px;font-size:.94rem}

/* ---------- Knöpfe: flach, ein Rot, kein Verlauf, kein Schatten ---------- */
.knopf{
  display:inline-block;border:1px solid var(--akz);border-radius:var(--r);padding:12px 26px;
  font-family:var(--ui);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;color:#fff;background:var(--akz);
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.knopf:hover{background:var(--akz-lo);border-color:var(--akz-lo)}
.knopf:active{background:var(--akz-lo)}
.knopf.leise{color:var(--ink);background:var(--grund);border-color:var(--ink)}
.knopf.leise:hover{color:var(--akz);border-color:var(--akz);background:var(--grund)}
.knopf.gefahr{color:var(--akz);background:var(--grund);border-color:var(--akz)}
.knopf.gefahr:hover{color:#fff;background:var(--akz);border-color:var(--akz)}

/* ---------- Einwilligung ---------- */
.einwilligung{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:.92rem;font-weight:400;color:var(--ink);margin:0;text-transform:none;letter-spacing:0}
.einwilligung input{margin-top:3px;width:17px;height:17px;accent-color:var(--akz)}

/* ---------- Werk-Block ---------- */
.werk-kopf h2{margin:0 0 4px;border:none;padding:0}
/* Entfernen sitzt am Fuß des Blocks, leise und rechtsbündig, nicht im Kopf */
.werk-fuss{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--linie);
  display:flex;justify-content:flex-end}
.entfernen-zeile{font-size:.85rem;color:var(--label);font-weight:400;
  text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:8px}
.entfernen-zeile input{accent-color:var(--akz);width:16px;height:16px}
.werk-entfernen{font:inherit;font-size:.85rem;color:var(--label);background:none;border:none;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.werk-entfernen:hover{color:var(--akz)}
/* beim einzigen Werk gar kein Entfernen anbieten */
#werke.einzeln .werk-fuss{display:none}

/* Weiteres Werk: volle Breite, direkt an die Werke angesetzt (eine Einheit) */
.werk-hinzufuegen-knopf{display:block;width:100%;margin:-.4rem 0 2rem;padding:15px;
  border:1px dashed var(--feld-linie);border-radius:var(--r);background:var(--grund);
  color:var(--ink-2);font-family:var(--ui);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:border-color .14s ease,color .14s ease}
.werk-hinzufuegen-knopf:hover{border-color:var(--akz);color:var(--akz)}

/* Zusatzblock (Randfall): deutlich abgesetzt und bewusst zurückhaltend, kein Kasten */
.zusatz{margin-top:60px;padding-top:30px;border-top:1px solid var(--linie)}
.zusatz-titel{font-family:var(--ui);font-weight:700;font-size:.95rem;color:var(--ink-2);
  text-transform:none;letter-spacing:0;margin:0 0 6px}
.zusatz-form{max-width:420px}
.knopf.klein{padding:9px 18px;font-size:.76rem}

.vorschau{max-width:180px;max-height:140px;border:1px solid var(--linie);border-radius:var(--r);display:block;margin:8px 0}

/* ---------- Tabellen: feine Linien ---------- */
table{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:4px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:none}
th{color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}
td a{color:var(--akz);text-decoration:none;font-weight:400}
td a:hover{text-decoration:underline}

/* ---------- Token-Link ---------- */
.token-link{
  word-break:break-all;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r);padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--ink-2)}

/* ---------- Fuß ---------- */
.fuss{max-width:var(--breite);margin:0 auto;padding:22px 20px 44px;
  border-top:1px solid var(--linie);color:var(--label);font-size:.84rem}
.fuss a{color:var(--ink-2);text-decoration:none}
.fuss a:hover{color:var(--akz)}

@media (max-width:600px){
  .kopf-band{padding:18px 14px 0}
  .huelle{padding:22px 14px 48px}
  .fuss{padding:18px 14px 36px}
  .karte{padding:1.3rem 1.2rem}
  .mclaim{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}