/*
 * Verkaufsseite makler-cockpit.at. Ein Stylesheet für alle Seiten, kein Build.
 *
 * Gestaltung nach dem Designer-Prototyp (09/2026): warme Grundfläche, abwechselnd hellere
 * Bänder, Tinte für die Wortmarke, ein dunkles Schlussband. Kachel und Hauptknopf bleiben
 * blau (--akzent-fest, wie in der Anwendung). Die
 * Farben der Anwendung (Ampel, Sparten, Akzent für Verweise und aktive Chips) bleiben in
 * den Abbildern unverändert, damit die Seite das Produkt zeigt, das nach dem Login kommt.
 *
 * Schrift wie in der Anwendung: IBM Plex Sans für Text, Plex Mono für jede Messgröße,
 * Archivo nur für die Wortmarke. Die Dateien sind Kopien aus app/fonts und liegen daneben;
 * von außen wird nichts geladen (DATENSCHUTZ.md §2).
 *
 * Schriftgrößen: 11 12 13 14 16 18 22 32 48. Passt nichts, ist die Reihe falsch, nicht die Stelle.
 */
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("archivo-500-800.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

:root {
  /* Flächen: Grund, zwei Bänder, Blatt, Papier, dunkles Schlussband */
  --canvas: #edece8;
  --band: #f2f0ea;
  --band-hell: #f6f4ee;
  --blatt: #ffffff;
  --papier: #f6f4ee;
  --abgeleitet: #f3f1ec;
  --dunkel: #33322e;
  --dunkel-rand: #58564f;
  --dunkel-text: #c9c6bd;
  --still: #dedbd1;
  --aktiv: #dcd8cc;
  --rand: #e4e2da;
  --rand-geist: #d6d4cd;
  --linie: #e8e6df;
  /* Tinte und Grautreppe */
  --tinte: #33322e;
  --text: #3a3a37;
  --gedaempft: #6b6960;
  --leise: #5e5c55;
  --label: #6e6b62;
  --symbol: #8a867b;
  /* Ampel: nur Dringlichkeit, nie Dekor */
  --gruen: #2c6e49;
  --gelb: #a9750c;
  --rot: #b3392c;
  --gefahr: #9c3123;
  --gefahr-bg: #f2dfdb;
  /* Akzent: Verweise und aktive Chips in den Abbildern, wie in der Anwendung */
  --akzent: #5b7ba6;
  --akzent-fest: #4d6b93;
  --verweis: #46628d;
  --akzent-weich: rgba(91, 123, 166, 0.12);
  --fokus-halo: rgba(91, 123, 166, 0.45);
  --strom: #b89b52;
  --gas: #6f8296;
  --einspeisung: #6f8f7c;
  --radius-feld: 8px;
  --radius-karte: 12px;
  --schatten: 0 2px 8px rgba(60, 58, 50, 0.06);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --marke: "Archivo", var(--sans);
}

* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--verweis); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.knopf:focus-visible, a:focus-visible { box-shadow: 0 0 0 4px var(--fokus-halo); }
h1, h2, h3 { color: var(--tinte); font-weight: 600; margin: 0; }
h1 { font-size: 48px; line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 18px; line-height: 1.35; }
p { margin: 0; }
p + p { margin-top: 0.75em; }
strong { color: var(--tinte); font-weight: 600; }
ul, ol { margin: 0; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }

/* Gerüst: Grund und Bänder wechseln sich ab, ein Band trägt oben eine Linie. */
.hülle { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.kopf {
  position: sticky; top: 0; z-index: 2;
  background: rgba(237, 236, 232, 0.92);
  border-bottom: 1px solid var(--rand);
}
.kopf .hülle { display: flex; align-items: center; gap: 24px; height: 64px; }
.kopf nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.kopf nav a { color: var(--text); text-decoration: none; font-size: 14px; }
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a.knopf { color: #fff; height: 38px; }
main > section { padding-block: 72px; }
.band { background: var(--band); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.band-hell { background: var(--band-hell); }
.band + .band { border-top: 0; }
.dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.dunkel h2, .dunkel strong { color: var(--band-hell); }
.dunkel a { color: var(--band-hell); }
.fuss { padding-block: 28px 40px; font-size: 13px; color: var(--leise); }
.fuss .hülle { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.fuss a { color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }
.fuss nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Marke: Kachel aus app/icon.svg plus Wortmarke in Archivo. Nur hier, nirgends sonst. */
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marke svg { width: 26px; height: 26px; flex: none; }
.wortmarke {
  font-family: var(--marke); font-weight: 700; font-size: 14px; line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--tinte); white-space: nowrap;
}

/* Bausteine */
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.vorspann { display: block; margin-bottom: 14px; }
h2.vorspann { margin-bottom: 20px; }
.karte {
  background: var(--blatt); border: 1px solid var(--rand);
  border-radius: var(--radius-karte); box-shadow: var(--schatten); padding: 26px;
}
.karte-papier { background: var(--papier); box-shadow: none; }
.karte-abgeleitet { background: var(--abgeleitet); box-shadow: none; border-style: dashed; border-color: var(--rand-geist); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--radius-feld); border: 1px solid transparent;
  background: var(--akzent-fest); color: #fff; font: 500 14px/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background: var(--verweis); }
.knopf-geist { background: var(--blatt); border-color: var(--rand-geist); color: var(--tinte); }
.knopf-geist:hover { background: var(--band-hell); }
.dunkel .knopf-geist { background: transparent; border-color: var(--dunkel-rand); color: var(--band-hell); }
.dunkel .knopf-geist:hover { background: rgba(255, 255, 255, 0.06); }
.knöpfe { display: flex; flex-wrap: wrap; gap: 10px; }
.etikett {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border-radius: var(--radius-feld); background: #eeece4; color: var(--gedaempft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.breit { max-width: 62ch; }
.lesbar { max-width: 74ch; }
.raster { display: grid; gap: 20px; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abstand { margin-top: 28px; }
.abstand-mittel { margin-top: 18px; }
.abstand-klein { margin-top: 12px; }
.mitte { justify-content: center; }
.text-mitte { text-align: center; }

/* Ampel: nur für Fristen, nie dekorativ, nie ohne Text daneben. */
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punkt-rot { background: var(--rot); }
.punkt-gelb { background: var(--gelb); }
.punkt-gruen { background: var(--gruen); }
.ampelzeile { display: flex; align-items: center; gap: 10px; }

/* Sparte: nur Füllung, nie Text. */
.sparte { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sparte-strom { background: var(--strom); }
.sparte-gas { background: var(--gas); }
.sparte-einspeisung { background: var(--einspeisung); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); font-weight: 500; }
td.zahl, th.zahl { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tabellenhülle { overflow-x: auto; }

/* Hero */
.hero { padding-block: 80px 72px; }
.hero .hülle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.gross { font-size: 18px; line-height: 1.55; }
.hero p.gross { margin-top: 20px; color: var(--leise); }
.fakten { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rand); font-size: 14px; color: var(--leise); }

/* Cockpit-Abbild: statisch, Werte nach den echten Regeln (Ampel 7/21, Nummerierung je Sparte). */
.mock { background: var(--blatt); border: 1px solid var(--rand); border-radius: var(--radius-karte); box-shadow: 0 10px 30px rgba(60, 58, 50, 0.10); overflow: hidden; font-size: 12px; }
.mock-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--band); }
.mock-kopf .chips { margin-left: auto; display: flex; gap: 6px; }
.chip { padding: 3px 9px; border-radius: var(--radius-feld); background: #eeece4; border: 1px solid var(--rand); color: var(--gedaempft); font-size: 11px; white-space: nowrap; }
.chip-aktiv { background: var(--akzent-weich); border-color: var(--akzent); color: var(--verweis); }
.mock table { font-size: 12px; }
.mock th, .mock td { padding: 8px 12px; }
.mock td.zahl { font-size: 12px; }
.mock .rot { color: var(--gefahr); font-weight: 600; }

/* Kundenakte im Hero */
.akte .mock-kopf .chips { margin-left: 0; }
.akte .mock-kopf .etikett { margin-left: auto; }
.akte-inhalt { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.akte-stellen { border-right: 1px solid var(--linie); }
.stelle { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.stelle:last-child { border-bottom: 0; }
.stelle .sparte { margin-top: 5px; }
.stelle > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.stelle b { color: var(--tinte); font-weight: 600; }
.stelle span:not(.sparte):not(.punkt) { font-size: 12px; color: var(--leise); }
.stelle > div > span:first-of-type { font-family: var(--mono); }
.stelle .ampelzeile { font-family: var(--mono); font-size: 12px; color: var(--leise); gap: 6px; flex: none; margin-top: 3px; }
.stelle .etikett { flex: none; margin-top: 2px; }
.akte-verlauf { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--papier); }
.akte-verlauf > div { display: flex; flex-direction: column; }
.akte-verlauf b { color: var(--tinte); font-weight: 600; }
.akte-verlauf span { font-size: 12px; color: var(--leise); }

/* Drei Sätze, drei Abbilder. Gleich hoch, damit die Überschriften fluchten. */
.drei h3 { margin-top: 18px; }
.drei p { margin-top: 6px; color: var(--leise); }
.drei .weiter { margin-top: 28px; text-align: right; }
.klein-mock { box-shadow: var(--schatten); height: 162px; }
.klein-mock .mock-kopf { gap: 6px; }
.klein-mock table td { padding: 8px 12px; }
.klein-mock.blatt { padding: 12px 16px; }
.klein-mock.blatt table { margin-top: 6px; }

/* Frist-Herleitung: Eingabe oben, Rechenschritt als Linie, abgeleiteter Wert gestrichelt. */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.zweispalt h2 { margin-top: 0; }
.zweispalt .lead { margin-top: 18px; color: var(--leise); }
.legende { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.legende li { display: grid; grid-template-columns: 9px 56px 1fr; align-items: center; gap: 14px; }
.legende b { color: var(--tinte); font-weight: 600; }
.herleitung .eingabe { font-family: var(--mono); font-size: 22px; color: var(--tinte); margin-top: 4px; }
.herleitung .schritt { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 14px; color: var(--leise); white-space: nowrap; }
.herleitung .schritt::after { content: ""; flex: 1; border-top: 1px solid var(--rand-geist); }
.herleitung .ergebnis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.herleitung .ergebnis .eingabe { margin-top: 0; }
.herleitung .stand { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: var(--radius-feld); background: var(--blatt); border: 1px solid var(--rand); font-family: var(--mono); font-size: 12px; color: var(--tinte); }

/* Für wen: drei Karten, unten je eine Zeile in Mono */
.zielgruppe p { margin-top: 10px; color: var(--leise); }
.zielgruppe .label { display: block; margin-top: 18px; letter-spacing: 0.04em; text-transform: none; font-size: 12px; }

/* Datenschutz als Tabelle: Begriff links, Erklärung rechts */
.begriffe { background: var(--blatt); border: 1px solid var(--rand); border-radius: var(--radius-karte); box-shadow: var(--schatten); }
.begriffe > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--linie); }
.begriffe > div:last-child { border-bottom: 0; }
.begriffe b { color: var(--tinte); font-weight: 600; }
.begriffe span { font-size: 14px; color: var(--leise); }

/* Schlussband */
.schluss .hülle { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.schluss p { margin-top: 12px; }
.schluss .knöpfe { flex: none; }

/* Preise */
.preis { font-family: var(--mono); font-size: 32px; font-weight: 600; color: var(--tinte); line-height: 1.1; }
.preis small { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--leise); }
.preis-klein { font-size: 22px; }
.haken li { list-style: none; padding-left: 22px; position: relative; }
.haken li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(-45deg); }
.haken { padding-left: 0; }
details { border-top: 1px solid var(--rand-geist); padding: 14px 0; }
details:last-child { border-bottom: 1px solid var(--rand-geist); }
summary { cursor: pointer; font-weight: 600; color: var(--tinte); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--symbol); font-family: var(--mono); }
details[open] summary::after { content: "−"; }
details p { margin-top: 10px; }

/* Demo-Zugang */
.zugang { align-self: start; }
.zugang dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 14px 0 0; }
.zugang dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label); padding-top: 3px; }
.zugang dd { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--tinte); word-break: break-all; }

/* Textseiten (Recht, Danke, Widerruf) */
.text { max-width: 74ch; padding-block: 48px 64px; }
.text h1 { font-size: 32px; }
.text h2 { font-size: 22px; margin-top: 36px; }
.text h3 { margin-top: 24px; }
.text .karte > h2:first-child { margin-top: 0; }
.text p, .text ul, .text ol, .text table { margin-top: 12px; }
.text blockquote { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--rand-geist); background: var(--papier); border-radius: 0 var(--radius-feld) var(--radius-feld) 0; }
.text blockquote p { margin-top: 0; }
.text blockquote p + p { margin-top: 8px; }
.text hr { border: 0; border-top: 1px solid var(--rand); margin: 36px 0; }
.entwurf {
  margin: 20px 0 24px; padding: 12px 16px; border-radius: var(--radius-feld);
  background: var(--gefahr-bg); color: var(--gefahr); border: 1px solid #e8cfc9; font-size: 14px;
}
.entwurf strong { color: inherit; }

/* Widerruf: zwei Schaltflächen, die zweite erscheint erst nach der ersten (:target, kein JS). */
#bestaetigen { display: none; }
#bestaetigen:target { display: block; }

/* Funktionen und Demo: Listen unter einer h2 */
.liste-gross { margin-top: 24px; gap: 28px 40px; }
.liste-gross p { margin-top: 6px; color: var(--leise); }

@media (max-width: 900px) {
  .akte-inhalt { grid-template-columns: 1fr; }
  .akte-stellen { border-right: 0; border-bottom: 1px solid var(--linie); }
  .hero .hülle, .zweispalt { grid-template-columns: 1fr; }
  .zweispalt { gap: 32px; }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schluss .hülle { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .text h1 { font-size: 28px; }
  main > section, .hero { padding-block: 48px; }
  .raster-2, .raster-3 { grid-template-columns: 1fr; }
  .kopf .wortmarke { display: none; }
  .kopf nav { gap: 14px; }
  .begriffe > div { grid-template-columns: 1fr; gap: 4px; }
  .zugang dl { grid-template-columns: 1fr; gap: 2px; }
  .zugang dd { margin-bottom: 8px; }
}

@media print {
  .kopf, .fuss, .knopf, .entwurf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .text { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}