/* =====================================================================
   icotek Kunststofftechnik — Redesign Prototype
   Design System / Global Stylesheet
   Handoff-Hinweis (Contao): Klassen sind BEM-nah und semantisch benannt.
   Wiederkehrende Blöcke (.site-header, .site-footer, Komponenten) sind
   auf allen Seiten HTML-identisch und als Contao-Module/Includes gedacht.
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Farben — icotek Markenpalette (aus icotek.biz-CSS + Redesign-Deck) */
  --c-bg:          #ffffff;
  --c-surface:     #f5f5f4;   /* warmes Stein-Grau (Deck) */
  --c-surface-2:   #e5e5e4;
  --c-ink:         #1a1a1a;   /* Headlines nahezu schwarz */
  --c-ink-soft:    #3c3c3b;   /* icotek Dunkelgrau (Fließtext) */
  --c-ink-faint:   #6f6f6e;   /* Sekundärtext (Deck) */
  --c-line:        #e5e5e4;
  --c-accent:      #e30613;   /* icotek Rot */
  --c-accent-deep: #b80510;   /* Hover */
  --c-accent-ink:  #ffffff;   /* Text auf Rot */
  --c-accent-tint: #fef0f1;   /* helle Rot-Fläche */
  --c-dark:        #1a1a1a;   /* dunkle Sektion / Footer */
  --c-dark-2:      #262625;
  --c-dark-line:   #3c3c3b;
  --c-dark-ink:    #f5f5f4;
  --c-dark-soft:   #b8b8b7;
  --c-success:     #2f8f5b;
  /* Kopfflaeche: einheitlicher Grauverlauf auf Startseite und allen Unterseiten
     (Entscheidung icotek 15.09.2026, zuvor Weiss bzw. flaches --c-surface) */
  --grad-kopf:     linear-gradient(180deg, #ededec 0%, #dcdcda 100%);

  /* Typo — Deck: Plus Jakarta Sans (Headlines) + Inter (Text) */
  /* EINE Schriftfamilie seitenweit (Kundenentscheidung 28.07.2026: keine gemischten Schriften).
     --font-head/-serif/-script sind Aliasse, damit bestehende Regeln weiter greifen. */
  --font:          "Open Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-head: var(--font);
  --font-serif: var(--font);
  --font-script: var(--font);
  --shadow-red: 0 14px 34px rgba(227,6,19,.22);                  /* Deck-Signatur für CTAs */
  --fs-hero:  clamp(2.4rem, 5.2vw, 4.4rem);
  --fs-h1:    clamp(2rem, 4vw, 3.1rem);
  --fs-h2:    clamp(1.55rem, 2.8vw, 2.3rem);
  --fs-h3:    clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1.2vw, 1.15rem);   /* Seitenkopf/Hero: nur noch 8 % ueber dem Fliesstext statt 22 % */
  --fs-body:  1.0625rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.78rem;

  /* Raster / Abstände */
  --wrap:      1200px;
  --measure:   42rem;         /* gemeinsame Textspalte fuer Lead und Fliesstext (ca. 66 Zeichen) */
  --wrap-narrow: 820px;
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --radius:    0;
  --radius-sm: 0;
  --radius-lg: 0;
  --shadow-sm: 0 1px 2px rgba(20,23,28,.06), 0 2px 8px rgba(20,23,28,.05);
  --shadow-md: 0 8px 24px rgba(20,23,28,.09), 0 2px 6px rgba(20,23,28,.06);
  --shadow-lg: 0 24px 60px rgba(20,23,28,.14);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --header-h:  76px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: clip;            /* kappt das Off-Canvas-Menü, kein H-Scroll; bricht sticky nicht */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
/* Formular-Elemente erben die Schrift NICHT vom Body – sonst rendert der Browser sie in Arial.
   Ursache für gemischte Schriften in Dock-Buttons, Kostenrechner und Selects. */
button, input, select, textarea, optgroup, option { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
.hero__title { font-family: var(--font-head); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 0; }

/* ---------- Layout Helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--c-surface); }
.section--dark { background: var(--c-dark); color: var(--c-dark-ink); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
.section--tight { padding-block: clamp(2.2rem,4vw,3.4rem); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: var(--measure); }
.section--dark .lead { color: var(--c-dark-soft); }
/* Kein dekoratives Eyebrow-Label mehr vor Sektionen: Abschnitte werden ueber die
   Ueberschrift eingefuehrt. Die Restklasse bleibt nur fuer login.html (MADMEN-Tool)
   und ist bewusst schlicht: klein, normale Schreibweise, ohne Strich, ohne Sperrung. */
.eyebrow {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink-faint); margin-bottom: 1rem;
}
.section-head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; }
/* Frei stehender Fliesstext in einer Sektion teilt sich Spaltenbreite und Textfarbe
   mit dem Lead darueber. Ohne das lief er ueber die volle Containerbreite
   (108 statt 61 Zeichen je Zeile) und in Headline-Schwarz statt in der Textfarbe –
   dadurch wirkten Lead und Fliesstext wie zwei verschiedene Schriftbilder. */
.section:not(.section--dark) > .wrap > p { max-width: var(--measure); color: var(--c-ink-soft); }
.section.section--tight > .wrap > p, .section > .wrap > p.note-placeholder { max-width: none; }
/* Der Lead einer Sektion hat dieselbe Schriftgroesse wie der Fliesstext darunter.
   Der Sprung 20,8 -> 17 px (22 %) liess zwei aufeinanderfolgende Absaetze derselben
   Schrift wie zwei verschiedene Schriften wirken (Kundenmeldung 3x). Die Hierarchie
   traegt jetzt allein Eyebrow + H2. Einzige Ausnahme: der Lead im Seitenkopf,
   der nie neben Fliesstext steht. */
.section .lead { font-size: var(--fs-body); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--c-ink); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.5em; font: inherit; font-weight: 700; font-size: var(--fs-sm);
  line-height: 1; border: 2px solid transparent; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink); }
.btn--accent:hover { --btn-bg: var(--c-accent-deep); box-shadow: var(--shadow-red); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink); box-shadow: none; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--ghost.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; border-color: var(--c-dark-line); }
.btn--lg { padding: 1.05em 1.9em; font-size: var(--fs-body); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.link-arrow { font-weight: 700; color: var(--c-accent-deep); display: inline-flex; align-items: center; gap: .4em; }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .8em; border-radius: 0; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .02em; background: var(--c-surface); color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}
.badge--gold { background: rgba(227,6,19,.14); border-color: rgba(227,6,19,.4); color: var(--c-accent-deep); }
.badge--award { background: var(--c-ink); color: #fff; border: none; }
/* Red Dot Award Auszeichnung (Text-Badge – nicht das offizielle Logo) */
.reddot-badge { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.1em; border-radius: 0;
  background: var(--c-dark); color: #fff; font-weight: 800; font-size: var(--fs-sm); letter-spacing: .01em; }
.reddot-badge::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(227,6,19,.3); flex: none; }
.reddot-badge small { font-weight: 600; opacity: .72; }
/* Offizielleres Logo (stilisierte Nachbildung) + Chip für dunkle/Foto-Hintergründe */
.reddot-logo { height: 58px; width: auto; display: block; }
.reddot-chip { display: inline-flex; align-items: center; gap: .8rem; background: #fff; border-radius: 0;
  padding: .7rem 1rem; box-shadow: var(--shadow-md); text-decoration: none; border: 1px solid var(--c-line); }
.reddot-chip__text { font-size: .78rem; font-weight: 700; color: var(--c-ink); line-height: 1.25; }
.reddot-chip__text span { display: block; color: var(--c-accent-deep); }
/* Award-Pin über dem Hero-Bild (kompakt, nur Logo) */
.hero__award { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; gap: 0; padding: .55rem .85rem; }
.hero__award .reddot-logo { height: 50px; }
/* Hero-Figur: Produktbild + Award-Siegel darunter, zentriert */
.hero__figure { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.hero__figure .hero__media { width: 100%; }
/* Award-Chip unter dem Bild (klar lesbar) */
.hero-award { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none;
  padding: .6rem .95rem; border: 1px solid var(--c-line); border-radius: 0; background: #fff;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.hero-award:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hero-award .reddot-logo { height: 46px; flex: none; }
.hero-award > span { font-size: .88rem; font-weight: 600; color: var(--c-ink-soft); line-height: 1.35; max-width: 26ch; }
.hero-award b { color: var(--c-ink); }
.hero-award em { display: block; font-style: normal; font-weight: 700; color: var(--c-accent-deep); margin-top: 2px; }

/* Freigestelltes Produkt im Hero (Award-Produkt, transparenter Hintergrund)
   Doppelklasse für höhere Spezifität als die Basis-.hero__media-Regel */
.hero__media.hero__media--free { background: none; box-shadow: none; overflow: visible; aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center; }
.hero__media.hero__media--free .hero__product-img { position: static; inset: auto; width: 100%; height: auto;
  object-fit: contain; filter: drop-shadow(0 26px 34px rgba(20,15,10,.28)); }
.hero__media.hero__media--free .hero__award { left: 0; top: 0; bottom: auto; }
@media (max-width: 560px) { .reddot-logo { height: 44px; } .hero__award .reddot-logo { height: 42px; } .hero__award { left: .7rem; bottom: .7rem; } }

/* Kontrast-Sicherung: Links/Akzente auf dunklen Flächen immer hell genug */
.section--dark .link-arrow, .cta-band .link-arrow, .quote .link-arrow { color: #fff; }
.section--dark .link-arrow::after, .cta-band .link-arrow::after { color: #fff; }

/* =====================================================================
   ERKLAERGRAFIK IM TEXTFLUSS
   Die isometrischen 3D-Grafiken erklaeren, sie sind kein Bildband.
   Deshalb bewusst schmaler als die Textspalte (--measure 42rem) und
   nie ueber ihre native Breite von 764 px skaliert.
   ===================================================================== */
.media-figure { max-width: 30rem; margin: 1.6rem 0; }
.media-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: 0; }
.media-figure figcaption { margin-top: .55rem; font-size: var(--fs-sm); color: var(--c-ink-faint); line-height: 1.4; }

/* =====================================================================
   HEADER  (identisch auf allen Seiten)
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.header-inner { display: flex; align-items: center; gap: 1.1rem; height: var(--header-h); }
.header-inner > * { min-width: 0; }
/* Marke: die Wortmarke traegt das Logo selbst (inkl. Zeile "Kunststofftechnik").
   Kein zusaetzlicher Claim darunter, damit das Lockup nicht gedraengt wirkt. */
.brand { display: flex; align-items: center; line-height: 1; margin-right: auto; min-width: 0; }
.brand__logo { height: 50px; width: auto; }

.main-nav { display: flex; align-items: center; flex-shrink: 0; }
.main-nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.main-nav a, .nav-toggle-label {
  display: inline-flex; align-items: center; gap: .28em;
  padding: .5rem .52rem; font-weight: 600; font-size: .9rem; color: var(--c-ink);
  border-radius: 0; cursor: pointer; white-space: nowrap;
}
.main-nav a:hover, .has-dropdown:hover > a { background: var(--c-surface); color: var(--c-accent-deep); }
.main-nav a[aria-current="page"] { color: var(--c-accent-deep); }
.has-dropdown { position: relative; }
.has-dropdown > a::after { content: "▾"; font-size: .7em; color: var(--c-ink-faint); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: .5rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { display: block; padding: .6rem .8rem; border-radius: 0; font-size: .92rem; }
.dropdown a small {
  display: block; font-weight: 500; font-size: .75rem; color: var(--c-ink-faint);
  /* Beschreibungen sollen in ihrer Spalte umbrechen statt in die naechste zu laufen.
     Die Spalten des Mega-Menues sind rund 19rem breit, das reicht fuer etwa 24 Zeichen
     je Zeile. Laengere Texte werden gekuerzt, diese Regel ist die Absicherung. */
  overflow-wrap: break-word; hyphens: auto; line-height: 1.35;
}

/* =================== MEGA-MENUE =================== */
/* Erweitert .dropdown: mehrspaltig, mit Conversion-Block. Mobile faellt auf das
   bestehende Off-Canvas-Verhalten zurueck, siehe Media Query unten. */
.dropdown--mega {
  left: 50%; transform: translate(-50%, 8px);
  width: min(var(--mega-w, 940px), calc(100vw - 3rem));
  padding: 1.4rem 1.6rem 1.2rem;
  display: grid; grid-template-columns: var(--mega-cols, repeat(3, 1fr)) 15rem; gap: 0 1.8rem;
}
.has-dropdown:hover > .dropdown--mega,
.has-dropdown:focus-within > .dropdown--mega { transform: translate(-50%, 0); }
.mega__col { list-style: none; margin: 0; padding: 0; min-width: 0; }
.mega__head {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-faint); padding: 0 .6rem; margin-bottom: .5rem;
}
.mega__col + .mega__col .mega__head { margin-top: 0; }
.dropdown--mega a { padding: .45rem .6rem; }
.dropdown--mega a small { margin-top: .1rem; }

/* Conversion-Spalte */
.mega__cta {
  border-left: 1px solid var(--c-line); padding-left: 1.6rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.mega__cta-k {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent-deep); display: flex; align-items: center; gap: .4em;
}
.mega__cta-t { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.mega__cta-p { font-size: .82rem; color: var(--c-ink-soft); line-height: 1.5; }
/* .main-nav a setzt color, padding und font-size und ist spezifischer als .btn.
   Fuer den CTA im Mega-Menue deshalb gezielt zurueckholen, sonst steht dunkler
   Text auf rotem Grund und der Button bekommt Nav-Padding. */
.main-nav .mega__cta .btn {
  width: 100%; justify-content: center;
  color: var(--btn-fg); background: var(--btn-bg);
  padding: .85em 1.5em; font-size: var(--fs-sm); font-weight: 700;
}
.main-nav .mega__cta .btn--accent:hover {
  --btn-bg: var(--c-accent-deep);
  color: var(--btn-fg); background: var(--btn-bg);
}
.main-nav .mega__cta-call { color: var(--c-ink-faint); padding: 0; font-weight: 500; }
.main-nav .mega__cta-call:hover { background: transparent; color: var(--c-accent-deep); }
.mega__cta-call {
  font-size: .82rem; color: var(--c-ink-faint); text-align: center;
  padding: 0; display: block;
}
.mega__cta-call b { color: var(--c-ink); }

@media (max-width: 1100px) {
  .dropdown--mega { --mega-w: 780px; --mega-cols: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  /* Mega-Menue wird auf Mobile zur normalen Liste, Conversion-Block ausgeblendet */
  .dropdown--mega {
    left: 0; transform: none; width: auto; display: block; padding: 0;
    grid-template-columns: none;
  }
  .has-dropdown:hover > .dropdown--mega,
  .has-dropdown:focus-within > .dropdown--mega { transform: none; }
  .mega__head { margin-top: .8rem; }
  .mega__cta { display: none; }
}

.header-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.header-phone { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-weight: 800; white-space: nowrap; }
.header-phone small { font-weight: 600; font-size: .62rem; letter-spacing: .1em; color: var(--c-ink-faint); }
.header-phone span { font-size: 1rem; white-space: nowrap; }

.nav-burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--c-line);
  background: #fff; border-radius: 0; cursor: pointer; padding: 0;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--c-ink);
  margin-inline: auto; position: relative; transition: .2s var(--ease);
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero--home {
  background: linear-gradient(180deg, #fff 0%, var(--c-surface) 100%);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__title { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.03em; }
.hero__title .u-gold { color: var(--c-accent); }  /* exakte icotek-CI-Farbe #e30613 */
.hero__sub { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 54ch; margin-top: .3rem; }
.hero__actions { margin-top: 2rem; }
.hero__trust { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.hero__trust-item { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }
.hero__trust-item strong { color: var(--c-accent); font-size: 1.5rem; font-weight: 900; }
.hero__media {
  aspect-ratio: 4/5; border-radius: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--c-dark), var(--c-dark-2));
  box-shadow: var(--shadow-lg); position: relative; display: grid; place-items: center;
}
.hero__media .placeholder-label { color: var(--c-dark-soft); }

/* Seitenkopf (Unterseiten) */
.pagehead { padding-block: clamp(2.6rem, 5vw, 4.2rem); background: var(--grad-kopf); border-bottom: 1px solid var(--c-line); }
/* Leistungsseiten: freigestellte 3D-Grafik (transparentes PNG) schwebt im Kopf.
   Neutrale Fläche, Media ohne Rahmen/Schatten, Objekt vollständig sichtbar (contain) mit weichem Bodenschatten. */
.pagehead--leistung { border-bottom-color: var(--c-line); }
.pagehead--leistung .hero__media { background: transparent; box-shadow: none; border-radius: 0; }
.pagehead--leistung .hero__media img { object-fit: contain; filter: drop-shadow(0 22px 22px rgba(20,23,28,.16)); }
/* Ausnahme (Prototypen): Bild mit eigenem, angeglichenem Hintergrund als randlose Kachel statt freigestellt */
.pagehead__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: end; }
.pagehead h1 { font-size: var(--fs-h1); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: var(--fs-sm); color: var(--c-ink-faint); }
.breadcrumb li::after { content: "/"; margin-left: .5rem; color: var(--c-line); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a:hover { color: var(--c-accent-deep); }

/* =====================================================================
   TRUST BAR
   ===================================================================== */
.trustbar { border-block: 1px solid var(--c-line); background: #fff; }
.trustbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.3rem; }
.trustbar__label { font-size: var(--fs-xs); color: var(--c-ink-faint); font-weight: 700; }
.trustbar__logos { display: flex; flex-wrap: wrap; gap: .7rem .9rem; align-items: center; }
.logo-chip { font-weight: 700; letter-spacing: .01em; color: var(--c-ink-soft); font-size: 1.02rem;
  padding: .5rem 1.05rem; border: 1px solid var(--c-line); border-radius: 0; background: #fff;
  box-shadow: 0 1px 2px rgba(11,32,54,.05); }

/* Branchen-Leiste: Icons statt Pillen, damit sie sich klar von der Kunden-Leiste abhebt */
.trustbar--clients { background: var(--c-surface); }
.industry-chip { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
  letter-spacing: .01em; color: var(--c-ink-soft); font-size: 1.02rem; }
.industry-chip__icon { width: 22px; height: 22px; flex: none; color: var(--c-accent); }
.industry-chip + .industry-chip { position: relative; }
.trustbar--industries .trustbar__logos { gap: .7rem 1.5rem; }

/* =====================================================================
   GRID / CARDS
   ===================================================================== */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 0;
  padding: clamp(1.4rem, 2vw, 2rem); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display: flex; flex-direction: column;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(227,6,19,.5); }
.card__num { font-size: .8rem; font-weight: 800; color: var(--c-accent-deep); letter-spacing: .1em; margin-bottom: .8rem; }
.card__icon {
  width: 52px; height: 52px; border-radius: 0; display: grid; place-items: center;
  background: rgba(227,6,19,.14); color: var(--c-accent-deep); font-size: 1.5rem; margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-bottom: 0; }
.card .link-arrow { margin-top: 1.2rem; font-size: var(--fs-sm); }
.card--surface { background: var(--c-surface); }
.card--dark { background: var(--c-dark-2); border-color: var(--c-dark-line); color: var(--c-dark-ink); }
.card--dark p { color: var(--c-dark-soft); }

/* Leistungs-Übersicht — Bild-Karten (verlinken auf die Leistungsseiten) */
.leistgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.leistcard {
  overflow: hidden; border-radius: 0; border: 1px solid var(--c-line);
  background: #fff; box-shadow: var(--shadow-sm); display: block; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.leistcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(227,6,19,.5); }
.leistcard__media { aspect-ratio: 1/1; background: var(--c-surface); position: relative; overflow: hidden; }
.leistcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leistcard__body { padding: 1.1rem 1.3rem 1.4rem; }
.leistcard__body h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.leistcard__body p { margin: 0 0 .9rem; color: var(--c-ink-soft); font-size: var(--fs-sm); }
/* Prototyp-Hinweis: Kundenfoto/Feedback noch offen (nur Preview) */
.leistcard__todo { display: block; margin: 0 0 .9rem; font-size: 11.5px; font-weight: 700; line-height: 1.35;
  color: var(--c-ink-faint); background: var(--c-surface); border: 1px solid var(--c-line); padding: 5px 8px; }
.leistcard__todo b { color: var(--c-ink-soft); }
@media (max-width: 900px) { .leistgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .leistgrid { grid-template-columns: 1fr; } }

/* Value / Problem-Lösung */
.valuecard { padding: 1.8rem; border-radius: 0; background: #fff; border: 1px solid var(--c-line); }

/* =====================================================================
   PROCESS (nummerierte Schritte)
   ===================================================================== */
.process { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.process__step { position: relative; padding: 1.8rem; border-radius: 0; background: var(--c-dark-2); border: 1px solid var(--c-dark-line); }
.process__step::before {
  counter-increment: step; content: "0" counter(step);
  font-size: 2.4rem; font-weight: 900; color: var(--c-accent); display: block; margin-bottom: .6rem; letter-spacing: -.03em;
}
.process--light .process__step { background: #fff; border-color: var(--c-line); }
.process__step h3 { margin-bottom: .3rem; }
.process__step p { color: var(--c-dark-soft); font-size: var(--fs-sm); margin: 0; }
.process--light .process__step p { color: var(--c-ink-soft); }

/* =====================================================================
   SPEC TABLE
   ===================================================================== */
.specs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.specs th, .specs td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--c-line); }
.specs th { width: 42%; font-weight: 700; color: var(--c-ink); background: var(--c-surface); }
.specs td { color: var(--c-ink-soft); }
/* nur die letzte Zeile im tbody. Ohne die tbody-Einschraenkung traf der
   Selektor auch die einzige Zeile eines thead und loeschte dort die
   Kopf-Trennlinie, weil er spezifischer ist als jede thead-Regel. */
.specs tbody tr:last-child th, .specs tbody tr:last-child td { border-bottom: none; }
.spec-wrap { border: 1px solid var(--c-line); border-radius: 0; overflow: hidden; background: var(--c-bg); }
.table-scroll { overflow-x: auto; }

/* Feature list mit Häkchen */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 1.4rem; }
.checklist li::before {
  content: ""; position: absolute; left: .2rem; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--c-accent);
}
.taglist { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: 0; }
.taglist li { padding: .4em .85em; border-radius: 0; background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }

/* =====================================================================
   WERKSTOFF-VERGLEICHSTABELLE (werkstoffe.html)
   Desktop: echte Tabelle mit H-Scroll · ab 920px: gestapelte Karten
   ===================================================================== */
.wstab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; }
.wstab-tools__label {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-ink-faint); margin-right: .4rem;
}
.wsfilter {
  appearance: none; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink-soft); background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 0; padding: .45em 1em; cursor: pointer; min-height: 40px;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.wsfilter:hover { border-color: var(--c-ink-faint); color: var(--c-ink); }
.wsfilter:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.wsfilter[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }

.wstab-wrap { border: 1px solid var(--c-line); border-radius: 0; overflow: hidden; background: var(--c-bg); }
.wstab-scroll { overflow-x: auto; }
.wstab { width: 100%; min-width: 1040px; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
.wstab thead th {
  text-align: left; background: var(--c-surface); border-bottom: 1px solid var(--c-surface-2);
  padding: .9rem .85rem; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink);
}
.wstab td, .wstab tbody th {
  text-align: left; padding: 1.05rem .85rem; border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-soft); vertical-align: top; line-height: 1.5; font-weight: 400;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.wstab tbody tr { transition: background .18s var(--ease); }
.wstab tbody tr:hover { background: var(--c-surface); }
.wstab tbody tr:last-child > * { border-bottom: none; }
.wstab tbody tr[hidden] { display: none; }

.wsmat { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; color: var(--c-ink); line-height: 1.25; }
.wsmat__long { display: block; margin-top: .2rem; font-size: var(--fs-xs); color: var(--c-ink-faint); font-weight: 500; }
.wsbadge {
  display: inline-block; margin-top: .5rem; padding: .22em .65em; border-radius: 0;
  background: var(--c-accent-tint); color: var(--c-accent-deep);
  font-size: .68rem; font-weight: 700;
}

.wslist { list-style: none; margin: 0; padding: 0; }
.wslist li { position: relative; padding-left: 1.15rem; margin-bottom: .4rem; }
.wslist li:last-child { margin-bottom: 0; }
.wslist li::before { position: absolute; left: 0; top: -1px; font-weight: 800; }
.wslist--pro li::before { content: "+"; color: var(--c-success); }
.wslist--con li::before { content: "–"; color: var(--c-ink-faint); }

.wschips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.wschips a, .wschips span {
  display: inline-block; padding: .28em .7em; border-radius: 0;
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.wschips a:hover { background: var(--c-accent-tint); border-color: var(--c-accent); color: var(--c-accent-deep); }

.wsprice { display: flex; flex-direction: column; gap: .45rem; }
.wsprice__bars { display: flex; gap: 3px; }
.wsprice__bars i { display: block; width: 9px; height: 18px; border-radius: 0; background: var(--c-surface-2); }
.wsprice__bars i.on { background: var(--c-ink); }
.wsprice__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-faint); }

/* Handelsnamen nicht trennen */
.wstype, .wsmat { hyphens: manual; -webkit-hyphens: manual; }
.wstype { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.wstype--req { font-weight: 500; font-style: italic; color: var(--c-ink-faint); }

.wstab-empty { padding: 2.4rem 1rem; text-align: center; color: var(--c-ink-faint); font-size: var(--fs-sm); }
.wstab-note { margin: 1rem 0 0; font-size: var(--fs-xs); color: var(--c-ink-faint); line-height: 1.65; }

@media (max-width: 920px) {
  .wstab-wrap { border: none; border-radius: 0; background: transparent; overflow: visible; }
  .wstab-scroll { overflow: visible; }
  .wstab, .wstab tbody, .wstab tr, .wstab td, .wstab tbody th { display: block; width: auto; min-width: 0; }
  .wstab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wstab tbody tr { border: 1px solid var(--c-line); border-radius: 0; background: var(--c-bg); margin-bottom: 1rem; overflow: hidden; }
  .wstab tbody tr:hover { background: var(--c-bg); }
  .wstab tbody tr:last-child { margin-bottom: 0; }
  .wstab td, .wstab tbody th { border-bottom: 1px solid var(--c-line); padding: .9rem 1.1rem; }
  .wstab tbody tr > *:last-child { border-bottom: none; }
  .wstab td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .4rem;
    font-size: .68rem; font-weight: 700; color: var(--c-ink-faint);
  }
  .wstab .wstab__mat { background: var(--c-surface); padding: 1.1rem; }
  .wsprice { flex-direction: row; align-items: center; gap: .6rem; }
}
@media (max-width: 640px) {
  .wstab-tools__label { flex: 0 0 100%; margin: 0 0 .1rem; }
}

/* =====================================================================
   MEDIA (echte Fotos/Videos füllen die Platzhalter-Boxen)
   ===================================================================== */
.hero__media, .refcard__media, .article__figimg, .map-embed { position: relative; overflow: hidden; }
.hero__media img, .hero__media video,
.refcard__media img, .article__figimg img, .map-embed img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.refcard__badge { z-index: 2; }
.media-caption { position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; padding: .5rem .8rem;
  font-size: var(--fs-xs); font-weight: 600; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); width: 100%; }
/* Logo-Chips im Trust-Bereich (echte Kundenlogos) */
.logo-img { height: 34px; width: auto; object-fit: contain; opacity: .85; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.logo-img:hover { opacity: 1; filter: none; }

/* =====================================================================
   FAQ ACCORDION
   ===================================================================== */
.faq { max-width: 780px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.08rem; color: var(--c-ink);
  padding: 1.3rem 3rem 1.3rem 0; position: relative; display: block;
}
.faq__q::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--c-accent-deep); transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q::after,
.faq__q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { padding: 0 3rem 1.4rem 0; color: var(--c-ink-soft); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq__panel > div { overflow: hidden; }
.faq__q[aria-expanded="true"] + .faq__panel { grid-template-rows: 1fr; }

/* =====================================================================
   TESTIMONIAL / QUOTE
   ===================================================================== */
.quote {
  background: var(--c-dark); color: #fff; border-radius: 0;
  padding: clamp(2rem, 4vw, 3.5rem); position: relative;
}
.quote__mark { font-size: 4rem; line-height: .5; color: var(--c-accent); font-weight: 900; }
.quote blockquote { font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; margin: 1rem 0 1.5rem; }
.quote__author { display: flex; align-items: center; gap: .9rem; }
.quote__avatar { width: 48px; height: 48px; border-radius: 0; background: var(--c-dark-line); display: grid; place-items: center; color: var(--c-dark-soft); font-weight: 800; }
.quote__author b { display: block; }
.quote__author small { color: var(--c-dark-soft); }

/* =====================================================================
   REFERENCE / PROJECT GALLERY
   ===================================================================== */
.refcard { overflow: hidden; border-radius: 0; border: 1px solid var(--c-line); background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.refcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.refcard__media { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface)); display: grid; place-items: center; position: relative; }
.refcard__badge { position: absolute; top: .8rem; left: .8rem; }
/* Badge liegt auf dem Bauteilfoto: deckender Grund, damit es auf hellen wie dunklen
   Motiven lesbar bleibt. Die transparente Variante der Pills trägt hier nicht. */
.refcard .refcard__badge,
.refcard .refcard__badge.badge--gold {
  background: rgba(23,23,23,.82); border: none; color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .32em .7em; backdrop-filter: saturate(140%) blur(2px);
}
.refcard__body { padding: 1.2rem 1.4rem 1.4rem; }
.refcard__body h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.refcard__meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: var(--fs-xs); color: var(--c-ink-faint); }
.refcard__meta span { padding: .25em .6em; background: var(--c-surface); border-radius: 0; font-weight: 600; }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band {
  background: linear-gradient(120deg, var(--c-dark) 0%, var(--c-dark-2) 60%, #2a0708 130%);
  color: #fff; border-radius: 0; padding: clamp(2.2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: var(--c-dark-soft); margin: 0; max-width: 52ch; }

/* =====================================================================
   GESCHÄFTSFÜHRER-KONTAKT (Conversion-Element, auf allen Seiten vor dem Footer)
   ===================================================================== */
.gf-band { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.gf-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; background: #fff; border: 1px solid var(--c-line);
  border-radius: 0; padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.gf-card__figure { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
.gf-card__photo { width: 128px; height: 128px; border-radius: 0; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-md); }
.gf-card__name b { display: block; font-weight: 800; }
.gf-card__name span { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.gf-card__body h2 { margin-bottom: .4rem; }
.gf-card__body p { color: var(--c-ink-soft); max-width: 58ch; margin-bottom: 1.2rem; }
@media (max-width: 720px) {
  .gf-card { grid-template-columns: 1fr; text-align: center; }
  .gf-card__body p { margin-inline: auto; }
  .gf-card__body .btn-row { justify-content: center; }
}

/* =====================================================================
   INDUSTRY (Branchen-Landingpage)
   ===================================================================== */
/* Branchen-Header: seit 17.09.2026 im selben Kopfgrau wie Startseite und alle
   uebrigen Unterseiten (Entscheidung Jour fixe, zuvor dunkler Verlauf). */
/* Der Kopf ist nicht mehr dunkel: Sekundaertext und Ghost-Button umfaerben,
   ohne die dunklen Sektionen weiter unten auf derselben Seite anzufassen. */
/* USP-/Stat-Zeile: einheitliche Optik mit .hero__trust (großer Wert + Label, inline) */
/* Branchen-Kennzahlen: festes Dreierraster statt Flexbox. Die Labels sind hier
   branchenspezifisch und damit deutlich laenger als die generische .hero__trust-Zeile
   der Leistungsseiten (84 bis 115 statt 62 bis 82 Zeichen). Im Flex-Layout brach
   deshalb je nach Seite eine andere Kennzahl in die zweite Zeile. Das Raster haelt
   alle drei nebeneinander, das Label darf innerhalb seiner Spalte umbrechen. */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.8rem; margin-top: 2.3rem; align-items: start; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: 0; background: none; border: 0; border-radius: 0; }
.stat b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--c-accent); letter-spacing: -.02em; line-height: 1.15; }
.stat span { display: block; font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: 600; line-height: 1.35; }

/* =====================================================================
   USE-CASE / EDITORIAL
   ===================================================================== */
.article { max-width: 760px; margin-inline: auto; }
.article p { font-size: 1.15rem; color: #2b3038; }
.article h2 { margin-top: 2.4rem; }
.article figure { margin: 2.4rem 0; }
.article__figimg { aspect-ratio: 16/9; border-radius: 0; background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface)); display: grid; place-items: center; }
.article figcaption { font-size: var(--fs-sm); color: var(--c-ink-faint); margin-top: .6rem; text-align: center; }
.article__pull { font-size: clamp(1.4rem,2.6vw,2rem); font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); margin: 2.4rem 0; }
.article__meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--c-ink-faint); font-size: var(--fs-sm); margin-bottom: 1.5rem; }

/* =====================================================================
   FORMS (Sales / Kontakt)
   ===================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 700; }
.field label .req { color: #b23c3c; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-sm); padding: .8rem .9rem; border: 1px solid var(--c-line);
  border-radius: 0; background: #fff; color: var(--c-ink); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(227,6,19,.18); }
.field textarea { min-height: 130px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { width: auto; margin-top: .25rem; }
.field--check label { font-weight: 500; color: var(--c-ink-soft); }
.form-panel { background: #fff; border: 1px solid var(--c-line); border-radius: 0; padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--shadow-md); }
.form-note { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.form-success { display: none; padding: 1rem 1.2rem; background: rgba(47,143,91,.1); border: 1px solid rgba(47,143,91,.4); color: var(--c-success); border-radius: 0; font-weight: 600; }
.form-success.is-visible { display: block; }

/* Contact aside */
.contact-card { background: var(--c-dark); color: #fff; border-radius: 0; padding: clamp(1.6rem,3vw,2.4rem); }
.contact-card h3 { color: #fff; }
.contact-card a { color: #fff; }
.contact-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-list .ico { color: var(--c-accent); font-size: 1.2rem; }
.contact-list small { display: block; color: var(--c-dark-soft); font-size: var(--fs-xs); }
.map-embed { aspect-ratio: 16/7; border-radius: 0; background: repeating-linear-gradient(45deg, var(--c-surface), var(--c-surface) 12px, var(--c-surface-2) 12px, var(--c-surface-2) 24px); display: grid; place-items: center; color: var(--c-ink-faint); border: 1px solid var(--c-line); }

/* Job card */
.job { border: 1px solid var(--c-line); border-radius: 0; padding: 1.6rem; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.job h3 { margin: 0 0 .3rem; }
.job__tags { display: flex; flex-wrap: wrap; gap: .5rem; }

/* =====================================================================
   PLACEHOLDER (Bild-/Content-Platzhalter, klar erkennbar)
   ===================================================================== */
.placeholder-label { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-faint); }
.note-placeholder { border: 1px solid var(--c-line); background: var(--c-surface); padding: 1rem 1.2rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* =====================================================================
   FOOTER (identisch auf allen Seiten)
   ===================================================================== */
.site-footer { background: var(--c-dark); color: var(--c-dark-soft); padding-block: clamp(3rem,5vw,4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand__logo { height: 62px; width: auto; }
.footer-brand p { font-size: var(--fs-sm); max-width: 34ch; margin-top: 1rem; }
.footer-col h3, .footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .1em; margin-bottom: 1rem; }
/* Links im dunklen Fußbereich hell, Rot auf Fast-Schwarz ist zu kontrastarm. */
.site-footer .link-arrow { color: #fff; }
.site-footer .link-arrow:hover { color: var(--c-accent); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col a { font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--c-accent); }
.footer-badges { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.footer-cert { border: 1px solid var(--c-dark-line); border-radius: 0; padding: .5rem .8rem; font-size: var(--fs-xs); font-weight: 700; color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-dark-line); font-size: var(--fs-xs); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
.cookie-bar {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 80; max-width: 560px; margin-inline: auto;
  background: #fff; border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-lg);
  padding: 1.2rem 1.4rem; display: none; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.cookie-bar.is-visible { display: flex; }
.cookie-bar p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); flex: 1 1 260px; }
.cookie-bar .btn { padding: .6em 1.1em; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Mittelbreite Desktops: Header-Telefon ausblenden, damit die
   7 Menüpunkte + CTA passen (Telefon bleibt in USP-Leiste/Dock/Footer). */
@media (max-width: 1340px) { .header-phone { display: none; } }

/* Navigation wechselt bereits ab 1180px in den Burger: Menüpunkte + Telefon +
   CTA-Button würden auf schmaleren Desktops sonst mit dem Header kollidieren.
   Das Layout (Hero, Grids) bleibt bis 920px im Desktop-Modus. */
@media (max-width: 1180px) {
  .nav-burger { display: block; }
  /* backdrop-filter macht den Header zum Containing Block fuer position:fixed.
     Dadurch klappte das Off-Canvas-Menue auf Header-Hoehe zusammen. Auf Mobile
     deshalb ohne Blur und mit deckendem Hintergrund. */
  .site-header { backdrop-filter: none; background: #fff; }
  .header-phone { display: none; }
  .brand__logo { height: 44px; }
  .header-actions { gap: .5rem; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
    display: block; align-items: stretch;          /* sonst zentriert der Flex-Default die Liste vertikal */
    background: #fff; border-left: 1px solid var(--c-line); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .28s var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
    /* Startet unter der Kopfzeile, egal ob die USP-Leiste schon weggescrollt ist */
    padding: calc(var(--header-h) + 3.4rem) 1rem 1.6rem;
  }
  /* Logo und Burger bleiben ueber dem Off-Canvas-Panel bedienbar */
  .brand, .header-actions { position: relative; z-index: 2; }
  body.nav-open .main-nav { transform: translateX(0); }
  body.nav-open .nav-burger span { background: transparent; }
  body.nav-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .nav-burger span::after { top: 0; transform: rotate(-45deg); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .main-nav a { padding: .85rem .7rem; font-size: 1rem; justify-content: space-between; }
  .has-dropdown > a::after { margin-left: auto; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: none; border-left: 2px solid var(--c-line); border-radius: 0; margin: 0 0 .4rem .8rem;
    padding: 0; max-height: 0; overflow: hidden; transition: max-height .25s var(--ease);
  }
  .has-dropdown.is-open > .dropdown { max-height: 460px; }
  .nav-overlay { position: fixed; inset: 0; background: rgba(20,23,28,.4); opacity: 0; visibility: hidden; transition: .25s; z-index: 55; }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
}
@media (max-width: 920px) {
  :root { --header-h: 66px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16/10; order: -1; }
  .pagehead__grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; }
  .trustbar__inner { justify-content: flex-start; }
}

/* Touch: Fingerziele auf mindestens 44px bringen (Footer-Spalten, Breadcrumb, LinkedIn) */
@media (hover: none) and (pointer: coarse) {
  .footer-col ul { gap: 0; }
  .footer-col li + li { border-top: 1px solid rgba(255,255,255,.08); }
  .footer-col a { display: block; padding-block: .62rem; }
  .footer-bottom nav { gap: .2rem 1.2rem; }
  .footer-bottom nav a { display: inline-block; padding-block: .6rem; }
  .breadcrumb { gap: .2rem .4rem; }
  .breadcrumb a { display: inline-block; padding-block: .5rem; }
  .li-link { padding: .62rem; margin: -.62rem; }
  .cvd__links a { padding-block: .5rem; }
  /* Eigenstaendige Aktionslinks und Chips als Fingerziele, Fliesstext-Links bleiben unberuehrt */
  a.link-arrow { padding-block: .45rem; }
  .taglist a, .wschips a { padding-block: .55rem; }
  .article__meta a, .story-toc a { padding-block: .4rem; }
}
@media (max-width: 460px) {
  .header-actions .btn--accent { display: none; }  /* Anfrage steckt im Menü + CTA-Bändern */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Reveal-on-scroll (progressiv, ohne JS sichtbar) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   WARM / DE-AI POLITUR (Deck-treu + Familienbetrieb-Wärme)
   ===================================================================== */
/* Serifen-Zitate = Wärme/Editorial */
.quote blockquote, .article__pull { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; }
.quote blockquote { font-style: normal; }
/* Persönliche Signatur der Geschäftsführung */
.gf-signature { font-size: 1.35rem; font-weight: 700; font-style: italic; letter-spacing: -.01em; line-height: 1.2; color: var(--c-accent-deep); display: inline-block; margin: .2rem 0 .1rem; }
/* Tabular-Ziffern für Zahlen/Specs */
.hero__trust-item strong, .stat b, .specs td, .refcard__meta span, .card__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* Conversion-Dock entschärfen (kein Chatbot-Puls) */
.cvd__fab-pulse { display: none; }
/* Echte Line-Icons (Inline-SVG, currentColor) statt Emoji */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__icon .ic { width: 26px; height: 26px; }
.cvd__ico .ic, .cta-band .ic { width: 20px; height: 20px; }

/* =====================================================================
   RECHTS-/TEXTSEITEN — 2-Spalten (Inhalt + Sidebar) statt schmaler Streifen
   ===================================================================== */
.legal-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.legal-main { max-width: 72ch; }
.legal-main > h2 { margin-top: 2.2rem; }
.legal-main > h2:first-child { margin-top: 0; }
.legal-aside { position: sticky; top: calc(var(--header-h) + 1.2rem); display: grid; gap: 1.2rem; }
.legal-nav { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .3rem; }
.legal-nav a { display: block; padding: .55rem .8rem; border-radius: 0; font-weight: 600; font-size: .92rem; color: var(--c-ink-soft); }
.legal-nav a:hover { background: var(--c-surface); color: var(--c-accent-deep); }
.legal-nav a[aria-current="page"] { background: var(--c-surface); color: var(--c-ink); font-weight: 700; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } .legal-aside { position: static; } }

/* =====================================================================
   STORY-LAYOUT — 2-spaltig mit sticky Sidebar + Inhaltsverzeichnis
   ===================================================================== */
/* TOC links (fix: Dock bleibt rechts, keine Überlappung), Artikel rechts */
.story-layout { display: grid; grid-template-columns: 258px minmax(0,1fr); gap: clamp(2rem,4vw,3.6rem); align-items: start; }
.story-layout .article { max-width: 72ch; margin: 0; }
.story-layout .article h2 { scroll-margin-top: calc(var(--header-h) + 20px); }
.story-layout .article > .note-placeholder { font-size: .84rem; padding: .55rem .9rem; }
.story-aside { position: sticky; top: calc(var(--header-h) + 1.4rem); order: -1; display: grid; gap: 1.3rem; }
/* Inhaltsverzeichnis als dezente Karte */
.story-toc { padding: 1.1rem 1.2rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0; }
.story-toc__title { font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink-faint); margin: 0 0 .8rem; }
.story-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.story-toc li { counter-increment: toc; }
.story-toc a { display: flex; gap: .55rem; padding: .4rem .5rem; margin: 0 -.5rem; border-radius: 0; font-size: .86rem; font-weight: 600; color: var(--c-ink-soft); line-height: 1.35; transition: color .15s, background .15s; }
.story-toc a::before { content: counter(toc,decimal-leading-zero); color: var(--c-ink-faint); font-weight: 800; flex: none; font-size: .8rem; }
.story-toc a:hover { color: var(--c-accent-deep); background: #fff; }
.story-toc a.is-active { color: var(--c-accent-deep); background: #fff; }
.story-toc a.is-active::before { color: var(--c-accent); }
/* Sticky Conversion-CTA in der Sidebar (füllt den Platz, treibt Anfragen) */
.story-side-cta { padding: 1.35rem; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: none; }
.story-side-cta__k { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); font-weight: 800; color: var(--c-accent-deep); margin: 0 0 .5rem; }
.story-side-cta__k .ic { width: 14px; height: 14px; }
.story-side-cta__t { font-size: 1rem; font-weight: 700; color: var(--c-ink); margin: 0 0 1rem; line-height: 1.3; font-family: var(--font-head); }
.story-side-cta .btn { width: 100%; }
.story-side-cta__call { display: block; text-align: center; margin-top: .7rem; font-size: .85rem; font-weight: 700; color: var(--c-accent-deep); }
.story-side-cta__call:hover { color: var(--c-ink); }
/* Author-Box (E-E-A-T) am Ende des Artikels */
.author-box { display: flex; gap: 1.3rem; align-items: center; margin: 3rem 0 0; padding: 1.5rem 1.6rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0; position: relative; overflow: hidden; }
.author-box__photo { width: 76px; height: 76px; border-radius: 0; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: var(--shadow-md); }
.author-box__photo--initials { display: grid; place-items: center; background: var(--c-dark); color: #fff; font-weight: 800; font-size: 1.4rem; }
.author-box__label { font-size: var(--fs-xs); font-weight: 800; color: var(--c-accent-deep); }
.author-box b { display: block; font-size: 1.15rem; margin: .1rem 0 .05rem; font-family: var(--font-head); }
.author-box__role { font-size: var(--fs-sm); color: var(--c-ink-faint); font-weight: 600; }
.author-box p { margin: .55rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--c-ink-soft); max-width: 70ch; }
@media (max-width: 900px) {
  .story-layout { grid-template-columns: 1fr; }
  .story-aside { position: static; }
  .story-toc { display: none; }
}

/* =====================================================================
   USP-LEISTE (seitenweit, über dem Header) — Zusagen aus Kundensicht
   ===================================================================== */
.usp-bar { background: var(--c-dark); color: var(--c-dark-ink); font-size: .82rem; }
.usp-bar__inner { display: flex; align-items: center; gap: 1.6rem; min-height: 42px; }
.usp-bar .usp { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 600; }
.usp-bar .usp .ic { width: 17px; height: 17px; color: var(--c-accent); stroke-width: 2.1; flex: none; }
.usp-bar .usp b { font-weight: 700; }
.usp-bar .usp span { color: var(--c-dark-soft); font-weight: 500; }
.usp-bar .usp--phone { margin-left: auto; color: #fff; }
.usp-bar .usp--phone:hover { color: var(--c-accent); }
@media (max-width: 1400px) { .usp-bar .usp span { display: none; } }  /* Nutzen-Zusatz weg, damit alles + CTA passt */
@media (max-width: 980px) {
  .usp-bar { position: relative; }
  /* Weiche Kante rechts als Hinweis, dass die Leiste horizontal weitergeht */
  .usp-bar::after { content: ""; position: absolute; inset-block: 0; right: 0; width: 34px; pointer-events: none;
    background: linear-gradient(90deg, rgba(26,26,26,0), var(--c-dark)); }
  .usp-bar__inner { overflow-x: auto; gap: 1.3rem; scrollbar-width: none; -ms-overflow-style: none; padding-block: .4rem;
    scroll-snap-type: x proximity; padding-right: 2.2rem; }
  .usp-bar .usp { scroll-snap-align: start; }
  .usp-bar__inner::-webkit-scrollbar { display: none; }
  .usp-bar .usp span { display: none; }        /* auf schmal nur die Kernaussage */
  .usp-bar .usp--phone { margin-left: 0; }
}

/* =====================================================================
   STICKY CONVERSION-DOCK (auf allen Seiten) — Anrufen · STEP-Upload · Anfrage
   Immer persönlich: mit Foto von Lucas Bethke. Desktop = Kärtchen unten rechts
   (einklappbar), Mobil = feste Bottom-Bar.
   ===================================================================== */
.cvd { position: fixed; z-index: 65; right: 1.25rem; bottom: 1.25rem; width: 320px; max-width: calc(100vw - 2rem);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s; }
/* Erst nach dem ersten Scrollen einblenden (Klasse setzt main.js, ohne JS bleibt das Dock sichtbar) */
.cvd.is-hidden { opacity: 0; transform: translateY(24px); visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.cvd__avatar { width: 46px; height: 46px; border-radius: 0; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); flex: none; }
.cvd__panel { background: #fff; border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-lg); overflow: hidden; }
.cvd__head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.cvd__who b { display: block; font-weight: 800; font-size: .95rem; line-height: 1.2; }
.cvd__who span { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.cvd__min { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--c-line); background: #fff; border-radius: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--c-ink-faint); flex: none; }
.cvd__min:hover { color: var(--c-ink); border-color: var(--c-ink); }
.cvd__actions { display: grid; gap: .5rem; padding: .8rem; }
.cvd__btn { display: flex; align-items: center; gap: .6rem; padding: .68rem .8rem; border-radius: 0; border: 1px solid var(--c-line); background: #fff; font: inherit; font-weight: 700; font-size: .9rem; color: var(--c-ink); cursor: pointer; text-align: left; width: 100%; transition: border-color .15s, background .15s, transform .15s; }
.cvd__btn:hover { border-color: var(--c-accent); background: var(--c-accent-tint); transform: translateY(-1px); }
.cvd__btn--primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); justify-content: center; }
.cvd__btn--primary:hover { background: var(--c-accent-deep); }
.cvd__ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 0; background: var(--c-surface); color: var(--c-accent-deep); font-size: 1rem; flex: none; }
.cvd__btn--primary .cvd__ico { background: rgba(255,255,255,.22); color: #fff; }
/* Einklapp-FAB (nur Desktop, wenn collapsed) */
.cvd__fab { display: none; margin-left: auto; width: 62px; height: 62px; border-radius: 0; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-lg); cursor: pointer; padding: 0; position: relative; place-items: center; }
.cvd__fab .cvd__avatar { width: 54px; height: 54px; border: none; }
.cvd__fab-pulse { position: absolute; inset: -3px; border-radius: 0; border: 2px solid var(--c-accent); opacity: 0; animation: cvdPulse 2.6s var(--ease) infinite; }
@keyframes cvdPulse { 0% { opacity: .55; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.22); } }
.cvd.is-collapsed { width: auto; }
.cvd.is-collapsed .cvd__panel { display: none; }
.cvd.is-collapsed .cvd__fab { display: grid; }
/* Sprechblase neben dem zugeklappten Dock */
.cvd__bubble { display: none; position: relative; margin-right: .9rem; padding: .7rem .95rem; max-width: 230px;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-lg); font: inherit; font-size: .88rem;
  line-height: 1.4; color: var(--c-ink-soft); text-align: left; cursor: pointer; animation: cvdBubble .4s var(--ease) both; }
.cvd__bubble b { display: block; color: var(--c-ink); font-weight: 800; }
.cvd__bubble::after { content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: #fff; border-right: 1px solid var(--c-line); border-top: 1px solid var(--c-line); transform: rotate(45deg); }
.cvd__bubble:hover { border-color: var(--c-accent); }
.cvd__bubble:hover b { color: var(--c-accent-deep); }
.cvd.is-collapsed { display: flex; align-items: center; justify-content: flex-end; }
.cvd.is-collapsed .cvd__bubble { display: block; }
@keyframes cvdBubble { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
/* Sekundärlinks im Dock (Spritzgießerwechsel · Kontakt) */
.cvd__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0 .9rem .9rem; }
.cvd__links a { position: relative; font-size: .8rem; font-weight: 600; color: var(--c-ink-faint); }
.cvd__links a:hover { color: var(--c-accent-deep); }
.cvd__links a:first-child::after { content: "·"; position: absolute; right: -.65rem; color: var(--c-line); }

/* Quick-Anfrage-Overlay */
.cvd-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.cvd-modal.is-open { display: block; }
.cvd-modal__backdrop { position: absolute; inset: 0; background: rgba(20,23,28,.55); }
.cvd-modal__dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(480px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: 0; box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.cvd-modal__close { position: absolute; top: .8rem; right: .9rem; width: 34px; height: 34px; border: none; background: var(--c-surface); border-radius: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--c-ink-soft); }
.cvd-modal__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; padding-right: 2rem; }
.cvd-modal__head b { display: block; font-size: 1.05rem; }
.cvd-modal__head span { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.cvd-modal__form { display: grid; gap: .8rem; }

/* Mobil: Bottom-Bar statt Kärtchen */
@media (max-width: 720px) {
  :root { --dock-h: 80px; }   /* Hoehe der Bottom-Bar, haelt Seiteninhalt und Cookie-Leiste frei */
  .cvd, .cvd.is-collapsed { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; }
  .cvd__fab, .cvd.is-collapsed .cvd__fab, .cvd__bubble, .cvd.is-collapsed .cvd__bubble { display: none !important; }
  .cvd.is-collapsed { display: block; }
  .cvd.is-collapsed .cvd__panel { display: flex; }
  .cvd__panel { display: flex; align-items: center; border-radius: 0; border-bottom: none; box-shadow: 0 -6px 22px rgba(0,0,0,.13); }
  .cvd__head { padding: .5rem .2rem .5rem .6rem; border: none; background: transparent; align-self: stretch; }
  .cvd__who, .cvd__min { display: none; }
  .cvd__avatar { width: 36px; height: 36px; align-self: center; }
  /* Die Sekundaerlinks sind auf der Bottom-Bar ein dritter Flex-Block und haben sich
     mit den Buttons ueberlagert. Sie stehen ohnehin im Footer und in der Navigation. */
  .cvd__links { display: none; }
  .cvd__actions { flex: 1; grid-template-columns: repeat(4, 1fr); gap: .2rem; padding: .4rem .5rem .4rem 0; align-items: stretch; }
  .cvd__btn { flex-direction: column; gap: .2rem; padding: .3rem .1rem; font-size: .7rem; text-align: center; border: none; line-height: 1.15; min-height: 44px; justify-content: center; }
  .cvd__btn > span:last-child { display: block; width: 100%; hyphens: auto; hyphenate-limit-chars: 10 6 4; }
  .cvd__btn .only-wide { display: none; }   /* "STEP-Daten hochladen" wird auf der Bottom-Bar zu "STEP-Daten" */
  .cvd__btn:hover { transform: none; background: transparent; }
  .cvd__ico { width: 26px; height: 26px; font-size: 1.05rem; }
  .cookie-bar { bottom: calc(var(--dock-h) + .6rem); }
  body:has(.cvd.is-hidden) .cookie-bar { bottom: .6rem; }
  .cvd.is-hidden { transform: translateY(100%); }
  body { padding-bottom: var(--dock-h); }
  .cvd-modal__dialog { left: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 0; }
}

/* =========================================================================
   KOSTENRECHNER (Spritzguss-Kostenkalkulator) — Nachbau icotek.biz
   ========================================================================= */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.6rem; align-items: start; }
.calc__inputs { display: flex; flex-direction: column; gap: 1.1rem; }
.calc__output { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 90px; }

/* Eingabe-Karten */
.calc-card { background: #fff; border: 1px solid var(--c-line); border-radius: 0; padding: 1.5rem; box-shadow: var(--shadow-sm); }
.calc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.calc-card__title { display: flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--c-ink); }
.calc-card__title .ic { width: 20px; height: 20px; color: var(--c-accent); flex: none; }

/* Bauteilgewicht: Zahl + Einheit + Slider */
.calc-weight { display: flex; align-items: baseline; gap: .35rem; }
.calc-weight input { width: 5.5rem; text-align: right; font-family: var(--font); font-weight: 800; font-size: 1.35rem; color: var(--c-accent);
  border: none; border-bottom: 2px solid var(--c-line); background: transparent; padding: 0 .1rem .15rem; }
.calc-weight input:focus { outline: none; border-bottom-color: var(--c-accent); }
.calc-weight span { color: var(--c-ink-faint); font-weight: 600; }
.calc-range { width: 100%; margin-top: 1rem; accent-color: var(--c-accent); cursor: pointer; }
.calc-range-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--c-ink-faint); margin-top: .45rem; }

/* Werkzeug & Stückzahl */
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.calc-field label { display: block; font-size: .72rem; font-weight: 600; color: var(--c-ink-faint); margin-bottom: .5rem; }
.calc-field__wrap { position: relative; }
.calc-field input { width: 100%; padding: .7rem .85rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0;
  font-family: var(--font); color: var(--c-ink-soft); font-size: 1rem; }
.calc-field input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-tint); }
.calc-field__unit { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--c-ink-faint); font-weight: 600; pointer-events: none; }
.calc-field input.has-unit { padding-right: 2rem; }
.calc-field__hint { font-size: .72rem; line-height: 1.4; color: var(--c-ink-faint); margin: .55rem 0 0; }

/* Materialauswahl */
.calc-mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.calc-mat { text-align: left; padding: .85rem 1rem; border: 2px solid var(--c-line); border-radius: 0;
  background: #fff; cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.calc-mat:hover { border-color: var(--c-surface-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.calc-mat.is-active { border-color: var(--c-accent); background: var(--c-accent-tint); box-shadow: 0 0 0 3px var(--c-accent-tint); }
.calc-mat__short { display: block; font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.calc-mat.is-active .calc-mat__short { color: var(--c-accent); }
.calc-mat__name { display: block; font-size: .76rem; color: var(--c-ink-faint); margin-top: .15rem; }

/* Ergebnis-Panel (dunkel) */
.calc-result { background: var(--c-dark); color: var(--c-dark-ink); border-radius: 0; padding: 1.8rem; box-shadow: var(--shadow-md); }
.calc-result__label { font-size: .74rem; color: var(--c-dark-soft); font-weight: 600; margin: 0 0 1.4rem; }
.calc-block { margin-bottom: 1.5rem; }
.calc-block__title { font-size: .68rem; color: var(--c-dark-soft); font-weight: 700; margin: 0 0 .8rem; }
.calc-row { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: .55rem; margin-bottom: .55rem; border-bottom: 1px solid var(--c-dark-line); }
.calc-row__key { color: var(--c-dark-soft); font-size: .9rem; }
.calc-row__sub { display: block; font-family: var(--font); font-size: .72rem; opacity: .65; margin-top: .1rem; }
.calc-row__val { font-family: var(--font); font-size: .92rem; color: var(--c-dark-ink); white-space: nowrap; }
.calc-subtotal { display: flex; justify-content: flex-end; gap: .6rem; font-size: .78rem; color: var(--c-dark-soft); margin-top: .2rem; }
.calc-subtotal b { color: var(--c-dark-ink); font-weight: 600; }

/* Werkzeuganteil (hervorgehoben) */
.calc-moldshare { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.07); padding: .9rem 1rem; }
.calc-moldshare__key { font-size: .82rem; font-weight: 700; color: #fff; }
.calc-moldshare__calc { display: flex; flex-wrap: wrap; gap: .35rem; font-family: var(--font); font-size: .72rem; color: var(--c-dark-soft); margin-top: .2rem; }
.calc-moldshare__val { font-family: var(--font); font-size: 1.15rem; color: var(--c-accent); white-space: nowrap; font-weight: 600; }
.calc-warn { font-size: .74rem; font-style: italic; color: #f2c14e; margin: .5rem 0 0; }

/* Gesamtpreis */
.calc-total { border-top: 1px solid var(--c-dark-line); padding-top: 1.4rem; margin-top: 1.5rem; }
.calc-total__label { font-size: .82rem; color: var(--c-dark-soft); margin: 0 0 .3rem; }
.calc-total__value { display: flex; align-items: baseline; gap: .5rem; }
.calc-total__value b { font-family: var(--font); font-size: 3rem; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.02em; }
.calc-total__value span { font-size: 1.4rem; color: var(--c-dark-soft); font-weight: 400; }
.calc-total__note { font-size: .72rem; color: var(--c-dark-soft); margin: .5rem 0 0; }

/* Materialdetails-Karte */
.calc-matdetails__head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 700; color: var(--c-ink); margin: 0 0 .7rem; }
.calc-matdetails__head .ic { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.calc-matdetails__desc { font-size: .9rem; color: var(--c-ink-soft); line-height: 1.5; margin: 0 0 1.2rem; }
.calc-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.calc-spec { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0; padding: .65rem .7rem; }
.calc-spec span { display: block; font-size: .64rem; font-weight: 700; color: var(--c-ink-faint); margin-bottom: .25rem; }
.calc-spec b { font-family: var(--font); font-size: .82rem; font-weight: 700; color: var(--c-ink-soft); }
.calc-matdetails__proptitle { font-size: .7rem; font-weight: 700; color: var(--c-ink-faint); margin: 0 0 .55rem; }
.calc-proplist { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.calc-proplist li { background: var(--c-surface-2); color: var(--c-ink-soft); font-size: .76rem; font-weight: 600; padding: .25rem .6rem; border-radius: 0; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc__output { position: static; }
}
@media (max-width: 520px) {
  .calc-fields, .calc-mat-grid, .calc-specs { grid-template-columns: 1fr; }
  .calc-specs { grid-template-columns: repeat(3, 1fr); }
  .calc-total__value b { font-size: 2.4rem; }
}

/* LinkedIn-Link (Author-/GF-Element & Conversion-Dock) */
/* LinkedIn-Link: nur kleines Icon, Text-Label ("LinkedIn") per font-size:0 ausgeblendet. */
.li-link{ display:inline-flex; align-items:center; gap:0; color:#0A66C2; font-weight:700;
  font-size:0; text-decoration:none; line-height:1; }
.gf-card__figure .li-link{ margin-top:10px; }
.li-link svg{ width:15px; height:15px; display:block; flex:0 0 auto; }
.li-link:hover{ text-decoration:underline; }
.li-link:focus-visible{ outline:2px solid #0A66C2; outline-offset:2px; border-radius: 0; }
.cvd__who .li-link{ display:flex; width:max-content; margin-top:6px; font-size:0; }
.cvd__who .li-link--sm svg{ width:13px; height:13px; }

/* =====================================================================
   BILDPAAR (Erklaerbilder auf Leistungsseiten)
   Zwei Bilder nebeneinander. Die Passepartout-Flaeche traegt exakt den
   Off-White der Renderings (#ede1d7), dadurch braucht es keinen Rahmen
   und das Motiv bekommt Luft, statt in einem Kasten zu sitzen.
   ===================================================================== */
.figure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.8rem; margin: 0; }
.figure-grid figure { margin: 0; }
/* Kein Passepartout: die Renderings haben leicht verschiedene Hintergruende
   (#e7ddd3 bis #f1e4db), eine gemeinsame Flaeche wuerde als Rahmen sichtbar. */
.figure-grid__media { line-height: 0; }
.figure-grid__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
/* contain statt cover: die Flaeche hat exakt den Bildhintergrund, dadurch entsteht kein
   sichtbarer Rand, aber kein Motiv wird angeschnitten, auch bei abweichendem Seitenverhaeltnis. */
.figure-grid figcaption { margin-top: .85rem; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.55; }
.figure-grid figcaption b { color: var(--c-ink); font-weight: 700; }
@media (max-width: 760px) { .figure-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Vergleichstabelle (drei Spalten). Die Basis-.specs ist fuer zweispaltige
   Merkmal/Wert-Listen gebaut: erste Spalte 42 % und getoent. Beim Vergleich
   zweier Verfahren braucht es stattdessen eine schmale Label-Spalte, zwei
   gleich breite Datenspalten und eine Kopfzeile, die sich ueber Linie und
   Schriftschnitt abhebt statt ueber eine Flaeche. */
.specs--compare th:first-child { width: 22%; }
.specs--compare thead th { background: transparent; color: var(--c-ink); border-bottom: 2px solid var(--c-ink); }
.specs--compare tbody th { background: transparent; }
.specs--compare thead th + th,
.specs--compare tbody th + td,
.specs--compare tbody td + td { border-left: 1px solid var(--c-line); }
.specs--compare tbody tr:nth-child(even) th,
.specs--compare tbody tr:nth-child(even) td { background: var(--c-surface); }

/* =====================================================================
   TEXTRASTER (Leistungsseiten)
   .wrap ist 1200 px, Fliesstext aber auf --measure (42rem) begrenzt.
   Reine Textabschnitte liessen dadurch ueber 400 px rechts leer stehen.
   Das Raster stellt die Ueberschrift bzw. eine kurze Marginalie links
   daneben, dadurch traegt die Flaeche und die Zeilenlaenge bleibt lesbar.
   ===================================================================== */
.prose-split { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.2rem 3.5rem; align-items: start; }
.prose-split__head { position: sticky; top: 6.5rem; }
/* In der schmalen Randspalte braucht die Ueberschrift Silbentrennung und
   eine eigene, kleinere Stufe. Deutsche Komposita wie "Kunststoffspritzguss"
   sind bei voller H2-Groesse breiter als die Spalte und liefen in den
   Fließtext daneben. lang="de" steht im html-Tag, hyphens greift also. */
.prose-split__head h2, .prose-split__head h3,
.section-head--split h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.prose-split__head h2, .section-head--split h2 { font-size: clamp(1.45rem, 2.15vw, 1.95rem); }
.prose-split__head h2, .prose-split__head h3 { margin: 0; }
.prose-split__head h3 { font-size: var(--fs-body); color: var(--c-ink); }
.prose-split__body > p { max-width: 40rem; color: var(--c-ink-soft); }
.prose-split__body > p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .prose-split { grid-template-columns: 1fr; gap: .9rem; }
  .prose-split__head { position: static; }
}

/* Abschnittskopf im selben Raster: H2 links, Lead rechts. Damit folgt die
   ganze Seite einem Prinzip, statt dass Koepfe schmal links auslaufen. */
.section-head--split { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.2rem 3.5rem; align-items: start; max-width: none; margin-bottom: 1.9rem; }
.section-head--split h2 { margin: 0; }
/* Der Lead darf hier die ganze Spalte fuellen. Er leitet ein breites Element
   ein (Tabelle, Karten, Bildpaar) und wirkt sonst als kurzer Rest neben der
   Ueberschrift. Der kleinere Abstand darunter bindet Kopf und Element
   zusammen, statt sie als zwei Bloecke auseinanderfallen zu lassen. */
.section-head--split .lead { margin: 0; max-width: none; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; gap: .8rem; } }

/* Kennzahlen in der Randspalte eines Textrasters. Vertikale Schwester von
   .stat (die Kennzahlenzeile im Seitenkopf). Zahl in Textfarbe
   statt Akzent, weil hier mehrere Bloecke uebereinander stehen und die Seite
   sonst rotlastig wird. Die Linie oben trennt Ueberschrift von Fakten, sie
   ist Struktur, keine Zierde. */
.side-facts { margin: 1.5rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--c-line); display: grid; gap: 1.15rem; }
.side-facts > div { display: block; }
.side-facts dt { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); line-height: 1.1; letter-spacing: -.02em; }
.side-facts dd { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--c-ink-faint); line-height: 1.45; }
.side-note { margin: 1.5rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.5; }
@media (max-width: 900px) {
  .side-facts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.1rem 1.8rem; }
}

/* =====================================================================
   PARTNERBAND (Forschungsprojekte: Konsortium + Förderhinweis)
   ===================================================================== */
.partnerband { border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line);
  padding: 1.5rem 0 1.3rem; margin: 2.6rem 0; }
.partnerband__k { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink);
  margin: 0 0 1.1rem; }
.partnerband__list { list-style: none; padding: 0; margin: 0 0 1.2rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.8rem; }
.partnerband__list li { display: flex; flex-direction: column; gap: .15rem;
  border-left: 1px solid var(--c-line); padding-left: .9rem; }
.partnerband__list b { font-size: 1rem; color: var(--c-ink); line-height: 1.25; }
.partnerband__list span { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.partnerband__fund { font-size: var(--fs-sm); color: var(--c-ink-faint); margin: 0;
  line-height: 1.5; max-width: 60ch; }
@media (max-width: 30rem) {
  .partnerband__list { grid-template-columns: 1fr; }
}

/* =====================================================================
   HERO-VARIANTEN (Stand 17.09.2026)
   Anlass: Detlev wünscht sich Kontrast statt reinem Weiß auf der Startseite,
   optional ein Video. Vier Varianten zum Vergleich, umschaltbar über das
   Panel oben rechts. VOR DEM LIVEGANG: Panel und die nicht gewählte
   Variante entfernen, data-hero fest setzen.
   ===================================================================== */
.hero--home { position: relative; }
.hero--home .hero__grid { position: relative; z-index: 1; }

.hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; display: none; }
.hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after { content: ""; position: absolute; inset: 0; }

/* --- 1 · Weiß (aktueller Stand) --- */
.hero--home[data-hero="weiss"] { background: linear-gradient(180deg, #fff 0%, var(--c-surface) 100%); }

/* --- 2 · Grau dezent: Kontrast zur weißen Seite, Text bleibt dunkel --- */
.hero--home[data-hero="grau"] {
  background: var(--grad-kopf);
  border-bottom: 1px solid var(--c-line);
}

/* --- 3 · Grau wie die alte Website: Verlauf hell nach dunkel, Text hell --- */
.hero--home[data-hero="grau-alt"] {
  background: linear-gradient(180deg, #b0b0ad 0%, #6b6360 38%, #2f2927 100%);
}

/* --- 4 · Video: Produktionsaufnahme, abgedunkelt --- */
.hero--home[data-hero="video"] { background: #1a1a1a; }
.hero--home[data-hero="video"] .hero__bg { display: block; }
.hero--home[data-hero="video"] .hero__bg::after {
  background:
    linear-gradient(90deg, rgba(16,16,16,.86) 0%, rgba(16,16,16,.55) 48%, rgba(16,16,16,.18) 100%),
    linear-gradient(180deg, rgba(16,16,16,.34) 0%, rgba(16,16,16,.12) 42%, rgba(16,16,16,.5) 100%);
}

/* --- Gemeinsame Textbehandlung der dunklen Varianten --- */
.hero--home[data-hero="grau-alt"] .hero__title,
.hero--home[data-hero="video"] .hero__title { color: #fff; }
.hero--home[data-hero="grau-alt"] .hero__sub,
.hero--home[data-hero="video"] .hero__sub { color: rgba(255,255,255,.88); }
.hero--home[data-hero="grau-alt"] .hero__trust-item,
.hero--home[data-hero="video"] .hero__trust-item { color: rgba(255,255,255,.82); }
.hero--home[data-hero="grau-alt"] .hero__title .u-gold,
.hero--home[data-hero="video"] .hero__title .u-gold { color: #ff2b3a; }
.hero--home[data-hero="grau-alt"] .hero__trust-item strong,
.hero--home[data-hero="video"] .hero__trust-item strong { color: #ff2b3a; }
.hero--home[data-hero="grau-alt"] .btn--ghost,
.hero--home[data-hero="video"] .btn--ghost {
  --btn-fg: #fff; border-color: rgba(255,255,255,.45);
}
.hero--home[data-hero="grau-alt"] .btn--ghost:hover,
.hero--home[data-hero="video"] .btn--ghost:hover { border-color: #fff; }
/* Der Award-Kasten bringt seinen eigenen weissen Grund mit und behaelt
   deshalb in allen Varianten seine dunkle Schrift. Nur der Rand wird auf
   dunklem Untergrund zurueckgenommen, damit die Kante nicht hart wirkt. */
.hero--home[data-hero="grau-alt"] .hero-award,
.hero--home[data-hero="video"] .hero-award { border-color: rgba(255,255,255,.25); }

/* --- Das Testpanel selbst --- */
.hero-switch {
  position: fixed; top: .6rem; right: .6rem; z-index: 999;
  display: flex; align-items: center; gap: .35rem;
  background: rgba(26,26,26,.93); color: #fff;
  padding: .4rem .45rem; font-size: 12px; line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.hero-switch__label {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: 9.5px; color: #ff6b75; padding: 0 .3rem 0 .2rem;
}
.hero-switch button {
  font: inherit; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid transparent;
  padding: .38rem .55rem; border-radius: 0;
}
.hero-switch button:hover { background: rgba(255,255,255,.24); }
.hero-switch button[aria-pressed="true"] { background: #e30613; border-color: #ff6b75; }
.hero-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 900px) { .hero-switch { top: auto; bottom: .5rem; right: .5rem; } }
@media print { .hero-switch { display: none; } }

/* Kundenlogos in der Trustbar (04.09.2026, im Termin freigegeben).
   Graustufe hält die Leiste ruhig, bei Hover die Markenfarbe. */
.client-logo {
  height: 34px; width: auto; max-width: 160px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .2s var(--ease), opacity .2s var(--ease);
}
.client-logo--wide { max-width: 185px; }
.client-logo:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 700px) { .client-logo { height: 26px; } }

/* Abgrenzungszeile im Branchen-Hero (Medizintechnik, 04.09.2026).
   Bewusst ruhig gesetzt: eine Einschränkung wird nicht wie eine Kennzahl gefeiert. */
.hero-abgrenzung {
  margin-top: 1.1rem; padding-left: .9rem;
  border-left: 2px solid var(--c-accent);
  font-size: var(--fs-sm); color: var(--c-ink-soft); max-width: 48ch;
}

/* Branchenleiste einzeilig (10.09.2026).
   Acht Chips plus Label passen nur knapp in die Containerbreite, deshalb ab
   1240px kompaktere Typo und feste Einzeiligkeit. Darunter darf sie umbrechen. */
@media (min-width: 1240px) {
  .trustbar--industries .trustbar__inner { flex-wrap: nowrap; gap: 1rem 1.5rem; }
  .trustbar--industries .trustbar__label { white-space: nowrap; }
  .trustbar--industries .trustbar__logos { flex-wrap: nowrap; gap: .6rem 1.15rem; }
  .trustbar--industries .industry-chip { font-size: .88rem; gap: .35rem; white-space: nowrap; }
  .trustbar--industries .industry-chip__icon { width: 18px; height: 18px; }
}

/* Hervorgehobene Textkaesten im Artikel (10.09.2026, Ratgeber Werkzeugverlagerung).
   Bewusst ohne Farbbalken: die Unterscheidung laeuft ueber Rahmen und Flaeche,
   damit die Seite ruhig bleibt. --fact traegt den Referenzbeleg, --limit die
   Abgrenzung zu Normen, die icotek nicht hat. */
.callout { border: 1px solid var(--c-line); background: var(--c-surface);
  padding: 1.15rem 1.35rem; margin: 1.8rem 0; }
.callout p { margin: 0; }
.callout--fact { border: 2px solid var(--c-ink-soft); background: #fff; }
.callout--limit { background: var(--c-surface); }

/* .checklist hat margin:0, damit klebt im Fliesstext der folgende Absatz am
   letzten Listenpunkt. Betrifft alle Ratgeberseiten. Nur im Artikel gefixt,
   damit die Kompaktheit auf den Branchen- und Leistungsseiten erhalten bleibt. */
.article .checklist { margin-block: 1.3rem 1.6rem; }

/* =====================================================================
   HERO-SLIDER (Version 2, Demo auf index-hero-v2.html)
   Wunsch aus dem Jour fixe 17.09.2026: rollierende Bauteilbilder im Kopf
   der Startseite. Bewusst leichtgewichtig gehalten, weil grosse Slider
   PageSpeed kosten: freigestellte WebP, nur ein Bild eager, Rest lazy,
   Ueberblendung per opacity statt Layoutwechsel.
   ===================================================================== */
.heroslider { width: 100%; display: flex; flex-direction: column; gap: 1rem; }

/* Buehne: alle Slides uebereinander, feste Hoehe verhindert Springen (CLS) */
.heroslider__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.heroslide { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .55s ease, transform .55s ease; transform: scale(.985); }
.heroslide.is-active { opacity: 1; visibility: visible; transform: none; }
.heroslide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  /* Zwei Schatten: der enge zeichnet die Kante nach, damit auch weisse Bauteile
     sich vom hellgrauen Kopf abheben, der weite laesst das Teil schweben. */
  filter: drop-shadow(0 2px 3px rgba(20,23,28,.20)) drop-shadow(0 26px 26px rgba(20,23,28,.20)); }

/* Info-Karte: wechselt mit dem Bild. Gleiche Optik wie .hero-award, damit der
   Red-Dot-Hinweis beim Smart Case unveraendert wirkt. */
.heroslider__infos { position: relative; min-height: 92px; }
/* Etwas mehr Zeilenbreite als bei .hero-award, sonst brechen die Bauteiltexte zu frueh */
.heroinfo > span { max-width: 34ch; }
.heroinfo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.heroinfo.is-active { opacity: 1; visibility: visible; }
.heroinfo__tag { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink);
  font-weight: 900; font-size: .95rem; letter-spacing: .01em; }

/* Steuerung */
.heroslider__nav { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.heroslider__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: #fff; color: var(--c-ink-soft);
  cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.heroslider__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.heroslider__arrow:hover { border-color: var(--c-accent); color: var(--c-accent); }
.heroslider__arrow:active { transform: scale(.94); }
.heroslider__dots { display: flex; align-items: center; gap: .5rem; }
.heroslider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-surface-2); transition: background .2s ease, width .2s ease; }
.heroslider__dot:hover { background: var(--c-ink-faint); }
.heroslider__dot.is-active { background: var(--c-accent); width: 26px; border-radius: 5px; }
.heroslider__arrow:focus-visible, .heroslider__dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (max-width: 860px) {
  .heroslider__stage { aspect-ratio: 5 / 4; }
  .heroslider__infos { min-height: 96px; }
}

/* Wer Bewegung reduziert haben moechte, bekommt harte Schnitte statt Ueberblendung.
   Der Autoplay wird zusaetzlich im Skript abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  .heroslide, .heroinfo { transition: none; }
  .heroslide { transform: none; }
}

/* Slide-Variante Bildkachel: Motive, die von ihrem eigenen Studiohintergrund leben,
   werden nicht freigestellt, sondern formatfuellend in gerundetem Rahmen gezeigt. */
.heroslide--tile img { width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; border-radius: 14px; filter: none; box-shadow: var(--shadow-md); }

/* Vergleichsansicht: die nicht gewaehlte Kopfvariante bleibt im DOM, aber unsichtbar. */
.hero[hidden] { display: none; }

/* =====================================================================
   SEITENSUCHE (Lupe im Header + Overlay, Logik in main.js)
   ===================================================================== */
.header-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-ink);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.header-search:hover, .header-search:focus-visible { border-color: var(--c-ink); color: var(--c-accent); }
.header-search .ic { width: 20px; height: 20px; }
.header-search__label { display: none; }
/* Breite Desktops: "Suche" ausgeschrieben, damit die Lupe nicht übersehen wird */
@media (min-width: 1440px) {
  .header-search { width: auto; gap: .45rem; padding: 0 .9rem; font: inherit; font-size: .95rem; font-weight: 600; }
  .header-search__label { display: inline; }
}
.site-search {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,26,26,.55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) 2rem;
}
.site-search[hidden] { display: none; }
body.search-open { overflow: hidden; }
.site-search__panel {
  width: min(680px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: #fff; box-shadow: var(--shadow-lg);
}
.site-search__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--c-line);
}
.site-search__bar > .ic { width: 22px; height: 22px; color: var(--c-ink-faint); flex-shrink: 0; }
.site-search__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.1rem; color: var(--c-ink);
}
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__close {
  border: 1px solid var(--c-line); background: var(--c-surface); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-faint);
  padding: .25rem .5rem;
}
.site-search__head {
  margin: 0; padding: .7rem 1.1rem .3rem; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-faint);
}
.site-search__head:empty { display: none; }
.site-search__results { list-style: none; margin: 0; padding: 0 0 .3rem; overflow-y: auto; }
.site-search__results:empty { display: none; }
.site-search__results li + li { border-top: 1px solid var(--c-line); }
.site-search__results a {
  display: block; padding: .8rem 1.1rem; color: inherit; text-decoration: none;
}
.site-search__results [aria-selected="true"] a { background: var(--c-surface); }
.site-search__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.site-search__title b { font-weight: 700; color: var(--c-ink); }
.site-search__title em { flex-shrink: 0; font-style: normal; font-size: var(--fs-xs); color: var(--c-ink-faint); }
.site-search__results [aria-selected="true"] b { color: var(--c-accent); }
.site-search__snip { display: block; margin-top: .2rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-soft); }
.site-search__results mark { background: var(--c-accent-tint); color: var(--c-accent-deep); font-weight: 600; }
.site-search__empty { padding: 1rem 1.1rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.site-search__hint {
  margin: 0; padding: .55rem 1.1rem; border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs); color: var(--c-ink-faint); background: var(--c-surface);
}
@media (max-width: 1180px) {
  .header-search { width: 42px; height: 42px; }
  .site-search { padding-top: 1rem; }
  .site-search__hint { display: none; }
}
/* Einzelne echte Kundenstimme statt zweier Spalten */
.quote--einzeln { max-width: 860px; }