/* ============================================================
   SBS Bürotechnik — ths-Style (Pure Black + Gold-Amber)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;

  --color-bg: #000000;
  --color-bg-rgb: 0,0,0;
  --color-bg-elevated: #0A0A0A;
  --color-surface: #101010;
  --color-surface-hover: #161616;
  --color-border: #1F1F1F;
  --color-border-strong: #2E2E2E;

  --color-fg: #FFFFFF;
  --color-fg-muted: #B5B5B5;
  --color-fg-subtle: #7A7A7A;

  --color-accent: #F49F00;
  --color-accent-hover: #FFB228;
  --color-accent-glow: rgba(244,159,0,.28);
  --color-accent-subtle: rgba(244,159,0,.1);

  --color-success: #34D399;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-3xl: 1.75rem;

  --shadow-glow: 0 0 40px -10px var(--color-accent-glow);
  --shadow-nav: 0 10px 40px -10px rgba(0,0,0,0.4);
}

/* ============================================================
   Light Theme — overrides via [data-theme="light"]
   ============================================================ */
[data-theme="light"] {
  --color-bg: #FAF9F4;          /* warm off-white */
  --color-bg-rgb: 250,249,244;
  --color-bg-elevated: #FFFFFF;
  --color-surface: #F2EFE6;     /* warm sand */
  --color-surface-hover: #EAE6D8;
  --color-border: #E0DBC9;
  --color-border-strong: #C5BFA8;

  --color-fg: #1A1610;
  --color-fg-muted: #4D483C;
  --color-fg-subtle: #8A8474;

  --shadow-nav: 0 10px 40px -10px rgba(26,22,16,.15);
}

/* Theme transitions */
body, .nav__bar, .nav__mobile, .footer, .review, .ncard, .sol,
.fw-card, .cp-card, .info-card, .contact__form,
.tl__year, .form input, .form textarea, .form select {
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.6;
}

::selection { background: var(--color-accent); color: #000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, h4, h5 { margin: 0; }

/* ============================================================
   Container
   ============================================================ */
.container-x {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .container-x { padding: 0 2.5rem; }
}

/* ============================================================
   Eyebrow + Headline + Buttons
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}

.heading-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.gradient-text { color: var(--color-accent); }

.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .85rem 1.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .3s ease, transform .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent);
  color: #000;
  box-shadow: 0 6px 20px -6px rgba(244,159,0,.6);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 12px 30px -8px rgba(244,159,0,.75);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--color-fg);
  border-color: rgba(255,255,255,.16);
}
.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(244,159,0,.06);
}
.btn-primary.sm, .btn-ghost.sm {
  padding: .55rem 1.1rem;
  font-size: .85rem;
}

/* Underlined text-link (ths style) */
.linkline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-accent);
  transition: gap .2s ease, color .2s ease;
}
.linkline:hover { gap: 16px; color: var(--color-accent-hover); }
.linkline--lg { font-size: 15px; gap: 12px; }
.linkline--lg:hover { gap: 20px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: all .3s ease;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav.is-scrolled {
  box-shadow: 0 4px 24px -8px rgba(0,0,0,.12);
}
.nav .container-x {
  /* Container für volle Breite + zentrierter Inhalt */
  max-width: 80rem;
  margin: 0 auto;
}
.nav__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .35rem 1rem;
  color: #1A1610;
}
@media (min-width: 768px) { .nav__bar { padding: .4rem 1.5rem; } }
/* Nav-Links + CTA rechts gruppieren, Logo bleibt links */
.nav__links { margin-left: auto; }

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  flex-shrink: 0;
}
.brand-logo img {
  display: block;
  height: 100%;
  width: auto;
}

.nav__links {
  display: none;
  align-items: center;
  gap: .25rem;
}
@media (min-width: 860px) { .nav__links { display: flex; } }
.nav__links a {
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: #4D483C;
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav__links a:hover {
  color: var(--color-accent);
  background: rgba(244,159,0,.12);
  border-color: rgba(244,159,0,.35);
}

/* Nav Dropdown Groups */
.nav__group {
  position: relative;
}
.nav__group-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  color: #4D483C;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav__group-trigger:hover,
.nav__group.is-open .nav__group-trigger,
.nav__group:focus-within .nav__group-trigger {
  color: var(--color-accent);
  background: rgba(244,159,0,.12);
  border-color: rgba(244,159,0,.35);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-md);
  padding: .5rem;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.2), 0 0 0 1px rgba(244,159,0,.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__dropdown--wide {
  min-width: 320px;
}
.nav__group:hover .nav__dropdown,
.nav__group.is-open .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover-bridge: invisible area so the dropdown stays open when moving from
   the trigger down into the menu (gap between top: calc(100% + .6rem) ) */
.nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: .8rem;
  pointer-events: none;
}
.nav__group:hover::after,
.nav__group.is-open::after,
.nav__group:focus-within::after { pointer-events: auto; }

.nav__dropdown a {
  display: block;
  width: 100%;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  color: #4D483C;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  color: var(--color-accent);
  background: rgba(244,159,0,.1);
}

/* Mobile-Nav Gruppen */
.nav__m-group {
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav__m-group:last-of-type { border-bottom: 0; }
.nav__m-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem .25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1A1610;
  cursor: pointer;
  list-style: none;
}
.nav__m-group > summary::-webkit-details-marker { display: none; }
.nav__m-group > summary::after {
  content: "›";
  font-size: 1.5rem;
  color: var(--color-accent);
  transform: rotate(90deg);
  transition: transform .2s ease;
  line-height: 1;
}
.nav__m-group[open] > summary::after { transform: rotate(270deg); }
.nav__m-group a {
  display: block;
  padding: .55rem 1rem .55rem 1.25rem;
  font-size: .9rem;
  color: #4D483C;
}
.nav__m-group a:hover { color: var(--color-accent); }
.nav__m-link {
  display: block;
  padding: .9rem .25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1A1610;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Nav Pills (Fernwartung / Anfahrt / Anruf) */
.nav-pill {
  display: none;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  padding: .45rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  color: #1A1610;
  background: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nav-pill:hover {
  color: #1A1610;
  border-color: #1A1610;
  background: rgba(0,0,0,.03);
}
.nav-pill--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1A1610;
}
.nav-pill--accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #1A1610;
}
@media (min-width: 640px) {
  .nav-pill:nth-child(3) { display: inline-flex; } /* Anruf zuerst sichtbar */
}
@media (min-width: 860px) {
  .nav-pill { display: inline-flex; }
}

.nav__burger {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  color: #1A1610;
}
@media (min-width: 860px) { .nav__burger { display: none; } }
.nav__burger svg { width: 18px; height: 18px; }

.nav__mobile {
  display: none;
  margin-top: .5rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  padding: .75rem;
  flex-direction: column;
  gap: .25rem;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.2);
  color: #1A1610;
}
.nav.is-open .nav__mobile { display: flex; }
.nav__mobile a {
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  color: #4D483C;
  font-size: .95rem;
}
.nav__mobile a:hover { background: rgba(0,0,0,.04); color: #1A1610; }

/* ============================================================
   HERO — Vollbild-Foto, Text unten, Schild zentral sichtbar
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Foto füllt das gesamte Hero — Schild ist im Bild bereits rechts, Pflanze links */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (min-width: 1200px) {
  .hero__photo {
    /* Großbildschirm: minimal nach links verschieben, damit Schild etwas zentraler liegt */
    background-position: 45% center;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* Gradient links (für Textbereich) + sanft unten – das Schild rechts bleibt unverdeckt */
  background:
    linear-gradient(to right,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.55) 20%,
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,0) 60%),
    linear-gradient(to top,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 18%,
      rgba(0,0,0,0) 40%);
}
[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(to right,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.45) 20%,
      rgba(0,0,0,.18) 40%,
      rgba(0,0,0,0) 60%),
    linear-gradient(to top,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.18) 18%,
      rgba(0,0,0,0) 40%);
}

/* Container für den Text-Inhalt – nur dieser ist auf 80rem begrenzt */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .hero__inner { padding: 5rem 2.5rem 4rem; }
}
@media (min-width: 1200px) {
  .hero__inner { padding: 5rem 2.5rem 5rem; }
}
[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(to top,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.42) 22%,
      rgba(0,0,0,.12) 45%,
      rgba(0,0,0,0) 70%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: #FFFFFF;
}
@media (min-width: 900px) {
  .hero__content { max-width: 760px; }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero h1 .light { font-weight: 300; color: rgba(255,255,255,.92); }
.hero__sub {
  margin: 1.25rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.hero__cta .btn-ghost {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.hero__cta .btn-ghost:hover {
  background: rgba(255,255,255,.15);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ============================================================
   LEITBILD & VISION — Foto-Text Split, weißer Hintergrund
   ============================================================ */
.philo {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: #FFFFFF;
  color: #1A1610;
  border-top: 0;
}
.philo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .philo__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  /* Foto um die Höhe der Überschrift (Zeile + Padding 1rem + Margin 1.75rem)
     nach unten versetzen — so ist es mittig zum Fließtext, ohne Überschrift */
  .philo__photo {
    margin-top: calc(1.1 * clamp(2rem, 4vw, 3rem) + 2.75rem);
  }
}
.philo__photo {
  /* Original-Bildformat (Landscape) – alle 3 Personen voll sichtbar */
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  /* Vertikal mittig zum Text ausrichten (auch wenn der Text laenger ist) */
  align-self: center;
  width: 100%;
  box-shadow: 0 24px 60px -24px rgba(26,22,16,.25);
  position: relative;
}
.philo__photo::after {
  /* Dezenter Akzent-Strich unten links als Polaroid-Marker */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--color-accent);
}
.philo__text {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.philo h2 {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--color-accent);
  position: relative;
  padding-bottom: 1rem;
}
.philo h2::after {
  /* Kurzer Akzent-Strich unter Headline – verbindet visuell mit dem Bild-Marker */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--color-accent);
}
.philo p {
  margin: 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #4D483C;
}
.philo p:last-child { margin-bottom: 0; }
.philo p strong { color: #1A1610; font-weight: 600; }

/* ============================================================
   TIMELINE — Meilensteine
   ============================================================ */
.timeline {
  padding: clamp(5rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(244,159,0,.025), transparent 40%);
}
.timeline__head {
  text-align: center;
  margin-bottom: 5rem;
}
.timeline__head h2 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
}
.timeline__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .timeline__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .timeline__grid::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 28px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);
  }
}
.tl {
  position: relative;
  text-align: center;
  padding: 0 .75rem;
}
.tl__year {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  color: var(--color-accent);
  box-shadow: 0 0 0 6px var(--color-bg);
  position: relative;
  z-index: 1;
}
.tl h3 {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--color-fg);
}
.tl p {
  margin: .6rem auto 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--color-fg-muted);
  max-width: 22ch;
}

/* ============================================================
   SECTION HEAD (general)
   ============================================================ */
.section {
  padding: clamp(5rem, 8vw, 7rem) 0;
  position: relative;
  border-top: 1px solid var(--color-border);
}
.section__head {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.section__head :is(h1, h2) {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.section__head p {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
}

/* ============================================================
   LÖSUNGEN — vereinfacht (4er Grid)
   ============================================================ */
.solutions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) { .solutions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .solutions { grid-template-columns: repeat(4, 1fr); } }
.sol {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.sol:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}
.sol__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.sol__icon svg { width: 22px; height: 22px; }
.sol h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.sol p {
  margin-top: .65rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-fg-muted);
}
.sol ul {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
}
.sol ul li {
  font-size: .8rem;
  color: var(--color-fg-subtle);
  position: relative;
  padding-left: .9rem;
}
.sol ul li::before {
  content: "·";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-weight: 700;
}
.sol__brands {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  border-top: 1px solid var(--color-border);
  margin-top: 1.25rem;
}

/* ============================================================
   LÖSUNGS-DETAIL-SEITEN (loesungen/*.html)
   ============================================================ */
.page-hero {
  position: relative;
  padding: 9rem 0 4rem;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(0,0,0,.08), transparent 60%),
    var(--color-accent);
  color: #FFFFFF;
}
.page-hero__crumbs { color: rgba(255,255,255,.7); }
.page-hero__crumbs a { color: rgba(255,255,255,.9); }
.page-hero__crumbs a:hover { color: #FFFFFF; }
.page-hero__crumbs span { color: rgba(255,255,255,.7); }
.page-hero h1 { color: #FFFFFF; }
.page-hero__lead { color: rgba(255,255,255,.92); }
.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero__inner { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}
.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--color-fg-subtle);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.page-hero__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #FFFFFF;
  margin-bottom: 1.5rem;
}
.page-hero__icon svg { width: 32px; height: 32px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
  color: var(--color-fg);
}
.page-hero h1 .accent {
  color: #1A1610;
  -webkit-text-fill-color: #1A1610;
  background: none;
}
.page-hero__lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,.92);
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: 1.75rem;
}
.page-hero__cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.page-hero__cta .btn-primary {
  background: #1A1610;
  color: #FFFFFF;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.35);
}
.page-hero__cta .btn-primary:hover {
  background: #000000;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.page-hero__cta .btn-ghost {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.55);
  background: transparent;
}
.page-hero__cta .btn-ghost:hover {
  border-color: #FFFFFF;
  color: #1A1610;
  background: #FFFFFF;
}
.page-hero__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(244,159,0,.12), rgba(244,159,0,.04)),
    var(--color-surface);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.page-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, var(--color-accent-glow), transparent 60%);
  opacity: .5;
}
.page-hero__visual svg {
  position: relative;
  width: 56%;
  height: auto;
  color: var(--color-accent);
  opacity: .85;
}

/* Photo-Variante: echtes Hintergrund-Bild statt Icon */
.page-hero__visual--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.4);
  position: relative;
}
.page-hero__visual--photo::before {
  /* Dezenter Akzent-Strich unten links wie ein Polaroid-Marker */
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 80px;
  height: 4px;
  background: #FFFFFF;
  opacity: 1;
  z-index: 2;
}
.page-hero__visual--photo::after {
  /* Sanfter Verlauf unten für visuelle Tiefe */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.15) 0%, transparent 40%);
  pointer-events: none;
}

/* Page Content — weißer Hintergrund */
.page-content {
  padding: 5rem 0;
  background: #FFFFFF;
  color: #1A1610;
}
.page-content__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 900px) {
  .page-content__grid { grid-template-columns: 2fr 1fr; gap: 4rem; }
  /* Ohne Sidebar: Prosa nimmt volle Breite und wird sanft zentriert */
  .page-content__grid:has(> .page-prose:only-child) {
    grid-template-columns: 1fr;
    max-width: 820px;
    margin: 0 auto;
  }
}
.page-prose {
  font-size: 1rem;
  line-height: 1.8;
  color: #4D483C;
}
.page-prose p { margin: 0 0 1.25rem; }
.page-prose strong { color: #1A1610; font-weight: 600; }
.page-prose .eyebrow {
  display: block;
  margin-bottom: .75rem;
}
.page-prose h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 2.5rem 0 1rem;
  color: #1A1610;
}
.page-prose h2:first-child { margin-top: 0; }

/* Features (Sidebar) — als einzelne Pills/Buttons, kein Häkchen */
.page-features {
  /* Dunkle Akzent-Karte im Marken-Look — Kontrast zur weißen Content-Fläche */
  padding: 1.9rem 1.75rem;
  background: #0D0C0A;
  border: 1px solid #262019;
  border-radius: var(--radius-xl);
  position: sticky;
  top: 7.5rem;
  height: fit-content;
  overflow: hidden;
}
.page-features::before {
  /* Feine orange Akzentlinie oben */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), rgba(244,159,0,0) 75%);
}
.page-features h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
  color: var(--color-accent);
}
.page-features ul {
  /* Schlichte Zeilen mit Haarlinien-Trennern — ruhig und modern, ohne Icons */
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-features li {
  padding: .65rem 0;
  font-size: .85rem;
  color: #B5B0A8;
  font-weight: 500;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s ease, padding-left .2s ease;
}
.page-features li:last-child { border-bottom: 0; }
.page-features li:hover {
  color: #FFFFFF;
  padding-left: .45rem;
}

/* Fernwartung Download-Karten */
.fw-downloads {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fw-downloads__head {
  text-align: center;
  margin-bottom: 2rem;
}
.fw-downloads__head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
  color: #1A1610;
}
.fw-downloads__head p {
  margin: 0;
  font-size: 1rem;
  color: #4D483C;
}
.fw-downloads__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .fw-downloads__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fw-downloads__grid { grid-template-columns: repeat(4, 1fr); } }
.fw-download {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: #F8F8F6;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #1A1610;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.fw-download:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.18);
}
.fw-download svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-accent);
}
.fw-download div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fw-download strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #1A1610;
}
.fw-download span {
  font-size: .8rem;
  color: #8A8474;
}
.fw-download--clickpilot {
  background: rgba(244,159,0,.08);
  border-color: rgba(244,159,0,.3);
}
.fw-download--clickpilot:hover {
  background: rgba(244,159,0,.14);
  border-color: var(--color-accent);
}

/* Brands Strip — oranger Hintergrund */
.page-brands {
  padding: 3.5rem 0;
  border: 0;
  background: #FFFFFF;
  text-align: center;
  color: #1A1610;
}
.page-brands > .container-x {
  max-width: 980px;
}
.page-brands__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-accent);
  text-transform: none;
  margin-bottom: 1.25rem;
}
.page-brands__list {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,.08);
  background: #F8F8F6;
  border-radius: var(--radius-lg);
}
.page-brand {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: #1A1610;
  transition: all .2s ease;
}
.page-brand:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Logo-Variante: echtes Partner-Logo als Kachel (pill-style wie Leistungen) */
.page-brand--logo {
  flex: 0 0 auto;
  width: auto;
  height: 56px;
  min-width: 120px;
  padding: .5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.page-brand--logo img {
  /* Alle Logos auf gleiche Hoehe normalisieren - Breite skaliert automatisch */
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) brightness(.95);
  opacity: .85;
  transition: filter .3s ease, opacity .3s ease, transform .25s ease;
}
/* Logos optisch angleichen — gleiche Systematik wie im Partner-Marquee
   der Startseite: Leerraum in den PNG-Dateien kompensiert, sichtbare
   Größe normalisiert (Basis hier 32px statt 44px). */
.page-brand--logo img[src*="brother"]     { height: 25px; }
.page-brand--logo img[src*="canon"]       { height: 66px; }
.page-brand--logo img[src*="epson"]       { height: 23px; }
.page-brand--logo img[src*="papercut"]    { height: 26px; }
.page-brand--logo img[src*="webex"]       { height: 36px; }
.page-brand--logo img[src*="cisco"]       { height: 34px; }
.page-brand--logo img[src*="clevertouch"] { height: 82px; }
.page-brand--logo img[src*="katun"]       { height: 34px; }
.page-brand--logo img[src*="legamaster"]  { height: 23px; }
.page-brand--logo img[src*="lexware"]     { height: 42px; }
.page-brand--logo img[src*="placetel"]    { height: 44px; }
.page-brand--logo img[src*="promethean"]  { height: 22px; }
.page-brand--logo img[src*="sbs.png"]     { height: 36px; }
.page-brand--logo img[src*="terra"]       { height: 28px; }
.page-brand--logo img[src*="utax"]        { height: 29px; }
.page-brand--logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.18);
  border-color: var(--color-accent);
  background: #FFFFFF;
}
.page-brand--logo:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
  transform: scale(1.04);
}

/* Einreihige Variante: alle Partner nebeneinander, Kacheln teilen sich die Breite
   (Logo-Größen bleiben wie auf den anderen Seiten) */
.page-brands--row > .container-x { max-width: 1140px; }
@media (min-width: 900px) {
  .page-brands--row .page-brands__list {
    flex-wrap: nowrap;
    gap: .6rem;
    padding: 1.25rem;
  }
  .page-brands--row .page-brand--logo {
    flex: 1 1 0;
    min-width: 0;
    padding: .5rem .6rem;
  }
}

/* Wortmarke ohne Logo-Datei (z. B. myQ): Textgröße an die Logo-Höhe (32px) angleichen */
.page-brand--wordmark span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1A1610;
  opacity: .85;
  transition: color .3s ease, opacity .3s ease;
}
.page-brand--wordmark:hover span {
  color: var(--color-accent);
  opacity: 1;
}

/* Back-CTA — schwarzer Hintergrund (passend zum Hero) */
.page-back {
  padding: 2.75rem 0 3rem;
  text-align: center;
  background: #FFFFFF;
  color: #1A1610;
}
.page-back > .container-x {
  max-width: 760px;
}
.page-back .eyebrow {
  color: var(--color-accent);
  display: block;
  margin-bottom: .5rem;
}
.page-back h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: .65rem;
  color: #1A1610;
}
.page-back p {
  color: #4A4640;
  margin-bottom: 1.25rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  font-size: .95rem;
}
.page-back__ctas {
  display: flex;
  gap: .65rem;
  justify-content: center;
  flex-wrap: wrap;
}
.page-back__ctas .btn-ghost {
  color: #1A1610;
  border-color: rgba(0,0,0,.18);
  background: transparent;
}
.page-back__ctas .btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(244,159,0,.08);
}

/* ============================================================
   SECTION VARIANT: Dunkel (für Referenzkunden – wie Footer)
   ============================================================ */
.section--dark {
  background: var(--color-bg-elevated);
  color: #FFFFFF;
  border-top: 0;
}
.section--dark .section__head :is(h1, h2) {
  margin: 0 0 1rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}
.section--dark .section__head :is(h1, h2)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-accent);
}
.section--dark .section__head p {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  max-width: 60ch;
  margin: 1rem auto 0;
}

/* Reviews-Karten auf dunklem BG */
.section--dark .review {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.section--dark .review:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.section--dark .review__name { color: #FFFFFF; }
.section--dark .review__age { color: rgba(255,255,255,.45); }
.section--dark .review__text { color: rgba(255,255,255,.78); }
.section--dark .review__source {
  color: rgba(255,255,255,.5);
  border-top-color: rgba(255,255,255,.08);
}

/* Edge-Fade der Marquee passend zum dunklen BG */
.section--dark .reviews-wrap::before {
  background: linear-gradient(to right, var(--color-bg-elevated), transparent);
}
.section--dark .reviews-wrap::after {
  background: linear-gradient(to left, var(--color-bg-elevated), transparent);
}

/* Google-CTA-Button auf dunklem BG anpassen */
.section--dark .btn-google {
  background: #FFFFFF;
  color: #1A1610;
  border-color: rgba(255,255,255,.2);
}
.section--dark .btn-google:hover {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.4);
}
.section--dark .reviews-cta__stars {
  filter: drop-shadow(0 2px 8px rgba(244,159,0,.4));
}

/* ============================================================
   SECTION VARIANT: Weiß (für Referenzkunden)
   ============================================================ */
.section--white {
  background: #FFFFFF;
  color: #1A1610;
  border-top: 0;
}
.section--white .section__head :is(h1, h2) {
  margin: 0 0 1rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}
.section--white .section__head :is(h1, h2)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-accent);
}
.section--white .section__head p {
  color: #4D483C;
  font-size: 1rem;
}

/* Kontaktformular auf weißem BG */
.section--white .contact__form {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 38px -18px rgba(0,0,0,.18);
}
.section--white .contact__form h3 { color: #1A1610; }
.section--white .contact__form > p { color: #4D483C; }
.section--white .form label { color: #4D483C; }
.section--white .form input,
.section--white .form textarea,
.section--white .form select {
  background: #F8F8F6;
  border-color: rgba(0,0,0,.1);
  color: #1A1610;
  border-radius: var(--radius-sm);
}
.section--white .form input::placeholder,
.section--white .form textarea::placeholder { color: #8A8474; }
.section--white .form input:focus,
.section--white .form textarea:focus,
.section--white .form select:focus {
  background: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(244,159,0,.18);
}
.section--white .form__legal { color: #8A8474; }
.section--white .form__legal a { color: var(--color-accent); }

/* Info-Card auf weißem BG */
.section--white .info-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.15);
}
.section--white .info-card h3 { color: #1A1610; }
.section--white .info-item { color: #1A1610; }
.section--white .info-item small { color: #8A8474; }
.section--white .info-item strong { color: #1A1610; }
.section--white .info-item .icon-tile {
  background: rgba(244,159,0,.12);
  color: var(--color-accent);
  border-color: transparent;
}
.section--white a.info-item:hover {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.section--white .info-item .hours .muted { color: #8A8474; }

/* Map-Card auf weißem BG */
.section--white .map-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.15);
}
.section--white .map-card iframe {
  filter: grayscale(.3) brightness(.98);
  opacity: .95;
}
.section--white .map-card:hover iframe {
  filter: none;
  opacity: 1;
}
.section--white .map-card__pill {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.1);
  color: #1A1610;
}

/* Section-Head Subtext auf weiß */
.section--white .section__head p {
  color: #4D483C;
  font-size: 1rem;
  max-width: 60ch;
  margin: 1rem auto 0;
}

/* ============================================================
   CONTACT-CTA STRIP (kompakt auf Startseite)
   ============================================================ */
.contact-cta {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: var(--color-accent);
}
.contact-cta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: #1A1610;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-cta__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.32);
}
.contact-cta__text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.contact-cta__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: -.01em;
  color: #1A1610;
  line-height: 1.2;
}
.contact-cta__sub {
  font-size: .9rem;
  color: #4D483C;
  line-height: 1.4;
}
.contact-cta__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #1A1610;
  transition: transform .25s ease, background .25s ease;
}
.contact-cta__row:hover .contact-cta__arrow {
  transform: translateX(4px);
  background: var(--color-accent-hover);
}
.contact-cta__arrow svg { width: 20px; height: 20px; }

/* Reviews-Karten passend zum weißen BG */
.section--white .review {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.18);
}
.section--white .review:hover {
  background: #FAFAFA;
  border-color: rgba(0,0,0,.14);
}
.section--white .review__name { color: #1A1610; }
.section--white .review__age { color: #8A8474; }
.section--white .review__text { color: #4D483C; }
.section--white .review__source {
  color: #8A8474;
  border-top-color: rgba(0,0,0,.08);
}

/* Edge-Fade der Marquee passend zum weißen BG */
.section--white .reviews-wrap::before {
  background: linear-gradient(to right, #FFFFFF, transparent);
}
.section--white .reviews-wrap::after {
  background: linear-gradient(to left, #FFFFFF, transparent);
}

/* Google-CTA */
.reviews-cta {
  margin-top: 3rem;
  text-align: center;
}
.reviews-cta__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 1rem;
  color: var(--color-accent);
  filter: drop-shadow(0 2px 6px rgba(244,159,0,.2));
}
.reviews-cta__stars svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.6rem;
  background: #FFFFFF;
  color: #1A1610;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-google:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.22);
  border-color: rgba(0,0,0,.22);
}
.btn-google svg:first-child {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn-google .btn-arrow {
  color: var(--color-accent);
  transition: transform .2s ease;
}
.btn-google:hover .btn-arrow {
  transform: translateX(3px);
}

/* ============================================================
   SECTION VARIANT: Orange (für Unsere Lösungen)
   ============================================================ */
.section--orange {
  background: var(--color-accent);
  color: #1A1610;
  border-top: 0;
}
.section--orange .section__head { margin-bottom: 3.5rem; }
.section--orange .section__head :is(h1, h2) {
  margin: 0 0 1rem;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}
.section--orange .section__head :is(h1, h2)::after {
  /* Weißer Akzent-Strich – stilistisch identisch zum Leitbild & Vision */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #FFFFFF;
}
.section__head--center { text-align: center; }

/* Solutions Overview — Vereinfacht (auf der index.html) */
.solutions--compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* Alle Zeilen gleich hoch - Kacheln sind ueberall gleich gross */
  grid-auto-rows: 1fr;
}
@media (min-width: 700px) { .solutions--compact { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .solutions--compact { grid-template-columns: repeat(4, 1fr); } }
.sol-tile {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border: 0;
  background: #FFFFFF;
  text-decoration: none;
  color: #1A1610;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 6px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
}
.sol-tile::after {
  content: "→";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-size: 1.3rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.sol-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.28);
}
.sol-tile:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.sol-tile__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(244,159,0,.12);
  color: var(--color-accent);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.sol-tile__icon svg { width: 22px; height: 22px; }
.sol-tile h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #1A1610;
  margin: 0 0 .65rem;
  /* Zwei Zeilen erzwingen, damit der Text darunter bei allen Kacheln
     auf gleicher Hoehe startet - egal ob H3 ein- oder zweizeilig ist */
  min-height: calc(1.05rem * 1.3 * 2);
  display: flex;
  align-items: flex-start;
}
.sol-tile p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: #4D483C;
  padding-right: 1.5rem; /* Platz für den Hover-Pfeil rechts */
  /* Fuellt verbleibenden Platz - alle Kacheln bekommen gleiche Hoehe */
  flex: 1;
}

/* Nur-Überschrift-Variante (Startseite): Kacheln ohne Beschreibungstext —
   kompaktere Hoehe, Platz unten fuer den Hover-Pfeil */
.solutions--titles .sol-tile {
  min-height: 0;
  padding: 1.5rem 1.4rem 2.6rem;
}
.solutions--titles .sol-tile h3 {
  margin: 0;
  min-height: 0;
}
.solutions--titles .sol-tile::after {
  bottom: 1rem;
  right: 1.4rem;
}

/* ============================================================
   LÖSUNGEN — Strichzeichnungs-Raster (Startseite)
   Weißes Panel, feine Trennlinien, technische Line-Art-Icons
   ============================================================ */
.sol-strip {
  display: flex;
  flex-wrap: wrap;
  /* zentriert – so steht die unvollstaendige letzte Zeile mittig */
  justify-content: center;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 22px 60px -28px rgba(0,0,0,.45);
}

.sol-item {
  position: relative;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: 2.25rem 1rem 2rem;
  text-decoration: none;
  color: #1A1610;
  transition: color .25s ease;
}
/* Vertikale Haarlinie links (wie im Referenz-Layout) */
.sol-item::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 1px;
  background: #E5E1D8;
}
/* Horizontale Haarlinie zur Zeile darüber */
.sol-item::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: #E5E1D8;
}
/* Erste Spalte / erste Zeile ohne Linie – je Breakpoint */
.sol-item:nth-child(2n+1)::before,
.sol-item:nth-child(-n+2)::after { display: none; }
@media (min-width: 620px) {
  .sol-item { flex-basis: 33.3333%; }
  .sol-item::before, .sol-item::after { display: block; }
  .sol-item:nth-child(3n+1)::before,
  .sol-item:nth-child(-n+3)::after { display: none; }
}
@media (min-width: 980px) {
  .sol-item { flex-basis: 25%; }
  .sol-item::before, .sol-item::after { display: block; }
  .sol-item:nth-child(4n+1)::before,
  .sol-item:nth-child(-n+4)::after { display: none; }
}

.sol-item__art {
  display: grid;
  place-items: center;
  height: 84px;
  transition: transform .3s ease;
}
.sol-item__art svg {
  display: block;
  width: 78px; height: 78px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.sol-item h3 {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
}
.sol-item:hover { color: var(--color-accent); }
.sol-item:hover .sol-item__art { transform: translateY(-5px); }
.sol-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -6px;
}
@media (max-width: 619px) {
  .sol-item { padding: 1.75rem .65rem 1.5rem; gap: .9rem; }
  .sol-item__art { height: 62px; }
  .sol-item__art svg { width: 58px; height: 58px; stroke-width: 1.5; }
  .sol-item h3 { font-size: .66rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-item__art { transition: none; }
  .sol-item:hover .sol-item__art { transform: none; }
}

/* Light theme overrides: Detail-Seiten haben jetzt feste Sektion-Farben
   (schwarz / weiß / orange / schwarz) — independent vom Theme. */
[data-theme="light"] .sol-tile {
  background: var(--color-bg-elevated);
}
[data-theme="light"] .sol-tile:hover {
  background: var(--color-surface);
}

/* ============================================================
   WINWIN OFFICE NETWORK — Text-Box orange, Badge-Box weiß
   ============================================================ */
.winwin {
  background: #FFFFFF;
  border-top: 0;
}
.winwin__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: #1A1610;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.15);
}
@media (min-width: 900px) {
  .winwin__card {
    grid-template-columns: 1.4fr auto;
    align-items: stretch;
  }
}

/* Linke Box: Text auf orange */
.winwin__text {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  background: var(--color-accent);
  color: #1A1610;
}
@media (min-width: 900px) {
  .winwin__text { padding: 3rem 3.5rem; }
}
.winwin__text .eyebrow {
  color: #FFFFFF;
  opacity: 1;
}
.winwin__text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  color: #1A1610;
}
.winwin__text h2 .gradient-text {
  /* Auf orange Hintergrund → weißer Akzent */
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.winwin__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(26,22,16,.88);
  max-width: 60ch;
  margin-bottom: 1.75rem;
}
.winwin__text strong { color: #1A1610; font-weight: 700; }

/* Button mittig zentriert — weiß auf orange */
.winwin__ctas {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.winwin__ctas .btn-primary {
  background: #FFFFFF;
  color: #1A1610;
  border-color: #FFFFFF;
}
.winwin__ctas .btn-primary:hover {
  background: #1A1610;
  color: #FFFFFF;
  border-color: #1A1610;
}
.winwin__ctas .btn-ghost {
  border-color: #1A1610;
  color: #1A1610;
  background: transparent;
  backdrop-filter: none;
}
.winwin__ctas .btn-ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,.2);
  color: #1A1610;
}

/* Rechte Box: winwin-Logo auf weiß */
.winwin__badge {
  background: #FFFFFF;
  padding: 2.5rem;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
@media (min-width: 900px) {
  .winwin__badge { padding: 3rem 3.5rem; }
}
.winwin__badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.winwin__logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}
.winwin__status {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1A1610;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: #F8F8F6;
}

/* ============================================================
   PARTNERS MARQUEE — rotierende Logo-Karten mit Brand-Farben
   ============================================================ */
.partners {
  text-align: center;
}
.partners__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--color-accent);
  margin-bottom: 3rem;
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}
.partners__title::after {
  /* Akzent-Strich wie bei Leitbild & Vision */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-accent);
}

/* Marquee Wrap mit Edge-Fade (passend zum weißen BG) */
.partners-marquee {
  position: relative;
  overflow: hidden;
  padding: .5rem 0;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%);
}
.partners-marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: partners-scroll 50s linear infinite;
}
.partners-marquee:hover .partners-marquee__track {
  animation-play-state: paused;
}
@keyframes partners-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Partner Card — Logos aneinander gereiht, kein Hintergrund, perfekt mittig */
.partner-card {
  flex: 0 0 auto;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  transition: transform .25s ease;
  position: relative;
  /* Mix-Blend: weiße Hintergründe (z.B. JPG-Logos) verschwinden auf weißem Section-BG */
  mix-blend-mode: multiply;
}
.partner-card img {
  /* Alle Logos auf gleiche Hoehe normalisieren - Breite passt sich Seitenverhaeltnis an */
  height: 44px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  /* Abgrauen: Graustufen + leichte Transparenz */
  filter: grayscale(100%) brightness(.95);
  opacity: .7;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.partner-card:hover img {
  /* Beim Hover Original-Farben zeigen */
  filter: grayscale(0) brightness(1);
  opacity: 1;
  transform: scale(1.08);
}
/* Logos optisch angleichen: Die PNG-Dateien haben unterschiedlich viel
   Leerraum (bis 81%) und Inhalts-Proportionen von 1.9 bis 11.0. Die Höhe
   ist je Logo so gewählt, dass der sichtbare Inhalt gleich groß wirkt
   (Leerraum kompensiert, Fläche normalisiert). */
.partner-card img[src*="actiforce"]     { height: 47px; }
.partner-card img[src*="brother"]       { height: 34px; }
.partner-card img[src*="canon"]         { height: 91px; }
.partner-card img[src*="cisco"]         { height: 40px; }
.partner-card img[src*="clevertouch"]   { height: 93px; }
.partner-card img[src*="hsm"]           { height: 36px; }
.partner-card img[src*="ideal"]         { height: 33px; }
.partner-card img[src*="katun"]         { height: 47px; }
.partner-card img[src*="krug-priester"] { height: 28px; }
.partner-card img[src*="legamaster"]    { height: 32px; }
.partner-card img[src*="placetel"]      { height: 61px; }
.partner-card img[src*="promethean"]    { height: 30px; }
.partner-card img[src*="sedus"]         { height: 40px; }
.partner-card img[src*="terra"]         { height: 39px; }
.partner-card img[src*="utax"]          { height: 40px; }
.partner-card img[src*="webex"]         { height: 50px; }

/* Reduced-Motion: Marquee anhalten, statt unendlich zu scrollen */
@media (prefers-reduced-motion: reduce) {
  .partners-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* Partner-Cards bleiben transparent in beiden Themes — keine Override nötig */

/* ============================================================
   EVENTS PLACEHOLDER
   ============================================================ */
.events-placeholder {
  margin-top: 3rem;
  padding: 4rem 2rem;
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 0%, var(--color-accent-subtle), transparent 60%),
    var(--color-surface);
}
.events-placeholder__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}
.events-placeholder__icon svg { width: 28px; height: 28px; }
.events-placeholder h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
  color: var(--color-fg);
}
.events-placeholder p {
  color: var(--color-fg-muted);
  max-width: 50ch;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}

/* ============================================================
   REVIEWS — Marquee (kept from before)
   ============================================================ */
.reviews-wrap {
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
  padding: .5rem 0;
}
.reviews-wrap::before,
.reviews-wrap::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 5rem;
  z-index: 2;
  pointer-events: none;
}
.reviews-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.reviews-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}
.reviews-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: reviewsScroll 90s linear infinite;
  padding: .25rem;
}
.reviews-track:hover { animation-play-state: paused; }
@keyframes reviewsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.review {
  flex-shrink: 0;
  width: 320px;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color .25s ease, background .25s ease;
}
.review:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}
.review__head { display: flex; align-items: center; gap: .7rem; }
.review__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}
.review__meta { flex: 1; min-width: 0; }
.review__name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review__age {
  font-size: .72rem;
  color: var(--color-fg-subtle);
  margin-top: 1px;
}
.review__stars { display: flex; gap: 2px; color: var(--color-accent); }
.review__stars svg { width: 14px; height: 14px; fill: currentColor; }
.review__text {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--color-fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.review__source {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  color: var(--color-fg-subtle);
  padding-top: .6rem;
  border-top: 1px solid var(--color-border);
}
.review__source .g {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  color: #4285F4;
  font-weight: 700;
  font-size: .65rem;
  font-family: var(--font-display);
}

/* ============================================================
   FERNWARTUNG + CLICKPILOT
   ============================================================ */
.fw-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-surface), var(--color-bg-elevated));
}
.fw-card__glow {
  position: absolute;
  top: -6rem; right: -6rem;
  width: 22rem; height: 22rem;
  background: rgba(244,159,0,.18);
  filter: blur(90px);
  border-radius: 999px;
  pointer-events: none;
}
.fw-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) { .fw-card__inner { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }

.fw-card__text h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.fw-card__text p {
  margin: 1rem 0 1.75rem;
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 36rem;
}
.fw-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.fw-os {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.fw-os__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-accent);
  font-weight: 600;
}
.fw-os__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.fw-os__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--color-border);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  color: var(--color-fg);
  text-decoration: none;
}
.fw-os__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(244,159,0,.08);
}
.fw-os__item svg { width: 28px; height: 28px; color: var(--color-accent); }
.fw-os__item span { font-size: .85rem; font-weight: 500; }

/* ClickPilot */
.cp-card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 80% 20%, rgba(244,159,0,.18), transparent 55%),
    linear-gradient(135deg, var(--color-surface), var(--color-bg-elevated));
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .cp-card { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.cp-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--color-accent-subtle);
  border: 1px solid rgba(244,159,0,.25);
  color: var(--color-accent);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
}
.cp-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-top: 1rem;
}
.cp-card p {
  margin: 1rem 0 0;
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 36rem;
}
.cp-card__features {
  margin: 1.5rem 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .cp-card__features { grid-template-columns: 1fr 1fr; } }
.cp-card__features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--color-fg);
}
.cp-card__features li svg {
  width: 18px; height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-card__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.cp-card__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 30% 30%, rgba(244,159,0,.2), transparent 55%),
    linear-gradient(135deg, #0E0E0E, #050505);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2.5rem;
  text-align: center;
}
.cp-card__mark {
  display: grid;
  place-items: center;
  width: 5.5rem; height: 5.5rem;
  border-radius: 22px;
  background: var(--color-accent);
  color: #000;
  box-shadow: 0 0 50px -10px rgba(244,159,0,.7);
}
.cp-card__mark svg { width: 44px; height: 44px; }
.cp-card__mark-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cp-card__mark-label span {
  display: block;
  font-size: .72rem;
  color: var(--color-fg-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ============================================================
   NEWS / Veranstaltungen
   ============================================================ */
.news__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.news__head-text { max-width: 560px; }
.news__head h2 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px) { .news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news__grid { grid-template-columns: repeat(3, 1fr); } }
.ncard {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.ncard:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.ncard__photo {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #0a0a0a;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(244,159,0,.06) 49%, rgba(244,159,0,.06) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(244,159,0,.06) 49%, rgba(244,159,0,.06) 51%, transparent 52%);
  background-size: 40px 40px;
}
.ncard__photo--themed {
  background-image: var(--bg-img),
    linear-gradient(45deg, transparent 48%, rgba(244,159,0,.06) 49%, rgba(244,159,0,.06) 51%, transparent 52%);
  background-size: cover, 40px 40px;
}
.ncard__body { padding: 1.5rem 1.5rem 1.75rem; }
.ncard__date {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}
.ncard h3 {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.ncard p {
  margin-top: .75rem;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--color-fg-muted);
}
.ncard__more {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* ============================================================
   BIG CTA
   ============================================================ */
.bigcta {
  padding: clamp(6rem, 12vw, 10rem) 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,159,0,.08), transparent 60%);
}
.bigcta h2 {
  margin: 1rem auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 880px;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.bigcta h2 .accent { color: var(--color-accent); }
.bigcta__cta {
  margin-top: 2.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   KONTAKT (Form + Info + Map)
   ============================================================ */
.contact {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1000px) { .contact { grid-template-columns: 3fr 2fr; } }

.contact__form {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
@media (min-width: 768px) { .contact__form { padding: 2.5rem; } }
.contact__form-glow {
  position: absolute;
  right: -5rem; top: -5rem;
  width: 15rem; height: 15rem;
  background: rgba(244,159,0,.12);
  filter: blur(60px);
  border-radius: 999px;
  pointer-events: none;
}
.contact__form h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.015em;
  margin: 0;
}
.contact__form > p {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--color-fg-muted);
}

.form {
  position: relative;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-fg-muted);
  margin-bottom: .5rem;
  font-weight: 600;
}
.form input, .form textarea, .form select {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: .8rem 1rem;
  color: var(--color-fg);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--color-fg-subtle); }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.form textarea { resize: none; }

.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-group input { display: none; }
.chip-group label {
  display: inline-block;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: .55rem 1rem;
  font-size: .85rem;
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: all .2s ease;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  font-weight: 500;
}
.chip-group label:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip-group input:checked + label {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.form__legal { font-size: .75rem; color: var(--color-fg-subtle); margin: 0; }

/* Contact info */
.contact__info { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.info-card { padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.info-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.015em;
}
.info-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.info-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .75rem;
  margin: -.75rem;
  border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
a.info-item:hover {
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
}
.info-item .icon-tile {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.info-item .icon-tile svg { width: 18px; height: 18px; }
a.info-item:hover .icon-tile { background: var(--color-accent); color: #000; }
.info-item small {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-fg-muted);
  font-weight: 600;
}
.info-item strong { display: block; margin-top: 2px; font-weight: 600; }
.info-item .hours { font-size: .85rem; margin-top: 2px; }
.info-item .hours .muted { color: var(--color-fg-muted); }

.map-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.map-card iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: .8;
  filter: grayscale(1) invert(.9) hue-rotate(180deg) brightness(.95);
  transition: opacity .35s ease, filter .4s ease;
}
.map-card:hover iframe {
  opacity: 1;
  filter: grayscale(0) invert(0) hue-rotate(0) brightness(1);
}
.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--color-bg), transparent 60%);
  z-index: 1;
}
.map-card__pill {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  background: rgba(15,15,15,.92);
  backdrop-filter: blur(8px);
  padding: .75rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-fg);
}
.map-card__pill svg { width: 16px; height: 16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-top: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  position: relative;
  overflow: hidden;
}
.footer__inner {
  /* horizontal padding kommt von .container-x; hier nur vertikales Padding */
  padding-top: 4rem;
  padding-bottom: 1rem;
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .footer__grid {
    /* Brand-Col füllt links flexibel, die 3 Info-Spalten content-sized nach rechts —
       Service-Spalte landet damit am rechten Container-Ende. */
    grid-template-columns: 1fr auto auto auto;
    column-gap: 4rem;
    row-gap: 2.5rem;
  }
}
.footer__brand-col { grid-column: auto; }
.footer__brand-col p {
  margin: 1.5rem 0 0;
  max-width: 24rem;
  font-size: .875rem;
  color: var(--color-fg-muted);
  line-height: 1.65;
  /* Linksbündig ausgerichtet mit dem Logo, überschreibt den zentrierten
     Footer-Default. hyphens deaktiviert damit kein Silbentrenner mitten
     im kurzen Abschnitt greift. */
  text-align: left;
  padding-left: 0;
  hyphens: none;
  -webkit-hyphens: none;
}
.footer__logo {
  display: block;
  width: auto;
  height: 100px;
  flex-shrink: 0;
}
.footer__logo img {
  display: block;
  height: 100%;
  width: auto;
}
.footer__col h4 {
  font-family: var(--font-display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0;
}
.footer__col ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: .875rem;
  color: var(--color-fg-muted);
}
.footer__col li { display: flex; gap: .75rem; align-items: flex-start; }
.footer__col svg {
  width: 16px; height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hours-Liste in Footer: Tag links, Uhrzeit rechts bündig */
.hours__time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-fg-muted);
}
.hours__day {
  white-space: nowrap;
}
.hours__row {
  /* Einrückung passend zur SVG-Spalte (16px + .75rem gap) */
  padding-left: calc(16px + .75rem);
}
.hours__row--muted .hours__day,
.hours__row--muted .hours__time {
  color: var(--color-fg-subtle);
}
.footer__col a { color: var(--color-fg-muted); transition: color .2s ease; }
.footer__col a:hover { color: var(--color-accent); }

.footer__bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: .75rem;
  color: var(--color-fg-subtle);
}
@media (min-width: 768px) {
  /* Copyright links, Impressum/Datenschutz ganz rechts (bündig mit Service oben) */
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer__bottom > p { margin: 0; }
}
.footer__bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__bottom-links a { color: var(--color-fg-subtle); transition: color .2s ease; }
.footer__bottom-links a:hover { color: var(--color-accent); }
.footer__bottom-links .switch {
  margin-left: auto;
  padding: .25rem .65rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: 999px;
  font-size: .7rem;
  color: var(--color-fg-subtle);
}
.footer__bottom-links .switch:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   Reveal Animations
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Hero: Text adaptiv zum Theme
   Im Dark-Mode: weiß auf dunklem Overlay
   Im Light-Mode: dunkel auf cream Overlay
   ============================================================ */
.hero, .hero h1, .hero__sub, .hero-stat strong {
  color: var(--color-fg);
}
.hero-stat span { color: var(--color-fg-muted); }
.hero-stats { border-top-color: var(--color-border-strong); }
.hero .btn-ghost {
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.hero .btn-ghost:hover {
  color: var(--color-accent);
  background: rgba(244,159,0,.08);
  border-color: var(--color-accent);
}

/* Light-Mode Mobile: cream Overlay über vollem Foto */
[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(to right, rgba(250,249,244,.96) 0%, rgba(250,249,244,.78) 35%, rgba(250,249,244,.2) 70%, transparent 100%),
    linear-gradient(to top, rgba(250,249,244,.4) 0%, transparent 55%);
}
@media (min-width: 900px) {
  /* Light-Mode Desktop: kein Overlay nötig — Bild fadet selbst aus (mask-image) */
  [data-theme="light"] .hero__overlay {
    background: none;
  }
}
[data-theme="light"] .hero h1 .light { color: var(--color-fg-muted); }

/* ============================================================
   Theme Toggle Button
   ============================================================ */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.theme-toggle svg {
  width: 18px; height: 18px;
  transition: transform .35s cubic-bezier(.5,0,.5,1.6);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   Light-Mode spezifische Anpassungen
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="light"] body {
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Nav (sticky pill) — bleibt in beiden Themes weiß */
[data-theme="light"] .nav__bar {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .nav__mobile {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 30px -8px rgba(26,22,16,.15);
}
/* Logo bleibt unverändert in beiden Themes (klare Markenfarben) */

/* btn-ghost ausserhalb Hero — auf hellem BG mit dunklem Text */
[data-theme="light"] .btn-ghost {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(244,159,0,.08);
}

/* Cards (Reviews, Solutions, News, Form, Info) */
[data-theme="light"] .review,
[data-theme="light"] .ncard,
[data-theme="light"] .sol,
[data-theme="light"] .info-card,
[data-theme="light"] .contact__form {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(26,22,16,.04);
}
[data-theme="light"] .review:hover,
[data-theme="light"] .ncard:hover,
[data-theme="light"] .sol:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 22px -8px rgba(26,22,16,.08);
}

/* Avatar im Review */
[data-theme="light"] .review__avatar {
  background: var(--color-accent-subtle);
  color: #B86F00;
}

/* News-Cards Photo-Pattern */
[data-theme="light"] .ncard__photo {
  background-color: #F0EDE3;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(244,159,0,.08) 49%, rgba(244,159,0,.08) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(244,159,0,.08) 49%, rgba(244,159,0,.08) 51%, transparent 52%);
}

/* Timeline */
[data-theme="light"] .timeline {
  background: linear-gradient(180deg, rgba(244,159,0,.04), transparent 40%);
}
[data-theme="light"] .tl__year {
  background: var(--color-bg);
  box-shadow: 0 0 0 6px var(--color-bg);
}

/* Fernwartung + ClickPilot Cards */
[data-theme="light"] .fw-card,
[data-theme="light"] .cp-card {
  background:
    radial-gradient(circle at 80% 20%, rgba(244,159,0,.12), transparent 55%),
    var(--color-bg-elevated);
  border-color: var(--color-border);
  box-shadow: 0 6px 22px -10px rgba(26,22,16,.08);
}
[data-theme="light"] .fw-card__glow {
  background: rgba(244,159,0,.18);
}
[data-theme="light"] .fw-os {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="light"] .fw-os__item {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
}
[data-theme="light"] .fw-os__item:hover {
  background: rgba(244,159,0,.06);
  border-color: var(--color-accent);
}

/* ClickPilot Visual Panel */
[data-theme="light"] .cp-card__visual {
  background:
    radial-gradient(circle at 30% 30%, rgba(244,159,0,.14), transparent 55%),
    linear-gradient(135deg, #F8F6EE, #EFEAD9);
  border-color: var(--color-border);
}
[data-theme="light"] .cp-card__mark { color: #FFFFFF; }
[data-theme="light"] .cp-card__mark-label strong { color: var(--color-fg); }
[data-theme="light"] .cp-card__mark-label span { color: var(--color-fg-muted); }

/* Big-CTA */
[data-theme="light"] .bigcta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,159,0,.1), transparent 60%);
}

/* Form */
[data-theme="light"] .form input,
[data-theme="light"] .form textarea,
[data-theme="light"] .form select {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-fg);
}
[data-theme="light"] .form input::placeholder,
[data-theme="light"] .form textarea::placeholder {
  color: var(--color-fg-subtle);
}
[data-theme="light"] .form input:focus,
[data-theme="light"] .form textarea:focus,
[data-theme="light"] .form select:focus {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent);
}
[data-theme="light"] .chip-group label {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-fg-muted);
}
[data-theme="light"] .chip-group input:checked + label {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}

/* Info-Item */
[data-theme="light"] a.info-item:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Map */
[data-theme="light"] .map-card iframe {
  filter: grayscale(.4) brightness(.98) contrast(.96);
  opacity: .95;
}
[data-theme="light"] .map-card:hover iframe {
  filter: none;
  opacity: 1;
}
[data-theme="light"] .map-card::before {
  background: linear-gradient(to top, var(--color-bg-elevated), transparent 60%);
}
[data-theme="light"] .map-card__pill {
  background: rgba(255,255,255,.95);
  border-color: var(--color-border);
}

/* Reviews Source Pill */
[data-theme="light"] .review__source {
  border-top-color: var(--color-border);
}

/* Footer */
[data-theme="light"] .footer {
  background: var(--color-surface);
  border-top-color: var(--color-border);
}
[data-theme="light"] .footer__bottom {
  border-top-color: var(--color-border);
}
[data-theme="light"] .footer__bottom-links .switch {
  border-color: var(--color-border-strong);
}

/* btn-primary auf hellem BG: text bleibt schwarz */
[data-theme="light"] .btn-primary { color: #000; }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--color-surface); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--color-border-strong); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* Selection */
[data-theme="light"] ::selection { background: var(--color-accent); color: #000; }

/* Reviews Hover */
[data-theme="light"] .review:hover {
  background: var(--color-surface);
}

/* Nav-Dropdowns Light-Theme */
[data-theme="light"] .nav__dropdown {
  background: #FFFFFF;
  border-color: var(--color-border);
  box-shadow: 0 20px 50px -15px rgba(26,22,16,.15), 0 0 0 1px rgba(244,159,0,.05);
}
[data-theme="light"] .nav__dropdown a {
  color: var(--color-fg-muted);
}
[data-theme="light"] .nav__dropdown a:hover,
[data-theme="light"] .nav__dropdown a:focus-visible {
  color: var(--color-accent);
  background: rgba(244,159,0,.1);
}
[data-theme="light"] .nav__group-trigger:hover,
[data-theme="light"] .nav__group.is-open .nav__group-trigger {
  background: var(--color-surface);
}
[data-theme="light"] .nav__m-group {
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .nav__m-link {
  border-bottom-color: var(--color-border);
}

/* Events (alte .partner Klasse wird nicht mehr verwendet) */
[data-theme="light"] .events-placeholder {
  background:
    radial-gradient(circle at 50% 0%, rgba(244,159,0,.15), transparent 60%),
    var(--color-bg-elevated);
  border-color: var(--color-border-strong);
}
[data-theme="light"] .sol__brands {
  border-top-color: var(--color-border);
}


/* ============================================================
   BLOCKSATZ - alle Content-Absaetze mit weichem Silbentrenner
   ============================================================ */
.philo__text p,
.page-prose p,
.winwin__text p,
.page-hero__lead,
.fw-downloads__head p,
.contact-cta p,
.events-placeholder p,
.section p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Lösungen-Kacheln: linksbündig mit Flatterrand statt Blocksatz —
   vermeidet unruhige Wortabstände in den schmalen Karten */
.sol-tile p {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Ausnahmen: Elemente die NIE justified sein sollten
   (Ueberschriften-Sub-Text, Card-Meta, Buttons, Nav) */
.section__head p,
.nav p,
.btn-primary,
.btn-ghost,
.review-card p,
.fw-download p,
.page-back p {
  text-align: center;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Footer: Text NICHT zentriert, sondern linksbuendig starten (unter dem Logo) */
.footer p,
.footer__brand-col p {
  text-align: left !important;
  hyphens: none;
  -webkit-hyphens: none;
  margin-left: 0;
  padding-left: 0;
}

/* Sol-Tile Karten (Unsere Loesungen): Blocksatz mit Silbentrenner */
.sol-tile p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.page-back p {
  text-align: center;
}


/* ============================================================
   MFP-ANGEBOTSFORMULAR - option tiles, checkbox grids, fieldsets
   ============================================================ */
.form--offer { display: block; }
/* MFP-Angebotsformular: minimalistisch, kompakt, aligned - passt zum
   Site-Design (schmale Rahmen, dezenter Orange-Highlight, dunkler Text
   auf hellem Grund - unabhaengig vom data-theme) */
.form-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}
.form-group legend {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: .65rem;
  padding: 0;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.form-grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form__hint {
  margin-top: .4rem !important;
  font-size: .8rem !important;
  color: #8A8474 !important;
  font-style: normal;
  text-align: left !important;
}
.pseudo-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: #6D6858;
  margin-bottom: .4rem;
  letter-spacing: .05em;
}

/* Radio-Tiles - flach, minimalistisch, gleich hoch */
.option-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 700px) {
  .option-row { grid-template-columns: repeat(3, 1fr); }
  .option-row--2 { grid-template-columns: 1fr 1fr; }
}
.option-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: .85rem 1rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  min-height: 62px;
}
.form label.option-tile {
  display: flex;
}
.option-tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.option-tile__title {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  color: #1A1610;
  line-height: 1.25;
  margin-bottom: .15rem;
  text-align: center;
}
.option-tile__desc {
  display: block;
  width: 100%;
  font-size: .78rem;
  color: #6D6858;
  line-height: 1.35;
  text-align: center;
}
.option-tile:hover {
  border-color: var(--color-accent);
}
.option-tile:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(244,159,0,.06);
}
.option-tile--sm {
  min-height: 44px;
  padding: .55rem .9rem;
}
.option-tile--sm .option-tile__title { margin-bottom: 0; }

/* Checkbox-Grid - gleich grosse Kacheln, minimal Abstand, aligned */
.checkbox-grid {
  display: grid;
  gap: .4rem;
  grid-template-columns: 1fr;
}
.checkbox-grid--compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}
@media (min-width: 600px) {
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .checkbox-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.check-tile {
  display: grid;
  grid-template-columns: 16px minmax(0, auto);
  align-items: center;
  column-gap: .85rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-size: .85rem;
  color: #1A1610;
  min-height: 40px;
  line-height: 1.25;
}
.form label.check-tile {
  display: grid;
}
.checkbox-grid--compact .check-tile {
  width: fit-content;
  min-height: 0;
  text-align: left;
  padding: .4rem .65rem;
  font-size: .76rem;
  line-height: 1.2;
}
.check-tile > span {
  display: block;
  line-height: 1.25;
  margin: 0;
}
.check-tile input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--color-accent);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-self: center;
}
.check-tile:hover { border-color: var(--color-accent); }
.check-tile:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(244,159,0,.06);
}

/* DSGVO-Zustimmung */
.check-line {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  color: #6D6858;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

.additional-devices {
  display: grid;
  gap: 1rem;
}
.additional-device {
  position: relative;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.1);
}
.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin: .25rem 0 1.5rem;
}
.device-actions .btn-ghost,
.additional-device__remove {
  font-size: .85rem;
}
.additional-device__remove {
  margin-top: .25rem;
}

.form-group--submit {
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 1.25rem;
  margin-top: 1rem;
}
.form-group--submit .form__legal {
  margin-top: .65rem;
}

/* Select-Feld: gleiche Optik wie Input */
.form select {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 6px;
  background: #FFFFFF;
  font: inherit;
  font-size: .9rem;
  color: #1A1610;
  cursor: pointer;
  transition: border-color .15s ease;
}
.form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Angebotsformular ueberschreibt Input-Text-Farbe (immer dunkel) */
.form--offer input,
.form--offer textarea,
.form--offer select {
  color: #1A1610;
  background: #FFFFFF;
  border-color: rgba(0,0,0,.14);
  border-radius: 6px;
  padding: .7rem .9rem;
  font-size: .9rem;
}
.form--offer label {
  color: #1A1610;
  font-size: .85rem;
  font-weight: 500;
  display: block;
  margin-bottom: .3rem;
}
.form--offer textarea { min-height: 100px; }

/* =====================================================================
   ADVENTSKALENDER (adventskalender.html)
   ===================================================================== */
.form__row--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

/* Hero-Visual: Zähler statt Foto */
.advent-hero {
  background:
    radial-gradient(circle at 70% 30%, rgba(244,159,0,.28), transparent 55%),
    linear-gradient(160deg, #141414, #0A0A0A);
  border: 1px solid var(--color-border-strong);
  overflow: hidden;
}
.advent-hero::before { display: none; }
.advent-hero__badge {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #FFFFFF;
}
.advent-hero__count {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--color-accent);
}
.advent-hero__label {
  display: block;
  margin-top: .75rem;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.advent-hero__dots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 1.25rem;
  pointer-events: none;
}
.advent-hero__dots span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(244,159,0,.35);
  align-self: center; justify-self: center;
}
.advent-hero__dots span:nth-child(odd) { background: rgba(255,255,255,.18); }

/* Drei Schritte */
.advent-steps .section__head { margin-bottom: 2.5rem; }
.advent-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 820px) { .advent-steps__grid { grid-template-columns: repeat(3, 1fr); } }
.advent-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #F8F8F6;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  color: #1A1610;
}
.advent-step__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #000;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1rem;
}
.advent-step h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.advent-step p { margin: 0; font-size: .92rem; line-height: 1.6; color: #4D483C; }
.advent-step__link {
  display: inline-block;
  margin-top: .85rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-accent);
}

/* Türchen-Raster */
.advent .section__head { margin-bottom: 2.5rem; }
.advent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 560px) { .advent__grid { grid-template-columns: repeat(4, 1fr); gap: .9rem; } }
@media (min-width: 900px) { .advent__grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.advent-door {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem;
  border-radius: var(--radius-md);
  border: 1px solid #2A2A2A;
  background: linear-gradient(160deg, #161616, #0D0D0D);
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.advent-door::after {
  /* feine Türkante */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: calc(var(--radius-md) - 4px);
  pointer-events: none;
}
.advent-door__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.advent-door__meta {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.advent-door.is-open {
  border-color: var(--color-accent);
  background: linear-gradient(160deg, #1C1608, #0D0D0D);
  box-shadow: 0 0 0 1px rgba(244,159,0,.25), 0 18px 40px -24px rgba(244,159,0,.6);
}
.advent-door.is-open .advent-door__num { color: var(--color-accent); }
.advent-door.is-open .advent-door__meta { color: rgba(255,255,255,.75); }
.advent-door.is-open:hover { transform: translateY(-3px); border-color: var(--color-accent-hover); }
.advent-door.is-visited { background: var(--color-accent); border-color: var(--color-accent); box-shadow: none; }
.advent-door.is-visited .advent-door__num,
.advent-door.is-visited .advent-door__meta { color: #000; }
.advent-door.is-visited::after { border-color: rgba(0,0,0,.18); }
.advent-door.is-locked { cursor: not-allowed; opacity: .6; }
.advent-door.is-shake { animation: advent-shake .45s ease; }
@keyframes advent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.advent__note {
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: .85rem;
  color: var(--color-accent);
}

/* Anmeldung */
.advent-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .9rem;
  line-height: 1.5;
  cursor: pointer;
}
.advent-check input { margin-top: .2rem; accent-color: var(--color-accent); width: 18px; height: 18px; }
.advent-check small { display: block; margin-top: .2rem; color: var(--color-fg-muted); font-size: .8rem; }
.advent-check a { color: var(--color-accent); font-weight: 600; }
.advent-bonus {
  padding: .9rem 1rem;
  border: 1px solid rgba(244,159,0,.35);
  background: rgba(244,159,0,.08);
  border-radius: var(--radius-sm);
}
.advent-bonus label { margin-bottom: .5rem; }
.advent-bonus small { display: block; margin-top: .5rem; font-size: .8rem; line-height: 1.5; color: var(--color-fg-muted); }
.advent-success {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--color-success);
  background: rgba(52,211,153,.08);
  border-radius: 4px;
  font-size: .95rem;
  line-height: 1.6;
}
.advent-success a { color: var(--color-accent); font-weight: 600; }

/* Teilnahmebedingungen */
.advent-terms {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-md);
  background: #F8F8F6;
  color: #1A1610;
  font-size: .88rem;
  line-height: 1.6;
}
.advent-terms summary {
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.advent-terms summary::-webkit-details-marker { display: none; }
.advent-terms summary::after { content: "+"; font-size: 1.2rem; color: var(--color-accent); }
.advent-terms[open] summary::after { content: "–"; }
.advent-terms ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.advent-terms li { margin-bottom: .6rem; }
.advent-terms a { color: var(--color-accent); font-weight: 600; }

/* Türchen-Dialog */
.advent-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.advent-modal[hidden] { display: none; }
.advent-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.advent-modal__card {
  position: relative;
  width: min(100%, 520px);
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: #101010;
  border: 1px solid var(--color-border-strong);
  color: #FFFFFF;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  animation: advent-pop .25s ease;
}
@keyframes advent-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.advent-modal__close {
  position: absolute; top: .75rem; right: .9rem;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #FFFFFF; font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.advent-modal__close:hover { background: var(--color-accent); color: #000; }
.advent-modal__day {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: .5rem;
}
.advent-modal__card h3 {
  margin: 0 0 .85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  padding-right: 2rem;
}
.advent-modal__body { font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.85); }
.advent-modal__actions { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.advent-modal__actions:empty { display: none; }

/* Formular-Versand: Honeypot (unsichtbar) und Statusmeldung */
.form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form__status { margin: 0; padding: .9rem 1.1rem; border-radius: 4px; font-size: .92rem; line-height: 1.55; border-left: 3px solid; }
.form__status--ok { border-color: var(--color-success); background: rgba(52,211,153,.1); }
.form__status--warn { border-color: var(--color-accent); background: rgba(244,159,0,.1); }
.form__status--error { border-color: #EF4444; background: rgba(239,68,68,.1); }
.form__status a { color: var(--color-accent); font-weight: 600; }