/* ==========================================================================
   Hess-Events – Stylesheet
   --------------------------------------------------------------------------
   Diese eine Datei gestaltet alle Seiten. Aufbau:

     1.  Tokens          Farben, Schrift, Abstände – hier zentral ändern
     2.  Basis           Grundeinstellungen für Text, Bilder, Links
     3.  Layout          Container und Abschnitte
     4.  Kopfbereich     Logo, Navigation, Mobilmenü
     5.  Fußbereich
     6.  Bausteine       Buttons, Bilder, Listen, Hinweise
     7.  Startseite      Hero, Leistungen, Full-Service mit Michael Hess,
                         grünes Band, Referenzen, Mainburger
     8.  Unterseiten     Seitenkopf, Text-Bild-Reihen, Verleih-Katalog,
                         Referenzen, Galerie
     9.  Formulare       Kontaktformular
     10. Rechtliches     Impressum, Datenschutz
     11. Hilfsklassen
     12. Responsiv       Anpassungen für Tablet und Handy
     13. Datenschutz-Banner  Google-Ads-Einwilligung (Logik: assets/js/consent.js)
   ========================================================================== */


/* 1. Tokens ----------------------------------------------------------------
   Alle Farben stammen aus dem Logo (Schwarz #231f20, Grün #8dc541).
   Das Logo-Grün ist auf Weiß zu hell für Text (Kontrast nur 2:1). Für Links
   und kleine grüne Schrift gibt es deshalb das dunklere --forest.
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --ink: #231f20;          /* Logo-Schwarz: Text, Buttons */
  --leaf: #8dc541;         /* Logo-Grün: Flächen, Punkte, Markierungen */
  --leaf-tint: #eaf4dc;    /* sehr helles Grün: Hover-Flächen, aktive Chips */
  --forest: #3a6f17;       /* dunkles Grün für Links: Kontrast 6:1 auf Weiß */
  --forest-deep: #2f5f12;  /* Hover für Links */
  --paper: #ffffff;        /* Seitenhintergrund */
  --fog: #f4f6f1;          /* heller Abschnittshintergrund (leicht grünlich) */
  --line: #e1e6dc;         /* Trennlinien */
  --muted: #5b605a;        /* Nebentext: Kontrast 6,4:1 auf Weiß */
  --field: #7f8a7b;        /* Rahmen von Eingabefeldern: 3,6:1 */

  /* Farben von mainburger.de – nur im Mainburger-Bereich verwendet,
     damit sofort erkennbar ist: Hier geht es zur Schwestermarke. */
  --mb-petrol: #3c6262;    /* Hintergrund: weiße Schrift 6,7:1 */
  --mb-checker: #749898;   /* Schachbrett-Muster wie auf den Trucks */
  --mb-mustard: #e6a23c;   /* Button-Farbe von mainburger.de */

  /* Schrift: Jost ist eine freie Schrift im Stil der Futura –
     passend zu den geometrischen Buchstaben im Logo. */
  --font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* Schriftgrößen (fließend zwischen Handy und Desktop) */
  --step--1: 0.9375rem;                                   /* 15 px  */
  --step-0: 1.125rem;                                     /* 18 px  */
  --step-1: 1.3125rem;                                    /* 21 px  */
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
  --step-5: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);

  /* Abstände */
  --gutter: clamp(16px, 4vw, 40px);      /* Rand links/rechts */
  --section: clamp(64px, 9vw, 128px);    /* Abstand zwischen Abschnitten */

  /* Rundungen: Bilder weicher als Felder, Buttons ganz rund */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --header-h: 84px;                      /* Höhe der Kopfzeile */
}


/* 2. Basis ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungmarken (#imbisswagen …) nicht unter der festen Kopfzeile verstecken */
  scroll-padding-top: calc(var(--header-h) + 72px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: auto;
}
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--forest); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--forest-deep); text-decoration-thickness: 2px; }

/* Sichtbarer Rahmen für Tastatur-Bedienung */
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--leaf); color: var(--ink); }


/* 3. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--fog { background: var(--fog); }
/* Platzhalter-Farbe für Bilder, solange sie laden – auf grauem Grund dunkler */
.section--fog .media { background: var(--line); }
.section--tight-top { padding-top: 0; }

/* Überschrift + Einleitung über einem Abschnitt */
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { margin-top: 16px; color: var(--muted); }

.lead { font-size: var(--step-1); line-height: 1.55; }
.muted { color: var(--muted); }
.prose { max-width: 40rem; }


/* 4. Kopfbereich ----------------------------------------------------------- */

/* „Weiter zum Hauptinhalt“: erscheint nur bei Tastatur-Bedienung */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

/* Das Logo ist ein JPG mit weißem Hintergrund. „multiply“ lässt den
   weißen Kasten auf farbigem Grund verschwinden. */
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { width: auto; height: 52px; mix-blend-mode: multiply; }

.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.site-nav ul { display: flex; gap: clamp(16px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) { color: var(--ink); font-weight: 500; text-decoration: none; padding-block: 6px; }
.site-nav a:not(.btn):hover { color: var(--forest); }

/* Aktuelle Seite: grüner Strich unter dem Menüpunkt */
.site-nav a:not(.btn)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

/* Menü-Knopf (nur auf kleinen Bildschirmen sichtbar, siehe Abschnitt 12) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* Geöffnet: aus drei Strichen wird ein X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }


/* 5. Fußbereich ------------------------------------------------------------ */
.site-footer { padding-block: 64px 32px; background: var(--fog); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand img { width: auto; height: 64px; mix-blend-mode: multiply; }
.footer-brand p { margin-top: 18px; max-width: 30ch; color: var(--muted); font-size: var(--step--1); }

.footer-title { margin-bottom: 12px; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.footer-list { margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.footer-list li + li { margin-top: 8px; }
.footer-list a { color: var(--ink); text-decoration: none; }
.footer-list a:hover { color: var(--forest); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}
.footer-bottom ul { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.footer-bottom a { color: var(--muted); }


/* 6. Bausteine ------------------------------------------------------------- */

/* Buttons: .btn plus eine Variante
   .btn-primary   Schwarz, Hauptaktion
   .btn-secondary Rahmen, Nebenaktion
   .btn-light     Weiß, für das grüne Band                                    */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0.7em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--forest-deep); color: var(--paper); }
.btn-secondary { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--leaf-tint); color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--ink); color: var(--paper); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Textlink mit grünem Strich, z. B. „Mehr zur Eventplanung“ */
.text-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}
.text-link:hover { color: var(--forest); text-decoration-color: var(--forest); }

/* Bildrahmen: schneidet Bilder auf ein festes Format zu.
   Das Format setzt die jeweilige Klasse (aspect-ratio). */
.media { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-m); background: var(--fog); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Liste mit grünen Punkten – angelehnt an das grüne „e“ im Logo */
.dots { margin: 16px 0 0; padding: 0; list-style: none; }
.dots li { position: relative; padding-left: 1.3em; }
.dots li + li { margin-top: 6px; }
.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--leaf);
}

/* Kennzeichnung KI-generierter Bilder (Art. 50 KI-Verordnung).
   Verwendung: im .media-Rahmen direkt nach dem <img> einfügen:
   <span class="ai-badge" aria-hidden="true">KI-generiert</span>
   und den Alt-Text mit „KI-generiertes Bild: “ beginnen. */
.ai-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(35, 31, 32, 0.8);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}


/* 7. Startseite ------------------------------------------------------------ */

/* Full-Service Versprechen: Text links, Porträt von Michael Hess rechts.
   Gleicher Aufbau wie auf der Startseite von mainburger.de. */
.service { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.service h2 { margin-bottom: 20px; }
.service .lead { max-width: 46ch; }
.tagline { margin-top: 14px; font-size: var(--step--1); color: var(--muted); }
.person { margin: 0; }
.person .media { aspect-ratio: 4 / 5; }
.person figcaption { margin-top: 18px; }
.person-name { display: block; font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
.person-role { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--1); }
.person .btn { width: 100%; margin-top: 20px; }


/* Hero: großer Satz links, Hochformat-Foto rechts */
.hero { padding-block: clamp(40px, 6vw, 88px) var(--section); }
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero h1 { font-size: var(--step-5); line-height: 1; hyphens: manual; }
/* Jeder Satz der Überschrift beginnt in einer eigenen Zeile */
.hero h1 span { display: block; }
.hero .lead { margin-top: 28px; max-width: 36ch; }
.hero-area { display: flex; gap: 10px; align-items: baseline; margin-top: 36px; color: var(--muted); font-size: var(--step--1); }
.hero-area::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); }
.hero-media { aspect-ratio: 4 / 5; border-radius: var(--radius-l); }

/* Drei Leistungen nebeneinander */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
/* Spalte als Flexbox: so stehen die Links unten auf gleicher Höhe,
   auch wenn eine Liste länger ist */
.pillar { display: flex; flex-direction: column; }
.pillar .media { aspect-ratio: 4 / 3; }
.pillar h3 { margin-top: 24px; }
.pillar > p { margin-top: 12px; color: var(--muted); }
.pillar .dots { margin-bottom: 20px; }
.pillar .text-link { margin-top: auto; align-self: flex-start; }

/* Grünes Band – das eine kräftige Farbelement der Seite */
.band { background: var(--leaf); color: var(--ink); }
.band-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: end;
  padding-block: clamp(64px, 8vw, 112px);
}
.band h2 { font-size: var(--step-4); line-height: 1.04; hyphens: manual; }
.band p { font-size: var(--step-1); line-height: 1.5; }
.band :focus-visible { outline-color: var(--ink); }

/* Referenzen: Kunde groß, Anlass klein darunter */
.refs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.refs li { padding-block: 18px; border-top: 1px solid var(--line); }
.refs strong { display: block; font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.refs span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--1); }

/* Mainburger-Band: in den Farben von mainburger.de, mit Logo und dem
   Schachbrett-Muster der Trucks. Steht auf Startseite und Catering-Seite. */
.mb-band { background: var(--mb-petrol); color: var(--paper); }
.mb-band .checker {
  height: 16px;
  background: repeating-conic-gradient(var(--mb-checker) 0 25%, var(--paper) 0 50%) 0 0 / 16px 16px;
}
.mb-inner {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
}
/* Logo im weißen Kreis (das Mainburger-Logo ist rund) */
.mb-logo { width: 104px; height: 104px; padding: 6px; border-radius: 50%; background: var(--paper); }
.mb-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.mb-band h2 { margin-top: 24px; color: var(--paper); }
.mb-band p { margin-top: 16px; font-size: var(--step-1); line-height: 1.5; }
.mb-band .media { aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.15); }
.mb-band .small-note { color: rgba(255, 255, 255, 0.88); }
.mb-band :focus-visible { outline-color: var(--paper); }
.btn-mb { background: var(--mb-mustard); color: var(--ink); }
.btn-mb:hover { background: #f0b65e; color: var(--ink); }
.small-note { margin-top: 16px; font-size: var(--step--1); color: var(--muted); }

/* Hinweis-Kasten mit Verweis auf Mainburger (Kontakt- und Verleih-Seite) */
.mb-hint {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--radius-m);
  background: var(--fog);
  border-left: 6px solid var(--mb-checker);
}
.mb-hint img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; mix-blend-mode: multiply; }
.mb-hint p { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.mb-hint a { font-weight: 600; }

/* Abschluss: Anfrage-Aufforderung über dem Fußbereich */
.closing { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 64px; align-items: end; }
.closing p { margin-top: 16px; font-size: var(--step-1); }
.closing .actions { margin-top: 0; justify-content: flex-end; }


/* 8. Unterseiten ----------------------------------------------------------- */

/* Seitenkopf: Überschrift + Einleitung */
.page-head { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 24px; max-width: 48ch; }
.page-head .actions { margin-top: 28px; }

/* Breites Bild unter dem Seitenkopf */
.wide-media { aspect-ratio: 21 / 9; border-radius: var(--radius-l); }

/* Text-Bild-Reihe. Variante --reverse: Bild links */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split + .split { margin-top: var(--section); }
/* Gespiegelt: Bild links (breite Spalte), Text rechts (schmale Spalte) */
.split--reverse { grid-template-columns: 7fr 5fr; }
.split--reverse .split-text { order: 2; }
.split-media { aspect-ratio: 4 / 3; }
.split h2 { margin-bottom: 18px; }
.split .dots { margin-top: 20px; }

/* Zwei Bilder nebeneinander in einer Reihe */
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-pair .media { aspect-ratio: 3 / 4; }

/* Zwei Textspalten (z. B. „Komplett oder in Teilen“) */
.columns { display: grid; grid-template-columns: 5fr 7fr; gap: 24px clamp(32px, 6vw, 96px); }
.columns .prose p:first-child { margin-top: 0; }

/* Anlässe als Schlagwort-Liste */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 8px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; }

/* Verleih: Sprungmarken-Leiste, bleibt beim Scrollen oben stehen */
.chips-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  padding-block: 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}
.chips { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.chips a:hover,
.chips a.is-active { border-color: var(--leaf); background: var(--leaf-tint); }

/* Verleih: ein Mietartikel pro Reihe – Bild links, Beschreibung rechts */
.rent-item {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.rent-item:first-child { border-top: 0; }
.rent-item .media { aspect-ratio: 4 / 3; }
.rent-item h2 { font-size: var(--step-3); }
.rent-tagline { margin-top: 6px; color: var(--muted); font-size: var(--step-1); }
.rent-item .prose { margin-top: 18px; }

/* Eckdaten (Maße, Strom …) als zweispaltige Liste */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 24px 0 0; padding: 20px 24px; border-radius: var(--radius-m); background: var(--fog); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }

/* Referenzen-Seite: vollständige Liste */
.refs--full strong { font-size: var(--step-2); }

/* Galerie mit Vergrößerung (Lightbox) */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.gallery figure { margin: 0; }
.gallery-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--line);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.gallery-button img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-button:hover img { transform: scale(1.03); }
.gallery figcaption { margin-top: 10px; font-size: var(--step--1); color: var(--muted); line-height: 1.45; }

.lightbox {
  width: min(1100px, 94vw);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--paper);
}
.lightbox::backdrop { background: rgba(20, 18, 18, 0.85); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; background: #151313; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.lightbox-controls { display: flex; flex-shrink: 0; gap: 8px; }
.lightbox-controls button {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}
.lightbox-controls button:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox :focus-visible { outline-color: var(--leaf); }


/* 9. Formulare ------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-l); background: var(--fog); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.field label { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 500; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--forest); outline: 2px solid var(--forest); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #b3401d; }

.check { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; }
.check input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--forest); }

.form-actions { margin-top: 24px; }
.form-note { margin-top: 12px; font-size: var(--step--1); color: var(--muted); }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-s); font-weight: 500; }
.form-status.is-visible { display: block; }
.form-status.is-error { background: #fbe4dc; color: #8a2a10; }
.form-status.is-success { background: var(--leaf-tint); color: #24470d; }

/* Kontaktdaten neben dem Formular */
.contact-aside h2 { margin-bottom: 16px; font-size: var(--step-2); }
.contact-list { margin: 0; }
.contact-list div { padding-block: 14px; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); font-size: var(--step--1); }
.contact-list dd { margin: 2px 0 0; font-size: var(--step-1); font-weight: 500; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--forest); text-decoration: underline; }
.contact-list address { font-style: normal; }


/* 10. Rechtliches ---------------------------------------------------------- */
.legal { max-width: 46rem; }
.legal h2 { margin-top: 1.8em; margin-bottom: 0.4em; font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.legal h3 { margin-top: 1.3em; margin-bottom: 0.3em; font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
.legal address { margin-block: 0.5em 1em; font-style: normal; }
.legal ul { margin: 0.6em 0 1em; padding-left: 1.3em; }
.legal li + li { margin-top: 0.25em; }
.legal .muted { margin-top: 10px; }


/* 11. Hilfsklassen --------------------------------------------------------- */
/* Für Screenreader lesbar, aber unsichtbar */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }


/* 12. Responsiv ------------------------------------------------------------ */

/* Bis 1180 px: Menüpunkte rücken enger zusammen */
@media (max-width: 1180px) {
  .site-nav,
  .site-nav ul { gap: 18px; }
}

/* Bis 1100 px: Das Menü passt nicht mehr in eine Zeile → Mobilmenü
   (Knopf oben rechts). Gleicher Wert steht in main.js, Teil 1. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 12px var(--gutter) 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(35, 31, 32, 0.35);
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
}

/* Tablet (bis 980 px): Spalten untereinander */
@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .brand img { height: 44px; }

  .hero-grid,
  .service,
  .band-inner,
  .mb-inner,
  .closing,
  .split,
  .columns,
  .rent-item,
  .contact { grid-template-columns: 1fr; }

  .hero-media { aspect-ratio: 4 / 3; }
  .service .person { max-width: 380px; }
  .split--reverse .split-text { order: 0; }
  .closing .actions { justify-content: flex-start; }

  .pillars { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .wide-media { aspect-ratio: 16 / 9; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Handy (bis 680 px) */
@media (max-width: 680px) {
  .pillars,
  .refs,
  .form-grid,
  .footer-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .wide-media { aspect-ratio: 4 / 3; }
  .media-pair .media { aspect-ratio: 1 / 1; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd + dt { margin-top: 10px; }
  .actions .btn { flex: 1 1 auto; }
}

/* Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat,
   bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* 13. Datenschutz-Banner --------------------------------------------------
   Erscheint unten am Bildschirmrand, solange Besucher noch nicht gewählt
   haben. Aufbau und Logik: assets/js/consent.js. Das Banner gibt es nur,
   wenn in assets/js/config.js Google Ads vollständig eingetragen ist.
   Beide Knöpfe sind absichtlich gleich gestaltet.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 640px;
  max-height: calc(100dvh - 32px);
  margin-inline: auto;
  padding: 24px;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 4px solid var(--leaf);
  border-radius: var(--radius-m);
  box-shadow: 0 24px 60px -24px rgba(35, 31, 32, 0.5);
}
.consent h2 { margin: 0 0 10px; font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.consent p { margin: 0 0 12px; font-size: var(--step--1); line-height: 1.55; }
.consent-links { color: var(--muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.consent-actions .btn { flex: 1 1 200px; }

/* Knopf „Datenschutzeinstellungen“ im Fußbereich: sieht aus wie ein Link */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.link-button:hover { color: var(--forest-deep); text-decoration-thickness: 2px; }