/* ═══════════════════════════════════════════════════════════
   imrox — shared design system
   Loaded by every page. Page-specific one-off CSS stays inline
   in that page's <head> — keep those small; if one grows large,
   promote it into a component here instead.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────── FONTS ───────────────────────── */
@font-face{
  font-family:'Sansation'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/sansation-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Sansation'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/sansation-bold.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/roboto-latin.woff2') format('woff2');
}

/* ───────────────────────── TOKENS ──────────────────────── */
:root{
  /* brand */
  --navy:        #25263a;
  --navy-2:      #32334a;
  --obsidian:    #16161f;
  --obsidian-2:  #1e1f2c;

  --canvas:      #fafaf9;
  --paper:       #ffffff;
  --hairline:    #e6e5e2;
  --hairline-2:  #ececea;

  --ink:         #25263a;
  --ink-soft:    #55566b;
  --ink-mute:    #737488; /* darkened from #8a8b9c: original failed WCAG AA (3.36:1 on white) at the small sizes it's used at; this hue/sat held constant reaches 4.59:1 */

  --chalk:       #f4f4f6;
  --mist:        #b9bacb;
  --smoke:       #7d7e93;

  --g1:#6083f4; --g2:#2ee1f4; --g3:#f254c9; --g4:#ab48e7; --g5:#6629f4;
  --amber:#f5ba57;

  /* single solid accent for labels/highlights (from the CD-manual secondary palette) + navy for actions */
  --accent:      #7c15fa;
  --accent-dark: #63109f;
  --btn:         var(--navy);
  --btn-hover:   #35364e;

  /* per-category accents for the 5 Anwendungsbereiche — reuses existing brand hues, no new colors */
  --acc-logistik:  var(--g3);   /* pink/magenta */
  --acc-reinigung: var(--g2);   /* turquoise    */
  --acc-service:   var(--accent); /* violet     */
  --acc-assistenz: var(--g1);   /* blue/indigo  */
  --acc-outdoor:   var(--amber);

  --grad-brand: linear-gradient(120deg, var(--g1) 0%, var(--g2) 32%, var(--g3) 66%, var(--g4) 100%);
  --grad-orb: radial-gradient(circle at 30% 30%, var(--g1), transparent 60%),
              radial-gradient(circle at 70% 20%, var(--g2), transparent 55%),
              radial-gradient(circle at 75% 75%, var(--g3), transparent 55%),
              radial-gradient(circle at 25% 75%, var(--g4), transparent 55%);

  --ff-head:'Sansation', system-ui, sans-serif;
  --ff-body:'Roboto', system-ui, sans-serif;

  --max: 1240px;
  --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(37,38,58,.04), 0 16px 32px -12px rgba(37,38,58,.10);
  --shadow-card-hover: 0 1px 2px rgba(37,38,58,.05), 0 28px 48px -16px rgba(37,38,58,.16);
}

*{box-sizing:border-box;}
/* overflow-x:clip statt :hidden — :hidden zwingt laut Spec die unspezifizierte overflow-y
   (bleibt "visible") auf "auto", wodurch html/body faelschlich selbst zum Scroll-Container
   werden, obwohl tatsaechlich das Dokument/Viewport scrollt. Das bricht animation-timeline:
   view() weiter unten (die Timeline haengt dann permanent im Endzustand fest, da ihr
   vermeintlicher Scrollport nie scrollt). :clip clippt exakt genauso, loest die Auto-Beforderung
   aber nicht aus. */
html{scroll-behavior:smooth; overflow-x:clip;}
/* Sitesweite Ausnahme fuer alle Anker-Sprungziele (Schnellnav, TOC, "Zur Uebersicht"-Links etc.):
   ohne das wuerde scroll-behavior:smooth auch bei aktiviertem "Bewegung reduzieren" sanft scrollen,
   da der Browser das nicht automatisch verknuepft. */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
/* Page-wide grain texture (CI-adapted from a user-supplied SVG): feTurbulence + feSpecularLighting
   noise, tinted with --accent-dark. The effect itself is inherently very faint (barely visible even
   at opacity:1 — verified by rendering it standalone), so the root opacity stays close to the
   0.48 original rather than being pushed lower like the flat-color bridges elsewhere in this file.
   Runs underneath every canvas-background section automatically since it's set once on body —
   sections don't need their own copy, EXCEPT .hero, which paints its own opaque background and
   repeats the same layer so the texture reads as one continuous surface instead of a treatment
   that stops at the seam. .dark-sec keeps its own existing grid-line texture instead — two
   overlapping textures there would look busy. */
body{
  margin:0; color:var(--ink);
  font-family:var(--ff-body); font-weight:400;
  -webkit-font-smoothing:antialiased; line-height:1.6;
  overflow-x:clip; /* :clip statt :hidden — Begruendung siehe html{} oben */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' width='700' height='700' opacity='0.14'%3E%3Cdefs%3E%3Cfilter id='nnoise' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.181' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'/%3E%3CfeSpecularLighting surfaceScale='7' specularConstant='0.5' specularExponent='20' lighting-color='%2363109f' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='89'/%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='transparent'/%3E%3Crect width='700' height='700' fill='%2363109f' filter='url(%23nnoise)'/%3E%3C/svg%3E"),
    var(--canvas);
}
img{max-width:100%; display:block;}
/* Lazy-geladene Bilder faden ein statt abrupt zu erscheinen, sobald main.js per 'load'-Event
   (oder Sicherheitsnetz-Timeout) .loaded ergaenzt. Nicht auf loading="lazy" selbst gestuetzt,
   damit ein spaet greifendes JS die Bilder nicht dauerhaft unsichtbar laesst. */
img[loading="lazy"]{ opacity:0; transition:opacity .35s ease; }
img[loading="lazy"].loaded{ opacity:1; }
@media (prefers-reduced-motion:reduce){ img[loading="lazy"]{ transition:none; opacity:1; } }
a{color:inherit; text-decoration:none;}
::selection{ background-color:var(--accent); color:#fff; }
::-moz-selection{ background-color:var(--accent); color:#fff; }
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--ff-head); font-weight:700; margin:0; letter-spacing:-.01em; color:var(--navy);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* Ohne vorangestellten Punkt: der Marker hat den Eyebrow zusaetzlich zum Ornament gemacht,
   statt ihn als Kategorie lesbar zu halten. Farbe und Tracking tragen die Auszeichnung allein.
   Das gap bleibt fuer den Fall, dass ein Eyebrow spaeter ein echtes Icon fuehrt. */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}

section{position:relative;}
.section-pad{padding:104px 0;}
@media (max-width:900px){ .section-pad{padding:72px 0;} }
/* Keep the full .section-pad top padding even directly after a .dark-sec section — the color
   change already reads as a clear boundary, zeroing the padding makes content cling to the dark
   bar above it (fixed once already after user feedback, don't reintroduce padding-top:0 here). */

/* Vertikaler Rhythmus — drei Stufen statt einer.
   Wahrgenommen wird nicht das Padding einer Sektion, sondern die Summe beider: 104 unten +
   104 oben = 208px zwischen zwei aufeinanderfolgenden Sektionen. Genau dieser eine Wert galt
   bisher ueberall, unabhaengig davon, ob dort ein Themenwechsel stattfindet oder ein Gedanke
   fortgesetzt wird. Zwei Modifier staffeln ihn nach Gewicht. Gesetzt wird der Modifier immer
   an der *unteren* der beiden Sektionen — der Abstand gehoert zu dem, was danach kommt:

     .pad-tight -> 144px Abstand: die Sektion fuehrt die darueberliegende fort
                   (Fusstexte, FAQ zum selben Thema, zweiter Teil eines Blocks)
     (Standard) -> 208px Abstand: der Normalfall, bleibt unveraendert
     .pad-major -> 264px Abstand: die eine Sektion, die den Kern der Seite traegt;
                   hoechstens einmal pro Seite, sonst ist es keine Auszeichnung mehr

   Ein enger Abstand wird als Paar gesetzt: .pad-tight-above an die obere, .pad-tight an die
   untere Sektion (72 + 72 = 144). Die Verkuerzung symmetrisch zu verteilen ist kein Detail —
   viele Sektionen tragen oben eine Haarlinie (.rd-desc, .rd-faq, .faq-section, .quote-sec
   u.a.). Wuerde nur unterhalb der Linie gekuerzt, klebte die Linie sichtbar an der
   Ueberschrift darunter, statt zwischen beiden Sektionen zu stehen.

   Bewusst zwei Klassen statt einer Geschwister-Regel (.section-pad:has(+ .pad-tight)):
   zwischen zwei Sektionen steht auf vielen Seiten ein <style>-Block, der die Nachbarschaft
   im DOM unterbricht. Die Regel wuerde dort still ausfallen.

   .pad-tight-solo nimmt die ganze Verkuerzung stattdessen unten (40px). Das ist der Fall,
   wenn die obere Sektion ihr Padding behalten muss — vor allem bei einer .dark-sec, deren
   unteres Padding *innerhalb* des farbigen Blocks liegt und ihn sonst innen unsymmetrisch
   machen wuerde. Vgl. den Hinweis oben: unter einer .dark-sec nie auf 0 gehen.

   Sitzt oben ein Hero mit abweichendem Padding, verschiebt sich die Summe entsprechend —
   die Staffelung gegenueber dem Standard bleibt gleich. */
.section-pad.pad-tight{padding-top:72px;}
.section-pad.pad-tight-above{padding-bottom:72px;}
.section-pad.pad-tight-solo{padding-top:40px;}
.section-pad.pad-major{padding-top:160px;}
@media (max-width:900px){
  .section-pad.pad-tight{padding-top:48px;}
  .section-pad.pad-tight-above{padding-bottom:48px;}
  .section-pad.pad-tight-solo{padding-top:24px;}
  .section-pad.pad-major{padding-top:112px;}
}

#anwendungsbereiche{ isolation:isolate; }
#anwendungsbereiche::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:0; right:0; bottom:-64px; height:130px;
  background:
    radial-gradient(560px 210px at 18% 100%, rgba(37,38,58,.05), transparent 70%),
    radial-gradient(600px 210px at 82% 0%, rgba(242,84,201,.06), transparent 72%);
}
.sec-partner{ isolation:isolate; }
.sec-partner::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:0; right:0; bottom:-64px; height:130px;
  background:radial-gradient(560px 64px at 50% 50%, rgba(96,131,244,.06), transparent 72%);
}

/* ───────────────────────── REVEAL ──────────────────────── */
/* IMPORTANT: keep the .has-js gating + JS safety-net timeout for every new use of
   .reveal — without it, content can be permanently invisible if IntersectionObserver
   never fires (fixed once already, don't reintroduce). */
.reveal{ transition:opacity .7s ease, transform .7s ease; }
.has-js .reveal{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Opt-in Zusatz zu .reveal fuer mehrgliedrige Container (Karten-/Kachel-Reihen): statt dass die
   ganze Gruppe als ein Block aufploppt, blendet main.js' IntersectionObserver weiterhin nur den
   Container selbst per .in ein — hier aber wird stattdessen jedes direkte Kind einzeln mit 60ms
   Versatz sichtbar (Reihenfolge/Struktur der Gruppe wird beim ersten Sichtbarwerden spuerbar).
   Zusammen mit .reveal auf demselben Element verwenden, z.B. class="process steps-5 reveal
   reveal-stagger". Container-Selektor bewusst mit .has-js verdoppelt, um garantiert ueber der
   .has-js .reveal-Grundregel gleicher Spezifitaet zu gewinnen, unabhaengig von der Reihenfolge. */
.has-js .reveal.reveal-stagger{ opacity:1; transform:none; transition:none; }
.reveal.reveal-stagger > *{ transition:opacity .7s ease, transform .7s ease; }
.has-js .reveal.reveal-stagger > *{ opacity:0; transform:translateY(24px); }
.reveal.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal.reveal-stagger > *:nth-child(1){ transition-delay:0ms; }
.reveal.reveal-stagger > *:nth-child(2){ transition-delay:60ms; }
.reveal.reveal-stagger > *:nth-child(3){ transition-delay:120ms; }
.reveal.reveal-stagger > *:nth-child(4){ transition-delay:180ms; }
.reveal.reveal-stagger > *:nth-child(5){ transition-delay:240ms; }
.reveal.reveal-stagger > *:nth-child(6){ transition-delay:300ms; }
.reveal.reveal-stagger > *:nth-child(7){ transition-delay:360ms; }
.reveal.reveal-stagger > *:nth-child(8){ transition-delay:420ms; }
.reveal.reveal-stagger > *:nth-child(9){ transition-delay:480ms; }
.reveal.reveal-stagger > *:nth-child(10){ transition-delay:540ms; }
@media (prefers-reduced-motion:reduce){
  .reveal.reveal-stagger > *{ transition:none; }
}

/* ── Scroll-Driven Animations (progressive enhancement, ~87% Support Stand 2026) ──
   Das JS/IntersectionObserver-Modell oben feuert an EINEM Schwellenwert einmalig und springt
   dann hart auf "fertig" — bei unterschiedlichen Element-/Bildschirmgroessen (v.a. auf kleinen
   Screens) wirkt der Zeitpunkt dadurch nie ganz richtig, egal wie der Schwellenwert justiert
   wird. animation-timeline:view() koppelt die Animation stattdessen direkt und kontinuierlich
   an die tatsaechliche Scroll-Position des jeweiligen Elements — kein Rate-Schwellenwert mehr,
   funktioniert dadurch bei jeder Bildschirmgroesse gleich stimmig. In nicht unterstuetzenden
   Browsern (@supports-Fallback) bleibt das bestehende JS/.in-Modell unveraendert aktiv. */
/* Nur Reinscrollen animiert (kein generelles Ausblenden beim Rausscrollen mehr — das kollidierte
   mit .warp weiter unten, das JEDES .reveal-Element als Wrapper umschliesst und bereits eigens
   fuer das Verschwinden unter der Kopfzeile zustaendig ist. Zwei unabhaengige Opacity-Effekte auf
   verschachtelten Knoten liefen gegeneinander und wirkten wie eine Verzerrung. Rausscroll-Fade
   passiert jetzt ausschliesslich ueber .warp, dort aber bewusst nur nahe der Kopfzeile statt
   ueber die ganze Seite verteilt — siehe .warp weiter unten.) */
@keyframes reveal-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@supports (animation-timeline:view()){
  /* alten statischen Versteck-Zustand neutralisieren, die neue Animation uebernimmt ihn selbst
     (fill-mode "both" haelt "from" bis Range-Start, "to" ab Range-Ende). .in ausgenommen: das
     ist der Hero-Sonderfall (class="... reveal in" fest im Markup) und soll wie bisher immer
     sofort UND dauerhaft sichtbar bleiben. */
  .has-js .reveal:not(.in){ opacity:1; transform:none; }
  .has-js .reveal.reveal-stagger > *{ opacity:1; transform:none; }
  .reveal:not(.reveal-stagger):not(.in){
    animation:reveal-in linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
  /* jedes Kind bekommt eine eigene, an seine eigene Sichtbarkeit gekoppelte Timeline statt
     fixer ms-Verzoegerungen ab dem Container-Trigger — bei senkrecht gestapelten Listen (FAQ
     etc.) blendet so jedes Element genau dann ein, wenn es selbst in den sichtbaren Bereich
     kommt, nicht alle auf einmal beim erstmaligen Antriggern des ganzen Blocks. */
  .reveal.reveal-stagger > *{
    animation:reveal-in linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
    transition:none;
  }
  @media (prefers-reduced-motion:reduce){
    .reveal:not(.reveal-stagger):not(.in), .reveal.reveal-stagger > *{ animation:none; }
  }
}

/* ───────────────────────── WARP ON SCROLL ──────────────── */
/* Perspektivischer Sog-Effekt beim Verschwinden unter der Header-Leiste.
   JS schreibt nur --p (0..1) per requestAnimationFrame; CSS besitzt die Rezeptur.
   NIE .warp und .reveal auf demselben Element kombinieren — .warp umschließt
   den bestehenden .reveal-Knoten als Wrapper, sonst konkurrieren beide um
   transform/opacity auf demselben Knoten.
   JS liest Position/Zone NIE live vom (ggf. transformierten) Element — Messung ist
   auf Load/Resize/Font-Ready gecacht, Zone ist pro Element auf dessen eigene Höhe
   geclampt (sonst kappt eine feste Zone kurze Elemente weit vor Progress=1).
   .warp gehört möglichst direkt auf das eigenständige Teilstück (Karte/Zeile/Bild) —
   nur wenn das Element eine eigene :hover{transform:...}-Regel, eine .reveal-Klasse
   oder eine strukturelle :first-child/:last-child/:nth-child-Abhängigkeit hat, in
   einen eigenen <div class="warp"> wrappen statt die Klasse direkt zu setzen. */
.warp{
  --p:0;
  /* Frueher perspektivische 3D-Verzerrung (Skalierung/Rotation/Perspektive) — auf Nutzerfeedback
     hin auf ein reines, leichtes Ausblenden reduziert. Die Zonen-Berechnung in main.js bleibt
     unveraendert: Effekt bleibt exakt auf die Naehe zur Kopfzeile begrenzt, Inhalt weiter unten
     in derselben Section blendet nicht mit aus. */
  opacity:calc(1 - var(--p));
  will-change:opacity;
}
@media (prefers-reduced-motion:reduce){
  .warp{ opacity:1 !important; }
}

/* ───────────────────────── BUTTONS ─────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff-head); font-weight:700; font-size:15px;
  padding:15px 30px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{
  background:var(--btn); color:#fff;
  box-shadow:0 10px 24px -10px rgba(37,38,58,.5);
}
.btn-primary:hover{ background:var(--btn-hover); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(37,38,58,.55); }
.btn-ghost{
  background:transparent; color:var(--navy); border-color:var(--hairline);
}
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.22); }
/* Nach den Hover-Regeln platziert und bewusst wiederholt: :active und :hover haben dieselbe
   Spezifitaet (0,1,1), bei gleichzeitigem Hover+Press (Desktop-Maus haelt beim Klicken immer
   auch :hover) gewinnt sonst per Kaskaden-Reihenfolge die Hover-Regel und der Press-Effekt
   waere unsichtbar. */
.btn:active{ transform:scale(.97); transition-duration:.12s; }
@media (prefers-reduced-motion:reduce){ .btn:active{ transform:none; } }
.btn-ghost.on-dark:hover{ border-color:rgba(255,255,255,.55); }
.btn-sm{ padding:11px 20px; font-size:13.5px; }
.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* ─────────────────────── SKIP LINK ─────────────────────── */
.skip-link{
  position:absolute; top:-80px; left:16px; z-index:1000;
  padding:12px 20px; background:var(--navy); color:#fff;
  font-family:var(--ff-head); font-weight:700; font-size:14px;
  border-radius:var(--r-md); text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ───────────────────────── NAV ─────────────────────────── */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
}
header .bar{
  max-width:var(--max); margin:0 auto; padding:10px 14px 10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(37,38,58,.07); border-radius:var(--r-pill);
  box-shadow:0 8px 30px -14px rgba(37,38,58,.18);
  transition:background .3s ease, box-shadow .2s ease;
}
@media (prefers-reduced-motion:reduce){ header .bar{ transition:background .3s ease; } }
.logo{ display:flex; flex-direction:column; line-height:1; gap:3px; }
/* Logo-Datei enthält den Slogan als eingebauten Bildteil (SVG viewBox 267.5x79.83:
   Wortmarke y 0–53.8, Slogan-Text y 66–79.83) — wird hier nur auf der Website
   weggeschnitten, die Originaldatei assets/logo.svg bleibt unverändert. */
.logo .logo-img-wrap{ display:block; height:22px; overflow:hidden; }
.logo .logo-img-wrap img{ display:block; height:30px; width:auto; }
.logo .mark{
  font-family:var(--ff-head); font-weight:700; font-size:22px; letter-spacing:-.01em;
  color:var(--accent); /* fallback for browsers without background-clip:text support — see @supports below */
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .logo .mark{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.logo .tag{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;
}
nav.primary{ display:flex; align-items:center; gap:2px; }
nav.primary a{
  padding:10px 16px; border-radius:var(--r-pill); font-size:14.5px; font-weight:500; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease;
}
nav.primary a:hover{ background:rgba(37,38,58,.05); color:var(--navy); }
/* Eigene, deutlich vom Hover unterscheidbare Kennzeichnung der aktiven Seite: violett getoente
   Pille + fette, akzentfarbene Schrift statt derselben grauen Pille wie beim Hover ueber jeden
   beliebigen Nav-Punkt — sonst liest sich "aktive Seite" nur wie "Maus zufaellig drueber". */
nav.primary a[aria-current="page"]{
  background:color-mix(in srgb, var(--accent) 10%, var(--paper));
  color:var(--accent); font-weight:700;
}

/* ── "Anwendungsbereiche" Mega-Menü: Hover/Focus-Dropdown, zweizeiliges 3×2-Raster ──
   (5 Bereiche + "Alle im Überblick" als 6. Kachel). .nav-drop-item/.nav-drop-all sind
   <a>-Elemente innerhalb von nav.primary und würden sonst von der generischen
   "nav.primary a"-Regel oben überschrieben (deren Selektor ist trotz nur einer Klasse
   spezifischer als eine einzelne Klasse hier) — daher unten konsequent über den
   zusätzlichen Vorfahren .nav-drop-panel referenziert, um sicher zu gewinnen. */
.nav-drop{ position:relative; }
.nav-drop > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-drop > a svg{ width:10px; height:10px; transition:transform .25s ease; }
.nav-drop:hover > a svg, .nav-drop:focus-within > a svg{ transform:rotate(180deg); }
.nav-drop-panel{
  /* top:100% (statt top:calc(100% + 10px)) + padding-top als unsichtbare "Brücke": beim
     Runterfahren von Button zu Panel bleibt die Maus so durchgehend über einem Kind-Element
     von .nav-drop. Mit einer echten Lücke dazwischen kippt :hover dort weg, sobald die Maus
     die Lücke langsamer durchquert als die CSS-Transition — das eigentliche Bugbild. Die
     sichtbare Karte (Hintergrund/Schatten/Radius/Slide-Animation) sitzt deshalb in einem
     eigenen .nav-drop-panel-inner, das den Padding-Bereich ausfüllt. */
  position:absolute; top:100%; left:0; width:620px; z-index:120; padding-top:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s;
}
.nav-drop-panel-inner{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card-hover); padding:12px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  transform:translateY(6px); transition:transform .18s ease;
}
.nav-drop:hover .nav-drop-panel-inner, .nav-drop:focus-within .nav-drop-panel-inner{
  transform:translateY(0);
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-drop-panel .nav-drop-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px 14px;
  border-radius:var(--r-md); color:var(--ink-soft); font-size:13px; font-weight:400;
  transition:background .15s ease;
}
.nav-drop-panel .nav-drop-item:hover, .nav-drop-panel .nav-drop-item:focus-visible{ background:var(--chalk); }
.nav-drop-item .ic{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--acc) 14%, var(--paper)); color:var(--acc);
}
.nav-drop-item .ic svg{ width:17px; height:17px; }
.nav-drop-item strong{ font-family:var(--ff-head); font-weight:700; font-size:13.5px; color:var(--navy); }
.nav-drop-item .desc, .nav-drop-all .desc{ font-size:11.5px; line-height:1.4; }
.nav-drop-item.c-logistik{ --acc:var(--acc-logistik); }
.nav-drop-item.c-reinigung{ --acc:var(--acc-reinigung); }
.nav-drop-item.c-service{ --acc:var(--acc-service); }
.nav-drop-item.c-assistenz{ --acc:var(--acc-assistenz); }
.nav-drop-item.c-outdoor{ --acc:var(--acc-outdoor); }
.nav-drop-panel .nav-drop-all{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  padding:16px 14px; border-radius:var(--r-md); background:var(--chalk); color:var(--navy);
}
.nav-drop-panel .nav-drop-all:hover{ background:var(--chalk); }
.nav-drop-all .ic{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--navy) 10%, var(--paper)); color:var(--navy);
}
.nav-drop-all .ic svg{ width:16px; height:16px; }
.nav-drop-all strong{ font-family:var(--ff-head); font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; }
.nav-drop-all strong svg{ width:13px; height:13px; transition:transform .2s ease; }
.nav-drop-panel .nav-drop-all:hover strong svg{ transform:translateX(3px); }

.header-cta{ display:flex; align-items:center; gap:10px; }
.phone-link{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--navy);
  padding:0 6px;
}
.phone-link svg{ width:16px; height:16px; }
@media (max-width:980px){
  nav.primary{ display:none; }
  .phone-link span{ display:none; }
}

/* ───────────────────────── HERO ────────────────────────── */
.hero{
  isolation:isolate;
  padding:180px 0 120px;
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(96,131,244,.16), transparent 60%),
    radial-gradient(900px 520px at -10% 30%, rgba(242,84,201,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' width='700' height='700' opacity='0.14'%3E%3Cdefs%3E%3Cfilter id='nnoise' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.181' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'/%3E%3CfeSpecularLighting surfaceScale='7' specularConstant='0.5' specularExponent='20' lighting-color='%2363109f' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='89'/%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='transparent'/%3E%3Crect width='700' height='700' fill='%2363109f' filter='url(%23nnoise)'/%3E%3C/svg%3E"),
    var(--canvas);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
.hero h1{
  font-size:clamp(34px,4.6vw,56px); line-height:1.05; letter-spacing:-.02em;
}
.hero h1 em{
  font-style:normal;
  color:var(--accent); /* fallback for browsers without background-clip:text support */
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero h1 em{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.hero p.lead{
  font-size:18px; color:var(--ink-soft); max-width:520px; margin:22px 0 30px;
}
.hero-features{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:36px; }
.hero-features li{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--hairline); padding:8px 14px 8px 10px; border-radius:var(--r-pill);
}
.hero-features .dot{
  width:16px; height:16px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--accent);
}
.hero-features .dot svg{ width:9px; height:9px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-visual{ position:relative; }
.hero-visual .orb{
  position:absolute; inset:-16% -20% auto auto; width:70%; aspect-ratio:1;
  background:var(--grad-orb); filter:blur(60px) saturate(140%); opacity:.55; z-index:0; border-radius:50%;
}
.hero-visual figure{
  position:relative; z-index:1; margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow-card-hover);
}
.hero-visual img{ width:100%; height:480px; object-fit:cover; }
.hero-visual .chip{
  position:absolute; z-index:2; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px;
  box-shadow:var(--shadow-card); display:flex; align-items:center; gap:10px;
}
.hero-visual .chip.c1{ bottom:20px; left:-24px; }
.hero-visual .chip.c2{ top:22px; right:-18px; }
.hero-visual .chip strong{ display:block; font-family:var(--ff-head); font-size:13.5px; color:var(--navy); }
.hero-visual .chip span{ font-size:11.5px; color:var(--ink-soft); }
.hero-visual .chip .ic{
  width:34px; height:34px; border-radius:50%; background:var(--accent); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual .chip .ic svg{ width:16px; height:16px; stroke:#fff; }
@media (max-width:980px){
  .hero{ padding:150px 0 88px; }
  .hero-grid{ grid-template-columns:1fr; gap:56px; }
  .hero-visual .chip{ display:none; }
  .hero-visual .orb{ display:none; }
}

/* Section-boundary bridges: soft connective elements at section seams so the page doesn't read as
   flat, disconnected blocks. Each lives on a ::before/::after with z-index:-1. A section that sets
   its own background directly (like .hero, .dark-sec below) doesn't form a stacking context just
   from position:relative — a negative-z-index child would then paint behind that own background and
   be invisible, so isolation:isolate is required on every section that hosts a bridge. */
.hero::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:0; right:0; bottom:-64px; height:130px;
  background:
    radial-gradient(620px 220px at 78% 0%, rgba(96,131,244,.10), transparent 70%),
    radial-gradient(520px 200px at 6% 100%, rgba(242,84,201,.07), transparent 70%);
}

/* ───── Photo-background hero (Leistungen + Anwendungsbereiche pages) ───── */
.ab-hero{
  position:relative; padding:200px 0 90px; overflow:hidden; color:#fff;
}
.ab-hero .bg{
  position:absolute; inset:0; z-index:0;
}
.ab-hero .bg img{ width:100%; height:100%; object-fit:cover; }
.ab-hero .bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,22,31,.35) 0%, rgba(22,22,31,.55) 55%, rgba(22,22,31,.82) 100%);
}
.ab-hero .wrap{ position:relative; z-index:1; }
.ab-hero .eyebrow{ color:#bcd0ff; }
.ab-hero h1{ color:#fff; font-size:clamp(32px,4.4vw,52px); line-height:1.06; letter-spacing:-.02em; max-width:720px; }
.ab-hero p.lead{ color:rgba(255,255,255,.82); font-size:17px; max-width:560px; margin:18px 0 30px; }
@media (max-width:900px){ .ab-hero{ padding:150px 0 64px; } }

/* ───────────────────────── TRUST BAR ───────────────────── */
.trust{ padding:36px 0 100px; }
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.trust-grid div{
  padding:26px 28px; border-right:1px solid var(--hairline);
  font-family:var(--ff-head); font-size:14.5px; font-weight:700; color:var(--navy); line-height:1.4;
}
.trust-grid div span{ display:block; font-family:var(--ff-body); font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.trust-grid div:last-child{ border-right:none; }
@media (max-width:900px){
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid div:nth-child(2){ border-right:none; }
  .trust-grid div{ border-bottom:1px solid var(--hairline); }
}
@media (max-width:560px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-grid div{ border-right:none; }
}

/* ───────────────────────── SPLIT (image/text row) ────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split .media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.split .media img{ width:100%; height:420px; object-fit:cover; }
.split h2{ font-size:clamp(26px,3vw,36px); line-height:1.15; margin-bottom:18px; }
.split p{ color:var(--ink-soft); font-size:16px; margin-bottom:16px; }
.checklist{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); }
.checklist .ic{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
  background:rgba(124,21,250,.1); border:1px solid rgba(124,21,250,.18);
  display:flex; align-items:center; justify-content:center;
}
.checklist .ic svg{ width:11px; height:11px; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .split .media img{ height:300px; }
  .split.rev{ display:flex; flex-direction:column-reverse; }
  .rd-media-placeholder{ height:300px; }
}

/* Platzhalter fuer ein spaeteres Video/Bild neben der Beschreibung einer Roboter-Detailseite,
   solange kein echtes Material vorliegt (gleiches ehrliches Muster wie .prod-visual-placeholder). */
.rd-media-placeholder{
  height:420px; display:flex; align-items:center; justify-content:center;
  background:var(--chalk);
}
.rd-media-placeholder .prod-visual-placeholder svg{ width:48px; height:48px; }

/* ───────────────────────── SECTION HEAD ─────────────────── */
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; }
.sec-head p{ color:var(--ink-soft); font-size:16.5px; margin-top:16px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }

/* ───────────────────────── CARD GRID (products/portfolio) ── */
.portfolio-grid, .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.p-card, .product-card{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column;
}
.p-card:hover, .product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); border-color:transparent; }
.p-card .thumb, .product-card .thumb{ height:180px; overflow:hidden; background:var(--chalk); }
.p-card .thumb img, .product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.p-card .thumb.contain, .product-card .thumb.contain{ display:flex; align-items:center; justify-content:center; }
.p-card .thumb.contain img, .product-card .thumb.contain img{ width:80%; height:80%; object-fit:contain; }
.p-card:hover .thumb img, .product-card:hover .thumb img{ transform:scale(1.06); }
.p-card .body, .product-card .body{ padding:24px 24px 26px; }
.p-card .tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--g5); margin-bottom:10px;
}
.p-card h3, .product-card h3{ font-size:18px; margin-bottom:8px; }
.p-card p, .product-card p{ font-size:14px; color:var(--ink-soft); margin:0 0 14px; }
.p-card .more{ font-size:13px; font-weight:700; color:var(--navy); display:inline-flex; align-items:center; gap:6px; }
.p-card .more svg{ width:13px; height:13px; transition:transform .2s ease; }
.p-card:hover .more svg{ transform:translateX(3px); }
@media (max-width:980px){ .portfolio-grid, .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .portfolio-grid, .product-grid{ grid-template-columns:1fr; } }

/* Finanzierungsmodelle + Rechenbeispiel (leistungen.html, kosten.html) */
.fin-note{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:44px 40px;
}
.fin-note-text{ border-left:1px solid var(--hairline); padding-left:40px; }
.fin-note-text h3{ font-size:16px; margin-bottom:8px; }
.fin-note-text p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }
/* Rechenbeispiel: illustrative Modellrechnung, kein echter Kundenfall — deshalb im selben
   gestrichelten "Muster"-Stil wie die Kundenstimmen auf ueber-uns.html markiert. */
.fin-example{
  margin-top:24px; padding:32px 34px;
  border:1px dashed var(--hairline); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--chalk) 60%, var(--paper));
}
.fin-example-tag{
  display:inline-block; font-family:var(--ff-head); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  border:1px dashed var(--hairline); border-radius:var(--r-pill); padding:4px 11px; margin-bottom:14px;
}
.fin-example h3{ font-size:17px; margin:0 0 20px; color:var(--navy); }
.fin-example-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:16px; }
.fin-example-num{ display:block; font-family:var(--ff-head); font-weight:700; font-size:24px; color:var(--navy); margin-bottom:4px; }
.fin-example-label{ font-family:var(--ff-body); font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.fin-example-note{ font-family:var(--ff-body); font-size:12.5px; color:var(--ink-mute); margin:0; font-style:italic; }
@media (max-width:700px){ .fin-example-grid{ grid-template-columns:1fr; } }
.fin-list{ display:flex; flex-direction:column; }
.fin-row{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; }
.fin-row + .fin-row{ border-top:1px solid var(--hairline); }
.fin-row .ic{ width:34px; height:34px; border-radius:var(--r-sm); background:var(--chalk); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.fin-row .ic svg{ width:16px; height:16px; stroke:var(--accent); }
.fin-row h4{ font-family:var(--ff-head); font-weight:700; font-size:14px; color:var(--navy); margin:0 0 2px; }
.fin-row p{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0; }
@media (max-width:900px){
  .fin-note{ grid-template-columns:1fr; padding:32px 24px; }
  .fin-note-text{ border-left:none; border-top:1px solid var(--hairline); padding-left:0; padding-top:28px; margin-top:8px; }
}

/* Product spec pills */
.tag-pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-pill{
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); color:var(--ink-soft); background:var(--paper);
}
.tag-pill.neutral{ background:var(--chalk); }
.product-card .tag-pill-row{ padding:0 24px 14px; gap:6px; }
.product-card .tag-pill{ font-size:11px; padding:5px 10px; }

/* ───────────────────────── DARK / SYSTEM ───────────────── */
.dark-sec{
  isolation:isolate;
  background:var(--obsidian);
  color:var(--chalk);
  background-image:
    radial-gradient(900px 500px at 90% 0%, rgba(96,131,244,.16), transparent 60%),
    radial-gradient(700px 460px at 0% 100%, rgba(242,84,201,.10), transparent 60%),
    linear-gradient(var(--obsidian),var(--obsidian)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
}
/* Contour line instead of a filled fade area (chosen over several filled-area variants in
   _archive/vergleich/vergleich-dark-transition.html) — a thin brand-gradient line right at the section edge, with a
   blurred halo behind it for glow. Since it's a thin decorative line rather than a flat area trying
   to look uniform, it doesn't fight with the corner glows the way the old fade did — no masking
   needed, the corner glows live directly in .dark-sec's own background again. */
.dark-sec-line{
  position:absolute; z-index:1; pointer-events:none; left:8%; right:8%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--g1), var(--g2), var(--g3), var(--g4), transparent);
  opacity:.7;
}
.dark-sec-line.top{ top:0; }
.dark-sec-line.bottom{ bottom:0; }
.dark-sec-line::before{
  content:''; position:absolute; inset:-6px 0; filter:blur(6px); background:inherit; opacity:.6;
}
.dark-sec .eyebrow{ color:#9fb4ff; }
.dark-sec .sec-head h2{ color:#fff; }
.dark-sec .sec-head p{ color:var(--mist); }

.sys-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.loop{ position:relative; width:100%; aspect-ratio:1/.62; }
.loop svg{ width:100%; height:100%; }
.loop-label{
  position:absolute; top:50%; transform:translateY(-50%); font-family:var(--ff-head); font-weight:700; font-size:17px;
}
.loop-label.l{ left:0; color:#a9b6ff; }
.loop-label.r{ right:0; color:#f2a9e6; text-align:right; }

.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tab-btn{
  font-family:var(--ff-head); font-size:13px; font-weight:700; letter-spacing:.01em;
  padding:11px 18px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:var(--mist); cursor:pointer; transition:all .25s ease;
}
.tab-btn.active{ background:#fff; color:var(--navy); border-color:transparent; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade .4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.tab-panel p{ color:var(--mist); font-size:15.5px; margin-bottom:18px; }
.tab-panel ul{ display:flex; flex-direction:column; gap:12px; }
.tab-panel li{
  display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--chalk);
  padding:14px 16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md);
}
.tab-panel li .ic{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.tab-panel li .ic svg{ width:12px; height:12px; stroke:#fff; }
@media (max-width:900px){ .sys-layout{ grid-template-columns:1fr; gap:40px; } }

/* ───── "Vier Dimensionen, ein Projekt" Fluss-Sektion — lebt in .dark-sec ─────
   Grafik oben (Mount-Punkt für die animierte ∞-Kurve aus main.js), darunter eine
   verbindende Linie mit farbigen Punkten, die zu vier Kacheln (eine je Dimension)
   herunterführen. */
.infinity-mount{ position:relative; }
.infinity-mount .seg{ opacity:0; animation:infReveal .4s ease forwards; }
@keyframes infReveal{ to{ opacity:var(--target-opacity, 1); } }

.dim-flow-stage{ position:relative; display:flex; justify-content:center; margin:40px auto 0; }
.dim-flow-glow{
  position:absolute; inset:-20% -10%;
  background-image:
    radial-gradient(closest-side, rgba(96,131,244,.32), transparent 70%),
    radial-gradient(closest-side, rgba(242,84,201,.30), transparent 70%),
    radial-gradient(closest-side, rgba(46,225,244,.22), transparent 70%);
  background-size:55% 90%, 55% 90%, 70% 100%;
  background-repeat:no-repeat;
  background-position:18% 30%, 82% 65%, 50% 50%;
  filter:blur(54px); opacity:.9; pointer-events:none; z-index:0;
  animation:dimFlowGlowDrift 16s ease-in-out infinite;
}
/* Gleiche Zykluslänge wie die Farbverlauf-Animation der ∞-Kurve (main.js) — der Lichteffekt
   driftet sanft mit, ohne exakt an die Kurve gekoppelt zu sein. */
@keyframes dimFlowGlowDrift{
  0%, 100%{ background-position:18% 30%, 82% 65%, 50% 50%; }
  50%{ background-position:28% 20%, 72% 78%, 42% 58%; }
}
@media (prefers-reduced-motion:reduce){
  .dim-flow-glow{ animation:none; }
  .infinity-mount .seg{ opacity:var(--target-opacity, 1); animation:none; }
}
.dim-flow-graphic{ position:relative; z-index:1; width:min(560px, 92%); aspect-ratio:1/0.46; }

.dim-flow-connector{ width:2px; height:56px; margin:0 auto; background:linear-gradient(180deg, var(--g2), var(--accent)); opacity:.6; }

.dim-flow-items{ position:relative; display:flex; flex-wrap:nowrap; align-items:stretch; gap:24px; padding-top:44px; }
.dim-flow-line{
  position:absolute; top:7px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4));
  opacity:.55; border-radius:var(--r-pill);
}
.dim-flow-item{ position:relative; flex:1 1 0; min-width:0; }
.dim-flow-dot{
  position:absolute; top:-44px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--dim-color);
  box-shadow:0 0 0 5px rgba(244,244,246,.06), 0 0 18px 2px var(--dim-color); z-index:1;
  transition:box-shadow .3s ease, width .3s ease, height .3s ease;
}
.dim-flow-item:hover .dim-flow-dot{
  width:17px; height:17px;
  box-shadow:0 0 0 7px rgba(244,244,246,.1), 0 0 34px 8px var(--dim-color);
}
.dim-flow-card{
  height:100%; background:rgba(255,255,255,.032); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md); padding:30px 22px 26px; display:flex; flex-direction:column; gap:14px;
  box-sizing:border-box; transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.dim-flow-card:hover{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.2); transform:translateY(-3px); }
.dim-flow-num{
  display:flex; align-items:center; gap:9px; font-family:var(--ff-head); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
}
.dim-flow-num::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--dim-color); flex:none; }
.dim-flow-card h3{ font-family:var(--ff-head); font-weight:700; font-size:19px; line-height:1.25; color:var(--chalk); margin:0; }
.dim-flow-card p{ font-family:var(--ff-body); font-size:14.5px; line-height:1.6; color:var(--mist); margin:0; }
.dim-flow-examples{ list-style:none; margin:6px 0 0; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px; }
.dim-flow-examples li{ position:relative; padding-left:14px; font-family:var(--ff-body); font-size:13px; line-height:1.45; color:var(--mist); opacity:.85; }
.dim-flow-examples li::before{ content:'\2014'; position:absolute; left:0; top:0; color:rgba(255,255,255,.32); }

@media (max-width:900px){
  .dim-flow-graphic{ width:min(320px, 78%); }
  .dim-flow-connector{ height:36px; }
  .dim-flow-items{ flex-direction:column; flex-wrap:nowrap; gap:36px; padding-top:0; padding-left:26px; }
  .dim-flow-line{ top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--g1), var(--g2), var(--g3), var(--g4)); }
  .dim-flow-item{ padding:0; }
  .dim-flow-dot{ top:4px; left:-26px; transform:none; }
  .dim-flow-card{ padding:24px 20px 22px; }
}

/* ───── "Ein Vertragspartner" Statement — eigene helle Section direkt nach den 4 Karten.
   Bewusst NICHT zentriert wie der Sektions-Kopf der vorherigen dunklen Section: ein
   asymmetrischer Split (Statement links, Fakten rechts) statt eines zweiten, optisch fast
   identischen Blocks. Spannt wie .split23 die volle .wrap-Breite statt einer eigenen,
   schmaleren max-width — "klassisches" Box-Layout wie beim Rest der Seite. ───── */
.partner-statement-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}
.partner-statement{
  font-family:var(--ff-head); font-weight:700; color:var(--navy);
  font-size:clamp(28px,3.4vw,40px); line-height:1.15;
  margin:0 0 16px;
}
.partner-statement em{
  font-style:normal; color:var(--accent); /* fallback for browsers without background-clip:text support */
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .partner-statement em{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.partner-statement-sub{ color:var(--ink-soft); font-size:16.5px; line-height:1.6; max-width:46ch; margin:0; }
.partner-facts{ display:flex; flex-direction:column; gap:22px; }
.partner-fact{ padding-left:20px; border-left:2px solid var(--hairline); }
.partner-fact h3{ color:var(--navy); font-size:16px; margin:0 0 5px; }
.partner-fact p{ color:var(--ink-soft); font-size:14px; line-height:1.55; margin:0; }

@media (max-width:900px){
  .partner-statement-grid{ grid-template-columns:1fr; gap:32px; }
}

/* ───── Partner-card grid ("Ihr Partner für Robotik") — lives inside .dark-sec ───── */
.partner-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.partner-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg);
  padding:30px 28px;
}
.partner-card .ic{
  width:44px; height:44px; border-radius:50%; background:rgba(124,21,250,.18); border:1px solid rgba(124,21,250,.35);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.partner-card .ic svg{ width:20px; height:20px; stroke:#c9a3ff; }
.partner-card h3{ color:#fff; font-size:17px; margin-bottom:10px; }
.partner-card p{ color:var(--mist); font-size:14.5px; margin:0; }
@media (max-width:700px){ .partner-card-grid{ grid-template-columns:1fr; } }

/* ───────────────────────── PROCESS ─────────────────────── */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process.steps-5{ grid-template-columns:repeat(5,1fr); }
.process::before{
  content:''; position:absolute; top:27px; left:6%; right:6%; height:1px; background:var(--hairline); z-index:0;
}
.p-step{ position:relative; z-index:1; padding-right:24px; }
.p-step .num{
  width:54px; height:54px; border-radius:50%; background:var(--paper); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; font-size:16px;
  color:var(--accent); margin-bottom:22px; box-shadow:var(--shadow-card);
}
.p-step h3{ font-size:16.5px; margin-bottom:8px; }
.p-step p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:900px){
  .process, .process.steps-5{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .process::before{ display:none; }
}
@media (max-width:560px){ .process, .process.steps-5{ grid-template-columns:1fr; } }

/* ───── Herausforderungen: diagonaler Split (aktuell verwendet) ─────
   Dunkles Panel mit schräg geschnittener Kante geht nahtlos in die helle
   Problem/Antwort-Liste über — ein gemeinsamer weißer Hintergrund hinter
   beiden liegt hinter dem clip-path, damit die Schräge lückenlos ins Weiß
   übergeht (nicht in die Canvas-Seitenfarbe). */
.challenge-diagonal{
  display:grid; grid-template-columns:1.2fr 1.2fr; gap:0; align-items:stretch;
  background:var(--paper); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.challenge-diagonal-panel{
  background:var(--navy); color:#fff; padding:48px 40px; display:flex; flex-direction:column; justify-content:center;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.challenge-diagonal-panel .eyebrow{ color:#9fb4ff; }
.challenge-diagonal-panel h2{ color:#fff; font-size:clamp(24px,2.6vw,32px); line-height:1.2; margin:12px 0 14px; }
.challenge-diagonal-panel p{ color:var(--mist); font-size:14.5px; line-height:1.6; margin:0; max-width:34ch; }
.challenge-diagonal-list{ padding:40px 40px 40px 56px; display:flex; flex-direction:column; justify-content:center; }
.challenge-diagonal-item{ padding:18px 0; border-bottom:1px solid var(--hairline); }
.challenge-diagonal-item:first-child{ padding-top:0; }
.challenge-diagonal-item:last-child{ border-bottom:none; padding-bottom:0; }
.challenge-diagonal-item h3{ font-size:15.5px; margin-bottom:6px; }
.challenge-diagonal-item p.problem{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.challenge-diagonal-item p.answer{ font-size:13.5px; color:var(--navy); line-height:1.5; margin-top:4px; }
.challenge-diagonal-item p.answer b{ color:var(--accent); }
@media (max-width:900px){
  .challenge-diagonal{ grid-template-columns:1fr; }
  .challenge-diagonal-panel{ clip-path:none; }
  .challenge-diagonal-list{ padding:32px 28px; }
}

/* ───── Anwendungsbereiche teaser (Landing): Text-Spalte + gestaffeltes Kachel-Raster ───── */
.split23{ display:grid; grid-template-columns:1fr 1.85fr; gap:56px; align-items:stretch; }
.split23 > .warp{ min-width:0; }
.split23 .head-cell{ padding-top:6px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.split23 .head-cell h2{ font-size:clamp(26px,3vw,34px); line-height:1.15; margin:14px 0 14px; }
.split23 .head-cell p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; }
.split23 .head-cell .btn{ margin-top:26px; }
.split23 .stat-row{ display:flex; gap:32px; margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline); }
.split23 .stat-row .stat b{ display:block; font-family:var(--ff-head); font-weight:700; font-size:30px; color:var(--navy); line-height:1.1; margin-bottom:6px; overflow-wrap:break-word; }
.split23 .stat-row .stat span{ font-size:12.5px; color:var(--ink-mute); }
.split23 .head-cell .logo-cluster{ margin-top:auto; padding-top:26px; align-self:stretch; min-width:0; }
.split23 .head-cell .logo-cluster-label{
  display:block; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; margin-bottom:16px;
}
/* Alle Partner als Pillen, "und weitere" als letztes Element. Fester, einheitlicher Abstand
   ueber flex+gap statt text-align:justify (das haette die Luecken pro Zeile unterschiedlich
   gestreckt, um jede Zeile randbuendig zu fuellen — auf Wunsch verworfen zugunsten
   gleichmaessiger Abstaende, auch wenn die letzte Zeile dadurch nicht mehr randbuendig ist). */
.split23 .head-cell .logo-cluster-row{ display:flex; flex-wrap:wrap; gap:8px; }
.split23 .head-cell .logo-chip{
  padding:8px 14px;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-weight:700; font-size:12px; color:var(--ink-soft);
  transition:color .2s ease, border-color .2s ease;
}
.split23 .head-cell .logo-chip:hover{ color:var(--navy); border-color:color-mix(in srgb, var(--accent) 35%, var(--hairline)); }
.split23 .head-cell .logo-chip.more{ color:var(--ink-mute); background:none; border-style:dashed; }

.tile-grid-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tile-grid-inner .tile{
  display:flex; flex-direction:column; height:100%; box-sizing:border-box;
  --acc:var(--accent); border-radius:var(--r-md); overflow:hidden; background:var(--paper);
  border:1px solid var(--hairline); box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease;
}
.tile-grid-inner .tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.tile-grid-inner .tile .ph{ aspect-ratio:4/3; overflow:hidden; flex:none; }
.tile-grid-inner .tile .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile-grid-inner .tile:hover .ph img{ transform:scale(1.06); }
.tile-grid-inner .tile .cap{ padding:14px 14px 16px; border-top:3px solid var(--acc); flex:1; }
.tile-grid-inner .tile .cap strong{ display:block; font-family:var(--ff-head); font-weight:700; font-size:16px; color:var(--acc); margin-bottom:6px; }
.tile-grid-inner .tile .cap span.desc{ display:block; font-size:12px; color:var(--ink-soft); line-height:1.5; }
.tile-grid-inner .tile.c-logistik{ --acc:var(--acc-logistik); }
.tile-grid-inner .tile.c-reinigung{ --acc:var(--acc-reinigung); }
.tile-grid-inner .tile.c-service{ --acc:var(--acc-service); }
.tile-grid-inner .tile.c-assistenz{ --acc:var(--acc-assistenz); }
.tile-grid-inner .tile.c-outdoor{ --acc:var(--acc-outdoor); }
/* Kategoriefarben sind als Akzentbalken kräftig genug, für die Überschrift selbst aber teils zu kontrastarm auf Weiß —
   hier abgedunkelte, gleiche Farbfamilie für lesbaren Text (WCAG AA), Akzentbalken bleibt in der Originalfarbe. */
.tile-grid-inner .tile.c-logistik .cap strong{ color:#c81fa0; }
.tile-grid-inner .tile.c-reinigung .cap strong{ color:#0a7684; }
.tile-grid-inner .tile.c-assistenz .cap strong{ color:#3355d9; }
.tile-grid-inner .tile.c-outdoor .cap strong{ color:#9c630a; }
.tile-grid-inner .tile.cta-tile{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  background:var(--chalk); border:1px dashed var(--hairline); box-shadow:none; padding:20px;
}
.tile-grid-inner .tile.cta-tile:hover{ border-color:var(--accent); background:var(--paper); transform:translateY(-4px); }
.tile-grid-inner .tile.cta-tile .ic{
  width:36px; height:36px; border-radius:50%; background:rgba(124,21,250,.1); border:1px solid rgba(124,21,250,.2);
  display:flex; align-items:center; justify-content:center;
}
.tile-grid-inner .tile.cta-tile .ic svg{ width:16px; height:16px; stroke:var(--accent); }
.tile-grid-inner .tile.cta-tile strong{ font-family:var(--ff-head); font-weight:700; font-size:14.5px; color:var(--navy); line-height:1.4; }
@media (max-width:1100px){ .split23{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:640px){ .tile-grid-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .tile-grid-inner{ grid-template-columns:1fr; } }

.area-card-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.area-card{
  --acc: var(--accent);
  position:relative; display:flex; flex-direction:column; grid-column:span 2;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .2s ease;
}
.area-card.area-card--lg{ grid-column:span 3; }
a.area-card{ cursor:pointer; }
a.area-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); border-color:var(--acc); }

.area-card.c-logistik{  --acc:var(--acc-logistik); }
.area-card.c-reinigung{ --acc:var(--acc-reinigung); }
.area-card.c-service{   --acc:var(--acc-service); }
.area-card.c-assistenz{ --acc:var(--acc-assistenz); }
.area-card.c-outdoor{   --acc:var(--acc-outdoor); }

.area-card .thumb{ position:relative; overflow:hidden; background:var(--mist); }
.area-card.area-card--lg .thumb{ aspect-ratio:21/9; }
.area-card:not(.area-card--lg) .thumb{ aspect-ratio:16/10; }
.area-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
a.area-card:hover .thumb img{ transform:scale(1.04); }

/* Eckband auf Karten fuer Artikel, die zuerst extern (Fachzeitschrift/Gesundheitsportal)
   veroeffentlicht wurden. In .thumb platzieren (braucht dessen position:relative). */
.thumb-ribbon{
  position:absolute; top:14px; right:-6px; z-index:1;
  font-family:var(--ff-head); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--navy);
  padding:5px 16px 5px 14px; border-radius:var(--r-pill) 0 0 var(--r-pill);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
}

.ab-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-body); font-size:11px; font-weight:700;
  background:var(--paper); color:var(--acc);
  border:1px solid var(--acc); border-radius:var(--r-pill);
  padding:4px 11px 4px 9px;
}
.ab-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--acc); flex:none; }

.area-card .body{ display:flex; flex-direction:column; gap:6px; padding:18px 18px 18px; flex:1; }
.area-card h3{ font-family:var(--ff-head); font-weight:700; color:var(--acc); font-size:1.15rem; margin:0; }
.area-card.area-card--lg h3{ font-size:1.4rem; }
.area-card p{ font-family:var(--ff-body); font-size:13.5px; line-height:1.48; color:var(--ink-soft); margin:0; }

.ab-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:2px;
  font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--acc);
}
.ab-cta svg{ width:15px; height:15px; transition:transform .25s ease; }
a.area-card:hover .ab-cta svg{ transform:translateX(4px); }

.ab-cat-note{
  display:inline-flex; align-items:center; gap:6px; margin-top:2px; width:fit-content;
  font-family:var(--ff-body); font-size:11.5px; font-style:italic; color:var(--ink-mute);
  border:1px dashed var(--hairline); border-radius:var(--r-pill); padding:4px 11px;
}

@media (max-width:900px){
  .area-card-grid{ grid-template-columns:repeat(2,1fr); }
  .area-card, .area-card.area-card--lg{ grid-column:span 1; }
}
@media (max-width:640px){
  .area-card-grid{ grid-template-columns:1fr; gap:14px; }
  .area-card.area-card--lg .thumb, .area-card:not(.area-card--lg) .thumb{ aspect-ratio:16/9; }
}

/* ───── News: Artikel-Teaser-Karten (nutzen .area-card-Optik) + Artikel-Detailseiten ───── */
/* Dreier-Grid: .area-card setzt global grid-column:span 2 (fuer das andere, 6-spaltige
   .area-card-grid auf anwendungsbereiche.html) — hier innerhalb .news-grid auf span 1
   zurueckgesetzt, damit eine normale Karte genau 1 von 3 Zellen belegt und eine
   Fokus-Karte (.area-card--lg) genau 2 Zellen (nur horizontal). Eine Reihe mit einer
   Fokus- und einer normalen Karte ist dadurch genauso breit wie eine Reihe mit drei
   normalen Karten (2 + 1 = 3 Zellen). */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:20px; margin-top:12px; }
.news-grid .area-card{ grid-column:span 1; }
.news-grid .area-card--lg{ grid-column:span 2; }
.news-grid.news-grid--2{ grid-template-columns:repeat(2,1fr); }
/* Bildhoehe der Fokus-Karte bleibt identisch zur normalen Karte (16/10) — bei doppelter
   Breite entspricht das einem Seitenverhaeltnis von rund 32/10, statt der global fuer
   .area-card--lg definierten 21/9 (dort fuer eine andere Spaltenbreite gedacht). */
.news-grid .area-card--lg .thumb{ aspect-ratio:33/10; }
/* Fokus-Karte staerker abheben: farbiger Rahmen + Farbschatten statt nur Groesse/Badge —
   .is-placeholder ueberschreibt Rahmen/Schatten sonst auf gestrichelt/keinen Schatten,
   daher hier mit gleicher Spezifitaet (3 Klassen) gezielt zurueckgesetzt. */
.news-grid .area-card--lg{
  border-color:var(--accent);
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.news-grid .area-card--lg.is-placeholder{
  border-style:solid;
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.news-meta{ display:flex; align-items:center; gap:8px; }
.news-tag{
  display:inline-flex; align-items:center; width:max-content; flex:none;
  font-family:var(--ff-head); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--paper));
  padding:4px 10px; border-radius:var(--r-pill);
}
.news-date{ font-family:var(--ff-body); font-size:12px; color:var(--ink-mute); }
@media (max-width:900px){
  .news-grid{ grid-template-columns:repeat(2,1fr); }
  .news-grid .area-card{ grid-column:span 1; }
}
@media (max-width:640px){ .news-grid, .news-grid.news-grid--2{ grid-template-columns:1fr; } }

.article-head{ padding-top:150px; }
@media (max-width:900px){ .article-head{ padding-top:120px; } }
.article-crumb{ font-family:var(--ff-body); font-size:13px; color:var(--ink-mute); margin-bottom:20px; }
.article-crumb a{ color:var(--ink-mute); text-decoration:underline; }
.article-crumb a:hover{ color:var(--navy); }
.article-meta-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 0;
  font-family:var(--ff-body); font-size:13px; color:var(--ink-mute);
}
.article-meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-mute); }
.article-h1{ font-size:clamp(28px,4vw,42px); line-height:1.15; margin:14px 0 0; max-width:820px; }
.article-hero-img{ border-radius:var(--r-lg); overflow:hidden; margin:32px 0 0; box-shadow:var(--shadow-card); }
.article-hero-img img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }

/* Hinweis-Banner fuer Artikel, die zuerst extern (Fachzeitschrift/Gesundheitsportal)
   veroeffentlicht wurden. Direkt nach .article-hero-img platzieren. */
.article-source-note{
  display:flex; align-items:flex-start; gap:14px;
  max-width:720px; margin:20px auto 0; padding:16px 22px;
  background:color-mix(in srgb, var(--accent) 6%, var(--paper));
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--hairline));
  border-radius:var(--r-md);
}
.article-source-note .ic{ flex:none; color:var(--accent); margin-top:1px; }
.article-source-note .ic svg{ width:18px; height:18px; }
.article-source-note p{ margin:0; font-family:var(--ff-body); font-size:14px; line-height:1.6; color:var(--ink-soft); }
.article-source-note a{ color:var(--accent); font-weight:600; text-decoration:underline; }

.article-body{ max-width:720px; margin:40px auto 0; }
.article-body p{ font-family:var(--ff-body); font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0 0 20px; }
.article-body h2{ font-size:24px; margin:36px 0 14px; color:var(--navy); }
.article-body a{ color:var(--navy); text-decoration:underline; }
.article-body a:hover{ color:var(--accent); }
.article-cta-box{
  max-width:720px; margin:40px auto 0; padding:28px 30px;
  background:var(--chalk); border:1px solid var(--hairline); border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.article-cta-box p{ margin:0; font-family:var(--ff-head); font-weight:700; font-size:16px; color:var(--navy); max-width:420px; }
.related-sec{ border-top:1px solid var(--hairline); }

/* ───── Artikel-Module ("Visuell auflockern") — Ergebnis der Blog-Modul-Auswahl,
   siehe archivierte Vergleichsseite _archive/vergleich/vergleich-blog-module-visuell.html.
   Jedes Modul wird per Klasse manuell in .article-body platziert; auf einer spaeteren
   WordPress/Bricks-Umsetzung entspraeche das den Feldern eines wiederverwendbaren Elements. ───── */

/* Modul 1 – Bild mit Bildunterschrift: Basis = vollbreit (Variante 1). Zusaetzlich
   .article-img--float fuer das rechts/links gefloatete Bild mit Textumfluss (Variante 2),
   Richtung ueber .dir-left umschaltbar. */
.article-img{ margin:32px 0; }
.article-img img{ display:block; width:100%; height:auto; border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.article-img figcaption{ margin-top:10px; font-size:13px; font-style:italic; color:var(--ink-mute); line-height:1.5; }
.article-img.article-img--float{
  float:right; width:45%; margin:0 0 20px 28px;
}
.article-img.article-img--float.dir-left{ float:left; margin:0 28px 20px 0; }
.article-img.article-img--float img{ border-radius:var(--r-md); }
.article-img.article-img--float figcaption{
  font-style:normal; border-top:1px solid var(--hairline); padding-top:8px; margin-top:8px;
}
.article-body::after{ content:""; display:table; clear:both; }
@media (max-width:640px){
  .article-img.article-img--float{ float:none; width:100%; margin:24px 0; }
}

/* Modul 1b – Bildergalerie/Slider (Variante 6: Carousel mit Pfeilen + Dots), als Alternative
   zu .article-img, wenn mehrere Bilder statt eines einzelnen gezeigt werden sollen. */
.article-gallery{ margin:32px 0; }
.article-gallery .stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--chalk); border:1px solid var(--hairline); box-shadow:var(--shadow-card);
}
.article-gallery .slide{ display:none; margin:0; }
.article-gallery .slide.is-active{ display:block; }
.article-gallery .slide img{ display:block; width:100%; height:auto; object-fit:cover; }
.article-gallery .slide figcaption{ padding:12px 16px 16px; font-size:14px; line-height:1.5; color:var(--ink-soft); background:var(--paper); }
.article-gallery .arrow{
  position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
  width:44px; border:none; background:transparent; color:#fff; cursor:pointer; padding:0;
}
.article-gallery .arrow svg{ width:24px; height:24px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.article-gallery .arrow.prev{ left:0; }
.article-gallery .arrow.next{ right:0; }
.article-gallery .arrow:hover{ background:rgba(37,38,58,.18); }
.article-gallery .arrow:focus-visible{ background:rgba(37,38,58,.18); outline:2px solid #fff; outline-offset:-4px; }
.article-gallery .dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.article-gallery .dot{
  width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--hairline);
  background:var(--mist); cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.article-gallery .dot.is-active{ background:var(--accent); border-color:var(--accent); transform:scale(1.2); }

/* Modul 3 – Pull-Quote (Variante 1: zentriertes Magazin-Zitat). */
.article-pull-quote{ margin:44px auto; max-width:60ch; text-align:center; }
.article-pull-quote .icon{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; color:var(--accent); margin-bottom:6px; }
.article-pull-quote .icon svg{ width:100%; height:100%; }
.article-pull-quote blockquote{ margin:0; font-family:var(--ff-head); font-weight:700; font-size:clamp(22px,2.8vw,28px); line-height:1.4; color:var(--navy); }
.article-pull-quote .rule{ display:block; width:48px; height:3px; margin:16px auto 0; background:var(--accent); border-radius:var(--r-pill); }

/* Modul 4 – Statistik-Callout: Basis = ohne Text (Variante 1, nur Zahl + Label).
   .article-stat--banner fuer die Variante mit erklaerendem Text (Variante 3). */
.article-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:36px auto; }
.article-stat .num{ font-family:var(--ff-head); font-weight:700; color:var(--navy); font-size:clamp(2.4rem,3vw + 1.6rem,3.6rem); line-height:1; letter-spacing:-.02em; }
.article-stat .label{ font-family:var(--ff-head); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); max-width:34ch; line-height:1.5; }
.article-stat.article-stat--banner{
  flex-direction:column; width:100%; box-sizing:border-box;
  background:color-mix(in srgb, var(--accent) 8%, var(--paper)); border-radius:var(--r-lg);
  padding:32px 34px; gap:12px;
}
.article-stat.article-stat--banner .num{ color:var(--accent); font-size:clamp(2.6rem,3.6vw + 1.6rem,4rem); }
.article-stat.article-stat--banner .text{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:58ch; margin:0; }
@media (min-width:700px){
  .article-stat.article-stat--banner{ flex-direction:row; text-align:left; gap:28px; }
  .article-stat.article-stat--banner .text{ text-align:left; }
}

/* ───── Artikel-Module ("Struktur & Lesbarkeit") — Ergebnis der zweiten Blog-Modul-Auswahl,
   siehe archivierte Vergleichsseite _archive/vergleich/vergleich-blog-module-struktur.html. ───── */

/* Modul 5 – Inhaltsverzeichnis: aufklappbares Akkordeon (Variante 25). */
.article-toc{ margin:0 0 36px; border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-card); overflow:hidden; }
.article-toc.is-open{ box-shadow:var(--shadow-card-hover); }
.article-toc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--navy); user-select:none; }
.article-toc summary::-webkit-details-marker{ display:none; }
.article-toc summary::marker{ content:""; }
.article-toc .toc-label{ display:flex; align-items:center; gap:10px; }
.article-toc .toc-label svg{ width:18px; height:18px; color:var(--accent); flex:none; }
.article-toc .toc-chevron{ width:18px; height:18px; color:var(--ink-mute); flex:none; transition:transform .2s ease, color .2s ease; }
/* .is-open statt [open]: das Attribut kippt beim Zuklappen laut main.js erst NACH der
   Animation, eine an [open] gekoppelte Regel wuerde Chevron/Rahmen sonst sichtbar
   verzoegert erst nach dem Zufahren zuruecksetzen. */
.article-toc.is-open summary .toc-chevron{ transform:rotate(180deg); color:var(--accent); }
.article-toc ol{ list-style:none; margin:0; padding:2px 22px 22px; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:2px; }
/* Hoehen-/Opacity-Animation beim Auf-/Zuklappen wird von main.js per Web-Animations-API auf
   diesem Element gesteuert (siehe dort) — native <details>-Inhalte lassen sich nicht per reiner
   CSS-transition auf dem Inhalt selbst animieren, da der Browser die Sichtbarkeit intern ueber
   einen eigenen, von aussen nicht per Transition ansprechbaren Mechanismus umschaltet. */
.article-toc a{ display:flex; align-items:center; gap:10px; padding:12px 4px; font-family:var(--ff-body); font-weight:500; font-size:15px; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--hairline); transition:color .15s, padding-left .15s; }
.article-toc li:last-child a{ border-bottom:none; }
.article-toc a::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--hairline); transition:background .15s; }
.article-toc a:hover{ color:var(--accent); padding-left:8px; }
.article-toc a:hover::before{ background:var(--accent); }

/* Modul 6 – Info-/Hinweis-Box: Ausrufer-Banner ueber die volle Textbreite (Variante 30). */
.article-notice{ display:flex; align-items:flex-start; gap:18px; width:calc(100% + 3rem); box-sizing:border-box; margin:34px -1.5rem; padding:22px 28px; background:var(--accent); color:var(--paper); border-radius:var(--r-md); box-shadow:var(--shadow-card); }
.article-notice .icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb, var(--paper) 22%, transparent); color:var(--paper); }
.article-notice .icon svg{ width:22px; height:22px; }
.article-notice .content{ flex:1 1 auto; min-width:0; }
.article-notice .label{ display:block; font-family:var(--ff-head); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin-bottom:6px; }
.article-notice .text{ margin:0; color:var(--paper); font-size:16px; line-height:1.65; }
.article-notice .text a{ color:inherit; text-decoration:underline; }
@media (max-width:640px){ .article-notice{ width:calc(100% + 2rem); margin:28px -1rem; padding:18px 20px; flex-wrap:wrap; } }

/* Modul 7 – Checkliste: schlichte Haekchen-Liste (Variante 19). Ab 6 Eintraegen wechselt sie
   automatisch ins zweispaltige Grid (Variante 20) — kuenftig als Bricks-Feld "Spaltenzahl"
   waehlbar; .article-checklist--grid erzwingt das Grid unabhaengig von der Eintragszahl. */
.article-checklist{ list-style:none; margin:28px 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.article-checklist li{ position:relative; padding-left:34px; font-family:var(--ff-body); color:var(--ink-soft); line-height:1.6; font-size:15.5px; }
.article-checklist li svg{ position:absolute; left:0; top:2px; width:21px; height:21px; color:var(--accent); }
.article-checklist:has(li:nth-child(6)),
.article-checklist.article-checklist--grid{ display:grid; grid-template-columns:1fr; gap:14px 32px; }
@media (min-width:700px){
  .article-checklist:has(li:nth-child(6)),
  .article-checklist.article-checklist--grid{ grid-template-columns:1fr 1fr; }
}

/* Modul 8 – Schritt-fuer-Schritt-Prozess: vertikale Timeline (Variante 2 / e23) als Standard.
   .article-steps--horizontal fuer die alternative Reihen-Anordnung mit groesseren Icon-Kreisen
   (Variante 35) — kuenftig als Bricks-Feld "Ausrichtung" waehlbar. Der Marker (.step-marker)
   zeigt je nach Inhalt entweder eine Nummer oder ein Icon-SVG. */
.article-steps{ list-style:none; margin:36px 0; padding:0; max-width:680px; }
.article-steps .step{ position:relative; display:flex; gap:20px; padding-bottom:32px; }
.article-steps .step:last-child{ padding-bottom:0; }
.article-steps .step::before{ content:""; position:absolute; top:40px; left:18px; width:2px; bottom:-8px; background:var(--hairline); }
.article-steps .step:last-child::before{ display:none; }
.article-steps .step-marker{ flex:0 0 auto; position:relative; z-index:1; width:37px; height:37px; border-radius:var(--r-pill); background:var(--accent); color:var(--paper); font-family:var(--ff-head); font-weight:700; font-size:16.5px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--paper); }
.article-steps .step-marker svg{ width:18px; height:18px; }
.article-steps .step-body{ padding-top:5px; }
.article-steps .step-title{ font-family:var(--ff-head); font-weight:700; color:var(--ink); font-size:16px; margin:0 0 6px; }
.article-steps .step-text{ font-family:var(--ff-body); color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0; }
.article-steps--horizontal{ max-width:none; display:flex; flex-wrap:wrap; justify-content:center; gap:24px 8px; }
.article-steps--horizontal .step{ flex:1 1 180px; max-width:210px; flex-direction:column; align-items:center; text-align:center; padding:16px 0 0; gap:0; }
.article-steps--horizontal .step::before{ top:calc(16px + 33px); left:calc(-50% + 33px); width:calc(100% - 66px); height:2px; }
.article-steps--horizontal .step:first-child::before{ display:none; }
.article-steps--horizontal .step-marker{ width:66px; height:66px; margin:0 auto 16px; font-size:20px; box-shadow:none; }
.article-steps--horizontal .step-marker svg{ width:28px; height:28px; }
.article-steps--horizontal .step-body{ padding-top:0; }
@media (max-width:780px){
  .article-steps--horizontal{ flex-direction:column; align-items:center; }
  .article-steps--horizontal .step{ max-width:320px; }
  .article-steps--horizontal .step::before{ display:none; }
}

/* ───── Artikel-Module ("Trust & Tiefe") — Ergebnis der dritten Blog-Modul-Auswahl,
   siehe archivierte Vergleichsseite _archive/vergleich/vergleich-blog-module-trust.html. ───── */

/* Modul 9 – FAQ-Akkordeon im Artikel: klassisches Akkordeon (Variante 37). */
.article-faq{ display:block; margin:0; font-family:var(--ff-body); color:var(--ink); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.article-faq + .article-faq{ border-top:none; }
.article-faq:last-of-type{ margin-bottom:20px; }
.article-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 4px; font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:var(--ink); transition:color .2s ease; }
.article-faq summary::-webkit-details-marker{ display:none; }
.article-faq summary::marker{ content:''; }
.article-faq summary:hover{ color:var(--accent); }
.article-faq .faq-q{ flex:1; }
.article-faq .faq-icon{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--accent) 12%, var(--paper)); color:var(--accent); transition:transform .25s ease, background .25s ease; }
.article-faq .faq-icon svg{ width:16px; height:16px; }
/* .is-open statt [open], siehe Kommentar bei .article-toc.is-open oben. */
.article-faq.is-open .faq-icon{ transform:rotate(180deg); background:color-mix(in srgb, var(--accent) 20%, var(--paper)); }
.article-faq.is-open summary{ color:var(--navy); }
.article-faq .faq-a{ padding:0 4px 18px; overflow:hidden; }
/* Hoehen-/Opacity-Animation beim Auf-/Zuklappen wird von main.js per Web-Animations-API auf
   diesem Element gesteuert (siehe dort) — Begruendung siehe Kommentar bei .article-toc ol. */
.article-faq .faq-a p{ margin:0; font-size:16px; line-height:1.65; color:var(--ink-soft); }

/* Modul 10 – Vergleichstabelle: klassische Tabelle mit Zeilen-Icons (Variante 40). */
.article-compare{ margin:32px 0; overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); background:var(--paper); }
.article-compare table{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; font-family:var(--ff-body); }
.article-compare thead th{ font-family:var(--ff-head); text-align:left; padding:14px 18px; background:var(--chalk); color:var(--navy); border-bottom:1px solid var(--hairline); white-space:nowrap; }
.article-compare .crit-col{ width:26%; }
.article-compare tbody th{ text-align:left; font-weight:600; padding:14px 18px; color:var(--ink); border-bottom:1px solid var(--hairline); vertical-align:top; background:var(--paper); }
.article-compare tbody td{ padding:14px 18px; border-bottom:1px solid var(--hairline); color:var(--ink-soft); vertical-align:top; }
.article-compare tbody tr:last-child th, .article-compare tbody tr:last-child td{ border-bottom:none; }
.article-compare .cmp-cell{ display:flex; align-items:flex-start; gap:9px; }
.article-compare .cmp-icon{ flex:none; display:inline-flex; margin-top:2px; }
.article-compare .cmp-icon--good{ color:var(--accent); }
.article-compare .cmp-icon--neutral{ color:var(--ink-mute); }

/* Mobil: Tabelle wird pro Zeile zu einem gestapelten Block, damit auf schmalen Screens nichts
   abgeschnitten wird oder unbemerkt horizontal gescrollt werden muss. Die zweite/dritte Spalte
   braucht dafuer ein data-label-Attribut mit dem Spaltentitel (siehe th[scope=col]-Text). */
@media (max-width:680px){
  .article-compare{ overflow-x:visible; }
  .article-compare table{ min-width:0; }
  .article-compare thead{ display:none; }
  .article-compare tbody tr{ display:block; padding:16px 18px; border-bottom:1px solid var(--hairline); }
  .article-compare tbody tr:last-child{ border-bottom:none; }
  .article-compare tbody th{ display:block; padding:0 0 10px; border-bottom:none; background:none; font-size:15px; }
  .article-compare tbody td{ display:block; padding:8px 0 0; border-bottom:none; }
  .article-compare tbody td:first-of-type{ padding-top:0; }
  .article-compare tbody td::before{ content:attr(data-label); display:block; font-family:var(--ff-head); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px; }
}

/* Modul 11 – Autoren-Box: minimalistische Zeile fuer den Artikelanfang (Variante 45). Zeigt
   immer die Organisation "Redaktion imrox", nie eine erfundene Einzelperson. */
.article-author{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:5px 14px 5px 10px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--accent) 8%, var(--paper)); font-family:var(--ff-body); }
.article-author .icon{ flex:none; display:inline-flex; color:var(--navy); }
.article-author .icon svg{ width:16px; height:16px; }
.article-author .name{ font-size:13px; font-weight:600; color:var(--ink-soft); }

/* Modul 12 – Technische-Daten-Tabelle: Zebra-Streifen-Tabelle (Variante 46). */
.article-techspecs{ margin:32px 0; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.article-techspecs .specs-head{ display:flex; align-items:center; gap:10px; padding:18px 24px; background:color-mix(in srgb, var(--accent) 10%, var(--paper)); border-bottom:1px solid var(--hairline); }
.article-techspecs .specs-head .icon{ display:inline-flex; width:24px; height:24px; color:var(--accent); flex:none; }
.article-techspecs .specs-head .icon svg{ width:100%; height:100%; }
.article-techspecs .specs-head h4{ font-family:var(--ff-head); font-size:17px; font-weight:700; color:var(--navy); margin:0; }
.article-techspecs table{ width:100%; border-collapse:collapse; font-size:15px; font-family:var(--ff-body); }
.article-techspecs tr:nth-child(odd){ background:var(--paper); }
.article-techspecs tr:nth-child(even){ background:var(--chalk); }
.article-techspecs th, .article-techspecs td{ padding:13px 22px; text-align:left; vertical-align:middle; }
.article-techspecs th{ font-family:var(--ff-head); font-weight:600; color:var(--ink-soft); width:45%; }
.article-techspecs td.spec-real{ font-weight:700; color:var(--navy); }
.article-techspecs td.spec-tbd{ display:flex; align-items:center; gap:6px; font-style:italic; color:var(--ink-mute); }
.article-techspecs .tbd-icon{ width:15px; height:15px; flex:none; opacity:.7; }
@media (max-width:480px){
  .article-techspecs th, .article-techspecs td{ padding:10px 16px; font-size:13.5px; }
}

/* Modul 13 – Inline-CTA-Box: Layout von Variante 49 (Kicker + Headline links, Button rechts)
   kombiniert mit den Farben von Variante 51 (voller Akzent-Gradient-Hintergrund, weisser Text).
   Kind-Selektoren sind zweifach geklammert (.article-cta-inline .cta-*), damit sie die globalen
   .article-body p/a-Regeln zuverlaessig ueberstimmen — sonst gewinnt z.B.
   ".article-body a{text-decoration:underline}" per Spezifitaet. */
.article-cta-inline{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 24px; margin:28px 0; padding:26px 32px; border-radius:var(--r-lg); background:linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.article-cta-inline .cta-text{ flex:1 1 320px; min-width:0; }
.article-cta-inline .cta-kicker{ font-family:var(--ff-head); font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.75); margin:0 0 6px; }
.article-cta-inline .cta-headline{ font-family:var(--ff-head); font-weight:700; font-size:20px; line-height:1.4; color:#fff; margin:0; letter-spacing:-.01em; }
.article-cta-inline .cta-btn{ flex:none; display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-head); font-weight:700; font-size:14.5px; color:var(--navy); background:#fff; padding:14px 26px; border-radius:var(--r-pill); text-decoration:none; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.25); transition:transform .25s ease, box-shadow .25s ease; }
.article-cta-inline .cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,0,0,.3); }
.article-cta-inline .cta-btn svg{ flex:none; }
@media (max-width:560px){
  .article-cta-inline{ padding:22px; }
  .article-cta-inline .cta-btn{ width:100%; justify-content:center; }
}

/* Modul 14 – Produkt-Karte: horizontale Karte mit Bild-Platzhalter (Variante 52). Nutzt das
   etablierte "Produktfoto folgt"-Platzhaltermuster (siehe .prod-visual-placeholder), solange
   kein echtes Foto vorliegt. */
.article-product-card{ display:flex; align-items:stretch; gap:0; margin:32px 0; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.article-product-card .apc-media{ flex:0 0 38%; max-width:230px; }
.article-product-card .apc-placeholder{ height:100%; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--chalk); color:var(--ink-mute); }
.article-product-card .apc-placeholder svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.article-product-card .apc-placeholder span{ font-family:var(--ff-body); font-size:11px; font-weight:500; }
.article-product-card .apc-body{ flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:24px 28px; min-width:0; }
.article-product-card .apc-kicker{ font-family:var(--ff-head); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.article-product-card .apc-name{ font-family:var(--ff-head); font-size:24px; font-weight:700; color:var(--navy); margin:0; }
.article-product-card .apc-specs{ font-size:14.5px; color:var(--ink-soft); margin:0 0 10px; }
.article-product-card .apc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ff-head); font-weight:700; font-size:13.5px; padding:12px 22px; border-radius:var(--r-pill); background:var(--accent); color:#fff; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.article-product-card .apc-btn:hover, .article-product-card .apc-btn:focus-visible{ color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width:560px){
  .article-product-card{ flex-direction:column; }
  .article-product-card .apc-media{ flex:none; max-width:none; }
  .article-product-card .apc-placeholder{ min-height:140px; }
  .article-product-card .apc-body{ padding:20px 22px; align-items:flex-start; }
}

/* Modul 15 – Video-Einbettung: getoenter Hintergrund mit grossem Play-Button (Variante 57).
   Ehrlicher Platzhalter, solange kein echtes Video vorliegt — keine erfundene Laenge/Titel. */
.article-video{ aspect-ratio:16/9; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; margin:32px 0; border-radius:var(--r-lg); background:linear-gradient(160deg, color-mix(in srgb, var(--navy) 88%, black) 0%, color-mix(in srgb, var(--navy) 60%, black) 100%); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.article-video .av-play{ width:88px; height:88px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.55); }
.article-video .av-play svg{ width:32px; height:32px; fill:#fff; margin-left:4px; }
.article-video .av-label{ font-family:var(--ff-body); font-size:14px; font-weight:600; color:#fff; }
.article-video .av-meta{ font-family:var(--ff-body); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.65); }

/* Ehrliche Platzhalter-Karten fuer Beitraege, die noch nicht geschrieben sind — kein Link,
   gestrichelter Rahmen, gleiches Muster wie .product-card.more/"Modell folgt". */
.area-card.is-hidden{ display:none; }
/* Sanftes Aus-/Einblenden beim Filtern statt hartem Sprung; .is-hidden bleibt der
   Endzustand (main.js setzt ihn per Timeout erst nach Ablauf der Transition), .is-hiding
   ist nur der kurze Zwischenschritt. Ergaenzt hier auch die bislang fehlende
   .product-card.is-hidden-Regel (Portfolio-Filter blendete Karten bisher gar nicht aus). */
.area-card.is-hiding, .product-card.is-hiding{ opacity:0; transform:scale(.9); }
.product-card.is-hidden{ display:none; }
@media (prefers-reduced-motion:reduce){ .area-card.is-hiding, .product-card.is-hiding{ transition:none; } }
.area-card.is-placeholder{ border-style:dashed; box-shadow:none; cursor:default; }
.area-card.is-placeholder .body h3{ color:var(--ink-mute); font-weight:500; }
.area-card.is-placeholder .body p{ color:var(--ink-mute); }
.news-thumb-placeholder{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:color-mix(in srgb, var(--chalk) 60%, var(--paper)); color:var(--mist);
}
.news-thumb-placeholder svg{ width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.6; }
.news-thumb-placeholder span{ font-family:var(--ff-body); font-size:11px; font-weight:500; color:var(--ink-mute); }

/* ───── Video embed (poster + lazy iframe swap) ───── */
.video-embed{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:16/10; background:var(--obsidian); }
.video-embed img{ width:100%; height:100%; object-fit:cover; opacity:.75; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed .play-btn{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s ease;
}
.video-embed .play-btn:hover{ transform:scale(1.08); }
.video-embed .play-btn svg{ width:22px; height:22px; fill:var(--navy); margin-left:3px; }

/* ───────────────────────── CTA ─────────────────────────── */
/* ───── CTA mit eingebettetem Formular —
   WICHTIG: Das Formular hat kein eigenes Backend — main.js zeigt bei Submit nur eine
   clientseitige Erfolgsmeldung. Für echten Versand fehlt noch ein Formular-Endpoint
   (z. B. Formspree/Netlify Forms/eigenes Backend). ───── */
.cta-form-sec{
  border-radius:32px; overflow:hidden; position:relative;
  background:var(--navy);
  background-image:
    radial-gradient(700px 400px at 15% 0%, rgba(96,131,244,.35), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(242,84,201,.28), transparent 60%),
    linear-gradient(var(--navy),var(--navy));
  padding:64px;
}
.cta-form-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.cta-form-copy .eyebrow{ color:#9fb4ff; }
.cta-form-copy h2{ color:#fff; font-size:clamp(26px,3vw,36px); line-height:1.18; margin:0 0 16px; }
.cta-form-copy p{ color:var(--mist); font-size:16px; line-height:1.6; margin:0 0 28px; max-width:46ch; }
.cta-form-phone{
  display:inline-flex; align-items:center; gap:10px; color:#fff; font-family:var(--ff-head); font-weight:700; font-size:15px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.14); width:100%;
}
.cta-form-phone svg{ width:18px; height:18px; stroke:#9fb4ff; flex:none; }
.cta-form-phone span{ display:block; font-family:var(--ff-body); font-weight:400; font-size:13px; color:var(--mist); margin-top:2px; }

.cta-form-panel{
  background:#fff; border-radius:var(--r-lg); padding:36px 32px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.cta-form-panel h3{ font-size:17px; margin:0 0 4px; }
.cta-form-panel > p{ color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }
.cta-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cta-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.cta-field label{ font-family:var(--ff-head); font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.cta-field input, .cta-field select{
  font-family:var(--ff-body); font-size:14.5px; color:var(--ink); background:var(--canvas);
  border:1px solid var(--hairline); border-radius:var(--r-sm); padding:12px 14px;
  transition:border-color .2s ease, background .2s ease;
}
.cta-field input:focus, .cta-field select:focus{ outline:none; border-color:var(--accent); background:#fff; }
.cta-field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355566b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px;
}
.cta-consent{ display:flex; gap:10px; align-items:flex-start; margin-bottom:20px; }
.cta-consent input{ margin-top:3px; flex:none; width:15px; height:15px; accent-color:var(--accent); }
.cta-consent label{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.cta-consent a{ color:var(--accent); text-decoration:underline; }
.cta-form-panel .btn{ width:100%; }
.cta-submit-note{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:12px; }
/* display:block statt display:none: eine Transition kann nie aus display:none heraus starten
   (kein sichtbarer Uebergang, harter Sprung) — die Sichtbarkeit vor dem Absenden laeuft daher
   ausschliesslich ueber opacity/pointer-events, nicht ueber display. */
.cta-success{
  display:block; text-align:center; padding:30px 10px;
  position:absolute; inset:0; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cta-success.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
#ctaFormWrap{ transition:opacity .3s ease, transform .3s ease; }
#ctaFormWrap.is-leaving{ opacity:0; transform:translateY(-8px); pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  .cta-success, #ctaFormWrap{ transition:none; }
}
.cta-success .ic{
  width:52px; height:52px; border-radius:50%; background:rgba(124,21,250,.1); border:1px solid rgba(124,21,250,.25);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.cta-success .ic svg{ width:24px; height:24px; stroke:var(--accent); }
.cta-success h3{ font-size:18px; margin-bottom:8px; }
.cta-success p{ color:var(--ink-soft); font-size:14px; margin:0; }

@media (max-width:900px){
  .cta-form-sec{ padding:40px 22px; }
  .cta-form-grid{ grid-template-columns:1fr; gap:36px; }
  .cta-field-row{ grid-template-columns:1fr; gap:0; }
}

/* ───────────────────────── FOOTER ──────────────────────── */
footer{ padding:88px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:56px; border-bottom:1px solid var(--hairline); }
.foot-brand .logo{ margin-bottom:16px; }
.foot-brand p{ color:var(--ink-soft); font-size:13.5px; max-width:280px; }
.foot-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:16px; }
.foot-col ul{ display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:14px; color:var(--ink-soft); }
.foot-col a:hover{ color:var(--navy); }
.foot-bottom{ padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ───────────────────────── MOBILE NAV ──────────────────── */
.burger{ display:none; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:var(--chalk); border:1px solid var(--hairline); flex:none; cursor:pointer; position:relative; }
.burger svg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1;
  transition:opacity .2s ease, transform .2s ease;
}
.burger .i-close{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-45deg); }
.burger.open .i-menu{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(45deg); }
.burger.open .i-close{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
@media (prefers-reduced-motion:reduce){ .burger svg{ transition:none; } }
@media (max-width:980px){ .burger{ display:flex; } }

.mobile-nav{
  max-width:var(--max); margin:10px auto 0; padding:0 14px;
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;
}
.mobile-nav.open{ grid-template-rows:1fr; }
.mobile-nav > div{ overflow:hidden; }
.mobile-nav ul{
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
  border:1px solid rgba(37,38,58,.07); border-radius:var(--r-lg);
  box-shadow:0 8px 30px -14px rgba(37,38,58,.18);
  padding:10px; display:flex; flex-direction:column; gap:2px; margin-top:8px;
}
.mobile-nav a{ padding:13px 16px; border-radius:var(--r-md); font-size:15px; font-weight:600; color:var(--navy); }

/* ── Mobile-Nav-Untermenü "Anwendungsbereiche" (Akkordeon) ── */
.mnav-drop-head{ display:flex; align-items:center; }
.mnav-drop-head a{ flex:1; }
.mnav-drop-toggle{
  width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink-mute); cursor:pointer;
}
.mnav-drop-toggle svg{ width:14px; height:14px; transition:transform .25s ease; }
.mnav-drop.open .mnav-drop-toggle svg{ transform:rotate(180deg); }
.mnav-sublist-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.mnav-drop.open .mnav-sublist-wrap{ grid-template-rows:1fr; }
.mobile-nav .mnav-sublist-wrap ul{ overflow:hidden; list-style:none; margin:0; padding:2px 0 4px 14px; display:flex; flex-direction:column; gap:2px; }
.mobile-nav .mnav-sublist-wrap a{ padding:10px 16px; font-size:14px; font-weight:500; color:var(--ink-soft); }

/* ───────────────────────── PRODUKT-PLATZHALTER (Katalogkarten + Roboter-Detailseiten) ──────────────────────── */
.prod-visual{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/5; border-radius:var(--r-md); background:var(--chalk);
}
.prod-visual-placeholder{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-mute); }
.prod-visual-placeholder svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.prod-visual-placeholder span{ font-family:var(--ff-body); font-size:11px; font-weight:500; }
.prod-logo{
  position:absolute; top:10px; left:10px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:22px; border-radius:5px;
  background:var(--paper); border:1px dashed var(--hairline);
  font-family:var(--ff-head); font-weight:700; font-size:8.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ───────────────────────── ROBOTER-DETAILSEITEN (roboter-<slug>.html) ──────────────────────── */
/* Akzentfarbe folgt der jeweiligen Anwendungsbereich-Kategorie: jede roboter-<slug>.html setzt
   lokal --acc-current auf ihre Kategorie-Akzentfarbe (analog zum bestehenden .lg-eyebrow-Muster
   auf anwendungsbereiche-logistikrobotik.html), damit dieser Block seitenuebergreifend passt. */
:root{ --acc-current: var(--accent); }

.rd-hero{ position:relative; background:var(--paper); padding:200px 0 0; }
.rd-hero *{ box-sizing:border-box; }

.rd-breadcrumb{ margin-bottom:22px; }
.rd-breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0; list-style:none; margin:0; padding:0; }
.rd-breadcrumb li{ display:flex; align-items:center; font-family:var(--ff-body); font-size:13px; color:var(--ink-mute); }
.rd-breadcrumb li:not(:last-child)::after{ content:"/"; margin:0 8px; color:var(--mist); }
.rd-breadcrumb a{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
.rd-breadcrumb a:hover{ color:var(--acc-current); text-decoration:underline; }
.rd-breadcrumb li[aria-current="page"]{ color:var(--navy); font-weight:600; }

.rd-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:48px; align-items:center; }
.rd-hero-content{ max-width:580px; }

.rd-badge-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 20px; }
.rd-cat-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:700; font-size:13px;
  padding:9px 16px 9px 12px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--chalk); color:var(--ink-soft);
}
.rd-cat-badge svg{ width:16px; height:16px; stroke:var(--acc-current); flex:none; }

.rd-highlight-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-head); font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:#fff; background:var(--acc-current); border-radius:var(--r-pill); padding:7px 14px 7px 12px;
}
.rd-highlight-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; flex:none; }

.rd-title{
  font-family:var(--ff-head); font-weight:700; color:var(--navy);
  font-size:clamp(2.2rem,3.6vw + 1rem,3.4rem); line-height:1.08; margin:0 0 16px;
}
.rd-positioning{ font-family:var(--ff-body); font-size:1.05rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:520px; }

.rd-hero-visual-wrap .prod-visual{ margin:0; box-shadow:var(--shadow-card); }
.rd-hero-visual-wrap .prod-visual-placeholder svg{ width:40px; height:40px; }
.rd-hero-visual-wrap .prod-visual-placeholder span{ font-size:12.5px; }

.rd-stat-bar-wrap{ margin-top:56px; padding-bottom:48px; }
.rd-stat-bar-kicker{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--navy);
  margin:0 0 14px 2px;
}
.rd-stat-bar-kicker-dot{ width:8px; height:8px; border-radius:50%; background:var(--acc-current); flex:none; }

.rd-stat-bar{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.rd-stat-tile{ background:var(--paper); padding:26px 28px; display:flex; flex-direction:column; gap:6px; }
.rd-stat-num{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(1.35rem,1.6vw + 1rem,1.85rem);
  color:var(--acc-current); line-height:1.15;
}
.rd-stat-label{ font-family:var(--ff-head); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }

/* Modelle ohne hinterlegte Spec-Zeile: eine einzelne, deutlich unauffaellige Kachel mit
   "Technische Daten auf Anfrage" statt erfundener Werte oder leerem Platzhalter-Blindtext. */
.rd-stat-bar--fallback{ grid-template-columns:1fr; box-shadow:none; }
.rd-stat-tile--fallback{ text-align:center; padding:22px; }
.rd-stat-num--muted{ color:var(--ink-mute); font-size:1.05rem; font-weight:500; font-family:var(--ff-body); }

/* Verlinkt die kompakte Hero-Kennzahlen-Leiste mit der vollen Spezifikationstabelle weiter
   unten auf der Seite, statt beide Bausteine unverbunden nebeneinander stehen zu lassen. */
.rd-stat-bar-link{
  display:inline-block; margin-top:14px;
  font-family:var(--ff-head); font-weight:700; font-size:13.5px; color:var(--ink-soft);
  text-decoration:none;
}
.rd-stat-bar-link:hover{ color:var(--acc-current); }

.rd-desc{ border-top:1px solid var(--hairline); }
.rd-desc-inner{ max-width:760px; }
.rd-desc h2{ font-size:clamp(24px,2.6vw + 1rem,34px); line-height:1.18; margin:12px 0 20px; }
.rd-desc p{ font-family:var(--ff-body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.rd-desc p:last-of-type{ margin-bottom:0; }

.rd-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.rd-back-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:40px;
  font-family:var(--ff-head); font-weight:700; font-size:14px; color:var(--ink-soft);
  text-decoration:none;
}
.rd-back-link svg{ width:16px; height:16px; stroke:currentColor; transition:transform .2s ease; }
.rd-back-link:hover{ color:var(--acc-current); }
.rd-back-link:hover svg{ transform:translateX(-3px); }

@media (max-width:900px){
  .rd-hero{ padding:170px 0 0; }
  .rd-hero-grid{ grid-template-columns:1fr; gap:28px; }
  .rd-hero-content{ max-width:none; }
  .rd-hero-visual-wrap{ max-width:320px; margin:0 auto; }
  .rd-stat-bar-wrap{ margin-top:40px; }
}
@media (max-width:560px){
  .rd-stat-bar{ grid-template-columns:1fr; }
  .rd-cta-row{ flex-direction:column; align-items:stretch; }
  .rd-cta-row .btn{ text-align:center; }
}

/* ───────────────────────── FAQ-AKKORDEON (Katalogseite + Roboter-Detailseiten) ──────────────────────── */
/* Native <details>/<summary>, kein JS: barrierefrei, von Crawlern unabhaengig vom
   Auf-/Zuklappzustand vollstaendig lesbar. Farbe folgt --acc-current der jeweiligen Seite. */
.faq-section{ border-top:1px solid var(--hairline); }
.faq-list{ max-width:820px; display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.faq-item{
  border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* .is-open statt [open], siehe Kommentar bei .article-toc.is-open weiter oben. */
.faq-item.is-open{ border-color:color-mix(in srgb, var(--acc-current) 35%, var(--hairline)); box-shadow:var(--shadow-card); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ font-size:16px; line-height:1.4; margin:0; color:var(--navy); }
.faq-icon{ flex:none; width:20px; height:20px; stroke:var(--acc-current); transition:transform .2s ease; }
.faq-item.is-open .faq-icon{ transform:rotate(180deg); }
.faq-item .faq-a{
  margin:0; padding:0 24px 22px; font-family:var(--ff-body); font-size:14.5px;
  line-height:1.7; color:var(--ink-soft); overflow:hidden;
}
/* Hoehen-/Opacity-Animation beim Auf-/Zuklappen wird von main.js per Web-Animations-API auf
   diesem Element gesteuert (siehe dort) — Begruendung siehe Kommentar bei .article-toc ol. */
.faq-item .faq-a a{ color:var(--navy); text-decoration:underline; }
.faq-item .faq-a a:hover{ color:var(--acc-current); }

/* ───────────────────────── PRODUKT-KARTEN (Katalogkarten + "Weitere Modelle" auf Roboter-Detailseiten) ──────────────────────── */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px; }
.product-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:26px 22px 22px; box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .2s ease;
}
.product-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-card-hover);
  border-color:color-mix(in srgb, var(--acc-current) 45%, var(--hairline));
}
.product-card h3{ font-size:19px; line-height:1.25; margin:0; }

.prod-link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.prod-link h3{ transition:color .2s ease; }
.prod-link:hover h3{ color:var(--acc-current); }

.product-card--accent{
  border-color:color-mix(in srgb, var(--acc-current) 28%, var(--hairline));
  border-top:3px solid var(--acc-current);
}
.product-card--accent h3{ padding-right:104px; }
.prod-highlight{
  position:absolute; top:16px; right:22px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--ff-head); font-weight:700; font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--acc-current); line-height:1; pointer-events:none;
}
.prod-highlight::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--acc-current); flex:none; }

.product-card .prod-visual{ margin:18px 0 16px; }
.product-card .spec{ font-family:var(--ff-body); font-size:13.5px; line-height:1.5; color:var(--ink-soft); text-align:center; margin:0 0 20px; min-height:1.5em; }

.prod-cta-row{ margin-top:auto; display:flex; justify-content:center; }
.prod-cta{ padding:10px 18px; font-size:13px; }
.product-card a.btn-ghost.prod-cta:hover, .product-card a.btn-ghost.prod-cta:focus-visible{ border-color:var(--acc-current); color:var(--acc-current); }

@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } .product-card{ padding:24px 20px 20px; } }

/* ───────────────────────── ROBOTER-DETAILSEITEN: Weitere Modelle + FAQ ──────────────────────── */
.rd-related{ border-top:1px solid var(--hairline); }
/* Diese Sektion zeigt immer genau 3 Modelle — eigene 3-Spalten-Regel statt der
   allgemeinen .product-grid-Traglinie bei 4 Spalten mit Luecke. */
.rd-related .product-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .rd-related .product-grid{ grid-template-columns:1fr; } }

.rd-faq{ border-top:1px solid var(--hairline); }
.rd-faq .faq-list{ margin-top:24px; }

.rd-seo-copy{ border-top:1px solid var(--hairline); }
.rd-seo-copy-inner{ max-width:760px; margin-top:8px; }
.rd-seo-copy-inner p{ font-family:var(--ff-body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.rd-seo-copy-inner p:last-of-type{ margin-bottom:0; }

.ab-seo-copy{ border-top:1px solid var(--hairline); }
.ab-seo-copy-inner{ max-width:760px; margin-top:8px; }
.ab-seo-copy-inner p{ font-family:var(--ff-body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px; }
.ab-seo-copy-inner h3{ font-size:19px; margin:26px 0 8px; }
.ab-seo-copy-inner h3:first-of-type{ margin-top:6px; }
.ab-seo-copy-inner p:last-of-type{ margin-bottom:0; }
.ab-seo-copy-inner a{ color:var(--navy); text-decoration:underline; }
.ab-seo-copy-inner a:hover{ color:var(--accent); }

/* Vollstaendige Spezifikationstabelle: ergaenzt die 1-2 Kennzahlen der Hero-Stat-Bar um alle
   ueblichen technischen Angaben eines Modells. Die Tabelle selbst nutzt das wiederverwendbare
   .article-techspecs-Modul (Variante 46, siehe Modul 12 oben). */
.rd-specs{ border-top:1px solid var(--hairline); }
.rd-specs-lead{ font-family:var(--ff-body); font-size:15px; color:var(--ink-soft); margin:8px 0 0; max-width:640px; }

/* Ehrliche Platzhalter fuer Zertifizierungs-/Guetesiegel, solange keine echten vorliegen —
   gestrichelt wie .prod-visual--more/"Modell folgt", keine erfundene Zertifizierung benannt. */
.rd-trust{ border-top:1px solid var(--hairline); }
.rd-trust-lead{ font-family:var(--ff-body); font-size:15px; color:var(--ink-soft); margin:8px 0 0; max-width:640px; }
.rd-trust-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }
.rd-trust-badge{
  flex:1 1 160px; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 16px; border:1px dashed var(--hairline); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--chalk) 60%, var(--paper));
  color:var(--mist);
}
.rd-trust-badge svg{ width:36px; height:36px; stroke:currentColor; fill:none; stroke-width:1.6; }
.rd-trust-badge span{ font-family:var(--ff-body); font-size:11.5px; font-weight:500; color:var(--ink-mute); }

.mobile-nav a:active{ background:var(--chalk); }

/* Querverlinkung zu den jeweils anderen Anwendungsbereichen — identische Komponente auf
   allen 5 Kategorie-Seiten (Logistik/Reinigung/Service/Reha & Therapie/Outdoor), pro Seite
   nur mit den 4 jeweils ANDEREN Bereichen befuellt. Farbige Segment-Leiste (freigegebene
   Variante 5 aus vergleich-weitere-anwendungsbereiche.html). */
.other-areas-sec{ border-top:1px solid var(--hairline); }

.other-areas-bar{
  display:flex; align-items:stretch; margin-top:8px;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
  isolation:isolate;
}

.other-areas-seg{
  --oa-acc: var(--navy);
  position:relative; flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:96px; padding:20px 18px;
  background:var(--oa-acc); color:#fff; text-decoration:none;
  font-family:var(--ff-head); font-weight:700; font-size:16px; letter-spacing:-.005em;
  text-align:center;
  transition:background-color .25s ease, transform .25s ease, flex-grow .3s ease;
}
.other-areas-seg + .other-areas-seg{ box-shadow:inset 1px 0 0 rgba(255,255,255,.35); }

.other-areas-seg.c-logistik{  --oa-acc:var(--acc-logistik); }
.other-areas-seg.c-reinigung{ --oa-acc:var(--acc-reinigung); }
.other-areas-seg.c-service{   --oa-acc:var(--acc-service); }
.other-areas-seg.c-assistenz{ --oa-acc:var(--acc-assistenz); }
.other-areas-seg.c-outdoor{   --oa-acc:var(--acc-outdoor); }

.other-areas-seg-icon{ display:flex; flex:none; width:26px; height:26px; align-items:center; justify-content:center; }
.other-areas-seg-icon svg{ width:100%; height:100%; }
.other-areas-seg-label{ line-height:1.25; }

.other-areas-seg:hover, .other-areas-seg:focus-visible{
  background:color-mix(in srgb, var(--oa-acc) 82%, #000 18%);
  flex-grow:1.12; transform:translateY(-2px);
}
.other-areas-seg:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
.other-areas-seg:active{ transform:translateY(0); }

@media (max-width:700px){
  .other-areas-bar{ flex-direction:column; }
  .other-areas-seg{ flex-direction:row; justify-content:flex-start; min-height:0; padding:18px 22px; flex:1 1 auto; }
  .other-areas-seg + .other-areas-seg{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
  .other-areas-seg:hover, .other-areas-seg:focus-visible{ flex-grow:1; transform:none; }
  .other-areas-seg-icon{ width:24px; height:24px; }
}

/* ───── Animierter Verlaufstext ─────────────────────────────────────────────
   Portierung von React Bits „GradientText“: dort treibt JavaScript die
   background-position eines background-clip:text-Elements. Das kann CSS
   allein — kein Skript, keine Abhaengigkeit.

   Uebernommene Werte: background-size 300% 100%, Position 0% -> 100%,
   yoyo (alternate), 3s je Halbzyklus, horizontal. Statt der linearen Kurve
   des Originals ease-in-out: bei alternate ist der Richtungswechsel sonst
   ein sichtbarer Ruck.

   Hier stehen nur die beiden Selektoren, die IMMER einen Verlauf tragen.
   .uc-hero-accent, .uc-hero-stat-num und .svc-hero-accent sind auf den
   Anwendungsbereichsseiten einfarbige Kategoriefarben und nur auf dem Hub
   bzw. auf leistungen.html Verlaeufe. Sie bekommen die Animation deshalb
   dort, wo ihr Verlauf deklariert ist — sonst liefe hier auf jeder Seite
   eine Endlosanimation auf Elementen ohne Hintergrundbild.

   Bewusst NICHT dabei: .logo .mark. Das Logo steht im Kopf jeder Seite;
   eine Dauerbewegung darauf waere eine Markenentscheidung, keine Stilfrage. */
.hero h1 em,
.partner-statement em{
  background-size:300% 100%;
  animation:gt-shift 3s ease-in-out infinite alternate;
}
@keyframes gt-shift{
  from{ background-position:0% 50%; }
  to  { background-position:100% 50%; }
}
/* Dauerbewegung ist genau der Fall, fuer den es die Einstellung gibt. */
@media (prefers-reduced-motion:reduce){
  .hero h1 em,
  .partner-statement em,
  .uc-hero-accent,
  .uc-hero-stat-num,
  .svc-hero-accent{ animation:none !important; background-size:auto; }
  /* Die drei letzten stehen hier mit, obwohl sie die Animation nur auf
     einzelnen Seiten bekommen — abschalten darf ruhig breiter greifen
     als einschalten.
     !important ist hier kein Notnagel, sondern noetig: ihre Verlaufsregeln
     stehen in seiteneigenen <style>-Bloecken, also in der Kaskade nach
     dieser Datei. Bei gleicher Spezifitaet gewaenne die spaetere Regel —
     Media Queries erhoehen die Spezifitaet nicht. Eine Nutzereinstellung
     muss sich aber durchsetzen, auch gegen spaeteren Seitencode. */
}