/* =========================================================
   Firmenseite und Danke-Seite im neuen Aufbau (Auftrag Z, 2026-10-30)
   Geladen über `seitenCss: firmen` zusammen mit css/neu.css, Body-Klasse
   .neu.welt-firmen (Anthrazit wie bisher, Akzent Bernstein statt des alten Orange #e8632b).
   Keine eigenen Farben: alles über die Rollen-Tokens aus neu.css.
   ========================================================= */

/* Ältere Tokens aus style-firmen.css zeigen auf die Rollen der Firmen-Welt */
body.seite-firmen {
  --rand: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  --paper: var(--s-grund);
  --paper-2: var(--s-sanft);
  --card: var(--s-flaeche);
  --feld: var(--s-flaeche);
  --ink: var(--s-text);
  --ink-70: var(--s-text-2);
  --ink-50: var(--s-text-2);
  --ink-35: var(--s-text-2);
  --line: var(--s-linie);
  --line-strong: color-mix(in srgb, var(--s-text-2) 55%, var(--s-grund));
  --slate: var(--s-text-2);
  --slate-bg: var(--s-sanft);
  --ember: var(--s-akzent);
  --ember-deep: var(--s-akzent-text);
  --ember-dark: var(--s-text);
  --ember-tint: var(--s-sanft);
  --fokus: var(--s-text);
  color-scheme: dark;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.seite-firmen .site-header { border-bottom-color: var(--s-buehne); }
.seite-firmen main a:not([class]) { color: var(--s-akzent-text); }
.seite-firmen main a:not([class]):hover { color: var(--s-text); }
.seite-firmen main .crumbs a:not([class]) { color: var(--s-auf-buehne-2); }
.seite-firmen main .crumbs a:not([class]):hover { color: var(--s-auf-buehne); }

/* ---------- Kopf: Bühne mit großer Überschrift und Video ---------- */
.f-kopf { border-bottom: 5px solid var(--s-akzent); }
.f-kopf .crumbs { max-width: none; margin: 0; padding: 30px 0 0; background: transparent; color: var(--s-auf-buehne-2); }
.f-kopf .crumbs a { color: var(--s-auf-buehne-2); }
.f-kopf .crumbs a:hover { color: var(--s-auf-buehne); }
.f-kopf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: 22px 0 72px; }
.f-kopf .s-riesig { font-size: clamp(38px, 5.2vw, 82px); line-height: .96; color: var(--s-auf-buehne); max-width: 16ch; }
.f-kopf .lede { color: var(--s-auf-buehne-2); font-size: 17px; line-height: 1.7; max-width: 52ch; margin: 24px 0 32px; }
.f-kopf .actions { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.f-kopf .bild { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 8px; box-shadow: 0 30px 60px -28px rgba(var(--s-schatten), .8); }
.f-kopf .bild img, .f-kopf .bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-kopf .bild .anim-still, .f-angebot .anim-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .f-kopf .bild video, .f-angebot video { display: none; }
  .f-kopf .bild .anim-still, .f-angebot .anim-still { display: block; }
}
@media (max-width: 860px) { .f-kopf-grid { grid-template-columns: 1fr; padding-bottom: 48px; } }

/* ---------- Fakten-Leiste ---------- */
.b2b-fakten b { color: var(--s-akzent-text); letter-spacing: .06em; }

/* ---------- Angebot als Collage ---------- */
.f-angebot { margin-top: 0; }
.f-angebot .f-bild { grid-column: span 6; min-height: clamp(280px, 34vw, 480px); }
.f-angebot .f-text { grid-column: span 6; padding: clamp(32px, 4vw, 64px); }
.f-angebot .c-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.f-angebot .c-titel { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; }
.f-angebot .f-text p { max-width: 44ch; }
.f-angebot .f-text ul { margin: 0; padding-left: 1.1em; font-size: 15.5px; line-height: 1.8; max-width: 52ch; }
.f-angebot .ist-dunkel ul { color: var(--s-auf-buehne-2); }
.f-angebot .ist-hell ul { color: var(--s-text-2); }
.f-angebot .f-sorte { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-top: 6px; padding-bottom: 4px; border-bottom: 2px solid var(--s-akzent); align-self: flex-start; }
.f-angebot .ist-dunkel .f-sorte { color: var(--s-auf-buehne); }
.f-angebot .ist-hell .f-sorte { color: var(--s-akzent-text); }
@media (max-width: 900px) { .f-angebot .f-bild, .f-angebot .f-text { grid-column: 1 / -1; } .f-angebot .f-bild { min-height: 240px; } }

/* ---------- 3D-Abschnitt: Vom Druck bis zum Einrasten ----------
   Hoher Abschnitt mit stickyer Bühne wie "Schicht für Schicht" der Startseite: Das Modul
   js/druck3d.js (Auftrag Y) liest den Fortschritt beim Durchwandern; Schritte und Balken
   folgen in js/firmen.js. Bis das Modul läuft (und ohne WebGL oder bei reduzierter
   Bewegung) steht das Poster. */
.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(38px, 4.8vw, 76px); line-height: .95; color: var(--s-auf-buehne); max-width: 11ch; }
.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: 8px; }
.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: 32svh; width: 32svh; }
  .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: 36px; }
  .s-schritte { margin: 18px 0 22px; gap: 12px; }
  .s-schritte span { font-size: 14.5px; }
}

/* ---------- Überschriften der Abschnitte ---------- */
.seite-firmen .section-head h2, .b2b-konditionen h2, .ct-info h2 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.05; color: var(--s-text); }
.seite-firmen .b2b-ablauf li { border-top-color: var(--s-akzent); }
.seite-firmen .b2b-konditionen { background: var(--s-sanft); }

/* ---------- Bestehende Bausteine der Seite (Schilder, Karten, Drehmuster, Ablauf, Konditionen) ---------- */
.b2b-fakten { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
@media (max-width: 800px) { .b2b-fakten { grid-template-columns: repeat(2, 1fr); } }
.b2b-fakten div { padding: 22px var(--gutter); border-right: 1px solid var(--line); }
.b2b-fakten div:last-child { border-right: none; }
@media (max-width: 800px) { .b2b-fakten div { padding: 18px 20px; } .b2b-fakten div:nth-child(2) { border-right: none; } .b2b-fakten div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.b2b-fakten b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--ember-deep); line-height: 1; }
.b2b-fakten span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#beispiele, #anfrage { scroll-margin-top: 90px; }
/* Drehbare Muster (Namensschild, Wertmarke) */
.dreh-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .dreh-raster { grid-template-columns: 1fr; gap: 36px; max-width: 560px; } }
.dreh-buehne { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 50% 40%, #fbfbfc, #eceef0 75%); border: 1px solid var(--line); perspective: 1100px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
.dreh-buehne:active { cursor: grabbing; }
.dreh-buehne:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.dreh-objekt { position: relative; transform-style: preserve-3d; will-change: transform; }
.dreh-objekt.namensschild { width: 84%; aspect-ratio: 75 / 30; --dicke: 4; --breite: 75; --rund: 4% / 10%; }
.dreh-objekt.wertmarke { width: 50%; aspect-ratio: 1; --dicke: 3; --breite: 35; --rund: 50%; }
.dreh-objekt.wertmarke-sechseck { width: 56%; aspect-ratio: 38.1 / 33; --dicke: 3; --breite: 38.1; --rund: 0; }
.dreh-objekt .schicht.maske { border-radius: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dreh-objekt .seite, .dreh-objekt .schicht { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--rund); }
.dreh-objekt .seite { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dreh-objekt .schicht { background: #19191b; }
.dreh-objekt .vorne { transform: translateZ(calc(var(--d, 4px) / 2 + 0.5px)); }
.dreh-objekt .hinten { transform: rotateY(180deg) translateZ(calc(var(--d, 4px) / 2 + 0.5px)); }
.dreh-schatten { position: absolute; left: 50%; bottom: 13%; width: 60%; height: 7%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,.22), transparent 70%); pointer-events: none; }
.dreh-hinweis { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #4b5661; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 99px; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.dreh-buehne.benutzt .dreh-hinweis { opacity: 0; }
.dreh-text { margin: 14px 0 12px; color: var(--ink-70); font-size: 15px; line-height: 1.5; }
.dreh-text b { display: block; color: var(--ink); font-size: 16px; }
.dreh-klein { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dreh-klein button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; width: 100%; box-sizing: border-box; cursor: pointer; display: block; border: 1px solid var(--line); background: var(--card); }
.dreh-klein button:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.dreh-klein img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dreh-klein span { display: block; padding: 8px 10px; font-size: 13.5px; color: var(--ink-70); }
.dreh-klein button[aria-pressed="true"] { border-color: var(--ember-deep); }

.b2b-ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: var(--container); margin: 0 auto; counter-reset: schritt; }
@media (max-width: 860px) { .b2b-ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .b2b-ablauf { grid-template-columns: 1fr; } }
.b2b-ablauf li { list-style: none; counter-increment: schritt; border-top: 2px solid var(--ember); padding-top: 16px; }
.b2b-ablauf li::before { content: "0" counter(schritt); font-family: var(--font-mono); font-size: 12px; color: var(--ember-deep); letter-spacing: .08em; }
.b2b-ablauf h3 { font-size: 18px; margin: 8px 0 6px; }
.b2b-ablauf p { color: var(--ink-70); font-size: 14.5px; line-height: 1.65; margin: 0; }

.b2b-konditionen { background: var(--slate-bg); padding: 48px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.b2b-konditionen .inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .b2b-konditionen .inner { grid-template-columns: 1fr; gap: 24px; } }
.b2b-konditionen h2 { font-size: 24px; margin: 0 0 14px; }
.b2b-konditionen dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 15px; }
.b2b-konditionen dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); padding-top: 4px; }
.b2b-konditionen dd { margin: 0; color: var(--ink-70); line-height: 1.6; }

.b2b-schilder { max-width: var(--container); margin: 0 auto; }
.b2b-schilder .intro { color: var(--ink-70); font-size: 15.5px; line-height: 1.7; max-width: 68ch; margin: 0 0 24px; }
.b2b-schilder .schild-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .b2b-schilder .schild-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.b2b-schilder figure { margin: 0; background: var(--card); border: 1px solid var(--line); }
.b2b-schilder .foto { aspect-ratio: 4 / 3; overflow: hidden; }
.b2b-schilder .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-schilder figcaption { padding: 10px 12px; font-size: 13.5px; color: var(--ink-70); }
.b2b-schilder .karten-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .b2b-schilder .karten-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* F1: Visitenkarten als seitliche Leiste – keine Lücke bei 5 Karten, Abwechslung zu den Rastern davor und danach */
.b2b-schilder .karten-raster.ist-leiste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-color: var(--s-akzent) transparent; }
.b2b-schilder .karten-raster.ist-leiste > figure { scroll-snap-align: start; }
@media (max-width: 860px) { .b2b-schilder .karten-raster.ist-leiste { grid-template-columns: none; grid-auto-columns: 74%; } }
/* F1: Danke-Seite – Knopf mit Tiefe braucht Abstand nach oben */
.welt-firmen .prose > .knopf { margin-top: 8px; }

/* ---------- Anfrage: Infospalte auf der Bühne, Formular daneben ---------- */
.seite-firmen .ct-wrap { max-width: none; grid-template-columns: minmax(300px, .72fr) 1.28fr; background: var(--s-grund); }
.seite-firmen .ct-info { background: var(--s-buehne-2); color: var(--s-auf-buehne); border: 0; padding: 64px 56px 72px var(--rand); }
.seite-firmen .ct-info p { color: var(--s-auf-buehne-2); font-size: 16px; line-height: 1.7; }
.seite-firmen .ct-info .addr, .seite-firmen .ct-info b { color: var(--s-auf-buehne); }
.seite-firmen .ct-info a { color: var(--s-akzent-buehne); text-decoration: underline; text-underline-offset: 3px; }
.seite-firmen .ct-form { padding: 64px var(--rand) 80px 64px; }
.seite-firmen .ct-form form { max-width: 680px; }
@media (max-width: 800px) {
  .seite-firmen .ct-wrap { grid-template-columns: 1fr; }
  .seite-firmen .ct-info { padding: 40px var(--gutter) 44px; }
  .seite-firmen .ct-form { padding: 40px var(--gutter) 60px; }
}
.seite-firmen .schritt-frage { font-size: clamp(26px, 2.4vw, 32px); }
.seite-firmen .schritt-zahl, .seite-firmen .wahl-titel, .seite-firmen .form-field label { color: var(--s-text); letter-spacing: .12em; font-weight: 600; }
.seite-firmen .schritt-balken { height: 6px; background: var(--s-sanft); border-radius: 3px; }
.seite-firmen .schritt-balken span { background: var(--s-akzent); }
.seite-firmen .wahl span { border-radius: 8px; padding: 16px 18px; color: var(--s-text-2); background: var(--s-flaeche); box-shadow: 0 6px 0 -3px var(--s-linie); }
.seite-firmen .wahl b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .02em; color: var(--s-text); }
.seite-firmen .wahl:hover span { border-color: var(--s-text); }
.seite-firmen .wahl input:checked + span { border-color: var(--s-text); background: var(--s-sanft); box-shadow: inset 0 0 0 1px var(--s-text); }
.seite-firmen .form-field input, .seite-firmen .form-field textarea, .seite-firmen .form-field select { border-radius: 7px; background: var(--s-flaeche); color: var(--s-text); }
.seite-firmen .form-field input:focus, .seite-firmen .form-field textarea:focus { border-color: var(--s-text); box-shadow: 0 0 0 3px var(--s-sanft); }
.seite-firmen input[type="file"]::file-selector-button { background: var(--s-text); color: var(--s-grund); border-color: var(--s-text); }

/* ---------- Knöpfe mit Tiefe, wo das Markup .btn-primary / .btn-outline hat (Formular, Danke-Seite) ---------- */
.seite-firmen .btn-primary, .seite-firmen .btn-outline {
  --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;
}
.seite-firmen .btn-primary {
  color: var(--knopf-text);
  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);
}
.seite-firmen .btn-outline {
  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);
}
.seite-firmen .btn-primary:hover { color: var(--knopf-text); border: 0; filter: brightness(1.04); 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%); }
.seite-firmen .btn-outline:hover { color: var(--knopf2-text); border: 0; }
.seite-firmen .btn-primary:hover, .seite-firmen .btn-outline:hover { transform: translateY(-2px); --hub: 8px; }
.seite-firmen .btn-primary:active, .seite-firmen .btn-outline:active { transform: translateY(5px); --hub: 1px; }
@media (prefers-reduced-motion: reduce) { .seite-firmen .btn-primary, .seite-firmen .btn-outline { transition: none; } }

/* ---------- Danke-Seite: Kopf wie die anderen neuen Seiten ---------- */
.seite-firmen .crumbs { max-width: none; margin: 0; padding: 34px var(--rand) 0; background: var(--s-buehne); color: var(--s-auf-buehne-2); }
.seite-firmen .crumbs a { color: var(--s-auf-buehne-2); }
.seite-firmen .page-header { max-width: none; margin: 0; padding: 14px var(--rand) 60px; background: var(--s-buehne); border-bottom: 5px solid var(--s-akzent); }
.seite-firmen .page-header h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: .96; color: var(--s-auf-buehne); max-width: 16ch; }
.seite-firmen .page-header .lede { color: var(--s-auf-buehne-2); font-size: 17px; line-height: 1.7; max-width: 56ch; margin: 22px 0 0; }
.seite-firmen .prose { max-width: none; padding: 56px var(--rand) 100px; }
/* auf der Firmenseite selbst sitzt .crumbs in der Bühne (siehe .f-kopf) */
.seite-firmen .f-kopf .crumbs { padding: 30px 0 0; background: transparent; }

/* ---------- Bildunterschriften ---------- */
.b2b-schilder figcaption b { display: block; color: var(--ink); font-size: 14.5px; }

/* ---------- FAQ (firmenfaq.json): aufklappbare Fragen als Karten, Optik wie /faq/ ---------- */
.b2b-faq .faq-liste { max-width: 820px; margin: 0 auto; }
.seite-firmen .b2b-faq .section-head { max-width: 820px; margin-left: auto; margin-right: auto; }
.seite-firmen .faq-frage, .seite-firmen .faq-frage:last-child {
  background: var(--s-flaeche); border: 1px solid var(--s-linie); border-radius: 8px; margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .2s ease;
}
.seite-firmen .faq-frage[open] { box-shadow: 0 18px 36px -24px rgba(var(--s-schatten), .5); }
.seite-firmen .faq-frage summary { padding: 20px 64px 20px 24px; font-size: 19px; line-height: 1.25; color: var(--s-text); letter-spacing: .01em; }
.seite-firmen .faq-frage summary:hover { color: var(--s-akzent-text); }
.seite-firmen .faq-frage summary:focus-visible { outline-offset: -3px; }
.seite-firmen .faq-frage summary::after {
  content: "+"; right: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--s-sanft); color: var(--s-text); font-size: 22px; font-weight: 700; padding-bottom: 2px;
}
.seite-firmen .faq-frage[open] summary::after { content: "–"; background: var(--knopf-bg); color: var(--knopf-text); }
.seite-firmen .faq-antwort { padding: 18px 24px 24px; max-width: none; border-top: 1px solid var(--s-linie); }
.seite-firmen .faq-antwort p { color: var(--s-text-2); font-size: 16px; line-height: 1.75; max-width: 68ch; margin: 0; }
@media (max-width: 900px) {
  .seite-firmen .faq-frage summary { font-size: 17.5px; padding: 18px 58px 18px 18px; }
  .seite-firmen .faq-antwort { padding: 16px 18px 20px; }
}