/* webw3rk — Firmen-Website im Idiom von melius.com: heller, gepunkteter
   Hero mit 3D-Bilderfächer und rotierendem Wort, dann nahezu schwarze
   Vollbild-Sektionen mit großen Produktszenen, gestreute Polaroid-Karten,
   helle Preiskarten auf Schwarz, riesige blasse Wortmarke im Footer.
   Schriften: DM Sans (Überschriften) + Geist (Text), selbst gehostet.
   Alles Verhalten liegt in main.js — die CSP erlaubt kein Inline-CSS/-JS. */

/* ---- Selbst gehostete Schriften, Herkunft und Lizenzen: fonts/HERKUNFT.md ---- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin-ext.woff2) format('woff2');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}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format('woff2');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:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist-latin-ext.woff2) format('woff2');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}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist-latin.woff2) format('woff2');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}

/* ---- Tokens ---- */
:root {
  --light: #E9E7E3;          /* heller Grund, gepunktet */
  --light-2: #F4F3F0;
  --dark: #141312;           /* nahezu schwarze Sektionen */
  --dark-2: #1D1B19;         /* Karten auf dunklem Grund */
  --dark-3: #292624;
  --ink: #141312;
  --ink-soft: #5F5B56;
  --paper: #FFFFFF;
  --line: rgba(20, 19, 18, 0.12);
  --line-dark: rgba(255, 255, 255, 0.12);
  --gold: #C5A568;
  --gold-light: #D4B879;
  --gold-ink: #7C6228;
  /* Historische Klassennamen bleiben kompatibel mit den Seitenvorlagen. */
  --orange: var(--gold);
  --orange-2: var(--gold-light);
  --yellow: #E8DDBB;
  --cream-ink: #F1EEE8;
  --cream-soft: rgba(241, 238, 232, 0.66);
  --font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --pill: 999px;
  --r: 12px;
  --r-lg: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--light); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* gepunkteter Grund wie bei melius */
.dotted { background-color: var(--light); background-image: radial-gradient(rgba(20, 19, 18, 0.16) 1px, transparent 1.2px); background-size: 14px 14px; }
.dark { background-color: var(--dark); color: var(--cream-ink); }
.dark.dotted { background-color: var(--dark); background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px); }

/* ---- Typografie ---- */
.display { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; }
.display em { font-style: normal; }
.t-hero { font-size: clamp(42px, 6.4vw, 78px); }
.t-xl { font-size: clamp(36px, 5vw, 64px); }
.t-lg { font-size: clamp(28px, 3.4vw, 44px); }
.t-md { font-size: clamp(22px, 2.4vw, 30px); }
.sub { font-size: 15px; color: var(--ink-soft); max-width: 46ch; line-height: 1.6; }
.dark .sub { color: var(--cream-soft); }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 4px 9px; border-radius: 6px; background: var(--yellow); color: var(--ink); }
.tag--orange { background: var(--orange); color: var(--ink); }
.tag--ghost { background: transparent; border: 1px solid var(--line-dark); color: var(--cream-soft); }

/* ---- Knöpfe ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 0;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, filter .15s ease; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--dark { background: var(--dark); color: var(--cream-ink); }
.btn--light { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn--lg { padding: 14px 22px; font-size: 15px; border-radius: 10px; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }

/* Prompt-Pille (der dunkle Eingabe-Knopf unter der Hero-Überschrift) */
.prompt { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--pill);
  background: var(--dark); color: var(--cream-ink); text-decoration: none; font-size: 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.prompt__go { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.prompt__go svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prompt:hover .prompt__go { transform: translateX(2px); }

/* ---- Schwebende Navigation ---- */
.nav { position: sticky; top: 10px; z-index: 30; pointer-events: none; }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); }
.nav__pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; background: var(--dark); color: var(--cream-ink);
  border-radius: var(--pill); padding: 8px 8px 8px 16px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); position: relative; }
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.brand img { height: 30px; width: auto; display: block; }
.nav__burger { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); cursor: pointer; position: relative; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 9px; width: 14px; height: 1.5px; background: var(--cream-ink); border-radius: 2px; transition: transform .2s; }
.nav__burger span { top: 15px; }
.nav__burger span::before { top: -5px; left: 0; }
.nav__burger span::after { top: 5px; left: 0; }
.nav__menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--dark); border-radius: 16px; padding: 10px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); }
.nav__menu a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--cream-ink); }
.nav__menu a:hover { background: rgba(255,255,255,.08); }
.nav__menu { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.nav__heading { padding: 8px 12px 10px; color: var(--gold-light); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.nav__contents a { padding: 8px 12px; }
.nav__more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-dark); }
.nav__more summary { padding: 10px 12px; color: var(--cream-soft); font-size: 13px; cursor: pointer; }
.nav__more summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; border-radius: 8px; }

.nav.is-open .nav__menu { display: block; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span::after { transform: translateY(-5px) rotate(-45deg); }
.nav__actions { pointer-events: auto; display: flex; gap: 8px; }

/* ---- Hero ---- */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); overflow: hidden; }
.hero__title { max-width: 14ch; margin: 0 auto; }
.hero__title--phrases { max-width: 22ch; }
.rotor { display: inline-grid; grid-template-areas: 'w'; text-align: center; vertical-align: baseline; }
.rotor > span { grid-area: w; transition: opacity .35s ease, transform .35s ease; font-style: italic; color: var(--orange); white-space: nowrap; }
.rotor > span[aria-hidden="true"] { opacity: 0; transform: translateY(.25em); }
.rotor > span[hidden] { display: inline; }
.rotor--phrases { max-width: 100%; }
.rotor--phrases > span { white-space: normal; font-style: normal; color: inherit; }
.rotor--phrases > span:nth-child(1) { --phrase-accent: var(--gold-ink); }
.rotor--phrases > span:nth-child(2) { --phrase-accent: #3E6B45; }
.rotor--phrases > span:nth-child(3) { --phrase-accent: #2B4BD1; }
.rotor--phrases em { color: var(--phrase-accent, var(--orange)); }
.hero__sub { margin: 26px auto 0; font-size: 15px; max-width: 52ch; }
.hero__cta { margin-top: 22px; display: flex; justify-content: center; }
.hero__note { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }

/* Gemeinsamer Einstiegspreis auf Start- und Studio-Seite */
.hero-offer { max-width: 580px; margin: 26px auto 0; padding: 20px 24px 16px; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r-lg); background: var(--light-2); box-shadow: 0 12px 32px -24px rgba(20,19,18,.3); }
.hero-offer__main { display: flex; justify-content: center; align-items: center; gap: 30px; }
.hero-offer__price { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; text-align: left; }
.hero-offer__from { font-size: 14px; color: var(--ink-soft); }
.hero-offer__price strong { font-family: var(--font-display); font-size: clamp(58px, 6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--gold-ink); }
.hero-offer__period { grid-column: 2; font-size: 12px; color: var(--ink-soft); }
.hero-offer__included { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: var(--r); background: var(--yellow); text-align: left; }
.hero-offer__included strong { font-size: 19px; font-weight: 600; }
.hero-offer__included span { font-size: 12px; }
.hero-offer__details { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.hero-offer__terms { margin-top: 4px; font-size: 11px; color: var(--ink-soft); }
@media (max-width: 480px) {
  .hero-offer { padding: 18px 16px 14px; }
  .hero-offer__main { gap: 16px; }
  .hero-offer__included { padding: 10px 12px; }
  .hero-offer__included strong { font-size: 16px; }
}

/* 3D-Bilderfächer: sieben Karten, die sich zur Mitte hin aufrichten */
.fan { position: relative; height: clamp(220px, 32vw, 420px); margin: clamp(18px, 3vw, 36px) calc(-1 * var(--gutter)) 0; perspective: 1400px; perspective-origin: 50% 40%; }
.fan__track { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.4vw, 22px); transform-style: preserve-3d; }
.fan__card { flex: none; border-radius: 10px; overflow: hidden; background: var(--dark); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); transform-style: preserve-3d; }
.fan__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fan__card--phone { width: clamp(84px, 11vw, 158px); aspect-ratio: 420 / 910; border-radius: 14px; padding: 4px; }
.fan__card--phone img { border-radius: 11px; }
.fan__card--desk { width: clamp(180px, 25vw, 360px); aspect-ratio: 1440 / 900; padding: 4px; }
.fan__card--desk img { border-radius: 7px; }
/* Sieben Plätze auf dem Bogen; welche Karte wo steht, verteilt main.js über
   data-pos (Karussell). Ohne Skript gilt die Dokument-Reihenfolge. */
.fan__card { transition: transform .7s cubic-bezier(.22,.8,.3,1), opacity .5s ease; }
.fan__card:nth-child(1), .fan__card[data-pos="1"] { transform: rotateY(48deg) translateZ(-140px) scale(1.15); }
.fan__card:nth-child(2), .fan__card[data-pos="2"] { transform: rotateY(36deg) translateZ(-80px) scale(1.05); }
.fan__card:nth-child(3), .fan__card[data-pos="3"] { transform: rotateY(18deg) translateZ(-20px); }
.fan__card:nth-child(4), .fan__card[data-pos="4"] { transform: translateZ(40px) scale(1.06); z-index: 2; }
.fan__card:nth-child(5), .fan__card[data-pos="5"] { transform: rotateY(-18deg) translateZ(-20px); }
.fan__card:nth-child(6), .fan__card[data-pos="6"] { transform: rotateY(-36deg) translateZ(-80px) scale(1.05); }
.fan__card:nth-child(7), .fan__card[data-pos="7"] { transform: rotateY(-48deg) translateZ(-140px) scale(1.15); }
.fan[data-js] .fan__track { display: block; }
.fan[data-js] .fan__card { position: absolute; top: 50%; left: 50%; margin: 0; }
.fan[data-js] .fan__card--phone { margin-left: calc(-0.5 * clamp(84px, 11vw, 158px)); margin-top: calc(-0.5 * clamp(84px, 11vw, 158px) * 910 / 420); }
.fan[data-js] .fan__card--desk { margin-left: calc(-0.5 * clamp(180px, 25vw, 360px)); margin-top: calc(-0.5 * clamp(180px, 25vw, 360px) * 900 / 1440); }
.fan[data-js] .fan__card[data-pos="1"] { transform: translateX(-4.7em) rotateY(48deg) translateZ(-140px) scale(1.15); }
.fan[data-js] .fan__card[data-pos="2"] { transform: translateX(-3.4em) rotateY(36deg) translateZ(-80px) scale(1.05); }
.fan[data-js] .fan__card[data-pos="3"] { transform: translateX(-1.9em) rotateY(18deg) translateZ(-20px); }
.fan[data-js] .fan__card[data-pos="4"] { transform: translateZ(40px) scale(1.06); }
.fan[data-js] .fan__card[data-pos="5"] { transform: translateX(1.9em) rotateY(-18deg) translateZ(-20px); }
.fan[data-js] .fan__card[data-pos="6"] { transform: translateX(3.4em) rotateY(-36deg) translateZ(-80px) scale(1.05); }
.fan[data-js] .fan__card[data-pos="7"] { transform: translateX(4.7em) rotateY(-48deg) translateZ(-140px) scale(1.15); }
.fan[data-js] .fan__card[data-pos="0"] { transform: translateX(-5.8em) rotateY(60deg) translateZ(-220px) scale(1.2); opacity: 0; pointer-events: none; }
.fan[data-js] .fan__card[data-pos="8"] { transform: translateX(5.8em) rotateY(-60deg) translateZ(-220px) scale(1.2); opacity: 0; pointer-events: none; }
.fan[data-js] .fan__card[data-pos="hidden"] { opacity: 0; pointer-events: none; transform: translateZ(-400px) scale(.8); }
.fan[data-js] { font-size: clamp(60px, 8.2vw, 118px); } /* em-Einheit der Kartenabstände */
.fan[data-js] .fan__card { cursor: pointer; }
.fan__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.fan__nav[hidden] { display: none; }
.fan__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.fan__btn svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fan__btn:hover { background: var(--dark); }
.fan__btn:hover svg { stroke: var(--cream-ink); }
.fan__caption { font-size: 13px; color: var(--ink-soft); min-width: 220px; text-align: center; }
.fan[data-preview] .fan__card { transition: transform .7s cubic-bezier(.22,.8,.3,1), opacity .5s ease, box-shadow .25s ease; }
.fan[data-preview] .fan__track { pointer-events: none; }
.fan[data-preview] .fan__card { pointer-events: auto; user-select: none; }
.fan[data-preview] .fan__card img { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  .fan[data-preview] .fan__card:hover { box-shadow: 0 0 0 3px var(--gold), 0 34px 70px -26px rgba(0,0,0,.65); }
}
.fan-hover { position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100vw - 48px); padding: 16px; border: 1px solid var(--gold); border-radius: var(--r-lg); background: var(--dark); color: var(--cream-ink); box-shadow: 0 26px 100px rgba(0,0,0,.55); pointer-events: none; text-align: center; }
.fan-hover[hidden] { display: none; }
.fan-hover p { font: 500 16px/1.4 var(--font-display); margin-bottom: 12px; }
.fan-hover img { width: auto; height: auto; max-width: min(900px, calc(100vw - 82px)); max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 7px; margin: auto; }
.fan-hover span { display: block; margin-top: 12px; color: var(--cream-soft); font-size: 12px; }
@media (hover: none), (pointer: coarse) { .fan-hover { display: none; } }
.fan[data-preview] .fan__card:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 5px; }
.fan__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px var(--gutter) 0; }
.fan__actions[hidden], .fan__action[hidden] { display: none; }
.fan__action { border: 1px solid var(--line); border-radius: var(--pill); background: var(--light-2); color: var(--ink); padding: 9px 16px; font-size: 13px; cursor: pointer; min-height: 44px; }
.fan__action:hover { background: var(--yellow); }
.fan__action:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.fan-viewer { width: min(1120px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 18px; border: 1px solid var(--line-dark); border-radius: var(--r-lg); background: var(--dark); color: var(--cream-ink); }
.fan-viewer::backdrop { background: rgba(0,0,0,.82); }
.fan-viewer__head, .fan-viewer__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fan-viewer__head h2 { font: 500 18px/1.3 var(--font-display); min-width: 0; }
.fan-viewer__head .fan__action { flex: none; }
.fan-viewer__image { display: flex; align-items: center; justify-content: center; margin: 18px 0; }
.fan-viewer__image img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 200px); object-fit: contain; border-radius: 8px; }
.fan-viewer__nav p { color: var(--cream-soft); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) {
  .fan-viewer { padding: 12px; }
  .fan-viewer__head { align-items: flex-start; flex-wrap: wrap; }
  .fan-viewer__head h2 { flex: 1 1 140px; font-size: 16px; }
  .fan-viewer__image img { max-height: calc(100dvh - 230px); }
  .fan-viewer__nav .fan__action { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fan[data-js] .fan__card { transition: none; }
}

/* ---- Szenen (dunkle Produkt-Sektionen) ---- */
.scenes { padding: 0; }
.scene-tabs { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: center; padding: 14px var(--gutter) 0; pointer-events: none; }
.pilltabs { pointer-events: auto; display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--dark-2); border: 1px solid var(--line-dark); box-shadow: 0 16px 40px -20px rgba(0,0,0,.7); flex-wrap: wrap; justify-content: center; }
.pilltabs--light { background: var(--paper); border-color: var(--line); }
.pilltabs button { border: 0; background: transparent; color: inherit; padding: 8px 14px; border-radius: var(--pill); font-size: 13px; cursor: pointer; opacity: .8; }
.pilltabs button[aria-selected="true"] { background: var(--orange); color: var(--ink); opacity: 1; }
.pilltabs button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(520px, 78vh, 760px); }
.scene__visual { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: clamp(24px, 4vw, 48px); }
.scene__visual--gold { background: linear-gradient(135deg, var(--gold-light) 0%, #C5A568 45%, #8A7242 100%); }
.scene__visual--sage { background: linear-gradient(135deg, #DCE6C2 0%, #8FA96A 50%, #33523A 100%); }
.scene__visual--sky { background: linear-gradient(135deg, #E8DDBB 0%, #B9AC8A 40%, #3B4BC7 100%); }
.scene__visual .device--phone { width: min(300px, 62%); transform: translateY(8%); }
.scene__visual .device--desktop { width: 100%; max-width: 640px; transform: translateY(12%); }
.scene__panel { padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--dark); }
.scene__panel .tag { align-self: flex-start; }
.scene__frag { font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.scene__frag span { display: inline-block; }
.scene__frag span::after { content: '.'; }
.scene__frag span + span { margin-left: .3em; }
.scene__cards { display: grid; gap: 10px; }
.card-dark { background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: var(--r); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.card-dark h3 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.card-dark p { font-size: 13px; color: var(--cream-soft); }
.card-dark .pin { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 6px; box-shadow: 0 0 0 4px rgba(197, 165, 104, .18); }
.scenes[data-js] .scene:not(.is-active) { display: none; }

/* ---- Feature-Raster auf dunklem Grund ---- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section__head { margin-bottom: clamp(26px, 4vw, 44px); }
.section__head .sub { margin-top: 14px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat { background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: 20px; }
.feat h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
.feat p { font-size: 13.5px; color: var(--cream-soft); }
.feat__icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); display: grid; place-items: center; }
.feat__icon svg { width: 17px; height: 17px; stroke: var(--orange-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Leistungen: gestreute Polaroids um eine Mittelkarte ---- */
.scatter { position: relative; min-height: clamp(560px, 70vw, 760px); display: grid; place-items: center; }
.scatter__center { position: relative; z-index: 2; width: min(460px, 92%); background: var(--paper); border-radius: 14px; padding: 26px 26px 28px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); }
.scatter__center h3 { margin-bottom: 8px; }
.scatter__center p { font-size: 14px; color: var(--ink-soft); }
.scatter__center .btn { margin-top: 16px; }
.scatter__center [data-panel] { display: none; }
.scatter__center [data-panel].is-active { display: block; }
.polaroid { position: absolute; background: var(--paper); padding: 8px 8px 30px; border-radius: 6px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.45); width: clamp(120px, 15vw, 190px); transition: transform .4s ease, opacity .4s ease; }
.polaroid__img { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; display: grid; place-items: center; }
.polaroid__img svg { width: 56%; height: 56%; stroke: #fff; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.polaroid .tag { position: absolute; left: 10px; bottom: 9px; }
.polaroid--web .polaroid__img { background: linear-gradient(140deg, #E8DDBB, #C5A568); }
.polaroid--bi .polaroid__img { background: linear-gradient(140deg, #C9DDF5, #2B4BD1); }
.polaroid--it .polaroid__img { background: linear-gradient(140deg, #D9E9CF, #2F5A3C); }
.polaroid--app .polaroid__img { background: linear-gradient(140deg, #F6E2A8, #8A7242); }
.polaroid--web { left: 6%; top: 8%; transform: rotate(-7deg); }
.polaroid--bi { right: 7%; top: 5%; transform: rotate(6deg); }
.polaroid--it { left: 10%; bottom: 8%; transform: rotate(4deg); }
.polaroid--app { right: 9%; bottom: 6%; transform: rotate(-5deg); }
.scatter[data-active="website"] .polaroid--web, .scatter[data-active="powerbi"] .polaroid--bi, .scatter[data-active="it"] .polaroid--it, .scatter[data-active="studio"] .polaroid--app { transform: rotate(0deg) scale(1.08); z-index: 3; }
.scatter__tabs { display: flex; justify-content: center; margin-top: -10px; position: relative; z-index: 3; }

/* ---- Referenzen als Karten-Reihe ---- */
.refrow { display: flex; gap: 16px; justify-content: center; align-items: stretch; perspective: 1200px; flex-wrap: wrap; }
.ref { width: min(360px, 100%); background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 16px; display: grid; gap: 12px; transform-style: preserve-3d; }
.ref__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ref__name { font-family: var(--font-display); font-size: 26px; }
.ref__kind { font-size: 12px; color: var(--cream-soft); }
.ref__shots { display: grid; grid-template-columns: 1.9fr 1fr; gap: 10px; align-items: end; }
.ref p { font-size: 13px; color: var(--cream-soft); }
.ref a.link { color: var(--cream-ink); }
.ref--ask { display: grid; place-items: center; text-align: center; border-style: dashed; background: transparent; }
.ref--ask p { color: var(--cream-soft); }

/* ---- Geräterahmen (reines CSS) ---- */
.device { margin: 0; }
.device--phone { background: #0E0D0C; border-radius: 34px; padding: 8px; position: relative; box-shadow: 0 40px 70px -35px rgba(0,0,0,.7); }
.device--phone::before { content: ''; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 34%; height: 14px; background: #0E0D0C; border-radius: 10px; z-index: 1; }
.device--phone img { border-radius: 27px; aspect-ratio: 420 / 910; width: 100%; object-fit: cover; object-position: top; background: var(--light-2); }
.device--desktop { background: #0E0D0C; border-radius: 12px; padding: 22px 6px 6px; position: relative; box-shadow: 0 40px 70px -35px rgba(0,0,0,.7); }
.device--desktop::before { content: ''; position: absolute; top: 8px; left: 12px; width: 6px; height: 6px; border-radius: 50%; background: #6b6661; box-shadow: 11px 0 0 #6b6661, 22px 0 0 #6b6661; }
.device--desktop img { border-radius: 6px; aspect-ratio: 1440 / 900; width: 100%; object-fit: cover; object-position: top; background: var(--light-2); }

/* ---- Preise: helle Karten auf Schwarz ---- */
.tiers { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.tier--highlight { box-shadow: 0 0 0 1px var(--orange), 0 30px 80px -40px rgba(197, 165, 104, .35); }
.tier__name { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.tier__for { font-size: 13px; color: var(--ink-soft); min-height: 2.6em; }
.tier__price { font-family: var(--font-display); font-size: 46px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.tier__price small { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.tier__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.tier__box { background: var(--light-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }
.tier__list { display: grid; gap: 6px; font-size: 13px; }
.tier__list li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.tier__list li::before { content: '✓'; color: var(--orange); font-weight: 600; }
.tier .btn { margin-top: auto; }
.tier__wide { margin-top: 14px; background: var(--paper); color: var(--ink); border-radius: 14px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: center; }
.tier__wide .tier__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing__foot { margin-top: 16px; font-size: 13px; color: var(--cream-soft); max-width: 70ch; }
.placeholder-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 12px; border-radius: var(--pill); background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 500; }

/* ---- FAQ auf dunklem Grund ---- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary { cursor: pointer; padding: 16px 0; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--cream-soft); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 18px; color: var(--cream-soft); font-size: 14px; max-width: 70ch; }

/* ---- Kontakt + Footer ---- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact__aside p { color: var(--cream-soft); margin-top: 12px; font-size: 14px; }
.contact__aside .link { color: var(--cream-ink); }
.form { background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; }
.field input, .field select, .field textarea { font: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line-dark); border-radius: 10px; background: var(--dark); color: var(--cream-ink); width: 100%; }
.field select option { color: #000; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field--check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 12.5px; color: var(--cream-soft); }
.field--check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--orange); }
.field--check .link { color: var(--cream-ink); }
.field--hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form__status { font-size: 13px; min-height: 1.3em; color: var(--cream-soft); }
.form__status.is-ok { color: #9BD48A; }
.form__status.is-err { color: #FF9C7A; }
.form.is-done .form__fields { display: none; }
.form__done { display: none; padding: 8px 0; }
.form.is-done .form__done { display: block; }
.form__done h3 { font-family: var(--font-display); font-size: 30px; margin-bottom: 6px; }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.link:hover { text-decoration-color: var(--orange-2); }
.light .link, .dotted:not(.dark) .link { text-decoration-color: rgba(20,19,18,.3); }

.footer { position: relative; overflow: hidden; padding: 48px 0 30px; }
.footer a.footer__brand { display: inline-flex; padding: 0; margin-bottom: 28px; }
.footer__brand img { width: 103px; height: 58px; display: block; }
.footer__brand:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; border-radius: 4px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; position: relative; }
.footer h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 10px; }
.footer a { display: block; font-size: 13px; color: var(--cream-soft); text-decoration: none; padding: 3px 0; }
.footer a.btn { display: inline-flex; color: var(--ink); padding: 10px 16px; }
.footer a:hover { color: var(--cream-ink); }
.footer__box { background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 18px; }
.footer__box p { font-size: 13px; color: var(--cream-soft); margin: 6px 0 12px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; font-size: 12px; color: var(--cream-soft); }
.footer__bottom a { display: inline; padding: 0 10px 0 0; }

/* ---- Rechtstext-Seiten (helles Papier) ---- */
.legal { max-width: 760px; padding: clamp(32px, 6vw, 64px) var(--gutter) 80px; overflow-wrap: anywhere; }
.legal h1 { margin-bottom: 20px; }
.zoom-help h2[id] { scroll-margin-top: 80px; }
.legal h2 { font-family: var(--font-body); font-weight: 600; font-size: 18px; margin: 30px 0 8px; }
.legal p, .legal li { font-size: 14.5px; color: var(--ink); }
.legal p + p { margin-top: 10px; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.legal .todo { background: var(--yellow); color: var(--ink); padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.legal .link { color: var(--ink); }
.footer--legal { padding-top: 40px; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .grid, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene { grid-template-columns: 1fr; min-height: 0; }
  .scene__visual { min-height: 360px; }
  .scene-tabs { top: 58px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .tier__wide { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid, .tiers { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; margin-top: 14px; }
  .fan { height: 210px; }
  .fan__card:nth-child(1), .fan__card:nth-child(7) { display: none; }
  .fan[data-js] .fan__card { display: block; }
  .scatter { min-height: 640px; }
  .polaroid { width: 112px; }
  .polaroid--web { left: 2%; top: 2%; }
  .polaroid--bi { right: 2%; top: 2%; }
  .polaroid--it { left: 2%; bottom: 3%; }
  .polaroid--app { right: 2%; bottom: 3%; }
  .scatter__center { width: min(340px, 78%); }
  .hero__title { max-width: none; }
}

/* ---- Portal: Themen-Akzente, Brotkrume, Themen-Kacheln (seit 2026-09-09) ---- */
/* Jede Themenseite färbt nur das rotierende Wort im Hero und ihre Kachel im
   Portal; Gold-/Sandtöne der Knöpfe bleiben auf allen Seiten gleich. */
body[data-theme="studio"]   { --theme-accent: var(--gold-ink); }
body[data-theme="vereine"]  { --theme-accent: #7C6228; }
body[data-theme="powerbi"]  { --theme-accent: #2B4BD1; }
body[data-theme="websites"] { --theme-accent: #8A7242; }
body[data-theme="prozesse"] { --theme-accent: #3E6B45; }
body[data-theme] .rotor > span { color: var(--theme-accent, var(--orange)); }
body[data-theme] .rotor--phrases > span { color: var(--ink); }
.eyebrow, .eyebrow-dark { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.legal .eyebrow { justify-content: flex-start; }
.crumb { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(20,19,18,.25); }
.crumb:hover { color: var(--ink); border-color: var(--ink); }
.scene__visual--clay { background: linear-gradient(135deg, #EEE5D0 0%, #BFA36E 45%, #76603A 100%); }
.scene__visual--blue { background: linear-gradient(135deg, #D6E2FF 0%, #6C86E8 45%, #1E2F8F 100%); }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { --tile-accent: var(--orange); position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 18px; text-decoration: none; color: var(--ink); min-height: 230px; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tile-accent); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.4); }
.tile:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.tile--studio { --tile-accent: var(--orange); }
.tile--studio .tile__go { color: var(--gold-ink); }
.tile--vereine { --tile-accent: #7C6228; }
.tile--powerbi { --tile-accent: #2B4BD1; }
.tile--websites { --tile-accent: #8A7242; }
.tile--prozesse { --tile-accent: #3E6B45; }
.tile__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tile__name { font-size: 28px; line-height: 1; }
.tile__short { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.tile .tag { align-self: flex-start; }
.tile__go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--tile-accent); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* Produkttour: eine Perspektive, ein Thema, Bild und Erklärung zusammen. */
.product-tour { padding-top: 38px; scroll-margin-top: 80px; }
.product-tour__intro { text-align: center; color: var(--cream-soft); font-size: 14px; }
.product-tour__intro .eyebrow { margin-bottom: 8px; color: var(--gold-light); }
.product-tour__audiences { display: none; justify-content: center; gap: 5px; width: fit-content; max-width: calc(100% - 32px); margin: 24px auto; padding: 6px; border: 1px solid var(--line-dark); border-radius: var(--pill); background: var(--dark-2); }
.product-tour__audiences button { border: 0; border-radius: var(--pill); background: transparent; color: var(--cream-soft); padding: 12px 22px; font-size: 15px; cursor: pointer; }
.product-tour__audiences button[aria-selected="true"] { background: var(--orange); color: var(--ink); }
.product-tour__label-short { display: none; }
.product-tour__toolbar { display: none; align-items: center; justify-content: space-between; gap: 20px; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 22px; }
.product-tour__topics { display: flex; gap: 8px; flex-wrap: wrap; }
.product-tour__topics button { border: 1px solid var(--line-dark); border-radius: var(--pill); background: transparent; color: var(--cream-soft); padding: 9px 16px; font-size: 13px; cursor: pointer; }
.product-tour__topics button[aria-selected="true"] { color: var(--cream-ink); background: var(--dark-2); border-color: var(--gold-light); }
.product-tour__controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.product-tour__controls--bottom { display: none; padding: 0 20px 30px; justify-content: center; }
.product-tour__arrow { width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 50%; background: var(--dark-2); color: var(--cream-ink); font-size: 24px; cursor: pointer; }
.product-tour__arrow:hover { background: var(--orange); color: var(--ink); }
.product-tour__counter { min-width: 154px; text-align: center; font-size: 12px; color: var(--cream-soft); }
.product-tour button:focus-visible, .product-tour__image:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.product-tour__slide:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.product-tour__slide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 640px; touch-action: pan-y; }
.product-tour [hidden] { display: none; }
.product-tour__visual { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 44px); min-width: 0; }
.product-tour__visual--studio { background: linear-gradient(135deg, var(--gold-light), #C5A568 60%, #8A7242); }
.product-tour__visual--lehrkraft { background: linear-gradient(135deg, #DCE6C2, #8FA96A 60%, #33523A); }
.product-tour__visual--kundschaft { background: linear-gradient(135deg, #D6E2FF, #6C86E8 60%, #1E2F8F); }
.product-tour__figure { margin: 0; width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.product-tour__image { display: block; width: 100%; }
.product-tour__image--phone { width: 210px; max-width: 100%; }
.product-tour__image img { aspect-ratio: auto; height: auto; }
.product-tour__figure figcaption { font-size: 11px; text-align: center; color: #171512; }
.product-tour__figure figcaption a { text-underline-offset: 3px; }
/* Beide Arbeitsgeräte bleiben gemeinsam beim jeweiligen Thema sichtbar. */
.product-tour__devices { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 20px; width: 100%; max-width: 900px; }
.product-tour__device-note { grid-column: 1 / -1; text-align: center; font-size: 12px; font-weight: 600; color: #171512; }
.product-tour__devices .product-tour__figure { min-width: 0; gap: 14px; }
.product-tour__devices .tour-example { padding: 22px 16px; }
.product-tour__devices .tour-example h3 { font-size: 25px; margin-bottom: 18px; }
.product-tour__devices .tour-example__card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
.product-tour__devices .product-tour__image--phone { width: 180px; height: 390px; }
.product-tour__devices .product-tour__image--phone .tour-example { height: 100%; min-height: 0; padding: 32px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.product-tour__devices .product-tour__image--phone h3 { font-size: 20px; line-height: 1.2; margin: 2px 0 4px; }
.product-tour__devices .product-tour__image--phone .tour-example__card { flex: 0 0 auto; margin: 0; padding: 10px; gap: 5px; line-height: 1.35; }
.product-tour__devices .product-tour__image--phone strong { font-size: 12px; }
.product-tour__devices .product-tour__image--phone .tour-example__card span { font-size: 11px; }
.product-tour__figure--companion figcaption { max-width: 180px; }

.product-tour__visual--kundschaft figcaption { padding: 6px 10px; background: #F3F2EC; border-radius: 8px; }
.product-tour__slide .scene__panel { gap: 18px; }
.product-tour__slide .scene__panel em { color: var(--gold-light); }
#tour-lehrkraft .scene__panel em { color: #B7D393; }
#tour-kundschaft .scene__panel em { color: #AABFFF; }
.product-tour__question { font-size: 14px; font-weight: 600; color: var(--cream-ink); }
.product-tour__outro { display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 28px; padding-bottom: 38px; color: var(--cream-soft); font-size: 14px; }
.product-tour__fallback-title { padding: 24px var(--gutter); font-family: var(--font-display); font-size: 32px; }
.product-tour[data-enhanced] .product-tour__audiences { display: flex; }
.product-tour[data-enhanced] .product-tour__toolbar { display: flex; }
.product-tour[data-enhanced] .product-tour__fallback-title { display: none; }
.tour-example { background: #F6F2E8; color: #29261F; padding: clamp(18px, 2.5vw, 34px); border-radius: 6px; min-height: 330px; }
.tour-example__label { text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: #605B50; }
.tour-example h3 { margin: 12px 0 24px; font-family: var(--font-display); font-size: 32px; font-weight: 400; }
.tour-example__card { display: flex; justify-content: space-between; gap: 18px; align-items: center; background: #FFFDFA; border: 1px solid #DFD8C9; border-radius: 10px; padding: 16px; margin-top: 10px; }
.tour-example__card strong { font-size: 14px; }
.tour-example__card span { font-size: 12px; color: #625C51; }
.tour-example__foot { margin-top: 22px; font-size: 11px; color: #625C51; }
.product-tour__image--phone .tour-example { min-height: 430px; padding: 28px 14px 20px; border-radius: 26px; }
.product-tour__image--phone .tour-example h3 { font-size: 26px; }
.product-tour__image--phone .tour-example__card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
@media (max-width: 1100px) {
  .product-tour__toolbar { flex-direction: column; gap: 16px; }
}
@media (max-width: 960px) {
  .product-tour__slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .product-tour__visual { min-height: 370px; }
  .product-tour[data-enhanced] .product-tour__controls--bottom { display: flex; }
  .product-tour__outro { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  .product-tour__devices { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product-tour__devices .product-tour__figure--companion { max-width: 180px; justify-self: center; }
  .product-tour__audiences { gap: 2px; padding: 5px; }
  .product-tour__audiences button { padding: 11px 14px; font-size: 13px; }
  .product-tour__label-full { display: none; }
  .product-tour__label-short { display: inline; }
  .product-tour__topics { justify-content: center; gap: 6px; }
  .product-tour__topics button { padding: 9px 12px; font-size: 12px; }
  .product-tour__slide .scene__panel { padding: 28px 24px; }
  .tour-example__card { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- Studioalltag: Beispielnachrichten, dann der eigene Markenauftritt ---- */
.studio-story { padding: clamp(48px, 6vw, 80px) 0; }
.studio-story__grid, .studio-brand__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.studio-story__eyebrow, .studio-brand__eyebrow { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px; color: var(--gold-light); }
.studio-story h2, .studio-brand h2 { font-size: clamp(34px, 4.2vw, 54px); text-wrap: balance; }
.studio-story h2 em { color: var(--gold-light); }
.studio-story__copy > p:not(.studio-story__eyebrow) { color: var(--cream-soft); max-width: 48ch; margin-top: 20px; }
.studio-story__link { display: inline-flex; gap: 12px; align-items: center; margin-top: 26px; font-size: 14px; color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(212,184,121,.4); padding-bottom: 5px; }
.studio-story__link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
.studio-messages { min-width: 0; }
.studio-messages__label { font-size: 12px; color: var(--cream-ink); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.studio-messages__label > span { color: var(--cream-soft); font-size: 11px; }
.studio-messages__list { display: grid; gap: 12px; }
.studio-message { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px; border-radius: 16px; background: var(--dark-2); border: 1px solid var(--line-dark); box-shadow: 0 12px 26px -22px #000; }
.studio-message:nth-child(even) { margin-left: 24px; }
.studio-message:nth-child(odd) { margin-right: 24px; }
.studio-message__avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--yellow); color: var(--ink); font-size: 12px; border-radius: 50%; }
.studio-message__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--cream-soft); margin-bottom: 5px; }
.studio-message p { font-size: 15px; line-height: 1.45; }
.studio-messages.is-revealed .studio-message { animation: studio-message-in .45s both; }
.studio-messages.is-revealed .studio-message:nth-child(2) { animation-delay: .22s; }
.studio-messages.is-revealed .studio-message:nth-child(3) { animation-delay: .44s; }
.studio-messages.is-revealed .studio-message:nth-child(4) { animation-delay: .66s; }
@keyframes studio-message-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.studio-brand { background: var(--light-2); color: var(--ink); padding: clamp(48px, 6vw, 80px) 0; scroll-margin-top: 80px; }
.studio-brand__eyebrow, .studio-brand h2 em { color: var(--gold-ink); }
.studio-brand__copy > p:not(.studio-brand__eyebrow) { max-width: 52ch; color: var(--ink-soft); margin-top: 18px; }
.studio-brand__copy .studio-brand__lead { font-weight: 500; color: var(--ink); }
.studio-brand__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 26px 0 0; }
.studio-brand__details > div { border-top: 1px solid var(--line); padding-top: 12px; }
.studio-brand__details dt { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.studio-brand__details dd { margin: 0; font-size: 13px; color: var(--ink-soft); }
.studio-brand__copy .studio-brand__support { font-size: 13px; }
.studio-brand__copy .btn { margin-top: 20px; }
.studio-brand__preview { margin: 0; display: grid; justify-items: center; gap: 20px; min-width: 0; }
.studio-brand__phone { width: 282px; max-width: 100%; padding: 8px; border-radius: 34px; background: var(--dark); box-shadow: 0 30px 60px -36px rgba(20,19,18,.5); }
.studio-brand__address { border-radius: 26px 26px 0 0; padding: 13px 10px; background: #E5E2D8; font-size: 10px; text-align: center; color: #49463F; }
.studio-brand__address > span { font-size: 9px; margin-right: 6px; }
.studio-brand__screen { background: #F5F2E9; color: #29372C; padding: 22px 18px 18px; border-radius: 0 0 26px 26px; text-align: center; }
.studio-brand__monogram { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-size: 30px; letter-spacing: -.08em; line-height: 1; }
.studio-brand__monogram > span { font-size: 22px; color: #4E6655; margin-left: 3px; }
.studio-brand__name { font-size: 16px; font-weight: 500; margin-top: 8px; }
.studio-brand__welcome { font-size: 10px; color: #5A6259; margin-top: 3px; }
.studio-brand__art { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; height: 115px; margin-top: 20px; border-radius: 90px 90px 10px 10px; background: #DCE3D4; }
.studio-brand__art::before, .studio-brand__art::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(41,55,44,.22); }
.studio-brand__art::before { left: -65px; bottom: -55px; }
.studio-brand__art::after { right: -65px; top: -55px; }
.studio-brand__art > span { font-family: var(--font-display); font-size: 23px; letter-spacing: -.04em; line-height: 1.12; }
.studio-brand__course { padding: 14px 12px; margin-top: 14px; background: #FFFEFA; border-radius: 12px; text-align: left; border: 1px solid #E0DFD3; }
.studio-brand__course > span:first-child { font-size: 10px; color: #5A6259; }
.studio-brand__course > strong { display: block; font-size: 17px; font-weight: 500; margin-top: 4px; }
.studio-brand__course > p { font-size: 11px; margin-top: 2px; color: #5A6259; }
.studio-brand__book { display: block; background: #385443; color: #FFFEFA; font-size: 11px; padding: 9px; border-radius: 7px; text-align: center; margin-top: 12px; }
.studio-brand__contact { display: grid; gap: 4px; font-size: 9px; margin-top: 16px; }
.studio-brand__contact strong { font-size: 11px; font-weight: 500; }
.studio-brand__preview figcaption { font-size: 11px; color: var(--ink-soft); text-align: center; }
@media (max-width: 800px) {
  .studio-story__grid, .studio-brand__grid { grid-template-columns: 1fr; }
  .studio-story__copy, .studio-brand__copy { max-width: 600px; }
  .studio-messages { width: 100%; max-width: 500px; justify-self: center; }
  .studio-brand__preview { padding-top: 8px; }
}
@media (max-width: 480px) {
  .studio-message { padding: 15px 12px; gap: 10px; }
  .studio-message:nth-child(even) { margin-left: 12px; }
  .studio-message:nth-child(odd) { margin-right: 12px; }
  .studio-brand__details { gap: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-messages.is-revealed .studio-message { animation: none; }
}