/* ============================================================
   Büro-Funktionen (/buero) – Version 621
   Location: <theme>/assets/buero.css
   Images:   <theme>/assets/buero/titel-graphit.jpg, titel-papier.jpg
   ============================================================ */

/* ============================================================ Buero-Seite */
.bu-h2,.bu-kopf h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:var(--titel);line-height:1.08;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.bu-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:56px}
.bu-lead{font-size:17px;line-height:1.65;color:var(--text)}

/* ---------------------------------------------------------------- Hero */
.bu-hero .hero-grid{grid-template-columns:640px 1fr}
.bu-buehne{position:relative;min-height:600px;align-self:center;margin-right:var(--gutter)}
.bu-blatt{container-type:inline-size;position:relative}
.bu-buehne .bu-blatt{position:absolute;opacity:0;animation:bu-auf .6s cubic-bezier(.16,.84,.24,1) forwards}
@keyframes bu-auf{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.bu-b1{width:44%;left:0;top:120px;rotate:-5deg;animation-delay:.15s!important}
.bu-b2{width:50%;left:20%;top:56px;rotate:-1.5deg;animation-delay:.3s!important}
.bu-b3{width:56%;right:0;top:0;rotate:2.5deg;animation-delay:.45s!important}
.bu-buehne .bu-a4{box-shadow:var(--schein-fenster)}
@media (prefers-reduced-motion:reduce){.bu-buehne .bu-blatt{animation:none;opacity:1}}

/* ------------------------------------------------- A4-Seite, in em gerechnet */
.bu-a4{position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;font-size:calc(100cqw / 59.5);
  font-family:var(--sans);line-height:1.35;font-variant-numeric:tabular-nums lining-nums;
  --lgf:1;--ink:#1e2023;--ink-3:#42484e;--mut:#6d7780;--hair:#ece9e0;--leer:#d6d7d3}
.bu-titel{background:var(--ink) url(buero/titel-graphit.jpg) center/cover;color:#fff;
  --hk:color-mix(in srgb,#fff 22%,transparent);--ne:color-mix(in srgb,#fff 64%,transparent)}
.bu-titel.papier{background-image:url(buero/titel-papier.jpg);background-color:#f6f5ef;color:var(--ink);
  --hk:color-mix(in srgb,var(--ink) 16%,transparent);--ne:var(--ink-3)}
.bu-titel.papier::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,#f6f5ef 92%,transparent) 0%,color-mix(in srgb,#f6f5ef 0%,transparent) 38%,
    color-mix(in srgb,#f6f5ef 0%,transparent) 72%,color-mix(in srgb,#f6f5ef 94%,transparent) 92%)}
.bu-titel > *{position:absolute;z-index:1}
.t-kopf{top:4.5em;left:4.5em;right:4.5em;display:flex;justify-content:space-between;gap:3em;
  padding-bottom:1.8em;border-bottom:1px solid var(--hk)}
.t-links{display:flex;flex-direction:column;justify-content:space-between;gap:1.4em}
.t-logo svg{display:block;height:calc(3.4em * var(--lgf));width:auto;max-width:21em}
.t-l-hell{display:none}
.papier .t-l-hell{display:block}.papier .t-l-dunkel{display:none}
.t-typ{font-size:.95em;font-weight:500}
.t-abs{display:flex;flex-direction:column;line-height:1.45;color:var(--ne);min-width:0;max-width:17em}
.t-abs span{font-size:.8em}
.t-abs b{font-size:1em;font-weight:600;color:currentColor;margin-bottom:.15em;color:inherit}
.bu-titel .t-abs b{color:#fff}.bu-titel.papier .t-abs b{color:var(--ink)}
.karte .t-kopf{justify-content:flex-end}
.karte .t-logo,.karte .t-abs{display:none}
.t-titel{top:25em;left:4.5em;right:4.5em}
.t-h{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:3.6em;line-height:1.02;letter-spacing:-.005em}
.t-str{color:var(--str);transition:color .3s}
.t-ort{margin-top:.7em;font-size:1.15em;color:var(--ne)}
.t-fakten{top:39em;left:4.5em;right:4.5em;display:flex;gap:2.6em;padding:.9em 0;
  border-top:1px solid var(--hk);border-bottom:1px solid var(--hk);color:var(--ne)}
.t-fakten span{font-size:.8em}
.t-fakten b{font-family:var(--cond);font-size:1.7em;font-weight:700;margin-right:.35em;color:var(--str-z,currentColor)}
.bu-titel .t-fakten b{color:#fff}.bu-titel.papier .t-fakten b{color:var(--ink)}
.t-nadel{left:56%;top:61%;width:2em;height:2em;border-radius:50%;border:.55em solid var(--akz);
  box-shadow:0 0 0 .5em color-mix(in srgb,var(--akz) 22%,transparent);transition:border-color .3s}
.t-daten{left:4.5em;right:4.5em;bottom:4.5em;display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr;gap:2em;
  padding-top:1.1em;border-top:1px solid var(--hk)}
.t-daten span{font-size:.85em;font-weight:600}
.t-daten i{display:block;font-style:normal;font-weight:400;font-size:.85em;color:var(--ne);margin-bottom:.2em}
.t-daten em{font-style:normal;color:#e08a2e}
.t-vk{display:none;left:4.5em;bottom:13em;width:24.1em;min-height:15.6em;background:#fff;color:var(--ink);
  border-radius:.6em;padding:1.6em 1.8em;box-shadow:0 1.2em 3em -1em rgba(0,0,0,.45);font-size:1em}
.papier .t-vk{box-shadow:0 .8em 2.4em -1em rgba(0,0,0,.28)}
.karte .t-vk{display:block}
.karte .t-nadel{top:58%}
.t-vk > .bu-logo{display:block;height:calc(2.7em * var(--lgf));width:auto;max-width:17em}
.t-vk-in{margin-top:1.1em;padding-top:1em;border-top:1px solid var(--hair)}
.t-vk-von{display:block;font-size:.66em;color:var(--mut)}
.t-vk b{display:block;font-size:1.05em;font-weight:600;margin-top:.2em}
.t-vk-wer{display:block;font-size:.78em;color:var(--ink-3)}
.t-vk-sp{display:grid;grid-template-columns:1fr 1.2fr;gap:1em;margin-top:.8em;font-size:.72em;line-height:1.45;color:var(--ink-3)}
.ohne .bu-angaben{display:none!important}
.ohne.karte .t-kopf{justify-content:space-between}
.ohne.karte .t-logo.t-l-dunkel{display:block}
.ohne.karte.papier .t-logo.t-l-dunkel{display:none}.ohne.karte.papier .t-logo.t-l-hell{display:block}

/* Folgeseite: Papier, Kopfzeile, Kapitel, Fusszeile mit Buero-Logo */
.bu-folge{background:#fff;color:var(--ink);padding:4.5em 4.5em 0}
.p-kopfzeile{position:absolute;top:2.9em;right:6em;font-size:.75em;color:var(--mut)}
.p-kap{display:flex;align-items:baseline;gap:.6em;padding-bottom:.6em;border-bottom:2px solid var(--ink)}
.p-nr,.p-kt{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:2.4em;line-height:1}
.p-kap em{margin-left:auto;font-style:normal;font-size:.8em;font-weight:600;color:#c0392b}
.p-kap em.p-datum{color:var(--mut);font-weight:500}
.p-blk{margin-top:2em}
.p-bk{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--ink);padding-bottom:.4em}
.p-bk h3{font-family:var(--cond);font-weight:700;font-size:1.25em}
.p-meta{font-size:.82em;color:var(--mut)}.p-meta b{color:var(--ink)}
.p-checks{display:grid;grid-template-columns:1fr 1fr;gap:.55em 2.4em;margin-top:.9em}
.p-fazit{margin-top:.8em;font-size:.8em;line-height:1.45;color:var(--mut)}
.p-ck{display:flex;gap:.6em;align-items:center;font-size:.88em;color:var(--ink)}
.p-ck svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.p-ck.ok svg{stroke:#1d6b4f}.p-ck.dev svg{stroke:#c0392b}.p-ck.na{color:var(--mut)}.p-ck.na svg{stroke:var(--mut)}
.bu-sk{display:inline-flex;gap:.34em;vertical-align:middle}
.bu-sk i{width:.57em;height:.57em;background:var(--leer);display:block;transition:background .25s}
.bu-sk[data-s="1"] i:nth-child(1),.bu-sk[data-s="2"] i:nth-child(-n+2){background:var(--ink)}
.bu-sk[data-s="3"] i{background:#c0392b}
.bu-sk[data-s="0"]{outline:1px dashed var(--leer);outline-offset:.2em}
.bu-sk[data-s="0"] i{background:none}
.bu-bf{position:relative;display:grid;grid-template-columns:2.55em 1fr;column-gap:.57em;padding:.75em 0;border-bottom:1px solid var(--hair);
  align-items:start}
.bu-liste .bu-bf:last-child{border-bottom:0}
.bu-bf > .bu-sk{margin-top:.36em}
.bu-bf h4{font-size:.98em;font-weight:600;line-height:1.3}
.bu-bf p{margin-top:.25em;font-size:.86em;line-height:1.45;color:var(--ink-3)}
.bu-src{margin-top:.3em;font-size:.74em;color:var(--mut)}
.bu-auge{display:none}
.p-of{display:grid;grid-template-columns:6em 1fr;gap:1em;padding:.6em 0;border-bottom:1px solid var(--hair);font-size:.84em}
.p-of:last-child{border-bottom:0}
.p-of-st{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86em;color:#b45309}
.p-of b{display:block;font-weight:600}
.p-of div span{color:var(--ink-3)}
.p-fuss{position:absolute;left:4.5em;right:4.5em;bottom:2em;display:flex;align-items:center;justify-content:space-between;
  gap:2em;color:var(--mut)}
.p-fuss > span:not(.p-fuss-logo){font-size:.72em}
.p-fuss-logo svg{display:block;height:calc(2.4em * var(--lgf));width:auto}
.p-text{margin-top:.8em;font-size:.9em;line-height:1.5;color:var(--ink-3);min-height:2.8em}
.p-hinweis{margin-top:.8em;padding:.6em .8em;border:1px dashed var(--leer);font-size:.78em;color:var(--mut)}
.p-fotos{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;margin-top:1em}
.p-foto span{display:block;aspect-ratio:4/3;background:#cfc8ba}
.p-foto.f1 span{background:radial-gradient(28% 34% at 46% 64%,rgba(92,78,54,.5),rgba(92,78,54,0) 70%),
  linear-gradient(180deg,#5d5a54 0 18%,#d8d1c3 18% 100%)}
.p-foto.f2 span{background:linear-gradient(90deg,transparent 47%,#f4f1ea 47% 53%,transparent 53%),
  linear-gradient(180deg,transparent 46%,#f4f1ea 46% 52%,transparent 52%),
  linear-gradient(160deg,#cdd0c9,#b7b2a6);box-shadow:inset 0 0 0 1.4em #ece7dd}
.p-foto figcaption{margin-top:.4em;font-size:.74em;color:var(--mut)}
.bu-ort .p-foto{opacity:0;transform:translateY(.6em);transition:opacity .4s,transform .4s}
.bu-ort .p-foto.da{opacity:1;transform:none}

/* ------------------------------------------------- Konfigurator (getoent)
   Nachbau von app/10-buero.html in dessen Massen: 1 em = 10 Pixel der App bei
   1440 Breite. Das Formular laeuft mit der Seite, die Vorschau klebt daneben,
   unten klebt die Speichern-Leiste wie in der App. Kein Scrollen im Fenster
   (David, 18.10.2026: „das gescrolle im window nervt“). */
.bu-konfig{background:var(--wash);padding:var(--luft) 0}
.k-fenster{container-type:inline-size;border-radius:var(--radius);overflow:clip;box-shadow:var(--schein-3);
  border:1px solid color-mix(in srgb,var(--grund) 10%,transparent)}
.k-app{font-size:calc(100cqw / 144);display:grid;grid-template-columns:25.6em minmax(0,1fr);
  --ap:#f6f5ef;--ak:#fff;--ah:#e8e6df;--ah2:#dcd9d0;--ai:#1e2023;--ai2:#3a3d40;--am:#6d7780;--al:var(--glanz-2);
  background:var(--ap);color:var(--ai);line-height:1.5;text-align:left}
.k-side{display:flex;flex-direction:column;background:#1a1c1e;color:var(--dunst);padding:2.6em 0 1.8em}
.k-marke{display:block;align-self:flex-start;height:3.4em;width:auto;max-width:none;margin:0 2.4em 3.4em}
.k-side-lbl{font-size:1.05em;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--nebel-2);
  padding:1em 2.3em .8em}
.k-nav{display:flex;align-items:center;gap:1.1em;padding:.8em 2.4em;font-size:1.4em;color:var(--nebel);
  border-left:2px solid transparent}
.k-nav svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-nav.an{color:var(--yellow);border-left-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 8%,transparent)}
.k-side-fuss{margin:auto 1.2em 0;padding-top:1.4em;border-top:1px solid var(--grund-3)}
.k-konto{display:flex;align-items:center;gap:1em;padding:1em 1.2em;border-radius:1em;background:var(--grund-2);border:1px solid var(--grund-3)}
.k-konto .kreis{width:3.2em;height:3.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--yellow);color:var(--ai);font-weight:700;font-size:1.2em;flex:none}
.k-konto .nm{display:block;font-size:1.3em;font-weight:600;color:var(--paper)}
.k-konto .ad{display:block;font-size:1.15em;color:var(--nebel)}
.k-haupt{min-width:0;padding:3.4em 4em 0}
.k-titel{font-family:var(--disp);font-size:3em;font-weight:600;line-height:1.08;margin-bottom:.2em;color:var(--ai)}
.k-unter{font-size:1.45em;color:var(--am);margin-bottom:1.8em}
.k-zwei{display:grid;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.4em}
.k-form{min-width:0}
.k-ab + .k-ab{margin-top:3em}
.k-gt{font-size:1.1em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ai);
  padding-bottom:.9em;margin-bottom:1.6em;border-bottom:1px solid var(--ai)}
.k-probe{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ah);border-radius:1.2em;overflow:hidden;margin-bottom:1.4em}
.k-probe > div{position:relative;height:9.6em;display:flex;align-items:center;justify-content:center;padding:1.4em 1.8em 2.2em}
.k-probe .g{background:#17191b}.k-probe .p{background:var(--ap)}
.k-probe .bu-logo{height:3.6em;width:auto;max-width:88%}
.k-probe .lb{position:absolute;left:1em;bottom:.6em;font-size:1.05em;color:var(--al)}
.k-probe .g .lb{color:var(--am)}
.k-plaetze{border-top:1px solid var(--ah)}
.k-platz{display:grid;grid-template-columns:8.8em 1fr auto;gap:1.4em;align-items:center;padding:1.1em 0;border-bottom:1px solid var(--ah)}
.k-kachel{height:4.4em;border-radius:.8em;display:flex;align-items:center;justify-content:center;padding:.6em .8em;
  border:1px solid var(--ah);background:#fff}
.k-kachel.dg{background:#17191b;border-color:#17191b}
.k-kachel .bu-logo{max-height:100%;max-width:100%;height:auto}
.k-platz b{display:block;font-size:1.4em;font-weight:600}
.k-platz .st{display:block;font-size:1.25em;color:var(--am)}
.k-platz .tat{display:flex;gap:1.1em;font-size:1.3em}
.k-platz u{text-underline-offset:3px;color:var(--ai)}.k-platz u.leise{color:var(--am)}
.k-merk{display:flex;gap:.8em;align-items:flex-start;margin-top:1.2em;font-size:1.25em;line-height:1.5;color:var(--ai2)}
.k-merk svg{width:1.2em;height:1.2em;flex:none;margin-top:.15em;color:var(--checked)}
.k-groesse{display:flex;align-items:center;justify-content:space-between;gap:1.2em;margin-top:1.6em}
.k-groesse > span{font-size:1.3em;font-weight:600}
.k-seg{display:inline-flex;border:1px solid var(--ah);border-radius:.9em;padding:.3em;background:#fff}
.k-seg button{font:inherit;font-size:1.25em;border:0;background:none;color:var(--am);padding:.4em 1.1em;border-radius:.5em!important;cursor:pointer}
.k-seg button.an{background:var(--ai);color:#fff}
.k-wt{font-size:1.25em;font-weight:600;margin-bottom:.65em}
.k-wahlen + .k-wt{margin-top:1.4em}
.k-wahlen{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.k-wahl{display:grid;grid-template-columns:4em 1fr;column-gap:1.2em;align-items:center;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--ah2);border-radius:1em!important;padding:.9em 1.2em .9em .9em;background:#fff;color:var(--ai);transition:border-color .15s,box-shadow .15s}
.k-wahl.an{border-color:var(--ai);box-shadow:0 0 0 1px var(--ai)}
.k-wahl b{grid-column:2;align-self:end;font-size:1.4em;font-weight:600;line-height:1.3}
.k-wahl > span:last-child{grid-column:2;align-self:start;font-size:1.2em;color:var(--am);line-height:1.35}
.k-mini{grid-row:1 / 3;position:relative;width:4em;height:5.6em;padding:.5em;overflow:hidden;border-radius:3px;
  background:linear-gradient(145deg,#1e2124,#0e0f11)}
.k-mini i{display:block;height:.2em;border-radius:1px;margin-bottom:.3em;background:#fff}
.k-mini i.a{width:70%;margin-top:1.4em;height:.3em}.k-mini i.b{width:52%;height:.3em}.k-mini i.c{width:36%;opacity:.4}
.k-wahl.p .k-mini,[data-grund="papier"] .k-auf .k-mini{background:var(--ap);border:1px solid var(--ah)}
.k-wahl.p .k-mini i,[data-grund="papier"] .k-auf .k-mini i{background:var(--ai)}
.k-mini.auf-r i.lo{position:absolute;left:.5em;top:.5em;width:1.1em;height:.4em;margin:0}
.k-mini.auf-r i.r1,.k-mini.auf-r i.r2{position:absolute;right:.5em;height:.15em;margin:0}
.k-mini.auf-r i.r1{top:.5em;width:1.3em}.k-mini.auf-r i.r2{top:.85em;width:.9em;opacity:.5}
.k-mini.auf-r i.r2 + i.r2{top:1.15em;width:1.1em}
.k-mini.auf-r i.a{margin-top:1.8em}.k-mini.auf-k i.a{margin-top:.8em}
.k-mini.auf-k em{position:absolute;left:.5em;bottom:.5em;width:2.4em;height:1.5em;padding:.3em;background:#fff;border-radius:1.5px;display:block}
.k-mini.auf-k em i{height:.15em;margin:0 0 .15em;background:var(--ai)}
.k-mini.auf-k em i.lo{width:.9em;height:.3em;margin-bottom:.2em;background:var(--point)}
.k-mini.auf-k em i.r1{width:1.5em}.k-mini.auf-k em i.r2{width:1em;opacity:.4}
[data-grund="papier"] .k-auf .auf-k em{border:1px solid var(--ah)}
.k-farben{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
.k-farbe{font:inherit;width:3.6em;height:3.6em;border-radius:50%!important;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0}
.k-farbe.an{box-shadow:0 0 0 2px var(--ap),0 0 0 4px var(--ai)}
.k-farbe-t{width:100%;margin-top:.6em;font-size:1.2em;color:var(--am)}
.k-eigene{display:flex;align-items:center;gap:1em;margin-top:1.4em}
.k-eigene input{font:inherit}
.k-eigene input[type=color]{width:4.4em;height:4.4em;border:1px solid var(--ah2);padding:.4em;background:#fff;cursor:pointer}
.k-eigene input[type=text]{padding:0 .93em;border:1px solid var(--ah2);background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.4em;width:9.3em;height:3.15em;color:var(--ai);text-transform:uppercase}
.k-kontrast{display:flex;gap:.8em;align-items:flex-start;margin-top:1em;font-size:1.25em;line-height:1.5;color:var(--am)}
.k-kontrast svg{width:1.2em;height:1.2em;flex:none;margin-top:.15em}
.k-kontrast .ic-gut svg{color:var(--checked)}.k-kontrast .ic-schwach svg{color:var(--point)}
.k-kontrast.gut .ic-schwach,.k-kontrast.schwach .ic-gut{display:none}
.k-kontrast.schwach{color:var(--ai2)}
.k-dazu{display:block;margin-top:.6em;font-size:1.2em;line-height:1.5;color:var(--am)}
.k-zeile{display:flex;align-items:flex-start;gap:2em;padding-bottom:1.6em}
.k-zeile > div{flex:1}
.k-zeile b{display:block;font-size:1.45em;font-weight:600}
.k-zeile p{margin-top:.3em;font-size:1.3em;line-height:1.5;color:var(--am)}
.k-schalter{position:relative;display:inline-block;width:4em;height:2.3em;flex:none;cursor:pointer}
.k-schalter input{position:absolute;opacity:0;width:0;height:0}
.k-schalter .bahn{position:absolute;inset:0;border-radius:1.2em;background:var(--ah2);transition:.15s}
.k-schalter .bahn::after{content:"";position:absolute;top:.3em;left:.3em;width:1.7em;height:1.7em;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);transition:.15s}
.k-schalter input:checked + .bahn{background:var(--ai)}
.k-schalter input:checked + .bahn::after{left:2em}
.k-schalter input:focus-visible + .bahn{outline:2px solid var(--ai);outline-offset:2px}
.k-angaben{transition:opacity .2s}
.k-angaben.aus{opacity:.45;pointer-events:none}
.k-feld{display:block;margin-bottom:1.4em}
.k-feld > span{display:block;font-size:1.25em;font-weight:600;margin-bottom:.55em}
.k-feld input{width:100%;height:3.05em;padding:0 .9em;background:#fff;border:1px solid var(--ah2);border-radius:.62em!important;
  font:inherit;font-size:1.45em;color:var(--ai)}
.k-feld input:focus{outline:0;border-color:var(--ai);box-shadow:0 0 0 3px rgba(30,32,35,.08)}
.k-paar{display:grid;grid-template-columns:1fr 1fr;gap:1.4em}
.k-speichern{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:1.6em;margin-top:3em;
  padding:1.6em 0 1.8em;background:linear-gradient(to top,var(--ap) 75%,color-mix(in srgb,var(--ap) 0%,transparent))}
.k-speichern p{font-size:1.25em;line-height:1.45;color:var(--am);text-align:right}
.k-knopf{order:2;height:3.07em;padding:0 1.6em;border:0;border-radius:.6em!important;background:var(--yellow);color:var(--ai);
  font:inherit;font-size:1.5em;font-weight:600;cursor:pointer}
.k-ok{order:1;display:none;align-items:center;gap:.5em;font-size:1.3em}
.k-ok svg{width:1.2em;height:1.2em;color:var(--checked)}
.k-speichern.ok .k-ok{display:flex}.k-speichern.ok p{display:none}
.k-vorschau{position:sticky;top:96px;padding-bottom:3em}
.k-vs-kopf{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1.2em}
.k-tabs{display:inline-flex;background:var(--wash);border:1px solid var(--ah);border-radius:1em;padding:.3em}
.k-tabs button{font:inherit;font-size:1.3em;font-weight:500;border:0;background:none;padding:.45em 1.1em;border-radius:.55em!important;
  color:var(--am);cursor:pointer}
.k-tabs button[aria-selected="true"]{background:#fff;color:var(--ai);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.k-quelle{font-size:1.15em;color:var(--al);text-align:right;line-height:1.35}
.k-buehne{display:flex;justify-content:center;align-items:flex-start;padding:2.2em;background:#e4e2da;border-radius:1.4em}
.k-blatt{height:min(calc(100vh - 280px), 66em);aspect-ratio:210 / 297;max-width:100%}
.k-blatt[hidden]{display:none}
.k-blatt .bu-a4{box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 30px rgba(0,0,0,.14)}
.k-fenster button:focus-visible{outline:2px solid var(--ai);outline-offset:2px}

/* ------------------------------------------------------ Editor (Papier) */
.bu-editor{background:var(--paper);padding:var(--luft) 0}
.e-buehne{position:relative;overflow:hidden;border-radius:var(--radius);padding:40px 48px 48px;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb,var(--glanz-2) 30%,transparent) 0%, color-mix(in srgb,var(--glanz-2) 0%,transparent) 58%),
    linear-gradient(145deg,var(--dunst-0) 0%,var(--dunst) 45%,var(--dunst-2) 100%)}
.e-buehne::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;pointer-events:none;
  background:linear-gradient(200deg,color-mix(in srgb,var(--glanz) 18%,transparent),color-mix(in srgb,var(--glanz) 0%,transparent));
  transform:rotate(18deg)}
.e-buehne > *{position:relative;z-index:1}
.e-schritte{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.e-schritt{position:relative;overflow:hidden;display:flex;gap:12px;align-items:baseline;padding:16px 16px 20px;text-align:left;
  border:1px solid color-mix(in srgb,var(--grund) 12%,transparent);border-radius:var(--radius);background:color-mix(in srgb,#fff 55%,transparent);
  font:inherit;cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.e-schritt .nr{font-family:var(--disp);font-size:15px;font-weight:600}
.e-schritt b{font-size:15px;font-weight:600}
.e-schritt:hover{color:var(--navy)}
.e-schritt[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:var(--schein-1)}
.e-schritt::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--navy)}
.e-schritt[aria-selected="true"].laeuft::after{animation:bu-takt var(--dauer,8s) linear forwards}
@keyframes bu-takt{to{width:100%}}
.e-schritt:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.e-telefon{display:none;margin-top:16px;font-size:13px;color:var(--muted)}

.e-fenster{position:relative;container-type:inline-size;border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--schein-3);border:1px solid color-mix(in srgb,var(--grund) 10%,transparent)}
.e-fenster > *{font-size:calc(100cqw / 120)}
.e-oben{display:flex;align-items:center;gap:2em;height:5.6em;padding:0 1.6em;background:var(--grund);color:var(--paper)}
.e-zurueck{font-size:1.3em;color:var(--nebel)}
.e-titel{padding-left:2em;border-left:1px solid var(--grund-3)}
.e-titel b{display:block;font-size:1.45em;font-weight:600}
.e-titel span{display:block;font-size:1.15em;color:var(--nebel)}
.e-stand{margin-left:auto;display:flex;align-items:center;gap:.5em;font-size:1.2em;color:var(--nebel)}
.e-stand svg{width:1.2em;height:1.2em;fill:none;stroke:var(--checked);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.e-stand.speichert svg{opacity:.2}
.e-modus{display:flex;padding:.3em;gap:.3em;background:var(--grund-2);border-radius:.6em;font-size:1.2em}
.e-modus b,.e-modus span{padding:.4em .9em;border-radius:.4em;font-weight:500}
.e-modus b{background:var(--grund-3)}.e-modus span{color:var(--nebel)}
.e-pdf{background:var(--yellow);color:var(--navy);font-weight:600;font-size:1.3em;padding:.7em 1.2em;border-radius:.6em}
.e-koerper{display:grid;grid-template-columns:19em 1fr 25em;height:66em}
.e-links{background:var(--dunst-0);border-right:1px solid var(--border);padding:1.8em 0}
.e-lbl{font-size:1.05em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 1.8em .8em}
.e-kap{list-style:none}
.e-kap li{display:flex;justify-content:space-between;gap:.6em;padding:.55em 1.4em;font-size:1.3em;color:var(--text);white-space:nowrap;
  transition:background .3s}
.e-kap li i{font-style:normal;color:var(--muted)}
.e-kap li.an{background:var(--dunst-2);font-weight:600;color:var(--navy)}
.e-kap li.neu{animation:bu-neu 1.2s ease}
@keyframes bu-neu{0%{background:color-mix(in srgb,var(--yellow) 70%,transparent)}100%{background:transparent}}
.e-plus{display:block;width:calc(100% - 3.6em);margin:1.4em 1.8em 0;padding:.8em;border:1px solid var(--border);
  border-radius:.6em;background:#fff;font:inherit;font-size:1.25em;font-weight:600;color:var(--navy);cursor:default}
.e-plus.gedrueckt{background:var(--dunst)}
.e-mitte{position:relative;overflow:hidden;background:#e4e3df;padding:3em 0}
.e-blatt{width:50em;margin:0 auto;transition:transform .7s cubic-bezier(.5,0,.2,1)}
.e-blatt .bu-a4{box-shadow:0 1em 3em -1.4em rgba(0,0,0,.4)}
.e-rechts{display:flex;flex-direction:column;border-left:1px solid var(--border);background:#fff}
.e-reiter{display:flex;gap:1.6em;padding:1.4em 1.6em 0;border-bottom:1px solid var(--border);font-size:1.25em;color:var(--muted)}
.e-reiter span{padding-bottom:.8em}
.e-reiter span.an{color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--navy)}
.e-aend i{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;margin-left:.3em;
  border-radius:50%;background:var(--dunst);font-style:normal;font-size:.85em;color:var(--navy);transition:background .3s}
.e-aend i.puls{background:var(--yellow)}
.e-r-inhalt{flex:1;padding:1.8em 1.6em;font-size:1.25em;line-height:1.5;color:var(--text)}
.e-r-h{color:var(--text)}.e-r-h b{color:var(--navy)}
.e-legende{list-style:none;margin-top:1.4em}
.e-legende li{display:grid;grid-template-columns:2.2em 1fr;gap:.8em;align-items:start;margin-top:1em;font-size:.95em;color:var(--muted)}
.e-legende i{display:flex;align-items:center;justify-content:center;height:1.4em}
.lg-gelb::before{content:"";width:1.8em;height:1.2em;background:color-mix(in srgb,var(--yellow) 55%,transparent)}
.lg-auge svg{width:1.3em;height:1.3em;color:var(--navy)}
.lg-strich::before{content:"";width:3px;height:1.4em;background:var(--yellow)}
.lg-sk .bu-sk{font-size:1em}
.e-r-fuss{padding:1.2em 1.6em;border-top:1px solid var(--border);font-size:1.05em;line-height:1.5;color:var(--muted)}
.e-r-art{font-size:.85em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.e-r-t{margin-top:.3em;font-weight:600;color:var(--navy)}
.e-r-orig{margin-top:1em;padding:.8em 1em;background:var(--dunst-0);font-size:.9em;color:var(--muted)}
.e-r-orig b{display:block;font-size:.85em;color:var(--muted);margin-bottom:.2em}
.e-r-knoepfe{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.e-r-knoepfe span{display:inline-flex;align-items:center;gap:.5em;padding:.45em .8em;border:1px solid var(--border);
  border-radius:.5em;font-size:.92em;color:var(--navy);transition:background .25s,border-color .25s}
.e-r-knoepfe span.an{border-color:var(--navy);background:var(--dunst-0);font-weight:600}
.e-r-knoepfe small{font-size:.8em;color:var(--muted)}
.e-r-zeile{display:flex;justify-content:space-between;align-items:center;margin-top:1em;font-size:.95em;color:var(--navy)}
.e-r-zeile .k-sw{font-size:1em}
.e-r-zeile .k-sw.an{background:var(--grund)}.e-r-zeile .k-sw.an::after{transform:translateX(16px)}
.e-r-lösch{margin-top:1.6em;font-size:.9em;color:var(--critical)}

/* Zustaende im Blatt */
.e-blatt [data-tippbar]{transition:background .25s}
.e-blatt .hell{background:color-mix(in srgb,var(--yellow) 45%,transparent)}
.e-blatt .tippt::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-.12em;
  background:var(--ink);animation:bu-caret 1s steps(1) infinite}
@keyframes bu-caret{50%{opacity:0}}
.bu-bf.geaendert::before,.p-blk.geaendert::before{content:"";position:absolute;left:-1.6em;top:.7em;bottom:.7em;width:.32em;background:var(--yellow)}
.bu-bf.zeigt-auge .bu-auge{display:flex;position:absolute;right:-3.4em;top:.7em;width:2.2em;height:2.2em;align-items:center;
  justify-content:center;border-radius:50%;background:#fff;box-shadow:0 .2em .6em rgba(0,0,0,.18);color:var(--ink)}
.bu-auge svg{width:1.3em;height:1.3em}
.bu-bf.weg{opacity:0;max-height:0!important;padding-top:0;padding-bottom:0;border-bottom-width:0;
  transition:opacity .3s,max-height .5s .1s,padding .5s .1s}
.bu-bf{max-height:20em;overflow:visible}
.bu-chips{display:flex;flex-wrap:wrap;gap:.5em}
.bu-chip{margin-top:.7em;display:inline-flex;align-items:center;gap:.5em;padding:.3em .7em;border:1px dashed var(--leer);
  font-size:.74em;color:var(--mut);animation:vor-auf .35s ease}
.bu-menue{position:absolute;z-index:3;left:0;top:2.2em;width:13em;padding:.4em;background:#fff;border:1px solid var(--hair);
  box-shadow:0 .6em 1.6em -.4em rgba(0,0,0,.28);animation:vor-auf .25s ease}
.bu-menue span{display:flex;align-items:center;gap:.8em;padding:.45em .6em;font-size:.82em;color:var(--ink)}
.bu-menue span.an{background:#f4f3ef;font-weight:600}
.bu-menue span.hell{background:color-mix(in srgb,var(--yellow) 45%,transparent)}
.bu-plus{position:relative;height:0;z-index:2}
.bu-plus span{position:absolute;left:2.6em;top:-.95em;padding:.25em .7em;background:#fff;border:1px solid var(--hair);
  font-size:.74em;font-weight:600;color:var(--ink);box-shadow:0 .2em .6em rgba(0,0,0,.12);animation:vor-auf .25s ease}
.bu-bf.neu{animation:vor-auf .35s ease}
.bu-bf .leer{color:var(--leer)}
.e-zeiger{position:absolute;z-index:5;left:60%;top:60%;width:22px;height:22px;pointer-events:none;
  transition:left .7s cubic-bezier(.5,0,.2,1),top .7s cubic-bezier(.5,0,.2,1),opacity .3s;opacity:0}
.e-zeiger.da{opacity:1}
.e-zeiger svg{width:22px;height:22px;fill:var(--grund);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.e-zeiger::after{content:"";position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--grund) 30%,transparent);transform:scale(0);opacity:0}
.e-zeiger.klick::after{animation:bu-klick .4s ease}
@keyframes bu-klick{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.e-ort-blatt{position:absolute;inset:3em 0 auto;opacity:0;pointer-events:none;transition:opacity .45s}
.e-mitte.ort .e-ort-blatt{opacity:1}
.e-mitte.ort > .e-blatt:not(.e-ort-blatt){opacity:0;transition:opacity .3s}

/* --------------------------------------------------- Was geht (Papier) */
.bu-koennen{background:var(--paper);padding:0 0 var(--luft)}
.bu-kn-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.bu-kn-liste{border-top:1px solid var(--border)}
.bu-kn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--border)}
.bu-kn h3{font-size:17px;font-weight:600;line-height:1.5;color:var(--navy)}
.bu-kn p{font-size:15px;line-height:1.6;color:var(--text);text-wrap:pretty}

/* ------------------------------------------------- Zusagen (dunkel) */
.bu-zusagen{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.bu-zusagen::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;pointer-events:none;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg)}
.bu-z-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.bu-zusagen h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:var(--titel-gross);
  line-height:1.08;letter-spacing:-.01em}
.bu-zusagen h2 span{color:var(--nebel)}
.bu-z-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.bu-z-liste div{padding:24px 0 32px;border-top:1px solid var(--grund-3)}
.bu-z-liste h3{font-size:17px;font-weight:600;line-height:1.35}
.bu-z-liste p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--nebel)}

/* ------------------------------------------------- Preise (Papier) */
.bu-preise{background:var(--paper);padding:var(--luft) 0}
.bu-p-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Kopf auf das Raster der Kaesten: Einleitung beginnt an der Kante des
   Enterprise-Kastens, Ueberschrift und Einleitung oben buendig. */
.bu-preise .bu-kopf{gap:24px;align-items:start}
.bu-p{display:flex;flex-direction:column;padding:32px 40px 40px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.bu-p ul{flex:1}
.bu-p.dunkel{background:var(--grund);color:var(--paper);border-color:var(--grund)}
.bu-p-nm{font-family:var(--cond);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bu-p-preis{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.bu-p-preis b{font-family:var(--disp);font-size:clamp(34px,3.6vw,52px);font-weight:600;line-height:1}
.bu-p-preis span{font-size:15px;color:var(--muted)}
.bu-p.dunkel .bu-p-preis span,.bu-p.dunkel .bu-p-satz,.bu-p.dunkel li{color:var(--nebel)}
.bu-p-satz{margin-top:12px;font-size:15px;color:var(--text)}
.bu-p-plus{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.bu-p-plus b{font-family:var(--disp);font-size:30px;font-weight:600;line-height:1}
.bu-p-preis b,.bu-p-plus b{white-space:nowrap;flex:none}
.bu-p-plus span{font-size:15px;color:var(--muted)}
.bu-p.dunkel .bu-p-plus{border-top-color:var(--grund-3)}.bu-p.dunkel .bu-p-plus span{color:var(--nebel)}
.bu-p-rechnung{margin-top:32px;font-size:17px;line-height:1.6;color:var(--navy)}
.bu-p ul{list-style:none;margin-top:24px}
.bu-p li{padding:12px 0;border-top:1px solid var(--border);font-size:15px;color:var(--text)}
.bu-p.dunkel li{border-top-color:var(--grund-3)}
.bu-p li a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bu-p li a:hover{color:var(--paper)}
.bu-p-fuss{margin-top:24px;font-size:13px;line-height:1.7;color:var(--muted)}
.bu-p-fuss a{display:inline-block;margin-top:8px;font-family:var(--cond);font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ------------------------------------------------------------ Breiten */
@media (max-width:1280px){
  .bu-hero .hero-grid{grid-template-columns:520px 1fr}
}
@media (max-width:1024px){
  .bu-hero .hero-grid{grid-template-columns:1fr}
  .bu-buehne{min-height:0;height:92vw;max-height:620px;margin:0}
  .bu-kopf,.bu-z-grid{grid-template-columns:1fr;gap:24px}
  .bu-kn-grid{grid-template-columns:1fr;gap:32px}
  .e-schritte{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  /* Telefon und schmales Tablet: wie die App unter 900 px. Vorschau oben,
     Formular einspaltig, keine feste Hoehe, Groesse wie in der App. */
  .k-app{font-size:10px;grid-template-columns:minmax(0,1fr);height:auto}
  .k-side{display:none}
  .k-haupt{padding:2.4em 1.8em 0}
  .k-zwei{display:flex;flex-direction:column;gap:2.4em}
  .k-vorschau{position:static;order:-1;padding:0}
  .k-blatt{height:100%}
  .k-buehne{height:44em;flex:none}
  .k-vs-kopf{flex-wrap:wrap}
  .k-quelle{width:100%;text-align:left}
  .k-quelle br{display:none}
  .k-wahlen,.k-paar{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bu-kopf{margin-bottom:32px}
  .bu-lead br,.bu-grenze br,.bu-p-fuss br{display:none}
  .e-buehne{padding:20px 16px 24px}
  .e-schritte{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px}
  .e-schritt{flex:0 0 auto;scroll-snap-align:start}
  .e-koerper{grid-template-columns:1fr;height:auto}
  .e-links,.e-rechts{display:none}
  .e-fenster > *{font-size:calc(100cqw / 62)}
  .e-oben{gap:1em}
  .e-titel,.e-modus,.e-stand,.e-zurueck{display:none}
  .e-pdf{margin-left:auto}
  .e-mitte{padding:2em 0}
  .e-blatt{width:56em}
  .e-telefon{display:block}
  .bu-z-liste,.bu-p-grid{grid-template-columns:1fr}
  .bu-kn{grid-template-columns:1fr;gap:8px}
  .bu-p{padding:24px 24px 32px}
  .bu-p-preis,.bu-p-plus{flex-wrap:wrap;row-gap:4px}
  .bu-p-preis span,.bu-p-plus span{flex-basis:100%}
}
/* Elementor resets img{height:auto} – keep the sidebar logo at app size */
.k-side img.k-marke{display:block!important;align-self:flex-start!important;height:3.4em!important;width:auto!important;max-width:none!important;margin:0 2.4em 3.4em!important}