/* Wegweiser · Startseite „Steingarten“: Band Neue Regeln, Einstieg mit Foto, Fahrplan-Kasten, Verzeichnis, Fahrplan-Zeilen, Fristen, Methode. Ergänzt grund.css. */
.neu{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.neu .hülle{display:grid;grid-template-columns:150px 1fr;gap:28px;padding-top:14px;padding-bottom:14px;align-items:start;border-left:3px solid var(--gruen)}
.neu-t strong{font-family:var(--serif);font-weight:500;font-size:18px;display:block;line-height:1.2}.neu-t span{font-size:12px;color:var(--grau2)}
.neu ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.neu li a{color:var(--tinte);font-size:14px;line-height:1.45;display:block}.neu li a:hover{color:var(--gruen);text-decoration:none}
.neu .datum{display:block;font-size:12px;font-weight:700;color:var(--gruen)}

/* Einstieg mit Foto (Wikimedia Commons, CC BY-SA 4.0, Nachweis am Bild) */
.einstieg{position:relative;background:#1C1F1D url(foto-17-juni-fernsehturm-1600.webp) center 42%/cover no-repeat;color:#fff}
@media (max-width:800px){.einstieg{background-image:url(foto-17-juni-fernsehturm-800.webp)}}
.einstieg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,18,.88) 0%,rgba(16,20,18,.7) 48%,rgba(16,20,18,.38) 100%)}
.einstieg .hülle{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:64px;padding-top:76px;padding-bottom:84px;align-items:start}
.einstieg h1{font-size:clamp(32px,3.8vw,46px);max-width:20ch;line-height:1.18;color:#fff}
.einstieg .lead{font-size:18px;color:rgba(255,255,255,.84);max-width:52ch;margin-top:18px}
.einstieg .lab{color:rgba(255,255,255,.75)}
.einstieg .aktion{margin-top:26px}.knopf.gross{font-size:16.5px;padding:15px 22px;max-width:520px;line-height:1.35}
.einstieg .selbst{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.7)}
.suche{margin-top:8px;display:flex;max-width:520px}
.suche input{flex:1;font:inherit;font-size:16px;padding:13px 16px;border:1px solid transparent;border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--bg);color:var(--tinte);min-width:0}
.suche input:focus{outline:2px solid var(--gruen);outline-offset:-1px}
.suche button{border-radius:0 var(--r) var(--r) 0}
.oft{margin-top:14px;font-size:14px;color:rgba(255,255,255,.72)}.oft a{color:rgba(255,255,255,.72);margin-right:4px}
.kasten{background:var(--bg);color:var(--tinte);border-radius:var(--r);padding:22px 24px 8px}
.kasten h2{font-size:17px;font-family:var(--sans);font-weight:700}
.kasten p.hint{font-size:13.5px;color:var(--grau2);margin-top:4px}
.kasten .mehr{display:block;padding:12px 0 10px;border-top:1px solid var(--linie);font-size:14px}
.wegeliste{list-style:none;padding:0;margin-top:12px}
.wegeliste li{border-top:1px solid var(--linie)}
.wegeliste a{display:block;padding:12px 0 13px;color:var(--tinte)}.wegeliste a:hover{text-decoration:none;color:var(--gruen)}
.wegeliste small{display:block;font-size:12px;color:var(--grau2);font-weight:700}
.wegeliste b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.25;margin-top:2px}
.wegeliste span{display:block;font-size:14px;color:var(--grau);margin-top:3px}
.bildnachweis{position:absolute;right:16px;bottom:6px;font-size:11px;color:rgba(255,255,255,.6);z-index:1}
.bildnachweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Verzeichnis der Lebenslagen mit Filter */
.filter{margin:-8px 0 28px;max-width:520px;display:flex}
.filter input{flex:1;font:inherit;font-size:15.5px;padding:11px 14px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--bg);color:var(--tinte);min-width:0}
.filter input:focus{outline:2px solid var(--gruen);outline-offset:-1px}
.leer{color:var(--grau);font-size:15px;margin-bottom:20px}
.verzeichnis{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--linie2)}
.verzeichnis section{padding:22px 0 26px;border-bottom:1px solid var(--linie)}
.verzeichnis h3{font-size:19px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.verzeichnis h3 small{font-family:var(--sans);font-size:12.5px;color:var(--grau2);font-weight:400;white-space:nowrap}
.verzeichnis ul{list-style:none;padding:0;margin-top:10px}
.verzeichnis li{font-size:15px;padding:4px 0}
.verzeichnis li a{color:var(--tinte)}.verzeichnis li a:hover{color:var(--gruen)}
.verzeichnis li small{display:block;color:var(--grau2);font-size:12.5px;line-height:1.4}
.verzeichnis li[hidden],.verzeichnis section[hidden]{display:none}

/* Fahrplan-Zeilen und Fristen */
.zeilen{border-top:1px solid var(--linie2)}
.zeile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) 150px 110px;gap:24px;padding:16px 0;border-bottom:1px solid var(--linie);align-items:baseline;color:var(--tinte)}
.zeile:hover{background:var(--flaeche);text-decoration:none;margin:0 -12px;padding-left:12px;padding-right:12px}
.zeile .t{font-family:var(--serif);font-size:19px}
.zeile .f{font-size:14.5px;color:var(--grau)}.zeile .f b{color:var(--tinte);font-weight:500}
.zeile .u{font-size:13.5px;color:var(--grau2)}
.zeile .w{font-size:14.5px;color:var(--gruen);text-align:right}
.zeile.kopf{font-size:12.5px;color:var(--grau2);font-weight:700;padding:8px 0;border-bottom:1px solid var(--linie2)}
.zeile.kopf:hover{background:none;margin:0;padding-left:0;padding-right:0}
.zeile.kopf .t,.zeile.kopf .w{font:inherit;color:inherit}
.fristen2{margin-top:36px;border-top:2px solid var(--tinte);padding-top:14px}
.fristen2 h3{font-family:var(--sans);font-size:14px;font-weight:700}
.fristliste{list-style:none;padding:0;columns:2;column-gap:56px;margin-top:4px}
.fristliste li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:14.5px;align-items:baseline;break-inside:avoid}
.fristliste b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--gruen);line-height:1.1}
.fristliste small{display:block;color:var(--grau2);font-size:12.5px}

/* Methode: Bild und Textpunkte */
.bildzeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.bildzeile figure{margin:0}
.bildzeile img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;border-radius:var(--r)}
.bildzeile figcaption{font-size:12.5px;color:var(--grau2);margin-top:8px}.bildzeile figcaption a{color:inherit}
.punkte>div{border-top:1px solid var(--linie);padding:16px 0 18px}
.punkte>div:first-child{border-top:2px solid var(--tinte);padding-top:14px}
.punkte .nr{font-family:var(--serif);font-size:13px;color:var(--grau2);display:block}
.punkte h3{font-size:20px;margin-top:4px}.punkte p{color:var(--grau);font-size:15px;margin-top:8px}
.notfall{font-size:14px;color:var(--grau);border-left:3px solid var(--rot);padding:6px 0 6px 16px;margin-top:36px}
.notfall strong{color:var(--rot)}

@media (max-width:980px){
  .neu .hülle{grid-template-columns:1fr;gap:10px}.neu ul{grid-template-columns:1fr;gap:10px}
  .bildzeile{grid-template-columns:1fr;gap:24px}.verzeichnis{grid-template-columns:1fr 1fr}.fristliste{columns:1}
}
@media (max-width:760px){
  .einstieg .hülle{grid-template-columns:1fr;gap:28px;padding-top:40px;padding-bottom:48px}
  .verzeichnis{grid-template-columns:1fr}
  .zeile{grid-template-columns:1fr;gap:4px}.zeile .w{text-align:left}.zeile.kopf{display:none}
}

/* Seite lebenslagen.html: je Lebenslage Links auf ihre Themenseiten */
.sprung{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 18px;font-size:14px}
.verzeichnis.lagen{grid-template-columns:1fr;gap:0}
.verzeichnis.lagen h2{font-size:24px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.verzeichnis.lagen h2 small{font-family:var(--sans);font-size:12.5px;color:var(--grau2);font-weight:400}
.verzeichnis.lagen ul{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px}
.verzeichnis.lagen .lname{font-weight:700;font-size:17px}
.lthemen{display:block;margin-top:6px;font-size:13.5px;line-height:1.55}
.lthemen a{color:var(--tinte-weich,var(--tinte))}.lthemen a:not(:last-child)::after{content:" · ";color:var(--grau2)}
@media(max-width:760px){.verzeichnis.lagen ul{grid-template-columns:1fr}}

/* Übersicht roadmap/index.html */
.fpliste{list-style:none;padding:0;border-top:1px solid var(--linie2)}
.fpliste a{display:grid;grid-template-columns:minmax(0,1fr) 140px 120px;grid-template-areas:"t u w" "x u w";gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--linie);color:var(--tinte);align-items:baseline}
.fpliste a:hover{background:var(--flaeche);text-decoration:none;margin:0 -12px;padding-left:12px;padding-right:12px}
.fpliste .t{grid-area:t;font-family:var(--serif);font-size:19px;line-height:1.3}
.fpliste .x{grid-area:x;font-size:14px;color:var(--grau);line-height:1.45}
.fpliste .u{grid-area:u;font-size:13px;color:var(--grau2)}
.fpliste .w{grid-area:w;font-size:14.5px;color:var(--gruen);text-align:right}
@media(max-width:760px){.fpliste a{grid-template-columns:1fr;grid-template-areas:"t" "x" "u" "w"}.fpliste .w{text-align:left}}
