/*
 * SIMVERSE · simverse.css – Design-System „Die lebendige Welt“ (alle Seiten)
 * Aufbauspiel-UI: runde, plastische Panels (Fase unten), Fredoka (Display) + Nunito (Text),
 * warme Papier-Töne, Navy, Gelb als Akzent. Fluide Typografie 1280–3840 px, unter 1000 px einfache Stapelung.
 */

/* ---------- Schriften (lokal, variabel, latin + latin-ext) ---------- */
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/fredoka-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: italic; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: italic; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--tinte: #1d2b45; --tinte-2: #34445f; --tinte-3: #56647d; --tinte-4: #8592a8;
	--papier: #fffbf2; --papier-2: #f7f0e1; --papier-3: #efe5cf; --sand: #e6d7b6;
	--gelb: #ffc83d; --gelb-2: #f0ad12; --gelb-3: #9a6a06; --gruen: #5faa44; --himmel: #4aa8e8; --rot: #e2533d;
	--nacht: #070d24; --nacht-2: #0f1838; --nacht-3: #1a2652; --nacht-text: #e8eeff; --nacht-text-2: #aebbe0;
	--f-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
	--f-text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--r-l: clamp(20px, 1.4vw, 40px); --r-m: clamp(14px, 0.95vw, 26px); --r-s: clamp(10px, 0.6vw, 16px);
	--rand: clamp(16px, 2.2vw, 72px);
	--breite: min(calc(100% - 2 * var(--rand)), clamp(1160px, 78vw, 2900px));
	--t-basis: clamp(16px, 0.42vw + 10.6px, 25px);
	--t-klein: clamp(13px, 0.3vw + 9px, 20px);
	--t-h1: clamp(30px, 2.7vw + 1px, 104px);
	--t-h2: clamp(23px, 1.5vw + 5px, 62px);
	--t-h3: clamp(19px, 0.85vw + 8px, 40px);
	--kopf-h: clamp(60px, 3.6vw + 14px, 132px);
	--kopf-oben: 0px;
	--plastik: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 0 rgba(29, 43, 69, .07), 0 4px 0 rgba(29, 43, 69, .11), 0 18px 44px -16px rgba(29, 43, 69, .42);
	--plastik-klein: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(29, 43, 69, .08), 0 3px 0 rgba(29, 43, 69, .12), 0 8px 18px -8px rgba(29, 43, 69, .35);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--feder: cubic-bezier(.34, 1.56, .64, 1);
	color-scheme: light;
}
.admin-bar { --kopf-oben: 32px; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body { margin: 0; font-family: var(--f-text); font-size: var(--t-basis); line-height: 1.62; color: var(--tinte); background: var(--papier); background-image: radial-gradient(ellipse 80% 50% at 50% 0%, #fff7e2, rgba(255, 247, 226, 0) 70%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 800; }
::selection { background: var(--gelb); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--gelb-2); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px rgba(29, 43, 69, .85); }
.sv-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html:not(.sv-js) .sv-nur-js { display: none !important; }
.sv-i { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }
.sv-i--klein { width: .85em; height: .85em; }
.sv-i--gold { color: var(--gelb); }
.sv-skip { position: fixed; left: 16px; top: -80px; z-index: 200; background: var(--gelb); color: var(--tinte); font-family: var(--f-display); font-weight: 600; padding: 12px 20px; border-radius: 14px; text-decoration: none; box-shadow: var(--plastik-klein); transition: top .25s var(--ease); }
.sv-skip:focus { top: calc(14px + var(--kopf-oben)); }
main, .sv-fuss, .sv-kopf { position: relative; }
main { z-index: 2; display: block; }
main:focus { outline: none; }
.sv-rahmen { width: var(--breite); margin-left: auto; margin-right: auto; }

/* ---------- Knöpfe ---------- */
.sv-knopf { --k: var(--papier); --k-rand: rgba(29, 43, 69, .14); display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-display); font-weight: 600; font-size: clamp(15px, .35vw + 10.5px, 24px); line-height: 1; text-decoration: none; padding: .85em 1.3em; border-radius: 999px; border: 2px solid var(--k-rand); background: var(--k); color: var(--tinte); cursor: pointer; box-shadow: var(--plastik-klein); transition: transform .25s var(--feder), box-shadow .25s var(--ease), background .2s; position: relative; white-space: nowrap; }
.sv-knopf:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(29, 43, 69, .08), 0 5px 0 rgba(29, 43, 69, .14), 0 14px 24px -10px rgba(29, 43, 69, .45); }
.sv-knopf:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(29, 43, 69, .2), 0 1px 0 rgba(29, 43, 69, .1); }
.sv-knopf .sv-i { width: 1.1em; height: 1.1em; transition: transform .3s var(--feder); }
.sv-knopf:hover .sv-i:last-child { transform: translateX(3px); }
.sv-knopf--bau { --k: linear-gradient(180deg, #ffd666, #ffc12e 55%, #f5ae10); --k-rand: #c98c06; color: #2b1f00; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -4px 0 rgba(150, 95, 0, .3), 0 5px 0 #b37a05, 0 16px 30px -10px rgba(179, 122, 5, .65); }
.sv-knopf--bau:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -4px 0 rgba(150, 95, 0, .3), 0 7px 0 #b37a05, 0 20px 34px -10px rgba(179, 122, 5, .7); }
.sv-knopf--bau:active { box-shadow: inset 0 3px 6px rgba(120, 70, 0, .35), 0 1px 0 #b37a05; }
.sv-knopf--zart { --k: rgba(255, 255, 255, .78); }
.sv-knopf--klein { font-size: clamp(13px, .25vw + 10px, 19px); padding: .7em 1.1em; }
.sv-rund { width: clamp(38px, 2vw + 12px, 64px); height: clamp(38px, 2vw + 12px, 64px); border-radius: 50%; border: 2px solid rgba(29, 43, 69, .12); background: var(--papier); display: inline-grid; place-items: center; cursor: pointer; box-shadow: var(--plastik-klein); transition: transform .25s var(--feder); color: var(--tinte); }
.sv-rund:hover { transform: rotate(90deg) scale(1.06); }
.sv-rund .sv-i { width: 45%; height: 45%; }

/* ---------- Badges & Status ---------- */
.sv-badge { display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-display); font-weight: 600; font-size: clamp(12px, .22vw + 9px, 18px); line-height: 1; padding: .42em .7em .42em .5em; border-radius: 999px; background: var(--farbe); color: var(--auf, var(--tinte)); text-decoration: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; }
.sv-badge .sv-i { width: 1.05em; height: 1.05em; }
.sv-badge small { font-size: .85em; opacity: .85; }
a.sv-badge { transition: transform .25s var(--feder); }
a.sv-badge:hover { transform: translateY(-2px) rotate(-2deg); }
.sv-status { display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-display); font-weight: 600; font-size: clamp(11px, .2vw + 8.5px, 17px); text-transform: uppercase; letter-spacing: .06em; padding: .38em .7em; border-radius: 8px; line-height: 1; vertical-align: middle; }
.sv-status--offline { background: #2a2f3a; color: #ffd9d3; box-shadow: inset 0 0 0 1.5px #e2533d; }
.sv-status--online { background: #e4f6da; color: #22561a; box-shadow: inset 0 0 0 1.5px #5faa44; }
.sv-status--online::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: #3fbf3a; box-shadow: 0 0 0 3px rgba(63, 191, 58, .25); }
.sv-punkt { width: .6em; height: .6em; border-radius: 50%; background: var(--farbe); display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.sv-kicker { display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: .09em; color: var(--tinte-2); margin: 0 0 .9em; }
.sv-kicker .sv-i { color: var(--gelb-3); }
.sv-kicker__punkt { width: 2em; height: 2em; border-radius: 30%; display: grid; place-items: center; background: var(--farbe, var(--gelb)); color: var(--auf, var(--tinte)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sv-kicker__punkt .sv-i { color: inherit; width: 1.1em; height: 1.1em; }
.sv-h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin-bottom: .4em; }
.sv-krume { display: flex; flex-wrap: wrap; gap: .3em .6em; list-style: none; margin: 0 0 1.1em; padding: 0; font-size: var(--t-klein); color: var(--tinte-3); font-weight: 600; }
.sv-krume li + li::before { content: '›'; margin-right: .6em; color: var(--tinte-4); }
.sv-krume a { color: var(--tinte-2); text-decoration: none; border-radius: 4px; }
.sv-krume a:hover { color: var(--tinte); text-decoration: underline; }
.sv-chip { display: inline-flex; align-items: center; gap: .45em; background: #fff; border-radius: 999px; padding: .5em .9em; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06), 0 0 0 1.5px rgba(29, 43, 69, .07); color: var(--tinte); }
.sv-chip b { font-size: 1.15em; }
.sv-chip .sv-i { color: var(--gelb-3); }

/* ---------- Kopf ---------- */
.sv-kopf { position: fixed; left: 0; right: 0; top: var(--kopf-oben); z-index: 50; padding: clamp(10px, .7vw, 22px) var(--rand) 0; pointer-events: none; }
.sv-kopf__leiste { pointer-events: auto; height: var(--kopf-h); display: flex; align-items: center; gap: clamp(10px, 1vw, 30px); padding: 0 clamp(10px, .8vw, 26px) 0 clamp(12px, 1vw, 30px); background: rgba(255, 251, 242, .92); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 2px solid rgba(255, 255, 255, .8); border-radius: var(--r-l); box-shadow: var(--plastik); max-width: 3600px; margin: 0 auto; }
/* Menü-Hülle: ab 1100 px unsichtbar für das Layout (Kinder bleiben Flex-Elemente der Leiste), darunter Klappmenü */
.sv-kopf__menue { display: contents; }
.sv-kopf__menueknopf { display: none; }
.sv-logo { display: flex; align-items: center; gap: .5em; text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, .55vw + 10px, 34px); letter-spacing: -.01em; flex: none; border-radius: 14px; }
.sv-logo__marke { width: clamp(40px, 2.2vw + 12px, 92px); height: auto; overflow: visible; transition: transform .5s var(--feder); }
.sv-logo:hover .sv-logo__marke { transform: rotate(-8deg) scale(1.08); }
.sv-logo__umlauf { animation: svUmlauf 7s linear infinite; transform-origin: 0 0; }
@keyframes svUmlauf { to { transform: rotate(360deg); } }
.sv-logo__tld { color: var(--gelb-3); }
.sv-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(2px, .3vw, 10px); align-items: center; }
.sv-nav__link { display: inline-flex; align-items: center; gap: .3em; font-family: var(--f-display); font-weight: 500; font-size: clamp(15px, .35vw + 10px, 26px); text-decoration: none; padding: .45em .8em; border-radius: 999px; border: 0; background: none; cursor: pointer; position: relative; transition: background .2s, color .2s; color: var(--tinte); }
.sv-nav__link:hover { background: rgba(29, 43, 69, .07); }
.sv-nav__link[aria-current="page"], .sv-nav__link[data-aktiv] { background: var(--tinte); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.sv-nav__knopf[aria-expanded="true"] .sv-i { transform: rotate(180deg); }
.sv-nav__knopf .sv-i { transition: transform .3s var(--feder); }
.sv-nav__mega { position: relative; }
.sv-mega { position: absolute; left: 50%; top: calc(100% + clamp(12px, .8vw, 24px)); transform: translateX(-38%); width: clamp(640px, 40vw, 1400px); background: var(--papier); border-radius: var(--r-l); padding: clamp(16px, 1.2vw, 36px); box-shadow: var(--plastik), 0 40px 80px -30px rgba(29, 43, 69, .5); border: 2px solid #fff; z-index: 5; }
.sv-mega[hidden] { display: none; }
.sv-mega__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .8em; }
.sv-mega__titel { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); margin: 0; }
.sv-mega__unter { margin: 0; color: var(--tinte-3); font-size: var(--t-klein); }
.sv-mega__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(6px, .45vw, 14px); }
.sv-mega__bezirk { display: flex; align-items: center; gap: .7em; padding: .55em .7em; border-radius: var(--r-m); text-decoration: none; background: #fff; box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06), 0 0 0 1.5px rgba(29, 43, 69, .07); transition: transform .25s var(--feder), box-shadow .2s; font-size: clamp(14px, .3vw + 10px, 23px); }
.sv-mega__bezirk:hover, .sv-mega__bezirk[aria-current="page"] { transform: translateY(-2px); box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06), 0 0 0 2px var(--farbe), 0 10px 20px -10px rgba(29, 43, 69, .4); }
.sv-mega__icon { width: 2.3em; height: 2.3em; border-radius: 30%; background: var(--farbe); color: var(--auf, var(--tinte)); display: grid; place-items: center; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sv-mega__bezirk .sv-mega__icon .sv-i { width: 1.25em; height: 1.25em; }
.sv-mega__name { flex: 1; font-family: var(--f-display); font-weight: 600; line-height: 1.15; }
.sv-mega__name small { display: block; font-family: var(--f-text); font-weight: 600; font-size: .78em; color: var(--tinte-3); }
.sv-mega__zahl { font-family: var(--f-display); font-weight: 600; background: var(--papier-2); border-radius: 999px; padding: .2em .65em; font-size: .9em; }
.sv-res { display: flex; align-items: center; gap: clamp(4px, .3vw, 10px); margin-left: auto; padding: clamp(4px, .25vw, 8px); background: var(--tinte); border-radius: 999px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .9); }
.sv-res__wrap { position: relative; }
.sv-res__pill { display: inline-flex; align-items: center; gap: .45em; padding: .32em .8em .32em .55em; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; border: 0; font-size: clamp(13px, .3vw + 9px, 22px); line-height: 1; white-space: nowrap; }
.sv-res__pill > .sv-i, .sv-res__pill > span > .sv-i { width: 1.35em; height: 1.35em; color: var(--gelb); }
.sv-res__pill--knopf { cursor: pointer; transition: background .2s, transform .25s var(--feder); }
.sv-res__pill--knopf:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.sv-res__pill--knopf[aria-expanded="true"], .sv-res__pill.ist-verschoben { background: rgba(255, 200, 61, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 200, 61, .6); }
.sv-res__wert { display: flex; flex-direction: column; gap: .15em; text-align: left; }
.sv-res__wert small { font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #aebbe0; }
.sv-res__wert b { font-family: var(--f-display); font-weight: 600; font-size: 1.05em; font-variant-numeric: tabular-nums; display: inline-block; }
.sv-zeitraffer { position: absolute; right: 50%; transform: translateX(50%); top: calc(100% + 16px); width: clamp(300px, 18vw, 560px); background: var(--papier); color: var(--tinte); border-radius: var(--r-l); padding: clamp(16px, 1vw, 30px); box-shadow: var(--plastik), 0 30px 60px -24px rgba(29, 43, 69, .55); border: 2px solid #fff; z-index: 6; display: block; }
.sv-zeitraffer[hidden] { display: none; }
.sv-zeitraffer__titel { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); margin: 0 0 .2em; }
.sv-zeitraffer__info { display: block; font-size: var(--t-klein); color: var(--tinte-3); margin-bottom: .9em; line-height: 1.45; }
.sv-zeitraffer__regler { display: flex; align-items: center; gap: .8em; }
.sv-zeitraffer__regler input { flex: 1; accent-color: var(--gelb-2); height: 28px; }
.sv-zeitraffer__regler output { font-family: var(--f-display); font-weight: 600; font-size: 1.2em; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.sv-zeitraffer__knoepfe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: .9em 0; }
.sv-zeitraffer__knoepfe button, .sv-zeitraffer__echt { border: 2px solid rgba(29, 43, 69, .1); background: #fff; border-radius: 12px; padding: .5em .3em; font-family: var(--f-display); font-weight: 500; font-size: var(--t-klein); cursor: pointer; box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06); transition: transform .2s var(--feder); }
.sv-zeitraffer__knoepfe button:hover, .sv-zeitraffer__echt:hover { transform: translateY(-2px); border-color: var(--gelb-2); }
.sv-zeitraffer__echt { width: 100%; display: flex; align-items: center; justify-content: center; gap: .4em; }
.sv-suche { position: relative; display: flex; align-items: center; flex: none; margin: 0; }
.sv-suche input { width: clamp(150px, 11vw, 420px); font: inherit; font-size: clamp(14px, .3vw + 10px, 22px); padding: .62em 2.8em .62em 1.1em; border-radius: 999px; border: 2px solid rgba(29, 43, 69, .12); background: #fff; color: var(--tinte); box-shadow: inset 0 2px 4px rgba(29, 43, 69, .08); transition: width .4s var(--ease), border-color .2s; }
.sv-suche input::placeholder { color: var(--tinte-3); }
.sv-suche input:focus { width: clamp(220px, 15vw, 560px); border-color: var(--gelb-2); outline: none; box-shadow: 0 0 0 4px rgba(255, 200, 61, .35); }
.sv-suche__knopf { position: absolute; right: 5px; width: 2.2em; height: 2.2em; border-radius: 50%; border: 0; background: var(--gelb); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(150, 95, 0, .3); font-size: clamp(14px, .3vw + 10px, 22px); }
.sv-suche__knopf .sv-i { width: 1.05em; height: 1.05em; }

/* ---------- Gebäude-Karten ---------- */
.sv-karte { --farbe: var(--gelb); position: relative; perspective: 900px; min-width: 0; }
.sv-karte__flaeche { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--plastik); border: 2px solid #fff; transition: transform .45s var(--feder), box-shadow .3s; transform-style: preserve-3d; }
.sv-karte__flaeche::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--farbe); z-index: 2; }
.sv-karte__flaeche:hover, .sv-karte__flaeche:focus-within { transform: translateY(-6px) rotateX(4deg); box-shadow: inset 0 1px 0 #fff, 0 8px 0 rgba(29, 43, 69, .12), 0 30px 50px -18px rgba(29, 43, 69, .5), 0 0 0 3px var(--farbe); }
.sv-karte__link { color: inherit; text-decoration: none; }
.sv-karte__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sv-karte__link:focus-visible { outline: none; box-shadow: none; }
.sv-karte__flaeche:has(.sv-karte__link:focus-visible) { outline: 3px solid var(--gelb-2); outline-offset: 3px; }
.sv-karte__bild { position: relative; aspect-ratio: 300 / 220; overflow: hidden; background: var(--papier-2); }
.sv-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.sv-karte__flaeche:hover .sv-karte__bild img { transform: scale(1.07); }
.sv-karte__bild--seite { display: grid; place-items: center; background: linear-gradient(135deg, var(--papier-2), var(--sand)); color: var(--tinte-3); }
.sv-karte__bild--seite .sv-i { width: 30%; height: 30%; }
.ist-offline .sv-karte__bild img { filter: grayscale(.65) contrast(.95); }
.sv-karte__nr { position: absolute; left: 10px; top: 14px; font-family: var(--f-display); font-weight: 600; font-size: clamp(11px, .2vw + 8.5px, 17px); background: rgba(29, 43, 69, .82); color: #fff; padding: .35em .7em; border-radius: 999px; }
.sv-karte__bild .sv-status { position: absolute; right: 10px; top: 14px; }
.sv-karte__koerper { padding: clamp(12px, .9vw, 28px) clamp(14px, 1vw, 30px) 0; display: flex; flex-direction: column; gap: .55em; flex: 1; }
.sv-karte__kat { display: flex; align-items: center; gap: .4em; font-size: var(--t-klein); font-weight: 700; color: var(--tinte-3); margin: 0; }
.sv-karte__kat .sv-i { color: var(--tinte-2); }
.sv-karte__titel { font-size: clamp(17px, .55vw + 10px, 34px); margin: 0; line-height: 1.15; }
.sv-karte__auszug { font-size: var(--t-klein); color: var(--tinte-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sv-karte__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-karte__fuss { margin: auto clamp(14px, 1vw, 30px) 0; display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em 0 clamp(14px, 1vw, 30px); border-top: 2px dashed rgba(29, 43, 69, .1); position: relative; }
.sv-karte__koerper + .sv-karte__fuss { margin-top: auto; }
.sv-karte__koerper { padding-bottom: .8em; }
.sv-karte__zufrieden { display: inline-flex; align-items: center; gap: .3em; font-family: var(--f-display); font-weight: 600; font-size: clamp(15px, .3vw + 11px, 24px); }
.sv-karte__zufrieden .sv-i { color: var(--gelb-2); }
.sv-karte__zufrieden small { font-family: var(--f-text); font-size: .7em; font-weight: 700; color: var(--tinte-3); margin-left: .25em; }
.sv-karte__zufrieden.ist-leer .sv-i { color: var(--tinte-4); }
.sv-karte__mehr { display: inline-flex; align-items: center; gap: .3em; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); color: var(--tinte); background: var(--papier-2); padding: .4em .8em; border-radius: 999px; transition: background .2s; white-space: nowrap; }
.sv-karte__flaeche:hover .sv-karte__mehr { background: var(--farbe); color: var(--auf, var(--tinte)); }
.sv-karte__spielen { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); line-height: 1; text-decoration: none; white-space: nowrap; color: #2b1f00; padding: .55em .9em; border-radius: 999px; background: linear-gradient(180deg, #ffd666, #ffc12e 55%, #f5ae10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(150, 95, 0, .3), 0 3px 0 #b37a05; transition: transform .25s var(--feder); }
.sv-karte__spielen:hover { transform: translateY(-2px); }
.sv-karte__spielen:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(120, 70, 0, .35); }

/* ---------- Panels & Infotafeln ---------- */
.sv-panel { background: var(--papier); border-radius: var(--r-l); box-shadow: var(--plastik); border: 2px solid #fff; padding: clamp(16px, 1.2vw, 36px); }
.sv-infotafel { background: var(--papier); border-radius: var(--r-l); border: 2px solid #fff; box-shadow: var(--plastik); padding: clamp(24px, 2vw, 70px); position: relative; }
.sv-infotafel::before { content: ''; position: absolute; left: clamp(22px, 2vw, 60px); right: clamp(22px, 2vw, 60px); top: 0; height: 7px; border-radius: 0 0 8px 8px; background: var(--farbe, var(--gelb)); }
.sv-abschnitt { margin-top: clamp(40px, 4vw, 140px); margin-bottom: clamp(40px, 4vw, 140px); }
.sv-genrelinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.sv-genrelinks .sv-kicker { margin: 0; }
.sv-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 15vw, 520px), 1fr)); gap: clamp(16px, 1.3vw, 44px); }
.sv-raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-raster .sv-karte.ist-weg { display: none; }

/* Lesetypografie */
.sv-lesen { font-size: calc(var(--lese-skala, 1) * clamp(16px, .42vw + 10.6px, 25px)); line-height: 1.72; }
.sv-lesen h2 { font-size: var(--t-h2); margin: 1.5em 0 .55em; scroll-margin-top: calc(var(--kopf-h) + var(--kopf-oben) + 40px); }
.sv-lesen h3 { font-size: var(--t-h3); margin: 1.4em 0 .5em; scroll-margin-top: calc(var(--kopf-h) + var(--kopf-oben) + 40px); }
.sv-lesen h4 { font-size: clamp(17px, .5vw + 10px, 30px); margin: 1.2em 0 .4em; scroll-margin-top: calc(var(--kopf-h) + var(--kopf-oben) + 40px); }
.sv-lesen > :first-child { margin-top: 0; }
.sv-lesen a { color: var(--tinte); text-decoration-color: var(--gelb-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sv-lesen a:hover { background: rgba(255, 200, 61, .3); }
.sv-lesen ul, .sv-lesen ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.sv-lesen li { margin: .3em 0; }
.sv-lesen li::marker { color: var(--gelb-2); }
.sv-lesen img { border-radius: var(--r-m); box-shadow: var(--plastik-klein); background: var(--papier-2); }
.sv-lesen .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: 42%; }
.sv-lesen .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: 42%; }
.sv-lesen .aligncenter { margin: 1.4em auto; }
.sv-lesen img.aligncenter[width="100%"] { width: 100%; }
.sv-lesen p:has(> img:only-child), .sv-lesen p:has(> a:only-child > img) { margin: 1.2em 0; }
.sv-lesen::after { content: ''; display: block; clear: both; }
.sv-lesen iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-m); background: #0e1430; }
.sv-lesen div.alignleft, .sv-lesen div.alignright { width: 42%; }
.sv-lesen table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92em; }
.sv-lesen td, .sv-lesen th { border-bottom: 1px solid var(--papier-3); padding: .5em .6em; text-align: left; }
.sv-lesen h2:first-child, .sv-infotafel > h2:first-child { margin-top: 0; }

/* ---------- Toasts ---------- */
.sv-toasts { position: fixed; left: 50%; top: calc(var(--kopf-oben) + var(--kopf-h) + clamp(22px, 1.4vw, 44px)); transform: translateX(-50%); z-index: 90; display: grid; gap: 10px; pointer-events: none; }
.sv-toast { position: relative; display: flex; align-items: center; gap: clamp(12px, .8vw, 22px); min-width: clamp(300px, 22vw, 720px); padding: clamp(12px, .8vw, 24px) clamp(16px, 1.1vw, 34px) clamp(12px, .8vw, 24px) clamp(12px, .8vw, 24px); background: linear-gradient(180deg, #fffdf6, #fff5dc); border-radius: var(--r-l); border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--gelb-2), var(--plastik), 0 30px 60px -20px rgba(179, 122, 5, .55); perspective: 400px; }
.sv-toast__medaille { position: relative; width: clamp(52px, 3vw + 14px, 108px); height: clamp(52px, 3vw + 14px, 108px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc83d 45%, #d18f07); display: grid; place-items: center; color: #5a3b00; flex: none; box-shadow: inset 0 -4px 0 rgba(120, 70, 0, .3), 0 0 0 4px #fff, 0 0 0 6px #f0ad12; overflow: hidden; }
.sv-toast__medaille .sv-i { width: 50%; height: 50%; }
.sv-toast__glanz { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%); animation: svGlanz 2.2s ease-in-out infinite; }
@keyframes svGlanz { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
.sv-toast__kicker { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: .1em; color: var(--gelb-3); }
.sv-toast__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.15; }
.sv-toast__info { margin: .15em 0 0; font-size: var(--t-klein); color: var(--tinte-2); }
.sv-toast__zaehler { margin-left: auto; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); background: var(--tinte); color: #fff; border-radius: 999px; padding: .35em .75em; }
.sv-konfetti { position: absolute; left: 0; top: 0; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; }

/* ---------- Seitenwechsel: nativer Übergang (View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: svSeiteAlt .18s ease-out both; }
::view-transition-new(root) { animation: svSeiteNeu .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes svSeiteAlt { to { opacity: 0; } }
@keyframes svSeiteNeu { from { opacity: 0; transform: translateY(8px); } }
/* Kopf bleibt stehen (kein Überblenden der Navigation) */
.sv-kopf { view-transition-name: sv-kopf; }
::view-transition-group(sv-kopf) { animation: none; }
::view-transition-old(sv-kopf) { animation: none; opacity: 0; }
::view-transition-new(sv-kopf) { animation: none; }
:root.sv-ruhig::view-transition-group(*), :root.sv-ruhig::view-transition-old(*), :root.sv-ruhig::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Ladebalken mit Lieferwagen (nur bei Ladezeit > 150 ms) ---------- */
.sv-ladebalken { position: fixed; inset: 0 0 auto; height: 4px; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .2s; }
.sv-ladebalken__spur { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gelb), var(--gelb-2)); border-radius: 0 4px 4px 0; transform: scaleX(0); transform-origin: left center; box-shadow: 0 1px 8px rgba(240, 173, 18, .55); }
.sv-ladebalken__wagen { position: absolute; top: 3px; left: 0; width: 26px; height: 20px; translate: -100% 0; }
.sv-ladebalken__wagen svg { width: 100%; height: 100%; fill: var(--gelb); stroke: var(--tinte); stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(29, 43, 69, .25)); }
.sv-ladebalken.ist-aktiv { opacity: 1; }
.sv-ladebalken.ist-aktiv .sv-ladebalken__spur { animation: svLadeSpur 2.6s cubic-bezier(.08, .62, .2, 1) forwards; }
.sv-ladebalken.ist-aktiv .sv-ladebalken__wagen { animation: svLadeWagen 2.6s cubic-bezier(.08, .62, .2, 1) forwards; }
@keyframes svLadeSpur { to { transform: scaleX(.92); } }
@keyframes svLadeWagen { from { left: 0; } to { left: 92%; } }
.sv-ruhig .sv-ladebalken.ist-aktiv .sv-ladebalken__spur { animation: none; transform: scaleX(.6); }
.sv-ruhig .sv-ladebalken.ist-aktiv .sv-ladebalken__wagen { animation: none; left: 60%; }

/* ===== Beginn: Footer „Ortsausgang“ – 1:1 aus mockups/m3-simverse/css/simverse.css (V2-FOOTER.md) ===== */
/* ---------- Footer „Ortsausgang“: Mini-Straße + nützlicher Sonnen-Footer ---------- */
.sv-fuss { z-index: 3; margin-top: clamp(40px, 3.6vw, 130px); color: var(--tinte); display: block; }
.sv-fuss__land { position: relative; z-index: 1; background: linear-gradient(180deg, #fbeecd 0, #f9e7be 50%, #f5dcaa 100%); padding: clamp(30px, 2.4vw, 96px) 0 0; }
.sv-fuss__rahmen { width: var(--breite); margin: 0 auto; }

/* Mini-Straße (Diorama-Streifen, rein dekorativ) */
.sv-strasse { position: relative; z-index: 2; height: 12.6em; font-size: clamp(10px, .62vw, 24px); overflow-x: clip; pointer-events: none; }
.sv-strasse > * { position: absolute; }
.sv-strasse__defs { width: 0; height: 0; overflow: hidden; }
.sv-strasse__sonne { right: 8.5%; bottom: 8.5em; width: 5.6em; height: 5.6em; border-radius: 50%; z-index: 0; background: radial-gradient(circle, #ffe98f 0 22%, #ffd24a 33%, rgba(255, 207, 74, .45) 36%, rgba(255, 207, 74, 0) 70%); }
.sv-strasse__wolken { left: 0; bottom: 9.9em; width: 100%; height: 3em; z-index: 0; animation: svWolkenZug 110s ease-in-out infinite alternate; }
.sv-strasse__wolke { position: absolute; left: 13%; bottom: .5em; width: 6em; opacity: .92; filter: blur(.05em); }
.sv-strasse__wolke--2 { left: 57%; bottom: 1.5em; width: 4.4em; opacity: .78; }
@keyframes svWolkenZug { from { transform: translateX(-10%); } to { transform: translateX(12%); } }
.sv-strasse__huegel { left: 0; bottom: 8.3em; width: 100%; height: 3.8em; z-index: 1; filter: blur(.07em); }
.sv-strasse__kulisse, .sv-strasse__mitte { inset: 0; }
.sv-strasse__kulisse { z-index: 2; }
.sv-strasse__mitte { z-index: 5; }
.sv-strasse__ding { position: absolute; display: block; height: auto; overflow: visible; }
.sv-strasse__ding.ist-fern { filter: blur(.055em) saturate(.92); }
.sv-windrad__rotor { transform-box: view-box; transform-origin: 20px 21.5px; animation: svDreh 9s linear infinite; }
@keyframes svDreh { to { transform: rotate(360deg); } }
.sv-strasse__boden { left: 0; right: 0; bottom: 1.3em; height: 7.6em; z-index: 3;
	background:
		linear-gradient(to top, transparent .5em, rgba(160, 118, 52, .22) .5em .64em, transparent .64em 1.02em, rgba(160, 118, 52, .18) 1.02em 1.14em, transparent 1.14em),
		linear-gradient(to top, #e6cd94 0, #efdcab 1.6em, #8cc468 1.6em, #9fd078 2.1em, #f3ecdc 2.1em, #e6dfce 2.32em, #63666f 2.32em, #787b85 5.1em, #e9e2d1 5.1em, #ddd5c2 5.32em, #9fcf7c 5.32em, #a9d585 5.8em, #d9cdb2 5.8em, #cbbd9f 6.55em, #b3d98e 6.55em, #c2df9e 7.6em); }
.sv-strasse__mittellinie { left: 0; right: 0; bottom: 4.93em; height: .16em; z-index: 3; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .92) 0 1.7em, transparent 1.7em 3.4em); }
.sv-strasse__gleisbett { left: 0; right: 0; bottom: 7.1em; height: .75em; z-index: 3; background: repeating-linear-gradient(90deg, #9b7451 0 .34em, transparent .34em 1em) 0 100% / 100% .5em no-repeat; }
.sv-strasse__gleisbett::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .2em; background: #8d929c; box-shadow: 0 .08em 0 #5b616e, 0 -.05em 0 #d3d7dd; }
.sv-strasse__spur { left: 0; right: 0; height: 0; }
.sv-strasse__spur[data-spur="himmel"] { bottom: 10.5em; z-index: 2; }
.sv-strasse__spur[data-spur="gleis"] { bottom: 7.82em; z-index: 4; }
.sv-strasse__spur[data-spur="fern"] { bottom: 5.22em; z-index: 6; }
.sv-strasse__spur[data-spur="nah"] { bottom: 3.7em; z-index: 7; }
.sv-strasse__spur[data-spur="feld"] { bottom: 2.02em; z-index: 9; }
.sv-strasse__gras { left: 0; bottom: 1.2em; width: 100%; height: .8em; z-index: 10; filter: blur(.035em); }
.sv-strasse__erde { left: 0; right: 0; bottom: 0; height: 1.32em; z-index: 11;
	background:
		radial-gradient(circle at 30% 45%, rgba(255, 236, 200, .35) 0 .1em, transparent .13em) 0 0 / 2.9em 1.32em,
		radial-gradient(circle at 75% 70%, rgba(92, 52, 22, .35) 0 .12em, transparent .15em) .8em 0 / 2.3em 1.32em,
		radial-gradient(ellipse at 50% 35%, rgba(150, 146, 140, .75) 0 .17em, transparent .21em) 1.7em 0 / 5.3em 1.32em,
		linear-gradient(180deg, #8a5a33 0 .16em, #cf8e52 .16em, #c07f45 55%, #a96c3b 100%);
	box-shadow: 0 .5em .9em -.35em rgba(110, 64, 22, .45); }
.sv-ortsschild { left: 3.4%; bottom: 3.02em; z-index: 8; display: block; padding-bottom: 2.3em; }
.sv-ortsschild::before, .sv-ortsschild::after { content: ''; position: absolute; bottom: 0; width: .26em; height: 2.7em; border-radius: .1em; background: linear-gradient(90deg, #9aa0aa, #dde1e6 45%, #8a8f99); }
.sv-ortsschild::before { left: 24%; }
.sv-ortsschild::after { right: 24%; }
.sv-ortsschild__tafel { position: relative; z-index: 1; display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.1em; line-height: 1; letter-spacing: -.01em; color: #1d1a17; background: #ffd21f; border-radius: .32em; padding: .55em .7em .5em; white-space: nowrap; box-shadow: inset 0 0 0 .13em #ffd21f, inset 0 0 0 .24em #1d1a17, 0 .16em 0 rgba(120, 90, 0, .45), 0 .45em .5em -.25em rgba(29, 43, 69, .4); }

/* Fahrzeuge */
.sv-fz { position: absolute; left: 0; bottom: 0; display: block; pointer-events: auto; cursor: pointer; will-change: transform; }
.sv-fz__k { display: block; animation: svWackeln .38s ease-in-out infinite alternate; }
.sv-fz svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-fz--links svg { transform: scaleX(-1); }
.sv-fz::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -.2em; height: .42em; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(29, 43, 69, .34), rgba(29, 43, 69, 0)); }
.sv-fz--flugzeug::after { display: none; }
.sv-fz--flugzeug .sv-fz__k { animation: svSchweben 2.6s ease-in-out infinite alternate; }
.sv-fz__rad { transform-box: fill-box; transform-origin: center; animation: svRad .7s linear infinite; }
.sv-fz--traktor .sv-fz__rad, .sv-fz--panzer .sv-fz__rad { animation-duration: 1.7s; }
.sv-fz--zug .sv-fz__rad { animation-duration: .5s; }
.sv-fz__blau, .sv-fz__gelblicht { animation: svBlink .6s linear infinite; }
.sv-fz__rauch { transform-box: fill-box; transform-origin: center; animation: svRauch 1.6s ease-out infinite; }
.sv-fz__trommel { animation: svTrommel .9s linear infinite; }
.sv-fz__hals { transform-box: fill-box; transform-origin: 40% 100%; animation: svHals 1.8s ease-in-out infinite alternate; }
@keyframes svRad { to { transform: rotate(360deg); } }
@keyframes svWackeln { to { transform: translateY(-.05em); } }
@keyframes svSchweben { to { transform: translateY(-.35em) rotate(-1.5deg); } }
@keyframes svBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
@keyframes svRauch { from { opacity: .85; transform: translate(0, 0) scale(.5); } to { opacity: 0; transform: translate(-4px, -7px) scale(1.7); } }
@keyframes svTrommel { to { stroke-dashoffset: -10; } }
@keyframes svHals { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }
.sv-fz.ist-geparkt *, .sv-fuss.ist-pausiert .sv-strasse, .sv-fuss.ist-pausiert .sv-strasse * { animation-play-state: paused; }

/* Kopfzeile: Bezirke, Suche, Zufall */
.sv-fuss__kopf { display: flex; align-items: center; gap: clamp(12px, 1vw, 34px); margin-bottom: clamp(14px, 1.1vw, 40px); }
.sv-fuss__titel { display: flex; align-items: baseline; gap: .55em; font-size: var(--t-h3); margin: 0; }
.sv-fuss__titel small { font-family: var(--f-text); font-weight: 700; font-size: .58em; color: var(--tinte-3); }
.sv-fsuche { position: relative; display: flex; align-items: center; margin-left: auto; }
.sv-fsuche input { width: clamp(220px, 15vw, 580px); font: inherit; font-size: clamp(14px, .3vw + 10px, 23px); padding: .7em 3em .7em 1.15em; border-radius: 999px; border: 2px solid rgba(29, 43, 69, .12); background: #fff; color: var(--tinte); box-shadow: inset 0 2px 4px rgba(29, 43, 69, .08), 0 1px 0 #fff; transition: border-color .2s, box-shadow .2s; }
.sv-fsuche input::placeholder { color: var(--tinte-3); }
.sv-fsuche input:focus { border-color: var(--gelb-2); outline: none; box-shadow: 0 0 0 4px rgba(255, 200, 61, .4); }
.sv-fsuche__knopf { position: absolute; right: 6px; width: 2.3em; height: 2.3em; border-radius: 50%; border: 0; background: var(--tinte); color: var(--gelb); display: grid; place-items: center; cursor: pointer; font-size: clamp(14px, .3vw + 10px, 23px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); transition: transform .25s var(--feder); }
.sv-fsuche__knopf:hover { transform: scale(1.08); }
.sv-zufall { gap: .65em; padding: .55em 1.3em .55em .75em; }
.sv-zufall > span { display: flex; flex-direction: column; gap: .2em; text-align: left; }
.sv-zufall small { font-family: var(--f-text); font-weight: 700; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; color: rgba(43, 31, 0, .62); }
.sv-wuerfel { width: 1.9em; height: 1.9em; flex: none; overflow: visible; filter: drop-shadow(0 2px 0 rgba(150, 95, 0, .35)); transition: transform .5s var(--feder); }
.sv-zufall:hover .sv-wuerfel, .sv-zufall:focus-visible .sv-wuerfel { transform: rotate(-16deg) scale(1.12); }

/* Bezirke als Plastik-Karten mit Mini-Foto */
.sv-fbezirke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, .8vw, 28px); }
.sv-fbz { --farbe: var(--gelb); --auf: var(--tinte); display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border-radius: var(--r-m); border: 2px solid #fff; box-shadow: var(--plastik-klein); overflow: hidden; transition: transform .4s var(--feder), box-shadow .25s; }
.sv-fbz:hover, .sv-fbz:focus-visible { transform: translateY(-4px) rotate(-.5deg); box-shadow: inset 0 1px 0 #fff, 0 6px 0 rgba(29, 43, 69, .1), 0 22px 36px -16px rgba(29, 43, 69, .45), 0 0 0 3px var(--farbe); }
.sv-fbz__bild { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--papier-3); container-type: inline-size; }
.sv-fbz__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sv-fbz:hover .sv-fbz__bild img, .sv-fbz:focus-visible .sv-fbz__bild img { transform: scale(1.07); }
.sv-fbz__bahn { position: absolute; left: 0; right: 0; bottom: 8%; height: 0; z-index: 2; font-size: 3.1cqi; pointer-events: none; }
.sv-fbz__bahn .sv-fz { cursor: inherit; pointer-events: none; }
.sv-fbz__bahn .sv-fz--flugzeug { bottom: 7.5em; }
.sv-fbz__bahn .sv-fz--zug { width: 13em !important; }
.sv-fbz__text { display: flex; align-items: center; gap: .55em; padding: .6em .65em .65em; border-top: 3px solid var(--farbe); font-size: clamp(13px, .27vw + 8.6px, 22px); flex: 1; }
.sv-fbz__icon { width: 2.1em; height: 2.1em; border-radius: 30%; background: var(--farbe); color: var(--auf); display: grid; place-items: center; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .45s var(--feder); }
.sv-fbz__icon .sv-i { width: 1.2em; height: 1.2em; }
.sv-fbz:hover .sv-fbz__icon, .sv-fbz:focus-visible .sv-fbz__icon { transform: rotate(-10deg) scale(1.1); }
.sv-fbz__name { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.15; }
.sv-fbz__name small { display: block; font-family: var(--f-text); font-weight: 700; font-size: .78em; color: var(--tinte-3); }
.sv-fbz__zahl { font-family: var(--f-display); font-weight: 600; min-width: 2em; text-align: center; padding: .25em .55em; border-radius: 999px; background: var(--papier-2); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.sv-fbz:hover .sv-fbz__zahl, .sv-fbz:focus-visible .sv-fbz__zahl { background: var(--farbe); color: var(--auf); }

/* Info-Zeile: Kategorien · Spiele-Tipps · Ratgeber · Service */
.sv-fuss__info { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: clamp(18px, 2vw, 70px); margin-top: clamp(26px, 2.2vw, 84px); align-items: start; }
.sv-fspalte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .9em; }
.sv-fspalte__titel { display: flex; align-items: center; gap: .55em; font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); text-transform: uppercase; letter-spacing: .1em; color: var(--tinte-2); margin: 0 0 .9em; }
.sv-fspalte__kopf .sv-fspalte__titel { margin: 0; }
.sv-fspalte__kopf .sv-reiter { margin: -.55em 0; }
.sv-fspalte__titel::before { content: ''; width: .6em; height: .6em; border-radius: 50%; background: var(--gelb-2); box-shadow: 0 0 0 3px rgba(255, 200, 61, .35); }

/* Wegweiser (Kategorien): Pfahl links, Schilder zeigen nach rechts */
.sv-wegweiser { position: relative; padding: .5em 0 1.6em; font-size: clamp(15px, .38vw + 8.6px, 28px); }
.sv-wegweiser__pfahl { position: absolute; left: 1.15em; top: -.4em; bottom: .25em; width: .62em; margin-left: -.31em; border-radius: .31em .31em .12em .12em; background: linear-gradient(90deg, #8f5a30, #cf8e52 45%, #a76a3a); }
.sv-wegweiser__pfahl::before { content: ''; position: absolute; left: -.14em; right: -.14em; top: -.22em; height: .5em; border-radius: .25em; background: #8f5a30; }
.sv-wegweiser__pfahl::after { content: ''; position: absolute; left: -1.5em; right: -1.5em; bottom: -.45em; height: .9em; border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 30%, #9fd078 0 38%, #7db454 60%, rgba(125, 180, 84, 0) 72%); }
.sv-wegweiser ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: .6em; }
.sv-wegweiser li { display: flex; max-width: 100%; }
.sv-wegweiser li:nth-child(2) .sv-wegweiser__schild { --kipp: 1.5deg; }
.sv-wegweiser li:nth-child(3) .sv-wegweiser__schild { --schild: #fff; --kipp: -1deg; }
.sv-wegweiser__schild { --schild: var(--gelb); --kipp: -2deg; position: relative; display: inline-flex; align-items: center; gap: .55em; margin-left: .25em; padding: .55em 1.7em .55em 1.4em; text-decoration: none; font-family: var(--f-display); font-weight: 600; color: var(--tinte); line-height: 1.1; white-space: nowrap; filter: drop-shadow(0 3px 0 rgba(29, 43, 69, .16)) drop-shadow(0 8px 9px rgba(29, 43, 69, .14)); transform: rotate(var(--kipp)); transform-origin: .9em 50%; transition: transform .45s var(--feder); }
.sv-wegweiser__schild::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: .3em; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), var(--schild); clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%); }
.sv-wegweiser__schild::after { content: ''; position: absolute; left: .76em; top: 50%; width: .3em; height: .3em; margin-top: -.15em; border-radius: 50%; background: rgba(29, 43, 69, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.sv-wegweiser__schild:hover, .sv-wegweiser__schild:focus-visible { transform: rotate(calc(var(--kipp) * -2)) translateX(.25em); }
.sv-wegweiser__schild--start { --schild: var(--tinte); color: #fff; font-size: .86em; }
.sv-wegweiser__schild--start::after { background: rgba(255, 255, 255, .45); }
.sv-wegweiser__zahl { font-size: .8em; background: rgba(29, 43, 69, .12); padding: .18em .55em; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* Spiele-Tipps mit Reitern */
.sv-reiter { display: inline-flex; gap: 4px; padding: 4px; background: rgba(29, 43, 69, .07); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(29, 43, 69, .1); }
.sv-reiter [role="tab"] { border: 0; background: none; font-family: var(--f-display); font-weight: 500; font-size: var(--t-klein); padding: .38em .95em; border-radius: 999px; cursor: pointer; color: var(--tinte-2); white-space: nowrap; transition: background .2s, color .2s; }
.sv-reiter [role="tab"]:hover { background: rgba(255, 255, 255, .7); }
.sv-reiter [role="tab"][aria-selected="true"] { background: var(--tinte); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.sv-ftipps ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, .5vw, 18px); }
.sv-ftipps[hidden] { display: none; }
.sv-ftipp { display: flex; align-items: center; gap: .75em; padding: .45em; border-radius: var(--r-m); text-decoration: none; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .75); font-size: var(--t-klein); transition: background .2s, transform .35s var(--feder), box-shadow .2s; }
.sv-ftipp:hover, .sv-ftipp:focus-visible { background: #fff; transform: translateY(-2px); box-shadow: var(--plastik-klein); }
.sv-ftipp img { width: 4.6em; height: 3.3em; object-fit: cover; border-radius: .6em; flex: none; box-shadow: 0 0 0 2px #fff, 0 4px 8px -4px rgba(29, 43, 69, .45); }
.sv-ftipp__text { min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.sv-ftipp__text b { font-family: var(--f-display); font-weight: 600; font-size: 1.05em; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sv-ftipp__text small { display: flex; align-items: center; gap: .35em; flex-wrap: wrap; color: var(--tinte-3); font-weight: 700; font-size: .9em; }
.sv-ftipp__text small .sv-i { width: 1.05em; height: 1.05em; }
.sv-ftipp .sv-status { font-size: .78em; }

/* Ratgeber und Service */
.sv-fratgeber, .sv-fservice { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-fratgeber { gap: .6em; }
.sv-fratgeber a { display: flex; gap: .75em; align-items: flex-start; text-decoration: none; padding: .7em .8em; border-radius: var(--r-m); background: #fff; border: 2px solid #fff; box-shadow: var(--plastik-klein); font-size: var(--t-klein); transition: transform .35s var(--feder), box-shadow .2s; }
.sv-fratgeber a:hover, .sv-fratgeber a:focus-visible { transform: translateY(-2px) rotate(-.4deg); }
.sv-fratgeber__icon { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--gelb); flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.sv-fratgeber b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.06em; line-height: 1.2; margin-bottom: .15em; }
.sv-fratgeber small { color: var(--tinte-3); font-weight: 700; }
.sv-fservice { gap: .2em; }
.sv-fservice a { display: flex; align-items: center; gap: .6em; padding: .4em .5em; border-radius: 14px; text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: clamp(15px, .3vw + 10px, 24px); transition: background .2s, transform .3s var(--feder); }
.sv-fservice a:hover, .sv-fservice a:focus-visible { background: rgba(255, 255, 255, .75); transform: translateX(3px); }
.sv-fservice__icon { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--tinte); box-shadow: var(--plastik-klein); flex: none; }
.sv-fservice .sv-i--extern { width: .8em; height: .8em; opacity: .55; }

/* Werkbank: Erfolge + Schalter */
.sv-werkbank { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 44px); margin-top: clamp(24px, 2vw, 76px); padding: clamp(10px, .75vw, 26px) clamp(14px, 1.1vw, 40px); background: rgba(255, 255, 255, .6); border: 2px solid rgba(255, 255, 255, .9); border-radius: var(--r-l); box-shadow: var(--plastik-klein); font-size: var(--t-klein); }
.sv-werkbank__erfolge { display: flex; align-items: center; gap: .5em .9em; flex: 1; min-width: 0; }
.sv-werkbank__pokal { width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc83d 50%, #d18f07); color: #5a3b00; flex: none; box-shadow: inset 0 -3px 0 rgba(120, 70, 0, .3), 0 0 0 3px #fff, 0 0 0 4.5px rgba(240, 173, 18, .6); }
.sv-werkbank__stand { display: flex; flex-direction: column; }
.sv-werkbank__titel { font-size: 1.15em; margin: 0; line-height: 1.1; }
.sv-erfolge__stand { margin: 0; color: var(--tinte-3); white-space: nowrap; }
.sv-erfolge__stand b { color: var(--tinte); font-family: var(--f-display); font-size: 1.1em; }
.sv-erfolge__balken { width: clamp(70px, 6vw, 240px); height: .6em; border-radius: 999px; background: rgba(29, 43, 69, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(29, 43, 69, .2); flex: none; }
.sv-erfolge__balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f0ad12, #ffd75a); border-radius: inherit; transition: width .8s var(--ease); }
.sv-erfolge__raster { list-style: none; margin: 0; padding: 0; display: flex; gap: .3em; min-width: 0; }
.sv-erfolge__raster[hidden] { display: none; }
.sv-medaille { width: 1.7em; height: 1.7em; font-family: var(--f-display); font-weight: 600; font-size: .95em; border-radius: 50%; display: grid; place-items: center; background: rgba(29, 43, 69, .06); color: rgba(29, 43, 69, .3); box-shadow: inset 0 0 0 1.5px rgba(29, 43, 69, .12); }
.sv-medaille .sv-i { width: 58%; height: 58%; }
.sv-medaille--mehr { color: var(--tinte-2); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(29, 43, 69, .14); font-size: .78em; width: 2.1em; height: 2.1em; }
.sv-medaille.ist-frei { background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc83d 50%, #d18f07); color: #5a3b00; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px rgba(179, 122, 5, .45); }
.sv-werkbank__schalter { display: flex; gap: .2em; padding: 0 clamp(10px, .9vw, 34px); border-left: 2px dashed rgba(29, 43, 69, .14); border-right: 2px dashed rgba(29, 43, 69, .14); }
.sv-schalter { display: inline-flex; align-items: center; gap: .55em; padding: .5em .75em; border: 0; background: none; color: var(--tinte); cursor: pointer; font-family: var(--f-display); font-weight: 500; font-size: clamp(14px, .3vw + 9.5px, 23px); border-radius: 999px; white-space: nowrap; transition: background .2s; }
.sv-schalter:hover { background: rgba(29, 43, 69, .06); }
.sv-schalter .sv-i { color: var(--tinte-3); }
.sv-schalter__bahn { width: 2.7em; height: 1.5em; border-radius: 999px; background: rgba(29, 43, 69, .16); position: relative; flex: none; box-shadow: inset 0 2px 3px rgba(29, 43, 69, .25); transition: background .25s; }
.sv-schalter__knopf { position: absolute; left: .17em; top: .17em; width: 1.16em; height: 1.16em; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(29, 43, 69, .22); transition: transform .35s var(--feder); }
.sv-schalter[aria-checked="true"] .sv-schalter__bahn { background: var(--gelb-2); }
.sv-schalter[aria-checked="true"] .sv-schalter__knopf { transform: translateX(1.2em); }

/* Pflichtzeile: Copyright */
.sv-fuss__copy { display: flex; align-items: center; justify-content: center; gap: .7em; margin: 0; padding: clamp(16px, 1.2vw, 44px) 0 clamp(18px, 1.4vw, 50px); color: var(--tinte-2); font-weight: 600; font-size: var(--t-klein); }
.sv-fuss__copy .sv-logo__marke { width: clamp(30px, 1.5vw + 8px, 72px); }
.sv-hoch { flex: none; display: inline-flex; align-items: center; gap: .5em; padding: .45em 1.05em .45em .6em; border-radius: 999px; border: 2px solid rgba(29, 43, 69, .12); background: #fff; color: var(--tinte); cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: clamp(14px, .3vw + 9.5px, 23px); box-shadow: var(--plastik-klein); transition: transform .3s var(--feder); }
.sv-hoch:hover { transform: translateY(-3px); }
.sv-ballon { width: 1.3em; height: 1.75em; flex: none; overflow: visible; animation: svSchweben 2.2s ease-in-out infinite alternate; }

/* Meilenstein-Übersicht */
.sv-dialog { width: min(760px, 90vw); max-height: 80vh; border: 0; padding: 0; border-radius: var(--r-l); background: var(--papier); color: var(--tinte); box-shadow: 0 40px 100px -20px rgba(29, 43, 69, .6); }
.sv-dialog::backdrop { background: rgba(29, 43, 69, .45); backdrop-filter: blur(6px); }
.sv-dialog__kopf { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 2px solid var(--papier-3); position: sticky; top: 0; background: var(--papier); }
.sv-dialog__kopf h2 { margin: 0; display: flex; align-items: center; gap: .4em; font-size: var(--t-h2); }
.sv-dialog__liste { list-style: none; margin: 0; padding: 12px 24px 24px; display: grid; gap: 8px; }
.sv-dialog__liste li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06); }
.sv-dialog__liste li span:nth-child(2) { flex: 1; }
.sv-dialog__liste small { display: block; color: var(--tinte-3); font-size: var(--t-klein); }
.sv-dialog__medaille { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--papier-2); color: var(--tinte-4); flex: none; }
.ist-frei .sv-dialog__medaille { background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc83d 50%, #d18f07); color: #5a3b00; }
.sv-dialog__stand { font-family: var(--f-display); font-weight: 600; font-size: var(--t-klein); color: var(--tinte-3); }
.ist-frei .sv-dialog__stand { color: #2f6a20; }

/* Ruhig: keine Dauerbewegung im Footer */
.sv-ruhig .sv-strasse, .sv-ruhig .sv-strasse *, .sv-ruhig .sv-fbz *, .sv-ruhig .sv-ballon { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sv-strasse, .sv-strasse *, .sv-fbz *, .sv-ballon { animation: none !important; } }
@media (max-width: 999px) {
	.sv-fuss__kopf { flex-wrap: wrap; }
	.sv-fsuche { margin-left: 0; }
	.sv-fbezirke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-fuss__info { grid-template-columns: 1fr; }
	.sv-werkbank { flex-direction: column; align-items: stretch; }
	.sv-werkbank__erfolge { flex-wrap: wrap; }
	.sv-werkbank__schalter { border: 0; padding: 0; flex-wrap: wrap; }
}
/* ===== Ende: Footer „Ortsausgang“ ===== */
.sv-ufo-dom { position: fixed; left: 0; top: 0; width: 160px; z-index: 95; pointer-events: none; }
.sv-ufo-dom__strahl { opacity: 0; }

/* ---------- Seitennummern (Suche, Archive) ---------- */
.navigation.pagination { margin: clamp(24px, 2vw, 60px) 0 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers { display: inline-grid; place-items: center; min-width: 2.6em; height: 2.6em; padding: 0 .8em; border-radius: 999px; background: #fff; text-decoration: none; font-family: var(--f-display); font-weight: 600; box-shadow: var(--plastik-klein); }
.page-numbers.current { background: var(--tinte); color: #fff; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) { .sv-logo__umlauf, .sv-toast__glanz { animation: none; } html { scroll-behavior: auto; } }
.sv-ruhig .sv-logo__umlauf, .sv-ruhig .sv-toast__glanz { animation: none; }
.sv-ruhig *, .sv-ruhig *::before, .sv-ruhig *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

/* ---------- Kleinere Bildschirme (Laptop klein, Tablet, Smartphone) ---------- */
/* Ab 1280 px bleibt alles wie abgenommen. Darunter fließend (Grid/Flex, clamp()), ohne feste Mindestbreiten. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.sv-res__pill small { display: none; }
	.sv-res__wrap, #sv-res-wetter { display: none; }
}
@media (max-width: 1199px) {
	.sv-fuss__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Kopf unter 1100 px: Logo + Menü-Knopf; Navigation, Bezirke, Weltstatus und Suche im aufklappbaren Menü */
@media (max-width: 1099px) {
	:root { --kopf-h: 60px; }
	.sv-kopf { padding-top: 8px; }
	.sv-kopf__leiste { position: relative; gap: 10px; padding: 0 8px 0 12px; }
	.sv-logo { min-width: 0; font-size: 17px; }
	.sv-logo__marke { width: 40px; }
	.sv-kopf__menueknopf { display: inline-flex; align-items: center; justify-content: center; gap: .45em; flex: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 1em; border-radius: 999px; border: 2px solid rgba(29, 43, 69, .12); background: #fff; color: var(--tinte); font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--plastik-klein); }
	.sv-kopf__menueknopf .sv-i { width: 1.3em; height: 1.3em; }
	.sv-kopf__menueknopf[aria-expanded="true"] { background: var(--tinte); color: #fff; border-color: var(--tinte); }
	.sv-kopf__menue { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; gap: 14px; max-height: calc(100vh - var(--kopf-oben) - var(--kopf-h) - 32px); max-height: calc(100dvh - var(--kopf-oben) - var(--kopf-h) - 32px); overflow: auto; overscroll-behavior: contain; padding: 14px; background: var(--papier); border: 2px solid #fff; border-radius: var(--r-l); box-shadow: var(--plastik), 0 30px 60px -24px rgba(29, 43, 69, .5); }
	.sv-kopf.ist-menue-offen .sv-kopf__menue { display: flex; }
	.sv-suche { width: 100%; }
	.sv-suche input, .sv-suche input:focus { width: 100%; min-height: 48px; font-size: 16px; }
	.sv-suche__knopf { width: 40px; height: 40px; font-size: 16px; right: 4px; }
	.sv-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
	.sv-nav__link { width: 100%; min-height: 48px; padding: .5em .9em; font-size: 17px; }
	.sv-nav__knopf { justify-content: space-between; }
	.sv-nav__mega { position: static; }
	.sv-mega { position: static; left: auto; top: auto; transform: none; width: auto; margin-top: 6px; padding: 12px; box-shadow: none; border: 2px solid var(--papier-3); }
	.sv-mega__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
	.sv-mega__bezirk { min-height: 48px; font-size: 15px; }
	.sv-res { margin: 0; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding: 6px; border-radius: var(--r-m); }
	.sv-res__wrap { position: static; display: contents; }
	#sv-res-wetter { display: inline-flex; }
	#sv-res-genres { display: none; }
	.sv-res__pill { min-height: 44px; font-size: 14px; }
	.sv-zeitraffer { position: static; order: 10; flex: 1 1 100%; width: auto; transform: none; margin-top: 2px; }
	.sv-raster--drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
	/* ohne JavaScript: Menü offen unter der Leiste, Kopf scrollt mit */
	html:not(.sv-js) .sv-kopf { position: relative; }
	html:not(.sv-js) .sv-kopf__leiste { height: auto; flex-wrap: wrap; padding: 8px 12px; }
	html:not(.sv-js) .sv-kopf__menue { display: flex; position: static; width: 100%; max-height: none; padding: 4px 0 8px; border: 0; box-shadow: none; background: none; }
	html:not(.sv-js) main { padding-top: 16px; }
}
@media (max-width: 999px) {
	.sv-lesen .alignright, .sv-lesen .alignleft, .sv-lesen div.alignleft, .sv-lesen div.alignright { float: none; margin: 1em 0; max-width: 100%; width: auto; }
}
@media (max-width: 699px) {
	.sv-fuss__info { grid-template-columns: minmax(0, 1fr); }
}
/* Smartphone */
@media (max-width: 599px) {
	h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
	.sv-lesen { overflow-wrap: break-word; }
	.sv-lesen table { display: block; overflow-x: auto; }
	.sv-toast { min-width: 0; width: calc(100vw - 2 * var(--rand)); }
	.sv-fuss__kopf { gap: 10px; }
	.sv-fsuche { flex: 1 1 100%; }
	.sv-fsuche input { width: 100%; }
	.sv-zufall { flex: 1 1 100%; justify-content: center; }
	.sv-fspalte__kopf { flex-wrap: wrap; }
	.sv-ftipps ul { grid-template-columns: minmax(0, 1fr); }
	.sv-fuss__copy { flex-wrap: wrap; text-align: center; }
	.sv-erfolge__stand { white-space: normal; }
}
@media (max-width: 479px) {
	.sv-logo { font-size: 15.5px; gap: .4em; }
	.sv-logo__marke { width: 36px; }
	.sv-kopf__menueknopf { padding: 0; width: 44px; }
	.sv-kopf__menuetext { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Touch-Ziele mindestens 44 px (Touch-Geräte und alle Breiten unter 1100 px) */
@media (pointer: coarse), (max-width: 1099px) {
	.sv-logo, .sv-knopf, .sv-karte__spielen, a.sv-badge, .sv-wegweiser__schild, .sv-reiter [role="tab"], .sv-fservice a, .sv-schalter, .sv-hoch, .page-numbers, .sv-res__pill--knopf, .sv-nav__link { min-height: 44px; }
	.sv-rund { min-width: 44px; min-height: 44px; }
	.sv-suche input { min-height: 48px; }
	.sv-suche__knopf { width: 44px; height: 44px; right: 2px; }
	.sv-fsuche input { min-height: 48px; }
	.sv-fsuche__knopf { width: 44px; height: 44px; right: 2px; }
}
@media (max-width: 782px) { .admin-bar { --kopf-oben: 46px; } }
@media (max-width: 600px) { .admin-bar { --kopf-oben: 0px; } }

/* ---------- Schwebender „Nach oben“-Knopf: Heißluftballon mit Lesefortschritt-Ring ---------- */
.sv-hochflug { position: fixed; right: clamp(14px, 1.4vw, 44px); bottom: clamp(14px, 1.4vw, 44px); z-index: 90; width: clamp(56px, 3.6vw, 92px); height: clamp(56px, 3.6vw, 92px); padding: 0; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 50% 35%, #fffdf6, #fff3d6); box-shadow: var(--plastik-klein), 0 14px 30px -12px rgba(29, 43, 69, .5); display: grid; place-items: center; cursor: pointer; opacity: 0; translate: 0 24px; scale: .8; pointer-events: none; transition: opacity .3s, translate .45s var(--feder), scale .45s var(--feder); }
.sv-hochflug.ist-sichtbar { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.sv-hochflug__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); rotate: -90deg; pointer-events: none; }
.sv-hochflug__spur, .sv-hochflug__stand { fill: none; stroke-width: 4; }
.sv-hochflug__spur { stroke: rgba(29, 43, 69, .1); }
.sv-hochflug__stand { stroke: var(--gelb-2); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear; }
.sv-hochflug .sv-ballon { width: 42%; height: 58%; pointer-events: none; transition: translate .35s var(--feder); }
.sv-hochflug:hover .sv-ballon { translate: 0 -4px; }
.sv-hochflug:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
.sv-hochflug.ist-im-fuss { opacity: 0; translate: 0 24px; pointer-events: none; }
.sv-ruhig .sv-hochflug { transition: opacity .2s; }
@media (max-width: 999px) { .sv-hochflug { width: 52px; height: 52px; right: 12px; bottom: 12px; } }