/* Datei: css/style.css */

/* =================================================================
   1. Basis-Reset + Box-Sizing
   ================================================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =================================================================
   2. Root-Variablen für Farben und Schrift
   ================================================================= */
:root {
  --color-bg-dark: #121212;
  --color-bg-medium: #1f1f1f;
  --color-text-light: #f5f5f5;
  --color-footer: #232323;
  --color-accent: #ff8c00;
  --color-accent-hover: #e07b00;
  --font-main: 'Helvetica Rounded', Helvetica, Arial, sans-serif;
}

/* =================================================================
   3. Body
   ================================================================= */
body {
  font-family: var(--font-main);
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  line-height: 1.5;
}

/* =================================================================
   4. Container
   ================================================================= */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =================================================================
   5. Header
   ================================================================= */
.site-header {
  padding: 1rem 0;
  background-color: var(--color-bg-medium);
}

/* =================================================================
   6. Navigation
   ================================================================= */
.site-nav .nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-list li {
  display: inline-block;
}
.site-nav .nav-list li:not(:last-child)::after {
  content: '|';
  margin: 0 1rem;
  color: rgba(245, 245, 245, 0.5);
}
.site-nav .nav-item {
  text-decoration: none;
  color: var(--color-text-light);
  font-weight: 500;
  padding: 0 0.5rem;
  transition: transform 0.3s;
}
.site-nav .nav-item:hover {
background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transform: scale(1.1);
  padding-bottom: 0.25rem;
  opacity: 1;
}
.site-nav .nav-item.active {
  color: var(--color-accent);
/*border-bottom: 1px solid var(--color-accent); */
  padding-bottom: 0.25rem;
  opacity: 1.0;
}

/* =================================================================
   7. Hero – Grundlayout
   ================================================================= */
.hero {
  padding: 6rem 0;
}
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}
.hero-logo-text { max-width: 350px; margin-left: -10%; }
.hero-logo-img  { width: 100%; }
.hero-title     { font-size: 1.275rem; margin-top: 1rem; line-height: 1.2; }
.hero-subtitle-small { font-size: 1rem; margin-top: .5rem; color: #ccc; }

/* =================================================================
   8. Slideshow – Container & universelle Slide-Animation
   ================================================================= */
.hero-media      { position: relative; width: 70%; max-width: 1000px; }
.slideshow       { position: relative; }
.monitor-slides,
.phone-slides    { position: absolute; inset: 0; overflow: hidden; }

/* jedes Bild ist vollständig absolut positioniert */
.monitor-slides img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 101%;
  object-fit: contain;
  /* Startposition: rechts außerhalb des Frames */
  transform: translateX(100%);
  transition: transform .6s ease;
}
.phone-slides   img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Startposition: rechts außerhalb des Frames */
  transform: translateX(100%);
  transition: transform .6s ease;
  border-radius: 22px;
  
}

/* aktive Folie wird in den sichtbaren Bereich geschoben */
.monitor-slides img.active,
.phone-slides   img.active {
  transform: translateX(0);
  z-index: 1;          /* liegt oben auf */
}

/* zuvor aktive Folie fährt nach links hinaus */
.monitor-slides img.out-left,
.phone-slides   img.out-left {
  transform: translateX(-100%);
  z-index: 1;
}

/* kein zusätzlicher Fade – allein die harte Kante durch overflow:hidden  */

/* =================================================================
   9. Monitor-Rahmen
   ================================================================= */
.monitor {
  display: block;
  width: 110%;
  height: auto;
  position: relative;
  left: 17%;
  border-radius: 22px;
}

/* Monitor-Slides-Fenster exakt auf das Display legen */
.monitor-slides {
  top: -5.2%;
  left: 17%;
  width: 110%;
  height: 110%;
  border-radius: 16px;      /* leichte Abrundung wie im SVG-Rahmen */
  overflow: hidden;        /* entscheidend: schneidet alles ab! */
  clip-path: inset(32px 32px 32px 32px);
  z-index: 2;
  
}

/* =================================================================
   10. Phone-Rahmen
   ================================================================= */
.phone-wrapper {
  position: absolute;
  bottom: -10%;
  left: 10%;
  width: 120%;
  z-index: 3;
  border-radius: 22px;
}
.phone            { width: 25%; height: auto; display: block; z-index: 3; }
.phone-slides {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12.5%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 22px;
  overflow: hidden;        /* überschüssige Bildteile abschneiden */
  clip-path: inset(1px 393px 1px 395px round 22px);
}

/* =================================================================
   11. Footer
   (Leiste mit Links und Social Icons)
   ================================================================= */
.site-footer {
  width: 100%;                          /* Volle Viewport-Breite */
  background-color: var(--color-bg-medium); /* Footer-Hintergrund */
  padding: 1rem 0;                      /* Vertikaler Padding */
}
.site-footer .container {
  display: flex;                        /* Horizontaler Layout-Container */
  justify-content: space-between;       /* Linkslinks, Icons rechts */
  align-items: center;                  /* Vertikale Zentrierung */
}
.footer-left {
  display: flex;                        /* Horizontale Links */
  align-items: center;
  gap: 2.5rem;                          /* Zwischen Links einstellbar */
  margin-left: -10%;                    /* Versatz zur Kante */
}
.footer-left p {
  margin: 0;
  color: var(--color-text-light);
}
.footer-nav {
  display: flex;
  gap: 1rem;                            /* Abstand Links */
}
.footer-nav a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav a:hover {
background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  opacity: 1;
}
.footer-right {
  margin-right: -18%;                   /* gleiche Ausrichtung rechts */
}
.footer-right a {
  margin-left: 1rem;                    /* Abstand zwischen Icons */
  display: inline-block;
  width: 1.5rem;                        /* Icon-Container Breite */
  height: 1.5rem;                       /* Icon-Container Höhe */
  opacity: 0.7;
  transition: opacity 0.2s;
}
.footer-right a:hover {
  opacity: 1;
}
.footer-right img {
  width: 1.5rem;                        /* Icon-Größe beibehalten */
  height: auto;
  display: block;
}

/* =================================================================
   12. Impressum-Seite
   (Regeln nur für das Impressum-Layout, unabhängig von AGB)
   ================================================================= */

/* Container für das Impressum; sorgt für beidseitige Ränder */
.imprint-container {
  margin-left: 20%;                   /* linker Seitenrand von 20 % */  
  margin-right: 20%;                  /* rechter Seitenrand von 20 % */
}

/* Impressum-spezifisches Layout */
.impressum-header {
  text-align: center;
  margin-top: 4rem;
}
.impressum-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.impressum-header .note {
  font-size: 1rem;
  color: #cccccc;
}
.impressum-content {
  max-width: 600px;
  margin: 2rem auto 4rem;
  line-height: 1.6;
  text-align: center;
}
.impressum-content section {
  margin-bottom: 2rem;
}
.impressum-content h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.impressum-content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}
.impressum-content a {
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  transition: transform 0.2s, border-bottom 0.2s, text-decoration 0.2s;
}

.impressum-content a:hover,
.impressum-content a:focus {
  transform: scale(1.1);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.25rem;
  text-decoration: underline;
}

/* Mobile: schmalere Ränder für Tablet */
@media (max-width: 1024px) {
  .imprint-container {
    margin-left: 10%;                 /* linker Seitenrand 10 % */  
    margin-right: 10%;                /* rechter Seitenrand 10 % */
  }
}

/* Mobile: sehr schmale Ränder für kleine Bildschirme */
@media (max-width: 640px) {
  .imprint-container {
    margin-left: 5%;                  /* linker Seitenrand 5 % */  
    margin-right: 5%;                 /* rechter Seitenrand 5 % */
  }
}


/* =================================================================
   12a. AGB-Seite
   (Regeln nur für das AGB-Layout, unabhängig von Impressum)
   ================================================================= */

/* Hauptcontainer für die AGB-Seite */
.agb-page {
  padding: 6rem 0;                     /* Abstand oben und unten um den Text */
}

/* Hauptüberschrift der AGB */
.agb-page h1 {
  font-size: 2rem;                    /* Größe der Überschrift */  
  color: #cccccc;         /* Farbe Überschrift */  
  text-align: center;                 /* Zentrierung der Überschrift */  
  margin-bottom: 1rem;                /* Abstand zur Versionszeile */  
}

/* Versionszeile direkt unter der Überschrift */
.agb-page > p:first-of-type {
  font-size: 1rem;                  /* kleinere Schrift für Meta-Info */  
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; 
  text-align: center;                 /* Zentrierung der Statuszeile */  
  margin-bottom: 1.5rem;                /* Abstand zum ersten §-Block */  
}

/* Abschnittsüberschriften (§-Nummern) */
.agb-page h2 {
  font-size: 1.25rem;                 /* Größe der Kapitelüberschriften */  
  color: var(--color-text-light);     /* Textfarbe aus den Root-Variablen */  
  margin-top: 2.5rem;                   /* Abstand vom vorherigen Block */  
  margin-bottom: 0.75rem;              /* Abstand zum folgenden Text */  
  border-top: 1px solid rgba(245,245,245,0.2); /* dezenter Trenner oberhalb */  
  padding-top: 1.5rem;                  /* zusätzlicher Puffer über der Überschrift */  
}

/* Fließtext-Absätze in den §§ */
.agb-page p {
  font-size: 1rem;                    /* Standard-Fließtextgröße */  
  line-height: 1.75;                  /* erhöhter Zeilenabstand */  
  color: var(--color-text-light);     /* konsistente Textfarbe */  
  text-indent: 0rem;                  /* Einzug der ersten Textzeile */  
  margin-left: 1rem;                  /* linker Rand für bessere Lesbarkeit */  
  margin-bottom: 0.5rem;              /* Abstand zum nächsten Element */  
}

/* Aufzählungen innerhalb der AGB */
.agb-page ul {
  list-style: disc inside;            /* Aufzählungszeichen innerhalb des Blocks */  
  background: rgba(255,140,0,0.05);   /* leichter orangener Hintergrund */  
  padding: 0.5rem;                      /* Innenabstand um Listeneinträge */  
  border-radius: 0.5rem;              /* Abrundung der Kanten */  
  margin-left: 1rem;                  /* linker Einzug für Listenbox */  
  margin-bottom: 1.5rem;              /* Abstand nach der Liste */  
}
.agb-page ul li {
  margin-bottom: 0.75rem;              /* Abstand zwischen Listeneinträgen */  
}

/* Letzte Hinweiszeile mit Adresse */
.agb-page p:last-of-type {
  font-size: 1rem;                  /* kleinere Schrift für Fußnote */  
  color: #cccccc;                     /* dezentes Grau */  
  text-align: center;                 /* Zentrierung der Adresszeile */  
  margin-top: 4rem;                   /* Abstand zum vorherigen Textblock */  
  font-style: italic;                 /* leicht kursiv für Fußnote */  
}

/* Mobil-Anpassungen für die AGB-Seite */
@media (max-width: 768px) {
  .agb-page {
    padding: 2rem 1rem;               /* reduzierte Abstände auf Mobile */  
  }
  .agb-page h1 {
    font-size: 1.75rem;               /* angepasste Überschriftgröße mobil */  
  }
  .agb-page p,
  .agb-page h2 {
    font-size: 0.95rem;               /* leicht verringerte Schrift mobil */  
  }
  .agb-page p {
    text-indent: 0;                   /* kein Einzug mobil */  
    margin-left: 0;                   /* kein Einzug mobil */  
    line-height: 1.6;                 /* Zeilenabstand mobil anpassen */  
  }
}

/* =================================================================
   12b. Datenschutz-Seite
   (Regeln nur für das Datenschutz-Layout, unabhängig von Impressum/AGB)
   ================================================================= */

/* Hauptcontainer für die Datenschutz-Seite */
.datenschutz-page {
  padding: 4rem 0;                   /* Abstand oben und unten um den Text */
}

/* Seitenüberschrift auf Datenschutz */
.datenschutz-page h1 {
  font-size: 2rem;                  /* Größe der Überschrift */  
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;               /* Zentrierung der Überschrift */  
  margin-bottom: 2rem;              /* Abstand zur Einleitung */  
}

/* Einleitende Absätze unter der Überschrift */
.datenschutz-page > p {
  font-size: 1rem;                  /* Standard-Fließtextgröße */  
  line-height: 1.6;                 /* Zeilenabstand für Lesbarkeit */  
  margin: 0 auto 1.5rem;            /* vertikaler Abstand und zentriert */  
  color: var(--color-text-light);   /* konsistente Textfarbe */  
}

/* Nummerierte Überschriften (z. B. 1., 2., …) */
.datenschutz-page h2 {
  font-size: 1.25rem;               /* Größe der Abschnittsüberschriften */  
  margin-top: 2.5rem;                 /* Abstand zum vorherigen Block */  
  margin-bottom: 0.75rem;            /* Abstand zum folgenden Text */  
  color: var(--color-text-light);   /* Textfarbe aus den Root-Variablen */  
  border-top: 1px solid rgba(245,245,245,0.2); /* dezenter Trenner oben */  
  padding-top: 1.5rem;                /* Puffer oberhalb der Überschrift */  
}

/* Fließtext in den Abschnitten */
.datenschutz-page p {
  font-size: 1rem;                  /* Standard-Fließtextgröße */  
  line-height: 1.75;                /* erhöhter Zeilenabstand */  
  margin-left: 1rem;                /* Einzug für bessere Lesbarkeit */  
  margin-bottom: 1.5rem;              /* Abstand zum nächsten Element */  
}

/* Aufzählungen innerhalb der Datenschutzerklärung */
.datenschutz-page ul {
  list-style: disc inside;          /* Aufzählungszeichen innerhalb des Textblocks */  
  margin-left: 1rem;                /* linker Einzug für Listenbox */  
  margin-bottom: 1.75rem;            /* Abstand nach der Liste */  
}
.datenschutz-page ul li {
  margin-bottom: 0.5rem;            /* Abstand zwischen Listeneinträgen */  
}

/* Datenschutz-Links in var(--color-text-light) */
.datenschutz-page a {
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-decoration: underline;           /* optional: Unterstreichung beibehalten */
  transition: color 0.2s ease-in-out;   /* sanfter Farbwechsel bei Hover */
}
.datenschutz-page a:hover {
  color: var(--color-accent);          /* beim Hover Akzentfarbe nutzen */
}


/* Mobile-Anpassungen für die Datenschutz-Seite */
@media (max-width: 768px) {
  .datenschutz-page {
    padding: 2rem 1rem;             /* reduzierte Abstände mobil */  
  }
  .datenschutz-page h1 {
    font-size: 1.75rem;             /* angepasste Überschrift mobil */  
  }
  .datenschutz-page > p,
  .datenschutz-page h2,
  .datenschutz-page p {
    font-size: 0.95rem;             /* leicht verringerte Schrift mobil */  
    margin-left: 0;                 /* kein Einzug mobil */  
    line-height: 1.6;               /* Zeilenabstand mobil */  
  }
}



/* =================================================================
   13. Produkte-Seite
   (Präsentation von Produktabschnitten mit optionaler Bild/Text-Anordnung
    und Scroll-Reveal-Effekt)
   ================================================================= */
.products-page {
  padding: 4rem 0;                    /* Vertikaler Abstand um den Seiteninhalt */
}

.products-page.container {
  max-width: 1400px;    /* oder 1300/1400px für extra breite Optik */
  margin: 0 auto;
  padding: 14rem 2rem;   /* großzügig für oben/unten und links/rechts */
  padding-bottom: 6rem;
}

.products-logo-img {
  position: absolute;
  top: 10rem;    /* Abstand von oben, z. B. 3.5rem */
  left: 15.5rem;   /* Abstand von links, z. B. 2.5rem */
  max-width: 350px;
  width: auto;
  height: auto;
  z-index: 100;
}
body {
  position: relative; /* wichtig, damit absolute-Positionierung im body-Kontext bleibt */
}


/* Scroll-Reveal: initial unsichtbar und leicht versetzt */
.product-section {
  display: flex;                      /* Bild und Text nebeneinander anordnen */
  align-items: center;                /* Vertikale Zentrierung */
  gap: 4rem 6rem;                          /* Abstand zwischen Bild und Text */
  margin-bottom: 8rem;                /* Abstand zum nächsten Abschnitt */
  opacity: 0;                         /* Unsichtbar, bis der Observer eingreift */
  transform: translateY(35px);        /* Leichter Vertikalversatz für einen feineren Einblend-Effekt */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Sanfte Animation für Reveal */
}

/* Scroll-Reveal: sobald im Viewport, wird sichtbar */
.product-section.visible {
  opacity: 1;                         /* Voll sichtbar nach IntersectionObserver */
  transform: translateY(0);           /* Rücksetzen des Versatzes */
}

/* Basis-Reihenfolge: Bild zuerst, Text danach (Default) */
.product-image,
.product-text {
  order: 0;                           /* Standard-Order für Bild→Text */
}

/* Bild links ↔ Text rechts */
.product-image.left {
  order: 1;                           /* Bild an erste Position */
}
.product-text.right {
  order: 2;                           /* Text an zweite Position */
}

/* Bild rechts ↔ Text links */
.product-image.right {
  order: 2;                           /* Bild an zweite Position */
}
.product-text.left {
  order: 1;                           /* Text an erste Position */
}

/* Bild-Container */
.product-image {
  flex: 1.25;                            /* Bild dehnt sich proportional aus */
}
.product-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  transition: transform 1.3s cubic-bezier(.19,1,.22,1); /* oder ease, oder wie du willst */
}

/* Nur Porträt-Bilder: nicht auf volle Breite zerren */
.product-image img.portrait {            /* nicht zwangsweise 100% breit */
  height: 100%; 
  width: auto;          /* Seitenverhältnis beibehalten */
  max-height: 600px;      /* sinnvolle Obergrenze */
  max-width: 100%;        /* nie breiter als die Spalte */    /* falls Browser Höhe limitiert */
  display: block;         /* sauberes Box-Modell */
  margin: 0 auto;         /* zentrieren in der Spalte */
}

/* (Optional) Spalte mit Portrait etwas schmaler wirken lassen */
.product-image.portrait-col { 
  max-width: 480px;          /* falls nötig, dem div geben */
}

.product-image:hover img {
  transform: scale(1.05); /* oder dein gewünschter Wert, typischerweise 1.05–1.10 für Effekte */
}

.image-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(10, 10, 15, 0.87);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.3s;
  opacity: 1;
}
.image-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.image-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 1rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.33);
}
.image-overlay .close-btn {
  position: absolute;
  top: 2.2rem;
  right: 2.5rem;
  font-size: 2.8rem;
  color: #fff;
  background: rgba(30,30,35,0.6);
  border: none;
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100001;
  transition: background 0.2s;
}
.image-overlay .close-btn:hover {
  background: rgba(255,140,0,0.9);
  color: #222;
}

/* Text-Container */
.product-text {
  flex: 0.8;                            /* Text nimmt gleichen Platz wie Bild ein */
}

.product-text h2 {
  /* KEIN opacity, KEIN transform, KEINE Animation auf opacity/transform! */
  min-height: calc(1.7em * 2.2); /* 2,2 Zeilen Platz (line-height = 1.8) */
  font-size: 1.6rem;                 
  margin-bottom: 2rem;                
  /* Gradient für Text */
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; 
  text-align: left;
  line-height: 1.8;   
  max-width: 80rem;   
  margin: 1rem 0;
}

.product-text h2.visible {
  opacity: 1;
  transition: opacity 0.5s;
}

.product-text p {
  font-size: 1.0rem;                 /* Überschriftgröße */
  margin-bottom: 2rem;                /* Abstand unter der Überschrift */
  color: var(--color-text-light);     /* Konsistente Textfarbe */
  text-align: left;
  line-height: 1.8;       /* schön luftig */
  max-width: 50rem;       /* begrenzt Zeilenlänge */
  margin: 1;

}

/* Call to Action Button */
.cta-section {
  display: flex;
  justify-content: center;
  margin: 4rem 0 2rem 0;
}

.cta-btn {
  display: inline-block;
  font-size: 1.25rem;
  padding: 1.1rem 2.6rem;
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  color: var(--color-text-light);
  border: none;
  border-radius: 2rem;
  box-shadow: 0 4px 24px rgba(255, 140, 26, 0.1);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  cursor: pointer;
}
.cta-btn:hover, .cta-btn:focus {
  background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-accent) 95%);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 44px rgba(255, 140, 26,0.3);
  text-decoration: none;
}

/* section devicder */ 
.section-divider {
  width: 100vw;
  max-width: 100%;
  margin: 2.5rem 0; /* Abstand nach oben/unten */
  height: 30px;     /* Höhe für beide Striche zusammen, wird gleich aufgeteilt */
  position: relative;
  display: flex;
  justify-content: center;
  pointer-events: none; /* Keine Interaktion */
}

.section-divider::before,
.section-divider::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;         /* Dicke der Linie */
  background: var(--color-footer); /* Footer-Farbe (definiere sie im :root, z.B. #232323) */
  border-radius: 2px;
}

.section-divider::before {
  top: 0;
}
.section-divider::after {
  bottom: 0;
}

/* Responsive Anpassungen für Mobile */
@media (max-width: 768px) {
  .product-section {
    flex-direction: column;           /* Bild und Text gestapelt */
    text-align: center;               /* Zentrierter Inhalt */
  }
  .product-image,
  .product-text {
    order: unset !important;          /* Reihenfolge im Mobile-Layout zurücksetzen */
  }
  .product-image img {
    max-width: 80%;                   /* Begrenzte Bildbreite für Mobil */
    margin: 0 auto 1.5rem;            /* Zentrierung und Abstand unten */
  }
}


/* =================================================================
   14. Über uns Seite – flexibles Layout via CSS-Variablen
   ================================================================= */
.about-page {
  padding: 4rem 0;                     /* Abstand oben und unten um den gesamten Bereich */
}

/* Intro-Block */
.about-intro {
  max-width: 1200px;                   /* maximale Breite des Einleitungstextes */
  margin: 0 auto 2.5rem;                 /* zentriert und Abstand nach unten */
  text-align: justify;                 /* Blocksatz für den Einleitungstext */
}
.about-intro h1 {
  font-size: 2.5rem;                   /* Schriftgröße der Hauptüberschrift */
  color: var(--color-text-light);      /* Überschriftfarbe */
  margin-bottom: 3rem;                 /* Abstand zum folgenden Text */
  text-align: center;                  /* Überschrift zentriert */
}
.about-intro p {
  font-size: 1.125rem;                 /* Schriftgröße des Einleitungstextes */
  line-height: 1.6;                    /* Zeilenhöhe für Lesbarkeit */
  color: var(--color-text-light);      /* Textfarbe gemäß Design */
}

/* Dynamische Content-Abschnitte */
.about-content {
  display: flex;                       /* Flex-Layout für Bild/Text nebeneinander */
  align-items: center;                 /* vertikale Zentrierung der Elemente */
  gap: var(--about-gap, 1.5rem);       /* einstellbarer Zwischenraum */
  margin-bottom: var(--about-margin, 3rem); /* einstellbarer Abstand nach unten */
}

.about-content-logo-img {
  position: absolute;
  top: 10rem;    /* Abstand von oben, z. B. 3.5rem */
  left: 15.5rem;   /* Abstand von links, z. B. 2.5rem */
  max-width: 350px;
  width: auto;
  height: auto;
  z-index: 100;
}
body {
  position: relative; /* wichtig, damit absolute-Positionierung im body-Kontext bleibt */
}

/* Bild-Container: Flex-Basis und Reihenfolge via Variablen steuerbar */
.about-content .about-image {
  flex: var(--about-img-flex, 1);      /* anteilige Breite des Bildbereichs */
  order: var(--about-img-order, 0);    /* Reihenfolge im Flex-Layout */
  min-width: 0;                        /* verhindert Überschreiten des Containers */
}
.about-content .about-image img {
  width: 100%;                         /* füllt den Container aus */
  height: auto;                        /* behält das Seitenverhältnis bei */
  display: block;                      /* entfernt Inline-Abstände */
  border-radius: 0.5rem;               /* abgerundete Ecken */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* sanfter Schatten */
  max-width: 100%;                     /* überschreitet nicht Container-Breite */
}

/* Text-Container: Flex-Basis und Reihenfolge via Variablen steuerbar */
.about-content .about-text {
  flex: var(--about-text-flex, 1);     /* anteilige Breite des Textbereichs */
  order: var(--about-text-order, 1);   /* Reihenfolge im Flex-Layout */
}
.about-content .about-text h2 {
  font-size: 1.75rem;                  /* Größe der Abschnittsüberschrift */
  color: var(--color-text-light);          /* Akzentfarbe für Überschrift */
  margin-bottom: 0.75rem;              /* Abstand zum Text */
}
.about-content .about-text p,
.about-content .about-text ul {
  font-size: 1rem;                     /* Schriftgröße für Fließtext und Listen */
  line-height: 1.6;                    /* Zeilenhöhe für Lesbarkeit */
  color: var(--color-text-light);		/* Textfarbe gemäß Design */
  text-align: justify;  
}
.about-content .about-text ul {
  list-style: disc inside;             /* Aufzählungszeichen einrücken */
  margin: 0;                           /* kein zusätzlicher Außenabstand */
  padding-left: 1rem;                  /* eingerückte Listenpunkte */
}

/* Abstand zwischen einzelnen Listenelementen */
.about-content ul li {
  margin-bottom: 1rem;          /* Leerzeile nach jedem Bullet */
  line-height: 1.5;             /* Zeilenhöhe für Umbrüche im selben Bullet */
}

/* Mobil-Fallback: bei schmalen Bildschirmen alle Elemente untereinander */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column !important; /* zwingende Spalten-Anordnung */
    text-align: center;                /* Text zentriert */
  }
  .about-content .about-image,
  .about-content .about-text {
    order: unset !important;           /* Reihenfolge aufheben */
    flex: unset;                       /* Flex-Basis zurücksetzen */
  }
  .about-content .about-image img {
    max-width: 80%;                    /* Bild schmaler als Container */
    margin: 0 auto 1.5rem;             /* Abstand nach unten */
  }
}

/* =================================================================
   15. Team Page
   ================================================================= */
.team-page {
  padding: 3rem 0;                    /* Vertikaler Abstand */
  text-align: center;                 /* Zentrierter Haupttitel */
  background: url("../assets/white_grey_bg.svg") no-repeat center/cover; /* Hintergrundbild */
  color: #121212;                     /* Schriftfarbe im Team-Bereich */ 
}
.team-page h1 {
  font-size: 3rem;                    /* Haupttitelgröße */
  margin-bottom: 2.5rem;                /* Abstand zum Grid */
}
.team-grid {
  display: flex;                      /* Flex-Container für Karten */
  flex-wrap: wrap;                    /* Mehrere Zeilen werden erlaubt */
  justify-content: center;            /* Zentrierung der Zeilen */  
  gap: 3rem;                          /* Abstand zwischen Karten */
}
.team-card {
  flex: 0 0 360px;                    /* Fixe Kartengröße */
}
.team-card {
  position: relative;                 /* Positionierungsbasis Avatar */
  margin-top: 6rem;                   /* Platz für Avatar oberhalb */
  height: 200px;                      /* Fixe Kartenhöhe */
  background: url("../assets/card_bg.png") no-repeat center/cover; /* Kartenhintergrund */
  border-radius: 1rem;                /* Abgerundete Kartenecken */
  overflow: visible;                  /* Avatar wird nicht abgeschnitten */
  box-shadow: 0 4px 12px rgba(0,0,0,0.6); /* Schatten unter Karte */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover-Effekte */
}
.team-card:hover {
  transform: translateY(-0.5rem) scale(1.03); /* Leichter Lift-Effekt */
  box-shadow: 0 8px 20px rgba(0,0,0,0.8);      /* Stärkerer Schatten bei Hover */
}
.card-image {
  position: absolute;                 /* Avatar wird absolut platziert */
  top: 0; left: 50%;                  /* Horizontale Zentrierung */
  transform: translate(-50%, -50%);  /* Vertikale / horizontale Anpassung */
  z-index: 2;                         /* Avatar über Kartentext */
  width: 180px; height: 180px;        /* Fixe Avatardimensionen */
  border: 4px solid #fff;            /* Weißer Rand um Avatar */  
  border-radius: 50%;                 /* Rundung für Kreisform */
  overflow: hidden;                   /* Beschnitt des Bildes */
  background: #fff;                   /* Hintergrund des Avatars */
}
.card-image img {
  width: 100%; height: 100%;          /* Bild füllt Avatar-Container */
  object-fit: cover;                  /* Bildverhältnis beibehalten */
  transition: transform 0.3s ease;    /* Zoom-Effekt bei Hover */
}
.team-card:hover .card-image img {
  transform: scale(1.1);              /* Zoom des Avatars bei Hover */
}
.card-info {
  position: absolute;  
  bottom: 0;                           /* Infobereich am Kartenboden */
  width: 100%;                         /* Volle Kartenbreite */  
  padding: 1rem 0;                     /* Vertikaler Innenabstand */
  background: rgba(0, 0, 0, 0.0);       /* Transparenter Hintergrund */
  text-align: center;                  /* Zentrierter Text */
  z-index: 1;                          /* Unterhalb des Avatars */
}
.card-info h3 {
  margin: 0;                           /* Keine zusätzlichen Abstände */
  font-size: 1.75rem;                  /* Schriftgröße Teamname */
  color: #121212;                      /* Schriftfarbe */
}
.card-info p {
  margin: 0.3rem 0 0;                 /* Abstand oberhalb der Beschreibung */
  font-size: 1.1rem;                   /* Schriftgröße Beschreibung */  
  color: #121212;                      /* Textfarbe */
}

/* =================================================================
   16. Kontakt-Seite
   ================================================================= */
.contact-page {
  padding: 4rem 0;
}
.contact-page h1 {
  font-size: 2.4rem;                 /* etwas größer */
  margin-bottom: 2rem;
  text-align: left;
  color: var(--color-text-light);     /* weiß */
  background: none;                   /* kein Verlauf */
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* zwei Spalten */
  gap: 3rem;
  align-items: start;
}

/* Textlinks mit Verlauf – Buttons ausnehmen */
.contact-page a:not(.btn):not(.cta-btn) {
  background: linear-gradient(90deg, #ffbb33, #ff9800, #ff681a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  transition: transform .2s, border-bottom .2s, text-decoration .2s;
}
.contact-page a:not(.btn):not(.cta-btn):hover,
.contact-page a:not(.btn):not(.cta-btn):focus {
  transform: scale(1.05);
  border-bottom: 1px solid var(--color-accent);
  text-decoration: underline;
}

/* Rechter Block: Adresse  + Logo (als Einheit rechtsbündig) */
.contact-art{ align-self:start; } 
.contact-stack{
  width: 60%;                                         /* = Logobreite */
  margin-left: auto;                                  /* Block nach rechts */
  display:flex; flex-direction:column; gap:.75rem;
  align-items:flex-start;                              /* innen linksbündig */
  margin-top:1.2rem;                                    /* Feintuning Höhe – ggf. 0–1rem anpassen */
}
.contact-side{ text-align:left; }
.contact-side p { margin: 0 0 .25rem 0; }

/* Icon-Link ohne Verlauf */
.contact-side .social a {
  background: none;
  -webkit-text-fill-color: initial;
}
.contact-side .social img {
  width: 1.5rem;
  height: auto;
  opacity: .8;
  transition: opacity .2s, transform .2s;
}
.contact-side .social a:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* Logo: 60% Breite */
.contact-logo{ width:100%; height:auto; }  


/* Mobile: einspaltig, linksbündig */
@media (max-width: 768px) {
  .contact-stack{ width:70%; margin-left:0; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-art {
    align-self: start;
    align-items: flex-start;
  }
  .contact-side { text-align: left; }
  .contact-logo { max-width: 60%; }
}

/* Produkte: flackerfreie Scroll-Reveal */
.product-section {
  will-change: opacity, transform; /* Browser kann Layer vorbereiten */
}

.product-image img {
  /* eigenes GPU-Layer fürs Bild -> weniger Repaint/Flicker */
  will-change: transform;
  transform: translateZ(0);                /* oder translate3d(0,0,0) */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}