/* =====================================================================
   HAUPTSTADT MEDIEN — Design System & Stylesheet  (v4 · Mono + Rot)
   Werbeagentur · Speisekarten-Manufaktur · Webdesign Berlin
   ---------------------------------------------------------------------
   Schwarz-weißes Theme: neutrales Near-Black, weiße Schrift,
   Marken-Rot (#d6202c, aus dem Logo) als einziger Akzent.
   ===================================================================== */

/* ============================ 1. TOKENS ============================= */
:root {
  /* Monochrome Palette + Marken-Rot als Akzent (Logo-Rot #d6202c) */
  --c-bg:        #0e0e10;   /* Base — neutrales Near-Black            */
  --c-surface:   #151517;   /* Alternierende Sektion                 */
  --c-surface-2: #222226;   /* Tiefere Fläche / Hover                */
  --c-panel:     #18181b;   /* Karten, Formular, Dropdown, Galerie   */
  --c-panel-2:   #242429;   /* Karten-Hover / erhabene Flächen       */
  --c-deep:      #08080a;   /* Tiefster Ton (Footer, CTA)            */
  --c-line:      #2b2b30;   /* Hauchdünne Rahmen / Trennlinien       */

  --c-ink:       #f5f5f6;   /* Primärtext (Weiß)                     */
  --c-ink-soft:  #bcbcc2;   /* Sekundärtext (Hellgrau)               */
  --c-muted:     #86868d;   /* Tertiärtext (Grau)                    */
  --c-on-ink:    #f5f5f6;

  --c-accent:    #d6202c;   /* Marken-Rot                            */
  --c-accent-dk: #f04652;   /* Helleres Rot — Text/Links auf Dunkel  */
  --c-accent-lt: #ff5d67;   /* Rot hell                              */
  --c-accent-sft: rgba(214,32,44,.16); /* Translucentes Rot          */
  --c-ember:     #d6202c;
  --c-success:   #4ccf8e;
  --c-error:     #ff6b6b;

  /* Verläufe (rot bzw. neutral) */
  --grad-gold:  linear-gradient(135deg, #ec3b46 0%, #d6202c 50%, #a3121b 100%);
  --grad-warm:  linear-gradient(135deg, #ec3b46 0%, #a3121b 130%);
  --grad-text:  linear-gradient(100deg, #f04652 0%, #ff8088 50%, #f04652 100%);
  --grad-ink:   linear-gradient(165deg, #18181b 0%, #08080a 100%);

  /* Typografie */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.04rem;
  --fs-md:   1.18rem;
  --fs-lg:   1.45rem;
  --fs-xl:   clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  --fs-2xl:  clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem);
  --fs-3xl:  clamp(2.9rem, 1.4rem + 5.6vw, 5.6rem);

  /* Abstände */
  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;  --space-6: 4.5rem;  --space-7: 7rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Form & Schatten (tief, weich) */
  --radius-sm: 10px;
  --radius:    20px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 10px rgba(0,0,0,.3);
  --shadow:     0 24px 60px -26px rgba(0,0,0,.7);
  --shadow-lg:  0 50px 100px -40px rgba(0,0,0,.85);
  --glow-gold:  0 20px 55px -16px rgba(214,32,44,.5);
  --ring:       0 0 0 4px rgba(214,32,44,.28);

  --container: 1220px;
  --transition: 280ms cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
}

/* ============================ 2. RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }

body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--c-ink);
  background-color: var(--c-bg);
  background-image:
    radial-gradient(64rem 42rem at 86% -10%, rgba(214,32,44,.13), transparent 60%),
    radial-gradient(48rem 36rem at -8% 14%, rgba(214,32,44,.07), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Feine Körnung (Premium-Haptik) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-header, main, .site-footer, .wa-float, .to-top, .mobile-bar, .lightbox { position: relative; z-index: 2; }

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
::placeholder { color: var(--c-muted); opacity: 1; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-accent); color: #fff; }

.skip-link { position: absolute; left: 12px; top: -100px; z-index: 2000; background: var(--c-accent); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--transition); }
.skip-link:focus { top: 12px; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad-gold); z-index: 1100; transition: width 80ms linear; }

/* ========================= 3. TYPOGRAFIE ========================== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.005em; color: var(--c-ink); text-wrap: balance; }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.012em; margin-bottom: var(--space-3); }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.008em; margin-bottom: var(--space-3); }
h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
h4 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; margin-bottom: .55rem; }
p  { color: var(--c-ink-soft); }
p a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong { color: var(--c-ink); font-weight: 700; }

.lead { font-size: var(--fs-md); color: var(--c-ink-soft); max-width: 60ch; line-height: 1.62; }

.text-gradient { background: var(--grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: var(--space-2); }
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--grad-gold); border-radius: 2px; }

/* =========================== 4. LAYOUT ============================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--ink { position: relative; background: var(--grad-ink); border-block: 1px solid var(--c-line); }
.section--ink::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52rem 26rem at 50% -28%, rgba(214,32,44,.22), transparent 65%); pointer-events: none; }
.section--ink > * { position: relative; }
.section--ink p { color: rgba(245,245,246,.74); }

/* ---- Helle Sektionen (Kontrast zum dunklen Theme) ---- */
.section--surface, .section--light {
  position: relative;
  background:
    radial-gradient(40rem 16rem at 88% -22%, rgba(214,32,44,.055), transparent 62%),
    #f5f5f7;
  color: #1a1a1d; border-block: 1px solid #e6e6ea;
  /* Muster-Stellschrauben für helle Flächen */
  --pat-line-lt: rgba(20,20,23,.055);
  --pat-size-lt: 54px;
}
/* Webseiten-Screenshots sind selbst überwiegend hell und würden auf
   einer hellen Fläche randlos ineinander laufen – man sähe nicht mehr,
   wo eine Referenz aufhört. Eine hauchfeine Innenlinie hält sie
   zusammen, ohne Abstände zwischen die Kacheln zu bringen. Auf dunklem
   Grund ist das unnötig, deshalb nur für helle Sektionen. */
.section--light .gallery--kanten .gallery__item,
.section--surface .gallery--kanten .gallery__item {
  box-shadow: inset 0 0 0 1px rgba(20,20,23,.09);
}

.section--surface h1, .section--surface h2, .section--surface h3, .section--surface h4,
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: #141417; }
.section--surface p, .section--light p,
.section--surface .lead, .section--light .lead { color: #54545c; }
.section--surface strong, .section--light strong { color: #141417; }
.section--surface .card, .section--light .card,
.section--surface .testimonial, .section--light .testimonial,
.section--surface .acc-item, .section--light .acc-item { background: #fff; border-color: #e7e7eb; }
.section--surface .card:hover, .section--light .card:hover { background: #fff; box-shadow: 0 26px 60px -34px rgba(0,0,0,.3); }
.section--surface .card h3, .section--light .card h3,
.section--surface .card h4, .section--light .card h4,
.section--surface .testimonial__name, .section--light .testimonial__name,
.section--surface .acc-trigger, .section--light .acc-trigger,
.section--surface .quote, .section--light .quote,
.section--surface .marquee__item, .section--light .marquee__item { color: #141417; }
.section--surface .card p, .section--light .card p,
.section--surface .check-list li, .section--light .check-list li,
.section--surface .acc-panel__inner, .section--light .acc-panel__inner,
.section--surface .stat__lbl, .section--light .stat__lbl,
.section--surface .breadcrumb, .section--light .breadcrumb { color: #54545c; }
.section--surface .testimonial p, .section--light .testimonial p { color: #1a1a1d; }
.section--surface .acc-trigger .acc-ico, .section--light .acc-trigger .acc-ico { background: #ededf0; }
.section--surface .gallery__item, .section--light .gallery__item { border-color: #e3e3e8; background: #ededf0; }
.section--surface .svc, .section--light .svc { border-color: #e3e3e8; }
.section--surface .step__num, .section--light .step__num { background: #e7e7eb; color: #141417; border-color: transparent; }
.section--surface .chip, .section--light .chip,
.section--surface .filter-btn, .section--light .filter-btn { background: #fff; border-color: #e7e7eb; color: #54545c; }
.section--surface .btn--ghost, .section--light .btn--ghost { color: #1a1a1d; border-color: #d6d6dc; }
.section--surface .btn--ghost:hover, .section--light .btn--ghost:hover { background: #141417; color: #fff; border-color: #141417; }
/* Eyebrow & Akzent bleiben Rot – gut lesbar auf Hell */
.section--surface .eyebrow, .section--light .eyebrow { color: var(--c-accent); }

.section-head { max-width: 740px; margin-bottom: clamp(3rem, 2rem + 2vw, 4.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.bento > * { grid-column: span 2; }
.bento .b-wide { grid-column: span 3; }
.bento .b-tall { grid-row: span 2; }

/* =========================== 5. BUTTONS =========================== */
.btn {
  --btn-bg: var(--c-panel-2); --btn-fg: var(--c-ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.8rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--radius-pill); border: 1.5px solid var(--btn-bg);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(-1px); }
.btn .ico { width: 1.05em; height: 1.05em; transition: transform var(--transition); }
.btn:hover .ico { transform: translateX(3px); }

.btn--accent { --btn-fg: #fff; background: var(--grad-gold); border-color: transparent; }
.btn--accent:hover { box-shadow: var(--glow-gold); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: rgba(245,245,246,.28); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-deep); }

.btn--on-ink { --btn-bg: var(--c-ink); --btn-fg: var(--c-deep); border-color: var(--c-ink); }
.btn--on-ink-ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: rgba(245,245,246,.3); }
.btn--on-ink-ghost:hover { background: var(--c-ink); color: var(--c-deep); border-color: var(--c-ink); }

.btn--wa { --btn-fg: #fff; background: #25d366; border-color: #25d366; }
.btn--wa:hover { background: #1eb858; border-color: #1eb858; box-shadow: 0 18px 42px -16px rgba(37,211,102,.6); }
.btn--wa .ico { width: 1.15em; height: 1.15em; }

.btn--lg { padding: 1.15rem 2.2rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--c-accent-dk); }
.link-arrow .ico { transition: transform var(--transition); }
.link-arrow:hover .ico { transform: translateX(5px); }

/* =========================== 6. HEADER =========================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; background: transparent; transition: all var(--transition); }
.site-header.is-scrolled {
  background: rgba(14,14,16,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 10px 34px -22px rgba(0,0,0,.8);
  border-bottom: 1px solid var(--c-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 80px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { height: 44px; width: auto; transition: transform var(--transition); }
.brand:hover img { transform: scale(1.04); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--c-ink); }
.brand__tag  { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-dk); font-weight: 700; }

.nav__menu { display: flex; align-items: center; gap: .25rem; }
.nav__link { position: relative; padding: .6rem .9rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); transition: color var(--transition); }
.nav__link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .42rem; height: 2px; background: var(--grad-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.nav__link:hover { color: var(--c-accent-dk); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-accent-dk); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Mega-Menü: Panel über die volle Breite, verankert am Header statt am Menüpunkt */
.has-dropdown { position: static; }
.nav__trigger { display: inline-flex; align-items: center; gap: .3rem; }
.nav__trigger .chev { width: .8em; height: .8em; transition: transform var(--transition); }
.dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(20,20,23,.72);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  box-shadow: 0 26px 54px -22px rgba(0,0,0,.85);
  padding: 0; min-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.dropdown__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  position: relative; z-index: 1;
  padding: var(--space-4) clamp(1.1rem, 4vw, 2.2rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--space-2);
}
/* Brücke über die Lücke zwischen Menüpunkt und Klappe.
   Ohne sie verlässt der Mauszeiger auf dem Weg nach unten kurz den
   Hover-Bereich und das Menü klappt wieder zu – man müsste die Klappe
   genau treffen. Der Streifen ist unsichtbar, gehört aber zur Klappe
   und hält den Hover-Zustand. Er ist nur aktiv, solange die Klappe
   offen ist (im geschlossenen Zustand gilt pointer-events: none). */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 24px;
}

.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.has-dropdown:hover .nav__trigger .chev { transform: rotate(180deg); }

/* Kurze Schonfrist beim Schließen: Wer den Menüpunkt einen Moment
   verlässt, verliert die Klappe nicht sofort. Beim Öffnen ohne
   Verzögerung, damit es sich flott anfühlt. */
.dropdown { transition-delay: .25s; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { transition-delay: 0s; }
.dropdown__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .85rem;
  padding: 1.15rem 1.2rem; border-radius: var(--radius);
  background: var(--c-panel); border: 1px solid var(--c-line);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.dropdown__item:hover { background: var(--c-panel-2); transform: translateY(-4px); border-color: var(--c-accent); }
.dropdown__item .di-ico { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; background: var(--c-accent-sft); color: var(--c-accent-dk); border-radius: 13px; transition: var(--transition); }
.dropdown__item:hover .di-ico { background: var(--grad-gold); color: #fff; }
.dropdown__item .di-ico .ico { width: 22px; height: 22px; }
.dropdown__title { display: block; font-weight: 600; font-size: var(--fs-md); color: var(--c-ink); margin-bottom: .25rem; }
.dropdown__desc  { display: block; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }

.nav__cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav__cta-mobile { display: none; }
/* Menüpunkte, die nur im Handy-Menü stehen sollen (z. B. FAQ) */
.nav__item--mobil { display: none; }

.nav__toggle { display: none; width: 46px; height: 46px; border-radius: var(--radius-sm); }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--c-ink); margin: 5px auto; border-radius: 2px; transition: var(--transition); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ 7. HERO ============================ */
.hero { position: relative; overflow: hidden; padding-top: calc(80px + clamp(2.5rem, 5vw, 5.5rem)); padding-bottom: clamp(3rem, 6vw, 7rem); }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { margin-bottom: var(--space-3); }
.hero .lead { margin-bottom: var(--space-4); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; }
.hero__trust-item { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: 500; }
.hero__trust-item .ico { color: var(--c-accent-dk); width: 1.15em; height: 1.15em; }

.hero__media { position: relative; }
.hero__media::after { content: ""; position: absolute; inset: -16% -12% -12% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(214,32,44,.34), transparent 72%); filter: blur(14px); }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; border: 1px solid var(--c-line); }
.hero__badge { position: absolute; bottom: -24px; left: -24px; background: rgba(24,24,27,.86); backdrop-filter: blur(10px); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.35rem; display: flex; align-items: center; gap: .9rem; animation: floaty 5s ease-in-out infinite; }
.hero__badge .num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__badge .lbl { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.3; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--c-ink); opacity: .5; white-space: nowrap; transition: opacity var(--transition); }
.marquee__item:hover { opacity: 1; }
.marquee__item::after { content: "•"; margin-left: 3rem; color: var(--c-accent); opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

.trustbar { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: rgba(255,255,255,.02); }
.trustbar__inner { display: flex; flex-direction: column; gap: 1.1rem; padding-block: 1.6rem; }
.trustbar__label { text-align: center; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); font-weight: 700; }
.trustbar__logos { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: center; }
.trustbar__logos span { font-family: var(--font-display); font-weight: 600; color: var(--c-ink-soft); opacity: .55; font-size: 1.15rem; }

/* ---- Slider / Showcase-Karussell ---- */
.slider { position: relative; height: clamp(440px, 72vh, 700px); overflow: hidden; background: #000; }
.slider--hero { height: clamp(560px, 92vh, 880px); }
/* Top-Scrim, damit die transparente Navigation über dem Bild lesbar bleibt */
.slider--hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 140px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,10,.6), transparent); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease-out), visibility 900ms; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.slide.is-active .slide__bg { animation: kenburns 8s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.6) 38%, rgba(8,8,10,.15) 70%, transparent 100%); }
.slide__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
/* Die Textbox ist bewusst breit: Die Überschrift ist plakativ gesetzt
   (bis 99 px), und bei einer schmalen Box würden daraus lauter kurze
   Zeilen – ein schmaler Turm statt eines Blocks. Mit 880 px bleibt es
   bei drei Zeilen, der Block behält seine Form und wird nur größer. */
.slide__content { max-width: 880px; color: #fff; }
.slide__content .eyebrow { color: var(--c-accent-lt); }
.slide__content h1,
.slide__content h2 {
  color: #fff;
  font-size: clamp(2.4rem, 1.25rem + 5.4vw, 6.2rem);
  line-height: .96;
  margin-bottom: var(--space-2);
}
.slide__content p { color: rgba(245,245,246,.86); font-size: var(--fs-md); margin-bottom: var(--space-4); max-width: 46ch; }
.slide__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Eintritts-Animation für aktiven Slide-Inhalt */
/* Slide-Text fährt ein. Auch hier nur verstecken, wenn das Skript läuft –
   sonst stünde der Text des ersten Slides dauerhaft auf opacity:0. */
.js .slide__content > * { opacity: 0; transform: translateY(20px); }
.js .slide.is-active .slide__content > * { animation: slideIn 700ms var(--ease-out) forwards; }
.slide.is-active .slide__content > *:nth-child(1) { animation-delay: .25s; }
.slide.is-active .slide__content > *:nth-child(2) { animation-delay: .38s; }
.slide.is-active .slide__content > *:nth-child(3) { animation-delay: .51s; }
.slide.is-active .slide__content > *:nth-child(4) { animation-delay: .64s; }
@keyframes slideIn { to { opacity: 1; transform: none; } }

.slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; transition: background var(--transition), transform var(--transition); }
.slider__arrow:hover { background: var(--c-accent); }
.slider__arrow svg { width: 24px; height: 24px; }
.slider__arrow--prev { left: clamp(.8rem, 2vw, 1.6rem); }
.slider__arrow--next { right: clamp(.8rem, 2vw, 1.6rem); }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 1.6rem; z-index: 5; display: flex; gap: .5rem; justify-content: center; }
.slider__dots button { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.4); transition: var(--transition); }
.slider__dots button.is-active { background: var(--c-accent); width: 30px; border-radius: 999px; }
@media (max-width: 640px) {
  .slider { height: clamp(440px, 80vh, 600px); }
  /* Der Hero braucht auf kurzen Bildschirmen mehr Höhe, als er hatte:
     Der Inhalt sitzt hier unten bündig und wächst nach oben. Mit den
     alten 80vh wurde auf einem iPhone SE die Augbraue („Werbeagentur
     aus Berlin · seit 2010") um 46 px oben abgeschnitten – schon vor
     der größeren Überschrift. Höhe hoch, Abstand nach unten runter,
     Fließtext eine Stufe kleiner: dann passt alles ins Bild. */
  .slider--hero { height: clamp(620px, 96vh, 780px); }
  .slide::after { background: linear-gradient(180deg, rgba(8,8,10,.4) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.9) 100%); }
  /* Der Abstand nach unten bleibt bei 4rem – darunter sitzt die
     Punkte-Navigation des Sliders, die sonst auf den Schaltflächen
     liegt. Den Platz für die größere Überschrift holt die erhöhte
     Hero-Höhe oben herein, nicht ein knapperer Fußabstand. */
  .slide__inner { align-items: flex-end; padding-bottom: 4rem; }
  .slide__content p { font-size: var(--fs-sm); }
  .slide__content h1,
  .slide__content h2 { font-size: 2.4rem; }
  .slider__arrow { display: none; }
}
/* Sehr schmale Geräte (bis 360 px, z. B. iPhone SE 1. Generation).
   Dort rutscht die lange Überschrift sonst in eine vierte Zeile und
   drückt die Augbraue aus dem Bild. Gemessene Untergrenze. */
@media (max-width: 360px) {
  .slide__content h1,
  .slide__content h2 { font-size: 2.15rem; }
}

/* ========================= 8. KOMPONENTEN ======================== */
.card {
  position: relative; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--space-4); height: 100%;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad-gold);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition); pointer-events: none;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; background: var(--c-panel-2); }
.card:hover::before { opacity: 1; }
.card__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--c-accent-sft); color: var(--c-accent-dk); margin-bottom: var(--space-3); transition: var(--transition); }
.card:hover .card__ico { background: var(--grad-gold); color: #fff; transform: rotate(-4deg) scale(1.05); }
.card__ico .ico { width: 27px; height: 27px; }
.card h3, .card h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); margin-bottom: .8rem; letter-spacing: -0.01em; }
.card p { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.card .link-arrow { font-size: var(--fs-sm); }

.service-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card::before { display: none; }
.service-card__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.service-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(8,8,10,.55)); opacity: .5; transition: opacity var(--transition); }
.service-card:hover .service-card__media::after { opacity: .9; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.service-card:hover .service-card__media img { transform: scale(1.08); }
.service-card__body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.service-card__tag { display:inline-block; align-self:flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-dk); background: var(--c-accent-sft); padding:.25rem .7rem; border-radius: var(--radius-pill); margin-bottom: .8rem; }
.service-card .link-arrow { margin-top: auto; }

/* Leistungen — Bento mit immersiven Overlay-Cards */
.svc-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: minmax(280px, auto); gap: var(--space-3); }
.svc--feature { grid-row: span 2; }
.svc {
  position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: 280px;
  border-radius: var(--radius); border: 1px solid var(--c-line);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.svc:hover { transform: translateY(-5px); border-color: var(--c-accent); box-shadow: var(--shadow); }
.svc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 750ms var(--ease-out); }
.svc:hover .svc__bg { transform: scale(1.07); }
.svc__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,10,.12) 0%, rgba(8,8,10,.5) 52%, rgba(8,8,10,.93) 100%); transition: background var(--transition); }
.svc:hover .svc__overlay { background: linear-gradient(180deg, rgba(8,8,10,.22) 0%, rgba(20,20,23,.62) 52%, rgba(8,8,10,.96) 100%); }
.svc__index { position: absolute; top: 1.1rem; right: 1.4rem; z-index: 1; font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); color: rgba(245,245,246,.3); transition: color var(--transition); }
.svc:hover .svc__index { color: var(--c-accent-lt); }
.svc__content { margin-top: auto; padding: clamp(1.4rem, 2.5vw, 2.2rem); position: relative; z-index: 1; }
.svc__tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad-gold); padding: .3rem .8rem; border-radius: var(--radius-pill); margin-bottom: .9rem; }
.svc h3 { color: #fff; font-size: var(--fs-xl); margin-bottom: .75rem; }
.svc--feature h3 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.8rem); }
.svc p { color: rgba(245,245,246,.82); font-size: var(--fs-sm); max-width: 48ch; margin-bottom: var(--space-2); }
.svc .link-arrow { color: var(--c-accent-lt); font-weight: 600; }
.svc:hover .link-arrow .ico { transform: translateX(5px); }
.svc__link { position: absolute; inset: 0; z-index: 3; }
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .svc--feature { grid-row: auto; }
  .svc { min-height: 320px; }
}

.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--c-accent-sft); color: var(--c-accent-dk); }
.chip { padding: .5rem 1rem; border:1px solid var(--c-line); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--c-ink-soft); background: var(--c-panel); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.stat { text-align: center; padding: var(--space-3) var(--space-2); }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stat__num .plus { -webkit-text-fill-color: var(--c-accent); }
.stat__lbl { font-size: var(--fs-sm); color: var(--c-muted); margin-top: .6rem; }

/* Feature-Liste */
.check-list { display: grid; gap: .9rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--c-ink-soft); }
.check-list .ico { flex-shrink: 0; width: 24px; height: 24px; color: #fff; background: var(--grad-gold); border-radius: 50%; padding: 4px; margin-top: .1rem; }

/* Prozess-Schritte */
.steps { display: grid; gap: var(--space-3); }
.step { display: flex; gap: var(--space-3); align-items: flex-start; }
.step__num { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--c-ink); background: var(--c-panel-2); border: 1px solid var(--c-line); }
.step:nth-child(odd) .step__num { background: var(--grad-gold); color: #fff; border-color: transparent; }
.step h4 { margin-bottom: .25rem; }
.step p { font-size: var(--fs-sm); }

/* Quote / Testimonial */
.quote { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.32; color: var(--c-ink); text-wrap: balance; }
.quote__cite { display: block; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; margin-top: var(--space-3); font-style: normal; }

.testimonial { position: relative; background: var(--c-panel); border:1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-4); height: 100%; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--c-accent-sft); }
.testimonial::after { content:"\201C"; position:absolute; top:.4rem; right:1.4rem; font-family: var(--font-display); font-size: 5rem; color: var(--c-accent); opacity:.18; line-height:1; }
.testimonial__stars { display:flex; gap:.2rem; color: var(--c-accent); margin-bottom: var(--space-2); }
.testimonial__stars .ico { width: 18px; height: 18px; }
.testimonial p { color: var(--c-ink); font-size: var(--fs-md); margin-bottom: var(--space-3); line-height: 1.55; }
.testimonial__author { display: flex; align-items: center; gap: .8rem; }
.testimonial__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-gold); color: #fff; display:grid; place-items:center; font-weight:700; font-family: var(--font-display); }
.testimonial__name { font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
.testimonial__role { font-size: var(--fs-xs); color: var(--c-muted); }

/* Accordion */
.accordion { display: grid; gap: var(--space-2); }
.acc-item { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.acc-item:has(.acc-trigger[aria-expanded="true"]) { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.6rem; text-align: left; font-weight: 600; font-size: var(--fs-md); color: var(--c-ink); font-family: var(--font-body); }
.acc-trigger .acc-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); transition: var(--transition); }
.acc-trigger .acc-ico .ico { width: 16px; height: 16px; transition: transform var(--transition); }
.acc-trigger[aria-expanded="true"] .acc-ico { background: var(--grad-gold); color: #fff; }
.acc-trigger[aria-expanded="true"] .acc-ico .ico { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 360ms var(--ease-out); }
.acc-panel__inner { padding: 0 1.6rem 1.5rem; color: var(--c-ink-soft); }

/* ====================== 9. REFERENZEN / GALERIE ================== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.gallery--menu { grid-template-columns: repeat(4, 1fr); }
.gallery__item { position: relative; border-radius: 0; overflow: hidden; border: 0; background: var(--c-panel); aspect-ratio: 4 / 3; cursor: pointer; }
.gallery--menu .gallery__item { aspect-ratio: 3 / 4; }
/* Overlay „Sanfter Schleier": Beim Überfahren legt sich ein dunkler Verlauf
   über das ganze Foto, die Bildunterschrift steigt von unten ein und das Bild
   zoomt langsam heran. :focus-within sorgt dafür, dass das auch bei Bedienung
   über die Tastatur passiert. */
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.16,1,.3,1); }
.gallery__item:hover img,
.gallery__item:focus-within img { transform: scale(1.07); }

.gallery__item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.5) 42%, rgba(8,8,10,.12) 100%);
  opacity: 0; transition: opacity 450ms ease;
}
.gallery__item:hover::after,
.gallery__item:focus-within::after { opacity: 1; }

.gallery__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.6rem 1.1rem 1rem; color: #fff; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35;
  opacity: 0; transform: translateY(16px);
  transition: opacity 400ms ease 80ms, transform 500ms cubic-bezier(.16,1,.3,1) 80ms;
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-within .gallery__cap { opacity: 1; transform: none; }

/* Touchgeräte kennen kein Überfahren – dort Schleier und Text dauerhaft zeigen,
   sonst bliebe die Bildunterschrift auf dem Handy unerreichbar. */
@media (hover: none) {
  .gallery__item::after { opacity: 1; }
  .gallery__cap { opacity: 1; transform: none; }
}

/* Masonry (Spalten-Layout, variierende Kachelhöhen) */
/* Galerien laufen bündig – keine Abstände zwischen den Fotos. */
.gallery--masonry { display: block; column-count: 4; column-gap: 0; }
.gallery--masonry .gallery__item {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0; width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
}
.gallery--masonry .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .gallery--masonry { column-count: 3; } }
@media (max-width: 700px)  { .gallery--masonry { column-count: 2; } }
@media (max-width: 420px)  { .gallery--masonry { column-count: 1; } }

/* ---- Laufband (Referenz-Teaser auf der Startseite) ---------------------
   Ein durchlaufendes Band über die volle Fensterbreite. Die Kacheln stehen
   im Markup zweimal hintereinander; die Spur wandert um genau die Hälfte
   ihrer Breite nach links und springt dann zurück. Weil an Position null
   dasselbe Bild steht wie am Umkehrpunkt, ist der Sprung unsichtbar – das
   Band läuft scheinbar endlos.
   Alle Kacheln sind gleich hoch, die Breite ergibt sich aus dem echten
   Seitenverhältnis. Nichts wird beschnitten, nichts steht über. */
.band {
  overflow: hidden; width: 100%;
  /* Das Band steht bewusst außerhalb des Containers (volle Breite) und
     hätte damit keine eigene Ebene. Ohne diese beiden Zeilen liefen die
     Hintergrundlinien quer über die Referenzfotos. */
  position: relative; z-index: 1;
  /* Weiche Ränder: das Band läuft seitlich aus, statt hart abzubrechen.
     Dadurch wirkt es endlos weiterlaufend statt abgeschnitten. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  /* Luft nach oben und unten. Das hervortretende Foto wird beim
     Überfahren etwas größer und ragt dann über die Bandkante hinaus –
     ohne diesen Innenabstand schnitte overflow:hidden es ab, samt der
     Bildunterschrift am unteren Rand. Der Abstand gehört zum
     Innenbereich und wird deshalb nicht mit weggeschnitten. */
  padding-block: 14px;
}
.band .band__spur {
  display: flex; gap: 0; width: max-content;
  animation: bandLauf 70s linear infinite;
  will-change: transform;
}
@keyframes bandLauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Anhalten, solange jemand hinsieht oder mit der Tastatur darin ist –
   sonst kann man ein Foto nicht in Ruhe ansehen oder anklicken. */
.band:hover .band__spur,
.band:focus-within .band__spur { animation-play-state: paused; }

.band .gallery__item {
  flex: 0 0 auto;
  height: 340px; width: auto;
  aspect-ratio: var(--ar, 1 / 1);
  margin: 0; border: 0; border-radius: 0;
}
.band .gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* Fokus beim Überfahren: das angesteuerte Foto tritt hervor, die übrigen
   treten zurück. Nur für Geräte mit echtem Mauszeiger – auf dem
   Touchscreen bleibt ein :hover nach dem Antippen hängen, dann läge das
   halbe Band dauerhaft im Halbdunkel. */
@media (hover: hover) {
  .band .gallery__item {
    transition: transform 500ms var(--ease-out),
                opacity   500ms var(--ease-out),
                filter    500ms var(--ease-out);
  }
  .band:hover .gallery__item { opacity: .45; filter: saturate(.7); }
  .band .gallery__item:hover { opacity: 1; filter: none; transform: scale(1.06); z-index: 3; }
}

@media (max-width: 900px) {
  .band .gallery__item { height: 250px; }
  .band .band__spur { animation-duration: 52s; }
}
@media (max-width: 560px) {
  .band .gallery__item { height: 190px; }
  .band .band__spur { animation-duration: 40s; }
}

/* Wer Bewegung abgestellt hat, bekommt ein Band zum Selberschieben. */
@media (prefers-reduced-motion: reduce) {
  .band { overflow-x: auto; }
  .band .band__spur { animation: none; }
}

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--space-4); justify-content: center; }
/* Sprungmarken im Seitenkopf: linksbündig statt zentriert */
.filters--start { justify-content: flex-start; margin-top: var(--space-3); }
.filter-btn { display: inline-flex; align-items: center; padding: .6rem 1.2rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-soft); background: var(--c-panel); transition: var(--transition); }
.filter-btn:hover { border-color: var(--c-accent); color: var(--c-ink); transform: translateY(-2px); }
.filter-btn.is-active { background: var(--grad-gold); color: #fff; border-color: transparent; }

.lightbox { position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; padding: 2rem; background: rgba(6,6,8,.94); backdrop-filter: blur(8px); }
.lightbox.is-open { display: grid; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.lightbox img { max-width: min(92vw, 1020px); max-height: 82vh; border-radius: 0; box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 1.4rem; right: 1.6rem; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: var(--transition); }
.lightbox__close:hover { background: var(--c-accent); color: #fff; transform: rotate(90deg); }

/* ========================= CTA-Band ============================== */
.cta-band { position: relative; overflow: hidden; background: var(--c-deep); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(2.8rem, 4vw, 5rem); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42rem 18rem at 50% -20%, rgba(214,32,44,.32), transparent 60%); }
.cta-band::after { content:""; position:absolute; right:-6rem; bottom:-6rem; width:18rem; height:18rem; border-radius:50%; background: radial-gradient(closest-side, rgba(214,32,44,.22), transparent); }
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: var(--space-2); }
.cta-band p { color: rgba(245,245,246,.78); max-width: 56ch; margin-inline: auto; margin-bottom: var(--space-4); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ===================== 10. KONTAKT / FORMULAR ==================== */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.contact-info { display: grid; gap: var(--space-3); }
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-item__ico { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: var(--c-accent-sft); color: var(--c-accent-dk); display: grid; place-items: center; transition: var(--transition); }
.info-item:hover .info-item__ico { background: var(--grad-gold); color: #fff; }
.info-item__ico .ico { width: 22px; height: 22px; }
.info-item h4 { font-size: var(--fs-sm); margin-bottom: .15rem; }
.info-item a, .info-item p { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.info-item a:hover { color: var(--c-accent-dk); }

.form-card { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1.7rem, 3vw, 2.8rem); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-3); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field label .req { color: var(--c-accent-dk); }
.field input, .field textarea, .field select { width: 100%; padding: .9rem 1.05rem; background: var(--c-surface); color: var(--c-ink); border: 1.5px solid var(--c-line); border-radius: var(--radius-sm); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: var(--c-surface-2); border-color: var(--c-accent); box-shadow: var(--ring); }
.field textarea { resize: vertical; min-height: 145px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-error); }
.field__error { font-size: var(--fs-xs); color: var(--c-error); min-height: 1em; display: none; }
.field__error.is-visible { display: block; }

.checkbox { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: var(--space-3); }
.checkbox input { width: 20px; height: 20px; margin-top: .2rem; flex-shrink: 0; accent-color: var(--c-accent); }
.checkbox label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-soft); }
.checkbox label a { color: var(--c-accent-dk); text-decoration: underline; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: var(--fs-sm); margin-bottom: var(--space-3); display: none; }
.form-status.is-visible { display: block; }
.form-status--success { background: rgba(95,207,149,.12); color: var(--c-success); border: 1px solid rgba(95,207,149,.4); }
.form-status--error   { background: rgba(232,131,111,.12); color: var(--c-error); border: 1px solid rgba(232,131,111,.4); }
.hcaptcha-box { margin-bottom: var(--space-3); }
.hcaptcha-box:empty { margin-bottom: 0; }

/* =========================== 11. FOOTER ========================== */
.site-footer { position: relative; background: var(--c-deep); color: var(--c-on-ink); padding-block: var(--space-6) var(--space-4); border-top: 1px solid var(--c-line); }
/* Konturring-Muster wie in den Sektionen – Ursprung unten links, damit es
   den Seitenverlauf abschließt statt ihn zu wiederholen. */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 12% 108%, rgba(245,245,246,.07) 0 1px, transparent 1px 54px);
  -webkit-mask-image: radial-gradient(130% 118% at 12% 100%, #000 22%, transparent 80%);
          mask-image: radial-gradient(130% 118% at 12% 100%, #000 22%, transparent 80%);
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.footer-brand img { height: 46px; width: auto; margin-bottom: var(--space-3); }
.footer-brand p { color: rgba(245,245,246,.55); font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h4 { color: var(--c-ink); font-size: var(--fs-sm); letter-spacing: .04em; margin-bottom: var(--space-2); }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { display: flex; align-items: center; gap: .55rem; color: rgba(245,245,246,.55); font-size: var(--fs-sm); transition: color var(--transition), padding var(--transition); }
.footer-col .fc-ico { flex-shrink: 0; width: 15px; height: 15px; color: var(--c-accent-dk); opacity: .75; transition: opacity var(--transition), transform var(--transition); }
.footer-col a:hover .fc-ico { opacity: 1; transform: scale(1.1); }
.footer-col a:hover { color: var(--c-accent-lt); padding-left: 4px; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; color: rgba(245,245,246,.55); font-size: var(--fs-sm); margin-bottom: .6rem; }
.footer-contact .ico { color: var(--c-accent); flex-shrink: 0; width: 18px; height: 18px; margin-top: .2rem; }
.footer-social { display: flex; gap: .6rem; margin-top: var(--space-3); }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--c-line); color: var(--c-ink-soft); display: grid; place-items: center; transition: var(--transition); }
.footer-social a:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.footer-social a.is-fb:hover { background: #1877f2; }
.footer-social a.is-ig:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.footer-social a.is-wa:hover { background: #25d366; }
.footer-social svg { width: 19px; height: 19px; display: block; }
.footer-bottom { border-top: 1px solid var(--c-line); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
/* .45 ergab nur 4,2:1 – .58 kommt auf 5,6:1 und erfüllt AA. */
.footer-bottom p, .footer-bottom a { font-size: var(--fs-xs); color: rgba(245,245,246,.58); }
.footer-bottom a:hover { color: var(--c-accent-lt); }
.footer-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* Footer-Newsletter */
.footer-news { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-4); align-items: center; padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--c-line); }
.footer-news__text h3 { color: var(--c-ink); font-size: var(--fs-xl); margin-bottom: .4rem; }
.footer-news__text p { color: rgba(245,245,246,.6); font-size: var(--fs-sm); max-width: 42ch; }
.news-form__row { display: flex; gap: .6rem; }
.news-form input[type="email"] { flex: 1; min-width: 0; padding: .9rem 1.1rem; background: rgba(255,255,255,.05); color: var(--c-ink); border: 1.5px solid var(--c-line); border-radius: var(--radius-pill); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.news-form input[type="email"]::placeholder { color: rgba(245,245,246,.45); }
.news-form input[type="email"]:focus { outline: none; background: rgba(255,255,255,.08); border-color: var(--c-accent); box-shadow: var(--ring); }
.news-form input[aria-invalid="true"] { border-color: var(--c-error); }
.news-form .btn { flex-shrink: 0; }
/* .4 ergab nur 3,5:1 – .6 kommt auf 4,9:1. */
.news-form__note { font-size: var(--fs-xs); color: rgba(245,245,246,.6); margin-top: .7rem; }
.news-form__note a { color: var(--c-accent-dk); text-decoration: underline; }
.news-form__status { font-size: var(--fs-sm); margin-top: .7rem; min-height: 1.1em; display: none; }
.news-form__status.is-visible { display: block; }
.news-form__status.is-success { color: var(--c-success); }
.news-form__status.is-error { color: var(--c-error); }
@media (max-width: 760px) {
  .footer-news { grid-template-columns: 1fr; gap: var(--space-3); text-align: left; }
  .news-form__row { flex-direction: column; }
  .news-form .btn { width: 100%; }
}

/* Floating UI */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(37,211,102,.6); transition: transform var(--transition); }
.wa-float::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow:0 0 0 0 rgba(37,211,102,0); } }
.wa-float:hover { transform: scale(1.08); }
.wa-float img { width: 30px; height: 30px; position: relative; }

.to-top { position: fixed; right: 22px; bottom: 92px; z-index: 900; width: 50px; height: 50px; border-radius: 50%; background: var(--c-panel-2); color: var(--c-ink); border: 1px solid var(--c-line); display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition), color var(--transition); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--grad-gold); color: #fff; border-color: transparent; transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; }

.mobile-bar { display: none; }

/* Cookie-Banner */
.cookie-banner {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: 20px; z-index: 1200;
  width: min(680px, calc(100% - 32px));
  background: rgba(24,24,27,.97); backdrop-filter: blur(12px);
  border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1.2rem 1.4rem; display: flex; gap: 1rem 1.4rem; align-items: center; flex-wrap: wrap;
  opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.cookie-banner.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cookie-banner p { flex: 1 1 300px; margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.cookie-banner p strong { color: var(--c-ink); }
.cookie-banner a { color: var(--c-accent-dk); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-banner__actions .btn { padding: .7rem 1.3rem; }
@media (max-width: 768px) {
  .cookie-banner { bottom: 80px; flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* Breadcrumb & Page-Hero */
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-xs); color: var(--c-muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-accent-dk); }
.breadcrumb span { color: var(--c-line); }
.page-hero {
  position: relative; overflow: hidden;
  padding-top: calc(80px + clamp(2.5rem, 5vw, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
  /* Muster-Stellschrauben */
  --pat-line: rgba(245,245,246,.075);
  --pat-size: 68px;
  /* Grundfläche + roter Schein (liegt unter dem Muster) */
  background:
    radial-gradient(44rem 18rem at 86% -30%, rgba(214,32,44,.22), transparent 60%),
    var(--c-surface);
}
/* Muster-Ebene: Raster (Standard) */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--pat-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pat-line) 1px, transparent 1px);
  background-size: var(--pat-size) var(--pat-size);
  -webkit-mask-image: radial-gradient(125% 105% at 50% 0%, #000 28%, transparent 76%);
          mask-image: radial-gradient(125% 105% at 50% 0%, #000 28%, transparent 76%);
}
/* Variante: Punktraster */
.page-hero--dots { --pat-line: rgba(245,245,246,.16); --pat-size: 28px; }
.page-hero--dots::before {
  background-image: radial-gradient(var(--pat-line) 1.3px, transparent 1.3px);
  background-size: var(--pat-size) var(--pat-size);
}
/* Variante: Diagonale Linien */
.page-hero--diagonal { --pat-line: rgba(245,245,246,.06); --pat-size: 16px; }
.page-hero--diagonal::before {
  background-image: repeating-linear-gradient(135deg, var(--pat-line) 0 1px, transparent 1px var(--pat-size));
  background-size: auto;
}
/* Variante: Konturringe */
.page-hero--rings { --pat-line: rgba(245,245,246,.053); --pat-size: 54px; }
.page-hero--rings::before {
  background-image: repeating-radial-gradient(circle at 88% -8%, var(--pat-line) 0 1px, transparent 1px var(--pat-size));
  background-size: auto;
  -webkit-mask-image: radial-gradient(135% 115% at 70% 0%, #000 30%, transparent 82%);
          mask-image: radial-gradient(135% 115% at 70% 0%, #000 30%, transparent 82%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { margin: var(--space-2) 0 var(--space-3); }
.page-hero .lead { margin-inline: 0; }

/* PROSE */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-xl); margin: var(--space-5) 0 var(--space-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-1); }
.prose p, .prose ul { margin-bottom: var(--space-2); }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose ul li { margin-bottom: .4rem; color: var(--c-ink-soft); }
.prose a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.prose .placeholder { background: var(--c-accent-sft); color: var(--c-accent-lt); padding: .05rem .4rem; border-radius: 4px; font-weight: 600; }

/* ========================= 12. UTILITIES ========================= */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)}
.maxw-60 { max-width: 60ch; }
.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; }
.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow); }

/* ===================== 13. SCROLL-REVEAL ANIM ==================== */
/* Einblend-Effekt beim Scrollen.
   WICHTIG: Das Verstecken hängt an der Klasse .js, die das Skript ganz oben
   im <head> setzt. Ohne JavaScript – oder wenn das Skript nicht lädt –
   bleibt der Inhalt sichtbar, statt für immer auf opacity:0 zu stehen.
   Wer „Bewegung reduzieren" eingestellt hat, sieht ebenfalls sofort alles. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ====================== 14. RESPONSIVE =========================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .gallery--menu { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .b-wide { grid-column: span 2; }
}

@media (max-width: 900px) {
  /* Mobiles Menü: vollflächig unter dem Header, große Barlow-Typografie */
  .nav__menu {
    position: fixed; inset: 80px 0 0 0; width: 100%; height: calc(100dvh - 80px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(14,14,16,.98);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-left: 0; box-shadow: none;
    padding: var(--space-3) clamp(1.3rem, 6vw, 2.4rem) var(--space-5);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__menu > li { border-bottom: 1px solid var(--c-line); }
  .nav__menu > li:last-of-type { border-bottom: 0; }

  .nav__link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: .95rem 0; border-radius: 0;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.7rem, 1.15rem + 2.6vw, 2.3rem);
    line-height: 1.06; letter-spacing: -0.008em; color: var(--c-ink);
  }
  .nav__link::after { display: none; }
  /* Auch die aktuelle Seite in normaler Stärke – sonst stünde ein Punkt
     fett zwischen lauter leichten. Erkennbar bleibt sie an der Farbe.
     Gilt nur hier im Handy-Menü; am Desktop bleibt es wie gehabt. */
  .nav__link[aria-current="page"] { color: var(--c-accent-dk); background: none; font-weight: 400; }
  .nav__trigger .chev { width: 1.5rem; height: 1.5rem; stroke-width: 2; color: var(--c-muted); }

  .has-dropdown { position: static; }
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; box-shadow: none; border: 0; background: transparent;
    border-radius: 0; margin: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--transition);
    transition-delay: 0s;   /* die Schonfrist gilt nur fürs Hover-Menü am Desktop */
  }
  /* Im Handy-Menü wird geklickt statt überfahren – die Hover-Brücke wäre hier
     ein unsichtbarer Streifen ohne Zweck, der Klicks abfangen könnte. */
  .dropdown::before { content: none; }
  .dropdown__inner { grid-template-columns: 1fr; padding: 0 0 .9rem; gap: .15rem; }
  .dropdown__item {
    flex-direction: row; align-items: center; gap: .85rem;
    padding: .6rem .7rem; background: transparent; border: 0;
    border-radius: var(--radius-sm); transform: none;
  }
  .dropdown__item:hover, .dropdown__item:active { background: var(--c-panel); transform: none; border-color: transparent; }
  .dropdown__item .di-ico { width: 36px; height: 36px; border-radius: 10px; }
  .dropdown__item .di-ico .ico { width: 18px; height: 18px; }
  .dropdown__title { font-family: var(--font-body); font-size: var(--fs-sm); margin-bottom: .1rem; }
  .dropdown__desc { font-size: var(--fs-xs); }
  .has-dropdown.is-open .dropdown { max-height: 600px; }
  .has-dropdown.is-open .nav__trigger .chev { transform: rotate(180deg); }

  .nav__cta .btn:not(.nav__toggle) { display: none; }
  .nav__item--mobil { display: block; }
  .nav__menu .nav__cta-mobile { display: flex; margin-top: auto; padding-top: var(--space-4); border-bottom: 0; }
  .nav__menu .nav__cta-mobile .btn { font-size: var(--fs-md); padding-block: 1.1rem; }
  .nav__toggle { display: block; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 560px; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .b-wide { grid-column: span 1; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .form-row { grid-template-columns: 1fr; }
  .gallery, .gallery--menu { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero__badge { left: 50%; transform: translateX(-50%); bottom: -28px; }
  .brand__tag { display: none; }
  .cta-band { padding: 2.2rem 1.4rem; }
}

@media (max-width: 768px) {
  /* Aktionsknöpfe rechts untereinander – alle Kreise gleich groß (44px) und
     rechtsbündig zum Back-to-Top-Knopf. Beschriftung steht links daneben. */
  .mobile-bar {
    position: fixed; z-index: 950;
    right: 16px; left: auto; transform: none;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .6rem;
    background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none;
  }
  .mobile-bar a {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 44px; padding: 0 0 17px; border: 0; border-radius: 0;
    background: none; box-shadow: none;
    transition: transform var(--transition);
  }
  .mobile-bar a:active { transform: scale(.92); }
  .mobile-bar .mb-ico {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--c-panel-2); border: 1px solid var(--c-line);
    color: var(--c-accent-dk); box-shadow: var(--shadow);
  }
  .mobile-bar .mb-ico svg { width: 20px; height: 20px; display: block; }
  .mobile-bar .mb-txt {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    font-family: var(--font-body); font-size: .58rem; font-weight: 600;
    letter-spacing: .02em; line-height: 1; white-space: nowrap;
    color: #f5f5f6; background: rgba(14,14,16,.75); backdrop-filter: blur(8px);
    padding: .22rem .45rem; border-radius: var(--radius-pill);
  }
  .mobile-bar a.is-wa .mb-ico {
    background: #25d366; color: #fff; border-color: transparent;
    box-shadow: 0 12px 26px -8px rgba(37,211,102,.65);
  }
  .wa-float { display: none; }
  .to-top { right: 16px; bottom: calc(160px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  body { padding-bottom: 0; }
}
@media (max-width: 380px) { .gallery, .gallery--menu { grid-template-columns: 1fr; } }

/* ===== Ausstattungs-Optionen (Speisekarten-Seite) ===== */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-line); }
.spec { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.5vw, 2rem); border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); transition: background var(--transition); }
.spec:hover { background: var(--c-panel); }
.spec:nth-child(3n) { border-right: 0; }
.spec__label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: .85rem; }
.spec__value { font-size: var(--fs-lg); margin-bottom: .7rem; }
.spec p { font-size: var(--fs-sm); margin: 0; }
.section--light .spec:hover, .section--surface .spec:hover { background: #ededf0; }
.section--light .spec__label, .section--surface .spec__label { color: var(--c-accent); }
.section--light .specs, .section--surface .specs,
.section--light .spec, .section--surface .spec { border-color: #e3e3e8; }

/* Galerie-Hinweis unter dem Grid */
.gallery-note { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--space-4); }

@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(3n) { border-right: 1px solid var(--c-line); }
  .spec:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
  .spec { border-right: 0 !important; }
}

/* ===== Nahtlose Masonry-Galerie: ohne Abstände, ohne Radius ===== */
.gallery--flush { column-gap: 0; }
.gallery--flush .gallery__item { margin: 0; border: 0; border-radius: 0; }
.section--light .gallery--flush .gallery__item,
.section--surface .gallery--flush .gallery__item { border: 0; }

/* ===== Bildrahmen: kantig statt abgerundet ===== */
.media-frame { position: relative; display: block; width: fit-content; max-width: 100%; }
.media-frame img { border-radius: 0; box-shadow: var(--shadow); position: relative; z-index: 1; }

/* A – versetzter Rahmen: dünne Akzentlinie, nach unten links verschoben */
.media-frame--offset::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--c-accent); opacity: .6;
}

/* B – Eckwinkel: zwei L-Marken diagonal gegenüber */
.media-frame--corners::before,
.media-frame--corners::after {
  content: ""; position: absolute; z-index: 2; width: 144px; height: 144px;
  border: 1px solid var(--c-accent); pointer-events: none;
}
.media-frame--corners::before { top: -11px; left: -11px; border-right: 0; border-bottom: 0; }
.media-frame--corners::after  { bottom: -11px; right: -11px; border-left: 0; border-top: 0; }

/* C – Akzentkante: kräftiger Balken an der linken Bildkante */
.media-frame--edge::before {
  content: ""; position: absolute; z-index: 2; inset: 0 auto 0 -11px; width: 6px;
  background: var(--grad-gold); pointer-events: none;
}

@media (max-width: 900px) {
  .media-frame--offset::before { inset: 14px -14px -14px 14px; }
  .media-frame--corners::before, .media-frame--corners::after { width: 96px; height: 96px; }
}

/* ===== Bild im Karten-Kopf (kantig, wie alle Bilder) ===== */
.card__media { display: block; margin-bottom: var(--space-3); aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 700ms var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.section--light .card__media, .section--surface .card__media { background: #e6e6ea; }

/* ===== Hero mit Bild neben dem Text ===== */
.page-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.page-hero__text { max-width: 620px; }
.page-hero__media { justify-self: end; width: 100%; max-width: 480px; }
.page-hero__media img { width: 100%; height: auto; filter: drop-shadow(0 28px 46px rgba(0,0,0,.6)); }
@media (max-width: 980px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .page-hero__text { max-width: none; }
  .page-hero__media { justify-self: center; max-width: 400px; }
}

/* ===== Konturring-Muster für ALLE Sektionen =====
   Der Ursprung wandert von Sektion zu Sektion die Seite hinunter,
   damit sich das Motiv nicht 17-mal identisch wiederholt. */
.section {
  position: relative;
  --pat-x: 88%;
  --pat-ring: rgba(245,245,246,.053);
  --pat-gap: 54px;
}
.section:nth-of-type(even) { --pat-x: 12%; }
.section--light, .section--surface { --pat-ring: rgba(20,20,23,.056); }
.section > .container { position: relative; z-index: 1; }

.section:not(.section--ink)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at var(--pat-x) -8%, var(--pat-ring) 0 1px, transparent 1px var(--pat-gap));
  -webkit-mask-image: radial-gradient(130% 118% at var(--pat-x) 0%, #000 22%, transparent 80%);
          mask-image: radial-gradient(130% 118% at var(--pat-x) 0%, #000 22%, transparent 80%);
}

/* Tiefschwarze Sektionen behalten ihren roten Schein und bekommen die Ringe dazu */
.section--ink::before {
  background-image:
    radial-gradient(52rem 26rem at 50% -28%, rgba(214,32,44,.22), transparent 65%),
    repeating-radial-gradient(circle at var(--pat-x) -8%, var(--pat-ring) 0 1px, transparent 1px var(--pat-gap));
}

/* ===== Formatübersicht ===== */
.formats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--c-line); }
.format { padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.5rem); border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); transition: background var(--transition); }
.format:hover { background: var(--c-panel); }
.format:last-child { border-right: 0; }
.format__code { display: block; font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.4rem); color: var(--c-accent-dk); margin-bottom: .5rem; }
.format__name { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .8rem; }
.format p { font-size: var(--fs-sm); margin: 0; }
.section--light .formats, .section--surface .formats,
.section--light .format, .section--surface .format { border-color: #e3e3e8; }
.section--light .format:hover, .section--surface .format:hover { background: #ededf0; }
.section--light .format__code, .section--surface .format__code { color: var(--c-accent); }
@media (max-width: 1100px) {
  .formats { grid-template-columns: repeat(3, 1fr); }
  .format:nth-child(3n) { border-right: 0; }
  .format:last-child { border-right: 1px solid var(--c-line); }
}
@media (max-width: 700px) {
  .formats { grid-template-columns: repeat(2, 1fr); }
  .format:nth-child(3n) { border-right: 1px solid var(--c-line); }
  .format:nth-child(2n) { border-right: 0; }
}
@media (max-width: 440px) {
  .formats { grid-template-columns: 1fr; }
  .format { border-right: 0 !important; }
}

/* ===== Lightbox: Blättern ===== */
.lightbox__fig { position: relative; display: grid; justify-items: center; gap: 0; margin: 0; max-width: min(92vw, 1020px); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; margin-top: .9rem; font-family: var(--font-body); font-size: var(--fs-sm); color: rgba(245,245,246,.8); }
.lightbox__count { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(245,245,246,.55); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  transition: background var(--transition), transform var(--transition);
}
.lightbox__nav:hover { background: var(--c-accent); }
.lightbox__nav--prev { left: clamp(.6rem, 3vw, 2.4rem); }
.lightbox__nav--next { right: clamp(.6rem, 3vw, 2.4rem); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 620px) {
  .lightbox__nav { width: 44px; height: 44px; top: auto; bottom: 1.2rem; transform: none; }
  .lightbox__nav--prev:hover, .lightbox__nav--next:hover { transform: none; }
  .lightbox__bar { flex-direction: column; align-items: flex-start; gap: .3rem; padding-bottom: 3.5rem; }
}

/* ===== Pillen-Reihe (optionale Bausteine) ===== */
.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill-row .badge { background: var(--c-panel-2); color: var(--c-ink-soft); border: 1px solid var(--c-line); font-weight: 600; }
.pill-row .badge svg { width: 14px; height: 14px; color: var(--c-accent-dk); flex-shrink: 0; }
.section--light .pill-row .badge, .section--surface .pill-row .badge { background: #ededf0; color: #54545c; border-color: #e3e3e8; }
.section--light .pill-row .badge svg, .section--surface .pill-row .badge svg { color: var(--c-accent); }

/* ===== Subnavigation mit Sprungmarken ===== */
.subnav {
  position: sticky; top: 83px; z-index: 900;
  background: rgba(14,14,16,.88); backdrop-filter: blur(14px);
  border-block: 1px solid var(--c-line);
}
.subnav__list {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  flex: 1 1 auto; min-width: 0;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; flex-shrink: 0; display: block;
  padding: .95rem .95rem; font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: 600; color: var(--c-muted); white-space: nowrap;
  transition: color var(--transition);
}
.subnav a::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: 0; height: 2px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.subnav a:hover { color: var(--c-ink); }
.subnav a.is-active { color: var(--c-ink); }
.subnav a.is-active::after { transform: scaleX(1); }
@media (max-width: 768px) {
  .subnav { top: 83px; }
  .subnav a { padding: .8rem .7rem; font-size: var(--fs-xs); }
}

/* Subnavigation: Kopfzeile mit Seitenbezug */
.subnav__inner {
  display: flex; align-items: stretch; width: 100%;
  max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}
.subnav__label {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding-right: clamp(.9rem, 2vw, 1.6rem); margin-right: clamp(.9rem, 2vw, 1.6rem);
  border-right: 1px solid var(--c-line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--c-ink); letter-spacing: .01em;
}
.subnav__label .ico { width: 18px; height: 18px; color: var(--c-accent-dk); }
@media (max-width: 768px) {
  .subnav__label { font-size: .95rem; padding-right: .7rem; margin-right: .7rem; }
  .subnav__label .ico { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
  .subnav__label-text { display: none; }
  .subnav__label { gap: 0; padding-right: .6rem; margin-right: .6rem; }
}

/* ===== Bildspalte wandert beim Lesen mit =====
   Greift nur im zweispaltigen Layout und nur, wenn die Textspalte länger ist.
   Der Versatz hält Header (83px) und – wo vorhanden – die Subnavigation frei. */
:root { --sticky-offset: 106px; }
body:has(.subnav) { --sticky-offset: 152px; }
@media (min-width: 901px) {
  .split__media { position: sticky; top: var(--sticky-offset); }
}

/* Galerie mit drei Spalten (breite Screenshots) */
.gallery--cols-3 { column-count: 3; }
@media (max-width: 1024px) { .gallery--cols-3 { column-count: 2; } }
@media (max-width: 640px)  { .gallery--cols-3 { column-count: 1; } }

/* Zusatz hinter einer Footer-Kontaktzeile (z. B. „WhatsApp") */
.fc-hint { font-size: var(--fs-xs); color: #25d366; font-weight: 600; letter-spacing: .02em; margin-left: .3rem; }

/* ===================== Angebots-Pop-up ===================== */
.offer-ov {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8,8,10,.72);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  overflow-y: auto; overscroll-behavior: contain;
}
.offer-ov.is-open { opacity: 1; visibility: visible; }

.offer {
  position: relative; width: min(580px, 100%); margin-block: auto;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  transform: translateY(16px) scale(.98);
  transition: transform var(--transition);
}
.offer-ov.is-open .offer { transform: none; }

.offer__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-panel-2); border: 1px solid var(--c-line); color: var(--c-ink);
  display: grid; place-items: center; transition: var(--transition);
}
.offer__close:hover { background: var(--grad-gold); color: #fff; border-color: transparent; transform: rotate(90deg); }
.offer__close svg { width: 20px; height: 20px; }

.offer h2 { font-size: var(--fs-xl); margin-bottom: .5rem; padding-right: 3rem; }
.offer__intro { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--space-3); }

/* Direktkontakt oben */
.offer__direct { display: grid; gap: .6rem; }
.offer__big {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--c-line); background: var(--c-panel);
  transition: var(--transition);
}
.offer__big:hover { transform: translateY(-2px); border-color: transparent; }
.offer__big .oi { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.offer__big .oi svg { width: 22px; height: 22px; }
.offer__big b { display: block; font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); line-height: 1.2; }
.offer__big span { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: .1rem; }
.offer__big--wa { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.35); }
.offer__big--wa:hover { background: rgba(37,211,102,.16); box-shadow: 0 14px 30px -12px rgba(37,211,102,.5); }
.offer__big--wa .oi { background: #25d366; color: #fff; }
.offer__big--tel .oi { background: var(--c-accent-sft); color: var(--c-accent-dk); }
.offer__big--tel:hover { box-shadow: var(--shadow); }

/* Trenner */
.offer__or { display: flex; align-items: center; gap: .9rem; margin: var(--space-3) 0; color: var(--c-muted); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.offer__or::before, .offer__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* Auswahl: Was wird gebraucht? */
.offer__pick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0;
}
.offer__pick input { position: absolute; opacity: 0; pointer-events: none; }
.offer__pick label {
  display: grid; place-items: center; gap: .4rem; text-align: center;
  padding: .85rem .5rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--c-line); background: var(--c-panel);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-soft);
  transition: var(--transition);
}
.offer__pick label svg { width: 20px; height: 20px; color: var(--c-muted); transition: var(--transition); }
.offer__pick label:hover { border-color: var(--c-accent-dk); }
.offer__pick input:checked + label { border-color: var(--c-accent); background: var(--c-accent-sft); color: var(--c-ink); }
.offer__pick input:checked + label svg { color: var(--c-accent-dk); }
.offer__pick input:focus-visible + label { box-shadow: var(--ring); }

.offer form .field { margin-bottom: .7rem; }
.offer form label.fl { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: .3rem; }
.offer form input:not([type="checkbox"]):not([type="radio"]), .offer form textarea {
  width: 100%; padding: .8rem 1rem; background: var(--c-panel);
  color: var(--c-ink); border: 1.5px solid var(--c-line); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); transition: border-color var(--transition), box-shadow var(--transition);
}
.offer form input:not([type="checkbox"]):not([type="radio"]):focus, .offer form textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--ring); }
.offer form textarea { min-height: 90px; resize: vertical; }
.offer__row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.offer__consent { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--c-muted); margin: .2rem 0 .9rem; }
.offer__consent input[type="checkbox"] {
  width: 17px; height: 17px; flex-shrink: 0; margin: .1rem 0 0;
  padding: 0; border-radius: 4px; accent-color: var(--c-accent); cursor: pointer;
}
.offer__consent a { color: var(--c-accent-dk); text-decoration: underline; }
.offer__status { font-size: var(--fs-sm); margin-top: .7rem; display: none; }
.offer__status.is-visible { display: block; }
.offer__status.is-success { color: var(--c-success); }
.offer__status.is-error { color: var(--c-error); }

@media (max-width: 520px) {
  .offer__pick { grid-template-columns: 1fr; }
  .offer__pick label { grid-auto-flow: column; justify-content: start; gap: .6rem; text-align: left; }
  .offer__row { grid-template-columns: 1fr; }
}

/* ===================== News-Meldung auf der Startseite ===================== */
.news-pop { width: min(520px, 100%); text-align: center; }
.news-pop .eyebrow { justify-content: center; }
.news-pop h2 { padding-right: 0; margin-bottom: .8rem; }
.news-pop__bild {
  margin: -.4rem -.4rem 1.3rem; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-panel);
}
.news-pop__bild img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.news-pop__text { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: .8rem; }
.news-pop__text:last-of-type { margin-bottom: var(--space-3); }
.news-pop .btn--block { margin-top: .4rem; }

/* ===================== Lagerware ===================== */
.leer-box {
  max-width: 640px; margin-inline: auto; text-align: center;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
}
.leer-box h2 { font-size: var(--fs-xl); margin-bottom: .8rem; }
.leer-box p { color: var(--c-ink-soft); }
.leer-box .hero__cta { justify-content: center; }

.lager-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.lager-karte {
  display: flex; flex-direction: column;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition);
}
.lager-karte:hover { border-color: var(--c-accent); transform: translateY(-4px); box-shadow: var(--shadow); }

.lager-karte__bild {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 4 / 5; background: var(--c-panel-2); border: 0; cursor: zoom-in;
}
.lager-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lager-karte__leer { display: grid; place-items: center; height: 100%; font-size: var(--fs-xs); color: var(--c-muted); }
.lager-karte__zaehler, .lager-karte__bestand {
  position: absolute; bottom: .7rem; font-size: var(--fs-xs); font-weight: 600;
  padding: .25rem .65rem; border-radius: var(--radius-pill);
  background: rgba(8,8,10,.72); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lager-karte__zaehler { left: .7rem; }
.lager-karte__bestand { right: .7rem; background: rgba(76,207,142,.9); color: #06210f; }

.lager-karte__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; }
.lager-karte__body h3 { font-size: var(--fs-md); margin-bottom: .3rem; }
.lager-karte__titel { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lager-karte__titel:hover { color: var(--c-accent-lt); }
.lager-karte__merkmale { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: .5rem; }
.lager-karte__text { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: .6rem; }
.lager-karte__preis { font-family: var(--font-display); font-size: var(--fs-md); color: var(--c-accent-lt); margin-bottom: .9rem; }
.lager-karte__aktion { display: flex; gap: .5rem; align-items: center; margin-top: auto; flex-wrap: wrap; }
.lager-karte__add { flex: 1; min-width: 132px; justify-content: center; }
.lager-karte__add.is-drin { background: var(--c-success); border-color: transparent; }

/* Mengenwähler */
.menge { display: flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-panel-2); }
.menge__btn {
  width: 34px; height: 38px; border: 0; background: none; cursor: pointer;
  color: var(--c-ink-soft); font-size: 1.1rem; line-height: 1; transition: var(--transition);
}
.menge__btn:hover { color: var(--c-accent-lt); }
.menge__feld {
  width: 42px; height: 38px; border: 0; background: none; text-align: center;
  color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600; padding: 0;
  -moz-appearance: textfield;
}
.menge__feld::-webkit-outer-spin-button, .menge__feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menge__feld:focus { outline: none; box-shadow: none; }

/* Anfrage-Bereich */
.anfrage-box {
  max-width: 760px; margin-inline: auto;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
}
.anfrage-box .section-head { margin-bottom: var(--space-3); }
.anfrage-liste { margin-bottom: var(--space-3); }
.anfrage-leer { font-size: var(--fs-sm); color: var(--c-muted); }
.anfrage-zeile {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--c-line);
}
.anfrage-zeile img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.anfrage-zeile__text { flex: 1; min-width: 0; }
.anfrage-zeile__text b { display: block; font-size: var(--fs-sm); color: var(--c-ink); }
.anfrage-zeile__text span { font-size: var(--fs-xs); color: var(--c-muted); }
.anfrage-zeile__weg {
  border: 0; background: none; cursor: pointer; color: var(--c-muted);
  font-size: var(--fs-xs); text-decoration: underline; padding: .2rem;
}
.anfrage-zeile__weg:hover { color: var(--c-error); }

/* Schwebende Leiste mit dem Anfragestand */
.anfrage-bar {
  position: fixed; z-index: 900; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem .6rem .6rem 1.2rem; border-radius: var(--radius-pill);
  background: rgba(20,20,23,.86); border: 1px solid var(--c-line);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 2rem);
}
.anfrage-bar__text { font-size: var(--fs-sm); color: var(--c-ink-soft); white-space: nowrap; }
.anfrage-bar__text b { color: var(--c-ink); font-family: var(--font-display); font-size: var(--fs-md); }

/* Detailfenster eines Lagerartikels */
.lager-detail { width: min(880px, 100%); }
.lager-detail__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-3); align-items: start; }
.lager-detail__gross {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
}
.lager-detail__gross img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lager-detail__mini { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.lager-detail__mini button {
  width: 58px; height: 58px; padding: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--c-line); background: none; cursor: pointer; transition: var(--transition);
}
.lager-detail__mini button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lager-detail__mini button[aria-current] { border-color: var(--c-accent); box-shadow: var(--ring); }
.lager-detail__daten { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-2); }
.lager-detail__text { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: .8rem; white-space: pre-line; }
.lager-detail__preis { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-accent-lt); margin-bottom: .9rem; }
.lager-detail__aktion { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }

@media (max-width: 720px) {
  .lager-detail__grid { grid-template-columns: 1fr; }
  /* Rechts bleibt Platz für die schwebenden WhatsApp-/Anfahrt-Schaltflächen,
     sonst liegt die Leiste darunter und der Knopf ist nicht erreichbar. */
  .anfrage-bar {
    left: 1rem; right: 76px; transform: none;
    justify-content: space-between; gap: .6rem; padding-left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .anfrage-bar__lang { display: none; }
  .anfrage-bar .btn { flex-shrink: 0; padding-inline: 1rem; }
}
/* Bildunterschrift unter Galerien auf hellem Grund (Referenzen: Speisekarten & Print) */
.section--light .gallery-note, .section--surface .gallery-note { color: #54545c; }

/* Fließtext-Links auf hellem Grund.
   --c-accent-dk (#f04652) ist für Dunkel gedacht und kommt auf Hell nur auf
   3,4:1 – zu wenig. --c-accent (#d6202c) erreicht 5,1:1 und erfüllt AA. */
.section--light p a:not(.btn),
.section--surface p a:not(.btn),
.section--light li a:not(.btn),
.section--surface li a:not(.btn),
.section--light .gallery-note a,
.section--surface .gallery-note a,
.section--light .acc-panel__inner a,
.section--surface .acc-panel__inner a { color: var(--c-accent); }

/* Leistungs-Kachel mit freigestelltem Produktfoto (transparentes PNG).
   Mit object-fit:cover würde das aufgefächerte Motiv seitlich beschnitten –
   deshalb ganz zeigen, nach oben gerückt, damit unten Platz für den Text bleibt. */
.svc--produkt { background: #eeeef1; }
.svc--produkt .svc__bg { object-fit: contain; object-position: 50% 24%; }
.svc--produkt .svc__index { color: rgba(20,20,23,.28); }
.svc--produkt:hover .svc__index { color: var(--c-accent); }

/* ---------------------------------------------------------------
   Dunkle Kästen in hellen Abschnitten.
   .section--light/--surface färben pauschal ALLE Überschriften dunkel.
   Steht darin ein Kasten mit dunklem Grund (CTA-Band, Anfrage-Kasten),
   ergab das dunkle Schrift auf dunklem Grund – Kontrast 1,1:1.
   Hier bekommen diese Kästen ihre hellen Farben zurück.
   --------------------------------------------------------------- */
.section--light .cta-band h1, .section--light .cta-band h2,
.section--light .cta-band h3, .section--light .cta-band h4,
.section--surface .cta-band h1, .section--surface .cta-band h2,
.section--surface .cta-band h3, .section--surface .cta-band h4,
.section--light .anfrage-box h1, .section--light .anfrage-box h2,
.section--light .anfrage-box h3, .section--light .anfrage-box h4,
.section--surface .anfrage-box h1, .section--surface .anfrage-box h2,
.section--surface .anfrage-box h3, .section--surface .anfrage-box h4 { color: #fff; }

.section--light .cta-band p, .section--surface .cta-band p { color: rgba(245,245,246,.78); }
.section--light .anfrage-box p, .section--light .anfrage-box .lead,
.section--surface .anfrage-box p, .section--surface .anfrage-box .lead { color: var(--c-ink-soft); }
.section--light .cta-band strong, .section--surface .cta-band strong,
.section--light .anfrage-box strong, .section--surface .anfrage-box strong { color: #fff; }

/* Kennzeile im dunklen Kasten: --c-accent (dunkles Rot) käme dort nur auf
   3,5:1. Auf dunklem Grund gehört die hellere Variante hin. */
.section--light .cta-band .eyebrow, .section--surface .cta-band .eyebrow,
.section--light .anfrage-box .eyebrow, .section--surface .anfrage-box .eyebrow { color: var(--c-accent-dk); }

/* Badge auf hellem Grund: --c-accent-dk (#f04652) auf hellrosa Fläche
   ergibt nur 2,6:1. Das dunklere --c-accent kommt auf 5,1:1. */
.section--light .badge, .section--surface .badge { color: var(--c-accent); }

/* Rotes Herz in „Made with ♥ in Berlin" */
.hm-herz {
  display: inline-block; width: .95em; height: .95em;
  vertical-align: -.12em; margin-inline: .12em;
  color: var(--c-accent-dk);
}
/* Auf hellem Grund das dunklere Rot – das helle wirkt dort blass */
.section--light .hm-herz, .section--surface .hm-herz { color: var(--c-accent); }

/* Badge auf hellem Grund: --c-accent kommt auf der hellrosa Fläche nur auf
   3,7:1. Ein dunkleres Rot erreicht 5,7:1. */
.section--light .badge, .section--surface .badge { color: #a30d17; }