/* Klarfranken – Startseite (Richtung «Interactive Finance»).
   Ein Satz, ein Werkzeug im dunklen Ergebnisfeld, danach Listen und Tabellen statt Kartenwände.
   Wird nach site-main.css, site-polish.css und calc-bold.css geladen. */

/* ---------- Touch-Ziele ≥ 44 px auf der ganzen öffentlichen Seite ---------- */
.tab,.btn,.theme-btn{min-height:44px}
.theme-btn{width:44px;height:44px}
.link-btn{min-height:44px;padding:0 4px}
.faq-item summary{min-height:44px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}

/* PDF/Drucken nur, wenn ein Rechner offen ist */
#printBtn{display:none}
body[data-calc] #printBtn{display:inline-flex}

/* ---------- Hero mit Werkzeug ---------- */
.home-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(56px,9vw,104px) 0 8px}
.home-hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.02;letter-spacing:-.04em;font-weight:680;max-width:13ch}
.home-hero__copy p{margin-top:18px;max-width:40ch;color:var(--text-soft);font-size:clamp(16px,1.6vw,18px);line-height:1.5}

.ht{--surface:#0E1E33;--text:#FFFFFF;--text-soft:rgba(255,255,255,.72);--text-mute:rgba(255,255,255,.55);--track:rgba(255,255,255,.16);--border:rgba(255,255,255,.14);
  --field:rgba(255,255,255,.07);--field-border:rgba(255,255,255,.2);--field-focus-bg:rgba(255,255,255,.11);
  background:#0E1E33;color:var(--text);border-radius:20px;padding:clamp(18px,2.6vw,28px);box-shadow:0 24px 60px rgba(14,30,51,.22)}
html[data-theme="dark"] .ht{background:#081322;--surface:#081322;border:1px solid rgba(255,255,255,.1);box-shadow:none}

.ht-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.07);width:max-content;max-width:100%}
.ht-seg button{min-height:44px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--text-soft);font-size:14px;font-weight:600;transition:background .18s ease,color .18s ease}
.ht-seg button:hover{color:var(--text)}
.ht-seg button[aria-selected="true"]{background:#fff;color:#0E1E33}
.ht-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ht-panel{margin-top:22px}
.ht-panel[hidden]{display:none!important}
.ht .qc{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0}
.ht .qc::before{display:none}
.ht .qc-head{display:block;font-size:16px;color:var(--text-soft)}
.ht .qc-head b{color:var(--text)}
.ht .qc-big{color:#fff}
.ht .qc-dot{stroke:var(--surface)}
.ht .qc-x{color:var(--text-mute)}
.ht-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:2px}
.ht-link:hover{color:var(--accent)}

.ht-form{display:grid;gap:14px}
.ht-field{display:grid;gap:7px;font-size:13.5px;color:var(--text-soft)}
.ht-field input,.ht-field select{min-height:48px;width:100%;padding:0 14px;border-radius:10px;border:1px solid var(--field-border);background:var(--field);color:#fff;font:inherit;font-size:16px}
.ht-field select option{color:#0E1E33}
.ht-field input:focus,.ht-field select:focus{outline:none;border-color:var(--accent);background:var(--field-focus-bg);box-shadow:0 0 0 3px rgba(229,57,43,.25)}
.ht-form .btn{min-height:48px;width:max-content;padding-inline:22px;font-weight:650}
.ht-note{font-size:12.5px;line-height:1.5;color:var(--text-mute);max-width:52ch}
@media(min-width:620px){.ht-form{grid-template-columns:1fr 1fr}.ht-form .btn,.ht-note{grid-column:1/-1}}

@media(max-width:900px){.home-hero{grid-template-columns:1fr;padding-top:clamp(40px,10vw,72px)}}
@media(max-width:560px){.ht{border-radius:16px;margin-inline:-6px}.ht-seg{width:100%}.ht-seg button{flex:1;padding:0 8px}.ht-form .btn{width:100%}}

/* ---------- Abschnitte ---------- */
.home-sec{margin-top:clamp(56px,8vw,88px)}
.home-sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--text)}
.home-sec__head h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;font-weight:660}
.home-sec__head a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-soft);font-size:14px}
.home-sec__head a:hover{color:var(--accent)}

/* Rechner als Zeilen */
.calc-rows{list-style:none;margin:0;padding:0}
.calc-rows a{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto 20px;gap:18px;align-items:center;min-height:60px;padding:10px 4px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .16s ease,padding .16s ease}
.calc-rows a::after{content:"→";color:var(--text-mute);transition:transform .18s ease,color .18s ease}
.calc-rows b{font-weight:620;font-size:16px}
.calc-rows span{color:var(--text-soft);font-size:14px}
.calc-rows em{font-style:normal;font-size:11.5px;font-weight:650;letter-spacing:.04em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:6px;padding:3px 7px;white-space:nowrap}
.calc-rows a:hover{background:var(--surface-2)}
.calc-rows a:hover::after{color:var(--accent);transform:translateX(3px)}
.calc-rows li:not(:has(em)) a{grid-template-columns:minmax(0,15rem) minmax(0,1fr) 20px}
@media(max-width:700px){
  .calc-rows a,.calc-rows li:not(:has(em)) a{grid-template-columns:minmax(0,1fr) auto 20px;gap:4px 12px;padding:12px 2px}
  .calc-rows b{grid-column:1;grid-row:1}
  .calc-rows span{grid-column:1;grid-row:2;font-size:13.5px}
  .calc-rows em{grid-column:2;grid-row:1/3}
  .calc-rows a::after{grid-column:3;grid-row:1/3}
  .calc-rows li:not(:has(em)) a::after{grid-column:2}
}

/* Wissen als Artikelliste */
#newsTiles.art-list{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
#newsTiles .tile.art{display:block;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;box-shadow:none!important;transform:none!important;overflow:visible}
#newsTiles .art-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;width:100%;min-height:64px;padding:14px 2px;border:0;background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer}
#newsTiles .art-cat{grid-column:1;font-size:12px;color:var(--accent);font-weight:600}
#newsTiles .art-t{grid-column:1;font-size:16px;font-weight:580;line-height:1.35}
#newsTiles .art-read{grid-column:2;grid-row:1/3;align-self:center;font-size:12.5px;color:var(--text-mute);white-space:nowrap}
#newsTiles .art-open:hover .art-t{color:var(--accent)}
@media(max-width:700px){#newsTiles.art-list{grid-template-columns:1fr}}

/* Eckwerte-Tabelle */
.eck-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.eck{width:100%;border-collapse:collapse;font-size:14.5px}
.eck th,.eck td{padding:12px 4px;border-bottom:1px solid var(--border);text-align:left;vertical-align:baseline}
.eck thead th{font-size:12.5px;font-weight:600;color:var(--text-mute)}
.eck td,.eck thead th.tnum{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.eck tbody th{font-weight:500}
.eck-src{margin-top:12px;font-size:12px;line-height:1.55;color:var(--text-mute);max-width:90ch}

/* Eine Beratungszeile */
.home-advice{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(56px,8vw,88px);padding:26px 0;border-block:1px solid var(--border)}
.home-advice h2{font-size:20px;font-weight:640;letter-spacing:-.01em}
.home-advice p{margin-top:6px;color:var(--text-soft);font-size:14.5px;max-width:62ch}
.home-advice a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.home-advice{flex-direction:column;align-items:flex-start}.home-advice .btn{width:100%}}

/* FAQ als Haarlinien-Liste */
#faq .faq-list{gap:0}
#faq .faq-item{border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;box-shadow:none}
#faq .faq-item summary{padding:16px 2px}
#faq .faq-a{padding:0 2px 18px;max-width:72ch}

/* ---------- Fusszeile ---------- */
.foot{margin-top:clamp(64px,9vw,104px);padding-top:40px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:28px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.foot-grid p{font-size:14px;color:var(--text-soft);line-height:1.55;max-width:48ch;margin-top:6px}
.foot-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;color:var(--text)!important;font-weight:620;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:2px}
.foot-h{font-size:17px;font-weight:620}
.foot-nl .nl-form{margin-top:14px}
.foot-nl .nl-form input[type=email]{min-height:48px}
.foot-nl .nl-form .btn{min-height:48px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}.foot-nl .nl-form .btn{width:100%}}

/* Rechner-Seite: Kopf ohne Laufschrift-Abstand */
#page-rechner .phead{padding-top:clamp(40px,7vw,72px)}

@media (prefers-reduced-motion:reduce){
  .calc-rows a,.calc-rows a::after,.ht-seg button{transition:none}
}
@media print{.ht-seg,.ht-form,.home-advice,.calc-rows{display:none!important}}

/* Nachträge: Quellen aufklappbar, restliche Touch-Ziele */
.eck-src summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--text-soft);font-size:13px}
.eck-src p{margin-top:4px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.kf-privacy-settings{min-height:44px}
.foot>.kf-privacy-settings{display:block;width:100%;max-width:var(--maxw);margin:-6px auto 0;padding:0 22px;text-align:left;font-size:12px;color:var(--text-soft)}
@media(max-width:560px){
  .eck{font-size:13px}
  .eck th,.eck td{padding:10px 3px}
  .eck td{white-space:normal;min-width:6.5em}
  .eck tbody th{padding-right:8px}
}

/* Schmale Bildschirme und breitere Systemschriften: Grid-Spalten dürfen schrumpfen, lange Wörter trennen */
@media(max-width:900px){.home-hero{grid-template-columns:minmax(0,1fr)}}
.home-hero>*{min-width:0}
.home-hero__copy p,.home-hero h1,.calc-rows span,.eck tbody th{hyphens:auto;overflow-wrap:break-word}
@media(max-width:420px){.ht-seg button{min-width:0;padding:0 6px;font-size:13.5px}}