/* Gerüst für geführte Assistenten (builder.js): nur Layout. Farben, Schrift und Komponenten kommen aus /styles.css. Präfix bd- */
.bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); gap: clamp(20px, 3vw, 40px); align-items: start; }
.bd-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; border-radius: var(--r-l); transition: box-shadow var(--fast) var(--ease); }
.bd-links.bd-drop { box-shadow: 0 0 0 3px var(--ink), 0 0 0 9px var(--lime-soft); }

/* Kopf: Schritt, Titel, Fortschritt, Menü */
.bd-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.bd-kopf h1 { font-size: clamp(26px, 1.4vw + 14px, 36px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; outline: none; }
.bd-kopf .kicker { margin-bottom: var(--s2); color: var(--muted); }
.bd-kopf-r { display: flex; align-items: center; gap: var(--s3); flex: none; }
.bd-fort { display: grid; gap: 4px; justify-items: end; min-width: 120px; }
.bd-fort-bar { width: 120px; height: 8px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.bd-fort-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); transition: width var(--slow) var(--ease); }
.bd-fort .small { color: var(--muted); }
.bd-menue { position: relative; }
.bd-menue-l { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 220px; padding: var(--s2); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--sh-3); border: 1px solid var(--line); }
.bd-menue-l button { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-s); background: none; font: inherit; font-size: var(--t-s); font-weight: 600; text-align: left; color: var(--ink); cursor: pointer; }
.bd-menue-l button:hover, .bd-menue-l button:focus-visible { background: var(--soft); }
.bd-menue-l svg { width: 18px; height: 18px; }

/* Rückmeldung des Bots über der Karte */
.bd-sag { display: flex; align-items: flex-start; gap: var(--s3); }
.bd-sag p { padding: 10px 16px; border-radius: var(--r-m) var(--r-m) var(--r-m) 6px; background: var(--soft); font-size: var(--t-s); font-weight: 500; max-width: 60ch; animation: rise var(--dur) var(--ease) both; }
.bd-bot { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: var(--lime); font-weight: 800; font-size: var(--t-s); }
.bd-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 6px 6px 16px; border-radius: var(--r-pill); background: var(--lime-soft); font-size: var(--t-s); font-weight: 600; }
.bd-hinweis svg { width: 18px; height: 18px; }

/* Die eine Karte */
.bd-karte { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0; }
.bd-rein { animation: rise var(--dur) var(--ease) both; }
.bd-frage, .bd-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); } /* eine Spalte, die nie breiter wird als die Karte (lange Namen, Vorschaubilder) */
.bd-q { font-size: clamp(24px, 1.6vw + 14px, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; outline: none; }
.bd-hilfe { color: var(--ink-2); font-size: var(--t-s); margin-top: calc(var(--s2) * -1); max-width: 62ch; }
.bd-label { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s2); }
.bd-frei { font-weight: 500; color: var(--muted); font-size: var(--t-xs); }
.bd-chips { gap: var(--s2); }
.bd-chips .chip, .bd-felder .chip { min-height: 44px; }
.bd-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.bd-opt.tile { min-height: 76px; justify-content: center; padding-right: 48px; }
.bd-opt small { margin-top: 2px; }
.bd-emp { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; vertical-align: middle; }
.bd-opt .bd-emp { margin: var(--s2) 0 0; justify-self: start; }
.bd-eigen-in { display: flex; gap: var(--s2); }
.bd-eigen-in input { flex: 1; min-width: 0; }
.bd-anders summary, .bd-info summary { cursor: pointer; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; gap: var(--s2); }
.bd-anders[open] summary { margin-bottom: var(--s2); }
.bd-offen { margin-top: var(--s3); }
/* display:flex nimmt der Zusammenfassung das Dreieck: ein Pfeil zeigt, dass sie aufgeht */
.bd-anders summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 4px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
.bd-anders[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.bd-anders summary::-webkit-details-marker { display: none; }
.bd-janein { display: flex; gap: var(--s3); flex-wrap: wrap; }
.bd-janein .btn { min-width: 140px; }
/* Zwei Spalten nur, wenn jede mindestens ~250 px hat: sonst waren Monat und Jahr bei „Von“/„Bis“ abgeschnitten („Jahı“, Runde 8) */
.bd-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); gap: var(--s3) var(--s4); }
.bd-felder > .bd-voll, .bd-felder > [data-art="auswahl"], .bd-felder > [data-art="heute"] { grid-column: 1 / -1; }
.bd-monat { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s2); min-width: 0; }
.bd-monat legend { grid-column: 1 / -1; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.bd-monat select { width: 100%; min-height: 50px; border-radius: var(--r-s); border: 1px solid var(--field); padding: 0 12px; font: inherit; font-size: var(--t-s); background-color: var(--surface); color: var(--ink); }
.bd-composer { display: flex; align-items: flex-end; gap: var(--s2); padding: 8px 8px 8px 18px; border-radius: var(--r-m); border: 2px solid var(--ink); background: var(--surface); transition: box-shadow var(--fast) var(--ease); }
.bd-composer:focus-within { box-shadow: 0 0 0 6px var(--lime-soft); }
.bd-composer textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 260px; padding: 12px 0; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: var(--t-m); color: var(--ink); }
.bd-mic { flex: none; }
.bd-mic.on { background: var(--night); color: var(--lime); animation: blink .8s infinite alternate; }
.bd-tip { padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--soft); font-size: var(--t-s); display: grid; gap: var(--s2); }
.bd-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s2); }
.bd-reicht { margin-left: auto; }
.bd-warten { min-height: 120px; align-items: center; }
/* Schritte beim Warten (Datei lesen → Text prüfen → ordnen): erledigt mit Haken, der aktuelle blinkt, die nächsten gedimmt */
.bd-schritte { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 4px; font-size: var(--t-s); color: var(--night-muted); }
.bd-schritte li { display: flex; align-items: center; gap: var(--s2); }
.bd-schritte li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.bd-schritte li.jetzt { color: #fff; font-weight: 700; }
.bd-schritte li.jetzt::before { border-color: var(--lime); background: var(--lime); animation: blink .8s infinite alternate; }
.bd-schritte li.fertig { color: #fff; }
.bd-schritte li.fertig::before { width: 10px; height: 6px; border: 0; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); border-radius: 0; transform: rotate(-45deg) translate(1px, -2px); }
.bd-w-hin { color: var(--night-muted); }
.bd-warten .bd-w-ab { margin-top: var(--s2); margin-left: calc(-1 * var(--s3)); color: #fff; }
.bd-warten .bd-w-ab:hover { background: rgba(255, 255, 255, .1); }
@media (prefers-reduced-motion: reduce) { .bd-schritte li.jetzt::before { animation: none; } }
.bd-fehler { margin: 0; }

/* Infos reinwerfen, Gesprächsverlauf */
.bd-info { padding: 0 var(--s4); border-radius: var(--r-m); background: var(--soft); }
.bd-info summary small { font-weight: 500; color: var(--muted); font-size: var(--t-xs); }
.bd-info summary svg { width: 18px; height: 18px; }
.bd-info-in { display: grid; gap: var(--s3); padding-bottom: var(--s4); }
.bd-info-in textarea { min-height: 110px; }
.bd-datei svg { width: 18px; height: 18px; }

/* Blätter rechts: sticky, A4 auf die Spaltenbreite skaliert */
.bd-rechts { position: sticky; top: var(--s4); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s3); max-height: calc(100svh - 32px); padding: var(--s3); border-radius: var(--r-l); background: var(--soft); min-width: 0; }
.bd-rechts-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s2); }
.bd-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
.bd-zoom { display: flex; align-items: center; gap: 2px; }
.bd-zoom .icon-btn { font-size: 20px; font-weight: 700; }
.bd-zoom .small { min-width: 44px; text-align: center; color: var(--muted); }
.bd-zu { display: none; }
.bd-blaetter { --bd-zoom: 1; display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--s3); overflow: auto; min-height: 0; overscroll-behavior: contain; padding: 2px; } /* max-content: Blätter nie stauchen (sonst fehlt unten ein Drittel), der Bereich scrollt */
.bd-blatt { width: calc(100% * var(--bd-zoom)); border-radius: 4px; background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.bd-blatt svg { display: block; width: 100%; height: auto; stroke: none; }
.bd-blatt [data-ref] { cursor: pointer; }
.bd-blatt rect[data-ref]:not([pointer-events="none"]):hover { fill: var(--lime); fill-opacity: .16; }
.bd-unter { color: var(--muted); }
.bd-vbtn { display: none; }

/* Handy und Tablet: eine Spalte, Vorschau als Knopf und Vollbild */
@media (max-width: 960px) {
  .bd { grid-template-columns: minmax(0, 1fr); }
  .bd-rechts { display: none; }
  .bd-vbtn:not([hidden]) { position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 6px 18px 6px 6px; border: 0; border-radius: var(--r-pill); background: var(--night); color: #fff; font: inherit; font-size: var(--t-s); font-weight: 700; box-shadow: var(--sh-3); cursor: pointer; }
  .bd-mini { display: block; width: 34px; height: 48px; border-radius: 3px; overflow: hidden; background: var(--surface); }
  .bd-mini svg { display: block; width: 100%; height: auto; }
  .bd-vbtn.bd-puls { animation: pop var(--slow) var(--spring) 2; }
  .bd-offen .bd-rechts { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .bd-offen .bd-zu { display: inline-flex; }
  .bd-offen .bd-rechts-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .bd-offen .bd-zoom { grid-row: 1; grid-column: 1; justify-self: start; }
  .bd-offen .bd-zu { grid-row: 1; grid-column: 2; }
  .bd-offen .bd-leiste { grid-row: 2; grid-column: 1 / -1; }
  .bd-offen .bd-vbtn { display: none; }
  .bd-kopf { flex-direction: column; }
  .bd-kopf-r { width: 100%; justify-content: space-between; }
  .bd-fort { justify-items: start; }
  .bd-links { padding-bottom: 72px; }
}
@media (max-width: 560px) {
  .bd-felder { grid-template-columns: minmax(0, 1fr); }
  .bd-reicht { margin-left: 0; }
  .bd-aktionen .btn.primary { flex: 1 1 100%; }
  .bd-kacheln { grid-template-columns: minmax(0, 1fr); }
}
.bd-gesperrt, .bd-gesperrt body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bd-rein, .bd-sag p, .bd-vbtn.bd-puls, .bd-mic.on { animation: none; } }
/* Viele Auswahl-Chips im Formular: etwas dichter, damit die Karte kurz bleibt (Ziel bleibt 44 px hoch) */
.bd-felder .chips { gap: 6px; }
.bd-felder .chips .chip { padding: 0 14px; font-size: var(--t-xs); }
.bd-emp-hin { font-size: var(--t-xs); color: var(--ink-2); margin-bottom: calc(var(--s2) * -1); }
.bd-emp-hin .bd-emp { margin: 0 6px 0 0; }
/* Feld direkt vor „Von“ über die ganze Breite, damit Von und Bis nebeneinander stehen */
.bd-felder > [data-art="text"]:has(+ [data-art="monat"]) { grid-column: 1 / -1; }
/* Die kurzen Beschreibungen auf Kacheln helfen beim Antworten: im Assistenten auch am Handy zeigen */
@media (max-width: 760px) { .bd .tile small { display: block; } }

/* Überschrift im Kopf nie mitten im Wort trennen („Bewer-bung schreiben“ in der schmalen Spalte): lieber kleiner und ganze Wörter */
.bd-kopf-t { min-width: 0; }
.bd-kopf h1 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
@media (max-width: 1180px) { .bd-kopf h1 { font-size: clamp(22px, 2.2vw + 10px, 30px); } }
@media (max-width: 560px) { .bd-kopf { flex-wrap: wrap; } .bd-kopf-r { width: 100%; justify-content: space-between; } .bd-fort { justify-items: start; } }
/* Vorschläge als Liste mit Häkchen (Bewerbung schreiben, Runde 6): linksbündig, kurz, keine Silbentrennung */
.bd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.bd-li { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: 8px var(--s3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-s); font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.bd-li:hover { border-color: var(--ink-2); }
.bd-li > i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--field); background: var(--surface); }
.bd-li > i svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.bd-li > span { min-width: 0; overflow-wrap: break-word; hyphens: none; }
.bd-li[aria-pressed="true"] { border-color: var(--night); background: var(--soft); }
.bd-li[aria-pressed="true"] > i { background: var(--night); border-color: var(--night); color: var(--lime); }
.bd-li[aria-pressed="true"] > i svg { opacity: 1; }
.bd-mehr-vor { justify-self: start; }
.bd-mehr-vor svg { width: 16px; height: 16px; }

/* Kopf: Fortschritt immer unter dem Titel (Paul 28.10.2026: „Schritt 3 von 10: Was du schon hast“ lief am PC in den Titel hinein) */
.bd-kopf { flex-direction: column; align-items: stretch; gap: var(--s3); }
.bd-kopf-r { width: 100%; justify-content: space-between; }
.bd-fort { flex: 1; min-width: 0; justify-items: start; }
.bd-fort-bar { width: 100%; max-width: 280px; }
.bd-fort .small { overflow-wrap: anywhere; }

/* Vorschau im Vollbild auf allen Geräten: „Vollbild“ oder „+“ öffnet, „−“ bei 100 % oder „Schließen“ schließt.
   Blätter mittig und gut lesbar breit; größer gezoomt lässt sich auch seitlich scrollen (nichts wird abgeschnitten). */
.bd-rechts-kopf { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.bd-vollbild svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bd-blatt { width: calc(var(--bd-basis, 100%) * var(--bd-zoom)); }
.bd-offen .bd-vollbild { display: none; }
.bd-offen .bd-rechts { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
.bd-offen .bd-zu { display: inline-flex; }
.bd-offen .bd-rechts-kopf { grid-template-columns: minmax(0, 1fr) auto auto; }
.bd-offen .bd-leiste { grid-row: 2; grid-column: 1 / -1; }
.bd-offen .bd-zoom { grid-row: 1; grid-column: 2; }
.bd-offen .bd-zu { grid-row: 1; grid-column: 3; }
.bd-offen .bd-blaetter { --bd-basis: min(100%, 900px); padding: 2px 2px var(--s4); }
.bd-offen .bd-blatt { margin-inline: auto; } /* breiter als der Platz: beginnt links, seitlich scrollbar */
@media (max-width: 960px) {
  .bd-vollbild { display: none; }
  .bd-offen .bd-zoom { grid-row: 1; grid-column: 1; justify-self: start; }
  .bd-offen .bd-zu { grid-row: 1; grid-column: 3; }
}

/* Vollbild (Paul 28.10.2026): die ganze Ansicht scrollt, oben bleibt nur ein schmaler Balken stehen. Vorher scrollten die Blätter
   in einem Kasten unter einer hohen Leiste, das Blatt wirkte oben abgeschnitten. */
.bd-offen .bd-rechts { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: 0 var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
.bd-offen .bd-rechts-kopf { margin: 0 calc(var(--s4) * -1); padding: var(--s3) var(--s4); background: var(--soft); border-bottom: 1px solid var(--line); }
/* Scrollen im Vollbild (Patch 28.10.2026): der Blatt-Bereich scrollt selbst, senkrecht und gezoomt auch seitlich. Vorher scrollte nichts,
   weil Chrome dem Bereich mit overflow-y: hidden nur den freien Platz gab und der Rest abgeschnitten war. */
.bd-offen .bd-blaetter { overflow: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: var(--s3); }
@media (min-width: 961px) { .bd-offen .bd-leiste { flex-wrap: nowrap; } .bd-offen .lv .bd-leiste .lv-farben { flex: 0 1 auto; order: 0; } }
/* Handy: Vorschau-Knopf klein (Auge statt Mini-Blatt), unten Platz lassen, damit er nichts verdeckt */
.bd-vbtn-ic { display: none; }
@media (max-width: 960px) {
  .bd-vbtn:not([hidden]) { min-height: 48px; padding: 0 18px 0 14px; box-shadow: var(--sh-2); }
  .bd-vbtn .bd-mini { display: none; }
  .bd-vbtn-ic { display: block; width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bd { padding-bottom: 76px; }
}

/* Beim Scrollen im Vollbild blendet die obere Kante weich aus, statt das Blatt hart abzuschneiden (Paul 28.10.2026) */
.bd-offen .bd-blaetter { padding-top: 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }

/* Vollbild am PC: Balken in EINER Zeile (Struktur/PDF/Bearbeiten links, Zoom und Schließen rechts), damit oben wenig Platz weggeht */
@media (min-width: 961px) {
  .bd-offen .bd-rechts-kopf { grid-template-columns: minmax(0, 1fr) auto auto; padding-block: var(--s2); }
  .bd-offen .bd-leiste { grid-row: 1; grid-column: 1; }
  .bd-offen .bd-zoom { grid-row: 1; grid-column: 2; }
  .bd-offen .bd-zu { grid-row: 1; grid-column: 3; }
}

/* Vorschau rechts neben dem Formular (Paul 28.10.2026): Struktur, Farben und PDF bekommen eine ganze Zeile, Vollbild und Zoom darunter.
   Vorher standen Leiste, Vollbild und Zoom in einer Zeile; der Leiste blieben 37 px und alles stand untereinander. */
.bd:not(.bd-offen) .bd-rechts-kopf > .bd-leiste { grid-column: 1 / -1; }
.bd:not(.bd-offen) .bd-rechts-kopf > .bd-zoom { justify-self: end; }
.bd:not(.bd-offen) .bd-rechts-kopf > .bd-vollbild { justify-self: start; }

/* Mein Bereich mit Seitenleiste: unter 1200 px Fensterbreite bleiben neben der Leiste zu wenig Platz für Formular UND Vorschau
   (bei 1024 px links 313 px, rechts 320 px). Dann eine Spalte wie am Tablet, die Vorschau über den Knopf unten rechts im Vollbild. */
@media (min-width: 961px) and (max-width: 1199px) {
  .app .bd { grid-template-columns: minmax(0, 1fr); padding-bottom: 76px; }
  .app .bd-rechts { display: none; }
  .app .bd-offen .bd-rechts { display: grid; }
  .app .bd-vbtn:not([hidden]) { position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--night); color: #fff; font: inherit; font-size: var(--t-s); font-weight: 700; box-shadow: var(--sh-2); cursor: pointer; }
  .app .bd-vbtn .bd-mini { display: none; }
  .app .bd-vbtn-ic { display: block; width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .app .bd-offen .bd-vbtn { display: none; }
}