/* SKK-App – Design nach der Backstage-Kursseite „Sachkundekurs ECLS November 2026“ (Roboto, #237ACD). */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/roboto-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/roboto-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blau:#237acd; --blau-dunkel:#1b5f9f; --titel-blau:#2b8fe0; --rot:#e60000;
  --dunkel:#181d1f; --fuss:#22272a; --grau-bg:#f7f8f9; --hell:#f6fafe; --linie:#e0e5ec;
  --text:#1d2327; --grau:#5f6b75; --link:#3577bc; --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Roboto",Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:#fff}
img{max-width:100%;height:auto}
a{color:var(--link)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid #f5a623;outline-offset:2px}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.kopf-in{max-width:1280px;margin:0 auto;height:72px;padding:0 32px;display:flex;align-items:center;gap:24px}
.marke{text-decoration:none;font-weight:700;font-size:18px;letter-spacing:.2px;margin-right:auto;white-space:nowrap}
.marke-rot{color:var(--rot)} .marke-blau{color:var(--blau)}
.menue{display:flex;align-items:center;gap:8px}
.menue a{color:#000;text-decoration:none;text-transform:uppercase;font-size:13px;padding:5px 8px;border-radius:6px;white-space:nowrap}
.menue a:hover{color:var(--blau)}
.menue a.on{background:var(--blau);color:#fff;font-weight:700}
.menue a.menue-ecls{border:1px solid var(--blau);color:var(--blau);font-weight:500;margin-left:8px}
.menue a.menue-ecls:hover{background:var(--blau);color:#fff}
.ext{margin-left:4px}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:#000;margin:6px 0;transition:transform .2s,opacity .2s}

/* Kopfbereich (Held) */
.held{background:linear-gradient(rgba(24,29,31,.55),rgba(24,29,31,.55)),var(--dunkel) url(img/hero.webp?v=10) no-repeat right 8% top/auto 100%;color:#fff}
.held-in{max-width:1280px;margin:0 auto;padding:64px 32px 72px;display:grid;grid-template-columns:1fr minmax(0,608px);gap:40px;align-items:start}
.held h1{margin:0 0 40px;font-weight:500;font-size:40px;line-height:1.2}
.held .rot{color:var(--rot)} .held .blau{color:var(--titel-blau)}
.held-name{font-size:20px;margin:-24px 0 28px;color:#fff}
.held-label{margin:24px 0 0;font-size:16px}
.held-wert{margin:0;font-size:26px;font-weight:500}
.held-ort{margin:0;font-size:24px}
.held-btns{margin:40px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.logos{background:none;padding:0}
.logos img{display:block;width:100%}
.zurueck{margin:0 0 16px}
.zurueck a{color:#cfe3f7;text-decoration:none;font-size:14px}
.zurueck a:hover{text-decoration:underline}

.btn{display:inline-block;background:var(--blau);color:#fff;text-decoration:none;text-transform:uppercase;font-weight:500;font-size:16px;padding:10px 16px;border-radius:var(--radius);border:0;line-height:1.5}
.btn:hover{background:var(--blau-dunkel)}
.btn-hell{background:#fff;color:var(--blau)}
.btn-hell:hover{background:var(--hell)}

/* Inhaltsblöcke */
.block{padding:48px 0}
.block-grau{background:var(--grau-bg)}
.block-in{max-width:1280px;margin:0 auto;padding:0 32px}
.h-blau{color:var(--blau);font-weight:700;font-size:36px;line-height:1.2;margin:0 0 28px}
.hinweis{background:var(--hell);border-left:4px solid var(--blau);padding:12px 16px;border-radius:4px}
.klein{font-size:14px} .grau{color:var(--grau)}

/* Kursliste */
.kurse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.kurs-karte{border:1px solid var(--linie);border-radius:12px;background:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 8px rgba(24,29,31,.06)}
.kurs-link{display:flex;flex-direction:column;gap:6px;padding:20px 20px 16px;text-decoration:none;color:var(--text);flex:1;border-top:6px solid var(--blau)}
.kurs-link:hover .kurs-name{text-decoration:underline}
.kurs-datum{color:var(--rot);font-weight:500}
.kurs-name{color:var(--blau);font-size:22px;font-weight:500;line-height:1.3}
.kurs-ort{color:var(--grau)}
.kurs-mehr{margin-top:auto;padding-top:10px;color:var(--link);font-weight:500;font-size:14px;text-transform:uppercase}
.kurs-anm{display:block;padding:12px 20px;background:var(--hell);border-top:1px solid var(--linie);color:var(--blau);font-weight:500;text-decoration:none;font-size:14px;text-transform:uppercase}
.kurs-anm:hover{background:#e8f1fb}
/* Startseite: berechtigte Kurse angemeldeter Teilnehmender (08.11.2026) */
.kurs-eingeloggt{border:2px solid #1f9d55;background:#f3faf6;box-shadow:0 2px 10px rgba(31,157,85,.14)}
.kurs-eingeloggt .kurs-link{border-top-color:#1f9d55}
.badge-login{background:#1f9d55;color:#fff}
.haken{font-weight:700}
.kurs-direkt{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 20px;background:#e8f6ee;border-top:1px solid #cfe9da;font-size:14px;font-weight:500;text-transform:uppercase}
.kurs-direkt a{color:#14633a;text-decoration:none}
.kurs-direkt a:hover{text-decoration:underline}
/* Kopf: Einloggen / Ihre Daten / Ausloggen (1.15) – immer sichtbar, auch mobil */
.kopf-konto{display:flex;align-items:center;gap:6px;order:3}
.kopf-konto a,.kopf-konto button{font:inherit;font-size:13px;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:6px;padding:5px 10px;cursor:pointer;line-height:1.4}
.kopf-konto .konto-ein{background:var(--blau);color:#fff;font-weight:500}
.kopf-konto .konto-ein:hover{background:#1b64aa}
.kopf-konto .konto-daten{color:#14633a;background:#e8f6ee;font-weight:500}
.kopf-konto .konto-daten.on{background:#14633a;color:#fff}
.kopf-konto form{margin:0}
.kopf-konto button{background:none;border:1px solid #b9c3cf;color:#000}
.kopf-konto button:hover{border-color:var(--blau);color:var(--blau)}
.banner.banner-ok{background:#e7f5ec;color:#1e5530;border-bottom:1px solid #bfe3cb}
@media (max-width:900px){.kopf-in{gap:10px}.burger{order:4}.kopf-konto a,.kopf-konto button{padding:5px 8px;font-size:12px}}
@media (max-width:420px){.kopf-konto .haken{display:none}.marke{font-size:15px}}

/* Programm */
.tage{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;position:sticky;top:72px;background:#fff;padding:8px 0;z-index:5}
.tage a{border:1px solid var(--blau);color:var(--blau);text-decoration:none;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:500}
.tage a:hover{background:var(--blau);color:#fff}
.tag{margin:0 0 40px;scroll-margin-top:130px}
.tag-h{font-size:22px;font-weight:500;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--blau)}
.slots{list-style:none;margin:0;padding:0}
.slot{padding:12px 0;border-bottom:1px solid var(--linie)}
.slot-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.slot-pause{display:flex;gap:16px;color:var(--grau);font-size:15px;padding:8px 0}
.slot-pause .zeit{margin:0;min-width:96px}
.sess .zeit{margin:0;color:var(--grau);font-size:14px}
.raum{color:var(--blau);font-weight:500}
.sess-t{margin:2px 0 0;font-size:18px;font-weight:500;line-height:1.35}
.sess-key{border-left:3px solid var(--blau);padding-left:10px}
.sess-ref{margin:4px 0 0;color:var(--grau);font-size:15px}
.sess-d{margin-top:6px}
.sess-d summary{cursor:pointer;color:var(--link);font-size:14px;font-weight:500}
.sess-d p{margin:6px 0;font-size:15px}
.slot-par .sess{background:var(--grau-bg);border-radius:8px;padding:10px 12px}

/* Startseite: Text unter dem Kopfbereich, geplante Termine im Held (08.11.2026) */
.block-start{padding-bottom:0}
.start-text{max-width:860px}
.start-text p{font-size:18px;line-height:1.55;margin:0 0 14px}
.held-termin{font-size:22px}
.held-termin-ort{font-size:17px;font-weight:400;opacity:.9}

/* Hotelempfehlungen (08.11.2026) */
.hotels-text{max-width:860px;margin:0 0 20px;font-size:17px}
.hotels-liste{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.hotel-karte{border:1px solid var(--linie);border-top:6px solid var(--blau);border-radius:12px;background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 8px rgba(24,29,31,.06)}
.hotel-karte p{margin:0}
.hotel-name{color:var(--blau);font-size:20px;font-weight:500;line-height:1.3}
.hotel-adresse{color:var(--text)}
.hotel-entfernung{color:var(--grau);font-size:15px}
.hotel-hinweis{color:var(--rot);font-weight:500;font-size:15px}
.hotel-link{margin-top:auto!important;padding-top:8px}
.hotel-link a{color:var(--link);font-weight:500;text-decoration:none;font-size:14px;text-transform:uppercase}
.hotel-link a:hover{text-decoration:underline}

/* Newsletter „Bleiben Sie informiert“ (08.11.2026) */
.nl-in{display:grid;grid-template-columns:minmax(0,640px) minmax(260px,1fr);gap:32px;align-items:start}
.nl-anmeldung p:first-child{margin:0 0 14px;font-size:17px}
.nl-iframe{display:block;width:100%;max-width:640px;height:520px;border:1px solid var(--linie);border-radius:12px;background:#fff}
.nl-link{margin:14px 0 0}
.nl-karte{background:#fff;border:1px solid var(--linie);border-left:6px solid var(--rot);border-radius:12px;padding:20px 22px}
.nl-karte p{margin:0 0 8px}
.nl-label{color:var(--grau);font-size:13px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.nl-titel{color:var(--blau);font-size:19px;font-weight:500;line-height:1.35}
.newsletter-kompakt .nl-in{grid-template-columns:minmax(0,560px) minmax(260px,1fr)}
.newsletter-kompakt .nl-link{margin-top:4px}
@media (max-width:900px){.nl-in{grid-template-columns:1fr}}
/* Newsletter-Modal (<dialog>): Anmeldeseite von mail.dgptm.de, iframe erst beim Öffnen */
.nl-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 32px);border:0;border-radius:14px;padding:0;background:#fff;box-shadow:0 12px 40px rgba(24,29,31,.3);overflow:hidden}
.nl-dialog::backdrop{background:rgba(24,29,31,.55)}
.nl-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:var(--blau);color:#fff}
.nl-dialog-kopf h2{margin:0;font-size:20px;font-weight:500}
.nl-dialog-zu{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:50%;width:36px;height:36px;font-size:22px;line-height:1;cursor:pointer}
.nl-dialog-zu:hover,.nl-dialog-zu:focus-visible{background:rgba(255,255,255,.18);outline:2px solid #fff;outline-offset:2px}
.nl-dialog-rahmen{padding:16px 20px 0;min-height:200px}
.nl-dialog-rahmen .nl-iframe{max-width:none;height:min(520px,calc(100vh - 190px));border-radius:8px}
.nl-dialog-fuss{margin:0;padding:10px 20px 16px;color:var(--grau)}

/* Ort */
.ort{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:32px;align-items:start}
.ort-karte{background:#fff;border:1px solid var(--linie);border-radius:8px;padding:24px}
.ort-karte h3{margin:0 0 8px;font-size:22px;font-weight:500}
.eingang{margin:0;max-width:640px;background:#fff;border-radius:8px;padding:12px;border:1px solid var(--linie)}
.eingang figcaption{font-size:14px;color:var(--grau);margin-top:8px}

/* ECLS-Kachel */
.ecls{background:var(--blau);color:#fff}
.ecls-in{max-width:1280px;margin:0 auto;padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ecls h2{margin:0 0 6px;font-size:28px;font-weight:700}
.ecls p{margin:0}

/* Fuß */
.fuss{background:var(--fuss);color:#fff}
.fuss-in{max-width:1280px;margin:0 auto;padding:24px 32px;font-size:14px}
.fuss a{color:#fff}
.fuss p{margin:4px 0}

@media (max-width:1100px){
  .held-in{grid-template-columns:1fr}
  .logos{max-width:608px}
}
@media (max-width:900px){
  .kopf-in{padding:0 16px;height:60px}
  .burger{display:block}
  .menue{display:none;position:absolute;left:0;right:0;top:60px;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;box-shadow:0 8px 16px rgba(0,0,0,.12)}
  .menue.offen{display:flex}
  .menue a{padding:12px 8px;font-size:14px}
  .menue a.menue-ecls{margin:8px 0 0;text-align:center}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .held{background-position:center,center bottom;background-size:auto,auto 70%}
  .held-in{padding:24px 16px 40px;gap:28px}
  .held-text{order:2}
  .logos{order:1}
  .held h1{font-size:28px;margin-bottom:24px}
  .held-name{margin:-12px 0 16px;font-size:18px}
  .held-wert{font-size:22px} .held-ort{font-size:20px}
  .block{padding:32px 0} .block-in{padding:0 16px}
  .h-blau{font-size:28px}
  .kurse{grid-template-columns:1fr}
  .tage{top:60px}
  .ort{grid-template-columns:1fr}
  .ecls-in{padding:28px 16px}
  .fuss-in{padding:20px 16px}
  .slot-pause .zeit{min-width:84px}
}
/* Hinweisleisten (gs-Banner, Vorschau) */
.banner{background:#fff6d6;border-bottom:1px solid #f0dc8a;color:#5c4700}
.banner-warn{background:#fdecea;border-color:#f3c2bd;color:#8a1c12}
.leiste-in{max-width:1280px;margin:0 auto;padding:10px 32px;font-size:15px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner p{margin:0}
.vorschau-leiste{background:repeating-linear-gradient(135deg,#ffe58a 0 14px,#ffd84d 14px 28px);color:#3d3000;font-size:15px}
.vorschau-leiste form{margin:0 0 0 auto}
.vorschau-leiste button{background:#3d3000;color:#fff;border:0;border-radius:6px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.btn-umriss{background:transparent;border:1px solid #fff;color:#fff}
.btn-umriss:hover{background:rgba(255,255,255,.12)}
.schloss{display:inline-block;width:10px;height:8px;border:2px solid currentColor;border-radius:2px;margin-left:8px;position:relative;top:-1px}
.schloss::before{content:"";position:absolute;left:0;top:-7px;width:6px;height:6px;border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0}
.kurs-vb{display:block;padding:10px 20px;border-top:1px solid var(--linie);color:var(--grau);font-size:14px;text-decoration:none}
.kurs-vb:hover{color:var(--blau);background:var(--hell)}
.btn-text{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700}
.chip-gelb{background:#ffd84d;color:#3d3000}

/* Vorbereitung */
.held-vb .held-in{grid-template-columns:1fr;padding:40px 32px 44px}
.held-vb h1{margin-bottom:28px}
.wer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:#dfe9f3;font-size:15px}
.wer form{margin:0}
.wer .btn-text{color:#fff}
.vb-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:40px;align-items:start;margin:0 0 48px}
.vb-einleitung{font-size:18px;line-height:1.65;max-width:68ch}
.vb-einleitung p{margin:0 0 14px}
.vb-merke{font-weight:500;color:var(--blau);border-left:4px solid var(--blau);padding-left:12px}
.vb-check{background:var(--hell);border:1px solid #d5e5f6;border-radius:12px;padding:22px 22px 14px;position:sticky;top:92px}
.vb-check h2{margin:0 0 14px;font-size:20px;color:var(--blau)}
.check{list-style:none;margin:0 0 10px;padding:0;counter-reset:c}
.check li{border-top:1px solid #d5e5f6;padding:12px 0}
.check li:first-child{border-top:0;padding-top:0}
.check label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blau);flex:none}
.check strong{display:block;font-weight:500}
.check small{display:block;color:var(--grau);font-size:14px;margin-top:2px}
.check input:checked + span strong{text-decoration:line-through;color:var(--grau)}
.vb-h{font-size:28px;margin-top:8px}
.videos{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.video{border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(24,29,31,.06);display:flex;flex-direction:column}
.video-rahmen{position:relative;aspect-ratio:16/9;background:#0e1214}
.video-rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45));border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-play span{width:76px;height:76px;border-radius:50%;background:rgba(35,122,205,.95);box-shadow:0 6px 20px rgba(0,0,0,.35);position:relative;transition:transform .15s}
.video-play span::after{content:"";position:absolute;left:30px;top:22px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.video-play:hover span,.video-play:focus-visible span{transform:scale(1.08)}
.video-text{padding:16px 20px 18px}
.video-nr{margin:0;color:var(--rot);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.video-text h3{margin:4px 0 4px;font-size:20px;font-weight:500;line-height:1.3;color:var(--blau)}
.video-ref{margin:0 0 6px;color:var(--grau)}
.video-text .klein{margin:4px 0 0}
.fragen{background:var(--blau);color:#fff;border-radius:14px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 48px}
.fragen h2{margin:0 0 6px;font-size:26px}
.fragen p{margin:0 0 4px}
.fragen-quiz{flex-direction:column;align-items:stretch}
.quiz-rahmen{background:#fff;border-radius:10px;overflow:hidden}
.quiz-rahmen iframe{display:block;width:100%;height:900px;border:0}
.fragen-quiz .klein a{color:#fff}
.quiz-start-zeile{margin:6px 0 10px}
/* Native Leistungsabfrage (08.11.2026) */
.block-in-quiz{max-width:860px}
.quiz-karte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:28px 32px;box-shadow:0 2px 10px rgba(24,29,31,.06);margin:0 0 24px}
.quiz-karte h2{margin:0 0 12px;font-size:26px;color:var(--blau);line-height:1.3}
.quiz-karte .fragen-label{color:var(--grau);opacity:1;margin:0 0 6px}
.quiz-fakten{list-style:none;margin:16px 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.quiz-fakten li{background:var(--hell);border-radius:8px;padding:8px 12px}
.quiz-wer{margin:8px 0}
.quiz-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.btn-umriss-blau{background:#fff;color:var(--blau);border:1px solid var(--blau)}
.btn-umriss-blau:hover{background:var(--hell)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-abgabe{background:#1f9d55}.btn-abgabe:hover{background:#177a41}
.quiz-kopf{margin:0 0 18px}
.quiz-fortschritt{height:8px;background:var(--linie);border-radius:999px;overflow:hidden}
.quiz-fortschritt-balken{height:100%;background:var(--blau);transition:width .3s}
.quiz-stand{display:flex;justify-content:space-between;gap:12px;margin:8px 0 0;font-size:14px;color:var(--grau)}
.quiz-zeit strong{color:var(--text);font-variant-numeric:tabular-nums}
.quiz-zeit-knapp .quiz-zeit strong{color:var(--rot)}
.quiz-frage{font-size:21px;font-weight:500;color:var(--text);margin:0 0 18px;line-height:1.4}
.quiz-antworten{display:flex;flex-direction:column;gap:10px}
.quiz-antwort{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--linie);border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff}
.quiz-antwort:hover{border-color:#b9d3ee;background:var(--hell)}
.quiz-antwort.on{border-color:var(--blau);background:var(--hell)}
.quiz-antwort input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--blau);flex:none}
.quiz-buchstabe{flex:none;width:26px;height:26px;border-radius:50%;background:var(--grau-bg);color:var(--grau);font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center}
.quiz-antwort.on .quiz-buchstabe{background:var(--blau);color:#fff}
.quiz-antwort-keine{border-style:dashed}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.quiz-nav-mitte .btn-text{color:var(--link)}
.quiz-raster{list-style:none;margin:16px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.quiz-kachel{width:44px;height:44px;border-radius:8px;border:2px solid var(--linie);background:#fff;color:var(--grau);font:inherit;font-weight:500;cursor:pointer}
.quiz-kachel.on{border-color:#1f9d55;background:#e8f6ee;color:#14633a}
.quiz-kachel:hover{border-color:var(--blau)}
.quiz-fehler{background:#fdecea;border-left:4px solid #c62828;color:#8a1c12;padding:12px 16px;border-radius:4px;margin:0 0 16px}
.quiz-warte{margin:0;color:var(--grau)}
.quiz-ergebnis.bestanden h2{color:#1f9d55}.quiz-ergebnis.nicht-bestanden h2{color:var(--rot)}
.quiz-punkte{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:8px 0 20px}
.quiz-punkte p{margin:0 0 4px}
.quiz-kreis{width:110px;height:110px;border-radius:50%;border:6px solid var(--blau);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--blau);flex:none}
.bestanden .quiz-kreis{border-color:#1f9d55;color:#1f9d55}.nicht-bestanden .quiz-kreis{border-color:var(--rot);color:var(--rot)}
.quiz-ergebnis h3{margin:8px 0 12px;font-size:20px;color:var(--blau)}
.quiz-auswertung{list-style:none;margin:0 0 16px;padding:0}
.quiz-auswertung>li{border-top:1px solid var(--linie);padding:14px 0}
.quiz-auswertung>li.ok .fragen-label{color:#1f9d55}.quiz-auswertung>li.nok .fragen-label{color:var(--rot)}
.quiz-auswertung .quiz-frage{font-size:17px;margin:0 0 10px}
.quiz-loesung{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.quiz-loesung li{display:flex;gap:8px;align-items:baseline;padding:4px 8px;border-radius:6px;font-size:15px}
.quiz-loesung li.richtig{background:#e8f6ee;color:#14633a}
.quiz-loesung li.falsch{background:#fdecea;color:#8a1c12}
.quiz-mark{width:16px;flex:none;font-weight:700}
.quiz-gew{margin-left:auto;font-size:12px;text-transform:uppercase;letter-spacing:.4px;opacity:.8}
.quiz-druck{display:none}
@media (max-width:640px){
  .quiz-karte{padding:20px 16px;border-radius:12px}
  .quiz-karte h2{font-size:22px}
  .quiz-nav .btn{flex:1;text-align:center}
}
.fragen-label{text-transform:uppercase;font-size:13px;letter-spacing:.5px;opacity:.85}
.btn-gross{font-size:17px;padding:14px 22px}
.downloads{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.downloads a{display:flex;gap:12px;align-items:center;border:1px solid var(--linie);border-radius:10px;padding:14px;text-decoration:none;color:var(--text)}
.dl-typ{background:var(--rot);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:6px 8px;min-width:52px;text-align:center}
.vb-links{margin:0 0 40px}
.vb-ersatz{border:1px solid var(--linie);border-left:6px solid var(--blau);border-radius:10px;padding:20px 24px;margin:0 0 40px;background:#fff}
.vb-ersatz h2{margin:0 0 10px;font-size:22px;color:var(--blau)}
.vb-stand{margin-top:8px}

/* Anmeldung */
.anmelden{background:var(--grau-bg);min-height:60vh}
.login-karte{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:32px;box-shadow:0 4px 18px rgba(24,29,31,.07)}
.login-karte .h-blau{font-size:30px;margin-bottom:14px}
.zurueck-hell{margin:0 0 10px;font-size:14px}
.zurueck-hell a{color:var(--grau);text-decoration:none}
.login-form{display:flex;flex-direction:column;gap:8px;margin:20px 0 8px}
.login-form label{font-weight:500}
.login-form input{font:inherit;font-size:18px;padding:12px 14px;border:1px solid #b9c3cf;border-radius:8px}
.login-form input:focus{border-color:var(--blau);outline:3px solid #cfe3f7}
.login-form input[name=code]{letter-spacing:8px;font-size:26px;text-align:center;max-width:260px}
.login-form .btn{align-self:flex-start;margin-top:8px}
.login-neu{margin:0 0 12px}
.login-neu .btn-text{color:var(--link);font-size:15px}
.meldung{border-radius:8px;padding:12px 14px;margin:14px 0}
.meldung-fehler{background:#fdecea;color:#8a1c12;border:1px solid #f3c2bd}
.meldung-ok{background:#e7f5ec;color:#1e5530;border:1px solid #bfe3cb}

@media (max-width:900px){
  .leiste-in{padding:10px 16px}
  .vorschau-leiste form{margin:0}
  .held-vb .held-in{padding:24px 16px 28px}
  .vb-kopf{grid-template-columns:1fr;gap:24px;margin-bottom:32px}
  .vb-check{position:static;order:-1}
  .vb-einleitung{font-size:17px}
  .videos{grid-template-columns:1fr;gap:20px}
  .fragen{padding:22px 20px}
  .fragen .btn{width:100%;text-align:center}
  .login-karte{padding:22px 18px;border-radius:12px}
}
/* Wissenschaftliche Leitung + Unterstützer */
.personen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.person{border:1px solid var(--linie);border-radius:12px;padding:24px 20px;text-align:center;background:#fff;box-shadow:0 2px 8px rgba(24,29,31,.06)}
.person img,.person-leer{display:block;width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 auto 16px;background:var(--grau-bg);border:4px solid var(--hell)}
.person-name{margin:0;font-size:19px;font-weight:500;color:var(--blau)}
.person-zusatz{margin:4px 0 0;color:var(--rot);font-weight:500;letter-spacing:.3px}
.logos-liste{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.logo-karte{border:1px solid var(--linie);border-radius:10px;background:#fff;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.logo-karte a{display:block;width:100%}
.logo-bild{display:flex;align-items:center;justify-content:center;height:90px;width:100%}
.logo-bild img{max-height:80px;max-width:100%;object-fit:contain}
.logo-stufe{font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.4px}
.weitere{background:var(--grau-bg);border-radius:10px;padding:18px 22px}
.weitere h3{margin:0 0 8px;font-size:17px;font-weight:500}
.weitere ul{margin:0;padding-left:20px}
@media (max-width:900px){.personen{grid-template-columns:1fr 1fr;gap:12px}.person{padding:16px 10px}.person img,.person-leer{width:110px;height:110px}.person-name{font-size:16px}.logos-liste{grid-template-columns:1fr 1fr;gap:10px}.logo-bild{height:64px}.logo-bild img{max-height:56px}}
/* Tickets */
.held-hinweis{margin:12px 0 0;color:#ffe58a;font-weight:500}
.t-status{border-radius:14px;padding:26px 30px;margin:0 0 36px}
.t-status h2{margin:0 0 6px;font-size:26px}
.t-status p{margin:0 0 16px;font-size:17px}
.t-warte{background:#fff6d6;border:1px solid #f0dc8a;color:#3d3000}
.t-offen{background:var(--hell);border:1px solid #d5e5f6}
.t-zu{background:var(--grau-bg);border:1px solid var(--linie)}
.t-klassen{list-style:none;margin:0 0 12px;padding:0}
.t-klasse{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;border:1px solid var(--linie);border-radius:10px;padding:14px 18px;margin:0 0 10px;background:#fff}
.t-name{font-weight:500;font-size:18px;color:var(--blau)}
.t-preis{font-weight:500}
.t-chip{border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
.t-chip-ok{background:#e7f5ec;color:#1e5530}.t-chip-warte{background:#ffd84d;color:#3d3000}.t-chip-zu{background:#fdecea;color:#8a1c12}
.t-bis{color:var(--grau);font-size:14px}
@media (max-width:900px){.t-status{padding:20px 18px}.t-status .btn{width:100%;text-align:center}.t-klasse{grid-template-columns:1fr auto;gap:8px}}
.badge{align-self:flex-start;border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:700;letter-spacing:.3px;margin-bottom:4px}
.badge-ok{background:#e7f5ec;color:#1e5530}.badge-warte{background:#ffd84d;color:#3d3000}.badge-zu{background:#fdecea;color:#8a1c12}
.badge-geplant{background:#e8eef5;color:#38495a}
.kurs-geplant .kurs-link{border-top-color:#9fb3c8}
.kurs-geplant .kurs-name{color:#38495a}
.kurs-folgt{color:var(--grau)!important;text-transform:none!important;font-style:italic}
/* Programm (Zeitleiste, 23.10.2026) */
.prog-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prog-druck{color:var(--link);font-size:15px}
.tagreiter{display:flex;gap:10px;margin:0 0 14px;position:sticky;top:72px;background:#fff;padding:10px 0;z-index:6;overflow-x:auto}
.tagreiter a{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;border:1px solid #cfdcea;border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--text);background:#fff}
.tagreiter a .tr-wt{font-weight:500;font-size:17px;color:var(--blau)}
.tagreiter a .tr-d{font-size:13px;color:var(--grau)}
.tagreiter a.on{background:var(--blau);border-color:var(--blau)}
.tagreiter a.on .tr-wt,.tagreiter a.on .tr-d{color:#fff}
.legende{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--grau)}
.legende li{display:flex;align-items:center;gap:6px}
.art-punkt{width:12px;height:12px;border-radius:3px;display:inline-block}
.art-vortrag{--art:#237acd}.art-praxis{--art:#1e9b6a}.art-diskussion{--art:#7a5cc4}.art-pruefung{--art:#e60000}.art-pause{--art:#b8c2cc}
.art-punkt{background:var(--art)}
.programm .tag-h{display:flex;gap:10px;align-items:baseline;border-bottom:0;padding:0;margin:8px 0 14px;font-size:22px}
.programm .tag-h span{background:var(--dunkel);color:#fff;border-radius:6px;padding:2px 10px;font-size:14px;font-weight:500}
.zeitleiste{list-style:none;margin:0 0 8px;padding:0;position:relative}
.zl-slot{display:grid;grid-template-columns:76px 1fr;gap:0 18px;position:relative}
.zl-slot::before{content:"";position:absolute;left:84px;top:0;bottom:0;width:2px;background:#e3e9f0}
.zl-zeit{padding:14px 0 0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.zl-zeit time{font-size:16px}
.zl-inhalt{padding:8px 0 8px 14px;display:grid;gap:12px}
.zl-par .zl-inhalt{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ses{position:relative;background:#fff;border:1px solid var(--linie);border-left:5px solid var(--art);border-radius:10px;padding:12px 16px 12px;box-shadow:0 1px 4px rgba(24,29,31,.05)}
.ses::before{content:"";position:absolute;left:-26px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--art);border:3px solid #fff;box-shadow:0 0 0 1px #d8e0e8}
.zl-par .ses::before{display:none}
.zl-par .zl-inhalt>.ses:first-child::before{display:block}
.ses-meta{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--grau)}
.ses-art{color:var(--art);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:12px}
.art-pause .ses-art{color:#6b7782}
.raum-badge{background:#eef3f8;color:#2d4a66;border-radius:999px;padding:2px 10px;font-weight:500}
.ses-t{margin:0;font-size:17.5px;font-weight:500;line-height:1.35}
.ses-ref{margin:4px 0 0;color:var(--grau);font-size:15px}
.zl-pause .ses{background:repeating-linear-gradient(135deg,#f7f8f9 0 10px,#fff 10px 20px);box-shadow:none;padding:8px 14px}
.zl-pause .ses-t{font-size:15px;font-weight:400;color:var(--grau)}
.ses.jetzt{box-shadow:0 0 0 3px #ffd84d,0 4px 14px rgba(24,29,31,.12)}
.ses.naechstes{box-shadow:0 0 0 2px #9cc6ee}
.ses-jetzt{background:#ffd84d;color:#3d3000;border-radius:999px;padding:1px 9px;font-weight:700;font-size:12px}
.ses.naechstes .ses-jetzt{background:#dbeaf8;color:#1b4f80}
.prog-jetzt{background:#fff6d6;border:1px solid #f0dc8a;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.programm.js-tage .tag{display:none}.programm.js-tage .tag.on{display:block}
@media (max-width:900px){
  .tagreiter{top:60px;gap:8px}.tagreiter a{min-width:96px;padding:8px 10px}.tagreiter a .tr-wt{font-size:15px}
  .zl-slot{grid-template-columns:52px 1fr;gap:0 12px}.zl-slot::before{left:58px}
  .zl-zeit time{font-size:14px}.zl-inhalt{padding-left:10px}.ses::before{left:-20px;width:10px;height:10px}
  .zl-par .zl-inhalt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Kursende-Kacheln (Leistungsabfrage, Evaluation) – 24.10.2026 */
.kacheln-ende{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.kachel-ende{background:var(--blau);color:#fff;border-radius:14px;padding:24px 28px}
.kachel-ende h3{margin:0 0 6px;font-size:24px}
.kachel-ende p{margin:0 0 8px}
.kachel-zu{background:#5b6770}
.kachel-ab{font-size:18px}
.kachel-hinweis{background:#fff4c2;color:#5a4500;border-radius:6px;padding:8px 12px}
/* Wissenschaftliche Leitung als Glas-Kachel unter der Logo-Kachel (Variante 1, 24.10.2026) */
.held-seite{display:flex;flex-direction:column;gap:16px;min-width:0}
.held-seite .logos img{height:auto}
.wl-glas{position:relative;padding:18px 24px 22px;border-radius:30px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);scroll-margin-top:90px}
.wl-titel{margin:0 0 16px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.wl-titel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.4),transparent)}
.wl-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.wl-p{text-align:center}
.wl-p img,.wl-leer{display:block;width:80px;height:80px;margin:0 auto 10px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.wl-leer{background:rgba(255,255,255,.15)}
.wl-name{margin:0;font-size:15px;font-weight:500;line-height:1.3}
.wl-ges{display:inline-block;margin-top:6px;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:500;
  letter-spacing:.08em;color:#fff;background:rgba(230,0,0,.55);border:1px solid rgba(255,120,120,.5)}
@media (max-width:1100px){.held-seite{max-width:608px}}
@media (max-width:900px){
  .held-seite{order:1}.held-seite .logos{order:0}
  .wl-glas{padding:14px 12px 16px;border-radius:18px}
  .wl-titel{font-size:11px;margin-bottom:12px}
  .wl-liste{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
  .wl-p img,.wl-leer{width:60px;height:60px;margin-bottom:8px}
  .wl-name{font-size:13px}
  .wl-ges{font-size:11px;padding:0 8px}
}
/* Ausdruck „Programm drucken“ im SKK-Design, zurückhaltend (24.10.2026): A4 hoch, weiß, Roboto, Blau nur für
   feine Linien, Tagesüberschriften und Zeitspalte; Kopf mit Kurs/Termin/Ort + Logos, Fußzeile mit Quelle/Stand. */
.druck-kopf,.druck-fuss{display:none}
@media print{
  @page{size:A4 portrait;margin:14mm 15mm 18mm}
  @page{@bottom-right{content:"Seite " counter(page) " von " counter(pages);font:7.5pt "Roboto",Arial,sans-serif;color:#5f6b75;vertical-align:top;padding-top:5.2mm}}
  html,body{background:#fff!important}
  body{font-size:9.5pt;line-height:1.4;color:var(--text);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kopf,.held,.held-seite,.vorschau-leiste,.banner,.ecls,.fuss,#kursende,#ort,#hotels,#newsletter,.nl-dialog,#unterstuetzer,.tagreiter,.prog-druck,
  .prog-jetzt,.prog-stand,.skip,.logos,.ses-jetzt,details.sess-d,.quiz-app,.quiz-block .hinweis{display:none!important}
  .quiz-block .quiz-druck{display:block!important}
  *{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  a{color:inherit;text-decoration:none}
  .block{padding:0}.block-in{padding:0;max-width:none}
  .druck-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm;
    padding:0 0 3.5mm;margin:0 0 5mm;border-bottom:.75pt solid var(--blau)}
  .dk-text p{margin:0}
  .dk-marke{font-size:8pt;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
  .dk-marke .marke-rot{color:var(--rot)}.dk-marke .marke-blau{color:var(--blau)}
  .dk-titel{font-size:17pt;font-weight:500;line-height:1.2;margin:1.5mm 0 1mm!important}
  .dk-meta{font-size:10pt;color:var(--grau)}
  .dk-logos{width:38mm;height:auto;flex:none}
  .druck-fuss{display:flex;justify-content:space-between;gap:6mm;position:fixed;left:0;right:0;bottom:0;background:#fff;
    padding-top:1.5mm;border-top:.5pt solid #b9cde3;font-size:7.5pt;color:var(--grau)}
  .h-blau{color:var(--blau);font-size:13pt;font-weight:500;margin:0 0 2mm}
  .prog-kopf{margin:0}
  .hinweis{background:none;border-left:1.5pt solid var(--blau);padding:1mm 3mm;font-size:8.5pt}
  .legende{font-size:7.5pt;gap:1mm 5mm;margin:0 0 4mm}
  .art-punkt{width:7pt;height:7pt;border-radius:1.5pt}
  .programm.js-tage .tag{display:block!important}
  .programm .tag{margin:0;break-before:page}
  .programm .tag:first-of-type{break-before:auto}
  .programm .tag-h{margin:0 0 1mm;padding:0 0 1.5mm;border-bottom:.5pt solid #b9cde3;font-size:12pt;font-weight:500;
    color:var(--blau);break-after:avoid}
  .programm .tag-h span{background:none;color:var(--blau);border:.75pt solid var(--blau);border-radius:3pt;padding:0 4pt;font-size:8pt}
  .zeitleiste{margin:0}
  .zl-slot{grid-template-columns:13mm 1fr;gap:0 3mm;border-bottom:.5pt solid var(--linie);break-inside:avoid;page-break-inside:avoid}
  .zl-slot::before,.ses::before{display:none!important}
  .zl-zeit{padding:2.2mm 0 0;text-align:left;color:var(--blau)}
  .zl-zeit time{font-size:10pt}
  .zl-inhalt{padding:1.8mm 0;gap:1.5mm}
  .zl-par .zl-inhalt{grid-template-columns:1fr 1fr;gap:1.5mm 5mm}
  .ses,.zl-pause .ses{background:#fff!important;border:0;border-left:1.5pt solid var(--art);border-radius:0;padding:0 0 0 3mm;break-inside:avoid}
  .ses-meta{margin:0 0 .5mm;font-size:7.5pt;gap:1mm 3mm}
  .ses-art{font-size:7pt}
  .raum-badge{background:none;border:.5pt solid #c3d0dc;padding:0 4pt;font-weight:400}
  .ses-t{font-size:10.5pt;line-height:1.3}
  .ses-ref{font-size:8.5pt;margin-top:.5mm}
  .zl-pause .zl-zeit{color:var(--grau)}
  .zl-pause .ses-t{font-size:9pt}
}

/* Login-Wege + Ihre Daten (1.15) */
.login-wege{display:flex;gap:8px;margin:18px 0 4px;border-bottom:1px solid var(--linie)}
.login-wege a{padding:8px 14px;text-decoration:none;color:var(--grau);border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500}
.login-wege a.on{color:var(--blau);border-bottom-color:var(--blau)}
.daten-karte{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:32px;box-shadow:0 4px 18px rgba(24,29,31,.07)}
.daten-karte .h-blau{font-size:30px;margin-bottom:14px}
.daten-fest{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0 4px}
.daten-fest dt{font-weight:500;color:var(--grau)}.daten-fest dd{margin:0}
.daten-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:22px 0 8px}
.daten-form .feld{display:flex;flex-direction:column;gap:4px}
.daten-form .feld p{margin:0}
.daten-form label{font-weight:500}
.daten-form input{font:inherit;font-size:17px;padding:10px 12px;border:1px solid #b9c3cf;border-radius:8px}
.daten-form input:focus{border-color:var(--blau);outline:3px solid #cfe3f7}
.daten-form .feld-fehler input{border-color:#c0392b;background:#fff8f7}
.feld-meldung{color:#8a1c12;font-size:14px}
.daten-form .btn{grid-column:1/-1;justify-self:start}
.daten-h2{font-size:22px;margin:30px 0 10px}
.daten-email{margin:18px 0 6px;border:1px solid var(--linie);border-radius:10px;padding:12px 16px}
.daten-email summary{cursor:pointer;font-weight:500;color:var(--link)}
.daten-email[open] summary{margin-bottom:6px}
.daten-email .daten-form{margin-top:12px}
.daten-email-hinweis{grid-column:1/-1;margin:0}
.tabelle-rahmen{overflow-x:auto}
.daten-rechnungen{width:100%;border-collapse:collapse;font-size:15px}
.daten-rechnungen th,.daten-rechnungen td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.daten-rechnungen .r{text-align:right;white-space:nowrap}
.daten-abmelden{margin:24px 0 0}
.daten-abmelden .btn-text{color:var(--link)}
@media (max-width:640px){.daten-form{grid-template-columns:1fr}.daten-karte,.login-karte{padding:20px}}