/* ---------- Self-hosted Fonts (DSGVO: keine Google-Requests) ---------- */
/* Variable Fonts: eine Datei deckt die Gewichte 400 bis 600 ab */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-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 {
  --bg:        #14100c;
  --bg-soft:   #1c1712;
  --panel:     #221b15;
  --line:      rgba(214, 178, 120, 0.16);
  --amber:     #d6a45a;
  --amber-2:   #e6bd78;
  --copper:    #b6743a;
  --cream:     #f5ede0;
  --muted:     #b3a793;
  --muted-2:   #8a7d6b;
  --maxw:      1140px;
  --radius:    16px;
  /* Header-Hoehe: .nav min-height 58 + 2x8 Padding + 1px Border.
     Wird vom Mobilmenue zur Positionierung des Panels gebraucht. */
  --header-h:  75px;
}

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

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

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--cream);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--amber-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anker-Ziele nicht unter dem Sticky-Header verschwinden lassen */
[id] { scroll-margin-top: 92px; }

::selection { background: rgba(214, 164, 90, 0.35); color: var(--cream); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 820px) {
  .wrap { padding: 0 32px; }
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: 14px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .25s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--amber-2);
  outline-offset: 3px;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--amber-2);
  color: #241708;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.btn-primary:active { background: var(--amber); }
.btn-ghost {
  border-color: rgba(214, 178, 120, 0.35);
  color: var(--cream);
  background: rgba(214, 164, 90, 0.06);
}
.btn-ghost:active { border-color: var(--amber-2); }
@media (hover: hover) {
  .btn:hover svg { transform: translateX(3px); }
  .btn-primary:hover { background: #f0cd8f; }
  .btn-ghost:hover {
    border-color: var(--amber-2);
    color: var(--amber-2);
    background: rgba(214, 164, 90, 0.10);
  }
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(20, 16, 12, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 58px;
  padding: 8px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand .mark {
  width: 38px; height: 38px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.brand .mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: 0.92rem; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--cream); }
.nav-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* ---------- Mobile-Menue (reines CSS ueber :target, kein JavaScript) ----------
   Ein Klick auf den Burger setzt den Hash auf #nav, Scrim und Panel werden
   ueber #nav:target sichtbar. Der Clou am :target-Ansatz: jeder Menuepunkt
   setzt den Hash auf seinen Abschnitt, das Panel schliesst sich beim Tippen
   also von selbst. Ein <details> bliebe stattdessen offen ueber dem Inhalt
   haengen. Zusaetzlich schliessen der X-Button und der Scrim, beide zeigen
   auf #nav-close (den X-Button selbst, der im Sticky-Header immer sichtbar
   ist, es gibt darum keinen Sprung).

   Wichtig fuer die DOM-Struktur: #nav, .nav-scrim und .nav-panel sind direkte
   Kinder von <body>, nicht des Headers. Grund ist das backdrop-filter am
   Header: es macht den Header zum Containing Block fuer position: fixed,
   ein Scrim im Header wuerde also nur den Header ueberdecken statt die Seite.
   Die Burger-Buttons bleiben im Header und werden ueber
   "#nav:target ~ header ..." angesprochen. */

/* Fixiert und zeilenlos: der Anker steht immer im Viewport, ein Sprung zu
   #nav kann darum keinen Scroll ausloesen */
.nav-target {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Die beiden Menue-Anker duerfen den globalen Anker-Offset aus [id] nicht
   erben, sonst scrollt der Browser beim Oeffnen 92px nach oben */
#nav, #nav-close { scroll-margin-top: 0; }

.nav-burger,
.nav-scrim,
.nav-panel { display: none; }

@media (max-width: 820px) {
  .nav-links { display: none; }
  /* Marke links, CTA und Burger rechts gebuendelt (statt space-between-Luecke) */
  .nav-cta { margin-left: auto; }

  .nav-burger-open { display: inline-flex; }
  .nav-burger {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Abstand zum Displayrand: die 32px aus .wrap plus 4px extra. Der Burger
       hat im Gegensatz zur Marke links einen sichtbaren Rahmen, bündig gesetzt
       wirkt er dadurch deutlich näher am Rand als die Marke. Kein negativer
       Wert hier, der schöbe den Button wieder an die Kante. */
    margin-right: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(214, 178, 120, 0.3);
    border-radius: 12px;
    background: rgba(214, 164, 90, 0.06);
    color: var(--cream);
    transition: border-color .2s ease, background .2s ease;
  }
  .nav-burger svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }
  .nav-burger:active { background: rgba(214, 164, 90, 0.14); }

  /* Offen: X statt Burger */
  #nav:target ~ header .nav-burger-open { display: none; }
  #nav:target ~ header .nav-burger-close {
    display: inline-flex;
    border-color: var(--amber-2);
    color: var(--amber-2);
  }

  /* Klick neben das Panel schliesst es. z-index unter dem Header (50), damit
     Marke und X-Button bedienbar bleiben. */
  #nav:target ~ .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 7, 4, 0.5);
  }

  #nav:target ~ .nav-panel {
    display: grid;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 45;
    padding: 10px 32px 22px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .nav-panel > a:not(.btn) {
    padding: 14px 2px;
    font-size: 1rem;
    color: var(--muted);
  }
  /* Trenner nur zwischen den Links, nicht vor dem CTA-Button darunter */
  .nav-panel > a:not(.btn) + a:not(.btn) {
    border-top: 1px solid rgba(214, 178, 120, 0.1);
  }
  .nav-panel > a:not(.btn):active { color: var(--amber-2); }
  .nav-panel .btn { margin-top: 16px; }
}
@media (hover: hover) {
  .nav-burger:hover { border-color: var(--amber-2); color: var(--amber-2); }
  .nav-panel > a:not(.btn):hover { color: var(--cream); }
}
@media (max-width: 560px) {
  .brand { font-size: 1.05rem; gap: 10px; }
  .brand .mark { width: 30px; height: 30px; }
  .nav-cta .btn { padding: 10px 18px; font-size: 0.88rem; }
}
@media (max-width: 480px) {
  .nav-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(72vh, 640px);
  min-height: min(72svh, 640px);
  padding: clamp(64px, 9vw, 100px) 0 clamp(56px, 8vw, 90px);
  overflow: hidden;
  isolation: isolate;
}

/* Photo layer: Fasslager-Tor mit Blick aufs Wiesental, Copy sitzt zentriert im Torbogen */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../images/headerimage_valleyview.webp') center / cover no-repeat;
  /* farblich an die Seite angleichen */
  filter: saturate(1.06) contrast(1.04) brightness(0.88);
  transform: scale(1.04);
}
/* Dunkler Kern hinter der zentrierten Copy + Fade in die Seite */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 75% at 50% 52%,
      rgba(18, 14, 10, 0.66) 0%,
      rgba(18, 14, 10, 0.42) 52%,
      rgba(18, 14, 10, 0.12) 100%),
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(20, 16, 12, 0) 26%,
      rgba(20, 16, 12, 0) 74%,
      rgba(20, 16, 12, 0.55) 100%);
}
/* Warmer Tint + Vignette zur Cohesion mit der Marke */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 20%, rgba(214, 164, 90, 0.14), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(10, 7, 4, 0.55) 100%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-copy {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.hero .lede { margin-inline: auto; }
.hero .hero-actions { justify-content: center; }

.hero h1 {
  font-size: clamp(3rem, 7vw, 5.4rem);
  margin: 20px 0 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.hero .lede {
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  color: #d9cdb9;
  max-width: 42ch;
  margin-top: 22px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
.tagline {
  display: inline-block;
  margin-top: 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--amber-2);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Desktop: Markenname im Hero einzeilig */
@media (min-width: 900px) {
  .hero-copy { max-width: 820px; }
  .hero h1 {
    white-space: nowrap;
    font-size: clamp(3rem, 6.5vw, 5rem);
  }
}

@media (max-width: 720px) {
  /* eigene Portrait-Variante des Hero-Bilds, Torbogen und Dorf bleiben im Ausschnitt */
  .hero-media {
    background-image: url('../images/headerimage_valleyview_mobile.webp');
    background-position: center 38%;
  }
  /* stärkerer Scrim auf Mobile für Lesbarkeit über dem hellen Talblick */
  .hero-media::before {
    background:
      linear-gradient(180deg,
        rgba(18, 14, 10, 0.68) 0%,
        rgba(18, 14, 10, 0.55) 40%,
        rgba(18, 14, 10, 0.72) 75%,
        var(--bg) 100%);
  }
}
@media (max-width: 560px) {
  /* Buttons bleiben nebeneinander statt zu stapeln */
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn { padding: 12px 18px; font-size: 0.88rem; }
}
@media (max-width: 380px) {
  .hero-actions { gap: 8px; }
  .hero-actions .btn { padding: 10px 12px; font-size: 0.8rem; gap: 6px; }
  .hero-actions .btn svg { width: 14px; height: 14px; }
}
/* Sicherheitsnetz fuer sehr schmale Geraete: dort passen zwei Buttons nicht nebeneinander */
@media (max-width: 340px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Marquee stats ---------- */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 44px 0;
}
.stat { text-align: center; }
.stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--amber-2);
}
.stat .lbl { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
}

/* ---------- Sections ---------- */
section.block { padding: clamp(72px, 10vw, 120px) 0; }
.section-head { max-width: 620px; margin-bottom: 54px; }
.section-head h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-top: 14px;
}
.section-head p { color: var(--muted); margin-top: 16px; font-size: 1.05rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); border-color: rgba(214,164,90,0.4); }
}
.card .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(214,164,90,0.12);
  margin-bottom: 22px;
}
.card .ico svg { width: 26px; height: 26px; stroke: var(--amber-2); }
.card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split .panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
}
/* Foto-Ebene, farblich an die Seite angeglichen */
.split .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/fasslager.webp') center / cover no-repeat;
  filter: saturate(1.06) contrast(1.03) brightness(0.9);
}
/* Warmer Tint + sanfte Vignette zur Cohesion */
.split .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 25% 15%, rgba(214, 164, 90, 0.14), transparent 60%),
    radial-gradient(120% 120% at 50% 55%, transparent 58%, rgba(10, 7, 4, 0.5) 100%);
}
.split h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 14px; }
.split p { color: var(--muted); margin-top: 18px; font-size: 1.03rem; }
.split ul { list-style: none; margin-top: 24px; display: grid; gap: 14px; }
.split li { display: flex; gap: 12px; align-items: flex-start; color: var(--cream); font-size: 0.98rem; }
.split li svg { flex: none; width: 20px; height: 20px; stroke: var(--amber-2); margin-top: 3px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split .panel { order: -1; }
}

/* ---------- Editions ---------- */
.editions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.edition {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .edition:hover { transform: translateY(-4px); border-color: rgba(214, 164, 90, 0.4); }
}
.edition-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.edition-no {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--amber-2);
}
.badge {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(214, 164, 90, 0.35);
  background: rgba(214, 164, 90, 0.07);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.edition-title { display: grid; gap: 5px; }
.edition h3 { font-size: 1.42rem; }
.edition-sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.edition p { color: var(--muted); font-size: 0.95rem; flex-grow: 1; }
/* Spec-Sheet: identische Datenzeilen auf jeder Karte */
.edition-meta {
  margin-top: auto;
  border-top: 1px solid rgba(214, 178, 120, 0.14);
}
.edition-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}
.edition-meta div + div {
  border-top: 1px solid rgba(214, 178, 120, 0.08);
}
.edition-meta dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  flex: none;
}
.edition-meta dd {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream);
  text-align: right;
}
@media (max-width: 1000px) { .editions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .editions { grid-template-columns: 1fr; } }

/* ---------- Contact / CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(150deg, #2a2016, #191109);
  border: 1px solid var(--line);
  padding: clamp(48px, 8vw, 80px);
  text-align: center;
}
.cta::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 90% at 50% 0%, rgba(214,164,90,0.20), transparent 60%);
  pointer-events:none;
}
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); position: relative; }
.cta p { color: var(--muted); margin: 18px auto 34px; max-width: 46ch; position: relative; }
.mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-family: 'Cormorant Garamond', serif;
  color: var(--amber-2);
  border-bottom: 1px solid rgba(214,164,90,0.4);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.mail:hover { color: var(--cream); border-color: var(--cream); }
@media (max-width: 400px) {
  .mail { font-size: 1rem; gap: 8px; }
  .mail svg { width: 18px; height: 18px; flex: none; }
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
  margin-top: clamp(60px, 8vw, 100px);
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--muted-2);
  font-size: 0.88rem;
}
.foot a {
  color: var(--muted);
  display: inline-block;
  padding: 8px 2px;
  margin: -8px -2px;
}
.foot a:hover { color: var(--cream); }
.disclaimer {
  text-align: center;
  color: var(--muted-2);
  font-size: 0.8rem;
  margin-top: 26px;
  letter-spacing: 0.02em;
}
.disclaimer a {
  display: inline-block;
  padding: 8px 4px;
  margin: -8px -4px;
}
@media (max-width: 640px) {
  .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .foot nav { justify-content: center; }
}

/* reveal on load */
.reveal { opacity: 0; transform: translateY(16px); animation: rise .8s ease forwards; }
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
.reveal.d3 { animation-delay: .24s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Simple content pages (Impressum etc.) ---------- */
.page-head {
  padding: clamp(64px, 10vw, 100px) 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.page-head h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-top: 14px;
}
.legal {
  padding: clamp(56px, 8vw, 90px) 0;
  max-width: 720px;
}
.legal h2 {
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--amber-2);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: 1.08rem;
  margin-top: 26px;
  margin-bottom: 8px;
  color: var(--cream);
}
.legal p { color: var(--cream); margin-bottom: 12px; }
.legal ul {
  list-style: none;
  margin: 4px 0 16px;
  display: grid;
  gap: 4px;
}
.legal ul li { color: var(--cream); font-size: 0.97rem; }
.legal a.inline-link {
  color: var(--amber-2);
  border-bottom: 1px solid rgba(214,164,90,0.4);
  transition: color .2s, border-color .2s;
  word-break: break-word;
}
.legal a.inline-link:hover { color: var(--cream); border-color: var(--cream); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color .2s;
}
.back-link:hover { color: var(--amber-2); }

/* ---------- Cookie-Einstellungen-Link im Footer ---------- */
.cookie-settings-btn {
  font: inherit;
  background: none;
  border: none;
  padding: 8px 4px;
  margin: -8px -4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.disclaimer .cookie-settings-btn { color: var(--amber-2); }
@media (hover: hover) {
  .foot .cookie-settings-btn:hover,
  .disclaimer .cookie-settings-btn:hover { color: var(--cream); }
}

/* ---------- Cookie-Consent-Banner ---------- */
/* Solange der Dialog offen ist, scrollt nur der Dialog, nicht die Seite
   dahinter. Die Klasse setzt js/consent.js auf <html>. */
.cookie-open,
.cookie-open body { overflow: hidden; }

.cookie-banner {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 16px;
  background: rgba(10, 7, 4, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
/* Das "hidden"-Attribut wird von Author-CSS immer ueberstimmt, auch bei
   gleicher Selektor-Spezifitaet, deshalb display nur ohne [hidden] setzen */
.cookie-banner:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-banner-inner {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  margin: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  padding: 30px 32px;
}
.cookie-text h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.cookie-text p {
  color: var(--muted);
  font-size: 0.92rem;
}
.cookie-details:not([hidden]) {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cookie-cat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}
.cookie-cat input {
  margin-top: 4px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--amber-2);
}
.cookie-cat strong { color: var(--cream); }
.cookie-save {
  width: 100%;
  margin-top: 18px;
  padding: 12px 22px;
  font-size: 0.9rem;
}

/* Gleichwertige Haupt-Entscheidung: beide Buttons exakt gleich breit */
.cookie-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.cookie-actions .btn {
  flex: 1 1 0;
  padding: 12px 20px;
  font-size: 0.9rem;
}

/* "Einstellungen" ist eine untergeordnete dritte Option, kein gleichwertiger CTA */
.cookie-settings-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}
@media (hover: hover) {
  .cookie-settings-toggle:hover { color: var(--amber-2); }
}

.cookie-legal-links {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted-2);
}
.cookie-legal-links a { color: var(--muted-2); transition: color .2s ease; }
@media (hover: hover) {
  .cookie-legal-links a:hover { color: var(--cream); }
}

@media (max-width: 420px) {
  .cookie-actions { flex-direction: column; }
  .cookie-legal-links { justify-content: center; }
}