/* Developed by Enjyn Gruppe — https://enjyn.de */
/*
 * Neo-Brutalism-Layer fuer alle oeffentlichen Unterseiten.
 * Wird NACH dem seiteneigenen <style> geladen und ueberschreibt die gemeinsamen
 * CSS-Variablen (Farben, Fonts, Schatten) auf den Brutalism-Look der Startseite.
 * Zusaetzlich: dicke Rahmen, harte Offset-Schatten und die Hover-Animationen
 * (3D-Kipp + farbiger Schatten) aus der Design-Vorlage.
 */
@import url('https://fonts.eg-core.de/css2?family=Fredoka:wght@500;600;700&family=Mulish:wght@400;500;600;700;800;900&display=swap');

:root, [data-theme="light"] {
  --bg: #F4F1FC; --bg-alt: #EDE6FE;
  --surface: #ffffff; --surface-solid: #ffffff;
  --ink: #1A1430; --lime: #C7F23E;
  --border: #1A1430; --border-light: rgba(26,20,48,0.12);
  --text-primary: #1A1430; --text-secondary: #544D6B; --text-tertiary: #9A93AD;
  --accent: #6B34F5; --accent-dark: #5A28D8;
  --accent-light: rgba(107,52,245,0.10); --accent-rgb: 107,52,245; --accent-glow: rgba(107,52,245,0.25);
  --success: #1FB979; --warning: #F5A623;
  --font-display: 'Fredoka', sans-serif; --font-body: 'Mulish', sans-serif;
  --tf-display: 'Fredoka', sans-serif; --tf-body: 'Mulish', sans-serif;
  --radius-lg: 20px; --radius-md: 16px; --radius-sm: 12px;
  --shadow-card: 4px 4px 0 #1A1430; --shadow-hover: 7px 7px 0 #1A1430;
  --gradient-accent: #6B34F5; --gradient-hero: #6B34F5;
}
[data-theme="dark"] {
  --bg: #15101F; --bg-alt: #1E1730;
  --surface: #221A33; --surface-solid: #221A33;
  --ink: #0D0A16; --border: #0D0A16; --border-light: rgba(255,255,255,0.12);
  --text-primary: #F0ECF9; --text-secondary: #B7AECB; --text-tertiary: #8A82A0;
  --accent: #8B5CF6; --accent-light: rgba(199,242,62,0.12); --accent-rgb: 139,92,246;
  --shadow-card: 4px 4px 0 #0D0A16; --shadow-hover: 7px 7px 0 #0D0A16;
  --gradient-hero: #5A28D8;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #15101F; --bg-alt: #1E1730;
    --surface: #221A33; --surface-solid: #221A33;
    --ink: #0D0A16; --border: #0D0A16; --border-light: rgba(255,255,255,0.12);
    --text-primary: #F0ECF9; --text-secondary: #B7AECB; --text-tertiary: #8A82A0;
    --accent: #8B5CF6; --accent-light: rgba(199,242,62,0.12); --accent-rgb: 139,92,246;
    --shadow-card: 4px 4px 0 #0D0A16; --shadow-hover: 7px 7px 0 #0D0A16;
    --gradient-hero: #5A28D8;
  }
}

body { font-family: 'Mulish', sans-serif; }
h1, h2, h3,
.pp-hero-title, .pp-faq-h, .pricing-name, .product-detail-title,
.blog-card-title, .blog-hero-title, .bp-title, .bp-related-card-title,
.faq-q, .tool-card-name, .rg-hero h1, .rg-why-card h3, .rg-prod-card h3,
.section-title, .pd-faq-title {
  font-family: 'Fredoka', sans-serif !important;
}

/* ── Karten: dicker Rahmen + harter Schatten + 3D-Kipp-Hover ── */
.pricing-card, .app-card, .loc-card, .mysql-card, .noip-card, .enjyn-service-card,
.step-card, .tool-card, .blog-card, .bp-related-card, .faq-item,
.rg-prod-card, .rg-why-card, .rg-faq, .game-detail,
.pp-faq-list > details, .pd-faq {
  border: 3px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--surface-solid);
  transition: transform .42s cubic-bezier(.2,.7,.25,1.25), box-shadow .42s cubic-bezier(.2,.7,.25,1.25) !important;
}
/* FAQ-Liste: kein Sammel-Container-Rahmen, jede Frage trägt ihren eigenen Schatten */
.pp-faq-list { border: none !important; box-shadow: none !important; background: transparent !important; display: flex; flex-direction: column; gap: 14px; }
.pp-faq-list > details { padding: 4px 4px; }
.app-card:hover, .loc-card:hover, .mysql-card:hover, .noip-card:hover,
.enjyn-service-card:hover, .step-card:hover, .tool-card:hover,
.rg-why-card:hover, .blog-card:hover, .bp-related-card:hover {
  transform: perspective(900px) rotateX(6deg) translateY(-8px) !important;
  box-shadow: 9px 16px 0 var(--lime) !important;
}
.pricing-card:hover, .rg-prod-card:hover {
  transform: perspective(900px) rotateX(6deg) translateY(-8px) !important;
  box-shadow: 9px 16px 0 var(--accent) !important;
}

/* ── kleinere Karten / Chips ── */
.game-chip, .domain-card, .blog-filter-chip, .blog-card-tag, .loc-badge {
  border: 2px solid var(--border) !important;
  border-radius: 999px;
}
.game-chip, .domain-card { border-radius: 12px !important; box-shadow: 2px 2px 0 var(--ink); transition: transform .25s, box-shadow .25s; }
.game-chip:hover, .domain-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--lime); }

/* ── Primaer-Buttons: Lime + Ink-Rahmen + Schatten ── */
.hero-btn-light, .pp-hero-cta, .product-detail-cta, .t-btn, .rg-btn-primary,
.blog-bottom-cta-btn, .bp-cta, .faq-footer-btn, .mc-free-cta {
  background: var(--lime) !important; color: var(--ink) !important;
  border: 3px solid var(--ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.hero-btn-light:hover, .pp-hero-cta:hover, .product-detail-cta:hover, .t-btn:hover,
.rg-btn-primary:hover, .blog-bottom-cta-btn:hover, .bp-cta:hover,
.faq-footer-btn:hover, .mc-free-cta:hover {
  transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 var(--ink) !important;
}

/* ── Sekundaer/Ghost-Buttons ── */
.hero-btn-ghost, .t-btn-ghost, .rg-btn-ghost, .product-share-btn {
  border: 3px solid var(--ink) !important; border-radius: 14px !important;
  background: var(--surface-solid) !important; color: var(--text-primary) !important;
  font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important;
  box-shadow: 4px 4px 0 var(--ink) !important; transition: transform .15s, box-shadow .15s !important;
}
.hero-btn-ghost:hover, .t-btn-ghost:hover, .rg-btn-ghost:hover, .product-share-btn:hover {
  transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 var(--ink) !important;
}

/* ── Hero-Bereiche der Unterseiten: Lila + Punktraster, abgerundet ── */
.pp-hero, .blog-hero, .rg-hero, .tools-head, .au-hero, .faq-header {
  background-color: #6B34F5 !important;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.5px, transparent 1.6px) !important;
  background-size: 26px 26px !important;
  border: 3px solid var(--ink) !important;
  border-radius: 20px !important;
  color: #fff;
  padding: 44px 28px !important;
}
.pp-hero-title, .blog-hero h1, .rg-hero h1, .tools-head .tools-h1, .au-hero h1, .faq-header h1 {
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important;
  text-shadow: 4px 4px 0 var(--ink) !important;
}
.blog-hero p, .rg-hero p, .rg-hero-lead, .pp-hero-tag, .pp-hero .pp-hero-eyebrow,
.tools-head .tools-sub, .au-hero .lead, .faq-header p { color: rgba(255,255,255,0.85) !important; }
/* Hero-Visual-Icons auf dem Lila-Hero kontrastreich (statt Produkt-Akzent auf Lila) */
.pp-hero-visual svg [stroke] { stroke: rgba(255,255,255,0.92) !important; }
.pp-hero-visual svg [fill]:not([fill="none"]) { fill: rgba(255,255,255,0.16) !important; }
.pp-hero-glow { display: none !important; }

.au-hero .brand-inline { color: var(--lime) !important; }
.au-hero .hero-pill { background: rgba(255,255,255,0.12) !important; border: 2px solid rgba(255,255,255,0.4) !important; color: #fff !important; }
.au-hero .hero-pill b { color: var(--lime) !important; }

/* ── Eyebrow / Section-Labels ── */
.pp-hero-eyebrow, .section-label { font-weight: 800 !important; letter-spacing: .14em !important; }

/* ── Kostenloser-Minecraft-Server (mc-*) ── */
.mc-hero {
  background-color: #6B34F5 !important;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.5px, transparent 1.6px) !important;
  background-size: 26px 26px !important;
  border: 3px solid var(--ink) !important; border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--ink) !important; color: #fff !important;
}
.mc-hero h1 { color: #fff !important; text-shadow: 4px 4px 0 var(--ink); }
.mc-hero h1 .hl { -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; background: none !important; }
.mc-hero-lead { color: rgba(255,255,255,0.85) !important; }
.mc-eyebrow { color: var(--ink) !important; background: var(--lime) !important; border: 2px solid var(--ink) !important; font-weight: 800 !important; }
.mc-step, .mc-spec, .mc-fair, .mc-final, .mc-upgrade, .mc-faq > details {
  border: 3px solid var(--border) !important; border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .42s cubic-bezier(.2,.7,.25,1.25), box-shadow .42s cubic-bezier(.2,.7,.25,1.25) !important;
}
.mc-step:hover, .mc-spec:hover { transform: perspective(900px) rotateX(6deg) translateY(-8px) !important; box-shadow: 9px 16px 0 var(--lime) !important; }
.mc-step-num { background: #6B34F5 !important; color: var(--lime) !important; border: 3px solid var(--ink) !important; border-radius: 10px !important; }
/* FAQ-Liste: jede Frage eigene Karte mit Schatten, kein Sammel-Container */
.mc-faq { border: none !important; box-shadow: none !important; background: transparent !important; gap: 14px !important; }
.mc-pricetag { border: 3px solid var(--ink) !important; border-radius: 12px !important; box-shadow: 3px 3px 0 var(--ink); background: var(--surface-solid); padding: 9px 15px !important; margin-top: 22px; }
.mc-pricetag b { font-size: 28px !important; }
.mc-btn-primary, .mc-btn {
  background: var(--lime) !important; color: var(--ink) !important;
  border: 3px solid var(--ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.mc-btn-primary:hover, .mc-btn:hover { transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.mc-btn-ghost {
  background: var(--surface-solid) !important; color: var(--text-primary) !important;
  border: 3px solid var(--ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--ink) !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.mc-btn-ghost:hover { transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 var(--ink) !important; }