/* ===== Brand tokens — aus brand.md, Palette "Ivory Linen" ===== */
  :root {
    /* "Sol de España" — warmes, fröhliches Spanien-Flair: Paprika/Terrakotta
       als Primary, sonnige Safran-Goldtöne als zweiter Akzent, sandiges Creme
       als Grund. Ersetzt "Ivory Linen" auf Wunsch — wärmer, kräftiger. */
    --background: oklch(0.97 0.018 65);
    --foreground: oklch(0.24 0.035 30);
    --card: oklch(1.00 0.006 65);
    --card-foreground: oklch(0.24 0.035 30);
    --primary: oklch(0.53 0.17 32);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.93 0.03 68);
    --muted: oklch(0.94 0.022 65);
    --muted-foreground: oklch(0.46 0.03 40);
    --accent: oklch(0.90 0.05 70);
    --gold: oklch(0.78 0.14 78);
    --gold-foreground: oklch(0.20 0.03 60);
    --border: oklch(0.87 0.03 60);
    --input: oklch(0.95 0.025 65);
    --ring: oklch(0.53 0.17 32);
    --radius: 0.625rem;
    --gradient-bg: linear-gradient(150deg, oklch(0.97 0.018 65) 0%, oklch(0.93 0.035 55) 100%);
    /* One shared grade over every photo so six different cameras/events read
       as one consistent brand look — warm, slightly lifted blacks, a touch
       less blue than the raw files. */
    --photo-grade: saturate(1.08) sepia(0.14) contrast(1.04) brightness(0.99) hue-rotate(-2deg);
    --gradient-accent: linear-gradient(100deg, oklch(0.53 0.17 32) 0%, oklch(0.68 0.16 55) 55%, oklch(0.78 0.14 78) 100%);

    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Type scale — one ladder, no ad-hoc px. Fraunces is reserved for the
       hero display and the logotype/pull-quote (see brand.md); everything
       else in the hierarchy runs on Inter so the serif stays a moment,
       not a habit. */
    --fs-2xs: 0.6875rem;  /* 11px — eyebrow/label caps */
    --fs-xs: 0.78125rem;  /* 12.5px — captions, notes, badges */
    --fs-sm: 0.84375rem;  /* 13.5px — secondary body (card copy) */
    --fs-base: 0.9375rem; /* 15px — default paragraph */
    --fs-md: 1rem;        /* 16px — lede / emphasized body */
    --fs-lg: 1.1875rem;   /* 19px — card headings, logotype */
    --fs-xl: clamp(1.5rem, 3vw, 2.1rem);   /* CTA band title */
    --fs-2xl: clamp(1.6rem, 3vw, 2.4rem);  /* section titles */
    --fs-display: clamp(1.8rem, 3.6vw, 2.9rem); /* hero only — sized for a longer, sentence-style headline */

    --tracking-eyebrow: 0.12em;
    --lh-heading: 1.15;
    --lh-body: 1.6;
  }

  /* La Vida Loca's warm "Sol de España" look is the brand — the site always
     shows it, regardless of a visitor's OS dark-mode setting. */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 108px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
  body {
    margin: 0; background: var(--gradient-bg); color: var(--foreground);
    font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ===== Scroll-reveal (progressive enhancement — visible by default,
     only animates in when motion is allowed and JS has run) ===== */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; transform: translateY(14px);
      transition: opacity 420ms ease-out, transform 420ms ease-out;
    }
    .reveal.is-visible { opacity: 1; transform: none; }
    /* Staggered cascade for grids — first mount only, per animation.md */
    /* Directional variants — same reveal system, different entry direction,
       so "Über uns" doesn't feel like a copy-paste of every other section. */
    .reveal-left { transform: translate(-24px, 0); }
    .reveal-right { transform: translate(24px, 0); }
    .reveal-left.is-visible, .reveal-right.is-visible { transform: none; }
    .gallery-grid .reveal:nth-child(1) { transition-delay: 0ms; }
    .gallery-grid .reveal:nth-child(2) { transition-delay: 70ms; }
    .gallery-grid .reveal:nth-child(3) { transition-delay: 140ms; }
    .gallery-grid .reveal:nth-child(4) { transition-delay: 210ms; }
    .services-grid .reveal:nth-child(1) { transition-delay: 0ms; }
    .services-grid .reveal:nth-child(2) { transition-delay: 60ms; }
    .services-grid .reveal:nth-child(3) { transition-delay: 120ms; }
    .services-grid .reveal:nth-child(4) { transition-delay: 180ms; }
    .services-grid .reveal:nth-child(5) { transition-delay: 240ms; }
    .services-grid .reveal:nth-child(6) { transition-delay: 300ms; }
  }


  /* ===== Hero slow zoom (Ken Burns) — communicates "living" photography,
     not decoration; off entirely under reduced motion ===== */
  @media (prefers-reduced-motion: no-preference) {
    .hero-media img { animation: kenburns 28s ease-in-out infinite alternate; }
    @keyframes kenburns {
      from { transform: scale(1); }
      to { transform: scale(1.08); }
    }
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ===== Header ===== */
  /* Overlays the hero photo transparently, like grischaefer.de's floating
     menu on their full-bleed image — solidifies once the user scrolls past. */
  header.site {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    --nav-fg: #FBF7F2;
    color: var(--nav-fg);
    background: linear-gradient(rgba(10,6,3,0.28), rgba(10,6,3,0));
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background-color 250ms ease-out, box-shadow 250ms ease-out, backdrop-filter 250ms ease-out;
  }
  header.site.is-scrolled {
    --nav-fg: var(--foreground);
    background: color-mix(in oklch, var(--background) 90%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border), 0 8px 24px -14px rgba(30,15,5,0.25);
  }
  .nav-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; gap: 20px;
  }
  .brand-logo { display: flex; align-items: center; gap: 12px; margin-right: 16px; text-decoration: none; flex-shrink: 0; }
  .brand-logo img {
    /* The source file is a square canvas with real content only in the
       middle — sized up well beyond a normal nav icon so the wordmark and
       line art actually read, not just a blur of red on white. */
    height: 78px; width: auto; border-radius: 10px;
    box-shadow: 0 4px 16px rgba(20,10,5,0.3);
    transition: height 250ms ease-out;
  }
  header.site.is-scrolled .brand-logo img { height: 60px; }
  @media (max-width: 480px) {
    .brand-logo img { height: 62px; }
    header.site.is-scrolled .brand-logo img { height: 50px; }
  }
  /* Real text next to the mark — the logo art alone doesn't read the name
     reliably at nav size, so the name is spelled out plainly beside it. */
  .brand-name {
    font-family: var(--font-sans); font-weight: 700;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted-foreground); white-space: nowrap;
    text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 10px rgba(255,255,255,0.55);
  }
  header.site.is-scrolled .brand-name { text-shadow: none; }
  /* Below tablet width there isn't room for the logo mark, the wordmark,
     the CTA pill and the menu button all at once — otherwise the CTA gets
     pushed off the right edge of the screen (real bug on an iPhone 16 at
     393px). The mark itself is unreadable this small anyway, and the
     brand strip below the header already spells the name out clearly —
     showing both reads as a duplicate, so the whole mark+wordmark link
     is dropped on mobile in favour of the strip. */
  @media (max-width: 640px) { .brand-logo { display: none; } }

  nav.primary-nav { display: none; gap: 30px; font-size: var(--fs-xs); }
  /* Nav links read as real pill buttons — a translucent fill + border that
     tints itself from currentColor, so it looks right whether the header
     is transparent-over-photo or solid-after-scroll, without two separate
     rule sets to keep in sync. Fixes links being unreadable over a bright
     photo until the user had already scrolled past the hero. */
  nav.primary-nav a {
    position: relative;
    display: inline-flex; align-items: center; white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    background: color-mix(in oklch, currentColor 14%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  nav.primary-nav a:hover, nav.primary-nav a:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px color-mix(in oklch, var(--primary) 70%, transparent);
  }
  /* Extra insurance for legibility over a busy photo — gone once solid. */
  header.site:not(.is-scrolled) nav.primary-nav a,
  header.site:not(.is-scrolled) .brand-logo,
  header.site:not(.is-scrolled) .nav-toggle {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
  header.site:not(.is-scrolled) .brand-logo img { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }
  @media (min-width: 860px) { nav.primary-nav { display: flex; } }

  .nav-actions { display: flex; align-items: center; gap: 12px; }
  /* The header CTA sits right beside the pill nav links, so it should read
     as part of the same button family (shape, case, tracking) even though
     it keeps its own solid accent color to stand out as the primary action. */
  #nav-cta {
    font-family: var(--font-sans); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    font-size: 13px; padding: 11px 18px; border-radius: 999px; min-height: 0;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    padding: 11px 20px; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    min-height: 40px;
    transition: transform 100ms ease-out, opacity 150ms ease-out, background-color 150ms ease-out;
  }
  .btn:active { transform: translateY(1px) scale(0.98); transition-duration: 60ms; }
  .btn-primary {
    background: linear-gradient(135deg, oklch(0.57 0.18 30) 0%, oklch(0.50 0.17 25) 100%);
    color: var(--primary-foreground);
    box-shadow: 0 8px 22px -10px oklch(0.53 0.19 30 / 0.55), 0 1px 0 oklch(1 0 0 / 0.12) inset;
  }
  .btn-primary:hover {
    opacity: 1; transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px oklch(0.53 0.19 30 / 0.65), 0 1px 0 oklch(1 0 0 / 0.16) inset;
  }
  .btn-secondary { background: transparent; color: var(--foreground); border-color: var(--border); }
  .btn-secondary:hover { background: var(--muted); }
  .btn-on-photo { background: color-mix(in oklch, var(--background) 92%, transparent); color: var(--foreground); border-color: transparent; }
  .btn-on-photo:hover { background: var(--background); }

  /* Mobile nav toggle — labeled so it reads as "there's a whole menu here",
     not just a stray icon; the bars morph into an X when open, which also
     doubles as the close button (no separate X element needed). */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid color-mix(in oklch, currentColor 35%, transparent);
    background: transparent; color: inherit; cursor: pointer;
  }
  .nav-toggle-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  }
  .nav-toggle-icon .bar { transition: transform 200ms ease-out, opacity 150ms ease-out; transform-origin: 9px 9px; }
  .nav-toggle[aria-expanded="true"] .bar-top { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(-4.5px) rotate(-45deg); }
  @media (min-width: 860px) { .nav-toggle { display: none; } }
  @media (max-width: 359px) { .nav-toggle-label { display: none; } .nav-toggle { padding: 0; width: 40px; } }
  #mobile-menu {
    display: none; flex-direction: column; gap: 4px; padding: 10px 24px 18px;
    background: var(--background); color: var(--foreground);
    border-top: 1px solid var(--border);
    max-height: calc(100vh - 94px); overflow-y: auto;
  }
  #mobile-menu.open { display: flex; }
  #mobile-menu a { padding: 12px 4px; text-decoration: none; font-size: var(--fs-base); border-radius: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  #mobile-menu a:hover { background: var(--muted); }
  @media (min-width: 860px) { #mobile-menu { display: none !important; } }
  /* While the mobile menu is open, the page behind it must not scroll —
     otherwise the hero photo visibly drifts underneath the fixed header. */
  body.mobile-menu-open { overflow: hidden; }
  /* The menu must end at the VISIBLE bottom edge, or its last links sit off-screen with nothing
     left to scroll: 100vh on iPhone is the height WITHOUT Safari's toolbar (dvh is the real one),
     the header is 124px tall once the brand strip shows (not 94), and the sticky CTA bar sits on
     top of the menu (z 40 vs 30) and covered its bottom ~100px. */
  #mobile-menu { max-height: calc(100dvh - 94px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  @media (max-width: 640px) {
    #mobile-menu { max-height: calc(100vh - 124px); max-height: calc(100dvh - 124px); }
    body.mobile-menu-open .mobile-sticky-cta { display: none; }
  }

  /* ===== Hero ===== */
  .hero { position: relative; overflow: hidden; padding: 0; }
  .hero-media {
    position: relative; height: 100vh; min-height: 560px; max-height: 900px;
  }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); }
  .hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(15,10,7,0.75) 0%, rgba(15,10,7,0.30) 55%, rgba(15,10,7,0.15) 100%);
  }
  /* Separate, stronger fade just behind the nav row — the bottom scrim alone
     doesn't reach the top, so nav text was unreadable over bright sky/leaves. */
  .hero-nav-scrim {
    position: absolute; top: 0; left: 0; right: 0; height: 220px;
    background: linear-gradient(180deg, rgba(10,6,3,0.62) 0%, rgba(10,6,3,0.32) 55%, rgba(10,6,3,0) 100%);
    pointer-events: none;
  }
  .hero-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 24px 56px; color: #FBF7F2;
  }
  .hero-inner { max-width: 1200px; margin: 0 auto; }
  .hero-eyebrow { font-size: var(--fs-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: 0.85; margin: 0 0 12px; }
  .hero-title {
    font-family: var(--font-serif); font-weight: 600;
    font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.01em;
    margin: 0 0 18px; max-width: 20ch;
  }
  .hero-title em { font-style: normal; color: oklch(0.82 0.10 40); }
  .hero-sub { font-size: var(--fs-md); max-width: 46ch; opacity: 0.92; margin: 0 0 26px; line-height: var(--lh-body); }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ===== Section shell ===== */
  section { padding: 72px 0; }
  .section-head { max-width: 640px; margin: 0 0 40px; }
  .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--primary); font-weight: 600; margin: 0 0 10px; }
  .section-title {
    font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 600;
    letter-spacing: -0.015em; line-height: var(--lh-heading); margin: 0 0 12px;
  }
  .section-body { font-size: var(--fs-base); color: var(--muted-foreground); line-height: var(--lh-body); margin: 0; max-width: 62ch; }
  .lede { font-size: var(--fs-md); }

  /* ===== Leistungen ===== */
  /* Photo tiles instead of flat icon cards — editorial, image-led,
     closer to how a restaurant/events site like grischaefer.de presents
     its menu categories: the photo IS the pitch, text sits on top of it. */
  .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
  /* Fünf Kacheln auf einem Dreier-Raster lassen sonst ein Loch in Reihe 2 —
     die letzte Kachel füllt die Reihe stattdessen bewusst breiter aus. */
  @media (min-width: 640px) {
    .services-grid > :nth-child(5):last-child { grid-column: span 2; aspect-ratio: auto; }
    .services-grid > :nth-child(5):last-child .service-body { max-width: 60%; }
  }
  /* Seit der Foodtruck raus ist (28.09.2026) sind es vier Kacheln: 2 × 2 bis Tablet, eine Reihe ab Desktop. */
  @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
  .service-card {
    position: relative; overflow: hidden; border-radius: 18px;
    aspect-ratio: 3 / 4; display: block; text-decoration: none; color: #FBF7F2;
    box-shadow: 0 14px 34px -18px rgba(30,12,5,0.4);
  }
  .service-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: var(--photo-grade);
  }
  @media (prefers-reduced-motion: no-preference) {
    .service-card img { transition: transform 450ms ease-out; }
    .service-card:hover img, .service-card:focus-visible img { transform: scale(1.08); }
  }
  .service-card .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(12,7,4,0.86) 0%, rgba(12,7,4,0.25) 60%, rgba(12,7,4,0.05) 100%);
  }
  .service-card .service-num {
    position: absolute; top: 14px; left: 16px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
    opacity: 0.75;
  }
  .service-card .service-body { position: absolute; left: 16px; right: 16px; bottom: 16px; }
  .service-card h3 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 5px; }
  .service-card p { font-size: 12px; line-height: 1.5; margin: 0; opacity: 0.9; }
  @media (min-width: 640px) { .service-card p { font-size: var(--fs-xs); } }

  /* ===== Galerie ===== */
  .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
  .gallery-item {
    position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5;
    background: var(--muted); display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease-out; filter: var(--photo-grade); }
  .gallery-item:hover img { transform: scale(1.05); }
  .gallery-item:focus-visible { outline-offset: 3px; }
  .gallery-item .tag {
    position: absolute; left: 10px; bottom: 10px;
    font-size: 11px; letter-spacing: 0.04em; color: #fff;
    background: rgba(15,10,7,0.55); padding: 5px 10px; border-radius: 999px;
  }
  .gallery-cta { margin-top: 28px; }

  /* ===== Food-Galerie — eigene, große Bildstrecke nur für Speisen ===== */
  .food-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) { .food-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
  .food-grid .gallery-item { aspect-ratio: 4 / 3; }
  .food-grid .gallery-item.wide { aspect-ratio: 16 / 9; }
  @media (min-width: 640px) { .food-grid .gallery-item.wide { grid-column: 1 / -1; } }

  /* ===== Lightbox ===== */
  .lightbox {
    position: fixed; inset: 0; z-index: 50; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(10, 8, 6, 0.82);
  }
  .lightbox.is-open { display: flex; }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox { opacity: 0; transition: opacity 200ms ease-out; }
    .lightbox.is-open { opacity: 1; }
  }
  .lightbox-figure { position: relative; max-width: min(92vw, 1100px); max-height: 88vh; }
  .lightbox-figure img { max-width: 100%; max-height: 88vh; border-radius: 10px; display: block; }
  .lightbox-caption { color: #F5EFEC; font-size: 13px; margin: 10px 2px 0; opacity: 0.85; }
  .lightbox-close {
    position: absolute; top: -14px; right: -14px;
    width: 36px; height: 36px; border-radius: 999px; border: none;
    background: #FBF7F2; color: #1F1A15; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }

  /* ===== Full-bleed photo section shell — reused by Referenzen ===== */
  .photo-section { position: relative; overflow: hidden; color: #FBF7F2; }
  .photo-section-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    filter: var(--photo-grade);
  }
  @media (prefers-reduced-motion: no-preference) {
    .photo-section-bg { animation: kenburns 32s ease-in-out infinite alternate; }
  }
  .photo-section-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(12,7,4,0.88) 0%, rgba(30,14,8,0.72) 55%, rgba(40,18,8,0.6) 100%);
  }
  .photo-section > .container { position: relative; z-index: 2; }
  .eyebrow-on-photo { color: var(--gold); }
  .section-title.on-photo { color: #FBF7F2; }
  .section-body.on-photo-muted { color: rgba(251,247,242,0.8); }

  /* ===== Referenzen ===== */
  .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 720px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
  .testimonial-card {
    background: var(--card); border: 1px dashed var(--border); border-radius: 16px;
    padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; position: relative;
  }
  .testimonial-card.glass {
    background: rgba(251,247,242,0.1); backdrop-filter: blur(14px);
    border: 1px dashed rgba(251,247,242,0.35); color: #FBF7F2;
  }
  .testimonial-card.glass .testimonial-quote { color: #FBF7F2; }
  .testimonial-card.glass .testimonial-author { color: rgba(251,247,242,0.75); }
  .testimonial-card.glass .placeholder-badge {
    background: rgba(251,247,242,0.12); border-color: rgba(251,247,242,0.3); color: rgba(251,247,242,0.85);
  }
  .placeholder-badge {
    align-self: flex-start; font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border);
    padding: 3px 9px; border-radius: 999px;
  }
  .testimonial-quote { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.5; margin: 0; color: var(--muted-foreground); font-style: italic; }
  .testimonial-author { font-size: var(--fs-sm); color: var(--muted-foreground); margin: 0; }
  .testimonial-note {
    margin-top: 22px; font-size: var(--fs-sm); color: var(--muted-foreground);
    border-left: 3px solid var(--primary); padding: 10px 16px; background: var(--muted); border-radius: 0 10px 10px 0;
  }
  .testimonial-note.glass {
    color: rgba(251,247,242,0.85); background: rgba(251,247,242,0.1); backdrop-filter: blur(14px);
    border-left-color: var(--gold);
  }

  .event-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .event-pill {
    font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
    background: var(--secondary); border: 1px solid var(--border); color: var(--muted-foreground);
  }

  /* ===== CTA band — now a full-bleed photo moment, not a flat gradient card ===== */
  .cta-band { text-align: center; padding: 40px 0; color: #FBF7F2; }
  .cta-band h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-xl); letter-spacing: -0.01em; line-height: var(--lh-heading); margin: 0 0 10px; }
  .cta-band p { margin: 0 0 24px; opacity: 0.92; font-size: var(--fs-base); }
  .cta-band .btn-secondary { background: color-mix(in oklch, #FBF7F2 12%, transparent); color: #FBF7F2; border-color: color-mix(in oklch, #FBF7F2 35%, transparent); }
  .cta-band .btn-secondary:hover { background: color-mix(in oklch, #FBF7F2 20%, transparent); }

  /* ===== Kontakt ===== */
  /* ===== Über uns — Text + versetztes Fotopaar ===== */
  .about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
  @media (min-width: 860px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
  .about-photos { position: relative; height: 380px; }
  @media (min-width: 860px) { .about-photos { height: 440px; } }
  .about-photo {
    position: absolute; border-radius: 16px; object-fit: cover;
    box-shadow: 0 18px 40px -18px rgba(30,12,5,0.35);
    filter: var(--photo-grade);
  }
  .about-photo-a { width: 62%; height: 78%; top: 0; left: 0; z-index: 1; }
  .about-photo-b { width: 55%; height: 62%; bottom: 0; right: 0; z-index: 2; border: 6px solid var(--background); }
  @media (prefers-reduced-motion: no-preference) {
    .about-photo { transition: transform 400ms ease-out; }
    .about-photo-a:hover { transform: translateY(-4px) rotate(-0.6deg); }
    .about-photo-b:hover { transform: translateY(-4px) rotate(0.8deg); }
  }

  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact-grid > * { min-width: 0; }
  .contact-list a { overflow-wrap: anywhere; }
  @media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
  .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .contact-list a { text-decoration: none; font-size: var(--fs-base); display: flex; align-items: center; gap: 10px; }
  .contact-list a:hover { color: var(--gold); }
  .contact-list .label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); display: block; margin-bottom: 2px; }
  .contact-list.on-photo a { color: #FBF7F2; }
  .contact-list.on-photo .label { color: rgba(251,247,242,0.7); }

  form.inquiry { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px; display: grid; gap: 14px; }
  form.inquiry.glass {
    background: rgba(251,247,242,0.12); backdrop-filter: blur(16px);
    border: 1px solid rgba(251,247,242,0.25);
  }
  form.inquiry.glass .field label { color: #FBF7F2; }
  form.inquiry.glass .field input, form.inquiry.glass .field select, form.inquiry.glass .field textarea {
    background: rgba(251,247,242,0.1); border-color: rgba(251,247,242,0.3); color: #FBF7F2;
  }
  form.inquiry.glass .field input::placeholder, form.inquiry.glass .field textarea::placeholder { color: rgba(251,247,242,0.55); }
  form.inquiry.glass .form-note { color: rgba(251,247,242,0.75); }
  .field { display: grid; gap: 6px; }
  .field label { font-size: var(--fs-sm); font-weight: 500; }
  .field input, .field select, .field textarea {
    font-family: var(--font-sans); font-size: var(--fs-base); padding: 10px 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--input); color: var(--foreground);
    min-height: 40px;
  }
  .field textarea { min-height: 96px; resize: vertical; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
  .form-note { font-size: var(--fs-xs); color: var(--muted-foreground); margin: 0; }

  /* ===== Footer ===== */
  footer.site {
    border-top: 1px solid var(--border); padding: 32px 0; margin-top: 40px;
  }
  .footer-row {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--muted-foreground);
  }
  .footer-links { display: flex; gap: 20px; }
  .footer-links a { text-decoration: none; }
  .footer-links a:hover { color: var(--primary); }

  /* ===== Multi-page erweiterung — Nav-Dropdown, Unterseiten-Hero, Inhaltslisten ===== */
  nav.primary-nav .has-dropdown { position: relative; }
  nav.primary-nav .dropdown-toggle {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
    background: color-mix(in oklch, currentColor 14%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    border-radius: 999px; padding: 9px 16px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 13px;
  }
  nav.primary-nav .dropdown-toggle svg { width: 10px; height: 10px; transition: transform 150ms ease-out; }
  nav.primary-nav .has-dropdown:hover .dropdown-toggle svg,
  nav.primary-nav .has-dropdown:focus-within .dropdown-toggle svg { transform: rotate(180deg); }
  nav.primary-nav .dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 8px; box-shadow: 0 16px 40px -14px rgba(20,10,5,0.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
  }
  nav.primary-nav .has-dropdown:hover .dropdown-menu,
  nav.primary-nav .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
  nav.primary-nav .dropdown-menu a {
    display: block; background: none; border: none; border-radius: 8px;
    color: var(--foreground); padding: 10px 12px; font-size: 13px;
    text-transform: none; letter-spacing: 0; font-weight: 500;
  }
  nav.primary-nav .dropdown-menu a:hover { background: var(--muted); }
  #mobile-menu .submenu { display: flex; flex-direction: column; padding-left: 14px; gap: 2px; margin-bottom: 6px; }
  #mobile-menu .submenu a { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.85; }
  #mobile-menu .submenu-label {
    padding: 12px 4px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted-foreground);
  }

  /* Kleinerer Hero für Unterseiten — gleiches System wie der Homepage-Hero, weniger hoch */
  .page-hero { position: relative; overflow: hidden; padding: 0; min-height: 420px; }
  .page-hero .hero-media { height: 46vh; min-height: 420px; max-height: 480px; }
  .page-hero .hero-content { padding: 32px 24px 44px; }
  .page-hero .hero-title { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20ch; }

  /* Inhaltslisten — für die vielen Bullet-Punkte aus Andys Leistungsübersicht */
  .content-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
  .content-tags .tag-chip {
    font-size: var(--fs-sm); padding: 8px 16px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border); color: var(--foreground);
  }
  .check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
  @media (min-width: 640px) { .check-list.two-col { grid-template-columns: 1fr 1fr; } }
  .check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.5; }
  .check-list li::before {
    content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px;
  }

  .page-section-cta {
    margin-top: 44px; padding: 32px; border-radius: 18px; background: var(--card);
    border: 1px solid var(--border); text-align: center;
  }
  .page-section-cta h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700; margin: 0 0 8px; }
  .page-section-cta p { color: var(--muted-foreground); font-size: var(--fs-base); margin: 0 0 18px; }

  .two-col-media { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
  @media (min-width: 860px) { .two-col-media { grid-template-columns: 1fr 1fr; gap: 48px; } }
  .two-col-media img { width: 100%; border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; filter: var(--photo-grade); box-shadow: 0 18px 40px -18px rgba(30,12,5,0.35); }
  .two-col-media.reverse { direction: rtl; } .two-col-media.reverse > * { direction: ltr; }

  .placeholder-block {
    border: 1px dashed var(--border); border-radius: 16px; padding: 26px;
    background: var(--muted); color: var(--muted-foreground); font-size: var(--fs-sm); line-height: 1.6;
  }
  .placeholder-block strong { color: var(--foreground); }

  /* Budget-Auswahl im Formular */
  .budget-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  @media (min-width: 480px) { .budget-options { grid-template-columns: repeat(4, 1fr); } }
  .budget-option { position: relative; }
  .budget-option input { position: absolute; opacity: 0; }
  .budget-option label {
    display: block; text-align: center; font-size: 12.5px; padding: 10px 6px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--input); cursor: pointer; transition: background-color 120ms, border-color 120ms;
  }
  .budget-option input:checked + label { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .budget-option input:focus-visible + label { outline: 2px solid var(--ring); outline-offset: 2px; }

  .checkbox-row { display: flex; align-items: center; gap: 8px; }
  .checkbox-row input { width: 18px; height: 18px; accent-color: var(--primary); }
  .checkbox-row label { font-size: var(--fs-sm); }

  .footer-links-wrap { display: flex; flex-wrap: wrap; gap: 20px; }

  /* ===== Team-Karten ===== */
  .team-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
  .team-grid.single { max-width: 320px; }
  .team-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  }
  .team-card img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    filter: var(--photo-grade);
  }
  .team-card > div { padding: 20px; }
  .team-card h3 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; margin: 0 0 2px; }
  .team-card .role { font-size: var(--fs-xs); color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
  .team-card p.bio { font-size: var(--fs-sm); color: var(--muted-foreground); line-height: 1.55; margin: 0; }

  /* ===== Besondere Effekte — Spanien-Flair & Wow-Momente ===== */

  /* Sanfte Ken-Burns-Bewegung auf allen Hero-Bildern — Website wirkt lebendig statt statisch */
  @media (prefers-reduced-motion: no-preference) {
    .hero-media img, .page-hero .hero-media img {
      animation: heroKenBurns 22s ease-in-out infinite alternate;
    }
  }
  @keyframes heroKenBurns {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
  }

  /* Glanz-Sweep über die primären Buttons beim Hover — kleiner, edler Wow-Moment */
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn-primary::after { transition: left 650ms ease; }
    .btn-primary:hover::after, .btn-primary:focus-visible::after { left: 130%; }
  }

  /* Galerie-Kacheln heben sich beim Hover spürbar ab */
  @media (prefers-reduced-motion: no-preference) {
    .gallery-item, .service-card, .team-card { transition: transform 380ms ease, box-shadow 380ms ease; }
    .gallery-item:hover, .service-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -18px rgba(30,12,5,0.4); }
    .team-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -18px rgba(30,12,5,0.28); }
  }

  /* Hero-Entrance — Eyebrow, Titel, Subline und Buttons fahren gestaffelt beim Laden der Seite hoch */
  @media (prefers-reduced-motion: no-preference) {
    .hero-eyebrow, .hero-title, .hero-sub, .hero-actions {
      opacity: 0; animation: heroRise 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-eyebrow  { animation-delay: 120ms; }
    .hero-title    { animation-delay: 240ms; }
    .hero-sub      { animation-delay: 380ms; }
    .hero-actions  { animation-delay: 520ms; }
  }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Sol-Flourish — kleines Sonnen-Symbol neben dem Eyebrow-Text im Hero, spanisches Flair */
  .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
  .hero-eyebrow::before {
    content: ''; width: 14px; height: 14px; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d9a441' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M22.5 12h-3M4.5 12h-3M19.1 4.9l-2 2M6.9 17.1l-2 2M19.1 19.1l-2-2M6.9 6.9l-2-2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-eyebrow::before { animation: solSpin 1200ms ease-out 200ms backwards; }
  }
  @keyframes solSpin {
    from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
  }

  /* Azulejo-Streifen — dezentes spanisches Kachelmuster als Trenner über dem Footer */
  footer.site {
    position: relative;
  }
  footer.site::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Crect width='40' height='10' fill='%23b5502e'/%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10 Z' fill='%23d9a441'/%3E%3Cpath d='M20 5 L25 0 L30 5 L25 10 Z' fill='%23d9a441'/%3E%3Ccircle cx='15' cy='5' r='2' fill='%23f4e6cf'/%3E%3Ccircle cx='35' cy='5' r='2' fill='%23f4e6cf'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-size: 40px 10px;
  }

  /* ===== Sticky Mobile-CTA — für Besucher, die nur scrollen statt zu klicken ===== */
  .mobile-sticky-cta { display: none; }
  @media (max-width: 640px) {
    .mobile-sticky-cta {
      display: flex; align-items: center; gap: 10px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--card);
      border-top: 1px solid var(--border);
      box-shadow: 0 -10px 26px -14px rgba(30,15,5,0.3);
    }
    .mobile-sticky-cta-call {
      display: flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; flex-shrink: 0;
      border-radius: 999px; border: 1px solid var(--border); background: var(--muted);
      color: var(--foreground);
    }
    .mobile-sticky-cta-btn { flex: 1; justify-content: center; min-height: 44px; }
    /* Room at the bottom so the fixed bar never covers footer content */
    body { padding-bottom: 68px; }
  }

  /* ===== Video-Highlights — echte Event-Clips, hoch oben auf der Startseite ===== */
  .video-highlight-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    max-width: 420px; margin: 0 auto;
  }
  .video-highlight-card {
    position: relative;
    border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 16;
    background: var(--muted);
    box-shadow: 0 18px 40px -18px rgba(30,12,5,0.35);
  }
  .video-highlight-card video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: var(--photo-grade);
  }
  .video-sound-toggle {
    position: absolute; right: 12px; bottom: 12px; z-index: 1;
    width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,10,7,0.55); color: #fff;
    backdrop-filter: blur(3px);
    transition: background-color 150ms ease-out, transform 150ms ease-out;
  }
  .video-sound-toggle:hover { background: rgba(15,10,7,0.75); transform: scale(1.06); }
  .video-sound-toggle svg { width: 20px; height: 20px; }

  /* Dunkles, kinoartiges Band für die Video-Highlights — passt zur Stimmung der Clips
     statt sie auf hellem Creme wirken zu lassen. */
  .highlights-dark {
    background: linear-gradient(160deg, oklch(0.16 0.03 30) 0%, oklch(0.23 0.04 40) 100%);
  }
  .highlights-dark .eyebrow { color: var(--gold); }
  .highlights-dark .section-title,
  .highlights-dark .section-body {
    color: oklch(0.97 0.02 65);
  }
  .highlights-dark .section-body { opacity: 0.85; }
  .highlights-dark .video-highlight-card {
    box-shadow: 0 18px 48px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  }

  /* Auf sehr schmalen Handys (u. a. iPhone mit 393px Breite) reicht der Platz
     sonst nicht für Logo + CTA + "Menü"-Label + Icon mit ordentlichem Abstand —
     hier ganz am Dateiende, damit diese Regeln alle früheren Basis-Regeln
     zuverlässig überschreiben. */
  @media (max-width: 420px) {
    .nav-actions { gap: 8px; }
    #nav-cta { padding: 10px 14px; font-size: 12px; }
    .nav-toggle { padding: 0 10px; }
  }

  /* ===== Hero-CTAs — eigener, hochwertigerer Look statt der generischen
     Standard-Buttons: warmer Verlauf statt Vollfarbe, Glas-Look für den
     zweiten Button, wandernder Pfeil beim Hover. ===== */
  .btn-hero {
    gap: 10px; padding: 15px 26px;
    font-weight: 600; letter-spacing: 0.01em;
    border-radius: 999px;
    transition: transform 220ms ease-out, box-shadow 220ms ease-out, background-color 220ms ease-out, border-color 220ms ease-out;
  }
  .btn-hero .btn-arrow { transition: transform 220ms ease-out; flex-shrink: 0; }
  .btn-hero:hover .btn-arrow { transform: translateX(4px); }
  .btn-hero:hover { transform: translateY(-2px); }

  .btn-hero.btn-primary {
    background: linear-gradient(135deg, oklch(0.57 0.18 30) 0%, oklch(0.50 0.17 25) 100%);
    box-shadow: 0 10px 28px -10px oklch(0.53 0.19 30 / 0.65), 0 1px 0 oklch(1 0 0 / 0.12) inset;
  }
  .btn-hero.btn-primary:hover {
    opacity: 1;
    box-shadow: 0 16px 34px -10px oklch(0.53 0.19 30 / 0.75), 0 1px 0 oklch(1 0 0 / 0.16) inset;
  }

  .btn-hero-ghost {
    background: oklch(1 0 0 / 0.08); color: #FBF7F2;
    border: 1px solid oklch(1 0 0 / 0.35);
    backdrop-filter: blur(6px);
  }
  .btn-hero-ghost:hover {
    background: oklch(1 0 0 / 0.16); border-color: oklch(1 0 0 / 0.55);
  }

  /* Auf schmalen, hohen Mobile-Screens schneidet ein zentrierter Ausschnitt
     des Hero-Fotos zu viel vom oberen Zaun/Himmel und zu wenig von Andy,
     seinem Kollegen und dem Essen — Ausschnitt nach unten verschoben. */
  @media (max-width: 640px) {
    /* Auf dem Handy laeuft ein eigener Hochformat-Zuschnitt (hero-catering-mobile.jpg,
       siehe <picture> in index.html). Das Querformat wurde hier zu einem schmalen
       Streifen beschnitten, in dem von der Szene fast nichts uebrig blieb.
       Etwas niedriger als der volle Bildschirm, damit das Bild nicht extrem
       gestaucht wird und darunter sichtbar noch Seite kommt. */
    .hero .hero-media { height: 78vh; min-height: 480px; }
    .hero .hero-media img { object-position: center 42%; }
  }

  /* Mit Pfeil-Icon und größerem Padding waren die zwei Hero-Buttons auf
     Mobile zu breit für eine Zeile und sind gestapelt — vorher standen sie
     nebeneinander. Auf schmalen Screens kompakter, damit das Paar wieder
     als eine Reihe funktioniert (nötigenfalls mit kleinerem Text/Pfeil). */
  @media (max-width: 480px) {
    .btn-hero { padding: 12px 16px; font-size: 13.5px; gap: 6px; }
    .btn-hero .btn-arrow { width: 13px; height: 13px; }
  }

  /* ===== Instagram-Link — dezentes rundes Icon in der Desktop-Nav,
     vollwertiger Menüpunkt im mobilen Menü =====
     Höhere Spezifität als "nav.primary-nav a" nötig — sonst gewinnt dessen
     padding:9px 16px und quetscht das SVG auf ~2px Breite zusammen (nur
     die runden Teile des Icons blieben sichtbar, das Quadrat verschwand). */
  nav.primary-nav a.nav-instagram {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: 999px; margin-left: 4px;
    background: color-mix(in oklch, currentColor 14%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    transition: background-color 200ms ease-out, transform 200ms ease-out;
  }
  .nav-instagram svg { width: 17px; height: 17px; flex-shrink: 0; }
  nav.primary-nav a.nav-instagram:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); transform: translateY(-2px); }
  .mobile-menu-instagram {
    display: flex !important; align-items: center; gap: 10px;
  }
  .mobile-menu-instagram svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* ===== Instagram-QR-Karte auf der Kontaktseite ===== */
  .instagram-qr-card {
    display: flex; align-items: center; gap: 16px;
    margin-top: 24px; padding: 16px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--border);
  }
  .instagram-qr-card img { width: 84px; height: 84px; border-radius: 8px; flex-shrink: 0; }
  .instagram-qr-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted-foreground); }

  /* ===== Marken-Schriftzug unter der Navbar — nur Mobile ===== */
  .mobile-brand-strip {
    display: none; margin: 0; padding: 2px 0 12px; text-align: center;
    font-family: var(--font-serif); font-weight: 700;
    /* Push Fraunces to its display-cut end of the optical-size axis —
       the higher-contrast, more dramatic shapes read closer to the
       logotype than the text-cut default. */
    font-variation-settings: 'opsz' 144;
    font-size: 23px; letter-spacing: 0.01em;
    color: var(--primary);
  }
  header.site:not(.is-scrolled) .mobile-brand-strip {
    color: #FBF7F2; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  }
  @media (max-width: 640px) { .mobile-brand-strip { display: block; } }

  /* Auf Mobile sind drei Zeilen des Hero-Titels neben Header, Sub-Text und
     Buttons zu dominant — etwas kleiner für ein ausgewogeneres Gesamtbild. */
  @media (max-width: 480px) {
    .hero .hero-title { font-size: 1.55rem; }
  }

  /* ===== Über uns — Bildpaar unter Andys Text ===== */
  .founder-photos { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  @media (min-width: 640px) { .founder-photos { grid-template-columns: 1fr 1fr; gap: 20px; } }
  .founder-photos figure { margin: 0; }
  .founder-photos img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block;
    box-shadow: 0 18px 40px -18px rgba(30,12,5,0.35); filter: var(--photo-grade);
  }
  .founder-photos figcaption { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted-foreground, inherit); opacity: 0.85; }

  /* ===== Handy-Menü als Vollbild-Panel (28.09.2026) =====
     Statt einer geratenen max-height wird der fixierte Header bei offenem Menü bis zum
     unteren Rand gezogen; das Menü nimmt den Rest ein und scrollt darin. So stimmt die
     Höhe auf jedem Gerät, mit und ohne Safari-Leiste, mit und ohne Marken-Zeile. */
  @media (max-width: 859px) {
    body.mobile-menu-open header.site { bottom: 0; display: flex; flex-direction: column; background: var(--background); }
    body.mobile-menu-open header.site > .nav-row, body.mobile-menu-open .mobile-brand-strip { flex: 0 0 auto; }
    #mobile-menu.open { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 8px 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
    #mobile-menu > a, #mobile-menu .submenu-label { border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 4px; }
    #mobile-menu .submenu { border-bottom: 1px solid var(--border); padding: 4px 0 10px 14px; margin: 0; }
    #mobile-menu .submenu a { padding: 11px 4px; }
    #mobile-menu .submenu-label { border-bottom: 0; padding-bottom: 6px; }
    .mobile-menu-cta { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: auto; padding-top: 20px; }
    .mobile-menu-cta .btn { justify-content: center; text-transform: none; letter-spacing: 0; }
    .mobile-menu-call { background: var(--card); border: 1px solid var(--border); color: var(--foreground); }
    body.mobile-menu-open header.site:not(.is-scrolled) .mobile-brand-strip { color: var(--primary); text-shadow: none; }
  }
  @media (min-width: 860px) { .mobile-menu-cta { display: none; } }
  @media (max-width: 859px) {
    body.mobile-menu-open header.site { --nav-fg: var(--foreground); color: var(--foreground); }
    body.mobile-menu-open .nav-toggle { color: var(--foreground); border-color: var(--border); background: var(--card); text-shadow: none; }
  }

  /* ===== Galerie: Filterleiste, Mauerwerk-Raster, Großansicht (28.09.2026) ===== */
  .g-section { padding-top: 32px; }
  .g-filters {
    position: sticky; top: 72px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 10px 0; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
    background: linear-gradient(var(--background) 80%, transparent);
  }
  @media (max-width: 640px) { .g-filters { top: 118px; } }
  .g-filters::-webkit-scrollbar { display: none; }
  .g-chip {
    flex: 0 0 auto; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  .g-chip span { opacity: 0.55; font-weight: 500; margin-left: 4px; }
  .g-chip.is-active { background: var(--primary); border-color: var(--primary); color: #FBF7F2; }
  .g-chip.is-active span { opacity: 0.8; }
  .g-count { font-size: var(--fs-sm); opacity: 0.7; margin: 6px 0 16px; }
  .g-grid { columns: 2; column-gap: 10px; }
  @media (min-width: 760px) { .g-grid { columns: 3; column-gap: 14px; } }
  @media (min-width: 1100px) { .g-grid { columns: 4; } }
  .g-item {
    display: block; width: 100%; padding: 0; border: 0; margin: 0 0 10px; break-inside: avoid;
    position: relative; overflow: hidden; border-radius: 12px; background: var(--muted); cursor: zoom-in;
  }
  @media (min-width: 760px) { .g-item { margin-bottom: 14px; } }
  .g-item[hidden] { display: none; }
  .g-item img { display: block; width: 100%; height: auto; filter: var(--photo-grade); transition: transform 400ms ease; }
  .g-label {
    position: absolute; left: 8px; bottom: 8px; font-size: 11px; letter-spacing: 0.02em; color: #fff;
    background: rgba(15,10,7,0.55); padding: 4px 9px; border-radius: 999px; pointer-events: none;
  }
  @media (hover: hover) {
    .g-label { opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 200ms ease; }
    .g-item:hover .g-label, .g-item:focus-visible .g-label { opacity: 1; transform: none; }
    .g-item:hover img { transform: scale(1.04); }
  }
  .g-lightbox { background: rgba(12,8,6,0.94); }
  .g-lightbox.is-open { display: flex; align-items: center; justify-content: center; }
  .g-lb-figure { margin: 0; max-width: 92vw; display: flex; flex-direction: column; align-items: center; }
  .g-lb-figure img { max-width: 92vw; max-height: 80vh; max-height: 80dvh; object-fit: contain; border-radius: 8px; }
  .g-lb-figure figcaption { color: #F1E9E1; font-size: var(--fs-sm); margin-top: 12px; text-align: center; max-width: 60ch; line-height: 1.45; }
  .g-lb-counter { display: block; opacity: 0.6; margin-top: 4px; font-size: 12px; }
  .g-lb-btn {
    position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 30px; line-height: 1; display: grid; place-items: center;
  }
  .g-lb-btn:hover { background: rgba(255,255,255,0.22); }
  .g-lb-close { top: 16px; right: 16px; font-size: 28px; }
  .g-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
  .g-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
  @media (max-width: 640px) {
    .g-lb-prev, .g-lb-next { top: auto; bottom: 18px; transform: none; }
    .g-lb-prev { left: 24px; } .g-lb-next { right: 24px; }
    .g-lb-figure img { max-height: 70vh; max-height: 70dvh; }
  }

  /* ===== Formular: nichts darf breiter als der Bildschirm werden (28.09.2026) =====
     1fr-Spalten wachsen bis zur Mindestbreite ihres Inhalts (Datumsfeld, Select) —
     minmax(0, 1fr) + min-width: 0 lässt sie stattdessen schrumpfen. */
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
  .field, .field-row > * { min-width: 0; }
  .field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  form.inquiry { min-width: 0; max-width: 100%; }
  form.inquiry label { overflow-wrap: anywhere; }

  /* ===== iOS: Menü muss per Finger scrollen (28.09.2026) =====
     Safari blockiert Touch-Scrollen in overflow-Bereichen, deren Vorfahre einen backdrop-filter
     trägt — der Header bekommt ihn nach dem ersten Scrollen (.is-scrolled). Chrome ist davon nicht
     betroffen, darum lief der Test dort grün. Bei offenem Menü: kein Filter, feste Höhe, Pan erlaubt. */
  @media (max-width: 859px) {
    body.mobile-menu-open header.site {
      -webkit-backdrop-filter: none; backdrop-filter: none; transition: none;
      height: 100vh; height: 100dvh; box-shadow: none;
    }
    #mobile-menu.open { -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
  }
  /* Handy: „Jetzt anfragen" + „Menü" mittig im Kopf (Logo ist dort ausgeblendet). */
  @media (max-width: 640px) {
    .nav-row { justify-content: center; }
  }

  /* ===== Galerie: Wisch-Hinweis + Gleiten beim Blättern (28.09.2026) ===== */
  .g-swipe-hint {
    position: absolute; left: 50%; bottom: 84px; transform: translate(-50%, 8px); z-index: 3;
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 10px 18px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
    color: #FBF7F2; background: rgba(251,247,242,0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 300ms ease;
  }
  .g-swipe-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
  .g-swipe-arrow { font-size: 22px; line-height: 1; display: inline-block; }
  @media (prefers-reduced-motion: no-preference) {
    .g-swipe-hint.is-visible .g-swipe-arrow:first-child { animation: g-nudge-l 1.2s ease-in-out infinite; }
    .g-swipe-hint.is-visible .g-swipe-arrow:last-child { animation: g-nudge-r 1.2s ease-in-out infinite; }
    .g-lb-figure img.slide-left { animation: g-slide-l 260ms ease-out; }
    .g-lb-figure img.slide-right { animation: g-slide-r 260ms ease-out; }
  }
  @keyframes g-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
  @keyframes g-nudge-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  @keyframes g-slide-l { from { opacity: 0.2; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes g-slide-r { from { opacity: 0.2; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
  @media (min-width: 641px) { .g-swipe-hint { bottom: 32px; } }

  /* ===== Galerie: feste Bühne statt „Bild springt beim Blättern" (28.09.2026) =====
     Vorher bestimmte jedes Foto die Größe (Hoch- vs. Querformat) — Pfeile und Text sprangen.
     Jetzt ist die Fläche fest, das Foto sitzt darin per object-fit: contain. */
  .g-lb-figure { width: 92vw; max-width: 1200px; }
  .g-lb-figure img {
    width: 100%; height: 78vh; height: 78dvh; max-width: none; max-height: none;
    object-fit: contain; border-radius: 0; background: transparent;
  }
  .g-lb-figure figcaption { height: 5.4em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
  @media (max-width: 640px) {
    .g-lb-figure img { height: 66vh; height: 66dvh; }
  }
  .g-lightbox { background: rgba(12,8,6,0.985); }
  @media (max-width: 640px) {
    .g-swipe-hint { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); padding: 8px 14px; gap: 6px; font-size: 12.5px; }
    .g-lb-prev, .g-lb-next { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ===== Kontaktformular: Versand, Status, WhatsApp (28.09.2026) ===== */
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .form-hint-wa { font-size: var(--fs-sm); color: var(--muted-foreground); margin: 4px 0 0; }
  .form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
  @media (min-width: 560px) { .form-actions { grid-template-columns: 1.4fr 1fr; } }
  .form-actions .btn { justify-content: center; }
  .form-status { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.5; }
  .form-status[data-kind="ok"] { background: oklch(0.93 0.06 150); color: oklch(0.32 0.08 150); }
  .form-status[data-kind="info"] { background: var(--accent); color: var(--foreground); }
  .form-status[data-kind="error"] { background: oklch(0.93 0.05 30); color: oklch(0.40 0.14 30); }
  .form-note a { color: inherit; text-decoration: underline; }
  .form-actions .btn { gap: 10px; }
  .btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .btn-wa .btn-icon-wa { color: #25D366; }
  .btn-wa:hover { border-color: #25D366; }
  @media (min-width: 560px) { .form-actions { grid-template-columns: 1fr 1fr; } }
  .form-actions .btn span { white-space: nowrap; }

  /* ===== Rechtstexte (Datenschutz) ===== */
  .legal { margin-top: 20px; font-size: var(--fs-base); line-height: 1.7; }
  .legal .legal-h { font-size: var(--fs-md); margin: 32px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
  .legal p { margin: 0 0 12px; overflow-wrap: anywhere; }
  .legal-meta { color: var(--muted-foreground); font-size: var(--fs-sm); margin: 6px 0 0; }

  /* ===== Pflichtfelder ===== */
  .req { color: var(--primary); font-weight: 700; }
  .req-note { font-size: var(--fs-sm); color: var(--muted-foreground); margin: 0 0 4px; }
  .field [aria-invalid="true"] { border-color: oklch(0.55 0.19 28); box-shadow: 0 0 0 3px oklch(0.55 0.19 28 / 0.15); }
  .field-error { margin: 2px 0 0; font-size: var(--fs-sm); color: oklch(0.48 0.17 28); }
  body.mobile-menu-open .nav-toggle, body.mobile-menu-open .nav-toggle * { text-shadow: none !important; }

  /* ===== Summer Closing: Fotobox-Strecke ===== */
  .sc-title { font-size: var(--fs-md); margin: 8px 0 12px; }
  .sc-strip {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 24px 12px; margin: 0 -24px; scrollbar-width: thin;
  }
  .sc-item {
    flex: 0 0 46%; max-width: 200px; scroll-snap-align: start; padding: 0; border: 0; background: none; cursor: zoom-in;
    border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(30,12,5,0.4);
  }
  @media (min-width: 640px) { .sc-item { flex-basis: 30%; } }
  .sc-item img { display: block; width: 100%; height: auto; transition: transform 300ms ease; }
  @media (hover: hover) { .sc-item:hover img { transform: scale(1.03); } }
  .sc-hint { font-size: var(--fs-sm); color: var(--muted-foreground); margin: 2px 0 22px; }
  #sc-lightbox .g-lb-figure figcaption { height: auto; }
  .sc-wrap { position: relative; }
  .sc-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 26px; line-height: 1;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(30,12,5,0.45); transition: opacity 200ms ease;
  }
  .sc-arrow:hover { background: var(--primary); color: #FBF7F2; border-color: var(--primary); }
  .sc-arrow:disabled { opacity: 0; pointer-events: none; }
  .sc-arrow-l { left: -8px; } .sc-arrow-r { right: -8px; }
  @media (max-width: 640px) { .sc-arrow { width: 38px; height: 38px; font-size: 22px; } .sc-arrow-l { left: 2px; } .sc-arrow-r { right: 2px; } }

  /* =====================================================================
     Eventseite im Party-Look (28.09.2026) — nur .page-events, Rest der Seite bleibt hell.
     ===================================================================== */
  .page-events { --ev-bg: #0f0b0a; --ev-card: #1a1412; --ev-line: rgba(251,247,242,0.12); --ev-text: #F4ECE4; --ev-muted: rgba(244,236,228,0.66); --ev-accent: #ff5a3c; background: var(--ev-bg); }
  .page-events main.ev-page { background: var(--ev-bg); color: var(--ev-text); }
  .page-events header.site.is-scrolled { background: color-mix(in oklch, #0f0b0a 88%, transparent); --nav-fg: #F4ECE4; box-shadow: 0 1px 0 var(--ev-line); }
  .page-events header.site.is-scrolled .brand-name, .page-events header.site.is-scrolled nav.primary-nav a,
  .page-events header.site.is-scrolled .dropdown-toggle, .page-events header.site.is-scrolled .mobile-brand-strip { color: #F4ECE4; }

  .ev-hero { position: relative; overflow: hidden; padding: 150px 0 72px; min-height: 92vh; display: flex; align-items: center; }
  @media (max-width: 640px) { .ev-hero { padding: 150px 0 48px; min-height: 0; } }
  .ev-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) blur(2px); transform: scale(1.04); }
  .ev-hero-shade { position: absolute; inset: 0; background:
      radial-gradient(ellipse at 20% 30%, rgba(255,90,60,0.28), transparent 55%),
      linear-gradient(90deg, rgba(15,11,10,0.96) 0%, rgba(15,11,10,0.82) 45%, rgba(15,11,10,0.55) 100%),
      linear-gradient(0deg, #0f0b0a 0%, transparent 35%); }
  .ev-hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .ev-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 64px; } }
  .ev-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-muted); margin: 0 0 18px; }
  .ev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ev-accent); box-shadow: 0 0 0 0 rgba(255,90,60,0.6); animation: ev-pulse 1.8s infinite; }
  @keyframes ev-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,60,0.55); } 70% { box-shadow: 0 0 0 12px rgba(255,90,60,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,60,0); } }
  .ev-title { font-family: var(--font-serif); font-weight: 800; font-variation-settings: 'opsz' 144; font-size: clamp(3rem, 9vw, 6.6rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 28px;
    background: linear-gradient(100deg, #FBF7F2 30%, #ffb199 70%, #ff5a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ev-facts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
  .ev-facts li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--ev-muted); }
  .ev-facts strong { color: var(--ev-text); font-weight: 600; }
  .ev-facts svg, .ev-ghost svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--ev-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ev-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 10px; margin: 0 0 30px; }
  .ev-countdown[hidden] { display: none; }
  .ev-countdown div { text-align: center; padding: 12px 4px 10px; border-radius: 14px; background: rgba(251,247,242,0.06); border: 1px solid var(--ev-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ev-countdown span { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: #fff; }
  .ev-countdown small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ev-muted); }
  .ev-live { font-weight: 700; color: var(--ev-accent); margin: 0 0 30px; font-size: 18px; }
  .ev-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .ev-btn { box-shadow: 0 14px 34px -12px rgba(255,90,60,0.65); }
  .ev-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--ev-text); background: rgba(251,247,242,0.06); border: 1px solid var(--ev-line); cursor: pointer; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; }
  .ev-ghost:hover { background: rgba(251,247,242,0.12); border-color: rgba(251,247,242,0.3); }
  @media (max-width: 640px) { .ev-actions > * { flex: 1 1 100%; justify-content: center; } }
  .ev-flyer { aspect-ratio: auto; max-width: 400px; justify-self: center; width: 100%; border-radius: 18px; overflow: hidden; transform: rotate(2deg);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--ev-line), 0 0 90px -20px rgba(255,90,60,0.45); }
  .ev-flyer img { height: auto; filter: none; }
  @media (hover: hover) { .ev-flyer:hover { transform: rotate(0deg) translateY(-4px); } }
  @media (max-width: 899px) { .ev-flyer { transform: none; max-width: 340px; } }

  .ev-section { padding: 80px 0; border-top: 1px solid var(--ev-line); }
  @media (max-width: 640px) { .ev-section { padding: 56px 0; } }
  .ev-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ev-accent); margin: 0 0 10px; }
  .ev-h2 { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; margin: 0 0 32px; color: var(--ev-text); }
  .ev-h3 { font-size: 20px; margin: 48px 0 16px; color: var(--ev-text); }
  .ev-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
  .ev-artist { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 18px; background: linear-gradient(135deg, #221915, #140f0d); border: 1px solid var(--ev-line); }
  .ev-mono { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; letter-spacing: 0.04em; color: #fff;
    background: radial-gradient(circle at 30% 30%, #ff7a5c, #b3261e); box-shadow: 0 10px 30px -8px rgba(255,90,60,0.6); flex-shrink: 0; }
  .ev-artist h3 { margin: 0 0 2px; font-size: 22px; color: var(--ev-text); }
  .ev-artist p { margin: 0; color: var(--ev-muted); font-size: 14px; }
  .ev-strip-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin-top: 28px; border-radius: 18px; overflow: hidden; background: var(--ev-line); }
  .ev-strip-info div { background: var(--ev-card); padding: 18px 20px; display: grid; gap: 4px; }
  .ev-strip-info strong { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ev-accent); }
  .ev-strip-info span { color: var(--ev-text); font-size: 15px; }
  .ev-maplink { display: inline-block; margin-top: 22px; color: var(--ev-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ev-accent); padding-bottom: 2px; }
  .ev-maplink:hover { color: var(--ev-accent); }

  .ev-pastcard { display: grid; gap: 28px; align-items: center; padding: 22px; border-radius: 22px; background: var(--ev-card); border: 1px solid var(--ev-line); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 760px) { .ev-pastcard { grid-template-columns: 260px minmax(0, 1fr); padding: 28px; } }
  .ev-pastflyer { aspect-ratio: 4 / 5; border-radius: 14px; max-width: 320px; }
  .ev-pastflyer img { filter: grayscale(0.25); }
  .ev-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(251,247,242,0.08); color: var(--ev-muted); }
  .ev-pastinfo h3 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 12px 0 10px; color: var(--ev-text); }
  .ev-pastinfo p { color: var(--ev-muted); margin: 0 0 8px; line-height: 1.6; }
  .ev-pastmeta { font-size: 14px; }
  .page-events .sc-item { box-shadow: 0 16px 34px -18px rgba(0,0,0,0.9); }
  .page-events .sc-arrow { background: #1f1714; color: #F4ECE4; border-color: var(--ev-line); }
  .page-events .sc-arrow:hover { background: var(--ev-accent); border-color: var(--ev-accent); }
  .page-events .sc-hint, .ev-more { color: var(--ev-muted); text-align: center; }
  .ev-more a { color: var(--ev-text); }

  .ev-cta { padding: 80px 0 96px; text-align: center; border-top: 1px solid var(--ev-line);
    background: radial-gradient(ellipse at 50% 0%, rgba(255,90,60,0.22), transparent 60%), var(--ev-bg); }
  .ev-cta p { color: var(--ev-muted); margin: -16px 0 26px; }
  .page-events footer.site { background: #0b0807; color: var(--ev-muted); border-top: 1px solid var(--ev-line); }
  .page-events footer.site a { color: var(--ev-muted); }
  .page-events .mobile-sticky-cta { background: rgba(15,11,10,0.94); border-top-color: var(--ev-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .page-events .mobile-sticky-cta-call { background: #1f1714; color: #F4ECE4; border-color: var(--ev-line); }
  .page-events.mobile-menu-open header.site { background: #0f0b0a; }
  .page-events #mobile-menu { background: #0f0b0a; color: #F4ECE4; }
  .page-events #mobile-menu > a, .page-events #mobile-menu .submenu { border-color: var(--ev-line); }
  .page-events.mobile-menu-open .nav-toggle { background: #1f1714; color: #F4ECE4; border-color: var(--ev-line); }
  .page-events .mobile-menu-call { background: #1f1714; color: #F4ECE4; border-color: var(--ev-line); }
  .page-events.mobile-menu-open header.site .mobile-brand-strip { color: #F4ECE4; }
  .page-events .brand-name { color: #F4ECE4 !important; text-shadow: none !important; opacity: 1; }

  /* ===== Startseite kompakt + Kino-Einstieg (28.09.2026) ===== */
  .hero-cine .hero-scrim { background: linear-gradient(90deg, rgba(15,11,10,0.9) 0%, rgba(15,11,10,0.55) 55%, rgba(15,11,10,0.25) 100%), linear-gradient(0deg, rgba(15,11,10,0.75), transparent 45%); }
  .hero-kicker { color: rgba(244,236,228,0.8); }
  .hero-title-cine { font-size: clamp(2.8rem, 8vw, 6.2rem) !important; line-height: 0.95 !important; letter-spacing: -0.02em; max-width: 12ch !important;
    background: linear-gradient(100deg, #FBF7F2 35%, #ffb199 75%, #ff5a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .inline-link { color: var(--primary); font-weight: 600; text-decoration: underline; white-space: nowrap; }
  #highlights.highlights-dark { background: #0f0b0a; }
  .next-band { display: grid; gap: 22px; align-items: center; margin-bottom: 36px; padding: 26px; border-radius: 22px;
    background: radial-gradient(ellipse at 0% 0%, rgba(255,90,60,0.22), transparent 60%), #1a1412; border: 1px solid rgba(251,247,242,0.12); color: #F4ECE4; }
  @media (min-width: 900px) { .next-band { grid-template-columns: minmax(0, 1fr) auto auto; padding: 30px 34px; } }
  .next-band .ev-kicker { margin-bottom: 8px; }
  .next-title { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; margin: 0 0 8px; color: #fff; }
  .next-meta { margin: 0; color: rgba(244,236,228,0.72); font-size: 15px; }
  .next-cd { grid-template-columns: repeat(3, minmax(0, 70px)); margin: 0; }
  .next-cd span { font-size: 26px; }
  /* Marken-Schriftzug gut lesbar: hell auf Fotos, dunkel auf dem hellen Kopf nach dem Scrollen. */
  header.site:not(.is-scrolled) .brand-name { color: #FBF7F2 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.55) !important; font-size: 13px; }
  header.site.is-scrolled .brand-name { color: var(--foreground); text-shadow: none; }
  .page-events header.site.is-scrolled .brand-name { color: #F4ECE4 !important; }

  /* ===== Line-up als Video-Reels (29.09.2026) ===== */
  .ev-reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
  @media (min-width: 760px) { .ev-reels { gap: 22px; } }
  .ev-reel { border-radius: 20px; overflow: hidden; background: #1a1412; border: 1px solid var(--ev-line); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); }
  .ev-reel-media { position: relative; aspect-ratio: 9 / 16; background: #000; }
  .ev-reel-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ev-reel-sound { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ev-reel-sound svg { width: 20px; height: 20px; }
  .ev-reel-sound[aria-pressed="true"] { background: var(--ev-accent); }
  .ev-reel-info { padding: 14px 16px 16px; }
  .ev-reel-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-accent); }
  .ev-reel-info h3 { margin: 4px 0 0; font-size: clamp(18px, 3vw, 24px); color: var(--ev-text); }
  .ev-reel-sound svg[hidden] { display: none; }
  .ev-ics-main { display: inline-flex; align-items: center; gap: 9px; }
  .ev-ics-main svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ev-inline { color: var(--ev-text); text-decoration: underline; text-decoration-color: var(--ev-accent); text-underline-offset: 3px; }

  /* ===== Event-Teaser im Startbild (29.09.2026) ===== */
  .hero-event {
    position: absolute; z-index: 3; right: 40px; bottom: 40px; display: flex; align-items: center; gap: 14px;
    padding: 10px 18px 10px 10px; border-radius: 18px; text-decoration: none; color: #F4ECE4; max-width: 380px;
    background: rgba(15,11,10,0.55); border: 1px solid rgba(251,247,242,0.18);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8); transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  }
  .hero-event:hover { transform: translateY(-3px); border-color: rgba(255,90,60,0.6); background: rgba(15,11,10,0.7); }
  .hero-event img { width: 54px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.8); }
  .hero-event-text { display: grid; gap: 2px; min-width: 0; }
  .hero-event-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,236,228,0.75); }
  .hero-event-kicker .ev-dot { width: 7px; height: 7px; }
  .hero-event strong { font-family: var(--font-serif); font-size: 20px; line-height: 1.15; color: #fff; }
  .hero-event-meta { font-size: 13px; color: rgba(244,236,228,0.75); }
  .hero-event-arrow { margin-left: auto; font-size: 20px; color: #ff5a3c; transition: transform 220ms ease; }
  .hero-event:hover .hero-event-arrow { transform: translateX(4px); }
  @media (max-width: 859px) { .hero-event { right: 16px; left: 16px; bottom: 16px; max-width: none; } }
  @media (max-width: 640px) {
    .hero-event { bottom: 14px; left: 14px; right: 14px; padding: 8px 14px 8px 8px; }
    .hero-cine .hero-content { padding-bottom: 104px !important; }
    .hero-event img { width: 44px; height: 58px; }
    .hero-event strong { font-size: 17px; }
  }
  /* Handy: Startbild wächst mit dem Inhalt statt feste 78vh — sonst rutscht auf kleinen Geräten (iPhone SE)
     der Titel unter den Kopf und die Event-Karte über die Knöpfe. */
  @media (max-width: 640px) {
    .hero.hero-cine .hero-media { height: auto; min-height: 88svh; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
    .hero.hero-cine .hero-media > picture { position: absolute; inset: 0; }
    .hero.hero-cine .hero-content { position: relative; padding-top: 170px !important; }
  }
  @media (max-width: 640px) {
    .hero.hero-cine .hero-content { order: 1; padding-bottom: 16px !important; }
    .hero.hero-cine .hero-event { order: 2; position: relative; left: auto; right: auto; bottom: auto; margin: 0 14px 16px; }
  }
  /* Fußzeile: Link-Zeilen dürfen umbrechen (iPhone SE 320 px war 18 px zu breit). */
  .footer-links-wrap, .footer-row { min-width: 0; max-width: 100%; }
  .footer-links { flex-wrap: wrap; row-gap: 8px; }
  h1, h2, h3, .section-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

  /* ===== Eventseite Handy: kompakter Ticket-Balken erst nach dem Hero (29.09.2026) ===== */
  .page-events .ev-sticky { display: none; }
  @media (max-width: 640px) {
    .page-events .ev-sticky {
      display: flex; align-items: center; gap: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
      transform: translateY(110%); transition: transform 280ms ease; pointer-events: none;
    }
    .page-events .ev-sticky.is-visible { transform: none; pointer-events: auto; }
    .ev-sticky img { width: 36px; height: 48px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
    .ev-sticky-text { display: grid; min-width: 0; line-height: 1.25; }
    .ev-sticky-text strong { font-family: var(--font-serif); font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ev-sticky-text span { font-size: 12px; color: rgba(244,236,228,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ev-sticky-btn { margin-left: auto; flex-shrink: 0; padding: 12px 20px; }
    .ev-kicker-extra { display: none; }
    .ev-hero { padding-top: 170px; }
  }

  /* ===== Über uns: Team (29.09.2026) ===== */
  .team-section { padding-top: 24px; }
  .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; max-width: 900px; }
  .team-photos { position: relative; margin-bottom: 18px; }
  .team-photo-main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 22px 44px -20px rgba(30,12,5,0.45); filter: var(--photo-grade); }
  .team-photo-small { position: absolute; right: -14px; bottom: -14px; width: 42%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;
    border: 5px solid var(--background); box-shadow: 0 14px 30px -14px rgba(30,12,5,0.5); filter: var(--photo-grade); }
  .team-member h3 { font-family: var(--font-serif); font-size: 28px; margin: 26px 0 4px; }
  @media (max-width: 640px) { .team-photo-small { right: 8px; } }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 380px)); gap: 40px; }
  .team-member .section-body { margin: 12px 0 0; font-size: var(--fs-base); line-height: 1.65; }
  .team-grid { align-items: start; }

  /* ===== Team-Abschnitt als eigenes Kapitel (29.09.2026 abends) ===== */
  .team-section { background: var(--secondary); padding: 88px 0 96px; margin-top: 24px; }
  .team-section .section-head { text-align: center; margin: 0 auto 48px; max-width: 640px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
  @media (max-width: 760px) { .team-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .team-section { padding: 64px 0 72px; } }
  .team-member { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 14px 14px 28px;
    box-shadow: 0 30px 60px -36px rgba(30,12,5,0.45); display: flex; flex-direction: column; }
  .team-photos { margin-bottom: 26px; }
  .team-photo-main { aspect-ratio: 5 / 4; border-radius: 16px; box-shadow: none; }
  .team-photo-small { width: 34%; right: 16px; bottom: -22px; border-width: 5px; border-color: var(--card); }
  .team-member h3, .team-member .section-body { padding: 0 14px; }
  .team-member h3 { margin: 14px 0 6px; font-size: clamp(24px, 2.4vw, 30px); max-width: 62%; }
  @media (max-width: 760px) { .team-photo-small { right: 12px; } }
  .team-member h3 { max-width: none; }
  .team-pos-ulrich { object-position: 50% 6%; }
  .team-pos-abou { object-position: 42% 8%; }
  .page-hero .hero-media img.hero-pos-koch { object-position: 50% 30%; }
  .page-hero .hero-media img.hero-pos-tisch { object-position: 50% 55%; }
  .page-hero .hero-media img.hero-pos-anrichten { object-position: 60% 35%; }

  /* ===== Galerie: einheitliche Hochformat-Kacheln statt Mauerwerk (30.09.2026) ===== */
  .g-grid { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 760px) { .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
  @media (min-width: 1100px) { .g-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .g-item { margin: 0; aspect-ratio: 4 / 5; }
  .g-item img { width: 100%; height: 100%; object-fit: cover; }
  /* Budget: 5. Option über volle Breite + eigenes Betragsfeld (30.09.2026) */
  .budget-option-wide { grid-column: 1 / -1; }
  .budget-custom { display: grid; gap: 6px; margin-top: 12px; }
  .budget-custom[hidden] { display: none; }
  .budget-custom label { font-size: var(--fs-sm); font-weight: 500; }
  .budget-amount-wrap { position: relative; max-width: 220px; }
  .budget-amount-wrap input { width: 100%; padding-right: 36px; font-family: var(--font-sans); font-size: var(--fs-base); padding: 10px 36px 10px 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--input); color: var(--foreground); min-height: 40px; box-sizing: border-box; }
  .budget-amount-wrap span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }

  /* ===== Geteilter Kopfbereich: Text links, Foto in Originalgröße rechts (30.09.2026) =====
     Für Seiten, deren Fotos zu klein für ein Vollbild-Banner sind (WhatsApp, 1086 px). */
  .split-hero { position: relative; color: #FBF7F2; padding: 150px 24px 72px;
    background: radial-gradient(ellipse at 15% 20%, rgba(179,38,30,0.35), transparent 55%), linear-gradient(160deg, #241915 0%, #120d0b 100%); }
  .split-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 48px; align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .split-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 72px; } .split-hero { padding: 160px 40px 90px; } }
  .split-hero .hero-eyebrow { color: rgba(251,247,242,0.75); }
  .split-hero-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; margin: 0 0 20px; color: #fff; }
  .split-hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(251,247,242,0.82); max-width: 46ch; margin: 0 0 22px; }
  .split-hero-points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 8px; }
  .split-hero-points li { font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(251,247,242,0.22); background: rgba(251,247,242,0.06); }
  .split-hero-media { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
  .split-hero-media img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(251,247,242,0.1); }
  @media (max-width: 640px) { .split-hero { padding: 150px 20px 48px; } .split-hero-media { max-width: 320px; } }
  /* Keine Silbentrennung in normalen Überschriften („Hau-se"), nur echte Überlänge darf umbrechen. */
  h1, h2, h3, .section-title { hyphens: manual; -webkit-hyphens: manual; }
  .page-hero .hero-media img.hero-pos-ep { object-position: 50% 58%; }

  /* ===== Private Dining: Fotoreihe zentriert, einheitliche Hochformate (30.09.2026) ===== */
  .pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1080px; margin: 0 auto; }
  @media (min-width: 900px) { .pd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
  .pd-grid .gallery-item, .pd-grid .gallery-item.wide { aspect-ratio: 3 / 4; grid-column: auto; border-radius: 18px; box-shadow: 0 24px 50px -28px rgba(30,12,5,0.5); }
  .pd-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
  .hero-event-date { width: 54px; height: 64px; flex-shrink: 0; border-radius: 12px; display: grid; place-content: center; text-align: center;
    background: linear-gradient(160deg, #ff5a3c, #b3261e); color: #fff; box-shadow: 0 8px 20px -8px rgba(179,38,30,0.8); line-height: 1; }
  .hero-event-date b { font-family: var(--font-serif); font-size: 24px; }
  .hero-event-date small { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; margin-top: 3px; }
  @media (max-width: 640px) { .hero-event-date { width: 46px; height: 54px; } .hero-event-date b { font-size: 20px; } }
  .ev-sticky-date { width: 40px; height: 48px; border-radius: 9px; } .ev-sticky-date b { font-size: 18px; }