/*
Theme Name: SPÜRSINN Rate-Krimi
Theme URI: https://karsten-fischer.org/
Author: Karsten Fischer & AVA
Description: Mysteriöses, responsives WordPress-Theme für Rate-Krimi-Bücher.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: spuersinn
*/

    :root{
      --bg:#06110c;
      --bg-soft:#091913;
      --panel:#0d2018;
      --panel-soft:#11271d;
      --line:rgba(190,232,103,.12);
      --line-strong:rgba(190,232,103,.25);
      --text:#f4f7f1;
      --muted:#a9b5ac;
      --accent:#b9e968;
      --accent-soft:#d6ff8f;
      --gold:#d7b069;
      --danger:#d67861;
      --shadow:0 28px 90px rgba(0,0,0,.46);
      --radius:22px;
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 84% 0%, rgba(185,233,104,.07), transparent 28%),
        radial-gradient(circle at 3% 90%, rgba(215,176,105,.05), transparent 26%),
        var(--bg);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit}
    svg{display:block}
    .container{width:min(var(--container),calc(100% - 40px));margin:auto}

    /* Navigation */
    .site-header{
      position:fixed;
      inset:0 0 auto;
      z-index:100;
      background:linear-gradient(to bottom,rgba(3,10,7,.72),transparent);
      transition:.25s ease;
    }
    .site-header.scrolled{
      background:rgba(5,16,11,.88);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(18px);
    }
    .nav{
      min-height:82px;
      display:flex;
      align-items:center;
      gap:28px;
    }
    .brand{border:0;background:none;color:inherit;padding:0;cursor:pointer;
      display:flex;
      align-items:center;
      gap:12px;
      flex:0 0 auto;
    }
    .brand-symbol{
      width:40px;
      height:40px;
      display:grid;
      place-items:center;
      color:var(--accent);
    }
    .brand-symbol svg{width:36px}
    .brand-copy{display:flex;flex-direction:column;line-height:1}
    .brand-copy strong{font-size:1.02rem;letter-spacing:.18em}
    .brand-copy span{margin-top:6px;color:#8ea096;font-size:.62rem;letter-spacing:.1em}
    .nav-links{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:25px;
    }
    .nav-link{
      position:relative;
      border:0;
      padding:10px 0;
      color:rgba(244,247,241,.76);
      background:none;
      cursor:pointer;
      font-size:.88rem;
      font-weight:750;
    }
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:2px;border-radius:10px;
      background:var(--accent);
    }
    .header-actions{display:flex;align-items:center;gap:10px}
    .menu-button{
      display:none;
      width:42px;height:42px;
      border:1px solid var(--line);
      border-radius:50%;
      color:#fff;
      background:rgba(255,255,255,.035);
      cursor:pointer;
    }

    /* Buttons */
    .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:999px;
      cursor:pointer;
      font-weight:900;
      transition:transform .2s ease,background .2s ease,border-color .2s ease;
    }
    .button:hover{transform:translateY(-2px)}
    .button-primary{background:var(--accent);color:#102016;box-shadow:0 12px 30px rgba(185,233,104,.16)}
    .button-primary:hover{background:var(--accent-soft)}
    .button-secondary{color:#fff;background:rgba(255,255,255,.045);border-color:var(--line-strong)}
    .button-secondary:hover{background:rgba(255,255,255,.08)}

    /* Hero */
    .hero{
      position:relative;
      min-height:780px;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .hero-scene{
      position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(2,9,6,.98) 0%,rgba(2,9,6,.88) 31%,rgba(2,9,6,.34) 63%,rgba(2,9,6,.73) 100%),
        radial-gradient(circle at 73% 24%,rgba(241,200,128,.26),transparent 18%),
        linear-gradient(180deg,#1d382d,#0f2118 48%,#06110c);
    }
    .hero-art{position:absolute;inset:0;width:100%;height:100%;opacity:.98}
    .hero-inner{
      position:relative;
      z-index:3;
      min-height:780px;
      display:flex;
      align-items:flex-end;
      padding-top:140px;
    }
    .hero-copy{max-width:670px;padding-bottom:150px}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 13px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      color:var(--accent);
      background:rgba(4,14,9,.48);
      font-size:.72rem;
      font-weight:900;
      letter-spacing:.11em;
      text-transform:uppercase;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(185,233,104,.12);
    }
    h1{
      max-width:760px;
      margin:25px 0 20px;
      font-size:clamp(3.2rem,6vw,5.8rem);
      line-height:.96;
      letter-spacing:-.065em;
      font-weight:690;
    }
    h1 span{display:block;color:var(--accent)}
    .hero-copy p{max-width:555px;margin:0;color:#cbd4cd;font-size:1.05rem}
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
    .watch-link{display:inline-flex;align-items:center;gap:12px;border:0;color:#fff;background:none;cursor:pointer;font-weight:850}
    .watch-icon{
      width:48px;height:48px;border-radius:50%;
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.03);
      display:grid;place-items:center;
    }

    .case-widget{
      position:absolute;
      z-index:5;
      right:max(26px,calc((100vw - var(--container))/2));
      bottom:144px;
      width:324px;
      padding:20px;
      border:1px solid var(--line-strong);
      border-radius:18px;
      background:rgba(6,17,12,.76);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .widget-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;font-size:.77rem;font-weight:900}
    .widget-title{display:flex;align-items:center;gap:8px}
    .widget-check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#132117;font-size:.7rem}
    .widget-link{border:0;color:var(--muted);background:none;cursor:pointer;font-weight:800}
    .meter{margin-top:15px}
    .meter-row{display:flex;justify-content:space-between;gap:14px;margin-bottom:7px;font-size:.74rem}
    .meter-row strong{color:var(--accent)}
    .meter-track{height:4px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
    .meter-track i{display:block;height:100%;border-radius:inherit;background:var(--accent)}

    .stats{
      position:absolute;
      z-index:5;
      left:max(22px,calc((100vw - var(--container))/2));
      right:max(22px,calc((100vw - var(--container))/2));
      bottom:34px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      min-height:96px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(6,17,12,.78);
      box-shadow:0 18px 50px rgba(0,0,0,.25);
      backdrop-filter:blur(15px);
    }
    .stat{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:13px;
      align-items:center;
      padding:19px 23px;
      border-right:1px solid var(--line);
    }
    .stat:last-child{border-right:0}
    .stat-icon{width:34px;color:var(--accent)}
    .stat strong{display:block;font-size:1.22rem;line-height:1}
    .stat span{display:block;margin-top:5px;color:#9ba99f;font-size:.72rem}

    /* Sections */
    .section{padding:90px 0}
    .section.alt{
      background:
        radial-gradient(circle at 100% 35%,rgba(185,233,104,.05),transparent 28%),
        var(--bg-soft);
      border-block:1px solid var(--line);
    }
    .section-head{
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:68px;
      align-items:end;
      margin-bottom:36px;
    }
    .kicker{color:var(--accent);font-size:.73rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
    h2{
      margin:10px 0 0;
      font-size:clamp(2.25rem,4vw,4rem);
      line-height:1.05;
      letter-spacing:-.052em;
      font-weight:560;
    }
    .section-head p{margin:0;color:var(--muted)}
    .grid-four{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .feature-card,.book-card{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:16px;
      transition:.24s ease;
    }
    .feature-card{
      min-height:270px;
      padding:24px;
      background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
      cursor:pointer;
    }
    .feature-card:hover,.book-card:hover{
      transform:translateY(-4px);
      border-color:var(--line-strong);
      background-color:rgba(185,233,104,.03);
    }
    .feature-icon{
      width:46px;height:46px;border-radius:50%;
      display:grid;place-items:center;
      margin-bottom:29px;
      background:rgba(185,233,104,.12);
      color:var(--accent);
    }
    .feature-icon.blue{background:rgba(91,167,200,.13);color:#83d9ff}
    .feature-icon.gold{background:rgba(210,167,94,.14);color:#e8c078}
    .feature-icon.violet{background:rgba(151,115,194,.14);color:#c4a0f1}
    .feature-icon svg{width:25px}
    .feature-card h3{margin:0 0 9px;font-size:1.06rem}
    .feature-card p{margin:0;color:var(--muted);font-size:.86rem}
    .circle-arrow{
      position:absolute;
      left:22px;bottom:20px;
      width:36px;height:36px;border-radius:50%;
      border:1px solid var(--line-strong);
      display:grid;place-items:center;
      transition:.2s ease;
    }
    .feature-card:hover .circle-arrow,.book-card:hover .circle-arrow{background:var(--accent);color:#102016}

    .book-card{
      min-height:356px;
      display:flex;
      align-items:flex-end;
      background:#0e1815;
      cursor:pointer;
    }
    .book-card::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(180deg,transparent 15%,rgba(3,9,6,.1) 40%,rgba(3,9,6,.97) 100%),
        var(--cover);
    }
    .book-card:nth-child(1){--cover:radial-gradient(circle at 76% 23%,rgba(245,224,177,.22),transparent 12%),linear-gradient(150deg,#1b3c34,#0a1511 68%)}
    .book-card:nth-child(2){--cover:radial-gradient(circle at 73% 22%,rgba(247,218,129,.2),transparent 12%),linear-gradient(150deg,#463820,#12100b 68%)}
    .book-card:nth-child(3){--cover:radial-gradient(circle at 74% 22%,rgba(173,204,238,.2),transparent 12%),linear-gradient(150deg,#223a4a,#0b1218 68%)}
    .book-card:nth-child(4){--cover:radial-gradient(circle at 72% 22%,rgba(221,149,125,.2),transparent 12%),linear-gradient(150deg,#472725,#140d0d 68%)}
    .book-art{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
    .book-info{position:relative;z-index:2;padding:24px 23px 66px}
    .pill{
      display:inline-flex;
      padding:5px 8px;
      margin-bottom:11px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      color:var(--accent);
      font-size:.61rem;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .book-info h3{margin:0 0 8px;font-size:1.08rem;line-height:1.15}
    .book-info p{margin:0;color:var(--muted);font-size:.8rem}
    .book-card .circle-arrow{z-index:3}

    .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
    .split-copy p{color:var(--muted)}
    .check-list{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:9px}
    .check-list li{display:flex;align-items:center;gap:10px;color:#d0d7d2;font-size:.86rem}
    .check-list li::before{
      content:"✓";
      width:16px;height:16px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--accent);
      color:#102016;
      font-size:.67rem;font-weight:900;
    }

    .board{
      min-height:390px;
      display:grid;
      grid-template-columns:50px 1fr;
      padding:16px;
      border:1px solid var(--line-strong);
      border-radius:18px;
      background:#091611;
      box-shadow:var(--shadow);
    }
    .board-nav{display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:5px;border-right:1px solid var(--line)}
    .board-nav i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-style:normal;color:#6f7d73}
    .board-nav i:first-child{background:rgba(185,233,104,.12);color:var(--accent)}
    .board-main{padding-left:14px}
    .board-top{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:.8rem;font-weight:800}
    .mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .mini-card{min-height:90px;padding:13px;border:1px solid rgba(255,255,255,.04);border-radius:10px;background:rgba(255,255,255,.03)}
    .mini-card small{color:#77847a}
    .mini-card strong{display:block;margin-top:7px;font-size:1.12rem}
    .mini-card span{display:block;margin-top:6px;color:var(--accent);font-size:.64rem}
    .board-bottom{display:grid;grid-template-columns:1.55fr .75fr;gap:10px;margin-top:10px}
    .clue-map{
      min-height:220px;
      position:relative;
      overflow:hidden;
      border-radius:10px;
      background:
        linear-gradient(rgba(185,233,104,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(185,233,104,.05) 1px,transparent 1px),
        radial-gradient(circle at 62% 50%,rgba(185,233,104,.12),transparent 22%),
        #0c1a15;
      background-size:25px 25px,25px 25px,auto,auto;
    }
    .node{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(185,233,104,.12)}
    .node::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#173121}
    .link-line{position:absolute;height:1px;background:rgba(185,233,104,.42);transform-origin:left center}
    .activity{min-height:220px;padding:15px;border-radius:10px;background:rgba(255,255,255,.03)}
    .activity h4{margin:0 0 14px;font-size:.74rem}
    .activity-item{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:12px;font-size:.65rem}
    .activity-item i{width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--accent)}
    .activity-item span{color:#728076}

    .cta-panel{
      min-height:168px;
      display:grid;
      grid-template-columns:300px 1fr auto;
      gap:32px;
      align-items:center;
      padding:24px 32px;
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(95deg,rgba(185,233,104,.08),rgba(255,255,255,.015));
    }
    .cta-art{
      height:118px;
      border-radius:12px;
      overflow:hidden;
      background:
        radial-gradient(circle at 73% 32%,rgba(185,233,104,.35),transparent 8%),
        radial-gradient(circle at 38% 52%,rgba(85,120,88,.8),transparent 18%),
        linear-gradient(145deg,#23372b,#0a1510);
    }
    .cta-panel h3{margin:0 0 8px;font-size:1.44rem;line-height:1.15}
    .cta-panel p{margin:0;color:var(--muted);font-size:.84rem}

    footer{padding:44px 0 52px;border-top:1px solid var(--line)}
    .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;color:#96a39a;font-size:.77rem}
    .footer-links{display:flex;gap:20px}
    .footer-links button{border:0;color:inherit;background:none;cursor:pointer;padding:0}

    .mobile-panel{
      display:none;
      position:fixed;
      z-index:99;
      top:82px;left:16px;right:16px;
      padding:15px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(5,16,11,.98);
      box-shadow:var(--shadow);
    }
    .mobile-panel.open{display:grid;gap:6px}
    .mobile-panel button{
      border:0;
      padding:13px 14px;
      border-radius:10px;
      color:#dce3dd;
      background:none;
      text-align:left;
      cursor:pointer;
    }
    .mobile-panel button:hover{background:rgba(185,233,104,.08)}

    @media(max-width:1020px){
      .nav-links{display:none}
      .menu-button{display:grid;place-items:center}
      .header-actions .button{display:none}
      .grid-four{grid-template-columns:repeat(2,1fr)}
      .split{grid-template-columns:1fr}
      .case-widget{display:none}
      .cta-panel{grid-template-columns:230px 1fr}
      .cta-panel .button{grid-column:2}
    }

    @media(max-width:760px){
      .container{width:min(100% - 24px,var(--container))}
      .site-header{background:rgba(5,16,11,.76);backdrop-filter:blur(15px)}
      .nav{min-height:72px}
      .mobile-panel{top:72px}
      .hero{min-height:900px}
      .hero-inner{min-height:900px;padding-top:120px}
      .hero-copy{padding-bottom:255px}
      h1{font-size:3.55rem}
      .hero-copy p{font-size:.96rem}
      .stats{left:12px;right:12px;grid-template-columns:repeat(2,1fr)}
      .stat:nth-child(2){border-right:0}
      .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .section{padding:68px 0}
      .section-head{grid-template-columns:1fr;gap:18px}
      .grid-four{grid-template-columns:1fr}
      .board{grid-template-columns:42px 1fr}
      .mini-grid{grid-template-columns:repeat(2,1fr)}
      .board-bottom{grid-template-columns:1fr}
      .activity{display:none}
      .cta-panel{grid-template-columns:1fr;padding:24px}
      .cta-panel .button{grid-column:auto;justify-self:start}
      .footer-inner{align-items:flex-start;flex-direction:column}
    }

    @media(max-width:470px){
      h1{font-size:2.95rem}
      .hero-actions{align-items:flex-start;flex-direction:column}
      .board{display:none}
      .stat{padding:14px 12px;gap:9px}
      .stat-icon{width:29px}
      .brand-copy strong{font-size:.9rem}
    }
  
.page-main{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:150px 20px 90px;
  position:relative;
  overflow:hidden;
}
.page-main::before{
  content:"";
  position:absolute;
  width:680px;height:680px;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(185,233,104,.11),transparent 66%);
}
.page-inner{position:relative;z-index:2;max-width:760px;text-align:center}
.page-symbol{
  width:84px;height:84px;margin:0 auto 25px;border:1px solid var(--line-strong);
  border-radius:50%;display:grid;place-items:center;color:var(--accent);
  background:rgba(185,233,104,.05)
}
.page-symbol svg{width:38px}
.page-main h1{margin-inline:auto}
.page-main .page-content{max-width:620px;margin:18px auto 28px;color:var(--muted)}
.page-main .page-content:empty::before{content:"Diese Seite wird später mit Inhalt gefüllt."}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}