/* ============================================================================
   PERMEA TERRA — HAUPT-STYLESHEET
   ============================================================================
   Ein einzelnes Stylesheet für die gesamte Website (Startseite, Impressum,
   Datenschutz). Farben, Schriften und Radien stehen als Design-Tokens ganz
   oben unter :root — bei Design-Änderungen dort zuerst nachsehen, statt
   Werte an anderer Stelle einzeln zu überschreiben.

   Inhaltsverzeichnis:
     1.  Design-Tokens
     2.  Reset & Basiselemente
     3.  Hilfsklassen
     4.  Navigation
     5.  Sprachumschalter
     6.  Hero
     7.  Lösungen-Sektion
     8.  Anwendungsbereiche
     9.  Produkte (Karten + Modal + Datenblatt-Komponente)
     10. Nachhaltigkeits-Band
     11. Kontakt-Sektion
     12. Footer
     13. Toast
     14. Animationen
     15. Responsive
     16. Rechtsseiten (Impressum / Datenschutz)
     17. Markenname zweifarbig ("PERMEA" grün / "TERRA" grau)
   ==========================================================================*/

/* ============================================================================
   1. DESIGN-TOKENS
   ==========================================================================*/
:root {
  --color-forest:      #004723;  /* Primäres Markengrün: Navbar-Logo, Footer, Buttons */
  --color-forest-dark: #00311A;  /* Dunkler für Hover/aktive Zustände */
  --color-leaf:        #167A3D;  /* Akzent-Grün: Icons, Häkchen, Hover */
  --color-leaf-light:  #E5F1E9;  /* Blasses Grün für Icon-Kreise/Badges */
  --color-water:       #2E9E52;  /* Zweites, helleres Grün für Verläufe/Akzente */
  --color-water-light: #DCEFE1;
  --color-stone:       #6C7168;
  --color-stone-dark:  #454A43;

  --color-sand:        #F7F7F5;  /* Seitenhintergrund (nahezu Weiß) */
  --color-sand-2:      #EDEDEA;
  --color-white:       #FFFFFF;
  --color-ink:         #171A16;
  --color-mist:        #5B6058;
  --color-mist-on-dark:#B9C7BD;

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 26px;
  --shadow-soft: 0 10px 34px rgba(20, 51, 39, 0.10);
  --shadow-strong: 0 24px 60px rgba(20, 51, 39, 0.22);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.18s var(--ease-standard);
  --transition-med: 0.4s var(--ease-standard);

  --section-pad-y: clamp(3.5rem, 7vw, 6.5rem);
  --navbar-height: 78px;
}

/* ============================================================================
   2. RESET & BASISELEMENTE
   ==========================================================================*/
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 12px);
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-sand);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-forest-dark);
}

p { line-height: 1.7; margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; -webkit-user-select: none; user-select: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
::selection { background: var(--color-leaf); color: var(--color-white); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-leaf);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--color-water);
  display: inline-block;
}

/* ============================================================================
   3. HILFSKLASSEN
   ==========================================================================*/
.section { padding-block: var(--section-pad-y); }
.section-tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.bg-forest { background: var(--color-forest); color: var(--color-white); }
.bg-forest h2, .bg-forest .h1 { color: var(--color-white); }
.bg-sand-2 { background: var(--color-sand-2); }
.text-mist { color: var(--color-mist); }
.max-w-content { max-width: 640px; }
.divider-line { width: 60px; height: 3px; background: var(--color-water); border: none; margin: 1.25rem 0 1.5rem; }

.btn-forest {
  background-color: var(--color-leaf);
  border-color: var(--color-leaf);
  color: var(--color-white);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.btn-forest:hover, .btn-forest:focus {
  background-color: var(--color-forest-dark);
  border-color: var(--color-forest-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-outline-forest {
  background-color: transparent;
  border: 1.5px solid var(--color-forest-dark);
  color: var(--color-forest-dark);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.btn-outline-forest:hover { background-color: var(--color-forest-dark); color: var(--color-white); }
.btn-outline-light-custom {
  background-color: transparent;
  border: 1.5px solid rgba(255,255,255,0.55);
  color: var(--color-white);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.btn-outline-light-custom:hover { background-color: rgba(255,255,255,0.12); border-color: var(--color-white); color: var(--color-white); }

/* ============================================================================
   4. NAVIGATION
   ==========================================================================*/
.navbar-ps {
  padding-block: 0.85rem;
  background-color: rgba(243, 239, 230, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  will-change: transform;
  transition: padding var(--transition-med), box-shadow var(--transition-med);
  border-bottom: 1px solid rgba(31,78,60,0.08);
}
.navbar-ps.is-scrolled { padding-block: 0.45rem; box-shadow: 0 8px 30px rgba(20,51,39,0.1); }

.navbar-ps .navbar-brand { display: flex; align-items: center; gap: 0.6rem; }
.navbar-ps .navbar-brand img { height: 56px; width: auto; transition: height var(--transition-med); }
@media (min-width: 1200px) {
  .navbar-ps .navbar-brand img { height: 80px; }
}
.navbar-ps.is-scrolled .navbar-brand img { height: 44px; }
@media (min-width: 1200px) {
  .navbar-ps.is-scrolled .navbar-brand img { height: 58px; }
}
.navbar-ps .navbar-brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-forest-dark);
  font-size: 1.05rem;
  line-height: 1.1;
}
.navbar-ps .navbar-brand-text small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-mist);
}

.navbar-ps .nav-link {
  color: var(--color-stone-dark);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem 1rem !important;
  border-radius: 999px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.navbar-ps .nav-link:hover, .navbar-ps .nav-link.active {
  color: var(--color-forest-dark);
  background: var(--color-leaf-light);
}
.navbar-ps .navbar-toggler { border: none; padding: 0.25rem 0.5rem; }
.navbar-ps .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(63,143,95,0.3); }

/* ============================================================================
   5. SPRACHUMSCHALTER
   ----------------------------------------------------------------------------
   Aktuell ist nur Deutsch befüllt. Die Buttons für ES/EN sind vorbereitet
   (siehe main.js) und zeigen momentan einen "bald verfügbar"-Hinweis, statt
   leere Inhalte auszuliefern.
   ==========================================================================*/
.lang-switch {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid rgba(31,78,60,0.16);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch a {
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  color: var(--color-mist);
  text-decoration: none;
  display: inline-block;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.lang-switch a.is-active { background: var(--color-forest); color: var(--color-white); }
.lang-switch a:hover:not(.is-active) { background: var(--color-sand-2); color: var(--color-forest-dark); }

/* ============================================================================
   6. HERO
   ==========================================================================*/
.hero {
  position: relative;
  padding-top: calc(var(--navbar-height) + clamp(3rem, 8vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  color: var(--color-white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform;
  background-color: var(--color-forest-dark);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center top;
  /* Reihenfolge = Stapelung von oben nach unten:
     1) dunkler Schleier für Lesbarkeit der Texte/Buttons davor
     2) weicher Rand-Verlauf, der das Foto links/rechts in die grüne
        Hintergrundfarbe übergehen lässt (greift v.a. auf sehr breiten
        Screens, wenn das Foto in Originalgröße nicht bis zum Rand reicht)
     3) das Foto selbst, mittig, in Originalgröße auf 100% Höhe skaliert
        (kein "cover" — dadurch bleibt es unverzerrt und bricht bewusst
        seitlich ab, siehe Punkt 2) */
  background-image:
    linear-gradient(180deg, rgba(0,49,26,0.58) 0%, rgba(0,49,26,0.72) 100%),
    linear-gradient(to right, var(--color-forest-dark) 0%, rgba(0,49,26,0) 14%, rgba(0,49,26,0) 86%, var(--color-forest-dark) 100%),
    url('../img/hero-bg.jpg');
  background-size: cover, cover, auto 100%;
}
.hero > .container { position: relative; z-index: 1; }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-water);
  margin-bottom: 1rem;
}
.hero__title {
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 1.1rem;
}
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--color-white);
  margin-bottom: 1rem;
}
.hero__sub {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-mist-on-dark);
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Bildbereich rechts im Hero: zeigt aktuell die Wasserdurchlässigkeits-
   Illustration (.hero__illustration) in einer Glas-Karte mit Lichtschein
   (::before) und Bodenschatten (::after). Bild austauschen: einfach das
   <img class="hero__illustration"> in index.html ersetzen. */
.hero__products {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/3;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.hero__products::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(ellipse at center, rgba(143,214,168,0.35) 0%, rgba(143,214,168,0) 70%);
  z-index: 0;
}
.hero__products::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 62%;
  height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 72%);
  z-index: 0;
}
.hero__illustration {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,0.3));
}

/* Wiederverwendbare Bild-Platzhalter-Komponente: aktuell nirgends im Einsatz
   (alle Bildstellen sind mit echten Fotos befüllt), aber praktisch für
   künftige neue Abschnitte, bevor ein passendes Bild vorliegt. */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(0,0,0,0.18);
  background: var(--color-sand-2);
  color: var(--color-mist);
}
.img-placeholder i { font-size: clamp(1.75rem, 6vw, 2.5rem); opacity: 0.6; }
.img-placeholder span { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.img-placeholder--wide { aspect-ratio: 4/3; height: auto; }
.img-placeholder--tall { aspect-ratio: 4/3; height: auto; margin-bottom: 1.75rem; }
.img-placeholder--light {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.75);
}
.img-placeholder--light i { opacity: 0.85; }

/* Feature-Icon-Reihe: 6 kurze Merkmale mit Icon, direkt nach dem Hero, kein eigener Nav-Punkt */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.feature-item { text-align: center; position: relative; }
.feature-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -0.75rem; /* mittig im 1.5rem-Gap zwischen den Spalten (halber Gap-Wert) */
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: rgba(0,0,0,0.12);
}
.feature-item__icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--color-leaf-light);
  color: var(--color-forest);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto;
  margin-bottom: 0.85rem;
  font-size: 1.3rem;
}
.feature-item span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--color-stone-dark);
  line-height: 1.3;
}
@media (max-width: 991.98px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .feature-item:nth-child(3n+1)::before { display: none; }
}
@media (max-width: 575.98px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-item:nth-child(3n+1)::before { display: block; }
  .feature-item:nth-child(odd)::before { display: none; }
}

/* Service-Strip: Für Planer, GaLaBau-Betriebe & Einkäufer */
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.4rem;
  height: 100%;
  text-align: left;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.service-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-forest);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.service-card strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--color-forest-dark); margin-bottom: 0.4rem; }
.service-card span { color: var(--color-mist); font-size: 0.88rem; }

/* ============================================================================
   7. LÖSUNGEN-SEKTION
   ==========================================================================*/
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li {
  display: flex; gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(31,78,60,0.08);
  animation: fadeSlideIn 0.4s var(--ease-standard) both;
}
.why-list li:last-child { border-bottom: none; }
.why-list .why-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-leaf-light);
  color: var(--color-forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.why-list strong { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.why-list span { color: var(--color-mist); font-size: 0.94rem; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.why-media {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  background: var(--color-white);
  padding: 2.25rem 2rem 2rem;
}
.why-media__illustration {
  position: relative;
  aspect-ratio: 4/3;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-media__illustration::before {
  content: "";
  position: absolute;
  inset: 6%;
  background: radial-gradient(ellipse at center, var(--color-leaf-light) 0%, rgba(229,241,233,0) 70%);
}
.why-media__illustration::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 60%;
  height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 72%);
}
.why-media__illustration img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.16));
}
.why-media__badge {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(31,78,60,0.1);
}
.why-media__badge-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-leaf-light);
  color: var(--color-forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.why-media__badge-text { display: flex; flex-direction: column; line-height: 1.35; }
.why-media__badge-text strong {
  font-family: var(--font-display);
  font-size: 0.96rem;
  color: var(--color-forest-dark);
  font-weight: 700;
}
.why-media__badge-text small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-mist);
}

/* ============================================================================
   8. ANWENDUNGSBEREICHE
   ==========================================================================*/
.app-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-forest);
  display: flex; align-items: flex-end;
  padding: 1.1rem;
  isolation: isolate;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.app-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--color-forest) 0%, var(--color-water) 130%);
  z-index: -2;
}
.app-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(1.28) saturate(1.05);
  transition: transform var(--transition-med);
}
.app-card:hover .app-card__photo { transform: scale(1.05); }
.app-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,51,39,0.62) 0%, rgba(20,51,39,0.08) 55%, transparent 75%);
  z-index: -1;
}
.app-card span {
  position: relative;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ============================================================================
   9. PRODUKTE (KARTEN + MODAL)
   ==========================================================================*/
.product-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  height: 100%;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column;
  /* Reset der nativen <button>-UA-Stile: Browser setzen sonst eigenes,
     asymmetrisches Padding (z.B. Chrome: 1px oben/unten, 6px links/rechts)
     und ignorieren border-radius teilweise ohne appearance:none. */
  padding: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  color: inherit;
}
.product-card:hover, .product-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.product-card__img {
  aspect-ratio: 4/3;
  background: var(--color-sand-2);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  /* Konzentrischer Radius zum äußeren Button: außen var(--radius-md) 12px,
     minus 4px Button-Padding = 8px innen, damit beide Rundungen optisch
     denselben Mittelpunkt teilen statt eckig gegen die Rundung zu stoßen. */
  border-radius: calc(var(--radius-md) - 4px) calc(var(--radius-md) - 4px) 0 0;
  overflow: hidden;
}
.product-card__img img { max-height: 100%; object-fit: contain; }
.product-card__body { padding: 1.4rem; flex-grow: 1; display: flex; flex-direction: column; }
.product-card__tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-water); margin-bottom: 0.35rem; }
.product-card__body h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.product-card__body p { color: var(--color-mist); font-size: 0.9rem; flex-grow: 1; }
.product-card__checks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex-grow: 1;
}
.product-card__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-ink);
  padding-block: 0.2rem;
}
.product-card__checks li i { color: var(--color-leaf); margin-top: 0.15rem; flex-shrink: 0; font-size: 0.85rem; }
.product-card__cta {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-forest-dark);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.product-card__cta i { transition: transform var(--transition-fast); }
.product-card:hover .product-card__cta i { transform: translateX(4px); }

/* Produkt-Modal (Bootstrap-Chrome) */
#productModal .modal-dialog { max-width: 980px; }
#productModal .modal-content { border-radius: var(--radius-lg); border: none; overflow: hidden; }
#productModal .modal-body { padding: 0; }
#productModal .btn-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  background-color: var(--color-white); opacity: 1;
  border-radius: 50%; width: 2rem; height: 2rem;
  background-size: 0.75rem;
  box-shadow: var(--shadow-soft);
}
#productModal .modal-footer {
  border-top: 1px solid rgba(31,78,60,0.1);
  padding: 1.1rem 1.75rem;
  background: var(--color-white);
  display: block;
}
#productModal .modal-footer .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   DATENBLATT-KOMPONENTE ("datasheet")
   Wird per JS (renderDatasheetHTML in main.js) sowohl ins Produkt-Modal als
   auch in die eigenständige Druckvorlage datenblatt.html injiziert — beide
   Ausgaben nutzen exakt dieselbe Markup-/CSS-Struktur, damit der PDF-Export
   (Playwright print-to-pdf von datenblatt.html) optisch identisch zur
   Modal-Ansicht auf der Website ist.
   ==========================================================================*/
.datasheet { background: var(--color-white); color: var(--color-ink); }
.datasheet__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}
.datasheet__main { padding: 2rem 1.85rem; }
.datasheet__aside {
  background: var(--color-forest);
  color: var(--color-white);
  padding: 1.75rem 1.6rem;
}

/* Kopf: Produktfoto + Name/Tag/Belastungs-Icon */
.datasheet__top { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.datasheet__photo { width: 128px; flex-shrink: 0; }
.datasheet__photo img { width: 100%; height: auto; object-fit: contain; }
.datasheet__heading { flex-grow: 1; }
.datasheet__badge-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.datasheet__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--color-forest-dark); background: var(--color-sand-2);
  padding: 0.3rem 0.85rem; border-radius: var(--radius-sm); display: inline-block;
}
.datasheet__load-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-leaf-light); color: var(--color-forest);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  margin-left: auto; flex-shrink: 0;
}
.datasheet__tag { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-ink); margin-bottom: 0.2rem; }
.datasheet__subtag { font-size: 0.86rem; color: var(--color-mist); }

/* Quick-Info Kacheln (Anwendung / Mörtel / Mischen / Bedingungen) */
.datasheet__quickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.datasheet__quickitem { display: flex; gap: 0.7rem; align-items: flex-start; }
.datasheet__quickicon {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1.5px solid var(--color-forest); border-radius: var(--radius-sm);
  color: var(--color-forest);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.datasheet__quickitem strong { display: block; font-family: var(--font-display); font-size: 0.86rem; color: var(--color-forest-dark); margin-bottom: 0.15rem; }
.datasheet__quickitem span { font-size: 0.82rem; color: var(--color-mist); line-height: 1.45; }

/* Inhalt/Gewicht-Badge + Zertifikate */
.datasheet__metarow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 0.9rem 1rem; background: var(--color-sand); border-radius: var(--radius-sm); margin-bottom: 1.75rem; }
.datasheet__weight { display: flex; align-items: center; gap: 0.7rem; }
.datasheet__weight-badge {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-forest); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; text-align: center; line-height: 1.1;
}
.datasheet__weight-text strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--color-forest-dark); }
.datasheet__weight-text span { font-size: 0.76rem; color: var(--color-mist); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.datasheet__certs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.datasheet__cert {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--color-forest-dark);
  border: 1px solid rgba(31,78,60,0.3); border-radius: 999px;
  padding: 0.35rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem;
}
.datasheet__cert i { color: var(--color-leaf); }

/* Titel + Fließtext + Eigenschaften-Checkliste */
.datasheet__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-forest-dark); margin-bottom: 0.6rem; }
.datasheet__desc { color: var(--color-mist); font-size: 0.94rem; margin-bottom: 1.25rem; }
.datasheet__checklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.datasheet__checklist li { display: flex; gap: 0.5rem; align-items: flex-start; padding-block: 0.3rem; font-size: 0.88rem; color: var(--color-ink); break-inside: avoid; }
.datasheet__checklist i { color: var(--color-leaf); margin-top: 0.15rem; flex-shrink: 0; }

/* Rechte Spalte: TECHNISCHE DATEN */
.datasheet__aside-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--color-forest-dark);
  margin: -1.75rem -1.6rem 1.5rem; padding: 1.1rem 1.6rem;
}
.datasheet__techitem { display: flex; gap: 0.85rem; align-items: flex-start; padding-block: 0.9rem; border-top: 1px solid rgba(255,255,255,0.14); }
.datasheet__techitem:first-of-type { border-top: none; padding-top: 0; }
.datasheet__techicon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #8FD6A8;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.datasheet__techitem strong { display: block; font-family: var(--font-display); font-size: 0.86rem; color: var(--color-white); margin-bottom: 0.25rem; }
.datasheet__techitem p { font-size: 0.8rem; color: var(--color-mist-on-dark); line-height: 1.5; margin: 0; }
.datasheet__techitem small { display: block; font-size: 0.72rem; color: rgba(185,199,189,0.7); margin-top: 0.3rem; font-style: italic; }
.datasheet__techitem .datasheet__techbadge {
  display: inline-block; margin-top: 0.4rem; background: var(--color-leaf); color: var(--color-white);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm);
}

/* Fußnote bei unvollständigen technischen Daten */
.datasheet__note {
  font-size: 0.75rem; color: var(--color-mist-on-dark);
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: 0.9rem; margin-top: 0.4rem;
}

@media (max-width: 767.98px) {
  .datasheet__grid { grid-template-columns: 1fr; }
  .datasheet__quickgrid { grid-template-columns: 1fr; }
  .datasheet__checklist { columns: 1; }
  .datasheet__top { flex-direction: column; }
  .datasheet__load-icon { margin-left: 0; }
}

/* Eigenständige Druckseite (datenblatt.html) — rahmt die Komponente wie ein
   Blatt Papier für den sauberen PDF-Export via Playwright. */
.datasheet-page { max-width: 900px; margin-inline: auto; padding: 24px; background: var(--color-sand-2); }
.datasheet-page .datasheet { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-strong); }

/* Druckoptimierung: kompaktere Abstände/Schriftgrößen, damit ein Datenblatt
   zuverlässig auf eine einzelne A4-Seite passt (für den PDF-Export). */
@media print {
  .datasheet__grid { grid-template-columns: 1.5fr 1fr !important; }
  .datasheet__main { padding: 1.1rem 1.15rem; }
  .datasheet__aside { padding: 1.1rem 1rem; }
  .datasheet__aside-title { margin: -1.1rem -1rem 0.9rem; padding: 0.7rem 1rem; font-size: 0.92rem; }
  .datasheet__top { margin-bottom: 0.85rem; gap: 1rem; }
  .datasheet__photo { width: 92px; }
  .datasheet__name { font-size: 1.2rem; padding: 0.22rem 0.65rem; }
  .datasheet__tag { font-size: 0.92rem; }
  .datasheet__subtag { font-size: 0.76rem; }
  .datasheet__quickgrid { gap: 0.6rem; margin-bottom: 0.85rem; }
  .datasheet__quickicon { width: 26px; height: 26px; font-size: 0.75rem; }
  .datasheet__quickitem strong { font-size: 0.76rem; }
  .datasheet__quickitem span { font-size: 0.71rem; line-height: 1.3; }
  .datasheet__metarow { padding: 0.55rem 0.75rem; margin-bottom: 0.9rem; }
  .datasheet__weight-badge { width: 34px; height: 34px; font-size: 0.58rem; }
  .datasheet__weight-text strong { font-size: 0.86rem; }
  .datasheet__weight-text span { font-size: 0.64rem; }
  .datasheet__cert { font-size: 0.52rem; padding: 0.22rem 0.5rem; }
  .datasheet__title { font-size: 1rem; margin-bottom: 0.4rem; }
  .datasheet__desc { font-size: 0.78rem; margin-bottom: 0.7rem; line-height: 1.45; }
  .datasheet__checklist li { font-size: 0.74rem; padding-block: 0.16rem; }
  .datasheet__techitem { padding-block: 0.5rem; }
  .datasheet__techicon { width: 26px; height: 26px; font-size: 0.75rem; }
  .datasheet__techitem strong { font-size: 0.74rem; margin-bottom: 0.1rem; }
  .datasheet__techitem p { font-size: 0.68rem; line-height: 1.35; }
  .datasheet__techitem small { font-size: 0.62rem; margin-top: 0.15rem; }
  .datasheet__note { font-size: 0.64rem; padding-top: 0.6rem; }
  .datasheet-page { padding: 0; }
  .datasheet-page .datasheet { box-shadow: none; }
}

/* ============================================================================
   10. NACHHALTIGKEITS-BAND
   ==========================================================================*/
.sustain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.sustain-item { text-align: center; }
.sustain-item .num {
  font-family: var(--font-mono); font-size: 0.75rem; color: #8FD6A8;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: 0.9rem;
}
.sustain-item strong { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 0.4rem; color: var(--color-white); }
.sustain-item span { font-size: 0.88rem; color: var(--color-mist-on-dark); }

/* ============================================================================
   11. KONTAKT-SEKTION
   ==========================================================================*/
.contact-card { background: var(--color-forest); color: var(--color-white); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem); }
.contact-card__avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-leaf); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 1.1rem;
}
.contact-line { display: flex; align-items: center; gap: 0.8rem; padding-block: 0.6rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.94rem; }
.contact-line:first-of-type { border-top: none; }
.contact-line i { color: #8FD6A8; flex-shrink: 0; width: 18px; text-align: center; }

.form-control-ps {
  background: var(--color-sand-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  width: 100%;
}
.form-control-ps:focus {
  background: var(--color-white);
  border-color: var(--color-leaf);
  box-shadow: 0 0 0 3px rgba(63,143,95,0.18);
  outline: none;
}
.form-control-ps.is-invalid {
  border-color: #C0392B;
  background: #FBEAE8;
}
.form-control-ps.is-invalid:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.16);
}
.form-field-error {
  color: #C0392B;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.form-field-error::before {
  content: "\26A0";
  font-size: 0.75rem;
}
label.form-label-ps {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-mist); margin-bottom: 0.4rem; display: block;
}

/* ============================================================================
   12. FOOTER
   ==========================================================================*/
.site-footer { background: var(--color-forest-dark); color: var(--color-mist-on-dark); padding-block: 3rem 2rem; }
.site-footer a:hover { color: var(--color-leaf); }
.site-footer ul.list-unstyled { padding-left: 0; }
.site-footer ul.list-unstyled li {
  position: relative;
  padding-left: 1.15rem;
}
.site-footer ul.list-unstyled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-leaf);
}
.footer-logo { height: 34px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-divider { border-color: rgba(255,255,255,0.1); margin-block: 2rem; }
.social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.social-icon:hover { background: var(--color-leaf); border-color: var(--color-leaf); color: var(--color-white); }

/* ============================================================================
   13. TOAST
   ==========================================================================*/
.toast-ps { background: var(--color-forest); color: var(--color-white); border: none; border-left: 4px solid var(--color-leaf); }
.toast-ps .toast-header { background: transparent; color: var(--color-white); border-bottom-color: rgba(255,255,255,0.08); }
.toast-ps .btn-close { filter: invert(1); }

/* ============================================================================
   14. ANIMATIONEN
   ==========================================================================*/
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-water); outline-offset: 2px; }

/* ============================================================================
   15. RESPONSIVE
   ==========================================================================*/
@media (max-width: 991.98px) {
  .sustain-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__actions { justify-content: center; }
  .hero__products { margin-top: 1.5rem; }
}
@media (max-width: 767.98px) {
  :root { --section-pad-y: 3rem; }
}
@media (max-width: 575.98px) {
  .hero h1 { max-width: 100%; }
  .sustain-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 400px) {
  .sustain-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   16. RECHTSSEITEN (Impressum / Datenschutz)
   ==========================================================================*/
.page-hero {
  padding-top: calc(var(--navbar-height) + clamp(2rem, 6vh, 3.5rem));
  padding-bottom: clamp(2rem, 5vh, 3rem);
  background: linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-dark) 100%);
  color: var(--color-white);
}
.page-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-mist-on-dark);
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem;
}
.page-hero .breadcrumb a:hover { color: var(--color-white); }
.page-hero h1 { color: var(--color-white); font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.page-hero p { color: var(--color-mist-on-dark); max-width: 60ch; margin-top: 0.85rem; }

.legal-content { max-width: 760px; }
.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--color-sand-2);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-size: 1.02rem;
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
  color: var(--color-forest);
  font-family: var(--font-display);
}
.legal-content p, .legal-content li { color: var(--color-mist); font-size: 0.98rem; }
.legal-content strong { color: var(--color-ink); }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--color-forest); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--color-leaf); }

.legal-toc {
  background: var(--color-white);
  border: 1px solid rgba(31,78,60,0.1);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-soft);
}
.legal-toc strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-forest-dark);
}
.legal-toc ol { columns: 2; column-gap: 2rem; margin-bottom: 0; font-size: 0.92rem; padding-left: 1.1rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .legal-toc ol { columns: 1; } }

.legal-notice-box {
  background: var(--color-leaf-light);
  border-left: 4px solid var(--color-leaf);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
  font-size: 0.92rem;
  color: var(--color-ink);
}
.legal-notice-box strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--color-forest-dark);
}

/* ============================================================================
   17. MARKENNAME ZWEIFARBIG ("PERMEA" grün / "TERRA" grau)
   Überall dort genutzt, wo der Markenname als sichtbarer Fließtext
   auftaucht (nicht in <title>, alt-Texten oder Meta-Angaben, da dort
   kein HTML-Markup möglich ist).
   ==========================================================================*/
.brand-permea { color: var(--color-leaf); }
.brand-terra { color: var(--color-mist); }
.site-footer .brand-permea, .hero .brand-permea { color: #8FD6A8; }
.site-footer .brand-terra, .hero .brand-terra { color: var(--color-mist-on-dark); }