/* ==========================================================================
   scheibenweise. — rechner.css
   Preisrechner (Privat). Ruhige Arbeitsfläche: links die Schritte, rechts der
   Kassenzettel. Schmale Bildschirme: Leiste am unteren Rand, der Kassenzettel
   klappt als Blatt von unten auf.
   Alle Klassen beginnen mit rz-. Farben kommen aus den Themen-Variablen von
   core.css; Grundzustand ist immer die fertige, sichtbare Seite.
   Reihenfolge: Seite · Kopf/Fortschritt · Schritte · Ort · Fenster ·
   Fensterbank · Zusatz · Termin · Kontakt · Abschluss · Kassenzettel ·
   Leiste/Blatt · Fehler · Bewegung
   ========================================================================== */

/* ---------- Seite ---------- */
.rz{--rz-zettel-b:clamp(340px,30vw,400px);--rz-leiste-h:74px;--rz-text-b:46rem}
/* Fokussierte Felder dürfen nicht unter der Leiste liegen (WCAG 2.4.11) */
@media (max-width:1023.98px){
  html{scroll-padding-bottom:calc(74px + 32px)}
  .site-footer{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* Kopfzeile dieser Seite: Logo, Umschalter, Telefon (kein Menü) */
.site-header[data-header="static"] .site-header__tel{display:inline-flex;margin-left:auto;min-height:44px}
@media (max-width:759.98px){
  .site-header[data-header="static"] .site-header__tel{justify-content:center;width:46px;height:46px;border:2px solid currentColor}
  .site-header__telnr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:440px){
  .site-header[data-header="static"] .site-header__inner{gap:10px}
  .site-header[data-header="static"] .site-header__logo{width:clamp(104px,31vw,150px)}
  .site-header[data-header="static"] .welt-switch a{padding-inline:8px}
}

/* Tippziele in der Kopfzeile: mindestens 44 px hoch, ohne das Aussehen zu ändern */
.site-header[data-header="static"] .site-header__logo{display:flex;align-items:center;min-height:44px}
.site-header[data-header="static"] .welt-switch a{position:relative}
.site-header[data-header="static"] .welt-switch a::after{content:"";position:absolute;inset:-6px 0}

.rz__ohne-js{max-width:calc(1320px + 2*var(--gutter));margin-inline:auto;padding:32px var(--gutter) 0}
.rz__rahmen{width:100%;max-width:calc(1320px + 2*var(--gutter));margin-inline:auto;padding:clamp(24px,3vw,40px) var(--gutter) clamp(72px,9vw,128px)}
.rz__haupt{min-width:0}
.rz__flaeche{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.rz__form{min-width:0}
@media (min-width:1024px){
  .rz__flaeche{grid-template-columns:minmax(0,1fr) var(--rz-zettel-b)}
}

/* ---------- Kopf: Titel und Fortschritt ---------- */
.rz__kopf{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.rz__titel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.rz__steuer{margin:0}
.rz-weg{display:grid;gap:2px}
.rz-weg__liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rz-weg__punkt{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;font:italic 900 .6875rem/1 var(--font-tag);text-transform:uppercase;letter-spacing:var(--ls-tag);text-align:left;color:var(--muted);transition:color var(--dur-fast)}
.rz-weg__punkt:disabled{cursor:default}
.rz-weg__nr{display:none}
.rz-weg__punkt[aria-current="step"]{color:var(--fg)}
/* Erledigte Schritte sind Links zurück: blau wie ein Link */
.rz-weg__punkt.is-done{color:var(--accent-text)}
.rz-weg__punkt.is-done:hover{color:var(--fg)}
.rz-weg__punkt.is-done .rz-weg__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (min-width:640px){
  .rz-weg__punkt{font-size:.75rem}
  .rz-weg__nr{display:inline;font-style:normal;font-weight:700}
}

/* Hinweis: Auswahl aus dieser Sitzung wiederhergestellt */
.rz .btn--sm{min-height:44px}
.rz-hinweis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(28px,3.4vw,44px);padding:14px 18px 14px 20px;border:1px solid var(--line);border-left:var(--bar-h) solid var(--accent);font-size:var(--fs-small)}

/* ---------- Schritte ---------- */
.rz-schritte{position:relative;min-width:0}
/* Klinge des Abziehers beim Schrittwechsel (nur per JS sichtbar) */
.rz-klinge{position:absolute;top:0;bottom:0;left:-8px;z-index:6;width:8px;background:var(--accent);visibility:hidden;pointer-events:none}
.rz-schritt{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.3vw,44px)}
.rz-schritt__kopf{display:grid;gap:16px;max-width:var(--rz-text-b)}
.rz-schritt__nr{color:var(--muted)}
.rz-schritt__titel{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);line-height:1.04;letter-spacing:-.03em;outline:none}
.rz-schritt__kopf .lead{color:var(--muted)}
.rz-schritt__fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.rz-schritt__weiter{margin-left:auto}
.rz-schritt__zurueck{margin-left:calc(-1*min(22px,var(--gutter)))}
/* Schmale Bildschirme: der Hauptbutton sitzt in der Leiste am unteren Rand */
@media (max-width:1023.98px){
  .rz-schritt__weiter{display:none}
  .rz-schritt__fuss--allein{display:none}
}
/* Breite Bildschirme: die Fußzeile des Schritts bleibt am unteren Rand stehen, der Button ist immer erreichbar */
@media (min-width:1024px){
  html{scroll-padding-bottom:112px}
  .rz-schritt__fuss{position:sticky;bottom:0;z-index:4;padding-block:16px;background:var(--bg)}
}

/* ---------- Schritt 1: Ort ---------- */
.rz-ort{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 36px;align-items:start}
.rz-ort__feld{max-width:300px}
.rz-ort__input{min-height:76px;padding-inline:18px;border:2px solid var(--fg);font:700 clamp(1.75rem,1.45rem + 1.1vw,2.25rem)/1 var(--font-display);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.rz-ort__input::placeholder{letter-spacing:0;font-weight:400;font-family:var(--font-body);font-size:1.125rem}
.rz-ort__input:focus{box-shadow:inset 0 0 0 1px var(--sw-blue)}
.rz-ort__ergebnis{display:grid;gap:4px;align-content:center;min-height:76px;padding:8px 0 8px 22px;border-left:var(--bar-h) solid var(--accent);line-height:1.45}
.rz-ort__ergebnis:empty{display:none}
.rz-ort__ergebnis strong{display:block;font:700 var(--fs-h4)/1.2 var(--font-display);letter-spacing:-.015em}
.rz-ort__ergebnis.is-aus{border-left-color:var(--fg)}
@media (min-width:700px){
  .rz-ort{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  /* auf Höhe des Eingabefelds, nicht der Beschriftung */
  .rz-ort__ergebnis{margin-top:28px}
}

.rz-zonen{display:grid;gap:14px}
.rz-zonen__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:solid var(--line);border-width:1px 0 0 1px}
.rz-zonen__zelle{display:grid;gap:10px;align-content:start;padding:16px 18px 18px;border:solid var(--line);border-width:0 1px 1px 0;transition:background var(--dur-base),color var(--dur-base)}
.rz-zonen__km{display:flex;align-items:center;gap:9px;font-size:.875rem;font-weight:700;line-height:1.2}
.rz-zonen__km .gebiet__muster{width:12px;height:12px;margin:0}
.rz-zonen__preis{font:700 1.375rem/1 var(--font-display);letter-spacing:-.02em}
.rz-zonen__zelle.is-aktiv{background:var(--strong);color:var(--on-strong)}
@media (min-width:640px){.rz-zonen__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rz-gewerbe{margin-top:-6px}

/* ---------- Schritt 2: Fenster ---------- */
.rz-schnell{display:grid;gap:14px}
.rz-schnell__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.rz-schnell__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.rz-beispiel.tag{display:grid;gap:5px;align-content:start;justify-items:start;min-height:66px;padding:12px 16px;text-align:left;white-space:normal;cursor:pointer}
.rz-beispiel__name{font:700 1.0625rem/1.15 var(--font-display);letter-spacing:-.01em}
.rz-beispiel__text{font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--muted)}
.rz-beispiel[aria-pressed="true"] .rz-beispiel__text{color:inherit}
/* Schmale Bildschirme: Beispiele als waagerecht wischbare Reihe, damit die Kacheln schnell im Bild sind */
@media (max-width:559.98px){
  .rz-schnell__liste{display:flex;margin:-5px calc(-1*var(--gutter));padding:5px var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .rz-schnell__liste::-webkit-scrollbar{display:none}
  .rz-beispiel.tag{flex:0 0 min(78%,300px);scroll-snap-align:start}
}

/* Kacheln: Spaltenzahl richtet sich nach der Breite der Arbeitsfläche, nicht des Fensters */
.rz-kacheln-halter{container:kacheln / inline-size}
.rz-kacheln{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px}
.rz-kachel{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"bild text" "bild preis" "zahl zahl" "roll roll";column-gap:16px;align-content:start;margin-bottom:12px;padding:14px;border:1px solid var(--line);background:var(--bg);transition:border-color var(--dur-fast)}
.rz-kachel:hover{border-color:var(--fg)}
/* aktiver Rahmen als eigene Ebene: gleich stark rund um die ganze Kachel, auch über der Bildfläche */
.rz-kachel::after,.rz-extra::after{content:"";position:absolute;inset:-1px;z-index:1;border:2px solid var(--accent);opacity:0;pointer-events:none;transition:opacity var(--dur-fast)}
.rz-kachel.is-aktiv,.rz-extra.is-aktiv{border-color:var(--accent)}
.rz-kachel.is-aktiv::after,.rz-extra.is-aktiv::after{opacity:1}
.rz-kachel__bild{grid-area:bild;position:relative;overflow:hidden;display:grid;place-items:center;align-self:start;height:76px;background:var(--surface);transition:background var(--dur-base)}
.rz-kachel__bild .fenster-svg{width:56px}
.rz-kachel.is-aktiv .rz-kachel__bild{background:var(--tint)}
/* kleine Klinge: wischt bei jedem gezählten Fenster einmal über die Zeichnung */
.rz-kachel__wisch{position:absolute;top:0;bottom:0;left:-6px;width:6px;background:var(--accent);visibility:hidden}
.rz-kachel__haken{position:absolute;top:-1px;right:-1px;z-index:2;display:grid;place-items:center;width:28px;height:28px;background:var(--accent);color:var(--on-accent);clip-path:inset(0 0 0 100%);transition:clip-path var(--dur-slow) var(--ease-out)}
.rz-kachel__haken .icon{width:16px;height:16px;stroke-width:3}
.rz-kachel.is-aktiv .rz-kachel__haken{clip-path:inset(0)}
.rz-kachel__text{grid-area:text;display:grid;gap:4px;align-content:start;min-width:0;padding-right:20px}
.rz-kachel__name{font:700 1.125rem/1.15 var(--font-display);letter-spacing:-.015em}
.rz-kachel__kurz{font-size:.875rem;line-height:1.4;color:var(--muted)}
.rz-kachel__preis{grid-area:preis;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:8px}
.rz-kachel__preis .price{font-size:1.375rem;line-height:1}
.rz-kachel__einheit{font-size:.8125rem;color:var(--muted)}
.rz-kachel__summe{margin-left:auto;font:700 1rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--accent-text);white-space:nowrap}
.rz-kachel__zahl{grid-area:zahl;align-self:end;margin-top:14px}
.rz-kachel__roll{grid-area:roll;display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rz-kachel__rollkopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.rz-kachel__rollname{font-size:.9375rem;font-weight:700}
.rz-kachel__rollpreis{font-size:.8125rem;color:var(--muted)}
.rz-kachel__rollzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

@container kacheln (min-width:520px){
  .rz-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rz-kachel{grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "text" "preis" "zahl" "roll";grid-template-rows:auto 1fr auto auto auto;column-gap:0;margin-bottom:16px;padding:0 0 20px}
  .rz-kachel__bild{align-self:stretch;height:148px}
  .rz-kachel__bild .fenster-svg{width:100px}
  .rz-kachel__text{gap:6px;padding:18px 20px 0}
  .rz-kachel__name{font-size:1.25rem}
  .rz-kachel__preis{margin-top:14px;padding-inline:20px}
  .rz-kachel__preis .price{font-size:1.625rem}
  .rz-kachel__zahl{margin:14px 20px 0}
  .rz-kachel__roll{margin:16px 20px 0;padding-top:16px}
  /* gleiche Zeilen über die ganze Reihe: Preise und Zähler stehen auf einer Linie */
  @supports (grid-template-rows:subgrid){
    .rz-kachel{grid-row:span 5;grid-template-rows:subgrid}
  }
}
@container kacheln (min-width:720px){
  .rz-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Zähler: volle Breite, große Ziele */
.rz .stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;width:100%}
.rz .stepper__value{min-height:48px;font-size:1.25rem}
.rz .stepper__value:focus-visible{outline:2px solid var(--focus);outline-offset:-5px}
.rz .stepper__btn:focus-visible{outline-offset:-5px}
.rz .stepper__btn:active:not([aria-disabled="true"]){background:var(--accent);color:var(--on-accent)}
/* Minus bei 0 bleibt fokussierbar (aria-disabled statt disabled) */
.rz .stepper__btn[aria-disabled="true"]{opacity:.25;cursor:not-allowed}
.rz .stepper__btn[aria-disabled="true"]:hover{background:transparent;color:var(--fg)}
.rz .stepper--klein{grid-template-columns:44px minmax(0,1fr) 44px}
.rz .stepper--klein .stepper__btn,.rz .stepper--klein .stepper__value{min-height:44px}
.rz .stepper--klein .stepper__value{font-size:1.0625rem}
.rz-kurzwahl.tag{min-height:48px;padding-inline:16px;border:2px solid var(--fg);font-weight:700;cursor:pointer}
.rz-kurzwahl.tag:hover{background:var(--fg);color:var(--bg)}
.rz-kurzwahl.tag[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.rz-kurzwahl.tag[aria-disabled="true"]:hover{background:var(--bg);color:var(--fg)}

/* Glasdach: Fläche statt Stückzahl */
.rz-qm{position:relative}
.rz-qm .input{min-height:52px;padding-right:54px;border:2px solid var(--fg);font:700 1.25rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.rz-qm .input::placeholder{font-weight:400}
.rz-qm__einheit{position:absolute;top:50%;right:16px;transform:translateY(-50%);font-weight:700;color:var(--muted);pointer-events:none}
.rz-kachel__zahl .field__label{font-size:.8125rem}

.rz-hilfe{display:flex;gap:12px;align-items:flex-start;max-width:var(--rz-text-b);font-size:var(--fs-small);color:var(--muted)}
.rz-hilfe .icon{margin-top:2px;color:var(--accent-text)}

/* ---------- Fensterbank: ein Piktogramm je gezähltem Fenster ---------- */
.rz-bank{display:grid;gap:8px}
.rz-bank__reihe{--bank-h:30px;--bank-luft:12px;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:6px;min-height:var(--bank-h);margin-bottom:calc(-1*var(--bank-luft));
  /* die Bank selbst: eine 2-px-Linie je Reihe (harte Kanten, kein Verlauf); die Fenster stehen mit ihrer Unterkante darauf */
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--bank-h) - 2px),var(--fg) calc(var(--bank-h) - 2px),var(--fg) var(--bank-h),transparent var(--bank-h),transparent calc(var(--bank-h) + var(--bank-luft)))}
.rz-bank__reihe:empty{margin-bottom:0}
.rz-bank__stueck{flex:none;display:block;height:var(--bank-h);margin-bottom:var(--bank-luft);color:var(--fg)}
.rz-bank__stueck svg{display:block;height:100%;width:auto;overflow:visible}
.rz-bank__stueck .a{stroke:var(--accent)}
.rz-bank__mehr{flex:none;display:flex;align-items:center;height:calc(var(--bank-h) - 2px);margin-bottom:calc(2px + var(--bank-luft));padding-left:2px;font:700 .8125rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.rz-bank__zahl{justify-self:end;font:italic 900 .6875rem/1 var(--font-tag);text-transform:uppercase;letter-spacing:var(--ls-tag);color:var(--muted);white-space:nowrap}
/* Schmale Bildschirme: die Bank bleibt beim Zählen unter der Kopfzeile stehen */
.rz-bank--leiste{position:sticky;top:var(--header-h);z-index:5;display:flex;align-items:flex-end;gap:14px;margin:-8px calc(-1*var(--gutter));padding:12px var(--gutter) 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.rz-bank--leiste .rz-bank__reihe{--bank-luft:0px;flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden;margin-bottom:0}
.rz-bank--leiste .rz-bank__zahl{padding-bottom:6px}
@media (min-width:1024px){.rz-bank--leiste{display:none}}

/* ---------- Schritt 3: Zusatz ---------- */
.rz-extras{display:grid;gap:12px}
.rz-extra{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"bild text" "zahl zahl";gap:14px 16px;padding:14px;border:1px solid var(--line);transition:border-color var(--dur-fast)}
.rz-extra:hover{border-color:var(--fg)}
.rz-extra.is-aktiv .rz-kachel__bild{background:var(--tint)}
.rz-extra.is-aktiv .rz-kachel__haken{clip-path:inset(0)}
.rz-extra .rz-kachel__preis{grid-area:auto}
.rz-extra .rz-kachel__bild{grid-area:bild}
.rz-extra__text{grid-area:text;display:grid;gap:6px;align-content:start;min-width:0;padding-right:20px}
.rz-extra__zahl{grid-area:zahl;display:grid;gap:8px}
.rz-extra .rz-kachel__preis{margin-top:4px}
@media (min-width:760px){
  .rz-extra{grid-template-columns:168px minmax(0,1fr) minmax(220px,260px);grid-template-areas:"bild text zahl";gap:0 28px;align-items:center;padding:0 24px 0 0}
  .rz-extra .rz-kachel__bild{align-self:stretch;height:auto;min-height:168px}
  .rz-extra .rz-kachel__bild .fenster-svg{width:100px}
  .rz-extra__text{padding:24px 0}
  .rz-extra .rz-kachel__name{font-size:1.375rem}
  .rz-extra .rz-kachel__preis .price{font-size:1.625rem}
}
.rz-notiz{max-width:var(--rz-text-b)}
.rz-notiz .textarea{min-height:132px}

/* ---------- Schritt 4: Termin ---------- */
.rz-termin{display:grid;gap:30px;max-width:var(--rz-text-b)}
.rz-termin__datum{max-width:300px}
.rz-termin__datum .input{min-height:54px;font-variant-numeric:tabular-nums}
.rz-wahl{min-width:0;margin:0;padding:0;border:0}
.rz-wahl legend{padding:0;margin-bottom:12px}
.rz-wahl__zusatz{margin-left:6px;font-weight:400;color:var(--muted)}
.rz-wahl__liste{display:flex;flex-wrap:wrap;gap:8px}
.rz-wahl--flexibel{margin-top:-6px}
/* Chip = echte Checkbox, nur anders gezeichnet */
.rz-chip{position:relative;display:inline-flex;cursor:pointer}
.rz-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rz-chip .tag{gap:8px;min-height:48px;padding-inline:18px;border-color:var(--sw-black-40);font-size:.9375rem}
.rz-chip:hover .tag{border-color:var(--fg)}
.rz-chip input:checked+.tag{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* Häkchen: Auswahl nicht nur über die Farbe zeigen */
.rz-chip input:checked+.tag::before{content:"";flex:none;width:12px;height:12px;background:currentColor;clip-path:polygon(12% 52%,0 66%,38% 100%,100% 22%,86% 9%,36% 70%)}
.rz-chip input:focus-visible+.tag{outline:2px solid var(--focus);outline-offset:3px}
.rz-chip__lang{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Schmale Bildschirme: sechs Wochentage in einer Reihe (Kürzel, ohne Häkchen: Platz) */
@media (max-width:639.98px){
  .rz-wahl__liste--tage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .rz-wahl__liste--tage .rz-chip,.rz-wahl__liste--tage .tag{width:100%}
  .rz-wahl__liste--tage .tag{justify-content:center;padding-inline:0}
  .rz-wahl__liste--tage input:checked+.tag::before{display:none}
}
@media (min-width:640px){
  .rz-chip__kurz{display:none}
  .rz-chip__lang{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
}

/* ---------- Schritt 5: Kontakt ---------- */
.rz-kontakt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px;max-width:var(--rz-text-b)}
.rz-kontakt>.field{grid-column:1/-1}
.rz-kontakt>.rz-kontakt__plz{grid-column:span 2}
.rz-kontakt>#rz-ort-feld{grid-column:span 4}
.rz-kontakt .input,.rz-kontakt .select{min-height:54px}
.rz-kontakt__anfahrt{grid-column:1/-1;margin-top:-8px;color:var(--muted)}
.rz-kontakt__anfahrt:empty{display:none}
@media (min-width:640px){
  .rz-kontakt>#rz-email-feld,.rz-kontakt>#rz-tel-feld{grid-column:span 3}
}
.rz-koeder{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}

.rz-kurz{display:grid;gap:16px;max-width:var(--rz-text-b);padding:22px 24px;background:var(--surface)}
.rz-kurz__liste{display:grid;gap:8px;margin:0;font-size:var(--fs-small);line-height:1.45}
.rz-kurz__liste>div{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:12px}
.rz-kurz__liste dt{color:var(--muted)}
.rz-kurz__liste dd{margin:0}
.rz-kurz__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-top:16px;border-top:1px solid var(--line)}
.rz-kurz__etikett{font:italic 900 var(--fs-tag)/1 var(--font-tag);text-transform:uppercase;letter-spacing:var(--ls-tag)}
.rz-kurz__preis .price{font-size:1.75rem;line-height:1}
.rz-kurz__preis .price.is-leer{font-size:1rem;letter-spacing:0}

.rz-senden{display:grid;gap:14px;max-width:var(--rz-text-b)}
.rz-senden__zeile{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rz-senden__recht{max-width:40rem}
.rz-senden__fehler{padding:14px 18px;border:2px solid var(--fg);border-left-width:var(--bar-h);font-weight:600}

/* ---------- Abschluss ---------- */
.rz-fertig{display:grid;gap:clamp(28px,3.3vw,44px)}
.rz-fertig__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rz-brief{display:grid;gap:12px;max-width:var(--rz-text-b)}
.rz-brief__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.rz-brief__text{margin:0;padding:22px 24px;border:1px solid var(--line);background:var(--surface);font:400 .9375rem/1.6 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere}
.rz-brief__status:empty{display:none}

/* ---------- Kassenzettel ---------- */
.rz-zettel{min-width:0}
.rz-zettel__blatt{display:flex;flex-direction:column;gap:16px;padding:24px 26px 0;border:1px solid var(--line);background:var(--bg)}
.rz-zettel__blatt>*{flex:none}
.rz-zettel__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px}
.rz-zettel__kopf h2{margin:0}
.rz-zettel__zu{display:none}
.rz-zettel__ort{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;line-height:1.3}
.rz-zettel__ort .icon{color:var(--accent-text)}
.rz-zettel__aendern{margin-left:auto;padding:12px 0 12px 12px;font-weight:400}
.rz-zettel__zeilen{margin:0;border-top:1px solid var(--line)}
.rz-zettel__zeilen:empty{display:none}
.rz-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);line-height:1.35}
.rz-zeile__menge{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rz-zeile__summe{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rz-zettel__summen{display:grid;gap:8px;margin:0;font-size:var(--fs-small);line-height:1.35}
.rz-zettel__summe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:baseline}
.rz-zettel__summe dt{color:var(--muted)}
.rz-zettel__summe dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rz-zettel__summe dd.rz-zettel__erklaerung{grid-column:1/-1;font-size:.8125rem;font-weight:400;color:var(--muted);white-space:normal}
.rz-naehe{display:grid;gap:9px}
.rz-naehe__balken{height:var(--bar-h);background:var(--line);overflow:hidden}
.rz-naehe__balken span{display:block;height:100%;background:var(--accent);transform:scaleX(var(--anteil,0));transform-origin:left center;transition:transform var(--dur-slow) var(--ease-out)}
/* Endbetrag: blaue Scheibe am Fuß des Zettels, Text darauf immer weiß */
.rz-zettel__preis{display:grid;gap:10px;margin:4px -26px 0;padding:22px 26px 22px}
.rz-zettel__betrag{font-size:clamp(2.5rem,2rem + 1.4vw,3.25rem);line-height:.95;letter-spacing:-.035em}
.rz-zettel__betrag.is-leer{font:700 1.25rem/1.2 var(--font-display);letter-spacing:-.015em;white-space:normal}
.rz-zettel__recht{margin-top:16px;color:var(--muted)}
.rz-zettel__recht strong{color:var(--fg)}
.rz-zettel__hilfe{margin-top:0;font-size:var(--fs-small)}
.rz-zettel__hilfe .link{display:inline-block;padding-block:12px}
@media (min-width:1024px){
  /* --rz-zettel-oben setzt rechner.js: Ist die Karte höher als das Fenster, bleibt ihr unterer Rand (der Preis) im Bild */
  .rz-zettel{position:sticky;top:var(--rz-zettel-oben,calc(var(--header-h) + 24px))}
}

/* ---------- Leiste und Blatt (schmale Bildschirme) ---------- */
.rz-leiste{position:fixed;inset:auto 0 0 0;z-index:55;display:grid;grid-template-columns:minmax(0,1fr) fit-content(66%);align-items:center;gap:12px;min-height:var(--rz-leiste-h);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:2px solid var(--fg)}
.rz-leiste__preis{display:grid;gap:5px;justify-items:start;min-width:0;min-height:48px;align-content:center;text-align:left}
.rz-leiste__betrag{font-size:1.375rem;line-height:1}
.rz-leiste__betrag.is-leer{font:700 .875rem/1.15 var(--font-body);letter-spacing:0;white-space:normal}
.rz-leiste__unter{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;line-height:1;color:var(--muted);white-space:nowrap}
.rz-leiste__unter .icon{width:14px;height:14px;transform:rotate(180deg)}
.rz-leiste__details{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
[data-rz-leiste-steuer]:not([hidden])+.rz-leiste__details::before{content:"· ";display:inline-block;margin-right:4px;text-decoration:none}
/* langer Button (letzter Schritt): „Details“ nur noch als Pfeil, der Name bleibt vorlesbar */
.rz-leiste.is-lang [data-rz-leiste-steuer]:not([hidden])+.rz-leiste__details{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rz-leiste__weiter{min-height:52px;padding:8px 18px;line-height:1.15;white-space:normal;text-wrap:balance}
.rz-schleier{display:none}
@media (max-width:399.98px){.rz-leiste__weiter{padding-inline:14px;font-size:.9375rem}}
@media (min-width:1024px){.rz-leiste{display:none}}
@media (max-width:1023.98px){
  /* Das Blatt scrollt als Ganzes; der Preis bleibt an seinem unteren Rand stehen */
  .rz-zettel{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;flex-direction:column;gap:16px;max-height:min(88svh,780px);padding:20px var(--gutter) 0;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-top:var(--bar-h) solid var(--accent);transform:translateY(103%);visibility:hidden;transition:transform 520ms var(--ease-wipe),visibility 0s 520ms}
  .zettel-offen .rz-zettel{transform:none;visibility:visible;transition:transform 520ms var(--ease-wipe),visibility 0s}
  .rz-zettel__blatt{display:contents}
  .rz-zettel>*,.rz-zettel__blatt>*{flex:none}
  .rz-zettel__recht{order:1;margin:0}
  .rz-zettel__hilfe{order:2;margin:-16px 0 -8px}
  .rz-zettel__preis{order:3;position:sticky;bottom:0;margin:4px calc(-1*var(--gutter)) 0;padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom))}
  .rz-zettel__zu{display:grid;place-content:center;width:44px;height:44px;margin:-8px -8px -8px 0;border:2px solid var(--fg)}
  .rz-schleier{display:block;position:fixed;inset:0;z-index:58;background:var(--overlay-scrim);opacity:0;visibility:hidden;transition:opacity 320ms var(--ease-out),visibility 0s 320ms}
  .zettel-offen .rz-schleier{opacity:1;visibility:visible;transition:opacity 320ms var(--ease-out),visibility 0s}
  .zettel-offen body{overflow:hidden}
}

/* ---------- Fehlerliste ---------- */
.rz-fehler{display:grid;gap:10px;max-width:var(--rz-text-b);padding:18px 20px;border:2px solid var(--fg);border-left-width:var(--bar-h);outline-offset:4px}
.rz-fehler h3{font-size:1.125rem;letter-spacing:-.01em}
.rz-fehler ul{display:grid;gap:6px;font-size:var(--fs-small);text-wrap:pretty}
.rz-fehler a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Bewegung ----------
   Einstieg: Arbeitsfläche, Zettel und Leiste bleiben unsichtbar, bis core.js die
   Seite freigibt (.is-ready); dann setzt rechner.js die Startzustände.
   Rückfall: nach 4 s (.anim-failsafe) ist alles sichtbar. */
.js:not(.is-ready):not(.anim-failsafe):not(.ruhe) :is(.rz-schritte,.rz-zettel>*,.rz-leiste){visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .js:not(.is-ready) :is(.rz-schritte,.rz-zettel>*,.rz-leiste){visibility:visible}
}
/* Ruhe-Modus (?ruhe): auch die kleinen CSS-Übergänge dieser Seite abschalten */
.ruhe .rz *,.ruhe .rz *::before,.ruhe .rz *::after{transition-duration:.001ms!important}

@media print{.rz-leiste,.rz-schleier,.rz-weg,.rz-schritt__fuss{display:none!important}}