/* ============================================================
   toolrent.at — Dark Premium
   Tiefes Anthrazit + Grün als Licht-Akzent (teampaur-DNA),
   helle Kontrast-Karten für Produkte/Buchung.
   Barlow 300/400/500/600 + Barlow Condensed 600/700 +
   Playfair Display Italic (Akzentwörter) — alle lokal, OFL.
   ============================================================ */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Barlow-300-latin-ext.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Barlow-300-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Barlow-400-latin-ext.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Barlow-400-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Barlow-500-latin-ext.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Barlow-500-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Barlow-600-latin-ext.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Barlow-600-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-600-latin-ext.woff2') format('woff2');
  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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-700-latin-ext.woff2') format('woff2');
  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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2');
  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;
}
/* Playfair Display — nur der Italic-Schnitt, für Akzentwörter */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-500-latin-ext.woff2') format('woff2');
  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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-500-latin.woff2') format('woff2');
  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 {
  --grund: #101318;            /* Seitengrund */
  --flaeche: #171b21;          /* Sektionen/Karten auf Dunkel */
  --flaeche-2: #1d232b;        /* hellere Fläche auf Dunkel */
  --linie-dunkel: rgba(255, 255, 255, 0.07);
  --linie-dunkel-2: rgba(255, 255, 255, 0.12);
  --gruen: #76b82a;
  --gruen-hell: #9cd65a;       /* Glow/helle Akzente auf Dunkel */
  --gruen-dunkel: #5e9421;     /* grüner Text auf hellen Karten (Kontrast) */
  --gruen-blass: #eef5e2;      /* dezente grüne Fläche auf hellen Karten */
  --hell-headline: #edeff2;
  --hell-text: rgba(237, 239, 242, 0.72);
  --hell-leise: rgba(237, 239, 242, 0.45);
  --karte-hell: #f7f6f2;       /* Kontrast-Karten (Produkte, Buchung, Preise) */
  --karte-linie: #e4e1d8;
  --text-dunkel: #1d2126;
  --text-dunkel-2: #5b626b;
  --ok: #1d9a4a;
  --fehler: #e05a4f;
  --fehler-dunkel: #c33a2f;
  --radius: 20px;              /* Karten */
  --radius-klein: 10px;        /* Inputs, kleine Flächen */
  --schatten-tief: 0 24px 60px rgba(0, 0, 0, 0.4);
  --font: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-akzent: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --uebergang: 0.35s cubic-bezier(0.25, 0.6, 0.3, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--hell-text);
  background: var(--grund);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container-schmal { max-width: 760px; }

a { color: var(--gruen-hell); text-decoration: none; transition: color var(--uebergang); }
a:hover { text-decoration: underline; }

/* Display-Typografie: leichte, große Headlines mit kursivem Akzent */
h1, h2 {
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hell-headline);
}
h3 {
  font-family: var(--font-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--hell-headline);
}
.akzent {
  font-family: var(--font-akzent);
  font-style: italic;
  font-weight: 500;
  color: var(--gruen-hell);
  letter-spacing: 0;
}

.icon { vertical-align: -0.18em; flex-shrink: 0; }

:focus-visible {
  outline: 3px solid rgba(156, 214, 90, 0.7);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gruen);
  color: var(--text-dunkel);
  padding: 10px 18px;
  z-index: 999;
  border-radius: 0 0 var(--radius-klein) 0;
}
.skip-link:focus { left: 0; }

/* Overline: kurzer Grün-Strich + Condensed-Label */
.overline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gruen-hell);
  margin-bottom: 16px;
}
.overline::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gruen);
  flex-shrink: 0;
}

/* Zentrierte Sektions-Köpfe */
.sektions-kopf {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.sektions-kopf .overline { justify-content: center; }
.sektions-kopf .overline::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gruen);
  flex-shrink: 0;
}

/* ---------------- Header: dunkel-transparent, wird solid ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 19, 24, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie-dunkel);
  transition: background var(--uebergang), border-color var(--uebergang), opacity 0.6s ease 0.1s;
}
.site-header.gescrollt {
  background: rgba(16, 19, 24, 0.96);
  border-bottom-color: rgba(118, 184, 42, 0.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  transition: transform var(--uebergang), opacity var(--uebergang);
}
.logo:hover { transform: translateY(-1px); }
.logo img { height: 40px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--hell-text);
  padding: 9px 15px;
  border-radius: 999px;
  transition: color var(--uebergang), background var(--uebergang);
}
.main-nav a:hover { color: var(--hell-headline); background: var(--linie-dunkel); text-decoration: none; }
.main-nav a.aktiv { color: var(--gruen-hell); }
.main-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gruen);
  color: var(--text-dunkel);
  font-weight: 700;
  margin-left: 12px;
  padding: 11px 22px;
  border-radius: 999px;
}
.main-nav .nav-cta:hover {
  background: var(--gruen-hell);
  color: var(--text-dunkel);
  box-shadow: 0 0 24px rgba(118, 184, 42, 0.35);
}

/* Zwischenbereich (Burger aus, aber wenig Platz): Nav verdichten,
   damit die 6 Punkte + CTA einzeilig bleiben */
@media (min-width: 901px) and (max-width: 1330px) {
  .main-nav { gap: 0; }
  .main-nav a { font-size: 0.88rem; letter-spacing: 0.05em; padding: 8px 9px; }
  .main-nav .nav-cta { margin-left: 6px; padding: 10px 14px; }
  .logo img { height: 44px; width: auto; }
}

.nav-burger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  width: 25px; height: 2px;
  background: var(--hell-headline);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 9, 0.65);
  z-index: 90;
}
.nav-scrim.offen { display: block; }

@media (max-width: 1000px) {
  .nav-burger { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(16, 19, 24, 0.98);
    padding: 12px 24px 20px;
    border-bottom: 1px solid rgba(118, 184, 42, 0.5);
    z-index: 95;
  }
  .main-nav.offen { display: flex; }
  .main-nav a { border-radius: var(--radius-klein); padding: 12px 15px; }
  .main-nav .nav-cta { margin-left: 0; margin-top: 10px; justify-content: center; }
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 480px at 78% 40%, rgba(118, 184, 42, 0.1), transparent 62%),
    radial-gradient(900px 600px at 15% 110%, rgba(29, 35, 43, 0.9), transparent 70%),
    linear-gradient(165deg, #14181e 0%, var(--grund) 60%, #0b0d11 100%);
  color: var(--hell-text);
  margin-top: -77px;            /* unter den transparenten Header ziehen */
  padding-top: 77px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 110px;
  padding-bottom: 120px;
  max-width: 640px;
}
@media (max-width: 900px) {
  .hero-inner { padding-top: 72px; padding-bottom: 72px; max-width: none; }
}

.hero-geraet {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: min(44vw, 540px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hero-geraet img { width: 100%; opacity: 0.88; }
@media (max-width: 900px) { .hero-geraet { display: none; } }

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  margin-bottom: 20px;
}

.hero-text {
  color: var(--hell-text);
  font-size: 1.08rem;
  max-width: 540px;
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gruen-hell);
  border: 1px solid rgba(118, 184, 42, 0.4);
  border-radius: 999px;
  padding: 9px 20px;
}

/* ---------------- Buttons: Pills ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 30px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--uebergang), background var(--uebergang),
              color var(--uebergang), border-color var(--uebergang),
              box-shadow var(--uebergang);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary {
  background: var(--gruen);
  color: var(--text-dunkel);
}
.btn-primary:hover {
  background: var(--gruen-hell);
  color: var(--text-dunkel);
  box-shadow: 0 0 32px rgba(118, 184, 42, 0.4);
}

.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-hell { background: transparent; color: var(--hell-headline); border-color: var(--linie-dunkel-2); }
.btn-hell:hover { border-color: var(--hell-headline); color: #fff; }

.btn-gross { padding: 15px 36px; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn-klein { padding: 8px 18px; font-size: 0.88rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------- Sections ---------------- */

.section { padding: 110px 0; }
.section-alt {
  background: var(--flaeche);
  border-block: 1px solid var(--linie-dunkel);
}
.section-dunkel {
  background: linear-gradient(170deg, var(--flaeche) 0%, #12161b 100%);
  border-block: 1px solid var(--linie-dunkel);
}

.section h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 12px; }
.section-intro { color: var(--hell-text); margin-bottom: 36px; font-size: 1.02rem; }
.sektions-kopf .section-intro { margin-bottom: 0; }

.page-head {
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(118, 184, 42, 0.09), transparent 60%),
    linear-gradient(165deg, #14181e 0%, var(--grund) 100%);
  padding: 130px 0 56px;
  margin-top: -77px;
  border-bottom: 1px solid var(--linie-dunkel);
}
.page-head h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.page-head p { color: var(--hell-text); margin-top: 12px; max-width: 640px; }
.breadcrumb {
  font-family: var(--font-cond);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  color: var(--hell-leise);
}
.breadcrumb a { color: var(--gruen-hell); }

/* ---------------- Helle Kontrast-Karten ---------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Genau drei Karten: zentriert statt linksbündig im auto-fill-Raster */
.card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: center;
}
@media (max-width: 900px) {
  .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Genau drei Leistungs-Karten: zentriert statt linksbündig im auto-fill-Raster */
.leistungs-grid {
  grid-template-columns: repeat(2, minmax(0, 350px));
  justify-content: center;
}
@media (min-width: 1100px) {
  .leistungs-grid { grid-template-columns: repeat(4, minmax(0, 265px)); }
}
@media (max-width: 900px) {
  .leistungs-grid { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--karte-hell);
  color: var(--text-dunkel);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--schatten-tief);
}
/* Typo-System helle Karten: Titel = Cond 700/1.15rem, Werte = Cond 700/1.2rem,
   Labels = Cond 600/0.75rem, Fließtext = Barlow 400/0.95rem.
   Farben nur --text-dunkel / --text-dunkel-2, Grün für Links/Preise. */
.card h2, .card h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dunkel);
  margin-bottom: 10px;
}
/* Buttons in Karten kleben nie am Inhalt darüber */
.card .btn { margin-top: 18px; }
.card p { font-size: 0.95rem; }
.card a { color: var(--gruen-dunkel); }
/* Link-Buttons in Karten behalten ihre Button-Farbe (sonst greift .card a) */
.card a.btn-primary, .card a.btn-primary:hover { color: var(--text-dunkel); }
.card a.btn-sekundaer { color: var(--text-dunkel); }
.card a.btn:hover { text-decoration: none; }

a.card {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
a.card:hover {
  text-decoration: none;
  transform: translateY(-5px);
  border-color: rgba(118, 184, 42, 0.55);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.card-bild {
  background: #fff;
  border-radius: calc(var(--radius) - 8px);
  height: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px -10px 10px;
  overflow: hidden;
}
.card-bild img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.25, 0.6, 0.3, 1);
}
a.card:hover .card-bild img { transform: scale(1.05); }

.card-bild-platzhalter { background: #fff; color: var(--text-dunkel-2); }

.geraet-card h3 { flex-grow: 1; }

.card-link {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--karte-linie);
  color: var(--gruen-dunkel);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.kategorie-card p { color: var(--text-dunkel-2); font-size: 0.9rem; }

.geraet-specs { display: flex; gap: 6px; flex-wrap: wrap; }
.geraet-specs span {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fff;
  border: 1px solid var(--karte-linie);
  border-radius: 999px;
  padding: 3px 11px;
  color: var(--text-dunkel-2);
}

.geraet-preis {
  font-size: 0.85rem;
  color: var(--text-dunkel-2);
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}
.geraet-preis strong {
  color: var(--gruen-dunkel);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.5rem;
}
.preis-einheit {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.preis-woche {
  margin-left: auto;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gruen-blass);
  color: var(--gruen-dunkel);
  border-radius: 999px;
  padding: 3px 11px;
}

.kategorie-titel {
  margin: 56px 0 20px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hell-headline);
}

/* Alle Kategorien immer sichtbar: Umbruch statt verstecktem Scrollen
   (einzeiliges Scrollen ohne Scrollbar hatte Chips abgeschnitten) */
.kategorie-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px 2px;
}

.chip {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-dunkel-2);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--hell-text);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--uebergang), color var(--uebergang);
}
.chip.aktiv { border-color: var(--gruen); background: var(--gruen); color: var(--text-dunkel); }
.kategorie-titel { scroll-margin-top: 96px; }
@keyframes kategorie-blink {
  0% { color: var(--gruen-hell); text-shadow: 0 0 22px rgba(118, 184, 42, 0.6); }
  100% { color: inherit; text-shadow: none; }
}
.kategorie-titel.kategorie-blink { animation: kategorie-blink 1.8s ease-out; }
.chip:hover {
  border-color: var(--gruen);
  color: var(--gruen-hell);
  text-decoration: none;
}

/* ---------------- „So funktioniert's" ---------------- */

.schritte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 860px) { .schritte-grid { grid-template-columns: 1fr; } }

.schritt {
  background: var(--flaeche-2);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  transition: border-color var(--uebergang), transform var(--uebergang);
}
.schritt:hover { border-color: rgba(118, 184, 42, 0.4); transform: translateY(-3px); }
.schritt-nr {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--gruen);
  margin-bottom: 14px;
}
.schritt h3 { font-size: 1.12rem; margin-bottom: 8px; }
.schritt p { color: var(--hell-text); font-size: 0.95rem; }

/* ---------------- Fakten-Band ---------------- */

.fakten-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 44px;
}
.fakt {
  padding: 4px 28px;
  border-left: 1px solid var(--linie-dunkel);
}
.fakt:first-child { border-left: none; padding-left: 0; }
.fakt-zahl {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--gruen-hell);
  line-height: 1.15;
  display: block;
  margin-bottom: 4px;
}
.fakt-text { color: var(--hell-leise); font-size: 0.88rem; }

@media (max-width: 860px) {
  .fakten-band { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .fakt:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 440px) {
  .fakten-band { grid-template-columns: 1fr; }
  .fakt { border-left: none; padding: 0; }
}

/* ---------------- Zitat: großes zentriertes Statement ---------------- */

.philosophie-text {
  max-width: 620px;
  margin: 36px auto 0;
  text-align: center;
}
.philosophie-text p {
  color: var(--hell-text);
  font-size: 1.02rem;
  margin-bottom: 14px;
}

.zitat-block {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.zitat-block blockquote {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.35;
  color: var(--hell-headline);
}
.zitat-block blockquote .akzent { font-size: 1.05em; }
.zitat-block figcaption {
  margin-top: 22px;
  color: var(--hell-leise);
  font-size: 0.95rem;
}
.zitat-block figcaption strong { color: var(--hell-text); font-weight: 500; }
.zitat-block figcaption::before {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--gruen);
  margin: 0 auto 18px;
}

/* ---------------- CTA-Band ---------------- */

.cta-band {
  background:
    radial-gradient(480px 260px at 90% 20%, rgba(118, 184, 42, 0.12), transparent 65%),
    linear-gradient(165deg, var(--flaeche-2) 0%, var(--flaeche) 100%);
  border: 1px solid var(--linie-dunkel-2);
  border-radius: var(--radius);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: 1.7rem; }
.cta-band p { color: var(--hell-text); }
.cta-band a:not(.btn) { color: var(--gruen-hell); }

/* ---------------- Detailseite ---------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}
.detail-grid > * { min-width: 0; } /* Grid-Items dürfen unter min-content schrumpfen */
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-info { display: flex; flex-direction: column; gap: 18px; }

/* Bildbühne: Produkt braucht Weiß, Rahmen bleibt dunkel-edel */
.detail-bild {
  background: #fff;
  border: 1px solid var(--linie-dunkel-2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  min-height: 260px;
  box-shadow: var(--schatten-tief);
}
.detail-bild img { max-width: 100%; max-height: 330px; object-fit: contain; }

/* Gerätedaten + Abholung: dunkle, edle Karten */
.detail-info .card {
  background: var(--flaeche-2);
  color: var(--hell-text);
  border: 1px solid var(--linie-dunkel);
  box-shadow: none;
}
.detail-info .card h2 { color: var(--hell-headline); }
.detail-info .card a { color: var(--gruen-hell); }
.detail-info .spec-liste dt { color: var(--hell-leise); }
.detail-info .spec-liste dd { color: var(--hell-text); }
.detail-info .spec-liste dd strong { color: var(--gruen-hell); }
.detail-info .hinweis { color: var(--hell-leise); }

.spec-liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  margin: 14px 0;
}
.spec-liste dt {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dunkel-2);
  padding-top: 3px;
}
.spec-liste dd { font-size: 0.95rem; color: var(--text-dunkel); }

.abhol-card h2 { margin-bottom: 12px; }
.abhol-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  margin-bottom: 10px;
}
.abhol-zeile .icon { color: var(--gruen-hell); margin-top: 2px; }

/* ---------------- Buchungsbox: helle Kontrast-Karte ---------------- */

.detail-buchung { position: sticky; top: 96px; }
@media (max-width: 900px) { .detail-buchung { position: static; } }

.buchung-card { padding: 28px; }
.buchung-kopf { margin-bottom: 18px; }
.buchung-preis {
  color: var(--text-dunkel-2);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.buchung-preis strong { color: var(--gruen-dunkel); font-size: 1.9rem; letter-spacing: 0; }
.buchung-card h2 { font-size: 1.15rem; }

form label {
  display: block;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  color: var(--text-dunkel);
}
form input, form textarea, form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1.5px solid var(--karte-linie);
  border-radius: var(--radius-klein);
  font: inherit;
  font-family: var(--font);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dunkel);
  background: #fff;
  transition: border-color var(--uebergang);
}
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--gruen);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-row-4 { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1fr; gap: 12px; }
@media (max-width: 700px) { .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; } }

/* ---------------- Admin-Bereich ---------------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--linie-dunkel);
  color: var(--hell-text);
  text-decoration: none;
  transition: border-color var(--uebergang);
}
.stat-box:hover { border-color: var(--gruen); }
.stat-box strong { font-family: var(--font-cond); font-size: 1.9rem; line-height: 1; color: var(--gruen-hell); }
.stat-box span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hell-leise); }
.stat-box.stat-warn strong { color: #f5b942; }
.stat-box.stat-alarm { border-color: #e5534b; background: rgba(229, 83, 75, 0.12); }
.stat-box.stat-alarm strong { color: #ff7b73; }
.ueberfaellig-card { border: 2px solid #e5534b; }
.ueberfaellig-card h2 { color: var(--fehler-dunkel); }

.admin-card { margin-bottom: 24px; }
.admin-card h2 { margin-bottom: 14px; }
.leise { color: var(--text-dunkel-2); }

details.admin-form { margin-bottom: 24px; }
details.admin-form summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
details.admin-form summary::-webkit-details-marker { display: none; }
details.admin-form summary small { font-family: var(--font-text); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dunkel-2); font-size: 0.92rem; }
.admin-form-inhalt { margin-top: 18px; }
.admin-form-fuss { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.admin-form-fuss .form-check { margin: 0; }
.admin-form-fuss .btn { margin-left: auto; }

.admin-filter {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.admin-filter label { margin-bottom: 0; }
@media (max-width: 800px) { .admin-filter { grid-template-columns: 1fr 1fr; } }

.pille, .pille-btn {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.pille-btn { cursor: pointer; margin-top: 4px; }
.pille-gruen { background: #e9f6ee; color: var(--ok); border-color: #bfe6cd; }
.pille-rot { background: #fdecea; color: var(--fehler-dunkel); border-color: #f6c8c3; }
.pille-gelb { background: #fff6dd; color: #a06e00; border-color: #f2dea3; }

.notiz-form { display: flex; gap: 6px; margin-top: 8px; }
.notiz-form input { padding: 6px 10px; font-size: 0.85rem; flex: 1; min-width: 140px; }
.notiz-form .btn { padding: 6px 10px; }
.zeile-storniert td { opacity: 0.55; }
.admin-tabelle small { font-size: 0.82rem; }

.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-nav a {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--linie-dunkel);
  color: var(--hell-text);
  text-decoration: none;
}
.admin-nav a.aktiv, .admin-nav a:hover { border-color: var(--gruen); color: var(--gruen-hell); }

.kal-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kal-kopf h2 { margin: 0 6px; }
.kal-springen { display: flex; gap: 6px; align-items: center; }
.kal-springen input { padding: 7px 10px; font-size: 0.9rem; }
.kal-legende { display: flex; gap: 14px; margin-left: auto; font-size: 0.85rem; color: var(--text-dunkel-2); flex-wrap: wrap; }
.kal-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.kal-legende .art-abholung { background: var(--gruen); }
.kal-legende .art-rueckgabe { background: #e0a020; }
.kal-legende .art-laufend { background: #9aa3ad; }

/* Wochenkalender */
.woche-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.woche-tag { background: #f6f7f8; border: 1px solid var(--karte-linie); border-radius: var(--radius-klein); padding: 8px; min-height: 180px; }
.woche-tag.ist-wochenende { background: #eff1f3; }
.woche-tag.ist-heute { border-color: var(--gruen); box-shadow: 0 0 0 2px rgba(118, 184, 42, 0.25); }
.woche-tag-kopf { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font-family: var(--font-cond); }
.woche-tag-kopf strong { font-size: 1.05rem; text-transform: uppercase; }
.woche-tag-kopf span { color: var(--text-dunkel-2); font-size: 0.9rem; }
.woche-tag { cursor: copy; }
.woche-eintrag { cursor: pointer; }
.woche-neu {
  margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--karte-linie); background: #fff; color: var(--gruen-dunkel);
  font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.woche-neu:hover { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.woche-tag-kopf em + .woche-neu { margin-left: 6px; }
.kal-dialog-neu { max-width: 620px; }
.kal-dialog-neu label { margin-bottom: 12px; }
.kal-dialog-neu .form-row { margin-bottom: 0; }
.kal-neu-aktionen { justify-content: flex-end; margin-top: 16px; }
.woche-tag-kopf em { margin-left: auto; font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gruen-dunkel); }
.woche-leer { color: #b0b6bd; text-align: center; margin-top: 30px; }
.woche-eintrag {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--karte-linie); border-left: 4px solid #9aa3ad;
  border-radius: 6px; padding: 7px 8px; margin-bottom: 6px; font: inherit; color: var(--text-dunkel);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.woche-eintrag:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.woche-eintrag.art-abholung, .woche-eintrag.art-tag { border-left-color: var(--gruen); }
.woche-eintrag.art-rueckgabe { border-left-color: #e0a020; }
.woche-eintrag.art-laufend { border-left-color: #9aa3ad; opacity: 0.85; }
.woche-eintrag.offen .woche-zeit::after { content: ' · offen'; color: #a06e00; }
.woche-zeit { display: block; font-family: var(--font-cond); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dunkel-2); }
.woche-geraet { display: block; font-weight: 600; font-size: 0.86rem; line-height: 1.25; margin: 2px 0; }
.woche-kunde { display: block; font-size: 0.82rem; color: var(--text-dunkel-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .woche-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .woche-grid { grid-template-columns: 1fr 1fr; } .woche-tag { min-height: 0; } }
@media (max-width: 440px) { .woche-grid { grid-template-columns: 1fr; } }

/* Detail-Dialog */
.kal-dialog { border: none; border-radius: var(--radius); padding: 0; margin: auto; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); background: #fff; }
.kal-dialog::backdrop { background: rgba(10, 12, 16, 0.6); }
.kal-dialog-inhalt { padding: 26px 28px 24px; position: relative; color: var(--text-dunkel); }
.kal-dialog-inhalt h2 { margin: 4px 0 14px; color: var(--text-dunkel); }
.kal-dialog-inhalt .overline { color: var(--gruen-dunkel); }
.kal-dialog-inhalt .spec-liste { margin-bottom: 18px; }
.kal-dialog-schliessen { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--text-dunkel-2); }

/* ---------------- Tablet-Ansicht Mietvertrag ---------------- */
.kiosk-header .header-inner { justify-content: flex-start; gap: 18px; }
.kiosk-titel { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hell-leise); font-size: 0.9rem; }
.kiosk-kopf { margin-bottom: 20px; }
.kiosk-kopf h1 { margin-bottom: 6px; }
.kiosk-kopf .leise { color: var(--hell-leise); }
.kiosk-form h2 { margin: 26px 0 14px; padding-top: 18px; border-top: 1px solid var(--karte-linie); }
.kiosk-form h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.kiosk-container { max-width: 960px; }
body:not(:has(.site-header)) .page-head { padding-top: 36px; }
body:not(:has(.site-header)) .section.kiosk { padding-top: 28px; }

/* Assistent (3 Schritte) */
.assistent-schritte { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; padding: 0; }
.assistent-schritte li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-dunkel); color: var(--hell-leise); font-family: var(--font-cond); font-weight: 600;
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.assistent-schritte li span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 0.95rem; flex: none; }
.assistent-schritte li small { margin-left: auto; font-family: var(--font-text); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; opacity: 0.8; }
.assistent-schritte li.aktiv { border-color: var(--gruen); color: #fff; background: rgba(118, 184, 42, 0.12); }
.assistent-schritte li.aktiv span { background: var(--gruen); color: #fff; }
.assistent-schritte li.fertig { color: var(--gruen-hell); }
.assistent-schritte li.fertig span { background: rgba(118, 184, 42, 0.35); color: #fff; }
@media (max-width: 640px) {
  .assistent-schritte { grid-template-columns: 1fr; gap: 4px; }
  .assistent-schritte li { padding: 8px 12px; }
}
.assistent-seite h1 { color: var(--text-dunkel); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 6px; }
.assistent-intro { color: var(--text-dunkel-2); margin-bottom: 22px; font-size: 1.02rem; }
.assistent-abstand { margin-top: 18px; }
.assistent-felder { margin-bottom: 4px; }
.assistent-mehr { margin: 6px 0 18px; }
.assistent-mehr summary { cursor: pointer; color: var(--text-dunkel-2); font-size: 0.95rem; padding: 6px 0; }
.assistent-mehr[open] summary { margin-bottom: 8px; }
.assistent-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--karte-linie); flex-wrap: wrap; }
.assistent-nav .btn-gross { margin-left: auto; }
.zusammenfassung { background: #f4f7f0; border: 1.5px solid rgba(118, 184, 42, 0.5); border-radius: var(--radius-klein); padding: 18px 20px; margin-bottom: 18px; }
.zusammenfassung .overline { color: var(--gruen-dunkel); margin-bottom: 4px; }
.zusammenfassung h2 { margin: 0 0 12px; }
.zusammenfassung .spec-liste { margin-bottom: 14px; }
.form-row-adresse { display: grid; grid-template-columns: 2fr 0.7fr 1.3fr; gap: 12px; }
@media (max-width: 640px) { .form-row-adresse { grid-template-columns: 1fr 1fr; } .form-row-adresse label:first-child { grid-column: span 2; } }
.bedingungen-box.bedingungen-gross { max-height: none; overflow: visible; font-size: 1rem; line-height: 1.55; }
.unterschrift-pad.unterschrift-voll canvas { height: 240px; }
.kiosk .kiosk-form h2 { display: none; }
.kiosk-form input:not([type="checkbox"]), .kiosk-form select {
  font-size: 1.05rem; padding: 0 14px; height: 54px; box-sizing: border-box; width: 100%;
}
.kiosk-form .form-row label,
.kiosk-form > label { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; }
.kiosk-form .form-row { margin-bottom: 14px; }
.kiosk-form > label { margin-bottom: 14px; }
.kiosk-form .span-2 { grid-column: span 2; }
.form-row-geraet { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
@media (max-width: 700px) { .form-row-geraet { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .kiosk-form .span-2 { grid-column: span 2; } }
.bedingungen-box {
  max-height: 260px; overflow-y: auto; padding: 14px 18px;
  border: 1.5px solid var(--karte-linie); border-radius: var(--radius-klein); background: #fafbfc;
  font-size: 0.9rem; line-height: 1.5;
}
.bedingungen-box ol { margin: 0 0 8px 18px; }
.bedingungen-box li { margin-bottom: 6px; }
.form-check-gross { font-size: 1rem; margin: 14px 0 6px; }
.form-check-gross input { width: 22px; height: 22px; }
.unterschriften { margin-top: 6px; }
.unterschrift-pad canvas {
  display: block; width: 100%; height: 200px; background: #fff;
  border: 1.5px dashed var(--karte-linie); border-radius: var(--radius-klein);
  touch-action: none; cursor: crosshair;
}
.unterschrift-pad.hat-unterschrift canvas { border-style: solid; border-color: var(--gruen); }
.unterschrift-pad.fehlt canvas { border-color: var(--fehler-dunkel); }
.unterschrift-titel { font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-dunkel-2); }
.unterschrift-leiste { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 0.85rem; }
.unterschrift-leiste input { flex: 1; padding: 8px 10px; font-size: 0.95rem; }
.kiosk-fuss { margin-top: 24px; }
.kiosk-fuss .unterschrift-fehler { margin: 0; flex-basis: 100%; }
.kiosk-zurueck { margin-top: 18px; }
.kiosk-zurueck a { color: var(--hell-leise); }
.unterschrift-einzeln { max-width: 640px; }
.unterschrift-anzeige img { max-width: 100%; height: 120px; object-fit: contain; background: #fff; border: 1px solid var(--karte-linie); border-radius: var(--radius-klein); padding: 6px; }
.vertrag-aktionen { margin-bottom: 16px; }
.vertrag-mailform { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.vertrag-mailform label { flex: 1; min-width: 220px; margin: 0; }
.vertrag-mailform small { flex-basis: 100%; }
.admin-filter-2 { grid-template-columns: 1fr auto auto; }

/* ---------------- Rückgabe per QR-Scan ---------------- */
.rueckgabe-overline { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--gruen-hell); margin-bottom: 4px; }
.rueckgabe-titel { margin-bottom: 6px; }
.leise-hell { color: var(--hell-leise); margin-bottom: 18px; }
.rueckgabe-card { margin-bottom: 18px; }
.rueckgabe-card h2 { margin-bottom: 12px; }
.rueckgabe-card h2 + .spec-liste { margin-bottom: 22px; }
.kasse-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.kasse-tabelle td { padding: 12px 10px; border-bottom: 1px solid var(--karte-linie); vertical-align: top; font-size: 1.05rem; }
.kasse-anzahl { font-family: var(--font-cond); font-weight: 700; font-size: 1.7rem !important; width: 80px; color: var(--gruen-dunkel); white-space: nowrap; }
.kasse-summe { text-align: right; white-space: nowrap; font-weight: 600; }
.kasse-gesamt td { border-bottom: none; font-family: var(--font-cond); font-weight: 700; font-size: 1.25rem; padding-top: 16px; }
.rueckgabe-form { display: grid; gap: 10px; margin-top: 8px; }
.rueckgabe-links { margin-top: 14px; }
.rueckgabe-liste { list-style: none; margin: 0; padding: 0; }
.rueckgabe-liste li { padding: 8px 0; border-bottom: 1px solid var(--karte-linie); font-size: 0.95rem; }
.rueckgabe-liste li:last-child { border-bottom: none; }

/* ---------------- QR-Etiketten ---------------- */
.etiketten-filter { grid-template-columns: 1.2fr 2fr auto auto; margin-top: 18px; }
/* Etikett exakt 101,5 × 38 mm (Etikettendrucker), eines pro Seite beim Druck */
.etiketten-grid { display: grid; grid-template-columns: repeat(auto-fill, 101.5mm); gap: 8mm; justify-content: start; }
.etikett {
  box-sizing: border-box; width: 101.5mm; height: 38mm; padding: 2.5mm 4mm;
  display: flex; gap: 4mm; align-items: center; overflow: hidden;
  background: #fff; color: #111; border: 1px dashed #999; border-radius: 2mm; break-inside: avoid;
}
.etikett-qr { flex: none; width: 32mm; height: 32mm; }
.etikett-qr svg { width: 100%; height: 100%; display: block; }
.etikett-text { display: flex; flex-direction: column; gap: 1mm; min-width: 0; line-height: 1.2; }
.etikett-text strong { font-size: 4mm; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; }
.etikett-text span { color: #333; font-size: 3mm; }
.etikett-hinweis { font-weight: 700; color: #111 !important; margin-top: 1mm; }
.etikett-firma { font-size: 2.6mm !important; color: #555 !important; }
@media print {
  @page { size: 101.5mm 38mm; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .druck-aus, .site-header, .site-footer, .admin-nav, .nav-scrim, .skip-link { display: none !important; }
  main { background: #fff !important; }
  .etiketten-bereich, .etiketten-bereich .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .etiketten-grid { display: block; }
  .etikett { border: none; border-radius: 0; page-break-after: always; break-after: page; margin: 0; }
  .etikett:last-child { page-break-after: auto; break-after: auto; }
}

/* ---------------- Verfügbarkeitskalender (auf heller Karte) ---------------- */

.kalender {
  border: 1.5px solid var(--karte-linie);
  border-radius: var(--radius-klein);
  padding: 14px;
  margin-bottom: 14px;
  position: relative;
  background: #fff;
}

.kalender-nav {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.kalender-pfeil {
  pointer-events: auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--karte-linie);
  border-radius: 999px;
  background: #fff;
  color: var(--text-dunkel);
  cursor: pointer;
  transition: border-color var(--uebergang), color var(--uebergang);
}
.kalender-pfeil:hover:not(:disabled) { border-color: var(--gruen); color: var(--gruen-dunkel); }
.kalender-pfeil:disabled { opacity: 0.35; cursor: default; }

.kalender-monate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) {
  .kalender-monate { grid-template-columns: 1fr; }
  .kalender-monat:nth-child(2) { display: none; }
  /* Innenabstände verschlanken, damit die Tages-Buttons Touch-Größe erreichen */
  .kalender { padding: 10px; }
  .buchung-card { padding: 20px 14px; }
}

.kalender-monat-titel {
  font-family: var(--font-cond);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dunkel);
  font-size: 1rem;
  margin-bottom: 10px;
  line-height: 34px;
}

.kalender-gitter {
  display: grid;
  /* minmax(0,1fr): Zellen dürfen schrumpfen — sonst erzwingt aspect-ratio
     über die min-height eine Mindestbreite und die Seite scrollt mobil quer */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.kalender-wt {
  text-align: center;
  font-family: var(--font-cond);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dunkel-2);
  padding: 4px 0 6px;
}

.kalender-tag {
  aspect-ratio: 1; /* Höhe folgt der Spaltenbreite — bei 390px ≈ 44px Touch-Target */
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text-dunkel);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.kalender-tag:hover:not(:disabled) { background: var(--gruen-blass); color: var(--gruen-dunkel); font-weight: 700; }

.kalender-tag.heute { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--text-dunkel-2); }

.kalender-tag.vergangen { color: #c3c0b6; cursor: default; }
.kalender-tag.sonntag:not(.vergangen):not(.belegt) { color: #b0aca0; } /* geschlossen — kein Übergabetag */
.kalender-tag.belegt {
  color: #a09d93;
  cursor: default;
  text-decoration: line-through;
  background: repeating-linear-gradient(135deg, #efede7 0 5px, #e2dfd6 5px 7px);
}

.kalender-tag.im-bereich { background: var(--gruen-blass); color: var(--gruen-dunkel); border-radius: 0; }
.kalender-tag.gewaehlt {
  background: var(--gruen);
  color: var(--text-dunkel);
  font-weight: 800;
}

.kalender-legende {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-dunkel-2);
}
.kalender-legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende-farbe {
  width: 15px; height: 15px;
  display: inline-block;
  border-radius: 4px;
}
.legende-farbe.frei { background: #fff; border: 1.5px solid #c6c2b7; }
.legende-farbe.legende-belegt {
  background: repeating-linear-gradient(135deg, #efede7 0 4px, #ddd9cf 4px 6px);
  border: 1.5px solid #c6c2b7;
}
.legende-farbe.legende-auswahl { background: var(--gruen); }

.auswahl-anzeige {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.auswahl-anzeige > div {
  background: #fff;
  border: 1.5px solid var(--karte-linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius-klein);
  padding: 9px 14px;
  font-weight: 700;
  color: var(--text-dunkel);
}
.auswahl-label {
  display: block;
  font-family: var(--font-cond);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dunkel-2);
  font-weight: 600;
}

.preis-box {
  background: var(--gruen-blass);
  border: 1.5px solid rgba(118, 184, 42, 0.45);
  border-radius: var(--radius-klein);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.preis-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--text-dunkel);
  padding: 3px 0;
}
.preis-summe {
  border-top: 1.5px solid rgba(118, 184, 42, 0.45);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
}
.preis-summe span:last-child {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gruen-dunkel);
}

.status-box {
  padding: 11px 14px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 0.93rem;
  border-radius: var(--radius-klein);
}
.status-box.ok { background: #e9f6ee; color: var(--ok); border: 1px solid #bfe6cd; }
.status-box.belegt { background: #fdecea; color: var(--fehler-dunkel); border: 1px solid #f6c8c3; }
.status-box.laedt { background: #fff; color: var(--text-dunkel-2); border: 1px solid var(--karte-linie); }

.alert {
  padding: 12px 15px;
  margin-bottom: 16px;
  font-weight: 600;
  border-radius: var(--radius-klein);
}
.alert-fehler { background: #fdecea; color: var(--fehler-dunkel); border: 1px solid #f6c8c3; }
.alert-ok { background: #e9f6ee; color: var(--ok); border: 1px solid #bfe6cd; }

.hinweis { color: var(--text-dunkel-2); font-size: 0.95rem; margin-top: 10px; }

/* ---------------- Preistabellen (helle Karten) ---------------- */

.preis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* ---------------- Kontakt-Karten ---------------- */

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.kontakt-karte {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
}
.kontakt-karte > h2 { margin-bottom: 18px; }

.kontakt-zeilen { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.kontakt-zeile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--karte-linie);
  text-decoration: none;
  transition: background var(--uebergang);
}
.kontakt-zeile:last-child { border-bottom: none; }
.kontakt-zeile:hover { text-decoration: none; background: var(--gruen-blass); }
.kontakt-label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dunkel-2);
}
.kontakt-wert {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-dunkel);
}
.kontakt-zeile:hover .kontakt-wert { color: var(--gruen-dunkel); }

.zeiten-tabelle { width: 100%; border-collapse: collapse; }
.zeiten-tabelle td {
  padding: 12px 2px;
  border-bottom: 1px solid var(--karte-linie);
  font-size: 0.95rem;
  vertical-align: top;
  color: var(--text-dunkel-2);
}
.zeiten-tabelle tr:last-child td { border-bottom: none; color: var(--text-dunkel-2); }
.zeiten-tabelle td:last-child {
  text-align: right;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-dunkel);
}

.adresse-block {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text-dunkel);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertikal mittig statt Leerraum unter der Adresse */
}
.adresse-block strong {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kontakt-karten-btn {
  margin-top: 20px;
  border: 1.5px solid var(--gruen-dunkel);
  color: var(--gruen-dunkel);
  background: transparent;
}
.kontakt-karten-btn:hover { background: var(--gruen-dunkel); color: #fff; }

/* Verkaufsseite: Markenlogos auf den hellen Hausmarken-Karten */

.marken-logo {
  height: 44px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.marken-logo img {
  display: block;
  width: auto;
  max-width: 100%;
}
/* Weisses Kress-Logo braucht den Kress-roten Chip als Untergrund */
.marken-logo-chip {
  align-self: flex-start;
  display: inline-flex;
  justify-content: center;
  background: #8d100c;
  border-radius: 8px;
  padding: 0 14px;
}

/* Verkaufsseite: Roboter-Vitrine (Freisteller auf Dunkel mit Gruen-Glow) */

.roboter-vitrine {
  position: relative;
  max-width: 640px;
  margin: 0 auto 8px;
  text-align: center;
}
.roboter-vitrine::before {
  content: '';
  position: absolute;
  inset: -10% 0;
  background: radial-gradient(50% 55% at 50% 48%, rgba(118, 184, 42, 0.16), transparent 70%);
  pointer-events: none;
}
.roboter-vitrine img {
  position: relative;
  width: min(100%, 540px);
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
}
.roboter-vitrine figcaption {
  position: relative;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--hell-leise);
}

.preis-grid .card > h2 {
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.card-sub {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-dunkel-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.preis-tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; }
.preis-tabelle td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--karte-linie);
  font-size: 0.95rem;
  color: var(--text-dunkel-2);
}
.preis-tabelle td:last-child {
  text-align: right;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2rem;
  white-space: nowrap;
  color: var(--gruen-dunkel);
}
.preis-tabelle tr:last-child td { border-bottom: none; }

/* ---------------- Admin ---------------- */

.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--karte-hell);
  color: var(--text-dunkel);
  border-radius: var(--radius-klein);
  overflow: hidden;
}
.admin-tabelle th, .admin-tabelle td { padding: 12px 14px; text-align: left; font-size: 0.92rem; border-bottom: 1px solid var(--karte-linie); vertical-align: top; }
.admin-tabelle a { color: var(--gruen-dunkel); }
.admin-tabelle th {
  background: var(--text-dunkel);
  color: var(--hell-headline);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.admin-tabelle tr:last-child td { border-bottom: none; }
.admin-tabelle .status-angefragt, .admin-tabelle .status-bestaetigt, .admin-tabelle .status-storniert {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-tabelle .status-angefragt { color: #a06e00; }
.admin-tabelle .status-bestaetigt { color: var(--ok); }
.admin-tabelle .status-storniert { color: var(--text-dunkel-2); }
.admin-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sekundaer { background: #fff; color: var(--text-dunkel); border: 1.5px solid var(--karte-linie); }
.btn-sekundaer:hover { border-color: var(--fehler-dunkel); color: var(--fehler-dunkel); }
.tabelle-scroll { overflow-x: auto; border-radius: var(--radius-klein); }

/* ---------------- Danke / Fehlerseiten ---------------- */

.danke-card { text-align: center; padding: 48px 36px; }
.danke-icon {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--text-dunkel);
}
.danke-icon-ok { background: var(--gruen-blass); color: var(--gruen-dunkel); }
.danke-card h1 {
  font-size: 1.8rem;
  color: var(--text-dunkel);
  margin-bottom: 10px;
}
.danke-card p { color: var(--text-dunkel-2); margin-bottom: 8px; }
.danke-card .spec-liste { text-align: left; max-width: 440px; margin: 26px auto; }
.danke-card .hero-actions { justify-content: center; margin-top: 22px; }
.danke-card .btn-hell { color: var(--text-dunkel); border-color: var(--karte-linie); }
.danke-card .btn-hell:hover { border-color: var(--text-dunkel); color: var(--text-dunkel); }

/* ---------------- Textseiten (dunkel, ruhig lesbar) ---------------- */

.card.text-seite {
  background: transparent;
  border: 1px solid var(--linie-dunkel);
  box-shadow: none;
  color: var(--hell-text);
  max-width: 68ch;
  padding: 36px 38px;
}
.card.text-seite h2 {
  color: var(--hell-headline);
  font-size: 1.15rem;
  margin: 28px 0 10px;
}
.card.text-seite h2:first-child, .card.text-seite .hinweis-box + h2 { margin-top: 0; }
.card.text-seite p { margin-bottom: 12px; }
.card.text-seite a { color: var(--gruen-hell); }
.card.text-seite h3 {
  font-size: 1.05rem;
  margin: 18px 0 8px;
}
.card.text-seite ul { margin: 0 0 14px 20px; }
.card.text-seite li { margin-bottom: 6px; }

/* Einwilligungs-Häkchen im Buchungsformular */
.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}
.form-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gruen);
}
.form-check a { text-decoration: underline; }
.card.text-seite ul { margin: 0 0 12px 20px; }
.card.text-seite li { margin-bottom: 6px; }
.card.text-seite .hinweis { color: var(--hell-leise); }

.hinweis-box {
  background: var(--flaeche-2);
  border: 1px solid var(--linie-dunkel-2);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius-klein);
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--hell-text);
  margin-bottom: 24px;
}

/* ---------------- Footer ---------------- */

.site-footer {
  background: linear-gradient(180deg, var(--grund) 0%, #0a0c0f 100%);
  border-top: 1px solid var(--linie-dunkel);
  color: var(--hell-leise);
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
  padding: 72px 0 48px;
}

.footer-logo-box { display: inline-block; }
.footer-logo-box img { height: 40px; width: auto; display: block; }
.footer-firmenzeile { font-size: 0.92rem; margin-top: 16px; color: var(--hell-leise); }

.site-footer h3 {
  color: var(--hell-headline);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.site-footer a { color: var(--hell-text); }
.site-footer a:hover { color: var(--gruen-hell); }
.site-footer p { margin-bottom: 10px; font-size: 0.94rem; color: rgba(237, 239, 242, 0.62); } /* ≥4.5:1 (WCAG AA) */
.footer-social { margin-top: 6px; }

.footer-bottom {
  border-top: 1px solid var(--linie-dunkel);
  padding: 20px 24px;
  font-size: 0.85rem;
  color: var(--hell-leise);
}

/* ---------------- Partikel-Hero & Scroll-Inszenierung ----------------
   Basis = kompakter Hero (Fallback für Mobil/kein WebGL/reduzierte
   Bewegung). Die Klassen .hat-partikel und .inszenierung-aktiv werden
   erst per JS gesetzt, wenn der Effekt sicher läuft. */

.hero-buehne { position: relative; }

.hero-partikel {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 54%;
  pointer-events: none;
  z-index: 2;
}
.hero-partikel canvas { width: 100%; height: 100%; display: block; }

.hero.hat-partikel .hero-partikel { display: block; }
.hero.hat-partikel .hero-geraet { display: none; }

/* Szenen-Fotos, Captions und Scroll-Hinweis existieren nur in der Inszenierung */
.hero-szene,
.hero-caption,
.hero-scrollhinweis { display: none; }

.hero.inszenierung-aktiv {
  height: 380vh;
  overflow: visible;      /* overflow:hidden würde die sticky Bühne brechen */
  padding-top: 0;
}
.hero.inszenierung-aktiv .hero-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* mobile Browserleisten einrechnen */
  overflow: hidden;
}
.hero.inszenierung-aktiv .hero-partikel {
  left: 0;
  width: 100%;
}
.hero.inszenierung-aktiv .hero-geraet { display: none; }

.hero.inszenierung-aktiv .hero-intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
}
.hero.inszenierung-aktiv .hero-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.hero.inszenierung-aktiv .hero-szene {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
/* Cineastische Bildbühne: Anwenderfoto vollflächig (cover) … */
.hero.inszenierung-aktiv .hero-szene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* … mit dunkler Vignette + dezentem Grünstich-Duotone darüber,
   damit alle Fotos wie aus einem Guss wirken und Captions lesbar bleiben */
.hero.inszenierung-aktiv .hero-szene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(16, 19, 24, 0.62) 0%, rgba(16, 19, 24, 0.18) 30%, rgba(16, 19, 24, 0.22) 62%, rgba(16, 19, 24, 0.82) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(16, 19, 24, 0.55) 100%),
    linear-gradient(155deg, rgba(118, 184, 42, 0.10), transparent 55%);
}

.hero.inszenierung-aktiv .hero-caption {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.hero.inszenierung-aktiv .hero-caption .overline {
  justify-content: center;
  margin-bottom: 10px;
}
.hero-caption .caption-text {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hell-headline);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hero.inszenierung-aktiv .hero-scrollhinweis {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 4;
  pointer-events: none;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hell-leise);
}
.hinweis-mobil, .hinweis-pfeil, .hinweis-punkte { display: none; }
@keyframes hinweis-pfeil {
  0%, 100% { transform: translateY(4px) rotate(45deg); opacity: 0.45; }
  50% { transform: translateY(-3px) rotate(45deg); opacity: 1; }
}
.hero-scrollhinweis .hinweis-linie {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gruen), transparent);
  overflow: hidden;
  position: relative;
}
.hero-scrollhinweis .hinweis-linie::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #fff);
  animation: hinweis-lauf 1.8s ease-in-out infinite;
}
@keyframes hinweis-lauf {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* Mobile Inszenierung: gleiche Bühne, kürzere Strecke, Text unten,
   Wortmarke gleitet nach dem Intro nach oben (Skript) */
@media (max-width: 900px) {
  .hero.inszenierung-aktiv { height: 340vh; } /* mehr Scrollweg je Szene: Wechsel wirken ruhiger */
  /* Marke + Textblock bilden eine mittig gesetzte Gruppe: padding-top ist der
     reservierte Platz für die Wortmarke (das Skript setzt sie in diese Lücke,
     nahe am Text) — so entsteht auf hohen Displays kein Loch zwischen beiden */
  .hero.inszenierung-aktiv .hero-intro { align-items: center; }
  .hero.inszenierung-aktiv .hero-inner { padding-top: 18vh; padding-bottom: 4vh; }
  /* Textblock kompakt halten, damit oben Platz für die Wortmarke bleibt */
  .hero.inszenierung-aktiv h1 { margin-bottom: 14px; }
  .hero.inszenierung-aktiv .hero-text { margin-bottom: 22px; font-size: 1rem; }
  .hero.inszenierung-aktiv .hero-badge { margin-top: 22px; }
  /* Wisch-Hinweis: Pfeil, „Wischen", Stufenpunkte (Logo + 3 Bilder) */
  .hero.inszenierung-aktiv .hero-scrollhinweis {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 0.66rem; gap: 7px; color: var(--hell-text);
    transition: opacity 0.35s ease;
  }
  .hero-scrollhinweis .hinweis-linie, .hinweis-desktop { display: none; }
  .hinweis-mobil { display: inline; }
  .hinweis-pfeil {
    display: block; width: 12px; height: 12px;
    border-left: 2px solid var(--gruen); border-top: 2px solid var(--gruen);
    transform: rotate(45deg); animation: hinweis-pfeil 1.6s ease-in-out infinite;
  }
  .hinweis-punkte { display: flex; gap: 6px; align-items: center; }
  .hinweis-punkte i {
    display: block; width: 6px; height: 6px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.35); transition: width 0.3s ease, background 0.3s ease;
  }
  .hinweis-punkte i.aktiv { width: 18px; background: var(--gruen); }
  /* unten Platz für den Hinweis lassen */
  .hero.inszenierung-aktiv .hero-inner { padding-bottom: 72px; }
}
/* Niedrige Handy-Displays (iPhone SE, kleine Androids): Textblock weiter
   eindampfen, sonst bleibt zwischen Header und Text kein Platz für die Marke */
@media (max-width: 900px) and (max-height: 760px) {
  .hero.inszenierung-aktiv h1 { font-size: 2rem; margin-bottom: 10px; }
  .hero.inszenierung-aktiv .hero-text { font-size: 0.95rem; margin-bottom: 16px; }
  .hero.inszenierung-aktiv .hero-text-mehr { display: none; }
  .hero.inszenierung-aktiv .hero-badge { display: none; }
  .hero.inszenierung-aktiv .hero-actions { gap: 10px; }
  .hero.inszenierung-aktiv .hero-actions .btn { padding: 12px 18px; font-size: 0.95rem; }
  .hero.inszenierung-aktiv .hero-inner { padding-top: 14vh; padding-bottom: 72px; }
  .hero.inszenierung-aktiv .hero-caption {
    bottom: 12vh;
    width: calc(100% - 40px);
  }
  .hero-caption .caption-text { font-size: 1rem; letter-spacing: 0.06em; }
}

/* ---------------- Hero-Intro: Start nur mit dem Partikel-Logo ----------------
   Ein Inline-Skript im <head> setzt html.intro-pending (auch mobil; keine
   reduzierte Bewegung, nur mit JS — Crawler und No-JS sehen alles);
   hero-partikel.js bzw. das 4s-Sicherheitsnetz entfernen die Klasse. */

@media (prefers-reduced-motion: no-preference) {
  html.intro-pending .site-header {
    opacity: 0;
    pointer-events: none;
  }
  /* Bis das Partikel-Skript die Bühne übernimmt, bleibt die Startseite eine
     dunkle, viewporthohe Fläche — kein Aufblitzen des kompakten Heros mehr */
  html.intro-pending .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
  html.intro-pending .hero .hero-intro,
  html.intro-pending .hero .hero-geraet,
  html.intro-pending .hero .hero-scrollhinweis {
    opacity: 0 !important;
    pointer-events: none;
  }
  .hero.inszenierung-aktiv:not(.intro-fertig) .hero-intro,
  .hero.inszenierung-aktiv:not(.intro-fertig) .hero-scrollhinweis {
    opacity: 0 !important;
    pointer-events: none;
  }
}

/* Gestaffeltes Einblenden nach dem Intro (Header 0.1s, Text 0.25s, Hinweis 0.9s) */
.hero.inszenierung-aktiv.intro-fertig .hero-intro {
  transition: opacity 0.7s ease 0.25s;
}
.hero.inszenierung-aktiv.intro-fertig .hero-scrollhinweis {
  transition: opacity 0.7s ease 0.9s;
}

/* ---------------- Scroll-Reveals ----------------
   Versteckt wird NUR, wenn JS aktiv ist (html.js-aktiv) —
   ohne JS und bei reduzierter Bewegung bleibt alles sichtbar. */

html.js-aktiv .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s cubic-bezier(0.25, 0.6, 0.3, 1),
              transform 0.45s cubic-bezier(0.25, 0.6, 0.3, 1);
}
html.js-aktiv .reveal.sichtbar {
  opacity: 1;
  transform: none;
}

/* ---------------- Bewegung reduzieren ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  html.js-aktiv .reveal { opacity: 1; transform: none; }
}