/*
  REGELWERK GMBH – ZENTRALE SCHRIFTGRÖSSEN

  Alle wichtigen Textgrößen stehen direkt im Bereich :root.
  Hinter jedem Wert steht ein Kommentar, der erklärt, wofür er zuständig ist.

  WICHTIG:
  Nur die Zahlenwerte ändern, zum Beispiel 20px in 22px.
  Danach die Datei speichern und die Seite im Browser neu laden.
*/


/* =========================================================
   UMSCHALTPUNKTE / BREAKPOINTS

   WICHTIG:
   CSS-Variablen können nicht direkt in @media-Abfragen verwendet werden.
   Deshalb stehen die Werte hier als zentrale Übersicht und zusätzlich
   noch einmal an der jeweiligen @media-Regel.

   1250px = Bussysteme: Bild kommt über den Text
   1100px = Führungszeile: normales Menü wechselt zum Dropdownmenü
    768px = Mobilansicht: Hauptbild wird ausgeblendet
    420px = Sehr kleine Smartphones: Überschriften werden kleiner
   ========================================================= */

:root {
  /* =========================================================
     SCHRIFTGRÖSSEN – DESKTOP
     ========================================================= */

  --font-nav: 20px; /* Führungszeile oben: Leistungen, Referenzen, Unternehmen, Kontakt */
  --font-nav-button: 20px; /* Kontakt-Schaltfläche rechts in der Führungszeile */

  --font-hero-eyebrow: 30px; /* Kleine Zeile über der großen Startüberschrift */
  --font-h1: 30px; /* Große Hauptüberschrift im Startbereich */
  --font-hero-text: 20px; /* Erklärungstext im Startbereich */

  --font-h2: 30px; /* Große Überschriften der einzelnen Seitenabschnitte */
  --font-section-intro: 20px; /* Einleitungstext direkt unter einer Abschnittsüberschrift */

  --font-h3: 30px; /* Allgemeine Überschriften dritter Ebene */
  --font-box-title: 20px; /* Überschriften der Leistungsboxen */
  --font-box-text: 20px; /* Beschreibungstexte in den Leistungsboxen */

  --font-process-title: 18px; /* ANALYSE, PLANUNG, ENGINEERING usw. */
  --font-process-text: 18px; /* Beschreibung unter den Prozessschritten */

  --font-reference-title: 20px; /* Überschrift einer Referenzkarte */
  --font-reference-place: 24px; /* Ort der Referenzkarte */
  --font-reference-text: 18px; /* Beschreibungstext einer Referenzkarte */

  --font-company-text: 20px; /* Fließtext im Abschnitt Unternehmen */
  --font-contact-text: 20px; /* Einleitungstext im Kontaktabschnitt */
  --font-contact-address: 22px; /* Anschrift im Kontaktkasten */
  --font-contact-links: 18px; /* Telefon, E-Mail und Routenlink im Kontaktkasten */
  --font-contact-label: 18px; /* Kleine Beschriftungen im Kontaktkasten */

  --font-footer: 18px; /* Allgemeiner Text im unteren Seitenbereich */
  --font-footer-link: 22px; /* Impressum- und Datenschutz-Link */
  --font-legal-heading: 22px; /* Überschriften im geöffneten Impressum/Datenschutz */
  --font-legal-text: 18px; /* Text im geöffneten Impressum/Datenschutz */

  /* Allgemeiner Ersatzwert für Texte ohne eigene Zuordnung */
  --font-text: 20px; /* Allgemeiner Fließtext auf der Webseite */
  --font-small: 18px; /* Allgemeine kleinere Zusatztexte */
  --font-contact-route: 16px; /* Link „Route zu uns planen“ im Kontaktkasten */
  --font-contact-button: 16px; /* Button „Kontakt aufnehmen“ im Kontaktkasten */

  /* =========================================================
     BUCHSTABENABSTÄNDE – DESKTOP

     0em bedeutet normaler Abstand.
     Größere Werte wie 0.04em machen die Buchstaben luftiger.
     ========================================================= */

  --letter-spacing-nav: 0.02em; /* Führungszeile: Leistungen, Referenzen, Unternehmen, Kontakt */
  --letter-spacing-h1: 0.03em; /* Große Hauptüberschrift im Startbereich */
  --letter-spacing-h2: 0.04em; /* Abschnittsüberschriften, z. B. „GEBÄUDEAUTOMATION AUS EINER HAND“ */
  --letter-spacing-h3: 0.03em; /* Allgemeine Überschriften dritter Ebene */
  --letter-spacing-box-title: 0.03em; /* Überschriften der Leistungsboxen */
  --letter-spacing-process-title: 0.04em; /* ANALYSE, PLANUNG, ENGINEERING usw. */
  --letter-spacing-reference-title: 0.03em; /* Überschrift einer Referenzkarte */
  /* =========================================================
     ZEILENHÖHEN
     ========================================================= */

  --line-heading: 1.12; /* Zeilenabstand bei Überschriften */
  --line-text: 1.6; /* Zeilenabstand bei Fließtexten */

  /* =========================================================
     ABSTÄNDE UND FORMEN
     ========================================================= */

  --section-space: 120px; /* Großer Abstand innerhalb der Seitenabschnitte */
  --content-padding: 32px; /* Innenabstand von Inhaltsbereichen */
  --card-gap: 32px; /* Abstand zwischen Karten und Boxen */
  --card-radius: 16px; /* Abrundung der Karten */
  --button-radius: 8px; /* Abrundung der Schaltflächen */

  /* =========================================================
     ANIMATIONEN UND SCHATTEN
     ========================================================= */

  --transition-fast: 180ms ease; /* Kurze Übergänge */
  --transition-normal: 280ms ease; /* Normale Übergänge */
  --shadow-small: 0 4px 14px rgba(0, 0, 0, 0.1); /* Kleiner Kartenschatten */
  --shadow-large: 0 14px 36px rgba(0, 0, 0, 0.18); /* Großer Kartenschatten */
}

/* =========================================================
   GRUNDTYPOGRAFIE
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-size: var(--font-text);
  line-height: var(--line-text);
}

h1 {
  font-size: var(--font-h1) !important;
  line-height: var(--line-heading) !important;
  letter-spacing: var(--letter-spacing-h1) !important;
}

h2 {
  font-size: var(--font-h2) !important;
  line-height: var(--line-heading) !important;
  letter-spacing: var(--letter-spacing-h2) !important;
}

h3 {
  font-size: var(--font-h3) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--letter-spacing-h3) !important;
}

p,
li {
  font-size: var(--font-text);
  line-height: var(--line-text);
}

/* =========================================================
   FÜHRUNGSZEILE / NAVIGATION
   ========================================================= */

.topbar > nav,
.topbar > nav a {
  font-size: var(--font-nav) !important;
  letter-spacing: var(--letter-spacing-nav) !important;
}

.topbar > .button-small {
  font-size: var(--font-nav-button) !important;
}

/* =========================================================
   STARTBEREICH / HERO
   ========================================================= */

.hero .hero-eyebrow,
.hero .eyebrow {
  font-size: var(--font-hero-eyebrow) !important;
}

.hero h1,
.hero h1 em {
  font-size: var(--font-h1) !important;
}

.hero-copy > p:not(.eyebrow) {
  font-size: var(--font-hero-text) !important;
  line-height: var(--line-text) !important;
}

/* =========================================================
   ABSCHNITTSÜBERSCHRIFTEN UND EINLEITUNGSTEXTE
   ========================================================= */

.section h2,
.section-title h2,
.heading h2 {
  font-size: var(--font-h2) !important;
}

.section-title > p:last-child,
.heading > p:last-child,
.intro > div:nth-child(2) > p,
.bus-copy > p:not(.eyebrow) {
  font-size: var(--font-section-intro) !important;
  line-height: var(--line-text) !important;
}


/* Spezifischer Buchstabenabstand für „GEBÄUDEAUTOMATION AUS EINER HAND“ */
.section-title h2,
.heading h2,
.intro h2 {
  letter-spacing: var(--letter-spacing-h2) !important;
}

/* =========================================================
   LEISTUNGSBOXEN
   ========================================================= */

.service-copy h3 {
  font-size: var(--font-box-title) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--letter-spacing-box-title) !important;
}

.service-copy p {
  font-size: var(--font-box-text) !important;
  line-height: var(--line-text) !important;
}

/* =========================================================
   PROZESSSCHRITTE
   ========================================================= */

.process h3 {
  font-size: var(--font-process-title) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--letter-spacing-process-title) !important;
}

.process li p {
  font-size: var(--font-process-text) !important;
  line-height: 1.5 !important;
}

/* =========================================================
   REFERENZEN
   ========================================================= */

.reference-copy h3 {
  font-size: var(--font-reference-title) !important;
  letter-spacing: var(--letter-spacing-reference-title) !important;
}

.reference-copy small {
  font-size: var(--font-reference-place) !important;
}

.reference-copy p {
  font-size: var(--font-reference-text) !important;
  line-height: 1.55 !important;
}

/* =========================================================
   UNTERNEHMEN
   ========================================================= */

.company-copy p {
  font-size: var(--font-company-text) !important;
  line-height: var(--line-text) !important;
}

/* =========================================================
   KONTAKT
   ========================================================= */

.contact > div > p:last-child {
  font-size: var(--font-contact-text) !important;
}

.contact-card address {
  font-size: var(--font-contact-address) !important;
}

/* Telefon und E-Mail */
.contact-card > a:not(.button):not(.route-link) {
  font-size: var(--font-contact-links) !important;
}

/* Kleine Bezeichnungen wie Telefon und E-Mail */
.contact-card > a:not(.button) small,
.contact-card small {
  font-size: var(--font-contact-label) !important;
}

/* Link „Route zu uns planen“ */
.contact-card .route-link {
  font-size: var(--font-contact-route) !important;
}

/* Button „Kontakt aufnehmen“ */
.contact-card .button {
  font-size: var(--font-contact-button) !important;
}

/* =========================================================
   FOOTER, IMPRESSUM UND DATENSCHUTZ
   ========================================================= */

footer,
footer p,
footer div,
footer label {
  font-size: var(--font-footer) !important;
}

footer .legal-link {
  font-size: var(--font-footer-link) !important;
}

.legal h2,
.legal-panel h2,
.legal-panel h3 {
  font-size: var(--font-legal-heading) !important;
}

.legal p,
.legal-panel p,
.legal-panel li,
.legal-panel a {
  font-size: var(--font-legal-text) !important;
  line-height: 1.7 !important;
}

/* =========================================================
   KARTEN UND SCHALTFLÄCHEN
   ========================================================= */

article,
[class*="card"],
[class*="Card"],
[class*="box"],
[class*="Box"] {
  border-radius: var(--card-radius);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

article:hover,
[class*="card"]:hover,
[class*="Card"]:hover {
  box-shadow: var(--shadow-small);
}

button,
a[class*="button"],
a[class*="Button"],
[class*="btn"],
[class*="Btn"] {
  border-radius: var(--button-radius);
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    background-color var(--transition-fast);
}

main > section,
#root > section,
section {
  scroll-margin-top: 100px;
}


/* =========================================================
   HAUPTBILD – AUSBLENDEN IN DER MOBILANSICHT

   Dieser Wert bestimmt, ab welcher Browserbreite das große Hauptbild
   im Startbereich ausgeblendet wird.

   Aktuell: bis einschließlich 768 Pixel.
   Zum Ändern einfach in der nächsten Zeile 768px ersetzen,
   zum Beispiel durch 900px oder 650px.
   ========================================================= */

/* Standardmäßig sichtbar – überschreibt die alte Basisregel */
.hero-building {
  display: block !important;
}

/* Erst ab der gewünschten Breite ausblenden */
@media (max-width: 300px) {
  .hero-building {
    display: none !important;
  }
}

/* =========================================================
   SCHRIFTGRÖSSEN – MOBIL BIS 768 PIXEL

   UMSCHALTPUNKT: 768 Pixel
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --font-nav: 18px; /* Mobilmenü: Leistungen, Referenzen, Unternehmen, Kontakt */
    --font-nav-button: 18px; /* Kontakt-Schaltfläche im Mobilbereich */

    --font-hero-eyebrow: 24px; /* Kleine Zeile über der Startüberschrift auf Mobilgeräten */
    --font-h1: 32px; /* Große Startüberschrift auf Mobilgeräten */
    --font-hero-text: 18px; /* Erklärungstext im Startbereich auf Mobilgeräten */

    --font-h2: 30px; /* Abschnittsüberschriften auf Mobilgeräten */
    --font-section-intro: 18px; /* Einleitungstexte der Abschnitte auf Mobilgeräten */

    --font-h3: 24px; /* Allgemeine kleinere Überschriften auf Mobilgeräten */
    --font-box-title: 20px; /* Leistungsbox-Überschriften auf Mobilgeräten */
    --font-box-text: 18px; /* Leistungsbox-Texte auf Mobilgeräten */

    --font-process-title: 18px; /* Prozessüberschriften auf Mobilgeräten */
    --font-process-text: 18px; /* Prozessbeschreibungen auf Mobilgeräten */

    --font-reference-title: 20px; /* Referenzüberschrift auf Mobilgeräten */
    --font-reference-place: 18px; /* Referenzort auf Mobilgeräten */
    --font-reference-text: 17px; /* Referenzbeschreibung auf Mobilgeräten */

    --font-company-text: 18px; /* Unternehmenstext auf Mobilgeräten */
    --font-contact-text: 18px; /* Kontakt-Einleitung auf Mobilgeräten */
    --font-contact-address: 20px; /* Anschrift auf Mobilgeräten */
    --font-contact-links: 18px; /* Telefon und E-Mail auf Mobilgeräten */
    --font-contact-label: 16px; /* Kleine Kontaktbeschriftungen auf Mobilgeräten */

    --font-footer: 16px; /* Footertext auf Mobilgeräten */
    --font-footer-link: 18px; /* Impressum/Datenschutz-Link auf Mobilgeräten */
    --font-legal-heading: 20px; /* Überschriften in Impressum/Datenschutz mobil */
    --font-legal-text: 16px; /* Text in Impressum/Datenschutz mobil */

    --font-text: 18px; /* Allgemeiner Fließtext auf Mobilgeräten */
    --font-small: 16px; /* Allgemeine kleinere Texte auf Mobilgeräten */

    --section-space: 70px; /* Abschnittsabstand auf Mobilgeräten */
    --content-padding: 20px; /* Innenabstand auf Mobilgeräten */
    --card-gap: 20px; /* Kartenabstand auf Mobilgeräten */
    --card-radius: 12px; /* Kartenabrundung auf Mobilgeräten */
  }

  .topbar.menu-open > nav a {
    font-size: var(--font-nav) !important;
  }
}

/* Sehr kleine Smartphones – UMSCHALTPUNKT: 420 Pixel */
@media (max-width: 420px) {
  :root {
    --font-h1: 30px; /* Hauptüberschrift auf sehr kleinen Smartphones */
    --font-h2: 28px; /* Abschnittsüberschriften auf sehr kleinen Smartphones */
    --font-h3: 22px; /* Kleinere Überschriften auf sehr kleinen Smartphones */
  }
}

/* Bewegungen reduzieren, wenn dies im Betriebssystem eingestellt ist */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   KONTAKT-SCHALTFLÄCHE IN DER FÜHRUNGSZEILE AUSBLENDEN

   Entfernt ausschließlich das rechte Kästchen „Kontakt ↗“.
   Der normale Menüpunkt „Kontakt“ im Dropdown/Mobilmenü bleibt erhalten.
   Die kompilierte JavaScript-Datei muss dafür nicht verändert werden.
   ========================================================= */

.topbar > a.button.button-small {
  display: none !important;
}


/* =========================================================
   BUSSYSTEME – SCHMALE BROWSERANSICHT

   UMSCHALTPUNKT: 1250 Pixel
   Sobald die Webseite 1250 Pixel breit oder schmaler wird, steht das Bild
   oberhalb von „OFFENE KOMMUNIKATION“ und dem übrigen Text.
   Dadurch ähnelt der Aufbau den Leistungskarten: Bild zuerst, Text darunter.
   ========================================================= */

@media (max-width: 1250px) {
  .buses {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .buses .bus-visual {
    grid-row: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    justify-self: center !important;
  }

  .buses .bus-visual img {
    display: block;
    width: 100%;
    height: auto;
    margin-right: auto;
    transform: translateX(30px);
  }

  .buses .bus-copy {
    grid-row: 2;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}