/* =========================================================
   Steuertipps-Liste – eigenständig, alle Klassen mit "stl-"
   Farben = Markenfarben Scheid Holten (#2F5D9B / #284F84)
   Schriften = auf der Homepage lokal eingebundene Source Serif 4 / Source Sans 3
   ========================================================= */
.stl{
  --stl-blue:#2F5D9B; --stl-blue-deep:#284F84; --stl-blue-soft:#B6C6DC;
  --stl-bg:#F5F7FA; --stl-card:#FFFFFF; --stl-ink:#1E2833; --stl-muted:#5A6573;
  --stl-line:#DCE3EC; --stl-ex:#EEF3F9; --stl-warn:#8A5A00; --stl-warn-bg:#FFF6E0;
  font-family:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--stl-ink); line-height:1.6; background:var(--stl-bg);
}
body{margin:0;background:#F5F7FA}
.stl *{box-sizing:border-box}
.stl-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.stl h1,.stl h2,.stl h3{font-family:"Source Serif 4","Source Serif Pro",Georgia,serif;color:var(--stl-ink);line-height:1.25}

/* Hero */
.stl-hero{background:linear-gradient(135deg,var(--stl-blue-deep),var(--stl-blue));color:#fff;padding:64px 0 56px}
.stl-eyebrow{display:inline-block;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--stl-blue-soft);margin-bottom:10px}
.stl-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 14px}
.stl-hero p{max-width:760px;font-size:1.12rem;margin:0 0 8px;color:#E7EEF7}
.stl-stand{font-size:.92rem;color:var(--stl-blue-soft)!important;margin-top:14px!important}

/* Legende */
.stl-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px;position:relative}
.stl-legend div{background:#fff;border:1px solid var(--stl-line);border-radius:12px;padding:16px 18px;box-shadow:0 6px 18px rgba(40,79,132,.08)}
.stl-legend strong{display:block;color:var(--stl-blue-deep);font-size:1rem;margin-bottom:4px}
.stl-legend span{font-size:.92rem;color:var(--stl-muted)}

/* Suche + Navigation */
.stl-tools{position:sticky;top:0;z-index:20;background:var(--stl-bg);padding:14px 0 12px;border-bottom:1px solid var(--stl-line)}
.stl-search{width:100%;font:inherit;font-size:1.05rem;padding:12px 16px 12px 44px;border:1.5px solid var(--stl-line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%232F5D9B' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") no-repeat 14px center}
.stl-search:focus{outline:none;border-color:var(--stl-blue)}
.stl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;padding-top:10px}
.stl-chips a{flex:0 0 auto;text-decoration:none;font-size:.92rem;font-weight:600;color:var(--stl-blue-deep);background:#fff;border:1px solid var(--stl-line);border-radius:999px;padding:6px 14px;white-space:nowrap}
.stl-chips a:hover{background:var(--stl-blue);color:#fff;border-color:var(--stl-blue)}
.stl-noresult{display:none;padding:28px 0;color:var(--stl-muted)}

/* Kategorien (Akkordeon Ebene 1) */
.stl-list-wrap{padding:28px 0 0}
details.stl-cat{background:#fff;border:1px solid var(--stl-line);border-radius:12px;margin-bottom:14px;scroll-margin-top:150px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
details.stl-cat[open]{border-color:var(--stl-blue-soft);box-shadow:0 8px 24px rgba(40,79,132,.10)}
.stl summary{list-style:none;cursor:pointer}
.stl summary::-webkit-details-marker{display:none}
.stl-cat-head{display:flex;align-items:center;gap:16px;padding:16px 20px;transition:background .2s}
.stl-cat-head:hover{background:var(--stl-ex)}
.stl-cat-head:focus-visible,.stl-item>summary:focus-visible{outline:2px solid var(--stl-blue);outline-offset:-2px}
.stl-icon{flex:0 0 52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--stl-blue-soft);display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .25s}
.stl-icon svg{width:28px;height:28px;stroke:var(--stl-blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.stl-cat-head:hover .stl-icon,details.stl-cat[open]>.stl-cat-head .stl-icon{background:var(--stl-blue);border-color:var(--stl-blue);transform:scale(1.05)}
.stl-cat-head:hover .stl-icon svg,details.stl-cat[open]>.stl-cat-head .stl-icon svg{stroke:#fff}
.stl-cat-title{flex:1;display:flex;flex-direction:column}
.stl-cat h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0;transition:color .2s}
.stl-cat-head:hover h2{color:var(--stl-blue)}
.stl-count{font-size:.85rem;color:var(--stl-muted);font-weight:600}
.stl-chev{flex:0 0 28px;width:28px;height:28px;fill:none;stroke:var(--stl-blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
details[open]>summary>.stl-chev{transform:rotate(180deg)}
.stl-cat-head:hover>.stl-chev{transform:translateY(2px)}
details.stl-cat[open]>.stl-cat-head:hover>.stl-chev{transform:rotate(180deg) translateY(2px)}
.stl-cat-body{padding:4px 20px 20px 88px;animation:stl-in .3s ease}
.stl-cat-intro{color:var(--stl-muted);margin:0 0 14px;max-width:820px}
.stl-list{display:flex;flex-direction:column;gap:10px}

/* Unterpunkte (Akkordeon Ebene 2) */
details.stl-item{border:1px solid var(--stl-line);border-left:4px solid var(--stl-blue-soft);border-radius:10px;background:#FBFCFE;transition:border-color .2s,background .2s}
details.stl-item[open]{border-left-color:var(--stl-blue);background:#fff}
.stl-item>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;transition:background .2s}
.stl-item>summary:hover{background:var(--stl-ex)}
details.stl-item:hover{border-left-color:var(--stl-blue)}
.stl-item-head{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.stl-item h3{font-size:1.08rem;margin:0;transition:color .2s}
.stl-item>summary:hover h3{color:var(--stl-blue)}
.stl-item .stl-chev{flex-basis:22px;width:22px;height:22px}
.stl-tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--stl-blue-deep);background:var(--stl-ex);border-radius:6px;padding:2px 9px}
.stl-item>summary:hover .stl-tag{background:#fff}
.stl-item-body{padding:2px 18px 16px;animation:stl-in .25s ease}
.stl-item-body p{margin:0 0 10px;font-size:.98rem}
.stl-item-body ul{margin:0 0 10px;padding-left:20px;font-size:.96rem}
.stl-item-body li{margin-bottom:2px}
.stl-ex{background:var(--stl-ex);border-radius:8px;padding:10px 14px;font-size:.94rem}
.stl-ex b{color:var(--stl-blue-deep)}
.stl-hint{font-size:.88rem;color:var(--stl-warn);background:var(--stl-warn-bg);border-radius:6px;padding:6px 10px;margin:0 0 10px}
.stl-new{font-size:.72rem;font-weight:700;color:#fff;background:var(--stl-blue);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.stl-hidden{display:none!important}
.stl-ctl{display:flex;gap:8px;padding-top:10px}
.stl-ctl button{font:inherit;font-size:.88rem;font-weight:600;color:var(--stl-blue-deep);background:transparent;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.stl-ctl button:hover{color:var(--stl-blue)}
@keyframes stl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stl *{animation:none!important;transition:none!important}}

/* Abschluss */
.stl-cta{margin:48px 0 0;background:linear-gradient(135deg,var(--stl-blue-deep),var(--stl-blue));color:#fff;border-radius:14px;padding:32px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stl-cta h2{color:#fff;margin:0 0 6px;font-size:1.5rem}
.stl-cta p{margin:0;color:#E7EEF7;max-width:620px}
.stl-btn{display:inline-block;background:#fff;color:var(--stl-blue-deep);font-weight:700;text-decoration:none;border-radius:8px;padding:12px 22px;white-space:nowrap}
.stl-btn:hover{background:var(--stl-blue-soft)}
.stl-disclaimer{font-size:.86rem;color:var(--stl-muted);padding:24px 0 56px;max-width:900px}

@media (max-width:900px){.stl-legend{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .stl-wrap{padding:0 16px}
  .stl-grid{grid-template-columns:1fr}
  .stl-legend{grid-template-columns:1fr;margin-top:0}
  .stl-cat-body{padding:4px 14px 16px}
  .stl-cat-head{padding:14px;gap:12px}
  .stl-icon{flex-basis:44px;height:44px}
  .stl-item>summary{padding:12px}
  .stl-item-body{padding:2px 14px 14px}
  .stl-hero{padding:44px 0 48px}
  .stl-cta{padding:24px}
}
/* Risikohinweis-Box unter dem Hero */
.stl-riskbox{background:#fff;border:1.5px solid var(--stl-warn-bg);border-left:5px solid var(--stl-warn);border-radius:12px;padding:20px 24px;margin:0 0 28px;box-shadow:0 6px 18px rgba(40,79,132,.08);display:flex;gap:16px;align-items:flex-start}
.stl-riskbox svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--stl-warn);fill:none;stroke-width:1.8;margin-top:2px}
.stl-riskbox strong{display:block;color:var(--stl-warn);margin-bottom:4px;font-size:1.02rem}
.stl-riskbox p{margin:0;color:var(--stl-muted);font-size:.96rem}
@media (max-width:700px){.stl-riskbox{flex-direction:column;gap:8px;padding:16px}}
.stl-infobox{background:#fff;border:1.5px solid var(--stl-line);border-left:5px solid var(--stl-blue);border-radius:12px;padding:20px 24px;margin:24px 0 0;box-shadow:0 6px 18px rgba(40,79,132,.08);display:flex;gap:16px;align-items:flex-start;position:relative;z-index:1}
.stl-infobox svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--stl-blue);fill:none;stroke-width:1.8;margin-top:2px}
.stl-infobox strong{display:block;color:var(--stl-blue-deep);margin-bottom:4px;font-size:1.02rem}
.stl-infobox p{margin:0;color:var(--stl-muted);font-size:.96rem}
@media (max-width:700px){.stl-infobox{flex-direction:column;gap:8px;padding:16px}}


/* Ansicht-Schieberegler */
.stl-switchwrap{display:flex;justify-content:center;margin:22px 0;position:relative;padding:0 16px}
.stl-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr 1fr;background:#fff;border:1px solid var(--stl-line);border-radius:999px;padding:5px;box-shadow:0 8px 22px rgba(40,79,132,.12);max-width:100%}
.stl-switch-opt{position:relative;z-index:2;border:0;background:transparent;font:inherit;font-size:.94rem;font-weight:700;padding:12px 20px;border-radius:999px;cursor:pointer;color:var(--stl-blue-deep);transition:color .3s;white-space:nowrap}
.stl-switch-opt.active{color:#fff}
.stl-switch-opt:hover:not(.active){color:var(--stl-blue)}
.stl-switch-thumb{position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc(33.333% - 3.333px);background:linear-gradient(135deg,var(--stl-blue-deep),var(--stl-blue));border-radius:999px;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:1}
.stl-switch[data-active="modelle"] .stl-switch-thumb{transform:translateX(100%)}
.stl-switch[data-active="benefits"] .stl-switch-thumb{transform:translateX(200%)}
.stl-globalsearch{margin:-30px auto 22px;position:relative;z-index:5;max-width:640px}
.stl-switch-count{display:inline-block;margin-left:7px;min-width:20px;padding:0 6px;border-radius:999px;font-size:.74rem;font-weight:800;line-height:19px;text-align:center;vertical-align:middle;background:var(--stl-ex);color:var(--stl-blue-deep)}
.stl-switch-opt.active .stl-switch-count{background:rgba(255,255,255,.32);color:#fff}
.stl-view[hidden]{display:none!important}
.stl [hidden]{display:none!important}
nav.stl-chips[hidden]{display:none!important}
@media (max-width:640px){
  .stl-switchwrap{width:100%}
  .stl-switch{grid-template-columns:1fr;width:100%}
  .stl-switch-opt{font-size:.92rem;padding:13px 16px;text-align:center}
  .stl-switch-thumb{left:5px;top:5px;width:calc(100% - 10px);height:calc(33.333% - 3.333px);transform:none}
  .stl-switch[data-active="modelle"] .stl-switch-thumb{transform:translateY(100%)}
  .stl-switch[data-active="benefits"] .stl-switch-thumb{transform:translateY(200%)}
}