/* ════════════════════════════════════════════════════════════════════
   AUFTAKT-AUSBAU 25.09.2026 — Farbwelten der 15 neuen Branchen,
   Sofort-Logo, Erkannt-Chip, wischbare Branchenreihe, Telefon neben dem
   Fenster, Glas auf Feld und Knoepfen.
   Regeln: kein backdrop-filter auf Text (nur ::before), kein stehendes
   transform auf Text (Telefon steht in Ruhe auf none), Kontraste gerechnet.
   Neue Regeln ans Dateiende — bei gleicher Spezifitaet gewinnt die spaetere.
   ════════════════════════════════════════════════════════════════════ */

/* ── Farbwelten je Branche (Grund + Akzent, Schleier links fuer Text) ─ */
.mini-site[data-industry=dach]{--accent:#e8a988;background:#22262c}
.mini-site[data-industry=dach] .mini-shade{background:linear-gradient(90deg,#15181cf0,#15181c66 74%,transparent)}
.mini-site[data-industry=sanitaer]{--accent:#f0c18f;background:#12293f}
.mini-site[data-industry=sanitaer] .mini-shade{background:linear-gradient(90deg,#0b1a29f0,#0b1a2966 74%,transparent)}
.mini-site[data-industry=maler]{--accent:#efd27a;background:#262322}
.mini-site[data-industry=maler] .mini-shade{background:linear-gradient(90deg,#171515f0,#17151566 74%,transparent)}
.mini-site[data-industry=garten]{--accent:#c6e79a;background:#183224}
.mini-site[data-industry=garten] .mini-shade{background:linear-gradient(90deg,#0e2017f0,#0e201766 74%,transparent)}
.mini-site[data-industry=fliesen]{--accent:#d5e0ea;background:#25292e}
.mini-site[data-industry=fliesen] .mini-shade{background:linear-gradient(90deg,#171a1ef0,#171a1e66 74%,transparent)}
.mini-site[data-industry=schreiner]{--accent:#efd0ae;background:#33241a}
.mini-site[data-industry=schreiner] .mini-shade{background:linear-gradient(90deg,#20160ff0,#20160f66 74%,transparent)}
.mini-site[data-industry=bau]{--accent:#f6cd6f;background:#24272b}
.mini-site[data-industry=bau] .mini-shade{background:linear-gradient(90deg,#16181bf0,#16181b66 74%,transparent)}
.mini-site[data-industry=kfz]{--accent:#ff9a85;background:#1b1d22}
.mini-site[data-industry=kfz] .mini-shade{background:linear-gradient(90deg,#101115f0,#10111566 74%,transparent)}
.mini-site[data-industry=reinigung]{--accent:#b9e6f3;background:#1a2e3a}
.mini-site[data-industry=reinigung] .mini-shade{background:linear-gradient(90deg,#0f1d25f0,#0f1d2566 74%,transparent)}
.mini-site[data-industry=praxis]{--accent:#bfe9db;background:#1e2f3c}
.mini-site[data-industry=praxis] .mini-shade{background:linear-gradient(90deg,#121e27f0,#121e2766 74%,transparent)}
.mini-site[data-industry=kanzlei]{--accent:#e0cf9f;background:#1e2230}
.mini-site[data-industry=kanzlei] .mini-shade{background:linear-gradient(90deg,#12141ef0,#12141e66 74%,transparent)}
.mini-site[data-industry=foto]{--accent:#f3b9e0;background:#1a1a1f}
.mini-site[data-industry=foto] .mini-shade{background:linear-gradient(90deg,#0f0f13f0,#0f0f1366 74%,transparent)}
.mini-site[data-industry=immobilien]{--accent:#e8dabb;background:#22262e}
.mini-site[data-industry=immobilien] .mini-shade{background:linear-gradient(90deg,#15181df0,#15181d66 74%,transparent)}
.mini-site[data-industry=fitness]{--accent:#d2ff8f;background:#1e1f24}
.mini-site[data-industry=fitness] .mini-shade{background:linear-gradient(90deg,#121317f0,#12131766 74%,transparent)}
.mini-site[data-industry=transport]{--accent:#f7cf82;background:#1b2430}
.mini-site[data-industry=transport] .mini-shade{background:linear-gradient(90deg,#10161ef0,#10161e66 74%,transparent)}

/* ── Sofort-Logo im Beispiel ─────────────────────────────────────────
   Initialen auf dem Akzent der Branche, dunkle Schrift (Kontrast > 7:1
   auf allen Akzenten oben, die hellste ist #f6cd6f, dunkelste #e8a988). */
.mini-nav strong{display:flex;align-items:center;gap:9px}
.mini-nav strong .mini-logo{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;font:800 10px/1 var(--heading);letter-spacing:-.02em;
  color:#111;background:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 14px -6px rgba(0,0,0,.6);
}
.mini-nav strong>span{display:block}
.mini-nav strong .mini-logo + span{display:none}
/* Wortmarke + Unterzeile stehen rechts vom Zeichen untereinander */
.mini-nav strong{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center}
.mini-nav strong .mini-logo{grid-row:1 / span 2}
.mini-nav strong .mini-logo + span{display:block;grid-column:2}

/* ── Erkannt-Chip unter dem Eingabefeld ─────────────────────────────── */
.wow-chip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:8px 12px 8px 10px;border-radius:999px;width:max-content;max-width:100%;
  font:500 13px/1.3 var(--body);color:#f4f3ef;
  position:relative;isolation:isolate;
}
.wow-chip::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  background-color:rgba(20,21,23,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(239,183,76,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px -14px rgba(0,0,0,.8);
}
.wow-chip-punkt{width:8px;height:8px;border-radius:50%;background:#efb74c;box-shadow:0 0 0 4px rgba(239,183,76,.18);flex:none}
.wow-chip-text{font-weight:600}
.wow-chip-wahl{position:relative;color:#cfcac2;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px;min-height:44px;display:inline-flex;align-items:center}
.wow-chip-wahl select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* ── Branchenreihe: 19 Chips, wischbar, ohne Rollbalken ─────────────── */
.industry-switch{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 8px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.industry-switch::-webkit-scrollbar{display:none}
.industry-switch button{flex:none;white-space:nowrap;scroll-snap-align:start;min-height:44px}
.stage-controls>small{display:block;margin-top:4px}

/* ── Telefon neben dem Fenster (nur breit, nur feiner Zeiger) ─────────── */
.wow-phone{display:none}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .hero-stage{overflow:visible}
  .wow-phone{
    display:block;position:absolute;right:-18px;bottom:78px;width:196px;z-index:3;
    transform:none;transition:transform .35s var(--ease);will-change:transform;
    transform-style:preserve-3d;
  }
  .wow-phone-rahmen{
    position:relative;border-radius:30px;border:6px solid #2b2c2e;background:#0b0c0d;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(239,183,76,.08);
    overflow:hidden;aspect-ratio:9/19;
  }
  .wow-phone-kerbe{position:absolute;top:8px;left:50%;width:58px;height:16px;margin-left:-29px;border-radius:10px;background:#0b0c0d;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
  .wow-phone-schirm{position:absolute;inset:0;display:flex;flex-direction:column;background:#eee;overflow:hidden}
  .wow-phone-leiste{display:flex;align-items:center;justify-content:center;padding:30px 10px 6px;background:#f4f3ef;color:#333}
  .wow-phone-adresse{font:500 8px/1 var(--body);letter-spacing:.02em;background:#e6e4de;border-radius:999px;padding:4px 10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wow-phone .mini-site{flex:1;display:flex;flex-direction:column}
  .wow-phone .mini-nav{padding:11px 12px;min-height:0}
  .wow-phone .mini-nav>span{display:none}
  .wow-phone .mini-nav strong{font-size:11px;column-gap:6px}
  .wow-phone .mini-nav strong .mini-logo{width:18px;height:18px;font-size:8px}
  .wow-phone .mini-nav strong span{font-size:5px;line-height:1.6}
  .wow-phone .mini-contact{font-size:6px;padding:5px 7px}
  .wow-phone .mini-hero{height:215px;flex:none}
  .wow-phone .mini-hero>img{object-position:70% 40%}
  .wow-phone .mini-content{padding:18px 12px;max-width:100%}
  .wow-phone .mini-eyebrow{font-size:5px}
  .wow-phone .mini-content h2{font-size:21px;margin:8px 0}
  .wow-phone .mini-content p{font-size:7px;max-width:130px;line-height:1.45}
  .wow-phone .mini-content button{font-size:6px;padding:7px 8px;margin-top:11px}
  .wow-phone .mini-content button span{margin-left:8px}
  .wow-phone .mini-index{display:none}
  .wow-phone .mini-footer{font-size:5px;padding:10px 8px;flex-direction:column;gap:5px}
  .hero-stage.showing-mobile .wow-phone{display:none}
  /* Fenster rueckt ein Stueck nach links, damit das Telefon Platz hat */
  .hero-stage .site-window{margin-right:52px}
  .hero-stage .floating-note{z-index:4}
}
@media (prefers-reduced-motion:reduce){
  .wow-phone{transition:none;transform:none !important}
}

/* ── Glas auf dem Auftakt-Feld und den Knoepfen ─────────────────────── */
.hero-try-row{position:relative;isolation:isolate;border-radius:14px}
.hero-try-row::before{
  content:'';position:absolute;inset:-6px;z-index:-1;border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 50%,rgba(255,255,255,.04));
  background-color:rgba(20,21,23,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 20px 50px -26px rgba(0,0,0,.9);
}
.hero-try-row input{background:rgba(11,12,13,.75)}
/* Goldknopf als Glasknopf: schraeger Verlauf, helle Kante oben, dunkle unten,
   Schein nach aussen. Text bleibt dunkel auf Gold (Kontrast 10:1). */
.button:not(.secondary){
  background-color:#efb74c;
  background-image:linear-gradient(168deg,#ffd77d 0%,#efb74c 52%,#d99f34 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.22) inset,0 16px 36px -14px rgba(239,183,76,.55);
}
.button:not(.secondary):hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.22) inset,0 20px 44px -14px rgba(239,183,76,.75)}
.hero-try-row button{
  background-color:#efb74c;
  background-image:linear-gradient(168deg,#ffd77d 0%,#efb74c 52%,#d99f34 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.22) inset,0 12px 30px -12px rgba(239,183,76,.55);
}
/* Branchen-Chips als kleine Glaskapseln */
.industry-switch button{
  position:relative;isolation:isolate;border-radius:999px;
}
.industry-switch button::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  background-color:rgba(20,21,23,.6);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}
.industry-switch button[aria-pressed=true]::before{
  background-color:#efb74c;background-image:linear-gradient(168deg,#ffd77d 0%,#efb74c 52%,#d99f34 100%);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -12px rgba(239,183,76,.6);
}

.wow-chip[hidden]{display:none}

/* ── Entwurf weiterschicken ─────────────────────────────────────────── */
.wow-teilen{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:26px 0 0}
.wow-teilen .button{width:auto;flex:1 1 260px;justify-content:space-between}
.wow-teilen .button.secondary{flex:0 1 auto;min-width:200px;justify-content:center}
.wow-teilen small{flex-basis:100%;color:#a5a5a7;font-size:12px;line-height:1.5}
.wow-teilen .button.secondary{position:relative;isolation:isolate;border-color:transparent}
.wow-teilen .button.secondary::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  background-color:rgba(20,21,23,.6);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}
/* Kostprobe-Hinweis: etwas groesser, er ist jetzt die wichtigste Zeile am Fenster */
.floating-note{max-width:330px}
.floating-note strong{font-size:13px}
.floating-note small{font-size:11px;line-height:1.45}
.floating-note .note-check{font-size:18px}
@media (max-width:640px){
  .floating-note{max-width:86%}
  .floating-note strong{font-size:12px}
  .floating-note small{font-size:10px}
  .wow-teilen .button{flex-basis:100%}
  .wow-teilen .button.secondary{width:100%}
}

/* ── Kostprobe-Hinweis: fest ueber dem Fenster, kann nichts verdecken ── */
.floating-note{display:none}
.wow-kostprobe{
  display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px 16px;border-radius:12px;
  font:400 14px/1.45 var(--body);color:#f4f3ef;position:relative;isolation:isolate;
}
.wow-kostprobe strong{font-weight:700;color:#ffd77d}
.wow-kostprobe::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  background-color:rgba(20,21,23,.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(239,183,76,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 34px -20px rgba(0,0,0,.9);
}
.wow-kostprobe-zeichen{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#efb74c;color:#111;font-size:17px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
@media (max-width:640px){
  .wow-kostprobe{font-size:13px;padding:11px 13px;gap:10px}
  .wow-kostprobe-zeichen{width:30px;height:30px;font-size:15px}
}

/* ════════════════════════════════════════════════════════════════════
   GLASPLATTE + GLASKNOEPFE (25.09., zweiter Durchgang)
   Der Grund soll wie eine schwarze Glasplatte wirken: tiefes Schwarz,
   ein breiter Lichtstreifen wie von einem Fenster, das sich spiegelt,
   eine weiche Kante oben, und unter Fenster und Telefon eine Lichtpfuetze,
   als stuenden sie auf der Platte. Der Lichtstreifen wandert sehr langsam.
   Knoepfe: durchscheinendes Gold mit Weichzeichner DAHINTER (::before),
   glaenzende Kappe oben, helle Kante, Schein nach aussen. Text bleibt
   dunkel auf Gold: gemessen 6,8:1 auf dem dunkelsten Punkt.
   ════════════════════════════════════════════════════════════════════ */

/* ── Die Platte ────────────────────────────────────────────────────── */
body{background:#050506}
body::before{
  content:'';position:fixed;inset:-10% -10% -10% -10%;z-index:-3;pointer-events:none;
  background:
    /* breiter Fensterreflex, diagonal */
    linear-gradient(112deg,transparent 28%,rgba(255,255,255,.08) 41%,rgba(255,255,255,.20) 47%,rgba(255,255,255,.26) 49.5%,rgba(255,255,255,.20) 52%,rgba(255,255,255,.08) 58%,transparent 68%),
    /* zweiter, schmaler Reflex */
    linear-gradient(112deg,transparent 60%,rgba(255,255,255,.07) 67%,rgba(255,255,255,.08) 69%,transparent 75%),
    /* warmes Licht oben links, wie eine Lampe ueber der Platte */
    radial-gradient(900px 560px at 14% -6%,rgba(239,183,76,.20),transparent 62%),
    /* kalter Gegenschein unten rechts */
    radial-gradient(800px 600px at 92% 100%,rgba(120,140,190,.10),transparent 62%),
    /* Tiefe: Mitte etwas heller als die Raender (Vignette) */
    radial-gradient(1200px 900px at 50% 40%,rgba(255,255,255,.035),transparent 70%);
  background-size:170% 170%,170% 170%,100% 100%,100% 100%,100% 100%;
  background-position:0% 0%,0% 0%,0 0,0 0,0 0;
  animation:platte-glanz 26s ease-in-out infinite alternate;
}
@keyframes platte-glanz{
  from{background-position:0% 0%,0% 0%,0 0,0 0,0 0}
  to  {background-position:100% 100%,100% 100%,0 0,0 0,0 0}
}
/* Koernung bleibt, etwas feiner — poliertes Glas hat kaum Struktur */
body::after{opacity:.32}
/* obere Glaskante: ein Haarlicht ganz oben ueber die volle Breite */
.header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 30%,rgba(255,255,255,.28) 70%,transparent);
  pointer-events:none;
}
/* Lichtpfuetze unter dem Browserfenster und dem Telefon */
.hero-stage{isolation:isolate}
.hero-stage .site-window{position:relative}
.wow-pfuetze{
  position:absolute;left:8%;right:8%;height:120px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(239,183,76,.22),rgba(239,183,76,.06) 45%,transparent 72%);
  filter:blur(18px);
}
/* Karten und Chips: glaenzende Kappe oben, wie geschliffene Kante */
.glas::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 38%,transparent 42%),
    linear-gradient(118deg,transparent 28%,rgba(255,255,255,.06) 43%,transparent 56%);
}

/* ── Glasknoepfe ───────────────────────────────────────────────────── */
.button, .hero-try-row button, .wow-teilen .button{
  position:relative;isolation:isolate;overflow:hidden;
  border:0;
  background:transparent;
  color:#121314;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:none;
  transition:transform .25s var(--ease),filter .25s;
}
.button::before, .hero-try-row button::before{
  content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background-color:rgba(239,183,76,.84);
  background-image:linear-gradient(168deg,rgba(255,215,125,.95) 0%,rgba(239,183,76,.80) 55%,rgba(217,159,52,.92) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.22),
    inset 0 -10px 18px -12px rgba(0,0,0,.35),
    0 14px 34px -12px rgba(239,183,76,.70),
    0 2px 6px -2px rgba(0,0,0,.6);
}
/* glaenzende Kappe: obere Haelfte heller, wie Licht auf gewoelbtem Glas */
.button::after, .hero-try-row button::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.14) 44%,rgba(255,255,255,0) 48%),
    linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 47%,rgba(255,255,255,0) 58%);
  background-size:100% 100%,240% 100%;
  background-position:0 0,-120% 0;
  transition:background-position .9s var(--ease);
}
.button:hover, .hero-try-row button:hover{transform:translateY(-2px);filter:saturate(1.08);background:transparent}
.button:hover::after, .hero-try-row button:hover::after{background-position:0 0,120% 0}
.button:hover::before{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.22),
    0 20px 44px -12px rgba(239,183,76,.85),0 2px 6px -2px rgba(0,0,0,.6)}
/* Zweitknoepfe: klares Glas, heller Rand, weisse Schrift */
.button.secondary, .wow-teilen .button.secondary{color:#f4f3ef;text-shadow:none}
.button.secondary::before, .wow-teilen .button.secondary::before{
  background-color:rgba(255,255,255,.06);
  background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.9);
}
.button.secondary::after, .wow-teilen .button.secondary::after{
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 44%,transparent 48%),
             linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 47%,transparent 58%);
  background-size:100% 100%,240% 100%;background-position:0 0,-120% 0;
}
.button.secondary:hover::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.24),0 12px 30px -14px rgba(0,0,0,.9)}
/* Branchen-Chips und der Erkannt-Chip: gleiche Kappe */
.industry-switch button::after, .wow-chip::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,transparent 50%);
}
.industry-switch button[aria-pressed=true]{color:#121314;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.industry-switch button[aria-pressed=true]::before{
  background-color:rgba(239,183,76,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 24px -10px rgba(239,183,76,.7);
}
/* Kopfzeilen-Knopf, Anrufleiste: dieselbe Glasfassung erben sie ueber .button */
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .button::after, .hero-try-row button::after{transition:none}
}

/* Zustimmungsleiste: dieselben Glasknoepfe */
.zust .kn{position:relative;isolation:isolate;overflow:hidden;border:0;background:transparent;color:#f4f3ef;box-shadow:none}
.zust .kn::before{content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background-color:rgba(255,255,255,.06);
  background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4)}
.zust .kn::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 44%,transparent 48%)}
.zust .kn.voll{color:#121314;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.zust .kn.voll::before{background-color:rgba(239,183,76,.84);
  background-image:linear-gradient(168deg,rgba(255,215,125,.95),rgba(239,183,76,.80) 55%,rgba(217,159,52,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.22),0 14px 34px -12px rgba(239,183,76,.7)}
.zust .kn.voll::after{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14) 44%,transparent 48%)}

/* Die Abschnitte lassen die Platte durchscheinen: keine deckenden Grautoene mehr,
   nur hauchduenne Tönungen, damit die Streifen noch als Abschnitte lesbar bleiben.
   Kontrast: erster deckender Grund ist jetzt der body (#050506) — dunkler als vorher,
   alle Schriftkontraste steigen also. */
.hero, .client-strip, .features, .process-section, .section.features{background:transparent}
.client-strip{background:rgba(255,255,255,.025)}
.features{background:rgba(255,255,255,.02)}
.process-section{background:rgba(255,255,255,.015)}
.contact-section{background:radial-gradient(ellipse at bottom left,rgba(121,87,25,.16),transparent 70%),rgba(255,255,255,.02)}
.client-strip, .features, .process-section, .contact-section{border-color:rgba(255,255,255,.08)}

/* ════════════════════════════════════════════════════════════════════
   HANDY-RAHMEN AN DEN REFERENZEN (25.09.)
   Jede der 11 Referenzen zeigt neben der Desktop-Aufnahme dieselbe Seite
   auf dem Telefon — echte Aufnahme, 390 px breit. Der Rahmen haengt
   rechts unten ueber der Desktop-Aufnahme, wie im Auftakt.
   Im Rahmen ist nur ein Bild, kein Text — darum darf er sich beim
   Drueberfahren bewegen.
   ════════════════════════════════════════════════════════════════════ */
.ref-handy{
  position:absolute;right:5%;bottom:0;height:78%;z-index:3;pointer-events:none;
  aspect-ratio:600/1022;display:block;
  transform:translateY(6%) rotate(2deg);
  transition:transform .5s var(--ease);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
}
.ref-handy-rahmen{
  position:relative;display:block;height:100%;
  border-radius:12% / 7%;border:3px solid #2b2c2e;background:#0b0c0d;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.6);
}
.ref-handy-kerbe{
  position:absolute;top:5px;left:50%;width:34%;height:7px;margin-left:-17%;
  border-radius:6px;background:#0b0c0d;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.ref-handy img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  border-radius:0;border:0;box-shadow:none;transform:none;filter:none;aspect-ratio:auto;
}
.project:hover .ref-handy, .project:focus-visible .ref-handy,
.ref:hover .ref-handy, .ref:focus-visible .ref-handy{transform:translateY(0) rotate(0deg)}
/* Grosses Projekt: mehr Platz, Rahmen etwas groesser */
.project-main .ref-handy{height:86%;right:6%}
/* Die sechs kleinen Referenzen: Bild in eine eigene Huelle, Rahmen darueber */
.ref-bild{position:relative;display:block;overflow:hidden}
.ref-bild .ref-handy{height:82%;right:6%}
/* Sehr kleine Kacheln: Rahmen schmaler, sonst deckt er die Seite zu */
@media (max-width:760px){
  .ref-handy{height:72%;right:4%}
  .project-main .ref-handy{height:80%}
}
@media (prefers-reduced-motion:reduce){
  .ref-handy{transition:none;transform:none}
}
/* „Live ansehen"-Pille nach links, rechts steht jetzt das Telefon */
.project-open{right:auto;left:20px;z-index:4}
@media (max-width:1100px){.project-open{left:10px}}

/* ════════════════════════════════════════════════════════════════════
   WERKTAG-ZEITACHSE (25.09.)
   Von Montag 9 Uhr bis Dienstag 9 Uhr: eine Spur, die sich beim Scrollen
   fuellt, sechs Stationen leuchten nacheinander auf. Der Laeufer ist ein
   Goldpunkt ohne Text — darf sich bewegen. Die Stationen selbst werden
   nur umgefaerbt, nie verschoben.
   Grid: oben Start/Ende, Spur, darunter sechs Stationen in sechs Spalten.
   Unter 760 px steht die Spur senkrecht links, Stationen darunter/rechts.
   ════════════════════════════════════════════════════════════════════ */
.zeitachse{grid-column:1/-1;margin:clamp(28px,4vw,48px) 0 clamp(30px,4vw,54px);--za:0}
.za-kopf{margin-bottom:14px}
.za-enden{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}
.za-enden span{display:flex;flex-direction:column;gap:2px}
.za-enden b{font-family:var(--heading);font-size:clamp(1rem,1.6vw,1.25rem);font-weight:600;letter-spacing:-.02em;color:#f4f3ef}
.za-enden i{font-style:normal;font-size:13px;color:#a5a5a7}
.za-ende{text-align:right;align-items:flex-end}
.za-spur{position:relative;height:6px;border-radius:999px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06)}
.za-fuellung{position:absolute;inset:0;width:calc(var(--za) * 1%);border-radius:inherit;
  background-color:#efb74c;background-image:linear-gradient(90deg,#d99f34,#ffd77d);
  box-shadow:0 0 18px rgba(239,183,76,.55)}
.za-marke{position:absolute;top:50%;left:calc(var(--za) * 1%);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background-color:#efb74c;background-image:radial-gradient(circle at 35% 30%,#fff2c9,#efb74c 55%,#c98f2c);
  box-shadow:0 0 0 4px rgba(239,183,76,.18),0 0 26px rgba(239,183,76,.7),0 6px 14px rgba(0,0,0,.6)}
.za-stationen{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 14px}
.za-stationen li{position:relative;padding-top:18px;display:flex;flex-direction:column;gap:4px}
.za-stationen li::before{content:'';position:absolute;top:-12px;left:0;width:1px;height:20px;background:rgba(255,255,255,.14)}
.za-stationen li::after{content:'';position:absolute;top:-27px;left:-4px;width:9px;height:9px;border-radius:50%;
  background:#2b2c2e;box-shadow:0 0 0 2px #050506;transition:background .3s}
.za-stationen li:last-child{align-items:flex-end;text-align:right}
.za-stationen li:last-child::before{left:auto;right:0}
.za-stationen li:last-child::after{left:auto;right:-4px}
.za-stationen b{font-family:var(--heading);font-size:15px;font-weight:600;letter-spacing:-.01em;color:#8f8f91;transition:color .3s}
.za-stationen span{font-size:13px;line-height:1.45;color:#8f8f91;transition:color .3s}
.za-stationen li.za-an b{color:#efb74c}
.za-stationen li.za-an span{color:#c9c9c7}
.za-stationen li.za-an::after{background:#efb74c;box-shadow:0 0 0 2px #050506,0 0 12px rgba(239,183,76,.7)}
@media (max-width:760px){
  /* Start oben, Ende unten — die Spur laeuft dazwischen senkrecht */
  .za-enden{display:contents}
  .za-enden b{font-size:1.05rem}
  .za-start{grid-column:1/-1;grid-row:2;margin-bottom:14px}
  .za-ende{grid-column:1/-1;grid-row:4;margin-top:18px;text-align:left;align-items:flex-start}
  .zeitachse{display:grid;grid-template-columns:22px 1fr;column-gap:16px}
  .za-kopf{grid-column:1/-1;grid-row:1}
  .za-spur{grid-column:1;grid-row:3;width:6px;height:auto;margin:6px auto 0;align-self:stretch}
  .za-fuellung{width:100%;height:calc(var(--za) * 1%);background-image:linear-gradient(180deg,#d99f34,#ffd77d)}
  .za-marke{left:50%;top:calc(var(--za) * 1%)}
  .za-stationen{grid-column:2;grid-row:3;grid-template-columns:1fr;gap:18px;margin-top:0}
  .za-stationen li{padding-top:0;padding-left:0}
  .za-stationen li::before{top:8px;left:-16px;width:12px;height:1px}
  .za-stationen li::after{top:4px;left:-33px;right:auto}
  .za-stationen li:last-child{align-items:flex-start;text-align:left}
  .za-stationen li:last-child::before{left:-16px;right:auto}
  .za-stationen li:last-child::after{left:-33px;right:auto}
}
@media (prefers-reduced-motion:reduce){
  .zeitachse{--za:100}
  .za-stationen li b{color:#efb74c}
  .za-stationen li span{color:#c9c9c7}
  .za-stationen li::after{background:#efb74c}
}

/* 26.09.2026: Wischreihe von 4 auf 6 Projekte (Punkte am Meer, Blue Med).
   Mehr Scrollweg, damit jedes Projekt gleich lange im Bild steht. */
@media(min-width:801px){.motion-enabled .gallery-rail{height:420vh}}

/* 29.09.2026: siebtes Projekt (LR Produkte 24) in der Wischreihe – Reihe entsprechend länger (6 → 420vh, 7 → 490vh) */
@media(min-width:801px){.motion-enabled .gallery-rail{height:490vh}}

/* 30.09.2026: achtes Projekt (LR Partnerantrag) in der Wischreihe – 8 → 560vh */
@media(min-width:801px){.motion-enabled .gallery-rail{height:560vh}}

/* 01.10.2026: neuntes Projekt (Ivan Gentile) in der Wischreihe – 9 → 630vh */
@media(min-width:801px){.motion-enabled .gallery-rail{height:630vh}}