/* ==========================================================================
   Figtree Variable — self-hosted (kein CDN, Vorgabe Briefing 5.)
   Quelle: @fontsource-variable/figtree
   ========================================================================== */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/assets/fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ===== tokens.css (1:1) ===== */
/* ============================================================
   Glohr Tank-Mess — Design-Tokens
   Werte exakt aus dem Elementor-Kit der Live-Seite (post-7.css):
   primary #000080 · secondary/text #16162B · accent #0000CC ·
   #EDEEF4 · #9CB0FF · Figtree 36/600, 24/500, 16/400 (lh 1.6, ls 0.2px)
   ============================================================ */
:root{
  /* Farben (Elementor Global Colors) */
  --c-primary: #000080;        /* Navy: Buttons, Topbar, Logo */
  --c-primary-hover: #0000cc;  /* Hover = Accent (wie Kit-Linkfarbe) */
  --c-accent: #0000cc;         /* Royal Blue: Headlines + Links */
  --c-ink: #16162b;            /* Fließtext + dunkle Flächen */
  --c-ink-soft: #4e4e5e;       /* Sekundärtext */
  --c-surface: #ffffff;
  --c-surface-alt: #edeef4;    /* helle Flächen */
  --c-dark: #16162b;
  --c-on-dark: #ffffff;
  --c-on-dark-soft: #c9cad6;
  --c-periwinkle: #9cb0ff;     /* Akzente auf dunklen Flächen */
  --c-line: #dcdde6;

  /* Typografie — komplette Website ausschließlich Figtree */
  --font-sans: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-eyebrow: 1rem;                                        /* h6-Label */
  --fs-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);           /* Seitentitel */
  --fs-h2: clamp(1.65rem, 1.4rem + 1vw, 2.25rem);            /* 36px Desktop */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);         /* 24px Desktop */
  --fs-body: 1rem;                                           /* 16px */
  --lh-body: 1.6;
  --ls-body: 0.2px;

  /* Layout — EINE einheitliche Wrapper-Breite für alles (Elementor-Kit: 1312px),
     Breakpoints 1024/767. Kein Element darf schmaler als dieser Wrapper laufen. */
  --container: 1312px;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --space-gap: clamp(1.25rem, 1rem + 1vw, 2rem);

  /* Kanten & Schatten — Design ist bewusst eckig (Live-Seite: border-radius 0) */
  --radius: 0px;
  --radius-btn: 3px;
  --shadow-card: 0 10px 40px -14px rgba(22, 22, 43, 0.28);
  --shadow-panel: 0px 0px 40px 0px rgba(0, 0, 0, 0.12);
  --shadow-hero: 0px 0px 82px 0px rgba(0, 0, 0, 0.31);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
  --dur-fast: 140ms; /* kleine Hover-Bewegungen (Karten-Lift etc.) */
}


/* ===== global.css (1:1) ===== */
/* ---------- Reset & Basis ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html{ scroll-behavior: auto; }
*, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
img, svg{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }
h1, h2, h3, h4, h5, h6{ line-height: 1.2; margin: 0 0 0.6em; font-weight: 600; }
p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }
/* Hervorgehobene Begriffe (ehem. unterstrichen): helles Blau statt Unterstreichung */
u{ text-decoration: none; color: var(--c-periwinkle); }

:focus-visible{ outline: 3px solid var(--c-accent); outline-offset: 3px; }

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--c-primary); color: #fff; padding: 0.6rem 1rem;
}
.skip-link:focus{ left: 0.5rem; top: 0.5rem; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout-Helfer ---------- */
.container{ width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section{ padding-block: var(--space-section); }
.section--alt{ background: var(--c-surface-alt); }
.section--dark{ background: var(--c-dark); color: var(--c-on-dark); }

/* ---------- Typo-Bausteine (wie Live-Seite) ---------- */
.eyebrow{
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 0.6rem;
}
.section--dark .eyebrow{ color: var(--c-periwinkle); }
.heading{ color: var(--c-accent); font-size: var(--fs-h2); }
.heading--h1{ font-size: var(--fs-h1); }
.section--dark .heading{ color: var(--c-on-dark); }

/* ---------- Buttons (Navy, eckig, Chevron) ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--c-primary); color: #fff;
  padding: 0.85rem 1.7rem;
  border: 0; border-radius: var(--radius-btn);
  font: inherit; font-weight: 600; letter-spacing: var(--ls-body);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover{ background: var(--c-primary-hover); }
.btn:active{ transform: translateY(1px); }
.btn .arrow{ transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.btn:hover .arrow{ transform: translateX(3px); }
.btn--ghost{
  background: transparent; color: var(--c-primary);
  box-shadow: inset 0 0 0 2px var(--c-primary);
}
.btn--ghost:hover{ background: var(--c-primary); color: #fff; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* ---------- Zwei-Spalten-Sektion (Text | Medium) ---------- */
.split{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 5rem); align-items: center;
}
.split--reverse{ grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.split--reverse > :first-child{ order: 2; }
@media (max-width: 1024px) {
.split, .split--reverse{ grid-template-columns: 1fr; }
.split--reverse > :first-child{ order: 0; }
}

/* ---------- Scroll-Reveal (dezent, einmalig) ---------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ===== Base-Layout (layouts/Base.astro) ===== */

body{ display: flex; flex-direction: column; min-height: 100vh; }

/* ===== Header + Topbar + Navigation (components/Header.astro) ===== */

.topbar{ background: var(--c-primary); color: #fff; font-size: 0.82rem; }
/* Ganzzahlige Leisten-Höhen: verhindert Subpixel-Kanten am Dropdown */
.topbar__inner{ display: flex; gap: 1.6rem; align-items: center; min-height: 37px; padding-block: 0.3rem; }
.topbar__spacer{ flex: 1; }
.topbar__item{ display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; white-space: nowrap; }
.topbar__item svg{ flex-shrink: 0; opacity: 0.85; }
a.topbar__item:hover{ text-decoration: underline; text-underline-offset: 3px; }
.header{
    background: var(--c-surface); position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 var(--c-line);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
/* Beim Scrollen: Milchglas — durchscheinend, Inhalt dahinter unscharf */@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
.header.is-scrolled{
      background: rgba(255, 255, 255, 0.9);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      backdrop-filter: blur(12px) saturate(1.4);
      box-shadow: 0 1px 0 rgba(220, 221, 230, 0.5);
    }
  }
.header__inner{ display: flex; align-items: center; gap: 2rem; height: 76px; }
.header__logo img{ width: 150px; height: auto; }
.header__nav{ margin-left: auto; }
.header__nav ul{ display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.header__nav a, .nav-drop__trigger{
    text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--c-ink);
    padding-block: 0.4rem;
    transition: color var(--dur) var(--ease);
  }
.header__nav a:hover, .header__nav a[aria-current='page'], .nav-drop__trigger:hover, .nav-drop__trigger.is-current{ color: var(--c-accent); }
/* --- Portfolio-Dropdown --- *//* li bleibt unpositioniert: das absolute Panel richtet sich vertikal am Header aus
     (top: 100 % = Header-Unterkante), horizontal an seiner statischen Position (Wortanfang) */
.nav-drop{ position: static; }
.nav-drop__trigger{
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: 0; cursor: pointer; font-family: inherit; letter-spacing: var(--ls-body);
  }
.nav-drop__chev{ transition: transform var(--dur) var(--ease); }
/* Panel bündig unter der Nav-Leiste, linke Kante am Wortanfang */
.header__nav ul.nav-drop__menu{
    position: absolute; top: 100%; left: auto; min-width: 240px;
    background: var(--c-surface); box-shadow: var(--shadow-panel);
    border-top: 3px solid var(--c-primary);
    padding: 0; margin: 0; list-style: none;
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu, .nav-drop.is-open .nav-drop__menu{
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
.nav-drop:hover .nav-drop__chev, .nav-drop.is-open .nav-drop__chev{ transform: rotate(180deg); }
.nav-drop__menu a{
    display: block; padding: 0.75rem 1.3rem; font-weight: 500;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
/* Nav-Items füllen die volle Header-Höhe: keine Hover-Lücke zwischen
Trigger und Panel (Panel ist Kind des Items → Hover bleibt durchgängig) */@media (min-width: 1025px){
.header__nav{ align-self: stretch; display: flex; }
.header__nav > ul{ align-items: stretch; }
.header__nav > ul > li{ display: flex; align-items: center; }
  }
.nav-drop__menu a:hover{ background: var(--c-surface-alt); color: var(--c-accent); }
/* Aktuelle Seite: fett und hellblau hinterlegt, aber in derselben Größe wie
   die übrigen Unterpunkte. */
.nav-drop__menu a[aria-current='page']{
  background: var(--c-surface-alt); color: var(--c-accent); font-weight: 700;
}
/* Mobile-Menü-Elemente: auf Desktop unsichtbar */
.nav-mchev, .nav-msub, .header__nav-contact{ display: none; }
.header__actions{ display: flex; align-items: center; gap: 1rem; }
.header__cta{ padding: 0.65rem 1.5rem; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; }
.header__cta-mobile{ display: none; }
.header__burger{ display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.header__burger-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.header__burger-box{ display: flex; flex-direction: column; gap: 5px; width: 26px; }
.header__burger-box span{ height: 3px; background: var(--c-primary); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }@media (max-width: 1024px){
.topbar__inner{ flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: center; }
.topbar__spacer{ display: none; }
.header__burger{ display: block; }
.header__cta{ display: none; }
/* Burger rechtsbündig (die Nav ist mobil aus dem Flow → auto-Margin hier setzen) */
.header__actions{ margin-left: auto; }
/* Fullscreen-Menü in Weiß: große Punkte mit Chevron, Portfolio als Akkordeon,
       Unterpunkte mit Trennlinien + ↗, unten Kontakt-Button und Kontaktzeile */
.header__nav{
      position: fixed; inset: 0; top: var(--header-offset, 113px);
      background: var(--c-surface); padding: 1.25rem 1.75rem 2.5rem;
      transform: translateX(100%); transition: transform var(--dur) var(--ease);
      overflow-y: auto;
      display: flex; flex-direction: column;
    }
.header__nav.is-open{ transform: none; }
.header__nav > ul{ flex-direction: column; gap: 0; align-items: stretch; }
/* Im aufgeklappten Mobilmenü stehen alle Hauptpunkte in der Schriftfarbe —
   auch der Punkt der Seite, auf der man gerade ist. Die Regel weiter oben
   (.header__nav a[aria-current='page']) würde ihn blau färben, deshalb die
   gezielte Gegenregel unten.
   Wichtig: Sie darf NUR Hauptpunkte treffen. Stand die Auszeichnung hier in
   der Liste, erbte auch der aktive UNTERpunkt die 1,45 rem der Hauptpunkte
   und stand im Menü riesig zwischen den anderen. */
.header__nav > ul > li > a,
.nav-drop__trigger{
      display: flex; width: 100%; justify-content: space-between; align-items: center;
      font-size: 1.45rem; font-weight: 600; color: var(--c-ink);
      padding: 1.05rem 0; text-align: left;
    }
/* Nur Hauptpunkte: höhere Spezifität als die Farbregel weiter oben */
.header__nav > ul > li > a[aria-current='page']{ color: var(--c-ink); }
.nav-mchev{ display: block; }
.nav-drop__trigger{ pointer-events: auto; }
.nav-drop__chev{ display: block; width: 20px; height: 20px; }
.header__nav ul.nav-drop__menu{
      position: static; transform: none; box-shadow: none; border-top: 0;
      min-width: 0; padding: 0 0 0.6rem;
      display: none; opacity: 1; visibility: visible;
    }
.nav-drop.is-open .nav-drop__menu{ display: flex; }
.nav-drop__menu a{
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.85rem 0.1rem; font-size: 1.05rem; font-weight: 500;
      border-bottom: 1px solid var(--c-line);
    }
.nav-msub{ display: block; color: var(--c-primary); flex-shrink: 0; }
.header__nav a.header__cta-mobile{
      display: inline-flex; justify-content: center; width: 100%;
      margin-top: 1.4rem; color: #fff; font-size: 1.05rem;
    }
.header__nav-contact{
      display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.75rem;
      margin: 1.5rem 0 0; font-size: 0.92rem; color: var(--c-ink-soft);
    }
.header__nav-contact a{ color: var(--c-ink-soft); text-decoration: none; padding: 0.3rem 0; }
body:has(.header__nav.is-open){ overflow: hidden; }
.header__burger[aria-expanded='true'] .header__burger-box span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.header__burger[aria-expanded='true'] .header__burger-box span:nth-child(2){ opacity: 0; }
.header__burger[aria-expanded='true'] .header__burger-box span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  }

/* ===== Footer (components/Footer.astro) ===== */

.footer{ background: var(--c-dark); color: var(--c-on-dark-soft); margin-top: auto; }
.footer__grid{
    display: grid; grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem; padding-block: 3.5rem 3rem;
  }
.footer__about img{ width: 190px; margin-bottom: 1.3rem; }
.footer__about p{ max-width: 44ch; font-size: 0.95rem; }
.footer__title{ color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }
.footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer a{ text-decoration: none; transition: color var(--dur) var(--ease); }
.footer a:hover{ color: #fff; }
.footer__bar{ background: var(--c-primary); color: #fff; padding-block: 0.9rem; font-size: 0.88rem; }
.footer__bar > div{ text-align: center; }@media (max-width: 1024px){
.footer__grid{ grid-template-columns: 1fr 1fr; } }@media (max-width: 620px){
.footer__grid{ grid-template-columns: 1fr; gap: 2.2rem; } }

/* ===== Seiten-Hero (components/PageHero.astro) ===== */

.phero{
    position: relative; isolation: isolate;
    display: flex; align-items: flex-end;
    min-height: clamp(240px, 34vw, 380px);
    padding-block: clamp(3rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
    background:
      linear-gradient(rgba(22, 22, 43, 0.9), rgba(22, 22, 43, 0.9)),
      var(--c-dark) url('/assets/img/World-White.png') center / min(900px, 90%) no-repeat;
    color: var(--c-on-dark);
  }
.phero--compact{ min-height: clamp(170px, 20vw, 240px); }
.phero--image{ background: var(--c-dark); }
.phero--image::before{
    content: ''; position: absolute; inset: 0; z-index: -1;
    /* Kleinere Datei fürs Handy — dieselbe Darstellung. */
    background-image: var(--hero-img);
    background-size: cover; background-position: center;
  }
@media (max-width: 768px){
.phero--image::before{ background-image: var(--hero-img-klein, var(--hero-img)); }
  }

.phero--image::after{
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(13, 13, 46, 0.92) 25%, rgba(13, 13, 46, 0.65));
  }
.phero__title{ color: #fff; font-size: var(--fs-h1); margin: 0; }
.phero__sub{ color: var(--c-on-dark-soft); font-size: var(--fs-body); margin: 0.5rem 0 0; }

/* ===== Bereichskarten (components/AreaCards.astro) ===== */

.areas{ display: grid; grid-template-columns: repeat(5, 1fr); }
.areas__card{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.35rem;
    padding: clamp(2rem, 1.5vw + 1.4rem, 3rem) 1.4rem
             calc(clamp(2rem, 1.5vw + 1.4rem, 3rem) - 5px);
    background: var(--c-surface); color: var(--c-ink);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
  }
.areas__card--dark{ background: var(--c-dark); color: var(--c-on-dark); }
/* Hover: Der Inhalt wächst leicht — die Kachel selbst bleibt stehen. Das
   Anheben der ganzen Karte sah bündig an der Hero-Unterkante abgehackt aus. */
.areas__body{
    display: flex; flex-direction: column; align-items: center;
    gap: 0.35rem;
    transition: transform var(--dur-fast) ease-out;
  }
.areas__card:hover .areas__body{ transform: scale(1.05); }
.areas__icon{
    width: 70px; height: 70px; margin-bottom: 1rem; /* 5 % kleiner (vorher 74px) */
    border: 2px solid currentColor; border-radius: 50%;
    display: grid; place-items: center; color: var(--c-primary);
  }
.areas__card--dark .areas__icon{ color: #fff; }
.areas__icon svg{ width: 36px; height: 36px; fill: currentColor; }
.areas__title{ font-size: 1.1rem; font-weight: 600; color: var(--c-primary); margin: 0; }
.areas__card--dark .areas__title{ color: #fff; }
.areas__text{ margin: 0; max-width: 26ch; font-size: 0.86rem; line-height: 1.5; }@media (max-width: 1024px){
.areas{ grid-template-columns: repeat(2, 1fr); }
.areas__card:last-child{ grid-column: 1 / -1; } }@media (max-width: 560px){
.areas{ grid-template-columns: 1fr; }
.areas__card:last-child{ grid-column: auto; }
/* Am Handy über die volle Breite: Die Seitenränder des Containers kosten
   40 px, ohne dass sie hier etwas trennen — die Karten grenzen sich
   ohnehin durch ihre abwechselnden Flächen voneinander ab. */
.areas-wrap{ width: 100%; }
/* Am Handy liegt das Symbol links und der Text linksbündig daneben, statt
   alles mittig übereinander. Das Raster ordnet die drei vorhandenen Kinder
   neu an — ohne Änderung am Markup, damit Desktop unberührt bleibt. */
.areas__card{ align-items: stretch; text-align: left; padding: 1.05rem 1.25rem; }
.areas__body{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "symbol titel" "symbol text";
    align-items: center;
    column-gap: 1rem; row-gap: 0.1rem;
  }
.areas__icon{
    grid-area: symbol;
    width: 52px; height: 52px; margin-bottom: 0;
  }
.areas__icon svg{ width: 27px; height: 27px; }
.areas__title{ grid-area: titel; align-self: end; }
.areas__text{
    grid-area: text; align-self: start;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden; max-width: 100%;
  }
/* Beim Antippen wächst der Inhalt sonst über den linken Kartenrand hinaus */
.areas__card:hover .areas__body{ transform: none; }
  }

/* ===== Produktkreis (components/ProductCircle.astro) ===== */

/* Der Schatten liegt als runder box-shadow am Rahmen, nicht als
   filter: drop-shadow am SVG. Safari auf iOS wertet drop-shadow bei SVGs mit
   eingebetteten Rasterbildern über den rechteckigen Rahmen aus — auf dem
   iPhone erschien deshalb ein Schattenkasten statt eines runden Schattens. */
.pcircle{
    position: relative; max-width: 540px; margin-inline: auto;
    border-radius: 50%; box-shadow: 0 0 41px rgba(0, 0, 0, 0.31);
  }
.pcircle svg{ width: 100%; height: auto; }
.pcircle a{ outline-offset: -6px; }/* Das aktive Segment pulsiert nur noch über die Helligkeit. Der frühere
   drop-shadow erzeugte auf iOS denselben rechteckigen Kasten wie am Kreis
   selbst — ein <g> mit eingebettetem Rasterbild wird dort über den Rahmen
   statt entlang der Form ausgewertet. */
@keyframes pulseGlow{
0%{ filter: brightness(1); }
50%{ filter: brightness(1.14); }
100%{ filter: brightness(1); }
  }
.pcircle__segment{ cursor: pointer; transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out; }
/* Umschalt-Modus: Hover enthüllt — kein Klick-Cursor, keine Text-/Bildauswahl */
.pcircle[data-mode='switch']{ -webkit-user-select: none; user-select: none; }
.pcircle[data-mode='switch'] .pcircle__segment{ cursor: default; }
.pcircle__segment.is-active{ animation: pulseGlow 2s ease-in-out infinite; }
.pcircle__segment:not(.is-active){ opacity: 0.6; filter: brightness(0.7); }@media (hover: hover){
.pcircle__segment:not(.is-active):hover{ opacity: 0.85; filter: brightness(0.9); }
  }
.pcircle__segment:focus-visible{ outline: 3px solid var(--c-accent); }@media (prefers-reduced-motion: reduce){
.pcircle__segment.is-active{ animation: none; }
  }

/* ===== Partner-Logos (components/LogoBar.astro) ===== */

.logobar{ padding-block: clamp(2.5rem, 4vw, 4rem); }
.logobar__track{
    /* 3 volle Karten mittig + je eine halbe an den Rändern: 4 Kartenbreiten + 4 Gaps = 100 % */
    --pad-top: 1.25rem;
    --pad-bottom: 3rem;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * var(--space-gap)) / 4);
    gap: var(--space-gap);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: var(--pad-top) 0 var(--pad-bottom);
    margin: calc(-1 * var(--pad-top)) 0 calc(-1 * var(--pad-bottom));
    /* Ränder weich ausfaden */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
.logobar__track::-webkit-scrollbar{ display: none; }
.logobar__card{
    scroll-snap-align: center;
    background: var(--c-surface); box-shadow: var(--shadow-card);
    display: grid; place-items: center;
    padding: 1.8rem 2rem; min-height: 120px;
  }
.logobar__card img{ height: 40px; width: auto; max-width: 100%; object-fit: contain; }@media (max-width: 1024px){
.logobar__track{ grid-auto-columns: calc((100% - 2 * var(--space-gap)) / 2); } }@media (max-width: 560px){
.logobar__track{ grid-auto-columns: 70%; } }

/* ===== CTA-Bänder (components/CtaBanner.astro) ===== */

.cta{
    background:
      linear-gradient(rgba(22, 22, 43, 0.88), rgba(22, 22, 43, 0.88)),
      var(--c-dark) url('/assets/img/World-White.png') center / min(900px, 90%) no-repeat;
    color: var(--c-on-dark);
  }
.cta__inner{ text-align: center; padding-block: clamp(3.3rem, 5.5vw, 4.95rem); }
.cta__headline{ font-size: var(--fs-h2); font-weight: 600; color: #fff; margin: 0; line-height: 1.3; }
.cta__link{
    display: inline-block; margin-top: 0.6rem; color: var(--c-periwinkle); font-size: var(--fs-body);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }
.cta__link:hover{ color: #fff; }
.cta__text{ color: var(--c-on-dark-soft); max-width: 62ch; margin: 0.8rem auto 0; }
/* Heller Button auf dunklem Band (Navy wäre hier unsichtbar) */
.cta__btn{ margin-top: 1.6rem; background: #fff; color: var(--c-primary); }
.cta__btn:hover{ background: var(--c-surface-alt); }

/* ===== Markenblock (components/BrandBlock.astro) ===== */

/* Fläche 1: Hersteller-Intro auf Hellblau */
.brand__intro{ background: var(--c-surface-alt); padding-block: clamp(3rem, 5vw, 5rem); }
.brand__card{
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    background: var(--c-surface); box-shadow: var(--shadow-panel);
    overflow: hidden;
  }
.brand__card--reverse > .brand__media{ order: 2; }
.brand__card--noimage{ grid-template-columns: 1fr; }
.brand__media{ margin: 0; }
.brand__media img{ width: 100%; height: 100%; object-fit: cover; }
.brand__body{ padding: clamp(1.8rem, 3vw, 3rem); }
.brand__logo{ height: 44px; width: auto; margin-bottom: 1.5rem; }
.brand__body p{ font-size: 0.97rem; }
/* Fläche 2: Produkthighlights auf Weiß */
.brand__products{ padding-block: clamp(3rem, 5vw, 5rem); }
/* Herstellerunabhängige Produkte: hellblau, damit sie sich vom
   weißen Highlight-Block des letzten Herstellers absetzen */
.brand--extra .brand__products{ background: var(--c-surface-alt); }
.brand__highlights-title{ text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
/* Hinweiszeile zwischen Überschrift und Produkten — rückt näher an die
   Überschrift heran, damit beide als eine Einheit gelesen werden. */
.brand__highlights-title:has(+ .brand__highlights-hinweis){ margin-bottom: 0.6rem; }
.brand__highlights-hinweis{
    /* 60ch waren 7 Pixel zu schmal für den Erdungsklemmen-Satz (622 px) und
       schoben ein einzelnes Wort in die zweite Zeile. 80ch lässt ihn in einer
       Zeile laufen, begrenzt längere Hinweise aber weiterhin auf Lesebreite. */
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); max-width: 80ch;
    text-align: center; color: var(--c-ink-soft);
    text-wrap: balance; /* wenn doch umbrochen wird (Handy): gleich lange Zeilen */
  }
.brand__highlights{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-gap);
  }
.brand__highlight{
    display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center;
    background: var(--c-surface); box-shadow: var(--shadow-panel);
    transition: transform var(--dur-fast) ease-out;
  }
.brand__highlight:hover{ transform: translateY(-4px); }
.brand__highlight--noimage{ grid-template-columns: 1fr; }
.brand__highlight-media{ align-self: stretch; }
.brand__highlight-media img{ width: 100%; height: 100%; object-fit: cover; min-height: 170px; }
.brand__highlight-body{ padding: 1.3rem 1.5rem; }
.brand__highlight h4{
    font-size: 1.08rem; color: var(--c-accent); margin-bottom: 0.35rem;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  }
.brand__highlight p{ margin: 0; font-size: 0.92rem; }
.brand__new{
    background: var(--c-primary); color: #fff; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; padding: 0.2rem 0.55rem;
  }@media (max-width: 1024px){
.brand__card, .brand__card--reverse{ grid-template-columns: 1fr; }
.brand__card--reverse > .brand__media{ order: 0; }
.brand__media img{ max-height: 340px; }
.brand__highlights{ grid-template-columns: 1fr; }
  }@media (max-width: 560px){
.brand__highlight{ grid-template-columns: 1fr; }
.brand__highlight-media img{ max-height: 200px; }
  }

/* ===== Weitere Informationen (components/BrandResources.astro) ===== */

.bres{
    margin-top: clamp(2rem, 4vw, 3rem);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-line);
  }
.bres__title{
    font-size: 0.95rem; font-weight: 600; color: var(--c-ink-soft);
    margin: 0; padding: 0.9rem 1.25rem 0.75rem;
  }
.bres__list{ list-style: none; margin: 0; padding: 0; }
.bres__list li{ border-top: 1px solid var(--c-line); }
.bres__row{
    display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem 1.25rem; min-height: 56px;
    text-decoration: none; color: var(--c-ink);
    transition: background var(--dur) var(--ease);
  }
.bres__row:hover{ background: var(--c-surface); }
.bres__type-icon{ color: var(--c-primary); flex-shrink: 0; display: grid; place-items: center; }
.bres__text{ display: grid; gap: 0.1rem; min-width: 0; }
.bres__label{ font-weight: 600; font-size: 0.97rem; line-height: 1.35; overflow-wrap: anywhere; }
.bres__meta{ font-size: 0.82rem; color: var(--c-ink-soft); }
.bres__action-icon{
    margin-left: auto; flex-shrink: 0; color: var(--c-primary);
    display: grid; place-items: center;
    transition: transform var(--dur) var(--ease);
  }
.bres__row:hover .bres__action-icon{ transform: translateX(3px); }
.bres__row:focus-visible{ outline-offset: -3px; }@media (max-width: 560px){
.bres__row{ padding: 0.8rem 1rem; gap: 0.8rem; }
.bres__title{ padding: 0.8rem 1rem 0.6rem; }
  }

/* ===== Kontaktformular (components/ContactForm.astro) ===== */

.cform{
    display: grid; gap: 1rem;
    background: var(--c-surface-alt);
    padding: clamp(1.6rem, 3vw, 2.5rem);
  }
.cform__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cform label{ display: grid; }
.cform input, .cform textarea{
    font: inherit; letter-spacing: var(--ls-body); color: var(--c-ink);
    padding: 0.85rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-btn);
    background: var(--c-surface); width: 100%;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
.cform ::placeholder{ color: var(--c-ink-soft); opacity: 1; }
.cform input:focus, .cform textarea:focus{
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.15);
  }
.cform textarea{ resize: vertical; }
.cform__hp{ position: absolute; left: -9999px; }
.cform__status{ min-height: 1.4em; margin: 0; font-weight: 500; }
.cform__status.is-error{ color: #a4172c; }
.cform__status.is-success{ color: #106438; }
.cform button{ justify-self: start; }@media (max-width: 560px){
.cform__row{ grid-template-columns: 1fr; } }

/* ===== Startseite (pages/index.astro) ===== */

/* ---------- Hero ---------- */
.hero{
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--c-dark); color: var(--c-on-dark);
  }
@media (min-width: 1025px){
.hero{ padding-top: clamp(3rem, 6vw, 5rem); }
  }
/* Desktop: Hero füllt zusammen mit Infoleiste (37px) und Header (76px) exakt
   die Bildschirmhöhe — die Karten schließen also mit der Unterkante des
   Bildschirms ab. Mobil wächst er mit dem Inhalt: fünf gestapelte Karten
   passen in keine Bildschirmhöhe. */
@media (min-width: 1025px){
.hero{ min-height: calc(100dvh - 113px); }
  }
.hero__areas{
    position: relative; z-index: 2;
    width: 100%;
    /* schiebt die Karten an die Unterkante des Heros */
    margin-top: auto;
    padding-top: clamp(2.5rem, 4vw, 4rem);
  }
/* Am Handy schließen die Karten direkt an das Bild an. Das Polster stammt aus
   der Desktop-Ansicht, wo die Karten auf dem Foto liegen — hier hinterließe es
   einen dunklen Streifen. Muss NACH der Grundregel stehen: Media Queries
   erhöhen die Spezifität nicht, es entscheidet die Reihenfolge. */
@media (max-width: 560px){
.hero__areas{ padding-top: 0; }
  }
/* Bühne = Bildfläche. Am Handy umschließt sie nur Foto und Panel, damit das
   Foto nicht über die gesamte Sektionshöhe inklusive der fünf Karten
   hochskaliert wird — sonst sieht man nur noch einen stark vergrößerten
   Ausschnitt. Am Desktop verschwindet sie aus dem Layout (display: contents),
   dort liegen die Karten wie gewünscht auf dem Bild. */
.hero__buehne{
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; flex: 1;
    padding-top: clamp(3rem, 6vw, 5rem);
  }
@media (min-width: 1025px){
.hero__buehne{ display: contents; }
  }
.hero__slides, .hero__slide{ position: absolute; inset: 0; z-index: -1; }
.hero__slide{
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.5s ease-in-out;
    /* Das Bild kommt aus den Custom Properties, die das Template je Folie
       setzt — so kann für kleine Fenster eine kleinere Datei geladen werden,
       ohne dass sich am Aussehen etwas ändert. */
    background-image: var(--hero-bild);
  }
@media (max-width: 768px){
.hero__slide{ background-image: var(--hero-bild-klein, var(--hero-bild)); }
  }
.hero__slide.is-active{ opacity: 1; animation: kenburns 8.5s ease-out forwards; }@keyframes kenburns{ from { transform: scale(1); } to { transform: scale(1.07); } }@media (prefers-reduced-motion: reduce){
.hero__slide.is-active{ animation: none; } }
.hero::after{
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(22, 22, 43, 0.82) 20%, rgba(22, 22, 43, 0.45) 60%, rgba(22, 22, 43, 0.3));
  }
.hero__inner{
    display: flex; align-items: center; width: min(100% - 2.5rem, var(--container));
    flex: 1; padding-block: clamp(2rem, 4vw, 3.5rem);
  }
.hero__panel{ max-width: 560px; }
.hero__title{ font-size: var(--fs-h3); font-weight: 700; color: #fff; margin-bottom: 0.7em; }
/* Nur der Einleitungstext im Hero-Panel ist weiß — NICHT alle Absätze des
   Heros: Seit die Bereichskarten im Hero liegen, färbte die alte Regel
   `.hero p` auch deren Texte weiß, auf den hellen Karten also unsichtbar. */
.hero__panel p{ color: #fff; max-width: 52ch; }

/* ---------- Newsbar (schmale Meldungsleiste unter dem Hero) ---------- */
.newsbar{
    background: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-line);
  }
.newsbar__inner{ display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.1rem); }
/* Fenster + Schiene: Die Meldungen liegen nebeneinander, sichtbar ist immer
   genau eine. Ohne min-width:0 würde das Fenster von langen Texten
   aufgebläht, statt sie zu beschneiden. */
.newsbar__viewport{ flex: 1; min-width: 0; overflow: hidden; }
.newsbar__track{
    display: flex;
    transition: transform var(--dur) var(--ease);
  }
.newsbar__item{
    flex: 0 0 100%; min-width: 0;
    display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.25rem);
    padding-block: 0.7rem;
    text-decoration: none; color: inherit;
  }
.newsbar__media{
    flex: none; width: 56px; height: 56px;
    background: #fff; padding: 4px;
  }
.newsbar__media img{ width: 100%; height: 100%; object-fit: contain; }
.newsbar__text{
    display: flex; flex-wrap: nowrap; align-items: baseline;
    gap: 0.1rem 0.55rem; min-width: 0;
  }
/* Aus den Neuigkeiten gezogene Überschriften und Anrisstexte sind länger als
   frei getextete Meldungen. Beide dürfen schrumpfen und enden dann mit … —
   sonst wächst die Leiste in die Höhe und ist keine Leiste mehr. */
.newsbar__titel, .newsbar__sub{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
/* Abzeichen und Bezeichnung bleiben zusammen in einer Zeile */
.newsbar__kopf{
    display: inline-flex; align-items: baseline; gap: 0.5rem;
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
  }
.newsbar__badge{
    background: var(--c-accent); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
  }
.newsbar__titel{ color: var(--c-accent); font-size: 1.02rem; font-weight: 700; }
.newsbar__sub{ color: var(--c-ink-soft); font-size: 0.93rem; flex: 1 1 auto; min-width: 0; }
.newsbar__cta{
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--c-primary); font-weight: 600; font-size: 0.93rem;
  }
.newsbar__cta .arrow{ transition: transform var(--dur) var(--ease); }
a.newsbar__item:hover .newsbar__cta{ color: var(--c-primary-hover); }
a.newsbar__item:hover .newsbar__cta .arrow{ transform: translateX(3px); }

/* Blätter-Pfeile: erscheinen nur, wenn es mehr als eine Meldung gibt */
.newsbar__nav{ flex: none; display: flex; align-items: center; gap: 0.15rem; }
.newsbar__pfeil{
    display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-btn);
    color: var(--c-primary); cursor: pointer;
    transition: background var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
  }
.newsbar__pfeil:hover{ background: #fff; border-color: var(--c-primary); }
.newsbar__zaehler{
    min-width: 2.6em; text-align: center;
    color: var(--c-ink-soft); font-size: 0.8rem; font-variant-numeric: tabular-nums;
  }

@media (max-width: 700px){
.newsbar__cta-text{ display: none; }
.newsbar__media{ width: 46px; height: 46px; }
/* Untertitel auf zwei Zeilen begrenzen, damit die Leiste eine Leiste bleibt */
.newsbar__text{ flex-wrap: wrap; }
.newsbar__titel{ white-space: normal; }
.newsbar__sub{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    white-space: normal; overflow: hidden; font-size: 0.88rem;
  }
.newsbar__zaehler{ display: none; }
  }
/* Wer Bewegung reduziert haben will, bekommt harte Wechsel statt Schieben */
@media (prefers-reduced-motion: reduce){
.newsbar__track{ transition: none; }
  }

/* ---------- Bereichs-Umschalter ---------- */
/* Einspaltig (Handy/Tablet) steht der Produktkreis über den Überschriften
   statt unter dem Text: Man sieht erst das Bild, dann den Text dazu — und
   der Kreis, der die Texte umschaltet, liegt nicht mehr unterhalb dessen,
   was er steuert. Gilt nur hier, nicht für die übrigen split-Sektionen. */
@media (max-width: 1024px){
.hauptbereiche .split > :last-child{ order: -1; }
.hauptbereiche .split{ row-gap: clamp(1.5rem, 4vw, 2.5rem); }
  }
.switcher{ display: grid; }
.switcher__panel{ grid-area: 1 / 1; }
.switcher__panel[hidden]{ display: none; }
.switcher__panel.is-active{ animation: panelIn 0.45s var(--ease); }@keyframes panelIn{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce){
.switcher__panel.is-active{ animation: none; } }
/* ---------- Claim-Band ---------- */
body.seite-home .claims, body.seite-unternehmen .claims{
    background:
      linear-gradient(rgba(22, 22, 43, 0.9), rgba(22, 22, 43, 0.9)),
      var(--c-dark) url('/assets/img/World-White.png') center / min(900px, 90%) no-repeat;
    color: var(--c-on-dark);
    padding-block: clamp(3.3rem, 5.5vw, 4.95rem); text-align: center;
  }
body.seite-home .claims__line1, body.seite-unternehmen .claims__line1{ font-size: var(--fs-h2); font-weight: 600; color: #fff; margin-bottom: 0.5rem; line-height: 1.35; }
body.seite-home .claims__line2, body.seite-unternehmen .claims__line2{ color: var(--c-on-dark-soft); margin: 0; }
/* ---------- Über uns ---------- */
.about__media{ margin: 0; position: relative; padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; }
.about__shape{ position: absolute; right: 0; bottom: 0; width: 88%; height: auto; }
.about__photo{
    position: relative; width: 100%; object-fit: cover;
    border: 10px solid #fff; box-shadow: var(--shadow-panel);
  }
/* Einspaltig (Tablet/Mobil): Bildhöhe deckeln, sonst wird das Foto turmhoch;
die Form dahinter schrumpft mit und wird oben/links beschnitten */@media (max-width: 1024px){
.about__photo{ max-height: 340px; }
.about__shape{ height: 100%; object-fit: cover; object-position: right bottom; }
  }
/* ---------- Angebot ---------- */
.offers-band{
    background:
      linear-gradient(rgba(16, 16, 38, 0.82), rgba(16, 16, 38, 0.82)),
      var(--c-dark) url('/assets/img/Liquid.jpg') center / cover no-repeat;
    color: var(--c-on-dark);
    padding-block: var(--space-section);
  }
.offers-band__title{ text-align: center; color: #fff; font-size: var(--fs-h2); margin-bottom: clamp(2rem, 4vw, 3rem); }
.offers{ position: relative; }
.offers__track{
    /* Alle 5 Kategorien nebeneinander sichtbar (Desktop) */
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * var(--space-gap)) / 5);
    gap: var(--space-gap);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-block: 0.5rem;
  }
.offers__track::-webkit-scrollbar{ display: none; }
.offers__card{
    scroll-snap-align: start;
    background: var(--c-surface); color: var(--c-ink);
    display: flex; flex-direction: column; align-items: center;
    padding: 1.1rem 1.1rem 1.5rem; gap: 0.9rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease);
  }
.offers__card:hover{ transform: translateY(-6px); }
.offers__card img{ aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.offers__card h3{ font-size: 1.15rem; color: var(--c-accent); margin: 0; text-align: center; }
.offers__btn{ padding: 0.7rem 1.3rem; font-size: 0.92rem; margin-top: auto; }
.offers__card:hover .offers__btn{ background: var(--c-primary-hover); }
.offers__card:hover .offers__btn .arrow{ transform: translateX(3px); }
.offers__dots{ display: flex; justify-content: center; gap: 0.45rem; margin-top: 1.6rem; }
.offers__dots:empty{ display: none; }
.offers__dots button{
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.35); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
.offers__dots button.is-active{ background: #fff; transform: scale(1.2); }
/* Kleinere Bildschirme: 3er-Slider, Mobil: Einzelkarte mit Peek */@media (max-width: 1024px){
.offers__track{ grid-auto-columns: calc((100% - 2 * var(--space-gap)) / 3); }
  }@media (max-width: 560px){
/* Am Handy genau eine Karte je Ansicht statt 88 % mit angeschnittener
   Nachbarkarte — die Punkte darunter zeigen ohnehin an, dass es weitergeht. */
.offers__track{ grid-auto-columns: 100%; } }

/* ===== Bereichsseiten (pages/[slug].astro) ===== */

.areaintro{ padding-block: clamp(2.5rem, 4vw, 4rem); }
.areaintro__inner p{ font-size: 0.97rem; }

/* ===== Unternehmen (Info-Seite, Layout nach Vorlage 08/2026) ===== */

/* Großer zweifarbiger Intro-Text mit Folgeabsatz */
.cintro{ padding-block: clamp(2.8rem, 5vw, 4.5rem) clamp(1rem, 2vw, 1.5rem); }
.cintro__text{
    margin: 0 auto; max-width: 62rem;
    text-align: center;
    font-size: clamp(1.3rem, 1rem + 1.3vw, 1.85rem);
    font-weight: 600; line-height: 1.5;
    color: var(--c-accent); /* Headline-Blau wie .heading */
  }
.cintro__soft{ color: var(--c-accent); } /* auf Wunsch komplett blau — Zweiteilung im Panel bleibt möglich */
.cintro__absatz{
    margin: 1.5rem auto 0; max-width: 46rem;
    text-align: center; color: var(--c-ink-soft);
  }

/* Zahlenreihe: blaue Werte (10 % kleiner) in hauchblauen Kästen */
.facts{ padding-block: clamp(2.2rem, 4vw, 3.5rem); }
.facts__grid{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gap); text-align: center;
  }
.facts__item{
    background: var(--c-surface-alt);
    padding: 1.9rem 1rem 1.7rem;
  }
.facts__value{
    display: block;
    font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.8rem);
    font-weight: 700; line-height: 1.2;
    color: var(--c-accent);
  }
.facts__label{
    display: block; margin-top: 0.35rem;
    color: var(--c-ink-soft); font-size: 0.92rem;
  }
/* Verlinkte Kennzahl (Firmensitz → Google Maps): sieht aus wie die übrigen,
   gibt sich erst beim Überfahren als Link zu erkennen */
a.facts__value{ text-decoration: none; }
a.facts__value:hover{ text-decoration: underline; }
@media (max-width: 860px){
.facts__grid{ grid-template-columns: repeat(2, 1fr); }
  }

/* Zentrierte Zwischenüberschrift + zentrierter Button */
.company-head{ text-align: center; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.company-head .heading{ margin-bottom: 0; }
.btn-row--center{ justify-content: center; }

/* Leistungsbereiche als verlinkte Mini-Sektionen, zweispaltig */
.minisec{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.9rem, 1.5vw, 1.25rem);
  }
/* Ungerade Gesamtzahl: letzter Eintrag über beide Spalten,
   sonst bliebe rechts unten ein Loch im Raster */
.minisec__item:last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (max-width: 700px){
.minisec{ grid-template-columns: 1fr; }
.minisec__item:last-child:nth-child(odd){ grid-column: auto; }
  }
.minisec__item{
    display: flex; align-items: center; gap: 1.15rem;
    background: var(--c-surface);
    padding: 1.3rem 1.5rem;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-fast) ease-out;
  }
.minisec__item:hover{ box-shadow: var(--shadow-card); }
/* Bereichs-Icon im Kreis — wie die Startseiten-Karten, nur kleiner */
.minisec__icon{
    flex: none; width: 54px; height: 54px;
    border: 2px solid currentColor; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--c-primary);
  }
.minisec__icon svg{ width: 28px; height: 28px; fill: currentColor; }
.minisec__content{ display: block; flex: 1; min-width: 0; }
.minisec__head{
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
.minisec__title{ font-weight: 600; color: var(--c-primary); }
.minisec__item .arrow{ flex: none; color: var(--c-primary); transition: transform var(--dur) var(--ease); }
.minisec__item:hover .arrow{ transform: translateX(3px); }
.minisec__text{
    display: block; margin-top: 0.3rem;
    color: var(--c-ink-soft); font-size: 0.95rem;
  }

/* ===== Kontakt (pages/kontakt.astro) ===== */

.kontakt__address{ font-style: normal; margin-top: 1.5rem; }
.kontakt__address a{ color: var(--c-primary); font-weight: 500; text-decoration: none; }
.kontakt__address a:hover{ text-decoration: underline; }

/* ===== Neuigkeiten-Übersicht (pages/neuigkeiten/index.astro) ===== */

.news-filter{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
.news-filter__pill{
    font: inherit; font-size: 0.95rem; font-weight: 500; letter-spacing: var(--ls-body);
    color: var(--c-ink); background: var(--c-surface);
    border: 1px solid var(--c-line); border-radius: var(--radius-btn);
    padding: 0.55rem 1.2rem; cursor: pointer;
    transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
  }
.news-filter__pill:hover{ border-color: var(--c-primary); color: var(--c-primary); }
.news-filter__pill.is-active{ background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.news-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); }
.news-card{
    background: var(--c-surface); box-shadow: var(--shadow-panel);
    display: flex; flex-direction: column;
    transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
  }
.news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.news-card[hidden]{ display: none; }
.news-card__media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.news-card__media-fallback{
    display: grid; place-items: center; width: 100%; height: 100%;
    background:
      linear-gradient(rgba(22, 22, 43, 0.92), rgba(22, 22, 43, 0.92)),
      var(--c-dark) url('/assets/img/World-White.png') center / 130% no-repeat;
  }
.news-card__media-fallback img{ width: 72px; height: 72px; object-fit: contain; }
.news-card__body{ display: flex; flex-direction: column; gap: 0.65rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.news-card__meta{ display: flex; align-items: center; gap: 0.9rem; margin: 0; font-size: 0.85rem; color: var(--c-ink-soft); }
.news-card__cat{
    background: var(--c-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; padding: 0.22rem 0.6rem; white-space: nowrap;
  }
.news-card h2{ font-size: 1.12rem; line-height: 1.35; margin: 0; }
.news-card h2 a{ color: var(--c-accent); text-decoration: none; }
.news-card h2 a:hover{ color: var(--c-primary); }
.news-card__excerpt{
    margin: 0; font-size: 0.93rem; color: var(--c-ink-soft);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
.news-card__more{ align-self: flex-start; margin-top: auto; padding: 0.65rem 1.25rem; font-size: 0.92rem; }
.news-empty{ text-align: center; color: var(--c-ink-soft); margin: 2rem 0 0; }@media (max-width: 1024px){
.news-grid{ grid-template-columns: repeat(2, 1fr); } }@media (max-width: 640px){
.news-grid{ grid-template-columns: 1fr; } }

/* ===== Neuigkeiten-Beitrag (pages/neuigkeiten/[...id].astro) ===== */

.post__body{ margin-block: 0 2.5rem; }
.post__body h2{ color: var(--c-accent); font-size: var(--fs-h3); margin-top: 1.8em; }
.post__body ul{ padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.post__body a{ color: var(--c-accent); font-weight: 500; }

/* ===== Rechtsseiten (pages/impressum.astro) ===== */

.legal h2{ color: var(--c-primary); font-size: var(--fs-h3); margin-top: 1.8em; }
.legal mark{ background: #fff3bf; padding: 0 0.3em; }
/* Hinweis auf den unverbindlichen Charakter der Übersetzung (nur EN-Seiten).
   Hellblau = --c-surface-alt wie alle hellen Flächen der Seite. */
.legal__note{
    background: var(--c-surface-alt); border-left: 3px solid var(--c-primary);
    padding: 0.9rem 1.1rem; margin: 0 0 2rem;
    color: var(--c-ink-soft); font-size: 0.95rem;
}
.legal a{ color: var(--c-primary); }