/*
Theme Name: OSMA Trocknersysteme
Theme URI: https://neu.osma.at
Author: OSMA Trocknersysteme GmbH
Description: Individuell entwickeltes Theme für OSMA Trocknersysteme GmbH – kein Page-Builder, native WordPress-Blöcke.
Version: 3.1
Text Domain: osma
*/
/* ==========================================================================
   1. DESIGNSYSTEM – GRUNDWERTE (CSS-Variablen)
   ========================================================================== */
:root {
  --osma-pink: #D6036A;
  --osma-pink-dark: #A8024F;
  --osma-pink-light: #FBE6EF;
  --osma-grau-dunkel: #3b4650;
  --osma-grau: #6b7580;
  --osma-grau-hell: #f4f5f6;
  --osma-weiss: #ffffff;
  --osma-rand: #e2e5e8;
  --osma-erfolg: #2e7d4f;
  --osma-warnung: #b45309;
  --osma-font-haupt: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --osma-font-size-klein: 0.875rem;
  --osma-font-size-basis: 1rem;
  --osma-font-size-gross: 1.25rem;
  --osma-font-size-h3: 1.5rem;
  --osma-font-size-h2: 2rem;
  --osma-font-size-h1: 2.75rem;
  --osma-zeilenhoehe: 1.6;
  --osma-space-xs: 8px;
  --osma-space-sm: 16px;
  --osma-space-md: 24px;
  --osma-space-lg: 40px;
  --osma-space-xl: 64px;
  --osma-space-xxl: 96px;
  --osma-radius: 6px;
  --osma-radius-gross: 12px;
  --osma-schatten: 0 2px 8px rgba(59, 70, 80, 0.08);
  --osma-schatten-hover: 0 6px 20px rgba(59, 70, 80, 0.14);
  --osma-max-breite: 1240px;
}
/* ==========================================================================
   2. GRUNDLAGEN
   ========================================================================== */
* {
  box-sizing: border-box;
}
body {
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  line-height: var(--osma-zeilenhoehe);
  color: var(--osma-grau-dunkel);
  background: var(--osma-weiss);
  margin: 0;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--osma-grau-dunkel);
  line-height: 1.25;
  margin: 0 0 var(--osma-space-sm) 0;
}
h1 { font-size: var(--osma-font-size-h1); }
h2 { font-size: var(--osma-font-size-h2); }
h3 { font-size: var(--osma-font-size-h3); }
@media (max-width: 600px) {
  h1, h2, h3, h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }
}
p {
  margin: 0 0 var(--osma-space-sm) 0;
}
a {
  color: var(--osma-pink);
  text-decoration: none;
}
a:hover {
  color: var(--osma-pink-dark);
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.osma-container {
  max-width: var(--osma-max-breite);
  margin: 0 auto;
  padding: 0 var(--osma-space-md);
}
.osma-section {
  padding: var(--osma-space-xl) 0;
}
/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.osma-btn {
  display: inline-block;
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--osma-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}
.osma-btn-primary {
  background: var(--osma-pink);
  color: var(--osma-weiss);
}
.osma-btn-primary:hover {
  background: var(--osma-pink-dark);
  color: var(--osma-weiss);
  text-decoration: none;
}
.osma-btn-secondary {
  background: transparent;
  color: var(--osma-grau-dunkel);
  border-color: var(--osma-grau-dunkel);
}
.osma-btn-secondary:hover {
  background: var(--osma-grau-dunkel);
  color: var(--osma-weiss);
  text-decoration: none;
}
/* ==========================================================================
   4. KARTEN
   ========================================================================== */
.osma-card {
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  box-shadow: var(--osma-schatten);
  padding: var(--osma-space-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.osma-card:hover {
  box-shadow: var(--osma-schatten-hover);
  transform: translateY(-2px);
}
.osma-card img {
  border-radius: var(--osma-radius);
  margin-bottom: var(--osma-space-sm);
}
.osma-card h3 {
  font-size: var(--osma-font-size-gross);
  margin-bottom: var(--osma-space-xs);
}
.osma-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--osma-space-md);
}
/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */
.osma-header {
  background: var(--osma-weiss);
  border-bottom: 1px solid var(--osma-rand);
  padding: var(--osma-space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.osma-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.osma-nav ul {
  list-style: none;
  display: flex;
  gap: var(--osma-space-md);
  margin: 0;
  padding: 0;
}
.osma-nav a {
  color: var(--osma-grau-dunkel);
  font-weight: 600;
  font-size: var(--osma-font-size-klein);
}
.osma-nav a:hover {
  color: var(--osma-pink);
  text-decoration: none;
}
.osma-nav-toggle-checkbox {
  display: none;
}
.osma-nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
}
.osma-nav-toggle-label span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--osma-grau-dunkel);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.osma-nav-cta {
  display: none;
}
/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.osma-footer {
  background: var(--osma-grau-dunkel);
  color: var(--osma-weiss);
  padding: var(--osma-space-xl) 0 var(--osma-space-md) 0;
}
.osma-footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1.2fr 1fr 0.9fr;
  gap: var(--osma-space-md) var(--osma-space-lg);
  margin-bottom: var(--osma-space-lg);
}
.osma-footer-about {
  padding-right: var(--osma-space-md);
}
.osma-footer-logo-chip {
  display: inline-block;
  background: var(--osma-weiss);
  border-radius: var(--osma-radius);
  padding: 12px 18px;
  max-width: 190px;
  width: 100%;
  margin-bottom: var(--osma-space-md);
}
.osma-footer-logo-chip img {
  display: block;
  width: 100%;
  height: auto;
}
.osma-footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  line-height: var(--osma-zeilenhoehe);
  margin: 0 0 var(--osma-space-sm) 0;
  max-width: 34em;
}
.osma-footer-address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  line-height: 1.7;
}
.osma-footer-address a {
  color: rgba(255, 255, 255, 0.85);
}
.osma-footer-address a:hover {
  color: var(--osma-pink-light);
  text-decoration: underline;
}
.osma-footer-spalte h3 {
  color: var(--osma-weiss);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 var(--osma-space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
  display: inline-block;
}
.osma-footer-spalte ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.osma-footer-spalte li {
  margin-bottom: 8px;
}
.osma-footer-spalte a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.875rem;
}
.osma-footer-spalte a:hover {
  color: var(--osma-pink-light);
  text-decoration: underline;
}
.osma-footer-bottom {
  padding-top: var(--osma-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.osma-footer-bottom p {
  opacity: 0.6;
  font-size: 0.8125rem;
  margin: 0;
}
@media (max-width: 1024px) {
  .osma-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--osma-space-lg) var(--osma-space-md);
  }
  .osma-footer-about {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: var(--osma-space-sm);
  }
}
@media (max-width: 600px) {
  .osma-footer {
    padding: var(--osma-space-lg) 0 var(--osma-space-md) 0;
  }
  .osma-footer-top {
    grid-template-columns: 1fr;
    gap: var(--osma-space-lg);
  }
  .osma-footer-about {
    grid-column: auto;
    margin-bottom: 0;
  }
  .osma-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ==========================================================================
   7. FORMULARE
   ========================================================================== */
.osma-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--osma-space-xs);
}
.osma-form input,
.osma-form select,
.osma-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  margin-bottom: var(--osma-space-sm);
}
.osma-form input:focus,
.osma-form select:focus,
.osma-form textarea:focus {
  outline: none;
  border-color: var(--osma-pink);
  box-shadow: 0 0 0 3px var(--osma-pink-light);
}
/* ==========================================================================
   8. HILFSKLASSEN
   ========================================================================== */
.osma-text-pink { color: var(--osma-pink); }
.osma-bg-hell { background: var(--osma-grau-hell); }
.osma-text-center { text-align: center; }
.osma-mt-sm { margin-top: var(--osma-space-sm); }
.osma-mt-md { margin-top: var(--osma-space-md); }
.osma-mt-lg { margin-top: var(--osma-space-lg); }
.osma-mb-lg { margin-bottom: var(--osma-space-lg); }
/* ==========================================================================
   9. RESPONSIVE (Mobile)
   ========================================================================== */
@media (max-width: 1024px) {
  .osma-header-inner {
    flex-wrap: wrap;
  }
  .osma-nav-toggle-label {
    display: flex;
  }
  .osma-header-cta-desktop {
    display: none;
  }
  .osma-nav {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .osma-nav-toggle-checkbox:checked ~ .osma-nav {
    max-height: 600px;
  }
  .osma-nav-toggle-checkbox:checked ~ .osma-nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .osma-nav-toggle-checkbox:checked ~ .osma-nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  .osma-nav-toggle-checkbox:checked ~ .osma-nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .osma-nav-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: var(--osma-space-sm) 0 var(--osma-space-md);
  }
  .osma-nav ul {
    flex-direction: column;
    gap: 0;
    padding-top: var(--osma-space-sm);
    border-top: 1px solid var(--osma-rand);
    margin-top: var(--osma-space-sm);
  }
  .osma-nav ul li {
    border-bottom: 1px solid var(--osma-rand);
  }
  .osma-nav ul li:last-child {
    border-bottom: none;
  }
  .osma-nav a {
    display: block;
    padding: 12px 4px;
  }
}
@media (max-width: 768px) {
  :root {
    --osma-font-size-h1: 2rem;
    --osma-font-size-h2: 1.5rem;
    --osma-space-xl: 40px;
    --osma-space-xxl: 56px;
  }
}
/* ==========================================================================
   10. STARTSEITE: HERO-BEREICH
   ========================================================================== */
.osma-hero {
  background: linear-gradient(135deg, var(--osma-grau-dunkel) 0%, #2a323a 100%);
  color: var(--osma-weiss);
  padding: var(--osma-space-xxl) 0;
  text-align: center;
}
.osma-hero h1 {
  color: var(--osma-weiss);
  font-size: var(--osma-font-size-h1);
  max-width: 800px;
  margin: 0 auto var(--osma-space-sm) auto;
}
.osma-hero p {
  font-size: var(--osma-font-size-gross);
  opacity: 0.85;
  max-width: 600px;
  margin: 0 auto var(--osma-space-md) auto;
}
.osma-hero-buttons {
  display: flex;
  gap: var(--osma-space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.osma-hero .osma-btn-secondary {
  border-color: var(--osma-weiss);
  color: var(--osma-weiss);
}
.osma-hero .osma-btn-secondary:hover {
  background: var(--osma-weiss);
  color: var(--osma-grau-dunkel);
}
/* ==========================================================================
   11. ZIELGRUPPEN-KACHELN
   ========================================================================== */
.osma-zielgruppe-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--osma-radius);
  background: var(--osma-pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--osma-space-sm);
}
/* ==========================================================================
   12. KENNZAHLEN-BEREICH ("Warum OSMA")
   ========================================================================== */
.osma-kennzahlen {
  background: var(--osma-grau-hell);
}
.osma-kennzahlen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--osma-space-lg);
  text-align: center;
}
.osma-kennzahl-zahl {
  font-size: 3rem;
  font-weight: 800;
  color: var(--osma-pink);
  line-height: 1;
  margin-bottom: var(--osma-space-xs);
}
.osma-kennzahl-label {
  font-size: var(--osma-font-size-basis);
  color: var(--osma-grau);
}
/* ==========================================================================
   13. REFERENZEN-VORSCHAU
   ========================================================================== */
.osma-referenz-platzhalter {
  background: var(--osma-grau-hell);
  border: 2px dashed var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
  text-align: center;
  color: var(--osma-grau);
}
/* ==========================================================================
   14. ABSCHLUSS-CTA-BEREICH
   ========================================================================== */
.osma-cta-band {
  background: var(--osma-pink);
  color: var(--osma-weiss);
  text-align: center;
  padding: var(--osma-space-xl) 0;
}
.osma-cta-band h2 {
  color: var(--osma-weiss);
}
.osma-cta-band .osma-btn-secondary {
  border-color: var(--osma-weiss);
  color: var(--osma-weiss);
}
.osma-cta-band .osma-btn-secondary:hover {
  background: var(--osma-weiss);
  color: var(--osma-pink);
}
/* ==========================================================================
   15. LOGO-GRÖSSE IM HEADER BEGRENZEN
   ========================================================================== */
.osma-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}
.osma-logo .custom-logo-link {
  display: block;
}
/* ==========================================================================
   16. ANFRAGE-SEITE: ZWEISPALTIGES LAYOUT
   ========================================================================== */
.osma-anfrage-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--osma-space-lg);
  align-items: start;
}
@media (max-width: 768px) {
  .osma-anfrage-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   17. CONTACT FORM 7 AN DAS DESIGNSYSTEM ANPASSEN
   Ohne diese Regeln sieht das Formular wie unstyliertes Standard-HTML aus.
   ========================================================================== */
.osma-form label {
  display: block;
  font-weight: 600;
  margin: var(--osma-space-sm) 0 6px 0;
}
.osma-form label:first-of-type {
  margin-top: 0;
}
.osma-hinweis-pflichtfeld {
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
  margin-bottom: var(--osma-space-sm);
}
.osma-form .wpcf7-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  background: var(--osma-weiss);
}
.osma-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--osma-pink);
  box-shadow: 0 0 0 3px var(--osma-pink-light);
}
.osma-form textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}
/* Der Absende-Button soll aussehen wie unser Haupt-Button, nicht wie ein Browser-Standardknopf */
.osma-form input[type="submit"] {
  display: inline-block;
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--osma-radius);
  border: 2px solid var(--osma-pink);
  background: var(--osma-pink);
  color: var(--osma-weiss);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: var(--osma-space-sm);
}
.osma-form input[type="submit"]:hover {
  background: var(--osma-pink-dark);
  border-color: var(--osma-pink-dark);
}
.osma-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Fehlermeldungen unter einzelnen Feldern (z.B. "Dieses Feld ist erforderlich") */
.osma-form .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: var(--osma-font-size-klein);
  margin-top: 4px;
}
/* Erfolgs-/Fehler-Meldung nach dem Absenden */
.osma-form .wpcf7-response-output {
  border-radius: var(--osma-radius);
  padding: var(--osma-space-sm);
  margin-top: var(--osma-space-sm);
  font-size: var(--osma-font-size-klein);
}
.osma-form form.sent .wpcf7-response-output {
  background: #eafaf0;
  border: 1px solid var(--osma-erfolg);
  color: var(--osma-erfolg);
}
.osma-form form.invalid .wpcf7-response-output,
.osma-form form.failed .wpcf7-response-output {
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #c0392b;
}
/* Ladezustand während des Sendens */
.osma-form .wpcf7-spinner {
  margin-left: var(--osma-space-xs);
}
/* ==========================================================================
   18. STICKY-SEITENLEISTE AUF DER ANFRAGE-SEITE
   ========================================================================== */
.osma-card-sticky {
  position: sticky;
  top: 100px;
}
/* Checkbox-Zustimmungsfeld (DSGVO) etwas abheben vom Rest */
.osma-form .wpcf7-acceptance {
  display: block;
  margin: var(--osma-space-md) 0;
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
}
.osma-form .wpcf7-acceptance .wpcf7-list-item {
  margin-left: 0;
}
/* ==========================================================================
   19. VERTRAUENS-KACHELN UND HINWEISBOX AUF DER ANFRAGE-SEITE
   ========================================================================== */
.osma-vorteil {
  text-align: center;
  padding: var(--osma-space-md);
}
a.osma-vorteil {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--osma-radius-gross);
  transition: background .15s ease, box-shadow .15s ease;
}
a.osma-vorteil:hover {
  background: var(--osma-grau-hell);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
/* ==========================================================================
   70. SOCIAL-LINKS AUF DER KONTAKTSEITE
   ========================================================================== */
.osma-social-reihe {
  display: flex;
  justify-content: center;
  gap: var(--osma-space-md);
  margin-top: var(--osma-space-md);
}
.osma-social-reihe a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--osma-grau-hell);
  color: var(--osma-grau-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.osma-social-reihe a:hover {
  background: var(--osma-pink);
  color: #fff;
}
.osma-social-reihe svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
/* Facebook-Icon ist als gefüllte Glyphe gezeichnet (fill passt), Instagram
   und YouTube dagegen als Umriss-Icons (rect/circle bzw. path+polygon nur
   als Linien gedacht) - mit der fill-Regel oben wurden sie zu blickdichten
   schwarzen Klötzen statt erkennbaren Symbolen (Live-Check auf
   neu.osma.at hat das gezeigt). Deshalb hier gezielt auf Strich statt
   Füllung umgeschaltet. */
.osma-social-reihe svg.osma-icon-umriss {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.osma-vorteil-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--osma-pink-light);
  color: var(--osma-pink);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--osma-space-sm) auto;
}
.osma-vorteil h3 {
  font-size: var(--osma-font-size-basis);
  margin-bottom: 6px;
}
.osma-vorteil p {
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
  margin: 0;
}
.osma-hinweisbox {
  background: var(--osma-pink-light);
  border-left: 4px solid var(--osma-pink);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-sm) var(--osma-space-md);
  font-size: var(--osma-font-size-klein);
}
/* ==========================================================================
   20. SCHNELLKONTAKT-BEREICH (E-Mail-Link + Rückruf-Mini-Formular)
   ========================================================================== */
.osma-schnellkontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--osma-space-md);
}
.osma-schnellkontakt .osma-card {
  text-align: left;
}
@media (max-width: 768px) {
  .osma-schnellkontakt {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   21. GLEICHGEWICHT ZWISCHEN DEN BEIDEN SCHNELLKONTAKT-KARTEN
   Sorgt dafür, dass beide Karten unabhängig von der Textmenge gleich
   "voll" wirken - Inhalt oben, Buttons/Formular unten ausgerichtet.
   ========================================================================== */
.osma-schnellkontakt-karte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.osma-schnellkontakt-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--osma-space-xs);
  margin-top: var(--osma-space-md);
}
.osma-schnellkontakt-buttons .osma-btn {
  width: 100%;
}
/* ==========================================================================
   22. SCHWEBENDES KONTAKT-WIDGET (site-weit, wie bei Wintersteiger/Top Trock)
   ========================================================================== */
.osma-kontakt-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Blendet das schwebende Kontakt-Widget aus, solange die randlos bis zum
   Bildschirmrand auslaufende Standort-Karte sichtbar ist - sonst liegt das
   Widget direkt auf der Karte (siehe Live-Check auf neu.osma.at). Die Karte
   hat mit "Route planen" ohnehin schon eine eigene Kontakt-Option, das
   Widget wird dort also nicht vermisst. Steuerung per JS in
   page-kontakt.php (IntersectionObserver auf .osma-standort-flow-section). */
.osma-kontakt-widget.osma-widget-ausgeblendet {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
}
.osma-kontakt-checkbox {
  display: none;
}
.osma-kontakt-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--osma-pink);
  color: var(--osma-weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  box-shadow: var(--osma-schatten-hover);
  transition: transform 0.2s ease, background 0.2s ease;
}
.osma-kontakt-button:hover {
  background: var(--osma-pink-dark);
}
.osma-kontakt-icon-plus {
  transition: transform 0.2s ease;
  line-height: 1;
}
.osma-kontakt-checkbox:checked ~ .osma-kontakt-button .osma-kontakt-icon-plus {
  transform: rotate(45deg);
}
.osma-kontakt-panel {
  display: none;
  flex-direction: column;
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  box-shadow: var(--osma-schatten-hover);
  padding: var(--osma-space-sm);
  margin-bottom: var(--osma-space-sm);
  min-width: 240px;
}
.osma-kontakt-checkbox:checked ~ .osma-kontakt-panel {
  display: flex;
}
.osma-kontakt-panel a {
  padding: 12px 14px;
  border-radius: var(--osma-radius);
  color: var(--osma-grau-dunkel);
  font-weight: 600;
  font-size: var(--osma-font-size-klein);
}
.osma-kontakt-panel a:hover {
  background: var(--osma-grau-hell);
  text-decoration: none;
}
@media (max-width: 1024px) {
  .osma-kontakt-widget {
    bottom: 16px;
    right: 16px;
  }
}
/* Dezente einzelne Rückruf-Karte statt großem zweispaltigem Block */
.osma-schnellkontakt-dezent {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
/* ==========================================================================
   23. WIDGET NEU: DAUERHAFT SICHTBARER ICON-STAPEL (statt Klick-zum-Öffnen)
   ========================================================================== */
.osma-kontakt-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.osma-kontakt-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  box-shadow: var(--osma-schatten-hover);
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--osma-grau-dunkel);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.osma-kontakt-icon-link:hover {
  transform: translateX(-4px);
  text-decoration: none;
  color: var(--osma-pink);
}
.osma-kontakt-icon {
  font-size: 22px;
  margin-bottom: 4px;
}
@media (max-width: 1024px) {
  .osma-kontakt-widget {
    display: none;
  }
}
/* ==========================================================================
   24. RÜCKRUF-MODAL (site-weit, per Checkbox-Trick ohne JavaScript)
   ========================================================================== */
.osma-modal-checkbox {
  display: none;
}
.osma-modal-hintergrund {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(59, 70, 80, 0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.osma-modal-checkbox:checked ~ .osma-modal-hintergrund {
  display: flex;
}
.osma-modal-schliessen-flaeche {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.osma-modal-box {
  position: relative;
  background: var(--osma-weiss);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
  max-width: 440px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
}
.osma-modal-schliessen {
  position: absolute;
  top: var(--osma-space-sm);
  right: var(--osma-space-sm);
  cursor: pointer;
  font-size: 20px;
  color: var(--osma-grau);
}
/* ==========================================================================
   25. ANFRAGE-SEITE: SCHLANKE SIDEBAR + ZWEISPALTIGES FORMULAR
   ========================================================================== */
.osma-anfrage-grid-neu {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--osma-space-lg);
  align-items: start;
}
.osma-anfrage-sidebar {
  position: sticky;
  top: 100px;
}
.osma-eyebrow {
  color: var(--osma-pink);
  font-weight: 700;
  font-size: var(--osma-font-size-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--osma-space-xs);
}
.osma-anfrage-formular {
  padding: var(--osma-space-lg);
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  box-shadow: var(--osma-schatten);
}
.osma-hinweisbox {
  background: transparent;
  border-left: 3px solid var(--osma-pink);
  border-radius: 0;
  padding: 4px 0 4px var(--osma-space-sm);
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
}
.osma-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--osma-space-md);
}
@media (max-width: 900px) {
  .osma-anfrage-grid-neu {
    grid-template-columns: 1fr;
  }
  .osma-form-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   26. DROPDOWNS: EIGENER PFEIL STATT BROWSER-STANDARD
   ========================================================================== */
.osma-form select.wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4650' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
  cursor: pointer;
}
/* ==========================================================================
   27. FORMULAR IN THEMATISCHE GRUPPEN GLIEDERN STATT EINER FELD-WAND
   ========================================================================== */
.osma-form-gruppe {
  margin-bottom: var(--osma-space-lg);
}
.osma-form-gruppe:last-of-type {
  margin-bottom: 0;
}
.osma-form-gruppentitel {
  color: var(--osma-pink);
  font-weight: 700;
  font-size: var(--osma-font-size-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--osma-space-sm);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--osma-rand);
}
/* ==========================================================================
   28. PREMIUM-NACHSCHÄRFUNG DER ANFRAGE-SEITE
   ========================================================================== */
/* Dezenter Hintergrund hinter dem Formularbereich - Formular wirkt wie eine
   bewusst gestaltete Fläche, statt im selben Weiß zu verschwinden */
.osma-anfrage-hintergrund {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
}
/* Mobile: Anfrage/Vertriebspartner-Formular wirkte auf schmalen Screens extrem schmal (~248px bei 390px Viewport), weil .osma-anfrage-hintergrund UND .osma-anfrage-formular beide volles --osma-space-lg-Padding hatten (doppelt verschachtelt). Auf Mobile/Tablet daher beide Paddings reduzieren, damit das Formular die verfuegbare Breite nutzt. Muss NACH den Basis-Regeln stehen, damit die Kaskade (gleiche Spezifitaet) korrekt greift. */
@media (max-width: 900px) {
  .osma-anfrage-hintergrund {
    padding: var(--osma-space-md) var(--osma-space-xs);
  }
  .osma-anfrage-formular {
    padding: var(--osma-space-md);
  }
}
/* Eigene SVG-Icons statt Unicode-Zeichen in den Vorteils-Kreisen */
.osma-vorteil-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--osma-pink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Klare Trennlinie zwischen Text-Sidebar und Formular */
.osma-anfrage-sidebar {
  padding-right: var(--osma-space-lg);
  border-right: 1px solid var(--osma-rand);
}
/* Feinere Typografie-Hierarchie in der Sidebar */
.osma-anfrage-sidebar h2 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}
.osma-anfrage-sidebar > p {
  color: var(--osma-grau);
}
@media (max-width: 900px) {
  .osma-anfrage-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--osma-rand);
    padding-right: 0;
    padding-bottom: var(--osma-space-lg);
    margin-bottom: var(--osma-space-lg);
  }
}
/* ==========================================================================
   29. FILTER-REITER AUF DER REFERENZEN-SEITE
   ========================================================================== */
.osma-filter-reiter {
  display: flex;
  gap: var(--osma-space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.osma-filter-reiter a {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--osma-rand);
  color: var(--osma-grau-dunkel);
  font-weight: 600;
  font-size: var(--osma-font-size-klein);
}
.osma-filter-reiter a:hover,
.osma-filter-reiter a.ist-aktiv {
  background: var(--osma-pink);
  border-color: var(--osma-pink);
  color: var(--osma-weiss);
  text-decoration: none;
}
/* ==========================================================================
   30. DAS UNSICHTBARE "Δ"-ZEICHEN VON CONTACT FORM 7 WIRKLICH UNSICHTBAR MACHEN
   ========================================================================== */
.screen-reader-response {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}
/* ==========================================================================
   31. FEHLER BEHOBEN: FLIESSTEXT IN KARTEN WAR PINK STATT GRAU
   (Karten sind komplett ein <a>-Link, Fließtext erbte die Link-Farbe mit)
   ========================================================================== */
.osma-card p {
  color: var(--osma-grau);
}
.osma-card:hover h3 {
  color: var(--osma-pink);
}
/* ==========================================================================
   32. DEKORATIVES TRENN-ICON (grau, wird beim Hovern pink)
   ========================================================================== */
.osma-icon-divider-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--osma-space-md) 0;
}
.osma-icon-divider {
  width: 40px;
  height: 40px;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
  cursor: default;
}
.osma-icon-divider:hover {
  filter: grayscale(0%) opacity(1);
}
/* ==========================================================================
   33. DEZENTER KREIS HINTER DEN KARTEN (statt der Zwischen-Icons)
   Ein großer, weicher Kreis lugt unten rechts hinter jeder Karte hervor -
   halb verdeckt vom weißen Kartenhintergrund, halb sichtbar über den Rand hinaus.
   ========================================================================== */
.osma-card {
  position: relative;
}
.osma-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  background-image: url('images/osma-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  z-index: -1;
}
/* Verhindert, dass sich Kreise benachbarter Karten in engen Rastern überlappen */
.osma-card-grid {
  overflow: visible;
}
/* ==========================================================================
   34. REICHERER HERO-EINSTIEG (Badge-Zeile + nummerierte Punkte)
   Wiederverwendbar für Referenzen, später auch Produkte
   ========================================================================== */
.osma-badge-reihe {
  display: flex;
  justify-content: center;
  gap: var(--osma-space-xs);
  flex-wrap: wrap;
}
.osma-badge {
  background: var(--osma-grau-hell);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: var(--osma-font-size-klein);
  font-weight: 600;
  color: var(--osma-grau-dunkel);
}
.osma-nummeriert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--osma-space-md);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.osma-nummeriert {
  text-align: center;
}
.osma-nummer {
  display: block;
  font-size: var(--osma-font-size-klein);
  font-weight: 800;
  color: var(--osma-pink);
  margin-bottom: 6px;
}
.osma-nummeriert h3 {
  font-size: var(--osma-font-size-basis);
  margin-bottom: 4px;
}
.osma-nummeriert p {
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
}
/* ==========================================================================
   35. HERO-BANNER: RAHMT BADGE-ZEILE + NUMMERIERTE PUNKTE ALS EINEN BLOCK
   Vorher schwebten diese Elemente unverbunden im leeren Raum - jetzt bilden
   sie eine erkennbare, bewusst gestaltete Fläche.
   ========================================================================== */
.osma-hero-banner {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
}
.osma-hero-banner .osma-badge-reihe {
  justify-content: center;
  margin-bottom: var(--osma-space-lg);
}
.osma-hero-banner .osma-badge {
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
}
.osma-hero-banner .osma-nummeriert-grid {
  margin: 0;
  max-width: none;
}
.osma-hero-banner .osma-nummeriert:not(:last-child) {
  border-right: 1px solid var(--osma-rand);
}
@media (max-width: 900px) {
  .osma-hero-banner .osma-nummeriert:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--osma-rand);
    padding-bottom: var(--osma-space-md);
    margin-bottom: var(--osma-space-md);
  }
}
/* ==========================================================================
   36. PRODUKTKARTEN: BILD MIT KÜRZEL-BADGE OBEN LINKS
   ========================================================================== */
.osma-produkt-bild-wrapper {
  position: relative;
  margin-bottom: var(--osma-space-sm);
}
.osma-produkt-bild-wrapper img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--osma-radius);
  margin-bottom: 0;
}
.osma-produkt-kuerzel {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--osma-pink);
  color: var(--osma-weiss);
  font-weight: 800;
  font-size: 13px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.osma-mb-sm {
  margin-bottom: var(--osma-space-sm);
}
.osma-card ul {
  padding-left: 20px;
  margin-bottom: var(--osma-space-md);
  color: var(--osma-grau);
  font-size: var(--osma-font-size-klein);
}
/* ==========================================================================
   37. PRODUKTKARTEN-RASTER KORRIGIEREN: 5 SPALTEN STATT 4
   10 Karten ÷ 5 = exakt 2 volle Zeilen, keine unvollständige letzte Zeile mehr.
   ========================================================================== */
.osma-produkt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--osma-space-md);
}
@media (max-width: 900px) {
  .osma-produkt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .osma-produkt-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   38. EINHEITLICHER BILD-TON AUF DEN PRODUKTKARTEN
   Ein durchgängiger, dunkler Verlauf am unteren Bildrand gleicht helle und
   dunkle Fotos optisch an - wirkt als EIN System statt zusammengewürfelt.
   ========================================================================== */
.osma-produkt-bild-wrapper {
  position: relative;
  margin-bottom: var(--osma-space-sm);
  border-radius: var(--osma-radius);
  overflow: hidden;
  background: var(--osma-grau-hell);
  display: flex;
  align-items: center;
  justify-content: center;
}
.osma-produkt-bild-wrapper img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
  margin-bottom: 0;
}
/* Kein abdunkelnder Verlauf mehr: die echten Produktfotos (Montage-/
   Katalogaufnahmen von osma.at) sind unterschiedlich hell/kontrastreich -
   ein Verlauf machte sie eher schmutzig als einheitlich. object-fit:contain
   + heller Hintergrund statt hartem Zuschnitt sorgt für saubere, konsistente
   Kacheln unabhängig vom Seitenverhältnis des jeweiligen Originalfotos. */
.osma-produkt-kuerzel {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--osma-pink);
  color: var(--osma-weiss);
  font-weight: 800;
  font-size: 13px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* ==========================================================================
   39. ICONS FÜR "WARUM OSMA" UND DEN 4-SCHRITTE-BEREICH
   ========================================================================== */
.osma-trust-icon,
.osma-schritt-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--osma-pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--osma-space-sm) auto;
}
.osma-trust-icon svg,
.osma-schritt-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--osma-pink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ==========================================================================
   40. WICHTIGE KORREKTUR: BUTTONS IN KARTEN IMMER AUF GLEICHER HÖHE
   Betrifft alle .osma-card-Elemente site-weit - der Button sitzt jetzt
   immer ganz unten, unabhängig davon, wie viel Text darüber steht.
   ========================================================================== */
.osma-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.osma-card .osma-btn {
  margin-top: auto;
  align-self: flex-start;
}
/* ==========================================================================
   41. NEUER HERO FÜR DIE PRODUKTSEITE: ZWEISPALTIG MIT KENNZAHLEN-PANEL
   ========================================================================== */
.osma-produkt-hero {
  background: linear-gradient(135deg, var(--osma-grau-dunkel) 0%, #2a323a 100%);
  padding: var(--osma-space-xxl) 0;
  position: relative;
  overflow: hidden;
}
.osma-produkt-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  background-image: url('images/osma-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.08;
}
.osma-produkt-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--osma-space-xl);
  align-items: center;
  position: relative;
  z-index: 1;
}
.osma-produkt-hero-text h1 {
  color: var(--osma-weiss);
  font-size: var(--osma-font-size-h1);
  margin-bottom: var(--osma-space-sm);
}
.osma-produkt-hero-text p {
  color: rgba(255,255,255,0.85);
  font-size: var(--osma-font-size-gross);
  margin-bottom: var(--osma-space-md);
}
.osma-produkt-hero-stats {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--osma-space-md);
}
.osma-produkt-hero-stat span {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--osma-pink);
  line-height: 1;
}
.osma-produkt-hero-stat p {
  color: rgba(255,255,255,0.8);
  font-size: var(--osma-font-size-klein);
  margin: 4px 0 0 0;
}
@media (max-width: 900px) {
  .osma-produkt-hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .osma-produkt-hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .osma-produkt-hero-stat {
    flex: 1;
    min-width: 120px;
  }
}
/* ==========================================================================
   42. REICHERER ABSCHLUSS-CTA: ZWEISPALTIG MIT ZWEI BUTTONS
   ========================================================================== */
.osma-cta-band-reich {
  position: relative;
  overflow: hidden;
}
.osma-cta-band-reich::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 260px;
  height: 260px;
  background-image: url('images/osma-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.08;
}
.osma-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--osma-space-lg);
  align-items: center;
  text-align: left;
  position: relative;
  z-index: 1;
}
.osma-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--osma-space-sm);
}
.osma-cta-buttons .osma-btn {
  width: 100%;
  text-align: center;
}
@media (max-width: 700px) {
  .osma-cta-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* ==========================================================================
   43. HERO NEU: EYEBROW, DIAGONALES AKZENT-ELEMENT, ICONS IN DEN KENNZAHLEN
   ========================================================================== */
.osma-eyebrow-hell {
  color: var(--osma-pink);
}
.osma-produkt-hero-akzent {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg, rgba(214,3,106,0.18) 0%, rgba(214,3,106,0) 60%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.osma-produkt-hero-text h1 {
  font-size: 3rem;
  line-height: 1.15;
}
@media (max-width: 600px) {
  .osma-produkt-hero-text h1 {
    font-size: 2.1rem;
    line-height: 1.2;
  }
}
@media (max-width: 400px) {
  .osma-produkt-hero-text h1 {
    font-size: 1.85rem;
  }
}
.osma-produkt-hero-stats {
  border-top: 3px solid var(--osma-pink);
}
.osma-produkt-hero-stat {
  display: flex;
  align-items: center;
  gap: var(--osma-space-sm);
}
.osma-produkt-hero-stat-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: rgba(214,3,106,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.osma-produkt-hero-stat-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--osma-pink);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.osma-produkt-hero-stat span {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--osma-pink);
  line-height: 1;
}
.osma-produkt-hero-stat p {
  color: rgba(255,255,255,0.8);
  font-size: var(--osma-font-size-klein);
  margin: 2px 0 0 0;
}
/* Sicherstellen, dass der Sekundär-Button im Hero volle Deckkraft hat */
.osma-produkt-hero .osma-btn-secondary {
  color: var(--osma-weiss);
  border-color: var(--osma-weiss);
  opacity: 1;
}
/* ==========================================================================
   44. "WARUM OSMA"-PUNKTE: DEZENTE EIGENE FLÄCHE STATT FREI SCHWEBEND
   ========================================================================== */
.osma-warum-osma-grid > div {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-md);
}
.osma-warum-osma-grid .osma-trust-icon {
  background: var(--osma-weiss);
}
/* ==========================================================================
   45. ÜBERGANG HERO -> PRODUKTBEREICHE: ENGER UND MIT EYEBROW VERANKERT
   ========================================================================== */
.osma-produkt-hero + .osma-section {
  padding-top: var(--osma-space-lg);
}
.osma-produktbereiche-intro {
  max-width: 700px;
  margin: 0 auto var(--osma-space-lg) auto;
}
.osma-produktbereiche-intro .osma-eyebrow {
  margin-bottom: 4px;
}
.osma-produktbereiche-intro h2 {
  margin-bottom: var(--osma-space-sm);
}
/* ==========================================================================
   46. STARTSEITE: HERO MIT HINTERGRUNDFOTO (statt reinem Verlauf)
   ========================================================================== */
.osma-hero-foto {
  background:
    linear-gradient(120deg, rgba(59,70,80,.94) 0%, rgba(59,70,80,.86) 45%, rgba(59,70,80,.6) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Trocknersysteme-GmbH-Hederbild-Website-1536x1024.jpg') center/cover no-repeat;
}
/* ==========================================================================
   63. PRODUKTSEITE: ECHTES FOTO STATT REINEM VERLAUF IM HERO
   Nur dunkler Verlauf + Textblock wirkte wie eine generische Software-Hero.
   Ein echtes OSMA-Installationsfoto macht sofort klar: hier geht's um echte,
   gefertigte Geräte, nicht um abstrakte Dienstleistung.
   ========================================================================== */
.osma-service-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Buerogebaeude-links-1536x1024.jpg');
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
  background-repeat: repeat, no-repeat;
}
.osma-berechnungshilfe-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/osma-desinfiziertrockenschrank-dts-hero.jpg');
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
  background-repeat: repeat, no-repeat;
}
/* Fix: Berechnungshilfe-Seite (post 9158) nutzt page.php und ist dadurch doppelt in .osma-container verschachtelt. Hero muss aus dem Container ausbrechen, sonst wirkt die Seite auf breiten Screens wie eine schmale Mobile-Ansicht. */
body.page-id-9158 .osma-produkt-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.osma-vertriebspartner-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Produktion-von-Mallnitz-kommend-1536x1024.jpg');
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
  background-repeat: repeat, no-repeat;
}
.osma-produkt-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Kleidertrockenschrank-KTS2000-1536x1024.png') center/cover no-repeat;
}
/* ==========================================================================
   69. HERO-VEREINHEITLICHUNG: REFERENZEN + UNTERNEHMEN BEKOMMEN ECHTE FOTOS
   Vorher einziger Bruch auf der Website: Startseite und Produkte hatten ein
   echtes Foto im Hero, Referenzen nur den reinen Verlauf (wirkte "grau") und
   Unternehmen einen komplett anderen hellen Zweispalter mit Maskottchen.
   Beide Fotos kommen aus der eigenen Mediathek (neu.osma.at, Juli-2026-Upload):
   "OSMA Bürogebäude front" (Firmengebäude Obervellach, Wallbild) und
   "OSMA Produktion mit Teilflotte" (Fuhrpark vor der Produktionshalle).
   Damit ist die Bildsprache jetzt auf jeder Hero-Seite dieselbe: dunkler
   Verlauf + echtes, hochauflösendes OSMA-Foto aus der eigenen Mediathek.
   ========================================================================== */
.osma-unternehmen-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Buerogebaeude-front-1536x1024.jpg') center/cover no-repeat;
}
.osma-referenz-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Produktion-mit-Teilflotte-1536x1024.jpg') center/cover no-repeat;
}
.osma-kontakt-hero-foto {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Buerogebaeude-rechts-1536x1024.jpg') center/cover no-repeat;
}
/* ==========================================================================
   76. BRANCHEN-LANDINGPAGES: EIGENE HERO-FOTOS JE BRANCHE
   Gleiches Muster wie 69. oben (dunkler Verlauf + echtes OSMA-Foto aus der
   eigenen Mediathek), je Branche ein passendes, bereits vorhandenes Produktfoto
   statt eines neuen Foto-Shootings.
   ========================================================================== */
.osma-branchen-hero-hotellerie {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/Skistaender-SS2800-1600x900.jpg') center/cover no-repeat;
}
.osma-branchen-hero-feuerwehr {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Feuerwehrschrank-Talent2000-Atemschutz-1536x1024.png') center/cover no-repeat;
}
.osma-branchen-hero-industrie {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Kleidertrockenschrank-KTS2000-1536x1024.png') center/cover no-repeat;
}
.osma-branchen-hero-privat {
  background:
    linear-gradient(120deg, rgba(43,52,60,.93) 0%, rgba(43,52,60,.88) 45%, rgba(43,52,60,.72) 100%),
    url('https://neu.osma.at/wp-content/uploads/2026/07/OSMA-Schuhtrockner-Family-1536x1024.png') center/cover no-repeat;
}
/* ==========================================================================
   77. PLAYWASH: EIGENE MARKEN-KENNZEICHNUNG
   PlayWash ist eine eigene Marke mit eigener Website (playwash.at), nicht nur
   ein OSMA Produktbereich - deshalb eigenes Marken-Badge auf Produktkarten
   und im Maskottchen-Banner. Zeigt das echte PlayWash-Logo (aus dem
   Mediathek-Upload playwash_600dpi.PNG-scaled.png) auf einem weißen
   Pillen-Untergrund, damit es auch über Produktfotos lesbar bleibt.
   ========================================================================== */
.osma-playwash-badge {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e5e8;
}
.osma-playwash-badge img {
  display: block;
  height: 14px;
  width: auto;
}
.osma-produkt-bild-wrapper .osma-playwash-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(10,126,166,.18);
}
/* Auf Übersichtskarten (Startseite, Produkte-Übersicht, Branchen-Kacheln)
   bewusst KEIN Logo-Badge mehr - wirkte dort zu unruhig neben den anderen,
   einheitlich gestalteten Produktkarten. Das echte PlayWash-Branding gibt
   es stattdessen konzentriert auf der eigenen PlayWash-Produktseite (siehe
   Abschnitt "80. PLAYWASH-PRODUKTSEITE"). */

/* ==========================================================================
   80. PLAYWASH-PRODUKTSEITE: EIGENE MARKENFARBEN
   PlayWash ist eine eigenständige Marke mit eigener Website (playwash.at) -
   auf der eigenen Produktseite (single-osma_produkt.php, Slug "playwash")
   bekommt sie deshalb ihr echtes Logo im Hero und einen eigenen blauen
   Marken-Akzent (aus dem PlayWash-Logo abgeleitet) statt des sonst
   verwendeten OSMA-Pink - bewusst nur dort, damit der restliche Katalog
   einheitlich bleibt.
   ========================================================================== */
.osma-playwash-logo-hero {
  display: block;
  height: 42px;
  width: auto;
  margin-bottom: var(--osma-space-sm);
}
.osma-playwash-akzent {
  background: linear-gradient(120deg, #eef1fb 0%, #fdeaf3 100%);
  border-top: 3px solid #304890;
  border-bottom: 3px solid #304890;
}
.osma-playwash-akzent .osma-eyebrow,
.osma-playwash-akzent .osma-eyebrow-hell {
  color: #e40078;
}
.osma-playwash-akzent h1,
.osma-playwash-akzent h2 {
  color: #253a72;
}
.osma-playwash-akzent .osma-btn-primary {
  background: #e40078;
  border-color: #e40078;
}
.osma-playwash-akzent .osma-btn-primary:hover {
  background: #b8005f;
  border-color: #b8005f;
}
.osma-playwash-akzent .osma-btn-secondary {
  border-color: #304890;
  color: #304890;
}
.osma-playwash-akzent .osma-btn-secondary:hover {
  background: #304890;
  color: var(--osma-weiss);
}
/* ==========================================================================
   78. ANFRAGE-SEITE: FRED FÖHN ALS EIGENE ZEILE UNTER DEM FORMULAR
   Zwei frühere Versuche (wippende Sprechblase, dann eine kleine statische
   Variante in der Sidebar) haben nicht funktioniert - beide Male wirkte Fred
   fehlplatziert. Jetzt keine eigenen Klassen mehr nötig: die Seite nutzt
   direkt das bewährte .osma-bereich-intro-mit-maskottchen-Muster (siehe
   Abschnitt weiter oben), das auf Unternehmen/Produkte/Branchen bereits gut
   funktioniert.
   ========================================================================== */
.osma-unternehmen-hero-maskottchen {
  align-items: center;
  justify-content: center;
  gap: var(--osma-space-sm);
  text-align: center;
}
.osma-unternehmen-hero-maskottchen img {
  max-height: 260px;
  width: auto;
  object-fit: contain;
}
.osma-unternehmen-hero-maskottchen-label {
  margin: 0;
  font-size: var(--osma-font-size-klein);
  color: rgba(255,255,255,.85);
  font-weight: 600;
}
/* ==========================================================================
   47. VERTRAUENS-LEISTE UNTER DEM HERO
   ========================================================================== */
.osma-vertrauensleiste {
  background: var(--osma-weiss);
  border-bottom: 1px solid var(--osma-rand);
  padding: var(--osma-space-sm) 0;
}
.osma-vertrauensleiste-liste {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--osma-space-sm);
}
.osma-vertrauensleiste-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--osma-font-size-klein);
  font-weight: 600;
  color: var(--osma-grau-dunkel);
}
.osma-vertrauensleiste-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--osma-pink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* ==========================================================================
   48. VERGLEICHSTABELLE "WARUM OSMA STATT KATALOGWARE"
   ========================================================================== */
.osma-vergleich {
  background: var(--osma-grau-dunkel);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
  color: var(--osma-weiss);
}
.osma-vergleich h2,
.osma-vergleich .osma-eyebrow,
.osma-vergleich > p {
  color: var(--osma-weiss);
}
.osma-vergleich > p {
  opacity: .8;
}
table.osma-vergleich-tabelle {
  width: 100%;
  border-collapse: collapse;
}
table.osma-vergleich-tabelle th,
table.osma-vergleich-tabelle td {
  padding: 14px;
  text-align: left;
  font-size: var(--osma-font-size-klein);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
table.osma-vergleich-tabelle th {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
table.osma-vergleich-tabelle th.osma-hervorgehoben,
table.osma-vergleich-tabelle td.osma-hervorgehoben {
  background: rgba(214,3,106,.16);
}
table.osma-vergleich-tabelle th.osma-hervorgehoben {
  color: var(--osma-pink-light);
}
.osma-check { color: var(--osma-pink-light); font-weight: 700; }
.osma-kreuz { color: rgba(255,255,255,.35); font-weight: 700; }
.osma-teils { color: rgba(255,255,255,.6); font-weight: 700; }
.osma-vergleich-hinweis {
  margin-top: var(--osma-space-sm);
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
/* Berechnungshilfe Desinfektion (Seite 9158) laeuft uebergangsweise ueber
   das Standard-Seiten-Template (eigene page-{slug}.php ist noch nicht auf
   den Server synced) und bekommt dadurch automatisch eine Standard-
   Ueberschrift. Der Custom-HTML-Block auf der Seite bringt aber schon
   seinen eigenen Hero-Titel mit - die doppelte Ueberschrift wird hier
   ausgeblendet. */
.post-9158 > h1 {
  display: none;
}
/* Auf Mobile ist die Tabelle breiter als der Bildschirm und wuerde sonst
   einfach am Rand abgeschnitten werden - deshalb hier horizontal
   scrollbar gemacht (Inhalt bleibt unveraendert lesbar, keine Zeilenumbrueche
   in den Zellen). */
@media (max-width: 768px) {
  table.osma-vergleich-tabelle {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.osma-vergleich-tabelle th,
  table.osma-vergleich-tabelle td {
    white-space: nowrap;
  }
}
/* ==========================================================================
   49. ZITAT-KARTEN FÜR REFERENZEN (statt reiner Platzhalter-Box)
   ========================================================================== */
.osma-zitat-karte {
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-md);
  text-align: left;
}
.osma-zitat-zeichen {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--osma-pink-light);
  line-height: 1;
  margin-bottom: 4px;
}
.osma-zitat-text {
  font-style: italic;
  color: var(--osma-grau-dunkel);
  font-size: var(--osma-font-size-klein);
  margin-bottom: var(--osma-space-xs);
}
.osma-zitat-person {
  font-size: 13px;
  font-weight: 700;
  color: var(--osma-grau);
}
.osma-zitat-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  background: var(--osma-pink-light);
  color: var(--osma-pink-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
}
/* ==========================================================================
   50. MOBILE STICKY-CTA-LEISTE (nur Startseite)
   ========================================================================== */
.osma-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--osma-weiss);
  border-top: 1px solid var(--osma-rand);
  padding: 12px 16px;
  gap: 10px;
  box-shadow: var(--osma-schatten-hover);
}
.osma-mobile-cta .osma-btn {
  flex: 1;
  padding: 12px 16px;
}
@media (max-width: 1024px) {
  .osma-mobile-cta {
    display: flex;
  }
  body {
    padding-bottom: 76px;
  }
  .osma-kontakt-widget {
    bottom: 76px;
  }
}
/* ==========================================================================
   51. BRANCHEN-KACHELN MIT FOTO
   Fotokacheln statt Icon-Karten, damit "Branchen" sich klar von "Warum OSMA"
   und "Ablauf" unterscheidet - sonst wirken alle drei Blöcke identisch.
   ========================================================================== */
.osma-branchen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--osma-space-md);
}
.osma-branchen-kachel {
  position: relative;
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: var(--osma-weiss);
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease;
}
.osma-branchen-kachel:hover {
  transform: translateY(-4px);
}
.osma-branchen-kachel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59,70,80,.15) 0%, rgba(20,24,28,.88) 100%);
}
.osma-branchen-kachel-inhalt {
  position: relative;
  z-index: 1;
  padding: var(--osma-space-md);
}
.osma-branchen-kachel-icon {
  font-size: 26px;
  margin-bottom: 8px;
  display: block;
}
.osma-branchen-kachel h3 {
  color: var(--osma-weiss);
  font-size: var(--osma-font-size-gross);
  margin-bottom: 6px;
}
.osma-branchen-kachel p {
  color: rgba(255,255,255,.82);
  font-size: var(--osma-font-size-klein);
  margin: 0;
}
@media (max-width: 900px) {
  .osma-branchen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .osma-branchen-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   52. ABLAUF ALS NUMMERIERTE LISTE STATT ICON-KARTEN
   Bewusst andere Bildsprache als "Warum OSMA" (keine Kreis-Icons), damit
   beim Scrollen nicht drei optisch identische Blöcke hintereinander kommen.
   ========================================================================== */
.osma-schritt-liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--osma-space-md);
  position: relative;
}
.osma-schritt-liste::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: var(--osma-rand);
}
.osma-schritt {
  position: relative;
}
.osma-schritt-zahl {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--osma-pink);
  background: var(--osma-weiss);
  padding-right: 12px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.osma-schritt h3 {
  font-size: var(--osma-font-size-basis);
  margin-bottom: 4px;
}
.osma-schritt p {
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
  margin: 0;
}
.osma-bg-hell .osma-schritt-zahl {
  background: var(--osma-grau-hell);
}
@media (max-width: 900px) {
  .osma-schritt-liste { grid-template-columns: repeat(2, 1fr); row-gap: var(--osma-space-lg); }
  .osma-schritt-liste::before { display: none; }
}
@media (max-width: 600px) {
  .osma-schritt-liste { grid-template-columns: 1fr; }
}
/* ==========================================================================
   53. PRODUKTKARTEN OHNE KÜRZEL-BADGE
   Die runden ST/TS/SK-Kürzel lasen wie Lager-/SKU-Codes statt Premium-Marke.
   Foto + klare Typografie tragen die Wirkung jetzt allein.
   ========================================================================== */
.osma-produkt-bild-wrapper .osma-produkt-kuerzel {
  display: none;
}
/* ==========================================================================
   54. PAGINATION IM DESIGNSYSTEM (falls mehr Produkte dazukommen)
   ========================================================================== */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--osma-space-lg);
}
.pagination .page-numbers,
.nav-links .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  color: var(--osma-grau-dunkel);
  font-weight: 600;
  font-size: var(--osma-font-size-klein);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--osma-pink);
  border-color: var(--osma-pink);
  color: var(--osma-weiss);
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
  border-color: var(--osma-pink);
  color: var(--osma-pink);
  text-decoration: none;
}
/* ==========================================================================
   55. TAXONOMIE-ARCHIV (taxonomy-osma_zielgruppe.php) SOLL SICH IN DIE
   PRODUKT-OPTIK EINFÜGEN, FALLS DORT DIESELBEN KLASSEN VERWENDET WERDEN
   ========================================================================== */
.osma-filter-reiter a.ist-aktiv {
  background: var(--osma-pink);
  border-color: var(--osma-pink);
  color: var(--osma-weiss);
}
/* ==========================================================================
   56. PRODUKTSEITE: SPOTLIGHT FÜR DEN ERSTEN PRODUKTBEREICH
   Ein groß ausgestelltes erstes Element vor dem regulären Karten-Raster
   erzeugt eine klare Hierarchie statt einer gleichförmigen Kachelwand -
   typisch für hochwertige Produktkataloge.
   ========================================================================== */
.osma-produkt-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--osma-space-lg);
  align-items: stretch;
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
  margin-bottom: var(--osma-space-lg);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.osma-produkt-spotlight:hover {
  box-shadow: var(--osma-schatten-hover);
}
.osma-produkt-spotlight-bild {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.osma-produkt-spotlight-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.5s ease;
}
.osma-produkt-spotlight:hover .osma-produkt-spotlight-bild img {
  transform: scale(1.05);
}
.osma-produkt-spotlight-inhalt {
  padding: var(--osma-space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.osma-produkt-spotlight-badge {
  display: inline-block;
  background: var(--osma-pink);
  color: var(--osma-weiss);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  width: fit-content;
}
.osma-produkt-spotlight-inhalt h3 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.osma-produkt-spotlight-inhalt p {
  color: var(--osma-grau);
  margin-bottom: var(--osma-space-sm);
}
@media (max-width: 900px) {
  .osma-produkt-spotlight { grid-template-columns: 1fr; }
  .osma-produkt-spotlight-bild { min-height: 220px; }
}
/* ==========================================================================
   57. PRODUKTKARTEN: BILD-ZOOM BEIM HOVER + "MEHR ERFAHREN"-HINWEIS
   Dezente Bewegung beim Hover signalisiert Sorgfalt und Qualität und macht
   die Klickbarkeit der ganzen Karte spürbar.
   ========================================================================== */
.osma-produkt-grid .osma-card {
  display: flex;
  flex-direction: column;
}
.osma-produkt-grid .osma-produkt-bild-wrapper img {
  transition: transform 0.45s ease;
}
.osma-produkt-grid .osma-card:hover .osma-produkt-bild-wrapper img {
  transform: scale(1.07);
}
.osma-produkt-grid .osma-card p {
  flex-grow: 1;
}
.osma-produkt-mehr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--osma-pink);
  margin-top: 10px;
}
.osma-produkt-mehr svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.osma-produkt-grid .osma-card:hover .osma-produkt-mehr svg {
  transform: translateX(4px);
}
/* ==========================================================================
   58. HERKUNFTS-BADGE AUF PRODUKTKARTEN ("100% Made in Austria")
   Wiederholt das Vertrauenssignal genau dort, wo die Kaufentscheidung
   getroffen wird, statt es nur einmal im Hero zu zeigen.
   ========================================================================== */
.osma-produkt-herkunft {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: var(--osma-grau-dunkel);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
}
/* ==========================================================================
   59. PRODUKTSEITE: VERTRAUENSLEISTE UNTER DEM HERO
   Dieselbe Leiste wie auf der Startseite direkt über der Produktübersicht -
   schafft ein durchgängiges System statt Einzelseiten mit eigener Logik.
   ========================================================================== */
.osma-produkt-hero + .osma-vertrauensleiste {
  border-bottom: 1px solid var(--osma-rand);
}
/* ==========================================================================
   60. "SCHNELLER ZUR LÖSUNG": FOTOKACHELN STATT EMOJI-KARTEN
   Verhindert, dass Produktseite und Startseite den gleichen Icon-in-Kreis-
   Rhythmus zweimal hintereinander zeigen (vgl. Abschnitt "Praxisbedingungen"
   direkt darunter, der bewusst bei Icon-Karten bleibt).
   ========================================================================== */
.osma-loesung-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--osma-space-md);
}
@media (max-width: 900px) {
  .osma-loesung-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .osma-loesung-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   61. PRODUKTSEITE: KATEGORIE-KARTEN
   Vorher lagen alle 7 Produktbereiche als eine lange, durchgehende Liste auf
   einer Seite ("alles in einer Wurst"). Jetzt zeigt /produkte/ eine
   Kartenübersicht der Bereiche (Foto vom ersten Produkt, Titel, Kurztext,
   Produktanzahl) - jede Karte führt auf eine eigene, gefilterte Seite
   (?kategorie=<slug>) mit eigenem Hero-Header nur für diesen einen Bereich.
   ========================================================================== */
.osma-kategorie-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--osma-space-md);
  margin-top: var(--osma-space-lg);
}
.osma-kategorie-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.osma-kategorie-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43,52,60,.12);
  border-color: var(--osma-pink);
}
.osma-kategorie-karte-bild {
  height: 190px;
  background: var(--osma-grau-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.osma-kategorie-karte-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.osma-kategorie-karte-inhalt {
  padding: var(--osma-space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.osma-kategorie-karte-inhalt h3 {
  font-size: var(--osma-font-size-gross);
  margin-bottom: 6px;
}
.osma-kategorie-karte-inhalt p {
  color: var(--osma-grau);
  margin: 0 0 var(--osma-space-sm) 0;
  flex: 1;
}
@media (max-width: 900px) {
  .osma-kategorie-karten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .osma-kategorie-karten { grid-template-columns: 1fr; }
}
/* Bereichsseite (?bereich=...) mit mehreren Kategorien: zeigt das Endergebnis
   (echte Produkte) direkt, mit einer Zwischen-Überschrift pro Kategorie. */
.osma-produktkategorie + .osma-produktkategorie {
  padding-top: var(--osma-space-lg);
  margin-top: var(--osma-space-lg);
  border-top: 1px solid var(--osma-rand);
}
.osma-produktkategorie-kopf {
  margin: var(--osma-space-md) 0;
}
.osma-produktkategorie-kopf h3 {
  font-size: var(--osma-font-size-gross);
  margin-bottom: 4px;
}
.osma-produktkategorie-kopf p {
  color: var(--osma-grau);
  margin: 0;
}
/* ==========================================================================
   62. EINZELNE PRODUKTSEITE (single-osma_produkt.php)
   Bisher fiel eine einzelne Produktseite auf die unformatierte WordPress-
   Standardansicht zurück. Diese Sektion bringt Breadcrumb, Bild+Text-Hero,
   Inhalts-Typografie und Kontaktkarte ins bestehende Designsystem.
   ========================================================================== */
.osma-breadcrumb {
  background: var(--osma-grau-hell);
  border-bottom: 1px solid var(--osma-rand);
  padding: 12px 0;
  font-size: 13px;
  color: var(--osma-grau);
}
.osma-breadcrumb a {
  color: var(--osma-grau);
  text-decoration: none;
}
.osma-breadcrumb a:hover {
  color: var(--osma-pink);
}
.osma-breadcrumb span {
  margin: 0 6px;
}
.osma-breadcrumb-aktuell {
  color: var(--osma-grau-dunkel);
  font-weight: 600;
}
.osma-produkt-single-hero {
  padding: var(--osma-space-xl) 0;
  background: var(--osma-weiss);
}
.osma-produkt-single-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--osma-space-xl);
  align-items: center;
}
.osma-produkt-single-bild {
  position: relative;
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
  box-shadow: var(--osma-schatten);
  background: var(--osma-grau-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.osma-produkt-single-bild img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
  display: block;
}
.osma-produkt-single-text h1 {
  margin-top: 8px;
  margin-bottom: 14px;
}
.osma-produkt-single-lead {
  font-size: var(--osma-font-size-gross);
  color: var(--osma-grau-dunkel);
  margin-bottom: var(--osma-space-md);
}
@media (max-width: 900px) {
  .osma-produkt-single-hero-grid { grid-template-columns: 1fr; }
  .osma-produkt-single-bild { order: -1; }
}
.osma-produkt-single-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--osma-space-xl);
  align-items: start;
}
@media (max-width: 900px) {
  .osma-produkt-single-layout { grid-template-columns: 1fr; }
}
.osma-produkt-inhalt p {
  margin-bottom: var(--osma-space-sm);
  color: var(--osma-grau-dunkel);
  line-height: var(--osma-zeilenhoehe);
}
.osma-produkt-inhalt ul {
  margin: 0 0 var(--osma-space-md) 0;
  padding-left: 20px;
}
.osma-produkt-inhalt li {
  margin-bottom: 6px;
  color: var(--osma-grau-dunkel);
  line-height: var(--osma-zeilenhoehe);
}
.osma-produkt-inhalt strong {
  color: var(--osma-grau-dunkel);
}
.osma-produkt-inhalt a {
  color: var(--osma-pink);
  font-weight: 600;
  text-decoration: none;
}
.osma-produkt-inhalt a:hover {
  text-decoration: underline;
}
.osma-produkt-kontaktkarte {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-md);
  position: sticky;
  top: 24px;
}
.osma-produkt-kontaktkarte h3 {
  margin-bottom: 8px;
}
.osma-produkt-kontaktkarte p {
  color: var(--osma-grau);
  font-size: var(--osma-font-size-klein);
  margin-bottom: var(--osma-space-sm);
}

/* 64: Zurück-Link auf der Produkte-Hero, sichtbar bei gefilterter Einsatzbereich-Ansicht (?bereich=...) */
.osma-zurueck-link {
  display: inline-block;
  margin-bottom: var(--osma-space-sm);
  color: rgba(255,255,255,.85);
  font-size: var(--osma-font-size-klein);
  font-weight: 600;
  text-decoration: none;
}
.osma-zurueck-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   65. SEITE "UNTERNEHMEN" (page-unternehmen.php)
   Fehlender Vertrauensbaustein "Wer steckt dahinter": Firmenporträt-Fließtext
   und ein echtes Team-Raster mit 13 Personen, Fotos von osma.at/unternehmen/.
   ========================================================================== */
.osma-fliesstext p {
  color: var(--osma-grau-dunkel);
  line-height: var(--osma-zeilenhoehe);
  margin-bottom: var(--osma-space-md);
}
.osma-fliesstext p:last-child {
  margin-bottom: 0;
}
.osma-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--osma-space-md);
  margin-top: var(--osma-space-lg);
}
.osma-team-karte {
  text-align: center;
}
.osma-team-karte-bild {
  aspect-ratio: 1 / 1;
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
  background: var(--osma-grau-hell);
  margin-bottom: var(--osma-space-sm);
}
.osma-team-karte-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.osma-team-karte-platzhalter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--osma-grau);
  background: var(--osma-grau-hell);
}
.osma-team-karte h4 {
  font-size: var(--osma-font-size-klein);
  margin-bottom: 2px;
}
.osma-team-karte p {
  color: var(--osma-grau);
  font-size: 12px;
  margin: 0;
}
/* Team nach Abteilung gruppiert (statt einer einzigen langen Liste) -
   jede Abteilung bekommt eine kleine Eyebrow-Überschrift mit Trennlinie. */
.osma-team-abteilung {
  margin-top: var(--osma-space-xl);
}
.osma-team-abteilung:first-child {
  margin-top: 0;
}
.osma-team-abteilung-titel {
  color: var(--osma-pink);
  font-weight: 700;
  font-size: var(--osma-font-size-klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--osma-space-xs);
  margin: 0 0 var(--osma-space-md);
  border-bottom: 1px solid var(--osma-grau-hell);
}
@media (max-width: 900px) {
  .osma-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .osma-team-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Unternehmen-Hero: bewusst ein echtes Team-Foto statt der Ski-/Produktfotos,
   die schon auf Startseite und Produkte verwendet werden - passender Bezug
   zum Seiteninhalt ("Wer wir sind" statt Produktkatalog). */
.osma-unternehmen-hero {
  padding-top: var(--osma-space-xl);
}
.osma-unternehmen-hero-bild {
  position: relative;
  border-radius: var(--osma-radius-gross);
  overflow: hidden;
}
.osma-unternehmen-hero-bild img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
/* Maskottchen-Variante: Freisteller auf transparentem/weißem Grund statt
   Foto - deshalb eigener Markenhintergrund + object-fit:contain statt
   cover, damit Fred nicht angeschnitten wird. */
.osma-unternehmen-hero-bild-maskottchen {
  background: linear-gradient(160deg, var(--osma-pink) 0%, var(--osma-pink-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.osma-unternehmen-hero-bild-maskottchen img {
  min-height: 0;
  height: auto;
  max-height: 420px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  margin: var(--osma-space-lg) 0;
}
.osma-unternehmen-hero-bildunterschrift {
  position: absolute;
  left: var(--osma-space-md);
  bottom: var(--osma-space-md);
  background: rgba(43,52,60,.85);
  color: #fff;
  font-size: var(--osma-font-size-klein);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}
/* ==========================================================================
   66. MASKOTTCHEN-BANNER (z.B. Panda Putz auf der PlayWash-Produktseite)
   Freisteller-Grafik + kurzer Text, nur auf einzelnen Produktseiten via
   Slug-Bedingung eingeblendet - kein generisches Element, kommt gezielt
   dort zum Einsatz, wo das jeweilige Maskottchen inhaltlich passt.
   ========================================================================== */
.osma-maskottchen-banner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--osma-space-lg);
  align-items: center;
}
.osma-maskottchen-banner-bild {
  width: 100%;
  height: auto;
  display: block;
}
.osma-maskottchen-banner h2 {
  margin-bottom: 8px;
}
.osma-maskottchen-banner p {
  color: var(--osma-grau-dunkel);
  margin: 0;
}
@media (max-width: 700px) {
  .osma-maskottchen-banner { grid-template-columns: 1fr; text-align: center; }
  .osma-maskottchen-banner-bild { max-width: 200px; margin: 0 auto; }
}
/* Feuerwehr-Bereich: Fred steht links, GANZ links im Container (eigene
   Grid-Spur statt Textumbruch-Kollision wie zuvor), beide Textblöcke
   (Bereichs-Intro + "Fred im Einsatz") stehen zusammen in einer Spalte
   rechts daneben, statt ihn zwischen zwei Textblöcke reinragen zu lassen. */
.osma-bereich-intro-mit-maskottchen {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--osma-space-lg);
  align-items: start;
}
.osma-bereich-intro-mit-maskottchen-bild {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  display: block;
}
.osma-bereich-intro-maskottchen-text {
  margin-top: var(--osma-space-md);
  padding-top: var(--osma-space-md);
  border-top: 1px solid var(--osma-rand);
}
.osma-bereich-intro-maskottchen-text h3 {
  font-size: var(--osma-font-size-gross);
  margin-bottom: 4px;
}
.osma-bereich-intro-maskottchen-text p {
  color: var(--osma-grau-dunkel);
  margin: 0;
}
@media (max-width: 700px) {
  .osma-bereich-intro-mit-maskottchen { grid-template-columns: 1fr; }
  .osma-bereich-intro-mit-maskottchen-bild { max-width: 240px; margin: 0 auto; }
}

/* ==========================================================================
   67. RECHTSSEITEN (page-impressum.php & page-datenschutz.php)
   Reiner Lesetext, bewusst schmaler gesetzt als die übrigen Container (max.
   760px) fuer bessere Lesbarkeit langer Absaetze. Fakten-Liste fuer die
   Impressum-Firmendaten (Label/Wert) und ein kleines Sprungmarken-Menue
   fuer die Datenschutz-Abschnitte, beides ohne neue Grundfarben - nur
   bestehende Design-Tokens.
   ========================================================================== */
.osma-rechtstext {
  max-width: 760px;
  margin: 0 auto;
}
.osma-rechtstext h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--osma-space-xl);
  margin-bottom: var(--osma-space-sm);
}
.osma-rechtstext h2:first-child {
  margin-top: 0;
}
.osma-rechts-zahl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--osma-pink-light);
  color: var(--osma-pink);
  font-weight: 800;
  font-size: var(--osma-font-size-klein);
}
.osma-rechtstext h3 {
  font-size: var(--osma-font-size-gross);
  margin-top: var(--osma-space-lg);
  margin-bottom: 8px;
}
.osma-rechtstext ul {
  margin: 0 0 var(--osma-space-md);
  padding-left: 20px;
  color: var(--osma-grau-dunkel);
  line-height: var(--osma-zeilenhoehe);
}
.osma-rechtstext li {
  margin-bottom: 6px;
}
.osma-rechtstext a {
  color: var(--osma-pink);
}
.osma-rechts-stand {
  color: var(--osma-grau);
  font-size: var(--osma-font-size-klein);
  margin-bottom: var(--osma-space-lg);
}
.osma-rechts-fakten {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 16px;
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-md);
  margin: var(--osma-space-md) 0 var(--osma-space-lg);
}
.osma-rechts-fakten dt {
  font-weight: 600;
  color: var(--osma-grau-dunkel);
  overflow-wrap: break-word;
  word-break: break-word;
}
.osma-rechts-fakten dd {
  margin: 0;
  color: var(--osma-grau-dunkel);
}
@media (max-width: 600px) {
  .osma-rechts-fakten { grid-template-columns: 1fr; }
  .osma-rechts-fakten dt { margin-top: var(--osma-space-sm); }
  .osma-rechts-fakten dt:first-child { margin-top: 0; }
}
.osma-rechts-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--osma-space-md) 0 var(--osma-space-xl);
  padding: 0;
  list-style: none;
}
.osma-rechts-inhalt li {
  margin: 0;
}
.osma-rechts-inhalt a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--osma-grau-hell);
  color: var(--osma-grau-dunkel);
  font-size: var(--osma-font-size-klein);
  font-weight: 600;
  text-decoration: none;
}
.osma-rechts-inhalt a:hover {
  background: var(--osma-pink);
  color: #fff;
}
/* Gedämpfter Abschluss-Block statt des bunten Verkaufs-CTA-Banners - auf
   einer Rechtsseite wirkt ein greller Pink-Verlauf mit "Jetzt anfragen"
   deplatziert. Gleiche Bausteine (Karten-Look, Trust-Icon), nur ruhiger. */
.osma-rechts-kontakt {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.osma-rechts-kontakt h2 {
  justify-content: center;
  margin-top: 0;
}
.osma-rechts-kontakt p {
  color: var(--osma-grau-dunkel);
  max-width: 520px;
  margin: 0 auto var(--osma-space-md);
}
.osma-rechts-kontakt .osma-hero-buttons {
  justify-content: center;
}
/* ==========================================================================
   68. FIX: "WEITERE REFERENZEN"-GRID ZIEHT SICH BEI NUR 1 TREFFER AUF VOLLE
   BREITE (CSS-Grid auto-fit koennt zu breit, wenn nur 1 Karte im Set steht -
   z. B. bei seltenen Zielgruppen wie "Apartment / Chalet" mit nur 2 Eintraegen
   insgesamt). Karten werden hier auf max. 340px gedeckelt und zentriert,
   statt sich ueber die volle Containerbreite zu strecken.
   ========================================================================== */
.osma-card-grid.osma-referenz-weitere-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: center;
}
/* ==========================================================================
   71. FIX: GLEICHES PROBLEM AUF DER KONTAKTSEITE (5 "ANLIEGEN"-KARTEN LASSEN
   EINE EINZELNE KARTE LINKSBUENDIG ALLEIN IN DER ZWEITEN ZEILE STEHEN)
   Grid mit auto-fit/minmax reagiert zu unvorhersehbar auf Container-Breite
   (Zeilenumbruch je nach Breite bei unterschiedlicher Spaltenzahl) - deshalb
   hier bewusst auf Flexbox umgestellt: flex-wrap + justify-content:center
   zentriert JEDEN Zeilenrest zuverlässig, unabhängig von der Breite.
   ========================================================================== */
.osma-card-grid.osma-anliegen-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--osma-space-md);
}
.osma-card-grid.osma-anliegen-grid > .osma-vorteil {
  flex: 0 1 240px;
}
/* ==========================================================================
   72. ANSPRECHPARTNER-KARTEN AUF DER KONTAKTSEITE (Aussendienst/Export nach
   Region) - eigene, groessere Kartenoptik statt der kompakten Team-Kacheln
   von der Unternehmen-Seite, weil hier mehr Information (Regionen, Mail-
   Button) pro Person Platz braucht.
   ========================================================================== */
.osma-ansprechpartner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--osma-space-md);
  margin-top: var(--osma-space-lg);
}
@media (max-width: 720px) {
  .osma-ansprechpartner-grid { grid-template-columns: 1fr; }
}
.osma-ansprechpartner-karte {
  display: flex;
  gap: var(--osma-space-md);
  align-items: flex-start;
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-md);
}
.osma-ansprechpartner-bild {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--osma-grau-hell);
}
.osma-ansprechpartner-inhalt {
  /* Flex-Item ohne min-width waere sonst nie kleiner als sein Inhalt (Name,
     Regionen-Badges) und wuerde auf schmalen Screens ueber die Karte und
     den Bildschirmrand hinausragen - min-width: 0 erzwingt korrektes
     Schrumpfen/Umbrechen. */
  min-width: 0;
}
.osma-ansprechpartner-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.osma-ansprechpartner-inhalt h3 {
  margin-bottom: 2px;
}
.osma-ansprechpartner-rolle {
  color: var(--osma-grau);
  font-size: var(--osma-font-size-klein);
  margin-bottom: var(--osma-space-sm);
}
.osma-ansprechpartner-regionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--osma-space-md);
}
.osma-ansprechpartner-regionen .osma-badge {
  font-size: 11px;
  padding: 4px 12px;
}
.osma-ansprechpartner-karte .osma-btn {
  max-width: 100%;
}
/* Der Button zeigte frueher die komplette Rohadresse (z. B.
   brucker.daniel@osma.at) als Beschriftung - auf schmalen Screens brach
   das haesslich mitten im Wort um und wirkte billig. Jetzt: kurzer, nie
   umbrechender Button-Text ("E-Mail schreiben", mailto-Link bleibt gleich),
   die eigentliche Adresse steht klein und in Ruhe darunter fuers Ablesen/
   Kopieren - loest das Umbruchproblem und wirkt hochwertiger. */
.osma-ansprechpartner-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.osma-ansprechpartner-mail svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.osma-ansprechpartner-adresse {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--osma-grau);
  word-break: break-word;
}
/* ==========================================================================
   73. ÖFFNUNGSZEITEN-LISTE AUF DER KONTAKTSEITE (vorher dt/dl mit fester
   360px-Breite - "08:00-17:00 Uhr" brach dadurch um und riss die Zeilen
   unterschiedlich hoch auseinander. Jetzt eine Zeile pro Tag mit Flexbox.)
   ========================================================================== */
.osma-oeffnungszeiten {
  list-style: none;
  margin: 0 0 var(--osma-space-md) 0;
  padding: 0;
  max-width: 340px;
}
.osma-oeffnungszeiten li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--osma-space-md);
  padding: 7px 0;
  border-bottom: 1px solid var(--osma-rand);
}
.osma-oeffnungszeiten li:last-child {
  border-bottom: none;
}
.osma-oeffnungszeiten li span:first-child {
  font-weight: 600;
  color: var(--osma-grau-dunkel);
}
.osma-oeffnungszeiten li span:last-child {
  white-space: nowrap;
  color: var(--osma-grau-dunkel);
}
.osma-oeffnungszeiten li.ist-geschlossen span:last-child {
  color: var(--osma-grau);
}
/* ==========================================================================
   74. "WEITERE STANDORTE"-KARTEN AUF DER KONTAKTSEITE (vorher nur nackter
   Text ohne Kartenrahmen - wirkte unfertig, und nur eine der drei Karten
   hatte ein Badge. Jetzt einheitliche Karten mit Icon, Rahmen und Badge auf
   allen dreien.)
   ========================================================================== */
.osma-standort-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--osma-space-md);
  margin-top: var(--osma-space-lg);
}
@media (max-width: 820px) {
  .osma-standort-grid { grid-template-columns: 1fr; }
}
.osma-standort-karte {
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius-gross);
  padding: var(--osma-space-lg) var(--osma-space-md);
  text-align: center;
}
.osma-standort-karte .osma-vorteil-icon {
  margin: 0 auto var(--osma-space-sm) auto;
}
.osma-standort-karte h3 {
  margin-bottom: 6px;
}
.osma-standort-adresse {
  color: var(--osma-grau);
  margin-bottom: var(--osma-space-sm);
}
/* ==========================================================================
   75. STANDORT-KARTE ALS EIGENE, INDIVIDUELL EINGEFÄRBTE VEKTORKARTE
   Verlauf: Google-Maps-Embed (fremde Optik) -> Leaflet + CartoDB-Rasterkacheln
   (nur per CSS-Filter überlagerbar) -> Mapbox Studio scheiterte an einem
   Fehler auf Mapbox-Seite beim Account anlegen -> jetzt MapLibre GL JS
   (Open Source, kein API-Key) mit CARTOs freiem Vektorstil, dessen Ebenen
   per JavaScript direkt in echten OSMA-Farben eingefärbt werden (siehe
   osmaKarteEinfaerben in page-kontakt.php). Text UND Karte bilden EIN
   gemeinsames Premium-Karten-Element (osma-standort-premium) mit
   gemeinsamem Rahmen/Schatten - die Karte füllt die komplette rechte
   Hälfte in voller Höhe, dazu ein Pin mit Puls-Ring, Adress-Chip im
   Glass-Stil und eine Flug-Animation beim Laden.
   ========================================================================== */
/* Kein weißer Kasten, kein Rahmen, kein Schatten mehr um die Karte - genau
   das hat sie laut Feedback "abgehoben" statt integriert wirken lassen.
   Stattdessen: Die Karte ist ein Flex-Kind direkt im .osma-container und
   läuft mit einer negativen rechten Margin bis zum echten Browserrand aus
   (Formel unten funktioniert nur, weil .osma-standort-premium ein direktes,
   unverändert breites Kind von .osma-container ist - % in margin-right
   löst sich dadurch gegen die Container-Breite auf, nicht gegen die
   schmalere Kartenspalte selbst). Links geht sie über einen weichen
   Verlauf fließend in den Sektionshintergrund über statt mit harter Kante
   direkt neben dem Text zu stehen. */
.osma-standort-premium {
  display: flex;
  align-items: stretch;
  gap: var(--osma-space-xl);
}
.osma-standort-premium-text {
  width: 40%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--osma-space-lg) 0;
}
.osma-standort-premium-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 480px;
  margin-right: calc((100vw - 100%) / -2);
}
.osma-standort-premium-map::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 110px;
  background: linear-gradient(to right, var(--osma-grau-hell), rgba(244, 245, 246, 0));
  z-index: 480;
  pointer-events: none;
}
@media (max-width: 900px) {
  .osma-standort-premium { flex-direction: column; gap: var(--osma-space-md); }
  .osma-standort-premium-text { width: 100%; padding: 0 0 var(--osma-space-md) 0; }
  .osma-standort-premium-map { min-height: 340px; margin-right: 0; order: -1; }
  .osma-standort-premium-map::before { display: none; }
}
.osma-standort-flow-section {
  overflow-x: hidden;
}
#osma-eigene-karte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--osma-grau-hell);
}
/* Eigene, schlichte Text-Attribution statt MapLibres Standard-Steuerung -
   kein Icon, kein Logo, keine Flagge, nur Pflicht-Kartendaten-Text. */
.osma-karten-attribution {
  position: absolute;
  right: 8px;
  bottom: 4px;
  z-index: 400;
  font-size: 10px;
  color: var(--osma-grau);
  background: rgba(255, 255, 255, 0.75);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
}
.osma-standort-premium-map .maplibregl-ctrl-top-right {
  margin: var(--osma-space-sm);
}
.osma-standort-premium-map .maplibregl-ctrl-group {
  border: none !important;
  box-shadow: var(--osma-schatten) !important;
  border-radius: var(--osma-radius) !important;
  overflow: hidden;
}
.osma-standort-premium-map .maplibregl-ctrl-group button {
  width: 32px;
  height: 32px;
}
.osma-standort-premium-map .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--osma-rand);
}
/* Sehr dezenter Pink-Farbton über der Karte, damit sie zur restlichen
   Farbwelt der Website passt statt neutral-grau zu wirken. Liegt über den
   Kartenkacheln, aber unter Pin und Popup (z-index 450 = zwischen
   Leaflets tilePane ~200 und markerPane ~600). */
.osma-karten-tonung {
  position: absolute;
  inset: 0;
  background: var(--osma-pink);
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 450;
}
/* Adress-Chip im Glass-Stil, unten links auf der Karte - verbindet Karte
   und Textspalte optisch, statt dass die Karte für sich allein steht. */
.osma-standort-map-label {
  position: absolute;
  left: var(--osma-space-md);
  bottom: var(--osma-space-md);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--osma-grau-dunkel);
  box-shadow: var(--osma-schatten-hover);
}
.osma-standort-map-label svg {
  width: 16px;
  height: 16px;
  fill: var(--osma-pink);
}
/* Eigener Pin in Markenfarbe statt Leaflets Standard-Marker, größer und mit
   pulsierendem Ring für einen hochwertigeren, "wichtiger Ort"-Eindruck. */
.osma-karten-pin {
  position: relative;
}
.osma-karten-pin svg {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  fill: var(--osma-pink);
  stroke: var(--osma-weiss);
  stroke-width: 1.1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
.osma-karten-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--osma-pink);
  opacity: 0.35;
  animation: osma-karten-puls 2.2s ease-out infinite;
}
@keyframes osma-karten-puls {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
.maplibregl-popup-content {
  border-radius: var(--osma-radius);
  font-family: inherit;
  color: var(--osma-grau-dunkel);
  line-height: 1.4;
  padding: 12px 16px;
  box-shadow: var(--osma-schatten-hover);
}
.maplibregl-popup-tip {
  border-top-color: var(--osma-weiss) !important;
}

/* ==========================================================================
   79. FAQ-SEITE: AKKORDEON (natives <details>/<summary>, kein JS nötig)
   ========================================================================== */
.osma-faq-gruppe {
  margin-bottom: var(--osma-space-xl);
}
.osma-faq-gruppe-titel {
  margin-bottom: var(--osma-space-md);
}
.osma-faq-item {
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  margin-bottom: var(--osma-space-sm);
  overflow: hidden;
  background: var(--osma-weiss);
}
.osma-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--osma-space-md) var(--osma-space-lg);
  font-weight: 600;
  color: var(--osma-grau-dunkel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--osma-space-md);
}
.osma-faq-item summary::-webkit-details-marker {
  display: none;
}
.osma-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--osma-pink-light);
  color: var(--osma-pink-dark);
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition: transform 0.2s ease;
}
.osma-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.osma-faq-item[open] summary {
  border-bottom: 1px solid var(--osma-rand);
}
.osma-faq-item-antwort {
  padding: 0 var(--osma-space-lg) var(--osma-space-lg);
  color: var(--osma-grau);
  line-height: var(--osma-zeilenhoehe);
}
.osma-faq-item-antwort p {
  margin: 0;
}
.osma-faq-item-antwort p + p {
  margin-top: var(--osma-space-sm);
}
/* ==========================================================================
   81. BERECHNUNGSHILFE DESINFEKTION: RECHNER-LAYOUT
   ========================================================================== */
.osma-rechner-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--osma-space-lg);
  align-items: stretch;
}
.osma-rechner-info {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-lg);
  box-shadow: 0 4px 18px rgba(17, 24, 39, 0.05);
  display: flex;
  flex-direction: column;
}
.osma-rechner-info p {
  color: var(--osma-grau-dunkel);
  margin: 0 0 var(--osma-space-md);
}
.osma-rechner-info .osma-hinweisbox {
  margin-top: auto;
}
.osma-hinweisbox {
  background: var(--osma-pink-light);
  border-left: 4px solid var(--osma-pink);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-sm) var(--osma-space-md);
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau-dunkel);
  line-height: var(--osma-zeilenhoehe);
}
.osma-hinweisbox strong {
  display: block;
  margin-bottom: 4px;
  color: var(--osma-pink-dark);
}
.osma-rechner-formular {
  background: var(--osma-weiss);
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-lg);
  box-shadow: 0 4px 18px rgba(17, 24, 39, 0.06);
}
.osma-rechner-felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--osma-space-md);
  margin-bottom: var(--osma-space-md);
}
.osma-rechner-felder label {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin-bottom: 6px;
}
.osma-rechner-felder label svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  color: var(--osma-pink);
  flex-shrink: 0;
}
.osma-rechner-optional {
  font-weight: 400;
  color: var(--osma-grau);
}
.osma-rechner-felder input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--osma-rand);
  border-radius: var(--osma-radius);
  font-family: var(--osma-font-haupt);
  font-size: var(--osma-font-size-basis);
  background: var(--osma-weiss);
}
.osma-rechner-felder input[type="number"]:focus {
  outline: none;
  border-color: var(--osma-pink);
  box-shadow: 0 0 0 3px var(--osma-pink-light);
}
.osma-rechner-einheit {
  display: block;
  font-size: var(--osma-font-size-klein);
  color: var(--osma-grau);
  margin-top: 4px;
}
.osma-rechner-formular > button {
  margin-bottom: var(--osma-space-lg);
}
.osma-rechner-ergebnis {
  background: var(--osma-grau-hell);
  border-radius: var(--osma-radius);
  padding: var(--osma-space-md) var(--osma-space-lg);
  box-shadow: inset 0 0 0 1px var(--osma-rand);
}
.osma-rechner-ergebnis-titel {
  font-size: var(--osma-font-size-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--osma-grau);
}
.osma-rechner-ergebnis-hauptwert {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--osma-pink);
  margin: 4px 0 var(--osma-space-md);
  display: inline-block;
}
@keyframes osma-rechner-pulse-anim {
  0% { transform: scale(1); }
  35% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.osma-rechner-ergebnis-hauptwert.osma-rechner-pulse {
  animation: osma-rechner-pulse-anim 0.35s ease-out;
}
.osma-rechner-ergebnis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--osma-space-md);
  border-top: 1px solid var(--osma-rand);
  padding-top: var(--osma-space-md);
}
.osma-rechner-ergebnis-label {
  font-size: var(--osma-font-size-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--osma-grau);
  margin-bottom: 4px;
}
.osma-rechner-ergebnis-wert {
  font-weight: 700;
  color: var(--osma-grau-dunkel);
}
@media (max-width: 900px) {
  .osma-rechner-layout {
    grid-template-columns: 1fr;
  }
  .osma-rechner-felder {
    grid-template-columns: 1fr;
  }
  .osma-rechner-ergebnis-grid {
    grid-template-columns: 1fr;
    gap: var(--osma-space-sm);
  }
  .osma-rechner-ergebnis-hauptwert {
    font-size: 2rem;
  }
}

/* ==========================================================================
   82. MOBILE-FIX: CSS-GRID-KINDER DUERFEN NICHT BREITER ALS DER VIEWPORT WERDEN
   --------------------------------------------------------------------------
   Ursache eines konkret gefundenen Bugs (Branchen-Seite Feuerwehr: Hero-Text
   und Stats-Box wurden 493px breit gerendert statt 390px, dadurch horizontaler
   Screen-Overflow, ausserdem gleiches Problem auf der DTS+ Produktseite beim
   Produktbild und auf /kontakt/ bei den Ansprechpartner-Karten): CSS-Grid-
   Kinder haben per Spezifikation min-width: auto, d.h. eine Spalte kann sich
   auf die intrinsische Mindestbreite ihres Inhalts aufblaehen (Bild, nicht
   umbrechende Zeile, Flex-Wrap-Box mit mehreren min-width-Elementen) - selbst
   wenn die Spalte eigentlich nur 1fr/100% haben soll. Das betrifft grundsaetz-
   lich jedes Grid-Layout der Seite, deshalb hier als generelle, seitenweite
   Absicherung fuer alle Grid-Layouts statt einzelner Flicken pro Bug. */
@media (max-width: 900px) {
  .osma-card-grid > *,
  .osma-kennzahlen-grid > *,
  .osma-anfrage-grid > *,
  .osma-schnellkontakt > *,
  .osma-anfrage-grid-neu > *,
  .osma-form-grid > *,
  .osma-nummeriert-grid > *,
  .osma-produkt-grid > *,
  .osma-produkt-hero-grid > *,
  .osma-cta-grid > *,
  .osma-branchen-grid > *,
  .osma-schritt-liste > *,
  .osma-produkt-spotlight > *,
  .osma-loesung-grid > *,
  .osma-kategorie-karten > *,
  .osma-produkt-single-hero-grid > *,
  .osma-produkt-single-layout > *,
  .osma-team-grid > *,
  .osma-maskottchen-banner > *,
  .osma-bereich-intro-mit-maskottchen > *,
  .osma-rechts-fakten > *,
  .osma-ansprechpartner-grid > *,
  .osma-standort-grid > *,
  .osma-rechner-layout > *,
  .osma-rechner-felder > *,
  .osma-rechner-ergebnis-grid > *,
  .osma-produkt-hero-stats {
    min-width: 0;
  }
}


/* Mobile: Produkt-Hero (Foto-Header) deutlich kompakter machen. Vorher nahm der Hero auf schmalen Screens oft 1-1.5 volle Bildschirmhoehen ein (Statistik-Box stapelte 3 grosse Items untereinander), dadurch wirkte alles ueberdimensioniert und das Hintergrundfoto extrem zugeschnitten/gezoomt. */
@media (max-width: 600px) {
  .osma-produkt-hero {
    padding: 32px 0;
  }
  .osma-produkt-hero-grid {
    gap: var(--osma-space-md);
  }
  .osma-produkt-hero-text h1 {
    margin-bottom: var(--osma-space-xs);
  }
  .osma-produkt-hero-text p {
    margin-bottom: var(--osma-space-sm);
  }
  .osma-hero-buttons {
    gap: 8px;
  }
  .osma-produkt-hero-stats {
    padding: var(--osma-space-sm);
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .osma-produkt-hero-stat {
    flex: 1 1 calc(50% - 10px);
    gap: 8px;
  }
  .osma-produkt-hero-stat-icon {
    width: 28px;
    height: 28px;
  }
  .osma-produkt-hero-stat-icon svg {
    width: 14px;
    height: 14px;
  }
  .osma-produkt-hero-stat span {
    font-size: 1.4rem;
  }
  .osma-produkt-hero-stat p {
    font-size: 0.7rem;
    margin: 2px 0 0 0;
  }
}


/* Mobile: Grund-Abstaende (Design-System-Variablen) nochmal deutlich verkleinert. Der Kunde empfindet ALLE Seiten am Handy als zu gross/lang. Ursache: Section-Padding, Card-Padding und Card-Gaps basieren alle auf den --osma-space-* Variablen, die bei <=768px nur leicht reduziert waren. Hier eine zusaetzliche, staerkere Reduktion fuer <=600px, die automatisch ueberall greift (Sections, Cards, Grids, Ueberschriften-Abstaende), ohne jede Komponente einzeln anfassen zu muessen. */
@media (max-width: 600px) {
  :root {
    --osma-space-xxl: 36px;
    --osma-space-xl: 28px;
    --osma-space-lg: 26px;
    --osma-space-md: 18px;
    --osma-space-sm: 14px;
    --osma-space-xs: 6px;
    --osma-font-size-h1: 1.75rem;
    --osma-font-size-h2: 1.3rem;
    --osma-font-size-h3: 1.15rem;
  }
}


/* Unternehmen-Hero: Maskottchen-Bild war auf Mobile 260px hoch (dazu Badge-Reihe UND Buttons UND Stats-Box daneben) - dadurch war dieser Hero mit ~1090px fast 3x so hoch wie z.B. Vertriebspartner (375px). Bild auf Mobile deutlich einschraenken, damit die Hero-Hoehen site-weit naeher beieinander liegen. */
@media (max-width: 600px) {
  .osma-unternehmen-hero-maskottchen img {
    max-height: 140px;
    width: auto;
    margin: 0 auto;
  }
}


/* Hero-Hoehe site-weit vereinheitlichen (Desktop/Tablet/Mobil) - User-Wunsch: alle Heroes gleich hoch, nicht nur mobil optimiert. Ziel-Hoehe je Breakpoint = hoechster natuerlich vorkommender Wert (Unternehmen-Seite hat am meisten Inhalt: Badges+Buttons+Stats/Maskottchen). Kuerzere Heroes (z.B. Kontakt, Vertriebspartner) werden vertikal zentriert, damit der zusaetzliche Platz nicht unten "abgeschnitten" wirkt. */
.osma-produkt-hero {
  display: flex;
  align-items: center;
  min-height: 740px;
}
.osma-produkt-hero > .osma-container {
  width: 100%;
}
@media (max-width: 900px) {
  .osma-produkt-hero {
    min-height: 1100px;
  }
}
@media (max-width: 600px) {
  .osma-produkt-hero {
    min-height: 980px;
  }
}

/* Reine Textseiten (FAQ, AGB, Datenschutz, Impressum): kein hohes Hero, Inhalt bestimmt Hoehe */
body.page-id-9145 .osma-produkt-hero,
body.page-id-9143 .osma-produkt-hero,
body.page-id-9069 .osma-produkt-hero,
body.page-id-9067 .osma-produkt-hero {
  min-height: 0;
}

/* Karten-Deko (::after) reicht bei Mobil-Vollbreite ueber den Viewport hinaus -> horizontaler Overflow */
@media (max-width: 600px) {
  .osma-card {
    overflow: hidden;
  }
}