/* Lindner & Kollegen (Demo) · Startseite
   Nur Seitenspezifisches. Alles Geteilte steht in basis.css. */

main{width:var(--spalte);margin-inline:auto}
section{padding-block:clamp(3.4rem,7.5vw,6.6rem)}
.kapitel{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.kapitel .marke{display:block;margin-bottom:.9rem}

/* ================= Hero =================
   Film rechts angeschnitten, läuft über die Fensterkante.
   Textspalte greift von links darüber. Nichts ist mittig. */
.hero{padding-top:clamp(2.4rem,5vw,4.2rem);padding-bottom:clamp(2.4rem,4.5vw,4rem)}
.hero__bau{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34%;align-items:center;gap:0}
/* Die Textspalte greift von links über die Filmkante. Damit das lesbar bleibt,
   trägt sie eine eigene Fläche, die nach rechts ausläuft. */
.hero__satz{
  grid-column:1;grid-row:1;position:relative;z-index:2;
  padding:clamp(1.6rem,3vw,2.6rem) clamp(2.4rem,6vw,5.5rem) clamp(1.6rem,3vw,2.6rem) 0;
  margin-right:clamp(-140px,-9vw,-40px);
}
/* ::after, NICHT ::before: ::before gehört dem Stationspunkt der Lebenslinie.
   Zwei Regeln auf demselben Pseudo-Element schlagen sich sonst gegenseitig aus. */
.hero__satz::after{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;right:0;left:calc(-1 * var(--satz-versatz) - 60px);
  background:linear-gradient(90deg,var(--flaeche) 0%,var(--flaeche) 64%,color-mix(in srgb,var(--flaeche) 0%,transparent) 100%);
}
/* Keine Silbentrennung in der Schlagzeile: „sa-gen“ liest sich wie ein Fehler. */
.hero__satz h1{margin-bottom:1.3rem;max-width:13ch;hyphens:none}
.hero__satz h1 em{font-style:normal;color:var(--akzent)}
.hero__unter{color:var(--text-leise);max-width:46ch;margin-bottom:2rem;font-size:1.06em}

.hero__film{
  grid-column:2;grid-row:1;position:relative;
  margin-right:calc(-1 * var(--aussen));   /* endet exakt an der Fensterkante */
  align-self:stretch;min-height:clamp(340px,46vw,580px);
  background:var(--flaeche-2);
  overflow:hidden;
}
.hero__film video,.hero__film img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* In der schmalen Spalte auf das Gesicht ausrichten. */
  object-position:50% 34%;
}
.hero__film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--flaeche) 0%,rgba(242,235,224,.34) 18%,rgba(242,235,224,0) 52%);
}
:root[data-modus="dunkel"] .hero__film::after{
  background:linear-gradient(90deg,var(--flaeche) 0%,rgba(21,29,28,.45) 22%,rgba(21,29,28,0) 58%);
}
.film-halt{
  position:absolute;right:12px;bottom:12px;z-index:3;
  background:color-mix(in srgb,var(--flaeche) 88%,transparent);
  border:1px solid var(--rahmen);border-radius:999px;
  min-height:44px;min-width:44px;padding:.4rem .95rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
}

/* Doppel-CTA sitzt auf der Linie */
.hero__wege{
  margin-top:.4rem;position:relative;
  display:grid;gap:.1rem;
  /* Der Doppel-CTA sitzt auf der Linie, nicht daneben. */
  margin-left:calc(-1 * var(--satz-versatz) - 5.5px);
  padding-left:calc(var(--satz-versatz) + 5.5px);
}
/* Der Punkt sitzt mit seiner MITTE auf der Mitte der 2px-Linie.
   Linke Kante = -satz-versatz + 1px (halbe Linie) - 4.5px (halber Punkt).
   Der rechte Rand holt den Text wieder auf den Satzspiegel zurueck. */
.hero__wege .tun::before{
  margin-left:calc(-1 * var(--satz-versatz) + 1px - 4.5px);
  margin-right:calc(var(--satz-versatz) - 1px + 4.5px - 9px - .72rem);
}
.hero__wege .tun{padding-block:.6rem}
.hero__dauer{font-size:.86rem;color:var(--text-leise);margin-left:1.7rem;margin-top:-.2rem}

/* ================= Stationen (Lebenssituationen) ================= */
.stationen__liste{display:grid;gap:0}
.station{
  border-top:1px solid var(--linie);
  --knoten-y:calc(clamp(1.4rem,3vw,2.2rem) + .35em);
}
.station:last-child{border-bottom:1px solid var(--linie)}
.station__knopf{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(1.4rem,3vw,2.2rem) 0;
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1rem;
}
.station__knopf>.gross{transition:color var(--dauer)}
.station__knopf:hover>.gross,.station__knopf:focus-visible>.gross{color:var(--akzent)}
.station__knopf:hover .station__zeichen,.station__knopf:focus-visible .station__zeichen{color:var(--akzent)}
.station__zeichen{
  font-size:1.55rem;line-height:1;color:var(--text-leise);
  transition:transform var(--dauer) cubic-bezier(.2,.8,.3,1);
}
.station__knopf[aria-expanded="true"] .station__zeichen{transform:rotate(45deg)}
.station__fach{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dauer) cubic-bezier(.2,.8,.3,1)}
.station__fach[data-offen]{grid-template-rows:1fr}
.station__fach>div{overflow:hidden}
.station__inhalt{padding-bottom:clamp(1.4rem,3vw,2.2rem);max-width:64ch}
.station__inhalt p{margin-bottom:.9rem}
.station__was{
  display:flex;flex-wrap:wrap;gap:.5rem .4rem;margin-top:1.1rem;
  font-size:.9rem;
}
.station__was li{
  border:1px solid var(--rahmen);border-radius:999px;
  padding:.32rem .78rem;color:var(--text-leise);
}
.station--1{--punkt-farbe:var(--station-1)}
.station--2{--punkt-farbe:var(--station-2)}
.station--3{--punkt-farbe:var(--station-3)}
.station--4{--punkt-farbe:var(--station-4)}
.station--5{--punkt-farbe:var(--station-5)}

/* ================= Bildband (einziger Rhythmusbruch) ================= */
.band{
  position:relative;
  width:var(--vw);margin-inline:calc(-1 * var(--aussen));
  padding:0;
}
.band figure{position:relative}
.band img{width:100%;height:clamp(240px,34vw,430px);object-fit:cover;object-position:60% 40%}
.band figcaption{
  position:absolute;left:0;right:0;bottom:0;top:0;
  display:flex;align-items:center;
  padding-left:calc(var(--aussen) + var(--linie-x) + var(--satz-versatz));
  padding-right:var(--aussen);
}
.band figcaption p{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.25rem,.9rem + 1.5vw,2.1rem);
  line-height:1.16;max-width:19ch;color:#0E2726;
  text-shadow:0 1px 22px rgba(226,236,240,.92),0 1px 5px rgba(226,236,240,.95);
}

/* ================= Zahlenband ================= */
.zahlen__reihe{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);
  border-top:1px solid var(--linie);padding-top:2rem;
  position:relative;
}
/* Die Linie durchstoesst das Zahlenband: die obere Kante laeuft nach links
   bis auf die Linie durch. */
.zahlen__reihe::before{
  content:"";position:absolute;top:-1px;height:2px;
  /* Beginnt exakt an der linken Kante der Linie, steht nirgends darueber hinaus. */
  left:calc(-1 * var(--satz-versatz));width:var(--satz-versatz);
  background:var(--akzent);
}
.zahlen__reihe>li:not(:first-child){padding-left:clamp(1rem,2.4vw,2rem);border-left:1px solid var(--linie)}
.zahlen b{
  display:block;
  font-family:'Fraunces',Georgia,serif;font-weight:560;
  font-size:clamp(2rem,1.1rem + 3.4vw,3.5rem);line-height:1;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.zahlen span{display:block;font-size:.94rem;color:var(--text-leise);max-width:22ch}

/* ================= Bedarfscheck ================= */
.check{background:var(--flaeche-2);width:var(--vw);margin-inline:calc(-1 * var(--aussen));
  padding-left:calc(var(--aussen) + var(--linie-x) + var(--satz-versatz));padding-right:var(--aussen)}
.check__bau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.check fieldset{margin-bottom:1.6rem}
.check legend{font-weight:600;margin-bottom:.7rem;font-size:1.02rem}
.check__wahl{display:grid;gap:.5rem}
.check__wahl label{
  display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  padding:.62rem .8rem;min-height:44px;
  border:1px solid var(--rahmen);
  transition:border-color var(--dauer),background var(--dauer);
}
.check__wahl label:hover{border-color:var(--akzent)}
.check__wahl input{margin-top:.42rem;accent-color:var(--akzent);width:17px;height:17px;flex:0 0 auto}
.check__wahl input:checked+span{font-weight:600}
.check__ergebnis{
  border-left:2px solid var(--akzent);padding-left:clamp(1rem,2.4vw,1.8rem);
  position:sticky;top:110px;
}
.check__ergebnis h3{margin-bottom:.9rem}
.check__ergebnis ul{display:grid;gap:.75rem;margin-bottom:1.4rem}
.check__ergebnis li{padding-bottom:.75rem;border-bottom:1px solid var(--linie)}
.check__ergebnis li b{display:block;font-weight:600}
.check__ergebnis li span{font-size:.93rem;color:var(--text-leise)}
.check__leer{color:var(--text-leise);max-width:38ch}

/* ================= Hemmschwelle ================= */
.schwelle__bau{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem);border-top:1px solid var(--linie);padding-top:2.2rem}
.schwelle b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:560;margin-bottom:.5rem}
.schwelle p{font-size:.97rem;color:var(--text-leise)}

/* ================= Team ================= */
.team__raster{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,2.6vw,2.2rem);
}
.team figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.82) contrast(1.02);
  background:var(--flaeche-2);
}
:root[data-modus="dunkel"] .team figure img{filter:saturate(.74) brightness(.92)}
/* Name und Rolle bekommen feste Zeilenhoehen, damit Rolle und Durchwahl in einer
   Reihe auf gleicher Hoehe stehen. Sonst rutscht alles je nach Namenslaenge. */
.team figcaption{padding-top:.85rem;display:grid;align-content:start}
.team figcaption b{
  display:block;font-family:'Fraunces',Georgia,serif;font-size:1.16rem;font-weight:560;
  line-height:1.18;min-height:calc(2 * 1.18em);
}
.team figcaption span{
  display:block;font-size:.92rem;color:var(--text-leise);
  line-height:1.42;min-height:calc(2 * 1.42em);
}
.team figcaption a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.92rem;text-decoration:none;
  box-shadow:inset 0 -1px 0 0 var(--linie-stark);margin-top:.3rem;
}
.team figcaption a:hover{box-shadow:inset 0 -1px 0 0 var(--akzent)}
.team__satz{margin-top:2.4rem;max-width:56ch;color:var(--text-leise)}

/* ================= Fragen ================= */
.fragen__liste{display:grid;gap:0}
.frage{border-top:1px solid var(--linie);--knoten-y:calc(clamp(1.2rem,2.6vw,1.8rem) + .45em)}
.frage:last-child{border-bottom:1px solid var(--linie)}
.frage__knopf{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(1.2rem,2.6vw,1.8rem) 0;
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.1rem,.98rem + .7vw,1.5rem);font-weight:520;line-height:1.2;
  color:var(--text);
}
.frage__knopf:hover,.frage__knopf:focus-visible{color:var(--akzent)}
.frage__zeichen{font-family:'Public Sans',sans-serif;font-size:1.4rem;color:var(--text-leise);transition:transform var(--dauer)}
.frage__knopf[aria-expanded="true"] .frage__zeichen{transform:rotate(45deg)}
.frage__fach{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dauer) cubic-bezier(.2,.8,.3,1)}
.frage__fach[data-offen]{grid-template-rows:1fr}
.frage__fach>div{overflow:hidden}
.frage__antwort{padding-bottom:clamp(1.2rem,2.6vw,1.8rem);max-width:66ch}
.frage__antwort p+p{margin-top:.85rem}
.frage--geld .frage__knopf{color:var(--akzent-tief)}

/* ================= Stimmen ================= */
.stimmen__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.stimmen blockquote{border-top:2px solid var(--akzent);padding-top:1.1rem}
.stimmen blockquote p{font-family:'Fraunces',Georgia,serif;font-size:1.1rem;line-height:1.34;margin-bottom:1rem}
.stimmen figcaption{font-size:.88rem;color:var(--text-leise)}
.stimmen figcaption b{display:block;color:var(--text);font-weight:600;font-size:.94rem}

/* ================= Kontakt ================= */
.kontakt__bau{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.8rem,4vw,3.8rem);align-items:start}
.feld{display:grid;gap:.4rem;margin-bottom:1.2rem}
.feld label{font-size:.92rem;font-weight:600}
.feld input,.feld textarea{
  border:1px solid var(--rahmen);background:var(--flaeche);
  padding:.72rem .85rem;min-height:46px;width:100%;
  transition:border-color var(--dauer);
}
.feld input:hover,.feld textarea:hover{border-color:var(--text-leise)}
.feld textarea{min-height:132px;resize:vertical;line-height:1.55}
.feld ::placeholder{color:var(--text-leise);opacity:1}
.feld small{font-size:.85rem;color:var(--text-leise)}
.feld[data-fehler] input,.feld[data-fehler] textarea{border-color:var(--akzent-tief);border-width:2px}
.fehler{font-size:.88rem;color:var(--akzent-tief);font-weight:600}
.meldung{margin-top:1rem;font-size:.95rem;font-weight:600;min-height:1.5em}
.kontakt__seite{border-left:1px solid var(--linie);padding-left:clamp(1.2rem,2.6vw,2.2rem)}
.kontakt__seite dl{display:grid;gap:1.1rem}
.kontakt__seite dt{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin-bottom:.15rem}
.kontakt__seite dd{margin:0;font-weight:500}
.kontakt__seite dd a{display:inline-flex;align-items:center;min-height:44px}
.kontakt__hinweis a{display:inline-flex;align-items:center;min-height:44px}
.kontakt__hinweis{
  margin-top:1.6rem;padding:1rem 1.1rem;
  border:1px solid var(--rahmen);
  font-size:.9rem;color:var(--text-leise);
}
.kontakt__hinweis a{color:var(--akzent-tief);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.kontakt__hinweis strong{color:var(--text)}

/* Der Beileger nach dem Absenden: die Erstinformation geht sichtbar mit. */
.mitgesendet{
  margin-top:1.2rem;padding:1.1rem 1.2rem;
  border:2px solid var(--akzent);
}
.mitgesendet b{display:block;font-weight:700;margin-bottom:.4rem}
.mitgesendet p{font-size:.92rem;color:var(--text-leise);margin-bottom:.4rem;max-width:52ch}

/* ================= Tablet ================= */
@media (max-width:1024px){
  .hero__bau{grid-template-columns:minmax(0,1fr) 46%}
  .check__bau{grid-template-columns:1fr;gap:2rem}
  .check__ergebnis{position:static}
  .team__raster{grid-template-columns:repeat(3,1fr)}
  .stimmen__liste{grid-template-columns:1fr;max-width:60ch}
  .kontakt__bau{grid-template-columns:1fr}
  .kontakt__seite{border-left:0;border-top:1px solid var(--linie);padding-left:0;padding-top:1.6rem}
}
@media (max-width:860px){
  .hero__bau{grid-template-columns:1fr;gap:2.2rem}
  /* Einspaltig: die Textfläche greift über nichts mehr, also auch kein
     negativer Rand und keine auslaufende Fläche (sonst Überlauf). */
  .hero__satz{grid-column:1;grid-row:1;padding:0;margin-right:0}
  .hero__satz::after{display:none}
  .hero__film{grid-column:1;grid-row:2;margin-right:calc(-1 * var(--aussen));margin-left:calc(-1 * var(--aussen));min-height:clamp(260px,58vw,380px)}
  .hero__film::after{background:linear-gradient(180deg,rgba(242,235,224,.5) 0%,rgba(242,235,224,0) 46%)}
  :root[data-modus="dunkel"] .hero__film::after{background:linear-gradient(180deg,rgba(21,29,28,.5) 0%,rgba(21,29,28,0) 46%)}
  .zahlen__reihe{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem}
  .zahlen__reihe>li:not(:first-child){padding-left:0;border-left:0}
  .zahlen__reihe>li:nth-child(even){padding-left:1.2rem;border-left:1px solid var(--linie)}
  .schwelle__bau{grid-template-columns:1fr;gap:1.6rem}
  .team__raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .team__raster{grid-template-columns:repeat(2,1fr);gap:1.2rem .9rem}
  .team figcaption span{min-height:calc(3 * 1.42em)}
  .band figcaption p{font-size:1.15rem}
}