/* ==========================================================================
   CentricCom AG — Design System
   Dark tech theme, restrained accent, restrained palette, quiet motion.
   ========================================================================== */

:root {
  /* Neutrals — near-black, not pure black */
  --bg-0: #05070a;
  --bg-1: #0a0f16;
  --bg-2: #0e151f;
  --bg-3: #131b27;
  --bg-elevated: #161f2c;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Brand — derived from the CentricCom mark */
  --navy-900: #05192f;
  --navy-800: #0a2545;
  --navy-700: #0f3363;
  --navy-600: #16447f;
  --brass: #9aa4b2; /* the grey dot from the logo, used sparingly */

  /* Accent — a single restrained signal color, cool electric blue */
  --accent: #4f8dff;
  --accent-soft: #4f8dff26;
  --accent-strong: #79aaff;

  /* Text */
  --text-0: #f3f6fa;
  --text-1: #c7d0dc;
  --text-2: #8b97a7;
  --text-3: #7e8b9c; /* raised from #5d6878 — that value was ~3.4:1 on --bg-1, below WCAG AA 4.5:1 */

  /* Type */
  --font-head: "Lexend", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------- */
/* Reset */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-0); margin: 0; font-weight: 500; letter-spacing: -0.005em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------- */
/* Accessibility: focus visibility + skip link */
/* ---------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--bg-elevated);
  color: var(--text-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------- */
/* Background texture — quiet grid + glow, present on every page */
/* ---------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
}

.noise { display: none; }

/* ---------------------------------------------------------------------- */
/* Layout helpers */
/* ---------------------------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
section { position: relative; z-index: 2; }
.section { padding: 120px 0; }
.section-tight { padding: 80px 0; }
@media (max-width: 860px) {
  .section { padding: 76px 0; }
  .section-tight { padding: 56px 0; }
  .wrap { padding: 0 20px; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2);
  border-left: 2px solid var(--accent);
  padding-left: 11px;
  margin-bottom: 18px;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-1); max-width: 640px; }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease, background .3s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #04101f;
  box-shadow: 0 6px 16px -8px rgba(79,141,255,0.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(79,141,255,0.55); }
.btn-ghost {
  background: rgba(255,255,255,0.02);
  color: var(--text-0);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(79,141,255,0.06); transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }
.btn-arrow { transition: transform .4s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Header / Nav */
/* ---------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .4s ease, border-color .4s ease, padding .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 12px 0;
  background: rgba(5, 7, 10, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
}
/* Im hellen Theme muss die Leiste hell sein — sonst steht die dunkle
   Navigationsschrift auf dunklem Grund und ist kaum zu lesen. */
[data-theme="light"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(10, 22, 40, 0.12);
  box-shadow: 0 6px 24px -12px rgba(20, 35, 60, 0.22);
}
/* Beim Scrollen etwas mehr Kontrast, weil die Leiste dann ueber Inhalten liegt */
.site-header.is-scrolled .nav-links a { color: var(--text-0); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 28px; width: auto; filter: brightness(0) invert(1); transition: filter .3s var(--ease); }
[data-theme="light"] .brand img { filter: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  padding: 9px 12px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 500;
  color: #dbe3ee;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .3s ease, background .3s ease;
}
.nav-links a:hover { color: var(--text-0); background: rgba(255,255,255,0.05); }
[data-theme="light"] .nav-links a { color: var(--text-1); }
[data-theme="light"] .nav-links a:hover { background: rgba(10,22,40,0.05); }
.nav-links a.is-active { color: var(--accent-strong); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.02);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span { width: 18px; height: 1.5px; background: var(--text-0); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav { display: none; }

@media (max-width: 1140px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  /* The primary CTA already lives in the mobile-nav drawer below; showing it a
     second time in the collapsed header crowds out the logo/hamburger on narrow phones. */
  .nav-cta .btn-primary { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav {
    position: fixed; inset: 0; z-index: 99;
    background: var(--bg-0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
    padding: 100px 28px 40px;
    /* Das Menue ist laenger als ein Telefonbildschirm, seit die Leistungen
       darin aufgefuehrt sind. Ohne diese Zeilen ist alles unterhalb des
       Rands unerreichbar -- body-overflow ist waehrenddessen gesperrt. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 6px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: all; }
  .mobile-nav a {
    font-family: var(--font-head);
    font-size: 1.5rem;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-0);
  }
  .mobile-nav .btn { margin-top: 24px; width: 100%; justify-content: center; }
  /* Kompaktere Zeilen, damit die Liste weniger Scrollen erfordert. */
  .mobile-nav a.mobile-sub { padding-top: 7px; padding-bottom: 7px; }
}

/* ---------------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.hero-glow {
  position: absolute;
  z-index: 0;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 1100px;
  background: radial-gradient(circle, rgba(79,141,255,0.09) 0%, rgba(79,141,255,0.03) 40%, transparent 70%);
  filter: blur(10px);
}
.hero-content { position: relative; z-index: 2; max-width: 780px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.hero-meta div span { display: block; }
.hero-stat { font-family: var(--font-head); font-size: 1.7rem; color: var(--text-0); font-weight: 600; }
.hero-stat-label { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.hero-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Cards with cursor-follow glow */
/* ---------------------------------------------------------------------- */
.glow-card {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 32px;
  transition: border-color .3s ease, transform .3s var(--ease);
}
.glow-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 22px;
}
.card-icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------- */
/* Grids */
/* ---------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Progressive enhancement: without JS (or before it runs), content must stay visible. */
.no-js .reveal { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ---------------------------------------------------------------------- */
/* Badges / pills / tags */
/* ---------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-1);
  background: rgba(255,255,255,0.02);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------------------------------------------------------------------- */
/* Panel — elevated content block */
/* ---------------------------------------------------------------------- */
.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1) 60%);
  padding: 56px;
}
@media (max-width: 720px) { .panel { padding: 32px 24px; } }

/* ---------------------------------------------------------------------- */
/* Divider strip */
/* ---------------------------------------------------------------------- */
.strip {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-1);
}

/* ---------------------------------------------------------------------- */
/* Image frame — used for office / datacenter photography */
/* ---------------------------------------------------------------------- */
.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.045); }
.frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,10,0) 40%, rgba(5,7,10,0.55) 100%);
  pointer-events: none;
}
/* Außenaufnahmen ohne den dunklen Verlauf — der ist für Innenräume
   gedacht, bei hellen Fotos frisst er den Himmel weg. */
.frame.is-photo::after { display: none; }
.frame.is-photo .frame-caption {
  left: 16px; bottom: 16px; right: auto;
  width: auto; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(5, 7, 10, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 7px 15px;
  color: #fff;
}

.frame-caption {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  font-family: var(--font-head); font-size: 13.5px; color: var(--text-0);
  display: flex; align-items: center; gap: 8px;
}
.frame-caption .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------------------------------------------------------------------- */
/* Process steps */
/* ---------------------------------------------------------------------- */
.steps { counter-reset: step; }
.step {
  position: relative;
  padding-left: 62px;
  padding-bottom: 44px;
  border-left: 1px solid var(--border-subtle);
  margin-left: 20px;
}
.step:last-child { border-color: transparent; padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -21px; top: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 13px; color: var(--accent-strong);
}

/* ---------------------------------------------------------------------- */
/* Logic wall / stat strip */
/* ---------------------------------------------------------------------- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 0; }
.stat-strip .stat { flex: 1 1 200px; padding: 36px 28px; border-left: 1px solid var(--border-subtle); }
.stat-strip .stat:first-child { border-left: none; }
.stat-num { font-family: var(--font-head); font-size: clamp(2.1rem, 4vw, 3rem); color: var(--text-0); }
.stat-label { color: var(--text-2); font-size: 14px; margin-top: 6px; }
@media (max-width: 720px) {
  .stat-strip { flex-direction: column; }
  .stat-strip .stat { border-left: none; border-top: 1px solid var(--border-subtle); }
  .stat-strip .stat:first-child { border-top: none; }
}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-subtle); padding: 76px 0 32px; background: var(--bg-1); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 32px; padding-bottom: 56px; }
.footer-brand img { height: 26px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
[data-theme="light"] .footer-brand img { filter: none; }
.footer-brand p { color: var(--text-2); font-size: 14.5px; max-width: 280px; }
.footer-col h4 { font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--text-1); font-size: 14.5px; padding: 6px 0; transition: color .25s ease; }
.footer-col a:hover { color: var(--accent-strong); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--text-3);
}
.footer-bottom a { color: var(--text-3); }
.footer-bottom a:hover { color: var(--accent-strong); }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s ease, color .3s ease, transform .3s ease;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); }
.social-row svg { width: 16px; height: 16px; }

@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Page header (interior pages) */
/* ---------------------------------------------------------------------- */
.page-hero {
  padding: 168px 0 80px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.page-hero .hero-glow { top: -40%; width: 900px; height: 900px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--text-3); font-size: 13.5px; margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--accent-strong); }

/* ---------------------------------------------------------------------- */
/* Table-ish list (leistungen) */
/* ---------------------------------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
  transition: background .3s ease;
}
.feature-row:hover { background: rgba(255,255,255,0.015); }
.feature-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.feature-num { font-family: var(--font-head); color: var(--text-3); font-size: 14px; }
.feature-title { font-family: var(--font-head); color: var(--text-0); font-size: 1.15rem; margin-bottom: 6px; }
.feature-desc { color: var(--text-2); font-size: 14.5px; max-width: 560px; }
@media (max-width: 720px) {
  .feature-row { grid-template-columns: 1fr; gap: 10px; }
  .feature-row .btn-sm { justify-self: start; }
}

/* ---------------------------------------------------------------------- */
/* BCS spotlight */
/* ---------------------------------------------------------------------- */
.bcs-hero {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(600px circle at 15% 20%, var(--accent-soft), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg-0) 70%);
  padding: 64px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) { .bcs-hero { padding: 34px 24px; } }
.datacenter-card {
  position: relative;
  padding: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  cursor: pointer;
}
.datacenter-card .pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.datacenter-card .pulse::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------------------------------------------------------------------- */
/* Forms (contact) */
/* ---------------------------------------------------------------------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; font-family: var(--font-head); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 120px; }

/* ---------------------------------------------------------------------- */
/* Team cards */
/* ---------------------------------------------------------------------- */
.team-card { text-align: left; display: flex; flex-direction: column; }
.team-card .feature-desc { margin-bottom: 18px; }
.team-card .btn { margin-top: auto !important; align-self: flex-start; }
.team-avatar {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--text-0);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.team-avatar::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(79,141,255,0.35), transparent 60%);
}
.team-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  display: block;
}
.team-avatar:has(img)::after {
  background: linear-gradient(180deg, transparent 45%, rgba(6,14,30,0.35));
}

/* ---------------------------------------------------------------------- */
/* Job listing */
/* ---------------------------------------------------------------------- */
.job-row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--border-subtle);
}
.job-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.job-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 620px) { .job-row { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------------- */
/* Utility */
/* ---------------------------------------------------------------------- */
.text-muted { color: var(--text-2); }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-3 { gap: 12px; }
.center { text-align: center; }

/* ---------------------------------------------------------------------- */
/* Decorative logo watermark — disabled; the BCS/services panels rely on   */
/* their own gradient backgrounds for depth instead.                       */
/* ---------------------------------------------------------------------- */
.logo-mark { display: none; }

/* frame-animated: photography just gets the same intentional hover-zoom  */
/* as every other .frame (see .frame:hover img above) — no auto-motion.   */

/* ---------------------------------------------------------------------- */
/* Regulatory citation cards (DORA / KWG / MaRisk / BAIT) */
/* ---------------------------------------------------------------------- */
.reg-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  padding: 26px;
  transition: border-color .3s ease, transform .4s var(--ease);
}
.reg-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.reg-card .reg-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.reg-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.reg-card p { font-size: 13.8px; color: var(--text-2); line-height: 1.65; }
.reg-card a.source-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 12.5px; color: var(--text-3);
  border-top: 1px solid var(--border-subtle); padding-top: 12px; width: 100%;
}
.reg-card a.source-link:hover { color: var(--accent-strong); }
.reg-disclaimer {
  font-size: 12.5px; color: var(--text-3); margin-top: 24px; max-width: 760px; line-height: 1.7;
}

/* ---------------------------------------------------------------------- */
/* Service detail block — one per Leistung, alternating image side */
/* ---------------------------------------------------------------------- */
.service-detail {
  padding: 72px 0;
  border-top: 1px solid var(--border-subtle);
}
.service-detail:first-of-type { border-top: none; }
.service-detail .grid-2 { align-items: center; gap: 56px; }
.service-detail .service-index {
  font-family: var(--font-head); color: var(--text-3); font-size: 13px;
  letter-spacing: .1em; margin-bottom: 14px; display:block;
}
.service-benefits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.service-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-visual .card-icon { width: 74px; height: 74px; margin-bottom: 0; }
.service-visual .card-icon svg { width: 34px; height: 34px; }
@media (max-width: 860px) {
  .service-detail { padding: 52px 0; }
}

/* ---------------------------------------------------------------------- */
/* Logo-Lockups in den Leistungsblöcken                                    */
/* Zeigen, mit welchem Hersteller die jeweilige Leistung umgesetzt wird.   */
/* Die Herstellerlogos liegen auf weissem Grund, deshalb weisse Kacheln.   */
/* ---------------------------------------------------------------------- */
.logo-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 28px;
}
.logo-lockup .lockup-tile {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  width: 168px; height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.logo-lockup .lockup-tile img,
.logo-lockup .lockup-tile svg {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
/* Das CentricCom-Logo liegt als dunkle Variante vor und passt so auf Weiss. */
.logo-lockup .lockup-tile img.brand-logo { filter: none; max-height: 34px; }
.logo-lockup .lockup-plus {
  font-size: 22px; line-height: 1;
  color: var(--text-2);
  flex-shrink: 0;
}

/* Kleinere Logoreihe unterhalb von Fliesstext */
.logo-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 30px;
}
.logo-row .lockup-tile {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
  padding: 10px 14px;
  width: 124px; height: 62px;
  display: flex; align-items: center; justify-content: center;
}
.logo-row .lockup-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-row-label {
  width: 100%;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: -4px;
}
@media (max-width: 520px) {
  .logo-lockup { gap: 12px; padding: 20px; }
  .logo-lockup .lockup-tile { width: 132px; height: 76px; }
}

/* ---------------------------------------------------------------------- */
/* Cookie consent banner */
/* ---------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 200;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  transform: translateY(140%);
  transition: transform .5s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: 13.8px; color: var(--text-1); line-height: 1.6; }
.cookie-banner a { color: var(--accent-strong); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }

/* Erste Ebene: kurz gehalten. Details erscheinen erst auf Klick. */
.cookie-banner.is-expanded { max-width: 720px; }
.cookie-title {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 600;
  color: var(--text-0);
  margin: 0 0 10px;
}
.cookie-toggle {
  background: none; border: 0; padding: 8px 4px;
  font-family: var(--font-head); font-size: 13.5px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-toggle:hover { color: var(--text-0); }
.cookie-chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s var(--ease);
}
.cookie-toggle[aria-expanded="true"] .cookie-chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* Zweite Ebene: Kategorien mit Details */
.cookie-details {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  max-height: min(46vh, 420px);
  overflow-y: auto;
}
.cookie-cat + .cookie-cat { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.cookie-option {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-1);
  cursor: pointer;
}
.cookie-option.is-locked { cursor: default; }
.cookie-option input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }
.cookie-option span { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cookie-option strong { color: var(--text-0); font-weight: 600; }
.cookie-option em {
  font-style: normal; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 2px 9px;
}
.cookie-cat-desc { font-size: 13px !important; margin: 10px 0 0 26px; color: var(--text-2) !important; }
.cookie-table {
  margin: 12px 0 0 26px;
  border-collapse: collapse; width: calc(100% - 26px);
  font-size: 12.5px; color: var(--text-2);
}
.cookie-table th, .cookie-table td {
  text-align: left; vertical-align: top;
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 400;
}
.cookie-table th { width: 34%; color: var(--text-1); }
/* Der Speichern-Button liegt ausserhalb des scrollenden Detailbereichs,
   damit er immer sichtbar bleibt. */
.cookie-save { display: none; margin-top: 16px; }
.cookie-banner.is-expanded .cookie-save { display: flex; }

.cookie-legal { font-size: 12px !important; color: var(--text-2) !important; margin-top: 16px; }

@media (max-width: 520px) {
  .cookie-details { max-height: 44vh; }
  .cookie-table th { width: 42%; }
  .cookie-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------- */
/* Landingpage: Auswahl der Unternehmensgröße (Funnel-Einstieg)            */
/* ---------------------------------------------------------------------- */
.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.size-card {
  display: flex; flex-direction: column;
  text-align: left;
  padding: 26px 24px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-1);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.size-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.size-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -24px var(--accent);
}
.size-number {
  font-family: var(--font-head);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--text-0);
}
.size-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; }
.size-title { font-family: var(--font-head); font-size: 1.02rem; color: var(--text-0); margin-top: 18px; }
.size-desc { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin-top: 10px; }
.size-list { list-style: none; padding: 0; margin: 16px 0 0; }
.size-list li {
  font-size: 13px; line-height: 1.5; color: var(--text-1);
  padding-left: 20px; position: relative; margin-bottom: 7px;
}
.size-list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.size-cta {
  margin-top: auto; padding-top: 20px;
  font-family: var(--font-head); font-size: 13.5px; font-weight: 600;
  color: var(--accent-strong);
  display: inline-flex; align-items: center; gap: 7px;
}
@media (max-width: 1040px) { .size-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .size-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Terminbuchung (Microsoft Bookings, Zwei-Klick-Loesung)                  */
/* ---------------------------------------------------------------------- */
.booking {
  margin-top: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-1);
  overflow: hidden;
}
.booking-teaser {
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: center;
  padding: 34px 36px;
}
.booking-badge {
  display: inline-block; margin-bottom: 12px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 999px; padding: 4px 12px;
}
.booking-info h3 { font-family: var(--font-head); font-size: 1.35rem; font-weight: 500; color: var(--text-0); margin: 0; }
.booking-facts { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 22px; flex-wrap: wrap; }
.booking-facts li {
  position: relative; padding-left: 20px;
  font-size: 14px; color: var(--text-1);
}
.booking-facts li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.booking-note { font-size: 12px; line-height: 1.55; color: var(--text-2); margin: 18px 0 0; max-width: 520px; }
.booking-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.booking.is-loaded .booking-teaser { display: none; }
.booking iframe {
  width: 100%; height: 780px; border: 0; display: block;
  background: #fff;
}

@media (max-width: 860px) {
  .booking-teaser { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .booking-facts { gap: 6px 18px; }
  .booking iframe { height: 900px; }
}

/* Kompakter Hinweis am Fuß einer Seite */
.page-disclaimer {
  max-width: 860px; margin: 34px 0 0;
  padding-top: 20px; border-top: 1px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}

/* Standortfoto */
.standort-foto { margin: 0 0 28px; }
.standort-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--border-subtle);
}
.standort-foto figcaption {
  margin-top: 12px; font-size: 13px; color: var(--text-2);
}

/* Kompakte Größen-Kacheln auf der Startseite */
.size-teasers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.size-teaser {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.size-teaser:hover { border-color: var(--accent); transform: translateY(-2px); }
.size-teaser-num { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--text-0); }
.size-teaser-label { font-size: 13px; color: var(--text-2); line-height: 1.45; }
@media (max-width: 860px) { .size-teasers { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------- */
/* IT-Check (gefuehrter Fragebogen)                                        */
/* ---------------------------------------------------------------------- */
.quiz {
  max-width: 820px; margin: 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-1);
  overflow: hidden;
}
.quiz-progress { height: 3px; background: var(--bg-3); }
.quiz-progress span {
  display: block; height: 100%;
  background: var(--accent);
  transition: width .45s var(--ease, ease);
}
.quiz-body, .quiz-result, .quiz-noscript { padding: 44px 44px 40px; }

.quiz-count {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 14px;
}
.quiz-question {
  font-family: var(--font-head); font-size: 1.55rem; font-weight: 500;
  color: var(--text-0); margin: 0; line-height: 1.25;
  outline: none;
}
.quiz-hint { font-size: 14px; color: var(--text-2); margin: 12px 0 0; }

.quiz-options { display: grid; gap: 10px; margin-top: 28px; }
.quiz-option {
  text-align: left; width: 100%;
  padding: 17px 20px;
  font: inherit; font-size: 15px;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.quiz-option:hover { border-color: var(--accent); transform: translateX(3px); }
.quiz-option.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text-0); }
.quiz-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.quiz-back {
  margin-top: 24px; padding: 8px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--text-2);
}
.quiz-back:hover { color: var(--text-0); }

/* Auswertung */
.quiz-summary {
  margin-top: 20px; padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 15px; line-height: 1.7; color: var(--text-1);
}
.quiz-recos { margin-top: 32px; display: grid; gap: 18px; }
.quiz-reco { display: flex; gap: 18px; align-items: flex-start; }
.quiz-reco-num {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
}
.quiz-reco h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text-0); margin: 4px 0 0; }
.quiz-reco p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 8px 0 0; }

.quiz-answers {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.quiz-answers h4 { font-family: var(--font-head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 14px; font-weight: 500; }
.quiz-answers dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; margin: 0; font-size: 13.5px; }
.quiz-answers dt { color: var(--text-2); }
.quiz-answers dd { margin: 0; color: var(--text-1); }

.quiz-cta {
  margin-top: 34px; padding-top: 30px;
  border-top: 1px solid var(--border-subtle);
}
.quiz-cta h4 { font-family: var(--font-head); font-size: 1.15rem; color: var(--text-0); margin: 0; }

@media (max-width: 620px) {
  .quiz-body, .quiz-result, .quiz-noscript { padding: 30px 22px 28px; }
  .quiz-question { font-size: 1.28rem; }
  .quiz-option { padding: 15px 16px; font-size: 14.5px; }
  .quiz-answers dl { grid-template-columns: 1fr; gap: 2px; }
  .quiz-answers dd { margin-bottom: 10px; }
}

/* Auswertung des IT-Checks */
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.result-block { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border-subtle); }
.result-block-title {
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 600;
  color: var(--text-0); margin: 0;
}
.result-block-hint { font-size: 13.5px; color: var(--text-2); margin: 8px 0 0; }

/* Risikoübersicht */
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.risk-item {
  padding: 18px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.risk-head { display: flex; align-items: center; gap: 10px; }
.risk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.risk-dim { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text-0); flex: 1; }
.risk-level { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.risk-desc { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 10px 0 0; }
/* Risiko: hoch = rot, mittel = gelb, gering = gruen */
.risk-item.is-high   { border-color: rgba(255,107,107,0.4); }
.risk-item.is-high   .risk-dot { background: #ff6b6b; box-shadow: 0 0 8px rgba(255,107,107,.5); }
.risk-item.is-high   .risk-level { color: #ff8f8f; }
.risk-item.is-medium { border-color: rgba(240,180,60,0.4); }
.risk-item.is-medium .risk-dot { background: #f0b43c; box-shadow: 0 0 8px rgba(240,180,60,.5); }
.risk-item.is-medium .risk-level { color: #e8b055; }
.risk-item.is-low    { border-color: rgba(46,190,125,0.35); }
.risk-item.is-low    .risk-dot { background: #2ebe7d; box-shadow: 0 0 8px rgba(46,190,125,.5); }
.risk-item.is-low    .risk-level { color: #52c894; }
[data-theme="light"] .risk-item.is-high   .risk-level { color: #b52b2b; }
[data-theme="light"] .risk-item.is-medium .risk-level { color: #9a6b00; }
[data-theme="light"] .risk-item.is-low    .risk-level { color: #157a4e; }

/* Empfehlungen */
.quiz-reco-body { flex: 1; }
.quiz-reco-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.quiz-tag {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 3px 10px;
}
.quiz-reco-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  margin: 14px 0 0; font-size: 13px;
  padding-top: 12px; border-top: 1px dashed var(--border-subtle);
}
.quiz-reco-meta dt { color: var(--text-2); }
.quiz-reco-meta dd { margin: 0; color: var(--text-1); }

/* Fahrplan */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.tl-phase {
  padding: 20px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-2);
}
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tl-label { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text-0); }
.tl-sub { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); }
.tl-phase ul { list-style: none; margin: 0; padding: 0; }
.tl-phase li { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.tl-phase li:first-child { border-top: 0; padding-top: 0; }
.tl-phase strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-1); line-height: 1.45; }
.tl-phase span { display: block; font-size: 12px; color: var(--text-2); margin-top: 5px; }

/* Kurzliste der Handlungsfelder in der Vor-Analyse */
.reco-short { list-style: none; counter-reset: rs; margin: 22px 0 0; padding: 0; }
.reco-short li {
  counter-increment: rs;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--border-subtle);
}
.reco-short li:last-child { border-bottom: 1px solid var(--border-subtle); }
.reco-short li::before {
  content: counter(rs);
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
}
.reco-short-title { font-family: var(--font-head); font-size: 15px; color: var(--text-0); flex: 1; }

/* Anforderung des Berichts */
.report-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: start;
}
.report-form {
  padding: 26px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-2);
}
.report-form .field { margin-bottom: 0; }
.report-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 4px; font-size: 13px; line-height: 1.5; color: var(--text-1);
  cursor: pointer;
}
.report-consent input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.field-opt { font-size: 11.5px; color: var(--text-2); font-weight: 400; }
@media (max-width: 860px) { .report-block { grid-template-columns: 1fr; gap: 24px; } }

/* Gesamtwert des IT-Reifegrads */
.score-box {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 24px; padding: 24px 26px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-2);
}
.score-value { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 92px; }
.score-value span { font-family: var(--font-head); font-size: 2.7rem; font-weight: 600; line-height: 1; color: var(--text-0); }
.score-value small { font-size: 11.5px; color: var(--text-2); margin-top: 5px; }
.score-body { flex: 1; min-width: 220px; }
.score-label { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--text-0); }
.score-track { height: 6px; border-radius: 99px; background: var(--bg-3); margin: 12px 0 12px; overflow: hidden; }
.score-track span { display: block; height: 100%; border-radius: 99px; transition: width .8s var(--ease, ease); }
.score-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0; }
.score-box.is-good .score-track span { background: #2ebe7d; }
.score-box.is-mid  .score-track span { background: #f0b43c; }
.score-box.is-low  .score-track span { background: #ff6b6b; }
.score-box.is-good { border-color: rgba(46,190,125,0.35); }
.score-box.is-mid  { border-color: rgba(240,180,60,0.35); }
.score-box.is-low  { border-color: rgba(255,107,107,0.35); }

/* Einordnung der Maßnahmen */
.reco-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.badge {
  font-size: 11.5px; letter-spacing: .02em;
  border-radius: 999px; padding: 4px 11px;
  border: 1px solid var(--border-subtle); color: var(--text-2);
  white-space: nowrap;
}
.badge-impact.is-hoch   { border-color: rgba(46,190,125,0.45); color: #52c894; }
.badge-impact.is-mittel { border-color: rgba(240,180,60,0.45); color: #e8b055; }
.badge-effort.is-gering { border-color: rgba(46,190,125,0.45); color: #52c894; }
.badge-effort.is-mittel { border-color: rgba(240,180,60,0.45); color: #e8b055; }
.badge-effort.is-hoch   { border-color: rgba(255,107,107,0.45); color: #ff8f8f; }
[data-theme="light"] .badge-impact.is-hoch,
[data-theme="light"] .badge-effort.is-gering { color: #157a4e; }
[data-theme="light"] .badge-impact.is-mittel,
[data-theme="light"] .badge-effort.is-mittel { color: #9a6b00; }
[data-theme="light"] .badge-effort.is-hoch   { color: #b52b2b; }

@media (max-width: 760px) {
  .risk-grid { grid-template-columns: 1fr; }
  .quiz-reco-meta { grid-template-columns: 1fr; gap: 2px; }
  .quiz-reco-meta dd { margin-bottom: 9px; }
}

/* Druckansicht: nur die Auswertung, ohne Navigation und Formular */
@media print {
  .site-header, .site-footer, .cookie-banner, .noise, .hero-glow,
  .quiz-cta, .quiz-back, [data-quiz-print], .page-hero, .strip, .faq-list,
  .section-tight.strip { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .quiz { border: 0; }
  .quiz-body, .quiz-result { padding: 0; }
  .risk-item, .tl-phase, .score-box, .quiz-summary { background: #fff !important; border-color: #ccc !important; }
  .quiz-question, .result-block-title, .quiz-reco h4,   .quiz-reco { break-inside: avoid; }
  .result-block { break-inside: avoid-page; }
}

/* ---------------------------------------------------------------------- */
/* Blog                                                                    */
/* ---------------------------------------------------------------------- */
.post-list-grid { display: grid; gap: 22px; }
.post-list-grid.is-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .post-list-grid.is-two { grid-template-columns: 1fr; } }
.post-card-img {
  display: block; margin: -28px -28px 22px; overflow: hidden;
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
  aspect-ratio: 1200 / 630; background: var(--bg-2);
}
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease, ease); }
.post-card:hover .post-card-img img { transform: scale(1.035); }

/* Beitragsbild auf der Artikelseite */
.post-hero {
  margin: 0 0 44px; max-width: 940px;
  border-radius: var(--radius-lg, 18px); overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.post-hero img { width: 100%; height: auto; display: block; }
.post-card { display: flex; flex-direction: column; }
.post-card .feature-desc { flex: 1; }
.post-card .btn { align-self: flex-start; }
.post-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.post-card-meta time { font-size: 12.5px; color: var(--text-2); }
.post-card-title { font-family: var(--font-head); font-size: 1.35rem; font-weight: 500; line-height: 1.3; margin: 0 0 12px; }
.post-card-title a { color: var(--text-0); }
.post-card-title a:hover { color: var(--accent-strong); }

/* Beitragsseite */
.post-head { padding: 132px 0 40px; position: relative; }
.post-head h1 { max-width: 860px; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; }
.post-meta { font-size: 13px; color: var(--text-2); margin-top: 26px; }
.post-body { max-width: 760px; padding-bottom: 40px; }
.post-body p { font-size: 16px; line-height: 1.78; color: var(--text-1); margin: 0 0 20px; }
.post-body h2 {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 500;
  color: var(--text-0); margin: 44px 0 16px; line-height: 1.3;
}
.post-body strong { color: var(--text-0); font-weight: 600; }
.post-body em { font-style: italic; }
.post-list { margin: 0 0 22px; padding: 0; list-style: none; }
.post-list li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
  font-size: 16px; line-height: 1.72; color: var(--text-1);
}
.post-list li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.post-note {
  margin: 32px 0; padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-note p { margin: 0; font-size: 15px; line-height: 1.7; }
.post-cta {
  margin: 48px 0 32px; padding: 32px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 18px);
  background: var(--bg-2);
}
.post-cta h3 { font-family: var(--font-head); font-size: 1.25rem; color: var(--text-0); margin: 0; }
.post-disclaimer { font-size: 12.5px !important; color: var(--text-2) !important; line-height: 1.6 !important; padding-top: 22px; border-top: 1px solid var(--border-subtle); }

@media (max-width: 620px) {
  .post-head { padding: 108px 0 30px; }
  .post-body p, .post-list li { font-size: 15.5px; }
}

/* Ablaufschritte auf der Übernahme-Seite */
.takeover-steps { margin-top: 44px; max-width: 900px; }
.takeover-step {
  display: flex; gap: 26px; align-items: flex-start;
  padding: 26px 0;
  border-top: 1px solid var(--border-subtle);
}
.takeover-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.takeover-num {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 600;
  color: var(--accent);
  flex-shrink: 0; width: 46px; padding-top: 2px;
}
.takeover-step .feature-desc { margin-top: 8px; }
@media (max-width: 520px) {
  .takeover-step { gap: 16px; }
  .takeover-num { width: 34px; font-size: 1.1rem; }
}

/* Vorteilsliste mit Haken */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  font-size: 14.5px; line-height: 1.6; color: var(--text-1);
}
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* FAQ als Aufklapp-Liste — der Text steht im HTML und ist für Suchmaschinen lesbar */
.faq-list { margin-top: 40px; max-width: 860px; }
.faq-item { border-top: 1px solid var(--border-subtle); }
.faq-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 500;
  color: var(--text-0);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { margin: 0 0 24px; padding-right: 44px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }

/* ---------------------------------------------------------------------- */
/* Karte (Zwei-Klick-Loesung, wie beim Video)                              */
/* ---------------------------------------------------------------------- */
.map-embed {
  position: relative;
  margin-top: 36px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
}
.map-embed img,
.map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; display: block;
}
.map-embed::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,16,0.06), rgba(4,8,16,0.42));
  pointer-events: none;
  transition: opacity .35s var(--ease, ease);
}
.map-embed.is-loaded::after,
.map-embed.is-loaded .map-note { opacity: 0; pointer-events: none; }
.map-embed.is-loaded .map-load { display: none; }

.map-load {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 24px;
  border: 0; border-radius: 999px;
  background: var(--accent, #4f8dff); color: #fff;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  transition: transform .3s var(--ease, ease);
}
.map-load:hover { transform: translate(-50%, -50%) scale(1.04); }

.map-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 14px 20px;
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.86);
  background: linear-gradient(180deg, transparent, rgba(4,8,16,0.78));
  transition: opacity .35s var(--ease, ease);
}
.map-actions {
  margin-top: 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.map-address { font-size: 13.5px; color: var(--text-2); }
@media (max-width: 620px) {
  .map-embed { aspect-ratio: 4 / 3; }
  .map-note { font-size: 11px; padding: 12px 14px; }
}

/* ---------------------------------------------------------------------- */
/* Video-Einbindung (Zwei-Klick-Loesung)                                   */
/* Solange nicht geklickt wurde, liegt nur ein lokales Bild auf der Seite.  */
/* ---------------------------------------------------------------------- */
.video-embed {
  position: relative;
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #000;
}
.video-embed img,
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.video-embed::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,16,0.15), rgba(4,8,16,0.55));
  pointer-events: none;
  transition: opacity 0.35s var(--ease, ease);
}
[data-theme="light"] .video-embed::after {
  background: linear-gradient(180deg, rgba(4,8,16,0.10), rgba(4,8,16,0.45));
}
.video-embed.is-playing::after,
.video-embed.is-playing .video-note { opacity: 0; pointer-events: none; }

.video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--accent, #4f8dff);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: transform 0.3s var(--ease, ease), background 0.3s var(--ease, ease);
}
.video-play svg { width: 34px; height: 34px; margin-left: 3px; }
.video-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.video-embed.is-playing .video-play { display: none; }

.video-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 14px 20px;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,0.82);
  background: linear-gradient(180deg, transparent, rgba(4,8,16,0.75));
  transition: opacity 0.35s var(--ease, ease);
}
@media (max-width: 620px) {
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 26px; height: 26px; }
  .video-note { font-size: 11.5px; padding: 12px 14px; }
}

/* ---------------------------------------------------------------------- */
/* Teamkarten: Kurztext + Popup mit dem vollstaendigen Profil              */
/* ---------------------------------------------------------------------- */
.team-card-actions {
  margin-top: auto;
  padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.team-card-actions .btn { margin-top: 0 !important; }

.team-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-elevated);
  color: var(--text-1);
  overflow: auto;
  position: relative;
}
.team-dialog::backdrop {
  background: rgba(4, 8, 16, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.team-dialog[open] { animation: teamDialogIn 0.28s var(--ease, ease) both; }
@keyframes teamDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .team-dialog[open] { animation: none; } }

.team-dialog-close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: none; border: 0; border-radius: 8px;
  color: var(--text-2, #8fa2c0); cursor: pointer;
}
.team-dialog-close:hover { color: var(--text-0); background: rgba(255,255,255,0.06); }

.team-dialog-head { display: flex; gap: 20px; align-items: center; padding-right: 40px; }
.team-dialog-photo {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.team-dialog-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-dialog-head h3 { font-size: 1.25rem; margin: 0; color: var(--text-0); }

.team-dialog-body { margin-top: 24px; }
.team-dialog-body p { font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; }
.team-dialog-body p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .team-dialog { padding: 24px 20px; }
  .team-dialog-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------------------------------------------------------------------- */
/* Partnerlogos                                                            */
/* Die Herstellerlogos liegen auf weissem Grund, deshalb bekommt jede      */
/* Kachel eine helle Flaeche — sonst waeren sie im dunklen Layout          */
/* von einem weissen Rechteck kaum zu unterscheiden.                       */
/* ---------------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.partner-logo {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.partner-logo:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.28); }
.partner-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
[data-theme="light"] .partner-logo,
[data-theme="light"] .logo-lockup .lockup-tile,
[data-theme="light"] .logo-row .lockup-tile {
  border-color: rgba(10, 22, 40, 0.12);
  box-shadow: 0 2px 10px -6px rgba(20, 35, 60, 0.25);
}
[data-theme="light"] .partner-logo:hover { box-shadow: 0 12px 28px -14px rgba(20, 35, 60, 0.35); }

@media (max-width: 980px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Rueckmeldung des Kontaktformulars */
.form-status {
  margin-top: 16px; padding: 13px 16px;
  border-radius: var(--radius-sm, 10px);
  font-size: 13.8px; line-height: 1.55;
  border: 1px solid var(--border-subtle);
}
.form-status.is-ok { border-color: rgba(46,190,125,0.45); background: rgba(46,190,125,0.10); color: #7ee2b0; }
.form-status.is-error { border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.10); color: #ff9d9d; }
[data-theme="light"] .form-status.is-ok { color: #157a4e; }
[data-theme="light"] .form-status.is-error { color: #b52b2b; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots im DOM vorhanden.
   Bewusst nicht display:none — manche Bots ueberspringen versteckte Felder. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
@media (max-width: 520px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; } }

/* ---------------------------------------------------------------------- */
/* Remote support (TeamViewer) */
/* ---------------------------------------------------------------------- */
.support-steps { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.tv-download {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #04101f;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 30px -10px rgba(79,141,255,0.6);
  transition: transform .4s var(--ease);
}
.tv-download:hover { transform: translateY(-3px) scale(1.02); }

/* ---------------------------------------------------------------------- */
/* Light theme — toggled via [data-theme="light"] on <html>, persisted    */
/* in localStorage. Applied pre-paint (see inline head script) so there   */
/* is no dark-to-light flash on load.                                     */
/* ---------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-0: #f6f8fb;
  --bg-1: #ffffff;
  --bg-2: #eef2f7;
  --bg-3: #e3e9f1;
  --bg-elevated: #ffffff;
  --border-subtle: rgba(10, 22, 40, 0.08);
  --border-strong: rgba(10, 22, 40, 0.15);
  --accent: #2f6fe0;
  --accent-soft: #2f6fe01a;
  --accent-strong: #1d54b8;
  --text-0: #0b1420;
  --text-1: #34404f;
  --text-2: #5c6b7c;
  --text-3: #5f6b79; /* darkened from #86929f — that value was ~3.2:1 on white, below WCAG AA 4.5:1 */
}
[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(10,22,40,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,40,0.04) 1px, transparent 1px);
}
[data-theme="light"] .noise { opacity: 0.012; }
[data-theme="light"] .cookie-banner,
[data-theme="light"] .glow-card,
[data-theme="light"] .frame {
  box-shadow: 0 20px 50px -24px rgba(20, 35, 60, 0.18);
}
[data-theme="light"] .datacenter-card::before,
[data-theme="light"] .bcs-hero {
  box-shadow: 0 20px 50px -24px rgba(20, 35, 60, 0.14);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-elevated);
  color: var(--text-1); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover { color: var(--text-0); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }

/* Language switch link in header */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-elevated);
  color: var(--text-1); font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.lang-switch:hover { color: var(--text-0); transform: translateY(-1px); }

/* ── Prozesskette: Shop → ERP → Lager → Versand → Buchhaltung ───────────── */
.chain { margin-top: 44px; }
.chain-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.chain-node {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.chain-node::after {
  content: ""; position: absolute; top: 50%; right: -14px;
  width: 14px; height: 1px; background: var(--border-strong);
}
.chain-node:last-child::after { display: none; }
.chain-step {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
}
.chain-title { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; color: var(--text-0); line-height: 1.3; }
.chain-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.chain-flow { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.chain-flow span { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.chain-flow span + span { margin-top: 3px; }
.chain-legend { margin-top: 20px; font-size: 14px; color: var(--text-2); }

@media (max-width: 1000px) {
  .chain-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-node::after { display: none; }
}
@media (max-width: 560px) {
  .chain-track { grid-template-columns: 1fr; }
}

/* Plattform-Lockup für Shopsysteme */
.platform-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.platform-tag {
  font-size: 13.5px; color: var(--text-1);
  border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 7px 15px; background: var(--bg-2);
}

/* ── Gerätedarstellungen: schematische Oberflächen, keine Screenshots ───── */
.device-lockup {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 9% 30px 0;
}
.device-laptop { width: 100%; }
.laptop-screen {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 11px 11px 3px 3px;
  padding: 8px 8px 10px;
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.55);
}
.laptop-inner {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.laptop-base {
  height: 10px;
  margin: 0 -6%;
  border-radius: 0 0 11px 11px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-top: 0;
  position: relative;
}
.laptop-base::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 80px; height: 4px; transform: translateX(-50%);
  border-radius: 0 0 5px 5px; background: var(--border-strong);
}
.device-phone {
  position: absolute; right: 0; bottom: 0;
  width: 19%; min-width: 78px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  padding: 5px 4px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.phone-inner {
  background: var(--bg-2);
  border-radius: 11px;
  aspect-ratio: 9 / 17.5;
  overflow: hidden;
  position: relative;
}
.phone-inner::before {
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 30%; height: 4px; transform: translateX(-50%);
  border-radius: 3px; background: var(--bg-0); z-index: 2;
}

/* Schematische Benutzeroberfläche im Bildschirm */
.ui { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 7px; }
.ui-topbar {
  display: flex; align-items: center; gap: 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle);
}
.ui-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.ui-bar { height: 5px; border-radius: 3px; background: var(--bg-3); flex-shrink: 0; }
.ui-bar.is-accent { background: var(--accent); opacity: 0.9; }
.ui-bar.is-soft { background: var(--border-strong); }
.ui-row { display: flex; gap: 5px; align-items: center; }
.ui-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ui-tile {
  background: var(--bg-3); border-radius: 3px;
  aspect-ratio: 4 / 3; padding: 4px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
}
.ui-tile .ui-bar { height: 3px; background: var(--border-strong); }
.ui-hero { background: var(--bg-3); border-radius: 4px; flex: 1; min-height: 0; }
.ui-btn { height: 8px; border-radius: 3px; background: var(--accent); opacity: 0.9; flex-shrink: 0; }
.ui-spacer { flex: 1; min-height: 0; }
.ui-list { display: flex; flex-direction: column; gap: 4px; }
.ui-list-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 5px; border-radius: 3px; background: var(--bg-3);
}
.ui-gauge {
  width: 15%; aspect-ratio: 1; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--accent) 0 68%, var(--bg-3) 68% 100%);
  position: relative;
}
.ui-gauge::after {
  content: ""; position: absolute; inset: 26%;
  border-radius: 50%; background: var(--bg-2);
}
.ui-meter { flex: 1; height: 4px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.ui-meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: 0.8; }
.ui-scan {
  flex: 1; min-height: 0; border-radius: 4px; background: var(--bg-3);
  position: relative;
}
.ui-scan::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 50%;
  height: 2px; background: var(--accent); opacity: 0.9;
}

.device-caption {
  margin-top: 22px; font-size: 13.5px; color: var(--text-3);
  text-align: center; max-width: 470px; margin-left: auto; margin-right: auto;
}

@media (max-width: 480px) {
  .device-lockup { padding-right: 11%; }
  .device-phone { min-width: 62px; }
}

/* ── MDE-Handscanner (Lager, Kommissionierung) ─────────────────────────── */
.device-mde {
  position: absolute; right: -1%; bottom: -6%;
  width: 25%; min-width: 96px;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.35));
}
.device-mde svg { width: 100%; height: auto; display: block; }
.mde-shell { fill: var(--bg-1); stroke: var(--border-strong); stroke-width: 1.4; }
.mde-grip  { fill: var(--bg-3); stroke: var(--border-strong); stroke-width: 1.4; }
.mde-ridge { fill: var(--border-strong); }
.mde-head  { fill: var(--bg-3); }
.mde-window{ fill: var(--accent); }
.mde-disp  { fill: var(--bg-2); stroke: var(--border-subtle); stroke-width: 1; }
.mde-txt   { fill: var(--border-strong); }
.mde-hi    { fill: var(--accent); }
.mde-key   { fill: var(--bg-3); }
.mde-trig  { fill: var(--accent); opacity: .9; }
.mde-scanbox { fill: var(--bg-3); }

@media (max-width: 480px) {
  .device-mde { min-width: 76px; }
}

/* ── Shop-Details in der Gerätedarstellung ─────────────────────────────── */
.ui-cart { position: relative; width: 11px; height: 11px; flex-shrink: 0; color: var(--accent); }
.ui-cart svg { width: 100%; height: 100%; display: block; }
.ui-cart b {
  position: absolute; top: -3px; right: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--bg-2);
}
.ui-chips { display: flex; gap: 4px; }
.ui-chip { height: 6px; border-radius: 3px; background: var(--bg-3); flex-shrink: 0; }
.ui-chip.is-on { background: var(--accent); opacity: 0.85; }
.ui-main { display: flex; gap: 6px; flex: 1; min-height: 0; }
.ui-products { flex: 1.75; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; min-width: 0; }
.ui-card {
  background: var(--bg-3); border-radius: 3px; padding: 4px;
  display: flex; flex-direction: column; gap: 3px; min-height: 0;
}
.ui-thumb { flex: 1; min-height: 0; border-radius: 2px; background: var(--border-strong); opacity: 0.55; }
.ui-card .ui-bar { height: 3px; background: var(--border-strong); }
.ui-cardfoot { display: flex; align-items: center; gap: 3px; }
.ui-cardfoot .ui-bar { flex: 1; }
.ui-add { width: 9px; height: 5px; border-radius: 2px; background: var(--accent); opacity: 0.9; flex-shrink: 0; }
.ui-panel {
  flex: 1; min-width: 0;
  background: var(--bg-3); border-radius: 3px; padding: 5px;
  display: flex; flex-direction: column; gap: 4px;
}
.ui-cartline { display: flex; align-items: center; gap: 3px; }
.ui-cartthumb { width: 9px; height: 9px; border-radius: 2px; background: var(--border-strong); flex-shrink: 0; }
.ui-cartline .ui-bar { height: 3px; background: var(--border-strong); }
.ui-total { display: flex; align-items: center; gap: 4px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.ui-total .ui-bar { height: 4px; }

/* Logo im schematischen Bildschirm — folgt derselben Logik wie in der Navigation */
.ui-logo { height: 7px; width: auto; filter: brightness(0) invert(1); flex-shrink: 0; }
[data-theme="light"] .ui-logo { filter: none; }
.ui-logo.is-sm { height: 5px; }

/* ── Netzplan: getrennte Zonen mit kontrolliertem Übergang ─────────────── */
.netzplan { margin-top: 40px; }
.np-top { display: flex; justify-content: center; }
.np-cloud {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  font-family: var(--font-head); font-size: 14.5px; font-weight: 500; color: var(--text-1);
}
.np-cloud svg { width: 17px; height: 17px; color: var(--text-3); }
.np-stem { height: 26px; width: 1px; margin: 0 auto; background: var(--border-strong); }
.np-gate {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 14px 20px; text-align: center;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 500; color: var(--text-0);
}
.np-gate span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.np-zones {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-top: 26px; position: relative;
}
.np-zones::before {
  content: ""; position: absolute; top: -26px; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--border-strong);
}
.np-zone {
  position: relative;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 20px 17px;
}
.np-zone::before {
  content: ""; position: absolute; top: -26px; left: 50%;
  width: 1px; height: 26px; background: var(--border-strong);
}
.np-zone h4 {
  font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text-0);
  margin: 0 0 7px;
}
.np-zone p { font-size: 13.8px; line-height: 1.55; color: var(--text-2); margin: 0; }
.np-tag {
  display: inline-block; margin-bottom: 9px;
  font-family: var(--font-head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.np-note {
  margin-top: 22px; font-size: 14px; color: var(--text-3);
  text-align: center; max-width: 720px; margin-left: auto; margin-right: auto;
}
@media (max-width: 860px) {
  .np-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-zones::before { left: 25%; right: 25%; }
}
@media (max-width: 480px) {
  .np-zones { grid-template-columns: 1fr; }
  .np-zones::before { display: none; }
  .np-zone::before { display: none; }
}

/* Kettendarstellung mit weniger als fünf Stationen */
.chain-track.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chain-track.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .chain-track.is-3, .chain-track.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .chain-track.is-3, .chain-track.is-4 { grid-template-columns: 1fr; }
}

/* ── Zahlenreihe (z. B. Sicherungsregel 3-2-1-1-0) ─────────────────────── */
.numrow {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px; margin-top: 40px;
}
.numrow-item {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 22px 18px; text-align: center;
}
.numrow-num {
  display: block; font-family: var(--font-head); font-size: 2.4rem; font-weight: 600;
  line-height: 1; color: var(--accent); margin-bottom: 12px;
}
.numrow-item h4 {
  font-family: var(--font-head); font-size: 14.5px; font-weight: 600;
  color: var(--text-0); margin: 0 0 6px;
}
.numrow-item p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin: 0; }
.numrow-legend {
  margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-3);
  max-width: 740px; margin-left: auto; margin-right: auto;
}
@media (max-width: 900px) { .numrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .numrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ----------------------------------------------------------------------
   Untermenue unter "Leistungen"
   Rein mit CSS: :hover fuer die Maus, :focus-within fuer die Tastatur.
   Kein JavaScript, damit die Navigation nicht von einem Skript abhaengt.
   ---------------------------------------------------------------------- */
.nav-item { position: relative; display: inline-flex; align-items: center; }

.nav-sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 56px rgba(0,0,0,0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s var(--ease), visibility .22s;
  z-index: 120;
}
[data-theme="light"] .nav-sub { box-shadow: 0 20px 48px rgba(10,22,40,0.14); }

/* Spezifitaet bewusst erhoeht: eine spaetere Regel im Stylesheet hat die
   einfachere Fassung ueberschrieben. Kein !important -- die Klasse der
   Elternnavigation genuegt, um die Kaskade zu gewinnen. */
.nav-links .nav-item:hover > .nav-sub,
.nav-links .nav-item:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Die Pillen-Form der Hauptnavigation gilt hier nicht. */
.nav-links .nav-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
}
.nav-links .nav-sub a:hover { background: var(--accent-soft); color: var(--text-0); }

/* Managed Services steht vorn und bekommt eine Zeile Erklaerung. */
.nav-links .nav-sub a.nav-sub-lead {
  padding: 10px 12px 11px;
  color: var(--text-0);
  font-weight: 600;
}
.nav-sub-lead em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-2);
}

.nav-links .nav-sub a.nav-sub-all {
  margin-top: 5px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--accent-strong);
  font-size: 13.5px;
}

/* Mobil: eingerueckte Liste unter "Leistungen" statt Aufklappen.
   Umschaltpunkt 1140px -- das ist die Breite, ab der die Mobilnavigation
   uebernimmt (siehe oben), nicht 980px. */
@media (max-width: 1140px) {
  .mobile-nav a.mobile-sub {
    padding-left: 22px;
    font-size: 0.92em;
    color: var(--text-1);
  }
  .mobile-nav a.mobile-sub::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 1px;
    margin-right: 9px;
    vertical-align: middle;
    background: var(--border-strong);
  }
}


/* ----------------------------------------------------------------------
   Gruppiertes Untermenue: vier Bereiche, zweispaltig.
   Die flache Liste aus 14 Eintraegen war zu hoch; gruppiert passt sie
   auf etwa die halbe Hoehe und ist schneller zu erfassen.
   ---------------------------------------------------------------------- */
.nav-sub-wide {
  min-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  padding: 14px;
}
.nav-sub-group { display: flex; flex-direction: column; }

.nav-sub-label {
  display: block;
  padding: 8px 12px 5px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Der Abschluss laeuft ueber beide Spalten. */
.nav-sub-wide .nav-sub-all { grid-column: 1 / -1; }

/* Unterhalb von 1120px wuerde das Menue rechts anstossen. */
@media (max-width: 1120px) {
  .nav-sub-wide { left: auto; right: 0; }
}

/* Mobil: Bereichsueberschriften zwischen den Eintraegen. */
@media (max-width: 1140px) {
  .mobile-nav .mobile-sub-label {
    display: block;
    padding: 16px 0 2px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
  }
}


/* ----------------------------------------------------------------------
   Kopfzeile bei offenem Menue hinterlegen.
   Die Leiste ist fixiert und bekommt sonst erst beim Scrollen der Seite
   einen Hintergrund. Im offenen Menue scrollten die Eintraege darum
   sichtbar hinter Logo und Schliessen-Knopf durch.
   ---------------------------------------------------------------------- */
@media (max-width: 1140px) {
  body:has(.mobile-nav.is-open) .site-header {
    background: var(--bg-0);
    border-bottom: 1px solid var(--border-subtle);
  }
}


/* ======================================================================
   Mehr Tiefe -- zurueckhaltend
   Schatten, deutlichere Raender und spuerbare Reaktionen beim Ueberfahren.
   Bewusst ohne zusaetzliche Bilder oder Skripte: die Seite laedt in unter
   0,15 s, und dieser Vorsprung soll bleiben.
   ====================================================================== */

/* --- Karten: Schatten statt nur Rahmen ------------------------------- */
.glow-card {
  box-shadow: 0 1px 2px rgba(5,7,10,.26), 0 10px 28px -14px rgba(5,7,10,.45);
  transition: border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
[data-theme="light"] .glow-card {
  box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 12px 30px -16px rgba(10,22,40,.18);
  border-color: rgba(10,22,40,.10);
}
.glow-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(5,7,10,.3), 0 22px 48px -18px rgba(5,7,10,.6);
}
[data-theme="light"] .glow-card:hover {
  box-shadow: 0 2px 5px rgba(10,22,40,.07), 0 24px 46px -20px rgba(10,22,40,.26);
}

/* --- Panels bekommen dieselbe Behandlung ----------------------------- */
.panel {
  box-shadow: 0 1px 2px rgba(5,7,10,.24), 0 16px 40px -22px rgba(5,7,10,.5);
}
[data-theme="light"] .panel {
  box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 44px -24px rgba(10,22,40,.20);
  border-color: rgba(10,22,40,.09);
}

/* --- Zeilenlisten: sichtbarere Reaktion und ein Akzentbalken ---------- */
.feature-row {
  position: relative;
  padding-left: 0;
  transition: background .25s ease, padding-left .25s var(--ease);
}
.feature-row::before {
  content: "";
  position: absolute; left: -16px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .25s ease;
}
.feature-row:hover { background: rgba(79,141,255,.05); padding-left: 8px; }
.feature-row:hover::before { opacity: .75; }
[data-theme="light"] .feature-row:hover { background: rgba(47,111,224,.05); }

/* --- Schaltflaechen: leichte Anhebung -------------------------------- */
.btn { transition: transform .22s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease; }
.btn-primary { box-shadow: 0 6px 18px -8px rgba(79,141,255,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(79,141,255,.7); }
.btn-ghost:hover { transform: translateY(-1px); }

/* --- Aufklappbare Fragen: Rahmen und Reaktion ------------------------ */
.faq-item { transition: border-color .25s ease, background .25s ease; }
.faq-item:hover { border-color: rgba(79,141,255,.4); }
.faq-item[open] { background: rgba(79,141,255,.035); }
[data-theme="light"] .faq-item[open] { background: rgba(47,111,224,.035); }

/* --- Dunkler Abschlussblock -----------------------------------------
   Als eigene Klasse statt ueber die Kaskade: so bleibt sicher, dass
   ausserhalb dieses Blocks nichts umschlaegt -- in keinem der beiden
   Farbschemata.
   -------------------------------------------------------------------- */
.panel.panel-dark {
  background: linear-gradient(135deg, #061020 0%, #0d2a4e 100%);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 2px 6px rgba(5,7,10,.3), 0 26px 60px -28px rgba(5,16,32,.75);
}
.panel-dark h2,
.panel-dark h3,
.panel-dark .feature-title { color: #f3f6fa; }
.panel-dark .lede,
.panel-dark p,
.panel-dark .feature-desc { color: #c7d0dc; }
.panel-dark .text-muted { color: #8b97a7; }
.panel-dark .eyebrow { color: #79aaff; }
.panel-dark a:not(.btn) { color: #9cc0ff; }
.panel-dark .btn-ghost {
  color: #e8eef7;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.04);
}
.panel-dark .btn-ghost:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.10);
}

/* --- Motiv im Kopfbereich -------------------------------------------
   Wird je Seite ueber die Eigenschaft --hero-motiv gesetzt. Ohne sie
   bleibt alles wie bisher.

   WICHTIG: Der Pfad muss absolut sein, also mit / beginnen:
     style="--hero-motiv:url('/assets/img/hero/name.jpg')"
   Ein relativer Pfad wird gegen DIESE CSS-Datei aufgeloest, nicht gegen
   die Seite. Aus 'assets/img/...' wird dann '/assets/css/assets/img/...'
   -- die Datei fehlt, und das Motiv bleibt unsichtbar.
   -------------------------------------------------------------------- */
.page-hero[style*="--hero-motiv"]::after,
.hero[style*="--hero-motiv"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  background-image: var(--hero-motiv);
  background-size: cover;
  background-position: center right;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%, #000 100%);
  pointer-events: none;
}
[data-theme="light"] .page-hero[style*="--hero-motiv"]::after,
[data-theme="light"] .hero[style*="--hero-motiv"]::after {
  opacity: .20;
  filter: invert(1) hue-rotate(185deg) saturate(1.5) brightness(1.06);
}
@media (max-width: 760px) {
  .page-hero[style*="--hero-motiv"]::after,
  .hero[style*="--hero-motiv"]::after { width: 100%; opacity: .16; }
  [data-theme="light"] .page-hero[style*="--hero-motiv"]::after,
  [data-theme="light"] .hero[style*="--hero-motiv"]::after { opacity: .10; }
}

/* --- Abschnitte etwas staerker voneinander absetzen ------------------ */
.strip { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
[data-theme="light"] .strip { background: #f1f5fa; }


/* ======================================================================
   Mehr Leben
   Die zurueckhaltende Stufe war zu leise. Hier bekommen die Bausteine,
   die am haeufigsten vorkommen, sichtbare Farbe und Form -- weiterhin
   ohne zusaetzliche Bilder oder Skripte.
   ====================================================================== */

/* --- Nummernspalte: aus grauer Schrift wird eine Scheibe ------------- */
.feature-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(79,141,255,.22);
  transition: background .28s ease, color .28s ease, transform .28s var(--ease),
              border-color .28s ease, box-shadow .28s ease;
}
[data-theme="light"] .feature-num {
  color: var(--accent-strong);
  border-color: rgba(47,111,224,.20);
}
.feature-row:hover .feature-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 6px 18px -6px rgba(79,141,255,.6);
}
.feature-row:hover .feature-num svg { stroke: #fff; }

/* --- Ablaufschritte ebenso ------------------------------------------ */
.takeover-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent) 0%, var(--navy-700) 100%);
  box-shadow: 0 8px 22px -10px rgba(79,141,255,.75);
  padding-top: 0;
}

/* --- Symbolflaechen der Karten --------------------------------------- */
.card-icon {
  background: linear-gradient(145deg, rgba(79,141,255,.22), rgba(79,141,255,.07));
  border: 1px solid rgba(79,141,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .3s var(--ease), background .3s ease, border-color .3s ease;
}
.glow-card:hover .card-icon {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(145deg, rgba(79,141,255,.34), rgba(79,141,255,.12));
  border-color: rgba(79,141,255,.42);
}

/* --- Kennzeichen farbig --------------------------------------------- */
.pill {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: rgba(79,141,255,.28);
  font-weight: 600;
  letter-spacing: .01em;
}

/* --- Abschnittsueberschrift bekommt einen Akzent --------------------- */
.section-head > h2::after,
.reveal > .eyebrow + h2::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(79,141,255,0) 100%);
}
.panel-dark h2::after { background: linear-gradient(90deg, #79aaff 0%, rgba(121,170,255,0) 100%); }

/* --- Hervorgehobene Listen ------------------------------------------- */
.check-list li { position: relative; }
.check-list li::marker { color: var(--accent); }

/* --- Kopfbereich: Schein kraeftiger und in ruhiger Bewegung ---------- */
.hero-glow {
  background: radial-gradient(circle, rgba(79,141,255,0.16) 0%, rgba(79,141,255,0.05) 42%, transparent 70%);
  animation: ccAtmen 14s ease-in-out infinite;
}
[data-theme="light"] .hero-glow {
  background: radial-gradient(circle, rgba(47,111,224,0.13) 0%, rgba(47,111,224,0.04) 42%, transparent 70%);
}
@keyframes ccAtmen {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) scale(1.07); opacity: 1; }
}

/* Motiv im Kopfbereich deutlicher -- vorher war es kaum zu erkennen. */
.page-hero[style*="--hero-motiv"]::after,
.hero[style*="--hero-motiv"]::after { opacity: .55; }
[data-theme="light"] .page-hero[style*="--hero-motiv"]::after,
[data-theme="light"] .hero[style*="--hero-motiv"]::after { opacity: .40; }
@media (max-width: 760px) {
  .page-hero[style*="--hero-motiv"]::after,
  .hero[style*="--hero-motiv"]::after { opacity: .26; }
  [data-theme="light"] .page-hero[style*="--hero-motiv"]::after,
  [data-theme="light"] .hero[style*="--hero-motiv"]::after { opacity: .18; }
}

/* --- Abschnitte abwechselnd absetzen --------------------------------- */
[data-theme="light"] .strip { background: #eef3f9; }
.strip { background: var(--bg-2); }

/* --- Wer Bewegung abgestellt hat, bekommt keine ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .glow-card, .glow-card:hover,
  .feature-num, .feature-row:hover .feature-num,
  .card-icon, .glow-card:hover .card-icon,
  .btn, .btn-primary:hover, .btn-ghost:hover { transition: none; transform: none; }
}


/* ======================================================================
   Fotoband, Akzentwoerter, Kartenkante, Lesefortschritt
   ====================================================================== */

/* --- Fotoband zwischen zwei Abschnitten ------------------------------ */
.foto-band {
  position: relative;
  margin: 0;
  height: clamp(220px, 34vw, 420px);
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.foto-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.foto-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,.55) 42%, rgba(5,7,10,.12) 100%);
  pointer-events: none;
}
.foto-band figcaption {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 28px 0 30px;
}
.foto-band figcaption .wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.foto-band figcaption .eyebrow { color: #79aaff; border-left-color: #4f8dff; }
.foto-band figcaption p {
  margin-top: 10px;
  max-width: 560px;
  color: #e8eef7;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  text-shadow: 0 1px 14px rgba(5,7,10,.7);
}

/* --- Akzentwort in grossen Ueberschriften ---------------------------- */
.akzent {
  background: linear-gradient(95deg, var(--accent) 0%, var(--accent-strong) 55%, var(--navy-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .akzent {
  background: linear-gradient(95deg, #2f6fe0 0%, #1d54b8 60%, #0f3363 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Farbige Oberkante auf Karten ------------------------------------ */
.glow-card::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(79,141,255,0) 90%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.glow-card:hover::before { transform: scaleX(1); }

/* --- Lesefortschritt -------------------------------------------------- */
.lesefortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  transition: width .12s linear;
  pointer-events: none;
}

/* --- Hochzaehlende Kennzahlen ---------------------------------------- */
.stat-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .glow-card::before { transition: none; }
  .lesefortschritt { transition: none; }
}

/* ============================================================
   TERMINKNOPF & TERMIN-POPUP
   ============================================================ */
.termin-fab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 18px 14px 16px;
  border: 0; cursor: pointer;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #04101f;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1;
  box-shadow: -8px 0 24px -10px rgba(79,141,255,0.6);
  transition: padding .18s ease, box-shadow .18s ease;
}
.termin-fab:hover { padding-right: 26px; box-shadow: -12px 0 30px -10px rgba(79,141,255,0.75); }
.termin-fab:focus-visible { outline: 2px solid var(--text-0); outline-offset: 3px; }
.termin-fab svg { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 760px) {
  .termin-fab {
    top: auto; bottom: 18px; right: 14px; transform: none;
    border-radius: 999px; padding: 12px 18px;
    box-shadow: 0 8px 24px -8px rgba(79,141,255,0.6);
  }
  body.cookie-sichtbar .termin-fab { bottom: 118px; }
}

.termin-dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--text-1);
  padding: 0;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.65);
}
.termin-dialog::backdrop { background: rgba(4,8,16,0.72); backdrop-filter: blur(3px); }
.termin-dialog-inner { padding: 34px 32px 30px; position: relative; }
.termin-dialog h2 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 500; color: var(--text-0); margin: 10px 0 0; }
.termin-dialog > .termin-dialog-inner > p { margin: 12px 0 0; color: var(--text-2); max-width: 54ch; }
.termin-dialog .booking { margin-top: 24px; }
.termin-schliessen {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03); color: var(--text-1);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s ease, background .15s ease;
}
.termin-schliessen:hover { border-color: var(--accent); background: rgba(79,141,255,0.08); }
.termin-schliessen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) {
  .termin-dialog-inner { padding: 28px 20px 24px; }
  .termin-dialog h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .termin-fab { transition: none; }
}

/* Terminknopf: klappt von Zeit zu Zeit auf und wirbt für sich */
.termin-fab-lang {
  display: inline-grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition: grid-template-columns .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.termin-fab-lang > span { overflow: hidden; white-space: nowrap; }
.termin-fab.winkt .termin-fab-lang { grid-template-columns: 1fr; opacity: 1; }
.termin-fab.winkt .termin-fab-kurz { display: none; }
.termin-fab.winkt { box-shadow: -14px 0 34px -10px rgba(79,141,255,0.85); }
.termin-fab::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(79,141,255,0.55);
}
.termin-fab.winkt::after { animation: terminPuls 1.6s ease-out 2; }
@keyframes terminPuls {
  0%   { box-shadow: 0 0 0 0 rgba(79,141,255,0.5); }
  100% { box-shadow: 0 0 0 16px rgba(79,141,255,0); }
}
/* Pulsring darf über den Knopfrand hinauswirken */
@media (prefers-reduced-motion: reduce) {
  .termin-fab-lang { transition: none; }
  .termin-fab.winkt::after { animation: none; }
}

/* Termin-Popup: direkte Rufnummer unter dem Kalender */
.termin-anruf {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.termin-anruf-label { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.termin-anruf-nr {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 500;
  color: var(--text-0); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .15s ease, color .15s ease;
}
.termin-anruf-nr:hover, .termin-anruf-nr:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.termin-anruf-zeit { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 34ch; }
@media (max-width: 620px) {
  .termin-anruf { flex-direction: column; gap: 10px; }
  .termin-anruf-nr { font-size: 1.35rem; }
  .termin-anruf-zeit { max-width: none; }
}

/* Termin-Popup: Schließen soll leichtfallen */
.termin-schliessen {
  width: 44px; height: 44px;
  font-size: 24px;
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
}
.termin-schliessen:hover { background: rgba(255,141,141,0.10); border-color: #ff8d8d; color: #ffb4b4; }
.termin-dialog-inner { padding-top: 44px; }
.termin-hinweis {
  margin: 18px 0 0; text-align: center;
  font-size: 12px; color: var(--text-3);
}
.termin-hinweis kbd {
  font: inherit; font-weight: 600;
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; color: var(--text-2);
}
@media (max-width: 620px) {
  .termin-schliessen { width: 40px; height: 40px; top: 12px; right: 12px; }
  .termin-dialog-inner { padding-top: 40px; }
}

/* ------------------------------------------------------------------
   Termin-Popup auf dem Handy: kompakter, Rufnummer sofort sichtbar
   ------------------------------------------------------------------ */
@media (max-width: 620px) {
  .nur-gross { display: none; }

  .termin-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    border-radius: var(--radius-md);
  }
  .termin-dialog-inner {
    display: flex; flex-direction: column;
    padding: 46px 16px 16px;
  }
  /* Reihenfolge: Titel, Rufnummer, dann erst der Kalender */
  .termin-dialog-inner > .eyebrow      { order: 1; }
  .termin-dialog-inner > h2            { order: 2; font-size: 1.18rem; margin-top: 6px; }
  .termin-dialog-inner > p             { order: 3; font-size: 13.5px; margin-top: 7px; }
  .termin-dialog-inner > .termin-anruf { order: 4; margin-top: 14px; padding-top: 13px; }
  .termin-dialog-inner > .booking      { order: 5; margin-top: 14px; }
  .termin-dialog-inner > .termin-hinweis { order: 6; margin-top: 12px; }

  /* Rufnummer gro&#223; und als Knopf erkennbar */
  .termin-anruf { gap: 6px; }
  .termin-anruf-nr {
    font-size: 1.42rem; margin-top: 2px;
    border-bottom-color: var(--accent);
  }
  .termin-anruf-zeit { font-size: 12px; line-height: 1.45; }

  /* Kalenderkasten entschlacken -- Titel und Abzeichen sind oben schon da */
  .booking-teaser { padding: 16px 14px; gap: 14px; }
  .booking-badge, .booking-info h3 { display: none; }
  .booking-facts { gap: 6px 16px; margin-top: 0; font-size: 13px; }
  .booking-note { font-size: 11px; line-height: 1.45; margin-top: 12px; }
  .booking-actions { gap: 8px; }
}

/* Schlie&#223;kreuz zwinkert dezent, damit es gefunden wird */
@keyframes terminZwinkern {
  0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(79,141,255,0); transform: scale(1); }
  90%           { box-shadow: 0 0 0 6px rgba(79,141,255,.30); transform: scale(1.06); }
  95%           { box-shadow: 0 0 0 11px rgba(79,141,255,0); transform: scale(1); }
}
.termin-schliessen { animation: terminZwinkern 5s ease-in-out infinite; }
.termin-schliessen:hover, .termin-schliessen:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .termin-schliessen { animation: none; }
}

/* ------------------------------------------------------------------
   Google-Bewertung als Vertrauensangabe.
   BEWUSST OHNE AggregateRating-Auszeichnung: Google untersagt
   selbstbezogene Bewertungen für LocalBusiness und Organization.
   Sichtbar anzeigen ist erlaubt, auszeichnen nicht.
   ------------------------------------------------------------------ */
.gbewertung {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  transition: border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.gbewertung:hover { border-color: var(--accent); background: rgba(79,141,255,0.06); }
.gbewertung-logo { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.gbewertung-sterne { display: inline-flex; gap: 1.5px; flex: 0 0 auto; }
.gbewertung-sterne svg { width: 13px; height: 13px; fill: #f5b544; display: block; }
.gbewertung-wert { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--text-0); letter-spacing: -0.01em; }
.gbewertung-zahl { font-size: 11.5px; color: var(--text-3); }
.gbewertung-trenner { width: 1px; height: 16px; background: var(--border-subtle); flex: 0 0 auto; }

/* kompakte Fassung für Aufruf- und Ansprechpartner-Kästen */
.gbewertung-klein { padding: 5px 11px 5px 9px; gap: 7px; }
.gbewertung-klein .gbewertung-logo { width: 15px; height: 15px; }
.gbewertung-klein .gbewertung-sterne svg { width: 11px; height: 11px; }
.gbewertung-klein .gbewertung-wert { font-size: 0.86rem; }
.gbewertung-klein .gbewertung-zahl { font-size: 10.5px; }

/* auf dunklem Grund */
.panel-dark .gbewertung { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.panel-dark .gbewertung:hover { border-color: var(--accent-strong); background: rgba(255,255,255,0.09); }
.panel-dark .gbewertung-wert { color: #fff; }
.panel-dark .gbewertung-zahl { color: rgba(255,255,255,0.62); }
.panel-dark .gbewertung-trenner { background: rgba(255,255,255,0.18); }

@media (max-width: 520px) {
  .gbewertung { padding: 6px 11px 6px 9px; gap: 7px; }
  .gbewertung-zahl { font-size: 10.5px; }
}

/* Unterzeile im Kopfbereich der Startseite: der Satz, der vorher die H1 war */
.hero-unterzeile {
  margin: 18px 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-1);
  max-width: 24ch;
}
.hero-content .lede { margin-top: 18px; }

/* ---------- Download-Bereich Notfallhandbuch-Vorlage ---------- */
.dl-panel .dl-zusatz{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--border-subtle);
}
.dl-schalter{ position:absolute; opacity:0; width:0; height:0; }
.dl-label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:.94rem; color:var(--text-1); user-select:none; line-height:1.4;
}
.dl-label::before{
  content:""; flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1px solid var(--border-strong); background:transparent; transition:.15s;
}
.dl-schalter:checked + .dl-label{ color:var(--text-0); }
.dl-schalter:checked + .dl-label::before{
  background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.dl-schalter:focus-visible + .dl-label::before{ outline:2px solid var(--accent); outline-offset:2px; }
.dl-ziel{ display:none; margin-top:16px; padding-left:28px; }
.dl-schalter:checked ~ .dl-ziel{ display:block; }
.dl-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.dl-form input[type=text], .dl-form input[type=email]{
  flex:1 1 180px; min-width:0; padding:11px 14px; border-radius:10px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,.04);
  color:var(--text-0); font:inherit; font-size:.94rem;
}
.dl-form input::placeholder{ color:var(--text-2); }
.dl-form input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.dl-form .dl-falle{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.dl-form button{ flex:0 0 auto; }
.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;
}
@media (max-width:560px){
  .dl-form input[type=text], .dl-form input[type=email]{ flex:1 1 100%; }
  .dl-form button{ width:100%; }
}

/* Einwilligung im Anforderungsformular: mehrzeilig, Kästchen oben bündig */
.dl-einwilligung{ flex:1 1 100%; margin:4px 0 2px; }
.dl-einwilligung .dl-label{
  align-items:flex-start; font-size:.88rem; line-height:1.5; color:var(--text-2);
}
.dl-einwilligung .dl-label::before{ margin-top:2px; }
.dl-einwilligung .dl-schalter:checked + .dl-label{ color:var(--text-1); }

/* Vier Felder: auf breiten Schirmen zwei nebeneinander, nicht vier in einer Reihe */
.dl-form input[type=text], .dl-form input[type=email], .dl-form input[type=tel]{
  flex:1 1 calc(50% - 5px);
}