/* Formular – DESIGN-2026.md 3.14: Offertformular [alp_offerte] (inc/offerte.php) und Umzugskosten-Rechner
   [alp_rechner] (inc/rechner.php). Wird nach alpner.css geladen und ersetzt dort die Abschnitte «Offertformular» und
   «Umzugskosten-Rechner» (gleiche oder höhere Spezifität); diese Datei ist für beide vollständig.
   Regeln: Felder 16 px (kein iOS-Zoom), Ränder --line-strong, Auswahl blau, Zahl-Knöpfe Navy, Rot nur für den
   Absenden-Knopf (und den Fortschrittsbalken nach 3.14). Bewegung nur ohne «Bewegung reduzieren». */

:is(.offerte,.rechner){
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
  --ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ico-fehler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM10.8 6.5h2.4v7.5h-2.4zM10.8 15.6h2.4V18h-2.4z'/%3E%3C/svg%3E");
  --ico-auf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316163a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== Gemeinsam: Felder ===================== */
:is(.offerte,.rechner) fieldset{border:0;margin:0;padding:0;min-inline-size:0}
:is(.offerte,.rechner) legend{padding:0}
:is(.offerte,.rechner) .feld{display:block;min-inline-size:0;margin:0}
:is(.offerte,.rechner) :is(.feld>label,.l){display:block;margin:0 0 6px;font:650 var(--step-sm)/1.35 var(--f);letter-spacing:0;color:var(--ink)}
:is(.offerte,.rechner) .stern{color:var(--red-dark);font-weight:700}
:is(.offerte,.rechner) :is(.feld input,.feld select,.feld textarea,.stepper input,.menge input){
  inline-size:100%;max-inline-size:100%;min-block-size:48px;margin:0;padding:11px 14px;
  font:400 1rem/1.4 var(--f);color:var(--ink);background-color:#fff;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:is(.offerte,.rechner) .feld textarea{min-block-size:120px;resize:vertical;line-height:1.5}
:is(.offerte,.rechner) .feld select{-webkit-appearance:none;appearance:none;padding-inline-end:44px;cursor:pointer;
  background:#fff var(--ico-auf) no-repeat right 14px center/18px 18px;text-overflow:ellipsis}
:is(.offerte,.rechner) .feld input[type="date"]{-webkit-appearance:none;appearance:none;min-block-size:48px;display:block}
:is(.offerte,.rechner) .feld input[type="date"]::-webkit-date-and-time-value{text-align:start;min-block-size:1.4em}
:is(.offerte,.rechner) :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
@media (hover:hover){
  :is(.offerte,.rechner) :is(.feld input,.feld select,.feld textarea,.stepper input,.menge input):hover{border-color:var(--navy-2)}
}
/* Fokus: Rand blau (8,1:1) plus weicher Ring; die transparente Kontur wird im Kontrastmodus sichtbar */
:is(.offerte,.rechner) :is(.feld input,.feld select,.feld textarea,.stepper input,.menge input):focus-visible{
  outline:2px solid transparent;outline-offset:2px;border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue),0 0 0 4px color-mix(in oklch,var(--blue) 22%,transparent)}
/* Fehler: Rahmen, Meldung mit Symbol (nicht nur Farbe) */
:is(.offerte,.rechner) :is(.feld input,.feld select,.feld textarea):is(:user-invalid,[aria-invalid="true"]){border-color:var(--red-dark)}
:is(.offerte,.rechner) :is(.feld input,.feld select,.feld textarea):is(:user-invalid,[aria-invalid="true"]):focus-visible{
  box-shadow:inset 0 0 0 1px var(--red-dark),0 0 0 4px color-mix(in oklch,var(--red-dark) 18%,transparent)}
:is(.offerte,.rechner) .fehler{display:none;gap:6px;align-items:flex-start;margin:6px 0 0;font:600 var(--step-sm)/1.4 var(--f);color:var(--red-dark)}
:is(.offerte,.rechner) .fehler::before{content:"";flex:none;inline-size:16px;block-size:16px;margin-top:1px;background:currentColor;
  -webkit-mask:var(--ico-fehler) center/contain no-repeat;mask:var(--ico-fehler) center/contain no-repeat}
:is(.offerte,.rechner) .feld.mit-fehler .fehler{display:flex}
:is(.offerte,.rechner) .feld:has([aria-invalid="true"]) .fehler{display:flex}
:is(.offerte,.rechner) .feld:has(:user-invalid) .fehler{display:flex}

/* ===================== Gemeinsam: Chips und Zahl-Knöpfe ===================== */
:is(.offerte,.rechner) .chips{display:flex;flex-wrap:wrap;gap:8px}
:is(.offerte,.rechner) :is(.chip,.zahlen label){position:relative;display:inline-flex;margin:0}
/* Das echte Feld liegt unsichtbar über dem ganzen Chip (Klick, Touch und Screenreader treffen es direkt) */
:is(.offerte,.rechner) :is(.chip,.zahlen) input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;pointer-events:auto;z-index:1}
:is(.offerte,.rechner) .chip span{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:8px 16px 8px 13px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:#fff;color:var(--ink);
  font:600 .9375rem/1.25 var(--f);cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
/* Symbol vorn: Plus = wählbar, Haken = gewählt (gleiche Breite, kein Springen beim Anklicken) */
:is(.offerte,.rechner) .chip span::before{content:"";flex:none;inline-size:14px;block-size:14px;background:currentColor;opacity:.75;
  -webkit-mask:var(--ico-plus) center/contain no-repeat;mask:var(--ico-plus) center/contain no-repeat}
:is(.offerte,.rechner) .chip.klein span{min-block-size:44px;padding:6px 14px 6px 11px;font-size:var(--step-sm)}
@media (hover:hover){
  :is(.offerte,.rechner) .chip:hover span{border-color:var(--navy);background:var(--bg-2)}
  :is(.offerte,.rechner) .zahlen label:hover span{border-color:var(--navy)}
}
:is(.offerte,.rechner) .chip input:checked+span{background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}
:is(.offerte,.rechner) .chip input:checked+span::before{opacity:1;-webkit-mask-image:var(--ico-check);mask-image:var(--ico-check)}
:is(.offerte,.rechner) .chip input:disabled+span{opacity:.45;cursor:not-allowed}
:is(.offerte,.rechner) :is(.chip,.zahlen) input:disabled{cursor:not-allowed}

:is(.offerte,.rechner) .zahlen{display:flex;flex-wrap:wrap;gap:6px}
:is(.offerte,.rechner) .zahlen span{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font:650 1.0625rem/1 var(--f);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
:is(.offerte,.rechner) .zahlen input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
:is(.offerte,.rechner) .zahlen input:disabled+span{opacity:.35;cursor:not-allowed;text-decoration:line-through;border-style:dashed}
:is(.offerte,.rechner) :is(.chip,.zahlen) input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
@media (forced-colors:active){
  :is(.offerte,.rechner) .chip span::before{forced-color-adjust:none;background:CanvasText}
  :is(.offerte,.rechner) :is(.chip,.zahlen) input:checked+span{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
  :is(.offerte,.rechner) .chip input:checked+span::before{background:HighlightText}
  :is(.offerte,.rechner) .fehler::before{forced-color-adjust:none;background:CanvasText}
}

/* Team-Auswahl (Formular und Rechner) */
:is(.offerte,.rechner) .team-wahl{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end}
:is(.offerte,.rechner) .team-bild{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;min-block-size:40px;margin:18px 0 6px}
:is(.offerte,.rechner) .team-bild :is(.leute,.wagen){display:inline-flex;gap:2px;align-items:flex-end}
:is(.offerte,.rechner) .team-bild svg{height:30px;width:auto;fill:var(--blue)}
:is(.offerte,.rechner) .team-bild .wagen svg{fill:var(--navy)}
:is(.offerte,.rechner) .team-bild .wagen svg[viewBox="0 0 26 24"]{fill:none;stroke:var(--navy);stroke-width:2.2}
:is(.offerte,.rechner) .team-preis{margin:6px 0 14px;font-size:var(--step-body);color:var(--text)}
:is(.offerte,.rechner) .team-preis-text{white-space:nowrap}
:is(.offerte,.rechner) .team-preis b{display:inline-block;font:750 1.375rem/1.2 var(--f);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ===================== Offertformular ===================== */
.offerte{container:offerte/inline-size;position:relative;max-width:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);padding:clamp(16px,.5rem + 2vw,36px)}
.alp-sec .wrap>.offerte,.alp-sec .wrap>.offerte-danke{max-width:860px}
.offerte .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.offerte .schritt>legend{float:left;width:100%;margin:0 0 6px;font:650 var(--step-h3)/1.25 var(--f);letter-spacing:-.015em;color:var(--ink)}
.offerte .schritt>legend+*{clear:both}
.offerte .hilfe{margin:0 0 14px;font-size:var(--step-sm);color:var(--muted)}
.offerte h3{margin:0 0 14px;font:650 var(--step-1)/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.offerte .block{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line-2)}
.offerte .gruppe>legend{float:left;width:100%}
.offerte .gruppe>legend+*{clear:both}
.offerte .hinweis-klein{font-size:var(--step-sm);color:var(--muted)}
.offerte .feld-halb{max-inline-size:420px}
.offerte .felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin:0}
.offerte .schritt[data-schritt="2"] .felder{margin-top:14px}
.offerte .feld.voll{grid-column:1 / -1;margin:0}

/* Adressen «Von» / «Nach»: untereinander, ab genügend breiter Formularspalte nebeneinander */
.offerte .adressen{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 22px}
.offerte .adresse{padding:18px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-2,#f7f8fa)}
.offerte .adresse[hidden]{display:none}
.offerte .adresse>legend{float:left;width:100%;margin:0 0 12px;font:650 var(--step-1,1.125rem)/1.3 var(--f);color:var(--ink)}
.offerte .adresse>legend+*{clear:both}
.offerte .adr-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 12px}
.offerte .adr-felder .voll{grid-column:1 / -1}
.offerte .adr-felder .halb{grid-column:span 1}
@container offerte-haupt (min-width:560px){
  .offerte .adressen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@supports not (container-type:inline-size){
  @media (min-width:700px){.offerte .adressen{grid-template-columns:repeat(2,minmax(0,1fr))}}
}
/* ohne JavaScript: «Nach» bei reiner Reinigung/Räumung ausblenden */
.offerte:not(.mit-js):has(input[name="leistungen[]"][value="reinigung"]:checked,input[name="leistungen[]"][value="entsorgung"]:checked):not(:has(input[name="leistungen[]"][value="umzug"]:checked,input[name="leistungen[]"][value="packen"]:checked,input[name="leistungen[]"][value="moebellift"]:checked,input[name="leistungen[]"][value="klavier"]:checked,input[name="leistungen[]"][value="lagerung"]:checked)) .adresse[data-adresse="nach"]{display:none}

/* Detail-Blöcke nur zur gewählten Leistung, auch ohne JavaScript (:has); das Skript setzt zusätzlich hidden */
.offerte:has(input[name="leistungen[]"][value="umzug"]:not(:checked)) [data-fuer="umzug"],
.offerte:has(input[name="leistungen[]"][value="packen"]:not(:checked)) [data-fuer="packen"],
.offerte:has(input[name="leistungen[]"][value="reinigung"]:not(:checked)) [data-fuer="reinigung"],
.offerte:has(input[name="leistungen[]"][value="klavier"]:not(:checked)) [data-fuer="klavier"]{display:none}

/* Fortschritt «Schritt 1 von 2» */
.offerte .fortschritt-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 24px}
.offerte .fortschritt-text{flex:1 1 auto;margin:0;font-size:var(--step-sm);line-height:1.4;color:var(--muted)}
.offerte .fortschritt-text b{color:var(--ink);font-weight:650;margin-inline-end:6px}
.offerte .fortschritt-text:focus{outline-offset:4px}
.offerte .pflicht-hinweis{margin:0 0 0 auto;font-size:var(--step-xs);color:var(--muted)}
.offerte .fortschritt{flex:1 1 100%;block-size:4px;background:var(--line);border-radius:2px;overflow:hidden}
.offerte .fortschritt i{display:block;block-size:100%;inline-size:var(--w,50%);background:var(--red);border-radius:inherit}
.offerte[data-aktiv="2"] .fortschritt i{--w:100%}
@media (prefers-reduced-motion:no-preference){.offerte .fortschritt i{transition:inline-size var(--t-slow) var(--ease-out)}}
@media (forced-colors:active){.offerte .fortschritt{border:1px solid CanvasText}.offerte .fortschritt i{forced-color-adjust:none;background:Highlight}}
.offerte .zurueck:not([hidden]){display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding:0 12px 0 6px;margin-inline-start:-6px;
  border:0;border-radius:var(--r-xs);background:none;color:var(--blue);font:650 var(--step-sm)/1 var(--f);cursor:pointer}
.offerte .zurueck:hover{text-decoration:underline;text-underline-offset:.22em}
.offerte .zurueck svg{inline-size:16px;block-size:16px;flex:none}
.offerte .zurueck-pfeil{transform:scaleX(-1)}

/* Knöpfe: Weiter und Absenden volle Breite */
.offerte .weiter{inline-size:100%;margin-top:28px}
.offerte .absenden{margin-top:24px}
.offerte .absenden .btn{inline-size:100%}
.offerte .anrufen{margin:14px 0 0;text-align:center;font-weight:600;color:var(--ink)}
.offerte .anrufen a{font-weight:700;white-space:nowrap}
.offerte .datenschutz{-webkit-hyphens:manual;hyphens:manual;margin:6px auto 0;max-inline-size:52ch;text-align:center;font-size:var(--step-sm);line-height:1.5;color:var(--muted)}
.offerte :is(.anrufen,.datenschutz) a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

/* «Ihre Auswahl»: rechts klebend (ab 1024 px und genug Platz im Formular), sonst als Zeile über dem Absenden-Knopf */
.offerte .auswahl{display:none}
.offerte .auswahl-titel{margin:0 0 10px;font:650 var(--step-1)/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.offerte .auswahl dl{margin:0}
.offerte .auswahl dl>div{padding:10px 0;border-top:1px solid var(--line-2)}
.offerte .auswahl dt{font-size:var(--step-xs);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.offerte .auswahl dd{margin:2px 0 0;color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.4;overflow-wrap:break-word}
.offerte .auswahl dd.preis{font-weight:750;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.offerte .auswahl-hinweis{margin:12px 0 0;font-size:var(--step-sm);line-height:1.5;color:var(--muted)}
.offerte .auswahl-zeile{margin:24px 0 0;padding:12px 16px;background:var(--bg-2);border-radius:var(--r-sm);font-size:var(--step-sm);line-height:1.45}
.offerte .auswahl-zeile .auswahl-titel{margin:0 0 4px;font-size:var(--step-sm)}
.offerte .auswahl-zeile dl{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0}
.offerte .auswahl-zeile dl>div{display:flex;flex-wrap:wrap;gap:0 4px;min-inline-size:0}
.offerte .auswahl-zeile dt{color:var(--muted);font-weight:600}
.offerte .auswahl-zeile dt::after{content:":"}
.offerte .auswahl-zeile dd{margin:0;color:var(--ink);font-weight:650;overflow-wrap:anywhere}
.offerte .auswahl-zeile dd.preis{font-variant-numeric:tabular-nums}

/* Ohne JavaScript: beide Schritte untereinander, keine Schritt-Knöpfe, keine Live-Anzeigen */
.offerte:not(.mit-js) :is(.fortschritt,.fortschritt-text,.zurueck,.weiter,.team-bild,.team-preis,.auswahl,.auswahl-zeile){display:none}
.offerte:not(.mit-js) .fortschritt-kopf{justify-content:flex-end;margin-bottom:8px}
.offerte:not(.mit-js) .schritt[data-schritt="2"]{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-2)}

/* Schmale Spalte (Handy, oder neben der Zusammenfassung): Felder untereinander. Gemessen wird die Formularspalte,
   nicht das Fenster, damit das Formular im Hero, im Abschnitt und auf dem Handy passt. */
.offerte .offerte-haupt{container:offerte-haupt/inline-size;min-inline-size:0}
@container offerte-haupt (max-width:439.98px){
  .offerte .felder{grid-template-columns:minmax(0,1fr)}
  .offerte .feld-halb{max-inline-size:none}
  .offerte .team-wahl{gap:16px 20px}
}
@container offerte-haupt (max-width:339.98px){
  .offerte :is(.weiter,.absenden .btn){padding-inline:12px}
}
@supports not (container-type:inline-size){
  @media (max-width:599.98px){.offerte .felder{grid-template-columns:minmax(0,1fr)}}
}
@media (max-width:419.98px){
  :is(.offerte,.rechner) .zahlen{gap:4px}
}

/* Ab 1024 px und genug Platz im Formular: Zusammenfassung rechts klebend */
@media (min-width:1024px){
  .alp-sec .wrap>.offerte.mit-js{max-width:none}
  @container offerte (min-width:600px){
    .offerte.mit-js .offerte-raster{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,30cqi,300px);column-gap:clamp(24px,4cqi,44px);align-items:start}
    .offerte.mit-js .auswahl{display:block;position:sticky;top:calc(var(--kopf-h) + 24px);padding:clamp(16px,2cqi,22px);background:var(--bg-2);border-radius:var(--r-md)}
    .offerte.mit-js .auswahl-zeile{display:none}
  }
}
/* «Klebend» braucht Vorfahren ohne Scroll-Container: overflow:hidden des Heros wirkt als clip (sieht gleich aus) */
.hero:has(.offerte,.rechner){overflow:clip}

/* Danke-Box nach dem Absenden */
.offerte-danke{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(16px,.5rem + 2vw,32px)}
.offerte-danke h2{font-size:var(--step-h3);max-width:none}
.offerte-danke .knopf{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}

/* ===================== Umzugskosten-Rechner ===================== */
.rechner[hidden],.rechner [hidden]{display:none!important}
.alp-sec .wrap>.rechner{max-width:none}
.rechner{display:block;container:rechner/inline-size;margin:8px 0 14px;text-align:left}
.rechner-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.rechner-eingabe,.rechner-ergebnis{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:clamp(16px,.5rem + 2vw,32px)}
.rechner-ergebnis{border-top:4px solid var(--coral);position:static;scroll-margin-top:calc(var(--kopf-h) + 24px)}
.rechner-ergebnis:focus{outline:none}
.rechner-ergebnis:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.rechner .nw{white-space:nowrap}
.rechner-teil>legend,.rechner .titel{display:block;margin:0 0 12px;font:650 var(--step-1)/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.rechner-teil>legend{float:left;width:100%}
.rechner-teil>legend+*{clear:both}
.rechner-teil>legend small{font-size:var(--step-sm);font-weight:500;letter-spacing:0;color:var(--muted)}
.rechner-teil+.rechner-teil{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-2)}
.rechner .gruppe>legend{float:left;width:100%}
.rechner .gruppe>legend+*{clear:both}
.rechner .hilfe{margin:10px 0 0;font-size:var(--step-sm);line-height:1.5;color:var(--muted)}
.rechner .team-preis{margin:6px 0 0}
.rechner [data-ansatz] span,.rechner-aufstellung span{white-space:nowrap}

/* Stepper: Minus/Plus in Navy, Feld in der Mitte */
.rechner .stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rechner .stepper button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--navy);border-radius:var(--r-sm);
  background:#fff;color:var(--navy);font:650 1.375rem/1 var(--f);cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.rechner .stepper button:hover{background:var(--navy);color:#fff}
.rechner :is(.stepper,.menge) input{inline-size:88px;block-size:48px;min-block-size:48px;padding:0 8px;text-align:center;
  font:700 1.125rem/1 var(--f);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.rechner .einheit{font-weight:600;color:var(--ink)}
.rechner .meldung{margin:8px 0 0;font-size:var(--step-sm);font-weight:600;line-height:1.45;color:var(--red-dark)}
.rechner .meldung:empty{display:none}
.rechner .menge .meldung{grid-column:1 / -1;margin:0}

/* Zusatz-Blöcke */
.rechner-block{margin-top:16px;padding:16px 18px;background:var(--bg-2);border-radius:var(--r-md)}
.rechner-block .titel{margin-bottom:10px;font-size:var(--step-body)}
.rechner .rechner-block>label.l,.rechner [data-lift-std]{margin-top:16px}
.rechner .menge{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0}
.rechner .menge label{font-weight:600;color:var(--ink);line-height:1.35}
.rechner .menge small{display:block;font-size:var(--step-sm);font-weight:400;color:var(--muted)}
.rechner .haken{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:.9688rem;line-height:1.45;color:var(--ink);cursor:pointer}
.rechner .haken input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.rechner .einsatz .haken:first-of-type{padding-top:5px}

/* Ergebnis */
.rechner-ergebnis h3{margin:0 0 10px;font:650 var(--step-h3)/1.25 var(--f);letter-spacing:-.015em}
.rechner .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rechner-aufstellung{width:100%;margin:0;border-collapse:collapse;font-size:.9375rem}
.rechner-aufstellung th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;font-weight:600;line-height:1.4;color:var(--ink)}
.rechner-aufstellung th small{display:block;margin-top:2px;font-size:.8438rem;font-weight:400;color:var(--muted)}
.rechner-aufstellung td{padding:10px 0;border-bottom:1px solid var(--line-2);text-align:right;vertical-align:top;white-space:nowrap;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rechner-summe .total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 6px;font-weight:650;font-size:var(--step-1);color:var(--ink)}
.rechner-summe .total b{font:750 1.75rem/1.1 var(--f);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.rechner-summe .anfrage{margin:14px 0 6px;padding:12px 14px;background:var(--blue-soft);border-radius:var(--r-sm);font-size:.9688rem;color:var(--ink)}
.rechner-summe .anfrage a{text-decoration:underline;text-underline-offset:.22em}
.rechner-ergebnis .hinweis{margin:8px 0 0;font-size:var(--step-sm);line-height:1.5;color:var(--muted)}
.rechner-ergebnis .btn{inline-size:100%;margin-top:18px;white-space:normal}

/* Schmale Leiste «Ihr Richtwert», solange das Ergebnis unter den Eingaben steht */
.rechner-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;bottom:12px;z-index:5;min-block-size:56px;margin:24px 0 0;
  padding:10px 16px;border-radius:var(--r-md);background:var(--navy);color:#fff;font-weight:650;text-decoration:none!important;box-shadow:var(--shadow-md)}
.rechner-mini small{display:block;font-size:.7813rem;font-weight:600;opacity:.85}
.rechner-mini b{font-size:1.1875rem;font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.rechner-mini:hover{color:#fff;background:var(--navy-2)}
@media (max-width:759.98px){
  .rechner-mini{bottom:calc(var(--mbar-h,64px) + env(safe-area-inset-bottom) + 12px)}
  .rechner-block{padding:14px}
  .rechner-summe .total b{font-size:1.5rem}
}
/* Sehr schmal (360 px): weniger Innenabstand, damit Auswahllisten mit Preis nicht abgeschnitten werden */
@container rechner (max-width:359.98px){
  .rechner-eingabe{padding:16px 12px}
  .rechner-block{padding:12px 10px}
  .rechner :is(.stepper,.menge) input{inline-size:72px}
}
:is(.offerte,.rechner) .feld select{padding-inline-start:12px;padding-inline-end:40px;background-position:right 12px center}

/* Ab 1024 px und genug Platz (Container): Ergebnis rechts, klebend, wenn das Fenster hoch genug ist */
@media (min-width:1024px){
  @container rechner (min-width:760px){
    .rechner-raster{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:28px}
    .rechner-mini{display:none}
  }
}
@media (min-width:1024px) and (min-height:800px){
  @container rechner (min-width:760px){
    .rechner-ergebnis{position:sticky;top:calc(var(--kopf-h) + 24px)}
  }
}
@media print{
  .rechner-mini,.offerte .absenden .btn,.offerte .weiter{display:none}
}

/* ===================== Offertformular: Schritt 1 im Raster, Handy randlos (18.10.2026) =====================
   .s1-raster: Leistungen, Team, Packteam, Reinigung als Blöcke; ab 640 px Formularspalte zwei Spalten nebeneinander
   (Leistungen | Team), Adressen darunter über die ganze Spalte mit «Von» | «Nach» (nur Strasse, PLZ, Ort, Stockwerk, Lift). */
.offerte .sr{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.offerte .s1-raster>.block:first-child{margin-top:0;padding-top:0;border-top:0}
.offerte .block-titel{float:left;width:100%;margin:0 0 4px;font:650 var(--step-1)/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.offerte .block-titel+*{clear:both}
.offerte .s1-leistungen .hilfe{margin-bottom:12px}
.offerte .s1-raster>[hidden]{display:none}

@container offerte-haupt (min-width:640px){
  .offerte .s1-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:28px clamp(24px,5cqi,48px);align-items:start}
  .offerte .s1-raster>.block{margin:0;padding:0;border:0}
  .offerte .s1-raster>:is(.s1-adressen,.hinweis-klein){grid-column:1 / -1}
  .offerte .s1-raster>.s1-adressen{padding-top:24px;border-top:1px solid var(--line-2)}
  .offerte .s1-raster .feld-halb{max-inline-size:none}
  .offerte .s1-team .team-bild{margin-top:14px}
  .offerte .adressen{gap:20px clamp(16px,3cqi,28px)}
  .offerte .weiter{display:flex;inline-size:auto;min-inline-size:min(100%,360px);margin-inline-start:auto}
  .offerte .schritt[data-schritt="2"] .felder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container offerte-haupt (min-width:880px){
  .offerte .schritt[data-schritt="2"] .absenden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 28px;align-items:center}
  .offerte .schritt[data-schritt="2"] .absenden .btn{grid-row:span 2}
  .offerte .schritt[data-schritt="2"] .absenden :is(.anrufen,.datenschutz){margin:0;text-align:start;max-inline-size:none}
}

/* Handy und schmale Formularspalte: alles untereinander, Chips in zwei Spalten, Zahl-Knöpfe über die ganze Breite */
@container offerte-haupt (max-width:639.98px){
  .offerte .block{margin-top:22px;padding-top:20px}
  .offerte .fortschritt-kopf{margin-bottom:18px}
}
@container offerte-haupt (max-width:479.98px){
  .offerte .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .offerte .chips .chip{display:flex}
  .offerte .chips .chip span{inline-size:100%;min-block-size:48px;padding:8px 10px 8px 12px;text-wrap:balance}
  .offerte .team-wahl{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .offerte .team-wahl .chip.klein{justify-self:start}
  .offerte .zahlen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .offerte .zahlen label{display:block}
  .offerte .zahlen span{inline-size:100%;block-size:48px}
  .offerte .adresse{padding:14px}
  .offerte .team-preis-text{white-space:normal}
}
@container offerte-haupt (max-width:359.98px){
  .offerte .chips .chip span{padding-inline:8px 8px;gap:6px;font-size:.875rem}
}

/* ===================== Möbellift-Formular (inc/moebellift.php) und Möbellift-Paket im Offertformular ===================== */
.alp-sec .wrap>.offerte.ml-form,.alp-sec .wrap>.offerte.ml-form.mit-js,.alp-sec .wrap>.ml-danke{max-width:760px;margin-inline:auto}
.ml-form{scroll-margin-top:calc(var(--kopf-h) + 16px)}
.ml-danke{scroll-margin-top:calc(var(--kopf-h) + 16px)}
.ml-form .ml-paket-feld{margin:14px 0 24px}
.ml-form .ml-paket-chips{gap:10px}
.ml-form .chip span{min-block-size:48px}
.ml-form .ml-chip-preis{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.ml-form .ml-paket-feld .l{display:block;margin:0 0 8px}
.ml-form .gruppe>legend{float:left;width:100%}
.ml-form .gruppe>legend+*{clear:both}
.ml-form .ml-felder{margin-top:0}
.ml-form .ml-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
.ml-form .ml-paket-feld.mit-fehler .fehler{display:flex}
.ml-form .ml-paket-feld.mit-fehler .chip span{border-color:var(--red-dark)}
@container offerte-haupt (max-width:439.98px){
  .ml-form .ml-felder{grid-template-columns:minmax(0,1fr)}
}
/* ohne JavaScript: Möbellift-Block im Offertformular nur bei gewähltem Chip */
.offerte:has(input[name="leistungen[]"][value="moebellift"]:not(:checked)) [data-fuer="moebellift"]{display:none}
.ml-form:not(.mit-js) .fortschritt-kopf{justify-content:flex-end}
.ml-form:not(.mit-js) .weiter{display:none}
.ml-form:not(.mit-js) .schritt[data-schritt="2"]{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-2)}
.offerte.ml-form,.ml-danke{max-width:760px;margin-inline:auto}
.offerte.ml-form.mit-js .auswahl-zeile{display:block}
/* Paket-Auswahl: auf schmalen Spalten untereinander, volle Breite, Preis nie abgeschnitten */
@container offerte-haupt (max-width:519.98px){
  .offerte.ml-form .ml-paket-chips{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .offerte.ml-form .ml-paket-chips .chip{display:flex}
  .offerte.ml-form .ml-paket-chips .chip span{inline-size:100%;justify-content:flex-start;padding:8px 14px;font-size:.9375rem}
  .offerte.ml-form .ml-chip-preis{margin-inline-start:auto}
}