/* Lebenslauf bauen (lebenslauf.js): nur Layout auf dem Gerüst builder.css. Farben und Schrift aus /styles.css.
   Die Dokumentfarben der Farbknöpfe kommen aus ZS_LV.FARBEN (gehören zum Dokument, nicht zur Website). Präfix lv- */

/* Vorschau: Beispiel-Kennzeichnung, Änderungen blinken kurz auf */
.lv.lv-bsp .bd-blatt { position: relative; }
.lv.lv-bsp .bd-blatt::after { content: "Beispiel"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: var(--r-pill); background: var(--night); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lv .bd-unter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.lv .lv-mark { animation: lvMark 2.6s var(--ease) both; }
@keyframes lvMark { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* Werkzeugleiste über den Blättern */
.lv-struk span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.lv-farben { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; } /* schmale Leiste (iPad, PC mit Vorschau rechts): Farben in zwei Reihen statt hinaus */
.lv-farbe { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lv-farbe::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--lv-f); box-shadow: inset 0 0 0 1px rgba(18, 20, 18, .18); transition: transform var(--fast) var(--spring); }
.lv-farbe:hover::before { transform: scale(1.12); }
.lv-farbe[aria-checked="true"]::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--ink); }
.lv-pdfbtn { margin-left: auto; }
.lv .bd-leiste .lv-farben { flex: 1 1 100%; order: 3; }

/* Start */
.lv-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.lv-st { min-height: 128px; }
.lv-st span { display: grid; gap: 2px; }
.lv-text { display: grid; gap: var(--s3); }
.lv-ok .okrow span { font-size: var(--t-xs); line-height: 1.5; }
.lv-ok .small .link { font-weight: 700; }
.lv-schutz { display: flex; align-items: center; gap: var(--s2); }
.lv-schutz svg { width: 18px; height: 18px; flex: none; }

/* Struktur: Galerie mit echten Mini-Seiten */
.lv-grund { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--lime-soft); font-size: var(--t-s); }
.lv-grund svg { width: 20px; height: 20px; margin-top: 2px; }
.lv-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.lv-vl { display: grid; gap: var(--s2); align-content: start; padding: var(--s2); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--soft); text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--spring); }
.lv-vl:hover { border-color: var(--ink); transform: translateY(-2px); }
.lv-vl[aria-checked="true"] { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px var(--lime-soft); }
.lv-vl-bild { display: block; border-radius: 4px; overflow: hidden; box-shadow: var(--sh-1); background: var(--surface); pointer-events: none; }
.lv-vl-bild svg { display: block; width: 100%; height: auto; }
.lv-vl-t { display: grid; gap: 2px; padding: 0 2px 2px; }
.lv-vl-t b { font-size: var(--t-s); }
.lv-vl-t small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.lv-vl-t .lv-fuer { color: var(--ink-2); font-weight: 600; }
.lv-passt { justify-self: start; padding: 1px 8px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; }
.lv-farbzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.lv-farbzeile .bd-label { margin: 0; }
.bd-aktionen > .small { flex: 1 1 200px; }

/* Kontakt */
.lv-kontakt { display: grid; gap: var(--s4); }
.lv-mehr { padding: 0 var(--s4); border-radius: var(--r-m); background: var(--soft); }
.lv-mehr summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); font-weight: 600; }
.lv-mehr[open] { padding-bottom: var(--s4); }
.lv-mehr .bd-felder { margin-top: var(--s3); }
.lv-adresse > :first-child { grid-column: 1 / -1; }
.lv-adresse { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lv-kontakt .chips .chip svg { width: 18px; height: 18px; }

/* Fragen: KI-Zeile unter der Karte */
.lv-kizeile { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding-top: var(--s3); border-top: 1px solid var(--line); }
.lv-kizeile .okrow span { font-size: var(--t-xs); }

/* Foto */
.lv-foto { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.lv-foto-bild { display: grid; place-items: center; width: 132px; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; background: var(--soft); color: var(--muted); }
.lv-foto-bild img { width: 100%; height: 100%; object-fit: cover; }
.lv-foto-bild svg { width: 64px; height: 64px; stroke-width: 1.5; }
.lv-foto-r { display: grid; gap: var(--s3); justify-items: start; }
.lv-foto-r .bd-kacheln { width: 100%; }
.lv-foto-r .btn svg, .lv-weg svg, .lv-kurz .btn svg { width: 18px; height: 18px; }

/* Feinschliff */
.lv-kurz { display: grid; gap: var(--s2); justify-items: start; padding: var(--s4); border-radius: var(--r-m); background: var(--soft); }
.lv-kurz p:not(.kicker) { font-size: var(--t-m); line-height: 1.5; }
.lv-hinweise { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.lv-hinweise li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r-m); border: 1px solid var(--line); font-size: var(--t-s); }
.lv-hinweise li > span:nth-child(2) { flex: 1; }
.lv-h-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); }
.lv-allesgut { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--lime-soft); font-weight: 600; }

/* Fertig */
.lv-fertig { position: relative; display: grid; gap: var(--s4); justify-items: start; }
.lv-siegel { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--night); color: var(--lime); animation: pop var(--slow) var(--spring) both; }
.lv-siegel svg { width: 32px; height: 32px; stroke-width: 2.5; }
.lv-unterschrift { cursor: pointer; }
.lv-konfetti { position: absolute; left: 32px; top: 32px; width: 0; height: 0; pointer-events: none; }
.lv-konfetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--lime); animation: fly 1.2s var(--ease) var(--d) forwards; }
.lv-konfetti i:nth-child(3n) { background: var(--night); width: 6px; height: 6px; border-radius: 50%; }

/* Selbst ändern: Eintrag und Listen */
.lv-eintrag select { width: 100%; }
.lv-weg { color: var(--ink-2); }
.lv-liste { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); container: lvliste / inline-size; } /* Spalte nie breiter als die Karte */
.lv-zeile { display: flex; gap: var(--s2); align-items: center; }
.lv-zeile input, .lv-zeile select { min-height: 48px; border-radius: var(--r-s); border: 1px solid var(--field); padding: 0 12px; background: var(--surface); color: var(--ink); font-size: var(--t-s); min-width: 0; }
.lv-zeile input[data-z="name"] { flex: 1 1 160px; }
.lv-zeile select { flex: 0 1 170px; }
.lv-zeile .lv-jahr { flex: 0 0 84px; }
/* Schmale Karte (Handy, Formular neben der Vorschau): Name oben über die ganze Breite, Auswahl und Entfernen darunter.
   Nach der Breite der Liste, nicht des Fensters (Paul 28.10.2026: Kenntnisse liefen unter die Vorschau). */
@container lvliste (max-width: 560px) {
  .lv-zeile { flex-wrap: wrap; }
  .lv-zeile input[data-z="name"] { flex-basis: calc(100% - 52px); }
  .lv-zeile select { flex: 1 1 120px; order: 2; padding: 0 4px 0 10px; } /* „keine Angabe“ passt auch am Handy ganz hinein */
  .lv-zeile [data-raus] { order: 1; } /* Entfernen neben dem Namen, die Auswahl darunter */
}

@media (max-width: 640px) {
  .lv-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .lv-start { grid-template-columns: minmax(0, 1fr); }
  .lv-st { min-height: 84px; flex-direction: row; justify-content: flex-start; align-items: center; }
  .lv-foto { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); }
  .lv-foto-bild { width: 96px; }
  .lv-hinweise li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .lv .lv-mark { animation: none; } .lv-siegel, .lv-konfetti i { animation: none; } .lv-vl:hover { transform: none; } }

/* Mein Lebenslauf (Phase fertig): nächste Schritte, Aussehen, Abschnitte einzeln bearbeiten */
.lv-weiter { display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%; }
.lv-weiter .btn.primary { flex: 1 1 100%; justify-content: center; }
.lv-auto { display: flex; gap: var(--s2); align-items: flex-start; color: var(--ink-2); }
.lv-auto svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.lv-design { display: grid; gap: var(--s2); width: 100%; }
.lv-design-r { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.lv-abschnitte { width: 100%; border-top: 1px solid var(--line); padding-top: var(--s3); }
.lv-abschnitte summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lv-abschnitte ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; }
.lv-abschnitte button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 52px; padding: var(--s2) var(--s1); border-bottom: 1px solid var(--line); cursor: pointer; }
.lv-abschnitte button:hover, .lv-abschnitte button:focus-visible { background: var(--soft); }
.lv-abschnitte button:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.lv-abschnitte button > span { min-width: 0; display: grid; }
.lv-abschnitte b { font-size: var(--t-s); overflow-wrap: break-word; }
.lv-abschnitte small { color: var(--muted); font-size: var(--t-xs); overflow-wrap: break-word; }
.lv-abschnitte svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.lv-uebernommen { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--lime-soft, var(--soft)); font-size: var(--t-s); }
.lv-uebernommen svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }