/*
 * GROTEC Footer 2025 Styles
 * ------------------------
 * Dieser Footer besteht aus mehreren Komponenten:
 * 1. Ein Hero-Bereich mit Logo
 * 2. Ein Footer-Bereich mit Social Media Icons und drei Spalten
 * 3. Responsive Anpassungen für verschiedene Bildschirmgrößen
 */

/* CSS Reset für Footer-Container
 * -----------------------------
 * Entfernt alle Standard-Browser-Margins und Paddings
 * Setzt box-sizing auf border-box für konsistente Größenberechnung
 * Wirkt auf alle Elemente innerhalb der css_footer_2025 Klasse
 */
.css_footer_2025 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Haupt-Footer-Container
 * ---------------------
 * Definiert das grundlegende Aussehen des gesamten Footer-Bereichs
 * - background-color: Dunkles Schwarz für professionelles Erscheinungsbild
 * - color: Weiße Schrift für guten Kontrast auf dunklem Hintergrund
 * - font-family: Corporate Font für einheitliches Branding
 */
.css_footer_2025 {
  background-color: #060708;
  color: #fff;
  font-weight: 300;
  font-family: 'mundial-narrow-variable', sans-serif;
}

/* Wrapper für Footer-Inhalt
 * -------------------------
 * Strukturiert den Innenbereich des Footers als Flexbox-Container
 * - width: 100% für vollständige Breite
 * - min-height: auto für flexible Höhenanpassung
 * - flex-direction: column für vertikale Anordnung von Hero und Footer
 * - justify-content: flex-start für Ausrichtung am oberen Rand
 */
.css_footer_2025 .wrapper {
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}

/* Header/Hero-Bereich mit Logo
 * --------------------------
 * Das Logo wird gestreckt dargestellt und passt sich 
 * responsiv der Bildschirmbreite an
 * - padding-left: 32px für Abstand vom linken Rand
 * - padding-right: 0px um das Logo bis zum rechten Rand zu strecken
 * - padding-top: 20px für oberen Abstand
 */
.css_footer_2025 .hero {
  padding-left: 100px;
  padding-right: 0px;
  padding-top: 20px;
  width: 100%;
}

/* Logo-Bild Styling
 * ----------------
 * Definiert wie das Logo dargestellt wird
 * - width: 100% streckt das Logo über die gesamte verfügbare Breite
 * - max-height: 600px verhindert übermäßige Vergrößerung auf großen Bildschirmen
 * - object-fit: contain erhält das Seitenverhältnis des Logos
 */
.css_footer_2025 .hero img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
}

/* Footer Hauptcontainer
 * -------------------
 * Flexbox-Layout für optimale Verteilung der Elemente
 * Negative margin-top für Überlappung mit dem Logo
 * - display: flex ermöglicht flexible Anordnung der Spalten
 * - justify-content: flex-start richtet Elemente links aus
 * - align-items: flex-start richtet Elemente oben aus
 * - flex-wrap: nowrap verhindert Umbruch der Spalten
 * - margin-top: -180px schiebt Footer über das Logo für Überlappungseffekt
 * - position: relative ermöglicht absolute Positionierung von Kindelementen
 */
.css_footer_2025 .footer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: 32px 0;
  font-size: 20px;
  line-height: 1.8;
  max-width: 100%;
  width: 100%;
  margin-top: -180px;
  position: relative; /* Für absolute Positionierung der Social Icons */
  font-weight: 300;
  font-family: 'mundial-narrow-variable', sans-serif;
}

/* Social Media Bereich
 * ------------------
 * Absolut positioniert links neben footer-left
 * Vertikale Anordnung der Icons auf Desktop
 * - position: absolute nimmt Element aus dem normalen Dokumentfluss
 * - left: 135px positioniert Icons 135px vom linken Rand entfernt
 * - bottom: 35px positioniert Icons 35px vom unteren Rand des Footer-Containers
 */
.css_footer_2025 .footer-social {
  position: absolute;
  left: 135px;
  bottom: 35px;
}

/* Social Media Liste Layout
 * ------------------------
 * Definiert die Anordnung der Social Media Icons in einer Liste
 * - display: flex macht die Liste zu einem Flexbox-Container
 * - flex-direction: column ordnet Icons vertikal untereinander an
 * - gap: 15px schafft 15px Abstand zwischen den einzelnen Icons
 * - list-style: none entfernt Standard-Listenpunkte
 * - padding/margin: 0 entfernt Standard-Browser-Abstände
 */
.css_footer_2025 .footer-social .pt-social ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Social Media Listenelement
 * -------------------------
 * Entfernt Standard-Margins von Listenelementen
 * Stellt sicher, dass nur der gap-Wert für Abstände verwendet wird
 */
.css_footer_2025 .footer-social .pt-social ul li {
  margin: 0;
}

/* Social Media Icons Styling
 * -----------------------
 * Weiße Icons mit Hover-Effekt
 * Größe und Abstände optimiert für Lesbarkeit
 * - color: #fff macht alle Icons weiß für guten Kontrast
 * - font-size: 20px setzt einheitliche Größe für alle Icons
 * - transition: opacity 0.3s ease schafft sanften Übergang beim Hover
 */
.css_footer_2025 .footer-social .pt-social ul li a {
  color: #fff;
  font-size: 20px;
  transition: opacity 0.3s ease;
}

/* Social Media Hover-Effekt
 * ------------------------
 * Reduziert die Deckkraft beim Überfahren mit der Maus
 * - opacity: 0.9 macht das Icon zu 90% sichtbar für visuelles Feedback
 */
.css_footer_2025 .footer-social .pt-social ul li a:hover {
  opacity: 0.9;
}

/* Dark Mode Anpassung für Social Media Icons
 * -----------------------------------------
 * Im Dark Mode werden die Social Media Icons schwarz dargestellt
 * für besseren Kontrast auf dem weißen Hintergrund
 */
.site-dark .css_footer_2025 .footer-social .pt-social ul li a {
  color: #000;
}

/* Social Media Icons Hover-Effekt Überschreibung
 * ---------------------------------------------
 * Überschreibt den Theme-Standard Hover-Effekt mit der Corporate-Farbe
 * Der rote Kreis (#FF003A) wird beim Hover angezeigt, Icons bleiben unverändert
 */
.css_footer_2025 .footer-social .pt-social ul li a:hover {
  background-color: #FF003A !important;
  border-color: #FF003A !important;
}

/* Footer Spalten Layout
 * ------------------
 * Drei Hauptspalten mit flexiblem Layout
 * Feste Abstände für optimale Lesbarkeit
 */

/* Linke Footer-Spalte (Adresse)
 * ----------------------------
 * Enthält die Firmenadresse
 * - flex: 0 0 auto verhindert Vergrößerung/Verkleinerung der Spalte
 * - min-width: 200px stellt Mindestbreite für Lesbarkeit sicher
 * - text-align: left richtet Text linksbündig aus
 * - margin-left: 400px schafft Platz für Social Media Icons
 */
.css_footer_2025 .footer-left {
  flex: 0 0 auto;
  min-width: 200px;
  text-align: left;
  margin-left: 400px; /* Platz für Social Media Icons */
}

/* Mittlere Footer-Spalte (Kontakt)
 * -------------------------------
 * Enthält Telefon, E-Mail und Website
 * - flex: 0 0 auto hält die Spalte in fester Größe
 * - min-width: 200px garantiert ausreichend Platz für Kontaktdaten
 * - text-align: left für linksbündige Ausrichtung
 * - margin-left: 360px positioniert die Spalte mit Abstand zur linken Spalte
 */
.css_footer_2025 .footer-center {
  flex: 0 0 auto;
  min-width: 200px;
  text-align: left;
  padding-right: 0px;
  margin-left: 360px;
}

/* Rechte Footer-Spalte (Rechtliches)
 * ---------------------------------
 * Enthält Links zu Impressum und Datenschutz
 * - flex: 0 0 auto hält die Spalte in fester Größe
 * - min-width: 200px sichert Platz für die Links
 * - text-align: left für einheitliche Ausrichtung
 * - margin-left: auto schiebt die Spalte an den rechten Rand
 * - margin-right: 32px schafft Abstand zum Rand
 */
.css_footer_2025 .footer-right {
  flex: 0 0 auto;
  min-width: 200px;
  text-align: left;
  margin-left: auto;
  padding-left: 10px;
  margin-right: 60px;
}

/* Label Styling für Kontaktinformationen
 * ----------------------------------
 * Einheitliche Breite für alle Labels
 * Hellgraue Farbe für visuelle Hierarchie
 * - display: inline-block ermöglicht Breitenangabe für Inline-Element
 * - width: 40px schafft einheitliche Ausrichtung der Labels (tel, mail, w³)
 * - color: #bbb macht Labels heller als den Haupttext für Hierarchie
 */
.css_footer_2025 .label {
  display: inline-block;
  width: 40px;
  color: #bbb;
}

/* Responsive Anpassungen
 * -------------------
 * Breakpoint bei 900px für Mobile Layout
 * Vertikale Anordnung aller Elemente
 * Angepasste Abstände und Größen
 * 
 * Diese Media Query aktiviert sich bei Bildschirmbreiten unter 900px
 * und verändert das Layout von horizontal auf vertikal
 */
@media (max-width: 1023px) {
  /* Mobile Container-Anpassung
   * -------------------------
   * Reduziert die Mindesthöhe für bessere mobile Darstellung
   */
  .css_footer_2025 {
    min-height: 70%;
  }

  /* Mobile Footer Layout
   * ------------------
   * Ändert das Layout von horizontal zu vertikal
   * - flex-direction: column stapelt alle Spalten übereinander
   * - padding: 20px reduziert die Abstände für kleinere Bildschirme
   * - margin-top: 150px verringert Überlappung mit Logo auf Mobilgeräten
   */
  .css_footer_2025 .footer {
    flex-direction: column;
    padding: 20px;
    margin-top: 150px;
  }

  /* Social Media wird horizontal über dem Content angezeigt
   * -----------------------------------------------------
   * Ändert Positionierung für mobile Ansicht
   * - position: relative nimmt Element zurück in den normalen Dokumentfluss
   * - left: 20px reduziert Abstand vom linken Rand
   * - bottom: auto entfernt absolute Positionierung von unten
   * - margin-bottom: 24px schafft Abstand zu nachfolgenden Elementen
   */
  .css_footer_2025 .footer-social {
    position: relative;
    left: 0px;
    bottom: auto;
    margin-bottom: 24px;
  }

  /* Mobile Social Media Layout
   * -------------------------
   * Ändert Icon-Anordnung von vertikal zu horizontal
   * - flex-direction: row ordnet Icons nebeneinander an
   * - gap: 20px vergrößert Abstand zwischen Icons für Touch-Bedienung
   */
  .css_footer_2025 .footer-social .pt-social ul {
    flex-direction: row;
    gap: 20px;
  }

  /* Spalten werden übereinander angeordnet
   * ------------------------------------
   * Alle drei Footer-Spalten erhalten einheitliches mobiles Layout
   * - width: 100% nutzt vollständige Bildschirmbreite
   * - text-align: left behält linksbündige Ausrichtung bei
   * - margin-bottom: 24px schafft Abstand zwischen den Spalten
   * - margin-left/right: 20px schafft seitliche Abstände
   * - padding: 0 entfernt Desktop-spezifische Abstände
   */
  .css_footer_2025 .footer-left,
  .css_footer_2025 .footer-center,
  .css_footer_2025 .footer-right {
    width: 100%;
    text-align: left;
    margin-bottom: 24px;
    padding: 0;
    margin-left: 0px;
    
  }

  /* Logo-Anpassungen für Mobile
   * --------------------------
   * Reduziert Logo-Größe für kleinere Bildschirme
   * - max-height: 250px verhindert zu große Logo-Darstellung
   * - padding-right: 32px schafft rechten Abstand auch auf Mobile
   * - padding-top: 32px vergrößert oberen Abstand für bessere Proportionen
   */
  .css_footer_2025 .hero {
    /* Mobile-spezifische Werte für den Hero-Container */
    padding-left: 20px;
    padding-right: 32px;
    padding-top: 32px;
    width: 100%;
  }

  .css_footer_2025 .hero img {
    /* Mobile-spezifische Werte für das Hero-Bild */
    max-height: 250px;
    width: 100%;
    object-fit: contain;
  }
}

/* ================================
   DESKTOP FLUID DESIGN EXTENSION
   Für Desktop-Auflösungen 901px - 2560px
   Basis: 1920x1080 (bleibt unverändert)
   Mobile CSS (max-width: 900px) bleibt unverändert
   ================================ */

/* Fluid Design Variables für Desktop */
:root {
  /* Typography Scale */
  --footer-font-family: 'mundial-narrow-variable', sans-serif;     /* Corporate Font */
  --footer-text-sm: clamp(0.875rem, 0.6vw + 0.75rem, 1.125rem);    /* 14px - 18px */
  --footer-text-base: clamp(1.125rem, 1.2vw + 0.8rem, 1.375rem);   /* 18px - 22px (Basis: 20px) */
  --footer-text-lg: clamp(1.25rem, 1.4vw + 0.9rem, 1.625rem);      /* 20px - 26px */
  
  /* Spacing Scale */
  --footer-space-xs: clamp(0.75rem, 1.5vw, 1.25rem);               /* 12px - 20px */
  --footer-space-sm: clamp(1rem, 2vw, 2rem);                       /* 16px - 32px */
  --footer-space-md: clamp(1.5rem, 3vw, 3.125rem);                 /* 24px - 50px */
  --footer-space-lg: clamp(2rem, 4vw, 4rem);                       /* 32px - 64px */
  --footer-space-xl: clamp(3rem, 6vw, 6rem);                       /* 48px - 96px */
  
  /* Layout Dimensions */
  --footer-hero-padding: clamp(75px, 7vw, 120px);                  /* 75px - 120px */
  --footer-logo-height: clamp(580px, 45vh, 650px);                 /* 400px - 650px */
  --footer-overlap: clamp(-135px, -12vw, -200px);               /* -120px - -200px */
  --footer-social-left: clamp(100px, 10vw, 150px);                 /* 100px - 150px */
  --footer-social-bottom: clamp(0px, 3vw, 5px);                  /* 25px - 45px */
  --footer-left-margin: clamp(280px, 28vw, 420px);                 /* 280px - 420px */
  --footer-center-margin: clamp(240px, 25vw, 380px);              /* 240px - 380px */
  --footer-right-margin: clamp(40px, 4vw, 80px);                   /* 40px - 80px */
  --footer-icon-size: clamp(18px, 1.5vw, 22px);                    /* 18px - 22px */
  --footer-icon-gap: clamp(12px, 1.2vw, 18px);                     /* 12px - 18px */
}

/* Desktop-only Fluid Anpassungen (1023px - 2560px) */
@media screen and (min-width: 1024px) {
  
  /* Hero-Bereich mit Fluid Padding */
  .css_footer_2025 .hero {
    padding-left: var(--footer-hero-padding);
    padding-top: var(--footer-space-sm);
  }
  
  /* Logo mit Fluid Höhe */
  .css_footer_2025 .hero img {
    max-height: var(--footer-logo-height);
  }
  
  /* Footer Container mit Fluid Overlap */
  .css_footer_2025 .footer {
    margin-top: var(--footer-overlap);
    padding: var(--footer-space-md) 10;
    font-size: var(--footer-text-base);
  }
  
  /* Social Media mit Fluid Positionierung */
  .css_footer_2025 .footer-social {
    left: var(--footer-social-left);
    bottom: var(--footer-social-bottom);
  }
  
  /* Social Icons mit Fluid Sizing */
  .css_footer_2025 .footer-social .pt-social ul {
    gap: var(--footer-icon-gap);
  }
  
  .css_footer_2025 .footer-social .pt-social ul li a {
    font-size: var(--footer-icon-size);
  }
  
  /* Footer Spalten mit Fluid Margins */
  .css_footer_2025 .footer-left {
    margin-left: var(--footer-left-margin);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-center {
    margin-left: var(--footer-center-margin);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-right {
    margin-right: var(--footer-right-margin);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  /* Label mit Fluid Width */
  .css_footer_2025 .label {
    width: clamp(35px, 3vw, 45px);
    font-size: var(--footer-text-sm);
    font-family: var(--footer-font-family);
  }
  
  /* Explizite Paragraph-Styling für Footer-Spalten */
  .css_footer_2025 .footer-left p,
  .css_footer_2025 .footer-center p,
  .css_footer_2025 .footer-right p {
    font-family: var(--footer-font-family) !important;
    font-weight: 300 !important;
    font-size: var(--footer-text-base) !important;
    margin: 0;
    line-height: 1.8;
  }
}


/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1023px - 1024px) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  .css_footer_2025 .footer-left {
    margin-left: clamp(220px, 22vw, 300px);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-center {
    margin-left: clamp(0px, 20vw, 70px);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-right {
    margin-right: var(--footer-right-margin);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-social {
    left: clamp(80px, 10vw, 180px);
  }

    .css_footer_2025 .footer {
      margin-top: clamp(295px, 16vw, 295px);
      padding: var(--footer-space-md) 10;
      font-size: var(--footer-text-lg);
    }

     /* Logo mit Fluid Höhe */
  .css_footer_2025 .hero img {
    max-height: var(--footer-logo-height);
    padding-left: 10px;
  }
  
}


/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1024px - 1279px) */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .css_footer_2025 .footer-left {
    margin-left: clamp(220px, 22vw, 300px);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-center {
    margin-left: clamp(0px, 20vw, 70px);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-right {
    margin-right: var(--footer-right-margin);
    font-size: var(--footer-text-base);
    font-family: var(--footer-font-family);
    font-weight: 300;
  }
  
  .css_footer_2025 .footer-social {
    left: clamp(80px, 10vw, 180px);
  }

    .css_footer_2025 .footer {
      margin-top: var(--footer-overlap);
      padding: var(--footer-space-md) 10;
      font-size: var(--footer-text-lg);
    }
  
}



/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1280px - 1366px) */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .css_footer_2025 .footer-left {
    margin-left: clamp(220px, 22vw, 300px);
  }
  
  .css_footer_2025 .footer-center {
    margin-left: clamp(200px, 20vw, 280px);
  }
  
  .css_footer_2025 .footer-social {
    left: clamp(80px, 10vw, 180px);
  }

  .css_footer_2025 .footer {
    margin-top: var(--footer-overlap);
    padding: var(--footer-space-md) 10;
    font-size: var(--footer-text-base);
  }


}




/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1367px - 1919px) */
@media screen and (min-width: 1367px) and (max-width: 1919px) {
  .css_footer_2025 .footer-left {
    margin-left: clamp(220px, 22vw, 300px);
  }
  
  .css_footer_2025 .footer-center {
    margin-left: clamp(200px, 20vw, 280px);
  }
  
  .css_footer_2025 .footer-social {
    left: clamp(80px, 10vw, 180px);
  }

  .css_footer_2025 .footer {
    margin-top: var(--footer-overlap);
    padding: var(--footer-space-md) 10;
    font-size: var(--footer-text-base);
  }


}




/* Spezielle Anpassungen für sehr große Bildschirme (2560px+) */
@media screen and (min-width: 2560px) {
  :root {
    --footer-hero-padding: min(140px, 7vw);
    --footer-logo-height: min(900px, 60vh);
    --footer-overlap: max(-220px, -11vw);
  }
  
  .css_footer_2025 .footer {
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ende Desktop Fluid Design Extension */