@charset "UTF-8";
/* ============================================================================
   HECKENPENNER - gemeinsames Stylesheet fuer Start-, Spenden- und Hilfe-Seite
   Alles lokal, keine Web-Fonts, keine externen Ressourcen.
   Farben sind aus den Splash-Bildern des eigenen Loading-Screen-Mods abgeleitet:
   nasses Blaugruen, Neongruen der Marke, getrocknetes Blut, Feuer-Bernstein.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root{
  /* Grund: fast schwarz mit Gruenstich, nie reines Schwarz */
  --grund:        #0a0e0c;
  --grund-tief:   #060908;
  --flaeche:      #0e1412;
  --flaeche-hoch: #131b18;

  /* Akzent 1 - Giftgruen der Server-Marke (Signal, Links, Buttons) */
  --gift:      #5cc832;
  --gift-matt: #8fbf6d;
  --gift-tief: #2b5a1b;
  --gift-hauch: rgba(92,200,50,.13);
  /* Hellste Stufe derselben Farbe - ausschliesslich fuer kleine Schrift, die
     auf einem Bild liegt. --gift-matt kommt dort nur auf rund 4,2:1; dieselbe
     Farbe eine Stufe heller schafft 5,7:1, ohne dass man dafuer das Motiv
     wegdunkeln muesste. */
  --gift-blass: #b3d98f;

  /* Akzent 2 - getrocknetes Blut (Warnung, Hover - sparsam) */
  --blut:      #7e1c14;
  --blut-hell: #b2392c;

  /* Akzent 3 - Bernstein/Feuer (nur einzelne Glueh-Effekte) */
  --bernstein: #d98829;

  /* Text - gebrochenes Weiss, Fliesstext mit reduzierter Deckkraft */
  --knochen:    #e8eae2;
  --text:       rgba(232,234,226,.78);
  --text-leise: rgba(232,234,226,.58);

  --linie:      rgba(143,191,109,.16);
  --linie-hart: rgba(143,191,109,.34);

  /* Schrift: ausschliesslich systemseitig vorhandene Familien */
  --schrift-display: Impact, Haettenschweiler, "Franklin Gothic Heavy",
                     "Arial Narrow Bold", "Arial Black", sans-serif;
  --schrift-text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;

  --breite: 1120px;
  --breite-eng: 780px;

  /* Seit 2026-08-20 sind alle Motive 1920x1080, also volles 16:9 (1,778:1).
     Der frueher noetige Zwangsschnitt auf 1860x640 ist weg - damit passen die
     Bilder erstmals zum Format der Bildschirme, auf denen sie liegen.
     --bild-voll ist die Hoehe, bei der ein Motiv die volle Viewport-Breite
     formatfuellend ausfuellt: 100/1,778 = 56,25vw. Bewusst auf 56vw
     abgerundet, damit die Scrollbalken-Breite (vw rechnet sie mit, der Kasten
     hat sie nicht) nicht zu einem Blaettchen Fueller oben und unten fuehrt.
     Zwei Deckel:
       78vh   - Band und Fuss sind Nebenflaechen. Ein Trenner, der hoeher ist
                als der Hero (92svh), waere die falsche Rangfolge. Was der
                Deckel an Bildbreite kostet, faengt der Blur-Rand auf.
       1080px - native Bildhoehe, darueber wird nicht hochskaliert. */
  --bild-voll: min(56vw,78vh,1080px);

  /* Gerissene Sektionskanten statt gerader Schnitte */
  --riss-oben: polygon(
      0 14px, 4% 5px, 9% 16px, 14% 3px, 20% 13px, 26% 4px, 33% 15px, 39% 6px,
      46% 17px, 52% 4px, 59% 14px, 65% 3px, 72% 15px, 78% 7px, 85% 16px,
      91% 4px, 96% 12px, 100% 6px, 100% 100%, 0 100%);
  --riss-beide: polygon(
      0 14px, 4% 5px, 9% 16px, 14% 3px, 20% 13px, 26% 4px, 33% 15px, 39% 6px,
      46% 17px, 52% 4px, 59% 14px, 65% 3px, 72% 15px, 78% 7px, 85% 16px,
      91% 4px, 96% 12px, 100% 6px,
      100% calc(100% - 8px), 95% calc(100% - 16px), 89% calc(100% - 4px),
      82% calc(100% - 14px), 75% calc(100% - 5px), 68% calc(100% - 15px),
      61% calc(100% - 3px), 54% calc(100% - 13px), 47% calc(100% - 5px),
      40% calc(100% - 16px), 33% calc(100% - 4px), 26% calc(100% - 14px),
      19% calc(100% - 6px), 12% calc(100% - 15px), 6% calc(100% - 3px),
      0 calc(100% - 12px));
}

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

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

body{
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift-text);
  font-size:clamp(15.5px,1.05vw + 12px,17.5px);
  line-height:1.75;
  overflow-x:hidden;
  min-height:100vh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}

::selection{background:var(--gift-tief);color:var(--knochen)}

/* Fokus bleibt sichtbar - ueberall, auch auf Bildern */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gift);
  outline-offset:3px;
  border-radius:1px;
}

/* ------------------------------------------- Filmkorn + Scanlines global */
/* Zwei getrennte, fixierte Schichten. Sie liegen ueber allem, nehmen aber
   keine Klicks an. Bewusst schwach - das Bild soll koernig wirken, nicht
   verschmutzt. */
.korn,.zeilen{position:fixed;inset:0;pointer-events:none;z-index:60}

.korn{
  opacity:.13;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:korn-flackern 1.1s steps(4) infinite;
}
@keyframes korn-flackern{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(-2%,1%,0)}
  50% {transform:translate3d(1%,-2%,0)}
  75% {transform:translate3d(-1%,-1%,0)}
  100%{transform:translate3d(0,0,0)}
}

.zeilen{
  /* .30 war zu viel: die Linien liegen alle 3px und zaehlen als weitere
     dunkle Schicht ueber dem ohnehin schon gedaempften Bild mit. */
  opacity:.22;
  background-image:repeating-linear-gradient(
     to bottom,
     rgba(0,0,0,.34) 0 1px,
     transparent 1px 3px);
}

/* ------------------------------------------------------------- Typografie */
h1,h2,h3,.marke,.knopf,.fakt-wert,.kasten-titel,th{
  font-family:var(--schrift-display);
  font-weight:400;
  text-transform:uppercase;
}

h1{
  font-size:clamp(52px,12.5vw,150px);
  line-height:.86;
  letter-spacing:.005em;
  color:var(--knochen);
}
/* Schrift mit Textur: Verlauf durch die Buchstaben.
   color bleibt als Rueckfall stehen, falls background-clip fehlt. */
.textur{
  background-image:linear-gradient(178deg,
      #f2f4ec 0%, #d8ddd0 38%, #9fae95 78%, #7d8b74 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--knochen);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.85));
}
.gruen{
  color:var(--gift);
  background-image:linear-gradient(178deg,#b3f08d 0%,#5cc832 55%,#37811f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(92,200,50,.4)) drop-shadow(0 4px 18px rgba(0,0,0,.9));
}

h2{
  font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.04em;
  color:var(--knochen);
  line-height:1.1;
}
h3{
  font-size:clamp(16px,1.8vw,19px);
  letter-spacing:.1em;
  color:var(--gift-matt);
}

/* Kleines Label ueber Abschnitten - Funkspruch-Optik */
.label{
  display:inline-block;
  font-family:var(--schrift-mono);
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gift-matt);
}
/* Auf Bildflaechen eine Stufe heller und mit Schatten hinterlegt: 10-12px mit
   grossem Buchstabenabstand ist das empfindlichste Textelement der Seite, und
   im Startbild steht es ausgerechnet ueber dem hellen Strassennebel.
   Gemessen 2,95:1 vorher, 5,7:1 jetzt. */
.bild-flaeche .label{
  color:var(--gift-blass);
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.8);
}

p{margin:14px 0}
strong{color:var(--knochen);font-weight:600}

a{color:var(--gift);text-decoration:none}
a:hover{color:var(--gift-matt)}

/* ------------------------------------------------------------ Bildschicht */
/* Vollflaechiges Bild + mehrschichtiges Overlay. Die Overlays sind so
   gestapelt, dass Text an jeder Stelle vor mindestens einer dunklen Schicht
   steht: Vignette aussen, Bodenverlauf unten, Gruenschleier gesamt.
   -------------------------------------------------------------------------
   Die Motive sind 1920x1080 (16:9). Sie liegen in zwei Schichten uebereinander
   - eine Konstruktion, die aus der Zeit der alten 2,906:1-Bilder stammt, wo
   per cover die halbe Bildbreite wegfiel. Mit 16:9 ist der Rand auf dem
   Desktop nur noch schmal (auf 1920x1080 rund 70px links und rechts, auf
   1440x900 gerade 13px oben und unten), auf Hochkant-Handy dagegen traegt der
   Fueller nach wie vor fast zwei Drittel der Flaeche. Die Konstruktion bleibt
   deshalb ueberall gleich: sie kostet nichts, wo kein Rand ist, und sie greift
   sofort wieder, sobald jemand das Fenster schmaler zieht, hineinzoomt oder
   einen Ultrawide-Schirm benutzt.
   Die zwei Schichten:

     .bild-scharf  object-fit:contain - das Motiv ist immer VOLLSTAENDIG zu
                   sehen, es wird nie mehr etwas abgeschnitten
     .bild-fuell   dieselbe Datei per cover, weichgezeichnet und abgedunkelt.
                   Sie fuellt genau den Rand, den contain frei laesst.

   Beide <picture> tragen zeichengleiche <source>-Listen. Der Browser trifft
   damit zweimal dieselbe Wahl (auch die -sm-Variante unter 820px) und holt die
   Datei beim zweiten Mal aus dem Cache - der Fueller kostet null zusaetzlichen
   Traffic. Genau deshalb ist es ein zweites <picture> und kein
   background-image mit fest verdrahtetem Pfad.

   Schichtung von hinten nach vorn:
     -3 Fueller  ->  -2 scharfes Bild  ->  -1 Schleier  ->  0/1 Inhalt        */
.bild-flaeche{position:relative;isolation:isolate;overflow:hidden;background:var(--grund-tief)}

.bild-flaeche > picture,
.bild-flaeche > .bild-halter{
  position:absolute;inset:0;display:block;
}
.bild-flaeche > picture > img{width:100%;height:100%}

/* Scharfe Schicht - vollstaendig einpassen.
   object-position steuert hier NICHT mehr den Ausschnitt (es wird ja nichts
   weggeschnitten), sondern wo das Bild im frei gebliebenen Raum sitzt.
   drop-shadow folgt der tatsaechlichen Bildkante (anders als box-shadow, das
   am Elementrand haengt) und setzt das Motiv sauber vom Fueller ab - ohne
   diesen Schatten franst es unentschlossen in den Nebel aus. */
.bild-flaeche > .bild-scharf{z-index:-2}
.bild-scharf img{
  object-fit:contain;
  object-position:50% 50%;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.72));
}

/* Fuell-Schicht - dieselbe Datei formatfuellend, weich und dunkel.
   Das scale() ist Pflicht und kein Schoenheitsfehler: blur() zieht die
   Transparenz von ausserhalb des Elements herein und legt sonst einen hellen
   Saum an alle vier Kanten. 1.2 deckt bei 38px Radius reichlich ab.
   brightness(.5) ist nachgestellt ausgemessen: darunter kippt der Rand in
   flaches Schwarz und wirkt wie ein Letterbox-Balken statt wie Atmosphaere.
   Heller darf er nicht werden, weil auf schmalen Geraeten Text darauf steht -
   Vignette, Bodenverlauf und Lesbarkeits-Sockel legen sich ohnehin noch
   darueber und druecken ihn weiter. */
.bild-flaeche > .bild-fuell{z-index:-3}
.bild-fuell img{
  object-fit:cover;
  object-position:50% 45%;
  filter:blur(38px) brightness(.5) saturate(.72);
  transform:scale(1.2);
}

.schleier{position:absolute;inset:-2px;z-index:-1;pointer-events:none}
.schleier::before,.schleier::after{content:'';position:absolute;inset:0}
/* Vignette + Farbstich.
   Der Kopfverlauf laeuft etwas laenger dunkel aus als frueher (.58 bis 30 %
   waren es, jetzt .66 bis 34 %). Grund: die 16:9-Motive fuellen den Kasten auf
   dem Desktop fast vollstaendig, der Text steht also kaum noch vor dem dunklen
   Rand, sondern fast durchweg vor dem Bild. Und alle fuenf Motive haben ihren
   hellsten Bereich oben - Himmel, Nebel, Gegenlicht, Sonnenuntergang. */
.schleier::before{
  background:
    radial-gradient(124% 94% at 50% 40%,transparent 0%,rgba(6,9,8,.12) 54%,rgba(6,9,8,.55) 100%),
    linear-gradient(180deg,rgba(6,9,8,.44) 0%,rgba(6,9,8,.05) 30%,rgba(6,9,8,.08) 62%,rgba(6,9,8,.5) 86%,var(--grund) 100%);
}
/* Gruenstich, damit Bild und UI aus einem Guss wirken */
.schleier::after{
  background:linear-gradient(200deg,rgba(20,46,30,.2),rgba(6,12,9,.3));
  mix-blend-mode:multiply;
}
/* Lesbarkeits-Sockel: nur dort abdunkeln, wo tatsaechlich Text steht.
   Trennt Lesbarkeit von der Bildwirkung - der Rest des Motivs bleibt hell.
   mix-blend-mode:normal, weil multiply den Sockel gegen helle Bildstellen
   (Neonlicht, Feuer, Gegenlicht) fast wirkungslos machen wuerde.
   Jede Sektion hat einen eigenen Sockel, weil ihr Text woanders steht und ihr
   Motiv woanders hell ist.

   ACHTUNG, teuer gelernt am 2026-08-20: diese Schichten multiplizieren sich.
   Vignette, Kopfverlauf, Sockel und Gruenstich lagen einmal bei Einzelwerten,
   die je fuer sich harmlos aussahen - zusammen ergaben sie in der Bildmitte
   75 % und am Rand 88 % Abdunkelung, und das Motiv war im Browser praktisch
   schwarz. Wer hier einen Wert anhebt, muss die Summe im Browser ansehen,
   nicht die einzelne Zeile bewerten. Deckkraft rechnet 1-(1-a)(1-b)(1-c)... */
.hero .schleier::after,
.vollbild .schleier::after,
.seitenkopf .schleier::after,
.fuss.bild-flaeche .schleier::after{
  background:
    radial-gradient(58% 52% at 50% 46%,rgba(6,9,8,.46) 0%,rgba(6,9,8,.2) 62%,transparent 100%),
    linear-gradient(200deg,rgba(20,46,30,.14),rgba(6,12,9,.2));
  mix-blend-mode:normal;
}
/* Spendenseite: der Text steht mittig genau im Gegenlicht des Tuerrahmens -
   deshalb der dichteste Sockel der Seite, aber nur eine Spur dichter als der
   Hero, nicht doppelt so dicht. */
.vollbild .schleier::after{
  background:
    radial-gradient(56% 50% at 50% 46%,rgba(6,9,8,.52) 0%,rgba(6,9,8,.24) 62%,transparent 100%),
    linear-gradient(200deg,rgba(20,46,30,.14),rgba(6,12,9,.2));
}
/* Der Fuss war bisher der einzige Bildbereich mit Text ohne eigenen Sockel -
   und traegt mit --text-leise ausgerechnet den schwaechsten Textton der Seite.
   Nachgerechnet lag die Fusszeile ueber mittelhellem Motiv bei rund 4:1, also
   unter der Schwelle.
   Der Sockel ist bewusst flacher als beim Hero und eng gefasst: der Fuss
   traegt genau eine Zeile, und ein breiter dunkler Fleck mitten im warmen
   Fluchtmotiv - dem einzigen hellen, goldenen Bild der Seite - waere
   Verschwendung. Genau diese Waerme ist der Reiz des Bildes und soll durch.
   Die fehlende Deckung holt der Textschatten direkt an den Buchstaben.
   Gemessen 4,8:1 auf dem Desktop. */
.fuss.bild-flaeche .schleier::after{
  background:
    radial-gradient(52% 26% at 50% 90%,rgba(6,9,8,.44) 0%,rgba(6,9,8,.2) 62%,transparent 100%),
    linear-gradient(200deg,rgba(20,46,30,.14),rgba(6,12,9,.2));
}
.fuss.bild-flaeche .fuss-zeile{text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.85)}
/* Der Seitenkopf setzt seinen Text links unten - der Sockel wandert mit.
   Das Neongelb der Warnweste ist der hellste Punkt aller fuenf Motive, liegt
   aber oberhalb des Textes; gemessen 9,5:1 beim Vorspann, 10,3:1 bei der
   Schlagzeile. Die Weste darf deshalb leuchten. */
.seitenkopf .schleier::after{
  background:
    radial-gradient(62% 56% at 34% 60%,rgba(6,9,8,.48) 0%,rgba(6,9,8,.22) 62%,transparent 100%),
    linear-gradient(200deg,rgba(20,46,30,.14),rgba(6,12,9,.2));
}

/* Variante fuer Baender / Trenner: weniger Boden-Fade, mehr Vignette.
   Die Ein- und Ausblendzonen sind von 26 % auf 16 % zusammengezogen. Der
   Verlauf war fuer einen 280px flachen Streifen gemacht; seit das Band die
   volle Bildhoehe hat, haette er ueber ein Viertel des nun vollstaendigen
   Motivs weggedunkelt. Oben und unten bleibt trotzdem ein dunkler Rand
   stehen - sonst laege die gerissene Kante auf einer harten Bildkante auf. */
.schleier-band::before{
  background:
    radial-gradient(112% 132% at 50% 50%,transparent 0%,rgba(6,9,8,.18) 64%,rgba(6,9,8,.62) 100%),
    linear-gradient(180deg,rgba(6,9,8,.8) 0%,rgba(6,9,8,.04) 14%,rgba(6,9,8,.07) 84%,rgba(6,9,8,.8) 100%);
}

/* ------------------------------------------------------------------ Hero */
.hero{
  min-height:640px;
  min-height:92svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(90px,14vh,150px) 20px clamp(80px,12vh,130px);
}
.hero-inhalt{width:100%;max-width:var(--breite);position:relative;z-index:1}

/* Der Schriftzug wiegt sich wie ein aufgehaengtes Schild im Wind.
   Die Perspektive steht im transform selbst und nicht als perspective-
   Eigenschaft am Elternelement - so bleibt der Effekt auf die Ueberschrift
   beschraenkt und greift nicht in das Scroll-Reveal der Nachbarn ein.
   Das leichte rotateZ laeuft mit: eine reine Y-Drehung sieht mechanisch aus,
   erst das Mitkippen macht daraus eine haengende Bewegung.
   12 Grad sind bewusst die Obergrenze - darueber steht die Schrift so
   schraeg, dass die hintere Haelfte zu klein zum Lesen wird. */
.hero h1{
  animation:schild-wiegen 7s ease-in-out infinite;
  transform-origin:50% 30%;   /* Aufhaengung oben, nicht in der Mitte */
  will-change:transform;
}
@keyframes schild-wiegen{
  0%,100%{transform:perspective(900px) rotateY(-12deg) rotateZ(-.8deg)}
  50%    {transform:perspective(900px) rotateY( 12deg) rotateZ( .8deg)}
}

.hero .label{margin-bottom:clamp(18px,3vh,30px)}
.unterzeile{
  margin-top:clamp(16px,3vh,26px);
  font-family:var(--schrift-mono);
  font-size:clamp(12px,2.2vw,16px);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--text);
}
.zitat{
  margin-top:clamp(18px,3vh,30px);
  font-size:clamp(15px,2.2vw,20px);
  font-style:italic;letter-spacing:.02em;
  color:var(--gift-matt);
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------- IP-Kasten */
.verbinden{margin:clamp(32px,6vh,54px) auto 0;width:100%;max-width:640px}
.verbinden .label{margin-bottom:12px;color:var(--text-leise)}

.ip-box{
  display:flex;align-items:stretch;
  border:1px solid var(--linie-hart);
  background:rgba(6,9,8,.82);
  backdrop-filter:blur(3px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 24px 60px rgba(0,0,0,.7),
    inset 0 0 42px rgba(0,0,0,.75);
}
.ip-wert{
  flex:1;padding:18px 20px;text-align:left;
  font-family:var(--schrift-mono);
  font-size:clamp(17px,4vw,28px);
  color:var(--knochen);letter-spacing:.04em;
  user-select:all;overflow-x:auto;white-space:nowrap;
  text-shadow:0 0 20px rgba(92,200,50,.22);
}
.ip-knopf{
  border:none;border-left:1px solid var(--linie-hart);
  background:var(--gift-tief);color:var(--knochen);
  padding:0 clamp(18px,4vw,30px);cursor:pointer;
  font-family:var(--schrift-display);letter-spacing:.16em;font-size:15px;
  text-transform:uppercase;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.ip-knopf:hover{background:var(--gift);color:#08100a}
.ip-knopf.fertig{background:var(--gift);color:#08100a}

/* ---------------------------------------------------------------- Knoepfe */
.knoepfe{
  margin-top:clamp(22px,4vh,34px);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px clamp(22px,4vw,34px);
  font-size:15px;letter-spacing:.14em;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.knopf:hover{transform:translateY(-2px)}

.knopf-signal{
  background:var(--gift);color:#07100a;border-color:var(--gift);
  box-shadow:0 0 30px rgba(92,200,50,.24);
}
.knopf-signal:hover{background:#78e64a;color:#07100a;box-shadow:0 0 44px rgba(92,200,50,.42)}

/* Discord bleibt wiedererkennbar, aber als Kontur statt als leuchtender Block -
   das Blurple-Blau ist die einzige Farbe hier, die nicht aus den Bildern kommt
   und wuerde ausgefuellt aus der Palette springen. */
.knopf-discord{background:rgba(38,43,92,.42);color:#c9cdf5;border-color:rgba(88,101,242,.62)}
.knopf-discord:hover{background:rgba(88,101,242,.9);color:#fff;border-color:#5865F2}

/* Warnknopf: getrocknetes Blut. Ruhiges Pulsieren, damit das Auge ihn
   findet - er soll aber die IP nicht ueberstrahlen. */
.knopf-warn{
  background:rgba(126,28,20,.9);color:var(--knochen);border-color:var(--blut-hell);
  animation:puls 3.2s ease-in-out infinite;
}
.knopf-warn:hover{background:var(--blut-hell);animation:none}
@keyframes puls{
  0%,100%{box-shadow:0 0 0 rgba(178,57,44,0)}
  50%    {box-shadow:0 0 28px rgba(178,57,44,.5)}
}

.knopf-geist{background:rgba(6,9,8,.5);color:var(--text);border-color:var(--linie-hart)}
.knopf-geist:hover{color:var(--knochen);border-color:var(--gift-matt);background:rgba(6,9,8,.8)}

/* ------------------------------------------------------ Sektionen / Raster */
.sektion{padding:clamp(56px,9vh,104px) 20px;position:relative}
.sektion-innen{max-width:var(--breite);margin:0 auto}
.sektion-eng{max-width:var(--breite-eng);margin:0 auto}

.gerissen{clip-path:var(--riss-oben)}
.gerissen-beide{clip-path:var(--riss-beide)}

/* Eckdaten - eigene Flaeche, damit die gerissene Oberkante ueberhaupt liest */
.fakten-sektion{
  background:linear-gradient(180deg,#141c19 0%,var(--grund) 72%);
  margin-top:-1px;
}
.fakten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--linie);
  border:1px solid var(--linie);
}
.fakt{padding:clamp(22px,4vw,34px) 16px;text-align:center;background:var(--flaeche)}
.fakt-wert{
  font-size:clamp(34px,5vw,48px);line-height:1;
  color:var(--gift);
  text-shadow:0 0 26px rgba(92,200,50,.3);
  margin-bottom:10px;
}
.fakt-name{
  font-family:var(--schrift-mono);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-leise);
}

/* ---------------------------------------------------------- Spielzeiten
   Zwei Karten nebeneinander: PVP in Blut, PVE in Gift. Die Farbe traegt
   hier die Aussage, deshalb steht der Modus zusaetzlich als Wort da -
   auf Blau-Gelb-Schwaeche waeren die beiden Toene sonst kaum zu trennen. */
.zeiten-sektion{
  background:linear-gradient(180deg,var(--grund) 0%,var(--grund-tief) 100%);
}
.zeiten-titel{margin:12px 0 clamp(24px,4vh,40px)}

.zeiten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;
  background:var(--linie);
  border:1px solid var(--linie);
}
.zeit{
  padding:clamp(26px,4vw,40px) clamp(20px,3vw,32px);
  background:var(--flaeche);
  position:relative;
}
/* Schmaler Streifen an der Oberkante als Farbtraeger der Karte */
.zeit::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
}
.zeit-pvp::before{background:var(--blut-hell)}
.zeit-pve::before{background:var(--gift)}

.zeit-marke{
  font-family:var(--schrift-mono);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  margin-bottom:14px;
}
.zeit-pvp .zeit-marke{color:var(--blut-hell)}
.zeit-pve .zeit-marke{color:var(--gift)}

.zeit-spanne{
  font-family:var(--schrift-display);
  font-size:clamp(30px,4.4vw,44px);
  line-height:1;letter-spacing:.02em;
  color:var(--knochen);
  margin-bottom:16px;
}
.zeit-pvp .zeit-spanne{text-shadow:0 0 26px rgba(178,57,44,.34)}
.zeit-pve .zeit-spanne{text-shadow:0 0 26px rgba(92,200,50,.28)}

.zeit-text{margin:0;color:var(--text);font-size:clamp(14px,1.6vw,15px)}

.zeiten-fuss{
  margin-top:clamp(20px,3vh,30px);
  color:var(--text-leise);
  font-size:clamp(13px,1.5vw,14px);
  max-width:62ch;
}

/* Bildband als Sektionstrenner - rein atmosphaerisch, ohne Text.
   Das Band ist so hoch, wie das Motiv es braucht (--bild-voll), gedeckelt auf
   78vh. Auf schmalen Geraeten sitzt es damit randlos, auf breiten bleibt links
   und rechts ein Streifen Blur stehen - das ist gewollt und nicht der
   Notbehelf: es rahmt den Trenner und haelt ihn optisch unter dem Hero. */
.band{
  position:relative;
  height:56vw;                 /* Rueckfall fuer Browser ohne min() */
  height:var(--bild-voll);
}

/* Bildausschnitte je Motiv - der Bildinhalt bestimmt den Anker, nicht der
   Zufall. Sie gelten nur fuer die unscharfe Fuell-Schicht: sie ist die
   einzige, die ueberhaupt noch etwas wegschneidet. Alle Motive haben ihren
   hellsten Bereich oben (Himmel, Nebel, Gegenlicht, Sonnenuntergang), deshalb
   ankern die Fueller durchweg unterhalb der Bildmitte - so zieht der Rand
   nicht die hellste Stelle des Bildes gross. */
.bild-stadt     .bild-fuell img{object-position:50% 62%}
.bild-barrikade .bild-fuell img{object-position:50% 52%}
.bild-flucht    .bild-fuell img{object-position:50% 70%}
.bild-markt     .bild-fuell img{object-position:50% 58%}
.bild-strom     .bild-fuell img{object-position:50% 60%}

/* Sitz des vollstaendigen Bildes im frei gebliebenen Raum. Auf breiten
   Schirmen faellt das kaum noch auf, weil 16:9 dort fast genau passt - auf
   schmalen entscheidet es darueber, ob der Text auf dem Bild oder auf dem
   ruhigen Fueller steht. */
.hero      .bild-scharf img{object-position:50% 42%}
.vollbild  .bild-scharf img{object-position:50% 44%}
.seitenkopf .bild-scharf img{object-position:50% 18%}

/* ------------------------------------------------------------- Textkoerper */
.artikel-flaeche{
  background:linear-gradient(180deg,#141c19 0%,var(--grund) 34%);
  margin-top:-1px;
}
.artikel h2{
  margin:clamp(44px,7vh,72px) 0 4px;
  padding-top:22px;
  border-top:1px solid var(--linie-hart);
}
.artikel h2 .nr{
  color:var(--gift);
  margin-right:14px;
  text-shadow:0 0 22px rgba(92,200,50,.35);
}
.artikel h3{margin:30px 0 6px}
.artikel ol,.artikel ul{margin:16px 0 16px 22px}
.artikel li{margin:10px 0}
.klein{font-size:.9em;color:var(--text-leise)}

code,.pfad{
  font-family:var(--schrift-mono);
  background:rgba(6,9,8,.75);
  border:1px solid var(--linie);
  padding:2px 7px;color:var(--gift-matt);font-size:.88em;
  word-break:break-word;
}

/* Hinweiskaesten */
.kasten{
  border:1px solid var(--linie-hart);
  border-left:3px solid var(--gift-tief);
  background:linear-gradient(180deg,rgba(19,27,24,.9),rgba(10,14,12,.9));
  padding:clamp(18px,3vw,26px);
  margin:26px 0;
  box-shadow:inset 0 0 44px rgba(0,0,0,.6);
}
.kasten p:first-of-type{margin-top:0}
.kasten p:last-child{margin-bottom:0}
.kasten-titel{
  font-size:15px;letter-spacing:.16em;
  color:var(--gift-matt);margin-bottom:10px;
}
.kasten.warn{border-left-color:var(--bernstein)}
.kasten.warn .kasten-titel{color:var(--bernstein)}
.kasten.gut{border-left-color:var(--gift)}
.kasten.gut .kasten-titel{color:var(--gift)}
.kasten.blut{border-left-color:var(--blut-hell)}
.kasten.blut .kasten-titel{color:var(--blut-hell)}

/* Kopierzeile (Dateipfad) */
.kopieren{
  display:flex;align-items:stretch;
  border:1px solid var(--linie-hart);
  background:rgba(6,9,8,.85);
  margin:16px 0;
}
.kopieren .wert{
  flex:1;padding:14px 16px;
  font-family:var(--schrift-mono);font-size:.86em;
  color:var(--knochen);
  user-select:all;overflow-x:auto;white-space:nowrap;
}
.kopieren button{
  border:none;border-left:1px solid var(--linie-hart);
  background:var(--gift-tief);color:var(--knochen);
  padding:0 20px;cursor:pointer;white-space:nowrap;
  font-family:var(--schrift-display);letter-spacing:.14em;font-size:13px;
  text-transform:uppercase;transition:background .18s ease,color .18s ease;
}
.kopieren button:hover{background:var(--gift);color:#08100a}
.kopieren button.fertig{background:var(--gift);color:#08100a}

/* Tabelle */
.tabelle-halter{overflow-x:auto;margin:20px 0}
table{width:100%;border-collapse:collapse;font-size:.95em;min-width:320px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linie)}
th{
  letter-spacing:.12em;font-size:13px;
  color:var(--gift-matt);
  border-bottom-color:var(--linie-hart);
}

/* Vorher / Nachher */
.vorher-nachher{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.vorher-nachher > div{
  border:1px solid var(--linie);
  padding:16px;background:rgba(6,9,8,.55);
  font-family:var(--schrift-mono);
}
.vorher-nachher .titel{
  font-family:var(--schrift-text);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-leise);margin-bottom:8px;
}
.vorher-nachher .alt{color:var(--text-leise);text-decoration:line-through}
.vorher-nachher .neu{color:var(--gift);font-weight:bold}

/* ------------------------------------------------------- Vollbild-Seite */
/* Eine Seite, ein Bild, eine Handlung. Genutzt fuer die Spendenseite. */
.vollbild{
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(54px,10vh,110px) 20px;
}
.karte{position:relative;z-index:1;width:100%;max-width:560px}
.karte h1{margin-bottom:clamp(16px,3vh,26px)}
.karte .label{margin-bottom:clamp(16px,3vh,26px)}
.karte .text{
  font-size:clamp(16px,2.2vw,18px);
  margin-bottom:clamp(30px,5vh,48px);
  text-shadow:0 2px 16px rgba(0,0,0,.9);
}

/* QR-Code braucht eine helle Flaeche mit Rand, sonst scannt er schlecht */
.qr{margin-top:clamp(32px,6vh,54px)}
.qr-platte{
  display:inline-block;padding:14px;
  background:var(--knochen);
  border:1px solid var(--linie-hart);
  box-shadow:0 0 46px rgba(92,200,50,.16),0 22px 54px rgba(0,0,0,.75);
}
.qr-platte img{width:170px;height:170px}
.qr-text{
  margin-top:14px;
  font-family:var(--schrift-mono);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-leise);
}

/* --------------------------------------------------------- Seitenkopf */
/* Bildband mit Titel darauf - fuer Unterseiten statt eines vollen Heros. */
/* Die Hoehe haengt jetzt an der Bildbreite statt an einer festen Spanne:
   56vw waere formatfuellend, 62vh deckelt das auf einer Textseite ab (ein
   Seitenkopf, der den halben Bildschirm frisst, schiebt die Anleitung aus dem
   Bild), 700px ist die Obergrenze. Auf dem Handy bindet 56vw - dort sitzt das
   Motiv randlos statt in einem 390px-Kasten mit Nebel oben und unten.
   Die clamp-Zeile davor ist der Rueckfall fuer Browser ohne min(). */
.seitenkopf{
  display:flex;align-items:flex-end;
  min-height:clamp(320px,52vh,540px);
  /* 62vh liess auf 1920x1080 links und rechts je rund 350px Nebel stehen -
     das Motiv wirkte wie ein Poster an einer viel zu grossen Wand. Mit 76vh
     fuellt es die Breite fast aus, ohne die Anleitung darunter wegzudruecken. */
  min-height:min(56vw,76vh,860px);
  padding:clamp(70px,12vh,120px) 20px clamp(34px,6vh,56px);
}
.seitenkopf-innen{position:relative;z-index:1;max-width:var(--breite-eng);margin:0 auto;width:100%}
.seitenkopf .label{margin-bottom:14px}
.vorspann{
  margin-top:18px;max-width:60ch;
  font-size:clamp(16px,2.2vw,18px);
  text-shadow:0 2px 16px rgba(0,0,0,.85);
}

/* ------------------------------------------------------------------ Fuss */
.fuss{
  position:relative;
  padding:clamp(70px,12vh,120px) 20px clamp(44px,7vh,70px);
  text-align:center;
}
/* Fuss MIT Bild: aus dem 220px-Streifen von frueher wird ein Abspann, in dem
   das Motiv vollstaendig liegt - ein flacher Streifen und ein 16:9-Bild gehen
   nicht zusammen. Die Fusszeile steht mittig darauf. Es bleibt eine
   MINDEST-Hoehe: auf dem Handy schiebt die umgebrochene Zeile den Kasten
   groesser, dann traegt der Fueller den Rest. */
.fuss.bild-flaeche{
  min-height:56vw;             /* Rueckfall fuer Browser ohne min() */
  min-height:var(--bild-voll);
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Die Zeile sass mittig - also quer ueber dem Gesicht der Fliehenden.
     Ein Abspann gehoert ans Ende, nicht ins Motiv: sie steht jetzt unten,
     wo der Bodenverlauf ohnehin dunkel auslaeuft und sie ohne zusaetzliche
     Abdunkelung des Bildes traegt. */
  justify-content:flex-end;
}
.fuss.bild-flaeche .fuss-zeile{max-width:var(--breite)}
/* Auch der Bodenverlauf war fuer den flachen Streifen von frueher gerechnet:
   ab 58 % lief er ins volle Schwarz und haette jetzt das untere Drittel des
   Motivs gefressen. Er greift daher erst im letzten Fuenftel. Die Seite endet
   weiterhin in Schwarz - nur eben nicht schon auf halber Bildhoehe. */
.fuss.bild-flaeche .schleier::before{
  background:
    radial-gradient(124% 100% at 50% 42%,transparent 0%,rgba(6,9,8,.12) 58%,rgba(6,9,8,.54) 100%),
    linear-gradient(180deg,rgba(6,9,8,.46) 0%,rgba(6,9,8,.04) 16%,rgba(6,9,8,.08) 74%,rgba(6,9,8,.52) 92%,var(--grund) 100%);
}
/* Schlichter Fuss ohne Bild - fuer Textseiten, die ruhig ausklingen sollen */
.fuss-schlicht{
  border-top:1px solid var(--linie);
  background:linear-gradient(180deg,var(--grund) 0%,var(--grund-tief) 100%);
}
.fuss-zeile{
  font-family:var(--schrift-mono);
  font-size:13px;letter-spacing:.12em;
  color:var(--text-leise);
  line-height:2.2;
}
.fuss-zeile a{color:var(--text);border-bottom:1px solid var(--linie-hart);padding-bottom:2px}
.fuss-zeile a:hover{color:var(--gift);border-color:var(--gift)}
.trenner{color:var(--gift-tief);margin:0 .5em}

.zurueck{
  display:inline-block;margin-top:clamp(34px,6vh,56px);
  font-family:var(--schrift-mono);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);
  border-bottom:1px solid var(--linie-hart);padding-bottom:4px;
}
.zurueck:hover{color:var(--gift);border-color:var(--gift)}

/* ------------------------------------------------------- Scroll-Reveal */
/* Ohne JS bleibt alles sichtbar: die .ist-da-Klasse wird nur additiv
   gesetzt, der Ausgangszustand kommt erst per JS-Flag auf <html>. */
.js .auf{opacity:0;transform:translate3d(0,26px,0)}
.js .auf.ist-da{
  opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
}
.js .auf.v2{transition-delay:.09s}
.js .auf.v3{transition-delay:.18s}
.js .auf.v4{transition-delay:.27s}

/* -------------------------------------------------------------- Parallax */
/* Nur transform wird bewegt, nie ein Layout-Wert.
   Bewegt wird seit der contain-Umstellung ausschliesslich die unscharfe
   Fuell-Schicht - das scharfe Bild steht still. Zwei Gruende:
   1. Ein contain-Bild fuellt seinen Kasten in einer Richtung ganz aus; jede
      Verschiebung wuerde es an einer Seite in den Nebel schieben und den
      Eindruck "abgeschnitten" wieder erzeugen.
   2. Der Fueller ist ohnehin cover und hochskaliert, hat also Reserve nach
      allen Seiten und kann nie eine leere Kante zeigen.
   Der Effekt bleibt derselbe: der Hintergrund driftet langsamer als die Seite,
   das Motiv steht ruhig davor. Nur eben ohne Beschnitt.
   Fuer den Parallax wird der Ueberhang des Fuellers vergroessert (1.2 -> 1.34),
   damit auch bei voller Auslenkung keine Kante in den Kasten laeuft. */
.bild-flaeche.hat-parallax .bild-fuell{will-change:transform}
.bild-flaeche.hat-parallax .bild-fuell img{transform:scale(1.34)}

/* ------------------------------------------------------------- Schmalbild */
@media (max-width:820px){
  /* Hochkant bleibt das vollstaendige Motiv ein liegendes Feld (bei 390px
     Breite 219px hoch - mit den alten 2,9:1-Bildern waren es nur 134px). Der
     Kasten wird trotzdem flacher gehalten als frueher: 68 statt 78svh und
     weniger Polster. Traegt der Inhalt (IP-Kasten plus drei gestapelte
     Knoepfe) ohnehin mehr Hoehe, greift die Mindesthoehe gar nicht erst. */
  .hero{min-height:68svh;padding-top:clamp(70px,10vh,96px);padding-bottom:clamp(64px,9vh,100px)}
  .vollbild{min-height:84svh}

  /* Motiv nach oben ruecken: die grosse Schlagzeile liegt dann auf dem Bild,
     IP-Kasten und Knoepfe stehen darunter auf ruhigem, dunklem Grund - das ist
     die beste Lesbarkeit, die dieses Format hergibt. Der Seitenkopf setzt
     seinen Text unten an, dort muss das Bild noch weiter hoch. */
  .hero .bild-scharf img{object-position:50% 18%}
  .vollbild .bild-scharf img{object-position:50% 20%}
  .seitenkopf .bild-scharf img{object-position:50% 6%}

  /* Weniger Weichzeichnung: die -sm-Datei ist kleiner, ein 38px-Radius kostet
     auf schwachen Telefonen unnoetig Rechenzeit und wuerde das Bild ohnehin
     nur zu Brei ruehren. Dafuer mehr Ueberhang, weil 24px Radius bei 390px
     Kastenbreite anteilig immer noch viel Rand frisst. */
  .bild-fuell img,
  .bild-flaeche.hat-parallax .bild-fuell img{
    filter:blur(24px) brightness(.46) saturate(.7);
    transform:scale(1.32);
  }
  /* Der Schatten an der Bildkante darf hier nicht breiter sein als das Bild
     hoch ist, sonst wird aus der Kante ein Schleier. */
  .bild-scharf img{filter:drop-shadow(0 0 18px rgba(0,0,0,.7))}

  /* Fuss hochkant: hier liegt das Motiv fast randlos im Kasten - und die
     Fusszeile wuerde mitten auf dem goldenen Himmel des Fluchtbildes stehen,
     gemessen 2,8:1. Statt das schoenste Bild der Seite dafuer wegzudunkeln,
     bekommt der Kasten Zuschlag: das Motiv rueckt nach oben, die Zeile sitzt
     darunter auf dunklem Grund. Gemessen 5,7:1. Der Deckel 88vh haelt den Fuss
     auf quer gehaltenen Telefonen im Rahmen. */
  .fuss.bild-flaeche{
    min-height:calc(56vw + 150px);
    min-height:min(calc(56vw + 150px),88vh);
    justify-content:flex-end;
  }
  .fuss.bild-flaeche .bild-scharf img{object-position:50% 0}
}
@media (max-width:620px){
  .ip-box{flex-direction:column}
  .ip-knopf{border-left:none;border-top:1px solid var(--linie-hart);padding:15px}
  .ip-wert{text-align:center;padding:16px 14px}
  .kopieren{flex-direction:column}
  .kopieren button{border-left:none;border-top:1px solid var(--linie-hart);padding:13px}
  .kopieren .wert{text-align:center}
  .vorher-nachher{grid-template-columns:1fr}
  .knoepfe{flex-direction:column;align-items:stretch}
  .knopf{width:100%}
  .zeilen{opacity:.2}
}

/* Der weite Zeichenabstand ist auf dem Telefon zu breit: die Funkspruch-Zeile
   riss "MULDRAUGH" ab und die Unterzeile das "KY" - beides jeweils als
   einzelnes Wort in die naechste Zeile. Enger gesetzt passt beides in eine. */
@media (max-width:440px){
  .hero .label{letter-spacing:.22em}
  .unterzeile{letter-spacing:.16em}
}

/* ------------------------------------------ Bewegung reduzieren = alles aus */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .korn{animation:none}
  .knopf-warn{animation:none}
  .knopf:hover{transform:none}
  /* Das Wiegen ganz abschalten und die Schrift gerade stellen. Die
     Sammelregel unten kuerzt zwar jede Animation auf .001ms, wuerde den
     Schriftzug damit aber im Endzustand der Keyframes einfrieren - also
     dauerhaft schraeg. Deshalb hier explizit. */
  .hero h1{animation:none;transform:none;will-change:auto}
  /* Der Parallax haengt am Fueller-<picture>. transform:none stoppt ihn dort -
     das scale() des Bildes darin bleibt unberuehrt, weil es auf dem <img>
     sitzt und nicht auf dem <picture>. Sonst faende der Blur-Saum wieder den
     Weg an die Kante. */
  [data-parallax]{transform:none !important;will-change:auto}
  .js .auf{opacity:1;transform:none}
  .js .auf.ist-da{transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* Sehr hoher Kontrast erwuenscht: Schleier zuruecknehmen, Text haerter */
@media (prefers-contrast:more){
  :root{--text:rgba(240,242,236,.95);--text-leise:rgba(240,242,236,.8)}
  .schleier::before{filter:brightness(.7)}

  /* Der Fueller ist die Flaeche, vor der hier der meiste Text steht - er wird
     fast schwarz gezogen. Und der Lesbarkeits-Sockel geht wieder hoch, statt
     der oben gewaehlten Ruecknahme. */
  .bild-fuell img{filter:blur(30px) brightness(.22) saturate(.45)}
  .hero .schleier::after,
  .vollbild .schleier::after,
  .fuss.bild-flaeche .schleier::after{
    background:
      radial-gradient(66% 60% at 50% 48%,rgba(6,9,8,.82) 0%,rgba(6,9,8,.5) 60%,rgba(6,9,8,.24) 100%),
      linear-gradient(200deg,rgba(20,46,30,.2),rgba(6,12,9,.3));
  }
  .seitenkopf .schleier::after{
    background:
      radial-gradient(70% 64% at 34% 60%,rgba(6,9,8,.84) 0%,rgba(6,9,8,.52) 60%,rgba(6,9,8,.24) 100%),
      linear-gradient(200deg,rgba(20,46,30,.2),rgba(6,12,9,.3));
  }
}