/* =========================================================
   RY-Gerüst — Design System (Kern)
   Farben und Schriften sind Variablen. Jede Webseite setzt ihre Werte in
   assets/css/tokens.css (wird NACH dieser Datei geladen). Diese Datei bleibt
   in neuen Webseiten unverändert, damit Kern-Updates übernommen werden können.
   Standardwerte unten = neutrale Musterpalette der Vorlage.
   ========================================================= */

:root {
  /* Farben (Musterpalette) */
  --color-bg: #ffffff;
  --color-surface: #f4f6f9;
  --color-surface-alt: #eceff4;
  --color-border: #dde3ea;
  --color-text: #1b2230;
  --color-text-muted: #4a5566;
  --color-text-faint: #5d6878;   /* auf Weiß mind. 4,5:1 (Härtung E-12) */

  --color-navy: #1f2a37;
  --color-navy-deep: #141c26;
  --color-navy-light: #2e3b4c;

  --color-accent: #3b6fd8;
  --color-accent-hover: #2f5cb8;
  --color-accent-dark: #244a93;
  --color-accent-light: #e8effc;

  --color-teal: #2d8a7a;
  --color-teal-soft: rgba(45, 138, 122, 0.09);

  --color-success: #1e7b4f;
  --color-warning: #9a6400;
  --color-error: #b3261e;

  /* Farben auf dunklem Grund (Navy-Abschnitte, Hero, Footer) */
  --color-on-dark: #e8ecf2;
  --color-on-dark-muted: #b7c0cc;
  --color-highlight: #8fc3ff;
  --color-highlight-soft: #b3d6ff;

  /* RGB-Kanäle für Transparenzen: rgba(var(--rgb-accent), 0.1) */
  --rgb-accent: 59, 111, 216;
  --rgb-accent-soft: 110, 140, 220;
  --rgb-teal: 45, 138, 122;
  --rgb-teal-dark: 34, 105, 93;
  --rgb-teal-deep: 20, 70, 62;
  --rgb-navy: 31, 42, 55;
  --rgb-navy-deep: 20, 28, 38;
  --rgb-highlight: 143, 195, 255;
  --rgb-success: 30, 123, 79;

  /* Schriften (tokens.css setzt eigene Familien, fonts.css liefert @font-face) */
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.625rem;
  --text-hero: 3.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(var(--rgb-navy), 0.03), 0 2px 8px -2px rgba(var(--rgb-navy), 0.05);
  --shadow-md: 0 6px 16px -6px rgba(var(--rgb-navy), 0.08), 0 16px 40px -12px rgba(var(--rgb-navy), 0.10);
  --shadow-lg: 0 20px 48px -16px rgba(var(--rgb-navy), 0.16);

  /* Pastellflächen (aus Akzent und Sekundärfarbe abgeleitet) */
  --pastel-blue: rgba(var(--rgb-accent), 0.12);
  --pastel-peri: rgba(var(--rgb-accent-soft), 0.13);
  --pastel-cyan: rgba(var(--rgb-teal), 0.09);
  --pastel-navy: rgba(var(--rgb-navy), 0.06);
  /* Back-compat aliases used by the appended preview layer */
  --pastel-teal: rgba(var(--rgb-accent), 0.12);
  --pastel-lilac: rgba(var(--rgb-accent-soft), 0.10);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Base */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 4.4vw, var(--text-hero)); font-weight: 600; }
h2 { font-size: clamp(1.625rem, 3.2vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text-muted); }
strong { color: var(--color-text); font-weight: 600; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) {
  .container, .container-narrow { padding: 0 var(--space-6); }
}

.section { padding: var(--space-9) 0; }
.section--sm { padding: var(--space-7) 0; }
.section--alt { background: var(--color-surface); }
.section--navy { background: var(--color-navy); color: var(--color-on-dark); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: var(--color-on-dark-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: inline-block;
}
.section--navy .eyebrow { color: var(--color-highlight); }

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.6;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
/* Sonderbreite nur bei flacher Navigation - die braucht mehr Platz als der
   regulaere Container. Mit Aufklappmenue (site-header ohne --wide) bleibt es
   bei --container (1200px), damit Kopfzeile, Inhalt und Fusszeile fluchten. */
.site-header--wide .container.site-header__inner { max-width: 1440px; }

/* Anker-Sprungziele (Inhalts-Ueberschriften, Listenpunkte mit id) sollen
   nicht unter dem sticky Header (68px) verschwinden - sonst wirkt der
   Sprung zu weit nach unten, weil die Ueberschrift selbst verdeckt ist. */
:target,
h1[id], h2[id], h3[id], h4[id],
li[id] {
  scroll-margin-top: 100px;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}
.logo svg { width: 32px; height: 32px; flex-shrink: 0; }
.logo span em { font-style: normal; color: var(--color-accent); font-weight: 600; }
.logo { flex-shrink: 0; }
.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
/* Header wordmark (aspect ~12.4:1): legible without the tagline */
.brand-logo--wordmark { height: 24px; }
@media (max-width: 480px) { .brand-logo--wordmark { height: 21px; } }
/* Footer full logo incl. tagline (aspect ~7.5:1) */
.logo--footer .brand-logo--full { height: 46px; }
@media (max-width: 480px) { .logo--footer .brand-logo--full { height: 38px; } }

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.nav a {
  font-size: 0.8125rem;
  color: var(--color-text);
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.nav a:hover { color: var(--color-accent); background: var(--color-surface); }
.nav a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-light); }

.header-cta { display: none; }

@media (min-width: 1300px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
}
.menu-toggle svg { width: 18px; height: 18px; }

@media (min-width: 1300px) {
  .menu-toggle { display: none; }
}

/* Mit Aufklappmenue braucht die Kopfzeile nur noch ca. 815px statt 1251px -
   die waagerechte Navigation kann deshalb deutlich frueher erscheinen als
   die 1300px, die die flache Fassung benoetigt. */
@media (min-width: 1100px) {
  .site-header:not(.site-header--wide) .nav { display: flex; }
  .site-header:not(.site-header--wide) .header-cta { display: inline-flex; }
  .site-header:not(.site-header--wide) .menu-toggle { display: none; }
  .site-header:not(.site-header--wide) .mobile-nav { display: none !important; }
}

/* Aufklappmenue in der Hauptnavigation (Option "Dropdown-Navigation") */
.nav__group { position: relative; display: inline-flex; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: 0;
  padding: 7px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.nav__toggle:hover { color: var(--color-accent); background: var(--color-surface); }
.nav__group.is-active > .nav__toggle { color: var(--color-accent); background: var(--color-accent-light); }
.nav__chevron { transition: transform var(--transition-fast); flex-shrink: 0; }
.nav__group.is-open > .nav__toggle .nav__chevron { transform: rotate(180deg); }
.nav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 15rem;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.nav__group.is-open > .nav__menu { display: block; }
.nav__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-text);
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--color-surface); color: var(--color-accent); }
.nav__menu a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-light); }

/* Mobile nav */
.mobile-nav__label {
  padding: 10px 4px 2px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-faint);
}
.mobile-nav__sub a { padding-left: 1.25rem; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: #fff;
  padding: var(--space-4) 0 var(--space-5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0; }
.mobile-nav a {
  display: block;
  padding: 12px var(--space-5);
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
  border-bottom: 1px solid var(--color-surface-alt);
}
.mobile-nav a:hover { color: var(--color-accent); }
.mobile-nav .btn { margin: var(--space-4) var(--space-5) 0; display: inline-flex; }

@media (min-width: 1300px) {
  .mobile-nav { display: none !important; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(var(--rgb-teal-dark), 0.45);
}
.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: #fff;
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--navy {
  background: var(--color-navy);
  color: #fff;
}
.btn--navy:hover { background: var(--color-navy-light); }
.btn--lg { padding: 14px 26px; font-size: var(--text-base); }
.btn .arrow { transition: transform var(--transition-fast); }
.btn:hover .arrow { transform: translateX(3px); }
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .btn-row,
  .hero__ctas,
  .page-hero__ctas {
    width: 100%;
  }
}

.site-header .header-cta { display: none; }
@media (min-width: 1300px) {
  .site-header .header-cta { display: inline-flex; }
}

/* Hero */
.hero {
  position: relative;
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(var(--rgb-teal), 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(var(--rgb-navy), 0.06), transparent 60%),
    var(--color-bg);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero__title { margin-bottom: var(--space-5); }
.hero__sub { margin-bottom: var(--space-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.hero__trust {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
  max-width: 48ch;
}
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grids */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.grid > * { min-width: 0; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card h3, .card p { overflow-wrap: break-word; }
/* Stretch only when used inside a grid row that should equalize heights */
.cards > .card,
.grid > .card,
.modules > .card,
.values > .card,
.scenarios > .card {
  height: 100%;
}
.card:hover {
  border-color: var(--color-on-dark-muted);
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.card p { font-size: var(--text-sm); }
.card__link {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--transition-fast);
}
.card__link:hover { gap: 10px; }

/* Download-Karten (downloads.php) */
.download-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.download-card:hover { border-color: var(--color-on-dark-muted); box-shadow: var(--shadow-md); }
.download-card__head { margin-bottom: var(--space-3); }
.download-card__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.download-card__head h3 { font-size: var(--text-lg); margin: 0 0 0.25rem; overflow-wrap: break-word; }
.download-card__subtitle { color: var(--color-text-faint); font-size: var(--text-sm); margin: 0; }
.download-card__teaser { font-size: var(--text-sm); overflow-wrap: break-word; }
.download-card__details {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.download-card__details li { position: relative; padding-left: 1.2em; margin-bottom: 0.4em; }
.download-card__details li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
.download-card__footer { margin-top: auto; padding-top: var(--space-3); }
.download-card__footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.download-card__count {
  display: block;
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Shop-Produktkarten (Shortcode [produkt id="..."]) - nutzt die
   bestehende .card als Basis, ergänzt nur Produkt-spezifische Teile. */
.product__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.product__price {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-accent-hover);
  margin: var(--space-2) 0 0;
}
.product__price-note { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-faint); }
.product__discounts {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.product__discounts li { margin-bottom: 0.2em; }

.product__description { font-size: var(--text-sm); overflow-wrap: break-word; }
.product__description p { margin: 0 0 0.6em; }
.product__description p:last-child { margin-bottom: 0; }
.product__buy {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.product__qty { width: 4.5rem; flex: 0 0 auto; }
.product__buy .btn { flex: 1 1 auto; }


/* Feature row (image + text alternating) */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .feature--reverse .feature__media { order: 2; }
}
.feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* Section banner figure (full-width image inside a section) */
.section-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}
.section-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* List with checkmark */
.checklist {
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  position: relative;
  padding-left: 34px;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: var(--color-accent-light);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
  background-color: var(--color-accent);
  border-radius: 5px;
}
.section--navy .checklist li { color: #e0e6ef; }
.section--navy .checklist li::before { background-color: var(--color-highlight); }

/* Stats / value props row */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border);
}
.value__badge {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.value h3 { font-size: var(--text-base); margin-bottom: var(--space-2); font-weight: 600; }
.value p { font-size: var(--text-sm); }

/* Company history */
.history-intro {
  max-width: 72ch;
}
.history-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (min-width: 720px) {
  .history-stats { grid-template-columns: repeat(3, 1fr); }
}
.history-stats div {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.history-stats strong {
  display: block;
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  margin-bottom: 8px;
}
.history-stats span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), rgba(var(--rgb-teal), 0.08));
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
}
.timeline__year {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--color-surface);
}
.timeline__content {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.timeline__content h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.timeline__content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (min-width: 860px) {
  .timeline {
    gap: var(--space-6);
  }
  .timeline::before {
    left: 92px;
  }
  .timeline__item {
    grid-template-columns: 144px 1fr;
  }
  .timeline__year {
    width: 72px;
    height: 72px;
    font-size: var(--text-base);
    margin-left: 56px;
  }
  .timeline__content {
    padding: var(--space-6);
  }
}

/* CTA block */
.cta-block {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 80% 0%, rgba(var(--rgb-teal), 0.25), transparent 60%);
  pointer-events: none;
}
.cta-block > * { position: relative; }
.cta-block h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-block p { color: var(--color-on-dark-muted); max-width: 52ch; margin: 0 auto var(--space-6); }
.cta-block .btn--primary { background: #fff; color: var(--color-navy); }
.cta-block .btn--primary:hover { background: var(--color-accent-light); color: var(--color-navy); }
.cta-block .btn--ghost { border-color: rgba(255,255,255,0.3); color: #fff; background: transparent; }
.cta-block .btn--ghost:hover { border-color: #fff; color: #fff; }
.cta-block .btn-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* FAQ */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-fast);
}
.faq details[open] { border-color: var(--color-accent); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: #fff;
}
table th, table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table th { background: var(--color-surface); font-weight: 600; color: var(--color-text); }
table tr:last-child td { border-bottom: 0; }

/* Breadcrumb */
.crumb {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.crumb a { color: var(--color-text-muted); }
.crumb a:hover { color: var(--color-accent); }

/* Page hero (sub-pages) */
.page-hero {
  padding: var(--space-8) 0 var(--space-7);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, transparent 100%);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .page-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
}
.page-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 58ch; margin-top: var(--space-4); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two-column content layout */
.two-col {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.two-col > * { min-width: 0; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* Module list (sub-services) */
.modules { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .modules { grid-template-columns: 1fr 1fr; } }
.module {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  background: #fff;
}
.module h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.module h3::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.module ul li {
  font-size: var(--text-sm);
  padding: 4px 0;
  color: var(--color-text-muted);
}

/* Editorial / support sections */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.article-meta span {
  display: inline-flex;
  align-items: center;
}
.article-meta span + span::before {
  content: "•";
  margin-right: 8px;
  color: var(--color-accent);
}
.article-body {
  display: grid;
  gap: var(--space-5);
}
.article-body h2 {
  margin-top: var(--space-4);
}
.article-body ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--color-text-muted);
}
.support-panel {
  border: 1px solid rgba(var(--rgb-teal), 0.35);
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(var(--rgb-teal), 0.16), transparent 60%),
    #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.support-panel h3 {
  margin-bottom: var(--space-3);
}
.support-steps {
  counter-reset: support-step;
  display: grid;
  gap: var(--space-4);
}
.support-steps li {
  counter-increment: support-step;
  position: relative;
  padding-left: 48px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.support-steps li::before {
  content: counter(support-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Landing pages */
.landing-hero .support-panel {
  align-self: start;
}
.page-hero h1,
.page-hero__sub { overflow-wrap: break-word; hyphens: auto; }
.campaign-note {
  margin-top: var(--space-5);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.partner-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.partner-card--highlight {
  border-color: rgba(var(--rgb-teal), 0.5);
  box-shadow: 0 18px 45px rgba(var(--rgb-teal-deep), 0.12);
}
.partner-card__label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.partner-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.partner-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mini-list {
  display: grid;
  gap: 8px;
  margin-top: var(--space-4);
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.decision-list {
  display: grid;
  gap: var(--space-4);
}
.decision-list div {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: rgba(255,255,255,0.06);
}
.decision-list strong,
.decision-list span {
  display: block;
}
.decision-list strong {
  color: #fff;
  margin-bottom: 6px;
}
.decision-list span {
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

/* Managed XDR landing page */
.xdr-architecture {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .xdr-architecture {
    grid-template-columns: 1fr 1.15fr 0.85fr;
  }
}
.xdr-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.xdr-signal-card,
.xdr-outcomes div {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-4);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
}
.xdr-core {
  min-height: 210px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(460px 240px at 80% 0%, rgba(var(--rgb-highlight), 0.25), transparent 60%),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: #fff;
  padding: var(--space-7) var(--space-6);
  display: grid;
  align-content: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
}
.xdr-core span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.xdr-core strong {
  color: var(--color-teal-soft);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xdr-outcomes {
  display: grid;
  gap: var(--space-3);
}
.xdr-outcomes div {
  border-color: rgba(var(--rgb-teal), 0.35);
  background: var(--color-accent-light);
  color: var(--color-navy);
}
.xdr-flow {
  counter-reset: xdr-step;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .xdr-flow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .xdr-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.xdr-flow__step {
  counter-increment: xdr-step;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: var(--space-6);
  min-height: 170px;
  box-shadow: var(--shadow-sm);
}
.xdr-flow__step::before {
  content: counter(xdr-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
}
.xdr-flow__step strong,
.xdr-flow__step span {
  display: block;
}
.xdr-flow__step strong {
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.xdr-flow__step span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Hybride KI-Architektur (Schichtenmodell) */
.ki-arch {
  display: grid;
  gap: var(--space-4);
}
.ki-arch__layer {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ki-arch__layer--accent {
  border-color: rgba(var(--rgb-teal), 0.4);
  background:
    radial-gradient(420px 200px at 85% 0%, rgba(var(--rgb-highlight), 0.18), transparent 60%),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.ki-arch__layer--accent .ki-arch__label { color: var(--color-highlight); }
.ki-arch__layer--accent .ki-arch__nodes span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-accent-light);
}
.ki-arch__layer--local {
  border-color: rgba(var(--rgb-success), 0.35);
  background: #f1f7f2;
}
.ki-arch__layer--local .ki-arch__label { color: var(--color-success); }
.ki-arch__split {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .ki-arch__split { grid-template-columns: 1fr 1fr; }
}
.ki-arch__cross {
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-light);
  padding: var(--space-5);
}
.ki-arch__cross .ki-arch__label { color: var(--color-navy); }
.ki-arch__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.ki-arch__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ki-arch__nodes span {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 6px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ki-arch__label { overflow-wrap: anywhere; }

/* Form (contact) */
.form {
  display: grid;
  gap: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-width: 0;
  max-width: 100%;
}
.form__row { display: grid; gap: var(--space-4); min-width: 0; }
@media (min-width: 600px) {
  .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.form input,
.form textarea,
.form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow-wrap: break-word;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--rgb-teal), 0.15);
}
.form textarea { min-height: 130px; resize: vertical; }
.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form__consent input { width: 18px; height: 18px; accent-color: var(--color-accent); }

/* Footer */
.site-footer {
  background: var(--color-navy-deep);
  color: #aab4c2;
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-9);
}
.site-footer a { color: #d3dae3; transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-col h4,
.footer-col .footer-col__title {
  color: #fff;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 8px; }
.footer-col li, .footer-col p { font-size: var(--text-sm); }
.footer-brand { color:#ffffff; max-width: 38ch; font-size: var(--text-sm); margin-top: var(--space-4); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);   /* E-12: Kontrast auf dunklem Grund */
}

/* Reveal on scroll (lightweight) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Utilities */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.hidden { display: none; }

/* E-03: Sprunglink – unsichtbar, bis er per Tastatur fokussiert wird. */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius-md, 8px);
  background: var(--color-navy); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); outline: 3px solid var(--color-accent); outline-offset: 2px; }


/* Hinweisboxen (Formulare) */
.notice { border-left: 4px solid var(--color-accent); background: var(--color-surface); }
.notice--erfolg { border-left-color: var(--color-success, #1e7b4f); }
.notice--fehler { border-left-color: var(--color-error); }
.form__hinweis { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.form [aria-invalid="true"] { border-color: var(--color-error); }
.form__fehler { display: block; font-size: var(--text-xs); color: var(--color-error); margin-top: 4px; }
.kontakt-anker { display: block; position: relative; top: -110px; visibility: hidden; }

/* Hero ohne Bild: eine Spalte (Bilder fehlen, bis sie geliefert sind). */
.page-hero__inner--solo { grid-template-columns: 1fr !important; max-width: 72ch; }

/* =====================================================================
   Microsoft-365-inspired preview layer
   (airy, bright, centered hero; pill badges; soft cards; segmented nav)
   Appended override layer — production rules above are unchanged.
   ===================================================================== */

/* --- Eyebrow as a soft pill badge --- */
.eyebrow {
  background: var(--pastel-teal);
  color: var(--color-accent-hover);
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.section--navy .eyebrow {
  background: rgba(var(--rgb-highlight), 0.14);
  color: var(--color-highlight-soft);
}

/* --- Homepage hero: centered, airy, generous whitespace --- */
.hero {
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1200px 620px at 50% -20%, var(--pastel-teal), transparent 62%),
    radial-gradient(900px 520px at 12% 120%, var(--pastel-lilac), transparent 60%),
    radial-gradient(760px 420px at 88% 110%, var(--pastel-navy), transparent 60%),
    var(--color-bg);
}
.hero .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 1000px;
  margin-inline: auto;
}
.hero .hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero .hero__sub {
  font-size: var(--text-lg);
  max-width: 62ch;
  margin-inline: auto;
}
.hero .hero__ctas { justify-content: center; }
.hero .hero__trust {
  border-left: none;
  padding-left: 0;
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}
.hero .hero__media {
  width: 100%;
  max-width: 940px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* --- Cards: softer, rounder, gentle hover lift --- */
.card {
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-light);
}
.card__icon {
  background: var(--pastel-teal);
  border-radius: 14px;
}

/* --- Value tiles pick up the same soft treatment --- */
.value { box-shadow: var(--shadow-sm); }

/* --- Page heroes (14 subpages): brighter, more generous, CI chevron wash --- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4.75rem) 0 clamp(2.5rem, 4vw, 3.75rem);
  background:
    radial-gradient(960px 480px at 84% -28%, var(--pastel-blue), transparent 60%),
    radial-gradient(680px 360px at 4% 120%, var(--pastel-peri), transparent 62%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
/* Paired forward chevrons echoing the logo mark (consistent across all heroes) */
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -3%;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  background:
    linear-gradient(135deg, transparent 47%, rgba(var(--rgb-accent), 0.09) 47% 54%, transparent 54%),
    linear-gradient(135deg, transparent 63%, rgba(var(--rgb-teal), 0.07) 63% 70%, transparent 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__media {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

/* --- Section rhythm: a touch more breathing room --- */
.section { padding: clamp(3.25rem, 6vw, 6rem) 0; }

/* --- Segmented/tab nav rhythm --- */
@media (min-width: 1300px) {
  .nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px;
    gap: 1px;
  }
  .nav a { padding: 7px 9px; }
  .nav a:hover { background: #fff; box-shadow: var(--shadow-sm); }
  .nav a[aria-current="page"] { background: #fff; color: var(--color-accent-hover); box-shadow: var(--shadow-sm); }
}
/* Compact the wide logo in the tight 1200–1439 band so the full nav + CTA fit */
@media (min-width: 1300px) and (max-width: 1439px) {
  .brand-logo--wordmark { height: 21px; }
  .nav a { padding: 7px 8px; font-size: 0.78125rem; }
}
@media (min-width: 1440px) { .nav a { padding: 7px 11px; } }

/* --- Buttons: keep pills, add subtle blue depth --- */
.btn--primary { box-shadow: 0 6px 16px -8px rgba(var(--rgb-accent), 0.55); }
.btn--primary:hover { box-shadow: 0 10px 22px -10px rgba(var(--rgb-accent), 0.62); }

/* =====================================================================
   Hintergrund-Visuals + Bewegungsebene (RY-Gerüst)
   Abstrakte Chevron-/Band-Formen. Reines CSS, keine Dateien,
   nicht interaktiv. Farben aus den Variablen (tokens.css).
   ===================================================================== */

/* Hero: layered blue/periwinkle/cyan washes + abstract chevron ribbons */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1150px 600px at 50% -18%, var(--pastel-blue), transparent 62%),
    radial-gradient(820px 480px at 10% 118%, var(--pastel-peri), transparent 60%),
    radial-gradient(720px 420px at 92% 108%, var(--pastel-cyan), transparent 60%),
    var(--color-bg);
}
/* Paired forward chevrons echoing the logo mark, top-right */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6%;
  right: -4%;
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  background:
    linear-gradient(135deg, transparent 46%, rgba(var(--rgb-accent), 0.10) 46% 54%, transparent 54%),
    linear-gradient(135deg, transparent 62%, rgba(var(--rgb-teal), 0.08) 62% 70%, transparent 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
/* Soft forward-motion ribbon band, lower-left */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  bottom: -18%;
  width: min(60vw, 720px);
  height: min(34vw, 420px);
  background: conic-gradient(from 210deg at 40% 50%, rgba(var(--rgb-accent-soft), 0.10), transparent 38%, rgba(var(--rgb-accent), 0.08) 62%, transparent 80%);
  border-radius: 50% 50% 46% 54% / 60% 58% 42% 40%;
  filter: blur(2px);
  pointer-events: none;
}

/* CTA block: subtle chevron ribbon overlay on the dark panel */
.cta-block { position: relative; overflow: hidden; isolation: isolate; }
.cta-block::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(var(--rgb-accent-soft), 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(var(--rgb-teal), 0.10) 55% 62%, transparent 62%);
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }

/* Reusable floating chevron accent for section headers where wanted */
.section--navy { position: relative; overflow: hidden; }
.section--navy::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -6%;
  width: 420px;
  height: 420px;
  z-index: 0;
  background: linear-gradient(135deg, transparent 48%, rgba(var(--rgb-accent-soft), 0.10) 48% 55%, transparent 55%);
  transform: rotate(-6deg);
  pointer-events: none;
}
.section--navy > .container { position: relative; z-index: 1; }

/* =====================================================================
   Enhanced scroll-in motion (bottom-to-top, staggered)
   Nur mit JavaScript (Klasse „js“ am <html>, E-04) – ohne JS bleibt alles sichtbar.
   ===================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger for grouped items is applied via inline transition-delay in JS
   (--reveal-delay), so cards in the same row cascade bottom-to-top. */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
  .hero::after { filter: none; }
}

/* =====================================================================
   CTA-Block als helle Glasflaeche
   Appended override layer — die Regeln oberhalb bleiben unveraendert.

   Ausgangslage: .cta-block war ein dunkles Navy-Panel, steht aber auf
   allen Seiten in hellen Sektionen (<section class="section">). Die
   Eyebrow-Pille der Microsoft-Ebene oben (.eyebrow: helle CI-Flaeche,
   Schrift --color-accent-hover) war auf diesem Navy praktisch unlesbar.
   Der Block wird deshalb zur weissen Glasflaeche mit dezenter 1px-Kante,
   dunkler Typo und CI-blauem Primaerbutton.

   Dunkle Umgebungen: .cta-block--navy stellt die frueheren dunklen
   Farbwerte wieder her (opt-in im Markup, aktuell nirgends verwendet).
   ===================================================================== */
.cta-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 248, 255, 0.94) 100%);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--color-text);
}
.cta-block::before {
  background: radial-gradient(600px 240px at 80% 0%, var(--pastel-blue), transparent 62%);
}
.cta-block::after {
  background:
    linear-gradient(115deg, transparent 40%, rgba(var(--rgb-accent), 0.06) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(var(--rgb-teal), 0.07) 55% 62%, transparent 62%);
}
.cta-block h2 { color: var(--color-navy); }
.cta-block p { color: var(--color-text-muted); }
/* Eyebrow explizit, damit sie nicht von der Reihenfolge der Ebenen abhaengt */
.cta-block .eyebrow {
  background: var(--pastel-teal);
  color: var(--color-accent-hover);
}
.cta-block .btn--primary { background: var(--color-accent); color: #fff; }
.cta-block .btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.cta-block .btn--ghost {
  background: #fff;
  border-color: rgba(var(--rgb-navy), 0.28);
  color: var(--color-text);
}
.cta-block .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Dunkle Variante fuer bewusst dunkle Umgebungen */
.cta-block--navy {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #fff;
}
.cta-block--navy::before {
  background: radial-gradient(600px 240px at 80% 0%, rgba(var(--rgb-teal), 0.25), transparent 60%);
}
.cta-block--navy::after {
  background:
    linear-gradient(115deg, transparent 40%, rgba(var(--rgb-accent-soft), 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(var(--rgb-teal), 0.10) 55% 62%, transparent 62%);
}
.cta-block--navy h2 { color: #fff; }
.cta-block--navy p { color: var(--color-on-dark-muted); }
.cta-block--navy .eyebrow { background: rgba(var(--rgb-highlight), 0.14); color: var(--color-highlight-soft); }
.cta-block--navy .btn--primary { background: #fff; color: var(--color-navy); }
.cta-block--navy .btn--primary:hover { background: var(--color-accent-light); color: var(--color-navy); }
.cta-block--navy .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.cta-block--navy .btn--ghost:hover { border-color: #fff; color: #fff; }

/* =====================================================================
   Cards: Textfarben nicht mehr aus der Umgebung erben
   Appended override layer — die Regeln oberhalb bleiben unveraendert.

   Ausgangslage: .card hat eine weisse Flaeche, aber keine eigene
   Schriftfarbe. In einem dunklen Abschnitt erben die Karten deshalb
   .section--navy h3 { color: #fff } und .section--navy p { color: var(--color-on-dark-muted) }
   und zeigen weisse Schrift auf weisser Flaeche (managed-services.php,
   Abschnitt "Nutzen"). Ein Inline-background:#fff behebt das nicht, weil
   nur die Flaeche gesetzt wird, nicht die Schrift.

   Die Karte bringt ihre Farben nun selbst mit. Sie stehen als Variablen
   bereit, damit dunkle oder glasige Karten sie geschlossen umschalten
   koennen, ohne jede einzelne Regel zu wiederholen (.card--navy,
   .card--glass unten).
   ===================================================================== */
.card {
  --card-fg: var(--color-text);
  --card-heading: var(--color-navy);
  --card-muted: var(--color-text-muted);
  --card-link: var(--color-accent);
  color: var(--card-fg);
}
.card h3,
.card h4,
.card strong { color: var(--card-heading); }
.card p,
.card li,
.card small { color: var(--card-muted); }
.card .card__link,
.card a:not(.btn) { color: var(--card-link); }
.card .eyebrow { color: var(--color-accent-hover); }

/* Dunkle Karte: schaltet nur die vier Variablen um */
.card--navy {
  --card-fg: var(--color-on-dark);
  --card-heading: #fff;
  --card-muted: var(--color-on-dark-muted);
  --card-link: var(--color-highlight-soft);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
.card--navy:hover { border-color: rgba(255, 255, 255, 0.28); }
.card--navy .card__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.card--navy .eyebrow { background: rgba(var(--rgb-highlight), 0.14); color: var(--color-highlight-soft); }

/* Glasige Karte auf dunklem Grund: Flaeche transluzent, Schrift hell */
.card--glass {
  --card-fg: var(--color-on-dark);
  --card-heading: #fff;
  --card-muted: #cbd5e4;
  --card-link: var(--color-highlight-soft);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.card--glass:hover { border-color: rgba(255, 255, 255, 0.32); }
.card--glass .card__icon { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ===================================================================
   Datenschutz / Consent (Einblendung + Formular auf der Datenschutzseite)
   Angehaengte Ebene – ueberschreibt nichts Bestehendes.
   =================================================================== */

.ry-consent[hidden] { display: none; }
.ry-consent {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.ry-consent__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--rgb-navy-deep), 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ry-consent__dialog {
  position: relative;
  width: 100%;
  max-width: 46rem;
  max-height: 92vh;
  overflow-y: auto;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: ry-consent-in 0.28s ease-out both;
}
@keyframes ry-consent-in {
  from { transform: translateY(1.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ry-consent__title {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-navy);
}
.ry-consent__text {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm, 0.9375rem);
  color: var(--color-text-muted);
}
.ry-consent__list,
.consent-form__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ry-consent__item,
.consent-form__list > li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.ry-consent__label,
.consent-form__list label {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
.consent-form__list label { cursor: pointer; }
.ry-consent__label input,
.consent-form__list input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}
.ry-consent__label input:disabled,
.consent-form__list input:disabled { cursor: not-allowed; opacity: 0.75; }
.ry-consent__body,
.consent-form__list label > span:last-child {
  display: block;
}
.ry-consent__body strong,
.consent-form__list label strong {
  display: block;
  color: var(--color-navy);
  font-size: var(--text-sm, 0.9375rem);
}
.ry-consent__hint,
.consent-form__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.ry-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.ry-consent__actions .btn { flex: 1 1 12rem; justify-content: center; }
.ry-consent__links {
  margin: 0.9rem 0 0;
  font-size: var(--text-xs, 0.8125rem);
  color: var(--color-text-faint);
}
.ry-consent__links a { color: var(--color-accent); }
.ry-consent :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
html.ry-consent-open { overflow: hidden; }

/* Link „Datenschutzeinstellungen“ im Inhaltsbereich */
.section a[data-ry-consent-open],
.page-hero a[data-ry-consent-open] { color: var(--color-accent); }

/* Serverseitiges Formular auf der Datenschutzseite (funktioniert ohne JS) */
.consent-form {
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(var(--rgb-navy-deep), 0.05);
}
.consent-form .btn-row { margin-top: 1rem; }
.consent-form__status {
  margin: 0.9rem 0 0;
  font-size: var(--text-xs, 0.8125rem);
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .ry-consent { align-items: center; padding: 1.5rem; }
  .ry-consent__dialog {
    padding: 1.75rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .ry-consent__actions .btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ry-consent__dialog { animation: none; }
}

/* ==========================================================================
   Rechtstexte (Impressum / Datenschutz) – redaktionelle Blöcke
   Der Sanitizer entfernt style- und class-Attribute aus dem gepflegten HTML.
   Aussehen und Abstände entstehen deshalb ausschließlich über diese Ebene.
   ========================================================================== */

.legal-body {
  display: grid;
  gap: var(--space-4);
}
.legal-body p,
.legal-body li {
  color: var(--color-text-muted);
}
.legal-body h3,
.legal-body h4 {
  color: var(--color-navy);
  margin-top: var(--space-2);
}
.legal-body ul,
.legal-body ol {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.2rem;
  color: var(--color-text-muted);
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }

/* Basis-Regel ist a { color: inherit } – Links im gepflegten HTML brauchen
   daher eine eigene Auszeichnung, weil sie kein style-Attribut tragen können. */
.legal-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--color-accent-hover); }

.legal-body code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.legal-body--muted p,
.legal-body--muted li {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ===========================================================================
   Ebene: Wartungsmodus-Hinweis und Fehlerseite 404
   Angehängt, damit die bestehenden Regeln unverändert bleiben. Nach dem
   Einspielen RY_VERSION erhöhen, sonst liefert der Browser-Cache altes CSS.
   =========================================================================== */

/* --- Hinweisstreifen: nur für die angemeldete Administration sichtbar ----- */
.maint-bar {
  background: var(--color-warning);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-3) 0;
  position: relative;
  z-index: 60;
}
.maint-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.maint-bar__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .maint-bar__dot { animation: maint-pulse 2s ease-in-out infinite; }
}
@keyframes maint-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.maint-bar__links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.maint-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.maint-bar a:hover { color: #ffe9c9; }
@media (max-width: 640px) {
  .maint-bar__links { margin-left: 0; width: 100%; }
}

/* --- Adminbereich: Statuskarte Wartungsmodus ------------------------------ */
.maint-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.maint-state__badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.maint-state__badge--on  { background: var(--color-warning); color: #fff; }
.maint-state__badge--off { background: var(--color-success); color: #fff; }
.maint-state__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Fehlerseite 404 ------------------------------------------------------ */
.page-hero > .container-narrow { position: relative; z-index: 1; }
.err404 .page-hero__sub { margin-left: auto; margin-right: auto; }
.err404__ctas { justify-content: center; }
.err404__path {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}
.err404__path code {
  padding: 0.15em 0.45em;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.err404__suggest,
.err404__map {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.err404__suggest { grid-template-columns: 1fr; }
.err404__map { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.err404__suggest a,
.err404__map a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
}
.err404__suggest a:hover,
.err404__map a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.reference-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.reference-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .reference-hero__media img {
    min-height: 240px;
    max-height: 360px;
  }
}


.feature__media,
.hero__media,
.page-hero__media,
.section-figure {
  position: relative;
}

[data-ki-bild]::after {
  content: attr(data-ki-bild);
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  padding: 6px 10px;
  color: #222222;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  font: 12px/1.2 sans-serif;
  pointer-events: none;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;

  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;

  color: #fff;
  background: var(--color-accent-dark);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-navy-light);
}

.back-to-top:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* Schwebender Schnellkontakt (Telefon/E-Mail), rechts unten.

   WICHTIG: Der Zurueck-nach-oben-Knopf sitzt bei right/bottom 24px und ist
   48px hoch. Der Schnellkontakt startet deshalb bei bottom 88px - sonst
   laegen die Schaltflaechen uebereinander und die untere waere nicht mehr
   anklickbar. Bei geaenderten Groessen muss dieser Abstand mitwandern. */
.float-sm {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.fl-fl a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.fl-fl a:hover { transform: scale(1.08); background: var(--color-accent-hover); }
/* WhatsApp in seiner Erkennungsfarbe - sonst waeren alle drei Schaltflaechen
   gleich und der Dienst nicht auf einen Blick erkennbar. */
.fl-fl.float-whatsapp a { background: #25d366; }
.fl-fl.float-whatsapp a:hover { background: #1da851; }
.fl-fl a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 600px) {
  .float-sm { right: 16px; bottom: 74px; }
  .fl-fl a { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-fl a { transition: none; }
  .fl-fl a:hover { transform: none; }
}

/* Schwebendes Warenkorb-Symbol - links, vertikal mittig. Nur im DOM,
   wenn tatsaechlich etwas im Warenkorb liegt (siehe ry_render_footer()),
   deshalb kein opacity/visibility-Toggle wie bei .back-to-top noetig. */
.cart-fab {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;

  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;

  color: #fff;
  background: var(--color-accent-dark);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cart-fab:hover {
  background: var(--color-navy-light);
  transform: translateY(-50%) scale(1.05);
}

.cart-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.cart-fab__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 600px) {
  .cart-fab {
    left: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fab {
    transition: none;
  }
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;

  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.footer-social a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.footer-social img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}


.webdesign-example {
    overflow: hidden;
    padding: 0;
}

.webdesign-example__button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.webdesign-example__button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.webdesign-example__preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface);
}

.webdesign-example__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.webdesign-example__overlay {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 16px;
    background: rgba(var(--rgb-navy-deep), 0.88);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.webdesign-example__button:hover img,
.webdesign-example__button:focus-visible img {
    transform: scale(1.035);
    filter: brightness(0.8);
}

.webdesign-example__button:hover .webdesign-example__overlay,
.webdesign-example__button:focus-visible .webdesign-example__overlay {
    opacity: 1;
    transform: translateY(0);
}

.webdesign-example__title {
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    font-size: var(--text-lg);
}

/*
 * Vollbildansicht
 */
.webdesign-lightbox[hidden] {
    display: none;
}

.webdesign-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.webdesign-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--rgb-navy-deep), 0.94);
    backdrop-filter: blur(6px);
}

.webdesign-lightbox__window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
}

.webdesign-lightbox__header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 68px;
    padding: 12px 20px;
    background: var(--color-navy-deep);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.webdesign-lightbox__title {
    margin: 0;
    color: inherit;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.webdesign-lightbox__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.webdesign-lightbox__close:hover,
.webdesign-lightbox__close:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.webdesign-lightbox__close > span:first-child {
    font-size: 1.8rem;
    line-height: 0.8;
}

.webdesign-lightbox__content {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    background: #e9edf3;
    text-align: center;
}

.webdesign-lightbox__image {
    display: block;
    width: min(100%, 1920px);
    height: auto;
    min-height: 1px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
}

body.webdesign-lightbox-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .webdesign-lightbox__header {
        min-height: 58px;
        padding: 10px 12px;
    }

    .webdesign-lightbox__close-text {
        display: none;
    }

    .webdesign-lightbox__close {
        width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webdesign-example__preview img,
    .webdesign-example__overlay {
        transition: none;
    }
}

.container-reference {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container-reference {
    padding-inline: var(--space-6);
  }
}


.reference-customer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      420px 180px at 100% 0%,
      rgba(var(--rgb-teal), 0.12),
      transparent 65%
    ),
    #fff;
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.reference-customer-link:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.reference-customer-link__content {
  display: grid;
  gap: var(--space-2);
}

.reference-customer-link__content small {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reference-customer-link__content strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.reference-customer-link__content span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.reference-customer-link__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: var(--color-accent);
  font-size: 1.35rem;
  transition: transform var(--transition-fast);
}

.reference-customer-link:hover .reference-customer-link__arrow {
  transform: translate(3px, -3px);
}


.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.reference-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      440px 220px at 100% 0%,
      rgba(var(--rgb-teal), 0.1),
      transparent 65%
    ),
    #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

/*
.reference-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--color-accent),
    var(--color-navy)
  );
}
*/

.reference-card:hover {
  border-color: rgba(var(--rgb-teal), 0.45);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.reference-card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}

.reference-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.reference-card__meta span + span::before {
  content: "•";
  margin-right: 8px;
  color: var(--color-accent);
}

.reference-card__customer {
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.reference-card__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
}

.reference-card__title a:hover {
  color: var(--color-accent);
}

.reference-card__excerpt {
  display: -webkit-box;
  margin-bottom: var(--space-6);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.reference-card__fact {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reference-card__fact strong {
  color: var(--color-text);
}

.reference-card__link {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-5);
  color: var(--color-accent);
  font-weight: 700;
}

.reference-card__link span {
  transition: transform var(--transition-fast);
}

.reference-card__link:hover span {
  transform: translateX(4px);
}

.reference-empty {
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

/* Vorschaubild der Beitragskarte (Änderung 2026-10-26): wie auf der alten
   Seite steht das Titelbild über dem Text. Der Ausschnitt entsteht hier
   (16:9, object-fit), damit hoch- und querformatige Bilder gleich wirken. */
.reference-card--mitbild {
  display: flex;
  flex-direction: column;
}

.reference-card__media {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.reference-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition);
}

.reference-card--mitbild .reference-card__body {
  min-height: 0;
  flex: 1 1 auto;
}

.reference-card:hover .reference-card__media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .reference-card__media img {
    transition: none;
  }

  .reference-card:hover .reference-card__media img {
    transform: none;
  }
}

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

  .reference-card__body {
    padding: var(--space-5);
  }
}

.reveal {
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(.16, 1, .3, 1),
    transform 700ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal[data-reveal="up"] {
  transform: translateY(40px);
}

.reveal[data-reveal="left"] {
  transform: translateX(-40px);
}

.reveal[data-reveal="right"] {
  transform: translateX(40px);
}

.reveal[data-reveal="zoom"] {
  transform: scale(0.9);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .reveal[data-reveal="left"],
  .reveal[data-reveal="right"] {
    transform: translateY(30px);
  }

  .reveal.is-in {
    transform: none;
  }
}

/* =====================================================================
   RY-Gerüst: Bausteine aus includes/seiten.php und includes/formular.php
   ===================================================================== */
.page-hero__stand { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }
.ablauf-liste { counter-reset: schritt; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.ablauf-liste li { counter-increment: schritt; position: relative; padding-left: 3rem; line-height: 1.55; }
.ablauf-liste li::before {
  content: counter(schritt); position: absolute; left: 0; top: -2px;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: var(--text-sm);
  background: var(--color-accent-light); color: var(--color-accent-dark);
}
.section--navy .ablauf-liste li { color: var(--color-on-dark); }
.section--navy .ablauf-liste li::before { background: rgba(255,255,255,.12); color: #fff; }
.card__label { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: var(--space-2); }
.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link:hover h3, .card--link:focus-visible h3 { color: var(--color-accent-dark); }
.card--link .card__link { margin-top: auto; }
.hinweis-box { border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); background: var(--color-surface); border-radius: var(--radius-lg, 12px); padding: var(--space-5) var(--space-6); }
.hinweis-box p { margin: 0; font-size: var(--text-sm); }
.hinweis-box__titel { margin-bottom: var(--space-2) !important; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabelle caption { text-align: left; font-weight: 600; padding: var(--space-3) var(--space-4); }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.tabelle thead th { background: var(--color-surface); font-weight: 600; }
.tabelle tbody th { font-weight: 600; }
.tabelle__hinweis { font-size: var(--text-xs); color: var(--color-text-muted); }
.quellen__titel { font-size: var(--text-lg); }
.quellen__stand { font-size: var(--text-sm); color: var(--color-text-muted); }
.quellen { padding-left: 1.2em; font-size: var(--text-sm); display: grid; gap: 6px; }
.quellen a { color: var(--color-accent-dark); }
.bild-quelle { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 6px; }
.form__optional { font-weight: 400; color: var(--color-text-muted); }

/* Social-Links als Textmarke, wenn keine Symboldatei vorliegt */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.footer-social__text { display: inline-block; padding: 5px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: var(--text-xs); color: var(--color-on-dark); }
.footer-social a:hover .footer-social__text, .footer-social a:focus-visible .footer-social__text { border-color: #fff; color: #fff; }
.footer-social a:has(.footer-social__text) { width: auto; height: auto; background: none; border: 0; border-radius: 999px; }
.vorschau-hinweis { background: var(--color-warning); color: #fff; text-align: center; padding: 8px 16px; font-size: var(--text-sm); font-weight: 600; }
.section--navy .ablauf-liste strong, .section--navy .checklist strong, .section--navy p strong { color: #fff; }

/* =====================================================================
   Set-Kalkulator (Modul „kalkulator“: pv-kalkulator.php, includes/kalkulator.php)
   Änderung 2026-10-23. Farben aus den Variablen; Projekte feilen in theme.css nach.
   ===================================================================== */
.kalk { padding-top: 48px; }
.kalk__layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .kalk__layout { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 32px 40px; } .kalk__abschluss { grid-column: 1 / -1; } }
.kalk__abschluss .form { max-width: 760px; }
.kalk__schritte { display: grid; gap: 20px; min-width: 0; }
.kalk__karte { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); }
.kalk__kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.kalk__kopf h2 { font-size: 1.375rem; margin: 0 0 4px; }
.kalk__kopf p { margin: 0; font-size: var(--text-sm); }
/* Bildergalerie aus dem Bildverzeichnis (Blocktyp „galerie“, 2026-10-27). */
.galerie { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .galerie--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie__eintrag { min-width: 0; }
.galerie__eintrag .galerie__bild { margin: 0; }
.galerie__eintrag img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--color-border); background: #fff; }
.galerie__titel { margin: 8px 0 0; font-size: var(--text-sm); font-weight: 600; }
.galerie__hinweis { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Infofeld je Komponente im Kalkulator (Änderung 2026-10-27):
   Bilder, Beschreibung und Unterlagen des gewählten Artikels. */
.kalk__info { margin: 10px 0 4px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.kalk__info > summary { cursor: pointer; padding: 10px 14px; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); list-style: none; }
.kalk__info > summary::-webkit-details-marker { display: none; }
.kalk__info > summary::before { content: "＋"; display: inline-block; width: 1.1em; font-weight: 700; }
.kalk__info[open] > summary::before { content: "−"; }
.kalk__info > summary:hover { color: var(--color-text); }
.kalk__info > summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius); }
.kalk__info-inhalt { padding: 0 14px 14px; }
.kalk__info-bilder { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.kalk__info-bilder img { width: 140px; height: 105px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; }
.kalk__info-text { font-size: var(--text-sm); }
.kalk__info-text p { margin: 0 0 8px; }
.kalk__info-text p:last-child { margin-bottom: 0; }
.kalk__info-text ul, .kalk__info-text ol { margin: 0 0 8px; padding-left: 1.2em; font-size: var(--text-sm); }
.kalk__info-dateien { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kalk__info-dateien a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--color-border); background: #fff; font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
.kalk__info-dateien a:hover { border-color: var(--color-accent); }
.kalk__info-fuss { margin: 12px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.kalk__nr { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: .12em; color: var(--color-highlight); background: var(--color-navy); border-radius: 8px; padding: 8px 10px; flex-shrink: 0; margin-top: 2px; }
.kalk__karte label { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--color-text); margin-top: 12px; }
.kalk__karte label > input, .kalk__karte label > select, .kalk__karte label > textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; font-size: 1rem; padding: 11px 12px; border: 1px solid #B9C5CA; border-radius: var(--radius); background: #fff; min-height: 48px; font-family: inherit; }
.kalk__karte select { appearance: auto; }
.kalk__karte input:focus, .kalk__karte select:focus, .kalk__karte textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29, 111, 148, 0.18); outline: none; }
.kalk__karte .form__row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .kalk__karte .form__row { grid-template-columns: 1fr 1fr; } }
.kalk__wahl { display: grid; gap: 12px; }
@media (min-width: 640px) { .kalk__wahl { grid-template-columns: 1fr 1fr; } }
.kalk__option { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; padding: 16px; border: 1px solid #B9C5CA; border-radius: 12px; cursor: pointer; font-weight: 400 !important; }
.kalk__option input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-accent); flex-shrink: 0; }
.kalk__option strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.kalk__option small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.kalk__option:has(input:checked) { border-color: var(--color-navy); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-navy); }
.kalk__zwischen { margin: 10px 0 0; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-accent); }
.kalk__zubehoer { border: 0; padding: 0; margin: 20px 0 0; }
.kalk__zubehoer legend { font-weight: 600; font-size: var(--text-sm); padding: 0; margin-bottom: 4px; }
.kalk__zub { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px !important; padding: 10px 14px; background: var(--color-surface); border-radius: 10px; font-weight: 500 !important; }
.kalk__zub small { display: block; color: var(--color-text-muted); font-weight: 400; font-size: var(--text-xs); }
.kalk__zub > span { flex: 1 1 auto; }
.kalk__karte .kalk__zub > input { width: 88px; flex: 0 0 88px; margin: 0 !important; min-height: 42px; padding: 8px 10px; }
.kalk__nojs { margin: 20px 0 0; }
.kalk__karte .form { margin-top: 4px; }
.kalk__karte .form .btn { margin-top: 20px; }
.kalk__karte .form__consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; margin-top: 16px; }
.kalk__karte .form__consent input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--color-accent); }
.kalk__karte .form__consent span { font-size: var(--text-sm); color: var(--color-text-muted); }
.kalk__karte .form__fehler { display: block; font-weight: 400; margin-top: 4px; }
.kalk__karte [aria-invalid="true"] { border-color: var(--color-error); }

.kalk__ergebnis { min-width: 0; }
@media (min-width: 1000px) { .kalk__ergebnis { position: sticky; top: 110px; } }
.kalk__panel { background: var(--color-navy); color: #fff; border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; position: relative; }
.kalk__panel .eyebrow { margin: 0; color: var(--color-highlight); }
.kalk__panel.is-laden { opacity: .75; }
.kalk__kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.kalk__kennzahlen dt { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.kalk__kennzahlen dd { margin: 2px 0 0; font-weight: 600; font-size: var(--text-sm); color: #fff; }
.kalk__preis { background: var(--color-navy-light); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.kalk__label { display: block; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.kalk__preis strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; color: #fff; }
.kalk__brutto { font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.kalk__liste { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: transparent; }
.kalk__liste tr, .kalk__liste th, .kalk__liste td { background: transparent; }
.kalk__liste caption { text-align: left; font-family: var(--font-display); font-weight: 700; color: #fff; padding-bottom: 8px; }
.kalk__liste th { text-align: left; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-dark-muted); padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-weight: 500; }
.kalk__liste td { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #fff; vertical-align: top; }
.kalk__liste td + td, .kalk__liste th + th { text-align: right; white-space: nowrap; padding-left: 12px; }
.kalk__liste td:first-child { color: var(--color-on-dark-muted); }
.kalk__hinweise { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--text-xs); color: var(--color-on-dark-muted); }
.kalk__hinweise li { padding-left: 14px; position: relative; }
.kalk__hinweise li::before { content: "–"; position: absolute; left: 0; }
.kalk__fehler { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(185, 71, 71, 0.2); color: #fff; font-size: var(--text-sm); }
.kalk__weiter { justify-content: center; }
.kalk__fertig { max-width: 820px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); }
.kalk__fertig h2 { margin: 8px 0 12px; }
.kalk__fertig-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 24px 0; }
.kalk__fertig-grid div { background: var(--color-surface); border-radius: 12px; padding: 14px 16px; }
.kalk__fertig-grid strong { display: block; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   TV-Aktion (Modul „tvaktion“: includes/tvaktion.php) – Block in der
   Abschlussstrecke des Kalkulators. Neutrale Farben aus den Designvariablen.
   --------------------------------------------------------------------------- */
.tv { display: grid; gap: 16px; }
.tv__fakten { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); }
.tv__fakten li { padding-left: 14px; position: relative; }
.tv__fakten li::before { content: "–"; position: absolute; left: 0; }
.tv__hinweis { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.tv__meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.tv__meldung { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: var(--text-sm); }
.tv__meldung--ok { background: rgba(46, 125, 50, 0.12); color: #1f5d24; }
.tv__meldung--fehler { background: rgba(185, 71, 71, 0.12); color: #8d2b2b; }
/* Redaktion: Platzhalter einer fehlenden Bildstelle – nur für angemeldete
   Redaktion sichtbar (ry_red_bild_platzhalter()). Besucher sehen nichts. */
.red-platzhalter { display: grid; gap: 8px; padding: 16px; border: 2px dashed var(--color-border); border-radius: 12px; background: rgba(0, 0, 0, 0.03); font-size: var(--text-sm); }
.red-platzhalter__kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.red-platzhalter__nr { color: var(--color-text-muted); }
.red-platzhalter__kopf code, .red-platzhalter__prompt code { font-size: var(--text-xs); overflow-wrap: anywhere; }
.red-platzhalter__alt, .red-platzhalter__fuss { margin: 0; color: var(--color-text-muted); }
.red-platzhalter__fuss { font-size: var(--text-xs); }
.red-platzhalter__prompt summary { cursor: pointer; font-weight: 600; }
.red-platzhalter__prompt p { margin: 8px 0 0; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* Entwicklermodus (nur Testsystem): deutlich als Test gekennzeichnet. */
.tv__meldung--test { background: rgba(176, 122, 0, 0.14); color: #6b4a00; font-variant-numeric: tabular-nums; }
.tv--test { outline: 2px dashed rgba(176, 122, 0, 0.55); outline-offset: 3px; }
.tv__feld { display: grid; gap: 6px; max-width: 420px; }
.tv__feld label { font-weight: 600; font-size: var(--text-sm); }
.tv__feld input { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; background: #fff; }
.tv__datenschutz { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.tv__newsletter { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); }
.tv__newsletter input { margin-top: 3px; }
.tv__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tv__ergebnis { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.tv__preis { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; }
.tv__code { margin: 10px 0 0; font-size: var(--text-sm); }
.tv__code code, .tv__fertig code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 8px; font-size: var(--text-sm); }
.tv__wahl { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; margin: 0; }
.tv__wahl legend { font-weight: 600; font-size: var(--text-sm); padding: 0 6px; }
.tv__wahl label { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); }
.tv__wahl input { margin-top: 3px; }
.tv__fertig { background: var(--color-surface); border-radius: 12px; padding: 16px 18px; margin: 24px 0; display: grid; gap: 6px; text-align: left; }
.tv__fertig p { margin: 0; }
@media (min-width: 1000px) {
  .tv { grid-column: 1 / -1; }
}

/* ===== Navigationskarte (Änderung 2026-10-29) ===========================
   Leiste rechts, nur für angemeldete Redaktion. Markup: includes/navikarte.php,
   Logik: assets/js/navikarte.js. Besucher bekommen nichts davon ausgeliefert. */
.navikarte { position: fixed; inset: 0 0 auto auto; height: 0; z-index: 1200; font-family: var(--font-body); --navi-breite: min(420px, 92vw); }
/* Kartenansicht: drei Spalten nebeneinander brauchen mehr Platz. */
.navikarte[data-karte="1"] { --navi-breite: min(760px, 96vw); }
.navikarte__schalter {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border: 1px solid var(--ivg-panel-rand); border-right: 0;
  border-radius: 12px 0 0 12px; background: var(--ivg-panel); color: #fff;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  box-shadow: var(--shadow-md); transition: background .15s ease, right .25s ease;
}
.navikarte__schalter:hover { background: var(--color-accent); }
.navikarte__schalter:focus-visible { outline: 3px solid var(--ivg-gruen-hell); outline-offset: 2px; }
.navikarte[data-offen="1"] .navikarte__schalter { right: var(--navi-breite); }

/* Griff am linken Rand: Breite der Leiste ziehen. */
.navikarte__griff { position: absolute; left: -5px; top: 0; bottom: 0; z-index: 4; width: 10px; cursor: ew-resize; touch-action: none; }
.navikarte__griff::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 56px; margin-top: -28px; border-radius: 4px; background: var(--ivg-rand-dunkel); transition: background .15s ease, height .15s ease; }
.navikarte__griff:hover::after, .navikarte__griff:focus-visible::after, .navikarte.ist-ziehen .navikarte__griff::after { background: var(--ivg-gruen); height: 96px; margin-top: -48px; }
.navikarte__griff:focus-visible { outline: 0; }
.navikarte.ist-ziehen, .navikarte.ist-ziehen * { user-select: none; }
.navikarte.ist-ziehen .navikarte__panel, .navikarte.ist-ziehen .navikarte__schalter { transition: none; }
.navikarte__panel {
  position: fixed; top: 0; right: 0; width: var(--navi-breite); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; background: var(--ivg-panel); color: #fff;
  border-left: 1px solid var(--ivg-panel-rand); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .25s ease; visibility: hidden;
}
.navikarte[data-offen="1"] .navikarte__panel { transform: none; visibility: visible; }
.navikarte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ivg-panel-rand); }
.navikarte__eyebrow { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ivg-gruen-hell); }
.navikarte__titel { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.25; font-weight: 700; }
.navikarte__zu { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--ivg-panel-rand); border-radius: 8px; background: transparent; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.navikarte__zu:hover { background: rgba(255, 255, 255, 0.1); }

.navikarte__reiter { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--ivg-panel-rand); }
.navikarte__reiter-knopf {
  flex: 1 1 0; padding: 8px 6px; border: 1px solid transparent; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); color: var(--ivg-label-dunkel);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-align: center;
}
.navikarte__reiter-knopf[aria-selected="true"] { background: var(--ivg-gruen); border-color: var(--ivg-gruen); color: var(--color-navy); }
.navikarte__reiter-knopf:focus-visible { outline: 2px solid var(--ivg-gruen-hell); outline-offset: 1px; }

.navikarte__inhalt { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 20px; }
.navikarte__zahl { margin: 0 0 10px; font-size: var(--text-xs); color: var(--ivg-label-dunkel); }
.navikarte__leer { margin: 8px 0; font-size: var(--text-sm); color: var(--ivg-label-dunkel); line-height: 1.5; }
.navikarte__leer strong { color: #fff; }
.navikarte__gruppe { margin: 16px 0 6px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ivg-blau-dunkel); }
.navikarte__gruppe:first-child { margin-top: 0; }
.navikarte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navikarte__eintrag {
  display: flex; gap: 9px; width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.navikarte__eintrag:hover, .navikarte__eintrag:focus-visible { background: rgba(255, 255, 255, 0.09); border-color: var(--ivg-panel-rand); outline: 0; }
.navikarte__eintrag.ist-hier { background: rgba(var(--rgb-highlight), 0.16); border-color: var(--ivg-gruen-hell); }
.navikarte__eintrag-text { display: grid; gap: 1px; min-width: 0; }
.navikarte__eintrag strong { color: #fff; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.navikarte__eintrag.ist-hier strong { color: var(--ivg-gruen-hell); }
.navikarte__pfad { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ivg-label-dunkel); overflow-wrap: anywhere; }
.navikarte__ankertext { font-size: 0.75rem; color: var(--ivg-blau-dunkel); overflow-wrap: anywhere; }

.navikarte__punkt { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--ivg-label-dunkel); }
.navikarte__punkt--oeffentlich { background: var(--ivg-gruen); }
.navikarte__punkt--noindex { background: var(--ivg-blau-dunkel); }
.navikarte__punkt--gesperrt { background: #E2A33B; }
.navikarte__punkt--entwurf { background: #E2A33B; }
.navikarte__punkt--weiterleitung { background: #B47BD6; }
.navikarte__punkt--extern { background: transparent; border: 2px solid var(--ivg-label-dunkel); width: 10px; height: 10px; }
.navikarte__punkt--unbekannt { background: var(--color-error); }
.navikarte__punkt--intern { background: var(--ivg-rand-dunkel); }

/* Bereiche (Hauptmenü, Inhalt, Fußzeile) als aufklappbare Blöcke. */
.navikarte__bereich { border: 1px solid var(--ivg-panel-rand); border-radius: 10px; margin: 0 0 8px; background: rgba(255, 255, 255, 0.04); }
.navikarte__bereich > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: var(--text-sm); font-weight: 700; list-style: none; }
.navikarte__bereich > summary::-webkit-details-marker { display: none; }
.navikarte__bereich > summary > span:first-of-type { flex: 1 1 auto; }
.navikarte__bereich > summary::before { content: "▸"; margin-right: 6px; color: var(--ivg-gruen-hell); transition: transform .15s ease; }
.navikarte__bereich[open] > summary::before { content: "▾"; }
.navikarte__bereich > summary:focus-visible { outline: 2px solid var(--ivg-gruen-hell); outline-offset: -2px; }
.navikarte__bereich-zahl { flex: 0 0 auto; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--rgb-highlight), 0.18); color: var(--ivg-gruen-hell); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: center; }
.navikarte__bereich > *:not(summary) { margin-left: 10px; margin-right: 10px; }
.navikarte__bereich > *:last-child { margin-bottom: 10px; }
.navikarte__fussnote { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--ivg-label-dunkel); }
.navikarte__fussnote strong, .navikarte__fussnote em { color: #fff; }

/* Kartenansicht (Änderung 2026-10-30): Spalten mit Bildern und Symbolen,
   die sich nach rechts erweitern. Logik: assets/js/navikarte-flow.js. */
/* Kartenreiter: Die Karte füllt den freien Platz der Leiste als eigenes
   Sichtfenster – beide Scrollbalken stehen damit immer sichtbar am Rand. */
.navikarte[data-karte="1"] .navikarte__inhalt { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.navikarte[data-karte="1"] .navikarte__inhalt > * { flex: 0 0 auto; }
.navikarte[data-karte="1"] .navikarte__inhalt > .nkf-rahmen { flex: 1 1 auto; min-height: 220px; }
.navikarte__karte { overflow: auto; }
.navikarte__knoepfe { display: flex; gap: 8px; margin: 2px 0 10px; }
.navikarte__knoepfe .navikarte__gross { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.navikarte__weg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 8px; font-size: var(--text-xs); line-height: 1.4; }
.navikarte__weg span { color: var(--ivg-gruen-hell); font-weight: 700; }
.navikarte__weg a { color: var(--ivg-label-dunkel); text-decoration: none; border-bottom: 1px dotted var(--ivg-rand-dunkel); }
.navikarte__weg a:hover { color: #fff; border-bottom-color: var(--ivg-gruen); }
.navikarte__weg strong { color: #fff; }
.navikarte__weg i { color: var(--ivg-rand-dunkel); font-style: normal; }
.navikarte__gross { width: 100%; padding: 9px 12px; border: 1px solid var(--ivg-gruen); border-radius: 9px; background: transparent; color: var(--ivg-gruen-hell); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.navikarte__gross:hover { background: var(--ivg-gruen); color: var(--color-navy); }

/* Bühne und Spalten */
.nkf { position: relative; scrollbar-color: var(--ivg-rand-dunkel) rgba(255, 255, 255, 0.05); }
.nkf::-webkit-scrollbar { height: 12px; width: 12px; }
.nkf::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
.nkf::-webkit-scrollbar-thumb { background: var(--ivg-rand-dunkel); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
/* Sichtfenster mit Zoom: .nkf ist der Scrollbereich, .nkf__groesse hat die
   gezoomte Größe (damit die Scrollbalken stimmen), .nkf__flaeche wird skaliert. */
.nkf-rahmen { position: relative; display: flex; min-height: 0; border: 1px solid var(--ivg-panel-rand); border-radius: 12px; background: rgba(10, 26, 36, 0.55); overflow: hidden; }
.nkf-rahmen > .nkf { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; cursor: grab; outline: 0; }
.nkf-rahmen > .nkf:focus-visible { box-shadow: inset 0 0 0 2px var(--ivg-gruen-hell); }
.nkf-rahmen.ist-ziehen > .nkf { cursor: grabbing; user-select: none; }
.nkf-rahmen.ist-ziehen .nkf-karte { pointer-events: none; }
.nkf__groesse { position: relative; }
.nkf__flaeche { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: inline-flex; align-items: flex-start; gap: 92px; padding: 16px 48px 36px 16px; box-sizing: border-box; }
.nkf-karte { cursor: pointer; }
.nkf-steuer { position: absolute; right: 22px; bottom: 24px; z-index: 5; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; border-radius: 10px; background: #F4F7F7; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.7); }
.nkf-steuer button { width: 40px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: #0A1A24; font: 600 20px/1 var(--font-body); cursor: pointer; }
.nkf-steuer button + button, .nkf-steuer__wert + button { border-top: 1px solid #DCE3E6; }
.nkf-steuer button:hover { background: #E4F2DE; }
.nkf-steuer button:focus-visible { outline: 2px solid var(--ivg-gruen); outline-offset: -2px; }
.nkf-steuer button[data-zoom="eins"] { font-size: 11.5px; font-weight: 700; }
.nkf-steuer button svg { width: 18px; height: 18px; }
.nkf-steuer__wert { display: block; padding: 3px 0; border-top: 1px solid #DCE3E6; text-align: center; font-family: var(--font-mono); font-size: 10.5px; color: #4A5A63; }
.nkf--klein .nkf__flaeche { gap: 68px; padding-right: 28px; }
.nkf__linien { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; max-width: none; }
.nkf-spalte { position: relative; z-index: 1; flex: 0 0 auto; width: 290px; display: flex; flex-direction: column; gap: 10px; }
.nkf--klein .nkf-spalte { width: 252px; }
.nkf-spalte__kopf { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(16, 43, 58, 0.94); border: 1px solid var(--ivg-panel-rand); }
.navikarte-gross .nkf-spalte__kopf { position: sticky; top: 0; z-index: 3; }
.nkf-spalte__symbol { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--rgb-highlight), 0.14); color: var(--ivg-gruen-hell); }
.nkf-spalte--hier .nkf-spalte__symbol { background: var(--ivg-gruen); color: var(--color-navy); }
.nkf-spalte--ohne .nkf-spalte__symbol { background: rgba(229, 143, 180, 0.18); color: #F2B5CE; }
.nkf-spalte__text { min-width: 0; display: grid; gap: 1px; }
.nkf-spalte__text strong { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; }
.nkf-spalte__text span { font-size: 11px; line-height: 1.35; color: var(--ivg-label-dunkel); }
.nkf-spalte__zu { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--ivg-panel-rand); border-radius: 7px; background: transparent; color: var(--ivg-label-dunkel); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.nkf-spalte__zu:hover { color: #fff; border-color: var(--ivg-gruen); }
.nkf-spalte__liste { display: flex; flex-direction: column; gap: 8px; }
.nkf-leer { margin: 0; padding: 12px; border: 1px dashed var(--ivg-panel-rand); border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--ivg-label-dunkel); }
.nkf-gruppe { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 13px; background: rgba(255, 255, 255, 0.025); border: 1px dashed rgba(255, 255, 255, 0.09); }
.nkf-gruppe__kopf { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivg-label-dunkel); }

/* Karte einer Seite: Bild oder Bereichssymbol – Farbe = Bereich */
.nkf-ico { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; max-width: none; }
.nkf-ico--s { width: 13px; height: 13px; }
.nkf-ico--l { width: 26px; height: 26px; }
.nkf-karte { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 8px 34px 8px 8px; border-radius: 12px; background: #13324A; border: 1px solid var(--ivg-panel-rand); border-left: 4px solid var(--g, var(--ivg-rand-dunkel)); color: #fff; cursor: pointer; text-align: left; transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease, border-color .15s ease; }
.nkf-karte:hover { transform: translateX(2px); border-color: var(--g); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.8); }
.nkf-karte:focus-visible { outline: 2px solid var(--ivg-gruen-hell); outline-offset: 2px; }
.nkf-karte__bild { position: relative; flex: 0 0 auto; width: 66px; height: 54px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--g) 30%, #0A1A24); color: var(--g); color: color-mix(in srgb, var(--g) 72%, #fff); }
.nkf--klein .nkf-karte__bild { width: 54px; height: 46px; }
.nkf-karte__bild.hat-bild { background: #0A1A24; }
.nkf-karte__bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nkf-karte__plakette { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--g); color: #0A1A24; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.nkf-karte__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nkf-karte__bereich { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g); }
.nkf-karte__titel { font-size: 13px; line-height: 1.25; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.nkf-karte__pfad { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; color: var(--ivg-label-dunkel); overflow-wrap: anywhere; }
.nkf-karte__marken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nkf-karte__auf { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--ivg-label-dunkel); }
.nkf-karte__auf:hover, .nkf-karte__auf:focus-visible { background: var(--ivg-gruen); color: var(--color-navy); outline: 0; }
.nkf-karte__auf .nkf-ico { width: 14px; height: 14px; }
.nkf-zahl { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--ivg-blau-dunkel); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; }
.nkf-marke { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.5; }
.nkf-marke--noindex { background: rgba(124, 196, 227, 0.16); color: #9ED6EE; }
.nkf-marke--gesperrt, .nkf-marke--entwurf, .nkf-marke--sackgasse { background: rgba(226, 163, 59, 0.18); color: #F2C46B; }
.nkf-marke--weiterleitung { background: rgba(180, 123, 214, 0.2); color: #D7B1F0; }
.nkf-marke--unbekannt { background: rgba(217, 83, 79, 0.24); color: #FFA8A4; }
.nkf-marke--intern, .nkf-marke--extern { background: rgba(255, 255, 255, 0.08); color: var(--ivg-label-dunkel); }
.nkf-marke--waise { background: rgba(229, 143, 180, 0.18); color: #F4BCD3; }
.nkf-marke--her { background: rgba(124, 196, 227, 0.2); color: #C5E9F8; }

/* Zustände der Ziele: am Rand ablesbar, nicht nur an der Farbe */
.nkf-karte--weiterleitung { border-style: dashed; border-left-style: solid; }
.nkf-karte--gesperrt, .nkf-karte--entwurf { border-style: dashed; border-color: rgba(226, 163, 59, 0.6); border-left-color: var(--g); }
.nkf-karte--unbekannt { border-color: rgba(217, 83, 79, 0.75); background: #3A1F28; }
.nkf-karte--extern, .nkf-karte--intern { background: #10293B; }

/* Sie sind hier, Route, Herkunft, Auswahl */
.nkf-karte--hier { background: #173F35; border-color: var(--ivg-gruen); box-shadow: 0 0 0 2px rgba(var(--rgb-teal), 0.5), 0 0 28px -4px rgba(var(--rgb-teal), 0.55); }
.nkf-karte--hier .nkf-karte__bild { width: 76px; height: 62px; }
.nkf-karte--hier .nkf-karte__titel { font-family: var(--font-display); font-size: 14.5px; }
.nkf-karte.ist-route { border-color: var(--ivg-gruen); box-shadow: 0 0 0 1px var(--ivg-gruen), 0 0 22px -6px rgba(var(--rgb-teal), 0.8); }
.nkf-karte.ist-gewaehlt { background: #1A4436; }
.nkf-karte.ist-kind { border-color: rgba(var(--rgb-teal), 0.7); }
.nkf-karte.ist-herkunft { border-color: #7CC4E3; border-style: dashed; border-left-style: solid; }
.nkf-karte.ist-schleife { opacity: 0.6; }
.hat-route .nkf-karte:not(.ist-route):not(.ist-kind):not(.nkf-karte--hier):not(.ist-herkunft):not(.nkf-karte--nabe) { opacity: 0.5; }
.hat-route .nkf-karte:hover { opacity: 1; }
.hat-suche .nkf-karte:not(.ist-treffer) { opacity: 0.22; }
.nkf-karte.ist-treffer { box-shadow: 0 0 0 2px #F2B13D, 0 0 20px -4px rgba(242, 177, 61, 0.7); opacity: 1; }
.nkf-karte--nabe { padding-right: 10px; background: #102B3A; }
.nkf-karte--nabe .nkf-karte__bild { width: 46px; height: 46px; border-radius: 12px; }

/* Linien: dezent – die Route leuchtet und „fährt“ wie im Navi */
.nkf-linie { fill: none; stroke: rgba(159, 178, 188, 0.32); stroke-width: 1.5; }
.nkf-linie--st-unbekannt { stroke: rgba(217, 83, 79, 0.75); }
.nkf-linie--st-weiterleitung { stroke: rgba(180, 123, 214, 0.65); stroke-dasharray: 5 4; }
.nkf-linie--st-gesperrt, .nkf-linie--st-entwurf { stroke: rgba(226, 163, 59, 0.6); stroke-dasharray: 3 4; }
.nkf-linie--kind { stroke: rgba(var(--rgb-teal), 0.65); stroke-width: 2; }
.nkf-linie--her { stroke: #7CC4E3; stroke-width: 3; stroke-dasharray: 8 6; }
.nkf-linie--route { stroke: var(--ivg-gruen); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 16 9; animation: nkf-fahrt 1s linear infinite; filter: drop-shadow(0 0 5px rgba(101, 185, 74, 0.75)); }
.hat-route .nkf-linie--normal { stroke-opacity: 0.45; }
.nkf-spitze { stroke: none; }
.nkf-spitze--normal { fill: rgba(159, 178, 188, 0.6); }
.nkf-spitze--route { fill: var(--ivg-gruen); }
.nkf-spitze--her { fill: #7CC4E3; }
@keyframes nkf-fahrt { to { stroke-dashoffset: -25; } }
@media (prefers-reduced-motion: reduce) { .nkf-linie--route { animation: none; stroke-dasharray: none; } }

/* Legende */
.nkf-legende__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.nkf-legende__zeile + .nkf-legende__zeile { margin-top: 6px; }
.nkf-legende__eintrag { display: inline-flex; align-items: center; gap: 6px; }
.nkf-legende__symbol { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--g) 30%, #0A1A24); color: var(--g); color: color-mix(in srgb, var(--g) 72%, #fff); }
.nkf-legende__linie { display: inline-block; width: 26px; height: 0; border-top: 4px dashed var(--ivg-gruen); }

/* Große Ansicht der Karte */
html.hat-navikarte-gross { overflow: hidden; }
.navikarte-gross { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: radial-gradient(circle at 30% 0%, #0F2C3D 0%, var(--color-navy) 60%); color: #fff; font-family: var(--font-body); }
.navikarte-gross__kopf { display: flex; align-items: center; gap: 18px; padding: 12px 22px; border-bottom: 1px solid var(--ivg-panel-rand); }
.navikarte-gross__titelblock { min-width: 0; flex: 1 1 auto; }
.navikarte-gross__titel { color: #fff; margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.navikarte-gross__modus { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, 0.06); }
.navikarte-gross__modus button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ivg-label-dunkel); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.navikarte-gross__modus button[aria-selected="true"] { background: var(--ivg-gruen); color: var(--color-navy); }
.navikarte-gross__zu { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--ivg-gruen); color: var(--color-navy); font: inherit; font-weight: 700; cursor: pointer; }
.navikarte-gross__zu:hover { background: var(--ivg-gruen-hover); }
.navikarte-gross__leiste { padding: 10px 22px; border-bottom: 1px solid var(--ivg-panel-rand); }
.navikarte-gross__leiste .navikarte__weg { margin: 0; }
.navikarte-gross__zahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.navikarte-gross__zahl { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ivg-panel-rand); font-size: 12px; color: var(--ivg-label-dunkel); }
.navikarte-gross__zahl strong { font-family: var(--font-display); font-size: 17px; color: #fff; }
.navikarte-gross__zahl.ist-warn { border-color: rgba(226, 163, 59, 0.55); }
.navikarte-gross__zahl.ist-warn strong { color: #F2C46B; }
.navikarte-gross__zahl.ist-fehler { border-color: rgba(217, 83, 79, 0.7); }
.navikarte-gross__zahl.ist-fehler strong { color: #FF9C98; }
.navikarte-gross__zahl.ist-gut strong { color: var(--ivg-gruen-hell); }
.navikarte-gross__suche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.navikarte-gross__suche input { flex: 0 1 280px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--ivg-panel-rand); border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: var(--text-sm); }
.navikarte-gross__suche input:focus { outline: 2px solid var(--ivg-gruen-hell); outline-offset: 1px; }
.navikarte-gross__suche input.ist-leer { border-color: var(--color-error); }
.navikarte-gross__route { flex: 1 1 400px; font-size: 12.5px; color: var(--ivg-label-dunkel); }
.navikarte-gross__route strong { color: var(--ivg-gruen-hell); }
.navikarte-gross__route i { font-style: normal; color: var(--ivg-rand-dunkel); }
.navikarte-gross__legende { padding: 9px 22px; border-bottom: 1px solid var(--ivg-panel-rand); font-size: 12px; color: var(--ivg-label-dunkel); }
.navikarte-gross > .nkf-rahmen { flex: 1 1 auto; min-height: 0; margin: 12px 16px 16px; }
.navikarte-gross__buehne { flex: 1 1 auto; min-height: 0; overflow: auto; }
@media (max-width: 900px) {
  .navikarte-gross__kopf { flex-wrap: wrap; }
  .navikarte-gross__legende { display: none; }
}

.navikarte__fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ivg-panel-rand); font-size: var(--text-xs); color: var(--ivg-label-dunkel); }
.navikarte__bauen { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--ivg-gruen); border-radius: 8px; background: transparent; color: var(--ivg-gruen-hell); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.navikarte__bauen:hover:not(:disabled) { background: var(--ivg-gruen); color: var(--color-navy); }
.navikarte__bauen:disabled { opacity: 0.6; cursor: progress; }

/* Markierung des Links in der Seite, wenn man ihn in der Leiste anfährt. */
.navikarte-markiert { outline: 3px solid var(--ivg-gruen) !important; outline-offset: 3px; border-radius: 4px; scroll-margin: 120px; }

@media (max-width: 640px) {
  .navikarte__schalter span { display: none; }
  .navikarte[data-karte="1"] { --navi-breite: 96vw; }
}
@media (prefers-reduced-motion: reduce) {
  .navikarte__panel, .navikarte__schalter { transition: none; }
}
@media print {
  .navikarte { display: none; }
}

/* ===== Adminleiste (Änderung 2026-10-30) ================================
   Nur für angemeldete Konten, im Kopf der Seite (bleibt beim Scrollen
   sichtbar). Markup: includes/adminleiste.php. */
:root:has(body > .adminleiste) { --adminleiste-h: 40px; }
.adminleiste { position: sticky; top: 0; z-index: 60; height: 40px; box-sizing: border-box; overflow: hidden; background: #06131B; color: #C9D3D8; border-bottom: 2px solid var(--ivg-gruen, #65B94A); font-family: var(--font-body); font-size: 13px; line-height: 1.2; }
.adminleiste__innen { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; height: 38px; padding: 0 16px; max-width: none; }
/* Der klebende Kopf rückt unter die Leiste – auch dort, wo er sein Servicemenü
   nach oben wegschiebt (theme.css: top = −Höhe des Servicemenüs). */
body:has(> .adminleiste) .site-header { top: calc(var(--adminleiste-h, 40px) - var(--topbar-h, 0px)); }
body:has(> .adminleiste) :target { scroll-margin-top: calc(var(--adminleiste-h, 40px) + 96px); }
.adminleiste__ico { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; max-width: none; }
.adminleiste__wer { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.adminleiste__wer strong { color: #fff; font-weight: 700; }
.adminleiste__text { overflow: hidden; text-overflow: ellipsis; }
.adminleiste__punkt { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ivg-gruen, #65B94A); box-shadow: 0 0 0 0 rgba(101, 185, 74, 0.6); animation: adminleiste-puls 2.4s ease-out infinite; }
@keyframes adminleiste-puls { 0% { box-shadow: 0 0 0 0 rgba(101, 185, 74, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(101, 185, 74, 0); } }
.adminleiste__rolle { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(101, 185, 74, 0.16); color: #9FD68C; font-size: 11.5px; font-weight: 600; }
.adminleiste__status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, 0.07); color: #C9D3D8; }
.adminleiste__status--oeffentlich { background: rgba(101, 185, 74, 0.14); color: #9FD68C; }
.adminleiste__status--noindex { background: rgba(124, 196, 227, 0.16); color: #9ED6EE; }
.adminleiste__status--gesperrt, .adminleiste__status--entwurf { background: rgba(226, 163, 59, 0.2); color: #F2C46B; }
.adminleiste__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.adminleiste__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: #C9D3D8; font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.adminleiste__link:hover, .adminleiste__link:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; outline: 0; }
.adminleiste__link:focus-visible { box-shadow: 0 0 0 2px #9FD68C; }
.adminleiste__link--backend { background: var(--ivg-gruen, #65B94A); color: #0A1A24; }
.adminleiste__link--backend:hover, .adminleiste__link--backend:focus-visible { background: #74C659; color: #0A1A24; }
.adminleiste__link--ab { color: #9FB2BC; }
@media (max-width: 1100px) {
  .adminleiste__status span, .adminleiste__rolle { display: none; }
  .adminleiste__link:not(.adminleiste__link--backend) span { display: none; }
}
@media (max-width: 560px) {
  .adminleiste__vor { display: none; }
  .adminleiste__text { max-width: 8em; }
  .adminleiste__innen { padding: 4px 10px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .adminleiste__punkt { animation: none; } }
@media print { .adminleiste { display: none; } }

/* ==========================================================================
   Schnellzugang – Laschen am linken Rand (Änderung 2026-11-12)
   Markup: includes/schnellzugang.php, Verhalten: assets/js/site.js.
   Zugeklappt: Nummer + Symbol schauen am Rand heraus, gleiten nach dem Laden
   herein und stupsen in Abständen leicht an. Maus, Tastatur oder Fingertipp
   klappen alle Einträge mit Text auf. Unter 768 px ein einzelner Griff.
   ========================================================================== */
.sz {
  --sz-lasche: 54px;
  --sz-hoehe: 58px;
  --sz-breite: 352px;
  --sz-grund: linear-gradient(135deg, #133447 0%, var(--color-navy, #0A1A24) 100%);
  --sz-grund-hover: linear-gradient(135deg, #1A4760 0%, #0D2230 100%);
  --sz-gruen: var(--ivg-gruen, #65B94A);
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  font-family: var(--font-body);
  pointer-events: none;
}
.sz__vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.sz__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
}
.sz__eintrag {
  margin: 0;
  animation: sz-rein 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.8s + var(--sz-i, 0) * 0.14s);
}
.sz__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--sz-lasche);
  height: var(--sz-hoehe);
  padding: 0 14px 0 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--sz-grund);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 10px 28px rgba(10, 26, 36, 0.28), inset 3px 0 0 var(--sz-gruen);
  transition: width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, box-shadow 0.2s ease, background 0.2s ease;
  animation: sz-wink 7s ease-in-out infinite;
  animation-delay: calc(3.2s + var(--sz-i, 0) * 0.35s);
}
.sz__link:hover,
.sz__link:focus-visible {
  color: #fff;
  background: var(--sz-grund-hover);
  box-shadow: 0 12px 32px rgba(10, 26, 36, 0.34), inset 5px 0 0 var(--sz-gruen);
}
.sz__link:focus-visible {
  outline: 3px solid var(--ivg-gruen-hell, #9FD68C);
  outline-offset: 2px;
}
.sz__link--vorschau { border-style: dashed; opacity: 0.85; }
.sz__lasche {
  position: relative;
  flex: 0 0 var(--sz-lasche);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sz__nr {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sz-gruen);
  color: var(--color-navy, #0A1A24);
  font: 800 12px/1 var(--font-display);
}
.sz__nr::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--sz-gruen);
  opacity: 0;
  animation: sz-puls 7s ease-out infinite;
  animation-delay: calc(3.2s + var(--sz-i, 0) * 0.35s);
}
.sz__symbol { width: 22px; height: 22px; color: #fff; }
.sz__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.18s ease, transform 0.3s ease;
}
.sz__titel {
  font: 700 15px/1.2 var(--font-display);
  letter-spacing: 0.005em;
}
.sz__unter {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--color-on-dark-muted, #C9D3D8);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sz__pfeil {
  flex: 0 0 auto;
  color: var(--ivg-gruen-hell, #9FD68C);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sz__link:hover .sz__pfeil,
.sz__link:focus-visible .sz__pfeil { transform: translateX(3px); }
.sz__griff { display: none; }

/* Aufgeklappt: Maus über der Leiste, Tastaturfokus darin oder per Tipp. */
.sz.is-offen .sz__link,
.sz:focus-within .sz__link { width: var(--sz-breite); animation: none; transition-delay: calc(var(--sz-i, 0) * 45ms), 0s, 0s; }
.sz.is-offen .sz__text,
.sz.is-offen .sz__pfeil,
.sz:focus-within .sz__text,
.sz:focus-within .sz__pfeil { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--sz-i, 0) * 45ms); }
.sz.is-offen .sz__nr::after,
.sz:focus-within .sz__nr::after { animation: none; }
@media (hover: hover) and (min-width: 768px) {
  .sz:hover .sz__link { width: var(--sz-breite); animation: none; transition-delay: calc(var(--sz-i, 0) * 45ms), 0s, 0s; }
  .sz:hover .sz__text,
  .sz:hover .sz__pfeil { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--sz-i, 0) * 45ms); }
  .sz:hover .sz__nr::after { animation: none; }
}

@keyframes sz-rein {
  from { opacity: 0; transform: translateX(-110%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sz-wink {
  0%, 15%, 100% { transform: translateX(0); }
  3%  { transform: translateX(12px); }
  6%  { transform: translateX(0); }
  9%  { transform: translateX(6px); }
  12% { transform: translateX(0); }
}
@keyframes sz-puls {
  0%   { opacity: 0; transform: scale(0.8); }
  3%   { opacity: 0.9; transform: scale(1); }
  15%  { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* Mit Warenkorb-Knopf (Modul shop) rutscht die Leiste nach unten. */
body:has(.cart-fab) .sz { transform: translateY(calc(-50% + 150px)); }
/* Bei geöffnetem Handy-Menü nicht darüberlegen. */
body:has(.mobile-nav.is-open) .sz { display: none; }

/* Handy: ein Griff mit den Symbolen, Tipp öffnet die Liste. */
@media (max-width: 767px) {
  .sz {
    --sz-breite: min(340px, calc(100vw - 24px));
    top: auto;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    transform: none;
    animation: sz-rein 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both;
  }
  body:has(.cart-fab) .sz { transform: none; bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
  .sz__griff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 36px;
    padding: 10px 0 8px;
    color: #fff;
    background: var(--sz-grund);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 10px 26px rgba(10, 26, 36, 0.3), inset 3px 0 0 var(--sz-gruen);
    cursor: pointer;
    pointer-events: auto;
    animation: sz-wink 7s ease-in-out 3.2s infinite;
  }
  .sz__griff:focus-visible { outline: 3px solid var(--ivg-gruen-hell, #9FD68C); outline-offset: 2px; }
  .sz__griff-symbole { display: flex; flex-direction: column; gap: 7px; }
  .sz__griff-symbol { width: 18px; height: 18px; }
  .sz__griff-pfeil { color: var(--sz-gruen); }
  .sz__liste {
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
  }
  .sz__eintrag { animation: none; }
  .sz__link {
    width: var(--sz-breite);
    transform: translateX(-105%);
    animation: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sz__link { height: auto; min-height: var(--sz-hoehe); padding-block: 8px; }
  .sz__lasche { align-self: stretch; height: auto; }
  .sz__text, .sz__pfeil { opacity: 1; transform: none; }
  .sz__text { white-space: normal; }
  .sz__unter { overflow: visible; text-overflow: clip; }
  .sz.is-offen .sz__griff { visibility: hidden; }
  .sz.is-offen .sz__liste { visibility: visible; transition-delay: 0s; }
  .sz.is-offen .sz__link { transform: none; transition-delay: calc(var(--sz-i, 0) * 50ms); }
  .sz__liste:focus-within { visibility: visible; transition-delay: 0s; }
  .sz__liste:focus-within .sz__link { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sz, .sz__eintrag, .sz__link, .sz__griff, .sz__nr::after { animation: none !important; }
  .sz__link, .sz__text, .sz__pfeil { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}
@media print { .sz { display: none !important; } }