/* ==========================================================================
   Kauermann KG – Stylesheet
   Eine einzige CSS-Datei für die gesamte Website.
   Keine externen Schriften oder Bibliotheken: die Seite lädt nichts von
   fremden Servern. Das ist schnell und datenschutzrechtlich unbedenklich.
   ========================================================================== */

:root {
  /* Farbwelt abgeleitet aus dem Kauermann-Logo.
     Das Logoblau ist rgb(56, 136, 232) = #3888e8. Für Text und Schaltflächen
     wird eine dunklere Variante desselben Blautons verwendet, damit weiße
     Schrift darauf ausreichend Kontrast hat (Barrierefreiheit). */
  --marke:        #3888e8;   /* Logoblau, für Flächen und Zierelemente       */
  --ink:          #102437;   /* Dunkelblau, Hintergrund dunkler Bereiche     */
  --ink-soft:     #1b354d;
  --steel:        #3f5064;   /* Fließtext                                    */
  --steel-light:  #5a6d82;   /* Sekundärtext                                 */
  --paper:        #f4f6f9;   /* Heller Seitenhintergrund                     */
  --paper-dim:    #e8edf3;   /* Abgesetzte Abschnitte                        */
  --white:        #ffffff;
  --accent:       #1a5fbf;   /* Links, Schaltflächen (dunkleres Logoblau)    */
  --accent-dark:  #124a99;
  --accent-light: #6fb0f5;   /* Akzent auf dunklem Grund                     */
  --line:         #d5dde6;
  --line-dark:    rgba(255, 255, 255, 0.18);

  --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --breit: 1200px;

  /* Möchten Sie später die Schriften aus dem Entwurf verwenden
     (Big Shoulders Display / IBM Plex Sans), laden Sie diese bitte
     selbst gehostet nach – siehe LIESMICH.txt, Abschnitt "Schriften". */
}

/* --- Grundlagen ---------------------------------------------------------- */

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

/* Ein Element mit hidden-Angabe bleibt verborgen, auch wenn eine
   Klasse ihm sonst ein display gäbe – sonst stünden die Knöpfe
   des Maßzettels alle gleichzeitig da. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--steel);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Lange zusammengesetzte Wörter – „Unternehmensgeschichte“,
     „Luftreifen-Schaltkupplung“ – dürfen auf dem Telefon trennen,
     sonst schiebt die Überschrift die ganze Seite in die Breite. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: 42px; }
h2 { font-size: 30px; margin-top: 8px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }

p { margin: 0 0 18px; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprungmarke {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  z-index: 100;
}
.sprungmarke:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.inhalt { max-width: var(--breit); margin: 0 auto; padding: 0 24px; }

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Die Kopfzeile darf etwas breiter laufen als der Inhalt: seit dem
   sechsten Menüpunkt paßt Wortmarke, Menü und Kontakt sonst in keiner
   der vier Sprachen mehr nebeneinander. Der Inhalt darunter bleibt bei
   --breit. */
.kopf-innen {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Nichts in der Kopfzeile darf über seinen Kasten hinauslaufen – sonst
   schiebt sich der Zusatz der Wortmarke über den ersten Menüpunkt.
   Gilt nur, solange die Leiste ausgeschrieben dasteht; sobald das Menü
   hinter dem Schalter liegt, darf wieder geschrumpft werden. */
@media (min-width: 1300px) {
  .kopf-innen > * { flex-shrink: 0; }
}

.wortmarke {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.1;
}
.wortmarke:hover { color: inherit; }
.wortmarke img { display: block; height: 64px; width: auto; }
/* Der Zusatz „Kupplungen und Bremsen seit 1927“ stand früher neben
   der Wortmarke. Mit dem siebten Menüpunkt paßt er in keiner der
   vier Sprachen mehr daneben – gemessen: die Leiste braucht ohne
   ihn 1169 Punkte, mit ihm 1318, und mehr als 1272 gibt die
   Kopfzeile nicht her. Die Aussage steht weiterhin im Fußbereich
   und auf der Startseite. */

.haupt-navigation ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.haupt-navigation li { margin: 0; }
.haupt-navigation a {
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 0;
  display: block;
  border-bottom: 2px solid transparent;
}
.haupt-navigation a:hover { color: var(--accent); }
.haupt-navigation a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.kopf-kontakt { display: flex; align-items: center; gap: 16px; }
.kopf-telefon {
  font-size: 15px;
  font-weight: 600;
  color: var(--steel);
  text-decoration: none;
  white-space: nowrap;
}
.kopf-telefon:hover { color: var(--accent); }

/* Sprachumschalter im Kopfbereich: vier Kürzel nebeneinander, ohne
   Aufklappmenü und ohne JavaScript. Die eigene Sprache steht als Text
   da, die übrigen als Verweise. */
/* Menüpunkte nicht mitten im Wort umbrechen – in den übersetzten
   Fassungen sind manche zweiwortig („Spare parts“, „Pièces de
   rechange“). */
.haupt-navigation > ul > li > a { white-space: nowrap; }

.sprachwahl ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sprachwahl li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 2px;
  background: var(--line);
  vertical-align: -1px;
}
.sprachwahl a,
.sprachwahl-aktiv {
  display: inline-block;
  padding: 5px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  text-decoration: none;
}
.sprachwahl a {
  color: var(--steel-light);
}
.sprachwahl a:hover,
.sprachwahl a:focus-visible {
  color: var(--accent);
  background: var(--paper-dim);
}
.sprachwahl-aktiv {
  color: var(--ink);
  background: var(--paper-dim);
  cursor: default;
}

.menue-schalter {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

/* --- Schaltflächen ------------------------------------------------------- */

.knopf {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 44px;
}
.knopf:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }

.knopf-hell {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--steel-light);
}
.knopf-hell:hover { background: var(--paper-dim); color: var(--ink); border-color: var(--steel); }

.knopf-auf-dunkel {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line-dark);
}
.knopf-auf-dunkel:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt { padding: 72px 0; }
.abschnitt-eng { padding: 48px 0; }
.abschnitt-hell { background: var(--paper-dim); }
.abschnitt-dunkel { background: var(--ink); color: #c9d6e4; }
.abschnitt-dunkel h1,
.abschnitt-dunkel h2,
.abschnitt-dunkel h3 { color: var(--white); }
.abschnitt-dunkel a { color: var(--accent-light); }

.vorzeile {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.abschnitt-dunkel .vorzeile { color: var(--accent-light); }

.einleitung { font-size: 19px; line-height: 1.6; max-width: 62ch; }

/* --- Startseite: Aufmacher ----------------------------------------------- */

.aufmacher {
  background: var(--ink);
  color: #c9d6e4;
  padding: 88px 0 76px;
  position: relative;
  overflow: hidden;
}
/* Der Zierkreis ist entfallen: An seiner Stelle steht jetzt ein Foto.
   Ein Kreis aus Farbe sagt nichts über das, was hier gebaut wird. */

.aufmacher .inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.aufmacher-text { min-width: 0; }

/* Zwei Baureihen im Aufmacher, ohne Tafel und ohne Beschriftung:
   die Fotos stehen unmittelbar auf dem dunklen Grund. Das
   Kegelflex-Foto ist dafür eigens vom weißen Katalogtitel
   freigestellt (siehe stelle_kegelflex_frei.py). */
.aufmacher-bild {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: center;
}

.aufmacher-bild a { display: block; }

.aufmacher-bild picture { display: block; }

.aufmacher-bild img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .aufmacher .inhalt { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .aufmacher-bild img { height: 150px; }
}

.aufmacher h1 { color: var(--white); font-size: 48px; max-width: 14ch; }
.aufmacher p { font-size: 19px; max-width: 58ch; }
.aufmacher-marke {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid rgba(111, 176, 245, 0.45);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 24px;
}
.aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- Kennzahlen-Leiste --------------------------------------------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.kennzahl { padding: 26px 28px; border-right: 1px solid var(--line); }
.kennzahl:last-child { border-right: none; }
.kennzahl-wert { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.kennzahl-text { font-size: 14px; color: var(--steel); margin-top: 6px; }

/* --- Karten -------------------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.karte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.karte:hover { border-color: var(--accent); transform: translateY(-2px); }
.karte h3 { margin-bottom: 10px; }
.karte h3 a { text-decoration: none; color: var(--ink); }
.karte h3 a:hover { color: var(--accent); }

/* Die ganze Kachel ist anklickbar, nicht nur die Überschrift.
   Der unsichtbare Überzug liegt über der Karte und führt zum selben Ziel. */
.karte { position: relative; cursor: pointer; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte:hover h3 a { color: var(--accent); }
.karte-fuss a { position: relative; z-index: 1; }
.karte p { font-size: 15px; margin-bottom: 14px; }
.karte-fuss { margin-top: auto; font-size: 15px; font-weight: 600; }

/* --- Zweispaltiges Raster ------------------------------------------------ */

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
.zwei-spalten-schmal-links { grid-template-columns: 0.85fr 1.15fr; }

.drei-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.merkmal { border-left: 3px solid var(--accent); padding-left: 16px; }
.merkmal h3 { font-size: 17px; margin-bottom: 6px; }
.merkmal p { font-size: 15px; margin: 0; }

/* --- Tabellen ------------------------------------------------------------ */

.tabelle-rahmen { overflow-x: auto; margin: 0 0 24px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 15px;
  min-width: 480px;
}
caption {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0 10px;
  font-size: 16px;
}
th, td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
thead th { background: var(--paper-dim); color: var(--ink); font-weight: 700; }
tbody tr:nth-child(even) td { background: #f8fafc; }

/* Zahlentabellen: rechtsbündig, kompakt, Kopfzeile bleibt beim Querscrollen sichtbar */
.tabelle-zahlen table { font-size: 14px; min-width: 700px; }
.tabelle-zahlen th, .tabelle-zahlen td { padding: 7px 10px; vertical-align: bottom; }
.tabelle-zahlen td { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-zahlen tbody th { white-space: nowrap; }
.tabelle-zahlen thead th { text-align: right; font-size: 13px; line-height: 1.3; }
.tabelle-zahlen thead th:first-child { text-align: left; }
.einheit { display: block; font-weight: 400; color: var(--steel-light); font-size: 12px; }

/* --- Formeln und Formelzeichen ------------------------------------------- */

.formel {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.9;
  overflow-x: auto;
}
.formel sub, .formel sup { font-size: 0.72em; }
/* Der Überstrich macht sichtbar, wie weit die Wurzel reicht. */
.wurzel { border-top: 1px solid currentColor; padding: 0 3px 0 2px; }
/* Rechenweg eines Auslegungsbeispiels: jeder Schritt mit Formel und Erklärung */
/* Nummerierte Einbauschritte: lesbare Abstände zwischen den Schritten */
.einbauschritte { padding-left: 22px; margin: 0 0 26px; }
.einbauschritte > li { margin-bottom: 14px; }

.rechenweg { padding-left: 22px; }
.rechenweg > li { margin-bottom: 18px; }
.rechenweg > li > p { margin: 6px 0 0; }
.rechenweg .formel { margin: 6px 0 0; }

.zeichenliste { font-size: 15px; }
.zeichenliste li { margin-bottom: 4px; }
.hinweis-klein { font-size: 14px; color: var(--steel-light); margin: -14px 0 24px; }

/* --- Aufklappbare Maßtabellen -------------------------------------------- */

.klapp {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  margin: 0 0 16px;
}
.klapp summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--accent);
  list-style-position: inside;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
}
.klapp summary:hover { color: var(--accent-dark); }
.klapp summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.klapp[open] summary { border-bottom: 1px solid var(--line); }
.klapp .tabelle-rahmen { margin: 16px; }
.klapp table { font-size: 13px; }
.klapp th, .klapp td { padding: 6px 9px; }

/* --- Bildplatzhalter ----------------------------------------------------- */

.bild-rahmen {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.bild-rahmen img { display: block; width: 100%; }

/* Freigestelltes Foto: kein weißer Kasten, das Motiv steht frei auf der Seite */
.bild-frei { background: transparent; border: none; border-radius: 0; }

/* Ergänzendes Foto mit Bildunterschrift */
.nebenbild { margin: 28px 0 0; }
.nebenbild img { display: block; width: auto; max-width: 100%; margin: 0 auto; }
.nebenbild figcaption {
  font-size: 14px;
  color: var(--steel-light);
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Kleine Bildvorlage: nicht hochskalieren, sondern mittig setzen */
.bild-klein { display: flex; justify-content: center; }
.bild-klein img { width: auto; max-width: 100%; }

.platzhalter {
  background: repeating-linear-gradient(
    45deg, #e9eef4, #e9eef4 12px, #dfe6ee 12px, #dfe6ee 24px
  );
  border: 1px dashed var(--steel-light);
  border-radius: 6px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--steel);
  font-size: 14px;
}

/* --- Hinweiskasten ------------------------------------------------------- */

.hinweis {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 20px 22px;
  font-size: 15px;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis h3 { font-size: 17px; }

/* --- Zeitleiste (Unternehmensgeschichte) --------------------------------- */

.zeitleiste {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Die durchgehende Linie liegt hinter den Jahreszahlen. */
.zeitleiste::before {
  content: "";
  position: absolute;
  left: 51px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}
.zeitleiste-punkt {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 30px;
}
.zeitleiste-punkt:last-child { padding-bottom: 0; }

.zeitleiste-jahr {
  flex: 0 0 104px;
  position: relative;
  z-index: 1;
  background: var(--accent);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 7px 0;
  border-radius: 4px;
}
.zeitleiste-inhalt { flex: 1 1 auto; padding-top: 2px; }
.zeitleiste-inhalt h3 { font-size: 18px; margin: 0 0 6px; }
.zeitleiste-inhalt p { margin: 0; font-size: 16px; }

@media (max-width: 640px) {
  .zeitleiste::before { display: none; }
  .zeitleiste-punkt { flex-direction: column; gap: 10px; }
  .zeitleiste-jahr { flex: 0 0 auto; align-self: flex-start; padding: 5px 16px; }
}

.lebensdaten {
  color: var(--steel-light);
  font-size: 15px;
  margin-top: -4px;
}

.quellenhinweis {
  color: var(--steel-light);
  font-size: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 22px;
}

/* --- Downloads ----------------------------------------------------------- */

.download-liste { list-style: none; padding: 0; margin: 0; }
.download-liste li {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.download-liste li:first-child { border-top: 1px solid var(--line); }
.download-groesse { color: var(--steel-light); font-size: 14px; white-space: nowrap; }

/* --- Anfrage-Band -------------------------------------------------------- */

.anfrage-band {
  background: var(--ink);
  color: #c9d6e4;
  border-radius: 6px;
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.anfrage-band h2 { color: var(--white); font-size: 24px; margin-bottom: 8px; }
.anfrage-band p { margin: 0; font-size: 16px; }
.anfrage-band-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Formular ------------------------------------------------------------ */

.formular { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 30px; }
.feld { margin-bottom: 20px; }
.feld label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.feld .pflicht { color: var(--accent); }
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--steel-light);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  min-height: 46px;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--accent); }
.feld-hinweis { font-size: 13px; color: var(--steel-light); margin-top: 6px; }
.feld-zustimmung { display: flex; gap: 10px; align-items: flex-start; }
.feld-zustimmung input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; }
.feld-zustimmung label { font-weight: 400; font-size: 14px; color: var(--steel); }
.honigtopf { position: absolute; left: -9999px; }

.meldung { padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; font-size: 15px; }
.meldung-erfolg { background: #e8f2ea; border: 1px solid #b7d6bf; color: #1f5130; }
.meldung-fehler { background: #fbeae6; border: 1px solid #e4b6aa; color: #83301c; }

/* --- Kontaktangaben ------------------------------------------------------ */

.kontakt-karte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.kontakt-karte dl { margin: 0; }
.kontakt-karte dt {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-top: 18px;
  font-weight: 700;
}
.kontakt-karte dt:first-child { margin-top: 0; }
.kontakt-karte dd { margin: 4px 0 0; font-size: 17px; color: var(--ink); }

/* --- Rechtstexte --------------------------------------------------------- */

.rechtstext { max-width: 78ch; }
.rechtstext h2 { font-size: 24px; margin-top: 40px; }
.rechtstext h3 { font-size: 18px; margin-top: 28px; }
.rechtstext p, .rechtstext li { font-size: 16px; }

/* --- Brotkrumen ---------------------------------------------------------- */

.brotkrumen { font-size: 14px; padding: 16px 0 0; color: var(--steel-light); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.brotkrumen li { margin: 0; }
.brotkrumen li + li::before { content: "› "; color: var(--steel-light); }
.brotkrumen a { color: var(--steel-light); }

/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.seitenkopf { background: var(--paper-dim); padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.seitenkopf h1 { margin-bottom: 12px; }
.seitenkopf p { font-size: 19px; max-width: 62ch; margin: 0; }

/* --- Fußbereich ---------------------------------------------------------- */

.fuss { background: var(--ink); color: #aebed0; padding: 56px 0 28px; font-size: 15px; }
.fuss h2 { color: var(--white); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.fuss h2 .fuss-logo { display: block; height: 58px; width: auto; margin: -6px 0 6px -4px; }
.fuss a { color: #d2deea; text-decoration: none; }
.fuss a:hover { color: var(--accent-light); text-decoration: underline; }
.fuss-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
}
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 8px; }
.fuss-unten {
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: #8798ab;
}
.fuss-unten ul { display: flex; gap: 20px; }
.fuss-unten li { margin: 0; }

/* --- Mobil --------------------------------------------------------------- */

/* --- Schmalere Bildschirme: Menü hinter dem Schalter --------------------- */

/* Sechs Menüpunkte, Wortmarke, Telefonnummer und Sprachumschalter
   brauchen mehr Platz, als ein 1024er- oder 1100er-Bildschirm hergibt.
   Gemessen an der längsten der vier Fassungen – der französischen.
   Darunter liegt das Menü hinter dem Schalter; das Seitenlayout
   darunter bleibt davon unberührt und wechselt erst bei 960 bzw.
   760 Pixeln. */
@media (max-width: 1299px) {
  .kopf-innen { position: relative; }
  /* Die Telefonnummer bleibt stehen, solange Platz ist; sie
     verschwindet erst mit dem Telefonlayout bei 760 px. */

  .menue-schalter { display: inline-flex; }

  .haupt-navigation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
  }
  .haupt-navigation.offen { display: block; }
  .haupt-navigation ul { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
  .haupt-navigation li { width: 100%; border-bottom: 1px solid var(--line); }
  .haupt-navigation li:last-child { border-bottom: none; }
  .haupt-navigation a { padding: 14px 0; border-bottom: none; font-size: 16px; }
}

@media (max-width: 960px) {
  .zwei-spalten,
  .zwei-spalten-schmal-links { grid-template-columns: 1fr; gap: 36px; }
  .drei-spalten { grid-template-columns: 1fr; gap: 20px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl:nth-child(2) { border-right: none; }
  .kennzahl:nth-child(1), .kennzahl:nth-child(2) { border-bottom: 1px solid var(--line); }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px; }
  h1 { font-size: 34px; }
  .aufmacher h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Der Umschalter bleibt auch auf dem Telefon oben erreichbar. */
  .kopf-kontakt { gap: 10px; }
  .sprachwahl a, .sprachwahl-aktiv { padding: 5px 4px; font-size: 11px; }


  .kopf-innen { gap: 12px; padding: 10px 20px; }
  .kopf-telefon { display: none; }
  .wortmarke img { height: 46px; }

  .abschnitt { padding: 48px 0; }
  .aufmacher { padding: 56px 0 48px; }
  .aufmacher h1 { font-size: 30px; }
  .aufmacher p { font-size: 17px; }
  .aufmacher::after { display: none; }
  .kennzahlen { grid-template-columns: 1fr; }
  .kennzahl { border-right: none; border-bottom: 1px solid var(--line); }
  .kennzahl:last-child { border-bottom: none; }
  .anfrage-band { padding: 28px 24px; }
  .fuss-raster { grid-template-columns: 1fr; gap: 28px; }
  .formular { padding: 22px 18px; }
  .seitenkopf { padding: 28px 0 32px; }
  .seitenkopf p { font-size: 17px; }
  /* Auf dem Telefon wandert die Größe mit der Bildschirmbreite mit,
     damit auch ein langes zusammengesetztes Wort wie
     „Unternehmensgeschichte“ in eine Zeile paßt und nicht mitten im
     Wort umbrochen wird. Gemessen am längsten Wort aller Seiten. */
  h1 { font-size: clamp(19px, 6.1vw, 28px); }
  h2 { font-size: clamp(18px, 5.2vw, 23px); }
}

@media (max-width: 400px) {
  .inhalt { padding: 0 18px; }
  .wortmarke img { height: 40px; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .anfrage-band, .menue-schalter, .brotkrumen { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding: 12pt 0; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Breite Bildtafel im Textfluss --------------------------------------- */

.tafel {
  margin: 0 0 28px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* Nicht über die Auflösung der Vorlage hinaus vergrößern */
.tafel img { display: block; width: 100%; max-width: 684px; height: auto;
             margin: 0 auto; }
.tafel figcaption {
  max-width: 684px;
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--steel);
  line-height: 1.6;
}

/* Bildtafel ohne Innenrand - für Abbildungen, die bis an den Rand gehen */
.tafel-bild { padding: 0; overflow: hidden; }
.tafel-bild img { max-width: none; }
/* Hochformatige Zeichnungen würden sonst auf Containerbreite gezogen und
   dabei unscharf. Sie behalten ihre Größe und stehen mittig. */
.tafel-hoch { padding: 18px 0 0; }
.tafel-hoch img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
}
/* Die Tafel der FLEXAN-Sonderausführungen trägt elf Zeichnungen
   untereinander; mit der Deckelung der hochformatigen Tafeln wären sie
   nicht mehr zu erkennen. Sie darf darum höher stehen. */
.tafel-tafel img {
  width: auto;
  max-width: 100%;
  max-height: 1200px;
  margin: 0 auto;
}

.tafel-bild figcaption {
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Bildunterschrift unter dem Produktfoto */
.bild-unterschrift {
  font-size: 14px;
  color: var(--steel-light);
  margin: 10px 0 0;
}

/* Hinweis auf den maßgeblichen deutschen Wortlaut, nur in den
   fremdsprachigen Fassungen der Rechtstexte. */
.rechtshinweis-sprache {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--paper-dim);
  font-size: 15px;
  color: var(--steel);
}

/* --- Maßzettel ----------------------------------------------------------- */
/* Der Kunde trägt seine Maße in eine Katalogzeichnung ein und schickt
   sie uns als Anfrage. Der Knopf steht unter der Zeichnung; das
   Werkzeug selbst legt sich über die Seite. */

.masszettel-anstoss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.masszettel-wozu {
  font-size: 14px;
  color: var(--steel-light);
  flex: 1 1 260px;
  min-width: 0;
}

.masszettel-schale {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 36, 55, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}
body.masszettel-offen { overflow: hidden; }

.masszettel {
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  width: min(1180px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.masszettel-kopf {
  position: relative;
  padding: 20px 56px 16px 24px;
  border-bottom: 1px solid var(--line);
}
.masszettel-kopf h2 { font-size: 21px; margin: 0 0 4px; }
.masszettel-unterzeile {
  margin: 0;
  font-size: 15px;
  color: var(--steel-light);
}
.masszettel-schliessen {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--steel);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.masszettel-schliessen:hover { border-color: var(--accent); color: var(--accent); }

.masszettel-koerper,
.masszettel-anfrage {
  padding: 20px 24px;
  overflow: auto;
}
.masszettel-koerper {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 24px;
}

.masszettel-flaeche {
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
}
.masszettel-leinwand { display: block; width: 100%; height: auto; }
.masszettel-leinwand.wartet { cursor: crosshair; }

.masszettel-spalte h3 { font-size: 16px; margin: 18px 0 10px; }
.masszettel-spalte h3:first-of-type { margin-top: 0; }
.masszettel-anleitung {
  font-size: 14px;
  color: var(--steel-light);
  margin: 0 0 14px;
}

.masszettel-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.masszettel-zeile {
  display: grid;
  grid-template-columns: 74px 110px;
  grid-template-areas: "zeichen wert" "bedeutung bedeutung" "setzen setzen";
  gap: 4px 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.masszettel-zeile:first-child { border-top: 1px solid var(--line); }
.masszettel-zeichen {
  grid-area: zeichen;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.masszettel-name {
  width: 100%;
  font: inherit;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.masszettel-wert {
  grid-area: wert;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
}
.masszettel-wert:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.masszettel-bedeutung {
  grid-area: bedeutung;
  font-size: 13px;
  color: var(--steel-light);
  line-height: 1.4;
}
.masszettel-setzen {
  grid-area: setzen;
  justify-self: start;
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.masszettel-zeile.wartet { background: #eaf1fc; }
.masszettel-zeile.wartet .masszettel-setzen { font-weight: 700; }
.masszettel-zeile.gesetzt .masszettel-zeichen::after {
  content: " \25cf";
  color: var(--accent);
}
.masszettel-frei { margin-top: 4px; }

.masszettel-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.masszettel-fuss {
  border-top: 1px solid var(--line);
  padding: 14px 24px 18px;
  background: var(--paper);
  border-radius: 0 0 6px 6px;
}
.masszettel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.masszettel-meldung {
  margin: 0 0 10px;
  font-size: 14px;
  color: #9a2c2c;
}

@media (max-width: 860px) {
  .masszettel-koerper { grid-template-columns: 1fr; }
  .masszettel-raster { grid-template-columns: 1fr; }
  .masszettel-schale { padding: 0; }
  .masszettel { max-height: 100vh; border-radius: 0; }
  .masszettel-knoepfe { justify-content: stretch; }
  .masszettel-knoepfe .knopf { flex: 1 1 140px; text-align: center; }
}

@media print {
  .masszettel-anstoss { display: none; }
}

/* Produktübersicht nach Kupplungsart ------------------------------------ */
/* Die Baureihen stehen unter der Art, nach der ein Konstrukteur sucht –
   elastisch, hochelastisch, Sicherheit, Schalten, Bremsen – und nicht
   unter ihrem Markennamen. */
.gruppe {
  margin: 44px 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  font-size: 1.22rem;
}

.gruppe:first-of-type { margin-top: 0; }

.gruppe + .karten,
.gruppe-hinweis + .karten {
  /* Innerhalb einer Gruppe stehen ein bis zwei Baureihen. Mit dem
     schmalen Grundraster blieben sie schmal und die Zeile halb leer;
     hier sind die Kacheln darum breiter angelegt. */
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.gruppe + .karten { margin-top: 22px; }

.gruppe-hinweis {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.gruppe-hinweis + .karten { margin-top: 18px; }

/* Produktfoto in der Kachel ---------------------------------------------- */
/* Startseite und Produktübersicht zeigen jetzt sofort, worum es geht.
   Die Fotos sind freigestellt; sie stehen darum auf einer ruhigen
   hellen Fläche und werden eingepaßt statt beschnitten – eine
   angeschnittene Kupplung sagt weniger als eine ganze. */
.karte-bild {
  margin: -26px -24px 20px;
  padding: 20px 24px 16px;
  /* Weiß statt getönt: zwei der acht Fotos (Kegelflex und KASI)
     stammen von Katalogtiteln und haben einen weißen Grund statt
     eines freigestellten. Auf einer getönten Fläche stand dieser
     weiße Kasten sichtbar im Bild. */
  background: var(--white);
  border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
}

.karte-bild picture { display: block; }

.karte-bild img {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .karte-bild img { height: 128px; }
}