/* =====================================================================
   Timean Inhaltsseiten (Design B): Ratgeber, Ratgeber-Übersicht und
   Rechtsseiten. Baut auf css/marke.css auf und nutzt nur deren Tokens,
   dazu ein paar eigene Tokens für Hinweis-Kästen (hell und dunkel).
   ===================================================================== */

:root{
  --warn-grund:#fffbeb; --warn-rand:rgba(217,119,6,.28); --warn-text:#92400e;
  --info-grund:#f0f9ff; --info-rand:rgba(2,132,199,.25); --info-text:#075985;
  --schlecht-grund:rgba(220,38,38,.08);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html.dark{
  --warn-grund:rgba(245,158,11,.10); --warn-rand:rgba(251,191,36,.28); --warn-text:#fcd34d;
  --info-grund:rgba(14,165,233,.10); --info-rand:rgba(56,189,248,.28); --info-text:#7dd3fc;
  --schlecht-grund:rgba(248,113,113,.12);
}

/* ---- Artikel-Gerüst ---- */
.artikel{max-width:820px;margin:0 auto;padding-top:56px;padding-bottom:110px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:640px){.artikel{padding-top:36px;padding-bottom:80px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.artikel > .ueber{margin-top:26px}
.artikel > .ueber:first-child{margin-top:0}

.brotkrumen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.brotkrumen a{text-decoration:none;transition:color .15s}
.brotkrumen a:hover{color:var(--text)}
.brotkrumen .aktuell{color:var(--text-2)}
.brotkrumen.mitte{justify-content:center}

.artikel-titel{margin-top:16px;font-size:clamp(34px,5.2vw,56px);letter-spacing:-.045em;line-height:1.02}
.artikel-meta{margin:16px 0 0;font-size:14px;color:var(--text-3)}

/* ---- Fliesstext ---- */
.prosa{margin-top:36px;font-size:16.5px;line-height:1.7;color:var(--text-2)}
.prosa > :first-child{margin-top:0}
.prosa p{margin:14px 0 0}
.prosa h2{margin-top:56px;font-size:clamp(26px,3vw,32px);letter-spacing:-.035em;line-height:1.12}
.prosa h3{margin-top:32px;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.prosa h2 + p,.prosa h3 + p{margin-top:12px}
.prosa ul,.prosa ol{margin:14px 0 0;padding-left:22px;display:grid;gap:7px}
.prosa li::marker{color:var(--gruen-hell)}
.prosa strong{color:var(--text);font-weight:600}
.prosa a:not(.knopf),.link{color:var(--gruen-hell);font-weight:500;text-decoration:underline;text-decoration-color:var(--gruen-rand);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s,color .15s}
.prosa a:not(.knopf):hover,.link:hover{text-decoration-color:currentColor}

/* Tabellen im Fliesstext und in der Übersicht */
.prosa table,.tabelle{width:100%;margin-top:20px;border-collapse:collapse;text-align:left;font-size:14.5px;line-height:1.5;font-variant-numeric:tabular-nums}
.tabelle{margin-top:0}
.prosa th,.tabelle th{padding:12px 16px 10px 0;border-bottom:1px solid var(--linie-hell);color:var(--text);font-weight:600;vertical-align:bottom}
.prosa td,.tabelle td{padding:10px 16px 10px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.prosa th:last-child,.prosa td:last-child,.tabelle th:last-child,.tabelle td:last-child{padding-right:0}
.prosa tbody tr:last-child td,.tabelle tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){.prosa table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.tabelle-huelle{margin-top:24px;overflow-x:auto;border-radius:18px;padding:6px 20px;background:linear-gradient(180deg,var(--glas-a),var(--glas-b));box-shadow:0 0 0 1px var(--linie-hell) inset}
.tabelle.breit{min-width:34rem}
.leise-inline{color:var(--text-3)}

/* Formel- und Rechenzeilen */
.formel{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--flaeche-tint);box-shadow:0 0 0 1px var(--linie) inset;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--text);overflow-x:auto}
.prosa .formel{margin-top:16px}
.formel.mitte{text-align:center;font-family:var(--sans);font-weight:600}

/* ---- Hinweis-Kästen ---- */
.hinweis{margin-top:28px;padding:16px 20px;border-radius:16px;font-size:15px;line-height:1.6}
.hinweis p{margin:0;color:inherit}
.hinweis strong{color:inherit;font-weight:700}
.hinweis a,.prosa .hinweis a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.hinweis-warn{background:var(--warn-grund);box-shadow:0 0 0 1px var(--warn-rand) inset;color:var(--warn-text)}
.hinweis-info{background:var(--info-grund);box-shadow:0 0 0 1px var(--info-rand) inset;color:var(--info-text)}

/* ---- Rechner ---- */
.rechner{position:relative;margin-top:36px;padding:26px;border-radius:var(--radius);background:linear-gradient(180deg,var(--glas-a),var(--glas-b));box-shadow:0 0 0 1px var(--linie-hell) inset,0 30px 70px -48px rgba(6,46,32,.35)}
html.dark .rechner{box-shadow:0 0 0 1px var(--linie-hell) inset,0 30px 80px -50px var(--gruen-glut)}
.rechner::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--glas-kante),transparent)}
@media (max-width:640px){.rechner{padding:20px}}
.rechner-titel,.rechner .rechner-titel{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-hell)}
.felder{margin-top:18px;display:grid;gap:16px}
@media (min-width:640px){.felder{grid-template-columns:repeat(2,minmax(0,1fr))}.felder.drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feld{display:block;min-width:0}
.feld-name{font-size:14px;font-weight:500;color:var(--text)}
.eingabe,.eingabe-gruppe{margin-top:6px;width:100%;border-radius:12px;border:1px solid var(--linie-hell);background:var(--flaeche-2);color:var(--text);transition:border-color .15s,box-shadow .15s}
.eingabe{display:block;padding:10px 12px;font:600 15px/1.3 var(--sans)}
.eingabe.zahl{text-align:right}
.eingabe:focus,.eingabe-gruppe:focus-within{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-weich)}
.eingabe-gruppe{display:flex;align-items:center;padding:0 12px}
.einheit{font-size:14px;color:var(--text-3);flex:none}
.eingabe-roh{width:100%;min-width:0;border:0;background:transparent;padding:10px 8px;text-align:right;font:600 15px/1.3 var(--sans);color:var(--text);outline:none}
.eingabe-roh::-webkit-inner-spin-button{opacity:.5}

.ergebnis{margin:20px 0 0;border-top:1px solid var(--linie-hell);font-variant-numeric:tabular-nums}
.ergebnis .zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie)}
.ergebnis .zeile:last-child{border-bottom:0}
.ergebnis dt{font-size:14.5px;color:var(--text-2)}
.ergebnis dd{margin:0;font-size:14.5px;font-weight:600;color:var(--text);text-align:right}
.ergebnis dt.haupt{color:var(--text);font-weight:600}
.ergebnis dd.haupt{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--gruen-hell)}
.ergebnis dd.haupt.schlecht{color:var(--rot)}
.urteil,.rechner .urteil{margin:16px 0 0;padding:12px 16px;border-radius:12px;font-size:14.5px;font-weight:500}
.urteil.gut{background:var(--gruen-weich);color:var(--gruen-hell);box-shadow:0 0 0 1px var(--gruen-rand) inset}
.urteil.schlecht{background:var(--schlecht-grund);color:var(--rot)}
.rechner-notiz,.rechner .rechner-notiz{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--text-3)}
.rechner-notiz strong{color:var(--text-2);font-weight:600}
.blass{opacity:.5}

/* ---- Aufruf am Artikelende ---- */
.cta-kasten{position:relative;overflow:hidden;margin-top:44px;padding:34px 24px;border-radius:var(--radius);text-align:center;background:linear-gradient(180deg,var(--glas-a),var(--glas-b));box-shadow:0 0 0 1px var(--linie-hell) inset}
.cta-kasten::before{content:"";position:absolute;left:50%;top:-140px;width:520px;height:260px;transform:translateX(-50%);border-radius:50%;background:var(--gruen-glut);filter:blur(70px);opacity:var(--glut-staerke);pointer-events:none}
.cta-kasten > *{position:relative}
.cta-titel,.cta-kasten .cta-titel{margin:0;font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--text)}
.cta-text,.cta-kasten .cta-text{max-width:540px;margin:10px auto 0;font-size:15px;line-height:1.6;color:var(--text-2)}
.cta-knoepfe{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
@media (max-width:480px){.cta-knoepfe{flex-direction:column;align-items:stretch}}

/* ---- Häufige Fragen ---- */
.faq{margin-top:64px}
.faq-titel{font-size:clamp(26px,3vw,32px);letter-spacing:-.035em;line-height:1.12}
.faq-liste{margin-top:20px;display:grid;gap:10px}
.faq-eintrag{border-radius:16px;background:var(--flaeche);box-shadow:0 0 0 1px var(--linie-hell) inset}
.faq-frage{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:0;background:transparent;text-align:left;font:500 16px/1.45 var(--sans);color:var(--text);cursor:pointer;border-radius:16px}
.faq-frage:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:2px}
.faq-plus{flex:none;width:20px;height:20px;color:var(--text-3);transition:transform .2s,color .2s}
.faq-plus.offen{transform:rotate(45deg);color:var(--gruen-hell)}
.faq-antwort{padding:0 20px 18px;font-size:15px;line-height:1.65;color:var(--text-2)}
.weiterlesen{margin:44px 0 0;font-size:15px;color:var(--text-3)}

/* ---- Ratgeber-Übersicht ---- */
.hub-kopf{position:relative;overflow:hidden}
.hub-glut{position:absolute;left:50%;top:-260px;width:760px;height:480px;transform:translateX(-50%);border-radius:50%;background:var(--gruen-glut);filter:blur(100px);opacity:var(--glut-staerke);pointer-events:none}
.hub-kopf-innen{position:relative;max-width:860px;text-align:center;padding-top:80px;padding-bottom:28px}
@media (max-width:640px){.hub-kopf-innen{padding-top:48px}}
.hub-kopf-innen .ueber{margin-top:26px}
.hub-h1{margin-top:18px;font-size:clamp(40px,6.6vw,80px);letter-spacing:-.05em;line-height:.98}
.hub-lead{margin:24px auto 0}
.hub-inhalt{padding-top:36px;padding-bottom:120px}
.karten{display:grid;gap:16px}
@media (min-width:640px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.karte{display:flex;flex-direction:column;min-width:0;padding:26px;border-radius:var(--radius);text-decoration:none;color:var(--text);background:linear-gradient(180deg,var(--glas-a),var(--glas-b));box-shadow:0 0 0 1px var(--linie-hell) inset;transition:transform .2s,box-shadow .2s}
.karte:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--gruen-rand) inset,var(--glas-schatten)}
.karte:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:3px}
.karte-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--gruen-weich);color:var(--gruen-hell);box-shadow:0 0 0 1px var(--gruen-rand) inset}
.karte-symbol svg{width:20px;height:20px}
.karte-titel{margin-top:20px;font-size:21px;letter-spacing:-.025em;line-height:1.2}
.karte-text{flex:1;margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--text-2)}
.karte-mehr{margin-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--gruen-hell)}
.karte-mehr svg{width:16px;height:16px;transition:transform .15s}
.karte:hover .karte-mehr svg{transform:translateX(3px)}
.hub-abschnitt{margin-top:96px}
.hub-titel{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.04em;line-height:1.05}
.hub-text{max-width:680px;margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--text-2)}
.hub-notiz{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--text-3)}
.drei-spalten{margin-top:28px;display:grid;gap:28px}
@media (min-width:760px){.drei-spalten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kasten-titel{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.kasten-text{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--text-2)}
.hub-inhalt .cta-kasten{margin-top:72px;padding:44px 24px}
/* Beträge und Prozentwerte in Tabellen nicht umbrechen («CHF» und Zahl bleiben zusammen) */
.prosa td.zahl,.tabelle td.zahl{white-space:nowrap}