/* Lesbare Leitfaeden im bestehenden Designsystem. */
.guide { color:var(--ink); background:var(--paper); }
.guide-hero { padding:80px 0 64px; background:var(--ink); color:var(--paper); }
.guide-hero .guide-breadcrumb a { color:var(--knopf-gruen); }
.guide-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; font-size:14px; margin-bottom:40px; }
.guide-hero h1 { font-size:clamp(36px,5vw,64px); line-height:1.08; max-width:1000px; margin:18px 0 28px; color:var(--paper); }
.guide h1,.guide h2,.guide h3 { overflow-wrap:normal; hyphens:manual; }
.guide-hero .eyebrow { color:var(--knopf-gruen); }
.guide-hero .guide-lead { max-width:820px; font-size:21px; line-height:1.6; color:var(--paper); }
.guide-meta { margin-top:30px; color:var(--mist); font-size:14px; }
.guide-layout { display:grid; grid-template-columns:240px minmax(0,780px); gap:68px; padding-top:64px; padding-bottom:80px; align-items:start; }
.guide-toc { position:sticky; top:110px; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); }
.guide-toc strong { display:block; margin-bottom:18px; }
.guide-toc ol { padding-left:20px; display:grid; gap:14px; }
.guide-toc a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:14px; line-height:1.5; }
.guide-content { min-width:0; font-size:18px; line-height:1.75; }
.guide-content section { scroll-margin-top:120px; margin-bottom:52px; }
.guide-content h2 { font-size:30px; line-height:1.25; margin:0 0 24px; color:var(--ink); }
.guide-content h3 { font-size:22px; line-height:1.35; margin:28px 0 12px; }
.guide-content p { margin:0 0 20px; }
.guide-content a { color:var(--emerald-dark); text-decoration:underline; text-underline-offset:3px; }
.guide-summary { font-size:22px; font-weight:650; padding-bottom:28px; margin-bottom:36px; border-bottom:2px solid var(--emerald); }
.guide-example { padding:26px; border-left:4px solid var(--emerald); background:var(--white); margin:28px 0; }
.guide-label { display:block; font-size:13px; font-weight:650; margin-bottom:18px; color:var(--emerald-dark); }
.guide-example p:last-child { margin-bottom:0; }
.guide-table-wrap { overflow-x:auto; margin:28px 0; border:1px solid var(--line); border-radius:var(--radius-sm); }
.guide table { border-collapse:collapse; width:100%; font-size:16px; line-height:1.6; }
.guide caption { padding:18px; text-align:left; font-weight:650; background:var(--white); }
.guide th,.guide td { padding:18px; border-top:1px solid var(--line); vertical-align:top; text-align:left; }
.guide th { background:var(--mist); }
.guide td:first-child { width:32%; font-weight:650; }
.guide-cta { padding:36px; background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); }
.guide-cta h2 { color:var(--paper); }
.guide-cta .btn { color:var(--ink); background:var(--knopf-gruen); text-decoration:none; }
.guide-related { margin-top:36px; }
.guide-resource { margin-top:32px; padding:22px 26px; border-left:3px solid var(--emerald); background:var(--paper); color:var(--ink); }
.guide-resource a { color:var(--emerald-dark); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:850px) { .guide-layout { grid-template-columns:1fr; gap:32px; } .guide-toc { position:static; } .guide-toc ol { display:grid; grid-template-columns:1fr 1fr; } }
@media(max-width:540px) { .guide-hero { padding:42px 0; } .guide-hero .guide-lead { font-size:18px; } .guide-layout { padding-top:32px; padding-bottom:44px; } .guide-content { font-size:17px; } .guide-content h2 { font-size:26px; } .guide-toc ol { grid-template-columns:1fr; } .guide-cta { padding:24px; } .guide th,.guide td { padding:12px; } .guide td:first-child { width:38%; } }
@media print { .kopf,.fuss,.guide-toc,.guide-cta { display:none; } .guide-hero { color:#000; background:#fff; padding:0; } .guide-hero h1,.guide-hero .guide-lead,.guide-meta,.guide-hero .eyebrow { color:#000; } .guide-layout { display:block; padding:20px 0; } .guide-content { font-size:11pt; } .guide-example,table { break-inside:avoid; } }