/* ===================================================================== NURELIO — Ratgeber / Content-Seiten Design-Tokens übernommen aus der Startseite (index.html). Dark ist Default (data-theme="dark" auf , Toggle-Key: nurelio-theme). Statt WebGL-DarkVeil: statischer CSS-Gradient in derselben Farbwelt. ===================================================================== */ /* ---------- TOKENS · LIGHT ---------- */ :root{ --bg: #eef3f9; --bg-grad-a: #f7faff; --bg-grad-b: #eef3f9; --bg-grad-c: #e6eef9; --panel: rgba(255,255,255,0.72); --card: #ffffff; --card-2: #f6f9fe; --text: #19324d; --text-dim: #5a6c84; --text-soft: #8294ad; --border: #dde6f1; --border-strong: #c6d3e4; --accent: #2663ff; --accent-hover: #1f55e0; --accent-soft: #e7eeff; --accent-deep: #0d2762; --success: #198754; --sh-card: 0 4px 14px rgba(18,44,86,0.05); --sh-soft: 0 14px 38px rgba(18,44,86,0.10); --sh-cta: 0 12px 28px rgba(38,99,255,0.30); --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px; --maxw: 1180px; --content-w: 760px; } /* ---------- TOKENS · DARK (Default via data-theme="dark") ---------- */ [data-theme="dark"]{ --bg: #0f1520; --bg-grad-a: #16202f; --bg-grad-b: #0f1520; --bg-grad-c: #0c1119; --panel: rgba(22,31,45,0.74); --card: #18222f; --card-2: #1e2937; --text: #e4eaf2; --text-dim: #a3b2c7; --text-soft: #6e8099; --border: #273343; --border-strong: #364457; --accent: #5b8aff; --accent-hover: #719bff; --accent-soft: rgba(91,138,255,0.16); --accent-deep: #b9cdff; --success: #38b873; --sh-card: 0 4px 14px rgba(0,0,0,0.30); --sh-soft: 0 16px 40px rgba(0,0,0,0.45); --sh-cta: 0 12px 28px rgba(38,99,255,0.36); } /* ---------- RESET / BASE ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:96px} body{ font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color:var(--text); background:var(--bg); background-image: radial-gradient(1100px 680px at 82% -8%, var(--bg-grad-a), transparent 60%), radial-gradient(900px 620px at -8% 14%, var(--bg-grad-a), transparent 56%), radial-gradient(1100px 820px at 50% 118%, var(--bg-grad-c), transparent 60%), linear-gradient(var(--bg-grad-b), var(--bg-grad-b)); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:17px; line-height:1.65; transition:background-color .35s ease, color .35s ease; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} /* ---------- NAV (Pill / Glassmorphism wie Startseite) ---------- */ .nav{position:sticky;top:14px;z-index:60;margin:14px auto 0;max-width:var(--maxw);padding:0 24px} .nav-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:11px 12px 11px 18px; background:var(--panel); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:0 8px 26px rgba(18,44,86,0.07); } .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-0.02em} .brand-mark{width:32px;height:32px;flex:none;border-radius:8px;display:block;object-fit:contain} .nav-links{display:none;gap:30px;color:var(--text-dim);font-size:15px;font-weight:600} .nav-links a{transition:color .15s ease} .nav-links a:hover{color:var(--text)} .nav-links a[aria-current="page"]{color:var(--accent)} .nav-right{display:flex;align-items:center;gap:8px} .nav-cta{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--r-pill); background:var(--accent);color:#fff;font-weight:700;font-size:15px; box-shadow:var(--sh-cta);transition:background .15s ease, transform .15s ease; } .nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px)} .theme-toggle{ width:40px;height:40px;border-radius:50%;flex:none; border:1px solid var(--border);background:var(--card); display:grid;place-items:center;color:var(--text-dim); transition:color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover{color:var(--text);border-color:var(--border-strong)} .theme-toggle .moon{display:none} [data-theme="dark"] .theme-toggle .sun{display:none} [data-theme="dark"] .theme-toggle .moon{display:block} @media(min-width:920px){.nav-links{display:flex}} /* ---------- CONTENT-LAYOUT ---------- */ .content{max-width:var(--content-w);margin:0 auto;padding:44px 24px 72px} .content h1{ margin:0 0 10px;font-weight:800;letter-spacing:-0.025em; font-size:clamp(30px, 5.4vw, 42px);line-height:1.12;text-wrap:balance; } .content h2{ margin:44px 0 14px;font-weight:750;letter-spacing:-0.018em; font-size:clamp(21px, 3vw, 26px);line-height:1.25; } .content h3{margin:28px 0 8px;font-weight:700;font-size:18px} .content p{margin:0 0 16px;text-wrap:pretty} .content p a,.content li a{ color:var(--accent);font-weight:600; text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset:3px;transition:color .15s ease; } .content p a:hover,.content li a:hover{color:var(--accent-hover);text-decoration-color:currentColor} .content .subtitle{color:var(--text-soft);font-size:14px;margin-bottom:28px} .content .intro{color:var(--text-dim);font-size:18px;line-height:1.7} .content strong{color:var(--text)} .content em{color:var(--text-dim)} /* ---------- BREADCRUMB ---------- */ .crumbs{font-size:13.5px;color:var(--text-soft);margin:0 0 22px} .crumbs a{color:var(--text-soft);transition:color .15s ease} .crumbs a:hover{color:var(--text)} /* ---------- CHECKLISTEN / LISTEN ---------- */ .content ul{margin:0 0 16px;padding-left:0;list-style:none} .content ul li{ position:relative;padding:0 0 12px 30px; } .content ul li::before{ content:"";position:absolute;left:2px;top:8px; width:8px;height:8px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft); } /* ---------- TABELLEN ---------- */ .table-scroll{overflow-x:auto;margin:18px 0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);box-shadow:var(--sh-card)} .content table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px} .content th,.content td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)} .content th{background:var(--card-2);font-weight:700;color:var(--text);white-space:nowrap} .content td+td,.content th+th{border-left:1px solid var(--border)} .content tbody tr:last-child td{border-bottom:none} /* ---------- FAQ (details/summary) ---------- */ .content details{ border:1px solid var(--border);border-radius:var(--r-sm); background:var(--card);margin:0 0 10px;padding:14px 18px; } .content details summary{cursor:pointer;font-weight:700;color:var(--text)} .content details[open] summary{margin-bottom:8px;color:var(--accent)} /* ---------- CTA-BOX ---------- */ .cta{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 28px 24px;margin-top:48px; box-shadow:var(--sh-soft); background-image:radial-gradient(480px 220px at 12% -30%, var(--accent-soft), transparent 70%); } .cta h2{margin-top:0} .cta .note{color:var(--text-soft);font-size:13.5px;margin:12px 0 0} .cta .note a{color:var(--text-dim)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 24px;font-weight:700;font-size:16px; border-radius:var(--r-pill);border:1px solid transparent; background:var(--accent);color:#fff !important;box-shadow:var(--sh-cta); transition:transform .15s ease, background .15s ease; text-decoration:none !important; } .btn:hover{background:var(--accent-hover);transform:translateY(-2px)} /* ---------- ÜBERSICHT: KARTEN ---------- */ .guide-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:34px} @media(min-width:680px){.guide-grid{grid-template-columns:1fr 1fr}} .guide-card{ display:flex;flex-direction:column;gap:10px; background:var(--card);border:1px solid var(--border); border-radius:var(--r-lg);padding:24px; box-shadow:var(--sh-card); transition:transform .18s ease, box-shadow .2s ease, border-color .15s ease; } .guide-card:hover{transform:translateY(-3px);box-shadow:var(--sh-soft);border-color:var(--border-strong)} .guide-card h2{margin:0;font-size:19.5px;line-height:1.3;letter-spacing:-0.015em} .guide-card h2 .arrow{color:var(--accent);transition:transform .18s ease;display:inline-block} .guide-card:hover h2 .arrow{transform:translateX(3px)} .guide-card p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.6;flex:1} .guide-card .meta{ display:inline-flex;align-items:center;gap:7px; color:var(--text-soft);font-size:13px;font-weight:600; } .guide-card .meta svg{color:var(--accent);flex:none} .guide-card .tag{ align-self:flex-start; font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft); padding:4px 10px;border-radius:var(--r-pill); } /* ---------- FOOTER (leichtgewichtig) ---------- */ .foot{ border-top:1px solid var(--border); margin-top:24px;padding:26px 24px 34px; color:var(--text-soft);font-size:13.5px; } .foot-inner{ max-width:var(--content-w);margin:0 auto; display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between; } .foot-links{display:flex;flex-wrap:wrap;gap:18px} .foot a{color:var(--text-soft);transition:color .15s ease} .foot a:hover{color:var(--text)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none !important} }