/* Backend-Stil für interne Werkzeuge (nur Innendienst und Marketing sehen das) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root { --bg:#f1f1f1; --karte:#fff; --text:#303030; --muted:#616161; --leise:#8a8a8a; --rand:#e3e3e3; --rand2:#cfcfcf; --dunkel:#303030; --rot:#b42318; --gruen:#14532d; --link:#005bd3; --schatten:0 1px 0 rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04) }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body { margin:0; height:100% }
body { font:400 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased }
button, input, select { font:inherit; color:inherit }
.app { max-width:640px; margin:0 auto; min-height:100%; display:flex; flex-direction:column }

header.top { background:#fff; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:500; border-bottom:1px solid var(--rand) }
header.top img { height:34px }
header.top .titel { font-weight:500; padding-left:10px; border-left:1px solid var(--rand) }
header.top button { margin-left:auto; background:#fff; border:1px solid var(--rand2); border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600; cursor:pointer }
.proto { background:#fff4d6; color:#5e4200; font-size:12px; padding:6px 16px; text-align:center }

main { flex:1; padding:16px 12px 96px }
h2 { font:700 20px/1.25 Inter, sans-serif; letter-spacing:-.01em; margin:2px 0 14px }
.kicker { font-size:12px; color:var(--muted); margin:0 }

.suche { position:sticky; top:55px; z-index:400; background:var(--bg); padding:4px 0 8px }
input[type=search], input[type=text], input[type=email], input[type=tel], input[type=url], select {
  width:100%; height:42px; padding:9px 12px; border:1px solid var(--rand2); border-radius:8px; background:#fff; font-size:16px; outline:none }
input:focus, select:focus { outline:2px solid var(--link); outline-offset:-1px }

.chips { display:flex; gap:6px; overflow-x:auto; padding:10px 0 2px; scrollbar-width:none }
.chip { flex:none; background:#fff; border:1px solid var(--rand2); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:500; cursor:pointer }
.chip[aria-pressed=true] { background:var(--dunkel); border-color:var(--dunkel); color:#fff }

.anzahl { font-size:12px; color:var(--muted); margin:6px 0 8px }
.liste { background:#fff; border-radius:12px; box-shadow:var(--schatten); overflow:hidden }
.karte { background:#fff; border:0; border-bottom:1px solid var(--rand); padding:12px 14px; cursor:pointer; text-align:left; width:100%; display:flex; flex-direction:column; gap:5px }
.karte:last-child { border-bottom:0 }
.karte:hover { background:#fafafa }
.karte .name { font-weight:600; font-size:14px; color:var(--link); margin:0; order:-1 }
.karte .ort { font-size:12.5px; color:var(--muted) }
.typen { display:flex; gap:4px; flex-wrap:wrap }
.typ { font-size:11.5px; font-weight:500; background:#ebebeb; color:var(--text); padding:2px 8px; border-radius:6px }
.badge { font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:6px; background:#e0f0ff; color:#00527c }
.badge.aus { background:#ebebeb; color:var(--muted) }
.leer { text-align:center; color:var(--muted); padding:30px 0 }
.mehr { width:100%; margin-top:10px }

nav.unten { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--rand); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); display:flex; justify-content:center; z-index:600 }
nav.unten .innen { max-width:640px; width:100%; display:flex }
nav.unten button { flex:1; background:none; border:none; padding:6px 0; font-size:11px; color:var(--leise); display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer }
nav.unten button[aria-current=page] { color:var(--text); font-weight:600 }
nav.unten svg { width:22px; height:22px }

.btn { background:var(--dunkel); color:#fff; border:1px solid var(--dunkel); border-radius:8px; padding:10px 14px; font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.08) }
.btn.zweit { background:#fff; color:var(--text); border-color:var(--rand2) }
.btn.klein { padding:6px 10px; font-size:12.5px }
.btn:disabled { opacity:.45 }

form { background:#fff; border-radius:12px; box-shadow:var(--schatten); padding:16px 14px }
form .feld { margin-bottom:14px }
label.l { display:block; font-size:13px; font-weight:500; margin:0 0 5px }
label.l .p { color:var(--rot) }
.zeile { display:grid; grid-template-columns:110px 1fr; gap:10px }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.check { display:flex; align-items:center; gap:10px; border:1px solid var(--rand2); background:#fff; border-radius:8px; padding:10px 12px; cursor:pointer; user-select:none; font-size:13.5px }
.check input { width:18px; height:18px; accent-color:var(--dunkel) }
.check.an { border-color:var(--dunkel); background:#f7f7f7; font-weight:500 }
.fehler { color:var(--rot); font-size:12.5px; margin-top:5px }
.feld.err input, .feld.err select { border-color:var(--rot) }
.feld.err .check { border-color:#f1c4bf }
.hinweis { font-size:12.5px; color:var(--muted); margin-top:5px }
.vorschlag { font-size:12.5px; margin-top:6px; background:#f7f7f7; border-radius:8px; padding:8px 10px; display:flex; gap:8px; align-items:center; justify-content:space-between }
.vorschlag button { border:none; background:var(--dunkel); color:#fff; border-radius:6px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer }
#karte { height:240px; border:1px solid var(--rand); border-radius:8px; margin-top:8px; z-index:1; background:#f1f1f1 }
.kachel-gedaempft { filter:grayscale(.92) brightness(1.06) contrast(.88) sepia(.08) }
.geo { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.geo .koord { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.schalter { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--rand2); border-radius:8px; padding:10px 12px; font-size:13.5px }
.schalter input { width:40px; height:22px; accent-color:var(--dunkel) }
.aktionen { display:flex; gap:8px; margin-top:20px }
.aktionen .btn { flex:1 }

.box { background:#fff; border-radius:12px; box-shadow:var(--schatten); padding:4px 14px }
.toast { position:fixed; left:50%; bottom:86px; transform:translateX(-50%); background:#1a1a1a; color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; z-index:900; display:none }
.verlauf li { list-style:none; border-bottom:1px solid var(--rand); padding:12px 0 }
.verlauf li:last-child { border-bottom:0 }
.verlauf ul { padding:0; margin:0 }
.verlauf .wann { font-size:12px; color:var(--leise) }
.verlauf b { font-weight:600; font-size:13.5px }
.verlauf .aend { font-size:12.5px; margin-top:3px }
.verlauf del { color:var(--rot) } .verlauf ins { color:var(--gruen); text-decoration:none; font-weight:600 }

.login { max-width:420px; margin:56px auto 0; padding:0 16px }
.login .logo { text-align:center; margin-bottom:28px }
.login .logo img { height:44px }
.login form { padding:20px 18px }
.zurueck { background:none; border:none; color:var(--link); padding:4px 0; margin:0 0 8px; cursor:pointer; font-size:13.5px; font-weight:500 }

/* ---------- Neue Bausteine (09.11.2026) ---------- */
.mini { font-size:12px; color:var(--muted); font-weight:400 }
.h3 { font:600 14px/1.3 Inter, sans-serif; margin:0 0 10px }
.kacheln { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px }
.kachel { background:#fff; border:0; border-radius:12px; box-shadow:var(--schatten); padding:12px 14px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px }
.kachel:hover { background:#fafafa }
.kachel .l { font-size:12.5px; color:var(--muted) }
.kachel .w { font:700 24px/1.2 Inter, sans-serif; letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.kachel .z { font-size:11.5px; color:var(--leise) }
.b-zeile { display:grid; grid-template-columns:1fr auto; gap:5px 10px; width:100%; background:none; border:0; padding:6px 0; text-align:left; cursor:pointer; font-size:13.5px }
.b-zeile .wert { font-weight:600; font-variant-numeric:tabular-nums }
.b-zeile .spur { grid-column:1 / -1; height:6px; background:#ebebeb; border-radius:3px; position:relative; overflow:hidden; display:block }
.b-zeile .fuell { position:absolute; left:0; top:0; bottom:0; background:var(--dunkel); border-radius:3px; display:block }
.b-zeile:hover span:first-child { color:var(--link) }
.aufgabe { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; background:none; border:0; border-top:1px solid var(--rand); padding:11px 14px; text-align:left; cursor:pointer; font-size:13.5px }
.aufgabe:first-of-type { margin-top:8px }
.aufgabe > span:first-child { display:flex; flex-direction:column; gap:1px }
.aufgabe b { font-weight:600 }
.aufgabe:hover:not(:disabled) { background:#fafafa }
.aufgabe:disabled { cursor:default; opacity:.6 }
.aufgabe .zahl { min-width:30px; text-align:center; font-weight:700; font-size:12.5px; background:#fff1d6; color:#5e4200; border-radius:999px; padding:3px 9px }
.aufgabe .zahl.null { background:#e3f1df; color:var(--gruen) }
.filterband { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#e0f0ff; color:#00527c; border-radius:8px; padding:8px 12px; margin:6px 0 4px; font-size:13px }
.filterband button { background:none; border:0; color:#00527c; font-weight:600; cursor:pointer; font-size:12.5px }
.anzahl { display:flex; justify-content:space-between; align-items:center }
button.link { background:none; border:0; color:var(--link); font-weight:500; cursor:pointer; padding:0; font-size:12.5px }
.badge.partner { background:#303030; color:#fff }
.titelzeile { display:flex; justify-content:space-between; align-items:flex-start; gap:10px }
.titelzeile .btn { flex:none; text-decoration:none; margin-top:14px }
h3.abschnitt { font:600 12px/1.3 Inter, sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--leise); margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--rand) }
form h3.abschnitt:first-child { margin-top:0; padding-top:0; border-top:0 }
.warnbox, .vorschlagbox { border-radius:8px; padding:10px 12px; margin:-6px 0 14px; font-size:13px }
.warnbox { background:#fff1d6; color:#4f3800 }
.vorschlagbox { background:#e0f0ff; color:#00334d }
.warnbox .vz, .vorschlagbox .vz { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0 0 }
.warnbox button, .vorschlagbox button { flex:none; background:#fff; border:1px solid var(--rand2); border-radius:6px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer }
input.fest { background:#f7f7f7; color:var(--muted) }
.checkout-vorschau { border:1px dashed var(--rand2); border-radius:10px; padding:10px 12px 12px; margin:-4px 0 14px; background:#fcfcfc }
.cv-frage { font-weight:600; font-size:14px; margin:6px 0 6px }
.cv-feld { height:40px; border:1px solid #1773b0; box-shadow:0 0 0 1px #1773b0; border-radius:5px; padding:10px 12px; background:#fff; font-size:14px; display:flex; align-items:center }
.cv-cursor { width:1px; height:16px; background:#303030; margin-left:1px; animation:blinken 1s steps(1) infinite }
@keyframes blinken { 50% { opacity:0 } }
.cv-liste { border:1px solid var(--rand); border-radius:5px; margin-top:4px; background:#fff; overflow:hidden }
.cv-treffer { padding:9px 12px; background:#f2f6fb; font-size:14px }
.umsatzbox { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#f7f7f7; border-radius:8px; padding:10px 12px; margin:-4px 0 14px }
.umsatzbox > div { display:flex; flex-direction:column; gap:1px }
.umsatzbox b { font-size:18px; font-variant-numeric:tabular-nums }
.umsatzbox .btn { text-decoration:none; flex:none }
.naehe { background:#fff; border-radius:12px; box-shadow:var(--schatten); padding:12px 14px; margin-bottom:6px }
.zeile2 { display:flex; gap:8px } .zeile2 input { flex:1 } .zeile2 .btn { flex:none }
input[type=range] { width:100%; accent-color:var(--dunkel) }
#grossKarte { height:52vh; min-height:300px; border-radius:12px; box-shadow:var(--schatten); margin-top:8px; z-index:1; background:#f1f1f1 }
.legende { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin:8px 0 6px }
.legende .punkt { width:11px; height:11px; border-radius:50%; background:#9a9a9a; border:2px solid #fff; box-shadow:0 0 0 1px var(--rand2); display:inline-block; margin-left:6px }
.legende .punkt.p { background:#303030; margin-left:0 }
.vkopf { display:flex; justify-content:space-between; align-items:center; gap:10px }
.gpunkt { width:14px; height:14px; border-radius:50%; background:#9a9a9a; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); transform:translateY(50%); cursor:pointer }
.gpunkt.p { background:#303030 }
.ggruppe { width:30px; height:30px; border-radius:50%; background:#303030; color:#fff; font:600 12px/30px Inter, sans-serif; text-align:center; box-shadow:0 0 0 5px rgba(48,48,48,.2); transform:translateY(50%); cursor:pointer }
.ginfo { font:13px/1.45 Inter, sans-serif; color:var(--text) } .ginfo a { color:var(--link); font-weight:600 }
nav.unten button span { white-space:nowrap }
/* Im Shopify-Admin liegt unten die Sidekick-Leiste: Navigation dort oben unter dem Kopf */
nav.unten.oben { position:sticky; top:0; bottom:auto; border-top:0; border-bottom:1px solid var(--rand); padding:4px 8px }
nav.unten.oben button { flex-direction:row; justify-content:center; gap:6px; font-size:12.5px }
nav.unten.oben svg { width:18px; height:18px }

/* Bündel-Kreise auf der Karte im Backend-Stil */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color:rgba(48,48,48,.18) }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color:#303030; color:#fff; font:600 12px/30px Inter, sans-serif }