/* ==========================================================================
   VouchCord - Halloween Theme v2
   Einbindung: <link rel="stylesheet" href="/vouchcord/halloween.css"> vor </head>
   Zum Abschalten einfach diese eine Zeile wieder entfernen.
   Nur CSS, keine Markup-Aenderung.

   Look: dunkles Holzbraun, Kuerbis-Orange, Knochenweiss. Flache Flaechen.
   Neu in v2:
   - Orangener Schleim tropft vom oberen Rand ueber die ganze Seite
   - Leuchtender Jack-o'-Lantern unten links
   - Eine Fledermaus fliegt alle paar Sekunden quer durchs Bild
   - Kerzenlicht-Flackern am Seitenrand
   - Ueberschriften flackern ganz selten wie eine Kerze
   - Buttons wackeln beim Hover, Karten bekommen einen Kuerbis-Balken
   - Wellenlinie unter Links, Fokus-Ring in Orange
   ========================================================================== */

/* ---- 1. Farb-Variablen (beide Namensschemata der Seiten) ---- */
html:root {
  /* Schema A: index, dashboard, admin */
  --bg: #130e0b;
  --bg-secondary: #1a1310;
  --bg-tertiary: #221813;
  --surface: #2b1f18;
  --border: #3d2d23;
  --text: #eadfcd;
  --text-muted: #b0a08a;
  --text-dim: #7d6e5b;
  --accent: #e8731f;
  --accent-hover: #cf6217;
  --accent-dim: rgba(232,115,31,.16);
  --green: #8aa64a;
  --green-dim: rgba(138,166,74,.14);
  --yellow: #d8a63a;
  --yellow-dim: rgba(216,166,58,.14);
  --red: #d2453f;

  /* Schema B: status, terms, privacy, report, 404, d/*, community, variables */
  --bg2: #1a1310;
  --bg3: #221813;
  --sf: #2b1f18;
  --sf2: #35261d;
  --bd: #3d2d23;
  --bd2: #4f3b2d;
  --tx: #eadfcd;
  --mu: #b0a08a;
  --dm: #7d6e5b;
  --ac: #e8731f;
  --ac-h: #cf6217;
  --ac-d: rgba(232,115,31,.16);
  --ac-g: rgba(232,115,31,.28);
  --gn: #8aa64a;
  --gn-d: rgba(138,166,74,.14);
  --rd: #d2453f;
  --rd-d: rgba(210,69,63,.14);
  --ye: #d8a63a;
  --ye-d: rgba(216,166,58,.14);
  --yl: #d8a63a;
  --yl-d: rgba(216,166,58,.14);
  --pu: #9a7bb5;
  --pu-d: rgba(154,123,181,.14);
  --shadow: 0 4px 14px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---- 2. Hintergrund: Papierkorn + Randabdunklung ---- */
html body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .82 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.35));
  background-attachment: fixed;
}

/* ---- 3. Deko-Ebene (fest, klickt nicht durch)
        1: Spinnennetz oben links      2: Spinnennetz unten rechts
        3: Jack-o'-Lantern unten links  4: Schleim-Tropfen am oberen Rand ---- */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23cbbfa8' stroke-linecap='round'%3E%3Cpath d='M0,0 L200,0 M0,0 L188,60 M0,0 L150,117 M0,0 L108,155 M0,0 L52,182 M0,0 L0,190' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M45,0 Q35.6,5.6 42.8,13.9 Q31.8,16.9 35.5,27.7 Q24.8,26.1 25.8,36.9 Q15.5,32.5 12.4,43.2 Q5,35.6 0,45 M95,0 Q77.1,12.2 90.3,29.4 Q68.9,36.6 74.9,58.5 Q53.7,56.6 54.5,77.8 Q33.6,70.4 26.2,91.3 Q10.8,77.2 0,95 M150,0 Q124.5,19.7 142.7,46.4 Q111.3,59.1 118.2,92.4 Q86.7,91.4 86.1,122.9 Q54.3,113.8 41.4,144.2' stroke-opacity='.36' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg transform='translate(150 150) scale(-.75 -.75)' fill='none' stroke='%23cbbfa8' stroke-linecap='round'%3E%3Cpath d='M0,0 L200,0 M0,0 L188,60 M0,0 L150,117 M0,0 L108,155 M0,0 L52,182 M0,0 L0,190' stroke-opacity='.4' stroke-width='1.2'/%3E%3Cpath d='M45,0 Q35.6,5.6 42.8,13.9 Q31.8,16.9 35.5,27.7 Q24.8,26.1 25.8,36.9 Q15.5,32.5 12.4,43.2 Q5,35.6 0,45 M95,0 Q77.1,12.2 90.3,29.4 Q68.9,36.6 74.9,58.5 Q53.7,56.6 54.5,77.8 Q33.6,70.4 26.2,91.3 Q10.8,77.2 0,95' stroke-opacity='.3' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='76' viewBox='0 0 84 76'%3E%3Cpath d='M38,13 Q39,3 47,0 L51,4 Q46,7 46,14Z' fill='%236b5a2a'/%3E%3Cellipse cx='42' cy='44' rx='38' ry='30' fill='%23e8731f'/%3E%3Cellipse cx='23' cy='44' rx='15' ry='29' fill='%23cf6217'/%3E%3Cellipse cx='61' cy='44' rx='15' ry='29' fill='%23cf6217'/%3E%3Cellipse cx='42' cy='44' rx='12' ry='30' fill='%23f08a35'/%3E%3Cpath d='M17,42 L29,31 L32,43Z M67,42 L55,31 L52,43Z M42,46 L37,54 L47,54Z M19,56 L27,51 L33,60 L40,54 L44,54 L51,60 L57,51 L65,56 Q61,71 42,71 Q23,71 19,56Z' fill='%23f2c14e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='40' viewBox='0 0 340 40'%3E%3Cg fill='%23e8731f'%3E%3Crect width='340' height='4'/%3E%3Cpath d='M18,3 L18,16 a4,4 0 0 0 8,0 L26,3Z M62,3 L62,30 a5,5 0 0 0 10,0 L72,3Z M118,3 L118,10 a3.5,3.5 0 0 0 7,0 L125,3Z M171,3 L171,22 a4,4 0 0 0 8,0 L179,3Z M230,3 L230,34 a5,5 0 0 0 10,0 L240,3Z M281,3 L281,13 a3.5,3.5 0 0 0 7,0 L288,3Z M318,3 L318,19 a4,4 0 0 0 8,0 L326,3Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-position: left top, right bottom, left 14px bottom 0, left top;
  background-size: 200px 200px, 150px 150px, 84px 76px, 340px 40px;
}

/* ---- 4. Spinne am Faden (haengt oben rechts, schwingt langsam) ---- */
html::after {
  content: "";
  position: fixed;
  top: 0;
  right: 7%;
  width: 44px;
  height: 120px;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='120' viewBox='0 0 44 120'%3E%3Cline x1='22' y1='0' x2='22' y2='73' stroke='%238a7560' stroke-opacity='.55'/%3E%3Cg fill='none' stroke='%238a7560' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16,82 L7,76 L3,84 M15,86 L5,88 L2,97 M16,90 L8,98 L7,106 M19,92 L14,102 L15,109'/%3E%3Cpath d='M28,82 L37,76 L41,84 M29,86 L39,88 L42,97 M28,90 L36,98 L37,106 M25,92 L30,102 L29,109'/%3E%3C/g%3E%3Ccircle cx='22' cy='87' r='7' fill='%232b1f18' stroke='%238a7560' stroke-width='1.2'/%3E%3Ccircle cx='22' cy='77' r='4' fill='%232b1f18' stroke='%238a7560' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 44px 120px;
  transform-origin: 50% 0;
  animation: vc-spider-swing 6s ease-in-out infinite alternate;
}
@keyframes vc-spider-swing {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

/* ---- 5. Fledermaus: fliegt quer ueber die Seite, flattert mit den Fluegeln
        (translate = Flugbahn, transform = Fluegelschlag, damit sie sich
        nicht in die Quere kommen) ---- */
body::before {
  content: "";
  position: fixed;
  top: 16%;
  left: 0;
  width: 44px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M20,6 Q24,2 30,4 Q34,0 40,2 Q36,6 37,12 Q32,9 28,12 Q24,10 20,16 Q16,10 12,12 Q8,9 3,12 Q4,6 0,2 Q6,0 10,4 Q16,2 20,6Z M17,7 L18,2 L20,6 L22,6 L23,2 L24,7Z' fill='%2326191a' stroke='%238a7560' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  translate: -100px 0;
  animation:
    vc-bat-fly 30s linear 4s infinite,
    vc-bat-flap .32s ease-in-out infinite;
}
@keyframes vc-bat-fly {
  /* Flug in den ersten 40% (12 s), danach Pause bis zum naechsten Durchgang */
  0%   { translate: -100px 0; }
  10%  { translate: 25vw -26px; }
  20%  { translate: 50vw 30px; }
  30%  { translate: 75vw -18px; }
  40%  { translate: calc(100vw + 100px) 8px; }
  100% { translate: calc(100vw + 100px) 8px; }
}
@keyframes vc-bat-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.5); }
}

/* ---- 6. Kerzenlicht: warmer Schein von unten links (beim Kuerbis),
        flackert unregelmaessig ---- */
body::after {
  content: "";
  position: fixed;
  left: 0;
  bottom: 0;
  width: 520px;
  height: 360px;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 10% 100%, rgba(232,115,31,.16), transparent 65%);
  animation: vc-candle 5s steps(1, end) infinite;
}
@keyframes vc-candle {
  0%   { opacity: 1; }
  7%   { opacity: .72; }
  11%  { opacity: .95; }
  23%  { opacity: .8; }
  26%  { opacity: 1; }
  48%  { opacity: .85; }
  52%  { opacity: 1; }
  71%  { opacity: .68; }
  74%  { opacity: .92; }
  90%  { opacity: .78; }
  93%  { opacity: 1; }
}

/* ---- 7. Header und 404-Zahl: flach, ohne Leuchten ---- */
html header,
html .topbar {
  border-bottom-color: var(--bd, var(--border));
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
html .code { /* 404-Zahl */
  background-image: linear-gradient(var(--ac), var(--ac));
  filter: none;
}

/* ---- 8. Typo: harter Schatten wie gestanzt, Kerzen-Flackern bei h1 ---- */
html :is(h1, h2) {
  text-shadow: 2px 2px 0 rgba(0,0,0,.55);
  letter-spacing: .01em;
}
html h1 {
  animation: vc-title-flicker 9s steps(1, end) infinite;
}
@keyframes vc-title-flicker {
  0%, 93%, 96%, 100% { opacity: 1; }
  94%                { opacity: .55; }
  95%                { opacity: .9; }
}

/* Links: Wellenlinie beim Hover */
html a:not([class]):hover,
html :is(p, li, td) a:hover {
  text-decoration: underline wavy var(--ac, var(--accent));
  text-underline-offset: 4px;
}

/* ---- 9. Buttons und Karten ---- */
html :is(.btn-p, .btn-primary, .hbtn.ac, .cta .btn) {
  box-shadow: 0 3px 0 rgba(0,0,0,.45);
}
html :is(.btn-p, .btn-primary, .hbtn.ac, .cta .btn):hover {
  box-shadow: 0 3px 0 rgba(0,0,0,.45);
  filter: brightness(1.08);
  animation: vc-wiggle .35s ease-in-out;
}
@keyframes vc-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

/* Karten: Kuerbis-Balken links statt Leuchten */
html :is(.card, .feature-card) {
  transition: border-color .15s, box-shadow .15s;
}
html :is(.card, .feature-card):hover {
  border-color: var(--bd2, var(--border));
  box-shadow: inset 4px 0 0 var(--ac, var(--accent));
}

/* ---- 10. Formulare, Trenner, Zitate ---- */
html :is(input, textarea, select):focus,
html :is(a, button):focus-visible {
  outline: 2px solid var(--ac, var(--accent));
  outline-offset: 2px;
}
html hr {
  border: 0;
  border-top: 2px dashed var(--bd2, var(--border));
}
html blockquote {
  border-left: 4px solid var(--ac, var(--accent));
  background: var(--ac-d, var(--accent-dim));
}

/* ---- 11. Auswahl, Scrollbar ---- */
::selection { background: rgba(232,115,31,.55); color: #fff; }
html { scrollbar-color: #4f3b2d #130e0b; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #130e0b; }
::-webkit-scrollbar-thumb { background: #4f3b2d; border-radius: 6px; border: 2px solid #130e0b; }
::-webkit-scrollbar-thumb:hover { background: #e8731f; }

/* ---- 12. Mobil, Bewegung ---- */
@media (max-width: 700px) {
  html::before { background-size: 120px 120px, 90px 90px, 56px 51px, 340px 40px; }
  html::after { display: none; }
  body::before { display: none; }
  body::after { width: 320px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  html::after,
  body::before,
  body::after,
  html h1,
  html :is(.btn-p, .btn-primary, .hbtn.ac, .cta .btn):hover {
    animation: none;
  }
  body::before { display: none; }
}