/* trauerrede-hilfe.de - Beispielseite (Vorlage fuer 23 Seiten). Nur Tokens + Bausteine der Startseite. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:clip;position:relative;-webkit-hyphens:auto;hyphens:auto}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.bloom-t1{width:1100px;height:1100px;background:var(--bloom-green);top:-420px;right:-300px}
.bloom-t2{width:820px;height:820px;background:var(--bloom-brass);top:-180px;left:-380px}

/* ---------- Brotkrumen ---------- */
.crumbs{padding-top:var(--sp-8)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--text-muted)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--green-900);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{color:var(--ink-300)}
.crumbs [aria-current]{color:var(--text-body)}

/* ---------- Seitenkopf ---------- */
.page-head{padding:var(--sp-6) 0 var(--sp-9)}
.page-head h1{font-size:54px;line-height:1.08;letter-spacing:-.03em;max-width:960px}
.page-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-muted);max-width:780px;margin:var(--sp-6) 0 0}
.anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-7)}
.anchors .chip{min-height:42px;font-size:15px;font-weight:var(--fw-semibold);background:var(--surface-card);border-color:var(--line)}

/* ---------- Dreispalter ---------- */
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-9);padding-bottom:var(--sp-12);align-items:start}
.bp-main{min-width:0;align-self:start}
.bp-side{min-width:0;align-self:stretch}
.bp-toc{display:none;align-self:stretch}

/* ---------- Inhaltsverzeichnis ---------- */
.toc-inner{position:sticky;top:94px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px}
.toc-title{font-family:var(--font-display);font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-5)}
.toc-list{list-style:none;margin:0;padding:0 0 0 16px;border-left:1.5px solid var(--line-strong);display:grid;gap:14px;position:relative}
.toc-list a{display:block;font-size:14.5px;line-height:1.4;color:var(--text-muted);text-decoration:none;transition:color var(--dur-hover) var(--ease-calm)}
.toc-list a:hover{color:var(--green-900)}
.toc-list a.on{color:var(--text-brand);font-weight:var(--fw-semibold)}
.toc-mark{position:absolute;left:-2.5px;width:3.5px;border-radius:2px;background:var(--green-700);transition:transform var(--dur-tab) var(--ease-calm),height var(--dur-tab) var(--ease-calm);top:0}

/* ---------- Beispiele ---------- */
.sample{margin-bottom:var(--sp-10)}
.sample h2,.prose>h2,.qa-head h2,.more-head h2{font-size:33px;line-height:1.2;letter-spacing:-.025em}
[id]{scroll-margin-top:110px}
.sample-meta{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-5) 0 var(--sp-6)}
.mtag{display:inline-flex;align-items:center;border-radius:var(--r-capsule);background:var(--surface-soft-green);color:var(--green-900);font-family:var(--font-display);font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.01em;padding:7px 14px}
.paper{background:var(--surface-card-hi);border-radius:var(--r-paper);box-shadow:var(--sh-card);border:1px solid var(--line);padding:48px}
.paper .letter{font-size:19px;line-height:1.75;max-width:70ch}
.paper .letter p{margin:0 0 1.05em}
.paper .letter p:last-child{margin:0}
.disclaimer{font-size:var(--fs-small);line-height:1.6;color:var(--text-muted);max-width:70ch;margin:var(--sp-4) 0 var(--sp-11)}

/* ---------- Fliesstext der Abschnitte ---------- */
.prose{margin-bottom:var(--sp-10)}
.prose>h2{margin-bottom:var(--sp-5)}
.prose h3{font-size:22px;margin:var(--sp-7) 0 var(--sp-4)}
.prose p{font-size:18.5px;line-height:1.65;max-width:70ch;margin:0 0 1.05em}
.prose ul,.prose ol{max-width:70ch;margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:12px}
.prose li{font-size:18.5px;line-height:1.6;position:relative;padding-left:32px}
.prose ul li::before{content:"";position:absolute;left:8px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--brass-500)}
.prose ol{counter-reset:s}
.prose ol li{counter-increment:s;padding-left:46px;min-height:30px}
.prose ol li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--surface-soft-brass);color:var(--brass-700);font-family:var(--font-display);font-size:15px;font-weight:var(--fw-bold);display:grid;place-items:center}
.prose li strong{font-weight:var(--fw-bold);color:var(--text-body)}
.prose a{color:var(--text-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.prose a:hover{color:var(--green-900);text-decoration-thickness:2px}

/* Leitwort am Listenpunkt: Summe, Grund oder Schritt steht auf eigener Zeile */
.prose ul>li>strong:first-child,.prose ol>li>strong:first-child{display:block;font-family:var(--font-display);font-size:19.5px;line-height:1.35;letter-spacing:-.015em;font-weight:var(--fw-bold);color:var(--text-body);margin-bottom:3px}
/* Reine Fragen- und Hinweislisten: Checkliste mit leeren Kreisen */
.prose ul:not(:has(strong)):not(:has(a)) li::before{width:15px;height:15px;background:none;box-shadow:inset 0 0 0 1.75px var(--brass-500);left:4px;top:.32em}
.prose ul:not(:has(strong)):not(:has(a)) li{padding-left:34px}

/* ---------- Redeauszug im Text ---------- */
.prose blockquote{margin:0 0 14px;padding:24px 28px;background:var(--surface-card-hi);border:1px solid var(--line);border-radius:var(--r-paper);box-shadow:var(--sh-card);font-family:var(--font-letter);font-size:19px;line-height:1.7;color:var(--text-body);max-width:68ch}
.prose blockquote::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--brass-500);margin-bottom:14px}
.prose blockquote p{font-family:var(--font-letter);font-size:19px;line-height:1.7;margin:0 0 .75em;max-width:none}
.prose blockquote p:last-child{margin:0}
.prose blockquote+blockquote{margin-top:-2px}
.prose blockquote:last-child{margin-bottom:0}
.prose>blockquote+p{margin-top:1.15em}

/* ---------- Eingebettete Streifen ---------- */
.strip{background:var(--surface-panel-dark);color:#fff;border-radius:var(--r-card);padding:var(--sp-7) var(--sp-8);margin:0 0 var(--sp-10);display:flex;align-items:center;gap:var(--sp-7);position:relative;overflow:hidden;max-width:100%}
.strip::before{content:"";position:absolute;width:520px;height:520px;background:var(--glow-on-dark);top:-300px;right:-160px;pointer-events:none}
.strip>*{position:relative}
.strip div{flex:1;min-width:0}
.strip b{display:block;font-family:var(--font-display);font-size:21px;font-weight:var(--fw-bold);letter-spacing:-.015em;line-height:1.25;margin-bottom:6px}
.strip p{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--text-on-dark-muted)}
.strip .btn{flex:none}

/* ---------- Haeufige Fragen ---------- */
.qa-head,.more-head{margin-bottom:var(--sp-6)}
.qa{display:grid;gap:12px;margin-bottom:var(--sp-10)}
.qa-item{background:var(--surface-card);border-radius:var(--r-faq);border:1px solid var(--line);transition:background var(--dur-hover) var(--ease-calm),box-shadow var(--dur-hover) var(--ease-calm)}
.qa-item:hover{background:var(--surface-soft-green);box-shadow:var(--sh-card)}
.qa-item[open]{background:var(--surface-card-hi);box-shadow:var(--sh-card)}
.qa-item summary{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);min-height:var(--tap-min);font-family:var(--font-display);font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.01em;border-radius:var(--r-faq);list-style:none;cursor:pointer}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary span:first-child{flex:1}
.qa-plus{width:38px;height:38px;border-radius:var(--r-icon);background:var(--surface-soft-green);color:var(--green-700);display:grid;place-items:center;flex:none;transition:transform var(--dur-tab) var(--ease-calm),background var(--dur-hover) var(--ease-calm)}
.qa-item[open] .qa-plus{transform:rotate(45deg);background:var(--green-900);color:#fff}
.qa-item>div{padding:0 var(--sp-6) var(--sp-6)}
.qa-item p{margin:0;font-size:17px;line-height:1.6;color:var(--text-muted);max-width:68ch}

/* ---------- Weiterlesen ---------- */
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:var(--sp-9)}
.more-link{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-faq);padding:16px var(--sp-6);min-height:var(--tap-min);text-decoration:none;color:var(--text-body);font-family:var(--font-display);font-size:16.5px;font-weight:var(--fw-semibold);letter-spacing:-.01em;transition:background var(--dur-hover) var(--ease-calm),transform var(--dur-hover) var(--ease-calm),box-shadow var(--dur-hover) var(--ease-calm)}
.more-link:hover{background:var(--surface-soft-green);color:var(--green-900);transform:translateY(-2px);box-shadow:var(--sh-card)}
.more-link .icon{width:19px;color:var(--green-700);flex:none;transition:transform var(--dur-hover) var(--ease-calm)}
.more-link:hover .icon{transform:translateX(3px)}

/* ---------- Seitenkarte ---------- */
.side-inner{position:sticky;top:94px}
.side-card{background:var(--surface-card-hi);border-radius:var(--r-card-lg);box-shadow:var(--sh-float);border:1px solid rgba(255,255,255,.9);padding:var(--sp-7)}
.side-card h3{margin-bottom:10px}
.side-card>p{font-size:var(--fs-small);line-height:1.55;color:var(--text-muted);margin:0 0 var(--sp-6)}
.field{display:block;margin-bottom:var(--sp-5)}
.field span{display:block;font-size:14.5px;font-weight:var(--fw-semibold);color:var(--text-body);margin-bottom:8px}
.field input,.field select{width:100%;min-height:52px;border:0;border-radius:var(--r-field);background:var(--surface-card);box-shadow:inset 0 0 0 1.5px var(--line-strong);padding:0 18px;font-family:var(--font-body);font-size:16.5px;color:var(--text-body)}
.field select{font-family:var(--font-display);font-weight:var(--fw-semibold);appearance:none;padding-right:44px;cursor:pointer}
.field .sel{position:relative;display:block}
.field .sel .icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--green-700);width:16px;stroke-width:2.2}
.field input::placeholder{color:var(--ink-300)}
.side-list{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:12px}
.side-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--text-muted)}
.side-price{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.side-price span{font-size:14.5px;color:var(--text-muted);line-height:1.35}
.side-price b{font-family:var(--font-display);font-size:34px;font-weight:var(--fw-black);letter-spacing:-.03em;line-height:1}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-calm),transform var(--dur-reveal) var(--ease-calm)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- Uebersicht (Hub) ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-10)}
.hub-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-6);text-decoration:none;color:inherit;transition:transform var(--dur-hover) var(--ease-calm),box-shadow var(--dur-hover) var(--ease-calm)}
.hub-card:hover{transform:translateY(var(--lift-card));box-shadow:var(--sh-card-hover)}
.hub-card .mtag{align-self:flex-start;margin-bottom:var(--sp-4)}
.hub-card.brass .mtag{background:var(--surface-soft-brass);color:var(--text-on-brass)}
.hub-card h3{font-size:20px;margin-bottom:8px}
.hub-card p{font-size:15px;line-height:1.5;color:var(--text-muted);margin:0 0 var(--sp-5)}
.hub-card .more{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:15.5px;font-weight:var(--fw-bold);color:var(--green-700)}
.hub-card .more .icon{width:18px;transition:transform var(--dur-hover) var(--ease-calm)}
.hub-card:hover .more .icon{transform:translateX(3px)}
/* Karte mit abstrakter Kopfflaeche */
.hub-card:has(.cover){padding:0;overflow:hidden}
.hub-card .cover{height:128px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green-100) 0%,var(--brass-100) 100%);position:relative;flex:none}
.hub-card .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 72% 20%,rgba(255,253,248,.75),rgba(255,253,248,0) 70%)}
.hub-card .cover .icon{width:46px;height:46px;stroke-width:1.5;color:var(--green-700);opacity:.62;position:relative;z-index:1}
.hub-card .cover.b{background:linear-gradient(135deg,var(--brass-100) 0%,var(--green-100) 100%)}
.hub-card .cover.c{background:linear-gradient(160deg,var(--green-100) 0%,#FFFDF8 55%,var(--brass-100) 100%)}
.hub-card .card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-6)}
.hub-card .card-body h3{text-wrap:pretty}

/* ---------- Breakpoints ---------- */
@media(min-width:1081px){
.bp-grid{grid-template-columns:minmax(0,1fr) 380px;gap:52px}
}
@media(min-width:1360px){
.bp-grid{grid-template-columns:230px minmax(0,1fr) 380px}
.bp-grid.no-toc{grid-template-columns:minmax(0,820px) 380px;justify-content:space-between}
.bp-toc{display:block}
.anchors{display:none}
}
@media(max-width:1080px){
.bp-side{order:2;align-self:start}
.side-inner{position:static}
.side-card{max-width:560px}
}
@media(max-width:820px){
.crumbs{padding-top:var(--sp-6)}
.page-head{padding:var(--sp-5) 0 var(--sp-8)}
.page-head h1{font-size:35px;line-height:1.1}
.page-lead{font-size:18.5px;margin-top:var(--sp-5)}
.sample h2,.prose>h2,.qa-head h2,.more-head h2{font-size:26px;line-height:1.18}
.prose h3,.side-card h3{font-size:20px}
.paper{padding:24px}
.paper .letter{font-size:17.5px;line-height:1.75}
.prose p,.prose li{font-size:17.5px}
.prose blockquote,.prose blockquote p{font-size:17.5px}
.prose blockquote{padding:20px 22px}
.prose ul>li>strong:first-child,.prose ol>li>strong:first-child{font-size:18.5px}
.hub-card .cover{height:104px}
.hub-card .cover .icon{width:40px;height:40px}
.disclaimer,.crumbs ol{font-size:14.5px}
.strip{flex-direction:column;align-items:stretch;gap:var(--sp-5);padding:var(--sp-6)}
.strip b{font-size:19px}
.strip .btn{width:100%}
.more-grid,.hub-grid{grid-template-columns:minmax(0,1fr)}
.qa-item summary{font-size:17px;padding:var(--sp-4) var(--sp-5);min-height:48px}
.qa-item>div{padding:0 var(--sp-5) var(--sp-5)}
.more-link,.field input,.field select{min-height:48px}
.bp-grid{gap:var(--sp-8);padding-bottom:var(--sp-10)}
}

/* ---------- Druck ---------- */
@media print{
@page{margin:18mm 16mm}
html{scroll-behavior:auto}
body{background:#fff;color:#000;font-size:11.5pt;padding:0}
body::before,.bloom,.topbar,.hdr,.crumbs,.anchors,.bp-toc,.bp-side,.strip,.qa-block,.more-block,.foot,.mbar{display:none !important}
.bp-grid{display:block;padding:0}
.page-head{padding:0 0 12pt}
.page-head h1{font-size:22pt;line-height:1.15;max-width:none}
.page-lead{font-size:12pt;line-height:1.5;color:#000;max-width:none}
.sample{margin-bottom:18pt}
.sample h2,.prose>h2{font-size:15pt;line-height:1.2;break-after:avoid;page-break-after:avoid}
.prose h3{font-size:12.5pt;break-after:avoid}
.sample-meta{display:block;margin:4pt 0 8pt;font-size:10.5pt;color:#333}
.mtag{display:inline;background:none;color:#333;padding:0;font-family:inherit;font-size:10.5pt;font-weight:400}
.mtag+.mtag::before{content:" · "}
.paper{background:none;box-shadow:none;border:0;border-radius:0;padding:0}
.paper .letter{font-size:13.5pt;line-height:1.65;color:#000;max-width:none}
.paper .letter p,.prose p,.prose li{orphans:3;widows:3}
.prose p,.prose li{font-size:11.5pt;line-height:1.5;max-width:none}
.prose a{color:#000;text-decoration:none}
.prose blockquote{background:none;box-shadow:none;border:0;border-left:2pt solid #999;border-radius:0;padding:0 0 0 10pt;font-size:12pt;line-height:1.5;max-width:none;margin:0 0 10pt}
.prose blockquote::before{display:none}
.prose blockquote p{font-size:12pt;line-height:1.5}
.prose ul>li>strong:first-child,.prose ol>li>strong:first-child{font-size:11.5pt}
.hub-grid .cover{display:none}
.disclaimer{font-size:10.5pt;color:#333;margin-bottom:14pt;max-width:none}
.rv{opacity:1;transform:none}
}