/* ==========================================================================
   Euantos Designs – Design-System
   Schrift: Helvetica Neue, auf Geräten ohne Helvetica Neue die eigene Datei „Euantos Sans“
   Markenfarben: #008ED1 (Blau) / #1A1A1A (Anthrazit) / Weiß
   ========================================================================== */

/* --- Schrift ---------------------------------------------------------------
   Entscheidung Hendrik (14.10.): Die Schrift soll auf allen Geräten so aussehen
   wie auf Mac und iPhone (Helvetica Neue). Mac und iPhone nutzen weiter ihre
   eingebaute Helvetica Neue und laden nichts nach. Windows, Android und Linux
   haben keine Helvetica Neue; sie laden „Euantos Sans“ von unserem eigenen Server.
   Das ist TeX Gyre Heros (freie Helvetica-Nachbildung, GUST Font License,
   Lizenz in fonts/seite/LIZENZ.txt), reduziert auf lateinische Zeichen.
   Kein externer Schriftdienst, daher nichts für die Datenschutzerklärung. */
@font-face {
  font-family: 'Euantos Sans';
  src: url('/fonts/seite/euantos-sans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Euantos Sans';
  src: url('/fonts/seite/euantos-sans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Markenfarben */
  --color-primary: #008ED1;
  --color-primary-dark: #00699c;
  --color-primary-tint: #E6F5FC;
  --color-dark: #1A1A1A;
  --color-white: #FFFFFF;
  --color-bg-light: #F6F8FA;
  --color-border: #E4E8EC;
  --color-success: #1E8E5A;

  /* Typografie */
  --font-heading: 'Helvetica Neue', 'Euantos Sans', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', 'Euantos Sans', Helvetica, Arial, sans-serif;

  /* Abstände */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Sonstiges */
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(26, 26, 26, 0.06);
  --shadow-hover: 0 8px 30px rgba(0, 142, 209, 0.14);
  --max-width: 1200px;
  --transition: 200ms ease;
}

/* --- Reset & Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top: Header ist jetzt fixed (überlagert die Seite), daher
   müssen Sprungziele (#preise-Anker, scrollIntoView im Preistabellen-Toggle
   etc.) automatisch um die Header-Höhe versetzt werden, sonst verschwindet
   der Zielbereich teilweise dahinter. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
@media (hover: hover) {
  a:hover { text-decoration: underline; }
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: var(--color-dark);
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-sm); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section { padding: var(--space-2xl) 0; }
/* Kein Doppeltipp-Zoom auf Bedienelementen (Mobile) */
button, .btn, .filter-chip, input, select, label { touch-action: manipulation; }
.section-alt { background: var(--color-bg-light); }
/* Heller Blau-Verlauf (wie Ablauf-Bereich) – vor dunklen Bändern / Footer */
.section-tint { background: linear-gradient(180deg, var(--color-white) 0%, var(--color-primary-tint) 100%); }
.section-tint-rev { background: linear-gradient(180deg, var(--color-primary-tint) 0%, var(--color-white) 100%); }
/* Shop-Abschnitte: lange Produktlisten bleiben weiß, der Blauverlauf sitzt im Abschnitt davor */
.section-shop { background: var(--color-white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.section-head { max-width: 640px; margin: 0 auto var(--space-lg); text-align: center; }
.section-head p { color: #4a4a4a; }

/* --- Buttons -------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  text-decoration: none;
}
@media (hover: hover) {
  .btn:hover { text-decoration: none; transform: translateY(-2px); }
}
.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-hover); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--color-primary-dark); }
}
.btn-outline { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.6); }
@media (hover: hover) {
  .btn-outline:hover { background: rgba(255,255,255,0.12); }
}
.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
@media (hover: hover) {
  .btn-ghost:hover { background: var(--color-primary-tint); }
}
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* --- Header / Nav ----------------------------------------------------------*/
/* Der Header liegt jetzt ÜBER der Hero-Section (position: fixed statt
   sticky) und ist im Ruhezustand transparent – man sieht direkt den
   dunklen Hero-Verlauf durchscheinen, kein harter weiß/dunkel-Schnitt mehr.
   Sobald gescrollt wird, schaltet main.js die Klasse .is-scrolled dazu und
   der Header wird solide weiß (wie vorher). Logo, Nav-Links, Burger-Icon
   wechseln passend die Farbe mit (siehe Regeln unten).
   Da .hero/.page-hero jetzt UNTER dem fixed Header beginnen, bekommen sie
   zusätzliches padding-top in Höhe des Headers (siehe --header-height
   weiter unten bei .hero/.page-hero), damit der Inhalt nicht verdeckt wird
   – der farbige Hintergrund selbst reicht aber bewusst bis ganz nach oben
   durch, das ist ja der Trick. */
.site-header {
  /* Kein backdrop-filter hier: filter/backdrop-filter auf einem Vorfahren
     macht ihn zum containing block für "position: fixed"-Kindelemente
     (hier: das mobile Menü .nav-links) – das Menü würde dann nur auf
     Header-Höhe begrenzt statt den ganzen Bildschirm zu füllen. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo img {
  height: 34px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--color-white);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.site-header.is-scrolled .nav-links a { color: var(--color-dark); }
@media (hover: hover) {
  .nav-links a:hover { color: var(--color-primary); text-decoration: none; }
}
.nav-cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav-cta .btn-ghost { color: var(--color-white); border-color: rgba(255, 255, 255, 0.65); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
@media (hover: hover) {
  .nav-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
}
.site-header.is-scrolled .nav-cta .btn-ghost { color: var(--color-primary); border-color: var(--color-primary); }
@media (hover: hover) {
  .site-header.is-scrolled .nav-cta .btn-ghost:hover { background: var(--color-primary-tint); }
}
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-white); margin: 5px 0; transition: background 0.3s ease, transform var(--transition); }
.site-header.is-scrolled .nav-toggle span { background: var(--color-dark); }

@media (max-width: 900px) {
  /* Header ist jetzt fixed (nicht mehr sticky) und immer ~76px hoch –
     das mobile Menü hängt sich per Klasse .nav-links-open (main.js setzt
     sie zusätzlich, sobald das Menü offen ist) an is-scrolled, damit Logo/
     Links auch bei geöffnetem Menü über transparentem Header lesbar bleiben. */
  .nav-links { position: fixed; inset: var(--nav-top, 72px) 0 0 0; background: var(--color-white); flex-direction: column; padding: var(--space-lg) var(--space-md); gap: var(--space-md); transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  /* Im geöffneten Mobile-Menü ist der Panel-Hintergrund immer weiß, also
     müssen Links/Header hier unabhängig vom Scroll-Status dunkel bleiben. */
  .nav-links a { color: var(--color-dark); }
  .site-header:has(.nav-links.open) { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--color-border); }
  .site-header:has(.nav-links.open) .nav-toggle span { background: var(--color-dark); }
  .nav-toggle { display: block; }
  .nav-cta .btn-ghost { display: none; }
}

/* --- Hero ------------------------------------------------------------------*/
.hero {
  background: linear-gradient(135deg, var(--color-dark) 0%, #262f36 55%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  /* +76px oben: Header liegt jetzt fixed über dem Hero, der Hintergrund
     reicht bewusst bis unter den Header, aber der Inhalt (H1 etc.) soll
     nicht darunter versteckt sein. Der restliche Abstand (2rem statt vorher
     6rem) ist bewusst knapper als vor der Umstellung auf den transparenten
     Header: früher lag direkt eine harte Kante zum weißen Header davor, die
     zusätzlichen Puffer wirken ließ – ohne diese Kante saß der Inhalt zu
     tief/unten im Hero. So ist er wieder mittiger, oben/unten ausgeglichen. */
  padding: calc(var(--space-lg) + 76px) 0 var(--space-xl);
  overflow: hidden;
  position: relative;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.hero h1 { color: var(--color-white); }
.hero-lead { font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 46ch; margin-bottom: var(--space-lg); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero-note { font-size: 0.9rem; color: rgba(255,255,255,0.65); }
/* Kein umrahmendes Glass-Panel mehr – die Mockups schweben frei auf dem
   dunklen Hero-Hintergrund, nur der Drop-Shadow auf den Bildern selbst
   grundiert sie optisch (siehe .hero-mockup-slide img unten). */
.hero-visual { position: relative; }
/* Mockup-Karussell: neue Mockups schieben sich von rechts ins Bild, das
   bisher aktive Mockup verkleinert sich und verblasst nach links hinten in
   den Hintergrund. Alle Slides liegen übereinander (position: absolute).
   Drei Zustände, per Klasse gesteuert (main.js):
   - Standard (kein .is-active/.is-prev): unsichtbar rechts außen, bereit
     zum Reinschieben.
   - .is-active: vorne, mittig, volle Größe.
   - .is-prev: der zuletzt aktive Slide auf dem Weg in den Hintergrund
     (kleiner, nach links versetzt, blendet bis opacity 0 komplett aus –
     wichtig: bis 0 und nicht nur "fast unsichtbar", sonst wirkt der
     spätere Reset ohne Transition ruckartig). Wird danach per JS ohne
     Transition auf die Startposition zurückgesetzt. */
.hero-mockup-carousel { position: relative; height: 390px; perspective: 1400px; }
.hero-mockup-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(85px) scale(0.82);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.hero-mockup-slide.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; z-index: 3; }
.hero-mockup-slide.is-prev { opacity: 0; transform: translateX(-70px) scale(0.7); z-index: 2; }
.hero-mockup-slide.no-transition { transition: none; }
/* Eigene Ebene: Schatten-Filter wird einmal gerechnet statt bei jedem Frame neu */
.hero-mockup-slide { will-change: transform, opacity; }
.hero-mockup-slide img { max-height: 100%; max-width: 100%; width: auto; height: auto; filter: drop-shadow(0 22px 28px rgba(0,0,0,0.45)); }
/* Der Roll-Up-Banner ist sehr schmal/hoch (900x1885) – bei gleicher max-height
   wie die anderen Mockups wirkt er dadurch optisch kleiner. Etwas größer
   skaliert, damit er sich im Wechsel gleichwertig anfühlt. */
.hero-mockup-slide--boost img { max-height: 128%; }
@media (max-width: 900px) { .hero-mockup-carousel { height: 338px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mockup-slide { transition: opacity 0.3s ease; transform: none !important; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* --- Veredelung split ------------------------------------------------------*/

.sample-cta { margin-top: var(--space-lg); background: linear-gradient(135deg, var(--color-dark) 0%, #262f36 55%, var(--color-primary-dark) 100%); color: var(--color-white); border-radius: var(--radius); padding: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.sample-cta p { color: rgba(255,255,255,0.85); }
.sample-cta p { margin: 0; color: rgba(255,255,255,0.8); }

/* --- Branchen-Slider (große Foto-Karten, ohne sichtbare Scrollleiste) -----*/
.branchen-slider-wrap { position: relative; }
.branchen-slider {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 0.6rem 0.6rem 2rem;
  margin: -0.6rem -0.6rem -1.4rem;
  scroll-padding: 0 0.6rem;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.branchen-slider::-webkit-scrollbar { display: none; }
.branchen-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.branchen-card {
  position: relative;
  flex: 0 0 280px;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border-radius: 15px;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(15, 30, 45, 0.12);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
@media (hover: hover) {
  .branchen-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 30, 45, 0.2); }
}
.branchen-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 600ms ease; }
@media (hover: hover) {
  .branchen-card:hover img { transform: scale(1.05); }
}
.branchen-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,0) 40%, rgba(10,18,24,0.55) 65%, rgba(10,18,24,0.92) 100%); }
.branchen-card-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.2rem 1.2rem 1.25rem; }
.branchen-card-text strong { display: block; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.35rem; color: #fff; }
.branchen-card-text span { display: block; font-size: 0.86rem; line-height: 1.4; color: rgba(255,255,255,0.85); }
.branchen-card-text em { display: inline-block; margin-top: 0.7rem; font-style: normal; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: #8fd4f5; }
@media (hover: hover) {
  .branchen-card:hover .branchen-card-text em { color: #fff; }
}
.branchen-arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; border: none; background: var(--color-white);
  color: var(--color-dark); font-size: 1.2rem; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 30, 45, 0.18);
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease; z-index: 2;
}
@media (hover: hover) {
  .branchen-arrow:hover { background: var(--color-primary); color: var(--color-white); }
}
.branchen-arrow[disabled] { opacity: 0; pointer-events: none; }
.branchen-arrow-prev { left: -22px; }
.branchen-arrow-next { right: -22px; }
@media (max-width: 1100px) { .branchen-arrow-prev { left: 6px; } .branchen-arrow-next { right: 6px; } }
@media (max-width: 700px) {
  .branchen-card { flex-basis: 76%; }
  .branchen-arrow { display: none; }
}
/* Übersichtsseite /branchen/ */
.branchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-md); }
.branchen-grid .branchen-card { flex: none; }


/* --- Branchenseiten (/branchen/*.html) --- */
.bp-hero { position: relative; isolation: isolate; color: var(--color-white); overflow: hidden; background: linear-gradient(115deg, #14181c 0%, #15222b 55%, #0b3d57 100%); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--space-xl) + 76px) 0 var(--space-xl); }
.bp-hero > .container { width: 100%; }
/* Branchenbild (Hochformat) rechts neben dem Text statt dahinter – Person bleibt sichtbar */
.bp-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; aspect-ratio: 3 / 4; max-width: 60%; background: var(--bp-img) center 18% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.2) 16%, rgba(0,0,0,0.42) 25%, rgba(0,0,0,0.66) 34%, rgba(0,0,0,0.86) 43%, #000 54%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.2) 16%, rgba(0,0,0,0.42) 25%, rgba(0,0,0,0.66) 34%, rgba(0,0,0,0.86) 43%, #000 54%); }
.bp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 28, 0.45) 0%, rgba(20, 24, 28, 0) 22%, rgba(20, 24, 28, 0) 72%, rgba(20, 24, 28, 0.55) 100%); }
@media (max-width: 900px) {
  .bp-hero { min-height: 0; justify-content: flex-start; padding-top: calc(76px + 30vh); }
  .bp-hero-bg { left: 0; bottom: auto; height: 62vh; max-width: none; aspect-ratio: auto; background-image: var(--bp-img-sm, var(--bp-img)); background-position: center 12%; -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0,0,0,0.86) 48%, rgba(0,0,0,0.6) 62%, rgba(0,0,0,0.32) 76%, rgba(0,0,0,0.1) 89%, transparent 100%); mask-image: linear-gradient(180deg, #000 34%, rgba(0,0,0,0.86) 48%, rgba(0,0,0,0.6) 62%, rgba(0,0,0,0.32) 76%, rgba(0,0,0,0.1) 89%, transparent 100%); }
  .bp-hero-bg::after { background: linear-gradient(180deg, rgba(20, 24, 28, 0.5) 0%, rgba(20, 24, 28, 0) 30%); }
}
.bp-hero .container { position: relative; z-index: 1; }
.bp-hero .eyebrow { color: #8fd4f5; }
.bp-hero h1 { color: var(--color-white); max-width: 22ch; }
.bp-hero .hero-lead { color: rgba(255,255,255,0.88); max-width: 58ch; font-size: 1.1rem; margin-bottom: var(--space-md); }
.bp-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bp-faq { max-width: 820px; }
/* --- Branchenseiten V2 ---------------------------------------------------- */
.bp2-trust { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.bp2-trust li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.bp2-trust svg { width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(143, 212, 245, 0.18); fill: none; stroke: #8fd4f5; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; padding: 3px; }
/* 1-Minuten-Check: Selbsttest zum Auftritt (js/auftritts-check.js) */
html:not(.js) .bp3-check { display: none; }
.bp3-check-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.bp3-check-intro h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.2; margin: 0 0 0.8rem; }
.bp3-check-intro > p { color: #3b4650; font-size: 1.02rem; margin: 0 0 1.4rem; }
.bp3-result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.3rem; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #15222b 0%, #0b3d57 60%, var(--color-primary-dark) 100%); box-shadow: 0 18px 40px rgba(0, 40, 64, 0.22); }
.bp3-ring { position: relative; width: 96px; height: 96px; }
.bp3-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bp3-ring circle { fill: none; stroke-width: 9; }
.bp3-ring .bg { stroke: rgba(255,255,255,0.14); }
.bp3-ring .fg { stroke: #8fd4f5; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 450ms ease; }
.bp3-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.bp3-ring-num small { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
.bp3-result-h { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.3rem; }
.bp3-result-t { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.5; }
.bp3-gaps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bp3-gaps:empty { display: none; }
.bp3-gaps a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: #fff; text-decoration: none; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); }
@media (hover: hover) {
  .bp3-gaps a:hover { background: rgba(255,255,255,0.22); }
}
.bp3-result .btn { grid-column: 1 / -1; justify-self: start; background: #fff; color: var(--color-primary); }
.bp3-result .btn[hidden] { display: none; }
.bp3-check-note { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem !important; color: #4a5863 !important; margin: -0.6rem 0 1.4rem !important; }
.bp3-check-note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #1d7a46; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; border-radius: 50%; background: #e3f5ea; padding: 2px; }
.bp3-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; padding: 0.8rem 1.1rem; border-radius: 14px; background: var(--color-primary-tint); text-align: center; }
.bp3-filter[hidden], .bp3-filter-btn[hidden] { display: none; }
.bp3-filter-t { margin: 0; font-size: 0.93rem; font-weight: 600; color: var(--color-primary-dark); }
.bp3-filter-btn { font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); background: #fff; border: 1px solid rgba(0, 142, 209, 0.35); border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; }
@media (hover: hover) {
  .bp3-filter-btn:hover { border-color: var(--color-primary); }
}
.bp3-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: q; }
.bp3-q { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--color-border); border-radius: 15px; box-shadow: 0 8px 22px rgba(0, 60, 90, 0.05); transition: border-color 200ms ease, box-shadow 200ms ease; }
.bp3-q.is-yes { border-color: rgba(29, 122, 70, 0.45); }
.bp3-q.is-no { border-color: rgba(0, 142, 209, 0.55); box-shadow: 0 10px 26px rgba(0, 105, 156, 0.1); }
.bp3-q-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-tint); }
.bp3-q-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bp3-q p { margin: 0; font-size: 0.97rem; font-weight: 600; color: var(--color-dark); line-height: 1.4; }
.bp3-q-btns { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-bg-light); border: 1px solid var(--color-border); }
.bp3-q-btns button { font: inherit; font-size: 0.85rem; font-weight: 700; min-width: 56px; padding: 0.45rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: #4a5863; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
@media (hover: hover) {
  .bp3-q-btns button:hover { color: var(--color-dark); }
}
.bp3-q-btns button[data-a="ja"][aria-pressed="true"] { background: #1d7a46; color: #fff; }
.bp3-q-btns button[data-a="nein"][aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.bp3-q-btns button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 900px) {
  .bp3-check-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bp3-check-intro { display: contents; }
  .bp3-check-head { order: 0; }
  .bp3-result { order: 2; }
  .bp3-qs { order: 1; }
  .bp3-filter { order: 3; }
}
@media (max-width: 560px) {
  .bp3-q { grid-template-columns: 36px minmax(0, 1fr); gap: 0.7rem 0.8rem; padding: 0.9rem; }
  .bp3-q-icon { width: 36px; height: 36px; }
  .bp3-q-btns { grid-column: 2; justify-self: start; }
  .bp3-result { grid-template-columns: 80px minmax(0, 1fr); }
  .bp3-ring { width: 80px; height: 80px; }
}
/* Übersicht: sechs Bausteine (dunkles Band mit Glas-Kacheln) */
.bp3-overview .section-head h2 { color: #fff; }
.bp3-overview .section-head p { color: rgba(255,255,255,0.78); }
.bp3-overview .eyebrow { color: #8fd4f5; }
.bp3-ov-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; position: relative; }
.bp3-ov a { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 1.1rem 1rem 1.2rem; border-radius: 15px; color: #fff; text-decoration: none; background: linear-gradient(145deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 18px 40px rgba(4,16,26,0.28); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: transform 250ms ease, border-color 250ms ease; }
@media (hover: hover) {
  .bp3-ov a:hover { transform: translateY(-4px); border-color: rgba(143, 212, 245, 0.6); }
}
.bp3-ov-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 3px 8px rgba(0, 20, 40, 0.25); margin-bottom: 0.75rem; }
.bp3-ov-icon svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bp3-ov strong { font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; }
.bp3-ov small { font-size: 0.82rem; color: rgba(255,255,255,0.72); line-height: 1.4; }
/* Kapitel je Baustein: Bild mit Illustration + Text, abwechselnd links/rechts */
.bp3-chapter { scroll-margin-top: 72px; }
.bp3-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.bp3-split.is-flip .bp3-visual { order: 2; }
.bp3-visual { position: relative; padding: 0 0 2.2rem 2.2rem; }
.bp3-split.is-flip .bp3-visual { padding: 0 2.2rem 2.2rem 0; }
.bp3-photo { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 50px rgba(0, 40, 64, 0.16); }
.bp3-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp3-mock { position: absolute; left: 0; bottom: 0; z-index: 4; width: min(270px, 70%); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 22px 44px rgba(0, 40, 64, 0.2), 0 2px 6px rgba(0, 40, 64, 0.08); color: var(--color-dark); }
.bp3-split.is-flip .bp3-mock { left: auto; right: 0; }
.bp3-mock p { margin: 0; }
.bp3-mock-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6b7a86; margin-bottom: 0.6rem !important; }
.bp3-brand-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-bottom: 0.75rem; }
.bp3-brand-uses span { font-size: 0.72rem; font-weight: 600; text-align: center; padding: 0.45rem 0.2rem; border-radius: 8px; background: var(--color-primary-tint); color: var(--color-primary-dark); }
.bp3-swatches { display: flex; align-items: center; gap: 0.35rem; }
.bp3-swatches i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); }
.bp3-swatches em { margin-left: auto; font-style: normal; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--color-dark); }
.bp3-mock-big { font-family: var(--font-heading); font-weight: 800; font-size: 1.7rem; line-height: 1.1; color: var(--color-dark); }
.bp3-mock-big small { font-size: 0.8rem; font-weight: 600; color: #6b7a86; }
.bp3-mock-sub { font-size: 0.8rem; color: #6b7a86; margin: 0.15rem 0 0.7rem !important; }
.bp3-mock-ok { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #1d7a46; }
.bp3-mock-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; border-radius: 50%; background: #e3f5ea; padding: 2px; }
.bp3-mock-banner { padding: 1.2rem 1.1rem 1rem; text-align: center; background: linear-gradient(135deg, #0b3d57 0%, var(--color-primary) 100%); border-color: rgba(255,255,255,0.3); color: #fff; }
.bp3-eyelet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #e9eef2; box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
.bp3-eyelet:nth-child(1) { top: 7px; left: 7px; } .bp3-eyelet:nth-child(2) { top: 7px; right: 7px; } .bp3-eyelet:nth-child(3) { bottom: 7px; left: 7px; } .bp3-eyelet:nth-child(4) { bottom: 7px; right: 7px; }
.bp3-banner-top { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8fd4f5; }
.bp3-banner-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.15; margin: 0.15rem 0 0.25rem !important; }
.bp3-banner-tel { font-size: 0.78rem; color: rgba(255,255,255,0.85); }
.bp3-search-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #3b4650; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid #dfe6ec; margin-bottom: 0.7rem !important; }
.bp3-search-bar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #6b7a86; stroke-width: 2; stroke-linecap: round; }
.bp3-search-hit { border-radius: 10px; background: var(--color-bg-light); padding: 0.7rem 0.75rem; }
.bp3-hit-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; color: #1a4fa8; }
.bp3-hit-meta { font-size: 0.75rem; color: #6b7a86; margin: 0.1rem 0 0.55rem !important; }
.bp3-hit-btns { display: flex; gap: 0.3rem; }
.bp3-hit-btns span { font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: 999px; border: 1px solid #cfdbe4; color: var(--color-primary-dark); background: #fff; }
.bp3-hit-btns .is-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.bp3-mock-post { padding: 0.75rem; }
.bp3-post-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 700; margin-bottom: 0.55rem !important; }
.bp3-post-head i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #833ab4); padding: 2px; box-shadow: inset 0 0 0 2px #fff; }
.bp3-post-img { display: grid; grid-template-columns: 1fr 1fr; height: 110px; border-radius: 10px; overflow: hidden; }
.bp3-post-img span { display: flex; align-items: flex-end; padding: 0.4rem; font-size: 0.68rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; }
.bp3-post-img span:first-child { background: linear-gradient(160deg, #9aa5ad, #5e6a73); }
.bp3-post-img span:last-child { background: linear-gradient(160deg, #8fd4f5, #008ED1); }
.bp3-post-cap { font-size: 0.78rem; color: #3b4650; margin-top: 0.55rem !important; }
.bp3-ad-tag { font-size: 0.7rem; color: #6b7a86; margin-bottom: 0.4rem !important; }
.bp3-ad-h { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.bp3-ad-sub { font-size: 0.78rem; color: #6b7a86; margin: 0.25rem 0 0.75rem !important; }
.bp3-ad-btn { display: block; text-align: center; font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--color-primary); border-radius: 8px; padding: 0.5rem; }
.bp3-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 0.8rem; }
.bp3-kicker-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bp3-kicker-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 3px 8px rgba(0, 105, 156, 0.14); }
.bp3-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 0 0 0.9rem; }
.bp3-text { color: #3b4650; font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.1rem; }
.bp3-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.55rem; }
.bp3-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.97rem; color: var(--color-dark); }
.bp3-list svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; border-radius: 50%; background: var(--color-primary-tint); padding: 3px; }
.bp3-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.3rem; }
.bp3-picks p { width: 100%; margin: 0 0 0.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7a86; }
.bp3-picks a { font-size: 0.85rem; font-weight: 600; color: var(--color-dark); text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); transition: var(--transition); }
.bp3-picks a em { font-style: normal; font-weight: 500; color: var(--color-primary); }
@media (hover: hover) {
  .bp3-picks a:hover { border-color: var(--color-primary); }
}
.bp3-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-top: 1.2rem; border-top: 1px solid #dfe6ec; }
.bp3-price { margin: 0; display: flex; flex-direction: column; }
.bp3-price > span { font-size: 0.78rem; color: #6b7a86; }
.bp3-price strong { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-dark); }
.bp3-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.bp3-more { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-primary); text-decoration: none; }
@media (hover: hover) {
  .bp3-more:hover { text-decoration: underline; }
}
@media (max-width: 1100px) {
  .bp3-ov-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
@media (max-width: 900px) {
  .bp3-split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .bp3-split.is-flip .bp3-visual { order: 0; }
  .bp3-visual, .bp3-split.is-flip .bp3-visual { padding: 0 0 1.8rem; max-width: 560px; }
  .bp3-mock, .bp3-split.is-flip .bp3-mock { left: 1rem; right: auto; }
}
@media (max-width: 600px) {
  .bp3-ov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .bp3-ov a { padding: 0.9rem 0.8rem 1rem; }
  .bp3-ov-icon { width: 40px; height: 40px; margin-bottom: 0.55rem; }
  .bp3-mock { width: min(240px, 78%); padding: 0.85rem 0.9rem; }
  .bp3-mock-big { font-size: 1.45rem; }
  .bp3-post-img { height: 84px; }
  .bp3-foot { flex-direction: column; align-items: flex-start; }
  }
.bp2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; position: relative; }
.bp2-steps::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%; border-top: 2px dashed rgba(0, 142, 209, 0.35); }
.bp2-step { position: relative; text-align: center; padding: 0 0.4rem; }
.bp2-step-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(0, 105, 156, 0.25); margin-bottom: 0.9rem; }
.bp2-step h3 { font-size: 1.02rem; margin: 0 0 0.35rem; }
.bp2-step p { font-size: 0.9rem; color: #4a4a4a; margin: 0; }
.bp2-person { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 920px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: 15px; padding: 1.8rem; box-shadow: 0 12px 32px rgba(0, 60, 90, 0.07); }
.bp2-person-img { width: 160px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; position: relative; }
.bp2-person-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bp2-person-img::after { content: ""; position: absolute; inset: 0; }
.bp2-person-body h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.bp2-person-body p { color: #4a4a4a; }
.bp2-person-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 900px) {
  .bp2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
  .bp2-steps::before { display: none; }
}
@media (max-width: 700px) {
  .bp2-person { grid-template-columns: minmax(0, 1fr); text-align: left; padding: 1.4rem; }
  .bp2-person-img { width: 120px; }
  /* Ablauf als Zeitleiste */
  .bp2-steps { grid-template-columns: minmax(0, 1fr); row-gap: 1.3rem; }
  .bp2-step { text-align: left; padding: 0 0 0 58px; }
  .bp2-step-num { position: absolute; left: 0; top: -4px; margin: 0; }
  .bp2-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: -1.3rem; border-left: 2px dashed rgba(0, 142, 209, 0.45); }
}

.bp-faq-more { margin-top: var(--space-md); }
.bp-others-section { padding: var(--space-xl) 0; }
.bp-others-title { font-size: 1.3rem; margin-bottom: var(--space-md); }
.bp-others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.bp-other-all { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 0.9rem; border-radius: var(--radius); text-decoration: none; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.3; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); transition: transform 250ms ease; }
@media (hover: hover) {
  .bp-other-all:hover { transform: translateY(-3px); }
}
.bp-other { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.bp-other img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
@media (hover: hover) {
  .bp-other:hover img { transform: scale(1.06); }
}
.bp-other::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,0) 35%, rgba(10,18,24,0.85) 100%); }
.bp-other span:not(.ai-mark) { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.6rem; z-index: 1; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; line-height: 1.25; }

@media (max-width: 1000px) and (min-width: 701px) {
  .bp-other span:not(.ai-mark), .bp-other-all { font-size: 0.76rem; left: 0.5rem; right: 0.5rem; }
}
@media (max-width: 700px) {
  .bp-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Placeholder block (Referenzen) ---------------------------------------*/
.placeholder-note {
  border: 1.5px dashed #c8ced4;
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  color: #666;
  background: var(--color-bg-light);
}
.placeholder-note strong { color: var(--color-dark); display: block; margin-bottom: 0.3rem; font-family: var(--font-heading); }

/* --- About teaser --------------------------------------------------------*/
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-xl); align-items: center; }

@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

/* --- FAQ -------------------------------------------------------------------*/
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; }
.faq-item summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { flex: none; content: '+'; font-size: 1.4rem; color: var(--color-primary); transition: transform var(--transition); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: var(--space-sm); color: #4a4a4a; }

/* --- Final CTA -------------------------------------------------------------*/
.final-cta { background: linear-gradient(135deg, var(--color-dark) 0%, #262f36 55%, var(--color-primary-dark) 100%); color: var(--color-white); text-align: center; }
.final-cta h2 { color: var(--color-white); }
.final-cta p { color: rgba(255,255,255,0.9); max-width: 60ch; margin-left: auto; margin-right: auto; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,0.75); padding: var(--space-xl) 0 var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer-grid h4 { color: var(--color-white); font-size: 0.95rem; margin-bottom: var(--space-sm); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
@media (hover: hover) {
  .footer-grid a:hover { color: var(--color-white); }
}
.footer-logo img { height: 36px; width: auto; display: block; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-bottom a { color: rgba(255,255,255,0.55); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* --- Reveal-on-scroll (dezente Animation) ---------------------------------
   Progressive Enhancement: Inhalte sind standardmäßig sichtbar. Erst wenn
   JS lädt, bekommt <html> die Klasse "js" (siehe Inline-Script im <head>)
   und die Elemente starten unsichtbar, bis sie ins Blickfeld scrollen.
   Ohne JS (oder falls JS fehlschlägt) bleibt alles normal sichtbar. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Unterseiten: Seiten-Hero, Breadcrumb, Prozess, Preis-Hinweis --------- */
.page-hero {
  background: linear-gradient(135deg, var(--color-dark) 0%, #262f36 55%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  /* +76px oben, gleicher Grund wie bei .hero: Header liegt fixed darüber. */
  padding: calc(var(--space-lg) + 76px) 0 var(--space-2xl);
}
/* Hero mit Foto statt Farbverlauf (Test auf der Arbeitsbekleidungs-Seite).
   Aktivieren: class="page-hero page-hero--image" + style="--hero-img: url(...); --hero-img-sm: url(...)".
   Rückgängig: Klasse und style-Attribut wieder entfernen. */
.page-hero--image { position: relative; isolation: isolate; overflow: hidden; background: #14181c; }
.page-hero--image::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64%; z-index: -1; background: linear-gradient(90deg, rgba(20, 24, 28, 0.55) 0%, rgba(20, 24, 28, 0.12) 55%, rgba(0, 60, 90, 0.22) 100%), var(--hero-img) var(--hero-pos, center 25%) / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.page-hero.page-hero--image h1 { max-width: 22ch; }
.page-hero.page-hero--image .hero-lead { max-width: 48ch; }
.page-hero--image .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
.page-hero--image .page-hero-mockup, .page-hero--image .page-hero-art { display: none; }
.page-hero--image .hero-highlights li { background: rgba(20, 24, 28, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 800px) {
  .page-hero--image::before { width: 100%; -webkit-mask-image: none; mask-image: none; background: linear-gradient(180deg, rgba(20, 24, 28, 0.76) 0%, rgba(20, 24, 28, 0.86) 55%, rgba(20, 24, 28, 0.95) 100%), var(--hero-img-sm, var(--hero-img)) center 20% / cover no-repeat; }
}
/* Hero bis zum unteren Bildschirmrand (Test auf den Leistungsseiten).
   Aktivieren: Klasse page-hero--full ergänzen. Rückgängig: Klasse wieder entfernen. */
.page-hero--full { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.page-hero--full > .container { width: 100%; }
.breadcrumb { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: var(--space-md); }
.breadcrumb a { color: rgba(255,255,255,0.75); }
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--color-white); }
}
.page-hero h1 { color: var(--color-white); max-width: 34ch; }
.page-hero .hero-lead { color: rgba(255,255,255,0.85); max-width: 56ch; font-size: 1.1rem; margin-bottom: var(--space-md); }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.page-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); align-items: center; }
.page-hero-mockup { display: flex; justify-content: center; position: relative; perspective: 1600px; }
.page-hero-mockup::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 88%;
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,142,209,0.4), rgba(0,142,209,0) 72%);
  filter: blur(6px);
  z-index: 0;
}
.page-hero-mockup img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 300px;
  height: auto;
  display: block;
  transform: rotateY(-12deg) rotateX(4deg) rotate(-2deg);
  filter: drop-shadow(0 26px 30px rgba(0,0,0,0.55)) drop-shadow(0 8px 14px rgba(0,0,0,0.45));
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .page-hero-mockup:hover img { transform: rotateY(-5deg) rotateX(2deg) rotate(-1deg); }
}
@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-mockup { order: -1; margin-bottom: var(--space-md); }
  .page-hero-mockup img { width: 220px; }
}


.price-note {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.price-note h3 { margin-bottom: 0.2rem; font-size: 1.05rem; }
.price-note p { margin: 0; color: #4a4a4a; font-size: 0.92rem; max-width: 55ch; }

.partner-block {
  background: var(--color-bg-light);
  /* Etwas kräftigerer Rand + weicher Schatten: Box bleibt auch auf hellen/kontrastarmen Bildschirmen klar vom Weiß abgegrenzt */
  border: 1px solid #D8DEE4;
  box-shadow: 0 1px 2px rgba(21, 34, 43, 0.04), 0 8px 24px -10px rgba(0, 60, 90, 0.14);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap;
}
.partner-block .partner-logo { flex-shrink: 0; width: 86px; height: 86px; }
.partner-block .partner-logo img { width: 100%; height: 100%; display: block; border-radius: var(--radius-sm); }
.partner-block .partner-logo svg {
  width: 100%; height: 100%; display: block; border-radius: var(--radius-sm);
  background: var(--color-primary-tint); color: var(--color-primary);
  padding: 22px; box-sizing: border-box;
}
.partner-block-text { flex: 1 1 320px; }
.partner-block-text .eyebrow { margin-bottom: 0.1rem; }
.partner-block-text h3 { margin-bottom: 0.3rem; font-size: 1.1rem; }
.partner-block-text p:last-child { margin: 0; color: #4a4a4a; font-size: 0.92rem; max-width: 62ch; }
@media (max-width: 600px) {
  .partner-block { flex-direction: column; text-align: center; }
  .partner-block-text p:last-child { max-width: 100%; }
}

.hero-highlights {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  margin: 0 0 var(--space-md); padding: 0;
}
.hero-highlights li {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--color-white);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 0.35rem 0.85rem;
}
.hero-highlights li::before { content: '✓'; color: #8fd4f5; font-weight: 800; }


/* --- Kontaktformular --------------------------------------------------- */
.contact-section { background: linear-gradient(180deg, var(--color-white) 0%, var(--color-primary-tint) 100%); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: var(--space-xl); align-items: start; }
.contact-side { position: sticky; top: 100px; }
.contact-person { display: flex; align-items: center; gap: 1rem; }
.contact-portrait { flex: 0 0 auto; width: 96px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(15, 30, 45, 0.16); background: var(--color-bg-light); position: relative; }
.contact-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.contact-portrait::after { content: ''; position: absolute; inset: 0; }
.contact-person strong { display: block; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.3; }
.contact-person span { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; }
.contact-quote { margin: var(--space-md) 0; padding-left: 1rem; border-left: 3px solid var(--color-primary); color: #3f4a54; font-size: 0.98rem; line-height: 1.6; }
.contact-channels { display: grid; gap: 0.6rem; margin-bottom: var(--space-lg); }
.contact-channel { display: flex; align-items: center; gap: 0.85rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 0.9rem; color: var(--color-dark); font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
@media (hover: hover) {
  .contact-channel:hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
}
.contact-channel small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: #6b7280; }
.contact-channel-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--color-primary-tint); color: var(--color-primary); }
.contact-channel-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-channels .whatsapp-btn { justify-content: center; margin: 0; padding: 0.8rem 1rem; border-radius: 12px; }
.contact-next h2 { font-size: 1.05rem; margin-bottom: 0.7rem; }
.contact-next ol { list-style: none; margin: 0; padding: 0; counter-reset: next; }
.contact-next li { position: relative; padding: 0 0 0.9rem 2.6rem; counter-increment: next; }
.contact-next li::before { content: counter(next); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.contact-next li:not(:last-child)::after { content: ''; position: absolute; left: 0.88rem; top: 2rem; bottom: 0.2rem; border-left: 2px dashed rgba(0, 142, 209, 0.35); }
.contact-next strong { display: block; font-size: 0.95rem; }
.contact-next span { display: block; font-size: 0.88rem; color: #4a4a4a; }
.contact-form { background: var(--color-white); border-radius: 15px; box-shadow: 0 18px 46px rgba(0, 60, 90, 0.1); padding: var(--space-lg); }
.contact-form-head { margin-bottom: var(--space-md); }
.contact-form-head h2 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.contact-form-head p { color: #6b7280; font-size: 0.9rem; margin: 0; }
.contact-submit { width: 100%; justify-content: center; padding-top: 0.95rem; padding-bottom: 0.95rem; font-size: 1.02rem; }
.contact-assure { margin: 0.7rem 0 0; text-align: center; font-size: 0.86rem; color: #3f4a54; }
.contact-mailnote { font-size: 0.78rem; color: #8a929a; margin: 0; text-align: center; }
.contact-form .form-status { margin-top: 0.4rem; min-height: 0; }
.whatsapp-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #25D366; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.55rem 1rem; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s ease; }
.whatsapp-btn:focus-visible { background: #1ebe57; }
@media (hover: hover) {
  .whatsapp-btn:hover { background: #1ebe57; }
}
.whatsapp-btn svg { flex-shrink: 0; }
.form-field { margin-bottom: var(--space-md); }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--color-dark); }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--color-dark); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: #4a4a4a; margin-bottom: var(--space-md); }
.form-check input { margin-top: 0.2rem; width: auto; }

.leistung-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span {
  display: inline-block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
@media (hover: hover) {
  .chip-check:hover span { border-color: var(--color-primary); }
}
.chip-check input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.chip-check input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.form-status { margin-top: var(--space-sm); font-size: 0.9rem; min-height: 1.2em; }
@media (max-width: 900px) {
  /* Mobil: Ansprechpartner, dann direkt das Formular, danach Kontaktwege und Ablauf */
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .contact-side { display: contents; }
  .contact-person { order: 1; }
  .contact-quote { order: 2; margin: 0; }
  .contact-channels { order: 3; margin: 0; }
  .contact-form { order: 4; margin-top: var(--space-sm); }
  .contact-next { order: 5; margin-top: var(--space-sm); }
}
@media (max-width: 800px) { .form-row { grid-template-columns: 1fr; row-gap: 0; } }
@media (max-width: 520px) { .contact-form { padding: var(--space-md); } }

/* --- Rechtstexte ---------------------------------------------------------- */
.todo-fill { background: #fff3b0; padding: 0 0.35em; border-radius: 3px; font-weight: 700; color: #6b5900; }
.legal-draft-notice { background: #fff3b0; border: 1.5px solid #e0c200; border-radius: var(--radius); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); font-size: 0.92rem; color: #6b5900; }
.legal-draft-notice strong { display: block; margin-bottom: 0.2rem; }
.legal-text h2 { font-size: 1.2rem; margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.legal-text h3 { font-size: 1.02rem; margin-top: var(--space-md); margin-bottom: 0.3rem; }
.legal-text p, .legal-text li { color: #333; font-size: 0.95rem; }
.legal-text ul { padding-left: 1.3rem; }

/* --- Cookie-Banner ---------------------------------------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--color-dark); color: #fff; padding: var(--space-md) var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); box-shadow: 0 -4px 18px rgba(0,0,0,0.18); transform: translateY(110%); transition: transform 0.35s ease; }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 0.88rem; color: #e8e8e8; max-width: 62ch; }
.cookie-banner a { color: #8fd4f5; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
.cookie-banner-actions button { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; }
.cookie-banner-actions .cb-accept { background: var(--color-primary); color: #fff; }
@media (hover: hover) {
  .cookie-banner-actions .cb-accept:hover { background: var(--color-primary-dark); }
}
.cookie-banner-actions .cb-decline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
@media (hover: hover) {
  .cookie-banner-actions .cb-decline:hover { border-color: #fff; }
}
.footer-cookie-settings { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 700px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; } .cookie-banner-actions { width: 100%; } .cookie-banner-actions button { flex: 1; } }

/* --- Produkt-Showcase (Bildkarten) ------------------------------------- */
.product-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; align-items: stretch; }
/* Produktkarte: klar abgegrenzt (Hairline + gestaffelter Schatten), gleiche
   Höhen, Preis als stärkstes Element, sichtbarer nächster Schritt (CTA).
   Hover über „translate“ statt „transform“, damit es nicht mit .reveal kollidiert. */
.product-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21, 34, 43, 0.08); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(21, 34, 43, 0.05), 0 6px 18px -6px rgba(0, 60, 90, 0.10); transition: translate 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease, border-color 260ms ease; }
.product-card:focus-visible { translate: 0 -5px; border-color: rgba(0, 142, 209, 0.35); box-shadow: 0 2px 4px rgba(21, 34, 43, 0.04), 0 22px 44px -12px rgba(0, 76, 112, 0.28); }
@media (hover: hover) {
  .product-card:hover { translate: 0 -5px; border-color: rgba(0, 142, 209, 0.35); box-shadow: 0 2px 4px rgba(21, 34, 43, 0.04), 0 22px 44px -12px rgba(0, 76, 112, 0.28); }
}
a.product-card:focus-visible { text-decoration: none; }
@media (hover: hover) {
  a.product-card:hover { text-decoration: none; }
}
/* Bildfläche: einheitliches Format für alle Karten */
.product-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: #eef2f5; transition: scale 500ms ease; }
@media (hover: hover) {
  .product-card:hover > img { scale: 1.04; }
}
.product-card .product-card-badge { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; max-width: calc(100% - 1.4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: #2b3a45; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(21, 34, 43, 0.1); border-radius: 999px; padding: 0.22rem 0.6rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 600px) {
  .product-card .product-card-badge { top: 0.45rem; left: 0.45rem; max-width: 70%; font-size: 0.6rem; padding: 0.15rem 0.45rem; letter-spacing: 0; }
}
.product-card-body { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1.05rem 1.05rem; border-top: 1px solid rgba(21, 34, 43, 0.06); }
.product-card-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--color-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.product-card-price { font-family: var(--font-heading); font-weight: 800; font-size: 1.12rem; color: var(--color-dark); white-space: nowrap; }
.product-card-price small { margin-left: 0.25rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--color-primary-dark); background: var(--color-primary-tint); border-radius: 999px; padding: 0.12rem 0.45rem; vertical-align: 2px; }
.product-card-price.price-inquiry { font-size: 0.92rem; font-weight: 700; color: #5b6b77; white-space: normal; }
.product-card-note { font-size: 0.72rem; color: #6b7a86; line-height: 1.35; }
.product-card-format { font-size: 0.78rem; color: #6b7a86; line-height: 1.35; margin-top: -0.1rem; }
.product-card-cta { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.84rem; color: var(--color-primary); border-top: 1px dashed rgba(21, 34, 43, 0.1); }
.product-card-cta::after { content: "→"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); font-size: 0.9rem; transition: background 220ms ease, color 220ms ease, translate 220ms ease; }
.product-card:focus-visible .product-card-cta::after { background: var(--color-primary); color: #fff; translate: 3px 0; }
@media (hover: hover) {
  .product-card:hover .product-card-cta::after { background: var(--color-primary); color: #fff; translate: 3px 0; }
}
/* Textil-Freisteller (Weiß auf Weiß): nicht anschneiden, Luft drumherum */
#catalogGrid .product-card > img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 1rem 1rem 0.4rem; }
@media (prefers-reduced-motion: reduce) { .product-card, .product-card > img, .product-card-cta::after { transition: none; } .product-card:hover { translate: none; } .product-card:hover > img { scale: none; } }

/* --- Print-Shop (Print & Werbetechnik) ---------------------------------- */
.product-card > img.is-missing { visibility: hidden; }
/* „So arbeiten wir“-Band über den Shops (Hendrik, 09.10.): prüfen, gestalten, ein Ansprechpartner */
.pledge-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); margin: 0 0 var(--space-lg); padding: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1.4rem, 3.4vw, 3rem); color: #fff; background: #14212b; border-radius: 22px; overflow: hidden; }
.pledge-band::before { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(0,142,209,.45), rgba(0,142,209,0) 70%); pointer-events: none; }
.pledge-band::after { content: ''; position: absolute; left: clamp(1.4rem, 3.4vw, 3rem); right: clamp(1.4rem, 3.4vw, 3rem); bottom: 0; height: 3px; background: var(--color-primary); border-radius: 3px 3px 0 0; }
.pledge-main { position: relative; }
.pledge-main .eyebrow { color: #5fc3ef; margin-bottom: 0.5rem; }
.pledge-main h3 { font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.9rem; color: #fff; }
.pledge-lead { margin: 0; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.6; max-width: 48ch; }
.pledge-person { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,.78); }
.pledge-person picture { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--color-primary); }
.pledge-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.pledge-person strong { color: #fff; }
.pledge-person a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.pledge-person a:hover { text-decoration-color: #5fc3ef; color: #5fc3ef; }
.pledge-steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.pledge-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 1rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.pledge-steps li:first-child { border-top: 0; padding-top: 0; }
.pledge-steps li:last-child { padding-bottom: 0; }
.pledge-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--color-primary); padding-top: 0.1rem; }
.pledge-steps strong { display: block; font-family: var(--font-heading); font-size: 1.02rem; color: #fff; margin-bottom: 0.25rem; }
.pledge-steps p { margin: 0; color: rgba(255,255,255,.72); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 900px) { .pledge-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .pledge-steps li { padding: 0.8rem 0; } .pledge-steps li:first-child { border-top: 1px solid rgba(255,255,255,.14); padding-top: 0.8rem; } }
@media (max-width: 480px) { .pledge-band { border-radius: 16px; } .pledge-person { align-items: flex-start; } }
.pledge-band--after { margin-top: var(--space-xl); }
.shop-more { margin-top: var(--space-lg); background: #fff; border: 1px solid #E3EAF0; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md) var(--space-lg); box-shadow: 0 1px 2px rgba(21,34,43,.04), 0 14px 34px -14px rgba(0,60,90,.16); }
.shop-more-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary-tint); display: grid; place-items: center; }
.shop-more-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-more h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.shop-more p { margin: 0; color: #4a4a4a; font-size: 0.92rem; max-width: 64ch; }
.shop-more-cta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.shop-more-phone { font-size: 0.85rem; color: #4a4a4a; white-space: nowrap; }
.shop-more-phone:hover { color: var(--color-primary); }
@media (max-width: 760px) {
  .shop-more { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .shop-more-icon { display: none; }
  .shop-more-cta { align-items: flex-start; }
  .shop-more-cta .btn { width: 100%; text-align: center; }
}
.print-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.print-way { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3EAF0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(21,34,43,.04), 0 18px 40px -16px rgba(0,60,90,.22); transition: translate 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease; }
@media (hover: hover) { .print-way:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(21,34,43,.04), 0 26px 50px -16px rgba(0,76,112,.3); } }
.print-way-head { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.7rem; background: linear-gradient(135deg, var(--color-primary-tint) 0%, #f3f9fd 100%); border-bottom: 1px solid #E3EAF0; }
.print-way--design .print-way-head { background: linear-gradient(135deg, #e6f3fb 0%, #eef5fa 100%); }
.print-way-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(21,34,43,.06), 0 10px 24px -10px rgba(0,60,90,.25); }
.print-way-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-way-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: 0.3rem; }
.print-way-head h3 { font-size: 1.25rem; margin: 0; }
.print-way-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.7rem 1.6rem; }
.print-way-body > p { color: #4a4a4a; margin-bottom: 1rem; }
.print-way ul { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.7rem; font-size: 0.93rem; color: #3f4a54; line-height: 1.5; }
.print-way li { padding-left: 2rem; position: relative; }
.print-way li::before { content: '✓'; position: absolute; left: 0; top: 0.1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); font-weight: 800; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.print-way li strong { color: var(--color-dark); }
.print-way-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--color-primary); text-decoration: none; padding-top: 1rem; border-top: 1px dashed rgba(21,34,43,.12); }
.print-way-cta span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-tint); transition: background 220ms ease, color 220ms ease, translate 220ms ease; }
@media (hover: hover) { .print-way-cta:hover { text-decoration: none; } .print-way-cta:hover span { background: var(--color-primary); color: #fff; translate: 3px 0; } }
.print-advice { margin-top: var(--space-md); background: #fff; border: 1px solid #E3EAF0; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; box-shadow: 0 1px 2px rgba(21,34,43,.04), 0 14px 34px -14px rgba(0,60,90,.16); }
.print-advice h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.print-advice p { margin: 0; color: #3f4a54; font-size: 0.92rem; max-width: 60ch; }
.print-advice-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.print-advice-links .btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.print-advice-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 800px) { .print-ways { grid-template-columns: minmax(0, 1fr); } .print-way-head { padding: 1.2rem 1.25rem; } .print-way-body { padding: 1.1rem 1.25rem 1.3rem; } .print-advice-links { width: 100%; } .print-advice-links .btn { flex: 1 1 auto; justify-content: center; } }

/* --- Kunden-Logo-Slider (Endlos-Laufband) -------------------------------- */
/* Die gelieferten Logo-SVGs kommen mit uneinheitlichen Grautönen (teils
   #A6A6A6, teils fast-weiß/#FFFDFD, eins komplett fill="white") – auf hellem
   Hintergrund sonst kaum oder gar nicht zu erkennen. Statt vom Quell-Fill
   abhängig zu sein, wird jedes Logo per Filter auf ein einheitliches,
   garantiert lesbares Grau gezwungen (brightness(0) macht jedes sichtbare
   Pixel unabhängig von seiner Ausgangsfarbe zur reinen Silhouette, die
   Opacity bestimmt danach den Grauton).
   Das Laufband läuft NICHT über die volle Bildschirmbreite, sondern in einem
   schmaleren, zentrierten Fenster (.logo-marquee, max-width unten) – damit
   ist die sichtbare Fensterbreite immer kleiner als die Breite eines
   kompletten Logo-Satzes, und man sieht nie dasselbe Logo zweimal
   gleichzeitig (das war bei voller Bildschirmbreite und nur 6 Logos das
   Problem). Je mehr Logos dazukommen, desto ruhiger wirkt der Loop. */
.logo-marquee-section { padding: var(--space-lg) 0; background: var(--color-bg-light); }
.logo-marquee-label { text-align: center; font-family: var(--font-heading); font-weight: 700; color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; margin-bottom: var(--space-md); }
/* Fenster jetzt auf volle Containerbreite (--max-width, 1200px). Damit dabei
   nie dasselbe Logo zweimal gleichzeitig sichtbar ist, wurden Logo-Höhe
   (48px -> 53px, ~10% größer) und Gap (2.75rem -> 4.5rem) so vergrößert,
   dass die Wiederholungs-Periode des Tracks (7 Logos, 2x dupliziert) auf
   ca. 1204px steigt – knapp über den 1200px Fenster. Kommen mehr Logos
   dazu, wächst die Periode automatisch weiter mit. */
.logo-marquee { max-width: var(--max-width); margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee-track { display: flex; align-items: center; gap: 4.5rem; width: max-content; animation: logo-scroll 42s linear infinite; will-change: transform; }
@media (hover: hover) {
  .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
}
.logo-marquee-item { height: 53px; width: auto; flex-shrink: 0; filter: brightness(0); opacity: 0.5; transition: opacity 0.2s ease; }
@media (hover: hover) {
  .logo-marquee-item:hover { opacity: 0.85; }
}
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}
@media (max-width: 600px) {
  /* Handy: Laufband über die volle Breite, ohne Ausblenden an den Rändern
     (7 Logos ≈ 580px pro Durchlauf > Bildschirmbreite, also keine Doppelten) */
  .logo-marquee { max-width: none; -webkit-mask-image: none; mask-image: none; }
  .logo-marquee-item { height: 36px; }
  .logo-marquee-track { gap: 2rem; }
}

/* --- Produktkatalog (Arbeitsbekleidung) -------------------------------- */
.catalog-groups { display: grid; gap: var(--space-xl); }
.catalog-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-bottom: var(--space-sm); }
.catalog-group-head h3 { font-size: 1.25rem; margin: 0; }
.catalog-group-count { font-size: 0.85rem; color: #6b7280; }
.catalog-group--popular h3::before { content: '★'; color: var(--color-primary); margin-right: 0.4rem; font-size: 0.9em; }
.catalog-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.catalog-search { flex: 1 1 220px; max-width: 320px; padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; background: var(--color-white); }
.catalog-search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chip { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.82rem; font-family: var(--font-body); color: var(--color-dark); cursor: pointer; transition: var(--transition); }
@media (hover: hover) {
  .filter-chip:hover { border-color: var(--color-primary); }
}
.filter-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.catalog-empty { color: #777; font-size: 0.9rem; padding: var(--space-md) 0; }
@media (max-width: 640px) {
  .catalog-controls { flex-direction: column; align-items: stretch; }
  .catalog-search { max-width: none; flex: none; width: 100%; }
}

/* --- Produktseite (Arbeitsbekleidung): Galerie, Farb-/Größenwahl --------- */
/* Spalten dürfen schrumpfen (minmax(0, …) + min-width: 0), sonst drückt die Thumbnail-Leiste die Seite auf */
.produkt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gallery head" "gallery info"; gap: 0 var(--space-xl); align-items: start; }
.produkt-layout > * { min-width: 0; }
.produkt-head { grid-area: head; }
.produkt-gallery { grid-area: gallery; position: sticky; top: 96px; }
.produkt-info { grid-area: info; }
.produkt-gallery-main { position: relative; cursor: zoom-in; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); aspect-ratio: 700 / 758; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.produkt-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-md); box-sizing: border-box; }
.produkt-gallery-thumbs { display: flex; gap: 0.5rem; margin-top: var(--space-sm); overflow-x: auto; overflow-y: hidden; padding-bottom: 0.3rem; scroll-behavior: smooth; }
.produkt-gallery-thumb {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 3px; box-sizing: border-box; cursor: pointer;
  border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white);
  overflow: hidden; transition: border-color 0.15s ease;
}
.produkt-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (hover: hover) {
  .produkt-gallery-thumb:hover { border-color: var(--color-primary); }
}
.produkt-gallery-thumb.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.produkt-color-swatch {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--color-border); box-shadow: inset 0 0 0 2px var(--color-white);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .produkt-color-swatch:hover { transform: scale(1.08); }
}
.produkt-color-swatch.is-active { border-color: var(--color-primary); }
.produkt-color-swatch[data-light="true"] { box-shadow: inset 0 0 0 2px var(--color-white), inset 0 0 0 3px var(--color-border); }

.produkt-head h1 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.produkt-price { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-primary); margin-bottom: var(--space-md); }
.produkt-price.price-inquiry { color: #777; font-size: 1.05rem; }
.produkt-price small { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; color: #5b6570; }

/* „Zurück zum Sortiment“ im dunklen Seitenkopf: kleine Pille mit Chevron, wie die Ghost-Buttons im Header */
.produkt-back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-md); padding: 0.4rem 0.9rem 0.4rem 0.65rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; font-size: 0.84rem; font-weight: 500; color: rgba(255,255,255,0.9); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.produkt-back-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
@media (hover: hover) {
  .produkt-back-link:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); color: var(--color-white); }
  .produkt-back-link:hover svg { transform: translateX(-2px); }
}

@media (max-width: 900px) {
  /* Handy/Tablet: Name und Preis zuerst, dann Bilder, dann Konfigurator */
  .produkt-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gallery" "info"; }
  /* Statische Textil-Seiten: Beschreibung + Fakten (.produkt-details, im Desktop unter den Bildern) verschiebt
     arbeitsbekleidung-produkt.js auf dem Handy hinter den Konfigurator */
  .produkt-layout:has(> .produkt-details) { grid-template-areas: "head" "gallery" "info" "details"; }
  .produkt-layout > .produkt-details { grid-area: details; margin-top: var(--space-lg); }
  .produkt-gallery { position: static; margin-bottom: var(--space-xl); }
}

/* --- Header: Warenkorb-Symbol (wird von main.js eingefügt) --- */
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: inherit; margin-right: 0.3rem; }
.nav-cart[hidden] { display: none; }
.nav-cart svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .nav-cart:hover { background: rgba(0, 142, 209, 0.1); }
}
.nav-cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--color-primary); color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.nav-cart-count[hidden] { display: none; }
.nav-cart { color: var(--color-white); transition: color 0.3s ease; }
.site-header.is-scrolled .nav-cart { color: var(--color-dark); }

/* --- Ablauf "In 4 Schritten" (Arbeitsbekleidung) --- */
.journey-section { background: linear-gradient(180deg, var(--color-white) 0%, var(--color-primary-tint) 100%); }
.journey-section .section-head { text-align: center; }
.journey { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); position: relative; counter-reset: none; }
.journey::before { content: ''; position: absolute; top: 96px; left: 12%; right: 12%; border-top: 2px dashed rgba(0, 142, 209, 0.35); z-index: 0; }
.journey-step { position: relative; z-index: 1; background: var(--color-white); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 60, 90, 0.08); padding: 0 var(--space-md) var(--space-md); text-align: left; transition: transform var(--transition), box-shadow var(--transition); }
@media (hover: hover) {
  .journey-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}
.journey-art { margin: 0 calc(-1 * var(--space-md)); background: var(--color-bg-light); border-radius: var(--radius) var(--radius) 0 0; padding: 0.8rem 0.6rem 0.4rem; }
.journey-art svg { width: 100%; height: auto; display: block; }
.journey-num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 5px var(--color-white); position: relative; }
.journey-step h3 { font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.journey-step p { font-size: 0.9rem; color: #4a4a4a; margin: 0; }
.journey-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: var(--space-lg); }
.j-card { fill: #fff; stroke: #cfdbe3; stroke-width: 2; }
.j-active { stroke: var(--color-primary); stroke-width: 2.5; }
.j-line { fill: none; stroke: #2b3a45; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.j-fill { fill: var(--color-primary); }
.j-white-fill { fill: #fff; }
.j-zone { fill: rgba(0, 142, 209, 0.08); stroke: var(--color-primary); stroke-width: 1.6; stroke-dasharray: 4 3; }
.j-logo { fill: var(--color-primary-tint); stroke: var(--color-primary); stroke-width: 2; }
.j-badge { fill: var(--color-success); }
.j-check { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.j-logo + .j-check { stroke: var(--color-primary); }
.j-cursor { fill: var(--color-dark); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.j-box { fill: #e9d3ae; stroke: #9b7b4a; stroke-width: 2; stroke-linejoin: round; }
.j-box + .j-line { stroke: #9b7b4a; }
.j-price { fill: var(--color-dark); }
.j-small { font: 600 10px var(--font-body); fill: #6b7280; text-anchor: middle; }
.j-white { fill: rgba(255,255,255,0.75); }
.j-price-t { font: 800 14px var(--font-heading); fill: #fff; text-anchor: middle; }
.j-or { font: 700 13px var(--font-heading); fill: #9aa7b1; text-anchor: middle; }
.j-pill { font: 700 11px var(--font-heading); fill: #6b7280; text-anchor: middle; }
.j-pill-on { fill: #fff; }
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey::before { display: none; } }
@media (max-width: 560px) { .journey { grid-template-columns: minmax(0, 1fr); } }
/* Ablauf am Handy als senkrechte Zeitleiste: große Nummer links, gestrichelte
   Verbindungslinie zum nächsten Schritt (füllt sich beim Einblenden). */
@media (max-width: 560px) {
  .journey { gap: 0; margin-top: var(--space-md); }
  .journey-step { margin: 0 0 1.4rem 54px; }
  .journey-step:last-child { margin-bottom: 0; }
  .journey-step:hover { transform: none; }
  .journey-num { position: absolute; left: -54px; top: 0; margin: 0; width: 42px; height: 42px; font-size: 1.15rem; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(0, 105, 156, 0.28); z-index: 2; }
  .journey-step::before { content: ""; position: absolute; left: -34px; top: 50px; bottom: calc(-1.4rem - 4px); width: 2px; background: repeating-linear-gradient(180deg, rgba(0, 142, 209, 0.45) 0 6px, transparent 6px 11px); }
  .journey-step::after { content: ""; position: absolute; left: -34px; top: 50px; bottom: calc(-1.4rem - 4px); width: 2px; background: var(--color-primary); transform-origin: top; transform: scaleY(0); transition: transform 700ms ease; }
  .journey-step:last-child::before, .journey-step:last-child::after { display: none; }
  .journey.is-visible .journey-step::after { transform: scaleY(1); }
  .journey.is-visible .journey-step:nth-child(2)::after { transition-delay: 350ms; }
  .journey.is-visible .journey-step:nth-child(3)::after { transition-delay: 700ms; }
  .journey.is-visible .journey-step:nth-child(4)::after { transition-delay: 1050ms; }
  .journey.is-visible .journey-step:nth-child(5)::after { transition-delay: 1400ms; }
  .journey-art svg { max-height: 150px; }
  .journey-step h3 { margin-top: 1rem; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) { .journey-step::after { transition: none; } }

/* --- Illustrations-Bausteine (zusätzlich zu j-*) --- */
.j-line-soft { fill: none; stroke: #c9d6df; stroke-width: 3; stroke-linecap: round; }

.j-tint { fill: var(--color-primary-tint); }
.j-tint-strong { fill: #9fd3ee; }
.j-dark { fill: #1f2a33; }
.j-dot-r { fill: #f26b5e; } .j-dot-y { fill: #f5c542; } .j-dot-g { fill: #4cc36b; }
.j-line-w { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }
.j-slot { fill: #0d151b; }

/* --- Leistungen: Karten mit Illustration --- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
/* Leistungs-Kacheln: Foto vollflächig, Text auf dunklem Verlauf */
.svc-tile { position: relative; display: block; aspect-ratio: 4 / 3.4; border-radius: 15px; overflow: hidden; color: #fff; text-decoration: none; background: var(--color-dark); box-shadow: 0 14px 34px rgba(15, 30, 45, 0.14); transition: transform 250ms ease, box-shadow 250ms ease; }
.svc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.svc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,0) 22%, rgba(10,18,24,0.55) 45%, rgba(10,18,24,0.88) 70%, rgba(10,18,24,0.96) 100%); }
@media (hover: hover) {
  .svc-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15, 30, 45, 0.22); }
  .svc-tile:hover img { transform: scale(1.05); }
}
.svc-tile-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem 1.5rem 1.5rem; }
.svc-tile-badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.32rem 0.7rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.svc-tile h3 { color: #fff; font-size: 1.3rem; margin: 0 0 0.4rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.svc-tile p { color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; line-height: 1.45; margin: 0 0 0.9rem; }
.svc-tile-link { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.42rem 0.9rem; transition: background 200ms ease, border-color 200ms ease; }
@media (hover: hover) {
  .svc-tile:hover .svc-tile-link { background: var(--color-primary); border-color: var(--color-primary); }
}
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc-tile { aspect-ratio: 4 / 3.6; } }

/* --- Versprechen-Band --- */
/* Weiße Leiste direkt unter „Über uns“: ein Panel, drei Spalten mit Trennlinien, Icon neben dem Titel */
.promise-band { padding: 0 0 var(--space-xl); }
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid #E3EAF0; border-radius: 18px; box-shadow: 0 1px 2px rgba(21, 34, 43, 0.04), 0 14px 34px -14px rgba(0, 60, 90, 0.16); }
.promise { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; padding: 1.8rem 1.7rem; }
.promise + .promise { border-left: 1px solid #E3EAF0; }
.promise-icon { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; }
.promise-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--color-primary); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.promise h3, .promise p { grid-column: 2; }
.promise h3 { color: var(--color-dark); font-size: 1.05rem; margin: 0.15rem 0 0.35rem; }
.promise p { color: #4a5560; font-size: 0.92rem; margin: 0; line-height: 1.55; }
@media (max-width: 800px) {
  .promise-grid { grid-template-columns: minmax(0, 1fr); }
  .promise { padding: 1.4rem 1.3rem; }
  .promise + .promise { border-left: none; border-top: 1px solid #E3EAF0; }
}

/* --- Druck vs. Stick --- */
.method-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.method-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 60, 90, 0.06); display: flex; flex-direction: column; }
.method-art { background: linear-gradient(160deg, var(--color-bg-light) 0%, var(--color-primary-tint) 100%); padding: 0.8rem; }
.method-art svg { display: block; width: 100%; max-height: 180px; height: auto; }
.method-body { padding: var(--space-md); }
.method-body h3 { font-size: 1.3rem; margin: 0; }
.method-lead { color: var(--color-primary); font-weight: 700; margin: 0.15rem 0 1rem; }
.method-rates { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.45rem; }
.method-rates li { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; color: #2f3a44; border-bottom: 1px dashed var(--color-border); padding-bottom: 0.4rem; }
.rate { display: inline-flex; gap: 4px; }
.rate i { width: 22px; height: 8px; border-radius: 4px; background: #dfe6eb; display: block; }
.rate i.on { background: var(--color-primary); }
.method-ideal { margin: 0 0 0.45rem; font-size: 0.9rem; }
.method-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.method-tags span { background: var(--color-primary-tint); color: #0b4f73; font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.3rem 0.7rem; }
.method-note { text-align: center; color: #6b7280; font-size: 0.85rem; margin: 0.9rem 0 var(--space-md); }

@media (max-width: 760px) { .method-compare { grid-template-columns: minmax(0, 1fr); } }

/* --- Pakete (Preis-Karten) --- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg) var(--space-md) var(--space-md); box-shadow: 0 10px 30px rgba(0, 60, 90, 0.06); }
.pkg-featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-hover); transform: translateY(-8px); }
.pkg-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px; white-space: nowrap; }
.pkg h3 { font-size: 1.35rem; margin: 0 0 0.35rem; }
.pkg-desc { color: #4a4a4a; font-size: 0.92rem; margin: 0 0 1rem; min-height: 3.2em; }
.pkg-price { font-family: var(--font-heading); font-size: 2.3rem; font-weight: 800; color: var(--color-dark); margin: 0 0 1rem; line-height: 1.1; }
.pkg-price small { font-size: 1rem; font-weight: 600; color: #6b7280; }
.pkg-price span { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: #6b7280; margin-top: 0.25rem; }
.pkg-list { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: 0.55rem; flex: 1; }
.pkg-list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; color: #2f3a44; }
.pkg-list svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; fill: none; stroke: var(--color-success); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pkg .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: minmax(0, 1fr); } .pkg-featured { transform: none; } }

/* --- Inklusive-Kacheln --- */
.inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.inc { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
.inc-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; }
.inc-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inc h3 { font-size: 1.02rem; margin: 0 0 0.3rem; }
.inc p { font-size: 0.9rem; color: #4a4a4a; margin: 0; }
@media (max-width: 900px) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .inc-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Zeitstrahl --- */
.timeline { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); position: relative; }
.timeline::before { content: ''; position: absolute; top: 22px; left: 8%; right: 8%; border-top: 2px dashed rgba(0, 142, 209, 0.35); }
.tl-step { position: relative; text-align: center; }
.tl-num { position: relative; z-index: 1; display: inline-flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 800; box-shadow: 0 0 0 6px var(--color-white); }
.tl-step h3 { font-size: 0.98rem; margin: 0.8rem 0 0.3rem; }
.tl-step p { font-size: 0.86rem; color: #4a4a4a; margin: 0; }
@media (max-width: 1000px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-md); } .timeline::before { display: none; } }
@media (max-width: 560px) { .timeline { grid-template-columns: minmax(0, 1fr); } .tl-step { text-align: left; display: grid; grid-template-columns: 46px 1fr; column-gap: 0.9rem; } .tl-step h3 { margin-top: 0.3rem; } .tl-step p { grid-column: 2; } .tl-num { grid-row: span 2; } }

/* --- Software-Band --- */
.software-band { background: linear-gradient(120deg, #15222b 0%, #0b3d57 55%, var(--color-primary-dark) 100%); color: rgba(255,255,255,0.85); padding: var(--space-xl) 0; }
.software-band-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.software-band h2 { margin: 0.3rem 0 0.8rem; }
.software-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.software-list li { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.software-list strong { display: block; color: #fff; }
.software-list span { font-size: 0.9rem; }
@media (max-width: 900px) { .software-band-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* --- Zusatzleistungen --- */
/* ---------- Bento: „Das steckt in jeder Website“ ---------- */
.bento-section { position: relative; overflow: hidden; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "mobil mobil dsgvo" "fast seo seo" "pflege pflege berat"; gap: 1.1rem; }
.b-mobil { grid-area: mobil; } .b-seo { grid-area: seo; } .b-dsgvo { grid-area: dsgvo; } .b-fast { grid-area: fast; } .b-berat { grid-area: berat; } .b-pflege { grid-area: pflege; }
.bento-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 60, 90, 0.06); }
.js .bento-card.reveal.is-visible { transition: opacity 600ms ease, transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }
@media (hover: hover) {
  .bento-card:hover, .js .bento-card.reveal.is-visible:hover { transform: translateY(-4px); border-color: rgba(0, 142, 209, 0.35); box-shadow: 0 18px 40px rgba(0, 60, 90, 0.12); }
}
.bento-visual { position: relative; flex: 1 1 auto; min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 1.4rem; background: radial-gradient(rgba(0, 105, 156, 0.10) 1px, transparent 1.2px) 0 0 / 16px 16px, linear-gradient(160deg, var(--color-bg-light) 0%, var(--color-primary-tint) 100%); border-bottom: 1px solid var(--color-border); }
.bento-body { padding: 1.15rem 1.35rem 1.35rem; }
.bento-body h3 { font-size: 1.08rem; margin: 0 0 0.3rem; }
.bento-body p { font-size: 0.92rem; color: #4a4a4a; margin: 0; }
/* Geräte */
.b-devices { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.b-base { fill: #d6e2ea; }
.b-phone-frame { filter: drop-shadow(0 10px 14px rgba(0, 40, 70, 0.18)); }
.b-notch { fill: #cfdbe3; }
.b-ok { transform-box: fill-box; transform-origin: center; }
.bento-card.is-visible .b-ok { animation: bPop 500ms 450ms cubic-bezier(.3,1.6,.5,1) both; }
@keyframes bPop { from { transform: scale(0); } to { transform: scale(1); } }
/* Google-Treffer */
.serp { width: 100%; max-width: 440px; background: #fff; border: 1px solid #d9e4ec; border-radius: 12px; padding: 0.9rem 1rem 1rem; box-shadow: 0 10px 24px rgba(0, 40, 70, 0.08); }
.serp-bar { display: flex; align-items: center; gap: 0.5rem; border: 1px solid #d9e4ec; border-radius: 999px; padding: 0.4rem 0.8rem; font-size: 0.85rem; color: #3b4650; margin-bottom: 0.8rem; }
.serp-bar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; }
.serp-hit { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; margin: 0 -0.7rem; border-radius: 8px; background: var(--color-primary-tint); }
.serp-url { font-size: 0.74rem; color: #3b4650; }
.serp-title { font-size: 1rem; font-weight: 600; color: #1a4fbf; }
.serp-desc { font-size: 0.8rem; color: #4a4a4a; line-height: 1.45; }
.serp-ghost { display: grid; gap: 0.4rem; margin-top: 0.8rem; }
.serp-ghost i { display: block; height: 7px; border-radius: 4px; background: #e8eef2; }
.serp-ghost i:last-child { width: 70%; }
/* DSGVO-Häkchen */
.b-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; width: 100%; max-width: 230px; }
.b-checks li { display: flex; align-items: center; gap: 0.55rem; background: #fff; border: 1px solid #d9e4ec; border-radius: 999px; padding: 0.4rem 0.85rem 0.4rem 0.45rem; font-size: 0.86rem; font-weight: 600; color: #2b3a45; box-shadow: 0 4px 10px rgba(0, 40, 70, 0.05); }
.b-checks svg { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--color-success); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; padding: 3px; }
/* Schnell online */
.b-fast .bento-visual { flex-direction: column; gap: 0.9rem; }
.b-fast-num { font: 800 3.4rem/1 var(--font-heading); color: var(--color-primary); letter-spacing: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.b-fast-num span { font-size: 1rem; font-weight: 700; color: #2b3a45; letter-spacing: 0; }
.b-fast-num .b-dash { font-size: inherit; font-weight: 700; color: inherit; margin: 0 -0.1rem; }
.b-track { width: 100%; max-width: 200px; height: 8px; border-radius: 999px; background: #d6e2ea; overflow: hidden; }
.b-track i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary) 0%, #52c0f0 100%); transform-origin: left; transform: scaleX(0.08); transition: transform 1.4s cubic-bezier(.2,.8,.2,1) 300ms; }
.bento-card.is-visible .b-track i { transform: scaleX(1); }
/* Ansprechpartner */
.b-person { display: flex; align-items: center; gap: 0.85rem; background: #fff; border: 1px solid #d9e4ec; border-radius: 14px; padding: 0.7rem 1rem 0.7rem 0.7rem; box-shadow: 0 10px 24px rgba(0, 40, 70, 0.08); }
.b-avatar { width: 52px; height: 52px; flex: none; border-radius: 12px; overflow: hidden; position: relative; }
.b-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.b-person-text { display: flex; flex-direction: column; font-size: 0.82rem; color: #4a4a4a; line-height: 1.35; }
.b-person-text strong { font-size: 0.92rem; color: var(--color-dark); }
.b-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); margin-right: 0.4rem; box-shadow: 0 0 0 3px rgba(30, 142, 90, 0.18); }
/* Editor */
.b-editor { width: 100%; max-width: 440px; background: #fff; border: 1px solid #d9e4ec; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 40, 70, 0.08); padding-bottom: 0.9rem; }
.b-editor-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid #e8eef2; font: 700 0.85rem var(--font-heading); color: #3b4650; }
.b-editor-bar i { font-family: Georgia, serif; font-style: italic; }
.b-editor-bar svg { width: 17px; height: 17px; fill: none; stroke: #3b4650; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-save { margin-left: auto; background: var(--color-primary); color: #fff; font-size: 0.74rem; border-radius: 6px; padding: 0.25rem 0.6rem; }
.b-editor-text { margin: 0.8rem 0.9rem 0.6rem; font-size: 0.92rem; color: #2b3a45; }
.b-editor-text mark { background: rgba(0, 142, 209, 0.18); color: inherit; border-radius: 3px; padding: 0 2px; }
.b-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--color-primary); vertical-align: -0.15em; margin-left: 2px; animation: bBlink 1.1s steps(1) infinite; }
@keyframes bBlink { 50% { opacity: 0; } }
.b-line { display: block; height: 7px; margin: 0.45rem 0.9rem 0; border-radius: 4px; background: #e8eef2; }
.b-line-short { width: 55%; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mobil mobil" "dsgvo fast" "seo seo" "pflege pflege" "berat berat"; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mobil" "seo" "dsgvo" "fast" "berat" "pflege"; gap: 0.9rem; }
  .bento-visual { min-height: 0; padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-card.is-visible .b-ok, .b-caret { animation: none; }
  .b-track i { transition: none; transform: none; }
  .bento-card:hover, .js .bento-card.reveal.is-visible:hover { transform: none; }
}

/* ---------- Zusatzleistungen: Intro links, Bausteine rechts ---------- */
.addons-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: start; }
.addons-intro { position: sticky; top: 110px; }
.addons-intro h2 { margin-bottom: 0.8rem; }
.addons-intro p { color: #4a4a4a; margin-bottom: 1.1rem; max-width: 42ch; }
.addons-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.addons-points li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; font-weight: 600; color: #2b3a45; }
.addons-points svg { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--color-primary-tint); fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; padding: 3px; }
.addon-grid-new { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.addon-mod { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-border); border-radius: 15px; padding: 1.25rem 1.3rem 1.3rem; box-shadow: 0 8px 24px rgba(0, 60, 90, 0.06); }
.js .addon-mod.reveal.is-visible { transition: opacity 600ms ease, transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }
@media (hover: hover) {
  .addon-mod:hover, .js .addon-mod.reveal.is-visible:hover { transform: translateY(-3px); border-color: rgba(0, 142, 209, 0.35); box-shadow: 0 16px 34px rgba(0, 60, 90, 0.11); }
}
.addon-mod-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.addon-mod-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #1aa3e3 0%, var(--color-primary-dark) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 60, 90, 0.18), 0 3px 8px rgba(0, 105, 156, 0.14); }
.addon-mod-icon svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.addon-plus { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #cfdbe3; transition: transform 300ms ease, background-color 300ms ease, border-color 300ms ease; }
.addon-plus::before, .addon-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #8a9aa6; transition: background-color 300ms ease; }
.addon-plus::after { transform: rotate(90deg); }
.addon-check { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-primary-tint); }
.addon-check svg { width: 16px; height: 16px; fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .addon-mod:hover .addon-plus { transform: rotate(90deg); background: var(--color-primary); border-color: var(--color-primary); }
  .addon-mod:hover .addon-plus::before, .addon-mod:hover .addon-plus::after { background: #fff; }
}
.addon-mod h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.addon-mod p { font-size: 0.9rem; color: #4a4a4a; margin: 0; flex: 1; }
.addon-mod a { margin-top: 0.8rem; font-weight: 700; font-size: 0.88rem; }
@media (max-width: 900px) {
  .addons-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .addons-intro { position: static; text-align: center; }
  .addons-intro p { margin-left: auto; margin-right: auto; }
  .addons-points { justify-content: center; }
}
@media (max-width: 560px) { .addon-grid-new { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .addon-plus, .addon-mod:hover .addon-plus { transition: none; transform: none; } }
.code-l1 { stroke: #5fb6e6; stroke-width: 4; stroke-linecap: round; fill: none; }
.code-l2 { stroke: #f5c542; stroke-width: 4; stroke-linecap: round; fill: none; opacity: 0.8; }
.code-br { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* --- Header: Konto-Symbol --- */
.nav-account { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-white); transition: color 0.3s ease; }
.nav-account svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .nav-account:hover { background: rgba(0, 142, 209, 0.1); }
}
.site-header.is-scrolled .nav-account { color: var(--color-dark); }

/* --- Kundenkonto (Platzhalter bis Login) --- */
.account-soon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg); box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,0.06)); }
.account-soon-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; }
.account-soon-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-soon h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.account-soon p { color: #4a4a4a; }
.account-soon-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-md); }
@media (max-width: 600px) { .account-soon { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); } .account-soon-actions .btn { width: 100%; justify-content: center; } }
.method-price { display: flex; flex-direction: column; gap: 0.2rem; background: var(--color-primary-tint); border-radius: 12px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.method-price-main { font-size: 1.5rem; font-weight: 800; color: var(--color-dark, #1a1a1a); line-height: 1.1; }
.method-price-main small { font-size: 0.8rem; font-weight: 600; color: #4a4a4a; margin-right: 0.2rem; }
.method-price-note { font-size: 0.82rem; color: #4a4a4a; }

/* --- Branding-Seite --- */
@media (min-width: 1001px) { .timeline-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pkg-footnote { text-align: center; color: #4a4a4a; font-size: 0.93rem; margin: var(--space-md) auto 0; max-width: 62ch; }
.page-hero-art { display: flex; justify-content: center; }
.brand-board { width: 100%; max-width: 440px; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35)); transform: rotate(-2deg); }
.brand-board svg { display: block; width: 100%; height: auto; }
.bb-bg { fill: #f4f7f9; }
.bb-card { fill: #fff; stroke: #e2e8ee; stroke-width: 1.5; }
.bb-mark-a { fill: var(--color-primary); }
.bb-mark-b { fill: #1f2a33; opacity: 0.9; }
.bb-ink { fill: #1f2a33; }
.bb-soft { fill: #d6dee5; }
.bb-type { font-size: 64px; font-weight: 800; fill: #1f2a33; font-family: inherit; }
.bb-c1 { fill: var(--color-primary); } .bb-c2 { fill: #1f2a33; } .bb-c3 { fill: #f5c542; }
.bb-bizcard { fill: #1f2a33; }
.bb-ink-light { fill: #fff; } .bb-soft-light { fill: rgba(255, 255, 255, 0.35); }
@media (max-width: 1000px) { .page-hero-art { order: -1; margin-bottom: var(--space-md); } .brand-board { max-width: 300px; } }
.use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.use-card { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
@media (hover: hover) {
  .use-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 30, 45, 0.09); border-color: var(--color-primary); }
}
.use-card strong { font-size: 1.02rem; color: #1a1a1a; }
.use-text { font-size: 0.9rem; color: #4a4a4a; flex: 1; }
.use-link { font-size: 0.9rem; font-weight: 700; color: var(--color-primary); margin-top: 0.4rem; }
@media (max-width: 900px) { .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .use-grid { grid-template-columns: minmax(0, 1fr); } }
/* Cross-Selling-Karten mit Foto (Leistungs- und Branchenseiten) – gleicher Look wie die Leistungsvorschau der Startseite */
.use-card--photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 0; border: 0; border-radius: 15px; background: var(--color-dark); color: #fff; box-shadow: 0 14px 34px rgba(15, 30, 45, 0.14); text-decoration: none; transition: transform 250ms ease, box-shadow 250ms ease; }
.xs-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; pointer-events: none; user-select: none; -webkit-user-select: none; }
.use-card--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,18,24,0) 18%, rgba(10,18,24,0.5) 42%, rgba(10,18,24,0.88) 68%, rgba(10,18,24,0.96) 100%); }
@media (hover: hover) {
  .use-card--photo:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 22px 44px rgba(15, 30, 45, 0.22); }
  .use-card--photo:hover .xs-img { transform: scale(1.05); }
}
.xs-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.25rem 1.3rem; }
.use-card--photo strong { color: #fff; font-family: var(--font-heading); font-size: 1.12rem; margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.use-card--photo .use-text { color: rgba(255, 255, 255, 0.86); font-size: 0.88rem; line-height: 1.45; margin: 0 0 0.5rem; flex: none; }
.use-card--photo .use-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.84rem; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.4rem 0.85rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 200ms ease, border-color 200ms ease; }
@media (hover: hover) {
  .use-card--photo:hover .use-link { background: var(--color-primary); border-color: var(--color-primary); }
}
@media (max-width: 520px) { .use-card--photo { min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .use-card--photo:hover { transform: none; } .use-card--photo:hover .xs-img { transform: none; } }

/* --- Über uns: Portrait (bewusst klein, ohne Zoom) --- */
.about-grid:has(.about-person) { grid-template-columns: auto minmax(0, 1fr); }
.about-person { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.about-portrait { width: 240px; aspect-ratio: 4 / 5; border-radius: 19px; overflow: hidden; box-shadow: 0 18px 40px rgba(15, 30, 45, 0.16); position: relative; background: var(--color-bg-light); }
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.about-portrait::after { content: ''; position: absolute; inset: 0; }
.about-person figcaption { text-align: center; line-height: 1.35; }
.about-person figcaption strong { display: block; font-size: 1.05rem; }
.about-person figcaption span { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 800px) { .about-grid:has(.about-person) { grid-template-columns: 1fr; } .about-portrait { width: 200px; } }

/* --- Vergleichstabelle --- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; font-size: 0.93rem; }
.cmp-table th, .cmp-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid #edf1f4; vertical-align: top; }
.cmp-table thead th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; background: #f8fafc; }
.cmp-table tbody th { font-weight: 600; color: #1f2a33; width: 24%; }
.cmp-table td { color: #3b4652; }
.cmp-table .cmp-us { background: var(--color-primary-tint); color: #1a1a1a; font-weight: 600; }
.cmp-table thead .cmp-us { background: var(--color-primary); color: #fff; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-note { color: #6b7280; font-size: 0.82rem; margin: 0.8rem 0 0; }

/* --- Fotos statt Illustrationen (Leistungen, Druck/Stick) --- */
.method-photo { padding: 0; background: linear-gradient(135deg, #eaf4fa 0%, #d8ecf7 100%); aspect-ratio: 16 / 10; overflow: hidden; }
.method-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
/* Fehlt ein Bild noch, bleibt eine ruhige Fläche mit Markenverlauf statt eines kaputten Bildes. */
.method-photo.is-missing::before { content: ''; position: absolute; inset: 0; background: url('/img/logo-mark.svg') center / 22% no-repeat; opacity: 0.12; }
.method-photo { position: relative; aspect-ratio: 3 / 2; }

/* --- Kundenkonto: Login-Pop-up & Menü --- */
.acc-open, .acc-open body { overflow: hidden; }
.acc-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.acc-modal[hidden] { display: none; }
.acc-backdrop { position: absolute; inset: 0; background: rgba(15, 25, 35, 0.55); backdrop-filter: blur(3px); }
.acc-dialog { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: 15px; padding: 2rem 1.8rem 1.4rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); animation: accIn 220ms ease; }
@keyframes accIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-dialog { animation: none; } }
.acc-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f2f5f8; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.acc-close svg { width: 18px; height: 18px; stroke: #3b4652; stroke-width: 2; stroke-linecap: round; fill: none; }
.acc-dialog h2 { font-size: 1.45rem; margin: 0 0 0.35rem; }
.acc-sub { color: #4a4a4a; font-size: 0.92rem; margin: 0 0 1.1rem; }
.acc-social { display: grid; gap: 0.5rem; }
.acc-soc { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1rem; border: 1px solid #d5dde4; border-radius: 10px; background: #fff; font: inherit; font-size: 0.93rem; font-weight: 600; color: #1a1a1a; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
@media (hover: hover) {
  .acc-soc:hover { border-color: #9fb3c2; background: #f8fafc; }
}
.acc-soc svg { width: 20px; height: 20px; flex: none; }
.acc-soc[data-provider="apple"] svg { color: #000; }
.acc-or { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0; color: #8a95a0; font-size: 0.82rem; }
.acc-or::before, .acc-or::after { content: ''; flex: 1; height: 1px; background: #e3e8ed; }
.acc-form { display: grid; gap: 0.8rem; }
.acc-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: #1f2a33; }
.acc-field input { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid #d5dde4; border-radius: 10px; font: inherit; font-size: 0.95rem; }
.acc-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 142, 209, 0.15); }
.acc-field small { display: block; color: #6b7280; font-size: 0.78rem; margin-top: 0.25rem; }
.acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.acc-pw { position: relative; }
.acc-pw input { padding-right: 2.8rem; }
.acc-pw-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.acc-pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: #6b7280; stroke-width: 1.8; }
.acc-pw-toggle.is-on svg { stroke: var(--color-primary); }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.acc-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.86rem; color: #3b4652; }
.acc-check input { width: auto; margin-top: 0.15rem; }
.acc-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.acc-submit { width: 100%; justify-content: center; margin-top: 0.2rem; }
.acc-msg { margin: 0; font-size: 0.86rem; background: #f4f7fa; border-left: 3px solid var(--color-primary); border-radius: 8px; padding: 0.65rem 0.8rem; color: #1f2a33; }
.acc-msg.is-ok { border-left-color: #1f9d55; }
.acc-switch { text-align: center; font-size: 0.9rem; color: #4a4a4a; margin: 1rem 0 0; }
.acc-foot { text-align: center; font-size: 0.75rem; color: #8a95a0; margin: 1rem 0 0; }
@media (max-width: 480px) { .acc-dialog { padding: 1.6rem 1.1rem 1.1rem; border-radius: 12px; } .acc-grid2 { grid-template-columns: 1fr; } }
.acc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 0.9rem; flex: none; }
.acc-avatar-sm { width: 32px; height: 32px; font-size: 0.78rem; }
.acc-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1500; width: 280px; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 30, 45, 0.22); border: 1px solid #e3e8ed; padding: 0.5rem; color: #1a1a1a; }
.acc-menu[hidden] { display: none; }
.acc-menu-head { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.6rem 0.8rem; border-bottom: 1px solid #edf1f4; margin-bottom: 0.3rem; }
.acc-menu-head strong { display: block; font-size: 0.95rem; }
.acc-menu-head div span { display: block; font-size: 0.8rem; color: #6b7280; }
.acc-menu nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.6rem; border-radius: 8px; color: #1f2a33; text-decoration: none; font-size: 0.92rem; }
@media (hover: hover) {
  .acc-menu nav a:hover { background: var(--color-primary-tint); }
}
.acc-menu nav svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc-logout { width: 100%; text-align: left; margin-top: 0.3rem; padding: 0.6rem; border: 0; border-top: 1px solid #edf1f4; background: none; font: inherit; font-size: 0.92rem; color: #b42318; cursor: pointer; border-radius: 0 0 8px 8px; }
.nav-account.is-logged-in { padding: 0; }
.acc-dialog h2 { padding-right: 2.4rem; }
/* Pop-up „Im Warenkorb“ (Stil wie Login-Pop-up) */
.cart-added { max-width: 460px; }
.cart-added-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.cart-added-head h2 { margin: 0; }
.cart-added-head .acc-sub { margin: 0.1rem 0 0; }
.cart-added-check { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e7f7ee; display: flex; align-items: center; justify-content: center; }
.cart-added-check svg { width: 24px; height: 24px; fill: none; stroke: var(--color-success); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cart-added-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.85rem; border: 1px solid #e3e8ed; border-radius: 10px; background: #f8fafc; }
.cart-added-item img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 10px; }
.cart-added-info { min-width: 0; }
.cart-added-info strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.cart-added-info span { display: block; font-size: 0.82rem; color: #6b7280; line-height: 1.4; }
.cart-added-price { text-align: right; white-space: nowrap; }
.cart-added-price strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; }
.cart-added-price span { font-size: 0.75rem; color: #6b7280; }
.cart-added-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.9rem; font-size: 0.92rem; color: #3b4652; }
.cart-added-sum strong { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-dark); white-space: nowrap; }
.cart-added-sumnote { margin: 0.1rem 0 0; text-align: right; font-size: 0.76rem; color: #8a95a0; }
.cart-added-tip { margin-top: 0.9rem; background: var(--color-primary-tint); border-radius: 8px; padding: 0.7rem 0.85rem; font-size: 0.86rem; color: #1f2a33; line-height: 1.5; }
.cart-added-tip strong { color: var(--color-primary-dark); }
.cart-added-actions { display: grid; gap: 0.55rem; margin-top: 1.1rem; }
.cart-added-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 420px) { .cart-added-item { grid-template-columns: auto minmax(0, 1fr); } .cart-added-price { grid-column: 2; text-align: left; } .cart-added-price strong { display: inline; margin-right: 0.3rem; } }
.nav-account { text-decoration: none; }
@media (hover: hover) {
  .nav-account:hover { text-decoration: none; }
}

/* --- Footer: Social Media --- */
.footer-social { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; gap: 0.55rem; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); transition: background 200ms ease, color 200ms ease, transform 200ms ease; }
@media (hover: hover) {
  .footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }
}
.footer-social svg { width: 19px; height: 19px; }
@media (max-width: 680px) {
  .cmp-wrap { overflow: visible; }
  .cmp-table { min-width: 0; border: 0; background: none; }
  .cmp-table thead { display: none; }
  .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }
  .cmp-table tr { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 0.7rem; overflow: hidden; }
  .cmp-table tbody th { background: #f8fafc; width: 100%; }
  .cmp-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; }
  .cmp-table td::before { content: attr(data-label); color: #6b7280; font-weight: 500; font-size: 0.82rem; flex: none; max-width: 48%; }
  .cmp-table td { text-align: right; }
}
.method-photo.is-missing { display: none; }
@media (max-width: 680px) { .cmp-table td::before { text-align: left; } }

/* --- FAQ-Seite --- */
.faq-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.faq-jump { padding: 0.45rem 0.95rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: #1f2a33; text-decoration: none; background: #fff; }
@media (hover: hover) {
  .faq-jump:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
.faq-cat { margin-top: var(--space-xl); scroll-margin-top: 96px; }
.faq-cat:first-of-type { margin-top: var(--space-md); }
.faq-more { text-align: center; margin: var(--space-md) 0 0; font-weight: 700; }
.partner-section { padding-top: 0; }
.branchen-all { margin: var(--space-md) 0 0; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; }
@media (min-width: 1001px) { .timeline-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 1000px) { .timeline-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wörter werden nie getrennt. Sehr lange Einzelwörter in Überschriften (AGB/Datenschutz)
   bekommen auf schmalen Handys stattdessen eine etwas kleinere Schrift. */
@media (max-width: 440px) { h1.h1-long { font-size: 1.75rem; } }
@media (max-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 420px) { .footer-grid > div:last-child { grid-column: 1 / -1; } }

/* --- Leistungen-Dropdown im Hauptmenü --- */
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a { display: inline-flex; align-items: center; gap: 0.25rem; }
.nav-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.nav-dd-toggle { display: none; }
.nav-dd { position: absolute; top: 100%; left: 50%; width: 620px; margin-top: 18px; padding: 0.9rem; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 30, 45, 0.18); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 120; }
/* unsichtbare Brücke, damit das Menü beim Weg vom Link zum Panel offen bleibt */
.nav-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-dd::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); transform: translateX(-50%) rotate(45deg); }
.has-dropdown:focus-within > .nav-dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms ease, transform 180ms ease, visibility 0s; }
@media (hover: hover) {
  .has-dropdown:hover > .nav-dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms ease, transform 180ms ease, visibility 0s; }
}
.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
@media (hover: hover) {
  .has-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
.nav-dd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.site-header .nav-links a.nav-dd-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.75rem; border-radius: 12px; color: var(--color-dark); transition: background 150ms ease; }
.site-header .nav-links a.nav-dd-item:focus-visible, .site-header .nav-links a.nav-dd-item[aria-current="page"] { background: #f1f6fa; color: var(--color-dark); }
@media (hover: hover) {
  .site-header .nav-links a.nav-dd-item:hover { background: #f1f6fa; color: var(--color-dark); }
}
.nav-dd-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; transition: background 150ms ease; }
.nav-dd-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 150ms ease; }
@media (hover: hover) {
  .nav-dd-item:hover .nav-dd-icon { background: var(--color-primary); }
  .nav-dd-item:hover .nav-dd-icon svg { stroke: #fff; }
}
.nav-dd-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; }
.nav-dd-text strong { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; }
.nav-dd-text small { font-size: 0.8rem; color: #6b7480; font-weight: 400; }
.site-header .nav-links a.nav-dd-all { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; padding: 0.75rem 0.85rem 0.2rem; border-top: 1px solid #edf1f4; font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; color: var(--color-primary); }
@media (hover: hover) {
  .site-header .nav-links a.nav-dd-all:hover { color: var(--color-primary-dark); }
}
.nav-m-only { display: none; }
/* --- Mobiles Menü (nur ≤ 900px) ---------------------------------------------
   Aufbau: Leistungen als Kacheln (wichtigster Einstieg), darunter die übrigen
   Seiten als Zeilen, Kundenkonto und unten eine Kontaktleiste mit
   Erstberatung, Anruf und WhatsApp. */
@media (max-width: 900px) {
  html:has(.nav-links.open) { overflow: hidden; }
  .nav-links { align-items: stretch; gap: 0; padding: 0.9rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); text-align: left; opacity: 0; transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease; }
  .nav-links.open { opacity: 1; }
  .nav-links > li { order: 2; }
  .nav-links > li.has-dropdown { display: block; width: 100%; }
  .nav-links > li.nav-m-account { order: 3; }
  .nav-links > li.nav-m-foot { order: 4; padding-top: 1.4rem; }
  .nav-m-only { display: block; }
  /* Seitenlinks als Zeilen mit Pfeil */
  .site-header .nav-links > li:not(.has-dropdown):not(.nav-m-foot) > a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 0.2rem; border-bottom: 1px solid #eef2f5; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-dark); }
  .site-header .nav-links > li:not(.has-dropdown):not(.nav-m-foot):not(.nav-m-account) > a::after { content: ""; width: 8px; height: 8px; border-top: 2px solid #9aa7b1; border-right: 2px solid #9aa7b1; transform: rotate(45deg); flex: none; margin-right: 4px; }
  .site-header .nav-links > li > a[aria-current="page"] { color: var(--color-primary); }
  /* Leistungen: Zeile wie die anderen Seitenlinks, Kacheln erst nach Antippen (main.js setzt .dd-open) */
  .site-header .nav-links > li.has-dropdown > a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 0.2rem; border-bottom: 1px solid #eef2f5; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-dark); }
  .nav-dd-toggle { display: none; }
  .nav-links .nav-caret { width: 18px; height: 18px; color: #9aa7b1; stroke-width: 2.4; }
  .has-dropdown:focus-within .nav-caret { transform: none; }
  .has-dropdown.dd-open .nav-caret { transform: rotate(180deg); }
  .nav-dd, .has-dropdown:hover > .nav-dd, .has-dropdown:focus-within > .nav-dd { display: none; position: static; width: 100%; margin: 0; padding: 0.8rem 0 1rem; border: none; border-bottom: 1px solid #eef2f5; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; transition: none; text-align: left; }
  .has-dropdown.dd-open > .nav-dd { display: block; }
  .nav-dd::before, .nav-dd::after { display: none; }
  .nav-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .site-header .nav-links a.nav-dd-item { flex-direction: row; align-items: center; gap: 0.6rem; height: 100%; padding: 0.6rem 0.65rem; background: #f6f9fb; border: 1px solid #e6edf2; border-radius: 12px; }
  .nav-links .nav-dd-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
  .nav-links .nav-dd-icon svg { width: 17px; height: 17px; }
  .site-header .nav-links a.nav-dd-item[aria-current="page"] { background: var(--color-primary-tint); border-color: rgba(0, 142, 209, 0.35); }
  .nav-dd-text strong { font-size: 0.84rem; line-height: 1.25; }
  .nav-dd-text small { display: none; }
  .site-header .nav-links a.nav-dd-all { justify-content: flex-start; gap: 0.35rem; margin-top: 0.75rem; padding: 0.2rem 0.2rem 0; border-top: none; font-size: 0.86rem; }
  /* Kundenkonto */
  .site-header .nav-links > li.nav-m-account.nav-m-only > a { justify-content: flex-start; gap: 0.8rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .nav-m-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; }
  .nav-m-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-m-acc-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
  .nav-m-acc-text small { font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: #6b7480; }
  /* Kontaktleiste */
  .site-header .nav-links .nav-m-cta { display: flex; justify-content: center; width: 100%; color: #fff; padding: 0.95rem 1rem; font-size: 1rem; }
  .nav-m-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.55rem; }
  .site-header .nav-links .nav-m-quick a { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.75rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--color-dark); background: #fff; }
  .nav-m-quick svg { width: 18px; height: 18px; flex: none; }
  .nav-m-quick .nav-m-wa svg { color: #1fa855; }
  .nav-m-quick .nav-m-tel svg { color: var(--color-primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-m-note { margin: 0.7rem 0 0; font-size: 0.8rem; color: #6b7480; text-align: center; }
  /* Konto-Symbol wandert ins Menü */
  .nav-cta .nav-account { display: none; }
  /* Burger wird beim Öffnen zum X */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-links { transition: none; } }
/* Schmale Handys: Symbol über den Text, damit lange Wörter (z. B. „Arbeitsbekleidung“) in die Kachel passen */
@media (max-width: 400px) { .site-header .nav-links a.nav-dd-item { flex-direction: column; align-items: flex-start; gap: 0.45rem; } .nav-dd-text strong { font-size: 0.82rem; } }

/* Geöffnetes Mobile-Menü: Header ist weiß, also Konto- und Warenkorb-Symbol dunkel */
@media (max-width: 900px) { .site-header:has(.nav-links.open) .nav-account, .site-header:has(.nav-links.open) .nav-cart { color: var(--color-dark); } }

/* --- Handy-Optimierung (iPhone & Co.) ------------------------------------ */
@media (max-width: 700px) {
  /* Abschnitts-Abstände am Handy etwa halbieren */
  :root { --space-2xl: 3.5rem; --space-xl: 2.75rem; }

  /* Produktkacheln zweispaltig (Textil-Sortiment, Print-Produkte) */
  .product-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .product-card { border-radius: 14px; }
  .product-card-body { padding: 0.7rem 0.75rem 0.8rem; gap: 0.25rem; }
  .product-card-name { font-size: 0.84rem; }
  .product-card-price { font-size: 0.98rem; }
  .product-card-price small { display: inline-block; margin: 0.2rem 0 0; }
  .product-card-cta { font-size: 0.76rem; padding-top: 0.55rem; }
  .product-card-cta::after { width: 26px; height: 26px; }
  #catalogGrid .product-card > img { padding: 0.6rem 0.6rem 0.2rem; }

  /* Filter und FAQ-Themen als seitlich wischbare Zeile */
  .catalog-filters, .faq-nav { flex-wrap: nowrap; overflow-x: auto; min-width: 0; width: calc(100% + 2 * var(--space-md)); margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); padding: 0.1rem var(--space-md) 0.3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .catalog-filters::-webkit-scrollbar, .faq-nav::-webkit-scrollbar { display: none; }
  .filter-chip, .faq-jump { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }

  /* Fußbereich: Logo und Text über die volle Breite, Links zweispaltig */
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:first-child p { max-width: none !important; }
}

/* KI-Kennzeichen (EU-Icon „AI“, weiß mit 50 % Transparenz – so dezent wie zulässig) */
.ai-mark { position: absolute; top: 6px; right: 6px; z-index: 3; pointer-events: none; font-family: var(--font-body); font-size: 8.5px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); background: rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 2px; padding: 2px 3px; }
.ai-mark-hero { top: 86px; right: 10px; }

/* --- Startseite: Foto-Hero ------------------------------------------------- */
.hero.page-hero--image .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero.page-hero--image .hero-visual { display: none; }
.hero.page-hero--image h1 { max-width: 20ch; }
.hero.page-hero--image .hero-lead { max-width: 48ch; }
.hero.page-hero--image .hero-note { max-width: 52ch; }

/* --- Startseite: Standort Trier mit animierter Karte ---------------------- */
.region-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-xl); align-items: center; }
.region-grid h2 { margin-bottom: var(--space-sm); }
.region-grid > div > p { color: #4a4a4a; max-width: 52ch; }
.region-points { list-style: none; margin: var(--space-md) 0 var(--space-lg); padding: 0; display: grid; gap: 0.75rem; }
.region-points li { position: relative; padding-left: 2rem; }
.region-points li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008ED1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.region-points strong { display: block; font-family: var(--font-heading); font-size: 1rem; }
.region-points span { display: block; color: #5b6570; font-size: 0.92rem; }
.region-map { display: flex; justify-content: center; }
.dmap { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.dm-land { fill: var(--color-primary-tint); stroke: #b7dcef; stroke-width: 1.2; stroke-linejoin: round; }
.dm-arc { fill: none; stroke: rgba(0, 142, 209, 0.45); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dm-flow { fill: none; stroke: var(--color-primary); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.07 0.93; stroke-dashoffset: 1.07; opacity: 0; }
.dm-dot { fill: #fff; stroke: var(--color-primary); stroke-width: 1.8; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); }
.dm-trier { fill: var(--color-primary); stroke: #fff; stroke-width: 2.5; }
.dm-trier-core { fill: #fff; }
.dm-pulse { fill: none; stroke: var(--color-primary); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dm-label text { font-family: var(--font-heading); font-weight: 800; font-size: 15px; fill: var(--color-dark); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
/* Animation startet, sobald die Karte ins Bild scrollt (.reveal → .is-visible) */
.region-map.is-visible .dm-arc { animation: dmDraw 1.1s cubic-bezier(0.45, 0, 0.2, 1) forwards; animation-delay: calc(0.25s + var(--i) * 0.07s); }
.region-map.is-visible .dm-dot { animation: dmDot 0.4s ease-out forwards; animation-delay: calc(1.05s + var(--i) * 0.07s); }
.region-map.is-visible .dm-flow { animation: dmFlow 3.2s linear infinite; animation-delay: calc(1.8s + var(--i) * 0.45s); }
.region-map.is-visible .dm-pulse { animation: dmPulse 2.6s ease-out infinite; }
.region-map.is-visible .dm-pulse-2 { animation-delay: 1.3s; }
@keyframes dmDraw { to { stroke-dashoffset: 0; } }
@keyframes dmDot { to { opacity: 1; transform: scale(1); } }
@keyframes dmFlow { 0% { stroke-dashoffset: 1.07; opacity: 0; } 8% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 62%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dmPulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@media (prefers-reduced-motion: reduce) {
  .dm-arc { stroke-dashoffset: 0; }
  .dm-dot { opacity: 1; transform: none; }
  .region-map.is-visible .dm-arc, .region-map.is-visible .dm-dot, .region-map.is-visible .dm-flow, .region-map.is-visible .dm-pulse { animation: none; }
}
@media (max-width: 900px) {
  .region-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .region-map { order: -1; }
  .dmap { max-width: 300px; }
}


/* iOS zoomt beim Antippen in jedes Eingabefeld mit Schrift unter 16px.
   Auf Touch-Geräten deshalb mindestens 16px – !important, weil viele
   Feld-Regeln (Konfigurator, Warenkorb, Kontakt) kleinere Größen setzen. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* Spam-Schutz: unsichtbares Feld, das nur Bots ausfüllen (Kontakt, Warenkorb) */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-ok { color: #1e7d4f; }
.form-status.is-error { color: #b23b3b; }