/*
Theme Name: Selfmade-Trader
Theme URI: https://selfmade-trader.de
Author: André Rosenthal
Description: Schlankes Ratgeber-Theme für selfmade-trader.de. Artikel mit Inhaltsverzeichnis, Testdaten, Community-Block und Risikohinweis. Ohne Page Builder, ohne externe Schriften, ohne JavaScript.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: selfmade-trader
*/

@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/plus-jakarta-sans.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/source-sans-3.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF; --soft:#F4F7FB; --soft-2:#E9EFF8; --line:#DFE6EF;
  --ink:#0E1A2B; --ink-2:#42526A; --ink-3:#66768C;
  --brand:#1657D9; --brand-dark:#0F3FA6; --brand-soft:#E8F0FE;
  --navy:#0B1E3F; --navy-2:#15305E; --on-navy:#FFFFFF; --on-navy-2:#BCC9E0;
  --cta:#FFB703; --cta-hover:#F2A600; --cta-ink:#1E1500;
  --note:#FFF6DA; --note-ink:#6B4E00;
  --head:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
  --body:'Source Sans 3',system-ui,'Segoe UI',sans-serif;
  --shell:74rem; --radius:14px;
  --shadow:0 1px 2px rgba(14,26,43,.06),0 10px 28px rgba(14,26,43,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
img{height:auto}
svg{display:block}
a{color:var(--brand);text-underline-offset:.18em}
a:hover{color:var(--brand-dark)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);text-wrap:balance}
h1{font-weight:800;font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;letter-spacing:-.015em}
h3{font-weight:700;font-size:1.1875rem;line-height:1.3}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;clip:auto;background:var(--bg);padding:.6rem 1rem;border-radius:8px;z-index:99;box-shadow:var(--shadow)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:1.125rem}
@media (min-width:48rem){.shell{padding-inline:2rem}}
.band{padding-block:3rem}
@media (min-width:56rem){.band{padding-block:4.5rem}}
.band.soft{background:var(--soft)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1.75rem}
.band-head p{color:var(--ink-2);max-width:38rem;margin-top:.375rem}
.more-link{font-family:var(--head);font-weight:700;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.more-link:hover{text-decoration:underline}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;border-radius:999px;padding:.8rem 1.4rem;cursor:pointer;background:var(--cta);color:var(--cta-ink);text-align:center}
.btn:hover{background:var(--cta-hover);color:var(--cta-ink)}
.btn.small{font-size:.9375rem;padding:.55rem 1.05rem}
.btn.ghost{background:var(--bg);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:var(--bg);color:var(--ink)}

/* Kopf */
.head{background:var(--bg);border-bottom:1px solid var(--line);z-index:6}
.head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.75rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--head);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand b{color:var(--brand);font-weight:800}
.brand img{max-height:40px;width:auto}
.nav{order:3;flex:1 1 100%;overflow-x:auto;margin-inline:-.5rem;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav ul{display:flex;gap:.25rem}
.nav a{display:block;font-family:var(--head);font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;white-space:nowrap;padding:.4rem .7rem;border-radius:999px}
.nav a:hover,.nav .current-menu-item > a,.nav .current-cat > a,.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-dark)}
@media (max-width:30rem){
  .head-row{column-gap:.75rem}
  .brand{font-size:1.0625rem;gap:.45rem}
  .brand svg{width:28px;height:28px}
  .head .btn.small{font-size:.875rem;padding:.5rem .8rem}
}
@media (min-width:62rem){
  .head{position:sticky;top:0}
  .admin-bar .head{top:32px}
}
@media (min-width:72rem){
  .head-row{flex-wrap:nowrap}
  .nav{order:0;flex:0 1 auto;min-width:0;margin:0}
}

/* Startseite: Einstieg */
.hero{background:linear-gradient(180deg,var(--soft) 0%,var(--bg) 100%);padding-block:2.5rem 3rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.hero h1 em{font-style:normal;color:var(--brand)}
.lede{font-size:1.25rem;line-height:1.5;color:var(--ink-2);max-width:40rem}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--head);font-weight:700;font-size:.8125rem;letter-spacing:.02em;color:var(--brand-dark);background:var(--brand-soft);border-radius:999px;padding:.3rem .75rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--ink-2);font-size:1rem}
.checks li{display:flex;align-items:center;gap:.45rem}
.checks li::before,.keybox li::before{content:"";flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%231657D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (min-width:60rem){.hero{padding-block:4.5rem}.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4rem}}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:1.5rem}
.card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);min-width:0;transition:box-shadow .15s,border-color .15s}
.card:hover{color:var(--ink);box-shadow:var(--shadow);border-color:var(--soft-2)}
.card:hover h3{color:var(--brand)}
.thumb{background:linear-gradient(135deg,var(--brand-soft),var(--soft));aspect-ratio:2/1;overflow:hidden}
.thumb svg,.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:.6rem;padding:1.125rem 1.25rem 1.25rem;flex:1}
.card-body p{color:var(--ink-2);font-size:1rem;line-height:1.5}
.badge{align-self:flex-start;font-family:var(--head);font-weight:700;font-size:.75rem;letter-spacing:.02em;color:var(--brand-dark);background:var(--brand-soft);border-radius:999px;padding:.2rem .65rem}
.meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.875rem;color:var(--ink-3);margin-top:auto;padding-top:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.375rem}
.chips span{font-size:.8125rem;font-weight:600;color:var(--ink-2);background:var(--soft);border-radius:6px;padding:.1rem .5rem;font-variant-numeric:tabular-nums}
.feature{box-shadow:var(--shadow)}
.feature .card-body{padding:1.25rem 1.5rem 1.5rem}
.feature h3{font-size:1.375rem;font-weight:800;letter-spacing:-.01em}

/* Themen */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.25rem}
.topic{display:flex;flex-direction:column;gap:.6rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.375rem;text-decoration:none;color:var(--ink);transition:box-shadow .15s}
.topic:hover{color:var(--ink);box-shadow:var(--shadow)}
.topic p{color:var(--ink-2);font-size:1rem;line-height:1.5}
.topic .count{font-family:var(--head);font-weight:700;font-size:.875rem;color:var(--brand);margin-top:auto}
.icon{width:2.75rem;height:2.75rem;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}

/* Community-Band */
.community{background:var(--navy);color:var(--on-navy)}
.community h2{color:var(--on-navy)}
.community-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.25rem;align-items:center}
.community-text{display:flex;flex-direction:column;gap:1.125rem;min-width:0}
.community-text p{color:var(--on-navy-2);font-size:1.1875rem;line-height:1.55;max-width:34rem}
.community .pill{background:var(--navy-2);color:var(--on-navy)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.875rem}
.stat{background:var(--navy-2);border-radius:var(--radius);padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.15rem}
.stat b{font-family:var(--head);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--cta)}
.stat span{color:var(--on-navy-2);font-size:.9375rem;line-height:1.4}
@media (min-width:60rem){.community-grid.two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem}}

/* Autor */
.about-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem}
.about-row > div{flex:1 1 18rem;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.about-row p{color:var(--ink-2);max-width:40rem}
.avatar{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--navy);color:var(--on-navy);display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:1rem;object-fit:cover}
.avatar.big{width:6.5rem;height:6.5rem;font-size:2rem}

/* Seitenkopf, Filter, Blättern */
.page-head{background:var(--soft);padding-block:2.5rem}
.page-head .shell{display:flex;flex-direction:column;gap:.75rem}
.page-head .shell.about-row{flex-direction:row;gap:1.5rem 2rem}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.chip{font-family:var(--head);font-weight:600;font-size:.9375rem;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--brand);color:var(--ink)}
.chip[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:var(--on-navy)}
.chip small{font-size:.8125rem;opacity:.75;margin-left:.3em}
.empty{background:var(--soft);border-radius:var(--radius);padding:2rem;color:var(--ink-2);text-align:center}
.pagination{margin-top:2.5rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.pagination .page-numbers{font-family:var(--head);font-weight:700;font-size:.9375rem;min-width:2.5rem;text-align:center;padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink)}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-navy)}

/* Einzelartikel */
.post{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "body";gap:1.5rem;padding-block:1.75rem 3.5rem}
.post-head{grid-area:head;display:flex;flex-direction:column;gap:1rem;min-width:0}
.side{grid-area:side;min-width:0}
.post-main{grid-area:body;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.875rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.post-head h1{font-size:clamp(1.875rem,4.2vw,2.75rem)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;font-size:.9375rem;color:var(--ink-3)}
.byline .who{display:flex;align-items:center;gap:.65rem}
.byline .who-text{display:flex;flex-direction:column;line-height:1.3}
.byline .who a{font-family:var(--head);font-weight:700;color:var(--ink);text-decoration:none}
.byline .who a:hover{color:var(--brand)}
.toc{background:var(--soft);border-radius:var(--radius);padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.toc-title{font-family:var(--head);font-size:1rem;font-weight:800}
.toc ol{counter-reset:toc;display:flex;flex-direction:column}
.toc li{counter-increment:toc;border-top:1px solid var(--line)}
.toc a{display:flex;gap:.6rem;padding:.5rem 0;font-family:var(--head);font-weight:600;font-size:.9375rem;line-height:1.35;color:var(--ink);text-decoration:none}
.toc a::before{content:counter(toc) ".";color:var(--brand);font-weight:800;min-width:1.1rem}
.toc a:hover{color:var(--brand)}
.side-cta{display:none}
@media (min-width:62rem){
  .post{grid-template-columns:18rem minmax(0,46rem);grid-template-areas:"side head" "side body";column-gap:3.5rem;row-gap:1.75rem;padding-block:2.5rem 5rem}
  .side-in{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1rem}
  .admin-bar .side-in{top:7.5rem}
  .side-cta{display:flex;flex-direction:column;gap:.6rem;background:var(--navy);color:var(--on-navy-2);border-radius:var(--radius);padding:1.25rem;font-size:.9375rem;line-height:1.45}
  .side-cta b{font-family:var(--head);font-weight:800;font-size:1.0625rem;color:var(--on-navy)}
  .side-cta .btn{margin-top:.25rem}
}

/* Fließtext (auch für Seiten) */
.prose{font-size:1.125rem;line-height:1.7}
.prose > *{margin-block:0}
.prose > * + *{margin-top:1.25rem}
.prose h2{scroll-margin-top:6rem;font-size:1.625rem}
.prose > h2{margin-top:2.75rem}
.prose > h3{margin-top:1.75rem}
.prose > h1 + *{margin-top:1.5rem}
.prose ul,.prose ol{padding-left:1.35rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.35rem}
.prose img{border-radius:var(--radius)}
.prose figure{margin-inline:0}
.prose figcaption,.prose .wp-element-caption{font-size:.9375rem;line-height:1.45;color:var(--ink-3);margin-top:.6rem;text-align:left}
.prose .wp-block-image img{border:1px solid var(--line)}
.prose blockquote{margin-inline:0;border-left:4px solid var(--brand);padding:.25rem 0 .25rem 1.125rem;color:var(--ink-2)}

.keybox{background:var(--brand-soft);border-radius:var(--radius);padding:1.25rem 1.375rem}
.keybox > * + *{margin-top:.75rem}
.keybox h3{font-size:1.0625rem;font-weight:800;color:var(--brand-dark)}
.prose .keybox ul{list-style:none;padding:0;font-size:1.0625rem;line-height:1.5}
.keybox li{display:flex;gap:.6rem}
.keybox li::before{background-color:var(--bg);margin-top:.15rem}
.prose .keybox li + li{margin-top:.5rem}

.sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.25rem),1fr));gap:.625rem}
.sheet div{background:var(--soft);border-radius:10px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.1rem}
.sheet dt{font-size:.8125rem;color:var(--ink-3);line-height:1.3}
.sheet dd{font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.3;font-variant-numeric:tabular-nums}
.video{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem;font-size:1rem;color:var(--ink-2);text-decoration:none}
.video:hover{border-color:var(--brand);color:var(--ink)}
.video .play{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:none}
.tag{display:inline-block;font-family:var(--head);font-weight:700;font-size:.75rem;color:var(--note-ink);background:var(--note);border-radius:6px;padding:.1rem .5rem;vertical-align:middle;white-space:nowrap}
.note,.prose p.note{background:var(--note);color:var(--note-ink);border-radius:10px;padding:.8rem 1rem;font-size:.9375rem;line-height:1.5}

.prose .wp-block-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.prose .wp-block-table table{border-collapse:collapse;width:100%;min-width:31rem;table-layout:auto;font-size:1rem;line-height:1.35}
.prose .wp-block-table th,.prose .wp-block-table td{border:0;text-align:right;padding:.75rem 1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.prose .wp-block-table th:first-child,.prose .wp-block-table td:first-child{text-align:left;white-space:normal}
.prose .wp-block-table thead{border:0}
.prose .wp-block-table thead th{font-family:var(--head);font-weight:700;font-size:.875rem;background:var(--navy);color:var(--on-navy)}
.prose .wp-block-table tbody tr:nth-child(even){background:var(--soft)}
.prose .wp-block-table tbody td:first-child{font-weight:600}
.prose .wp-block-table figcaption{padding:.6rem 1rem;margin:0;border-top:1px solid var(--line)}

.inline-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;background:var(--soft);border-left:4px solid var(--cta);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.25rem;font-size:1.0625rem;line-height:1.5}
.inline-cta span{flex:1 1 16rem;min-width:0}
.prose .inline-cta + h2{margin-top:2.25rem}

.faq > * + *{margin-top:.625rem}
.prose details{border:1px solid var(--line);border-radius:var(--radius);padding:0 1.125rem}
.prose summary{font-family:var(--head);font-weight:700;font-size:1.0625rem;line-height:1.35;padding:.9rem 0;cursor:pointer}
.prose details > :not(summary){padding-bottom:1rem;color:var(--ink-2);font-size:1.0625rem;line-height:1.6}

.fazit{background:var(--soft);border-radius:var(--radius);padding:1.5rem}
.prose > .fazit{margin-top:2.75rem}
.fazit > * + *{margin-top:1rem}
.fazit h2{font-size:1.5rem}
.prose .fazit ol{list-style:none;padding:0;counter-reset:fz}
.fazit li{counter-increment:fz;position:relative;padding-left:3rem;min-height:2.25rem;font-size:1.0625rem;line-height:1.55;padding-top:.25rem}
.prose .fazit li + li{margin-top:.875rem}
.fazit li::before{content:counter(fz);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--brand);color:var(--on-navy);display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:1rem}

.cta-box{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--on-navy-2);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;gap:.75rem}
.prose > .cta-box{margin-top:2.25rem}
.cta-box strong{font-family:var(--head);font-weight:800;font-size:1.625rem;line-height:1.2;letter-spacing:-.01em;color:var(--on-navy)}
.cta-box p{font-size:1.125rem;line-height:1.55}
.cta-box .btn{align-self:flex-start;margin-top:.5rem}
@media (min-width:40rem){.cta-box{padding:2.25rem}}
.risk,.prose p.risk{font-size:.875rem;line-height:1.55;color:var(--ink-3);background:var(--soft);border-radius:10px;padding:.9rem 1.1rem}
.author{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;font-size:1rem;line-height:1.55}
.author-text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.author b{font-family:var(--head);font-weight:800;font-size:1.0625rem}
.author p{color:var(--ink-2)}
.related{margin-top:2.75rem}
.related h2{font-size:1.5rem;margin-bottom:1.125rem}

/* Seiten */
.st-page{max-width:46rem;padding-block:2.5rem 4rem}

/* Fuß */
.foot{background:var(--navy);color:var(--on-navy-2);padding-block:3rem;font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:2rem}
.foot .brand{color:var(--on-navy)}
.foot .brand b{color:var(--cta)}
.foot h4{font-size:.9375rem;color:var(--on-navy);margin-bottom:.6rem}
.foot ul{display:flex;flex-direction:column;gap:.35rem}
.foot a{color:var(--on-navy-2);text-decoration:none}
.foot a:hover{color:var(--on-navy);text-decoration:underline}
.foot-risk{background:var(--navy-2);border-radius:var(--radius);padding:1rem 1.25rem;margin-top:2rem;font-size:.875rem;line-height:1.55}
.foot-risk b{color:var(--on-navy)}
.copy{margin-top:1.5rem;font-size:.8125rem}