/* ============================================================
   Yelbless – gemeinsame Gestaltung fuer alle Seiten
   Schriften liegen lokal, es wird kein externes CDN geladen.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Doto (SIL Open Font License, Lizenz: fonts/Doto-OFL.txt) - echte
   Punktraster-Schrift fuer die grossen Ueberschriften. */
@font-face {
  font-family: "Doto";
  src: url("fonts/doto-latin-ext.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Doto";
  src: url("fonts/doto-latin.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #07090d;
  --bg-soft: #0c0f16;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hi: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.1);
  --line-hi: rgba(255, 255, 255, 0.2);

  --accent: #ff2f2f;

  --text: #ffffff;
  --text-soft: #b4bcc9;
  --muted: #8e8e8e;
  --faint: rgba(255, 255, 255, 0.45);

  --nav-text: #2e2e2e;
  --pill-dark: #28282a;
  --sign-in-text: #c8c8c8;
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);

  --radius: 16px;
  --radius-sm: 10px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pad-x: clamp(14px, 3vw, 32px);
  --pad-y: clamp(16px, 2.4vh, 28px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }

/* Tastatur-Bedienung: der Standard-Fokusring des Browsers ist auf dem dunklen
   Hintergrund kaum zu sehen. :focus-visible greift nur bei Tastatur, per Maus
   bleibt alles wie vorher. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: min(1120px, 100% - 2 * var(--pad-x)); margin-inline: auto; }

/* Punktraster-Ueberschriften: Doto ist eine echte Dot-Matrix-Schrift und
   bleibt - anders als der fruehere CSS-Masken-Trick - in jeder Groesse
   lesbar, auch auf dem Handy. Faellt Doto aus, springt Inter 800 ein. */
.led,
.headline,
.page-hero h1 {
  font-family: "Doto", var(--font-sans);
  font-weight: 900;
  letter-spacing: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s;
}
.btn-primary {
  background: #fff;
  color: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 22px rgba(255, 255, 255, 0.28),
    0 0 44px rgba(255, 255, 255, 0.1);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(255, 255, 255, 0.42),
    0 0 60px rgba(255, 255, 255, 0.18);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: var(--line-hi);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-lg { padding: 15px 30px; font-size: 15.5px; }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ---------- Kopfzeile (auf allen Seiten gleich) ---------- */
.site-head {
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 24px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px var(--pad-x);
  background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.topbar .site-head { margin-inline: auto; }

/* Startseite: diese Leiste faehrt erst herein, wenn der Auftritt komplett
   durchgescrollt ist. Waere sie klebend im Fluss, saehe man sie schon von
   unten hereinkommen, waehrend die Leiste im Auftritt noch oben steht - also
   kurzzeitig zwei Menues. visibility haelt sie solange auch aus dem
   Tabulator-Ablauf heraus. Umgeschaltet wird sie in main.js. */
.nav-float {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  transform: translateY(-105%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.34s;
}
.nav-float.is-visible {
  visibility: visible;
  transform: none;
}

.logo {
  flex-shrink: 0;
  width: clamp(40px, 4.4vw, 46px);
  height: clamp(40px, 4.4vw, 46px);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--nav-shadow);
  display: grid;
  place-items: center;
  transition: transform 0.25s;
}
.logo:hover { transform: scale(1.04); }
.logo img { width: 72%; height: 72%; object-fit: contain; }

.nav-pill {
  flex: 1;
  max-width: 470px;
  height: clamp(44px, 5.2vw, 48px);
  padding: 4px 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
}
.nav-pill a {
  position: relative;
  padding: 6px 10px 8px;
  font-size: clamp(12.5px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--nav-text);
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.nav-pill a:hover { opacity: 0.75; }
.nav-pill a.active { opacity: 1; }
.nav-pill a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: -5px 0 0 var(--accent), 5px 0 0 var(--accent);
}

.phone-pill {
  flex-shrink: 0;
  height: clamp(44px, 5.2vw, 48px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(14px, 1.8vw, 20px);
  background: var(--pill-dark);
  color: var(--sign-in-text);
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  font-size: clamp(12.5px, 1.4vw, 14px);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.phone-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.phone-pill:hover { background: #323234; color: #fff; transform: translateY(-1px); }

.burger {
  display: none;
  position: fixed;
  top: var(--pad-y);
  right: var(--pad-x);
  z-index: 50;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--pill-dark);
  box-shadow: var(--nav-shadow);
  cursor: pointer;
  transition: background 0.25s;
}
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s, opacity 0.2s, background 0.25s;
}
.burger span:nth-child(1) { transform: translateY(-6.5px); }
.burger span:nth-child(3) { transform: translateY(6.5px); }
/* Bei offenem Menue steht der Inhalt dahinter still. Frueher war das auf der
   Startseite unnoetig, weil sie gar nicht scrollen konnte. */
body.menu-open { overflow: hidden; }
body.menu-open .burger { background: #fff; }
body.menu-open .burger span { background: #111; }
body.menu-open .burger span:nth-child(1) { transform: translateY(0) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ---------- Mobiles Menue ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  animation: overlayIn 0.28s ease both;
}
.mobile-menu {
  position: fixed;
  z-index: 40;
  top: calc(var(--pad-y) + 48px + 12px);
  left: var(--pad-x);
  right: var(--pad-x);
  background: #fff;
  border-radius: 28px;
  padding: 22px 18px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: menuIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-menu a {
  position: relative;
  display: block;
  padding: 13px 8px 15px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--nav-text);
  opacity: 0;
  animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mobile-menu a:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu a:nth-child(2) { animation-delay: 0.11s; }
.mobile-menu a:nth-child(3) { animation-delay: 0.16s; }
.mobile-menu a:nth-child(4) { animation-delay: 0.21s; }
.mobile-menu a:nth-child(5) { animation-delay: 0.26s; }
.mobile-menu a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: -5px 0 0 var(--accent), 5px 0 0 var(--accent);
}
.mobile-menu .menu-call {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  border-radius: 999px;
  background: var(--pill-dark);
  color: #fff;
  font-weight: 600;
  opacity: 0;
  animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.31s forwards;
}
.mobile-menu .menu-call svg { width: 15px; height: 15px; }

/* ============================================================
   STARTSEITE (nur bei <body class="landing">)
   ============================================================ */
/* Der erste Bildschirm fuellt die Sichthoehe, darunter geht es weiter.
   Die Slideshow steht fest im Hintergrund und scrollt nicht mit. */
.bg {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(2px);
  will-change: opacity, transform;
  animation: slideCycle 32s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
/* Die Fotos sind unterschiedlich hell. Ohne eigenen Abdunklungswert pro Bild
   waere das dunkle Rotbild schwarz, sobald der Schleier fuer das helle
   Pinkbild stark genug ist. --dim gleicht die Helligkeit an. */
.bg-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--dim, 0.3));
}
.bg-slide:nth-child(1) { animation-delay: 0s; }
.bg-slide:nth-child(2) { animation-delay: 8s; }
.bg-slide:nth-child(3) { animation-delay: 16s; }
.bg-slide:nth-child(4) { animation-delay: 24s; }

/* Mindestmassstab 1.04, damit die weichgezeichneten Raender nie sichtbar werden. */
@keyframes slideCycle {
  0%   { opacity: 0; transform: scale(1.16); }
  4%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.16); }
}

.bg-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 74% 58% at 50% 46%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.44)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.22) 25%,
      rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.78) 100%);
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--pad-y) var(--pad-x);
}
.page > .site-head {
  flex-shrink: 0;
  animation: slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Zurueckhaltende Vertrauenszeile: schmale Pille, keine Bild-Kreise */
.trust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(16px, 2.5vh, 26px);
  padding: 7px 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(11.5px, 1.2vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.trust:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}
.trust .tdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255, 47, 47, 0.9), 0 0 14px rgba(255, 47, 47, 0.45);
  flex-shrink: 0;
  animation: tdotPulse 2.6s ease-in-out infinite;
}
@keyframes tdotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255, 47, 47, 0.9), 0 0 14px rgba(255, 47, 47, 0.45); }
  50%      { opacity: 0.6; box-shadow: 0 0 3px rgba(255, 47, 47, 0.45), 0 0 8px rgba(255, 47, 47, 0.2); }
}

.headline {
  color: #fff;
  font-size: clamp(28px, 6vw, 80px);
  line-height: 1.16;
  /* Weicher Schein je Punkt statt eines dunkleren Schleiers ueber dem ganzen
     Bild - so bleiben die Fotos hell und der Text trotzdem lesbar. */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  max-width: 100%;
  overflow: hidden;
}
.headline span { display: block; white-space: nowrap; }
.headline.anim { opacity: 1; transform: none; filter: none; animation: none; }
.headline.anim span {
  opacity: 0;
  transform: translateY(14px);
  animation: headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.headline.anim span:nth-child(1) { animation-delay: 0.12s; }
.headline.anim span:nth-child(2) { animation-delay: 0.3s; }

.subhead {
  max-width: min(500px, 92%);
  margin-top: clamp(14px, 2.2vh, 22px);
  font-size: clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt));
  line-height: 1.55;
  color: #dcdcdc;
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(18px, 3vh, 30px);
}
.cta-row.anim { animation-name: revealPulse; }
.cta-ghost-short { display: none; }

.stats {
  flex-shrink: 0;
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 24px);
  text-align: center;
}
.stat-icon {
  font-family: "Doto", var(--font-sans);
  font-weight: 900;
  font-size: clamp(20px, 2.7vw, 30px);
  line-height: 1;
  color: #fff;
  opacity: 0.9;
}
.stat-value {
  margin-top: 6px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 2px;
  font-size: clamp(11px, 1.2vw, 12.5px);
  color: var(--muted);
  line-height: 1.35;
}

/* Hinweis, dass unter dem ersten Bildschirm noch etwas kommt. Ohne ihn
   uebersieht ein Teil der Besucher den Inhalt darunter komplett. */
.scroll-cue {
  flex-shrink: 0;
  margin-top: clamp(12px, 2vh, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.25s;
}
.scroll-cue:hover { color: rgba(255, 255, 255, 0.85); }
.scroll-cue svg {
  width: 15px;
  height: 15px;
  animation: cueBob 2.4s ease-in-out infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Alles unterhalb des ersten Bildschirms. Deckender Hintergrund, damit die
   fest stehende Slideshow nicht durchscheint. */
.landing-more {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
/* Das Sprungziel des Pfeils darf nicht unter der klebenden Leiste landen. */
#leistungen { scroll-margin-top: 76px; }

/* Leistungen: der Verleih traegt das Geschaeft und bekommt die grosse
   Flaeche, der DJ steht bewusst daneben statt gleichberechtigt darunter. */
.offer-split {
  display: grid;
  gap: 14px;
}
.offer-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
}
.offer-main h3 { font-size: clamp(20px, 2.4vw, 26px); }
.offer-main > p {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}
.offer-main .check-list { margin: 20px 0 26px; }
.offer-main .btn { align-self: flex-start; margin-top: auto; }

/* Der DJ ist auf der Startseite nur ein Hinweis, keine zweite Karte
   neben dem Verleih. */
.offer-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.offer-note p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 80ch;
}
.offer-note .card-link {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.offer-note .card-link:hover { opacity: 0.7; }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 68px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.page-hero .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.06);
  opacity: 0.5;
}
.page-hero .ph-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 30% 40%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8)),
    linear-gradient(180deg, rgba(7, 9, 13, 0.7) 0%, rgba(7, 9, 13, 0.6) 40%, var(--bg) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.14;
  margin-bottom: 18px;
}
.page-hero p {
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: var(--text-soft);
}

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section.tight { padding: clamp(32px, 4vw, 52px) 0; }
.section.alt { background: var(--bg-soft); border-block: 1px solid rgba(255, 255, 255, 0.06); }

.section-head { max-width: 660px; margin-bottom: clamp(28px, 4vw, 48px); }
.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(22px, 3.1vw, 34px);
  margin-bottom: 12px;
}
.section-head p { color: var(--text-soft); font-size: 15.5px; }

/* Karten */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.card:hover { background: var(--surface-hi); border-color: var(--line-hi); transform: translateY(-3px); }
.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #fff;
}
.card .icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 17px; margin-bottom: 9px; }
.card p { color: var(--text-soft); font-size: 14.5px; }
.card .card-link {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.2s;
}
.card .card-link:hover { opacity: 0.7; }

/* Preiskarten */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
  align-items: stretch;
}
/* Vier Pakete: feste Spaltenzahl statt auto-fit. Sonst passen bei 1120 px
   Inhaltsbreite nur drei Karten nebeneinander und die vierte stuende allein
   in der zweiten Reihe. */
.price-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 1000px) {
  .price-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .price-grid.cols-4 .price-card { padding: 28px 20px; }
  /* Zwei Zeilen Platz fuer die Zeile mit den Anlaessen: sonst rutschen
     Gaestezahl und Preis von Karte zu Karte auf verschiedene Hoehen. */
  .price-grid.cols-4 .subtitle { min-height: 40px; }
}
@media (max-width: 560px) {
  .price-grid.cols-4 { grid-template-columns: 1fr; }
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s, border-color 0.25s;
}
.price-card:hover { background: var(--surface-hi); }
.price-card.featured {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.5);
}
.price-card .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card .badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: 1px;
}
.price-card h3 { font-size: 17px; margin-bottom: 5px; }
.price-card .subtitle { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; line-height: 1.45; }
.price-card .price {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.price-card .price small { font-size: 15px; font-weight: 400; color: var(--muted); }

/* Summe der Einzelpreise unter dem Paketpreis. Der negative Abstand nach oben
   holt die Zeile an den Preis heran, ohne die 20px Luft nach unten anzutasten,
   die .price sonst zur Liste haelt. */
.price-card .single-sum {
  margin: -14px 0 20px;
  font-size: 12.5px;
  color: var(--muted);
}
.price-card ul { list-style: none; margin-bottom: 20px; }
.price-card li,
.check-list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 14.5px;
  color: var(--text-soft);
}
.price-card li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  opacity: 0.75;
}

/* Gaestezahl: der wichtigste Wert beim Vergleichen, deshalb als eigene
   Plakette in der Akzentfarbe und nicht als weitere Listenzeile. */
.price-card .pax {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: rgba(255, 47, 47, 0.1);
  border: 1px solid rgba(255, 47, 47, 0.34);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.price-card .pax svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }

/* Besonderes Leistungsmerkmal des groessten Pakets. */
.price-card li.hi { color: #fff; font-weight: 600; }
.price-card li.hi::before { border-color: var(--accent); opacity: 1; }
.price-card .hi-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 47, 47, 0.16);
  border: 1px solid rgba(255, 47, 47, 0.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ff8a8a;
  white-space: nowrap;
}
/* Der Zubehoer-Hinweis wird nach unten geschoben, damit er in allen vier
   Karten auf einer Linie steht - die Listen sind unterschiedlich lang. */
.price-card .incl {
  margin: auto 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.price-card .btn { margin-top: auto; }
.price-card .incl + .btn { margin-top: 0; }

.check-list { list-style: none; }
.check-list li { color: var(--text-soft); }

/* Gerätetabellen */
.equip-block { margin-bottom: 30px; }
.equip-block:last-child { margin-bottom: 0; }
.equip-block h3 { font-size: 16px; margin-bottom: 14px; }
.equip-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.equip-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.equip-table th, .equip-table td { text-align: left; padding: 14px 20px; font-size: 14.5px; }
.equip-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.equip-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.equip-table tr:last-child td { border-bottom: none; }
.equip-table .muted { color: var(--muted); font-size: 13.5px; }
.equip-table .price-cell { font-weight: 600; white-space: nowrap; text-align: right; }

.equip-name { display: flex; align-items: center; gap: 14px; }
.equip-thumb {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  padding: 3px;
}

/* Kundenstimmen. Wortlaut 1:1 aus dem Google-Business-Profil, statisch
   eingepflegt - so wird beim Seitenaufruf nichts an Google uebertragen und es
   braucht kein Einwilligungsbanner.

   Es liegt immer nur eine Bewertung im Bild, die naechste blendet sich ein.
   Ohne Skript stehen alle sechs schlicht untereinander und sind damit
   vollstaendig lesbar; erst "is-live" legt sie uebereinander.

   Hier stand frueher eine lange Reihe, die seitlich durchs Bild lief. Am Handy
   blieb an ihrer Stelle stellenweise nur eine schwarze Flaeche: die Reihe war
   mit allen Karten mehrere tausend Pixel breit, und ein derart breites,
   bewegtes Element sprengt auf Telefonen das Texturlimit der Grafikeinheit.
   Deshalb ist jetzt immer nur eine Karte breit, was gezeichnet werden muss. */
/* Karte und Fusszeile teilen sich dieselbe Breite und stehen links unter der
   Ueberschrift, wie alles andere auf der Seite auch. */
.reviews-stage { max-width: 760px; }
.reviews-stage > .testimonial + .testimonial { margin-top: 14px; }

.reviews-stage.is-live { display: grid; }
.reviews-stage.is-live > .testimonial {
  /* alle in derselben Zelle, also uebereinander. Die Buehne ist damit so hoch
     wie die laengste Bewertung und wackelt beim Wechsel nicht. */
  grid-area: 1 / 1;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.reviews-stage.is-live > .testimonial.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Fusszeile: Google-Link links, Punkte in der Mitte, Pfeile rechts. */
.reviews-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  max-width: 760px;
}
.reviews-foot .rating-link { margin-top: 0; }
.reviews-nav { display: flex; gap: 10px; margin-left: auto; }
.reviews-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.reviews-btn:hover { background: var(--surface-hi); border-color: var(--line-hi); }
.reviews-btn:active { background: rgba(255, 255, 255, 0.12); }
.reviews-btn svg { width: 18px; height: 18px; }

/* Punkte: der Knopf ist 22px gross, damit man ihn am Handy trifft, sichtbar
   sind davon nur die 8px in der Mitte. */
.reviews-dots { display: flex; gap: 4px; }
.reviews-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reviews-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s, transform 0.2s;
}
.reviews-dot:hover::before { background: rgba(255, 255, 255, 0.45); }
.reviews-dot.is-current::before { background: var(--accent); transform: scale(1.3); }

.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s, border-color 0.25s;
}
.testimonial:hover { background: var(--surface-hi); border-color: var(--line-hi); }
.testimonial blockquote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.testimonial blockquote::before { content: "„"; }
.testimonial blockquote::after { content: "\201C"; }
.testimonial figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.testimonial figcaption strong { color: #fff; font-weight: 600; }
.testimonial .stars { color: #e8b64c; letter-spacing: 0.08em; }

.rating-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s;
}
.rating-link:hover { opacity: 0.7; }

/* Bildblock */
.media {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.media.wide img { aspect-ratio: 16 / 10; }

/* Hinweisbox */
.note-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  font-size: 14.5px;
  color: var(--text-soft);
}
.note-box strong { color: #fff; font-weight: 600; }

/* Ablauf-Schritte */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.step .num {
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 16px;
  opacity: 0.85;
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: 14.5px; }

/* Orte */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-soft);
}
.chip.primary { background: #fff; color: #000; border-color: #fff; font-weight: 600; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

/* Abschluss-Banner */
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 60% 120% at 85% 30%, rgba(255, 255, 255, 0.09), transparent),
    var(--surface);
  padding: clamp(32px, 5vw, 52px) clamp(26px, 4vw, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.cta-band h2 { font-size: clamp(20px, 2.7vw, 30px); margin-bottom: 10px; }
.cta-band p { color: var(--text-soft); max-width: 50ch; font-size: 15px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kontaktseite */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.contact-info {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.contact-info h2 { font-size: 19px; margin-bottom: 26px; }
.contact-line { display: flex; gap: 15px; margin-bottom: 22px; align-items: flex-start; }
.contact-line .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.contact-line .icon svg { width: 18px; height: 18px; }
.contact-line .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 2px;
}
.contact-line a, .contact-line .value { font-size: 15.5px; font-weight: 600; }
.contact-line a:hover { opacity: 0.75; }
.contact-info .hint {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}
.form-group .req { color: var(--faint); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: inherit;
  /* Mindestens 16px: iOS Safari zoomt sonst beim Antippen automatisch in das
     Feld hinein und der Besucher muss danach wieder herauszoomen. */
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-group textarea { resize: vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.form-group select option { background: #14161c; color: #fff; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.form-note a { text-decoration: underline; }

/* Fliesstext (Impressum, Datenschutz, Über) */
.prose { max-width: 720px; }
.prose h2 { font-size: 19px; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 26px 0 8px; }
.prose p { margin-bottom: 14px; color: var(--text-soft); font-size: 15.5px; }
.prose a { text-decoration: underline; color: #fff; }
.prose ul { margin: 0 0 14px 20px; color: var(--text-soft); }
.prose li { margin-bottom: 6px; }

/* Fusszeile */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--bg-soft);
  padding: clamp(40px, 5vw, 60px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .fmark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}
.footer-brand .fmark img { width: 72%; height: 72%; object-fit: contain; }
.footer-brand span { font-weight: 700; letter-spacing: 0.06em; font-size: 15px; }
.footer-grid p { font-size: 14px; color: var(--muted); max-width: 38ch; }
.footer-grid h4 { font-size: 13px; margin-bottom: 14px; letter-spacing: 0; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a, .footer-grid li { font-size: 14px; color: var(--muted); }
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); margin-left: 20px; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Animationen ---------- */
.anim {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  filter: blur(6px);
  animation: reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes revealPulse {
  0%   { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(6px); }
  70%  { opacity: 1; transform: translateY(0) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes headlineFade { to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes linkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Breakpoints ---------- */
@media (max-width: 720px) {
  .site-head { justify-content: space-between; max-width: 100%; }
  .nav-pill, .phone-pill { display: none; }
  .burger { display: block; }
  .logo { width: 48px; height: 48px; }
  .topbar { padding-right: calc(var(--pad-x) + 56px); }

  .headline { line-height: 1.1; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .cta-row { gap: 10px; }

  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .trust { margin-bottom: 14px; }
  .subhead { margin-top: 12px; }
  .cta-row { margin-top: 18px; }
}

@media (max-height: 700px) {
  .trust { margin-bottom: 12px; }
  .subhead { margin-top: 10px; }
  .cta-row { margin-top: 14px; }
  .scroll-cue { margin-top: 10px; }
}

@media (max-width: 460px) {
  .headline { line-height: 1.08; }
  .cta-row .btn { flex: 1; padding-left: 16px; padding-right: 16px; }
  .cta-ghost-long { display: none; }
  .cta-ghost-short { display: inline; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band .cta-actions { width: 100%; }
  .cta-band .cta-actions .btn { flex: 1; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .anim, .headline.anim span { opacity: 1; transform: none; filter: none; }
  .trust .tdot { animation: none; opacity: 1; }
  .scroll-cue svg { animation: none; opacity: 1; }
  .mobile-menu a, .mobile-menu .menu-call { opacity: 1; }
  .bg-slide { animation: none; opacity: 0; transform: none; }
  .bg-slide:nth-child(1) { opacity: 1; }
}