/* Stadtquartier · p75.css · App-Einstieg, Cookie- und Datenschutz-Einstellungen, KI-Hinweise (Paket 75, 14.10.2026) */

/* ---------- App-Einstieg ---------- */
html.sqx-on, html.sqx-on body{overflow:hidden}
.sqx{position:fixed;z-index:10000;overflow:hidden;background:radial-gradient(120% 80% at 50% 38%,#0b3a57 0%,#00263A 52%,#00182a 100%);color:#F4EFE8;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
.sqx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sqx-map{position:absolute;inset:0;width:100%;height:100%}
.sqx-q{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sqx-q .q,.sqx-q .portal{filter:drop-shadow(0 0 14px rgba(255,82,0,.55)) drop-shadow(0 0 40px rgba(255,82,0,.25))}
.sqx-glow{position:absolute;left:0;top:0;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,82,0,.42),rgba(255,82,0,.12) 38%,transparent 66%);opacity:0;pointer-events:none;will-change:transform,opacity}
.sqx-wm{position:absolute;pointer-events:none}
.sqx-wm svg path{fill:#F4EFE8}
.sqx-wm svg path[fill="none"]{fill:none}
.sqx-line{position:absolute;left:50%;width:44px;height:2px;background:#ff5200;transform:translateX(-50%) scaleX(0);transform-origin:50% 50%}
.sqx-claim{position:absolute;left:0;right:0;margin:0;text-align:center;font:400 clamp(19px,5.4vw,23px)/1.2 var(--serif);letter-spacing:-.01em;color:#F4EFE8;opacity:0}
.sqx-count{position:absolute;left:0;right:0;margin:0;text-align:center;font:500 12.5px/1 var(--sans);letter-spacing:.04em;color:rgba(244,239,232,.62);opacity:0}
.sqx-count b{color:#ff7a3d;font-weight:600;font-variant-numeric:tabular-nums}
.sqx-skip{position:absolute;right:16px;bottom:max(18px,env(safe-area-inset-bottom));z-index:2;border:1px solid rgba(244,239,232,.22);background:rgba(0,38,58,.35);color:rgba(244,239,232,.72);font:500 12px/1 var(--sans);padding:9px 14px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sqx-skip:focus-visible{outline:2px solid #ff5200;outline-offset:2px}
/* nach dem Einstieg: App baut sich auf */
.sqa-enter .sqa-head,.sqa-enter .sqa-body>*{animation:sqaIn .7s var(--ease) both}
.sqa-enter .sqa-body>*:nth-child(1){animation-delay:.05s}.sqa-enter .sqa-body>*:nth-child(2){animation-delay:.11s}.sqa-enter .sqa-body>*:nth-child(3){animation-delay:.17s}.sqa-enter .sqa-body>*:nth-child(4){animation-delay:.23s}.sqa-enter .sqa-body>*:nth-child(5){animation-delay:.29s}.sqa-enter .sqa-body>*:nth-child(n+6){animation-delay:.34s}
.sqa-enter .sqa-tabs{animation:sqaTabs .6s .2s var(--ease) both}
.sqa-enter .sqa-side,.sqa-enter .sqa-side.r{animation:sqaSide .9s .1s var(--ease) both}
@keyframes sqaIn{from{opacity:0;transform:translateY(18px)}}
@keyframes sqaTabs{from{transform:translateY(100%)}}
@keyframes sqaSide{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.sqa-enter .sqa-head,.sqa-enter .sqa-body>*,.sqa-enter .sqa-tabs,.sqa-enter .sqa-side{animation:none}}

/* ---------- Cookie-Banner ---------- */
.sqc{--sqc-bg:#fff;--sqc-fg:#00263A;position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:8000;max-width:880px;margin:0 auto;background:var(--sqc-bg);color:var(--sqc-fg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .5s var(--ease),opacity .4s}
.sqc.on{transform:none;opacity:1}
.sqc-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:20px 22px}
.sqc h2{font:500 22px/1.15 var(--serif);margin:0 0 6px;letter-spacing:-.01em}
.sqc p{margin:0;font-size:14.5px;line-height:1.5}
.sqc-links{display:flex;gap:16px;margin-top:10px!important;font-size:13px!important}
.sqc-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,38,58,.35)}
.sqc-btns{display:grid;gap:8px;min-width:200px}
.sqc-b{--bg:#00263A;--fg:#fff;border-color:var(--bg)}
.sqc-b:hover{--bg:#003654}
.sqc-gpc{display:flex;gap:8px;align-items:flex-start;margin-top:10px!important;padding:8px 10px;border-radius:8px;background:#EEF4F7;color:#1D4E6E;font-size:13px!important}
@media (max-width:720px){.sqc{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:18px}.sqc-in{grid-template-columns:1fr;padding:18px}.sqc-btns{grid-template-columns:1fr 1fr;min-width:0}.sqc-set{grid-column:1/-1}.sqc p{font-size:14px}}
/* App: Banner über der Tab-Leiste */
html.sqc-open .sqa-tabs{transition:transform .3s}

/* ---------- Einstellungen (Dialog) ---------- */
.sqc-dlg{position:fixed;inset:0;z-index:8100;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .25s}
.sqc-dlg.on{opacity:1}
.sqc-scrim{position:absolute;inset:0;background:rgba(0,26,41,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sqc-box:focus,.sqc-box:focus-visible{outline:none}
.sqc-box{position:relative;width:min(920px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;background:var(--paper);color:#00263A;border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,26,41,.6);transform:translateY(16px) scale(.985);transition:transform .35s var(--ease);outline:none}
.sqc-dlg.on .sqc-box{transform:none}
.sqc-hd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:22px 24px 12px;border-bottom:1px solid var(--line)}
.sqc-kick{display:block;font:600 12px/1 var(--sans);color:#C2410C;margin-bottom:8px}
.sqc-hd h2{font:500 clamp(22px,3vw,30px)/1.1 var(--serif);margin:0;letter-spacing:-.015em}
.sqc-bd{padding:16px 24px;overflow:auto;overscroll-behavior:contain}
.sqc-lead{margin:0 0 14px;max-width:70ch;line-height:1.55}
.sqc-ft{display:flex;flex-wrap:wrap;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--line)}
.sqc-ft .btn{flex:1 1 180px}
.sqc-cats{display:grid;gap:10px}
.sqc-cat{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sqc-cat>summary{list-style:none;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer}
.sqc-cat>summary::-webkit-details-marker{display:none}
.sqc-cat>summary:focus-visible{outline:2px solid #ff5200;outline-offset:-2px;border-radius:12px}
.sqc-ct{display:grid;gap:3px}
.sqc-ct b{font-size:16px}
.sqc-ct span{font-size:13.5px;color:#5B6B75;line-height:1.45}
.sqc-ct b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.45;transition:transform .2s}
.sqc-cat[open] .sqc-ct b::after{transform:translateY(0) rotate(225deg)}
.sqc-lock{flex:none;font:600 12px/1 var(--sans);padding:7px 10px;border-radius:999px;background:#E7F0EB;color:#2E6B4F}
.sqc-lock.off{background:#EFEBE4;color:#6B6257}
.sqc-p{margin:0;padding:0 16px 14px;font-size:14px;color:#5B6B75}
.sqc-tw{overflow-x:auto;padding:0 16px 14px}
.sqc-t{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.sqc-t th{text-align:left;font-weight:600;color:#5B6B75;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.sqc-t td{padding:8px 10px;border-bottom:1px solid #EEE8DF;vertical-align:top;line-height:1.45}
.sqc-t td.k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#00263A;white-space:normal;word-break:break-word;min-width:130px}
.sqc-t tr:last-child td{border-bottom:0}
.sqc-sw{position:relative;flex:none;width:48px;height:28px;cursor:pointer}
.sqc-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sqc-sw i{position:absolute;inset:0;border-radius:999px;background:#CFC7BB;transition:background .2s}
.sqc-sw i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.sqc-sw input:checked+i{background:#ff5200}
.sqc-sw input:checked+i::after{transform:translateX(20px)}
.sqc-sw input:focus-visible+i{outline:2px solid #00263A;outline-offset:2px}
.sqc-meta{margin:14px 0 0;font-size:12.5px;color:#5B6B75;line-height:1.5}
.sqc-meta code{font-size:12px;background:#EFEBE4;padding:1px 5px;border-radius:4px}
@media (max-width:640px){.sqc-dlg{padding:0;place-items:end stretch}.sqc-box{max-height:92vh;border-radius:18px 18px 0 0}.sqc-hd,.sqc-bd{padding-left:16px;padding-right:16px}.sqc-ft{padding:12px 16px max(16px,env(safe-area-inset-bottom));gap:8px}.sqc-ft .btn{flex:1 1 40%;min-height:44px;padding:0 12px}.sqc-ft .btn:first-child{flex-basis:100%}
  .sqc-tw{padding:0 14px 10px}.sqc-t{min-width:0;font-size:13px}.sqc-t thead{display:none}.sqc-t,.sqc-t tbody,.sqc-t tr,.sqc-t td{display:block}.sqc-t tr{padding:10px 0;border-bottom:1px solid #EEE8DF}.sqc-t td{border:0;padding:2px 0}.sqc-t td::before{content:attr(data-l) ' · ';font:600 11.5px/1.4 var(--sans);color:#8A949A}.sqc-t td.k{font-size:12.5px;margin-bottom:2px}.sqc-t td.k::before{content:''}}

/* ---------- Cookie-Seite ---------- */
.sqc-pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:28px}
.sqc-side{position:sticky;top:96px}
@media (max-width:980px){.sqc-pagegrid{grid-template-columns:1fr}.sqc-side{position:static}}

/* ---------- Externe Medien: YouTube erst nach Zustimmung ---------- */
.sqc-yt{position:absolute;inset:auto 12px 12px 12px;z-index:3;background:rgba(0,26,41,.86);color:#F4EFE8;border-radius:12px;padding:14px 16px;display:grid;gap:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sqc-yt p{margin:0;font-size:13.5px;line-height:1.45}
.sqc-yt b{display:block;font-size:15px;margin-bottom:2px}
.sqc-yt a{color:#ffb38a}
.sqc-yt .btn.ghost{--fg:#F4EFE8;border-color:rgba(244,239,232,.35)}
.yt-poster{position:relative}

/* ---------- KI-Hinweise (Ori) ---------- */
.ori-ai{margin:0;padding:8px 14px 10px;font-size:11.5px;line-height:1.4;color:#5B6B75;border-top:1px solid var(--line)}
.ori-ai a{color:inherit;text-decoration:underline}
.sqa-ai{margin:10px 2px 0;font-size:11.5px;line-height:1.4;color:#6B7A84}
.sqa-legal{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 2px 6px;font-size:13px}
.sqa-legal a,.sqa-legal button{color:#00263A;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* ---------- Dunkelmodus ---------- */
[data-theme=dark] .sqc{--sqc-bg:#16283A;--sqc-fg:#F2EEE8}
[data-theme=dark] .sqc-links a{text-decoration-color:rgba(242,238,232,.4)}
[data-theme=dark] .sqc-b{--bg:#F2EEE8;--fg:#0E1B24}
[data-theme=dark] .sqc-b:hover{--bg:#fff}
[data-theme=dark] .sqc-gpc{background:#1B3144;color:#C9D3DA}
[data-theme=dark] .sqc-box{background:#0E1B24;color:#F2EEE8}
[data-theme=dark] .sqc-cat{background:#16283A;border-color:#2A4256}
[data-theme=dark] .sqc-ct span,[data-theme=dark] .sqc-t th,[data-theme=dark] .sqc-meta,[data-theme=dark] .sqc-p{color:#8FA3AE}
[data-theme=dark] .sqc-t td{border-color:#22384B}
[data-theme=dark] .sqc-t td.k{color:#F2EEE8}
[data-theme=dark] .sqc-meta code{background:#1B3144}
[data-theme=dark] .sqc-lock{background:#1E3A2E;color:#9FD3B5}
[data-theme=dark] .sqc-lock.off{background:#22384B;color:#8FA3AE}
[data-theme=dark] .sqc-kick{color:#FF8A4C}
[data-theme=dark] .ori-ai{color:#8FA3AE}
[data-theme=dark] .sqa-legal a,[data-theme=dark] .sqa-legal button{color:#F2EEE8}

/* Paket 76: derselbe Einstieg als Lade-Animation der Website – danach gleitet die Überschrift herein, das Titelbild setzt sich */
.sqw-enter #root h1{animation:sqwUp .95s .05s cubic-bezier(.16,1,.3,1) both}
.sqw-enter .hero-media img.on{animation:sqwZoom 1.7s cubic-bezier(.16,1,.3,1) both}
@keyframes sqwUp{from{opacity:0;transform:translateY(24px)}}
@keyframes sqwZoom{from{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.sqw-enter #root h1,.sqw-enter .hero-media img.on{animation:none}}