/* ============================================================
   Leib GmbH – konsolidiertes Stylesheet
   ============================================================ */
@font-face {
    font-family: "KBOutfit";
    src: url("/assets/fonts/outfit-v15-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KBLora";
    src: url("/assets/fonts/lora-v37-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); 
}
*/

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f5f8fc;
  --color-surface-alt: #eef3fa;
  --color-border: #e4e9f1;
  --color-text: #0F2C35;         /* anthracite / near-black (logo lettering) */
  --color-text-muted: #45505f;
  --color-text-faint: #808b9b;

  --color-navy: #0a1f3d;
  --color-navy-deep: #06142a;
  --color-navy-light: #1a3766;

  /* Primary accent derived from the VISION1 cobalt blue (#2c4b9b) */
  --color-accent: #2c4b9b;
  --color-accent-hover: #223b7d;
  --color-accent-dark: #1b2c5e;
  --color-accent-light: #e6ecf9;  /* pale periwinkle */

  /* Secondary teal (kept from prior brand, used sparingly for washes) */
  --color-teal: #00a5b8;
  --color-teal-soft: rgba(0, 165, 184, 0.09);

  --color-success: #2c7a3e;
  --color-warning: #b35900;
  --color-error: #b8334a;

  /* Type scale */
  --font-display: "KBLora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "KBOutfit", system-ui, -apple-system, "Segoe UI", 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(13, 27, 42, 0.03), 0 2px 8px -2px rgba(13, 27, 42, 0.05);
  --shadow-md: 0 6px 16px -6px rgba(13, 27, 42, 0.08), 0 16px 40px -12px rgba(13, 27, 42, 0.10);
  --shadow-lg: 0 20px 48px -16px rgba(10, 31, 61, 0.16);

  /* CI pastel washes (logo-blue forward, low opacity) */
  --pastel-blue: rgba(44, 75, 155, 0.12);
  --pastel-peri: rgba(90, 110, 200, 0.13);
  --pastel-cyan: rgba(0, 165, 184, 0.09);
  --pastel-navy: rgba(10, 31, 61, 0.06);
  /* Back-compat aliases used by the appended preview layer */
  --pastel-teal: rgba(44, 75, 155, 0.12);
  --pastel-lilac: rgba(90, 110, 200, 0.10);

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

    --cream: #eef4f6;
    --paper: #ffffff;
    --ink: #1c2b30;
    --green: #2c6b7d;
    --rust: #2c6b7d;
    --gold: #e8a33d;
    --line: #dbe6e8;
    --kb-red: #2c6b7d;
    --kb-red-dark: #163e4a;
    --kb-yellow: #e8a33d;
    --kb-cream: #eef4f6;
    --kb-paper: #ffffff;
    --kb-ink: #1c2b30;
    --kb-muted: #55686e;
    --kb-line: #dbe6e8;

    --lb-primary: #2c6b7d;
    --lb-primary-dark: #163e4a;
    --lb-primary-darker: #0F2C35;
    --lb-accent: #e8a33d;
    --lb-bg: #f5f8f9;
    --lb-bg-alt: #eef4f5;
    --lb-text: #1c2b30;
    --lb-text-muted: #55686e;
    --lb-border: #dbe6e8;
    --lb-white: #ffffff;
    --lb-radius: 14px;
    --lb-shadow: 0 12px 30px -12px rgba(15, 44, 53, 0.18);
    --lb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 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);
}

@media (min-width: 768px) {
   .container { 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: #e6ebf2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #b5c0cf; }

.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: #5fd4e0; }



/* Header */

/* 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;
}

.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; }

/* 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); }



@media (min-width: 1300px) {
  .nav { display: flex; }
  
  
}


.menu-toggle svg { width: 18px; height: 18px; }

@media (min-width: 1300px) {
  
}

/* 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; }
  
  
  
}

/* Aufklappmenue in der Hauptnavigation (Option "Dropdown-Navigation") */





.nav__group.is-open > .nav__toggle .nav__chevron { transform: rotate(180deg); }

.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__sub a { padding-left: 1.25rem; }


.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) {
  
}

/* 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(0, 122, 137, 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--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 {
    width: 100%;
  }
}


@media (min-width: 1300px) {
  
}

/* Hero */
.hero {
  position: relative;
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(0, 165, 184, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(10, 31, 61, 0.06), transparent 60%),
    var(--color-bg);
}

@media (min-width: 980px) {
  
}





.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) {  }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 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: #c4d3e3;
  box-shadow: var(--shadow-md);
}

.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); }



/* Download-Karten (downloads.php) */




.download-card__head h3 { font-size: var(--text-lg); margin: 0 0 0.25rem; 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 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }


/* 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) */

@media (min-width: 900px) {
  
  
}

.feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* Section banner figure (full-width image inside a section) */

.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: #5fd4e0; }

/* 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 h3 { font-size: var(--text-base); margin-bottom: var(--space-2); font-weight: 600; }
.value p { font-size: var(--text-sm); }

/* Company history */


@media (min-width: 720px) {
  
}
.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::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), rgba(0, 165, 184, 0.08));
}



.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::before {
    left: 92px;
  }
  
  
  
}

/* 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(0, 165, 184, 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: #b5c0cf; 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 {
  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__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 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 h3 {
  margin-bottom: var(--space-3);
}

.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 */

.page-hero h1,
.page-hero__sub { overflow-wrap: break-word; hyphens: auto; }




.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);
}


.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: #b5c0cf;
  font-size: var(--text-sm);
}

/* Managed XDR landing page */

@media (min-width: 960px) {
  
}

 .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 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: #d6f1f4;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.xdr-outcomes div {
  border-color: rgba(0, 165, 184, 0.35);
  background: var(--color-accent-light);
  color: var(--color-navy);
}

@media (min-width: 760px) {
  
}
@media (min-width: 1100px) {
  
}

.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__layer--accent .ki-arch__nodes span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #eef4ff;
}



@media (min-width: 760px) {
  
}




.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;
}


/* 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(0, 165, 184, 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 a { color: #d3dae3; transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-accent); }

@media (min-width: 720px) {
  
}
.footer-col h4 {
  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); }



/* Reveal on scroll (lightweight) */
.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); }


.hidden { display: none; }

/* =====================================================================
   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(95, 212, 224, 0.14);
  color: #7fe0ec;
}

/* --- 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);
}


/* --- 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(44, 75, 155, 0.09) 47% 54%, transparent 54%),
    linear-gradient(135deg, transparent 63%, rgba(0, 165, 184, 0.07) 63% 70%, transparent 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }


/* --- 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(44, 75, 155, 0.55); }
.btn--primary:hover { box-shadow: 0 10px 22px -10px rgba(44, 75, 155, 0.62); }

/* =====================================================================
   intelliVision1 CI background visuals + motion layer
   Abstract "forward / play" chevron & ribbon shapes inspired by the
   logo's double-play mark. Pure CSS, no assets, non-interactive.
   ===================================================================== */

/* 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(44, 75, 155, 0.10) 46% 54%, transparent 54%),
    linear-gradient(135deg, transparent 62%, rgba(0, 165, 184, 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(90, 110, 200, 0.10), transparent 38%, rgba(44, 75, 155, 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(120, 150, 240, 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 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(120, 150, 240, 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)
   ===================================================================== */
.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(44, 75, 155, 0.06) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 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(10, 31, 61, 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::before {
  background: radial-gradient(600px 240px at 80% 0%, rgba(0, 165, 184, 0.25), transparent 60%);
}
.cta-block--navy::after {
  background:
    linear-gradient(115deg, transparent 40%, rgba(120, 150, 240, 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 0.10) 55% 62%, transparent 62%);
}
.cta-block--navy h2 { color: #fff; }
.cta-block--navy p { color: #b5c0cf; }
.cta-block--navy .eyebrow { background: rgba(95, 212, 224, 0.14); color: #7fe0ec; }
.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: #b5c0cf }
   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 .eyebrow { background: rgba(95, 212, 224, 0.14); color: #7fe0ec; }

/* Glasige Karte auf dunklem Grund: Flaeche transluzent, Schrift hell */




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

.ry-consent[hidden] { display: none; }



@keyframes ry-consent-in {
  from { transform: translateY(1.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}



 .consent-form__list > li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
 .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; }
 .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__actions .btn { flex: 1 1 12rem; justify-content: center; }

.ry-consent__links a { color: var(--color-accent); }

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 .btn-row { margin-top: 1rem; }


@media (min-width: 48rem) {
  
  
  .ry-consent__actions .btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  
}

/* ==========================================================================
   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__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__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 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::after,
.hero__media::after,
.page-hero__media::after,
.section-figure::after {
  content: "KI-generiertes 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 svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  
}

@media (prefers-reduced-motion: reduce) {
  
}

/* 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(--kb-red, 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: #8f1417; }
/* 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: #1c5d99;
  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: #124572;
  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: #c0392b;
  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 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__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}









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















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





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

@media (max-width: 640px) {
    

    

    
}

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



@media (min-width: 768px) {
  
}


.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(0, 165, 184, 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(0, 165, 184, 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(0, 165, 184, 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;
}

@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;
  }
}


@font-face {
    font-family: "KBOutfit";
    src: url("/assets/fonts/outfit-v15-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KBLora";
    src: url("/assets/fonts/lora-v37-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ===== Design-Tokens ===== */


/* ===== Reset ===== */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--kb-paper);
    color: var(--kb-ink);
    font-family: KBOutfit, Arial, sans-serif;
}
.container {
    max-width: 1180px;
}

/* ===== Kopfbereich & Navigation ===== */



.kb-brand img {
    display: block;
    width: auto;
    height: 76px;
    object-fit: contain;
}

.kb-brand strong,
.kb-brand small {
    display: block;
}
.kb-brand strong {
    font: 600 1.05rem KBLora;
}
.kb-brand small {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kb-header nav {
    display: flex;
    gap: 1.5rem;
}
.kb-header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
}
.kb-header nav a.active,
.kb-header nav a:hover {
    color: var(--rust);
}


/* ===== Startseite: Hero ===== */


.kb-kicker {
    color: var(--kb-red);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: bold;
    margin: 0 0 1rem;
}
.kb-hero h1,
.kb-pagehead h1 {
    font: 600 clamp(3.2rem, 6.5vw, 6.6rem) / 0.92 KBLora;
    letter-spacing: -0.055em;
    margin: 0;
}
.kb-hero h1 em {
    color: var(--rust);
    font-style: normal;
}

.kb-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* ===== Buttons ===== */
.kb-btn-primary {
    background: var(--kb-red);
    color: #fff;
    border-color: var(--kb-red);
    padding: 0.85rem 1.3rem;
    font-weight: 700;
}
.kb-btn-primary:hover {
    background: #8c3d23;
    color: #fff;
}
.kb-btn-light {
    background: transparent;
    border: 1px solid var(--ink);
    padding: 0.85rem 1.3rem;
    border-color: var(--kb-red);
    color: var(--kb-red);
    font-weight: 700;
}
.kb-btn-cream {
    background: var(--kb-cream);
    color: var(--kb-red);
    padding: 0.85rem 1.3rem;
    border-color: var(--kb-cream);
    font-weight: 700;
}

.kb-trust span:before {
    content: "•";
    color: var(--gold);
    margin-right: 0.45rem;
}

.kb-hero__image img {
    width: 100%;
    height: min(560px, 65vw);
    object-fit: cover;
    border-radius: 50% 50% 8px 8px;
}
.kb-hero__image figcaption {
    position: absolute;
    right: -1rem;
    bottom: 2rem;
    background: var(--paper);
    padding: 1rem 1.3rem;
    box-shadow: 0 15px 40px #44351b26;
    border-left: 4px solid var(--kb-yellow);
}
.kb-hero__image figcaption strong {
    display: block;
    color: var(--rust);
}

/* ===== Schnellinfo-Leiste ===== */


.kb-strip a {
    padding: 1.6rem;
    color: inherit;
    text-decoration: none;
    border-right: 1px solid var(--line);
}
.kb-strip a:first-child {
    border-left: 1px solid var(--line);
}
.kb-strip small,
.kb-strip strong {
    display: block;
}
.kb-strip small {
    color: #6e6a5f;
    margin-bottom: 0.25rem;
}

.kb-strip.kb-brown a,
.kb-strip.kb-brown a:link,
.kb-strip.kb-brown a:visited,
.kb-strip.kb-brown a strong {
    color: #fff;
}
.kb-strip.kb-brown small {
    color: rgba(255, 255, 255, 0.72);
}
.kb-strip.kb-brown a:hover strong {
    color: #f3e7c9;
}
.kb-strip.kb-brown a strong {
    color: #fff !important;
}

/* ===== Inhaltsbereiche & Karten ===== */
.kb-section {
    padding: clamp(4.5rem, 8vw, 8rem) 0;
}
.kb-section {
    padding: clamp(2.5rem, 5vw, 5rem) 0;
}

 .kb-route-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}
.kb-story h2,
.kb-route-teaser h2,
.kb-visit h2 {
    font: 600 clamp(2.5rem, 4vw, 4.5rem) / 1 KBLora;
    margin: 0;
}


.kb-cards article {
    background: #fff;
    padding: 2.2rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--rust);
}
.kb-cards article > span {
    color: var(--rust);
    font-family: KBLora;
}
.kb-cards h3 {
    font-family: KBLora;
    margin-top: 2rem;
}
.kb-section--green {
    position: relative;
    background: var(--green);
    color: #fff;
    isolation: isolate;
    background-image: url("/media/videoueberwachung-hero.webp");
    background-size: cover;
    background-position: center 58%;
    background-color: var(--kb-red);
}
.kb-section--green::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(42, 14, 13, 0.78);
}
.kb-kicker--light {
    color: #e5be68;
}
.kb-route-teaser {
    align-items: center;
    position: relative;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.kb-route-teaser p:not(.kb-kicker) {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 570px;
    margin: 1.5rem 0 2rem;
}

 .kb-route-list > a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.3rem 0;
    border-bottom: 1px solid #ffffff40;
    color: #fff;
    text-decoration: none;
}
.kb-route-list > a small {
    text-align: right;
}
.kb-route-list > a > span {
    white-space: nowrap;
}

.kb-visit a {
    color: var(--rust);
    font-size: 1.3rem;
}
.kb-hours > div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
}

/* ===== Seitenkopf (Unterseiten) ===== */
.kb-pagehead {
    background: var(--cream);
    padding: 5rem 0 4rem;
}
.kb-pagehead h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
}
.kb-pagehead p:last-child {
    font-size: 1.15rem;
    margin: 1.5rem 0 0;
}

/* ===== Touren-Suche ===== */
.kb-search {
    max-width: 820px;
    margin-bottom: 3rem;
}
.kb-search label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.7rem;
}
.kb-search > div {
    display: flex;
}
.kb-search input {
    flex: 1;
    border: 1px solid var(--line);
    padding: 1rem 1.1rem;
    font: inherit;
}
.kb-search select {
    flex: 1;
    border: 1px solid var(--line);
    padding: 1rem 1.1rem;
    font: inherit;
    background: #fff;
    color: inherit;
    border-radius: 0;
}
.kb-search button {
    border-radius: 0;
}
.kb-notice {
    background: var(--cream);
    padding: 2rem;
    border-left: 4px solid var(--gold);
}
.kb-tour-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: start;
}
.kb-tour-results {
    display: grid;
    gap: 1rem;
    overflow-y: auto;
}
.kb-tour-card {
    position: relative;
    display: block;
    border: 1px solid var(--line);
    padding: 1.4rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.kb-tour-card.active,
.kb-tour-card:hover {
    border-color: var(--kb-red);
    box-shadow: 0 10px 30px #51371a12;
}
.kb-tour-card.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 32px 32px;
    border-color: transparent transparent var(--kb-red) transparent;
}

.kb-tour-card > span {
    color: var(--rust);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.kb-tour-card h2 {
    font: 600 1.5rem KBLora;
    margin: 0.35rem 0;
}
.kb-tour-card p {
    margin: 0;
    color: #6d695f;
}
.kb-stop-list {
    background: var(--cream);
    padding: 2rem;
    align-self: start;
}
.kb-stop-list h2 {
    font-family: KBLora;
}
.kb-stop-list ol {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.kb-stop-list li {
    display: flex;
    gap: 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.kb-stop-list time {
    color: var(--rust);
    font-weight: bold;
}
.kb-stop-list strong,
.kb-stop-list span {
    display: block;
}
.kb-stop-list .kb-stop-meta {
    color: var(--kb-muted, #6b6157);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.kb-live-hint {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
}
.kb-live-hint > span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #89a197;
    margin-top: 0.4rem;
}

/* ===== Karriere & Kontaktseiten ===== */
 .kb-apply {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}
.kb-content-grid h2,
.kb-apply h2 {
    font: 600 clamp(2.4rem, 4vw, 4.2rem) / 1 KBLora;
    margin: 0;
}
.kb-content-grid > div:last-child,
.kb-apply > div:last-child {
    font-size: 1.12rem;
    line-height: 1.75;
}

.kb-location-grid article,
.kb-job-grid article {
    background: #fff;
    padding: 2rem;
}
.kb-location-grid a {
    display: block;
}
.kb-location-grid h2,
.kb-job-grid h2 {
    font: 600 1.6rem KBLora;
    margin-bottom: 0.8rem;
}

.kb-location-grid address {
    font-style: normal;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}
.kb-location-grid a,
.kb-contact-note a,
.kb-apply a,
.kb-legal a {
    color: var(--rust);
}

.kb-contact-note > * {
    margin-right: 1rem;
}
.kb-job-grid article > span {
    color: var(--rust);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
}

/* ===== Stellenangebote: Listen mit rotem Haken ===== */
.kb-job-grid ul {
    padding-left: 0;
    list-style: none;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.kb-apply {
    margin-top: 5rem;
}
.kb-pagehead--compact {
    padding-block: 3.5rem;
}

/* ===== Rechtstexte ===== */
.kb-legal {
    max-width: 820px;
}
.kb-legal h2 {
    font: 600 1.55rem KBLora;
    margin: 2.4rem 0 0.7rem;
}
.kb-legal h2:first-child {
    margin-top: 0;
}
.kb-legal p {
    line-height: 1.7;
}

/* ===== Unternehmensgeschichte ===== */



.kb-history article {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
}
.kb-history time {
    color: var(--kb-red);
    font: 600 2rem KBLora;
}
.kb-history h3 {
    font: 600 1.5rem KBLora;
    margin: 0 0 0.5rem;
}
.kb-history p {
    max-width: 800px;
    line-height: 1.7;
    margin: 0;
}

/* ===== Filialen ===== */

.kb-branch-grid article {
    background: var(--paper);
    border-top: 5px solid var(--kb-yellow);
    padding: clamp(1.5rem, 4vw, 3rem);
}
.kb-branch-grid h2 {
    font: 600 clamp(2rem, 3vw, 3rem) / 1.05 KBLora;
}
.kb-branch-grid h3 {
    font: 600 1.3rem KBLora;
    margin-top: 2rem;
}
.kb-branch-grid address {
    font-style: normal;
    line-height: 1.7;
    font-weight: 600;
}
.kb-branch-grid dl div {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 0.65rem 0;
}
.kb-branch-grid dt {
    font-weight: 700;
}
.kb-branch-grid dd {
    margin: 0;
}

.kb-branch-actions > a:not(.btn) {
    color: var(--kb-red);
}
.kb-route-teaser .btn {
    text-shadow: none;
}
.kb-header nav a:hover,
.kb-header nav a:focus-visible,
.kb-header nav a.active {
    color: var(--kb-yellow);
}

.kb-kicker--light,
.kb-section--green .kb-kicker {
    color: var(--kb-yellow);
}
.kb-section a:not(.btn),
.kb-legal a,
.kb-location-grid a,
.kb-contact-note a,
.kb-apply a {
    color: var(--kb-red);
}
.kb-section--green h1,
.kb-section--green h2,
.kb-section--green h3,
.kb-section--green h4,
.kb-section--green p,
.kb-section--green li,
.kb-section--green span,
.kb-section--green strong {
    color: #fff;
}
.kb-section--green .kb-kicker,
.kb-section--green .kb-kicker span {
    color: var(--kb-yellow);
}
.kb-section--green a:not(.btn) {
    color: var(--kb-yellow);
}
.kb-section--green .kb-route-list > a {
    color: #fff;
}
.kb-section--green .kb-route-list > a:hover small {
    color: var(--kb-yellow);
}
.kb-btn-primary:hover,
.kb-btn-primary:focus-visible {
    background: var(--kb-red-dark);
    border-color: var(--kb-red-dark);
    color: #fff;
}
.kb-btn-light:hover {
    background: var(--kb-red);
    color: #fff;
}
.kb-btn-cream:hover,
.kb-btn-cream:focus-visible {
    background: var(--kb-yellow);
    border-color: var(--kb-yellow);
    color: var(--kb-ink);
}
 .kb-pagehead, .kb-notice, .kb-stop-list {
    background: var(--kb-cream);
}

.kb-cards article,
.kb-product-grid article,
.kb-location-grid article,
.kb-job-grid article {
    background: #fff;
}
.kb-job-grid ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.kb-job-grid ul li::before {
    content: "";
    flex: 0 0 1.05em;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.btn:focus-visible {
    outline: 3px solid var(--kb-yellow);
    outline-offset: 3px;
}

/* ===== Utility: braune Textfarbe ===== */

.kb-brown a {
    color: #fff;
}
.kb-brown a:hover {
    color: var(--kb-yellow);
}
.container.kb-story,
.container.kb-cards,
.container.kb-product-intro,
.container.kb-product-grid {
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
    padding-inline: 0;
}
.kb-product-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
}
.kb-product-intro h2 {
    margin: 0;
    max-width: 720px;
    font: 600 clamp(2.4rem, 4vw, 4.5rem) / 1.05 KBLora, serif;
    letter-spacing: -0.025em;
}
.kb-product-intro > p {
    margin: 0;
    max-width: 620px;
    color: var(--kb-muted);
    font-size: 1.1rem;
    line-height: 1.75;
}
.container.kb-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    background: none;
    border: 0;
}
.container.kb-cards article {
    min-width: 0;
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--kb-line);
    border-top: 4px solid var(--kb-red);
}
.container.kb-cards article > span {
    display: block;
    color: var(--kb-red);
    font: 600 0.9rem KBLora, serif;
    letter-spacing: 0.08em;
}
.container.kb-cards h3 {
    margin: 1.75rem 0 0.8rem;
    color: var(--kb-ink);
    font: 600 1.55rem/1.2 KBLora, serif;
}
.container.kb-cards p {
    margin: 0;
    color: var(--kb-muted);
    line-height: 1.65;
}
.container.kb-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    background: none;
    border: 0;
}
.kb-section .container.kb-product-grid > .kb-product-card {
    display: flex;
    min-width: 0;
    color: var(--kb-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--kb-line);
    transition: transform 180ms ease, border-color 180ms ease,
        box-shadow 180ms ease;
}
.kb-section .container.kb-product-grid > .kb-product-card:hover,
.kb-section .container.kb-product-grid > .kb-product-card:focus-visible {
    color: var(--kb-ink);
    border-color: var(--kb-red);
    box-shadow: 0 16px 38px rgba(42, 14, 13, 0.12);
    transform: translateY(-4px);
}
.kb-section .container.kb-product-grid > .kb-product-card:focus-visible {
    outline: 3px solid var(--kb-yellow);
    outline-offset: 3px;
}
.kb-product-card article {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.4rem);
    background: transparent;
    border: 0;
}
.kb-product-card article > span {
    display: block;
    color: var(--kb-red);
    font: 600 0.9rem KBLora, serif;
    letter-spacing: 0.08em;
}
.kb-product-card h2 {
    margin: 1.5rem 0 0.9rem;
    color: var(--kb-ink);
    font: 600 clamp(1.65rem, 2.2vw, 2.1rem) / 1.15 KBLora, serif;
}
.kb-product-card p {
    margin: 0;
    color: var(--kb-muted);
    line-height: 1.65;
}
.kb-product-card ul {
    margin: 1.4rem 0 1.8rem;
    padding: 0;
    list-style: none;
}
.kb-product-card li {
    position: relative;
    margin-top: 0.55rem;
    padding-left: 1.4rem;
    color: var(--kb-muted);
    line-height: 1.5;
}
.kb-product-card li::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1.05em;
    height: 1.05em;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    transform: none;
}
.kb-product-card strong {
    display: block;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--kb-red);
    font-weight: 700;
}


/* ===== Produktkarten: Bilder ===== */

.kb-section .container.kb-product-grid > .kb-product-card article {
    --kb-product-card-padding: clamp(1.75rem, 3vw, 2.4rem);

    overflow: hidden;
    padding: var(--kb-product-card-padding);
}

.kb-section
    .container.kb-product-grid
    > .kb-product-card
    .kb-product-card__image {
    flex: 0 0 auto;

    width: calc(
        100%
        + var(--kb-product-card-padding)
        + var(--kb-product-card-padding)
    );

    aspect-ratio: 16 / 9;

    margin-top: calc(0px - var(--kb-product-card-padding));
    margin-right: calc(0px - var(--kb-product-card-padding));
    margin-bottom: 1.75rem;
    margin-left: calc(0px - var(--kb-product-card-padding));

    overflow: hidden;

    background: var(--kb-paper);
    border-bottom: 1px solid var(--kb-line);
}

.kb-section
    .container.kb-product-grid
    > .kb-product-card
    .kb-product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    transition: transform 300ms ease;
}

.kb-section
    .container.kb-product-grid
    > .kb-product-card:hover
    .kb-product-card__image:not(.kb-product-card__image--logo)
    img,
.kb-section
    .container.kb-product-grid
    > .kb-product-card:focus-visible
    .kb-product-card__image:not(.kb-product-card__image--logo)
    img {
    transform: scale(1.04);
}

/* Überschrift direkt nach dem Bild */
.kb-product-card__image + h2 {
    margin-top: 0;
}

/* Logo-Fallback */
.kb-section
    .container.kb-product-grid
    > .kb-product-card
    .kb-product-card__image--logo {
    display: grid;
    place-items: center;
    padding: 2.5rem;

    background:
        radial-gradient(
            circle at center,
            rgb(255 255 255 / 10%),
            transparent 65%
        ),
        var(--kb-red);
}

.kb-section
    .container.kb-product-grid
    > .kb-product-card
    .kb-product-card__image--logo img {
    width: min(75%, 240px);
    height: auto;
    max-height: 75%;

    object-fit: contain;
    transform: none;
}


.container.kb-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    width: min(1180px, calc(100% - 3rem));
    margin: 4rem auto 0;
    padding: 0;
    background: none;
    border: 0;
}
.container.kb-facts article {
    position: relative;
    min-width: 0;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--kb-line);
    border-top: 4px solid var(--kb-red);
}
.container.kb-facts article::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 4rem;
    height: 4px;
    background: var(--kb-yellow);
}
.container.kb-facts strong {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--kb-ink);
    font: 600 1.5rem/1.2 KBLora, serif;
}
.container.kb-facts span {
    display: block;
    color: var(--kb-muted);
    line-height: 1.65;
}
.container.kb-facts ul {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.container.kb-facts li {
    position: relative;
    margin-top: 0.55rem;
    padding-left: 1.4rem;
    color: var(--kb-muted);
    line-height: 1.5;
}
.container.kb-facts li:first-child {
    margin-top: 0;
}
.container.kb-facts li::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1.05em;
    height: 1.05em;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    transform: none;
}

@media (max-width: 800px) {
  
  .kb-header nav {
      display: none;
      position: absolute;
      top: 86px;
      left: 0;
      right: 0;
      background: var(--kb-red);
      padding: 1.5rem;
      flex-direction: column;
      border-bottom: 3px solid var(--kb-yellow);
  }
  .kb-header nav.open {
      display: flex;
  }
   .kb-route-teaser, .kb-tour-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
  }
  .kb-hero__image img {
      height: 420px;
  }
  .kb-hero__image figcaption {
      right: 0;
  }
  
  .kb-strip a,
      .kb-strip a:first-child {
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid var(--line);
  }
  .kb-hours > div {
      flex-direction: column;
      gap: 0.25rem;
  }
  .kb-search > div {
      flex-direction: column;
  }
   .kb-apply {
      grid-template-columns: 1fr;
      gap: 1px;
  }
   .kb-apply {
      gap: 2.5rem;
  }
  
   .kb-history article {
      grid-template-columns: 1fr;
  }
  .kb-history article {
      gap: 0.5rem;
  }
  .kb-branch-grid dl div {
      grid-template-columns: 1fr;
  }
  .kb-header nav a {
      padding: 0.45rem 0;
  }
  .kb-brand img {
      height: 68px;
  }
  .kb-section--green {
      background-position: center;
  }
  .container.kb-product-intro {
      grid-template-columns: 1fr;
      gap: 1.5rem;
  }
  .container.kb-cards {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
  .container.kb-facts {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
}
@media (max-width: 980px) {
  .container.kb-product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .container.kb-story,
      .container.kb-cards,
      .container.kb-product-intro,
      .container.kb-product-grid {
      width: min(100% - 2rem, 1180px);
  }
  .container.kb-product-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
  .container.kb-facts {
      width: min(100% - 2rem, 1180px);
  }
}

/* ===== Blog: Breadcrumb ===== */
.kb-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--kb-muted);
    margin-bottom: 1.5rem;
}
.kb-crumb a {
    color: var(--kb-muted);
    text-decoration: none;
}
.kb-crumb a:hover {
    color: var(--kb-red);
}
.kb-crumb span[aria-current] {
    color: var(--kb-ink);
}

/* ===== Blog: Beitragsraster & Karten ===== */
.kb-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.kb-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--kb-line);
    border-top: 4px solid var(--kb-red);
    padding: clamp(1.75rem, 3vw, 2.2rem);
    color: inherit;
}
.kb-blog-card__meta {
    color: var(--kb-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}
.kb-blog-card h2,
.kb-blog-card h3 {
    font: 600 1.5rem/1.2 KBLora, serif;
    margin: 0.9rem 0 0.7rem;
}
.kb-blog-card h2 a,
.kb-blog-card h3 a {
    color: var(--kb-ink);
    text-decoration: none;
}
.kb-blog-card h2 a:hover,
.kb-blog-card h3 a:hover {
    color: var(--kb-red);
}
.kb-blog-card p {
    color: var(--kb-muted);
    line-height: 1.65;
    margin: 0 0 1rem;
}
.kb-blog-card__date {
    font-size: 0.85rem;
    color: var(--kb-muted);
    margin-bottom: 1rem;
}
.kb-blog-card__date strong {
    color: var(--kb-ink);
}
.kb-blog-card__link {
    margin-top: auto;
    color: var(--kb-red);
    font-weight: 700;
    text-decoration: none;
}
.kb-blog-card__link:hover {
    color: var(--kb-red-dark);
}

/* ===== Blog: Artikel-Meta & Fließtext ===== */
.kb-article-meta {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    color: var(--kb-muted);
    font-size: 0.9rem;
    margin-top: 1.2rem;
}
.kb-article {
    max-width: 720px;
    margin-inline: auto;
    font-size: 1.1rem;
    line-height: 1.75;
}
.kb-article img {
    display: block;
    width: 100%;
    height: auto;
    margin: 2rem 0;
}
.kb-article h2 {
    font: 600 clamp(1.7rem, 3vw, 2.3rem) / 1.2 KBLora, serif;
    margin: 2.4rem 0 1rem;
}
.kb-article h3 {
    font: 600 1.4rem/1.2 KBLora, serif;
    margin: 2rem 0 0.8rem;
}
.kb-article p {
    margin: 0 0 1.3rem;
}
.kb-article ul,
.kb-article ol {
    margin: 0 0 1.3rem;
    padding-left: 1.3rem;
}
.kb-article li {
    margin: 0.4rem 0;
}
.kb-article a {
    color: var(--kb-red);
}
.kb-article blockquote {
    margin: 1.8rem 0;
    padding-left: 1.3rem;
    border-left: 4px solid var(--kb-yellow);
    color: var(--kb-muted);
    font-style: italic;
}

/* ===== Blog: Pagination ===== */
.kb-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 3rem;
}
.kb-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--kb-red);
    border-radius: 999px;
    color: var(--kb-red);
    text-decoration: none;
    font-weight: 600;
}
.kb-pagination a:hover,
.kb-pagination a[aria-current="page"] {
    background: var(--kb-red);
    color: #fff;
}

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

/* Hero Image */	
.kb-pagehead--image {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: clamp(440px, 55vw, 620px);
    display: flex;
    align-items: center;

    color: #fff;
    background: #2a0e0d;
}

.kb-pagehead__background {
    position: absolute;
    inset: 0;
    z-index: -2;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Dunkler Verlauf für lesbaren Text */
.kb-pagehead--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(42, 14, 13, 0.94) 0%,
        rgba(42, 14, 13, 0.78) 38%,
        rgba(42, 14, 13, 0.28) 68%,
        rgba(42, 14, 13, 0.08) 100%
    );
}

.kb-pagehead--image .container {
    position: relative;
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
}

.kb-pagehead--image .kb-kicker {
    color: var(--kb-yellow);
}

.kb-pagehead--image h1 {
    max-width: 920px;
    color: #fff;
}

.kb-pagehead--image p:last-child {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
}

@media (max-width: 640px) {
    .kb-pagehead--image {
        min-height: 480px;
    }

    .kb-pagehead__background {
        object-position: 65% center;
    }

    .kb-pagehead--image::after {
        background: rgba(42, 14, 13, 0.76);
    }

    .kb-pagehead--image .container {
        width: min(100% - 2rem, 1180px);
    }
}	


/* Hero mit Bild */
.kb-pagehead.kb-pagehead--image {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: clamp(440px, 52vw, 650px);
    padding: clamp(5rem, 10vw, 8rem) 0;

    color: #fff;
    background: #2a0e0d;

    grid-template-columns: none;
}

/* Herobild */
.kb-pagehead.kb-pagehead--image > img {
    position: absolute;
    z-index: -2;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;
}

/* Dunkler Verlauf für lesbaren Text */
.kb-pagehead.kb-pagehead--image::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(42, 14, 13, 0.94) 0%,
        rgba(42, 14, 13, 0.78) 35%,
        rgba(42, 14, 13, 0.36) 65%,
        rgba(42, 14, 13, 0.12) 100%
    );
}

/* Textbereich */
.kb-pagehead.kb-pagehead--image > .container {
    position: relative;
    z-index: 1;

    display: block;
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
    padding: 0;
}

/* Textbreite begrenzen */
.kb-pagehead.kb-pagehead--image > .container > * {
    max-width: 650px;
}

/* Kicker */
.kb-pagehead.kb-pagehead--image .kb-kicker {
    margin: 0 0 1rem;
    color: var(--kb-yellow, #f2d224);
}

/* Überschrift */
.kb-pagehead.kb-pagehead--image h1 {
    margin: 0;
    max-width: 750px;

    color: #fff;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1;
    overflow-wrap: normal;
    word-break: normal;
}

/* Einleitung */
.kb-pagehead.kb-pagehead--image > .container > p:last-child {
    margin: 1.5rem 0 0;
    max-width: 620px;

    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    line-height: 1.65;
}

/* Tablet und Smartphone */
@media (max-width: 800px) {
    .kb-pagehead.kb-pagehead--image {
        min-height: 480px;
        padding: 5rem 0;
    }

    .kb-pagehead.kb-pagehead--image > img {
        object-position: 60% center;
    }

    .kb-pagehead.kb-pagehead--image::after {
        background: linear-gradient(
            90deg,
            rgba(42, 14, 13, 0.92) 0%,
            rgba(42, 14, 13, 0.74) 65%,
            rgba(42, 14, 13, 0.4) 100%
        );
    }

    .kb-pagehead.kb-pagehead--image h1 {
        max-width: 90%;
        font-size: clamp(2.7rem, 11vw, 4.5rem);
    }
}

@media (max-width: 640px) {
    .kb-pagehead.kb-pagehead--image > .container {
        width: calc(100% - 2rem);
    }

    .kb-pagehead.kb-pagehead--image > img {
        object-position: 65% center;
    }

    .kb-pagehead.kb-pagehead--image::after {
        background: rgba(42, 14, 13, 0.7);
    }

    .kb-pagehead.kb-pagehead--image h1 {
        max-width: 100%;
    }
}

.kb-pagehead__ai-note {
    position: absolute;
    z-index: 3;
    right: 1rem;
    bottom: 0.75rem;

    display: block;
    padding: 0.3rem 0.55rem;

    color: rgba(255, 255, 255, 0.9);
    background: rgba(42, 14, 13, 0.72);
    border-radius: 0.2rem;

    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    pointer-events: none;
}

@media (max-width: 640px) {
    .kb-pagehead__ai-note {
        right: 0.5rem;
        bottom: 0.5rem;
        font-size: 0.65rem;
    }
}

/* ===== Datenschutzeinstellungen: Widerrufsformular ===== */
.kb-consent-form {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--kb-line);
    background: var(--kb-cream);
}
.kb-consent-form__list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.kb-consent-form__list li {
    border: 1px solid var(--kb-line);
    background: #fff;
}
.kb-consent-form__list label {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    cursor: pointer;
}
.kb-consent-form__list input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    accent-color: var(--kb-red);
}
.kb-consent-form__list input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
.kb-consent-form__list strong {
    display: block;
    color: var(--kb-ink);
}
.kb-consent-form__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--kb-muted);
}
.kb-consent-form .kb-actions {
    margin-top: 0.2rem;
}
.kb-consent-form__status {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--kb-muted);
}

/* ===== Vorbestellung Verkaufstouren ===== */
.kb-order-form h2 {
    font: 600 1.4rem/1.2 KBLora, serif;
    margin: 2rem 0 1rem;
}
.kb-order-form h2:first-of-type {
    margin-top: 0;
}
.kb-order-dates {
    display: grid;
    gap: 0.6rem;
}
.kb-order-date {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid var(--kb-line);
    background: #fff;
    padding: 0.9rem 1rem;
    cursor: pointer;
}
.kb-order-date input {
    margin-top: 0.25rem;
    accent-color: var(--kb-red);
}
.kb-order-date strong {
    display: block;
    color: var(--kb-ink);
}
.kb-order-date small {
    display: block;
    margin-top: 0.15rem;
    color: var(--kb-muted);
}
.kb-order-list {
    display: grid;
    gap: 0.5rem;
}
.kb-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--kb-line);
    background: #fff;
    padding: 0.8rem 1rem;
}
.kb-order-item strong {
    display: block;
    color: var(--kb-ink);
}
.kb-order-item__price {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--kb-muted);
}
.kb-order-qty {
    width: 4.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--kb-line);
    padding: 0.5rem;
    font: inherit;
    text-align: center;
}
.kb-order-total {
    margin: 1.2rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--kb-cream);
    border: 1px solid var(--kb-line);
}
.kb-order-total__hint {
    display: block;
    font-size: 0.8rem;
    color: var(--kb-muted);
}
.kb-order-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.kb-order-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--kb-ink);
}
.kb-order-fields input,
.kb-order-fields textarea {
    border: 1px solid var(--kb-line);
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-weight: 400;
}
.kb-order-fields__full {
    grid-column: 1 / -1;
}
.kb-order-required {
    color: var(--kb-red);
    font-weight: 400;
}
.kb-order-optional {
    color: var(--kb-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .kb-order-fields {
        grid-template-columns: 1fr;
    }
}

/* ===== Live-Tracking (Leaflet/OpenStreetMap) ===== */
.kb-live-tracking {
    margin-top: 1.5rem;
}
.kb-live-tracking__placeholder {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    background: var(--kb-cream);
    border: 1px solid var(--kb-line);
    padding: 1rem;
}
.kb-live-tracking__placeholder span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #89a197;
    margin-top: 0.4rem;
    flex: 0 0 auto;
}
.kb-live-tracking__map {
    width: 100%;
    height: 260px;
    border: 1px solid var(--kb-line);
}
.kb-live-tracking--large .kb-live-tracking__map {
    height: 480px;
}
.kb-live-tracking__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--kb-muted);
}
.kb-live-tracking__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--kb-muted);
}





/* Fahrzeug-Icon auf der Karte: deutlich größer/auffälliger als die
   kleinen, neutralen Haltestellen-Kreise. */
.kb-live-tracking__vehicle-icon span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kb-red);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--kb-red), 0 2px 8px rgba(42, 14, 13, 0.45);
}

.kb-stop-popup {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--kb-ink, #2a2a2a);
}
.kb-stop-popup strong {
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .kb-live-tracking--large .kb-live-tracking__map {
        height: 360px;
    }
}

.kb-background-cream {
    background: var(--cream);
}


/* FAQ Sections */
/* ===== Google Rezensionen (Startseite) ===== */


.kb-reviews__intro h2 {
    font-family: KBLora, serif;
    margin: 0 0 0.6rem;
    color: var(--kb-ink, #2a2a2a);
}

.kb-review-card__who strong {
    color: var(--kb-ink, #2a2a2a);
    font-size: 1rem;
}
.kb-review-card__who span {
    color: var(--kb-muted, #6b6157);
    font-size: 0.82rem;
}

.kb-reviews__summary-text strong {
    color: var(--kb-ink, #2a2a2a);
}

.kb-faq > .container {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}

.kb-faq__intro h2 {
    margin: 0.5rem 0 1.25rem;
    font-family: KBLora, serif;
}

.kb-faq__intro > p:last-child {
    max-width: 34rem;
    color: var(--kb-muted);
    line-height: 1.7;
}

.kb-faq__list details {
    border-bottom: 1px solid var(--line);
}

.kb-faq__list summary {
    position: relative;
    padding: 1.5rem 3.5rem 1.5rem 0;

    color: var(--kb-ink);
    font: 600 clamp(1.1rem, 2vw, 1.3rem)/1.4 KBLora, serif;

    list-style: none;
    cursor: pointer;
}

.kb-faq__list summary::-webkit-details-marker {
    display: none;
}

.kb-faq__list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;

    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;

    color: var(--kb-red);
    border: 1px solid var(--line);
    border-radius: 50%;

    font: 400 1.4rem/1 KBOutfit, sans-serif;
    transform: translateY(-50%);
    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.kb-faq__list details[open] summary::after {
    content: "−";
    color: #fff;
    background: var(--kb-red);
    border-color: var(--kb-red);
}

.kb-faq__list summary:hover {
    color: var(--kb-red);
}

.kb-faq__list summary:focus-visible {
    outline: 2px solid var(--kb-red);
    outline-offset: 4px;
}

.kb-faq__list details > div {
    padding: 0 3.5rem 1.5rem 0;
}

.kb-faq__list details > div p {
    max-width: 48rem;
    margin: 0;
    color: var(--kb-muted);
    line-height: 1.75;
}

.kb-faq__list a {
    color: var(--kb-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.kb-faq__list a:hover {
    text-decoration-thickness: 2px;
}

@media (max-width: 800px) {
    .kb-faq > .container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    
}

@media (max-width: 640px) {
    .kb-faq__list summary {
        padding-right: 3rem;
    }

    .kb-faq__list details > div {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-faq__list summary::after {
        transition: none;
    }
}



.kb-section--white {
    background-color: #ffffff;
}

.kb-tour-card__arrival {
    margin-top: 0.65rem;
    color: var(--kb-red);
    font-weight: 600;
}


.kb-text-cream {
	color: var(--cream);
}

a.kb-text-cream {
	color: var(--cream);
}


/* ===== Footer ===== */


.kb-footer .footer-social a {
    color: #fff;
    background: #ffffff14;
    border-color: #ffffff55;
}
.kb-footer .footer-social a:hover {
    color: var(--kb-red);
    background: var(--kb-yellow);
    border-color: var(--kb-yellow);
}
.kb-footer .footer-social svg {
    display: block;
}
.kb-footer a:hover {
    color: var(--kb-yellow);
}
.kb-footer__grid > div > strong {
    display: inline-block;
    color: #fff;
    border-bottom: 2px solid var(--kb-yellow);
    padding-bottom: 0.4rem;
    margin-bottom: 0.2rem;
}

.kb-header a:focus-visible,
.kb-footer a:focus-visible {
    outline: 3px solid var(--kb-yellow);
    outline-offset: 3px;
}

/* Spaltenüberschriften */
.kb-footer__grid h2,
.kb-footer__grid h3 {
    position: relative;

    margin: 0 0 1.1rem;
    padding-bottom: 0.75rem;

    color: #fff;
    font-family: KBLora, serif;
    font-size: 1.15rem;
    line-height: 1.3;
}

.kb-footer__grid h2::after,
.kb-footer__grid h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 2.8rem;
    height: 2px;

    background: var(--kb-yellow);
}

.kb-footer__grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Links */
.kb-footer a {
    position: relative;

    color: rgb(255 255 255 / 82%);
    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.kb-footer__grid > div:not(:first-child) a {
    padding-block: 0.15rem;
}

.kb-footer__grid > div:not(:first-child) a:hover,
.kb-footer__grid > div:not(:first-child) a:focus-visible {
    color: var(--kb-yellow);
    transform: translateX(0.2rem);
}

.kb-footer a:focus-visible {
    outline: 2px solid var(--kb-yellow);
    outline-offset: 4px;
}

/* Logo */


.kb-footer .kb-brand img {
    filter: drop-shadow(0 0.5rem 1rem rgb(0 0 0 / 20%));
}



/* Beschreibung und Kontaktdaten */
.kb-footer p,
.kb-footer address {
    color: rgb(255 255 255 / 74%);
    line-height: 1.7;
}

.kb-footer address {
    margin: 0;
    font-style: normal;
}

/* Untere Footerzeile */


.kb-footer__bottom a {
    color: inherit;
}

.kb-footer__bottom a:hover,
.kb-footer__bottom a:focus-visible {
    color: var(--kb-yellow);
}

/* Responsive */
@media (max-width: 950px) {
    

    .kb-footer::before {
        width: 28rem;
        opacity: 0.06;
    }
}

@media (max-width: 600px) {
    

    

    

    .kb-footer::before {
        right: -7rem;
        bottom: -1rem;
        width: 25rem;
    }
}		

/* ===== Dynamische Sortimentsübersicht ===== */

.container.kb-sortiment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;

    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 0;
}

/* Link bildet die äußere Karte */
.kb-sortiment-card {
    display: flex;
    min-width: 0;

    color: var(--kb-ink);
    text-decoration: none;

    background: #fff;
    border: 1px solid var(--kb-line);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.kb-sortiment-card:hover,
.kb-sortiment-card:focus-visible {
    color: var(--kb-ink);
    border-color: var(--kb-red);
    box-shadow: 0 16px 38px rgb(42 14 13 / 12%);
    transform: translateY(-4px);
}

.kb-sortiment-card:focus-visible {
    outline: 3px solid var(--kb-yellow);
    outline-offset: 3px;
}

/* Artikel füllt die vollständige Kartenhöhe */
.kb-sortiment-card article {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
}

/* Produktbild */
.kb-sortiment-card__image {
    position: relative;
    flex: 0 0 auto;

    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    background: var(--kb-paper);
    border-bottom: 1px solid var(--kb-line);
}

.kb-sortiment-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    transition: transform 300ms ease;
}

.kb-sortiment-card:hover
    .kb-sortiment-card__image:not(.kb-sortiment-card__image--placeholder)
    img,
.kb-sortiment-card:focus-visible
    .kb-sortiment-card__image:not(.kb-sortiment-card__image--placeholder)
    img {
    transform: scale(1.04);
}

/* Ersatzbild oder Logo */
.kb-sortiment-card__image--placeholder {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 4vw, 3rem);

    background:
        radial-gradient(
            circle at center,
            rgb(255 255 255 / 10%),
            transparent 65%
        ),
        var(--kb-red);
}

.kb-sortiment-card__image--placeholder.kb-background-cream {
    background:
        radial-gradient(
            circle at center,
            rgb(255 255 255 / 35%),
            transparent 65%
        ),
        var(--cream);
}


.kb-sortiment-card__image--placeholder img {
    width: min(75%, 240px);
    height: auto;
    max-height: 75%;

    object-fit: contain;
    transform: none;
}

/* Textbereich */
.kb-sortiment-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.75rem, 3vw, 2.4rem);
}

.kb-sortiment-card h2 {
    margin: 0 0 0.9rem;

    color: var(--kb-ink);
    font: 600 clamp(1.65rem, 2.2vw, 2.1rem) / 1.15 KBLora, serif;
}

.kb-sortiment-card p {
    margin: 0;

    color: var(--kb-muted);
    line-height: 1.65;
}

/* Aufzählung */
.kb-sortiment-card ul {
    margin: 1.4rem 0 1.8rem;
    padding: 0;

    list-style: none;
}

.kb-sortiment-card li {
    position: relative;

    margin-top: 0.55rem;
    padding-left: 1.4rem;

    color: var(--kb-muted);
    line-height: 1.5;
}

.kb-sortiment-card li:first-child {
    margin-top: 0;
}

.kb-sortiment-card li::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;

    width: 1.05em;
    height: 1.05em;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Linktext immer unten */
.kb-sortiment-card__link {
    display: block;

    margin-top: auto;
    padding-top: 1rem;

    color: var(--kb-red);
    font-weight: 700;
}

.kb-sortiment-card:hover .kb-sortiment-card__link,
.kb-sortiment-card:focus-visible .kb-sortiment-card__link {
    color: var(--kb-red-dark);
}

/* ===== Responsive ===== */

@media (max-width: 980px) {
    .container.kb-sortiment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .container.kb-sortiment-grid {
        grid-template-columns: 1fr;
        gap: 1rem;

        width: min(100% - 2rem, 1180px);
    }

    .kb-sortiment-card__content {
        padding: 1.5rem;
    }
}

.kb-sortiment-card__ai-note {
    position: absolute;
    z-index: 2;
    right: 0.6rem;
    bottom: 0.5rem;

    display: block;
    padding: 0.3rem 0.5rem;

    color: rgb(255 255 255 / 90%);
    background: rgb(15 44 53 / 76%);
    border-radius: 0.2rem;

    font-size: 0.65rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;

    pointer-events: none;
}

.lb-page-hero {
  position: relative;
}

.lb-page-hero__ai-note {
  position: absolute;
  z-index: 2;
  right: 0.6rem;
  bottom: 0.5rem;

  display: block;
  padding: 0.3rem 0.5rem;

  color: rgb(255 255 255 / 90%);
  background: rgb(15 44 53 / 76%);
  border-radius: 0.2rem;

  font-size: 0.65rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;

  pointer-events: none;
}

/* Lesbarkeit über sehr hellen Bildbereichen */
.kb-sortiment-card__ai-note {
    box-shadow: 0 1px 5px rgb(0 0 0 / 18%);
}

@media (max-width: 640px) {
    .kb-sortiment-card__ai-note {
        right: 0.4rem;
        bottom: 0.4rem;
        font-size: 0.6rem;
    }
}


.kb-sortiment-card__image-overlay h2 {
    margin: 0;

    color: #fff;
    font: 600 clamp(1.65rem, 2.2vw, 2.1rem) / 1.15 KBLora, serif;
    text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}



.kb-footer__bio img {
    display: block;
    width: clamp(68px, 6vw, 82px);
    height: auto;
}


/* ==========================================================================
   Leib GmbH – Stylesheet
   Brand: #327082 (Logo-/Shop-Farbe), moderne, klare B2B-Optik
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; display: block; }

a { color: var(--lb-primary); text-decoration: none; }
a:hover { color: var(--lb-primary-dark); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: var(--lb-primary-darker);
}
h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; color: var(--lb-text-muted); }

.lb-kicker {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--lb-accent);
    margin-bottom: 0.6em;
}

/* --- Buttons -------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.6em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.98rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.lb-btn-primary { background: var(--lb-primary); color: #fff; }
.lb-btn-primary:hover { background: var(--lb-primary-dark); color: #fff; }
.lb-btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.lb-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.lb-btn-light { background: #fff; color: var(--lb-primary-dark); }
.lb-btn-light:hover { background: var(--lb-bg-alt); color: var(--lb-primary-dark); }

/* --- Topbar & Header -------------------------------------------------- */
.lb-topbar { background: var(--lb-primary-darker); color: #cfe3e8; font-size: 0.85rem; }
.lb-topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; height: 38px; }
.lb-topbar__phone { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.lb-topbar__phone:hover { color: var(--lb-accent); }
.lb-topbar__hours { display: none; }
.lb-topbar__cta {
    background: var(--lb-accent); color: var(--lb-primary-darker);
    padding: 4px 14px; border-radius: 999px; font-weight: 700;
}
.lb-topbar__cta:hover { color: var(--lb-primary-darker); filter: brightness(1.05); }

.lb-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    box-shadow: 0 2px 14px rgba(15,44,53,0.08);
}
.lb-header__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 1.5rem; }
.lb-brand img { height: 56px; width: auto; }

.lb-menu {
    display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.lb-menu span { width: 24px; height: 2px; background: var(--lb-primary-darker); border-radius: 2px; }

#lb-nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
#lb-nav a { font-weight: 600; color: var(--lb-text); font-size: 0.96rem; white-space: nowrap; }
#lb-nav a:hover, #lb-nav a.active { color: var(--lb-primary); }
#lb-nav a.lb-nav__cta {
    background: var(--lb-primary); color: #fff; padding: 0.6em 1.3em; border-radius: 999px;
}
#lb-nav a.lb-nav__cta:hover { background: var(--lb-primary-dark); color: #fff; }

/* --- Hero ------------------------------------------------------------- */
.lb-hero {
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.08), transparent 45%), linear-gradient(135deg, var(--lb-primary-darker), var(--lb-primary) 70%);
    color: #fff;
    padding: 5rem 0 6rem;
}
.lb-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.lb-hero h1 { color: #fff; }
.lb-hero .lb-kicker { color: #cfe9ee; }
.lb-hero p.lb-lead { color: #dbeef2; font-size: 1.1rem; max-width: 46ch; }
.lb-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.lb-hero__trust { display: flex; gap: 1.6rem; margin-top: 2.2rem; flex-wrap: wrap; }
.lb-hero__trust span { font-size: 0.85rem; font-weight: 700; color: #cfe9ee; display: flex; align-items: center; gap: 6px; }
.lb-hero__trust span::before { content: "✓"; color: var(--lb-accent); font-weight: 900; }
.lb-hero__art {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--lb-radius);
    padding: 2rem;
    backdrop-filter: blur(3px);
}
.lb-hero__art ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lb-hero__art li {
    display: flex; align-items: center; gap: 0.8rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px; padding: 0.8rem 1rem; font-weight: 600; color: #fff;
}
.lb-hero__art li .lb-ico {
    width: 34px; height: 34px; flex: none; border-radius: 8px;
    background: var(--lb-accent); color: var(--lb-primary-darker);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}

/* --- Sections ----------------------------------------------------------- */
.lb-section { padding: 4.5rem 0; }
.lb-section--alt { background: var(--lb-bg-alt); }

/* Die echten CMS-Seiten (seite.php / ry_cms_render_sections) erzeugen
   section/section--alt/section--navy-Klassen aus dem intelliVision1-
   Basisdesign. Hier auf das LEIB-Design gemappt, damit CMS-Inhalte visuell
   zum Rest der Seite passen. */
.section { padding: 4.5rem 0; }
.section--sm { padding: 2.75rem 0; }
.section--alt { background: var(--lb-bg-alt); }
.section--navy { background: var(--lb-primary-darker); color: #dbeef2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #cfe3e8; }
.section h2 { color: var(--lb-primary-darker); }
.section ul { padding-left: 1.2em; }
.section li { margin-bottom: 0.4em; color: var(--lb-text-muted); }
.lb-section__intro { max-width: 62ch; margin-bottom: 2.6rem; }

/* --- Service / Feature Cards -------------------------------------------- */
.lb-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
.lb-service-card {
    background: #fff;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    padding: 1.8rem 1.6rem;
    box-shadow: var(--lb-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex; flex-direction: column; height: 100%;
}
.lb-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -14px rgba(15,44,53,0.28); }
.lb-service-card__icon {
    width: 50px; height: 50px; border-radius: 12px;
    background: var(--lb-bg-alt); color: var(--lb-primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.lb-service-card h3 { margin-bottom: 0.4em; }
.lb-service-card p { flex: 1; }
.lb-service-card__link { font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 4px; }
.lb-service-card__link::after { content: "→"; transition: transform .15s ease; }
.lb-service-card__link:hover::after { transform: translateX(3px); }

.lb-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
.lb-feature-list__item {
    background: var(--lb-bg-alt);
    border-radius: 12px;
    padding: 1.3rem 1.4rem;
}
.lb-feature-list__item h3 { font-size: 1.05rem; margin-bottom: 0.35em; color: var(--lb-primary-darker); }
.lb-feature-list__item p { margin: 0; font-size: 0.95rem; }

/* --- Über-uns / Split ----------------------------------------------------- */
.lb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lb-checklist {
    list-style: none;
    display: grid;
    gap: 0.85rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.lb-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--lb-text);
    line-height: 1.65;
}

.lb-checklist li::before {
    content: "✓";
    display: grid;
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: rgba(15, 91, 102, 0.1);
    color: var(--lb-primary);
    font-size: 0.85rem;
    font-weight: 900;
}

.lb-checklist li strong {
    color: var(--lb-primary-darker);
}

.lb-checklist-simple {
    display: grid;
    gap: 0.25rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.lb-checklist-simple li {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    column-gap: 0.25rem;
    align-items: baseline;

    color: var(--lb-text);
    line-height: 1.5;
}

.lb-checklist-simple li::before {
    content: "✓";
    color: var(--lb-primary);
    font-size: 0.95em;
    font-weight: 800;
    line-height: inherit;
}

.lb-checklist-simple strong {
    color: var(--lb-primary-darker);
}

.lb-stat-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    background: var(--lb-primary-darker); border-radius: var(--lb-radius);
    padding: 2rem; color: #fff; text-align: center;
}
.lb-stat-strip strong { display: block; font-size: 1.8rem; color: var(--lb-accent); }
.lb-stat-strip span { font-size: 0.88rem; color: #cfe3e8; }

/* --- CTA strip ------------------------------------------------------------ */
.lb-cta {
    background: linear-gradient(120deg, var(--lb-primary), var(--lb-primary-dark));
    color: #fff; border-radius: var(--lb-radius); padding: 3rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.lb-cta h2 { color: #fff; margin-bottom: 0.3em; }
.lb-cta p { color: #dbeef2; margin: 0; }

/* --- Page hero (Unterseiten) ----------------------------------------------- */
.lb-page-hero {
    background: linear-gradient(135deg, var(--lb-primary-darker), var(--lb-primary));
    color: #fff; padding: 3.6rem 0 4.4rem;
}
.lb-page-hero .lb-kicker { color: #cfe9ee; }
.lb-page-hero h1 { color: #fff; max-width: 40ch; }
.lb-page-hero p { color: #dbeef2; max-width: 60ch; font-size: 1.05rem; }
.lb-crumb { font-size: 0.85rem; color: #cfe9ee; margin-bottom: 1rem; }
.lb-crumb a { color: #cfe9ee; }
.lb-crumb a:hover { color: #fff; }

/* --- Forms ----------------------------------------------------------------- */


.lb-form label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.35em; color: var(--lb-text); }
.lb-form input, .lb-form textarea {
    width: 100%; padding: 0.75em 0.9em; border-radius: 10px; border: 1.5px solid var(--lb-border);
    font-family: inherit; font-size: 0.98rem; background: #fff; color: var(--lb-text);
}
.lb-form input:focus, .lb-form textarea:focus { outline: none; border-color: var(--lb-primary); }
.lb-form textarea { min-height: 140px; resize: vertical; }




.lb-alert ul { margin: 0.4em 0 0 1.1em; padding: 0; font-weight: 500; }

/* --- Contact info cards ------------------------------------------------------ */
.lb-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; }
.lb-contact-card {
    background: var(--lb-bg-alt); border-radius: var(--lb-radius); padding: 1.8rem;
    display: grid; gap: 1rem;
}
.lb-contact-card a { font-weight: 700; color: var(--lb-primary-darker); }

/* --- Legal pages -------------------------------------------------------------- */
.lb-legal { }
.lb-legal h2 { margin-top: 1.6em; }

/* --- Footer -------------------------------------------------------------------- */
.lb-footer { background: var(--lb-primary-darker); color: #cfe3e8; padding: 3.5rem 0 1.6rem; }
.lb-footer a { color: #cfe3e8; }
.lb-footer a:hover { color: #fff; }
.lb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.lb-footer strong { color: #fff; display: block; margin-bottom: 0.8em; font-size: 0.95rem; }
.lb-footer__grid > div { display: flex; flex-direction: column; gap: 0.55em; font-size: 0.92rem; }
.lb-footer__brand img { height: 48px; margin-bottom: 0.8rem; filter: brightness(0) invert(1); opacity: 0.95; }
.lb-footer__brand p { font-size: 0.88rem; color: #9fc0c7; }
.lb-footer-social { display: flex; gap: 0.8rem; margin-top: 1rem; }
.lb-footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.lb-footer-social a:hover { background: rgba(255,255,255,0.22); }
.lb-footer-social img { height: 18px; width: 18px; margin: 0; filter: brightness(0) invert(1); }
.lb-footer__bottom {
    margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.12);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
    font-size: 0.82rem; color: #9fc0c7;
}

/* --- Responsive ---------------------------------------------------------------- */
@media (max-width: 960px) {
    .lb-hero__grid, .lb-split, .lb-contact-grid { grid-template-columns: 1fr; }
    .lb-services-grid { grid-template-columns: repeat(2, 1fr); }
    .lb-feature-list { grid-template-columns: 1fr; }
    .lb-footer__grid { grid-template-columns: 1fr 1fr; }
    .lb-topbar__hours { display: inline; }
}

@media (max-width: 720px) {
    .lb-menu { display: flex; }
    #lb-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: flex-start;
        padding: 1rem 20px 1.4rem; gap: 0.9rem;
        box-shadow: 0 12px 20px rgba(15,44,53,0.12);
        display: none;
    }
    #lb-nav.open { display: flex; }
    .lb-services-grid { grid-template-columns: 1fr; }
    .lb-stat-strip { grid-template-columns: 1fr; }
    
    .lb-footer__grid { grid-template-columns: 1fr; }
    .lb-topbar__inner { justify-content: center; gap: 0.9rem; }
    .lb-topbar__hours { display: none; }
    .lb-cta { flex-direction: column; text-align: center; }
}


.lb-page-hero {
    position: relative;
    padding: 4rem 0;
    background-color: #f4f6f9;
    overflow: hidden;
}

.lb-page-hero--image {
    min-height: 420px;
    display: flex;
    align-items: center;
    color: #fff;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 20, 48, 0.92) 0%,
            rgba(4, 20, 48, 0.76) 34%,
            rgba(4, 20, 48, 0.20) 68%,
            rgba(4, 20, 48, 0.06) 100%
        ),
        var(--lb-page-hero-image);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lb-page-hero__content {
    position: relative;
    z-index: 1;
}

.lb-page-hero--image h1 {
    max-width: 720px;
    color: #fff;
}

.lb-page-hero--image .lb-kicker {
    color: #fff;
}

.lb-page-hero--image .lb-crumb,
.lb-page-hero--image .lb-crumb a {
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 767.98px) {
    .lb-page-hero {
        padding: 3rem 0;
    }

    .lb-page-hero--image {
        min-height: 360px;
        background-position: 65% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(4, 20, 48, 0.94) 0%,
                rgba(4, 20, 48, 0.78) 65%,
                rgba(4, 20, 48, 0.40) 100%
            ),
            var(--lb-page-hero-image);
    }
}

/* FAQ --------------------------------------------------------------------- */

.lb-faq {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(15, 91, 102, 0.08),
            transparent 32rem
        ),
        var(--lb-bg-alt);
}

.lb-faq__header {
    width: 100%;
    max-width: none;
    margin-bottom: 2.5rem;
}

.lb-faq__header h2 {
    margin-bottom: 0.65rem;
}

.lb-faq__header > p:last-child {
    max-width: 58ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

.lb-faq__list {
    display: grid;
    width: 100%;
    gap: 0.85rem;
}

.lb-faq__item {
    background: #fff;
    border: 1px solid rgba(13, 47, 55, 0.11);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(13, 47, 55, 0.05);
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lb-faq__item:hover {
    border-color: rgba(15, 91, 102, 0.28);
    box-shadow: 0 9px 28px rgba(13, 47, 55, 0.09);
}

.lb-faq__item[open] {
    border-color: rgba(15, 91, 102, 0.36);
    box-shadow: 0 12px 32px rgba(13, 47, 55, 0.10);
}

.lb-faq__question {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 1.5rem;
    color: var(--lb-primary-darker);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.lb-faq__question::-webkit-details-marker {
    display: none;
}

.lb-faq__question::marker {
    display: none;
    content: "";
}

.lb-faq__question:hover {
    color: var(--lb-primary);
    background: rgba(15, 91, 102, 0.025);
}

.lb-faq__question:focus-visible {
    outline: 3px solid rgba(15, 91, 102, 0.25);
    outline-offset: -3px;
}

.lb-faq__icon {
    position: relative;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(15, 91, 102, 0.09);
    transition:
        background-color 0.2s ease,
        transform 0.25s ease;
}

.lb-faq__icon::before,
.lb-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 2px;
    border-radius: 2px;
    background: var(--lb-primary);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.lb-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.lb-faq__item[open] .lb-faq__icon {
    background: var(--lb-primary);
    transform: rotate(180deg);
}

.lb-faq__item[open] .lb-faq__icon::before,
.lb-faq__item[open] .lb-faq__icon::after {
    background: #fff;
}

.lb-faq__item[open] .lb-faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.lb-faq__answer {
    padding: 0 4.9rem 1.5rem 1.5rem;
    color: var(--lb-text-muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.lb-faq__answer p {
    max-width: 76ch;
    margin: 0;
}

.lb-faq__answer p + p,
.lb-faq__answer ul,
.lb-faq__answer ol {
    margin-top: 0.85rem;
}

.lb-faq__answer a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
    .lb-faq__header {
        margin-bottom: 1.75rem;
    }

    .lb-faq__question {
        gap: 1rem;
        padding: 1.15rem;
        font-size: 1rem;
    }

    .lb-faq__answer {
        padding: 0 1.15rem 1.25rem;
    }

    .lb-faq__icon {
        flex-basis: 1.8rem;
        width: 1.8rem;
        height: 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-faq__item,
    .lb-faq__icon,
    .lb-faq__icon::before,
    .lb-faq__icon::after {
        transition: none;
    }
}

/* --- Leistungen / Service Cards ----------------------------------------- */
.lb-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

/* Gesamte Karte */
.lb-service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid rgba(13, 47, 55, 0.1);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(13, 47, 55, 0.07);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.lb-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 91, 102, 0.28);
    box-shadow: 0 16px 40px rgba(13, 47, 55, 0.13);
}

/* Bild über die vollständige Kartenbreite */

.lb-service-card__media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: var(--lb-bg-alt);
}

.lb-service-card__media::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30%;
    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(4, 20, 48, 0.16),
        transparent
    );
}

.lb-service-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.45s ease;
}

.lb-service-card:hover .lb-service-card__media img {
    transform: scale(1.045);
}

/* Inhalt unter dem Bild */
.lb-service-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 1.5rem;
}

/* Überschrift */
.lb-service-card__content h3 {
    margin: 0 0 0.65rem;
    color: var(--lb-primary-darker);
    font-size: 1.2rem;
    line-height: 1.3;
}

.lb-service-card__content h3 a {
    color: inherit;
    text-decoration: none;

    transition: color 0.2s ease;
}

.lb-service-card__content h3 a:hover {
    color: var(--lb-primary);
}

.lb-service-card__content h3 a:focus-visible {
    outline: 3px solid rgba(15, 91, 102, 0.25);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Beschreibung */
.lb-service-card__content p {
    margin: 0 0 1.25rem;
    color: var(--lb-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Link am unteren Rand */
.lb-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;

    color: var(--lb-primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.lb-service-card__link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.lb-service-card__link:hover::after {
    transform: translateX(4px);
}

.lb-service-card__link:focus-visible {
    outline: 3px solid rgba(15, 91, 102, 0.25);
    outline-offset: 4px;
    border-radius: 3px;
}

/* Icon-Fallback, falls kein featured_image vorhanden ist */
.lb-service-card > .lb-service-card__icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    place-items: center;

    margin: 1.5rem 1.5rem 0;
    border-radius: 12px;

    background: rgba(15, 91, 102, 0.1);
    color: var(--lb-primary);
}

.lb-service-card__icon svg {
    display: block;
}

/* Tablet */
@media (max-width: 960px) {
    .lb-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone */
@media (max-width: 640px) {
    .lb-services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .lb-service-card__content {
        padding: 1.25rem;
    }
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce) {
    .lb-service-card,
    .lb-service-card__media img,
    .lb-service-card__content h3 a,
    .lb-service-card__link::after {
        transition: none;
    }

    .lb-service-card:hover {
        transform: none;
    }

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

/* ===================================================================
   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(6, 20, 42, 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(6, 20, 42, 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; }
}