/* =======================================================================
   Magsaro Generated Stylesheet
   Company: Adrian Dog School
   ======================================================================= */

/* --- Custom Properties ------------------------------------------------- */
:root {
  /* Logo-Satz (Plan 20.1) — je Kontext nutzbar */
  --logo: url("uploads/8a78eedf-e957-49a7-ba0e-1aacee1fd4b0/318c67f5-c48f-4d4b-a6dd-404d4e6e3c57/logos/1/dd643cf4-color.png");
  --logo-dark: url("uploads/8a78eedf-e957-49a7-ba0e-1aacee1fd4b0/318c67f5-c48f-4d4b-a6dd-404d4e6e3c57/logos/1/dd643cf4-light.png");
  --logo-mono: url("uploads/8a78eedf-e957-49a7-ba0e-1aacee1fd4b0/318c67f5-c48f-4d4b-a6dd-404d4e6e3c57/logos/1/dd643cf4-mono.png");
  /* Primary palette */
  --color-primary-50: #fde8f2;
  --color-primary-100: #fad1e6;
  --color-primary-200: #f5a3cc;
  --color-primary-300: #f075b3;
  --color-primary-400: #ec4699;
  --color-primary-500: #e71880;
  --color-primary-600: #b91366;
  --color-primary-700: #8a0f4d;
  --color-primary-800: #5c0a33;
  --color-primary-900: #2e051a;

  /* Secondary palette */
  --color-secondary-50: #e8fdf2;
  --color-secondary-100: #d1fae6;
  --color-secondary-200: #a3f5cc;
  --color-secondary-300: #75f0b3;
  --color-secondary-400: #46ec99;
  --color-secondary-500: #18e780;
  --color-secondary-600: #13b966;
  --color-secondary-700: #0f8a4d;
  --color-secondary-800: #0a5c33;
  --color-secondary-900: #052e1a;

  /* Neutral palette */
  --color-neutral-50: #F2F2F3;
  --color-neutral-100: #E4E5E7;
  --color-neutral-200: #C9CBCF;
  --color-neutral-300: #AFB1B6;
  --color-neutral-400: #94979E;
  --color-neutral-500: #797D86;
  --color-neutral-600: #61646B;
  --color-neutral-700: #494B50;
  --color-neutral-800: #303236;
  --color-neutral-900: #18191B;

  /* Semantic colors */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;

  /* Typography */
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-logo: 'Gloria Hallelujah', cursive;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --color-heading: #2e051a;
  --color-body: #494B50;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --border-radius: 8px;
  --border-radius-lg: 16px;

  /* Image styling */
  --img-radius: 24px;
  --img-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows — richer, colored shadows for depth */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-colored: 0 10px 30px -5px color-mix(in srgb, var(--color-primary-500) 25%, transparent);
}

/* --- Reset / Base ------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Schlanke, dezente Custom-Scrollbar (greift in der Editor-Vorschau UND auf der
   veröffentlichten Seite). 10px-Track + 3px transparenter Rand + background-clip
   → sichtbarer Thumb ~4px, rund, mit Luft. Neutrale Farbe für hell/dunkel. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 135, 0.45) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 135, 0.4);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 135, 0.7);
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  color: var(--color-body);
  background-color: var(--color-neutral-50);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-700);
}

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

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); letter-spacing: -0.01em; }

ul, ol { list-style: none; }

/* --- Container --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

.btn--primary {
  background: var(--color-primary-500);
  color: #fff;
  border-color: var(--color-primary-500);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-500) 35%, transparent);
}

.btn--primary:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--color-primary-500) 40%, transparent);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary-600);
  border-color: var(--color-primary-300);
}

.btn--outline:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-500);
  transform: translateY(-1px);
}

.btn--lg { padding: 1.1rem 2.75rem; font-size: 1.1rem; }
.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; }

/* --- Section Commons --------------------------------------------------- */
.section {
  padding: var(--space-2xl) 0;
  position: relative;
}

.section--alt {
  background: var(--color-neutral-100);
}

.section__title {
  margin-bottom: var(--space-xl);
  color: var(--color-heading);
}

/* Scroll-triggered entrance animations (Plan §5 — variants per section type).
   The entrance is chosen by a [data-anim] attribute on the section so the page
   doesn't animate everything identically (fadeInUp everywhere felt mechanical). */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

.animate-on-scroll.is-visible {
  animation: fadeInUp 0.7s cubic-bezier(0.21, 0.47, 0.32, 0.98) forwards;
}

/* Per-section entrance variants — applied to the section's animated children. */
[data-anim="left"] .animate-on-scroll { transform: translateX(-40px); }
[data-anim="left"] .animate-on-scroll.is-visible { animation-name: fadeInLeft; }
[data-anim="right"] .animate-on-scroll { transform: translateX(40px); }
[data-anim="right"] .animate-on-scroll.is-visible { animation-name: fadeInRight; }
[data-anim="scale"] .animate-on-scroll { transform: scale(0.94); }
[data-anim="scale"] .animate-on-scroll.is-visible { animation-name: scaleIn; }

.animate-on-scroll.is-visible:nth-child(2) { animation-delay: 0.1s; }
.animate-on-scroll.is-visible:nth-child(3) { animation-delay: 0.2s; }
.animate-on-scroll.is-visible:nth-child(4) { animation-delay: 0.3s; }
.animate-on-scroll.is-visible:nth-child(5) { animation-delay: 0.4s; }
.animate-on-scroll.is-visible:nth-child(6) { animation-delay: 0.5s; }

/* Accessibility (Skill-mandated): honour reduced-motion — show content instantly. */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.section__title--center {
  text-align: center;
}

.section__subtitle {
  text-align: center;
  color: var(--color-neutral-600);
  max-width: 600px;
  margin: calc(-1 * var(--space-md)) auto var(--space-xl);
}
/* Left-aligned subline for sections with a left-aligned title (e.g. about). */
.section__subtitle--left { text-align: left; max-width: 60ch; margin-left: 0; margin-right: 0; }

/* =======================================================================
   NAVIGATION
   ======================================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.site-header--scrolled,
.site-header--static {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.site-header--always-transparent {
  background: transparent !important;
  box-shadow: none !important;
}

/* Transparente Navbar über dem (dunklen) Hero: helle Schrift/Logo/Hamburger → lesbar.
   Beim Scrollen wird die Leiste solide (.site-header--scrolled) → wieder dunkle Schrift. */
.site-header--always-transparent .nav__link,
.site-header--always-transparent .nav__logo-text,
.site-header[data-nav-transparent="true"]:not(.site-header--scrolled) .nav__link,
.site-header[data-nav-transparent="true"]:not(.site-header--scrolled) .nav__logo-text {
  color: #fff;
}
.site-header--always-transparent .nav__link:hover,
.site-header[data-nav-transparent="true"]:not(.site-header--scrolled) .nav__link:hover {
  color: rgba(255, 255, 255, 0.82);
}
.site-header--always-transparent .nav__hamburger-bar,
.site-header[data-nav-transparent="true"]:not(.site-header--scrolled) .nav__hamburger-bar {
  background: #fff;
}

/* „Oben ausgeblendet" (_navTransparent='hide'): Navbar ist am Seitenanfang verborgen und gleitet
   beim Scrollen solide herein — vermeidet das durchsichtig-aber-unleserlich-Problem komplett. */
.site-header--hide-top {
  transform: translateY(-100%);
  transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  pointer-events: none;
}
.site-header--hide-top.site-header--scrolled {
  transform: translateY(0);
  pointer-events: auto;
}

.site-header--relative {
  position: relative;
}

.site-header--shrinkable {
  transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base);
}

.site-header--shrinkable.site-header--scrolled .nav {
  padding-block: var(--space-xs);
}

.site-header--shrinkable.site-header--scrolled .nav__logo-img {
  height: 28px;
}

.site-header--shrinkable.site-header--scrolled .nav__logo-text {
  font-size: 1.1rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);   /* volle Breite: Logo links, Aktionen rechts am Rand */
}

/* Standard-Navbar (kein zentriertes Logo): Links füllen die Mitte und sind zentriert,
   Logo links + Aktionen rechts behalten ihre natürliche Breite → symmetrisch, kein Gedrängel. */
.nav:not(.nav--logo-center) > .nav__links {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

/* CTA + Warenkorb als EINE Gruppe rechts (teilen sich nicht den Platz mit den Links). */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.nav__logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;            /* Abstand Logo ↔ Firmenname */
  flex-shrink: 0;         /* Logo-Block nie stauchen → kein Umbruch */
  white-space: nowrap;
}
/* Logo-Design-Varianten (Anordnung Symbol↔Name). */
.nav__logo--reverse { flex-direction: row-reverse; }
.nav__logo--stacked { flex-direction: column; align-items: center; gap: 0.25rem; }

.nav__logo-text {
  font-family: var(--font-logo, var(--font-heading));
  font-weight: var(--font-weight-heading);
  font-size: 1.7rem;
  color: var(--color-primary-600);
  white-space: nowrap;    /* Firmenname immer einzeilig */
}

.nav__logo-img {
  height: 54px;
  width: auto;
}
/* Fallback-Badge für Logos mit (weißem) Hintergrund: helles, abgerundetes
   Kästchen, damit sie auf dunklen/transparenten Navs nicht als Kasten wirken. */
.nav__logo-img--badge {
  background: #fff;
  padding: 5px 9px;
  border-radius: 9px;
  box-sizing: content-box;
}

.nav__links,
.nav__links--left,
.nav__links--right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;        /* viele Menüpunkte brechen lieber um als zu überlappen */
}
/* Nav-Links nie umbrechen (z. B. "Über uns" bleibt einzeilig). */
.nav__links a,
.nav__links--left a,
.nav__links--right a {
  white-space: nowrap;
}

.nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nav-link-color, var(--color-neutral-700));
  transition: color var(--transition-fast);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary-500);
  transition: width var(--transition-base);
}

.nav__link:hover {
  color: var(--color-primary-600);
}

.nav__link:hover::after {
  width: 100%;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  z-index: 1001;
}

.nav__hamburger-bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-neutral-700);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav: Logo centered — links split left & right */
.nav--logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);
}
.nav--logo-center .nav__logo {
  order: 2;
  margin: 0 var(--space-xl);
  flex-shrink: 0;
}
.nav--logo-center .nav__hamburger {
  order: 4;
  margin-left: auto;
}
.nav--logo-center .nav__links--left {
  order: 1;
  margin-left: auto;
}
.nav--logo-center .nav__links--right {
  order: 3;
  margin-right: auto;
}
.nav--logo-center .nav__cta {
  order: 4;
  margin-left: auto;
  flex-shrink: 0;
}
.nav--logo-center .nav__cart {
  order: 5;          /* Warenkorb ganz rechts (sonst springt er durch order:auto nach links) */
  flex-shrink: 0;
  margin-left: 0.4rem;
}

/* =======================================================================
   HERO
   ======================================================================= */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-color: var(--color-primary-800);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  --color-heading: #fff;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  overflow-wrap: break-word;
}

.hero__headline {
  color: var(--color-heading, #fff);
  /* Große Hero-Überschrift nutzt denselben Font wie das Logo in der Navbar
     (--font-logo). Ohne eigenen Logo-Font Fallback auf den Heading-Font. */
  font-family: var(--font-logo, var(--font-heading));
  margin-bottom: var(--space-md);
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* break only when a word truly can't fit (huge display type, e.g. mega-minimal)
     — never mid-word like word-break:break-word did. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero__subheadline {
  color: rgba(255,255,255,0.85);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
  max-width: 600px;
  overflow-wrap: break-word;
}

/* Hero Variant 2: Split */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  background: var(--color-neutral-50);
  overflow: visible;
  --color-heading: var(--color-primary-900);
}
.hero--split .hero__overlay { display: none; }
.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem;
  color: var(--color-primary-900);
}
.hero--split .hero__headline { color: var(--color-heading); }
.hero--split .hero__subheadline { color: var(--color-neutral-600); }
.hero--split .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .hero--split { grid-template-columns: 1fr; }
  .hero--split .hero__content { padding: 2rem; }
}

/* Hero Variant 4: Minimal */
.hero--minimal {
  background: var(--color-neutral-50);
  --color-heading: var(--color-primary-900);
}
.hero--minimal .hero__subheadline { color: var(--color-neutral-600); }

/* Hero Variant 3: Gradient */
.hero--gradient {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));
  min-height: 80vh;
}
.hero--gradient .hero__overlay { display: none; }
.hero--gradient .hero__headline { font-size: 4rem; }
@media (max-width: 768px) {
  .hero--gradient .hero__headline { font-size: 2.5rem; }
}

/* Hero enrichment (Plan 18 §14 — landing-page-quality composition) */
.hero__blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero__blob { position: absolute; width: 46vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(120px); opacity: 0.20; will-change: transform; }
.hero__blob--1 { top: -12%; left: 4%; background: var(--color-primary-400); }
.hero__blob--2 { bottom: -16%; right: 6%; background: var(--color-secondary-400); }
.hero--split .hero__blob, .hero--minimal .hero__blob { opacity: 0.10; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem; margin-bottom: 1.5rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary-300); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-300) 25%, transparent); }
.hero--split .hero__badge, .hero--minimal .hero__badge { background: var(--color-primary-50); border-color: var(--color-primary-100); color: var(--color-primary-700); }
.hero--split .hero__badge-dot, .hero--minimal .hero__badge-dot { background: var(--color-primary-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500) 18%, transparent); }
/* Tonal accent: SAME hue (primary only), light->mid. Reads as a premium, on-brand
   emphasis — never a loud two-colour "bunt" headline. Safe for every industry. */
.hero__headline-accent {
  background: linear-gradient(120deg, var(--color-primary-200), var(--color-primary-400));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero--split .hero__headline-accent, .hero--minimal .hero__headline-accent {
  background: linear-gradient(120deg, var(--color-primary-500), var(--color-primary-700));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Split hero: image wrapper + overlapping floating info card (depth) */
.hero--split .hero__media { position: relative; width: 100%; height: 100%; min-height: 320px; }
/* Parallax frame: clips the oversized photo; the float card is a sibling so it
   is never clipped. The image has 24px headroom each side for a gap-free shift. */
.hero--split .hero__img-frame { position: absolute; inset: 0; overflow: hidden; }
.hero--split .hero__media .hero__image { position: absolute; inset: -24px 0; width: 100%; height: calc(100% + 48px); object-fit: cover; will-change: transform; }
.hero__float-card {
  position: absolute; left: -1.25rem; bottom: -1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  background: #fff; border: 1px solid var(--color-neutral-100);
  border-radius: 14px; padding: 0.85rem 1.1rem;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.28); z-index: 3; max-width: 80%;
}
.hero__float-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-600)); color: #fff; flex-shrink: 0; }
.hero__float-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero__float-text strong { font-size: 0.95rem; color: var(--color-neutral-900); }
.hero__float-text small { font-size: 0.78rem; color: var(--color-neutral-500); }

/* Scroll-progress bar (Plan 18, Phase 5) — fixed top hairline that fills with
   scroll depth. transform: scaleX only (cheap, no layout). */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500)); z-index: 60; pointer-events: none; }
@media print { .scroll-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__blob { animation: none !important; } }
@media (max-width: 768px) {
  .hero__float-card { left: 1rem; bottom: 1rem; }
  .hero__blob { filter: blur(80px); }
}

/* Hero Variant 7: Diagonal split — Desktop behält die schrägen 55%-Panels; auf dem
   Handy würden die absolut positionierten Panels den 45%-Text überlagern → stapeln:
   Bild oben, Text darunter auf dem soliden Primär-Hintergrund (Section-bg = p900). */
@media (max-width: 768px) {
  .hero--diagonal { display: block !important; min-height: 0 !important; }
  .hero--diagonal__media { position: relative !important; width: 100% !important; height: 220px !important; clip-path: none !important; }
  .hero--diagonal__panel { display: none !important; }
  .hero--diagonal .hero__content { max-width: 100% !important; padding: 3rem 0 !important; }
}

/* =======================================================================
   ABOUT
   ======================================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about__text p {
  color: var(--color-neutral-600);
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
}

.about__image {
  overflow: hidden;
  border-radius: var(--img-radius);
}

/* About image depth (Plan §3.1) — an offset accent block sits behind the image
   so it reads as a composed, layered scene instead of a flat rectangle. Desktop
   only (≥768px) and contained within the container padding → no mobile overflow. */
.about__media { position: relative; }
@media (min-width: 768px) {
  .about__media::before {
    content: ''; position: absolute; inset: 0; border-radius: var(--img-radius);
    background: var(--color-primary-100); transform: translate(1rem, 1rem); z-index: 0;
    pointer-events: none;
  }
  .about__media .about__image { position: relative; z-index: 1; box-shadow: var(--img-shadow); }
}

.about__stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.about__stat {
  text-align: center;
}
.about__stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary-500);
  letter-spacing: -0.02em;
}
.about__stat-label {
  font-size: 0.875rem;
  color: var(--color-neutral-500);
}

/* =======================================================================
   SERVICES
   ======================================================================= */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Plan 19 Phase C — geteilte Overlay-Galerie (Bildkachel + Text-Overlay).
   Inhaltsagnostisch: von Leistungen/Galerie/Team nutzbar. Mobile = 1 Spalte,
   Spaltenzahl ab Desktop aus --grid-cols (siehe Media-Query unten). */
.overlay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.overlay-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--img-radius, 16px);
  box-shadow: var(--img-shadow, 0 10px 30px rgba(0,0,0,.12));
}
.overlay-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base, .4s ease);
}
.overlay-tile__img--ph { background: var(--color-neutral-200, #e5e7eb); }
.overlay-tile:hover .overlay-tile__img { transform: scale(1.06); }
.overlay-tile__scrim {
  position: absolute;
  inset: 0;
  /* Kräftiger Verlauf, damit weißer Text auch auf hellen Fotos (heller Raum, Wand)
     lesbar bleibt — unten fast schwarz, oben transparent (Plan 59-Fix). */
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.2) 68%, rgba(0,0,0,0) 100%);
}
.overlay-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg);
  color: #fff;
}
.overlay-tile__icon {
  display: inline-flex;
  margin-bottom: .4rem;
  color: #fff;
  opacity: .95;
}
.overlay-tile__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: #fff;
}
.overlay-tile__text {
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,.88);
}

/* Vorteile- & Ablauf-Raster (Plan 06). Basis = 1 Spalte (Mobile); Spaltenzahl
   kommt aus --grid-cols (im Editor einstellbar), greift erst ab Tablet/Desktop,
   damit auf dem Handy nie horizontal gescrollt wird. */
.benefits__grid,
.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Bild-Container der Vorteile/Ablauf: Rundung + Schatten kommen aus den globalen
   bzw. per-Sektion-Variablen (--img-radius/--img-shadow), damit die Bild-Design-
   Regler greifen; overflow:hidden hält den Zoom-Hover sauber im Rahmen. */
.benefits__media,
.process__media {
  overflow: hidden;
  border-radius: var(--img-radius);
  box-shadow: var(--img-shadow);
  margin-bottom: var(--space-sm);
}
.benefits__media img,
.process__media img {
  display: block;
  width: 100%;
  object-fit: cover;
  box-shadow: none;
}
.benefits__media img { height: 150px; }
.process__media img { height: 120px; }

/* =======================================================================
   STANDORT / KARTE (Plan 06) — nur Karte (zentriert/volle Breite),
   themen-passend, DSGVO-konform (Consent-Gate)
   ======================================================================= */
/* Die Sektion endet mit der Karte — kein Abstand dahinter (geht nahtlos in Kontakt über). */
section.standort { padding-bottom: 0; }
/* z-index über der Deko (0) UND dem hochgezogenen Dots-Divider der Folgesektion
   (z-index 2) — sonst legt sich die gepunktete Linie über den unteren Kartenrand
   (Plan-59 „Divider über der Karte"). padding-bottom:0 lässt die Karte bündig enden. */
.standort__mapwrap { margin-top: var(--space-xl); position: relative; z-index: 3; }
/* Zentriert: angenehme Breite, mittig */
.standort:not(.standort--full) .standort__mapwrap { max-width: 920px; margin-left: auto; margin-right: auto; }
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--img-radius);
  overflow: hidden;
  box-shadow: var(--img-shadow);
  background: var(--color-neutral-100, #eef2ff);
}
/* Volle Breite: randlos über die gesamte Sektion, feste Höhe statt 16:9 */
.standort--full .map-embed { aspect-ratio: auto; height: 460px; border-radius: 0; box-shadow: none; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* „Dunkle" Karte: das keyless Google-Embed kann nicht umgefärbt werden, daher per
   Filter invertiert (Annäherung an ein Dark-Theme). Nur das iframe, nicht der Platzhalter. */
.map-embed--dark iframe { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
.map-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-lg);
  z-index: 1;
}
/* geblurrte „Straßen"-Andeutung, bis die echte Karte nach Consent geladen wird */
.map-embed__placeholder::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
  filter: blur(6px);
  opacity: .55;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,.07) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,0,0,.07) 38px 40px),
    var(--color-neutral-100, #eef2ff);
}
.map-embed__pin { color: var(--color-primary-600, var(--color-primary, #4f46e5)); }
.map-embed__hint { font-size: .85rem; color: var(--color-text-muted, #64748b); max-width: 30ch; margin: 0; }

/* Offset/staggered grid (Plan §3.1 — asymmetric layout). Only at ≥1024px, where
   the grid is actually 3 columns (at 768–1023px it's 2 cols, so a 3n+2 stagger
   would target the wrong cards). Uses margin (not transform) so it survives the
   scroll-entrance animation, which animates transform. align-items:start lets
   the middle column sit lower without stretching its neighbours. */
@media (min-width: 1024px) {
  .services__grid--offset { align-items: start; }
  .services__grid--offset > *:nth-child(3n+2) { margin-top: 2.75rem; }
}

.services__card {
  background: #fff;
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow);
  overflow: hidden; /* clip a flush card-media header to the card's rounded corners */
}

/* Card-image header (Plan: section media). Negative margins pull the photo flush
   to the card edges; aspect-ratio keeps every card's image uniform. */
.services__card-media {
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-md);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.services__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Variant 2 (rows): the side visual now holds the service photo. */
.services--rows .services__row-visual { border-radius: var(--img-radius); overflow: hidden; }
.services--rows .services__row-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.services__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-200);
}

.services__icon {
  margin-bottom: var(--space-md);
  color: #fff;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
  border-radius: 12px;
  padding: 10px;
}
.services__icon svg {
  width: 28px;
  height: 28px;
}

.services__card-title {
  margin-bottom: var(--space-sm);
}

.services__card-text {
  color: var(--color-neutral-600);
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Services Variant 2: Alternating rows */
.services--rows .services__grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.services--rows .services__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.services--rows .services__row--reverse {
  direction: rtl;
}
.services--rows .services__row--reverse > * {
  direction: ltr;
}
@media (max-width: 768px) {
  .services--rows .services__row { grid-template-columns: 1fr; }
}

/* Services Variant 3: Compact list */
.services--list .services__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}
.services--list .services__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid var(--color-neutral-200);
  border-radius: 0;
}
.services--list .services__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Services Variant 4: Large centered icons */
.services__card--centered {
  text-align: center;
}
.services__icon--lg {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-50);
  border-radius: 50%;
  color: var(--color-secondary-600);
}
.services__icon--lg svg {
  width: 40px;
  height: 40px;
}

/* =======================================================================
   GALLERY
   ======================================================================= */
.gallery__grid {
  display: grid;
  /* auto-fit (nicht auto-fill): leere Phantom-Spalten kollabieren, sonst reißen
     Lücken auf, wenn die Bildzahl die Spalten nicht füllt (Plan-59 „Galerie-Lücken"). */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

.gallery__item {
  border-radius: var(--img-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}

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

/* Gallery Variant 5: Bento — mobile-first: 2 cols + flachere Reihen auf dem Handy,
   gewählte Spaltenzahl (--grid-cols) erst ab Tablet. Verhindert 4 gequetschte Spalten. */
.gallery__bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}
.gallery__bento-item { overflow: hidden; border-radius: var(--radius-md); }
@media (min-width: 768px) {
  .gallery__bento { grid-template-columns: repeat(var(--grid-cols, 4), 1fr); grid-auto-rows: 220px; }
}

/* Gallery Variant 2: Mosaic Grid — mobile-first: 2 cols on phones (mosaic needs
   ≥2 for its row spans to read), chosen count from --grid-cols at tablet+. */
.gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}

.gallery__mosaic-item {
  border-radius: var(--img-radius);
  overflow: hidden;
}

.gallery__mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__mosaic-item--wide {
  grid-column: span 2;
}

.gallery__mosaic-item--tall {
  grid-row: span 2;
}


/* Gallery Variant 3: Carousel */
.gallery__carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-md);
  scrollbar-width: thin;
}

.gallery__carousel-item {
  flex: 0 0 350px;
  scroll-snap-align: start;
  border-radius: var(--img-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}

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


/* =======================================================================
   TESTIMONIALS
   ======================================================================= */
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.testimonials__card {
  background: #fff;
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-slow);
}

.testimonials__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.testimonials__quote {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-neutral-700);
  margin-bottom: var(--space-md);
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

.testimonials__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.testimonials__author span {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
}

/* Composed testimonial card (Plan §14.0 follow-up): a large decorative quote
   mark for depth + an author avatar row. Self-contained colours so it reads on
   both light and dark section themes. */
.testimonials__card--quoted { position: relative; padding-top: calc(var(--space-xl) + 0.5rem); }
.testimonials__card--quoted::before {
  content: '\201C';
  position: absolute; top: 0.1rem; left: var(--space-lg);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.5rem; line-height: 1; color: var(--color-primary-200);
  pointer-events: none;
}
.testimonials__card--quoted .testimonials__author {
  flex-direction: row; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--color-neutral-100);
}
.testimonials__author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonials__author-meta strong { line-height: 1.2; }

/* Testimonials Variant 2: Large single */
.testimonials--single .testimonials__grid {
  max-width: 700px;
  margin: 0 auto;
}
.testimonials--single .testimonials__card {
  text-align: center;
  padding: 3rem 2rem;
  background: none;
  box-shadow: none;
}
.testimonials--single .testimonials__quote {
  font-size: 1.5rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-neutral-700);
}

/* Testimonials Variant 3: Speech bubbles */
.testimonials__bubble {
  margin-bottom: var(--space-lg);
}
.testimonials__bubble-text {
  background: #fff;
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  margin-bottom: var(--space-md);
  font-style: italic;
  color: var(--color-neutral-700);
  line-height: 1.7;
}
/* The bubble is ALWAYS a white card, so keep its text dark even on a dark section
   theme (the theme's section-theme--dark p rule would otherwise make it light grey
   on white = unreadable). !important because the bubble background is fixed white. */
.testimonials__bubble-text, .testimonials__bubble-text p { color: var(--color-neutral-700) !important; }
.testimonials__bubble-text::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
.testimonials__bubble-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-left: var(--space-md);
}
.testimonials__bubble-author span {
  color: var(--color-neutral-500);
  font-size: 0.85rem;
}
.testimonials__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-secondary-100);
  color: var(--color-secondary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* When an uploaded portrait exists, the avatar is an <img> in the same circle. */
img.testimonials__avatar { object-fit: cover; }

/* About Variant 4: reversed grid */
.about__grid--reversed {
  direction: rtl;
}
.about__grid--reversed > * {
  direction: ltr;
}

/* =======================================================================
   TEAM VARIANTS
   ======================================================================= */
.team__card--boxed {
  background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: left;
}
.team__card--boxed .team__info {
  padding: var(--space-md);
}
.team__photo-wrap--square {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin: 0;
}
.team__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 600px;
  margin: 0 auto;
}
.team__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}
.team__photo-wrap--small {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}

/* =======================================================================
   FAQ VARIANTS
   ======================================================================= */
.faq__two-col {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.faq__two-col-item {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-neutral-200);
}
.faq__two-col-q {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-neutral-800);
}
.faq__two-col-a {
  color: var(--color-neutral-600);
  line-height: 1.7;
}
.faq__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}
.faq__card {
  background: #fff;
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-secondary-400);
}
.faq__card-q {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-neutral-800);
}
.faq__card-a {
  color: var(--color-neutral-600);
  line-height: 1.7;
}

/* =======================================================================
   PRICING
   ======================================================================= */
/* Menu / Speisekarte (Plan 26) — Kategorien mit Produktzeilen + Preis-Leader.
   Basis-Farben = Website-Palette (wie andere Sektionen auf hellem Grund). Für
   Sektionen MIT Theme überschreibt renderSectionThemeCSS die Menü-Farben mit den
   Theme-Tokens (sectionText/mutedText/headingColor/…) — genau wie services/pricing. */
.menu__grid { display: flex; flex-direction: column; gap: var(--space-2xl); max-width: 760px; margin: 0 auto; }
.menu__cat-title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--color-heading, var(--color-primary-700));
  margin: 0 0 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-primary-200);
}
.menu__cat-desc { color: var(--color-neutral-600); font-size: 0.95rem; margin: 0 0 1rem; }
.menu__items { display: flex; flex-direction: column; }
.menu__item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.menu__item:last-child { border-bottom: none; }
.menu__item-media { flex: 0 0 auto; }
.menu__item-media img {
  width: 68px; height: 68px; object-fit: cover; border-radius: var(--border-radius); display: block;
}
.menu__item-body { flex: 1; min-width: 0; }
.menu__item-head { display: flex; align-items: baseline; gap: 0.5rem; }
.menu__item-name { font-weight: 700; color: var(--color-neutral-900); }
.menu__dots { flex: 1; border-bottom: 2px dotted var(--color-neutral-300); transform: translateY(-3px); min-width: 1.25rem; }
.menu__price { font-weight: 700; color: var(--color-primary-600); white-space: nowrap; }
.menu__item-desc { color: var(--color-neutral-600); font-size: 0.9rem; margin: 0.2rem 0 0; line-height: 1.5; }
.menu__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.menu__tag {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-primary-700); background: var(--color-primary-50);
  padding: 0.12rem 0.5rem; border-radius: 999px;
}
.menu__item--off { opacity: 0.6; }
/* Nicht verfügbar: Preis ausblenden, kompaktes Label zeigen (Tausch per CSS, damit der
   Live-Refresh nur die Klasse umschalten muss). */
.menu__unavail { display: none; font-size: 0.8rem; font-weight: 600; color: var(--color-neutral-500); white-space: nowrap; font-style: italic; }
.menu__item--off .menu__price { display: none; }
.menu__item--off .menu__unavail { display: inline; }

/* Optionen/Varianten unter der Speise (Anzeige) */
.menu__opts { margin-top: 0.45rem; display: flex; flex-direction: column; gap: 0.2rem; }
.menu__opt-group { font-size: 0.82rem; color: var(--color-neutral-600); line-height: 1.5; }
.menu__opt-name { font-weight: 600; color: var(--color-neutral-700); }
.menu__opt-choice { display: inline-block; }
.menu__opt-choice:not(:last-child)::after { content: " · "; color: var(--color-neutral-400); }
.menu__opt-price { color: var(--color-primary-700); font-weight: 600; }

/* Variante 2 — Karten-Grid (Foto-freundlich) */
.menu--cards .menu__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.menu--cards .menu__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.menu--cards .menu__card-media,
.menu--cards .menu__item-media { width: 100%; }
.menu--cards .menu__item-media img { width: 100%; height: 130px; border-radius: 0; }
.menu--cards .menu__item-body { padding: 0.85rem 1rem 1rem; flex: 1; }
.menu--cards .menu__dots { display: none; }
.menu--cards .menu__item-head { justify-content: space-between; gap: 0.75rem; }
.menu--cards .menu__item { border-bottom: none; }

/* Variante 3 — kompakt, zwei Spalten ab Tablet */
@media (min-width: 720px) {
  .menu--columns .menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-2xl); align-items: start; }
}

/* Online-Bestellung (Plan 26/B7) */
.menu__add { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--color-primary-700); background: var(--color-primary-50, #eef2ff); border: 1px solid var(--color-primary-200, #c7d2fe); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: background .15s; }
.menu__add:hover { background: var(--color-primary-100, #e0e7ff); }
.menu__item--off .menu__add { display: none; }
.order-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; background: var(--color-primary-600, #4f46e5); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.order-bar__summary { font-size: 14px; font-weight: 600; }
.order-bar__btn { background: #fff; color: var(--color-primary-700, #4338ca); border: none; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.order-modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.order-modal__box { background: #fff; color: #0f172a; border-radius: 16px; max-width: 460px; width: 100%; padding: 24px; position: relative; max-height: 88vh; overflow-y: auto; }
.order-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #94a3b8; }
.order-modal__title { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.order-modal__items { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; }
.order-modal__items li { padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.order-modal__total { font-size: 15px; margin-bottom: 14px; }
.order-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.order-fields input, .order-fields select, .order-fields textarea { width: 100%; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; }
.order-modal__pay { width: 100%; background: var(--color-primary-600, #4f46e5); color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
.order-modal__pay:disabled { opacity: .6; }
.order-modal__hint { text-align: center; font-size: 12px; color: #94a3b8; margin: 8px 0 0; }
.order-bar[hidden], .order-modal[hidden] { display: none !important; }
.menu__step, .menu__add-btn { flex-shrink: 0; margin-left: 12px; }
.menu__step { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.menu__step-btn, .menu__add-btn { width: 30px; height: 30px; border-radius: 999px; font-size: 19px; line-height: 1; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; -webkit-appearance: none; appearance: none; }
.menu__step-btn { border: 1.5px solid var(--color-primary-600, #4f46e5); background: #fff; color: var(--color-primary-700, #4338ca); }
.menu__step-inc, .menu__add-btn { border: none; background: var(--color-primary-600, #4f46e5); color: #fff; }
.menu__step-btn:hover, .menu__add-btn:hover { filter: brightness(.94); }
.menu__step-dec, .menu__step-qty { display: none; }
.menu__step--active .menu__step-dec { display: inline-flex; }
.menu__step--active .menu__step-qty { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-opt-group { margin-bottom: 14px; }
.order-opt-label { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.order-opt-choice { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.order-opt-choice input { width: 16px; height: 16px; margin: 0; }

.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch; /* alle Karten gleich hoch (höchste Karte gibt die Höhe vor) */
}
/* Bei 4-5 Paketen mehr Seitenbreite nutzen (sonst im 1200er-Container gestaucht).
   Bricht den Container auf bis zu 1480px / 95vw auf — nur für die Preise-Sektion. */
.pricing--wide > .container { max-width: min(1480px, 95vw); }

.pricing__card {
  background: #fff;
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 2px solid var(--color-neutral-200);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  min-width: 0; /* darf in schmalen Grid-Spalten schrumpfen (sonst Überlauf bei 4-5 Paketen) */
}

.pricing__card--highlighted {
  border-color: var(--color-secondary-500);
  position: relative;
}

.pricing__card--highlighted::before {
  content: 'Beliebt';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary-500);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Featured: GRÖSSER (scale) + angehoben + Schatten + Rahmen + Badge. Alle anderen
   Karten sind gleich hoch (stretch); nur diese ragt heraus. scale wird klein
   gehalten (1.05) und vom Grid-Gap abgefangen, damit es nicht rechts überläuft. */
.pricing__card--featured {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 28px 55px -18px color-mix(in srgb, var(--color-secondary-500) 50%, transparent), var(--shadow-lg);
  z-index: 1;
  border-color: var(--color-secondary-500);
}
.pricing__card--featured::before {
  display: none;
}
.pricing__badge {
  background: var(--color-secondary-500);
  color: #fff;
  padding: 0.35rem 1.25rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: var(--space-md);
}

.pricing__name {
  margin-bottom: var(--space-sm);
}

.pricing__price {
  /* Schriftgröße skaliert mit der SPALTENZAHL: 3 Spalten → 2.5rem (groß), 4 → ~1.9rem,
     5 → 1.5rem. So passt der Preis ohne Überlauf, und „Auf Anfrage" bricht sauber
     am Leerzeichen statt mitten im Wort. */
  font-size: clamp(1.3rem, calc(7.5rem / var(--pricing-cols, 3)), 2.5rem);
  font-weight: var(--font-weight-heading);
  font-family: var(--font-heading);
  color: var(--color-secondary-600);
  margin-bottom: var(--space-lg);
}

/* Feature-Zeile der Tabellen-/Kompakt-Preisliste. Eigene Klasse (statt inline
   color) → das Section-Theme kann sie auf dunklen Sektionen einfärben (Plan-59). */
.pricing__row-desc {
  color: var(--color-neutral-500);
  font-size: 0.9rem;
}

.pricing__features {
  text-align: left;
}

.pricing__features li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-600);
  overflow-wrap: anywhere; /* lange Texte/ununterbrochene Wörter umbrechen statt überlaufen */
}

/* Hervorgehobene „Beliebt"-Karte: manche Stile invertieren SIE auf einen dunklen
   Grund (z. B. Brutalist #000) und setzen dafür color:#fff auf die Karte. Name &
   Feature-Zeilen behielten aber ihren dunklen Standard-Farbwert (höhere Spezifität
   als die Vererbung) → dunkler Text auf dunkler Karte. Hier erben sie die
   KARTEN-Farbe, sind also immer lesbar. Der Preis behält bewusst seinen Akzent. */
.pricing__card--highlighted .pricing__name,
.pricing__card--highlighted .pricing__features li { color: inherit; }
.pricing__card--highlighted .pricing__features li {
  border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
}

.pricing__features li::before {
  content: '\2713 ';
  color: var(--color-success);
  font-weight: 700;
  margin-right: var(--space-sm);
}

/* =======================================================================
   TEAM
   ======================================================================= */
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.team__card {
  text-align: center;
}

.team__photo-wrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-md);
}
.team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

.team__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-100);
  color: var(--color-secondary-600);
  font-size: 2.5rem;
  font-weight: var(--font-weight-heading);
}

.team__name {
  margin-bottom: var(--space-xs);
}

.team__role {
  color: var(--color-neutral-500);
  font-size: 0.9rem;
}

/* =======================================================================
   FAQ
   ======================================================================= */
.faq__list {
  max-width: 800px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-neutral-200);
}

.faq__question {
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-neutral-800);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.faq__question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-secondary-500);
  transition: transform var(--transition-base);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

details[open] .faq__question::after {
  content: '\2212';
}

.faq__answer {
  padding-bottom: var(--space-lg);
  color: var(--color-neutral-600);
  line-height: 1.7;
}

/* =======================================================================
   CONTACT
   ======================================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Contact with side photo (Plan: section media): photo column left, form + info
   stacked right. Mobile: photo on top, then form, then info. */
@media (min-width: 768px) {
  .contact__grid--media { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .contact__grid--media > .about__media { grid-row: 1 / span 2; grid-column: 1; height: 100%; }
  .contact__grid--media > .contact__form { grid-column: 2; }
  .contact__grid--media > .contact__info { grid-column: 2; }
  .contact__grid--media > .about__media,
  .contact__grid--media > .about__media .about__image { height: 100%; }
  .contact__grid--media > .about__media .about__image img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-neutral-700);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-neutral-800);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: #fff;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--space-sm);
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}

.form-status {
  padding: var(--space-md);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  display: none;
}

.form-status--success {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-status--error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ── Booking widget (Terminbuchung) ───────────────────────────── */
.booking__widget {
  max-width: var(--bk-width, 600px);
  margin: var(--space-lg) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}
.booking__col { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.booking__col--slots, .booking__col--form { min-width: 0; }
/* Variant 1 "Zwei Spalten": Leistung (2) + Kalender (1) oben, Slots & Formular
   darunter über die volle Breite. Variant 2 "Schrittweise": einspaltig (Base). */
.booking--split .booking__widget {
  max-width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
}
.booking--split .booking__col--select { grid-column: 1; }
.booking--split .booking__col--cal { grid-column: 2; }
.booking--split .booking__col--slots,
.booking--split .booking__col--form { grid-column: 1 / -1; }
/* Kalender links statt rechts (Leistungen behalten den 2er-Anteil). */
.booking--split.booking--rev .booking__widget { grid-template-columns: 1fr 2fr; }
.booking--split.booking--rev .booking__col--select { grid-column: 2; }
.booking--split.booking--rev .booking__col--cal { grid-column: 1; }
/* Kundendaten im Zwei-Spalten-Layout zweispaltig. */
.booking--split .booking__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
.booking--split .booking__span-full { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .booking--split .booking__widget { grid-template-columns: 1fr; max-width: 560px; gap: var(--space-md); }
  .booking--split .booking__col--select,
  .booking--split .booking__col--cal,
  .booking--split.booking--rev .booking__col--select,
  .booking--split.booking--rev .booking__col--cal { grid-column: 1; }
  .booking--split .booking__form { grid-template-columns: 1fr; }
}
.booking__row { display: flex; flex-direction: column; gap: 0.35rem; }
.booking__label { font-size: 0.85rem; font-weight: 600; opacity: 0.85; }
.booking__select,
.booking__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--border-radius);
  font: inherit;
  background: #fff;
  color: #1e293b;
}
/* Slots as an equal-width grid so every time button is the same size. The
   variant (Layer 1) only changes the cell size, so it stays in sync with the
   design engine's theme/spacing tokens. */
.booking__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 0.5rem;
}
.booking__slot {
  padding: 0.55rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--border-radius);
  background: #fff;
  color: #1e293b;
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.booking__slot:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.booking__slot.is-selected { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); }
.booking__hint { font-size: 0.9rem; opacity: 0.7; margin: 0; }
.booking__selected { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.booking__form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-sm); }
.booking__form[hidden] { display: none !important; }
.booking__submit { align-self: flex-start; }
.booking__status { margin-top: var(--space-sm); }
/* Add-on inactive in the editor: the real section stays fully visible &
   configurable; we only add a thin dashed frame + a corner badge. Never shown
   on the published site (publish mode drops the whole section). */
.booking--addon-locked { position: relative; outline: 1px dashed rgba(0,0,0,0.22); outline-offset: -6px; border-radius: var(--border-radius); }
.booking--addon-locked .container { position: relative; }
.booking__addon-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: min(90%, 420px);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  pointer-events: none;
}
@media (max-width: 640px) {
  .booking__addon-badge { position: static; margin: 0 auto var(--space-sm); }
}

/* The widget is a centered, readable form; the section's "Breite" (container
   width, design engine) governs the section itself — no separate width control. */

/* Tile selection (Leistung / Ressource) — alternative to the dropdown */
.booking__select--hidden { display: none; }
.booking__tiles {
  display: grid;
  grid-template-columns: repeat(var(--booking-tile-cols, 3), minmax(0, 1fr));
  gap: 0.6rem;
}
.booking__tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--border-radius);
  background: #fff;
  color: #1e293b;
  font: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.booking__tile:hover { border-color: var(--color-primary-600); }
.booking__tile.is-selected { border-color: var(--color-primary-600); background: var(--color-primary-600); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.booking__tile.is-selected .booking__tile-title { color: #fff; }
.booking__tile.is-selected .booking__tile-sub { color: #fff; opacity: 0.85; }
.booking__tile-title { font-weight: 700; font-size: 0.95rem; }
.booking__tile-sub { font-size: 0.8rem; opacity: 0.6; }
.booking__tile-desc { font-size: 0.78rem; opacity: 0.72; margin-top: 0.2rem; white-space: pre-line; }
.booking__tile.is-selected .booking__tile-desc { color: #fff; opacity: 0.9; }
.booking__widget[data-tile-desc="off"] .booking__tile-desc { display: none; }
.booking__widget[data-tile-desc="clamp"] .booking__tile-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 520px) {
  .booking__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Selected-service description + inclusions */
.booking__service-desc:empty { display: none; }
.booking__service-desc {
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
}
.booking__desc-text { margin: 0 0 0.5rem; font-size: 0.92rem; }
.booking__desc-text:last-child { margin-bottom: 0; }
.booking__desc-list { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.2rem; }
.booking__desc-list li { font-size: 0.88rem; opacity: 0.85; }

/* Always-expanded on-brand calendar */
.booking__cal {
  border: 1px solid rgba(0,0,0,0.12); border-radius: var(--border-radius);
  padding: 0.85rem; background: #fff; width: 100%;
}
/* Step-by-step reveal (variant "Schrittweise") */
.booking__hidden { display: none !important; }
.booking__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.booking__cal-title { font-weight: 700; color: #1e293b; }
.booking__cal-nav { width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #1e293b; cursor: pointer; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.booking__cal-nav:hover:not(:disabled) { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.booking__cal-nav:disabled { opacity: 0.3; cursor: default; }
.booking__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.booking__cal-wd { margin-bottom: 0.25rem; }
.booking__cal-wd span { text-align: center; font-size: 0.72rem; font-weight: 600; opacity: 0.5; color: #1e293b; }
.booking__cal-day { aspect-ratio: 1; border: 1px solid transparent; background: transparent; border-radius: 0.5rem; cursor: pointer; font: inherit; font-weight: 600; color: #1e293b; }
.booking__cal-day:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary-600) 12%, transparent); }
.booking__cal-day.is-today { border-color: var(--color-primary-600); }
.booking__cal-day.is-selected { background: var(--color-primary-600); color: #fff; }
.booking__cal-day.is-past { opacity: 0.3; cursor: default; }

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact__detail strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-neutral-800);
}

.contact__detail p {
  color: var(--color-neutral-600);
}

.contact__hours h3 {
  margin-bottom: var(--space-sm);
  font-size: 1rem;
}

.contact__hours dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  font-size: 0.9rem;
  color: var(--color-neutral-600);
}

.contact__hours dt {
  font-weight: 600;
  color: var(--color-neutral-700);
}

.contact--centered .contact__grid {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Contact Variant 3: Wide form, info below */
.contact--wide .contact__grid {
  grid-template-columns: 1fr;
}

.contact--wide .contact__form {
  grid-template-columns: 1fr 1fr 1fr;
}

.contact--wide .contact__info {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-lg);
}

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

.newsletter .newsletter__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}

.newsletter__form {
  max-width: 540px;
  margin: 0 auto;
}

.newsletter__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: stretch;
}

.newsletter__field {
  flex: 1 1 220px;
}

.newsletter__field input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-neutral-800);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter__field input:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.newsletter__form .btn {
  flex: 0 0 auto;
}

.newsletter__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: 0.8rem;
  opacity: 0.85;
  cursor: pointer;
}

.newsletter__privacy input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.newsletter__form .form-status { margin-top: var(--space-md); }

/* Variant 2: Karte — hervorgehobene Box mit Akzentfläche */
.newsletter--card .container {
  max-width: 760px;
  background: var(--color-primary-50);
  border-radius: var(--border-radius-lg, 1rem);
  padding: var(--space-2xl) var(--space-xl);
}

/* Variant 3: Split — Text links, Formular rechts */
.newsletter--split .newsletter__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.newsletter--split .newsletter__intro {
  text-align: left;
  margin: 0;
}
.newsletter--split .newsletter__form { margin: 0; }

@media (max-width: 768px) {
  .newsletter--split .newsletter__split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .newsletter--split .newsletter__intro { text-align: center; }
}

/* =======================================================================
   FOOTER
   ======================================================================= */
.site-footer {
  background: var(--color-neutral-900);
  color: var(--color-neutral-300);
  padding-top: var(--space-2xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-neutral-700);
}

.footer__logo {
  font-family: var(--font-logo, var(--font-heading));   /* gleiche Schrift wie Logo/Navbar */
  font-size: 1.6rem;
  color: #fff;
}

/* Footer-Markenblock: Anordnung Symbol↔Name wählbar (Logo-Design). */
.footer__brand { display: flex; gap: 0.5rem; }
.footer__brand-text { display: flex; flex-direction: column; min-width: 0; }
.footer__brand--stacked { flex-direction: column; align-items: center; text-align: center; }
.footer__brand--icon-left { flex-direction: row; align-items: center; }
.footer__brand--icon-right { flex-direction: row-reverse; align-items: center; }
.footer__brand--icon-only { flex-direction: column; align-items: flex-start; }
.footer__brand--text-only { flex-direction: column; align-items: flex-start; }

/* 4-Spalten-Footer: Logo GROSS in der linken (Marken-)Spalte. */
.footer__logo-img {
  display: block;
  max-height: 96px;
  width: auto;
  max-width: 300px;
  margin-bottom: 0;        /* Abstand kommt über footer__brand gap (klein) */
  object-fit: contain;
}
/* Markenname dicht am Logo */
.footer__brand .footer__logo { margin-top: 0; }
.footer__brand .footer__tagline { margin-top: 0.15rem; }
.footer__logo-img--badge {
  background: #fff;
  padding: 6px 10px;
  border-radius: 9px;
}

/* Zentrierter Footer: Logo LINKS vom Firmennamen + Beschreibung, auf Texthöhe
   skaliert (wächst mit dem Text mit). */
.footer--centered .footer__centered-brand {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-md);
  text-align: left;
}
.footer--centered .footer__cb-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.footer--centered .footer__cb-logo img {
  height: 100%;
  width: auto;
  max-height: 140px;
  object-fit: contain;
}
.footer--centered .footer__cb-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer--centered .footer__cb-text .footer__logo { display: block; }
.footer--centered .footer__cb-text .footer__tagline { margin-top: var(--space-xs); }
@media (max-width: 600px) {
  .footer--centered .footer__centered-brand { flex-direction: column; align-items: center; text-align: center; }
  .footer--centered .footer__cb-logo img { max-height: 90px; }
}

.footer__tagline {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-neutral-400);
}

.footer__nav h4,
.footer__legal h4,
.footer__social h4 {
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.footer__nav a,
.footer__legal a {
  color: var(--color-neutral-400);
  font-size: 0.9rem;
  display: block;
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.footer__nav a:hover,
.footer__legal a:hover {
  color: #fff;
}

.footer__social-links {
  display: flex;
  gap: var(--space-sm);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--color-neutral-300);
  transition: background var(--transition-fast), color var(--transition-fast), transform 0.2s ease;
}

.footer__social-link:hover {
  background: var(--color-primary-500);
  color: #fff;
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

.footer__bottom {
  padding: var(--space-lg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-neutral-500);
}
.footer__bottom > p { margin: 0; }
.footer__credit { font-size: 0.8rem; color: var(--color-neutral-500); }
.footer__credit a { color: var(--color-neutral-300); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer__credit a:hover { color: #fff; }
.footer__credit-logo { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAHyklEQVR4nLVXfYwdVRWf1hZEWsBu3z1nXhtoFEWhCEIMKjYFRCPhI/xha4OYSAJ/qVGiSUXFVUvTFNrum3tn7uzb3W6/FTclaYw2EGMWaCpBG/8w1dqydPfNvfNm5r393u72Y9/uNWfevHZLaXcxcpObuTP3nnN+c87vnHuvZV2mGWPNo56Om635llUfz7VlMhfpmbuwVRfo9WGFFuxLDUVzAUGyDePKhXtKTu6TM+TnYNzUF8YFBpEHx8Y7bVNyYAspbm625jfAXVY+M15yYMPYdttEEt4N/CXL5gzCdFkfSQH4+OJQG5rYg//UdueNFrAtnV9Tn7+SbODAxsndeZLtGSyiibxMNpuf9e+rHU2LEwmVyIMDR5utqxKJ3bU9eRMI+EG6rmgtJGX0t2mncdFaSHN9nD1zdpdtEgl/e+0luDbyYG/k4mDi5hbN6gWTIYwkPDCxwzaxZI/Re28LrKhI7O1vRVPaxh6c6eqZ4z6eu7ciYbIqoXyyJX8LfatIfGiiM29i3/7arF4w2WTowguhC2dOFZfajbnIgUcppomEEwGHrdqFg4rDIS3gTe3CqwGHQiLh3xPEGRfWkkwXecay5pUFvNnv46YM7IJZAZRdeFUL6Gn8HXkkjS2HIoEYabdrI+22Gcr6cLttRtvt2miHbZQD+xr6AsFuD4T9hOlafk1Y+PiNVySwmTGpBfxLCTjUeC97uEl70BZy9ngsbaMETFLXHGuaQ03V+7lqKxJZ15GM4vDTWMIIAdYc/k5g3hu6iwFk5Djh3Hy1FqAVZ39ozIUC1p/emTehiyNaYE0JnNaCjF3oimONOKI5vD7Ucv0Ng0VUlAGKs4npvXkzXLS3XDEEZkYGKA79WsCf6D2W7OlI4lToYm18e97QH4UuTgf8AgjFcToUMEmGJjrtt0dEvmmwiEHFt03AYfzsrrwZasPCnAD071lynRIwrAT+OfTtexOJk0Nttqn4eEo58FvF2e8SCROJrBtWHKZjiUTO04FgfwyF/ZzpXr2A6kbiEWibQMYlkWXBbCGobm5arAT2agGDlVbsJWJFLvZEHtyvvdyXY8k+oVrgnrIHQ2UXyRsmcmG87OHqyIcVobRXhUX7YykPHLhfcXih31lynXaWfv7Y5qbFlyehqQOgghEIODZYtE3k0R/iqVDC+tDFw2bfMjPakTc9BfZVzfF5AjfcjkYJtvnkVlw9ULSnp/bmTSjg3dC1v9LQHTiwK/IwNrvh2vcS/pIU1A6srfholIO1yKUnhLGHSSjwaF8L+2XswfHRDvvlPge/Q6Q7td02JQ7fGu3AfYmHvUGBPa8FHEkknAkc/AbpjDx4juqD4uzJmbYuGM8QdTdbCyIP36qzN02tqaqPJpZwPGhhj9OasGDfGHL4fiBw03AbGupKwAbN2Y8pPLSmT8AjsQfHKj4M9bbgZ+lb1YfXKxJ7upqtq2batBoVi56RBw8TocoCa2UXSDEBIaLVEg/GQw6/Vpz9TIuln45cOEZrYw9M2YUe5S/7lHbwJ9pJvTSmHDg3VEzBp/UkFPZd/a3Ep6VrL/GCaVRAD3ec3Zk3VR8HFIcxIpniQMWF8rs2vSdvBtvglVDABsoMLSAtRLRrUvkeLOLvDXHAhcmwDn6SqmTssR+S/tiD/YkHB2lMW3vdeEa+o25uUSJRRx6+ExTgKS1gJPJSAGmq0Thyoaw4Pln1cSitcFQNBZwjMg604mjosm9HHpRiknNgWguYqm/peDLYuvyahOfuoDD0ttx0w3nbJkMy1r7sc4kE9c+NDCo+PkvkItfXCw3UxigdPfhVxcd9pDQQ8L1IwsqgACsDhz1dkWgqPuyPJKyntQRaczitOByn88RAm/0M2al4sLvqw30pgGZr/nkAlDaRyK3JXHWQNhtyoRI4FXlpCIYrHjyc+MRu1p0qsKx5Df5oAa8RYSsSHtEcQ8okCkPI7VVKwJbEwwMpzzg8UHZw9XkAjXbQuflqOnzQOPLgUHaSmSy7WBtsSzeZN0ba84/WKyBLtIC3aIOJXLhNC/a24lA+1Wmb4Q7761qwv1B9SHykEvxN0qlE030UBjLa23zTR633PUx2ZdngwkGKcSwxiiX0E5EUh7/Gkn2xv4hnKARVH5PSNriNQtDfaicDrbYZbrNNVdp3K9qQ2mxT9sgj9irS2ZUd5a64JXdnG0Us8RdmX57c/t2KRJHx4VxcZLcrAb+hFCX3UgEKBHtCc0rFtCK+GHL7M1rg2ECR9gc8eiQry1c6S1qXHK0cvDWRUErcHAYSVtJGU/XJI3CkJJrydNzSbu5OOu2m7zx3h5b5WyIJLHLhMIVpsJ6mT83pMPp+rdTCHhveunwJjYn95FLyRLUVdp1wMKc5e0MJmAp42g//Y+OiXL8PRVpD8S+7rJNkP/ClJGvpbSaLV/rUHPZSZtBZoCxwk27J3RkUYJ0uwDrymBbs52UXp0bSzQkOdO+wUqLNdo+4bDt/LcsAHCnevbDksE4qOgQk4FAKOOxXAl/WHN6hb0TcgLOdpiur9//j31/SUm80rluC/SgUMDbemTcjHfY09dM78rR1j/UW2LPperor/L+MXwQiI1PfS0tuDRzWpQSc0RzOBg68QvUgXbemfhS3PoxmZlw8qYVi6V1BAb/QeM9y/cMxfhGQ7Ep2ufcP0v4LO/U/aGFtoagAAAAASUVORK5CYII=) center/contain no-repeat; }
.footer__minimal-copy .footer__credit a { color: var(--color-neutral-400); }
/* Plan 82 — Pflicht-Bildnachweis (Unsplash/Pexels) */
.footer__photo-credits-bar { padding-top: var(--space-sm); padding-bottom: var(--space-sm); border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.footer__photo-credits { font-size: 0.72rem; line-height: 1.5; color: var(--color-neutral-500); }
.footer__photo-credits a { color: var(--color-neutral-400); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.footer__photo-credits a:hover { color: var(--color-neutral-200); }

/* Footer Variant 2: Centered */
.footer--centered .footer__centered-inner {
  text-align: center;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-neutral-700);
}

.footer--centered .footer__centered-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.footer--centered .footer__centered-links a {
  color: var(--color-neutral-400);
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}

.footer--centered .footer__centered-links a:hover {
  color: #fff;
}

/* Footer Variant 3: Minimal */
.footer--minimal {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.footer__minimal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__minimal-copy {
  font-size: 0.85rem;
  color: var(--color-neutral-400);
}

/* =======================================================================
   WHATSAPP FLOATING BUTTON
   ======================================================================= */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* =======================================================================
   LIVE CHAT WIDGET (Add-on "livechat") — adapts to the design engine
   ======================================================================= */
.chat-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 901; font-family: var(--font-body), sans-serif; }
.chat-widget--stacked { right: 5.5rem; } /* sit left of the WhatsApp button (side by side) */
.chat-float {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border: none; border-radius: 50%;
  background: var(--color-primary-500); color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chat-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.chat-widget--locked .chat-float { opacity: 0.5; filter: grayscale(0.95); cursor: default; }
.chat-float__badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--color-success, #22c55e); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 5px; border-radius: 999px; line-height: 1; box-shadow: 0 0 0 2px #fff;
}
.chat-float__lock { position: absolute; bottom: -2px; right: -2px; font-size: 14px; }
.chat-box {
  position: absolute; bottom: 70px; right: 0;
  width: min(340px, calc(100vw - 3rem)); height: min(460px, calc(100vh - 8rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--color-body);
  border-radius: var(--border-radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,0.25));
  border: 1px solid var(--color-neutral-200, #e5e7eb);
}
.chat-box[hidden] { display: none; }
.chat-box__header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--color-primary-500); color: #fff; }
.chat-box__title { font-weight: 700; font-family: var(--font-heading), sans-serif; flex: 1; }
.chat-box__status { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); flex: 0 0 auto; }
.chat-box__status[data-status="on"] { background: var(--color-success, #22c55e); box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.chat-box__close { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .85; }
.chat-box__close:hover { opacity: 1; }
.chat-box__end { background: rgba(255,255,255,.18); border: none; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; cursor: pointer; opacity: .9; }
.chat-box__end:hover { opacity: 1; }
.chat-note { align-self: center; text-align: center; font-size: .78rem; color: var(--color-neutral-500, #6b7280); padding: .4rem .6rem; }
.chat-note-btn { align-self: center; margin-top: .2rem; background: var(--color-primary-500); color: #fff; border: none; font-size: .8rem; font-weight: 600; padding: .45rem .9rem; border-radius: var(--border-radius, 8px); cursor: pointer; }
.chat-note-btn:hover { background: var(--color-primary-600, var(--color-primary-500)); }
.chat-box__body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; }
.chat-box__start { display: flex; flex-direction: column; gap: .6rem; margin: auto 0; }
.chat-box__start[hidden] { display: none; } /* the class display:flex would otherwise override the hidden attribute */
.chat-box__intro { font-size: .95rem; line-height: 1.4; margin: 0 0 .25rem; }
.chat-box__start input { padding: .6rem .75rem; border: 1px solid var(--color-neutral-300, #d1d5db); border-radius: var(--border-radius, 8px); font: inherit; }
.chat-box__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.chat-box__start-btn, .chat-box__send { background: var(--color-primary-500); color: #fff; border: none; cursor: pointer; border-radius: var(--border-radius, 8px); font: inherit; font-weight: 600; }
.chat-box__start-btn { padding: .6rem .75rem; }
.chat-box__start-btn:hover, .chat-box__send:hover { background: var(--color-primary-600, var(--color-primary-500)); }
.chat-box__consent { font-size: .72rem; color: var(--color-neutral-500, #6b7280); margin: .25rem 0 0; line-height: 1.35; }
.chat-box__consent a { color: var(--color-primary-600, var(--color-primary-500)); }
.chat-box__messages { display: flex; flex-direction: column; gap: .5rem; }
.chat-box__messages[hidden] { display: none; }
.chat-msg { max-width: 80%; padding: .5rem .7rem; border-radius: 14px; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-msg--visitor { align-self: flex-end; background: var(--color-primary-500); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--agent { align-self: flex-start; background: var(--color-neutral-100, #f3f4f6); color: var(--color-body); border-bottom-left-radius: 4px; }
.chat-box__compose { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--color-neutral-200, #e5e7eb); }
.chat-box__compose[hidden] { display: none; }
.chat-box__input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--color-neutral-300, #d1d5db); border-radius: 999px; font: inherit; }
.chat-box__send { width: 40px; flex: 0 0 40px; border-radius: 50%; padding: 0; }
@media (max-width: 480px) {
  /* Re-anchor the box to the viewport so it never slides off-screen. */
  .chat-box { position: fixed; left: 1rem; right: 1rem; bottom: 5rem; width: auto; height: min(60vh, 460px); }
}

/* =======================================================================
   COOKIE BANNER
   ======================================================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  padding: var(--space-lg) 0;
}

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.cookie-banner__text {
  font-size: 0.9rem;
  color: var(--color-neutral-600);
  line-height: 1.6;
}

.cookie-banner__text a {
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* =======================================================================
   LEGAL PAGES
   ======================================================================= */
.legal {
  padding-top: calc(var(--space-3xl) + 60px);
}

.legal h1 {
  margin-bottom: var(--space-xl);
}

.legal__list dt {
  font-weight: 700;
  margin-top: var(--space-lg);
  color: var(--color-neutral-800);
}

.legal__list dd {
  color: var(--color-neutral-600);
  margin-top: var(--space-xs);
}

.legal__content {
  color: var(--color-neutral-600);
  line-height: 1.8;
}

.legal__content h2 {
  font-size: 1.25rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal__content p {
  margin-bottom: var(--space-md);
}

/* =======================================================================
   GLOBAL IMAGE STYLING — applies to ALL images inside sections
   ======================================================================= */
/* Global image styling */
section img:not(.nav__logo-img) {
  border-radius: var(--img-radius);
  box-shadow: var(--img-shadow);
  transition: transform var(--transition-slow), filter var(--transition-slow), box-shadow var(--transition-slow);
}
/* All image containers: overflow hidden so zoom stays WITHIN the frame */
.about__image,
.gallery__item,
.gallery__masonry-item,
.gallery__carousel-item,
.hero,
.hero--split,
.team__card,
.team__card--boxed {
  overflow: hidden;
}

/* Hover helper — gallery items need the container to scale so image grows beyond frame */
.gallery__item,
.gallery__masonry-item,
.gallery__carousel-item {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), filter var(--transition-slow);
}

/* Hover effect — zooms on img within overflow:hidden container */
section img:not(.nav__logo-img):hover { box-shadow: var(--img-shadow), 0 0 25px 5px rgba(37,99,235,0.3); }

/* =======================================================================
   RESPONSIVE — Tablet (≥ 768px)
   ======================================================================= */
@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: var(--testimonial-cols, repeat(2, 1fr));
  }

  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits__grid,
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__grid {
    grid-template-columns: 1.5fr 1fr;
  }

  .contact__form {
    grid-template-columns: 1fr 1fr;
  }

  .form-group--full {
    grid-column: 1 / -1;
  }

  .footer__grid {
    grid-template-columns: var(--footer-cols, 2fr 1fr 1fr 1fr);
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =======================================================================
   RESPONSIVE — Desktop (≥ 1024px)
   ======================================================================= */
@media (min-width: 1024px) {
  /* Column counts come from the inline --grid-cols custom property (set per
     section), falling back to the prior defaults. Using a variable instead of an
     inline grid-template-columns keeps the mobile/tablet rules above in control —
     inline column rules used to win over media queries → 3-col grids on phones
     and horizontal scroll (Plan §16 "kein Horizontal-Scroll auf Mobile"). */
  .services__grid {
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  }

  .overlay-grid {
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  }

  .testimonials__grid {
    grid-template-columns: var(--testimonial-cols, repeat(3, 1fr));
  }

  .pricing__grid {
    /* minmax(0,1fr) statt 1fr → Spalten dürfen UNTER den Mindest-Inhalt schrumpfen,
       sonst läuft die Reihe bei vielen Paketen (z.B. 5) rechts über. */
    grid-template-columns: repeat(var(--pricing-cols, 3), minmax(0, 1fr));
  }

  .team__grid {
    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
  }

  .benefits__grid {
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  }

  .process__grid {
    grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr));
  }

  .container {
    padding-inline: var(--space-lg);
  }

  .faq__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__masonry {
    columns: 3;
  }

  .gallery__grid {
    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
  }

  .gallery__mosaic {
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  }
}

/* Few-item grids (1–2 cards) center instead of stranding a lone card in the
   left of an empty multi-col track (Plan 18 robustness — a customer may keep
   only 1–2 testimonials/packages). Non-fr tracks let justify-content actually
   center; attribute specificity (0,2,0) beats the column rules above (0,1,0). */
@media (min-width: 768px) {
  .services__grid[data-count="1"], .testimonials__grid[data-count="1"],
  .pricing__grid[data-count="1"], .team__grid[data-count="1"] {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
  }
  .services__grid[data-count="2"], .testimonials__grid[data-count="2"],
  .pricing__grid[data-count="2"], .team__grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 26rem));
    justify-content: center;
  }
}

/* =======================================================================
   RESPONSIVE — Mobile (< 768px)
   ======================================================================= */
@media (max-width: 767px) {
  .nav__hamburger {
    display: flex;
  }

  .nav--logo-center,
  .nav--menu-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav__links,
  .nav__links--left,
  .nav__links--right,
  .nav__links--center {
    position: fixed;
    inset: 0;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 1000;
    padding-left: 0;
  }

  .nav__links--open {
    transform: translateX(0);
  }

  .nav--logo-center .nav__cta {
    display: none;
  }

  .nav__link {
    font-size: 1.25rem;
  }

  .hero {
    min-height: 80vh;
  }

  .faq__two-col-item {
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   PER-SECTION IMAGE OVERRIDES (generated from config)
   ======================================================================= */
#hero img:not(.nav__logo-img):hover { transform: scale(1.08) !important; filter: none !important; }

/* =======================================================================
   DESIGN STYLE OVERRIDES
   ======================================================================= */

      :root { --border-radius: 20px; --border-radius-lg: 28px; --space-2xl: 4.5rem; }
      body { line-height: 1.75; }
      .btn { border-radius: 999px; padding: 0.85rem 2rem; }
      .btn--lg { padding: 1.1rem 2.5rem; }
      .services__card { border-radius: 24px; border: 2px solid var(--color-primary-100); }
      .services__card:hover { border-color: var(--color-primary-300); transform: translateY(-6px) rotate(-1deg); }
      .testimonials__card { border-radius: 24px; }
      h2 { color: var(--color-primary-600); }
    

/* =======================================================================
   ONLINE-SHOP (Plan 52) — Grid-Container-Layout
   -----------------------------------------------------------------------
   MUSS im Basis-Stylesheet stehen, nicht nur via js/shop.js injiziert:
   shop.js wird ausschliesslich bei aktivem Shop geladen (config.shopEnabled).
   In der Editor-Vorschau ist der Shop meist noch nicht freigeschaltet → ohne
   diese Regeln fehlt display:grid, und Teaser-Kacheln bzw. Shop-Karten
   stapeln einspaltig ueber die volle Breite. Werte 1:1 identisch zu renderShopJS.
   ======================================================================= */
.shop-teaser__cats{display:grid;gap:var(--shop-gap,1rem);margin:2rem 0;grid-template-columns:1fr}
@media(min-width:560px){.shop-teaser__cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.shop-teaser__cats{grid-template-columns:var(--shop-tracks,repeat(auto-fill,minmax(180px,1fr)))}}
.shop-grid{display:grid;gap:1.5rem;margin:1.5rem 0;grid-template-columns:1fr}
@media(min-width:560px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.shop-grid{grid-template-columns:var(--shop-tracks,repeat(auto-fill,minmax(220px,1fr)))}}
/* Plan 71: schöner Lade-Zustand (Skeleton) statt „wird geladen…"-Text */
.shop-skel{display:grid;gap:1.5rem;margin:1.5rem 0;grid-template-columns:1fr}
@media(min-width:560px){.shop-skel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.shop-skel{grid-template-columns:var(--shop-tracks,repeat(auto-fill,minmax(220px,1fr)))}}
.shop-skel__card{border-radius:var(--border-radius-lg,14px);height:290px;background:linear-gradient(100deg,var(--color-neutral-100,#f1f1f4) 25%,var(--color-neutral-200,#e6e7eb) 45%,var(--color-neutral-100,#f1f1f4) 65%);background-size:220% 100%;animation:shopSkel 1.3s ease-in-out infinite}
@keyframes shopSkel{0%{background-position:220% 0}100%{background-position:-220% 0}}

/* =======================================================================
   SECTION THEMES (Plan 18, Layer 3) — emitted last so they win on ties
   ======================================================================= */

.section-theme--light {
  background: #ffffff;
  color: var(--color-neutral-800);
  overflow-x: clip;
}
.section-theme--light .section__title,
.section-theme--light h2, .section-theme--light h3, .section-theme--light h4 { color: var(--color-neutral-900); }
.section-theme--light p, .section-theme--light li { color: var(--color-neutral-800); }
.section-theme--light .section__subtitle { color: var(--color-neutral-600); }
.section-theme--light a:not(.btn) { color: var(--color-primary-700); }
.section-theme--light .section__kicker { color: var(--color-primary-700); }
.section-theme--light .section__title::after { background: var(--color-neutral-200); }
.section-theme--light .menu__cat-title { color: var(--color-neutral-900); border-bottom-color: var(--color-neutral-200); }
.section-theme--light .menu__item-name { color: var(--color-neutral-800); }
.section-theme--light .menu__cat-desc, .section-theme--light .menu__item-desc { color: var(--color-neutral-600); }
.section-theme--light .menu__price { color: var(--color-primary-700); }
.section-theme--light .menu__item { border-bottom-color: var(--color-neutral-200); }
.section-theme--light .menu__dots { border-bottom-color: var(--color-neutral-200); }
.section-theme--light .menu__card { border-color: var(--color-neutral-200); background: #ffffff; }
.section-theme--light .menu__card .menu__item-name { color: var(--color-neutral-900); }
.section-theme--light .menu__card .menu__item-desc { color: var(--color-neutral-700); }
/* Foto-Overlay-Kacheln (services/gallery/team) liegen IMMER auf einem Bild mit
   dunklem Scrim → Text bleibt weiß, egal welches Theme (sonst färbt die h3/p-Regel
   oben den Titel in die Akzentfarbe und den Text dunkel = unlesbar, Plan 59-Fix). */
.section-theme--light .overlay-tile__title, .section-theme--light .overlay-tile__icon { color: #fff; -webkit-text-fill-color: #fff; }
.section-theme--light .overlay-tile__text { color: rgba(255,255,255,.92); }

.section-theme--muted {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
  overflow-x: clip;
}
.section-theme--muted .section__title,
.section-theme--muted h2, .section-theme--muted h3, .section-theme--muted h4 { color: var(--color-neutral-900); }
.section-theme--muted p, .section-theme--muted li { color: var(--color-neutral-800); }
.section-theme--muted .section__subtitle { color: var(--color-neutral-600); }
.section-theme--muted a:not(.btn) { color: var(--color-primary-700); }
.section-theme--muted .section__kicker { color: var(--color-primary-700); }
.section-theme--muted .section__title::after { background: var(--color-neutral-200); }
.section-theme--muted .menu__cat-title { color: var(--color-neutral-900); border-bottom-color: var(--color-neutral-200); }
.section-theme--muted .menu__item-name { color: var(--color-neutral-800); }
.section-theme--muted .menu__cat-desc, .section-theme--muted .menu__item-desc { color: var(--color-neutral-600); }
.section-theme--muted .menu__price { color: var(--color-primary-700); }
.section-theme--muted .menu__item { border-bottom-color: var(--color-neutral-200); }
.section-theme--muted .menu__dots { border-bottom-color: var(--color-neutral-200); }
.section-theme--muted .menu__card { border-color: var(--color-neutral-200); background: #ffffff; }
.section-theme--muted .menu__card .menu__item-name { color: var(--color-neutral-900); }
.section-theme--muted .menu__card .menu__item-desc { color: var(--color-neutral-700); }
/* Foto-Overlay-Kacheln (services/gallery/team) liegen IMMER auf einem Bild mit
   dunklem Scrim → Text bleibt weiß, egal welches Theme (sonst färbt die h3/p-Regel
   oben den Titel in die Akzentfarbe und den Text dunkel = unlesbar, Plan 59-Fix). */
.section-theme--muted .overlay-tile__title, .section-theme--muted .overlay-tile__icon { color: #fff; -webkit-text-fill-color: #fff; }
.section-theme--muted .overlay-tile__text { color: rgba(255,255,255,.92); }

.section-theme--gradient {
  background: linear-gradient(180deg, var(--color-primary-600), var(--color-primary-900));
  color: #ffffff;
  overflow-x: clip;
}
.section-theme--gradient .section__title,
.section-theme--gradient h2, .section-theme--gradient h3, .section-theme--gradient h4 { color: #ffffff; }
.section-theme--gradient p, .section-theme--gradient li { color: #ffffff; }
.section-theme--gradient .section__subtitle { color: color-mix(in srgb, #fff 92%, transparent); }
.section-theme--gradient a:not(.btn) { color: #ffffff; }
.section-theme--gradient .section__kicker { color: #ffffff; }
.section-theme--gradient .section__title::after { background: color-mix(in srgb, #fff 22%, transparent); }
.section-theme--gradient .menu__cat-title { color: #ffffff; border-bottom-color: color-mix(in srgb, #fff 22%, transparent); }
.section-theme--gradient .menu__item-name { color: #ffffff; }
.section-theme--gradient .menu__cat-desc, .section-theme--gradient .menu__item-desc { color: color-mix(in srgb, #fff 92%, transparent); }
.section-theme--gradient .menu__price { color: #ffffff; }
.section-theme--gradient .menu__item { border-bottom-color: color-mix(in srgb, #fff 22%, transparent); }
.section-theme--gradient .menu__dots { border-bottom-color: color-mix(in srgb, #fff 22%, transparent); }
.section-theme--gradient .menu__card { border-color: color-mix(in srgb, #fff 22%, transparent); background: color-mix(in srgb, #000 22%, transparent); }
.section-theme--gradient .menu__card .menu__item-name { color: #ffffff; }
.section-theme--gradient .menu__card .menu__item-desc { color: #ffffff; }
/* Foto-Overlay-Kacheln (services/gallery/team) liegen IMMER auf einem Bild mit
   dunklem Scrim → Text bleibt weiß, egal welches Theme (sonst färbt die h3/p-Regel
   oben den Titel in die Akzentfarbe und den Text dunkel = unlesbar, Plan 59-Fix). */
.section-theme--gradient .overlay-tile__title, .section-theme--gradient .overlay-tile__icon { color: #fff; -webkit-text-fill-color: #fff; }
.section-theme--gradient .overlay-tile__text { color: rgba(255,255,255,.92); }
/* Auf dunklen Sektionen NICHT die globale --color-heading (dunkel) verwenden —
   sonst ist die Überschrift dunkel auf dunkel (unsichtbar). Der Theme-eigene,
   kontrastgeprüfte headingColor (hell) gewinnt (Plan 59-Fix, gilt für alle Seiten). */
.section-theme--gradient .section__title, .section-theme--gradient h2, .section-theme--gradient h3, .section-theme--gradient h4 {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}
.section-theme--gradient .services__card,
.section-theme--gradient .testimonials__card,
.section-theme--gradient .pricing__card,
.section-theme--gradient .team__card,
.section-theme--gradient .faq__item,
.section-theme--gradient .faq__card {
  background: color-mix(in srgb, #000 22%, transparent);
  color: #ffffff;
  border-color: color-mix(in srgb, #fff 22%, transparent);
  box-shadow: none;
}
.section-theme--gradient .services__card-title,
.section-theme--gradient .services__card h3,
.section-theme--gradient .pricing__card h3,
.section-theme--gradient .team__name,
.section-theme--gradient .testimonials__name,
.section-theme--gradient .testimonials__author-meta strong,
.section-theme--gradient .faq__card-q,
.section-theme--gradient .faq__question { color: #ffffff; }
.section-theme--gradient .services__card-text,
.section-theme--gradient .services__card p,
.section-theme--gradient .testimonials__quote,
.section-theme--gradient .testimonials__card p,
.section-theme--gradient .faq__answer,
.section-theme--gradient .faq__card-a,
.section-theme--gradient .team__role,
.section-theme--gradient .pricing__features li { color: #ffffff; }
.section-theme--gradient .pricing__price,
.section-theme--gradient .about__stat-value { color: #ffffff; }
.section-theme--gradient .about__stat-label,
.section-theme--gradient label,
.section-theme--gradient .testimonials__author-meta span,
.section-theme--gradient .pricing__row-desc,
.section-theme--gradient .pricing__period { color: color-mix(in srgb, #fff 92%, transparent); }
.section-theme--gradient .btn--primary {
  background: #ffffff;
  color: #740c40;
  border-color: #ffffff;
}
.section-theme--gradient input, .section-theme--gradient textarea, .section-theme--gradient select {
  background: color-mix(in srgb, #fff 7%, transparent);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  color: #ffffff;
}
.section-theme--gradient input::placeholder, .section-theme--gradient textarea::placeholder { color: color-mix(in srgb, #fff 92%, transparent); }
.section-theme--gradient .map-embed { background: color-mix(in srgb, #000 22%, transparent); }
.section-theme--gradient .map-embed__placeholder::before { opacity: .22; background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.10) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.10) 38px 40px),
    color-mix(in srgb, #000 22%, transparent); }
.section-theme--gradient .map-embed__hint { color: #ffffff; }

/* ---- Section Dividers (Plan 18, Layer 2) ---- */
.has-divider {
  --divider-h: 64px;
  margin-top: calc(-1 * var(--divider-h));
  padding-top: calc(var(--space-2xl) + var(--divider-h));
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% calc(100% - var(--divider-h) + 1px) no-repeat, var(--divider-shape) top / 100% var(--divider-h) no-repeat;
          mask: linear-gradient(#000, #000) bottom / 100% calc(100% - var(--divider-h) + 1px) no-repeat, var(--divider-shape) top / 100% var(--divider-h) no-repeat;
}
.has-divider--wave { --divider-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20transform%3D%22matrix(1%200%200%20-1%200%2060)%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C28%20C950%2C64%20760%2C6%20600%2C30%20C440%2C54%20250%2C4%200%2C30%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.has-divider--curve { --divider-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20transform%3D%22matrix(1%200%200%20-1%200%2060)%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C16%20Q600%2C66%200%2C16%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.has-divider--diagonal { --divider-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20transform%3D%22matrix(1%200%200%20-1%200%2060)%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C10%20L0%2C60%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.has-divider--zigzag { --divider-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20transform%3D%22matrix(1%200%200%20-1%200%2060)%22%3E%3Cpath%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C32%20L1140%2C52%20L1080%2C32%20L1020%2C52%20L960%2C32%20L900%2C52%20L840%2C32%20L780%2C52%20L720%2C32%20L660%2C52%20L600%2C32%20L540%2C52%20L480%2C32%20L420%2C52%20L360%2C32%20L300%2C52%20L240%2C32%20L180%2C52%20L120%2C32%20L60%2C52%20L0%2C32%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
/* gradient-fade — soft alpha mask: real background fades transparent → opaque over
   a taller band, so a photo/gradient/decoration flows up instead of a solid band. */
.has-divider--gradient-fade { --divider-h: 120px; --divider-shape: linear-gradient(to bottom, transparent, #000); }
/* dots — standalone decorative dotted line over the previous section. */
.section-divider { position: relative; z-index: 2; line-height: 0; pointer-events: none; background: transparent; }
.section-divider--dots { height: 56px; margin-top: -56px; display: flex; align-items: center; }
.section-divider__dotline { display: block; width: 100%; height: 6px; background-repeat: repeat-x; background-position: center; background-size: 20px 6px; }
@media (max-width: 640px) {
  .has-divider { --divider-h: 40px; }
  .has-divider--gradient-fade { --divider-h: 72px; }
  .section-divider--dots { height: 40px; margin-top: -40px; }
}

/* ---- Section Decorations (Plan 18, Layer 4) ---- */
[data-section-theme] > .container { position: relative; z-index: 1; }
.section-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deco-blob { position: absolute; width: calc(var(--b-size, 42vw) * var(--deco-scale, 1)); max-width: calc(560px * var(--deco-scale, 1)); aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: 0.18; will-change: transform; }
.deco-blob--1 { background: var(--color-primary-400); top: var(--b-top, -14%); right: var(--b-right, -8%); }
.deco-blob--2 { background: var(--color-secondary-400); bottom: var(--b-bottom, -16%); left: var(--b-left, -10%); }
.section-deco--dots { background-image: radial-gradient(circle, color-mix(in srgb, var(--color-primary-300) 55%, transparent) 1.4px, transparent 1.4px); background-size: calc(24px * var(--deco-scale, 1)) calc(24px * var(--deco-scale, 1)); opacity: 0.55; }
.section-deco--grid { background-image: linear-gradient(color-mix(in srgb, var(--color-primary-200) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-primary-200) 70%, transparent) 1px, transparent 1px); background-size: calc(58px * var(--deco-scale, 1)) calc(58px * var(--deco-scale, 1)); opacity: 0.5; }
.section-deco--glow::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(65% * var(--deco-scale, 1)); height: calc(130% * var(--deco-scale, 1)); background: radial-gradient(ellipse, color-mix(in srgb, var(--color-primary-500) 22%, transparent) 0%, transparent 70%); }
.section-deco--lines::before, .section-deco--lines::after { content: ''; position: absolute; left: 8%; right: 8%; height: 1px; background: color-mix(in srgb, var(--color-primary-300) 55%, transparent); }
.section-deco--lines::before { top: 0; } .section-deco--lines::after { bottom: 0; }
@media (max-width: 640px) { .deco-blob { filter: blur(60px); opacity: 0.14; } }
@media (prefers-reduced-motion: reduce) { .deco-blob { animation: none !important; } }

/* ---- Container widths (Plan 18, Layer 1) ---- */
[data-container="narrow"] > .container { max-width: 900px; }
[data-container="wide"] > .container { max-width: 1320px; }
[data-container="full"] > .container { max-width: 100%; }

/* ---- Section kickers (Plan 18, Phase 6) ---- */
.section__kicker { display: inline-block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-600); margin-bottom: 0.85rem; }
.section__kicker--center { display: block; text-align: center; }

/* ---- Icon treatment: verspielt (Plan 18 §6) ---- */
.services__icon { background: var(--color-secondary-600); color: #fff; border-radius: 50%; }

/* ---- Print (Plan 18, Phase 8) ---- */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; transform: none !important; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
  /* Drop chrome + atmosphere that wastes ink and means nothing on paper. */
  .nav, .wa-float, .chat-widget, .cookie-banner, .section-divider, .section-deco, .deco-blob { display: none !important; }
  /* Drop the shaped-edge mask + overlap pull-up so sections print as plain blocks. */
  .has-divider { -webkit-mask: none !important; mask: none !important; margin-top: 0 !important; }
  /* Force every section to a plain light background with dark text. */
  section, [data-section-theme] { background: #fff !important; color: #000 !important; padding: 1.2rem 0 !important; }
  [data-section-theme] h1, [data-section-theme] h2, [data-section-theme] h3, .section__title, .section__kicker { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; }
  .services__card, .pricing__card, .testimonials__card, .team__card, .faq__item { border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; break-inside: avoid; page-break-inside: avoid; }
  section, .section__title { break-after: avoid; }
  a { color: #000 !important; text-decoration: underline; }
  img { max-width: 100% !important; }
}

/* =======================================================================
   NAVBAR — Umbruch aufs Menü, aus der Breite DIESER Navbar berechnet
   ======================================================================= */
@media (max-width: 1302px) {
  .nav__hamburger { display: flex; }
  .nav--logo-center,
  .nav--menu-center { display: flex; justify-content: space-between; align-items: center; }
  .nav__links,
  .nav__links--left,
  .nav__links--right,
  .nav__links--center {
    position: fixed;
    inset: 0;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 1000;
    padding-left: 0;
  }
  .nav__links--open { transform: translateX(0); }
  .nav--logo-center .nav__cta { display: none; }
  .nav__link { font-size: 1.25rem; }
}