/* =========================================================
   Eisfeuer Drachenreiter – zentrales Stylesheet
   Alle Farben, Filter und Größen stehen oben als Variablen,
   damit spätere Änderungen an einer Stelle möglich sind.
   ========================================================= */

:root {
  /* Hintergrundfilter über dem Foto */
  --foto-blur: 3px;          /* leichter Blur */
  --foto-hell: 1.12;         /* 1 = unverändert, größer = heller */

  /* Seitenflächen (Milchglas, gedämpft) */
  --basis:       #121722;
  --orange:      rgba(222, 120, 48, .78);
  --blau:        rgba(54, 118, 214, .78);
  --seiten-blur: 26px;       /* Weichheit der Farbflächen */
  --milchglas:   14px;       /* Stärke des Milchglas-Effekts */
  --milch-weiss: .07;        /* Weißschleier des Milchglases */
  --pinsel-deckkraft: .45;   /* Sichtbarkeit der Pinselstriche */

  /* Farben der Buttons / Akzente */
  --orange-voll: #e8742a;
  --blau-voll:   #2f6fd0;

  /* Hebel-Buttons */
  --zug-halb: 17deg;         /* Mouseover: Hebel zur Hälfte gezogen */
  --zug-voll: 34deg;         /* Klick: Hebel ganz am Griff */
  --zug-zeit: .18s;          /* Dauer der Bewegung (JS wartet 260 ms vor dem Seitenwechsel) */

  /* Banner „Im Bau" */
  --bau-gelb: #f7c600;
  --bau-rot:  #d40000;
  --bau-streifen: 30px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--basis);
  color: #f4f6fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Feststehender Hintergrund ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--basis);
}

.bg > div { position: absolute; }

/* Farbflächen: links Orange (Feuer), rechts Blau (Eis) */
.bg__sides {
  inset: -60px;
  filter: blur(var(--seiten-blur));
  background:
    radial-gradient(ellipse 34% 55% at  4% 22%, var(--orange), transparent 70%),
    radial-gradient(ellipse 30% 48% at 14% 74%, var(--orange), transparent 72%),
    radial-gradient(ellipse 22% 38% at 26% 46%, var(--orange), transparent 75%),
    radial-gradient(ellipse 34% 55% at 96% 26%, var(--blau),   transparent 70%),
    radial-gradient(ellipse 30% 48% at 86% 78%, var(--blau),   transparent 72%),
    radial-gradient(ellipse 22% 38% at 74% 50%, var(--blau),   transparent 75%);
}

/* Breite Pinselstriche */
.bg__brush {
  inset: 0;
  background: url("../img/pinsel.svg") center / cover;
  mix-blend-mode: soft-light;
  opacity: var(--pinsel-deckkraft);
}

/* Milchglas */
.bg__frost {
  inset: 0;
  background: rgba(255, 255, 255, var(--milch-weiss));
  -webkit-backdrop-filter: blur(var(--milchglas));
          backdrop-filter: blur(var(--milchglas));
}

/* Foto: immer in voller Höhe, seitlich gleichmäßig beschnitten.
   Auf breiten Bildschirmen bleibt links/rechts Platz für die Farbflächen. */
.bg__photo {
  top: -30px;
  height: calc(100% + 60px);   /* Überstand oben/unten, damit der Blur-Rand nicht sichtbar wird */
  aspect-ratio: 1 / 1;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/hintergrund.webp") center / cover no-repeat;
  filter: blur(var(--foto-blur)) brightness(var(--foto-hell));
  /* weicher Übergang zu den Farbflächen */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

/* ---------- Patch (Logo) ---------- */

.patch__bild {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .55));
}

/* ---------- Startseite ---------- */

.start {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.menue {
  /* Größen: Patch zuerst, Buttons richten sich danach */
  --patch:   min(52vh, 34vw, 560px);
  --luecke:  clamp(16px, 2.6vw, 48px);        /* Abstand Patch ↔ Buttons (links = rechts) */
  --knopf-b: min(24vw, calc(var(--patch) * 1.25 / 3 / .69));

  width: min(100%, 1500px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "links  patch  rechts"
    ".      privat .";
  column-gap: var(--luecke);
  row-gap: clamp(14px, 3vh, 32px);
  align-items: center;
}

.menue__links,
.menue__rechts {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vh, 18px);
}
.menue__links  { grid-area: links;  justify-self: end;   align-items: flex-end;   }
.menue__rechts { grid-area: rechts; justify-self: start; align-items: flex-start; }

.menue__patch  { grid-area: patch; width: var(--patch); }
.menue__privat { grid-area: privat; justify-self: center; }

/* Smartphone / Hochformat: Patch oben, darunter zwei Spalten, darunter „Privater Bereich" */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .menue {
    --patch:   min(78vw, 40vh, 440px);
    --knopf-b: min(calc((100vw - 56px) / 2), 270px);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "patch  patch"
      "links  rechts"
      "privat privat";
    column-gap: 12px;
    row-gap: 14px;
    justify-items: center;
  }
  .menue__patch  { justify-self: center; }
  .menue__links  { justify-self: end;   align-items: flex-end;   }
  .menue__rechts { justify-self: start; align-items: flex-start; }
}

/* ---------- Hebel-Button ---------- */

.hebel {
  --zug: 0deg;
  position: relative;
  display: block;
  width: var(--knopf-b);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Farbspezifisch: Drehpunkt des Hebels, Mitte des Griffs (für die Beschriftung), Drehrichtung */
.hebel--orange { --px: 69.49%; --py: 58.73%; --lx: 29.7%;  --ly: 80.28%; --richtung: -1; --ar: 900 / 620; }
.hebel--blau   { --px: 29.8%;  --py: 60.39%; --lx: 69.61%; --ly: 83.12%; --richtung:  1; --ar: 900 / 607; }

.hebel__bild {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
}
.hebel__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}
.hebel__arm {
  transform-origin: var(--px) var(--py);
  transform: rotate(calc(var(--zug) * var(--richtung)));
  transition: transform var(--zug-zeit) ease-out;
}

.hebel__text {
  position: absolute;
  left: var(--lx);
  top:  var(--ly);
  width: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 800;
  font-size: max(10.5px, calc(var(--knopf-b) * .062));
  line-height: 1.08;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .7);
  pointer-events: none;
}

/* Mouseover / Tastaturfokus: halb gezogen – Klick (oder Antippen): ganz gezogen */
@media (hover: hover) {
  .hebel:hover { --zug: var(--zug-halb); }
}
.hebel:focus-visible { --zug: var(--zug-halb); outline: none; }
.hebel:focus-visible .hebel__bild { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
.hebel:active,
.hebel.is-gezogen { --zug: var(--zug-voll); }

@media (prefers-reduced-motion: reduce) {
  .hebel__arm { transition: none; }
}

/* ---------- Button „Privater Bereich" ---------- */

.privat {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .8em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  text-decoration: none;
  /* dunkles Milchglas mit Farbverlauf-Rand Orange → Blau */
  background:
    linear-gradient(rgba(16, 20, 30, .62), rgba(16, 20, 30, .62)) padding-box,
    linear-gradient(90deg, var(--orange-voll), var(--blau-voll)) border-box;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.privat__icon { width: 1.25em; height: 1.25em; display: block; }
.privat:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.privat:active { transform: translateY(0); }
.privat:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- Unterseiten (im Bau) ---------- */

.bau {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vh, 64px);
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
}

.bau__patch {
  display: block;
  width: min(62vw, 42vh, 420px);
}

/* Gelb-weißes Banner quer über die ganze Breite mit roter Schrift */
.bau__banner {
  width: 100%;
  padding: clamp(20px, 4.5vh, 40px) 16px;
  background: repeating-linear-gradient(-45deg,
              var(--bau-gelb) 0 var(--bau-streifen),
              #ffffff var(--bau-streifen) calc(var(--bau-streifen) * 2));
  border-block: 6px solid var(--bau-gelb);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  text-align: center;
}
.bau__text {
  display: inline-block;
  color: var(--bau-rot);
  font-weight: 900;
  font-size: clamp(1.35rem, 5.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: .01em;
  /* weiße Kontur, damit die rote Schrift auf den Streifen lesbar bleibt */
  -webkit-text-stroke: .22em #fff;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}

/* ---------- Galerie: Stammbaum ---------- */

.baum-seite {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #1b2a52;           /* gleicher Ton wie der Himmel ganz oben */
}
#baum { flex: none; display: block; }
.baum-svg { display: block; height: auto; max-width: none; }

/* kleines Patch oben links als Weg zurück zur Startseite */
.baum-home {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  transition: transform .15s ease-out;
}
.baum-home:hover { transform: scale(1.06); }
.baum-home img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.baum-home:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }