.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{color-scheme:dark light;--bg:#0b1924;--bg-card:#0e2133;--bg-alt:#0e2030;--bg-dark:#091520;--surface-1:#0e2133;--surface-2:#132838;--border:rgba(255,255,255,.07);--border-hover:rgba(255,255,255,.13);--border-solid:#1a3040;--text:#d4eaf5;--text-muted:#5a8fa8;--text-dim:#2e6078;--accent:#00d4ba;--accent-light:#00bba3;--accent-glow:rgba(0,212,186,.12);--accent-gradient:linear-gradient(135deg,#00d4ba,#00bba3);--green:#00d4ba;--green-light:#33e0cc;--green-glow:rgba(0,212,186,.12);--orange:#FF6B2C;--orange-hover:#E55A1F;--orange-glow:rgba(255,107,44,0.15);--danger:#f04e4e;--warning:#f0a030;--radius:12px;--radius-sm:8px;--radius-xs:6px;--font:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono','Fira Code',monospace;--section-gap:80px;--card-padding:24px;--ease:cubic-bezier(0.4,0,0.2,1);--duration:0.2s;--duration-slow:0.4s}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;background:#0b1924}body{font-size:1rem;line-height:1.7;color:#5a8fa8;background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased}h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.1}h2{font-size:1.8rem;font-weight:700;letter-spacing:-0.02em;line-height:1.2}h3{font-size:1.25rem;font-weight:600;line-height:1.3}a{color:#00d4ba;text-decoration:none;transition:color 0.2s}a:hover{color:#fff}.container{max-width:1200px;margin:0 auto;padding:0 24px}.nav-logo .logo-img{height:18px;width:auto}.hero{position:relative;min-height:85vh;max-height:85vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:100px 24px 60px}.hero-bg{position:absolute;inset:0;background:none;pointer-events:none}@keyframes meshMove{0%{background-position:0% 0%}50%{background-position:100% 50%}100%{background-position:0% 100%}}.hero-content{position:relative;text-align:center;max-width:800px;z-index:1}.hero-badge{display:inline-block;padding:6px 16px;border-radius:20px;border:1px solid var(--border-hover);background:rgba(0,212,186,0.08);color:var(--accent-light);font-size:0.8rem;font-weight:500;letter-spacing:0.5px;margin-bottom:24px}.hero-brand{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:16px}.hero-subtitle{font-size:clamp(1rem,2.5vw,1.35rem);color:var(--text-muted);line-height:1.6;margin-bottom:32px;font-weight:400}.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}.hero-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}.stat{text-align:center}.stat-num{display:block;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,#FF6B2C,#E55A1F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:0.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.section{padding:var(--section-gap) 0}.section-alt{background:var(--bg-alt)}.section-dark{background:var(--bg-dark)}.section-header{text-align:center;margin-bottom:48px}.section-icon{display:inline-block;font-size:1.8rem;width:56px;height:56px;line-height:56px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}.section-header h2{font-size:2.2rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:8px}.section-header p{color:var(--text-muted);font-size:1.05rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}.card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-padding);transition:border-color var(--duration) var(--ease),box-shadow var(--duration-slow) var(--ease),transform var(--duration) var(--ease);cursor:pointer;position:relative;overflow:hidden}.card:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(0,212,186,0.15);transform:translateY(-2px)}.card-wide{grid-column:1 / -1}.card-tag{display:inline-block;background:var(--surface-2);color:var(--accent-light);font-size:0.75rem;font-weight:600;padding:4px 10px;border-radius:50px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px}.badge-einsteiger,.badge-fortgeschritten,.badge-profi{display:inline-block;font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:50px;text-transform:uppercase;letter-spacing:0.5px;margin-left:8px;vertical-align:middle}.badge-einsteiger{background:rgba(0,212,186,0.15);color:#00d4ba;border:1px solid rgba(0,212,186,0.3)}.badge-fortgeschritten{background:rgba(255,107,44,0.15);color:#FF6B2C;border:1px solid rgba(255,107,44,0.3)}.badge-profi{background:rgba(255,71,87,0.15);color:#ff4757;border:1px solid rgba(255,71,87,0.3)}.card h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;letter-spacing:-0.3px}.card > p{color:var(--text-muted);font-size:0.95rem;margin-bottom:16px}.card-expand{display:inline-block;color:var(--orange);font-size:0.9rem;font-weight:600;cursor:pointer;padding:4px 0;transition:color 0.2s;user-select:none}.card-expand:hover{color:#fff}.card-expand::after{content:' +';font-weight:400}.card-expand.active::after{content:' -'}.card-detail{display:none;margin-top:20px;padding-top:20px;border-top:1px solid var(--border);animation:fadeIn 0.3s ease}.card-detail.show{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.card-detail h4{font-size:1rem;font-weight:600;color:var(--accent);margin:16px 0 8px}.card-detail h4:first-child{margin-top:0}.card-detail p{color:var(--text-muted);font-size:0.92rem;margin-bottom:8px}.card-detail ul,.card-detail ol{color:var(--text-muted);font-size:0.92rem;padding-left:20px;margin-bottom:12px}.card-detail li{margin-bottom:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:500;font-family:var(--font);cursor:pointer;transition:all var(--duration) var(--ease);min-height:44px;border:none;text-decoration:none;line-height:1.4}.btn-primary{background:var(--orange);color:#fff;font-weight:700;border:none;transition:background 0.2s,transform 0.2s}.btn-primary:hover{background:var(--orange-hover);transform:translateY(-1px)}.btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.3)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-muted);padding:8px 16px}.btn-ghost:hover{color:var(--text);background:var(--surface-2);border-radius:var(--radius-sm)}.btn-sm{padding:6px 14px;font-size:0.8rem;min-height:36px}.btn-lg{padding:14px 28px;font-size:1rem;min-height:52px}pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;overflow-x:auto;margin:12px 0}code{font-family:var(--mono);font-size:0.85rem;color:var(--green)}pre code{color:var(--text)}kbd{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-family:var(--mono);font-size:0.82rem;color:var(--text)}.hint{background:rgba(0,212,186,0.06);border-left:3px solid var(--green);padding:10px 14px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-muted);font-size:0.9rem;margin:12px 0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:0.9rem}thead th{background:var(--surface-2);color:var(--text);font-weight:600;padding:10px 14px;text-align:left;border-bottom:2px solid var(--border)}tbody td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-muted)}tbody tr:hover td{background:rgba(0,212,186,0.04)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.contact-info h3{font-size:1.8rem;margin-bottom:16px}.contact-info p{color:var(--text-muted);margin-bottom:20px;line-height:1.7}.contact-form{display:flex;flex-direction:column;gap:14px}.contact-form input,.contact-form textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;color:var(--text);font-family:var(--font);font-size:0.95rem;transition:border-color 0.2s;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.contact-form textarea{resize:vertical;min-height:100px}.about-section{padding:48px 0;text-align:center;border-bottom:1px solid var(--border)}.about-text{font-size:1.05rem;color:var(--text-muted);line-height:1.8;max-width:600px;margin:0 auto 24px}.about-text strong{color:var(--text)}.btn-ghost{display:inline-block;padding:8px 20px;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);text-decoration:none;font-size:0.85rem;font-weight:500;transition:all 0.2s}.btn-ghost:hover{border-color:var(--accent);color:var(--text);background:rgba(0,212,186,0.08)}.about-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.books-section{padding:64px 0;text-align:center;border-top:1px solid var(--border)}.books-title{font-size:1.8rem;font-weight:800;margin-bottom:8px}.books-subtitle{color:var(--text-muted);font-size:1rem;margin-bottom:40px}.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:700px;margin:0 auto}.book-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;text-align:center;transition:border-color 0.3s,transform 0.3s}.book-card:hover{border-color:var(--accent);transform:translateY(-2px)}.book-badge{display:inline-block;background:var(--accent);color:#000;font-size:0.75rem;font-weight:600;padding:4px 12px;border-radius:50px;margin-bottom:16px}.book-badge.badge-print{background:var(--green)}.book-icon{font-size:2.5rem;color:var(--accent-light);margin-bottom:16px}.book-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}.book-card p{color:var(--text-muted);font-size:0.9rem;line-height:1.6;margin-bottom:20px}.books-disclaimer{color:var(--text-muted);font-size:0.78rem;opacity:0.6;margin-top:24px}@media (max-width:480px){.books-grid{grid-template-columns:1fr}}.music-section{padding:64px 0;text-align:center}.music-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:40px 32px;max-width:480px;margin:0 auto;transition:border-color 0.3s,transform 0.3s}.music-card:hover{border-color:var(--accent);transform:translateY(-2px)}.music-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}.music-card p{color:var(--text-muted);font-size:0.9rem;line-height:1.6;margin-bottom:20px}.btn-music{border-color:var(--green);color:var(--green)}.btn-music:hover{border-color:var(--accent);color:var(--text);background:rgba(0,212,186,0.08)}.footer{border-top:1px solid var(--border);padding:60px 24px 24px;margin-top:var(--section-gap)}.footer .container{max-width:1200px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.5fr;gap:48px}.footer-brand .footer-logo{font-size:1.4rem;font-weight:700}.footer-tagline{color:var(--text-muted);margin-top:12px;font-size:0.9rem}.footer-privacy{color:var(--text-dim);font-size:0.8rem;margin-top:8px}.footer-newsletter h4,.footer-links-grid h4{font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.footer-newsletter p{color:var(--text-muted);font-size:0.85rem}.newsletter-form{display:flex;gap:8px;margin-top:12px}.newsletter-form input{flex:1;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-1);color:var(--text);font-size:0.9rem;font-family:var(--font);min-height:44px;outline:none;transition:border-color var(--duration) var(--ease)}.newsletter-form input:focus{border-color:var(--accent)}.newsletter-form input::placeholder{color:var(--text-dim)}.newsletter-hint{font-size:0.8rem;margin-top:8px;min-height:1.2em}.newsletter-hint.success{color:var(--green)}.newsletter-hint.error{color:var(--danger)}.footer-links-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}.footer-links-grid a{display:block;color:var(--text-muted);text-decoration:none;padding:4px 0;font-size:0.9rem;transition:color var(--duration) var(--ease)}.footer-links-grid a:hover{color:#fff}.footer-bottom{text-align:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);color:var(--text-dim);font-size:0.85rem}.trust-banner{text-align:center;padding:12px 24px;font-size:0.8rem;color:var(--text-muted);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-1)}.trust-banner span{color:var(--border-hover)}@media (max-width:768px){.hero{min-height:auto;max-height:none;padding:80px 16px 40px}.hero-brand{font-size:3rem}.hero-stats{gap:24px}.stat-num{font-size:1.4rem}.card-grid{grid-template-columns:1fr}.card-wide{grid-column:1}.contact-grid{grid-template-columns:1fr;gap:32px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-links-grid{grid-template-columns:1fr 1fr}.newsletter-form{flex-direction:column}.section{padding:calc(var(--section-gap) * 0.75) 0}}@media (max-width:480px){.card{padding:20px}}.back-to-top{position:fixed;bottom:32px;right:32px;z-index:900;width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity 0.3s,transform 0.3s,background 0.2s;box-shadow:0 4px 16px var(--orange-glow)}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.back-to-top:hover{background:var(--orange-hover);transform:translateY(-2px)}[data-theme="light"]{--orange:#E55A1F;--orange-hover:#D04A10;--orange-glow:rgba(229,90,31,0.15);--bg:#f2f7f8;--bg-card:#ffffff;--bg-alt:#e8f2f4;--bg-dark:#dce8ec;--surface-1:#ffffff;--surface-2:#e6f7f5;--border:rgba(0,0,0,.07);--border-hover:rgba(0,0,0,.12);--border-solid:#e2e8f0;--text:#0a1d2b;--text-muted:#426070;--text-dim:#8aaebb;--accent:#00bfa8;--accent-light:#009d8b;--accent-glow:rgba(0,191,168,.12);--accent-gradient:linear-gradient(135deg,#00bfa8,#009d8b);--green:#00bfa8;--red:#e74c3c;--yellow:#fdcb6e;--blue:#0984e3;--glass-bg:rgba(255,255,255,0.6);--glass-border:rgba(0,0,0,0.06);--glass-shadow:0 8px 32px rgba(0,0,0,0.08);--card-hover-shadow:0 20px 60px rgba(0,0,0,0.12);--glow-accent:rgba(0,191,168,0.15)}[data-theme="light"] .category-tabs{background:rgba(248,248,252,0.9)}[data-theme="light"] .card{background:var(--glass-bg);border-color:var(--glass-border)}[data-theme="light"] .hero-bg{opacity:0.3}[data-theme="light"] .footer{background:var(--bg-alt)}[data-theme="light"] .newsletter-form input{background:#fff;border-color:var(--border)}[data-theme="light"] pre{background:#eaeaef}[data-theme="light"] pre code{color:var(--text)}[data-theme="light"] code{color:#008060}[data-theme="light"] body{color:#334155}[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3{color:var(--text)}[data-theme="light"] .btn-secondary{color:#000;border-color:rgba(0,191,168,0.6);background:transparent}[data-theme="light"] .btn-secondary:hover{background:rgba(0,191,168,0.08);border-color:var(--accent);color:var(--accent)}[data-theme="light"] a:hover{color:var(--accent)}[data-theme="light"] .card-expand:hover{color:var(--accent)}[data-theme="light"] .footer-links-grid a:hover{color:var(--text)}[data-theme="light"] .section-icon{color:var(--text-muted)}[data-theme="light"] .card{opacity:1!important;transform:none!important}[data-theme="light"] .btn-ghost:hover{color:var(--text)}[data-theme="light"] .card-expand{color:var(--accent)}[data-theme="light"] .trust-banner{background:var(--surface-2);color:var(--text-muted)}[data-theme="light"] .rpi-icon{filter:brightness(0) opacity(0.85)}[data-theme="light"] .about-text strong{color:var(--text)}[data-theme="light"] .contact-form input,[data-theme="light"] .contact-form textarea{background:#fff;border-color:var(--border);color:var(--text)}[data-theme="light"] .hint-danger{background:#fff0f0}[data-theme="light"] tbody td{color:var(--text-muted)}[data-theme="light"] thead th{background:var(--surface-2);color:var(--text)}@media (max-width:768px){.back-to-top{bottom:20px;right:20px;width:44px;height:44px}}[dir="rtl"]{direction:rtl;text-align:right}[dir="rtl"] [dir="rtl"] .card-tags{justify-content:flex-end}[dir="rtl"] .card-tag{margin-left:6px;margin-right:0}[dir="rtl"] .hero-badge{direction:rtl}[dir="rtl"] .card-header{flex-direction:row-reverse}[dir="rtl"] .contact-form{text-align:right}[dir="rtl"] .footer-links{flex-direction:row-reverse}[dir="rtl"] [dir="rtl"] .search-wrapper input{text-align:right;padding-left:12px;padding-right:40px}[dir="rtl"] .search-wrapper .bi-search{left:auto;right:14px}[dir="rtl"] .about-text{text-align:right}[dir="rtl"] .book-card{text-align:right}[dir="rtl"] .btn-ghost i,[dir="rtl"] .btn-primary i{margin-left:8px;margin-right:0}.splash-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none}.splash-logo{position:fixed;width:380px;height:380px;object-fit:contain;filter:brightness(0) saturate(100%) invert(70%) sepia(90%) saturate(1500%) hue-rotate(145deg) brightness(95%) contrast(95%) drop-shadow(0 0 60px var(--accent-glow));opacity:0;animation:splash-pop-in 0.5s ease-out 0.2s forwards;will-change:width,height,top,left,filter;transition:width 1.2s cubic-bezier(0.4,0,0.2,1),height 1.2s cubic-bezier(0.4,0,0.2,1),top 1.2s cubic-bezier(0.4,0,0.2,1),left 1.2s cubic-bezier(0.4,0,0.2,1),filter 1.2s ease-out,opacity 1.2s ease-out,border-radius 1.2s ease-out}.splash-screen.done{display:none}body.splash-active body.splash-reveal @keyframes splash-pop-in{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}@keyframes content-fade-in{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}@media (max-width:768px){.splash-logo{width:240px;height:240px}}
.category-tabs{position:sticky;top:64px;z-index:100;background:rgba(11,25,36,0.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:8px 24px;overflow:hidden}.category-tabs-inner{display:flex;align-items:center;gap:8px;max-width:1200px;margin:0 auto;height:34px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.category-tabs-inner::-webkit-scrollbar{display:none}.tab-btn{white-space:nowrap;padding:5px 12px;border-radius:16px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:0.78rem;font-family:var(--font);cursor:pointer;transition:all var(--duration) var(--ease);min-height:34px;display:inline-flex;align-items:center;gap:4px}.tab-btn:hover{color:var(--text);border-color:var(--border-hover)}.tab-btn.spy{color:var(--accent-light);border-color:var(--border)}.tab-btn.active{background:var(--orange);color:#fff;font-weight:700;border-color:var(--orange)}.tab-btn i{font-size:0.85rem}.tabs-pin{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px 8px;font-size:0.85rem;margin-left:auto;flex-shrink:0;transition:color 0.2s}.tabs-pin:hover,.tabs-pin.pinned{color:var(--accent)}.section[data-category]{transition:opacity 0.3s var(--ease),max-height 0.4s var(--ease)}.section[data-category].hidden-section{opacity:0;max-height:0;overflow:hidden;padding:0;margin:0;border:none}.section[data-category].filtered-visible{min-height:calc(100vh - 130px)}[data-theme="light"] .category-tabs{background:rgba(248,248,252,0.9)}@media(max-width:768px){.category-tabs{padding:8px 12px;top:56px}.tab-btn{font-size:0.78rem;padding:6px 12px;min-height:40px}}@media(max-width:768px){.similar-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.similar-grid::-webkit-scrollbar{display:none}.similar-grid .similar-card{min-width:280px;scroll-snap-align:start;flex-shrink:0}.hero-stats{flex-wrap:wrap;gap:16px}.hero-buttons{flex-direction:column;gap:12px}.hero-buttons .btn{width:100%;justify-content:center}.footer-grid{grid-template-columns:1fr!important;gap:24px}.footer-links-grid{grid-template-columns:1fr 1fr}.category-tabs-inner{padding:0 8px}.category-tabs{padding:8px 12px}.tab-btn{padding:6px 14px;font-size:0.8rem}.about-compact-grid{grid-template-columns:1fr!important;gap:24px}.newsletter-form{flex-direction:column}.newsletter-form .btn{width:100%}}@media(max-width:480px){.hero-brand{font-size:clamp(2rem,8vw,3rem)}.stat-number{font-size:1.5rem}.hero-badge{font-size:0.7rem;padding:4px 10px}}
.about-compact-section{padding:var(--section-gap) 24px;border-top:1px solid var(--border)}.about-compact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;max-width:1200px;margin:0 auto;align-items:start}.about-compact-text h2{font-size:1.8rem;font-weight:700;margin-bottom:12px}.about-compact-text .about-text{color:var(--text-muted);line-height:1.7}.about-compact-card{display:flex;gap:16px;padding:20px;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;transition:border-color var(--duration) var(--ease)}.about-compact-card:hover{border-color:var(--border-hover)}.about-compact-card-icon{font-size:1.5rem;color:var(--accent-light);flex-shrink:0;width:40px;text-align:center;padding-top:2px}.about-compact-card h4{font-size:1rem;font-weight:600;margin-bottom:4px}.about-compact-card p{font-size:0.85rem;color:var(--text-muted);margin-bottom:8px;line-height:1.5}.about-compact-actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:768px){.about-compact-grid{grid-template-columns:1fr;gap:24px}}
.lang-label{font-weight:600;margin-bottom:10px}.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tutorial-footer{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:.85rem;border-top:1px solid var(--border)}.mt-8{margin-top:8px}.legal-h3{font-size:1.1rem;margin-top:2rem}.legal-h3-first{font-size:1.1rem;margin-top:1.5rem}.legal-h2{font-size:1.5rem;margin-bottom:1.5rem}.legal-section{padding:2.5rem 0}.legal-container{max-width:800px}.hint-danger{background:#ffe0e0;border-left-color:#d32f2f}.text-center{text-align:center}.legal-date{opacity:0.6;margin-top:1rem}.legal-small{font-size:0.8rem;opacity:0.6;margin-top:0.5rem}.btn-inline{margin-top:1rem;display:inline-block}.rpi-icon{width:32px;height:32px;filter:brightness(0) invert(1) opacity(0.85)}.flex-center{display:inline-flex;align-items:center;justify-content:center}
.controls-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:1200px;margin:0 auto;height:34px;animation:slideDown 0.3s ease}.controls-row.hidden{display:none}.controls-row.sliding-out{animation:slideUp 0.3s ease forwards;pointer-events:none}@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.controls-row .search-box{display:flex;align-items:center;gap:0.5rem;padding:5px 12px;border-radius:16px;border:1px solid var(--border);background:transparent;flex:1;max-width:600px;min-height:34px;transition:border-color 0.2s}.controls-row .search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.controls-row .search-box i{color:var(--text-muted);font-size:0.9rem}.controls-row .search-box input{border:none;background:transparent;color:var(--text);font-family:var(--font);font-size:0.9rem;width:100%;outline:none}.controls-row .search-box input::placeholder{color:var(--text-muted)}.controls-row .sort-select{padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-family:var(--font);font-size:0.85rem;cursor:pointer;outline:none}.controls-row .sort-select:focus{border-color:var(--accent)}.category-tabs-inner.hidden{display:none}@media(max-width:768px){.controls-row .search-box{width:100%;min-width:0}.controls-row .sort-select{width:100%}}
.hero-bg{transition:opacity 0.5s ease}.hero-scroll-dim .hero-bg{opacity:0}body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}#wireWaveCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0.6;pointer-events:none}
[data-theme="hc"]{--bg:#000;--bg-card:#000;--bg-alt:#000;--bg-dark:#000;--surface-1:#000;--surface-2:#111;--border:rgba(255,255,255,.25);--border-hover:rgba(255,255,255,.5);--border-solid:#444;--text:#fff;--text-muted:#ccc;--text-dim:#999;--accent:#00ffdd;--accent-light:#00ffdd;--accent-glow:rgba(0,255,221,.2);--accent-gradient:linear-gradient(135deg,#00ffdd,#00ffdd);--green:#00ffdd;--green-light:#00ffdd;--green-glow:rgba(0,255,221,.2);--danger:#ff4444;--warning:#ffaa00}[data-theme="hc"] body{color:#fff}[data-theme="hc"] .card{background:#000;border:2px solid rgba(255,255,255,.25);opacity:1!important;transform:none!important}[data-theme="hc"] .card:hover{border-color:#00ffdd}[data-theme="hc"] .card > p{color:#ccc}[data-theme="hc"] .footer{background:#000}[data-theme="hc"] pre{background:#000;border:2px solid rgba(255,255,255,.25)}[data-theme="hc"] .category-tabs{background:#000}[data-theme="hc"] .trust-banner{background:#000}[data-theme="hc"] .section-alt{background:#000}[data-theme="hc"] .section-dark{background:#000}[data-theme="hc"] .contact-form input,[data-theme="hc"] .contact-form textarea{background:#000;border:2px solid rgba(255,255,255,.25);color:#fff}[data-theme="hc"] .newsletter-form input{background:#000;border:2px solid rgba(255,255,255,.25);color:#fff}[data-theme="hc"] a:hover{color:#00ffdd}[data-theme="hc"] .card-expand:hover{color:#00ffdd}[data-theme="hc"] .hero-bg{opacity:0.15}

/* Category-page additions (SEO refactor 2026-04-26) */
.section-cta{text-align:center;margin-top:32px}
.section-cta .btn{font-weight:600}
.section-cta .btn i{margin-left:6px}
.breadcrumb-nav{font-size:0.85rem;color:var(--text-muted);margin-bottom:16px}
.breadcrumb-nav a{color:var(--accent-light);text-decoration:none}
.breadcrumb-nav a:hover{text-decoration:underline}
.breadcrumb-nav span{margin:0 4px;color:var(--text-dim)}
.meta-line{font-size:0.9rem;color:var(--text-muted);margin-top:12px}
.meta-line strong{color:var(--accent-light)}
.category-tabs a.tab-btn{text-decoration:none}
/*
  zaios-theme-cyan.css  →  ZAIOS.DESIGN tokens (Dark · Mint · Glassmorphic · Technical)
  Wird nach style.css und nav.css geladen und mappt die alten Token-Namen
  auf die Tokens aus dem ZAIOS Design-Konzept (Mai 2026, v1.0).
  Quelle: /home/moe/shared/Designkonzept/ZAIOS_Design_Konzept.docx
*/

/* ============================================================
   Dark Mode (Primärerlebnis)
   ============================================================ */
:root {
  /* Surfaces */
  --bg:           #070A0E;            /* Deep Space */
  --bg-card:      #0D1218;            /* Panel */
  --bg-alt:       #0D1218;            /* Panel */
  --bg-dark:      #070A0E;            /* Deep Space */
  --surface-1:    #0D1218;            /* Panel */
  --surface-2:    #121820;            /* Panel Elevated */
  --petrol:       #1A3540;            /* Brand-Surface (Logo-Backplate) */

  /* Borders */
  --border:        rgba(255,255,255,0.08); /* Border Subtle */
  --border-hover:  rgba(255,255,255,0.20); /* Border Strong */
  --border-solid:  #1A3540;

  /* Text */
  --text:         #ECF2F7;            /* Ice White */
  --text-muted:   #8A98A8;            /* Drift Gray */
  --text-dim:     #5A6B7A;

  /* Accent — einzige Markenfarbe (Mint) */
  --accent:        #2EE5C8;           /* Mint Pulse */
  --accent-light:  #7CF7DC;           /* Mint Glow */
  --accent-dark:   #0A826E;           /* Deep Mint */
  --accent-glow:   rgba(46,229,200,0.45);
  --accent-gradient: linear-gradient(135deg, #2EE5C8 0%, #5BC0EB 100%); /* Aurora */

  /* Legacy-Alias (von style.css genutzt) */
  --green:        #2EE5C8;
  --green-light:  #7CF7DC;
  --green-glow:   rgba(46,229,200,0.35);

  /* Primary-CTA — Mint statt Orange (Konzept §07: nur eine Akzentfarbe) */
  --orange:       #2EE5C8;
  --orange-hover: #7CF7DC;
  --orange-glow:  rgba(46,229,200,0.45);

  /* Status */
  --success: #3DDC97;
  --warning: #F2C14E;
  --danger:  #FF6B6B;
  --info:    #5BC0EB;

  /* Radius-Skala (8-pt Baseline) */
  --radius:    20px;     /* lg — Default Cards */
  --radius-sm: 8px;      /* sm — Inputs, Tags, Code */
  --radius-xs: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;     /* xl — Hero, Feature */
  --radius-2xl: 40px;    /* 2xl — Glass-Panels */

  /* Schatten & Glow */
  --shadow-card:  0 24px 60px rgba(0,0,0,0.35);
  --glow-primary: 0 0 32px rgba(46,229,200,0.45);
  --focus-ring:   0 0 0 3px rgba(124,247,220,0.35);

  /* Typo — Konzept §04 */
  --font: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* Body & Root — Deep Space, Ice White */
html { background: #070A0E; }
body {
  background: var(--bg);
  color: var(--text-muted);
}
h1, h2, h3, h4, .section-header h2, .about-compact-text h2, .books-title { color: var(--text); }

/* Primary-CTA — Mint-Fill + Deep-Space-Schrift (Konzept §07) */
.btn-primary {
  background: var(--accent);
  color: #070A0E !important;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 0 0 rgba(46,229,200,0);
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn-primary:hover {
  background: var(--accent-light);
  color: #070A0E !important;
  box-shadow: var(--glow-primary);
  transform: translateY(-1px);
}

/* Secondary-CTA — Border-Strong, Ice White */
.btn-secondary {
  border: 1px solid var(--border-hover);
  color: var(--text);
  border-radius: 9999px;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tab-Pill aktiv — Mint */
.tab-btn.active {
  background: var(--accent);
  color: #070A0E !important;
  border-color: var(--accent);
}

/* Back-to-top — Mint (statt Orange) */
.back-to-top {
  background: var(--accent);
  color: #070A0E;
  box-shadow: 0 6px 24px var(--accent-glow);
}
.back-to-top:hover {
  background: var(--accent-light);
  color: #070A0E;
  box-shadow: 0 8px 32px var(--accent-glow);
}

/* Card-Expand — Mint */
.card-expand { color: var(--accent); }
.card-expand:hover { color: var(--accent-light); }

/* Stat-Zahlen — Aurora-Gradient */
.stat-num {
  background: linear-gradient(135deg, #2EE5C8 0%, #5BC0EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card-Hover — Mint-Border + dezenter Glow */
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(46,229,200,0.18);
}

/* Hero-Badge — Mint-tinted Pill */
.hero-badge {
  background: rgba(46,229,200,0.08);
  color: var(--accent-light);
  border: 1px solid var(--border-hover);
}

/* Sticky Category-Tabs — Deep-Space-Glas */
.category-tabs {
  background: rgba(7,10,14,0.85);
  border-bottom: 1px solid var(--border);
}

/* Trust-Banner — Panel */
.trust-banner { background: var(--surface-1); }

/* Focus-Ring Pflicht (Konzept §11) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Reduce-Motion (Konzept §10) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Light Mode — Konzept-Annex (Mint bleibt, Surfaces invertiert)
   ============================================================ */
[data-theme="light"] {
  --bg:           #F4F7FA;
  --bg-card:      #FFFFFF;
  --bg-alt:       #EDF1F5;
  --bg-dark:      #E2E8EE;
  --surface-1:    #FFFFFF;
  --surface-2:    #ECF2F7;
  --border:       rgba(7,10,14,0.08);
  --border-hover: rgba(7,10,14,0.20);
  --border-solid: #CBD5DC;
  --text:         #070A0E;
  --text-muted:   #4A5868;
  --text-dim:     #8A98A8;

  --accent:        #0A826E;           /* Deep Mint — AA-Kontrast auf Hell */
  --accent-light:  #2EE5C8;
  --accent-dark:   #075F50;
  --accent-glow:   rgba(10,130,110,0.18);
  --accent-gradient: linear-gradient(135deg, #0A826E 0%, #5BC0EB 100%);

  --green:        #0A826E;
  --green-light:  #2EE5C8;
  --green-glow:   rgba(10,130,110,0.18);

  --orange:       #0A826E;
  --orange-hover: #2EE5C8;
  --orange-glow:  rgba(46,229,200,0.25);
}
[data-theme="light"] body { color: var(--text-muted); }
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #FFFFFF !important;
}
[data-theme="light"] .btn-primary:hover {
  background: var(--accent-light);
  color: #070A0E !important;
  box-shadow: 0 0 32px var(--accent-glow);
}
[data-theme="light"] .tab-btn.active {
  background: var(--accent);
  color: #FFFFFF !important;
  border-color: var(--accent);
}
[data-theme="light"] .back-to-top {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 6px 24px var(--accent-glow);
}
[data-theme="light"] .back-to-top:hover {
  background: var(--accent-light);
  color: #070A0E;
}
[data-theme="light"] .stat-num {
  background: linear-gradient(135deg, #0A826E 0%, #2EE5C8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .category-tabs {
  background: rgba(244,247,250,0.92);
}

/* ============================================================
   High Contrast — AAA, intensiver Mint
   ============================================================ */
[data-theme="hc"] {
  --accent:        #00FFDD;
  --accent-light:  #7CF7DC;
  --accent-dark:   #00BFA8;
  --accent-glow:   rgba(0,255,221,0.35);
  --accent-gradient: linear-gradient(135deg, #00FFDD, #7CF7DC);
  --green:         #00FFDD;
  --green-light:   #7CF7DC;
  --green-glow:    rgba(0,255,221,0.35);
  --orange:        #00FFDD;
  --orange-hover:  #7CF7DC;
  --orange-glow:   rgba(0,255,221,0.35);
}
[data-theme="hc"] .btn-primary,
[data-theme="hc"] .tab-btn.active,
[data-theme="hc"] .back-to-top {
  background: var(--accent);
  color: #000 !important;
  border-color: var(--accent);
}

/* ============================================================
   Hardcoded Werte in nav.css überschreiben
   ============================================================ */
.nav-extra-link.active,
.nav-link.nav-extra-link.active {
  color: var(--accent) !important;
}
[data-theme="light"] .nav-extra-link.active,
[data-theme="light"] .nav-link.nav-extra-link.active {
  color: var(--accent) !important;
}
[data-theme="hc"] .nav-extra-link.active,
[data-theme="hc"] .nav-link.nav-extra-link.active {
  color: var(--accent) !important;
}
.lang-btn.active .lang-flag { background: var(--accent); }

/* ============================================================
   Logos (Quell-SVG ist Single-Color, Farbe via Filter)
   ============================================================ */
/* Nav-Logo in Ice White */
.nav-logo img.logo-img {
  filter: brightness(0) invert(1);
}
.hero-brand img.logo-img,
.footer-logo img.logo-img {
  filter: none;
}
[data-theme="light"] .nav-logo img.logo-img {
  filter: brightness(0); /* Black auf Hell */
}
[data-theme="hc"] .nav-logo img.logo-img {
  filter: brightness(0) invert(1);
}

/* Splash-Logo — Mint Pulse + Halo */
.splash-logo {
  filter:
    brightness(0) saturate(100%)
    invert(82%) sepia(58%) saturate(700%)
    hue-rotate(120deg) brightness(102%) contrast(95%)
    drop-shadow(0 0 60px rgba(46,229,200,0.35)) !important;
}

/* Light: Wortmarke + Splash in Petrol */
[data-theme="light"] .hero-brand img.logo-img,
[data-theme="light"] .footer-logo img.logo-img {
  filter: invert(15%) sepia(25%) saturate(500%) hue-rotate(170deg) brightness(35%) contrast(100%);
}
[data-theme="light"] .splash-logo {
  filter:
    invert(15%) sepia(25%) saturate(500%)
    hue-rotate(170deg) brightness(35%) contrast(100%)
    drop-shadow(0 0 60px rgba(10,130,110,0.20)) !important;
}

/* HC: weiß lassen, intensiver Glow */
[data-theme="hc"] .nav-logo img.logo-img,
[data-theme="hc"] .hero-brand img.logo-img,
[data-theme="hc"] .footer-logo img.logo-img {
  filter: none;
}
[data-theme="hc"] .splash-logo {
  filter: drop-shadow(0 0 60px rgba(0,255,221,0.45)) !important;
}

/* ============================================================
   ZAIOS Master-Layout (Designvorlage „Neues Theme")
   Wallpaper hinter Hero, Glass-Card Hero, Stat-Strip mit Icon-Tiles,
   Glass-Filter-Bar.
   ============================================================ */

/* Wallpaper nur hinter Hero (Konzept §06: niemals Body-Text darüber) */
.hero {
  position: relative;
  background-image: url('/zaios_background.webp'), linear-gradient(180deg, #070A0E 0%, #0D1218 100%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat;
  min-height: 70vh;
  padding: 96px 56px 80px;
}
.hero .container { max-width: 1600px; width: 100%; padding: 0; }

/* Wire-Wave-Canvas + Hero-BG-Overlay deaktivieren — Wallpaper übernimmt */
#wireWaveCanvas { display: none !important; }
.hero .hero-bg { display: none !important; }

/* Hero-Content als Milchglas-Card */
.hero-content {
  position: relative;
  isolation: isolate;
  max-width: 1600px;
  margin: 0 auto;
  padding: 56px 40px 40px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(13,18,24,0.45);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  text-align: center;
}
.hero-content::before { content: none; }
.hero-content > * { position: relative; z-index: 1; }

/* Eyebrow / Badge — Pill in Glass-Hi */
.hero-badge {
  background: rgba(18,24,32,0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-hover);
  color: var(--text);
  padding: 10px 22px;
  font-size: 14px;
  letter-spacing: 0.2px;
  margin-bottom: 28px;
}

/* Wordmark — größer, tighter Tracking */
.hero-brand {
  margin: 0 0 22px;
  line-height: 0.95;
  letter-spacing: -3px;
}

/* Subhead in Ice White, Body in Drift Gray */
.hero-subtitle {
  color: var(--text);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto 32px;
}

/* CTA Row */
.hero-buttons { gap: 14px; margin-bottom: 44px; }
.hero-buttons .btn-primary { box-shadow: var(--glow-primary); }
.hero-buttons .btn-primary:hover { box-shadow: 0 0 48px rgba(46,229,200,0.65); }

/* Stat-Strip: horizontale Tiles mit Icon-Square + Wert + Label */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-top: 8px;
}
/* Icon-Tile-Layout: nur wenn der Stat ein Icon hat (sonst fällt der Block
   auf das alte zentrierte Stack-Layout aus style.css zurück — wichtig für
   software.html, das die Icons noch nicht hat). */
.hero-stats:has(.stat-icon) .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 10px;
  text-align: left;
}
.hero-stats .stat + .stat { border-left: 1px solid var(--border); }
.hero-stats .stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.hero-stats:has(.stat-icon) .stat-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero-stats .stat-num {
  font-size: 40px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: var(--accent);
}
.hero-stats .stat-label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 2.4px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Filter-Navi: edge-to-edge, eckig, glas-translucent — sticky unter Navbar */
.category-tabs {
  position: sticky;
  top: 64px;
  z-index: 100;
  margin: 24px 0 0;
  max-width: none;
  padding: 12px 56px;
  background: rgba(7,10,14,0.78);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.category-tabs-inner { max-width: 1600px; margin: 0 auto; padding: 0; }

.category-tabs .tab-btn {
  position: relative;
  border-radius: var(--radius-md);
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
}
.category-tabs .tab-btn:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

/* Scroll-Position-Marker (Spy) — Mint-Schrift + Underline */
.category-tabs .tab-btn.spy {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
  border-color: transparent;
}
.category-tabs .tab-btn.spy::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -13px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(46,229,200,0.6);
}

/* Aktiver Filter (geklickt) — Mint-Fill bleibt für klare Unterscheidung */
.category-tabs .tab-btn.active {
  background: var(--accent);
  color: #070A0E !important;
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(46,229,200,0.40);
}
.category-tabs .tab-btn.active::after { content: none; }

[data-theme="light"] .category-tabs {
  background: rgba(244,247,250,0.85);
  border-top-color: rgba(7,10,14,0.10);
  border-bottom-color: rgba(7,10,14,0.10);
}

/* Karten komplett klickbar */
.card { position: relative; cursor: pointer; }
.card h3 > a {
  text-decoration: none;
  color: inherit;
}
/* Startseite-Karten: Stretched-Link via Pseudo (h3-Anker deckt ganze Card ab) */
.card h3 > a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Andere interaktive Elemente innerhalb der Card bleiben anklickbar */
.card .card-expand,
.card .card-tag,
.card .badge-einsteiger,
.card .badge-fortgeschritten,
.card .badge-profi {
  position: relative;
  z-index: 2;
}
/* Unterseiten-Karten haben keinen h3-Anker, sondern .card-expand-Button.
   Klick auf jede Stelle der Card wird per JS an card-expand delegiert
   (siehe script.js). card-detail.show: kein Pointer (Lese-Modus). */
.card:has(.card-detail.show) { cursor: default; }
.card .card-detail { cursor: text; }

/* Trust-Banner alter Ära — versteckt (war unter der fixed Navbar abgeschnitten,
   Privacy-Info gehört eher in den Footer als ans Page-Top) */
.trust-banner { display: none; }

/* Navbar (oben, fixed) im neuen ZAIOS-Glass-Ton */
.navbar {
  background: rgba(7,10,14,0.70);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
.navbar.scrolled {
  background: rgba(7,10,14,0.88);
  border-bottom-color: var(--border-hover);
}
[data-theme="light"] .navbar {
  background: rgba(244,247,250,0.70);
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(244,247,250,0.92);
}

/* Responsive — Stat-Strip kippt mobil zu vertikalem Stack */
@media (max-width: 900px) {
  .hero { padding: 56px 12px 48px; min-height: 0; }
  .hero-content { padding: 36px 22px 28px; border-radius: var(--radius-lg); }
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 24px;
  }
  .hero-stats .stat { justify-content: flex-start; padding-left: 12px; }
  .hero-stats .stat + .stat { border-left: none; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
  .hero-stats .stat-num { font-size: 32px; }
  .hero-stats .stat-icon { width: 44px; height: 44px; font-size: 18px; }
  .category-tabs { padding: 12px 16px; }
}

/* Light-Mode: Wallpaper bleibt (im Konzept als gleicher Hero gedacht), Glass invertiert */
[data-theme="light"] .hero-content {
  background: rgba(255,255,255,0.55);
  border-color: rgba(7,10,14,0.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="light"] .hero-subtitle { color: var(--text); }
[data-theme="light"] .hero-stats .stat-icon { background: var(--surface-2); color: var(--accent); }
[data-theme="light"] .hero-stats .stat-num { color: var(--accent); -webkit-text-fill-color: var(--accent); }
[data-theme="light"] .trust-banner { background: rgba(255,255,255,0.45); }

/* Tutorial material boxes (affiliate) */
.tutorial-materials{background:linear-gradient(135deg,rgba(0,255,221,.06),rgba(34,197,94,.04));border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm,10px);padding:18px 20px;margin:0 0 32px}
.tutorial-materials .tm-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:1rem;margin-bottom:14px}
.tutorial-materials .tm-head i{color:var(--accent-light)}
.tutorial-materials .tm-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px 18px}
.tutorial-materials .tm-list li{margin:0}
.tutorial-materials .tm-list a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-light);text-decoration:none;font-size:.93rem;font-weight:500}
.tutorial-materials .tm-list a:hover{color:var(--green);text-decoration:underline}
.tutorial-materials .tm-list a i{font-size:.72em;opacity:.6}
.tutorial-materials .tm-disclaimer{margin:16px 0 0;font-size:.74rem;color:var(--text-muted);line-height:1.5}
.tutorial-materials .tm-disclaimer i{opacity:.7;margin-right:4px}

.hint-warn{border-left-color:#ef4444 !important;background:rgba(239,68,68,.09) !important}
.hint-warn i{color:#ef4444}

.tg-hero-accent{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* techguide hub: ex-inline styles (CSP) */
.tg-fade-in{animation:fadeIn 0.3s ease both}
.tg-icon{margin-right:8px;opacity:.5}
.tg-icon-sm{margin-right:4px}
.tg-detail-flat{display:block;margin:0;padding:0;border:none}