/* =========================================================================
   BauPilot 2.0 – gemeinsames Designsystem (Etappe 0.11)
   Eine Quelle für Kern (Start, Anmeldung, Verwaltung), Webportal und CRM.
   Konzept: https://claude.ai/artifact/QsdrHHN4iM91TJd2vEtQws
   Blau = Struktur & Navigation · Gold = die eine Hauptaktion & Akzent
   Schriften lokal (keine Abrufe bei Google): Inter, Plus Jakarta Sans (SIL OFL)
   ========================================================================= */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800.woff2) format("woff2")}

:root{
  /* Blau */
  --bp-blau-900:#0E1B2E; --bp-blau-800:#142640; --bp-blau-700:#1C355A; --bp-blau-600:#24467A;
  --bp-blau-400:#5B7FB8; --bp-blau-200:#C9D6EA; --bp-blau-100:#E8EEF7; --bp-blau-50:#F3F6FB;
  /* Gold */
  --bp-gold-700:#8A6A1F; --bp-gold-600:#A9822F; --bp-gold-500:#C9A24A; --bp-gold-300:#E3C987;
  --bp-gold-100:#F7EFD9; --bp-gold-50:#FBF7EC;
  /* Neutral */
  --bp-weiss:#FFFFFF; --bp-grau-50:#F5F6F8; --bp-grau-100:#EEF0F3; --bp-grau-200:#E2E6EB;
  --bp-grau-400:#9AA4B2; --bp-grau-600:#4B5565; --bp-grau-900:#111827;
  /* Status */
  --bp-ok:#1F7A4F; --bp-ok-hell:#E7F5EE; --bp-ok-text:#14532D;
  --bp-warn:#B26A00; --bp-warn-hell:#FDF3E1; --bp-warn-text:#6B3F00;
  --bp-fehler:#B42318; --bp-fehler-hell:#FCE9E6; --bp-fehler-text:#7A1A12;
  /* Rollen */
  --bp-hintergrund:var(--bp-grau-50); --bp-flaeche:var(--bp-weiss); --bp-rand:var(--bp-grau-200);
  --bp-text:var(--bp-grau-900); --bp-text-leise:var(--bp-grau-600);
  --bp-primaer:var(--bp-blau-800); --bp-akzent:var(--bp-gold-500); --bp-link:var(--bp-blau-600);
  --bp-navigation:var(--bp-blau-900); --bp-navigation-aktiv:var(--bp-blau-700); --bp-navigation-text:#B8C4D6;
  /* Form */
  --bp-radius-feld:10px; --bp-radius-knopf:12px; --bp-radius-karte:20px; --bp-radius-sheet:28px;
  --bp-schatten-ruhe:0 1px 2px rgba(16,24,40,.05);
  --bp-schatten-karte:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
  --bp-schatten-hoch:0 24px 64px rgba(14,27,46,.18);
  --bp-schrift:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bp-schrift-titel:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --bp-ziel:44px; --bp-dauer:.2s;
  color-scheme:light;
}
/* Dunkelmodus (Konzept): wird über data-thema="dunkel" am <html> eingeschaltet */
:root[data-thema="dunkel"]{
  --bp-hintergrund:#0B1424; --bp-flaeche:#13213A; --bp-rand:#22324D; --bp-text:#E6EBF2;
  --bp-text-leise:#A6B2C6; --bp-link:#7FA3DA; --bp-akzent:#D9B968; --bp-primaer:#2B4C7E;
  --bp-grau-50:#0F1B2F; --bp-grau-100:#172741; --bp-grau-200:#22324D; color-scheme:dark;
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body.bp-basis{font-family:var(--bp-schrift);font-size:15px;line-height:1.55;background:var(--bp-hintergrund);color:var(--bp-text);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.bp-basis a{color:var(--bp-link)}
.bp-basis h1,.bp-basis h2,.bp-basis h3{font-family:var(--bp-schrift-titel);color:var(--bp-blau-900);letter-spacing:-.01em}
:root[data-thema="dunkel"] .bp-basis h1,:root[data-thema="dunkel"] .bp-basis h2,:root[data-thema="dunkel"] .bp-basis h3{color:var(--bp-text)}
.bp-basis h1{font-size:1.85rem;font-weight:800;margin:0 0 8px}
.bp-basis h2{font-size:1.2rem;font-weight:700;margin:28px 0 12px}
.leise{color:var(--bp-text-leise)}
:focus-visible{outline:3px solid var(--bp-blau-400);outline-offset:2px}
.zahl{font-variant-numeric:tabular-nums}

/* ---------- Kopfleiste (Kern) ---------- */
.kopf{background:var(--bp-navigation);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:inset 0 -3px 0 var(--bp-akzent)}
.kopf .marke{font-family:var(--bp-schrift-titel);font-weight:800;font-size:1.15rem;text-decoration:none;color:#fff;
  display:flex;align-items:center;gap:10px}
.kopf .marke span{color:var(--bp-gold-300)}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.95rem}
.seite{width:100%;max-width:1120px;margin:0 auto;padding:28px 16px 48px;flex:1}
.seite.schmal{max-width:460px}

/* ---------- Karten ---------- */
.karte{background:var(--bp-flaeche);border:1px solid var(--bp-rand);border-radius:var(--bp-radius-karte);padding:24px;
  box-shadow:var(--bp-schatten-karte)}

/* ---------- Felder ---------- */
.bp-basis label{display:block;font-weight:600;margin:16px 0 6px;font-size:.9rem}
.bp-basis input[type=text],.bp-basis input[type=password],.bp-basis input[type=email],.bp-basis input[type=file],.bp-basis input[inputmode=numeric],.bp-basis select,.bp-basis textarea{
  width:100%;min-height:var(--bp-ziel);padding:10px 12px;font:inherit;border:1px solid var(--bp-rand);
  border-radius:var(--bp-radius-feld);background:var(--bp-flaeche);color:var(--bp-text);
  transition:border-color var(--bp-dauer) ease,box-shadow var(--bp-dauer) ease}
.bp-basis input:focus,.bp-basis select:focus,.bp-basis textarea:focus{outline:none;border-color:var(--bp-blau-600);box-shadow:0 0 0 4px var(--bp-blau-100)}

/* ---------- Knöpfe ---------- */
.knopf,.bp-basis button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--bp-ziel);padding:0 18px;
  font:600 .95rem var(--bp-schrift);border-radius:var(--bp-radius-knopf);border:1px solid transparent;cursor:pointer;
  text-decoration:none;background:var(--bp-primaer);color:#fff;
  transition:transform .15s ease,box-shadow var(--bp-dauer) ease,background-color var(--bp-dauer) ease}
.knopf:hover,.bp-basis button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,27,46,.14)}
.knopf.gold{background:var(--bp-akzent);color:var(--bp-blau-900);box-shadow:0 6px 16px rgba(201,162,74,.30)}
.knopf.leicht,.bp-basis button.leicht{background:var(--bp-flaeche);color:var(--bp-primaer);border-color:var(--bp-rand)}
.knopf.klein,.bp-basis button.klein{min-height:36px;padding:0 12px;font-size:.85rem}
/* Links, die wie Knöpfe aussehen: Linkfarbe darf die Knopffarbe nicht überschreiben (sonst dunkel auf dunkel) */
.bp-basis a.knopf{color:#fff}.bp-basis a.knopf.leicht{color:var(--bp-primaer)}.bp-basis a.knopf.gold{color:var(--bp-blau-900)}
.voll{width:100%;margin-top:24px}

/* ---------- Meldungen ---------- */
.meldung{border-radius:14px;padding:12px 14px;margin:16px 0;display:flex;gap:10px;align-items:flex-start}
.meldung.fehler{background:var(--bp-fehler-hell);color:var(--bp-fehler-text)}
.meldung.ok{background:var(--bp-ok-hell);color:var(--bp-ok-text)}
.meldung.hinweis{background:var(--bp-gold-100);color:#4A3810}

/* ---------- Kacheln (Startbildschirm) ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:24px}
.kachel{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--bp-flaeche);border:1px solid var(--bp-rand);
  border-radius:var(--bp-radius-karte);padding:24px;min-height:168px;box-shadow:var(--bp-schatten-karte);
  transition:transform var(--bp-dauer) ease,box-shadow var(--bp-dauer) ease,border-color var(--bp-dauer) ease;
  animation:bp-rein .45s ease-out both}
.kachel:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(14,27,46,.12);border-color:var(--bp-gold-300)}
.kachel .symbol{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--bp-blau-800);color:var(--bp-akzent)}
.kachel .symbol svg{width:26px;height:26px}
.kachel strong{font-family:var(--bp-schrift-titel);font-size:1.15rem;color:var(--bp-blau-900)}
:root[data-thema="dunkel"] .kachel strong{color:var(--bp-text)}
.kachel span{color:var(--bp-text-leise);font-size:.95rem}
@keyframes bp-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Tabellen (schmal: als Karten) ---------- */
.bp-basis table{width:100%;border-collapse:collapse;background:var(--bp-flaeche);border-radius:var(--bp-radius-karte);overflow:hidden;box-shadow:var(--bp-schatten-ruhe)}
.bp-basis th,.bp-basis td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--bp-grau-100);vertical-align:top}
.bp-basis th{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bp-text-leise);background:var(--bp-flaeche)}
@media (max-width:720px){
  .bp-basis table,.bp-basis thead,.bp-basis tbody,.bp-basis tr,.bp-basis th,.bp-basis td{display:block}
  .bp-basis thead{display:none}
  .bp-basis tr{border:1px solid var(--bp-rand);border-radius:16px;margin-bottom:12px;padding:8px}
  .bp-basis td{border:0;padding:6px 4px}
  .bp-basis td[data-titel]::before{content:attr(data-titel);display:block;font-size:.75rem;color:var(--bp-text-leise)}
}

/* ---------- Plaketten ---------- */
.plakette,.marke-rolle{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--bp-blau-100);color:var(--bp-blau-800)}
.marke-rolle{background:var(--bp-gold-100);color:#4A3810;margin:2px 4px 2px 0}
.plakette.ok{background:var(--bp-ok-hell);color:var(--bp-ok-text)}
.plakette.warn{background:var(--bp-warn-hell);color:var(--bp-warn-text)}
.plakette.fehler{background:var(--bp-fehler-hell);color:var(--bp-fehler-text)}
.status-aus{color:var(--bp-fehler);font-weight:600}

/* ---------- Kleinteile ---------- */
.zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.auswahl{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0}
.auswahl label{font-weight:400;margin:0;display:flex;align-items:center;gap:6px;min-height:36px}
.qr{background:#fff;padding:12px;border-radius:12px;width:220px;height:220px;margin:16px auto}
.qr svg{width:100%;height:100%}
.codes{columns:2;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;padding-left:20px}
code.geheim{word-break:break-all;font-size:1rem}
.bp-basis details{margin-top:12px}
.bp-basis summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-weight:600}

/* Marke (René, 2026-11-12): oben überall „BauPilot – powered by derbauexperte.com“ als Logo-Datei */
img.bp-logo{display:block;height:44px;width:auto;max-width:100%}
.bp-modul{display:inline-block;font:700 11px var(--bp-schrift);letter-spacing:.08em;text-transform:uppercase;color:var(--bp-gold-300);
  border:1px solid rgba(201,162,74,.45);border-radius:999px;padding:3px 9px;margin-top:6px;white-space:nowrap}
.bp-modul.hell{color:var(--bp-gold-700);border-color:var(--bp-gold-300)}
.kopf .marke img.bp-logo{height:38px}
.crm-kopf-marke img.bp-logo{height:32px}
.crm-marke,.brand{flex-direction:column;align-items:flex-start!important;gap:4px!important}
.crm-kopf-marke{display:flex;align-items:center;gap:10px;text-decoration:none}
.portal .firma{flex-direction:row;align-items:center;gap:12px}
.portal .firma img.bp-logo{height:42px;background:none;padding:0;border-radius:0;max-width:none}
@media(max-width:640px){.portal .firma img.bp-logo{height:34px}.portal .firma .bp-modul{display:none}}
/* Abmelden in der dunklen Kopfzeile war weiß auf weiß */
.kopf .rechts button.leicht{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.kopf .rechts button.leicht:hover{background:rgba(255,255,255,.1)}
.kopf .rechts a.knopf.leicht,.bp-basis .kopf .rechts a.knopf.leicht{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.kopf .rechts a.knopf.leicht:hover{background:rgba(255,255,255,.1)}