/* Merken · Landingpage, Blöcke cb01 bis cb09 in Seitenreihenfolge
   Rhythmus der Farbfelder: Kobalt (Hero), Sonne (Laufband), Papier (Ein Ort),
   Pink (Saison), Papier (So geht’s), Strecke mit eigenen Farben je Tafel,
   Papier mit Pink-Akzent (Erinnern), Sonne (Personen), Papier (Privat,
   Preise), Pink (Fragen), Kobalt (Abschluss). Jeder Block hat einen großen
   Auftritt der Figur, aber nie zwei gleiche Posen nebeneinander. */

section { position: relative; }
/* Stanzrand, Schatten und Figuren dürfen über den Rand ragen, aber nie
   seitlich aus der Seite. */
.hero, .gather { overflow-x: clip; }
.section-head { max-width: 780px; }
.section-head .lead { margin-top: 24px; }

/* ===================== cb01 · Hero ===================== */
.hero { background: var(--mk-accent); color: #fff; padding: 32px 0 0; overflow-y: clip; }
.hero :focus-visible { outline-color: #fff; }
.hero .lead, .hero .store-note { color: rgba(255, 255, 255, .9); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
/* Zwei Zeilen, je eine Quelle. Kleiner als h-xl, damit „Von jeder
   Website.“ ab Tablet in eine Zeile passt. */
.hero__title { font-size: clamp(48px, 14.6vw, 96px); }
.hero__title span { display: block; }
/* Das Versprechen als Sonnen-Sticker, dieselbe Zeile wie Store-Motiv 1 */
.hero__title .hero__payoff {
  width: fit-content;
  margin-top: .3em; padding: .08em .2em .02em;
  background: var(--mk-sun); color: var(--mk-text);
  border-radius: .14em;
  box-shadow: 0 0 0 6px #fff, 0 10px 18px rgba(20, 20, 20, .14);
  transform: rotate(-2deg); transform-origin: 0 50%;
}
.hero__sub { margin: 26px 0 0; font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--mk-sun); }
.hero__copy .lead { margin-top: 16px; max-width: 34em; }
.hero__cta { margin-top: 32px; }
.hero__stage {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
/* Kacheln über dem Telefon, Spuren enden oben in der Mitte des Telefons */
.hero__sky { position: relative; z-index: 3; aspect-ratio: 100 / 40; margin-bottom: -2px; }
.hero__trails {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1 9; opacity: .7;
}
.hero__trails path { vector-effect: non-scaling-stroke; }
.hero__sky .hero__tiles { position: absolute; inset: 0; display: block; width: auto; max-width: none; gap: 0; }
.hero__tiles .tile { position: absolute; width: 18%; translate: -50% -50%; }
.hero__tiles .tile:nth-child(1) { left: 8%; top: 66%; }
.hero__tiles .tile:nth-child(2) { left: 22%; top: 26%; }
.hero__tiles .tile:nth-child(3) { left: 50%; top: 12%; }
.hero__tiles .tile:nth-child(4) { left: 78%; top: 26%; }
.hero__tiles .tile:nth-child(5) { left: 92%; top: 66%; }
/* Die Kacheln schieben sich beim Laden von rechts ins Bild, nacheinander */
@keyframes tile-fly { from { transform: translateX(70vw) rotate(18deg); } to { transform: none; } }
.motion .hero__tiles .tile { animation: tile-fly 1100ms var(--ease) both; }
.motion .hero__tiles .tile:nth-child(5) { animation-delay: 100ms; }
.motion .hero__tiles .tile:nth-child(4) { animation-delay: 220ms; }
.motion .hero__tiles .tile:nth-child(3) { animation-delay: 340ms; }
.motion .hero__tiles .tile:nth-child(2) { animation-delay: 460ms; }
.motion .hero__tiles .tile:nth-child(1) { animation-delay: 580ms; }
.hero__phone { --pw: min(340px, 74vw); z-index: 2; }
/* Figur als Co-Star vor dem Telefon, mit Sprechblase im Sticker-Stil */
.hero__buddy {
  position: absolute; z-index: 3;
  right: -14%; bottom: 10%;
  width: min(170px, 44vw);
  display: flex; flex-direction: column; align-items: flex-end;
}
.hero__merk {
  display: block; width: 100%;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 12px 18px rgba(20, 20, 20, .18));
}
.hero__hand {
  position: relative;
  margin: 0 18% 14px 0; padding: 10px 16px;
  background: #fff; color: var(--mk-accent);
  border-radius: 16px; box-shadow: var(--sh-sticker-up);
  transform: rotate(-3deg);
  font-size: clamp(20px, 2.2vw, 28px);
  white-space: nowrap;
}
.hero__hand::after {
  content: ""; position: absolute;
  right: 26%; bottom: -10px;
  border-style: solid; border-width: 12px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
}
@media (min-width: 900px) {
  .hero { padding: 48px 0 0; }
  .hero__copy { padding-bottom: 96px; }
  .hero__stage { align-self: end; }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .hero__title { font-size: clamp(64px, 6.7vw, 104px); }
  .hero__title span { white-space: nowrap; }
  .hero__stage { margin-right: 22%; }
  .hero__phone { --pw: 370px; }
  /* Ab Desktop lugen die äußeren Kacheln links und rechts am Telefon vorbei */
  .hero__sky { margin-inline: -16%; aspect-ratio: 100 / 34; }
  .hero__tiles .tile { width: 13%; }
  .hero__buddy { width: 138px; right: -30%; top: auto; bottom: 30px; }
}

@keyframes merk-pop { from { opacity: 0; scale: .6; translate: 0 18%; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes hand-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.motion .hero__merk { animation: merk-pop 900ms var(--ease) 250ms both, merk-wobble var(--wobble) ease-in-out 2200ms 3; }
.motion .hero__hand { animation: hand-in 900ms ease-out 1300ms both; }

/* ===================== cb01b · Ein Ort ===================== */
/* Verstreute App-Kacheln (neutrale Symbole, keine Logos) fliegen in eine
   aufgeräumte Karte aus der echten App. Auf dem Handy erst Text, dann Bild. */
.gather { padding: 64px 0 72px; }
.gather__grid { display: grid; gap: 40px; align-items: center; }
.gather__copy .lead { margin-top: 24px; }
.gather__works {
  max-width: 36em; margin: 20px 0 0; padding: 14px 18px;
  border-radius: var(--r-tile); background: var(--mk-surface); box-shadow: var(--sh-sticker);
  font-weight: 500; font-size: 16px; line-height: 1.5;
}
.gather__stage {
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px;
  width: 100%; max-width: 560px; margin: 0 auto;
}
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 10px;
  width: 100%; max-width: 420px;
}
.tile {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 28%;
  box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(20, 20, 20, .14);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
}
.tile .i { width: 56%; height: 56%; stroke-width: 1.9; }
.tile--cobalt { background: var(--mk-accent); color: #fff; }
.tile--pink { background: var(--mk-pink); color: var(--mk-text); }
.tile--sun { background: var(--mk-sun); color: var(--mk-text); }
.tile--ink { background: var(--mk-text); color: #fff; }
.tile--white { background: var(--mk-surface); color: var(--mk-accent); }
/* Verstreut statt im Raster: jede Kachel leicht versetzt und gedreht */
.tile:nth-child(1) { --x: -4px; --y: 6px; --r: -9deg; }
.tile:nth-child(2) { --x: 3px; --y: -6px; --r: 7deg; }
.tile:nth-child(3) { --x: -2px; --y: 10px; --r: -4deg; }
.tile:nth-child(4) { --x: 5px; --y: -2px; --r: 11deg; }
.tile:nth-child(5) { --x: -3px; --y: 8px; --r: -12deg; }
.tile:nth-child(6) { --x: 2px; --y: -8px; --r: 6deg; }
.tile:nth-child(7) { --x: 6px; --y: 4px; --r: 8deg; }
.tile:nth-child(8) { --x: -5px; --y: -6px; --r: -6deg; }
.tile:nth-child(9) { --x: 3px; --y: 6px; --r: 10deg; }
.tile:nth-child(10) { --x: -4px; --y: -4px; --r: -10deg; }
.tile:nth-child(11) { --x: 4px; --y: 8px; --r: 5deg; }
.tile:nth-child(12) { --x: -2px; --y: -6px; --r: -8deg; }
.gather__flow {
  width: 96px; height: 56px;
  fill: none; stroke: var(--mk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg);
}
.gather__flow path:first-child { stroke-dasharray: 2 8; }
.gather__card { width: min(320px, 80vw); padding: 8px; border-radius: 26px; box-shadow: var(--sh-sticker-up); }
.gather__card img { width: 100%; border-radius: 19px; }
.gather__hand {
  position: absolute; z-index: 3; right: 0; bottom: -18px;
  margin: 0; padding: 6px 14px;
  background: var(--mk-sun); color: var(--mk-text);
  border-radius: 12px; box-shadow: 0 0 0 5px #fff, 0 8px 14px rgba(20, 20, 20, .14);
  transform: rotate(-4deg);
  font-size: clamp(22px, 2.2vw, 28px); white-space: nowrap;
}
@keyframes tile-in { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
.motion .gather__stage .tile { opacity: 0; }
.motion .gather__stage.is-in .tile { animation: tile-in 600ms var(--ease) both; }
.motion .gather__stage.is-in .tile:nth-child(3n+2) { animation-delay: 80ms; }
.motion .gather__stage.is-in .tile:nth-child(3n) { animation-delay: 160ms; }
@media (min-width: 720px) {
  .gather__stage {
    max-width: none;
    grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.3fr);
    align-items: center; gap: 8px;
  }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 16px 14px; max-width: 250px; }
  .gather__flow { transform: none; }
  .gather__card { width: 100%; max-width: 420px; }
  .gather__hand { right: -8px; bottom: -22px; }
}
/* Bis Tablet: Überschrift und Satz, dann gleich das Bild, die Markenliste
   erst danach. Die Kacheln bleiben klein und überlappen nicht. */
@media (max-width: 899px) {
  .gather__grid { gap: 0; }
  .gather__copy { display: contents; }
  .gather__stage { margin-top: 36px; }
  .gather__works { order: 1; margin-top: 44px; }
  .gather__stage .tiles { max-width: 300px; margin-inline: auto; gap: 12px; justify-items: center; }
  .gather__stage .tile { width: 56px; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .gather__stage .tiles { gap: 20px 22px; }
}
@media (max-width: 719px) {
  .gather__stage .tiles { grid-template-columns: repeat(4, 56px); justify-content: center; gap: 14px 18px; }
}
@media (max-width: 599px) {
  .gather__stage .tile:nth-child(n+9) { display: none; }
}
@media (min-width: 900px) {
  .gather { padding: 96px 0 104px; }
  .gather__grid { grid-template-columns: .72fr 1.28fr; gap: 48px; }
}

/* ===================== Feature-Abschnitte (cb02, cb04, cb05, cb06) =====================
   👤 07.11.2026, Vorbild Feature-Seiten großer Apps: je Feature eine farbige
   Fläche mit Überschrift, einem Satz und einem großen Telefon, das unten am
   Rand der Fläche ausläuft (.cut--top). Mobil Text über dem Telefon, ab 900 px
   nebeneinander, --flip tauscht die Seiten. Figur und Sticker sitzen nur auf
   leeren Flächen oder dem Rahmen, nie auf dem Screen-Inhalt. */
.feat { padding: 12px 0; }
.feat__panel {
  position: relative; overflow: hidden;
  display: grid; gap: 32px;
  padding: 44px 22px 0;
  border-radius: 34px;
  background: var(--feat-bg, var(--mk-surface));
}
.feat--steps   { --feat-bg: #E4E8FD; }
.feat--remind  { --feat-bg: #FFE0ED; }
.feat--people  { --feat-bg: var(--mk-sun); }
.feat--private { --feat-bg: var(--mk-surface); }
.feat--private .feat__panel { box-shadow: var(--sh-sticker-up); }
.feat__copy { text-align: center; max-width: 560px; margin: 0 auto; }
.feat__copy .lead { margin: 16px auto 0; color: var(--mk-text); }
.feat__small { margin: 14px 0 0; color: var(--mk-text); }
.feat__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 52px; }
.feat__phone { --pw: min(76vw, 340px); }
.feat__phone .phone { box-shadow: inset 0 0 0 2px #3a3a3a, 0 0 0 6px #fff, 0 -6px 40px -8px rgba(20, 20, 20, .22); }

/* Schritte, Erinnerungsarten und Datenschutz: kurze Zeilen statt Karten */
.feat__steps, .feat__kinds, .feat__points {
  list-style: none; padding: 0; margin: 24px auto 0;
  display: grid; gap: 12px; width: fit-content; max-width: 100%; text-align: left;
}
.feat__steps li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.feat__num {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mk-accent); color: #fff; font-family: var(--f-display); font-size: 18px;
}
/* Mobil Marke über dem Satz, zentriert; ab 900 px nebeneinander */
.feat__kinds { gap: 14px; text-align: center; }
.feat__kinds li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; }
.kind__k {
  justify-self: start;
  display: inline-grid; place-items: center; min-height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); font-weight: 800; font-size: 14px;
}
.kind__k--item { background: var(--mk-accent); color: #fff; }
.kind__k--date { background: var(--mk-sun); color: var(--mk-text); }
.kind__k--pink { background: var(--mk-pink); color: var(--mk-text); }
.kind__k--white { background: #fff; color: var(--mk-text); }
.feat__kinds .kind__k { white-space: nowrap; }
.feat__points { gap: 10px; }
.feat__points li { position: relative; padding-left: 22px; font-size: 16px; color: var(--mk-text-soft); }
.feat__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--mk-accent); box-shadow: 0 0 0 4px var(--mk-accent-soft); }
.feat__points b { color: var(--mk-text); }
.feat__link { margin: 20px 0 0; font-weight: 700; }

.feat__sticker {
  position: absolute; z-index: 3; top: 4px; left: 2%;
  padding: 8px 16px;
  font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; text-transform: uppercase;
  color: var(--mk-text); background: var(--mk-pink);
  border-radius: 14px; box-shadow: 0 0 0 6px #fff, 0 10px 18px rgba(20, 20, 20, .16);
  transform: rotate(-7deg);
}
.feat--people .feat__sticker { background: #fff; }
/* Figur rechts neben dem Telefon auf der leeren Fläche, mobil am oberen Rahmen */
.feat__merk { position: absolute; z-index: 3; width: 70px; right: 4%; top: -22px; transform-origin: 50% 90%; }
.motion .feat__merk { animation: merk-wobble var(--wobble) ease-in-out 1.6s 3; }
.feat__note {
  position: absolute; z-index: 3; top: 6px; right: 4%;
  margin: 0; padding: 6px 14px;
  background: var(--mk-pink); color: var(--mk-text);
  border-radius: 12px; box-shadow: 0 0 0 5px #fff, 0 8px 14px rgba(20, 20, 20, .14);
  font-size: clamp(20px, 2.2vw, 28px); transform: rotate(4deg);
}

@media (min-width: 900px) {
  .feat { padding: 16px 0; }
  .feat__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: 40px;
    min-height: 600px; padding: 0 64px;
    border-radius: 44px;
  }
  .feat__copy { text-align: left; margin: 0; align-self: center; padding: 72px 0; max-width: 520px; }
  .feat__copy .lead { margin-left: 0; }
  .feat__steps, .feat__kinds, .feat__points { margin-left: 0; }
  .feat__kinds { text-align: left; }
  .feat__kinds li { flex-direction: row; gap: 12px; }
  .feat--flip .feat__copy { order: 2; }
  .feat__stage { padding-top: 96px; }
  .feat__phone { --pw: 380px; }
  /* Über dem Telefon auf der freien Fläche, höchstens am Rahmen */
  .feat__merk { width: 86px; right: 6%; top: 4px; }
  .feat--flip .feat__merk { right: auto; left: 6%; }
  .feat__sticker { top: 40px; left: 6%; }
  .feat--flip .feat__sticker { left: auto; right: 6%; }
  .feat__note { top: 36px; right: 4%; }
}
@media (min-width: 1100px) {
  .feat__phone { --pw: 410px; }
}

/* ===================== Laufband ===================== */
.ticker-clip { position: relative; z-index: 4; overflow-x: clip; }
.ticker {
  margin: -22px -2% 0; padding: 16px 0 12px;
  background: var(--mk-sun); color: var(--mk-text);
  overflow: hidden;
  transform: rotate(-1.2deg);
  box-shadow: 0 8px 18px rgba(20, 20, 20, .16);
}
.ticker__run { display: flex; width: max-content; }
.ticker ul { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li {
  display: flex; align-items: center; gap: .36em;
  padding-right: 1em;
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.1;
}
.ticker .dot { width: .42em; height: .42em; box-shadow: 0 0 0 3px #fff; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
.motion .ticker__run { animation: ticker-run 34s linear infinite; }

/* ===================== cb03 · Strecke ===================== */
/* Grundzustand ohne Skript, mit „Bewegung reduzieren“ oder zu wenig Höhe:
   Tafeln untereinander. Mit [data-quer] bleibt die Bühne stehen, und das Band
   fährt aus der senkrechten Scrollposition von rechts nach links. Nichts wird
   abgefangen, Mausrad, Touch und Tasten scrollen normal. */
.strecke { background: var(--mk-sun); }
.tafel {
  position: relative; overflow: hidden;
  display: grid; gap: 32px;
  padding: 56px var(--gutter) 0;
  background: var(--tafel-bg); color: var(--tafel-fg);
}
.tafel--cobalt { --tafel-bg: var(--mk-accent); --tafel-fg: #fff; --u-bg: #fff; --u-fg: var(--mk-text); }
.tafel--pink { --tafel-bg: var(--mk-pink); --tafel-fg: var(--mk-text); --u-bg: #fff; --u-fg: var(--mk-text); }
.tafel--ink { --tafel-bg: var(--mk-text); --tafel-fg: #fff; --u-bg: var(--mk-sun); --u-fg: var(--mk-text); }
.tafel--paper { --tafel-bg: var(--mk-bg); --tafel-fg: var(--mk-text); --u-bg: var(--mk-pink); --u-fg: var(--mk-text); }
.tafel--sun { --tafel-bg: var(--mk-sun); --tafel-fg: var(--mk-text); --u-bg: var(--mk-accent); --u-fg: #fff; }
.tafel__text { position: relative; z-index: 2; max-width: 680px; }
.tafel__cat { margin: 0 0 22px; }
.tafel__titel { font-size: clamp(44px, min(5.8vw, 12svh), 84px); }
.tafel__urteil { margin: 0; font-size: clamp(44px, min(5.8vw, 12svh), 84px); }
.tafel__urteil span {
  display: block; width: fit-content; padding: .14em .24em .08em;
  background: var(--u-bg); color: var(--u-fg);
  border-radius: .13em;
  box-shadow: 0 0 0 6px #fff, 0 14px 26px rgba(20, 20, 20, .22);
  transform: rotate(-2deg);
  text-wrap: balance;
}
.tafel__txt { margin: 34px 0 0; max-width: 28em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 600; }
.tafel__titel + .tafel__txt { margin-top: 24px; }
.tafel__hint { display: none; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--mk-sun); }
.tafel__hint .i { width: 30px; height: 30px; stroke-width: 2.6; }
.tafel__merk { display: block; width: 120px; margin-top: 18px; filter: drop-shadow(0 10px 16px rgba(20, 20, 20, .22)); }
.tafel__phone { --pw: min(74vw, 340px); justify-self: center; height: min(120vw, 560px); }
.tafel__phone .phone { --pw: inherit; box-shadow: inset 0 0 0 2px #3a3a3a, 0 0 0 6px #fff, 0 28px 60px -12px rgba(20, 20, 20, .4); }
.strecke__mehr { margin: 0; padding: 40px 0 56px; background: var(--mk-sun); color: var(--mk-text); font-weight: 700; font-size: 18px; line-height: 1.5; }
.strecke__mehr .wrap { display: block; max-width: 860px; }
.strecke__spur { display: none; }

/* waagrechter Modus */
.strecke[data-quer] { height: calc(100svh + var(--tafeln, 5) * 100svh); }
.strecke[data-quer] + * { position: relative; }
[data-quer] .strecke__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
[data-quer] .strecke__band { display: flex; height: 100%; width: max-content; }
[data-quer] .tafel {
  flex: none; width: 100vw; height: 100svh;
  align-content: start;
  padding: clamp(28px, 6svh, 64px) var(--gutter) 0;
  gap: clamp(16px, 3svh, 32px);
}
[data-quer] .tafel__phone { height: auto; }
[data-quer] .tafel__hint { display: flex; }
/* Das Urteil klebt erst, wenn seine Tafel ankommt */
[data-quer] .tafel__urteil span { opacity: 0; transform: scale(1.5) rotate(7deg); }
[data-quer] .tafel.is-on .tafel__urteil span {
  opacity: 1; transform: rotate(-2deg);
  transition: transform 420ms cubic-bezier(.2, 1.5, .4, 1), opacity 120ms linear;
}
[data-quer] .strecke__spur {
  display: flex; position: absolute; z-index: 5;
  left: 50%; bottom: 18px; translate: -50% 0;
  gap: 10px; margin: 0; padding: 10px 14px;
  list-style: none;
  background: #fff; border-radius: var(--r-pill);
  box-shadow: 0 8px 18px rgba(20, 20, 20, .22);
}
.strecke__spur li {
  width: 12px; height: 12px; border-radius: 50%;
  background-color: var(--mk-accent); opacity: .28;
  transition: opacity var(--rise) var(--ease), scale var(--rise) var(--ease);
}
.strecke__spur li.is-on { opacity: 1; scale: 1.35; }
.dot--tomato { background-color: var(--dot-tomato); }
.dot--mint { background-color: var(--dot-mint); }
.dot--rose { background-color: var(--dot-rose); }
.dot--plum { background-color: var(--dot-plum); }

@media (min-width: 720px) {
  .tafel { padding-inline: 32px; }
  [data-quer] .tafel { padding-inline: 32px; }
}
@media (min-width: 900px) {
  .tafel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; padding: 88px max(40px, calc((100vw - 1200px) / 2)) 0; }
  .tafel__text { align-self: center; padding-bottom: 88px; }
  .tafel__merk { width: min(140px, 16svh); margin-top: 20px; }
  .tafel__phone { --pw: clamp(320px, 30vw, 420px); height: 760px; }
  [data-quer] .tafel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-content: stretch; padding: 7svh max(40px, calc((100vw - 1200px) / 2)) 0; }
  [data-quer] .tafel__text { padding-bottom: 7svh; }
  [data-quer] .tafel__phone { --pw: min(30vw, 420px, 62svh); }
  .strecke__mehr { padding: 56px 0 72px; font-size: 21px; }
}
/* Handy: wenig Höhe, darum kleinere Urteile und kein Text-Luxus */
@media (max-width: 899px) {
  [data-quer] .tafel__urteil, [data-quer] .tafel__titel { font-size: clamp(34px, 10.4vw, 60px); }
  [data-quer] .tafel__cat { margin-bottom: 14px; }
  [data-quer] .tafel__txt { margin-top: 24px; font-size: 16px; }
  [data-quer] .tafel__hint { font-size: 22px; margin-top: 14px; }
  [data-quer] .tafel__merk { position: absolute; right: 0; top: -14px; width: 52px; margin: 0; }
  [data-quer] .tafel__phone { --pw: min(80vw, 48svh); }
}

/* Bühnen schieben sich einmalig von rechts ins Bild */
.motion [data-slide] { transform: translateX(46vw) rotate(3deg); opacity: 0; transition: transform 1000ms var(--ease), opacity 300ms linear; }
.motion [data-slide].is-in { transform: none; opacity: 1; }

/* ===================== cb07 · Preise ===================== */
.pricing { padding: 64px 0; }
.plans { list-style: none; margin: 40px 0 24px; padding: 0; display: grid; gap: 24px; }
.plan .in { height: 100%; padding: 26px 24px; }
.plan__unit { margin: 0 0 12px; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.plan__badge {
  position: absolute; z-index: 2; top: -14px; right: 18px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--mk-pink); color: var(--mk-text);
  font-weight: 800; font-size: 14px; line-height: 1.2;
  box-shadow: 0 0 0 4px #fff, var(--sh-sticker);
  transform: rotate(4deg);
}
.plan__name { font-size: 20px; font-weight: 800; }
.plan__big { margin: 8px 0 8px; font-size: 56px; line-height: 1.05; }
.plan__price { margin: 0 0 10px; font-weight: 800; font-size: 18px; line-height: 1.35; }
.plan--hi .plan__price { color: #fff; }
.plan p:last-child { margin: 0; }
.plan--hi { box-shadow: var(--sh-sticker-up); }
.pricing__small { max-width: 640px; margin: 0; }
/* Ab 360 px zwei Spalten, sonst stehen vier Karten untereinander */
@media (min-width: 360px) {
  .plans { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
@media (min-width: 360px) and (max-width: 639px) {
  .plans { gap: 12px; }
  .plan .in { padding: 16px 14px; }
  .plan__big { font-size: 40px; }
  .plan__unit { font-size: 11.5px; letter-spacing: .02em; }
  .plan__price { font-size: 16px; }
  .plan p:last-child { font-size: 14.5px; }
  .plan__badge { font-size: 12px; }
}
@media (min-width: 900px) {
  .pricing { padding: 88px 0; }
  .plan--hi { transform: translateY(-12px); }
}
@media (min-width: 1100px) {
  .plans { grid-template-columns: repeat(4, 1fr); }
}

/* ===================== cb08 · Fragen (Pink) ===================== */
.faq { background: var(--mk-pink); margin-top: 32px; padding: 64px 0; }
.faq__wrap { display: grid; gap: 28px; }
.faq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.faq__merk { width: min(130px, 30vw); transform-origin: 50% 90%; }
.motion .faq__merk.is-in { animation: merk-wobble var(--wobble) ease-in-out .8s 3; }
.qa { padding: 0; }
.qa + .qa { margin-top: 14px; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 14px 20px;
  font-weight: 800; font-size: 18px; line-height: 1.3;
  list-style: none; cursor: pointer; border-radius: var(--r-tile);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { color: var(--mk-accent); transition: transform var(--rise) var(--ease); }
.qa[open] summary .i { transform: rotate(180deg); }
.qa p { margin: 0; padding: 0 20px 20px; color: var(--mk-text-soft); }
.faq__more {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; margin-top: 20px; padding: 0 20px;
  border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-sticker);
  font-weight: 800; text-decoration: none;
}
.faq__more .i { width: 20px; height: 20px; }
.faq :focus-visible { outline-color: var(--mk-text); }
@media (min-width: 900px) {
  .faq { padding: 96px 0; }
  .faq__wrap { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
  .faq__head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .faq__merk { width: 220px; }
}

/* ===================== cb09 · Abschluss (Kobalt) ===================== */
.cta { background: var(--mk-accent); color: #fff; margin-top: 32px; padding: 72px 0; }
.faq + .cta { margin-top: 0; box-shadow: inset 0 6px 0 #fff; }
.cta h2 { font-size: clamp(30px, 4.8vw, 54px); }
.cta__wrap { display: grid; gap: 28px; justify-items: center; text-align: center; }
.cta__merk { width: min(260px, 64vw); transform-origin: 50% 90%; }
.motion .cta__merk.is-in { animation: merk-wobble var(--wobble) ease-in-out .8s 3; }
.cta__copy h2 { margin-bottom: 36px; }
/* Anführungszeichen in Anton sitzen schief neben Versalien. Darum aus
   Manrope, etwas kleiner, und auf Höhe der Versalien gerückt. */
.cta .q { font-family: var(--f-ui); font-weight: 800; font-size: .9em; line-height: 0; }
.cta .q:not(.q--close) { vertical-align: .18em; }
.cta .q--close { margin-left: .03em; vertical-align: .04em; }
/* Das Zitat bricht nie in sich um, so steht das tiefe „ nie über einem
   Buchstaben der nächsten Zeile. */
.cta__quote { white-space: nowrap; }
.cta__line { display: block; margin-top: .28em; color: var(--mk-sun); font-size: clamp(34px, 5.2vw, 64px); }
.cta__copy .store-btn { margin: 0 auto; }
.cta .store-note { color: rgba(255, 255, 255, .88); }
.cta :focus-visible { outline-color: #fff; }
@media (min-width: 900px) {
  .cta { padding: 112px 0; }
  .cta__wrap { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 56px; align-items: center; }
  .cta__merk { width: 320px; }
}

/* SAISON-WEIHNACHTEN start · nach dem 26.12. mit dem Block in index.html löschen */
.xmas { background: var(--mk-pink); padding: 64px 0 72px; margin: 32px 0 0; overflow: hidden; }
.xmas__band { display: grid; gap: 48px; align-items: center; }
.xmas__lead { color: var(--mk-text); margin-top: 24px; }
.xmas__small { color: var(--mk-text); margin: 0; }
.xmas__stage { position: relative; width: min(440px, 100%); margin: 0 auto; padding: 48px 0 0; }
.xmas__shot { position: relative; z-index: 2; transform: rotate(-2deg); }
.xmas__sticker {
  position: absolute; z-index: 3; top: 0; right: -2%;
  padding: 10px 18px;
  font-family: var(--f-display); font-size: clamp(26px, 3vw, 34px); line-height: 1; text-transform: uppercase;
  color: var(--mk-text); background: var(--mk-sun);
  border-radius: 14px; box-shadow: 0 0 0 6px #fff, 0 10px 18px rgba(20, 20, 20, .16);
}
.xmas__merk {
  position: absolute; z-index: 3;
  left: -6%; top: -24px;
  width: min(100px, 24vw);
  transform-origin: 50% 90%;
}
.motion .xmas__merk { animation: merk-wobble var(--wobble) ease-in-out 1.2s 3; }
.xmas__hand { margin: 22px 0 0; text-align: center; color: var(--mk-text); }
.xmas :focus-visible { outline-color: var(--mk-text); }

@media (min-width: 900px) {
  .xmas { padding: 104px 0; }
  .xmas__band { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .xmas__merk { left: -18%; top: -64px; width: 140px; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .xmas__band { grid-template-columns: 1fr auto; gap: 48px; }
  .xmas__band { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .xmas { padding: 56px 0 64px; }
  .xmas__band { gap: 36px; }
  .xmas__merk { left: -2%; top: -30px; width: min(90px, 24vw); }
}
/* SAISON-WEIHNACHTEN end */

/* ===================== Handy: kürzer und ruhiger ===================== */
@media (max-width: 899px) {
  /* Gedrehte Screens brauchen seitlich Luft, sonst stoßen sie an den Rand */
  .xmas__stage { width: min(460px, calc(100% - 28px)); margin-inline: auto; }
  .gather__card { max-width: min(380px, calc(100% - 28px)); margin-inline: auto; }
}
@media (max-width: 719px) {
  .hero { padding-bottom: 0; }
  .plans { gap: 16px; margin-top: 28px; }
  .plan .in { padding: 20px; }
  .plan__big { font-size: 46px; margin: 6px 0 8px; }
  .faq { padding: 48px 0 56px; }
  .hero__lead-more { display: none; }
  .hero__stage { margin: 0 auto; }
  .hero__phone { --pw: 62vw; }
  .hero__buddy { width: 21vw; right: -16%; bottom: 26px; }
  .hero__hand { font-size: 16px; margin: 0 0 10px; padding: 8px 12px; }
  .hero__tiles .tile:nth-child(1) { left: 12%; }
  .hero__tiles .tile:nth-child(5) { left: 88%; }
}

/* ===================== Tablet: Telefon neben dem Text ===================== */
@media (min-width: 720px) and (max-width: 899px) {
  .hero__phone { --pw: 330px; }
  .hero__buddy { width: 124px; right: -28%; bottom: 30px; }
}