/* data.teccc.de — Familienlook teccc.de (hell, Sora/Manrope, Navy, Orange nur als Akzent) */
:root{--ink:#0D1B2A;--ink-2:#33415A;--ink-3:#65718A;--ink-4:#8A94A8;--linie:#E6E9ED;--kante:#D3D9E0;--hell:#F4F4F1;--papier:#FFFFFF;
  --akzent:#F5A623;--akzent2:#E09420;--gruen:#0A7A54;--rot:#B3261E;--r:16px;--r2:18px;--bahn:1400px;
  --ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--disp:'Sora',var(--ui)}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--hell);color:var(--ink-2);font-family:var(--ui);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}a:hover{text-decoration:underline;text-decoration-color:var(--akzent)}
h1,h2,h3{font-family:var(--disp);color:var(--ink);margin:0 0 .4rem;letter-spacing:-.01em}
h1{font-size:1.7rem;font-weight:700}h2{font-size:1.05rem;font-weight:700}h3{font-size:.9rem;font-weight:700;margin-top:1rem;color:var(--ink-2)}
.leicht{color:var(--ink-4);font-weight:500}
small,.klein{font-size:.85rem;color:var(--ink-3)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--hell);padding:.1em .35em;border-radius:6px}
hr{border:0;border-top:1px solid var(--linie);margin:.8rem 0}
/* Kopf */
.kopf{display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.5rem;background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.marke{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-size:1.15rem;color:var(--ink);white-space:nowrap}
.marke b{font-weight:800}.marke small{color:var(--ink-4);font-family:var(--ui);font-size:.75rem;margin-left:.2rem}
.marke img{border-radius:10px}
.nav{display:flex;gap:.2rem;flex:1}
.nav a,.konto a{padding:.45rem .8rem;border-radius:10px;color:var(--ink-2);font-weight:600}
.nav a.aktiv,.konto a.aktiv{background:var(--hell);color:var(--ink)}
.nav a:hover{text-decoration:none;background:var(--hell)}
.konto{display:flex;align-items:center;gap:.4rem}
.konto form{margin:0}
/* Inhalt */
.inhalt{max-width:var(--bahn);margin:0 auto;padding:1.5rem 1.5rem 3rem}
.fuss{text-align:center;color:var(--ink-4);font-size:.8rem;padding:1rem}
.titelzeile{margin-bottom:1.2rem}.titelzeile .unter{margin:.2rem 0 0;color:var(--ink-3)}
.pfad{color:var(--ink-4);font-size:.85rem;margin:0 0 .5rem}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r2);padding:1.1rem 1.3rem;box-shadow:0 1px 2px rgba(13,27,42,.03)}
.karten{display:grid;gap:1rem;margin-bottom:1rem}
.karten.zwei{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.karten.drei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.karte-und-tabelle{grid-template-columns:minmax(300px,420px) 1fr}
.seitenleiste{grid-template-columns:260px 1fr}
@media(max-width:900px){.karte-und-tabelle,.seitenleiste{grid-template-columns:1fr}.kopf{flex-wrap:wrap;gap:.6rem}}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1rem}
.kachel{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.1rem}
.kachel b{font-family:var(--disp);font-size:1.6rem;color:var(--ink);font-weight:700}.kachel span{color:var(--ink-3);font-size:.85rem}
.kachel:hover{text-decoration:none;border-color:var(--kante)}
/* Karte */
.landkarte .karte-svg{aspect-ratio:600/780;max-height:620px}.landkarte img{width:100%;height:100%;display:block}
.punkt{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}.punkt.grau{background:#B9C2CF}.punkt.orange{background:var(--akzent)}
.balken{height:8px;background:var(--hell);border-radius:4px;min-width:90px;overflow:hidden}.balken i{display:block;height:100%;background:var(--akzent);border-radius:4px}
/* Tabellen */
.tabelle{width:100%;border-collapse:collapse;font-size:.9rem}
.tabelle th{text-align:left;font-weight:700;color:var(--ink-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:.45rem .6rem;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td{padding:.45rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}.tabelle tbody tr:hover{background:#FAFAF8}
.tabelle .r,th.r{text-align:right}
.karte:has(> .tabelle){overflow-x:auto}
/* Listen, Daten */
.liste{list-style:none;margin:0;padding:0}.liste li{padding:.3rem 0;border-bottom:1px solid var(--linie)}.liste li:last-child{border:0}
.daten{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:.25rem .8rem;margin:0}.daten dt{color:var(--ink-3);font-size:.85rem;padding-top:.2rem}.daten dd{margin:0}
.daten.felder dd form.inline{display:flex;gap:.3rem}.daten.felder input{flex:1;padding:.25rem .5rem;border:1px solid transparent;border-radius:8px;background:transparent;font:inherit;color:var(--ink)}
.daten.felder input:hover,.daten.felder input:focus{border-color:var(--kante);background:var(--papier);outline:0}
.daten.felder form.inline button{opacity:0}.daten.felder form.inline:focus-within button{opacity:1}
.marke-manuell{color:var(--akzent2);font-style:normal;font-size:.8rem}
.chips a,.chips span{display:inline-block;background:var(--hell);border-radius:8px;padding:.1rem .5rem;margin:.15rem .2rem .15rem 0;font-size:.85rem}
/* Formulare */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}
input,select{font:inherit;padding:.5rem .7rem;border:1px solid var(--kante);border-radius:10px;background:var(--papier);color:var(--ink)}
input:focus,select:focus{outline:2px solid rgba(245,166,35,.45);border-color:var(--akzent)}
.filter input[name=q]{min-width:260px;flex:1}
button,.knopf{font:inherit;font-weight:700;padding:.55rem 1.1rem;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;display:inline-block}
button:hover,.knopf:hover{background:#1b2d44;text-decoration:none}
button[disabled]{opacity:.4;cursor:not-allowed}
button.leise,.knopf.leise,a.leise{background:transparent;color:var(--ink-2);border-color:var(--kante);font-weight:600}
button.leise:hover,.knopf.leise:hover,a.leise:hover{background:var(--hell)}
a.leise{padding:.5rem .9rem;border-radius:10px;border:1px solid var(--kante);display:inline-block}
button.klein{padding:.2rem .5rem}
.formular{display:flex;flex-direction:column;gap:.8rem}.formular label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;color:var(--ink-2);font-size:.9rem}
.formular input,.formular select{width:100%}
.zeile{display:inline-block;margin:.8rem .5rem 0 0}
.fehler{background:#FBEAE8;color:var(--rot);border-radius:10px;padding:.6rem .9rem}
.hinweis{background:#FFF4E0;color:#7A4D00;border-radius:10px;padding:.6rem .9rem}
.status{display:inline-block;padding:.05rem .5rem;border-radius:8px;font-size:.8rem;font-weight:700;background:var(--hell);color:var(--ink-2)}
.status.fertig,.status.neu{background:#E3F4EC;color:var(--gruen)}.status.aktualisiert{background:#FFF4E0;color:#7A4D00}
.status.fehler,.status.verworfen{background:#FBEAE8;color:var(--rot)}.status.vorschau,.status.laeuft{background:#E8EEF7;color:#1D5FB8}
.blaettern{display:flex;gap:1rem;align-items:center;justify-content:center;padding:.8rem 0 0;color:var(--ink-3);font-size:.9rem}
/* Anmeldung */
body.anmeldung{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.karte-mitte{background:var(--papier);border:1px solid var(--linie);border-radius:22px;padding:2.2rem 2.4rem;width:100%;max-width:420px;text-align:center;box-shadow:0 10px 40px rgba(13,27,42,.06)}
.karte-mitte.breit{max-width:560px}
.karte-mitte .signet{border-radius:16px;margin-bottom:.6rem}
.karte-mitte h1{font-size:1.5rem}.karte-mitte .unter{color:var(--ink-3);margin:.2rem 0 1.2rem}
.karte-mitte .formular{text-align:left}.karte-mitte form+form{margin-top:.8rem}
.karte-mitte .klein{margin-top:1rem}
input.code{font-family:var(--disp);font-size:1.5rem;letter-spacing:.3em;text-align:center}
.qr{display:inline-block;background:#fff;padding:.5rem;border:1px solid var(--linie);border-radius:14px;margin-bottom:.6rem}.qr svg{width:220px;height:220px;display:block}
.schluessel{display:block;word-break:break-all;margin:.4rem 0}
.codes{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.codes code{font-size:1.05rem;display:block;padding:.4rem;background:var(--hell);border-radius:8px}
/* Verfahren */
.leiste{display:flex;flex-direction:column;gap:.2rem;align-self:start;position:sticky;top:5rem}
.leiste a{padding:.45rem .7rem;border-radius:10px;font-weight:600;color:var(--ink-2)}.leiste a.aktiv{background:var(--hell);color:var(--ink)}
.text{max-width:860px;line-height:1.65}.text h1{font-size:1.5rem;margin-top:0}.text h2{font-size:1.2rem;margin-top:1.6rem}.text h3{font-size:1rem;margin-top:1.2rem}
.text p{margin:.6rem 0}.text ul,.text ol{padding-left:1.3rem}.text li{margin:.25rem 0}
.text table{border-collapse:collapse;width:100%;margin:.8rem 0;font-size:.9rem}.text th,.text td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}.text th{color:var(--ink-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.text blockquote{border-left:3px solid var(--akzent);margin:.8rem 0;padding:.2rem 1rem;color:var(--ink-3)}
.text pre{background:var(--hell);padding:.8rem 1rem;border-radius:12px;overflow-x:auto}
/* Vodafone-Kundentyp: klar ausgewiesen (Jens 06.10.2026) */
.typ{display:inline-block;padding:.05rem .55rem;border-radius:8px;font-size:.78rem;font-weight:700;background:var(--hell);color:var(--ink-2);white-space:nowrap}
.typ.mf{background:#E8EEF7;color:#1D5FB8}.typ.fn{background:#E3F4EC;color:var(--gruen)}.typ.beide{background:linear-gradient(90deg,#E8EEF7,#E3F4EC);color:var(--ink);border:1px solid var(--kante)}
.typ.gross{font-size:.9rem;vertical-align:middle;margin-left:.4rem;padding:.15rem .7rem}
.typ.teccc{background:var(--ink);color:#fff}