/* ==========================================================================
   felker-media.de · formulare.css · Agent P2
   Formulare A (Entwurf), B (Preisrechner), C (Kontakt) und die Seiten
   /preise/, /kostenloser-entwurf/, /website-check/. Wird nach site.css geladen.

   KOMPONENTEN
     .feld-reihe            zwei Felder nebeneinander (mobil untereinander)
     fieldset.feld          Gruppe mit <legend class="feld-label">
     select.feld-eingabe    Auswahlliste im Feld-Stil
     .option                wählbare Kachel (Checkbox/Radio darin), --kompakt für Pillen-Reihen
     .optionen-reihe        Reihe kompakter Optionen
     .upload                Datei-Feld: .upload-flaeche (echtes input[type=file] liegt darüber),
                            .upload-liste mit Vorschau und Entfernen (Logik formular.js)
     .formular-status       Platz für Fehler-, Vorschau- und Erfolgsmeldung (formular.js)
     .formular-danke        Bestätigung nach dem Senden
     .knopf.laedt           Ladezustand am Button
     .rechner …             Preisrechner (preisrechner.js): Fenster, Schritte, Summe
     .seitenkopf-raster     Einstieg der Unterseiten mit Bühne für Artefakte (.sk-buehne)
   ========================================================================== */

:root{
  --schatten-karte:0 40px 80px -36px rgba(17,18,19,.42),0 10px 24px -14px rgba(17,18,19,.25);
  --option-rand:#BFC4CA;
  --option-an:#F3F6FF;
  --rechner-summe-breite:380px;
  --sk-buehne-hoehe:440px;
}

/* ---------- Formular-Grundteile ---------- */
fieldset.feld{border:0;margin:0;padding:0;min-width:0}
fieldset.feld > legend{padding:0;margin-bottom:10px}
.feld-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feld-reihe > .feld + .feld{margin-top:0}
.feld + .feld-reihe,.feld-reihe + .feld,.feld-reihe + .feld-reihe,fieldset.feld + .feld,.feld + fieldset.feld{margin-top:18px}
select.feld-eingabe{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111213' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.feld-eingabe[type="number"]{-moz-appearance:textfield}
.feld-eingabe::-webkit-inner-spin-button{-webkit-appearance:none}
.wahlfeld a{color:var(--kobalt-tief);text-decoration-color:rgba(29,61,184,.4)}
.wahlfeld a:hover{text-decoration-color:currentColor}

/* ---------- Option (wählbare Kachel) ---------- */
.option{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid var(--option-rand);border-radius:14px;background:#fff;cursor:pointer;font-weight:500;line-height:1.35;transition:border-color .2s,background-color .25s var(--aus),box-shadow .35s var(--aus),transform .35s var(--aus)}
.option:hover{border-color:#8E949B}
.option:active{transform:translateY(1px)}
.option input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid #8E949B;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.option input[type="radio"]{border-radius:50%}
.option input::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s var(--aus)}
.option input[type="radio"]::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:scale(0)}
.option input:checked{background:var(--kobalt);border-color:var(--kobalt)}
.option input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.option input[type="radio"]:checked::after{transform:scale(1)}
.option input:focus-visible{outline:2px solid var(--kobalt);outline-offset:3px}
.option:has(input:checked){border-color:var(--kobalt);background:var(--option-an);box-shadow:inset 0 0 0 1px var(--kobalt),0 16px 28px -20px rgba(29,61,184,.6)}
.option:has(input:disabled){opacity:.45;cursor:not-allowed}
.option:has(input:disabled) input{cursor:not-allowed}
.option-text{display:grid;gap:3px;min-width:0}
.option-name{font-weight:600;color:var(--tinte)}
.option-preis{font-family:var(--mono);font-weight:500;font-size:.84rem;color:var(--leise-hell);font-variant-numeric:tabular-nums}
.option-preis--anfrage{font-family:var(--text);font-size:.88rem}
.option-paket{font-family:var(--text);font-size:.88rem}
.option:has(input:checked) .option-preis{color:var(--kobalt-tief)}
.option--kompakt{padding:10px 14px 10px 12px;border-radius:12px;align-items:center;gap:10px}
.option--kompakt input{width:20px;height:20px}
.optionen-reihe{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Upload ---------- */
.upload-flaeche{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border:1.5px dashed #9AA0A6;border-radius:14px;background:#FAFBFC;transition:border-color .2s,background-color .25s var(--aus)}
.upload-flaeche:hover,.upload-flaeche.ueber{border-color:var(--kobalt);background:var(--option-an)}
.upload-flaeche:focus-within{outline:2px solid var(--kobalt);outline-offset:2px;border-color:var(--kobalt)}
.upload-eingabe{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.upload-zeichen{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;color:var(--kobalt-tief);box-shadow:0 8px 16px -10px rgba(17,18,19,.35)}
.upload-zeichen .ico{width:20px;height:20px}
.upload-text{font-size:.98rem;color:var(--tinte-2);pointer-events:none}
.upload-text b{font-weight:600;color:var(--kobalt-tief);text-decoration:underline;text-decoration-color:rgba(29,61,184,.35);text-underline-offset:.22em}
.upload-zaehler{margin-left:auto;font-size:.82rem;color:var(--leise-hell);pointer-events:none}
.feld--fehler .upload-flaeche{border-color:var(--rot);background:#FFFBFA}
.upload-liste{display:grid;gap:8px}
.upload-liste:empty{display:none}
.upload-liste--bilder{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.upload-datei{position:relative;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;border-radius:12px;background:#fff;border:1px solid var(--silber);animation:datei-rein .45s var(--aus)}
.upload-liste--bilder .upload-datei{flex-direction:column;align-items:stretch;padding:6px}
.upload-bild{width:48px;height:48px;border-radius:8px;background:var(--hell);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--leise-hell);font-family:var(--mono);font-size:.68rem;text-transform:uppercase}
.upload-bild img{width:100%;height:100%;object-fit:cover}
.upload-bild .ico{width:20px;height:20px}
.upload-liste--bilder .upload-bild{width:100%;height:auto;aspect-ratio:4/3}
.upload-info{display:grid;min-width:0;flex:1;padding-right:34px}
.upload-liste--bilder .upload-info{padding:2px 4px 2px}
.upload-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upload-groesse{font-size:.76rem;color:var(--leise-hell)}
.upload-weg{position:absolute;right:8px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:9px;border:1px solid var(--silber);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--tinte);transition:background-color .2s,border-color .2s}
.upload-liste--bilder .upload-weg{top:12px;right:12px;margin:0;box-shadow:0 6px 14px -6px rgba(17,18,19,.45)}
.upload-weg:hover{border-color:var(--tinte);background:var(--hell)}
.upload-weg .ico{width:16px;height:16px}
@keyframes datei-rein{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Status, Laden, Bestätigung ---------- */
.formular-status:empty{display:none}
.formular-status{margin-top:20px}
.formular-status .hinweisbox{font-size:.95rem}
.knopf.laedt{position:relative;color:transparent !important;pointer-events:none}
.knopf.laedt .ico{opacity:0}
.knopf.laedt::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:drehen .75s linear infinite}
.knopf--linie.laedt::after{border-color:rgba(17,18,19,.25);border-top-color:var(--tinte)}
.formular-danke{border-radius:24px;padding:32px;background:#fff;box-shadow:var(--schatten-karte);display:grid;gap:14px;outline:none;animation:datei-rein .6s var(--aus)}
.formular-danke .danke-zeichen{width:52px;height:52px;border-radius:50%;background:var(--gruen-tief);color:#fff;display:grid;place-items:center}
.formular-danke .danke-zeichen .ico{width:26px;height:26px;stroke-width:2.2}
.formular-danke h3{font-size:clamp(1.6rem,2.6vw,2.2rem);text-transform:none;font-family:var(--kopf);letter-spacing:0}
.formular-danke p{color:#2E3237;max-width:60ch}

/* ---------- Unterseiten-Einstieg mit Bühne ---------- */
.seitenkopf-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.seitenkopf-text{position:relative;z-index:2}
.sk-buehne{position:relative;height:var(--sk-buehne-hoehe)}
.sk-buehne .artefakt{position:absolute}
.bew .sk-buehne .artefakt{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--d,1) * 70px),0)}
/* Preise: Beleg */
.beleg{left:6%;top:12%;width:min(340px,92%);padding:18px 20px 20px}
.beleg-posten{margin:14px 0 0;display:grid}
.beleg-posten div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #ECEEF1;font-size:.9rem}
.beleg-posten dt{color:var(--tinte-2)}
.beleg-posten dd{margin:0;font-weight:500;white-space:nowrap}
.beleg-leise dd{font-family:var(--text);color:var(--leise-hell);font-size:.84rem}
.beleg-summe{margin-top:10px;padding-top:12px;border-top:1.5px solid var(--tinte);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.beleg-summe span{font-size:.86rem;font-weight:600;color:var(--leise-hell)}
.beleg-summe b{font-family:var(--kopf);font-weight:800;font-size:2.6rem;line-height:.9;font-variant-numeric:tabular-nums}
.beleg-monat{right:0;bottom:0;width:250px}
.beleg-monat b{font-family:var(--kopf);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:0}
.beleg-monat p+p{margin-top:6px}
.beleg-stufen{right:2%;top:0;width:200px}
.beleg-stufen .stufenleiste{margin-top:8px}
/* Entwurf: Handy mit Beispiel */
.sk-buehne--entwurf{display:flex;justify-content:center;align-items:center;height:calc(var(--sk-buehne-hoehe) + 60px)}
.sk-handy{z-index:2}
.sk-etikett{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:4;background:#fff;color:var(--tinte);box-shadow:0 10px 22px -10px rgba(17,18,19,.5)}
.sk-art{z-index:3;width:230px}
.sk-art--formular{left:-2%;top:46%;display:grid;gap:7px}
.sk-art--link{right:-4%;top:10%}
.mini-eingabe{display:block;min-height:30px;border-radius:8px;border:1px solid #D5D9DE;background:#F7F8F9;padding:5px 10px;font-size:.82rem;font-weight:500;color:var(--tinte-2)}
.mini-eingabe--leer{background:#fff;position:relative}
.mini-eingabe--leer::after{content:"";position:absolute;left:10px;top:7px;width:1.5px;height:15px;background:var(--kobalt);animation:blinken 1.1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.sk-link{margin-top:10px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.sk-link .ico{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--nacht);color:#fff;flex:none}

/* ---------- Preise: Pakete-Ergänzung ---------- */
.paket-passt{margin-top:22px;font-weight:500;font-size:1.02rem;line-height:1.45;max-width:40ch;padding-top:18px;border-top:1px solid var(--silber)}
.paket--pro .paket-passt{border-top-color:rgba(255,255,255,.28)}
.paket-passt + .haken-liste{margin-top:22px}

/* ---------- Preise: Was nicht enthalten ist ---------- */
.nicht-enthalten{margin-top:0}
.nicht-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.nicht-text h2{max-width:12ch}
.nicht-text .lead{margin-top:20px;color:var(--leise-hell);font-weight:500}
.nicht-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nicht-liste li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#fff;font-weight:600;line-height:1.3;box-shadow:0 14px 26px -20px rgba(17,18,19,.45),0 1px 2px rgba(17,18,19,.06)}
.nicht-zeichen{width:30px;height:30px;border-radius:50%;border:1.5px dashed #8E949B;display:grid;place-items:center;flex:none;color:var(--tinte-2)}
.nicht-zeichen .ico{width:14px;height:14px;stroke-width:2}

/* ---------- Preise: Zusatzleistungen ---------- */
.zusatzleistungen h2{max-width:14ch}
.tabelle-rahmen{margin-top:48px;border-radius:var(--radius);border:1px solid var(--silber);overflow:hidden;background:#fff}
.preistabelle{width:100%;border-collapse:collapse;font-size:1rem}
.preistabelle thead th{text-align:left;font-size:.86rem;font-weight:600;color:var(--leise-hell);padding:16px 24px;border-bottom:1px solid var(--silber);background:#FAFBFC}
.preistabelle thead th:last-child{text-align:right}
.preistabelle tbody th,.preistabelle tbody td{padding:16px 24px;border-top:1px solid #E6E8EB;vertical-align:top;text-align:left}
.preistabelle tbody tr:not(.pt-gruppe) th{font-weight:600;width:32%}
.preistabelle td{color:#2E3237}
.preistabelle tr.pt-gruppe th{padding:22px 24px 10px;border-top:0;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;color:var(--tinte)}
.preistabelle tbody + tbody tr.pt-gruppe th{border-top:1px solid var(--silber)}
.pt-preis{text-align:right !important;white-space:nowrap;color:var(--leise-hell) !important;font-weight:500;width:18%}
.pt-preis b{font-family:var(--kopf);font-weight:800;font-size:1.7rem;line-height:1;color:var(--tinte);letter-spacing:0}
.pt-preis span{display:block;font-size:.84rem;margin-top:3px}
.preistabelle tbody tr:not(.pt-gruppe):hover{background:#FAFBFC}

/* ---------- Preise: Erstes Jahr ---------- */
.jahr{margin-top:0}
.jahr-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.jahr-text h2{color:#EEF0F2;max-width:13ch}
.jahr-text .lead{margin-top:20px;color:#C9CDD2}
.jahr-eigen{margin-top:28px;display:flex;gap:14px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--linie);color:#C9CDD2;max-width:56ch}
.jahr-eigen .ico{width:22px;height:22px;margin-top:2px;color:#EEF0F2}
.jahr-beleg{background:#fff;color:var(--tinte);border-radius:22px;padding:10px 28px;box-shadow:0 50px 80px -30px rgba(0,0,0,.65),0 10px 24px -12px rgba(0,0,0,.35);transform:rotate(-1.2deg)}
.bew .jahr-beleg{transform:rotate(-1.2deg) translate3d(0,calc((.5 - var(--p,.5)) * 40px),0)}
.jahr-beleg dl{margin:0}
.jahr-beleg dl > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:20px 0;border-top:1px dashed var(--silber-2)}
.jahr-beleg dl > div:first-child{border-top:0}
.jahr-beleg dt{font-weight:600}
.jahr-beleg dd{margin:0;text-align:right;color:var(--leise-hell);font-weight:500}
.jahr-beleg dd b{font-family:var(--kopf);font-weight:800;font-size:1.45rem;color:var(--tinte);letter-spacing:0}

/* ==========================================================================
   PREISRECHNER (preisrechner.js)
   ========================================================================== */
.rechner-abschnitt{margin-top:var(--rand)}
.rechner-abschnitt > .panel{padding:clamp(80px,11vh,120px) 0}
.licht--rechner{background:radial-gradient(ellipse 60% 70% at 82% 56%,#2F5BF0 0%,#4A71F2 16%,#7F99F2 36%,#B7C5F0 56%,#DCE2F0 76%,#EEF0F2 92%)}
.rechner-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:end}
.rechner-kopf h2{max-width:13ch;color:var(--nacht)}
.rechner-kopf .lead{color:#16181B;justify-self:end;max-width:44ch}
.rechner{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) var(--rechner-summe-breite);gap:20px;align-items:start}
.rechner-fenster{position:relative;background:#fff;border-radius:24px;box-shadow:var(--schatten-karte);min-width:0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.rechner-leiste{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px;border-bottom:1px solid #E6E8EB}
.rechner-leiste .mono{font-size:.85rem;color:var(--tinte-2);white-space:nowrap}
.rechner-leiste .stufenleiste{flex:1;max-width:300px}
.rechner--js .rechner-leiste .mono{display:none}
.rechner--js .rechner-leiste .stufenleiste{max-width:none}
.rechner-leiste .stufenleiste i{height:5px;transition:background-color .45s var(--aus)}
.rechner-leiste .stufenleiste i.jetzt{background:var(--nacht)}
.rechner-schritte{padding:32px 32px 4px}
.rechner-schritt{border:0;margin:0;padding:0;min-width:0}
.rechner-schritt + .rechner-schritt{margin-top:44px;padding-top:40px;border-top:1px dashed var(--silber-2)}
.rechner-schritt > legend{padding:0;margin-bottom:24px;display:grid;gap:8px;width:100%;outline:none}
.rechner-nr{font-size:.82rem;color:var(--leise-hell)}
.rechner-frage{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.1vw,2.7rem);line-height:.95;letter-spacing:-.005em;color:var(--tinte);text-wrap:balance}
.rechner-hinweis{font-size:.95rem;font-weight:500;color:var(--leise-hell)}
.rechner-optionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rechner-optionen--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.rechner-optionen--drei .option{flex-direction:column;gap:22px;padding:18px}
.rechner-optionen--drei .option-name{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1}
.rechner-feld{max-width:560px}
.rechner-feld .feld-eingabe{min-height:58px;font-size:1.08rem;font-weight:500}
.rechner-untergruppe{border:0;margin:0;padding:0;min-width:0}
.rechner-untergruppe + .rechner-untergruppe{margin-top:24px}
.rechner-untergruppe > legend{padding:0;margin-bottom:10px;font-weight:600;font-size:.95rem}
.rechner-untergruppe > legend span{font-weight:500;color:var(--leise-hell)}
.rechner-nichts{margin-top:24px;padding-top:20px;border-top:1px solid #E6E8EB}
/* Zusätzliche Seiten: Anzahl */
.option--anzahl{padding:0;display:flex;align-items:stretch;flex-wrap:wrap;cursor:default}
.option-klick{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;flex:1;min-width:0;cursor:pointer}
.anzahl{display:flex;align-items:center;gap:4px;padding:8px 10px 8px 0}
.anzahl-knopf{width:36px;height:36px;border-radius:10px;border:1px solid var(--silber-2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--tinte);transition:background-color .2s,border-color .2s}
.anzahl-knopf:hover{border-color:var(--tinte)}
.anzahl-knopf .ico{width:16px;height:16px}
.anzahl-wert{width:44px;height:36px;border:0;background:transparent;text-align:center;font-size:1rem;color:var(--tinte);-moz-appearance:textfield}
.anzahl-wert::-webkit-inner-spin-button,.anzahl-wert::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Stil-Kacheln mit kleiner Skizze */
.rechner-optionen--stil{grid-template-columns:repeat(3,minmax(0,1fr))}
.option--stil{flex-wrap:wrap;align-content:flex-start}
.option--stil input{order:2}
.option--stil .option-text{order:3;flex:1}
.stil-bild{order:1;flex:0 0 100%;position:relative;height:74px;border-radius:9px;overflow:hidden;background:#F4F5F7;border:1px solid #E6E8EB}
.stil-bild i{position:absolute;display:block}
.stil-bild--ruhig{background:#FBFBFC}
.stil-bild--ruhig i:nth-child(1){left:14%;top:28%;width:38%;height:6px;border-radius:3px;background:#3A3F45}
.stil-bild--ruhig i:nth-child(2){left:14%;top:46%;width:56%;height:4px;border-radius:2px;background:#D5D9DE}
.stil-bild--ruhig i:nth-child(3){left:14%;top:58%;width:44%;height:4px;border-radius:2px;background:#D5D9DE}
.stil-bild--modern{background:#0F1A3D}
.stil-bild--modern i:nth-child(1){right:-12%;top:-30%;width:70%;height:150%;border-radius:50%;background:radial-gradient(closest-side,#4A71F2,rgba(47,91,240,0))}
.stil-bild--modern i:nth-child(2){left:12%;top:32%;width:42%;height:9px;border-radius:5px;background:#fff}
.stil-bild--modern i:nth-child(3){left:12%;top:56%;width:24%;height:12px;border-radius:6px;background:#2F5BF0}
.option:hover .stil-bild--modern i:nth-child(1){transform:translateX(-8%);transition:transform .8s var(--aus)}
.stil-bild--hochwertig{background:#151617}
.stil-bild--hochwertig i:nth-child(1){left:50%;top:30%;width:46%;height:1px;margin-left:-23%;background:#C9CDD2}
.stil-bild--hochwertig i:nth-child(2){left:50%;top:44%;width:30%;height:7px;margin-left:-15%;border-radius:1px;background:#EEF0F2}
.stil-bild--hochwertig i:nth-child(3){left:50%;top:64%;width:46%;height:1px;margin-left:-23%;background:#5C6168}
.stil-bild--mutig{background:#F1E8D8}
.stil-bild--mutig i:nth-child(1){left:-6%;top:12%;width:58%;height:30px;background:#111213;transform:rotate(-6deg)}
.stil-bild--mutig i:nth-child(2){right:10%;top:22%;width:34px;height:34px;border-radius:50%;background:#2F5BF0}
.stil-bild--mutig i:nth-child(3){left:12%;bottom:12%;width:44%;height:6px;background:#111213}
.stil-bild--klassisch{background:#F7F5F0}
.stil-bild--klassisch i:nth-child(1){left:50%;top:20%;width:30%;height:8px;margin-left:-15%;border-radius:1px;background:#2B2F36}
.stil-bild--klassisch i:nth-child(2){left:50%;top:44%;width:56%;height:3px;margin-left:-28%;background:#9AA0A6}
.stil-bild--klassisch i:nth-child(3){left:12%;right:12%;bottom:16%;height:5px;border-top:1px solid #2B2F36;border-bottom:1px solid #2B2F36}
.stil-bild--offen{background:repeating-linear-gradient(135deg,#F4F5F7 0 8px,#ECEEF1 8px 16px)}
.stil-bild--offen i{display:none}
/* Ergebnis (Schritt 7) */
.rechner-ergebnis{display:grid;gap:10px;padding:22px 24px;border-radius:18px;background:var(--hell);margin-bottom:28px}
.rechner-ergebnis p{font-size:1.08rem;line-height:1.5}
.rechner-ergebnis strong{font-weight:700}
.rechner-klein{font-size:.93rem !important;color:var(--leise-hell)}
.rechner-nav{display:flex;align-items:center;gap:12px;padding:24px 32px 30px}
.rechner-nav [data-weiter],.rechner-nav [data-senden]{margin-left:auto}
.rechner-nav [data-zurueck]{min-width:120px}
/* Schritte nur mit JS einzeln */
.rechner--js .rechner-schritt{display:none}
.rechner--js .rechner-schritt.an{display:block}
.rechner--js .rechner-schritt + .rechner-schritt{margin-top:0;padding-top:0;border-top:0}
.rechner--js .rechner-schritt.rein-vor{animation:schritt-vor .55s var(--aus)}
.rechner--js .rechner-schritt.rein-zurueck{animation:schritt-zurueck .55s var(--aus)}
@keyframes schritt-vor{from{opacity:0;transform:translate3d(28px,0,0);clip-path:inset(0 0 0 6%)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes schritt-zurueck{from{opacity:0;transform:translate3d(-28px,0,0);clip-path:inset(0 6% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* Summe */
.rechner-summe{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--nacht);color:#EEF0F2;border-radius:24px;padding:26px 26px 22px;overflow:hidden;isolation:isolate;box-shadow:0 50px 80px -34px rgba(17,18,19,.7),0 10px 24px -12px rgba(17,18,19,.35)}
.rechner-summe .licht{background:radial-gradient(ellipse 90% 55% at 100% 112%,rgba(47,91,240,.75),rgba(47,91,240,0) 72%)}
.summe-titel{font-size:.9rem;font-weight:600;color:var(--leise)}
.summe-wert{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;row-gap:2px;font-family:var(--kopf);font-weight:800;line-height:.88;font-variant-numeric:tabular-nums}
.summe-wert b{font-size:clamp(2.8rem,4.2vw,3.9rem);font-weight:800;letter-spacing:-.01em;display:inline-block;transition:transform .5s var(--aus)}
.summe-ca,.summe-bis-wort{font-size:1.35rem;font-weight:700;color:#C9CDD2}
.summe-bis{display:inline-flex;align-items:baseline;gap:.3em}
.summe-einheit{font-family:var(--text);font-weight:600;font-size:1rem;color:#C9CDD2;flex-basis:100%;margin-top:8px}
.summe-wert.tickt b{transform:translateY(-2px)}
.summe-art{margin-top:6px;font-size:.92rem;color:var(--leise)}
.summe-details{margin-top:20px}
.summe-gruppe{margin-top:16px;font-size:.8rem;font-weight:600;color:var(--leise);letter-spacing:.01em}
.summe-gruppe:first-child{margin-top:0}
.summe-posten{margin-top:6px}
.summe-posten li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--linie);font-size:.92rem;line-height:1.35;animation:posten-rein .45s var(--aus)}
.summe-posten li > span:last-child{white-space:nowrap;text-align:right}
.summe-posten .mono{color:#EEF0F2;font-size:.86rem}
.summe-posten .wert{color:#EEF0F2;font-weight:600;font-variant-numeric:tabular-nums}
.summe-posten .anfrage{color:var(--leise);font-size:.86rem}
@keyframes posten-rein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.summe-monat{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie-2);font-size:.95rem;color:#C9CDD2}
.summe-monat b{font-size:1.15rem;color:#EEF0F2}
.summe-fuss{margin-top:18px;font-size:.8rem;color:var(--leise)}

/* ==========================================================================
   KOSTENLOSER ENTWURF
   ========================================================================== */
.entwurf-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.entwurf-schritte{position:sticky;top:calc(var(--nav-h) + 32px)}
.entwurf-schritte h2{font-size:clamp(2rem,3.2vw,3rem);max-width:11ch}
.entwurf-schritte .schrittfolge{margin-top:32px}
.entwurf-schritte .schritt{color:var(--leise-hell)}
.entwurf-schritte .schritt h3{color:var(--tinte-2)}
.entwurf-schritte .schritt.aktiv h3,.entwurf-schritte .schritt.fertig h3{color:var(--tinte)}
.entwurf-schritte .schritt.fertig .mono{color:var(--kobalt-tief)}
.entwurf-schritte .schrittfolge::after{background:var(--kobalt);transition:transform .8s var(--aus)}
.formular-karte{background:#fff;border:1px solid var(--silber);border-radius:var(--radius);padding:40px 44px 44px;box-shadow:var(--schatten-karte)}
.formular-karte h2{font-size:clamp(2rem,3.4vw,3.2rem);max-width:16ch}
.formular{margin-top:32px}
.formular-teil + .formular-teil{margin-top:30px;padding-top:30px;border-top:1px solid #E6E8EB}
.formular-senden{margin-top:28px;display:flex;justify-content:flex-start}
.formular-senden .knopf{min-height:56px;padding:0 28px;font-size:1.05rem}
[data-zeigen-wenn]{animation:datei-rein .4s var(--aus)}

/* ==========================================================================
   WEBSITE-CHECK (Seite)
   ========================================================================== */
.seitenkopf--check .panel{padding-bottom:clamp(64px,10vh,110px)}
.check-raster--seite{align-items:start}
.check-raster--seite h1{color:var(--nacht);max-width:10ch}
.check-raster--seite .lead{margin-top:20px;color:#16181B;max-width:44ch}
.check-raster--seite .check{margin-top:8px}
.check-skizze{margin-top:36px;width:min(360px,100%);padding:16px 18px 18px}
.bew .check-skizze{transform:translate3d(0,calc((.5 - var(--p,.5)) * 50px),0)}
.check-skizze ul{margin-top:10px;display:grid;gap:10px}
.check-skizze li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:.88rem;font-weight:500}
.check-skizze li .mono{font-size:.8rem;color:var(--leise-hell)}
.check-skizze li i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--hell);position:relative;overflow:hidden}
.check-skizze li i::after{content:"";position:absolute;inset:0;border-radius:3px;background:#B7C5F0;transform-origin:0 50%;transform:scaleX(var(--w,.6));animation:skizze-fuell 1.4s var(--aus) .5s both}
.check-skizze li:nth-child(1) i::after{--w:.6}
.check-skizze li:nth-child(2) i::after{--w:.4;animation-delay:.62s}
.check-skizze li:nth-child(3) i::after{--w:.56;animation-delay:.74s}
.check-skizze li:nth-child(4) i::after{--w:.6;animation-delay:.86s}
@keyframes skizze-fuell{from{transform:scaleX(0)}}
.pruefen h2{color:#EEF0F2;max-width:12ch}
.pruef-liste{margin-top:48px;border-top:1px solid var(--linie-2)}
.pruef-zeile{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:28px;align-items:start;padding:30px 0;border-bottom:1px solid var(--linie-2)}
.pruef-zeichen{display:block;padding-top:10px;color:#C9CDD2}
.pruef-zeichen .ico{width:30px;height:30px;stroke-width:1.5}
.pruef-zeile h3{color:#EEF0F2;font-size:clamp(1.5rem,2.2vw,2rem);padding-top:8px}
.pruef-zeile p{color:#C9CDD2;padding-top:6px}
.pruef-punkte{justify-self:end;display:flex;align-items:baseline;gap:8px;padding-top:2px !important}
.pruef-punkte b{font-family:var(--kopf);font-weight:800;font-size:2.6rem;line-height:1;color:#EEF0F2;letter-spacing:0}
.pruef-punkte span{font-size:.9rem;color:var(--leise)}
.score-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.score-raster h2{max-width:12ch}
.score-raster .lead{margin-top:20px;color:var(--leise-hell)}
.score-skala{padding:30px;border-radius:var(--radius);background:var(--hell)}
.score-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.score-band span{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:150px;padding:16px;border-radius:14px;background:#fff;box-shadow:0 18px 30px -22px rgba(17,18,19,.45);position:relative;overflow:hidden}
.score-band span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(28% + var(--i) * 18%);background:linear-gradient(180deg,rgba(47,91,240,0),rgba(47,91,240,.16));pointer-events:none}
.score-band b{font-weight:600;font-size:.92rem;line-height:1.25;position:relative}
.score-band i{font-style:normal;font-family:var(--kopf) !important;font-weight:800;font-size:2.4rem;line-height:1;position:relative}
.score-achse{margin-top:12px;display:flex;justify-content:space-between;font-size:.8rem;color:var(--leise-hell)}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1180px){
  :root{--rechner-summe-breite:330px}
  .rechner-optionen--stil{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .seitenkopf-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .sk-art--link{right:-2%}
  .rechner-kopf{grid-template-columns:1fr;gap:20px}
  .rechner-kopf .lead{justify-self:start}
  .entwurf-raster{grid-template-columns:1fr;gap:40px}
  .entwurf-schritte{position:static}
  .entwurf-schritte .schrittfolge{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0;gap:16px}
  .entwurf-schritte .schrittfolge::before,.entwurf-schritte .schrittfolge::after{display:none}
  .entwurf-schritte .schritt{border-top:3px solid var(--silber-2);padding-top:14px;transition:border-color .5s var(--aus)}
  .entwurf-schritte .schritt.fertig{border-top-color:var(--kobalt)}
  .entwurf-schritte .schritt.aktiv{border-top-color:var(--nacht)}
}
@media (max-width:900px){
  .rechner{grid-template-columns:1fr}
  .rechner-summe{position:sticky;top:auto;bottom:10px;z-index:6;padding:14px 18px 14px;border-radius:18px}
  .rechner[data-aktiv="7"] .rechner-summe{position:relative;bottom:auto}
  .rechner-summe .summe-titel{display:none}
  .summe-wert{margin-top:0}
  .summe-wert b{font-size:2.1rem}
  .summe-ca,.summe-bis-wort{font-size:1.05rem}
  .summe-einheit{flex-basis:auto;margin-top:0;font-size:.92rem}
  .summe-art{margin-top:4px;font-size:.82rem}
  .summe-details,.summe-fuss{display:none}
  .summe-monat{margin-top:8px;padding-top:8px;font-size:.86rem}
  .rechner[data-aktiv="7"] .summe-details{display:block}
  .nicht-raster,.jahr-raster,.score-raster{grid-template-columns:1fr;gap:36px}
  .pruef-zeile{grid-template-columns:48px minmax(0,1fr) auto;gap:8px 18px}
  .pruef-zeile p:not(.pruef-punkte){grid-column:2 / -1;padding-top:0}
  .pruef-punkte{grid-column:3;grid-row:1}
  .pruef-zeile h3{grid-column:2;grid-row:1}
  .check-raster--seite h1{max-width:none}
  .check-skizze{display:none}
}
@media (max-width:760px){
  :root{--sk-buehne-hoehe:360px}
  .seitenkopf-raster{grid-template-columns:1fr;gap:28px}
  .seitenkopf .knopfreihe{width:100%}
  .seitenkopf .fakten{flex-direction:column;align-items:flex-start;gap:4px}
  .seitenkopf .fakten li+li::before{display:none}
  .sk-buehne--preis{height:330px;margin:0 -4px}
  .beleg{left:0;top:0;width:min(320px,88%)}
  .beleg-monat{right:0;top:auto;bottom:0;width:210px}
  .beleg-stufen{display:none}
  .sk-buehne--entwurf{height:auto;padding:8px 0 24px}
  .sk-handy{--h:400px !important}
  .sk-art{width:190px;font-size:.86rem}
  .sk-art--formular{left:0;top:auto;bottom:10%}
  .sk-art--link{right:0;top:6%}
  .feld-reihe{grid-template-columns:1fr}
  .rechner-abschnitt > .panel{padding:64px 0 56px}
  .rechner{margin-top:32px}
  .rechner-leiste{padding:14px 18px}
  .rechner-schritte{padding:24px 18px 4px}
  .rechner-nav{padding:20px 18px 22px}
  .rechner-nav [data-zurueck]{min-width:0}
  .rechner-optionen,.rechner-optionen--drei,.rechner-optionen--stil{grid-template-columns:1fr}
  .rechner-optionen--drei .option{flex-direction:row;gap:12px;padding:15px 16px}
  .rechner-optionen--drei .option-name{font-size:1.25rem}
  .rechner-optionen--stil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stil-bild{height:56px}
  .option--stil{padding:10px}
  .option--stil .option-name{font-size:.92rem}
  .nicht-liste{grid-template-columns:1fr}
  .tabelle-rahmen{margin-top:32px;border-radius:20px}
  .preistabelle,.preistabelle tbody,.preistabelle tr,.preistabelle th,.preistabelle td{display:block}
  .preistabelle thead{display:none}
  .preistabelle tbody tr:not(.pt-gruppe){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 18px;border-top:1px solid #E6E8EB}
  .preistabelle tbody tr:not(.pt-gruppe) th,.preistabelle tbody tr:not(.pt-gruppe) td{padding:0;border:0;width:auto}
  .preistabelle tbody tr:not(.pt-gruppe) td:nth-child(2){grid-column:1 / -1;grid-row:2;font-size:.93rem}
  .preistabelle tbody tr:not(.pt-gruppe) td:nth-child(2):empty{display:none}
  .pt-preis{grid-column:2;grid-row:1}
  .pt-preis b{font-size:1.4rem}
  .preistabelle tr.pt-gruppe th{padding:20px 18px 8px}
  .jahr-beleg{padding:4px 20px;transform:none}
  .bew .jahr-beleg{transform:none}
  .jahr-beleg dl > div{grid-template-columns:1fr;gap:4px}
  .jahr-beleg dd{text-align:left}
  .formular-karte{padding:26px 20px 28px;border-radius:22px}
  .formular-senden .knopf{width:100%}
  .entwurf-schritte .schrittfolge{grid-template-columns:1fr;gap:10px}
  .entwurf-schritte .schritt{grid-template-columns:34px 1fr}
  .upload-ziehen{display:none}
  .upload-liste--bilder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .upload-liste--bilder .upload-info{display:none}
  .upload-liste--bilder .upload-weg{top:10px;right:10px;width:28px;height:28px}
  .option--anzahl .anzahl{flex-basis:100%;padding:0 16px 14px 50px}
  .pruef-zeile{grid-template-columns:40px minmax(0,1fr) auto;padding:24px 0}
  .pruef-zeichen{padding-top:4px}
  .pruef-zeichen .ico{width:26px;height:26px}
  .pruef-punkte b{font-size:2rem}
  .score-skala{padding:16px}
  .score-band span{min-height:120px;padding:12px 10px;gap:16px}
  .score-band b{font-size:.8rem}
  .score-band i{font-size:1.7rem}
  .formular-danke{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .check-skizze li i::after,.mini-eingabe--leer::after{animation:none}
}