:root{
  --cm-bg:#fafafb;--cm-paper:#fff;--cm-fg:#0f172a;--cm-muted:#64748b;
  --cm-line:#e2e8f0;--cm-line-soft:#f1f5f9;
  --cm-accent:#6366f1;--cm-accent-2:#ec4899;--cm-accent-grad:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);
  --cm-radius:18px;--cm-radius-sm:12px;--cm-container:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cm-bg);color:var(--cm-fg);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cm-accent);text-decoration:none}
a:hover{color:#4338ca}
h1,h2,h3,h4{color:var(--cm-fg);line-height:1.2;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
.cm-container{max-width:var(--cm-container);margin:0 auto;padding:0 24px;width:100%}
.cm-skip{position:absolute;left:-9999px}.cm-skip:focus{left:1rem;top:1rem;background:var(--cm-fg);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:99}
.cm-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;margin:0 0 .8em;background:var(--cm-accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-pill{display:inline-block;background:var(--cm-line-soft);color:var(--cm-fg);padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.cm-pill--invert{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}

/* Header */
.cm-header{position:sticky;top:0;z-index:50;background:rgba(250,250,251,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--cm-line)}
.cm-header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:32px}
.cm-brand{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.1rem;color:var(--cm-fg)}
.cm-brand-mark{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;position:relative}
.cm-brand-dot{position:absolute;width:18px;height:18px;border-radius:50%;mix-blend-mode:multiply}
.cm-brand-dot--1{background:#6366f1;left:0;top:6px}
.cm-brand-dot--2{background:#ec4899;right:0;top:8px}
.cm-brand-name{letter-spacing:-.01em}
.cm-nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.cm-nav a{color:var(--cm-fg);font-weight:500;font-size:.95rem;padding:.4rem 0;position:relative}
.cm-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cm-accent-grad);border-radius:2px;transition:width .25s}
.cm-nav a:hover::after{width:100%}

/* Hero */
.cm-hero{padding:80px 0 56px;position:relative;overflow:hidden}
.cm-hero-inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto}
.cm-hero-pill{display:inline-block;background:var(--cm-paper);border:1px solid var(--cm-line);color:var(--cm-fg);padding:8px 16px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:24px;box-shadow:0 6px 20px -10px rgba(99,102,241,.4)}
.cm-hero-title{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.05;margin:0 0 .6em;letter-spacing:-.03em;background:linear-gradient(135deg,#0f172a 0%,#475569 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-home-intro{text-align:left;max-width:640px;margin:0 auto;color:#334155;font-size:1.05rem;line-height:1.75}
.cm-home-intro h2{font-size:1.4rem;margin-top:1.2em;text-align:center;background:var(--cm-accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-home-intro p{margin:0 0 1em}
.cm-hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(168,85,247,.18),transparent 70%),radial-gradient(ellipse 50% 40% at 80% 30%,rgba(236,72,153,.12),transparent 70%)}

/* Sections */
.cm-section{padding:64px 0}
.cm-section--soft{background:linear-gradient(180deg,transparent 0%,#f5f3ff 50%,transparent 100%)}
.cm-section-head{text-align:center;margin-bottom:40px}
.cm-section-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0}

/* Bento */
.cm-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,260px);gap:20px}
.cm-bento-item{position:relative;display:block;border-radius:var(--cm-radius);overflow:hidden;background:#1e293b;color:#fff;box-shadow:0 4px 16px -8px rgba(15,23,42,.16);transition:transform .35s,box-shadow .35s}
.cm-bento-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px -16px rgba(15,23,42,.32)}
.cm-bento-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s,opacity .35s;opacity:.85}
.cm-bento-item:hover img{transform:scale(1.06);opacity:.6}
.cm-bento-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,42,.85) 0%,rgba(15,23,42,.15) 60%,transparent 100%);pointer-events:none}
.cm-bento-body{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2}
.cm-bento-body h3{color:#fff;font-size:1.15rem;margin:.4em 0 0;line-height:1.3}
.cm-bento--big{grid-column:span 2;grid-row:span 2}
.cm-bento--big .cm-bento-body h3{font-size:1.8rem}
.cm-bento--tall{grid-row:span 2}
@media(max-width:900px){.cm-bento{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,200px)}.cm-bento--big{grid-column:span 2;grid-row:span 1}.cm-bento--tall{grid-row:span 1}}
@media(max-width:520px){.cm-bento{grid-template-columns:1fr;grid-template-rows:repeat(5,200px)}.cm-bento--big,.cm-bento--tall{grid-column:span 1;grid-row:span 1}}

/* Grid + Card */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.cm-card{background:var(--cm-paper);border:1px solid var(--cm-line);border-radius:var(--cm-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.cm-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -18px rgba(99,102,241,.25);border-color:rgba(99,102,241,.35)}
.cm-card-img{display:block;overflow:hidden}
.cm-card-img img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .5s}
.cm-card:hover .cm-card-img img{transform:scale(1.05)}
.cm-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.cm-card-meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--cm-muted);margin:0 0 .8em;flex-wrap:wrap}
.cm-card-title{font-size:1.2rem;margin:0 0 .5em;line-height:1.3}
.cm-card-title a{color:var(--cm-fg)}
.cm-card-title a:hover{background:var(--cm-accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-card-excerpt{margin:0 0 1em;color:#475569;font-size:.92rem;flex:1}
.cm-card-link{font-weight:600;font-size:.88rem;color:var(--cm-accent);display:inline-flex;align-items:center;gap:.4em;align-self:flex-start}
.cm-card-link:hover span{transform:translateX(3px)}
.cm-card-link span{transition:transform .25s;display:inline-block}

/* Article */
.cm-article{padding:48px 0 64px}
.cm-article-head{text-align:center;margin-bottom:32px}
.cm-article-meta{display:flex;justify-content:center;align-items:center;gap:10px;font-size:.85rem;color:var(--cm-muted);margin:0 0 1.2em;flex-wrap:wrap}
.cm-article-title{font-size:clamp(2rem,4.4vw,3.4rem);margin:0 0 .4em;max-width:20ch;margin-left:auto;margin-right:auto}
.cm-article-lead{font-size:1.15rem;color:#475569;line-height:1.55;max-width:36em;margin:0 auto}
.cm-article-figure{margin:0 0 36px}
.cm-article-figure img{aspect-ratio:21/9;object-fit:cover;width:100%;border-radius:var(--cm-radius)}
.cm-article-body{max-width:720px;font-size:1.05rem;line-height:1.8;color:#1e293b}
.cm-article-body h2{font-size:1.6rem;margin:1.6em 0 .5em}
.cm-article-body h3{font-size:1.25rem;margin:1.4em 0 .4em}
.cm-article-body p{margin:0 0 1.2em}
.cm-article-body ul,.cm-article-body ol{padding-left:1.4em;margin:0 0 1.2em}
.cm-article-body blockquote{border-left:4px solid var(--cm-accent);padding:.4em 1.4em;margin:1.6em 0;color:#475569;font-style:italic;background:#f5f3ff;border-radius:0 var(--cm-radius-sm) var(--cm-radius-sm) 0}
.cm-article-body img{border-radius:var(--cm-radius-sm);margin:1.6em 0}
.cm-article-body a{border-bottom:1px solid currentColor}

/* Cat */
.cm-cat-head{text-align:center;margin-bottom:40px}
.cm-cat-head h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:0 0 .3em}
.cm-cat-desc{color:var(--cm-muted);max-width:38em;margin:0 auto;font-size:1.05rem}

/* FAQ */
.cm-faq{padding:64px 0;background:linear-gradient(180deg,transparent 0%,#f5f3ff 100%)}
.cm-faq-inner{max-width:720px;margin:0 auto;padding:0 24px;text-align:center}
.cm-faq-inner h2{font-size:clamp(1.8rem,3.5vw,2.4rem);margin:0 0 1.2em}
.cm-faq-list{text-align:left;display:flex;flex-direction:column;gap:12px}
.cm-faq-item{background:var(--cm-paper);border:1px solid var(--cm-line);border-radius:var(--cm-radius-sm);padding:0;transition:border-color .2s,box-shadow .2s}
.cm-faq-item:hover{border-color:rgba(99,102,241,.4)}
.cm-faq-item[open]{box-shadow:0 8px 28px -16px rgba(99,102,241,.25)}
.cm-faq-item summary{padding:18px 22px;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1rem}
.cm-faq-item summary::after{content:"+";font-size:1.5em;color:var(--cm-accent);font-weight:400;transition:transform .25s}
.cm-faq-item[open] summary::after{transform:rotate(45deg)}
.cm-faq-answer{padding:0 22px 20px;color:#475569;line-height:1.7}

/* Footer */
.cm-footer{background:#0f172a;color:#cbd5e1;padding:64px 0 32px;margin-top:64px;position:relative;overflow:hidden}
.cm-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(99,102,241,.18),transparent 70%);pointer-events:none}
.cm-footer .cm-container{position:relative;z-index:1}
.cm-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;margin-bottom:48px}
.cm-footer-brand .cm-brand{color:#fff;font-size:1.15rem}
.cm-footer-tag{color:#94a3b8;font-size:.92rem;margin:1em 0 0;max-width:30ch}
.cm-footer-title{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 1em;font-weight:700}
.cm-footer-list{list-style:none;padding:0;margin:0}
.cm-footer-list li{margin-bottom:.6em}
.cm-footer-list a{color:#cbd5e1;font-size:.92rem}
.cm-footer-list a:hover{color:#a5b4fc}
.cm-footer-bottom{border-top:1px solid #1e293b;padding-top:24px;font-size:.85rem;color:#64748b}
.cm-footer-bottom p{margin:0}
@media(max-width:780px){.cm-footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.cm-footer-grid{grid-template-columns:1fr}}

/* List-Style Fix — Tailwind-CDN/Pico/Skeleton-Resets aufheben für Content-Bereiche */
[class*="article-body"] ul,
[class*="cat-intro"] ul,
[class*="home-intro"] ul,
.article-content ul,
.content ul {
  list-style: disc !important;
  list-style-position: outside;
  padding-left: 1.5rem;
}
[class*="article-body"] ol,
[class*="cat-intro"] ol,
[class*="home-intro"] ol,
.article-content ol,
.content ol {
  list-style: decimal !important;
  list-style-position: outside;
  padding-left: 1.5rem;
}
[class*="article-body"] li,
[class*="cat-intro"] li,
[class*="home-intro"] li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}