/* ============================================================================
   seiten.css — Anordnungen, keine Bauteile
   Brandpool 2.1 · angelegt 11.08.2026
   ----------------------------------------------------------------------------
   `ui.css` ist der Baukasten: Knopf, Karte, Badge, Kopfleiste — Teile, die auf
   jeder Seite gleich aussehen. Was hier steht, ist das Gegenteil: das Gerüst
   EINER Ansicht. Ein FAQ-Raster ist kein wiederverwendbares Bauteil.

   Die Trennung stammt aus `entwuerfe/entwurf.css` (Session B), wo sie
   ausformuliert ist: „Seitengerüst und Funnel — das sind Anordnungen, keine
   Bauteile. Sie gehören in die jeweilige Ansicht, nicht in den gemeinsamen
   Baukasten."

   Warum trotzdem eine gemeinsame Datei und kein `<style>` je Seite: eine Seite
   ohne eigenen Stilblock lässt sich ersetzen, ohne dass Gestaltung verloren
   geht. Und man sieht an einer Stelle, was es an Anordnungen überhaupt gibt.

   Alles hier ist aus den Prototypen ÜBERNOMMEN, nicht neu gestaltet. Die
   Herkunft steht je Abschnitt dabei.
   ============================================================================ */

/* ============================================================================
   FAQ — aus `einzelhaendler/prepage-einzelhaendler.html`
   [KORRIGIERT 11.08.2026] Die erste Fassung hatte die Medienabfragen
   plattgemacht: `.fq-nav button.on` stand dadurch zweimal da, und die
   Mobilfassung (schwarz gefüllt) gewann auch am Rechner. Jetzt stehen die
   45 Regeln der obersten Ebene und die 5 Medienblöcke getrennt, wie im
   Prototyp.
   ============================================================================ */

.fq-frame{background:transparent;border:none;border-radius:0;box-shadow:none;max-width:none;margin-bottom:48px}
.fq-top{padding:4px 0 18px}
.fq-kick{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-dk)}
.fq-top h3{font-size:26px;letter-spacing:-.025em;margin:7px 0 5px}
.fq-top p{margin:0;font-size:13px;color:var(--muted);max-width:600px}
.fq-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;border-top:1px solid var(--border)}
.fq-nav{border-right:1px solid var(--border);padding:20px 18px 20px 0;background:transparent}
.fq-nav button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;font:inherit;
    font-size:13px;color:var(--muted);border-radius:8px;cursor:pointer}
.fq-nav button:hover{color:var(--text);background:var(--card)}
.fq-nav button.on{color:var(--text);font-weight:700;background:var(--card);box-shadow:inset 0 0 0 1px var(--border)}
.fq-body{padding:20px 0 26px 28px;min-width:0}
.fq-secttl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#aab0b8;margin:20px 0 8px}
.fq-secttl:first-child{margin-top:0}
.fq-item{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:7px}
.fq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
    font-size:14px;font-weight:600;line-height:1.4}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary:hover{color:var(--accent-dk)}
.fq-item .fq-n{flex:0 0 auto;width:20px;font-size:11px;font-weight:800;color:#c3c8cf;letter-spacing:.04em;margin-top:2px}
.fq-item[open]{border-color:var(--accent-rand);background:linear-gradient(180deg,#fbfefc,#fff)}
.fq-item[open] .fq-n{color:var(--accent)}
.fq-item .fq-a{padding:0 15px 15px 46px;font-size:13px;color:#4b5058;line-height:1.65;max-width:720px}
.fq-ask{margin-top:40px;padding-top:22px;border-top:1px solid var(--border)}
.fq-ask .inner{background:var(--card);border:1px dashed #cbd7e0;border-radius:10px;padding:13px 15px;cursor:pointer}
.fq-ask .form{cursor:auto}
.fq-ask .bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.fq-ask .bar>i{color:var(--accent-dk)}
.fq-ask .bar b{font-size:13px}
.fq-ask .bar span{font-size:12.5px;color:var(--muted)}
.fq-ask .openb{margin-left:auto;border:1px solid var(--border);background:var(--card);border-radius:8px;height:32px;
    padding:0 14px;font:inherit;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer}
.fq-ask .openb:hover{border-color:var(--accent);color:var(--accent-dk);background:var(--accent-soft)}
.fq-ask .form{display:none;margin-top:12px}
.fq-ask.open .form{display:block}
.fq-ask.open .openb{display:none}
.fq-ask textarea{width:100%;min-height:70px;border:1px solid var(--border);border-radius:8px;padding:9px 11px;
    font:inherit;font-size:13px;line-height:1.55;outline:none;resize:vertical;background:var(--card)}
.fq-ask textarea:focus{border-color:var(--accent)}
.fq-ask .row{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.fq-ask .to{font-size:12px;color:var(--muted)}
.fq-ask .to b{color:var(--text);font-weight:600}
.fq-ask .lnk{background:none;border:none;padding:0;margin-left:6px;font:inherit;font-size:11px;font-weight:700;
    color:var(--muted);cursor:pointer;text-decoration:underline;text-decoration-color:#dcdfe4;text-underline-offset:2px}
.fq-ask .lnk:hover{color:var(--text)}
.fq-ask input[type=email]{width:210px;max-width:100%;border:1px solid var(--border);border-radius:8px;height:32px;
    padding:0 10px;font:inherit;font-size:13px;outline:none;display:none;background:var(--card)}
.fq-ask input[type=email]:focus{border-color:var(--accent)}
.fq-ask .send{margin-left:auto;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;
    height:32px;padding:0 15px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fq-ask .send:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.fq-ask .done{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--accent-dk);font-weight:600;margin-top:11px}
.fq-ask .done.on{display:flex}

@media(max-width:760px){
  .fq-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .fq-nav{border-right:none;border-bottom:1px solid var(--border);display:flex;gap:6px;overflow:auto;padding:12px 0}
}
@media(max-width:760px){
  .fq-nav button{width:auto;white-space:nowrap;border:1px solid var(--border);border-radius:999px;padding:7px 13px;box-shadow:none}
  .fq-nav button.on{background:var(--text);border-color:var(--text);color:#fff}
}
@media(max-width:760px){
  .fq-body{padding:18px 0 26px}
}
@media(max-width:560px){
  .fq-item .fq-a{padding-left:15px}
}

/* ============================================================================
   MEIN LADENPROFIL — aus `einzelhaendler/prepage-einzelhaendler.html`
   126 Regeln + 4 Media-Blöcke, unverändert übernommen 11.08.2026.
   ============================================================================ */

/* dieselbe Markierung im Profil-Tab (dort heißt das Feld .lp-fld, nicht .field) */
  .lp-fld.lp-miss > .lp-inp, .lp-fld.lp-miss > .lp-chips,
  .lp-fld.lp-miss > .lp-seg, .lp-fld.lp-miss > .lp-taginp{border:1.5px solid #e5820e!important;background:#fffdf7;border-radius:10px}
.lp-fld.lp-miss > .lp-lbl:after{content:' Pflicht';color:#e5484d;font-weight:800;font-size:11px;letter-spacing:.03em}
/* ===== Tab „Mein Ladenprofil" (Vorschau wie Marken es sehen) ===== */
/* [13.08.2026] Statt fester 172px ein Seitenverhältnis: jede Hälfte steht auf
     2,3:1 — genau dem Format, in dem Marken den Laden sehen (`.sh-split`). Vorher
     war die Hälfte hier ~3,5:1, derselbe Fokuspunkt sah also im eigenen Profil
     anders beschnitten aus als beim Empfänger. 4.6 = zwei Hälften à 2,3. */
  .lp-hero{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:4.6;border-radius:16px 16px 0 0;overflow:hidden;border:1px solid var(--border);border-bottom:none;margin-top:18px}
.lp-hero .half{position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#e4ebf1,#d6dee6);color:#8b939d;font-size:26px;overflow:hidden}
.lp-hero .half+.half{border-left:2px solid #fff;background:linear-gradient(135deg,#eceff3,#dfe5eb)}
/* position:absolute [14.08.]: Die Hälfte ist ein Grid, und seit dem Zuschnitt-Knopf
   (.edge) liegen zwei Kinder darin — das img rutschte in eine eigene Auto-Zeile,
   height:100% griff ins Leere und das Bild stand in Originalgröße im Rahmen
   (nur oben angeschnitten statt cover-Beschnitt). Absolut gesetzt füllt es
   immer die ganze Hälfte, identisch zur Fenster-Vorschau. */
.lp-hero .half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-hero .cap{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border:1px solid var(--border);
    border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);z-index:2}
.lp-shell{background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px;margin-bottom:48px}
.lp-note{padding:9px 22px 0;font-size:11px;color:var(--muted)}
.lp-id{display:flex;align-items:flex-end;gap:14px;padding:20px 22px 0;flex-wrap:wrap}
/* [13.08.2026] Der Überstand ins Titelbild war 46px — bei hohen Motiven schnitt
   die Bildkante direkt ins Symbol. Jetzt 24px: das Logo sitzt weiter auf der
   Kante, bekommt aber Luft nach oben. */
.lp-logo{width:70px;height:70px;border-radius:16px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;
    font-size:26px;color:#8b939d;flex:0 0 auto;margin-top:-10px;box-shadow:0 2px 10px rgba(16,18,29,.12);overflow:hidden}
.lp-logo img{width:100%;height:100%;object-fit:cover}
.lp-who{min-width:0;padding-bottom:4px}
.lp-who h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.lp-who .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.lp-edit{margin-left:auto;align-self:center;border:1px solid var(--border);background:var(--card);color:var(--text);
    border-radius:8px;height:34px;padding:0 14px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.lp-edit:hover{border-color:var(--accent);color:var(--green);background:var(--accent-soft)}
.lp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 22px 4px}
.lp-kpi{border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.lp-kpi .k{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#aab0b8}
.lp-kpi .v{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.lp-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:18px 22px 24px}
.lp-card{border:1px solid var(--border);border-radius:12px;padding:15px 16px;min-width:0}
.lp-card.full{grid-column:1/-1}
.lp-card h3{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.lp-card h3 .ed{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);background:none;border:none;cursor:pointer;padding:0;
    text-decoration:underline;text-decoration-color:var(--accent-rand);text-underline-offset:3px}
.lp-card h3 .ed:hover{text-decoration-color:currentColor}
.lp-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;font-size:13px;align-items:baseline}
.lp-kv .k{color:var(--muted)}
.lp-kv .k::after{content:":"}
.lp-kv .v{font-weight:600;min-width:0;overflow-wrap:anywhere}
.lp-kv .v.empty{font-weight:400;color:#b6bcc4}
.lp-text{font-size:13px;color:#4b5058;line-height:1.65}
.lp-text.empty{color:#b6bcc4}
.lp-group{margin-top:13px}
.lp-group:first-of-type{margin-top:0}
.lp-gh{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#aab0b8;margin-bottom:6px}
.lp-tags{display:flex;gap:6px;flex-wrap:wrap}
.lp-photos{display:flex;gap:9px;flex-wrap:wrap}
.lp-ph{width:100px;height:78px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,#e9edf2,#dde3ea);
    display:grid;place-items:center;font-size:11px;font-weight:600;color:#7b828c;overflow:hidden}
.lp-ph.miss{border:1.5px dashed var(--border);background:var(--bg);color:var(--muted)}
.lp-ph img{width:100%;height:100%;object-fit:cover}
/* Fotos: jede Kachel ist anklickbar — belegte wie leere. Klick öffnet den Zuschnitt
     dieses einen Fotos, ohne Umweg über ein anderes Formular. */
  .lp-ph{cursor:pointer;position:relative;padding:0;border-width:1px;font:inherit}
.lp-ph:hover{border-color:var(--accent)}
.lp-ph.miss:hover{color:var(--green);background:var(--accent-soft)}
.lp-ph .lab{position:absolute;left:0;right:0;bottom:0;background:rgba(16,18,29,.62);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 0;text-align:center}
.lp-ph .plus{font-size:17px;line-height:1;margin-bottom:3px;display:block}
.lp-hero .half{cursor:pointer}
.lp-hero .half .edge{position:absolute;right:10px;top:10px;z-index:2;background:rgba(255,255,255,.92);
    border:1px solid var(--border);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;
    font-size:13px;color:var(--muted)}
.lp-hero .half:hover .edge{color:var(--green);border-color:var(--accent)}
/* Zuschnitt-Fenster: ein wählbarer Bildmittelpunkt statt eines Ausschnitts je Verwendung.
     Titelbild-Hälfte (~3:1) und Kachel (~1,3:1) sind zu verschieden für einen gemeinsamen
     Ausschnitt; ein Fokuspunkt trägt beide und braucht nur eine Bilddatei. */
  .lp-crop{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.lp-crop.open{display:flex}
.lp-crop-bg{position:absolute;inset:0;background:rgba(16,18,29,.55)}
.lp-crop-box{position:relative;background:var(--card);border-radius:16px;width:min(760px,100%);
    max-height:92vh;overflow:auto;box-shadow:0 18px 60px rgba(16,18,29,.3)}
.lp-crop-hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}
.lp-crop-hd b{font-size:15px;letter-spacing:-.01em}
.lp-crop-hd .x{margin-left:auto;border:none;background:none;font-size:17px;color:var(--muted);cursor:pointer;padding:2px 4px}
.lp-crop-bd{padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px}
.lp-crop-stage{position:relative;border-radius:12px;overflow:hidden;background:#eef1f5;display:grid;place-items:center;
    min-height:210px;cursor:crosshair;touch-action:none}
.lp-crop-stage img{max-width:100%;max-height:340px;display:block;user-select:none;-webkit-user-drag:none}
.lp-crop-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
    border:2px solid #fff;background:rgba(44,180,97,.85);box-shadow:0 2px 8px rgba(16,18,29,.35);pointer-events:none}
.lp-crop-empty{display:grid;place-items:center;gap:8px;color:var(--muted);font-size:13px;text-align:center;padding:26px}
.lp-crop-side{display:grid;gap:12px;align-content:start}
.lp-crop-pv b{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:#aab0b8;margin-bottom:5px}
.lp-crop-pv .fr{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#eef1f5}
.lp-crop-pv .fr img{width:100%;height:100%;object-fit:cover;display:block}
/* Beide Vorschauen tragen das Seitenverhältnis der Stelle, die sie zeigen — sonst
     lügt die Vorschau. `--pv-ar` setzt `lpCropSyncAr()` beim Öffnen aus der echten
     Titelbild-Hälfte; der Startwert gilt nur, bis gemessen wurde.
     Marken-Sicht: `.sh-split` in marke/markenpool-marke.html, 1fr von zweien à 152 px. */
  .lp-crop-pv.hero  .fr{aspect-ratio:var(--pv-ar,2.3);height:auto}
.lp-crop-pv.marke .fr{aspect-ratio:2.3;height:auto}
.lp-crop-pv .pv-note{display:block;margin-top:5px;font-size:11px;color:#aab0b8}
.lp-crop-ft{display:flex;align-items:center;gap:8px;padding:13px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
.lp-crop-ft button{border-radius:8px;height:34px;padding:0 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.lp-crop-ft .save{border:1px solid var(--accent);background:var(--accent);color:#fff;margin-left:auto}
.lp-crop-ft .ghost{border:1px solid var(--border);background:var(--card);color:var(--text)}
.lp-crop-ft .del{border:1px solid var(--border);background:var(--card);color:#b4553a}
.lp-crop-ft .hint{font-size:11px;color:var(--muted);flex-basis:100%;margin-top:2px}
.lp-crop-ft button[disabled]{opacity:.5;cursor:default}
.lp-desc-ta{width:100%;min-height:120px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;
    font-size:13px;line-height:1.6;outline:none;resize:vertical;background:var(--card)}
.lp-desc-ta:focus{border-color:var(--accent)}
.lp-desc-foot{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.lp-desc-foot .sp{margin-left:auto;display:flex;gap:8px}
.lp-desc-foot button{border-radius:8px;height:31px;padding:0 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.lp-desc-foot .save{border:1px solid var(--accent);background:var(--accent);color:#fff}
.lp-desc-foot .cancel{border:1px solid var(--border);background:var(--card);color:var(--text)}
.lp-help{display:none;margin-top:11px;border:1px solid var(--border);background:#fcfcfd;border-radius:10px;padding:12px 13px;
    font-size:12.5px;color:#4b5058;line-height:1.6}
.lp-help.open{display:block}
.lp-help b{color:var(--text)}
.lp-help ul{margin:7px 0 0;padding-left:18px;display:grid;gap:4px}
/* Inline-Bearbeiten im Profil-Tab */
  body.lp-editing .lp-view{display:none}
body.lp-editing .lp-cards{grid-template-columns:minmax(0,1fr)}
body.lp-editing .lp-card{padding:16px 18px}
.lp-form{display:none}
body.lp-editing .lp-form{display:block}
body.lp-editing .lp-card h3 .ed{display:none}
.lp-bar{display:none;align-items:center;gap:10px;margin:14px 22px 0;padding:10px 12px;border:1px solid var(--accent-rand);
    background:var(--accent-soft);border-radius:10px;font-size:12.5px;color:var(--accent-dk);flex-wrap:wrap}
body.lp-editing .lp-bar{display:flex}
.lp-bar .sp{margin-left:auto;display:flex;gap:8px}
.lp-bar button{border-radius:8px;height:32px;padding:0 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.lp-bar .save{border:1px solid var(--accent);background:var(--accent);color:#fff}
.lp-bar .cancel{border:1px solid var(--border);background:var(--card);color:var(--text)}
/* Im Bearbeiten-Modus sind die Kennzahlen doppelt — sie stehen weiter unten als Felder.
     Kopf (Titelbild, Logo, Name, Adresse) bleibt bewusst stehen. */
  body.lp-editing .lp-kpis{display:none}
.lp-fld{margin-bottom:12px}
.lp-lbl{display:block;font-size:12px;font-weight:700;margin-bottom:5px}
.lp-lbl .rq{color:#d0764f}
.lp-lbl .opt{font-weight:400;color:var(--muted)}
.lp-inp{width:100%;border:1px solid var(--border);border-radius:8px;height:34px;padding:0 10px;font:inherit;
    font-size:13px;outline:none;background:var(--card);color:var(--text)}
.lp-inp:focus{border-color:var(--accent)}
.lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-chips{display:flex;gap:6px;flex-wrap:wrap;padding:2px}
.lp-chip{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 11px;font:inherit;
    font-size:12.5px;color:var(--muted);cursor:pointer}
.lp-chip:hover{background:var(--bg);color:var(--text)}
.lp-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dk);font-weight:600}
.lp-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.lp-seg button{border:1px solid var(--border);border-radius:10px;padding:9px 7px;text-align:center;font:inherit;
    font-size:12.5px;font-weight:600;background:var(--card);cursor:pointer;color:var(--text)}
.lp-seg button span{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px}
.lp-seg button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dk)}
.lp-taginp{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border:1px solid var(--border);border-radius:8px;
    padding:7px 9px;background:var(--card);min-width:0}
.lp-taginp .tagchip{max-width:100%;overflow-wrap:anywhere}
.lp-taginp input{border:none;outline:none;font:inherit;font-size:13px;flex:1;min-width:120px;background:none}
.lp-taginp .x{cursor:pointer;opacity:.55;font-size:11px}
.lp-sw{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--card)}
.lp-sw .knob{width:40px;height:23px;border-radius:999px;background:var(--accent);position:relative;flex:0 0 auto;border:none;padding:0;cursor:pointer}
.lp-sw .knob::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;right:3px;transition:.15s}
.lp-sw .knob.off{background:#cfd3da}
.lp-sw .knob.off::after{right:20px}
.lp-sw b{font-size:13px}
/* Fuß des Ladenprofils: die Einstellungen, die nicht ins Profil selbst gehören,
   aber von hier erreichbar sein müssen — bisher standen sie nur im Konto-Menü. */
.lp-fuss{display:grid;gap:var(--sp-3);margin:0 22px;
    padding:var(--sp-4) 0 var(--sp-5);border-top:1px solid var(--border)}
.lp-fuss-zeile{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.lp-fuss-zeile > .sp-btn{flex:0 0 auto}
.lp-fuss-txt{flex:1;min-width:240px;margin:0;font-size:var(--fs-klein);color:var(--muted);line-height:1.5}
.lp-standorthinweis{margin-top:var(--sp-3)}
.lp-err{display:none;margin:0 22px 8px;background:#fdecec;border:1px solid #f5c2c2;color:#b42318;border-radius:8px;padding:9px 11px;font-size:12.5px}

@media(max-width:820px){
  .lp-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .lp-cards{grid-template-columns:1fr}
}
@media(max-width:700px){
  .lp-crop-bd{grid-template-columns:1fr}
}
@media(max-width:700px){
  .lp-row2{grid-template-columns:1fr}
}

/* ============================================================================
   STANDORTE — Anordnung der neuen Seite `laden-standorte.html` (11.08.2026)
   Nur Gerüst. Jedes sichtbare Bauteil (Tabelle, Chip, Karte, Fenster, Badge)
   kommt aus `ui.css`; hier steht ausschließlich, wo es steht.
   ============================================================================ */
/* Rücksprung ins Ladenprofil. Der Reiter oben steht auf „Mein Ladenprofil" und
   sieht deshalb aus wie die Seite, auf der man schon ist — ohne diese Zeile gibt
   es sichtbar kein Zurück. */
.st-zeile{ cursor:pointer }
.st-zeile:hover td{ background:var(--bg) }
.st-zeile-akt{ white-space:nowrap }
.st-sw-zeile{ display:inline-flex; align-items:center; gap:8px }
.st-sw-lab{ font-size:var(--fs-klein); font-weight:600; color:var(--text-weich) }
.st-sw:disabled{ cursor:not-allowed; opacity:.55 }
/* An/Aus-Schalter je Standort — gleiche Formsprache wie der Schalter im
   Ladenprofil (.lp-sw .knob), nur kompakt für die Tabellenzeile. */
.st-sw{ width:36px; height:21px; border-radius:999px; background:var(--accent); position:relative;
  border:none; padding:0; cursor:pointer; vertical-align:middle; transition:background .15s }
.st-sw::after{ content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:#fff;
  top:3px; right:3px; left:auto; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.25) }
.st-sw.aus{ background:#cfd3da }
.st-sw.aus::after{ right:18px }
.st-zurueck{ display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
  font-size:var(--fs-klein); font-weight:600; color:var(--muted) }
.st-zurueck:hover{ color:var(--text) }
.st-kopf{ display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4) }
.st-kopf > div{ flex:1; min-width:240px }
.st-titel{ font-size:var(--fs-h1); letter-spacing:-.025em; font-weight:800; margin:0 }
.st-lede{ color:var(--muted); font-size:var(--fs-text); margin:6px 0 0; max-width:620px }
.st-filter{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:var(--sp-3) }
.st-filter b{ margin-left:6px; color:var(--muted); font-weight:700 }
.st-filter .an b{ color:inherit }
.st-fkopf{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4) }
.st-fkopf b{ font-size:var(--fs-h2); letter-spacing:-.02em; flex:1 }
.st-frumpf{ min-width:0 }
.st-knopfzeile{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.st-fotos{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:6px }
.st-fotos img{ width:96px; height:72px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border) }

/* --- Fotos je Standort ----------------------------------------------------
   [13.08.2026] Bisher zeigte der Standort seine Fotos nur an. Vier feste Plätze
   wie im Ladenprofil, jede Kachel ist der Auslöser für die Dateiwahl. Kein
   Zuschnitt-Fenster: der Standort speist keine Titelbild-Hälfte, ein mittiger
   Ausschnitt genügt hier. */
.st-fotogrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--sp-2); margin-top:6px }
.st-foto{ position:relative; aspect-ratio:4/3; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg); overflow:hidden; padding:0; cursor:pointer; display:grid; place-items:center;
  font:inherit; font-size:var(--fs-mikro); font-weight:700; color:var(--muted); text-align:center }
.st-foto:hover{ border-color:var(--accent); color:var(--green) }
.st-foto.leer{ border-style:dashed }
.st-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.st-foto .lab{ position:absolute; left:0; right:0; bottom:0; padding:3px 0; text-align:center;
  font-size:var(--fs-mikro); font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.st-foto img + .lab{ background:rgba(16,18,29,.62); color:#fff }
.st-foto .weg{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(16,18,29,.66); color:#fff; font-size:11px; display:grid; place-items:center; cursor:pointer }
.st-foto .plus{ display:block; font-size:16px; line-height:1; margin-bottom:2px }

/* --- Öffnungszeiten je Wochentag -----------------------------------------
   [13.08.2026] Freitext ergab je Laden eine andere Schreibweise. Sieben Zeilen,
   Ruhetag als Häkchen, daraus baut die Seite immer denselben Satz. */
/* Der Knopf steht direkt unter der Beschriftung; die eingestellten Zeiten
   erscheinen daneben, sobald es welche gibt. Kein Ersatztext, wenn nichts gesetzt
   ist — dann sagt schon das (i), was gilt. */
.st-zeitfeld{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:5px }
.st-zeitwert{ flex:1; min-width:0; font-size:var(--fs-klein); color:var(--text); overflow-wrap:anywhere }
.st-zeitwert:empty{ display:none }
.st-zeitplan{ display:grid; gap:6px }
.st-zeitzeile{ display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:var(--sp-2) }
.st-zeitzeile > b{ font-size:var(--fs-klein) }
.st-zeitzeile .paar{ display:flex; align-items:center; gap:6px; min-width:0 }
.st-zeitzeile .paar span{ color:var(--muted); font-size:var(--fs-klein) }
/* Uhrzeit-Feld mit zwei Pfeilen: eine Viertelstunde je Klick. Das Feld selbst ist
   ein Textfeld — `type="time"` sprang schon nach der ersten Ziffer weiter. */
.st-uhr{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto }
.st-uhr input{ width:96px; padding-right:26px; text-align:center; font-variant-numeric:tabular-nums }
.st-uhr input.falsch{ border-color:var(--pflicht) }
.st-uhr .pfeile{ position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:grid; gap:1px }
.st-uhr .pfeile button{ width:16px; height:12px; display:grid; place-items:center; padding:0;
  border:none; background:none; color:var(--muted); font-size:9px; cursor:pointer; line-height:1 }
.st-uhr .pfeile button:hover{ color:var(--text) }
.st-uhr .pfeile button:disabled{ color:var(--aus-text); cursor:default }
.st-zeitfehler{ font-size:var(--fs-klein); font-weight:600; color:var(--pflicht); line-height:1.4 }
.st-zeitzeile .ruhe{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-mikro);
  font-weight:600; color:var(--muted); white-space:nowrap; cursor:pointer }
.st-zeitzeile.zu .paar{ opacity:.4 }
@media(max-width:520px){
  .st-zeitzeile{ grid-template-columns:34px 1fr; row-gap:4px }
  .st-zeitzeile .ruhe{ grid-column:2 }
}


/* ============================================================================
   Beiwerk des Ladenprofils — (i)-Symbol, Verifiziert-Stempel, Aufgabenkarte,
   Schlagwort-Chips. Aus `prepage-einzelhaendler.html` übernommen, unverändert.
   ============================================================================ */

/* Einheitliches (i)-Symbol: eine visuelle Sprache für jeden Hilfe-Hinweis im Produkt.
     Größerer, unsichtbarer Trefferbereich (::before) macht den Tap am Handy leichter,
     ohne das sichtbare Symbol zu vergrößern. */
  .info-i,.info-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:50%;border:1.5px solid #b9c0c9;color:#8a93a0;
    background:transparent;font-size:11px;font-weight:800;font-style:normal;line-height:1;
    cursor:pointer;user-select:none;vertical-align:-2px;flex:0 0 auto;
    transition:border-color .12s ease,color .12s ease,background-color .12s ease}
.info-i::before,.info-ic::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.info-i:hover,.info-ic:hover,.info-i:active,.info-ic:active{
    border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.who .verif-stamp{height:18px;width:auto;vertical-align:-3px}
.reqbrand-name .verif-stamp{height:16px;vertical-align:-3px}
.vstatus .verif-stamp{height:20px;vertical-align:middle}



  /* Pflicht-Profilergänzung */
  .pf-todo{background:#fff;border:1px solid #f0d9b4;border-left:4px solid #e5820e;border-radius:12px;padding:15px 17px;display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}
.pf-todo .pt-ic{width:30px;height:30px;border-radius:50%;background:#e5820e;color:#fff;display:grid;place-items:center;flex:0 0 auto;font-size:17px;font-weight:800}
.pf-todo b{font-size:15px}
.pf-todo p{font-size:13px;color:#4b5058;margin-top:5px;line-height:1.5}
.pf-todo .pt-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.pf-todo .pt-chip{background:#fdf0dd;color:#a35c05;border:1px solid #f6dcb4;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.lp-taginp .tagchip{max-width:100%;overflow-wrap:anywhere}
/* „Spreat verifiziert"-Stempel (Bild) */
  .verif-stamp{height:30px;width:auto;vertical-align:-9px;display:inline-block}
.verif-stamp.big{height:64px;vertical-align:middle}
.tagchip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}
.tagchip.nogo{background:#fdecec;border:1px solid #f5c2c2;color:#b42318}
.tagchip.pref{background:var(--accent-soft);border:1px solid var(--accent-rand);color:var(--accent-dk)}
.tagchip.seek{background:#eef2ff;border:1px solid #c7d2fe;color:#3538cd}
.tagchip b{cursor:pointer;font-weight:800;opacity:.7}
.tagchip b:hover{opacity:1}