/* "Wie ich arbeite" in drei Teilen (seit 16.10.2026): Planung, Umsetzung,
   Begleitung. Eigene Datei, damit die Bausteine der drei Teile nicht in
   seite.css mitwachsen. Karten und Wegkarten kommen aus erbe.css. */

/* Marke über der Überschrift: zeigt, in welchem der drei Teile man ist.
   Gleiche Machart wie .kachel-nr, weil es dieselbe Reihenfolge ist. */
.erbe .abschnitt-nr {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 14px;
}

/* Themen der Planung als Pills statt Liste mit Punkten. */
.erbe .themen { margin-top: var(--raum-m); }
.erbe .themen h3 {
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
}
.erbe .themen ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 22px;
}
.erbe .themen li {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-dark);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: var(--fs-klein);
  line-height: 1.3;
  color: var(--black);
}
.erbe .themen p {
  font-size: var(--fs-text);
  line-height: 1.6;
  color: var(--gray-dark);
  max-width: 60ch;
}

/* Das erste Jahr als Zeitstrahl: Planung und vier Termine in ihrer echten Reihenfolge.
   Eine Linie verbindet die Punkte, bis 1099px senkrecht, darueber
   waagrecht — schmaler wurden die vier Spalten zu eng fuer ganze Saetze. Leiser als die vier Karten darueber, aber mit ganzen Saetzen. */
.erbe .jahr { margin-top: var(--raum-l); }
.erbe .jahr h3 {
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.erbe .rhythmus {
  list-style: none;
  position: relative;
  display: grid;
  gap: 32px;
  padding-left: 30px;
}
.erbe .rhythmus::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background-color: var(--salbei);
  opacity: .35;
}
.erbe .rhythmus li { position: relative; }
.erbe .rhythmus li::before {
  content: '';
  position: absolute;
  left: -30px; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background-color: var(--salbei);
}
@media (min-width: 1100px) {
  .erbe .rhythmus {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 clamp(24px, 3vw, 48px);
    padding-left: 0;
    padding-top: 34px;
  }
  .erbe .rhythmus::before {
    left: 6px; right: 0; top: 6px; bottom: auto;
    width: auto; height: 1px;
  }
  .erbe .rhythmus li::before { left: 0; top: -34px; }
}
.erbe .rhythmus .wann {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.erbe .rhythmus b {
  display: block;
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
}
.erbe .rhythmus b span {
  display: block;
  font-size: var(--fs-klein);
  font-weight: 400;
  color: var(--gray-dark);
}
.erbe .rhythmus p {
  font-size: var(--fs-klein);
  line-height: 1.6;
  color: var(--gray-dark);
  max-width: 46ch;
}
.erbe .jahr-hinweis {
  margin-top: 28px;
  font-size: var(--fs-klein);
  line-height: 1.6;
  color: var(--gray-dark);
  max-width: 60ch;
}
.erbe .jahr-satz,
.erbe .schlusssatz {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: var(--fs-gross);
  line-height: 1.4;
  color: var(--black);
  max-width: 46ch;
}

/* "Ruhe" auf schmalen Schirmen: gestapelt stand das Wort eng zwischen
   Marke und Text. Es soll als Wort im Raum stehen, mit Luft davor und danach. */
@media (max-width: 759px) {
  .erbe .kachel--geteilt .kachel-kopf h3 {
    font-size: 56px;
    margin: clamp(24px, 7vw, 36px) 0 clamp(32px, 9vw, 48px);
  }
}

/* Trittsteine (16.10.2026, zum Vergleich mit .abschnitt-nr): zeigen, auf
   welchem der drei Steine man steht. Bild aus dem Hero der Seite. */
.erbe .trittsteine {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.erbe .trittsteine svg { width: 122px; height: 36px; flex: none; }
.erbe .trittsteine path { stroke: var(--salbei); stroke-width: 1.4; }
.erbe .trittsteine .jetzt { fill: var(--salbei); }
.erbe .trittsteine .war   { fill: rgba(94, 110, 84, .3); stroke: none; }
.erbe .trittsteine .noch  { fill: none; stroke-opacity: .45; }
.erbe .trittsteine > span {
  font-size: 16px;
  font-weight: 600;
  color: var(--salbei);
}
.erbe .vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Preisblock: Die gruene Karte zog sich auf die Hoehe der Preisliste und
   stand zu drei Vierteln leer. Jetzt so hoch wie ihr Satz, oben angesetzt. */
.erbe #honorar .kachel--aussage { align-self: start; }

/* Kleine Karten: Hinweise zum Preis (2 x 2) und was zur Geldanlage laufend
   dazugehoert (3 x 2). Leiser als die grossen Karten, damit diese fuehren. */
.erbe .kleinkarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px) {
  .erbe .kleinkarten { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .erbe .kleinkarten--drei { grid-template-columns: repeat(3, 1fr); }
}
.erbe .preis-hinweise { margin-top: var(--raum-m); }
.erbe .kleinkarten > div {
  background-color: var(--white);
  border: 1px solid var(--beige-dark);
  border-radius: 16px;
  padding: 22px 24px 24px;
}
.erbe .kleinkarten h3,
.erbe .kleinkarten h4 {
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 8px;
}
.erbe .kleinkarten p {
  font-size: var(--fs-klein);
  line-height: 1.6;
  color: var(--gray-dark);
}
.erbe .laufend { margin-top: var(--raum-l); }
.erbe .laufend > h3 {
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Vier Karten in zwei Reihen: alle gleich hoch, auch ueber die Reihen
   hinweg. Ohne das war die zweite Reihe hoeher als die erste. */
@media (min-width: 760px) {
  .erbe #umsetzung .kacheln { grid-auto-rows: 1fr; }
}

/* "Mehr lesen": eingeklappter Text in Karten (16.10.2026). Natives
   details/summary, ohne Skript; Google liest den Text trotzdem. Der Chevron
   dreht sich beim Oeffnen, aus "Mehr lesen" wird "Weniger". */
.erbe .mehr { margin-top: 14px; }
.erbe .mehr summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--gold-dark);
}
.erbe .mehr summary::-webkit-details-marker { display: none; }
.erbe .mehr summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
}
.erbe .mehr[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.erbe .mehr .zu,
.erbe .mehr[open] .auf { display: none; }
.erbe .mehr[open] .zu { display: inline; }
.erbe .mehr summary:hover,
.erbe .mehr summary:focus-visible { color: var(--black); }
.erbe .mehr > p,
.erbe .mehr > .probe { margin-top: 10px; }
/* Auf dunklen Flaechen (Ruhe) hell. */
.erbe .kachel--voll .mehr summary { color: var(--gold-light); }
.erbe .kachel--voll .mehr summary:hover,
.erbe .kachel--voll .mehr summary:focus-visible { color: var(--cream); }
/* Zusagen: "Mehr lesen" steht in allen drei Karten auf einer Hoehe, auch
   aufgeklappt. Ueberschrift und Klappe teilen sich per Subgrid zwei Zeilen
   ueber alle Karten; die Zeile der Ueberschrift richtet sich nach der
   laengsten. Die Karten bleiben dabei gleich hoch. */
.erbe #zusagen .mehr { margin-top: 0; }
@media (min-width: 900px) {
  .erbe #zusagen .merkmale li {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .erbe .mehr summary::after { transition: none; }
}

/* Leichter Lichteinfall auf allen farbigen Karten der Seite (16.10.2026):
   oben heller, unten dunkler. Weisse Karten bleiben flach. Auf weissen
   Abschnitten sind die Karten beige, auf beigen weiss. */
.erbe {
  --licht: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 50%, rgba(43, 43, 43, .025) 100%);
}
.erbe #zusagen .merkmale li:nth-child(n+2),
.erbe section:not(.beige) .kachel,
.erbe .kachel--voll {
  background-image: var(--licht);
}