/* Themen & Lösungen (/themen/). Freigegebene Variante 4: dunkle Seite, kompakte Karten (172 px, 3 Spalten), Themenfilter direkt unter der Suche.
   Tokens der Seite (--lp-*, --r-*, --bl-*) werden genutzt, die Seitenfarben folgen dem Hell-/Dunkel-Schalter der Website.
   Radius: Felder/Buttons 8 px (--r-sm), Karten 12 px (--r-md), Badges 4 px (--r-xs). Kein Rot, keine Raute, kein Marker. */
.th-lp{--th-card:#1D1729;--th-bd:rgba(163,133,245,.26);--th-bd2:rgba(163,133,245,.4);--th-tx:#D9CCFB;--th-h:#F7F5FC;--th-ac:#A385F5;--th-field:#1D1729;--th-ph:#B9AEDB;--th-btn:#5F2DEE;--th-btn-h:#7A52F2;--th-badge-bg:#EDE6FE;--th-badge-tx:#1D1729;background:var(--lp-bg,#0E0C15)}
body.active-light-mode .th-lp{--th-card:#FFFFFF;--th-bd:rgba(29,23,41,.16);--th-bd2:rgba(95,45,238,.45);--th-tx:#57536A;--th-h:#1D1729;--th-ac:#5F2DEE;--th-field:#FFFFFF;--th-ph:#6A6580;--th-btn-h:#4A1FCC;background:var(--lp-bg,#F7F5FC)}
.th-lp [hidden]{display:none!important}
.th-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.th-lp a:focus-visible,.th-lp button:focus-visible,.th-lp textarea:focus-visible{outline:2px solid var(--th-ac);outline-offset:2px}
.th-ic{width:20px;height:20px;flex:none;display:inline-block}
.th-ic>svg{display:block;width:100%;height:100%;overflow:visible}

.th-hero{padding:136px 0 20px;text-align:center}
.th-hero .container{max-width:1200px}
.th-kick{display:block;font:500 12px/1.2 var(--bl-mono,"IBM Plex Mono",monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--th-ac)}
.th-lp h1.th-h1{font:700 40px/1.1 var(--bl-head,Oxanium,sans-serif);color:var(--th-h);margin:10px auto 10px;max-width:820px;text-wrap:balance;letter-spacing:0}
.th-lead{color:var(--th-tx);margin:0 auto 28px;max-width:640px;font-size:17px;line-height:1.5}

.th-form{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:780px;margin:0 auto}
.th-form .th-field{width:100%;text-align:left}
.th-field{flex:1;min-width:0;display:block}
.th-field textarea{display:block;width:100%;height:88px;min-height:88px;max-height:200px;resize:none;overflow-y:auto;box-sizing:border-box;font:400 17px/1.35 var(--bl-ui,Inter,sans-serif);color:var(--th-h);background:var(--th-field);border:1px solid var(--th-ac);border-radius:var(--r-sm,8px);padding:14px 16px;margin:0}
.th-field textarea::placeholder{color:var(--th-ph);opacity:1}
.th-form .th-btn{min-width:260px}
.th-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--th-btn);color:#fff;font:600 15px/1.2 var(--bl-ui,Inter,sans-serif);text-decoration:none;border-radius:var(--r-sm,8px);padding:0 22px;border:2px solid var(--th-btn);cursor:pointer;white-space:nowrap}
.th-btn:hover{background:var(--th-btn-h);border-color:var(--th-btn-h);color:#fff}
.th-btn.is-sec{background:transparent;border-color:var(--th-ac);color:var(--th-h);white-space:normal;text-align:center}
.th-btn.is-sec:hover{background:transparent;border-color:var(--th-h);color:var(--th-h)}

.th-exs{display:flex;flex-wrap:wrap;gap:8px;margin:18px auto 0;align-items:center;justify-content:center;max-width:860px}
.th-exs-l{font-size:13px;color:var(--th-tx)}
.th-ex{font:500 13px/1.3 var(--bl-ui,Inter,sans-serif);color:var(--th-h);background:transparent;border:1px solid var(--th-bd2);border-radius:var(--r-sm,8px);padding:7px 10px;cursor:pointer;text-align:left;min-height:32px}
.th-ex:hover{border-color:var(--th-ac)}
.th-note{display:flex;gap:6px;align-items:flex-start;margin:14px auto 0;justify-content:center;text-align:left;max-width:880px;font:500 12px/1.4 var(--bl-mono,"IBM Plex Mono",monospace);letter-spacing:.04em;color:var(--th-tx)}
.th-note .th-ic{width:16px;height:16px;color:var(--th-ac);margin-top:1px}

.th-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px auto 0;justify-content:center}
.th-chip{font:500 14px/1.2 var(--bl-ui,Inter,sans-serif);border-radius:var(--r-sm,8px);padding:9px 12px;min-height:40px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;background:transparent;color:var(--th-h);border:1px solid var(--th-bd2)}
.th-chip:hover:not(:disabled){border-color:var(--th-ac)}
.th-chip.is-on{background:var(--th-btn);border-color:var(--th-btn);color:#fff}
.th-chip .th-n{font:500 12px/1 var(--bl-mono,"IBM Plex Mono",monospace);opacity:.8}
.th-chip:disabled{opacity:.45;cursor:default}
.th-nojs{margin:12px 0 0;color:var(--th-tx);font-size:15px}
.th-js .th-nojs{display:none}

.th-res{padding:20px 0 48px}
.th-res .container{max-width:1200px}
.th-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;color:var(--th-tx);font-size:14px;line-height:1.4}
.th-reset{background:none;border:0;color:var(--th-ac);font:500 14px/1.2 var(--bl-ui,Inter,sans-serif);cursor:pointer;text-decoration:underline;padding:8px 0;min-height:32px;white-space:nowrap}
.th-hint{margin:0 0 16px;padding:12px 16px;border:1px solid var(--th-bd);border-radius:var(--r-md,12px);color:var(--th-tx);font-size:14px;line-height:1.5}
.th-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.th-card{margin:0;padding:0;min-width:0}
.th-card>a.th-link{height:172px;box-sizing:border-box;display:flex;flex-direction:column;background:var(--th-card);border:1px solid var(--th-bd);border-radius:var(--r-md,12px);padding:16px 18px;text-decoration:none;color:var(--th-h)}
.th-card>a.th-link:hover{border-color:var(--th-ac)}
.th-cm{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.th-ti{width:18px;height:18px;color:var(--th-ac)}
.th-type{font:500 11px/1 var(--bl-mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-xs,4px);padding:4px 6px;background:var(--th-badge-bg);color:var(--th-badge-tx);white-space:nowrap}
.th-tl{font-size:12px;line-height:1.3;color:var(--th-tx);margin-left:auto;text-align:right}
.th-lp .th-card h3{font:600 18px/1.25 var(--bl-head,Oxanium,sans-serif);color:var(--th-h);margin:0;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto}
.th-card p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--th-tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th-go{margin-top:auto;display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:14px;color:var(--th-ac)}
.th-go .th-ic{width:16px;height:16px}
.th-empty{background:var(--th-card);border:1px solid var(--th-bd);border-radius:var(--r-md,12px);padding:20px;color:var(--th-tx);line-height:1.6}
.th-empty .th-reset{padding:0;min-height:0}
.th-empty a.th-link-in{color:var(--th-ac);text-decoration:underline}

.th-cta-sec{padding:0 0 48px}
.th-cta-sec .container{max-width:1200px}
.th-cta{background:var(--th-card);border:1px solid var(--th-bd);border-radius:var(--r-lg,16px);padding:32px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.th-lp .th-cta h2{font:600 24px/1.2 var(--bl-head,Oxanium,sans-serif);color:var(--th-h);margin:0}
.th-cta p{color:var(--th-tx);margin:6px 0 0}
.th-cta-act{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:1000px){.th-list{grid-template-columns:repeat(2,minmax(0,1fr))}.th-field textarea{height:88px;min-height:88px}}
@media(max-width:640px){
.th-hero{padding:104px 0 12px}
.th-lp h1.th-h1{font-size:28px}
.th-lead{font-size:15px;margin-bottom:14px}
.th-form{gap:10px}
.th-field textarea{font-size:16px;padding:12px 14px;height:76px;min-height:76px}
.th-form .th-btn{min-width:0}.th-btn{width:100%;min-height:48px;white-space:normal;text-align:center;padding:12px 16px}
.th-exs{gap:8px;margin-top:12px}
.th-exs-l{width:100%;text-align:center}
.th-ex{font-size:14px;padding:10px 12px;min-height:44px}
.th-chips{margin:14px 0 0;gap:8px}
.th-chip{font-size:14px;padding:10px 12px;min-height:44px}
.th-reset{min-height:44px;padding:12px 0}
.th-list{grid-template-columns:minmax(0,1fr);gap:12px}
.th-card>a.th-link{height:auto;min-height:150px}
.th-lp .th-card h3,.th-card p{display:block;overflow:visible}
.th-go{margin-top:10px}
.th-cm{flex-wrap:wrap;row-gap:4px}
.th-cta{padding:24px 20px}
.th-cta-act,.th-cta-act .th-btn{width:100%}
}
@media(max-width:480px){.th-field textarea{height:96px;min-height:96px}}
@media(max-width:360px){.th-hero .container,.th-res .container,.th-cta-sec .container{padding-left:16px;padding-right:16px}.th-field textarea{height:112px;min-height:112px}}
@media(prefers-reduced-motion:no-preference){.th-card>a.th-link,.th-chip,.th-ex,.th-btn{transition:border-color .15s,background-color .15s}}