/* Preppy website 3.0, draft.
   Layout: the app's own ground. A blue sky wash at the top, grouped grey below,
   white inset cards, a floating glass capsule as navigation (like the app's tab bar),
   phones flat and upright or fanned, rings spreading from the hero. */

:root {
  /* Color */
  --ground: #F2F2F7;          /* iOS grouped background */
  --card: #FFFFFF;
  --card-2: #F7F7FA;
  --ink: #0B0B0F;
  --ink-2: #3C3C43;           /* secondary label, as in the App Store sublines */
  --ink-3: #66666C;
  --line: rgba(60, 60, 67, .14);
  --blue: #0A84FF;            /* brand blue, fills and icons */
  --blue-ink: #0058D0;        /* blue for text, readable on the wash */
  --blue-soft: rgba(10, 132, 255, .10);
  --teal: #0A9A93;            /* the five Baustein colors, deepened for white icons */
  --purple: #AF52DE;
  --green: #1E9E4A;
  --orange: #E65F00;
  --red: #D70015;
  --sky-1: #5AA8FA;
  --sky-2: #8CC2FB;
  --sky-3: #CBE2FA;
  --ring-fill: rgba(10, 132, 255, .035);
  --ring-edge: rgba(255, 255, 255, .9);
  --glass: rgba(255, 255, 255, .72);
  --glass-edge: rgba(255, 255, 255, .95);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 34px -14px rgba(16, 40, 80, .20);
  --shadow-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 26px 50px -18px rgba(10, 50, 110, .32);
  --phone-shadow: drop-shadow(0 28px 34px rgba(10, 50, 110, .22));
  --badge-bg: #000000;
  --badge-ink: #FFFFFF;
  --focus: #0A84FF;

  /* Type: SF Pro, like the app; system faces elsewhere */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --t-hero: clamp(2.4rem, 1.5rem + 3vw, 3.4rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --t-h3: 1.375rem;
  --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .875rem;

  /* Space */
  --wrap: 1180px;
  --radius: 28px;
  --radius-s: 18px;
  --section: clamp(72px, 6vw + 40px, 128px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #000000; --card: #1C1C1E; --card-2: #2C2C2E;
    --ink: #FFFFFF; --ink-2: #D1D1D6; --ink-3: #A1A1A8;
    --line: rgba(235, 235, 245, .14);
    --blue-ink: #6CB4FF; --blue-soft: rgba(10, 132, 255, .18);
    --red: #FF6961;
    --sky-1: #0C4C98; --sky-2: #0A2D5A; --sky-3: #061830;
    --ring-fill: rgba(10, 132, 255, .06); --ring-edge: rgba(255, 255, 255, .10);
    --glass: rgba(30, 30, 32, .70); --glass-edge: rgba(255, 255, 255, .10);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(0, 0, 0, .7);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 50px -18px rgba(0, 0, 0, .8);
    --phone-shadow: drop-shadow(0 28px 34px rgba(0, 0, 0, .55));
    --badge-bg: #FFFFFF; --badge-ink: #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #000000; --card: #1C1C1E; --card-2: #2C2C2E;
  --ink: #FFFFFF; --ink-2: #D1D1D6; --ink-3: #A1A1A8;
  --line: rgba(235, 235, 245, .14);
  --blue-ink: #6CB4FF; --blue-soft: rgba(10, 132, 255, .18);
  --red: #FF6961;
  --sky-1: #0C4C98; --sky-2: #0A2D5A; --sky-3: #061830;
  --ring-fill: rgba(10, 132, 255, .06); --ring-edge: rgba(255, 255, 255, .10);
  --glass: rgba(30, 30, 32, .70); --glass-edge: rgba(255, 255, 255, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 50px -18px rgba(0, 0, 0, .8);
  --phone-shadow: drop-shadow(0 28px 34px rgba(0, 0, 0, .55));
  --badge-bg: #FFFFFF; --badge-ink: #000000;
  color-scheme: dark;
}

/* MARK: - Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--sky-1);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: normal; color: var(--blue-ink); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * 32px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon use { stroke-width: 1.8; }

/* Light and dark artwork pairs */
.on-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none !important; }
  :root:not([data-theme="light"]) .on-dark { display: block !important; }
}
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }

/* MARK: - Sky */

.sky {
  position: absolute; inset: 0 0 auto; height: 980px; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) 22%, var(--sky-3) 52%, var(--ground) 100%);
  pointer-events: none;
}
.page { position: relative; isolation: isolate; overflow-x: clip; }

/* MARK: - Navigation
   At the top a full-width bar: brand left, links in the middle, the App Store button right.
   Once the page scrolls (site.js sets html.scrolled), it narrows into a floating glass capsule,
   like the app's tab bar. */

.nav-shell {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  padding-top: 14px;
}
.nav {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
  width: 100%; margin-inline: auto;
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.3, .7, .2, 1), padding .5s cubic-bezier(.3, .7, .2, 1),
    background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.scrolled .nav {
  width: min(100%, 620px);
  padding: 6px;
  background: var(--glass);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
}
.nav a { color: var(--ink); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px; font: 700 1.125rem/1 var(--font-display); letter-spacing: -.01em;
}
.brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 2px 8px -2px rgba(10, 80, 180, .35); }
.nav-link {
  padding: 10px 14px; border-radius: 999px; font-weight: 500; font-size: .9375rem; white-space: nowrap;
  transition: background-color .2s ease;
}
.nav-link:hover { background: var(--blue-soft); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--blue-soft); color: var(--blue-ink); }
.nav-cta {
  justify-self: end;
  padding: 10px 16px; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-ink) !important; font-weight: 600; font-size: .9375rem;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-cta:hover { text-decoration: none; opacity: .88; }
.nav-cta svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .nav { gap: 6px; grid-template-columns: auto minmax(0, 1fr); }
  .scrolled .nav { width: 100%; }
  .nav-cta { display: none; }
  .nav .brand { padding-right: 4px; }
  .nav .brand span { display: none; }
  .nav-links { justify-content: flex-end; gap: 2px; }
  .nav-link { padding: 9px 11px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* MARK: - Type pieces */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .8125rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-ink);
}
.h-hero { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); color: var(--ink-3); }

.head { display: grid; gap: 16px; max-width: 760px; }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* MARK: - Buttons */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 22px 0 18px; border-radius: 14px;
  background: var(--badge-bg); color: var(--badge-ink) !important;
  text-decoration: none !important;
  transition: transform .2s ease, opacity .2s ease;
}
.badge:hover { transform: translateY(-1px); opacity: .9; }
.badge svg { width: 26px; height: 26px; margin-top: -3px; }
.badge span { display: grid; line-height: 1.05; }
.badge small { font-size: .75rem; font-weight: 500; letter-spacing: .01em; }
.badge strong { font: 600 1.375rem/1.05 var(--font-display); letter-spacing: -.02em; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue-ink);
  padding: 8px 0;
}
.text-link svg { width: 18px; height: 18px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* MARK: - Awards: three App of the Day badges, each between laurels */

.awards { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.award { display: inline-flex; align-items: center; color: var(--ink); }
.award { align-items: stretch; }
.award .laurel {
  width: 16px; align-self: stretch; background: currentColor; opacity: .55; flex: none;
  -webkit-mask: url("elements/lorbeer-links-schwarz.svg") center / auto 100% no-repeat;
  mask: url("elements/lorbeer-links-schwarz.svg") center / auto 100% no-repeat;
}
.award .laurel.r {
  -webkit-mask-image: url("elements/lorbeer-rechts-schwarz.svg");
  mask-image: url("elements/lorbeer-rechts-schwarz.svg");
}
.award span { display: grid; justify-items: center; gap: 1px; padding-inline: 5px; }
.award small { display: inline-flex; align-items: center; gap: 3px; font: 600 .6875rem/1.15 var(--font); color: var(--ink-2); white-space: nowrap; }
.award small svg { width: 10px; height: 10px; margin-top: -2px; }
.award strong { font: 700 .9375rem/1.1 var(--font-display); letter-spacing: -.01em; }
.awards-note { font-size: .8125rem; color: var(--ink-3); }

/* MARK: - Hero */

.hero { padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 96px); }
.hero-grid {
  display: grid; gap: clamp(40px, 5vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; min-width: 0; }
.hero-copy .lead { margin-inline: auto; }
.hero-copy .actions { justify-content: center; }
.hero-copy .awards { justify-content: center; }
.hero-meta { display: grid; gap: 14px; justify-items: inherit; }
.hero-copy .pill { margin-bottom: -4px; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .hero-copy { justify-items: start; text-align: left; }
  .hero-copy .lead { margin-inline: 0; }
  .hero-copy .actions, .hero-copy .awards { justify-content: flex-start; }
}

/* A small pill above the headline */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  font: 600 .875rem/1.2 var(--font); color: var(--ink) !important; text-decoration: none !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pill b { padding: 4px 9px; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: .75rem; letter-spacing: .02em; }
.pill svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform .2s ease; }
.pill:hover svg { transform: translateX(3px); }

/* Phones */
.phone { width: 100%; height: auto; filter: var(--phone-shadow); }

/* The fan: three flat phones, the middle one upright, on rings. Pieces drift with the pointer
   (site.js sets --mx and --my between -1 and 1), each at its own depth --d. */
.stage {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 560 / 600;
}
.rings {
  position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none;
}
.rings circle { fill: var(--ring-fill); stroke: var(--ring-edge); stroke-width: 1.5; }
.stage .phone { position: absolute; }
.stage .p-center { width: 48%; left: 26%; top: 0; z-index: 3; }
.stage .p-left { width: 40%; left: 1%; top: 12%; z-index: 1; transform: rotate(-9deg); transform-origin: 80% 90%; }
.stage .p-right { width: 40%; right: 1%; top: 12%; z-index: 2; transform: rotate(9deg); transform-origin: 20% 90%; }
[data-parallax] > * {
  translate: calc(var(--mx, 0) * var(--d, 0) * 1px) calc(var(--my, 0) * var(--d, 0) * 1px);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
[data-parallax] > .rings { --d: -8; }
[data-parallax] > .paper { --d: 8; }
[data-parallax] > .chip-a { --d: 26; }
[data-parallax] > .chip-b { --d: 32; }
.stage .p-left { --d: 10; }
.stage .p-center { --d: 6; }
.stage .p-right { --d: 14; }

@media (prefers-reduced-motion: no-preference) {
  .stage .p-left { animation: fan-left 1.1s cubic-bezier(.2, .8, .2, 1) both .15s; }
  .stage .p-right { animation: fan-right 1.1s cubic-bezier(.2, .8, .2, 1) both .15s; }
  .stage .p-center { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .chip { animation: settle .8s cubic-bezier(.2, .8, .2, 1) both .7s, drift 6s ease-in-out 1.5s infinite; }
  .chip:nth-of-type(even) { animation-delay: .8s, 2.6s; }
}
@keyframes fan-left { from { transform: translateX(32%) rotate(0deg); } to { transform: rotate(-9deg); } }
@keyframes fan-right { from { transform: translateX(-32%) rotate(0deg); } to { transform: rotate(9deg); } }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes settle { from { transform: translateY(10px) scale(.96); } to { transform: none; } }
@keyframes drift { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }

/* Floating chips: pieces of the app's own UI */
.chip {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow-lift);
  max-width: 62%; text-align: left;
}
.chip b { display: block; font: 600 .9375rem/1.2 var(--font-display); white-space: nowrap; }
.chip small { display: block; font-size: .8125rem; color: var(--ink-3); white-space: nowrap; }
.chip img { width: 46px; height: 46px; margin: -3px; }
.chip-a { left: -2%; top: 62%; }
.chip-b { right: -3%; top: 44%; }
@media (max-width: 520px) {
  .chip { padding: 8px 12px 8px 8px; gap: 9px; border-radius: 16px; }
  .chip b { font-size: .8125rem; }
  .chip small { font-size: .6875rem; }
  .chip .tile { width: 30px; height: 30px; border-radius: 9px; }
  .chip img { width: 30px; height: 30px; }
  .chip-a { left: 0; }
  .chip-b { right: 0; }
}

/* Icon tiles: white Linear icon on a Baustein color, like the app's tiles */
.tile {
  --c: var(--blue);
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--c); color: #FFFFFF;
}
.tile svg { width: 58%; height: 58%; }
.tile svg use { stroke-width: 1.9; }
.c-blue { --c: var(--blue); }
.c-teal { --c: var(--teal); }
.c-purple { --c: var(--purple); }
.c-green { --c: var(--green); }
.c-orange { --c: var(--orange); }
.c-red { --c: #E5202E; }
.c-ink { --c: #2C2C2E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-ink { --c: #48484A; } }
:root[data-theme="dark"] .c-ink { --c: #48484A; }

/* MARK: - Buddy, the companion: blinks, glances, bobs and waves (like the app) */

.companion { display: block; width: 100%; height: auto; overflow: visible; }
.companion :is(.c-bob, .c-shadow, .c-blink, .c-glance, .c-twinkle, .c-float) { transform-box: fill-box; transform-origin: center; }
.companion .c-shadow { transform-origin: center; }
.companion .c-wave, .companion .arm-l { transform-box: view-box; transform-origin: 78px 134px; }
@media (prefers-reduced-motion: no-preference) {
  .companion .c-bob { animation: c-bob 3.6s ease-in-out infinite; }
  .companion .c-shadow { animation: c-shadow 3.6s ease-in-out infinite; }
  .companion .c-blink { animation: c-blink 4.8s ease-in-out infinite; }
  .companion .c-glance { animation: c-glance 8s ease-in-out infinite; }
  .companion .c-twinkle { animation: c-twinkle 2.8s ease-in-out infinite; }
  .companion .c-twinkle.d1 { animation-delay: .9s; }
  .companion .c-twinkle.d2 { animation-delay: 1.6s; }
  .companion .c-float { animation: c-float 4s ease-in-out infinite; }
  .buddy.poke .companion { animation: c-hop .8s cubic-bezier(.3, .7, .3, 1); }
}
.buddy { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@keyframes c-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes c-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .75; } }
@keyframes c-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes c-glance { 0%, 30%, 62%, 100% { transform: translateX(0); } 36%, 56% { transform: translateX(2.4px); } 70%, 86% { transform: translateX(-2.4px); } }
@keyframes c-wave { 0%, 58%, 100% { transform: rotate(0); } 64% { transform: rotate(-24deg); } 70% { transform: rotate(6deg); } 76% { transform: rotate(-20deg); } 84% { transform: rotate(0); } }
@keyframes c-hello { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-26deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-22deg); } }
@keyframes c-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
@keyframes c-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes c-hop { 0%, 100% { transform: none; } 15% { transform: scale(1.04, .94); } 45% { transform: translateY(-14px) scale(.97, 1.04); } 75% { transform: scale(1.03, .96); } }

/* MARK: - Sections */

.section { padding-block: var(--section); }
.section.tight { padding-block: calc(var(--section) * .6); }
.section + .section { padding-top: 0; }
.band { background: var(--card); }
.band .card { background: var(--ground); box-shadow: none; }
.band + .section, .section + .band { padding-top: var(--section); }
.stack { display: grid; gap: clamp(36px, 4vw, 56px); }

/* MARK: - Bento (landing)
   Mixed tile sizes: the intake tile large, phones in tall tiles, small tiles with pieces of the app's UI.
   Every tile: a one-line title and at most two lines of text. Phones are never cropped. */

.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento > * { grid-column: span 2; }
  .bento > .f-intake { grid-column: span 4; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; grid-auto-flow: dense; }
  .bento > .f-intake { grid-row: span 2; }
  .bento > .f-activity, .bento > .f-vaccine { grid-row: span 2; }
}

.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feature {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px;
  min-width: 0;
}
.feature .text { display: grid; gap: 8px; align-content: start; }
.feature .text > .tile { margin-bottom: 6px; }
.feature .h3 { display: flex; align-items: center; gap: 12px; }
.feature .h3 .tile { width: 34px; height: 34px; border-radius: 10px; }
.feature p { color: var(--ink-2); max-width: 34ch; }
/* The phone rises from the bottom edge, cut off there, so it can be bigger */
.feature:has(.shot) { padding-bottom: 0; }
.feature .shot {
  position: relative; flex: 1 1 auto; min-height: 300px; margin: auto -28px 0;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 8px;
}
.feature .shot::before {
  content: ""; position: absolute; left: 50%; top: 4%; width: 130%; aspect-ratio: 1.3;
  transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent);
  pointer-events: none;
}
.feature .shot img {
  position: absolute; top: 8px; left: 50%; translate: -50% 0; width: min(66%, 250px); height: auto;
  transition: translate .5s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) { .feature .shot img:hover { translate: -50% -10px; } }

/* The intake tile: text and week beside the phone */
@media (min-width: 680px) {
  .f-intake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: stretch; gap: 24px; padding: 36px 0 0 36px; }
  .f-intake .text { gap: 12px; padding-bottom: 36px; }
  .f-intake .shot { margin: 0; min-height: 420px; }
  .f-intake .shot img { width: min(82%, 290px); top: 0; }
}
.week { display: flex; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.week li {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font: 600 .8125rem/1 var(--font-round); color: var(--ink-3); background: var(--card-2);
}
.week .on { background: var(--blue); color: #FFFFFF; }
.week .today { background: transparent; color: var(--blue-ink); box-shadow: inset 0 0 0 2px var(--blue); }

/* Mood: pick a level; the tile takes on its color */
@property --mood { syntax: "<color>"; inherits: true; initial-value: #43A047; }
.f-mood { --mood: #43A047; transition: --mood .6s ease; }
.f-mood::before, .n-mood::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 80% at 50% 100%, color-mix(in srgb, var(--mood) 32%, transparent), transparent 72%);
}
.moods {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 4px;
  margin: auto 0 0; padding: 10px 8px; min-width: 0; border: 0; border-radius: 20px; background: var(--card-2);
}
.moods label { display: grid; place-items: center; cursor: pointer; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.moods input { position: absolute; opacity: 0; pointer-events: none; }
.moods img { width: 100%; max-width: 72px; height: auto; opacity: .8; scale: .82; transition: scale .4s cubic-bezier(.3, .7, .3, 1.5), opacity .3s ease; }
.moods label:hover img { opacity: 1; scale: .94; }
.moods label:has(input:checked) img { opacity: 1; scale: 1.12; }
.moods label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.mood-label { margin-top: -10px; text-align: center; font: 700 1rem/1.2 var(--font-display); color: color-mix(in srgb, var(--mood) 80%, var(--ink)) !important; }
@media (prefers-reduced-motion: no-preference) {
  .moods label:has(input:checked) img { animation: c-hop .7s cubic-bezier(.3, .7, .3, 1); }
}

/* Symptom: a real strength slider, like the app's editor */
.severity { margin-top: auto; padding: 14px 16px 12px; border-radius: 18px; background: var(--card-2); display: grid; gap: 10px; }
.severity > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.severity span { color: var(--ink-3); }
.severity output { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.scale {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.scale::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #34C759, #FFCC00 45%, #FF9500 70%, #FF3B30); }
.scale::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #34C759, #FFCC00 45%, #FF9500 70%, #FF3B30); }
.scale::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; border: 0;
  background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .04);
  transition: scale .2s ease;
}
.scale::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.scale:active::-webkit-slider-thumb { scale: 1.15; }
.scale:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 99px; }

/* Intake: the week fills in, and "Einnehmen" marks today */
.take {
  justify-self: start; align-self: flex-start; margin-top: 12px; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blue); color: #FFFFFF; font: 600 .9375rem/1.2 var(--font); transition: background-color .3s ease, scale .2s ease;
}
.take:active { scale: .96; }
.take[aria-pressed="true"] { background: var(--card-2); color: var(--blue-ink); }
.week .today.on { background: var(--blue); color: #FFFFFF; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .f-intake:not(.in) .week .on { background: var(--card-2); color: var(--ink-3); }
  .js .f-intake.in .week .on { animation: fill-day .5s cubic-bezier(.3, .7, .3, 1.4) both; }
  .f-intake.in .week li:nth-child(2) { animation-delay: .08s; }
  .f-intake.in .week li:nth-child(3) { animation-delay: .16s; }
  .f-intake.in .week li:nth-child(4) { animation-delay: .24s; }
  .f-intake.in .week li:nth-child(5) { animation-delay: .32s; }
  .f-intake.in .week li:nth-child(6) { animation-delay: .4s; }
  .f-intake .week .today.on { animation: fill-day .5s cubic-bezier(.3, .7, .3, 1.4) both 0s; }
}
@keyframes fill-day { from { scale: .6; background: var(--card-2); color: var(--ink-3); } to { scale: 1; } }

/* Month: switch months, the numbers count */
.month { margin-top: auto; display: grid; gap: 12px; }
.seg { justify-self: start; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card-2); }
.seg button {
  padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
  font: 600 .8125rem/1.2 var(--font); transition: background-color .25s ease, color .25s ease;
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.streak { display: flex; gap: 3px; height: 26px; align-items: flex-end; }
.streak i { flex: 1; height: 100%; border-radius: 3px; background: var(--blue); transition: height .4s cubic-bezier(.3, .7, .3, 1.2), background-color .3s ease; }
.streak i.miss { height: 30%; background: var(--line); }
/* Check-ups: results and a file */
.results { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.results li {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px;
  background: var(--card-2); font-weight: 600; font-size: .875rem;
}
.results svg { width: 18px; height: 18px; color: var(--green); }
.results .file { background: var(--blue-soft); color: var(--blue-ink); }
.results .file svg { color: var(--blue-ink); }

/* Month: two numbers */
.stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat div { display: grid; gap: 2px; padding: 10px 14px; border-radius: 18px; background: var(--card-2); }
.stat strong { font: 700 2rem/1 var(--font-round); color: var(--blue-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8125rem; color: var(--ink-3); }

/* Check-ups: the results pop in once the tile is on screen */
@media (prefers-reduced-motion: no-preference) {
  .js .f-checkup:not(.in) .results li { opacity: 0; translate: 0 8px; }
  .f-checkup.in .results li { transition: opacity .4s ease, translate .4s cubic-bezier(.3, .7, .3, 1.4); }
  .f-checkup.in .results li:nth-child(2) { transition-delay: .1s; }
  .f-checkup.in .results li:nth-child(3) { transition-delay: .2s; }
  .f-checkup.in .results li:nth-child(4) { transition-delay: .35s; }
}

/* Hover belongs to the pieces inside a tile, never to the whole tile */
@media (hover: hover) {
  .week li { transition: scale .3s cubic-bezier(.3, .7, .3, 1.5); }
  .week li:hover { scale: 1.15; }
  .results li { transition: translate .25s ease; }
  .results li:hover { translate: 0 -3px; }
  .stat div { transition: scale .3s cubic-bezier(.3, .7, .3, 1.5); }
  .stat div:hover { scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) {
  .feature .shot img, .scale i, .moods img, .watch, .week li, .results li, .stat div { transition: none; }
}

/* MARK: - Privacy teaser */

.privacy {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .privacy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; } }
.points { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.points li { display: flex; gap: 16px; align-items: flex-start; }
.points b { display: block; font: 600 1.0625rem/1.3 var(--font-display); margin-bottom: 2px; }
.points p { color: var(--ink-2); }
.disc {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center;
}
.disc .rings { width: 100%; }
.disc img { width: 92%; position: relative; }

/* Tap the middle and the rings send out a wave (site.js adds .wave) */
.disc[data-replay] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.disc .rings circle { transform-box: fill-box; transform-origin: center; }
.disc .rings .pulse { fill: none; stroke: var(--blue); stroke-width: 3; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .disc img { animation: c-float 5s ease-in-out infinite; }
  .disc.wave .rings circle:nth-child(3) { animation: ring .8s cubic-bezier(.3, .7, .3, 1); }
  .disc.wave .rings circle:nth-child(2) { animation: ring .8s cubic-bezier(.3, .7, .3, 1) .09s; }
  .disc.wave .rings circle:nth-child(1) { animation: ring .8s cubic-bezier(.3, .7, .3, 1) .18s; }
  .disc.wave .rings .pulse { animation: pulse 1.1s cubic-bezier(.2, .7, .3, 1); }
  .disc.wave img { animation: c-hop .8s cubic-bezier(.3, .7, .3, 1); }
}
@keyframes ring { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.05); } }
@keyframes pulse { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.band .rings circle { stroke: var(--line); fill: var(--ring-fill); }

/* MARK: - Showcase: copy beside a scene (Apple Watch, the report) */

.showcase {
  display: grid; gap: clamp(40px, 5vw, 72px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .showcase { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .showcase.flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .showcase.flip > .stack { order: 2; }
}
.showcase .stack { gap: 28px; }
.watch-scene, .report-scene {
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center; isolation: isolate;
}
.watch-scene .rings, .report-scene .rings { width: 112%; }
.band [data-parallax] .rings circle { stroke: var(--line); }
.watch-scene .chip-a, .report-scene .chip-a { left: -4%; top: 66%; }
.watch-scene .chip-b, .report-scene .chip-b { right: -4%; top: 16%; }
@media (max-width: 520px) {
  .watch-scene .chip-a, .report-scene .chip-a { left: 0; }
  .watch-scene .chip-b, .report-scene .chip-b { right: 0; }
}

/* The watch: real screenshots from the app in a slim bezel, three fanned like the hero's phones */
.watch {
  position: absolute; width: 50%; padding: 2.4%;
  border-radius: 31% / 26%;
  background: linear-gradient(150deg, #3A3A3F, #0C0C0E 55%);
  box-shadow: var(--shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.watch::after {
  content: ""; position: absolute; right: -3.4%; top: 24%; width: 4.4%; height: 15%; border-radius: 4px;
  background: linear-gradient(90deg, #232326, #6A6A70);
}
.watch img { display: block; width: 100%; height: auto; border-radius: 27% / 22%; }
.watch.w-center { left: 25%; top: 8%; z-index: 3; }
.watch.w-left { width: 40%; left: -2%; top: 24%; z-index: 1; rotate: -9deg; }
.watch.w-right { width: 40%; right: -2%; top: 24%; z-index: 2; rotate: 9deg; }
[data-parallax] > .w-center { --d: 8; }
[data-parallax] > .w-left { --d: 14; }
[data-parallax] > .w-right { --d: 18; }
@media (hover: hover) {
  .watch { transition: translate .7s cubic-bezier(.2, .8, .2, 1), scale .4s cubic-bezier(.3, .7, .3, 1.3); }
  .watch:hover { scale: 1.05; z-index: 4; }
}

/* The report: a PDF page, white in both themes */
.paper {
  position: relative; width: 62%; aspect-ratio: .72; container-type: inline-size;
  border-radius: 12px; background: #FFFFFF; color: #1C1C1E;
  box-shadow: var(--shadow-lift); rotate: -3deg;
}
/* Container units resolve against .paper only inside it, so its children carry the spacing. */
.paper > * { margin: 0 8cqw; }
.paper > :first-child { margin-top: 8cqw; }
.paper > * + * { margin-top: 6cqw; }
.p-head { display: flex; align-items: center; gap: 4cqw; padding-bottom: 5cqw; border-bottom: 1px solid #E5E5EA; }
.p-head img { width: 12cqw; height: 12cqw; border-radius: 26%; }
.p-head span { display: grid; gap: 1cqw; }
.p-head b { font: 700 6.4cqw/1.1 var(--font-display); letter-spacing: -.01em; }
.p-head small { font-size: 4.6cqw; color: #6E6E73; }
.p-sec { display: grid; gap: 2.6cqw; }
.p-label { font: 700 3.9cqw/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: #0A6FE0; }
.p-row { display: flex; justify-content: space-between; gap: 4cqw; font-size: 5cqw; line-height: 1.2; }
.p-row b { font-weight: 600; }
.p-row span { color: #6E6E73; }
.p-row .ok { color: #1E9E4A; font-weight: 600; }
.p-bar { height: 2.8cqw; border-radius: 99px; background: #E5E5EA; overflow: hidden; }
.p-bar i { display: block; width: 97%; height: 100%; border-radius: inherit; background: #0A84FF; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .paper:hover .p-bar i { animation: fill 1.2s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes fill { from { transform: scaleX(0); } to { transform: none; } }

/* MARK: - Wissen teaser and topics */

.learn { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .learn { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } }
.learn .head { gap: 16px; }
.learn .actions { margin-top: 8px; }
.learn-buddy { width: clamp(170px, 20vw, 240px); justify-self: center; }
.topics { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.topics li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center;
  padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow);
}
.band .topics li { background: var(--ground); box-shadow: none; }
.topic-symbol {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--blue);
  display: grid; place-items: center; transition: transform .4s cubic-bezier(.3, .7, .3, 1.4);
}
.topic-symbol img { width: 26px; height: 26px; }
.topics b { font: 600 1.0625rem/1.25 var(--font-display); }
.topics small { font-size: .875rem; color: var(--ink-3); }
@media (hover: hover) {
  .topic-symbol:hover { transform: rotate(-10deg) scale(1.1); }
}

/* MARK: - Quotes */

.quotes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.quote { padding: 28px; display: grid; gap: 18px; align-content: space-between; margin: 0; }
.quote blockquote { margin: 0; font: 500 1.1875rem/1.45 var(--font-display); letter-spacing: -.01em; }
.quote figcaption { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--t-small); }
.stars { display: inline-flex; gap: 2px; color: #FF9F0A; }
.stars svg { width: 14px; height: 14px; }

/* MARK: - FAQ */

.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; width: 100%; }
.faq details { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font: 600 1.0625rem/1.35 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink);
  display: grid; place-items: center; transition: transform .25s ease;
}
.faq summary .plus svg { width: 16px; height: 16px; transform: rotate(90deg); }
.faq details[open] summary .plus { transform: rotate(180deg); }
.faq .answer { padding: 0 68px 22px 22px; color: var(--ink-2); display: grid; gap: 10px; }
@media (max-width: 560px) { .faq .answer { padding-right: 22px; } }

/* MARK: - Closing call */

.closing {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; text-align: center; gap: 20px;
  padding: clamp(48px, 6vw, 80px) 24px;
  border-radius: 36px;
  background: linear-gradient(180deg, var(--sky-2), var(--sky-3) 70%, var(--ground));
}
.closing .rings { width: 900px; max-width: none; top: 0; z-index: -1; }
.closing .buddy { width: 124px; }
.closing .lead { margin-inline: auto; }

/* MARK: - Footer */

.footer { padding-block: 64px 40px; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; gap: 32px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
@media (min-width: 860px) { .footer-brand { grid-column: auto; } }
.footer-brand .brand { padding: 0; color: var(--ink); }
.footer h2 { font: 600 .8125rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer ul a { color: var(--ink); }
.footer .mail { user-select: all; color: var(--ink); }
.footer-base {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; gap: 12px; font-size: .8125rem; color: var(--ink-3);
}
.footer-base .row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.footer-base .ribbon { display: inline-flex; align-items: center; gap: 6px; }
.footer-base .ribbon svg { width: 16px; height: 16px; color: #E5202E; }
.footer-base a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }

/* MARK: - Subpage hero */

.subhero { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.subhero .head { gap: 20px; }

.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jump a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--card); color: var(--ink); font-weight: 600; font-size: .9375rem;
  box-shadow: var(--shadow); text-decoration: none;
}
.jump a:hover { color: var(--blue-ink); }
.jump .tile { width: 28px; height: 28px; border-radius: 9px; }

/* MARK: - Feature areas (Funktionen) */

/* A jump lands with the section's content just below the navigation, not its top padding */
.area { scroll-margin-top: calc(88px - var(--section)); }
.area-grid {
  display: grid; gap: clamp(32px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .area-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
  .area.flip .area-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
  .area.flip .area-grid > .area-copy { order: 2; }
}
.area-copy { display: grid; gap: 28px; min-width: 0; }
.area-copy .head { gap: 14px; }
.area-copy .eyebrow .tile { width: 28px; height: 28px; border-radius: 9px; }
.list { display: grid; gap: 22px 28px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; align-content: start; }
.list .tile { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; }
.list b { font: 600 1.0625rem/1.3 var(--font-display); padding-top: 6px; }
.list p { color: var(--ink-2); font-size: .9688rem; }

/* Phones in a row, the middle one raised */
.trio {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 22px); align-items: start; padding: 24px 0 8px;
  isolation: isolate;
}
.trio .phone:nth-child(2) { margin-top: -6%; }
.trio .phone:nth-child(1), .trio .phone:nth-child(3) { margin-top: 10%; }
.trio::before {
  content: ""; position: absolute; inset: 0 -10% -10%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 45%, color-mix(in srgb, var(--c, var(--blue)) 20%, transparent), transparent 70%);
}
.duo {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 28px); max-width: 520px; margin-inline: auto; padding-top: 16px; isolation: isolate;
}
.duo .phone:nth-child(2) { margin-top: 14%; }
.duo::before {
  content: ""; position: absolute; inset: -6% -14%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 45%, color-mix(in srgb, var(--c, var(--blue)) 20%, transparent), transparent 70%);
}

.note {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-s); background: var(--blue-soft);
  color: var(--ink-2); font-size: .9688rem;
}
.note .tile { width: 32px; height: 32px; border-radius: 10px; }
.note b { color: var(--ink); }

/* Small feature grid for "Überall" */
.mini { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.mini .card { padding: 24px; display: grid; gap: 12px; align-content: start; }
.mini p { color: var(--ink-2); font-size: .9688rem; }

/* MARK: - Datenschutz */

.collage {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1;
}
.collage .rings { width: 118%; }
.collage .core {
  position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--card); box-shadow: var(--shadow-lift);
  display: grid; place-items: center; color: var(--blue);
}
.collage .core svg { width: 46%; height: 46%; }
.collage .core svg use { stroke-width: 1.4; }
.collage .chip { max-width: none; }
.collage .c1 { left: 2%; top: 12%; }
.collage .c2 { right: 0; top: 26%; }
.collage .c3 { left: 0; bottom: 22%; }
.collage .c4 { right: 4%; bottom: 8%; }
@media (max-width: 520px) {
  .collage .c1 { left: 0; top: 6%; }
  .collage .c2 { right: 0; top: 24%; }
  .collage .c3 { left: 0; bottom: 24%; }
  .collage .c4 { right: 0; bottom: 4%; }
}

/* Where your data lives: two states */
.flow { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; } }
.flow .card { padding: 28px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.flow .tag {
  justify-self: start; padding: 5px 12px; border-radius: 999px; font: 600 .8125rem/1.2 var(--font);
  background: var(--blue-soft); color: var(--blue-ink);
}
.flow .tag.plain { background: var(--card-2); color: var(--ink-2); }
.flow p { color: var(--ink-2); }
.diagram { width: 100%; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 300px; height: auto; }
.diagram .node { fill: var(--card-2); stroke: var(--line); }
.diagram .node-blue { fill: var(--blue-soft); stroke: none; }
.diagram .wire { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.diagram .label { fill: var(--ink); font: 600 14px var(--font); }
.diagram .sub { fill: var(--ink-3); font: 400 12px var(--font); }
.diagram .glyph { color: var(--ink); }
.diagram .glyph-blue { color: var(--blue-ink); }
@media (prefers-reduced-motion: no-preference) {
  .diagram .wire { animation: flow 1.6s linear infinite; }
}
@keyframes flow { to { stroke-dashoffset: -22; } }

.grid3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.grid3 .card { padding: 26px; display: grid; gap: 12px; align-content: start; }
.grid3 p { color: var(--ink-2); font-size: .9688rem; }

/* An inset grouped list, like the app's Settings */
.settings { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .settings { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.group { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.group-title { padding: 0 20px 8px; font-size: .8125rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.set-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 16px 20px; align-content: start; }
.set-row + .set-row { position: relative; }
.set-row + .set-row::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; border-top: 1px solid var(--line); }
.set-row .tile { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; }
.set-row b { font-weight: 600; font-size: 1.0313rem; padding-top: 6px; }
.set-row.danger b { color: var(--red); }
.set-row p { color: var(--ink-2); font-size: .9375rem; }
.groups { display: grid; gap: 28px; }

/* Where the data goes: nodes and dashed wires; stacks vertically on phones */
.net { display: flex; align-items: center; }
.node {
  flex: 0 1 30%; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 18px 12px; border-radius: var(--radius-s); background: var(--card-2);
}
.node .tile { margin-bottom: 6px; }
.node b { font: 600 .9688rem/1.25 var(--font-display); }
.node small { font-size: .8125rem; color: var(--ink-3); }
.node.ghost { background: transparent; border: 1.5px dashed var(--line); color: var(--ink-3); }
.node.ghost .tile { background: var(--card-2); color: var(--ink-3); }
.wire {
  flex: 1 1 0; min-width: 18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px);
}
.wire.off { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
@media (prefers-reduced-motion: no-preference) {
  .wire:not(.off) { background-size: 24px 2px; animation: wire 1.2s linear infinite; }
}
@keyframes wire { to { background-position: 24px 0; } }
@media (max-width: 560px) {
  .net { flex-direction: column; align-items: stretch; }
  .node { flex: none; }
  .wire { flex: none; width: 2px; height: 26px; min-width: 0; align-self: center;
    background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); }
  .wire.off { background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); }
  .wire:not(.off) { background-size: 2px 24px; animation-name: wire-v; }
}
@keyframes wire-v { to { background-position: 0 24px; } }

.steps { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); counter-reset: step; margin: 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.steps li { padding: 26px; display: grid; gap: 10px; align-content: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #FFFFFF; font: 700 1rem/1 var(--font-round);
}
.steps p { color: var(--ink-2); font-size: .9688rem; }

/* Utilities */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 600px) {
  .disc { max-width: 260px; }
  .trio { padding-top: 8px; }
}

/* MARK: - Skip link */

.skip {
  position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); text-decoration: none; }

/* MARK: - 404 */

.notfound { display: grid; justify-items: center; text-align: center; gap: 18px; }
.notfound .disc { max-width: 280px; }
.notfound .lead { margin-inline: auto; }
.notfound .actions { justify-content: center; }

/* MARK: - Legal text */

.prose {
  max-width: 820px; padding: clamp(24px, 4vw, 48px);
  display: grid; gap: 12px; align-content: start;
  color: var(--ink-2); overflow-wrap: anywhere;
}
.prose > * { max-width: 68ch; }
.prose h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin-top: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; line-height: 1.3; color: var(--ink); margin-top: 14px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* MARK: - Contact, contents */

.center-text { text-align: center; }
.contact { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.contact .card { padding: 26px; display: grid; gap: 10px; align-content: start; }
.contact p { color: var(--ink-2); }
.contact .mail { font-weight: 600; color: var(--ink); font-size: 1.0625rem; }

.toc {
  margin-bottom: 12px; padding: 20px 22px; border-radius: var(--radius-s); background: var(--card-2);
  font-size: .9375rem;
}
.toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; columns: 2 18rem; column-gap: 32px; }
.toc li { break-inside: avoid; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue-ink); text-decoration: underline; }
.prose h2 { scroll-margin-top: 96px; }
.prose h2[id] { padding-top: 4px; }
@media print {
  .nav-shell, .sky, .footer, .toc, .skip { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .card { box-shadow: none !important; }
}

.faq.faq-left { margin-inline: 0; }

/* MARK: - Lesson links */

[hidden] { display: none !important; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 22px; border-radius: 14px;
  background: var(--blue); color: #FFFFFF !important; font-weight: 600; font-size: 1.0625rem;
  box-shadow: 0 8px 20px -10px rgba(10, 132, 255, .7); text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease;
}
.button svg { width: 18px; height: 18px; transition: transform .2s ease; }
.button:hover { transform: translateY(-1px); background: #0077F0; }
.button:hover svg { transform: translateX(3px); }
.lesson-shot { position: relative; width: 100%; max-width: 440px; margin-inline: auto; display: grid; justify-items: center; padding-block: 12px; isolation: isolate; }
.lesson-shot .rings { width: 140%; }
.lesson-shot .phone { width: 62%; max-width: 280px; }

/* MARK: - Wissen page */

.learn-stage {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center; isolation: isolate;
}
.learn-stage .rings { width: 100%; }
.learn-stage .buddy { width: 66%; }
.areas { display: grid; gap: 28px; }
@media (min-width: 900px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
.area-group { display: grid; gap: 12px; align-content: start; }
.small-title { font: 600 .8125rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.areas .topics { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .areas .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps-list { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
.steps-list li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; padding: 18px 20px; align-items: center; }
.steps-list li::before { grid-row: span 2; }
.steps-list .h3 { font-size: 1.125rem; }
.try { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .try { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.try-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 18px 20px; color: var(--ink) !important; text-decoration: none !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.try-card span:not(.topic-symbol) { display: grid; gap: 2px; min-width: 0; }
.try-card b { font: 600 1.0625rem/1.25 var(--font-display); }
.try-card small { color: var(--ink-3); font-size: .875rem; }
.try-card > svg { width: 20px; height: 20px; color: var(--blue-ink); transition: transform .2s ease; }
.try-card .topic-symbol { grid-row: auto; }
@media (hover: hover) {
  .try-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .try-card:hover > svg { transform: translateX(3px); }
}

/* MARK: - Preppy 3.0 page */

@media (min-width: 680px) {
  .bento-new > .n-watch { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 36px; }
  .bento-new > .n-report, .bento-new > .n-buddy { grid-row: span 2; }
}
@media (min-width: 1040px) {
  .bento-new > .n-watch { grid-row: span 2; }
}
.bento-new .n-watch .text { gap: 12px; }
.bento-new .n-watch .watch-scene { max-width: 400px; }
.bento-new .n-report .report-scene { max-width: 300px; margin-top: auto; }
.bento-new .n-report .paper { width: 74%; }
.bento-new .n-buddy .buddy { width: 150px; margin: auto auto 0; }
.text-link.push { margin-top: auto; align-self: flex-start; }
.changes { display: grid; gap: 14px 32px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.changes li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.changes svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 1px; }
.changes b { color: var(--ink); font-weight: 600; }
@media (min-width: 680px) {
  .f-intake .text { display: flex; flex-direction: column; align-self: stretch; }
  .f-intake .week { margin-top: auto; }
}
/* A large, faint icon in the corner of tiles that have only text */
.feature .glyph {
  position: absolute; right: -18px; bottom: -22px; width: 132px; height: 132px; z-index: -1;
  color: var(--c); opacity: .16; rotate: -12deg;
}
.feature .glyph use { stroke-width: 1.2; }
.feature:has(.glyph) { min-height: 200px; }
@media (max-width: 520px) {
  .wide-only { display: none; }
  .awards { gap: 6px 10px; }
  .award .laurel { width: 13px; }
  .award span { padding-inline: 3px; }
  .award small { font-size: .625rem; }
  .award small svg { display: none; }
  .award strong { font-size: .875rem; }
}

/* MARK: - Carousel: one large screen, one peeking on each side; tap a side or use the arrows */

.carousel { position: relative; isolation: isolate; display: grid; gap: 18px; justify-items: center; }
.carousel::before {
  content: ""; position: absolute; inset: -4% -10% 10%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 45%, color-mix(in srgb, var(--c, var(--blue)) 20%, transparent), transparent 70%);
}
.carousel-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520 / 560; touch-action: pan-y; }
.carousel .phone {
  position: absolute; left: 50%; top: 0; width: 46%;
  translate: -50% 0; transform-origin: 50% 20%;
  transition: translate .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.carousel [data-pos="center"] { z-index: 3; }
.carousel [data-pos="prev"] { translate: -128% 6%; scale: .8; z-index: 2; cursor: pointer; }
.carousel [data-pos="next"] { translate: 28% 6%; scale: .8; z-index: 2; cursor: pointer; }
.carousel [data-pos="hidden"] { opacity: 0; scale: .6; pointer-events: none; }
@media (hover: hover) {
  .carousel [data-pos="prev"]:hover { translate: -132% 4%; }
  .carousel [data-pos="next"]:hover { translate: 32% 4%; }
}
.carousel-nav { display: none; align-items: center; gap: 14px; }
.js .carousel-nav { display: flex; }
.carousel-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn.prev svg { rotate: 180deg; }
.band .carousel-btn { background: var(--ground); box-shadow: none; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color .3s ease, width .3s ease; }
.dots .on { width: 18px; border-radius: 99px; background: var(--c, var(--blue)); }
@media (prefers-reduced-motion: reduce) { .carousel .phone { transition: none; } }

/* All topics on the Wissen page, with their lesson counts */
.topics-all li { grid-template-columns: auto minmax(0, 1fr) auto; }
.topics-all .count {
  grid-row: span 2; align-self: center; min-width: 30px; padding: 4px 8px; border-radius: 999px; text-align: center;
  background: var(--blue-soft); color: var(--blue-ink); font: 700 .8125rem/1.2 var(--font-round);
}
.topic-symbol svg { width: 24px; height: 24px; color: #FFFFFF; }
.topic-symbol svg use { stroke-width: 1.8; }
.topics-all .topic-link { padding: 0; background: var(--blue-soft); box-shadow: none; }
.topics-all .topic-link a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center;
  padding: 16px 18px; border-radius: inherit; color: var(--ink); text-decoration: none;
}
.topics-all .topic-link b { color: var(--blue-ink); }

/* Buddy follows the pointer with his eyes and talks when tapped */
.buddy { position: relative; }
.buddy .c-glance { translate: calc(var(--lx, 0) * 5.5px) calc(var(--ly, 0) * 3.5px); transition: translate .25s ease-out; }
.buddy .companion { rotate: calc(var(--lx, 0) * 4deg); transition: rotate .45s cubic-bezier(.3, .7, .3, 1.2); }
@media (prefers-reduced-motion: reduce) { .buddy .companion { rotate: none; } }
.say {
  position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 5;
  translate: -50% 6px; scale: .85; opacity: 0; pointer-events: none;
  padding: 8px 14px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
  font: 600 .9375rem/1.25 var(--font-display); white-space: nowrap;
  transition: opacity .25s ease, scale .35s cubic-bezier(.3, .7, .3, 1.5), translate .35s cubic-bezier(.3, .7, .3, 1.5);
}
.say::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -7px 0 0 -6px;
  background: inherit; rotate: 45deg; border-radius: 0 0 3px 0;
}
.say.show { opacity: 1; scale: 1; translate: -50% 0; }
@media (hover: hover) { .buddy:hover .c-twinkle { animation-duration: 1.1s; } }

/* Taking a dose in the intake tile: the pill from the app springs in and flies up */
.pill-pop {
  position: absolute; left: 50%; top: 45%; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 6;
  pointer-events: none; filter: drop-shadow(0 18px 30px rgba(10, 60, 140, .35));
  animation: pill-pop 1.5s cubic-bezier(.3, .7, .3, 1) forwards;
}
@keyframes pill-pop {
  0% { transform: scale(0) rotate(0deg); }
  30% { transform: scale(1.6) rotate(16deg); }
  42% { transform: scale(.94) rotate(-3deg); }
  52% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-460px) scale(1); opacity: .9; }
}

/* MARK: - App components in the Preppy 3.0 bento */

.bento-new .feature .seg { justify-self: start; align-self: flex-start; }
.buddy-stage { position: relative; flex: 1; min-height: 190px; display: grid; place-items: end center; }
.buddy-stage .buddy { width: 150px; transition: scale .45s cubic-bezier(.3, .7, .3, 1.4), opacity .3s ease; }
.plain-card {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0; width: min(100%, 240px);
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card-2);
  opacity: 0; scale: .9; transition: opacity .3s ease, scale .4s cubic-bezier(.3, .7, .3, 1.4);
}
.plain-card b { display: block; font: 600 1rem/1.2 var(--font-display); }
.plain-card small { color: var(--ink-3); font-size: .8125rem; }
.is-plain .buddy-stage .buddy { scale: 0; opacity: 0; pointer-events: none; }
.is-plain .plain-card { opacity: 1; scale: 1; }

.quiz { margin-top: auto; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--card-2); }
.quiz-q { font: 600 1rem/1.3 var(--font-display); color: var(--ink) !important; min-height: 2.6em; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answers button {
  padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: 600 .9375rem/1.2 var(--font); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease, scale .2s ease;
}
.answers button:hover { border-color: var(--blue); }
.answers button:active { scale: .97; }
.answers .right { background: #1E9E4A; border-color: #1E9E4A; color: #FFFFFF; }
.answers .wrong { background: #E5202E; border-color: #E5202E; color: #FFFFFF; }

.booklet {
  position: relative; margin: auto auto 0; width: min(100%, 250px); aspect-ratio: 1.55; perspective: 900px;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.booklet .page, .booklet .cover { position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; }
.booklet .page { display: grid; align-content: center; gap: 8px; padding: 14px 18px 14px 26px; background: var(--card-2); box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, .2); }
.dose-row { display: flex; justify-content: space-between; font-size: .875rem; }
.dose-row b { font-weight: 600; }
.dose-row i { font-style: normal; color: var(--purple); font-weight: 700; }
.cover {
  display: grid; align-content: space-between; padding: 14px 18px 14px 26px; color: #FFFFFF;
  background: linear-gradient(135deg, #C77DEB, var(--purple)); box-shadow: var(--shadow-lift);
  transform-origin: left center; transition: rotate .8s cubic-bezier(.3, .7, .2, 1); backface-visibility: hidden;
}
.cover::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .3); }
.cover-title { font: 800 1.0625rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.cover-name { font: 600 .9375rem/1 var(--font-display); opacity: .9; }
.cover-stats { font-size: .8125rem; opacity: .9; }
.booklet:hover .cover { rotate: y -18deg; }
.booklet[aria-pressed="true"] .cover { rotate: y -165deg; }
.booklet:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 14px; }

.menubar { margin-top: auto; border-radius: 14px; overflow: hidden; background: var(--card-2); }
.mb-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); font: 600 .8125rem/1 var(--font); }
.mb-dots { display: flex; gap: 5px; margin-right: auto; }
.mb-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mb-icon { display: grid; place-items: center; width: 26px; height: 22px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; padding: 0; }
.menubar.open .mb-icon { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.mb-icon img { width: 16px; height: 16px; border-radius: 4px; }
.mb-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.3, .7, .2, 1); }
.menubar.open .mb-menu { grid-template-rows: 1fr; }
.mb-row { overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.menubar.open .mb-row { padding-block: 12px; }
.mb-row .tile { width: 32px; height: 32px; border-radius: 9px; }
.mb-row b { display: block; font: 600 .9375rem/1.2 var(--font-display); }
.mb-row small { font-size: .8125rem; color: var(--ink-3); }
.mb-check { width: 22px; height: 22px; margin-left: auto; color: var(--green); }

.vault { margin-top: auto; display: grid; gap: 10px; }
.vault-file {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-2);
  font-weight: 600; font-size: .9375rem; filter: blur(5px); opacity: .7; transition: filter .6s ease, opacity .6s ease;
}
.vault-file svg { width: 22px; height: 22px; color: var(--green); }
.vault.open .vault-file { filter: none; opacity: 1; }
.unlock {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--ground); font: 600 .9375rem/1.2 var(--font); cursor: pointer;
}
.unlock svg { width: 20px; height: 20px; }
.vault.scanning .unlock svg { animation: scan .8s ease-in-out; }
.vault.open .unlock { background: var(--green); color: #FFFFFF; }
@keyframes scan { 0%, 100% { scale: 1; } 30% { scale: 1.35; } 60% { scale: .9; } }

.chat { margin-top: auto; display: grid; gap: 6px; justify-items: end; }
.bubble { max-width: 85%; padding: 9px 14px; border-radius: 18px 18px 4px 18px; background: var(--blue); color: #FFFFFF; font-size: .9375rem; }
.link-card {
  display: flex; align-items: center; gap: 12px; width: min(100%, 260px); padding: 10px 14px 10px 10px; border-radius: 18px;
  background: var(--card-2); color: var(--ink) !important; text-decoration: none !important;
  transition: translate .3s cubic-bezier(.3, .7, .3, 1.4), box-shadow .3s ease;
}
.link-card b { display: block; font: 600 .9375rem/1.2 var(--font-display); }
.link-card small { color: var(--ink-3); font-size: .8125rem; }
.link-card .topic-symbol { width: 40px; height: 40px; }
.link-card:hover { translate: 0 -3px; box-shadow: var(--shadow); }

.icon-picker { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.home-icon { display: grid; justify-items: center; gap: 4px; }
.home-icon img { width: 64px; height: 64px; border-radius: 22%; box-shadow: var(--shadow); transition: scale .35s cubic-bezier(.3, .7, .3, 1.5); }
.home-icon small { font-size: .75rem; color: var(--ink-2); }
.home-icon.swap img { animation: c-hop .6s cubic-bezier(.3, .7, .3, 1); }
.icon-picker fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.icon-picker label { cursor: pointer; border-radius: 12px; }
.icon-picker input { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker label img { width: 38px; height: 38px; border-radius: 22%; opacity: .6; transition: opacity .2s ease, scale .3s cubic-bezier(.3, .7, .3, 1.5); }
.icon-picker label:hover img { opacity: .9; }
.icon-picker label:has(input:checked) img { opacity: 1; scale: 1.08; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
.icon-picker label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.widgets { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: end; }
.widget {
  position: relative; width: 128px; aspect-ratio: 1; padding: 12px; border-radius: 24px;
  display: grid; align-content: space-between; background: linear-gradient(160deg, #2F8FFF, #0A63D6); color: #FFFFFF;
}
.w-head { display: flex; align-items: center; gap: 6px; font: 700 .9375rem/1 var(--font-display); }
.w-head svg { width: 18px; height: 18px; }
.w-status { font-size: .8125rem; opacity: .9; }
.w-take {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: #FFFFFF; transition: background-color .25s ease, scale .2s ease;
}
.w-take svg { width: 20px; height: 20px; }
.w-take[aria-pressed="true"] { background: #FFFFFF; color: var(--blue); }
.w-take:active { scale: .9; }
.live {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #000000; color: #FFFFFF;
  font: 600 .8125rem/1.2 var(--font); justify-self: start; white-space: nowrap;
}
.live img { border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .live { animation: live 3s ease-in-out infinite; } }
@keyframes live { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }

/* Some components spill out of their tile, cut by its edge, so the tiles feel less boxed in */
.bento-new .feature:has(.booklet), .bento-new .feature:has(.menubar), .bento-new .feature:has(.widgets), .bento-new .n-report { padding-bottom: 0; }
.bento-new .booklet { width: 118%; max-width: none; margin: auto -26% -14% auto; rotate: -7deg; }
.bento-new .booklet:hover .cover { rotate: y -14deg; }
.booklet[aria-pressed="true"] .cover, .bento-new .booklet[aria-pressed="true"]:hover .cover { rotate: y -165deg; }
.bento-new .menubar {
  position: relative; margin: auto -28px 0 0; padding-bottom: 26px; border-radius: 14px 0 0 0; overflow: hidden;
  background: linear-gradient(160deg, var(--sky-1), var(--sky-3));
}
.bento-new .mb-bar {
  justify-content: flex-start; gap: 12px; padding: 5px 14px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mb-left { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.mb-left svg { width: 13px; height: 13px; margin-top: -2px; }
.mb-left b { font-weight: 700; }
.bento-new .mb-menu {
  margin: 6px 52px 0 auto; width: min(76%, 250px); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow-lift);
}
.bento-new .widgets { margin-bottom: -26px; }
.bento-new .widget { width: 150px; }
.bento-new .widgets .live { margin-bottom: 40px; }
.bento-new .n-report .report-scene { margin: auto auto -22%; }
.bento-new .n-report .paper { rotate: -5deg; }
.topics-all li > .topic-symbol { grid-column: 1; grid-row: 1 / span 2; }
.topics-all li > b, .topics-all li > small { grid-column: 2; }
.topics-all li > .count { grid-column: 3; grid-row: 1 / span 2; }
/* Title and subtitle stay together when a tile is taller than its content */
.topics li, .topics-all .topic-link a { align-content: center; }
.topics li > small { align-self: start; }
.topics li > b { align-self: end; }
/* The jump pills under a subpage's title may use the full width; the lead keeps its own measure */
.subhero .head { max-width: none; }
.subhero .head.center .lead { margin-inline: auto; }
/* Phones: the App Store badge and the text link stack, centered */
@media (max-width: 520px) {
  .hero-copy .actions { flex-direction: column; align-items: center; gap: 10px; }
  .learn .actions { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* MARK: - Datenschutz interactions */

/* Hero: the chips drift with the pointer; tapping sends a wave through the rings */
.collage[data-replay] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.collage .rings circle { transform-box: fill-box; transform-origin: center; }
.collage .rings .pulse { fill: none; stroke: var(--blue); stroke-width: 3; opacity: 0; }
[data-parallax] > .core { --d: 8; }
.collage > .c1 { --d: 22; }
.collage > .c2 { --d: 30; }
.collage > .c3 { --d: 26; }
.collage > .c4 { --d: 34; }
@media (prefers-reduced-motion: no-preference) {
  .collage.wave .rings circle:nth-child(4) { animation: ring-soft .8s cubic-bezier(.3, .7, .3, 1); }
  .collage.wave .rings circle:nth-child(3) { animation: ring-soft .8s cubic-bezier(.3, .7, .3, 1) .08s; }
  .collage.wave .rings circle:nth-child(2) { animation: ring-soft .8s cubic-bezier(.3, .7, .3, 1) .16s; }
  .collage.wave .rings circle:nth-child(1) { animation: ring-soft .8s cubic-bezier(.3, .7, .3, 1) .24s; }
  .collage.wave .rings .pulse { animation: pulse-soft 1.1s cubic-bezier(.2, .7, .3, 1); }
  .collage.wave .core { animation: core-pop .7s cubic-bezier(.3, .7, .3, 1.4); }
}
@keyframes core-pop { 0%, 100% { scale: 1; } 35% { scale: 1.06; } 65% { scale: .99; } }
@keyframes pulse-soft { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ring-soft { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.02); } }

/* An iOS switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i {
  position: relative; width: 51px; height: 31px; flex: none; border-radius: 99px; background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s ease;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: translate .3s cubic-bezier(.3, .7, .3, 1.2);
}
.switch input:checked + i { background: #34C759; box-shadow: none; }
.switch input:checked + i::after { translate: 20px 0; }
.switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Where your data lives: one diagram with the Backup & Sync switch */
.sync-demo { padding: 28px; display: grid; gap: 22px; }
.sync-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sync-demo .tag {
  justify-self: start; padding: 5px 12px; border-radius: 999px; font: 600 .8125rem/1.2 var(--font);
  background: var(--blue-soft); color: var(--blue-ink);
}
.sync-demo .tag.plain { background: var(--card-2); color: var(--ink-2); }
.sync-demo p { color: var(--ink-2); max-width: 68ch; }
.sync-demo:not(.on) .when-on, .sync-demo.on .when-off { display: none; }
.sync-demo .node { transition: opacity .35s ease, background-color .35s ease, border-color .35s ease; }
.sync-demo:not(.on) .wire { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); animation: none; }
.sync-demo:not(.on) .n-server, .sync-demo:not(.on) .n-devices { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.sync-demo:not(.on) .n-server .tile { background: var(--card-2); color: var(--ink-3); }
.sync-demo:not(.on) .n-devices { opacity: .35; }
.sync-demo.on .n-server, .sync-demo.on .n-devices { animation: c-hop .6s cubic-bezier(.3, .7, .3, 1); }
.sync-demo.on .n-devices { animation-delay: .12s; }
.sync-hint { transition: opacity .3s ease; }
.sync-demo.touched .sync-hint { opacity: 0; }
@media (max-width: 560px) {
  .sync-demo:not(.on) .wire { background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); }
}
@media (prefers-reduced-motion: reduce) { .sync-demo.on .n-server, .sync-demo.on .n-devices { animation: none; } }

/* Settings: a row with a switch */
.set-row.has-switch { grid-template-columns: auto minmax(0, 1fr) auto; }
.set-row .row-switch { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

/* Encryption: the heading beside the passkey demo */
.enc-split { display: grid; gap: 28px; align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .enc-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; } }
.enc-vault { margin: 0; padding: 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.band .enc-vault { background: var(--ground); box-shadow: none; }
.enc-vault .vault-file { background: var(--card); }
.band .enc-vault .vault-file { background: var(--card); }

/* Legal pages: one centered document column, the title aligned with it */
.prose { max-width: 800px; margin-inline: auto; }
.prose > * { max-width: none; }
.subhero:has(+ .section .prose) .head { max-width: 800px; margin-inline: auto; padding-inline: clamp(24px, 4vw, 48px); }

/* FAQ: site.js animates the answer's height; the question stays put and the arrow turns at once */
.faq .answer.animating { overflow: hidden; }
.faq details.is-closing summary .plus { transform: rotate(0deg); }
.faq summary:focus { outline: none; }
.faq summary:focus-visible { outline: none; border-radius: 20px; box-shadow: inset 0 0 0 3px var(--focus); }

/* Help: the question list sits closer to its heading */
.stack:has(> .faq-left) { gap: 20px; }

/* The pointer to the English page for browsers not set to German */
.lang-hint {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px; border-radius: 999px; font-size: .9375rem;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
}
.lang-hint span { color: var(--ink-2); white-space: nowrap; }
.lang-hint a { font-weight: 600; white-space: nowrap; }
.lang-hint button {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--card-2); color: var(--ink-2); font-size: 1.125rem; line-height: 1;
}
@media (max-width: 420px) { .lang-hint span { display: none; } }
/* The menu bar's rounded corner: clip everything (a backdrop blur ignores overflow clipping in some engines) */
.bento-new .menubar { clip-path: inset(0 round 14px 0 0 0); }
.bento-new .mb-bar { border-radius: 14px 0 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--card) 88%, transparent); }
/* The Mac menu: as wide as its row, one line each */
.bento-new .mb-menu { width: auto; min-width: 220px; max-width: calc(100% - 40px); }
.mb-row b, .mb-row small { white-space: nowrap; }

/* Buddy cheers while the App Store button is hovered or focused. site.js morphs him into the app's cheer pose
   (.cheer), then the arms swing around the shoulders in the app's four beats (BuddyView: left -10°, 8°, -10°, 0°;
   right mirrored) with a small hop (.cheering). */
.companion .arm-r { transform-box: view-box; transform-origin: 130px 134px; }
@media (prefers-reduced-motion: no-preference) {
  .buddy.waving .companion .arm-l { animation: c-hello .7s ease-in-out 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .buddy.cheering .companion .arm-l { animation: cheer-left .8s ease-in-out infinite; }
  .buddy.cheering .companion .arm-r { animation: cheer-right .8s ease-in-out infinite; }
  .buddy.cheering .companion .c-bob { animation: cheer-hop .8s cubic-bezier(.3, .7, .3, 1) infinite; transform-origin: center bottom; }
  .buddy.cheering .companion .c-shadow { animation: cheer-shadow .8s cubic-bezier(.3, .7, .3, 1) infinite; }
  .buddy.cheer .c-twinkle { animation-duration: 1s; }
}
@keyframes cheer-left { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-10deg); } }
@keyframes cheer-right { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(10deg); } }
@keyframes cheer-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.03); } 60% { transform: translateY(0); } }
@keyframes cheer-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 30% { transform: scaleX(.85); opacity: .7; } }

/* Footer: the language switch, a small segmented pill at the end of the bottom row */
.footer-base .row { align-items: center; }
.lang-switch {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 10px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
}
.lang-switch svg { width: 16px; height: 16px; color: var(--ink-3); margin-right: 4px; }
.footer-base .lang-switch a {
  padding: 6px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .8125rem;
  transition: background-color .2s ease, color .2s ease;
}
.footer-base .lang-switch a:hover { color: var(--ink); background: var(--card-2); }
.footer-base .lang-switch a[aria-current] { background: var(--blue); color: #FFFFFF; }
@media (max-width: 700px) { .lang-switch { margin-left: 0; } }
.footer a.mail { color: var(--ink); text-decoration: none; }
.footer a.mail:hover { color: var(--blue-ink); text-decoration: underline; }
a.mail { user-select: auto; }