/* CUnity Angebotsprozess — Designsystem.
   Farbwelt: Ollbrink-Süd-Teal (#67C1B9, aus deren eigenem CSS) als Akzent auf tiefem
   Petrol. Das Petrol ist die Brücke zur Holding (Navy, seriös) und zum Klimakönig
   (dunkel, kontrastreich), ohne eine der beiden Marken zu kopieren.
   Schriften bewusst systemnah: WeasyPrint rendert das PDF ohne Netz, also darf das
   Layout an keiner Webschrift hängen. */

:root {
  /* Markenblau, aus dem Original-Logo gemessen (haeufigster deckender Farbwert in
     KTO-Logo-K.png: rgb(12,119,189)). Nicht geschaetzt und nicht nachempfunden.
     Bis 2026-09-15 lief hier das Tuerkis von Ollbrink Sued; seit das echte Logo der
     Muttergesellschaft im Kopf steht, waere ein tuerkiser Knopf daneben ein Bruch. */
  --akzent:        #0C77BD;
  --akzent-tief:   #0A5F97;
  --akzent-dunkel: #08496F;
  --akzent-hell:   #E7F2FA;
  --petrol:      #0B2334;
  --petrol-2:    #143A52;
  --navy:        #17273A;
  --creme:       #F6FAFA;
  --weiss:       #FFFFFF;
  --grau:        #5F7175;
  --grau-hell:   #DCE6E7;
  --warn:        #B4761E;
  --warn-hell:   #FDF4E5;
  --radius:      14px;
  --radius-s:    9px;
  --schatten:    0 2px 8px rgba(13,43,48,.07), 0 12px 32px rgba(13,43,48,.07);
  --schatten-s:  0 1px 3px rgba(13,43,48,.09);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
/* Das HTML-Attribut hidden setzt display:none nur im Browser-Stylesheet. Jede eigene
   display-Regel (hier .knopf mit inline-flex) schlaegt es. Ohne diese Zeile stand
   "Angebot erstellen" schon in Schritt 2 der Seite — im Mobil-Screenshot aufgefallen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--navy); background: var(--creme);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--akzent-dunkel); }
.huelle { width: min(1120px, 92vw); margin-inline: auto; }
.eng { width: min(760px, 92vw); margin-inline: auto; }

/* ---------------------------------------------------------------- Kopf */
/* Heller Kopf, weil das Logo blau auf transparent ist. Auf dem dunklen Petrol kaeme das
   Markenblau auf rund 2,5:1 und saehe matschig aus; ein Logo umzufaerben ist keine Option.
   kt-ollbrink.de macht es selbst so: weisser Kopf, blaues Zeichen, dunkle Schrift. */
.kopf {
  background: #fff; color: var(--navy); padding: .85rem 0;
  border-bottom: 1px solid var(--grau-hell);
}
.kopf .huelle { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: .8rem; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.marke .zeichen { width: 44px; height: 44px; flex: none; display: block; }
.marke small { display: block; font-weight: 400; font-size: .74rem; color: var(--grau); letter-spacing: .02em; }
.kopf .rechts { margin-left: auto; display: flex; gap: 1.5rem; align-items: center; font-size: .87rem; }
.kopf .rechts b { display: block; font-size: .95rem; color: var(--akzent-tief); }
.kopf .rechts span { color: var(--grau); }
.kopf a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- Hero */
.hero { background: var(--petrol); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% 45%; height: 120%;
  background: radial-gradient(closest-side, rgba(12,119,189,.18), transparent 70%);
  pointer-events: none;
}
.hero .huelle { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--akzent); }
.hero .unterzeile { font-size: clamp(1.02rem, 2vw, 1.2rem); opacity: .84; max-width: 54ch; margin-bottom: 1.6rem; }
.zaehler {
  display: inline-flex; gap: 1.6rem; align-items: center; margin-bottom: 1.5rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .5rem 1.3rem; font-size: .85rem;
}
.zaehler b { color: var(--akzent); font-variant-numeric: tabular-nums; }
.merkmale { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; padding: 0; margin: 1.6rem 0 0; list-style: none; font-size: .93rem; }
.merkmale li { display: flex; gap: .55rem; align-items: flex-start; opacity: .92; }
.haken { color: var(--akzent); font-weight: 700; flex: none; }

/* ---------------------------------------------------------------- Karten */
.karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: clamp(1.4rem, 3vw, 2.2rem); }
.karte + .karte { margin-top: 1.5rem; }
.abschnitt { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.augenbraue { text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; color: var(--akzent-tief); margin-bottom: .6rem; }

/* ------------------------------------------------- Einstieg (Freitext + Wizard) */
.einstieg { margin-top: -3.5rem; position: relative; z-index: 3; }
.reiter { display: flex; gap: .4rem; margin-bottom: -1px; }
.reiter button {
  font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer;
  background: rgba(255,255,255,.72); color: var(--grau); border: none;
  border-radius: 12px 12px 0 0; padding: .8rem 1.4rem;
}
.reiter button[aria-selected="true"] { background: var(--weiss); color: var(--navy); box-shadow: 0 -3px 0 var(--akzent) inset; }
.tafel { background: var(--weiss); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: var(--schatten); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.tafel[hidden] { display: none; }

.freitext-feld {
  width: 100%; min-height: 130px; resize: vertical; font: inherit; color: var(--navy);
  border: 2px solid var(--grau-hell); border-radius: var(--radius-s); padding: 1rem 1.1rem;
  background: var(--creme);
}
.freitext-feld:focus { outline: none; border-color: var(--akzent); background: #fff; }
.beispiele { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.2rem; }
.beispiele button {
  font: inherit; font-size: .85rem; cursor: pointer; background: var(--akzent-hell);
  color: var(--akzent-dunkel); border: 1px solid transparent; border-radius: 999px; padding: .4rem .9rem;
}
.beispiele button:hover { border-color: var(--akzent); }

/* ---------------------------------------------------------------- Wizard */
.fortschritt { height: 6px; background: var(--grau-hell); border-radius: 999px; overflow: hidden; margin-bottom: 1.8rem; }
.fortschritt i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--akzent), var(--akzent-tief)); transition: width .35s ease; }
.schritt { display: none; animation: rein .35s ease both; }
.schritt.aktiv { display: block; }
@keyframes rein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.schritt > .frage { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; margin-bottom: .3rem; letter-spacing: -.02em; }
.schritt > .hilfe { color: var(--grau); font-size: .95rem; margin-bottom: 1.5rem; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; }
.kachel {
  font: inherit; cursor: pointer; text-align: center; background: var(--weiss);
  border: 2px solid var(--grau-hell); border-radius: var(--radius-s); padding: 1.3rem .8rem;
  transition: border-color .15s, box-shadow .15s, transform .15s; color: inherit;
}
.kachel:hover { border-color: var(--akzent); transform: translateY(-2px); box-shadow: var(--schatten-s); }
.kachel[aria-pressed="true"] { border-color: var(--akzent-tief); background: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(12,119,189,.22); }
.kachel .zahl { display: block; font-size: 2.4rem; font-weight: 300; color: var(--akzent-tief); line-height: 1; margin-bottom: .35rem; }
.kachel .sinnbild { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: .5rem; }
.kachel .titel { display: block; font-weight: 600; font-size: .96rem; }
.kachel .zusatz { display: block; color: var(--grau); font-size: .82rem; margin-top: .2rem; }

.raumliste { display: grid; gap: .8rem; margin-bottom: 1rem; }
.raumzeile {
  display: grid; grid-template-columns: 2rem 1fr 8.5rem auto; gap: .8rem; align-items: center;
  background: var(--creme); border: 1px solid var(--grau-hell); border-radius: var(--radius-s); padding: .7rem .9rem;
}
.raumzeile .nr { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent-dunkel); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.raumzeile select, .raumzeile input {
  font: inherit; font-size: .95rem; padding: .5rem .6rem; border: 1px solid var(--grau-hell);
  border-radius: 8px; background: #fff; color: var(--navy); width: 100%;
}
.raumzeile .weg { background: none; border: none; cursor: pointer; color: var(--grau); font-size: 1.3rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px; }
.raumzeile .weg:hover { color: #A6392F; background: #FBEAE8; }
.qm-feld { display: flex; align-items: center; gap: .4rem; }
.qm-feld span { color: var(--grau); font-size: .9rem; }

.schalter { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; }
.schalter label { display: flex; gap: .55rem; align-items: center; font-size: .95rem; cursor: pointer; }
.schalter input { width: 1.1rem; height: 1.1rem; accent-color: var(--akzent-tief); }

.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.feld label { display: block; font-size: .84rem; font-weight: 600; color: var(--grau); margin-bottom: .3rem; }
.feld input { width: 100%; font: inherit; padding: .7rem .85rem; border: 1px solid var(--grau-hell); border-radius: 8px; background: #fff; color: var(--navy); }
.feld input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(12,119,189,.18); }

.steuerung { display: flex; gap: .8rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.knopf {
  font: inherit; font-weight: 600; cursor: pointer; border: none; border-radius: 999px;
  padding: .85rem 1.7rem; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--akzent-tief); color: #fff; text-decoration: none; transition: background .15s, transform .15s;
}
.knopf:hover { background: var(--akzent-dunkel); transform: translateY(-1px); }
.knopf.gross { padding: 1rem 2rem; font-size: 1.05rem; }
.knopf.stumm { background: transparent; color: var(--grau); box-shadow: inset 0 0 0 1px var(--grau-hell); }
.knopf.stumm:hover { background: var(--creme); color: var(--navy); }
.knopf[disabled] { opacity: .4; pointer-events: none; }
.knopf.dunkel { background: var(--petrol); }
.knopf.dunkel:hover { background: var(--petrol-2); }

/* ---------------------------------------------------------------- Ablauf-Band */
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem; }
.ablauf .stufe { position: relative; padding-top: 2.6rem; }
.ablauf .stufe::before {
  content: attr(data-nr); position: absolute; top: 0; left: 0; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--akzent-hell); color: var(--akzent-dunkel);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.ablauf h3 { margin-bottom: .3rem; }
.ablauf p { color: var(--grau); font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------- Angebot */
.dokument { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.dokument-kopf { background: var(--petrol); color: #fff; padding: clamp(1.6rem, 4vw, 2.4rem); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.dokument-kopf .nummer { font-family: var(--mono); font-size: .9rem; color: var(--akzent); letter-spacing: .04em; }
.dokument-kopf h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: .3rem 0 0; }
.dokument-kopf .meta { text-align: right; font-size: .87rem; opacity: .8; }
.dokument-koerper { padding: clamp(1.6rem, 4vw, 2.6rem); }

.preis-karte {
  background: linear-gradient(160deg, var(--akzent-hell), #fff); border: 1px solid var(--akzent);
  border-radius: var(--radius); padding: 1.6rem; margin: 1.8rem 0; display: flex;
  justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap;
}
.preis-karte .betrag { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; color: var(--akzent-dunkel); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.preis-karte .klein { font-size: .85rem; color: var(--grau); margin: .4rem 0 0; }
.preis-karte .aufteilung { font-size: .87rem; color: var(--grau); text-align: right; font-variant-numeric: tabular-nums; }
.preis-karte .aufteilung b { color: var(--navy); }

.hinweis {
  background: var(--warn-hell); border-left: 3px solid var(--warn); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: .9rem 1.1rem; font-size: .9rem; color: #6B4A12; margin: 1.2rem 0;
}
.hinweis b { color: var(--warn); }

.posten { border: 1px solid var(--grau-hell); border-radius: var(--radius-s); overflow: hidden; margin: 1.5rem 0; }
.posten-kopf { background: var(--creme); padding: .7rem 1.1rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); border-bottom: 1px solid var(--grau-hell); }
.posten-inhalt { padding: 1.1rem; }
.posten-inhalt .bezeichnung { font-weight: 600; margin-bottom: .8rem; }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .93rem; }
.liste li { display: flex; gap: .6rem; align-items: flex-start; }
.liste.aus li { color: var(--grau); }
.liste.aus .haken { color: var(--grau-hell); }

.geraete { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: .5rem; }
.geraete th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--grau); padding: .5rem .7rem; border-bottom: 1px solid var(--grau-hell); font-weight: 700; }
.geraete td { padding: .6rem .7rem; border-bottom: 1px solid var(--creme); }
.geraete td.zahl, .geraete th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.geraete tr:last-child td { border-bottom: none; }

.herleitung { background: var(--creme); border-radius: var(--radius-s); padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.herleitung summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.herleitung ul { margin: .9rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .89rem; color: var(--grau); }
.herleitung code { font-family: var(--mono); font-size: .85em; background: #fff; padding: .1rem .3rem; border-radius: 4px; }

.merkzeile { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.plakette { background: var(--akzent-hell); color: var(--akzent-dunkel); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; font-weight: 600; }
.plakette.grau { background: var(--creme); color: var(--grau); }

/* ---------------------------------------------------------------- Bühne (Erzeugung) */
.buehne { position: fixed; inset: 0; background: rgba(13,43,48,.96); color: #fff; display: none; place-items: center; z-index: 60; }
.buehne.an { display: grid; }
.buehne .inhalt { width: min(560px, 88vw); text-align: center; }
.buehne h2 { color: #fff; }
.schritte-liste { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; text-align: left; }
.schritte-liste li { display: flex; gap: .8rem; align-items: center; opacity: .35; transition: opacity .3s; font-size: .97rem; }
.schritte-liste li.laeuft { opacity: 1; }
.schritte-liste li.fertig { opacity: .85; }
.schritte-liste .punkt { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--akzent); display: grid; place-items: center; flex: none; font-size: .8rem; color: var(--akzent); }
.schritte-liste li.fertig .punkt { background: var(--akzent); color: var(--petrol); }
.schritte-liste li.laeuft .punkt { animation: puls 1.1s ease-in-out infinite; }
@keyframes puls { 0%,100% { box-shadow: 0 0 0 0 rgba(12,119,189,.45); } 50% { box-shadow: 0 0 0 8px rgba(12,119,189,0); } }

/* ---------------------------------------------------------------- Backoffice */
.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.tabelle th { background: var(--petrol); color: #fff; text-align: left; padding: .8rem 1rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; }
.tabelle td { padding: .8rem 1rem; border-bottom: 1px solid var(--creme); }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle a { font-family: var(--mono); font-size: .88rem; }

/* ---------------------------------------------------------------- Fuß */
.fuss { background: var(--petrol); color: rgba(255,255,255,.72); padding: 2.5rem 0; margin-top: 1.5rem; font-size: .88rem; }
/* Die letzte Sektion bringt ihr eigenes Padding mit; ohne diese Regel standen
   Sektions-Padding und Fuss-Margin uebereinander (gemessen im Screenshot). */
.abschnitt:last-of-type { padding-bottom: 1.5rem; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fuss b { color: #fff; display: block; margin-bottom: .3rem; }
/* Das Zeichen im dunklen Fuss auf einer hellen Platte: das Logo bleibt unveraendert,
   nur sein Untergrund wechselt. Umfaerben waere eine Aenderung an der Marke. */
.fuss .zeichen-platte {
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  display: grid; place-items: center; margin-bottom: .9rem;
}
.fuss .zeichen-platte img { width: 34px; height: 34px; display: block; }
.demo-band { background: var(--warn); color: #fff; text-align: center; padding: .5rem 1rem; font-size: .82rem; font-weight: 600; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf .rechts { width: 100%; margin-left: 0; gap: 1.1rem; font-size: .8rem; }
  .raumzeile { grid-template-columns: 1.7rem 1fr auto; grid-template-areas: "nr art weg" "qm qm qm"; }
  .raumzeile .nr { grid-area: nr; } .raumzeile select { grid-area: art; }
  .raumzeile .qm-feld { grid-area: qm; } .raumzeile .weg { grid-area: weg; }
  .einstieg { margin-top: -2rem; }
  .preis-karte { flex-direction: column; align-items: flex-start; }
  .preis-karte .aufteilung { text-align: left; }
  .dokument-kopf .meta { text-align: left; }
}