/* =====================================================================
   Beratungsstelle für Gehörlose · Design nach Figma-Entwurf
   Helvetica, Grün #72C167 / Blau #44C3D3, helle Flächen #DCEFF5 / #E0F3D9
   ===================================================================== */

:root {
  --paper: #FDFDFD;
  --white: #FFFFFF;
  --ink: #3C3C3C;
  --text: #1E1E1E;
  --muted: #555B5E;
  --sky: #DCEFF5;
  --sky-2: #EEF8FB;
  --lagoon: #44C3D3;
  --lagoon-ink: #0E6E7A;
  --play: #1C9DAF;
  --deep: #0B2E35;
  --meadow: #E0F3D9;
  --meadow-2: #F2FAEF;
  --leaf: #72C167;
  --leaf-ink: #2E6B26;
  --field: #ECEDED;
  --line: #E4EAEC;
  --focus: #0B2E35;
  --halo: rgba(68, 195, 211, .5);
  --error: #B42318;
  --error-bg: #FDECEA;

  --font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --fs: 1.0625rem;
  --lh: 1.7;
  --ls: 0;
  --ws: 0;

  --header-h: 96px;
  --bar-h: 58px;
  --logo-w: 176px;
  --maxw: 1260px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec: clamp(3.5rem, 7vw, 7rem);
  --r: 30px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #10181A; --white: #172124; --ink: #EDF2F3; --text: #DCE4E6; --muted: #A9B6B9;
  --sky: #1D3A41; --sky-2: #142A2F; --lagoon: #4FCADA; --lagoon-ink: #8ADDE7; --play: #1C9DAF; --deep: #031417;
  --meadow: #22402A; --meadow-2: #16281A; --leaf: #7DCB72; --leaf-ink: #A9DFA1;
  --field: #1F2B2E; --line: #27383C; --focus: #FFD84D; --halo: rgba(255, 216, 77, .35);
  --error: #FF8A80; --error-bg: #3A1A18;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --paper: #10181A; --white: #172124; --ink: #EDF2F3; --text: #DCE4E6; --muted: #A9B6B9;
    --sky: #1D3A41; --sky-2: #142A2F; --lagoon: #4FCADA; --lagoon-ink: #8ADDE7; --play: #1C9DAF; --deep: #031417;
    --meadow: #22402A; --meadow-2: #16281A; --leaf: #7DCB72; --leaf-ink: #A9DFA1;
    --field: #1F2B2E; --line: #27383C; --focus: #FFD84D; --halo: rgba(255, 216, 77, .35);
    --error: #FF8A80; --error-bg: #3A1A18;
    color-scheme: dark;
  }
}
:root[data-contrast="high"] {
  --paper: #FFF; --white: #FFF; --ink: #000; --text: #000; --muted: #000;
  --sky: #FFF; --sky-2: #FFF; --meadow: #FFF; --meadow-2: #FFF; --lagoon: #00454D; --lagoon-ink: #00454D;
  --leaf: #000; --leaf-ink: #000; --field: #FFF; --line: #000; --focus: #000; --halo: #FFD400; --play: #00454D; --hc: #000;
}
:root[data-contrast="high"][data-theme="dark"] {
  --paper: #000; --white: #000; --ink: #FFF; --text: #FFF; --muted: #FFF;
  --sky: #000; --sky-2: #000; --meadow: #000; --meadow-2: #000; --lagoon: #7ADFEA; --lagoon-ink: #7ADFEA;
  --leaf: #FFF; --leaf-ink: #FFF; --field: #000; --line: #FFF; --focus: #FFD400; --hc: #FFF;
}
:root[data-spacing="wide"] { --lh: 2; --ls: .05em; --ws: .14em; }
:root[data-font="readable"] { --font: Verdana, "DejaVu Sans", Tahoma, sans-serif; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  font-size: calc(100% * var(--scale, 1));
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scroll-padding-bottom: calc(var(--bar-h) + 24px);
  scrollbar-gutter: stable;
}
html.is-locked { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font); font-size: var(--fs); line-height: var(--lh);
  letter-spacing: var(--ls); word-spacing: var(--ws);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
  transition: background-color .4s, color .4s;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; }
:root[data-spacing="wide"] :is(h1, h2, h3, h4) { line-height: 1.4; letter-spacing: .02em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; word-spacing: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--lagoon); color: var(--deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 8px var(--halo); }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), 1600px); margin-inline: auto; }
.list { list-style: none; margin: 0; padding: 0; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.text { max-width: 62ch; }
.muted { color: var(--muted); }
:root[data-links="on"] a:not(.btn):not(.brand) { text-decoration: underline !important; text-decoration-thickness: .12em !important; text-underline-offset: .2em; }

.skip-links a { position: fixed; z-index: 300; left: 12px; top: -200px; padding: .8rem 1.2rem; border-radius: 14px; background: var(--deep); color: #fff; font-weight: 700; text-decoration: none; }
.skip-links a:focus { top: 12px; }

/* ---------- Typografie ---------- */
.h1 { font-size: clamp(2rem, 1.25rem + 1.7vw, 2.8rem); line-height: 1.08; }
.h2 { font-size: clamp(1.8rem, 1.25rem + 1.35vw, 2.75rem); }
.h3 { font-size: clamp(1.25rem, 1.08rem + .45vw, 1.6rem); line-height: 1.2; }
.h-xl { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }
.kicker { font-style: italic; font-size: clamp(1.15rem, 1rem + .45vw, 1.6rem); color: var(--ink); line-height: 1.2; margin: 0; font-weight: 400; }

/* Markierungsbalken hinter Überschriften (wie im Figma) */
.hl { position: relative; isolation: isolate; width: fit-content; max-width: 100%; }
.hl::before {
  content: ""; position: absolute; z-index: -1;
  left: -.55em; right: -2.6em; bottom: -.42em; height: 1em;
  background: var(--hl-c, var(--sky));
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) .05s;
}
.hl--blue { --hl-c: var(--sky); }
.hl--green { --hl-c: var(--meadow); }
.hl--center { margin-inline: auto; text-align: center; }
.hl--center::before { left: -1.6em; right: -1.6em; transform-origin: center; }
.hl--tall::before { left: -3.2em; right: -3.2em; height: 2.1em; bottom: -1.65em; }
.hl--reach::before { right: -4.5em; }
.hl--edge-r::before { left: -2.4em; right: -100vw; }
.js-reveal .hl:not(.is-in)::before { transform: scaleX(0); }
:root[data-contrast="high"] .hl::before { background: var(--hc); height: 4px; bottom: -.3em; left: 0; right: 0; }

/* ---------- Knöpfe (Doppel-Pille aus dem Figma) ---------- */
.btn {
  --edge: var(--lagoon); --ring: var(--sky); --core: var(--white); --core-ink: var(--ink); --hover: var(--sky-2);
  position: relative; display: inline-flex; align-items: stretch; min-height: 46px; padding: 3px;
  border: 2px solid var(--edge); border-radius: 999px; background: var(--white); color: var(--core-ink);
  font-weight: 700; font-size: .9375rem; line-height: 1.15; text-decoration: none; text-align: center;
  transition: transform .2s var(--ease), border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn__in {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%;
  padding: .55em 1.9em; border-radius: 999px; background: var(--core);
  box-shadow: inset 0 0 0 1.5px var(--ring), inset 0 -3px 0 color-mix(in srgb, var(--ring) 85%, transparent);
  transition: background-color .3s var(--ease), color .3s;
}
.btn .ico { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.btn:hover .btn__in { background: var(--hover); }
.btn:hover .ico--arrow { transform: translateX(3px); }
.btn:hover .ico--dl { transform: translateY(2px); }
.btn:hover .ico--ext { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--green { --edge: var(--leaf); --ring: var(--meadow); --hover: var(--meadow-2); }
.btn--dark { --edge: var(--ink); --ring: var(--ink); --core: var(--ink); --core-ink: var(--paper); --hover: #000; }
.btn--lg { min-height: 54px; font-size: 1.0625rem; }
.btn--lg .btn__in { padding-inline: 2.2em; }
.btn--sm { min-height: 44px; font-size: .875rem; }
.btn--sm .btn__in { padding: .45em 1.4em; }
.btn--block { display: flex; width: 100%; }
:root[data-contrast="high"] .btn { --edge: var(--hc); border-width: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.textlink { display: inline-flex; align-items: center; gap: .4em; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; background: none; border: 0; padding: 0; min-height: 44px; }
.textlink:hover { color: var(--lagoon-ink); text-decoration-thickness: 2px; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--meadow);
  transition: height .45s var(--ease-out), box-shadow .4s, background-color .4s;
  view-transition-name: site-header;
}
.site-header.is-scrolled { --header-h: 76px; box-shadow: 0 12px 30px -26px rgba(11, 46, 53, .55); }
.header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 12px; padding-left: calc(var(--logo-w) + 24px); }
.brand { position: absolute; left: -4px; top: 8px; width: var(--logo-w); z-index: 2; display: block; border-radius: 40%; transform-origin: 0 0; transition: transform .5s var(--ease-out); }
.brand img { width: 100%; }
.site-header.is-scrolled .brand { transform: scale(.45); }
.nav-main { margin-left: auto; }
.nav-main__list { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-pill { display: flex; align-items: center; min-height: 46px; border: 2px solid var(--meadow); border-radius: 999px; background: var(--white); transition: border-color .25s, background-color .25s; }
.nav-item:hover .nav-pill, .nav-item.is-open .nav-pill { border-color: var(--leaf); }
.nav-item.is-current .nav-pill { border-color: var(--leaf); background: var(--meadow-2); }
.nav-link { display: flex; align-items: center; min-height: 42px; padding: .3rem .15rem .3rem 1.05rem; font-size: .875rem; line-height: 1.1; color: var(--ink); text-decoration: none; border-radius: 999px; }
.nav-link--two { display: grid; text-align: center; }
.nav-link--two span { white-space: nowrap; }
.nav-item.is-current .nav-link { font-weight: 700; }
.nav-toggle { display: grid; place-items: center; width: 36px; height: 42px; margin-right: 4px; background: none; border: 0; border-radius: 999px; color: var(--ink); }
.nav-toggle .ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.nav-item.is-open .nav-toggle .ico { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5; min-width: 100%; width: max-content; max-width: 280px;
  list-style: none; margin: 0; padding: 6px 10px; border-radius: 16px; background: var(--sky); text-align: center;
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-item.is-open .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .3s var(--ease-out); }
.nav-sub li + li { border-top: 1.5px solid var(--paper); }
.nav-sub a { display: flex; align-items: center; justify-content: center; gap: .4em; min-height: 42px; padding: .35rem .9rem; color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.2; border-radius: 10px; transition: background-color .2s; }
.nav-sub a:hover { background: color-mix(in srgb, var(--paper) 60%, transparent); }
.nav-sub a[aria-current="page"] { font-weight: 700; }
.nav-sub .ico { width: .9em; height: .9em; }
:root[data-contrast="high"] :is(.nav-pill, .nav-sub) { border: 2px solid var(--hc); }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: 4px; padding-left: 16px; border-left: 2px solid var(--meadow); height: 46px; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border: 2px solid var(--meadow); border-radius: 999px; background: var(--white); color: var(--ink); transition: border-color .25s, background-color .25s; }
.icon-btn:hover { border-color: var(--leaf); background: var(--meadow-2); }
.icon-btn .ico { width: 22px; height: 22px; }
:root[data-contrast="high"] .icon-btn { border-color: var(--hc); }
.menu-btn { display: none; }

/* ---------- Leiste unten ---------- */
.bottombar {
  position: fixed; inset: auto 0 0 0; z-index: 59; height: var(--bar-h);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 2px solid var(--meadow);
  view-transition-name: bottombar;
}
.bottombar__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 18px; }
.socials { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.social { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--leaf); color: var(--leaf-ink); background: var(--white); transition: background-color .25s, color .25s; }
.social::after { content: ""; position: absolute; inset: -6px; }
.social:hover { background: var(--leaf); color: #fff; }
.social .ico { width: 17px; height: 17px; }
.bar-address { display: flex; align-items: center; gap: .55em; margin: 0; font-size: .875rem; color: var(--ink); white-space: nowrap; }
.bar-address a { text-decoration: none; padding: .7rem 0; }
.bar-address a:hover { text-decoration: underline; text-underline-offset: .2em; }
.bar-sep { color: var(--muted); }
.bar-status { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 0 .3rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.status-dot { width: .6em; height: .6em; border-radius: 50%; background: #8A9599; flex: none; }
[data-open="true"] .status-dot { background: var(--leaf); }
.bar-actions { display: flex; gap: 12px; margin-left: auto; transform: translateY(calc(var(--bar-h) / -2)); }
.bar-actions .btn { min-height: 40px; font-size: .875rem; }
.bar-actions .btn .btn__in { padding: .38em 1.6em; min-width: 8.5em; }
.bar-mobile { display: none; }

/* Grüner Rand rechts = Lesefortschritt */
.rail { position: fixed; z-index: 58; right: 0; top: var(--header-h); bottom: var(--bar-h); width: 10px; background: var(--meadow); pointer-events: none; transition: top .45s var(--ease-out); }
.rail span { display: block; height: 100%; background: var(--leaf); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.site-header.is-scrolled ~ .rail { top: 76px; }

/* ---------- Seiten ---------- */
main { display: block; padding-top: 96px; outline: none; overflow-x: clip; }
.page.is-entering { animation: page-in .55s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .55); }
.section--flush-top { padding-top: 0; }
.sec-head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.4rem, 4.5vw, 4rem); }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .text { margin-inline: auto; }
.sec-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
.sec-head--split > :first-child { display: grid; gap: 1.6rem; }
.sec-head--trio { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(2rem, 6vw, 5rem); }
.sec-head--trio p { max-width: 42ch; font-size: .9375rem; }
.sec-head--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 6vw, 5rem); }
.sec-head--pair .hl::before { right: -1.2em; }
.sec-head--pair p { max-width: 46ch; font-size: .9375rem; }
.sec-head p { font-size: .9688rem; }

.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .75s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [media-start] minmax(0, calc(var(--maxw) * .5)) [media-end text-start] minmax(0, calc(var(--maxw) * .5)) [text-end] minmax(var(--gutter), 1fr) [full-end];
  min-height: max(560px, calc(100svh - 96px - var(--bar-h)));
}
.hero__media { grid-column: full-start / media-end; grid-row: 1; position: relative; min-width: 0; }
.hero__media > .media, .hero__media > .media > .media__box { height: 100%; }
.hero__media .media__frame { height: 100%; aspect-ratio: auto; border-radius: 0 var(--r) var(--r) 0; }
.hero__media .media__cap { position: absolute; right: 16px; bottom: 12px; margin: 0; padding: .1rem .65rem; border-radius: 999px; background: color-mix(in srgb, #fff 85%, transparent); color: #3C3C3C; }
.hero__text { grid-column: text-start / text-end; grid-row: 1; align-self: center; display: grid; gap: 1.2rem; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem); }
.hero__text p { max-width: 58ch; margin: 0; font-size: 1rem; }
.hero__text .h1 { margin-bottom: .5rem; }
.hero .media__frame { clip-path: inset(0 0 0 0 round 0 var(--r) var(--r) 0); transition: clip-path 1.2s var(--ease-out); }
.js-reveal .hero:not(.is-in) .media__frame { clip-path: inset(0 100% 0 0 round 0 var(--r) var(--r) 0); }
.hero__text > * { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(.3s + var(--d, 0) * .09s); }
.js-reveal .hero:not(.is-in) .hero__text > * { opacity: 0; transform: translateY(18px); }
.js-reveal .hero:not(.is-in) .play { opacity: 0; transform: scale(.7); }
.hero .play { transition: opacity .6s .8s, transform .7s var(--ease-out) .8s, box-shadow .3s; }

/* ---------- Bilder ---------- */
.media { margin: 0; position: relative; min-width: 0; }
.media__box { position: relative; }
.media__frame { position: relative; overflow: hidden; border-radius: var(--rr, 22px); aspect-ratio: var(--ar, 16 / 10); background: var(--sky-2); }
.media__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media__cap { margin: .5rem 0 0; text-align: right; font-size: .8125rem; color: var(--muted); }
:root[data-contrast="high"] .media__frame { outline: 3px solid var(--hc); }

/* Playbutton = Video in Gebärdensprache (Symbol aus dem Figma) */
.play {
  --s: 128px;
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--s); height: var(--s); padding: 0; border-radius: 50%;
  border: calc(var(--s) * .065) solid #fff; background: var(--play); color: #fff;
  box-shadow: 0 14px 34px -14px rgba(11, 46, 53, .65);
  transition: transform .35s var(--ease), box-shadow .3s;
}
.play svg { width: 100%; height: 100%; }
.play:hover { transform: scale(1.06); box-shadow: 0 18px 40px -14px rgba(11, 46, 53, .75); }
.play__label {
  position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; z-index: 4;
  padding: .4rem .85rem; border-radius: 999px; background: var(--deep); color: #fff;
  font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--ease-out);
}
.play:hover .play__label, .play:focus-visible .play__label { opacity: 1; transform: none; }
.play--md { --s: 96px; }
.play--sm { --s: 76px; }
.play--corner { left: auto; top: auto; right: -14px; bottom: -14px; translate: none; }
.play--corner .play__label { left: auto; right: 0; translate: none; }
:root[data-contrast="high"] .play { border-color: var(--hc); }

/* Leerer Videorahmen (Platz für das Gebärdenvideo) */
.vframe { position: relative; border: 2px solid var(--sky); border-radius: 26px; background: var(--white); aspect-ratio: var(--ar, 4 / 3); }
:root[data-contrast="high"] .vframe { border-color: var(--hc); }

/* ---------- Karten ---------- */
.card { position: relative; background: var(--white); border: 2px solid var(--cb, var(--sky)); border-radius: var(--r); }
.card--green { --cb: var(--meadow); }
:root[data-contrast="high"] .card { --cb: var(--hc) !important; }

/* Seit 2001 */
.since { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 2rem); align-items: start; }
.since__intro { display: grid; gap: 1.4rem; align-content: start; justify-items: start; padding-top: 2.6rem; }
.since__intro p { font-size: .9688rem; }
.since__stats { display: grid; gap: 12px; }
.since__stand { justify-self: end; font-size: .875rem; margin: 0 .4rem -.2rem 0; }
.stat { display: grid; grid-template-columns: minmax(8.5em, auto) minmax(0, 1fr); gap: 1rem 2.4rem; align-items: center; padding: 1.7rem clamp(1.4rem, 3vw, 2.6rem); }
.stat__num { margin: 0; font-size: clamp(1.4rem, 1.15rem + .7vw, 1.75rem); font-weight: 700; color: var(--ink); line-height: 1.1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat p:last-child { font-size: .9375rem; }

/* Zeilen (Ziele, Zielgruppen) */
.rows { display: grid; gap: 14px; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; }
.row { display: grid; place-items: center; align-content: center; min-height: 86px; padding: 1rem 2rem; text-align: center; border: 2px solid var(--sky); border-radius: var(--r); background: var(--white); transition: border-color .3s, background-color .3s; }
.row--green { border-color: var(--meadow); }
.row:hover { background: var(--sky-2); }
.row--green:hover { background: var(--meadow-2); }
.row__t { display: block; font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); font-weight: 700; color: var(--ink); line-height: 1.25; }
.row__s { display: block; font-size: .875rem; color: var(--muted); margin-top: .15rem; }
:root[data-contrast="high"] .row { border-color: var(--hc); }

/* Angebote */
.offers { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin-inline: auto; }
.offer { display: grid; align-content: center; justify-items: start; gap: 1rem; min-height: 320px; padding: clamp(1.8rem, 4vw, 3.2rem); transition: border-color .3s, transform .5s var(--ease-out); }
.offer:hover { border-color: var(--lagoon); transform: translateY(-3px); }
.offer p { font-size: .9688rem; max-width: 40ch; margin: 0 0 .4rem; }

/* Bereiche (Kacheln) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; }
.tile { display: grid; align-content: center; gap: .7rem; min-height: 250px; padding: clamp(1.8rem, 4vw, 3.2rem); transition: border-color .3s; }
.tile:hover { border-color: var(--lagoon); }
.tile.card--green:hover { border-color: var(--leaf); }
.tile p { font-size: .9688rem; max-width: 38ch; }

/* Bild und Text nebeneinander */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split--rev .split__media { order: 2; }
.split__text { display: grid; gap: 1rem; align-content: center; justify-items: start; }
.split__text p { font-size: .9688rem; }
.split__text--end { text-align: right; justify-items: end; }
.split + .split { margin-top: clamp(3.5rem, 7vw, 6rem); }
.notice { display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.notice .text { margin-inline: auto; font-size: .9688rem; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; gap: clamp(2.5rem, 8vw, 7rem); row-gap: clamp(3rem, 6vw, 5rem); }
.team--one { grid-template-columns: minmax(0, 340px); }
.team-col { display: grid; gap: 2rem; align-content: start; }
.person { display: grid; justify-items: center; text-align: center; }
.person__name { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); }
.person__role { margin: .2rem 0 1.1rem; font-size: .875rem; color: var(--muted); line-height: 1.4; max-width: 30ch; }
.person__photo { width: min(100%, 200px); aspect-ratio: 250 / 284; overflow: hidden; border-radius: 4px; background: #fff; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.person__vcard { margin-top: -22px; position: relative; z-index: 1; }
.person__vcard .btn { min-height: 40px; font-size: .8125rem; }
.person__vcard .btn .btn__in { padding: .35em 1.8em; }
.contacts { display: grid; gap: 0; list-style: none; margin: .9rem 0 0; padding: 0; font-size: .8438rem; font-weight: 700; }
.contacts a { display: inline-block; padding: .12rem 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.contacts a:hover { color: var(--lagoon-ink); }
.termine { padding: 1.3rem 1.5rem 2.6rem; text-align: center; }
.termine h3 { font-size: 1.2rem; padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 2px solid var(--sky); }
.termine ul { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; font-size: .875rem; white-space: nowrap; }
.termine li.is-past { color: var(--muted); }
.termine li.is-past b { text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 400; }
.termine__note { font-size: .8125rem; color: var(--muted); margin: .9rem 0 0; line-height: 1.45; }
.termine .btn { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; white-space: nowrap; min-height: 40px; font-size: .8125rem; }

/* Kontakt-Seite */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: stretch; min-height: 40px; padding: 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; font-size: .8438rem; }
.chip__in { display: inline-flex; align-items: center; gap: .4em; padding: .25em 1.05em; border-radius: 999px; background: var(--field); transition: background-color .25s, color .25s; }
.chip[aria-pressed="true"] .chip__in { background: var(--ink); color: var(--paper); }
.chip:hover .chip__in { background: var(--sky); }
.chip[aria-pressed="true"]:hover .chip__in { background: #000; color: #fff; }
.chip__count { font-weight: 400; opacity: .85; }
.people-wide { display: grid; gap: 24px; max-width: 1080px; margin-inline: auto; }
.pw { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.6rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); transition: opacity .3s, transform .4s var(--ease-out); }
.pw.is-hiding { opacity: 0; transform: scale(.985); }
.pw .vframe { --ar: 520 / 380; }
.result-note { max-width: 1080px; margin: 0 auto 1.2rem; color: var(--muted); font-size: .875rem; min-height: 1.6em; text-align: right; }
.logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem); list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; align-items: center; }
.logo-wall li { display: grid; place-items: center; padding: .6rem; border-radius: 14px; background: #fff; }
.logo-wall img { max-height: 120px; width: auto; }

/* ---------- Formulare ---------- */
.form-card { display: grid; gap: 1.8rem; padding: clamp(1.4rem, 4vw, 3rem); max-width: 1080px; margin-inline: auto; }
.form-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; font-size: .875rem; }
.mail-link { display: inline-flex; align-items: center; gap: .5em; color: var(--ink); text-decoration: none; min-height: 40px; }
.mail-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.mail-link .ico { width: 1em; height: 1em; }
.form-title { display: grid; gap: .2rem; }
.form-title h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); }
.form-title p { margin: 0; font-size: .9375rem; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.4rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.form-col { display: grid; gap: .95rem; align-content: start; }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .95rem clamp(1rem, 3vw, 2rem); }
.frow { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: .3rem 1rem; }
.form-pair .frow { grid-template-columns: 6.5rem minmax(0, 1fr); }
.frow--stack, .form-pair .frow--stack { grid-template-columns: 1fr; }
.frow > .field__error, .frow > .field__hint { grid-column: 2; }
.frow--stack > .field__error { grid-column: 1; }
.field__label { font-weight: 700; color: var(--ink); font-size: .9375rem; line-height: 1.3; }
.field__req { color: var(--error); margin-left: .1em; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: .55rem 1.2rem; border-radius: 999px; border: 2px solid transparent;
  background: var(--field); color: var(--text); font-size: 1rem; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: #626A6D; opacity: 1; }
:root[data-theme="dark"] :is(.input, .textarea)::placeholder { color: #9AA8AC; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] :is(.input, .textarea)::placeholder { color: #9AA8AC; } }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--lagoon-ink); background: var(--white); outline: none; box-shadow: 0 0 0 5px var(--halo); }
.textarea { border-radius: 26px; min-height: 280px; resize: vertical; padding: 1rem 1.3rem; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626A6D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; }
:root[data-contrast="high"] :is(.input, .select, .textarea) { border-color: var(--hc); }
.has-error :is(.input, .select, .textarea) { border-color: var(--error); background: var(--error-bg); }
.field__error { display: flex; align-items: center; gap: .4em; margin: 0; color: var(--error); font-size: .875rem; font-weight: 700; }
.field__error .ico { width: 1em; height: 1em; }
.or { margin: -.2rem 0; font-size: .875rem; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; font-size: .9375rem; line-height: 1.45; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; border: 2px solid var(--ink); background: var(--white); display: grid; place-items: center; }
.check input::after { content: ""; width: 11px; height: 6px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s var(--ease-out); }
.check input:checked { background: var(--lagoon-ink); border-color: var(--lagoon-ink); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check a { color: inherit; }
.switch { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; cursor: pointer; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.switch input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; background: #8A9599; transition: background-color .25s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .3s var(--ease-out); }
.switch input:checked { background: var(--lagoon-ink); }
.switch input:checked::after { transform: translateX(20px); }
.switches { display: flex; flex-wrap: wrap; justify-content: space-around; gap: .3rem 2rem; }
.fieldset.form-sub { padding: clamp(1.2rem, 3vw, 2.2rem); border: 2px solid var(--sky); border-radius: var(--r); display: grid; gap: 1.2rem; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.form-foot .check { max-width: 54ch; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-msg { outline: none; }
.form-msg:empty { display: none; }
form[data-sent] > :not(.form-top):not(.form-title):not(.form-msg) { display: none; }
.error-summary { border: 2px solid var(--error); background: var(--error-bg); border-radius: 20px; padding: 1rem 1.3rem; }
.error-summary h3 { font-size: 1.0625rem; color: var(--error); margin-bottom: .35rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; font-size: .9375rem; }
.error-summary a { color: var(--error); font-weight: 700; }
.form-success { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 1.5rem 1rem; }
.form-success__mark { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--meadow); color: var(--leaf-ink); animation: pop .6s var(--ease-out) both; }
.form-success__mark .ico { width: 36px; height: 36px; stroke-width: 2.4; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }

/* Newsletter-Feld mit angedocktem Knopf */
.nl-bar { display: flex; align-items: stretch; gap: 4px; padding: 3px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); max-width: 640px; transition: border-color .2s, box-shadow .2s; }
.nl-bar:focus-within { border-color: var(--lagoon-ink); box-shadow: 0 0 0 5px var(--halo); }
.nl-bar .input { flex: 1; min-width: 0; border: 0; box-shadow: none !important; }
.nl-bar .input:focus { background: var(--field); }
.nl-bar .btn { flex: none; }
.nl-bar.has-error { border-color: var(--error); }
.nl-msg { margin: .6rem 0 0; min-height: 1.5em; }
.nl-msg.is-ok { color: var(--leaf-ink); }
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1000px; margin-inline: auto; }
.newsletter__text { display: grid; gap: 1.2rem; }
.newsletter__text p { font-size: .9688rem; }
.newsletter__form { grid-column: 1 / -1; display: grid; justify-items: center; margin-top: 1.5rem; }
.newsletter__form form { width: min(100%, 640px); }

/* ---------- Neuigkeiten ---------- */
.news-list { display: grid; gap: 22px; max-width: 1080px; margin-inline: auto; }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.2rem, 3vw, 2.2rem); }
.news-row__body { display: grid; gap: .7rem; }
.news-row__body p { font-size: .9375rem; }
.news-row__body .btn { justify-self: end; margin-top: .6rem; }
.news-date { margin: 0; font-style: italic; font-size: clamp(1.1rem, 1rem + .35vw, 1.4rem); color: var(--ink); }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem); max-width: 1180px; margin-inline: auto; }
.news-card { display: grid; gap: .8rem; align-content: start; justify-items: start; }
.news-card .media { width: 100%; margin-bottom: 1.2rem; }
.news-card__date { margin: 0; font-size: 1rem; color: var(--ink); }
.news-card__title { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.05; }
.news-card p { font-size: .9375rem; }
.nl-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 1180px; margin-inline: auto; padding-block: clamp(3rem, 7vw, 6rem); }
.nl-hero__text { display: grid; gap: 1.3rem; }
.nl-hero__text p { font-size: .9688rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 14px; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; }
.faq-item { border: 2px solid var(--sky); border-radius: var(--r); background: var(--white); transition: border-color .3s; }
.faq-item.is-open { border-color: var(--lagoon); }
:root[data-contrast="high"] .faq-item { border-color: var(--hc); }
.faq-q { margin: 0; font-size: inherit; }
.faq-btn { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 76px; padding: 1rem 1.2rem 1rem clamp(1.2rem, 3vw, 2.2rem); text-align: left; background: none; border: 0; border-radius: 28px; color: var(--ink); }
.faq-btn__q { text-wrap: pretty; flex: 1; font-weight: 700; font-size: clamp(1.05rem, .98rem + .35vw, 1.35rem); line-height: 1.3; }
.faq-btn__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--ink); transition: transform .45s var(--ease-out); }
.faq-btn__icon .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.faq-item.is-open .faq-btn__icon { transform: rotate(45deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel__inner { overflow: hidden; min-height: 0; }
.faq-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; padding: .2rem clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem); }
.faq-body__text { display: grid; gap: 1rem; justify-items: start; font-size: .9688rem; }

/* ---------- Downloads ---------- */
.search { position: relative; width: min(100%, 360px); }
.search .ico { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; width: 1.1em; height: 1.1em; }
.search .input { padding-left: 2.8rem; }
.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.4rem 1.6rem; }
.dl__body { display: grid; gap: .3rem; justify-items: start; }
.dl__title { font-size: 1.1875rem; line-height: 1.25; overflow-wrap: anywhere; }
.dl__desc { color: var(--muted); font-size: .9375rem; margin: 0 0 .6rem; }
.empty { padding: 2rem; text-align: center; border: 2px dashed var(--line); border-radius: var(--r); color: var(--muted); }

/* Folder-Titelblatt (wie die gedruckten Folder) */
.doc { position: relative; aspect-ratio: 315 / 332; border-radius: 6px; background: #fff; border: 1.5px solid #E0F3D9; overflow: hidden; padding: 0 22% 11% 9%; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 10px 22px -18px rgba(11, 46, 53, .5); transition: transform .45s var(--ease-out); }
.doc::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 9%; background: #72C167; }
.doc img { position: absolute; top: 6%; right: 14%; width: 46%; }
.doc__org { color: #4E9F43; font-weight: 700; font-size: .5625rem; line-height: 1.1; }
.doc__type { color: #72C167; font-weight: 700; font-size: .5625rem; margin-top: .4rem; }
.dl:hover .doc { transform: rotate(-2deg) translateY(-2px); }

/* ---------- Schritte ---------- */
.steps { display: grid; gap: 2.6rem; list-style: none; margin: 0 auto; padding: 0 0 0 26px; max-width: 640px; }
.step { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 2rem 2.3rem 3.6rem; text-align: center; border-radius: 40px; }
.step__dot { position: absolute; left: -26px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lagoon); color: var(--deep); font-weight: 700; font-size: 1.25rem; box-shadow: 0 0 0 5px var(--paper); }
.step h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); }
.step .btn { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; min-height: 40px; font-size: .8125rem; max-width: calc(100% - 2rem); }
.step .btn .btn__in { padding: .35em 1.8em; overflow-wrap: anywhere; }

/* Dolmetschangebot */
.offerstat { position: relative; max-width: 620px; margin-inline: auto; padding: 1.8rem clamp(1.4rem, 4vw, 2.6rem) 2.8rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem 2.4rem; align-items: center; }
.offerstat__num { margin: 0; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 700; color: var(--ink); white-space: nowrap; }
.offerstat p { font-size: .9375rem; }
.offerstat .btn { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; min-height: 40px; font-size: .8125rem; white-space: nowrap; }
.hours { max-width: 460px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 1.3rem 1.6rem 1.5rem; text-align: center; }
.hours h3 { font-size: 1.2rem; padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 2px solid var(--sky); }
.hours__time { margin: 0; font-size: .9375rem; }
.hours__status { display: inline-flex; align-items: center; gap: .45em; margin: .5rem 0 0; font-size: .8125rem; color: var(--muted); }

/* Förderer */
.funders { max-width: 720px; margin-inline: auto; display: grid; justify-items: center; text-align: center; gap: 1.5rem; }
.funders hr { width: 100%; border: 0; height: 2px; background: var(--meadow); margin: 1rem 0; }
.funders p { font-size: .875rem; max-width: 46ch; }
.funder-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }
.f-sms { width: min(100%, 430px); }
.f-small { height: 64px; width: auto; }
:root[data-theme="dark"] :is(.funder-logos, .logo-wall li) { background: #fff; padding: .8rem 1.2rem; border-radius: 14px; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .funder-logos { background: #fff; padding: .8rem 1.2rem; border-radius: 14px; } }

/* ---------- Geschichte ---------- */
.history-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.history-intro__text { display: grid; gap: 1.2rem; }
.history-intro__text p { font-size: .9688rem; }
.collage { position: relative; padding-bottom: 26%; }
.collage .media { width: 78%; }
.collage .media + .media { position: absolute; right: 0; bottom: 0; z-index: 2; }
.collage .media + .media .media__frame { box-shadow: 0 30px 50px -36px rgba(11, 46, 53, .55); }
.collage--flip .media { margin-left: auto; }
.collage--flip .media + .media { right: auto; left: 0; }
.timeline { position: relative; padding-bottom: 2rem; }
.timeline__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: var(--sky); }
.timeline__line span { position: absolute; inset: 0; background: var(--lagoon); transform-origin: 50% 0; transform: scaleY(var(--tp, 0)); }
.tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); list-style: none; }
.tl__dot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--sky); z-index: 2; transition: background-color .5s, border-color .5s, scale .5s var(--ease-out); }
.tl.is-in .tl__dot { background: var(--lagoon); border-color: var(--lagoon); scale: 1.2; }
.tl__text { display: grid; gap: .7rem; justify-items: start; }
.tl__text p, .tl__facts { font-size: .9688rem; }
.tl--rev .tl__media { order: 2; }
.tl__facts { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; }
.history-end { display: grid; gap: 2rem; justify-items: center; text-align: center; padding-bottom: var(--sec); }
.history-end .media { width: 100%; }

/* ---------- Dolmetscher ---------- */
.faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); align-content: center; height: 100%; padding: clamp(5rem, 8vw, 7rem) clamp(.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3rem) var(--gutter); }
.faces img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #fff; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--sky); animation: face-in .7s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * 26ms); }
@keyframes face-in { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.dir-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 1180px; margin: 0 auto; }
.dir-tools .search { flex: 1 1 220px; width: auto; }
.dir-tools .select { width: auto; min-width: 12rem; }
.dir-group { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.dir-group .sec-head { margin-bottom: 2.2rem; }
.ip { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2.4rem); max-width: 1120px; margin-inline: auto; align-items: center; }
.ip__info { display: grid; justify-items: center; text-align: center; gap: .15rem; }
.ip__info h4 { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); }
.ip__wohnort { font-size: .875rem; color: var(--muted); margin: 0 0 1.2rem; }
.ip__facts { display: grid; gap: .8rem; margin: 0 0 .4rem; text-align: left; font-size: .9375rem; }
.ip__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }
.ip__facts dt { font-weight: 700; text-align: right; color: var(--ink); }
.ip__facts dd { margin: 0; }
.ip__facts mark { background: #FFE878; color: #000; border-radius: 3px; }
.ip__info .btn { margin-top: 1.1rem; min-width: 14rem; }
.ip__side { display: grid; gap: 1rem; }
.ip .vframe { --ar: 610 / 450; }
.cert { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 0; font-size: .9375rem; color: var(--ink); text-align: center; }
.cert .ico { width: 1em; height: 1em; color: var(--leaf-ink); }

/* Impressum */
.imprint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; margin-top: 2rem; font-size: .9688rem; }
.mapbox { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1204 / 546; background: var(--field); border: 2px solid var(--sky); }
.mapbox iframe { width: 100%; height: 100%; border: 0; }
.consent { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; background: var(--sky-2); overflow: auto; }
.consent__box { display: grid; gap: 1rem; justify-items: center; max-width: 520px; }
.consent__box p { font-size: .9375rem; color: var(--ink); margin: 0; }
.consent__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--lagoon-ink); }
.consent__icon .ico { width: 26px; height: 26px; }
.prose { max-width: 74ch; font-size: .9688rem; }
.prose h3 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.prose h3:first-child { margin-top: 0; }
.prose h4 { font-size: 1.0625rem; margin: 1.4rem 0 .3rem; }
.prose a { color: var(--lagoon-ink); overflow-wrap: anywhere; }

/* ---------- Fußbereich (schräges grünes Band) ---------- */
.site-footer { position: relative; isolation: isolate; overflow-x: clip; margin-top: clamp(6rem, 12vw, 10rem); padding: 0 0 calc(var(--bar-h) + 1.2rem); font-size: .875rem; }
.site-footer::before { content: ""; position: absolute; z-index: -1; left: -6vw; right: -6vw; top: 0; bottom: -1.5rem; background: var(--meadow); transform: rotate(-1.2deg); transform-origin: 50% 0; }
:root[data-contrast="high"] .site-footer::before { border-top: 3px solid var(--hc); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
.footer__brand { display: grid; gap: .6rem; padding-top: clamp(4rem, 7vw, 6rem); }
.footer__brand .h2 { max-width: 15ch; }
.footer__logo { width: clamp(170px, 22vw, 300px); margin-top: calc(clamp(170px, 22vw, 300px) * -.38); }
.footer__cols { display: grid; grid-template-columns: 1fr 1.1fr 1.3fr .6fr; gap: 2rem; }
.footer__col h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.footer__col ul { display: grid; list-style: none; margin: 0; padding: 0; }
.footer__col a { display: inline-block; padding: .2rem 0; color: var(--ink); text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__col p { margin: 0 0 .4rem; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; margin-top: 2rem; }
.footer__bottom p { margin: 0; }

/* ---------- Dialoge ---------- */
dialog { border: 0; padding: 0; margin: auto; background: transparent; color: var(--text); max-width: none; max-height: none; overflow: visible; }
dialog::backdrop { background: rgba(8, 30, 35, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg-in .45s var(--ease-out) both; }
dialog[open]::backdrop { animation: fade-in .35s ease both; }
dialog.is-closing { animation: dlg-out .22s ease both; }
dialog.is-closing::backdrop { animation: fade-out .22s ease both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(20px) scale(.98); } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.dlg { width: min(100vw - 2rem, 1180px); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--paper); border-radius: var(--r); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .6); }
:root[data-contrast="high"] .dlg { border: 3px solid var(--hc); }
.dlg--md { width: min(100vw - 2rem, 820px); }
.dlg__head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem 1rem 1.8rem; background: var(--paper); border-bottom: 2px solid var(--sky); }
.dlg__title { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); }
.dlg__sub { color: var(--muted); font-size: .9375rem; margin: .15rem 0 0; }
.dlg__body { padding: clamp(1.2rem, 3vw, 2rem); }
.badge-oegs { display: inline-flex; align-items: center; gap: .4em; padding: .2rem .7rem; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 700; font-size: .8125rem; }
.badge-oegs .ico { width: 1em; height: 1em; }
.player { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.player__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #12292E; }
.player__stage video, .player__stage iframe { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; transition: transform .45s var(--ease-out); }
.player__stage.is-mirrored video, .player__stage.is-mirrored iframe { transform: scaleX(-1); }
.player__placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.2rem; color: #E9F6F8; background: #12292E; overflow: auto; }
.player__placeholder p { max-width: 36ch; margin: 0 auto; color: #CFE7EB; font-size: .9375rem; }
.player__placeholder strong { display: block; font-size: 1.15rem; color: #fff; margin: 1rem 0 .3rem; }
.hands { width: 110px; height: 110px; margin-inline: auto; color: var(--lagoon); }
.hands .h-l { animation: sign-l 2.6s var(--ease) infinite; transform-origin: 40% 80%; }
.hands .h-r { animation: sign-r 2.6s var(--ease) infinite; transform-origin: 60% 80%; }
@keyframes sign-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) translateY(-4px); } }
@keyframes sign-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg) translateY(-6px); } }
.player__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 1rem; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--field); gap: 2px; }
.seg button { min-height: 40px; min-width: 52px; padding: 0 .8rem; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: .875rem; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.tool { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--sky); background: var(--white); color: var(--ink); font-weight: 700; font-size: .875rem; }
.tool[aria-pressed="true"] { background: var(--sky); border-color: var(--lagoon); }
.tool:disabled { opacity: .45; cursor: not-allowed; }
.player__tools-label { font-size: .8125rem; color: var(--muted); }
.player__hint { margin: .8rem 0 0; font-size: .875rem; color: var(--muted); }
.player__transcript { background: var(--sky-2); border-radius: 22px; padding: 1.3rem 1.4rem; max-height: min(56vh, 520px); overflow: auto; font-size: .9688rem; }
.player__transcript h3 { font-size: 1rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .5em; }
.consent--dark { background: #12292E; }
.consent--dark p { color: #CFE7EB !important; }
.consent--dark a { color: #fff; }
.consent--dark .check { color: #E9F6F8; justify-content: center; }
.consent--dark .check input { border-color: #fff; background: transparent; }
.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(100vw, 440px); }
.drawer[open] { animation: drawer-in .45s var(--ease-out) both; }
.drawer.is-closing { animation: drawer-out .25s ease both; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
.drawer .dlg { width: 100%; height: 100%; max-height: none; border-radius: var(--r) 0 0 var(--r); }
.setting { display: grid; gap: .6rem; padding: 1.1rem 0; border-bottom: 2px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting__title { font-weight: 700; color: var(--ink); font-size: 1rem; display: flex; align-items: center; gap: .6em; }
.setting__title .ico { color: var(--lagoon-ink); }
.setting__hint { font-size: .875rem; color: var(--muted); margin: -.2rem 0 0; }
.seg--full { display: flex; width: 100%; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label span { display: grid; place-items: center; min-height: 40px; padding: 0 .5rem; border-radius: 999px; font-weight: 700; font-size: .875rem; color: var(--ink); transition: background-color .2s, color .2s; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--halo); }
.drawer .switch { display: flex; justify-content: space-between; font-weight: 400; width: 100%; }
.size-preview { font-size: .875rem; color: var(--muted); margin: 0; }
.menu-panel { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
.menu-panel .dlg { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.menu-panel .dlg__head img { width: 86px; }
.mnav { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mnav__item { border: 2px solid var(--meadow); border-radius: 22px; overflow: hidden; }
.mnav__row { display: flex; align-items: center; }
.mnav__link { flex: 1; display: flex; align-items: center; min-height: 56px; padding: .6rem 1.2rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.mnav__toggle { width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-left: 2px solid var(--meadow); background: none; color: var(--ink); }
.mnav__toggle .ico { transition: transform .3s var(--ease); }
.mnav__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.mnav__sub { list-style: none; margin: 0; padding: .3rem .6rem .7rem; background: var(--sky-2); }
.mnav__sub a { display: flex; align-items: center; gap: .5em; min-height: 46px; padding: .3rem .8rem; color: var(--ink); text-decoration: none; border-radius: 12px; }
.menu-foot { display: grid; gap: 12px; margin-top: 1.4rem; }
.menu-foot .bar-status { justify-content: center; margin: .4rem 0 0; }
.booking { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.booking__frame { position: relative; min-height: min(68vh, 660px); border-radius: 22px; overflow: hidden; background: var(--sky-2); border: 2px solid var(--meadow); }
.booking__frame iframe { position: absolute; inset: 0 0 2.8rem 0; width: 100%; height: calc(100% - 2.8rem); border: 0; background: #fff; }
.booking__fallback { position: absolute; left: 0; right: 0; bottom: 0; height: 2.8rem; margin: 0; display: flex; align-items: center; justify-content: center; font-size: .875rem; background: var(--paper); }
.booking__alt { display: grid; align-content: start; gap: .9rem; padding: 1.3rem; border-radius: 22px; background: var(--meadow-2); }
.booking__alt h3 { font-size: 1.15rem; }
.booking__alt p { font-size: .875rem; }
.booking__list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.booking__list a { display: flex; align-items: center; gap: .8rem; min-height: 54px; padding: .6rem 1rem; border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9375rem; border: 2px solid transparent; line-height: 1.3; }
.booking__list a:hover { border-color: var(--leaf); }
.booking__list small { display: block; font-weight: 400; color: var(--muted); font-size: .8125rem; }
.booking__list .ico { color: var(--leaf-ink); width: 1.3em; height: 1.3em; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--bar-h) + 30px); translate: -50% 0; display: flex; align-items: center; gap: .7rem; max-width: min(92vw, 560px); padding: .85rem 1.2rem; border-radius: 16px; background: var(--deep); color: #fff; font-size: .9375rem; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); }
.toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.toast .ico { color: var(--lagoon); }
.abbr { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .2em; cursor: help; }
.tip { position: fixed; z-index: 130; max-width: 280px; padding: .5rem .8rem; border-radius: 12px; background: var(--deep); color: #fff; font-size: .875rem; line-height: 1.35; animation: fade-in .2s ease both; }
.tip b { color: var(--lagoon); }
.ruler { position: fixed; z-index: 110; inset: 0; pointer-events: none; display: none; }
:root[data-ruler="on"] .ruler { display: block; }
.ruler__band { position: absolute; left: 0; right: 0; height: 3.2em; top: 0; border-block: 3px solid var(--lagoon); box-shadow: 0 0 0 100vmax rgba(8, 30, 35, .36); }
.notfound { display: grid; justify-items: start; gap: 1.4rem; padding-block: 8rem; }

/* ---------- Bewegung reduzieren ---------- */
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1559px) {
  :root { --logo-w: 150px; }
  .nav-main__list { gap: 6px; }
  .nav-link { font-size: .8125rem; padding-left: .85rem; }
  .nav-toggle { width: 30px; }
  .header-actions { gap: 8px; padding-left: 12px; }
  .header-actions .btn .btn__in { padding-inline: 1.2em; }
  .bar-address .bar-hide { display: none; }
}
@media (max-width: 1299px) {
  .nav-main, .header-actions .btn { display: none; }
  .menu-btn { display: inline-grid; }
  .header-actions { margin-left: auto; border-left: 0; padding-left: 0; }
}
@media (max-width: 1099px) {
  .bar-status { display: none; }
  .since { grid-template-columns: 1fr; }
  .since__intro { padding-top: 0; }
  .hl--reach::before { right: -2.6em; }
  .downloads { grid-template-columns: 1fr; }
  .pw, .ip { grid-template-columns: 1fr; }
  .sec-head--trio, .sec-head--pair { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 900px) {
  :root { --header-h: 72px; --bar-h: 66px; --logo-w: 100px; --fs: 1rem; }
  main { padding-top: 72px; }
  .site-header.is-scrolled { --header-h: 64px; }
  .site-header.is-scrolled ~ .rail { top: 64px; }
  .brand { top: 6px; }
  .site-header.is-scrolled .brand { transform: scale(.62); }
  .hero { grid-template-columns: [full-start] var(--gutter) [text-start] minmax(0, 1fr) [text-end] var(--gutter) [full-end]; min-height: 0; }
  .hero__media { grid-column: full-start / full-end; grid-row: 1; }
  .hero__media .media__frame { height: auto; aspect-ratio: 4 / 3; border-radius: 0 0 var(--r) var(--r); }
  .hero .media__frame, .js-reveal .hero:not(.is-in) .media__frame { clip-path: none; }
  .hero__text { grid-column: text-start / text-end; grid-row: 2; padding: 2.2rem 0 1rem; }
  .faces { padding: 4.4rem var(--gutter) 1rem; }
  .play { --s: 96px; }
  .play--md { --s: 80px; }
  .play--sm { --s: 64px; }
  .split, .split--rev, .newsletter, .nl-hero, .news-row, .history-intro, .imprint, .faq-body, .form-grid { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .split__text--end { text-align: left; justify-items: start; }
  .offers, .tiles, .news-grid { grid-template-columns: 1fr; }
  .offer, .tile { min-height: 0; }
  .sec-head--split { grid-template-columns: 1fr; justify-items: start; }
  .news-row__body .btn { justify-self: start; }
  .tl, .tl--rev { grid-template-columns: 1fr; gap: 2rem; padding-left: 2rem; }
  .tl--rev .tl__media { order: 0; }
  .timeline__line, .tl__dot { left: 8px; }
  .tl__dot { top: 3rem; }
  .hl--edge-r::before { left: -.55em; right: -100vw; }
  .bottombar__inner > :not(.bar-mobile) { display: none; }
  .bottombar .wrap { width: 100%; }
  .bar-mobile { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; max-width: 620px; height: 100%; margin: 0 auto; list-style: none; padding: 0; }
  .bar-mobile a, .bar-mobile button { display: grid; place-items: center; align-content: center; gap: 3px; height: 100%; padding: 4px 2px; border: 0; background: none; color: var(--ink); text-decoration: none; font-size: clamp(10.5px, .75rem, 12.5px); font-weight: 700; line-height: 1.1; border-radius: 14px; text-align: center; }
  .bar-mobile .ico { width: 24px; height: 24px; }
  .bar-mobile .is-primary { color: var(--leaf-ink); }
  .rail { width: 5px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__logo { order: -1; justify-self: end; width: 150px; margin-top: -60px; }
  .footer__brand { padding-top: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .frow, .form-pair .frow { grid-template-columns: 1fr; }
  .frow > .field__error, .frow > .field__hint { grid-column: 1; }
  .form-pair { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: minmax(0, 320px); }
  .result-note { text-align: left; }
}
@media (max-width: 640px) {
  h1, h2, h3, h4 { hyphens: auto; }
  .stat { grid-template-columns: 1fr; gap: .4rem; }
  .stat__num { text-align: left; }
  .faces { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dl { grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
  .player { grid-template-columns: 1fr; }
  .player__stage { aspect-ratio: 4 / 3; }
  .hands { width: 80px; height: 80px; }
  .nl-bar { flex-direction: column; border-radius: 26px; }
  .nl-bar .btn { width: 100%; }
  .footer__cols { grid-template-columns: 1fr; }
  .offerstat { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ip__facts > div { grid-template-columns: 1fr; gap: .1rem; }
  .ip__facts dt { text-align: left; }
  .hl::before { right: -1.2em; }
  .hl--center::before { left: -.8em; right: -.8em; }
  .hl--tall::before { left: -1.4em; right: -1.4em; }
  .steps { padding-left: 18px; }
  .step { padding: 1.3rem 1.2rem 2.3rem 3rem; }
  .step__dot { left: -18px; width: 52px; height: 52px; }
}

@media (forced-colors: active) {
  .btn, .chip, .nav-pill, .card, .faq-item, .input, .select, .textarea, .icon-btn, .row { border-color: CanvasText; }
  .play { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: CanvasText; }
  .hl::before { display: none; }
  :focus-visible { outline: 3px solid Highlight; }
}
@media print {
  .site-header, .bottombar, .rail, .skip-links, .play, dialog, .toast, .site-footer::before { display: none !important; }
  main { padding: 0; }
  .faq-panel { grid-template-rows: 1fr !important; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* =====================================================================
   Bibliothek · Ergänzungen zum gemeinsamen Design-System
   ===================================================================== */


/* ---------- Kopfzeile ---------- */
.brand__tag {
  position: absolute; right: -6px; bottom: 14%; z-index: 3;
  padding: .18rem .7rem .22rem; border-radius: 999px; background: var(--leaf); color: #10301A;
  font-size: .8125rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  box-shadow: 0 0 0 3px var(--paper); transform: rotate(-4deg);
  transition: opacity .3s;
}
.site-header.is-scrolled .brand__tag { opacity: 0; }
:root[data-contrast="high"] .brand__tag { background: #000; color: #fff; }
.kbd { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: .2em; padding: 0 .3em; border-radius: 6px; background: var(--meadow); color: var(--leaf-ink); font: 700 .75rem/1 var(--font); }
.merk-btn { position: relative; text-decoration: none; }
.merk-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--leaf-ink); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--paper); }
.merk-btn.is-bump .merk-count { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }
.nav-pill--solo .nav-link { padding-right: 1.05rem; }

/* ---------- Buchcover (aus Daten erzeugt) ---------- */
.cover {
  --bg: var(--sky); --ac: var(--lagoon); --fg: #0B2E35;
  position: relative; container-type: inline-size; aspect-ratio: 2 / 3; width: 100%;
  border-radius: 3px 9px 9px 3px; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--fg);
  box-shadow: inset 7px 0 0 -1px rgba(0, 0, 0, .09), inset 8px 0 0 -1px rgba(255, 255, 255, .25), 0 16px 26px -20px rgba(11, 46, 53, .65);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Alle Cover gleich groß: gleiches Format für Buch, DVD, Zeitschrift und Infomaterial */
.cover--dvd { border-radius: 6px; }
.cover--zeitschrift, .cover--info { border-radius: 2px; box-shadow: 0 16px 26px -20px rgba(11, 46, 53, .65); }
.cover__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 11cqw 10cqw 9cqw 14cqw; }
.cover__t { font-weight: 700; font-size: 11cqw; line-height: 1.04; letter-spacing: -.015em; overflow-wrap: anywhere; hyphens: auto; }
.cover__s { margin-top: 4cqw; font-size: 5.8cqw; line-height: 1.25; opacity: .85; }
.cover__b { margin-top: auto; align-self: start; font-size: 5.8cqw; font-weight: 700; line-height: 1.2; }
.cover__b:not(:empty) { margin-left: -2cqw; padding: .6cqw 2cqw; background: var(--bg); border-radius: 1cqw; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cover__m { position: absolute; z-index: 1; pointer-events: none; }
.cover--m0 .cover__m { width: 120cqw; aspect-ratio: 1; right: -58cqw; bottom: -52cqw; border-radius: 50%; border: 5cqw solid var(--ac); }
.cover--m1 .cover__m { left: 0; right: 0; top: 58%; height: 15%; background: var(--ac); }
.cover--m1 .cover__b { margin-top: 0; position: absolute; left: 14cqw; max-width: 76cqw; bottom: 8cqw; }
.cover--m1 .cover__in { padding-bottom: 50%; }
.cover--m2 .cover__m { top: 0; bottom: 0; right: 0; width: 22cqw; background: var(--ac); }
.cover--m2 .cover__in { padding-right: 30cqw; }
.cover--m3 .cover__m { width: 54cqw; aspect-ratio: 1.25; right: 8cqw; bottom: 16cqw; border: 3.4cqw solid var(--ac); border-radius: 46% 46% 46% 46% / 50% 50% 50% 50%; }
.cover--m3 .cover__m::after { content: ""; position: absolute; left: 18%; bottom: -17%; width: 18%; height: 22%; border-left: 3.4cqw solid var(--ac); transform: skewX(-24deg); }
.cover--dvd .cover__in { padding-top: 22cqw; }
.cover__band { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 14cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 14cqw; background: #111; color: #fff; font-weight: 700; font-size: 6cqw; letter-spacing: .05em; }
.cover__band i { font-style: normal; font-weight: 400; opacity: .75; letter-spacing: 0; }
.cover--zeitschrift .cover__in, .cover--info .cover__in { padding: 8cqw 8cqw 7cqw; }
.cover--zeitschrift .cover__t { font-size: 14cqw; line-height: .95; letter-spacing: -.03em; }
.cover__issue { margin-top: 3cqw; font-size: 6cqw; font-weight: 700; padding-bottom: 3cqw; border-bottom: 1.2cqw solid currentColor; align-self: start; }
.cover--info .cover__t { font-size: 10cqw; }
.cover--info::before { content: ""; position: absolute; z-index: 1; left: 8cqw; right: 8cqw; top: 6cqw; height: 2cqw; background: var(--ac); }
.cover .cover__logo { position: absolute; z-index: 3; inset: auto 7cqw 6cqw auto; width: 24cqw; height: auto; object-fit: contain; opacity: .95; }
.cover--info .cover__b { padding-right: 24cqw; }
:root[data-contrast="high"] .cover { outline: 2px solid var(--hc); }

/* ---------- Hero mit Cover-Wand ---------- */
.hero--lib .hero__media { overflow: hidden; }
.wall { position: relative; height: 100%; min-height: 520px; overflow: hidden; border-radius: 0 var(--r) var(--r) 0; background: var(--sky-2); }
.wall__cols { position: absolute; inset: -10% 6% -10% calc(var(--gutter) + 2%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); transform: rotate(-6deg); }
.wall__col { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); animation: drift 60s linear infinite; }
.wall__col:nth-child(even) { animation-direction: reverse; margin-top: -30%; }
.wall__col:nth-child(3) { animation-duration: 75s; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--sky-2), transparent 14%, transparent 86%, var(--sky-2)); }
:root.reduce-motion .wall__col { animation: none; }
.hero--lib .play { left: auto; top: auto; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); translate: none; z-index: 4; }
.hero--lib .play__label { left: auto; right: 0; translate: none; top: auto; bottom: calc(100% + 12px); }

/* Große Suche */
.bigsearch { display: flex; align-items: stretch; gap: 4px; padding: 4px; border: 2px solid var(--lagoon); border-radius: 999px; background: var(--white); max-width: 600px; box-shadow: 0 2px 0 -1px var(--sky); transition: box-shadow .2s, border-color .2s; }
.bigsearch:focus-within { border-color: var(--lagoon-ink); box-shadow: 0 0 0 6px var(--halo); }
.bigsearch .ico { align-self: center; margin-left: 1rem; color: var(--muted); width: 1.3em; height: 1.3em; }
.bigsearch input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; padding: .7rem .8rem; font-size: 1.0625rem; color: var(--text); outline: none; }
.bigsearch input::placeholder { color: #626A6D; }
.bigsearch input:focus-visible { outline: none; box-shadow: none; }
.bigsearch .btn { flex: none; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.quick__label { color: var(--muted); margin-right: .2rem; }
.qchip { display: inline-flex; align-items: center; min-height: 36px; padding: .2rem .9rem; border-radius: 999px; border: 1.5px solid var(--sky); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .8125rem; transition: border-color .2s, background-color .2s; }
.qchip:hover { border-color: var(--lagoon); background: var(--sky-2); }
.qchip--green { border-color: var(--meadow); }
.qchip--green:hover { border-color: var(--leaf); background: var(--meadow-2); }
:root[data-contrast="high"] .qchip { border-color: var(--hc); }

/* ---------- Medien-Karten ---------- */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.mcard { position: relative; display: grid; align-content: start; gap: .85rem; }
.mcard__cover { position: relative; align-self: end; transition: transform .45s var(--ease-out); }
.mcard:hover .mcard__cover, .mcard:focus-within .mcard__cover { transform: translateY(-5px) rotate(-1.2deg); }
.mcard__body { display: grid; gap: .2rem; align-content: start; }
.mcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-size: .75rem; font-weight: 700; color: var(--muted); }
.mcard__title { font-size: 1rem; line-height: 1.25; }
.mcard__title a { color: var(--ink); text-decoration: none; }
.mcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.mcard__title a:focus-visible { outline: none; box-shadow: none; }
.mcard:has(.mcard__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 10px; }
.mcard__title mark, .qs-item mark { background: var(--meadow); color: inherit; border-radius: 3px; padding: 0 .1em; }
.mcard__by { margin: 0; font-size: .8438rem; color: var(--muted); line-height: 1.35; }
.mcard .st { margin-top: .25rem; }
.tag-new { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; background: var(--leaf); color: #10301A; font-size: .6875rem; font-weight: 700; }
:root[data-contrast="high"] .tag-new { background: #000; color: #fff; }
.mcard__month { justify-self: start; margin: 0 0 .3rem; padding: .15rem .7rem; border-radius: 999px; background: var(--deep); color: #fff; font-size: .75rem; font-weight: 700; }
/* Cover stehen wie im Regal auf einer Linie, Texte beginnen auf gleicher Höhe */
.mgrid:not(.mgrid--list) > .mcard, .carousel__track > .mcard { grid-row: span 2; grid-template-rows: subgrid; row-gap: .85rem; }

/* Merken-Herz */
.mcard__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 40px; }
.heart { position: relative; z-index: 3; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -6px; border-radius: 50%; border: 1.5px solid transparent; background: transparent; color: #4A5154; transition: transform .25s var(--ease), color .2s, border-color .2s, background-color .2s; }
.heart:hover { border-color: var(--sky); background: var(--white); }
.heart .ico { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.heart[aria-pressed="true"] { color: #C0392B; }
.heart[aria-pressed="true"] .ico { fill: currentColor; animation: heart .45s var(--ease-out); }
@keyframes heart { 40% { transform: scale(1.35); } }
:root[data-contrast="high"] .heart { border: 2px solid #000; }

/* Status */
.st { display: inline-flex; align-items: center; gap: .45em; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--muted); line-height: 1.3; }
.st::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #8A9599; flex: none; }
.st--ok { color: var(--leaf-ink); }
.st--ok::before { background: var(--leaf); }
.st--lg { font-size: 1.125rem; }
.st--lg::before { width: .7em; height: .7em; }

/* Barrierefreiheits-Merkmale */
.bfs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bf { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; padding: .2rem .75rem; border-radius: 999px; background: var(--sky-2); border: 1.5px solid var(--sky); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.bf .ico { width: 1.1em; height: 1.1em; color: var(--lagoon-ink); }
.mcard .bfs { margin-top: .3rem; }
.mcard .bf { min-height: 0; padding: .05rem .5rem; font-size: .6875rem; border-width: 1px; }
.mcard .bf .ico { display: none; }

/* ---------- Karussell ---------- */
.car { --per: 5; --gap: clamp(1rem, 2vw, 1.6rem); position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto; list-style: none; margin: 0; padding: 1rem 0 1.4rem; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .carousel__track { cursor: grab; } }
.carousel__track.is-drag { cursor: grabbing; user-select: none; }
.carousel__track.is-drag > * { pointer-events: none; }
.car__arrow { position: absolute; z-index: 4; top: calc(var(--arrow-y, 180px) - 26px); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 2px solid var(--sky); background: var(--white); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(11, 46, 53, .55); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), border-color .2s, background-color .2s, visibility 0s; }
.car__arrow .ico { width: 22px; height: 22px; }
.car__arrow--prev { left: -72px; }
.car__arrow--next { right: -72px; }
@media (max-width: 1419px) { .car__arrow--prev { left: -24px; } .car__arrow--next { right: -24px; } }
.car__arrow:hover { border-color: var(--lagoon); background: var(--sky-2); transform: scale(1.06); }
.car__arrow:disabled { opacity: 0; visibility: hidden; transform: scale(.8); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s; }
.car:not(.is-scrollable) .car__arrow { display: none; }
:root[data-contrast="high"] .car__arrow { border-color: var(--hc); }

/* ---------- Medium des Monats ---------- */
.section--mdm { background: none; }
.mdm { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.mdm__stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: clamp(2.4rem, 5.5vw, 4rem); text-decoration: none; }
.mdm__stage::before { content: ""; position: absolute; z-index: -2; inset: 4% 2%; border-radius: var(--r); background: var(--meadow); transform: rotate(-5deg); transition: transform 1.2s var(--ease-out); }
.mdm__stage::after { content: ""; position: absolute; z-index: -1; inset: 14% 12%; border-radius: 50%; border: 3px solid var(--white); opacity: .85; }
.mdm__stage:hover::before { transform: rotate(-3deg); }
.mdm__cover { position: relative; display: block; width: min(100%, 250px); transform: rotate(-4deg); transition: transform .9s var(--ease-out); }
.mdm__stage:hover .mdm__cover { transform: rotate(0) translateY(-6px); }
.mdm__month { position: absolute; z-index: 3; top: clamp(1rem, 2vw, 1.6rem); left: clamp(1rem, 2vw, 1.6rem); padding: .3rem .9rem; border-radius: 999px; background: var(--leaf); color: #10301A; font-weight: 700; font-size: .875rem; transform: rotate(-3deg); }
.mdm__text { display: grid; gap: 1rem; justify-items: start; }
.mdm__by { margin: .35rem 0 0; color: var(--muted); }
.mdm__why { font-size: 1.0625rem; max-width: 56ch; margin: 0; }
.mdm__why::before { content: "„"; }
.mdm__why::after { content: "“"; }
.mdm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.mdm__foot .btn-row { margin: 0; }

/* ---------- Katalog ---------- */
.page-head { display: grid; gap: 1.2rem; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head .text { font-size: .9688rem; }
.kat-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 0; max-height: calc(100vh - var(--header-h) - var(--bar-h) - 40px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.filters .filters__toggle { display: none; }
.fgroup { border: 0; margin: 0; padding: 1rem 0 1.2rem; border-bottom: 2px solid var(--line); min-width: 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup legend { float: left; width: 100%; margin-bottom: .7rem; font-weight: 700; font-size: .9375rem; color: var(--ink); }
.fgroup legend + * { clear: both; }
.fopt { display: flex; align-items: center; gap: .6rem; min-height: 38px; padding: .15rem .7rem; border-radius: 12px; cursor: pointer; font-size: .9063rem; color: var(--ink); transition: background-color .2s; }
.fopt:hover { background: var(--sky-2); }
.fopt input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid var(--ink); flex: none; display: grid; place-items: center; }
.fopt input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lagoon-ink); transform: scale(0); transition: transform .2s var(--ease-out); }
.fopt input[type="radio"]:checked { border-color: var(--lagoon-ink); }
.fopt input[type="radio"]:checked::after { transform: scale(1); }
.fopt:has(input:checked) { background: var(--sky); font-weight: 700; }
.fopt input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 2px solid var(--ink); flex: none; display: grid; place-items: center; background: var(--white); }
.fopt input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease-out); }
.fopt input[type="checkbox"]:checked { background: var(--lagoon-ink); border-color: var(--lagoon-ink); }
.fopt input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.fopt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fopt__n { margin-left: auto; font-size: .75rem; font-weight: 400; color: var(--muted); }
.fopt.is-empty { color: var(--muted); }
.filters .switch { font-size: .9063rem; }
.results__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: 1.4rem; }
.results__count { margin: 0; font-weight: 700; color: var(--ink); }
.results__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.results__tools .select { width: auto; min-height: 42px; font-size: .875rem; padding-block: .4rem; }
.seg--view button { min-width: 44px; min-height: 36px; padding: 0 .6rem; display: grid; place-items: center; }
.seg--view .ico { width: 18px; height: 18px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: -.4rem 0 1.4rem; padding: 0; }
.afilter { display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .1rem .4rem .1rem .8rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 700; border: 0; }
.afilter .ico { width: 1em; height: 1em; }
.afilter:hover { background: #000; color: #fff; }
.more { display: flex; justify-content: center; margin-top: 2.6rem; }
.didyou { margin: 0 0 1.2rem; font-size: .9375rem; }
.didyou a { color: var(--lagoon-ink); font-weight: 700; }
.mgrid--list { grid-template-columns: 1fr; gap: 12px; }
.mgrid--list .mcard { grid-template-columns: 72px minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: .8rem 1.2rem .8rem .8rem; border: 2px solid var(--sky); border-radius: 18px; background: var(--white); }
.mgrid--list .mcard:hover .mcard__cover { transform: none; }
.mgrid--list .mcard__title { font-size: 1.0625rem; }

/* ---------- Detailseite ---------- */
.crumbs { padding-top: clamp(1.5rem, 3vw, 2.4rem); font-size: .8438rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .5rem; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--line); color: #A8B2B5; }
.crumbs a { color: var(--ink); padding: .4rem 0; }
.crumbs [aria-current] { color: var(--muted); }
.detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--sec); }
.detail__left { position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.detail__stage { position: relative; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: var(--r); background: var(--sky-2); perspective: 900px; }
.detail__stage .cover { width: min(100%, 250px); transform: rotateY(-14deg) rotateX(3deg); transition: transform .8s var(--ease-out); box-shadow: inset 7px 0 0 -1px rgba(0, 0, 0, .09), 26px 30px 40px -26px rgba(11, 46, 53, .6); }
.detail__stage:hover .cover { transform: rotateY(0) rotateX(0); }
.detail__stage .play { left: auto; top: auto; right: -12px; bottom: -12px; translate: none; }
.detail__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; min-width: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; padding: .2rem .8rem; border-radius: 999px; background: var(--meadow); color: var(--leaf-ink); font-weight: 700; font-size: .8125rem; text-decoration: none; }
.pill .ico { width: 1em; height: 1em; }
a.pill:hover { background: var(--leaf); color: #10301A; }
.detail__title { display: grid; gap: .5rem; }
.detail__sub { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink); }
.detail__by { margin: 0; color: var(--muted); }
.detail__by a { color: var(--ink); font-weight: 700; }
.avail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.4rem 1.6rem; }
.avail__info { display: grid; gap: .3rem; }
.avail__where { margin: 0; font-size: .9375rem; }
.avail__where a { color: var(--lagoon-ink); font-weight: 700; }
.avail__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.avail__hint { margin: 0; padding-top: .9rem; border-top: 1.5px solid var(--sky); font-size: .8438rem; color: var(--muted); }
.tbtn { display: inline-flex; align-items: center; gap: .45em; min-height: 46px; padding: 0 1.1rem; border-radius: 999px; border: 2px solid var(--sky); background: var(--white); color: var(--ink); font-weight: 700; font-size: .875rem; transition: border-color .2s, background-color .2s; }
.tbtn:hover { border-color: var(--lagoon); background: var(--sky-2); }
.tbtn .ico { width: 1.1em; height: 1.1em; }
.tbtn[aria-pressed="true"] { border-color: #E8B4AE; background: #FDF0EE; color: #8E2A1F; }
.tbtn[aria-pressed="true"] .ico { fill: currentColor; }
:root[data-theme="dark"] .tbtn[aria-pressed="true"] { background: #3A1A18; color: #FFB4AA; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .tbtn[aria-pressed="true"] { background: #3A1A18; color: #FFB4AA; } }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem 2rem; margin: 0; padding: 1.4rem 0 0; border-top: 2px solid var(--line); }
.facts dt { font-size: .8125rem; color: var(--muted); }
.facts dd { margin: .1rem 0 0; font-weight: 700; color: var(--ink); font-size: .9688rem; }
.detail h2 { font-size: 1.375rem; }
.detail__desc { font-size: 1.0625rem; max-width: 62ch; }

/* ---------- Suche (Dialog) ---------- */
.search-dlg { margin: max(8vh, 70px) auto auto; width: min(100vw - 1.5rem, 760px); }
.search-panel { width: 100%; max-height: min(78vh, 720px); display: flex; flex-direction: column; overflow: hidden; }
.search-panel__bar { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem .7rem 1.4rem; border-bottom: 2px solid var(--sky); transition: border-color .2s, box-shadow .2s; }
.search-panel__bar:focus-within { border-bottom-color: var(--lagoon-ink); box-shadow: inset 0 -2px 0 var(--lagoon-ink); }
.search-panel__bar input:focus-visible { outline: none; box-shadow: none; }
.search-panel__bar > .ico { width: 1.4em; height: 1.4em; color: var(--lagoon-ink); }
.search-panel__bar input { flex: 1; min-width: 0; border: 0; background: none; font-size: 1.25rem; padding: .7rem .2rem; color: var(--text); outline: none; }
.search-panel__bar input::-webkit-search-cancel-button { display: none; }
.search-panel__body { overflow: auto; padding: 1rem 1.2rem 1.4rem; }
.qs-sec { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.qs-sec h3 { font-size: .8125rem; color: var(--muted); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.qs-sec h3 button { background: none; border: 0; color: var(--lagoon-ink); font-size: .8125rem; font-weight: 700; text-decoration: underline; padding: .3rem; }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qs-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .55rem .8rem; border-radius: 14px; cursor: pointer; color: var(--ink); text-decoration: none; }
.qs-item .cover { width: 42px; border-radius: 2px 5px 5px 2px; box-shadow: none; }
.qs-item__t { display: block; font-weight: 700; line-height: 1.25; }
.qs-item__s { display: block; font-size: .8125rem; color: var(--muted); }
.qs-item[aria-selected="true"], .qs-item:hover { background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--lagoon); }
.qs-all { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem; border-radius: 14px; font-weight: 700; color: var(--lagoon-ink); text-decoration: none; background: var(--sky-2); margin-top: .6rem; }
.qs-all[aria-selected="true"], .qs-all:hover { box-shadow: inset 0 0 0 2px var(--lagoon); }
.qs-empty { padding: 1.4rem .4rem; text-align: center; display: grid; gap: .6rem; justify-items: center; }
.qs-recent { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.qs-recent .qchip .ico { width: 1em; height: 1em; margin-right: .3rem; color: var(--muted); }

/* ---------- Merkliste ---------- */
.merk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.6rem; }
.mlist { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.mrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: .8rem 1rem .8rem .8rem; }
.mrow h3 { font-size: 1.0625rem; }
.mrow h3 a { color: var(--ink); text-decoration: none; }
.mrow h3 a:hover { text-decoration: underline; }
.mrow .icon-btn { border-color: var(--sky); }
.empty-state { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; border: 2px dashed var(--line); border-radius: var(--r); }
.empty-state .ico { width: 44px; height: 44px; color: var(--lagoon-ink); stroke-width: 1.4; }

/* Liste der Medien im Reservier-Dialog */
.rlist { display: grid; gap: 8px; list-style: none; margin: 0 0 1.4rem; padding: 0; }
.rlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .5rem .8rem .5rem .5rem; border-radius: 14px; background: var(--sky-2); }
.rlist .cover { width: 40px; box-shadow: none; }
.rlist b { display: block; line-height: 1.25; color: var(--ink); }
.dlg .form-card { border: 0; padding: 0; gap: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1299px) {
  .kbd { display: none; }
  .header-actions .merk-btn { display: none; }
}
@media (max-width: 1099px) {
  .kat-layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; overflow: visible; padding: 0; }
  .filters .filters__toggle { display: flex; }
  .filters__panel { padding: 1.2rem; border: 2px solid var(--sky); border-radius: 22px; margin-top: .8rem; }
  .filters__panel[hidden] { display: none !important; }
  .detail { grid-template-columns: 1fr; }
  .detail__left { position: static; max-width: 420px; }
}
@media (max-width: 900px) {
  .wall { min-height: 0; aspect-ratio: 4 / 3; border-radius: 0 0 var(--r) var(--r); }
  .brand__tag { font-size: .6875rem; right: -10px; }
  .bar-merk { position: relative; }
  .bar-merk .merk-count { top: 2px; right: calc(50% - 22px); }
  .avail { grid-template-columns: 1fr; }
  .avail__actions { justify-content: flex-start; }
  .mrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1rem; }
}
@media (max-width: 640px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgrid--list { grid-template-columns: 1fr; }
  .results__tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .bigsearch .btn .btn__in { padding-inline: 1.1em; }
}

@media print {
  .merk-actions, .mrow .icon-btn, .crumbs, .heart, .play { display: none !important; }
  .mrow { break-inside: avoid; border: 1px solid #999; }
}

/* Karussell-Abschnitte etwas enger, damit die Startseite nicht zerfällt */
.form-pair { align-items: start; }


/* =====================================================================
   NEU: Farben, Herz, Teaser
   ===================================================================== */
:root {
  --sp-x: #E1EBEE;
  --res-a: #E8EEF0;
  --heart: #C0392B;
}
:root[data-theme="dark"] { --sp-x: #24363B; --res-a: #22302F; --heart: #FF8A80; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --sp-x: #24363B; --res-a: #22302F; --heart: #FF8A80; } }


.heart.is-pop .ico, .tbtn.is-pop .ico { animation: heartpop .5s var(--ease-out); }
@keyframes heartpop { 35% { transform: scale(1.45); } 70% { transform: scale(.9); } }
.is-bump .merk-count, .merk-count.is-bump { animation: bump .5s var(--ease-out); }


/* Gebärdenvideo (kleiner Playbutton im Stil der Website) */
.sign { display: inline-flex; align-items: center; gap: .65em; min-height: 46px; padding: 0 1.15rem 0 4px; border-radius: 999px; border: 2px solid var(--sky); background: var(--white); color: var(--ink); font-weight: 700; font-size: .875rem; transition: border-color .2s, background-color .2s; }
.sign__dot { display: grid; width: 36px; height: 36px; border-radius: 50%; background: var(--play); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 10px -4px rgba(11, 46, 53, .6); transition: transform .35s var(--ease-out); }
.sign__dot svg { width: 100%; height: 100%; }
.sign:hover { border-color: var(--lagoon); background: var(--sky-2); }
.sign:hover .sign__dot { transform: scale(1.08); }


/* Herz fliegt zur Merkliste */
.fly { position: fixed; z-index: 400; left: 0; top: 0; width: 26px; height: 26px; color: var(--heart); pointer-events: none; }
.fly svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }


.fchips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fchips--scroll { flex-wrap: nowrap; overflow-x: auto; padding: 4px 3px; margin: -4px -3px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.fchips--scroll::-webkit-scrollbar { display: none; }
.fchip { position: relative; flex: none; display: inline-flex; }
.fchip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fchip > span { display: inline-flex; align-items: center; gap: .45em; min-height: 42px; padding: .2rem 1.05rem; border-radius: 999px; border: 2px solid var(--meadow); background: var(--white); color: var(--ink); font-size: .875rem; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.fchip:hover > span { border-color: var(--leaf); }
.fchip input:checked + span, .fchip--btn[aria-pressed="true"] > span { border-color: var(--leaf); background: var(--meadow); color: var(--leaf-ink); font-weight: 700; }
.fchip input:focus-visible + span, .fchip--btn:focus-visible > span { outline: 3px solid var(--focus); outline-offset: 2px; }
.fchips--toggle .fchip input:checked + span::before { content: ""; width: .7em; height: .4em; margin-right: .1em; border: 2.5px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-.1em); }
.fchip__n { font-size: .75rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.fchip.is-empty > span { border-style: dashed; color: var(--muted); }
.fchip__dot { display: inline-block; flex: none; width: .75em; height: .75em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.fchip--btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.fchip--btn:focus-visible { outline: none; box-shadow: none; }

/* ---------- Ergänzungen für Seiten ---------- */
.msi { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.section { padding-block: calc(var(--sec) * .72); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: calc(var(--sec) * .5); }
.section--carousel { padding-block: calc(var(--sec) * .55); }
.section--tint { background: linear-gradient(180deg, var(--paper), var(--sky-2) clamp(60px, 8vw, 120px), var(--sky-2) calc(100% - clamp(60px, 8vw, 120px)), var(--paper)); }
.section--tint .hl--blue { --hl-c: color-mix(in srgb, var(--lagoon) 24%, var(--white)); }
.section--mdm + .section, .section--tint + .section { padding-top: calc(var(--sec) * .78); }
.page-head + .kx { margin-bottom: var(--sec); }

/* Themen: Liste mit Regal, das mitzeigt */
.kx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.6rem, 3.5vw, 3.4rem); align-items: start; }
.kx__list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kx__item { --kc: var(--lagoon); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 22px; gap: 1rem; align-items: center; min-height: 84px; padding: 10px 16px 10px 12px; border-radius: 20px; border: 2px solid transparent; transition: background-color .7s var(--ease-out), border-color .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.kx__item::before { content: ""; position: absolute; left: -2px; top: 18px; bottom: 18px; width: 5px; border-radius: 5px; background: var(--kc); transform: scaleY(0); transition: transform .7s var(--ease-out); }
.kx__item.is-on { background: var(--white); border-color: color-mix(in srgb, var(--kc) 50%, var(--white)); box-shadow: 0 18px 32px -26px rgba(11, 46, 53, .55); }
.kx__item.is-on::before { transform: scaleY(1); }
.kx__stack { position: relative; display: block; height: 64px; }
.kx__stack .cover { position: absolute; bottom: 0; width: 38px; box-shadow: 0 8px 14px -10px rgba(11, 46, 53, .65); transition: transform .8s var(--ease-out); }
.kx__stack .cover:nth-child(1) { left: 0; transform: rotate(-8deg); }
.kx__stack .cover:nth-child(2) { left: 18px; z-index: 2; }
.kx__stack .cover:nth-child(3) { left: 36px; transform: rotate(8deg); }
.kx__item.is-on .kx__stack .cover:nth-child(1) { transform: rotate(-15deg) translate(-4px, -3px); }
.kx__item.is-on .kx__stack .cover:nth-child(2) { transform: translateY(-7px); }
.kx__item.is-on .kx__stack .cover:nth-child(3) { transform: rotate(15deg) translate(4px, -3px); }
.kx__txt { min-width: 0; }
.kx__t { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.kx__t a { color: var(--ink); text-decoration: none; }
.kx__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.kx__t a:focus-visible { outline: none; box-shadow: none; }
.kx__item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.kx__p { display: block; margin-top: .15rem; font-size: .8438rem; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx__meta { display: grid; justify-items: end; gap: .1rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.kx__meta b { color: var(--ink); }
.kx__go { width: 20px; height: 20px; color: var(--muted); transition: transform .6s var(--ease-out), color .3s; }
.kx__item.is-on .kx__go { transform: translateX(3px); color: var(--ink); }
.kx__side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }
.kx__cap { display: flex; align-items: center; gap: .75rem; min-height: 3.2em; margin: 0; padding: .6rem 1.1rem; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); font-size: 1rem; color: var(--ink); }
.kx__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--kc); transition: background-color .6s; }
.kx__cap.is-swap [data-kx-cap] { display: inline-block; animation: kxin .7s var(--ease-out) both; }
@keyframes kxin { from { opacity: 0; transform: translateY(6px); } }

/* Platzhalter im Video-Fenster */
.ogs__hands--big { display: block; width: 112px; margin: 0 auto 1rem; color: var(--lagoon); }
.ogs__hands--big .msi { display: block; width: 100%; height: 100%; }

/* Bücherwelt: viele Reihen wie im Streaming */
.section--welt { padding-bottom: calc(var(--sec) * .55); }
.section--welt .sec-head { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.lane + .lane { margin-top: clamp(1.2rem, 2.6vw, 2.2rem); }
.lane__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lane__t { margin: 0; font-size: clamp(1.25rem, 1.1rem + .55vw, 1.6rem); line-height: 1.2; }
.lane__all { flex: none; font-size: .9375rem; }
.lane__all .ico { width: 1em; height: 1em; transition: transform .4s var(--ease-out); }
.lane__all:hover .ico { transform: translateX(3px); }
.lane .carousel__track { padding-top: .9rem; padding-bottom: 1rem; }
.lane .mcard__cover { transition: transform .8s var(--ease-out); }
.lane .mcard:hover .mcard__cover, .lane .mcard:focus-within .mcard__cover { transform: translateY(-8px) scale(1.035); }
.mcard__peek { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; min-height: 66%; padding: 18px 12px 12px 14px; border-radius: 0 0 9px 3px; background: linear-gradient(180deg, rgba(11, 46, 53, 0), rgba(11, 46, 53, .95) 44%); color: #fff; font-size: .8125rem; line-height: 1.4; opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .8s var(--ease-out); pointer-events: none; }
.mcard__peek span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .mcard:hover .mcard__peek, .mcard:focus-within .mcard__peek { opacity: 1; transform: none; } }
.carousel__track.is-drag .mcard__peek { opacity: 0 !important; }
/* Top 10: Karte breiter wegen der Zahl, das Cover bleibt gleich groß wie in den anderen Reihen */
.lane--rank .car { --per: 4; --rp: .22; }
.lane .mcard__title { font-size: .9375rem; }
.lane .mcard { gap: .7rem; }
.mcard--rank .mcard__cover { padding-left: calc(var(--rp, .3) * 100%); container-type: inline-size; }
.mcard--rank .mcard__body { padding-left: calc(var(--rp, .3) * 100%); }
.mcard--rank .cover { position: relative; z-index: 1; }
.mcard--rank .mcard__peek { left: calc(var(--rp, .3) * 100%); }
.rank { position: absolute; z-index: 0; left: -.02em; bottom: -.1em; font-size: calc(64cqi / (1 - var(--rp, .3))); font-weight: 700; line-height: .8; letter-spacing: -.07em; color: var(--paper); -webkit-text-stroke: 3px var(--lagoon); pointer-events: none; transition: transform .8s var(--ease-out), -webkit-text-stroke-color .5s; }
.mcard--rank:hover .rank { transform: translateX(-5px); -webkit-text-stroke-color: var(--play); }
:root[data-contrast="high"] .rank { -webkit-text-stroke-color: var(--hc); }

/* So geht es weiter (im Reservier-Fenster) */
.next-steps { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 1rem 1.1rem; border-radius: 16px; background: var(--sky-2); font-size: .9375rem; color: var(--ink); }
.next-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .7rem; align-items: start; line-height: 1.45; }
.next-steps .msi { width: 22px; height: 22px; color: var(--lagoon-ink); }

/* Detailseite */
.detail { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: center; padding-block: clamp(.6rem, 1.5vw, 1.2rem) clamp(2.6rem, 5vw, 4rem); }
.detail__left { position: static; }
.detail__cv { display: block; width: min(100%, 240px); }
.detail__stage .detail__cv .cover { width: 100%; }
.detail__get { display: grid; gap: .9rem; justify-items: start; padding-top: .3rem; }
.detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tbtn--lg { min-height: 56px; padding: 0 1.4rem; font-size: 1rem; }
.detail__hint { margin: 0; font-size: .9375rem; color: var(--muted); }
.detail__shelf { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 700; }
.detail__shelf .ico { width: 1.25em; height: 1.25em; }
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.about__text { display: grid; gap: 1.1rem; justify-items: start; }
.about__text .detail__desc { margin: 0; }
.about__facts { display: grid; gap: .4rem; margin: 0; padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.about__facts .facts { padding-top: .6rem; border-top: 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mfacts { width: 100%; }
.mfacts summary { display: flex; align-items: center; width: fit-content; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--lagoon-ink); }
.mfacts .facts { padding-top: .8rem; }
.mfacts .quick { margin-top: 1.1rem; }

/* Film neben Text */
.pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.pair--rev > .fx { order: 2; }
.pair__text { display: grid; gap: 1rem; justify-items: start; }
.pair__text p { margin: 0; }
.merk-empty .pair__text > .ico { width: 44px; height: 44px; color: var(--lagoon-ink); stroke-width: 1.4; }

/* Komm vorbei */
.visit { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; }
.visit__info { display: grid; align-content: start; gap: 1.1rem; margin: 0; padding: clamp(1.4rem, 2.5vw, 2rem); }
.visit__rows { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.visit__rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .8rem; align-items: start; line-height: 1.45; }
.visit__rows .msi { width: 24px; height: 24px; margin-top: 1px; color: var(--lagoon-ink); }
.visit__rows a { color: var(--ink); }
.visit__info .btn-row { margin-top: .3rem; }
/* Nur an der weichen Trennstelle trennen: Gehörlosen-verband */
.visit__info > .h3 { hyphens: manual; }
.wish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); }
.wish .text { margin: 1rem 0 0; }

/* Merkliste */
.merkp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.merkp--solo { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.mrow .cover { width: 56px; box-shadow: none; }

@media (max-width: 1099px) {
  .merkp, .pair, .about, .visit, .kx { grid-template-columns: minmax(0, 1fr); }
  .car { --per: 4; }
  .lane--rank .car { --per: 3; --rp: .27; }
  .pair--rev > .fx { order: 0; }
  .kx__side { position: static; order: -1; }
  .detail { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.6rem; }
  .detail__left { max-width: 360px; }
}
@media (max-width: 900px) {
  .car__arrow { display: none; }
  .mdm { grid-template-columns: minmax(0, 1fr); }
  .car { --per: 3; }
  .lane--rank .car { --per: 2; --rp: .35; }
}
@media (max-width: 640px) {
  .car { --per: 2.2; }
  .lane--rank .car { --per: 1.6; --rp: .29; }
  .carousel__track { margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .kx__item { grid-template-columns: 58px minmax(0, 1fr) auto; gap: .8rem; min-height: 74px; padding: 8px 12px 8px 8px; }
  .kx__stack { height: 52px; }
  .kx__stack .cover { width: 30px; }
  .kx__stack .cover:nth-child(2) { left: 13px; }
  .kx__stack .cover:nth-child(3) { left: 26px; }
  .kx__go, .kx__meta span { display: none; }
  .kx__p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .detail__actions .btn { flex: 1 1 auto; }
  .detail__stage { padding: 1.2rem; }
  .detail__cv { width: 150px; }
}
@media print { .fx, .car__arrow { display: none !important; } }

/* Sehr schmale Handys: Beschriftung der unteren Leiste bleibt getrennt */
@media (max-width: 359px) {
  .bar-mobile a, .bar-mobile button { font-size: 10.5px; padding-inline: 1px; }
}

/* Reservier-Fenster: kurzes Nachrichtenfeld, damit „So geht es weiter“ sichtbar bleibt */
#dlg-reserve textarea { min-height: 0; height: 92px; }

/* Rechtliches: Impressum und Datenschutz */
.legal { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-nav .tbtn { text-decoration: none; }
.legal-nav [aria-current="page"] { border-color: var(--lagoon); background: var(--sky-2); }
.legal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.legal__card { display: grid; align-content: start; gap: .9rem; padding: clamp(1.2rem, 2.4vw, 1.8rem); }
.legal__card h2 { margin: 0; }
.legal__card address { font-style: normal; line-height: 1.6; }
.legal__dl { display: grid; gap: .45rem; margin: 0; }
.legal__dl div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .8rem; }
.legal__dl dt { color: var(--muted); font-size: .9375rem; }
.legal__dl dd { margin: 0; }
.legal__prose { max-width: 74ch; }
.legal__prose h2 { margin: 2rem 0 .5rem; }
.legal__prose h2:first-child { margin-top: 0; }
.legal__short { display: grid; gap: .6rem; max-width: 74ch; margin: 0; padding: 1.1rem 1.3rem; list-style: none; border-radius: 20px; background: var(--meadow-2, var(--sky-2)); box-shadow: inset 0 0 0 2px var(--meadow); }
.legal__short li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .7rem; align-items: start; line-height: 1.45; }
.legal__short .ico { width: 22px; height: 22px; color: var(--leaf-ink); }
mark.ph { padding: 0 .25em; border-radius: 4px; background: #FFF1B8; color: #4A3B00; font-weight: 700; }
:root[data-theme="dark"] mark.ph { background: #5A4A10; color: #FFF1B8; }
.legal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.legal-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; color: var(--ink); text-decoration: none; transition: border-color .25s, transform .4s var(--ease-out); }
.legal-link:hover { border-color: var(--lagoon); }
.legal-link > .ico:first-child { width: 36px; height: 36px; color: var(--lagoon-ink); }
.legal-link b { display: block; font-size: 1.125rem; }
.legal-link span span { display: block; color: var(--muted); font-size: .9375rem; }
.legal-link > .ico:last-child { width: 20px; height: 20px; color: var(--muted); }
@media (max-width: 760px) { .legal__grid, .legal-cards { grid-template-columns: minmax(0, 1fr); } .legal__dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }


/* =====================================================================
   ERKLÄR-FILME · Player und Szenen (Fläche 560 x 360)
   ===================================================================== */

/* ---------- Player: wie ein YouTube-Video ----------
   Querformat, so breit wie der Inhalt, passt immer in den Bildschirm.
   Steuerung und Untertitel liegen im Bild. */
.fx { --k: 1; --ox: 0px; --oy: 0px; --ctrl-h: 92px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.fx__frame { position: relative; container-type: inline-size; overflow: hidden; isolation: isolate; border-radius: 26px; background: var(--sky-2); box-shadow: 0 0 0 2px var(--sky), 0 44px 70px -52px rgba(11, 46, 53, .6); }
.fx__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--header-h) - var(--bar-h) - 56px); min-height: 220px; overflow: hidden; isolation: isolate; background: var(--sky-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx__stage::before, .fx__stage::after { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.fx__stage::before { width: 50%; left: -14%; top: -40%; background: var(--meadow); opacity: .6; }
.fx__stage::after { width: 44%; right: -10%; bottom: -42%; background: var(--sky); opacity: .9; }
.fx__canvas { position: absolute; z-index: 1; left: 0; top: 0; width: 560px; height: 360px; transform-origin: 0 0; transform: translate(var(--ox), var(--oy)) scale(var(--k)); font-size: 16px; line-height: 1.25; color: var(--ink); pointer-events: none; }
.fx__canvas * { box-sizing: border-box; }
.fx:not(.fx--bare) .fx-bg { display: none; }
/* Großer Startknopf */
.fx__big { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 0; border: 0; background: color-mix(in srgb, var(--paper) 46%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--ink); font-weight: 700; cursor: pointer; transition: opacity .6s var(--ease-out), visibility 0s linear .6s; }
.fx.is-started:not(.is-ended) .fx__big { opacity: 0; visibility: hidden; }
.fx__bigdot { display: grid; place-items: center; width: clamp(64px, 9cqi, 96px); height: clamp(64px, 9cqi, 96px); border-radius: 50%; background: var(--play); color: #fff; box-shadow: 0 0 0 6px #fff, 0 18px 36px -14px rgba(11, 46, 53, .7); transition: transform .5s var(--ease-out); }
.fx__bigdot .msi { width: 54%; height: 54%; fill: currentColor; }
.fx__i-replay, .fx.is-ended .fx__bigdot .fx__i-play { display: none; }
.fx.is-ended .fx__bigdot .fx__i-replay { display: block; }
.fx__big:hover .fx__bigdot { transform: scale(1.06); }
/* Am Ende: der Schluss bleibt sichtbar, „Nochmal ansehen“ sitzt unten */
.fx.is-ended .fx__big { place-content: end center; grid-auto-flow: column; align-items: center; gap: 12px; padding-bottom: calc(var(--ctrl-h) + 14px); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx.is-ended .fx__bigdot { width: 52px; height: 52px; box-shadow: 0 0 0 4px #fff, 0 12px 24px -12px rgba(11, 46, 53, .7); }
.fx__bigt { padding: .45rem 1.1rem; border-radius: 999px; background: var(--deep); color: #fff; font-size: .9375rem; }
.fx__bt-replay, .fx.is-ended .fx__bt-play { display: none; }
.fx.is-ended .fx__bt-replay { display: inline; }
/* Untertitel im Bild: jede neue Zeile springt weich auf */
.fx__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; margin: 0; padding: 0 6%; pointer-events: none; transition: bottom .35s var(--ease-out), opacity .3s; }
.fx:not(.is-started) .fx__cap, .fx.no-cc .fx__cap, .fx.is-ended .fx__cap { opacity: 0; }
.fx.is-started.is-ui .fx__cap, .fx.is-started:not(.is-playing) .fx__cap { bottom: var(--ctrl-h); }
.fx__c { max-width: 86%; padding: .28em .8em .34em; border-radius: 12px; background: rgba(11, 46, 53, .9); color: #fff; font-weight: 700; font-size: clamp(15px, 2.3cqi, 30px); line-height: 1.3; text-align: center; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55); }
.fx__c:empty { display: none; }
.fx__c.is-new { animation: fxpop .55s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes fxpop { from { opacity: 0; transform: translateY(16px) scale(.9); } }
/* Steuerung im Bild */
.fx__ctrl { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 30px clamp(10px, 1.6cqi, 18px) clamp(4px, .8cqi, 10px); background: linear-gradient(180deg, rgba(6, 26, 30, 0), rgba(6, 26, 30, .58) 42%, rgba(6, 26, 30, .86)); color: #fff; cursor: default; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .4s var(--ease-out), visibility 0s linear .4s; }
.fx.is-started.is-ui .fx__ctrl, .fx.is-started:not(.is-playing) .fx__ctrl { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .4s var(--ease-out), visibility 0s; }
.fx.is-started.is-playing:not(.is-ui) .fx__stage { cursor: none; }
.fx__track { --p: 0; position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: 6px; }
.fx__track:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fx__segs { display: flex; gap: 4px; width: 100%; height: 5px; transition: height .2s; }
.fx__track:hover .fx__segs, .fx.is-scrub .fx__segs, .fx__track:focus-visible .fx__segs { height: 8px; }
.fx__ch { --cp: 0; position: relative; flex: var(--g) 1 0; min-width: 0; height: 100%; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .36); }
.fx__ch i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--cp)); background: var(--lagoon); }
.fx__knob { position: absolute; left: calc(var(--p) * 100%); top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--lagoon); box-shadow: 0 0 0 3px #fff; transform: scale(0); transition: transform .2s var(--ease-out); }
.fx__track:hover .fx__knob, .fx__track:focus-visible .fx__knob, .fx.is-scrub .fx__knob { transform: scale(1); }
.fx__tip { position: absolute; left: var(--x, 50%); bottom: calc(100% + 8px); padding: 4px 10px; border-radius: 8px; background: rgba(6, 26, 30, .94); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%); transition: opacity .15s; }
.fx__track.is-tip .fx__tip { opacity: 1; }
.fx__bar { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.fx__btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; transition: background-color .2s, opacity .2s; }
.fx__btn:hover { background: rgba(255, 255, 255, .16); }
.fx__btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.fx__btn .msi { width: 26px; height: 26px; fill: currentColor; }
.fx__btn[data-fx-cc][aria-pressed="false"] { opacity: .55; }
.fx__i-pause, .fx.is-playing .fx__toggle .fx__i-play, .fx__i-fsx, .fx.is-fs .fx__i-fs { display: none; }
.fx.is-playing .fx__toggle .fx__i-pause, .fx.is-fs .fx__i-fsx { display: block; }
.fx__time { margin-left: 8px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx__cs { min-width: 0; margin-left: 12px; padding-left: 12px; border-left: 1.5px solid rgba(255, 255, 255, .45); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx__sp { flex: 1 1 0; min-width: 0; }
/* Vollbild */
.fx__frame:fullscreen { border-radius: 0; box-shadow: none; }
.fx__frame:fullscreen .fx__stage { height: 100vh; max-height: none; aspect-ratio: auto; }
/* Schmal (Handy, halbe Breite): etwas höheres Bild, weniger Knöpfe */
@container (max-width: 760px) {
  .fx__stage { aspect-ratio: 4 / 3; }
  .fx { --ctrl-h: 84px; }
}
@container (max-width: 520px) {
  .fx__cs, .fx__btn[data-fx-cc] { display: none; }
  .fx__btn { width: 40px; height: 40px; }
  .fx__time { margin-left: 4px; font-size: 13px; }
  .fx__c { font-size: 15px; max-width: 94%; }
}
.fx__foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 18px; }
.fx__all { flex: 1 1 240px; font-size: .9375rem; }
.fx__all summary { display: flex; align-items: center; width: fit-content; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--lagoon-ink); }
.fx__all ol, .fx__all ul { margin: .2rem 0 0; padding-left: 1.3rem; }
.fx__all ol > li > b { display: block; margin-top: .5rem; color: var(--ink); }
.fx--bare { display: block; }
.fx--bare .fx__stage { background: transparent; aspect-ratio: 560 / 360; cursor: default; }
.fx--bare .fx__stage::before, .fx--bare .fx__stage::after { display: none; }
:root[data-contrast="high"] .fx__frame { box-shadow: 0 0 0 2px var(--hc); }
@media (max-width: 640px) {
  .fx__frame { border-radius: 20px; }
}
:root.reduce-motion .fx__c.is-new { animation: none; }

/* ---------- Szenen: Grundlagen ---------- */
.fx-set { position: absolute; inset: 0; }
.fx-bg { position: absolute; inset: 0; overflow: hidden; }
.fx-blob { position: absolute; border-radius: 50%; }
.fx-blob--1 { width: 320px; height: 320px; left: -110px; top: -150px; background: var(--meadow); opacity: .6; }
.fx-blob--2 { width: 280px; height: 280px; right: -90px; bottom: -150px; background: var(--sky); opacity: .9; }
.fx__canvas .msi { display: block; width: 100%; height: 100%; fill: currentColor; }
.fx-caret { display: inline-block; width: 2px; height: 20px; margin-left: 2px; vertical-align: middle; background: var(--lagoon-ink); animation: fxblink 1s steps(1) infinite; }
@keyframes fxblink { 50% { opacity: 0; } }
.fx-card, .a-card, .k-list, .k-c { background: var(--white); border-radius: 22px; box-shadow: 0 0 0 2px var(--sky), 0 24px 44px -28px rgba(11, 46, 53, .5); }
.a-q i { display: inline-block; overflow: hidden; vertical-align: bottom; font-style: normal; white-space: pre; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--leaf); background: var(--white); box-shadow: 0 0 0 3px var(--meadow); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }

/* Finger und Tipp-Kreis */
.fx-hand { position: absolute; z-index: 20; left: 0; top: 0; width: 50px; height: 50px; transform-origin: 36% 19%; filter: drop-shadow(0 6px 8px rgba(11, 46, 53, .35)); }
.fx-hand .msi { position: absolute; inset: 0; }
.fx-hand__b { fill: #fff !important; transform: scale(1.16); transform-origin: 40% 40%; }
.fx-hand__i { fill: var(--deep) !important; }
:root[data-theme="dark"] .fx-hand__i { fill: #0B2E35 !important; }
.fx-ripple { position: absolute; z-index: 19; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--lagoon) 55%, transparent); box-shadow: 0 0 0 2px var(--lagoon); }

/* ---------- Szene: App (Finden, Reservieren) ---------- */
.a-card { position: absolute; left: 90px; top: 30px; width: 380px; height: 300px; overflow: hidden; }
.a-top { position: absolute; left: 18px; top: 13px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.a-top img { height: 26px; width: auto; }
.a-view { position: absolute; left: 18px; right: 18px; top: 56px; bottom: 14px; }
.a-field { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--sky); font-size: 17px; color: var(--text); }
.fx .a-field > .msi { flex: none; width: 22px; height: 22px; color: var(--muted); }
.a-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--lagoon), 0 0 0 5px var(--halo); }
.a-res { position: absolute; left: 0; right: 0; top: 62px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.a-row { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; height: 50px; padding: 0 12px 0 10px; border-radius: 14px; background: var(--sky-2); }
.a-row .cover, .a-cv .cover { width: 26px; border-radius: 2px 4px 4px 2px; box-shadow: none; }
.a-rt { min-width: 0; }
.a-rt b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-rt span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-hit { position: absolute; inset: 0; opacity: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--lagoon); background: color-mix(in srgb, var(--lagoon) 14%, transparent); }
.a-dcv { position: absolute; left: 0; top: 4px; width: 96px; }
.a-dcv .cover { box-shadow: 0 16px 24px -16px rgba(11, 46, 53, .7); }
.a-dtx { position: absolute; left: 114px; right: 0; top: 2px; display: grid; gap: 6px; justify-items: start; }
.a-dt { font-size: 19px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-db { font-size: 13px; color: var(--muted); }
.a-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--leaf-ink); }
.a-st i { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); }
.a-actions { position: absolute; left: 114px; top: 176px; display: flex; align-items: center; gap: 10px; }
.a-heart { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sky); color: var(--muted); }
.fx .a-heart .msi { width: 20px; height: 20px; }

/* ---------- Szene: Formular als Fenster ---------- */
.a-dim { position: absolute; inset: 0; z-index: 4; background: rgba(11, 46, 53, .34); }
.a-dlg { position: absolute; z-index: 5; left: 22px; top: 12px; width: 336px; height: 276px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 26px 46px -22px rgba(11, 46, 53, .7); }
.a-dform, .a-dok { position: absolute; inset: 0; }
.g-h { position: absolute; left: 18px; top: 14px; font-size: 17px; }
.g-s { position: absolute; left: 18px; top: 36px; font-size: 12px; color: var(--muted); }
.g-l { position: absolute; left: 18px; font-size: 12px; font-weight: 700; color: var(--muted); }
.g-l1 { top: 60px; } .g-l2 { top: 120px; }
.g-in { position: absolute; left: 18px; right: 18px; height: 36px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--sky); font-size: 15px; color: var(--text); }
.g-in1 { top: 77px; } .g-in2 { top: 137px; }
.g-v1 i, .g-v2 i { display: inline-block; overflow: hidden; vertical-align: bottom; font-style: normal; white-space: pre; }
.g-chk { position: absolute; left: 18px; top: 186px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink); }
.g-box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); color: #fff; }
.g-box .msi { width: 16px; height: 16px; }
.g-send { position: absolute; left: 18px; top: 210px; height: 38px; }
.a-dok { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 0 28px; text-align: center; }
.a-dokic { width: 58px !important; height: 58px !important; color: var(--leaf); }
.a-dok b { font-size: 21px; }
.a-dok span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ---------- Szene: E-Mail mit Termin ---------- */
.m-card { position: absolute; left: 110px; top: 26px; width: 340px; height: 308px; overflow: hidden; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 24px 44px -28px rgba(11, 46, 53, .5); }
.m-top { position: absolute; left: 18px; top: 14px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.m-top .msi { width: 22px; height: 22px; color: var(--lagoon-ink); }
.m-av { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #4E9C43; color: #fff; }
.m-av .msi { width: 24px !important; height: 24px !important; }
.m-row { position: absolute; left: 14px; right: 14px; top: 54px; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px; border-radius: 16px; background: var(--sky-2); }
.m-rt b { display: block; font-size: 14px; line-height: 1.2; }
.m-rt span { display: block; font-size: 12.5px; color: var(--muted); }
.m-dot { margin-left: auto; width: 11px; height: 11px; border-radius: 50%; background: var(--play); }
.m-hit { position: absolute; inset: 0; opacity: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--lagoon); }
.m-old { position: absolute; left: 14px; right: 14px; height: 52px; display: grid; align-content: center; gap: 8px; padding: 0 16px 0 60px; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--line); }
.m-old1 { top: 124px; } .m-old2 { top: 186px; }
.m-old i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.m-old i + i { width: 60%; }
.m-open { position: absolute; left: 18px; right: 18px; top: 54px; bottom: 14px; }
.m-from { display: flex; align-items: center; gap: 10px; }
.m-from b { display: block; font-size: 14px; line-height: 1.2; }
.m-from span span { display: block; font-size: 12px; color: var(--muted); }
.m-p { position: absolute; left: 0; right: 0; top: 50px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.m-date { position: absolute; left: 0; top: 88px; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px 0 12px; border-radius: 16px; background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--lagoon); color: var(--ink); transform-origin: 0 50%; }
.m-cal { display: grid; grid-template-columns: repeat(7, 6px); gap: 3px; padding: 7px 7px 6px; border-radius: 8px; background: var(--white); box-shadow: inset 0 5px 0 var(--lagoon), 0 0 0 1.5px var(--sky); padding-top: 11px; }
.m-cal i { width: 6px; height: 6px; border-radius: 2px; background: var(--sky); }
.m-cal .m-day { background: var(--play); box-shadow: 0 0 0 2px color-mix(in srgb, var(--play) 30%, transparent); }
.m-dt b { display: block; font-size: 15px; line-height: 1.2; }
.m-dt span { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.m-dt .msi { width: 16px !important; height: 16px !important; color: var(--lagoon-ink); }
.m-q { position: absolute; left: 0; top: 156px; margin: 0; font-size: 14px; color: var(--text); }
.m-btn { position: absolute; left: 0; top: 182px; }
.m-reply { position: absolute; right: 0; top: 182px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border-radius: 18px 18px 4px 18px; background: var(--play); color: #fff; font-size: 14px; font-weight: 700; }
.m-reply .msi { width: 18px !important; height: 18px !important; }

/* ---------- Karte von oben (Video und „Komm vorbei“) ---------- */
.mp { display: block; width: 100%; height: 100%; }
.mp-land { fill: color-mix(in srgb, var(--sky-2) 65%, var(--white)); }
.mp-b { fill: var(--white); stroke: color-mix(in srgb, var(--sky) 70%, var(--white)); stroke-width: 1.2; }
.mp-b2 { fill: color-mix(in srgb, var(--sky) 38%, var(--white)); }
.mp-parks > * { fill: var(--meadow); }
.mp-cs { fill: none; stroke: var(--sky); stroke-width: 26; stroke-linecap: round; }
.mp-cs--main { stroke: color-mix(in srgb, var(--lagoon) 55%, var(--sky)); stroke-width: 31; }
.mp-st { fill: none; stroke: var(--white); stroke-width: 18; stroke-linecap: round; }
.mp-st--main { stroke-width: 23; }
.mp-lbl { font: 700 13px var(--font); fill: var(--muted); letter-spacing: .02em; }
.mp-db { fill: var(--lagoon); }
.mp-ring { fill: none; stroke: var(--lagoon); stroke-width: 3; }
.mp-mk { fill: #fff; stroke: var(--lagoon-ink); stroke-width: 2.5; }
.mp-cam, .mp-drift, .mp-dest, .mp-ring { transform-box: view-box; transform-origin: 536px 306px; }
/* Im Video */
.w-map { position: absolute; left: 30px; top: 22px; width: 500px; height: 300px; overflow: hidden; border-radius: 22px; background: var(--sky-2); box-shadow: 0 0 0 2px var(--sky), 0 24px 44px -28px rgba(11, 46, 53, .5); }
.w-map .mp-cs, .w-map .mp-st { stroke-dasharray: 1; }
.w-addr { position: absolute; left: 46px; top: 222px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 16px 30px -18px rgba(11, 46, 53, .6); }
.w-addr img { width: 44px; height: auto; }
.w-addr b { display: block; font-size: 15px; line-height: 1.25; color: var(--ink); }
.w-addr span span { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* ---------- Szene: Tausch. Du links, Bibliothek rechts ---------- */
.x-l { position: absolute; left: 184px; width: 192px; height: 0; border-top: 3px dashed var(--sky); }
.x-l1 { top: 125px; }
.x-l2 { top: 199px; }
.x-lt { position: absolute; left: 280px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--muted); }
.x-lt1 { top: 64px; }
.x-lt2 { top: 232px; }
.x-av { position: absolute; top: 110px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 5px var(--white), 0 18px 30px -16px rgba(11, 46, 53, .6); }
.x-du { left: 62px; background: var(--play); color: #fff; }
.x-du .msi { width: 62% !important; height: 62% !important; }
.x-bib { left: 394px; background: #fff; }
.x-bib img { width: 70%; height: auto; }
.x-n { position: absolute; top: 230px; width: max-content; padding: 4px 12px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2px var(--sky); font-size: 14px; font-weight: 700; color: var(--ink); transform: translateX(-50%); }
.x-n1 { left: 114px; }
.x-n2 { left: 446px; }
.x-book { position: absolute; z-index: 3; left: 329px; top: 90px; width: 50px; }
.x-book .cover { width: 50px; box-shadow: 0 0 0 2px var(--white), 0 12px 20px -10px rgba(11, 46, 53, .7); }
.x-coin { position: absolute; z-index: 3; left: 164px; top: 175px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--deep); box-shadow: inset 0 0 0 4px var(--lagoon), 0 10px 16px -10px rgba(11, 46, 53, .7); }
:root[data-theme="dark"] .x-coin { color: #EDF2F3; }
.x-coin .msi { width: 26px !important; height: 26px !important; }
.x-rcpt { position: absolute; z-index: 4; left: 34px; top: 278px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 2px var(--meadow), 0 16px 28px -18px rgba(11, 46, 53, .6); }
.x-rcpt > .msi { width: 28px !important; height: 28px !important; color: var(--lagoon-ink); }
.x-rcpt b { display: block; font-size: 14px; line-height: 1.2; }
.x-rcpt span span { display: block; font-size: 12px; color: var(--muted); }
.x-rcpt .x-rcok { width: 22px !important; height: 22px !important; color: var(--leaf); }
.x-done { position: absolute; z-index: 6; left: 0; right: 0; top: 284px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px 0 14px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2px var(--meadow), 0 14px 26px -18px rgba(11, 46, 53, .6); font-size: 16px; font-weight: 700; color: var(--leaf-ink); }
.x-done .msi { width: 26px !important; height: 26px !important; color: var(--leaf); }

/* ---------- Schluss: glücklich ---------- */
.z-face { position: absolute; left: 220px; top: 50px; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--play); color: #fff; box-shadow: 0 0 0 7px var(--white), 0 24px 40px -18px rgba(11, 46, 53, .6); }
.z-face .msi { width: 78px !important; height: 78px !important; }
.z-book { position: absolute; left: 316px; top: 96px; width: 58px; transform-origin: 30% 90%; }
.z-book .cover { width: 58px; box-shadow: 0 0 0 3px var(--white), 0 14px 22px -10px rgba(11, 46, 53, .6); }
.z-t { position: absolute; left: 0; right: 0; top: 212px; text-align: center; font-size: 26px; line-height: 1.2; color: var(--ink); }
.z-logo { position: absolute; left: 0; right: 0; top: 262px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2px var(--sky); font-size: 13px; font-weight: 700; color: var(--ink); }
.z-logo img { height: 22px; width: auto; }
.z-c { position: absolute; left: 276px; top: 106px; width: 12px; height: 12px; border-radius: 3px; background: var(--lagoon); }
.z-c:nth-child(3n) { background: var(--leaf); border-radius: 50%; }
.z-c:nth-child(3n+1) { background: var(--heart); width: 9px; height: 14px; }
.z-c:nth-child(4n) { background: #F2C94C; }

/* ---------- Szene: Leihzeit ---------- */
.t-card { position: absolute; left: 90px; top: 60px; width: 380px; height: 166px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 24px 44px -28px rgba(11, 46, 53, .5); }
.t-h { position: absolute; left: 22px; top: 20px; display: flex; align-items: center; gap: 9px; font-size: 17px; }
.t-h .msi { width: 24px !important; height: 24px !important; color: var(--lagoon-ink); }
.t-bar { position: absolute; left: 40px; top: 86px; width: 300px; height: 14px; overflow: hidden; border-radius: 7px; background: var(--sky); }
.t-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--lagoon); }
.t-now { position: absolute; left: 28px; top: 81px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--lagoon-ink), 0 4px 10px rgba(11, 46, 53, .35); }
.t-a, .t-b { position: absolute; top: 118px; font-size: 13px; font-weight: 700; color: var(--muted); }
.t-a { left: 40px; }
.t-b { right: 40px; }
.t-end { position: absolute; left: 0; right: 0; top: 252px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2px var(--lagoon), 0 14px 26px -18px rgba(11, 46, 53, .6); font-size: 17px; font-weight: 700; color: var(--ink); }
.t-end .msi { width: 24px !important; height: 24px !important; color: var(--lagoon-ink); }

/* ---------- Szene: kurze E-Mail schreiben ---------- */
.e-card { position: absolute; left: 90px; top: 22px; width: 380px; height: 232px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 24px 44px -28px rgba(11, 46, 53, .5); }
.e-h { position: absolute; left: 20px; top: 16px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.e-h .msi { width: 22px !important; height: 22px !important; color: var(--lagoon-ink); }
.e-to { position: absolute; left: 20px; right: 20px; top: 48px; padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 13px; color: var(--muted); }
.e-body { position: absolute; left: 20px; right: 20px; top: 82px; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.e-body .tw { white-space: nowrap; }
.e-body i { font-style: normal; }
.e-send { position: absolute; right: 20px; bottom: 18px; width: 112px; height: 38px; gap: 6px; padding: 0; border-color: var(--play); background: var(--play); box-shadow: none; color: #fff; }
.e-send .msi { width: 18px !important; height: 18px !important; }
.e-send > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
/* Felder für Datum und Uhrzeit, wie beim Termin zum Abholen */
.tw-chip { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px 0 7px; border-radius: 9px; background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--lagoon); font-size: 15px; font-weight: 700; color: var(--ink); vertical-align: 1px; }
.tw-chip .msi { width: 17px !important; height: 17px !important; color: var(--lagoon-ink); }
/* Antwort der Bibliothek */
.e-rav { position: absolute; left: 90px; top: 270px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--sky), 0 14px 26px -18px rgba(11, 46, 53, .6); }
.e-rav img { width: 72%; height: auto; }
.e-dots, .e-rep { position: absolute; left: 144px; top: 270px; height: 42px; border-radius: 18px 18px 18px 4px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 14px 26px -18px rgba(11, 46, 53, .6); transform-origin: 0 100%; }
.e-dots { display: flex; align-items: center; gap: 5px; padding: 0 15px; }
.e-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.e-rep { display: flex; align-items: center; padding: 0 18px; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- Film: Merkliste ---------- */
.k-top { position: absolute; left: 24px; right: 24px; top: 14px; height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.k-top img { height: 26px; width: auto; }
.k-badge { position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; gap: 8px; width: 84px; height: 44px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--sky); color: var(--ink); }
.k-badge .msi { width: 22px; height: 22px; }
.k-n { position: relative; display: block; width: 14px; height: 20px; }
.k-n i { position: absolute; inset: 0; font-style: normal; font-size: 17px; line-height: 20px; text-align: center; }
.k-grid { position: absolute; left: 24px; right: 24px; top: 78px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.k-c { position: relative; height: 220px; padding: 12px 12px 0; display: grid; align-content: start; justify-items: center; gap: 8px; border-radius: 18px; }
.k-cv { width: 86px; height: 128px; display: flex; align-items: flex-end; }
.k-cv .cover { width: 86px; }
.k-c > b { justify-self: start; width: calc(100% - 44px); font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-h { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--sky); }
.k-h .msi { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; }
.k-ho { color: var(--muted); }
.k-hf, .k-fly { color: var(--heart); }
.k-hf { opacity: 0; }
.k-fly { position: absolute; z-index: 15; width: 26px; height: 26px; }
.k-fly1 { left: 145px; top: 259px; }
.k-fly2 { left: 497px; top: 259px; }
.k-list { position: absolute; left: 196px; top: 74px; width: 340px; height: 262px; padding: 16px 18px; }
.k-lh { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.k-lh .msi { width: 22px; height: 22px; color: var(--heart); }
.k-row { position: absolute; left: 18px; right: 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; height: 54px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--sky-2); }
.k-row1 { top: 56px; } .k-row2 { top: 118px; }
.k-rcv .cover { width: 30px; box-shadow: none; }
.k-rt { display: block; min-width: 0; }
.k-rt b { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-all { position: absolute; left: 18px; top: 196px; }
.k-done { position: absolute; left: 18px; top: 200px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--leaf-ink); }
.k-done .msi { width: 24px; height: 24px; color: var(--leaf); }

/* ---------- Karte: erst die gezeichnete Karte, Google Maps nur nach Zustimmung ---------- */
.mapfx { position: relative; overflow: hidden; border-radius: var(--r); background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--sky); }
.mapfx__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky-2); }
.mapfx__art .mp { position: absolute; inset: 0; }
.mapfx__logo { width: 44px; height: auto; flex: none; }
/* Animation, sobald die Karte sichtbar ist */
.mapfx .mp-cs, .mapfx .mp-st { stroke-dasharray: 1; }
.mapfx:not(.is-in) .mp-cs, .mapfx:not(.is-in) .mp-st { stroke-dashoffset: 1; }
.mapfx:not(.is-in) :is(.mp-blocks, .mp-parks, .mp-lbl, .mp-dest) { opacity: 0; }
.mapfx:not(.is-in) .mapfx__pin { opacity: 0; transform: translateY(16px); }
.mapfx.is-in :is(.mp-cs, .mp-st) { animation: mpdraw 1.5s cubic-bezier(.45, 0, .2, 1) backwards; animation-delay: calc(.15s + var(--i) * 110ms); }
.mapfx.is-in .mp-blocks { animation: mpfade 1.2s ease .3s backwards; }
.mapfx.is-in .mp-parks { animation: mpfade 1.2s ease .5s backwards; }
.mapfx.is-in .mp-lbl { animation: mpfade .8s ease 1.4s backwards; }
.mapfx.is-in .mp-dest { animation: mppop .8s cubic-bezier(.34, 1.4, .64, 1) 1.6s backwards; }
.mapfx.is-in .mp-ring { animation: mpring 2.6s ease-out 2.4s infinite; }
.mapfx.is-in .mp-cam { animation: mpzoom 3.8s cubic-bezier(.65, 0, .35, 1) .2s both; }
.mapfx.is-in .mp-drift { animation: mpdrift 18s ease-in-out 4s infinite alternate; }
.mapfx.is-in .mapfx__pin { animation: mpin .8s var(--ease-out) 2.1s backwards; }
@keyframes mpdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mpfade { from { opacity: 0; } }
@keyframes mppop { from { opacity: 0; transform: scale(.5); } }
@keyframes mpring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(2.5); } }
@keyframes mpzoom { from { transform: scale(1); } to { transform: scale(1.65); } }
@keyframes mpdrift { to { transform: rotate(-2deg) scale(1.05); } }
@keyframes mpin { from { opacity: 0; transform: translateY(16px); } }
:root.reduce-motion .mapfx * { animation: none !important; }
@media (max-width: 640px) {
  .mapfx__art { aspect-ratio: 4 / 3; }
  .mapfx__pin { left: 10px; bottom: 10px; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; }
  .mapfx__logo { width: 32px; }
  .mapfx__pin b { font-size: .875rem; }
  .mapfx__pin span span { font-size: .75rem; }
}
:root.reduce-motion .mapfx .mp-cam { transform: scale(1.65); }
:root.reduce-motion .mapfx :is(.mp-cs, .mp-st) { stroke-dashoffset: 0; }
.mapfx__pin { position: absolute; z-index: 2; left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.mapfx__pin > .msi { width: 34px; height: 34px; color: var(--play); }
.mapfx__pin b { display: block; line-height: 1.25; }
.mapfx__pin span span { display: block; font-size: .875rem; color: var(--muted); }
.mapfx iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.mapfx__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; background: var(--white); border-top: 2px solid var(--sky); font-size: .875rem; }
.mapfx__bar p { flex: 1 1 260px; margin: 0; color: var(--muted); }
.mapfx__bar .check { font-size: .8125rem; }


/* =====================================================================
   DAS VIRTUELLE REGAL · im Stil der Erklär-Videos
   Weiße Kästen mit Nummern auf hellblauer Fläche, alle Medien als
   Buchrücken in der Farbe ihres Covers. Passt immer in den Bildschirm.
   ===================================================================== */
.shx { --fh: clamp(40px, calc((100svh - var(--header-h) - var(--bar-h) - 356px) / 6), 84px); position: relative; }
.shx__stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--sky); }
.shx__stage::before, .shx__stage::after { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.shx__stage::before { width: 34%; left: -12%; top: -30%; background: var(--meadow); opacity: .55; }
.shx__stage::after { width: 30%; right: -9%; bottom: -30%; background: var(--sky); opacity: .9; }
.shx__view { position: relative; z-index: 1; }
/* Die Kamera: zoomt beim Öffnen weich in den Kasten */
.shx__cam { position: relative; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); transition: transform 1s cubic-bezier(.65, 0, .25, 1); }
.shx__cam.is-moving { will-change: transform; }
.shx__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; padding: 26px 22px 22px; }

/* Ein Kasten */
.shx__k { position: relative; padding: 18px 12px 10px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 20px 36px -30px rgba(11, 46, 53, .5); transition: opacity .7s var(--ease-out), box-shadow .6s var(--ease-out); }
.shx__kn { position: absolute; top: -14px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: var(--deep); font-size: .8125rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px var(--sky-2); transition: background-color .5s, transform .6s var(--ease-out); }
.shx__kin { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 10px; }
.shx__wall { margin-top: 22px; border-radius: 2px; background: var(--sky); }
.shx__side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 5px; min-width: 0; transition: opacity .6s var(--ease-out), filter .6s var(--ease-out); }
.shx__sign { display: flex; align-items: center; gap: .4em; min-height: 18px; margin: 0; font-size: .6875rem; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.shx__sign i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kc); }
.shx__sign span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shx__side--res .shx__sign { font-weight: 400; color: var(--muted); }
/* Schild mit Kürzeln: Klebepunkt + Kürzel, so wie auf den Etiketten im Regal */
.shx__sign--codes { gap: .7em; overflow: hidden; }
.shx__code { display: inline-flex; flex: none; align-items: center; gap: .3em; }
.shx__more { color: var(--muted); }
.fchip__code { font-weight: 800; }

/* Ein Fach: Nummer oben links, unten der Boden */
.shx__f { position: relative; display: block; width: 100%; height: calc(var(--fh) + 18px); margin: 0; padding: 15px 5px 0; border: 0; border-radius: 9px 9px 3px 3px; background: transparent; color: inherit; cursor: pointer; transition: background-color .35s var(--ease-out); }
.shx__f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--sky); transition: background-color .35s var(--ease-out); }
.shx__fl { position: absolute; left: 5px; top: 2px; font-size: 10px; font-weight: 700; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.shx__f:hover { background: color-mix(in srgb, var(--lagoon) 12%, transparent); }
.shx__f:hover::after { background: var(--lagoon); }
.shx__f:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shx__f[aria-expanded="true"] { background: color-mix(in srgb, var(--leaf) 24%, transparent); }
.shx__f[aria-expanded="true"]::after { background: var(--leaf); }
.shx__f[aria-expanded="true"] .shx__fl { color: var(--ink); }
.shx__f--res { cursor: default; border-radius: 9px; background: repeating-linear-gradient(135deg, var(--res-a) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1.5px var(--line); }
.shx__f--res::after { display: none; }
.shx__bk { display: flex; align-items: flex-end; height: calc(100% - 4px); transform-origin: 50% 100%; contain: layout paint style; }
/* Einblenden: Fach für Fach (30 kleine Bewegungen statt 1000), damit nichts ruckelt */
.shx:not(.is-in) .shx__bk { transform: scaleY(0); }
.shx.is-in .shx__bk { animation: bkgrow .7s var(--ease-out) backwards; animation-delay: calc(var(--fi, 0) * 40ms); }
@keyframes bkgrow { from { opacity: 0; transform: scaleY(0); } }
:root.reduce-motion .shx .shx__bk { animation: none; transform: none; }

/* Buchrücken: Farbe wie das Cover, ohne Streifen */
.sp { flex: var(--g) 1 0; min-width: 0; height: var(--h); border-radius: 1.5px 1.5px 0 0; background: var(--c); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .14); transition: transform .3s var(--ease-out); }
.sp--out { background: color-mix(in srgb, var(--c) 16%, var(--white)); box-shadow: inset -1px 0 0 color-mix(in srgb, var(--c) 26%, var(--white)); }
.sp.is-hover { position: relative; z-index: 2; transform: translateY(-6px); box-shadow: 0 0 0 1.5px var(--white), 0 8px 10px -6px rgba(11, 46, 53, .55); }

/* Titel beim Zeigen mit der Maus */
.shx__tip { position: absolute; z-index: 8; left: var(--x, 0); top: var(--y, 0); max-width: 280px; padding: 6px 11px; border-radius: 10px; background: var(--deep); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 6px)); transition: opacity .18s; }
.shx__tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .18s, transform .3s var(--ease-out); }
:root[data-theme="dark"] .shx__tip { background: var(--lagoon); color: #031417; }

/* Geöffnet: der Kasten ist markiert, die anderen treten zurück */
.shx[data-shelf] .shx__k { cursor: pointer; }
.shx.is-open .shx__k:not(.is-k) { opacity: .55; }
.shx.is-open .shx__k:not(.is-k):hover { opacity: .9; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagoon) 60%, var(--sky)), 0 20px 36px -30px rgba(11, 46, 53, .5); }
.shx__k.is-k { box-shadow: 0 0 0 3px var(--lagoon), 0 0 0 9px var(--halo), 0 20px 36px -30px rgba(11, 46, 53, .5); }
.shx__k.is-k .shx__kn { background: var(--lagoon); transform: scale(1.14); }

/* Thema zeigen */
.shx.has-kat .shx__side:not(.is-kat) { opacity: .22; filter: saturate(.25); }
.shf-chips { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.shf-hint { display: none; margin: -.4rem 0 1rem; font-size: .875rem; color: var(--muted); }
:root[data-contrast="high"] .shx__k { box-shadow: 0 0 0 2px var(--hc); }

/* ---------- Das offene Fach ---------- */
.shx__panel { position: absolute; z-index: 3; top: 14px; right: 14px; bottom: 14px; width: calc(50% - 14px); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 2px var(--sky), 0 30px 60px -30px rgba(11, 46, 53, .45); }
.shx__panel[hidden] { display: none; }
.shp__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; }
.shp__no { flex: none; display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 10px; border-radius: 12px; background: var(--lagoon); color: var(--deep); font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.shp__kat { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5em; margin: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.2; }
.shp__kat i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--kc); }
.shp__kat:focus { outline: none; }
.shp__all { display: inline-flex; align-items: center; gap: .25em; min-height: 44px; font-size: .875rem; white-space: nowrap; }
.shp__all .ico { width: 1em; height: 1em; }
.shp__shelf { position: relative; flex: none; overflow: hidden; margin: 0 14px; border-radius: 18px; background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--sky); }
.shp__row { position: relative; display: flex; align-items: flex-end; gap: 3px; height: clamp(150px, 25svh, 220px); padding: 26px 24px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 8px solid var(--sky); }
.shp__row::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .shp__row { cursor: grab; } }
.shp__row.is-drag { cursor: grabbing; user-select: none; }
.shp__row.is-drag > * { pointer-events: none; }
.shp__arr { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -25px; padding: 0; border-radius: 50%; border: 2px solid var(--sky); background: var(--white); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(11, 46, 53, .55); transition: opacity .3s, transform .3s var(--ease-out), border-color .2s; }
.shp__arr:hover { border-color: var(--lagoon); transform: scale(1.06); }
.shp__arr .ico { width: 20px; height: 20px; }
.shp__arr--l { left: 8px; }
.shp__arr--r { right: 8px; }
.shp__arr:disabled { opacity: 0; pointer-events: none; }
.shp__shelf:not(.is-scroll) .shp__arr { display: none; }
/* Große Buchrücken */
.fvb { position: relative; flex: none; width: var(--w); height: var(--h); margin: 0; padding: 0; border: 0; border-radius: 5px 5px 2px 2px; background: var(--bg); color: var(--fg); cursor: pointer; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .09); transition: transform .45s var(--ease-out), box-shadow .35s var(--ease-out); animation: fvbin .55s var(--ease-out) backwards; animation-delay: calc(var(--i) * 10ms); }
@keyframes fvbin { from { opacity: 0; transform: translateY(24px); } }
.fvb__t { position: absolute; left: 0; right: 0; top: 10px; bottom: 10px; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 12.5px/1.1 var(--font); pointer-events: none; }
.fvb:hover { transform: translateY(-8px); }
.fvb[aria-pressed="true"] { z-index: 2; transform: translateY(-18px); box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--lagoon), 0 18px 22px -12px rgba(11, 46, 53, .55); }
.fvb:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.fvb--out { background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
:root.reduce-motion .fvb { animation: none; transition: none; }
/* Infos */
.shp__info { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: clamp(104px, 10vw, 150px) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: start; padding: 16px 18px 18px; }
.shp__cv .cover { width: 100%; }
.shp__txt { display: grid; gap: .35rem; justify-items: start; min-width: 0; }
.shp__type { display: inline-flex; align-items: center; gap: .4em; margin: 0; padding: .12rem .6rem; border-radius: 999px; background: var(--meadow); color: var(--leaf-ink); font-size: .75rem; font-weight: 700; }
.shp__type .ico { width: 1em; height: 1em; }
.shp__t { margin: .1rem 0 0; font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); line-height: 1.15; }
.shp__s { margin: 0; color: var(--muted); font-size: .9375rem; }
.shp__by { margin: 0; font-weight: 700; font-size: .9375rem; }
.shp__desc { margin: .2rem 0 .3rem; font-size: .9375rem; line-height: 1.5; }
.shp__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Fach davor, nächstes Fach: außen neben dem Regal, mit Fachnummer */
.shx__nav { position: absolute; z-index: 5; top: 50%; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-50%); transition: opacity .4s var(--ease-out), visibility 0s linear .4s; }
.shx.is-open .shx__nav { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out) .2s, visibility 0s; }
.shx__nav--prev { right: calc(100% + 14px); }
.shx__nav--next { left: calc(100% + 14px); }
.shx__navn { padding: 1px 8px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1.5px var(--sky); font-size: .8125rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.shx__navb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--sky); background: var(--white); box-shadow: 0 12px 26px -14px rgba(11, 46, 53, .55); transition: border-color .2s, transform .3s var(--ease-out); }
.shx__navb .ico { width: 22px; height: 22px; }
.shx__nav:hover .shx__navb { border-color: var(--lagoon); transform: scale(1.06); }
.shx__nav:focus-visible { outline: none; }
.shx__nav:focus-visible .shx__navb { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1419px) {
  .shx__nav--prev { right: auto; left: -24px; }
  .shx__nav--next { left: auto; right: -24px; }
}

/* ---------- Tablet und Handy: Kasten für Kasten wischen, Fach darunter ---------- */
@media (max-width: 900px) {
  .shx { --fh: 74px; }
  .shx__view { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shx__view::-webkit-scrollbar { display: none; }
  .shx__cam { transform: none !important; transition: none; }
  .shx__grid { display: flex; gap: 14px; width: max-content; padding: 26px 16px 16px; scroll-padding: 0 16px; }
  .shx__k { flex: 0 0 min(80vw, 380px); scroll-snap-align: center; }
  .shx__panel { position: relative; z-index: 2; inset: auto; width: auto; margin: 0 12px 12px; }
  .shx__navs { display: none; justify-content: space-between; gap: 12px; margin-top: 12px; }
  .shx.is-open .shx__navs { display: flex; }
  .shx__nav { position: static; display: flex; align-items: center; gap: 8px; transform: none; }
  .shx__nav--next { flex-direction: row-reverse; }
  .shx__navb { width: 46px; height: 46px; }
  .shf-hint { display: block; }
  .shp__row { height: 190px; padding: 24px 16px 0; }
  .shp__arr { display: none !important; }
}
@media (max-width: 640px) {
  .shx__stage { border-radius: 22px; }
  .shp__head { flex-wrap: wrap; padding: 12px 10px 8px 12px; }
  .shp__kat { order: 2; flex-basis: calc(100% - 140px); }
  .shp__x { order: 3; }
  .shp__all { order: 4; flex-basis: 100%; min-height: 32px; }
  .shp__info { grid-template-columns: 92px minmax(0, 1fr); padding: 14px 14px 18px; }
}
@media print { .shx, .shf-chips { display: none !important; } }

/* =====================================================================
   Kategorien: die Regal-Seite zum Thema
   ===================================================================== */
.shx--kx { --fh: 120px; display: grid; }
.kx__pane { grid-area: 1 / 1; padding: 16px 16px 12px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 2px var(--sky); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .6s; }
.kx__pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-out) .1s, transform .9s var(--ease-out) .1s, visibility 0s; }
.kx__pane:not(.is-on) .shx__bk { animation: none; }
.kx__pane .shx__sign { font-size: .875rem; }
.kx__pane .shx__fl { font-size: 11px; }


/* =====================================================================
   Ergänzungen für die echten Daten (nicht im Design-Entwurf enthalten)
   ===================================================================== */
/* Reserviert: gelb-oranger Punkt */
.st--res { color: #8A5A00; }
.st--res::before { background: #E7A21B; }
/* Echte Cover: keine gezeichnete Zierlinie, dafür ein feiner Buchrücken */
.cover--img { background: var(--white); }
.cover--img::before { display: none; }
.cover--buch.cover--img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 7px 0 0 -1px rgba(0, 0, 0, .09), inset 8px 0 0 -1px rgba(255, 255, 255, .25); border-radius: inherit; }
/* Lange Titel brechen sauber um und sprengen die Karten nicht */
.mcard, .mcard__body { grid-template-columns: minmax(0, 1fr); }
.mcard__title { overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__by { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail h1, .detail__title, .hl { overflow-wrap: anywhere; hyphens: auto; }
/* Medium des Monats: Text beginnt schon mit einem Zitat */
.mdm__why[data-noq]::before, .mdm__why[data-noq]::after { content: none; }
/* Beschreibung mit Aufzählung */
.detail__list { max-width: 62ch; margin: 0 0 1em; padding-left: 1.3em; font-size: 1.0625rem; }
.detail__list li { margin: .25em 0; }
.detail__list li::marker { color: var(--lagoon-ink); }
/* Etikett im Regal-Infokärtchen */
.shp__sig { margin: .35rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Trefferliste als PDF */
.kat-pdf { text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
  .kat-pdf span:not(.sr-only) { display: none; }
  .kat-pdf { padding: 0; width: 46px; justify-content: center; }
  .kat-pdf .ico { width: 1.3em; height: 1.3em; }
}
:root[data-contrast="high"] .st--res { color: var(--hc); }
:root[data-theme="dark"] .st--res { color: #F2C46B; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .st--res { color: #F2C46B; } }

/* =====================================================================
   Update 11
   ===================================================================== */
/* Detailseite: erst Titel, dann Verfügbarkeit mit großem Knopf, dann Kurz-Infos */
.detail__main { gap: 1.5rem; }
.detail__head { display: grid; gap: .55rem; }
.detail__h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem); line-height: 1.05; letter-spacing: -.015em; }
.detail__head .detail__sub { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); }
.detail__head .detail__by { font-size: 1rem; }
.pill--sky { background: var(--sky); color: var(--lagoon-ink); }
a.pill--sky:hover { box-shadow: inset 0 0 0 2px var(--lagoon); }
.getcard { display: grid; gap: 1.05rem; max-width: 640px; padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 26px; background: var(--white); border: 2px solid var(--meadow); box-shadow: 0 26px 50px -42px rgba(11, 46, 53, .6); }
.getcard.is-out { background: var(--sky-2); border-color: var(--sky); }
.getcard__top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.getcard__top .st--lg { font-size: 1.3rem; }
.getcard__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.getcard__actions .btn--lg { flex: 1 1 260px; min-height: 64px; font-size: 1.2rem; }
.getcard__actions .btn--lg .btn__in { padding-inline: 2.2em; }
.getcard__merk { min-height: 64px; padding-inline: 1.4rem; }
.getcard__steps { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; list-style: none; margin: 0; padding: .95rem 0 0; border-top: 2px dashed var(--sky); }
.getcard__steps li { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: var(--ink); }
.getcard__steps .ico { width: 1.2em; height: 1.2em; color: var(--lagoon-ink); flex: none; }
.getcard__msg { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: 54ch; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.detail__meta > li { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .25rem .95rem; border-radius: 999px; background: var(--sky-2); color: var(--ink); font-size: .9rem; font-weight: 700; }
.detail__meta > li:has(> a) { padding: 0; background: none; }
.detail__meta a { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .25rem .95rem; border-radius: 999px; border: 2px solid var(--sky); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.detail__meta a:hover { border-color: var(--lagoon); }
.detail__meta .ico { width: 1.1em; height: 1.1em; color: var(--lagoon-ink); flex: none; }
@media (max-width: 640px) {
  .getcard__actions .btn--lg, .getcard__merk { flex: 1 1 100%; }
  .detail__h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

/* Reservieren: Wunschtermin */
.pickup { margin: .3rem 0 0; padding: 1rem 1.1rem 1.15rem; border: 0; border-radius: 22px; background: var(--sky-2); display: grid; gap: .65rem; min-width: 0; }
.pickup > legend { float: left; width: 100%; padding: 0; }
.pickup__hint { clear: both; display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.pickup__hint .ico { width: 1.15em; height: 1.15em; margin-top: .12em; color: var(--lagoon-ink); flex: none; }
.pickup .input { background: var(--white); }
.pickup .input[type="date"], .pickup .input[type="time"] { min-height: 48px; }

/* Unsichtbares Feld gegen Spam */
.hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Merkliste */
.merk-note { margin: -.3rem 0 1.3rem; padding: .85rem 1.1rem; border-radius: 18px; background: var(--sky-2); font-size: .95rem; line-height: 1.5; max-width: 70ch; }

/* Dialoge: das Fenster selbst bekommt den Fokus, ohne Rahmen */
.dlg:focus, .dlg:focus-visible { outline: none; }

/* Mobile Leiste unten: 4 Punkte (ohne "Ansicht") */
@media (max-width: 900px) {
  .bar-mobile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sanftes Scrollen (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Reservieren-Knopf auf der Detailseite: gefüllt, damit er sofort auffällt */
.getcard__actions .btn--green { --core: var(--leaf); --core-ink: #0B2E35; --ring: #A9DFA1; --hover: #84CC7A; }

/* ---------- Update 12 ---------- */
/* Vollbild-Fenster (iPhone und überall, wo echtes Vollbild nicht geht) */
.is-pfs { position: fixed !important; inset: 0 !important; z-index: 2147483000; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; }
.is-pfs::backdrop { background: #000; }
.fx__frame.is-pfs { background: var(--sky-2); }
.fx__frame.is-pfs .fx__stage { height: 100%; max-height: none; aspect-ratio: auto; min-height: 0; }
.player__stage.is-pfs { display: grid; place-items: center; background: #000; aspect-ratio: auto !important; }
.player__stage.is-pfs > video, .player__stage.is-pfs > iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
.player__stage.is-pfs > *:not(video):not(iframe) { max-width: 100%; }
:root.pfs-on, :root.pfs-on body { overflow: hidden !important; overscroll-behavior: none; }
:root.pfs-on .site-header, :root.pfs-on .bar-mobile, :root.pfs-on .toast { visibility: hidden; }
/* Wunschtermin: ein Textfeld */
.pickup .field { margin: 0; }
.pickup .field__label { font-weight: 700; }

/* ---------- Update 14/15: Medium-Seite ----------
   Computer: Cover | Titel und Angaben | Ausleihen
   Tablet:   Cover | Titel, Ausleihen, Angaben
   Handy:    großes Cover, Kapseln, Titel, Ausleihen, Angaben */
.detail.detail--v1 { grid-template-columns: minmax(0, clamp(270px, 23vw, 350px)) minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "cover head card" "cover facts card"; grid-template-rows: auto 1fr; gap: 1.3rem clamp(1.6rem, 3vw, 3rem); align-items: start; }
.detail--v1 .detail__left { grid-area: cover; position: static; max-width: none; }
.detail--v1 .detail__stage { padding: clamp(1.3rem, 2vw, 2rem); }
.detail--v1 .detail__cv { width: 100%; }
.detail--v1 .detail__head { grid-area: head; display: grid; gap: .6rem; padding-top: .1rem; }
.detail--v1 .detail__head > .pills { margin-bottom: .15rem; }
.detail--v1 .pills .tag-new { align-self: center; }
.detail--v1 .detail__h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.detail--v1 .detail__sub { line-height: 1.4; }
.detail--v1 .detail__by { display: none; }
.detail__facts { grid-area: facts; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.4rem; margin: .3rem 0 0; font-size: 1rem; line-height: 1.4; }
.detail__facts dt { color: var(--muted); }
.detail__facts dd { margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.detail__facts a { color: var(--ink); }
.detail__sig { margin-left: .5rem; font-weight: 400; color: var(--muted); }
.detail--v1 > .getcard { grid-area: card; max-width: none; gap: .9rem; }
.getcard .btn--green { --core: var(--leaf); --core-ink: #0B2E35; --ring: #A9DFA1; --hover: #84CC7A; }
.detail--v1 > .getcard > .btn, .detail--v1 > .getcard > .tbtn { width: 100%; justify-content: center; }
.detail--v1 > .getcard > .btn { min-height: 60px; font-size: 1.15rem; }
.detail--v1 .getcard .st--lg { font-size: 1.25rem; }
.getcard__dep { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; padding: .7rem 0; border-block: 2px dashed var(--sky); font-weight: 700; color: var(--ink); }
.getcard__dep b { font-size: 1.5rem; }
.detail--v1 .getcard__steps { display: grid; gap: .55rem; margin: .1rem 0 0; padding: 0; border: 0; list-style: none; counter-reset: gs; }
.detail--v1 .getcard__steps li { display: flex; align-items: center; gap: .7rem; font-weight: 400; font-size: .95rem; counter-increment: gs; }
.detail--v1 .getcard__steps li::before { content: counter(gs); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sky); color: var(--deep); font-weight: 700; font-size: .85rem; flex: none; }
.detail--v1 .getcard__msg { font-size: .98rem; }
/* Tablet: Cover links, rechts Titel, Ausleihen, Angaben untereinander.
   Die Person steht hier im Titelbereich (wie am Handy), nicht doppelt in den Angaben. */
@media (max-width: 1100px) {
  .detail.detail--v1 { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); grid-template-areas: "cover head" "cover card" "cover facts"; grid-template-rows: auto auto 1fr; }
  .detail--v1 > .getcard { max-width: 520px; }
  .detail--v1 .detail__by { display: block; }
  .detail__facts .f-by { display: none; }
}
/* Handy: wie vorher großes Cover oben, dann Kapseln, Titel, Ausleihen, Angaben */
@media (max-width: 640px) {
  .detail.detail--v1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "head" "card" "facts"; grid-template-rows: auto; gap: 1.4rem; }
  .detail--v1 .detail__stage { padding: 1.2rem; }
  .detail--v1 .detail__cv { width: 150px; }
  .detail--v1 .detail__head { gap: .55rem; }
  .detail--v1 > .getcard { max-width: none; padding: 1.1rem; }
  .detail--v1 > .getcard > .btn { min-height: 58px; }
  .detail--v1 > .getcard > .tbtn { min-height: 52px; }
  .detail__facts { gap: .5rem 1rem; font-size: .95rem; }
}
/* Handy: langer Bereich im Pfad bricht im Text um, der Schrägstrich bleibt davor */
@media (max-width: 640px) {
  .crumbs ol { display: block; line-height: 1.9; }
  .crumbs li { display: inline; }
  .crumbs li + li::before { margin: 0 .45rem; }
  .crumbs a { padding: .3rem 0; }
}
/* Update 15: kurzer Grund auf Karten bei "Das könnte dich auch interessieren" */
.mcard__why { margin: .2rem 0 0; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: var(--lagoon-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Update 16: Farben der Klebepunkte und Kommbi-Regal
   ===================================================================== */
/* Bereichs-Punkte: Farbe des Klebepunkts, bei zwei Punkten halb/halb */
.fchip__dot { background: linear-gradient(90deg, var(--c) 50%, var(--c2, var(--c)) 50%); }
.kx__dot, .shx__sign i, .shp__kat i { background: linear-gradient(90deg, var(--kc) 50%, var(--kc2, var(--kc)) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.kx__item::before { background: linear-gradient(180deg, var(--kc) 50%, var(--kc2, var(--kc)) 50%); }

/* Kommbi: dezentes Lila (#86348B), Logo immer auf hellem Grund */
:root { --kommbi: #86348B; --kommbi-wash: #F4EAF4; }
:root[data-theme="dark"] { --kommbi: #C78BC8; --kommbi-wash: #2C2030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kommbi: #C78BC8; --kommbi-wash: #2C2030; } }
.kommbi-logo, .shx__logo, .shp__logo { display: block; width: auto; }
/* Kommbi-Regal: weiß mit feinem lila Rahmen, das Logo sitzt oben mittig auf der Linie
   (immer auf weißem Grund, damit die dunkle Schrift auch im dunklen Modus lesbar bleibt) */
.shx__side--kommbi { position: relative; padding: 0 7px 5px; margin: 0 -7px -5px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px var(--kommbi); }
.shx__side--kommbi::before { content: ""; height: 18px; }
.shx__sign--kommbi { position: absolute; z-index: 2; top: -13px; left: 50%; min-height: 0; padding: 0 7px; border-radius: 8px; background: #fff; line-height: 0; transform: translateX(-50%); }
.shx__logo { height: 26px; }
.shx__f--kommbi::after { background: color-mix(in srgb, var(--kommbi) 30%, var(--white)); }
.shx__f--kommbi:hover { background: color-mix(in srgb, var(--kommbi) 7%, transparent); }
.shx__f--kommbi:hover::after { background: var(--kommbi); }
/* Ausgewähltes Kommbi-Fach: lila statt grün */
.shx__f--kommbi[aria-expanded="true"] { background: color-mix(in srgb, var(--kommbi) 13%, transparent); }
.shx__f--kommbi[aria-expanded="true"]::after { background: var(--kommbi); }
.shx__f--kommbi[aria-expanded="true"] .shx__fl { color: var(--kommbi); }
/* Kommbi-Schaufenster: gehört Kommbi, hier stehen keine Medien */
.shx__f--schau { display: grid; place-items: center; cursor: default; border-radius: 9px; background: color-mix(in srgb, var(--kommbi) 5%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kommbi) 35%, var(--white)); }
.shx__f--schau::after { display: none; }
.shx__f--schau:hover { background: color-mix(in srgb, var(--kommbi) 5%, transparent); }
.shx__schau { font-size: .75rem; font-weight: 800; color: var(--kommbi); }
/* Geöffnetes Kommbi-Fach: feiner lila Rahmen, Fachnummer lila umrandet, Logo und Titel in Lila */
.shp--kommbi { box-shadow: 0 0 0 1.5px var(--kommbi), 0 30px 60px -30px rgba(11, 46, 53, .45); }
.shp--kommbi .shp__no { background: #fff; color: var(--kommbi); box-shadow: inset 0 0 0 1.5px var(--kommbi); }
.shp__kat--kommbi { gap: .6em; color: var(--kommbi); }
/* weißes Feld nur sichtbar im dunklen Modus, damit die dunkle Logo-Schrift lesbar bleibt */
.shp__logo { height: 34px; padding: 2px 6px; border-radius: 8px; background: #fff; }
@media (max-width: 640px) {
  .shp--kommbi .shp__head { gap: 10px; }
  .shp--kommbi .shp__no { min-width: 52px; }
  .shp__logo { height: 23px; padding: 1px 4px; }
  .shp__kat--kommbi { gap: .35em; font-size: .95rem; white-space: nowrap; }
}
.shp--kommbi .shp__row { border-bottom-color: color-mix(in srgb, var(--kommbi) 30%, var(--white)); }
.shp--kommbi .fvb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--kommbi), 0 18px 22px -12px rgba(11, 46, 53, .55); }
/* Kommbi-Medium: runder Stempel, leicht schräg an der Ecke vom Cover */
.kstamp { position: absolute; z-index: 3; top: -16px; right: -16px; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--kommbi), inset 0 0 0 5px #fff, inset 0 0 0 6px color-mix(in srgb, var(--kommbi) 40%, #fff), 0 10px 18px -12px rgba(11, 46, 53, .5); transform: rotate(-10deg); pointer-events: none; }
.kstamp__logo { display: block; width: auto; height: 25px; }
@media (max-width: 640px) {
  /* Am Handy steht das Cover (150px) mittig: Stempel an dessen Ecke */
  .kstamp { top: 4px; right: calc(50% - 75px - 30px); width: 66px; height: 66px; }
  .kstamp__logo { height: 19px; }
}
:root[data-contrast="high"] .kstamp { box-shadow: inset 0 0 0 2px var(--hc); }
:root[data-contrast="high"] .shx__side--kommbi { box-shadow: inset 0 0 0 2px var(--hc); }
/* Wenige Medien im Fach: Buchrücken nicht unnatürlich breit ziehen */
.sp { max-width: 16px; }