/* ===========================================================================
   KONZEPT "SOUL" — Unterseiten (Trauerkaffee, Impressum, Datenschutz)
   Baut auf _soul.css auf: dieselben Variablen, dieselbe Marke, derselbe
   Fuss, dieselbe schwebende Leiste. Hier stehen nur die Inhaltsformen,
   die es auf der Startseite nicht gibt: Fliesstext, Listen, Begriffs-
   paare, Preistabelle, Aufklappfragen.

   Grundgedanke wie oben: warmes Feld, weisse Blaetter mit grossen Radien,
   Anton fuer Ueberschriften, Poppins fuer den Text.
   =========================================================================== */

/* ---------- Seitenkopf ---------------------------------------------------- */
/* Kein Vollbild und keine gezeichnete Wand: Unterseiten werden gelesen,
   nicht bestaunt. Der Kopf traegt nur Zeile, Titel und Einstieg. */
.thero{
  padding:calc(clamp(96px,11vw,150px) + 26px) 0 clamp(30px,4.4vw,58px);
  background:var(--sand);
}
.thero .kick{
  margin:0 0 clamp(14px,1.8vw,22px);display:flex;align-items:center;gap:13px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--stumm);
}
.thero .kick i{display:block;width:clamp(26px,3vw,44px);height:1px;background:var(--linie);flex:none}
.thero h1{
  margin:0;font-family:var(--anton);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,7.4vw,92px);line-height:.96;letter-spacing:.005em;
}
.thero .lead{
  margin:clamp(20px,2.6vw,32px) 0 0;max-width:60ch;
  font-size:clamp(16.5px,1.32vw,19.5px);line-height:1.6;
}
.thero .ruf{
  margin:clamp(20px,2.4vw,30px) 0 0;display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;
  background:var(--papier);border-radius:var(--pille);padding:13px 24px;
  font-size:14.5px;box-shadow:0 3px 18px rgba(18,18,17,.09);
}
.thero .ruf a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--linie)}
.thero .ruf a:hover{border-bottom-color:var(--tinte)}

/* ---------- Blaetter ------------------------------------------------------ */
.tsec{padding:clamp(10px,1.4vw,18px) 0}
.tsec > .wrap{
  background:var(--papier);border-radius:var(--radius);
  padding:clamp(28px,3.8vw,58px) clamp(22px,3.4vw,54px);
  max-width:1360px;
}
/* Der Zugangshinweis ist die eine Stelle, die auffallen soll. */
.tsec.warn > .wrap{background:var(--tinte);color:var(--sand-hell)}
.tsec.warn h2{color:var(--sand-hell)}
.tsec.warn a{color:var(--sand-hell)}
/* Der Fachteil setzt sich ruhig ab, ohne zu schreien. */
.tsec.fach > .wrap{background:var(--sand-hell)}

.tsec h2{
  margin:0 0 clamp(16px,2vw,26px);font-family:var(--anton);font-weight:400;
  text-transform:uppercase;font-size:clamp(23px,2.9vw,40px);line-height:1.06;
  letter-spacing:.008em;
}
.tsec p{margin:0 0 15px;max-width:74ch;font-size:15.8px;line-height:1.68}
.tsec p:last-child{margin-bottom:0}
.tsec a{color:inherit}
.tsec b{font-weight:500}
.tsec .klein{font-size:13.4px;color:var(--stumm);max-width:74ch}
.tsec.warn .klein{color:rgba(244,241,235,.72)}
.tsec .tr{font-size:15.8px}

/* ---------- Listen -------------------------------------------------------- */
.tlist{list-style:none;margin:0 0 15px;padding:0;max-width:74ch}
.tlist li{
  position:relative;padding-left:26px;margin:0 0 11px;font-size:15.8px;line-height:1.62;
}
.tlist li::before{
  content:'';position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--tinte);opacity:.42;
}
.tsec.warn .tlist li::before{background:var(--sand-hell)}

.tsteps{list-style:none;counter-reset:s;margin:0 0 15px;padding:0;max-width:74ch}
.tsteps li{
  counter-increment:s;position:relative;padding-left:46px;margin:0 0 15px;
  font-size:15.8px;line-height:1.62;min-height:30px;
}
.tsteps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--tinte);color:var(--sand-hell);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--anton);font-size:14px;line-height:1;
}

/* ---------- Begriffspaare ------------------------------------------------- */
.tdl{margin:0 0 4px;padding:0}
.tdl > div{
  display:grid;grid-template-columns:minmax(150px,.28fr) 1fr;gap:clamp(14px,2.4vw,38px);
  padding:16px 0;border-top:1px solid var(--linie);
}
.tdl > div:first-child{border-top:0;padding-top:4px}
.tsec.warn .tdl > div{border-top-color:rgba(244,241,235,.18)}
.tdl dt{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stumm);
  font-weight:500;padding-top:4px;
}
.tsec.warn .tdl dt{color:rgba(244,241,235,.62)}
.tdl dd{margin:0;font-size:15.8px;line-height:1.62;max-width:70ch}
.tdl dd .klein{display:block;margin-top:5px}

/* ---------- Preistabelle -------------------------------------------------- */
.ttab{
  width:100%;max-width:640px;border-collapse:collapse;margin:0 0 20px;
  font-variant-numeric:tabular-nums;
}
.ttab th,.ttab td{padding:15px 0;border-top:1px solid var(--linie);text-align:left;font-weight:400}
.ttab tr:first-child th,.ttab tr:first-child td{border-top:0}
.ttab th{font-size:15.8px}
.ttab td{
  text-align:right;font-family:var(--anton);font-size:clamp(20px,2.2vw,28px);line-height:1;
}
.ttab td b{font-weight:400}

/* ---------- Aufklappfragen ------------------------------------------------ */
.tfaq{border-top:1px solid var(--linie)}
.tfaq details{border-bottom:1px solid var(--linie)}
.tfaq summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:16.2px;line-height:1.44;font-weight:500;
}
.tfaq summary::-webkit-details-marker{display:none}
.tfaq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--tinte);border-bottom:1.6px solid var(--tinte);
  transform:translateY(-70%) rotate(45deg);transition:transform .26s ease;
}
.tfaq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.tfaq summary:hover{opacity:.72}
.tfaq details > div{padding:0 44px 22px 0}
.tfaq details > div p{margin:0;font-size:15.4px;color:#3B3A36}

/* ---------- Schlussruf ---------------------------------------------------- */
.tcta{padding:clamp(10px,1.4vw,18px) 0 clamp(26px,3.4vw,44px)}
.tcta > .wrap{
  background:var(--tinte);color:var(--sand-hell);border-radius:var(--radius);
  padding:clamp(34px,4.6vw,66px) clamp(22px,3.4vw,54px);text-align:center;
}
.tcta .ctabig{
  margin:0 0 6px;font-family:var(--anton);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px);line-height:1;
}
.tcta p{margin:0 auto 14px;max-width:56ch;font-size:15.4px;color:rgba(244,241,235,.82)}
.tcta p:last-child{margin-bottom:0}
.tcta .telbig{
  display:inline-block;margin:6px 0 16px;font-family:var(--anton);
  font-size:clamp(34px,6.2vw,76px);line-height:1;text-decoration:none;
  font-variant-numeric:tabular-nums;color:var(--sand-hell);
}
.tcta .telbig:hover{opacity:.84}
.tcta a{color:var(--sand-hell)}

/* ---------- Hinweiskasten (Datenschutz) ----------------------------------- */
.entwurfhinweis{
  margin:0 0 18px;padding:15px 20px;border-radius:18px;
  background:var(--sand-hell);border:1px solid var(--linie);
  font-size:14.2px;color:#3B3A36;
}

/* ---------- schmal -------------------------------------------------------- */
@media(max-width:720px){
  .thero{padding-top:calc(clamp(80px,20vw,110px) + 22px)}
  .tdl > div{grid-template-columns:1fr;gap:6px}
  .tdl dt{padding-top:0}
  .ttab td{text-align:left}
  .tsec > .wrap{padding:24px 20px}
  .thero .ruf{padding:12px 18px;font-size:14px}
}