/* Partnerseiten /partner, /partner/ziel, /partner/methode, /partner/verdienst (Bauer B1, 02.10.2026, PLAN.md Abschnitt 7).
   Ergänzt die eingefrorene stil.css nur um Klassen, die dort fehlen. Farben nur über die Variablen der Farbrollen
   (PLAN.md Abschnitt 4). Koralle nur als kleine Fläche: Leisten, Balken, Marken, Punkte, Striche (L-015, L-018).
   Eingehängt über <!--css:seite-partner.css--> im Kopf des Teils (zusammenbauen.mjs, seit der Schalen-Runde 02.10.2026). */

/* .auftritt (Blöcke mit Versatzschatten, data-ein) steht seit der Schalen-Runde vom 02.10.2026 in stil.css. */

/* ---------- Datenzeile D-029 von Rand zu Rand des Randabschnitts (L-020) ---------- */
/* als Koralle-Band (Schalen-Runde 02.10.2026) von Bildschirmrand zu Bildschirmrand, die Einträge bleiben auf dem Rand des Randabschnitts */
.datenzeile--voll { justify-content: space-between; margin: clamp(28px, 3vw, 44px) calc(-1 * var(--rand-schmal)) 0; padding-inline: var(--rand-schmal); }

/* ---------- Seitenkopf ohne Vorlagenblock (Nachbesserung Runde 1, L-034): Kopfzahl oder Leitsatz an einer Koralle-Linie ---------- */
.kopfzahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0; padding-left: 22px; border-left: 6px solid var(--akzent); }
.kopfzahl__wert { font: 700 clamp(64px, 7vw, 104px)/.9 var(--schrift-kopf); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.kopfzahl__wert small { font-size: .45em; letter-spacing: 0; color: var(--akzent-tief); }
.kopfzahl__satz { max-width: 13em; font: 400 clamp(20px, 1.8vw, 26px)/1.3 var(--schrift-kopf); }
.kopfsatz { max-width: 18em; margin: 0; padding-left: 22px; border-left: 6px solid var(--akzent); font: italic 400 clamp(22px, 2.2vw, 30px)/1.3 var(--schrift-kopf); }
.seitenkopf__text .knoepfe { margin-top: 8px; }

/* Karten-Raster als Liste ohne Einzug des Browsers (sonst 40 px links, Karten außermittig; Nachbesserung Runde 1) */
ul.raster { list-style: none; padding: 0; }

/* Offene Angaben und Domains brechen nicht in sich um (Nachbesserung Runde 1) */
.offen--ganz, .ohne-umbruch, .domain { white-space: nowrap; }

/* ---------- Piktogramme: Pflaume mit Koralle-Detail (PLAN.md Abschnitt 7, Partnerseiten) ---------- */
.pikto { width: 40px; height: 40px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pikto .akzent { stroke: var(--akzent); stroke-width: 2.6; }
.pikto--klein { width: 28px; height: 28px; }

/* ---------- Zwei Spalten: Text und Bild, Fenster oder Karten ---------- */
.partner-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px clamp(28px, 4.4vw, 80px); align-items: center; }
.partner-zwei--oben { align-items: start; }
.partner-stapel { display: grid; gap: clamp(28px, 3vw, 44px); }
.partner-stapel > .raster { gap: clamp(28px, 4vw, 64px); }
.partner-zwei__text { display: grid; gap: 22px; align-content: start; }
.partner-zwei__text .knoepfe { margin-top: 6px; }
/* Leitsatz mit Markierungsstrich (6 px Koralle unter den Kernwörtern, PLAN.md Abschnitt 4) */
.leitzeile { font: 400 clamp(28px, 2.8vw, 40px)/1.25 var(--schrift-kopf); max-width: 24em; }
.leitzeile b { font-weight: 700; text-decoration: underline 6px var(--akzent); text-underline-offset: 7px; text-decoration-skip-ink: none; }

/* ---------- Listen in Karten ---------- */
.liste-haken, .liste-strich { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; line-height: 1.5; }
.liste-haken li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.liste-strich li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.liste-strich li::before { content: ""; width: 14px; height: 2px; margin-top: .8em; background: currentColor; }
.karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Kette Betrieb – Website – Partner (/partner/ziel) ---------- */
.kette { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px); }
.kette::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 2px; background: var(--akzent); transform-origin: left center; transition: transform 1s var(--kurve) .15s; }
.js .kette[data-ein]:not(.ist-da)::before { transform: scaleX(0); }
.kette > li { position: relative; z-index: 1; }
.kette__glied { justify-items: start; height: 100%; }
/* Abnahme Runde 2 (03.10.2026): die Fensterleiste läuft über die ganze Kartenbreite wie an allen anderen Karten;
   justify-items: start der Glieder schrumpfte sie am Handy auf ihren Inhalt (122 px in 324 px breiter Karte). */
.kette__glied > .karte__leiste { justify-self: stretch; }
.kette__titel { font: 600 21px/1.3 var(--schrift-text); }
.kette__text { font-size: 16px; line-height: 1.45; }

/* ---------- Fenster mit Text statt Bild (Liste, Eingabezeile, Rechnung, Vertrag) ---------- */
.fenster__inhalt--text { aspect-ratio: auto; min-height: 0; color: var(--sekundaer); }
.fensterliste, .gestrichen { list-style: none; margin: 0; padding: clamp(16px, 2.4vw, 28px); display: grid; gap: 12px; }
.fensterliste li, .gestrichen li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding-bottom: 12px; border-bottom: 1.5px solid var(--dominant-tief); font-size: 17px; line-height: 1.4; }
.fensterliste li:last-child, .gestrichen li:last-child { border-bottom: 0; padding-bottom: 0; }
.fensterliste b, .gestrichen b { font-weight: 600; }
.fensterliste small, .gestrichen i { font-size: 16px; font-style: normal; color: var(--leise); }
.fensterliste__summe { font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--schrift-kopf); font-variant-numeric: lining-nums tabular-nums; }
/* durchgestrichen: die Linie zieht sich einmal, wenn das Fenster ins Bild kommt (data-ein) */
.gestrichen b { position: relative; }
.gestrichen b::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 3px; border-radius: 2px;
  background: var(--akzent); transform-origin: left center; transition: transform .7s var(--kurve) calc(var(--i, 0) * .16s + .2s); }
.js .gestrichen[data-ein]:not(.ist-da) b::after { transform: scaleX(0); }
/* Eingabezeile des Bots (Beispiel-Prompt und Partner-Guide) */
.prompt { display: block; padding: clamp(16px, 2.2vw, 24px); font: 600 clamp(18px, 1.6vw, 22px)/1.45 var(--schrift-text);
  border-bottom: 1.5px solid var(--dominant-tief); }
.prompt b { color: var(--akzent-tief); margin-right: .35em; }
.cursor-strich { display: inline-block; width: 3px; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--sekundaer);
  animation: cursor-blinkt 1.1s steps(1) 4; }
@keyframes cursor-blinkt { 50% { opacity: 0; } }
.prompt-hinweis { padding: 14px clamp(16px, 2.2vw, 24px) 18px; font-size: 16px; line-height: 1.5; color: var(--leise); }
.fenster__bildzeile { display: block; border-top: 1.5px solid var(--dominant-tief); }
.fenster__bildzeile img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
/* Leitmotiv als Zwischenergebnis im kleinen Fenster (Schritt „Idee“) */
.fenster-satz { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 10px 14px; text-align: center; }
.fenster-satz small { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.fenster-satz span { font: italic 400 clamp(18px, 1.5vw, 22px)/1.2 var(--schrift-kopf); }

/* früher und heute gleich hoch, ohne kahle Fläche neben dem höheren Fenster (/partner/ziel, Nachbesserung Runde 1) */
/* Unterschriften verschieden lang: Fenster und Unterschrift teilen sich die Zeilen des Rasters (subgrid), die Fenster bleiben gleich hoch */
@supports (grid-template-rows: subgrid) {
  .partner-vergleich { grid-template-rows: auto auto; }
  .partner-vergleich > .partner-fenster { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
@media (max-width: 767px) { .partner-vergleich { grid-template-rows: none; } }
.partner-vergleich .fenster-ort, .partner-vergleich .fenster,
.partner-vergleich .fenster__inhalt--text { display: flex; flex-direction: column; }
.partner-vergleich .fenster-ort, .partner-vergleich .fenster, .partner-vergleich .fenster__inhalt--text { flex: 1 1 auto; }
.partner-vergleich .fensterliste { flex: 1 1 auto; align-content: space-between; }
.partner-vergleich .fenster__bildzeile { margin-top: auto; }

/* Auge im Fenster des Abschlusses (wie im Abschluss der Startseite, Farben über die Rollen) */
.partner-auge { display: block; }
.partner-auge__weiss { fill: var(--dominant-hell); stroke: var(--sekundaer); stroke-width: 3.5; stroke-linejoin: round; }
.partner-auge__iris { fill: var(--sekundaer); }
.partner-auge__kern { fill: var(--akzent); }
.partner-auge__licht { fill: var(--dominant-hell); }

/* Bildunterschrift unter Seitenkopf-Fenstern */
.bildnotiz { margin-top: 18px; font-size: 16px; line-height: 1.45; color: var(--leise); }
.bildnotiz a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }
.flaeche--pflaume .bildnotiz { color: var(--leise-hell); }
.flaeche--pflaume .bildnotiz a { color: var(--akzent-hell); }
/* Fenster als Abbildung: Platz für den Versatzschatten links unten (höchstens 20 px, L-046, Maß in stil.css) */
.partner-fenster { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
/* Abbildung mit Unterschrift: der Schattenplatz liegt zwischen Fenster und Unterschrift, unten kein Rand (Lücke zum nächsten Abschnitt) */
figure.partner-fenster { margin-bottom: 0; }
.partner-fenster--klein { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.seitenkopf__bild > .fenster-ort:not(.fenster-ort--klein) { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.seitenkopf__bild > .bildnotiz { margin-top: 18px; }
.partner-fenster > .fenster-ort + .bildnotiz { margin-top: 38px; }
.partner-fenster--klein > .fenster-ort + .bildnotiz { margin-top: 24px; }
.zeilenliste__text p + p { margin-top: .6em; }

/* D-443 harter Versatzschatten an Karten (Stellschraube aus PLAN.md Abschnitt 4 für Koralle 7 bis 9 %, L-018):
   ein schmaler Streifen links unten, keine Fläche (L-015) */
.karte-ort { position: relative; display: grid; margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.karte-ort > .karte__schatten { position: absolute; inset: 0; border-radius: 16px; background: var(--akzent); }
.karte-ort > :not(.karte__schatten) { position: relative; height: 100%; }
/* Karte als kleines Fenster: Leiste in Koralle (höchstens 48 px, PLAN.md Abschnitt 4 „Kartenleisten“) mit Auge */
.karte--fenster { padding-top: 0; overflow: hidden; }
.karte__leiste { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 calc(-1 * clamp(20px, 2.2vw, 30px)) 6px;
  padding: 0 12px; background: var(--akzent); border-bottom: 1.5px solid var(--sekundaer); }
.flaeche--pflaume .karte__leiste { border-bottom-color: var(--sekundaer-linie); }
.karte__leiste .fenster__auge { width: 32px; height: 20px; }
.karte__leiste .fenster__adresse { flex: 1 1 auto; min-width: 56px; max-width: 160px; height: 24px; padding: 0 8px; }
/* Nummernmarke wie die Stufenmarken der Startseite: Kobalt, Ziffer in Weiß (höchstens 64 × 64 px) */
.marke { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--akzent);
  color: var(--dominant); font: 700 22px/1 var(--schrift-kopf); font-variant-numeric: lining-nums; }
.marke--gross { width: 64px; height: 64px; border-radius: 14px; font-size: 26px; }
.abstand-karten { margin-top: clamp(28px, 3vw, 44px); }

/* ---------- Großzahl und Rechenbeispiel ---------- */
.grosszahl { font: 700 clamp(96px, 12vw, 184px)/.88 var(--schrift-kopf); letter-spacing: -.035em; font-variant-numeric: lining-nums; }
.grosszahl small { font-size: .42em; letter-spacing: 0; }
.flaeche--pflaume .grosszahl small { color: var(--akzent-hell); }
.beispiel { display: grid; gap: 16px; align-content: start; }
.beispiel__zahl { font: 700 clamp(56px, 6vw, 96px)/.95 var(--schrift-kopf); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.beispiel__satz { font: 400 clamp(22px, 2vw, 28px)/1.3 var(--schrift-kopf); }
/* Beispielbetrag (/partner/verdienst, Nachbesserung Runde 1): höchstens 96 px, „Beispiel“ im Betrag, Hinweis direkt daneben */
.beispielbetrag { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.beispielbetrag__zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.beispielbetrag__marke { align-self: center; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed currentColor;
  font: 600 14px/1 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; }
.beispielbetrag__wert { font: 700 clamp(48px, 5.4vw, 80px)/1 var(--schrift-kopf); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.beispielbetrag__zahl small { font-size: 18px; }
.beispielbetrag__hinweis { max-width: 12em; margin: 0 0 6px; padding-left: 14px; border-left: 4px solid var(--akzent); font-size: 18px; line-height: 1.35; font-weight: 600; }
.flaeche--pflaume .hinweis-klein a { color: var(--akzent-hell); font-weight: 600; text-underline-offset: 3px; }
.anteil-balken { display: flex; gap: 4px; height: 24px; }
.anteil-balken span { border-radius: 4px; transform-origin: left center; transition: transform .8s var(--kurve) calc(var(--i, 0) * .2s); }
.anteil-balken__du { flex: 60 0 0; background: var(--akzent); }
.anteil-balken__nj { flex: 40 0 0; background: var(--leise); }
.flaeche--pflaume .anteil-balken__nj { background: var(--leise-hell); }
.js .anteil-balken[data-ein]:not(.ist-da) span { transform: scaleX(0); }
.anteil-legende { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 16px; }
.anteil-legende i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; background: var(--akzent); }
.anteil-legende span + span i { background: var(--leise); }
.flaeche--pflaume .anteil-legende span + span i { background: var(--leise-hell); }
.monatsleiste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.monatsleiste span { height: 32px; border-radius: 3px; background: var(--akzent); transform-origin: center bottom;
  transition: transform .5s var(--kurve) calc(var(--i, 0) * .05s); }
.js .monatsleiste[data-ein]:not(.ist-da) span { transform: scaleY(.15); }
.monatsleiste__text { font-size: 16px; }
.hinweis-klein { font-size: 16px; line-height: 1.5; }
.flaeche--pflaume .hinweis-klein { color: var(--leise-hell); }

/* ---------- Zahlenleiste mit Balken (/partner/verdienst, D-029) ---------- */
.zahl__leiste { display: block; height: 18px; margin-top: 8px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--sekundaer); }
.zahl__leiste span { display: block; height: 100%; background: var(--akzent); transform-origin: left center; transform: scaleX(var(--anteil, 1));
  transition: transform .9s var(--kurve) calc(var(--i, 0) * .12s); }
.js .zahl__leiste[data-ein]:not(.ist-da) span { transform: scaleX(0); }
.zahl__leiste--segmente { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; box-shadow: none; }
.zahl__leiste--segmente span { border-radius: 3px; transform: none; }
.zahl__leiste--segmente .leer { background: transparent; box-shadow: inset 0 0 0 1.5px var(--akzent-tief); }
.js .zahl__leiste--segmente[data-ein]:not(.ist-da) span { transform: scaleX(0); }
.zahl__wert small { font-size: .45em; letter-spacing: 0; }
.regelzeilen { display: grid; gap: 10px; margin-top: clamp(24px, 2.6vw, 36px); font-size: 17px; }
.regelzeilen p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }

/* ---------- Acht Phasen (/partner/methode) ---------- */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  border-block: 1.5px solid currentColor; }
.phase { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; padding: 22px clamp(10px, 1.1vw, 18px) 24px; }
.phase + .phase { border-left: 1.5px solid currentColor; }
.phase__nr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--akzent); color: var(--dominant);
  font: 700 26px/1 var(--schrift-kopf); font-variant-numeric: lining-nums; }
.phase__titel { font: 600 18px/1.3 var(--schrift-text); }
.phase__text { font-size: 16px; line-height: 1.4; color: var(--leise); }

/* ---------- Fünf Wege zu den Unterseiten (/partner) ---------- */
.partner-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.partner-karten a { color: inherit; text-decoration: none; }
.partner-karten a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.partner-karten .karte:has(a:hover), .partner-karten .karte:has(a:focus-visible) { box-shadow: inset 0 0 0 1.5px currentColor; }
.partner-karten a:focus-visible { outline: 0; box-shadow: none; }
.partner-karten .karte:has(a:focus-visible) { outline: 2px solid var(--sekundaer); outline-offset: 3px; }
.karte__weiter { margin-top: auto; font-weight: 600; font-size: 16px; color: var(--akzent-tief); }
.flaeche--pflaume .karte__weiter { color: var(--akzent-hell); }
/* Wegweiser-Karten auf Pflaume hell wie die Projektfenster im Arbeiten-Band der Startseite */
.flaeche--pflaume .partner-karten .karte { background: var(--dominant-hell); border-color: var(--sekundaer); color: var(--sekundaer); }
.flaeche--pflaume .partner-karten .karte__weiter { color: var(--akzent-tief); }
.flaeche--pflaume .partner-karten .karte__leiste { border-bottom-color: var(--sekundaer); }
/* Karten A bis D auf Pflaume ebenfalls hell, damit Pflaume am Handy nicht über 27 % steigt (Farbregel) */
.flaeche--pflaume .raster .karte { background: var(--dominant-hell); border-color: var(--sekundaer); color: var(--sekundaer); }
.flaeche--pflaume .raster .karte__leiste { border-bottom-color: var(--sekundaer); }
/* Phasen auf Pflaume */
.flaeche--pflaume .phase__text { color: var(--leise-hell); }

/* ---------- Kurz zur Person (/partner) ---------- */
.person-kurz { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px clamp(20px, 2.4vw, 36px); align-items: start; }
.person-kurz .person__bild { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.person-kurz__text { display: grid; gap: 14px; font-size: 17px; line-height: 1.55; }

/* ---------- Ergebnisse: Bildschirmaufnahme im Fenster mit Wahl (/partner/methode) ---------- */
.video-wahl { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 11vw, 160px); gap: 20px clamp(20px, 2.6vw, 40px); align-items: end; }
.video-wahl__knoepfe { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.video-wahl__pillen { display: flex; flex-wrap: wrap; gap: 10px; }
/* Adresse hat die ganze Leiste: einzeilig und vollständig bei jeder Breite (Nachbesserung Runde 1) */
.video-wahl__fenster .fenster__adresse { flex: 0 0 auto; }
/* 16e: „Ergebnisse“ steht jetzt auf Weiß; die hellen Farben gelten nur noch auf Schwarz */
.flaeche--pflaume .video-wahl .filter__pille[aria-pressed="true"] { background: var(--dominant); border-color: var(--dominant); color: var(--sekundaer); }
.video-wahl__fenster .fenster__inhalt video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.video-knopf { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0;
  background: transparent; color: var(--sekundaer); font: 600 16px/1.2 var(--schrift-text); white-space: nowrap; cursor: pointer; }
.flaeche--pflaume .video-knopf { color: var(--dominant); }
.video-knopf .pause__kreis { background: var(--akzent); color: var(--dominant); }
.js .video-knopf { display: inline-flex; }
.video-knopf .pause__kreis svg { width: 14px; height: 14px; }
.video-knopf .pause__kreis .symbol-halt { display: none; }
.video-knopf .pause__kreis .symbol-weiter { display: block; }
.video-knopf[data-laeuft="true"] .pause__kreis .symbol-halt { display: block; }
.video-knopf[data-laeuft="true"] .pause__kreis .symbol-weiter { display: none; }
/* ohne Skript: nur die erste Aufnahme mit den Bedienelementen des Browsers, keine Wahlknöpfe */
.video-wahl__knoepfe { display: none; }
.js .video-wahl__knoepfe { display: flex; }
.video-knopf:hover .video-knopf__text, .video-knopf:focus-visible .video-knopf__text { text-decoration: underline 2px; text-underline-offset: 4px; }
.partner-handy { position: relative; margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.partner-handy__schatten { position: absolute; inset: 0; border-radius: 20px; background: var(--akzent); }
/* Gerät als Block: der Rahmen umschließt das Standbild an allen Seiten mit 6 px (Nachbesserung Runde 1) */
.partner-handy__geraet { position: relative; display: block; line-height: 0; padding: 6px; border-radius: 20px; background: var(--sekundaer); box-shadow: 0 0 0 1.5px var(--sekundaer-linie); }
.partner-handy__geraet img { display: block; width: 100%; height: auto; aspect-ratio: 270 / 584; object-fit: cover; border-radius: 14px; }
.video-wahl__zeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 16px; }
.video-wahl__zeile a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }
.flaeche--pflaume .video-wahl__zeile a { color: var(--akzent-hell); }

/* ---------- Rechner (/partner/verdienst): Logik js/rechner-logik.js unverändert, Anzeige js/rechner.js ---------- */
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.rechner--fenster { padding-top: 0 !important; overflow: hidden; }
.rechner__leiste { margin: 0 calc(-1 * clamp(22px, 2.6vw, 36px)) 0; }
.rechner__ergebnis .rechner__leiste { border-bottom-color: var(--sekundaer-linie); }
.rechner__eingabe { display: grid; gap: 26px; padding: clamp(22px, 2.6vw, 36px); border-radius: 16px; background: var(--dominant-hell);
  border: 1.5px solid var(--sekundaer); }
.rechner__notiz { font-size: 16px; color: var(--leise); }
.regler { display: grid; gap: 10px; }
.regler[hidden] { display: none; }
.regler__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.regler__kopf label { font-weight: 600; font-size: 17px; }
.zahlfeld { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.zahlfeld input { width: 7.5em; min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--sekundaer);
  background: var(--dominant); color: var(--sekundaer); font: 600 17px/1 var(--schrift-text); font-variant-numeric: tabular-nums; text-align: right; }
output.zahlfeld { min-width: 3ch; justify-content: flex-end; }
.rechner input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; --fuell: 0%; }
.rechner input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--akzent) var(--fuell), var(--dominant-tief) var(--fuell)); box-shadow: inset 0 0 0 1px var(--sekundaer); }
.rechner input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--dominant-tief); box-shadow: inset 0 0 0 1px var(--sekundaer); }
.rechner input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--akzent); }
.rechner input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: var(--akzent); border: 3px solid var(--sekundaer); }
.rechner input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--akzent); border: 3px solid var(--sekundaer); }
.knopf-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--akzent-tief); font: 600 16px/1.2 var(--schrift-text); }
.schalter { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; font-size: 17px; cursor: pointer; }
.schalter input { width: 22px; height: 22px; margin: 0; accent-color: var(--sekundaer); }
.rechner__ergebnis { display: grid; gap: 20px; align-content: start; padding: clamp(22px, 2.6vw, 36px); border-radius: 16px;
  background: var(--sekundaer); color: var(--dominant); }
.ergebnis__zeile { margin: 0; }
.ergebnis__zeile dt { font-size: 16px; color: var(--leise-hell); }
.ergebnis__zeile dd { margin: 4px 0 0; font: 700 clamp(36px, 3.4vw, 52px)/1.05 var(--schrift-kopf); font-variant-numeric: lining-nums tabular-nums; }
.ergebnis__zeile dd small { margin-left: 8px; font: 400 16px/1.3 var(--schrift-text); color: var(--leise-hell); }
.ergebnis__anteil dd { color: var(--akzent-hell); }
.ergebnis__monat dd { font-size: clamp(24px, 2.2vw, 30px); }
.vergleichsbalken { position: relative; height: 40px; }
/* Vergleich nur mit Gleichartigem: Kundensumme in 3 Jahren gegen den Mindestumsatz in 3 Jahren (Marke in der Mitte, Skala bis 2.500 €) */
.vergleichsbalken__mindest { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--akzent); }
.vergleichsbalken__kunde { position: absolute; left: 0; top: 10px; width: 100%; height: 20px; border-radius: 4px; background: var(--leise-hell);
  transform-origin: left center; transition: transform .25s var(--kurve); }
.vergleichsbalken__legende { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 12px; margin-top: 6px; font-size: 16px; color: var(--leise-hell); }
.vergleichsbalken__legende span:nth-child(2) { color: var(--dominant); font-weight: 600; white-space: nowrap; }
.vergleichsbalken__legende span:last-child { justify-self: end; }
.anteilsbalken { height: 32px; border-radius: 4px; background: var(--sekundaer-linie); overflow: hidden; }
.anteilsbalken span { display: block; width: 100%; height: 100%; background: var(--akzent); transform-origin: left center; transform: scaleX(.6);
  transition: transform .25s var(--kurve); }
.rechner__hinweis { padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--leise-hell); background: var(--sekundaer-karte); font-size: 16px; line-height: 1.5; }
.rechner__hinweis[hidden] { display: none; }
.rechner.nicht-moeglich .ergebnis__anteil dd, .rechner.nicht-moeglich .ergebnis__monat dd { color: var(--leise-hell); }
/* Abnahme Runde 5: nur der Betrag wird durchgestrichen, nicht „je Kunde“ daneben (las sich wie ein unterstrichener Link) */
.rechner.nicht-moeglich :is(.ergebnis__anteil, .ergebnis__monat) dd output { text-decoration: line-through; }
.rechner.nicht-moeglich .anteilsbalken span { background: var(--leise-hell); }
.jahresleiste { display: block; }
.jahresleiste__marken { display: grid; grid-template-columns: 3fr 2fr; gap: 4px; margin-bottom: 8px; font-size: 16px; color: var(--leise-hell); }
.jahresleiste__marken span { padding-top: 6px; border-top: 3px solid var(--akzent); }
.jahresleiste__marken span + span { border-top-style: dashed; }
.jahresleiste__jahre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.jahresleiste__jahre li { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 56px; padding: 6px 4px; border-radius: 6px;
  background: var(--akzent); color: var(--dominant); transition: transform .6s var(--kurve) calc(var(--i, 0) * .08s), opacity .6s var(--kurve) calc(var(--i, 0) * .08s); }
.jahresleiste__jahre li.offen-jahr { background: transparent; box-shadow: inset 0 0 0 2px var(--akzent); color: var(--dominant); }
.jahresleiste__jahre small { font-size: 14px; font-weight: 600; }
.jahresleiste__jahre b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.js .jahresleiste__jahre[data-ein]:not(.ist-da) > li { opacity: .45; transform: translateY(10px); }
.rechner.nicht-moeglich .jahresleiste__jahre li { background: var(--sekundaer-linie); color: var(--dominant); box-shadow: none; }
.rechner.nicht-moeglich .jahresleiste__jahre b { text-decoration: line-through; }
.rechner-fuss { max-width: 60em; margin-top: 22px; font-size: 16px; line-height: 1.55; color: var(--leise); }

/* Koralle am Desktop 7 bis 9 % (L-018, Nachbesserung Runde 1): nur die vorhandenen Streifen werden breiter, keine neue Fläche
   (Nummernmarken 76 px, Kartenleisten 48 px wie im Plan erlaubt; Versatzschatten seit Abnahme Runde 5 nur noch aus stil.css, L-046) */
@media (min-width: 1024px) {
  .karte-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }   /* Platz für den Versatzschatten, höchstens 20 px (L-046) */
  .marke--gross { width: 76px; height: 76px; font-size: 28px; }
  .karte__leiste { height: 48px; }
  .partner-fenster:not(.partner-fenster--klein) { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  figure.partner-fenster:not(.partner-fenster--klein) { margin-bottom: 0; }
  .partner-fenster:not(.partner-fenster--klein) > .fenster-ort + .bildnotiz { margin-top: 38px; }
  .seitenkopf__bild > .fenster-ort:not(.fenster-ort--klein) { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  .partner-fenster--klein { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  .phasen { border-block: 3px solid var(--akzent); }
  .phase__nr { width: 72px; height: 72px; }
  .partner-handy { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  .partner-vergleich .fensterliste li { border-bottom: 3px solid var(--akzent); }
  .partner-vergleich .fensterliste li:last-child { border-bottom: 0; }
  .kette::before { height: 8px; margin-top: -4px; border-radius: 4px; }
  .partner-vergleich .fensterliste li { border-bottom-width: 4px; }
  .partner-vergleich > .partner-fenster { margin-left: 20px; }
  .partner-vergleich > .partner-fenster > .fenster-ort + .bildnotiz { margin-top: 38px; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1199px) {
  .phasen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phase:nth-child(5) { border-left: 0; }
  .phase:nth-child(n+5) { border-top: 1.5px solid currentColor; }
  .partner-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jahresleiste__jahre b { font-size: 15px; }
}
/* zwei Karten neben dem Text: unter 1280 px untereinander, damit die offenen Angaben ganz in eine Zeile passen */
@media (min-width: 1024px) and (max-width: 1279px) {
  .partner-zwei > .raster--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .partner-zwei { grid-template-columns: minmax(0, 1fr); }
  .rechner { grid-template-columns: minmax(0, 1fr); }
  .jahresleiste__jahre b { font-size: 16px; }
}
@media (max-width: 767px) {
  .kette { grid-template-columns: minmax(0, 1fr); }
  .kette::before { left: 42px; right: auto; top: 10%; bottom: 10%; width: 4px; height: auto; margin-top: 0; transform-origin: center top; }
  .js .kette[data-ein]:not(.ist-da)::before { transform: scaleY(0); }
  .partner-karten { grid-template-columns: minmax(0, 1fr); }
  .person-kurz { grid-template-columns: minmax(0, 1fr); }
  .person-kurz .person__bild { max-width: 220px; }
  .video-wahl { grid-template-columns: minmax(0, 1fr) 92px; gap: 16px; }
  .karte-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
}
/* Koralle am Handy höchstens 9 % (Schalen-Runde 02.10.2026, L-018): die Versatzschatten der Karten und des kleinen Porträts entfallen unter 600 px */
@media (max-width: 599px) {
  .karte-ort > .karte__schatten, .person-kurz .person__schatten { display: none; }
  /* ohne sichtbaren Schatten auch ohne Schattenplatz: die Karten stehen mittig (Nachbesserung Runde 1) */
  .karte-ort, .person-kurz .person__bild { margin: 0; }
  /* /partner/ziel liegt am Handy sonst unter 7 % Koralle: die Karten „Warum“ und „Wer mitmacht“ behalten Schatten und Schattenplatz */
  #wer-abschnitt .karte-ort, #warum-abschnitt .karte-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  #wer-abschnitt .karte-ort > .karte__schatten, #warum-abschnitt .karte-ort > .karte__schatten { display: block; }
}
@media (max-width: 599px) {
  .phasen { grid-template-columns: minmax(0, 1fr); }
  .phase { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: none; column-gap: 16px; row-gap: 4px; padding: 16px 0; }
  .phase__nr { grid-row: span 2; width: 56px; height: 56px; font-size: 24px; }
  .phase + .phase, .phase:nth-child(5) { border-left: 0; border-top: 1.5px solid currentColor; }
  /* Jahresleiste: jede Marke links neben ihren Jahren, „Mindestzeit 3 Jahre“ bei Jahr 1 bis 3, „solange dein Kunde zahlt“ bei
     Jahr 4 und 5 (Nachbesserung Runde 1) */
  .jahresleiste { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 0 10px; }
  .jahresleiste__marken { grid-template-columns: none; grid-template-rows: 3fr 2fr; margin: 0; }
  .jahresleiste__marken span { display: flex; align-items: center; padding: 4px 0 4px 10px;
    border-top: 0; border-left: 3px solid var(--akzent); line-height: 1.3; }
  .jahresleiste__marken span + span { border-left-style: dashed; }
  .jahresleiste__jahre { grid-template-columns: minmax(0, 1fr); }
  .jahresleiste__jahre li { min-height: 44px; grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; column-gap: 12px; padding: 0 14px; }
  .jahresleiste__jahre small, .jahresleiste__jahre b { font-size: 16px; }
  .jahresleiste__jahre b { text-align: right; }
  .video-wahl { grid-template-columns: minmax(0, 1fr); }
  .partner-handy { display: none; }
  .fenster-satz span { font-size: 18px; }
  .fenster-satz small { font-size: 12px; }
}

/* ---------- Zahlenkacheln „Das Modell“ (/partner/verdienst, 16e, PLAN.md 15.5) ----------
   Die Kacheln der Schale sind für einstellige Werte gesetzt; hier stehen „3 bis 5 Jahre“ und „1.250 €“. Etwas kleiner,
   ab 1024 px ohne Umbruch im Wert. Die Leisten darunter rücken an das Ende der Kachel, damit sie in einer Reihe liegen. */
#modell-abschnitt .zahlen--kacheln .zahl { display: grid; grid-template-rows: auto 1fr auto; }
#modell-abschnitt .zahlen--kacheln .zahl__wert { font-size: clamp(40px, 4vw, 64px); }
@media (min-width: 1024px) { #modell-abschnitt .zahlen--kacheln .zahl__wert { white-space: nowrap; } }

/* ---------- Ruhige Fassung: alles im Endzustand, nichts blinkt ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor-strich { animation: none; }
  .kette::before, .gestrichen b::after, .anteil-balken span, .monatsleiste span, .zahl__leiste span, .jahresleiste__jahre li,
  .vergleichsbalken__kunde, .anteilsbalken span { transition: none; }
  .js .kette[data-ein]:not(.ist-da)::before, .js .gestrichen[data-ein]:not(.ist-da) b::after, .js .anteil-balken[data-ein]:not(.ist-da) span,
  .js .zahl__leiste[data-ein]:not(.ist-da) span { transform: none; }
  .js .zahl__leiste:not(.zahl__leiste--segmente)[data-ein]:not(.ist-da) span { transform: scaleX(var(--anteil, 1)); }
  .js .monatsleiste[data-ein]:not(.ist-da) span, .js .jahresleiste__jahre[data-ein]:not(.ist-da) > li { transform: none; opacity: 1; }
}


/* Schmale Fensterkarten (Abnahme Runde 3, L-045): lange Wörter im Titel trennen, offene Angaben dürfen in der Karte
   umbrechen, statt am Kartenrand abgeschnitten zu werden (1024: „Nebeneinkommen“, 1280: „oft 4.000 bis 10.000 €“). */
.karte--fenster .karte__titel { hyphens: auto; overflow-wrap: break-word; }
.karte--fenster .offen--ganz { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Abnahme Runde 4 (04.10.2026) ----------
   /partner/methode: Die Nummernmarke der Zeilenliste (marke--gross, 64 bis 76 px) ist größer als die erste Spalte der
   Schale (44 bis 72 px) und lag am Text an. Die erste Spalte wächst mit der Marke, der Spaltenabstand bleibt frei. */
.zeilenliste__zeile:has(> .marke--gross) { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 1199px) { .zeilenliste__zeile:has(> .marke--gross) { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.3fr); } }
@media (max-width: 767px) { .zeilenliste__zeile:has(> .marke--gross) { grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; } }
/* /partner: „lesen →“ der fünf Karten unten auf einer Linie (Text füllt den Rest der gleich hohen Karte) */
.partner-karten .karte { grid-template-rows: auto auto auto 1fr auto; }
/* /partner/verdienst: Zahlenkacheln unter 600 px einspaltig (vorher 11 bis 13 Zeichen je Zeile, Überstand bei 320),
   bis 1023 px zweispaltig (bei 768 standen vier Kacheln mit 13 Zeichen je Zeile) */
@media (max-width: 599px) { #modell-abschnitt .zahlen--kacheln { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) and (max-width: 1023px) { #modell-abschnitt .zahlen--kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* „Nach deiner Bewerbung“ ohne Ziffern (L-050, 07.10.2026): stil.css zählt 1, 2, 3 per Zähler; hier Punkte an einer
   durchgehenden Kobalt-Linie, die Reihenfolge zeigt die Linie. stil.css bleibt eingefroren, darum hier. */
.abschluss__schritte li { position: relative; }
.abschluss__schritte li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; justify-self: center; margin-top: 5px; }
.abschluss__schritte li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 21px; bottom: -16px; width: 2px;
  background: var(--akzent); }