/* mypacing — components.css
 * Zentrale, wiederverwendbare Komponenten (Navigation/Footer-"tshell", Buttons). Ersetzt
 * den bislang auf ~90 Seiten einzeln kopierten <style id="tshell"> Block, der bereits
 * leicht auseinandergelaufen ist (ältere Seiten: schlichter dunkler CTA-Button; V5-Seiten
 * seit 03.08.2026: Gradient-CTA). Diese Datei macht die V5-Variante (Gradient) zum
 * einheitlichen Standard für ALLE Seiten. Setzt design-tokens.css voraus (nutzt dessen
 * Variablen), muss also NACH design-tokens.css geladen werden.
 *
 * nav.js baut Navigation/Footer weiterhin zur Laufzeit als DOM neu auf (s. modern.css-
 * Kommentar) und bringt für DIESEN Teil seinen eigenen injizierten Stil mit — diese Datei
 * betrifft nur das statische .tnav/.tfoot-Markup, das ohne JavaScript sichtbar bleibt
 * (progressive enhancement / noscript-Fall) sowie Seiten, die nav.js (noch) nicht laden.
 */

.tnav{position:sticky;top:0;z-index:60;background:rgba(251,247,241,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line, #EAE2D2);font-family:Inter,system-ui,sans-serif}
.tnav-in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.tnav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto}
.tnav-logo b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;letter-spacing:-.02em;
  color:var(--ink, #20302B)}
.tnav-links{display:flex;align-items:center;gap:20px}
.tnav-links a{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--mut, #71776F);
  text-decoration:none;white-space:nowrap}
.tnav-links a:hover,.tnav-links a.on{color:var(--deep, #123B31)}
.tnav-cta{background:linear-gradient(120deg,var(--deep, #123B31),var(--mint, #79D6BC));
  color:#0B211B!important;padding:9px 16px;border-radius:12px;font-weight:700;
  box-shadow:0 8px 18px -6px rgba(121,214,188,.45)}
.tnav-cta:hover{filter:brightness(1.03)}
.tnav-act{display:flex;align-items:center;gap:10px}
.tnav-burger{display:none;background:none;border:none;font-size:23px;line-height:1;
  color:var(--ink, #20302B);cursor:pointer;padding:4px 6px}
@media(max-width:720px){
 .tnav-burger{display:block}
 .tnav-links{display:none;position:absolute;top:50px;right:14px;flex-direction:column;
   align-items:flex-start;gap:15px;background:var(--surface, #fff);
   border:1px solid var(--line, #EAE2D2);border-radius:16px;padding:16px 20px;
   box-shadow:0 12px 34px -14px rgba(18,59,49,.22);z-index:70}
 .tnav-links.open{display:flex}
}
.tabs{top:50px}
.tfoot{border-top:1px solid var(--line, #EAE2D2);margin-top:44px;background:var(--bg, #FBF7F1);
  font-family:Inter,system-ui,sans-serif}
.tfoot-in{max-width:1080px;margin:0 auto;padding:24px 20px 40px;color:var(--mut, #71776F);
  font-size:12.5px;line-height:1.7}
.tfoot-links{display:flex;flex-wrap:wrap;gap:16px 18px;margin-bottom:12px}
.tfoot-links a{color:var(--deep, #123B31);text-decoration:none;font-family:'Inter',sans-serif;
  font-weight:700;font-size:13px}
.tfoot-links a:hover{text-decoration:underline}
.tfoot b{color:var(--ink, #20302B)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--good, #2E7D6B);outline-offset:2px}

/* -- Buttons: einheitlicher Gradient-Stil (bisher je nach Seite mal flach, mal Gradient) -- */
.btn{font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;border:none;border-radius:14px;
  padding:12px 22px;cursor:pointer;background:linear-gradient(120deg,var(--deep),var(--mint));
  color:#0B211B;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .15s;box-shadow:0 10px 22px -8px rgba(121,214,188,.45)}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(121,214,188,.55)}
.btn.big{padding:16px 30px;font-size:16px}
.btn.ghost{background:#fff;color:var(--deep);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--good);color:var(--good);background:#fff;transform:none}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.ghost { background:#1C2620; color:#5FC7A6; } }
:root[data-theme="dark"] .btn.ghost { background:#1C2620; color:#5FC7A6; }

/* -- Karten: einheitliches Grundmuster, seitenspezifische Regeln bleiben additiv -- */
.card,.list,.step,.pcard{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}