/* ==========================================================================
   Wedding Guide: Kapitel links, Lesetext rechts, persönliche Werte aus Datum und Ort
   ========================================================================== */

/* Euer Tag: Datum und Ort */
.gday {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin: 0 auto;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1.4rem var(--gutter);
}
.gday__form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.gday__out { margin: 0; color: var(--ink-soft); max-width: 40rem; }
.gday__out strong { color: var(--ink); font-weight: 500; }
.gday__count { font-family: var(--serif); font-weight: 300; font-size: var(--step-3); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
@media (min-width: 56em) { .gday { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }

/* Aufbau: Kapitelleiste und Text */
.gwrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin: 0 auto;
  display: grid;
  gap: 0 var(--gutter);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 64em) { .gwrap { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }

.gnav { padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 64em) {
  .gnav { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; border-bottom: 0; padding-top: var(--space-s); }
}
.gnav summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.gnav summary::-webkit-details-marker { display: none; }
.gnav__title { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); }
.gnav__progress { color: var(--ink-quiet); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.gnav__bar { height: 1px; margin-top: .9rem; background: var(--hairline); }
.gnav__bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s var(--ease); }
.gnav ol { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: ch; }
.gnav li a {
  display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) 1rem; gap: .5rem; align-items: baseline;
  padding: .45rem 0; color: var(--ink-soft); text-decoration: none; font-size: var(--step--1);
}
.gnav li a::before { counter-increment: ch; content: counter(ch, decimal-leading-zero); color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.gnav li a::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; border: 1px solid var(--hairline); justify-self: end; }
.gnav li a.is-read::after { background: var(--gold); border-color: var(--gold); }
.gnav li a[aria-current="true"] { color: var(--ink); }
.gnav li a:hover, .gnav li a:focus-visible { color: var(--ink); }
.gnav__resume { margin-top: 1rem; }

/* Kapitel */
.gbody { min-width: 0; }
.gchap { padding: var(--space-m) 0; border-bottom: 1px solid var(--hairline); scroll-margin-top: calc(var(--header-h) + 1rem); }
.gchap .post { width: auto; margin: 0; padding: 0; border: 0; max-width: 44rem; }
.gchap__num { margin: 0 0 .8rem; color: var(--ink-quiet); }
.gchap h2 { margin: 0 0 1.2rem; font-size: var(--step-3); line-height: 1.02; }
.gchap .post h2 { font-size: var(--step-3); margin-top: 0; }

/* Persönlicher Wert, wird aus Datum und Ort berechnet */
.mine { color: var(--ink); font-weight: 500; white-space: nowrap; }
.mine:empty::before { content: "…"; color: var(--ink-quiet); font-weight: 400; }
.hint-mine { color: var(--ink-quiet); font-size: var(--step--1); }

/* Licht-Karte */
.glight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.6em 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.glight div { padding: 1rem .2rem; }
.glight div + div { border-left: 1px solid var(--hairline); padding-left: clamp(.6rem, 2vw, 1rem); }
@media (max-width: 30em) { .glight b { font-size: var(--step-1); } .glight span { font-size: .75rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }
.glight b { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--step-2); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.glight span { display: block; margin-top: .4rem; font-size: var(--step--1); color: var(--ink-quiet); }

/* Ablauf mit und ohne First Look */
.gswitch { display: inline-flex; border: 1px solid var(--hairline); margin: 1.2em 0 .4em; }
.gswitch button { font: var(--caps); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; padding: .8rem 1rem; cursor: pointer; }
.gswitch button + button { border-left: 1px solid var(--hairline); }
.gswitch button[aria-pressed="true"] { background: var(--ink); color: var(--night); }
.gtl { list-style: none; margin: 1em 0 0; padding: 0 0 0 1.4rem; position: relative; }
.gtl::before { content: ""; position: absolute; left: 3px; top: .7rem; bottom: .7rem; width: 1px; background: var(--hairline); }
.gtl li { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); padding: .5rem 0; }
.gtl li::before { content: ""; position: absolute; left: -1.4rem; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--night); border: 1px solid var(--gold); }
.gtl li.is-photo::before { background: var(--gold); }
.gtl time { font-family: var(--serif); font-size: var(--step-1); line-height: 1.2; color: var(--gold); font-variant-numeric: lining-nums; }
.gtl small { display: block; color: var(--ink-quiet); font-size: var(--step--1); }
.gtl-note { font-size: var(--step--1); color: var(--ink-quiet); }

/* Listen zum Abhaken */
.gcheck { list-style: none; margin: 1.4em 0; padding: 0; border-top: 1px solid var(--hairline); }
.gcheck li { border-bottom: 1px solid var(--hairline); }
.gcheck label { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; cursor: pointer; color: var(--ink-soft); }
.gcheck input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--gold); flex: none; }
.gcheck input:checked + span { color: var(--ink-quiet); text-decoration: line-through; text-decoration-color: var(--hairline); }
.gcheck__count { font-size: var(--step--1); color: var(--ink-quiet); }

/* Knöpfe im Text */
.gactions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 1.4em; }

@media (prefers-reduced-motion: reduce) { .gnav__bar span { transition: none; } }

.g-place-note { margin: .6rem 0 0; padding: .6rem .8rem; border-left: 1px solid var(--gold); background: rgba(196, 169, 106, .06); font-size: var(--step--1); color: var(--ink); }