/* mbk-city.css - Stylesheet der Webseite MBK.City (03.09.2026)
   Palette exakt aus der App (styles/mbk-theme.css, Dark Mode): bg #171522,
   card #221e30, text #f3f2f8, muted #a9a5ba, Flieder #b8abff, Verlauf
   #8b7cd8 -> #6559a9, Akzent #f0b429. Schrift Montserrat (Variable-Font
   aus der App, /fonts/). Aufbau: Grundlagen, Kopfzeile, Handy-Attrappe,
   Startseite (Held mit Slider, Zahlen, Schritte, Kartentypen, Web-Scan,
   Preise, Wer macht mit, News, App-Band, Fuss), dann die Unterseiten.
   Handy-Umbruch bei 860 px. Gebaut wird alles von seite/bauen.py. */

@import url(../fonts/montserrat.css);
/* Dunkel ist die Voreinstellung (:root). Hell haengt an der Klasse .hell am
   <html>-Element - sie wird im Kopf jeder Seite gesetzt, noch bevor etwas
   gemalt wird, damit es beim Umschalten nicht blitzt. Die Werte sind
   dieselben wie in der App (styles/mbk-theme.css, theme-light/theme-dark). */
:root { --bg:#171522; --card:#221e30; --text:#f3f2f8; --text2:#cdc9db; --muted:#a9a5ba; --primary:#b8abff; --primary2:#8b7cd8; --plum:#6559a9;
	--accent:#f0b429; --accent-text:#4a3708; --soft:#2c2740; --line:#322c47; --on-primary:#241f36; --shadow:0 10px 26px rgba(0,0,0,.45); --radius:20px;
	--top-bg:rgba(23,21,34,.82); --logo:#fff; --logo-haken:#b8abff; --rahmen:#0d0b14; --dia-bg:#1d1c26;
	--fuss-bg:#0f0d17; --fuss-text:#a9a5ba; --fuss-titel:#fff; --fuss-soft:#2c2740; --fuss-an:#b8abff;
	--store-bg:#fff; --store-text:#171522; --qr:#fff; --karten-bg:#1c1929; --karten-linie:#221e30; --karten-fleck:#2c2740;
	--attrib-bg:rgba(23,21,34,.8); --danger:#ff9a90; --danger-soft:rgba(255,154,144,.12);
	--schein-1:rgba(139,124,216,.75); --schein-2:rgba(101,89,169,.35); --schein-3:rgba(139,124,216,.55); --schein-4:rgba(101,89,169,.2); }
:root.hell { --bg:#f5f4f9; --card:#ffffff; --text:#2f2c3d; --text2:#4b4560; --muted:#7c7791; --primary:#6559a9; --primary2:#8b7cd8; --plum:#6559a9;
	--accent:#f0b429; --accent-text:#4a3708; --soft:#eeebf8; --line:#e6e3ef; --on-primary:#ffffff; --shadow:0 8px 22px rgba(47,44,61,.10); --radius:20px;
	--top-bg:rgba(245,244,249,.88); --logo:#2f2c3d; --logo-haken:#6559a9; --rahmen:#0d0b14; --dia-bg:#e9e7f2;
	--fuss-bg:#2f2c3d; --fuss-text:#9f9caf; --fuss-titel:#fff; --fuss-soft:rgba(255,255,255,.12); --fuss-an:#b8abff;
	--store-bg:#2f2c3d; --store-text:#fff; --qr:#2f2c3d; --karten-bg:#e9e7f2; --karten-linie:#ffffff; --karten-fleck:#ded9f0;
	--attrib-bg:rgba(245,244,249,.85); --danger:#b3453c; --danger-soft:#f8e9e7;
	--schein-1:rgba(139,124,216,.30); --schein-2:rgba(101,89,169,.12); --schein-3:rgba(139,124,216,.22); --schein-4:rgba(101,89,169,.08); }
* { box-sizing:border-box; } html,body { margin:0; padding:0; }
/* hidden muss auch gegen display:flex gewinnen - sonst bleibt z. B. der
   Lade-Balken der Scan-Seite stehen. */
[hidden] { display:none !important; }
body { font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--primary); text-decoration:none; } p { margin:0; }
h1,h2,h3 { margin:0; line-height:1.12; letter-spacing:-.015em; }
h1 { font-size:46px; font-weight:800; } h2 { font-size:34px; font-weight:800; } h3 { font-size:18px; font-weight:700; }
.wrap { max-width:1140px; margin:0 auto; padding:0 28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 26px; border-radius:14px; font-weight:700; font-size:15px; }
.btn-p { background:var(--primary); color:var(--on-primary); box-shadow:0 10px 24px rgba(184,171,255,.25); }
.btn-g { background:linear-gradient(135deg,#8b7cd8,#6559a9); color:#fff; box-shadow:0 10px 24px rgba(101,89,169,.45); }
.btn-a { background:var(--accent); color:var(--accent-text); }
.btn-o { background:transparent; color:var(--text); border:1.5px solid var(--line); }
.btn-o:hover { border-color:var(--primary); }
.btn-l { padding:18px 32px; font-size:17px; border-radius:16px; }
.muted { color:var(--muted); }
.ober { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); background:var(--soft); padding:7px 13px; border-radius:99px; margin-bottom:16px; }
.ober b { background:var(--accent); color:var(--accent-text); border-radius:99px; padding:2px 8px; font-size:10.5px; letter-spacing:.06em; }

/* Kopfzeile */
.top { position:sticky; top:0; z-index:9; background:var(--top-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:26px; height:70px; }
.logo { display:inline-flex; align-items:center; gap:6px; color:var(--logo); font-size:24px; letter-spacing:.02em; line-height:1; }
.logo svg path { stroke:var(--logo-haken); }
.logo b { font-weight:800; } .logo span { font-weight:200; letter-spacing:.06em; } .logo svg { width:30px; height:30px; }
.nav { display:flex; gap:22px; margin-left:8px; font-weight:600; font-size:14px; white-space:nowrap; }
.nav a { color:var(--text2); } .nav a.an { color:var(--primary); }
.top .rechts { margin-left:auto; display:flex; gap:10px; align-items:center; }
.top .rechts .btn { padding:10px 16px; font-size:13.5px; border-radius:11px; white-space:nowrap; }
/* Schalter Hell/Dunkel: ein Knopf, zwei Symbole - gezeigt wird immer das,
   worauf man WECHSELT (im Dunkeln also die Sonne). */
.modus { width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line); background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0; }
.modus:hover { border-color:var(--primary); color:var(--primary); }
.modus svg { width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.modus .sonne { display:block; } .modus .mond { display:none; }
:root.hell .modus .sonne { display:none; } :root.hell .modus .mond { display:block; }
/* Auf dem Handy ist in der Kopfzeile kein Platz: dort steht der Schalter als
   letzte Zeile im Burger-Menue (siehe Media-Abfrage weiter unten). */
.nav .nav-modus { display:none; }
.nav-modus svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.nav-modus .mond, .nav-modus b.mond { display:none; }
:root.hell .nav-modus .sonne, :root.hell .nav-modus b.sonne { display:none; }
:root.hell .nav-modus .mond { display:block; } :root.hell .nav-modus b.mond { display:inline; }
.nav-modus b { font-weight:600; }
/* Sprachknopf: dieselbe Form wie der Hell/Dunkel-Knopf, nur mit Text drin. */
.modus.sprache { width:auto; min-width:40px; padding:0 11px; font-weight:800; font-size:13px; letter-spacing:.04em; text-decoration:none; }
.nav .nav-sprache { display:none; }
.burger { display:none; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line); align-items:center; justify-content:center; margin-left:auto; }
.burger i { display:block; width:18px; height:2px; background:var(--text); box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text); }

/* Handy mit App im Dark Mode */
.handy { width:300px; height:640px; border-radius:46px; background:var(--rahmen); padding:12px; box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px #3a3650, inset 0 0 0 2px #2a2638; position:relative; }
.handy::before { content:""; position:absolute; left:50%; top:22px; width:96px; height:26px; margin-left:-48px; background:var(--rahmen); border-radius:99px; z-index:2; }
.schirm { width:100%; height:100%; border-radius:36px; background:var(--bg); overflow:hidden; display:flex; flex-direction:column; }
.schirm .kopf { padding:54px 18px 12px; display:flex; align-items:center; justify-content:space-between; }
.schirm .kopf .logo { font-size:17px; } .schirm .kopf .logo svg { width:20px; height:20px; }
.schirm .kopf i { font-style:normal; width:28px; height:28px; border-radius:9px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:13px; }
.app-hallo { padding:0 18px 10px; } .app-hallo b { display:block; font-size:15px; } .app-hallo span { font-size:11px; color:var(--muted); }
.app-karte { margin:0 14px; background:linear-gradient(145deg,#6559a9,#3d3468); border-radius:18px; padding:14px; box-shadow:var(--shadow); color:#fff; }
.app-karte .zeile { display:flex; align-items:center; gap:10px; }
.app-karte .lg { width:38px; height:38px; border-radius:12px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:20px; }
.app-karte .zeile b { display:block; font-size:13px; } .app-karte .zeile span { font-size:10.5px; opacity:.75; }
.stempel { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.stempel i { aspect-ratio:1; border-radius:50%; border:2px dashed rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:14px; font-style:normal; }
.stempel i.voll { background:#fff; border-color:#fff; color:var(--plum); }
.stempel i.ziel { border-color:var(--accent); background:rgba(240,180,41,.18); }
.app-karte .fort { margin-top:12px; font-size:10px; gap:6px; opacity:.85; display:flex; justify-content:space-between; }
.app-karte .fort b { color:#fff; }
.app-liste { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.app-liste .k { background:var(--card); border-radius:14px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); }
.app-liste .k i { font-style:normal; width:32px; height:32px; border-radius:10px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:16px; }
.app-liste .k b { display:block; font-size:11.5px; white-space:nowrap; } .app-liste .k span { font-size:10px; color:var(--muted); }
.app-liste .k em { margin-left:auto; white-space:nowrap; font-style:normal; font-size:11px; font-weight:800; color:var(--primary); background:var(--soft); border-radius:99px; padding:3px 8px; }
.app-tab { margin-top:auto; display:flex; justify-content:space-around; align-items:flex-end; padding:8px 6px 14px; background:var(--card); border-top:1px solid var(--line); font-size:9px; color:var(--muted); text-align:center; position:relative; }
.app-tab i { display:block; font-style:normal; font-size:16px; }
.app-tab .scan { width:54px; height:54px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-size:22px; margin-top:-30px; box-shadow:0 8px 20px rgba(184,171,255,.4); }
.app-tab b { color:var(--primary); }

/* Drei Schritte (gemeinsamer zweiter Abschnitt) */
.sec { padding:80px 0; }
.sec-head { text-align:center; max-width:720px; margin:0 auto 44px; } .sec-head p { color:var(--muted); font-size:17px; margin-top:12px; }
.schritte { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.schritt { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; position:relative; }
.schritt .nr { width:44px; height:44px; border-radius:14px; background:var(--primary); color:var(--on-primary); font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.schritt .dauer { position:absolute; right:18px; top:24px; font-size:11.5px; font-weight:700; color:var(--accent-text); background:var(--accent); padding:4px 9px; border-radius:99px; }
.schritt h3 { margin-bottom:8px; } .schritt p { color:var(--muted); font-size:14.5px; }
.schritt .bild { margin-top:18px; background:var(--soft); border-radius:14px; padding:14px; font-size:12.5px; color:var(--text2); }
.mini-feld { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-top:6px; font-size:12px; color:var(--muted); } .mini-feld b { color:var(--text); }
.qr { width:84px; height:84px; margin:0 auto; background:conic-gradient(var(--qr) 25%,transparent 0 50%,var(--qr) 0 75%,transparent 0) 0 0/28px 28px; border-radius:8px; opacity:.9; }
.schritte-cta { text-align:center; margin-top:36px; }

/* Kopfzeile auf mittleren Breiten (11.09.2026)
   -------------------------------------------------------------------------
   Befund: Logo (161) + Menue (500) + die beiden Knoepfe (412) brauchen mit
   dem Rand zusammen rund 1130 Pixel. Zwischen 861 und 1160 Pixeln passte das
   nicht nebeneinander - die Seite lief bis zu 300 Pixel nach rechts aus dem
   Bild, auf jedem 1024er-Laptop und auf dem iPad quer.

   Zwei Stufen statt eines Sprungs:
     1041 bis 1200   Menue und Knoepfe ruecken enger zusammen, alles bleibt da
     bis 1040        das Burger-Menue uebernimmt, wie vorher schon bis 860 */
@media (min-width:1041px) and (max-width:1200px) {
	.top .wrap { padding:0 18px; }
	.top .nav { gap:12px; }
	.top .nav a { font-size:13px; }
	.top .rechts { gap:8px; }
	.top .rechts .btn { padding:9px 12px; font-size:13px; }
	.top .modus { width:36px; height:36px; }
}
/* ---- sammeln.html: "So sammelst du Stempel" (12.09.2026) ------------------ */
.zwei-wege { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto 64px; }
.weg-karte { background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:32px 30px 28px; text-align:center; cursor:pointer; font:inherit; color:var(--text); display:block; width:100%; transition:border-color .15s, box-shadow .15s, transform .15s; position:relative; }
.weg-karte:hover { border-color:var(--primary2); transform:translateY(-2px); }
.weg-karte.an { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); cursor:default; transform:none; }
.weg-karte.an::after { content:"\2713"; position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--on-primary); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.weg-karte h3 { margin:14px 0 10px; font-size:20px; } .weg-karte p { color:var(--muted); font-size:15px; line-height:1.55; max-width:340px; margin:0 auto; } .weg-karte b { color:var(--text); }
.weg-karte em { display:inline-block; margin-top:16px; font-style:normal; font-size:12.5px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.weg-karte.an em { color:var(--primary); border-color:var(--primary); }
.app-kachel { max-width:240px; margin:0 auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 22px; }
/* Echtes App-Icon in der Kachel (12.09.2026, Dejan). */
.app-kachel img.ikon { display:block; width:96px; height:96px; margin:0 auto 14px; border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.35); }
.app-kachel b { display:block; font-size:18px; } .app-kachel span { display:block; font-size:13px; color:var(--muted); margin-top:4px; }
.weg { list-style:none; margin:0 auto; padding:0; max-width:1000px; display:flex; flex-direction:column; gap:40px; counter-reset:none; }
.weg .schritt { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; padding:44px 48px; }
.weg .schritt:nth-child(even) .txt { order:2; } .weg .schritt:nth-child(even) .bild { order:1; }
.weg .schritt .nr { margin-bottom:18px; width:50px; height:50px; font-size:20px; } .weg .schritt h3 { font-size:25px; margin-bottom:12px; }
.weg .schritt p { font-size:16px; line-height:1.6; color:var(--text2); margin-top:10px; } .weg .schritt p b { color:var(--text); }
.weg .schritt p.klein { font-size:13.5px; color:var(--muted); margin-top:14px; }
.weg .schritt .txt .stores { margin-top:22px; }
.weg .schritt .bild { margin-top:0; background:var(--soft); padding:26px; border-radius:20px; }
.weg .bild .u { text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
.kamera-gross { aspect-ratio:1; max-width:240px; margin:0 auto; border-radius:20px; background:var(--rahmen); position:relative; display:flex; align-items:center; justify-content:center; }
.kamera-gross::after { content:""; position:absolute; inset:16%; border:3px solid var(--accent); border-radius:14px; }
.kamera-gross .qr { width:96px; height:96px; opacity:.55; }
.weg .browser .inhalt.eins { grid-template-columns:1fr; padding:16px; }
.weg .scan-stand { margin-top:0; }
.weg .scan-stand.voll { background:linear-gradient(145deg,#c58a15,#8a5c05); }
.weg .scan-code { margin-top:0; }
.mini-feld.app-feld { margin-top:16px; padding:14px 16px; }
.mini-feld.app-feld b { display:block; font-size:13px; margin-bottom:8px; }
.mini-feld.app-feld .feld { display:flex; gap:8px; align-items:center; }
.mini-feld.app-feld .feld span { flex:1; border:1.5px solid var(--line); border-radius:9px; padding:8px 10px; letter-spacing:.18em; font-weight:800; color:var(--primary); background:var(--bg); }
.mini-feld.app-feld .feld em { font-style:normal; background:var(--primary); color:var(--on-primary); border-radius:9px; padding:8px 12px; font-weight:800; font-size:12px; white-space:nowrap; }
.app-liste-klein { display:flex; flex-direction:column; gap:12px; }
.app-liste-klein .zeile { display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.app-liste-klein .lg { width:36px; height:36px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.app-liste-klein b { display:block; font-size:14px; } .app-liste-klein span { font-size:12px; color:var(--muted); }
.praemie-klein { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-weight:800; font-size:15px; text-align:center; }
@media (max-width:860px) {
	.zwei-wege { grid-template-columns:1fr; gap:16px; margin-bottom:44px; }
	.weg { gap:28px; }
	/* Auf dem Handy alles mittig: Nummer, Ueberschrift, Text, Bild (Dejan, 12.09.2026). */
	.weg .schritt { grid-template-columns:1fr; gap:24px; padding:32px 22px; text-align:center; }
	.weg .schritt .nr { margin-left:auto; margin-right:auto; }
	.weg .schritt .txt .stores { justify-content:center; }
	.weg .schritt:nth-child(even) .txt { order:1; } .weg .schritt:nth-child(even) .bild { order:2; }
	.weg .schritt .bild { padding:20px; }
}
/* Kundenseite (scan.html, Firmenseiten): statt der Haendler-Knoepfe steht im
   Kopf "So funktioniert es" (12.09.2026) - die Bausteine setzen ihn selbst. */
/* Store-Knoepfe auf der Kundenseite: mittig und groesser. */
.scan-app { flex-direction:column; text-align:center; gap:14px; }
.scan-app .stores, .scan-app-holen .stores { justify-content:center; flex-wrap:wrap; }
.scan-app .store, .scan-app-holen .store { padding:12px 14px; font-size:14px; border-radius:12px; min-width:132px; justify-content:center; gap:10px; }
.scan-app .store span { color:var(--store-text); }   /* .scan-app span ist sonst grau */
.scan-app .store i, .scan-app-holen .store i { font-size:22px; } .scan-app .store small, .scan-app-holen .store small { font-size:10px; }
.scan-app-holen .scan-hin { text-align:center; }
.scan-code .kopieren { width:auto; margin-top:12px; padding:9px 16px; font-size:13.5px; }
.scan-anleitung { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.scan-anleitung li { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text2); line-height:1.45; }
.scan-anleitung li i { flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--soft); color:var(--primary); font-style:normal; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
@media (max-width:1040px) {
	.nav, .top .rechts .btn-o { display:none; } .burger { display:flex; }
}

/* Sehr schmale Geraete (iPhone SE, aeltere Android-Handys): Logo (135),
   Knopf (139) und Burger (40) brauchen mit Rand und Abstand zusammen 390
   Pixel - bei 320 blieb die Seite dauerhaft zur Seite geschoben. Hier wird
   der Rand schmaler und im Logo entfaellt das Wort "CITY"; das Zeichen
   bleibt stehen. (11.09.2026) */
@media (max-width:400px) {
	.top .wrap { padding:0 14px; gap:6px; }
	.burger { width:34px; }
	.logo span { display:none; }
	.top .rechts .btn-p { padding:8px 10px; font-size:12px; }
}

@media (max-width:860px) {
	h1 { font-size:34px; } h2 { font-size:27px; }
	.sec { padding:52px 0; }
	.nav, .top .rechts .btn-o { display:none; } .burger { display:flex; }
	.schritte { grid-template-columns:1fr; }
	.handy { width:270px; height:570px; } .app-liste .k:nth-child(2) { display:none; }
}
.stores { display:flex; gap:10px; } .store { display:inline-flex; align-items:center; gap:8px; background:var(--store-bg); color:var(--store-text); border-radius:10px; padding:8px 14px; font-size:12px; font-weight:700; line-height:1.1; }
.store small { display:block; font-size:9px; font-weight:500; opacity:.7; } .store i { font-style:normal; font-size:18px; }
/* ---- Held mit Slider ------------------------------------------------- */
.held { position:relative; overflow:hidden; }
.held::before { content:""; position:absolute; right:-6%; top:-16%; width:820px; height:820px; border-radius:50%; background:radial-gradient(circle, var(--schein-1) 0%, var(--schein-2) 30%, rgba(101,89,169,0) 65%); pointer-events:none; }
.held .wrap { display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; padding-top:64px; padding-bottom:70px; position:relative; }
.held h1 span { color:var(--primary); }
.held p.unter { font-size:18px; color:var(--text2); margin:20px 0 28px; max-width:520px; }
.ctas { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .ctas small { display:block; width:100%; color:var(--muted); font-size:13px; margin-top:8px; }
.held .stores { margin-top:28px; }
.held-bild { display:flex; flex-direction:column; align-items:center; }
.innen { position:relative; width:300px; }
.blase { position:absolute; z-index:3; white-space:nowrap; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:10px 14px; font-size:12.5px; font-weight:700; display:flex; gap:10px; align-items:center; pointer-events:none; }
.blase i { font-style:normal; width:30px; height:30px; border-radius:9px; background:var(--soft); display:flex; align-items:center; justify-content:center; }
.blase small { display:block; font-weight:500; color:var(--muted); }
.b1 { left:-165px; top:60px; } .b2 { right:-150px; top:230px; } .b3 { left:-165px; bottom:80px; }
.handy { touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.slider { position:absolute; inset:12px; border-radius:36px; overflow:hidden; background:var(--bg); }
.spur { display:flex; height:100%; transition:transform .45s cubic-bezier(.22,.8,.3,1); will-change:transform; }
.spur.zieht { transition:none; }
.dia { flex:0 0 100%; height:100%; position:relative; overflow:hidden; }
.dia img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.dia.contain img { object-fit:contain; background:var(--dia-bg); }
.dia .schirm { border-radius:0; }
.dia .handy-inhalt { height:100%; }
.dia .handy::before { display:none; }
/* Pfeile ausserhalb des Handys */
.pfeil { position:absolute; top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:20px; z-index:4; cursor:pointer; box-shadow:var(--shadow); }
.pfeil.links { left:-58px; } .pfeil.rechts { right:-58px; }
.pfeil:hover { border-color:var(--primary); color:var(--primary); }
.unterzeile { margin-top:22px; text-align:center; width:340px; min-height:64px; }
.unterzeile b { display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); background:var(--soft); border-radius:99px; padding:4px 10px; margin-bottom:6px; }
.unterzeile span { display:block; font-size:13.5px; color:var(--text2); line-height:1.45; }
.punkte { display:flex; justify-content:center; gap:7px; margin-top:12px; }
.punkte i { width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s; }
.punkte i.an { background:var(--primary); width:24px; border-radius:4px; }
.zahlen { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--card); border-radius:var(--radius); position:relative; z-index:2; }
.zahlen div { padding:22px 18px; text-align:center; border-right:1px solid var(--line); } .zahlen div:last-child { border-right:0; }
.zahlen b { display:block; font-size:28px; color:var(--primary); } .zahlen span { font-size:13px; color:var(--muted); font-weight:600; }

/* ---- weitere Abschnitte ---------------------------------------------- */
.sec-soft { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec-soft .schritt, .sec-soft .typ, .sec-soft .paket, .sec-soft .artikel { background:var(--bg); }
.typen { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.typ { background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:8px; color:var(--text); }
.typ:hover { border-color:var(--primary); }
.typ .ic { width:46px; height:46px; border-radius:14px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:24px; }
.typ b { font-size:16px; font-weight:700; } .typ span { font-size:13.5px; color:var(--muted); line-height:1.45; }
.typ em { font-style:normal; font-size:12px; font-weight:700; color:var(--primary); margin-top:auto; padding-top:6px; }
.typ-hin { text-align:center; color:var(--muted); font-size:14px; margin-top:22px; } .typ-hin b { color:var(--text); }

.webscan .wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.webscan ul { list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-direction:column; gap:12px; }
.webscan li { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text2); }
.webscan li i { flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--soft); color:var(--primary); font-style:normal; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; }
.webscan li b { color:var(--text); }
.browser { background:var(--card); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); }
.browser .leiste { background:var(--soft); padding:10px 14px; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.browser .leiste i { width:10px; height:10px; border-radius:50%; background:var(--line); }
.browser .leiste span { margin-left:8px; background:var(--bg); border-radius:8px; padding:4px 10px; flex:1; }
.browser .inhalt { padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; }
.kamera { aspect-ratio:1; border-radius:16px; background:var(--rahmen); position:relative; display:flex; align-items:center; justify-content:center; }
.kamera::after { content:""; position:absolute; inset:18%; border:3px solid var(--accent); border-radius:12px; }
.kamera .qr { opacity:.5; }
.erfolg { background:var(--soft); border-radius:14px; padding:16px; }
.erfolg b { display:block; font-size:15px; } .erfolg p { font-size:12.5px; color:var(--muted); margin:6px 0 12px; }
.erfolg .btn { padding:10px 14px; font-size:12.5px; width:100%; border-radius:10px; } .erfolg .btn + .btn { margin-top:6px; }

.pakete { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.paket { background:var(--card); border-radius:var(--radius); border:1.5px solid var(--line); padding:28px 26px; display:flex; flex-direction:column; position:relative; }
.paket.top { border-color:var(--primary); box-shadow:0 0 0 4px rgba(184,171,255,.12); }
.paket .tipp { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-text); border-radius:99px; padding:5px 14px; font-size:12px; font-weight:800; white-space:nowrap; }
.paket h3 { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.paket .preis { font-size:38px; font-weight:800; margin:10px 0 2px; } .paket .preis small { font-size:15px; color:var(--muted); font-weight:600; }
.paket .jahr { font-size:12.5px; color:var(--muted); margin-bottom:18px; }
.paket ul { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--text2); }
.paket li { position:relative; padding-left:22px; } .paket li::before { content:"\2713"; color:var(--primary); font-weight:800; position:absolute; left:0; }
.paket li.plus { font-weight:700; color:var(--text); }
.paket .btn { margin-top:auto; }
/* Zweiter Preis in derselben Karte (Premium mit MBK Team Service). Der Block
   sitzt unten, direkt ueber dem Knopf, und ist durch eine feine Linie
   abgesetzt - so bleibt der Hauptpreis oben der, den man zuerst liest. */
.paket .service { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); line-height:1.55; }
.paket .service > b { display:block; color:var(--text); font-size:21px; font-weight:800; margin-bottom:3px; }
.paket .service > b small { font-size:13px; color:var(--muted); font-weight:600; margin-left:5px; }
.paket .service span b { color:var(--text2); font-weight:700; }
.paket .service a { color:var(--primary); font-weight:700; white-space:nowrap; }
/* Dejan, 04.09.2026: "jetzt starten und in der App buchen muss hoch zu den
   9,99" - der Knopf gehoert zum Preis darueber, nicht ans Kartenende. Er
   steht jetzt direkt unter der Liste (kein margin-top:auto), und der
   49,99-Block mit dem Team-Service rutscht ans untere Ende der Karte. */
.paket ul + .btn { margin-top:0; margin-bottom:22px; }
.preis-hin { text-align:center; margin-top:26px; color:var(--muted); font-size:14px; } .preis-hin b { color:var(--text); }

.suche { display:flex; gap:10px; max-width:760px; margin:0 auto 26px; }
.suche input { flex:1; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); font:inherit; font-size:15px; background:var(--card); color:var(--text); }
.firmen { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.firma { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; gap:14px; align-items:flex-start; }
.firma .logo2 { width:56px; height:56px; border-radius:14px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.firma b { display:block; font-size:15px; } .firma .ort { font-size:12.5px; color:var(--muted); }
.firma .praemie { margin-top:8px; font-size:12.5px; color:var(--text2); background:var(--soft); border-radius:9px; padding:5px 9px; display:inline-block; } .firma .praemie::before { content:"\1F381  "; }
.karte-box { margin-top:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.landkarte { height:300px; position:relative; background:
	radial-gradient(circle at 20% 30%, var(--karten-fleck) 0 40px, transparent 41px), radial-gradient(circle at 70% 60%, var(--karten-fleck) 0 60px, transparent 61px),
	repeating-linear-gradient(0deg, var(--karten-bg) 0 38px, var(--karten-linie) 38px 40px), repeating-linear-gradient(90deg, var(--karten-bg) 0 38px, var(--karten-linie) 38px 40px); }
.pin { position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--primary); border:3px solid var(--bg); box-shadow:0 4px 10px rgba(0,0,0,.4); }
.pin.a { background:var(--accent); }
.karte-box .unter { padding:14px 18px; display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--muted); }

.news { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.artikel { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.artikel .bild { height:130px; background:linear-gradient(135deg,#8b7cd8,#6559a9); display:flex; align-items:center; justify-content:center; font-size:42px; }
.artikel .txt { padding:16px 18px 18px; } .artikel .datum { font-size:12px; color:var(--muted); font-weight:600; }
.artikel h3 { font-size:15.5px; margin:6px 0 6px; } .artikel p { font-size:13.5px; color:var(--muted); }

/* Stadt-Silhouette im Band ueber dem Fuss (Dejan, 10.09.2026: dieselbe
   Silhouette wie in der App und auf den Store-Bildern). Gezeichnet mit
   -webkit-mask, damit keine zweite, eingefaerbte Bilddatei noetig ist -
   die Farbe ist einfach Weiss bei 13 %. */
.band { background:linear-gradient(135deg,#8b7cd8,#6559a9); color:#fff; position:relative; overflow:hidden; }
.band::after {
	content:""; position:absolute; left:0; right:0; bottom:0; height:150px;
	background-color:#fff; opacity:.13; pointer-events:none;
	-webkit-mask:url(../bilder/stadt-silhouette.png) bottom center / auto 150px repeat-x;
	        mask:url(../bilder/stadt-silhouette.png) bottom center / auto 150px repeat-x;
}
.band > .wrap { position:relative; z-index:1; }
.band .wrap { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding-top:44px; padding-bottom:44px; }
.band h2 { color:#fff; } .band p { opacity:.88; margin-top:8px; font-size:16px; }
.band .store { background:#171522; color:#fff; }

.fuss { background:var(--fuss-bg); color:var(--fuss-text); font-size:13.5px; border-top:1px solid var(--line); }
.fuss .wrap { display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:30px; padding-top:56px; padding-bottom:30px; }
/* "Nutzungsbedingungen" und "Datenschutzerklaerung" sind auf einem sehr
   schmalen Handy breiter als ihre Spalte - sie duerfen umbrechen.
   (11.09.2026) */
.fuss .wrap a { overflow-wrap:anywhere; }
.fuss h4 { color:var(--fuss-titel); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.fuss a { color:var(--fuss-text); display:block; margin-bottom:8px; } .fuss a:hover { color:var(--fuss-an); }
.fuss .ueber p { line-height:1.6; }
.fuss .social { display:flex; gap:8px; margin-top:16px; }
.fuss .social a { width:34px; height:34px; border-radius:10px; background:var(--fuss-soft); display:flex; align-items:center; justify-content:center; margin:0; font-weight:800; font-size:12px; color:#fff; }
/* 14.09.2026: gezeichnete Symbole statt der Buchstaben f/IG/in - Strichstil
   wie im Rest der Seite, .voll markiert die ausgefuellten Teile. */
.fuss .social a svg { width:21px; height:21px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fuss .social a svg .voll { fill:currentColor; stroke:none; }
.fuss .social a:hover { background:var(--primary); color:#fff; }
.fuss .unten { border-top:1px solid rgba(255,255,255,.10); }
.fuss .unten .wrap { display:flex; justify-content:space-between; padding:18px 28px; font-size:12.5px; }
.fuss .unten span a { display:inline; margin:0 0 0 14px; }

@media (max-width:860px) {
	.held .wrap { grid-template-columns:1fr; text-align:center; padding-top:40px; padding-bottom:44px; }
	.held p.unter { margin-left:auto; margin-right:auto; } .ctas, .held .stores { justify-content:center; }
	.held-bild { margin-top:36px; } .innen { width:270px; }
	.handy { width:270px; height:570px; }
	.blase { display:none; }
	.top .wrap { gap:10px; } .top .rechts .modus { display:none; } .top .nav.offen .nav-modus, .top .nav.offen .nav-sprache { display:flex; align-items:center; gap:10px; color:var(--text); } .logo { font-size:20px; } .logo svg { width:24px; height:24px; } .top .rechts .btn-p { padding:9px 12px; font-size:12.5px; } .burger { margin-left:0; flex-shrink:0; }
	.pfeil { width:38px; height:38px; margin-top:-19px; } .pfeil.links { left:-52px; } .pfeil.rechts { right:-52px; }
	.unterzeile { width:300px; }
	.zahlen { grid-template-columns:1fr 1fr; margin-top:30px; } .zahlen div:nth-child(2) { border-right:0; } .zahlen div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
	.typen, .pakete, .firmen, .news { grid-template-columns:1fr; }
	.webscan .wrap { grid-template-columns:1fr; } .browser .inhalt { grid-template-columns:1fr; }
	.band .wrap { grid-template-columns:1fr; text-align:center; } .band .stores { justify-content:center; }
	.fuss .wrap { grid-template-columns:repeat(2,minmax(0,1fr)); } .fuss .unten .wrap { flex-direction:column; gap:8px; text-align:center; }
	.paket.top { order:-1; }
}


.seite-kopf { padding:56px 0 34px; text-align:center; position:relative; overflow:hidden; }
.seite-kopf::before { content:""; position:absolute; left:50%; top:-300px; width:900px; height:600px; margin-left:-450px; border-radius:50%; background:radial-gradient(ellipse, var(--schein-3) 0%, var(--schein-4) 40%, rgba(101,89,169,0) 70%); pointer-events:none; }
.seite-kopf .wrap { position:relative; }
.seite-kopf h1 { font-size:40px; } .seite-kopf p { color:var(--muted); font-size:17px; max-width:680px; margin:14px auto 0; }
.krume { font-size:13px; color:var(--muted); margin-bottom:14px; } .krume a { color:var(--muted); } .krume b { color:var(--text); font-weight:600; }
.faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:0 20px; }
.faq summary { cursor:pointer; padding:16px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after { content:"+"; color:var(--primary); font-size:20px; }
.faq details[open] summary::after { content:"\2013"; }
.faq p { padding:0 0 16px; color:var(--text2); font-size:14.5px; }
/* Kartentypen */
/* minmax(0,1fr) statt 1fr - siehe Hinweis bei .bkacheln: sonst ist eine
   Spalte immer mindestens so breit wie ihr laengstes Wort. (11.09.2026) */
.typ-reihe { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.typ-karte { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; }
.typ-karte .ic { width:56px; height:56px; border-radius:16px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:28px; }
.typ-karte h3 { font-size:19px; margin-bottom:4px; } .typ-karte .kurz { color:var(--muted); font-size:14px; margin-bottom:12px; }
.typ-karte dl { margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; font-size:13.5px; }
.typ-karte dt { color:var(--primary); font-weight:700; }
/* Lange Woerter wie "Werbegemeinschaften" sind breiter als die Spalte
   auf einem schmalen Handy - sie duerfen umbrechen. (11.09.2026) */
.typ-karte dd { margin:0; color:var(--text2); overflow-wrap:anywhere; }
.typ-karte .bsp { margin-top:12px; background:var(--soft); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--text2); } .typ-karte .bsp b { color:var(--text); }
.typ-karte .btn { margin-top:14px; justify-self:start; padding:10px 16px; font-size:13.5px; }
/* Verzeichnis */
.chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; }
.chip { padding:8px 14px; border-radius:99px; border:1.5px solid var(--line); background:var(--card); font-size:13px; font-weight:600; color:var(--text2); }
.chip.an { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.staedte { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0 0 28px; font-size:13.5px; }
.staedte a { color:var(--text2); background:var(--soft); border-radius:10px; padding:6px 12px; } .staedte a b { color:var(--primary); margin-left:4px; }
.db-hin { margin-top:26px; background:var(--soft); border:1px dashed var(--primary); border-radius:14px; padding:14px 18px; font-size:13.5px; color:var(--text2); }
.db-hin b { color:var(--primary); }
/* Detail */
.detail { display:grid; grid-template-columns:1.4fr 1fr; gap:30px; padding-bottom:40px; }
.kopfk { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.kopfk .oben { display:flex; gap:18px; align-items:center; }
.kopfk .logo3 { width:84px; height:84px; border-radius:22px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:40px; }
.kopfk h1 { font-size:30px; } .kopfk .unter { color:var(--muted); font-size:14px; margin-top:4px; }
.tags { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; } .tags span { font-size:11.5px; font-weight:700; background:var(--soft); color:var(--primary); border-radius:99px; padding:4px 10px; }
.praemie-box { margin-top:22px; background:linear-gradient(145deg,#6559a9,#3d3468); border-radius:16px; padding:18px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; color:#fff; }
.praemie-box b { display:block; font-size:18px; } .praemie-box span { font-size:13px; opacity:.8; }
.praemie-box .stempel { grid-column:1 / -1; grid-template-columns:repeat(10,1fr); }
.praemie-box .btn { background:#fff; color:#3d3468; }
.infos { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; font-size:14px; }
.infos div b { display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.text { margin-top:22px; font-size:15px; color:var(--text2); line-height:1.65; }
.seite { display:flex; flex-direction:column; gap:16px; }
.qrbox { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; }
.qrbox .qr { width:150px; height:150px; margin-bottom:12px; } .qrbox b { display:block; font-size:15px; } .qrbox p { font-size:13px; color:var(--muted); margin:4px 0 14px; }
.qrbox .btn { width:100%; } .qrbox .btn + .btn { margin-top:8px; }
/* Firmenseite: die drei Kundenschritte im Seitenkasten (12.09.2026) */
.qrbox.kunde-so .mehr { display:block; text-align:center; margin-top:14px; font-size:13.5px; font-weight:700; }
.qrbox.kunde-so { text-align:left; } .qrbox.kunde-so .scan-anleitung { margin-top:12px; }
.qrbox.kunde-so .stores { margin-top:16px; justify-content:center; flex-wrap:wrap; }
.qrbox.kunde-so .store { flex:1; min-width:120px; justify-content:center; padding:11px 14px; font-size:13px; }
.praemie-box:has(> div:only-child) { grid-template-columns:1fr; }
.mini-karte { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--card); }
.mini-karte .landkarte { height:170px; } .mini-karte .u { padding:12px 16px; font-size:13px; color:var(--muted); }
.gutschein { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; border-left:5px solid var(--accent); }
.gutschein b { display:block; } .gutschein p { font-size:13px; color:var(--muted); margin-top:4px; }
/* Karte */
.karte-voll { display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); height:620px; }
.karte-voll .liste { overflow:auto; border-right:1px solid var(--line); }
.karte-voll .liste .firma { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 16px; }
.karte-voll .liste .such { padding:14px 16px; border-bottom:1px solid var(--line); }
.karte-voll .liste .such input { width:100%; padding:11px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:14px; }
.karte-voll .landkarte { height:100%; }
.popup { position:absolute; left:52%; top:30%; width:240px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); font-size:13px; }
.popup b { display:block; } .popup span { color:var(--muted); font-size:12px; } .popup .btn { margin-top:8px; padding:8px 12px; font-size:12.5px; width:100%; }
/* Kontakt */
.kontakt { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; }
.formular { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:14px; }
.formular label { font-size:12.5px; font-weight:700; color:var(--muted); display:block; margin-bottom:6px; letter-spacing:.04em; }
.formular input, .formular textarea, .formular select { width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
.formular textarea { min-height:120px; }
.formular .zwei { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.formular small { color:var(--muted); font-size:12px; }
.kanal { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.kanal i { font-style:normal; width:44px; height:44px; border-radius:14px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.kanal b { display:block; } .kanal span { color:var(--muted); font-size:13.5px; }
.rechtlich { max-width:760px; margin:0 auto; color:var(--text2); font-size:15px; line-height:1.7; }
.rechtlich h2 { font-size:22px; margin:26px 0 8px; } .rechtlich .block { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 22px; }
/* News */
/* Dejan, 04.09.2026: News zuerst nur zehn Stueck, beim Scrollen kommen je
   zehn dazu. Verborgen wird mit display:none, damit die Kacheln kein Raster
   belegen; ohne JavaScript hebt eine noscript-Regel das wieder auf. */
.news-mehr { display:none; }
.artikel.neu-da { animation:neuDa .35s ease both; }
@keyframes neuDa { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.news-lader { display:flex; align-items:center; justify-content:center; gap:10px; padding:30px 0 6px; color:var(--muted); font-size:13.5px; }
.news-lader.fertig .news-kreisel { display:none; }
.news-kreisel { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--primary); animation:kreisel .7s linear infinite; }
@keyframes kreisel { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .news-kreisel { animation:none; } .artikel.neu-da { animation:none; } }
.news-gross { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; margin-bottom:20px; }
.artikel.gross .bild { height:260px; font-size:80px; }
.artikel.gross h3 { font-size:22px; }
.themen { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
/* Registrieren */
.reg { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.reg-schritte { display:flex; flex-direction:column; gap:12px; }
.reg-schritt { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.reg-schritt .nr { width:34px; height:34px; border-radius:10px; background:var(--primary); color:var(--on-primary); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.reg-schritt b { display:block; } .reg-schritt span { color:var(--muted); font-size:13.5px; }
.reg-box { background:var(--card); border:1.5px solid var(--primary); border-radius:var(--radius); padding:28px; text-align:center; position:sticky; top:90px; }
.reg-box .btn { width:100%; margin-top:14px; } .reg-box p { color:var(--muted); font-size:14px; margin-top:8px; }
.reg-box .oder { margin:18px 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:860px) {
	.seite-kopf h1 { font-size:30px; }
	.typ-reihe, .detail, .kontakt, .news-gross, .reg, .infos, .praemie-box { grid-template-columns:1fr; }
	.praemie-box .btn { justify-self:start; }
	.karte-voll { grid-template-columns:1fr; height:auto; } .karte-voll .landkarte { height:320px; } .karte-voll .liste { max-height:360px; border-right:0; border-top:1px solid var(--line); order:2; }
	.karte-voll.karte-start .lkarte { height:300px; min-height:300px; } .karte-start .liste { max-height:280px; }
	.reg-box { position:static; }
}


/* ---- Branchen: Laufbaender + Waehler mit Vorschau -------------------- */
.branchen .sec-head { margin-bottom:30px; }
.lauf { overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.lauf-spur { display:flex; gap:9px; width:max-content; animation:mbk-lauf 70s linear infinite; }
.lauf:nth-of-type(2) .lauf-spur { animation-duration:88s; animation-direction:reverse; }
.lauf:nth-of-type(3) .lauf-spur { animation-duration:78s; }
.branchen:hover .lauf-spur { animation-play-state:paused; }
@keyframes mbk-lauf { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.lauf-spur span { white-space:nowrap; background:var(--card); border:1px solid var(--line); border-radius:99px; padding:8px 14px; font-size:13.5px; color:var(--text2); }
/* Wer Bewegung nicht mag, sieht die Baender still (Systemeinstellung). */
@media (prefers-reduced-motion:reduce) { .lauf-spur { animation:none; } }
.bw { display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:start; margin-top:34px; }
.bwsuch { width:100%; padding:13px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-size:15px; margin-bottom:14px; }
.bw .chips { justify-content:flex-start; margin-bottom:14px; }
.bkacheln { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:340px; overflow:auto; padding-right:6px; }
/* minmax(0,1fr) statt 1fr: sonst wird eine Spalte so breit wie ihr
   laengster Name ("Kosmetik & Wellness") und schiebt auf schmalen
   Handys die ganze Seite zur Seite (11.09.2026). */
.bko { min-width:0; } .bko b { min-width:0; overflow-wrap:anywhere; }
.bko { display:flex; align-items:center; gap:9px; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; text-align:left; color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; }
.bko i { font-style:normal; font-size:18px; } .bko b { font-weight:600; }
.bko:hover { border-color:var(--primary); } .bko.an { border-color:var(--primary); background:var(--soft); }
.bleer { display:none; color:var(--muted); font-size:14px; padding:18px 2px; } .bleer a { font-weight:700; }
.vorschau { background:var(--card); border:1.5px solid var(--primary); border-radius:var(--radius); padding:24px; position:sticky; top:90px; }
.vorschau .kopfz { display:flex; align-items:center; gap:12px; }
.vorschau .kopfz i { font-style:normal; width:52px; height:52px; border-radius:16px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.vorschau h3 { font-size:20px; } .vorschau .kl { color:var(--muted); font-size:13px; }
.vkarte { margin-top:18px; background:linear-gradient(145deg,#6559a9,#3d3468); border-radius:16px; padding:16px; color:#fff; }
.vkarte b { display:block; font-size:15px; } .vkarte span { font-size:12px; opacity:.85; }
/* minmax(0,1fr) + min-width:0: mit 1fr allein schrumpfen die Kaestchen nicht unter die
   Breite, die aspect-ratio aus der Zeilenhoehe ableitet - das zehnte lief rechts aus dem
   Kasten (11.09.2026, auf der Live-Seite gesehen). */
.vstempel { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin-top:12px; }
.vstempel i { aspect-ratio:1; min-width:0; border-radius:50%; border:2px dashed rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:11px; font-style:normal; }
.vstempel i.voll { background:#fff; border-color:#fff; color:var(--plum); }
.vstempel i.aus { opacity:.25; }
.vzeile { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--text2); margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.vzeile b { color:var(--text); text-align:right; } .vzeile.letzte { border-top:0; padding-top:6px; margin-top:6px; }
.vorschau .btn { width:100%; margin-top:16px; }
.vhin { font-size:12.5px; color:var(--muted); margin-top:10px; text-align:center; }
@media (max-width:860px) {
	.bw { grid-template-columns:1fr; }
	.bkacheln { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:300px; }
	.vorschau { position:static; }
}

/* ---- Web-Scan (scan.html) -------------------------------------------- */
.scan-sec { padding-top:34px; }
.scan-sec .wrap { max-width:560px; }
.scan-karte { background:var(--card); border:1.5px solid var(--primary); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.scan-lade { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14.5px; }
.scan-lade i { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--primary); animation:mbk-dreh .8s linear infinite; }
@keyframes mbk-dreh { to { transform:rotate(360deg); } }
.scan-kopf { display:flex; align-items:center; gap:14px; }
.scan-logo { width:60px; height:60px; border-radius:18px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0; overflow:hidden; }
.scan-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.scan-kopf h1 { font-size:24px; } .scan-ort { color:var(--muted); font-size:13.5px; margin-top:2px; }
.scan-meldung { margin-top:18px; font-size:16px; line-height:1.5; }
.scan-meldung .gut { color:var(--primary); font-weight:800; font-size:19px; display:block; }
.scan-meldung .hin { color:var(--accent); font-weight:700; }
.scan-stand { margin-top:18px; background:linear-gradient(145deg,#6559a9,#3d3468); border-radius:16px; padding:16px; color:#fff; }
.scan-zeile { display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:13px; }
.scan-zeile b { text-align:right; }
.scan-limit { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.18); font-size:12.5px; color:rgba(255,255,255,.8); }
.scan-tun { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.scan-tun .btn { flex:1; min-width:180px; }
.scan-hin { width:100%; color:var(--muted); font-size:13px; }
.scan-app-holen { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.scan-app-holen b { font-size:15px; } .scan-app-holen p { color:var(--muted); font-size:13.5px; margin:6px 0 12px; }
.scan-app-holen .btn { width:100%; }
.scan-code { margin-top:14px; text-align:center; background:var(--soft); border:1.5px dashed var(--primary); border-radius:14px; padding:16px; }
.scan-code span { display:block; font-size:32px; font-weight:800; letter-spacing:.22em; color:var(--primary); font-variant-numeric:tabular-nums; }
.scan-code small { display:block; color:var(--muted); font-size:12.5px; margin-top:8px; }
.scan-karte.voll, .scan-karte.grenze { border-color:var(--accent); }
.scan-karte.voll .scan-meldung .gut, .scan-karte.grenze .scan-meldung .gut { color:var(--accent); }
.scan-punkte { height:10px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:6px; }
.scan-punkte i { display:block; height:100%; width:0; background:#fff; border-radius:99px; transition:width .4s; }
.scan-code .rest { display:block; font-style:normal; color:var(--muted); font-size:12px; margin-top:6px; }
.scan-app-holen .scan-hin { margin:14px 0 0; } .scan-app-holen .stores { margin-top:10px; } .scan-app-holen .store { flex:1; justify-content:center; }
.scan-weitere { margin-top:34px; } .scan-weitere h2 { font-size:19px; margin-bottom:14px; }
.scan-weitere .firmen { grid-template-columns:1fr; }
.scan-app { margin-top:34px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.scan-app b { display:block; font-size:16px; } .scan-app span { color:var(--muted); font-size:13.5px; }

/* ---- Klapp-Menue auf dem Handy (Burger) ------------------------------ */
.top .nav.offen { display:flex; position:absolute; left:0; right:0; top:70px; flex-direction:column; gap:0; background:var(--card); border-bottom:1px solid var(--line); padding:8px 0; }
.top .nav.offen a { padding:14px 28px; border-top:1px solid var(--line); font-size:15px; }
.top .nav.offen a:first-child { border-top:0; }
/* ---- Formular-Rueckmeldung ------------------------------------------- */
.meldung { display:none; border-radius:12px; padding:12px 14px; font-size:14px; margin-top:4px; }
.meldung.gut { display:block; background:rgba(184,171,255,.14); color:var(--text); border:1px solid var(--primary); }
.meldung.schlecht { display:block; background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); }
.btn.wartet { opacity:.6; pointer-events:none; }
/* ---- Karte (Leaflet) ------------------------------------------------- */
.karte-voll .lkarte { height:100%; min-height:320px; background:var(--karten-bg); }
/* Die Karte auf der Startseite (03.09.2026): etwas niedriger als karte.html,
   mit einem Verweis auf die grosse Karte oben rechts im Kartenbild. */
.karte-start { height:520px; margin-top:6px; }
.karte-start .lkarte { position:relative; }
.leaflet-container .karte-gross, .karte-gross { position:absolute; top:12px; right:12px; z-index:1000; background:var(--card); color:var(--text); border:1.5px solid var(--line); border-radius:11px; padding:9px 13px; font-size:13px; font-weight:700; box-shadow:var(--shadow); }
.karte-gross:hover { border-color:var(--primary); color:var(--primary); }
body .leaflet-container { font-family:inherit; background:var(--karten-bg); }
/* Nur im Dunkelmodus wird die Landkarte abgedunkelt - hell bleibt sie, wie OpenStreetMap sie liefert. */
:root:not(.hell) body .leaflet-tile { filter:brightness(.72) saturate(.35) contrast(1.05) hue-rotate(200deg); }
/* ---- Cookie-Balken und die Karte, die erst auf Zuruf laedt (03.09.2026)
   Dejan: "Wir brauchen auf der Webseite noch das Cookie Zeug."
   Der Balken sitzt unten und schiebt nichts weg; er kommt nur, solange
   niemand entschieden hat. Auf dem Handy stehen die Knoepfe untereinander. */
.cookie { position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--card); border-top:1.5px solid var(--line);
	box-shadow:0 -14px 34px rgba(0,0,0,.35); padding:16px 0 calc(16px + env(safe-area-inset-bottom)); }
.cookie .wrap { display:flex; align-items:center; gap:22px; }
/* Nur die Ueberschrift ist ein eigener Block - ein hervorgehobenes Wort
   MITTEN im Satz (z. B. MBK-Map) darf die Zeile nicht umbrechen. */
.cookie-text > b { display:block; font-size:14.5px; margin-bottom:3px; }
.cookie-text span { display:block; color:var(--muted); font-size:12.5px; line-height:1.55; }
.cookie-text span b { color:var(--text2); font-weight:700; }
.cookie-text a { text-decoration:underline; }
.cookie-knoepfe { display:flex; gap:10px; flex-shrink:0; }
.cookie-knoepfe .btn { padding:12px 18px; font-size:14px; white-space:nowrap; }
@media (max-width:860px) {
	.cookie .wrap { flex-direction:column; align-items:stretch; gap:14px; }
	.cookie-knoepfe { flex-direction:column-reverse; }
	.cookie-knoepfe .btn { width:100%; }
}
/* Platzhalter statt Karte, solange die MBK-Map nicht erlaubt ist. */
.karte-aus { position:absolute; inset:0; z-index:2; background:var(--karten-bg); display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px; }
.karte-aus b { font-size:16px; }
.karte-aus p { color:var(--muted); font-size:13px; max-width:360px; line-height:1.55; }
.karte-aus small { color:var(--muted); font-size:11.5px; }
.karte-aus small a { text-decoration:underline; }
.lkarte { position:relative; }
/* Schalter auf der Seite Cookie-Einstellungen */
.cookie-wahl { display:flex; align-items:center; gap:14px; background:var(--soft); border:1px solid var(--line);
	border-radius:16px; padding:16px 18px; margin:14px 0 8px; }
.cookie-wahl input { width:22px; height:22px; flex-shrink:0; accent-color:var(--primary); }
.cookie-wahl div b { display:block; font-size:14.5px; }
.cookie-wahl div span { color:var(--muted); font-size:12.5px; }

/* Pin der MBK-Map: Tropfen mit dem Zeichen der Branche (03.09.2026).
   Der Tropfen ist ein SVG-Pfad - so bleibt die Spitze scharf und der
   Schatten sitzt an der Form, nicht am Kasten. Innen ein dunkler Kreis,
   damit das bunte Zeichen auf jedem Untergrund lesbar bleibt. */
.mbk-pin { position:relative; width:36px; height:44px; filter:drop-shadow(0 5px 8px rgba(0,0,0,.55)); }
.mbk-pin svg { position:absolute; inset:0; width:36px; height:44px; display:block; }
.mbk-pin svg path { fill:url(#mbkPinFarbe); stroke:var(--bg); stroke-width:2.5; }
.mbk-pin svg circle { fill:var(--bg); fill-opacity:.82; }
.mbk-pin.a svg path { fill:url(#mbkPinFarbeA); }
.mbk-pin em { position:absolute; left:0; top:5px; width:36px; height:26px; display:flex; align-items:center;
	justify-content:center; font-style:normal; font-size:15px; line-height:1; z-index:201; }
/* Warum 201: leaflet.css setzt ".leaflet-map-pane svg { z-index: 200 }" und
   wird NACH dieser Datei geladen - der Tropfen lag deshalb ueber seinem
   eigenen Zeichen, das Symbol war unsichtbar. Statt gegen Leaflet zu kaempfen
   hebt das Zeichen sich einfach darueber. */
/* Kleiner Tropfen fuer Stationen/Standorte/Partner (14.09.2026): dieselbe
   Form, drei Viertel so gross, mit der Stationsnummer statt des Zeichens. */
.mbk-pin.s { width:28px; height:34px; }
.mbk-pin.s svg { width:28px; height:34px; }
.mbk-pin.s em { width:28px; top:4px; height:20px; font-size:12px; font-weight:800; color:var(--text); }
/* Kein Verlauf moeglich (aeltere Browser): dann wenigstens die volle Farbe. */
@supports not (fill: url(#x)) { .mbk-pin svg path { fill:var(--primary); } .mbk-pin.a svg path { fill:var(--accent); } }
body .leaflet-popup-content-wrapper { background:var(--card); color:var(--text); border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); }
body .leaflet-popup-tip { background:var(--card); }
body .leaflet-popup-content { margin:12px 14px; font-size:13px; }
body .leaflet-popup-content b { display:block; } .leaflet-popup-content span { color:var(--muted); font-size:12px; display:block; }
body .leaflet-popup-content .btn { margin-top:8px; padding:8px 12px; font-size:12.5px; width:100%; }
body .leaflet-control-zoom a { background:var(--card) !important; color:var(--text) !important; border-color:var(--line) !important; }
body .leaflet-control-attribution { background:var(--attrib-bg) !important; color:var(--muted) !important; font-size:10px; }
body .leaflet-control-attribution a { color:var(--primary) !important; }
.karte-voll .liste .firma.an { background:var(--soft); }
.karte-voll .liste .leer { padding:20px 16px; color:var(--muted); font-size:13.5px; }
/* ---- Wer macht mit (PHP-Seiten) -------------------------------------- */
.seiten { display:flex; justify-content:center; gap:6px; margin-top:26px; }
.seiten a, .seiten span { min-width:38px; padding:9px 12px; border-radius:10px; border:1.5px solid var(--line); text-align:center; font-size:13.5px; font-weight:700; color:var(--text2); }
.seiten span.an { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.firma .logo2 img { width:56px; height:56px; border-radius:14px; object-fit:cover; display:block; }
.kopfk .logo3 img { width:84px; height:84px; border-radius:22px; object-fit:cover; display:block; }
.leer-hin { text-align:center; color:var(--muted); padding:40px 0; font-size:15px; }
.zeiten { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:14px; }
.zeiten b { color:var(--muted); font-weight:600; }
.social { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.social a { font-size:13px; font-weight:700; background:var(--soft); border-radius:10px; padding:7px 12px; color:var(--text); }
/* ---- Rechtliches / News-Beitrag (aus Markdown) ----------------------- */
.prosa { max-width:760px; margin:0 auto; padding:10px 0 60px; color:var(--text2); font-size:15.5px; line-height:1.7; }
.prosa h1 { font-size:34px; color:var(--text); margin-bottom:12px; overflow-wrap:break-word; hyphens:auto; }
/* Lange Ueberschriften wie "Datenschutzerklaerung" passen auf einem
   schmalen Handy nicht in eine Zeile und schoben die Seite zur Seite;
   der Browser darf sie jetzt trennen (11.09.2026). */ .prosa h2 { font-size:22px; color:var(--text); margin:30px 0 8px; } .prosa h3 { font-size:17px; color:var(--text); margin:22px 0 6px; }
.prosa p { margin:0 0 14px; } .prosa ul, .prosa ol { margin:0 0 14px 22px; padding:0; } .prosa li { margin-bottom:4px; }
.prosa a { text-decoration:underline; }
/* Lange Adressen in den Rechtstexten (z. B. die Datenschutzerklaerung
   von PayPal) sind breiter als ein Handy - ohne diese Zeile schiebt
   eine einzige Zeile die ganze Seite zur Seite (11.09.2026). */
.prosa a { overflow-wrap:anywhere; } .prosa hr { border:0; border-top:1px solid var(--line); margin:26px 0; }
.prosa .datum { color:var(--muted); font-size:13px; font-weight:600; margin-bottom:8px; }
.prosa img { max-width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block; margin:6px 0 18px; }
/* Kontakt ohne Formular (03.09.2026): Adresse, Telefon, Mobil, E-Mail als Kacheln */
.kdaten { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 18px; }
.kdaten div { background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; font-size:15px; line-height:1.55; color:var(--text2); }
.kdaten div:first-child, .kdaten div:nth-child(4) { grid-column:1 / -1; }
.kdaten b { display:block; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.kdaten a { font-weight:700; color:var(--primary); text-decoration:none; }
@media (max-width:640px) { .kdaten { grid-template-columns:1fr; } }
.prosa .hinweis { background:var(--soft); border:1px dashed var(--primary); border-radius:14px; padding:14px 18px; font-size:14px; }


/* ---------- Warmer Akzent in der App-Vorschau ---------------------------
   Die App zeigt seit 08.09.2026 die letzten offenen Plaetze vor der Praemie
   mit einem goldenen Ring und die Restzahl in Gold. Damit die Seite zeigt,
   was der Besucher spaeter wirklich sieht, hier dasselbe. */
.stempel i.endspurt { border-style: solid; border-color: rgba(240, 180, 41, .55); color: rgba(240, 180, 41, .9); }
.app-karte .fort b.warm { color: var(--accent); }

/* ---- MBK-Map in gross: die Karte soll auch wirklich gross sein ---------
   Dejan, 10.09.2026: "MBK Mapp in gross sollte die Karte auch groesser
   dann machen."

   Gemessen war der Unterschied zur kleinen Karte auf der Startseite genau
   100 px Hoehe bei GLEICHER Breite: `.karte-voll` stand fest auf 620 px,
   und `.wrap` deckelt bei 1140 px - ein Mass, das fuer Fliesstext gedacht
   ist, nicht fuer eine Landkarte. Auf einem grossen Bildschirm blieb die
   "grosse" Karte damit genauso schmal wie die kleine.

   Jetzt waechst sie mit dem Fenster: 1400x900 gibt 918x708 statt 742x618,
   1680x1050 sogar 1162x858. `min-height` haelt sie dabei nie kleiner als
   vorher.

   Beim Rahmen steht bewusst nur `max-width: 1560px` und kein vw-Mass:
   `min(1560px, 94vw)` war zwischen 861 und 1140 px SCHMALER als der
   normale Rahmen (der deckelt erst bei 1140) - die Karte wurde dort
   kleiner statt groesser. So verhaelt sie sich unterhalb von 1560 px
   wie bisher und wird erst darueber gedeckelt.

   Zwei Waechter, damit nichts anderes mitwandert:
   - `:not(.karte-start)` laesst die kleine Karte der Startseite in Ruhe.
   - Der ganze Block steht in `@media (min-width: 861px)`. Ohne das wuerde
     er die Handy-Regel bei max-width:860px ueberstimmen (er steht weiter
     unten UND hat mit :not() eine Klasse mehr) - die Karte hoerte dort auf,
     sich in die Hoehe zu strecken, und der Kasten braucht auf dem Handy
     `height: auto`.
   ---------------------------------------------------------------------- */
@media (min-width: 861px) {
	.sec-karte > .wrap { max-width: 1560px; }
	.karte-voll:not(.karte-start) { height: calc(100vh - 190px); min-height: 620px; }
}

/* ---- "Oeffne die MBK App" (app.html, 10.09.2026) ---------------------
   Baut auf .scan-karte auf; hier nur, was die Seite zusaetzlich braucht. */
.app-marke { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.app-ico { width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#8b7cd8,#6559a9); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.app-ico svg { width:26px; height:26px; }
.app-marke b { font-size:14px; } .app-marke small { display:block; color:var(--muted); font-size:12px; }
.app-karte h1 { font-size:22px; line-height:1.25; margin:0 0 8px; }
.app-karte p { color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 14px; }
.app-lade { height:6px; border-radius:99px; background:var(--soft); overflow:hidden; margin:12px 0 8px; }
.app-lade i { display:block; height:100%; width:0; background:var(--primary); border-radius:99px; transition:width 2s linear; }
.app-klein { display:block; font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
.app-karte .stores { margin-top:2px; } .app-karte .store { flex:1; justify-content:center; }
.app-btn { width:100%; margin-top:10px; }
.app-trenn { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:16px 0 4px; }
.app-trenn:before, .app-trenn:after { content:""; flex:1; height:1px; background:var(--line); }
/* E-Mail bestaetigen (bestaetigen.html, 12.10.2026): Haken bzw. Ausrufezeichen ueber dem Titel */
.best-zeichen { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; line-height:1; margin:4px 0 14px; background:var(--soft); color:var(--primary); border:2px solid var(--primary); }
.best-zeichen.gut { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.best-karte h1 { font-size:22px; }
.app-code { display:block; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all; color:var(--text2); margin-top:12px; }

/* ---- Sprachwahl (10.10.2026): 19 Sprachen statt DE/EN-Knopf ------------ */
.sprachwahl { position:relative; flex-shrink:0; }
.sprachwahl > summary { list-style:none; cursor:pointer; width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line); color:var(--text);
	display:flex; align-items:center; justify-content:center; padding:0; user-select:none; }
.sprachwahl > summary svg { width:19px; height:19px; }
.sprachwahl > summary::-webkit-details-marker, .nav-sprachen > summary::-webkit-details-marker { display:none; }
.sprachwahl > summary:hover, .sprachwahl[open] > summary { border-color:var(--primary); color:var(--primary); }
.sprachwahl svg, .nav-sprachen svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sprachwahl svg.pf, .nav-sprachen svg.pf { width:14px; height:14px; transition:transform .15s; }
.sprachwahl[open] svg.pf, .nav-sprachen[open] svg.pf { transform:rotate(180deg); }
.sprachwahl .sprachliste { position:absolute; top:calc(100% + 10px); right:0; z-index:80; width:430px; max-width:calc(100vw - 32px);
	background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px;
	display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sprachliste a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--text);
	text-decoration:none; font-size:14px; font-weight:600; line-height:1.2; }
.sprachliste a:hover { background:var(--soft); color:var(--text); }
.sprachliste a.an { background:var(--soft); color:var(--primary); }
.sprachliste a.an::after { content:'\2713'; margin-inline-start:auto; font-weight:800; }
.sprachliste .fl { font-size:18px; line-height:1; width:22px; text-align:center; }
.nav .nav-sprachen { display:none; }
.nav-sprachen > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; color:var(--text); }
.nav-sprachen > summary b { font-weight:600; }
.nav-sprachen .nav-sprache-wort { color:var(--muted); font-size:13px; margin-inline-start:auto; }
.nav-sprachen .sprachliste { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:10px; }
.nav-sprachen .sprachliste a { padding:10px 10px; font-size:14px; }
[dir="rtl"] .sprachwahl .sprachliste { right:auto; left:0; }
@media (max-width:860px) {
	.top .rechts .sprachwahl { display:none; }
	.top .nav.offen { max-height:calc(100vh - 70px); overflow-y:auto; }
	.top .nav.offen .nav-sprachen { display:block; padding:14px 28px; border-top:1px solid var(--line); font-size:15px; }
	.top .nav.offen .nav-sprachen .sprachliste a { padding:10px; border-top:0; font-size:14px; }
}
/* Passt die Kopfzeile nicht in die Breite (lange Woerter in manchen Sprachen,
   z. B. "Commencer gratuitement"), setzt mbk-city.js erst "kopf-eng" (wie
   1041-1200 px), notfalls "kopf-burger" (Menue hinter dem Burger). */
html.kopf-eng .top .wrap { padding:0 18px; gap:16px; }
html.kopf-eng .top .nav { gap:12px; }
html.kopf-eng .top .nav a { font-size:13px; }
html.kopf-eng .top .rechts { gap:8px; }
html.kopf-eng .top .rechts .btn { padding:9px 12px; font-size:13px; }
html.kopf-eng .top .modus, html.kopf-eng .sprachwahl > summary { width:36px; height:36px; }
html.kopf-burger .nav, html.kopf-burger .top .rechts .btn-o { display:none; }
html.kopf-burger .burger { display:flex; }