/* ================================================================
   ENEVO Version 3 · Leitfaden Lohnverbuchung
   Struktur und Klassennamen aus Version 1, Tokens auf das Aker-System
   gelegt: Papierweiss, Char als dunkle Flaeche, Ember als einziger
   warmer Akzent, Montserrat statt Arial.
   ================================================================ */
/* Leitfaden Lohnverbuchung.
   Das Dokument bringt eigene, sehr kurze Klassennamen mit (.f, .n, .t)
   und ungeschuetzte Elementselektoren wie body, h1 oder p. Alle Regeln
   liegen deshalb unter der Wurzelklasse .lv, damit nichts in die
   uebrige Website blutet. */
.lv {
  --espresso: var(--color-char);
  --espresso-soft: var(--color-iron);
  --cream: var(--color-mist);
  --terra: var(--color-ember);
  --taupe: var(--color-pewter);
  --ink: var(--color-ink);
  --line: var(--color-mist);
  --enevo-container: var(--page-max-width);
  --enevo-gutter: var(--rand);
  --enevo-space-2xl: var(--spacing-48);
  --enevo-space-lg: var(--spacing-32);
  --enevo-space-xs: var(--spacing-16);
  --enevo-space-2xs: var(--spacing-8);
  --enevo-measure: 600px;
  --enevo-terra-text: #8f4520;
  --dia-terra-45: #d9a184;
  --enevo-field-line: var(--color-smoke);
}
.lv * { box-sizing:border-box }
.lv { -webkit-text-size-adjust:100% }
.lv { margin:0; background:var(--color-paper); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.6; }
/* Die Vorlage war ein eigenstaendiges Dokument mit eigener Spaltenbreite
   von 1000px. In der Website steht darueber der Container mit 1240px; der
   Inhalt sass dadurch 144px weiter rechts als Kopf und Fusszeile und wirkte
   eingequetscht. Die Breite folgt jetzt dem Container der Website. */
.lv .wrap { width:100%; max-width:var(--enevo-container); margin-inline:auto; padding-inline:var(--enevo-gutter); padding-bottom:96px }
.lv > .wrap:first-child { padding-top:var(--enevo-space-2xl) }

/* ---------- Kopf ---------- */
.lv .masthead { background:var(--espresso);color:var(--cream);padding:48px 0 40px;margin-bottom:48px }
.lv .masthead .wrap { padding-bottom:0 }
.lv .lockup { font-size:14px;font-weight:bold;letter-spacing:.46em;color:#fff }
.lv .lockup span { display:block;font-size:10px;font-weight:normal;letter-spacing:.42em;color:var(--terra);margin-top:5px }
.lv .rule { width:72px;height:4px;background:var(--terra);margin:32px 0 24px }
.lv h1 { font-size:40px;line-height:1.1;letter-spacing:-.015em;margin:0 0 16px;color:#fff;font-weight:bold }
.lv .lede { font-size:18px;line-height:1.5;color:#CFC6B6;max-width:680px;margin:0 }
.lv .meta { font-size:13px;color:var(--taupe);margin-top:32px;border-top:1px solid #3B342B;padding-top:12px }
.lv .masthead .meta { color:#9A8F7E }

/* ---------- Typo ---------- */
.lv h2 { font-size:30px;line-height:1.15;letter-spacing:-.015em;color:var(--espresso);margin:0 0 14px;font-weight:bold }
.lv h3 { font-size:21px;line-height:1.25;color:var(--espresso);margin:32px 0 10px;font-weight:bold }
.lv h4 { font-size:16px;color:var(--espresso);margin:24px 0 8px;font-weight:bold }
.lv p { margin:0 0 14px;max-width:720px }
.lv .sektionsmarke { font-size:11px;font-weight:bold;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:0 0 26px }
/* Die Vorlage hatte 952px Inhaltsbreite. Der Container der Website ist
   breiter; ohne Begrenzung liefen Kaesten, Masken und Tabellen auf 1160px,
   waehrend der Fliesstext bei 720px blieb. Das wirkte auseinandergezogen.
   Die Bloecke behalten deshalb ihre urspruengliche Breite, sitzen aber
   linksbuendig zum Rest der Website. */
.lv section, .lv .switcher-inner { max-width:952px }
/* Sektionen halten 80px Abstand. Bei eingeklappten Baendern von rund 70px
   Hoehe steht dazwischen mehr Leere als Inhalt; dort genuegt weniger. */
.lv section:has(> .lv-klapp) { margin-bottom: 20px }
.lv section { margin-bottom:80px }
.lv .rule-s { width:64px;height:4px;background:var(--terra);margin:0 0 12px }
.lv ul { max-width:720px;padding-left:20px;margin:0 0 16px }
.lv li { margin-bottom:6px }
.lv strong { color:var(--espresso) }
.lv .nowrap { white-space:nowrap }

/* ---------- Kennzahlen ---------- */
.lv .kpis { display:flex;flex-wrap:wrap;gap:28px;margin:24px 0 8px }
.lv .kpi { flex:1 1 200px;border-top:4px solid var(--terra);padding-top:12px }
.lv .kpi .lab { font-size:11px;font-weight:bold;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe) }
.lv .kpi .num { font-size:34px;font-weight:bold;color:var(--espresso);line-height:1.1;margin:6px 0 4px;white-space:nowrap }
.lv .kpi .cap { font-size:13px;color:var(--taupe) }

/* ---------- Kästen ---------- */
.lv .box-dark { background:var(--espresso);color:var(--cream);padding:28px 32px;margin:28px 0 }
.lv .box-dark h4 { color:var(--terra);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px }
.lv .box-dark p { color:#DFD7C7;max-width:none }
.lv .box-dark p:last-child { margin-bottom:0 }
.lv .box-light { background:var(--cream);padding:24px 28px;margin:24px 0;border-top:1px solid var(--color-mist) }
.lv .box-light h4 { color:var(--terra);margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase }
.lv .box-light p:last-child, .lv .box-light ul:last-child { margin-bottom:0 }

/* ---------- Schrittfolge ---------- */
.lv .step { display:flex;gap:20px;margin-bottom:14px;align-items:flex-start;max-width:760px }
.lv .step-n { flex:0 0 28px;height:28px;background:var(--espresso);color:var(--cream);font-size:13px;font-weight:bold;display:flex;align-items:center;justify-content:center;margin-top:2px }
.lv .step-b { flex:1 }
.lv .step-b b { color:var(--espresso) }

/* ---------- DATEV-Maskennachbau ---------- */
.lv .screen { border:1px solid var(--line);background:#fff;margin:20px 0 8px;max-width:760px;box-shadow:0 1px 0 var(--line) }
.lv .screen-bar { background:var(--espresso);color:var(--cream);font-size:12px;padding:8px 14px;display:flex;justify-content:space-between;align-items:center }
.lv .screen-bar .prog { font-weight:bold;letter-spacing:.08em }
.lv .screen-bar .ver { color:#9A8F7E;font-size:11px }
.lv .screen-path { background:var(--cream);font-size:12px;color:var(--taupe);padding:7px 14px;border-bottom:1px solid var(--line) }
.lv .tabs { display:flex;border-bottom:1px solid var(--line);background:#FBF9F4;flex-wrap:wrap }
.lv .tab { font-size:12px;padding:8px 14px;color:var(--taupe);border-right:1px solid var(--line) }
.lv .tab.on { background:#fff;color:var(--espresso);font-weight:bold;border-bottom:2px solid var(--terra);margin-bottom:-1px }
.lv .fields { padding:16px 14px }
.lv .f { display:flex;align-items:center;gap:12px;padding:5px 0;font-size:13px }
.lv .f .lab { flex:0 0 230px;color:var(--taupe) }
.lv .f .val { flex:1;border:1px solid var(--line);background:#FCFBF8;padding:5px 9px;color:var(--ink);min-height:29px }
.lv .f .val.sel { background:#fff;border:2px solid var(--terra);font-weight:bold;color:var(--espresso);padding:4px 8px }
.lv .f .val.dim { color:#9A9384;background:#F4F2ED }
.lv .f .mark { flex:0 0 22px;height:22px;background:var(--terra);color:#fff;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center }
.lv .f .mark.empty { background:none }
.lv .f .drop::after { content:"▾";float:right;color:var(--taupe) }
.lv .f .chk { flex:0 0 auto }
.lv .screen-foot { border-top:1px solid var(--line);padding:9px 14px;font-size:11px;color:var(--taupe);background:#FBF9F4 }
.lv .cap { font-size:13px;color:var(--taupe);max-width:760px;margin:0 0 24px }

/* ---------- Callouts zur Maske ---------- */
.lv .callouts { max-width:760px;margin:0 0 24px }
.lv .co { display:flex;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line) }
.lv .co:last-child { border-bottom:none }
.lv .co .n { flex:0 0 22px;height:22px;background:var(--terra);color:#fff;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center }
.lv .co .t { flex:1 }

/* ---------- Tabellen ---------- */
.lv table { border-collapse:collapse;width:100%;max-width:760px;font-size:14px;margin:16px 0 8px }
.lv th { text-align:left;font-size:11px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);padding:0 10px 7px;border-bottom:2px solid var(--espresso) }
.lv td { padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top }
.lv tbody tr:nth-child(even) { background:var(--cream) }
.lv td.num, .lv th.num { text-align:right;white-space:nowrap }

/* ---------- Musterabrechnung ---------- */
.lv .payslip { border:1px solid var(--line);max-width:760px;margin:24px 0 8px;font-size:13px;background:#fff }
.lv .ps-head { background:var(--cream);padding:14px 18px;border-bottom:2px solid var(--espresso);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px }
.lv .ps-head .co-name { font-weight:bold;color:var(--espresso);font-size:14px }
.lv .ps-head .ps-meta { font-size:12px;color:var(--taupe);text-align:right }
.lv .ps-emp { padding:12px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--taupe);display:flex;gap:32px;flex-wrap:wrap }
.lv .ps-emp b { color:var(--espresso);font-weight:bold }
.lv .ps-sec { padding:4px 18px 12px }
.lv .ps-sec h5 { font-size:11px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin:14px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--espresso) }
.lv .ps-row { display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--line) }
.lv .ps-row .la { flex:0 0 56px;color:var(--taupe);font-size:12px }
.lv .ps-row .tx { flex:1 }
.lv .ps-row .amt { flex:0 0 110px;text-align:right;white-space:nowrap }
.lv .ps-row.hl { background:var(--cream);margin:0 -18px;padding-left:18px;padding-right:18px;border-bottom:1px solid var(--line) }
.lv .ps-row.hl .tx { font-weight:bold;color:var(--espresso) }
.lv .ps-row.sum { border-bottom:none;border-top:2px solid var(--espresso);font-weight:bold;color:var(--espresso);margin-top:2px;padding-top:7px }
.lv .ps-row.total { background:var(--espresso);color:var(--cream);margin:14px -18px -12px;padding:12px 18px;border:none;font-weight:bold;font-size:15px }
.lv .ps-row.total .la { color:#9A8F7E }
.lv .ps-note { font-size:11px;color:var(--taupe);padding:10px 18px;background:#FBF9F4;border-top:1px solid var(--line) }

/* ---------- Vergleich ---------- */
.lv .compare { display:flex;gap:24px;flex-wrap:wrap;margin:24px 0 }
.lv .compare > div { flex:1 1 300px;padding:20px 24px;border-top:4px solid var(--line) }
.lv .compare > div.win { border-top-color:var(--terra);background:var(--cream) }
.lv .compare h4 { margin-top:0 }
.lv .compare .big { font-size:28px;font-weight:bold;color:var(--espresso);white-space:nowrap;margin:8px 0 2px }
.lv .compare .sub { font-size:13px;color:var(--taupe) }

/* ---------- Checkliste ---------- */
.lv .check { max-width:760px }
.lv .check-item { display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start }
.lv .check-item .bx { flex:0 0 16px;height:16px;border:2px solid var(--espresso);margin-top:4px }
.lv .check-item .tx { flex:1 }

/* ---------- Vergleichstabelle mit Kopfzeile ---------- */
.lv table.matrix { max-width:none;font-size:14px }
.lv table.matrix th { background:var(--espresso);color:#fff;padding:12px 14px;border-bottom:none;letter-spacing:.1em;vertical-align:top;line-height:1.4 }
.lv table.matrix th.pos { background:var(--espresso);width:170px }
.lv table.matrix th .par { display:block;font-weight:normal;letter-spacing:0;text-transform:none;font-size:12px;color:#C9BFAE;margin-top:4px }
.lv table.matrix td { padding:12px 14px;vertical-align:top;line-height:1.5 }
.lv table.matrix td.pos { color:var(--taupe);font-size:13px;width:170px }
.lv table.matrix tbody tr.sum { background:var(--cream) }
.lv table.matrix tbody tr.sum td { font-weight:bold;color:var(--espresso);border-bottom:2px solid var(--espresso) }
.lv table.matrix .amt-big { font-size:20px;font-weight:bold;color:var(--espresso);white-space:nowrap;display:block }
.lv table.matrix .best { color:var(--terra) }
.lv table.matrix ul { padding-left:16px;margin:0;font-size:13px }
.lv table.matrix li { margin-bottom:3px }

@media (max-width:760px){
  .lv table.matrix, .lv table.matrix tbody, .lv table.matrix tr, .lv table.matrix td, .lv table.matrix th { display:block;width:auto }
  .lv table.matrix thead { display:none }
  .lv table.matrix td.pos { font-weight:bold;color:var(--espresso);background:var(--cream);padding-bottom:4px }
  .lv table.matrix td:before { content:attr(data-w);display:block;font-size:11px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:2px }
  .lv table.matrix td.pos:before { content:none }

}
.lv footer { border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--taupe);max-width:760px }

/* ---------- Umschalter ---------- */
/* Der Umschalter haftet am oberen Rand. Frueher stand hier top:84px,
   weil die Kopfleiste der ersten Fassung mitgescrollt ist. In dieser
   Fassung ist der Kopf statisch und scrollt weg; die 84px blieben dann
   als leerer Streifen ueber dem Umschalter stehen. */
.lv .switcher { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line); margin:0 0 48px; padding:14px 0 }
.lv .switcher-inner { max-width:1000px;margin:0 auto;padding:0 24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap }
.lv .switcher .lab { font-size:11px;font-weight:bold;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-right:8px }
.lv .sw { font-family:inherit;font-size:14px;font-weight:bold;color:var(--espresso);background:#fff;border:1px solid var(--espresso);padding:11px 22px;cursor:pointer;line-height:1.2 }
.lv .sw:hover { background:var(--cream) }
.lv .sw[aria-selected="true"] { background:var(--espresso);color:var(--cream);border-color:var(--espresso) }
.lv .sw:focus-visible { outline:3px solid var(--terra);outline-offset:2px }
.lv .sw .sub { display:block;font-size:11px;font-weight:normal;letter-spacing:.06em;color:var(--taupe);margin-top:3px }
.lv .sw[aria-selected="true"] .sub { color:#9A8F7E }
.lv .pane[hidden] { display:none }

@media print{
  .lv .switcher { position:static;border-bottom:2px solid var(--espresso);page-break-after:avoid }
  .lv .sw { display:none }
  .lv .pane[hidden] { display:block !important }
  .lv .pane { page-break-before:always }
  .lv .pane:first-of-type { page-break-before:auto }

}

@media print{
  .lv { font-size:11pt }
  .lv .masthead { background:none;color:var(--espresso);padding:0 0 24px;border-bottom:2px solid var(--espresso) }
  .lv h1, .lv .lockup { color:var(--espresso) }
  .lv .lede { color:var(--taupe) }
  .lv .masthead .meta { color:var(--taupe);border-top-color:var(--line) }
  .lv section { page-break-inside:avoid;margin-bottom:36px }
  .lv .screen, .lv .payslip, .lv .box-dark { page-break-inside:avoid }
  .lv .wrap { padding:0 }

}

@media (max-width:620px){
  .lv h1 { font-size:30px }
  .lv h2 { font-size:24px }
  .lv .f { flex-wrap:wrap }
  .lv .f .lab { flex:0 0 100% }
  .lv .ps-row .la { flex:0 0 42px }

}

/* Ersatz fuer die style-Attribute der Vorlage. Die CSP der Website erlaubt
   style-src 'self'; Inline-Styles greifen in der Produktion nicht. */
.lv .lv-hell { color:#fff }
.lv .lv-normal { font-weight:normal; color:var(--taupe) }
.lv .lv-klein { font-size:12px; color:var(--taupe) }
.lv .lv-klein13 { font-size:13px; color:var(--taupe) }

/* Breite Inhalte scrollen in ihrem eigenen Bereich; die Seite selbst darf
   nie waagerecht scrollen. Die Vorlage war ein eigenstaendiges Dokument
   ohne diese Regel. */
.lv .lv-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.lv .lv-scroll table { margin-bottom: 0 }
.lv .screen, .lv .payslip, .lv .matrix, .lv .compare { max-width: 100%; overflow-x: auto }

/* --- Ausklappbare Abschnitte --------------------------------------------
   Native details/summary: funktioniert ohne Skript, ist mit der Tastatur
   bedienbar und meldet den Zustand selbst an Screenreader. */
.lv .lv-klapp { border-top: 1px solid var(--line); margin-bottom: 0 }
.lv section > .lv-klapp:not(.lv-klapp--kasten) { border-top: 2px solid var(--espresso) }
.lv .lv-klapp > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 40px 20px 0; position: relative;
}
/* Die Faelle sind die eigentlichen Einstiege der Seite. Eine sanfte
   Cremeflaeche macht sie als anklickbare Baender kenntlich, ohne dass sie
   mit den Hinweiskaesten konkurrieren. */
.lv section > .lv-klapp:not(.lv-klapp--kasten) > summary {
  background: var(--cream);
  padding-left: 24px; padding-right: 52px;
  transition: background .18s ease;
}
.lv section > .lv-klapp:not(.lv-klapp--kasten) > summary::after,
.lv section > .lv-klapp:not(.lv-klapp--kasten) > summary::before { right: 22px }
.lv section > .lv-klapp:not(.lv-klapp--kasten) > summary::before { right: 28.5px }
.lv section > .lv-klapp:not(.lv-klapp--kasten) > summary:hover { background: #EFE9DC }
.lv section > .lv-klapp:not(.lv-klapp--kasten) .lv-klapp-inhalt { padding-left: 24px }
@media (prefers-reduced-motion: reduce) {
  .lv section > .lv-klapp:not(.lv-klapp--kasten) > summary { transition: none }
}
.lv .lv-klapp > summary::-webkit-details-marker { display: none }
.lv .lv-klapp > summary:hover { color: var(--terra) }
.lv .lv-klapp > summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px }

/* Zeichen rechts: Strich, im offenen Zustand zusaetzlich der senkrechte. */
.lv .lv-klapp > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 15px; height: 2px; background: var(--terra);
}
.lv .lv-klapp > summary::before {
  content: ""; position: absolute; right: 10.5px; top: 50%;
  width: 2px; height: 15px; margin-top: -7.5px; background: var(--terra);
  transition: opacity .2s ease;
}
.lv .lv-klapp[open] > summary::before { opacity: 0 }
@media (prefers-reduced-motion: reduce) { .lv .lv-klapp > summary::before { transition: none } }

.lv .lv-klapp-marke {
  /* Nicht 0 0 auto: Marken wie "Fall A · Sachbezug § 8 Abs. 2 EStG" waeren
     dann unschrumpfbar und ragten auf schmalen Geraeten aus dem Bild. */
  flex: 0 1 auto; min-width: 0; font-size: 11px; font-weight: bold; letter-spacing: .2em;
  text-transform: uppercase; color: var(--taupe);
}
.lv .lv-klapp-h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.015em; color: var(--espresso); font-weight: bold; min-width: 0; overflow-wrap: break-word }
.lv .lv-klapp-titel { font-size: 11px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; color: var(--terra) }
.lv .lv-klapp-inhalt { padding-bottom: 32px }

/* Die drei Hinweiskaesten oben behalten ihre Cream-Flaeche. */
.lv .lv-klapp--kasten { background: var(--cream); border-top: 0; border-top: 1px solid var(--color-mist); margin: 24px 0 }
.lv .lv-klapp--kasten > summary { padding: 18px 40px 18px 24px }
.lv .lv-klapp--kasten .lv-klapp-inhalt { padding: 0 24px 20px }
.lv .lv-klapp--kasten .lv-klapp-inhalt > p:last-child,
.lv .lv-klapp--kasten .lv-klapp-inhalt > ul:last-child { margin-bottom: 0 }

@media (max-width: 620px) {
  .lv .lv-klapp > summary { flex-wrap: wrap; gap: 6px }
  .lv .lv-klapp-h2 { font-size: 24px }
}

/* --- Rhythmus und Bewegung ----------------------------------------------
   Der Leitfaden war eine durchgehend weisse Flaeche ohne Taktung. Die
   Zusammenfassungen bekommen eine eigene Flaeche, der Abschluss traegt
   Espresso. Das Einblenden nutzt die .reveal-Regel der Website und
   respektiert damit auch die Systemeinstellung fuer weniger Bewegung. */

/* Checklisten: Zusammenfassung am Ende eines Bausteins. */
.lv .lv-sek--flaeche {
  background: var(--cream); max-width: none;
  margin-inline: calc(var(--enevo-gutter) * -1);
  padding: 48px var(--enevo-gutter) 40px;
}
/* Linksbuendig wie der uebrige Inhalt; zentriert saesse er 104px weiter
   rechts und der Textrand wuerde springen. */
.lv .lv-sek--flaeche > * { max-width: 952px; margin-inline: 0 }

/* Zwei Spalten ab 900px: die Listen sind lang, die Seite war schmal
   gesetzt und die rechte Haelfte blieb leer. */
@media (min-width: 900px) {
  .lv .check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px }
}

/* --- Abschluss ----------------------------------------------------------- */
.lv .lv-abschluss {
  background: var(--espresso); color: var(--cream); max-width: none;
  margin-inline: calc(var(--enevo-gutter) * -1);
  padding: 64px var(--enevo-gutter);
  margin-bottom: 64px;
}
.lv .lv-abschluss-inhalt { max-width: 952px; margin-inline: 0 }
.lv .lv-abschluss h2 { color: var(--cream); margin-bottom: 16px }
.lv .lv-abschluss p { color: #CFC6B6; max-width: 640px }
.lv .lv-abschluss .sektionsmarke { color: var(--terra); margin-bottom: 14px }
.lv .lv-abschluss-wege { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px }
.lv .lv-knopf {
  display: inline-block; padding: 14px 26px;
  background: var(--cream); color: var(--espresso);
  font-weight: bold; text-decoration: none; border: 1px solid var(--cream);
  transition: background .18s ease, color .18s ease;
}
.lv .lv-knopf--rand { background: transparent; color: var(--cream) }
.lv .lv-knopf:hover { background: var(--terra); border-color: var(--terra); color: #fff }
@media (prefers-reduced-motion: reduce) { .lv .lv-knopf { transition: none } }

/* Der eigene Fussbereich der Vorlage steht unter dem Abschluss. */
.lv > .wrap > footer { max-width: 952px }

/* Die Marke steht rechts neben dem Abschlusstext und fuellt die Haelfte, die
   sonst leer bliebe. Sie ist reine Dekoration, unter 900px faellt sie weg,
   dort steht der Text ohnehin schon dicht am Rand. */
.lv .lv-abschluss-marke { display: none }
@media (min-width: 900px) {
  .lv .lv-abschluss {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--enevo-space-lg);
  }
  .lv .lv-abschluss-inhalt { flex: 1 1 auto }
  .lv .lv-abschluss-marke { display: block; flex: 0 0 auto; order: 2; margin-right: 56px }
  .lv .lv-abschluss-marke svg { display: block; width: 104px; height: auto; color: var(--cream) }
}

/* --- Motivbild ------------------------------------------------------------
   Steht zwischen Vorwort und Leitfaden und trennt beide. Es liegt ausserhalb
   der .wrap und laeuft deshalb randlos ueber die volle Fensterbreite, wie
   die Motivbaender der Initiativen. Das Verhaeltnis ist das der Vorlage,
   damit weder die Personen noch die Wortmarke oben rechts angeschnitten
   werden. */
.lv .lv-bild {
  max-width: none;
  margin: 0 0 var(--enevo-space-2xl);
  background: var(--espresso);
}
.lv .lv-bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1745 / 901; object-fit: cover;
}


/* --- Wo Version 3 anders arbeitet ---------------------------------- */

/* Ueberschriften im Gewicht 300, wie ueberall im System. */
.lv h1, .lv h2, .lv h3, .lv h4, .lv .lv-klapp-h2 { font-weight: 300; }
.lv h2 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.lv h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
.lv h4 { font-size: var(--text-subheading); }
.lv .lv-klapp-h2 { font-size: var(--text-heading); letter-spacing: var(--tracking-heading); }

/* Die Kicker der ersten Fassung heissen hier Overline und sind Teil des
   Stilbuchs: 12px, Pewter, linksbuendig ueber der Ueberschrift. */
.lv .sektionsmarke {
  font-size: var(--spacing-12); letter-spacing: 0.12px; text-transform: none;
  color: var(--color-pewter); font-weight: 400;
}

/* Radien und Kanten nach Stilbuch: 8px an Flaechen, Haarlinien sonst. */
.lv .box-light, .lv .box-dark, .lv .lv-klapp--kasten, .lv .kpi, .lv .screen { border-radius: var(--radius-cards); }
.lv .rule-s { width: 40px; height: 1px; background: var(--color-ember); margin: 20px 0 24px; }
.lv .lv-sek--flaeche { background: var(--color-mist); }
.lv .lv-abschluss { background: var(--color-midnight); border-radius: 0; }
.lv .lv-knopf { border-radius: var(--radius-buttons); padding: var(--spacing-19) var(--spacing-16); font-weight: 500; font-size: var(--spacing-13); }

/* Tabellen mit Tabellenziffern, damit Spalten stehen. */
.lv table, .lv .num, .lv .amt, .lv .val, .lv .sum, .lv .total { font-variant-numeric: tabular-nums; }

.lv .switcher { background: var(--color-paper); border-bottom: 1px solid var(--color-mist); }
.lv .tab.on, .lv .tabs a.on { border-color: var(--color-ember); }

/* Die Klapp-Etiketten und die gedaempften Betraege lagen bei 3,7:1
   beziehungsweise 2,73:1. Beide bekommen die tragfaehigen Fassungen. */
.lv .lv-klapp-titel { color: #8f4520; }
.lv .val.dim, .lv .dim { color: var(--color-pewter); }

/* Gedaempfte Betraege in den Musterabrechnungen: 2,73:1 in der
   uebernommenen Fassung. */
.lv .val.val.dim, .lv .dim.dim { color: var(--color-pewter); }

/* Ember als Ueberschrift in den Hinweiskaesten: auf hellem Grund die
   dunkle Fassung (6,4:1), auf dunklem die aufgehellte (6,3:1). */
.lv .box-light h4, .lv .box-light .lab, .lv .box-light b,
.lv .callouts h4, .lv .best h4 { color: #8f4520; }
.lv .box-dark h4, .lv .box-dark .lab, .lv .box-dark .lv-klapp-titel,
.lv .lv-abschluss .sektionsmarke { color: #d98a5a; }

/* --- Kontrast in den Maskennachbauten --------------------------------
   Weisse Ziffern auf reinem Ember erreichen 3,2:1; die dunklere Fassung
   desselben Farbtons kommt auf 6,4:1. */
.lv .f .mark, .lv .co .n { background: #8f4520; }
.lv .screen-bar .ver { color: #D6D4CE; }

/* Das eingetragene Zeichen: der Leitfaden laedt die Bausteine von
   Version 1 nicht mit und braucht die Regel deshalb selbst. */
.lv .reg { font-size: .62em; vertical-align: .42em; line-height: 0; }