/* Shop-Teil aus dem Prototyp übernommen (16.10.2026, S0): NetConIor/Views/Shop/ShopView.css + AdresseView.css, unverändert. */
/* --- ShopView.css --- */
/* Shop-Rahmen: zweispaltiges Layout, Fortschritt, Summenleiste, Testumgebung */
.grid-shop{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
/* Seitenüberschrift des Shops (Buchen, Produktumbuchung, Kündigung) */
.shop-head{margin-bottom:6px}
.shop-head h2{font-size:22px}
/* Häkchen mit längerem Text (Portierung, Gestattung, Telefondaten): Kästchen oben bündig, Text bricht daneben um */
.chk-row{align-items:flex-start;flex-wrap:nowrap}
.chk-row > input{margin-top:3px;flex:none}
/* Produktkarten (Produktwahl, Produktumbuchung): Name etwas größer; Unterprodukte eingerückt mit Linie, Einzug je Ebene über --einzug */
.card-name{font-size:15px}
.opt-sub{gap:8px;margin-left:var(--einzug,0);padding-left:12px;border-left:2px solid var(--accent-soft)}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:14px}
/* Fünf Schritte beim Neuabschluss (mit Gebäude & Wohnsituation): eine Zeile, lange Namen brechen im Schritt um statt in eine zweite Zeile zu rutschen */
.progress{display:flex;gap:0;margin-bottom:20px;flex-wrap:nowrap}
.progress button{flex:1 1 0;min-width:0;text-align:left;line-height:1.25;display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;border:0;background:transparent;color:var(--muted);padding:6px 4px;cursor:pointer;border-bottom:3px solid var(--line)}
.progress button .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);font-size:12px;flex:none;background:var(--surface)}
.progress button[aria-current="step"]{color:var(--fg);border-bottom-color:var(--accent-line)}
.progress button[aria-current="step"] .dot,.progress button.done .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.progress button.done{border-bottom-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.progress button.todo{color:var(--bad);border-bottom-color:var(--bad)}   /* früherer Schritt mit offenen Meldungen (Review D5) */
.progress button.todo .dot{border:2px solid var(--bad);color:var(--bad);font-weight:700}
.sum-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0}
.sum-line.credit span:last-child,.sum-line.credit > b.num,.phase.credit b{color:var(--credit)}   /* Gutschriften (Review D12) */
.phase{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:6px;background:var(--surface-2);font-size:13px}
.phase b{font-weight:700;font-variant-numeric:tabular-nums}
.testbar{border:1px dashed var(--warn);background:var(--warn-soft);border-radius:10px;padding:10px 12px}
.testbar summary{color:var(--warn);font-size:13px}
@media (max-width:960px){.grid-shop{grid-template-columns:minmax(0,1fr)}.side{position:static}}

/* Mobil: Aktionsleiste unten (Preis + Weiter), Auswahl als Panel von unten, Schrittanzeige in einer Zeile */
.mbar,.sheet,.sheet-bg{display:none}
@media (max-width:960px){
  .side{display:none}
  .grid-shop{padding-bottom:76px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;align-items:center;justify-content:space-between;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.18)}
  .mbar .price{display:grid;line-height:1.25;min-width:0;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:0}
  .mbar button.price{cursor:pointer}
  .mbar .more{color:var(--accent)}
  .mbar .price b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .mbar .btn.primary{white-space:nowrap}
  .sheet-bg{display:block;position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.5)}
  .sheet{display:grid;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:80vh;overflow:auto;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface);border-radius:16px 16px 0 0}
  .sheet .panel{border:0;padding:0;box-shadow:none}
}
@media (max-width:720px){
  .progress{flex-wrap:nowrap;gap:4px;margin-bottom:14px}
  .progress button{flex:0 0 auto;padding-inline:2px}
  .progress button[aria-current="step"]{flex:1 1 auto}
  .progress button:not([aria-current="step"]) .lbl{display:none}
  .testbar{padding:8px 10px}
}
@media (max-width:380px){
  .mbar{gap:8px;padding-inline:12px}
  .mbar .price b{font-size:15px}
  .mbar .btn.primary{white-space:normal;max-width:52%;line-height:1.2;padding-inline:10px}
}

/* Ihre Daten: Abschnitte als eigene Kästen mit Kopf, Sprungleiste oben (Fehler im Abschnitt rot markiert) */
.kd-sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;scroll-margin-top:12px}
.kd-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.kd-head h3{margin:0;font-size:16px}
.kd-nav{display:flex;flex-wrap:wrap;gap:6px}
.kd-nav a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--fg);text-decoration:none;font-size:13px}
.kd-nav a:hover{border-color:var(--accent)}
.kd-nav .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:11.5px}
.kd-nav a.has-err{border-color:var(--bad)}
.kd-nav a.has-err .dot{background:var(--bad);color:#fff}

/* Views Gebäudeinformationen, Wohnsituation, Gestattungsvertrag: Kopf mit Symbol, hellgraue Fläche mit Gruppen, Auswahl als Pillen-Knöpfe */
fieldset.vs{border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0}
legend.vs-head{float:left;width:100%;display:flex;align-items:center;gap:12px;padding:0;margin:0;font-size:16px;font-weight:700;color:var(--fg);line-height:1.3}
legend.vs-head + *{clear:both}
.vs-hic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.vs-hic svg,.pill-ic svg,.vs-nic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vs-hic .s2,.pill-ic .s2,.vs-nic .s2{opacity:.6}
.vs-body{display:grid;gap:18px;background:var(--surface-2);border-radius:20px;padding:18px;min-width:0}
.vs-body > *{min-width:0}
.vs-grp{display:grid;gap:10px;min-width:0}
.vs-gh{font-weight:700;font-size:14.5px;color:var(--fg);margin:0}
.vs-gh .req{color:var(--bad)}
.vs-body .form input{background:var(--surface)}
.pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.pill{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:28px;cursor:pointer;color:var(--fg);transition:border-color .12s,background-color .12s,box-shadow .12s}
.pill input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pill:hover{border-color:var(--accent)}
.pill-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.pill-tx{display:grid;gap:1px;min-width:0}
.pill-name{font-weight:700;font-size:14.5px;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
.pill-desc{font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:break-word;hyphens:auto}
.pill-chk{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:var(--accent-ink);background:var(--surface)}
.pill-chk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pill:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.pill:has(input:checked) .pill-ic{background:var(--accent);color:var(--accent-ink)}
.pill:has(input:checked) .pill-chk{background:var(--accent);border-color:var(--accent)}
.pill:has(input:checked) .pill-chk svg{opacity:1}
.pill:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vs-grp:has(+ .err) .pill{border-color:var(--bad)}
.vs-note{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px}
.vs-note .vs-nic{flex:none;color:var(--accent);margin-top:-1px}
@media (max-width:720px){
  .vs-body{padding:14px 12px;border-radius:16px;gap:16px}
  .pill{min-height:60px}
}
/* Service & Kontakt (wie im alten IOR): Kopf in der Markenfarbe des Mandanten, Telefon und E-Mail mit Symbol */
.service-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.service-box h3{background:var(--mandant-1);color:var(--mandant-2);padding:10px 14px;font-size:15px}
.svc-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 14px 4px;align-items:start}
.svc-row:last-child{padding-bottom:14px}
.svc-row svg{width:22px;height:22px;color:var(--accent);margin-top:2px}
.svc-row a{color:var(--fg);font-weight:700;overflow-wrap:anywhere}
/* Mobil steht die Seitenspalte nicht zur Verfügung: Service & Kontakt dann unter dem Schritt */
.service-box.svc-mobile{display:none}
@media (max-width:960px){.service-box.svc-mobile{display:block}}
/* Testbuchung (E153): deutliches Band über dem Shop, auf allen Schritten und der Abschlussseite; schmal: Text unter dem Schild */
.test-band{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 14px;padding:10px 14px;border-radius:8px;color:var(--bad);
  background:repeating-linear-gradient(-45deg,var(--bad-soft) 0 14px,#fff 14px 28px);border:2px solid var(--bad)}
.test-band-tag{background:var(--bad);color:#fff;font-size:18px;letter-spacing:.12em;padding:4px 12px;border-radius:4px;flex:none}
.test-band .small{flex:1 1 260px;min-width:0;color:var(--fg);overflow-wrap:anywhere}

/* --- AdresseView.css --- */
/* Adresse: Suchfeld mit Vorschlagsliste (E129), Kaskade PLZ/Ort → Straße → Hausnummer und freie Eingabe; auf schmalen Bildschirmen untereinander.
   Die Kacheln für die Buchungsart kommen aus global.css. */
.addr-search .cb{position:relative}
.addr-search input{width:100%}
.addr-search > label .req{color:var(--bad)}
.addr-search [role=listbox]{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:35;margin:0;padding:4px;list-style:none;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.14);max-height:min(50vh,360px);overflow-y:auto}
.addr-search [role=option]{display:grid;gap:1px;align-content:center;min-height:44px;padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--fg);font-size:14px}
.addr-search [role=option][aria-selected=true],.addr-search [role=option][data-id]:hover{background:var(--accent-soft)}
.addr-search [role=option][aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent)}
.addr-search .o-main{font-weight:400;overflow-wrap:anywhere}
.addr-search .o-sub{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.addr-search .o-none{cursor:default;color:var(--muted);font-size:13px}
.addr-oder{margin:-4px 0 -6px}
.form.addr-casc{grid-template-columns:minmax(160px,1.2fr) minmax(160px,1.4fr) minmax(110px,.8fr)}
.form.addr-free{grid-template-columns:minmax(100px,140px) minmax(160px,1fr) minmax(180px,2fr) minmax(90px,120px) minmax(110px,1fr)}
.form.addr-teile{grid-template-columns:minmax(100px,140px) minmax(160px,1fr) minmax(220px,2fr)}
@media (max-width:720px){.form.addr-casc,.form.addr-free,.form.addr-teile{grid-template-columns:minmax(0,1fr)}}
/* Mobil: Tippflächen mindestens 44 px (Suchfeld, Auswahllisten, „Meine Adresse ist nicht aufgeführt“) */
@media (max-width:720px){.addr-search input,.form.addr-casc select{min-height:44px}.addr-frei-chk{min-height:44px}}

/* Erfolg (Bestätigung, auch Unterschrift-Seite bei schon unterschriebener Bestellung): Haken im Kreis, „So geht es weiter“ als Liste (Review D16) */
.ok-kopf{display:flex;align-items:center;gap:12px}
.ok-kopf h2{margin:0}
.ok-icon{flex:none;width:40px;height:40px;fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ok-icon path{fill:none;stroke-width:2.4}
.naechste h3{margin:0;font-size:16px}
.naechste-liste{margin:0;padding-left:20px;display:grid;gap:6px;overflow-wrap:anywhere}