/* Gedenkportal · Startseite nach Entwurf A „Lebensbuch, ruhig“ (Papier, Aubergine, Flieder; Serife nur für Titel).
   Gemeinsame Bausteine (lba-*) und Farbwerte stehen in memorial-lebensbuch.css. */
body[data-portal="search"] .portal-header { background:rgba(255,253,254,.9); }
body[data-portal="search"] .portal-context { display:none; }
.lba-nav { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lba-nav a { padding:9px 14px; border-radius:999px; color:var(--lb-primary-dark); font-size:14px; font-weight:600; text-decoration:none; }
.lba-nav a:hover, .lba-nav a.active { background:var(--lb-soft); }

/* Hero mit Kacheln */
.lba-home-hero { position:relative; overflow:hidden; padding:70px 0 58px; background:linear-gradient(90deg,rgba(249,246,248,.98) 0%,rgba(249,246,248,.9) 50%,rgba(249,246,248,.55) 100%),url('/assets/mourning-palette-magnolia-v1.png') right top / cover no-repeat,var(--lb-paper); }
.lba-home-hero .lba-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.lba-home-hero h1 { font-size:clamp(40px,5.2vw,64px); line-height:1.05; margin-top:12px; }
.lba-lead { margin:18px 0 0; max-width:560px; color:var(--lb-text); font-size:18px; line-height:1.7; }
.lba-hero-side { display:grid; gap:14px; min-width:0; }
.lba-candle-note { display:flex; gap:16px; align-items:center; padding:18px 20px; }
.lba-candle-note img { width:54px; height:54px; object-fit:contain; flex:none; }
.lba-candle-note strong { display:block; font:400 20px/1.25 var(--lb-serif); color:var(--lb-ink); }
.lba-candle-note span { color:var(--lb-muted); font-size:14px; }
.lba-counts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lba-counts-grid > div { padding:16px 10px; text-align:center; }
.lba-counts-grid strong { display:block; color:var(--lb-primary); font:400 34px/1 var(--lb-serif); }
.lba-counts-grid small { display:block; margin-top:6px; color:var(--lb-muted); font-size:12.5px; letter-spacing:.04em; }

/* Suchkarte */
.lba-search { grid-column:1 / -1; margin:14px 0 0; padding:22px; display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:12px; align-items:end; }
.lba-search label { display:grid; gap:6px; color:var(--lb-muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; min-width:0; }
.lba-search input, .lba-search select { width:100%; min-height:46px; padding:10px 14px; border:1px solid #dccbe4; border-radius:12px; background:#fff; color:var(--lb-ink); font:400 15px var(--lb-sans); box-sizing:border-box; }
.lba-search input:focus, .lba-search select:focus { border-color:var(--lb-primary); box-shadow:0 0 0 3px rgba(100,49,130,.12); outline:none; }
.lba-search .hint { grid-column:1 / -1; margin:0; color:var(--lb-muted); font-size:13.5px; }
.lba-search .hint a { font-weight:600; }

/* Abschnitte */
.lba-block { padding:64px 0; }
.lba-block.alt { background:#fff; border-top:1px solid var(--lb-line); border-bottom:1px solid var(--lb-line); }
.lba-block-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.lba-block-head h2 { font-size:clamp(30px,3.4vw,40px); line-height:1.1; margin-top:6px; }
.lba-block-head p { margin:8px 0 0; max-width:620px; color:var(--lb-muted); }

/* Gedenkseiten-Karten */
.lba-memorials { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.lba-memorials[data-limited] > .lba-memorial-card:nth-child(n+5) { display:none; }
.lbk-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* Gedenkkarte „Lebensbuch mit Kerzenlicht“: Buchrücken (Aubergine → Flieder) links, Porträt 92×112 mit weich abgerundeten Ecken,
   Spruch auf Flieder-Feld, Fußzeile mit Zählern. Grablicht oben rechts nur bei brennender Kerze, Trauerflor als Band um den Rücken. */
.lba-memorial-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:22px 16px 18px 26px; border-radius:18px 24px 24px 18px; background:#fff; box-shadow:0 20px 46px rgba(78,37,85,.1); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; animation:lb-home-rise .6s calc(.1s + var(--i,0) * 60ms) both; }
.lba-memorial-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:linear-gradient(180deg,var(--lb-primary),var(--lb-lilac)); }
.lba-memorial-card::after { content:""; position:absolute; left:10px; top:0; bottom:0; width:6px; background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0)); pointer-events:none; }
.lba-memorial-card:hover { transform:translateY(-3px); box-shadow:0 26px 50px rgba(60,32,74,.14); }
.lba-memorial-card:focus-visible { outline:3px solid rgba(100,49,130,.45); outline-offset:2px; }
.lbk-flor { position:absolute; left:0; top:26px; width:16px; height:22px; background:linear-gradient(90deg,#1f1a22,#3a3140 60%,#1f1a22); box-shadow:0 2px 6px rgba(0,0,0,.35); z-index:3; }
.lbk-flor::after { content:""; position:absolute; left:16px; top:0; width:10px; height:22px; background:linear-gradient(90deg,#2b2430,#1f1a22); clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%); }
.lbk-candle { position:absolute; right:12px; top:10px; width:40px; height:52px; z-index:2; pointer-events:none; }
.lbk-candle .flame { transform-box:fill-box; transform-origin:50% 100%; animation:lbk-flicker 1.8s ease-in-out infinite; }
.lbk-candle .glow { transform-box:fill-box; transform-origin:50% 60%; animation:lbk-glow 2.6s ease-in-out infinite; }
@keyframes lbk-flicker { 0%,100% { transform:scaleY(1) scaleX(1) translateX(0); } 30% { transform:scaleY(1.06) scaleX(.94) translateX(.4px); } 55% { transform:scaleY(.95) scaleX(1.05) translateX(-.5px); } 80% { transform:scaleY(1.03) scaleX(.97); } }
@keyframes lbk-glow { 0%,100% { opacity:.75; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
.lbk-top { display:flex; gap:14px; align-items:center; min-width:0; margin-bottom:14px; }
.lbk-photo { position:relative; flex:0 0 92px; width:92px; height:112px; border-radius:10px 22px 10px 22px; overflow:hidden; background:#e2d5ea; box-shadow:0 8px 18px rgba(78,37,85,.16); }
.lbk-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.lbk-mono { width:100%; height:100%; display:grid; place-items:center; color:#fff; font:400 32px/1 var(--lb-serif); background:radial-gradient(circle at 30% 25%,#d7c3e2,#a98bc2 75%); }
.lbk-head { flex:1 1 auto; min-width:0; }
.lba-memorial-card .lba-eyebrow { font-size:9.5px; letter-spacing:.15em; line-height:1.3; color:var(--lb-primary); }
.lba-memorial-card.has-candle .lba-eyebrow { padding-right:30px; min-height:38px; }
.lba-memorial-card h3 { margin:6px 0 0; font-size:22px; line-height:1.15; overflow-wrap:anywhere; hyphens:auto; }
.lbk-born { display:block; margin-top:2px; font:italic 400 13px/1.3 var(--lb-serif); color:var(--lb-muted); }
.lbk-quote { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--lb-soft); color:#3f3350; font:italic 400 14px/1.45 var(--lb-serif); overflow-wrap:anywhere; }
.lbk-dates { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; font-size:13px; font-variant-numeric:tabular-nums; }
.lbk-dates b { font-weight:600; color:var(--lb-ink); white-space:nowrap; }
.lbk-dates span { color:var(--lb-muted); }
.lbk-tags { display:flex; gap:6px; flex-wrap:wrap; margin:-4px 0 14px; }
.lbk-tags span { font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--lb-line); color:var(--lb-muted); overflow-wrap:anywhere; }
.lbk-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px dashed var(--lb-line); white-space:nowrap; }
.lbk-counters { display:flex; gap:10px; min-width:0; }
.lbk-counters span { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--lb-muted); }
.lbk-counters b { font-weight:600; color:var(--lb-ink); }
.lbk-counters img { width:16px; height:16px; object-fit:contain; }
.lbk-counters svg { width:16px; height:16px; flex:none; }
.lbk-open { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--lb-primary); }
.lbk-open svg { width:16px; height:16px; transition:transform .25s ease; }
.lba-memorial-card:hover .lbk-open svg { transform:translateX(3px); }
.lba-empty { grid-column:1 / -1; min-height:190px; display:grid; place-items:center; align-content:center; padding:24px; border:1px dashed #dccbe4; border-radius:18px; background:#fffdfe; color:var(--lb-muted); text-align:center; }
.lba-empty strong { color:var(--lb-ink); font:400 24px/1.2 var(--lb-serif); }
.lba-empty p { margin:8px 0 0; max-width:520px; }

/* Gut zu wissen */
.lba-help { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start; }
.lba-faq { display:grid; gap:10px; }
.lba-faq details { border:1px solid var(--lb-line); background:var(--lb-card); border-radius:16px; box-shadow:var(--lb-shadow); overflow:hidden; }
.lba-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; font:400 20px/1.3 var(--lb-serif); color:var(--lb-ink); }
.lba-faq summary::-webkit-details-marker { display:none; }
.lba-faq summary .ico { flex:none; width:38px; height:38px; border-radius:12px; background:var(--lb-soft); color:var(--lb-primary); display:grid; place-items:center; }
.lba-faq summary .ico svg { width:19px; height:19px; }
.lba-faq summary::after { content:"+"; margin-left:auto; color:var(--lb-lilac-dark); font:400 26px/1 var(--lb-serif); }
.lba-faq details[open] summary::after { content:"–"; }
.lba-faq .body { padding:0 22px 20px 74px; color:var(--lb-text); font-size:15.5px; line-height:1.7; }
.lba-faq .body p { margin:0 0 10px; }
.lba-faq .body a { font-weight:600; }
.lba-steps { padding:26px; position:sticky; top:100px; }
.lba-steps h3 { font-size:26px; }
.lba-steps ol { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:s; }
.lba-steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; counter-increment:s; color:var(--lb-text); font-size:14.5px; line-height:1.55; }
.lba-steps li > span { display:block; }
.lba-steps li::before { content:counter(s); width:34px; height:34px; border-radius:50%; background:var(--lb-primary); color:#fff; display:grid; place-items:center; font:700 14px var(--lb-sans); }
.lba-steps li strong { display:block; color:var(--lb-ink); }
.lba-steps .lba-btn { margin-top:18px; width:100%; }

/* Trauer braucht Zeit */
.lba-grief { background:linear-gradient(180deg,#fff 0%,var(--lb-soft) 100%); }
.lba-grief-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.lba-grief-card { padding:26px; }
.lba-grief-card .ico { width:44px; height:44px; border-radius:14px; background:var(--lb-soft); color:var(--lb-primary); display:grid; place-items:center; margin-bottom:14px; }
.lba-grief-card .ico svg { width:22px; height:22px; }
.lba-grief-card h3 { font-size:24px; }
.lba-grief-card p { margin:10px 0 0; color:var(--lb-text); font-size:15px; line-height:1.65; }
.lba-grief-card .tel { display:block; margin-top:12px; color:var(--lb-primary); font:400 26px/1.2 var(--lb-serif); text-decoration:none; }
.lba-grief-card small { display:block; margin-top:6px; color:var(--lb-muted); font-size:13px; line-height:1.5; }
.lba-quote { margin:52px auto 0; max-width:720px; text-align:center; color:var(--lb-text); font:italic 400 clamp(22px,2.6vw,30px)/1.5 var(--lb-serif); }
.lba-quote small { display:block; margin-top:10px; font:400 13px var(--lb-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--lb-muted); }

/* Kontakt */
.lba-contact { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.lba-contact .lba-card { padding:30px; }
.lba-contact h3 { font-size:28px; }
.lba-contact p { color:var(--lb-text); margin:10px 0 0; }
.lba-contact dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:18px 0 0; font-size:15px; }
.lba-contact dt { white-space:nowrap; color:var(--lb-muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding-top:4px; }
.lba-contact dd { margin:0; color:var(--lb-ink); overflow-wrap:anywhere; }
.lba-contact dd a { text-decoration:none; }
.lba-contact .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.lba-contact-image { border-radius:18px; min-height:280px; background:url('/assets/memorial-hero-lilac-lake-v1.webp') center / cover; box-shadow:var(--lb-shadow); position:relative; overflow:hidden; }
.lba-contact-image span { position:absolute; left:24px; right:24px; bottom:22px; background:rgba(255,253,254,.88); border-radius:14px; padding:14px 18px; font:italic 400 18px/1.4 var(--lb-serif); color:var(--lb-ink); }

/* Einblenden über „translate“, damit die Hover-Anhebung (transform) der Karten nicht von der Animation überdeckt wird. */
@keyframes lb-home-rise { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
.lba-home-hero .lba-wrap > * { animation:lb-home-rise .7s both; }
.lba-home-hero .lba-hero-side { animation-delay:.12s; }
.lba-home-hero .lba-search { animation-delay:.22s; }
@media (prefers-reduced-motion: reduce) { .lba-home-hero .lba-wrap > *, .lba-memorial-card, .lbk-candle .flame, .lbk-candle .glow { animation:none !important; } .lba-memorial-card, .lbk-open svg { transition:none; } }

@media (max-width:1100px) {
  .lba-memorials { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .lba-home-hero .lba-wrap { grid-template-columns:1fr; }
  /* Breite Karten: Kopfbereich hält rechts Platz für das Grablicht, Name darf neben der Kerze beginnen */
  .lba-memorial-card.has-candle .lba-eyebrow { min-height:0; padding-right:0; }
  .lba-memorial-card.has-candle .lbk-head { padding-right:32px; }
  .lba-search { grid-template-columns:1fr 1fr; }
  .lba-search .lba-btn { grid-column:1 / -1; }
  .lba-memorials { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lba-help { grid-template-columns:1fr; }
  .lba-steps { position:static; }
  .lba-grief-grid, .lba-contact { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  body[data-portal="search"] .portal-context { display:grid; text-align:right; }
  .lba-nav { display:none; }
  .lba-home-hero { padding:44px 0 40px; }
  .lba-search { grid-template-columns:1fr; padding:18px; }
  .lba-counts-grid { gap:8px; }
  .lba-counts-grid strong { font-size:28px; }
  .lba-memorials { grid-template-columns:1fr; }
  .lba-memorial-card { padding:20px 16px 16px 24px; }
  .lba-memorial-card h3 { font-size:21px; }
  .lba-block { padding:44px 0; }
  .lba-faq .body { padding-left:22px; }
  .lba-faq summary { font-size:18px; padding:16px 18px; }
  .lba-contact .lba-card { padding:22px 18px; }
  .lba-contact dl { grid-template-columns:1fr; gap:2px 0; }
  .lba-contact dt { padding-top:8px; }
}