/* Knieses – Studio-Gerüst neutral, Enzianblau für Aktion, jede App bringt ihr eigenes Farbfeld mit.
   Brand Guidelines: siehe BRAND.md. Alle Farben, Grössen und Kurven als Tokens. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --radius-control: 14px;  /* Knöpfe, Eingabefelder, Fragen */

  /* Studio */
  --paper: #ffffff;
  --paper-2: #f2f2ef;
  --ink: #111111;
  --ink-2: #5b5b58;
  --enzian: #1c48c0;
  --enzian-press: #15389a;
  --on-enzian: #ffffff;

  /* App-Farben: oklch(L C H), H aus dem Icon. field 0.93/0.045 · tone 0.90/0.0575 · plate 0.87/0.07 · ink 0.36/0.10
     Mink liegt nur 5,5° neben Vivere und soll laut eigener Marke keine grossen Grünflächen haben → Chroma gesenkt (Salbei-Grau). */
  --aevum-field: #f9def8;  --aevum-tone: #f3d1f3;  --aevum-plate: #edc5ed;  --aevum-ink: #572758;
  --vivere-field: #d2f1da; --vivere-tone: #c1eacd; --vivere-plate: #b1e2c0; --vivere-ink: #004b23;
  --mink-field: #deece4;   --mink-tone: #d1e3d8;   --mink-plate: #c4dbcd;   --mink-ink: #134830;
  --neutral-field: #e6e8ec; --neutral-tone: #dcdee3; --neutral-plate: #d1d4da; --neutral-ink: #3a3d44;

  --font: "Schibsted Grotesk", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.5rem, 12.4vw, 13.25rem);
  --t-h2: clamp(2.25rem, 7vw, 7rem);
  --t-h3: clamp(1.875rem, 4.2vw, 4.25rem);
  --t-lead: clamp(1.375rem, 2.4vw, 2.25rem);
  --t-text: 1.125rem;
  --t-small: 1rem;

  --margin: clamp(16px, 3.4vw, 48px);
  --gutter: clamp(16px, 1.7vw, 24px);
  --section: clamp(96px, 11vw, 176px);

  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-text); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--enzian); text-decoration-thickness: 2px; text-underline-offset: .22em; transition: color .2s ease, text-underline-offset .3s var(--ease); }
a:hover { color: var(--enzian-press); text-underline-offset: .32em; }
:focus-visible { outline: 3px solid var(--enzian); outline-offset: 4px; }
::selection { background: var(--enzian); color: var(--on-enzian); }

.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -60px; z-index: 100; background: var(--enzian); color: var(--on-enzian); padding: 10px 16px; border-radius: var(--radius-control); font-weight: 600; }
.skip:focus { top: 12px; color: var(--on-enzian); }

.lead { font-size: var(--t-lead); line-height: 1.24; letter-spacing: -.02em; text-wrap: pretty; }
h2 { font-size: var(--t-h2); font-weight: 760; line-height: .94; letter-spacing: -.05em; margin-left: -.03em; text-wrap: balance; }

/* ---------- Navigation ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  transition: transform .5s var(--ease);
}
.site-head.is-hidden { transform: translateY(-100%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.wordmark {
  color: var(--ink); font-weight: 800; font-size: 1.5rem; letter-spacing: -.05em; line-height: 1; text-decoration: none;
  display: inline-block; transition: transform .5s var(--spring);
}
.wordmark:hover { color: var(--ink); transform: translateY(-1px) scale(1.04); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); }
.nav-links a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-small); position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--enzian);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-control); border: 0; cursor: pointer;
  background: var(--enzian); color: var(--on-enzian);
  font: 600 var(--t-small)/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .4s var(--spring);
}
.btn:hover { background: var(--enzian-press); color: var(--on-enzian); transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.text-link { font-weight: 600; text-decoration: underline; }

/* ---------- Bewegung: Zeilen, Einblenden ---------- */
.split .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.split .line > span { display: block; }
.js .split .line > span { transform: translateY(105%); animation: line-in 1s var(--ease) calc(var(--i) * 110ms + 120ms) forwards; }
@keyframes line-in { to { transform: none; } }

/* Nach einem Sprachwechsel: keine Einstiegs-Animationen, schon sichtbare Blöcke ohne Übergang. */
.no-intro .split .line > span, .no-intro .icon-row li, .no-intro .app-hero-icon, .no-intro .nf-digits .d, .no-intro .nf-zero { animation: none !important; transform: none; opacity: 1; }
.instant [data-reveal], .instant .mask > span, .instant .team-person, .instant .big-mark span, .instant .icon-wrap { transition: none !important; }

.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero (Startseite) ---------- */
.hero { padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(56px, 6vw, 96px); row-gap: clamp(28px, 3.4vw, 56px); }
.hero h1 {
  grid-column: 1 / -1;
  font-size: var(--t-display); font-weight: 760; line-height: .9; letter-spacing: -.055em;
  margin-left: -.045em; white-space: nowrap;
}
.hero-lead { grid-column: 7 / -1; grid-row: 2; max-width: 30ch; }
.hero-side { grid-column: 1 / span 5; grid-row: 2; align-self: end; display: grid; gap: 22px; justify-items: start; }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }

.icon-row { display: flex; gap: clamp(12px, 1.2vw, 18px); }
.icon-link {
  display: block; width: clamp(56px, 4.6vw, 72px); aspect-ratio: 1; border-radius: 23%;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .12);
  transition: transform .7s var(--spring), box-shadow .45s ease;
}
.icon-link svg { width: 100%; height: 100%; }
.icon-link:is(:hover, :focus-visible, .is-play) { transform: translateY(-6px) scale(1.08); box-shadow: 0 8px 14px -6px rgba(17, 17, 17, .35); }
.js .icon-row li { opacity: 0; transform: translateY(18px) scale(.8); animation: pop-in .9s var(--spring) forwards; }
.js .icon-row li:nth-child(1) { animation-delay: .55s; }
.js .icon-row li:nth-child(2) { animation-delay: .65s; }
.js .icon-row li:nth-child(3) { animation-delay: .75s; }
.js .icon-row li:nth-child(4) { animation-delay: .85s; }
@keyframes pop-in { to { opacity: 1; transform: none; } }

/* ---------- Apps ---------- */
.apps { padding-bottom: var(--section); }
.apps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(32px, 3.4vw, 48px); }
.apps-note { color: var(--ink-2); max-width: 34ch; }

.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(56px, 5vw, 80px) var(--gutter);
}
.others .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot { container-type: inline-size; min-width: 0; }
.slot.next:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.slot.next:last-child:nth-child(3n+2) { grid-column: span 2; }

/* App-Karte. 1 u = Icongrösse / 88. Alle Masse der Karte in u. */
.app-card {
  --icon: clamp(64px, 20cqi, 100px);
  --u: calc(var(--icon) / 88);
  --tab-w: calc(var(--u) * 116);
  --tab-w-active: calc(var(--u) * 140);
  position: relative; color: var(--ink);
}
.stage { position: relative; padding-bottom: calc(var(--u) * 32); }
.thumb {
  position: relative; z-index: 1; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--field); border-radius: calc(var(--u) * 24);
}
/* Lasche: liegt hinter dem Thumbnail und überlappt es um 2 u (keine Naht). Wächst über die Breite, Ecken sind eigene Stücke. */
.tab {
  position: absolute; z-index: 0; left: 50%; bottom: 0;
  width: var(--tab-w); height: calc(var(--u) * 34);
  transform: translateX(-50%);
  background: var(--field); color: var(--field);
  border-radius: 0 0 calc(var(--u) * 24) calc(var(--u) * 24);
  transition: width .75s var(--spring);
}
.tab svg { position: absolute; top: 0; width: calc(var(--u) * 12); height: calc(var(--u) * 14); }
.tab .cl { right: calc(100% - 1px); }
.tab .cr { left: calc(100% - 1px); transform: scaleX(-1); }

/* Platzhalter-Screenshots. Echte Bilder: <img> in .shot, object-fit: cover. */
.shot {
  position: absolute; left: 50%;
  display: flex; justify-content: center; align-items: center;
  color: var(--app-ink); background: var(--plate);
  font-size: clamp(11px, 3.2cqi, 14px); font-weight: 500; letter-spacing: -.005em; line-height: 1.25;
  overflow: hidden;
  --x: 0px; --py: 0px;
  transform: translateX(-50%) translateX(var(--x)) translateY(var(--py));
  transition: transform .7s var(--ease), opacity .45s ease;
}
.shot .soon { display: block; text-align: center; padding: 0 6%; max-width: 30ch; text-wrap: balance; }
.shot .soon strong { display: block; font-weight: 700; }
.stage.wide .shot .soon { font-size: clamp(13px, 1.3vw, 17px); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.portrait.a { width: calc(var(--u) * 116); top: calc(var(--u) * 24); bottom: calc(var(--u) * 20); border-radius: calc(var(--u) * 16); padding-bottom: calc(var(--u) * 24); }
.shot.portrait.b { width: calc(var(--u) * 140); height: calc(var(--u) * 140); top: calc(var(--u) * 26); border-radius: calc(var(--u) * 28); background: var(--tone); }
.shot.landscape.a { width: calc(var(--u) * 224); height: calc(var(--u) * 116); top: calc(var(--u) * 28); border-radius: calc(var(--u) * 18); }
.shot.landscape.b { width: calc(var(--u) * 250); height: calc(var(--u) * 150); top: calc(var(--u) * 22); border-radius: calc(var(--u) * 10); background: var(--tone); }
.stage:not(.wide) .shot.b { opacity: 0; --x: 36%; }

.icon-wrap {
  position: absolute; z-index: 2;
  width: var(--icon); height: var(--icon);
  left: calc(50% - var(--icon) / 2); bottom: calc(var(--u) * 10);
  border-radius: 23%;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .12);
  transition: transform .75s var(--spring), box-shadow .45s ease;
}
.icon-wrap svg { width: 100%; height: 100%; }
.js .slot[data-reveal]:not(.is-in) .icon-wrap { transform: scale(.7); }

.meta { margin-top: 20px; display: grid; justify-items: start; gap: 6px; }
.meta h3 { font-size: var(--t-lead); font-weight: 720; line-height: 1.05; letter-spacing: -.035em; }
.meta .desc { max-width: 36ch; text-wrap: pretty; }
.meta .status { color: var(--ink-2); font-size: var(--t-small); }
.meta .more { margin-top: 8px; font-weight: 600; }
.meta .more::after { content: ""; position: absolute; inset: -8px; z-index: 3; border-radius: calc(var(--u) * 28); }
.meta .more:focus-visible { outline: none; }
.meta .more:focus-visible::after { outline: 3px solid var(--enzian); outline-offset: 2px; }

.app-card:is(:hover, :focus-within, .is-flipped) .stage:not(.wide) .shot.a { opacity: 0; --x: -36%; }
.app-card:is(:hover, :focus-within, .is-flipped) .stage:not(.wide) .shot.b { opacity: 1; --x: 0px; }
.app-card:is(:hover, :focus-within, .is-flipped) .icon-wrap { transform: translateY(calc(var(--u) * -8)) scale(1.06); box-shadow: 0 6px 10px -4px rgba(17, 17, 17, .3); transition-delay: 0s; }
.app-card:is(:hover, :focus-within, .is-flipped) .tab { width: var(--tab-w-active); }
.app-card:hover .more { color: var(--enzian-press); }

/* Breiter Slot (Platzhalter allein in der Reihe): quer, Bild links, Text rechts. */
@container (min-width: 640px) {
  .slot .app-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(24px, 3cqi, 48px); align-items: center; --icon: clamp(64px, 7cqi, 100px); }
  .slot .app-card .meta { margin-top: 0; }
}

.aevum  { --field: var(--aevum-field);   --tone: var(--aevum-tone);   --plate: var(--aevum-plate);   --app-ink: var(--aevum-ink); }
.vivere { --field: var(--vivere-field);  --tone: var(--vivere-tone);  --plate: var(--vivere-plate);  --app-ink: var(--vivere-ink); }
.mink   { --field: var(--mink-field);    --tone: var(--mink-tone);    --plate: var(--mink-plate);    --app-ink: var(--mink-ink); }
.next   { --field: var(--neutral-field); --tone: var(--neutral-tone); --plate: var(--neutral-plate); --app-ink: var(--neutral-ink); }

/* ---------- Icon-Animationen (aktiv = Hover, Fokus, Auto-Flip, Idle) ---------- */
.ic-arc { transition: stroke-dashoffset 1s var(--spring); }
.ic-dot { transform-box: view-box; transform-origin: 50px 50px; transform: rotate(45deg); transition: transform 1s var(--spring); }
.ic-knob { transform: translateX(66px); transition: transform .9s var(--spring); }
.ic-trail { transform-box: view-box; transform-origin: 18px 50px; transform: scaleX(1); transition: transform .9s var(--spring); }
.ic-key { transform-box: fill-box; transform-origin: center; }
.ic-plus { transform-box: view-box; transform-origin: 50px 50px; transition: transform .8s var(--spring); }

:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play), [data-idle-self]:is(:hover, .is-play)) .ic-arc { stroke-dashoffset: 18; }
:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play), [data-idle-self]:is(:hover, .is-play)) .ic-dot { transform: rotate(295deg); }
:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play), [data-idle-self]:is(:hover, .is-play)) .ic-knob { transform: translateX(80px); }
:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play), [data-idle-self]:is(:hover, .is-play)) .ic-trail { transform: scaleX(1.3); }
:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play), [data-idle-self]:is(:hover, .is-play)) .ic-key { animation: key-press .75s var(--ease) var(--kd) both; }
:is(.app-card:is(:hover, :focus-within, .is-flipped), .icon-link:is(:hover, :focus-visible, .is-play)) .ic-plus { transform: rotate(90deg); }
@keyframes key-press {
  0% { transform: none; }
  30% { transform: scale(.7); opacity: .7; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: none; }
}

/* ---------- Über uns ---------- */
.team { background: var(--paper-2); padding-block: var(--section); overflow-x: clip; }
.team-row { align-items: end; row-gap: 20px; }
.team-row + .team-row { margin-top: clamp(40px, 5vw, 72px); }
.team-word {
  grid-column: 1 / span 8;
  font-size: clamp(3rem, 9.6vw, 10rem); font-weight: 780; line-height: .9; letter-spacing: -.055em; margin-left: -.045em;
  white-space: nowrap;
}
.mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: block; }
.js .team-row .mask > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .team-row.is-in .mask > span { transform: none; }
.team-row:nth-child(odd of .team-row) .team-word { grid-column: 1 / span 8; }
.team-row:nth-child(even of .team-row) .team-word { grid-column: 2 / span 7; }
.team-person { grid-column: 9 / -1; padding-bottom: .9em; display: grid; gap: 4px; }
.js .team-row .team-person { opacity: 0; transform: translateY(16px); transition: opacity .8s ease .35s, transform 1s var(--ease) .35s; }
.js .team-row.is-in .team-person { opacity: 1; transform: none; }
.team-person h3 { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.035em; line-height: 1.05; }
.team-person .role { font-weight: 650; margin-top: 6px; }
.team-person .bio { max-width: 34ch; }
.team-foot { margin-top: clamp(72px, 8vw, 128px); row-gap: 48px; align-items: start; }
.team-intro { grid-column: 1 / span 6; max-width: 26ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); }
.team-foot .facts { grid-column: 8 / -1; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; }
.facts dd { color: var(--ink-2); }

/* ---------- Werte ---------- */
.values { padding-block: var(--section); }
.values-title { margin-bottom: clamp(40px, 4.4vw, 72px); }
.values-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gutter); }
.values-list li { display: grid; gap: 14px; align-content: start; }
.value-word { font-size: var(--t-h3); font-weight: 760; line-height: 1; letter-spacing: -.05em; margin-left: -.03em; }
.values-list li p:last-child { max-width: 30ch; }

/* ---------- Kontakt / Footer ---------- */
.contact { background: var(--enzian); color: var(--on-enzian); padding-top: var(--section); padding-bottom: 28px; overflow-x: clip; }
.contact a { color: var(--on-enzian); }
.contact :focus-visible { outline-color: var(--on-enzian); }
.contact ::selection { background: var(--on-enzian); color: var(--enzian); }
.contact h2 { font-size: var(--t-lead); font-weight: 720; line-height: 1.05; letter-spacing: -.035em; margin-left: 0; }
.contact-text { margin-top: 10px; max-width: 34ch; }
.mail {
  display: inline-block; margin-top: clamp(24px, 3vw, 44px); margin-left: -.03em;
  font-size: var(--t-h2); font-weight: 760; letter-spacing: -.05em; line-height: 1;
  text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; overflow-wrap: anywhere;
}
.mail:hover { color: var(--on-enzian); text-decoration-thickness: .1em; text-underline-offset: .2em; }
.mark-box { container-type: inline-size; margin-top: clamp(80px, 9vw, 136px); }
.big-mark {
  display: flex; white-space: nowrap; overflow: hidden; padding-bottom: .04em;
  font-size: 27.8cqi; font-weight: 860; letter-spacing: -.065em; line-height: .78; margin-left: -.045em;
}
.big-mark span { display: block; }
.js .big-mark span { transform: translateY(100%); transition: transform 1.1s var(--ease) calc(var(--i) * 60ms); }
.js .mark-box.is-in .big-mark span { transform: none; }
.foot { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; font-size: var(--t-small); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot a { text-decoration: none; font-weight: 500; }
.foot a:hover { text-decoration: underline; }

/* ---------- App-Seite ---------- */
.app-hero { padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(40px, 4vw, 64px); row-gap: clamp(20px, 2.4vw, 36px); align-items: end; }
.app-hero-icon {
  grid-column: 1 / -1; width: clamp(80px, 8vw, 120px); aspect-ratio: 1; border-radius: 23%;
  box-shadow: 0 2px 4px rgba(17, 17, 17, .14);
  transition: transform .7s var(--spring);
}
.app-hero-icon:hover { transform: translateY(-4px) scale(1.04); }
.js .app-hero-icon { animation: pop-in-big 1s var(--spring) .1s both; }
@keyframes pop-in-big { from { opacity: 0; transform: translateY(24px) scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
.app-hero h1 {
  grid-column: 1 / span 7;
  font-size: clamp(3.5rem, 12.5vw, 13rem); font-weight: 780; white-space: nowrap; line-height: .86; letter-spacing: -.06em; margin-left: -.05em;
}
.app-hero-copy { grid-column: 8 / -1; display: grid; gap: 16px; justify-items: start; padding-bottom: .6em; }
.app-hero-copy .lead { max-width: 30ch; }
.app-hero-copy .status { color: var(--ink-2); }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }

.app-stage { padding-bottom: clamp(56px, 6vw, 96px); }
.app-card.big { --icon: clamp(88px, 8vw, 128px); }
.stage.wide .thumb { aspect-ratio: 16 / 7.2; }
.stage.wide .shot { opacity: 1; left: var(--left); transform: translateX(-50%) translateX(var(--x)) translateY(var(--py)); }
.stage.wide .shot.portrait { width: 15%; height: auto; aspect-ratio: 9 / 19.5; bottom: auto; padding-top: 0; align-items: center; border-radius: calc(var(--u) * 22); background: var(--plate); }
.stage.wide .shot.portrait.a { --left: 31%; top: 16%; }
.stage.wide .shot.portrait.b { --left: 50%; top: 8%; width: 17%; aspect-ratio: auto; height: 60%; background: var(--tone); }
.stage.wide .shot.portrait.c { --left: 69%; top: 20%; }
.stage.wide .shot.landscape { height: auto; border-radius: calc(var(--u) * 16); }
.stage.wide .shot.landscape.a { --left: 19%; top: 30%; width: 27%; aspect-ratio: 2.1; }
.stage.wide .shot.landscape.b { --left: 50%; top: 10%; width: 38%; aspect-ratio: 1.6; border-radius: calc(var(--u) * 10); background: var(--tone); }
.stage.wide .shot.landscape.c { --left: 81%; top: 38%; width: 27%; aspect-ratio: 2.1; }
.app-card.big:hover .stage.wide .shot.a { --x: -12%; }
.app-card.big:hover .stage.wide .shot.c { --x: 12%; }
.app-card.big:hover .stage.wide .shot.b { --x: 0px; transform: translateX(-50%) translateY(calc(var(--py) - 10px)); }

.app-facts { padding-bottom: var(--section); }
.app-facts .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-facts .facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.app-facts .facts dt { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.app-facts .facts dd { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }

.features { padding-bottom: var(--section); row-gap: 40px; align-items: start; }
.features h2 { grid-column: 1 / span 5; position: sticky; top: 104px; }
.feature-list { grid-column: 7 / -1; display: grid; gap: clamp(32px, 3.4vw, 52px); }
.feature-list h3 { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; }
.feature-list p { margin-top: 8px; max-width: 46ch; }

.steps-band { background: var(--field); color: var(--app-ink); padding-block: var(--section); }
.steps-band h2 { color: var(--ink); margin-bottom: clamp(40px, 4.4vw, 72px); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gutter); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 16px; align-content: start; }
.steps li::before {
  content: counter(step); display: block;
  font-size: var(--t-h3); font-weight: 780; letter-spacing: -.05em; line-height: .9;
}
.steps p { max-width: 26ch; color: var(--ink); }

.faq { padding-block: var(--section); row-gap: 40px; align-items: start; }
.faq h2 { grid-column: 1 / span 5; }
.faq-list { grid-column: 7 / -1; display: grid; gap: 10px; }
details { background: var(--paper-2); border-radius: var(--radius-control); transition: background-color .3s ease; }
details:hover { background: #ebebe7; }
summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 22px 24px; font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.25;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 1.6em; line-height: .6; font-weight: 400; color: var(--enzian); transition: transform .5s var(--spring); }
details[open] summary::after { transform: rotate(45deg); }
.answer { padding: 0 24px 24px; max-width: 60ch; }
details[open] .answer { animation: answer-in .6s var(--ease); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.app-note { margin-top: 32px; display: grid; gap: 10px; }
.app-note p:first-child { color: var(--ink-2); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 6px; font-weight: 600; }

.others { padding-top: 0; }
.others h2 { margin-bottom: clamp(32px, 3.4vw, 48px); }

/* ---------- Rechtliches ---------- */
.legal { padding-top: clamp(24px, 3vw, 48px); padding-bottom: var(--section); row-gap: 40px; align-items: start; }
.legal-head { grid-column: 1 / span 5; position: sticky; top: 104px; display: grid; gap: 24px; justify-items: start; }
.legal-head h1 { font-size: clamp(2.5rem, 5.4vw, 5.5rem); font-weight: 760; line-height: .94; letter-spacing: -.05em; margin-left: -.03em; text-wrap: balance; }
.legal-head h1 .line { white-space: normal; }
.legal-app a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--ink); }
.legal-app a:hover { color: var(--enzian); }
.mini-icon { width: 36px; height: 36px; border-radius: 23%; overflow: hidden; display: block; }
.prose { grid-column: 7 / -1; max-width: 68ch; }
.prose h2 { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.03em; line-height: 1.15; margin: 1.8em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin: 1.4em 0 .4em; }
.prose p, .prose ul, .prose ol { margin-bottom: .9em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: .3em; }
.prose .stand { color: var(--ink-2); margin-bottom: 1.6em; }
.prose .summary { list-style: none; padding: clamp(20px, 2.4vw, 32px); background: var(--paper-2); border-radius: var(--radius-control); display: grid; gap: .6em; margin-bottom: 2.4em; }
.prose .summary li { padding-left: 1.6em; position: relative; }
.prose .summary li::before { content: "✓"; position: absolute; left: 0; color: var(--enzian); font-weight: 700; }
.prose .summary li + li { margin-top: 0; }

/* ---------- Warteliste ---------- */
.wish { padding-top: clamp(24px, 3vw, 48px); padding-bottom: var(--section); row-gap: 48px; align-items: end; }
.wish-copy { grid-column: 1 / span 6; display: grid; gap: clamp(24px, 3vw, 40px); }
.wish-copy h1 { white-space: nowrap; font-size: clamp(2.25rem, 5.6vw, 6rem); font-weight: 760; line-height: .92; letter-spacing: -.055em; margin-left: -.04em; }
.wish-copy .lead { max-width: 26ch; }
.wish-panel { grid-column: 8 / -1; background: var(--field); border-radius: 24px; padding: clamp(24px, 3vw, 44px); display: grid; gap: 24px; }
.wish-icon { width: 76px; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 2px 4px rgba(17, 17, 17, .14); transition: transform .7s var(--spring); }
.wish-icon:hover { transform: translateY(-4px) scale(1.05); }
.wish-form { display: grid; gap: 12px; }
.wish-form label { font-weight: 600; }
.wish-form input[type="email"] {
  font: inherit; font-size: 1.125rem; color: var(--ink); background: var(--paper);
  min-height: 56px; padding: 0 18px; border-radius: var(--radius-control); border: 2px solid transparent; width: 100%;
  transition: border-color .2s ease;
}
.wish-form input[type="email"]:focus { outline: none; border-color: var(--enzian); }
.wish-form .consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: var(--t-small); margin-top: 6px; }
.wish-form .consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--enzian); flex: none; }
.wish-form .btn { justify-self: start; margin-top: 8px; }
.feedback { min-height: 1.5em; font-weight: 600; }
.feedback[data-state="success"] { color: var(--vivere-ink); }
.feedback[data-state="error"] { color: #a1261b; }
.feedback[data-state="muted"] { color: var(--ink-2); }
.wish-side { color: var(--app-ink); font-size: var(--t-small); }

/* ---------- 404 ---------- */
.nf { padding-top: clamp(16px, 2vw, 32px); padding-bottom: var(--section); }
.nf-digits {
  display: flex; align-items: center; gap: .04em;
  font-size: clamp(7rem, 30vw, 26rem); font-weight: 860; line-height: .8; letter-spacing: -.06em; margin-left: -.05em;
}
.nf-digits .d { display: block; }
.js .nf-digits .d { animation: pop-in-big 1s var(--spring) both; }
.js .nf-digits .d:last-child { animation-delay: .24s; }
.nf-zero {
  display: block; width: .74em; height: .74em; margin-inline: .05em; border-radius: 23%; overflow: hidden;
  box-shadow: 0 .03em .08em -.03em rgba(17, 17, 17, .4);
  transition: transform .8s var(--spring);
}
.js .nf-zero { animation: pop-in-big 1.1s var(--spring) .12s both; }
.nf-zero:hover { transform: rotate(-8deg) scale(1.04); }
.nf-zero svg { width: 100%; height: 100%; }
.nf-copy { margin-top: clamp(32px, 4vw, 64px); row-gap: 28px; align-items: start; }
.nf-copy h1 { grid-column: 1 / span 6; font-size: var(--t-h3); font-weight: 760; line-height: 1; letter-spacing: -.05em; margin-left: -.03em; text-wrap: balance; }
.nf-copy h1 .line { white-space: normal; }
.nf-text { grid-column: 7 / -1; display: grid; gap: 18px; justify-items: start; }
.nf-text .lead { max-width: 28ch; }
.nf-path { color: var(--ink-2); overflow-wrap: anywhere; }
.nf-path code { font: inherit; font-weight: 650; color: var(--ink); background: var(--paper-2); padding: .1em .4em; border-radius: 6px; }
.nf-more { margin-top: clamp(64px, 8vw, 128px); row-gap: 28px; }
.nf-sub { grid-column: 1 / -1; font-size: var(--t-lead); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.nf-apps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.nf-app {
  display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: var(--radius-control);
  background: var(--field); color: var(--ink); text-decoration: none; height: 100%;
  transition: transform .5s var(--spring);
}
.nf-app:hover { color: var(--ink); transform: translateY(-4px); }
.nf-app .icon-link { flex: none; width: 64px; }
.nf-app strong { display: block; font-size: 1.375rem; font-weight: 720; letter-spacing: -.03em; }
.nf-app span span { display: block; color: var(--app-ink); font-size: var(--t-small); line-height: 1.35; margin-top: 2px; }
.nf-app:hover .icon-link { transform: translateY(-4px) scale(1.06); }
.is-match .nf-app { outline: 3px solid var(--enzian); outline-offset: 3px; }
.nf-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); }
.nf-links a { font-weight: 600; }
:is(.nf-app:hover, .nf-app:focus-visible) .ic-arc { stroke-dashoffset: 18; }
:is(.nf-app:hover, .nf-app:focus-visible) .ic-dot { transform: rotate(295deg); }
:is(.nf-app:hover, .nf-app:focus-visible) .ic-knob { transform: translateX(80px); }
:is(.nf-app:hover, .nf-app:focus-visible) .ic-trail { transform: scaleX(1.3); }
:is(.nf-app:hover, .nf-app:focus-visible) .ic-key { animation: key-press .75s var(--ease) var(--kd) both; }

/* ---------- Workshop, Lizenz, Danke ---------- */
.workshop { --field: #e3e9f8; --app-ink: #15389a; }
.btn-quiet { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px #d6d6d1; }
.btn-quiet:hover { background: var(--paper); color: var(--enzian); box-shadow: inset 0 0 0 1px var(--enzian); }
.is-soon { opacity: .45; cursor: default; pointer-events: none; }

.workshop-band { padding-bottom: var(--section); }
.ws-band-inner { background: #e3e9f8; border-radius: 24px; padding: clamp(28px, 4vw, 64px); row-gap: 24px; align-items: end; }
.ws-band-inner h2 { grid-column: 1 / span 6; font-size: var(--t-h3); font-weight: 760; letter-spacing: -.045em; line-height: 1; }
.ws-band-inner > div { grid-column: 8 / -1; display: grid; gap: 16px; justify-items: start; }
.ws-band-price { color: var(--ink-2); }
.ws-band-price strong { color: var(--ink); }

.workshop-hero .ws-icons { grid-column: 1 / -1; }
/* Längere Überschriften als ein App-Name: kleiner, damit nichts abgeschnitten wird. */
:is(.workshop-hero, .license-hero, .thanks-hero) h1 { font-size: clamp(2.5rem, 7.2vw, 7.5rem); }
.ws-icons .icon-link { width: clamp(56px, 6vw, 88px); height: clamp(56px, 6vw, 88px); }

.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-bottom: var(--section); }
.plan-card { grid-column: span 4; background: var(--paper-2); border-radius: 24px; padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 18px; align-content: start; justify-items: start; }
.plan-name { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.plan-price { font-size: var(--t-small); color: var(--ink-2); }
.plan-price strong { display: block; font-size: var(--t-h3); font-weight: 760; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.plan-notes { grid-column: span 4; display: grid; gap: 12px; align-content: end; color: var(--ink-2); font-size: var(--t-small); }
.plan-soon { color: var(--enzian); font-weight: 600; }

.single { padding-block: var(--section); row-gap: 32px; }
.single-head { grid-column: 1 / span 5; display: grid; gap: 12px; align-content: start; }
.single-head p { color: var(--ink-2); max-width: 34ch; }
.single-list { grid-column: 7 / -1; display: grid; gap: 10px; }
.single-item { background: var(--field); border-radius: 20px; padding: 20px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; }
.single-item h3 { font-size: 1.25rem; font-weight: 720; letter-spacing: -.02em; }
.single-item div p { color: var(--app-ink); font-size: var(--t-small); margin-top: 2px; }
.single-price { grid-column: 3; grid-row: 1; text-align: right; font-size: var(--t-small); color: var(--app-ink); white-space: nowrap; }
.single-price strong { color: var(--ink); font-size: 1.25rem; }
.single-item .text-link { grid-column: 2 / -1; font-size: var(--t-small); justify-self: start; }

.lic-notice { background: #e3e9f8; color: #15389a; border-radius: var(--radius-control); padding: 14px 18px; font-weight: 600; max-width: 46ch; }
.lic-notice.is-error { background: #fbe4e1; color: #8a1f12; }
.lic-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); padding-bottom: var(--section); align-items: start; }
.lic-form, .lic-appstore { background: var(--paper-2); border-radius: 24px; padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 14px; justify-items: start; }
.lic-appstore { background: none; border: 1px solid #e3e3df; }
.lic-form h2, .lic-appstore h2 { font-size: var(--t-lead); font-weight: 720; letter-spacing: -.03em; line-height: 1.1; }
.lic-form p, .lic-appstore p { color: var(--ink-2); }
.lic-form label { display: grid; gap: 6px; width: 100%; font-size: var(--t-small); font-weight: 600; }
.lic-form input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-control);
  border: 1px solid #d6d6d1; background: var(--paper); font: 400 var(--t-text)/1.2 var(--font); color: var(--ink);
}
.lic-form input[type="email"]:focus-visible { outline: 2px solid var(--enzian); outline-offset: 1px; border-color: var(--enzian); }

.thanks-key { padding-bottom: var(--section); display: grid; gap: 14px; justify-items: start; }
.thanks-key > * { max-width: 760px; }
.thanks-key[hidden], .lic-notice[hidden] { display: none; }
.th-plan { font-weight: 700; color: var(--enzian); }
.th-label { color: var(--ink-2); font-size: var(--t-small); }
.key-box { width: 100%; background: var(--paper-2); border-radius: var(--radius-control); padding: 18px 20px; }
.key-box code { font: 600 clamp(1.05rem, 2.2vw, 1.5rem)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; word-break: break-all; user-select: all; }
.th-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.th-where { color: var(--ink-2); display: grid; gap: 6px; margin-top: 8px; list-style: disc; padding-left: 1.2em; }

/* ---------- Druck ---------- */
@media print {
  .site-head, .skip, .contact .mark-box, .stage, .icon-row, .app-stage { display: none !important; }
  .contact { background: none; color: var(--ink); padding-top: 32px; }
  .contact a { color: var(--ink); }
  .js [data-reveal], .js .split .line > span { opacity: 1 !important; transform: none !important; }
  .legal-head, .features h2 { position: static; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot.next:last-child:nth-child(3n+1), .slot.next:last-child:nth-child(3n+2) { grid-column: auto; }
  .slot.next:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .team-word, .team-row:nth-child(even of .team-row) .team-word { grid-column: 1 / -1; }
  .team-person { grid-column: 1 / span 8; padding-bottom: 0; }
  .team-intro, .team-foot .facts { grid-column: 1 / -1; }
  .app-facts .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-lead, .hero-side { grid-column: 1 / -1; grid-row: auto; }
  .hero-side { order: 3; }
  .app-hero h1, .app-hero-copy { grid-column: 1 / -1; }
  .features h2, .feature-list, .faq h2, .faq-list, .legal-head, .prose, .wish-copy, .wish-panel { grid-column: 1 / -1; }
  .features h2, .legal-head { position: static; }
  .values-list { grid-template-columns: minmax(0, 1fr); }
  .nf-copy h1, .nf-text { grid-column: 1 / -1; }
  .nf-apps { grid-template-columns: minmax(0, 1fr); }
  .ws-band-inner h2, .ws-band-inner > div, .single-head, .single-list { grid-column: 1 / -1; }
  .plan-card { grid-column: span 6; }
  .plan-notes { grid-column: 1 / -1; }
  .lic-forms { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .cards, .others .cards { grid-template-columns: minmax(0, 1fr); }
  .nav-links .hide-s { display: none; }
  .btn { min-height: 44px; padding: 0 16px; }
  .hero h1 { font-size: 11.6vw; }
  .team-person { grid-column: 1 / -1; }
  .facts, .app-facts .facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plan-card { grid-column: 1 / -1; }
  .single-item { grid-template-columns: 36px minmax(0, 1fr); }
  .single-price { grid-column: 2; grid-row: auto; text-align: left; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stage.wide .thumb { aspect-ratio: 4 / 3; }
  .stage.wide .shot.portrait { width: 24%; }
  .stage.wide .shot.portrait.a { --left: 22%; }
  .stage.wide .shot.portrait.b { width: 28%; height: 56%; }
  .stage.wide .shot.portrait.c { --left: 78%; }
  .stage.wide .shot.landscape.a, .stage.wide .shot.landscape.c { display: none; }
  .stage.wide .shot.landscape.b { width: 70%; top: 12%; }
  summary { padding: 18px; }
  .answer { padding: 0 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .js [data-reveal], .js .split .line > span, .js .team-row .mask > span, .js .team-row .team-person, .js .big-mark span, .js .icon-row li { opacity: 1 !important; transform: none !important; }
  .app-card .shot { transition: opacity .3s linear !important; }
}