/* ==========================================================================
   VF-TEK Website v2 - Stylesheet (angelegt 07.09.2026)

   Eigenstaendig: keine Zeile aus der alten style.css, kein Bootstrap, kein
   Fremdserver. Die Schrift Montserrat liegt bereits lokal auf dem Server und
   wird von dort geladen - kein Abruf bei Google, keine IP-Uebertragung.

   Farben stammen vom Flyer: Orange als Signalfarbe, Anthrazit als Grund.
   ========================================================================== */

:root {
  --orange:        #EF7202;
  --orange-hell:   #FF8A24;
  --orange-blass:  #FFF3E8;
  /* Das Marken-Orange bleibt die Flaechenfarbe. Als SCHRIFT auf hellem Grund
     traegt es aber zu wenig: #EF7202 auf Weiss ergibt 2,97:1, auf dem
     Streifengrund #F6F7F8 nur 2,77:1 - verlangt sind 4,5:1. Darum ein zweites,
     tieferes Orange, das ausschliesslich Schrift faerbt: 4,88:1 auf Weiss,
     4,55:1 auf Grau. Auf dunklem Grund bleibt #EF7202, dort sind es 5,44:1. */
  --orange-text:   #B85400;
  --anthrazit:     #1F2124;
  --anthrazit-2:   #2C2F33;
  --grau-text:     #55595F;
  --grau-linie:    #E3E5E8;
  /* Rahmen von BEDIENelementen muessen 3:1 erreichen, sonst ist nicht zu
     erkennen, wo ein Eingabefeld anfaengt. --grau-linie schafft auf Weiss nur
     1,26:1 und bleibt deshalb den dekorativen Linien und Kartenraendern
     vorbehalten; Felder und Farbknoepfe bekommen --feldrand mit 4,32:1. */
  --feldrand:      #767A80;
  --grau-flaeche:  #F6F7F8;
  --weiss:         #FFFFFF;

  --breite:        1180px;
  --radius:        14px;
  --schatten:      0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.07);
  --schatten-tief: 0 4px 8px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.12);
  --tempo:         .18s ease;

  /* Hoehe der orangen Leiste. Das Wappen zieht sich mit genau diesem Wert
     nach oben, damit es buendig am oberen Rand des Kopfes ansetzt. */
  --leiste-hoch:   33px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--grau-text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--anthrazit); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--orange-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }

/* Tastaturbedienung sichtbar machen - ohne das ist die Seite fuer alle
   unbenutzbar, die nicht mit der Maus arbeiten. */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.abschnitt { padding: 88px 0; }
.abschnitt--grau { background: var(--grau-flaeche); }
.abschnitt--dunkel { background: var(--anthrazit); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--weiss); }
.abschnitt--dunkel p { color: #C4C8CE; }
/* Karten in einem dunklen Abschnitt haben trotzdem weissen Grund. Ohne diese
   Ausnahme wuerde die Ueberschrift darin weiss auf weiss stehen und waere
   unsichtbar - genau das war beim Maschinenpark passiert. */
.abschnitt--dunkel .karte h2,
.abschnitt--dunkel .karte h3 { color: var(--anthrazit); }
.abschnitt--dunkel .karte p  { color: var(--grau-text); }

.kopfzeile-abschnitt { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.kopfzeile-abschnitt p { font-size: 1.08rem; }

.augenbraue {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-text); margin-bottom: 12px;
}
/* Dieselbe Kleinzeile steht auch im dunklen Seitenkopf und in den dunklen
   Abschnitten. Dort ist es umgekehrt: #B85400 kaeme auf #101215 nur auf
   3,85:1, das Marken-Orange dagegen auf 6,32:1. Also dort zurueckdrehen. */
.seitenkopf .augenbraue,
.abschnitt--dunkel .augenbraue { color: var(--orange); }
.abschnitt--dunkel .karte .augenbraue { color: var(--orange-text); }

/* --- Knöpfe ------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform var(--tempo), box-shadow var(--tempo), background var(--tempo);
}
.knopf:hover { transform: translateY(-2px); }
/* WEISSE SCHRIFT AUF DEM MARKEN-ORANGE: ausdrueckliche Entscheidung von
   VF-TEK vom 26.09.2026.
   ES GILT: color: #fff, auch beim Ueberfahren (#FF8A24 traegt also Text).
   WARUM: Die Barrierefreiheits-Runde desselben Tages hatte die Schrift
   voruebergehend auf Anthrazit gesetzt (5,44:1), weil Weiss auf #EF7202 nur
   2,97:1 erreicht und beim Ueberfahren 2,36:1 - gefordert waeren 4,5:1.
   VF-TEK hat das noch am 26.09.2026 zurueckgenommen: das BFSG gilt fuer
   VF-TEK derzeit nicht (Kleinstunternehmen, § 3 Abs. 3 BFSG), und der
   Betreiber will das urspruengliche Erscheinungsbild.
   BITTE NICHT WIEDER "KORRIGIEREN" - wer den Kontrast doch will, dunkelt das
   Orange ab (#B85400 ergibt mit Weiss 4,88:1), statt die Schriftfarbe zu
   tauschen. */
.knopf--haupt { background: var(--orange); color: #fff; box-shadow: 0 6px 20px rgba(239,114,2,.32); }
.knopf--haupt:hover { background: var(--orange-hell); color: #fff; box-shadow: 0 10px 28px rgba(239,114,2,.42); }
.knopf--rand { border-color: rgba(255,255,255,.45); color: #fff; }
.knopf--rand:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.knopf--rand-dunkel { border-color: var(--grau-linie); color: var(--anthrazit); background: #fff; }
.knopf--rand-dunkel:hover { border-color: var(--orange); color: var(--orange-text); }

/* --- Kopfbereich (Variante C, 07.09.2026) -------------------------------
   Kein eigenes Kopfband mehr. Auf der Startseite liegt die Navigation
   durchsichtig ueber der Buehne; auf allen anderen Seiten steht sie auf
   dunklem Grund, sonst waere sie auf hellem Inhalt nicht lesbar.

   Beim Scrollen bekommt der Kopf einen Grund (Klasse .kopf--gefuellt, gesetzt
   vom Skript in inc/fuss.php). Ohne das waere der Preisknopf nach dem
   Scrollen auf hellem Inhalt unsichtbar.
   ------------------------------------------------------------------------ */
.kopf { position: sticky; top: 0; z-index: 50; transition: background var(--tempo), box-shadow var(--tempo); }
.kopf--schwebend { background: transparent; }
.kopf--fest      { background: var(--anthrazit); }
.kopf--gefuellt  { background: rgba(24,26,29,.94); backdrop-filter: blur(10px); box-shadow: 0 2px 18px rgba(0,0,0,.3); }

.kopf__reihe {
  max-width: 1240px; margin: 0 auto; padding: 20px 28px;
  display: flex; align-items: center; gap: 28px;
}
.kopf--gefuellt .kopf__reihe { padding-top: 12px; padding-bottom: 12px; }

.kopf__logo img { height: 50px; width: auto; display: block; transition: height var(--tempo); }
.kopf--gefuellt .kopf__logo img { height: 40px; }

.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--orange-hell); border-bottom-color: var(--orange); }

.kopf__cta {
  background: var(--orange); color: #fff; text-decoration: none; font-weight: 700;   /* weiss: siehe Entscheidung oben */
  font-size: .95rem; padding: 12px 24px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(239,114,2,.5); transition: transform var(--tempo), box-shadow var(--tempo);
}
.kopf__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 11px 30px rgba(239,114,2,.6); }

.nav-schalter { display: none; background: none; border: 0; padding: 10px; cursor: pointer; margin-left: auto; }
.nav-schalter span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: var(--tempo); }

@media (max-width: 980px) {
  .kopf__reihe { flex-wrap: wrap; padding: 12px 20px; gap: 14px; }
  .nav-schalter { display: block; }
  /* Auf schmalen Geraeten braucht der schwebende Kopf einen Grund, sobald das
     Menue offen ist - sonst stuenden die Punkte auf dem Buehnenbild. */
  .kopf__nav { display: none; width: 100%; margin-left: 0; order: 3;
               background: rgba(24,26,29,.97); border-radius: 12px; }
  .kopf__nav.offen { display: block; }
  .kopf__nav ul { flex-direction: column; gap: 0; padding: 6px 16px 12px; }
  .kopf__nav li { border-top: 1px solid rgba(255,255,255,.12); }
  .kopf__nav li:first-child { border-top: 0; }
  .kopf__nav a { display: block; padding: 13px 0; border-bottom: 0; }
  .kopf__cta { order: 2; padding: 10px 18px; font-size: .88rem; }
  .kopf__logo img { height: 40px; }
}

/* --- Buehne: vollflaechiges Bild, Typografie traegt --------------------- */
.buehne { position: relative; background: #15171a; overflow: hidden; margin-top: -92px; padding-top: 92px; }
.buehne__bild {
  position: absolute; inset: 0;
  /* Welches Bild hier liegt, setzt index.php als style-Angabe - es kommt aus
     dem Bildplatz "buehne" und ist damit ueber die Verwaltung austauschbar.
     Frueher stand die Adresse hier fest im Stylesheet; die Verwaltung wusste
     davon nichts und meldete faelschlich "kein Bild".
     Abgedunkelt und leicht entsaettigt, damit die Schrift darueber traegt.
     Lage und Vergroesserung wie beim Seitenkopf - die Begruendung steht dort
     ausfuehrlich. Die Buehne ist etwas hoeher (gemessen 1440 x 811), die
     seitliche Reserve ist aber ebenso 0, solange nicht vergroessert wird. */
  /* max(1, ...) ist die Klammer gegen ein Verkleinern: Bei einem Faktor unter
     1 waere der Kasten KLEINER als das Band und ein Bandrand bliebe
     unbedeckt (bei 0,9 gemessen 72 Pixel). Die Liste in PHP beginnt bei
     100 %, aber eine spaetere Stufe soll das Band nicht still aufreissen. */
  --zz: max(1, var(--zoom, 1));
  left:   calc((1 - var(--zz)) * var(--fx, .5) * 100%);
  top:    calc((1 - var(--zz)) * var(--fy, .5) * 100%);
  width:  calc(var(--zz) * 100%);
  height: calc(var(--zz) * 100%);
  background-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  background-size: cover; background-repeat: no-repeat;
  opacity: .40; filter: grayscale(.3);
}
.buehne__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #101215 12%, rgba(16,18,21,.88) 46%, rgba(16,18,21,.35) 100%);
}
.buehne__inhalt { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 46px 28px 84px; }

.buehne__marke {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 7px 16px; color: #fff; font-size: .84rem; font-weight: 600;
}
.buehne__marke .sterne { font-size: .85rem; }

.buehne h1 {
  color: #fff; font-weight: 800; letter-spacing: -.035em; line-height: .96;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin: 22px 0 0; max-width: 15ch;
}
.buehne h1 .akzent { color: var(--orange); }
.buehne__unter { color: #b6bcc3; font-size: 1.08rem; max-width: 46ch; margin: 22px 0 0; }
.buehne__knoepfe { display: flex; gap: 14px; margin: 30px 0 20px; flex-wrap: wrap; }
.buehne__zusage { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: #8f959d; margin: 0; }

@media (max-width: 980px) {
  .buehne { margin-top: -76px; padding-top: 76px; }
  .buehne__inhalt { padding: 30px 20px 60px; }
  .buehne h1 { max-width: none; }
}

/* --- Aufmacher ---------------------------------------------------------- */
.aufmacher {
  background: linear-gradient(150deg, var(--anthrazit) 0%, var(--anthrazit-2) 55%, #3A2412 100%);
  color: #fff; padding: 92px 0 84px; position: relative; overflow: hidden;
}
/* Angedeutete Druckschichten im Hintergrund - dezent, rein dekorativ */
.aufmacher::after {
  content: ''; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 460px; height: 460px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(239,114,2,.16) 0 6px, transparent 6px 15px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 68%);
}
.aufmacher__innen { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.aufmacher h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); }
/* text-wrap:balance verteilt die Zeilen gleichmaessig, statt das letzte Wort
   allein umzubrechen. Browser ohne Unterstuetzung ignorieren es einfach. */
.aufmacher h1 span { display: block; text-wrap: balance; }
.aufmacher h1 .akzent { color: var(--orange); }
.aufmacher__unter { font-size: 1.15rem; color: #C9CDD3; max-width: 30em; }
.aufmacher__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 22px; }
.aufmacher__zusage { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: #9EA4AC; }
.aufmacher__zusage svg { flex: none; }

.aufmacher__karte {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius); padding: 28px;
}
.aufmacher__karte h2 { font-size: 1.05rem; color: #fff; margin-bottom: 16px; }
.aufmacher__liste { list-style: none; margin: 0; padding: 0; }
.aufmacher__liste li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.09); color: #D5D9DE; font-size: .95rem; }
.aufmacher__liste li:first-child { border-top: 0; }
.aufmacher__liste b { color: #fff; }

@media (max-width: 900px) {
  .aufmacher__innen { grid-template-columns: 1fr; gap: 36px; }
  .aufmacher::after { display: none; }
}

/* --- Kennzahlenleiste --------------------------------------------------- */
/* Weisse Schrift auf dem Marken-Orange, wie beim Hauptknopf - dieselbe
   Entscheidung von VF-TEK vom 26.09.2026, Begruendung oben bei .knopf--haupt.
   BITTE NICHT WIEDER "KORRIGIEREN". */
.kennzahlen { background: var(--orange); color: #fff; }
.kennzahlen ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 26px 24px; max-width: var(--breite); margin-inline: auto; }
.kennzahlen li { text-align: center; }
.kennzahlen .wert { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.kennzahlen .text { font-size: .87rem; opacity: .93; }
@media (max-width: 720px) { .kennzahlen ul { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } }

/* --- Karten ------------------------------------------------------------- */
.raster { display: grid; gap: 26px; }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; } }

.karte {
  background: #fff; border: 1px solid var(--grau-linie); border-radius: var(--radius);
  padding: 30px; transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: #D2D6DA; }
.karte__nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  /* Die Ziffer stand mit 2,72:1 auf dem blassen Orange. --orange-text hebt
     sie auf 4,47:1 - die Flaeche selbst bleibt unveraendert. */
  background: var(--orange-blass); color: var(--orange-text);
  font-weight: 800; font-size: 1.05rem; margin-bottom: 16px;
}
.karte h3 { margin-bottom: 8px; }
/* Karten im Raster gleich hoch machen und den letzten Absatz (meist der
   Verweis) nach unten schieben - sonst steht "Mehr dazu" je nach Textlaenge
   auf unterschiedlicher Hoehe, was unruhig wirkt. */
.raster .karte { display: flex; flex-direction: column; }
.raster .karte > :last-child { margin-top: auto; margin-bottom: 0; }
.karte p:last-child { margin-bottom: 0; }
.karte__liste { list-style: none; margin: 16px 0 0; padding: 0; }
.karte__liste li { position: relative; padding: 5px 0 5px 26px; font-size: .93rem; }
.karte__liste li::before {
  content: ''; position: absolute; left: 4px; top: 14px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--orange);
}

/* --- Materialien -------------------------------------------------------- */
.material { border-left: 3px solid var(--orange); }
.material__name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
/* Der Materialname ist die Angabe, nach der Besucher suchen (PLA, PETG, ASA …).
   Er stand vorher auf normaler Ueberschriftsgroesse und ging neben dem
   orangen Schlagwort unter - deshalb deutlich groesser und fetter. */
.material__name h2,
.material__name h3 {
  margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.material__kurz { font-size: .84rem; font-weight: 700; color: var(--orange-text); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) { .material__name h2, .material__name h3 { font-size: 1.5rem; } }
.material__gut { margin-top: 14px; font-size: .88rem; color: var(--anthrazit); }
.material__gut b { color: var(--grau-text); font-weight: 600; }

/* --- Vertraulichkeit ---------------------------------------------------- */
.zusage { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; max-width: 860px; margin: 0 auto; }
.zusage__symbol { width: 54px; height: 54px; border-radius: 14px; background: rgba(239,114,2,.16); display: grid; place-items: center; }
@media (max-width: 640px) { .zusage { grid-template-columns: 1fr; } }

/* --- Fragen (ohne JavaScript, mit <details>) ---------------------------- */
/* Zwischenueberschrift in der Fragenliste */
.fragen-gruppe {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-text); margin: 38px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--grau-linie);
}
.fragen-gruppe:first-of-type { margin-top: 0; }

.frage { border: 1px solid var(--grau-linie); border-radius: var(--radius); margin-bottom: 12px; background: #fff; overflow: hidden; }
.frage summary {
  cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 600; color: var(--anthrazit);
  list-style: none; position: relative;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--orange-text); line-height: 1;
}
.frage[open] summary::after { content: '–'; }
.frage[open] summary { color: var(--orange-text); }
.frage__inhalt { padding: 0 24px 22px; }
.frage__inhalt p { margin: 0; }

/* --- Projekte ----------------------------------------------------------- */
.projekt { overflow: hidden; padding: 0; }
.projekt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.projekt__text { padding: 24px 26px 28px; }
.projekt__text h3 { margin-bottom: 6px; }
.projekt__marke { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }

/* --- Kaufwege je Artikel ------------------------------------------------
   Zwei gleichwertige Knöpfe nebeneinander. Bewusst schlicht und ohne fremde
   Logos: Marken-Schriftzüge von eBay und Amazon dürfen nur unter deren
   Bedingungen verwendet werden - Text ist hier die sichere Variante. */
.kaufwege { display: flex; gap: 10px; flex-wrap: wrap; }
.kaufweg {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
  padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--grau-linie);
  background: #fff; color: var(--anthrazit); font-weight: 700; font-size: .88rem;
  text-decoration: none; transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.kaufweg:hover { background: var(--grau-flaeche); }
.kaufweg--ebay:hover   { border-color: #E53238; color: #E53238; }
.kaufweg--amazon:hover { border-color: #FF9900; color: #B25C00; }

/* --- Bildplatzhalter ----------------------------------------------------
   Sichtbare Markierung für Stellen, an denen noch ein echtes Foto fehlt.
   Bewusst auffällig: solange sie zu sehen ist, ist die Seite nicht fertig.
   Wird das Bild eingesetzt, verschwindet der Platzhalter mit. */
.platzhalter {
  display: grid; place-items: center; text-align: center;
  border: 2px dashed #C8CDD3; border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #FAFBFC 0 12px, #F2F4F6 12px 24px);
  /* #7A8189 lag auf dem gestreiften Grund bei 3,94:1 - der Hinweis sagt dem
     Team, welches Bild fehlt, und muss lesbar sein. --grau-text: 6,4:1. */
  color: var(--grau-text); padding: 28px 20px; min-height: 220px;
}
.platzhalter__titel { font-weight: 700; color: var(--anthrazit); font-size: .95rem; margin-bottom: 6px; }
.platzhalter__hinweis { font-size: .84rem; max-width: 30em; line-height: 1.55; }
.platzhalter svg { opacity: .45; margin-bottom: 10px; }

/* --- Technische Daten als Tabelle --------------------------------------- */
.daten { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: 18px; }
.daten th, .daten td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--grau-linie); vertical-align: top; }
.daten th { font-weight: 600; color: var(--grau-text); width: 46%; }
.daten td { color: var(--anthrazit); font-weight: 600; }
.daten tr:last-child th, .daten tr:last-child td { border-bottom: 0; }

/* --- Bewertungen -------------------------------------------------------- */
.sterne { color: #F5A623; letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.sterne .leer { color: #D8DBDF; }

/* Dezente Vertrauenszeile über dem Produktraster */
.vertrauenszeile {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 0 0 34px; font-size: .92rem;
}
.vertrauenszeile b { color: var(--anthrazit); }
.vertrauenszeile .sterne { font-size: .95rem; }

/* Schmaler Streifen mit kurzen Stimmen - bewusst leise: kleine Schrift,
   heller Grund, keine Karten, keine Überschrift. */
.stimmen-streifen { background: var(--grau-flaeche); border-top: 1px solid var(--grau-linie); border-bottom: 1px solid var(--grau-linie); padding: 30px 0; }
.stimmen-streifen ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; }
.stimmen-streifen li { text-align: center; font-size: .9rem; }
.stimmen-streifen .sterne { font-size: .85rem; }
.stimmen-streifen q { display: block; margin: 8px 0 6px; color: var(--anthrazit); }
/* #8A8F96 kam auf dem Streifengrund #F6F7F8 nur auf 3,04:1 - fuer 12,8 px
   Schrift zu wenig. --grau-text erreicht dort 6,57:1. */
.stimmen-quelle { font-size: .8rem; color: var(--grau-text); }
@media (max-width: 760px) { .stimmen-streifen ul { grid-template-columns: 1fr; gap: 22px; } }

.bewertung { display: flex; flex-direction: column; }
.bewertung__text {
  font-size: 1rem; color: var(--anthrazit); margin: 14px 0 18px;
  /* Anführungszeichen als typografisches Detail, nicht als Bild */
  quotes: '\201E' '\201C';
}
.bewertung__text::before { content: open-quote; }
.bewertung__text::after  { content: close-quote; }
.bewertung__fuss { margin-top: auto; font-size: .86rem; color: var(--grau-text); }
.bewertung__fuss b { color: var(--anthrazit); font-weight: 600; }

.bilanz {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  flex-wrap: wrap; margin-bottom: 44px;
}
.bilanz__zahl { font-size: 2.6rem; font-weight: 800; color: var(--anthrazit); line-height: 1; }
.bilanz__block { text-align: center; }
.bilanz__text { font-size: .9rem; margin-top: 6px; }
.abschnitt--dunkel .bilanz__zahl { color: #fff; }

/* --- Handlungsaufruf ---------------------------------------------------- */
.aufruf { background: var(--anthrazit); color: #fff; text-align: center; }
.aufruf h2 { color: #fff; }
.aufruf p { color: #C4C8CE; max-width: 40em; margin-inline: auto; }
.aufruf__knoepfe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* --- Fußbereich --------------------------------------------------------- */
.fuss { background: #16181A; color: #9BA1A8; padding: 60px 0 0; font-size: .93rem; }
.fuss a { color: #C7CCD2; text-decoration: none; }
.fuss a:hover { color: var(--orange); }
.fuss__raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.fuss h3 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 5px 0; }
.fuss__logo { height: 44px; width: auto; margin-bottom: 16px; }
.fuss__standort { margin-bottom: 16px; }
.fuss__standort b { color: #fff; display: block; font-size: .88rem; }
/* Profile als Symbole: quadratische Flächen gleicher Größe, damit die Reihe
   ruhig wirkt. Der Name steht im title und im aria-label, ist also für
   Screenreader und beim Überfahren weiterhin da. */
.fuss__profile { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fuss__profile a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid #303439; border-radius: 10px; color: #C7CCD2;
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.fuss__profile a:hover { color: #fff; border-color: var(--orange); background: rgba(239,114,2,.16); }
.fuss__profil-name { font-size: .68rem; padding: 0 4px; }
.fuss__unten { border-top: 1px solid #26292D; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .87rem; }
@media (max-width: 900px) { .fuss__raster { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 560px) { .fuss__raster { grid-template-columns: 1fr; } }

/* --- Hinweisbalken für den Entwurf -------------------------------------- */
.entwurf-hinweis {
  background: #FFF4CE; border-bottom: 1px solid #E8D89A; color: #5C4B10;
  padding: 10px 24px; font-size: .87rem; text-align: center;
}
.entwurf-hinweis b { color: #3F3308; }

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Der Sprunglink „Zum Inhalt springen“ ist der erste Tabulatorschritt jeder
   Seite. Ohne diese Regel legt sich der orange Fokusrahmen um ein 1x1-Pixel-
   Kaestchen - sehende Tastaturnutzer sehen dann nur ein Flackern und wissen
   nicht, worauf sie stehen. Muss NACH .nur-vorlesen stehen, sonst gewinnt
   clip: rect(0 0 0 0).
   Bewusst nur auf a.nur-vorlesen: Feldbeschriftungen und versteckte Dateifelder
   tragen dieselbe Klasse und duerften beim Fokus nicht aufklappen. */
a.nur-vorlesen:focus,
a.nur-vorlesen:focus-visible {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  clip: auto; overflow: visible; white-space: nowrap;
  z-index: 100;
  background: var(--anthrazit); color: #fff;
  border-radius: 10px; text-decoration: none;
}

/* ==========================================================================
   Formulare (Kontakt, Anfrage) - ergaenzt 08.09.2026

   Die alte Seite loeste das ueber Bootstrap (.form-control, .col-md-6) und
   ueber style=""-Angaben mitten im Markup. Beides faellt hier weg: v2 bringt
   kein Bootstrap mit, und Gestaltung gehoert ins Stylesheet.
   ========================================================================== */

.formular { display: grid; gap: 22px; }

.feld { display: block; }
/* Die Feldbeschriftung steht klein und in Versalien ueber dem Feld.
   :not(.haken) ist wichtig: die Einwilligung ist ebenfalls ein <label>
   direkt im .feld, ihr langer Satz darf aber nicht in Grossbuchstaben
   erscheinen - das las sich wie ein Warnhinweis. */
.feld > label:not(.haken), .feld__name {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--anthrazit); margin-bottom: 8px;
}
.pflicht { color: var(--orange-text); }

.feld input[type=text], .feld input[type=email], .feld input[type=tel],
.feld input[type=number], .feld select, .feld textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--feldrand); border-radius: 10px;
  background: #fff; color: var(--anthrazit);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2355595F' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
/* Das frühere „outline: none“ traf wegen des Element-Selektors input auch das
   Dateifeld und war spezifischer als die globale :focus-visible-Regel - der
   Fokusrahmen war damit in JEDEM Formularfeld abgeschaltet, uebrig blieb ein
   Rahmenwechsel mit 2,35:1. Jetzt bleibt es bei der Maus dezent, und wer mit
   der Tastatur arbeitet, bekommt den klaren Rahmen zurueck. */
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239,114,2,.15);
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
  border-color: var(--orange); box-shadow: none;
}
/* #9AA0A6 ergab auf Weiss 2,64:1, #6A6F76 kommt auf 5,06:1. */
.feld input::placeholder, .feld textarea::placeholder { color: #6A6F76; }

/* Zwei Felder nebeneinander - auf schmalen Bildschirmen untereinander. */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .feld-paar { grid-template-columns: 1fr; } }

/* Einwilligung: Haken und Text nebeneinander, Haken oben buendig. */
.haken { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.haken input[type=checkbox] {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--orange);
}
.haken span { font-size: .95rem; line-height: 1.6; }

.feld__fussnote { font-size: .82rem; line-height: 1.65; color: var(--grau-text); margin: 10px 0 0; }

/* Sicherheitsabfrage: Bild und Eingabe nebeneinander. */
.captcha { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: end; }
@media (max-width: 620px) { .captcha { grid-template-columns: 1fr; align-items: stretch; } }
.captcha img { border: 1px solid var(--feldrand); border-radius: 10px; width: 240px; max-width: 100%; }

/* Dateiauswahl: der eigentliche Datei-Knopf des Browsers ist ausgeblendet,
   sichtbar ist ein Knopf im v2-Stil daneben der Dateiname. */
.datei { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.datei__name { font-size: .92rem; color: var(--grau-text); }
.datei__fehler { color: #C0392B; font-size: .9rem; margin: 10px 0 0; min-height: 1px; }

/* Rueckmeldung nach dem Absenden. */
.meldung {
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 26px;
  font-size: 1rem; line-height: 1.65; border: 1px solid;
}
.meldung strong { display: block; font-size: 1.1rem; margin-bottom: 6px; color: inherit; }
.meldung--ok     { background: #EAF7EF; border-color: #BFE5CF; color: #1E6B41; }
.meldung--fehler { background: #FDECEA; border-color: #F5C6C2; color: #92221B; }

/* Linke Spalte: was den Absender erwartet. */
/* Auf breiten Bildschirmen ist das Formular deutlich hoeher als die
   Erklaerspalte daneben. Ohne sticky steht dort beim Ausfuellen der unteren
   Felder nur noch leere Flaeche. 106 px = Hoehe der Kopfleiste plus Luft. */
.formular-info { position: sticky; top: 106px; }
@media (max-width: 900px) { .formular-info { position: static; } }
.formular-info ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.formular-info li { display: flex; gap: 14px; align-items: flex-start; }
.formular-info li svg { flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.formular-raster { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .formular-raster { grid-template-columns: 1fr; gap: 40px; } }

/* Das Dateifeld selbst bleibt bedienbar (Tastatur, Vorlesesoftware), ist aber
   unsichtbar - sichtbar ist der Knopf daneben. Bewusst nicht display:none:
   ein ausgeblendetes Pflichtfeld kann der Browser nicht anspringen, die
   Meldung "Bitte wählen Sie eine Datei" bliebe dann unsichtbar.
   position:relative auf .datei sorgt dafuer, dass die Meldung am Knopf
   erscheint und nicht in der linken oberen Ecke der Seite. */
.datei { position: relative; }
.datei input[type=file] {
  position: absolute; left: 12px; bottom: 0; width: 1px; height: 1px;
  opacity: 0; padding: 0; border: 0;
}
/* Das unsichtbare Dateifeld bleibt ein Tabulatorstopp - ohne diese Regel
   stuende der Fokus auf einem Pixel, den niemand sieht. Der Rahmen wandert
   deshalb auf den sichtbaren Knopf daneben. Greift auch, wenn aus dem Knopf
   einmal ein <label for> wird: der Selektor fragt nur nach .knopf. */
.datei input[type=file]:focus + .knopf,
.datei input[type=file]:focus-visible + .knopf {
  outline: 3px solid var(--orange); outline-offset: 3px;
}

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz, AGB) - ergaenzt 08.09.2026

   Der Text stammt unveraendert aus der bestehenden Seite und bringt nur
   h2, h3, p, b, i, a, br und hr mit. Gestaltet wird er ausschliesslich hier -
   im Markup steht keine einzige style=""-Angabe mehr.
   ========================================================================== */

.rechtsseite { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .rechtsseite { grid-template-columns: 1fr; gap: 32px; } }

/* Inhaltsverzeichnis: laeuft auf breiten Bildschirmen mit. */
.rechtsseite__inhalt {
  position: sticky; top: 106px;
  border-left: 3px solid var(--orange-blass); padding-left: 20px;
}
@media (max-width: 900px) {
  .rechtsseite__inhalt {
    position: static; border-left: 0; padding: 22px 26px;
    background: var(--grau-flaeche); border-radius: var(--radius);
  }
}
.rechtsseite__inhalt h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau-text); margin-bottom: 14px;
}
.rechtsseite__inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.rechtsseite__inhalt li { counter-increment: p; margin-bottom: 9px; line-height: 1.4; }
.rechtsseite__inhalt a {
  font-size: .88rem; color: var(--grau-text); text-decoration: none;
}
.rechtsseite__inhalt a::before {
  content: counter(p) "."; color: var(--orange-text); font-weight: 700; margin-right: 7px;
}
/* Traegt der Rechtstext seine Nummern selbst ("1. Verantwortlicher"), zaehlt
   das Verzeichnis nicht mit - sonst stuende dort "1. 1. Verantwortlicher". */
.rechtsseite__inhalt--eigen a::before { content: "\2022"; }
.rechtsseite__inhalt a:hover { color: var(--orange); text-decoration: underline; }

/* Der Textkoerper. Die Zeilenlaenge ist bewusst begrenzt - ueber rund
   80 Zeichen findet das Auge den Zeilenanfang nicht mehr zuverlaessig. */
.rechtstext { max-width: 74ch; font-size: 1rem; line-height: 1.8; color: var(--grau-text); }
.rechtstext h2 {
  font-size: 1.35rem; margin: 44px 0 14px; padding-top: 18px;
  border-top: 1px solid var(--grau-linie); scroll-margin-top: 110px;
}
.rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext h3 { font-size: 1.05rem; margin: 28px 0 10px; }
.rechtstext p { margin: 0 0 1.2em; }
.rechtstext b, .rechtstext strong { color: var(--anthrazit); font-weight: 700; }
.rechtstext a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext hr { border: 0; border-top: 1px solid var(--grau-linie); margin: 36px 0; }
/* Lange Adressen und Nummern duerfen umbrechen statt seitlich auszubrechen. */
.rechtstext { overflow-wrap: anywhere; }

/* ---- Fehlerseite ---- */
.fehler__zahl { font-size: clamp(4rem, 14vw, 8rem); letter-spacing: -.04em; line-height: 1; }
a.fehler__weg { display: block; text-decoration: none; color: inherit; }
a.fehler__weg svg { color: var(--orange); margin-bottom: 12px; }
a.fehler__weg h3 { margin-bottom: 6px; }
a.fehler__weg p  { margin: 0; font-size: .95rem; }
a.fehler__weg:hover h3 { color: var(--orange); }

/* ==========================================================================
   Sicherheitsprüfung der Formulare - ergaenzt 08.09.2026
   Ersetzt das Bild-Captcha. Siehe inc/schutz.php fuer die Begruendung.
   ========================================================================== */

/* Lockfeld: nur fuer Maschinen. Bewusst nicht display:none - manche
   Versender pruefen darauf. Stattdessen aus dem Bild geschoben und fuer
   Tastatur und Vorlesesoftware unerreichbar. */
.lockfeld {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.schutz {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: var(--radius);
  border: 1px solid var(--grau-linie); background: var(--weiss);
}
.schutz__text b     { display: block; color: var(--anthrazit); font-size: .98rem; }
.schutz__text small { display: block; color: var(--grau-text); font-size: .85rem; }

/* Das Zeichen links: erst ein drehender Ring, dann ein Haken. */
.schutz__zeichen {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--grau-linie); border-top-color: var(--orange);
  animation: schutz-dreht .8s linear infinite;
}
@keyframes schutz-dreht { to { transform: rotate(360deg); } }

.schutz--fertig { border-color: #BFE5CF; background: #F3FBF6; }
.schutz--fertig .schutz__zeichen {
  border: 0; animation: none; background: #2E8B57;
  -webkit-mask: var(--haken-zeichen) no-repeat center / 20px 20px;
          mask: var(--haken-zeichen) no-repeat center / 20px 20px;
}
:root {
  --haken-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .schutz__zeichen { animation: none; }
}

/* ==========================================================================
   Seitenkopf der Unterseiten - Variante C (ergaenzt 08.09.2026)

   Vorher stand die Ueberschrift mittig auf Weiss, direkt unter der dunklen
   Kopfleiste: harte Kante, kein Halt. Jetzt greift ein dunkles Band unter
   die Leiste - wie die Buehne der Startseite - und endet in einer schraegen
   Kante mit oranger Schnittlinie. Siehe inc/seitenkopf.php.
   ========================================================================== */

/* margin-top zieht das Band unter die schwebende Kopfleiste, padding-top
   gibt den Platz zurueck. Ohne das stuende die durchsichtige Leiste auf
   weissem Grund und ihre weisse Navigation waere unsichtbar. */
.seitenkopf {
  position: relative; overflow: hidden; background: #15171a;
  margin-top: -92px; padding-top: 92px;
}
/* --- Lage und Vergroesserung des Bandbildes (ergaenzt 04.10.2026) --------
   Beide kommen je Seite aus der Verwaltung und stehen als eigene
   Eigenschaften im style-Attribut: --fx/--fy ist die Lage (0 = links bzw.
   oben, 1 = rechts bzw. unten), --zoom die Vergroesserung (1 = so gross wie
   das Band). Ohne Angaben greifen die Rueckfallwerte unten - mittig und
   unvergroessert, also genau das Bild von vor dem 04.10.2026.

   WARUM DER KASTEN WAECHST UND NICHT NUR background-position WANDERT:
   Das Band ist breiter als hoch (gemessen 1440 x 595, Verhaeltnis 2,4), ein
   uebliches Querformat dagegen nur 1,5. "cover" vergroessert deshalb bis die
   BREITE passt - das Bild steht von Rand zu Rand, der ganze Ueberhang liegt
   oben und unten. background-position konnte seitlich folglich nichts
   verschieben (bei 1280 bis 1920 Pixeln Fensterbreite gemessene seitliche
   Reserve: 0 Pixel; erst bei 390 Pixeln sind es 454).
   Seitlichen Spielraum gibt es erst, wenn der Kasten groesser als das Band
   ist. Genau das macht --zoom: Der Kasten wird breiter UND hoeher, left/top
   schieben ihn zurueck, und der Abschnitt darunter bleibt randlos gefuellt.
   Das Band hat overflow:hidden, der Ueberstand wird also abgeschnitten.
   Beide Schrauben wirken in dieselbe Richtung: --fx:0 heisst linker
   Kastenrand UND linke Bildkante, das Ergebnis bleibt "ganz links". */
.seitenkopf__bild {
  /* inset bleibt stehen, deckt aber nur den Fall ab, dass ein Browser var()
     gar nicht kennt - dann werden die Zeilen darunter schon beim Einlesen
     verworfen. Steht dagegen ein UNSINNIGER Wert in --zoom, gilt "invalid at
     computed-value time": width/height fallen auf auto, der Kasten faellt auf
     0 Pixel zusammen und das Band ist nur noch dunkel. Darum stehen in
     --fx/--fy/--zoom ausschliesslich Zahlen aus einer geschlossenen Liste -
     geprueft in PHP (v2_ausschnitt_pruefen) und im Skript der Verwaltung.
     Wer hier etwas umbaut, darf diese Zusage nicht aufgeben. */
  position: absolute; inset: 0;
  /* max(1, ...) ist die Klammer gegen ein Verkleinern: Bei einem Faktor unter
     1 waere der Kasten KLEINER als das Band und ein Bandrand bliebe
     unbedeckt (bei 0,9 gemessen 72 Pixel). Die Liste in PHP beginnt bei
     100 %, aber eine spaetere Stufe soll das Band nicht still aufreissen. */
  --zz: max(1, var(--zoom, 1));
  left:   calc((1 - var(--zz)) * var(--fx, .5) * 100%);
  top:    calc((1 - var(--zz)) * var(--fy, .5) * 100%);
  width:  calc(var(--zz) * 100%);
  height: calc(var(--zz) * 100%);
  background-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  background-size: cover; background-repeat: no-repeat;
  opacity: .30; filter: grayscale(.35);
}
.seitenkopf__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #101215 12%, rgba(16,18,21,.88) 46%, rgba(16,18,21,.35) 100%);
}
.seitenkopf__inhalt {
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto;
  padding: 40px 28px 92px;
}

.seitenkopf__weg { color: #7f868e; font-size: .84rem; margin: 0 0 18px; }
.seitenkopf__weg a { color: #a9b0b8; text-decoration: none; }
.seitenkopf__weg a:hover { color: var(--orange); text-decoration: underline; }
.seitenkopf__weg span { margin: 0 6px; }

.seitenkopf .augenbraue { margin-bottom: 14px; }
.seitenkopf h1 {
  color: #fff; font-weight: 800; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(2.1rem, 5vw, 3.6rem); margin: 0; max-width: 18ch;
}
.seitenkopf h1 .akzent { color: var(--orange); }
.seitenkopf__unter { color: #b6bcc3; font-size: 1.08rem; max-width: 52ch; margin: 20px 0 0; }

/* Die schraege Unterkante: zwei Keile mit GENAU derselben clip-path, der
   orange sechs Pixel hoeher gesetzt. Dadurch bleibt von ihm ein gleichmaessig
   breiter Streifen entlang der Kante stehen.
   Nicht als geneigtes Rechteck loesen - dessen Winkel haengt nicht von der
   Fensterbreite ab, der des Keils schon. Man saehe zwei verschiedene Schraegen. */
.seitenkopf::before,
.seitenkopf::after {
  content: ""; position: absolute; left: 0; right: 0; height: 96px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.seitenkopf::before {
  bottom: 6px; z-index: 3;
  background: linear-gradient(90deg, var(--orange), rgba(239,114,2,.25));
}
.seitenkopf::after { bottom: -1px; z-index: 4; background: var(--weiss); }

/* Folgt ein grauer Abschnitt, muss der Keil dessen Farbe haben - sonst
   entstuende ein weisses Dreieck ueber grauem Grund. */
.seitenkopf--auf-grau::after { background: var(--grau-flaeche); }

@media (max-width: 980px) {
  .seitenkopf { margin-top: -76px; padding-top: 76px; }
  .seitenkopf__inhalt { padding: 26px 20px 76px; }
  .seitenkopf h1 { max-width: none; }
  .seitenkopf::before, .seitenkopf::after { height: 64px; }
  .seitenkopf::before { bottom: 5px; }
}
/* Bringt eine Seite zwei Unterzeilen mit (Druckservice: Kurzzeile plus
   Erklaerung), traegt die erste die Signalfarbe. */
.seitenkopf__unter + .seitenkopf__unter { margin-top: 12px; font-size: 1rem; }
.seitenkopf__unter--erste { color: #d9dde1; }

/* ==========================================================================
   Cookie- und Speicherhinweis (ergaenzt 05.10.2026)

   Ein schmales Band unten, kein Kasten vor der halben Seite: Die Website holt
   keine Einwilligung ein (sie speichert nichts, was eine braeuchte), also darf
   der Hinweis auch nichts blockieren. Wer ihn ignoriert, kann weiterlesen.

   OHNE JAVASCRIPT bleibt er stehen - die Regel [hidden] unten hebt das
   hidden-Attribut wieder auf. Das ist Absicht: Ohne Skript kann sich niemand
   merken, dass er gelesen wurde, und ein wegklickbarer Hinweis, der nicht
   wegzuklicken ist, waere schlimmer als ein stehender.
   ========================================================================== */
.hinweisband {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 28px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--anthrazit); color: #d9dde1;
  border-top: 3px solid var(--orange);
  box-shadow: 0 -8px 28px rgba(0,0,0,.22);
  /* Startzustand der Blende; --da schaltet sie ein. */
  transform: translateY(100%); opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}
/* Ohne Skript gibt es kein --da: dann sofort sichtbar und ohne Blende. */
.hinweisband[hidden] { display: flex; transform: none; opacity: 1; }
.hinweisband--da  { transform: none; opacity: 1; }
.hinweisband--weg { transform: translateY(100%); opacity: 0; }

.hinweisband p {
  flex: 1 1 320px; min-width: 0; margin: 0;
  font-size: .9rem; line-height: 1.5; max-width: 86ch;
}
.hinweisband a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.hinweisband a:hover { color: var(--orange-hell); }
.hinweisband .knopf { flex: none; padding: 10px 20px; font-size: .9rem; }

@media (max-width: 560px) {
  .hinweisband { gap: 12px; padding: 12px 16px; }
  .hinweisband p { font-size: .84rem; flex-basis: 100%; }
  .hinweisband .knopf { width: 100%; }
}
/* Wer Bewegung abbestellt hat, bekommt den Hinweis ohne Blende. */
@media (prefers-reduced-motion: reduce) {
  .hinweisband { transition: none; transform: none; opacity: 1; }
  .hinweisband--weg { display: none; }
}

/* --- Portrait auf den Gesellschafterkarten (ergaenzt 04.10.2026) ---------
   Quadratisch und rund. Jedes Hochformat, Querformat oder Handyfoto passt
   dadurch in dieselbe Karte, ohne dass die Karten unterschiedlich hoch
   werden - und ein Kreis verzeiht einen schiefen Horizont.

   Empfohlen wird 800 x 800 Pixel: die Karte ist auf einem breiten Bildschirm
   rund 360 Pixel breit, das Bild darin 180; mit 800 bleibt auch auf einem
   hochaufloesenden Schirm Reserve, ohne die Seite unnoetig schwer zu machen.

   Beschnitten wird mit derselben Rechnung wie die Baender oben (--fx/--fy/
   --zoom, siehe .seitenkopf__bild). Steht das Gesicht am Bildrand, laesst es
   sich in der Verwaltung zurechtruecken, statt die Datei neu zuschneiden zu
   muessen. Ohne Angaben: mittig, unvergroessert. */
.portrait {
  position: relative; overflow: hidden;
  width: 180px; max-width: 60%; aspect-ratio: 1 / 1;
  margin: 0 auto 18px; border-radius: 50%;
  background: var(--grau-flaeche);
}
.portrait img {
  position: absolute; inset: 0;
  --zz: max(1, var(--zoom, 1));
  left:   calc((1 - var(--zz)) * var(--fx, .5) * 100%);
  top:    calc((1 - var(--zz)) * var(--fy, .5) * 100%);
  width:  calc(var(--zz) * 100%);
  height: calc(var(--zz) * 100%);
  object-fit: cover;
  object-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  display: block;
}

/* ==========================================================================
   Startseite: die zwei Abschnitte "Vier Wege" und "So läuft es ab"
   (ergaenzt 09.09.2026)

   Vorher benutzten beide dasselbe Muster - raster--4 mit karte und oranger
   Nummer. Zwei gleiche Vierergitter hintereinander lasen sich wie eine
   einzige lange Liste, in der nichts hervorstach.

   Jetzt unterscheiden sie sich in der FORM, nicht nur im Text: oben ein
   Raster aus zwei mal zwei breiten Karten, unten ein Weg mit verbundenen
   Schritten. Genau das war der Punkt - der Ablauf IST eine Reihenfolge,
   vier unverbundene Kaesten haben ihr widersprochen.
   ========================================================================== */

/* --- Leistungen: zwei breite Karten je Reihe --------------------------- */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .wege { grid-template-columns: 1fr; } }

/* Die ganze Karte ist der Verweis, nicht nur "Mehr dazu" - ein groesseres
   Ziel trifft sich mit dem Finger deutlich leichter. */
.weg {
  display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start;
  text-decoration: none; color: inherit;
}
.weg__symbol {
  width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-blass); color: var(--orange-text);
  transition: background var(--tempo), color var(--tempo);
}
.weg h3 { margin-bottom: 8px; font-size: 1.12rem; }
.weg p  { margin: 0 0 12px; font-size: .97rem; }
.weg__mehr { font-weight: 700; font-size: .93rem; color: var(--orange-text); }
.weg:hover .weg__symbol { background: var(--orange); color: #fff; }
.weg:hover h3 { color: var(--orange); }

/* --- Ablauf: der Weg als Weg ------------------------------------------ */
/* Ausgezeichnet als <ol>: Der Ablauf ist eine Reihenfolge, und
   Vorlesesoftware sagt dann "Punkt 1 von 4". Die Aufzaehlungszeichen des
   Browsers sind hier aber falsch - die Nummer steht schon im Kreis. */
.strahl {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  list-style: none; margin: 0; padding: 0;
}

/* Die gestrichelte Linie beginnt und endet in der Mitte des ersten bzw.
   letzten Kreises - deshalb 12,5 % (eine halbe Spaltenbreite von 25 %). */
.strahl::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 14px, transparent 14px 26px);
  opacity: .55;
}
.strahl__schritt { text-align: center; position: relative; }
.strahl__kreis {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem; position: relative; z-index: 2;
  /* 20 px fett, weiss auf Orange = 2,97:1; Anthrazit darauf 5,44:1. */
  background: var(--orange); color: var(--anthrazit); box-shadow: 0 6px 18px rgba(239,114,2,.34);
  /* Der Rand hat die Farbe des Abschnitts und schneidet die Linie sauber ab. */
  border: 5px solid var(--grau-flaeche);
}
.strahl__marke {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-text); margin-bottom: 6px;
}
.strahl__schritt h3 { font-size: 1.08rem; margin-bottom: 8px; }
.strahl__schritt p  { font-size: .95rem; margin: 0; }

/* Schmale Bildschirme: der Weg kippt nach unten, die Linie nach links. */
@media (max-width: 860px) {
  .strahl { grid-template-columns: 1fr; gap: 0; }
  .strahl::before {
    left: 27px; right: auto; top: 0; bottom: 0; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--orange) 0 14px, transparent 14px 26px);
  }
  .strahl__schritt {
    text-align: left; display: grid; grid-template-columns: 56px 1fr;
    gap: 4px 20px; padding-bottom: 30px;
  }
  /* Ein Schritt hat vier Kinder: Kreis, Marke, Ueberschrift, Text. Ohne
     ausdrueckliche Zuordnung fuellt das Raster sie der Reihe nach - die
     Ueberschrift landete dann in der 56 Pixel schmalen Kreisspalte und
     brach nach jedem Wort um. Am 09.09.2026 am Handy aufgefallen. */
  .strahl__kreis { margin: 0; grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .strahl__marke,
  .strahl__schritt h3,
  .strahl__schritt p { grid-column: 2; }
}

/* ==========================================================================
   Materialseite: Details je Material (ergaenzt 11.09.2026)
   Balken = Vergleich unserer Materialien untereinander, keine Normwerte.
   ========================================================================== */
.werte-legende { font-size: .9rem; color: var(--grau-text); margin: 0 0 24px; }
.material__details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--grau-linie);
}
@media (max-width: 560px) { .material__details { grid-template-columns: 1fr; } }
.werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.werte li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: .86rem; line-height: 1.3; }
.werte__balken { display: inline-flex; gap: 3px; }
.werte__balken span { width: 14px; height: 8px; border-radius: 2px; background: var(--grau-linie); }
.werte__balken span.an { background: var(--orange); }
.fakten { margin: 0; display: grid; gap: 11px; align-content: start; font-size: .9rem; line-height: 1.5; }
.fakten dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--anthrazit); }
.fakten dd { margin: 2px 0 0; }
/* Die allgemeine Regel ".raster .karte > :last-child { margin-top: auto }" schiebt
   das letzte Element einer Karte an den unteren Rand - gedacht fuer eine kurze
   Fusszeile. Seit die Materialkarten einen ganzen Detailblock tragen, riss das
   bei kurzen Beschreibungen eine grosse Luecke auf (ASA neben dem laengeren
   ABS-easy). Hier folgen die Details deshalb direkt dem Text. */
.raster .material > .material__details { margin-top: 18px; }

/* ==========================================================================
   Handy und Tablet - Ueberarbeitung vom 14.09.2026

   Anlass: Beim Aufklappen des Menues wurde der Hintergrund oben weiss.
   Die Vermessung aller Seiten bei 320, 360 und 390 px ergab darueber hinaus:
     - Bei 360 und 320 px brach die Kopfzeile schon GESCHLOSSEN um
       (Kopf 128 statt 70 px) - Logo und Knopf standen dann auch ohne
       Menue auf Weiss. 360 px ist die Standardbreite vieler Android-Geraete.
     - Startseite, Materialien, Kontakt und Anfrage liessen sich bei 320 bzw.
       360 px seitlich verschieben.
     - "Datenschutzerklaerung" und "Allgemeine Geschaeftsbedingungen" wurden
       im dunklen Band auf allen Handybreiten rechts abgeschnitten.
   Dieser Block ueberschreibt nur; die urspruenglichen Regeln weiter oben
   bleiben stehen und gelten fuer den Desktop unveraendert.
   ========================================================================== */

/* Hoehe der Kopfleiste als EINE Groesse. Buehne und Seitenkopf ziehen sich
   um genau diesen Wert darunter. Vorher standen dort feste Zahlen (92 / 76),
   waehrend der Kopf 90 / 70 hoch war. */
:root { --kopf-hoehe: 92px; }
.buehne, .seitenkopf { margin-top: calc(-1 * var(--kopf-hoehe)); padding-top: var(--kopf-hoehe); }

/* Spruenge zu Ankern - von der Startseite nach /leistungen#ersatzteile oder
   im Inhaltsverzeichnis der Rechtstexte - landeten unter der klebenden
   Kopfleiste. */
main [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }

@media (max-width: 980px) {
  :root { --kopf-hoehe: 64px; }

  /* --- Kopfleiste: immer genau eine Zeile, immer gleich hoch ------------- */
  .kopf__reihe {
    position: relative; flex-wrap: nowrap;
    height: var(--kopf-hoehe); padding: 0 16px; gap: 10px;
  }
  .kopf--gefuellt .kopf__reihe { padding-top: 0; padding-bottom: 0; }
  .kopf__logo { flex: 0 0 auto; }
  .kopf__logo img, .kopf--gefuellt .kopf__logo img { height: 40px; }

  /* Logo links, Preisknopf, Menue ganz rechts - dort, wo der Daumen es
     erwartet. Der Knopf darf schmaler werden, bricht aber nie um. */
  .kopf__cta {
    order: 1; margin-left: auto; flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    padding: 10px 18px; font-size: .88rem;
    box-shadow: 0 5px 16px rgba(239,114,2,.4);
  }
  .nav-schalter {
    order: 2; margin-left: 0; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  }
  .nav-schalter span { width: 22px; margin: 0; }
  /* Offen wird aus den drei Strichen ein Kreuz - man sieht, wie es zugeht. */
  .nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Das Menue ist eine Tafel UEBER dem Inhalt. Vorher war es Teil der
     Kopfzeile: der Kopf wuchs beim Aufklappen von 70 auf 577 px, schob das
     dunkle Band nach unten, und Logo und Knopf standen auf Weiss. */
  .kopf__nav {
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    width: auto; margin: 0;
    max-height: calc(100vh - var(--kopf-hoehe) - 24px);
    max-height: calc(100dvh - var(--kopf-hoehe) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    background: #1B1D21; border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
  }
  .kopf__nav ul { padding: 4px 18px 8px; }
  .kopf__nav a { padding: 14px 2px; font-size: 1.02rem; }

  /* Offenes Menue: fester dunkler Grund hinter der Kopfzeile - egal ob ueber
     Buehne, Seitenkopf oder weissem Inhalt, gescrollt oder nicht - und eine
     abgedunkelte Seite dahinter. Ein Tipp darauf schliesst (inc/fuss.php).
     backdrop-filter muss dafuer weg: Er macht den Kopf zum Bezugsrahmen fuer
     position:fixed, und die Abdunklung haette nur den Kopf selbst bedeckt. */
  .kopf--offen, .kopf--offen.kopf--gefuellt {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .kopf--offen::before {
    content: ""; position: fixed; inset: 0; z-index: -2;
    background: rgba(8,9,11,.6);
  }
  .kopf--offen::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #16181B; box-shadow: 0 2px 18px rgba(0,0,0,.35);
  }
  html.menue-offen { overflow: hidden; }

  /* --- Lange deutsche Woerter ----------------------------------------------
     Silbentrennung erst ab 12 Zeichen, damit kurze Ueberschriften nicht
     zerhackt werden. break-word ist die Rueckfallebene, wenn ein Geraet
     kein deutsches Trennwoerterbuch hat - dann bricht das Wort ohne Strich
     um, statt abgeschnitten zu werden. */
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5;
  }
  .werte li { grid-template-columns: minmax(0, 1fr) auto; }
  .werte li > span:first-child, .fakten dd { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .formular-info li > span { min-width: 0; overflow-wrap: break-word; }

  /* --- Fussbereich: Ziele, die man mit dem Daumen trifft ------------------ */
  .fuss__profile { gap: 12px; }
  .fuss__profile a { width: 44px; height: 44px; }
  .fuss li { padding: 0; }
  .fuss li a { display: inline-block; padding: 9px 0; }
  .fuss__unten { flex-direction: column; gap: 4px; }
  .fuss__unten a { display: inline-block; padding: 10px 4px; }
}

/* Raster: "1fr" heisst in CSS "mindestens so breit wie das laengste Wort".
   Ein einziges "Sonderanfertigungen" machte die Spalte breiter als den
   Bildschirm. minmax(0, 1fr) laesst sie schrumpfen - die Breakpoints sind
   dieselben wie in den urspruenglichen Regeln. */
@media (max-width: 900px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular-raster, .rechtsseite { grid-template-columns: minmax(0, 1fr); }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .strahl__schritt { grid-template-columns: 56px minmax(0, 1fr); } }
@media (max-width: 780px) { .wege { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
  .zusage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .feld-paar, .captcha { grid-template-columns: minmax(0, 1fr); }
  /* Unter den Formularen stehen Datenschutz- und Widerrufshinweis - die
     muessen lesbar sein, nicht nur vorhanden. */
  .feld__fussnote { font-size: .88rem; }
}
@media (max-width: 560px) {
  .fuss__raster, .material__details { grid-template-columns: minmax(0, 1fr); }
}

/* Schmale Handys: etwas weniger Rand, damit Inhalt Platz hat. */
@media (max-width: 480px) {
  .huelle { padding: 0 18px; }
  .karte { padding: 24px 20px; }
  .projekt__text { padding: 20px 20px 24px; }
  .abschnitt { padding: 64px 0; }
  .kopfzeile-abschnitt { margin-bottom: 40px; }
  .buehne__inhalt { padding: 26px 18px 56px; }
  .seitenkopf__inhalt { padding: 22px 18px 70px; }
  .weg { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .weg__symbol { width: 48px; height: 48px; border-radius: 12px; }
  .weg__symbol svg { width: 24px; height: 24px; }
  /* Längere Beschriftungen („Unseren Maschinenpark ansehen“) bleiben so auf
     einer Zeile; wird es doch zu eng, bricht der Text mittig um. */
  .knopf { padding: 13px 22px; font-size: .95rem; line-height: 1.3; text-align: center; justify-content: center; max-width: 100%; }
  /* Technik-Tabelle: Beschriftung stieß ohne Abstand an den Wert
     („Kammertemperaturbis 60 °C“). */
  .daten th { padding-right: 12px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}
@media (max-width: 400px) {
  .kopf__reihe { padding: 0 14px; gap: 8px; }
  .kopf__logo img, .kopf--gefuellt .kopf__logo img { height: 36px; }
  .kopf__cta { padding: 9px 14px; font-size: .8rem; }
}
@media (max-width: 340px) {
  .kopf__reihe { padding: 0 10px; gap: 6px; }
  .kopf__logo img, .kopf--gefuellt .kopf__logo img { height: 32px; }
  .kopf__cta { padding: 8px 11px; font-size: .74rem; }
  .knopf { padding: 12px 16px; font-size: .88rem; }
}

/* ==========================================================================
   Kundenstimmen als Slider (18.09.2026)

   Startseite, Abschnitt „Was Käufer über uns sagen“. Vorher drei feste
   Karten, jetzt bis zu 15 in einer seitlich scrollbaren Reihe:

   - Die Reihe reicht über die ganze Breite. Die Innenabstände links und
     rechts (--rand) setzen die erste Karte genau an den Anfang der
     Inhaltsspalte; die Nachbarkarten ragen in den Rand und laufen dort über
     eine Maske in den Hintergrund aus. Eine Maske statt eines Verlaufs in
     der Grundfarbe: Sie funktioniert auf jedem Hintergrund.
   - Container-Einheiten (cqw) statt vw: 100vw zählt auf dem Desktop die
     Bildlaufleiste mit, die Karten säßen dann um ihre halbe Breite versetzt.
   - Einrasten per scroll-snap; die Pfeilknöpfe (inc/fuss.php) schieben nur
     um eine Karte weiter. Ohne Skript bleiben Wischen, Trackpad und die
     Pfeiltasten - die Knöpfe sind dann versteckt, die Laufleiste sichtbar.
   ========================================================================== */
.stimmen-slider { container-type: inline-size; }

.stimmen-slider__innen {
  --pro-ansicht: 3;                 /* ganz sichtbare Karten */
  --luecke:      24px;
  --seite:       72px;              /* Mindestrand für die Pfeile */
  --pfeil:       48px;
  --voll:        100vw;             /* Rückfall ohne Container-Einheiten */
  --spalte:      min(var(--breite) - 48px, var(--voll) - 2 * var(--seite));
  --rand:        calc((var(--voll) - var(--spalte)) / 2);
  --blende:      min(var(--rand), 180px);
  --blende-mitte: .45;              /* Deckung auf 60 % des Verlaufs - kleiner = stärker ausgeblendet */
  position: relative;
}
@supports (width: 1cqw) {
  .stimmen-slider__innen { --voll: 100cqw; }
}

.stimmen-slider__spur {
  display: flex; gap: var(--luecke);
  list-style: none; margin: 0; padding: 0 var(--rand);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  -webkit-mask-image: linear-gradient(90deg,
    transparent calc(var(--rand) - var(--blende)),
    rgba(0,0,0,var(--blende-mitte)) calc(var(--rand) - var(--blende) * .4), #000 var(--rand),
    #000 calc(100% - var(--rand)),
    rgba(0,0,0,var(--blende-mitte)) calc(100% - var(--rand) + var(--blende) * .4),
    transparent calc(100% - var(--rand) + var(--blende)));
          mask-image: linear-gradient(90deg,
    transparent calc(var(--rand) - var(--blende)),
    rgba(0,0,0,var(--blende-mitte)) calc(var(--rand) - var(--blende) * .4), #000 var(--rand),
    #000 calc(100% - var(--rand)),
    rgba(0,0,0,var(--blende-mitte)) calc(100% - var(--rand) + var(--blende) * .4),
    transparent calc(100% - var(--rand) + var(--blende)));
}
.stimmen-slider--bereit .stimmen-slider__spur { scrollbar-width: none; }
.stimmen-slider--bereit .stimmen-slider__spur::-webkit-scrollbar { display: none; }

/* Tastatur: Die Reihe selbst ist fokussierbar (Pfeiltasten scrollen). Der
   Rahmen liegt um die sichtbare Spalte - an der Reihe selbst würde ihn die
   Maske an den Seiten ausblenden. Browser ohne :has() (Firefox ESR 115,
   ältere Safari) behalten den gewöhnlichen Umriss, nach innen gelegt, damit
   die Maske ihn nicht ganz verschluckt. */
.stimmen-slider__spur:focus-visible { outline-offset: -3px; }
@supports selector(:has(a)) {
  .stimmen-slider__spur:focus { outline: none; }
}
.stimmen-slider__innen:has(.stimmen-slider__spur:focus-visible)::after {
  content: ""; position: absolute; pointer-events: none;
  top: -8px; bottom: -8px; left: calc(var(--rand) - 8px); right: calc(var(--rand) - 8px);
  border: 2px solid var(--orange); border-radius: calc(var(--radius) + 6px);
}

.stimmen-slider__eintrag {
  flex: 0 0 calc((var(--spalte) - (var(--pro-ansicht) - 1) * var(--luecke)) / var(--pro-ansicht));
  display: flex;
  scroll-snap-align: start;
}
.stimmen-slider__eintrag > .karte { flex: 1 1 auto; min-width: 0; }
/* Das Anheben beim Überfahren würde der Bildlauf oben abschneiden - und die
   Karten sind keine Verweise, es gäbe nichts anzuklicken. */
.stimmen-slider .karte:hover { transform: none; box-shadow: none; border-color: var(--grau-linie); }

.stimmen-slider__pfeil {
  position: absolute; top: 50%; z-index: 2;
  width: var(--pfeil); height: var(--pfeil); margin-top: calc(var(--pfeil) / -2);
  display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--grau-linie); background: #fff; color: var(--anthrazit);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo),
              box-shadow var(--tempo);
}
.stimmen-slider__pfeil[hidden] { display: none; }
.stimmen-slider__pfeil--zurueck { left:  max(8px, var(--rand) - var(--pfeil) - 20px); }
.stimmen-slider__pfeil--weiter  { right: max(8px, var(--rand) - var(--pfeil) - 20px); }
.stimmen-slider__pfeil svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Nur mit Maus: Auf Touchgeräten bliebe der angetippte Pfeil sonst orange
   stehen, als wäre er ausgewählt. */
@media (hover: hover) {
  .stimmen-slider__pfeil:hover {
    background: var(--orange); border-color: var(--orange); color: #fff;
    box-shadow: 0 6px 18px rgba(239,114,2,.35);
  }
}
.stimmen-slider__pfeil:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* Am Anfang bzw. Ende: sichtbar, aber zurückgenommen. aria-disabled statt
   disabled, damit der Tastaturfokus nicht verloren geht, wenn man mit dem
   Knopf bis ans Ende blättert. Abgeschwächt wird nur das Zeichen - läge die
   Deckkraft auf dem ganzen Knopf, verblasste auch der Fokusrahmen. */
.stimmen-slider__pfeil[aria-disabled="true"],
.stimmen-slider__pfeil[aria-disabled="true"]:hover {
  cursor: default; box-shadow: none;
  background: #fff; border-color: #EDEEF0; color: var(--anthrazit);
}
.stimmen-slider__pfeil[aria-disabled="true"] svg { opacity: .35; }

@media (max-width: 980px) {
  .stimmen-slider__innen { --pro-ansicht: 2; --luecke: 20px; }
}
/* Handy: eine Karte, höchstens 420 px breit - daneben ragen die Nachbarn in
   den Rand und zeigen, dass es weitergeht. */
@media (max-width: 680px) {
  .stimmen-slider__innen {
    --pro-ansicht: 1; --luecke: 16px; --seite: 54px; --pfeil: 40px; --blende-mitte: .2;
    --spalte: min(420px, var(--voll) - 2 * var(--seite));
  }
  .stimmen-slider__pfeil svg { width: 20px; height: 20px; }
}

/* Kopfzeile zwischen Tablet quer und kleinem Laptop (981-1240 px): Menü und
   Preisknopf passten nicht nebeneinander, der Knopf ragte bis zu 140 px aus
   dem Bild und die ganze Seite ließ sich seitlich schieben - etwa auf einem
   iPad quer (1024 px). Aufgefallen am 18.09.2026. In voller Größe braucht der
   Kopf rund 1240 px; darunter in zwei Stufen etwas enger. Das Logo darf nie
   schrumpfen - es ist ein Bild mit fester Höhe und würde sonst gestaucht. */
.kopf__logo { flex: 0 0 auto; }
@media (min-width: 981px) and (max-width: 1240px) {
  .kopf__reihe { padding-left: 20px; padding-right: 20px; gap: 18px; }
  .kopf__nav ul { gap: 15px; }
  .kopf__nav a { font-size: .86rem; }
  .kopf__cta { padding: 10px 18px; font-size: .86rem; }
}
@media (min-width: 981px) and (max-width: 1060px) {
  .kopf__reihe { padding-left: 16px; padding-right: 16px; gap: 14px; }
  .kopf__nav ul { gap: 11px; }
  .kopf__cta { padding: 9px 14px; }
}

/* /materialien: Die zweispaltigen Materialkarten gaben bei 981-1012 px nicht
   unter die Breite ihres Inhalts nach und schoben die Seite bis zu 32 px zur
   Seite (Rastermindestbreite „auto“). Nur die Materialkarten - die übrigen
   zweispaltigen Raster sind nicht betroffen. Gefunden am 18.09.2026. */
.raster > .material { min-width: 0; }

/* Hinweis unter den Produktkarten, wenn ein Abzeichen eine Stückzahl nennt. */
.verkaufshinweis {
  margin: 22px 0 0; text-align: center;
  font-size: .86rem; color: var(--grau-text);
}

/* Pflichtangabe unter den Bewertungen (§ 5b Abs. 3 UWG). Bewusst kleiner als
   der Verkaufshinweis: Sie muss lesbar sein und auf derselben Seite stehen wie
   die Bewertungen, soll den Kundenstimmen aber nicht die Schau stehlen.
   0,78 rem sind bei 16-px-Grundschrift rund 12,5 px - unter 12 px waere sie
   nach § 5a Abs. 2 Nr. 2 UWG "in unklarer Weise bereitgestellt".
   Eine Klasse fuer beide Seiten (Startseite und /produkte), damit die
   Schriftgroesse nicht wieder auseinanderlaeuft. */
.herkunftshinweis {
  margin: 24px auto 0; max-width: 70ch; text-align: center;
  font-size: .78rem; line-height: 1.6; color: var(--grau-text);
}
.herkunftshinweis a { color: var(--orange-text); }

/* Bestseller-Abzeichen auf den Produktkarten der Startseite (18.09.2026)
   und seit 19.09.2026 auch auf /produkte. Beschriftung in der Verwaltung
   („Startseite · Fertige Produkte“).
   Es sitzt auf der Kante zwischen Foto und Text: Oben links auf dem Foto
   stünde es auf dem Werbetext, den die eBay-Bilder dort tragen. */
.projekt__text { position: relative; }
/* Produktkarten (Startseite und /produkte): Textblock direkt unter dem Foto,
   das letzte Element - Preis bzw. Kauf-Knöpfe - unten bündig. Vorher rückte
   bei kurzem Namen der ganze Block nach unten, und das Abzeichen mit. */
.raster > .karte.projekt > .projekt__text {
  margin-top: 0; flex: 1 1 auto; display: flex; flex-direction: column;
}
.raster > .karte.projekt > .projekt__text > :last-child { margin-top: auto; }
.projekt__abzeichen {
  position: absolute; top: 0; left: 26px; z-index: 1; transform: translateY(-50%);
  /* Kein nowrap mehr: „Bestseller Nr. 1 · 1.418x verkauft seit Januar 2026"
     passt in keine Kartenbreite und wurde mitten im Monatsnamen abgeschnitten -
     der Beleg der Behauptung war damit weg. Lieber zwei Zeilen. */
  max-width: calc(100% - 52px); overflow: visible;
  padding: 6px 13px; border-radius: 999px;
  /* Weiss wie vor dem 26.09.2026 - Entscheidung des Betreibers, siehe oben. */
  background: var(--orange); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25;
  box-shadow: 0 4px 12px rgba(239,114,2,.35);
}
@media (max-width: 480px) {
  /* Auf schmalen Geraeten schnitt „Bestseller Nr. 1 · 1.418x verkauft“ mitten
     in der Zahl ab - dann steht die Behauptung da, der Beleg fehlt. Deshalb
     hier zwei Zeilen statt Auslassungspunkten. */
  .projekt__abzeichen { left: 20px; max-width: calc(100% - 40px);
    white-space: normal; overflow: visible; }
  /* Die Handy-Regel „.karte { padding: 24px 20px }“ vom 14.09.2026 traf
     auch Produktkarten - deren Foto bekam dadurch einen weißen Rahmen. */
  .karte.projekt { padding: 0; }
}