/* HKE Energieausweis — Theme, ausgerichtet am HKE-Landingpage-Design-System
   (hke-lausitz-landingpage.vercel.app, extrahiert 2026-07-04): Petrol/Sand/Ink-Paletten,
   Outfit (Display) + Inter (Body), 8px-Button-Radius, weiße Karten auf Sand.
   ALLE Markenwerte leben in :root — Brand-Book-Tausch = nur diese Variablen. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Paletten 1:1 aus dem HKE-Landingpage-System */
  --hke-petrol-900: #155E60; --hke-petrol-800: #1F7A7C; --hke-petrol-700: #2D9598;
  --hke-petrol-600: #3FB1B4; --hke-petrol-500: #5BCDD0; --hke-petrol-300: #7FCBCD;
  --hke-petrol-200: #A8DCDD; --hke-petrol-100: #D2EEEE; --hke-petrol-050: #EAF6F6;
  --hke-sand-050: #FBF8F3; --hke-sand-100: #F6F1EA; --hke-sand-200: #ECE4D6; --hke-sand-300: #DCD2C0;
  --hke-ink-900: #1A1A1A; --hke-ink-700: #3B3B3B; --hke-ink-500: #6B6B6B;
  --hke-ink-400: #8E8E8E; --hke-ink-300: #B5B5B5; --hke-ink-200: #D6D4D0; --hke-ink-100: #E8E5DE;

  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Semantik (Landingpage-Werte) */
  --ok: #2F7A55;
  --warnung: #C28C2B;
  --fehler: #B33A2B;
  --info: var(--hke-petrol-700);

  /* Rollen */
  --primaer: var(--hke-petrol-700);
  --primaer-dunkel: var(--hke-petrol-800);
  --primaer-tiefe: var(--hke-petrol-900);
  --flaeche: var(--hke-sand-100);
  --karte: #ffffff;
  --linie: var(--hke-ink-100);
  --text: var(--hke-ink-900);
  --text-leise: var(--hke-ink-500);
  --text-invers: var(--hke-sand-100);

  --radius: 8px;
  --radius-gross: 14px;
  --schatten-1: 0 1px 0 rgba(26,26,26,.04), 0 1px 2px rgba(26,26,26,.04);
  --schatten-2: 0 1px 2px rgba(26,26,26,.05), 0 4px 12px rgba(26,26,26,.06);
  --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 1rem;
  --abstand-4: 1.5rem; --abstand-5: 2.5rem;

  /* Kompatibilitäts-Aliase (aeltere Regeln) */
  --hke-primaer: var(--primaer);
  --hke-primaer-dunkel: var(--primaer-dunkel);
  --schatten: var(--schatten-1);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--flaeche);
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--abstand-3); color: var(--primaer-tiefe); }
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 var(--abstand-3); max-width: 65ch; }

a { color: var(--primaer); }
a:visited { color: var(--primaer-dunkel); }
code { overflow-wrap: anywhere; }

/* Eyebrow-Label (Landingpage-Muster: CAPS, Petrol, Letterspacing) */
.eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--primaer);
  display: block; margin-bottom: var(--abstand-2);
}

/* Kopf */
.kopf {
  background: var(--hke-sand-050);
  border-bottom: 1px solid var(--hke-sand-200);
  padding: var(--abstand-2) var(--abstand-4);
  display: flex; align-items: center; gap: var(--abstand-4);
}
.kopf .marke {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--primaer-tiefe); text-decoration: none; letter-spacing: 0.005em;
  display: flex; align-items: center; gap: 0.55rem;
}
.kopf .marke img { display: block; }
.kopf nav { display: flex; gap: var(--abstand-2); flex: 1; }
.kopf nav a {
  text-decoration: none; color: var(--hke-ink-700); font-size: 0.95rem;
  padding: var(--abstand-1) var(--abstand-2); border-radius: var(--radius);
}
.kopf nav a.aktiv { color: var(--primaer); font-weight: 600; }
.kopf nav a:hover { color: var(--primaer); background: var(--hke-petrol-050); }
.kopf .nutzer { color: var(--text-leise); font-size: 0.9rem; display: flex; align-items: center; gap: var(--abstand-2); white-space: nowrap; }

/* Sandbox-Banner (Plan §5: in test deutlich sichtbar) */
.sandbox-banner {
  background: repeating-linear-gradient(45deg, #f7ead0, #f7ead0 12px, #f0dcb2 12px, #f0dcb2 24px);
  color: #6b4d0f; text-align: center; font-weight: 600;
  padding: var(--abstand-1) var(--abstand-3);
  border-bottom: 1px solid #e0c890;
  font-size: 0.9rem;
}

main { max-width: 960px; margin: 0 auto; padding: var(--abstand-4) var(--abstand-3) var(--abstand-5); }
main.schmal { max-width: 640px; }

/* Karten & Tabellen */
.karte {
  background: var(--karte); border: 1px solid var(--hke-sand-200);
  border-radius: var(--radius-gross); box-shadow: var(--schatten-2);
  padding: var(--abstand-4);
}
table { width: 100%; border-collapse: collapse; background: var(--karte); }
th, td { text-align: left; padding: var(--abstand-2) var(--abstand-3); border-bottom: 1px solid var(--linie); }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-leise); font-weight: 600; }
td.zahl, th.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: var(--hke-petrol-050); }

/* Status-Pillen (petrol-/sand-harmonisiert) */
.status {
  display: inline-block; padding: 0.12rem 0.65rem; border-radius: 99px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.status-ENTWURF { background: var(--hke-sand-200); color: var(--hke-ink-700); }
.status-EINGEREICHT { background: var(--hke-petrol-100); color: var(--hke-petrol-900); }
.status-IN_PRUEFUNG { background: #f5e6c8; color: #7a5a14; }
.status-BEREIT { background: var(--hke-petrol-700); color: #fff; }
.status-BESTELLT { background: var(--hke-petrol-050); color: var(--hke-petrol-800); box-shadow: inset 0 0 0 1px var(--hke-petrol-300); }
.status-AUSGESTELLT { background: #ddefe5; color: var(--ok); }
.status-ABGESCHLOSSEN { background: #ddefe5; color: #1d5138; }
.status-ABGELEHNT, .status-STORNIERT { background: #f6ded9; color: var(--fehler); }

/* Filter-Chips (Cockpit-Liste): neutral, nur aktiver Filter farbig */
.filter-leiste { display: flex; gap: var(--abstand-1); flex-wrap: wrap; align-items: baseline; margin-bottom: var(--abstand-3); }
.filter-leiste .label { font-size: 0.85rem; color: var(--text-leise); margin-right: var(--abstand-1); }
.filter-chip {
  display: inline-block; padding: 0.15rem 0.7rem; border-radius: 99px;
  font-size: 0.85rem; text-decoration: none; color: var(--hke-ink-700);
  background: var(--karte); box-shadow: inset 0 0 0 1px var(--hke-ink-200);
}
.filter-chip:hover { box-shadow: inset 0 0 0 1px var(--primaer); color: var(--primaer); }
.filter-chip.aktiv { background: var(--primaer); color: #fff; box-shadow: none; font-weight: 600; }
.filter-chip, .filter-chip:visited { color: var(--hke-ink-700); }
.filter-chip.aktiv, .filter-chip.aktiv:visited { color: #fff; }

/* Formulare */
.form-zeile { display: grid; gap: 0.75rem; }
.form-zeile-2 { grid-template-columns: 1fr 1fr; }
.form-zeile-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-zeile-strasse { grid-template-columns: 3fr 1fr; }
.form-zeile-plz { grid-template-columns: 1fr 3fr; }
label { display: block; font-weight: 600; margin-bottom: var(--abstand-1); }
.feld { margin-bottom: var(--abstand-3); }
.feld .hilfe { font-size: 0.85rem; color: var(--text-leise); margin-top: var(--abstand-1); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="password"], select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit;
  border: 1px solid var(--hke-ink-200); border-radius: var(--radius);
  background: var(--karte); color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primaer); outline-offset: 1px;
}
input[aria-invalid="true"], .feld.fehlerhaft input { border-color: var(--fehler); }
.feld .fehlertext { color: var(--fehler); font-size: 0.85rem; margin-top: var(--abstand-1); }

/* Buttons (Landingpage: 8px Radius, Petrol-700, Sand-Text, Inter 600) */
button, .btn {
  display: inline-block; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 0.6rem 1.4rem; text-decoration: none;
}
.btn-primaer { background: var(--primaer); color: var(--text-invers); }
.btn-primaer:hover { background: var(--primaer-dunkel); }
.btn-sekundaer { background: var(--karte); color: var(--primaer); border-color: var(--hke-petrol-300); }
.btn-sekundaer:hover { background: var(--hke-petrol-050); }
.btn-gefahr { background: var(--fehler); color: #fff; }
.btn-klein { padding: 0.25rem 0.6rem; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Meldungen */
.meldung { padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius); margin-bottom: var(--abstand-3); }
.meldung-fehler { background: #f9e8e4; color: var(--fehler); border: 1px solid #ecc5bd; }
.meldung-ok { background: #e4f1ea; color: var(--ok); border: 1px solid #c4dfd0; }
.meldung-info { background: var(--hke-petrol-050); color: var(--hke-petrol-900); border: 1px solid var(--hke-petrol-200); }

/* Wizard-Fortschritt (benannt, Plan §8) */
.fortschritt { display: flex; gap: var(--abstand-2); margin-bottom: var(--abstand-4); flex-wrap: wrap; }
.fortschritt .schritt {
  display: flex; align-items: center; gap: var(--abstand-1);
  font-size: 0.88rem; color: var(--text-leise); text-decoration: none;
}
.fortschritt .schritt .nr {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hke-sand-200); color: var(--hke-ink-500); font-weight: 600; font-size: 0.8rem;
}
.fortschritt .schritt.aktiv { color: var(--primaer-tiefe); font-weight: 600; }
.fortschritt .schritt.aktiv .nr { background: var(--primaer); color: #fff; }
.fortschritt .schritt.fertig { color: var(--hke-ink-700); }
.fortschritt .schritt.fertig .nr { background: var(--hke-petrol-100); color: var(--hke-petrol-900); }

/* Verbrauchstabelle (Wizard Schritt 3): kompakt, passt ohne Scroll in die schmale Spalte */
.verbrauch-tabelle th, .verbrauch-tabelle td { padding: 0.4rem 0.35rem; }
.verbrauch-tabelle input[type="date"] { padding: 0.45rem 0.35rem; font-size: 0.92rem; }
.verbrauch-tabelle input[type="text"] { padding: 0.45rem 0.45rem; min-width: 5rem; }
.verbrauch-tabelle select { padding: 0.45rem 0.3rem; font-size: 0.92rem; }
.verbrauch-tabelle td:first-child { white-space: nowrap; font-weight: 600; }

/* Klick-Kacheln (Typeform-Prinzip: Kacheln statt Dropdowns) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--abstand-2); }
.kachel { position: relative; }
.kachel input { position: absolute; opacity: 0; inset: 0; }
.kachel input + span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--abstand-1); height: 100%;
  padding: var(--abstand-3); border: 1px solid var(--hke-ink-200); border-radius: var(--radius);
  background: var(--karte); text-align: center; cursor: pointer; min-height: 44px;
  font-size: 0.95rem;
}
.kachel .kachel-hinweis { font-size: 0.8rem; font-weight: 400; color: var(--text-leise); }
.kachel input:checked + span .kachel-hinweis { color: var(--hke-petrol-800); }
.kachel input:checked + span {
  border-color: var(--primaer); background: var(--hke-petrol-050);
  color: var(--hke-petrol-900); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primaer);
}
.kachel input:focus-visible + span { outline: 2px solid var(--primaer); outline-offset: 1px; }

/* Foto-Slots */
.foto-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--abstand-3); }
.foto-slot { border: 1px dashed var(--hke-ink-200); border-radius: var(--radius-gross); padding: var(--abstand-3); background: var(--karte); }
.foto-slot img { max-width: 100%; border-radius: var(--radius); display: block; margin-bottom: var(--abstand-2); }

/* Vertrauens-Fußzeile (Regionalität, Plan §8) */
.vertrauen { color: var(--text-leise); font-size: 0.88rem; border-top: 1px solid var(--hke-sand-200); margin-top: var(--abstand-5); padding-top: var(--abstand-3); }

@media (max-width: 640px) {
  /* Kopf 2-zeilig: Marke + Nutzer oben, Nav darunter — statt 3 gestapelter
     Zeilen (BEFUND-019) */
  .kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--abstand-1); }
  .kopf nav { grid-column: 1 / -1; grid-row: 2; }
  .kopf .nutzer { justify-self: end; }
  main { padding: var(--abstand-3) var(--abstand-2) var(--abstand-4); }
  th, td { padding: var(--abstand-1) var(--abstand-2); }
  h1 { font-size: 1.5rem; }

  /* Touch-Ziele Richtung 44px anheben (BEFUND-017): Chips 26px, Nav 32px,
     Klein-Buttons 31–33px waren zu klein zum Treffen */
  .filter-chip { padding: 0.5rem 0.9rem; }
  .kopf nav a { padding: 0.55rem 0.7rem; }
  .fortschritt .schritt { padding: 0.3rem 0; }
  button, .btn { padding: 0.7rem 1.4rem; }
  .btn-klein { padding: 0.55rem 0.8rem; }

  /* Mehrspaltige Formzeilen einspaltig stapeln — 105px-Spalten zerhackten
     Labels und Hilfetexte (BEFUND-014); Straße/Nr. + PLZ/Ort bleiben 2-spaltig */
  .form-zeile-2, .form-zeile-3 { grid-template-columns: 1fr; }

  /* Cockpit-Liste: Nebenspalten ausblenden — die Tabelle machte die Seite
     483px breit (BEFUND-012); Von/verify stehen im Detail */
  .nur-desktop { display: none; }

  /* Verbrauchstabelle (Schritt 3): als Jahres-Karten stapeln — sonst ist die
     Verbrauchsspalte bei 375px unsichtbar (BEFUND-011) */
  .verbrauch-tabelle, .verbrauch-tabelle tbody { display: block; }
  .verbrauch-tabelle thead { display: none; }
  .verbrauch-tabelle tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-2);
    border: 1px solid var(--linie); border-radius: var(--radius);
    padding: var(--abstand-3); margin-bottom: var(--abstand-3); background: var(--karte);
  }
  .verbrauch-tabelle td { display: block; border: 0; padding: 0; }
  .verbrauch-tabelle td:first-child,
  .verbrauch-tabelle td:nth-child(4),
  .verbrauch-tabelle td:nth-child(5) { grid-column: 1 / -1; }
  .verbrauch-tabelle td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise);
    margin-bottom: 0.2rem;
  }

  /* Cockpit-Detail: Feldzeilen stapeln — Label+Herkunft oben, Eingabe volle
     Breite (Inputs kollabierten auf 24px, BEFUND-013) */
  .feld-tabelle, .feld-tabelle tbody { display: block; }
  .feld-tabelle tr {
    display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--abstand-2);
    padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie);
  }
  .feld-tabelle td { display: block; border: 0; padding: 0; width: auto !important; }
  .feld-tabelle td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }

  /* Verlauf: Zeilen als Fließtext-Blöcke statt gequetschter Spalten */
  .verlauf-tabelle, .verlauf-tabelle tbody { display: block; }
  .verlauf-tabelle tr { display: block; padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
  .verlauf-tabelle td { display: inline; border: 0; padding: 0 0.35rem 0 0; white-space: normal !important; }
}