/* Entwurf D · Hybrid — Plakat-Look aus C, Header und Klarheit aus A. Anton / Work Sans. */
@font-face { font-family: "Anton"; src: url("fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fonts/work-sans-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --surface: #f2f2f2;
  --ink: #000000;
  --muted: #4d4d4d;
  --accent: #a7ff9c;
  --accent-ink: #000000;
  --grey: #c5c5c5;
  --mint: #a7ff9c;
  --orange: #ff6831;
  --pro: #000000;
  --f-display: "Anton", Impact, sans-serif;
  --f-text: "Work Sans", system-ui, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1rem + 1.1vw, 2rem);
  --step-head: clamp(3rem, 1.4rem + 4.8vw, 6.5rem);
  --bar: 64px;
  --m: clamp(16px, 1.6vw, 24px);
  --r: 0px;
  --r-kp: 0px;
  --kp-dim: #161616;
  --kp-dim-ink: #7a7a7a;
  --kp-gap: #000;
  --kp-hub: #000;
  --focus: #000;
}
html { scroll-padding-top: calc(var(--bar) + 16px); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.88; }
h2 { font-size: var(--step-head); text-wrap: balance; }
p, li { text-wrap: pretty; }
.nowrap { white-space: nowrap; }   /* keine einzelnen Wörter allein in der letzten Zeile */
b, strong { font-weight: 600; }
main p { max-width: 64ch; }

/* Knöpfe: eine Form, eckig */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: 0; border-radius: 0; font-weight: 600; font-size: var(--step-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--step-small); }
.btn-ink, .btn-solid { background: #000; color: #fff; }
.btn-line, .btn-quiet { background: #fff; color: #000; }
.btn-mint { background: var(--mint); color: #000; }
@media (hover: hover) {
  .btn-ink:hover, .btn-solid:hover { background: var(--orange); color: #000; }
  .btn-line:hover, .btn-quiet:hover { background: var(--mint); }
  .btn-mint:hover { background: #fff; }
}

/* Sticky-Header mit Hexagon (aus Entwurf A) */
.bar { position: sticky; top: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: 28px; padding: 0 var(--m); background: #000; color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: var(--step-body); letter-spacing: -0.02em; }
.brand svg { width: 19px; height: 21px; }
.bar-links { display: flex; gap: 26px; margin-left: auto; font-size: var(--step-small); }
.bar-links a { color: #fff; text-decoration: none; }
@media (hover: hover) { .bar-links a:hover { color: var(--mint); } }

/* Hero: klare Aussage oben links, der Name quer durch, ein gekipptes Foto */
.hero { position: relative; height: max(calc(100svh - var(--bar)), 620px); overflow: hidden; }
.hero-copy { position: absolute; left: var(--m); top: clamp(24px, 4svh, 48px); z-index: 3; display: grid; gap: 18px; justify-items: start; max-width: 34rem; }
.hero-copy h1 { font-family: var(--f-text); font-weight: 600; text-transform: none; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.25rem, 1.1rem + 2.7vw, 3.75rem); max-width: 15ch; }
.hero-copy p { font-size: var(--step-body); line-height: 1.45; max-width: 34ch; }
.hero-jump { position: absolute; right: var(--m); top: clamp(24px, 4svh, 48px); display: flex; gap: 22px; font-size: var(--step-small); font-weight: 600; }
.hero-jump a { text-decoration: none; }
@media (hover: hover) { .hero-jump a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; } }
.name { position: absolute; left: var(--m); right: var(--m); bottom: clamp(28px, 6svh, 64px); }
.name svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; will-change: transform; }
.name text, .foot-word text { font-family: var(--f-display); font-size: 277px; fill: currentColor; }
/* Großes Marken-Hexagon; der Name rutscht nach unten und ist zur Hälfte angeschnitten */
.hero-hex {   /* obere Hälfte, mit Luft über dem Namen; Breite begrenzt durch die Höhe */
  --nm: calc((100vw - 2 * var(--m)) * 0.13);                       /* sichtbarer Teil von MNMEDIA */
  --hx: min(60vw, calc((max(100svh - var(--bar), 620px) - var(--nm) - 150px) * 1.66));
  position: absolute; z-index: 1; width: var(--hx); left: calc(58% - var(--hx) / 2); bottom: calc(var(--nm) + 2.4vw); }
.hero-hex svg { display: block; width: 100%; height: auto; }
.hero .name { z-index: 2; bottom: 0; transform: translateY(47%); }

/* Rad-Demo: nur 8A, ein Klick zeigt alle Arten */
.demo { --field: var(--mint); position: relative; min-height: calc(100svh - var(--bar)); overflow: hidden; background: var(--field); }
.demo-text { position: relative; z-index: 2; display: grid; gap: 18px; align-content: start; justify-items: start; width: min(46%, 640px); padding: clamp(40px, 5vw, 72px) var(--m) 56px; }

.demo-lede { font-size: var(--step-body); max-width: 34ch; }
.kp-moves { gap: 0; width: 100%; }
.kp-move { grid-template-columns: 10px 9.5em 1fr; gap: 12px; padding: 6px 10px 6px 0; }
.kp-bar { border-radius: 0; background: var(--c); }
.kp-name { font-size: var(--step-body); }
.kp-hint { color: #1f1f1f; }
.kp-pro { color: #1a1200; background: #ffcc33; padding: 0 6px; font-weight: 600; }   /* Pro-Kennung wie in der App */
.kp-chip { background: var(--c); color: var(--ink-c); padding: 6px 10px; }
.demo-note { font-size: var(--step-small); padding: 6px 0; }
.demo-note.is-flash { animation: flash 900ms var(--ease-out); }
@keyframes flash { 0% { background: #000; color: var(--mint); padding-left: 10px; } 100% { background: transparent; color: #000; padding-left: 0; } }
.demo.is-ready:not(.is-on) .kp-move { opacity: 0; transform: translate3d(0, 10px, 0); }
.demo.is-ready .kp-move { transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
.demo.is-ready:not(.is-on) .demo-after { visibility: hidden; }
.demo-go[hidden] { display: inline-flex; visibility: hidden; }
.demo-text > h2 { grid-row: 1; } .demo-lede { grid-row: 2; } .demo-go, .demo-text > .kp-moves { grid-row: 3; grid-column: 1; align-self: start; }
.demo-note { grid-row: 4; } .demo-after { grid-row: 5; }
.demo-wheel { position: absolute; z-index: 1; right: -7vw; top: calc((100svh - var(--bar)) / 2); width: min(calc((100svh - var(--bar)) * .94), 60vw); transform: translateY(-50%); --kp-gap: var(--field); }   /* mittig im ersten Bildschirm des Abschnitts – nach dem Scrollen auf 8A ganz sichtbar */
.demo-wheel svg { width: 100%; height: auto; }
.demo-wheel .kp-seg text { font-size: 13px; }
.demo-wheel .kp-seg[aria-disabled="true"] { cursor: default; }
.demo-wheel .kp-seg path:first-child { transition: fill 360ms var(--ease-out); }
/* Rad wie in der App (Look Industrial, dunkel): neutrale Flächen + Farbkante, Mitte weiß */
.demo-wheel { --kp-hub: #fff; --kp-hub-ink: #000; }
.demo-wheel .kp-seg[data-ring="B"] path:first-child { fill: #2b2b2b; }
.demo-wheel .kp-seg[data-ring="A"] path:first-child { fill: #1b1b1b; }
.demo-wheel .kp-seg text { fill: #e8e8e8; font-weight: 600; }
.demo-wheel .kp-hub-t { font-family: var(--f-display); font-weight: 400; font-size: 40px; letter-spacing: 0; }
.demo-wheel .kp-seg path.kp-stripe { stroke: none; pointer-events: none; transition: opacity 550ms var(--ease-out); }
.demo.is-on .kp-stripe { opacity: 0; }
.kp-cue path:first-child { fill: #fff; animation: cue-w 1.3s var(--ease-in-out) infinite alternate; }
@keyframes cue-w { from { fill: #ffffff; } to { fill: #8f8f8f; } }
.demo-wheel .kp-cue text { fill: #000; font-weight: 700; }
@keyframes cue { from { opacity: 1; } to { opacity: 0.5; } }
.demo-wheel .kp-hub-t.is-cue { font-size: 26px; fill: #000; }
.kp-cue:focus-visible path { stroke: #000; stroke-width: 6; }

/* Mosaik: wenige Kacheln, jede mit einer Aussage */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 8px; padding: 8px; background: #fff; }
.tile { position: relative; overflow: hidden; padding: 24px; display: grid; align-content: start; gap: 14px; }
.t-head { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--surface); }

.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.t-film { grid-column: 7 / 13; grid-row: 1 / 6; padding: 0; background: #000; }
.t-film .film, .t-film video { width: 100%; height: 100%; object-fit: cover; }
.film { position: relative; }
.film-sound { position: absolute; left: 16px; bottom: 16px; min-height: 44px; padding: 0 16px; border: 0; background: var(--mint); color: #000; font-weight: 600; cursor: pointer; }
.t-fig { grid-column: 1 / 4; grid-row: 4 / 6; background: var(--orange); }
.fig { font-family: var(--f-display); font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: 0.9; }
.t-run { grid-column: 4 / 7; grid-row: 4 / 6; background: #000; color: #fff; }
.t-run p { font-size: var(--step-lead); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.t-pic { padding: 0; background: #000; }
.t-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.t-bw img { filter: grayscale(1) contrast(1.15); }
.t-dual { grid-column: 1 / 7; grid-row: 6 / 9; }
.t-list { grid-column: 7 / 10; grid-row: 6 / 9; background: var(--mint); }
.t-list ul { display: grid; gap: 8px; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; }
.t-bw { grid-column: 10 / 13; grid-row: 6 / 9; }

/* Die Apps: ein Verb pro Bildschirm, rechts die echte App */
.verbs-head { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 64px; align-items: end; padding: clamp(72px, 9vw, 140px) var(--m) clamp(40px, 5vw, 72px); background: #000; color: #fff; }
.verbs-head p { font-size: var(--step-lead); line-height: 1.3; }
.verb { position: relative; height: 150svh; min-height: 960px; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46vw); column-gap: 32px; }
.v1 { background: #000; color: #fff; }
.v2 { background: var(--orange); color: #000; }
.v3 { background: #000; color: var(--mint); }
.verb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.45) contrast(1.1); }
.v2 .verb-bg { filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; opacity: 0.8; }
.v3 .verb-bg { filter: grayscale(1) brightness(0.35) contrast(1.15); }
.verb-w { position: sticky; top: calc(var(--bar) + 12svh); z-index: 2; margin-top: 22svh; grid-column: 1; grid-row: 1; align-self: start; padding-left: var(--m); }
.verb-word { display: block; font-size: clamp(6rem, 2rem + 13vw, 15rem); line-height: 0.8; }
.verb-s { position: relative; max-width: 34ch; display: grid; gap: 10px; margin-top: 28px; padding: 16px 18px; margin-left: -18px; font-size: var(--step-body); line-height: 1.45; }
.v1 .verb-s, .v3 .verb-s { background: #000; color: #fff; }
.v2 .verb-s { background: var(--orange); }
.verb-s a { font-weight: 600; color: inherit; }
.verb-media { position: sticky; top: calc(var(--bar) + 8svh); z-index: 1; margin-top: 22svh; grid-column: 2; grid-row: 1; align-self: start; padding-right: var(--m); display: grid; }
.verb-media .shot, .verb-media .film { width: 100%; }
.verb-media video { width: 100%; height: auto; display: block; background: #000; }
.shot-2 { width: 58% !important; justify-self: end; margin: -14% -8px 0 0; }
.v1 .shot-2 { width: 34% !important; }
.media-note { justify-self: end; margin-top: 12px; padding: 4px 8px; font-size: 0.875rem; background: #000; color: #fff; }

/* Panels: Spickzettel, Warteliste, Über mich */
.panel { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 4vw, 72px); padding: clamp(64px, 8vw, 120px) var(--m); align-items: center; }

.p-grey { background: var(--grey); }
.p-white { background: #fff; align-items: start; }
.p-orange { background: var(--orange); align-items: start; }
.panel-text { display: grid; gap: 20px; max-width: 40rem; }
.panel-text p { font-size: var(--step-body); }
.panel-pic { transform: rotate(-3deg); }
.panel-pic img { width: 100%; }
.about-l { display: grid; gap: 40px; align-content: start; }
.cutout { width: min(78%, 460px); transform: rotate(3deg); margin: 0 0 0 4%; }
.cutout img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.f-row input[type=email] { border: 3px solid #000; border-radius: 0; background: #fff; color: #000; height: 54px; }
.p-white .f-row input[type=email] { background: var(--surface); }
.f-check { color: #000; }
.f-interest legend { color: #000; }
.f-check input, .f-interest input { accent-color: #000; }
.wl-status.ok { background: var(--mint); padding: 8px 12px; }
.wl-status.err { background: #000; color: #fff; padding: 8px 12px; }

/* Ein Wort ist der Knopf */
.cta { position: relative; display: block; height: max(80svh, 46vw); min-height: 380px; overflow: hidden; background: var(--mint); color: #000; text-decoration: none; }
.cta-s { position: absolute; left: var(--m); top: 24px; max-width: 30ch; font-size: var(--step-body); font-weight: 600; line-height: 1.3; }
.cta-arrow { position: absolute; right: var(--m); top: 24px; width: 48px; height: 48px; transition: transform 200ms var(--ease-out); }
.cta-w { position: absolute; left: var(--m); bottom: 20px; font-family: var(--f-display); text-transform: uppercase; line-height: 0.8; font-size: 41vw; letter-spacing: -0.01em; }
@media (hover: hover) { .cta:hover { background: #000; color: var(--mint); } .cta:hover .cta-arrow { transform: translate(4px, -4px); } }
.cta:focus-visible { outline-offset: -6px; }

/* Fuß: schwarz, Hexagon, Name angeschnitten */
.foot { position: relative; overflow: hidden; background: #000; color: #fff; padding: clamp(48px, 6vw, 96px) var(--m) 0; display: grid; }
.foot-top { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; }
.foot-inv { display: grid; gap: 24px; justify-items: start; }
.brand-foot { font-size: 1.25rem; }
.foot-h { font-family: var(--f-display); text-transform: uppercase; font-size: var(--step-head); line-height: 0.9; }
.foot-links { display: grid; gap: 8px; justify-self: end; align-content: start; font-size: var(--step-body); }
.foot-links a, .foot-legal a { color: inherit; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover, .foot-legal a:hover { color: var(--mint); } }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: clamp(80px, 12vw, 180px) 0 12px; font-size: var(--step-small); }
.foot-legal-l { display: flex; gap: 20px; }
.credits { padding: 0 0 12px; font-size: var(--step-small); line-height: 1.5; color: #c9c9c9; }
.credits a { color: inherit; }
.credits summary { cursor: pointer; width: max-content; }
.credits p { margin-top: 6px; max-width: 70ch; font-size: var(--step-body); }
.foot-word { width: 100%; height: auto; margin-bottom: -9vw; overflow: visible; transform-origin: 50% 100%; }

@media (max-width: 1100px) {
  .bar-links { display: none; }
  .bar .btn { margin-left: auto; }
}
@media (max-width: 860px) {
  :root { --bar: 56px; --m: 20px; }
  .hero { height: auto; min-height: calc(100svh - var(--bar)); display: grid; align-content: start; gap: 20px; padding: 24px var(--m) 0; }
  .hero-copy, .hero-jump, .name { position: static; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { font-size: 10.5vw; }
  .hero-copy .btn { width: 100%; }
  .hero-jump { display: none; }
  .hero { min-height: 0; }
  .hero-hex { position: relative; order: 2; left: auto; bottom: auto; width: 92%; justify-self: center; margin-top: 28px; }
  .hero .name { order: 3; transform: none; margin-top: 6px; margin-bottom: calc((100vw - 2 * var(--m)) * -0.112); }
  .demo { min-height: 0; }

  .demo { display: flex; flex-direction: column; padding: 40px 0 48px; }
  .demo-text { display: contents; }
  .demo-text > * { margin-left: var(--m); margin-right: var(--m); }
  .demo-text h2 { order: 1; margin-bottom: 16px; }
  .demo-lede { order: 2; margin-bottom: 18px; }
  .demo-go { order: 3; align-self: flex-start; }
  .demo-go[hidden] { display: inline-flex; visibility: hidden; }
  .demo-wheel { order: 4; position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: none; margin: 20px 0 8px; }
  .demo-text .kp-moves { order: 5; width: auto; }
  .demo-note { order: 6; }
  .demo-after { order: 7; margin-top: 8px; }
  .demo.is-ready:not(.is-on) .kp-moves, .demo.is-ready:not(.is-on) .demo-after { display: none; }
  .kp-move { grid-template-columns: 10px 1fr; }
  .kp-chips { grid-column: 2; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 6px; padding: 6px; }
  .tile { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .t-film { aspect-ratio: 16 / 9; }
  .t-fig { grid-column: 1 !important; aspect-ratio: 1; }
  .t-run { grid-column: 2 !important; aspect-ratio: 1; }
  .t-run p { font-size: var(--step-body); }
  .t-pic { aspect-ratio: 16 / 10; }
  .t-list ul { grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: var(--step-body); }
  .t-list { min-height: 220px; }
  .verbs-head { grid-template-columns: 1fr; }
  .verb { grid-template-columns: 1fr; height: auto; min-height: 0; padding: 56px 0 64px; }
  .verb-w, .verb-media { position: relative; top: auto; margin-top: 0; grid-column: 1; grid-row: auto; padding: 0 var(--m); }
  .verb-word { font-size: 26vw; }
  .verb-s { max-width: none; }
  .verb-media { margin-top: 24px; }
  .panel, .foot-top { grid-template-columns: 1fr; }
  .foot-links { justify-self: start; }
  .cta { height: 46svh; min-height: 300px; }
  .cta-w { font-size: 50vw; }
  .cta-s { right: calc(var(--m) + 56px); max-width: none; font-size: var(--step-body); }
  .cta-arrow { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-cue path { animation: none !important; }
  .verb { height: auto; }
}

/* ═══ Unterseiten ═══════════════════════════════════════════════ */
.p-mint { background: var(--mint); color: #000; }
.p-black { background: #000; color: #fff; }
.t-black { background: #000; color: #fff; }
.t-mint { background: var(--mint); color: #000; }
.t-orange { background: var(--orange); color: #000; }
.t-grey { background: var(--grey); color: #000; }
.t-white { background: #fff; color: #000; }
.bar-links a[aria-current="page"] { color: var(--mint); }
.more { font-weight: 600; color: inherit; }
.more::after { content: " →"; }

/* Seitenkopf: der Produktname über die ganze Breite */
.phero { padding: clamp(32px, 4vw, 56px) var(--m) clamp(48px, 6vw, 88px); overflow: hidden; }
.phero-name { font-size: clamp(4rem, 1rem + 13.2vw, 16rem); line-height: 0.82; white-space: nowrap; margin-left: -0.02em; }
.phero-long { font-size: clamp(3rem, 0.6rem + 9.4vw, 11.5rem); }
.phero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 4vw, 72px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.phero-copy { display: grid; gap: 22px; justify-items: start; align-content: start; }
.phero-lede { font-size: var(--step-lead); line-height: 1.3; max-width: 38ch; }   /* drei Zeilen: drei Züge · ELEVEN · Energie */
.phero-meta { font-size: var(--step-body); }
/* „EIGHT“: unser Alleinstellungsmerkmal – Anton in Versalien, Mint auf Schwarz, wischt beim Laden herein */
.caps-eight { display: inline-block; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.32em; line-height: .9; padding: .06em .16em .02em; margin: 0 .04em; background: #000; color: var(--mint); vertical-align: -.08em; animation: wipe 640ms var(--ease-out) 300ms both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Energie-Leiter: die Wege aus 8A von der tiefsten Absenkung bis zum größten Schub. Neutral mit Farbkante, beim Scrollen färben sie sich ein */
.ladder { margin: clamp(8px, 2vw, 28px) 0 0; width: min(100%, 660px); }
.ladder-keys, .ladder figcaption { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) 10px minmax(0, 1fr); gap: 6px; }
.ladder-key.is-mood { grid-column: 12; }   /* Mood steht abseits: ändert das Gefühl, nicht die Energie */
.ladder-key { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #1b1b1b; color: #e8e8e8; font-family: var(--f-display); font-size: clamp(.95rem, .6rem + .7vw, 1.35rem); line-height: 1; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.ladder-key::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--edge); transition: opacity 180ms var(--ease-out); }
.ladder-key.on { background: var(--c); color: var(--ink); }
.ladder-key.on::after { opacity: 0; }
.ladder figcaption { margin-top: 10px; font-size: var(--step-small); font-weight: 600; white-space: nowrap; }
.ladder figcaption span { grid-row: 1; }
.ladder .cap-drop { grid-column: 1 / 6; } .ladder .cap-lift { grid-column: 5 / 11; text-align: right; } .ladder .cap-mood { grid-column: 11 / 13; text-align: right; }
.ladder .cap-lift::after { content: " →"; } .ladder .cap-drop::before { content: "← "; }
@media (max-width: 600px) { .ladder-keys, .ladder figcaption { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ladder-key.is-mood { grid-column: 6; } .ladder .cap-drop { grid-column: 1 / 4; } .ladder .cap-lift { grid-column: 2 / 5; } .ladder .cap-mood { grid-column: 6; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .caps-eight { animation: none; } }
/* Demo-Hinweis: zwei Zeilen, Core und Pro mit ihren Farbkästen */
.demo-note { font-size: var(--step-body); max-width: 40ch; display: grid; gap: 4px; padding: 8px 0 0; }   /* gleiche Größe wie der Text über der Demo */
.dn-line { display: block; }
.dn-tag { font-weight: 600; padding: 0 6px; }   /* wie die Pro-Kennung in der Liste: ganz normal im Satz */
/* Dezenter Scroll-Hinweis im Hero (statt Knöpfen): führt zum Video, nicht daran vorbei */
.phero-next { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; color: inherit; font-weight: 600; font-size: var(--step-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.phero-next span { display: inline-block; text-decoration: none; animation: nudge 2.4s var(--ease-out) 1.2s infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(0, 5px, 0); } }
@media (prefers-reduced-motion: reduce) { .phero-next span { animation: none; } }
/* Nach der Demo: Textlink statt Knopf – Einladung, kein Abbiegen */
.demo-more { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.demo-more span { display: inline-block; text-decoration: none; transition: transform 180ms var(--ease-out); }
.demo-more:hover span { transform: translate3d(3px, 0, 0); }
.phero-pic { justify-self: end; width: min(100%, 560px); transform: rotate(3deg); }
.phero-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.phero-media { display: grid; }
.phero-media video { width: 100%; height: auto; display: block; background: #000; }
.p-black .btn-line { background: #fff; }
.p-black .media-note { background: var(--mint); color: #000; }
.filmband { background: #000; padding: 0; scroll-margin-top: -16px; }   /* Hero-Hinweis: Video bündig unter dem Kopf */
.filmband .film video { width: 100%; height: auto; display: block; max-height: 88svh; object-fit: cover; }
.filmband .film-sound { left: var(--m); bottom: var(--m); }

/* Funktionen: Bild und Textkachel abwechselnd */
.rows { display: grid; gap: 8px; padding: 8px; background: #fff; }
.rows-head { display: grid; grid-template-columns: 7fr 5fr; gap: 20px 64px; align-items: end; padding: clamp(56px, 7vw, 112px) calc(var(--m) - 8px) clamp(32px, 4vw, 56px); }
.rows-head p { font-size: var(--step-lead); line-height: 1.3; }
.row { display: grid; grid-template-columns: 8fr 4fr; gap: 8px; min-height: 420px; }
.row.flip { grid-template-columns: 4fr 8fr; }
.row.flip .row-pic { order: 2; }
.row-pic { background: #000; overflow: hidden; display: grid; place-items: center; }
.row-pic { padding: clamp(16px, 2vw, 32px); }
.row-pic img { width: 100%; height: 100%; max-height: 640px; object-fit: contain; }
.row-pic.is-light { background: var(--surface); }   /* helle App-Aufnahmen */
.row-text { display: grid; align-content: end; gap: 14px; padding: clamp(24px, 2.6vw, 40px); }
.row-text h3 { font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem); line-height: 0.92; }
.row-text p { font-size: var(--step-body); max-width: 36ch; }
.facts4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.facts4 li { display: grid; gap: 8px; align-content: start; min-height: 200px; padding: 24px; }
.facts4 b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 1.2vw, 2.5rem); line-height: 0.95; }
.facts4 span { font-size: var(--step-body); }

/* Live-Wheel */
.try { background: #000; color: #fff; padding: clamp(56px, 7vw, 112px) var(--m); }
.try-head { display: grid; grid-template-columns: 7fr 5fr; gap: 20px 64px; align-items: end; margin-bottom: 32px; }
.try-head p { font-size: var(--step-lead); line-height: 1.3; }
.try-frame { height: min(860px, 88svh); background: #08080e; }
.try-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.try-mobile { display: none; }

/* Preise */
.plans-sec { background: var(--surface); padding: 0 var(--m) clamp(56px, 7vw, 112px); }
.plans-sec .rows-head { padding-left: 0; padding-right: 0; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(28px, 3vw, 48px); }
.plan h3 { font-size: clamp(3rem, 1.4rem + 4vw, 5.5rem); }
.price { font-family: var(--f-display); font-size: clamp(2.5rem, 1.4rem + 2.6vw, 4rem); line-height: 1; }
.price-note { font-weight: 600; margin-top: -8px; }
.plan ul { display: grid; gap: 8px; margin: 4px 0 12px; font-size: var(--step-body); }
.plan li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; }
.plan li::before { content: ""; width: 10px; height: 10px; background: currentColor; transform: translateY(1px); }
/* Stufen wie in der App: flacher Farbblock – Core blau, Pro gold */
.plan h3.tier { display: inline-block; padding: 0.1em 0.16em 0.04em; line-height: 0.92; }
.tier-core { background: #88c4ff; color: #001228; }
.tier-pro { background: #ffcc33; color: #1a1200; }
.plan:has(.tier-core) li::before { background: #88c4ff; }
.plan:has(.tier-pro) li::before { background: #ffcc33; }
.notify { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 8px; padding: clamp(28px, 3vw, 48px); background: var(--mint); scroll-margin-top: calc(var(--bar) + 16px); }
.notify h3 { font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem); line-height: 0.92; margin-bottom: 12px; }

/* Arten-Tabelle */
.types { padding: 0 var(--m) clamp(56px, 7vw, 112px); }
.types .rows-head { padding-left: 0; padding-right: 0; }
.table-scroll { overflow-x: auto; }
.type-table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.type-table th { text-align: left; font-size: var(--step-small); font-weight: 600; padding: 12px 16px; background: #000; color: #fff; }
.type-table td { padding: 16px; vertical-align: middle; }
.type-table tbody tr:nth-child(odd) { background: var(--surface); }
.type-table td:first-child { font-weight: 600; white-space: nowrap; }
.sw { display: inline-block; width: 12px; height: 28px; margin-right: 12px; vertical-align: middle; background: var(--c); }
.chip { display: inline-block; margin: 2px 6px 2px 0; padding: 4px 10px; font-weight: 700; background: var(--c); color: var(--k); }

/* Fragen */
.faq-sec { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); padding: clamp(56px, 7vw, 112px) var(--m); background: #000; color: #fff; }
.faq { display: grid; gap: 8px; }
.faq details { background: #141414; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative; font-weight: 600; font-size: var(--step-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-size: 2rem; color: var(--mint); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 22px; font-size: var(--step-body); line-height: 1.55; color: #e6e6e6; }
.faq a { color: var(--mint); }
.p-mint .f-row input[type=email] { background: #fff; }

/* Rechtstexte und Pro-Lizenz */
.doc-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: end; padding: clamp(48px, 6vw, 96px) var(--m) clamp(40px, 5vw, 72px); overflow: hidden; }
.doc-pic { justify-self: end; width: min(100%, 440px); transform: rotate(3deg); margin-bottom: -12px; }
.doc-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.p-mint .doc-pic img { filter: none; aspect-ratio: 1; }
.doc-head h1 { font-size: clamp(3rem, 1rem + 6vw, 8rem); line-height: 0.9; max-width: 14ch; }
.doc-lede { margin-top: 24px; font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.doc-lede a { color: inherit; font-weight: 600; }
.doc-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 72px); padding: clamp(40px, 5vw, 72px) var(--m) clamp(72px, 9vw, 140px); }
.doc-toc { position: sticky; top: calc(var(--bar) + 24px); align-self: start; padding: 24px; background: var(--surface); }
.doc-toc p { font-weight: 600; margin-bottom: 12px; }
.doc-toc ol { display: grid; gap: 8px; font-size: var(--step-small); }
.doc-toc a { color: inherit; text-decoration: none; }
@media (hover: hover) { .doc-toc a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.doc { max-width: 72ch; font-size: var(--step-body); line-height: 1.6; }
.doc h2 { font-family: var(--f-text); text-transform: none; font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.2; margin: 44px 0 12px; scroll-margin-top: calc(var(--bar) + 16px); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-family: var(--f-text); text-transform: none; font-weight: 600; font-size: var(--step-body); margin: 24px 0 8px; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { list-style: none; display: grid; gap: 8px; }
.doc li { position: relative; padding-left: 24px; }
.doc li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: #000; }
.doc a:not(.btn) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc .todo { display: inline-block; margin-bottom: 20px; padding: 6px 12px; background: var(--orange); font-weight: 600; }
.doc .btn { margin-top: 12px; }
.ct-form { display: grid; gap: 12px; margin: 20px 0 32px; padding: clamp(20px, 2.4vw, 32px); background: var(--surface); }
.ct-label { font-weight: 600; font-size: var(--step-small); }
.ct-form input, .ct-form textarea { width: 100%; padding: 14px 16px; border: 3px solid #000; border-radius: 0; background: #fff; color: #000; font-size: var(--step-body); }
.ct-form textarea { min-height: 180px; resize: vertical; }
.ct-fine { font-size: var(--step-small); }

/* Bestätigt / 404 */
.state { min-height: calc(100svh - var(--bar)); display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(48px, 7vw, 112px) var(--m); }
.state-text { display: grid; gap: 24px; justify-items: start; }
.state-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.state-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.state-pic:nth-child(1) { transform: rotate(-3deg); } .state-pic:nth-child(4) { transform: rotate(2deg); }
.state-pic:nth-child(2) img, .state-pic:nth-child(3) img { filter: grayscale(1) contrast(1.1); }
.state h1 { font-size: clamp(3.5rem, 1rem + 6vw, 8rem); line-height: 0.88; max-width: 13ch; }
.state p { font-size: var(--step-lead); line-height: 1.35; max-width: 38ch; }

@media (max-width: 860px) {
  .phero-name { font-size: 15.5vw; }
  .phero-long { white-space: normal; font-size: 15.5vw; }
  .phero-grid, .rows-head, .try-head, .notify, .faq-sec, .plans, .doc-wrap { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc-toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .doc-head, .state { grid-template-columns: 1fr; }
  .doc-pic { justify-self: start; width: 70%; }
  .doc { max-width: none; }
  .plans { gap: 24px; }
  .notify { margin-top: 24px; }
  .phero-pic { justify-self: center; width: 86%; }
  .row, .row.flip { grid-template-columns: 1fr; min-height: 0; }
  .row.flip .row-pic { order: 0; }
  .row-pic img { height: auto; max-height: none; }
  .facts4 { grid-template-columns: 1fr 1fr; }
  .facts4 li { min-height: 160px; padding: 18px; }
  .try-frame { display: none; }
  .try-mobile { display: grid; gap: 16px; justify-items: start; }
  .type-table td:first-child { white-space: normal; }
}
@media (max-width: 520px) {
  .facts4 { grid-template-columns: 1fr; }
}

.wl-form + *, .panel-form + * { margin-top: 8px; }
.doc h2 { overflow-wrap: anywhere; hyphens: auto; }

/* ═══ 22.10.2026: Menü (Handy/Tablet), Video hochkant, Einstiegs-Rad ═══ */
.bar { position: sticky; }
.bar-menu { display: none; }
@media (max-width: 1100px) {
  .bar { gap: 10px; }
  .js .bar-menu { display: inline-grid; place-items: center; flex: none; width: 44px; height: 40px; padding: 0; border: 2px solid #fff; background: #000; color: #fff; cursor: pointer; }
  .bar-menu[aria-expanded="true"] { background: var(--mint); border-color: var(--mint); color: #000; }
  .bar-menu:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
}
.bar-menu-i { position: relative; width: 18px; height: 12px; }
.bar-menu-i i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: top 260ms var(--ease-out), transform 260ms var(--ease-out); }
.bar-menu-i i:first-child { top: 1px; }
.bar-menu-i i:last-child { top: 9px; }
.bar-menu[aria-expanded="true"] .bar-menu-i i:first-child { top: 5px; transform: rotate(45deg); }
.bar-menu[aria-expanded="true"] .bar-menu-i i:last-child { top: 5px; transform: rotate(-45deg); }
.bar-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - var(--bar)); overflow-y: auto; padding: 0 var(--m) 24px; background: #000; color: #fff; border-top: 1px solid #262626; }
.bar-panel[hidden] { display: none; }
.bar-panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0 12px; border-bottom: 1px solid #262626; color: #fff; text-decoration: none; }
.bar-panel b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.1rem, 9.5vw, 3.6rem); line-height: 0.95; letter-spacing: 0; }
.bar-panel small { font-size: var(--step-small); color: #9a9a9a; white-space: nowrap; }
.bar-panel a[aria-current="page"] b { color: var(--mint); }
.bar-panel a:active b { color: var(--mint); }
.bar-panel.is-open a { animation: menu-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes menu-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } }
@media (max-width: 380px) { .bar .btn-sm { padding: 0 12px; } }

.filmband .film.is-portrait video { aspect-ratio: 9 / 16; max-height: calc(100svh - var(--bar)); }
.t-film:has(.film.is-portrait) { aspect-ratio: 9 / 16; }

.phero-cycle.is-live { display: grid; gap: clamp(16px, 2vw, 24px); }
.cyc-disc { aspect-ratio: 1; border-radius: 50%; background: #000; padding: 1.6%; }
.cyc-disc svg { display: block; width: 100%; height: auto; }
.cyc-disc .kp-seg { cursor: default; }
.cyc-disc .kp-seg path { transition: fill 320ms var(--ease-out); }
.cyc-disc .kp-seg text { font-size: 13px; transition: fill 320ms var(--ease-out); }
.cyc-disc .kp-seg[data-ring="A"] text { font-size: 12px; }
.cyc-disc .kp-seg.is-pop { animation: seg-pop 520ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes seg-pop { 0% { transform: scale(.86); } 55% { transform: scale(1.06); } 100% { transform: none; } }
@media (hover: hover) { .cyc-disc .kp-seg:hover path { filter: none; } }
.cyc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0; padding: 0 4%; list-style: none; font-size: var(--step-small); font-weight: 600; }
.cyc-legend li { display: flex; align-items: center; gap: 8px; opacity: .4; transition: opacity 300ms var(--ease-out); }
.cyc-legend li::before { content: ""; flex: none; width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #000; transition: background 300ms var(--ease-out); }
.cyc-legend li.on { opacity: 1; }
.cyc-legend li.on::before { background: var(--c); }
.cyc-legend .kp-pro { font-size: 0.75em; font-style: normal; }
.cyc-legend li span { white-space: nowrap; }

/* Rad in App-Maßen (Einstieg + 8A-Demo): Fugen 2,4 px schwarz, Mitte weiß mit Anton */
svg.is-app .kp-seg path { stroke-width: 2.4; }
svg.is-app .kp-hub { fill: #fff; stroke: #fff; stroke-width: 2; }
.demo-wheel svg.is-app .kp-hub-t, .cyc-disc svg.is-app .kp-hub-t { fill: #000; font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: 0; }
.demo-wheel svg.is-app .kp-hub-t.is-cue { font-size: 17px; }
.demo-wheel svg.is-app .kp-seg[data-ring="A"] text { font-size: 12px; }

/* 22.10.2026 (2): Installations-Schritte in der FAQ */
.faq-steps { display: grid; gap: 10px; margin: -8px 22px 0; padding: 0 0 24px; list-style: none; max-width: 62ch; font-size: var(--step-body); color: #e6e6e6; }
.faq-steps li { padding-left: 14px; box-shadow: inset 4px 0 0 var(--mint); line-height: 1.45; }
.faq-steps b { display: block; font-weight: 600; }
.facts-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }

/* ═══ 24.10.2026: Laptop + Handy („Laptop. Phone. Same wheel.“), QR-Code im Ausprobieren ═══ */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(24px, 4vw, 72px); align-items: center; padding: clamp(56px, 7vw, 112px) var(--m) var(--m); background: var(--orange); color: #000; }
.duo-text { display: grid; gap: 24px; justify-items: start; }
.duo h2 span { display: inline-block; margin-top: 0.08em; padding: 0.04em 0.12em 0; background: #000; color: var(--mint); }
.duo-lede { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.duo-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; margin: 0; }
.duo-laptop { grid-column: 1 / 11; grid-row: 2; align-self: end; margin: 0; }
.duo-lid { display: block; padding: clamp(8px, 1.1vw, 16px); background: #000; }
.duo-lid img { display: block; width: 100%; height: auto; }
.duo-base { position: relative; display: block; height: clamp(10px, 1.1vw, 16px); margin: 0 -5%; background: #000; }
.duo-base::after { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 45%; background: #2a2a2a; }
.duo-phone { display: contents; }   /* Bildschirm + Bildunterschrift liegen direkt im Raster */
.duo-screen { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; z-index: 1; position: relative; display: block; aspect-ratio: 720 / 1474; overflow: hidden; border: clamp(6px, 0.75vw, 11px) solid #000; border-radius: clamp(26px, 3vw, 46px); background: #000; }
.duo-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-phone figcaption { grid-column: 5 / 13; grid-row: 3; justify-self: end; margin-top: 12px; font-size: var(--step-small); }
.duo-facts { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "thumb turn" "buy turn"; gap: 8px; margin-top: clamp(8px, 2vw, 32px); }
.duo-thumb { grid-area: thumb; } .duo-buy { grid-area: buy; }
.duo-facts .duo-turn { grid-area: turn; grid-template-columns: minmax(0, 1fr); align-content: space-between; overflow: hidden; }
.duo-facts li { display: grid; gap: 8px; align-content: start; min-height: 0; padding: clamp(24px, 2.4vw, 36px); }
.duo-facts b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 1.2vw, 2.5rem); line-height: 0.95; }
.duo-facts span { font-size: var(--step-body); }
.duo-turn img { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 16px; border: 5px solid #000; border-radius: 16px; background: #000; }
/* „Turn it sideways“: das Handy dreht sich beim Hineinscrollen von hochkant ins Querformat */
.can-rise .duo-turn img { transform: rotate(-90deg) scale(.46); opacity: 0; transition: transform 900ms var(--ease-out) 240ms, opacity 300ms var(--ease-out) 240ms; }
.can-rise .duo-turn.in img { transform: none; opacity: 1; }

.try-qr { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); margin-top: 8px; padding: clamp(18px, 2vw, 28px); background: var(--mint); color: #000; }
.try-qr img { flex: none; width: 132px; height: 132px; padding: 10px; background: #fff; }
.try-qr p { font-size: var(--step-lead); line-height: 1.25; max-width: 40ch; }
.try-howto { color: var(--mint); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo-laptop { grid-column: 1 / 10; }
  .duo-screen { grid-column: 7 / 13; border-radius: 30px; border-width: 7px; }
  .duo-phone figcaption { grid-column: 1 / 13; }
  .duo-facts { grid-template-columns: 1fr; grid-template-areas: "thumb" "turn" "buy"; }
  .duo-facts li { min-height: 0; padding: 20px; }
  .try-qr { display: none; }
}

/* 24.10.2026: Startpreis-Hinweis in der Pro-Karte */
.price-launch { display: inline-block; margin-top: 10px; padding: 6px 10px; background: var(--mint); color: #000; font-size: var(--step-small); font-weight: 600; }

/* 24.10.2026: Positionierung + Hinweis „Your ears decide“ */
.phero-kicker { display: inline-block; margin-bottom: 14px; padding: 6px 12px; background: #000; color: var(--mint); font-weight: 600; font-size: var(--step-body); letter-spacing: 0.01em; }
.ears { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(24px, 4vw, 64px); margin-top: 8px; padding: clamp(24px, 3vw, 48px); background: #000; color: #fff; }
.ears h3 { grid-row: span 2; font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem); line-height: 0.92; color: var(--mint); }
.ears p { font-size: var(--step-body); max-width: 60ch; }
@media (max-width: 860px) { .ears { grid-template-columns: 1fr; } .ears h3 { grid-row: auto; } }