/* welt.css — Gestaltung von skw-design.de („Glas im Sauerland")
 *
 * Gehört zu welt.js. Alles funktioniert auch ohne das Skript: Bewegte Zustände
 * hängen an der Klasse .welt-an, die erst welt.js setzt. Ohne sie steht alles
 * sofort im Endzustand. Farben, Schriften und Regeln stehen in DESIGN.md.
 *
 * Grundton ist hell (Weiß, Nebelgrau, Schwarz, Glas). Abschnitte mit großen
 * Bildern tragen .dunkel und drehen die Schriftfarben um.
 */

:root {
  --grund: #f1f2f4;
  --grund-tief: #e7e9ed;
  --papier: #ffffff;
  --tinte: #111318;
  --tinte-2: #3a3f48;
  --tinte-3: #5d636e;
  --strich: rgba(17, 19, 24, .1);
  --strich-stark: rgba(17, 19, 24, .2);
  --nacht: #111318;
  --nacht-tief: #0b0c0f;
  --wolke: #a9aeb7;
  --nebel: #eef0f3;
  --licht: #f4f5f7;
  --linie: rgba(255, 255, 255, .14);
  --schau: 'Cormorant Garamond', 'Times New Roman', serif;
  --text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kurve: cubic-bezier(.16, 1, .3, 1);
  --aus: cubic-bezier(.23, 1, .32, 1);
  --rand: clamp(18px, 4.2vw, 64px);
  --breit: 1320px;
  --schatten: 0 1px 2px rgba(17, 19, 24, .05), 0 28px 70px rgba(17, 19, 24, .1);
  --zeiger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M5 3.2v17.6l4.7-4.3 3.1 6.7 3.3-1.5-3.1-6.6h6.3z' fill='%23111318' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
}

/* ---- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--grund);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  cursor: var(--zeiger);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--tinte);
  font: 400 17px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
a, button, summary, label, select, [role="button"], input[type="range"], input[type="checkbox"], input[type="radio"] { cursor: pointer; }
img, video, picture, svg { display: block; max-width: 100%; }
/* Hereinfliegende Teile ragen bewusst über den Rand; clip schneidet sie ab, ohne
 * einen Scrollbereich zu bilden (sonst greift position: sticky nicht mehr). */
main, .fuss { overflow-x: clip; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: #fff; }
::selection { background: rgba(17, 19, 24, .14); }
/* Sprünge innerhalb der Seite: kurz ausblenden, springen, einblenden (welt.js).
 * Kein weiches Scrollen, sonst rauschen alle Scroll-Szenen am Auge vorbei. */
main, .fuss { transition: opacity .18s ease; }
html.springt main, html.springt .fuss { opacity: 0; }
@media (max-width: 600px) { body { font-size: 16px; } }

.dunkel { color: var(--nebel); }

.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung { position: absolute; left: -9999px; top: 0; z-index: 100; }
.sprung:focus {
  left: 12px; top: 12px; padding: 10px 16px; border-radius: 8px;
  background: var(--tinte); color: #fff; font-weight: 600; text-decoration: none;
}

/* ---- Schrift ----------------------------------------------------------------
 * Überschriften, Preise und Zahlen in Manrope. Die Serifenschrift gibt es nur
 * noch in den Glaswörtern (Weitblick, Leistungen, Ablauf, SKW Design). */
.titel {
  font: 600 clamp(40px, 5.3vw, 84px)/1.02 var(--text);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.untertitel {
  font: 600 clamp(22px, 2vw, 30px)/1.15 var(--text);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--tinte-2); max-width: 60ch; text-wrap: pretty; }
.dunkel .lead { color: rgba(238, 240, 243, .9); }
.leise { color: var(--tinte-3); }
.dunkel .leise { color: var(--wolke); }
.etikett { font: 600 14px/1.4 var(--text); letter-spacing: .005em; color: var(--tinte-3); }
.dunkel .etikett { color: var(--wolke); }
p { text-wrap: pretty; }
.zahl { font-variant-numeric: tabular-nums lining-nums; }

/* Glasschrift: Die Buchstaben selbst sind aus Glas. Oben fängt die Kante das
 * Licht, in der Mitte scheint das Bild durch, unten sammelt sich der Glanz. */
.glaswort {
  position: relative;
  display: block;
  font-family: var(--schau);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-kerning: none;
  font-variant-ligatures: none;
  padding: .08em .04em .16em;
  margin: -.08em -.04em -.16em;
  overflow: hidden;
}
.glaswort-buchstaben > span {
  display: inline-block;
  padding: .16em 0 .32em;
  margin: -.16em 0 -.32em;
  color: transparent;
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .9) 0%,
      rgba(255, 255, 255, .88) 24%,
      rgba(255, 255, 255, .46) 40%,
      rgba(255, 255, 255, .26) 56%,
      rgba(255, 255, 255, .36) 70%,
      rgba(255, 255, 255, .6) 100%);
  background-size: 320% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.glaswort-buchstaben { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .55)) drop-shadow(0 10px 22px rgba(0, 0, 0, .3)); }
@keyframes glanz {
  0% { background-position: 160% 0, 0 0; }
  18%, 100% { background-position: -60% 0, 0 0; }
}

/* ---- Auftritt beim Laden (reine CSS-Animation) ------------------------------- */
.einblenden { animation: einblenden 1.2s var(--kurve) both; animation-delay: var(--t, 0s); }
@keyframes einblenden {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
.glaswort-buchstaben > span {
  animation: aufstieg 1.3s var(--kurve) both, glanz 9s cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: calc(var(--t0, 1.5s) + var(--i, 0) * 75ms), calc(var(--glanz-ab, 3.4s) + var(--i, 0) * 90ms);
  transform-origin: 0 100%;
}
@keyframes aufstieg {
  from { transform: translate3d(0, 112%, 0) rotate(5deg); opacity: 0; }
  35% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* ---- Knöpfe ------------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px/1.2 var(--text);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--aus), background-color .25s, border-color .25s, box-shadow .25s, color .25s;
}
@media (hover: hover) and (pointer: fine) { .knopf:hover { transform: translateY(-2px); } }
.knopf:active { transform: scale(.97); transition-duration: .1s; }
.knopf-dunkel {
  background: var(--tinte); color: #fff;
  box-shadow: 0 12px 30px rgba(17, 19, 24, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.knopf-dunkel:hover { background: #000; box-shadow: 0 16px 36px rgba(17, 19, 24, .26), inset 0 1px 0 rgba(255, 255, 255, .12); }
.knopf-hell {
  background: #fff; color: var(--tinte);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 #fff;
}
.knopf-hell:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .28), 0 0 0 4px rgba(255, 255, 255, .16); }
.knopf-glas {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.knopf-glas:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.knopf-rand {
  background: rgba(255, 255, 255, .6);
  border-color: var(--strich-stark);
  color: var(--tinte);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.knopf-rand:hover { background: #fff; border-color: rgba(17, 19, 24, .34); }
.knopf .pfeil { transition: transform .4s var(--kurve); }
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Textverweis mit Pfeil */
.mehr {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 15px/1.3 var(--text);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--strich-stark);
  transition: border-color .3s;
}
.mehr:hover { border-color: currentColor; }
.dunkel .mehr { border-color: rgba(255, 255, 255, .35); }
.dunkel .mehr:hover { border-color: #fff; }
.mehr .pfeil { transition: transform .4s var(--kurve); }
.mehr:hover .pfeil { transform: translateX(5px); }

/* ---- Glas ---------------------------------------------------------------------
 * .glas-hell: klares, helles Glas für helle Flächen (Grundfall)
 * .glas: dunkles Rauchglas, nur über Bildern */
.glas-hell {
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 30px 70px rgba(17, 19, 24, .1), inset 0 1px 0 #fff;
}
.glas {
  background: rgba(20, 22, 28, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
@media (prefers-reduced-transparency: reduce) {
  .glas-hell { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glas { background: #1a1d23; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- Glassymbole (KI-Bilder, freigestellt mit echter Transparenz) -------------
 * Auf hellem Grund bekommen sie einen weichen Schatten, damit das Glas als
 * Körper steht. .greifbar: mit Maus oder Finger anfassen, es federt zurück. */
.symbol {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: saturate(.6) drop-shadow(0 22px 24px rgba(17, 19, 24, .14)) drop-shadow(0 3px 6px rgba(17, 19, 24, .07));
}
.dunkel .symbol { filter: saturate(.4) drop-shadow(0 26px 40px rgba(0, 0, 0, .45)); }
.greifbar { will-change: translate, rotate; }
.symbol-rahmen { position: relative; }
@keyframes schweben {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(0, -12px, 0) rotate(calc(var(--rot, 0deg) + 3deg)); }
}
@keyframes klingeln {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-9deg); } 70% { transform: rotate(8deg); } 74% { transform: rotate(-7deg); }
  78% { transform: rotate(6deg); } 82% { transform: rotate(-3deg); } 86% { transform: rotate(0); }
}
@keyframes pendeln {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes schrauben {
  0%, 100% { transform: rotate(-16deg); }
  45%, 55% { transform: rotate(22deg); }
}
@keyframes pulsen {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  8% { transform: scale(1.06); filter: brightness(1.25); }
  16% { transform: scale(1); filter: brightness(1); }
}
.schwebt { animation: schweben 8s ease-in-out infinite; }
.klingelt { animation: klingeln 3.6s var(--aus) infinite; transform-origin: 50% 60%; }
.pendelt { animation: pendeln 4.4s ease-in-out infinite; transform-origin: 72% 12%; }
.dreht { animation: drehen 26s linear infinite; }
.schraubt { animation: schrauben 3.2s var(--kurve) infinite; transform-origin: 30% 30%; }
.pulst { animation: pulsen 2.8s ease-out infinite; }

/* KI-Kennzeichnung (Art. 50 KI-VO): auf jedem KI-Bild, gut lesbar (12 px,
 * Kontrast über jedem Bildgrund mindestens 4,5 : 1), nie für Screenreader versteckt */
.ki-marke {
  position: absolute; z-index: 4; right: 10px; bottom: 10px;
  padding: 3px 8px; border-radius: 6px;
  font: 600 12px/1.3 var(--text); letter-spacing: .01em;
  color: #fff;
  background: rgba(10, 12, 16, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}
.ki-marke-oben { bottom: auto; top: 86px; }
.ki-marke-hell { color: var(--tinte); background: rgba(255, 255, 255, .86); }

/* ---- Leiste (Navigation) --------------------------------------------------------
 * Über hellen Flächen helles Glas mit dunkler Schrift. Liegt sie über einem
 * dunklen Bild ([data-ton="dunkel"]), setzt welt.js .ueber-dunkel. */
.leiste {
  position: fixed; z-index: 60;
  top: 14px; left: var(--rand); right: var(--rand);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--tinte);
  transition: background-color .4s, border-color .4s, box-shadow .4s, color .4s;
  animation: einblenden 1s var(--kurve) both .15s;
}
.leiste.gescrollt, .leiste.immer-glas {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(17, 19, 24, .07);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 12px 40px rgba(17, 19, 24, .08);
}
.leiste-marke { display: block; flex: none; padding: 4px 0; }
.leiste-marke img { height: 30px; width: auto; filter: brightness(0); transition: filter .4s; }
.leiste-nav { display: flex; gap: 2px; margin-left: auto; }
.leiste-nav a {
  padding: 10px 15px; border-radius: 999px;
  font: 500 14.5px/1 var(--text); color: rgba(17, 19, 24, .74);
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.leiste-nav a:hover { background: rgba(17, 19, 24, .06); color: var(--tinte); }
.leiste-nav a[aria-current="page"] { color: var(--tinte); background: rgba(17, 19, 24, .07); }
.leiste .knopf { min-height: 42px; padding: 11px 18px; font-size: 14px; background: var(--tinte); color: #fff; box-shadow: none; }
.leiste .knopf:hover { background: #000; }
.leiste-menue-knopf {
  display: none;
  align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--strich-stark);
  background: rgba(255, 255, 255, .5);
  font: 600 14px/1 var(--text);
  cursor: pointer;
}
.leiste-menue-knopf i { display: grid; gap: 4px; }
.leiste-menue-knopf i::before, .leiste-menue-knopf i::after { content: ''; display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; }
/* über dunklen Bildern */
.leiste.ueber-dunkel { color: #fff; }
.leiste.ueber-dunkel .leiste-marke img { filter: brightness(0) invert(1); }
.leiste.ueber-dunkel .leiste-nav a { color: rgba(238, 240, 243, .86); }
.leiste.ueber-dunkel .leiste-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.leiste.ueber-dunkel .leiste-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.leiste.ueber-dunkel.gescrollt { background: rgba(17, 19, 24, .5); border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.leiste.ueber-dunkel .knopf { background: #fff; color: var(--tinte); }
.leiste.ueber-dunkel .knopf:hover { background: #fff; }
.leiste.ueber-dunkel .leiste-menue-knopf { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
@media (max-width: 940px) {
  .leiste { padding-left: 16px; }
  .leiste-nav { display: none; }
  .leiste-menue-knopf { display: inline-flex; }
  .leiste .knopf { margin-left: auto; }
}
@media (max-width: 420px) {
  .leiste { gap: 6px; }
  .leiste-marke img { height: 26px; }
  .leiste .knopf { padding: 10px 14px; font-size: 13px; }
  .leiste-menue-knopf { padding: 0 12px; }
  .leiste-menue-knopf span { display: none; }
}

/* Sprachumschalter DE/EN: kleine Pille in der Leiste, groß im Handy-Menü */
.sprache {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  border: 1px solid var(--strich-stark);
  background: rgba(255, 255, 255, .5);
  font: 700 12.5px/1 var(--text); letter-spacing: .03em;
}
.sprache > a, .sprache > span {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 9px;
  border-radius: 999px;
  color: var(--tinte-3); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.sprache > a:hover { color: var(--tinte); background: rgba(17, 19, 24, .07); }
.sprache > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sprache > [aria-current] { background: var(--tinte); color: #fff; }
.leiste.ueber-dunkel .sprache { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
.leiste.ueber-dunkel .sprache > a { color: rgba(238, 240, 243, .82); }
.leiste.ueber-dunkel .sprache > a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.leiste.ueber-dunkel .sprache > [aria-current] { background: #fff; color: var(--tinte); }
.sprache-gross { font-size: 15px; letter-spacing: 0; }
.sprache-gross > a, .sprache-gross > span { height: 42px; padding: 0 18px; }
@media (max-width: 940px) {
  .leiste .sprache { margin-left: auto; }
  .leiste .sprache + .knopf { margin-left: 0; }
}
@media (max-width: 420px) {
  .leiste .sprache { display: none; }
  .leiste .sprache + .knopf { margin-left: auto; }
}

/* Menü für schmale Bildschirme (Popover, geht auch ohne Skript) */
.menue {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 96px var(--rand) 36px;
  border: 0;
  background: rgba(241, 242, 244, .97);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  color: var(--tinte);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .3s var(--aus), overlay .3s allow-discrete, display .3s allow-discrete;
}
.menue:popover-open, .menue.offen { display: flex; flex-direction: column; opacity: 1; }
@starting-style { .menue:popover-open { opacity: 0; } }
.menue-zu {
  position: absolute; top: 21px; right: var(--rand);
  min-height: 42px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--strich-stark);
  background: rgba(255, 255, 255, .7);
  font: 600 14px/1 var(--text); cursor: pointer;
}
.menue nav { display: flex; flex-direction: column; margin-top: 12px; }
.menue nav a {
  font: 600 clamp(36px, 10vw, 56px)/1.12 var(--text);
  letter-spacing: -.04em;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--strich);
}
.menue nav a[aria-current="page"] { color: var(--tinte-3); }
.menue-fuss { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; justify-items: start; }
.menue-fuss a:not(.knopf) { color: var(--tinte-2); text-decoration: none; }

/* ---- Auftakt: die Kamerafahrt folgt dem Scrollen ------------------------------
 * Am Anfang steht das scharfe Standbild. Sobald gescrollt wird (.bewegt),
 * übernimmt das Video, dessen Zeit welt.js an den Fortschritt --p koppelt. */
.auftakt { position: relative; }
.welt-an .auftakt { height: 240vh; }
.auftakt-buehne {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end;
  padding: 120px var(--rand) clamp(48px, 9vh, 100px);
  overflow: hidden;
}
.welt-an .auftakt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; }
.auftakt-film { position: absolute; inset: 0; z-index: -3; background: #1a1c21; }
.auftakt-film video, .auftakt-film img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
}
/* Der Film liegt über dem scharfen Standbild und wird mit dem Scrollweg selbst
 * sichtbar (nicht nach Zeit): Die ersten Filmbilder gleichen dem Standbild, so
 * gleitet das Bild ohne Sprung in die Kamerafahrt. Kommt der Film erst später
 * an, blendet er einmal kurz ein (.bereit ohne .fest), danach folgt er direkt. */
.auftakt-video, .seite-video { opacity: 0; }
.auftakt-video.bereit, .seite-video.bereit { opacity: clamp(0, calc((var(--p, 0) - var(--film-ab, .002)) * 45), 1); }
.auftakt-video.bereit:not(.fest), .seite-video.bereit:not(.fest) { transition: opacity .35s ease; }
.auftakt-schleier {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .5) 0%, rgba(10, 11, 14, 0) 22%),
    linear-gradient(0deg, rgba(10, 11, 14, .78) 0%, rgba(10, 11, 14, .3) 30%, rgba(10, 11, 14, 0) 55%),
    linear-gradient(90deg, rgba(10, 11, 14, .36) 0%, rgba(10, 11, 14, 0) 55%);
}
.auftakt-inhalt { width: 100%; max-width: 1480px; margin: 0 auto; }
.welt-an .auftakt-inhalt {
  transform: translate3d(0, calc(var(--p, 0) * -7vh), 0);
  opacity: calc(1 - max(0, var(--p, 0) - .7) * 4.2);
}
.auftakt-titel { font-weight: 600; }
.auftakt-zeile {
  display: block;
  font: 600 clamp(24px, 2.9vw, 46px)/1.08 var(--text);
  letter-spacing: -.035em;
  color: #fff;
}
.auftakt-titel .glaswort { font-size: clamp(76px, 17.2vw, 300px); margin-block: .02em .04em; }
.auftakt-zeile-rechts { padding-left: clamp(0px, 34vw, 640px); }
.auftakt-scroll { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 46px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.auftakt-scroll i { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: rinnen 2.2s cubic-bezier(.6, 0, .3, 1) 2.4s infinite both; }
.welt-an .auftakt-scroll { opacity: calc(1 - var(--p, 0) * 14); }
@keyframes rinnen { 0% { top: -40%; } 70%, 100% { top: 110%; } }
@media (max-width: 900px) {
  .auftakt-buehne { padding-top: 110px; }
  .auftakt-zeile-rechts { padding-left: 0; }
  .auftakt-titel .glaswort { font-size: clamp(68px, 21vw, 180px); }
  .auftakt-film video, .auftakt-film img { object-position: 74% 50%; }
}

/* ---- Bühnen: hohe Abschnitte mit stehendem Bild -------------------------------- */
.welt { position: relative; }
.welt-buehne {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.welt-an .welt-hoch > .welt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; }
.welt-bild, .welt-bild img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.welt-an .welt-hoch .welt-bild img {
  transform: scale(calc(1.14 - var(--p, 1) * .14));
  transform-origin: 50% 62%;
  will-change: transform;
}
/* Bilder in normal hohen Abschnitten treiben beim Scrollen leicht mit */
.welt-an .bild-drift img {
  transform: scale(1.1) translate3d(0, calc((var(--durch, .5) - .5) * -5%), 0);
  will-change: transform;
}
.welt-schleier { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Text, der mit dem Fortschritt einer Bühne auftaucht (--s Start, --d Dauer).
 * Ohne Unschärfe: Hält man mitten im Auftauchen an, bliebe der Text sonst verschwommen. */
.welt-an .auftauchen {
  --k: clamp(0, calc((var(--p, 1) - var(--s, 0)) / var(--d, .16)), 1);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 46px), 0);
}
/* Motive, die mit dem Fortschritt hereinfliegen (--x, --y, --r: Startweg) */
.welt-an .motiv {
  --k: clamp(0, calc((var(--p, 1) - var(--s, 0)) / var(--d, .22)), 1);
  --e: calc(1 - (1 - var(--k)) * (1 - var(--k)) * (1 - var(--k)));
  transform:
    translate3d(calc((1 - var(--e)) * var(--x, 0px)), calc((1 - var(--e)) * var(--y, 0px)), 0)
    rotate(calc((1 - var(--e)) * var(--r, 0deg)));
  opacity: clamp(0, calc(var(--k) * 2.5), 1);
}

/* ---- Einmal hereinfliegen (Startlage per --fx, --fy, --fr, --fs; Verzug --fd) --- */
.welt-an [data-flieg] {
  opacity: 0;
  transform: translate3d(var(--fx, 0px), var(--fy, 60px), 0) rotate(var(--fr, 0deg)) scale(var(--fs, .97));
  transition: opacity 1s ease, transform 1.3s var(--kurve);
  transition-delay: var(--fd, 0s);
}
.welt-an [data-flieg].da { opacity: 1; transform: none; }

/* ---- Mit der Maus schweben, Glas neigt sich ------------------------------------- */
/* [data-tiefe]: welt.js setzt translate direkt am Element (Stärke über --tiefe) */
.kippen-rahmen { perspective: 1200px; }
[data-kippen] {
  position: relative;
  transform: rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
  transition: transform .6s var(--kurve);
}
[data-kippen]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--lx, 30%) var(--ly, 0%), rgba(255, 255, 255, .22), transparent 55%);
  mix-blend-mode: soft-light;
}

/* ---- Versprechen (Tal) ------------------------------------------------------------ */
.welt-an .versprechen.welt-hoch { height: 260vh; }
.versprechen .welt-bild img { object-position: 50% 60%; }
.versprechen .welt-schleier {
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .72) 0%, rgba(10, 11, 14, .36) 34%, rgba(10, 11, 14, .04) 58%),
    linear-gradient(0deg, rgba(10, 11, 14, .76) 0%, rgba(10, 11, 14, 0) 32%);
}
.versprechen-text {
  position: relative;
  min-height: inherit; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(110px, 16vh, 170px) var(--rand) clamp(40px, 8vh, 80px);
  max-width: 1480px; margin: 0 auto;
}
.versprechen-titel {
  font: 600 clamp(38px, 5vw, 84px)/1.04 var(--text);
  letter-spacing: -.04em;
  color: #fff;
  max-width: 19ch;
  text-wrap: balance;
}
.versprechen-titel > span { display: block; }
.versprechen-nach { max-width: 44ch; margin-left: auto; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: rgba(238, 240, 243, .92); }

/* Glaslinse im Tal (linse.js): liegt über dem Bild, unter dem Schleier */
.linse { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.linse canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.linse.linse-an canvas { opacity: 1; }

/* ---- Werkstatt: eine Beispiel-Website setzt sich beim Scrollen zusammen ---------
 * welt.js setzt je nach Fortschritt die Klassen ab-1 … ab-6 und markiert den
 * aktiven Punkt; --sp ist der Fortschritt innerhalb des Schritts. werkstatt.js
 * färbt die Seite um, wenn eine Farbe gewählt wird (--akzent). Ohne Skript
 * steht alles im Endzustand. */
.werkstatt {
  --akzent: #15171c; --akzent-sanft: #e4e6ea; --akzent-schrift: 'Manrope', sans-serif;
  position: relative;
  background:
    radial-gradient(55% 60% at 74% 50%, #fff 0%, rgba(255, 255, 255, 0) 72%),
    var(--grund);
}
.werkstatt-buehne {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 90px); align-items: center;
  max-width: 1480px; margin: 0 auto;
  padding: clamp(90px, 11vw, 150px) var(--rand);
}
.welt-an .werkstatt { height: 620vh; }
.welt-an .werkstatt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: clamp(92px, 13vh, 130px); padding-bottom: clamp(30px, 6vh, 60px); }
.werkstatt-titel { font: 600 clamp(30px, 3.1vw, 50px)/1.05 var(--text); letter-spacing: -.04em; margin-bottom: clamp(16px, 2.6vh, 30px); text-wrap: balance; }
.werkstatt-liste { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 4px; }
.werkstatt-liste li {
  position: relative;
  padding: 8px 14px 8px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: background-color .45s, border-color .45s, box-shadow .45s, opacity .45s;
}
.welt-an .werkstatt-liste li:not(.aktiv) .w-knopf { color: var(--tinte-3); }
.welt-an .werkstatt-liste li:not(.aktiv) .w-symbol { box-shadow: 0 4px 10px rgba(17, 19, 24, .12), inset 0 1px 0 rgba(255, 255, 255, .14); }
.werkstatt-liste li:hover .w-knopf { color: var(--tinte); }
.welt-an .werkstatt-liste li.aktiv { background: rgba(255, 255, 255, .86); border-color: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 18px 44px rgba(17, 19, 24, .09); }
.werkstatt-liste h3 { margin: 0; }
.w-knopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px;
  width: 100%;
  font: 600 clamp(17px, 1.3vw, 21px)/1.25 var(--text); letter-spacing: -.02em;
  color: var(--tinte);
}
.w-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 12px; }
/* Kleine Symbole stehen auf dunklen Glaskacheln, damit man sie sofort erkennt */
.kachel-symbol, .w-symbol {
  flex: none; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px;
  background: radial-gradient(120% 90% at 30% 10%, #3a3e47 0%, #16181d 60%, #0f1014 100%);
  box-shadow: 0 10px 22px rgba(17, 19, 24, .2), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: transform .7s var(--kurve), box-shadow .4s;
}
.kachel-symbol .symbol, .w-symbol .symbol { width: 84%; filter: saturate(.35) drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.welt-an .werkstatt-liste li.aktiv .w-symbol { transform: scale(1.22) rotate(-9deg); }
.werkstatt-liste li:hover .w-symbol { transform: scale(1.12) rotate(6deg); }
.w-mehr p { color: var(--tinte-2); font-size: 15.5px; line-height: 1.6; padding: 4px 0 6px 62px; max-width: 48ch; }
.welt-an .w-mehr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--kurve); }
.welt-an .w-mehr > p { overflow: hidden; min-height: 0; }
.welt-an li.aktiv .w-mehr { grid-template-rows: 1fr; }
/* Fortschritt im aktiven Schritt */
.welt-an .werkstatt-liste li::after {
  content: ''; position: absolute; left: 70px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px;
  background: var(--tinte); opacity: 0;
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
}
.welt-an .werkstatt-liste li.aktiv::after { opacity: .28; }

/* Die Bühne rechts: alles in em, damit es mit der Breite mitwächst */
.werkstatt-bild { position: relative; font-size: clamp(8px, .9vw, 14px); aspect-ratio: 16 / 11.5; perspective: 1800px; }
.attrappe {
  position: absolute; inset: 7% 8% 9% 6%;
  display: flex; flex-direction: column;
  border-radius: 1.1em; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17, 19, 24, .1);
  box-shadow: 0 2px 6px rgba(17, 19, 24, .05), 0 60px 120px rgba(17, 19, 24, .16);
  transform: rotateY(calc(-13deg + var(--p, 1) * 10deg)) rotateX(calc(7deg - var(--p, 1) * 5deg));
}
.attrappe-leiste { flex: none; height: 2.4em; display: flex; align-items: center; gap: .5em; padding: 0 1em; background: #f3f4f6; border-bottom: 1px solid rgba(17, 19, 24, .06); font: 500 .78em/1 var(--text); color: var(--tinte-3); }
.attrappe-leiste i { width: .8em; height: .8em; border-radius: 50%; background: rgba(17, 19, 24, .14); }
.attrappe-leiste span { margin: 0 auto; padding: .4em 1.6em; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .07); }
.attrappe-balken { flex: none; height: 2px; background: var(--akzent); transform-origin: 0 50%; opacity: 0; }
.attrappe-seite { flex: 1; min-height: 0; background: #fbfbfc; color: #15171c; padding: 1.3em 1.8em 1.5em; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2em; font-family: var(--text); }
.a-kopf { display: flex; align-items: center; gap: .8em; font-size: .9em; }
.a-logo { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; font: 700 .78em/1 var(--text); background: var(--akzent); color: #fff; }
.a-name { font-weight: 700; letter-spacing: -.01em; }
.a-menue { display: flex; gap: 1.3em; margin-left: auto; font-size: .88em; color: #4b5260; }
.a-menue i { font-style: normal; }
.a-knopf { font-size: .82em; font-weight: 600; padding: .6em 1.2em; border-radius: 99px; background: var(--akzent); color: #fff; }
.a-held { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.5em; align-items: center; min-height: 0; }
.a-titel { display: block; font: 700 2.15em/1.04 var(--akzent-schrift); letter-spacing: -.03em; color: #15171c; }
.a-text { display: block; margin: .8em 0 1.2em; font-size: .92em; line-height: 1.5; color: #4b5260; }
.a-cta { display: inline-block; font-size: .85em; font-weight: 600; padding: .75em 1.4em; border-radius: 99px; background: var(--akzent); color: #fff; }
.a-held-bild { height: 100%; min-height: 10em; border-radius: .9em; background: #cfd4db url(/uploads/welt/branche-laden-800.webp) center / cover; position: relative; overflow: hidden; }
.a-held-bild::after { content: ''; position: absolute; inset: 0; background: var(--akzent); mix-blend-mode: color; opacity: .16; transition: background-color .6s ease; }
.a-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.a-reihe span { height: 4.4em; border-radius: .8em; background: var(--akzent-sanft); }
.attrappe-seite *, .a-reihe span, .a-held-bild::after { transition: color .6s ease, background-color .6s ease, border-color .6s ease, box-shadow .6s ease, font-family 0s; }

/* Vor Schritt 1: nur ein Drahtgitter-Entwurf */
.welt-an .werkstatt:not(.ab-1) :is(.a-logo, .a-name, .a-menue i, .a-knopf, .a-titel, .a-text, .a-cta) { color: transparent; background-color: #e3e6ea; border-radius: .35em; }
.welt-an .werkstatt:not(.ab-1) .a-held-bild { background: linear-gradient(to top right, transparent calc(50% - .06em), #b5bbc4 50%, transparent calc(50% + .06em)), linear-gradient(to top left, transparent calc(50% - .06em), #b5bbc4 50%, transparent calc(50% + .06em)); border: .12em dashed #b5bbc4; }
.welt-an .werkstatt:not(.ab-1) .a-held-bild::after { opacity: 0; }
.welt-an .werkstatt:not(.ab-1) .a-reihe span { background: transparent; border: .12em dashed #b5bbc4; }
/* Schritt 2: die Marke bekommt ihr Zeichen */
.welt-an .werkstatt.ab-2 .a-logo { box-shadow: 0 0 0 .18em #fbfbfc, 0 0 0 .3em var(--akzent); }
/* Schritt 3: die Seite lädt */
.welt-an .werkstatt.ab-3 .attrappe-balken { animation: laden 1.6s var(--kurve) both; }
@keyframes laden { 0% { transform: scaleX(0); opacity: 1; } 75% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Schwebende Glaskarten rund um die Seite */
.a-extra {
  position: absolute; z-index: 2;
  display: grid; gap: .55em;
  padding: 1em 1.15em;
  border-radius: 1em;
  background: rgba(255, 255, 255, .76);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 2px 6px rgba(17, 19, 24, .05), 0 30px 60px rgba(17, 19, 24, .14);
  color: var(--tinte); font: 500 1em/1.3 var(--text);
  transition: opacity .7s var(--kurve), transform 1.1s var(--kurve);
}
.welt-an .werkstatt .a-extra { opacity: 0; visibility: hidden; transform: translate3d(var(--vx, 0), var(--vy, 3em), 0) scale(.92); transition: opacity .7s var(--kurve), transform 1.1s var(--kurve), visibility 0s linear .7s; }
.welt-an .werkstatt.ab-2 .a-marke, .welt-an .werkstatt.ab-3 .a-tempo, .welt-an .werkstatt.ab-4 .a-suche,
.welt-an .werkstatt.ab-5 .a-meldungen, .welt-an .werkstatt.ab-6 .a-chat { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.a-klein { font: 600 .74em/1.2 var(--text); letter-spacing: .01em; color: var(--tinte-3); }
.a-marke { left: -3%; top: -2%; width: 15.5em; --vx: -4em; --vy: 0; }
.a-marke-reihe { display: flex; align-items: center; gap: .8em; }
.a-zeichen { flex: none; width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: #fff; font: 700 1em/1 var(--text); transition: background-color .6s ease; }
.a-farben { display: flex; flex-wrap: wrap; gap: .4em; }
.a-farbe {
  width: 1.9em; height: 1.9em; padding: 0;
  border-radius: .6em; border: 2px solid #fff;
  background: var(--f);
  box-shadow: 0 0 0 1px rgba(17, 19, 24, .14), 0 .3em .8em rgba(17, 19, 24, .12);
  cursor: pointer;
  transition: transform .2s var(--aus), box-shadow .2s;
}
.a-farbe:hover { transform: translateY(-.15em) scale(1.06); }
.a-farbe:active { transform: scale(.92); }
.a-farbe[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tinte), 0 .3em .8em rgba(17, 19, 24, .16); }
.a-schrift {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: baseline; gap: .5em;
  padding: .2em .4em; margin: -.2em -.4em; border-radius: .5em;
  transition: background-color .2s;
}
.a-schrift:hover { background: rgba(17, 19, 24, .05); }
.a-schrift:focus-visible { outline: 2px solid var(--tinte); }
.a-schrift b { font: 700 2em/1 var(--akzent-schrift); letter-spacing: -.02em; }
.a-schrift small { font: 500 .8em/1.3 var(--text); color: var(--tinte-3); }
.a-tempo { right: 0; top: 2%; width: 14em; --vx: 4em; --vy: -1em; }
.a-tempo strong { font-size: 1.1em; font-weight: 700; letter-spacing: -.02em; }
.a-leiste { height: .4em; border-radius: 99px; background: rgba(17, 19, 24, .08); overflow: hidden; }
.a-leiste i { display: block; height: 100%; width: 100%; background: var(--akzent); border-radius: inherit; transform-origin: 0 50%; }
.welt-an .werkstatt:not(.ab-3) .a-leiste i { transform: scaleX(.08); }
.welt-an .werkstatt.ab-3 .a-leiste i { transform: scaleX(1); transition: transform 1.4s var(--kurve) .3s, background-color .6s; }
.a-haken { display: flex; align-items: center; gap: .5em; font-size: .85em; color: var(--tinte-2); }
.a-haken::before, .a-meldung i { content: ''; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.a-suche { left: 2%; bottom: 3%; width: 19em; --vx: -3em; --vy: 3em; }
.a-feld { display: flex; align-items: center; gap: .6em; padding: .65em .9em; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .1); color: #15171c; font-size: .95em; }
.a-feld svg { width: 1.1em; height: 1.1em; flex: none; color: #4b5260; }
.a-tippen { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.welt-an .werkstatt:not(.ab-4) .a-tippen { max-width: 0; }
.welt-an .werkstatt.ab-4 .a-tippen { max-width: 12em; transition: max-width 1.3s steps(14) .5s; }
.a-treffer { display: grid; gap: .2em; padding: .2em .2em 0; }
.a-treffer b { font-size: .95em; }
.a-treffer span { font-size: .8em; color: var(--tinte-3); }
.welt-an .werkstatt:not(.ab-4) .a-treffer { opacity: 0; }
.welt-an .werkstatt.ab-4 .a-treffer { opacity: 1; transition: opacity .6s ease 1.9s; }
.a-meldungen { right: -1%; top: 34%; width: 15.5em; --vx: 4em; --vy: 0; }
.a-meldung { display: grid; grid-template-columns: auto 1fr; column-gap: .6em; align-items: center; font-size: .88em; }
.a-meldung small { grid-column: 2; font-size: .82em; color: var(--tinte-3); }
.a-meldung + .a-meldung { padding-top: .55em; border-top: 1px solid rgba(17, 19, 24, .07); }
.welt-an .werkstatt .a-meldung { opacity: 0; transform: translateY(.6em); transition: opacity .5s ease, transform .7s var(--kurve); }
.welt-an .werkstatt.ab-5 .a-meldung { opacity: 1; transform: none; }
.welt-an .werkstatt.ab-5 .a-meldung:nth-child(2) { transition-delay: .35s; }
.welt-an .werkstatt.ab-5 .a-meldung:nth-child(3) { transition-delay: .7s; }
.a-chat { right: 5%; bottom: 0; width: 16em; --vx: 2em; --vy: 4em; }
.a-blase { padding: .6em .8em; border-radius: .9em; font-size: .85em; line-height: 1.35; max-width: 88%; }
.a-blase-ein { background: rgba(17, 19, 24, .06); border-bottom-left-radius: .25em; }
.a-blase-aus { justify-self: end; background: var(--akzent); color: #fff; border-bottom-right-radius: .25em; }
.a-blase-aus small { display: block; text-align: right; font-size: .78em; opacity: .7; margin-top: .15em; }
.welt-an .werkstatt .a-blase-aus { opacity: 0; transform: translateY(.6em); transition: opacity .5s ease, transform .7s var(--kurve), background-color .6s; }
.welt-an .werkstatt.ab-6 .a-blase-aus { opacity: 1; transform: none; transition-delay: .9s, .9s, 0s; }
@media (max-width: 900px) {
  .werkstatt-buehne { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
  .welt-an .werkstatt-buehne { padding-top: 82px; padding-bottom: 20px; }
  .werkstatt-bild { order: -1; font-size: 2.2vw; margin: 0 -2vw; }
  .werkstatt-titel { font-size: 24px; margin-bottom: 8px; }
  .welt-an .werkstatt-liste li { display: none; }
  .welt-an .werkstatt-liste li.aktiv { display: block; }
  .w-mehr p { font-size: 15px; }
}

/* ---- Live-Projekt in Geräten --------------------------------------------------- */
.projekt {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 12vw, 180px) var(--rand);
  background: linear-gradient(180deg, var(--grund) 0%, #fff 45%, #fff 60%, var(--grund) 100%);
}
.projekt-hinter {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 700 clamp(120px, 22vw, 380px)/1 var(--text);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(17, 19, 24, .06);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}
.projekt-raster {
  position: relative;
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 110px); align-items: center;
}
.projekt-buehne { position: relative; aspect-ratio: 16 / 11; transform-style: preserve-3d; }
.projekt-buehne[data-kippen]::after { display: none; }
.geraet { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; background: #0c0d10; }
.geraet img { width: 100%; height: auto; }
.geraet-browser {
  left: 0; top: 4%; width: 88%;
  border: 1px solid rgba(17, 19, 24, .12);
  box-shadow: 0 2px 6px rgba(17, 19, 24, .06), 0 50px 110px rgba(17, 19, 24, .22);
  transform: perspective(1800px) rotateY(calc(18deg - var(--p, .6) * 14deg)) rotateX(calc(9deg - var(--p, .6) * 6deg)) rotateZ(-1.5deg);
  transform-origin: 60% 50%;
}
.geraet-leiste {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: #f3f4f6;
  border-bottom: 1px solid rgba(17, 19, 24, .07);
  font: 500 11.5px/1 var(--text); color: var(--tinte-3);
}
.geraet-leiste i { width: 10px; height: 10px; border-radius: 50%; background: rgba(17, 19, 24, .14); }
.geraet-leiste span { margin-left: 10px; padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .07); }
.geraet-handy {
  right: 0; bottom: -4%; width: 27%;
  border-radius: 30px;
  border: 6px solid #1c1e23;
  box-shadow: 0 40px 90px rgba(17, 19, 24, .3), 0 0 0 1px rgba(17, 19, 24, .2);
  transform: perspective(1400px) rotateY(calc(-20deg + var(--p, .6) * 12deg)) rotateZ(calc(4deg - var(--p, .6) * 3deg)) translateY(calc((.6 - var(--p, .6)) * 60px));
}
.projekt-text { display: grid; gap: 20px; justify-items: start; }
.projekt-text .lead { font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chips li {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--strich-stark);
  background: rgba(255, 255, 255, .7);
  font-size: 13.5px; font-weight: 500; color: var(--tinte-2);
}
.dunkel .chips li { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: rgba(238, 240, 243, .9); }
@media (max-width: 900px) {
  .projekt-raster { grid-template-columns: minmax(0, 1fr); }
  .projekt-buehne { aspect-ratio: 4 / 3.4; }
  .projekt-hinter { top: 12%; }
}

/* ---- Ablauf-Bühne (schwebender Glasbildschirm) ------------------------------------ */
.welt-an .ablauf-welt.welt-hoch { height: 300vh; }
.ablauf-welt .welt-bild img { object-position: 45% 50%; }
.ablauf-welt .welt-schleier {
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .78) 0%, rgba(10, 11, 14, .3) 30%, rgba(10, 11, 14, 0) 48%),
    linear-gradient(0deg, rgba(10, 11, 14, .86) 0%, rgba(10, 11, 14, .45) 30%, rgba(10, 11, 14, 0) 55%);
}
.ablauf-innen {
  position: relative;
  height: 100%; min-height: inherit;
  max-width: 1480px; margin: 0 auto;
  padding: clamp(100px, 15vh, 150px) var(--rand) clamp(30px, 6vh, 60px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.ablauf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 40px; }
.ablauf-kopf .titel { max-width: 12ch; color: #fff; }
.schritte {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: end;
}
.schritt {
  padding: 22px 22px 24px;
  border-radius: 22px;
  rotate: var(--quer, 0deg);
  translate: 0 var(--hoch, 0px);
}
.schritt-nr {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 50%;
  background: #fff; color: var(--tinte);
  font: 700 14px/1 var(--text);
}
.schritt h3 { font: 600 clamp(19px, 1.6vw, 24px)/1.15 var(--text); letter-spacing: -.025em; color: #fff; margin-bottom: 8px; }
.schritt p { font-size: 14.5px; line-height: 1.55; color: rgba(238, 240, 243, .82); }
@media (max-width: 1100px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .welt-an .ablauf-welt.welt-hoch { height: auto; }
  .welt-an .ablauf-welt.welt-hoch > .welt-buehne { position: relative; height: auto; }
  .ablauf-welt .welt-bild img { object-position: 38% 50%; }
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .schritt { rotate: none; translate: none; }
  .welt-an .ablauf-welt .motiv, .welt-an .ablauf-welt .auftauchen { transform: none; opacity: 1; filter: none; }
  .ablauf-innen { padding-top: 55vh; }
}

/* ---- Preise: helles Glas, jedes Paket mit seinem Symbol ---------------------------- */
.preise {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 12vw, 180px) var(--rand) clamp(90px, 11vw, 160px);
  background:
    radial-gradient(50% 42% at 82% 12%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%),
    var(--grund-tief);
}
.preise-kopf {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto clamp(70px, 8vw, 110px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(30px, 5vw, 80px);
}
.preise-kopf .titel { max-width: 13ch; }
.preise-kopf .lead { margin-top: 20px; }
.preise-schild { width: clamp(140px, 15vw, 250px); margin-right: clamp(0px, 3vw, 60px); }
.faecher {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  align-items: stretch;
}
.preis-halter { rotate: var(--quer, 0deg); translate: 0 var(--hoch, 0px); }
.preis {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 78px 26px 26px;
  border-radius: 28px;
}
.preis-symbol { position: absolute; top: -58px; left: 16px; width: 124px; transition: transform .7s var(--kurve); }
.preis:hover .preis-symbol { transform: translateY(-8px) rotate(-7deg) scale(1.05); }
.preis-name { font: 600 16px/1.2 var(--text); letter-spacing: -.01em; color: var(--tinte-2); }
.preis-betrag { font: 600 clamp(38px, 3.3vw, 52px)/1 var(--text); letter-spacing: -.045em; color: var(--tinte); margin: 12px 0 4px; font-variant-numeric: lining-nums; }
.preis-betrag small { font-size: .4em; font-weight: 600; letter-spacing: 0; color: var(--tinte-3); margin-right: .25em; }
.preis-art { font-size: 14px; color: var(--tinte-3); }
.preis ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; font-size: 15px; color: var(--tinte-2); }
.preis ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: baseline; }
.preis ul li::before { content: ''; width: 10px; height: 6px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg) translateY(-3px); }
.preis .knopf { margin-top: auto; width: 100%; }
.preis-empfohlen { background: #15171c; border: 1px solid #15171c; color: #fff; box-shadow: 0 40px 90px rgba(17, 19, 24, .28); }
.preis-empfohlen .preis-name, .preis-empfohlen .preis-art, .preis-empfohlen ul, .preis-empfohlen .preis-betrag small { color: rgba(238, 240, 243, .78); }
.preis-empfohlen .preis-betrag { color: #fff; }
.preis-empfohlen .symbol { filter: saturate(.4) drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
.preis-plakette {
  position: absolute; top: 20px; right: 20px;
  padding: 6px 11px; border-radius: 999px;
  background: #fff; color: var(--tinte);
  font: 700 13px/1.2 var(--text); letter-spacing: 0;
}
.preise-notiz { position: relative; z-index: 2; max-width: 820px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; color: var(--tinte-3); font-size: 15px; }
.preise-notiz + .knopf-reihe { position: relative; z-index: 2; justify-content: center; margin-top: 28px; }
@media (max-width: 1100px) { .faecher { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 80px; } }
@media (max-width: 700px) {
  .preise-kopf { grid-template-columns: minmax(0, 1fr); }
  .preise-schild { width: 130px; order: -1; margin: 0; }
}
@media (max-width: 640px) {
  .faecher { grid-template-columns: minmax(0, 1fr); row-gap: 76px; }
  .preis-halter { translate: none; rotate: calc(var(--quer, 0deg) * .4); }
}

/* ---- Bausteine: Pillen und Schalter ------------------------------------------------ */
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { position: relative; }
.pille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pille span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--strich-stark);
  background: rgba(255, 255, 255, .72);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tinte-2);
  transition: background-color .2s, border-color .2s, color .2s, transform .16s var(--aus), box-shadow .2s;
}
.pille small { font-size: 13px; font-weight: 500; color: var(--tinte-3); transition: color .2s; }
.pille:hover span { border-color: rgba(17, 19, 24, .38); color: var(--tinte); }
.pille:active span { transform: scale(.97); }
.pille input:checked + span { background: var(--tinte); border-color: var(--tinte); color: #fff; box-shadow: 0 8px 20px rgba(17, 19, 24, .18); }
.pille input:checked + span small { color: rgba(255, 255, 255, .7); }
.pille input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 3px; }
.pille input:disabled + span { opacity: .45; cursor: not-allowed; }
.pille .symbol { width: 26px; margin: -6px 0 -6px -6px; filter: saturate(.5) drop-shadow(0 3px 4px rgba(17, 19, 24, .2)); }
.pille input:checked + span .symbol { filter: saturate(.3) brightness(1.3) drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }

.schalter { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.schalter-bahn { position: relative; flex: none; width: 52px; height: 32px; border-radius: 99px; background: rgba(17, 19, 24, .16); transition: background-color .25s; }
.schalter-bahn i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(17, 19, 24, .25); transition: transform .35s var(--kurve), background-color .25s; }
.schalter input:checked + .schalter-bahn { background: var(--tinte); }
.schalter input:checked + .schalter-bahn i { transform: translateX(20px); }
.schalter input:focus-visible + .schalter-bahn { outline: 2px solid currentColor; outline-offset: 3px; }
.dunkel .schalter-bahn { background: rgba(255, 255, 255, .24); }
.dunkel .schalter input:checked + .schalter-bahn { background: #fff; }
.dunkel .schalter input:checked + .schalter-bahn i { background: var(--tinte); }

/* ---- Über mich (Arbeitsplatz am Morgen) ------------------------------------------- */
.ich { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.ich .welt-bild img { object-position: 34% 50%; }
.ich .welt-schleier { background: linear-gradient(270deg, rgba(241, 242, 244, .55) 0%, rgba(241, 242, 244, 0) 55%); }
.ich-text {
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: clamp(100px, 12vw, 160px) var(--rand);
  display: grid; justify-items: end;
}
.ich-karte { max-width: 580px; padding: clamp(26px, 3vw, 44px); border-radius: 32px; display: grid; gap: 18px; justify-items: start; }
.ich-karte .titel { font-size: clamp(34px, 3.6vw, 56px); }
.ich-karte .lead { font-size: 17px; }
.ich-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(17, 19, 24, .06);
  font: 600 14px/1.2 var(--text); color: var(--tinte-2);
}
.ich-status i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte-3); }
.ich-status.offen { color: var(--tinte); }
.ich-status.offen i { background: var(--tinte); animation: atmen 2.4s ease-out infinite; }
@keyframes atmen { 0% { box-shadow: 0 0 0 0 rgba(17, 19, 24, .35); } 70%, 100% { box-shadow: 0 0 0 9px rgba(17, 19, 24, 0); } }
.ich-kacheln { list-style: none; padding: 0; margin: 4px 0 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ich-kachel {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px 12px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(17, 19, 24, .06);
  text-decoration: none;
  transition: transform .5s var(--kurve), box-shadow .3s;
}
a.ich-kachel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(17, 19, 24, .1); }
.ich-kachel .kachel-symbol { width: 46px; height: 46px; border-radius: 14px; }
.ich-kachel .symbol { transition: transform .6s var(--kurve); }
.ich-kachel:hover .symbol { transform: rotate(-10deg) scale(1.12); }
.ich-kachel b { display: block; font: 600 15px/1.25 var(--text); letter-spacing: -.01em; }
.ich-kachel small { display: block; font-size: 14px; line-height: 1.35; color: var(--tinte-3); margin-top: 2px; }
@media (max-width: 900px) {
  .ich { align-items: end; }
  .ich-text { justify-items: stretch; padding-top: 46vh; }
  .ich .welt-schleier { background: linear-gradient(0deg, rgba(241, 242, 244, .8) 0%, rgba(241, 242, 244, 0) 60%); }
}
@media (max-width: 480px) { .ich-kacheln { grid-template-columns: minmax(0, 1fr); } }

/* ---- Vor Ort: Licht an, der Laden öffnet ---------------------------------------------
 * start.js schaltet beim ersten Hineinscrollen das Licht an; der Schalter macht
 * es wieder aus. Mit Licht wird das Bild hell und das Handy zeigt „Geöffnet". */
.vorort {
  position: relative; isolation: isolate;
  min-height: 112vh; min-height: 112svh;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
.vorort .welt-bild img { object-position: 50% 55%; filter: brightness(.42) saturate(.55); transition: filter 1.4s var(--aus); }
.vorort.licht-an .welt-bild img { filter: none; }
.vorort-schein { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 46% at 50% 58%, rgba(255, 255, 255, .16), transparent 70%); opacity: 0; transition: opacity 1.4s var(--aus); }
.vorort.licht-an .vorort-schein { opacity: 1; }
.vorort .welt-schleier {
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .82) 0%, rgba(10, 11, 14, .4) 24%, rgba(10, 11, 14, 0) 42%),
    linear-gradient(0deg, rgba(10, 11, 14, .88) 0%, rgba(10, 11, 14, .5) 20%, rgba(10, 11, 14, 0) 40%);
}
.vorort-kopf, .vorort-mitte, .vorort-fuss { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--rand); }
.vorort-kopf { padding-top: clamp(110px, 13vw, 170px); display: grid; gap: 18px; justify-items: start; }
.vorort-kopf .titel { max-width: 14ch; color: #fff; }
.vorort-mitte { grid-row: 2; display: flex; justify-content: flex-end; align-items: center; padding-block: 30px; }
.vorort-fuss { grid-row: 3; padding-bottom: clamp(40px, 7vh, 80px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 40px; }
.vorort-fuss .lead { max-width: 52ch; }
.orte { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 16px; }
.licht-tafel { display: grid; gap: 10px; padding: 16px 18px; border-radius: 22px; min-width: 250px; }
.licht-tafel .schalter-text { font: 600 16px/1.2 var(--text); color: #fff; }
.licht-tafel small { font-size: 13.5px; color: rgba(238, 240, 243, .76); }
/* Das Handy mit dem Suchergebnis */
.vorort-handy {
  width: min(292px, 78vw);
  padding: 9px; border-radius: 42px;
  background: #0f1014;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  rotate: 4deg;
  transition: rotate .8s var(--kurve), translate .8s var(--kurve);
}
.vorort-handy:hover { rotate: 0deg; translate: 0 -6px; }
.handy-schirm { border-radius: 33px; overflow: hidden; background: #f6f7f9; color: var(--tinte); padding: 14px 14px 18px; display: grid; gap: 12px; font-family: var(--text); }
.handy-insel { justify-self: center; width: 84px; height: 24px; border-radius: 99px; background: #0f1014; margin-bottom: 2px; }
.handy-suche { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: #fff; box-shadow: 0 1px 4px rgba(17, 19, 24, .1); font-size: 13.5px; color: var(--tinte-2); }
.handy-suche svg { width: 15px; height: 15px; flex: none; color: var(--tinte-3); }
.handy-treffer { background: #fff; border-radius: 20px; padding: 14px; display: grid; gap: 6px; box-shadow: 0 1px 4px rgba(17, 19, 24, .08); }
.handy-bild { height: 96px; border-radius: 12px; background: #d8dce2 url(/uploads/welt/branche-laden-800.webp) center / cover; margin-bottom: 4px; }
.handy-treffer b { font-size: 16px; letter-spacing: -.02em; }
.handy-treffer small { font-size: 12.5px; color: var(--tinte-3); }
.handy-zustand { font-size: 13px; font-weight: 700; }
.handy-zustand em { font-style: normal; font-weight: 500; color: var(--tinte-3); }
.handy-zustand [data-offen] { display: none; }
.licht-an .handy-zustand [data-offen] { display: inline; }
.licht-an .handy-zustand [data-zu] { display: none; }
.handy-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.handy-knoepfe span { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: #f1f2f4; font-size: 11.5px; font-weight: 600; color: var(--tinte-2); }
.handy-knoepfe svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .vorort-mitte { justify-content: center; }
  .vorort-handy { rotate: 0deg; }
}

/* ---- Häufige Fragen: Glas-Akkordeon mit Suche ---------------------------------------- */
.fragen { padding: clamp(100px, 12vw, 180px) var(--rand); background: #fff; }
.fragen-raster { max-width: var(--breit); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.fragen-kopf { position: sticky; top: 110px; display: grid; gap: 20px; justify-items: start; }
.fragen-symbol { width: clamp(110px, 11vw, 170px); margin: -20px 0 -6px -10px; }
.fragen-suche { position: relative; width: 100%; max-width: 440px; }
.fragen-suche input {
  width: 100%; padding: 15px 18px 15px 48px;
  border-radius: 999px; border: 1px solid var(--strich-stark);
  background: var(--grund);
  font: 500 16px/1.3 var(--text); color: var(--tinte);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.fragen-suche input::placeholder { color: var(--tinte-3); }
.fragen-suche input:focus { outline: none; background: #fff; border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(17, 19, 24, .08); }
.fragen-suche svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--tinte-3); pointer-events: none; }
.fragen-liste { display: grid; gap: 10px; }
.fragen-leer { padding: 22px; border-radius: 22px; background: var(--grund); color: var(--tinte-2); }
.frage { border-radius: 22px; background: var(--grund); border: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.frage:hover { background: #eaecef; }
.frage[open] { background: #fff; border-color: rgba(17, 19, 24, .08); box-shadow: 0 1px 2px rgba(17, 19, 24, .04), 0 24px 50px rgba(17, 19, 24, .08); }
.frage summary {
  list-style: none;
  display: grid; grid-template-columns: 1fr 36px; gap: 16px; align-items: center;
  padding: 19px 20px 19px 24px;
  font: 600 clamp(17px, 1.3vw, 20px)/1.3 var(--text); letter-spacing: -.02em;
  cursor: pointer;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: '';
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%23111318' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px var(--strich);
  transition: transform .45s var(--kurve), background-color .25s;
}
.frage[open] summary::after { transform: rotate(45deg); background-color: var(--tinte); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); box-shadow: none; }
.antwort { padding: 0 24px 22px; color: var(--tinte-2); max-width: 64ch; }
.antwort a { color: var(--tinte); font-weight: 600; }
.frage mark { background: rgba(17, 19, 24, .1); color: inherit; border-radius: 3px; padding: 0 1px; }
/* sanftes Auf- und Zuklappen, wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
  .fragen { interpolate-size: allow-keywords; }
  .frage::details-content { height: 0; overflow: clip; transition: height .45s var(--kurve), content-visibility .45s allow-discrete; }
  .frage[open]::details-content { height: auto; }
}
@media (max-width: 900px) {
  .fragen-raster { grid-template-columns: minmax(0, 1fr); }
  .fragen-kopf { position: static; }
}

/* ---- Der erste Schritt: Weg im Morgenlicht, Kamera geht mit ----------------------------- */
.anfang { position: relative; }
.welt-an .anfang { height: 190vh; }
.anfang-buehne { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.welt-an .anfang-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; }
.anfang-film { position: absolute; inset: 0; z-index: -2; background: #dfe3e6; }
.anfang-film img, .anfang-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.anfang .welt-schleier {
  background:
    linear-gradient(180deg, rgba(241, 242, 244, .62) 0%, rgba(241, 242, 244, 0) 36%),
    linear-gradient(0deg, rgba(10, 11, 14, .4) 0%, rgba(10, 11, 14, 0) 42%);
}
.anfang-kopf {
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: clamp(110px, 13vw, 170px) var(--rand) 0;
  color: var(--tinte);
  display: grid; gap: 16px; justify-items: start;
}
.anfang-kopf .titel { font-size: clamp(52px, 8vw, 132px); line-height: .95; }
.anfang-kopf p { max-width: 42ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: #1d2027; font-weight: 500; }
.anfang .ki-marke { top: 86px; bottom: auto; }
/* Der Gesprächsplaner */
.planer { grid-row: 3; width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--rand) clamp(26px, 5vh, 56px); }
.planer-tafel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px 26px; align-items: end;
  padding: 20px 22px 22px; border-radius: 30px;
}
.planer-symbol { width: 84px; align-self: center; }
.planer fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.planer legend { padding: 0; margin-bottom: 10px; font: 600 14px/1.3 var(--text); color: var(--tinte-2); }
.planer .pille span { padding: 10px 14px; font-size: 14.5px; }
.planer-ende { display: grid; gap: 10px; justify-items: end; }
.planer-direkt { font-size: 14px; color: var(--tinte-2); white-space: nowrap; }
.planer-direkt a { color: var(--tinte); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--strich-stark); }
@media (max-width: 1180px) {
  .planer-tafel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planer-symbol { display: none; }
  .planer-ende { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto auto; align-items: center; justify-content: space-between; }
}
@media (max-width: 700px) {
  .welt-an .anfang { height: auto; }
  .welt-an .anfang-buehne { position: relative; height: auto; }
  .anfang-kopf { padding-bottom: 26vh; }
  .planer-tafel { grid-template-columns: minmax(0, 1fr); }
  .planer-ende { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ---- Fuß ------------------------------------------------------------------------------ */
.fuss { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) var(--rand) 34px; background: var(--nacht-tief); color: var(--nebel); }
.fuss-wort { max-width: 1480px; margin: 0 auto clamp(50px, 6vw, 90px); }
.fuss-wort .glaswort { font-size: clamp(64px, 15.6vw, 280px); }
.fuss-raster { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.fuss-marke img { height: 38px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.fuss p, .fuss li { font-size: 15px; color: var(--wolke); }
.fuss a { text-decoration: none; color: rgba(238, 240, 243, .9); }
.fuss a:hover { color: #fff; }
.fuss-titel { font: 600 14px/1.5 var(--text); letter-spacing: .01em; color: rgba(238, 240, 243, .64); margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.fuss-unten { max-width: 1480px; margin: clamp(50px, 6vw, 80px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.fuss-unten p { font-size: 15px; line-height: 1.6; }
.fuss-unten a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fuss-unten a:hover { text-decoration-line: underline; }
/* Sprachwechsel: als Pille klar erkennbar, wie der Umschalter oben in der Leiste */
.fuss-unten a[hreflang] { display: inline-block; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; color: #fff; font-weight: 600; transition: background-color .2s, border-color .2s; }
.fuss-unten a[hreflang]:hover { text-decoration-line: none; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .44); }
.fuss .glaswort-buchstaben > span { animation: glanz 9s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(1.2s + var(--i, 0) * 90ms); }
.welt-an .fuss-wort .glaswort-buchstaben > span { opacity: 0; transform: translate3d(0, 112%, 0) rotate(5deg); transition: opacity .8s ease, transform 1.3s var(--kurve); transition-delay: calc(var(--i, 0) * 70ms); }
.welt-an .fuss-wort.da .glaswort-buchstaben > span { opacity: 1; transform: none; }
@media (hover: hover) {
  .fuss-wort .glaswort { overflow: visible; }
  .welt-an .fuss-wort .glaswort-buchstaben > span {
    transition: opacity .8s ease, transform 1.3s var(--kurve), translate .5s var(--kurve), rotate .5s var(--kurve);
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
  }
  .fuss-wort .glaswort-buchstaben > span:hover { translate: 0 -.1em; rotate: -3deg; }
}
@media (max-width: 900px) { .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fuss-marke { grid-column: 1 / -1; } }

/* ===========================================================================
 * Unterseiten
 * ======================================================================== */

/* ---- Auftakt einer Unterseite: Film oder Bild, Riesenschrift aus Glas -----------
 * .mit-film: Die Bühne steht, während man scrollt; welt.js spult das Video. */
.seite-auftakt { position: relative; }
.welt-an .seite-auftakt.mit-film { height: 210vh; }
.seite-buehne {
  position: relative; isolation: isolate;
  min-height: 94vh; min-height: 94svh;
  display: grid; align-content: end;
  padding: 130px var(--rand) clamp(28px, 5vh, 60px);
  overflow: hidden;
}
.welt-an .mit-film .seite-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.seite-film { position: absolute; inset: 0; z-index: -2; background: #d9dde2; }
.seite-film img, .seite-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.seite-auftakt .welt-schleier {
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .42) 0%, rgba(10, 11, 14, 0) 24%),
    linear-gradient(0deg, rgba(10, 11, 14, .74) 0%, rgba(10, 11, 14, .34) 28%, rgba(10, 11, 14, 0) 52%),
    linear-gradient(90deg, rgba(10, 11, 14, .34) 0%, rgba(10, 11, 14, 0) 50%);
}
.seite-auftakt-inhalt { width: 100%; max-width: 1480px; margin: 0 auto; display: grid; gap: 22px; justify-items: start; }
.welt-an .mit-film .seite-auftakt-inhalt { transform: translate3d(0, calc(var(--p, 0) * -6vh), 0); }
.seite-auftakt-inhalt .lead { max-width: 44ch; font-size: clamp(18px, 1.5vw, 22px); color: #fff; text-shadow: 0 1px 20px rgba(0, 0, 0, .35); }
.seite-titel { margin-top: clamp(20px, 6vh, 70px); width: 100%; }
.seite-titel .glaswort { font-size: clamp(80px, 18.5vw, 340px); }
@media (max-width: 900px) {
  .seite-buehne { min-height: 88svh; }
  .seite-auftakt .welt-schleier { background: linear-gradient(180deg, rgba(10, 11, 14, .45) 0%, rgba(10, 11, 14, .55) 40%, rgba(10, 11, 14, .5) 70%, rgba(10, 11, 14, .82) 100%); }
  .seite-titel .glaswort { font-size: clamp(60px, 18vw, 200px); }
}

/* ---- Haken-Liste ------------------------------------------------------------------ */
.haken { list-style: none; padding: 0; display: grid; gap: 9px; }
.haken li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; }
.haken li::before {
  content: ''; width: 10px; height: 6px;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) translateY(-3px);
}

/* ---- Sechs Räume: seitwärts fahrende Reihe -------------------------------------------
 * Ohne Skript, auf schmalen Bildschirmen und bei „Bewegung reduzieren" stehen die
 * Räume untereinander. Nur mit welt.js und genug Breite fährt die Reihe seitwärts
 * (6 × 72vw + 5 × 4vw + 2 × 8vw = 468vw, sichtbar 100vw, also 368vw Weg). */
.raeume {
  position: relative; z-index: 2;
  background:
    radial-gradient(50% 45% at 20% 30%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 50% at 85% 75%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%),
    var(--grund);
}
.raeume .welt-buehne { min-height: 0; padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); }
.raeume-kopf { max-width: 1480px; margin: 0 auto clamp(30px, 4vw, 56px); padding: 0 var(--rand); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.raeume-hinweis { display: none; }
.raeume-spur { display: grid; gap: clamp(18px, 3vw, 34px); max-width: 1480px; margin: 0 auto; padding: 0 var(--rand); }
.raum {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: clamp(26px, 3.2vw, 54px);
  border-radius: 32px;
}
.raum-name { font: 600 clamp(40px, 4.4vw, 80px)/.98 var(--text); letter-spacing: -.04em; color: var(--tinte); }
.raum-satz { font: 600 clamp(17px, 1.3vw, 20px)/1.4 var(--text); letter-spacing: -.015em; color: var(--tinte-3); margin: 12px 0 16px; }
.raum-text > p:not([class]) { color: var(--tinte-2); max-width: 54ch; }
.raum .haken { margin-top: 18px; font-size: 15px; color: var(--tinte-2); }
.raum-preis { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--strich); font-size: 15px; color: var(--tinte-3); }
.raum-preis strong { color: var(--tinte); font-weight: 700; }
.raum-bild { position: relative; display: grid; place-items: center; min-height: 220px; }
.raum-bild::before { content: ''; position: absolute; inset: 4% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; }
.raum-symbol { position: relative; width: min(100%, 340px); }
.raum-symbol .symbol { filter: saturate(.6) drop-shadow(0 34px 34px rgba(17, 19, 24, .16)) drop-shadow(0 4px 8px rgba(17, 19, 24, .07)); }
/* Der Pinsel zieht einen Strich, die Lupe sucht, der Blitz pulst */
.pinsel-strich { position: absolute; left: 4%; right: 4%; bottom: 14%; height: 34%; overflow: visible; pointer-events: none; }
.pinsel-strich path { fill: none; stroke: rgba(17, 19, 24, .16); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.welt-an .pinsel-strich path { animation: malen 5s var(--kurve) infinite; }
@keyframes malen { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes suchen {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  25% { transform: translate3d(16px, -12px, 0) rotate(6deg); }
  50% { transform: translate3d(0, -20px, 0) rotate(0); }
  75% { transform: translate3d(-16px, -8px, 0) rotate(-6deg); }
}
.sucht { animation: suchen 7s ease-in-out infinite; }
@keyframes malt { 0%, 100% { transform: translate3d(-8%, 4%, 0) rotate(-10deg); } 50% { transform: translate3d(8%, -4%, 0) rotate(6deg); } }
.malt { animation: malt 5s ease-in-out infinite; }
.raeume-fortschritt { display: none; }
@media (min-width: 901px) {
  .raum-dreh .raum-bild { order: -1; }
  .raum-dreh { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@media (min-width: 901px) and (min-height: 620px) {
  .welt-an .raeume { height: 520vh; }
  .welt-an .raeume .welt-buehne {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .welt-an .raeume-kopf { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; margin: 0 auto; }
  .welt-an .raeume-hinweis { display: block; }
  .welt-an .raeume-spur {
    display: flex; gap: 4vw;
    width: max-content; max-width: none;
    margin: 0; padding: 0 8vw;
    transform: translate3d(calc(var(--p, 0) * -368vw), 0, 0);
    will-change: transform;
  }
  .welt-an .raum {
    flex: none; width: 72vw;
    height: min(64vh, 640px);
    margin-top: clamp(60px, 9vh, 90px);
    rotate: var(--quer, 0deg); translate: 0 var(--hoch, 0px);
  }
  .welt-an .raum-bild { height: 100%; }
  .welt-an .raeume-fortschritt { display: block; position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(26px, 5vh, 44px); height: 2px; border-radius: 2px; background: rgba(17, 19, 24, .1); }
  .welt-an .raeume-fortschritt i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--tinte); }
}
/* Laptops mit wenig Höhe (1280 × 720, 1366 × 768): Karten wachsen mit dem Inhalt
 * und die Schrift wird etwas kompakter, damit nichts über den Rand ragt */
@media (min-width: 901px) and (min-height: 620px) {
  .welt-an .raum { height: auto; min-height: min(64vh, 640px); }
}
@media (min-width: 901px) and (min-height: 620px) and (max-height: 860px) {
  .welt-an .raum { padding: 26px 34px; margin-top: 64px; }
  .welt-an .raum-name { font-size: min(4.4vw, 6.4vh); }
  .welt-an .raum-satz { font-size: 16px; margin: 8px 0 10px; }
  .welt-an .raum-text > p:not([class]) { font-size: 15px; line-height: 1.55; }
  .welt-an .raum .haken { margin-top: 10px; gap: 5px; font-size: 14px; }
  .welt-an .raum-preis { margin-top: 12px; padding-top: 10px; font-size: 14px; }
  .welt-an .raum-symbol { width: min(100%, 38vh); }
}
@media (max-width: 900px) {
  .raum { grid-template-columns: minmax(0, 1fr); }
  .raum-bild { order: -1; min-height: 0; }
  .raum-symbol { width: 170px; }
}

/* ---- Preis-Schieber -------------------------------------------------------------------- */
.schieber {
  position: relative; overflow: hidden;
  padding: clamp(100px, 12vw, 180px) var(--rand);
  background: radial-gradient(50% 50% at 80% 20%, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--grund-tief);
}
.schieber-kopf { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; }
.schieber-kopf .titel { max-width: 13ch; }
.schieber-kopf .lead { margin-top: 18px; }
.schieber-schild { width: clamp(130px, 13vw, 210px); margin-right: clamp(0px, 4vw, 70px); }
.schieber-schild.schwingt .symbol { animation: anstossen 1.1s var(--aus); }
@keyframes anstossen { 0% { transform: rotate(0); } 18% { transform: rotate(-16deg); } 42% { transform: rotate(10deg); } 64% { transform: rotate(-5deg); } 84% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
.schieber-schild .symbol { transform-origin: 70% 10%; }
.schieber-tafel {
  position: relative; z-index: 1;
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-radius: 34px; overflow: hidden;
}
.schieber-wahl { padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 30px; }
.schieber fieldset, .stil fieldset, .kompass fieldset, .zeitplan fieldset, .immer fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.schieber legend { padding: 0; margin-bottom: 14px; font: 600 15px/1.3 var(--text); color: var(--tinte); }
.schieber-regler {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
  --fuell: 0%;
}
.schieber-regler::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--tinte) var(--fuell), rgba(17, 19, 24, .12) var(--fuell)); }
.schieber-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(17, 19, 24, .25), 0 0 0 1px rgba(17, 19, 24, .1); transition: transform .15s var(--aus); }
.schieber-regler:active::-webkit-slider-thumb { transform: scale(1.12); }
.schieber-regler::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(17, 19, 24, .12); }
.schieber-regler::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--tinte); }
.schieber-regler::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(17, 19, 24, .25), 0 0 0 1px rgba(17, 19, 24, .1); }
.schieber-regler:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 8px; }
.schieber-regler:disabled { opacity: .45; cursor: not-allowed; }
.schieber-marken { display: flex; justify-content: space-between; padding: 0 4px; font: 600 13.5px/1 var(--text); color: var(--tinte-3); }
.schieber-hinweis { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--tinte-2); }
.schieber-ergebnis {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: clamp(26px, 3.4vw, 52px);
  background: #15171c; color: #fff;
}
.schieber-ergebnis .etikett { color: rgba(238, 240, 243, .66); }
.schieber-preis { font: 600 clamp(58px, 6.2vw, 108px)/.95 var(--text); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.schieber-art { color: rgba(238, 240, 243, .8); }
.schieber-monat { color: #fff; font-weight: 600; }
.schieber-ergebnis .knopf { margin-top: 16px; align-self: flex-start; white-space: normal; text-align: left; }
.schieber-klein { margin-top: 8px; font-size: 13.5px; color: rgba(238, 240, 243, .66); max-width: 40ch; }
.schieber-klein a { color: #fff; }
@media (max-width: 900px) {
  .schieber-tafel { grid-template-columns: minmax(0, 1fr); }
  .schieber-kopf { grid-template-columns: minmax(0, 1fr); }
  .schieber-schild { width: 120px; order: -1; margin: 0; }
}

/* ---- Immer dabei: sechs Schalter, die Vorschau zeigt, was ohne sie fehlen würde ------------
 * leistungen.js setzt am Rahmen .ohne-design, .ohne-geraete, .ohne-ssl, .ohne-dsgvo,
 * .ohne-uebergabe und .ohne-domain. Ohne Skript sind alle Schalter an. */
.immer { padding: clamp(100px, 12vw, 170px) var(--rand); background: #fff; }
.immer-kopf { max-width: 1400px; margin: 0 auto clamp(40px, 5vw, 70px); display: grid; gap: 18px; }
.immer-buehne { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.immer-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.immer-teil { border-radius: 20px; background: var(--grund); border: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.immer-teil:has(input:checked) { background: #fff; border-color: rgba(17, 19, 24, .08); box-shadow: 0 1px 2px rgba(17, 19, 24, .04), 0 14px 34px rgba(17, 19, 24, .06); }
.immer-teil .schalter { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 16px 14px 20px; width: 100%; }
.immer-teil .schalter-bahn { grid-column: 2; grid-row: 1; }
.immer-teil .schalter-text { grid-column: 1; grid-row: 1; }
.immer-teil b { display: block; font: 600 17px/1.25 var(--text); letter-spacing: -.015em; }
.immer-teil small { display: block; font-size: 14px; line-height: 1.45; color: var(--tinte-3); margin-top: 2px; }
.immer-notiz { margin-top: 14px; font-size: 14.5px; color: var(--tinte-3); }
.immer-notiz button { all: unset; cursor: pointer; font-weight: 700; color: var(--tinte); border-bottom: 1px solid var(--strich-stark); }
.immer-notiz button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.immer-buehne.alles-an .immer-notiz { color: var(--tinte); font-weight: 600; }
.immer-buehne.alles-an .immer-notiz span::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; border-radius: 50%; background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

.immer-vorschau { position: relative; font-size: clamp(8.5px, .9vw, 13.5px); padding: 0 6em 5em 0; }
.iv-fenster { position: relative; border-radius: 1.3em; overflow: hidden; background: #fff; border: 1px solid rgba(17, 19, 24, .1); box-shadow: 0 2px 6px rgba(17, 19, 24, .05), 0 60px 120px rgba(17, 19, 24, .15); }
.iv-leiste { display: flex; align-items: center; gap: .5em; height: 3em; padding: 0 1em; background: #f3f4f6; border-bottom: 1px solid rgba(17, 19, 24, .06); }
.iv-leiste > i { width: .8em; height: .8em; border-radius: 50%; background: rgba(17, 19, 24, .14); flex: none; }
.iv-adresse { flex: 1; min-width: 0; margin-left: 1.2em; display: flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .08); font: 500 .95em/1 var(--text); color: var(--tinte-2); white-space: nowrap; overflow: hidden; }
.iv-adresse svg { width: 1.05em; height: 1.05em; flex: none; }
.iv-unsicher { display: none; align-items: center; gap: .35em; font-weight: 700; color: var(--tinte); }
.iv-fremd { display: none; }
.ohne-ssl .iv-sicher { display: none; }
.ohne-ssl .iv-unsicher { display: inline-flex; }
.ohne-domain .iv-eigen { display: none; }
.ohne-domain .iv-fremd { display: inline; }
.iv-seite { font-family: var(--text); color: #15171c; }
.iv-kopf { display: flex; align-items: center; gap: .8em; padding: 1.1em 1.6em; font-size: .92em; }
.iv-logo { width: 2.2em; height: 2.2em; border-radius: .6em; display: grid; place-items: center; background: #15171c; color: #fff; font: 700 .8em/1 var(--text); }
.iv-name { font-weight: 700; letter-spacing: -.01em; }
.iv-menue { margin-left: auto; display: flex; gap: 1.3em; color: #4b5260; }
.iv-menue i { font-style: normal; }
.iv-held { margin: 0 1.6em; border-radius: 1em; min-height: 13em; display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; background: #eef0f3; }
.iv-held-text { padding: 1.6em; display: grid; align-content: center; gap: .7em; justify-items: start; }
.iv-held-text b { font: 700 1.9em/1.05 var(--text); letter-spacing: -.035em; }
.iv-held-text span { font-size: .92em; color: #4b5260; line-height: 1.45; }
.iv-held-text em { font-style: normal; font-size: .85em; font-weight: 600; padding: .7em 1.3em; border-radius: 99px; background: #15171c; color: #fff; }
.iv-held-bild { background: #cfd4db url(/uploads/welt/branche-handwerk-800.webp) center / cover; position: relative; }
.iv-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding: 1em 1.6em; }
.iv-reihe span { height: 3.6em; border-radius: .8em; background: #f1f2f4; }
.iv-fuss { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .9em 1.6em 1.1em; border-top: 1px solid rgba(17, 19, 24, .06); font-size: .82em; color: #4b5260; }
.iv-recht b { font-weight: 600; color: #15171c; }
.iv-recht-fehlt { display: none; }
/* Ohne eigenes Design: die Baukastenvorlage */
.iv-vorlage { display: none; }
.ohne-design .iv-held, .ohne-design .iv-reihe { display: none; }
.ohne-design .iv-vorlage { display: block; margin: 0 1.6em 1em; padding: 2em; border-radius: .3em; background: #dfe3e8; text-align: center; font-family: Georgia, 'Times New Roman', serif; color: #555; }
.iv-vorlage b { display: block; font-size: 1.7em; font-weight: 400; color: #333; margin-bottom: .4em; }
.iv-vorlage u { color: #3b5bdb; }
.ohne-design .iv-logo { border-radius: 0; background: #9aa0a8; }
.ohne-design .iv-kopf { font-family: Arial, sans-serif; }
.ohne-dsgvo .iv-recht { display: none; }
.ohne-dsgvo .iv-recht-fehlt { display: inline; }
/* Handy */
.iv-handy {
  position: absolute; right: 0; bottom: 0; width: 13em;
  padding: .55em; border-radius: 2.2em; background: #111318;
  box-shadow: 0 40px 80px rgba(17, 19, 24, .3);
  rotate: 5deg;
  transition: rotate .8s var(--kurve);
}
.immer-vorschau:hover .iv-handy { rotate: 2deg; }
.iv-handy-schirm { position: relative; border-radius: 1.7em; overflow: hidden; background: #fff; height: 23em; font-family: var(--text); color: #15171c; }
.iv-handy-gut { display: grid; gap: .6em; padding: 1.4em .9em .9em; }
.iv-handy-gut i { height: 7em; border-radius: .8em; background: #cfd4db url(/uploads/welt/branche-handwerk-800.webp) center / cover; }
.iv-handy-gut b { font: 700 1.25em/1.08 var(--text); letter-spacing: -.03em; }
.iv-handy-gut span { font-size: .78em; color: #4b5260; }
.iv-handy-gut em { justify-self: start; font-style: normal; font-size: .75em; font-weight: 600; padding: .6em 1.1em; border-radius: 99px; background: #15171c; color: #fff; }
.iv-handy-schlecht { display: none; position: absolute; inset: 0; padding: 1.4em 0 0 .4em; }
.iv-handy-schlecht div { width: 30em; transform: scale(.42); transform-origin: 0 0; }
.iv-handy-schlecht p { position: absolute; left: .8em; right: .8em; bottom: .8em; padding: .6em .8em; border-radius: .8em; background: #111318; color: #fff; font-size: .78em; line-height: 1.35; }
.ohne-geraete .iv-handy-gut { display: none; }
.ohne-geraete .iv-handy-schlecht { display: block; }
/* Übergabe */
.iv-uebergabe {
  position: absolute; left: -2em; bottom: 1em; z-index: 2;
  display: flex; align-items: center; gap: .8em;
  padding: .8em 1.2em .8em .6em; border-radius: 1.2em;
  background: rgba(255, 255, 255, .86); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 50px rgba(17, 19, 24, .16);
  font-size: .95em; max-width: 22em;
}
.iv-uebergabe .symbol { width: 3.6em; filter: saturate(.5) drop-shadow(0 6px 8px rgba(17, 19, 24, .2)); }
.iv-uebergabe b { display: block; font-weight: 700; }
.iv-uebergabe span { display: block; color: var(--tinte-3); font-size: .9em; }
.iv-uebergabe .iv-frage { display: none; }
.ohne-uebergabe .iv-uebergabe .symbol { opacity: .25; filter: grayscale(1); }
.ohne-uebergabe .iv-uebergabe .iv-uebergabe-ja { display: none; }
.ohne-uebergabe .iv-uebergabe .iv-frage { display: block; }
/* Hinweise, die nur auftauchen, wenn etwas fehlt */
.iv-hinweis {
  position: absolute; z-index: 3;
  display: none; align-items: center; gap: .5em;
  padding: .55em .9em; border-radius: 99px;
  background: #111318; color: #fff;
  font: 600 .9em/1.2 var(--text);
  box-shadow: 0 14px 30px rgba(17, 19, 24, .3);
  white-space: nowrap;
  animation: einblenden .5s var(--aus) both;
}
.iv-hinweis::before { content: '!'; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; color: #111318; font-weight: 800; font-size: .85em; }
.iv-hinweis-ssl { top: 3.6em; left: 3em; }
.iv-hinweis-domain { top: 3.6em; right: 8em; }
.iv-hinweis-design { top: 15em; left: 36%; }
.iv-hinweis-dsgvo { bottom: 6em; left: 2em; }
.iv-hinweis-geraete { bottom: 26em; right: -1em; }
.ohne-ssl .iv-hinweis-ssl, .ohne-domain .iv-hinweis-domain, .ohne-design .iv-hinweis-design,
.ohne-dsgvo .iv-hinweis-dsgvo, .ohne-geraete .iv-hinweis-geraete { display: inline-flex; }
@media (max-width: 1000px) {
  .immer-buehne { grid-template-columns: minmax(0, 1fr); }
  .immer-vorschau { order: -1; font-size: 1.35vw; }
}
@media (max-width: 600px) { .immer-vorschau { font-size: 1.6vw; padding-right: 3em; } .iv-uebergabe { left: 0; } }

/* ---- Leistungs-Kompass: drei Fragen, eine Empfehlung ----------------------------------------- */
.kompass {
  padding: clamp(100px, 12vw, 180px) var(--rand);
  background: radial-gradient(55% 60% at 75% 40%, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--grund-tief);
}
.kompass-kopf { max-width: 1400px; margin: 0 auto clamp(36px, 4vw, 60px); display: grid; gap: 18px; }
.kompass-kopf .titel { max-width: 14ch; }
.kompass-tafel { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); border-radius: 34px; overflow: hidden; }
.kompass-fragen { padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 30px; align-content: start; }
.frage-titel, .kompass legend, .stil legend, .zeitplan legend {
  display: flex; align-items: center; gap: 11px;
  padding: 0; margin-bottom: 14px;
  font: 600 17px/1.3 var(--text); letter-spacing: -.015em; color: var(--tinte);
}
.nr { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tinte); color: #fff; font: 700 13px/1 var(--text); letter-spacing: 0; }
.kompass-ergebnis {
  position: relative;
  background: #15171c; color: #fff;
  padding: clamp(26px, 3.4vw, 52px);
  display: grid; gap: 12px; align-content: center; justify-items: start;
}
.kompass-symbol { width: clamp(120px, 12vw, 176px); margin: -8px 0 4px -10px; transition: transform .6s var(--kurve), opacity .3s ease, filter .3s ease; }
.kompass-ergebnis.wechsel .kompass-symbol { transform: scale(.86) rotate(-10deg); opacity: .3; filter: blur(4px); }
.kompass-ergebnis .etikett { color: rgba(238, 240, 243, .62); }
.kompass-name { font: 600 clamp(28px, 2.6vw, 40px)/1.08 var(--text); letter-spacing: -.035em; }
.kompass-preis { font: 600 clamp(40px, 3.8vw, 60px)/1 var(--text); letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; }
.kompass-preis small { font-size: .4em; letter-spacing: 0; color: rgba(238, 240, 243, .7); margin-right: .25em; }
.kompass-grund { color: rgba(238, 240, 243, .8); max-width: 42ch; font-size: 16px; }
.kompass-extras { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 2px 0 6px; }
.kompass-extras li { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); font-size: 13.5px; font-weight: 600; color: rgba(238, 240, 243, .92); }
.kompass-tel { font-size: 14.5px; color: rgba(238, 240, 243, .72); }
.kompass-tel a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.kompass-ergebnis > * { transition: opacity .3s ease, filter .3s ease; }
.kompass-ergebnis.wechsel > :not(.kompass-symbol) { opacity: .35; filter: blur(2px); }
@media (max-width: 900px) { .kompass-tafel { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
 * /ablauf
 * ======================================================================== */

/* ---- Auftakt: Ein Fenster geht auf, dann fliegt die Kamera die Straße entlang -----
 * --auf (0 bis 1) öffnet das Fenster im ersten Stück des Scrollens; danach spult
 * welt.js das Video (data-scrub-ab). Ohne Skript steht das Bild ganz offen. */
.weg-auftakt { position: relative; background: var(--grund); }
.welt-an .weg-auftakt { height: 340vh; }
.weg-buehne {
  --auf: clamp(0, calc(var(--p, 1) / .26), 1);
  position: relative; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
}
.welt-an .weg-buehne { position: sticky; top: 0; }
.weg-fenster {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #cfd6d4;
  clip-path: inset(calc((1 - var(--auf)) * 26vh) calc((1 - var(--auf)) * 22vw) calc((1 - var(--auf)) * 12vh) round calc((1 - var(--auf)) * 44px));
}
.weg-fenster img, .weg-fenster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(calc(1.16 - var(--auf) * .16)); }
.weg-fenster video { --film-ab: .27; }
.weg-fenster .welt-schleier {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .34) 0%, rgba(10, 11, 14, 0) 22%),
    linear-gradient(0deg, rgba(10, 11, 14, .62) 0%, rgba(10, 11, 14, .2) 28%, rgba(10, 11, 14, 0) 50%);
  opacity: var(--auf);
}
.weg-fenster .ki-marke { z-index: 2; }
.weg-vorab {
  position: absolute; left: 0; right: 0; top: clamp(100px, 14vh, 140px); z-index: 3;
  padding: 0 var(--rand);
  display: grid; justify-items: center; gap: 6px; text-align: center;
  opacity: calc(1 - var(--auf) * 2);
  transform: translate3d(0, calc(var(--auf) * -40px), 0);
  pointer-events: none;
}
.weg-vorab p { font: 600 clamp(19px, 1.7vw, 26px)/1.25 var(--text); letter-spacing: -.025em; color: var(--tinte); }
.weg-vorab small { font-size: 15.5px; color: var(--tinte-3); }
.weg-inhalt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: 0 var(--rand) clamp(26px, 5vh, 60px);
}
.weg-inhalt .glaswort { font-size: clamp(80px, 18vw, 330px); }
/* Die Buchstaben steigen mit dem Öffnen des Fensters auf */
.weg-inhalt .glaswort-buchstaben > span {
  --k: clamp(0, calc((var(--auf) - .42 - var(--i, 0) * .04) / .28), 1);
  animation: glanz 9s cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: calc(3s + var(--i, 0) * 90ms);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 110%), 0) rotate(calc((1 - var(--k)) * 5deg));
}
.weg-inhalt .lead { color: #fff; max-width: 40ch; margin-bottom: 8px; opacity: clamp(0, calc((var(--auf) - .7) * 4), 1); text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.wegweiser {
  position: absolute; right: var(--rand); top: 50%; z-index: 3;
  transform: translateY(-50%);
  list-style: none; margin: 0; padding: 12px;
  border-radius: 26px;
  display: grid; gap: 2px;
  opacity: clamp(0, calc((var(--p, 1) - .28) * 9), 1);
}
.wegweiser li { --k: clamp(0, calc((var(--p, 1) - var(--an, 0)) / .05), 1); }
.wegweiser a {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  padding: 8px 16px 8px 8px; border-radius: 16px;
  color: #fff; text-decoration: none;
  opacity: calc(.5 + var(--k) * .5);
  transition: background-color .2s;
}
.wegweiser a:hover { background: rgba(255, 255, 255, .1); }
.wegweiser .nr { width: 36px; height: 36px; font-size: 14px; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, var(--k)); color: rgb(calc(255 - var(--k) * 238) calc(255 - var(--k) * 236) calc(255 - var(--k) * 231)); }
.wegweiser b { display: block; font: 600 16px/1.2 var(--text); letter-spacing: -.015em; }
.wegweiser small { display: block; font-size: 14px; color: rgba(238, 240, 243, .74); }
.weg-scroll { position: absolute; left: 50%; bottom: 20px; z-index: 3; width: 1px; height: 44px; background: rgba(17, 19, 24, .2); overflow: hidden; opacity: calc(1 - var(--p, 1) * 18); }
.weg-scroll i { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--tinte); animation: rinnen 2.2s cubic-bezier(.6, 0, .3, 1) 1.4s infinite both; }
@media (max-width: 760px) {
  .wegweiser { display: none; }
  .weg-fenster { clip-path: inset(calc((1 - var(--auf)) * 28vh) calc((1 - var(--auf)) * 10vw) calc((1 - var(--auf)) * 14vh) round calc((1 - var(--auf)) * 30px)); }
}

/* ---- Der Weg: vier Schritte, jeder mit einer kleinen Vorführung ---------------------- */
.weg-schritte {
  position: relative;
  max-width: 1480px; margin: 0 auto;
  padding: clamp(100px, 12vw, 170px) var(--rand) clamp(80px, 10vw, 140px);
  display: grid; gap: clamp(100px, 14vw, 210px);
}
.weg-linie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.weg-linie path { fill: none; stroke: rgba(17, 19, 24, .2); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.welt-an .weg-linie path { stroke-dashoffset: calc(1 - clamp(0, calc((var(--durch, 1) - .06) * 1.35), 1)); }
.weg-linie-schmal { display: none; }
.schritt-teil { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.schritt-teil-dreh .demo { order: -1; }
.schritt-text { display: grid; gap: 16px; max-width: 580px; }
.schritt-teil-dreh .schritt-text { justify-self: end; }
.schritt-kopf { display: flex; align-items: center; gap: 14px; }
.schritt-kopf .nr { width: 42px; height: 42px; font-size: 16px; }
.schritt-kopf .etikett { font-size: 14px; }
.schritt-text h2 { font: 600 clamp(30px, 3vw, 46px)/1.06 var(--text); letter-spacing: -.035em; text-wrap: balance; }
.schritt-text > p:not([class]) { color: var(--tinte-2); }
.schritt-fakten { margin-top: 8px; border-top: 1px solid var(--strich); }
.schritt-fakten div { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--strich); }
.schritt-fakten dt { font: 600 14.5px/1.5 var(--text); color: var(--tinte); }
.schritt-fakten dd { color: var(--tinte-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 900px) {
  .weg-linie-breit { display: none; }
  .weg-linie-schmal { display: inline; }
  .schritt-teil { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 18px; }
  .schritt-teil-dreh .demo { order: 0; }
  .schritt-teil-dreh .schritt-text { justify-self: start; }
  .schritt-fakten div { grid-template-columns: 1fr; gap: 2px; }
}

/* Vorführungen: Ohne Skript stehen sie im Endzustand */
.demo { position: relative; border-radius: 30px; padding: clamp(20px, 2.4vw, 32px); font-family: var(--text); }
.welt-an .demo .nach { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); transition: opacity .5s ease, transform .7s var(--kurve); transition-delay: calc(var(--n, 0) * .75s + .3s); }
.welt-an .demo.da .nach { opacity: 1; transform: none; }
/* 1: Das Gespräch */
.dg-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--strich); }
.dg-kopf .symbol { width: 46px; }
.dg-kopf b { display: block; font: 700 16px/1.2 var(--text); }
.dg-kopf span { display: block; font-size: 13px; color: var(--tinte-3); }
.dg-verlauf { display: grid; gap: 10px; }
.dg-blase { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.dg-ich { justify-self: end; background: var(--tinte); color: #fff; border-bottom-right-radius: 6px; }
.dg-sie { justify-self: start; background: #fff; border: 1px solid var(--strich); border-bottom-left-radius: 6px; }
.dg-angebot { margin-top: 14px; display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px 10px 8px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 18px 40px rgba(17, 19, 24, .1); }
.dg-angebot .symbol { width: 62px; }
.dg-angebot small { display: block; font-size: 13px; color: var(--tinte-3); }
.dg-angebot b { display: block; font: 700 26px/1.05 var(--text); letter-spacing: -.035em; }
.dg-angebot i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 99px; background: rgba(17, 19, 24, .07); }
/* 2: Die Skizze zeichnet sich */
.demo-skizze svg { width: 100%; height: auto; overflow: visible; }
.demo-skizze .strich { fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.demo-skizze .strich-leise { stroke: rgba(17, 19, 24, .35); }
.welt-an .demo-skizze .strich { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--kurve); transition-delay: calc(var(--n, 0) * .16s + .2s); }
.welt-an .demo-skizze.da .strich { stroke-dashoffset: 0; }
.demo-skizze text { font: 600 11px var(--text); fill: var(--tinte-3); }
.demo-skizze .notiz { font: 600 12px var(--text); fill: var(--tinte); }
.welt-an .demo-skizze text { opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--n, 0) * .16s + 1s); }
.welt-an .demo-skizze.da text { opacity: 1; }
/* 3: Skizze und Entwurf im Vergleich */
.demo-entwurf { padding: 0; overflow: hidden; aspect-ratio: 4 / 3.2; --teil: 50%; }
.de-seite { position: absolute; inset: 0; padding: 20px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.de-skizze { background: #fff; }
.de-skizze .de-kopf i, .de-skizze .de-feld, .de-skizze .de-karten i { border: 1.5px dashed rgba(17, 19, 24, .3); border-radius: 8px; }
.de-kopf { display: flex; align-items: center; gap: 10px; }
.de-kopf i { display: block; height: 26px; }
.de-kopf i:first-child { width: 26px; border-radius: 50% !important; }
.de-kopf i:nth-child(2) { width: 90px; }
.de-kopf i:last-child { width: 70px; margin-left: auto; }
.de-feld { display: grid; place-items: center; }
.de-skizze .de-feld { background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(17, 19, 24, .22) 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), rgba(17, 19, 24, .22) 50%, transparent calc(50% + 1px)); }
.de-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.de-karten i { display: block; height: 48px; }
.de-design { background: #eef1f3; clip-path: inset(0 0 0 var(--teil)); }
.de-design .de-kopf b { width: 26px; height: 26px; border-radius: 50%; background: #1f3a5f; }
.de-design .de-kopf span { font: 700 14px/1 var(--text); letter-spacing: -.02em; color: #15171c; }
.de-design .de-kopf em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 99px; background: #1f3a5f; color: #fff; }
.de-design .de-feld { position: relative; place-items: end start; padding: 16px; border-radius: 14px; overflow: hidden; background: #cfd6dc url(/uploads/welt/branche-dienst-800.webp) center / cover; color: #fff; }
.de-design .de-feld::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 30, 50, .7), rgba(15, 30, 50, 0) 70%); }
.de-design .de-feld b { position: relative; font: 700 clamp(17px, 1.7vw, 24px)/1.08 var(--text); letter-spacing: -.03em; max-width: 12ch; }
.de-design .de-karten i { background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(17, 19, 24, .08); }
.de-design .de-karten i:first-child { background: #1f3a5f; }
.de-etikett { position: absolute; bottom: 14px; z-index: 2; padding: 6px 11px; border-radius: 99px; background: rgba(17, 19, 24, .78); color: #fff; font: 600 12px/1 var(--text); pointer-events: none; }
.de-etikett-links { left: 14px; }
.de-etikett-rechts { right: 14px; }
.de-regler { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.de-griff { position: absolute; top: 0; bottom: 0; left: var(--teil); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 19, 24, .12); pointer-events: none; }
.de-griff::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23111318' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 8px 20px rgba(17, 19, 24, .25);
  transition: transform .2s var(--aus);
}
.demo-entwurf:active .de-griff::after { transform: scale(.94); }
.de-regler:focus-visible ~ .de-griff::after { outline: 2px solid var(--tinte); outline-offset: 3px; }
/* 4: Die Seite geht online */
.ds-fenster { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--strich); background: #fff; box-shadow: 0 20px 44px rgba(17, 19, 24, .1); }
.ds-leiste { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #f3f4f6; }
.ds-leiste > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(17, 19, 24, .14); }
.ds-adresse { flex: 1; min-width: 0; margin-left: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .08); font: 500 12.5px/1 var(--text); color: var(--tinte-2); }
.ds-adresse svg { width: 12px; height: 12px; flex: none; }
.ds-tippen { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 12em; vertical-align: bottom; }
.welt-an .demo-start .ds-tippen { max-width: 0; transition: max-width 1.1s steps(14) .4s; }
.welt-an .demo-start.da .ds-tippen { max-width: 12em; }
.ds-balken { height: 2px; background: var(--tinte); transform-origin: 0 50%; opacity: 0; }
.welt-an .demo-start.da .ds-balken { animation: laden 1.5s var(--kurve) 1.5s both; }
.ds-seite { position: relative; height: clamp(130px, 13vw, 180px); background: #d9dee2 url(/uploads/welt/branche-gastro-800.webp) center / cover; }
.ds-seite::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 19, 24, .55), rgba(17, 19, 24, 0) 65%); }
.ds-seite b { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; font: 700 clamp(16px, 1.5vw, 21px)/1.1 var(--text); letter-spacing: -.03em; }
.welt-an .demo-start .ds-seite { opacity: 0; transition: opacity .8s ease 2.6s; }
.welt-an .demo-start.da .ds-seite { opacity: 1; }
.ds-liste { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.ds-liste li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.ds-liste li::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.ds-online {
  position: absolute; top: -16px; right: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 99px;
  background: var(--tinte); color: #fff;
  font: 700 14px/1 var(--text);
  box-shadow: 0 14px 30px rgba(17, 19, 24, .25);
}
.ds-online::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: atmen-hell 2.4s ease-out infinite; }
@keyframes atmen-hell { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
.ds-schluessel { position: absolute; right: -14px; bottom: -34px; width: 112px; z-index: 2; }
.ds-schluessel .symbol { transform-origin: 30% 30%; }
.welt-an .demo-start.da .ds-schluessel .symbol { animation: schrauben 3.4s var(--kurve) 3.2s infinite; }
@media (max-width: 480px) { .ds-liste { grid-template-columns: 1fr; } }

/* ---- Stil-Finder: vier Fragen, die Vorschau baut sich live um -------------------------
 * stil-finder.js setzt data-branche, data-stimmung, data-farbe und data-umfang an
 * der Vorschau und baut Inhalte, Bausteine und das Handy neu. */
.stil { position: relative; padding: clamp(100px, 12vw, 180px) var(--rand); background: #fff; }
.stil-kopf { max-width: 1480px; margin: 0 auto clamp(40px, 5vw, 70px); display: grid; gap: 18px; }
.stil-kopf .titel { max-width: 13ch; }
.stil-tafel {
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "fragen vorschau" "fragen ergebnis";
  gap: 26px clamp(30px, 5vw, 80px);
  align-items: start;
}
.stil-fragen { grid-area: fragen; display: grid; gap: 26px; align-content: start; }
.stil-zufall { justify-self: start; }
.stil-zufall svg { width: 18px; height: 18px; transition: transform .5s var(--kurve); }
.stil-zufall:hover svg { transform: rotate(90deg); }
.farbpunkt { display: inline-block; width: .85em; height: .85em; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(17, 19, 24, .16); }
.stil-ergebnis { grid-area: ergebnis; display: grid; gap: 10px; justify-items: start; }
.stil-satz { font: 600 clamp(20px, 1.8vw, 26px)/1.35 var(--text); letter-spacing: -.02em; max-width: 40ch; }
.stil-preis { color: var(--tinte-3); font-weight: 600; }

.stil-vorschau {
  grid-area: vorschau;
  position: relative;
  font-size: clamp(8.5px, .86vw, 13px);
  padding: 0 7em 6em 0;
  --sv-bg: #f4f6f8; --sv-flaeche: #e2e8ee; --sv-ink: #1b2430; --sv-akz: #1f3a5f; --sv-akz-ink: #fff;
  --sv-font: 600 2.35em/1.08 'Manrope', sans-serif; --sv-tt: none; --sv-ls: -.03em; --sv-r: 1.1em;
}
.sv-fenster { position: relative; border-radius: 1.3em; overflow: hidden; background: var(--sv-bg); border: 1px solid rgba(17, 19, 24, .1); box-shadow: 0 2px 6px rgba(17, 19, 24, .05), 0 60px 120px rgba(17, 19, 24, .16); transform: perspective(1600px) rotateY(-6deg) rotateX(3deg); transition: transform .9s var(--kurve), background-color .5s; }
.stil-vorschau.wechsel .sv-fenster { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) scale(.985); }
.sv-leiste { display: flex; align-items: center; gap: .5em; height: 2.8em; padding: 0 1em; background: #f3f4f6; border-bottom: 1px solid rgba(17, 19, 24, .06); font: 500 .9em/1 var(--text); color: var(--tinte-3); }
.sv-leiste > i { width: .8em; height: .8em; border-radius: 50%; background: rgba(17, 19, 24, .14); }
.sv-leiste span { margin: 0 auto; padding: .45em 1.6em; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 24, .07); }
.sv-seite { color: var(--sv-ink); font-family: var(--text); transition: color .5s; }
.sv-seite > * { transition: opacity .35s ease, filter .35s ease; }
.stil-vorschau.wechsel .sv-seite > * { opacity: .25; filter: blur(3px); }
.sv-kopf { display: flex; align-items: center; gap: .8em; padding: 1.1em 1.6em; font-size: .95em; }
.sv-logo { width: 2.3em; height: 2.3em; border-radius: calc(var(--sv-r) * .55); display: grid; place-items: center; background: var(--sv-akz); color: var(--sv-akz-ink); font: 700 .8em/1 var(--text); transition: background-color .5s, border-radius .5s; }
.sv-name { font-weight: 700; letter-spacing: -.01em; }
.sv-nav { margin-left: auto; display: flex; gap: 1.2em; opacity: .75; }
.sv-nav i { font-style: normal; }
.sv-kopf-knopf { padding: .6em 1.1em; border-radius: min(var(--sv-r), 99px); background: var(--sv-akz); color: var(--sv-akz-ink); font-weight: 700; font-size: .85em; transition: background-color .5s, border-radius .5s; }
.sv-held { position: relative; margin: 0 1.6em; display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.4em; align-items: center; min-height: 15em; }
.sv-held-text { display: grid; gap: .75em; justify-items: start; position: relative; z-index: 1; }
.sv-marke { font-size: .8em; font-weight: 700; letter-spacing: .02em; opacity: .7; }
.sv-titel { font: var(--sv-font); text-transform: var(--sv-tt); letter-spacing: var(--sv-ls); max-width: 16ch; }
.sv-text { font-size: .95em; line-height: 1.5; opacity: .78; max-width: 32ch; }
.sv-knopf { padding: .8em 1.4em; border-radius: min(var(--sv-r), 99px); background: var(--sv-akz); color: var(--sv-akz-ink); font-size: .9em; font-weight: 700; transition: background-color .5s, border-radius .5s; }
.sv-held-bild { position: relative; align-self: stretch; min-height: 14em; border-radius: var(--sv-r); background: #cfd6dc center / cover; overflow: hidden; transition: border-radius .6s var(--kurve); }
.sv-held-bild .ki-marke { right: .6em; bottom: .6em; font-size: 12px; padding: 3px 7px; }
.sv-aufkleber { position: absolute; top: -.8em; right: -.6em; z-index: 2; display: none; place-items: center; width: 5.2em; height: 5.2em; border-radius: 50%; background: var(--sv-akz); color: var(--sv-akz-ink); font: 800 .85em/1.05 var(--text); text-align: center; rotate: 12deg; box-shadow: 0 .6em 1.4em rgba(17, 19, 24, .22); }
/* Stimmung: kräftig */
.stil-vorschau[data-stimmung="1"] .sv-held { grid-template-columns: 1fr; min-height: 17em; margin: 0; border-radius: 0; }
.stil-vorschau[data-stimmung="1"] .sv-held-bild { position: absolute; inset: 0; border-radius: 0; }
.stil-vorschau[data-stimmung="1"] .sv-held-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 14, .78), rgba(10, 11, 14, .1)); }
.stil-vorschau[data-stimmung="1"] .sv-held-text { padding: 2.2em 1.6em; color: #fff; }
.stil-vorschau[data-stimmung="1"] .sv-titel { font-weight: 800; }
/* Stimmung: edel */
.stil-vorschau[data-stimmung="2"] .sv-held { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1em; padding-top: .6em; }
.stil-vorschau[data-stimmung="2"] .sv-held-text { justify-items: center; }
.stil-vorschau[data-stimmung="2"] .sv-held-bild { width: 100%; min-height: 9em; border: 1px solid var(--sv-ink); padding: .4em; background-clip: content-box; }
.stil-vorschau[data-stimmung="2"] .sv-knopf, .stil-vorschau[data-stimmung="2"] .sv-kopf-knopf { background: transparent; color: var(--sv-ink); box-shadow: inset 0 0 0 1px var(--sv-ink); }
.stil-vorschau[data-stimmung="2"] .sv-marke { letter-spacing: .2em; text-transform: uppercase; font-size: .7em; }
/* Stimmung: verspielt */
.stil-vorschau[data-stimmung="3"] .sv-held-bild { border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%; }
.stil-vorschau[data-stimmung="3"] .sv-aufkleber { display: grid; }
.stil-vorschau[data-stimmung="3"] .sv-knopf { box-shadow: 0 .5em 1.2em color-mix(in srgb, var(--sv-akz) 40%, transparent); }
.stil-vorschau[data-stimmung="3"] .svm-karte { rotate: -1.2deg; }
.stil-vorschau[data-stimmung="3"] .svm-karte:nth-child(2n) { rotate: 1.4deg; }
/* Bausteine je Branche und Umfang */
.sv-module { display: grid; gap: 1em; padding: 1.3em 1.6em 1.6em; }
.svm-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.svm-karte { display: grid; gap: .35em; padding: 1em; border-radius: calc(var(--sv-r) * .8); background: var(--sv-flaeche); font-size: .88em; transition: background-color .5s, border-radius .5s, rotate .6s var(--kurve); }
.svm-karte b { font-size: 1.05em; letter-spacing: -.01em; }
.svm-karte span { opacity: .72; line-height: 1.35; }
.svm-karte svg { width: 1.6em; height: 1.6em; color: var(--sv-akz); }
.svm-karte-bild { min-height: 4.2em; border-radius: calc(var(--sv-r) * .6); background: var(--sv-bg) center / cover; }
.svm-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; padding: .8em 1em; border-radius: calc(var(--sv-r) * .8); background: var(--sv-flaeche); font-size: .9em; transition: background-color .5s, border-radius .5s; }
.svm-zeile b { font-weight: 800; }
.svm-zeile i { font-style: normal; padding: .45em .9em; border-radius: min(var(--sv-r), 99px); background: var(--sv-bg); font-weight: 700; }
.svm-zeile i.an { background: var(--sv-akz); color: var(--sv-akz-ink); }
.svm-punkt { width: .7em; height: .7em; border-radius: 50%; background: var(--sv-akz); box-shadow: 0 0 0 .25em color-mix(in srgb, var(--sv-akz) 22%, transparent); }
.svm-rechts { margin-left: auto; }
.svm-korb { position: relative; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--sv-bg); }
.svm-korb svg { width: 1.2em; height: 1.2em; }
.svm-korb em { position: absolute; top: -.35em; right: -.35em; width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; background: var(--sv-akz); color: var(--sv-akz-ink); font: 800 .7em/1 var(--text); font-style: normal; }
.svm-preis { font-weight: 800; }
/* Das Handy daneben */
.sv-handy { position: absolute; right: 0; bottom: 0; width: 13.5em; padding: .55em; border-radius: 2.3em; background: #111318; box-shadow: 0 40px 80px rgba(17, 19, 24, .28); rotate: 5deg; transition: rotate .8s var(--kurve); }
.stil-vorschau:hover .sv-handy { rotate: 1deg; }
.sv-handy-schirm { border-radius: 1.8em; overflow: hidden; background: var(--sv-bg); color: var(--sv-ink); height: 25em; display: grid; align-content: start; gap: .7em; padding: 1.1em .9em; font-family: var(--text); transition: background-color .5s, color .5s; }
.svh-kopf { display: flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 700; }
.svh-kopf b { width: 1.9em; height: 1.9em; border-radius: calc(var(--sv-r) * .5); display: grid; place-items: center; background: var(--sv-akz); color: var(--sv-akz-ink); font-size: .8em; }
.svh-kopf i { margin-left: auto; width: 1.3em; height: .9em; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.svh-bild { height: 8.5em; border-radius: var(--sv-r); background: #cfd6dc center / cover; }
.stil-vorschau[data-stimmung="3"] .svh-bild { border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%; }
.svh-titel { font: var(--sv-font); font-size: 1.35em; text-transform: var(--sv-tt); letter-spacing: var(--sv-ls); line-height: 1.08; }
.svh-knopf { justify-self: start; padding: .65em 1.1em; border-radius: min(var(--sv-r), 99px); background: var(--sv-akz); color: var(--sv-akz-ink); font-size: .75em; font-weight: 700; }
.stil-vorschau[data-stimmung="2"] .svh-knopf { background: transparent; color: var(--sv-ink); box-shadow: inset 0 0 0 1px var(--sv-ink); }
.svh-zeile { padding: .7em; border-radius: calc(var(--sv-r) * .7); background: var(--sv-flaeche); font-size: .72em; font-weight: 700; }
@media (max-width: 900px) {
  .stil-tafel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vorschau" "fragen" "ergebnis"; }
  .stil-vorschau { font-size: 1.45vw; padding-right: 5em; }
  .sv-fenster { transform: none; }
  .sv-nav { display: none; }
}
@media (max-width: 560px) { .stil-vorschau { font-size: 1.9vw; } }

/* ---- Danach: drei Zusagen, jede mit einer kleinen Vorführung ---------------------------- */
.danach { padding: clamp(110px, 12vw, 170px) var(--rand); background: var(--grund); }
.danach > .titel { max-width: 1480px; margin: 0 auto clamp(80px, 9vw, 120px); }
.danach-reihe { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); align-items: stretch; }
.danach-teil { position: relative; border-radius: 30px; padding: 74px 26px 26px; display: grid; gap: 12px; align-content: start; }
.danach-symbol { position: absolute; top: -66px; left: 14px; width: 132px; }
.danach-teil p { color: var(--tinte-2); }
.danach-demo { position: relative; margin-top: 8px; border-radius: 18px; background: var(--grund); padding: 14px 16px; font-size: 14px; }
.protokoll { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.protokoll li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-weight: 600; }
.protokoll li::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.protokoll time { font-size: 13.5px; font-weight: 500; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.welt-an .danach-teil .protokoll li { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity .5s ease, transform .6s var(--kurve); transition-delay: calc(var(--n, 0) * .55s + .5s); }
.welt-an .danach-teil.da .protokoll li { opacity: 1; transform: none; }
.draht { display: grid; gap: 8px; min-height: 128px; align-content: start; }
.draht p { max-width: 86%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; }
.draht-sie { justify-self: start; background: #fff; border: 1px solid var(--strich); border-bottom-left-radius: 5px; }
.draht-ich { justify-self: end; background: var(--tinte); color: #fff; border-bottom-right-radius: 5px; }
.draht-ich small { display: block; text-align: right; font-size: 12.5px; opacity: .7; margin-top: 2px; }
.draht-tippt { position: absolute; right: 16px; bottom: 14px; display: none; gap: 4px; padding: 11px 13px; border-radius: 16px; border-bottom-right-radius: 5px; background: var(--tinte); }
.draht-tippt i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tippen 1.1s infinite; animation-delay: calc(var(--n, 0) * .15s); }
@keyframes tippen { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.welt-an .draht-sie { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .5s ease .4s, transform .6s var(--kurve) .4s; }
.welt-an .draht-ich { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .5s ease 2.6s, transform .6s var(--kurve) 2.6s; }
.welt-an .danach-teil.da .draht-sie, .welt-an .danach-teil.da .draht-ich { opacity: 1; transform: none; }
.welt-an .draht-tippt { display: inline-flex; opacity: 0; }
.welt-an .danach-teil.da .draht-tippt { animation: kurz-da 1.6s ease 1s both; }
@keyframes kurz-da { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.konto { display: grid; }
.konto div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--strich); }
.konto div:last-child { border-bottom: 0; }
.konto dt { color: var(--tinte-3); }
.konto dd { font-weight: 700; text-align: right; }
.konto-siegel { display: inline-flex; align-items: center; gap: 6px; }
.konto-siegel svg { width: 14px; height: 14px; }
@media (max-width: 1000px) { .danach-reihe { grid-template-columns: minmax(0, 1fr); row-gap: 90px; } }

/* ---- Zeitplan: rückwärts gerechnet vom Wunschtermin -------------------------------------- */
.zeitplan {
  padding: clamp(100px, 12vw, 180px) var(--rand);
  background: radial-gradient(55% 60% at 25% 30%, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--grund-tief);
}
.zeitplan-kopf { max-width: 1400px; margin: 0 auto clamp(36px, 4vw, 60px); display: grid; gap: 18px; }
.zeitplan-kopf .titel { max-width: 15ch; }
.zeitplan-tafel { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 34px; overflow: hidden; }
.zeitplan-wahl { padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 30px; align-content: start; }
.zeitplan-monate .pille span { min-width: 8.4em; justify-content: center; }
.zeitplan-ergebnis { position: relative; background: #15171c; color: #fff; padding: clamp(26px, 3.4vw, 52px); display: grid; gap: 14px; align-content: start; }
.zeitplan-ergebnis .etikett { color: rgba(238, 240, 243, .62); }
.zeitplan-kalender { position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px); width: clamp(88px, 8.5vw, 126px); }
.zeitplan-kalender.blaettert .symbol { animation: blaettern .7s var(--aus); }
@keyframes blaettern { 0% { transform: none; } 40% { transform: rotate(-9deg) translateY(-6px) scale(1.05); } 100% { transform: none; } }
.zeitplan-ziel { font: 600 clamp(26px, 2.4vw, 38px)/1.1 var(--text); letter-spacing: -.035em; max-width: 22ch; padding-right: clamp(90px, 9vw, 130px); text-wrap: balance; }
.zeitplan-leiste { list-style: none; padding: 0; margin: 6px 0 0; display: grid; }
.zeitplan-leiste li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.zeitplan-leiste li::before { content: ''; justify-self: center; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.zeitplan-leiste li:last-child::before { background: #fff; }
.zeitplan-leiste li:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: calc(50% + 8px); height: calc(100% - 4px); width: 2px; background: rgba(255, 255, 255, .22); }
.zeitplan-leiste b { font-weight: 600; }
.zeitplan-leiste span { font-variant-numeric: tabular-nums; color: rgba(238, 240, 243, .82); font-size: 15px; text-align: right; }
.zeitplan-urteil { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-size: 15px; line-height: 1.5; }
.zeitplan-urteil b { color: #fff; }
.zeitplan-tel { font-size: 14.5px; color: rgba(238, 240, 243, .72); }
.zeitplan-tel a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.zeitplan-ergebnis > :not(.zeitplan-kalender) { transition: opacity .3s ease, filter .3s ease; }
.zeitplan-ergebnis.wechsel > :not(.zeitplan-kalender) { opacity: .4; filter: blur(2px); }
@media (max-width: 900px) { .zeitplan-tafel { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
 * /anfrage: der Preisrechner
 * ======================================================================== */
/* Die Körperfläche muss durchsichtig sein, sonst liegt sie über dem festen Hintergrund */
.seite-werkbank { background: transparent; }
.hintergrund { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--grund); }
.hintergrund img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.05); transform: scale(1.15); }
.hintergrund::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(241, 242, 244, .74) 0%, rgba(241, 242, 244, .88) 100%); }
.ki-fest { position: absolute; right: 10px; top: 86px; bottom: auto; }
.werkbank { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(110px, 14vh, 150px) var(--rand) clamp(60px, 8vw, 100px); }
.werkbank-kopf { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.werkbank-kopf .titel { font-size: clamp(42px, 5.2vw, 82px); max-width: 14ch; }
.werkbank-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(20px, 3vw, 44px); align-items: start; }
.werkbank-karte { border-radius: 32px; padding: clamp(22px, 3vw, 44px); }
.stufen { list-style: none; padding: 0; margin: 0 0 clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 8px; }
.stufen button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 7px; border-radius: 999px;
  border: 1px solid var(--strich-stark); background: rgba(255, 255, 255, .6);
  color: var(--tinte-3); font: 600 14px/1 var(--text); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .16s var(--aus);
}
.stufen button:active { transform: scale(.97); }
.stufen button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(17, 19, 24, .08); font: 700 12.5px/1 var(--text); color: var(--tinte-2); }
.stufen button[aria-current] { color: var(--tinte); border-color: var(--tinte); background: #fff; }
.stufen button[aria-current] span, .stufen .fertig span { background: var(--tinte); color: #fff; }
.stufen button:disabled { opacity: .45; cursor: default; }
.werkbank-schritt { display: grid; gap: 26px; }
.werkbank-schritt h2 { outline: none; }
.werkbank fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.werkbank legend, .kontakt-termin legend { padding: 0; margin-bottom: 14px; font: 600 15px/1.35 var(--text); color: var(--tinte); }
.stil-hinweis { padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--strich); font-size: 15px; color: var(--tinte-2); }
.stil-hinweis b { color: var(--tinte); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.kachel { position: relative; cursor: pointer; }
.kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kachel > span {
  display: grid; gap: 6px; height: 100%;
  padding: 16px 18px; border-radius: 18px;
  border: 1px solid var(--strich-stark); background: rgba(255, 255, 255, .72);
  transition: background-color .2s, border-color .2s, transform .3s var(--kurve), box-shadow .2s;
}
.kachel b { font: 600 17px/1.25 var(--text); letter-spacing: -.015em; color: var(--tinte); }
.kachel small { font-size: 13.5px; line-height: 1.45; color: var(--tinte-3); }
.kachel em { font: 600 21px/1.1 var(--text); letter-spacing: -.03em; font-style: normal; color: var(--tinte); margin-top: 4px; font-variant-numeric: lining-nums; }
.kachel:hover > span { border-color: rgba(17, 19, 24, .38); transform: translateY(-2px); }
.kachel:active > span { transform: scale(.98); }
.kachel input:checked + span { background: var(--tinte); border-color: var(--tinte); box-shadow: 0 14px 30px rgba(17, 19, 24, .2); }
.kachel input:checked + span :is(b, em) { color: #fff; }
.kachel input:checked + span small { color: rgba(238, 240, 243, .76); }
.kachel input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 3px; }
.feld-hinweis { font-size: 14px; color: var(--tinte-3); margin-top: 12px; }
.feld-hinweis a { color: var(--tinte); font-weight: 600; }
.feld-fehler { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--tinte); }
.feld-fehler::before { content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tinte); color: #fff; font-size: 12px; }
.dunkel .feld-fehler { color: #fff; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feld { display: grid; gap: 7px; }
.feld-breit { grid-column: 1 / -1; }
.feld label { font-size: 14px; font-weight: 600; color: var(--tinte-2); }
.feld input, .feld textarea {
  width: 100%; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--strich-stark);
  background: #fff; color: var(--tinte);
  font: 500 15.5px/1.4 var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { resize: vertical; min-height: 110px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-3); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(17, 19, 24, .08); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--tinte); box-shadow: 0 0 0 1px var(--tinte); }
.werkbank-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 38px); padding-top: 22px; border-top: 1px solid var(--strich); }
.werkbank-fuss [data-weiter] { margin-left: auto; }
.zusammenfassung { display: grid; border-top: 1px solid var(--strich); }
.zusammenfassung div, .saeule-liste div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--strich); }
.zusammenfassung dt, .saeule-liste dt { font: 600 14px/1.5 var(--text); color: var(--tinte-3); }
.zusammenfassung dd, .saeule-liste dd { color: var(--tinte); font-size: 15.5px; }
.ergebnis { display: grid; gap: 16px; justify-items: start; outline: none; padding: 10px 0; }
.ergebnis-zeichen { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tinte); color: #fff; font: 700 28px/1 var(--text); }
.ergebnis p:not([class]) { color: var(--tinte-2); max-width: 56ch; }
.saeule { position: sticky; top: 96px; display: grid; gap: 8px; padding: 22px 24px 24px; border-radius: 28px; }
.saeule-objekt { width: 150px; margin: -86px auto -6px; }
.saeule-objekt .symbol { transform-origin: 70% 12%; }
.saeule-objekt.schwingt .symbol { animation: anstossen 1.1s var(--aus); }
.saeule .etikett { margin-top: 4px; }
.saeule-preis { font: 600 clamp(50px, 4.4vw, 70px)/1 var(--text); letter-spacing: -.04em; color: var(--tinte); font-variant-numeric: tabular-nums lining-nums; }
.saeule-art { color: var(--tinte-2); font-size: 15px; }
.saeule-liste { margin: 10px 0 4px; border-top: 1px solid var(--strich); }
.saeule-liste div { grid-template-columns: 76px 1fr; padding: 9px 0; }
.saeule-liste dd { font-size: 14.5px; }
.saeule-klein { font-size: 14px; color: var(--tinte-3); }
.saeule-direkt { font-size: 14px; color: var(--tinte-2); margin-top: 6px; }
.saeule-direkt a { color: var(--tinte); font-weight: 700; }
.fuss-schmal { padding-top: 34px; padding-bottom: 38px; }
.fuss-schmal .fuss-unten { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 960px) {
  .werkbank-raster { grid-template-columns: minmax(0, 1fr); }
  .saeule { position: relative; top: 0; order: -1; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
  .saeule-objekt { width: 90px; margin: 0; grid-row: span 2; }
  .saeule-liste, .saeule-klein, .saeule-direkt, .saeule .etikett { grid-column: 1 / -1; }
  .saeule .etikett { display: none; }
  .saeule-liste { display: none; }
  .felder { grid-template-columns: minmax(0, 1fr); }
}

/* Kalender (kalender.js) */
.kalender { max-width: 420px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--strich); }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kalender-titel { font: 700 16px/1 var(--text); letter-spacing: -.01em; color: var(--tinte); }
.kalender-blatt { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--strich-stark); background: #fff; color: var(--tinte); font: 400 20px/1 var(--text); cursor: pointer; transition: background-color .15s, transform .15s var(--aus); }
.kalender-blatt:hover:not(:disabled) { background: var(--grund); }
.kalender-blatt:active:not(:disabled) { transform: scale(.94); }
.kalender-blatt:disabled { opacity: .3; cursor: default; }
.kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalender-wt { text-align: center; font: 600 12.5px/2 var(--text); color: var(--tinte-3); }
.kalender-tag { height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--tinte); font: 600 13.5px/1 var(--text); cursor: pointer; transition: background-color .15s, border-color .15s; }
.kalender-tag:hover:not(:disabled) { background: rgba(17, 19, 24, .06); }
.kalender-tag.heute { border-color: var(--strich-stark); }
.kalender-tag.gewaehlt { background: var(--tinte); color: #fff; }
.kalender-tag:disabled { opacity: .3; cursor: default; }
.kalender-tag.feiertag:disabled { opacity: .45; text-decoration: line-through; }
.kalender-info { margin-top: 10px; font-size: 13.5px; color: var(--tinte-3); }

/* ===========================================================================
 * /kontakt: der Besprechungstisch am Fenster
 * ======================================================================== */
.kontakt-auftakt { position: relative; }
.welt-an .kontakt-auftakt { height: 190vh; }
.kontakt-buehne { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.welt-an .kontakt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; }
.kontakt-auftakt .seite-film img, .kontakt-auftakt .seite-film video { object-position: 60% 50%; }
.kontakt-auftakt .welt-schleier {
  background:
    linear-gradient(90deg, rgba(241, 242, 244, .88) 0%, rgba(241, 242, 244, .55) 34%, rgba(241, 242, 244, 0) 58%),
    linear-gradient(180deg, rgba(241, 242, 244, .5) 0%, rgba(241, 242, 244, 0) 28%);
}
.kontakt-kopf { max-width: 1320px; width: 100%; margin: 0 auto; padding: clamp(110px, 14vh, 160px) var(--rand) 0; display: grid; gap: 18px; justify-items: start; }
.kontakt-kopf .titel { max-width: 12ch; font-size: clamp(42px, 5vw, 80px); }
.kontakt-kopf .lead { max-width: 34ch; color: var(--tinte-2); }
.kanaele { grid-row: 3; list-style: none; margin: 0 auto; padding: 0 var(--rand) clamp(36px, 6vh, 70px); width: 100%; max-width: 1320px; }
.kanaele-leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 30px; overflow: hidden; }
.kanal {
  position: relative;
  display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; align-items: center;
  padding: 18px 22px 18px 16px;
  text-decoration: none;
  transition: background-color .25s;
}
.kanaele-leiste > li + li .kanal { border-left: 1px solid var(--strich); }
.kanal:hover { background: rgba(255, 255, 255, .72); }
.kanal:active { background: rgba(255, 255, 255, .9); }
.kanal img { grid-row: span 3; width: 72px; height: auto; transition: transform .6s var(--kurve); }
.kanal:hover img { transform: rotate(-9deg) scale(1.1); }
.kanal strong { font: 600 17px/1.2 var(--text); letter-spacing: -.015em; color: var(--tinte); }
.kanal span { font-size: 15px; font-weight: 700; color: var(--tinte); }
.kanal small { font-size: 14px; color: var(--tinte-3); }
.kontakt-bereich { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--rand); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.kontakt-karte { border-radius: 32px; padding: clamp(22px, 3vw, 44px); }
.kontakt-karte [data-formular] { display: grid; gap: 22px; justify-items: start; }
.kontakt-karte .felder { width: 100%; }
.kontakt-termin { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; }
.kontakt-vorab { width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--grund); font-size: 15px; color: var(--tinte-2); }
.kontakt-vorab b { color: var(--tinte); }
.kontakt-info { display: grid; gap: 16px; position: sticky; top: 96px; }
.kontakt-draht { border-radius: 28px; padding: 26px; display: grid; gap: 16px; }
.kontakt-person { display: grid; gap: 2px; }
.kontakt-person strong { font: 700 20px/1.2 var(--text); letter-spacing: -.02em; color: var(--tinte); }
.kontakt-person span { font-size: 14.5px; color: var(--tinte-3); }
.kontakt-zeiten { border-top: 1px solid var(--strich); }
.kontakt-zeiten div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--strich); font-size: 15px; }
.kontakt-zeiten dt { color: var(--tinte-2); }
.kontakt-zeiten dd { color: var(--tinte); font-weight: 700; }
.kontakt-adresse { color: var(--tinte-2); font-size: 15px; }
.kontakt-angebot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 24px; text-decoration: none; transition: transform .5s var(--kurve), box-shadow .3s; }
.kontakt-angebot strong { display: block; font: 700 18px/1.2 var(--text); letter-spacing: -.02em; color: var(--tinte); }
.kontakt-angebot span span { display: block; font-size: 14px; color: var(--tinte-3); margin-top: 3px; }
.kontakt-angebot:hover { transform: translateY(-4px); }
.kontakt-angebot:hover .pfeil { transform: translateX(5px); }
.kontakt-angebot .pfeil { flex: none; transition: transform .5s var(--kurve); }
@media (max-width: 900px) {
  .welt-an .kontakt-auftakt { height: auto; }
  .welt-an .kontakt-buehne { position: relative; height: auto; }
  .kanaele-leiste { grid-template-columns: minmax(0, 1fr); }
  .kanaele-leiste > li + li .kanal { border-left: 0; border-top: 1px solid var(--strich); }
  .kontakt-kopf { padding-bottom: 26vh; }
  .kontakt-auftakt .welt-schleier { background: linear-gradient(180deg, rgba(241, 242, 244, .84) 0%, rgba(241, 242, 244, .64) 38%, rgba(241, 242, 244, .12) 68%, rgba(241, 242, 244, .5) 100%); }
  .kontakt-bereich { grid-template-columns: minmax(0, 1fr); }
  .kontakt-info { position: static; }
}

/* ===========================================================================
 * Impressum und Datenschutz: ruhige Textseiten
 * ======================================================================== */
.recht { max-width: 860px; margin: 0 auto; padding: clamp(120px, 16vh, 170px) var(--rand) clamp(60px, 8vw, 100px); }
.recht .titel { margin: 12px 0 clamp(30px, 5vw, 60px); }
.recht-text { display: grid; gap: clamp(28px, 4vw, 44px); }
.recht-teil h2 { font: 600 clamp(21px, 1.9vw, 27px)/1.25 var(--text); letter-spacing: -.025em; color: var(--tinte); margin-bottom: 12px; text-wrap: balance; }
.recht-teil p, .recht-teil li { color: var(--tinte-2); font-size: 16px; line-height: 1.7; }
.recht-teil p + p, .recht-teil ul + p, .recht-teil p + ul { margin-top: 12px; }
.recht-teil ul { padding-left: 20px; display: grid; gap: 4px; }
.recht-teil a { color: var(--tinte); font-weight: 600; overflow-wrap: anywhere; }
.recht-kanzlei { margin-top: clamp(40px, 6vw, 70px); display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 22px; text-decoration: none; }
.recht-kanzlei img { width: 120px; height: auto; filter: brightness(0); opacity: .75; }
.recht-kanzlei strong { display: block; color: var(--tinte); font-weight: 700; }
.recht-kanzlei span span { display: block; font-size: 14px; color: var(--tinte-3); margin-top: 4px; }
.recht-weiter { margin-top: 28px; }
@media (max-width: 600px) { .recht-kanzlei { flex-direction: column; align-items: flex-start; } }

/* Hinweis an den Werkzeugen: was der Merkzettel tut (Transparenz, § 25 TDDDG) */
.merk-hinweis { margin-top: 10px; max-width: 48ch; font-size: 14px; line-height: 1.45; font-weight: 500; color: inherit; opacity: .8; }
.planer-ende .merk-hinweis { margin-top: 0; }

/* ---- Merkzettel: Auswahl von der Website über den Formularen ------------------------- */
.kontakt-vorab p, .stil-hinweis p { margin: 0; }
.vorab-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.vorab-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--strich); font-size: 14.5px; line-height: 1.4; color: var(--tinte); }
.vorab-liste li span b { display: block; font-size: 13px; font-weight: 600; color: var(--tinte-3); }
.vorab-liste button { all: unset; flex: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--tinte-3); transition: background-color .2s, color .2s; }
.vorab-liste button:hover { background: var(--grund); color: var(--tinte); }
.vorab-liste button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* ---- Handy und Tablet: Feinschliff ------------------------------------------------
 * Hochformat bekommt eigene 9:16-Bilder (x-hoch-1080/1536.webp) und für die
 * Kopfbereiche eigene Hochformat-Filme (data-quelle-hoch). Hohe, gestapelte
 * Abschnitte halten ihr Bild bildschirmhoch fest, statt es über die ganze Höhe
 * aufzublasen (sonst wird es unscharf). */
@media (max-width: 940px) {
  .leiste.gescrollt, .leiste.immer-glas { background: rgba(255, 255, 255, .88); }
  .leiste.ueber-dunkel.gescrollt { background: rgba(17, 19, 24, .74); }
}
@media (max-aspect-ratio: 4/5) {
  .auftakt-film video, .auftakt-film img,
  .seite-film img, .seite-film video,
  .kontakt-auftakt .seite-film img, .kontakt-auftakt .seite-film video,
  .anfang-film img, .anfang-film video,
  .weg-fenster img, .weg-fenster video,
  .versprechen .welt-bild img, .ablauf-welt .welt-bild img, .ich .welt-bild img, .vorort .welt-bild img { object-position: 50% 50%; }
  /* Kontakt und „Der erste Schritt" haben im Hochformat keinen Film: Das Standbild
   * rückt beim Scrollen ruhig ein Stück näher, ohne Sprung und ohne Eile. */
  .welt-an .kontakt-auftakt .seite-film img { transform: scale(calc(1 + max(0, var(--durch, .5) - .5) * .14)); transform-origin: 50% 62%; will-change: transform; }
  .welt-an .anfang-film img { transform: scale(calc(1 + var(--durch, 0) * .07)); transform-origin: 50% 70%; will-change: transform; }
}
@media (max-width: 900px) {
  /* Über mich und Vor Ort: Bild steht bildschirmhoch, der Inhalt gleitet darüber */
  .ich, .vorort { overflow: hidden; overflow: clip; }
  .ich > .welt-bild, .vorort > .welt-bild {
    position: sticky; inset: auto; top: 0;
    align-self: start;
    height: 100vh; height: 100svh;
  }
  .ich > .welt-bild { grid-area: 1 / 1; }
  .ich-text { grid-area: 1 / 1; }
  .vorort > .welt-bild { grid-area: 1 / 1 / 4 / 2; }
  .vorort-kopf { grid-area: 1 / 1; }
  .vorort-mitte { grid-area: 2 / 1; }
  .vorort-fuss { grid-area: 3 / 1; }
  .ich-karte { background: rgba(255, 255, 255, .9); }
  .ich .ki-marke, .vorort .ki-marke { top: 86px; bottom: auto; }

  /* Werkstatt: nur die Karte zum aktuellen Punkt, groß genug zum Lesen */
  .welt-an .werkstatt-buehne { align-content: start; align-content: safe center; padding-top: 84px; padding-bottom: 24px; }
  .werkstatt-bild { font-size: min(2.4vw, 13px); margin: 0 -3vw; }
  .a-extra { font-size: 1.3em; padding: .8em .95em; background: rgba(255, 255, 255, .96); }
  .welt-an .werkstatt.ab-3 .a-marke, .welt-an .werkstatt.ab-4 .a-tempo, .welt-an .werkstatt.ab-5 .a-suche, .welt-an .werkstatt.ab-6 .a-meldungen {
    opacity: 0; visibility: hidden; transform: translate3d(0, -.8em, 0) scale(.96);
    transition: opacity .35s ease, transform .6s var(--kurve), visibility 0s linear .35s;
  }
  .a-marke { left: 1%; top: 1%; }
  .a-meldungen { right: 1%; top: 22%; }
  .a-chat { right: 3%; bottom: 2%; }

  /* Fuß: Kontakt über die ganze Breite, damit die E-Mail-Adresse nicht bricht */
  .fuss-raster > :nth-child(2) { grid-column: 1 / -1; }
  .fuss-raster { gap: 30px 24px; }
}
@media (max-width: 760px) {
  /* Ablauf-Bühne auf der Startseite: Bild bleibt stehen, die Schritte ziehen darüber */
  .ablauf-welt .welt-buehne { overflow: hidden; overflow: clip; }
  .ablauf-welt .welt-bild, .ablauf-welt .welt-schleier {
    position: sticky; inset: auto; top: 0; display: block;
    height: 100vh; height: 100svh;
    margin-bottom: -100vh; margin-bottom: -100svh;
  }
  .ablauf-welt .welt-schleier { background: linear-gradient(180deg, rgba(10, 11, 14, .7) 0%, rgba(10, 11, 14, .5) 45%, rgba(10, 11, 14, .78) 100%); }
}
@media (max-width: 760px) {
  /* Immer dabei: Die Vorschau bleibt oben stehen, darunter legt man die Schalter um */
  .immer-buehne { display: flex; flex-direction: column; gap: 18px; }
  .immer-vorschau {
    order: -1; position: sticky; top: 68px; z-index: 3;
    font-size: 2.3vw;
    margin: 0 calc(var(--rand) * -1);
    padding: 12px calc(var(--rand) + 2.2em) 3.6em var(--rand);
    background: linear-gradient(180deg, #fff 0%, #fff 86%, rgba(255, 255, 255, 0) 100%);
  }
  .iv-uebergabe { left: 0; }
  .iv-hinweis { font-size: 1.02em; }
  /* Kopf von /leistungen: Fensterblick oben frei, Schleier nur hinter dem Text */
  .seite-auftakt.mit-film .welt-schleier { background: linear-gradient(180deg, rgba(10, 11, 14, .4) 0%, rgba(10, 11, 14, .08) 20%, rgba(10, 11, 14, .3) 40%, rgba(10, 11, 14, .7) 60%, rgba(10, 11, 14, .86) 100%); }
}
@media (max-width: 420px) {
  /* Preisrechner: vierstellige Preise („€1,670“ bricht nicht um) passen auch auf 320 px */
  .saeule-preis { font-size: clamp(36px, 12vw, 50px); }
}
@media (max-width: 700px) {
  .preise { padding-top: 76px; }
  .preise-schild { width: 104px; margin: 0 0 -6px; }
}

/* ---- Ruhe für alle, die Bewegung reduziert haben ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .einblenden, .glaswort-buchstaben > span, .leiste, .schwebt, .klingelt, .pendelt, .dreht, .schraubt, .pulst, .sucht, .malt, .ich-status i, .ds-online::before, .draht-tippt i { animation: none !important; }
  .auftakt-video, .seite-video { display: none; }
  .knopf, .knopf:hover, .knopf:active { transform: none; }
  .pinsel-strich path { stroke-dashoffset: 0; }
}
.welt-ruhig [data-kippen], .welt-ruhig [data-tiefe] { transform: none !important; translate: none !important; }