:root{
  --pink:#ff2d9b; --pink-soft:#ffd1ec;
  --yellow:#ffe600; --yellow-soft:#fff6a8;
  --ink:#1a0b16; --paper:#fff8fc;
  --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 18%, var(--yellow-soft) 0, transparent 38%),
    radial-gradient(circle at 88% 82%, var(--pink-soft) 0, transparent 42%),
    var(--paper);
  color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;
}
.amt{max-width:1140px;margin:0 auto;padding:0 20px 80px}

/* KOPFZEILE */
.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0}
.wortmarke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font-weight:800;line-height:1.1}
.adlerersatz{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;background:var(--yellow);
  border:3px solid var(--ink);border-radius:14px;transform:rotate(-4deg);box-shadow:var(--shadow)}
.adlerersatz svg{width:36px;height:36px;display:block}
.wirk-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;background:var(--yellow-soft);
  border:2px solid var(--ink);border-radius:11px;align-self:center}
.wirk-icon svg{width:23px;height:23px;display:block}
.bereichswahl label:has(input:checked) .wirk-icon{background:var(--yellow)}
.wortmarke span:last-child{display:flex;flex-direction:column;font-size:15px;text-transform:uppercase}
.wortmarke strong{font-size:19px;color:var(--pink);text-transform:none}
.kopf-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dienststatus{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;background:var(--pink);color:#fff;
  border:3px solid var(--ink);padding:9px 16px;border-radius:999px;box-shadow:var(--shadow)}
.statuspunkt{width:11px;height:11px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.nutzerbox{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:7px 8px 7px 16px;box-shadow:var(--shadow)}
.textknopf{font:inherit;font-weight:800;cursor:pointer;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:6px 14px}
.textknopf:hover{background:var(--pink)}

/* AKTENBAND */
.aktenband{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;background:var(--ink);color:var(--yellow);
  font-family:"Courier New",monospace;font-size:12.5px;letter-spacing:.05em;padding:11px 20px;border-radius:12px;
  margin-bottom:26px;text-transform:uppercase}

/* RASTER */
.seitenraster{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
@media(max-width:900px){.seitenraster{grid-template-columns:1fr}}

.formularseite{background:#fff;border:4px solid var(--ink);border-radius:24px;padding:38px;box-shadow:10px 10px 0 var(--pink)}
.kennung{display:inline-block;font-family:"Courier New",monospace;font-size:12px;font-weight:700;letter-spacing:.12em;
  background:var(--yellow);border:2px solid var(--ink);padding:5px 12px;border-radius:8px;text-transform:uppercase}
h1{font-size:clamp(28px,4.6vw,48px);line-height:1.02;letter-spacing:-.03em;margin:16px 0 14px;font-weight:900}
h1 span{color:var(--pink)}
.einleitung{font-size:16.5px;max-width:56ch;color:#4a2a3d}

/* LOGIN */
.login-schirm{max-width:640px;margin:0 auto}
.login-form{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.login-form input{flex:1;min-width:220px;font:inherit;font-size:17px;padding:15px 18px;border:3px solid var(--ink);
  border-radius:14px;background:var(--paper)}
.login-form input:focus{outline:3px solid var(--pink);outline-offset:1px}
.login-status{margin-top:16px;font-weight:700;font-size:15px;min-height:22px}
.login-status.ok{color:#1a7a3d}.login-status.err{color:var(--pink)}

/* REITER */
.reiter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.reiter-knopf{font:inherit;font-weight:800;font-size:15px;cursor:pointer;background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:12px;padding:11px 18px;box-shadow:3px 3px 0 var(--ink);transition:transform .1s ease}
.reiter-knopf:hover{transform:translate(-2px,-2px)}
.reiter-knopf.aktiv{background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink)}

/* FORM */
form.formular{margin-top:32px;display:flex;flex-direction:column;gap:26px}
fieldset{border:0}
legend{display:flex;align-items:center;gap:11px;font-weight:900;font-size:20px;margin-bottom:6px}
legend>span:first-child{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;background:var(--pink);color:#fff;
  border:3px solid var(--ink);border-radius:10px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}
legend #legende2{font-weight:900}
.hilfstext{font-size:14.5px;color:#6a4557;margin-bottom:14px}

.zeitwahl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:520px){.zeitwahl{grid-template-columns:repeat(2,1fr)}}
.zeitwahl label{position:relative;cursor:pointer;text-align:center;background:var(--paper);border:3px solid var(--ink);
  border-radius:16px;padding:16px 6px;transition:transform .1s ease,background .15s ease,box-shadow .1s ease}
.zeitwahl input{position:absolute;opacity:0;inset:0;cursor:pointer}
.zeitwahl strong{display:block;font-size:32px;font-weight:900;line-height:1}
.zeitwahl span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.zeitwahl label:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.zeitwahl label:has(input:checked){background:var(--yellow);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--pink)}

.bereichswahl{display:flex;flex-direction:column;gap:12px}
.bereichswahl label{display:flex;align-items:flex-start;gap:14px;cursor:pointer;background:var(--paper);border:3px solid var(--ink);
  border-radius:16px;padding:16px 18px;transition:transform .1s ease,background .15s ease,box-shadow .1s ease}
.bereichswahl input{margin-top:3px;width:20px;height:20px;accent-color:var(--pink);flex:0 0 20px}
.bereichswahl span{display:flex;flex-direction:column;gap:3px;font-size:14.5px;color:#6a4557}
.bereichswahl strong{font-size:17px;color:var(--ink);font-weight:800}
.bereichswahl label:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.bereichswahl label:has(input:checked){background:var(--pink-soft);box-shadow:5px 5px 0 var(--pink);transform:translate(-2px,-2px)}
.bereichswahl.kompakt{flex-direction:row;flex-wrap:wrap}
.bereichswahl.kompakt label{flex:1;min-width:180px;padding:12px 14px}
.bereichswahl.kompakt strong{font-size:15px}

.erklaerung{display:flex;align-items:flex-start;gap:13px;cursor:pointer;background:var(--yellow-soft);border:3px dashed var(--ink);
  border-radius:16px;padding:16px 18px;font-size:14.5px;font-weight:600}
.erklaerung input{margin-top:2px;width:22px;height:22px;accent-color:var(--pink);flex:0 0 22px}

.hauptknopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:20px;font-weight:900;
  cursor:pointer;background:var(--pink);color:#fff;border:4px solid var(--ink);border-radius:16px;padding:18px 28px;
  box-shadow:var(--shadow);transition:transform .1s ease,box-shadow .1s ease;align-self:flex-start}
.hauptknopf span{font-size:24px;transition:transform .15s ease}
.hauptknopf:not(:disabled):hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.hauptknopf:not(:disabled):hover span{transform:translateX(6px)}
.hauptknopf:not(:disabled):active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.hauptknopf:disabled{background:#e6d5df;color:#9a8290;cursor:not-allowed;box-shadow:none;border-color:#b9a3b1}
.zweitknopf{font:inherit;font-size:15px;font-weight:800;cursor:pointer;background:#fff;color:var(--ink);border:3px solid var(--ink);
  border-radius:14px;padding:14px 20px;transition:transform .1s ease,box-shadow .1s ease}
.zweitknopf:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}

/* BESCHEID */
.bescheid{display:none;margin-top:28px}
.bescheid.sichtbar{display:block;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.bescheid-kopf{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink);
  color:var(--yellow);border-radius:14px 14px 0 0;padding:14px 20px;font-family:"Courier New",monospace;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase}
.bescheid-kopf strong{color:#fff}
.bescheid-koerper{border:4px solid var(--ink);border-top:0;border-radius:0 0 20px 20px;
  background:repeating-linear-gradient(0deg,#fff,#fff 31px,#fff6fb 31px,#fff6fb 32px);padding:28px 26px;
  box-shadow:8px 8px 0 var(--pink);position:relative}
.bescheid-stempel{position:absolute;top:8px;right:12px;width:132px;transform:rotate(8deg);
  filter:drop-shadow(2px 2px 0 rgba(26,11,22,.25));pointer-events:none}
@media(max-width:520px){.bescheid-stempel{width:90px}}
.bescheid-koerper h3{font-size:16px;margin-bottom:4px;font-weight:900}
.bescheid-anweisung{font-size:clamp(21px,3.4vw,28px);font-weight:900;line-height:1.15;margin:14px 0 18px;max-width:34ch}
.bescheid-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:"Courier New",monospace;font-size:13px;color:#6a4557;
  border-top:2px dashed #e0c6d6;padding-top:16px;margin-top:6px}
.bescheid-meta b{color:var(--ink)}
.bescheid-schliessen{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.gehandelt{display:flex;align-items:flex-start;gap:13px;cursor:pointer;background:var(--yellow-soft);border:3px dashed var(--ink);
  border-radius:14px;padding:14px 16px;font-size:14.5px;font-weight:600}
.gehandelt input{margin-top:2px;width:22px;height:22px;accent-color:var(--pink);flex:0 0 22px}
.bescheid-buttons{display:flex;flex-wrap:wrap;gap:12px}

.abschluss{display:none;margin-top:28px;background:var(--yellow);border:4px solid var(--ink);border-radius:20px;padding:26px;
  box-shadow:8px 8px 0 var(--pink);text-align:center}
.abschluss.sichtbar{display:block;animation:pop .3s ease}
.abschluss h3{font-size:24px;font-weight:900;margin-bottom:8px}
.abschluss p{font-size:15px;font-weight:600;max-width:42ch;margin:0 auto 18px}
.abschluss .zweitknopf{background:#fff}

/* VORSCHLÄGE */
.vorschlag-form{margin-top:26px;gap:16px}
#vorschlagText{font:inherit;font-size:16px;padding:14px 16px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);resize:vertical}
#vorschlagText:focus{outline:3px solid var(--pink);outline-offset:1px}
.vorschlag-leiste{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vorschlag-leiste small{font-family:"Courier New",monospace;color:#6a4557}
.vorschlag-leiste .hauptknopf{font-size:16px;padding:13px 22px}
.register-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 16px;
  border-top:3px solid var(--ink);padding-top:24px}
.filterleiste{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#fff;color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;padding:7px 14px}
.chip.aktiv{background:var(--yellow)}
.sortwahl{font:inherit;font-weight:700;font-size:13px;border:2px solid var(--ink);border-radius:999px;padding:7px 12px;background:#fff;cursor:pointer}
.vorschlag-liste{list-style:none;display:flex;flex-direction:column;gap:12px}
.vorschlag-item{display:flex;align-items:flex-start;gap:14px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:14px 16px}
.vote-knopf{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 54px;cursor:pointer;background:#fff;
  border:3px solid var(--ink);border-radius:12px;padding:8px 0;font:inherit;font-weight:900;transition:transform .1s ease}
.vote-knopf:hover{transform:translateY(-2px)}
.vote-knopf.aktiv{background:var(--pink);color:#fff}
.vote-knopf .pfeil{font-size:16px;line-height:1}
.vote-knopf .zahl{font-size:20px;line-height:1}
.vorschlag-inhalt{flex:1}
.vorschlag-inhalt p{font-size:15.5px;font-weight:600;margin-bottom:6px}
.vorschlag-inhalt .meta{font-size:12px;color:#6a4557;font-family:"Courier New",monospace;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cat-tag{background:var(--yellow);border:1px solid var(--ink);border-radius:6px;padding:1px 7px;font-weight:700}
.loesch{margin-left:auto;background:none;border:0;color:var(--pink);font-weight:800;cursor:pointer;font-size:12px}
.leerhinweis{text-align:center;color:#6a4557;padding:24px;font-style:italic}

/* BILANZ */
.bilanz-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:520px){.bilanz-kacheln{grid-template-columns:1fr}}
.bilanz-kachel{background:var(--pink-soft);border:3px solid var(--ink);border-radius:18px;padding:22px;text-align:center;box-shadow:5px 5px 0 var(--ink)}
.bilanz-kachel.gelb{background:var(--yellow-soft)}
.bilanz-kachel dd{font-size:46px;font-weight:900;color:var(--pink);line-height:1}
.bilanz-kachel.gelb dd{color:var(--ink)}
.bilanz-kachel dt{font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:6px}
.namenszeile{margin:8px 0 28px}
.namenszeile label{font-weight:700;font-size:14px;display:block;margin-bottom:8px}
.namenszeile-eingabe{display:flex;gap:10px;flex-wrap:wrap}
.namenszeile-eingabe input{flex:1;min-width:200px;font:inherit;font-size:16px;padding:12px 16px;border:3px solid var(--ink);border-radius:12px;background:var(--paper)}
.verlauf-titel{font-size:18px;margin-bottom:14px}
.verlauf-liste{list-style:none;display:flex;flex-direction:column;gap:10px}
.verlauf-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:var(--paper);border:2px solid var(--ink);
  border-radius:12px;padding:12px 14px;font-size:14px}
.verlauf-item .az{font-family:"Courier New",monospace;font-size:12px;color:#6a4557}
.verlauf-item .status{font-weight:800;font-size:12px}
.verlauf-item .status.offen{color:var(--pink)}

/* SEITENLEISTE */
.seitenleiste{display:flex;flex-direction:column;gap:20px}
.seitenleiste section{background:#fff;border:4px solid var(--ink);border-radius:20px;padding:24px}
.hinweisbox{box-shadow:8px 8px 0 var(--yellow)}
.hinweisbox h2{font-size:18px;margin:12px 0 16px;font-weight:900}
.hinweisbox ol{list-style:none;display:flex;flex-direction:column;gap:10px}
.hinweisbox li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}
.hinweisbox li span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;background:var(--pink);color:#fff;
  border:2px solid var(--ink);border-radius:8px;font-family:"Courier New",monospace;font-size:13px}
.statistik{box-shadow:8px 8px 0 var(--pink)}
.statistik dl{display:flex;flex-direction:column;gap:14px;margin:14px 0 12px}
.statistik dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px dashed #e0c6d6;padding-bottom:12px}
.statistik dt{font-size:14px;color:#6a4557;font-weight:600}
.statistik dd{font-size:30px;font-weight:900;color:var(--pink)}
.statistik small,.sprechzeiten p{font-size:12.5px;color:#8a6b7b}
.sprechzeiten{box-shadow:8px 8px 0 var(--yellow)}
.sprechzeiten p{font-size:14.5px;color:#4a2a3d;margin-top:10px}

footer{display:flex;flex-direction:column;gap:12px;margin-top:40px;padding-top:22px;
  border-top:3px solid var(--ink);font-size:12.5px;font-weight:600;color:#6a4557}
.footer-titel{color:var(--pink);font-weight:800}
.footer-amtlich{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;
  border-top:2px dashed #d9c2d0;padding-top:14px;margin-top:2px}
footer a{color:var(--pink);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.rechtliches{display:flex;gap:18px}

/* ================= BILDSTIL-INTEGRATION (Gilliam-Collage) ================= */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:url("/img/bg.png") center/cover no-repeat fixed;opacity:.22;pointer-events:none}
.logo-siegel{width:62px;height:62px;flex:0 0 62px;object-fit:contain;transform:rotate(-3deg);
  filter:drop-shadow(2px 2px 0 rgba(26,11,22,.18))}
.hero-karte{position:relative;overflow:visible}
.hero-mascot{position:absolute;top:-64px;right:-22px;width:200px;pointer-events:none;z-index:3;
  filter:drop-shadow(4px 5px 0 rgba(26,11,22,.22))}
@media(max-width:900px){.hero-mascot{width:130px;right:-6px;top:-42px}}
@media(max-width:560px){.hero-mascot{display:none}}
.anweisung-icons{list-style:none;display:flex;flex-direction:column;gap:12px}
.anweisung-icons li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px}
.anweisung-icons li img{width:52px;height:52px;flex:0 0 52px;object-fit:contain}
.agent-status{display:flex;align-items:center;gap:16px;box-shadow:8px 8px 0 var(--pink)}
.agent-status img{width:118px;flex:0 0 118px;object-fit:contain;filter:drop-shadow(3px 3px 0 rgba(26,11,22,.2))}
.agent-status div{display:flex;flex-direction:column;gap:4px}
.agent-status strong{font-size:16px}
.agent-status span{font-size:13px;color:#6a4557}
.abschluss-gesicht{width:118px;height:118px;object-fit:contain;margin:-4px auto 4px;display:block}

/* ANTRAG A38 (Weiterbildung buchen) */
.kurs-liste{display:flex;flex-direction:column;gap:14px;margin:26px 0 22px}
.kurs-karte{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink);
  background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:18px 20px;
  box-shadow:4px 4px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease,background .15s ease}
.kurs-karte:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--pink);background:var(--yellow-soft)}
.kurs-karte strong{font-size:19px;display:flex;align-items:center;gap:10px}
.kurs-karte .ihk{font-size:11px;font-weight:800;letter-spacing:.06em;background:var(--pink);color:#fff;
  border:2px solid var(--ink);border-radius:6px;padding:1px 7px}
.kurs-karte span{font-size:14.5px;color:#6a4557}
.kurs-karte em{font-style:normal;font-weight:900;color:var(--pink);margin-top:4px}
.a38-cta{text-decoration:none;margin-top:2px}
.a38-fussnote{font-size:12.5px;color:#8a6b7b;font-style:italic;margin-top:16px;max-width:52ch}

/* SCHIEBEREGLER (Dauer) */
.zeitregler{background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:20px 20px 14px}
.zeitregler-anzeige{text-align:center;margin-bottom:14px;min-height:38px;display:flex;align-items:center;justify-content:center}
.zeitregler-anzeige strong{font-size:clamp(20px,3.6vw,30px);font-weight:900;line-height:1.12;color:var(--pink)}
.zeitregler input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border:3px solid var(--ink);
  border-radius:999px;background:var(--yellow);cursor:pointer}
.zeitregler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;
  border-radius:50%;background:var(--pink);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.zeitregler input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--pink);
  border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.zeitregler input[type=range]:focus{outline:none}
.zeitregler input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--pink)}
.zeitregler-skala{display:flex;justify-content:space-between;font-family:"Courier New",monospace;font-size:11px;color:#6a4557;margin-top:8px}
.namensfreigabe{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;color:#4a2a3d;margin-top:-4px}
.namensfreigabe input{margin-top:2px;width:19px;height:19px;accent-color:var(--pink);flex:0 0 19px}

/* QUITTUNG / ERLEDIGUNGSVERMERK */
.quittung{position:relative;background:#fff;border:3px dashed var(--ink);border-radius:14px;padding:20px 20px 16px;
  margin:0 auto 18px;max-width:420px;text-align:left;font-family:"Courier New",monospace}
.quittung-stempel{position:absolute;top:10px;right:12px;transform:rotate(-9deg);border:3px double var(--pink);color:var(--pink);
  border-radius:8px;padding:4px 10px;font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.quittung-kennung{font-size:11px;letter-spacing:.14em;color:#6a4557;margin-bottom:12px}
.quittung dl{display:flex;flex-direction:column;gap:8px}
.quittung dl>div{display:flex;gap:10px;font-size:12.5px;border-bottom:1px dotted #d9c2d0;padding-bottom:7px}
.quittung dt{flex:0 0 108px;color:#6a4557}
.quittung dd{flex:1;color:var(--ink);font-weight:700}
.abschluss-tiein{font-size:14px;font-weight:600;background:var(--pink-soft);border:2px solid var(--ink);border-radius:12px;
  padding:12px 16px;max-width:44ch;margin:0 auto 18px}
.abschluss-tiein a{color:var(--pink);font-weight:900;white-space:nowrap}

/* KOPF: Anmelden-Knopf */
.anmelden-knopf{background:var(--pink)}
.anmelden-knopf:hover{background:var(--ink)}

/* LED-TAFEL im Aktenband */
.led-tafel{display:inline-flex;align-items:center;gap:8px;background:#0d0a0c;color:#ffe600;border:1px solid #3a2f36;
  border-radius:6px;padding:2px 10px;font-family:"Courier New",monospace;letter-spacing:.1em;text-transform:none;
  text-shadow:0 0 6px rgba(255,230,0,.55)}
.led-punkt{width:8px;height:8px;border-radius:50%;background:#38d16a;box-shadow:0 0 6px #38d16a;animation:blink 1.4s ease-in-out infinite}

/* LOGIN-OVERLAY */
.login-overlay{position:fixed;inset:0;z-index:50;background:rgba(26,11,22,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.login-overlay .login-karte{position:relative;max-width:520px;width:100%}
.login-schliessen{position:absolute;top:14px;right:16px;width:36px;height:36px;border:3px solid var(--ink);background:#fff;
  border-radius:10px;font-weight:900;cursor:pointer;font-size:15px}
.login-schliessen:hover{background:var(--yellow)}
.textknopf-inline{background:none;border:0;color:var(--pink);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;padding:0}
.bilanz-hinweis{background:var(--yellow-soft);border:2px solid var(--ink);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px}

/* BESCHEID-CTA (Freistellung) */
.bescheid-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.bescheid-cta .hauptknopf{align-self:flex-start;text-decoration:none}

/* WARTEMARKE */
.warteschein{position:fixed;inset:0;z-index:60;background:rgba(26,11,22,.6);display:flex;align-items:center;justify-content:center;padding:20px;animation:pop .2s ease}
.warteschein-karte{background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--pink);padding:28px 34px;text-align:center;max-width:340px}
.warteschein-nr{font-size:clamp(46px,10vw,72px);font-weight:900;color:var(--pink);line-height:1;margin:10px 0}
.warteschein-status{font-weight:700;font-size:15px;margin-bottom:10px}
.warteschein small{font-size:12px;color:#8a6b7b;font-style:italic}

/* DAUER-FELD beim Einreichen + Band-Tag in der Liste */
.dauer-wahl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dauer-wahl label{font-weight:700;font-size:14px}
.dauer-tag{background:var(--pink-soft);border:1px solid var(--ink);border-radius:6px;padding:1px 7px;font-weight:700}

/* AMTLICHER ZWECK + Footer-Hommage */
.zweck-box{background:var(--yellow-soft);border:3px solid var(--ink);border-radius:16px;padding:16px 18px;margin:18px 0 2px}
.zweck-box p{font-size:15px;color:#4a2a3d;margin-top:8px;line-height:1.5}
.footer-homage{font-style:italic;color:#6a4557;line-height:1.5;font-weight:400}
.footer-zweck p:last-child{font-size:13.5px;color:#6a4557;font-weight:400;line-height:1.55;margin-top:8px;max-width:74ch}

[hidden]{display:none !important}