/* visuellweb, Partnerseiten /partner/voraussetzungen, /partner/fragen, /partner/bewerben, /partner/danke
   (Bauer B2, 02.10.2026, PLAN.md Abschnitt 7). Nur Klassen, die stil.css nicht hat; stil.css bleibt eingefroren.
   Farben ausschließlich über die Farbrollen der Schale (var(--…)), Koralle nur als Linie, Kante, Marke oder Knopf
   (L-015). Eingebunden aus den Teilen in quelle/teile/partner/. */

/* ---------- Piktogramme 48 × 48: Linie Pflaume, ein Detail Koralle (PLAN.md Abschnitt 7) ---------- */
.pikto { width: 48px; height: 48px; flex: none; fill: none; stroke: var(--sekundaer); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; }
.pikto .pikto__akzent { stroke: var(--akzent); stroke-width: 3; }
.pikto--klein { width: 32px; height: 32px; }
/* als Marke: Kobalt-Quadrat 64 × 64 wie die Stufenmarken (höchstens 64 × 64), Linie Weiß (PLAN.md 16.1) */
.pikto--marke { width: 64px; height: 64px; padding: 9px; border-radius: 14px; background: var(--akzent); stroke: var(--dominant); }
.pikto--marke .pikto__akzent { stroke: var(--dominant-hell); }
.flaeche--pflaume .pikto { stroke: var(--dominant); }
.flaeche--pflaume .pikto .pikto__akzent { stroke: var(--akzent-hell); }
.karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.karte__titel a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.karte__titel a:hover, .karte__titel a:focus-visible { color: var(--akzent-tief); }
.karte__text a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Kartenlisten als ul.raster ohne Einzug des Browsers (Abnahme /partner/danke, Runde 1) ---------- */
ul.raster { list-style: none; padding: 0; }

/* ---------- Seitenkopf: Fenster rechts im Rand, Status darunter, Datenzeile D-029 mit den Kernaussagen ---------- */
.seitenkopf__bild .fenster-ort { margin-left: 10px; }
.bild-status { margin-top: 18px; font-size: 16px; line-height: 1.45; }
/* über die volle Breite (L-020): Ränder wie die Randabschnitte, Einträge verteilt von Rand zu Rand */
.datenzeile--seitenkopf { justify-content: space-between; margin: clamp(28px, 3.4vw, 48px) calc(-1 * var(--rand-schmal)) calc(-1 * clamp(32px, 4vw, 56px));
  padding-inline: var(--rand-schmal); }

/* ---------- Regeln zur Ansprache (§ 7 UWG) ---------- */
.regel-paragraf { font: italic 400 clamp(44px, 5vw, 80px)/1 var(--schrift-kopf); color: var(--akzent-tief); }
.regeln { display: grid; gap: clamp(24px, 3vw, 40px); }
.regeln__einleitung { max-width: 46em; }
.regelliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.regelliste li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 18px; line-height: 1.45; }
.regelliste .pikto { margin-top: -2px; }
.regel-schluss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
/* KI-Vermerk als Pille mit Rand, 16 px (Kennzeichnung, kein Kleingedrucktes) */
.ki-vermerk { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor; font-size: 16px; font-weight: 600; line-height: 1.35; }
/* klein unter dem Regelblock (/partner/voraussetzungen, Abnahme Runde 1): ohne Pille, 16 px, normale Stärke */
.ki-vermerk--klein { display: block; min-height: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; font-weight: 400; }

/* ---------- Fragen: zwei Spalten, Nebenspalte mit Laufband, Nummern als Zähler ---------- */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas: "a b seite"; gap: 32px clamp(24px, 3vw, 48px); align-items: start; }
.fragen--a { grid-area: a; }
.fragen--b { grid-area: b; }
.fragen-raster__seite { grid-area: seite; display: grid; gap: 22px; align-content: start; padding-left: 10px; }
.frage__antwort a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }
.seite-notiz { font-size: 17px; line-height: 1.5; }
.seite-notiz a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }

/* Laufband der Schritte (A-618): senkrecht, in Cabin, hält beim Überfahren, beim Fokus, mit dem Knopf und außer Sicht */
.laufband .fenster__inhalt { overflow: hidden; aspect-ratio: 4 / 3; }
.laufband__bahn { display: grid; }
.laufband__liste { list-style: none; margin: 0; padding: 6px 18px 6px; display: grid; gap: 12px; font-size: 17px; line-height: 1.4; }
.laufband__liste:first-child { padding-top: 18px; }
.laufband__liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.laufband__liste b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--akzent); color: var(--dominant); font: 700 16px/1 var(--schrift-text); }
.laufband__kopie { display: none; }
.laufband__knopf { flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 0;
  border-radius: 999px; background: var(--sekundaer); color: var(--dominant); font-size: 16px; font-weight: 600; cursor: pointer; }
.laufband__knopf[hidden] { display: none; }
.laufband__knopf:hover, .laufband__knopf:focus-visible { background: var(--sekundaer-karte); }
.laufband.ist-angehalten .laufband__knopf { background: var(--dominant-hell); color: var(--sekundaer); box-shadow: inset 0 0 0 1.5px var(--sekundaer); }
@media (prefers-reduced-motion: no-preference) {
  .js .laufband.ist-bereit .laufband__kopie { display: grid; }
  .js .laufband.ist-bereit .laufband__bahn { animation: laufband-lauf 26s linear infinite; }
  .js .laufband.ist-bereit:is(:hover, :focus-within, .ist-angehalten, .ist-aussen) .laufband__bahn { animation-play-state: paused; }
}
@keyframes laufband-lauf { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband .fenster__inhalt { aspect-ratio: auto; }
  .laufband__liste:first-child { padding-bottom: 18px; }
}

/* ---------- Bewerbung: Formular links, drei Schritte rechts ---------- */
.bewerbung { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 1fr); gap: 40px clamp(32px, 5vw, 96px); align-items: start; }
.bewerbung__formular { min-width: 0; }
.formular[hidden] { display: none; }
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.danke-meldung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 24px 40px; align-items: center;
  padding: clamp(24px, 3vw, 40px); }
.danke-meldung[hidden] { display: none; }
.danke-meldung__titel { font-size: clamp(32px, 3vw, 44px); margin-bottom: 12px; }
.danke-meldung .fenster-ort { margin-left: 10px; }

/* Haken im Markenfenster (PLAN.md, kleine Seiten: Haken Koralle) */
.haken { fill: none; stroke: var(--akzent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.fenster--auge .fenster__inhalt svg.haken { width: 30%; }

/* ---------- Breiten ---------- */
@media (max-width: 1199px) {
  .fragen-raster { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "a seite" "b seite"; row-gap: 0; }
  .fragen--b { border-top: 0; }
}
@media (max-width: 1023px) {
  .bewerbung { grid-template-columns: minmax(0, 1fr); }
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Abnahme Runde 2: die Liste 01 bis 12 liest sich am Stück, der Kasten „Web Design Bot“ mit KI-Vermerk folgt danach
     (vorher stand er zwischen 06 und 07) */
  .fragen-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "seite"; row-gap: 0; }
  .fragen--b { border-top: 0; }
  .fragen-raster__seite { max-width: 420px; margin-top: 32px; }
  .ablauf { grid-template-columns: minmax(0, 1fr); }
  .regelliste li { font-size: 17px; }
}
@media (max-width: 599px) {
  .danke-meldung { grid-template-columns: minmax(0, 1fr); }
  .danke-meldung .fenster-ort { max-width: 260px; }
}

/* ---------- Karte in Pflaume auf heller Fläche (Farbregel: Sekundär auf rund 20 %, PLAN.md Abschnitt 4) ---------- */
.karte.karte--dunkel { background: var(--sekundaer); color: var(--dominant); border-color: var(--sekundaer); }
.karte--dunkel .karte__nr { color: var(--dominant); }
.karte--dunkel .pikto { stroke: var(--dominant); }
.karte--dunkel .pikto .pikto__akzent { stroke: var(--akzent-hell); }
.karte--dunkel .pikto--marke { stroke: var(--dominant); }
.karte--dunkel .pikto--marke .pikto__akzent { stroke: var(--dominant-hell); }
.karte--dunkel a { color: var(--akzent-hell); }
.karte--dunkel :focus-visible { outline-color: var(--dominant); }

/* ---------- Koralle am Desktop Richtung 7 % (L-018, Abnahme Runde 1), nur erlaubte Formen aus PLAN.md Abschnitt 4:
   Leisten 44 px, Nummern bis 64 px, Kanten 8 px, Linien. Keine Karte und kein Abschnitt in Koralle (L-015). ---------- */
/* Kartenleiste 44 px oben, wie die Fensterleisten (/partner/danke, Regelkarten /partner/voraussetzungen) */
.karte--leiste { overflow: hidden; padding-top: calc(44px + clamp(18px, 2vw, 26px)); }
.karte__leiste { position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--akzent);
  border-bottom: 2.5px solid var(--sekundaer); }
/* Regelkarten: der Titel steht selbst in der Leiste, Schrift Pflaume auf Koralle */
.regelkarte { overflow: hidden; }
.regelkarte > .karte__titel { display: flex; align-items: center; min-height: 44px; margin: calc(-1 * clamp(20px, 2.2vw, 30px)) calc(-1 * clamp(20px, 2.2vw, 30px)) 8px;
  padding: 0 clamp(20px, 2.2vw, 30px); background: var(--akzent); color: var(--dominant); font-size: 20px; }
.regelkarte .regelliste .pikto--klein { padding: 5px; border-radius: 8px; background: var(--akzent); }
.regelkarte .regelliste .pikto--klein path { stroke: var(--dominant); }
/* Fragen ohne Nummern (L-050, 07.10.2026), Trennlinien in Koralle */
.frage-zeile { position: relative; border-bottom: 3px solid var(--akzent); }
.fragen-raster .frage-zeile .frage { padding-left: 0; border-bottom: 0; }
.flaeche--pflaume .zahl { border-top: 8px solid var(--akzent); }
/* Bewerbung: Formular im Fenster mit Leiste 44 px und Kante 8 px, Linien der Zeilenliste in Koralle */
.formular-fenster { border: 2.5px solid var(--sekundaer); border-left: 8px solid var(--akzent); border-radius: 14px; overflow: hidden;
  background: var(--dominant-hell); max-width: 820px; }
.formular-fenster > .fenster__leiste { height: 44px; }
.formular-fenster .formular { padding: clamp(20px, 2.6vw, 32px); }
.formular-fenster .danke-meldung { margin: 0; }
.zeilenliste--koralle { border-top: 3px solid var(--akzent); }
.zeilenliste--koralle .zeilenliste__zeile { border-bottom: 3px solid var(--akzent); }
@media (max-width: 767px) {
  /* am Handy schmale Leiste, sonst liegt Koralle über 9 % (PLAN.md Abschnitt 4) */
  .karte--leiste { padding-top: calc(12px + 20px); }
  .karte__leiste { height: 12px; border-bottom-width: 2px; }
}

/* Fehlerzustand im Bewerbungsformular wie auf /anfrage (seite-anfrage.css, Entscheidung Dirigent 03.10.2026; Abnahme
   Runde 2): nicht Kobalt, damit Fehler nicht wie Links oder Knöpfe aussehen, sondern Schwarz mit schwarzem Warndreieck
   und weißem „!“, das Feld mit Fehler bekommt einen schwarzen Rahmen. Nur im Formular #bewerbung (stil.css eingefroren). */
#bewerbung .feld__fehler { color: var(--sekundaer); }
#bewerbung .feld__fehler::before { content: "!"; width: 22px; height: 20px; padding-top: 5px; border-radius: 0; background: var(--sekundaer);
  color: var(--dominant); font: 700 12px/1 var(--schrift-text); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#bewerbung .feld__eingabe[aria-invalid="true"] { border-color: var(--sekundaer); box-shadow: 0 0 0 1.5px var(--sekundaer); }

/* Akzent am Desktop über 5 % (Abnahme Runde 2, L-018; vorher 4,9 %): Leisten der drei Schrittkarten 56 px statt
   44 px (Leisten, keine Fläche, L-015). Nur ab 1024 px; am Handy lag der Akzent schon im Ziel. */
@media (min-width: 1024px) {
  .ablauf .karte--leiste { padding-top: calc(56px + clamp(18px, 2vw, 26px)); }
  .ablauf .karte__leiste { height: 56px; }
}

/* /partner/fragen am Desktop: Akzent fiel nach der Schalen-Runde 2 (schmalere Spalten durch --rand) von 5,4 auf 4,3 %.
   messen.mjs zählt nur Hintergründe, keine Rahmen: darum Nummernmarken 76 px statt 64 px, Leiste des Laufband-Fensters
   56 px statt 44 px und dessen Versatzschatten 24 px statt 14 px (L-018, keine Fläche nach L-015). */
@media (min-width: 1024px) {
  .fragen-raster__seite .laufband > .fenster__leiste { height: 56px; }
  .fragen-raster__seite .fenster-ort--klein { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
}

/* Auge im Abschlussfenster „dein Einstieg“ (Abnahme Runde 3): dieselben Farben wie auf /partner (seite-partner.css),
   sonst füllt das SVG alles schwarz. */
.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); }
/* /partner/bewerben: das Kopffenster zeigt nur das Auge. Am Handy schob es das Formular um 234 px nach unten
   (Abnahme Runde 3), dort entfällt es; die Datenzeile darunter bleibt der Platzfüller des Kopfs. */
@media (max-width: 767px) {
  .seitenkopf__bild--zier { display: none; }
}

/* ---------- Abnahme Runde 4 (04.10.2026) ----------
   Felder einer Reihe bleiben bündig, auch wenn eine Meldung zweizeilig wird (vorher rutschte die E-Mail 8 px tiefer);
   Meldungen umbrechen ausgewogen, ohne einzelnes Wort in der letzten Zeile. */
#bewerbung .formular__reihe { align-items: start; }
#bewerbung .feld { align-content: start; }
#bewerbung .feld__fehler { text-wrap: balance; }
/* Eine Trennung statt zwei paralleler Linien: folgt auf die Kopflinie direkt die Zahlenleiste (/partner/fragen) oder die
   Kobalt-Liste (/partner/bewerben), ist die Kopflinie zugleich deren Oberkante. */
.abschnittskopf:has(> .abschnittskopf__linie):has(+ :is(.zahlen:not(.zahlen--kacheln), .zeilenliste--koralle)) { margin-bottom: 0; }
.abschnittskopf:has(> .abschnittskopf__linie) + :is(.zahlen:not(.zahlen--kacheln), .zeilenliste--koralle) { border-top: 0; }

/* Abnahme Runde 5: Schrittkarten auf /partner/bewerben und /partner/danke tragen in der Kobaltleiste Auge und
   Beschriftung wie die übrigen Leisten der Site, statt einer leeren Kobaltfläche. Am Handy 40 px statt 12 px. */
.karte__leiste--auge { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.karte__leiste--auge .fenster__auge { width: 32px; height: 20px; }
.karte__leiste--auge .fenster__adresse { flex: 0 1 auto; min-width: 0; max-width: 200px; height: 24px; padding: 0 10px; font-size: 13px; }
@media (max-width: 767px) {
  .karte--leiste:has(> .karte__leiste--auge) { padding-top: calc(40px + 20px); }
  .karte__leiste.karte__leiste--auge { height: 40px; border-bottom-width: 2.5px; }
}

/* „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); }