/* trauerrede-hilfe.de - Seite "So funktioniert es". Rahmen aus beispielseite.css, nur Tokens der Startseite. */

/* ---------- Seitenkopf ---------- */
.page-head h1{font-size:60px;line-height:1.05;letter-spacing:-.035em;max-width:16ch}
.page-head .page-lead{font-size:21px;line-height:1.55;max-width:60ch}

/* ---------- Raster: Inhalt + Seitenkarte ---------- */
.sfe-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-9);padding-bottom:var(--sp-12);align-items:start}
.sfe-grid .bp-main{min-width:0}
.sfe-grid .bp-side{min-width:0}

/* ---------- Drei Schritte ---------- */
.flow{position:relative;display:grid;gap:44px;margin-bottom:var(--sp-10)}
.flow-line{position:absolute;left:60px;top:56px;bottom:56px;width:2px;z-index:0}
.flow-line i{display:block;height:100%;background-image:linear-gradient(to bottom,rgba(47,91,85,.42) 0 7px,rgba(47,91,85,0) 7px 15px);background-size:2px 15px;transform:scaleY(0);transform-origin:top center;transition:transform 1200ms var(--ease-calm) 120ms}
.flow-line.in i{transform:scaleY(1)}
.step-card{position:relative;z-index:1;overflow:hidden;background:var(--surface-card);border:1px solid var(--line);border-radius:32px;box-shadow:var(--sh-card);padding:var(--sp-8)}
.step-card>*{position:relative}
.step-card .ico-pad{position:absolute;top:var(--sp-8);right:var(--sp-8);z-index:2}
.step-card h2{display:flex;align-items:baseline;gap:18px;margin:0 0 var(--sp-5);font-size:32px;line-height:1.2;letter-spacing:-.025em;padding-right:76px}
.step-card h2 .n{flex:none;font-family:var(--font-display);font-size:64px;font-weight:var(--fw-black);line-height:.8;letter-spacing:-.04em;color:var(--brass-500)}
.step-card p{margin:0;font-size:18.5px;line-height:1.65;max-width:68ch}
.step-card .hl{font-weight:var(--fw-bold);color:var(--brass-700)}
.step-card.free{background:var(--surface-card-hi);border-color:rgba(176,133,74,.3)}
.step-card.free::before{content:"";position:absolute;z-index:0;width:460px;height:460px;background:var(--bloom-brass);top:-280px;right:-140px;pointer-events:none}
.flow section:nth-of-type(2){transition-delay:80ms}
.flow section:nth-of-type(3){transition-delay:160ms}

/* ---------- Wie entsteht der Text? ---------- */
.dark-block{position:relative;overflow:hidden;background:var(--surface-panel-dark);color:var(--text-on-dark);border-radius:40px;padding:var(--sp-9) var(--sp-8);margin:0 0 var(--sp-10)}
.dark-block::before{content:"";position:absolute;width:760px;height:760px;background:var(--glow-on-dark);top:-420px;left:-200px;pointer-events:none}
.dark-block>*{position:relative}
.dark-block h2{margin:0 0 var(--sp-5);font-size:32px;line-height:1.2;letter-spacing:-.025em}
.dark-block .lead-on-dark{margin:0;font-size:18.5px;line-height:1.6;color:var(--text-on-dark-muted);max-width:62ch}
.rules-list{list-style:none;counter-reset:r;margin:var(--sp-7) 0;padding:0;display:grid;gap:var(--sp-4)}
.rules-list li{counter-increment:r;position:relative;padding-left:0;background:var(--glass-dark-bg);border:1px solid var(--glass-dark-line);border-radius:28px;padding:var(--sp-6) var(--sp-7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)}
.rules-list li{padding-left:76px}
.rules-list li::before{content:counter(r);position:absolute;left:var(--sp-7);top:var(--sp-6);width:36px;font-family:var(--font-display);font-size:34px;font-weight:var(--fw-black);line-height:.9;letter-spacing:-.03em;color:#DDB679}
.rules-list strong{display:block;margin-bottom:5px;font-family:var(--font-display);font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.01em;color:#fff}
.dark-block .after{margin:0;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:62ch}
.dark-block a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.dark-block a:hover{text-decoration-thickness:2px}

/* ---------- Was geschieht mit Ihren Angaben? ---------- */
.data-card{background:var(--surface-card-hi);border:1px solid var(--line);border-radius:32px;box-shadow:var(--sh-card);padding:var(--sp-8);margin-bottom:var(--sp-6)}
.data-card .ico-pad{margin-bottom:var(--sp-6)}
.data-card h2{margin:0 0 var(--sp-5);font-size:32px;line-height:1.2;letter-spacing:-.025em}
.data-card p{margin:0;font-size:18.5px;line-height:1.65;max-width:68ch}
.data-card a{color:var(--text-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.data-card a:hover{color:var(--green-900);text-decoration-thickness:2px}

/* ---------- Seitenkarte: Auswahl ---------- */
.side-card .lbl-field{display:block;margin-bottom:var(--sp-5)}

/* ---------- Breakpoints ---------- */
@media(min-width:1081px){
.sfe-grid{grid-template-columns:minmax(0,1fr) 380px;gap:72px}
}
@media(max-width:820px){
.page-head h1{font-size:38px;line-height:1.08;max-width:none}
.page-head .page-lead{font-size:18.5px}
.step-card{padding:var(--sp-6) var(--sp-5);border-radius:28px}
.step-card .ico-pad{top:var(--sp-6);right:var(--sp-5)}
.step-card h2{font-size:26px;gap:12px;padding-right:62px}
.step-card h2 .n{font-size:44px}
.step-card p,.data-card p{font-size:17.5px}
.flow-line{left:40px;top:40px;bottom:40px}
.dark-block{border-radius:28px;padding:var(--sp-7) var(--sp-5)}
.dark-block h2,.data-card h2{font-size:26px;line-height:1.18}
.dark-block .lead-on-dark{font-size:17.5px}
.rules-list li{padding:var(--sp-5);padding-left:66px;border-radius:24px}
.rules-list li::before{left:var(--sp-5);top:var(--sp-5)}
.flow{gap:32px}
.data-card{border-radius:28px;padding:var(--sp-6) var(--sp-5)}
.sfe-grid{gap:var(--sp-8);padding-bottom:var(--sp-10)}
}
@media(prefers-reduced-motion:reduce){
.flow-line i{transform:none;transition:none}
}