/* LÖWE Digital Consulting — Gruppen-Look wie Löwe Brands (Navy/Rot, Archivo lokal — DSGVO,
   kein Google-Fonts-CDN). Teil 1: Landing + Unterseiten · Teil 2: Kundenbereich /app ·
   Teil 3: Bericht. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('assets/fonts/archivo-var-latin.woff2') format('woff2');
}

:root{
  --ink:#12002f;          /* Löwe-Navy */
  --ink-deep:#0c001f;
  --flame:#e73925;        /* Löwe-Rot */
  --flame-hot:#ff6a4d;
  --paper:#ffffff;
  --mist:#f5f4fa;
  --muted:#6b6880;
  --line:#e6e4f0;
  --ok:#1d7a3e;   --ok-bg:#eaf7ef;
  --warn:#9a5b00; --warn-bg:#fff4dd;
  --bad:#b4231a;  --bad-bg:#fdecea;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Archivo",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:4px}

/* ---------- Hinweisleiste (Stichtag) ---------- */
.topbar{background:var(--ink-deep);color:#cfc9e6;font-size:.88rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:8px 16px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar b{color:#fff;font-weight:700}
.topbar a:hover b{color:var(--flame-hot)}
.topbar .dot{color:var(--flame-hot)}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:36px;min-height:74px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{display:block;height:30px;width:auto}
.logo-zusatz{font-weight:700;font-size:.72rem;line-height:1.05;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);border-left:2px solid var(--line);padding-left:12px}
nav.main{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:.95rem}
nav.main a{padding:6px 2px;border-bottom:2px solid transparent}
nav.main a:hover{border-color:var(--flame)}
.btn{
  display:inline-block;background:var(--flame);color:#fff;font-weight:700;
  padding:13px 26px;border:0;border-radius:10px;cursor:pointer;font-size:1rem;font-family:inherit;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .2s, transform .15s;text-align:center;
}
.btn:hover{background:#d93d24}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn.aus{background:#c9c5d8;cursor:not-allowed}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);clip-path:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.08)}
.btn.ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);clip-path:none}
.btn.ghost-dark:hover{background:var(--ink);color:#fff}
.btn.klein{padding:8px 16px;font-size:.9rem}
.btn.leise{background:var(--mist);color:var(--ink);clip-path:none}
.btn.leise:hover{background:var(--line)}
header .btn{margin-left:8px;padding:11px 22px}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%,rgba(231,57,37,.28),transparent 45%),
    linear-gradient(100deg,var(--ink) 0%,#1d0748 60%,#2a0c5e 100%);
}
.hero .wrap{padding:104px 24px 150px;position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:14px;font-weight:600;color:#e8e4f7;opacity:0;animation:rise .7s .1s forwards}
.eyebrow::before{content:"";width:56px;height:2px;background:var(--flame-hot)}
.hero h1{
  font-size:clamp(1.5rem,5.4vw,4rem);font-weight:900;line-height:1.04;
  font-variation-settings:"wdth" 112;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto;
  margin:18px 0 22px;max-width:20ch;letter-spacing:-.01em;opacity:0;animation:rise .7s .25s forwards;
}
.hero p.lead{font-size:1.15rem;max-width:56ch;color:#ddd8ee;opacity:0;animation:rise .7s .4s forwards}
.hero .cta-row{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;opacity:0;animation:rise .7s .55s forwards}
.hero .wedge{
  position:absolute;right:-140px;bottom:-170px;width:580px;height:580px;
  background:linear-gradient(135deg,var(--flame),var(--flame-hot));
  clip-path:polygon(100% 0,100% 100%,0 100%);transform:rotate(8deg);opacity:.92;
}
.hero.klein .wrap{padding:84px 24px 120px}
.hero.klein h1{font-size:clamp(2rem,5vw,3.4rem);max-width:22ch}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .eyebrow,.hero h1,.hero p.lead,.hero .cta-row{animation:none;opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- Abschnitte ---------- */
section.block{padding:96px 0}
section.block.grau{background:var(--mist)}
.kicker{display:flex;align-items:center;gap:14px;font-weight:600;color:var(--flame)}
.kicker::before{content:"";width:44px;height:2px;background:var(--flame)}
h2.title{
  font-size:clamp(1.8rem,4vw,2.7rem);font-weight:900;line-height:1.1;
  font-variation-settings:"wdth" 110;text-transform:uppercase;margin:12px 0 16px;
}
p.sub{color:var(--muted);max-width:64ch;font-size:1.05rem}
.raster-2,.raster-3,.raster-4{display:grid;gap:26px;margin-top:48px}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}

/* Problem-Karten */
.karte{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;border-top:4px solid var(--flame)}
.karte h3{font-size:1.08rem;font-weight:800;margin-bottom:8px}
.karte p{color:var(--muted);font-size:.96rem}

/* Perspektivwechsel */
.reframe-liste{counter-reset:rf;display:grid;gap:18px;margin-top:44px;max-width:900px}
.reframe{position:relative;padding:24px 26px 24px 84px;background:var(--mist);border-radius:var(--radius)}
.reframe::before{counter-increment:rf;content:counter(rf,decimal-leading-zero);position:absolute;left:24px;top:20px;font-weight:900;font-size:1.8rem;color:var(--flame);font-variation-settings:"wdth" 112}
.reframe h3{font-size:1.12rem;font-weight:800;margin-bottom:6px}
.reframe p{color:var(--muted)}

/* Leistungen / Belege */
.leistung,.grund{
  background:var(--mist);border-radius:var(--radius);padding:30px 26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
section.grau .leistung,section.grau .grund{background:#fff}
.leistung .ico,.grund .ico{
  width:50px;height:50px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--flame),var(--flame-hot));
  display:grid;place-items:center;color:#fff;font-size:1.3rem;font-weight:900;
}
.leistung h3,.grund h3{font-size:1.14rem;font-weight:800;margin-bottom:8px}
.leistung p,.grund p{color:var(--muted);font-size:.97rem}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;counter-reset:step}
.step{position:relative;padding:26px 22px;background:var(--mist);border-radius:var(--radius)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-weight:900;font-size:1.9rem;color:var(--flame);font-variation-settings:"wdth" 112;display:block;margin-bottom:10px}
.step h3{font-size:1.05rem;font-weight:800;margin-bottom:6px}
.step p{color:var(--muted);font-size:.94rem}

/* Vorher / Nachher */
.vorher,.nachher{border-radius:var(--radius);padding:30px 28px}
.vorher{background:#fff;border:1px dashed #c9c5d8}
.nachher{background:var(--ink);color:#fff}
.vorher .marke,.nachher .marke{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.vorher .marke{color:var(--muted)}
.nachher .marke{color:var(--flame-hot)}
.vorher h3,.nachher h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.vorher p{color:var(--muted)}
.nachher p{color:#ddd8ee}

/* Produktkarten */
.produktkarte{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.produktkarte h3{font-size:1.3rem;font-weight:900;font-variation-settings:"wdth" 108;text-transform:uppercase}
.produktkarte .price{font-weight:800;color:var(--flame);font-size:1.05rem}
.produktkarte .price small{color:var(--muted);font-weight:500}
.produktkarte p{color:var(--muted)}
.produktkarte ul,.paket ul{list-style:none;display:grid;gap:6px;font-size:.94rem;margin:4px 0 8px}
.produktkarte ul li,.paket ul li{position:relative;padding-left:22px}
.produktkarte ul li::before,.paket ul li::before{content:"✓";color:var(--flame);font-weight:900;position:absolute;left:0}
.produktkarte .btn{align-self:flex-start;margin-top:auto}
.badge{display:inline-block;align-self:flex-start;background:var(--flame);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* Pakete */
.pakete{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.paket{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:8px}
.paket h3{font-size:1.1rem;font-weight:800}
.paket .betrag{font-size:2rem;font-weight:900;font-variation-settings:"wdth" 110;color:var(--ink)}
.paket .umfang{font-weight:700;color:var(--flame)}
.paket p{color:var(--muted);font-size:.93rem}
.paket .btn{margin-top:auto}
.paket .badge{position:absolute;top:-12px;left:22px}
.paket-tipp{border:2px solid var(--flame)}
.paket-test{background:var(--mist)}
.pakete-fuss{margin-top:18px;color:var(--muted);font-size:.9rem}
.pakete-fuss a{color:var(--flame);text-decoration:underline}

/* Hinweis- und Quellenboxen */
.hinweis{background:var(--mist);border-left:4px solid var(--flame);border-radius:10px;padding:18px 22px;margin-top:26px}
.hinweis p{margin:0 0 8px}
.hinweis p:last-child{margin:0}
.quellen{margin-top:22px;font-size:.85rem;color:var(--muted)}
.quellen a{text-decoration:underline}
.risiko{margin-top:28px;padding:18px 22px;border:1.5px solid rgba(255,255,255,.25);border-radius:12px}
.risiko strong{display:block;margin-bottom:4px}
.risiko p{color:#cfc9e6;font-size:.95rem}
.prosa{max-width:760px}
.prosa p{margin:0 0 14px}
.prosa ul{margin:0 0 14px;padding-left:22px}
.prosa li{margin-bottom:6px}
.prosa a{color:var(--flame);text-decoration:underline}
.liste-check{list-style:none;padding:0 !important}
.liste-check li{position:relative;padding-left:26px}
.liste-check li::before{content:"✓";color:var(--flame);font-weight:900;position:absolute;left:0}

/* Tabellen in Markdown */
.table-responsive{overflow-x:auto;margin:22px 0}
table.table{border-collapse:collapse;width:100%;font-size:.95rem;background:#fff}
table.table th,table.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.table th{background:var(--mist);font-weight:800}

/* FAQ */
.faq{display:grid;gap:12px;margin-top:40px;max-width:900px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;font-weight:800;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--flame);font-weight:900;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq-a{color:var(--muted);padding:0 0 18px}
.faq-a p{margin:0 0 10px}

/* Berichtsmuster auf der Produktseite */
.muster{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(12,6,32,.12);padding:28px;max-width:640px}
.muster .muster-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.muster .muster-label{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muster .muster-score{font-size:2.6rem;font-weight:900;color:var(--warn)}
.muster table{width:100%;border-collapse:collapse;font-size:.92rem}
.muster td{padding:7px 0;border-bottom:1px solid var(--line)}
.muster td:last-child{text-align:right;font-weight:800}
.muster-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:44px}

/* ---------- Kontakt (ACTION) ---------- */
.order{background:var(--ink);color:#fff;clip-path:polygon(0 0,100% 34px,100% 100%,0 100%)}
.order .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;padding:122px 24px 100px}
.order .kicker{color:var(--flame-hot)}
.order .kicker::before{background:var(--flame-hot)}
.order p.sub{color:#cfc9e6}
.order ul.perks{margin-top:26px;list-style:none;display:grid;gap:12px}
.order ul.perks li{position:relative;padding-left:26px;color:#e6e2f5}
.order ul.perks li::before{content:"✓";color:var(--flame-hot);font-weight:900;position:absolute;left:0}
form.panel{background:#fff;color:var(--ink);border-radius:16px;padding:34px 30px;display:grid;gap:16px;box-shadow:0 24px 60px rgba(12,6,32,.35)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-weight:700;font-size:.88rem;display:grid;gap:6px}
input,select,textarea{
  font-family:inherit;font-size:1rem;padding:11px 13px;width:100%;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--flame)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--flame)}
textarea{resize:vertical;min-height:96px}
.consent{font-weight:400;font-size:.85rem;color:var(--muted)}
.consent a{text-decoration:underline}
.success{background:var(--ok-bg);border:1.5px solid #bfe8cb;color:var(--ok);border-radius:10px;padding:14px 16px;font-weight:600}
.fehlerbox{background:var(--bad-bg);border:1.5px solid #f3c2bd;color:var(--bad);border-radius:10px;padding:14px 16px;font-weight:600}
.feldfehler{color:var(--bad);font-weight:600;font-size:.82rem}
[aria-invalid=true]{border-color:var(--bad)}

/* ---------- Rechtsseiten ---------- */
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:900;font-variation-settings:"wdth" 110;text-transform:uppercase;margin-bottom:28px}
.legal h3{font-size:1.15rem;font-weight:800;margin:34px 0 10px}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal a{color:var(--flame);text-decoration:underline}

/* ---------- Footer ---------- */
footer{background:var(--ink-deep);color:#a79fca;font-size:.9rem}
footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:36px 24px}
footer a:hover{color:#fff}
.foot-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}
.foot-logo img{height:22px;width:auto}
.foot-group a{text-decoration:underline}

/* ===================================================================
   Teil 2 — Kundenbereich /app und Anmeldung
   =================================================================== */
body.intern{background:var(--mist)}
.app{padding:48px 0 90px}
.app-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.app-kopf h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;font-variation-settings:"wdth" 110;text-transform:uppercase;line-height:1.1}
.app-kopf .kicker{margin-bottom:6px}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:28px;flex-wrap:wrap}
.tabs a{padding:10px 16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a:hover{color:var(--ink)}
.tabs a.aktiv{color:var(--ink);border-color:var(--flame)}
.tabs .rechts{margin-left:auto}
.karte-app{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px;margin-bottom:22px}
.karte-app h2{font-size:1.2rem;font-weight:800;margin-bottom:10px}
.karte-app h3{font-size:1.02rem;font-weight:800;margin:14px 0 6px}
.karte-app p{margin:0 0 10px}
.dash-meta{color:var(--muted);font-size:.92rem}
.link,.dash-meta a,.karte-app p a{color:var(--flame);text-decoration:underline}
.flash{background:var(--ok-bg);border:1.5px solid #bfe8cb;color:var(--ok);border-radius:10px;padding:12px 16px;font-weight:600;margin-bottom:20px}
.leer{text-align:center;padding:46px 20px}
.leer p{color:var(--muted);margin-bottom:18px}
.aktionen{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.aktionen form{display:inline}

/* Schritte 1–4 */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px;list-style:none}
.schritte li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700;font-size:.9rem;color:var(--muted);display:flex;gap:10px;align-items:center}
.schritte li span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mist);font-size:.82rem;flex-shrink:0}
.schritte li.aktiv{border-color:var(--flame);color:var(--ink)}
.schritte li.aktiv span{background:var(--flame);color:#fff}
.schritte li.erledigt span{background:var(--ink);color:#fff}

/* Tabellen im Kundenbereich: Button rechts, alles sortierbar (assets/ld.js) */
.tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.tabelle th,.tabelle td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabelle th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tabelle th[data-sort]{cursor:pointer;user-select:none}
.tabelle th[data-sort]::after{content:" ↕";opacity:.35}
.tabelle th.auf::after{content:" ↑";opacity:1}
.tabelle th.ab::after{content:" ↓";opacity:1}
.tabelle td.rechts,.tabelle th.rechts{text-align:right;white-space:nowrap}
.tabelle-scroll{overflow-x:auto}
.status{display:inline-block;font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--mist);white-space:nowrap}
.status.fertig{background:var(--ok-bg);color:var(--ok)}
.status.offen{background:var(--warn-bg);color:var(--warn)}
.status.fehler{background:var(--bad-bg);color:var(--bad)}

/* Auswahl neue Prüfung */
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wahl .karte-app{display:flex;flex-direction:column;gap:8px;margin:0}
.wahl .karte-app .btn{align-self:flex-start;margin-top:auto}
.wahl .preis{font-size:1.6rem;font-weight:900;color:var(--flame)}

/* Mitarbeiterliste */
.ma-tabelle{width:100%;border-collapse:collapse;font-size:.92rem;min-width:1120px}
.ma-tabelle th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:8px 6px;vertical-align:bottom}
.ma-tabelle td{padding:5px 6px;border-top:1px solid var(--line);vertical-align:middle}
.ma-tabelle td.mitte,.ma-tabelle th.mitte{text-align:center}
.ma-tabelle input[type=text]{padding:8px 10px;font-size:.92rem}
.ma-tabelle select{padding:8px 8px;font-size:.88rem}
.ma-tabelle td:nth-child(1),.ma-tabelle td:nth-child(2){min-width:170px}
.ma-tabelle td:nth-child(3){width:110px}
.ma-tabelle td:nth-child(4){min-width:250px}
.ma-weg{background:none;border:0;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:4px 8px}
.ma-weg:hover{color:var(--bad)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.94rem}
.check input{margin-top:4px}
.formular{display:grid;gap:16px;max-width:640px}
.formular .row{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.formular .row.gleich{grid-template-columns:1fr 1fr}

/* Preisbox */
.preisbox{display:grid;gap:6px;max-width:460px;margin:12px 0 18px}
.preisbox div{display:flex;justify-content:space-between;gap:16px}
.preisbox .summe{border-top:2px solid var(--ink);padding-top:8px;font-weight:900;font-size:1.15rem}
.testhinweis{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:12px 16px;font-weight:600;font-size:.92rem;margin:10px 0}

/* Upload */
.ablage{border:2.5px dashed #c9c5d8;border-radius:16px;background:#fff;padding:44px 24px;text-align:center;transition:border-color .2s,background .2s}
.ablage.drueber{border-color:var(--flame);background:#fff7f5}
.ablage h2{font-size:1.25rem;font-weight:800;margin-bottom:6px}
.ablage p{color:var(--muted);margin-bottom:16px}
.ablage .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ablage input[type=file]{display:none}
.fortschritt{height:10px;background:var(--line);border-radius:999px;overflow:hidden;margin:14px 0 6px}
.fortschritt div{height:100%;background:linear-gradient(90deg,var(--flame),var(--flame-hot));width:0;transition:width .3s}
.dateiliste{list-style:none;max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.dateiliste li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:.9rem}
.dateiliste li:last-child{border-bottom:0}
.dateiliste .pfad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dateiliste .fehlt{color:var(--bad)}
.dateiliste .warn{color:var(--warn);font-size:.82rem}
.dateiliste button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}
.dateiliste button:hover{color:var(--bad)}
.tipp{font-size:.9rem;color:var(--muted)}
.tipp code{background:var(--mist);padding:1px 6px;border-radius:5px}
.laeuft{text-align:center;padding:50px 20px}
.laeuft .kreis{width:54px;height:54px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--flame);animation:dreh 1s linear infinite;margin:0 auto 18px}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Rückfrage-Fenster (assets/ld.js) */
.modal-hg{position:fixed;inset:0;background:rgba(12,0,31,.55);display:grid;place-items:center;z-index:100;padding:16px}
.modal{background:#fff;border-radius:16px;padding:26px 26px 22px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(12,6,32,.35)}
.modal p{font-weight:600;margin-bottom:6px}

/* Anmeldung (useraccounts-Overrides) */
.auth{max-width:460px;margin:0 auto}
.auth .karte-app{padding:32px 30px}
.auth h1{font-size:1.6rem;font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 110;margin-bottom:6px}
.auth form{display:grid;gap:14px;margin-top:16px}
.auth .links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem}
.auth .links a{color:var(--flame);text-decoration:underline}

/* ===================================================================
   Teil 3 — Bericht (Ansicht + PDF teilen sich das Markup)
   =================================================================== */
.bericht{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 34px}
.b-kopf{display:flex;gap:30px;align-items:center;margin-bottom:26px}
.b-score{flex-shrink:0;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;border:10px solid var(--line)}
.b-score strong{display:block;font-size:2.4rem;font-weight:900;line-height:1}
.b-score span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.b-score.gut{border-color:var(--ok)}  .b-score.gut strong{color:var(--ok)}
.b-score.mittel{border-color:#e9a23b} .b-score.mittel strong{color:var(--warn)}
.b-score.schlecht{border-color:var(--bad)} .b-score.schlecht strong{color:var(--bad)}
.b-titel h2{font-size:1.5rem;font-weight:900;text-transform:uppercase;font-variation-settings:"wdth" 110;line-height:1.15}
.b-titel p{color:var(--muted)}
.b-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 30px}
.b-zahlen div{background:var(--mist);border-radius:12px;padding:14px 16px}
.b-zahlen strong{display:block;font-size:1.6rem;font-weight:900}
.b-zahlen span{font-size:.85rem;color:var(--muted)}
.bericht h3{font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin:30px 0 12px}
.b-todo{list-style:none;display:grid;gap:8px}
.b-todo li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.95rem}
.b-person{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;break-inside:avoid}
.b-person-kopf{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;background:var(--mist);border-radius:12px 12px 0 0;flex-wrap:wrap}
.b-person-kopf strong{font-size:1.02rem}
.b-person-kopf span{font-size:.85rem;color:var(--muted)}
.b-tabelle{width:100%;border-collapse:collapse;font-size:.9rem}
.b-tabelle td{padding:9px 16px;border-top:1px solid var(--line);vertical-align:top}
.b-tabelle td.ico{width:34px;font-size:1.05rem}
.b-tabelle .norm{display:block;color:var(--muted);font-size:.78rem}
.b-tabelle .hw{color:var(--muted);font-size:.86rem}
.b-tabelle .fund{color:var(--muted);font-size:.8rem;word-break:break-all}
.i-ok{color:var(--ok)} .i-pruefen{color:var(--warn)} .i-fehlt{color:var(--bad)}
.b-weitere{padding:8px 16px 12px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line)}
.b-fuss{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.b-fuss p{margin:0 0 6px}
.b-attrappe{background:var(--warn-bg);color:var(--warn);padding:10px 14px;border-radius:10px;font-weight:700;font-size:.88rem;margin-bottom:18px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .raster-3,.raster-4,.pakete{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .order .wrap,.muster-split{grid-template-columns:1fr;gap:44px}
  .order .wrap{padding-top:96px}
  nav.main{display:none}
  .b-zahlen{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  header.site .wrap{gap:12px;min-height:64px}
  .logo img{height:24px}
  .logo-zusatz{font-size:.62rem;padding-left:8px}
  header .btn{margin-left:auto;padding:9px 15px;font-size:.9rem}
  .raster-2,.raster-3,.raster-4,.pakete,.wahl{grid-template-columns:1fr}
  .b-kopf{flex-direction:column;align-items:flex-start}
  .formular .row,.formular .row.gleich{grid-template-columns:1fr}
}
@media (max-width:560px){
  form .row{grid-template-columns:1fr}
  .hero .wrap{padding:76px 20px 130px}
  .bericht,.karte-app{padding:22px 18px}
  .schritte{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* lange Großbuchstaben-Wörter („Zettelwirtschaft") müssen ins Handy passen */
  .hero h1,.hero.klein h1{font-size:clamp(1.25rem,6.3vw,2.2rem);font-variation-settings:"wdth" 100}
  h2.title{font-size:clamp(1.3rem,6.4vw,1.9rem);overflow-wrap:break-word;hyphens:auto}
}
@media (max-width:430px){
  .wrap{padding:0 16px}
  .logo-zusatz{font-size:.56rem;letter-spacing:.1em}
}

/* Drucken (Bericht über den Browser) */
@media print{
  .topbar,header.site,footer,.tabs,.aktionen,.app-kopf .btn,.flash{display:none !important}
  body.intern{background:#fff}
  .app{padding:0}
  .bericht{border:0;padding:0}
}