/* =====================================================================
   POWER-TRAX.DE  –  HAUPT-STYLESHEET  (main.css)
   ---------------------------------------------------------------------
   Stand:    Oktober 2026 (Redesign)
   Einziges Stylesheet der Website (die früheren CSS- und
   JavaScript-Dateien wurden entfernt).

   Diese Datei gilt für ALLE Seiten (Deutsch und Englisch).
   Kein JavaScript nötig: Menü, Slider und Aufklapp-Elemente
   funktionieren rein mit HTML + CSS.

   INHALT
     1.  Farben, Abstände, Schrift  (Variablen – hier zentral ändern!)
     2.  Schriftart Titillium Web   (lokal eingebunden, keine Google-Fonts)
     3.  Grundeinstellungen
     4.  Überschriften und Text
     5.  Seitenrahmen (.rahmen) und Abschnitte (.abschnitt)
     6.  Kopfbereich: Logo, Sprachwahl, Hauptnavigation
     7.  Produktmenü (aufklappbar mit <details>)
     8.  Startseite: Bildband (Hero) mit Bildwechsel
     9.  Seitenkopf der Unterseiten + Brotkrumen-Pfad
     10. Roter Pfeil-Trenner ("Spitze") – Markenzeichen der Seite
     11. Buttons, Links, Downloads mit Dateityp-Symbol, Hinweis-Band
     12. Produktkacheln (Startseite)
     13. Sonderrubriken-Liste (Startseite)
     14. Produktseiten: Textblöcke, Datenlisten, Produkte, Downloads
     14b. Fließtext-Seiten: Galerien, Tabellen, Aufklapp-Bereiche
     15. Fußbereich
     16. Hilfsklassen
     17. Responsive Anpassungen (Tablet / Handy)
     18. Druckansicht
   ===================================================================== */


/* =====================================================================
   1. FARBEN, ABSTÄNDE, SCHRIFT  –  zentrale Variablen
   ---------------------------------------------------------------------
   Wer eine Farbe ändern will, ändert sie NUR HIER. Alle anderen
   Regeln greifen auf diese Variablen zu: var(--rot) usw.
   Die Farben entsprechen exakt dem bisherigen Erscheinungsbild.
   ===================================================================== */
:root {
  /* --- Markenfarben (aus dem bisherigen Design übernommen) --- */
  --rot:          #c63648;  /* Akzentfarbe: Überschriften, Buttons, Logo-Punkt */
  --rot-dunkel:   #a32a3a;  /* Rot beim Darüberfahren mit der Maus           */
  --tan:          #b8a179;  /* Desert Tan (Näherung) – nur für Defense-Verweis */
  --blau:         #335a79;  /* Mittelblau: Bildband, Seitenkopf              */
  --dunkelblau:   #25353d;  /* Navigation, Produktmenü, Fußbereich           */
  --hellblau:     #d6dee4;  /* Hintergrund der Produktkacheln                */
  --hellgrau:     #edefef;  /* Hintergrund von Infokästen                    */
  --mittelgrau:   #989e9e;  /* Brotkrumen-Pfad, dezente Linien               */
  --linkgrau:     #c3cbcb;  /* Links auf dunklem Hintergrund                 */
  --text:         #4a4a49;  /* Fließtext (etwas dunkler als früher #5c5c5b,  */
                            /* damit der Kontrast barrierefrei ist)          */
  --schwarz:      #000000;
  --weiss:        #ffffff;

  /* --- Schriften --- */
  --schrift:      "Titillium Web", Arial, Helvetica, sans-serif;
  --schrift-logo: "Courier New", Courier, monospace;  /* wie im Logo */

  /* --- Maße --- */
  --max-breite:   1180px;   /* maximale Breite des Inhalts                   */
  --text-breite:  44rem;    /* maximale Zeilenlänge für Fließtext            */
  --abstand:      clamp(1rem, 3vw, 2rem);      /* Standardabstand            */
  --abstand-gross: clamp(2.5rem, 6vw, 4.5rem); /* Abstand zwischen Abschnitten */
}


/* =====================================================================
   2. SCHRIFTART TITILLIUM WEB  (Dateien liegen in /fonts/)
   ---------------------------------------------------------------------
   Lokal eingebunden: keine Verbindung zu Google -> datenschutzfreundlich.
   WOFF = komprimiert (schnell), TTF = Ersatz für sehr alte Browser.
   ===================================================================== */
@font-face {
  font-family: "Titillium Web";
  font-weight: 300;               /* Light – Fließtext */
  font-style: normal;
  font-display: swap;             /* Text sofort zeigen, Schrift nachladen */
  src: url("../fonts/TitilliumWeb-Light.woff") format("woff"),
       url("../fonts/TitilliumWeb-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 400;               /* Regular */
  font-style: normal;
  font-display: swap;
  src: url("../fonts/TitilliumWeb-Regular.woff") format("woff"),
       url("../fonts/TitilliumWeb-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 600;               /* SemiBold – Überschriften */
  font-style: normal;
  font-display: swap;
  src: url("../fonts/TitilliumWeb-SemiBold.woff") format("woff"),
       url("../fonts/TitilliumWeb-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 700;               /* Bold */
  font-style: normal;
  font-display: swap;
  src: url("../fonts/TitilliumWeb-Bold.woff") format("woff"),
       url("../fonts/TitilliumWeb-Bold.ttf") format("truetype");
}


/* =====================================================================
   3. GRUNDEINSTELLUNGEN
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;         /* Breiten inkl. Innenabstand rechnen */
}

html {
  font-size: 100%;                /* 1rem = 16px (Browser-Standard) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;        /* weiches Scrollen zu Sprungmarken */
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 300;
  font-size: 1.0625rem;           /* 17px – gut lesbar */
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
}

img {
  max-width: 100%;                /* Bilder nie breiter als ihr Container */
  height: auto;
  display: block;
}

a {
  color: var(--rot);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--rot-dunkel);
}

/* Sichtbarer Rahmen bei Tastatur-Bedienung (Barrierefreiheit) */
:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
}

/* "Zum Inhalt springen"-Link: unsichtbar, erscheint bei Tab-Taste */
.sprunglink {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--rot);
  color: var(--weiss);
}
.sprunglink:focus {
  top: 1rem;
}


/* =====================================================================
   4. ÜBERSCHRIFTEN UND TEXT
   ---------------------------------------------------------------------
   Jede Seite hat genau EINE <h1> (wichtig für Google).
   Darunter folgt die Gliederung h2 -> h3 -> h4 ohne Sprünge.
   ===================================================================== */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  line-height: 1.2;
  font-weight: 600;
  color: var(--schwarz);
}

h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

/* h2: Abschnittsüberschrift – rot wie bisher */
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--rot);
}

/* h3: Unterüberschrift */
h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 1em;
  max-width: var(--text-breite);  /* angenehme Zeilenlänge */
}

/* Einleitungsabsatz: etwas größer */
.einleitung {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--schwarz);
}

/* Kleingedrucktes, z. B. Fußnoten */
.klein {
  font-size: 0.875rem;
  color: var(--text);
}

strong {
  font-weight: 600;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
li {
  margin-bottom: 0.25em;
}
/* Rote Quadrate als Aufzählungszeichen (wie früher "auflistung.png") */
li::marker {
  color: var(--rot);
}


/* =====================================================================
   5. SEITENRAHMEN UND ABSCHNITTE
   ---------------------------------------------------------------------
   .rahmen     = zentrierter Inhaltsbereich mit maximaler Breite
   .abschnitt  = horizontaler Streifen über die volle Breite
                 Varianten: .abschnitt--hellblau, --grau, --dunkel
   ===================================================================== */
.rahmen {
  width: 100%;
  max-width: var(--max-breite);
  margin-inline: auto;
  padding-inline: var(--abstand);
}

.abschnitt {
  padding-block: var(--abstand-gross);
}
.abschnitt--hellblau {
  background: var(--hellblau);
}
.abschnitt--grau {
  background: var(--hellgrau);
}
.abschnitt--eng {
  padding-block: var(--abstand);
}

/* Zweispaltiges Raster (Text links, Bild/Infos rechts).
   Auf dem Handy automatisch einspaltig – siehe Kapitel 17. */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--abstand-gross);
  align-items: start;
}
.zweispaltig--gleich {
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand);
}


/* =====================================================================
   6. KOPFBEREICH
   ---------------------------------------------------------------------
   Aufbau:  .kopf  (weiß: Logo + Zusatzlinks + Sprachwahl)
            .hauptnav (dunkelblau: Home, Produkte, Projekte ...)
   ===================================================================== */
.kopf {
  background: var(--weiss);
  border-top: 5px solid var(--rot);   /* roter Streifen ganz oben */
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
}

/* Logo: Originalgrafik, doppelt so groß dargestellt wäre unscharf,
   daher feste Breite der Originaldatei (222 px). */
.logo img {
  width: 222px;
  height: auto;
}

/* Zusatzlinks rechts oben (Unternehmen, Sprachwahl) */
.zusatznav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.95rem;
}
.zusatznav a {
  color: var(--text);
  text-decoration: none;
}
.zusatznav a:hover {
  color: var(--rot);
}

/* Sprachwahl DE | EN mit Flaggen */
.sprachwahl {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sprachwahl a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid transparent;
}
.sprachwahl img {
  width: 22px;
  height: 16px;
}
/* aktuelle Sprache wird umrandet */
.sprachwahl a[aria-current="true"] {
  border-color: var(--mittelgrau);
  font-weight: 600;
}

/* --- Hauptnavigation (dunkelblauer Balken) --- */
.hauptnav {
  background: var(--dunkelblau);
}
.hauptnav ul {
  display: flex;
  flex-wrap: wrap;               /* bricht auf dem Handy einfach um */
  margin-block: 0;               /* seitlich zentriert über .rahmen */
  padding-block: 0;
  list-style: none;
}
/* erster Punkt bündig mit dem Logo */
.hauptnav li:first-child a {
  margin-left: -1.2rem;
}
.hauptnav a {
  display: block;
  padding: 0.9rem 1.2rem;
  color: var(--weiss);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.03em;
  border-bottom: 3px solid transparent;
}
.hauptnav a:hover {
  background: var(--blau);
  color: var(--weiss);
}
/* aktiver Menüpunkt: roter Unterstrich */
.hauptnav a[aria-current="page"] {
  border-bottom-color: var(--rot);
}


/* =====================================================================
   7. PRODUKTMENÜ  (aufklappbar, ersetzt accordion.js)
   ---------------------------------------------------------------------
   HTML-Element <details> klappt ohne JavaScript auf und zu.
   <summary> ist die Zeile "Produktmenü", auf die man klickt.
   ===================================================================== */
.produktmenue {
  background: var(--dunkelblau);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--linkgrau);
}

.produktmenue summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.8rem;
  cursor: pointer;
  color: var(--weiss);
  font-weight: 400;
  list-style: none;               /* Standard-Dreieck ausblenden ... */
}
.produktmenue summary::-webkit-details-marker {
  display: none;                  /* ... auch in Safari */
}
/* ... und durch einen eigenen roten Pfeil ersetzen */
.produktmenue summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid var(--rot);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: transform 0.2s;
}
.produktmenue[open] summary::before {
  transform: rotate(90deg);       /* Pfeil zeigt nach unten, wenn offen */
}
.produktmenue summary:hover {
  color: var(--hellblau);
}

/* Inhalt: Produktgruppen in Spalten, automatisch umbrechend */
.produktmenue__inhalt {
  columns: 3 16rem;               /* bis zu 3 Spalten, mind. 16rem breit */
  column-gap: var(--abstand-gross);
  padding-block: 0.5rem 2rem;
}

.produktgruppe {
  break-inside: avoid;            /* Gruppe nicht über zwei Spalten teilen */
  margin: 0 0 1.4rem;
}
/* Gruppenname (weiß) */
.produktgruppe > a {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
}
.produktgruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.produktgruppe li {
  margin: 0;
}
.produktgruppe li a {
  display: block;
  padding: 0.15rem 0 0.15rem 1rem;
  position: relative;
  color: var(--linkgrau);
  text-decoration: none;
  font-size: 0.95rem;
}
/* kleiner grauer Pfeil vor jedem Eintrag (ersetzt pfeil_grau.png) */
.produktgruppe li a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--mittelgrau);
}
.produktgruppe a:hover {
  color: var(--weiss);
  text-decoration: underline;
}


/* =====================================================================
   8. STARTSEITE: BILDBAND (HERO) MIT BILDWECHSEL
   ---------------------------------------------------------------------
   Zwei Bilder liegen übereinander. Das obere wird per CSS-Animation
   alle 7 Sekunden ein- und ausgeblendet (ersetzt responsiveslides.js).
   Weitere Bilder: im HTML ein <img> ergänzen und die Animation
   anpassen (siehe Kommentar bei @keyframes).
   ===================================================================== */
.hero {
  position: relative;
  background: var(--blau);
}

.hero__bilder {
  position: relative;
  max-width: 1125px;              /* Originalbreite der Bannerbilder */
  margin-inline: auto;
  aspect-ratio: 1125 / 326;       /* Seitenverhältnis der Bannerbilder */
  overflow: hidden;
}
.hero__bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* zweites Bild blendet ein und aus */
.hero__bilder img + img {
  animation: bildwechsel 14s ease-in-out infinite;
}
@keyframes bildwechsel {
  0%, 40%   { opacity: 0; }   /* Bild 1 sichtbar  */
  50%, 90%  { opacity: 1; }   /* Bild 2 sichtbar  */
  100%      { opacity: 0; }   /* zurück zu Bild 1 */
}

/* Titelbox: liegt rechts unten auf dem Bild (wie bisher) */
.hero__titel {
  position: absolute;
  right: max(var(--abstand), calc((100% - 1125px) / 2 + var(--abstand)));
  bottom: var(--abstand);
  max-width: 34rem;
  padding: 1.2rem 1.6rem;
  background: rgba(37, 53, 61, 0.88);   /* Dunkelblau, leicht transparent */
  border-left: 5px solid var(--rot);
}
.hero__titel h1 {
  margin: 0;
  color: var(--weiss);
  font-family: var(--schrift-logo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
}
/* zweite, kleinere Zeile in der h1 */
.hero__titel h1 small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--schrift);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--hellblau);
}


/* =====================================================================
   9. SEITENKOPF DER UNTERSEITEN + BROTKRUMEN-PFAD
   ===================================================================== */
.seitenkopf {
  background-color: var(--blau);
  /* Bannerbild der Startseite als Hintergrund, links mit blauem
     Verlauf abgedeckt, damit der Text gut lesbar bleibt */
  background-image:
    linear-gradient(90deg, rgba(51, 90, 121, 0.97) 35%, rgba(51, 90, 121, 0.55)),
    url("../images/ani-banner1.jpg");
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: auto, cover;
  color: var(--weiss);
  padding-block: 1.5rem 2.5rem;
}
.seitenkopf h1 {
  margin: 0.4rem 0 0.4rem;
  color: var(--weiss);
  font-family: var(--schrift-logo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 22em;
}
.seitenkopf p {
  margin: 0;
  color: var(--hellblau);
  font-size: 1.15rem;
}

/* Brotkrumen-Pfad: Startseite / Produkte / Kompressoren */
.pfad ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pfad li + li::before {
  content: "/";
  margin-inline: 0.5rem;
  color: var(--mittelgrau);
}
.pfad a {
  color: var(--hellblau);
  text-decoration: none;
}
.pfad a:hover {
  color: var(--weiss);
  text-decoration: underline;
}
.pfad [aria-current="page"] {
  color: var(--weiss);
}


/* =====================================================================
   10. ROTER PFEIL-TRENNER ("SPITZE")
   ---------------------------------------------------------------------
   Das rote Dreieck mit grauem Schatten ist das Markenzeichen der Seite.
   Früher eine Grafik (spitze-rot-grau.png), jetzt mit CSS gezeichnet:
   bleibt auf jedem Bildschirm scharf.
   Verwendung im HTML:  <div class="spitze" aria-hidden="true"></div>
   ===================================================================== */
.spitze {
  position: relative;
  height: clamp(28px, 4vw, 56px);
  width: min(100%, 640px);
}
/* graues Dreieck (Schatten) */
.spitze::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 40%;
  height: 70%;
  background: #c8c8c8;
  clip-path: polygon(0 0, 100% 0, 58% 100%);
}
/* rotes Dreieck */
.spitze::after {
  content: "";
  position: absolute;
  inset: 0 10% 0 0;
  background: var(--rot);
  clip-path: polygon(0 0, 100% 0, 46% 100%);
}
/* Abstand nach dem Trenner */
.spitze + * {
  margin-top: var(--abstand);
}


/* =====================================================================
   11. BUTTONS UND LINKS
   ===================================================================== */
.button {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  background: var(--dunkelblau);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.03em;
  border: 2px solid var(--dunkelblau);
  transition: background-color 0.2s, border-color 0.2s;
}
.button:hover {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
}
/* roter Button für die wichtigste Aktion (z. B. Anfrage) */
.button--rot {
  background: var(--rot);
  border-color: var(--rot);
}
.button--rot:hover {
  background: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
}

/* ---------------------------------------------------------------------
   DOWNLOADS MIT DATEITYP-SYMBOL
   Das Symbol erscheint automatisch – passend zur Dateiendung im Link
   (.pdf, .xls/.xlsx, .zip, .doc/.docx). Kein Bild nötig.
   HTML:  <ul class="downloads">
            <li><a href="datei.pdf">Name <span class="info">(PDF, 1,2 MB)</span></a></li>
          </ul>
   --------------------------------------------------------------------- */
.downloads {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.downloads li {
  margin: 0;
}
.downloads a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--schwarz);
}
.downloads a:hover {
  color: var(--rot);
}
/* Das Dokument-Symbol: Blatt mit umgeknickter Ecke + Kürzel */
.downloads a::before {
  content: "DATEI";
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 2.3rem;
  height: 2.9rem;
  padding-bottom: 0.35rem;
  background: var(--mittelgrau);
  color: var(--weiss);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%);
}
/* Farbe und Kürzel je Dateityp ("i" = Groß-/Kleinschreibung egal) */
.downloads a[href$=".pdf" i]::before  { content: "PDF"; background: var(--rot); }
.downloads a[href$=".xls" i]::before,
.downloads a[href$=".xlsx" i]::before { content: "XLS"; background: #2e7d4f; }
.downloads a[href$=".zip" i]::before  { content: "ZIP"; background: var(--dunkelblau); }
.downloads a[href$=".doc" i]::before,
.downloads a[href$=".docx" i]::before { content: "DOC"; background: var(--blau); }
/* Name und Zusatzinfo stehen untereinander:
   <a href="..."><span>Name<span class="info">PDF · 3,6 MB</span></span></a> */
.downloads .info {
  display: block;
  color: var(--text);
  font-weight: 300;
  font-size: 0.85rem;
}

/* Kleine Dateityp-Marke hinter Datei-Links im Fließtext */
.inhalt a[href$=".pdf" i]:not(:has(img))::after,
.inhalt a[href$=".xls" i]:not(:has(img))::after,
.inhalt a[href$=".xlsx" i]:not(:has(img))::after,
.inhalt a[href$=".zip" i]:not(:has(img))::after {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  background: var(--rot);
  color: var(--weiss);
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 0.15em;
  text-decoration: none;
}
.inhalt a[href$=".pdf" i]:not(:has(img))::after  { content: "PDF"; }
.inhalt a[href$=".xls" i]:not(:has(img))::after,
.inhalt a[href$=".xlsx" i]:not(:has(img))::after { content: "XLS"; background: #2e7d4f; }
.inhalt a[href$=".zip" i]:not(:has(img))::after  { content: "ZIP"; background: var(--dunkelblau); }
/* in Download-Listen nicht doppelt anzeigen */
.inhalt .downloads a::after {
  content: none !important;
}

/* Download-Gruppen (Downloadseite) */
.download-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--abstand);
}
.download-gruppe {
  padding: 1.4rem 1.6rem;
  background: var(--weiss);
  border-top: 4px solid var(--rot);
}
.download-gruppe h2 {
  font-size: 1.25rem;
  color: var(--schwarz);
}


/* ---------------------------------------------------------------------
   HINWEIS-BAND (Startseite: Verweis auf Powertrax Defense)
   Dunkler Streifen mit Akzentfarbe Desert Tan.
   --------------------------------------------------------------------- */
.band {
  background: var(--dunkelblau);
  color: var(--linkgrau);
}
.band__innen {
  display: grid;
  grid-template-columns: minmax(0, 3fr) auto;
  gap: var(--abstand);
  align-items: center;
  padding-block: var(--abstand-gross);
  border-left: 6px solid var(--tan);
  padding-left: var(--abstand);
}
.band h2 {
  color: var(--weiss);
  font-family: var(--schrift-logo);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.band h2 span {
  color: var(--tan);
}
.band p {
  margin-bottom: 0.6em;
}
.band ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--weiss);
}
.band li::before {
  content: "■ ";
  color: var(--tan);
  font-size: 0.7em;
}
.button--tan {
  background: var(--tan);
  border-color: var(--tan);
  color: var(--dunkelblau);
  font-weight: 600;
}
.button--tan:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--dunkelblau);
}

/* =====================================================================
   12. PRODUKTKACHELN (Startseite, Bereich "Top-Produkte")
   ---------------------------------------------------------------------
   Raster passt sich automatisch an: 3 / 2 / 1 Kachel(n) pro Zeile.
   Eine Kachel = <li class="kachel"> ... </li>
   Große Kachel (doppelt breit, Bild neben Text): <li class="kachel kachel--gross">
   ===================================================================== */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kachel {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border-top: 4px solid var(--rot);
}
.kachel h3 {
  margin: 0;
  padding: 1rem 1.2rem 0.6rem;
  color: var(--rot);
  font-size: 1.15rem;
}
.kachel h3 a {
  color: inherit;
  text-decoration: none;
}
.kachel h3 a:hover {
  text-decoration: underline;
}
/* Bildfläche: einheitliche Höhe, Bild wird nie verzerrt oder vergrößert */
.kachel__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11rem;
  padding: 0.5rem 1.2rem;
}
.kachel__bild img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.kachel__text {
  flex: 1;                        /* schiebt den Button nach unten */
  padding: 0.6rem 1.2rem 0;
  font-size: 0.97rem;
}
.kachel__text p {
  margin-bottom: 0.7em;
}
.kachel .button {
  align-self: flex-start;
  margin: 0.4rem 1.2rem 1.4rem;
  padding: 0.4rem 1.1rem;
  font-size: 0.95rem;
}

/* Große Kachel: über zwei Spalten, Bild links und Text rechts.
   Erst ab Tablet-Breite – auf dem Handy wie eine normale Kachel. */
@media (min-width: 720px) {
  .kachel--gross {
    display: grid;
    grid-column: span 2;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto 1fr auto;
    background: var(--weiss);
  }
  .kachel--gross h3 {
    grid-column: 1 / -1;
    font-size: 1.4rem;
  }
  .kachel--gross .kachel__bild {
    grid-row: 2 / 4;
    height: auto;
    min-height: 14rem;
  }
  .kachel--gross .kachel__text {
    font-size: 1.05rem;
  }
  .kachel--gross .button {
    justify-self: start;
  }
}


/* =====================================================================
   13. SONDERRUBRIKEN-LISTE (Startseite unten)
   ---------------------------------------------------------------------
   Bild links, Text rechts. Jede Rubrik = <article class="rubrik">.
   ===================================================================== */
.rubriken {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr));
  gap: var(--abstand-gross) var(--abstand-gross);
}

.rubrik {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.4rem;
  align-items: start;
}
.rubrik img {
  width: 9rem;
  aspect-ratio: 1;
  object-fit: cover;              /* quadratischer Ausschnitt */
  border-bottom: 4px solid var(--rot);
}
.rubrik h3 {
  margin-bottom: 0.3em;
}
.rubrik h3 a {
  color: var(--schwarz);
  text-decoration: none;
}
.rubrik h3 a:hover {
  color: var(--rot);
}
.rubrik p {
  font-size: 0.97rem;
}


/* =====================================================================
   14. PRODUKTSEITEN
   ===================================================================== */

/* Textblock mit Abstand nach unten */
.block + .block {
  margin-top: var(--abstand-gross);
}

/* Technische Daten als Liste "Bezeichnung: Wert"
   HTML:  <dl class="daten"><dt>Druck</dt><dd>8 bar</dd> ... </dl> */
.daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.4rem;
  margin: 0 0 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--hellgrau);
  border-left: 4px solid var(--rot);
}
.daten dt {
  font-weight: 600;
  color: var(--schwarz);
}
.daten dd {
  margin: 0;
}

/* Bildergruppe (mehrere Bilder nebeneinander) */
.bilder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  align-items: flex-end;
  margin: 0 0 1.5rem;
}
.bilder figure {
  margin: 0;
}
figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--text);
}

/* Infokasten (grau) */
.infokasten {
  padding: 1.4rem 1.6rem;
  background: var(--hellgrau);
}
/* im grauen Abschnitt wird der Kasten weiß, damit er sich abhebt */
.abschnitt--grau .infokasten,
.abschnitt--hellblau .infokasten {
  background: var(--weiss);
}
.infokasten h3 {
  color: var(--rot);
}
.infokasten > :last-child {
  margin-bottom: 0;
}

/* --- Produkt-Einträge (z. B. Kompressoren-Liste) ---
   Ein Produkt = <article class="produkt"> mit Bild, Daten und Preis.
   Neues Produkt: kompletten <article>-Block im HTML kopieren. */
.produkte {
  display: grid;
  gap: var(--abstand);
}
.produkt {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: var(--abstand);
  align-items: start;
  padding: var(--abstand);
  background: var(--weiss);
  border-top: 4px solid var(--rot);
}
.produkt__bild img {
  width: 100%;
  height: auto;
}
.produkt h3 {
  margin-bottom: 0.2em;
  font-size: 1.3rem;
}
/* Artikelnummer klein über dem Produktnamen */
.produkt__nr {
  margin: 0 0 0.6rem;
  font-family: var(--schrift-logo);
  font-size: 0.95rem;
  color: var(--blau);
}
.produkt ul {
  margin-bottom: 0.5rem;
  columns: 2 13rem;               /* Datenliste zweispaltig, wenn Platz */
  column-gap: 2rem;
}
.produkt__hinweis {
  font-weight: 600;
  color: var(--rot);
}
.produkt__preis {
  min-width: 9rem;
  text-align: right;
}
.produkt__preis span {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mittelgrau);
}
.produkt__preis a {
  display: inline-block;
  margin-top: 0.3rem;
}

/* Aufforderung zur Anfrage am Seitenende */
.anfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--abstand);
  background: var(--dunkelblau);
  color: var(--weiss);
}
.anfrage p {
  margin: 0;
  font-size: 1.15rem;
}


/* =====================================================================
   14b. FLIESSTEXT-SEITEN (.inhalt)
   ---------------------------------------------------------------------
   Gilt für alle Produkt-, Projekt- und Infoseiten. Der Inhalt steht
   einfach untereinander im <div class="rahmen inhalt">; hier wird nur
   festgelegt, wie Überschriften, Bilder, Tabellen usw. aussehen.
   ===================================================================== */
.inhalt > * + h2 {
  margin-top: var(--abstand-gross);
}
.inhalt > * + h3,
.inhalt > * + h4 {
  margin-top: 1.8rem;
}
.inhalt ul,
.inhalt ol {
  max-width: var(--text-breite);
}
.inhalt img {
  height: auto;
}
/* Kachel-Raster und Linklisten dürfen die volle Breite nutzen */
.inhalt .kacheln {
  max-width: none;
}
.inhalt .kachel__bild img {
  max-height: 10rem;
  width: auto;
}

/* Einzelbild */
.bild {
  margin: 0.5rem 0 1.5rem;
}
.bild img {
  max-height: 32rem;
  width: auto;
}

/* Bildergalerie: Bilder in einem Raster, Klick öffnet das große Bild */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.8rem;
  margin: 0.5rem 0 1.5rem;
}
.galerie > img,
.galerie > a img {
  width: 100%;
  height: 11rem;
  object-fit: cover;            /* gleich große Vorschaubilder */
  background: var(--hellgrau);
}
.galerie > a {
  display: block;
}
.galerie > a:hover img {
  outline: 3px solid var(--rot);
}

/* Tabellen: auf dem Handy seitlich wischbar statt zu breit */
.tabelle {
  overflow-x: auto;
  margin: 0.5rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.tabelle table {
  border-collapse: collapse;
  min-width: 36rem;
  width: 100%;
  font-size: 0.95rem;
  background: var(--weiss);
}
.tabelle th,
.tabelle td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid #d5dadb;
  text-align: left;
  vertical-align: top;
}
.tabelle thead th,
.tabelle tr:first-child th {
  background: var(--dunkelblau);
  color: var(--weiss);
  font-weight: 600;
}
.tabelle thead th a {
  color: var(--weiss);
}
.tabelle tbody tr:nth-child(even) {
  background: var(--hellgrau);
}
.tabelle ul {
  margin: 0;
  padding-left: 1rem;
}
.tabelle img {
  max-width: 10rem;
}

/* Aufklapp-Bereich (ersetzt die alten JavaScript-Buttons) */
.aufklapp {
  margin: 1rem 0 1.5rem;
  border: 2px solid var(--rot);
  background: var(--weiss);
}
.aufklapp summary {
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--schwarz);
}
.aufklapp summary:hover,
.aufklapp[open] summary {
  background: var(--rot);
  color: var(--weiss);
}
.aufklapp__inhalt {
  padding: 1rem;
}

/* Produktzeile: Name + Bild links, Details rechts, ggf. Preis */
.produkt-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--abstand);
  margin: 1.5rem 0;
  padding: var(--abstand);
  background: var(--weiss);
  border-top: 4px solid var(--rot);
}
.abschnitt:not(.abschnitt--hellblau) .produkt-zeile {
  background: var(--hellgrau);
}
.produkt-zeile--einspaltig {
  grid-template-columns: 1fr;
}
.produkt-zeile__kopf h2,
.produkt-zeile__kopf h3,
.produkt-zeile__kopf h4 {
  margin-top: 0;
  font-size: 1.3rem;
}
.produkt-zeile__kopf img {
  margin: 0.5rem 0;
  max-height: 18rem;
  width: auto;
}
.produkt-zeile__kopf .galerie {
  grid-template-columns: 1fr 1fr;
}
.produkt-zeile__details > :first-child {
  margin-top: 0;
}
.produkt-zeile__preis {
  grid-column: 1 / -1;
  padding-top: 0.8rem;
  border-top: 1px solid #d5dadb;
  font-weight: 600;
}
.produkt-zeile__preis p {
  margin: 0;
}

/* Linkliste (z. B. Projektübersicht) */
.linkliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.5rem 1.5rem;
  max-width: none !important;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.linkliste li {
  display: flex;                /* alle Kästen einer Zeile gleich hoch */
  margin: 0;
}
.linkliste li > a {
  flex: 1;
}
.linkliste a {
  display: block;
  padding: 0.7rem 1rem 0.7rem 1.4rem;
  position: relative;
  background: var(--dunkelblau);
  color: var(--weiss);
  text-decoration: none;
}
.linkliste a::before {
  content: "›";
  position: absolute;
  left: 0.6rem;
  color: var(--rot);
  font-weight: 700;
}
.linkliste a:hover {
  background: var(--rot);
}

/* Video-Link (ersetzt eingebettete YouTube-Videos) */
.video-link a::before {
  content: "▶ ";
  color: var(--rot);
}


/* =====================================================================
   15. FUSSBEREICH
   ===================================================================== */
.fuss {
  background-color: var(--dunkelblau);
  /* Zeichnung der Hydraulikpumpe rechts unten (wie bisher) */
  background-image: url("../images/bg-footer.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  color: var(--linkgrau);
  font-size: 0.97rem;
}
.fuss__innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--abstand);
  padding-block: var(--abstand-gross);
  /* Platz rechts für die Zeichnung lassen */
  padding-right: max(var(--abstand), 320px);
}
.fuss h2 {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  color: var(--weiss);
}
/* Firmenname im Logo-Stil */
.fuss .firmenname {
  font-family: var(--schrift-logo);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--weiss);
}
.fuss address {
  font-style: normal;
}
.fuss a {
  color: var(--weiss);
}
.fuss a:hover {
  color: var(--hellblau);
}
.fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss__unten {
  padding-block: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.25);
}
.fuss__unten p {
  max-width: none;
  margin: 0;
}


/* =====================================================================
   16. HILFSKLASSEN
   ===================================================================== */

/* Text nur für Screenreader und Suchmaschinen, optisch unsichtbar
   (z. B. "mehr zu Hydraulik" statt nur "mehr") */
.nur-vorlesen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-mitte {
  text-align: center;
}
.ohne-abstand {
  margin: 0;
}
/* zusätzlicher Abstand nach oben */
.abstand-oben {
  margin-top: var(--abstand);
}


/* =====================================================================
   17. RESPONSIVE ANPASSUNGEN
   ---------------------------------------------------------------------
   Viele Bereiche passen sich bereits selbst an (Grid "auto-fill").
   Hier stehen nur die Ausnahmen für kleinere Bildschirme.
   ===================================================================== */

/* --- Tablet (bis 900 px Breite) --- */
@media (max-width: 900px) {
  .zweispaltig,
  .zweispaltig--gleich {
    grid-template-columns: 1fr;   /* alles untereinander */
  }
  .produkt {
    grid-template-columns: 10rem 1fr;
  }
  .produkt-zeile {
    grid-template-columns: 1fr;   /* Produktzeile untereinander */
  }
  .produkt__preis {
    grid-column: 1 / -1;          /* Preis unter die Daten */
    text-align: left;
  }
  .fuss__innen {
    padding-right: var(--abstand);
  }
  .band__innen {
    grid-template-columns: 1fr;
  }
  .fuss {
    background-size: 200px auto;
  }
}

/* --- Handy (bis 640 px Breite) --- */
@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .kopf__innen {
    padding-block: 1rem;
  }
  .hauptnav a {
    padding: 0.7rem 0.55rem;
  }
  .hauptnav li:first-child a {
    margin-left: -0.55rem;
  }
  /* Titelbox steht unter dem Bild statt darauf */
  .hero__titel {
    position: static;
    max-width: none;
    border-left: 0;
    border-top: 5px solid var(--rot);
    background: var(--dunkelblau);
  }
  .rubrik {
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
  }
  .rubrik img {
    width: 6rem;
  }
  .produkt {
    grid-template-columns: 1fr;
  }
  .produkt__bild img {
    max-width: 18rem;
  }
  .daten {
    grid-template-columns: 1fr;
    gap: 0 1rem;
  }
  .daten dd {
    margin-bottom: 0.5rem;
  }
  .fuss {
    background-image: none;
  }
}

/* Wer Animationen im Betriebssystem abgeschaltet hat,
   bekommt den Bildwechsel nicht angezeigt (Barrierefreiheit). */
@media (prefers-reduced-motion: reduce) {
  .hero__bilder img + img {
    animation: none;
    opacity: 0;
  }
  html {
    scroll-behavior: auto;
  }
}


/* =====================================================================
   18. DRUCKANSICHT
   ---------------------------------------------------------------------
   Beim Drucken: Navigation, Menü und Bildband weglassen,
   schwarzer Text auf weißem Papier.
   ===================================================================== */
@media print {
  .hauptnav,
  .produktmenue,
  .hero__bilder,
  .sprachwahl,
  .sprunglink,
  .spitze,
  .anfrage {
    display: none !important;
  }
  body {
    color: #000;
    font-size: 11pt;
  }
  .seitenkopf,
  .fuss,
  .hero,
  .hero__titel {
    background: none !important;
    color: #000;
    position: static;
  }
  .seitenkopf h1,
  .hero__titel h1,
  .fuss h2,
  .fuss a,
  .fuss .firmenname {
    color: #000;
  }
  .abschnitt {
    padding-block: 1rem;
  }
}