/* bo-lebenslauf.css — [NEUE-VERSION] (Fenster BL1, Auftrag 285). Der Lebenslauf im Browser. Keine externen Schriften, keine Bilder. */
.bl-dialog {
  --bl-grund: #f4f6f8; --bl-flaeche: #ffffff; --bl-text: #1c2530; --bl-matt: #55606c; --bl-linie: #cdd5dd; --bl-akzent: #1f4e79; --bl-warn: #8a3b00;
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bl-grund); color: var(--bl-text); font-size: 16px;
}
.bl-dialog[open] { display: flex; flex-direction: column; }
.bl-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.bl-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bl-flaeche); border-bottom: 1px solid var(--bl-linie); }
.bl-kopf__titel h2 { margin: 0; font-size: 1.15rem; }
.bl-verbunden { margin: 2px 0 0; font-size: .85rem; color: #1d6b3a; }
.bl-verbunden--offen { color: var(--bl-warn); }
.bl-kopf__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-btn { min-height: 44px; padding: 8px 12px; border: 1px solid var(--bl-linie, #cdd5dd); border-radius: 8px; background: #fff; color: #1c2530; font: inherit; font-size: .95rem; cursor: pointer; }
.bl-btn--haupt { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.bl-btn--klein { min-height: 36px; padding: 4px 10px; font-size: .85rem; }
.bl-btn--plus { border-style: dashed; color: #1f4e79; }
.bl-btn--weg { min-width: 44px; align-self: flex-start; margin-top: 22px; }
html.bl-offen, html.bl-offen body { overflow: hidden; max-width: 100vw; }
.bl-mehr { position: relative; }
.bl-mehr__titel { display: flex; align-items: center; list-style: none; }
.bl-mehr__titel::-webkit-details-marker { display: none; }
.bl-mehr__innen { position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); width: min(340px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border: 1px solid var(--bl-linie); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.bl-zwischen { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--bl-matt); }
.bl-info { padding: 6px 16px; font-size: .88rem; background: #e8eef4; }
.bl-hinweis { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin: 0; padding: 6px 16px; font-size: .85rem; color: var(--bl-matt); background: var(--bl-flaeche); border-bottom: 1px solid var(--bl-linie); }
.bl-haken { display: flex; gap: 8px; align-items: flex-start; }
.bl-haken input { width: 20px; height: 20px; flex: none; }
.bl-meldung { margin: 0; padding: 8px 16px; font-size: .92rem; background: #eef2f6; }
.bl-meldung--warn { background: #fdf0e3; color: var(--bl-warn); }
.bl-meldung--ok { background: #e6f4ea; color: #1d6b3a; }
.bl-tabs { display: none; gap: 4px; padding: 6px 16px; background: var(--bl-flaeche); border-bottom: 1px solid var(--bl-linie); }
.bl-tab--an { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.bl-haupt { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 12px 16px; overflow: hidden; }
.bl-eingabeflaeche { flex: 1 1 50%; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bl-rechts { flex: 1 1 50%; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bl-galerie { display: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bl-dialog[data-tab="designs"] .bl-galerie { display: grid; }
.bl-dialog[data-tab="designs"] .bl-vorschau { display: none; }
.bl-bereich { margin: 0 0 14px; padding: 12px 14px; background: var(--bl-flaeche); border: 1px solid var(--bl-linie); border-radius: 10px; }
.bl-bereich__titel { margin: 0 0 6px; font-size: 1.02rem; }
.bl-bereich__hilfe { margin: 0 0 8px; font-size: .86rem; color: var(--bl-matt); }
.bl-unter { margin: 10px 0 4px; font-size: .92rem; }
.bl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; flex: 1; min-width: 0; }
.bl-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-feld[hidden] { display: none; }
.bl-feld--breit { grid-column: 1 / -1; }
.bl-feld__name { font-size: .85rem; font-weight: 600; }
.bl-feld__pflicht { font-weight: 400; color: var(--bl-warn); font-size: .78rem; }
.bl-feld__hilfe { display: block; font-size: .8rem; color: var(--bl-matt); }
.bl-feld__hinweis { display: flex; flex-direction: column; gap: 4px; }
.bl-feld__warnung { display: block; margin: 0; font-size: .84rem; color: var(--bl-warn); }
.bl-eingabe { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 1px solid #9aa7b5; border-radius: 8px; background: #fff; color: #1c2530; font: inherit; font-size: 16px; }
textarea.bl-eingabe { resize: vertical; }
.bl-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.bl-liste__zeile { display: flex; gap: 8px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px dotted var(--bl-linie); }
.bl-liste__zeile > .bl-feld { flex: 1; min-width: 0; }
.bl-liste__zeile > .bl-btn--weg { margin-top: 0; }
.bl-liste__zeile:has(.bl-raster) > .bl-btn--weg { margin-top: 22px; }
.bl-foto { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bl-foto__bild { width: 70px; height: 90px; object-fit: cover; border: 1px solid var(--bl-linie); }
.bl-foto__bild[hidden] { display: none; }
.bl-schnupper { display: flex; flex-direction: column; gap: 6px; }
.bl-schnupper__zeile { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 8px; border: 1px solid var(--bl-linie); border-radius: 8px; }
.bl-schnupper__zeile--aus .bl-schnupper__text { color: var(--bl-matt); text-decoration: line-through; }
.bl-schnupper__schalter { font-size: .84rem; color: var(--bl-matt); white-space: nowrap; }
.bl-schnupper__schalter input { width: 20px; height: 20px; vertical-align: middle; }
.bl-seiteninfo { margin: 0 0 6px; font-size: .88rem; color: var(--bl-matt); }
.bl-seiten { display: flex; flex-direction: column; gap: 12px; }
.bl-blatt { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.bl-seite { display: block; width: 100%; height: auto; }
.bl-mini { display: flex; flex-direction: column; gap: 3px; padding: 6px; background: #fff; border: 2px solid var(--bl-linie); border-radius: 10px; color: var(--bl-text); font: inherit; text-align: left; cursor: pointer; }
.bl-mini--aktiv { border-color: #1f4e79; box-shadow: 0 0 0 2px #1f4e79; }
.bl-mini__blatt { display: block; border: 1px solid var(--bl-linie); }
.bl-mini__name { font-weight: 700; font-size: .92rem; }
.bl-mini__text { font-size: .76rem; color: var(--bl-matt); }
.bl-frage { max-width: min(520px, calc(100vw - 32px)); padding: 18px; border: 0; border-radius: 12px; color: #1c2530; font-size: 16px; }
.bl-frage p { margin: 0 0 12px; }
.bl-frage__knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.bl-sichern__knoepfe { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bl-sichern__neu { color: #1d6b3a; }
/* Beat: «unterhalb des Namens». Die Knopfleiste der Karte bekommt dafür eine eigene Zeile. */
.bo-kopf-knoepfe:has(.bl-kopfknopf) { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin-left: 0; }
.bl-kopfknopf { display: inline-flex; gap: 4px; align-items: center; }
.bl-auge { min-width: 36px; min-height: 32px; border-radius: 6px; border: 1px solid #b9c2cc; background: #fff; cursor: pointer; }
.bl-auge--offen { background: #e6f4ea; border-color: #1d6b3a; }
.bl-auge--zu { background: #fbe9e7; border-color: #b3261e; }
@media (max-width: 999px) {
  .bl-tabs { display: flex; }
  .bl-haupt { padding: 8px; }
  .bl-eingabeflaeche, .bl-rechts { flex: 1 1 100%; }
  .bl-dialog[data-tab="eingabe"] .bl-rechts { display: none; }
  .bl-dialog:not([data-tab="eingabe"]) .bl-eingabeflaeche { display: none; }
}
@media (max-width: 520px) {
  .bl-raster { grid-template-columns: minmax(0, 1fr); }
  .bl-kopf { padding: 8px; }
  .bl-kopf__knoepfe .bl-btn { padding: 6px 8px; font-size: .85rem; }
  .bl-haupt { padding: 6px; }
}
/* Rückfallweg ohne PDF-Bibliothek: dieselben Seiten über den Druck des Browsers. */
.bl-druckhuelle { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.bl-druckt > *:not(.bl-druckhuelle) { display: none !important; }
  body.bl-druckt { margin: 0 !important; background: #fff !important; }
  body.bl-druckt > .bl-druckhuelle { display: block !important; }
  .bl-druckblatt { width: 210mm; height: 296.9mm; overflow: hidden; break-after: page; }
  .bl-druckblatt:last-child { break-after: auto; }
  .bl-druckblatt svg { display: block; width: 210mm; height: 297mm; }
}