/* ==========================================================================
   Schriftarten – lokal eingebunden
   Die Dateien liegen unter assets/fonts/ auf dem eigenen Webspace. Dadurch
   entsteht beim Seitenaufruf keine Verbindung zu Google und es wird keine
   Besucher-IP an Dritte uebertragen. Details siehe assets/fonts/LIESMICH.txt.
   Es sind variable Schriften: eine Datei je Zeichensatz deckt alle
   Strichstaerken ab.
   ========================================================================== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-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;
}

/* ==========================================================================
   Dornwerk — Stylesheet
   Die sechs verbindlichen Markenfarben stehen als CSS-Variablen in :root.
   Alle weiteren Toene sind per color-mix() daraus abgeleitet (nur heller /
   dunkler bzw. transparenter) — es gibt keine zusaetzliche Grundfarbe.
   Palette aendern = nur die sechs Werte in :root anpassen.
   Siehe ANLEITUNG.md.
   ========================================================================== */

:root {
  /* --- verbindliche Palette --- */
  --primary:   #12211A;   /* Seitengrund, dunkelstes Gruen */
  --secondary: #25402C;   /* erhabene Flaechen, Karten */
  --accent:    #C4E538;   /* CTA / Limette */
  --bg-light:  #8A9B4E;   /* helles Band (Olive) */
  --bg-dark:   #2B2318;   /* dunkles Band (Erde) */
  --text:      #C4E538;   /* Textfarbe */

  /* --- abgeleitete Abstufungen (nur heller/dunkler/transparenter) --- */
  --text-bright: color-mix(in srgb, var(--text) 45%, white);   /* Fliesstext */
  --text-soft:   color-mix(in srgb, var(--text-bright) 72%, transparent);
  --text-faint:  color-mix(in srgb, var(--text-bright) 45%, transparent);
  --accent-dark: color-mix(in srgb, var(--accent) 74%, black);
  --surface:     color-mix(in srgb, var(--secondary) 55%, var(--primary));
  --surface-hi:  color-mix(in srgb, var(--secondary) 88%, white 4%);
  --line:        color-mix(in srgb, var(--accent) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--accent) 34%, transparent);
  --shadow:      color-mix(in srgb, var(--primary) 70%, transparent);
  --glow:        color-mix(in srgb, var(--accent) 45%, transparent);

  /* Text auf dem hellen Olivband */
  --on-light:      color-mix(in srgb, var(--primary) 88%, black);
  --on-light-soft: color-mix(in srgb, var(--on-light) 78%, transparent);

  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --header-h: 74px;
  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(.16, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-bright);
  background: var(--primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden wuerde aus <body> einen Scroll-Container machen
     und damit das sticky Hero-Video ausser Kraft setzen. */
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 .5rem; color: var(--text); text-wrap: balance;
}
p { margin: 0 0 1rem; }
ul { margin: 0; }
strong { color: var(--text); font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
/* Schmalere Textspalte, die aber an derselben linken Kante wie der normale
   Container beginnt, damit die Seitenkante ueber alle Abschnitte durchlaeuft. */
.container-narrow {
  max-width: calc(760px + 3rem);
  margin-right: auto;
  margin-left: max(0px, calc((100% - 1180px) / 2));
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -3.5rem;
  background: var(--accent); color: var(--primary);
  padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 500;
  font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- scroll progress ---------- */
/* Fortschritt wird per scaleX() animiert (kein Layout, laeuft auf der GPU) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent); z-index: 300;
  box-shadow: 0 0 12px var(--glow);
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- logo / wortmarke ---------- */
.logo {
  display: inline-flex; align-items: center; gap: .1em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -.03em; color: var(--text); text-decoration: none; white-space: nowrap;
  line-height: 1;
}
.logo-glyph {
  width: .88em; height: .88em; object-fit: contain;
  transform: translateY(.045em);
  transition: filter .3s var(--ease);
}
.logo:hover .logo-glyph { filter: drop-shadow(0 0 10px var(--glow)); }
.logo-word { transform: translateX(-.02em); }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-solid {
  background: color-mix(in srgb, var(--primary) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
body:not(.has-hero) .site-header { position: sticky; }
body:not(.has-hero) { padding-top: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.main-nav ul { display: flex; gap: 1.9rem; list-style: none; padding: 0; margin: 0; }
.nav-link {
  text-decoration: none; font-size: .93rem; font-weight: 500;
  color: var(--text-bright); opacity: .78; position: relative; padding: .2rem 0;
  transition: opacity .25s ease, color .25s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover { opacity: 1; color: var(--accent); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { opacity: 1; color: var(--accent); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.phone-link {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font-weight: 600; font-size: .9rem; color: var(--text);
}
.phone-link svg { color: var(--accent); flex: 0 0 auto; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 70%, transparent); cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--accent); margin: 0 auto; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
  background: color-mix(in srgb, var(--primary) 96%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 99; padding: 1.2rem 1.5rem 1.6rem;
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.mobile-nav-link { text-decoration: none; font-size: 1.08rem; font-weight: 500; color: var(--text-bright); }
.mobile-nav-link.accent { color: var(--accent); font-weight: 700; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; }
  /* Nummer weicht dem Platz, der Link bleibt aber eine 44x44-Tippflaeche */
  .phone-link span { display: none; }
  .phone-link {
    width: 44px; height: 44px; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 70%, transparent);
  }
  .phone-link svg { width: 20px; height: 20px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.6rem; border-radius: var(--radius-sm); font-size: .93rem; font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }
.btn-accent { background: var(--accent); color: var(--primary); }
.btn-accent:hover { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 30px -12px var(--glow); }
.btn-outline { border-color: var(--line-strong); color: var(--text); background: color-mix(in srgb, var(--secondary) 30%, transparent); }
.btn-outline:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-dark { background: var(--on-light); color: var(--accent); }
.btn-dark:hover { box-shadow: 0 14px 30px -14px var(--on-light); }
.btn-on-light { border-color: var(--on-light); color: var(--on-light); }
.btn-on-light:hover { background: var(--on-light); color: var(--accent); }
.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

.pill {
  display: inline-block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--primary); padding: .34rem .8rem; border-radius: 99px; font-weight: 700;
}

/* ---------- breadcrumb ---------- */
.breadcrumb { padding: 1.6rem 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; font-size: .82rem; color: var(--text-faint); }
.breadcrumb a { text-decoration: none; color: var(--text-faint); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.breadcrumb li[aria-current] { color: var(--text); font-weight: 500; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Variante fuer „Über uns": die Abschnitte fahren von rechts herein. Sie
   werden nur einmal beobachtet und bleiben danach stehen, auch wenn man
   wieder hoch und runter scrollt. */
.reveal-x {
  opacity: 0; transform: translateX(clamp(2.5rem, 7vw, 6rem));
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-x.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-x { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HERO — Vollbild-Video, das beim Scrollen ausblendet
   Die Buehne ist hoeher als der Viewport; das Video bleibt sticky stehen und
   wird ueber die Variable --hero-fade (0 → 1, von main.js gesetzt) ausgeblendet.
   ========================================================================== */
/* ---------- Szene: Baumkronen hinter dem Hero ----------
   .scene umfasst Hero, „Über uns" und „Leistungen". Der Kronen-Layer liegt
   darunter und bleibt stehen, waehrend der Inhalt darueber scrollt. */
.scene { position: relative; isolation: isolate; }
.canopy-layer {
  position: absolute; inset: 0; z-index: 0;
  overflow: clip; pointer-events: none;
}
.canopy-frame {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  perspective: 1400px;
}
.canopy-frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* Die Kronen kommen ruhig etwas groesser herein und wandern beim
     Weiterscrollen langsam mit. */
  transform:
    scale(calc(1.14 - var(--hero-fade, 0) * .14))
    translateY(calc(var(--canopy, 0) * -5%));
  transform-origin: 50% 42%;
  will-change: transform;
}
/* 82 % Deckung sind gemessen noetig: die hellsten Blattpartien haben eine
   Leuchtdichte von 0,66 und kaemen sonst nur auf 3,7:1 Textkontrast. */
.canopy-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      var(--primary) 0%,
      color-mix(in srgb, var(--primary) 82%, transparent) 14%,
      color-mix(in srgb, var(--primary) 82%, transparent) 82%,
      var(--primary) 100%);
}

/* Inhalt liegt ueber dem Kronen-Layer */
.scene > .hero-stage,
.scene > section { position: relative; z-index: 1; }
/* Flaechen auf dem Bild bleiben lesbar, ohne den Hintergrund zuzudecken */
.scene .stat { background: color-mix(in srgb, var(--primary) 84%, transparent); }
.scene .pkg-card { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.scene .pkg-card:hover, .scene .pkg-card:focus-within { background: var(--surface-hi); }

.hero-stage { position: relative; height: 185vh; z-index: 1; }
.hero-viewport {
  position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 34rem;
  overflow: hidden; display: flex; align-items: center;
  opacity: calc(1 - var(--hero-fade, 0));
}
.hero-media { position: absolute; inset: 0; perspective: 1100px; }
/* Das <picture> soll die Anordnung nicht verändern: das Bild bleibt damit
   unmittelbares Kind von .hero-media und behält seine Maße. */
.hero-media picture { display: contents; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  /* Der Waldblick blendet beim Scrollen einfach aus, begleitet von einem
     sanften Zoom. */
  transform: scale(calc(1 + var(--hero-fade, 0) * .08));
  transform-origin: 50% 45%;
  will-change: transform;
}
.hero-media img { position: absolute; inset: 0; }
/* Das Video liegt ueber dem Standbild und wird erst eingeblendet, wenn es
   wirklich laeuft (auf Mobilgeraeten / bei Datensparmodus bleibt das Bild). */
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-media video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-media img, .hero-media video { transform: none !important; }
  /* Ohne Ausblend-Effekt braucht der Hero keine ueberhohe Buehne, sonst
     entstuende leerer Scrollweg ohne sichtbare Wirkung. */
  .hero-stage { height: auto; }
  .hero-viewport { position: static; opacity: 1; }
  .hero-content { transform: none; }
  /* Kronen-Layer bleibt ruhig stehen, keine Kamerafahrt */
  .canopy-frame img,
  .hero-media img, .hero-media video { transform: none !important; filter: none !important; }
}
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 20%, color-mix(in srgb, var(--primary) 55%, transparent) 72%, var(--primary) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--primary) 72%, transparent) 0%, transparent 26%, transparent 52%, color-mix(in srgb, var(--primary) 92%, transparent) 100%);
}
/* Hochkant rückt die Wortmarke genau auf das leuchtende Tor. Dort stehen sonst
   nur 1,26:1 statt der nötigen 4,5:1, gemessen am hellsten Prozent der Fläche
   hinter der Schrift. Eine flache Ellipse über dem Textblock hebt das auf
   5,47:1 an der Wortmarke und 6,22:1 an der Unterzeile, auf Tablets im
   Hochformat auf 6,49:1 und 4,92:1.

   Die Ellipse liegt bewusst im Schleier und nicht hinter dem Text: ein eigenes
   Element hätte einen Kasten und damit eine sichtbare Kante. Der Grundschleier
   darunter bleibt unverändert, damit Sonnenlicht und Bach erhalten bleiben. */
@media (orientation: portrait) and (max-width: 900px) {
  .hero-veil {
    background:
      radial-gradient(95% 40% at 40% 41%, color-mix(in srgb, var(--primary) 90%, transparent) 0%, color-mix(in srgb, var(--primary) 50%, transparent) 55%, transparent 100%),
      radial-gradient(120% 85% at 50% 45%, transparent 20%, color-mix(in srgb, var(--primary) 55%, transparent) 72%, var(--primary) 100%),
      linear-gradient(to bottom, color-mix(in srgb, var(--primary) 72%, transparent) 0%, transparent 26%, transparent 52%, color-mix(in srgb, var(--primary) 92%, transparent) 100%);
  }
}
.hero-content {
  position: relative; width: 100%; z-index: 2;
  transform: translateY(calc(var(--hero-fade, 0) * -3.5rem));
}
.hero-inner { max-width: 46rem; }

.hero-wordmark {
  display: flex; align-items: center; gap: .04em;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 8.5rem); line-height: .9; letter-spacing: -.045em;
  color: var(--text); margin: 0 0 1.1rem;
  filter: drop-shadow(0 8px 40px color-mix(in srgb, var(--primary) 85%, transparent));
}
.hero-wordmark .logo-glyph {
  width: .82em; height: .82em; transform: translateY(.055em);
  filter: drop-shadow(0 0 26px var(--glow));
  animation: glyph-glow 6s ease-in-out infinite;
}
@keyframes glyph-glow {
  0%, 100% { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 30%, transparent)); }
  50%      { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 60%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark .logo-glyph { animation: none; }
}
.hero-sub {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); line-height: 1.55;
  color: var(--text-bright); max-width: 30ch; margin: 0 0 2rem;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--primary) 80%, transparent);
}
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .hero-stage { height: 165vh; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* ---------- Scrollfilm: Hintergrundvideo, das am Scrollstand haengt ----------
   Der erste Frame liegt ganz oben auf der Seite, der letzte ganz unten.
   Das Video wird nicht abgespielt, sondern von main.js weitergespult.
   Auf Mobilgeraeten bleibt stattdessen das Standbild stehen. */
.scrollfilm {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.scrollfilm img, .scrollfilm video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.scrollfilm video { opacity: 0; transition: opacity .9s ease; }
.scrollfilm video.is-ready { opacity: 1; }
/* 88 % Deckung sind gemessen noetig: die Videos enthalten nahezu weisse
   Stellen (Wasserfall, Sonnenlicht), die sonst nur 3,9:1 Textkontrast
   ergeben. Mit 88 % sind es 4,7:1. */
.scrollfilm-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--primary) 94%, transparent) 0%,
    color-mix(in srgb, var(--primary) 88%, transparent) 26%,
    color-mix(in srgb, var(--primary) 88%, transparent) 74%,
    color-mix(in srgb, var(--primary) 95%, transparent) 100%);
}
/* Der Seitenhintergrund muss durchlaessig sein, sonst deckt er den Film zu.
   Die Grundfarbe liefert weiterhin <html>. */
body.has-scrollfilm { background: transparent; }
body.has-scrollfilm .section-earth,
body.has-scrollfilm .contact-teaser,
body.has-scrollfilm .section-deep { background: transparent; }
body.has-scrollfilm .contact-teaser { border-color: var(--line); }
/* Flaechen mit Text bleiben leicht gefuellt, damit alles lesbar bleibt */
body.has-scrollfilm .value-card,
body.has-scrollfilm .cred-list li,
body.has-scrollfilm .pkg-card { background: color-mix(in srgb, var(--surface) 88%, transparent); }
body.has-scrollfilm .cred-list { background: color-mix(in srgb, var(--line) 60%, transparent); }
body.has-scrollfilm .pkg-card:hover,
body.has-scrollfilm .pkg-card:focus-within { background: var(--surface-hi); }

/* ---------- sections ---------- */
.section { padding: 6rem 0; position: relative; }
.section-tight { padding: 4rem 0; }
/* Startseite: die Abschnitte auf dem Kronen-Hintergrund bekommen mehr Luft,
   damit die Szene nicht gedraengt wirkt. */
.scene > .section { padding: 9rem 0; }
.scene > .section:first-of-type { padding-top: 7rem; }
.scene > .section:last-of-type { padding-bottom: 11rem; }
@media (max-width: 760px) {
  .scene > .section { padding: 5.5rem 0; }
  .scene > .section:last-of-type { padding-bottom: 6.5rem; }
}
.section-earth { background: var(--bg-dark); }
.section-deep { background: var(--secondary); }
.section-head { max-width: 58ch; margin-bottom: 3rem; }
main h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.section-head h2, .section h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: .8rem; }
.section-sub { color: var(--text-soft); font-size: 1.02rem; margin: 0; }
.eyebrow {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 0 0 1rem;
}
.lead { font-size: 1.1rem; line-height: 1.7; color: var(--text-bright); }

/* Torbogen-Trennlinie: greift das leuchtende Tor aus dem Hero-Video auf */
.gate-rule-wrap { padding-top: 3.5rem; }
.gate-rule-wrap + .section { padding-top: 3.5rem; }
.gate-rule {
  width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--accent) 50%, var(--line-strong) 78%, transparent);
  opacity: .7;
}

/* ---------- ueber-uns-Band auf der Startseite ---------- */
/* Zwei Drittel Text, ein Drittel der Weg zum Anruf */
.intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3.5rem; align-items: stretch; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
/* Einheitliche Schriftgroesse im ganzen Abschnitt – links wie rechts */
.intro-grid p { color: var(--text-soft); font-size: 1rem; line-height: 1.7; }
.intro-grid .lead { font-size: 1rem; line-height: 1.7; color: var(--text-bright); }

/* ---------- Weg vom Suchen zum Anruf (Startseite, „Über uns") ----------
   Nummeriert, weil die Reihenfolge hier die eigentliche Aussage traegt:
   der Auftritt kommt vor dem Anruf. */
/* Die Flaeche traegt die Hoehe der Textspalte mit, damit der Abschnitt
   ausgewogen wirkt; die Schritte verteilen sich darin gleichmaessig. */
.weg-box {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.5rem; height: 100%;
  display: flex; flex-direction: column;
}
/* In der schmalen Spalte etwas engere Laufweite, damit die Zeile mehr Text
   traegt und weniger zerrissen umbricht. */
.weg-titel {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; margin: 0 0 1.6rem;
}
/* Die Schritte dehnen sich auf die Hoehe der Textspalte. Weil sich das
   Listenelement selbst dehnt (und nicht der Abstand dazwischen verteilt
   wird), waechst die Verbindungslinie mit und erreicht immer den naechsten
   Kreis. */
/* Die Schritte bleiben kompakt und sitzen mittig in der Flaeche. Wuerden sie
   auf die volle Hoehe gedehnt, entstuenden grosse Luecken zwischen den
   Stationen und der Weg wirkte zerrissen. */
.weg {
  list-style: none; counter-reset: schritt; padding: 0; margin: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.weg li {
  counter-increment: schritt;
  position: relative; padding: 0 0 2.2rem 3rem;
  flex: 0 0 auto;
}
.weg li:last-child { padding-bottom: 0; }
.weg li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -.1rem;
  width: 1.95rem; height: 1.95rem; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .92rem; font-weight: 700;
  color: var(--accent);
}
/* Verbindungslinie: laeuft vom Kreis bis zur Unterkante des Schritts und
   damit direkt bis zum naechsten Kreis. */
.weg li:not(:last-child)::after {
  /* Setzt direkt an der Unterkante des Kreises an (-.1rem + 1.95rem), sonst
     schwebt die Linie unter dem Kreis. */
  content: ""; position: absolute; left: .97rem; top: 1.85rem; bottom: 0;
  width: 1px; background: var(--line-strong);
}
.weg h3 { font-size: 1.05rem; margin: .25rem 0 .4rem; }
/* Gleiche Schriftgroesse wie der Text links */
.weg p { font-size: 1rem; color: var(--text-soft); margin: 0; line-height: 1.7; }
@media (max-width: 860px) {
  .weg-titel { margin-top: .5rem; }
}

/* ---------- stats / counters ---------- */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--primary); padding: 1.6rem 1rem; text-align: center; }
.section-earth .stat { background: var(--bg-dark); }
.stat-num {
  font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--accent); line-height: 1;
}
.stat-label { font-size: .78rem; color: var(--text-faint); margin-top: .5rem; letter-spacing: .02em; }
.stat-note { font-size: .76rem; color: var(--text-faint); margin: 1rem 0 0; }

/* ---------- paket-karten ---------- */
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 860px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; } }

.pkg-card {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.7rem 1.8rem;
  transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
/* Beim Hover wird die Karte selbst zum Lichtportal aus dem Hero-Video.
   Nachgebaut nach dem Original im Video: ein schmaler, fast weisser Kern an
   der Kante (dort gemessen 255,251,228), ein enger heller Schein, darum ein
   weiter Halo, dazu ein milchiger Lichtvorhang, der nach oben heller wird. */
.pkg-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, white);
  opacity: 0; transition: opacity .45s ease;
  /* Abstandsverhaeltnis wie im Video gemessen: steiler Abfall auf den ersten
     Pixeln (245 → 146 → 120), danach flach auslaufender Schein. */
  box-shadow:
    0 0 5px 0 color-mix(in srgb, var(--accent) 88%, white),
    0 0 16px -5px var(--accent),
    0 0 52px -16px var(--glow),
    inset 0 0 22px -8px color-mix(in srgb, var(--accent) 45%, white),
    inset 0 26px 46px -34px color-mix(in srgb, var(--accent) 30%, white);
}
.pkg-card::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1;
  opacity: 0; transition: opacity .5s ease;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 9%, transparent) 38%,
      transparent 72%),
    repeating-linear-gradient(90deg,
      transparent 0 5px,
      color-mix(in srgb, var(--accent) 5%, transparent) 5px 6px);
}
.pkg-card:hover, .pkg-card:focus-within {
  transform: translateY(-8px); background: var(--surface-hi); border-color: transparent;
  box-shadow: 0 34px 62px -34px var(--glow);   /* Licht strahlt nach unten ab */
}
.pkg-card:hover::before, .pkg-card:focus-within::before {
  opacity: 1; animation: portal-breathe 3.2s ease-in-out infinite;
}
.pkg-card:hover::after, .pkg-card:focus-within::after { opacity: 1; }
/* Das Vorschaubild fasst das Licht mit auf */
.pkg-card:hover .pkg-video, .pkg-card:focus-within .pkg-video {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 22px -8px var(--glow);
}
@keyframes portal-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-card:hover, .pkg-card:focus-within { transform: none; }
  .pkg-card:hover::before, .pkg-card:focus-within::before { animation: none; }
}
.pkg-card h2, .pkg-card h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.pkg-price {
  font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--accent); font-size: 2.3rem; line-height: 1; margin: .3rem 0 1.3rem;
}
.pkg-card ul { list-style: none; padding: 0; margin: 0 0 1.3rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.pkg-card li { font-size: .94rem; color: var(--text-soft); padding-left: 1.4rem; position: relative; line-height: 1.5; }
.pkg-card li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border: 1.5px solid var(--accent); border-radius: 1px; transform: rotate(45deg);
}
.pkg-note {
  font-size: .84rem; color: var(--accent); font-weight: 600; margin: 0 0 1.3rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.pkg-video {
  position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/10;
  margin-bottom: 1.3rem; background: var(--primary); border: 1px solid var(--line);
}
.pkg-video video, .pkg-video img { width: 100%; height: 100%; object-fit: cover; }
/* Kurzfassung der Karten auf der Startseite: nur Vorschau, Name und Preis.
   Die ganze Karte ist ein Link auf die Leistungsseite. */
.pkg-card-kurz {
  text-decoration: none; color: inherit;
  padding-bottom: 2rem;
}
.pkg-card-kurz .pkg-video { margin-bottom: 1.5rem; }
.pkg-card-kurz h3 { margin-bottom: .1rem; }
.pkg-card-kurz .pkg-price { margin-bottom: 0; margin-top: auto; }

.pkg-grid-cta { display: flex; justify-content: center; margin-top: 2.5rem; }

/* Bildunterschrift unter der Vorschau, damit sie die Darstellung nicht verdeckt */
.pkg-video-note {
  font-size: .72rem; color: var(--text-faint); letter-spacing: .02em;
  margin: -.9rem 0 1.2rem;
}
.pkg-featured::before { opacity: .55; }
.pkg-featured { border-color: transparent; }

/* ---------- ueber-uns: Kopfbereich ---------- */
.about-hero { padding-top: 2.5rem; padding-bottom: 3rem; }
.about-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center;
}
/* Ohne Bild daneben bekommt der Text mehr Raum, bleibt aber lesbar breit */
.about-hero-solo { grid-template-columns: 1fr; max-width: 46rem; }
.about-hero { padding-top: 4rem; padding-bottom: 4.5rem; }
.about-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 1.2rem; }
.about-hero .section-sub { font-size: 1.05rem; line-height: 1.7; }
.about-hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.about-portal {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 50px -22px var(--glow), 0 30px 60px -34px var(--shadow);
}
.about-portal img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .about-portal { max-width: 24rem; }
}

/* ---------- ueber-uns: Firmengeschichte mit Zitat ---------- */
.story-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 3.5rem; align-items: start; }
.story-grid p { color: var(--text-soft); }
.story-aside {
  border-left: 2px solid var(--accent); padding: .3rem 0 .3rem 1.5rem;
  position: relative;
}
.story-quote {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4;
  color: var(--text); margin-bottom: .8rem; text-wrap: balance;
}
.story-quote-by { font-size: .85rem; color: var(--text-faint); margin: 0; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---------- ueber-uns: Qualifikationen ---------- */
.cred-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .cred-list { grid-template-columns: repeat(2, 1fr); } }
.cred-list li {
  background: var(--surface); padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: .35rem;
  position: relative; padding-left: 2.8rem;
}
.cred-list li::before {
  content: ""; position: absolute; left: 1.6rem; top: 1.85em;
  width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 1px;
  transform: rotate(45deg);
}
.cred-list strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--text); font-weight: 700; }
.cred-list span { font-size: .92rem; color: var(--text-soft); }

/* ---------- werte-karten (ueber-uns) ---------- */
.value-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: border-color .35s ease; }
.value-card:hover { border-color: var(--line-strong); }
.value-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.value-card p { font-size: .94rem; color: var(--text-soft); margin: 0; }

/* ---------- helles Kontakt-Band (Olive) ---------- */
.band-light { background: var(--bg-light); color: var(--on-light); padding: 5.5rem 0; }
.band-light h2, .band-light h3 { color: var(--on-light); }
.band-light p { color: var(--on-light-soft); }
.band-light .eyebrow { color: var(--on-light); opacity: .75; }
.band-light a:not(.btn) { color: var(--on-light); }
.contact-band-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
@media (max-width: 860px) { .contact-band-grid { grid-template-columns: 1fr; gap: 2.2rem; } }
.contact-direct { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-direct li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1rem; }
.contact-direct svg { color: var(--on-light); flex: 0 0 auto; margin-top: .25rem; opacity: .8; }
.contact-direct a { text-decoration: none; font-weight: 600; }
.contact-direct a:hover { text-decoration: underline; }

/* ---------- dunkles CTA-Band ---------- */
.contact-teaser {
  background: var(--secondary); padding: 5rem 0; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contact-teaser p { color: var(--text-soft); max-width: 48ch; margin: 0 auto 1.8rem; }
.contact-teaser .hero-cta { justify-content: center; }

/* ---------- kontaktseite ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: .45rem; }
.form-field label { font-size: .86rem; font-weight: 600; color: var(--text); }
.form-field input, .form-field textarea, .form-field select {
  font: inherit; padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--primary); color: var(--text-bright);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-field select {
  appearance: none;
  padding-right: 2.6rem;
  /* Pfeil als data-URI, damit keine externe Datei geladen werden muss */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23C4E538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}
.form-field select option { background: var(--primary); color: var(--text-bright); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-faint); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .9rem; min-height: 1.4em; color: var(--text-soft); }
.form-status[data-state="ok"] { color: var(--accent); font-weight: 600; }
.form-status[data-state="error"] { color: var(--text); font-weight: 600; }
.form-note { font-size: .8rem; color: var(--text-faint); margin-top: -.5rem; }

.contact-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; }
.contact-info-card h2, .contact-info-card h3 { font-size: 1.15rem; }
.contact-info-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-info-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; color: var(--text-soft); }
.contact-info-list svg { color: var(--accent); flex: 0 0 auto; margin-top: .2rem; }
.contact-info-list a { text-decoration: none; }
.contact-info-list a:hover { color: var(--accent); }
.opening-hours { font-size: .9rem; color: var(--text-soft); border-collapse: collapse; }
.opening-hours td:first-child { padding-right: 1.2rem; color: var(--text); }
.opening-hours td { padding: .2rem 0; }

.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 1.6rem; }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
.map-consent {
  height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.8rem; text-align: center; background: var(--surface);
}
.map-consent svg { color: var(--accent); }
.map-consent p { font-size: .9rem; color: var(--text-soft); max-width: 34ch; margin: 0; }
.map-consent a { font-size: .82rem; color: var(--text-faint); }
.map-consent a:hover { color: var(--accent); }

.placeholder-flag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--primary); background: var(--accent); border-radius: 4px;
  padding: .1rem .45rem; margin-left: .45rem; vertical-align: middle;
}

/* ---------- fliesstext-seiten (impressum, datenschutz) ---------- */
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.prose p, .prose li { color: var(--text-soft); }
.prose ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .4rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-dark); padding: 4rem 0 1.8rem; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; margin-bottom: 2.5rem; }
.footer-slogan { font-size: .92rem; color: var(--text-soft); max-width: 30ch; margin-top: .8rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { text-decoration: none; font-size: .9rem; color: var(--text-soft); }
.footer-links a:hover { color: var(--accent); }
.footer-col h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; color: var(--text-faint); font-family: var(--font-body); font-weight: 600; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--text-faint);
}
.footer-bottom-links { list-style: none; display: flex; gap: 1.3rem; padding: 0; margin: 0; }
.footer-bottom-links a { text-decoration: none; color: var(--text-faint); }
.footer-bottom-links a:hover { color: var(--accent); }
.footer-edit-btn { background: none; border: 0; color: var(--text-faint); font-size: .8rem; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }
.footer-edit-btn:hover { color: var(--accent); }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--primary); border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease; z-index: 90;
  box-shadow: 0 10px 30px -10px var(--glow);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- edit mode (Phase 3) ---------- */
body.is-editing { padding-bottom: 5rem; }
.is-editing [contenteditable="true"] {
  cursor: text; border-radius: 3px; outline: 1px dashed transparent; outline-offset: 3px;
  transition: outline-color .15s ease, background-color .15s ease;
}
.is-editing [contenteditable="true"]:hover { outline-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.is-editing [contenteditable="true"]:focus { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.is-editing [data-editable-image] { cursor: pointer; }
.edit-image-hint {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center;
  background: color-mix(in srgb, var(--primary) 72%, transparent); color: var(--accent);
  font-size: .82rem; font-weight: 600; padding: .5rem; border-radius: inherit; pointer-events: none;
}
.is-editing [data-editable-image]:hover + .edit-image-hint { display: flex; }

.edit-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--secondary); color: var(--text-bright); border-top: 1px solid var(--line-strong);
  padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  box-shadow: 0 -10px 30px -14px var(--shadow);
}
.edit-toolbar .edit-toolbar-label { font-size: .86rem; color: var(--text-soft); }
.edit-toolbar .btn { padding: .65rem 1.3rem; font-size: .86rem; }
.edit-save-status { font-size: .82rem; color: var(--accent); }

.edit-modal-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--primary) 82%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 500; padding: 1rem;
}
.edit-modal {
  background: var(--secondary); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 1.9rem; width: 100%; max-width: 380px;
  box-shadow: 0 30px 60px -20px var(--shadow);
}
.edit-modal h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.edit-modal p { font-size: .88rem; color: var(--text-soft); margin-bottom: 1.2rem; }
.edit-modal input {
  width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  font: inherit; margin-bottom: .7rem; background: var(--primary); color: var(--text-bright);
}
.edit-modal input:focus { outline: none; border-color: var(--accent); }
.edit-modal-error { color: var(--accent); font-size: .84rem; min-height: 1.2em; margin-bottom: .7rem; }
.edit-modal-actions { display: flex; gap: .7rem; }
.edit-modal-actions .btn { flex: 1; }

/* ---------- utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head { padding: 3.2rem 0 0; }
.page-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom: 1rem; }
.page-head .lead { max-width: 54ch; color: var(--text-soft); }

/* ---------- Bearbeitungsmodus: Speichern auf dem Server ---------- */
.edit-toolbar .btn[disabled],
.edit-modal .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.edit-save-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.edit-save-status[data-state="laeuft"] { color: var(--text-soft); }
.edit-save-status[data-state="ok"] { color: var(--accent); font-weight: 600; }
.edit-save-status[data-state="fehler"] {
  color: var(--text-bright); font-weight: 600;
  border-left: 3px solid var(--accent); padding-left: .55rem;
}
.edit-notloesung {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: .25rem .65rem;
}
.edit-notloesung:hover, .edit-notloesung:focus-visible { border-color: var(--accent); color: var(--accent); }
.edit-modal-steps { margin: 0 0 1.2rem; padding-left: 1.2rem; font-size: .88rem; color: var(--text-soft); }
.edit-modal-steps li { margin-bottom: .3rem; }
.edit-modal code { font-size: .86em; color: var(--text); }