/* wimmel-buch.de · Stylesheet
   Gestaltung übernommen von klhe.de („Transparentpapier“, v5), ergänzt um Wimmelbuch-Bausteine.
   Schrift: Instrument Sans, selbst gehostet (SIL Open Font License, siehe /fonts/OFL-InstrumentSans.txt). */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fcfbfa; }
:root {
  --white: #ffffff;
  --page: #fcfbfa;
  --ink: #22232a;
  --ink-2: #4d4e57;
  --mute: #7a7b84;
  --line: #ebe9ee;
  /* Pastelle, transparent (wie klhe.de) */
  --flieder: rgba(140, 118, 222, .20);
  --rose: rgba(236, 120, 156, .19);
  --mint: rgba(80, 186, 152, .19);       /* Kinderbücher: Hauptfarbe dieser Seite */
  --apricot: rgba(246, 150, 88, .21);
  --pistazie: rgba(160, 196, 80, .21);   /* Reisen */
  --flieder-ink: #5b4bb0;
  --rose-ink: #b23f66;
  --mint-ink: #237a61;
  --apricot-ink: #a9531b;
  --pistazie-ink: #5d7a1c;
  --schal: #d8433a;                      /* Flitz' roter Schal, nur für Lösungs-Markierungen */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r-xl: 34px;
  --r-l: 24px;
  --r-m: 16px;
  --sh-cover: 0 1px 1px rgba(34, 35, 42, .08), 0 22px 30px -18px rgba(34, 35, 42, .42);
  color-scheme: light;
}

.page { background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variation-settings: "wdth" 100; }
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page img { max-width: 100%; height: auto; display: block; }
.page a { color: inherit; }
.page a:focus-visible, .page button:focus-visible, .page input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.block { padding-block: clamp(48px, 5.5vw, 84px); }
.block--flush { padding-top: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* ---------- Typografie ---------- */
.mega, .h1, .h2, .h3 { font-family: var(--sans); font-weight: 700; margin: 0; text-wrap: balance; color: var(--ink); }
.mega { font-size: clamp(3.4rem, 1.4rem + 6vw, 7.4rem); line-height: .88; letter-spacing: -.045em; font-variation-settings: "wdth" 78; }
.h1 { font-size: clamp(2.6rem, 1.3rem + 3.6vw, 5rem); line-height: .92; letter-spacing: -.04em; font-variation-settings: "wdth" 80; }
.h2 { font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.7rem); line-height: .98; letter-spacing: -.035em; font-variation-settings: "wdth" 82; }
.h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); line-height: 1.12; letter-spacing: -.02em; font-variation-settings: "wdth" 88; }
.intro { font-size: clamp(1.12rem, 1rem + .45vw, 1.36rem); line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin: 0; }
.kicker { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.5; color: var(--mute); margin: 0; }
.prose p { margin: 0 0 1em; color: var(--ink-2); max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Aktionen ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--sans); font-weight: 650; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; cursor: pointer; }
.btn--ink { background: var(--ink); color: #fff !important; }
.btn--ink:hover { background: #3a3b45; }
.btn--soft { background: rgba(255, 255, 255, .75); border-color: rgba(34, 35, 42, .18); color: var(--ink) !important; }
.btn--soft:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink) !important; }
.btn--wait { background: var(--mint); color: var(--mint-ink) !important; cursor: default; }
.more { font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(80, 186, 152, .7); }
.more:hover { text-decoration-color: var(--ink); }

.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ink-2); background: rgba(34, 35, 42, .06); }
.tag--flieder { background: var(--flieder); color: var(--flieder-ink); }
.tag--rose { background: var(--rose); color: var(--rose-ink); }
.tag--mint { background: var(--mint); color: var(--mint-ink); }
.tag--apricot { background: var(--apricot); color: var(--apricot-ink); }
.tag--pistazie { background: var(--pistazie); color: var(--pistazie-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.t-flieder { background: var(--flieder); }
.t-rose { background: var(--rose); }
.t-mint { background: var(--mint); }
.t-apricot { background: var(--apricot); }
.t-pistazie { background: var(--pistazie); }
.t-weiss { background: rgba(255, 255, 255, .62); }

/* ---------- Kopf ---------- */
.top { position: relative; z-index: 30; padding-top: 16px; }
.top-pill { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 0 12px 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(34, 35, 42, .5); }
.top-nav { display: flex; align-items: center; gap: 6px; }
.top-nav a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--ink-2); padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
.top-nav a:hover { background: rgba(34, 35, 42, .05); color: var(--ink); }
.top-nav a.on { background: var(--mint); color: var(--ink); }
.top-nav .btn { min-height: 46px; padding: 0 20px; margin-left: 8px; font-size: 15px; }

/* Wortmarke: fünf Punkte, die durcheinander wimmeln */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo-dots { position: relative; width: 34px; height: 26px; flex: none; isolation: isolate; }
.logo-dots i { position: absolute; width: 14px; height: 14px; border-radius: 50%; mix-blend-mode: multiply; }
.logo-dots i:nth-child(1) { left: 0; top: 2px; background: #9fd9c6; }
.logo-dots i:nth-child(2) { left: 9px; top: 9px; background: #f8c29c; }
.logo-dots i:nth-child(3) { left: 13px; top: 0; background: #c3b8f0; }
.logo-dots i:nth-child(4) { left: 20px; top: 10px; background: #c9dd96; }
.logo-dots i:nth-child(5) { left: 4px; top: 12px; width: 8px; height: 8px; background: #f3b5c8; }
.logo b { font-size: 1.42rem; line-height: 1; font-weight: 700; letter-spacing: -.035em; font-variation-settings: "wdth" 80; white-space: nowrap; }
.logo-txt { display: grid; gap: 3px; }
.logo small { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); letter-spacing: .01em; white-space: nowrap; }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(34, 35, 42, .18); font-weight: 650; font-size: 15px; background: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--ink); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; display: grid; gap: 2px; padding: 10px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(34, 35, 42, .45); }
.menu-panel a { display: block; text-decoration: none; font-weight: 600; padding: 12px 14px; border-radius: 10px; color: var(--ink); }
.menu-panel a:hover, .menu-panel a.on { background: var(--mint); }

/* ---------- Transparentpapier ---------- */
.vellum { position: relative; isolation: isolate; }
.sheet { position: absolute; border-radius: var(--r-xl); mix-blend-mode: multiply; z-index: 0; pointer-events: none; }

/* ---------- Einstieg Startseite ---------- */
.hero { padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 28px; align-content: center; position: relative; z-index: 2; }
.hero-copy .note { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 42ch; }
.stage { height: 640px; }
.stage .s1 { left: 2%; right: 26%; top: 6%; bottom: 10%; background: var(--mint); transform: rotate(-6deg); }
.stage .s2 { left: 30%; right: 0; top: 0; bottom: 22%; background: var(--pistazie); transform: rotate(5deg); }
.stage .s3 { left: 16%; right: 8%; top: 34%; bottom: 0; background: var(--apricot); transform: rotate(-2deg); }

/* Wenige Bücher: Cover aufgefächert, dahinter ein Wimmelbild */
.pile { position: absolute; z-index: 2; inset: 0; }
.pile .scene { position: absolute; left: 4%; top: 7%; width: 46%; border-radius: 10px; transform: rotate(-6deg); box-shadow: var(--sh-cover); }
.pile .cv { position: absolute; width: 50%; border-radius: 4px; box-shadow: 0 1px 1px rgba(34, 35, 42, .08), 0 34px 44px -24px rgba(34, 35, 42, .6); }
.pile .cv1 { right: 8%; top: 9%; transform: rotate(4deg); z-index: 3; }
.pile .cv2 { right: 34%; top: 14%; transform: rotate(-3deg); z-index: 2; }
.pile .cv3 { right: 2%; top: 26%; transform: rotate(9deg); z-index: 1; }
.pile .mouse { position: absolute; z-index: 4; width: 34%; left: 0; bottom: -2%; filter: drop-shadow(0 14px 14px rgba(34, 35, 42, .18)); }
.pile.n1 .cv { width: 52%; }
.pile.n2 .cv1 { right: 4%; }
.pile.n3 .cv { width: 44%; }

/* Viele Bücher: laufende Cover-Wand wie auf klhe.de */
.wall { position: absolute; z-index: 2; inset: 26px 40px 26px 54px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.wall-col { min-width: 0; }
.wall-track { animation: k5-up 70s linear infinite; }
.wall-col:nth-child(2) .wall-track { animation-name: k5-down; animation-duration: 84s; }
.wall-col:nth-child(3) .wall-track { animation-duration: 62s; }
.wall-track img { width: 100%; height: auto; margin-bottom: 22px; border-radius: 4px; box-shadow: var(--sh-cover); }
@keyframes k5-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes k5-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Fakten als überlappende Bögen */
.facts { display: flex; isolation: isolate; margin-top: 8px; }
.fact { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; align-content: start; padding: 28px 30px 30px; border-radius: var(--r-l); mix-blend-mode: multiply; }
.fact + .fact { margin-left: -14px; }
.fact b { font-size: clamp(2.2rem, 1.5rem + 1.6vw, 3.2rem); line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variation-settings: "wdth" 80; }
.fact span { font-size: 15px; line-height: 1.4; color: var(--ink-2); max-width: 22ch; }

/* ---------- Abschnittsköpfe ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(30px, 4vw, 50px); }
.head > div { display: grid; gap: 14px; max-width: 780px; }

/* ---------- Bücher-Raster ---------- */
.books { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-width: 0; text-decoration: none; }
.bk-cover { height: 270px; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 6px 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.bk-cover img { display: block; flex: 0 1 auto; min-width: 0; min-height: 0; max-height: 254px; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: var(--sh-cover); }
.bk .t { margin: 0; font-weight: 650; font-size: 16px; line-height: 1.3; }
.bk .a { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mute); }
.bk .tags { margin-top: 6px; }
.bk:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.bk[hidden] { display: none; }
.ph { width: 100%; height: 100%; border-radius: 6px; border: 1.5px dashed #cfcbd6; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; background: rgba(255, 255, 255, .6); }
.ph b { font-size: 1.05rem; line-height: 1.2; color: var(--ink-2); }
.ph span { font-size: 13px; color: var(--mute); }
.bk-cover .ph { aspect-ratio: 210 / 297; height: 100%; width: auto; max-width: 100%; }
.bk--wish:hover .ph { border-color: var(--ink); }

/* Suche (erst ab mehreren Büchern) */
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -12px 0 34px; }
.finder input { flex: 1 1 260px; max-width: 420px; min-height: 50px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(34, 35, 42, .18); background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.finder input:focus { border-color: var(--ink); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(34, 35, 42, .06); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.chip:hover { background: rgba(34, 35, 42, .1); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.finder-none { margin: 0; color: var(--mute); }

/* ---------- Kacheln ---------- */
.goods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.good { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: var(--r-l); background: rgba(255, 255, 255, .7); }
.good b { font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; }
.good p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.good .n { font-size: 2.4rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variation-settings: "wdth" 80; margin-bottom: 6px; }
.panel { border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); display: grid; gap: 40px; }

/* Doppelseite als Beispiel */
.spread { position: relative; isolation: isolate; padding: clamp(18px, 3vw, 36px); }
.spread .sheet { inset: 0; transform: rotate(-1.2deg); }
.spread img { position: relative; z-index: 1; width: 100%; border-radius: 6px; box-shadow: 0 1px 1px rgba(34, 35, 42, .08), 0 34px 44px -26px rgba(34, 35, 42, .55); }
.spread figcaption { position: relative; z-index: 1; margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* ---------- Flitz ---------- */
.people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.people-text { display: grid; gap: 22px; }
.mouse-stage { position: relative; isolation: isolate; height: 440px; }
.mouse-stage .sheet.a { left: 4%; top: 8%; width: 62%; height: 78%; background: var(--rose); transform: rotate(-5deg); }
.mouse-stage .sheet.b { right: 2%; top: 0; width: 58%; height: 80%; background: var(--mint); transform: rotate(4deg); }
.mouse-stage img { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(400px, 82%); transform: translate(-50%, -50%) rotate(-3deg); filter: drop-shadow(0 22px 22px rgba(34, 35, 42, .16)); }

/* ---------- Kontakt-Bereich ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pane { display: grid; gap: 14px; align-content: start; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-l); }
.pane p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.pane .actions { margin-top: 6px; }
.three .pane { grid-template-rows: auto 1fr auto; }

/* Wunsch-Aufruf */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; }
.cta-pic { position: relative; min-height: 440px; }
.cta-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cta-body { display: grid; gap: 22px; align-content: center; padding: clamp(32px, 4vw, 60px); }
.checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.checks li::before { content: ""; width: 18px; height: 10px; margin-top: 5px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg) translate(2px, -2px); }
.checks li b { color: var(--ink); font-weight: 650; }

/* ---------- Fuß ---------- */
.foot { background: var(--ink); color: rgba(255, 255, 255, .72); padding-block: 72px 40px; font-size: 15px; margin-top: clamp(48px, 5.5vw, 84px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.foot-claim { display: grid; gap: 18px; align-content: start; }
.foot-claim img { height: 22px; width: auto; }
.foot-claim p { margin: 0; font-size: 1.9rem; line-height: 1; font-weight: 700; letter-spacing: -.035em; color: #fff; font-variation-settings: "wdth" 80; }
.foot h4 { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: rgba(255, 255, 255, .72); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 24px; font-size: 13.5px; }
.foot-base .sp { flex: 1; }
.foot-note { margin: 14px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); }

/* ---------- Unterseiten ---------- */
.sub-hero { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.sub-copy { display: grid; gap: 24px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--mute); margin: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Buchseite ---------- */
.hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; padding: 14px 14px 14px 24px; border-radius: var(--r-m); font-size: 15.5px; color: var(--ink-2); }
.hint b { color: var(--ink); }
.hint .sp { flex: 1; }
.hint .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.book-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding-block: clamp(32px, 4vw, 56px); }
.cover-stack { position: relative; isolation: isolate; padding: 48px 56px; }
.cover-stack .sheet.a { inset: 0 10% 6% 0; transform: rotate(-4deg); }
.cover-stack .sheet.b { inset: 12% 0 0 12%; transform: rotate(3deg); }
.cover-stack img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; margin: 0 auto; border-radius: 4px; box-shadow: 0 34px 50px -26px rgba(34, 35, 42, .6); }
.book-info { display: grid; gap: 18px; align-content: center; }
.book-info .subtitle { margin: -4px 0 0; font-size: 1.25rem; line-height: 1.4; color: var(--ink-2); }
.book-info .byline { margin: 0; font-weight: 650; font-size: 17px; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 10px 0 0; border-radius: var(--r-m); overflow: hidden; background: rgba(34, 35, 42, .035); }
.specs div { padding: 16px 18px; }
.specs div + div { border-left: 1px solid var(--line); }
.specs dt { font-size: 13px; color: var(--mute); }
.specs dd { margin: 4px 0 0; font-weight: 650; font-size: 15.5px; white-space: nowrap; font-variation-settings: "wdth" 84; }
.book-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.learn { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.learn li { display: grid; gap: 2px; padding-left: 40px; position: relative; counter-increment: st; }
.learn li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.learn b { font-size: 16.5px; line-height: 1.35; }
.learn span { font-size: 15px; color: var(--ink-2); }
.peek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.peek figure { margin: 0; display: grid; gap: 10px; }
.peek img { width: 100%; border-radius: var(--r-l); }
.peek figcaption { font-size: 14px; color: var(--ink-2); }
.peek figcaption b { color: var(--ink); }

/* Buch teilen */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
.share-lead { font-size: 14px; font-weight: 650; color: var(--ink-2); margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(34, 35, 42, .14); background: rgba(255, 255, 255, .75); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.share-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.share-btn[hidden] { display: none; }
.share-native { background: var(--ink); color: #fff; border-color: var(--ink); }
.share-ok { font-size: 14px; font-weight: 600; color: var(--mint-ink); }

/* ---------- Lösungen ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--ink); background: rgba(34, 35, 42, .05); }
.jump a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.jump a i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--mute); }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
.toggle input { width: 20px; height: 20px; accent-color: var(--ink); }
.sol { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.sol-pic { position: relative; margin: 0; }
.sol-pic img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sh-cover); }
.mark { position: absolute; border: 3px solid var(--schal); border-radius: 50%; box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px rgba(255, 255, 255, .7); pointer-events: none; }
.mark span { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--schal); color: #fff; font-size: 13.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.verdeckt .mark { display: none; }
.sol-text { display: grid; gap: 16px; position: sticky; top: 20px; }
.sol-text .station { margin: 0; font-size: 14px; font-weight: 650; color: var(--mint-ink); }
.found { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: f; }
.found li { counter-increment: f; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.found li::before { content: counter(f); width: 26px; height: 26px; border-radius: 50%; background: var(--schal); color: #fff; font-size: 13.5px; font-weight: 700; display: grid; place-items: center; transform: translateY(5px); font-variant-numeric: tabular-nums; }
.found li.flitz { color: var(--ink); font-weight: 650; }
.sol-none { margin: 0; color: var(--mute); font-size: 15px; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 760px; display: grid; gap: 34px; }
.legal h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; font-variation-settings: "wdth" 88; margin: 0 0 10px; }
.legal h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin: 0 0 .8em; }
.legal ul { margin: 0 0 .8em; padding-left: 1.2em; }
.legal address { font-style: normal; color: var(--ink-2); }
.legal a { font-weight: 600; }
.legal .stand { color: var(--mute); font-size: 14px; }
.notfound { min-height: 46vh; display: grid; align-content: center; gap: 22px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .books { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-nav > a:not(.btn) { padding: 10px 10px; }
}
@media (max-width: 900px) {
  .top-nav > a:not(.btn), .top-nav .btn { display: none; }
  .menu { display: block; }
  .hero-grid, .people, .cta, .book-stage, .book-two, .sol { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 500px; }
  .facts { flex-direction: column; }
  .fact + .fact { margin-left: 0; margin-top: -12px; }
  .two, .three, .peek { grid-template-columns: minmax(0, 1fr); }
  .books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-cover { height: 220px; }
  .bk-cover img { max-height: 204px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head { flex-direction: column; align-items: flex-start; }
  .cta-pic { min-height: 280px; }
  .mouse-stage { height: 360px; }
  .sol-text { position: static; }
  .cover-stack { padding: 36px 40px; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .top-pill { padding: 0 8px 0 16px; min-height: 60px; }
  .logo b { font-size: 1.25rem; }
  .logo small { display: none; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .bk-cover { height: 200px; }
  .bk-cover img { max-height: 184px; }
  .goods { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 400px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .specs dd { white-space: nowrap; font-variation-settings: "wdth" 80; }
  .hint { padding: 14px 16px; }
  .mark span { width: 22px; height: 22px; left: -11px; top: -11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  html { scroll-behavior: auto; }
}