/* =========================================================
   Startseite (Auftrag T/T2, 2026-10-29). Baut auf css/neu.css auf
   (Tokens, Knöpfe, Collage, runde Ausschnitte); hier nur das, was
   es nur auf der Startseite gibt.
   ========================================================= */

/* =========================== Hero: dunkle Bühne, clean =========================== */
.s-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: min(86vh, 860px); align-items: stretch;
}
.s-hero-text { position: relative; z-index: 2; align-self: center; padding: 72px clamp(24px, 4vw, 64px) 72px max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter))); }
.s-hero h1 {
  font-size: clamp(44px, 6.4vw, 96px); line-height: .94; letter-spacing: -.01em; color: var(--s-auf-buehne);
  max-width: 11ch; text-wrap: balance;
}
.s-hero h1 em { font-style: normal; color: var(--s-akzent-buehne); }
.s-lede { font-size: 18px; line-height: 1.65; color: var(--s-auf-buehne-2); max-width: 44ch; margin: 28px 0 36px; }
.s-aktionen { display: flex; flex-wrap: wrap; gap: 18px 16px; margin-bottom: 44px; }
.s-vertrauen { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, var(--s-auf-buehne) 18%, transparent); display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--s-auf-buehne-2); }
.s-vertrauen li { display: flex; align-items: center; gap: 8px; }
.s-vertrauen svg { width: 16px; height: 16px; flex: none; color: var(--s-akzent-buehne); }

.s-hero-bild { position: relative; min-height: 520px; }
.s-hero-haupt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  /* Bild geht in die Bühne über (links und unten weich auslaufend) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 22%);
  mask-composite: intersect;
}
.s-hero-zeile {
  position: absolute; right: clamp(20px, 4vw, 56px); bottom: 28px; z-index: 3; margin: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--s-auf-buehne);
  text-shadow: 0 1px 10px rgba(var(--s-schatten), .9);
}
@media (max-width: 900px) {
  .s-hero { grid-template-columns: 1fr; min-height: 0; }
  .s-hero-bild { order: -1; min-height: 0; aspect-ratio: 4 / 3.4; }
  .s-hero-haupt { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 38%); mask-image: linear-gradient(0deg, transparent 0%, #000 38%); -webkit-mask-composite: source-over; mask-composite: add; }
  .s-hero-text { padding: 0 var(--gutter) 48px; margin-top: -64px; }
  .s-hero h1 { font-size: clamp(40px, 11.5vw, 60px); }
  .s-hero-zeile { display: none; }
  .s-lede { font-size: 16.5px; margin: 20px 0 28px; }
}

/* =========================== Collage-Platzierung der Startseite =========================== */
.c-gross-a { grid-column: 1 / span 7; grid-row: span 2; min-height: 420px; }
.c-text-a { grid-column: 8 / span 5; }
.c-klein-1 { grid-column: 8 / span 2; min-height: 240px; }
.c-klein-2 { grid-column: 10 / span 3; }
.c-klein-2 img { object-position: 50% 40%; }
.c-text-b { grid-column: 1 / span 5; }
.c-gross-b { grid-column: 6 / span 7; grid-row: span 2; min-height: 420px; }
.c-klein-3 { grid-column: 1 / span 3; min-height: 260px; }
.c-klein-4 { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .c-gross-a, .c-gross-b { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .c-text-a, .c-text-b { grid-column: 1 / -1; }
  .c-klein-1, .c-klein-3 { grid-column: 1 / span 3; aspect-ratio: 1; min-height: 0; }
  .c-klein-2, .c-klein-4 { grid-column: 4 / span 3; aspect-ratio: 1; }
  .c-text-b { order: 10; } .c-gross-b { order: 11; } .c-klein-3 { order: 12; } .c-klein-4 { order: 13; }
}

/* =========================== Schicht für Schicht (3D-Modell) ===========================
   Das Modell baut js/druck3d.js (Arbeiter) in .druck3d. Bis es läuft – und bei
   reduzierter Bewegung oder ohne WebGL – bleibt das Poster stehen. Setzt das Modul
   .ist-bereit auf .druck3d, wird das Poster ausgeblendet. */
.s-schicht { position: relative; height: 260vh; }
.s-schicht-halt {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; max-width: var(--container-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: 0 var(--gutter);
}
.s-schicht h2 { font-size: clamp(42px, 5.6vw, 84px); line-height: .95; color: var(--s-auf-buehne); max-width: 8ch; }
.s-schritte { list-style: none; margin: 34px 0 36px; padding: 0; display: grid; gap: 18px; }
.s-schritte li { display: grid; grid-template-columns: 22px 1fr; column-gap: 16px; opacity: .45; transition: opacity .3s ease; }
.s-schritte li.ist-aktiv { opacity: 1; }
.s-schritte li::before {
  content: ""; grid-row: span 2; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%;
  background: var(--s-auf-buehne-2); transition: background .3s ease;
}
.s-schritte li.ist-aktiv::before { background: var(--s-akzent); }
.s-schritte b { font-family: var(--font-display); font-size: 21px; color: var(--s-auf-buehne); letter-spacing: .02em; }
.s-schritte span { color: var(--s-auf-buehne-2); font-size: 15.5px; line-height: 1.55; }
.s-schicht-buehne { position: relative; justify-self: center; width: 100%; }
.druck3d { position: relative; aspect-ratio: 1; max-height: 78vh; max-height: 78svh; width: 100%; margin: 0 auto;
  /* Y3: eigene Flaeche hinter Poster und Modell, damit der ruhige Zustand (Poster) gerahmt und mittig auf der Buehne sitzt */
  background: var(--s-buehne-2); border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-auf-buehne) 12%, transparent); overflow: hidden; }
.druck3d > .druck3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.druck3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.druck3d.ist-bereit > .druck3d-poster { visibility: hidden; }
.s-schicht-balken { position: absolute; left: 0; right: 0; bottom: -18px; height: 3px; background: color-mix(in srgb, var(--s-auf-buehne) 16%, transparent); }
.s-schicht-balken span { display: block; height: 100%; width: 100%; background: var(--s-akzent); transform: scaleX(0); transform-origin: left; }
.s-schicht.ist-ruhig { height: auto; }
.s-schicht.ist-ruhig .s-schicht-halt { position: relative; height: auto; padding-top: 88px; padding-bottom: 88px; }
.s-schicht.ist-ruhig .s-schicht-balken { display: none; }
.s-schicht.ist-ruhig .s-schritte li { opacity: 1; }
.s-schicht.ist-ruhig .s-schritte li::before { background: var(--s-akzent); }

/* Reduzierte Bewegung: Der ruhige Zustand gilt schon im CSS und nicht erst, wenn das Skript die
   Klasse .ist-ruhig setzt; sonst springt der Abschnitt von 260vh auf seine Höhe (CLS, Auftrag F3). */
@media (prefers-reduced-motion: reduce) {
  .s-schicht { height: auto; }
  .s-schicht .s-schicht-halt { position: relative; height: auto; padding-top: 88px; padding-bottom: 88px; }
  .s-schicht .s-schicht-balken { display: none; }
  .s-schicht .s-schritte li { opacity: 1; }
  .s-schicht .s-schritte li::before { background: var(--s-akzent); }
}
@media (max-width: 900px) {
  .s-schicht-halt { grid-template-columns: 1fr; align-content: center; gap: 22px; padding-top: 24px; padding-bottom: 24px; }
  .s-schicht-buehne { order: -1; }
  /* Y3: am Handy muss die Buehne samt Text in den sichtbaren Bereich passen (Browserleiste: svh) */
  .s-schicht-halt { min-height: 0; }
  /* Y3: Balken am Handy nicht mehr unter der Buehne schweben lassen (lag ueber der Ueberschrift), sondern im Fluss mit Luft */
  .s-schicht-balken { position: relative; bottom: auto; margin-top: 12px; }
  .s-schicht-text h2 { margin-top: 6px; }
  .druck3d { max-height: 44vh; max-height: 44svh; width: 44vh; width: 44svh; max-width: 100%; }
}
/* Y3: kurze Handy-Hoehen (Browserleiste): Buehne und drei Schritte muessen zusammen in den sichtbaren Bereich */
@media (max-width: 900px) {   /* Y4: gilt am Handy immer, auch 412x915 (Galaxy S24) */
  .s-schicht-halt { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .druck3d { max-height: 36svh; width: 36svh; }
  .s-schicht h2 { font-size: 30px; }
  .s-schritte { margin: 10px 0 12px; gap: 7px; }
  .s-schritte b { font-size: 17px; }
  .s-schritte span { font-size: 13px; line-height: 1.4; }
  .s-schritte li::before { width: 11px; height: 11px; margin-top: 4px; }
  .s-schicht-text .knopf { padding-top: 10px; padding-bottom: 10px; }
  .s-schicht h2 { font-size: 40px; }
  .s-schritte { margin: 18px 0 22px; gap: 12px; }
  .s-schritte span { font-size: 14.5px; }
}

/* =========================== Meistbestellt =========================== */
.s-beliebt { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 2.3fr); gap: clamp(24px, 4vw, 64px); max-width: var(--container-wide); margin: 0 auto; padding: 110px 0 110px var(--gutter); align-items: start; }
.s-beliebt-kopf p { color: var(--s-text-2); font-size: 16px; line-height: 1.6; max-width: 26ch; margin: 22px 0 30px; }
.s-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 21vw, 300px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 22px 4px; scrollbar-color: var(--s-akzent) transparent; }
.s-leiste > * { scroll-snap-align: start; }
.s-leiste .pcard { background: var(--s-flaeche); }
@media (max-width: 900px) {
  .s-beliebt { grid-template-columns: 1fr; padding: 72px 0 72px var(--gutter); }
  .s-riesig { font-size: clamp(54px, 16vw, 84px); }
  .s-leiste { grid-auto-columns: 72%; }
}

/* =========================== Werkstatt =========================== */
.s-werkstatt { background: var(--s-sanft); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: 110px max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter))); }
.s-werkstatt-text .c-titel { color: var(--s-text); }
.s-werkstatt blockquote { margin: 24px 0 14px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.55; color: var(--s-text); max-width: 46ch; }
.s-sign { font-family: var(--font-sign); font-size: 34px; color: var(--s-akzent-text); margin: 0 0 34px; }
.s-zusagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; border-top: 1px solid color-mix(in srgb, var(--s-text) 18%, transparent); padding-top: 26px; }
.s-zusagen li { font-size: 14.5px; line-height: 1.55; color: var(--s-text-2); }
.s-zusagen b { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: .02em; color: var(--s-text); margin-bottom: 4px; }
@media (max-width: 900px) {
  .s-werkstatt { grid-template-columns: 1fr; padding: 72px var(--gutter); }
  .s-runde { max-width: 380px; }
  .s-zusagen { grid-template-columns: 1fr; }
}