/* IIINITY-Advisor: eigene Bauteile der Advisor-Seiten. Nur Tokens der Designvorlage v1.0.1, keine festen Farbwerte. */

/* Das Attribut hidden gewinnt immer, auch gegen Bauteile mit eigener display-Angabe */
[hidden] {
  display: none !important;
}

/* Die Logozeile über der Leiste (Johannes 12.10.2026): IIINITY links, DGfRP oder das Logo des Büros mittig, Hell/Dunkel rechts. Drei
   Spalten, die äußeren gleich breit, damit die Mitte die Mitte des Fensters ist; die Logos stehen ohne eigene Hülle im Raster
   (.kopf-marken). Die Größen gelten auch gegen das Stylesheet des Büros (gemeinsam/farben.js setzt .kopf-logo--buero auf 44 px). */
.kopf--zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--abstand-gruppe);
  margin: 0;
  padding: var(--abstand-eng) 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.kopf--zeile .kopf-marken {
  display: contents;
}

.kopf--zeile .kopf-logo,
.kopf--zeile .kopf-name,
.kopf--zeile .thema-schalter {
  grid-row: 1;
}

.kopf--zeile .kopf-logo--links {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  max-height: 26px;
  /* Schmal schrumpft das Logo im Verhältnis mit seiner Spalte; das Polster der hellen Kachel im dunklen Thema passt mit hinein */
  max-width: calc(100% - 20px);
}

.kopf--zeile .kopf-logo--mitte,
.kopf--zeile .kopf-logo--buero,
.kopf--zeile .kopf-name {
  grid-column: 2;
  justify-self: center;
}

.kopf--zeile .kopf-logo--mitte,
.kopf--zeile .kopf-logo--buero {
  width: auto;
  height: auto;
  max-height: 32px;
  max-width: 40vw;
}

.kopf--zeile .kopf-name {
  max-width: 50vw;
  font-size: var(--t-text);
  text-align: center;
}

.kopf--zeile .thema-schalter {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

@media (max-width: 720px) {
  .kopf--zeile {
    padding: var(--abstand-eng) 14px;
  }
}

/* Auf dem Telefon mehr Platz für die äußeren Spalten: engere Fugen, die Mitte etwas kleiner */
@media (max-width: 480px) {
  .kopf--zeile {
    gap: var(--abstand-eng);
  }

  .kopf--zeile .kopf-logo--mitte,
  .kopf--zeile .kopf-logo--buero {
    max-height: 26px;
  }
}

.start-wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-block);
}

.start-karte {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.start-karte p {
  flex: 1;
  margin-bottom: var(--abstand-weit);
}

.start-karte .btn {
  align-self: flex-start;
}

/* „Geführte Beratung starten“ (Johannes 12.10.2026 abends): eine Karte, oben in einer Zeile suchen oder neu anlegen, darunter die
   Treffer; Feld und Knopf gleich hoch und unten bündig, „oder“ dazwischen. Schmal stehen sie untereinander. */
.start-beratung-zeile {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-gruppe);
}

.start-beratung-zeile .kunden-suche {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.start-beratung-zeile .kunden-suche input[type="search"] {
  height: 48px;
}

.start-oder {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-text);
  font-size: var(--t-text);
}

.start-beratung-zeile .btn {
  flex: none;
}

/* Die Treffer (oder der Hinweis ohne Kunden) mit Abstand unter der Zeile; leer nimmt die Liste keinen Platz */
.start-beratung .kunden-liste:not(:empty),
.start-beratung .kunden-leer {
  margin-top: var(--abstand-block);
}

.start-beratung .kunden-leer {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .start-beratung-zeile {
    flex-direction: column;
    align-items: stretch;
  }

  .start-oder {
    min-height: 0;
  }

  .start-beratung-zeile .btn {
    align-self: flex-start;
  }

}

/* Die Zeile unter der Karte: drei Verweise, klein, wie Links der Designvorlage; „Alle Kunden anzeigen“ mit seinem Punkt als Teil,
   der ohne Kunden entfällt */
.start-weitere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-eng) var(--abstand-gruppe);
  margin: var(--abstand-weit) 0 var(--abstand-block);
  font-size: var(--t-text);
}

.link-knopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-blue-text);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-knopf:focus-visible {
  outline: var(--ring-staerke) solid var(--ring-innen);
  outline-offset: var(--ring-abstand);
}

#alle-kunden-teil {
  display: contents;
}

/* Schmal die Verweise untereinander, ohne Punkte (sonst bliebe einer am Zeilenende hängen) */
@media (max-width: 720px) {
  .start-weitere {
    flex-direction: column;
    align-items: flex-start;
  }

  .start-weitere [aria-hidden="true"] {
    display: none;
  }
}

.datei-wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.aktiv-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-gruppe);
  margin-top: var(--abstand-zeile);
}

.werkzeug-hinweis {
  margin-bottom: var(--abstand-weit);
  font-size: var(--t-klein);
}

/* Kundendaten */

.feld.hat-fehler input,
.feld.hat-fehler select {
  border-color: var(--color-red);
}

.feld-fehler {
  margin-top: var(--abstand-eng);
  font-size: var(--t-klein);
  color: var(--color-red-text);
}

.kinder-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-polster) var(--abstand-block);
  margin-top: var(--abstand-polster);
}

.karte-erklaerung {
  margin: calc(-1 * var(--abstand-gruppe)) 0 var(--abstand-weit);
  font-size: var(--t-klein);
}

.pflicht {
  color: var(--color-red-text);
  font-weight: 600;
}

.btn-zeile--links {
  justify-content: flex-start;
  margin: var(--abstand-polster) 0 0;
}

.vertrag {
  margin-bottom: var(--abstand-polster);
  padding: var(--abstand-weit);
  background: var(--color-kennzahl-flaeche);
  border-radius: var(--radius);
}

.vertrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-gruppe);
  margin-bottom: var(--abstand-polster);
}

.vertrag-titel {
  font-family: var(--font-ueberschrift);
  font-weight: 600;
  color: var(--color-headings);
}

.vertrag-bedienung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-gruppe);
}

.vertrag-pruefen {
  display: flex;
  align-items: center;
  gap: var(--abstand-zeile);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--color-text-stark);
}

.btn--klein {
  min-height: 0;
  padding: var(--abstand-eng) var(--abstand-gruppe);
  font-size: var(--t-klein);
}

.einlesen {
  margin-top: var(--abstand-polster);
  padding: var(--abstand-polster);
  background: var(--color-surface);
  border-radius: var(--radius);
}

.einlesen-einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-zeile);
  margin-bottom: var(--abstand-gruppe);
  font-size: var(--t-klein);
}

.einlesen-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--abstand-zeile);
  align-items: start;
  padding: var(--abstand-eng);
  font-size: var(--t-klein);
}

.einlesen-zeile.ist-unsicher {
  background: var(--tint-warnung);
  border-radius: var(--radius-klein);
}

.einlesen-hochrechnungen {
  margin: var(--abstand-gruppe) 0;
  padding: 0;
  border: 0;
}

.fundstelle {
  display: block;
  color: var(--color-text);
}

/* Die Fundstelle mit „ansehen“ in einer Zeile */
.fundstelle-zeile {
  display: block;
}

.fundstelle-zeile .fundstelle {
  display: inline;
}

/* Ein Eintrag, den das Einlesen angelegt hat, zeigt bis „Übernehmen“ nur das Lesen; Einwilligung und Fläche eines Vertrags ruhen, solange
   gelesen wird oder ein Ergebnis dasteht */
.vertrag.ist-im-einlesen > .raster,
.einlesen.ist-belegt > .einlesen-einwilligung,
.einlesen.ist-belegt > .einlesen-zone {
  display: none;
}

/* Einlesen (14.10.2026, Johannes: „deutlich sichtbar, dass eingelesen wird“). Die Fläche zum Hineinziehen: gestrichelt, beim Ziehen und
   im Fokus golden. Unter den Verträgen legt sie den Eintrag an (einlesen--neu), je Vertrag liest sie in ihn. */
.einlesen--neu {
  margin-top: var(--abstand-gruppe);
  padding: 0;
  background: none;
}

.einlesen-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-zeile) var(--abstand-gruppe);
  margin-bottom: var(--abstand-zeile);
  padding: var(--abstand-polster);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--zeit-ruhig) var(--kurve-zustand), background-color var(--zeit-ruhig) var(--kurve-zustand);
}

.einlesen-zone--neu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--abstand-block);
  background: var(--color-surface);
}

.einlesen-zone--neu .einlesen-zone-voll {
  grid-column: 1 / -1;
  margin: 0;
}

.einlesen-zone-symbol {
  display: block;
  width: 40px;
  height: 48px;
  color: var(--color-primary);
}

.einlesen-zone-symbol svg {
  width: 100%;
  height: 100%;
}

.einlesen-zone-kopf {
  display: grid;
  gap: var(--abstand-eng);
}

.einlesen-zone-titel {
  font-family: var(--font-ueberschrift);
  font-size: var(--t-kartentitel);
  color: var(--color-marke-schrift);
}

.einlesen-zone-text {
  font-size: var(--t-klein);
  color: var(--color-text);
}

/* Nur der Rand wird golden: der goldene Hauch heißt auf der Seite „von der KI ausgefüllt“ (Johannes 14.10.2026) */
.ist-ziehen .einlesen-zone:not(.ist-aus),
.einlesen-zone:focus-within {
  border-color: var(--color-primary);
}

/* Kam eine Datei vor der Einwilligung, trägt die Einwilligung den goldenen Rahmen, bis sie bestätigt ist */
.einlesen-einwilligung.ist-bitte {
  outline: var(--ring-staerke) solid var(--color-primary);
  outline-offset: var(--ring-abstand);
  border-radius: var(--radius-klein);
}

/* Solange gelesen wird: links die Seiten mit der Leselinie, rechts die Schritte und die gesuchten Felder */
.einlesen-lesen {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--abstand-block);
  align-items: start;
  margin-top: var(--abstand-gruppe);
  padding: var(--abstand-polster);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.einlesen-seiten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-zeile);
}

.einlesen-seite {
  position: relative;
  display: block;
  width: 64px;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  background: var(--color-chip-grund);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-klein);
  transition: transform var(--zeit-ruhig) var(--kurve-zustand), box-shadow var(--zeit-ruhig) var(--kurve-zustand);
}

/* Die erste Seite groß, die übrigen klein daneben */
.einlesen-seite:first-child {
  width: 100%;
  max-width: 220px;
}

.einlesen-seite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Ohne Seitenbild (ein PDF, das selbst hinausgeht): ein Blatt mit Zeilen */
.einlesen-seite--platz {
  background:
    repeating-linear-gradient(to bottom, transparent 0 14px, var(--color-border) 14px 16px) 14px 22px / calc(100% - 28px) calc(100% - 44px) no-repeat,
    var(--color-chip-grund);
}

.einlesen-seite.is-liest {
  box-shadow: 0 0 0 var(--ring-staerke) var(--color-primary);
}

/* Die goldene Leselinie fährt über die Seite, die gerade dran ist */
.einlesen-seite.is-liest::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-primary) 35%, transparent) 85%, var(--color-primary));
  animation: einlesen-linie 1.6s ease-in-out infinite;
}

@keyframes einlesen-linie {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(560%);
  }
}

.einlesen-schritte {
  display: grid;
  gap: var(--abstand-zeile);
  margin: 0 0 var(--abstand-gruppe);
  padding: 0;
  list-style: none;
  font-size: var(--t-text);
  color: var(--color-text);
}

.einlesen-schritte li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--abstand-zeile);
}

.einlesen-schritte li::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-rund);
}

.einlesen-schritte li.ist-aktiv {
  font-weight: 600;
  color: var(--color-text-stark);
}

.einlesen-schritte li.ist-aktiv::before {
  border-color: var(--color-primary);
  border-top-color: transparent;
  animation: einlesen-dreht 0.9s linear infinite;
}

.einlesen-schritte li.ist-fertig::before {
  content: "✓";
  display: grid;
  place-items: center;
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--color-auf-gold);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@keyframes einlesen-dreht {
  to {
    transform: rotate(360deg);
  }
}

.einlesen-gesucht-titel {
  margin: 0 0 var(--abstand-eng);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--color-text);
}

.einlesen-gesucht {
  display: grid;
  gap: var(--abstand-eng);
  margin: 0 0 var(--abstand-gruppe);
  padding: 0;
  list-style: none;
  font-size: var(--t-klein);
  color: var(--color-text);
}

.einlesen-gesucht li {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  align-items: center;
  gap: var(--abstand-zeile);
}

/* Platzhalter für den Wert, der gleich an dieser Stelle steht */
.einlesen-platz {
  height: 10px;
  border-radius: var(--radius-rund);
  background: linear-gradient(90deg, var(--color-border) 0%, var(--tint-gold) 50%, var(--color-border) 100%) 0 0 / 200% 100%;
  animation: einlesen-schimmer 1.4s linear infinite;
}

@keyframes einlesen-schimmer {
  to {
    background-position: -200% 0;
  }
}

.einlesen-kopf {
  margin-bottom: var(--abstand-zeile);
}

.einlesen-ansehen {
  margin-left: var(--abstand-eng);
  padding: 0;
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--color-marke-schrift);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

.einlesen-bisher {
  margin-left: var(--abstand-eng);
  font-size: var(--t-klein);
  color: var(--color-text);
}

.einlesen-dialog {
  max-width: min(920px, calc(100vw - 32px));
  padding: var(--abstand-polster);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
}

.einlesen-dialog::backdrop {
  background: color-mix(in srgb, var(--color-secondary-deep) 55%, transparent);
}

.einlesen-dialog figure {
  margin: 0 0 var(--abstand-zeile);
}

.einlesen-dialog img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto var(--abstand-zeile);
  border: 1px solid var(--color-border);
}

.einlesen-dialog figcaption {
  font-size: var(--t-klein);
}

/* Nach „Übernehmen“ leuchten die übernommenen Felder kurz golden auf; sie tragen die Marke „KI“ (gemeinsam/erfassung.css) */
.ist-eingelesen {
  animation: einlesen-leuchten 2.4s var(--kurve-zustand);
}

@keyframes einlesen-leuchten {
  from {
    background-color: var(--tint-gold);
    outline: var(--ring-staerke) solid var(--color-primary);
  }

  to {
    outline: var(--ring-staerke) solid transparent;
  }
}

@media (max-width: 640px) {
  .einlesen-lesen {
    grid-template-columns: minmax(0, 1fr);
  }

  .einlesen-seite:first-child {
    max-width: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .einlesen-seite.is-liest::after,
  .einlesen-schritte li.ist-aktiv::before,
  .einlesen-platz,
  .ist-eingelesen {
    animation: none;
  }

  .einlesen-seite.is-liest::after {
    top: auto;
    bottom: 0;
    height: 4px;
    background: var(--color-primary);
  }
}

@media print {
  .einlesen--neu {
    display: none !important;
  }

  /* Seitenumbrüche im Dokument: die Blätter verteilt oberflaeche/umbruch.js vor dem Druck, auch vor Unterkapiteln und Abschnitten (Freigabeliste
     B 1b, Johannes 16.10.2026). Läuft ein Blatt dennoch über, nie mitten in einem kleinen Block und nie zwischen einer Überschrift und ihrem Text */
  #druck-bereich h1, #druck-bereich h2, #druck-bereich h3, #druck-bereich h4 {
    break-after: avoid;
  }

  #druck-bereich p, #druck-bereich li, #druck-bereich dl, #druck-bereich tr, #druck-bereich .option, #druck-bereich .gegenueber {
    break-inside: avoid;
  }

  /* Ein Kapitel, das mitten auf einem Blatt beginnt, setzt sich vom vorigen ab */
  #druck-bereich .druck-inhalt:not(.druck-deckblatt) > .seitentitel:not(:first-child) {
    margin-top: var(--abstand-rand);
  }
}

/* Warum „Weiter“ noch nicht geht, direkt unter dem Knopf, mit „Zur Stelle“ (beratung.js, weiterGrund) */
.g-weiter-grund {
  margin-top: var(--abstand-zeile);
  color: var(--color-red-text);
  font-size: var(--t-klein);
}

.unsicher-marke {
  color: var(--color-red-text);
  font-weight: 600;
}

.ist-aus {
  opacity: var(--zustand-aus);
  pointer-events: none;
}

/* Zwei Spalten: die Kundenmaske (Formular und Gespräch) und die Kundendaten (Akte und Gespräch); schmal eine Spalte */
.beratung-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--abstand-block);
  align-items: start;
}

/* Kundendaten (Entwurf „Die Beratung führt“, 14.10.2026, Abschnitt 4.1): links die Akte in einer Spalte, rechts das Gespräch mit der KI;
   ohne eingerichtete KI (Karte verborgen) die Akte allein in voller Breite */
.beratung-raster:has(> .gespraech-spalte) {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.beratung-raster:has(> .gespraech-spalte > .erfassung[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.gespraech-spalte:has(> .erfassung[hidden]) {
  display: none;
}

.akte-spalte {
  min-width: 0;
}

/* Das Gespräch klebt unter der Leiste; ihre Höhe misst die Leiste selbst und setzt sie am Dokument (--leiste-hoehe, gemeinsam/kette.js),
   weil die Leiste am Tablet in zwei Zeilen umbricht (Schluss C1, Punkt 7). Ohne Messung die Höhe der einzeiligen Leiste. Ein gemessener
   Wert, kein Gestaltungswert. */
:root {
  --leiste-hoehe: 58px;
}

/* So hoch wie der Bildschirm unter der Leiste, mit eigenem Rollen; der Verlauf nimmt den Platz, Frage und Eingabe bleiben im Bild */
.gespraech-spalte {
  position: sticky;
  top: calc(var(--leiste-hoehe) + var(--abstand-polster));
  min-width: 0;
}

.gespraech-spalte .erfassung {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--leiste-hoehe) - var(--abstand-polster) - var(--abstand-zeile));
  margin-bottom: 0;
  overflow-y: auto;
}

.gespraech-spalte .erfassung-verlauf {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Bei zwei Spalten arbeitet die Karte wie ein Chat (Schlussprüfung C1): Im Gespräch ist sie so hoch wie der Bildschirm unter der Leiste,
   der Verlauf nimmt ihre freie Höhe (mindestens 200 px); Frage, Knöpfe, Eingabe, „Senden“ und „Gespräch beenden“ stehen unten in der
   Karte, etwas dichter als auf den anderen Seiten. Die Erklärung der Karte steht vor dem Gespräch; im Gespräch sagt die Kennzeichnung,
   was die KI tut. Reicht die Höhe nicht (ein kleiner Bildschirm), rollt die Karte, und die Seite hält ihr Ende im Bild (akte-seite.js,
   gefragtZeigen). */
@media (min-width: 1001px) {
  .gespraech-spalte .erfassung {
    padding: var(--abstand-block);
  }

  .gespraech-spalte .erfassung > .karte-kopf {
    margin-bottom: var(--abstand-gruppe);
  }

  .gespraech-spalte .erfassung:has(> #erfassung-frage:not([hidden])) {
    height: calc(100dvh - var(--leiste-hoehe) - var(--abstand-polster) - var(--abstand-zeile));
    max-height: calc(100dvh - var(--leiste-hoehe) - var(--abstand-polster) - var(--abstand-zeile));
  }

  .gespraech-spalte .erfassung:has(> #erfassung-frage:not([hidden])) > .karte-erklaerung {
    display: none;
  }

  .gespraech-spalte .erfassung-verlauf {
    min-height: min(200px, 25vh);
    margin: var(--abstand-gruppe) 0;
  }

  .gespraech-spalte #erfassung-frage {
    flex: none;
    margin-top: 0;
  }

  .gespraech-spalte #erfassung-frage .btn-zeile--links {
    margin-top: var(--abstand-zeile);
  }

  .gespraech-spalte #erfassung-antwort {
    display: block;
  }

  .gespraech-spalte #erfassung-frage #erfassung-wahl {
    gap: var(--abstand-zeile);
    margin: var(--abstand-zeile) 0 var(--abstand-gruppe);
  }

  .gespraech-spalte #erfassung-frage .btn:not(.btn--klein) {
    min-height: 40px;
    padding-top: var(--abstand-eng);
    padding-bottom: var(--abstand-eng);
  }

  .gespraech-spalte #erfassung-beenden {
    margin-top: 0;
  }
}

/* Mit dem Finger (Tablet quer) bleiben die Tippflächen 44 px hoch */
@media (min-width: 1001px) and (pointer: coarse) {
  .gespraech-spalte #erfassung-frage .btn:not(.btn--klein) {
    min-height: 44px;
  }
}

/* Bei einer Frage an den Kunden, deren Antwort nicht mehr gilt: der Grund mit beiden Beträgen über den Antworten */
.frage-neu {
  margin: var(--abstand-eng) 0;
}

.bereich .karte-zwischen,
#fragen-an-den-kunden .karte-zwischen {
  margin-top: var(--abstand-block);
}

/* Der Stand von „Was sich ergibt“ als Schild wie auf der Seite Ergebnis (14.10.2026); ohne Stand kein leeres Schild */
.bereich-stand:empty {
  display: none;
}

/* Fragen an den Kunden wie die übrigen Felder der Akte, ohne eigenen Kasten (Johannes 14.10.2026: der goldene Hauch heißt auf der Seite
   „von der KI ausgefüllt“) */
.bereich-fragen {
  margin-bottom: var(--abstand-block);
}

/* Die Erklärung des Moduls steht ruhig vor den Antworten einer Frage, in der Schrift der Eingabefelder */
.frage-vorher {
  margin: var(--abstand-eng) 0 var(--abstand-gruppe);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--color-text);
}

/* Die Erklärung einer langen Frage normal unter der Frage */
.frage-erklaerung {
  display: block;
  margin-top: var(--abstand-eng);
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

.bereich-fragen summary {
  cursor: pointer;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--color-text-stark);
}

/* Zwischen den Fragen so viel Luft wie zwischen den Abschnitten einer Karte; die Frage fett in Textgröße (größer als die Erklärung, so groß
   wie die Antworten), Frage und Erklärung höchstens etwa 70 Zeichen breit (Johannes 14.10.2026: „klein klein und rummelig“) */
.bereich-fragen .feld + .feld,
.bereich-fragen > summary + .feld {
  margin-top: var(--abstand-block);
}

.bereich-fragen .feld-titel,
.bereich-fragen .feld > label {
  max-width: 72ch;
  margin-bottom: var(--abstand-zeile);
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.45;
}

/* Auswahl als Liste zum Anklicken (Johannes 14.10.2026: ruhig wie die Eingabefelder): jede Antwort ein gerahmtes Feld in Textgröße,
   ganz lesbar, die ganze Fläche anklickbar; kurze Antworten nebeneinander, lange über die Breite. Gewählt mit dem Rand der Eingaben, nie
   in Gold (Gold heißt auf der Seite „von der KI ausgefüllt“). */
.wahl-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--abstand-zeile);
}

.wahl-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-zeile);
  min-height: 44px;
  padding: var(--abstand-zeile) var(--abstand-polster);
  font-size: var(--t-text);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-stark);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--zeit-schnell) var(--kurve-zustand), background-color var(--zeit-schnell) var(--kurve-zustand);
}

.wahl-zeile:hover {
  border-color: var(--color-eingabe-rand);
}

.wahl-zeile:has(input:checked) {
  border-color: var(--color-eingabe-rand);
  background: var(--color-surface-alt);
}

.wahl-zeile:has(input:focus-visible) {
  outline: var(--ring-staerke) solid var(--color-eingabe-rand);
  outline-offset: var(--ring-abstand);
}

.wahl-zeile input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-eingabe-rand);
}

/* Welle 14, D14.5: eine selten passende Antwort (Merkmal leise, etwa „Nur für einen Teil“) leiser, gleich hoch zum Antippen */
.wahl-zeile--leise {
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--color-text);
}

.bereich .option-raster {
  grid-template-columns: 1fr;
}

.bereich-vertrag {
  margin-bottom: var(--abstand-polster);
}

.bereich-vertrag-name {
  margin-bottom: var(--abstand-zeile);
  font-size: var(--t-text);
  color: var(--color-headings);
}

.bereich-wege {
  margin: var(--abstand-polster) 0 0;
  font-size: var(--t-klein);
}

/* Band des Vergleichs (B.wertband): Liegt der Vertrag vorn, ist das Stück am längeren Balken kein Vorteil der Alternative; Klammer und Text
   neutral wie die Zahl (.g-zahl.ist-neutral in gestaltung.css; Welle 6, K2, M12-07) */
.g-wb-unterschied.ist-neutral .g-wb-klammer {
  border-color: var(--color-text-stark);
}

.g-wb-unterschied.ist-neutral .g-wb-klammer-text {
  color: var(--color-text-stark);
}

/* Kundenansicht: Rollt eine Folie auch mit Kurzform noch (kundenansicht.js, einpassen; Welle 6, K10), rücken ihre Teile enger zusammen; kein
   Inhalt fällt weg, wie ist-eng im Druck. Nur die Abstände über den Teilen, nicht in Zeilen wie unter den Wegen */
.ka-folie.ist-dicht .ka-kennzahlen,
.ka-folie.ist-dicht .ka-block {
  margin-top: 12px;
}

.ka-folie.ist-dicht .ka-folie-innen > .ka-leise,
.ka-folie.ist-dicht .ka-weg-inhalt > .ka-leise {
  margin-top: 8px;
}

.ka-folie.ist-dicht .ka-fussnote {
  margin-top: 10px;
  padding-top: 6px;
}

.ka-folie.ist-dicht .g-wertband,
.ka-folie.ist-dicht .ka-rechnung-zeile {
  margin-top: 16px;
}

.ka-folie.ist-dicht .ka-blick-raster {
  row-gap: 8px;
}

/* Welle 11, Teil 2 (M32-05): auf „Auf einen Blick“ auch die Abstände zwischen den Gruppen einer Spalte und in einer Gruppe (sonst 14 und 8 px,
   gestaltung.css); so passt Bernds Zeile zu 85 bei 1180 × 820 (vorher 4 px zu viel) */
.ka-folie.ist-dicht .ka-blick-spalte {
  gap: 8px;
}

.ka-folie.ist-dicht .ka-blick-gruppe {
  gap: 6px;
}

/* Welle 11, D11.5 und D11.6: auf der Titelfolie die Liste der Kapitel enger (mit „Ihre Fragen“ und dem Beipackzettel wurde sie länger; A2 rollte
   eng mit 3 px Abstand je Zeile noch um 3 px) */
.ka-folie.ist-dicht .ka-agenda {
  margin-top: 16px;
}

.ka-folie.ist-dicht .ka-agenda li {
  padding: 2px 0;
}

.ka-folie.ist-dicht .ka-agenda li::before {
  top: 24px;
}

/* Welle 11, Teil 2: Rollt „Was zu Ihnen passt“ mit zwei Wegen auch in der Kurzform, rücken die Karten enger zusammen (nichts fällt weg). Gemessen
   21.10.2026: A2 mit zwei Wegen (w7-n) seit dem längeren Grund des ETF-Depots und der erklärten Vorabpauschale (U12.3) bei 1280 × 800 675 bei 662 px, so gesetzt 662 */
.ka-folie.ist-dicht .g-weg--abwaegen {
  padding: 10px 16px 12px;
}

.ka-folie.ist-dicht .g-weg--abwaegen .g-weg-kosten {
  margin-top: 8px;
  padding-top: 6px;
}

.ka-folie.ist-dicht .g-weg--abwaegen .g-weg-wahl {
  padding-top: 10px;
}

.ka-folie.ist-dicht .g-wege--abwaegen {
  margin-top: 8px;
}

.ka-folie.ist-dicht .g-weg--abwaegen .g-weg-pc {
  margin-top: 4px;
}

.ka-folie.ist-dicht .g-weg--abwaegen .g-weg-pc-liste li + li {
  margin-top: 0;
}

/* Welle 11, D11.6: die Kicker des Beipackzettels auf der Folie stehen in gemeinsam/gestaltung/gestaltung.css (--ka-klein ist ein Wert dieser Schicht) */

@container g (min-width: 701px) {
  .ka-folie .g-zettel-zeile {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

/* Welle 11, D11.6: der Beipackzettel auf der Folie enger, wenn sie sonst rollt (Zeilen des Bausteins B.zettel, gestaltung.css: 12 px oben und unten) */
.ka-folie.ist-dicht .g-zettel-zeile {
  padding: 6px 0;
}

/* Welle 17, D17a.1 (M48-07, M45-03): Ist eine Antwort allein länger als die Folie „Ihre Fragen“ (Telefon), wird sie nicht geteilt; ihre Quellen
   stehen dann im Aufklapper, und sie steht enger: in der kleinen Schrift der Folie, mit knapperen Abständen (kundenansicht.js, fragenTeilen).
   Gemessen 22.10.2026 bei 390 × 844: A2 F02 1.023 px bei 680, D1 F10 999, so gesetzt 680. Die Schrift der Antwort steht in gemeinsam/gestaltung/gestaltung.css
   (--ka-klein ist ein Wert dieser Schicht, der Prüfer der Designvorlage kennt ihn für advisor.css nicht) */

.ka-folie.ist-eng .ka-block {
  margin-top: 8px;
}

.ka-folie.ist-eng .ka-block h3 {
  margin-bottom: 2px;
}

.ka-folie.ist-eng .g-mehr {
  margin-top: 6px;
}

/* Welle 19, D19b.2: Rollt am Telefon eine Folie auch geteilt noch (kundenansicht.js, folienTeilen: ist-eng), weil ein Block allein höher ist als sie
   oder weil sie nicht geteilt wird, stehen ihre Teile enger: nur Abstände und Zeilenhöhe, die Schrift bleibt. Gemessen 22.10.2026 bei 390 × 844:
   A1 mit der Karte der ETF-Rentenversicherung allein (659 px) 721 bei 680, D3 auf „Was wäre, wenn …“ 722 bei 680, zwei Verträge mit „Ihre Verträge im
   Vergleich“ allein (626 px, Mehrbeträge und Annahme bleiben zusammen) auf „Auf einen Blick (2)“ 715 bei 680 */
@container g (max-width: 700px) {
  .ka-folie.ist-eng .ka-blick-raster {
    margin-top: 6px;
  }

  .ka-folie.ist-eng .blick-satz {
    line-height: 1.3;
  }

  .ka-folie.ist-eng .g-wege--abwaegen {
    margin-top: 4px;
  }

  .ka-folie.ist-eng .g-weg--abwaegen {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .ka-folie.ist-eng .g-weg--abwaegen .g-weg-pc-titel {
    line-height: 1.3;
  }

  .ka-folie.ist-eng .g-weg--abwaegen .g-weg-pc-liste,
  .ka-folie.ist-eng .g-weg--abwaegen .g-weg-kosten {
    line-height: 1.25;
  }

  .ka-folie.ist-eng .g-weg--abwaegen .g-weg-kosten {
    margin-top: 4px;
  }

  .ka-folie.ist-eng .www .ka-vorlesen {
    line-height: 1.35;
  }

  .ka-folie.ist-eng .www-regler {
    gap: 6px;
    margin-top: 8px;
  }

  .ka-folie.ist-eng .www-wahl {
    gap: 6px;
  }

  .ka-folie.ist-eng .www-ergebnis {
    margin-top: 8px;
  }

  .ka-folie.ist-eng .www-ergebnis .ka-kennzahlen {
    gap: 2px;
    margin-top: 6px;
  }

  .ka-folie.ist-eng [data-www-band] .g-lebensband {
    margin-top: 6px;
  }

  .ka-folie.ist-eng .www-band-unter {
    line-height: 1.4;
  }
}

/* Welle 17, Zusatz des Leiters zu D17a (Heinrich im Weg mit Rente bei 1280 × 800: 712 bei 662 px, auch mit den Kurzformen): Rollt „Wie lange Ihr
   Geld reicht“ eng gesetzt, rücken die Zeilen der Tabelle enger zusammen, und der Satz darüber darf so breit stehen wie der zum Vorlesen (vorher
   zwei Zeilen bei „mit Ihren 200.000 €“). So bleiben alle Zeilen stehen, auch „Mit Ihrem Vertrag bis etwa“, die sonst als Letztes ginge */
.ka-folie.ist-dicht .entnahme-tabelle th,
.ka-folie.ist-dicht .entnahme-tabelle td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.ka-folie.ist-dicht .ka-entnahme-kopf {
  max-width: 92ch;
}

/* Welle 17, D17a.2 (M45-04): Passen die Punkte neben „x von y“ nicht zwischen „Zurück“ und „Weiter“ (Telefon mit zehn Kapiteln), steht nur
   „x von y“ (kundenansicht.js, zeige) */
.ka-fortschritt.ist-knapp .ka-faden {
  display: none;
}

/* Welle 7, N4 (H8, M13-03): Was der Staat dazugibt, unter der Einzahlung in der Karte eines Wegs (B.wegAbwaegen, zusatz; Größe der Einzahlung
   über g-weg-betrag), ruhiger als sie. Rollt die Folie, entfällt er (data-kurz, kundenansicht.js) */
.g-weg-zusatz {
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}

/* Welle 7, N6 (H7, A3): „Wie angelegt wird“ ohne IIINITY-Strategie mit einem Vertrag: sein Name und seine Werte als Zeile wie auf der Folie der
   Lücke (ka-glied), ohne Rechenzeichen, darum mit mehr Luft zwischen den Werten */
.ka-anlage-werte {
  margin-top: 20px;
}

.ka-anlage-werte .ka-rechnung-zeile {
  margin-top: 2px;
  gap: 4px 40px;
}

/* Welle 7, N8 (H9, M13-04): unter „Das fehlt noch“ klein, was das in heutigem Geld ist (Größe und Farbe wie der Name der Kachel,
   ka-kennzahl-name) */
.ka-kennzahl-unter {
  line-height: 1.3;
}

/* Welle 11, D11.4 (J10): die Zeile des Aufbaus nahe der Benchmark der Strategie ruhig hervorgehoben (Vorschlag Spur L: Rand, kein Gold; Gold heißt
   „von der KI“) */
.ka-kennzahl--benchmark {
  border-left-color: var(--color-text-stark);
}

/* Nicht an „Was sich ergibt“ (.g-ergibt): dort nimmt die Gestaltung nur die Kapitel zurück (gestaltung.css) */
.ist-veraltet:not(.g-ergibt) {
  opacity: var(--zustand-aus);
}

.woher {
  margin-top: var(--abstand-zeile);
  font-size: var(--t-klein);
}

.woher summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-stark);
}

.woher p,
.woher ul {
  margin: var(--abstand-zeile) 0 0;
}

/* „Noch offen“ (Entwurf „Die Beratung führt“, 14.10.2026, Abschnitt 4.2): je Punkt der Text und „Zur Stelle“, auf der Seite Ergebnis
   unter den Knöpfen, auf den Kundendaten über ihnen */
/* Auf der Seite Ergebnis steht der Block über den Karten und hält denselben Abstand wie sie untereinander */
#inhalt > .noch-offen {
  margin-bottom: var(--abstand-block);
}

.noch-offen-liste {
  margin: var(--abstand-eng) 0 0;
  padding-left: var(--abstand-polster);
}

.noch-offen-liste li + li {
  margin-top: var(--abstand-eng);
}

.noch-offen-sprung {
  margin-left: var(--abstand-zeile);
  font-weight: 500;
  white-space: nowrap;
}

/* Die Stelle, zu der „Zur Stelle“ springt (einige Sekunden), und das Feld, nach dem das Gespräch gerade fragt: ein goldener Rahmen */
.ist-angesprungen,
.ist-gefragt {
  outline: var(--ring-staerke) solid var(--color-primary);
  outline-offset: var(--ring-abstand);
  border-radius: var(--radius-klein);
}

@media (max-width: 1000px) {
  .beratung-raster,
  .beratung-raster:has(> .gespraech-spalte),
  .beratung-raster:has(> .gespraech-spalte > .erfassung[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .beratung-raster > .erfassung {
    order: -1;
  }

  /* Eine Spalte: das Gespräch oben wie bisher, ohne eigenes Rollen */
  .gespraech-spalte {
    position: static;
    order: -1;
  }

  .gespraech-spalte .erfassung {
    max-height: none;
    overflow: visible;
  }

  .gespraech-spalte .erfassung-verlauf {
    max-height: min(320px, 35vh);
  }
}

/* Ergebnis */

.status-marke {
  display: inline-block;
  margin-left: var(--abstand-zeile);
  padding: var(--abstand-fuge) var(--abstand-gruppe);
  border-radius: var(--radius-rund);
  font-size: var(--t-klein);
  font-weight: 600;
  vertical-align: middle;
  background: var(--color-kennzahl-flaeche);
  color: var(--color-text-stark);
}

.status-marke.ist-aktuell {
  background: var(--tint-erfolg);
  color: var(--color-green-text);
}

.status-marke.ist-veraltet {
  background: var(--tint-warnung);
  color: var(--color-red-text);
}

.option-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-polster);
}

.option {
  padding: var(--abstand-weit);
  background: var(--color-kennzahl-flaeche);
  border-radius: var(--radius);
}

.option h4 {
  margin-bottom: var(--abstand-zeile);
  font-size: var(--t-text);
}

.option ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.option li {
  padding: var(--abstand-eng) 0;
  font-size: var(--t-klein);
}

.option li span {
  display: block;
}

.option li span:first-child {
  font-weight: 600;
  color: var(--color-text-stark);
}

p + .option-raster {
  margin-top: var(--abstand-gruppe);
}

.option-raster + .hinweis,
.option-raster + .druck-absatz {
  margin-top: var(--abstand-gruppe);
}

.hinweis + .karte-zwischen {
  margin-top: var(--abstand-abschnitt);
}

.option-warum {
  margin: var(--abstand-eng) 0 0;
  font-size: var(--t-klein);
  color: var(--color-text);
}

/* Wie angelegt wird (Plan 2b): ein Baustein (anlageHtml in dokument.js) in der Karte „Was sich ergibt“, auf der Ergebnisseite, in der
   Kundenansicht und im Dokument: Strategie, Ausrichtung, fester Satz, Wahl, Antworten des Kunden, Gründe und Hinweise */
.anlage-karte p {
  margin: 0 0 var(--abstand-zeile);
  font-size: var(--t-klein);
}

.anlage-karte .anlage-zwischen {
  margin: var(--abstand-zeile) 0 0;
  font-weight: 600;
  color: var(--color-text-stark);
}

/* Gegenüberstellung: was je Seite bleibt, mit Balken im Verhältnis der Beträge */
.gegenueber-kopf {
  margin: var(--abstand-gruppe) 0 0;
  font-weight: 600;
  color: var(--color-text-stark);
}

.gegenueber {
  display: grid;
  gap: var(--abstand-polster);
  margin: var(--abstand-gruppe) 0;
}

.gegenueber-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--abstand-gruppe);
  row-gap: var(--abstand-eng);
  align-items: baseline;
}

.gegenueber-name {
  color: var(--color-text-stark);
}

.gegenueber-betrag {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-headings);
}

.gegenueber-balken {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-klein);
  background: var(--color-surface-alt);
}

.gegenueber-balken > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-klein);
}

.serie-kunde {
  background: var(--serie-kunde);
}

.serie-ki-depot {
  background: var(--serie-ki-depot);
}

.serie-ki-nettopolice {
  background: var(--serie-ki-nettopolice);
}

.gegenueber-fazit {
  font-weight: 600;
  color: var(--color-headings);
}

.verlauf {
  margin: 0 0 var(--abstand-polster);
  padding-left: var(--abstand-weit);
  font-size: var(--t-klein);
}

/* Kundenansicht: eine ganze Seite über der Seite, auch über der Leiste */
.kundenansicht {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-y: auto;
  padding: var(--abstand-rand) var(--abstand-polster);
  background: var(--color-bg);
}

body.zeigt-kundenansicht {
  overflow: hidden;
}

/* Welle 11, D11.2: Ist der Schalter der Seite Ergebnis aus, steht „Wann sich der Wechsel lohnt“ nicht in der Kundenansicht (kundenansicht.js);
   auf der Seite steht der Block immer, der Schalter direkt darunter */
.kundenansicht.ohne-schwelle [data-schwelle] {
  display: none;
}

.schwelle-schalter {
  margin: var(--abstand-eng) 0 var(--abstand-polster);
}

/* Welle 11, D11.5: Karte „Fragen Ihres Kunden“ auf der Seite Ergebnis: je Treffer die Frage als Aufklapper mit der Antwort, daneben der Knopf; die
   übernommenen darunter mit „Entfernen“ (ergebnis-seite.js). Nur aus Tokens */
.fragen-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-eng) var(--abstand-polster);
  padding: var(--abstand-eng) 0;
  border-bottom: 1px solid var(--color-border);
}

.fragen-eintrag > .g-mehr {
  flex: 1 1 24rem;
  margin-top: 0;
}

/* Gestaltung Stufe 2, G2.6: das Suchfeld als Feld B2 (gestaltung.css), so breit wie vorher; die Zwischentitel im Gesprächsverlauf leise als Kicker,
   ohne den Balken in der Akzentfarbe */
.fragen-feld {
  max-width: 420px;
  margin-bottom: var(--abstand-block);
}

#verlauf .karte-zwischen {
  padding-left: 0;
  border-left: 0;
  font-family: var(--font);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.fragen-leer {
  margin: 0;
  font-size: var(--t-label);
  color: var(--color-text);
}

.fragen-leer:empty {
  display: none;
}

.fragen-uebernommen {
  margin-top: var(--abstand-polster);
}

/* Dokument */

/* 48 mm statt 60 mm: Vorhaben und Umfang (Freigabeliste C 1b.3, C 1b.4) stehen jetzt auch auf dem Deckblatt, es bleibt ein Blatt.
   Welle 13, P13.1 (Messung 9, M33-02, M34-01): Mit Vertrag, Registernummer, Kontakt und dem Faden der Kapitel (G2.7) war das Deckblatt bis 267 mm
   hoch, sein Fuß stand allein auf Blatt 2. Der Raum über den Logos ist darum kein Polster des Inhalts mehr, sondern ein Abstand im Blatt fester
   Höhe (257 mm wie min-height in iiinity-druck.css), der nachgibt, so weit der Inhalt ihn braucht; passt alles, bleiben es 48 mm wie vorher */
@media print {
  #druck-bereich .druck-seite:has(> .druck-deckblatt) {
    height: 257mm;
  }

  #druck-bereich .druck-seite:has(> .druck-deckblatt)::before {
    content: '';
    flex: 0 1 48mm;
  }
}

.druck-deckblatt .seitentitel {
  margin-bottom: var(--abstand-gruppe);
}

.druck-logos {
  display: flex;
  align-items: center;
  gap: var(--abstand-block);
  margin-bottom: 30mm;
}

.druck-logos img {
  /* 11 mm statt 14 mm (Johannes 14.10.2026): kleiner wirkt auch ein Logo mit wenigen Bildpunkten schärfer, wichtig beim Logo des Büros */
  height: 11mm;
  /* Ein hochgeladenes Logo des Büros kann jedes Seitenverhältnis haben: Es bleibt im Rahmen und wird nicht verzerrt */
  max-width: 55mm;
  object-fit: contain;
}

.druck-angaben {
  margin-top: 20mm;
  font-size: var(--t-text);
}

.druck-angaben dt {
  font-size: var(--t-klein);
  color: var(--color-text);
}

.druck-angaben dd {
  margin: 0 0 var(--abstand-gruppe);
  font-weight: 600;
  color: var(--color-headings);
}

.druck-absatz {
  margin-bottom: var(--abstand-gruppe);
  font-size: var(--t-klein);
}

.druck-inhalt h2 {
  margin: var(--abstand-block) 0 var(--abstand-gruppe);
  font-weight: 600;
  font-size: var(--t-kartentitel);
}

/* Im Dokument muss die Tabelle auf das Blatt passen: kleinere Schrift, Namen dürfen umbrechen */
#druck-bereich .tabelle-rahmen {
  overflow: visible;
}

#druck-bereich .tabelle {
  width: 100%;
  font-size: 8.5pt;
}

#druck-bereich .tabelle th,
#druck-bereich .tabelle td {
  padding: 6px 8px;
  white-space: normal;
}

#druck-bereich .tabelle td:first-child {
  width: 40%;
}

/* Welle 19, D19a.4 (M49-04): das Band des Vertrags ohne IIINITY-Strategie im Dokument (dokument.js, vertragBandDruck), ruhig wie die übrigen Grafiken:
   der Name klein darüber, die Hochrechnung mit etwas Abstand darunter. Der Teil unter den Einzahlungen heller als auf der Folie, damit er sich auch in
   Schwarz-Weiß klar vom Wert heute abhebt (auf der Folie liegen beide Grautöne in Graustufen nur 34 von 255 auseinander) */
#druck-bereich .anlage-band-name {
  margin: 0;
  font-size: 9pt;
}

#druck-bereich .anlage-band .g-teilband {
  margin-top: 8px;
}

#druck-bereich .anlage-band .g-tb-stueck--neben {
  background: color-mix(in srgb, var(--serie-kunde) 45%, var(--color-surface));
}

#druck-bereich .anlage-band-prognose {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .start-wahl,
  .option-raster,
  .kinder-zeile {
    grid-template-columns: 1fr;
  }

  /* Die Tabelle der Varianten passt auf das Telefon: Köpfe und Namen brechen um, Beträge nie */
  .tabelle {
    font-size: var(--t-klein);
  }

  .tabelle thead th,
  .tabelle tbody td {
    padding: var(--abstand-zeile) var(--abstand-eng);
  }

  .tabelle thead th,
  .tabelle tbody td:first-child {
    white-space: normal;
  }
}

/* Auf dem Telefon passen fünf Spalten nicht: jede Zeile ein Block, jede Zelle „Kopf: Wert“ (Kopf aus data-label) */
@media (max-width: 480px) {
  .tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabelle,
  .tabelle tbody,
  .tabelle tr,
  .tabelle td {
    display: block;
  }

  .tabelle tr {
    padding: var(--abstand-zeile) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .tabelle tbody td,
  .tabelle tbody td:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--abstand-gruppe);
    padding: var(--abstand-eng) var(--abstand-zeile);
    border-bottom: none;
  }

  .tabelle tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--color-text);
  }

  .tabelle tbody td:first-child::before {
    content: none;
  }
}

/* Anmeldung (mit Anmeldung): eine Karte mit zwei Schritten, E-Mail-Adresse und Code; Felder wie in der Designvorlage */
.anmelden-karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-eng);
  max-width: 420px;
}

.anmelden-karte form {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-eng);
}

.anmelden-karte input[type="email"],
.anmelden-karte input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--t-text);
  font-weight: 500;
  color: var(--color-text-stark);
  background-color: var(--color-surface);
  border: 2px solid var(--color-eingabe-rand);
  border-radius: var(--radius);
}

.anmelden-karte input[type="email"]:focus,
.anmelden-karte input[type="text"]:focus {
  border-color: var(--color-primary);
}

.anmelden-karte .btn {
  align-self: flex-start;
}

.anmelden-gesendet {
  margin: 0;
  font-size: var(--t-kartentitel);
  font-weight: 600;
  color: var(--color-text-stark);
}

.anmelden-absender {
  margin: 0;
  color: var(--color-text);
}

.anmelden-keine-titel {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-stark);
}

.anmelden-karte .hinweis {
  margin: 0;
}

.anmelden-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-eng);
  margin: 0;
}

/* Impressum und Datenschutz (ohne Anmeldung): Lesebreite, Abschnitte, Fuß mit den zwei Links; derselbe Fuß unter der Anmeldung */
.rechtliches {
  max-width: 760px;
}

.rechtliches h2 {
  margin: var(--abstand-gruppe) 0 var(--abstand-eng);
  font-size: var(--t-kartentitel);
  color: var(--color-text-stark);
}

.rechtliches h2:first-child {
  margin-top: 0;
}

.rechtliches ul {
  margin: 0;
  padding-left: 20px;
}

.rechtliches li + li {
  margin-top: var(--abstand-zeile);
}

.rechtliches-zurueck,
.rechtliches-fuss {
  font-size: var(--t-klein);
}

.rechtliches-fuss {
  margin-top: 32px;
}

.sitzung-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-eng);
  font-size: var(--t-klein);
  color: var(--color-text);
}

/* Kundendaten am Tablet hoch: steht der Bereich unter dem Formular und nicht im Bild, hält eine Zeile am unteren
   Rand den Stand im Blick (beratung.js, ergebnisZeile) */
.ergebnis-zeile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-zeile) var(--abstand-gruppe);
  padding: var(--abstand-gruppe) var(--abstand-polster);
  background: var(--color-surface);
  border-top: 2px solid var(--color-akzent-linie);
  box-shadow: var(--shadow-strong);
}

/* Höchstens zwei Zeilen, damit die feste Zeile auch mit einem langen ersten Punkt nicht ein Fünftel des Telefons belegt; „Ansehen“
   springt zum ganzen Satz (Schlussprüfung M3) */
.ergebnis-zeile-text {
  display: -webkit-box;
  flex: 1 1 240px;
  overflow: hidden;
  font-weight: 600;
  color: var(--color-headings);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.mit-ergebnis-zeile {
  padding-bottom: 96px;
}

/* Auf dem Telefon stehen die beiden Knöpfe nebeneinander, damit die feste Zeile nicht ein Fünftel des Bildschirms belegt; das
   Polster darunter so hoch wie die Zeile, damit der Fuß lesbar bleibt (Prüfung der Seite 06.10.2026, M10) */
@media (max-width: 480px) {
  .ergebnis-zeile-text {
    flex-basis: 100%;
  }

  .ergebnis-zeile .btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 var(--abstand-gruppe);
    font-size: var(--t-text);
  }

  body.mit-ergebnis-zeile {
    padding-bottom: 144px;
  }
}

/* Eine Stelle, zu der „Zur Stelle“ oder „Ansehen“ springt, steht nicht unter der Leiste: dafür sorgt an einem Ort scroll-padding in
   kette.css (Höhe der Leiste, am Telefon zwei Zeilen). Ein Feld bleibt unten über der Ergebniszeile. */
#formular input,
#formular select {
  scroll-margin-bottom: 120px;
}

/* Tablet und Handy: Tippflächen mindestens 44 px hoch, auch ohne Fingererkennung */
@media (max-width: 1000px) {
  .btn--klein {
    min-height: 44px;
  }
}

/* Mit dem Finger: Tippflächen mindestens 44 px hoch (Schluss C1, Punkt 7): Felder, Knöpfe, der Themenschalter und die
   Schalterzeilen; das Fragezeichen bleibt so klein gezeichnet und bekommt eine Trefferfläche von 45 px. Die Felder liegen über
   der Trefferfläche eines Fragezeichens darüber (gleiche Ebene, später im Dokument). */
@media (pointer: coarse) {
  .btn--klein {
    min-height: 44px;
  }

  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="password"],
  select,
  .kunden-suche input[type="search"],
  .einheit {
    height: 44px;
  }

  .feld input,
  .feld select {
    position: relative;
  }

  .tt::before {
    content: "";
    position: absolute;
    inset: -15px;
  }

  .thema-schalter,
  .schalter-zeile {
    min-height: 44px;
  }
}

/* Meine Kunden (Kundenliste, Entwurf Plattform): Suche und eine Zeile je Kunde, nur aus Tokens */

/* Abstand nach oben für „Meine Kunden“, für den Abschnitt unter dem Kasten „Offene Beratung“ und für „Einzelne Rechner und Tools“
   (ohne Kundenliste klebte er an den Karten, Klickprobe 14.10.2026): die Designvorlage nimmt der ersten Überschrift ihrer Art den
   Abstand (iiinity-basis.css, .abschnitt-teiler:first-of-type) */
#kunden,
#rechner,
#schliessen-frage + .abschnitt-teiler {
  margin-top: var(--abstand-abschnitt);
}

.kunden-suche {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-eng);
  max-width: 420px;
  margin-bottom: var(--abstand-block);
  font-size: var(--t-label);
}

/* Das Suchfeld wie die Felder der Designvorlage (iiinity-komponenten.css), Safari zeichnet es sonst als eigene Form */
.kunden-suche input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 var(--abstand-gruppe);
  font-family: inherit;
  font-size: var(--t-text);
  font-weight: 500;
  color: var(--color-text-stark);
  background-color: var(--color-surface);
  border: 2px solid var(--color-eingabe-rand);
  border-radius: var(--radius);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--zeit-schnell) var(--kurve-zustand);
}

.kunden-suche input[type="search"]:focus {
  border-color: var(--color-primary);
}

.kunden-liste {
  display: grid;
  gap: var(--abstand-eng);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kunden-neu {
  margin-bottom: var(--abstand-block);
}

/* Eine Zeile je Kunde: Name und letzte Änderung, daneben die Knöpfe (Entwurf Teil A) */
.kunde-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-eng);
  min-height: 44px;
  padding: var(--abstand-polster);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.kunde-name {
  display: flex;
  flex-direction: column;
}

.kunde-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-gruppe);
}

.kunde-name span,
.kunden-leer {
  color: var(--color-text);
  font-size: var(--t-klein);
}

.aktiv-stand {
  display: block;
  font-weight: 600;
}

.aktiv-stand:empty {
  display: none;
}

/* Die Karte „Mit KI erfassen“ bringt ihre Darstellung selbst mit: gemeinsam/erfassung.css (auch für die Rechner) */

/* Karte „Einwilligungen“ (Entwurf Widerruf): je Einwilligung Art, Zeitpunkt, Wortlaut und „Widerrufen“ */
.einwilligungen-karte {
  margin-top: var(--abstand-abschnitt);
}

.einwilligungen {
  display: grid;
  gap: var(--abstand-block);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Je Art und Wortlaut eine Gruppe: Art, Wortlaut einmal, darunter je Einwilligung eine ruhige Zeile mit „Widerrufen“ rechts (14.10.2026) */
.einwilligung-gruppe + .einwilligung-gruppe {
  padding-top: var(--abstand-block);
  border-top: 1px solid var(--color-border);
}

.einwilligung-zeilen {
  margin: var(--abstand-gruppe) 0 0;
  padding: 0;
  list-style: none;
}

.einwilligung + .einwilligung {
  border-top: 1px solid var(--color-border);
}

.einwilligung-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-eng) var(--abstand-gruppe);
  align-items: center;
  min-height: 44px;
  padding: var(--abstand-eng) 0;
  font-size: var(--t-label);
}

.einwilligung-knopf {
  margin-left: auto;
}

.einwilligung .einwilligung-frage {
  margin: 0 0 var(--abstand-gruppe);
}

.einwilligung-art {
  display: block;
  font-size: var(--t-text);
  font-weight: 600;
  color: var(--color-text-stark);
}

.einwilligung-zeit {
  color: var(--color-text);
}

.einwilligung-widerrufen {
  color: var(--color-red-text);
  font-weight: 600;
}

.einwilligung-wortlaut {
  max-width: 72ch;
  margin: var(--abstand-zeile) 0 0;
  padding-left: var(--abstand-gruppe);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--color-text);
  border-left: 3px solid var(--color-border);
}

.einwilligungen-leer {
  font-size: var(--t-klein);
  color: var(--color-text);
}

/* Kundendaten: „Bestehenden Kunden wählen“ oben in der Karte „Kunde und Gespräch“ (Entwurf Menü und Kundenwahl) */

.kunde-waehlen-zeile {
  margin-bottom: var(--abstand-polster);
}

/* Einstellungen: Angaben als Begriff und Wert, am Tablet hoch untereinander */

.angaben {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--abstand-zeile) var(--abstand-polster);
  margin: 0;
  font-size: var(--t-text);
}

.angaben dt {
  color: var(--color-text-stark);
  font-weight: 600;
}

.angaben dd {
  margin: 0;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .angaben {
    grid-template-columns: 1fr;
    gap: var(--abstand-eng);
  }

  .angaben dd {
    margin-bottom: var(--abstand-zeile);
  }
}

.darstellung-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-zeile);
}

.darstellung-wahl .filter-knopf {
  min-height: 44px;
}

.feld-hinweis {
  margin-top: var(--abstand-eng);
  font-size: var(--t-klein);
  color: var(--color-text);
}

.schaetzhilfe summary,
.selbst-anpassen summary {
  cursor: pointer;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--color-text-stark);
}

.schaetzhilfe .raster {
  margin-top: var(--abstand-polster);
}

/* Die Ergebniszeile der Schätzhilfe: ein ruhiger Kasten, sobald gerechnet ist */
.schaetz-ergebnis {
  margin-top: var(--abstand-polster);
  padding: var(--abstand-eng) var(--abstand-polster);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-klein);
  font-size: var(--t-klein);
  color: var(--color-text);
}

.schaetz-ergebnis .btn {
  margin-top: var(--abstand-eng);
}

/* Einstellungen (Entwurf „Konten im Büro und Berater-Profil“): das neue Konto unter der Liste der Konten, die Vorschau des
   Logos, das jedes Seitenverhältnis haben kann */

.konto-neu {
  margin-top: var(--abstand-abschnitt);
}

/* Wie im Kopf auf der Plakette des dunklen Themas (Durchsicht 09.10.2026, S7) */
.logo-vorschau {
  display: block;
  box-sizing: content-box;
  max-width: 240px;
  max-height: 80px;
  margin-bottom: var(--abstand-gruppe);
  padding: var(--logo-polster);
  border-radius: var(--radius-klein);
  background: var(--logo-flaeche);
}

/* Der Zwischentitel „Vorschau“ mit Abstand nach oben wie die übrigen nach einem Hinweis (K1) */
#e-eigen + .karte-zwischen {
  margin-top: var(--abstand-abschnitt);
}

/* Erscheinungsbild des Büros (Entwurf „Erscheinungsbild des Büros“, 08.10.2026 mittags): Farbwähler mit Feld, die Vorschau hell und
   dunkel mit einem Stück Leiste; die Werte setzt einstellungen-seite.js an den Kästen. Seit dem 09.10.2026 vorne nur die Übernahme
   mit der Zeile „Übernommen: …“, alles andere zugeklappt unter „Selbst anpassen“, die Schriften als Auswahllisten mit Probezeile. */

.selbst-anpassen {
  margin-top: var(--abstand-polster);
}

.selbst-anpassen > .raster {
  margin-top: var(--abstand-polster);
}

.uebernommen {
  margin-top: var(--abstand-zeile);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--color-text-stark);
}

/* Ein Feld je übernommener Farbe; die Farbe selbst setzt einstellungen-seite.js */
.farb-tupfer {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: var(--abstand-fuge);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-klein);
  vertical-align: -0.15em;
}

/* Die Probezeile unter einer Auswahlliste der Schriften, in der gewählten Schrift (setzt einstellungen-seite.js) */
.schrift-probe {
  margin: var(--abstand-eng) 0 0;
  font-size: var(--t-text);
  color: var(--color-text-stark);
}

.schrift-probe--ueberschrift {
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--color-headings);
}

.farb-wahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-zeile);
}

.farb-wahl input[type="color"] {
  flex-shrink: 0;
  width: 44px;
  height: 40px;
  padding: var(--abstand-fuge);
  border: 2px solid var(--color-eingabe-rand);
  border-radius: var(--radius-klein);
  background: var(--color-surface);
  cursor: pointer;
}

.vorschau-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--abstand-polster);
  margin-bottom: var(--abstand-gruppe);
}

.vorschau {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 var(--abstand-polster) var(--abstand-polster);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
}

.vorschau-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-zeile);
  margin: 0 calc(-1 * var(--abstand-polster)) var(--abstand-polster);
  padding: var(--abstand-zeile) var(--abstand-polster);
  font-size: var(--t-klein);
}

.vorschau-marke {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Das Logo in der Leiste der Vorschau, auf einer hellen Plakette wie im Kopf des dunklen Themas (die Fläche setzt einstellungen-seite.js
   je Kasten aus dem dunklen Thema, Spur L24) */
.vorschau-marke img {
  display: block;
  box-sizing: content-box;
  max-width: 140px;
  max-height: 24px;
  padding: var(--abstand-fuge) var(--abstand-eng);
  border-radius: var(--radius-klein);
  background: var(--color-auf-marine);
}

/* Ein helles Logo von der Webseite auf dunklem Grund: wie auf der Webseite, ohne Plakette (Spur L24) */
.vorschau-marke img.ohne-plakette,
.logo-vorschau.logo-vorschau--auf-dunkel {
  padding: 0;
  background: none;
}

.vorschau-weiter {
  padding: var(--abstand-eng) var(--abstand-gruppe);
  border-radius: var(--radius-klein);
  font-weight: 600;
}

.vorschau .karte-kopf {
  margin-bottom: var(--abstand-gruppe);
  font-size: var(--t-lead);
}

/* Dokument im eigenen Erscheinungsbild des Büros (Entwurf vom 08.10.2026 mittags): ohne Logo sein Name an dessen Stelle, unter dem
   Fuß jeder Seite klein „Erstellt mit dem IIINITY-Advisor“ */

.druck-buero-name {
  font-family: var(--font-ueberschrift);
  font-size: var(--t-abschnitt);
  font-weight: 600;
  color: var(--color-marke-schrift);
}

.druck-erstellt {
  flex-shrink: 0;
  padding-top: 2pt;
  font-size: 6.5pt;
  color: var(--color-text);
  text-align: right;
}

/* „Auf einen Blick“ (Johannes 18.10.2026 abends, freigegeben 19.10.2026; aufEinenBlickHtml in dokument.js): auf der Seite Ergebnis ganz oben
   und im Dokument als Blatt nach dem Deckblatt. Ruhig und für Kunden ohne Vorwissen: Blöcke mit kleiner Überschrift, die Kernaussage groß,
   darunter ein Satz; zwei Schriftgrößen für den Text und der Titel, kein Gold, nur Tokens. Auf dem Telefon eine Spalte, sonst zwei. */
.blick .karte-kopf {
  margin-bottom: var(--abstand-zeile);
}

.blick-wer {
  font-size: var(--t-lead);
  color: var(--color-text);
}

.blick-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-block) var(--abstand-abschnitt);
  margin-top: var(--abstand-block);
}

.blick-block {
  min-width: 0;
  padding-top: var(--abstand-gruppe);
  border-top: 1px solid var(--color-border);
}

.blick-block--breit {
  grid-column: 1 / -1;
}

.blick-kopf {
  margin: 0 0 var(--abstand-eng);
  font-family: var(--font);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--color-text);
}

.blick-kern {
  font-family: var(--font-ueberschrift);
  font-size: var(--t-abschnitt);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-marke-schrift);
}

.blick-kern small {
  display: block;
  margin-top: var(--abstand-fuge);
  font-family: var(--font);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

.blick-satz,
.blick-liste {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--color-text-stark);
}

.blick-satz {
  margin-top: var(--abstand-eng);
}

.blick-leise {
  color: var(--color-text);
}

.blick-liste {
  list-style: none;
}

.blick-liste li + li {
  margin-top: var(--abstand-eng);
}

.blick-vertraege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--abstand-gruppe) var(--abstand-abschnitt);
}

/* Was bei jedem Vertrag gleich lautet, steht einmal darunter */
.blick-vertraege + .blick-satz {
  margin-top: var(--abstand-zeile);
}

.blick-fuss {
  margin-top: var(--abstand-block);
  padding-top: var(--abstand-gruppe);
  border-top: 1px solid var(--color-border);
  font-size: var(--t-lead);
  color: var(--color-text);
}

.blick-fuss p + p {
  margin-top: var(--abstand-eng);
}

/* Nur am Bildschirm: Papier hat immer zwei Spalten, auch wenn ein Probe-Browser schmal druckt */
@media screen and (max-width: 720px) {
  .blick-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Im Dokument dieselbe Seite für Papier, auf genau einem Blatt nach dem Deckblatt (umbruch.js lässt es wie das Deckblatt allein): Text wie die
   Absätze des Dokuments (druck-absatz), die Kernaussage größer */
#druck-bereich .blick-wer,
#druck-bereich .blick-kopf,
#druck-bereich .blick-kern small,
#druck-bereich .blick-satz,
#druck-bereich .blick-liste,
#druck-bereich .blick-fuss {
  font-size: var(--t-klein);
  line-height: 1.4;
}

#druck-bereich .blick-kern {
  font-size: var(--t-lead);
}

#druck-bereich .blick-raster {
  gap: var(--abstand-gruppe) var(--abstand-block);
  margin-top: var(--abstand-polster);
}

#druck-bereich .blick-block {
  padding-top: var(--abstand-zeile);
}

#druck-bereich .blick-fuss {
  margin-top: var(--abstand-polster);
  padding-top: var(--abstand-zeile);
}

/* Passt „Auf einen Blick“ nicht auf sein Blatt (umbruch.js setzt ist-eng), eine Schriftstufe kleiner; kein Inhalt fällt weg (Triage A9) */
#druck-bereich .druck-allein.ist-eng .blick-wer,
#druck-bereich .druck-allein.ist-eng .blick-kopf,
#druck-bereich .druck-allein.ist-eng .blick-kern small,
#druck-bereich .druck-allein.ist-eng .blick-satz,
#druck-bereich .druck-allein.ist-eng .blick-liste,
#druck-bereich .druck-allein.ist-eng .blick-fuss {
  font-size: var(--t-hinweis);
}

#druck-bereich .druck-allein.ist-eng .blick-kern {
  font-size: var(--t-text);
}

/* Welle 8, V7 (H8): Folie „Erbschaft- und Schenkungsteuer“, je Empfänger eine Zeile: wer, ein Balken „Freibetrag genutzt“ mit den Beträgen
   darunter, rechts die Steuer; über 0 (ist-steuer) Balken und Steuer in der Farbe für Hinweise, nie Gold. Schmal: wer und Steuer oben,
   Balken und Beträge darunter */
.ka-erb-liste {
  display: grid;
  gap: 16px;
  margin-top: 6px;
}

.ka-erb-zeile {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(6rem, 1fr) auto;
  grid-template-areas: "wer balken steuer" "wer werte steuer";
  align-items: center;
  gap: 4px 20px;
}

/* Schrift aus ka-leise (gestaltung.css); hier nur Lage, Abstand und beim Namen die stärkere Farbe */
.ka-erb-zeile .ka-erb-wer {
  grid-area: wer;
  margin-top: 0;
  line-height: 1.3;
  color: var(--color-text-stark);
}

/* Gestaltung Stufe 2, G2.4: Höhe und Ecken wie das Teilband (gestaltung.css, .ka .g-tb-bahn), Farben wie dort */
.ka-erb-balken {
  grid-area: balken;
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

/* Die Breite steht am Element (Anteil des Freibetrags, dokument.js) */
.ka-erb-balken > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 8px;
  background: var(--color-grafik-neutral);
}

.ka-erb-zeile .ka-erb-werte {
  grid-area: werte;
  margin-top: 0;
  line-height: 1.3;
}

.ka-erb-steuer {
  grid-area: steuer;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-stark);
}

.ka-erb-zeile.ist-steuer .ka-erb-balken > span {
  background: var(--color-amber);
}

.ka-erb-zeile.ist-steuer .ka-erb-steuer {
  color: var(--color-amber-text);
}

@container g (max-width: 700px) {
  .ka-erb-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "wer steuer" "balken balken" "werte werte";
  }

  /* Am Telefon so hoch wie vor Stufe 2: die Folie wird dort nicht länger (pruefung/w8-v-browser.test.mjs, V7) */
  .ka-erb-balken,
  .ka-erb-balken > span {
    border-radius: 6px;
  }

  .ka-erb-balken {
    height: 12px;
  }
}

/* Welle 8, V5: „Was sich ergibt“, Anlage ohne Wechsel bei offenem Vergleich, der Satz dazu klein unter dem Satz zur Ausrichtung */
.g-leise.ergibt-klein {
  font-size: var(--t-klein);
  margin-top: 6px;
}

/* Welle 15, D15a: „Was Sie aushalten müssen“ (dokument.js: aushaltenGrafik, aushaltenZeit, aushaltenSaetze) in „Wie angelegt wird“ auf der Seite
   Ergebnis und im Dokument und als zweite Folie des Kapitels. Die Grafik: je Zeile Name, Balken auf einer Skala bis 60 % und die Zahlen; die
   Verlustgrenze des Kunden als gestrichelte Linie durch beide Balken (aushalten-linie, ihre Lage am Element) mit „Ihre Grenze“ als Legende darunter.
   Farben wie Skala und Band der Anlage (gestaltung.css): die gewählte Strategie wie die Füllung der Skala, der Welt-ETF neutral wie das Band. Die
   Zeitleiste: drei Punkte auf einer Linie */
.aushalten-grafik,
.aushalten-zeit {
  max-width: 680px;
  margin: 8px 0 var(--abstand-zeile);
}

.aushalten-kopf {
  margin: 0 0 6px;
  font-size: var(--t-klein);
  color: var(--color-text);
}

.aushalten-zeile {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(5rem, 1fr) minmax(0, 12rem);
  grid-template-areas: "name bahn zahl";
  align-items: center;
  gap: 2px 14px;
  margin-top: 6px;
}

.aushalten-name {
  grid-area: name;
  line-height: 1.3;
  color: var(--color-text-stark);
}

.aushalten-bahn {
  grid-area: bahn;
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--color-surface-alt);
}

/* Die Breite steht am Element (Rückgang auf der Skala bis 60 %, dokument.js) */
.aushalten-fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 7px;
  background: var(--color-grafik-neutral);
}

.aushalten-zeile.ist-strategie .aushalten-fuellung {
  background: var(--color-eingabe-rand);
}

/* Die Linie der Verlustgrenze; ihre Lage steht am Element (dokument.js) */
.aushalten-linie {
  position: absolute;
  top: -5px;
  bottom: -5px;
  border-left: 1.5px dashed var(--color-text-stark);
}

.aushalten-zahl {
  grid-area: zahl;
  white-space: nowrap;
  line-height: 1.3;
}

.aushalten-zahl strong {
  font-weight: 600;
  color: var(--color-text-stark);
}

.aushalten-zahl small {
  margin-left: 8px;
  font-size: inherit;
  color: var(--color-text);
}

/* „Ihre Grenze“ als Legende unter den Balken, vorn ein Stück der gestrichelten Linie (an der Linie selbst lief der Text auf dem Telefon über den
   Rand, gemessen 21.10.2026 bei 30 %) */
.aushalten-zeile.ist-grenze {
  margin-top: 4px;
}

.aushalten-grenze {
  grid-area: bahn;
  justify-self: start;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--color-text-stark);
}

.aushalten-grenze::before {
  content: '';
  display: inline-block;
  height: 1em;
  margin-right: 6px;
  vertical-align: -2px;
  border-left: 1.5px dashed var(--color-text-stark);
}

.aushalten-zeit ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Linie durch die drei Punkte */
.aushalten-zeit ol::before {
  content: '';
  position: absolute;
  left: 7px;
  right: calc((100% - 16px) / 3 - 7px);
  top: 6px;
  border-top: 2px solid var(--color-grafik-neutral);
}

.aushalten-zeit li {
  position: relative;
  display: grid;
  align-content: start;
  padding-top: 20px;
  line-height: 1.3;
}

.aushalten-zeit li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-text-stark);
}

/* Der Tiefpunkt hohl: der Wert, bei dem viele verkaufen */
.aushalten-zeit li.ist-tief::before {
  background: var(--color-surface);
  border: 3px solid var(--color-text-stark);
}

.aushalten-wann,
.aushalten-zeit small {
  font-size: var(--t-klein);
  color: var(--color-text);
}

/* Betrag und was er bedeutet untereinander; auf dem Telefon in einer Zeile neben dem Monat (unten) */
.aushalten-zeit strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-stark);
}

.aushalten-zeit small {
  display: block;
}

.aushalten-quelle,
.anlage-karte .aushalten-klein {
  font-size: var(--t-hinweis);
  color: var(--color-text);
}

/* Auf der Folie: Grafik und Zeitleiste nebeneinander, auf dem Telefon untereinander; Schrift wie die kleinen Texte der Folie (ka-leise am Block, 15 px,
   die Teile erben sie; --ka-klein kennt der Prüfer der Designvorlage für advisor.css nicht) */
.ka-aushalten {
  max-width: none;
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: start;
}

.ka-aushalten .aushalten-grafik,
.ka-aushalten .aushalten-zeit {
  margin: 0;
}

.ka-aushalten .aushalten-zeile {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name zahl" "bahn bahn";
}

.ka-aushalten .aushalten-grenze {
  grid-area: bahn;
}

.ka-aushalten .aushalten-kopf,
.ka-aushalten .aushalten-grenze,
.ka-aushalten .aushalten-wann,
.ka-aushalten .aushalten-zeit small,
.ka-aushalten .aushalten-zahl small {
  font-size: inherit;
}

.ka-folie .aushalten-quelle {
  font-size: inherit;
}

/* Die Sätze unter Grafik und Zeitleiste mit Luft dazwischen; auf dem Telefon enger (unten) */
.ka-folie .ka-aushalten + .aushalten-satz {
  margin-top: 16px;
}

.ka-folie .aushalten-satz + .aushalten-satz {
  margin-top: 10px;
}

@container g (max-width: 700px) {
  .aushalten-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name zahl" "bahn bahn";
  }

  .ka-aushalten {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .ka-aushalten .aushalten-zeile {
    margin-top: 4px;
  }

  /* Auf dem Telefon ohne „(MSCI World)“ am Namen (er steht unter „Woher wissen wir das?“), die Zeitleiste senkrecht mit je einer Zeile und die
     Aussagen in der Schrift des Fließtexts, damit die Folie nicht rollt */
  .aushalten-zusatz {
    display: none;
  }

  /* Welle 16, D16a.2 (M41-02, M42-03, M43-04): Die Spalte des Monats ist so breit wie der längste Monat aller drei Punkte (die Punkte teilen die
     Spalten der Liste, subgrid); mit fester Breite stieß „Februar 2009“ an „rund 52.000 €“ */
  .aushalten-zeit ol {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 10px;
  }

  .aushalten-zeit ol::before {
    left: 6px;
    right: auto;
    top: 8px;
    bottom: 8px;
    border-top: 0;
    border-left: 2px solid var(--color-grafik-neutral);
  }

  /* Je Punkt eine Zeile: links der Monat, rechts Betrag und was er bedeutet (nur das bricht um) */
  .aushalten-zeit li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: 0 0 0 24px;
  }

  /* Auf der Folie in der Schrift des Blocks (ka-leise), nicht in der größeren der Listen auf Folien (.ka-block li, gestaltung.css): so passt jeder
     Betrag samt „Tiefpunkt“ in eine Zeile neben den Monat (Welle 16, D16a.2; gemessen 22.10.2026: 171 statt etwa 115 px hoch) */
  .ka-aushalten .aushalten-zeit li {
    font-size: inherit;
  }

  .aushalten-zeit strong,
  .aushalten-zeit small {
    display: inline;
  }

  .aushalten-zeit li::before {
    top: 3px;
  }

  .aushalten-wann {
    white-space: nowrap;
  }

  /* Welle 16, D16a.2: etwas Luft unter der Zeitleiste (vorher stieß der Satz an „durchgehalten, vor Steuern“; die Zeitleiste ist jetzt kürzer) */
  .ka-folie .ka-aushalten + .aushalten-satz {
    margin-top: 8px;
  }

  .ka-folie .aushalten-satz + .aushalten-satz {
    margin-top: 8px;
  }

  /* Nur die Aussagen (ka-text); Satz A bleibt in der kleinen Schrift der Folie (Welle 16, D16a.2: vorher stand er auf dem Telefon größer als die
     Aussagen in ihrer Kurzform) */
  .ka-folie .ka-text.aushalten-satz {
    font-size: var(--t-lead);
    line-height: 1.5;
  }

  .aushalten-bahn,
  .aushalten-fuellung {
    height: 10px;
    border-radius: 5px;
  }
}