/* Dashboard-style adapter for the creator guideline. Keep the guide content,
   but give its sections the same quiet, operational rhythm as the dashboard. */
:root,
:root[data-theme="dark"] {
  --bg: #100c0f;
  --surface: #171216;
  --surface-2: #1e1519;
  --ink: #f3e9ec;
  --ink-soft: #a99aa0;
  --ink-dim: #6e6167;
  --line: rgba(243, 233, 236, 0.1);
  --red: #e5142a;
  --pink: #ff4b7e;
  --gold: #e8c07a;
  --ok: #4ade80;
  --grad: linear-gradient(135deg, #e5142a, #ff4b7e);
  --tint-pink: #1e1519;
  --tint-cream: #171216;
  --tint-mint: #18191d;
  --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.75);
  --shadow-soft: 0 10px 26px -18px rgba(0, 0, 0, 0.6);
  --r-lg: 14px;
  --r-md: 12px;
  --r-sm: 9px;
}

:root[data-theme="light"] {
  --bg: #faf7f5;
  --surface: #ffffff;
  --surface-2: #f5f0f2;
  --ink: #241318;
  --ink-soft: #6b5860;
  --ink-dim: #9a8b90;
  --line: rgba(38, 34, 29, 0.12);
  --tint-pink: #fff0f3;
  --tint-cream: #faf7f5;
  --tint-mint: #f0f7f3;
}

html {
  background: var(--bg) !important;
}

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: Manrope, Arial, sans-serif !important;
}

/* Remove the decorative layers that made the guide read like a generated
   landing page. The useful content remains in the document. */
.blob,
.marquee,
[data-au-aufdecken] {
  display: none !important;
}

[data-au-morph] {
  animation: none !important;
}

.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

.nav-inner {
  height: 52px !important;
  margin: 10px auto 0 !important;
  padding: 0 10px 0 14px !important;
  background: rgba(23, 18, 22, 0.9) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .nav-inner {
  background: rgba(255, 255, 255, 0.9) !important;
}

.nav-brand img {
  height: 48px !important;
  width: auto !important;
}

.nav-links {
  gap: 4px !important;
}

.nav-links a {
  padding: 7px 9px !important;
  border-radius: 9px !important;
}

.gl-search {
  margin: 10px auto 0 !important;
}

.gl-search-box {
  padding: 9px 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.gl-search-tools {
  gap: 8px !important;
}

.nav-prof {
  border-radius: 50% !important;
}

.theme-toggle {
  border-radius: 999px !important;
}

.hero {
  padding: 26px 0 20px !important;
}

.hero-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr) !important;
  gap: 16px !important;
  padding: 22px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 56px) !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
}

.hero h1 .kw {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  animation: none !important;
}

.hero h1 .kw svg {
  display: none !important;
}

.hero p {
  margin-top: 14px !important;
  color: var(--ink-soft) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.hero-cta {
  gap: 8px !important;
  margin-top: 18px !important;
}

.btn {
  padding: 11px 14px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.btn-primary {
  background: var(--grad) !important;
}

.btn-ghost {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.hero-figure .frame {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.hero-badge {
  bottom: 8px !important;
  left: 8px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

.stats {
  padding: 0 0 20px !important;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.stat {
  padding: 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.stat::before,
.stat::after {
  display: none !important;
}

.stat:hover,
.tip:hover,
.tier:hover,
.hook-card:hover {
  transform: none !important;
}

.stat .num {
  background: none !important;
  color: var(--gold) !important;
  font-size: 28px !important;
  -webkit-text-fill-color: var(--gold) !important;
}

.stat .label {
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.mgmt {
  padding: 0 0 20px !important;
}

.mgmt-inner {
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: left !important;
}

.mgmt-inner img {
  height: 32px !important;
}

.mgmt-inner p {
  color: var(--ink-soft) !important;
  font-size: 12px !important;
}

.mgmt-inner p strong {
  color: var(--gold) !important;
}

.section {
  padding: 38px 0 4px !important;
  background: transparent !important;
  border-top: 0 !important;
}

.section.tint-pink,
.section.tint-cream,
.section.tint-mint {
  background: transparent !important;
}

.sec-head {
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.sec-num {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: rgba(229, 20, 42, 0.13) !important;
  color: var(--red) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  -webkit-text-fill-color: var(--red) !important;
  -webkit-text-stroke: 0 !important;
}

.sec-title-block h2 {
  font-size: clamp(23px, 3vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.sec-title-block h2 em {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Headings stay calm and white. The generic shimmer helper writes inline
   gradient styles, so this adapter deliberately neutralises those values. */
.hero h1,
.sec-title-block h2,
.sec-title-block h2 em,
.aureon-top h2,
.aureon-top h2 em,
[data-au-schimmer],
[data-au-schimmer] * {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
  filter: none !important;
}

.sec-title-block .lead {
  margin-top: 7px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.tip-grid,
.tiers,
.hook-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.tip,
.tier,
.hook-card,
.note,
.fx2-item,
.fx2-kern,
.fx2-drei,
.fx2-stop,
.fx2-mut,
.sb-karte,
.tk-profile,
.check-wrap,
.acc-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* The numbered accordions use the restrained dashboard glass treatment.
   It replaces the overly bright multi-inset effect from .au-glasflaeche. */
.gl-collapse,
.acc-item,
.acc-item.au-glasflaeche {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 34px -26px rgba(0, 0, 0, 0.9) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
}

:root[data-theme="light"] .gl-collapse,
:root[data-theme="light"] .acc-item,
:root[data-theme="light"] .acc-item.au-glasflaeche {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 240, 242, 0.72)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 16px 34px -28px rgba(35, 18, 25, 0.34) !important;
}

.tip,
.tier {
  padding: 16px !important;
}

.tip::before {
  display: none !important;
}

.tip .tip-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(229, 20, 42, 0.13) !important;
  color: var(--red) !important;
  font-size: 12px !important;
}

.tip h3 {
  margin-bottom: 6px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.tip p,
.tier p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.note {
  grid-template-columns: auto 1fr !important;
  gap: 11px !important;
  margin-top: 14px !important;
  padding: 14px !important;
}

.note-ico {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: rgba(229, 20, 42, 0.13) !important;
  color: var(--red) !important;
  font-size: 16px !important;
}

.note p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.tab,
.sb-tab {
  min-height: 36px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
}

.tab.active,
.sb-tab.on {
  background: var(--red) !important;
  box-shadow: none !important;
}

.hook-card {
  padding: 12px 13px !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
}

.gl-collapse-head,
.fx2-head,
.acc-head {
  min-height: 52px !important;
  gap: 10px !important;
  padding: 14px !important;
  font-size: 15px !important;
}

.gl-collapse-head .n {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(229, 20, 42, 0.13) !important;
  color: var(--red) !important;
  font-size: 11px !important;
}

.acc-num {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(229, 20, 42, 0.16) !important;
  color: #ff7188 !important;
  -webkit-text-fill-color: #ff7188 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.gl-collapse-head .chev,
.acc-toggle,
.fx2-plus {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  color: var(--ink-soft) !important;
  font-size: 15px !important;
}

.gl-collapse.open .gl-collapse-head .chev,
.acc-item.open .acc-toggle,
.fx2-item.auf .fx2-plus {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.fx2-inner {
  padding: 2px 14px 16px !important;
}

.fx2-kern,
.fx2-drei,
.fx2-stop,
.fx2-mut {
  padding: 16px !important;
}

.fx2-titel {
  font-size: 14px !important;
}

.fx2-kurz {
  font-size: 11px !important;
}

.fx2-liste li,
.fx2-tun,
.fx2-stop .st-zeile,
.fx2-mut .mu-zeile {
  font-size: 13px !important;
}

.reels {
  background: transparent !important;
  color: var(--ink) !important;
}

.reels::before,
.reels::after {
  display: none !important;
}

.reels .sec-title-block h2 {
  color: var(--ink) !important;
}

.reels .lead {
  color: var(--ink-soft) !important;
}

.tk-profile {
  gap: 10px !important;
  padding: 12px !important;
}

.reels-belt {
  margin-top: 16px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.reels-track {
  gap: 10px !important;
}

.check-wrap {
  padding: 18px !important;
}

.check-item {
  gap: 14px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.check-box {
  --check-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  inline-size: 22px !important;
  block-size: 22px !important;
  border-radius: 5px !important;
}

/* 29.08.2026 — Mert: "haken sitzt nicht passend".
   URSACHE (nachgemessen, nicht vermutet): Der Kasten wird oben auf 22 px
   gesetzt, das Hakenzeichen stand in form-controls.css auf festen 23 px.
   Gemessen kam ein 22,5-px-Zeichen in einem 21,6-px-Kasten heraus - der
   Haken war groesser als sein Kasten und stand ueber die Rundung.
   Zusaetzlich vergroesserte `transform: scale(1.06)` beim Ankreuzen den
   ganzen Kasten und verstaerkte den Ueberstand.

   Behoben wird das an der Wurzel in form-controls.css: das Zeichen haengt
   dort jetzt an --check-size statt an einer festen Zahl und passt damit in
   jeden Kasten. Hier bleibt nur, was diese Seite wirklich braucht - der
   unterdrueckte Groessensprung.

   Was hier NICHT mehr steht: Regeln auf .check-box::after. Sie waren
   wirkungslos, denn form-controls.js ersetzt den Kasteninhalt durch ein SVG
   und form-controls.css setzt `content: none !important` auf ::after. Auch
   die Zentrierung braucht keine Sonderregel: der Kasten ist bereits
   `display:grid; place-items:center`, gemessener Versatz 0,00 px in beide
   Richtungen. Kein overflow:hidden - das wuerde den Haken abschneiden statt
   ihn passend zu machen (Regel "nie abgeschnitten"). */
.check-item input:checked + .check-box {
  transform: none !important;
}

#check .neon-check-ring,
#check .neon-check-particle {
  display: none !important;
}

.acc-body-inner {
  padding: 0 14px 16px 52px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.aureon {
  padding: 44px 0 38px !important;
  background: var(--surface) !important;
  border-top: 0 !important;
  color: var(--ink) !important;
}

.aureon-top {
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 28px !important;
}

.aureon-logo img {
  max-width: 64px !important;
}

.aureon-top h2 {
  color: var(--ink) !important;
  font-size: clamp(24px, 4vw, 34px) !important;
}

.aureon-top h2 em {
  color: var(--ink) !important;
}

.aureon-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--line) !important;
}

.aureon-grid p {
  color: var(--ink-soft) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.aureon-cta {
  padding: 10px 13px !important;
  border-radius: 9px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-size: 13px !important;
}

.aureon-facts .row {
  display: grid !important;
  grid-template-columns: minmax(88px, 0.72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: 16px !important;
  padding: 13px 0 !important;
  border-color: var(--line) !important;
}

.aureon-facts .k {
  color: var(--gold) !important;
  font-size: 9px !important;
}

.aureon-facts .v {
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

/* Rules enter in a deliberate sequence when their section becomes visible. */
.dd li {
  opacity: 0;
  transform: translateY(10px);
}

.dd.in li {
  animation: mmGuideRuleIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dd.in li:nth-child(1) { animation-delay: 0.10s; }
.dd.in li:nth-child(2) { animation-delay: 0.19s; }
.dd.in li:nth-child(3) { animation-delay: 0.28s; }
.dd.in li:nth-child(4) { animation-delay: 0.37s; }
.dd.in li:nth-child(5) { animation-delay: 0.46s; }
.dd.in li:nth-child(6) { animation-delay: 0.55s; }

@keyframes mmGuideRuleIn {
  to { opacity: 1; transform: translateY(0); }
}

.footer {
  padding: 22px 0 76px !important;
  background: var(--bg) !important;
  color: var(--ink-dim) !important;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
  }

  .hero-figure {
    order: -1 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tip-grid,
  .tiers,
  .hook-grid {
    grid-template-columns: 1fr !important;
  }

  .aureon-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-inner,
  .gl-search {
    width: calc(100% - 20px) !important;
  }
}

@media (max-width: 560px) {
  .hero-inner {
    padding: 16px !important;
  }

  .hero h1 {
    font-size: 34px !important;
  }

  .hero-cta .btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .section {
    padding-top: 32px !important;
  }

  .sec-head {
    margin-bottom: 16px !important;
  }

  .sec-title-block h2 {
    font-size: 24px !important;
  }

  .sec-title-block .lead {
    font-size: 13px !important;
  }

  .tip,
  .tier {
    padding: 14px !important;
  }

  .fx2-head {
    padding: 12px !important;
  }

  .check-top {
    gap: 10px !important;
  }

  .check-bar {
    min-width: 100% !important;
    order: 3 !important;
  }

  .tk-actions {
    width: 100% !important;
  }

  .tk-actions > * {
    max-width: 100% !important;
  }

  .aureon {
    padding: 38px 0 32px !important;
  }

  .aureon-top {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .aureon-logo img {
    max-width: 58px !important;
  }

  .aureon-grid {
    gap: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .dd li {
    opacity: 1 !important;
    transform: none !important;
  }
}