/* ═══════════════════════════════════════════════════════════════
   DAD JOURNAL — DESIGN V4 „LAB-GRADE PRECISION"
   Gemeinsame Gestaltungsebene für index.html, faq.html, checkout.html.
   Übernimmt die Formsprache der neuen Vorlage: technisches Raster,
   Glas-Panels, scharfe Kanten, Mono-Micro-Labels, HUD-Details.
   Farben, Logo, Inhalte und Seitenaufbau bleiben unverändert.
   Schriften bleiben lokal (IBM Plex) — kein Google-Fonts-Request.
   Wird IMMER nach dem seiteneigenen <style> geladen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --r:6px;                       /* Karten / Panels        */
  --r-sm:4px;                    /* Buttons / Inputs       */
  --r-xs:3px;                    /* Chips / Tags / Badges  */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.045);
  --panel:rgba(20,22,28,.45);
  --hud:rgba(41,121,255,.45);
}

/* ═══ 1. HINTERGRUND ═══
   (Das technische Raster wurde auf Wunsch entfernt — die Seiten behalten
    ihren bisherigen Verlaufs-Hintergrund.) */

/* ═══ 2. HUD-ECKEN (Utility, per .hud auf Panels) ═══ */
.hud::after{
  content:'';position:absolute;inset:6px;pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--hud),var(--hud)) left top/9px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) left top/1px 9px no-repeat,
    linear-gradient(var(--hud),var(--hud)) right top/9px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) right top/1px 9px no-repeat,
    linear-gradient(var(--hud),var(--hud)) left bottom/9px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) left bottom/1px 9px no-repeat,
    linear-gradient(var(--hud),var(--hud)) right bottom/9px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) right bottom/1px 9px no-repeat;
  opacity:0;transition:opacity .25s;
}
.hud:hover::after{opacity:1;}

/* ═══ 3. GEMEINSAME NAVIGATION ═══ */
nav{border-bottom:1px solid var(--line)!important;background:rgba(5,5,7,.86)!important;}
.nav-links a{font-size:10px;letter-spacing:.14em;}
.nav-links a:hover{color:var(--gold2,#5c9bff)!important;}
.nav-links a.here{position:relative;}
.nav-links a.here::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--gold,#2979ff);box-shadow:0 0 8px rgba(41,121,255,.7);}
.nav-cta{border-radius:var(--r-sm)!important;letter-spacing:.13em;}
.nav-back{letter-spacing:.14em;text-transform:uppercase;}

/* ═══ 4. GEMEINSAME BUTTONS & EINGABEFELDER ═══ */
.btn-primary,.btn-outline,.price-btn,.rate-btn,.rate-submit,.feat-toggle,
.btn-pay,.lt-cta,.locked-btn{border-radius:var(--r-sm)!important;letter-spacing:.14em;}
.btn-outline{border-color:var(--line)!important;background:rgba(255,255,255,.02);}
.btn-outline:hover{border-color:rgba(41,121,255,.45);background:rgba(41,121,255,.06);}

/* ═══ 5. META-LEISTE (System-/Build-Zeile über der Fußzeile) ═══ */
.sysbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  max-width:1200px;margin:0 auto;padding:14px 40px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim,#8a8fa0);
}
.sysbar b{color:var(--gold2,#5c9bff);font-weight:500;}
.sysbar .dot{width:5px;height:5px;background:var(--green,#3ddc7e);border-radius:50%;
  box-shadow:0 0 7px var(--green,#3ddc7e);display:inline-block;margin-right:7px;vertical-align:middle;}
.sysbar span{display:inline-flex;align-items:center;}
@media(max-width:900px){.sysbar{padding:14px 18px;justify-content:center;text-align:center;}}

/* ═══ 6. FUSSZEILE ═══ */
footer{border-top:1px solid var(--line)!important;background:rgba(9,10,13,.6);}
.footer-links a{letter-spacing:.14em;}
.footer-copy{letter-spacing:.1em;}


/* ═══════════════════════════════════════════════════════════════
   STARTSEITE (index.html)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: Status-Chip statt Linien-Label ── */
.hero-label{
  font-size:10px;letter-spacing:.18em;color:var(--gold2);
  border:1px solid rgba(41,121,255,.28);background:rgba(41,121,255,.07);
  border-radius:var(--r-xs);padding:6px 12px;gap:8px;}
.hero-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--gold2);
  box-shadow:0 0 8px rgba(92,155,255,.9);animation:livePulse 2s ease-in-out infinite;}
.hero-label::after{display:none;}   /* alte Deko-Linie der Startseite ausblenden */

.hero-trust span{border:1px solid var(--line-2);border-radius:var(--r-xs);padding:6px 11px;
  background:rgba(255,255,255,.015);letter-spacing:.1em;text-transform:uppercase;font-size:8.5px;}

/* Hero-Kennzahlen als Datenzellen mit Trennlinien */
.hero-stats{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;width:100%;max-width:760px;}
.hero-stats > div{flex:1;min-width:120px;padding:0 26px;border-left:1px solid var(--line-2);}
.hero-stats > div:first-child{border-left:none;}
.stat-l{letter-spacing:.2em;}

/* ── Sektions-Kopf: Chip + laufender Index ── */
.s-tag{
  display:inline-flex!important;align-items:center;gap:8px;
  border:1px solid rgba(41,121,255,.25);background:rgba(41,121,255,.06);
  border-radius:var(--r-xs);padding:5px 11px;font-size:9px;letter-spacing:.2em;
  color:var(--gold2);text-shadow:none;}
.s-tag::before{content:'';width:5px;height:5px;background:var(--gold2);
  box-shadow:0 0 6px rgba(92,155,255,.8);}
.s-title{letter-spacing:-.03em;}
.s-sub{padding-bottom:26px;border-bottom:1px solid var(--line-2);}

/* ── Bento-Karten: Glas, scharfe Kante, Akzentbalken, Kategorie-Index ── */
.bento{counter-reset:card;}
.bc,.price-card,.test-card{
  background:var(--panel)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:none;}
.bc{position:relative;overflow:hidden;counter-increment:card;}
.bc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);opacity:0;transition:opacity .25s;z-index:2;}
.bc:hover::before{opacity:1;}
.bc:hover{border-color:rgba(41,121,255,.32)!important;transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(41,121,255,.08),0 14px 40px rgba(0,0,0,.5)!important;}

.bc-pad{padding:18px 20px;}
.bc-tag{display:flex;align-items:center;gap:7px;font-size:8.5px;letter-spacing:.2em;
  color:var(--gold2);text-shadow:none;margin-bottom:8px;
  padding-bottom:9px;border-bottom:1px solid var(--line-2);}
.bc-tag::before{content:'';width:4px;height:4px;background:var(--gold2);flex-shrink:0;
  box-shadow:0 0 6px rgba(92,155,255,.7);}
.bc-tag::after{content:'MOD_' counter(card,decimal-leading-zero);
  margin-left:auto;color:var(--dim);letter-spacing:.16em;font-size:8px;}
.bc-title{font-size:14px;}

/* Innenmodule der Karten */
.kpi,.wd,.refl-f,.leader-stat,.cm-kpi,.cm-panel,.sc-kpi,.sc-chart,.setup-tag,
.chat-input-mock,.ris-result,.cmsg,.cm-msg,.cm-day{border-radius:var(--r-sm)!important;}
.kpi,.wd,.refl-f,.leader-stat,.cm-kpi,.cm-panel,.sc-kpi,.sc-chart{
  background:rgba(255,255,255,.022)!important;border:1px solid var(--line-2)!important;}
.kpi-l,.cm-kpi-l,.sc-kpi-l,.wd-name,.refl-lbl,.leader-stat-l,.ris-sub{letter-spacing:.18em;}
.j-win,.j-loss,.cm-tag,.sc-badge,.chip{border-radius:var(--r-xs)!important;}

/* Fortschrittsbalken eckig wie im Design */
.psy-m-track,.psy-m-fill,.ziel-bar,.ziel-fill,.cm-meter-t,.cm-meter-f{border-radius:2px!important;}

/* Journal-Zeilen mit Hover-Kante */
.j-row{border-top:1px solid var(--line-2);border-left:2px solid transparent;
  transition:background .15s,border-color .15s;}
.j-row:hover{background:rgba(255,255,255,.022);border-left-color:var(--gold);}

/* Karten-Kopfzeile im Journal */
.j-header{border-bottom:1px solid var(--line-2);}

/* ── Produkt-Mockups ── */
.showcase-frame,.car-slide{border-radius:var(--r)!important;
  border-color:rgba(41,121,255,.16)!important;}
.car-slide.active{border-color:rgba(41,121,255,.34)!important;}
.car-arrow{border-radius:var(--r-sm);border-color:rgba(41,121,255,.28);}
.car-dot,.car-dot.active{border-radius:2px;}
.car-mod{letter-spacing:.2em;}
.car-hint{letter-spacing:.2em;}

/* ── Preise ── */
.price-card{padding:28px 26px 32px;position:relative;}
.price-card.feat{border-color:rgba(41,121,255,.55)!important;background:rgba(41,121,255,.05)!important;}
.price-name{padding-bottom:14px;border-bottom:1px solid var(--line-2);letter-spacing:.22em;}
.price-badge{border-radius:var(--r-xs);letter-spacing:.18em;}
.price-feats li{border-bottom:1px solid var(--line-2);}
.price-note{letter-spacing:.1em;}

/* ── Stimmen ── */
.test-card{padding:22px;position:relative;}
.test-av{border-radius:var(--r-sm);}
.test-role{letter-spacing:.16em;}
.test-stars{letter-spacing:3px;}

/* ── FAQ-Auszug auf der Startseite: Datenblöcke ── */
.faq-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;
  background:rgba(255,255,255,.015);padding:0 18px;position:relative;overflow:hidden;
  transition:border-color .2s;}
.faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);opacity:0;transition:opacity .2s;}
.faq-item:hover,.faq-item.open{border-color:rgba(41,121,255,.28);}
.faq-item:hover::before,.faq-item.open::before{opacity:1;}

/* ── CTA-Banner & Ticker ── */
.cta-inner{border-radius:var(--r)!important;border-color:rgba(41,121,255,.22);}
.ticker-strip{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);}
.live-dot{letter-spacing:.2em;}

/* ── Modale & Formulare ── */
.rate-modal,.launch-teaser{border-radius:var(--r)!important;}
.rate-field input,.rate-field textarea{border-radius:var(--r-sm);border-color:var(--line);
  background:rgba(255,255,255,.02);}
.rate-close{border-radius:var(--r-xs);}
.feed-av{border-radius:var(--r-sm);}
.lt-badge{border-radius:var(--r-xs)!important;letter-spacing:.2em;}

@media(max-width:900px){
  .hero-stats > div{border-left:none;padding:0 14px;}
  .s-tag::after{display:none;}
}


/* ═══════════════════════════════════════════════════════════════
   FAQ-SEITE (faq.html)
   ═══════════════════════════════════════════════════════════════ */

.faq-page .wrap{counter-reset:cat;}

/* Kopf */
.faq-page .s-tag{margin-bottom:14px;}
.faq-page h1{letter-spacing:-.03em;}
.faq-page .subtitle{font-size:13px;letter-spacing:.01em;padding-bottom:26px;
  border-bottom:1px solid var(--line-2);}

/* Suchfeld: technischer Unterstrich statt Pille */
.faq-page #q{border-radius:var(--r-sm);background:rgba(255,255,255,.02);
  border:1px solid var(--line);border-bottom:1px solid rgba(41,121,255,.35);
  letter-spacing:.06em;}
.faq-page #q:focus{border-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold),0 4px 18px rgba(41,121,255,.12);}
.faq-page .count{letter-spacing:.2em;}

/* Sprungmarken als eckige Chips */
.faq-page .jump a{border-radius:var(--r-xs);letter-spacing:.12em;text-transform:uppercase;
  font-size:9px;padding:7px 12px;}

/* Kategorie-Überschriften mit Index rechts (Muster „CAT_01") */
.faq-page h2{
  counter-increment:cat;display:flex;align-items:center;gap:12px;
  letter-spacing:.2em;border-bottom:1px solid var(--line);padding-bottom:12px;
  margin:56px 0 14px;}
.faq-page h2::before{content:'';width:5px;height:5px;background:var(--gold2);flex-shrink:0;
  box-shadow:0 0 6px rgba(92,155,255,.8);}
.faq-page h2::after{content:'CAT_' counter(cat,decimal-leading-zero);
  margin-left:auto;color:var(--dim);font-size:9px;letter-spacing:.16em;}

/* Fragen als Datenblöcke mit Akzentbalken */
.faq-page details{
  border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.015);margin-bottom:8px;padding:0 18px;
  position:relative;overflow:hidden;transition:border-color .2s;}
.faq-page details::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);opacity:0;transition:opacity .2s;}
.faq-page details:hover,.faq-page details[open]{border-color:rgba(41,121,255,.28);}
.faq-page details:hover::before,.faq-page details[open]::before{opacity:1;}
.faq-page details summary{padding:16px 30px 16px 0;letter-spacing:.02em;}
.faq-page details summary::after{right:0;top:13px;}
.faq-page details .a{padding-bottom:18px;}

.faq-page .note{border-radius:var(--r);border-left-width:2px;}
.faq-page code{border-radius:var(--r-xs);border-color:var(--line);
  background:rgba(255,255,255,.03);}
.faq-page mark{border-radius:2px;}
.faq-page .empty{letter-spacing:.14em;text-transform:uppercase;}

@media(max-width:620px){.faq-page h2::after{display:none;}}


/* ═══════════════════════════════════════════════════════════════
   KAUFSEITE (checkout.html)
   ═══════════════════════════════════════════════════════════════ */

/* Kopfbereich */
.checkout-page .hero-tagline{letter-spacing:.28em;}
.checkout-page h1{letter-spacing:-.03em;}
.checkout-page .header-sub{padding-bottom:0;}

/* Sektions-Labels als zentrierte Chips */
.checkout-page .sec-label{
  display:flex;align-items:center;gap:8px;width:max-content;margin:0 auto 12px;
  border:1px solid rgba(41,121,255,.25);background:rgba(41,121,255,.06);
  border-radius:var(--r-xs);padding:5px 11px;letter-spacing:.2em;text-shadow:none;
  font-size:9px;}
.checkout-page .sec-label::before{content:'';width:5px;height:5px;background:var(--blue2,#5c9bff);
  box-shadow:0 0 6px rgba(92,155,255,.8);flex-shrink:0;}
.checkout-page .sec-title{letter-spacing:-.03em;}

/* Modulkarten: Glas + Akzentbalken + Modulindex */
.checkout-page .mod-grid{counter-reset:mod;}
.checkout-page .mod{
  background:var(--panel)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;counter-increment:mod;padding:18px 20px;}
.checkout-page .mod::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--blue,#2979ff);opacity:0;transition:opacity .25s;}
.checkout-page .mod:hover::before{opacity:1;}
.checkout-page .mod:hover{border-color:rgba(41,121,255,.32)!important;transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(41,121,255,.08),0 14px 40px rgba(0,0,0,.5);}
.checkout-page .mod-ico{border-radius:var(--r-sm);width:34px;height:34px;margin-bottom:12px;}
.checkout-page .mod-ico svg{width:18px;height:18px;}
.checkout-page .mod-name{display:flex;align-items:center;gap:8px;letter-spacing:.02em;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line-2);}
.checkout-page .mod-name::after{content:'MOD_' counter(mod,decimal-leading-zero);
  margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  color:var(--dim);font-weight:400;}

/* Tarifkarten */
.checkout-page .plan{
  background:var(--panel)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:26px 24px 28px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.checkout-page .plan:hover{transform:translateY(-2px);}
.checkout-page .plan.selected{border-color:rgba(41,121,255,.6)!important;
  background:rgba(41,121,255,.05)!important;
  box-shadow:0 0 0 1px rgba(41,121,255,.5),0 0 40px rgba(41,121,255,.1);}
.checkout-page .plan.selected::after{border-radius:var(--r-xs);letter-spacing:.16em;
  top:12px;right:12px;box-shadow:none;}
.checkout-page .plan-badge{border-radius:var(--r-xs);letter-spacing:.16em;}
.checkout-page .plan-name{letter-spacing:.22em;padding-bottom:12px;
  border-bottom:1px solid var(--line-2);margin-bottom:16px;}
.checkout-page .plan-price{letter-spacing:-.03em;}
.checkout-page .plan-period{letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;}
.checkout-page .plan-features li{border-bottom:1px solid var(--line-2);}

/* Bezahlbereich */
.checkout-page .cta-area{border-radius:var(--r)!important;
  border-color:rgba(41,121,255,.22)!important;background:var(--panel)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.checkout-page .cta-area h2{letter-spacing:-.02em;}
.checkout-page .btn-pay{border-radius:var(--r-sm)!important;letter-spacing:.16em;}
.checkout-page .security{letter-spacing:.16em;text-transform:uppercase;font-size:9px;
  border-top:1px solid var(--line-2);padding-top:14px;max-width:560px;
  margin-left:auto;margin-right:auto;}
.checkout-page .legal-links a{letter-spacing:.14em;text-transform:uppercase;}
.checkout-page .agb-label input{border-radius:2px;}

/* Vertrauens-Kacheln als Datenzellen */
.checkout-page .trust{
  background:rgba(255,255,255,.022)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;text-align:left;padding:16px 18px;
  position:relative;transition:border-color .2s;}
.checkout-page .trust:hover{border-color:rgba(41,121,255,.28)!important;}
.checkout-page .trust-ico{font-size:15px;margin-bottom:10px;}
.checkout-page .trust-t{letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line-2);}

/* Rabattcode-Feld (Inline-Styles im Markup → Overrides nötig) */
.checkout-page #aff-code-input,
.checkout-page #aff-code-box button{border-radius:var(--r-sm)!important;letter-spacing:.08em;}
.checkout-page #aff-code-input{border-color:var(--line)!important;
  border-bottom-color:rgba(41,121,255,.35)!important;background:rgba(255,255,255,.02)!important;}
.checkout-page #aff-code-input:focus{border-color:var(--blue,#2979ff)!important;}
.checkout-page #aff-code-box button{letter-spacing:.14em;text-transform:uppercase;font-size:11px!important;}
.checkout-page #aff-banner{border-radius:var(--r)!important;}
.checkout-page #aff-code-msg{letter-spacing:.06em;}

.checkout-page .dad-ticker{border-bottom:1px solid var(--line)!important;}
.checkout-page .launch-teaser{border-radius:var(--r)!important;}
.checkout-page .lt-badge{border-radius:var(--r-xs)!important;letter-spacing:.2em;}