/* ==========================================================================
   Kuli Webdesign – Startseite
   Leitidee: „Der Kuli zeichnet Ihre Website.“ Große Display-Typografie,
   gezeichnete Linien, glänzende Sticker, ruhige Flächen im Wechsel hell/dunkel.
   ========================================================================== */

.home {
  /* Alles aus der Markenfarbe Flieder (#b98fcb) abgeleitet: gleicher Farbton, nur heller oder dunkler */
  --canvas: #f6f4f7;
  --night: #151017;
  --marke: #b98fcb;          /* Flieder – Flächen, Sticker, Akzente auf Dunkel */
  --marke-zart: #f1e8f4;
  --marke-hell: #e1cee8;
  --marke-mittel: #cfb2db;
  --marke-text: #88509f;     /* farbiger Text auf Hell – Flieder selbst ist dafür zu hell */
  --marke-tief: #563663;     /* dunkle Flächen mit weißer Schrift */
  --linie: #e1dbe4;
  --rand: clamp(16px, 4vw, 48px);
  background: var(--canvas);
  color: #1b1b1f;
  overflow-x: clip;
}
/* Schräges Laufband ragt minimal über den Rand – auch iOS darf nicht seitlich scrollen */
html:has(> body.home) { overflow-x: clip; }
.home ::selection { background: var(--marke-hell); color: var(--night); }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .005em;
  color: var(--night);
}

/* ---------- Kopfzeile ---------- */
/* Oben transparent über dem Hero; beim Scrollen wird sie zur schmalen Frosted-Glass-Leiste (wie apple.com).
   Drei Spalten: Logo links, Menü genau in der Mitte; wird es eng, rückt das Menü nach rechts statt das Logo zu überdecken.
   Am Handy reicht der Platz für keine echte Mitte – dort steht das Menü rechtsbündig. */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto 1fr; align-items: center; gap: 16px;
  padding: 18px var(--rand);
  background: transparent;
  transition: padding .35s cubic-bezier(.2,.8,.2,1), background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.topbar.ist-gescrollt {
  padding-block: 8px;
  background: rgba(246, 244, 247, .8);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 .5px 0 rgba(21,16,23,.16), 0 10px 30px -22px rgba(21,16,23,.35);
}
.topbar .logo { justify-self: start; }
.topbar .logo__wordmark { transition: width .35s cubic-bezier(.2,.8,.2,1); }
.topbar.ist-gescrollt .logo__wordmark { width: 57px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar.ist-gescrollt { background: rgba(246, 244, 247, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar.ist-gescrollt { background: rgba(246, 244, 247, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .topbar, html:not([data-motion="full"]) .topbar .logo__wordmark { transition: none; }
}
@media (max-width: 420px) {
  .topbar { gap: 10px; padding-top: 14px; }
  .topbar .logo { font-size: 1.05rem; gap: 8px; }
  .topbar .logo__mark { width: 30px; height: 30px; }
}
/* Sprungziele der Menüpunkte: Beim Scrollen liegt die Kopfzeile mit 62 px über dem Inhalt (alle Breiten).
   Die dunklen Boxen (Fahrplan, Ihr Einsatz) landen mit sichtbarer Oberkante 14 px darunter; offene Abschnitte
   so, dass ihre Überzeile 36 px unter der Kopfzeile beginnt (scroll-margin gleicht das Padding von .abschnitt aus). */
html { scroll-padding-top: 76px; }

/* Navigation in der Kopfzeile: Einträge frei und mittig oben, ohne Rahmen (Wunsch der Gründer, 28.10.).
   Die weiße Markierung gleitet zum Abschnitt, der gerade die Bildschirmmitte kreuzt (home.js).
   Beim Darüberfahren folgt eine einzige lila Pille dem Mauszeiger: Sie wächst an der Stelle des Zeigers auf, gleitet
   gefedert von Eintrag zu Eintrag (die vordere Kante eilt voraus, die hintere zieht nach) und zieht sich beim Verlassen
   zum Zeiger zusammen. Unter der Pille ist die Schrift weiß – eine gleich angeordnete Kopie der Einträge, auf die
   Pille zugeschnitten (home.js). „Starten“ hat einen eigenen Wisch von links in hellem Lila.
   Bis 1000 px stehen die fünf Einträge hinter „Menü“ und klappen als helle Liste auf. */
.kopfnav { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; }
/* Markierung des aktiven Abschnitts – gleitet zum jeweiligen Eintrag */
.kopfnav__pille {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0px);
  transform: translateX(var(--x, 0px)); border-radius: 999px; opacity: 0; pointer-events: none;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 1px rgba(21,16,23,.06), 0 3px 10px -3px rgba(21,16,23,.18), inset 0 0 0 .5px rgba(21,16,23,.06);
  transition: transform .5s cubic-bezier(.32,.72,0,1), width .5s cubic-bezier(.32,.72,0,1), opacity .25s ease;
}
.kopfnav__pille.an { opacity: 1; }
.kopfnav__liste { display: contents; }
.kopfnav__link, .kopfnav__menue {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none;
  color: rgba(21,16,23,.66); font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color .25s ease, background-color .25s ease, height .35s cubic-bezier(.2,.8,.2,1);
}
.kopfnav__link:hover, .kopfnav__link.aktiv, .kopfnav__menue:hover { color: var(--night); }
.kopfnav__menue { display: none; }   /* erst bis 1000 px sichtbar */
/* Die lila Pille samt weißer Schrift; Lage und Form setzt home.js über clip-path */
.kopfnav__schwebe {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--marke-text); color: #fff; clip-path: inset(0 100% 0 0); opacity: 0; transition: opacity .28s ease;
}
.kopfnav__schwebe.an { opacity: 1; transition-duration: .15s; }
.kopfnav__klon {
  position: absolute; display: inline-flex; align-items: center; padding: 0 16px;
  font-size: .875rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.kopfnav__cta {
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; height: 40px; margin-left: 6px; padding: 0 18px; border-radius: 999px;
  background: var(--marke-text); color: #fff; font-size: .875rem; font-weight: 650; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -4px rgba(136,80,159,.6);
  transition: color .8s cubic-bezier(.16,1,.3,1), transform .2s ease, height .35s cubic-bezier(.2,.8,.2,1);
}
.kopfnav__cta:active { transform: scale(.97); }
.kopfnav__fuellung {
  position: absolute; inset: 0; background: var(--marke); transform: scaleX(0); transform-origin: right center;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.kopfnav__text { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.kopfnav__cta .i { width: 15px; height: 15px; transition: transform .45s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .kopfnav__cta:hover { color: var(--night); }
  .kopfnav__cta:hover .kopfnav__fuellung { transform: none; transform-origin: left center; }
  .kopfnav__cta:hover .i { transform: translateX(3px); }
}
.kopfnav a:focus-visible, .kopfnav button:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.kopfnav .kopfnav__cta:focus-visible { color: var(--night); }
.kopfnav .kopfnav__cta:focus-visible .kopfnav__fuellung { transform: none; }
.topbar.ist-gescrollt .kopfnav__link, .topbar.ist-gescrollt .kopfnav__menue, .topbar.ist-gescrollt .kopfnav__cta { height: 36px; }
/* Zwei Striche, die beim Aufklappen zum Kreuz werden */
.kopfnav__striche { position: relative; width: 14px; height: 10px; }
.kopfnav__striche::before, .kopfnav__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform .35s cubic-bezier(.16,1,.3,1), top .35s cubic-bezier(.16,1,.3,1);
}
.kopfnav__striche::before { top: 1.6px; }
.kopfnav__striche::after { top: 6.8px; }
.kopfnav.ist-offen .kopfnav__striche::before { top: 4.2px; transform: rotate(45deg); }
.kopfnav.ist-offen .kopfnav__striche::after { top: 4.2px; transform: rotate(-45deg); }
@media (max-width: 1000px) {
  .kopfnav__menue { display: inline-flex; }
  .kopfnav__pille, .kopfnav__schwebe { display: none; }
  /* Fast deckend: Glas in Glas würde der Browser nicht mehr weichzeichnen */
  .kopfnav__liste {
    position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 3;
    display: flex; flex-direction: column; gap: 2px; min-width: max(100%, 220px); padding: 6px;
    border-radius: 24px; background: rgba(250,248,251,.97);
    box-shadow: var(--glas-hell-kante), var(--glas-schatten);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
  }
  .kopfnav.ist-offen .kopfnav__liste { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .kopfnav__liste .kopfnav__link { height: 46px; padding: 0 18px; font-size: .95rem; }
  .kopfnav__liste .kopfnav__link.aktiv { background: rgba(255,255,255,.96); box-shadow: 0 1px 1px rgba(21,16,23,.06), 0 3px 10px -3px rgba(21,16,23,.18); }
}
@media (max-width: 1000px) and (hover: hover) {
  .kopfnav__liste .kopfnav__link:hover, .kopfnav__menue:hover { background: var(--marke-text); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .kopfnav__pille, html:not([data-motion="full"]) .kopfnav__liste, html:not([data-motion="full"]) .kopfnav__fuellung,
  html:not([data-motion="full"]) .kopfnav__schwebe, html:not([data-motion="full"]) .kopfnav__striche::before, html:not([data-motion="full"]) .kopfnav__striche::after { transition: none; }
}
@media (max-width: 560px) {
  .topbar { grid-template-columns: auto 1fr; }
  .kopfnav { justify-self: end; }
  .kopfnav__liste { left: auto; right: 0; translate: none; }
}
@media (max-width: 420px) {
  .topbar .logo__wordmark--kuli { width: 64px; }
  .kopfnav__menue { padding: 0 14px; font-size: .84rem; }
  .kopfnav__cta { padding: 0 15px; font-size: .84rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 0 var(--rand);
  text-align: center;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9.4vw, 9.4rem);
  line-height: 1.04;   /* genug Luft, damit das Komma am Zeilenende frei über der nächsten Zeile steht */
  letter-spacing: .004em;
  color: var(--night);
  margin: 0 auto;
}
/* Die Überschrift füllt allein den ersten Bildschirm (oben Platz für die Kopfzeile); alles Weitere kommt beim Scrollen */
.hero__kopf {
  position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: 96px 0 48px; box-sizing: border-box;
}
.zeile { display: block; }
.zeile > span { display: inline-block; animation: zeile-rein 1s cubic-bezier(.2,.8,.2,1) both; }
.zeile:nth-child(2) > span { animation-delay: .08s; }
.zeile:nth-child(3) > span { animation-delay: .16s; }
.zeile:nth-child(4) > span { animation-delay: .24s; }
@keyframes zeile-rein { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }

.hero__betont { color: var(--marke-text); }

.hero__lead { max-width: 620px; margin: clamp(26px, 4vw, 40px) auto 0; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: #4a4a52; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; }
.home .btn--ghost { --btn-bd: var(--linie); background: rgba(255,255,255,.6); }

/* ---------- Sticker ---------- */
.sticker {
  --r: 0deg;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .62em 1.15em; border-radius: 999px; border: 3px solid #fff;
  font-family: var(--font); font-weight: 800; font-size: clamp(.82rem, 1.2vw, 1.02rem); letter-spacing: -.01em;
  color: var(--night); white-space: nowrap;
  transform: rotate(var(--r));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(0,0,0,.08), 0 14px 28px -12px rgba(0,0,0,.35);
}
.sticker--marke { background: linear-gradient(135deg, #e3d0ea, var(--marke) 50%, #a57ab9); }
.sticker--hell { background: linear-gradient(135deg, #fff, var(--marke-hell) 60%, #d6bfe0); }
.sticker--tief { background: linear-gradient(135deg, #7a5289, var(--marke-tief) 45%, #3f2549); color: #fff; }
.sticker--weiss { background: linear-gradient(180deg, #fff, #efeaf1); }
.sticker.klein { font-size: .78rem; padding: .5em .95em; border-width: 2px; }

/* Bühne: echtes Projekt in Desktop und Smartphone – steht ruhig, die Bewegung kommt aus dem Vorschau-Video */
.buehne { margin: clamp(44px, 7vw, 80px) auto 0; max-width: 1080px; }
.buehne__notiz { margin: 22px 0 0; }
.buehne__notiz a { color: #6a6a72; text-decoration: none; }
.buehne__notiz a:hover { color: var(--marke-text); }

/* ---------- Aussage (Wort für Wort) ---------- */
.aussage { max-width: 1180px; margin: 0 auto; padding: clamp(90px, 14vw, 180px) var(--rand); }
.aussage__label { color: #6a6a72; margin-bottom: 26px; }
.aussage__text {
  font-size: clamp(1.9rem, 4.8vw, 4.3rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em;
  color: var(--night); margin: 0;
}
.aussage__text .wort { opacity: .13; transition: opacity .35s ease; }
.aussage__text .wort.an { opacity: 1; }

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { max-width: 1240px; margin: 0 auto; padding: clamp(70px, 10vw, 130px) var(--rand); scroll-margin-top: calc(22px - clamp(70px, 10vw, 130px)); }
.abschnitt__kopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.abschnitt__kopf .mono { color: #6a6a72; margin: 0 0 16px; }
.abschnitt__kopf .display { font-size: clamp(3rem, 8vw, 7rem); margin: 0; }
.abschnitt__text { margin: 20px 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); color: #4a4a52; max-width: 560px; }
.abschnitt__kopf--zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }

/* ---------- Kacheln (Leistungen) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(230px, auto); gap: 16px; }
.kachel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--linie);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.kachel:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(12,12,14,.35); }
.kachel h3 { margin: 0; font-size: 1.22rem; letter-spacing: -.02em; hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
.kachel p { margin: 0; color: #55555d; font-size: .97rem; text-wrap: balance; }
.kachel__icon { width: 34px; height: 34px; margin-bottom: auto; }
.kachel--gross { grid-column: span 2; grid-row: span 2; }
/* Die breite Kachel schließt das Raster als ganze Zeile ab, damit bei 4 wie bei 2 Spalten keine Lücke bleibt.
   Ihr Inhalt steht waagerecht und senkrecht in der Mitte. */
.kachel--breit { grid-column: 1 / -1; justify-content: center; align-items: center; gap: 14px; text-align: center; }
.kachel--breit .kachel__icon { margin: 0; width: 44px; height: 44px; flex: none; }
.kachel--dunkel { background: var(--night); border-color: var(--night); color: #fff; }
.kachel--dunkel h3 { color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: .95; letter-spacing: .005em; margin-bottom: 10px; hyphens: manual; }
.kachel--dunkel p { color: #b9b9c2; max-width: 34ch; text-wrap: balance; }
.kachel--marke { background: var(--marke); border-color: var(--marke); }
.kachel--marke p { color: var(--night); }
.kachel--tief { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }
.kachel--tief h3 { color: #fff; }
.kachel--tief p { color: var(--marke-hell); }
.kachel__text { position: relative; z-index: 2; max-width: 50%; }
.kachel--tief h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3.2vw, 3rem); line-height: .95; letter-spacing: .005em; margin-bottom: 6px; hyphens: manual; }
@media (max-width: 1220px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .kacheln { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kachel { min-height: 200px; }
  .kachel--gross, .kachel--breit { grid-column: auto; grid-row: auto; }
  .kachel--gross { min-height: 460px; }
}

/* Handy in der großen Kachel: ruhiger, glaubwürdiger Website-Ausschnitt eines Malerbetriebs.
   Schriftgrößen in cqw (Breite des Bildschirms), damit das Handy am Desktop und am Smartphone gleich wirkt.
   Unten die feste Aktionsleiste – genau das, was die Kachel verspricht: anrufen, schreiben, hinfinden. */
.mini-phone {
  --weber-ink: #14213d;
  --weber-muted: #5b6475;
  --weber-paper: #f7f5f0;
  --weber-sand: #f1d9a8;
  position: absolute; z-index: 1; top: 4%; right: 7%; width: min(232px, 40%); aspect-ratio: 9 / 17;
  padding: 6px; border: 1px solid #4a4b50; border-radius: 38px; background: #17171b;
  transform: rotate(1.5deg); box-shadow: inset 0 0 0 1.5px #2c2d33, 0 32px 60px -32px rgba(0,0,0,.78);
}
.mini-phone::before, .mini-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2d33; }   /* Seitentasten */
.mini-phone::before { right: -3px; top: 25%; height: 13%; }
.mini-phone::after { left: -3px; top: 21%; height: 8%; }
.mini-phone__screen {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
  border-radius: 31px; background: var(--weber-paper); color: var(--weber-ink); font-family: var(--font);
  container-type: inline-size;
}
.mini-phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%); }   /* Glanz auf dem Glas */
.mini-phone__status { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 3.2cqw 6cqw 0 9cqw; color: #fff; font-size: 4.4cqw; font-weight: 650; }
.mini-phone__insel { position: absolute; top: 2.4cqw; left: 50%; width: 29%; height: 7.2cqw; border-radius: 99px; background: #0b0b0d; transform: translateX(-50%); }
.mini-phone__status svg { width: 15.5cqw; height: auto; fill: currentColor; }
.mini-phone__hero { position: relative; flex: 0 0 56%; overflow: hidden; background: #1c2a4a; }
.mini-phone__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; filter: saturate(.86); }
.mini-phone__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,14,28,.6) 0%, rgba(9,14,28,0) 30%, rgba(9,14,28,.06) 48%, rgba(9,14,28,.84) 100%); }
.mini-phone__kopf { position: absolute; z-index: 2; inset: 13cqw 6cqw auto; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.mini-phone__logo { display: flex; flex-direction: column; gap: 1cqw; font-size: 5.4cqw; font-weight: 800; letter-spacing: .22em; line-height: 1; }
.mini-phone__logo small { font-size: 2.6cqw; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: .78; }
.mini-phone__menu { display: flex; flex-direction: column; gap: 1.6cqw; width: 6.4cqw; }
.mini-phone__menu i { height: 1.5px; border-radius: 1px; background: currentColor; }
.mini-phone__hero-text { position: absolute; z-index: 2; inset: auto 6cqw 6cqw; color: #fff; }
.mini-phone__kicker { display: block; margin-bottom: 2.2cqw; color: var(--weber-sand); font-size: 3cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mini-phone__titel { display: block; font-size: 10.5cqw; font-weight: 750; line-height: 1; letter-spacing: -.035em; }
.mini-phone__inhalt { flex: 1; min-height: 0; padding: 5cqw 6cqw 0; }
.mini-phone__lead { display: block; margin-bottom: 3.4cqw; color: var(--weber-muted); font-size: 3.8cqw; line-height: 1.45; }
.mini-phone__liste { margin: 0; padding: 0; list-style: none; }
.mini-phone__liste li { display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 0; border-top: 1px solid rgba(20,33,61,.1); font-size: 4.2cqw; font-weight: 650; }
.mini-phone__liste .i { width: 4.4cqw; height: 4.4cqw; color: var(--weber-muted); }
.mini-phone__aktionen { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2cqw; padding: 3cqw 4cqw 7cqw; border-top: 1px solid rgba(20,33,61,.08); background: #fff; }
.mini-phone__aktionen::after { content: ""; position: absolute; bottom: 2.2cqw; left: 50%; width: 34%; height: 1.3cqw; border-radius: 99px; background: rgba(20,33,61,.85); transform: translateX(-50%); }   /* Home-Leiste */
.mini-phone__aktion { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 2.4cqw 0 2.2cqw; border-radius: 3.2cqw; background: #eceef2; color: var(--weber-ink); font-size: 3.1cqw; font-weight: 700; }
.mini-phone__aktion--haupt { background: var(--weber-ink); color: #fff; }
.mini-phone__aktion .i { width: 5cqw; height: 5cqw; }
@media (max-width: 600px) { .mini-phone { position: relative; top: auto; right: auto; width: min(188px, 56vw); margin: 20px auto 24px; transform: rotate(1deg); } .kachel--gross { justify-content: flex-start; } .kachel__text { max-width: none; } }

/* Ladezeit-Ring */
.ring { position: relative; width: 92px; height: 92px; margin-bottom: auto; display: grid; place-items: center; }
.ring svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--marke-zart); stroke-width: 10; }
.ring .ring__wert { stroke: var(--marke); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
.kachel.is-visible .ring__wert { stroke-dashoffset: .04; }
.ring > .i { width: 28px; height: 28px; color: var(--marke-text); }

/* Suchfeld mit Tipp-Effekt */
.suche {
  display: flex; align-items: center; gap: 8px; margin-bottom: auto;
  padding: 12px 14px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--linie);
  font-weight: 550; font-size: .92rem; color: #2a2a30; min-width: 0;
  container-type: inline-size;
}
.suche .i { width: 18px; height: 18px; color: #77777f; flex: none; }
/* Schrift schrumpft mit der Kachel, damit der Suchbegriff nie abgeschnitten wird.
   11.4 ≈ Breite von „Maler Schrobenhausen“ in em, 30px = Lupe, Abstand und Cursor – bei anderem Begriff anpassen. */
.suche__text { white-space: nowrap; overflow: hidden; border-right: 2px solid var(--marke-text); padding-right: 2px; font-size: .84rem; font-size: min(1em, calc((100cqi - 30px) / 11.4)); }
.suche__text.tippt { animation: cursor .8s steps(1) infinite; }
@keyframes cursor { 50% { border-color: transparent; } }

/* ---------- Ablauf (dunkel) ---------- */
.ablauf { background: var(--night); color: #fff; padding: clamp(80px, 11vw, 150px) var(--rand); border-radius: clamp(28px, 4vw, 48px); margin: 0 clamp(6px, 1vw, 14px); }
.ablauf .abschnitt__kopf { max-width: 1240px; margin-left: auto; margin-right: auto; }
.ablauf .display { color: #fff; }
.ablauf .abschnitt__kopf .mono, .ablauf .abschnitt__text { color: #a5a5ae; }
.ablauf__buehne { position: relative; max-width: 1240px; margin: 0 auto; }
.ablauf__linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ablauf__linie path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--zug, 1); }
.ablauf__karten { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0 0 120px; }
.karte {
  --r: 0deg; --y: 0px;
  position: relative; display: flex; flex-direction: column; min-height: 300px;
  padding: 24px 22px 28px; border-radius: 24px; color: var(--night);
  transform: translateY(var(--y)) rotate(var(--r));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 .5px rgba(255,255,255,.2), 0 30px 60px -30px rgba(0,0,0,.7);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.karte:hover { transform: translateY(calc(var(--y) - 8px)) rotate(0deg); }
.karte__nr { margin-bottom: auto; opacity: .85; }
.karte h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3vw, 2.7rem); line-height: .95; margin: 40px 0 10px; color: inherit; }
.karte p { margin: 0; font-size: .97rem; }
.karte .sticker { position: absolute; top: -16px; right: -10px; }
/* Die Schritte werden von hell nach dunkel – der Ablauf ist an der Farbe ablesbar.
   Getöntes Glas: Die Deckkraft ist so gewählt, dass jede Schrift WCAG AA hält, auch über der Linie. */
.karte--zart { background: rgba(241,232,244,.88); }
.karte--hell { background: rgba(225,206,232,.88); }
.karte--marke { background: rgba(185,143,203,.9); }
.karte--tief { background: rgba(86,54,99,.84); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 .5px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.7); }
@media (max-width: 980px) {
  .ablauf__linie { display: none; }
  .ablauf__karten { grid-template-columns: 1fr 1fr; gap: 34px 18px; padding-bottom: 0; }
  .karte { --y: 0px !important; }
}
@media (max-width: 560px) { .ablauf__karten { grid-template-columns: 1fr; } .karte { min-height: 220px; } }

/* ---------- Projekte (Galerie mit echten Geräte-Ansichten) ---------- */
/* Die Pfeile stehen als Paar mittig unter dem Vorschaufenster der vorderen Karte, zwischen Fenster und Text (--pfeil-y aus home.js). */
.galerie-rahmen { --karte: min(88vw, 1000px); position: relative; }
.pfeile { position: absolute; z-index: 5; left: 50%; top: var(--pfeil-y, 62%); display: flex; gap: 12px; transform: translate(-50%, -50%); }
.pfeil {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; pointer-events: auto;
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.82); color: var(--night);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 12px 30px -12px rgba(21,16,23,.45), 0 0 0 1px rgba(21,16,23,.06);
  transition: background .2s ease, color .2s ease, transform .2s ease, opacity .25s ease, visibility .25s;
}
.pfeil:hover:not(:disabled) { background: var(--night); color: #fff; transform: scale(1.06); }
.pfeil:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-transparency: reduce) { .pfeil { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* position: relative hält absolut positionierte Inhalte (z. B. Screenreader-Texte) in der Galerie –
   sonst ragen sie unsichtbar heraus und machen die Seite auf Handys breiter als den Bildschirm. */
/* Die Galerie läuft über die volle Fensterbreite; die aktive Karte steht mittig,
   die Innenabstände lassen auch die erste und letzte Karte in die Mitte rasten. */
.galerie {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--karte); gap: 24px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 24px calc((100vw - var(--karte)) / 2) 40px; margin: 0 calc(50% - 50vw);
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }
.werk { scroll-snap-align: center; }
/* Rad: Die Karten sitzen außen auf einem waagrechten Rad und drehen beim Scrollen mit (home.js setzt je Karte
   transform, z-index und --a = Abstand zur Mitte). Die gemeinsame Perspektive (--perspektive, aus dem Radius
   berechnet) sitzt auf der Galerie, damit alle Karten auf demselben Rad stehen. */
.galerie--rad { perspective: var(--perspektive, 1600px); perspective-origin: 50% 45%; }
.galerie--rad .werk { transform-style: preserve-3d; }   /* bleibt unbewegt: Einrastpunkt für Scroll Snap */
.galerie--rad .werk__dreh { will-change: transform; }
.galerie--rad .werk__info { opacity: calc(1 - var(--a, 0) * .6); }

/* Desktop und Smartphone nebeneinander, unten bündig (Hero und Galerie) */
.geraete { display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 21%, 200px); align-items: end; gap: clamp(10px, 2.2vw, 24px); }
.werk__geraete {
  padding: clamp(16px, 3.4vw, 40px); border-radius: clamp(22px, 3vw, 32px);
  background: radial-gradient(120% 90% at 50% 0%, #fff, #ece6f0); border: 1px solid var(--linie);
}
.geraet { container-type: inline-size; }
.geraet img { display: block; width: 100%; height: auto; }
.werk__vorschau { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: #f7f4f8; }
.werk__vorschau .werk__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.werk__live { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; background: #fff; pointer-events: none; }   /* Vorschau-Video, füllt das Fenster wie das Standbild */
.werk__vorschau.is-loaded .werk__live { opacity: 1; }
.werk__vorschau.is-loaded .werk__still { opacity: 0; }
/* Browserfenster – Maße in cqw, damit es bei jeder Größe gleich aussieht */
.geraet__fenster { border-radius: 1.8cqw; overflow: hidden; background: #1b1b20; box-shadow: 0 40px 70px -40px rgba(12,12,14,.55), 0 0 0 1px rgba(12,12,14,.08); }
.geraet__leiste { display: flex; align-items: center; gap: .9cqw; height: 4.6cqw; padding: 0 1.8cqw; }
.geraet__leiste i { width: 1.25cqw; aspect-ratio: 1; border-radius: 50%; flex: none; }
.geraet__leiste i:nth-child(1) { background: #ff5f57; }
.geraet__leiste i:nth-child(2) { background: #febc2e; }
.geraet__leiste i:nth-child(3) { background: #28c840; }
.geraet__leiste span { margin: 0 auto; transform: translateX(-3cqw); padding: .5cqw 3cqw; border-radius: 99cqw; background: #2a2a31; color: #c4c4cc; font: 500 1.5cqw/1.2 var(--font); white-space: nowrap; }
/* Smartphone mit Statusleiste und Dynamic Island über dem Bild – die Insel verdeckt nichts */
.geraet__gehaeuse { padding: 3.6cqw; border-radius: 16cqw; background: var(--night); box-shadow: 0 40px 70px -36px rgba(12,12,14,.6), inset 0 0 0 .8cqw #2c2c33; }
.geraet__status { position: relative; height: 12cqw; background: var(--oben, #fff); border-radius: 12.4cqw 12.4cqw 0 0; }
.geraet__insel { position: absolute; left: 50%; top: 3cqw; width: 30cqw; height: 8.4cqw; transform: translateX(-50%); border-radius: 99cqw; background: #000; }
.geraet--mobil img { border-radius: 0 0 12.4cqw 12.4cqw; }

.werk__info { padding: 86px 6px 0; }   /* oben Platz für die Pfeile zwischen Fenster und Text */
.werk__info .mono { color: #6a6a72; }
.werk__info h3 { margin: 6px 0 4px; font-size: 1.4rem; }
.werk__info p { margin: 0; color: #55555d; max-width: 62ch; }
.werk__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--night); font-weight: 650; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.werk__link .i { width: 16px; height: 16px; transform: rotate(-45deg); }
.werk__link:hover { color: var(--marke-text); }
.hinweis { color: #6a6a72; margin: 18px 0 0; }
@media (max-width: 640px) { .pfeil { width: 44px; height: 44px; } .werk__info { padding-top: 70px; } }

/* ---------- Versprechen ---------- */
.versprechen { position: relative; text-align: center; padding: clamp(90px, 13vw, 170px) var(--rand); max-width: 1300px; margin: 0 auto; }
.versprechen__titel { font-size: clamp(3.4rem, 11vw, 10.5rem); margin: 0; }
.versprechen__titel span { display: block; }
.versprechen__titel span:last-child { color: var(--marke-text); }
.versprechen__sticker { margin-top: clamp(18px, 2.4vw, 30px); }
.versprechen__text { max-width: 520px; margin: 28px auto 30px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #4a4a52; }

/* ---------- Preis (dunkel) ---------- */
.preis { background: var(--night); color: #fff; padding: clamp(80px, 11vw, 150px) var(--rand); border-radius: clamp(28px, 4vw, 48px); margin: 0 clamp(6px, 1vw, 14px); }
.preis .abschnitt__kopf { max-width: 940px; margin-left: auto; margin-right: auto; text-align: center; }
.preis .abschnitt__kopf .mono, .preis .abschnitt__text { color: #a5a5ae; }
.preis .abschnitt__text { margin-left: auto; margin-right: auto; }
.preis .display { color: #fff; }
.home .offer { position: relative; background: #fff; color: #1b1b1f; border: 0; border-radius: 32px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.9); }
.home .offer .mono { color: #6a6a72; }
.home .offer .price strong { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 9vw, 6.4rem); letter-spacing: 0; color: var(--night); }
.home .offer .price span { font-weight: 650; }
.home .offer__list { background: var(--canvas); }
.home .offer__list .i { color: var(--marke-text); }
.offer__sticker { position: absolute; top: -20px; right: 28px; z-index: 2; }
.home .offer .price { flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.home .offer .price .offer__eroeffnung {
  padding: .5em 1em; border-radius: 999px; background: var(--marke-zart); color: var(--marke-text);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.preis .footnote { color: #8a8a92; }

/* ---------- Finale ---------- */
.finale { position: relative; text-align: center; padding: clamp(80px, 11vw, 150px) var(--rand) clamp(70px, 9vw, 120px); overflow: hidden; }
.finale__titel {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 20vw, 21rem); line-height: .8; letter-spacing: -.005em; margin: 0; color: var(--night); white-space: nowrap;
}
/* Ruhig einladend: Kuli-Strich unter dem Titel, drei Schritte als Linie, Knopf mit kurzem, leisem Puls.
   home.js setzt .ist-sichtbar, sobald der Bereich ins Bild kommt (bei „weniger Bewegung“ sofort und ohne Übergänge). */
.finale__wort { position: relative; display: inline-block; }
.finale__strich {
  position: absolute; left: 1%; top: calc(100% + .06em + 3px); width: 98%; height: .1em; overflow: visible; pointer-events: none;
  clip-path: inset(-100% 102% -100% -2%); transition: clip-path 1.1s cubic-bezier(.65,0,.35,1) .25s;   /* wird von links gezogen */
}
.finale__strich path { fill: none; stroke: var(--marke); stroke-width: clamp(4px, .032em, 9px); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.finale.ist-sichtbar .finale__strich { clip-path: inset(-100% -2% -100% -2%); }
.finale__weg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; margin: clamp(44px, 5.5vw, 66px) auto 0; padding: 0; list-style: none; }
.finale__weg::before, .finale__weg::after { content: ""; position: absolute; top: 7px; left: 16.67%; height: 2px; border-radius: 2px; }
.finale__weg::before { right: 16.67%; background: var(--linie); }
.finale__weg::after { width: 0; background: var(--marke); transition: width 1.5s cubic-bezier(.65,0,.35,1) .9s; }
.finale.ist-sichtbar .finale__weg::after { width: 66.66%; }
.finale__weg li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.finale__punkt { position: relative; z-index: 1; width: 16px; height: 16px; margin-bottom: 10px; border-radius: 50%; border: 2px solid var(--linie); background: var(--canvas); transition: background .35s ease, border-color .35s ease; }
.finale.ist-sichtbar .finale__punkt { border-color: var(--marke); background: var(--marke); }
.finale.ist-sichtbar .finale__weg li:nth-child(1) .finale__punkt { transition-delay: .9s; }
.finale.ist-sichtbar .finale__weg li:nth-child(2) .finale__punkt { transition-delay: 1.65s; }
.finale.ist-sichtbar .finale__weg li:nth-child(3) .finale__punkt { transition-delay: 2.4s; }
.finale__weg strong { font-size: 1rem; color: var(--night); }
.finale__weg small { font-size: .86rem; color: #6a6a72; }
.finale__text { max-width: 540px; margin: clamp(34px, 4vw, 46px) auto 28px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #4a4a52; text-wrap: balance; }
.finale__knopf { position: relative; translate: var(--folge, 0 0); transition: translate .3s cubic-bezier(.2,.7,.3,1), transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.finale__knopf::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; }
.finale.ist-sichtbar .finale__knopf::after { animation: knopf-puls 2.6s ease-out 2.9s 3; }   /* dreimal, dann Ruhe */
@keyframes knopf-puls { 0% { box-shadow: 0 0 0 0 rgba(185,143,203,.55); } 80%, 100% { box-shadow: 0 0 0 18px rgba(185,143,203,0); } }
.finale__hinweis { margin: 16px auto 0; font-size: .92rem; color: #6a6a72; text-wrap: balance; }
@media (max-width: 560px) { .finale__weg strong { font-size: .92rem; } .finale__weg small { font-size: .78rem; } }

/* ---------- Fußbereich ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 0 var(--rand); background: var(--canvas); }
.fuss__raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; max-width: 1240px; margin: 0 auto; }
.fuss__raster > * { padding: 34px 24px 40px 0; display: flex; flex-direction: column; gap: 8px; }
.fuss__raster > * + * { padding-left: 24px; border-left: 1px solid var(--linie); }
.fuss .mono { color: #6a6a72; margin: 0 0 8px; }
.fuss__raster a { color: var(--night); text-decoration: none; font-weight: 600; }
.fuss__raster a:hover { color: var(--marke-text); }
.fuss__gross { font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.02em; }
.fuss__ort { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; color: var(--night); }
.fuss__zeit { margin: 0; display: flex; align-items: center; gap: 8px; color: #55555d; }
.fuss__zeit i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--marke); }
/* Sekundenpuls (home.js): Schlag des Punkts und ein feiner Ring je volle Sekunde; inset statt scale, damit der Strich fein bleibt */
.fuss__zeit i.schlag { animation: sekunden-schlag .34s cubic-bezier(.2,.8,.2,1); }
.fuss__ring { position: absolute; inset: 0; border: 1.5px solid var(--marke); border-radius: 50%; pointer-events: none; animation: sekunden-ring 1.9s cubic-bezier(.15,.7,.3,1) forwards, sekunden-blass 1.9s linear forwards; }
@keyframes sekunden-schlag { 40% { transform: scale(1.45); background: var(--marke-text); } }
@keyframes sekunden-ring { from { inset: -1px; } to { inset: -12px; } }
@keyframes sekunden-blass { from { opacity: .95; } to { opacity: 0; } }   /* gleichmäßig, damit auch die vergangene Sekunde noch lesbar ist */
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 1240px; margin: 0 auto; padding: 22px 0 120px; border-top: 1px solid var(--linie); font-size: .92rem; }
.fuss__hoch { display: inline-flex; align-items: center; gap: 6px; color: var(--night); text-decoration: none; font-weight: 600; }
.fuss__hoch .i { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__raster > * { padding: 26px 16px 26px 0; }
  .fuss__raster > * + * { padding-left: 0; border-left: 0; }
  .fuss__raster > *:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linie); }
  .fuss__raster > *:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 480px) { .fuss__raster { grid-template-columns: 1fr; } .fuss__raster > *:nth-child(even) { padding-left: 0; border-left: 0; } .fuss__raster > * + * { border-top: 1px solid var(--linie); } }

/* ---------- Ihre Köpfe ---------- */
/* Zwei Karten mit Gründerfoto im Format 4:5. Die Fotos sind gleich zugeschnitten (entwicklung/koepfe/zuschneiden.ps1):
   gleiche Augenhöhe und Gesichtsgröße. Der Verlauf dahinter ist nur bis zum Laden des Bildes zu sehen. */
.koepfe__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); max-width: 640px; }
.kopf { margin: 0; }
.kopf__bild {
  display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: clamp(20px, 2.6vw, 32px);
  background: linear-gradient(150deg, var(--marke-hell), var(--marke) 62%, #a57ab9); color: var(--night);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 30px 60px -36px rgba(21,16,23,.45);
}
.kopf:nth-child(2) .kopf__bild { background: linear-gradient(150deg, #7a5289, var(--marke-tief) 55%, #3f2549); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 30px 60px -36px rgba(21,16,23,.45); }
.kopf__bild span { font-family: var(--display); font-size: clamp(3.6rem, 10vw, 6.5rem); line-height: 1; letter-spacing: .01em; }
.kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.kopf__name { margin: 18px 0 4px; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 750; letter-spacing: -.02em; color: var(--night); }
.kopf__rolle { margin: 0; color: #6a6a72; }

/* ---------- Seiten-Fortschritt: der Kuli zieht unten eine Tintenlinie ---------- */
/* Der Stift ist das „i“ aus dem Logo: unten links am Seitenanfang, rechts am Seitenende (home.js setzt Lage und Neigung).
   Frische Tinte direkt hinter der Spitze ist dunkler und trocknet heller nach, sobald nicht mehr gescrollt wird.
   Damit beim Lesen nichts verdeckt wird, liegt die Linie an der untersten Kante und der Stift ist nur beim Scrollen
   zu sehen: Kurz nach dem Anhalten blendet er aus (home.js setzt .ist-ruhig), die Linie bleibt. */
.stift {
  position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom); z-index: 55;
  height: 34px; pointer-events: none;
  --stift-farbe: #88509f; --tinte: #b98fcb; --tinte-nass: #6a3d7d; --spur: rgba(21,16,23,.1);
}
.stift--dunkel { --stift-farbe: #e1cee8; --tinte: #cfb2db; --tinte-nass: #f1e8f4; --spur: rgba(255,255,255,.18); }
.stift__spur { position: absolute; left: 16px; right: 16px; top: 31.5px; height: 1px; background: var(--spur); transition: background-color .4s ease, opacity .45s ease; }
.stift__tinte { position: absolute; left: 16px; top: 31px; width: 0; height: 2px; border-radius: 2px; background: var(--tinte); opacity: .75; transition: background-color .4s ease; }
.stift__nass {
  position: absolute; top: 31px; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tinte-nass));
  opacity: 0; transition: opacity 1.4s ease;
}
.stift__nass.an { opacity: 1; transition-duration: .15s; }
/* Feder 4,9 × 24 px, Drehpunkt ist die Spitze */
.stift__feder { position: absolute; left: 0; top: 0; width: 4.86px; height: 24px; transform-origin: 49.2% 98.7%; will-change: transform; transition: opacity .45s ease; }
.stift.ist-ruhig .stift__feder, .stift.ist-ruhig .stift__spur { opacity: 0; }
.stift__feder svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--stift-farbe); transition: fill .4s ease; }
@media print { .stift { display: none; } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .stift * { transition: none; } }

@media (max-width: 420px) { .home .btn--lg { padding-inline: 20px; font-size: 1rem; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .werk__vorschau .werk__still, .werk__live { transition: none; }
  html:not([data-motion="full"]) .zeile > span { animation: none !important; transform: none !important; }
  html:not([data-motion="full"]) .aussage__text .wort { opacity: 1 !important; }
  html:not([data-motion="full"]) .ablauf__linie path { stroke-dashoffset: 0 !important; }
  html:not([data-motion="full"]) .finale__strich, html:not([data-motion="full"]) .finale__weg::after, html:not([data-motion="full"]) .finale__punkt { transition: none !important; }
  html:not([data-motion="full"]) .finale__knopf::after { animation: none !important; }
}