/* ===========================================================
   ClipCash — Design-System "Dark Neon" (premium)
   Einheitliches Farb-/Komponentensystem für die ganze Seite.
   =========================================================== */
:root{
  /* Flächen */
  --bg:#0B0713;            /* Seiten-Hintergrund (tiefes Violett-Schwarz) */
  --bg-elev:#100A1E;       /* abgesetzte Sektionen */
  --card:#160F27;          /* Karten/Panels (wird von .card/.tool/.stat genutzt) */
  --card-2:#1D1436;        /* gehobene Panels */
  --dark:#08050F;          /* Footer / Disclosure */
  /* Linien */
  --border:rgba(168,150,255,.16);
  --border-soft:rgba(255,255,255,.07);
  /* Text */
  --text:#F4F1FB;
  --text-soft:#D6CFEC;
  --muted:#9C93BC;
  /* Marke */
  --primary:#8B5CFF;       /* Violett */
  --primary-bright:#A87CFF;
  --primary-deep:#6B38E8;
  --accent:#C6FF4D;        /* Neon-Lime */
  --accent-deep:#A7E62E;
  --cyan:#46E0FF;          /* sekundärer Neon-Akzent */
  /* Verläufe */
  --grad-brand:linear-gradient(90deg,#C6FF4D 0%,#8B5CFF 100%);
  --grad-violet:linear-gradient(135deg,#8B5CFF 0%,#6B38E8 100%);
  --grad-cyan:linear-gradient(135deg,#8B5CFF 0%,#46E0FF 100%);
  /* Effekte */
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 44px rgba(0,0,0,.5);
  --glow-violet:0 0 0 1px rgba(139,92,255,.35),0 12px 40px rgba(139,92,255,.22);
  --glow-lime:0 0 0 1px rgba(198,255,77,.35),0 12px 40px rgba(198,255,77,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 85% -8%,rgba(139,92,255,.16),transparent 60%),
    radial-gradient(700px 420px at 0% 0%,rgba(70,224,255,.07),transparent 55%);
  background-attachment:fixed;
}
a{color:var(--primary-bright);text-decoration:none}
a:hover{color:var(--accent);text-decoration:none}
img,svg{max-width:100%}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
::selection{background:rgba(198,255,77,.28);color:#fff}

/* Disclosure */
.disclosure{background:var(--dark);color:#b6a9e0;font-size:13px;text-align:center;padding:9px 12px;border-bottom:1px solid var(--border-soft)}

/* Header / Nav */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,7,19,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav nav{display:flex;align-items:center}
.nav nav a{color:var(--text-soft);font-weight:600;margin-left:22px;font-size:15px;position:relative;transition:.15s}
.nav nav a:hover{color:#fff}
.nav nav a.active{color:#fff}
.nav nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--grad-brand);border-radius:2px}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#15240a;font-weight:800;padding:12px 21px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:.18s;font-size:15px;line-height:1.2}
.btn:hover{transform:translateY(-2px);box-shadow:var(--glow-lime);color:#15240a}
.btn.violet{background:var(--primary);color:#fff;background-image:var(--grad-violet)}
.btn.violet:hover{box-shadow:var(--glow-violet)}
.btn.outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn.outline:hover{border-color:var(--primary-bright);background:rgba(139,92,255,.12);box-shadow:none;transform:translateY(-2px)}
.btn.lg{padding:15px 30px;font-size:17px}

/* Hero */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(1100px 480px at 72% -12%,rgba(198,255,77,.16),transparent 60%),
   radial-gradient(900px 520px at 12% 0%,rgba(139,92,255,.30),transparent 60%),
   linear-gradient(180deg,#140C29,#0B0713 72%);
  color:#fff;padding:90px 0 78px;text-align:center;border-bottom:1px solid var(--border-soft)}
.hero .eyebrow{display:inline-block;background:rgba(198,255,77,.10);color:var(--accent);font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;margin-bottom:22px;border:1px solid rgba(198,255,77,.28);letter-spacing:.01em}
.hero h1{font-size:clamp(32px,5.6vw,60px);font-weight:800;letter-spacing:-.03em;max-width:900px;margin:0 auto 18px;line-height:1.08}
.hero h1 .grad,.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p.lead,.lead{font-size:clamp(17px,2.4vw,21px);color:var(--text-soft);max-width:660px;margin:0 auto 30px}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trust{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:38px;color:var(--muted);font-size:14px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(198,255,77,.8)}

/* Sektionen */
section{padding:64px 0}
section.alt{background:var(--bg-elev);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
h1,h2,h3,h4{color:#fff;letter-spacing:-.02em}
h2.section-title{font-size:clamp(26px,3.6vw,38px);font-weight:800;text-align:center;margin-bottom:10px}
.section-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 42px;font-size:17px}

/* Cards */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-3px);border-color:rgba(168,150,255,.34);box-shadow:var(--shadow),var(--glow-violet)}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card a{color:var(--primary-bright);font-weight:600}.card a:hover{color:var(--accent)}
.num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--grad-violet);color:#fff;font-weight:800;margin-bottom:14px;box-shadow:var(--glow-violet)}
.badge{display:inline-block;background:rgba(139,92,255,.16);color:var(--primary-bright);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;margin-bottom:12px;border:1px solid rgba(139,92,255,.3)}
.badge.lime{background:rgba(198,255,77,.13);color:var(--accent);border-color:rgba(198,255,77,.3)}

/* Stats */
.stats{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 30px;text-align:center;box-shadow:var(--shadow);min-width:180px}
.stat .big{font-size:34px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{color:var(--muted);font-size:14px}

/* Tabellen */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--border-soft);font-size:15px;color:var(--text-soft)}
th{background:linear-gradient(180deg,#221645,#1a1233);color:#fff;font-weight:700;letter-spacing:.01em}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(139,92,255,.07)}
td strong{color:#fff}
.pill{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(198,255,77,.14);color:var(--accent);border:1px solid rgba(198,255,77,.3)}
.check{color:var(--accent);font-weight:800}.cross{color:#ff6b81;font-weight:800}
/* Sichtbarer horizontaler Scroll-Hinweis fuer breite Vergleichstabellen (table{min-width:680px}) auf Mobil */
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:var(--primary);border-radius:8px}

/* Tool / Rechner */
.tool{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;margin-bottom:7px;font-size:14px;color:var(--text-soft)}
.field input[type=range]{width:100%;accent-color:var(--primary)}
.field input,.field select{width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--bg-elev);color:var(--text)}
.field input:focus,.field select:focus{border-color:var(--primary-bright);outline:none}
.field .val{float:right;color:var(--accent);font-weight:800}
.result{margin-top:22px;padding:28px;border-radius:14px;background:var(--grad-violet);color:#fff;text-align:center;box-shadow:var(--glow-violet)}
.result .big{font-size:46px;font-weight:800;color:var(--accent);line-height:1.1}
.result .sub{color:#e7defc;font-size:14px;margin-top:6px}

/* CTA-Band */
.cta-band{position:relative;overflow:hidden;background:var(--grad-violet);color:#fff;border-radius:22px;padding:52px;text-align:center;box-shadow:var(--glow-violet)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 240px at 80% -20%,rgba(198,255,77,.28),transparent 60%);pointer-events:none}
.cta-band h2{color:#fff;font-size:30px;margin-bottom:12px;font-weight:800;position:relative}
.cta-band p{color:#ece4ff;margin-bottom:24px;font-size:17px;position:relative}
.cta-band .btn{position:relative}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq summary{font-weight:700;cursor:pointer;font-size:16px;color:#fff;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:10px}

/* ============== BLOG ============== */
/* Lese-Fortschrittsbalken */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-brand);z-index:100;transition:width .08s linear;box-shadow:0 0 12px rgba(198,255,77,.6)}

/* Blog-Hub */
.blog-hero{padding:74px 0 30px;text-align:center}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(168,150,255,.34);box-shadow:var(--shadow),var(--glow-violet)}
.post-card .thumb{aspect-ratio:16/9;width:100%;display:block;border-bottom:1px solid var(--border-soft)}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card .tag{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin-bottom:9px}
.post-card h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.post-card p{color:var(--muted);font-size:14.5px;flex:1}
.post-card .meta{color:var(--muted);font-size:13px;margin-top:16px;display:flex;gap:10px;align-items:center}
.post-card.feature{grid-column:span 3;flex-direction:row}
.post-card.feature .thumb{width:46%;aspect-ratio:auto;border-bottom:none;border-right:1px solid var(--border-soft)}
.post-card.feature .body{padding:34px 38px}
.post-card.feature h3{font-size:28px}
.post-card.feature p{font-size:16px}

/* Artikel-Layout */
.article-head{padding:64px 0 24px;text-align:center}
.article-head .kicker{color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.article-head h1{font-size:clamp(30px,4.6vw,46px);max-width:820px;margin:12px auto 14px;line-height:1.12}
.article-head .sub{color:var(--text-soft);font-size:19px;max-width:680px;margin:0 auto}
.article-figure{width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);margin:6px 0 0}
.article{max-width:760px;margin:0 auto;padding:36px 20px 20px;font-size:18px;color:var(--text-soft)}
.article h2{font-size:28px;margin:38px 0 12px;color:#fff}
.article h3{font-size:21px;margin:26px 0 10px;color:#fff}
.article p{margin:0 0 18px}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{margin-bottom:8px}
.article a{color:var(--primary-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(168,124,255,.4)}
.article a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.article img{border-radius:var(--radius);border:1px solid var(--border);margin:8px 0}
.article blockquote{border-left:3px solid var(--accent);background:var(--card);padding:16px 20px;border-radius:0 12px 12px 0;margin:0 0 20px;color:var(--text-soft)}
.callout{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:0 12px 12px 0;padding:18px 22px;margin:0 0 22px}
.callout strong{color:#fff}
.callout.lime{border-left-color:var(--accent)}

/* Inhaltsverzeichnis */
.toc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin:0 0 30px}
.toc strong{display:block;color:#fff;font-size:14px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px}
.toc ol{margin:0 0 0 18px;color:var(--text-soft);font-size:15.5px}
.toc li{margin-bottom:6px}
.toc a{color:var(--text-soft);text-decoration:none}
.toc a:hover{color:var(--accent)}

/* Author-Box */
.author-box{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin:34px auto 0;max-width:760px;box-shadow:var(--shadow)}
.author-box .avatar{flex:0 0 auto;width:60px;height:60px;border-radius:50%;border:2px solid rgba(198,255,77,.4)}
.author-box .who{font-weight:800;color:#fff;font-size:16px}
.author-box .role{color:var(--accent);font-size:13px;font-weight:700;margin-bottom:6px}
.author-box p{color:var(--muted);font-size:14.5px;margin:0}
.byline{display:flex;gap:14px;align-items:center;justify-content:center;color:var(--muted);font-size:14px;margin-top:18px;flex-wrap:wrap}
.byline .avatar{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(198,255,77,.4)}
.byline b{color:var(--text-soft);font-weight:700}

/* Tag-Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.chip{font-size:12.5px;font-weight:700;color:var(--text-soft);background:rgba(139,92,255,.12);border:1px solid var(--border);padding:5px 12px;border-radius:999px}

/* Footer */
footer.site{background:var(--dark);color:var(--muted);padding:48px 0 40px;font-size:14px;margin-top:48px;border-top:1px solid var(--border-soft)}
footer.site a{color:#c2b6e8}footer.site a:hover{color:var(--accent)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px}
.foot-grid h4{color:#fff;margin-bottom:10px;font-size:15px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:6px}
.copyright{margin-top:30px;padding-top:18px;border-top:1px solid var(--border-soft);color:#6f6690;font-size:13px}

.note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px}

/* Fokus (WCAG 2.4.7) */
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible,
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a:focus:not(:focus-visible),.btn:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}

/* Anker unter Sticky-Header */
:target,section[id],h2[id],h3[id]{scroll-margin-top:88px}

/* Reduzierte Bewegung (WCAG 2.3.3) — respektiert Betriebssystem-Einstellung */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .read-progress{transition:none}
  .card:hover,.post-card:hover,.btn:hover,.btn.outline:hover,.stat:hover{transform:none}
}

/* Responsive */
@media(max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .post-card.feature{grid-column:span 2;flex-direction:column}
  .post-card.feature .thumb{width:100%;aspect-ratio:16/9;border-right:none;border-bottom:1px solid var(--border-soft)}
}
@media(max-width:820px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .nav{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .nav nav{order:3;width:100%;display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
  /* Sichtbarer Scroll-Hinweis fuer die horizontale Mobil-Navigation (rechts verdeckte Links wie "Preise"), gleiche CI wie .table-wrap */
  .nav nav::-webkit-scrollbar{height:4px}
  .nav nav::-webkit-scrollbar-track{background:transparent}
  .nav nav::-webkit-scrollbar-thumb{background:var(--primary);border-radius:8px}
  .nav nav a{margin-left:0;white-space:nowrap;font-size:14px;display:inline-flex;align-items:center;min-height:44px;padding:11px 6px}
  .nav nav a.active::after{display:none}
  .cta-band{padding:34px}
}
@media(max-width:620px){
  .blog-grid{grid-template-columns:1fr}
  .author-box{flex-direction:column}
}