/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/p1-start.css ---- */
/* Paket P1: Startseite (pages/index.mjs) und Bausteine für „Sein Leben“ / Gedankenlabor (data/p1-bausteine.mjs).
   Farben nur über die Site-Tokens; Bento-Töne in p1-bento.css. */

/* ---------- Kopf: Titel + Lichtstrahl-Jagd ---------- */
.p1-hero__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
.p1-hero__copy h1 { margin-bottom: .2em; }
.p1-hero__copy .lead { max-width: 34ch; }
.p1-hero__spiel { position: relative; z-index: 1; min-width: 0; }
.p1-hero__spiel .p1-jagd { box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 900px) {
  .p1-hero__grid { grid-template-columns: 1fr; gap: 1rem; }
  .p1-hero__copy .lead { max-width: 52ch; }
}
@media (max-width: 560px) {
  .hero.start-hero.p1-hero { padding-top: .6rem; }
  .p1-hero__copy .eyebrow { margin-bottom: .3rem; letter-spacing: .08em; font-size: .7rem; }
  .p1-hero__copy h1 { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .p1-hero__copy .lead { font-size: 1rem; line-height: 1.5; }
}

/* ---------- Drei Wege (Bento) ---------- */
.p1-wege-bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.p1-weg-kachel {
  position: relative; display: flex; flex-direction: column; gap: .35rem; padding: clamp(1.2rem, 2.6vw, 1.7rem);
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, border-color .3s ease;
}
.p1-weg-kachel--gross { grid-row: span 2; justify-content: flex-end; min-height: 20rem; }
.p1-weg-kachel .p1-ico { color: var(--accent); margin-bottom: auto; transition: color .3s ease; }
.p1-weg-kachel:nth-child(2) .p1-ico { color: var(--beob-a); }
.p1-weg-kachel:nth-child(3) .p1-ico { color: var(--gold); }
.p1-weg-kachel--gross .p1-ico { width: 56px; height: 56px; }
.p1-weg-kachel__k { margin: .6rem 0 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.p1-weg-kachel h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 0; }
.p1-weg-kachel--gross h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.p1-weg-kachel__a { color: inherit; text-decoration: none; }
/* ganze Kachel klickbar; Chips liegen darüber */
.p1-weg-kachel__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.p1-weg-kachel__a:focus-visible { outline: none; }
.p1-weg-kachel:has(.p1-weg-kachel__a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.p1-weg-kachel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.p1-weg-kachel:active { scale: .985; }
.p1-weg-kachel__d { margin: 0; color: var(--ink-soft); }
.p1-weg-kachel__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-weight: 600; color: var(--accent-ink); transition: color .3s ease; }
.p1-weg-kachel__cta svg { transition: transform .2s ease; }
.p1-weg-kachel:hover .p1-weg-kachel__cta svg { transform: translateX(3px); }
.p1-weg-kachel__chips-h { margin: .6rem 0 0; font-size: .8rem; color: var(--ink-faint); }
.p1-chips { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; position: relative; z-index: 2; }
.p1-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line-strong);
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.p1-chip:hover { color: var(--accent-ink); border-color: var(--accent); }
.p1-chip:active { scale: .97; }
.p1-chip.is-done { border-color: color-mix(in srgb, var(--beob-a) 60%, var(--line)); }
@media (max-width: 760px) {
  .p1-wege-bento { grid-template-columns: 1fr; }
  .p1-weg-kachel--gross { grid-row: auto; min-height: 0; }
  .p1-weg-kachel--gross .p1-ico { width: 44px; height: 44px; }
}
@media (hover: hover) and (pointer: fine) { .p1-bento .p1-weg-kachel:hover { transform: none; box-shadow: var(--shadow-sm); } }

/* ---------- Denknuss + Sternkarte ---------- */
.p1-nuss-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.p1-nuss-grid .section-head { margin-bottom: 1rem; }
.p1-nuss-grid .widget { margin-block: 0; }
@media (max-width: 900px) { .p1-nuss-grid { grid-template-columns: 1fr; } }

.p1-karte { display: grid; gap: .8rem; }
.p1-karte__bild { border-radius: var(--radius); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--line); overflow: hidden; }
[data-theme="dark"] .p1-karte__bild { background: radial-gradient(120% 100% at 50% 0%, #1a2440, #0b0f18); }
.p1-karte__svg { display: block; width: 100%; height: auto; }
.p1-karte__namen text { font-family: var(--font-sans); font-size: 8.5px; font-weight: 600; letter-spacing: .03em; fill: var(--ink-faint); }
.p1-karte__linien line { stroke: var(--ink-faint); stroke-width: .6; opacity: .35; stroke-dasharray: 2 2.5; }
.p1-stern__form { fill: var(--ink-faint); opacity: .45; transition: fill .4s ease, opacity .4s ease; }
.p1-stern__hof { fill: var(--gold); opacity: 0; transition: opacity .4s ease; }
.p1-stern.is-an .p1-stern__form { fill: var(--gold); opacity: 1; }
.p1-stern.is-an .p1-stern__hof { opacity: .18; }
.p1-stern.is-neu .p1-stern__form { animation: p1-stern-auf 1s cubic-bezier(.22,.8,.24,1); transform-box: fill-box; transform-origin: center; }
@keyframes p1-stern-auf { 0% { transform: scale(.2); } 60% { transform: scale(1.6); } 100% { transform: none; } }
.p1-karte__stand { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.p1-karte__leer { margin: 0; color: var(--ink-soft); }
.p1-karte__weiter { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.p1-karte__lbl { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.p1-karte__weiter a { font-weight: 600; color: var(--accent-ink); min-height: 32px; display: inline-flex; align-items: center; }
.p1-karte__alle { margin: .2rem 0 0; }
.p1-karte__alle .btn svg { width: 16px; height: 16px; }
.p1-karte__lokal { margin: 0; font-size: .78rem; color: var(--ink-faint); }

/* ---------- Kapitel gruppiert ---------- */
.p1-kapgruppe + .p1-kapgruppe { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.p1-kapgruppe__h { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem; }
.p1-kapgrid .card { display: flex; flex-direction: column; }
.p1-kapgrid .card__body { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.p1-kap__nr { font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.p1-kap__t { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin: 0; color: var(--ink); }
.p1-kap__d { color: var(--ink-soft); font-size: .95rem; }
.p1-kap__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.p1-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: color-mix(in srgb, var(--gold) 75%, var(--ink)); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.p1-kapgrid .more { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .p1-bento a.card:hover { transform: none; box-shadow: var(--shadow-sm); } }

/* ---------- Wer er war ---------- */
.p1-wer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.p1-wer__bild img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.p1-wer__bild .credit { display: block; margin-top: .5rem; }
.p1-wer__zahlen { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (max-width: 820px) { .p1-wer { grid-template-columns: 1fr; } .p1-wer__bild { max-width: 300px; } }

/* ---------- Hörbuch-Karte ---------- */
.p1-hb { display: grid; gap: .6rem; margin-block: 0; }
.p1-hb h3 { margin: .1rem 0 .3rem; }
.p1-hb__kopf p { margin: 0 0 .2rem; color: var(--ink-soft); }
.p1-hb .start-hb { margin-top: .7rem; }