/* ==========================================================================
   Gedenkwiese.de — Stylesheet (alle Seiten)
   (c) 2026 by Ing. F. Weijers, weijers@cyberprofis.de
   Lizenz: MIT — Spenden: https://paypal.me/IngWeijers
   Schriften lokal: ../fonts/fonts.css — keine externen Requests.

   Mobile-First: alle Werte ohne Media-Query gelten für schmale Viewports.
   Erst ab `min-width:720px` (Tablet) bzw. `min-width:960px` (Desktop) werden
   mehrspaltige Layouts aktiv. Diese Reihenfolge macht den Code zur
   Wahrheit — die früheren `max-width`-Breakdowns wurden entfernt.
   ========================================================================== */

/* ============ GRUNDLAGEN ============ */
:root{
  --bg:#0b1310; --bg2:#0f1a15; --panel:#152219; --panel2:#1b2b21;
  --line:rgba(233,196,124,.14); --line-strong:rgba(233,196,124,.3);
  --ivory:#f1ead8; --muted:#a6b19e; --soft:#cfd6c3;
  --amber:#f2b95f; --amber-deep:#d98a34; --glow:rgba(242,185,95,.45);
  --sage:#8fae8b; --lav:#b0a8d9; --dusk:#8fb0c9; --rose:#d9a08b;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Source Sans 3',system-ui,sans-serif;
  /* Touch-Target — gilt ab Mobile als hartes Minimum, weil das Kerzenfeld
     die zentrale Interaktion ist. */
  --tap:44px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ivory); font-family:var(--sans);
  font-size:16.5px; line-height:1.65; font-weight:300; overflow-x:hidden;
}
::selection{background:var(--amber);color:#2a1a06}
a{color:inherit;text-decoration:none}
img,svg{display:block}

/* ============ TYPografie & Helfer ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber);font-weight:600;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--amber);opacity:.6}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12}
h1{font-size:clamp(2.4rem,7vw,4.7rem);margin:18px 0 20px}
h2{font-size:clamp(1.95rem,6vw,3.2rem);margin:14px 0 12px}
.lead{color:var(--muted);max-width:56ch}
.accent{font-style:italic;color:var(--amber);font-weight:500}
section{position:relative;padding:clamp(52px,11vw,84px) 0}

/* Sichtbarer Fokus — Tastaturbedienung */
:is(a,button,input,select,textarea,[role="button"]):focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:4px
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:#2a1804;
  padding:12px 20px;border-radius:0 0 6px 0;font-weight:700;font-size:.85rem
}
.skip:focus{left:0}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ============ HEADER (Mobile-First) ============ */
header.site{
  position:fixed;inset:0 0 auto;z-index:60;padding:10px 0;
  background:rgba(9,15,12,.92);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
}
.hd{display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.18rem;font-weight:700;letter-spacing:.02em}
.logo .de{color:var(--amber);font-weight:500;font-style:italic}
.logo svg{width:22px;height:28px;overflow:visible}
.logo img{width:26px;height:26px;flex:none}
nav{
  display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;gap:0;padding:8px 0 14px;
  background:rgba(9,15,12,.98);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.55);
}
nav.offen{display:flex}
nav a{
  color:var(--soft);position:relative;padding:15px 28px;font-size:.9rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.04);
}
nav a::after{display:none}
nav a.here{color:var(--amber);background:rgba(242,185,95,.07)}
nav a:last-child{border-bottom:none}

.candle-badge{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line-strong);
  padding:7px 13px;border-radius:999px;font-size:.76rem;letter-spacing:.08em;color:var(--ivory);
  background:rgba(242,185,95,.05);white-space:nowrap;transition:transform .3s,border-color .3s;
}
.candle-badge b{color:var(--amber);font-weight:700}
.candle-badge.pulse{transform:scale(1.07);border-color:var(--amber)}
.candle-badge .lbl{display:none}
.mini-flame{width:9px;height:12px;background:radial-gradient(circle at 50% 75%,#fff3cf,var(--amber) 55%,transparent 72%);
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;animation:flick 1.4s infinite;flex:none}

/* Menüschalter — auf Mobile immer sichtbar */
.navtoggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:var(--tap);height:var(--tap);padding:0 11px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);border-radius:8px;
  transition:border-color .3s,background .3s;
}
.navtoggle span{display:block;height:2px;border-radius:2px;background:var(--soft);
  transition:transform .3s,opacity .25s,background .3s}
.navtoggle[aria-expanded="true"]{border-color:var(--amber);background:rgba(242,185,95,.08)}
.navtoggle[aria-expanded="true"] span{background:var(--amber)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ NACHTHIMMEL (Hero + Steinwiese) ============ */
.sky{position:absolute;inset:0;pointer-events:none}
.star{position:absolute;background:#f4eedb;border-radius:50%;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.moon{display:none}
.fly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffdf9b;
  box-shadow:0 0 12px 3px rgba(255,214,140,.55);opacity:.85;
  animation:flypath var(--dur,11s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes flypath{
  0%{transform:translate(0,0)}33%{transform:translate(var(--dx,40px),var(--dy,-60px))}
  66%{transform:translate(calc(var(--dx,40px)*-.6),calc(var(--dy,-60px)*.5))}
  100%{transform:translate(20px,10px)}
}
.hills{position:absolute;left:0;right:0;bottom:-2px;pointer-events:none}
.hills svg{width:100%;height:170px}

/* ============ HERO (Mobile-First = single column) ============ */
.meadow{
  min-height:auto;display:flex;flex-direction:column;align-items:stretch;padding:118px 0 46px;
  background:
    radial-gradient(1100px 520px at 78% -10%,rgba(143,176,201,.12),transparent 60%),
    radial-gradient(900px 600px at 12% 110%,rgba(143,174,139,.10),transparent 55%),
    linear-gradient(180deg,#0a1210 0%,#0d1713 55%,#0b1310 100%);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;position:relative;z-index:2}
.hero-grid h1 em{display:block;font-weight:500}
.hero-btns{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 24px;border-radius:6px;cursor:pointer;border:1px solid transparent;
  transition:transform .3s,box-shadow .3s,background .3s,border-color .3s;
  min-height:var(--tap);
}
.btn-fire{
  background:linear-gradient(160deg,var(--amber),var(--amber-deep));color:#221604;
  box-shadow:0 6px 26px rgba(0,0,0,.35);
}
.btn-fire:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(217,138,52,.5)}
.btn-ghost{background:transparent;color:var(--ivory);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--amber);transform:translateY(-3px);background:rgba(242,185,95,.06)}
.hero-stats{display:flex;gap:24px;margin-top:36px;flex-wrap:wrap}
.hstat b{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--amber);display:block;line-height:1}
.hstat span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---- Kerzenfeld (Mobile-First) ----
   Seit 2026-08-21 sitzt das .field-shell AUSSERHALB von .hero-grid
   und erstreckt sich ueber die volle Seitenbreite. Auf Mobile ist
   es unter dem Hero-Text, auf Desktop darunter (eigener Block). */
.field-shell{
  position:relative;
  /* Gebundene Breite statt randlos: bei 1400 px standen sonst 26 Kerzen
     in einer schnurgeraden Zeile, was eher nach Tabelle als nach Wiese
     aussah. 1100 px ergeben rund 17 Kerzen je Reihe und vier Reihen.
     Rand und Innenabstand wachsen stufenlos mit — vom Telefon bis zum
     grossen Schirm gibt es keinen Sprung mehr. */
  /* Seitliche Rinne auf kleinen Schirmen, Zentrierung auf grossen — in
     einer Angabe statt in einer eigenen Medienabfrage.
     ⚠️ `width:100%` ist hier zwingend: .meadow ist ein Spalten-Flexbau,
     und die beiden `auto`-Seitenraender setzen das Strecken (align-items:
     stretch) ausser Kraft. Ohne feste Breite bemisst sich der Rahmen dann
     am Inhalt — seit die Kerzen absolut sitzen, waere das nur noch das
     Eingabefeld darunter, und der Rahmen schrumpfte auf 456 px. */
  width:100%;
  max-width:min(1100px, calc(100% - clamp(24px,6vw,40px)));
  margin:clamp(22px,5vw,36px) auto 0;
  padding:clamp(28px,6vw,38px) clamp(14px,4vw,22px) clamp(20px,4vw,30px);
  border:1px solid var(--line);border-radius:14px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 60%,rgba(20,33,26,.55),rgba(14,23,18,.85) 75%);
  box-shadow:inset 0 1px 0 rgba(255,200,110,.06);
}
/* (order-Regel entfernt 2026-08-21: field-shell ist nicht mehr im Grid,
   sondern eigene Sektion. order:0 wuerde nichts mehr bewirken.) */
.field{
  /* ---- Rastermass (mobile first) ----
     --spalte ist die Breite, die eine Kerze auf dem Bogen beansprucht;
     app.js rechnet daraus, wie viele Kerzen auf einen Halbkreis passen.
     Sie waechst stufenlos von 46 px (kleines Telefon) auf 58 px. */
  --spalte:clamp(46px,12.5vw,58px);
  --wachs-min:clamp(32px,8.5vw,46px);
  --wachs-max:clamp(56px,14vw,84px);
  /* Das Wachs ist zugleich das Antippziel — deshalb mindestens 24 px
     breit (WCAG 2.5.8). */
  --wachs-breite:clamp(24px,5.5vw,28px);

  /* ---- Szene statt Raster ----
     Die Kerzen stehen seit dem 07.09.2026 nicht mehr in Zeilen, sondern
     auf konzentrischen Ellipsenboegen hinter einem Gedenkstein. Sie
     werden von app.js absolut gesetzt; die Hoehe des Kastens rechnet
     dieselbe Funktion aus, deshalb steht hier nur ein Startwert. Ohne
     Rollbalken: die Anordnung passt sich der Breite an, statt
     ueberzulaufen. */
  position:relative;
  height:clamp(280px,52vw,420px);
  overflow:visible;
}
.field-label{position:absolute;top:-11px;left:20px;background:var(--bg);padding:0 12px;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage)}
.dedicate{margin-top:18px;display:flex;gap:10px;flex-direction:column}
.dedicate input{
  background:#0e1712;border:1px solid var(--line);color:var(--ivory);
  padding:14px 16px;border-radius:6px;font-family:var(--sans);font-size:1rem;
  transition:border-color .3s,box-shadow .3s;min-height:var(--tap);
}
.dedicate input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,185,95,.15)}
.dedicate input::placeholder{color:#6f7d6a;font-style:italic}
.dedicate .btn{width:100%}
.field-hint{margin-top:10px;font-size:.82rem;color:var(--muted);font-style:italic}

/* ---- Kerze (Mobile-First) ----
   Die Kerze belegt eine volle Rasterspalte (--spalte, mindestens 46 px);
   das Antippfeld ist damit auf jedem Geraet mindestens 46 × 44 px und
   erfuellt WCAG 2.5.5, ohne in die Nachbarkerze zu ragen. Sichtbar ist
   nur das mittig sitzende Wachs.

   Die Kerze hat KEINE feste Hoehe. Vorher waren es 72 px (Desktop 88 px),
   waehrend Docht, Wachs und Namensschild zusammen bis zu 94 px
   beanspruchten. Die Flexbox hat die Differenz aus dem Wachs gequetscht —
   alle Kerzen wurden dadurch gleich hoch und die per Zufall vergebene
   Wachshoehe war wirkungslos. Jetzt bestimmt der Inhalt die Hoehe, und
   `align-items:flex-end` im Feld stellt alle Kerzen auf eine Linie. */
.candle{
  /* Absolut auf dem Bogen: app.js setzt left/top auf den Standpunkt der
     Kerze; der Ursprung liegt deshalb an ihrem FUSS (translate -100%).
     --skala bildet die Tiefe ab — weiter hinten stehende Kerzen sind
     kleiner. */
  position:absolute;left:0;top:0;
  transform:translate(-50%,-100%) scale(var(--skala,1));
  transform-origin:50% 100%;
  width:var(--spalte,46px);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  /* ⚠️ Nur die gezeichneten Teile nehmen Zeiger an. Die Kerzenbox ist so
     breit wie die Rasterspalte (46-58 px), das Wachs aber nur 24-28 px —
     die durchsichtigen Flanken haetten sonst der dahinterstehenden Kerze
     die Klicks weggenommen. Gemessen waren so 2 bis 9 Kerzen je nach
     Breite nicht mehr anklickbar, obwohl sichtbar. Tastaturbedienung und
     :hover bleiben unberuehrt, weil Zeigerereignisse aus den Kindern
     regulaer an die Kerze hochlaufen. */
  pointer-events:none;
  transition:transform .3s,filter .3s;
  --burn:0;         /* Brennfortschritt 0..1, von JS gesetzt */
  --wax-f:.5;       /* Wachs-Zufallsfaktor 0..1, von JS gesetzt */
  --lift-f:0;       /* leichter Hoehenversatz gegen die Lineal-Optik */
  /* Aus dem Faktor wird hier die tatsaechliche Hoehe. Beide Grenzen sind
     bildschirmabhaengig, die Kerze skaliert dadurch mit. */
  --wax-h:calc(var(--wachs-min,32px) + (var(--wachs-max,56px) - var(--wachs-min,32px)) * var(--wax-f));
  --tone-h:38;      /* Hue-Basis, von data-tone überschrieben */
  --tone-s:78%;
  --tone-l:58%;
}
.candle:hover,
.candle:focus-visible{transform:translate(-50%,calc(-100% - 3px)) scale(var(--skala,1))}
.candle:focus-visible{outline:none;filter:drop-shadow(0 0 6px rgba(242,185,95,.85))}
.candle .wax,
.candle .wick,
.candle .flame{pointer-events:auto}
.candle .wax{
  width:var(--wachs-breite,22px);border-radius:4px 4px 2px 2px;position:relative;flex:none;
  background:linear-gradient(180deg,#f4ead2,#dccba4 70%,#c4b188);
  box-shadow:inset -4px 0 6px rgba(120,95,50,.35),inset 3px 0 5px rgba(255,255,255,.4);
  /* Wachsschrumpfung ueber die Hoehe, nicht ueber scaleY: eine gestauchte
     Transformation hat Verlauf, Rundung und Glanzlicht mitgequetscht, und
     der Docht blieb oben stehen, weil er ausserhalb der Transformation
     liegt. Ueber die Hoehe rutscht die ganze Kerzenspitze mit nach unten.
     Bei --burn=1 bleiben 15 % als Stummel stehen. */
  height:calc(var(--wax-h) - var(--wax-h) * var(--burn) * 0.85);
  transition:height 1.1s linear;
}

/* ---- Farb-Tonungen pro Kerze (drei nahe Amber-Töne) ----
   Die Tone wird per Hash des Namens (data-tone) gestreut. Drei
   Variationen reichen — viel mehr würde unruhig wirken. */
.candle[data-tone="amber"] .wax{
  background:linear-gradient(180deg,#f4ead2 0%,#dccba4 70%,#c4b188 100%);
}
.candle[data-tone="warm"] .wax{
  /* Wärmer: rötlicher Einschlag, etwas dunkleres Beige */
  background:linear-gradient(180deg,#f0d8b0 0%,#d6b78c 70%,#b89a72 100%);
  box-shadow:inset -4px 0 6px rgba(140,80,30,.4),inset 3px 0 5px rgba(255,210,160,.35);
}
.candle[data-tone="pale"] .wax{
  /* Heller: fast weiss, kühler Untergrund */
  background:linear-gradient(180deg,#fbf2dc 0%,#ede0c0 70%,#d8c8a0 100%);
  box-shadow:inset -4px 0 6px rgba(140,120,80,.3),inset 3px 0 5px rgba(255,255,255,.6);
}

/* Der Docht ist Bezugspunkt fuer Flamme und Lichtschein (beide liegen im
   Markup in ihm). Vorher hingen sie am Kerzenkasten und blieben beim
   Abbrennen oben in der Luft stehen, waehrend das Wachs wegschmolz. */
.candle .wick{width:2px;height:clamp(5px,1.4vw,7px);background:#3a2f1e;margin-bottom:-1px;position:relative;z-index:2}
.flame{
  position:absolute;left:50%;bottom:100%;
  width:clamp(11px,3vw,15px);height:clamp(17px,4.6vw,24px);
  transform:translate(-50%, 0) scale(0);
  transform-origin:50% 100%;
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%;
  background:radial-gradient(circle at 50% 78%,#fff8dd 0%,#ffd98a 34%,var(--amber) 58%,rgba(217,120,40,.6) 78%,transparent 92%);
  filter:drop-shadow(0 0 6px rgba(255,205,120,.9));
  transition:transform .9s ease-out;
}
/* Warme Flamme: röterer Kern */
.candle[data-tone="warm"] .flame{
  background:radial-gradient(circle at 50% 78%,#fff0d0 0%,#ffc890 30%,#e89048 56%,rgba(190,90,30,.65) 76%,transparent 92%);
  filter:drop-shadow(0 0 7px rgba(255,180,90,.95));
}
/* Helle Flamme: blasser, fast weiss */
.candle[data-tone="pale"] .flame{
  background:radial-gradient(circle at 50% 78%,#ffffff 0%,#ffe8b0 30%,#f0c878 56%,rgba(210,150,80,.5) 76%,transparent 92%);
  filter:drop-shadow(0 0 8px rgba(255,230,170,.9));
}
.candle.lit .flame{transform:translate(-50%, 0) scale(1);animation:flick 1.5s ease-in-out infinite}
.candle.just .flame{animation:ignite .55s ease-out,flick 1.5s .55s ease-in-out infinite}
@keyframes ignite{from{transform:translate(-50%, 0) scale(0);filter:brightness(2.4) drop-shadow(0 0 14px #ffd98a)}
  to{transform:translate(-50%, 0) scale(1)}}
@keyframes flick{
  0%,100%{transform:translate(-50%, 0) scale(1) rotate(-1.6deg)}
  25%{transform:translate(calc(-50% - 3%), 0) scale(1.05,1.12) rotate(1.8deg)}
  50%{transform:translate(calc(-50% + 2%), 0) scale(.93,.9) rotate(-2.6deg)}
  75%{transform:translate(calc(-50% - 2%), 0) scale(1.04,1.06) rotate(1deg)}
}

/* Halo pulsiert nur, solange die Flamme auch brennt. */
/* Der Lichtschein sass frueher mit 70 px so breit und hell ueber der
   Kerze, dass die Flamme darin verschwand und die Scheine benachbarter
   Kerzen zu einem Band verschmolzen. 54 px und weniger Deckkraft lassen
   jede Kerze wieder als einzelnes Licht lesen. */
.candle .halo{position:absolute;left:50%;bottom:0;
  width:clamp(42px,12vw,58px);height:clamp(42px,12vw,58px);
  transform:translate(-50%,28%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(circle,rgba(255,200,110,.26),rgba(255,190,100,.08) 42%,transparent 70%)}
.candle.lit .halo{opacity:1;animation:halopulse 3s ease-in-out infinite}
@keyframes halopulse{0%,100%{opacity:.75}50%{opacity:1}}

/* Erloschen: kein Halo, kein Flackern, Wachsschatten dunkler. */
.candle.smould .flame,
.candle.stub .flame{transform:translate(-50%,0) scale(0);animation:none}
.candle.smould .halo{opacity:0;animation:none}
.candle.smould .wax{box-shadow:inset -4px 0 6px rgba(120,95,50,.45),inset 3px 0 5px rgba(255,255,255,.25);opacity:.78}
/* Der Stummel ist bei --burn=1 bereits auf 15 % geschrumpft; hier nur noch
   Farbe und Form. Das frueher zusaetzliche scaleY(.15) hat die Hoehe ein
   zweites Mal reduziert und den Rest zu einem Strich gequetscht.
   Etwas breiter und rundum gerundet liest sich der Rest als
   zusammengelaufenes Wachs statt als grauer Balken. */
.candle.stub .wax{
  opacity:.62;border-radius:3px;
  transform:scaleX(1.14);
  background:linear-gradient(180deg,#cfc2a4,#b3a488 70%,#9c8e74);
}
.candle.stub .wick{opacity:.4;height:3px}

/* ---- Cold-Kerze (frisch aufgesetzt, noch nie gebrannt) ----
   Klick auf Stummel ersetzt die Kerze am Platz durch eine cold-Kerze:
   volles Wachs, kein Docht-Rest, aber keine Flamme. Sieht aus wie
   "eine Kerze, die gerade auf den Tisch gestellt wurde". Der Klick
   darauf entzuendet sie. */
.candle.cold .flame,
.candle.cold .halo{transform:translate(-50%,0) scale(0);animation:none;opacity:0}
.candle.cold .wax{box-shadow:inset -4px 0 6px rgba(120,95,50,.25),inset 3px 0 5px rgba(255,255,255,.5);opacity:.95}
.candle.cold .wick{background:#5a4a2e;opacity:.85}

/* ---- Windhauch ----
   Waehrend des Windhauchs wackelt die Flamme dreimal kurz, dann loescht
   sie aus. Die JS-Engine entfernt die .windhauch-Klasse nach 1.6 s und
   ruft dann extinguish() auf, das den normalen Smould-/Stub-Zustand
   herstellt. */
.candle.windhauch .flame{
  animation:windhauch 1.5s ease-in forwards !important;
}
.candle.windhauch .halo{
  animation:halopulse 1.5s ease-in forwards;
  opacity:1;
}
@keyframes windhauch{
  0%   {transform:translate(-50%, 0) scale(1) rotate(0)}
  15%  {transform:translate(-65%, 0) scale(.95,1.1) rotate(-15deg)}
  30%  {transform:translate(-35%, 0) scale(1.1,.85) rotate(18deg)}
  45%  {transform:translate(-70%, 0) scale(.85,1.05) rotate(-22deg)}
  60%  {transform:translate(-30%, 0) scale(1.15,.8) rotate(28deg)}
  75%  {transform:translate(-55%, 0) scale(1.05,.6) rotate(-10deg)}
  85%  {transform:translate(-50%, 0) scale(.7,.4) rotate(5deg)}
  100% {transform:translate(-50%, 0) scale(0) rotate(0)}
}

/* Rauch — kurze Animation beim Erlöschen */
.candle .smoke{position:absolute;left:50%;top:-4px;width:6px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 50% 100%,rgba(220,220,220,.5),transparent 70%);
  transform:translateX(-50%);pointer-events:none;animation:smoke 2.1s ease-out forwards}
@keyframes smoke{
  0%{opacity:.55;transform:translate(-50%,0) scale(.6)}
  60%{opacity:.25}
  100%{opacity:0;transform:translate(calc(-50% + 8px),-44px) scale(1.8)}
}

/* ---- Gedenkstein in der Mitte der Szene ----
   Formensprache bewusst aus der Steinwiese uebernommen (.stone): runde
   Krone, derselbe Steinverlauf, dieselbe Kantenlichtkante. Die Groesse
   setzt app.js ueber --altar-b, damit der Stein zum Innenradius des
   ersten Kerzenbogens passt. Rein bildlich, nicht anklickbar. */
.altar{
  position:absolute;left:50%;top:0;transform:translate(-50%,-100%);
  width:var(--altar-b,120px);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;z-index:40;
}
.altar-stein{
  position:relative;width:100%;
  padding:calc(var(--altar-b,120px) * .17) 10% calc(var(--altar-b,120px) * .1);
  border-radius:999px 999px 5px 5px;
  border:1px solid rgba(233,196,124,.18);border-bottom:none;
  background:linear-gradient(168deg,#3a4741 0%,#2b3833 42%,#202b26 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),inset 0 -14px 24px rgba(0,0,0,.35),
             0 16px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--altar-b,120px) * .05);
  text-align:center;
}
.altar-symbol{
  width:calc(var(--altar-b,120px) * .2);height:calc(var(--altar-b,120px) * .2);
  min-width:14px;min-height:14px;
  fill:none;stroke:var(--amber);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
/* Zu schmaler Stein: die Inschrift entfaellt, das Symbol bleibt. */
.altar.klein .altar-text{display:none}
.altar.klein .altar-symbol{width:38%;height:38%}
.altar-text{
  font-family:var(--serif);font-style:italic;
  font-size:calc(var(--altar-b,120px) * .118);
  line-height:1.1;color:rgba(233,222,199,.62);
  /* Eingravierte Anmutung: heller Grat oben, dunkler Schatten darunter. */
  text-shadow:0 1px 0 rgba(255,255,255,.10),0 -1px 1px rgba(0,0,0,.55);
}
/* Sockel und Grasnarbe, auf der die Kerzen mit stehen. */
.altar-sockel{
  width:112%;height:calc(var(--altar-b,120px) * .1);min-height:8px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#2b3832,#1a2420);
  box-shadow:0 14px 22px rgba(0,0,0,.55);
}
/* Warmer Bodenschein: die Kerzen leuchten den Platz vor dem Stein aus. */
.altar::after{
  content:"";position:absolute;left:50%;bottom:calc(var(--altar-b,120px) * -.16);
  width:260%;height:calc(var(--altar-b,120px) * .55);
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,196,104,.13),transparent 68%);
  z-index:-1;
}

/* ---- Wanderndes Namensschild ----
   In der Halbkreis-Anordnung ueberlagern sich die Boegen; ein Schild an
   jeder Kerze waere unlesbar geworden. Stattdessen folgt ein einzelnes
   Schild der Kerze, die gerade beruehrt, angetippt oder mit der Tastatur
   angesteuert wird. Der Name bleibt fuer Hilfsmittel ueber aria-label an
   jeder Kerze erhalten. */
.namensschild{
  position:absolute;left:0;top:0;transform:translate(-50%,-100%);
  padding:5px 11px;border-radius:999px;pointer-events:none;
  background:rgba(11,19,16,.92);border:1px solid var(--line-strong);
  color:var(--soft);font-size:.72rem;letter-spacing:.04em;font-style:italic;
  white-space:nowrap;opacity:0;transition:opacity .25s;
  /* Ueber allem: die Kerzen tragen z-Werte bis rund 400 (Tiefensortierung). */
  z-index:9999;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.namensschild.an{opacity:1}

.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd98a;pointer-events:none;
  box-shadow:0 0 8px 2px rgba(255,215,138,.8);animation:rise .9s ease-out forwards}
@keyframes rise{to{transform:translate(var(--sx,0),-52px);opacity:0}}

/* ============ PIXEL-TIERE (Klötzchengrafik) ============ */
.petstrip{
  position:relative;height:76px;margin-top:10px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.petstrip::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,174,139,.3),transparent);
}
.pet{position:absolute;bottom:16px;image-rendering:pixelated;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.pet.flip{transform:scaleX(-1)}
.pet-still{image-rendering:pixelated;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.pet-caption{
  margin-top:6px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);text-align:center;opacity:.75
}

/* ============ NAMENS-BAND ============ */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;overflow:hidden;background:var(--bg2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:inline-flex;white-space:nowrap;animation:slide 70s linear infinite;will-change:transform}
.ticker span{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--soft);margin:0 18px}
.ticker i{color:var(--amber);font-style:normal;margin:0 4px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ HINWEISBAND ============ */
.notice{
  display:flex;gap:14px;align-items:flex-start;margin:0 0 32px;padding:14px 16px;
  border:1px dashed var(--line-strong);border-radius:8px;background:rgba(242,185,95,.04);
  font-size:.84rem;color:var(--muted);
}
.notice b{color:var(--amber);font-weight:700}
.notice svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--amber);fill:none;stroke-width:1.7;stroke-linecap:round}

/* ============ GEDENKTAFEL ============ */
.wall-head{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-bottom:32px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  padding:11px 17px;border-radius:999px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;font-family:var(--sans);transition:all .3s;white-space:nowrap;min-height:var(--tap)}
.chip:hover{border-color:var(--line-strong);color:var(--ivory)}
.chip.active{background:var(--amber);border-color:var(--amber);color:#2a1804}
.wall{display:grid;grid-template-columns:1fr;gap:18px}
.memorial{
  background:linear-gradient(175deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:8px;
  padding:24px 22px 18px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s,border-color .35s,box-shadow .35s;position:relative;overflow:hidden;
}
/* Farbkante je Tiergruppe */
.memorial[data-species="hund"]{border-left-color:var(--rose)}
.memorial[data-species="vogel"]{border-left-color:var(--dusk)}
.memorial[data-species="nager"]{border-left-color:var(--lav)}
.memorial[data-species="reptil"]{border-left-color:#7fae6b}
.memorial[data-species="amphib"]{border-left-color:#6fbf9a}
.memorial[data-species="fisch"]{border-left-color:#e0a066}
.memorial[data-species="pferd"]{border-left-color:#c08a5e}
.memorial[data-species="hof"]{border-left-color:#cfc4a6}
.memorial[data-species="wild"]{border-left-color:#b98f5e}
.memorial:hover{transform:translateY(-5px);border-color:var(--line-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(242,185,95,.08)}
.memorial.fresh{animation:freshIn .9s ease both}
@keyframes freshIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.m-top{display:flex;align-items:center;gap:14px}
.m-icon{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,185,95,.08);border:1px solid var(--line-strong)}
.m-icon svg{width:24px;height:24px;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m-top h3{font-size:1.4rem;line-height:1.1}
.m-years{font-size:.72rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.m-text{font-family:var(--serif);font-size:1.08rem;font-style:italic;line-height:1.55;color:var(--soft)}
.m-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;
  border-top:1px dashed var(--line);gap:12px;flex-wrap:wrap}
.m-author{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.m-candle{display:inline-flex;align-items:center;gap:8px;background:rgba(242,185,95,.07);
  border:1px solid var(--line-strong);color:var(--amber);border-radius:999px;cursor:pointer;
  padding:10px 17px;font-size:.8rem;font-weight:600;font-family:var(--sans);position:relative;
  transition:background .3s,transform .3s;min-height:var(--tap)}
.m-candle:hover{background:rgba(242,185,95,.16);transform:scale(1.05)}
.m-candle .mini-flame{width:7px;height:10px}

/* ---- Beitrag-Formular (Mobile-First = 1 Spalte) ---- */
.contribute{margin-top:54px;display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.contribute ul{list-style:none;margin-top:20px;display:grid;gap:16px}
.contribute li{display:flex;gap:14px;color:var(--muted);font-size:.95rem}
.contribute li svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round}
.form-card{background:linear-gradient(175deg,var(--panel),#131f17);border:1px solid var(--line);
  border-radius:10px;padding:26px 22px;position:relative}
.form-card::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:2px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.f-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);font-weight:600}
.f-field input,.f-field select,.f-field textarea{
  background:#0e1712;border:1px solid var(--line);color:var(--ivory);padding:13px 16px;border-radius:6px;
  font-family:var(--sans);font-size:.95rem;transition:border-color .3s,box-shadow .3s;width:100%;min-height:var(--tap)}
.f-field textarea{resize:vertical;min-height:120px;font-family:var(--serif);font-size:1.05rem;font-style:italic;line-height:1.5}
.f-field :is(input,select,textarea):focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,185,95,.15)}
.f-note{font-size:.8rem;color:var(--muted);margin-top:14px;font-style:italic}
.f-hint{font-size:.78rem;color:var(--muted);font-style:italic;line-height:1.45;margin-top:-1px}

/* ============ GRABARTEN (Mobile-First = 1 Spalte) ============ */
.graves{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grave-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px}
.grave{border:1px solid var(--line);border-radius:8px;padding:28px 22px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--panel),rgba(21,34,25,.4));
  transition:transform .35s,border-color .35s,box-shadow .35s}
.grave:hover{transform:translateY(-5px);border-color:var(--gc);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.grave::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,var(--gc),transparent 70%);opacity:.09;transition:opacity .4s}
.grave:hover::after{opacity:.2}
.grave>svg{width:38px;height:38px;stroke:var(--gc);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.grave h3{font-size:1.45rem;margin-bottom:8px}
.grave p{color:var(--muted);font-size:.94rem}
.grave small{display:block;margin-top:14px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gc);opacity:.85}

/* ============ ABLAUF (Mobile-First) ============ */
.steps{display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;position:relative}
.steps::before{display:none}
.step{padding:0;position:relative}
.step-n{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;
  font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--amber);
  background:var(--bg);border:1px solid var(--line-strong);position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--bg);transition:box-shadow .4s,border-color .4s}
.step:hover .step-n{border-color:var(--amber);box-shadow:0 0 0 6px var(--bg),0 0 24px rgba(242,185,95,.35)}
.step h3{font-size:1.3rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.93rem}

/* ============ TROST-TEXTE ============ */
.voices{overflow:hidden}
.voice-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:30px}
.voice{position:relative;padding:20px 0 0 44px}
.voice::before{content:"„";position:absolute;left:0;top:-24px;font-family:var(--serif);
  font-size:5.5rem;line-height:1;color:var(--amber);opacity:.5}
.voice p{font-family:var(--serif);font-size:1.22rem;font-style:italic;line-height:1.5;color:var(--soft)}
.voice footer{margin-top:16px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.voice:nth-child(2){transform:none}

/* ============ UNTERSEITEN-KOPF ============ */
.page-hero{
  position:relative;overflow:hidden;padding:128px 0 62px;
  background:
    radial-gradient(1000px 460px at 70% -20%,rgba(143,176,201,.12),transparent 62%),
    linear-gradient(180deg,#0a1210,#0b1310 70%);
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.1rem,7vw,3.9rem);margin:16px 0 16px}
.crumb{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.crumb a{color:var(--sage)}
.crumb a:hover{color:var(--amber)}

/* ============ GEDENKSTEINE / STEINWIESE ============ */
.stone-toolbar{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-bottom:32px}
.meadow-band{
  position:relative;border:1px solid var(--line);border-radius:12px;padding:38px 22px 56px;
  background:
    radial-gradient(700px 300px at 20% 0%,rgba(143,174,139,.10),transparent 60%),
    linear-gradient(180deg,rgba(17,28,22,.85),rgba(11,19,16,.95));
  overflow:hidden;
}
.stones{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:38px 18px;align-items:end;position:relative;z-index:2;
}
.plot{display:flex;flex-direction:column;align-items:center;gap:0}
.stone{
  position:relative;width:100%;max-width:220px;cursor:pointer;text-align:center;
  padding:30px 18px 24px;border-radius:110px 110px 6px 6px;
  border:1px solid rgba(233,196,124,.16);border-bottom:none;
  background:linear-gradient(168deg,#3a4741 0%,#2b3833 42%,#202b26 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),inset 0 -14px 24px rgba(0,0,0,.35),0 16px 30px rgba(0,0,0,.45);
  transition:transform .35s,box-shadow .35s,border-color .35s;
  font-family:var(--sans);
}
.stone:hover,.stone:focus-visible{
  transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.09),inset 0 -14px 24px rgba(0,0,0,.3),
             0 24px 44px rgba(0,0,0,.55),0 0 30px rgba(242,185,95,.12);
}
.stone .st-mark{width:26px;height:26px;margin:0 auto 12px;stroke:var(--amber);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.stone .st-name{
  font-family:var(--serif);font-size:1.55rem;font-weight:700;line-height:1.1;color:#e7e1cd;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.09);
  overflow-wrap:anywhere;
}
.stone .st-years{margin-top:6px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#9aa895}
.stone .st-rip{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:.95rem;color:#8d9a88}
.stone .st-flame{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:12px;height:18px;
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at 50% 78%,#fff8dd 0%,#ffd98a 34%,var(--amber) 58%,transparent 88%);
  filter:drop-shadow(0 0 7px rgba(255,205,120,.9));
}
.stone.lit .st-flame{opacity:1;animation:flick 1.5s ease-in-out infinite}
.plot .base{
  width:100%;max-width:220px;height:14px;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#2b3832,#1a2420);
  box-shadow:0 12px 18px rgba(0,0,0,.5);
}
.plot .turf{
  width:100%;max-width:240px;height:44px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(143,174,139,.20),transparent 70%);
}
.plot:nth-child(odd) .turf{justify-content:flex-start;padding-left:16%}
.plot:nth-child(even) .turf{justify-content:flex-end;padding-right:16%}
.meadow-band .hills{opacity:.45;z-index:0}
.stone-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);font-style:italic;
  padding:32px 0;font-family:var(--serif);font-size:1.1rem
}

/* ---- Detailblatt ---- */
dialog.sheet{
  margin:auto;
  border:1px solid var(--line-strong);border-radius:12px;padding:0;max-width:560px;width:calc(100% - 40px);
  background:linear-gradient(175deg,var(--panel),#101a14);color:var(--ivory);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
dialog.sheet::backdrop{background:rgba(5,9,7,.78);backdrop-filter:blur(3px)}
.sheet-in{padding:26px 22px 22px}
.sheet-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.sheet-top .m-icon{width:52px;height:52px}
.sheet-top h3{font-size:1.7rem}
.sheet-text{font-family:var(--serif);font-size:1.15rem;font-style:italic;line-height:1.55;color:var(--soft)}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.sheet-close{background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  border-radius:999px;padding:8px 18px;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:all .3s;min-height:var(--tap)}
.sheet-close:hover{border-color:var(--amber);color:var(--ivory)}

/* ---- Beileid ---- */
.beileid{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.beileid .cb{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-size:.92rem;color:var(--soft);user-select:none}
.beileid .cb input{
  appearance:none;width:22px;height:22px;flex:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:4px;background:#0e1712;
  transition:background .25s,border-color .25s;position:relative;
}
.beileid .cb input:checked{background:var(--amber);border-color:var(--amber)}
.beileid .cb input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:7px;height:12px;
  border:solid #221604;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.beileid .cb em{font-style:italic;color:var(--amber)}
.beileid-feld{margin-top:14px;display:grid;gap:8px}
.beileid-feld[hidden]{display:none}
.beileid-feld input{
  background:#0e1712;border:1px solid var(--line);color:var(--ivory);
  padding:12px 15px;border-radius:6px;font-family:var(--sans);font-size:.95rem;
  transition:border-color .3s,box-shadow .3s;width:100%;min-height:var(--tap);
}
.beileid-feld input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--glow)}
.beileid-ok{
  margin:16px 0 0;padding:14px 18px;border-radius:8px;font-size:.86rem;line-height:1.5;
  border:1px dashed var(--line-strong);background:rgba(242,185,95,.05);color:var(--muted);
}
.beileid-ok b{color:var(--amber)}

/* ============ FLIESSTEXT (Impressum / Datenschutz) ============ */
.prose{max-width:74ch;padding-bottom:20px}
.prose h2{font-size:clamp(1.5rem,5vw,2.1rem);margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.22rem;margin:26px 0 8px;color:var(--soft)}
.prose p{color:var(--muted);margin-bottom:14px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 18px 22px;display:grid;gap:8px}
.prose li{padding-left:4px}
.prose strong{color:var(--ivory);font-weight:600}
.prose a{color:var(--amber);border-bottom:1px solid rgba(242,185,95,.35)}
.prose a:hover{border-bottom-color:var(--amber)}
.prose address{font-style:normal;color:var(--soft);line-height:1.8;margin-bottom:16px}
.prose .updated{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
  margin-top:48px;padding-top:18px;border-top:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.prose th{color:var(--sage);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.tablewrap{overflow-x:auto}

/* ============ FOOTER ============ */
footer.site{border-top:1px solid var(--line);background:#080e0b;padding:54px 0 28px}
.ft-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:36px}
.ft-grid h4{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.ft-grid ul{list-style:none;display:grid;gap:4px}
/* Eigenstaendige Navigationsziele: mindestens 24 px hoch (WCAG 2.5.8),
   auf Zeigergeraeten ebenso. Vorher waren es 21 px reine Zeilenhoehe.
   Der Zeilenabstand der Liste wandert dafuer in die Innenabstaende, damit
   die Fusszeile optisch gleich bleibt. */
.ft-grid a{
  color:var(--muted);font-size:.92rem;transition:color .3s;
  display:inline-block;padding:5px 0;min-height:24px;
}
.ft-grid a:hover{color:var(--amber)}
.ft-grid p{color:var(--muted);font-size:.92rem;max-width:38ch}
.ft-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:10px;
  font-size:.78rem;color:#5f6d59;letter-spacing:.06em}

/* ---- Spendenhinweis ---- */
.donate{
  border-top:1px solid var(--line);padding:28px 0 24px;margin-bottom:8px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.donate h4{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin:0}
.donate .btn{padding:13px 26px}
.donate p{color:var(--muted);font-size:.86rem;max-width:62ch;margin:0}
.donate .recipient{font-size:.8rem;color:#7d8a76;font-style:italic}

/* ============ TOAST ============ */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);z-index:99;
  background:#1c2a20;border:1px solid var(--amber);color:var(--ivory);padding:12px 22px;border-radius:999px;
  font-size:.88rem;display:flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .4s;pointer-events:none;
  max-width:calc(100% - 32px)}
#toast.show{transform:translate(-50%,0);opacity:1}

/* ==========================================================================
   TABLET (≥ 720 px)
   ========================================================================== */
@media (min-width:720px){
  .wrap{padding:0 26px}
  .logo{font-size:1.35rem;gap:11px}
  .hstat b{font-size:1.7rem}
  .hstat span{font-size:.72rem}
  .chip{padding:8px 15px;font-size:.72rem}
  .m-candle{padding:7px 15px}
  .f-row{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .form-card{padding:32px 30px}
  .notice{padding:16px 22px;font-size:.88rem}
  .grave{padding:32px 28px}
  .stones{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:46px 22px}
  .meadow-band{padding:46px 30px 64px}
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr;gap:42px;margin-bottom:46px}
  .ft-bottom{flex-direction:row;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .steps::before{
    content:"";position:absolute;top:27px;left:8%;right:8%;height:1px;display:block;
    background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent);
  }
  .step-n{width:54px;height:54px;font-size:1.35rem;box-shadow:0 0 0 8px var(--bg)}
  .step:hover .step-n{box-shadow:0 0 0 8px var(--bg),0 0 24px rgba(242,185,95,.35)}
}

/* ==========================================================================
   DESKTOP (≥ 960 px)
   ========================================================================== */
@media (min-width:960px){
  .moon{
    position:absolute;top:9%;right:12%;width:86px;height:86px;border-radius:50%;display:block;
    background:radial-gradient(circle at 38% 35%,#fdf6e3,#e8dcb8 60%,#cbbf9a);
    box-shadow:0 0 60px 18px rgba(244,238,219,.14),0 0 140px 60px rgba(244,238,219,.05);
  }
  .meadow{min-height:100vh;align-items:center;padding:150px 0 40px}
  .page-hero{padding:190px 0 90px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .hero-grid h1{font-size:clamp(2.7rem,5.6vw,4.7rem);margin:20px 0 22px}
  .hero-btns{flex-direction:row;margin-top:32px}
  .btn{width:auto}
  .hero-stats{gap:44px;margin-top:52px}
  .hstat b{font-size:2.1rem}
  .hstat span{font-size:.72rem}
  .field-shell{order:0}
  .dedicate{flex-direction:row;margin-top:22px}
  .dedicate input{min-width:220px}
  .dedicate .btn{width:auto}
  .candle-badge{padding:8px 16px;font-size:.8rem;gap:9px}
  .candle-badge .lbl{display:inline}

  nav{display:flex;position:static;flex-direction:row;gap:28px;padding:0;
    background:transparent;border:0;box-shadow:none;backdrop-filter:none}
  nav a{padding:4px 0;border-bottom:none;font-size:.82rem;letter-spacing:.14em}
  nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--amber);transition:width .35s;display:block}
  nav a:hover{color:var(--ivory)}
  nav a:hover::after{width:100%}
  nav a.here{background:transparent}

  .navtoggle{display:none}

  header.site{background:transparent;backdrop-filter:none;box-shadow:none;padding:16px 0}
  header.site.scrolled{background:rgba(9,15,12,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);padding:10px 0}

  .wall{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
  .memorial{padding:26px 26px 20px}
  .m-top h3{font-size:1.5rem}

  .contribute{grid-template-columns:1fr 1.1fr;gap:56px;margin-top:70px}
  .steps{grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px}
  .voice-grid{grid-template-columns:1fr 1fr;gap:60px;margin-top:30px}
  .voice{padding:20px 0 0 60px}
  .voice::before{font-size:6.5rem}
  .voice p{font-size:1.35rem}
  .voice:nth-child(2){transform:translateY(56px)}
  .grave-grid{grid-template-columns:repeat(12,1fr);gap:20px;margin-top:46px}
  .g1{grid-column:span 7} .g2{grid-column:span 5}
  .g3{grid-column:span 5} .g4{grid-column:span 7}

  .stone-toolbar{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:40px}

  dialog.sheet{max-height:none;overflow:visible}
  .sheet-in{padding:34px 34px 28px}
  .sheet-top h3{font-size:1.9rem}
  .sheet-text{font-size:1.2rem;line-height:1.6}

  #toast{left:50%;bottom:30px}
}

@media (min-width:420px) and (max-width:719.98px){
  /* Mini-Smartphones bleiben in Spalte 1, aber Hero-Buttons dürfen wieder
     nebeneinander stehen, wenn es die Breite hergibt. */
  .hero-btns{flex-direction:row;flex-wrap:wrap}
  .hero-btns .btn{flex:1 1 auto}
}

/* Reduzierte Bewegung — auf einer Gedenkseite besonders wichtig.
   Kerzen bleiben in voller Höhe, flackern minimal, Rauch wird unterdrückt. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  .ticker-track{animation:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  /* Die Wachshoehe bleibt korrekt — sie ist Information, keine Animation;
     nur der Uebergang dorthin wird durch die Regel oben unterdrueckt.
     (Die frueher hier stehende Regel setzte das Wachs auf volle Hoehe und
     liess heruntergebrannte Kerzen wie frische aussehen.)
     Das Flackern bleibt erlaubt, aber stark verlangsamt — dafuer ist das
     !important noetig, sonst gewinnt die pauschale Regel am Blockanfang. */
  .candle .smoke{display:none}
  .candle.lit .flame{animation:flick 4s ease-in-out infinite !important}
}

/* ==========================================================================
   ORTE DES GEDENKENS — vier Grabarten
   Jede Grabart färbt über eine Themenklasse nur die Variablen um. Aufbau,
   Abstände und Typografie bleiben identisch.
   ========================================================================== */

.t-wiese{
  --amber:#a9c98a; --amber-deep:#5f8a48; --glow:rgba(169,201,138,.42);
  --line:rgba(169,201,138,.15); --line-strong:rgba(169,201,138,.32);
  --sage:#8fae8b; --soft:#cdd8c4;
}
.t-baum{
  --amber:#d9a86b; --amber-deep:#9a6a34; --glow:rgba(217,168,107,.42);
  --line:rgba(217,168,107,.15); --line-strong:rgba(217,168,107,.32);
  --sage:#a89468; --soft:#dcd3c1;
}
.t-stern{
  --amber:#aab8e4; --amber-deep:#5f6ea8; --glow:rgba(170,184,228,.42);
  --line:rgba(170,184,228,.15); --line-strong:rgba(170,184,228,.32);
  --sage:#8f9ac0; --soft:#ccd2e4;
}
.t-licht{
  --amber:#f2b95f; --amber-deep:#c9762a; --glow:rgba(242,185,95,.45);
  --line:rgba(242,185,95,.16); --line-strong:rgba(242,185,95,.34);
  --sage:#b39a70; --soft:#e2d7c2;
}

body.t-wiese{--bg:#08120c; --bg2:#0b1710; --panel:#111f16; --panel2:#16281c}
body.t-baum {--bg:#100d09; --bg2:#15110c; --panel:#1d1811; --panel2:#241d14}
body.t-stern{--bg:#070a12; --bg2:#0a0e18; --panel:#111524; --panel2:#161b2e}
body.t-licht{--bg:#100c07; --bg2:#15100a; --panel:#1e170e; --panel2:#251d12}

.grave-hero{
  position:relative;overflow:hidden;
  min-height:min(72vh,560px);display:flex;align-items:flex-end;
  padding:128px 0 48px;border-bottom:1px solid var(--line);
}
.grave-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.grave-hero .wrap{position:relative;z-index:3}
.grave-hero .schleier{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 34%,transparent 55%,var(--bg) 97%);
}
.grave-hero h1{font-size:clamp(2.4rem,7vw,4.2rem);margin:16px 0 20px}
.grave-hero .lead{max-width:60ch}
.grave-hero .hero-btns{margin-top:30px}

body.t-wiese .grave-hero{background:
  radial-gradient(900px 460px at 22% 108%,rgba(143,190,120,.16),transparent 62%),
  radial-gradient(760px 420px at 82% -8%,rgba(120,160,140,.10),transparent 60%),
  linear-gradient(180deg,#060f0a,#08120c 72%)}
body.t-baum .grave-hero{background:
  radial-gradient(820px 440px at 74% -6%,rgba(217,168,107,.13),transparent 62%),
  radial-gradient(900px 500px at 14% 106%,rgba(120,92,54,.16),transparent 62%),
  linear-gradient(180deg,#0d0a07,#100d09 72%)}
body.t-stern .grave-hero{background:
  radial-gradient(1000px 520px at 68% -14%,rgba(120,140,210,.14),transparent 62%),
  radial-gradient(700px 380px at 10% 104%,rgba(80,96,150,.12),transparent 62%),
  linear-gradient(180deg,#05070f,#070a12 74%)}
body.t-licht .grave-hero{background:
  radial-gradient(880px 460px at 50% 112%,rgba(242,185,95,.16),transparent 62%),
  radial-gradient(680px 360px at 84% -6%,rgba(201,118,42,.10),transparent 60%),
  linear-gradient(180deg,#0c0905,#100c07 74%)}

.krone{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.krone svg{width:100%;height:100%}

.facts{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px}
.fact{
  border:1px solid var(--line);border-radius:10px;padding:26px 22px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--panel),rgba(0,0,0,.18));
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.fact:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 16px 34px rgba(0,0,0,.42)}
.fact svg{width:34px;height:34px;stroke:var(--amber);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.fact h3{font-size:1.3rem;margin-bottom:6px}
.fact p{color:var(--muted);font-size:.93rem}

.orte{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px}
.ort{
  position:relative;overflow:hidden;display:block;
  border:1px solid var(--line);border-radius:12px;padding:28px 24px 24px;
  background:linear-gradient(168deg,var(--panel),rgba(0,0,0,.22));
  transition:transform .4s,border-color .4s,box-shadow .4s;
}
.ort::before{
  /* Akzent-Linie links — wird durch die Themenklasse eingefärbt. */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--amber);opacity:.85;pointer-events:none;
}
.ort:hover{transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 22px 46px rgba(0,0,0,.5),0 0 0 1px rgba(242,185,95,.08)}
.ort-glanz{
  position:absolute;right:-60px;top:-60px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,var(--amber),transparent 68%);
  opacity:.08;transition:opacity .45s;pointer-events:none;
}
.ort:hover .ort-glanz{opacity:.2}
.ort-kopf{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  position:relative;z-index:2;
}
.ort-symbol{
  flex:none;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;
  background:rgba(242,185,95,.10);border:1px solid var(--line-strong);
  color:var(--amber);
}
.ort-symbol svg{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ort-zahl{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--amber);
  font-family:var(--serif);font-size:1.05rem;font-weight:700;
}
.ort h3{font-size:1.55rem;margin-bottom:6px;position:relative;z-index:2}
.ort-claim{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--amber);
  margin-bottom:14px;position:relative;z-index:2}
.ort-merkmale{list-style:none;display:grid;gap:6px;margin:0 0 18px;padding:0;
  position:relative;z-index:2}
.ort-merkmale li{
  display:flex;align-items:flex-start;gap:10px;color:var(--soft);
  font-size:.92rem;line-height:1.45;
}
.ort-punkt{
  flex:none;display:block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-top:8px;opacity:.85;
}
.ort-fuss{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:14px;border-top:1px dashed var(--line);
  position:relative;z-index:2;
}
.ort small{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);opacity:.85}
.ort-pfeil{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(242,185,95,.10);border:1px solid var(--line-strong);
  color:var(--amber);font-size:1rem;line-height:1;
  transition:transform .35s,background .35s,border-color .35s;
}
.ort:hover .ort-pfeil{
  background:rgba(242,185,95,.22);border-color:var(--amber);
  transform:translateX(4px);
}

.grave-cta{
  border:1px solid var(--line);border-radius:12px;padding:34px 22px;text-align:center;
  background:linear-gradient(170deg,var(--panel),rgba(0,0,0,.2));
}
.grave-cta h2{margin-top:0}
.grave-cta .lead{margin:0 auto 24px}

/* ---- Erklaerungs-Sektion auf graeber.html ----
   Pro Grabart ein Block (Header mit Marke + Claim, dann 3 .fact-Karten).
   Bestehende .facts/.fact-Regeln (Mobile-First, 1-spaltig / 3-spaltig ab
   720 px) werden wiederverwendet — wir liefern nur den Container und
   die Marke. */
.graves-erklaerung{
  /* Dunkler als die umgebenden Sektionen, damit die .fact-Karten
     mit ihrem --panel-Hintergrund sichtbar abheben. */
  background:#070d0a;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.graves-erklaerung .fact p{color:var(--soft)}
.fact-block{
  margin-top:64px;
  position:relative;
  padding-left:18px;
}
.fact-block::before{
  /* Akzent-Linie links, faerbt sich ueber die Themenklasse des
     ersten .ort-marke im Block. */
  content:"";position:absolute;left:0;top:6px;bottom:18px;width:3px;
  background:var(--amber);opacity:.85;
}
.fact-block:has(.ort-marke.t-wiese)::before{background:#a9c98a}
.fact-block:has(.ort-marke.t-baum)::before{background:#d9a86b}
.fact-block:has(.ort-marke.t-stern)::before{background:#aab8e4}
.fact-block:has(.ort-marke.t-licht)::before{background:#f2b95f}
.fact-block-kopf{
  display:flex;flex-direction:column;gap:10px;margin-bottom:30px;
  padding-bottom:22px;border-bottom:1px dashed var(--line);
}
.ort-marke{
  display:inline-flex;align-items:center;gap:16px;
  padding:0 22px 0 0;
  text-decoration:none;
  align-self:flex-start;
  transition:transform .3s;
  font-family:var(--sans);
}
.ort-marke:hover{transform:translateX(2px)}
.ort-marke-zahl{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--amber);color:#2a1804;
  font-family:var(--serif);font-size:1.5rem;font-weight:700;flex:none;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.ort-marke.t-baum .ort-marke-zahl{background:#d9a86b}
.ort-marke.t-stern .ort-marke-zahl{background:#aab8e4}
.ort-marke.t-licht .ort-marke-zahl{background:#f2b95f}
.ort-marke-name{
  font-family:var(--serif);font-size:2.5rem;font-weight:600;
  letter-spacing:.005em;line-height:1.1;color:var(--ivory);
}
.ort-marke:hover .ort-marke-name{color:var(--amber)}
.fact-block-claim{
  font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--soft);margin:0;line-height:1.45;
}
.fact-block + .fact-block{margin-top:72px}
@media (min-width:720px){
  .fact-block-kopf{flex-direction:row;align-items:center;gap:28px}
  .ort-marke{align-self:auto}
  .fact-block-claim{flex:1;text-align:right;margin:0}
}
@media (min-width:960px){
  .ort-marke-name{font-size:3.4rem}
  .ort-marke-zahl{width:60px;height:60px;font-size:1.7rem}
  .fact-block-claim{font-size:1.45rem}
}

/* Sektionsueberschrift "Drei Dinge, die jeden Ort beschreiben." —
   bewusst kleiner als die Block-Header, damit die Hierarchie
   h2 (Sektion, klein) > h3 (Block, gross) > h3 (Card, mittel) stimmt. */
.graves-erklaerung h2{
  font-size:clamp(1.6rem,4.2vw,2.2rem);
  margin:14px 0 12px;
}
.graves-erklaerung h2 .accent{font-style:italic;color:var(--amber);font-weight:500}
.graves-erklaerung .fact h3{font-size:1.4rem;margin-bottom:8px}
.graves-erklaerung .fact p{font-size:1rem;line-height:1.5}

/* ---- Vorschau der vier Orte auf der Startseite ----
   Die Karten sind die Eingangstür zu den Grabseiten — sie verdienen
   mehr Gewicht als eine beiläufige Aufzählung: größere Szene, eigenes
   Symbol, drei Merkmale, prominenter Ruhenden-Block, CTA-Button. */
.vorschau{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px}
.vs{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(170deg,var(--panel),rgba(0,0,0,.24));
  transition:transform .4s,border-color .4s,box-shadow .4s;
}
.vs::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--amber);opacity:.85;pointer-events:none;
}
.vs:hover{transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 22px 46px rgba(0,0,0,.5),0 0 0 1px rgba(242,185,95,.08)}
.vs-bild{position:relative;height:200px;overflow:hidden;background:rgba(0,0,0,.32);
  border-bottom:1px solid var(--line)}
.vs-bild canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vs-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 40%,var(--panel) 99%);
}
.vs-text{padding:20px 22px 22px;position:relative;z-index:2;flex:1;display:flex;flex-direction:column;gap:14px}
.vs-kopf{display:flex;gap:14px;align-items:flex-start}
.vs-symbol{
  flex:none;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;
  background:rgba(242,185,95,.10);border:1px solid var(--line-strong);
  color:var(--amber);
}
.vs-symbol svg{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vs-titel{flex:1;min-width:0}
.vs h3{font-size:1.5rem;margin-bottom:4px}
.vs h3 a{transition:color .3s}
.vs:hover h3 a{color:var(--amber)}
.vs-claim{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--amber);margin:0}
.vs-merkmale{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.vs-merkmale li{
  display:flex;align-items:flex-start;gap:10px;color:var(--soft);
  font-size:.92rem;line-height:1.45;
}
.vs-punkt{
  flex:none;display:block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-top:8px;opacity:.85;
}
.vs-ruhen{
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.vs-pets{display:flex;gap:6px;align-items:flex-end}
.vs-namen{font-size:.85rem;color:var(--soft);font-family:var(--serif);font-style:italic;line-height:1.45}
.vs-namen b{font-style:normal;font-family:var(--sans);color:var(--amber);font-weight:700}
.vs-mehr{
  margin-top:6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;width:100%;justify-content:center;
}
.vs-mehr::after{content:" →";transition:transform .3s;display:inline-block}
.vs:hover .vs-mehr::after{transform:translateX(4px)}

/* ---- Tier-Streicheln ---- */
.petstrip{pointer-events:none}
.pet,.pet-still{pointer-events:auto;cursor:pointer;transition:filter .25s}
.pet:hover,.pet-still:hover,.pet:focus-visible,.pet-still:focus-visible{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) brightness(1.18)
}
.pet.gestreichelt,.pet-still.gestreichelt{
  filter:drop-shadow(0 0 10px rgba(255,170,200,.85)) brightness(1.45);
  animation:schmusen .62s ease-out
}
@keyframes schmusen{
  0%{transform:translateY(0)}
  30%{transform:translateY(-3px)}
  60%{transform:translateY(0)}
}
.pet.gestreichelt{animation:none}
.pet-herz{
  position:fixed;width:18px;height:18px;pointer-events:none;z-index:250;
  transform:translate(-50%,0);
  animation:herzauf var(--dauer,1.8s) cubic-bezier(.3,.65,.4,1) forwards;
  background:
    radial-gradient(circle at 30% 32%,#ffb3cd 0 42%,transparent 43%),
    radial-gradient(circle at 70% 32%,#ffb3cd 0 42%,transparent 43%),
    linear-gradient(#ffb3cd,#ffb3cd);
  clip-path:polygon(50% 100%,0 38%,0 18%,14% 0,36% 0,50% 16%,64% 0,86% 0,100% 18%,100% 38%);
  filter:drop-shadow(0 0 6px rgba(255,150,190,.7))
}
@keyframes herzauf{
  0%  {opacity:0;transform:translate(-50%,4px) scale(.45)}
  12% {opacity:1;transform:translate(-50%,calc(var(--hoch,-120px)*.06)) scale(1.15)}
  55% {opacity:.95;transform:translate(calc(-50% + 9px),calc(var(--hoch,-120px)*.55)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% - 5px),var(--hoch,-120px)) scale(.8)}
}
.plot .turf{position:relative}

@media (min-width:720px){
  .facts{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
  .fact{padding:30px 28px}
  .orte{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
  .ort{padding:32px 28px 26px}
  .ort h3{font-size:1.7rem}
  .ort-symbol{width:52px;height:52px}
  .ort-symbol svg{width:28px;height:28px}
  .ort-zahl{width:40px;height:40px;font-size:1.15rem}
  .vorschau{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:46px}
  .vs-bild{height:240px}
  .vs-text{padding:22px 26px 24px}
  .vs h3{font-size:1.6rem}
  .vs-symbol{width:52px;height:52px}
  .vs-symbol svg{width:28px;height:28px}
  .vs-mehr{font-size:.85rem;padding:14px 24px}
}
@media (min-width:960px){
  /* Kerzenfeld braucht hier keine eigenen Werte mehr: Spaltenmass,
     Wachshoehe, Flamme, Lichtschein und Schild wachsen ueber clamp()
     stufenlos mit und haben ihre Obergrenze bereits erreicht. */
  .grave-hero{min-height:min(78vh,720px);padding:180px 0 66px}
  .grave-cta{padding:46px 40px}
}