/* Sagittarius Akademie: Designsystem
   Leitidee: Orientierung finden und den nächsten Schritt gehen.
   Ruhiger heller Grundton, ein dunkles Band pro Seite für den nächsten Schritt, leuchtende Akzente nur dort, wo sie führen. */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-var-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
/* Kyrillisch (Seite /uk/, Namen in den Bewertungen): gleiche Open Sans 3.003, lädt nur, wenn kyrillische Zeichen vorkommen */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-var-cyrillic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Arabisch: Noto Sans Arabic (SIL Open Font License), Stärken 400 bis 700, nur auf der Seite /ar/ verwendet */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-var-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Farben */
  --ink: #13253D;          /* Text, 15,4 : 1 auf Weiß */
  --ink-2: #45566B;        /* Fließtext zweitrangig, 7,5 : 1 */
  --muted: #5F6E82;        /* Hinweise, 5,2 : 1 (4,8 : 1 auf --mist) */
  --line: #D6E1EE;
  --line-strong: #B8CBE2;
  --field: #74879F;        /* Rahmen von Formularfeldern, 3,7 : 1 */
  --paper: #FFFFFF;
  --mist: #F3F7FB;
  --mist-2: #E8F0F9;
  --blue: #2A6CB4;         /* Markenblau, 5,4 : 1 zu Weiß */
  --blue-deep: #1E5594;
  --sky: #A9C6E6;
  --night: #0E1D33;        /* dunkles Band */
  --night-2: #172B4A;
  --glow: #8BBEF2;         /* Akzent auf Dunkel, 8,7 : 1 */
  --on-night: #E6EEF8;
  --on-night-2: #B7C6DA;
  --note-bg: #FFF7E0;
  --note-line: #E8B93C;
  --note-ink: #5A4300;
  --error: #B42318;
  --ok: #1E7A46;

  /* Schrift */
  --font: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.35rem, 1.2rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.1rem, 1.2rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.15rem + 1.5vw, 2.45rem);
  --fs-h3: 1.2rem;
  --fs-lead: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --lh-body: 1.65;

  /* Abstände und Formen */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section: clamp(64px, 7vw, 112px);
  --gutter: clamp(20px, 4.5vw, 64px);
  --maxw: 1240px;
  --r-card: 18px;
  --r-band: 26px;
  --shadow-card: 0 1px 2px rgba(19, 37, 61, .05), 0 12px 32px -18px rgba(19, 37, 61, .18);
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--blue);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 76px;
  --lang-h: 44px;          /* Sprachleiste über der Kopfzeile */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.08; }
h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.15; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section-mist { background: var(--mist); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a[href^="tel:"] { white-space: nowrap; }   /* Telefonnummern nicht umbrechen */
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--s4); }
.section-head { display: grid; gap: var(--s4); max-width: 760px; margin-bottom: var(--s7); }
.section-head .lead { margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px; font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue-deep); }
.btn-on-night { background: #fff; color: var(--night); }
.btn-on-night:hover { background: var(--glow); color: var(--night); }
.btn-ghost-night { background: transparent; color: var(--on-night); border-color: rgba(230, 238, 248, .35); }
.btn-ghost-night:hover { border-color: var(--glow); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--sky); padding-bottom: 2px; }
.text-link:hover { border-bottom-color: var(--blue); }
.text-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* Kopf */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
@supports (backdrop-filter: blur(10px)) { .site-header { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(19, 37, 61, .4); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); height: var(--header-h); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { display: block; width: auto; height: 58px; }
.main-nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .97rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after, .main-nav a.is-parent::after { transform: scaleX(1); }
.main-nav a[aria-current="page"], .main-nav a.is-parent { color: var(--blue-deep); }
.header-actions { display: flex; align-items: center; gap: var(--s3); }
.header-actions .btn { min-height: 44px; padding: 0 20px; }
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; font: 600 .95rem var(--font); color: var(--ink); cursor: pointer; }
.nav-toggle-icon { position: relative; width: 18px; height: 12px; }
.nav-toggle-icon i { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle-icon i:nth-child(1) { top: 0; } .nav-toggle-icon i:nth-child(2) { top: 5px; } .nav-toggle-icon i:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Brotkrumen */
.breadcrumb { padding-top: var(--s5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Seitenkopf der Unterseiten */
/* Seitenkopf der Unterseiten: Nachtblau wie die Bühne, rechts ein Bild aus den eigenen Räumen, die Kopfzeile liegt darüber.
   Ohne Bild (Impressum, Datenschutz, Hinweisseiten) nur Nachtblau. */
.page-head { position: relative; margin-top: calc(-1 * var(--header-h) - 1px); padding: calc(var(--header-h) + var(--s7)) 0 var(--s8); overflow: hidden; background: radial-gradient(90% 120% at 90% 10%, var(--night-2) 0%, var(--night) 60%); color: var(--on-night); }
.page-head .breadcrumb { padding-top: 0; margin-bottom: var(--s5); }
.page-head .breadcrumb ol { color: var(--on-night-2); }
.page-head .breadcrumb a { color: var(--glow); }
.page-head .breadcrumb li + li::before { color: rgba(183, 198, 218, .55); }
.page-head .kicker { color: var(--glow); }
.page-head h1 { max-width: 20ch; margin-top: var(--s4); color: #fff; text-wrap: balance; }
.page-head .lead { margin-top: var(--s5); color: var(--on-night); }
.page-head .btn-row { margin-top: var(--s6); }
.page-head .tag { background: rgba(139, 190, 242, .16); color: #fff; }
.page-head .tag:hover { background: rgba(139, 190, 242, .28); color: #fff; }
.page-head .btn-primary { background: #fff; color: var(--ink); }
.page-head .btn-primary:hover { background: var(--mist-2); color: var(--ink); }
.page-head .btn-secondary { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.page-head .btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.page-head a:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }
.ph-text { position: relative; z-index: 1; }
.ph-media { display: none; }
.page-head.has-media { display: flex; align-items: center; min-height: clamp(460px, 56vh, 580px); background: var(--night); }
.page-head.has-media .ph-text { max-width: min(620px, 50%); }
.page-head.has-media .ph-media { display: block; position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: 49%; }
.ph-media picture { display: block; height: 100%; }
.ph-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:   /* weicher Übergang ins Nachtblau, oben dunkler für die Kopfzeile: Weiß dort mindestens 10 : 1 */
    linear-gradient(90deg, var(--night) 0%, rgba(14, 29, 51, .62) 20%, rgba(14, 29, 51, .14) 52%, rgba(14, 29, 51, 0) 100%),
    linear-gradient(180deg, rgba(14, 29, 51, .82) 0%, rgba(14, 29, 51, .5) var(--header-h), rgba(14, 29, 51, 0) calc(var(--header-h) + 90px)); }
.kicker { display: inline-block; font-size: var(--fs-small); font-weight: 600; color: var(--blue-deep); }


/* Angebote als Liste in zwei Gruppen nach Gutschein (K, 05.10.2026: übersichtlicher als Karten) */
.og { display: grid; gap: clamp(40px, 5vw, 64px); }
.og-group.is-hidden, .offer-row.is-hidden { display: none; }
.og-head { display: grid; gap: 6px; max-width: 780px; margin-bottom: var(--s4); }
.og-head h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 600; letter-spacing: -.01em; }
.og-head p { margin: 0; color: var(--ink-2); }
.offer-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--line); list-style: none; }   /* Trennlinien über die Lücke: stimmen auch, wenn Zeilen ausgeblendet sind */
.offer-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 290px) 24px; gap: var(--s5) var(--s6); align-items: center; padding: var(--s5) var(--s6); background: #fff; transition: background-color .2s; }
.offer-row:hover { background: var(--mist); }
.offer-row:focus-within { box-shadow: inset 0 0 0 3px var(--blue); }
.or-main h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; }
.or-main h3 a { color: var(--ink); text-decoration: none; }
.or-main h3 a::after { content: ""; position: absolute; inset: 0; }
.or-main h3 a:focus-visible { outline: none; box-shadow: none; }
.or-main p { margin: 0; max-width: 64ch; font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
.or-facts { display: grid; gap: 4px; margin: 0; font-size: .9rem; }
.or-facts div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.or-facts dt { color: var(--muted); }
.or-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.or-go { display: grid; place-items: center; color: var(--blue); }
.or-go svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.offer-row:hover .or-go svg, .offer-row:focus-within .or-go svg { transform: translateX(4px); }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--mist-2); font-size: .78rem; font-weight: 600; color: var(--blue-deep); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; font: 600 .95rem var(--font); color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.chip[aria-current="page"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .count { font-weight: 500; opacity: .75; }
.filter-status { margin: 0 0 var(--s5); font-size: .97rem; color: var(--ink-2); }

/* Fakten, Inhalte, Schritte */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.facts { position: sticky; top: calc(var(--header-h) + 20px); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.facts h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; margin-bottom: var(--s4); }
.facts dl { display: grid; gap: var(--s4); margin: 0 0 var(--s5); }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; line-height: 1.45; }
.facts .btn { width: 100%; }
.facts .btn + .btn { margin-top: var(--s3); }
.prose { max-width: 68ch; }
.prose h2 { margin: var(--s8) 0 var(--s4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose p, .prose li { color: var(--ink-2); }
/* Impressum und Datenschutz: lange Wörter (z. B. „Wirtschaftsidentifikationsnummer“) auf dem Smartphone trennen */
.legal :is(h2, h3, p) { hyphens: auto; overflow-wrap: break-word; }
.checklist { display: grid; gap: 10px; list-style: none; }
.checklist li { position: relative; padding-inline-start: 30px; }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); }
.content-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.content-group { padding: var(--s5); border-radius: var(--r-card); background: var(--mist); }
.content-group h3 { margin: 0 0 var(--s3); font-size: 1.05rem; }
.content-group .checklist li { font-size: .97rem; }
.steps { position: relative; display: grid; gap: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 var(--s6) 56px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); font-weight: 700; font-size: .95rem; color: var(--blue-deep); z-index: 1; }
.steps li::after { content: ""; position: absolute; left: 17px; top: 34px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--sky) 0 4px, transparent 4px 9px); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3, .steps h4 { font-size: 1.1rem; margin-bottom: 4px; }
.steps h4 { font-weight: 600; }   /* wie die h3 der Angebotsseiten */
.tn-weg { margin-top: var(--s7); max-width: 46rem; }   /* Weg zum Gutschein auf „Für Teilnehmende“ */
.tn-weg > h3 { margin-bottom: var(--s5); }
.steps p { margin: 0; color: var(--ink-2); }
.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); list-style: none; counter-reset: step; }
.steps-row li { position: relative; padding-top: 56px; counter-increment: step; }
.steps-row li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); font-weight: 700; color: var(--blue-deep); z-index: 1; }
.steps-row li::after { content: ""; position: absolute; left: 44px; right: calc(-1 * var(--s5) + 4px); top: 19px; height: 2px; background: repeating-linear-gradient(90deg, var(--sky) 0 4px, transparent 4px 9px); }
.steps-row li:last-child::after { display: none; }
.steps-row h3 { margin-bottom: 6px; }
.steps-row p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* Gutscheine */
.vouchers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.voucher { position: relative; padding: var(--s6) calc(var(--s6) + 70px) var(--s6) var(--s6); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  -webkit-mask: radial-gradient(circle at calc(100% - 70px) 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 70px) 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at calc(100% - 70px) 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 70px) 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat; }
.voucher::before { content: ""; position: absolute; top: 20px; bottom: 20px; right: 70px; border-left: 2px dashed var(--line-strong); }
.voucher-stub { position: absolute; top: 0; right: 0; bottom: 0; width: 70px; display: grid; place-items: center; }
.voucher-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; letter-spacing: .12em; color: var(--blue); }
.voucher h3 { font-size: 1.15rem; margin-bottom: var(--s3); }
.voucher p { color: var(--ink-2); margin-bottom: var(--s3); }
.voucher .checklist li { font-size: .95rem; }

/* Hinweise */
.callout { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); border-radius: var(--r-card); background: var(--mist-2); }
.callout svg { flex: none; width: 24px; height: 24px; color: var(--blue); margin-top: 2px; }
.callout p { margin: 0; color: var(--ink); }
.todo { display: inline; padding: 1px 6px; border-radius: 6px; background: var(--note-bg); border: 1px dashed var(--note-line); color: var(--note-ink); font-size: .92em; font-weight: 600; }
.todo-box { padding: var(--s4) var(--s5); border-radius: 14px; background: var(--note-bg); border: 1.5px dashed var(--note-line); color: var(--note-ink); }
.todo-box p { margin: 0; color: var(--note-ink); }
.todo-box strong { font-weight: 700; }
.draft-banner { padding: 10px 0; background: var(--note-bg); border-bottom: 1px solid var(--note-line); color: var(--note-ink); font-size: .9rem; }

/* Vertrauen */

/* Dunkles Band: Ansatz und nächster Schritt */
.night { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 90% 10%, var(--night-2) 0%, var(--night) 60%); color: var(--on-night); }
.night h2, .night h3 { color: #fff; }
.night p { color: var(--on-night-2); }
.night a:not(.btn) { color: var(--glow); }
.next-step { padding: var(--s8) 0; }
.next-step-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s6); align-items: center; }
.next-step h2 { max-width: 20ch; }
.next-step p { margin: var(--s4) 0 0; max-width: 52ch; }
.next-step .btn-row { justify-content: flex-end; }
.flight-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Standorte */
.locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.location { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.location h3 { font-size: 1.5rem; font-weight: 300; letter-spacing: -.015em; }
.location address { font-style: normal; color: var(--ink-2); line-height: 1.6; }
.location .row { display: flex; gap: 12px; align-items: flex-start; }
.location .row svg { flex: none; width: 20px; height: 20px; color: var(--blue); margin-top: 3px; }
.location .tel { font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.location .tel:hover { color: var(--blue); }
.location ul { list-style: none; display: grid; gap: 4px; color: var(--ink-2); }
.location .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s3); }
.contact-strip { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); align-items: center; margin-top: var(--s5); padding: var(--s5) var(--s6); border-radius: var(--r-card); background: var(--mist); }
.contact-strip a { font-weight: 600; }
.contact-strip > span { display: inline-flex; align-items: center; gap: 10px; }
.contact-strip svg { width: 20px; height: 20px; flex: none; color: var(--blue); }

/* Formular */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.field { display: grid; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; font-size: .97rem; }
.field .hint { font-size: .87rem; color: var(--muted); margin: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: 12px; background: #fff; font: 400 1rem/1.4 var(--font); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42, 108, 180, .2); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .error { display: none; margin: 0; font-size: .88rem; font-weight: 600; color: var(--error); }
.field.has-error .error { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { flex: none; width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--blue); }
.check label { font-weight: 400; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-summary { display: none; padding: var(--s4) var(--s5); border-radius: 12px; border: 1.5px solid var(--error); background: #FEF3F2; color: var(--error); }
.form-summary.show { display: block; }
.form-summary p { margin: 0; color: var(--error); font-weight: 600; }
.form-summary span { display: block; margin-top: var(--s2); color: var(--ink); }   /* Hinweis bei Sendefehler: Telefonnummern als Ausweg */
.form-summary a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.form-note { padding: var(--s4) var(--s5); border-radius: 12px; background: var(--mist); font-size: .92rem; color: var(--ink-2); }
.form-note.is-ok { background: #ECFDF3; color: var(--ok); }


/* Video-Bühne: Grundgerüst und Pausenknopf (Gestaltung unter „Startseite“) */
.room-video { position: relative; overflow: hidden; isolation: isolate; background: var(--night); }
.rv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-toggle { position: absolute; z-index: 2; right: var(--gutter); bottom: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(14, 29, 51, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 .88rem var(--font); color: #FFFFFF; cursor: pointer; transition: background-color .2s, border-color .2s; }
.rv-toggle:hover { background: rgba(14, 29, 51, .8); border-color: rgba(255, 255, 255, .6); }
.rv-toggle:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #FFFFFF; }
.rv-toggle svg { width: 16px; height: 16px; }
.rv-toggle .i-play, .rv-toggle.is-paused .i-pause { display: none; }
.rv-toggle.is-paused .i-play { display: block; }
.rv-toggle[hidden] { display: none; }   /* ohne JavaScript kein Knopf ohne Funktion */

/* Team: ein Foto pro Person (Comic-Fassung entfernt, K 25.10.2026) */
.team-section > .wrap { display: flex; flex-direction: column; }
.team-head { order: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s5); }
.team-head h1 { margin-top: var(--s2); }
.team-head { margin-bottom: var(--s6); }
.swipe-hint { order: 3; }
.team-grid { order: 4; }
.team-todo { order: 5; margin-top: var(--s6); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s5); list-style: none; }
.team-section { padding-top: var(--s8); }
.swipe-hint { display: none; margin: 0 0 var(--s3); font-size: .9rem; color: var(--muted); }
.member-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: var(--mist); box-shadow: 0 1px 2px rgba(19, 37, 61, .05), 0 16px 32px -24px rgba(19, 37, 61, .35); }
.member-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-name { margin: var(--s4) 0 0; font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.member-role { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; color: var(--blue-deep); font-weight: 500; }
.member-quote { margin: var(--s2) 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.member-initials { display: grid; place-items: center; background: radial-gradient(80% 80% at 70% 25%, #FFFFFF 0%, var(--mist-2) 70%); border: 1px solid var(--line); }
.member-initials span { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); font-weight: 300; letter-spacing: .04em; color: var(--blue); }

/* Tabelle für Partner */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; padding: var(--s4) var(--s5); font-weight: 600; }
th, td { padding: 14px var(--s5); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
thead th { font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--mist); border-top: 0; white-space: nowrap; }
tbody th { font-weight: 600; }
tbody th a { color: var(--ink); }

/* Fragen */
.faq { display: grid; gap: 0; max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s5); align-items: center; min-height: 64px; padding: var(--s4) 0; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-deep); }
.faq summary i { position: relative; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--blue); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq .answer { padding: 0 48px var(--s5) 0; color: var(--ink-2); }
.faq .answer p { margin: 0; }

/* Fuß */
.site-footer { padding: var(--s7) 0 var(--s5); background: var(--mist); border-top: 1px solid var(--line); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.footer-grid h2 { font-size: .95rem; font-weight: 600; letter-spacing: 0; margin-bottom: var(--s3); }
.footer-grid ul { list-style: none; display: grid; gap: 6px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--blue); text-decoration: underline; }
.footer-contact a span { font-weight: 600; color: var(--ink); }
.footer-brand img { width: 120px; height: auto; }
.footer-brand p { margin-top: var(--s4); color: var(--ink-2); max-width: 30ch; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer-meta ul { display: flex; flex-wrap: wrap; gap: var(--s5); list-style: none; }
.footer-meta a { color: var(--muted); }

/* Schnellkontakt am Smartphone: feste Leiste am unteren Rand mit beiden Telefonnummern und der Anfrage. Nur bis 760 px,
   nicht auf Kontakt-, Fehler-, Sprach- und Spielseiten. Seitenende und Sprungziele halten Abstand, damit die Leiste nichts verdeckt (WCAG 2.4.11). */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: var(--s2); padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(19, 37, 61, .35); }
  html:has(.callbar) { scroll-padding-bottom: 96px; }
  body:has(.callbar) .site-footer { padding-bottom: calc(var(--s5) + 72px); }
  .callbar > a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
  .callbar svg { width: 18px; height: 18px; flex: none; color: var(--blue); }
  .callbar .cb-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
}
@media (max-width: 360px) {   /* drei Knöpfe passen auch bei 320 px */
  .callbar { gap: 6px; padding-inline: var(--s2); }
  .callbar > a { gap: 6px; padding: 0 6px; font-size: .9rem; }
  .callbar svg { width: 16px; height: 16px; }
}
@media print { .callbar { display: none; } }

/* Responsive */
@media (max-width: 1100px) {
  .js .main-nav, .header-actions .btn { display: none; }
  .js .nav-toggle { display: inline-flex; }
  /* Ohne JavaScript: Navigation als Liste unter dem Logo */
  html:not(.js) .header-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 12px; gap: 8px 24px; }
  html:not(.js) .main-nav { display: block; width: 100%; }
  html:not(.js) .main-nav ul { flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .main-nav .nav-extra { display: none; }
  .site-header.nav-open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sonst wird das feste Menü-Panel an der Kopfzeile abgeschnitten */
  .main-nav.is-open { display: block; position: fixed; top: var(--nav-top, var(--header-h)); left: 0; right: 0; bottom: 0; overflow-y: auto; padding: var(--s5) var(--gutter) var(--s7); background: #fff; border-top: 1px solid var(--line); }
  .main-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav.is-open a { width: 100%; min-height: 56px; font-size: 1.2rem; border-bottom: 1px solid var(--line); }
  .main-nav.is-open a::after { display: none; }
  .main-nav .nav-extra { display: grid; gap: var(--s3); margin-top: var(--s6); }
  .main-nav .nav-extra .btn-primary { color: #fff; }   /* sonst gilt die Linkfarbe von .main-nav a: dunkle Schrift auf Blau, nur 2,9 : 1 */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1101px) { .main-nav .nav-extra { display: none; } }
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .brand img { height: 48px; }
  .detail > .facts { order: -1; }
  .detail, .next-step-in, .vouchers, .locations, .content-groups { grid-template-columns: minmax(0, 1fr); }
  .facts { position: static; }
  .next-step .btn-row { justify-content: flex-start; }
  .steps-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps-row li { padding: 0 0 var(--s6) 60px; min-height: 40px; }
  .steps-row li::after { left: 19px; right: auto; top: 40px; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--sky) 0 4px, transparent 4px 9px); }
  .steps-row li:last-child { padding-bottom: 0; }
}
@media (max-width: 1099px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }
@media (max-width: 560px) {
  /* Smartphone: große Karten zum Durchwischen, die nächste schaut am Rand hervor */
  .swipe-hint { display: block; margin-top: var(--s5); }
  .team-section { padding-top: var(--s6); }
  .team-todo { order: 6; }
  .team-grid { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s4); scroll-padding: 0 var(--gutter); scrollbar-width: thin; }
  .member { flex: 0 0 82%; scroll-snap-align: start; }
  .team-grid:focus-visible { box-shadow: var(--focus); border-radius: 12px; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .footer-brand img { width: 96px; }
  .footer-grid .footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer-meta { margin-top: var(--s5); }
  .btn-row .btn { flex: 1 1 100%; }
  .voucher { padding-right: calc(var(--s5) + 56px); }
  .voucher::before { right: 56px; }
  .voucher-stub { width: 56px; }
  .facts { padding: var(--s5); }
  .faq .answer { padding-right: 0; }
  th, td { padding: 12px var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .lang-bar, .site-header, .next-step, .nav-toggle, .rv-toggle, .ph-media, .fm-play { display: none; }
  .page-head { margin-top: 0; padding: 0 0 var(--s5); min-height: 0; background: none; color: var(--ink); }
  .page-head h1, .page-head .lead, .page-head .kicker, .page-head .breadcrumb ol, .page-head .breadcrumb a { color: var(--ink); }
}

/* ---------------------------------------------------------------- Startseite
   Bühne: Video der eigenen Räume
   Das Video der eigenen Räume füllt die Bühne, die Kopfzeile liegt durchsichtig darüber und wird beim Scrollen weiß.
   Die Botschaft steht links, senkrecht mittig zwischen Kopfzeile und Wegweiser (K, 07.10.2026), auf einem Verlauf, der Weiß
   auf jedem Videobild mit mindestens 5 : 1 und die Einleitung mit mindestens 4,9 : 1 trägt (gemessen an 31 Einzelbildern).
   Das Video ist dafür etwas aufgehellt (brightness 1.15), der Verlauf rechts und unten leichter als vorher.
   Darunter ragt ein Wegweiser mit den vier Einstiegen in die Bühne. Ohne JavaScript: Standbild, normale Kopfzeile. */
:root { --hc-overlap: 92px; }
.hero-c { display: flex; flex-direction: column; height: auto; min-height: clamp(640px, calc(100svh - var(--lang-h)), 1040px); margin-top: calc(-1 * var(--header-h) - 1px); }   /* 1 px für die Linie unter der Kopfzeile. Bühne füllt den ersten Bildschirm, der Wegweiser schaut unten heraus */
.hc-still, .hc-still img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc-still img { object-fit: cover; }
.hero-c .rv-media { opacity: 0; transition: opacity 1.2s var(--ease); }
.hc-still img, .hero-c .rv-media { filter: brightness(1.15); }   /* etwas heller (K, 07.10.2026); auf dem Smartphone ohne */
.hero-c.is-playing .rv-media { opacity: 1; }
.hc-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;   /* Weiß auf jedem Videobild mindestens 8 : 1 (Desktop), Einleitung mindestens 4,9 : 1, Navigation mindestens 5,1 : 1 */
  background:
    linear-gradient(180deg, rgba(14, 29, 51, .62) 0%, rgba(14, 29, 51, 0) 24%),
    linear-gradient(0deg, rgba(14, 29, 51, .25) 0%, rgba(14, 29, 51, 0) 35%),
    linear-gradient(90deg, rgba(14, 29, 51, .86) 0%, rgba(14, 29, 51, .74) 46%, rgba(14, 29, 51, .16) 72%, rgba(14, 29, 51, 0) 100%); }
@media (min-width: 761px) and (max-width: 1100px) {   /* Tablets: der Text reicht weiter nach rechts, deshalb dort dunkler (Einleitung mindestens 6 : 1) */
  .hc-shade { background:
    linear-gradient(180deg, rgba(14, 29, 51, .62) 0%, rgba(14, 29, 51, 0) 24%),
    linear-gradient(0deg, rgba(14, 29, 51, .25) 0%, rgba(14, 29, 51, 0) 35%),
    linear-gradient(90deg, rgba(14, 29, 51, .88) 0%, rgba(14, 29, 51, .80) 60%, rgba(14, 29, 51, .58) 85%, rgba(14, 29, 51, .36) 100%); }
}
.hc-content { position: relative; z-index: 1; display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; width: 100%; padding-top: calc(var(--header-h) + var(--s6)); padding-bottom: calc(var(--hc-overlap) + var(--s6)); color: #fff; }   /* senkrecht mittig zwischen Kopfzeile und Wegweiser */
.hc-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--s4); font-size: .98rem; font-weight: 600; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.hc-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 4px rgba(139, 190, 242, .18), 0 0 18px rgba(139, 190, 242, .7); }
.hero-c h1 { max-width: 17ch; color: #fff; font-size: clamp(2.6rem, 1.2rem + 3.1vw, 4.4rem); font-weight: 300; line-height: 1.03; letter-spacing: -.032em; text-wrap: balance; }
.hc-lead { max-width: 54ch; margin-top: var(--s4); font-size: clamp(1.06rem, .98rem + .3vw, 1.22rem); line-height: 1.6; color: var(--on-night); }
.hc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }
.hc-btn-light { background: #fff; color: var(--ink); }
.hc-btn-light:hover { background: var(--mist-2); color: var(--ink); }
.hc-btn-ghost { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.hc-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.hero-c .btn:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }
.hero-c .rv-toggle { bottom: calc(var(--hc-overlap) + 24px); }

/* Kopfzeile über der Bühne und dem Seitenkopf der Unterseiten (nur mit JavaScript, sonst bleibt sie weiß) */
.brand { position: relative; }
.brand .brand-white { position: absolute; left: 0; top: 50%; width: auto; max-width: none; height: 58px; transform: translateY(-50%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.brand img:first-child { transition: opacity .3s var(--ease); }
@media (max-width: 900px) { .brand .brand-white { height: 48px; } }   /* gleich hoch wie das blaue Logo, sonst wird das weiße gestaucht */
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .brand img:first-child { opacity: 0; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .brand-white { opacity: 1; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .main-nav > ul a { color: #fff; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .main-nav > ul a::after { background: #fff; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .header-actions .btn-primary { background: #fff; color: var(--ink); }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) a:focus-visible, .js body:has(.hero-c, .page-head:not(.is-light)) .site-header:not(.is-scrolled):not(.nav-open) button:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }

/* Wegweiser */
.hc-panel-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--hc-overlap)); }
.hc-panel { overflow: hidden; border-radius: var(--r-band); background: #fff; box-shadow: 0 2px 6px rgba(14, 29, 51, .06), 0 36px 70px -36px rgba(14, 29, 51, .45); }
.hc-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); padding: var(--s6) var(--s6) var(--s4); }
.hc-panel-head h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 600; letter-spacing: -.01em; }
.hc-panel-head p { margin: 0; font-size: .98rem; color: var(--ink-2); }
/* Wegweiser „Wo stehen Sie gerade?“: Karten mit Symbol, Titel, Kurztext und Zahl der Angebote (K, 05.10.2026) */
.wgA-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: 0 var(--s6) var(--s6); list-style: none; }
.wgA-tiles > li { display: flex; }
.wg-tile { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; width: 100%; padding: var(--s5); border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.wg-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-card); transform: translateY(-2px); color: var(--ink); }
.wg-tile:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.wg-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2); border-radius: 14px; background: rgba(42, 108, 180, .1); color: var(--blue); transition: background-color .2s, color .2s; }
.wg-ico svg { width: 26px; height: 26px; }
.wg-tile:hover .wg-ico, .wg-tile:focus-visible .wg-ico { background: var(--blue); color: #fff; }
.wg-t { font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem); font-weight: 600; line-height: 1.3; }
.wg-d { font-size: .93rem; line-height: 1.5; color: var(--ink-2); }
.wg-n { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: .92rem; font-weight: 600; color: var(--blue); }
.wg-n svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.wg-tile:hover .wg-n svg, .wg-tile:focus-visible .wg-n svg { transform: translateX(4px); }
.wg-partner { margin-left: auto; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .wg-tile:hover { transform: none; } }
.hc-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); padding: var(--s4) var(--s6); border-top: 1px solid var(--line); background: var(--mist); font-size: .92rem; }
.hc-call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); color: var(--ink-2); }
.hc-call-l { font-weight: 600; color: var(--ink); }
.hc-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hc-tel:hover { color: var(--blue); }
.hc-tel svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.hc-tel-l { font-weight: 500; color: var(--ink-2); }
.hc-hours { color: var(--muted); }
.hc-panel-wrap + .section, .hc-panel-wrap + section { margin-top: 0; }

@media (max-width: 1099px) {
  .wgA-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --hc-overlap: 36px; }
  .hero-c { min-height: 0; }   /* Höhe ergibt sich aus dem Inhalt: kein leerer Streifen über der Botschaft */
  .hc-still img, .hero-c .rv-media { filter: none; }   /* der Text liegt hier fast auf dem ganzen Bild */
  .hc-shade { background:
    linear-gradient(180deg, rgba(14, 29, 51, .56) 0%, rgba(14, 29, 51, 0) 24%),
    linear-gradient(0deg, rgba(14, 29, 51, .84) 0%, rgba(14, 29, 51, .80) 55%, rgba(14, 29, 51, .66) 75%, rgba(14, 29, 51, .40) 90%, rgba(14, 29, 51, .20) 100%); }   /* Weiß mindestens 5 : 1, Einleitung mindestens 7,8 : 1 */
  .hc-content { padding-top: calc(var(--header-h) + var(--s7)); padding-bottom: calc(var(--hc-overlap) + var(--s7)); }   /* oben und unten gleicher Abstand */
  .hero-c h1 { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 2.9rem); }
  .hc-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-c .rv-toggle { top: calc(var(--header-h) + 8px); bottom: auto; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .hero-c .rv-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hc-kicker { align-items: flex-start; font-size: .9rem; }
  .hc-kicker::before { flex: none; margin-top: .45em; }
  .hc-panel { border-radius: 20px; }
  .hc-panel-head { padding: var(--s5) var(--s5) var(--s3); }
  .wg-partner { margin-left: 0; }
  .wgA-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: 0 var(--s4) var(--s4); }
  .wg-tile { grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-rows: auto auto; grid-template-areas: "ico t go" "ico d go"; align-items: center; gap: 2px var(--s3); padding: var(--s4); }
  .wg-ico { grid-area: ico; width: 44px; height: 44px; margin: 0; }
  .wg-ico svg { width: 24px; height: 24px; }
  .wg-t { grid-area: t; font-size: 1.02rem; }
  .wg-d { grid-area: d; font-size: .88rem; }
  .wg-n { display: contents; }
  .wg-n > span { display: none; }
  .wg-n svg { grid-area: go; width: 20px; height: 20px; }
  .hc-panel-foot { padding: var(--s4) var(--s5) var(--s5); }
  .hc-call { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; }
  .hc-call-l, .hc-hours { grid-column: 1 / -1; }
  .hc-tel { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; line-height: 1.25; }
  .hc-tel > span { display: grid; }
  .hc-tel-l { font-size: .875rem; }
}
@media (max-width: 440px) { .hc-call { grid-template-columns: minmax(0, 1fr); } }

/* Vertrauenszeile in der Bühne: Google-Wertung und Zulassung */

/* Abschnitt „Was Teilnehmende sagen“: kompaktes dunkles Band, links die Wertung, rechts die vier Stimmen (2 x 2, auf dem Smartphone wischbar) */
.stimmen { padding: clamp(56px, 7vw, 96px) 0; }
.st-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.st-kicker { margin: 0 0 var(--s2); font-size: .95rem; font-weight: 600; color: var(--blue); }
.st-score h2 { margin: 0; font-size: clamp(1.6rem, 1.15rem + 1.2vw, 2.2rem); }
.st-rating { display: flex; align-items: center; gap: 14px; margin: var(--s5) 0 var(--s4); }
.st-num { font-size: clamp(3rem, 2.2rem + 2.4vw, 4.25rem); font-weight: 300; line-height: .9; letter-spacing: -.04em; color: var(--ink); }
.st-rt { display: grid; gap: 6px; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.st-stars, .st-qstars { display: inline-flex; gap: 3px; color: var(--blue); }
.st-stars svg { width: 18px; height: 18px; }
.st-qstars svg { width: 13px; height: 13px; }
.st-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0; font-size: .95rem; color: var(--ink-2); }
.st-stand { margin: var(--s3) 0 0; font-size: .82rem; color: var(--muted); }
.st-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); list-style: none; }
.st-quotes > li { display: flex; }
.st-quote { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 22px 24px 20px; border-radius: var(--r-card); }
.st-quote blockquote { margin: var(--s3) 0 0; }
.st-quote blockquote p { margin: 0; font-size: .98rem; line-height: 1.6; }
.st-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--s4); font-size: .82rem; line-height: 1.35; }
.st-quote figcaption strong { display: block; font-size: .92rem; }
.st-mono { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: .85rem; font-weight: 600; }
.st-scroll:focus-visible { outline: none; border-radius: var(--r-card); box-shadow: var(--focus); }

.st-dark { background: radial-gradient(80% 140% at 85% 0%, var(--night-2) 0%, var(--night) 62%); color: var(--on-night); }
.st-dark .st-kicker, .st-dark .st-stars, .st-dark .st-qstars { color: var(--glow); }
.st-dark h2, .st-dark .st-num { color: #fff; }
.st-dark .st-rt, .st-dark .st-links, .st-dark .st-stand { color: var(--on-night-2); }
.st-dark .text-link { color: var(--glow); border-bottom-color: rgba(139, 190, 242, .45); }
.st-dark .text-link:hover { color: #fff; border-bottom-color: #fff; }
.st-dark .text-link:focus-visible, .st-dark .st-scroll:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }
.st-dark .st-quote { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.st-dark .st-quote blockquote p { color: var(--on-night); }
.st-dark .st-quote figcaption { color: var(--on-night-2); }
.st-dark .st-quote figcaption strong { color: #fff; }
.st-dark .st-mono { background: rgba(139, 190, 242, .16); color: var(--glow); }

@media (max-width: 899px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-dark .st-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s3); scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: thin; }
  .st-dark .st-quotes { display: flex; gap: var(--s3); }
  .st-dark .st-quotes > li { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
}

/* Team auf der Startseite: eine Karte mit der Porträtreihe aller Personen, der Team-Einleitung und dem Link zur Teamseite.
   Niemand wird herausgestellt (K, 25.10.2026). */
.tm-title { margin-bottom: var(--s6); font-size: var(--fs-h2); }
.tm-box { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-band); background: #fff; box-shadow: var(--shadow-card); }
.tm-rest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); padding: var(--s5) clamp(24px, 3vw, 40px); background: var(--mist); }
.tm-rest p { flex: 1 1 300px; max-width: 72ch; margin: 0; color: var(--ink-2); font-size: .97rem; }
@media (min-width: 900px) { .tm-rest .text-link { margin-left: auto; } }
.tm-avatars { display: flex; flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; list-style: none; padding-left: 12px; }   /* eigene Zeile über dem Text, bricht auf schmalen Bildschirmen um */
.tm-avatars li { flex: none; width: 52px; height: 52px; margin-left: -12px; border-radius: 50%; border: 3px solid var(--mist); overflow: hidden; background: #fff; transition: transform .25s var(--ease); }
.tm-avatars li:hover { transform: translateY(-4px); }
.tm-avatars img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-avatars span { display: grid; place-items: center; width: 100%; height: 100%; font-size: .78rem; font-weight: 600; color: var(--blue-deep); background: var(--mist-2); }
@media (max-width: 899px) {
  .tm-rest { padding: var(--s5); }
}
@media (max-width: 480px) {
  .tm-avatars { padding-left: 8px; }
  .tm-avatars li { width: 32px; height: 32px; margin-left: -8px; border-width: 2px; }
}

/* Film auf der Startseite (K, 07.10.2026): startet nur per Klick, vorher lädt nur das Standbild.
   Ohne JavaScript ein normales Video mit Bedienelementen im Querformat. Mit JavaScript ein großer Knopf zum Abspielen;
   Smartphones im Hochformat bekommen die Hochkant-Fassung (Klasse is-hochkant). Auf breiten Bildschirmen zwei Drittel
   der Inhaltsbreite, mittig (K, 07.10.2026). Die Fläche hinter dem Film hat die Hintergrundfarbe des Films,
   damit beim Einpassen keine Kanten sichtbar werden. */
.fm-in { max-width: calc(var(--maxw) * 2 / 3); margin: 0 auto; }
.fm-title { margin-bottom: var(--s6); text-align: center; }
.fm-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-band); background: #FFFFFF; box-shadow: var(--shadow-card); }
.fm-video { display: block; width: calc(100% + 4px); height: calc(100% + 4px); margin: -2px; object-fit: contain; background: #FFFFFF; }   /* 2 px über den Rand: Bei krummen Breiten (z. B. 826,67 px, Windows-Skalierung 175 %) zeigte Chrome beim Abspielen rechts eine 1 px schwarze Kante; der Rahmen schneidet den Überstand ab */
.fm-video:focus-visible { box-shadow: none; outline: 3px solid var(--blue); outline-offset: -5px; border-radius: var(--r-band); }
.fm-video::cue { background: rgba(14, 29, 51, .82); color: #FFFFFF; }
.fm.is-hochkant .fm-video::cue { font-size: 15px; }   /* im schmalen Hochkant-Film sonst zu klein */
.fm.is-hochkant .fm-frame { aspect-ratio: 9 / 16; width: min(100%, calc(80svh * 9 / 16)); margin: 0 auto; }
.fm-play { position: absolute; left: 50%; bottom: clamp(16px, 9%, 64px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 10px; border: 0; border-radius: 999px; background: var(--blue); color: #FFFFFF; font: 600 1.05rem/1 var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(19, 37, 61, .55); transition: background-color .2s; }
.fm-play:hover { background: var(--blue-deep); }
.fm-play:focus-visible { box-shadow: var(--focus), 0 14px 30px -12px rgba(19, 37, 61, .55); }   /* eigener Schatten, deshalb Fokusring hier ausdrücklich */
.fm-play-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: var(--blue); }
.fm-play-ico svg { width: 15px; height: 15px; margin-left: 2px; }
.fm-play-len { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .45); font-weight: 400; }
.fm-play[hidden], .fm.is-started .fm-play { display: none; }
@media (max-width: 640px) {
  .fm-title { text-align: left; }
  .fm-frame { border-radius: var(--r-card); }
  .fm-play { min-height: 52px; font-size: 1rem; }
}

/* So geht es los: Schritte, Kosten und Gutscheine */
.lg-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lg-steps { margin-top: var(--s2); }
.lg-more { margin-top: var(--s6); }
.lg-photo { margin: 0; }
.lg-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-band); box-shadow: var(--shadow-card); }
@media (max-width: 899px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-photo { max-width: 560px; }
}

/* Kontakt auf der Startseite: kompakt, Bürozeiten einmal, Anfahrt zum Aufklappen */
.kh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); margin-bottom: var(--s6); }
.kh-head h2 { font-size: var(--fs-h2); }
.kh-head .lead { max-width: 62ch; margin-top: var(--s3); }
.kh-hours { display: flex; gap: 12px; margin: 0; font-size: .95rem; color: var(--ink-2); }
.kh-hours svg { flex: none; width: 22px; height: 22px; color: var(--blue); margin-top: 1px; }
.kh-hours strong { display: block; color: var(--ink); }
.kh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.kh-card { display: flex; flex-direction: column; gap: var(--s4); height: 100%; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.kh-card h3 { font-size: 1.5rem; font-weight: 300; letter-spacing: -.015em; }
.kh-tel, .kh-mail { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.kh-mail { font-size: 1.02rem; word-break: break-word; }
.kh-tel:hover, .kh-mail:hover { color: var(--blue); }
.kh-tel svg, .kh-mail svg { flex: none; width: 20px; height: 20px; color: var(--blue); }
.kh-card address { display: flex; gap: 10px; min-height: 3.2em; font-style: normal; color: var(--ink-2); line-height: 1.55; }
.kh-card address svg { flex: none; width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.kh-note { display: block; color: var(--muted); font-size: .92rem; }
.kh-way { border-top: 1px solid var(--line); padding-top: var(--s3); }
.kh-way summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.kh-way summary::-webkit-details-marker { display: none; }
.kh-way summary i { position: relative; width: 14px; height: 14px; flex: none; }
.kh-way summary i::before, .kh-way summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--blue); transition: transform .25s var(--ease); }
.kh-way summary i::after { transform: rotate(90deg); }
.kh-way[open] summary i::after { transform: rotate(0deg); }
.kh-way summary:focus-visible { outline: none; border-radius: 8px; box-shadow: var(--focus); }
.kh-way ul { display: grid; gap: 6px; margin: var(--s2) 0 0; list-style: none; color: var(--ink-2); font-size: .95rem; }
.kh-maps { align-self: flex-start; margin-top: auto; }
.kh-write { background: var(--mist); border-color: transparent; }
.kh-write p { margin: 0; color: var(--ink-2); }
.kh-write .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 1099px) { .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kh-write { grid-column: 1 / -1; } }
@media (max-width: 680px) { .kh-grid { grid-template-columns: minmax(0, 1fr); } .kh-card { padding: var(--s5); } .kh-card address { min-height: 0; } }

/* ------------------------------------------------------------------ Unser Team: heller Seitenkopf mit dem Gewächshaus */
.page-head.is-light { margin-top: 0; padding: var(--s6) 0 var(--s7); background: var(--mist); color: var(--ink); }   /* Kopfzeile bleibt hier weiß */
.page-head.is-light.has-media { min-height: clamp(420px, 50vh, 540px); background: var(--mist); }
.page-head.is-light h1 { color: var(--ink); }
.page-head.is-light .lead { color: var(--ink-2); }
.page-head.is-light .kicker { color: var(--blue-deep); }
.page-head.is-light .breadcrumb ol { color: var(--ink-2); }
.page-head.is-light .breadcrumb a { color: var(--blue); }
.page-head.is-light .breadcrumb li + li::before { color: var(--line-strong); }
.page-head.is-light a:focus-visible { box-shadow: var(--focus); }
.page-head.is-light .ph-media::after { background: linear-gradient(90deg, var(--mist) 0%, rgba(243, 247, 251, .7) 18%, rgba(243, 247, 251, .12) 50%, rgba(243, 247, 251, 0) 100%); }
@media (max-width: 900px) {
  .page-head.is-light.has-media { padding-top: calc(clamp(200px, 40vw, 310px) + var(--s2)); }   /* Text beginnt unter dem Bild */
  .page-head.is-light.has-media .ph-media { height: clamp(200px, 40vw, 310px); }
  .page-head.is-light .ph-media::after { background: linear-gradient(180deg, rgba(243, 247, 251, 0) 60%, rgba(243, 247, 251, .9) 92%, var(--mist) 100%); }
}

/* ------------------------------------------------------------------ Für Partner: Rückfragen und Arbeitgeber */
.pt-flyer { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 6px; font-size: .85rem; font-weight: 500; color: var(--blue); }
.pt-flyer svg { width: 16px; height: 16px; flex: none; }
.pt-kt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--s5) var(--s7); align-items: center; margin-top: var(--s7); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 44px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--mist); }
.pt-kt h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; }
.pt-kt p { margin: var(--s2) 0 0; color: var(--ink-2); }
.pt-contact { display: grid; gap: var(--s3); list-style: none; margin: 0; }
.pt-contact li { display: flex; align-items: center; gap: var(--s3); }
.pt-contact svg { width: 20px; height: 20px; flex: none; color: var(--blue); }
.pt-contact li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.pt-l { min-width: 4.2rem; font-size: .9rem; color: var(--muted); }
.pt-contact a { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pt-contact a:hover { color: var(--blue); text-decoration: underline; }
.pt-more { white-space: nowrap; }
.pt-more svg { width: 16px; height: 16px; }
.pt-ag { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pt-offers { margin-top: var(--s6); gap: var(--s4); }
.pt-offers strong { color: var(--ink); }
.pt-person { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: clamp(24px, 3.2vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.pt-person img { width: 104px; height: 104px; margin-bottom: var(--s3); border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line-strong); }
.pt-person p { margin: 0; }
.pt-k { font-size: .88rem; color: var(--muted); }
.pt-name { font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.pt-role { font-size: .95rem; color: var(--blue-deep); }
.pt-person .pt-call { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); align-self: stretch; color: var(--ink-2); }
.pt-person .pt-contact { margin: var(--s2) 0 var(--s4); }
@media (max-width: 1099px) { .pt-kt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pt-kt .pt-more { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 900px) { .pt-ag, .pt-kt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pt-contact li > span { flex-direction: column; gap: 0; } }   /* Beschriftung über dem Wert, auch bei der langen E-Mail-Adresse einheitlich */

/* ------------------------------------------------------------------ AVGS-Coaching (/avgs/, Landingpage der Anzeigen, K 22.10.2026)
   Kurzer Seitenkopf ohne Bild mit dem Formular als weiße Karte (Desktop rechts, Smartphone direkt unter der Einleitung, Übergabe K 22.10.2026),
   danach drei Anliegen als Karten mit dem Symbol der Situation und drei Punkte (vor Ort, Sprachen, Zulassung).
   Angebote, Gutschein und Formular nutzen die vorhandenen Bausteine (.offer-list, .voucher, .callout, .form-grid). */
.av-head { padding: calc(var(--header-h) + var(--s6)) 0 var(--s7); }
.av-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "text card" "call card"; gap: var(--s6) clamp(32px, 5vw, 80px); align-items: start; }
.av-hero .ph-text { grid-area: text; }
.av-head h1 { max-width: 18ch; font-size: var(--fs-h2); }
.av-call { grid-area: call; position: relative; z-index: 1; }
.av-call-l { margin: 0 0 var(--s3); font-weight: 600; color: #fff; }
.av-hours { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--on-night-2); }
.av-card { grid-area: card; position: relative; z-index: 1; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-band); background: #fff; color: var(--ink); box-shadow: var(--shadow-card); }
.av-card h2 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; }
.page-head .av-card .btn-primary { background: var(--blue); color: #fff; }   /* im Seitenkopf sind Knöpfe sonst weiß */
.page-head .av-card .btn-primary:hover { background: var(--blue-deep); color: #fff; }
.page-head .av-card a:focus-visible { box-shadow: var(--focus); }
.av-points { margin-top: var(--s6); }
.av-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); list-style: none; }
.av-needs li { display: grid; align-content: start; gap: var(--s3); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.av-needs h3, .av-needs p { margin: 0; }
.av-needs p { color: var(--ink-2); }
.av-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(42, 108, 180, .1); color: var(--blue); }   /* wie .wg-ico im Wegweiser */
.av-ico svg { width: 26px; height: 26px; }
.av-card .field textarea { min-height: 96px; }
@media (max-width: 900px) {
  .av-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "card" "call"; }
  .av-head { padding-bottom: var(--s6); }
  .av-needs { grid-template-columns: minmax(0, 1fr); }
  .av-needs li { padding: var(--s5); }
}

/* Einwilligung zur Anzeigenmessung, nur auf /avgs/ (Stufe 2, docs/avgs-messung.md). Leiste am unteren Rand, nicht modal:
   Die Seite und das Formular bleiben bedienbar. Drei gleich gestaltete Knöpfe, keiner hervorgehoben. Ohne Bewegung. */
.cm { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--line-strong); box-shadow: 0 -16px 40px -24px rgba(19, 37, 61, .45); color: var(--ink); }
.cm[hidden] { display: none; }
.cm-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf knoepfe" "zwecke zwecke" "entwurf entwurf"; gap: var(--s3) var(--s6); align-items: center; padding-block: var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
.cm.is-einzeln .cm-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "zwecke" "knoepfe" "entwurf"; }   /* aufgeklappt: erst die Zwecke, dann die Knöpfe */
.cm.is-einzeln .cm-knoepfe { justify-content: flex-end; }
.cm-kopf { grid-area: kopf; display: grid; gap: var(--s1); }
.cm h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.cm h2:focus { outline: none; }
.cm h2:focus-visible { box-shadow: var(--focus); }
.cm-text { margin: 0; max-width: 78ch; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.cm-zwecke { grid-area: zwecke; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: 0; padding: 0; border: 0; }
.cm-zwecke[hidden] { display: none; }
.cm-zweck { display: flex; gap: 12px; align-items: flex-start; padding: var(--s4); border: 1px solid var(--line); border-radius: 12px; background: var(--mist); }
.cm-zweck input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--blue); }
.cm-zweck label { display: grid; gap: 4px; font-size: .92rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.cm-zweck strong { font-size: 1rem; color: var(--ink); }
.cm-knoepfe { grid-area: knoepfe; display: flex; gap: var(--s3); }
.cm-knoepfe .btn { flex: 1 1 auto; padding-inline: 22px; border-color: var(--field); white-space: nowrap; }   /* Rahmen 3,7 : 1, alle drei gleich */
.cm-hinweis { margin: var(--s1) 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.cm-entwurf { grid-area: entwurf; margin: 0; padding: 6px var(--s3); border-left: 4px solid var(--note-line); background: var(--note-bg); color: var(--note-ink); font-size: var(--fs-small); font-weight: 600; }
.cm-aendern { margin: var(--s3) 0 0; }
/* Häkchen zur Anzeigenmessung im AVGS-Formular (freiwillig, getrennt von der Pflichtangabe darüber) */
.cm-formular { display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line); border-radius: 12px; background: var(--mist); }
.cm-formular[hidden] { display: none; }
.cm-formular .check label { color: var(--ink); font-weight: 600; }
.cm-formular-text, .cm-formular-teil { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.cm-formular-teil { color: var(--ink-2); font-weight: 600; }
.cm-formular-einzeln { margin: 0; }
.cm-unten { margin-top: var(--s6); }
.cm-link { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); color: var(--blue); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cm-link:hover { color: var(--blue-deep); }
.cm-protokoll { padding: var(--s4) var(--s5); border: 1.5px dashed var(--note-line); border-radius: 12px; background: var(--note-bg); color: var(--note-ink); }
.cm-protokoll h3 { font-size: 1rem; color: var(--note-ink); }
.cm-protokoll ol { margin: var(--s3) 0 0; padding-left: 1.3em; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.cm-protokoll .btn { margin-top: var(--s4); }
.cm-protokoll:focus { outline: none; }
.cm-protokoll:focus-visible { box-shadow: var(--focus); }
@media (max-width: 1100px) {
  .cm-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "zwecke" "knoepfe" "entwurf"; }
  /* Längerer Text seit der Freigabe (25.10.2026): Die drei Knöpfe bleiben am unteren Rand der Leiste sichtbar, der Text scrollt darüber */
  .cm-knoepfe { position: sticky; bottom: 0; z-index: 1; margin-inline: calc(-1 * var(--s2)); padding: var(--s2); background: #fff; box-shadow: 0 -10px 12px -10px rgba(19, 37, 61, .25); }
}
@media (max-width: 900px) {
  .cm-zwecke { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cm-in { gap: var(--s3); padding-block: var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .cm h2 { font-size: 1rem; }
  .cm-text { font-size: .9rem; }
  .cm-zweck { padding: var(--s3); }
  .cm-knoepfe { gap: var(--s2); }
  .cm-knoepfe .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: .9rem; line-height: 1.25; white-space: normal; text-align: center; }
  .cm-hinweis { font-size: .8rem; }
  .cm-entwurf { font-size: .8rem; }
}
@media print { .cm { display: none; } }

/* ------------------------------------------------------------------ Für Teilnehmende */
.tn-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tn-steps { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s3) var(--s6); margin: var(--s6) 0 0; list-style: none; font-size: .95rem; font-weight: 600; color: var(--ink); }
.tn-steps li { display: inline-flex; align-items: center; gap: 10px; }
.tn-n { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--blue); border-radius: 50%; font-size: .85rem; color: var(--blue); }
.tn-facts { display: grid; gap: 0; list-style: none; margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.tn-facts li { display: grid; gap: 4px; padding: var(--s4) var(--s5); }
.tn-facts li + li { border-top: 1px solid var(--line); }
.tn-facts strong { font-size: .88rem; font-weight: 600; color: var(--blue-deep); }
.tn-facts span { color: var(--ink); }
.tn-list { list-style: none; margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.tn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s4) clamp(32px, 5vw, 80px); align-items: center; padding: var(--s6) clamp(24px, 3.2vw, 44px); }
.tn-row + .tn-row { border-top: 1px solid var(--line); }
.tn-what h3 { font-size: 1.2rem; font-weight: 600; }
.tn-what p { margin: var(--s2) 0 0; color: var(--ink-2); }
.tn-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); list-style: none; margin: 0; }
.tn-p { display: flex; align-items: center; gap: var(--s3); }
.tn-p img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-strong); }
.tn-ini { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: radial-gradient(80% 80% at 70% 25%, #FFFFFF 0%, var(--mist-2) 70%); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-strong); font-size: .95rem; letter-spacing: .04em; color: var(--blue); }
.tn-p > span { display: grid; gap: 1px; min-width: 0; }
.tn-p strong { font-size: .95rem; color: var(--ink); }
.tn-p span span { font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .tn-intro, .tn-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tn-people, .tn-steps { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Unterseiten: Handy und Tablet */
@media (max-width: 900px) {
  .page-head.has-media { display: block; min-height: 0; padding-top: calc(var(--header-h) + clamp(160px, 34vw, 260px)); }   /* Bild oben, Text darunter */
  .page-head.has-media .ph-text { max-width: none; }
  .page-head.has-media .ph-media { inset-inline: 0; bottom: auto; width: auto; height: calc(var(--header-h) + clamp(200px, 40vw, 310px)); }
  .ph-media::after { background: linear-gradient(180deg, rgba(14, 29, 51, .9) 0%, rgba(14, 29, 51, .62) var(--header-h), rgba(14, 29, 51, .14) 48%, rgba(14, 29, 51, .8) 80%, var(--night) 100%); }   /* „Menü“ mindestens 7,6 : 1, Brotkrumen mindestens 6 : 1 */
}
@media (max-width: 760px) {
  .offer-row { grid-template-columns: minmax(0, 1fr) 20px; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4) var(--s5); }
  .or-go { grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; }
  .or-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px var(--s4); }
  .or-facts div { display: flex; gap: 6px; }
  .page-head { padding-bottom: var(--s7); }
  .page-head:not(.has-media) { padding-top: calc(var(--header-h) + var(--s6)); }
  /* Filter als Wischreihe */
  .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  .filter li { flex: none; }
  .chip { white-space: nowrap; }
  /* Partnertabelle als Karten */
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .table-wrap table { overflow: hidden; }   /* die versteckte Kopfzeile ragte sonst 7 px über den Rand (seitliches Scrollen bei 320 px) */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td, .table-wrap caption { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap caption { padding: 0 0 var(--s4); }
  .table-wrap tr { margin-bottom: var(--s3); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
  .table-wrap tbody th { padding: 0 0 var(--s3); border: 0; font-size: 1.05rem; }
  .table-wrap td { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: var(--s3); padding: 8px 0; border-top: 1px solid var(--line); }
  .table-wrap td::before { content: attr(data-label); font-size: .88rem; color: var(--muted); }
}

/* ------------------------------------------------------------------ Sprachleiste und Seiten auf Arabisch und Ukrainisch (K, 08.10.2026) */
/* Schmale Leiste über der Kopfzeile, Links in der jeweiligen Sprache. Nachtblau wie die Seitenköpfe, auf „Unser Team“ hell. */
.lang-bar { position: relative; z-index: 101; background: var(--night); color: var(--on-night-2); }
.lang-in { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: var(--lang-h); }
.lang-in > svg { width: 18px; height: 18px; flex: none; color: var(--glow); }
.lang-bar ul { display: flex; gap: 2px var(--s4); list-style: none; }
.lang-bar a { display: inline-flex; align-items: center; min-height: var(--lang-h); padding: 0 4px; font-size: .95rem; font-weight: 600; color: #fff; text-decoration: none; }
.lang-bar a:hover { color: var(--glow); text-decoration: underline; }
.lang-bar a:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }
body:has(.page-head.is-light) .lang-bar { background: var(--mist); color: var(--ink-2); }
body:has(.page-head.is-light) .lang-bar a { color: var(--ink); }
body:has(.page-head.is-light) .lang-bar a:hover { color: var(--blue); }
body:has(.page-head.is-light) .lang-in > svg { color: var(--blue); }
body:has(.page-head.is-light) .lang-bar a:focus-visible { box-shadow: var(--focus); }
.footer-meta .footer-lang { gap: var(--s4); }

/* Tippflächen auf Touch-Geräten und kleinen Bildschirmen: Links in der Fußzeile mindestens 44 px hoch */
@media (pointer: coarse), (max-width: 900px) {
  .footer-grid ul { gap: 0; }
  .footer-grid a, .footer-meta a { display: inline-block; padding: 11px 0; }   /* mit Zeilenhöhe mindestens 44 px */
  .footer-grid .footer-nav { gap: 0 18px; }
}

/* Wegweiser auf dem Smartphone: zuerst die vier Einstiege, darunter der Link für Jobcenter, Agenturen und Partner */
@media (max-width: 760px) {
  .hc-panel { display: flex; flex-direction: column; }
  .hc-panel-head { display: contents; }
  .hc-panel-head h2 { padding: var(--s5) var(--s5) 0; }
  .hc-panel-head p { padding: var(--s2) var(--s5) var(--s4); }
  .wgA-tiles { order: 1; }
  .wg-partner { order: 2; align-self: flex-start; margin: 0 var(--s5) var(--s4); }
  .hc-panel-foot { order: 3; }
}

/* Angebote: Hinweis zur Unterrichtseinheit, Vergleich JobStart und JobStart Plus */
.og-note { margin: var(--s5) 0 0; }
.cmp > div { min-width: 0; }
.cmp-list { display: grid; gap: 0; margin: var(--s4) 0 0; list-style: none; }
.cmp-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s4); padding: 10px 0; border-top: 1px solid var(--line-strong); color: var(--ink); }
.cmp-list li > span:last-child { font-weight: 600; }
.prose .cmp { margin: var(--s5) 0 0; }
.prose .cmp li { color: var(--ink); }

/* Sprachseiten */
.lp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.lp-grid h2, .lp-team h2 { margin-bottom: var(--s5); }
.lp-list { gap: 12px; color: var(--ink-2); }
.lp-note { margin: var(--s5) 0 0; color: var(--ink); font-weight: 600; }
.lp-cost { padding: var(--s6); border-radius: var(--r-card); background: var(--mist-2); }
.lp-cost h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); }
.lp-cost p { color: var(--ink); }
.lp-cost p:last-child { margin-bottom: 0; }
.lp-team { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-team .lead { margin-bottom: var(--s6); }
.lp-people { max-width: 560px; }
.lp-say { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.lp-say p { margin: 0; color: var(--ink-2); }
.lp-phrase { margin-top: var(--s3) !important; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; line-height: 1.4; color: var(--ink) !important; }
.lp-gloss { margin-top: var(--s2) !important; color: var(--muted) !important; }
.lp-addr { display: block; }
main bdi[lang="de"] { white-space: nowrap; }   /* kurze deutsche Wörter auf den Sprachseiten nicht trennen */
.lp-terms { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-strong); }
.lp-terms-h { margin: 0 0 var(--s2) !important; font-weight: 600; }
.lp-terms dl { display: grid; gap: 6px; margin: 0; }
.lp-terms dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s4); }
.lp-terms dt { color: var(--ink-2); }
.lp-terms dd { margin: 0; font-weight: 600; color: var(--ink); }
html[dir="rtl"] main .lp-phrase { text-align: right; }
@media (max-width: 900px) { .lp-grid, .lp-team { grid-template-columns: minmax(0, 1fr); } }

/* Arabische Seite: Schrift, Zeilenhöhe, keine Laufweite (sonst reißen die Buchstabenverbindungen), Pfeile gespiegelt */
html[lang="ar"] main { font-family: "Noto Sans Arabic", var(--font); line-height: 1.8; }
html[lang="ar"] main :is(h1, h2, h3, .kicker, .lead, .btn, .text-link) { letter-spacing: 0; }
html[lang="ar"] main h1 { font-weight: 500; line-height: 1.35; }
html[lang="ar"] main h2 { font-weight: 500; line-height: 1.4; }
html[lang="ar"] main h3 { font-weight: 600; }
html[lang="ar"] main [lang="de"] { font-family: var(--font); }
@media (min-width: 901px) {
  html[dir="rtl"] main .ph-media::after { background:
    linear-gradient(270deg, var(--night) 0%, rgba(14, 29, 51, .62) 20%, rgba(14, 29, 51, .14) 52%, rgba(14, 29, 51, 0) 100%),
    linear-gradient(180deg, rgba(14, 29, 51, .82) 0%, rgba(14, 29, 51, .5) var(--header-h), rgba(14, 29, 51, 0) calc(var(--header-h) + 90px)); }
}
html[dir="rtl"] main .text-link svg { transform: scaleX(-1); }
html[dir="rtl"] main .text-link:hover svg { transform: scaleX(-1) translateX(3px); }

/* ------------------------------------------------------------------ Kleine Pause: Übersicht, Spielseiten, Abschnitt auf „Unser Team“, Fußzeile, Fehlerseite (K, 07.10.2026; neu gestaltet K, 08.10.2026) */
/* Spielkarten: dunkel wie die Spiele, Startbild aus dem Spiel, die ganze Karte ist der Link */
.pz-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5); list-style: none; margin: 0; padding: 0; }
/* Fünf Spiele (seit 11.10.2026): breit drei Karten je Reihe, eine unvollständige letzte Reihe steht mittig */
@media (min-width: 1181px) {
  .pz-grid > li { grid-column: span 2; }
  .pz-grid > li:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .pz-grid > li:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.pz-card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(139, 190, 242, .24); border-radius: 22px; background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  color: var(--on-night-2); text-decoration: none; box-shadow: 0 1px 2px rgba(14, 29, 51, .12), 0 24px 48px -30px rgba(14, 29, 51, .75);
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
}
.pz-card:hover { color: var(--on-night-2); transform: translateY(-4px); border-color: rgba(139, 190, 242, .62); box-shadow: 0 1px 2px rgba(14, 29, 51, .12), 0 32px 60px -30px rgba(14, 29, 51, .85), 0 0 44px -18px rgba(139, 190, 242, .55); }
.pz-card:focus-visible { border-radius: 22px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }   /* weißer Ring auf Dunkel, blauer auf Hell */
.pz-img { position: relative; display: block; aspect-ratio: 640 / 357; overflow: hidden; background: var(--night); }
.pz-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pz-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 43, 74, 0) 58%, rgba(23, 43, 74, .9) 100%); }
.pz-card:hover .pz-img img { transform: scale(1.045); }
.pz-body { position: relative; display: flex; flex: 1; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s5) var(--s5); }
@media (max-width: 1180px) and (min-width: 901px) {
  .pz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pz-body { padding: var(--s3) var(--s6) var(--s6); }
  .pz-grid > li { grid-column: span 2; }
  .pz-grid > li:nth-child(odd):last-child { grid-column: 2 / span 2; }   /* einzelne Karte in der letzten Reihe mittig */
}
.pz-art { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); }
.pz-name { font-size: 1.55rem; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: #fff; }
.pz-text { margin-bottom: var(--s4); }
.pz-go {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: auto; padding: 0 22px 0 6px;
  border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  transition: background-color .2s, box-shadow .3s var(--ease);
}
.pz-go-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--blue); transition: color .2s; }
.pz-go-ico svg { width: 13px; height: 13px; margin-left: 2px; }
.pz-card:hover .pz-go { background: var(--blue-deep); box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 8px rgba(139, 190, 242, .16); }
.pz-card:hover .pz-go-ico { color: var(--blue-deep); }
@media (max-width: 900px) {
  .pz-grid { grid-template-columns: minmax(0, 1fr); }
  .pz-card { flex-direction: row; }
  .pz-img { flex: 0 0 44%; aspect-ratio: auto; min-height: 100%; }
  .pz-img::after { background: linear-gradient(90deg, rgba(23, 43, 74, 0) 62%, rgba(23, 43, 74, .85) 100%); }
  .pz-body { padding: var(--s5); }
}
@media (max-width: 600px) {
  .pz-card { flex-direction: column; }
  .pz-img { flex: none; aspect-ratio: 640 / 357; min-height: 0; }
  .pz-img::after { background: linear-gradient(180deg, rgba(23, 43, 74, 0) 58%, rgba(23, 43, 74, .9) 100%); }
  .pz-body { padding: var(--s3) var(--s5) var(--s5); }
  .pz-name { font-size: 1.35rem; }
}
/* Übersicht und Spielseiten: Die Karten und die Bühne beginnen noch auf dem dunklen Seitenkopf */
.pz-arena, .pz-game { padding-top: 0; background: linear-gradient(180deg, var(--night) 0, var(--night) var(--pz-cut), var(--paper) var(--pz-cut)); }
.pz-arena { --pz-cut: clamp(110px, 11vw, 160px); }
.pz-game { --pz-cut: clamp(150px, 24vw, 330px); }
.page-head:has(+ .pz-arena), .page-head:has(+ .pz-game) { padding-bottom: var(--s7); }
.pz-teaser-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s6); }
.pz-teaser-head p { max-width: 58ch; margin: var(--s3) 0 0; color: var(--ink-2); }
/* Spielseite: unter dem Spiel die anderen Spiele als kleine Karten */
.pz-next { margin-top: var(--s7); }
.pz-next h2 { margin: 0 0 var(--s4); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.pz-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); list-style: none; margin: 0; padding: 0; }   /* vier andere Spiele: zwei je Reihe */
.pz-mc {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: var(--s4); height: 100%; padding: 10px 18px 10px 10px;
  border: 1px solid rgba(139, 190, 242, .24); border-radius: 20px; background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  color: var(--on-night-2); text-decoration: none; box-shadow: 0 18px 40px -30px rgba(14, 29, 51, .8);
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
}
.pz-mc:hover { color: var(--on-night-2); transform: translateY(-3px); border-color: rgba(139, 190, 242, .62); box-shadow: 0 26px 50px -30px rgba(14, 29, 51, .85), 0 0 36px -16px rgba(139, 190, 242, .5); }
.pz-mc:focus-visible { border-radius: 20px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }
.pz-mi { display: block; aspect-ratio: 640 / 357; overflow: hidden; border-radius: 12px; background: var(--night); }
.pz-mi img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pz-mc:hover .pz-mi img { transform: scale(1.06); }
.pz-mb { display: grid; gap: 2px; min-width: 0; }
.pz-mc .pz-art { font-size: .72rem; }
.pz-mn { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.pz-mgo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; transition: background-color .2s; }
.pz-mgo svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.pz-mc:hover .pz-mgo { background: var(--blue-deep); }
.pz-mc:hover .pz-mgo svg { transform: translateX(2px); }
@media (max-width: 1100px) {
  .pz-mini { grid-template-columns: minmax(0, 1fr); }
  .pz-mc { grid-template-columns: 172px minmax(0, 1fr) auto; gap: var(--s5); padding-right: 22px; }
}
@media (max-width: 760px) {
  .pz-mc { grid-template-columns: 116px minmax(0, 1fr) auto; gap: var(--s4); padding-right: 16px; }
  .pz-mn { font-size: 1.1rem; }
}
@media (max-width: 480px) { .pz-mc .pz-art { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pz-card:hover, .pz-mc:hover { transform: none; }
  .pz-card:hover .pz-img img, .pz-mc:hover .pz-mi img, .pz-mc:hover .pz-mgo svg { transform: none; }
}
/* Fußzeile: letzter Eintrag, etwas abgesetzt */
.footer-grid .footer-pause { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.footer-pause a { display: inline-flex; align-items: center; gap: 7px; }
.footer-pause svg { flex: none; width: 13px; height: 13px; color: var(--blue); }
@media (max-width: 640px) { .footer-grid .footer-pause { flex-basis: 100%; margin-top: var(--s1); } }
/* Fehlerseite */
.nf-pause { display: flex; align-items: flex-start; gap: 10px; margin: var(--s6) 0 0; color: var(--on-night-2); }
.nf-pause svg { flex: none; width: 16px; height: 16px; margin-top: .35em; color: var(--glow); }
.nf-pause a { color: var(--glow); text-underline-offset: 3px; }
.nf-pause a:hover { color: #fff; }

/* ------------------------------------------------------------------ Spiele (Sternlauf, Sternsprung, Sternfahrt, Sternwacht, Sternpfeil): gemeinsame Bühne und Hülle (K, 08.10.2026) */
.sl-fallback { padding: 32px; border-radius: 26px; background: var(--night); color: var(--on-night); }
/* Startbild: Das Spiel lädt erst nach dem Klick auf „Spielen“. Gleiches Format wie die Bühne, damit nichts springt. */
.sl-poster { position: relative; display: grid; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--header-h) - 32px); min-height: 340px; border-radius: 26px; overflow: hidden; background: var(--night); color: var(--on-night); isolation: isolate; box-shadow: 0 0 0 1px rgba(139, 190, 242, .22), 0 30px 70px -40px rgba(14, 29, 51, .9); }
.sl-poster > * { grid-area: 1 / 1; }
.sl-poster picture { display: block; min-height: 0; overflow: hidden; }
.sl-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sl-poster::after { content: ""; grid-area: 1 / 1; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(14, 29, 51, 0) 40%, rgba(14, 29, 51, .55) 100%); }
.sl-start {
  place-self: center; z-index: 1; display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 34px 0 12px;
  border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 600 1.25rem/1 var(--font); cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 10px rgba(139, 190, 242, .16), 0 22px 46px -14px rgba(0, 0, 0, .75);
  transition: background-color .15s ease, box-shadow .25s ease;
}
.sl-start[hidden] { display: none; }
.sl-start::after { content: ""; position: absolute; inset: 0; }   /* ganze Fläche des Startbilds anklickbar */
.sl-start-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--blue); }
.sl-start-ico svg { width: 18px; height: 18px; margin-left: 3px; }
.sl-poster:hover .sl-start { background: var(--blue-deep); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 0 14px rgba(139, 190, 242, .2), 0 22px 46px -14px rgba(0, 0, 0, .75); }
.sl-poster:hover .sl-start-ico { color: var(--blue-deep); }
.sl-poster:hover img { transform: scale(1.03); }
.sl-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 0 10px var(--night), 0 18px 40px -12px rgba(0, 0, 0, .6); border-radius: 999px; }
.sl-poster-note { align-self: end; margin: 0; padding: 14px 20px; background: rgba(14, 29, 51, .88); color: var(--on-night); z-index: 1; }
.sl-ready .sl-poster-note { display: none; }
@media (max-width: 700px) {
  .sl-poster { aspect-ratio: 2 / 3; border-radius: 18px; min-height: 0; }
}

/* Bühne */
.sl-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--header-h) - 32px); min-height: 340px; scroll-margin-top: calc(var(--header-h) + 16px);
  border-radius: 26px; overflow: hidden; background: var(--night); color: var(--on-night); container-type: size;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgba(139, 190, 242, .22), 0 30px 70px -40px rgba(14, 29, 51, .9);
}
@media (max-width: 700px) { .sl-stage { aspect-ratio: 2 / 3; border-radius: 18px; min-height: 0; } }
.sl-stage.sl-full { border-radius: 0; max-height: none; aspect-ratio: auto; width: 100%; height: 100%; box-shadow: none; }
.sl-stage.gx-pseudo { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; height: 100dvh; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
html.gx-noscroll, html.gx-noscroll body { overflow: hidden; overscroll-behavior: none; }
.sl-stage.sl-playing { cursor: pointer; }
.sl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.sl-canvas:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--blue); }
.sl-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knöpfe oben rechts */
.gx-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 4; }
.gx-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(230, 238, 248, .55);
  background: rgba(14, 29, 51, .78); color: var(--on-night); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background-color .15s ease, border-color .15s ease;
}
.gx-icon[hidden] { display: none; }
.gx-icon:hover { background: var(--blue-deep); border-color: #fff; }
.gx-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Ebenen über dem Spiel */
.gx-ov { position: absolute; inset: 0; display: flex; z-index: 3; padding: clamp(12px, 3cqh, 26px) clamp(12px, 2.6cqw, 34px); overflow: auto; }
.gx-ov[hidden] { display: none; }
.gx-pause, .gx-help { background: rgba(14, 29, 51, .72); }
.gx-done { background: radial-gradient(ellipse at 50% 38%, rgba(30, 85, 148, .5), rgba(14, 29, 51, .84) 62%); }
.gx-panel {
  margin: auto; padding: clamp(18px, 3.4cqh, 30px) clamp(18px, 3cqw, 32px); border-radius: 22px;
  background: linear-gradient(180deg, #13253D, #0E1D33); border: 1px solid rgba(139, 190, 242, .28);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gx-small { text-align: center; width: min(420px, 100%); }
.gx-kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.gx-title { margin: 0; font-weight: 300; font-size: clamp(2.2rem, 6.4cqw, 4.1rem); line-height: 1; letter-spacing: -.02em; color: #fff; }
.gx-t2 { font-size: clamp(1.8rem, 4.6cqw, 2.7rem); }
.gx-lead { margin: 10px 0 0; max-width: 34rem; color: var(--on-night-2); font-size: .98rem; line-height: 1.55; }

/* Menü: Kopf oben links, Levelkarten unten, dazwischen sieht man das Spiel */
.gx-menu {
  padding: clamp(14px, 4cqh, 34px) clamp(14px, 3cqw, 38px);
  background:
    linear-gradient(90deg, rgba(14, 29, 51, .78), rgba(14, 29, 51, 0) 58%),
    linear-gradient(180deg, rgba(14, 29, 51, .7) 0%, rgba(14, 29, 51, .08) 34%, rgba(14, 29, 51, .5) 58%, rgba(14, 29, 51, .94) 100%);
}
.gx-mi { width: 100%; min-height: 100%; display: flex; flex-direction: column; gap: clamp(10px, 2.4cqh, 18px); }
.gx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 108px; }
.gx-ht { min-width: 0; }
.gx-logo { display: block; width: 70px; height: auto; margin: 0 0 12px; }
.gx-helpbtn { flex: none; }
.gx-pick { margin-top: auto; }
.gx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(8px, 1.3cqw, 16px); }
.gx-li { display: flex; min-width: 0; }
.gx-n4 { --n: 4; } .gx-n5 { --n: 5; } .gx-n6 { --n: 6; }
.gx-card {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer;
  border-radius: 16px; border: 1px solid rgba(139, 190, 242, .26); overflow: hidden; color: var(--on-night); font: inherit;
  background: linear-gradient(180deg, #13253D, #0E1D33);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .85);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .15s ease, box-shadow .22s ease;
}
.gx-card:hover, .gx-card:focus-visible { transform: translateY(-4px); border-color: rgba(139, 190, 242, .85); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 190, 242, .4), 0 0 26px -6px rgba(139, 190, 242, .45); }
.gx-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0A1626; }
.gx-tc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .2s ease; }
.gx-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 29, 51, 0) 55%, rgba(14, 29, 51, .7)); }
.gx-card:hover .gx-tc, .gx-card:focus-visible .gx-tc { transform: scale(1.06); filter: brightness(1.15); }
.gx-num {
  position: absolute; z-index: 1; left: 8px; top: 8px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(14, 29, 51, .86); border: 1.5px solid var(--glow); color: #fff; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.gx-num .gx-ico { width: 20px; height: 20px; }
.gx-card.is-done .gx-num { background: var(--blue); border-color: #fff; }
.gx-go {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--blue); opacity: 0; transform: scale(.7); transition: opacity .18s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7);
}
.gx-go .gx-ico { width: 18px; height: 18px; margin-left: 3px; }
.gx-card:hover .gx-go, .gx-card:focus-visible .gx-go { opacity: 1; transform: none; }
.gx-cb { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "m m"; gap: 1px 8px; align-items: center; padding: 9px 12px 11px; }
.gx-name { grid-area: n; font-weight: 600; font-size: 1rem; line-height: 1.25; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-meta { grid-area: m; font-size: .8rem; line-height: 1.35; color: var(--on-night-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-meta:empty { display: none; }
.gx-rate { grid-area: r; display: flex; gap: 2px; }
.gx-ms { width: 14px; height: 14px; fill: none; stroke: rgba(230, 238, 248, .55); stroke-width: 1.8; stroke-linejoin: round; }
.gx-ms.on { fill: #fff; stroke: #fff; }

.gx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.gx-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-keys, .gx-note { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--on-night-2); }
.gx-keys { max-width: 30rem; text-align: right; }
.gx-note { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(139, 190, 242, .35); background: rgba(14, 29, 51, .86); }
/* Hinweise je nach Gerät: Tastatur oder Finger */
.sl-stage .gx-t { display: none; }
.gx-touchdev .sl-stage .gx-t { display: revert; }
.gx-touchdev .sl-stage .gx-di.gx-t { display: grid; }
.gx-touchdev .sl-stage .gx-k { display: none; }

/* Schalter */
.gx-tog {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 13px 3px 7px; border-radius: 999px;
  border: 1px solid rgba(139, 190, 242, .45); background: rgba(14, 29, 51, .82); color: var(--on-night); font: inherit; font-size: .88rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.gx-tog::before {
  content: ""; flex: none; width: 32px; height: 18px; border-radius: 9px; background-color: transparent;
  box-shadow: inset 0 0 0 2px rgba(230, 238, 248, .7);
  background-image: radial-gradient(circle at 9px 50%, #E6EEF8 5px, transparent 5.5px); transition: background-color .15s ease;
}
.gx-tog[aria-pressed="true"]::before { background-color: var(--blue); box-shadow: inset 0 0 0 2px var(--glow); background-image: radial-gradient(circle at 23px 50%, #fff 5px, transparent 5.5px); }
.gx-tog.gx-cyc::before { display: none; }
.gx-tog.gx-cyc { padding-left: 13px; }
.gx-tog:hover { background: rgba(42, 108, 180, .4); border-color: var(--glow); }

/* Knöpfe */
.gx-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.gx-stack { flex-direction: column; align-items: stretch; width: min(260px, 100%); margin-left: auto; margin-right: auto; }
.gx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 8px 22px 8px 18px; border-radius: 999px; border: 0;
  background: var(--blue); color: #fff; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 26px -14px rgba(42, 108, 180, .9); transition: background-color .15s ease, transform .15s ease;
}
.gx-btn[hidden] { display: none; }
.gx-btn:hover { background: var(--blue-deep); }
.gx-btn:active { transform: translateY(1px); }
.gx-sec { background: rgba(14, 29, 51, .6); box-shadow: inset 0 0 0 1.5px rgba(230, 238, 248, .7); }
.gx-sec:hover { background: rgba(42, 108, 180, .4); }
.sl-stage button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--blue); }
.sl-stage .gx-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Bedienung */
.gx-helpp { width: min(880px, 100%); }
.gx-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gx-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 0; }
.gx-di { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "p t" "p d"; gap: 2px 12px; align-content: start; padding: 10px 12px; border-radius: 14px; background: rgba(139, 190, 242, .07); border: 1px solid rgba(139, 190, 242, .16); }
.gx-pict { grid-area: p; width: 48px; height: 32px; margin-top: 2px; fill: none; stroke: var(--glow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-di dt { grid-area: t; font-weight: 600; color: #fff; font-size: .92rem; }
.gx-di dd { grid-area: d; margin: 0; color: var(--on-night-2); font-size: .85rem; line-height: 1.42; }

/* Pause */
.gx-popts { justify-content: center; margin-top: 16px; }

/* Ergebnis */
.gx-result { text-align: center; width: min(600px, 100%); position: relative; }
.gx-rating { display: flex; justify-content: center; gap: clamp(8px, 2cqw, 16px); margin: 14px 0 6px; }
.gx-rs { position: relative; width: clamp(38px, 9cqh, 60px); height: clamp(38px, 9cqh, 60px); }
.gx-rs svg { width: 100%; height: 100%; fill: rgba(230, 238, 248, .08); stroke: rgba(230, 238, 248, .45); stroke-width: 1.4; stroke-linejoin: round; }
.gx-rs.on svg { fill: #fff; stroke: #fff; filter: drop-shadow(0 0 10px rgba(139, 190, 242, .9)); }
.gx-rs.on::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; border: 2px solid rgba(139, 190, 242, .9); opacity: 0; }
.gx-badge { display: inline-block; margin: 4px 0 4px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--night); background: var(--glow); }
.gx-badge[hidden] { display: none; }
.gx-stats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.gx-st { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(139, 190, 242, .07); border: 1px solid rgba(139, 190, 242, .2); }
.gx-st.hi { border-color: var(--glow); background: rgba(139, 190, 242, .14); }
.gx-sk { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); }
.gx-sv { font-size: 1.3rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2; }
.gx-dinfo { margin: 10px 0 0; color: var(--on-night-2); font-size: .9rem; }
.gx-dinfo:empty { display: none; }

/* Einblendung des Levelnamens zu Beginn */
.gx-banner {
  position: absolute; z-index: 2; left: 50%; top: 56px; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; padding: 8px 22px 10px; border-radius: 16px;
  background: rgba(14, 29, 51, .86); border: 1px solid rgba(139, 190, 242, .4); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
}
.gx-bk { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.gx-bt { font-size: 1.35rem; font-weight: 300; color: #fff; white-space: nowrap; }
.gx-banner.on { animation: gx-banner 2.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gx-banner { 0% { opacity: 0; transform: translate(-50%, -12px); } 14%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* Übergänge */
@keyframes gx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gx-pop { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes gx-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes gx-panel { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.gx-in.gx-menu { animation: gx-fade .3s ease both; }
.gx-in .gx-head { animation: gx-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.gx-in .gx-li { animation: gx-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 90ms); }
.gx-in .gx-foot { animation: gx-fade .5s ease .3s both; }
.gx-in > .gx-panel { animation: gx-panel .38s cubic-bezier(.2, .8, .2, 1) both; }
.gx-in.gx-done .gx-rs { animation: gx-pop .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 170ms + 250ms); }
.gx-in.gx-done .gx-rs.on::after { animation: gx-ring .7s ease-out both; animation-delay: calc(var(--i) * 170ms + 420ms); }
.gx-in.gx-done .gx-st { animation: gx-rise .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.gx-out { animation: gx-fade .2s ease reverse both; }
@media (prefers-reduced-motion: reduce) {
  .gx-card, .gx-tc, .gx-go, .sl-poster img, .gx-btn { transition: none; }
  .gx-card:hover, .gx-card:focus-visible { transform: none; }
  .gx-card:hover .gx-tc, .gx-card:focus-visible .gx-tc { transform: none; }
  .sl-poster:hover img { transform: none; }
  .gx-in.gx-menu, .gx-in .gx-head, .gx-in .gx-li, .gx-in .gx-foot, .gx-in > .gx-panel, .gx-in.gx-done .gx-rs, .gx-in.gx-done .gx-rs.on::after, .gx-in.gx-done .gx-st { animation: none; }
  .gx-banner.on { animation: gx-banner-r 2.4s linear both; }
  @keyframes gx-banner-r { 0%, 100% { opacity: 0; transform: translate(-50%, 0); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } }
}

/* Hochkant und schmal (Handy): Karten als Liste, Kopf in einer Zeile */
@container (max-width: 640px) and (orientation: portrait) {
  .gx-menu { padding: 12px; background: linear-gradient(180deg, rgba(14, 29, 51, .95) 0, rgba(14, 29, 51, .86) 13%, rgba(14, 29, 51, .45) 40%, rgba(14, 29, 51, .9)); }
  .gx-head { align-items: center; padding-right: 54px; }
  .gx-logo, .gx-menu .gx-kicker, .gx-lead { display: none; }
  .gx-menu .gx-title { font-size: 1.9rem; }
  .gx-helpbtn { width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .gx-helpbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gx-cards:not(.gx-grid) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gx-cards:not(.gx-grid) .gx-card { flex-direction: row; align-items: center; border-radius: 12px; }
  .gx-cards:not(.gx-grid) .gx-thumb { width: 88px; flex: none; }
  .gx-cards:not(.gx-grid) .gx-num { left: 4px; top: 4px; min-width: 24px; height: 24px; font-size: .78rem; }
  .gx-cards:not(.gx-grid) .gx-num .gx-ico { width: 16px; height: 16px; }
  .gx-cards:not(.gx-grid) .gx-cb { flex: 1; padding: 6px 10px; }
  .gx-go { display: none; }
  .gx-card:hover, .gx-card:focus-visible { transform: none; }
  .gx-foot { flex-direction: column; align-items: stretch; }
  .gx-opts { display: grid; grid-template-columns: 1fr 1fr; }
  .gx-tog { min-height: 40px; padding: 2px 8px 2px 6px; font-size: .82rem; gap: 6px; }
  .gx-keys { text-align: left; }
  .gx-dl { grid-template-columns: 1fr 1fr; gap: 6px; }
  .gx-di { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "d"; padding: 7px 9px; }
  .gx-keys { display: none; }
  .gx-pict { display: none; }
  .gx-di dd { font-size: .78rem; line-height: 1.33; }
  .gx-di dt { font-size: .84rem; }
  .gx-help .gx-panel { padding: 12px 14px; }
}
/* niedrige Bühne (Handy quer, kleine Fenster) */
@container (max-height: 600px) {
  .gx-logo, .gx-menu .gx-kicker { display: none; }
  .gx-lead { display: none; }
  .gx-menu .gx-title { font-size: 2.2rem; }
  .gx-keys { display: none; }
  .gx-helpp { padding: 14px 18px; }
  .gx-di { padding: 7px 10px; }
  .gx-di dd { font-size: .8rem; line-height: 1.36; }
  .gx-result { padding: 14px 18px 16px; }
  .gx-rating { margin: 8px 0 2px; }
  .gx-stats { margin-top: 8px; }
  .gx-sv { font-size: 1.1rem; }
  .gx-actions { margin-top: 12px; gap: 8px; }
  .gx-btn { min-height: 42px; padding: 6px 16px 6px 13px; font-size: .9rem; }
}
@container (max-height: 440px) {
  .gx-menu { padding: 10px 14px; }
  .gx-meta { display: none; }
  .gx-name { font-size: .84rem; }
  .gx-cb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "r"; gap: 2px; }
  .gx-touchdev .sl-stage .gx-keys { display: none; }
  .gx-head { padding-right: 54px; }
  .gx-helpbtn { width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .gx-helpbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gx-mi { gap: 8px; }
  .gx-menu .gx-title { font-size: 1.7rem; }
  .gx-head { align-items: center; }
  .gx-cb { padding: 5px 9px 7px; }
  .gx-name { font-size: .86rem; }
  .gx-meta { font-size: .72rem; }
  .gx-tog { min-height: 36px; font-size: .82rem; }
  .gx-btn { min-height: 38px; }
  .gx-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .gx-pict { display: none; }
  .gx-di { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "d"; padding: 6px 8px; }
  .gx-di dd { font-size: .74rem; line-height: 1.3; }
  .gx-ph { margin-bottom: 8px; }
  .gx-ph .gx-t2 { font-size: 1.4rem; }
  .gx-result .gx-kicker { display: none; }
  .gx-sk { font-size: .64rem; }
  .gx-st { padding: 4px 8px; }
  .gx-dinfo { font-size: .8rem; margin-top: 6px; }
  .gx-banner { top: 50px; padding: 6px 16px 7px; }
  .gx-bt { font-size: 1.1rem; }
}
/* kleine Bühnen: Bedienung kompakt, Überschrift und Text in einer Zeile */
@container (max-height: 440px) {
  .gx-di { display: block; font-size: .76rem; line-height: 1.32; }
  .gx-di dt, .gx-di dd { display: inline; font-size: inherit; line-height: inherit; }
  .gx-di dt::after { content: ": "; }
}
@container (max-width: 640px) and (orientation: portrait) {
  .gx-di { display: block; font-size: .78rem; line-height: 1.34; padding: 6px 8px; }
  .gx-di dt, .gx-di dd { display: inline; font-size: inherit; line-height: inherit; }
  .gx-di dt::after { content: ": "; }
  .gx-dl { gap: 5px; }
  .gx-ph { margin-bottom: 8px; }
}
.gx-touchdev .sl-stage .gx-di.gx-t { display: grid; }
@container (max-height: 440px) { .gx-touchdev .sl-stage .gx-di.gx-t { display: block; } }
@container (max-width: 640px) and (orientation: portrait) { .gx-touchdev .sl-stage .gx-di.gx-t { display: block; } }
/* Ergebnis auf kleinen Bühnen */
@container (max-width: 640px) and (orientation: portrait) {
  .gx-result { padding: 14px 12px; }
  .gx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .gx-st { padding: 5px 4px; }
  .gx-sk { font-size: .62rem; letter-spacing: .04em; }
  .gx-sv { font-size: .98rem; }
  .gx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
  .gx-actions .gx-btn { min-height: 42px; padding: 6px 10px; font-size: .86rem; white-space: normal; line-height: 1.2; }
  .gx-stack.gx-actions { display: flex; }
  .gx-rs { width: 40px; height: 40px; }
}
@container (max-height: 440px) {
  .gx-stats { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; margin-top: 6px; }
  .gx-badge { margin: 2px 0; padding: 2px 10px; font-size: .7rem; }
  .gx-result .gx-t2 { font-size: 1.5rem; }
  .gx-rating { margin: 4px 0 0; }
}
@container (max-height: 360px) {
  .gx-rating { display: none; }
  .gx-di { font-size: .72rem; line-height: 1.28; padding: 5px 8px; }
  .gx-helpp { padding: 10px 14px; }
  .gx-ph .gx-t2 { font-size: 1.25rem; }
  .gx-ph .gx-btn { min-height: 36px; }
}

/* Sternlauf: Ergänzungen (Hülle und Menü stehen im gemeinsamen Abschnitt) */

/* Sternsprung: Ergänzungen (Hülle und Menü stehen im gemeinsamen Abschnitt) */
/* Levelkarten: vier Welten nebeneinander, je drei Level untereinander, Vorschaubild links */
.gx-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4cqw, 18px); }
.gx-world { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gx-wn { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gx-row { flex-direction: row; align-items: center; border-radius: 12px; }
.gx-row .gx-thumb { width: 44%; flex: none; }
.gx-row .gx-num { left: 5px; top: 5px; min-width: 24px; height: 24px; font-size: .78rem; }
.gx-row .gx-cb { flex: 1; min-width: 0; padding: 6px 10px; grid-template-areas: "n" "m" "r"; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.gx-row .gx-go { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.gx-row .gx-go .gx-ico { width: 14px; height: 14px; }
.gx-row .gx-name { font-size: .9rem; }
.gx-row .gx-meta { font-size: .74rem; }
.gx-row .gx-ms { width: 12px; height: 12px; }
.gx-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.gx-runbest { font-size: .85rem; color: var(--on-night-2); }
.gx-runbest:empty { display: none; }
@container (max-height: 600px) {
  .gx-row .gx-meta { display: none; }
  .gx-run { margin-top: 8px; }
}
@container (max-height: 440px) {
  .gx-wn { font-size: .66rem; }
  .gx-row .gx-cb { padding: 4px 8px; }
  .gx-row .gx-name { font-size: .8rem; }
  .gx-runbest { display: none; }
  .gx-run .gx-btn { min-height: 36px; }
}
@container (max-width: 640px) and (orientation: portrait) {
  .gx-worlds { gap: 6px; }
  .gx-wn { font-size: .6rem; letter-spacing: .02em; text-align: center; white-space: normal; line-height: 1.15; }
  .gx-row { flex-direction: column; align-items: stretch; }
  .gx-row .gx-thumb { width: 100%; }
  .gx-row .gx-cb { padding: 3px 4px 4px; }
  .gx-row .gx-name, .gx-row .gx-meta { display: none; }
  .gx-row .gx-rate { justify-content: center; }
  .gx-row .gx-ms { width: 10px; height: 10px; }
  .gx-row .gx-num { left: 3px; top: 3px; min-width: 20px; height: 20px; font-size: .7rem; border-width: 1px; }
  .gx-long { display: none; }
  .gx-run { margin-top: 8px; }
  .gx-run .gx-btn { flex: 1 1 100%; }
}

/* Abdunkeln zum Rand (über dem Spiel, unter den Knöpfen) */
.sp-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .3) 100%); }

/* Steuerung mit dem Finger: Steuerkreuz links (zwei Hälften, Gleiten wechselt die Richtung), Sprungknopf rechts.
   Die Flächen zeigen nur, wo die Daumen liegen; gegriffen wird auf der ganzen linken bzw. rechten Hälfte der Bühne. */
.sp-touch { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sp-touch[hidden] { display: none; }
.sp-pad, .sp-jb { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border: 2px solid rgba(230, 238, 248, .6); background: rgba(14, 29, 51, .4); color: #fff; }
.sp-pad { left: calc(16px + env(safe-area-inset-left, 0px)); width: 176px; height: 76px; border-radius: 38px; display: flex; overflow: hidden; }
.sp-pad::after { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; border-left: 1.5px solid rgba(230, 238, 248, .45); }
.sp-pl, .sp-pr { flex: 1; display: grid; place-items: center; }
.sp-jb { right: calc(16px + env(safe-area-inset-right, 0px)); width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; }
.sp-touch svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sp-pl.on, .sp-pr.on, .sp-jb.on { background: rgba(42, 108, 180, .9); }
.sp-jb.on { border-color: #fff; }
/* Querformat mit Fingern: Steuerung in schmalen Rändern links und rechts neben dem Spielfeld */
.sp-land .sp-pad, .sp-land .sp-jb { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(14, 29, 51, .28); border-color: rgba(230, 238, 248, .5); }
.sp-land .sp-pad { left: calc(8px + env(safe-area-inset-left, 0px)); width: 104px; height: 60px; }
.sp-land .sp-jb { right: calc(8px + env(safe-area-inset-right, 0px)); width: 74px; height: 74px; }
.sp-land .sp-touch svg { width: 28px; height: 28px; }

/* Sternfahrt: Ergänzungen (Hülle und Menü stehen im gemeinsamen Abschnitt) */
.sf-stage { background: #0E1D33; }
.sf-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.sf-gl:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--blue); }
.sf-nogl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 32px; border-radius: 0; }
.sf-nogl p { max-width: 34rem; margin: 0; }
.sf-fade { position: absolute; inset: 0; background: #0E1D33; opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 1; }
.sf-fade.on { opacity: 1; }

/* Medaillen auf den Karten: vier Punkte, der vierte (Sebastian) leuchtet */
.sf-md { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(230, 238, 248, .55); }
.sf-md.on { background: #fff; border-color: #fff; }
.sf-md-a.on { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 6px var(--glow); }
.gx-card .gx-rate { gap: 3px; align-items: center; }

/* Anzeige während der Fahrt: Leisten wie in der Hülle */
.sf-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; color: #fff; font-variant-numeric: tabular-nums; }
.sf-hud[hidden] { display: none; }
.sf-trk, .sf-timebox, .sf-split-t, .sf-split-d, .sf-msg, .sf-lights, .sf-rlabel { background: rgba(14, 29, 51, .76); border: 1px solid rgba(139, 190, 242, .4); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8); }
.sf-trk { position: absolute; top: 10px; left: 12px; padding: 6px 16px; border-radius: 20px; display: grid; line-height: 1.3; }
.sf-trk-name { font-weight: 600; font-size: .92rem; }
.sf-target { font-size: .78rem; color: var(--on-night-2); }
.sf-timebox { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; padding: 4px 22px 6px; border-radius: 22px; }
.sf-time { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
.sf-cp { font-size: .78rem; color: var(--on-night-2); }
/* Rundtacho mit Boost-Ring */
.sf-speed { position: absolute; right: 14px; bottom: 12px; width: 132px; height: 132px; display: grid; place-content: center; text-align: center; line-height: 1; }
.sf-speed::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: rgba(14, 29, 51, .78); border: 1px solid rgba(139, 190, 242, .35); }
.sf-speed svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sf-speed b { position: relative; display: block; font-size: 2rem; font-weight: 700; }
.sf-speed span { position: relative; display: block; margin-top: 4px; font-size: .74rem; color: var(--on-night-2); }
.sf-arc-bg, .sf-arc, .sf-boost-arc { fill: none; stroke-linecap: round; }
.sf-arc-bg { stroke: rgba(230, 238, 248, .2); stroke-width: 6; }
.sf-arc { stroke: var(--glow); stroke-width: 6; filter: drop-shadow(0 0 4px rgba(139, 190, 242, .8)); }
.sf-boost-arc { stroke: #fff; stroke-width: 3; }
.sf-ticks line { stroke: rgba(230, 238, 248, .5); stroke-width: 1.5; }
/* Mini-Karte, Startampel, Namensschilder, Wiederholung */
.sf-vig { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 75% 70% at 50% 52%, rgba(5, 12, 24, 0) 55%, rgba(5, 12, 24, .5) 100%); }
.sf-map { position: absolute; left: 12px; top: 72px; width: 150px; height: 150px; border-radius: 18px; background: rgba(14, 29, 51, .55); border: 1px solid rgba(139, 190, 242, .3); }
.sf-narrow .sf-map, .sf-replay .sf-map, .sf-replay .sf-trk { display: none; }
.sf-lights { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 8px 14px; border-radius: 22px; }
.sf-lights[hidden] { display: none; }
.sf-lights i { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(230, 238, 248, .55); }
.sf-lights i.on { background: #fff; border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .9); }
.sf-lights i.go { background: var(--glow); border-color: #fff; box-shadow: 0 0 16px var(--glow); }
.sf-tag { position: absolute; left: 0; top: 0; padding: 2px 9px; border-radius: 999px; background: rgba(14, 29, 51, .72); border: 1px solid rgba(139, 190, 242, .65); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; will-change: transform; }
.sf-tag[hidden] { display: none; }
.sf-tag-a { color: var(--glow); }
.sf-rlabel { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sf-rlabel[hidden] { display: none; }
.sf-rdot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: sf-blink 1.2s steps(2, start) infinite; }
@keyframes sf-blink { to { opacity: .2; } }
.sf-rbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; z-index: 3; }
.sf-rbar[hidden] { display: none; }
.sf-rbar .gx-sec[aria-pressed="true"] { background: rgba(139, 190, 242, .3); box-shadow: inset 0 0 0 1.5px #fff; }
.sf-replay .sf-speed { right: 14px; bottom: 70px; }
@media (prefers-reduced-motion: reduce) { .sf-rdot { animation: none; } }
.sf-split { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.sf-split[hidden] { display: none; }
.sf-split-t { padding: 6px 16px; border-radius: 18px; font-size: 1.3rem; font-weight: 700; }
.sf-split-d { padding: 6px 16px; border-radius: 18px; font-size: 1.3rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, .85); }
.sf-split-d:empty { display: none; }
.sf-split.faster .sf-split-d { background: var(--blue); border-color: #fff; }
.sf-count { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(3rem, 17cqh, 7rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-shadow: 0 0 34px rgba(139, 190, 242, .9), 0 6px 26px rgba(0, 0, 0, .55); }
.sf-count[hidden], .sf-msg[hidden] { display: none; }
.sf-count.pop { animation: sf-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sf-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.sf-msg { position: absolute; top: 58%; left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 20px; font-weight: 600; max-width: calc(100% - 40px); text-align: center; }

/* Ziel: große Zeit, vier Medaillen */
.sf-done-time { margin: 6px 0 10px; font-size: clamp(2rem, 6cqh, 2.8rem); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gx-done .gx-rating:has(.sf-done-time) { display: block; }
.sf-medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sf-medal { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 12px; border: 1px solid rgba(139, 190, 242, .25); background: rgba(139, 190, 242, .05); color: var(--on-night-2); font-size: .78rem; line-height: 1.3; }
.sf-medal.on { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(139, 190, 242, .12); }
.sf-mi { width: 30px; height: 30px; margin-bottom: 3px; }
.sf-mi circle { fill: none; stroke: rgba(230, 238, 248, .5); stroke-width: 1.5; }
.sf-mi path { fill: rgba(230, 238, 248, .35); }
.sf-medal.on .sf-mi circle { fill: #fff; stroke: #fff; }
.sf-medal.on .sf-mi path { fill: #0E1D33; }
.sf-medal.sf-auth.on .sf-mi circle { fill: var(--glow); stroke: #fff; }
.sf-medal.sf-auth.on .sf-mi { filter: drop-shadow(0 0 8px var(--glow)); }
.sf-mn { font-weight: 600; }
.sf-mt { font-variant-numeric: tabular-nums; }
.gx-in.gx-done .sf-medal.on .sf-mi { animation: gx-pop .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 150ms + 300ms); }
@media (prefers-reduced-motion: reduce) { .gx-in.gx-done .sf-medal.on .sf-mi { animation: none; } }
@container (max-height: 600px) {
  .sf-done-time { font-size: 1.8rem; margin: 2px 0 6px; }
  .sf-medal { padding: 4px 3px; font-size: .72rem; }
  .sf-mi { width: 22px; height: 22px; margin: 0; }
}
@container (max-height: 440px) {
  .sf-done-time { font-size: 1.45rem; margin: 0 0 4px; }
  .sf-mt { display: none; }
}

/* Knöpfe zum Tippen */
.sf-touch { position: absolute; inset: auto 0 0 0; height: 0; z-index: 3; pointer-events: none; }
.sf-touch[hidden] { display: none; }
.sf-tb {
  position: absolute; bottom: 14px; width: 74px; height: 74px; border-radius: 50%; padding: 0; pointer-events: auto;
  border: 2px solid rgba(230, 238, 248, .7); background: rgba(14, 29, 51, .5); color: #fff;
  display: grid; place-items: center; touch-action: none; cursor: pointer;
}
.sf-tb svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-tb.on { background: var(--blue); border-color: #fff; }
.sf-left { left: 14px; } .sf-right { left: 100px; }
.sf-gas { right: 14px; width: 92px; height: 92px; } .sf-brake { right: 118px; }

@container (max-width: 640px) {
  .sf-trk { display: none; }
  .sf-split { top: 20%; }
  .sf-split-t, .sf-split-d { font-size: 1.05rem; padding: 4px 10px; }
  .sf-tb { width: 64px; height: 64px; } .sf-right { left: 88px; } .sf-gas { width: 80px; height: 80px; } .sf-brake { right: 102px; }
  .sf-medals { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .sf-fade { transition: none; } }
.sf-narrow .sf-timebox { left: 12px; transform: none; text-align: left; padding: 4px 14px 6px; }
.sf-narrow .sf-speed { right: 8px; top: 62px; bottom: auto; width: 92px; height: 92px; }
.sf-narrow .sf-speed b { font-size: 1.35rem; }
.sf-narrow .sf-speed span { font-size: .66rem; }
.sf-narrow .sf-lights { top: 76px; }
.sf-touchdev .sf-stage:not(.sf-narrow):not(.sf-replay) .sf-speed { right: 10px; top: 60px; bottom: auto; width: 104px; height: 104px; }
.sf-touchdev .sf-stage:not(.sf-narrow):not(.sf-replay) .sf-speed b { font-size: 1.5rem; }
@container (max-height: 440px) {
  .sf-map { width: 112px; height: 112px; top: 62px; border-radius: 14px; }
}
.sf-narrow.sf-replay .sf-timebox { top: 50px; }
.sf-narrow .sf-rbar { flex-wrap: nowrap; gap: 8px; width: calc(100% - 24px); }
.sf-narrow .sf-rbar .gx-btn { min-height: 44px; padding: 8px 14px; font-size: .88rem; }

/* Sternwacht: Ergänzungen (Hülle und Menü stehen im gemeinsamen Abschnitt; K, 09.10.2026) */
@media (max-width: 700px) { #sternwacht .sl-poster { aspect-ratio: 9 / 16; } }
.sw-n2 { --n: 2; max-width: 660px; }
/* Menü: die Vorführung bleibt im Hintergrund, nur oben rechts (Leitstern) etwas heller */
.sw-stage .gx-menu {
  background:
    linear-gradient(90deg, rgba(14, 29, 51, .93) 0%, rgba(14, 29, 51, .8) 36%, rgba(14, 29, 51, .45) 68%, rgba(14, 29, 51, .3) 100%),
    linear-gradient(180deg, rgba(14, 29, 51, .25) 0%, rgba(14, 29, 51, 0) 28%, rgba(14, 29, 51, .6) 62%, rgba(14, 29, 51, .96) 100%);
}
@container (max-width: 640px) and (orientation: portrait) {
  .sw-sub { display: none; }
  .sw-stage .gx-menu { background: linear-gradient(180deg, rgba(14, 29, 51, .95) 0, rgba(14, 29, 51, .7) 14%, rgba(14, 29, 51, .5) 40%, rgba(14, 29, 51, .94) 72%); }
}
/* Handy hochkant: die Karte dreht sich mit, deshalb darf die Bühne höher sein */
@media (max-width: 700px) { .sw-stage { aspect-ratio: 9 / 16; } }
.sw-stage .gx-banner { top: calc(var(--hud, 56px) + 8px); }
.sw-stage.sl-playing { cursor: default; }
.sw-stage.sw-onpad .sl-canvas { cursor: pointer; }

/* Leiste oben: Welle, Funken, Licht, Zeit und die Knöpfe fürs Spiel */
.sw-hud { position: absolute; z-index: 2; top: 10px; left: 12px; right: 118px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; color: #fff; font-variant-numeric: tabular-nums; }
.sw-hud[hidden] { display: none; }
.sw-hud > * { pointer-events: auto; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sw-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 14px 4px 10px; border-radius: 999px; background: rgba(14, 29, 51, .82); border: 1px solid rgba(139, 190, 242, .4); font-size: .9rem; line-height: 1.1; }
.sw-chip .gx-ico { width: 18px; height: 18px; color: var(--glow); stroke-width: 2; }
.sw-k { color: var(--on-night-2); font-size: .78rem; }
.sw-v { font-weight: 700; font-size: 1.02rem; min-width: 2ch; }
.sw-hurt { animation: sw-hurt .7s ease both; }
@keyframes sw-hurt { 0%, 55% { background: #fff; border-color: #fff; color: #0E1D33; } 100% { background: rgba(14, 29, 51, .82); } }
.sw-hurt .sw-k, .sw-hurt .gx-ico { animation: sw-hurt-k .7s ease both; }
@keyframes sw-hurt-k { 0%, 55% { color: #0E1D33; } }
.sw-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 16px 6px 12px; border-radius: 999px;
  border: 1px solid rgba(230, 238, 248, .55); background: rgba(14, 29, 51, .84); color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.sw-btn > * { position: relative; }
.sw-btn .gx-ico { width: 18px; height: 18px; }
.sw-btn:hover { background: var(--blue-deep); border-color: #fff; }
.sw-go { background: var(--blue); border-color: rgba(255, 255, 255, .75); }
.sw-btn[aria-disabled="true"] { cursor: default; color: var(--on-night-2); border-color: rgba(139, 190, 242, .3); background: rgba(14, 29, 51, .78); }
.sw-go.sw-call { animation: sw-call 1.8s ease-out infinite; }
@keyframes sw-call { 0% { box-shadow: 0 0 0 0 rgba(139, 190, 242, .75); } 100% { box-shadow: 0 0 0 14px rgba(139, 190, 242, 0); } }
.sw-bonus { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .78rem; }
.sw-fast { padding: 6px 15px; }
.sw-fast[aria-pressed="true"] { background: #fff; color: #0E1D33; border-color: #fff; }
.sw-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--c, 0) * 100%); background: rgba(42, 108, 180, .5); transition: width .3s linear; }
.sw-ab.sw-ready .sw-fill { display: none; }
.sw-ab.sw-ready { background: var(--blue); border-color: #fff; box-shadow: 0 0 18px -2px rgba(139, 190, 242, .85); }
.sw-ab.sw-ready[aria-disabled="true"] { color: #fff; }

/* Turm-Menü am Bauplatz */
.sw-tm {
  position: absolute; z-index: 2; left: 0; top: 0; width: min(300px, calc(100% - 16px)); padding: 8px 10px 10px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #13253D, #0E1D33); border: 1px solid rgba(139, 190, 242, .5); box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .9); color: #fff;
}
.sw-tm[hidden] { display: none; }
.sw-tmh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sw-tmt { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sw-tmd { margin: 0 0 8px; font-size: .8rem; line-height: 1.4; color: var(--on-night-2); padding-right: 6px; }
.sw-close { flex: none; width: 40px; height: 40px; margin-right: -4px; border-radius: 50%; border: 0; background: transparent; color: var(--on-night); display: grid; place-items: center; cursor: pointer; padding: 0; }
.sw-close:hover { background: rgba(42, 108, 180, .45); }
.sw-close .gx-ico { width: 18px; height: 18px; }
.sw-tmb { display: grid; gap: 6px; }
.sw-opt {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 46px; padding: 6px 10px; border-radius: 12px;
  border: 1px solid rgba(139, 190, 242, .38); background: rgba(139, 190, 242, .08); color: #fff; font: inherit; font-size: .88rem; line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sw-opt:hover { background: rgba(42, 108, 180, .5); border-color: var(--glow); }
.sw-opt > .gx-ico { width: 24px; height: 24px; color: var(--glow); stroke-width: 1.9; }
.sw-on { font-weight: 600; min-width: 0; }
.sw-od { display: block; font-size: .74rem; font-weight: 400; color: var(--on-night-2); }
.sw-cost { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-cost .gx-ico { width: 14px; height: 14px; }
.sw-opt[aria-disabled="true"] { cursor: default; color: var(--on-night-2); background: rgba(14, 29, 51, .55); border-color: rgba(139, 190, 242, .2); }
.sw-opt[aria-disabled="true"] > .gx-ico { color: var(--on-night-2); }
.sw-max { margin: 0; padding: 8px 10px; border-radius: 12px; border: 1px dashed rgba(139, 190, 242, .35); font-size: .82rem; color: var(--on-night-2); }

/* Hinweis vor der ersten Welle */
.sw-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 8px 16px;
  border-radius: 16px; background: rgba(14, 29, 51, .9); border: 1px solid rgba(139, 190, 242, .5); color: #fff; font-size: .88rem; line-height: 1.4; text-align: center; pointer-events: none;
}
.sw-hint[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sw-hurt, .sw-hurt .sw-k, .sw-hurt .gx-ico { animation-duration: .01s; }
  .sw-go.sw-call { animation: none; }
  .sw-fill { transition: none; }
}
/* schmale Bühne: Leiste in zwei Zeilen, kurze Beschriftungen */
@container (max-width: 700px) {
  .sw-hud { right: 12px; }
  .sw-chips { width: calc(100% - 108px); }
  .sw-acts { width: 100%; }
  .sw-k, .sw-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sw-chip { padding: 4px 10px 4px 8px; gap: 5px; }
  .sw-chip.sw-time { display: none; }
  .sw-btn { padding: 6px 13px 6px 10px; }
}
@container (max-width: 420px) {
  .sw-tmd { display: none; }
  .sw-tmh { margin-bottom: 4px; }
}
@container (max-width: 380px) {
  .sw-chip { padding: 3px 8px 3px 6px; min-height: 36px; }
  .sw-chip .gx-ico { width: 15px; height: 15px; }
  .sw-v { font-size: .94rem; }
  .sw-btn { font-size: .84rem; }
}
@container (max-height: 440px) {
  .sw-chip { min-height: 36px; }
  .sw-btn { min-height: 40px; }
  .sw-k, .sw-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sw-od, .sw-tmd { display: none; }
  .sw-tmh { margin-bottom: 4px; }
  .sw-opt { min-height: 40px; }
}

/* Sternpfeil: Ergänzungen (Hülle und Menü stehen im gemeinsamen Abschnitt; K, 11.10.2026) */
/* Abdunkeln zum Rand (über dem Spiel, unter den Knöpfen) */
.st-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .28) 100%); }
/* Steuerung mit dem Finger: Steuerkreuz links (zwei Hälften, Gleiten wechselt die Richtung), rechts Bogen und Sprung.
   Die Flächen zeigen nur, wo die Daumen liegen; gegriffen wird auf der ganzen linken bzw. rechten Hälfte der Bühne. */
.st-touch { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.st-touch[hidden] { display: none; }
.st-pad, .st-jb, .st-sb { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border: 2px solid rgba(230, 238, 248, .6); background: rgba(14, 29, 51, .4); color: #fff; }
.st-pad { left: calc(16px + env(safe-area-inset-left, 0px)); width: 176px; height: 76px; border-radius: 38px; display: flex; overflow: hidden; }
.st-pad::after { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; border-left: 1.5px solid rgba(230, 238, 248, .45); }
.st-pl, .st-pr { flex: 1; display: grid; place-items: center; }
.st-jb { right: calc(16px + env(safe-area-inset-right, 0px)); width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; }
.st-sb { right: calc(118px + env(safe-area-inset-right, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.st-touch svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st-sb svg { width: 30px; height: 30px; }
.st-pl.on, .st-pr.on, .st-jb.on, .st-sb.on { background: rgba(42, 108, 180, .9); }
.st-jb.on, .st-sb.on { border-color: #fff; }
/* Querformat mit Fingern: kleinere, blassere Knöpfe in den unteren Ecken */
.st-land .st-pad, .st-land .st-jb, .st-land .st-sb { background: rgba(14, 29, 51, .28); border-color: rgba(230, 238, 248, .5); }
.st-land .st-pad { left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 128px; height: 60px; }
.st-land .st-jb { right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 72px; height: 72px; }
.st-land .st-sb { right: calc(92px + env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; }
.st-land .st-touch svg { width: 26px; height: 26px; }
/* schmale Bühne hochkant: Knöpfe etwas kleiner, damit nichts überlappt */
@container (max-width: 420px) {
  .st-pad { left: calc(12px + env(safe-area-inset-left, 0px)); width: 136px; height: 68px; }
  .st-jb { right: calc(12px + env(safe-area-inset-right, 0px)); width: 80px; height: 80px; }
  .st-sb { right: calc(104px + env(safe-area-inset-right, 0px)); bottom: calc(34px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; }
}

/* Standortseiten /herne/ und /bochum/ (Plan KI-Sichtbarkeit 2.2) */
.so-quotes { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s5); }
.so-quote { margin: 0; height: 100%; padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.so-quote blockquote { margin: 0 0 var(--s3); }
.so-quote figcaption { color: var(--muted); font-size: .95rem; }
.so-offen { display: grid; gap: var(--s3); }
.so-more p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.so-side { display: grid; gap: var(--s5); align-content: start; }
.so-more .actions { margin-top: 0; }