/* =========================================================
   Neuer Seitenaufbau – gemeinsame Bausteine (2026-10-29, Auftrag T2)
   Geladen von base.njk für Seiten mit `neu: true` im Front-Matter
   (body.neu). Alle Farben laufen über Rollen-Tokens; die Farbwelt
   wählt die Body-Klasse:
     body.neu                 Farbwelt A (Blaugrau / Aubergine / Bernstein) – Standard
     body.neu.welt-firmen     Firmen-Welt: Anthrazit wie bisher, Akzent seit 2026-10-30 Bernstein (vorher Orange #e8632b)
   Seiteneigenes (Hero, Scroll-Abschnitt …) steht in eigenen Dateien,
   z. B. css/start.css.

   Rollen (eine feste Rolle je Farbe):
     --s-grund / --s-flaeche / --s-sanft   helle Flächen
     --s-buehne / --s-buehne-2             dunkle Bühne und Textfelder darauf
     --s-text / --s-text-2                 Schrift und Nebentext auf Hell
     --s-auf-buehne / --s-auf-buehne-2     Schrift und Nebentext auf der Bühne
     --s-akzent                            Linien, Balken, Markierungen (nie Schrift auf Hell)
     --s-akzent-text                       Akzent als Schrift auf Hell: Preise, Textlinks
     --s-akzent-buehne                     Akzent als Schrift auf der Bühne
     --knopf-* / --knopf2-*                Akzent-Knopf und Zweitknopf (Fläche, Schrift, Kante)
   ========================================================= */

/* ---------- Farbwelt A (Standard): Blaugrau / Aubergine / Bernstein ----------
   Steffen 2026-10-29: Lavendel und Aubergine nur als Schrift, keine dicken
   Lavendelflächen; die Bühne ist ein Graphit aus Blaugrau, die Knöpfe sind Bernstein.
   Farbwelt D (Salbei / Grau / gebranntes Orange) steht in der Git-Historie (1a9def9). */
body.neu {
  --s-grund: #DDE3E8;        /* Blaugrau */
  --s-flaeche: #F1F4F6;      /* Blaugrau + 60 % Weiß */
  --s-sanft: #EBEEF1;        /* Silber: Blaugrau + 40 % Weiß */
  --s-buehne: #1F2020;       /* Graphit: Blaugrau + 86 % Schwarz */
  --s-buehne-2: #2A2C2D;
  --s-text: #3A0F34;         /* Aubergine, 12,5:1 */
  --s-text-2: #5B3958;       /* 7,5:1 */
  --s-auf-buehne: #DDE3E8;   /* 12,6:1 */
  --s-auf-buehne-2: #BAABB8; /* Lavendel als Schrift auf Graphit, 7,5:1 */
  --s-akzent: #EAAA00;       /* nur Fläche/Linie auf Hell (1,6:1), Schrift auf Graphit 8,0:1 */
  --s-akzent-text: #3A0F34;  /* auf Hell trägt Aubergine den Akzent */
  --s-akzent-buehne: #EAAA00;
  --s-linie: #C7CCD1;
  --s-foto-grund: #E2E2E2;   /* Hintergrund der Produktfotos (Untersetzer), für ganz sichtbare Teile */
  --s-topbar: #EBEEF1; --s-topbar-text: #3A0F34;
  --knopf-bg: #EAAA00; --knopf-text: #3A0F34; --knopf-kante: #AC7412;     /* Schrift 7,9:1 */
  --knopf2-bg: #F1F4F6; --knopf2-text: #3A0F34; --knopf2-kante: #9AA3AB;
  --s-schatten: 20, 22, 24;
  /* globale Tokens aus style.css auf A umstellen (Kacheln, Kopf, Fuß, Links) */
  --paper: #DDE3E8; --card: #F1F4F6; --feld: #F9FAFB; --paper-2: #D0D5DA;
  --ink: #3A0F34; --ink-70: #5B3958; --ink-50: #6E536E; --ink-35: #6E536E;
  --line: #C7CCD1; --line-strong: #7A7D80; --slate: #5B3958; --slate-bg: #EBEEF1;
  --ember: #EAAA00; --ember-deep: #3A0F34; --ember-dark: #512D4D; --ember-tint: #FBEECC;
  --orange: #EAAA00; --orange-hell: #EAAA00; --orange-linie: #F6D98C; --grau: #BAABB8;
  --auf-dunkel: #DDE3E8; --auf-dunkel-70: #BAABB8; --linie-dunkel: #3A3C3D;
  --fokus: #3A0F34;
  background: var(--s-grund); color: var(--s-text);
}

/* ---------- Alte Firmen-Farbwelt (für /firmenkunden/ im neuen Aufbau) ----------
   Werte aus firmenkunden/index.njk (e1b7df2). Noch nicht im Einsatz. */
body.neu.welt-firmen {
  --s-grund: #1C1F22;
  --s-flaeche: #262A2E;
  --s-sanft: #2A3036;
  --s-buehne: #131517;
  --s-buehne-2: #16191B;
  --s-text: #EEF0F1;
  --s-text-2: #BEC3C7;
  --s-auf-buehne: #E9ECEF;
  --s-auf-buehne-2: #BBC0C4;
  /* Akzent wie auf den übrigen Seiten (Farbwelt A): Bernstein. Auf dem dunklen Grund ist er auch
     als Schrift lesbar (8,3:1 auf #1C1F22, 7,3:1 auf #262A2E); Knopf: Aubergine-Schrift auf Bernstein 7,9:1. */
  --s-akzent: #EAAA00;
  --s-akzent-text: #EAAA00;
  --s-akzent-buehne: #EAAA00;
  --s-linie: #363C42;
  --s-topbar: #2A3036; --s-topbar-text: #E9ECEF;
  --knopf-bg: #EAAA00; --knopf-text: #3A0F34; --knopf-kante: #AC7412;
  --knopf2-bg: #262A2E; --knopf2-text: #EEF0F1; --knopf2-kante: #4A525A;
  --s-schatten: 0, 0, 0;
}

/* =========================== Grundgerüst, Kopf- und Fußzeile =========================== */
.neu main { overflow-x: clip; }
.neu .topbar { background: var(--s-topbar); color: var(--s-topbar-text); }
.neu .site-header { background: var(--s-buehne); border-bottom-color: var(--s-buehne); }
.neu .site-header.is-open nav { background: var(--s-buehne); }
.neu .site-footer { background: var(--s-buehne); border-top-color: var(--s-buehne); color: var(--s-auf-buehne-2); }
.neu .site-footer .about, .neu .footer-links a { color: var(--s-auf-buehne-2); }
.neu .footer-links a:hover { color: var(--s-auf-buehne); }
.neu .logo-akzent { color: var(--s-akzent-buehne); }
.neu :focus-visible { outline: 2px solid var(--s-text); outline-offset: 3px; }
.neu .s-buehne :focus-visible, .neu .site-header :focus-visible, .neu .site-footer :focus-visible { outline-color: var(--s-akzent-buehne); }

.s-buehne { background: var(--s-buehne); color: var(--s-auf-buehne); }
.s-wrap { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Eine Rolle je Farbe: Namen in Schrift, Kategorie in Nebentext, Preise im Akzent */
.neu .pcard, .neu .pcard .name { color: var(--s-text); }
.neu .pcard .cat { color: var(--s-text-2); }
.neu .pcard .price { color: var(--s-akzent-text); }
.neu .set-badge { color: var(--s-text); background: var(--s-sanft); }

/* =========================== Knöpfe mit Tiefe ===========================
   Tastenkante unter der Fläche, weicher Schlagschatten, Licht von oben.
   Hover hebt an, Klick drückt ein. */
.knopf {
  --hub: 6px;
  position: relative; display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .03em; line-height: 1;
  padding: 18px 30px 17px; border-radius: 7px; border: 0; cursor: pointer; text-decoration: none;
  transform: translateY(0);
  transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .14s cubic-bezier(.2, .8, .2, 1), filter .14s ease;
}
.knopf-haupt {
  color: var(--knopf-text);
  /* Licht von oben: höchstens 7 % heller, damit helle Schrift auch oben ≥ 4,5:1 bleibt */
  background: linear-gradient(180deg, color-mix(in srgb, var(--knopf-bg) 93%, #fff) 0%, var(--knopf-bg) 45%, color-mix(in srgb, var(--knopf-bg) 94%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .12),
              0 var(--hub) 0 var(--knopf-kante), 0 calc(var(--hub) + 10px) 22px -6px rgba(var(--s-schatten), .55);
}
.knopf-zweit {
  color: var(--knopf2-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--knopf2-bg) 70%, #fff) 0%, var(--knopf2-bg) 45%, var(--knopf2-bg) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px var(--knopf2-kante),
              0 var(--hub) 0 var(--knopf2-kante), 0 calc(var(--hub) + 10px) 22px -8px rgba(var(--s-schatten), .45);
}
.knopf:hover { transform: translateY(-2px); --hub: 8px; }
.knopf-haupt:hover { color: var(--knopf-text); filter: brightness(1.04); }
.knopf-zweit:hover { color: var(--knopf2-text); }
.knopf:active { transform: translateY(5px); --hub: 1px; }
.knopf span { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.knopf:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .knopf, .knopf span { transition: none; } }

/* =========================== Überschriften =========================== */
.s-riesig { font-size: clamp(56px, 7.4vw, 124px); line-height: .9; letter-spacing: -.015em; color: var(--s-text); hyphens: manual; }
.c-titel { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3vw, 44px); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.c-link { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-top: 6px; align-self: flex-start; padding-bottom: 4px; border-bottom: 2px solid var(--s-akzent); }

/* =========================== Collage-Raster ===========================
   Bilder randlos, verschieden groß, Textfelder im Raster. Zellen:
   .c-bild (füllend) oder .c-bild.ist-ganz (Teil ganz sichtbar, Fotogrund dahinter). */
.s-collage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense;
  max-width: var(--container-wide); margin: 0 auto; background: var(--s-buehne);
}
.c-bild { display: block; overflow: hidden; position: relative; background: var(--paper-2); }
.c-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.c-bild:hover img { transform: scale(1.04); }
.c-bild.ist-ganz, .c-leiste .ist-ganz { background: var(--s-foto-grund); }
.c-bild.ist-ganz img, .c-leiste img.ist-ganz { object-fit: contain; }
.c-text { position: relative; padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.c-text p { margin: 0; font-size: 16px; line-height: 1.65; max-width: 40ch; }
.c-text.ist-dunkel { background: var(--s-buehne-2); color: var(--s-auf-buehne); }
.c-text.ist-dunkel p { color: var(--s-auf-buehne-2); }
.c-text.ist-dunkel .c-link { color: var(--s-auf-buehne); }
.c-text.ist-hell { background: var(--s-flaeche); color: var(--s-text); }
.c-text.ist-hell p { color: var(--s-text-2); }
.c-text.ist-hell .c-link { color: var(--s-akzent-text); }
.c-leiste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); }
.c-leiste img { width: 100%; height: auto; align-self: start; aspect-ratio: 1.6; object-fit: cover; filter: saturate(.9); }
@media (max-width: 900px) {
  .s-collage { grid-template-columns: repeat(6, 1fr); }
  .c-leiste { grid-template-columns: repeat(3, 1fr); }
  .c-leiste img:nth-child(n+4) { display: none; }
  .c-leiste img { aspect-ratio: 1; }
}

/* =========================== Runde Bildausschnitte ===========================
   Teil ganz sichtbar: Foto mit einfarbigem Grund, im Kreis auf 84 % verkleinert. */
.s-runde { position: relative; aspect-ratio: 1 / .92; max-width: 560px; justify-self: center; width: 100%; }
.s-runde .r { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--s-foto-grund);
  display: grid; place-items: center; box-shadow: 0 18px 40px -22px rgba(var(--s-schatten), .55); }
.s-runde .r img { width: 84%; height: 84%; object-fit: contain; }
.s-runde .r1 { width: 54%; left: 0; top: 6%; z-index: 1; }
.s-runde .r2 { width: 42%; right: 2%; top: 0; z-index: 2; }
.s-runde .r3 { width: 44%; left: 36%; bottom: 0; z-index: 3; }
.s-runde .r-ring { position: absolute; width: 22%; aspect-ratio: 1; right: 4%; bottom: 10%; border-radius: 50%; border: 3px solid var(--s-akzent); z-index: 0; }

/* =========================== Anfrage: Text + Privatkunden-Formular (Startseite, Shop) =========================== */
.s-anfrage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start;
  padding: 100px max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter))); }
.s-anfrage h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; color: var(--s-auf-buehne); max-width: 12ch; }
.s-anfrage-text p { color: var(--s-auf-buehne-2); font-size: 16.5px; line-height: 1.65; max-width: 46ch; margin: 22px 0 30px; }
.s-anfrage-text .c-link { color: var(--s-auf-buehne); }
/* Formular auf heller Karte, damit Felder und Kacheln wie auf /kontakt/ lesbar bleiben */
.s-anfrage-formular { background: var(--s-flaeche); color: var(--s-text); border-radius: 10px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.s-anfrage-formular .hidden-field { position: absolute; left: -9999px; }
@media (max-width: 900px) {
  .s-anfrage { grid-template-columns: 1fr; padding: 72px var(--gutter); }
}