/* 69 – Kreuzworträtsel · Das Reise-Rätselheft: Zeitungspapier, Druckschwarz, Textmarker */
:root {
  --paper: #f7f6f0;
  --white: #fffefa;
  --ink: #121212;
  --ink-2: #45443f;
  --grey: #e6e4dc;
  --grey-2: #d4d1c6;
  --yellow: #ffe83a;
  --yellow-2: #fff4a0;
  --font: 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --mono: 'Space Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  --wrap: 1280px;
  --pad: clamp(16px, 4vw, 48px);
  --b: 2px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
button, input { font: inherit; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1.0625rem/1.6 var(--font); font-feature-settings: "kern", "liga"; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { background: var(--yellow); }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--yellow); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.58; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }

/* ---------- Kästchen-Überschriften (Text bleibt Text, Kästchen per JS/ARIA) ---------- */
.xw { font: 800 clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem)/1.05 var(--font); letter-spacing: -.01em; text-transform: uppercase; }
.xw--h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem); }
.xw--h3 { font-size: 1.3rem; letter-spacing: 0; }
html:not(.js) .xw, .xw:not(.is-boxed) { text-decoration: underline var(--yellow) .3em; text-underline-offset: -.12em; text-decoration-skip-ink: none; }
.xw.is-boxed { container-type: inline-size; }
.xw-g { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 var(--b) var(--b) 0; }
.xw-w { display: flex; flex: none; }
.xw--h1 .xw-g { --c: min(54px, calc(100cqi / max(13.4, var(--len, 13.4)))); }
.xw--h2 .xw-g { --c: min(44px, calc(100cqi / max(12.4, var(--len, 12.4)))); }
.xw--h3 .xw-g { --c: min(30px, calc(100cqi / 15.4)); }
.c { position: relative; flex: none; width: var(--c); height: var(--c); margin: 0 calc(var(--b) * -1) calc(var(--b) * -1) 0;
  display: grid; place-items: center; padding-top: calc(var(--c) * .08);
  border: var(--b) solid var(--ink); background: var(--white);
  font: 800 calc(var(--c) * .56)/1 var(--font); letter-spacing: 0; color: var(--ink); text-transform: uppercase; }
.c[data-n]::before { content: attr(data-n); position: absolute; top: calc(var(--c) * .05); left: calc(var(--c) * .08);
  font: 400 max(8px, calc(var(--c) * .2))/1 var(--mono); letter-spacing: 0; }
.c--blk { background: var(--ink); }
.c--p { width: calc(var(--c) * .46); border-left-width: 0; background: var(--grey); }
.c--hi { background: var(--yellow); }
.xw--h1 .c--hi { background: linear-gradient(var(--yellow), var(--yellow)); }
.xw-hidden .c b { opacity: 0; }
.c b { font: inherit; transition: opacity .18s ease; }
.xw--h1 .xw-g, .xw--h2 .xw-g { --b: 2.5px; }

/* Stempelchen: Nummernfeld + Text */
.tag { display: inline-flex; align-items: center; gap: 12px; font: 700 .8rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 26px; }
.tag__n { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px; border: 2px solid var(--ink); background: var(--yellow); font-size: .78rem; }
.tag--sm { margin-bottom: 0; }

/* Buttons: Feld + Pfeilfeld */
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: stretch; min-height: 54px; border: 2.5px solid var(--ink); background: var(--white); color: var(--ink);
  font: 700 1rem/1.2 var(--font); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s; box-shadow: 4px 4px 0 var(--ink); }
.btn span { display: flex; align-items: center; padding: 12px 20px; }
.btn svg { width: 52px; height: auto; align-self: stretch; min-height: 49px; max-height: 64px; padding: 0 15px; border-left: 2.5px solid var(--ink); flex: none; overflow: visible; }
.btn:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink svg { border-color: #fff; background: var(--yellow); color: var(--ink); border-left-color: var(--ink); }
.btn--ink:hover { background: #000; color: var(--yellow); }

/* ---------- Kopf (Rätselheft-Titel) ---------- */
.mast { position: relative; z-index: 40; background: var(--paper); border-bottom: 6px solid var(--ink); }
.mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; border-bottom: 2px solid var(--ink); }
.mast__strip { background: var(--ink); color: #fff; font: 400 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mast__strip-in { display: flex; gap: 28px; align-items: center; min-height: 32px; white-space: nowrap; overflow: hidden; }
.mast__folge b { background: var(--yellow); color: var(--ink); padding: 3px 6px; margin-left: 4px; }
.mast__geo { margin-left: auto; }
.mast__sol::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--yellow); margin-right: 8px; vertical-align: 0; }
.mast__main { display: flex; align-items: center; gap: 28px; min-height: 96px; }
.logo { flex: none; display: block; padding: 6px; background: var(--white); border: 2px solid var(--ink); }
.logo img { width: 70px; height: auto; aspect-ratio: 1510 / 1300; }
.logo:hover { background: var(--yellow); }
.nav { display: flex; align-items: center; gap: 28px; flex: 1; }
.nav__head { font: 700 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); padding: 2px 0; border-left: 2px solid var(--ink); padding-left: 6px; color: var(--ink-2); }
.nav ol { display: flex; gap: 0; margin-right: auto; }
.nav ol a { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 0; font: 700 1rem/1.1 var(--font); text-decoration: none; }
.nav ol a:hover { background: none; }
.nav__n { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); background: var(--white); font: 700 .85rem/1 var(--mono); transition: background .15s; }
.nav ol a:hover .nav__n, .nav ol a:focus-visible .nav__n { background: var(--yellow); }
.nav ol a:hover > :last-child { text-decoration: underline; }
.nav__end { display: flex; align-items: center; gap: 12px; }
.tel { font: 700 .98rem/1.2 var(--font); text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.tel__l { font: 400 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); display: block; margin-bottom: 4px; }
.lang { display: grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--ink); background: var(--ink); color: #fff; font: 700 .9rem/1 var(--mono); text-decoration: none; position: relative; }
.lang:hover { background: var(--yellow); color: var(--ink); }
.menu { display: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(36px, 5vh, 64px) clamp(56px, 7vh, 96px); position: relative; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 30px; max-width: 54ch; }
.hero__avail { margin-top: 24px; font: 400 .82rem/1.4 var(--mono); color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; background: var(--ink); box-shadow: 3px 3px 0 var(--yellow); flex: none; }

/* Mini-Rätsel */
.pz { position: relative; background: var(--white); border: 2.5px solid var(--ink); padding: 20px 22px 18px; box-shadow: 10px 10px 0 var(--ink); }
.pz::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--ink); pointer-events: none; opacity: .2; }
.pz__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 10px; }
.pz__title { font: 700 .82rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pz__lvl, .sec__lvl { display: inline-flex; align-items: center; gap: 4px; font: 400 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pz__lvl i, .sec__lvl i { width: 11px; height: 11px; border: 1.5px solid currentColor; display: inline-block; }
.pz__lvl i:first-of-type, .sec__lvl i:first-of-type { margin-left: 6px; }
.pz__lvl i.on, .sec__lvl i.on { background: currentColor; }
.pz__how { font-size: .92rem; line-height: 1.45; color: var(--ink-2); margin-bottom: 14px; }
.pz__grid { --s: clamp(32px, 3.1vw, 44px); display: grid; grid-template-columns: repeat(9, var(--s)); grid-template-rows: repeat(7, var(--s)); width: max-content; margin-inline: auto; border: var(--b) solid var(--ink); }
.pz__c { position: relative; display: grid; place-items: center; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); background: var(--white);
  font: 600 calc(var(--s) * .5)/1 var(--font); color: #77756d; }
.pz__c:nth-child(9n) { border-right: 0; }
.pz__c b { font-weight: 600; padding-top: 3px; }
.pz__c--blk { background: var(--ink); }
.pz__n { position: absolute; top: 2px; left: 3px; font: 400 9px/1 var(--mono); color: var(--ink); }
.pz__c--sol { background: var(--yellow); cursor: text; }
.pz__in { width: 100%; height: 100%; border: 0; padding: 4px 0 0; margin: 0; background: transparent; text-align: center; text-transform: uppercase;
  font: 800 max(16px, calc(var(--s) * .52))/1 var(--font); color: var(--ink); caret-color: var(--ink); border-radius: 0; }
.pz__in:focus { outline: none; box-shadow: none; }
.pz__c--sol:focus-within { background: #fff; box-shadow: inset 0 0 0 3px var(--ink); z-index: 1; }
.pz__c--sol.is-bad { background: #ffd2c4; }
.pz.is-solved .pz__c--sol { background: var(--ink); }
.pz.is-solved .pz__in { color: var(--yellow); }
.pz.is-solved .pz__c--sol .pz__n { color: var(--yellow); }
.pz__clues { margin-top: 14px; }
.pz__ch { display: flex; align-items: center; gap: 6px; font: 700 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.pz__ch svg { width: 13px; height: 13px; }
.pz__clues ol { columns: 2; column-gap: 22px; counter-reset: c; font-size: .8rem; line-height: 1.35; color: var(--ink-2); }
.pz__clues li { counter-increment: c; padding-left: 20px; position: relative; break-inside: avoid; margin-bottom: 3px; }
.pz__clues li::before { content: counter(c); position: absolute; left: 0; font: 700 .74rem/1.35 var(--mono); color: var(--ink); }
.pz__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed var(--ink); }
.pz__status { font: 400 .8rem/1.35 var(--mono); color: var(--ink-2); }
.pz.is-solved .pz__status { color: var(--ink); font-weight: 700; background: var(--yellow); padding: 2px 6px; }
.pz__reveal { flex: none; font: 700 .76rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 9px 12px; border: 2px solid var(--ink); background: var(--white); cursor: pointer; color: var(--ink); }
.pz__reveal:hover { background: var(--yellow); }
html:not(.js) .pz__reveal { display: none; }

/* ---------- Sektionen ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); }
.sec + .sec { padding-top: 0; }
.sec__bar { display: flex; align-items: stretch; gap: 0; border-top: 6px solid var(--ink); border-bottom: 2px solid var(--ink); margin-bottom: clamp(36px, 5vw, 64px);
  font: 700 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sec__bar > span { display: flex; align-items: center; padding: 10px 16px; border-right: 2px solid var(--ink); }
.sec__bar > span:last-child { border-right: 0; margin-left: auto; font-weight: 400; border-left: 2px solid var(--ink); }
.sec__no { background: var(--ink); color: #fff; }
.sub { font: 700 .82rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }

/* Schwerpunkt */
.focus__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.focus__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.solve { position: sticky; top: 24px; }
.solve__grid { background: var(--white); border: 2.5px solid var(--ink); padding: clamp(14px, 2vw, 26px); box-shadow: 10px 10px 0 var(--grey-2); }
.xg { width: 100%; height: auto; }
html[lang="de"] .xg--en, html[lang="en"] .xg--de, html[lang="de"] .ws--en, html[lang="en"] .ws--de { display: none; }
.xg__raster { fill: none; stroke: #d9d6cb; stroke-width: .25; stroke-dasharray: .8 .8; }
.xg__blk { fill: var(--ink); }
.xg__w rect { fill: var(--white); stroke: var(--ink); stroke-width: .6; transition: fill .2s; }
.xg__l { font: 800 6px var(--font); text-anchor: middle; fill: var(--ink); pointer-events: none; }
.xg__n { font: 400 2.5px var(--mono); fill: var(--ink); pointer-events: none; }
.focus__board:has(.clue[data-w="1"]:hover) .xg__w1 rect, .focus__board:has(.clue[data-w="2"]:hover) .xg__w2 rect,
.focus__board:has(.clue[data-w="3"]:hover) .xg__w3 rect, .focus__board:has(.clue[data-w="4"]:hover) .xg__w4 rect,
.focus__board:has(.clue[data-w="5"]:hover) .xg__w5 rect, .focus__board:has(.clue[data-w="6"]:hover) .xg__w6 rect { fill: var(--yellow); }
.solve figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 400 .8rem/1.4 var(--mono); color: var(--ink-2); }
.pencil { width: 64px; height: 16px; flex: none; transform: rotate(-8deg); }
.clues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); }
.clues__h { display: flex; align-items: center; gap: 10px; font: 700 .86rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 12px; border-bottom: 2.5px solid var(--ink); margin-bottom: 4px; }
.clues__h svg { width: 16px; height: 16px; }
.clue { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 0 20px; border-bottom: 1px solid var(--grey-2); transition: background .15s; }
.clue:hover { background: linear-gradient(90deg, var(--yellow-2), transparent 80%); }
.clue__n { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); background: var(--white); font: 700 .9rem/1 var(--mono); }
.clue:hover .clue__n { background: var(--yellow); }
.clue h4 { font: 800 1.12rem/1.2 var(--font); margin: 5px 0 6px; hyphens: auto; }
.clue p { font-size: .98rem; line-height: 1.5; color: var(--ink-2); hyphens: auto; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); padding: 0 var(--b) var(--b) 0; }
.stats li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 200px; padding: 26px 26px 22px;
  border: 2.5px solid var(--ink); margin: 0 -2.5px -2.5px 0; background: var(--white); counter-increment: s; }
.stats li::before { content: counter(s, upper-alpha); position: absolute; top: 8px; left: 10px; font: 400 .72rem/1 var(--mono); }
.stats li:nth-child(2) { background: var(--yellow); }
.stats li:nth-child(3)::after { content: ""; position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: var(--ink); }
.stats__v { font: 900 clamp(3.4rem, 2.4rem + 3.4vw, 5.6rem)/.9 var(--font); letter-spacing: -.03em; padding-top: 14px; }
.stats__v--sm { font-size: clamp(2.6rem, 1.9rem + 2.4vw, 4.2rem); }
.stats__l { font: 700 .86rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .04em; max-width: 24ch; }

.route { margin-top: clamp(56px, 7vw, 96px); border: 2.5px solid var(--ink); background: var(--white); padding: clamp(22px, 3vw, 40px); position: relative; }
.route::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--grey-2); pointer-events: none; }
.route__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 30px; }
.route__codes { font: 700 .86rem/1.3 var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.chain { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.chain > li { display: flex; flex-wrap: wrap; justify-content: center; }
.chain > li > b { --s: clamp(34px, 3.2vw, 48px); display: grid; place-items: center; width: var(--s); height: var(--s); border: 2.5px solid var(--ink); margin-right: -2.5px;
  background: var(--white); font: 800 calc(var(--s) * .52)/1 var(--font); padding-top: 3px; }
.chain > li > b:first-child { background: var(--yellow); }
.chain > li > b:nth-child(3) { margin-right: 0; }
.chain small { flex-basis: 100%; text-align: center; margin-top: 10px; font: 400 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.chain__leg { flex: 1; flex-direction: column; align-items: center; padding-top: clamp(6px, .8vw, 12px); min-width: 64px; }
.chain__leg small { white-space: nowrap; }
.chain__leg svg { width: 100%; height: 24px; }
.chain__leg svg { background: linear-gradient(var(--ink), var(--ink)) 0 50% / calc(100% - 12px) 3px no-repeat; }
.chain__leg svg use { transform: translateX(calc(50% - 12px)); transform-box: view-box; }
.chain__leg--car svg { background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px) 0 50% / calc(100% - 12px) 3px no-repeat; }
.chain__leg small { margin-top: 4px; }
.chain__home > b { background: var(--ink) !important; color: #fff; }
.route__text { margin-top: 30px; padding-top: 18px; border-top: 1.5px solid var(--ink); font-weight: 600; font-size: 1.04rem; }
.route__note { margin-top: 6px; font: 400 .8rem/1.4 var(--mono); color: var(--ink-2); }

/* Leistungen – Schwedenrätsel */
.svc__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 2.5px 2.5px 0; }
.svc__i { container-type: inline-size; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0 0;
  padding: 26px 26px 30px; border: 2.5px solid var(--ink); margin: 0 -2.5px -2.5px 0; background: var(--white); transition: background .2s; }
.svc__i:hover { background: #fffbe0; }
.svc__clue { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 46px; min-height: 46px; padding: 5px 0 4px;
  background: var(--grey); border: 2px solid var(--ink); margin-right: -2px; font: 700 .76rem/1 var(--mono); align-self: start; }
.svc__clue svg { width: 15px; height: 15px; }
.svc__i h3 { align-self: start; }
.svc__i .xw-g { --c: min(34px, calc(100cqi / max(10, var(--len, 15.4)))); }
.svc__i h3:not(.is-boxed) { padding: 8px 0 0 12px; }
.svc__i p { grid-column: 1 / -1; margin-top: 22px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; hyphens: auto; }
.svc__i:nth-child(6n+2)::after, .svc__i:nth-child(6n+5)::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: var(--ink); }
.svc__i:nth-child(6n+3)::after { content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: var(--yellow); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

/* Ablauf – Treppenrätsel */
.steps__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 52px); }
.steps { --c: 46px; counter-reset: st; }
.steps li { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 48ch); justify-content: start; align-items: center; gap: 28px 56px; padding: 12px 0; border-bottom: 1px solid var(--grey-2); }
.steps li:last-child { border-bottom: 0; }
.steps h3 { padding-left: calc(var(--i) * 46px); }
.steps h3 .xw-g { --c: 46px; }
.steps p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "pic text" "pic ws"; gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px); }
.about__pic { grid-area: pic; }
.about__frame { border: 2.5px solid var(--ink); padding: 12px; background: var(--white); box-shadow: 10px 10px 0 var(--ink); }
.about__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; filter: grayscale(1) contrast(1.12); transition: filter .3s ease; }
.about__frame:hover img { filter: none; }
.about__pic figcaption { margin-top: 22px; font: 400 .82rem/1.5 var(--mono); color: var(--ink-2); max-width: 46ch; }
.about__pic figcaption b { color: var(--ink); background: var(--yellow); padding: 0 4px; }
.about__text { grid-area: text; }
.about__text h2 { margin-bottom: 26px; }
.feats { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 2px 2px 0; }
.feats li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--ink); margin: 0 -2px -2px 0; font-weight: 700; background: var(--white); line-height: 1.3; }
.feats li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.about__ws { grid-area: ws; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: end; }
.ws { width: 100%; height: auto; background: var(--white); border: 2.5px solid var(--ink); }
.ws__raster { fill: none; stroke: var(--grey-2); stroke-width: .3; }
.ws text { font: 600 5.4px var(--mono); text-anchor: middle; fill: var(--ink); }
.ws__hit { stroke: var(--yellow); stroke-width: 8; stroke-linecap: round; }
.about__ws figcaption { font: 400 .8rem/1.5 var(--mono); color: var(--ink-2); padding-bottom: 6px; }

/* Kontakt – Coupon */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__intro h2 { margin-bottom: 24px; }
.contact__intro .lead { margin-bottom: 32px; }
.contact__intro .ctas { flex-direction: column; align-items: flex-start; }
.coupon { position: relative; border: 3px dashed var(--ink); padding: clamp(24px, 3vw, 40px); background: var(--white); }
.coupon__cut { position: absolute; top: -13px; left: 34px; width: 32px; height: 24px; background: var(--paper); padding: 0 4px; box-sizing: content-box; }
.coupon__head { font: 700 .8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 14px; border-bottom: 2.5px solid var(--ink); margin-bottom: 6px; }
.coupon__rows > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0 12px; border-bottom: 1px dotted var(--ink); }
.coupon__rows dt { font: 400 .74rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding-top: 2px; }
.coupon__rows dd { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.coupon__rows dd .muted { font-weight: 400; }
.coupon__stamp { position: absolute; right: -14px; bottom: -18px; transform: rotate(-6deg); background: var(--yellow); border: 2px solid var(--ink); padding: 8px 12px; font: 700 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Fuß ---------- */
.foot { border-top: 6px solid var(--ink); position: relative; background: var(--paper); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px solid var(--ink); }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo meta nav" "sol sol page"; gap: 28px 40px; align-items: center; padding-block: 48px 28px; }
.foot__logo { grid-area: logo; display: block; border: 2px solid var(--ink); background: var(--white); padding: 8px; }
.foot__logo img { width: 84px; height: auto; }
.foot__meta { grid-area: meta; font-size: .94rem; line-height: 1.6; color: var(--ink-2); }
.foot__brand { font-weight: 800; color: var(--ink); }
.foot__copy { font: 400 .78rem/1.5 var(--mono); margin-top: 6px; }
.foot__nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0; padding: 0 2px 2px 0; }
.foot__nav a { display: block; padding: 10px 14px; border: 2px solid var(--ink); margin: 0 -2px -2px 0; font: 700 .9rem/1.2 var(--font); text-decoration: none; background: var(--white); }
.foot__nav a:hover { background: var(--yellow); }
.foot__sol { grid-area: sol; transform: rotate(180deg); justify-self: start; font: 400 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 14px 0 0; }
.foot__page { grid-area: page; font: 700 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; justify-self: end; padding-left: 12px; border-left: 6px solid var(--ink); }

/* ---------- Rechtsseiten ---------- */
.legal { padding-block: clamp(40px, 6vw, 80px) 0; }
.legal__in { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.legal__aside { position: sticky; top: 24px; }
.back { display: inline-flex; align-items: center; gap: 8px; font: 700 .86rem/1.2 var(--mono); text-decoration: none; padding: 10px 14px; border: 2px solid var(--ink); background: var(--white); box-shadow: 4px 4px 0 var(--ink); }
.back:hover { background: var(--yellow); }
.legal__aside .tag { margin: 34px 0 0; }
.legal__deco { margin-top: 30px; display: grid; grid-template-columns: repeat(6, 26px); grid-auto-rows: 26px; border: 2px solid var(--ink); width: max-content; }
.legal__deco i { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--white); }
.legal__deco i:nth-child(6n) { border-right: 0; }
.legal__deco i:nth-child(n+31) { border-bottom: 0; }
.legal__deco i.k { background: var(--ink); }
.legal__deco i.y { background: var(--yellow); }
.legal__main h1 { margin-bottom: clamp(28px, 4vw, 48px); }
.legal__main .xw-g { --c: min(46px, calc(100cqi / max(12, var(--len, 17.4)))); }
.legal-body { max-width: 70ch; background: var(--white); border: 2.5px solid var(--ink); padding: clamp(22px, 4vw, 52px); box-shadow: 10px 10px 0 var(--grey-2); }
.legal-body h2 { font: 800 1.22rem/1.25 var(--font); margin: 2em 0 .55em; display: flex; gap: 12px; align-items: baseline; }
.legal-body h2::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--ink); box-shadow: 3px 3px 0 var(--yellow); transform: translateY(1px); }
.legal-body h2:first-child, .legal-body .legal-note + h2 { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 1em; color: var(--ink-2); hyphens: auto; }
.legal-body ul { padding-left: 0; }
.legal-body li { position: relative; padding-left: 22px; margin-bottom: .4em; }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border: 1.5px solid var(--ink); }
.legal-body a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.legal-body .legal-note { font: 400 .86rem/1.5 var(--mono); background: var(--yellow-2); border: 2px solid var(--ink); padding: 12px 16px; margin-bottom: 2em; color: var(--ink); }
.legal-body .legal-address { font: 400 .92rem/1.6 var(--mono); border-left: 6px solid var(--ink); padding-left: 16px; color: var(--ink); }

/* ---------- Animation: Kästchen füllen sich ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .xw.is-boxed.xw-wait .c b { opacity: 0; }
  .js .xw.is-boxed .c b { transition: opacity .12s ease; transition-delay: calc(var(--k, 0) * 28ms); }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1120px) {
  .mast__main { gap: 20px; }
  .nav { gap: 18px; }
  .nav__head { display: none; }
  .nav ol a { padding-right: 12px; gap: 8px; font-size: .95rem; }
  .tel__l { display: none; }
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .pz { padding: 16px 16px 14px; }
  .pz__grid { --s: 34px; }
  .pz__clues ol { columns: 1; }
  .pz__clues li:nth-child(n+5) { display: none; }
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .about__ws { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .steps__wrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 48px; padding: 0 16px 0 0; border: 2.5px solid var(--ink); background: var(--white);
    font: 700 .95rem/1 var(--font); color: var(--ink); cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
  .menu__ico { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 3px; padding: 0 12px; align-self: stretch; align-content: center; border-right: 2.5px solid var(--ink); background: var(--yellow); }
  .menu__ico i { border: 1.5px solid var(--ink); background: var(--white); }
  .menu__ico i:nth-child(2), .menu__ico i:nth-child(3) { background: var(--ink); }
  .menu[aria-expanded="true"] .menu__ico i { background: var(--ink); }
  .menu[aria-expanded="true"] .menu__ico i:nth-child(2), .menu[aria-expanded="true"] .menu__ico i:nth-child(3) { background: var(--white); }
  .js .nav { position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + 14px); display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border: 2.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 8px 18px 18px; }
  .js .mast.open .nav { display: flex; }
  .mast__main { position: relative; flex-wrap: wrap; }
  html:not(.js) .nav { flex-basis: 100%; flex-wrap: wrap; padding-bottom: 16px; }
  .nav ol { flex-direction: column; margin: 0; }
  html:not(.js) .nav ol { flex-direction: row; flex-wrap: wrap; }
  .js .nav ol a { padding: 12px 0; font-size: 1.2rem; border-bottom: 1px solid var(--grey-2); gap: 14px; }
  .nav__end { justify-content: space-between; padding-top: 16px; }
  .tel__l { display: block; }
  .mast__strip-in > span:nth-child(2) { display: none; }
  .hero__in { grid-template-columns: 1fr; }
  .hero .pz { max-width: 520px; }
  .pz__clues ol { columns: 2; }
  .pz__clues li:nth-child(n+5) { display: list-item; }
  .focus__top, .svc__top, .focus__board, .contact { grid-template-columns: 1fr; }
  .solve { position: static; max-width: 560px; }
  .about { grid-template-columns: 1fr; grid-template-areas: "text" "pic" "ws"; }
  .about__pic { max-width: 520px; }
  .legal__in { grid-template-columns: minmax(0, 1fr); }
  .legal__main { min-width: 0; }
  .legal__aside { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
  .legal__aside .tag { margin: 0; }
  .legal__deco { display: none; }
}
@media (max-width: 640px) {
  :root { --b: 2px; }
  .mast__strip-in { gap: 16px; font-size: .68rem; }
  .mast__sol { display: none; }
  .mast__main { min-height: 80px; }
  .logo img { width: 56px; }
  .hero { padding-top: 28px; }
  .xw--h1 .xw-g { --c: min(36px, calc(100cqi / var(--len, 13.2))); }
  .xw--h2 .xw-g { --c: min(36px, calc(100cqi / max(8, var(--len, 11.6)))); }
  .btn { width: 100%; justify-content: space-between; }
  .pz { padding: 14px 12px 12px; box-shadow: 6px 6px 0 var(--ink); }
  .pz__grid { --s: min(38px, calc((100vw - 2 * var(--pad) - 34px) / 9)); }
  .pz__clues ol { columns: 1; }
  .pz__foot { flex-wrap: wrap; }
  .clues { grid-template-columns: 1fr; }
  .clues__col + .clues__col { margin-top: 28px; }
  .stats { grid-template-columns: 1fr; }
  .stats li { min-height: 150px; }
  .chain { flex-direction: column; align-items: stretch; gap: 0; }
  .chain > li { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 0; }
  .chain > li > b { --s: 40px; }
  .chain small { flex-basis: auto; margin: 0 0 0 16px; text-align: left; }
  .chain__leg { flex-direction: row !important; padding: 4px 0 4px 44px; min-height: 40px; }
  .chain__leg svg { width: 24px; height: 34px; transform: rotate(90deg); background-size: 3px calc(100% - 12px); background-position: 50% 0; }
  .chain__leg svg { background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 100% 3px no-repeat; }
  .chain__leg--car svg { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px) 50% 50% / 100% 3px no-repeat; }
  .chain__leg svg use { transform: none; }
  .chain__leg small { margin: 0 0 0 4px; }
  .svc { grid-template-columns: 1fr; }
  .svc__i { padding: 20px 18px 24px; grid-template-columns: 1fr; }
  .svc__clue { flex-direction: row; width: auto; min-height: 0; justify-self: start; gap: 10px; padding: 6px 10px; margin: 0 0 -2px; }
  .svc__i .xw-g { --c: min(32px, calc(100cqi / max(10, var(--len, 15.3)))); }
  .sec__bar > span:last-child { display: none; }
  .sec__bar > span { white-space: nowrap; }
  .svc__i::after { display: none; }
  .steps li { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .steps h3 { padding-left: calc(var(--i) * 22px); }
  .steps h3 .xw-g { --c: min(34px, calc((100cqi - 66px) / 8.4)); }
  .feats { grid-template-columns: 1fr; }
  .about__ws { grid-template-columns: 1fr; }
  .about__ws .ws { max-width: 300px; }
  .coupon__rows > div { grid-template-columns: 1fr; gap: 4px; }
  .coupon__stamp { right: 8px; }
  .foot__in { grid-template-columns: 1fr; grid-template-areas: "logo" "meta" "nav" "page" "sol"; }
  .foot__logo { justify-self: start; }
  .foot__page { justify-self: start; }
  .legal__main .xw-g { --c: min(34px, calc(100cqi / max(9, var(--len, 17.2)))); }
  .legal-body { box-shadow: 6px 6px 0 var(--grey-2); }
}
@media (max-width: 380px) {
  .tel { font-size: .9rem; }
}