/* ====================================================================
   brutal.css — Neo-Brutalist Arcade Theme-Layer (Redesign 2026-08).
   Wird als LETZTE Datei der Kaskade geladen und biegt ausschliesslich
   Optik um: Tokens, Borders, Schatten, Typografie, Deko. Keine einzige
   funktionale Klasse/ID wird entfernt — Markup & JS bleiben unberuehrt.

   Zwei Modi ueber den bestehenden Theme-Toggle:
   - data-theme="light"  → "Arcade Cream" (Default, freigegebene Variante B)
   - ohne Attribut (dark) → "Midnight Arcade" (dunkle Brutal-Variante)
   ==================================================================== */

/* ---- 1. Token-Remap: Arcade Cream (Light = Default) ---------------- */
html[data-theme="light"] {
  /* Minecraft-Erdblock-Braun als Buehne; Karten bleiben Creme (Sticker-Papier) */
  --bg: #8B5E3B;
  --bg-2: #7C5232;
  --bg-elev-1: #FAF5EC;
  --surface: #FAF5EC;
  --surface-2: #F0E6D2;
  --surface-inset: #F3EBDA;

  --fg: #111111;
  --fg-dim: #201509;
  --fg-mute: #33220F;

  --ink: #111111;
  --paper: #FAF5EC;
  --dirt: #8B5E3B;
  --dirt-deep: #6E441F;
  --grass: #57C15E;
  --grass-deep: #3FA34C;
  --border: rgba(17, 17, 17, 0.85);
  --border-strong: #111111;
  --ring: rgba(17, 17, 17, 0.85);
  --glass: none;

  --brand: #16A34A;
  --brand-strong: #22C55E;
  --brand-deep: #15803D;
  --brand-soft: #4ADE80;
  --brand-ink: #111111;
  --brand-gradient: linear-gradient(0deg, #22C55E, #22C55E);
  --brand-glow: rgba(34, 197, 94, 0.0);
  --brand-wash: #E9F9EE;
  --brand-rgb: 34, 197, 94;

  --bk-grn: #22C55E;
  --bk-pur: #8B5CF6;
  --bk-yel: #FACC15;
  --bk-pnk: #FB7185;
  --bk-cyn: #38BDF8;

  --danger: #E11D48;   --danger-wash: #FDE7EC;
  --warn: #CA8A04;     --warn-wash: #FBF3D9;
  --success: #16A34A;  --success-soft: #22C55E;
  --info: #0284C7;     --info-wash: #E3F3FC;
  --premium: #8B5CF6;

  --gold-line: rgba(17, 17, 17, 0.85);
  --body-glow: transparent;
  --hero-particle: transparent;
  --hero-particle-line: transparent;

  --bs-1: 3px 3px 0 var(--ink);
  --bs-2: 5px 5px 0 var(--ink);
  --bs-3: 7px 7px 0 var(--ink);
  --bs-4: 10px 10px 0 var(--ink);

  color-scheme: light;
}

/* ---- 1b. Token-Remap: Midnight Arcade (Dark) ----------------------- */
html:not([data-theme="light"]) {
  /* Midnight Arcade = Hoehlen-Dirt: dunkles Erdbraun statt Schwarz */
  --bg: #2B1D11;
  --bg-2: #241809;
  --bg-elev-1: #3A2A18;
  --surface: #3A2A18;
  --surface-2: #46331E;
  --surface-inset: #201509;
  --dirt: #8B5E3B;
  --dirt-deep: #6E441F;
  --grass: #57C15E;
  --grass-deep: #3FA34C;

  --fg: #F5EFE2;
  --fg-dim: #D8D0BE;
  --fg-mute: #A69C86;

  --ink: #F5EFE2;
  --paper: #16130C;
  --border: rgba(245, 239, 226, 0.75);
  --border-strong: #F5EFE2;
  --ring: rgba(245, 239, 226, 0.8);
  --glass: none;

  --brand: #22C55E;
  --brand-strong: #22C55E;
  --brand-deep: #16A34A;
  --brand-soft: #4ADE80;
  --brand-ink: #111111;
  --brand-gradient: linear-gradient(0deg, #22C55E, #22C55E);
  --brand-glow: rgba(34, 197, 94, 0.0);
  --brand-wash: rgba(34, 197, 94, 0.14);
  --brand-rgb: 34, 197, 94;

  --bk-grn: #22C55E;
  --bk-pur: #A78BFA;
  --bk-yel: #FACC15;
  --bk-pnk: #FB7185;
  --bk-cyn: #38BDF8;

  --premium: #FACC15;
  --gold-line: rgba(245, 239, 226, 0.75);
  --body-glow: transparent;
  --hero-particle: transparent;
  --hero-particle-line: transparent;

  --bs-1: 3px 3px 0 rgba(0, 0, 0, 0.9);
  --bs-2: 5px 5px 0 rgba(0, 0, 0, 0.9);
  --bs-3: 7px 7px 0 rgba(0, 0, 0, 0.9);
  --bs-4: 10px 10px 0 rgba(0, 0, 0, 0.9);
}

/* ---- 2. Geometrie: alles kantig, Schatten hart --------------------- */
:root, html[data-theme="light"] {
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --radius-pill: 0px;

  --shadow-1: var(--bs-1);
  --shadow-2: var(--bs-2);
  --shadow-3: var(--bs-3);
  --shadow-4: var(--bs-4);
  --shadow-brand: var(--bs-2);
  --shadow-sm: var(--bs-1);
  --shadow-md: var(--bs-2);
  --shadow-lg: var(--bs-3);
  --shadow-glow: var(--bs-2);

  --font-display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;
  --tracking-display: 0;
  --tracking-tight: 0;
}

/* ---- 3. Deko-Altlasten aus: Aurora, Partikel, Grain, Vignette ------ */
.bk-hero-canvas,
.site-bg .mh-grid,
.site-bg .mh-aurora-wrap,
.site-bg .mh-sparkles,
.site-bg .bk-grain,
.site-bg .bk-vignette,
.modern-hero-bg .mh-aurora,
.modern-hero-bg .mh-sparkles,
.modern-hero-bg .mh-grid,
.hero-pro-depth,
.hero-pro-glow {
  display: none !important;
}
body { background: var(--bg); }

/* Minecraft-Pixelraster: dezentes Blockgitter + Schachbrett-Schimmer,
   wie die Pixel-Struktur eines Dirt-Blocks (rein per CSS, kein Bild) */
.site-bg {
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.07) 2px, transparent 2px),
    repeating-conic-gradient(rgba(255, 245, 225, 0.025) 0% 25%, rgba(0, 0, 0, 0.02) 0% 50%);
  background-size: 36px 36px, 36px 36px, 72px 72px;
}
html:not([data-theme="light"]) .site-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.22) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 2px, transparent 2px),
    repeating-conic-gradient(rgba(255, 235, 205, 0.03) 0% 25%, rgba(0, 0, 0, 0.05) 0% 50%);
  background-size: 36px 36px, 36px 36px, 72px 72px;
}

/* ---- 4. Typografie: laute Display-Headlines ------------------------ */
h1, h2,
.hero-pro-wordmark,
.modern-hero-title,
.section-header h2 {
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black hat nur 900 als einzigen Schnitt */
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
h3, h4 { letter-spacing: 0.01em; }
.hero-pro-wordmark .hpw-accent .hpw-text,
.modern-hero-title .mh-line-accent {
  background: var(--bk-grn);
  color: var(--ink);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  padding: 0 0.18em;
  border: 3px solid var(--ink);
  box-shadow: var(--bs-2);
  display: inline-block;
  transform: rotate(-1deg);
}
.eyebrow {
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  padding: 5px 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: none;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ---- 5. Navigation -------------------------------------------------- */
.nav {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 3px solid var(--ink);
  box-shadow: none;
}
html[data-theme="light"] .nav { background: var(--bg) !important; }
.nav-link { font-weight: 600; border-radius: 0; }
.nav-link.active {
  color: var(--ink);
  background: var(--bk-yel);
  border: 2px solid var(--ink);
  padding: 4px 10px;
}
html:not([data-theme="light"]) .nav-link.active { color: #111111; }
.logo .logo-text {
  font-family: var(--font-display);
  background: var(--ink);
  padding: 6px 12px;
  transform: rotate(-2deg);
  display: inline-block;
  font-size: 0.95em;
}
/* Spezifitaets-Sieg ueber onepage.css (html[data-theme] .logo-text) */
html .logo .logo-text,
html[data-theme="light"] .logo .logo-text,
html:not([data-theme="light"]) .logo .logo-text {
  color: var(--paper);
  -webkit-text-fill-color: var(--paper);
  background-image: none;
}
.nav-avatar {
  border: 2px solid var(--ink);
  box-shadow: var(--bs-1);
  background: var(--bk-pur);
  color: #fff;
}
.theme-toggle {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--bs-1);
}
.nav-bell {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--bs-1);
}
.nav-bell-badge {
  border-radius: 0;
  background: var(--bk-pnk);
  color: #111;
  border: 2px solid var(--ink);
  font-weight: 800;
}
.nav-bell-dropdown {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--bs-3);
  backdrop-filter: none;
}
.nav-drawer {
  background: var(--bg);
  border-left: 3px solid var(--ink);
  border-radius: 0;
}
.nav-drawer a { border-radius: 0; }
.nav-hamburger {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
}

/* ---- 6. Buttons ------------------------------------------------------ */
.btn {
  border-radius: 0 !important;
  border: 3px solid var(--ink);
  font-weight: 700;
  box-shadow: var(--bs-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--bs-2);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.btn-primary {
  background: var(--bk-grn);
  color: #111111;
}
.btn-primary::before, .btn-primary::after { display: none; }
.btn-primary:hover { background: var(--bk-grn); color: #111111; box-shadow: var(--bs-2); }
.btn-secondary {
  background: var(--bk-pur);
  color: #FFFFFF;
}
.btn-secondary:hover { background: var(--bk-pur); color: #fff; }
.btn-ghost {
  background: var(--surface);
  color: var(--fg);
}
.btn-ghost:hover { background: var(--bk-yel); color: #111111; border-color: var(--ink); }
.btn-danger {
  background: var(--bk-pnk);
  color: #111111;
  border-color: var(--ink);
}
.btn-danger:hover { background: var(--bk-pnk); }
.btn-whatsapp { background: #25D366; color: #111; }
.btn-whatsapp:hover { box-shadow: var(--bs-2); }
.btn-sm { border-width: 2px; box-shadow: var(--bs-1); }
.btn[disabled], .btn:disabled { box-shadow: none; transform: none; }

/* ---- 7. Karten: die grosse Sammel-Behandlung ------------------------ */
.plugin-card, .pricing-card, .form-card, .form-card-glass, .faq-card,
.settings-card, .pricing-final-card, .dash-card, .account-card,
.stat-card, .admin-card, .panel, .modal, .modal-card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--bs-3);
  backdrop-filter: none;
}
.plugin-card:hover, .pricing-card:hover, .faq-card:hover, .settings-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--bs-4);
  border-color: var(--ink);
}
/* Offene Settings-Karte (Formular sichtbar) darf beim Hovern NICHT springen —
   sonst verschiebt sich das Eingabefeld unter dem Cursor, genau wenn man
   reinklicken will. Geschlossene Karten behalten den Sticker-Hover. */
.settings-card[open]:hover {
  transform: none;
  box-shadow: var(--bs-3);
}
/* Mouse-Glow-Effekt (--mx/--my Spotlight) neutralisieren */
.plugin-card::before, .plugin-card::after,
.pricing-card::before, .pricing-card::after,
.form-card-glass::before, .faq-card::before,
.settings-card::before {
  background: none !important;
  box-shadow: none !important;
}
/* Sticker-Rotation der Karten ENTFERNT: Rotation auf texttragenden Karten
   rastert den kompletten Karten-Text weich (Chef-Befund "unscharf").
   Sticker-Feeling liefert weiterhin die Grafik (.plugin-sticker-svg dreht
   beim Hover) — Text bleibt achsenparallel und damit scharf. */
.plugin-grid > *:hover { transform: translate(-2px, -2px); }

/* Bunte Karten-Header-Balken via Akzentleiste oben */
.plugin-grid > *:nth-child(5n+1) .plugin-card, .plugin-grid > .plugin-card:nth-child(5n+1) { border-top: 10px solid var(--bk-grn); }
.plugin-grid > *:nth-child(5n+2) .plugin-card, .plugin-grid > .plugin-card:nth-child(5n+2) { border-top: 10px solid var(--bk-pur); }
.plugin-grid > *:nth-child(5n+3) .plugin-card, .plugin-grid > .plugin-card:nth-child(5n+3) { border-top: 10px solid var(--bk-yel); }
.plugin-grid > *:nth-child(5n+4) .plugin-card, .plugin-grid > .plugin-card:nth-child(5n+4) { border-top: 10px solid var(--bk-pnk); }
.plugin-grid > *:nth-child(5n+5) .plugin-card, .plugin-grid > .plugin-card:nth-child(5n+5) { border-top: 10px solid var(--bk-cyn); }

/* ---- 8. Chips, Badges, Tags ----------------------------------------- */
.chip, .tag, .badge, .plugin-tier, .tier-chip, .pill {
  border-radius: 0;
  border: 2px solid var(--ink);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
}
.modern-hero-pill, .hero-pro-badge {
  border-radius: 0;
  border: 3px solid var(--ink);
  background: var(--bk-pur);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: var(--bs-1);
  /* rotate(-1.5deg) entfernt: rotierte Pixel-Schrift rastert weich —
     Text-Badges bleiben achsenparallel (Rotation nur fuer Grafik-Sticker). */
  transform: none;
  backdrop-filter: none;
}
.hero-pro-badge-dot, .modern-hero-pill-dot { background: var(--bk-yel); box-shadow: none; }

/* ---- 9. Formulare ---------------------------------------------------- */
.field input, .field textarea, .field select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="search"], textarea, select {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}
.field input:focus, .field textarea:focus, .field select:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--bk-grn);
}
.field label { font-weight: 700; }
.message {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--bs-1);
  background: var(--bk-yel);
  color: #111111;
  font-weight: 600;
}
.message.error, .message.danger { background: var(--bk-pnk); color: #111; }
.message.success { background: var(--bk-grn); color: #111; }

/* ---- 10. Sektionen / Marketing -------------------------------------- */
.section-header p { font-weight: 500; }
.trust-marquee {
  background: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: none;
}
.trust-marquee * { color: var(--paper); }
.pricing-final-card { background: var(--bk-yel); color: #111111; }
.pricing-final-card h2, .pricing-final-card p { color: #111111; }
.pricing-card.featured, .pricing-card.is-featured {
  background: var(--bk-grn);
  color: #111111;
  /* rotate(1deg) entfernt: die gedrehte Karte hat ihren gesamten Text
     (Preis, Feature-Liste) weichgezeichnet — Featured hebt sich weiter
     ueber Farbe/Border ab, Text bleibt scharf. */
}
.pricing-card.featured *, .pricing-card.is-featured * { color: #111111; }
.pricing-card.featured .btn-primary, .pricing-card.is-featured .btn-primary {
  background: var(--ink);
  color: var(--paper);
}
html:not([data-theme="light"]) .pricing-card.featured .btn-primary,
html:not([data-theme="light"]) .pricing-card.is-featured .btn-primary {
  background: #111111;
  color: #F5EFE2;
  border-color: #111111;
}

/* ---- 11. FAQ / Accordions / Details --------------------------------- */
details, .faq-item, .pdv3-acc {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
}
details summary, .pdv3-acc summary { font-weight: 700; }

/* ---- 12. Tabellen (Admin/Dashboard) --------------------------------- */
table { border: 2px solid var(--ink); }
th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0 !important;
}
td { border-color: rgba(17, 17, 17, 0.25); }
html:not([data-theme="light"]) td { border-color: rgba(245, 239, 226, 0.25); }

/* ---- 13. Footer ------------------------------------------------------ */
.footer {
  border-top: 3px solid var(--ink);
  background: var(--surface);
}
.footer h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.vx-footer-row .vx-tile { border: 2px solid var(--ink); border-radius: 0; }

/* ---- 14. FAB / schwebende Elemente ---------------------------------- */
.fab-toggle, .fab-back-top {
  border-radius: 0;
  border: 3px solid var(--ink);
  background: var(--bk-grn);
  color: #111111;
  box-shadow: var(--bs-2);
}
.fab-back-top { background: var(--bk-yel); }
.fab-menu {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--bs-3);
  backdrop-filter: none;
}
.admin-edit-fab {
  border-radius: 0;
  border: 3px solid var(--ink);
  background: var(--bk-pur);
  color: #fff;
  box-shadow: var(--bs-2);
}

/* ---- 15. Voxel-Deko: Cartoon-Outlines -------------------------------- */
.voxel .vx-face { outline: 2.5px solid var(--ink); outline-offset: -1px; border-radius: 0; }
html[data-theme="light"] {
  --voxel-top: #4ADE80;
  --voxel-left: #16A34A;
  --voxel-right: #15803D;
  --voxel-edge: transparent;
  --grass-top: #4ADE80;  --grass-left: #A16207; --grass-right: #854D0E;
  --soil-top: #A16207;   --soil-left: #854D0E;  --soil-right: #713F12;
  --water-top: #38BDF8;  --water-left: #0284C7; --water-right: #075985;
  --leaf-top: #FACC15;   --leaf-left: #EAB308;  --leaf-right: #CA8A04;
  --wood-top: #92400E;   --wood-left: #78350F;  --wood-right: #5B2B0C;
}

/* ---- 16. Scrollbars & Selektion -------------------------------------- */
::selection { background: var(--bk-yel); color: #111111; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 3px solid var(--bg-2);
  border-radius: 0;
}

/* ---- 17. Editor & Admin Feinschliff ---------------------------------- */
.editor-shell, .editor-panel, .editor-sidebar, .admin-panel, .admin-section {
  border-radius: 0;
}
.verify-bar {
  background: var(--bk-yel) !important;
  color: #111111 !important;
  border-bottom: 3px solid var(--ink);
  box-shadow: none !important;
}
.verify-bar button {
  border: 2px solid #111111 !important;
  border-radius: 0 !important;
  background: #FAF5EC !important;
  color: #111111 !important;
  font-weight: 700;
}

/* ---- 18. Scroll-Reveals aus: Brutalismus ist sofort da ---------------- */
/* Die alten 0.8s-Fadeins passen nicht zum knackigen Arcade-Look und
   liessen Inhalte bis zum Scroll unsichtbar. Inhalte stehen jetzt sofort.
   !important schlaegt auch die Inline-Styles, die bk-motion.js vor seinen
   Stagger-Animationen setzt (el.style.opacity='0'). */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.plugins-mini-grid > *, .editor-tool-grid > *, .support-grid > *,
.account-plugins-grid > *, .pricing-grid > *,
.faq-grid > *, [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important; /* stoppt auch die anime.js-Stagger-Bewegung beim Scrollen */
}
.plugin-grid > * { opacity: 1 !important; }
/* Hero-Settle (Schrumpfen/Ausblenden beim Scrollen) aus — das war einer
   der Gruende, warum das Scrollen "eckte". */
.hero-pro-inner, [data-hero-content] {
  transform: none !important;
  opacity: 1 !important;
}
/* Parallax-Transforms (bk-motion data-parallax) neutralisieren */
[data-parallax] { transform: none !important; }
/* Grosse Muster-Flaechen auf eigene GPU-Layer heben (weniger Repaints) */
.site-bg, .trust-marquee, .hero-ground, .hero-sky {
  transform: translateZ(0);
  will-change: transform;
}
.plugin-mini, .faq-card { contain: layout paint; }
/* Pricing-Karten bewusst OHNE paint-Containment: die "Empfohlen"-Banderole
   (.badge-popular, onepage.css) ragt 14px ueber die Kartenoberkante und die
   harten Button-Schatten ragen ueber die Unterkante — contain:paint hatte
   beides an der Kartenkante abgeschnitten. layout-Containment (Perf) bleibt. */
.pricing-card { contain: layout; }
/* Sticker-Rotation der Plugin-Karten darf bleiben — deshalb hier kein
   pauschales transform:none auf den Grids. */
.hero-pro-wordmark .hpw-text,
.hero-pro-wordmark .hpw-text.is-arming {
  opacity: 1 !important;
  transform: none !important;
}
/* Kino-Wipe (.bk-cine aus bk-motion.js) ebenfalls aus — Sektionen stehen sofort */
.bk-cine,
.bk-cine .section-header,
.bk-cine .pricing-v2-section-head {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* ---- 18b. Letzte Politur ---------------------------------------------- */
/* Erste Wordmark-Zeile: solide Tinte statt Alt-Gradient */
.hero-pro-wordmark .hpw-line:not(.hpw-accent) .hpw-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--fg) !important;
  color: var(--fg) !important;
}
/* Hamburger & Toggle: eckig statt rund, egal welche Responsive-Regel */
.nav-hamburger, .theme-toggle, .nav-bell, .fab-toggle, .fab-back-top {
  border-radius: 0 !important;
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 2px solid var(--ink) !important;
}
.fab-toggle { background: var(--bk-grn) !important; color: #111 !important; border-width: 3px !important; }
.fab-back-top { background: var(--bk-yel) !important; color: #111 !important; border-width: 3px !important; }

/* ---- 20. Minecraft-Look: Hero-Sticker, Pixel-Font, Plugin-Karten ------ */

/* 20a. Hero: zentrierter Text, Grasblock-Sticker als Buehne DAHINTER.
   Ueberschreibt das alte Zwei-Spalten-Layout (hero-pro-split) komplett. */
.hero-pro.hero-pro-split,
.home-screen > .hero-pro-split {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-height: 0;
  padding-bottom: clamp(36px, 5vh, 64px);
}
/* Feste Spalte mit buendigen Kanten: Headline-Boxen, Tagline, Konsole,
   Buttons und Latest-Chip enden alle an derselben Linie. */
.hero-pro-split .hero-pro-inner,
.home-screen > .hero-pro-split .hero-pro-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  width: min(94vw, 620px);
  max-width: 620px;
  margin: 0 auto;
}
.hero-pro-split .hero-pro-badge { align-self: center; }
.hero-pro-split .hero-pro-wordmark { width: 100%; }
.hero-pro-split .hero-pro-wordmark .hpw-line { display: block; width: 100%; }
.hero-pro-split .hero-pro-wordmark .hpw-text {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.hero-pro-split .hero-pro-tagline {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  align-self: stretch;
}
.hero-pro-split .hero-pro-console {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.hero-pro-split .hero-pro-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}
.hero-pro-split .hero-pro-cta .btn { width: 100%; justify-content: center; box-sizing: border-box; }
.hero-pro-split .hero-pro-live {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
@media (max-width: 560px) {
  .hero-pro-split .hero-pro-cta { grid-template-columns: 1fr; }
}
/* === Minecraft-Welt-Querschnitt ======================================
   Der Hero ist eine Welt: Himmel (Tag/Nacht je Theme) mit Pixelwolken und
   Sonne/Mond, unten die Gras-Oberflaeche — darunter beginnt der Dirt-
   "Untergrund" (der braune Seitenhintergrund). Schwert, Block und Creeper
   stehen auf der Graskante. */
html[data-theme="light"] {
  --sky-top: #6FB7E8;
  --sky-bot: #BFE3F5;
  --cloud: #FFFFFF;
}
html:not([data-theme="light"]) {
  --sky-top: #0E1730;
  --sky-bot: #23324F;
  --cloud: #8E9AB5;
}
.hero-pro.hero-pro-split {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
  border-bottom: none;
  overflow: hidden;
  padding-bottom: 150px; /* Platz fuer den Grasboden */
}
.hero-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Sterne nur nachts */
html:not([data-theme="light"]) .hero-sky {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.85) 1.5px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 160px 140px, 90px 110px;
  background-position: 20px 30px, 60px 70px;
}
.hero-sun, .hero-moon {
  position: absolute;
  top: 56px;
  right: 7%;
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  box-shadow: var(--bs-2);
}
.hero-sun { background: #FDE047; display: block; }
.hero-moon { background: #E8E4D8; display: none; }
.hero-moon::after {
  content: "";
  position: absolute;
  inset: 8px auto auto 8px;
  width: 20px;
  height: 20px;
  background: rgba(20, 20, 20, 0.25);
}
html:not([data-theme="light"]) .hero-sun { display: none; }
html:not([data-theme="light"]) .hero-moon { display: block; }
.hero-cloud { position: absolute; width: 150px; height: auto; opacity: 0.95; }
.hero-cloud.hc-1 { top: 90px; left: 6%; animation: bk-drift 46s ease-in-out infinite alternate; }
.hero-cloud.hc-2 { top: 200px; right: 12%; width: 110px; animation: bk-drift 60s ease-in-out infinite alternate-reverse; }
.hero-cloud.hc-3 { top: 330px; left: 14%; width: 90px; opacity: 0.8; animation: bk-drift 52s ease-in-out 6s infinite alternate; }
@keyframes bk-drift {
  from { transform: translateX(0); }
  to { transform: translateX(90px); }
}
/* Gras-Oberflaeche: Blockreihe mit Fugen — der Horizont der Seite */
.hero-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 3px, transparent 3px 64px),
    linear-gradient(180deg,
      var(--grass) 0 32%,
      var(--grass-deep) 32% 44%,
      var(--dirt) 44% 82%,
      var(--dirt-deep) 82%);
  border-top: 4px solid var(--ink);
}
html:not([data-theme="light"]) .hero-ground { filter: brightness(0.8); }
.hero-scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 22px);
  margin-top: clamp(20px, 3vh, 36px);
  margin-bottom: -42px; /* Figuren stehen AUF der Graskante */
  pointer-events: none;
}
.hero-sticker-svg {
  width: min(30vw, 330px);
  height: auto;
  filter: drop-shadow(10px 14px 0 rgba(0, 0, 0, 0.30));
  animation: bk-bob 6.5s ease-in-out infinite;
  transform-origin: 50% 55%;
}
.hs-side .mc-item { filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.28)); }
/* Gemeinsame Grundlinie: Block-SVG hat unten ~46px Transparenz (Schattenraum),
   Schwert & Creeper stehen deshalb hoeher, damit alle auf einer Linie stehen. */
.hs-side { margin-bottom: 46px !important; }
.hs-sword-stuck { margin-bottom: 6px; }
.hs-sword-stuck .mc-item {
  width: clamp(64px, 7vw, 94px);
  height: auto;
  transform: rotate(-14deg);
  animation: bk-sway 5.2s ease-in-out infinite;
  transform-origin: 50% 92%;
}
.hs-creeper { margin-bottom: 2px; }
.hs-creeper .mc-item {
  width: clamp(70px, 8vw, 104px);
  height: auto;
  animation: bk-bob 4.6s ease-in-out 0.8s infinite;
}
@keyframes bk-bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-14px) rotate(1.2deg); }
}
@keyframes bk-sway {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sticker-svg, .hs-sword-stuck .mc-item, .hs-creeper .mc-item { animation: none; }
}
@media (max-width: 860px) {
  .hero-sticker-svg { width: min(52vw, 260px); }
}
/* Hero-Zeilen als Sticker-Boxen: Zeile 1 = Ink-Box, Zeile 2 = Gruen-Box */
.hero-pro-wordmark { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-pro-wordmark .hpw-line:not(.hpw-accent) .hpw-text {
  background: var(--ink) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  display: inline-block;
  padding: 0 0.2em;
  border: 3px solid var(--ink);
  box-shadow: var(--bs-2);
  transform: none;
}
.hero-pro-wordmark .hpw-accent .hpw-text { transform: none; }
.hero-pro-tagline,
html[data-theme="light"] .hero-pro-tagline {
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: var(--bs-1);
  padding: 10px 18px;
  display: inline-block;
  max-width: 560px;
}
.hero-pro-console {
  background: var(--surface) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: var(--bs-1);
  border-radius: 0 !important;
}
.hero-pro-live {
  background: var(--surface) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--bs-1);
}
.hero-pro-cta { justify-content: center; }

/* 20b. Pixel-Font (Silkscreen) fuer Arcade-Akzente */
.eyebrow, .hero-pro-badge, .modern-hero-pill,
.chip, .tag, .badge,
.plugin-mini-price, .plugin-mini-spec, .plugin-mini-eyebrow,
.hero-pro-live-label, .trust-marquee {
  font-family: var(--font-tag);
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Silkscreen rastert nur bei ganzzahligen Pixelgroessen scharf — die krummen
   rem-Werte aus pages.css (0.72rem = 11.52px etc.) machten Chips weich.
   line-height 1.35: der zweizeilige Fusszeilen-CTA („✓ Im Abo enthalten")
   braucht Luft zwischen den Pixel-Zeilen und darf nie beschnitten werden —
   einzeilige Chips bleiben durch min-height:36px (pages.css) gleich hoch. */
.plugin-mini-price { font-size: 13px; line-height: 1.35; height: auto; overflow: visible; }
.plugin-mini-spec { font-size: 11px; }
.plugin-mini-eyebrow { font-size: 11px; }
.trust-marquee { font-size: 0.82rem; }

/* 20c. Plugin-Karten: Grasblock-Media statt dunkler Alt-Renderings.
   Die alten dunklen Karten-Bilder passen nicht zur Creme/Dirt-Welt —
   stattdessen Gras-Band + Dirt-Flaeche + grosses Emblem im Sticker-Rahmen. */
.plugin-mini-media img,
.plugin-mini-media picture,
.plugin-mini-media .plugin-mini-placeholder,
.plugin-mini-media .plugin-mini-spotlight {
  display: none !important;
}
.plugin-mini-media,
html[data-theme="light"] .plugin-mini-media,
html:not([data-theme="light"]) .plugin-mini-media {
  position: relative;
  min-height: 148px;
  background:
    linear-gradient(180deg,
      var(--grass) 0, var(--grass) 24%,
      var(--grass-deep) 24%, var(--grass-deep) 32%,
      var(--dirt) 32%, var(--dirt) 78%,
      var(--dirt-deep) 78%) !important;
  border-bottom: 3px solid var(--ink);
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
.plugin-mini-media::before { content: none !important; }
.plugin-mini-media::after {
  /* Pixel-Schimmer im Media-Feld */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(rgba(255, 245, 225, 0.06) 0% 25%, rgba(0, 0, 0, 0.05) 0% 50%);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Altes Icon-Emblem weicht dem unikaten Plugin-Sticker-Motiv */
.plugin-mini-emblem { display: none !important; }
.plugin-mini-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.plugin-sticker-svg {
  width: min(58%, 150px);
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.28));
  transition: transform 0.2s var(--ease-out, ease);
}
.plugin-mini-link:hover .plugin-sticker-svg,
.plugin-mini-link:focus-visible .plugin-sticker-svg {
  transform: translateY(-4px) rotate(-2deg) scale(1.04);
}
.plugin-mini {
  background: var(--surface);
  /* Text-Schaerfe: der Glass-Blur (pages.css backdrop-filter) und der
     3D-Layer (base.css transform-style:preserve-3d) zwingen die Karte auf
     einen GPU-Layer und rastern den Karten-Text weich. Die Flaeche ist im
     Brutal-Theme ohnehin deckend — beides hier aus. Der Voxel-Wuerfel-Badge
     behaelt sein eigenes preserve-3d und bleibt davon unberuehrt. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform-style: flat;
}

/* 20d. Plugin-Detailseite (pdv3): kantig + Dirt/Creme statt Alt-Radius.
   html-Prefix noetig, damit die Regel !important-Regeln mit
   html[data-theme]-Spezifitaet aus onepage.css schlaegt. */
[class^="pdv3"], [class*=" pdv3"],
html[data-theme="light"] [class^="pdv3"], html[data-theme="light"] [class*=" pdv3"],
html:not([data-theme="light"]) [class^="pdv3"], html:not([data-theme="light"]) [class*=" pdv3"] {
  border-radius: 0 !important;
}
/* Hero-Taglines: volle Deckkraft auf Dirt-Braun (Alt-Regel nutzt 58% Alpha) */
.hero-pro-tagline, .modern-hero-sub,
html[data-theme="light"] .hero-pro-tagline, html[data-theme="light"] .modern-hero-sub {
  color: var(--fg-dim) !important;
  opacity: 1 !important;
}
.pdv3-card, .pdv3-acc, .pdv3-aside {
  border: 3px solid var(--ink);
  box-shadow: var(--bs-2);
  background: var(--surface);
}
/* Sektionen selbst rahmenlos — sonst Box-in-Box-Doppelrahmen */
html body .pdv3-section, html body.plugin-fit .pdv3-section {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.pdv3 img { border: 2px solid var(--ink); border-radius: 0 !important; }

/* 20e. Sektions-Trenner & Voxel-Tiles im Dirt-Ton */
.vx-divider .vx-tile, .vx-footer-row .vx-tile { border: 2px solid var(--ink); }

/* ---- 25. Plugin-Uebersicht: Abo-Gruppen + Status-Badges ---------------- */
.plugin-group { margin-bottom: clamp(34px, 5vh, 56px); }
.plugin-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.plugin-group-label {
  font-family: var(--font-tag);
  /* Ganzzahlige px fuer die Pixel-Schrift (0.82rem = 13.12px → weich). */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  box-shadow: var(--bs-1);
}
.plugin-group-abo .plugin-group-label { background: var(--bk-grn); color: #111111; }
.plugin-group-owned .plugin-group-label { background: var(--bk-cyn); color: #111111; }
.plugin-group-free .plugin-group-label { background: #FAF5EC; color: #111111; }
.plugin-group-coming .plugin-group-label { background: var(--bk-yel); color: #111111; }
/* Abo-only Modell: Tier-Gruppen fuer Betrachter ohne Abo — Pro gelb,
   Enterprise violett (weisse Schrift), passend zu den Karten-Badges. */
.plugin-group-pro .plugin-group-label { background: var(--bk-yel); color: #111111; }
.plugin-group-enterprise .plugin-group-label { background: var(--bk-pur); color: #FFFFFF; }
.plugin-group-count {
  font-family: var(--font-tag);
  font-size: 12px;
  font-weight: 700;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--ink);
  color: var(--fg);
}
.plugin-group-hint {
  font-size: 0.92rem;
  color: var(--fg-dim);
  font-weight: 500;
}
.plugin-group-head::after {
  content: "";
  flex: 1 1 60px;
  height: 3px;
  background: var(--ink);
  opacity: 0.25;
  min-width: 40px;
}
/* Status-Badge oben links im Karten-Media */
.plugin-mini-state {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-family: var(--font-tag);
  /* 11px statt 0.66rem (=10.56px): Pixel-Schrift nur bei ganzen px scharf. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--paper);
  color: #111111;
}
.plugin-mini-state.st-abo { background: var(--bk-grn); }
.plugin-mini-state.st-owned { background: var(--bk-cyn); }
/* Abo-only Modell: Tier-Badges — FREE gruen, PRO gelb, ENTERPRISE violett.
   Das alte "Einzeln"-Badge (st-single) ist ersatzlos entfallen. */
.plugin-mini-state.st-free { background: var(--bk-grn); color: #111111; }
.plugin-mini-state.st-pro { background: var(--bk-yel); color: #111111; }
.plugin-mini-state.st-ent { background: var(--bk-pur); color: #FFFFFF; }
.plugin-mini-state.st-coming { background: var(--bk-yel); }
/* Core-Flag ("★ Core", oben rechts): war der Geister-Pill — voxel.css legte
   Emerald-Wash auf Emerald-Text, auf dem Grasgruen des Brutal-Media-Bands
   praktisch unsichtbar. Jetzt satte Flaeche + Ink-Rahmen + harter Schatten
   wie die Status-Badges, in der Pixel-Schrift. */
.plugin-mini-media .plugin-mini-core-flag {
  z-index: 5;
  font-family: var(--font-tag);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  /* bk-yel ist in Light + Dark identisch — Text darf fest dunkel sein. */
  background: var(--bk-yel);
  color: #111111;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink);
}
/* Abo-Karten bekommen zusaetzlich einen gruenen Rahmen-Akzent */
.plugin-group-abo .plugin-mini { border-color: var(--bk-grn); }

/* ---- 24. Plugin-Detail: Ausrichtung & Ruhe ----------------------------- */
/* Eyebrows global: nie mehr volle Breite / Schraeglage in Flex-Spalten
   (das war das riesige schiefe Band auf der Detailseite). */
.eyebrow {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  transform: none;
}
/* Kopfbereich als sauberes Raster: Icon | Titelblock | Kauf-Cluster rechts */
html body .pdv3-resource-head,
html body.plugin-fit .pdv3-resource-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  background: var(--surface) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--bs-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 860px) {
  html body .pdv3-resource-head { grid-template-columns: 1fr; text-align: center; }
  html body .pdv3-resource-head .eyebrow { align-self: center; margin: 0 auto; }
  html body .pdv3-head-cta { align-items: center !important; text-align: center; }
}
html body .pdv3-resource-icon {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: var(--bs-1);
}
html body .pdv3-head-cta,
html body.plugin-fit .pdv3-head-cta {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end !important;
  gap: 8px;
  margin-left: auto;
  grid-column: 3 !important;
  grid-row: 1 !important;
}
html body .pdv3-head-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Sektions-Label: kompakte Box statt endloser Balken */
.pdv3-sechead { gap: 10px; }
.pdv3-sechead::before { display: none; }
html body .pdv3-sechead-label,
html body.plugin-fit .pdv3-sechead-label {
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: 5px 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* Beschreibungs-Szene im Shop-Karten-Look (Gras-Band + Dirt + Sticker) */
.pdv3-scene {
  display: grid;
  place-items: center;
  min-height: 250px;
  height: 100%;
  background:
    linear-gradient(180deg,
      var(--grass) 0, var(--grass) 22%,
      var(--grass-deep) 22%, var(--grass-deep) 30%,
      var(--dirt) 30%, var(--dirt) 80%,
      var(--dirt-deep) 80%);
  border: 2px solid var(--ink);
}
.pdv3-scene .plugin-sticker-svg {
  width: min(60%, 210px);
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.28));
}
html body .pdv3-image {
  border: none;
  border-radius: 0 !important;
  overflow: hidden;
  background: transparent;
}
/* Pro-Empfehlung (Aside): klare Karte statt Farb-Mischmasch */
html body .pdv3-abo-card {
  background: var(--surface) !important;
  border: 3px solid var(--bk-grn) !important;
  border-radius: 0 !important;
  box-shadow: var(--bs-2) !important;
  color: var(--fg);
}
html body .pdv3-abo-flag {
  background: var(--bk-grn) !important;
  color: #111111 !important;
  border: 2px solid var(--ink);
  border-radius: 0 !important;
  font-weight: 800;
}
html body .pdv3-abo-save {
  background: var(--bk-yel) !important;
  color: #111111 !important;
  border: 2px solid var(--ink);
  border-radius: 0 !important;
}
/* Meta-Chips (Version/Groesse) buendig zur Titelspalte */
.pdv3-resource-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---- 23. Plugin-Detail: Reiter statt Info-Wand ------------------------- */
/* Die Stats-/Anker-Chip-Doppelreihe fliegt raus — die Tabs uebernehmen. */
.pdv3-glance { display: none !important; }
/* Doppelte Zusammenfassung (steht schon im Kopf) im Uebersicht-Tab aus */
#pdv3-sec-overview .pdv3-summary { display: none; }
.pdv3-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 20px;
}
/* html+body-Prefix noetig: onepage.css setzt body.plugin-fit .pdv3-tab
   mit !important (Glas-Pillen) — diese Selektoren muessen gewinnen. */
html body .pdv3-tab,
html body.plugin-fit .pdv3-tab {
  font-family: var(--font-tag);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 11px 18px;
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--bs-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
html body .pdv3-tab:hover,
html body.plugin-fit .pdv3-tab:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bs-2);
  background: var(--surface) !important;
  color: var(--fg) !important;
}
html body .pdv3-tab.is-active,
html body.plugin-fit .pdv3-tab.is-active,
html body.plugin-fit .pdv3-tab.is-active:hover {
  background: var(--bk-grn) !important;
  color: #111111 !important;
  border-color: var(--ink) !important;
  box-shadow: var(--bs-2);
}
/* Alt-Styles aus pages.css neutralisieren (roter Unterstrich, Glas-Leiste) */
.pdv3-tab::after { display: none !important; }
html body .pdv3-tabs,
html body.plugin-fit .pdv3-tabs {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
}
.pdv3-section.pdv3-tab-hidden { display: none !important; }

/* Download-Kaechstchen: Buttons standen rechts ueber den Rand hinaus —
   jetzt gestapelt und volle Breite, Text darf umbrechen. */
.pdv3-downloads .artifact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.pdv3-downloads .artifact > div { min-width: 0; }
.pdv3-downloads .artifact .btn,
.pdv3-aside .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  justify-content: center;
}
.pdv3-aside, .pdv3-buy, .pdv3-downloads { min-width: 0; overflow: hidden; }

/* ---- 22. Minecraft-Items: Cursor, Deko-Reihen, Footer-Creeper ---------- */
/* Diamantschwert als Mauszeiger ("Schwert als Pfeil"), Gold-Schwert auf
   klickbaren Elementen. Fallback auto/pointer bleibt erhalten. */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23141414' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpolygon points='3,3 10,3 24,17 17,24' fill='%237DE3F0'/%3E%3Crect x='14' y='20' width='12' height='5' rx='1.5' transform='rotate(45 20 22.5)' fill='%238A5A34'/%3E%3Crect x='21' y='22' width='5' height='9' rx='1.5' transform='rotate(45 23.5 26.5)' fill='%2357381D'/%3E%3C/g%3E%3C/svg%3E") 3 3, auto;
}
a, button, [role="button"], .btn, select, summary, label, input[type="checkbox"], input[type="radio"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23141414' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpolygon points='3,3 10,3 24,17 17,24' fill='%23FACC15'/%3E%3Crect x='14' y='20' width='12' height='5' rx='1.5' transform='rotate(45 20 22.5)' fill='%238A5A34'/%3E%3Crect x='21' y='22' width='5' height='9' rx='1.5' transform='rotate(45 23.5 26.5)' fill='%2357381D'/%3E%3C/g%3E%3C/svg%3E") 3 3, pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], textarea { cursor: text; }
body.admin-page, body.admin-page * { cursor: auto; }
body.admin-page a, body.admin-page button, body.admin-page .btn,
body.admin-page select, body.admin-page summary, body.admin-page label { cursor: pointer; }

/* Item-Reihen unter Sektions-Ueberschriften */
.mc-items {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  margin: 14px 0 4px;
}
.mc-items .mc-item {
  width: 36px;
  height: 36px;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.25));
}
.mc-items .mc-item:nth-child(odd) { transform: rotate(-8deg); }
.mc-items .mc-item:nth-child(even) { transform: rotate(6deg) translateY(-3px); }

/* Creeper lugt ueber die Footer-Kante */
.footer { position: relative; }
.footer-creeper {
  position: absolute;
  right: clamp(20px, 6vw, 90px);
  top: -66px;
  pointer-events: none;
}
.footer-creeper .mc-creeper {
  width: 64px;
  height: auto;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.3));
  animation: bk-peek 7s ease-in-out infinite;
}
@keyframes bk-peek {
  0%, 82%, 100% { transform: translateY(14px); }
  10%, 72% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .footer-creeper .mc-creeper { animation: none; } }
body.admin-page .footer-creeper { display: none; }
/* Hero-Badge gerade ausrichten (alles in einer sauberen Mittelachse) */
.hero-pro-badge, .modern-hero-pill { transform: none; }

/* ---- 21. Admin-Rettung ------------------------------------------------- */
/* Der Admin-Bereich behaelt sein eigenes dunkles Studio-Design. Zwei Fixes:
   (a) Die hellen Brutal-Tokens sickerten in die dunklen Admin-Panels
       (dunkler Text auf dunklem Grund) — hier werden die Tokens fuer
       body.admin-page zurueck auf das dunkle Original gemappt.
   (b) admin.css (alter App-Shell-Modus) pinnt .admin-content per !important
       auf Grid-Zeile 5 und die Sidebar auf Zeile 2, obwohl die Shell laengst
       wieder ein normales 2-Spalten-Grid ist -> 4 leere Zeilen = riesiges
       Loch, Inhalt rutscht unter die Sidebar. Zeilen-Pins hier neutralisiert. */
body.admin-page {
  --bg: #06070A;
  --bg-2: #0B0D12;
  --bg-elev-1: #0B0D12;
  --surface: #10131A;
  --surface-2: #171B24;
  --surface-inset: #0A0C11;
  --fg: #F2F5F7;
  --fg-dim: #AEB6C2;
  --fg-mute: #7E8794;
  --ink: #F2F5F7;
  --paper: #0B0D12;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --ring: rgba(52, 211, 153, 0.55);
  --brand: #34D399;
  --brand-strong: #10B981;
  --brand-deep: #059669;
  --brand-soft: #6EE7B7;
  --brand-ink: #04140E;
  --brand-gradient: linear-gradient(135deg, #6EE7B7 0%, #34D399 45%, #10B981 100%);
  --brand-glow: rgba(52, 211, 153, 0.30);
  --brand-wash: rgba(52, 211, 153, 0.08);
  --gold-line: rgba(52, 211, 153, 0.28);
  --premium: #E9C46A;
  /* Admin bleibt beim ruhigen Studio-Look: weiche Schatten + Radius zurueck */
  --bs-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --bs-2: 0 4px 16px -6px rgba(0, 0, 0, 0.45);
  --bs-3: 0 16px 40px -18px rgba(0, 0, 0, 0.60);
  --bs-4: 0 30px 70px -28px rgba(0, 0, 0, 0.70);
  --radius: 20px; --radius-lg: 20px; --radius-xl: 28px;
  --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --radius-pill: 999px;
  --font-display: 'Space Grotesk', 'Satoshi', system-ui, sans-serif;
  background: var(--bg);
}
body.admin-page h1, body.admin-page h2,
body.admin-page .section-header h2 {
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 700;
}
body.admin-page .site-bg { background-image: none; }
body.admin-page .eyebrow {
  transform: none;
  background: transparent;
  color: var(--brand);
  padding: 0;
  align-self: flex-start;
}
/* (b) Stale App-Shell-Grid-Pins neutralisieren — Shell ist ein normales
   2-Spalten-Grid (Sidebar links, Inhalt rechts, beide in Zeile 1). */
html body.admin-page .admin-sidebar {
  grid-row: auto !important;
  grid-column: auto !important;
  height: auto !important;
}
html body.admin-page .admin-content {
  grid-row: auto !important;
  grid-column: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
html body.admin-page .admin-stat-strip,
html body.admin-page .message,
html body.admin-page .hero.hero-compact {
  grid-row: auto !important;
  grid-column: auto !important;
}

/* 21b. Admin "Simple & Modern": weniger Laerm, mehr Luft, klare Bedienung.
   Der laute Brutal-Look (3px-Borders, harte Schatten, Hover-Verschiebung)
   bleibt dem Shop vorbehalten — der Admin wird ruhig und aufgeraeumt. */
body.admin-page .btn {
  border-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600;
}
body.admin-page .btn:hover { transform: none !important; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5) !important; }
body.admin-page .btn-primary { background: var(--brand) !important; color: #04140E !important; border-color: transparent !important; }
body.admin-page .btn-ghost { background: rgba(255, 255, 255, 0.04) !important; color: var(--fg) !important; }
body.admin-page .btn-danger { background: rgba(240, 97, 109, 0.14) !important; color: #F0616D !important; border-color: rgba(240, 97, 109, 0.4) !important; }
body.admin-page input[type="text"], body.admin-page input[type="email"],
body.admin-page input[type="password"], body.admin-page input[type="number"],
body.admin-page input[type="search"], body.admin-page input[type="url"],
body.admin-page textarea, body.admin-page select {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  background: var(--surface-inset) !important;
  color: var(--fg) !important;
  padding: 10px 12px;
  box-shadow: none !important;
}
body.admin-page input:focus, body.admin-page textarea:focus, body.admin-page select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18) !important;
  outline: none;
}
/* Gleichmaessiger Rhythmus zwischen den Panels */
html body.admin-page .admin-content {
  display: flex !important;
  flex-direction: column;
  gap: 22px;
}
body.admin-page details > summary { padding: 12px 14px; border-radius: 10px; }
body.admin-page details, body.admin-page .faq-item { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; }
body.admin-page th { background: rgba(255, 255, 255, 0.05); color: var(--fg-dim); text-transform: none; letter-spacing: 0.02em; }
body.admin-page td { border-color: rgba(255, 255, 255, 0.07); }
body.admin-page ::selection { background: rgba(52, 211, 153, 0.3); color: #F2F5F7; }

/* ---- 26. Simpler & Uebersichtlicher ------------------------------------ */
/* 26a. Hero-Text entruempelt: nur noch EINE Box (die gruene PLUGINS-Zeile).
   Zeile 1 = freie Riesen-Schrift mit Sticker-Schatten, Tagline = freier
   Text, Fake-Konsole raus, Buttons + Latest-Chip kompakt zentriert. */
html[data-theme="light"] { --hero-title-shadow: rgba(255, 255, 255, 0.8); }
html:not([data-theme="light"]) { --hero-title-shadow: rgba(0, 0, 0, 0.55); }
.hero-pro-split .hero-pro-console { display: none !important; }
html body .hero-pro-wordmark .hpw-line:not(.hpw-accent) .hpw-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: 6px 6px 0 var(--hero-title-shadow);
}
html body .hero-pro-split .hero-pro-tagline,
html[data-theme="light"] .hero-pro-split .hero-pro-tagline {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 1.15rem;
  align-self: center;
  max-width: 520px;
}
.hero-pro-split .hero-pro-cta {
  display: flex !important;
  width: auto;
  align-self: center;
  gap: 16px;
}
.hero-pro-split .hero-pro-cta .btn { width: auto; padding-inline: 30px; }
.hero-pro-split .hero-pro-live {
  width: fit-content;
  align-self: center;
  padding-inline: 18px;
}

/* 26b. Plugin-Detail: doppelter Kopf raus (der grosse Hero wiederholte nur
   Titel + Tagline der Titelkarte), Hinweistexte + Abo-Werbetext gekuerzt,
   Pro-Karte kompakt. */
body.plugin-fit .hero-pro.hero-pro-sm { display: none !important; }
body.plugin-fit .pdv3 { padding-top: clamp(24px, 4vh, 44px); }
.pdv3-sechead-hint { display: none !important; }
html body .pdv3-abo-msg { display: none !important; }
html body .pdv3-abo-card { padding: 16px 18px !important; }
html body .pdv3-abo-price strong { font-size: 1.7rem; }
/* Feature-Zeilen statt Kacheln (V4): komplett rahmenlos — Icon-Chip +
   Titel + 1-Zeilen-Beschreibung, Layout kommt aus pages.css (PDV3 V4). */
#pdv3-sec-features .pdv3-doc-features > *,
#pdv3-sec-features .pdv3-features > * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 26b-V4: Tabs sitzen buendig AUF dem Content-Panel (verbunden statt
   schwebend). Ueberschreibt die aelteren Tab-Regeln aus Sektion 23 nur im
   neuen .pdv3v4-tabbox-Kontext. Kontrast-Offensive: inaktive Tabs in INK
   mit Creme-Text (wie der Navbar-Logo-Chip); im Dark-Theme invertieren
   die Tokens automatisch (helle Flaeche, dunkler Text). Aktiv bleibt
   GRUEN mit schwarzem Text (Sektion 23). */
html body .pdv3v4-tabbox .pdv3-tabs,
html body.plugin-fit .pdv3v4-tabbox .pdv3-tabs {
  margin: 0 !important;
  padding: 0 0 0 clamp(12px, 2vw, 20px) !important;
  position: relative;
  z-index: 2;
}
html body .pdv3v4-tabbox .pdv3-tab,
html body.plugin-fit .pdv3v4-tabbox .pdv3-tab {
  margin-bottom: -3px;
  box-shadow: none;
  position: relative;
}
html body .pdv3v4-tabbox .pdv3-tab:not(.is-active),
html body.plugin-fit .pdv3v4-tabbox .pdv3-tab:not(.is-active) {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
/* Hover: leichtes Lift, Farben bleiben (aktiv deckt Sektion 23 ab). */
html body .pdv3v4-tabbox .pdv3-tab:hover,
html body.plugin-fit .pdv3v4-tabbox .pdv3-tab:hover {
  transform: translateY(-2px) !important;
  box-shadow: none;
}
html body .pdv3v4-tabbox .pdv3-tab:not(.is-active):hover,
html body.plugin-fit .pdv3v4-tabbox .pdv3-tab:not(.is-active):hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
html body .pdv3v4-tabbox .pdv3-tab.is-active,
html body.plugin-fit .pdv3v4-tabbox .pdv3-tab.is-active {
  box-shadow: none;
}
@media (max-width: 900px) {
  /* Schmale Screens: Tabs als horizontale Scroll-Reihe (kein Umbruch);
     der -3px-Ueberlapp entfaellt, weil overflow-x den Ueberhang clippen
     wuerde — Panel schliesst direkt darunter an. */
  html body .pdv3v4-tabbox .pdv3-tabs,
  html body.plugin-fit .pdv3v4-tabbox .pdv3-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    -webkit-overflow-scrolling: touch;
  }
  html body .pdv3v4-tabbox .pdv3-tab,
  html body.plugin-fit .pdv3v4-tabbox .pdv3-tab {
    margin-bottom: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* 26c-V4 (Runde 21): Bewertungen als eigener Karten-Block UNTER dem
   Tab-Panel — exakt die Panel-Optik (Creme, 3px Ink, Offset-Schatten,
   gleiches Innen-Padding), Überschrift „■ Bewertungen" sitzt IM Block.
   Muss den Sektions-Reset aus 20e („html body .pdv3-section { border/
   box-shadow/background … !important }") und das onepage-Padding-Reset
   (body.plugin-fit .pdv3-section { padding: 0 !important }) überstimmen:
   gleiche bzw. höhere Spezifität, später in der letzten Datei der Kaskade. */
html body .pdv3v4-reviews-block,
html body.plugin-fit .pdv3v4-reviews-block {
  background: var(--surface) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: var(--bs-2) !important;
  padding: clamp(20px, 3vw, 32px) !important;
}

/* ---- 19. Fokus sichtbar (Accessibility) ------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bk-pur);
  outline-offset: 2px;
  border-radius: 0;
}