/* ==========================================================================
   Immobilienbörse — Suchprofil für Käufer (suchprofil.php)
   Ruhig: wenige Rahmen, viel Luft, große Schrift, Tippziele ab 52 px.
   Farben nur über Tokens aus verbund.css, keine Emojis, keine linken Balken.
   Bildkopf (.bildkopf) liegt in portal.css.
   ========================================================================== */

/* ------------------------------------------------------------- Kopf */
.sp-held .bk-l b{color:var(--ink)}
.sp-wie{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;counter-reset:spw}
.sp-wie li{counter-increment:spw;display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:17px;font-weight:700;color:var(--ink)}
.sp-wie li::before{content:counter(spw);width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  font:700 15px/30px var(--ui);text-align:center;flex:0 0 auto}
.sp-held.klein h1{font-size:clamp(28px,3.6vw,40px)}
.sp-l{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin-top:16px;font-weight:500}
.sp-l.klein{font-size:17px}

/* ------------------------------------------------------------- Formular */
.sp-formband{background:var(--surface);padding-top:clamp(28px,3.6vw,48px);padding-bottom:clamp(34px,4.6vw,64px)}
.sp-form{max-width:760px;font-size:18px}
.sp-schritt{border:0;padding:0;margin:0 0 44px;min-width:0}
.sp-schritt legend{float:left;width:100%;display:flex;align-items:center;gap:14px;font-family:var(--ui);
  font-size:clamp(25px,2.6vw,31px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px;padding:0}
.sp-schritt legend + *{clear:both}
.sp-nr{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--accent-t);
  display:grid;place-items:center;font-size:18px;font-weight:700}
.sp-hilfe{font-size:18px;line-height:1.55;color:var(--muted);margin:2px 0 20px}
.sp-fest{font-size:18px;color:var(--muted);margin:2px 0 6px}
.sp-fest b{color:var(--ink)}
.sp-frage{font-family:var(--ui);font-size:19px;font-weight:700;color:var(--ink);margin:30px 0 12px}
.sp-frage .opt{font-family:var(--tx);font-size:15.5px;font-weight:500;color:var(--muted)}
.sp-klein{font-size:15.5px;line-height:1.5;color:var(--muted);margin:10px 0 0}

/* Auswahl-Kacheln (eine Antwort) */
.sp-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sp-wahl-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-wahl-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-wahl-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-kachel{position:relative;display:block;cursor:pointer}
.sp-kachel input,.sp-chip input,.sp-check input{position:absolute;opacity:0;width:1px;height:1px}
.sp-kachel span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:12px;min-width:0;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-family:var(--ui);font-size:18px;font-weight:600;
  color:var(--ink);line-height:1.25;transition:border-color .15s,background .15s;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.sp-kachel:hover span{border-color:var(--line-in)}
.sp-kachel input:checked + span{border-color:var(--accent);background:var(--soft);color:var(--accent-t);font-weight:700}
.sp-kachel input:focus-visible + span,.sp-chip input:focus-visible + span,.sp-check input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}

/* Chips (mehrere Antworten) */
.sp-chips{display:flex;flex-wrap:wrap;gap:10px}
.sp-chip{cursor:pointer}
.sp-chip span{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 18px 10px 14px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:17.5px;font-weight:500;color:var(--ink);transition:border-color .15s,background .15s}
.sp-chip span::before{content:"";width:20px;height:20px;border:1.5px solid var(--line-in);border-radius:6px;flex:0 0 auto;background:var(--surface)}
.sp-chip:hover span{border-color:var(--line-in)}
.sp-chip input:checked + span{border-color:var(--accent);background:var(--soft);color:var(--accent-t);font-weight:600}
.sp-chip input:checked + span::before,.sp-check input:checked + span::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.sp-chips.klein{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.sp-chips.klein .sp-chip span{display:flex;min-height:48px;font-size:16.5px;padding:8px 12px;border-radius:10px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* Orte: ruhige Liste mit Häkchen, Ortsteile auf Wunsch */
.sp-check{display:flex;cursor:pointer}
.sp-check span{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 4px;
  font-family:var(--ui);font-size:19px;font-weight:600;color:var(--ink)}
.sp-check span::before{content:"";width:24px;height:24px;border:1.5px solid var(--line-in);border-radius:7px;flex:0 0 auto;background:var(--surface)}
.sp-check input:checked + span{color:var(--accent-t);font-weight:700}
.sp-ganz{border-bottom:1px solid var(--line-2);margin-bottom:4px}
.sp-ganz span{font-size:20px}
.sp-oder{font-size:16px;color:var(--muted);margin:14px 0 2px;font-weight:500}
.sp-ganz-h{display:none;margin:12px 0 0;font-size:17px;font-weight:600;color:var(--accent-t)}
.sp-kreis.ganz .sp-orte,.sp-kreis.ganz .sp-oder{display:none}
.sp-kreis.ganz .sp-ganz-h{display:block}
.sp-orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sp-ort{min-width:0;border-bottom:1px solid var(--line-2)}
.sp-ot{margin:-6px 0 8px 38px}
.sp-ot summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:15.5px;font-weight:600;color:var(--accent-t);list-style:none}
.sp-ot summary::-webkit-details-marker{display:none}
.sp-ot summary::after{content:"";width:7px;height:7px;margin-left:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sp-ot[open] summary::after{transform:rotate(-135deg)}
.sp-ot[open] summary{margin-bottom:8px}
.sp-ot[open]{grid-column:1/-1}
.sp-anderer{margin-top:26px}
.sp-anderer > summary{cursor:pointer;min-height:52px;display:flex;align-items:center;font-family:var(--ui);font-size:18px;font-weight:700;color:var(--accent-t)}
.sp-anderer[open] > summary{margin-bottom:8px}

/* Von–bis: eine ruhige Zeile je Angabe */
.sp-spannen{border-top:1px solid var(--line-2)}
.sp-spanne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:8px 20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.sp-spanne[hidden]{display:none}
.sp-lab{font-family:var(--ui);font-size:19px;font-weight:600;color:var(--ink)}
.sp-vb{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 34px;gap:10px;align-items:center}
.sp-vb.eins{grid-template-columns:minmax(0,1fr) 34px;max-width:260px}
.sp-strich{color:var(--muted);font-weight:600}
.sp-einh{font-size:17px;font-weight:600;color:var(--muted)}
.sp-form .inp{font-size:18px;min-height:54px;border-color:var(--line-in)}
.sp-form .inp::placeholder{color:#7e8c95;font-style:normal;font-size:17px}
.sp-weitere{margin-top:22px}
.sp-weitere > summary{cursor:pointer;min-height:48px;display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-size:17px;font-weight:700;color:var(--accent-t);list-style:none}
.sp-weitere > summary::-webkit-details-marker{display:none}
.sp-weitere > summary::before{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);font-size:18px;line-height:1}
.sp-weitere[open] > summary::before{content:"–"}
.sp-weitere[open] > summary{margin-bottom:6px}
.sp-feld{margin-top:26px}
.sp-feld .lab{font-size:17px}
.sp-nur{margin-top:4px}
.sp-ok{margin-top:26px;background:var(--surface-2);border:0}
.sp-ok .t{font-size:16px;line-height:1.55;color:var(--ink-2)}
.sp-ok .t a{color:var(--accent-t)}
.sp-ok input{width:24px;height:24px}
.sp-form .submitrow .btn{font-size:19px;min-height:60px}
.sp-form .mini{font-size:15px}

/* Fehler */
.sp-fehlerbox{background:var(--amber-soft);color:var(--amber);border-radius:12px;padding:16px 18px;margin:0 0 24px;font-size:17px}
.sp-fehlerbox ul{margin:8px 0 0;padding-left:20px}
.sp-fehler{color:var(--amber);font-weight:700;font-size:16.5px;margin:10px 0}

/* Schritte (nur mit JavaScript) */
.sp-fortschritt{position:sticky;top:var(--sp-oben,0px);z-index:5;background:var(--surface);padding:12px 0 14px;margin-bottom:22px}
.sp-fortschritt p{display:flex;justify-content:space-between;gap:12px;font-family:var(--ui);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 8px}
.sp-fortschritt p span{color:var(--muted);font-weight:600}
.sp-balken{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.sp-balken i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .25s var(--ease)}
.sp-js .sp-schritt{display:none;margin-bottom:0}
.sp-js .sp-schritt.an{display:block}
.sp-js .sp-schritt legend .sp-nr{display:none}
.sp-nav{display:flex;gap:12px;margin-top:34px;clear:both}
.sp-nav .btn{min-height:58px;font-size:18px;flex:1}
.sp-nav .btn.zurueck{flex:0 0 auto;padding-left:22px;padding-right:22px;box-shadow:none}
.sp-js .sp-schritt[data-schritt="6"] .submitrow:empty{display:none}
.sp-js .sp-unter,.sp-js .sp-nur{display:none}
.sp-js .sp-unter.an,.sp-js .sp-nur.an{display:block}

/* Ergebnisseiten */
.sp-ergebnis h1{font-size:clamp(28px,4vw,44px);max-width:24ch;margin-top:14px}
.sp-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.btn.gross{min-height:60px;font-size:19px;padding:15px 30px}
.sp-tipps{margin:18px 0 0;padding-left:22px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.sp-karte{margin-top:22px;max-width:720px;background:var(--surface);border-radius:var(--r-m);padding:18px 22px;font-size:17px;line-height:1.55}
.sp-karte-k{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-t);margin:0 0 6px}
.sp-zeilen{margin:0}
.sp-zeilen > div{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:4px 16px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.sp-zeilen > div:last-child{border-bottom:0}
.sp-zeilen dt{font-weight:600;color:var(--muted);font-size:16px}
.sp-zeilen dd{margin:0;color:var(--ink);font-size:17px}
.sp-kontakt{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-2);font-weight:600;color:var(--ink)}
.sp-gut{background:var(--soft);color:var(--accent-t);border-radius:12px;padding:14px 18px;margin-top:16px;font-weight:700;font-size:17px;max-width:720px}
.sp-loeschen{margin-top:26px;max-width:720px}
.sp-loeschen summary{cursor:pointer;min-height:48px;display:inline-flex;align-items:center;font-size:16px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sp-loeschen p{font-size:16.5px;color:var(--ink-2);margin:8px 0 14px}
.btn.warn{color:var(--amber);border-color:var(--amber-line)}
.sp-faq .sp-faq-l{max-width:760px}

@media(max-width:760px){
  .sp-orte{grid-template-columns:1fr}
  .sp-spanne{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .sp-wahl,.sp-wahl-3,.sp-wahl-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-wahl-2{grid-template-columns:1fr}
  .sp-kachel span{font-size:17px;padding:12px 8px}
  .sp-chips.klein{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-zeilen > div{grid-template-columns:1fr}
  .sp-schritt legend{font-size:25px}
  .sp-wie{flex-direction:column;gap:10px}
  .sp-ot{margin-left:38px}
}
@media(prefers-reduced-motion:reduce){
  .sp-balken i,.sp-kachel span,.sp-chip span{transition:none}
}
.sp-held h1{max-width:18ch}
@media(max-width:760px){
  .sp-ot{margin-left:0}
  .sp-chips.klein .sp-chip span{hyphens:manual;-webkit-hyphens:manual;font-size:16px;padding:8px 10px;gap:8px}
  .sp-chips.klein .sp-chip span::before{width:18px;height:18px}
}

/* Symbol-Kacheln (Stil der Wertermittlungsmaske): Symbol oben, kurze Beschriftung darunter, Haken-Punkt wenn gewählt */
.sp-wahl-mehr{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sp-kachel span{position:relative}
.sp-kachel.mit-sym span{flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;gap:10px;min-height:104px;padding:14px 14px 13px}
.sp-kachel b{font-weight:inherit}
.sp-kachel .sym{width:34px;height:34px;flex:0 0 auto;color:var(--accent-t);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sp-kachel input:checked + span::after{content:"";position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.sp-kachel:not(.mit-sym) input:checked + span{padding-right:40px}
@media(max-width:760px){
  .sp-wahl-mehr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-kachel.mit-sym span{min-height:100px;padding:12px}
}

/* Bildkopf: Text immer auf ruhiger heller Fläche (Kontrast ≥ 4,5:1), Schritte untereinander */
.sp-held .bk-l{color:var(--ink);font-size:clamp(18px,1.6vw,20.5px)}
.sp-wie{flex-direction:column;gap:12px;max-width:560px}
.sp-wie li{font-size:18px}
.sp-kachel span{hyphens:manual;-webkit-hyphens:manual}

/* Runde 4: Illustrations-Kacheln. Bild zentriert auf weicher runder Fläche, Wort darunter, gewählt = 2 px Akzentrahmen + Haken-Punkt */
.sp-wahl{gap:12px}
.sp-wahl-mehr,.sp-wahl-art{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.sp-kachel.mit-sym span{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:12px;min-height:150px;
  padding:16px 12px 16px;border:2px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:0 1px 2px rgba(20,40,50,.05)}
.sp-kachel.mit-sym b{font-size:17.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.sp-kachel .sym{width:76px;height:76px;padding:6px;border-radius:50%;background:var(--soft);flex:0 0 auto;stroke:none;color:inherit;
  transition:background .15s,transform .15s}
.sym .w,.sym .h,.sym .k,.sym .o{stroke:var(--accent-t);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sym .w{fill:#fff}
.sym .h{fill:var(--soft-line)}
.sym .k{fill:var(--accent2)}
.sym .o{fill:none}
.sym .x{fill:var(--soft-line);stroke:none}
.sp-kachel.mit-sym:hover span{border-color:var(--accent2);box-shadow:0 4px 14px rgba(20,40,50,.08)}
.sp-kachel.mit-sym:hover .sym{transform:translateY(-1px)}
.sp-kachel.mit-sym input:checked + span{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}
.sp-kachel.mit-sym input:checked + span b{color:var(--accent-t);font-weight:700}
.sp-kachel.mit-sym input:checked + span .sym{background:var(--surface)}
.sp-kachel input:checked + span::after{top:10px;right:10px;width:26px;height:26px}
.sp-kachel input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:760px){
  .sp-wahl-mehr,.sp-wahl-art,.sp-wahl.mit-bildern{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-kachel.mit-sym span{min-height:138px;padding:14px 8px}
  .sp-kachel .sym{width:66px;height:66px}
  .sp-kachel.mit-sym b{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){.sp-kachel .sym{transition:none}}
.sp-wahl:has(.mit-sym){grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
@media(max-width:760px){.sp-wahl:has(.mit-sym){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Runde 4: ein Schritt nach dem anderen; Knopfleiste am Rechner unter dem Schritt, am Handy unten angedockt */
.sp-fortschritt{position:static;margin-bottom:26px}
.sp-js .sp-schritt{margin:0}
.sp-js .submitrow:empty{display:none}
.sp-nav{display:flex;gap:12px;margin-top:34px}
.sp-nav [hidden]{display:none!important}
.sp-nav .btn{min-height:58px;font-size:18px;flex:1}
.sp-nav .btn.zurueck{flex:0 0 auto;padding-left:24px;padding-right:24px;box-shadow:none}
.sp-nav .btn.aus{opacity:.55;box-shadow:none}
.sp-nav .btn.aus:hover{transform:none}
@media(max-width:860px){
  body.sp-angedockt{padding-bottom:170px}
  .sp-nav{position:fixed;left:0;right:0;z-index:109;margin:0;bottom:calc(76px + env(safe-area-inset-bottom));
    padding:10px 16px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(20,40,50,.1)}
  .sp-nav .btn{min-height:54px}
}
/* Visual-Critic Runde 4: größer, ruhigere Linie, warme Grundtöne; k = genau das eine Merkmal der Art */
.sp-kachel .sym{width:96px;height:96px;padding:4px;background:var(--soft);background:color-mix(in srgb,var(--soft) 70%,#F6F1E8)}
.sp-kachel.mit-sym span{min-height:176px}
.sym .w,.sym .h,.sym .k,.sym .o,.sym .ob{stroke:var(--accent-t);stroke:color-mix(in srgb,var(--accent-t) 85%,#2b2620);stroke-width:2}
.sym .w{fill:#FBF8F2}
.sym .ob{fill:none;stroke-width:3.4}
.sym .z{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .sp-kachel .sym{width:84px;height:84px}
  .sp-kachel.mit-sym span{min-height:158px}
}

/* ==========================================================================
   Runde 5: Frage für Frage (nur mit JavaScript). Einstieg = Bildkopf + „Suchprofil anlegen“,
   danach füllt der Assistent den Bildschirm zwischen oben und der App-Leiste; je Bildschirm eine Frage, kein Scrollen.
   ========================================================================== */
.sp-oben,.sp-js .sp-nav{display:none}
.sp-los{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px}
.sp-los span{font-size:16px;color:var(--muted);font-weight:500}
.sp-gruppe{border:0;margin:0 0 30px;padding:0;min-width:0}
.sp-gruppe > legend{font-family:var(--ui);font-size:clamp(25px,2.6vw,31px);font-weight:700;color:var(--ink);padding:0;margin:0 0 6px}
.sp-bs{margin:0 0 30px}
.sp-q{font-size:clamp(21px,2.2vw,26px);line-height:1.25;margin:0 0 8px;max-width:30ch}
.sp-bs .sp-hilfe{margin:0 0 16px;font-size:17px}
.sp-reihe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sp-pille{cursor:pointer;position:relative}
.sp-pille input{position:absolute;opacity:0;width:1px;height:1px}
.sp-pille span{display:inline-flex;align-items:center;min-height:46px;padding:8px 18px;border:2px solid var(--line-2);border-radius:999px;font-size:16.5px;font-weight:600;color:var(--ink);background:var(--surface)}
.sp-pille input:checked + span{border-color:var(--accent);background:var(--soft);color:var(--accent-t)}
.sp-pille input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.sp-spannen.gross .sp-spanne{padding:16px 0}
.lab.sr,.sp-gruppe > legend.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sp-orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.sp-ort{border-bottom:1px solid var(--line-2)}
.sp-kachel.gewaehlt span{transform:scale(.97);transition:transform .18s}

/* Einstieg mit JS: nur Bildkopf + Start, kein langes Formular darunter */
html.sp-js:not(.sp-assistent) .sp-formband{display:none}

/* Assistent */
html.sp-assistent,html.sp-assistent body{overflow:hidden;height:100%}
html.sp-assistent .rkn-nav,html.sp-assistent .skip,html.sp-assistent main > section:not(.sp-formband),html.sp-assistent footer,html.sp-assistent .rkn-foot{display:none!important}
html.sp-assistent body{padding-bottom:0!important}
html.sp-assistent .sp-formband{position:fixed;left:0;right:0;top:0;bottom:var(--sp-unten,0px);z-index:60;padding:0;background:var(--surface);display:flex}
html.sp-assistent .sp-formband > .wrap{flex:1;display:flex;max-width:860px;width:100%;margin:0 auto;padding:env(safe-area-inset-top) 20px 0}
html.sp-assistent .sp-form{display:flex;flex-direction:column;width:100%;max-width:none;height:100%;font-size:18px}
html.sp-assistent .sp-gruppe{display:contents}
html.sp-assistent .sp-gruppe > legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.sp-assistent .sp-fehlerbox{display:none}
html.sp-assistent .sp-bs{display:none;margin:0}
html.sp-assistent .sp-bs.an{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:4px 2px 8px}
html.sp-assistent .sp-bs.an.rein{animation:spRein .28s var(--ease)}
html.sp-assistent .sp-bs.an.raus{animation:spRaus .28s var(--ease)}
@keyframes spRein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes spRaus{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
html.sp-assistent .sp-oben{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:12px 0 14px;flex:0 0 auto}
.sp-zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 4px;margin-left:-4px;border:0;background:none;cursor:pointer;
  font-family:var(--ui);font-size:16.5px;font-weight:700;color:var(--accent-t);border-radius:10px}
.sp-zurueck svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sp-zurueck:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sp-stand{margin:0;text-align:right;font-family:var(--ui);font-size:15.5px;font-weight:700;color:var(--muted)}
html.sp-assistent .sp-oben .sp-balken{grid-column:1/-1;height:6px}
html.sp-assistent .sp-q{font-size:clamp(23px,3.2vh,30px);margin:6px 0 6px;outline:none}
html.sp-assistent .sp-bs .sp-hilfe{margin:0 0 14px;font-size:16.5px}
html.sp-assistent .sp-nav{display:flex;position:static;gap:12px;flex:0 0 auto;margin:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line-2);box-shadow:none;backdrop-filter:none}
html.sp-assistent .sp-nav .btn{flex:1;min-height:56px;font-size:18px}
html.sp-assistent .sp-nav .btn.leise{background:var(--surface);color:var(--accent-t);border-color:var(--line-in);box-shadow:none}
html.sp-assistent .sp-bs .submitrow{display:none}
/* Kacheln passen sich der Bildschirmhöhe an, damit nichts scrollt */
html.sp-assistent .sp-kachel.mit-sym span{min-height:clamp(118px,17.5vh,170px);padding:clamp(8px,1.4vh,14px) 10px;gap:clamp(6px,1vh,10px)}
html.sp-assistent .sp-kachel .sym{width:clamp(58px,9.6vh,92px);height:clamp(58px,9.6vh,92px)}
html.sp-assistent .sp-wahl{gap:10px}
html.sp-assistent .sp-wahl-art{grid-template-columns:repeat(5,minmax(0,1fr))}
html.sp-assistent .sp-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
html.sp-assistent .sp-drei,html.sp-assistent .sp-wahl-3{grid-template-columns:repeat(3,minmax(0,1fr))}
html.sp-assistent .sp-wahl-mehr:not(.sp-vier):not(.sp-drei){grid-template-columns:repeat(3,minmax(0,1fr))}
html.sp-assistent .sp-check span{min-height:50px;padding:6px 4px;font-size:18px}
html.sp-assistent .sp-chips.klein{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
html.sp-assistent .sp-chips.klein .sp-chip span{min-height:40px;padding:6px 10px;font-size:15.5px}
html.sp-assistent .sp-weitere{margin-top:12px}
html.sp-assistent .sp-feld{margin-top:12px}
html.sp-assistent .sp-feld .lab{margin-bottom:5px}
html.sp-assistent textarea.inp{min-height:150px}
@media(max-width:760px){
  html.sp-assistent .sp-formband > .wrap{padding:env(safe-area-inset-top) 16px 0}
  html.sp-assistent .sp-nav{padding-bottom:12px}
  html.sp-assistent .sp-wahl-art,html.sp-assistent .sp-vier,html.sp-assistent .sp-wahl-mehr:not(.sp-drei),html.sp-assistent .sp-wahl-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.sp-assistent .sp-kachel.mit-sym span{min-height:clamp(112px,16.5vh,150px)}
  html.sp-assistent .sp-kachel .sym{width:clamp(54px,8.6vh,76px);height:clamp(54px,8.6vh,76px)}
  html.sp-assistent .sp-kachel.mit-sym b{font-size:16px}
  html.sp-assistent .sp-chips.klein{grid-template-columns:repeat(3,minmax(0,1fr))}
  html.sp-assistent .sp-chips.klein .sp-chip span{min-height:38px;padding:4px 6px;font-size:14.5px;gap:6px}
  html.sp-assistent .sp-chips.klein .sp-chip span::before{width:16px;height:16px}
  html.sp-assistent .grid2{grid-template-columns:1fr 1fr;gap:10px}
  html.sp-assistent .sp-spanne{grid-template-columns:1fr}
  html.sp-assistent .sp-ok .t{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){html.sp-assistent .sp-bs.an.rein,html.sp-assistent .sp-bs.an.raus{animation:none}.sp-kachel.gewaehlt span{transition:none}}
/* Ortsteile am Handy: bis zu 30 Namen auf einem Bildschirm, ohne Kästchen, gewählt = Akzentfläche */
@media(max-width:760px){
  html.sp-assistent .sp-bs[data-bs^="ot-"] .sp-hilfe{display:none}
  html.sp-assistent .sp-bs[data-bs^="ot-"] .sp-q{font-size:22px}
  html.sp-assistent .sp-chips.klein{gap:5px}
  html.sp-assistent .sp-chips.klein .sp-chip span{min-height:36px;padding:3px 4px;font-size:14.5px;justify-content:center;text-align:center;line-height:1.15;border-radius:9px}
  html.sp-assistent .sp-chips.klein .sp-chip span::before{display:none}
  html.sp-assistent .sp-chips.klein .sp-chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
}
/* Beschriftungen laufen nie über: Block mit Umbruch an weichen Trennstellen, notfalls überall; Handy 2 Spalten (Spezifität wie oben) */
.sp-kachel b{display:block;max-width:100%;overflow-wrap:anywhere;hyphens:manual}
@media(max-width:760px){
  html.sp-assistent .sp-wahl-mehr:not(.sp-vier):not(.sp-drei){grid-template-columns:repeat(2,minmax(0,1fr))}
  html.sp-assistent .sp-drei .sp-kachel.mit-sym b,html.sp-assistent .sp-wahl-3 .sp-kachel.mit-sym b{font-size:15px}
}
.sp-chip span{hyphens:manual;overflow-wrap:anywhere}
@media(max-width:760px){
  html.sp-assistent .sp-viele .sp-kachel.mit-sym span{min-height:clamp(96px,13.2vh,124px);gap:4px;padding:8px}
  html.sp-assistent .sp-viele .sp-kachel .sym{width:clamp(48px,7.2vh,62px);height:clamp(48px,7.2vh,62px)}
  html.sp-assistent .sp-bs[data-bs^="unter-"] .sp-hilfe{display:none}
  html.sp-assistent .sp-chips.klein .sp-chip span{white-space:normal}
}

.sp-verbund{list-style:none;padding:0;margin:22px 0 8px;display:grid;gap:8px;max-width:640px}
.sp-verbund li{background:var(--card,#fff);border:1px solid var(--line,#dde5ea);border-radius:14px;padding:12px 16px;font-size:18px}
.sp-verbund span{color:var(--muted,#4c5b65);font-size:16px;margin-left:6px}
.sp-alle-z{margin:0 0 10px;display:none}
html.sp-js .sp-alle-z{display:block}
.sp-alle{border:1px solid var(--line-in,#c9d3d9);background:var(--card,#fff);color:var(--accent-t);font-family:inherit;font-weight:700;font-size:15px;line-height:1;border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.sp-alle.an{background:var(--soft,#e8f4f0);border-color:currentColor}