/* ============================================================
   Messe-Funnel — Bauteile. Farben, Schrift, Abstände kommen
   ausschliesslich aus marke/colors_and_type.css.
   Mobil zuerst; ab 720px mittige Spalte fuer Tablet und Laptop.
   ============================================================ */

:root {
  --grund: var(--ft-blue-40d);   /* Falkental Energy steht auf Blau */
  --karte: rgba(242,237,228,.05);
}

* { box-sizing: border-box; }

/* hidden ist ein Attribut des Browsers und traegt nur die Angabe
   display:none aus dem Standardstil. Jede eigene Klasse mit einem
   display-Wert schlaegt sie — deshalb hier ausdruecklich. Ohne diese
   Zeile stehen alle Schritte gleichzeitig auf der Seite. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Der Rand, den das Geraet selbst beansprucht: die Aussparung fuer die
   Kamera im Querformat, der Balken unten. viewport-fit=cover in der
   index.html ist die Voraussetzung dafuer, dass hier ueberhaupt etwas
   anderes als null herauskommt. */
:root {
  --rand-links:  env(safe-area-inset-left, 0px);
  --rand-rechts: env(safe-area-inset-right, 0px);
  --rand-unten:  env(safe-area-inset-bottom, 0px);
}

/* Auf dem Handy blitzt sonst bei jeder Beruehrung ein blaues Rechteck
   auf, und ein zweites Antippen kurz hintereinander zoomt die Seite
   statt den Knopf zweimal auszuloesen. */
button, label, a, summary, input, select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Wer mit der Tabulatortaste durch den Funnel geht, muss sehen, wo er
   steht. Der Browser zeichnet dafuer von sich aus eine haarduenne blaue
   Linie, und die verschwindet auf dem dunklen Blau praktisch. Peach ist
   hier die richtige Ausnahme von der Regel "nie als grosse Flaeche":
   zwei Pixel Kante, und nur, solange der Fokus steht.

   :focus-visible und nicht :focus — der Ring soll bei der Tastatur
   kommen und beim Antippen wegbleiben. */
:focus-visible {
  outline: 2px solid var(--ft-peach);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.feld__eingabe:focus-visible {
  outline-offset: 4px;         /* die Linie unter dem Feld nicht beruehren */
}

body {
  margin: 0;
  /* dvh meint die Hoehe ohne die Leisten, die Safari beim Rollen
     ein- und ausblendet. Aeltere iPhones kennen die Einheit nicht und
     ueberlesen die Zeile, deshalb steht vh davor. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Kopf ------------------------------------------------- */
.kopf {
  padding: var(--space-5) calc(var(--space-5) + var(--rand-rechts))
           var(--space-4) calc(var(--space-5) + var(--rand-links));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kopf__logo { height: 22px; width: auto; align-self: flex-start; }

.fortschritt { display: flex; gap: var(--space-1); }
.fortschritt span {
  height: 2px;
  flex: 1;
  background: var(--line);
  transition: background .3s ease;
}
.fortschritt span.an { background: var(--fg-muted); }

/* ---- Buehne ----------------------------------------------- */
.buehne {
  flex: 1;
  padding: var(--space-2) calc(var(--space-5) + var(--rand-rechts))
           var(--space-8) calc(var(--space-5) + var(--rand-links));
  width: 100%;
  max-width: calc(560px + var(--rand-links) + var(--rand-rechts));
  margin: 0 auto;
}

.schritt { animation: auf .32s ease both; }
.schritt--mitte {
  min-height: 50vh;
  min-height: 50dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
@keyframes auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.augenbraue {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
}
.titel {
  margin: 0 0 var(--space-3);
  /* Der Browser fuellt sonst die erste Zeile randvoll und laesst ein
     einzelnes Wort in der letzten stehen. Balance verteilt die Woerter
     gleichmaessig auf alle Zeilen; wo der Browser das nicht kennt,
     bricht er wie bisher. */
  text-wrap: balance;
  font-size: var(--text-xl);
  font-weight: var(--w-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.unter {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* ---- Felder ----------------------------------------------- */
.feld { display: block; margin-bottom: var(--space-4); }
.feld__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
}
.feld__eingabe {
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fg-strong);
  font-family: inherit;
  font-size: var(--text-md);
  transition: border-color .2s ease;
}
.feld__eingabe::placeholder { color: var(--fg-faint); }
.feld__eingabe:focus {
  outline: none;
  border-bottom-color: var(--fg);
}
.feld__hinweis {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.feld--eng { margin-top: var(--space-4); margin-bottom: 0; }

/* ---- Adressvorschlaege ------------------------------------ */
.feld--vorschlag { position: relative; }
.vorschlaege {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--ft-monolith);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Gemessen auf einem iPhone SE: fuenf Vorschlaege sind 325 Pixel
     hoch und reichten damit hinter die Aktionsleiste. Drei Zeilen
     bleiben ueber der Leiste stehen, der Rest rollt in der Liste
     selbst. -webkit-overflow-scrolling gibt Safari den Schwung, den
     man von einer Liste erwartet. */
  max-height: 210px;
  max-height: min(40dvh, 210px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Am Rollen der Liste soll die Seite darunter nicht mitrollen. */
  overscroll-behavior: contain;
}
@media (min-width: 720px) {
  .vorschlaege { max-height: 46vh; }
}

/* Der Standortschritt ist ohne Karte genau so hoch wie der Bildschirm.
   Damit das Adressfeld beim Aufgehen der Liste nach oben wandern kann,
   braucht die Seite kurzzeitig Platz nach unten. Setzt app.js. */
body.vorschlaege-offen .buehne { padding-bottom: 340px; }
@media (min-width: 720px) {
  body.vorschlaege-offen .buehne { padding-bottom: var(--space-8); }
}
.vorschlaege li {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  line-height: var(--leading-snug);
}
.vorschlaege li[aria-selected="true"] { background: rgba(242,237,228,.08); }
.vorschlaege li:active { background: rgba(242,237,228,.12); }
@media (hover: hover) and (pointer: fine) {
  .vorschlaege li:hover { background: rgba(242,237,228,.08); }
}
.vorschlaege b {
  display: block;
  font-weight: var(--w-medium);
  color: var(--fg-strong);
  font-size: var(--text-base);
}
.vorschlaege small { color: var(--fg-faint); font-size: var(--text-xs); }

/* ---- Dachbild --------------------------------------------- */
.dach {
  margin: 0 0 var(--space-6);
  animation: auf .4s ease both;
}
.dach__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: rgba(242,237,228,.05);
}
.dach__zeile {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.fehler {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ft-peach-20l);
}

/* ---- Karte ------------------------------------------------
   Bewegliche Google-Karte. Fuers Angebot friert der Kunde eine
   Ansicht ein; an ihre Stelle tritt dann das Standbild. */
.kartenbox {
  margin: var(--space-5) 0 0;
  animation: auf .4s ease both;
}

/* Der Kalender des Privatwegs. Calendly baut sich in diesen Kasten
   hinein und bringt seine eigene Gestaltung mit.

   Die Hoehe steht hier fest und nicht als min-height: Calendly setzt
   seinen Rahmen auf 100 Prozent der Hoehe des Elternelements, und
   gegen eine blosse Mindesthoehe rechnet der Browser dabei mit null.
   Der Kalender waere dann ein Streifen von 150 Pixeln. Auf dem Handy
   braucht die Monatsansicht spuerbar mehr Platz als auf dem Schirm. */
.kalender {
  position: relative;
  margin: var(--space-4) 0 0;
  height: 1000px;
  border-radius: var(--radius);
  overflow: hidden;
  animation: auf .4s ease both;
}

/* Solange Calendly seinen Rahmen aufbaut, steht hier ein Hinweis.
   Gemessen dauert das eine bis drei Sekunden, und die verbringt der
   Kunde sonst vor einem leeren Kasten von 1000 Pixeln Hoehe: das sieht
   nach Fehler aus und nicht nach Arbeit. Der Hinweis liegt ueber dem
   Rahmen und geht weg, sobald Calendly sich meldet. */
.kalender__laedt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Oben und nicht in der Mitte: der Kasten ist 1000 Pixel hoch, ein
     mittiger Hinweis stuende auf dem Handy unter dem Bildrand. */
  padding-top: var(--space-6);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  background: rgba(242,237,228,.05);
}
@media (min-width: 720px) {
  .kalender { height: 700px; }
}
@media print {
  .kalender { display: none; }
}
.kartenbox__flaeche,
.kartenbox__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: rgba(242,237,228,.05);
  overflow: hidden;
}
.kartenbox__bild { object-fit: cover; }

/* Solange das Standbild laedt, wandert ein Glimmen ueber die Flaeche.
   Gemessen: ein Luftbild, das der Server noch nie geholt hat, braucht
   rund sechs Sekunden. Ohne dieses Zeichen sieht die Wartezeit aus wie
   ein Fehler, und der Kunde tippt weiter oder geht. */
.kartenbox__bild.laedt,
.dach__bild.laedt {
  background-image: linear-gradient(100deg,
      rgba(242,237,228,0) 20%,
      rgba(242,237,228,.10) 45%,
      rgba(242,237,228,0) 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: glimmen 1.4s ease-in-out infinite;
}
@keyframes glimmen {
  from { background-position: 120% 0; }
  to   { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kartenbox__bild.laedt,
  .dach__bild.laedt { animation: none; }
}
.kartenbox__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.knopf--klein {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.zusatz { font-weight: var(--w-regular); color: var(--fg-faint); }

/* ---- Wiederaufnahme ---------------------------------------
   Steht über dem ersten Schritt, wenn jemand zurückkommt. */
.wieder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--fg);
}
.wieder .link { margin-top: 0; }

/* ---- Hinweisband ueber dem Ergebnis ------------------------
   Steht bewusst vor den Zahlen: wer nur das Ergebnis
   fotografiert, hat den Vorbehalt mit im Bild. */
.hinweisband {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: rgba(242,237,228,.05);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* ---- Gruppen ---------------------------------------------- */
.gruppe { margin-bottom: var(--space-6); }
.gruppe__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
}

/* ---- Pillen ----------------------------------------------- */
.pillen { display: flex; gap: var(--space-2); }
.pillen--breit { flex-wrap: wrap; }
.pillen--um { flex-direction: column; align-items: stretch; }
.pillen--um + .pillen { margin-top: var(--space-2); }

.pille {
  flex: 1;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pillen--breit .pille { flex: 1 1 auto; }
@media (hover: hover) and (pointer: fine) {
  .pille:hover { border-color: var(--line-strong); }
}
.pille:active { transform: scale(.985); }
.pille--an {
  border-color: var(--fg);
  background: rgba(242,237,228,.08);
  color: var(--fg-strong);
}

/* Ein Textlink ist auf dem Handy sonst 18 Pixel hoch und damit unter
   der Daumenbreite. Das Polster nach oben und unten macht ihn
   antippbar, ohne dass er breiter aussieht. */
.link {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--fg); }
}


/* ---- Schalterkarten --------------------------------------- */
.karte {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover { border-color: var(--line-strong); }
}
.karte:active { transform: scale(.995); }
.karte--an {
  border-color: var(--fg);
  background: rgba(242,237,228,.08);
}
.karte__titel {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  color: var(--fg-strong);
}
.karte__hinweis {
  display: block;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.haken {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  position: relative;
}
.karte--an .haken { border-color: var(--fg); background: var(--fg); }
.karte--an .haken::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--ft-blue-40d);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- Zustimmung ------------------------------------------- */
.zustimmung {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.zustimmung--eng { margin-top: 0; margin-bottom: var(--space-3); }
/* Das Kaestchen kommt vom Browser und ist auf dem Handy 13 Pixel
   gross. align-self haelt es oben; ohne die Angabe zieht die Zeile es
   ueber ihre ganze Hoehe. */
.zustimmung input {
  flex: none;
  align-self: flex-start;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ft-peach);
}
.zustimmung a { color: var(--fg); }

/* ---- Lader ------------------------------------------------ */
.lader {
  width: 34px; height: 34px;
  border: 2px solid var(--line);
  border-top-color: var(--ft-peach);
  border-radius: 50%;
  animation: dreh 1s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
.lader__text { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }

/* Die Rechenschritte. Links eine feste Spalte fuer das Zeichen, damit
   die Zeilen beim Abhaken nicht springen. */
.lader__schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  text-align: left;
}
.lader__schritt {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-faint);
  transition: color 160ms ease;
}
.lader__schritt::before {
  content: "";
  justify-self: center;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.lader__schritt--laeuft {
  color: var(--fg-muted);
  font-weight: var(--w-medium);
}
.lader__schritt--laeuft::before {
  background: var(--ft-peach);   /* Signalfarbe, punktgross */
}
.lader__schritt--fertig { color: var(--fg-muted); }
.lader__schritt--fertig::before {
  content: "✓";
  width: auto; height: auto;
  background: none;
  font-size: var(--text-xs);
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lader__schritt { transition: none; }
}

/* ---- Ergebnis --------------------------------------------- */
.haupt {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.haupt__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
}
.haupt__wert {
  display: block;
  /* Die Leitzahl ist die einzige Stelle, an der die Schriftgroesse
     mitwaechst. 62 Pixel sind auf einem 320er Schirm zu breit: schon
     "143.456 €" schob das Eurozeichen ueber den Rand. Unten steht der
     Wert, der auf dem kleinsten Handy noch passt, oben der Entwurf. */
  font-size: clamp(40px, 15vw, var(--text-3xl));
  font-weight: var(--w-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ft-peach);      /* die einzige Kennzahl in Peach */
  font-variant-numeric: tabular-nums;
}
.einheit {
  margin-left: .3em;
  font-size: .42em;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  color: var(--fg-faint);
}

/* Was gerechnet wurde — Module, Leistung, Flaeche. Steht unter der
   Ersparnis, weil es die Zahl erklaert. */
.haupt__zeile {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-faint);
}

.kacheln {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst darf eine Spalte nicht schmaler
     werden als ihr Inhalt, und "225.630 kWh" zog die rechte Spalte auf
     169 Pixel, waehrend die linke auf 134 zusammenfiel. Zwei gleich
     breite Kacheln sind der Sinn der Reihe. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.kachel { background: var(--grund); padding: var(--space-4); }
.kachel__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.kachel__wert {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}

.preis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}
.preis__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.preis__neben { display: block; font-size: var(--text-xs); color: var(--fg-faint); }
.preis__wert {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vorbehalt {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.vorbehalt strong { color: var(--fg); font-weight: var(--w-medium); }

.bestaetigung {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--line);
  margin-bottom: var(--space-6);
}
.bestaetigung__haken {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fg);
  position: relative;
}
.bestaetigung__haken::after {
  content: "";
  position: absolute;
  left: 8px; top: 4px;
  width: 5px; height: 10px;
  border: solid var(--ft-blue-40d);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bestaetigung__titel { font-weight: var(--w-medium); color: var(--fg-strong); }
.bestaetigung__text { font-size: var(--text-sm); color: var(--fg-muted); }

/* ---- Ansprechpartner vor Ort ------------------------------ */
.ap {
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}
.ap__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
}
.ap__name {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--fg-strong);
}
.ap__firma { font-size: var(--text-sm); color: var(--fg-muted); }
.ap__kontakt {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg);
}
.ap__text {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.ausgabe { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ausgabe .knopf { flex: 1; }

/* ---- Leiste ----------------------------------------------- */
.leiste {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) calc(var(--space-5) + var(--rand-rechts))
           calc(var(--space-4) + var(--rand-unten))
           calc(var(--space-5) + var(--rand-links));
  background: var(--grund);
  border-top: 1px solid var(--line);
}
.leiste > * { max-width: 560px; }
.leiste { justify-content: center; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

/* Der Pfeil zeigt die Richtung, drängt sich aber nicht vor die Schrift. */
.knopf__pfeil { opacity: .6; font-size: 1.05em; line-height: 1; }
.knopf--leise { flex: none; }
.knopf--stark {
  flex: 1;
  max-width: 400px;
  border-color: var(--ft-peach);
  background: var(--ft-peach);
  color: var(--ft-monolith);
  font-weight: var(--w-bold);
}
/* Ein Finger hat keinen Zeiger. Auf dem Handy bliebe der Hover-Zustand
   nach dem Antippen haengen, als waere der Knopf noch angefasst; die
   Abfrage haelt ihn bei Maus und Trackpad und laesst ihn beim Finger
   weg. Statt seiner gibt dort das kurze Zusammenziehen die Rueckmeldung
   — den blauen Blitz des Systems haben wir oben abgestellt. */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { border-color: var(--fg); }
  .knopf--stark:hover { background: var(--ft-peach-20d); border-color: var(--ft-peach-20d); }
}
.knopf:active { transform: scale(.99); }
@media (prefers-reduced-motion: reduce) {
  .pille:active, .karte:active, .knopf:active { transform: none; }
}

/* ============================================================
   Schmale Geraete — bis 480 Pixel
   ============================================================
   Gemessen auf einem iPhone SE (375 x 667): das Prototyp-Band, die
   Wortmarke und die Fortschrittsbalken belegen 126 Pixel, die
   Ueberschrift in 34 Pixel zwei Zeilen. Das erste Eingabefeld begann
   damit bei 531 Pixeln und stand hinter der Aktionsleiste — auf der
   ersten Frage des Funnels sah der Kunde kein Feld, nur Text.

   Hier wird nichts umgebaut, nur enger gestellt: kleinere
   Ueberschrift, weniger Luft zwischen den Bloecken. Danach beginnt
   das Feld bei rund 380 Pixeln und steht im Bild.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .kopf { padding: var(--space-4) calc(var(--space-5) + var(--rand-rechts))
                   var(--space-3) calc(var(--space-5) + var(--rand-links)); gap: var(--space-3); }
  .kopf__logo { height: 18px; }

  .titel { font-size: 28px; margin-bottom: var(--space-2); }
  .unter { margin-bottom: var(--space-5); }
  .augenbraue { margin-bottom: var(--space-1); }
  .gruppe { margin-bottom: var(--space-5); }

  /* Der Preisblock stellte Beschriftung und Betrag nebeneinander. Bei
     320 Pixeln brach "Richtpreis schluesselfertig, inklusive Speicher"
     dabei in sieben Zeilen neben eine einzeilige Zahl. Untereinander
     bleibt beides lesbar. */
  .preis {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .preis__wert { font-size: var(--text-md); }

  /* Zwei Knoepfe nebeneinander ergaben "Ihre / Auswertung / drucken"
     in drei Zeilen. Untereinander sind sie so breit wie alles andere. */
  .ausgabe { flex-direction: column; }
  .ausgabe .knopf { flex: none; width: 100%; }

  /* Halbe Kachelbreite ist auf 320 Pixeln 111 Pixel Innenraum. Bei 26
     Pixeln Schriftgroesse stand "225.630 kWh" ueber dem Rand. */
  .kachel { padding: var(--space-3); }
  .kachel__wert { font-size: var(--text-md); }

  .ap { padding: var(--space-4); }
}

/* ============================================================
   Flacher Schirm — Handy im Querformat
   ============================================================
   Bei 375 Pixeln Hoehe blieb vom Bildschirm nach Band, Kopf und
   Ueberschrift nichts uebrig; der Kunde sah kein einziges Bedienfeld.
   Auf einem flachen Schirm zaehlt jede Zeile, also faellt der Kopf
   auf das Noetige zusammen. Die Breite bleibt unberuehrt: ein Tablet
   im Querformat ist hoch genug und faellt nicht unter diese Regel.
   ------------------------------------------------------------ */
@media (max-height: 520px) and (orientation: landscape) {
  .kopf { padding-top: var(--space-3); padding-bottom: var(--space-2); gap: var(--space-2); }
  .kopf__logo { height: 16px; }
  .titel { font-size: var(--text-md); margin-bottom: var(--space-2); }
  .unter { margin-bottom: var(--space-3); }
  .augenbraue { margin-bottom: var(--space-1); }
  .gruppe { margin-bottom: var(--space-4); }
  .gruppe__label { margin-bottom: var(--space-2); }
  .buehne { padding-top: 0; padding-bottom: var(--space-5); }
  .leiste { padding-top: var(--space-2); padding-bottom: calc(var(--space-2) + var(--rand-unten)); }
  .knopf { min-height: 44px; }
}

/* ---- Ab Tablet -------------------------------------------- */
@media (min-width: 720px) {
  .kopf { padding: var(--space-6) var(--space-6) var(--space-5); align-items: center; }
  .kopf__logo { height: 26px; align-self: center; }
  .fortschritt { width: 100%; max-width: 560px; }
  .buehne { padding-top: var(--space-4); }
  .titel { font-size: var(--text-2xl); }
  .unter { font-size: var(--text-base); }
}

/* ============================================================
   Druck — die Ersteinschaetzung als A4-Blatt
   ============================================================
   Am Bildschirm ist der Funnel eine dunkle Spalte fuers Handy. Auf
   Papier ist er ein einseitiges Dokument, das der Interessent seinem
   Chef auf den Tisch legt. Beides aus demselben Markup: die Zahlen
   duerfen sich zwischen Schirm und Blatt nicht unterscheiden koennen.

   Drei Regeln bestimmen das Blatt:
   1. Weisses Papier, schwarze Schrift, Haarlinien. Keine Flaechen,
      keine Verlaeufe, keine Kacheln mit Fuellung — das kostet nur
      Toner und sieht auf jedem zweiten Buerodrucker schmutzig aus.
      Die einzige Farbflaeche ist das Luftbild.
   2. Genau eine Seite. Die Buehne ist auf 210 x 297 mm festgenagelt
      und schneidet ab; der Ueberschuss sammelt sich ueber der
      Fusszeile, nicht mitten im Text.
   3. Farbe traegt keine Bedeutung. Wer das Blatt schwarzweiss
      kopiert, verliert nichts ausser dem Blau am Preis.
   ------------------------------------------------------------ */

@page { size: A4; margin: 0; }

.nur-druck { display: none; }

@media print {
  :root {
    /* Haarlinie und Signalton nur fuers Papier. Peach (#FF6D64) auf
       Weiss steht bei 3:1 — zu duenn fuer 10px-Schrift und im
       Graustufendruck fast weg. Die dunklere Stufe der gleichen
       Farbe kommt auf 4,9:1 und bleibt als Grau lesbar. */
    --druck-linie: rgba(19,31,41,.28);
    --druck-signal: var(--ft-peach-40d);
  }

  /* Alles, was nur am Bildschirm fuehrt, faellt weg. */
  .kopf, .leiste, .ausgabe, .fortschritt { display: none !important; }
  .nur-druck { display: flex; }

  html, body {
    background: var(--ft-white);
    color: var(--fg-on-linen);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { display: block; min-height: 0; font-size: 10.5px; line-height: 1.5; }

  /* Das Blatt. Feste Masse statt Viewport-Einheiten — der Drucker
     hat keinen Viewport. overflow:hidden ist die Ein-Seiten-Garantie:
     lieber ein abgeschnittener Ueberlauf als ein zweites Blatt mit
     drei Zeilen drauf. */
  .buehne {
    width: 210mm;
    height: 297mm;
    max-width: none;
    padding: 14mm 14mm 10mm;
    margin: 0;
    overflow: hidden;
  }
  /* Der Platz fuer die Vorschlagsliste hat auf Papier nichts zu
     suchen. Die Klasse waere zwar staerker als die Regel darueber,
     hier steht sie aber gleich stark und spaeter. */
  body.vorschlaege-offen .buehne { padding-bottom: 10mm; }
  .schritt { animation: none; }
  .schritt--ergebnis { display: flex; flex-direction: column; height: 100%; }

  /* -- Briefkopf -------------------------------------------- */
  .dk-kopf {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 7mm;
    border-bottom: 1px solid var(--druck-linie);
  }
  .dk-kopf__logo { height: 24px; width: auto; display: block; }
  .dk-kopf__meta {
    text-align: right;
    font-size: 9px;
    line-height: 1.5;
    color: var(--fg-on-linen-faint);
  }

  /* -- Titel und Luftbild ----------------------------------- */
  .erg-oben {
    display: grid;
    grid-template-columns: 1fr 46mm;
    gap: 10mm;
    align-items: end;
    padding: 8mm 0 7mm;
  }
  .erg-titel { display: flex; flex-direction: column; gap: 4px; }
  .augenbraue {
    margin: 0;
    font-size: 11px;
    font-weight: var(--w-bold);
    letter-spacing: 0;
    color: var(--druck-signal);
  }
  .titel {
    margin: 0;
    font-size: 30px;
    font-weight: var(--w-bold);
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--fg-on-linen);
  }
  .unter { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-on-linen-muted); }

  .dach { display: flex; flex-direction: column; gap: 5px; margin: 0; }
  .dach__bild {
    width: 46mm;
    height: 46mm;
    border: 1px solid var(--druck-linie);
    border-radius: 0;
    background: none;
  }
  .dach__zeile {
    margin: 0;
    font-size: 9px;
    line-height: 1.4;
    color: var(--fg-on-linen-faint);
  }

  /* -- Leitkennzahl und Einordnung -------------------------- */
  /* Die Ersparnis steht gross und in Tinte, nicht in Peach: auf Papier
     ist Groesse die Hierarchie, Farbe waere nur Dekor. Rechts daneben
     der Vorbehalt — die Zahl bekommt ihre Einordnung auf derselben
     Zeile, nicht erst zwei Bloecke weiter unten. */
  .erg-leit {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 12mm;
    align-items: start;
  }
  .haupt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .haupt__label {
    margin: 0;
    font-size: 11px;
    font-weight: var(--w-medium);
    color: var(--fg-on-linen-muted);
  }
  .haupt__wert {
    font-size: 46px;
    font-weight: var(--w-bold);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--fg-on-linen);
    white-space: nowrap;
  }
  .haupt__zeile {
    padding-top: 2px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--fg-on-linen-muted);
  }
  .hinweisband {
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid var(--druck-linie);
    border-radius: 0;
    background: none;
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--fg-on-linen-muted);
    text-wrap: pretty;
  }

  /* -- Kennzahlen ------------------------------------------- */
  /* Outline statt gefuellter Kacheln: vier Zellen in einem Rahmen,
     getrennt von Haarlinien. Auf dem Schirm traegt die Fuellung die
     Gruppe, auf Papier reicht die Linie. */
  .kacheln {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 7mm 0 0;
    border: 1px solid var(--druck-linie);
    border-radius: 0;
    background: none;
    break-inside: avoid;
  }
  .kachel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6mm 5mm;
    background: none;
    border-right: 1px solid var(--druck-linie);
  }
  .kachel:last-child { border-right: 0; }
  .kachel__label {
    margin: 0;
    font-size: 10px;
    font-weight: var(--w-medium);
    color: var(--fg-on-linen-muted);
  }
  .kachel__wert {
    font-size: 19px;
    font-weight: var(--w-bold);
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--fg-on-linen);
  }

  /* Einheiten bleiben kleiner als die Zahl: gelesen wird der Wert,
     die Einheit bestaetigt ihn nur. */
  .einheit {
    margin-left: .22em;
    font-size: .5em;
    font-weight: var(--w-medium);
    letter-spacing: 0;
    color: var(--fg-on-linen-muted);
  }

  /* -- Richtpreis ------------------------------------------- */
  /* Der einzige blaue Rahmen auf dem Blatt. Das ist die Zahl, um die
     der Interessent zurueckruft — sie darf sich abheben, aber ohne
     Flaeche, damit der Ausdruck nicht auftraegt. */
  .preis {
    align-items: flex-end;
    gap: 12mm;
    margin: 7mm 0 0;
    padding: 7mm 8mm;
    border: 1px solid var(--ft-blue);
    border-radius: 0;
    break-inside: avoid;
  }
  .preis__label { font-size: 13px; font-weight: var(--w-bold); color: var(--ft-blue); }
  .preis__neben {
    max-width: 66mm;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--fg-on-linen-muted);
  }
  .preis__wert {
    font-size: 38px;
    font-weight: var(--w-bold);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ft-blue);
  }
  .preis__wert .einheit { color: var(--ft-blue); }

  /* -- Womit wir gerechnet haben ---------------------------- */
  /* Vier Angaben, die jede Rueckfrage vorwegnehmen. Bewusst klein und
     ohne Rahmen: das ist Beleg, keine Kennzahl — die Hierarchie darf
     nicht mit dem Kachelraster darueber konkurrieren. */
  .dk-annahmen {
    flex-direction: column;
    gap: 8px;
    /* Zusammen mit .erg-unten: die beiden auto-Raender teilen sich den
       Platz, den ein kurzes Blatt uebrig laesst. Statt eines Lochs
       stehen unten zwei gleich grosse Fugen. */
    margin: auto 0 0;
    padding-top: 7mm;
    border-top: 1px solid var(--druck-linie);
    break-inside: avoid;
  }
  .dk-annahmen__titel {
    font-size: 10px;
    font-weight: var(--w-bold);
    color: var(--fg-on-linen);
  }
  .dk-annahmen__reihe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8mm;
    margin: 0;
  }
  .dk-annahmen dt {
    font-size: 9px;
    line-height: 1.4;
    color: var(--fg-on-linen-faint);
  }
  .dk-annahmen dd {
    margin: 2px 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: var(--w-medium);
    color: var(--fg-on-linen);
  }

  /* -- Kleingedrucktes und Ansprechpartner ------------------ */
  /* margin-top:auto haengt den Block an den unteren Rand. Der Platz,
     den ein kurzes Blatt uebrig laesst, sammelt sich dadurch zwischen
     Preis und Kleingedrucktem — dort, wo das Dokument ohnehin seine
     Zaesur hat. Verteilt auf alle Fugen wuerde die Rhythmik mit jedem
     Kunden anders aussehen. */
  .erg-unten {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 12mm;
    align-items: start;
    margin: auto 0 0;
    padding-top: 7mm;
    break-inside: avoid;
  }
  .vorbehalt {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.6;
    color: var(--fg-on-linen-muted);
    text-wrap: pretty;
  }
  .vorbehalt strong { color: var(--fg-on-linen); font-weight: var(--w-bold); }

  .ap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid var(--druck-linie);
    border-radius: 0;
    break-inside: avoid;
  }
  .ap__label {
    margin: 0;
    font-size: 10.5px;
    font-weight: var(--w-bold);
    color: var(--druck-signal);
  }
  .ap__name {
    font-size: 15px;
    font-weight: var(--w-bold);
    letter-spacing: -.02em;
    color: var(--fg-on-linen);
  }
  .ap__firma, .ap__kontakt {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--fg-on-linen-muted);
  }
  .ap__text {
    margin: 0;
    padding-top: 2px;
    font-size: 9.5px;
    line-height: 1.55;
    color: var(--fg-on-linen-faint);
  }

  /* -- Fusszeile -------------------------------------------- */
  .dk-fuss {
    margin-top: 7mm;
    padding-top: 6px;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--druck-linie);
    font-size: 9px;
    color: var(--fg-on-linen-faint);
  }

  /* Registergericht, Nummer und Geschaeftsfuehrung. Eigene Zeile und
     nicht ein dritter Block in der Fusszeile darueber: die steht auf
     space-between, ein drittes Feld schoebe die Domain aus der Ecke.
     Keine eigene Linie, die der Fusszeile traegt sie fuer beide. */
  .dk-pflicht {
    padding-top: 3px;
    font-size: 9px;
    color: var(--fg-on-linen-faint);
  }
}