/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.1
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* =====================================================
   Sparnia – Brand Styles  (Pass 1)
   Marke: Navy #13314F · Teal #1BB7A8
   ===================================================== */
:root{
  --spn-navy:#13314F;
  --spn-navy-dark:#0F2A43;
  --spn-teal:#1BB7A8;
  --spn-teal-dark:#0E8C80;
  --spn-teal-050:#E6F7F4;
  --spn-ink:#1E2D3D;
  --spn-muted:#5A6B7B;
  --spn-line:#E3E9ED;
  --spn-soft:#F2F6F7;
}

/* --- Überschriften & Text --- */
h1,h2,h3,h4,h5,h6{ color:var(--spn-navy); }
.et_pb_post_content,.entry-content{ color:var(--spn-ink); }
.et_pb_post_content h2,.entry-content h2{
  font-size:1.55em; line-height:1.3; margin:1.9rem 0 .7rem;
  padding-bottom:.3rem; border-bottom:2px solid var(--spn-teal-050);
}
.et_pb_post_content h3,.entry-content h3{ font-size:1.22em; margin:1.4rem 0 .5rem; }
.et_pb_post_content p,.entry-content p,
.et_pb_post_content li,.entry-content li{ line-height:1.75; }
.et_pb_post_content li,.entry-content li{ margin-bottom:.35em; }

/* --- Links --- */
a{ color:var(--spn-teal-dark); text-decoration:none; }
a:hover{ color:var(--spn-navy); text-decoration:underline; }

/* --- Tabellen (Vergleiche) --- */
.et_pb_text table,.entry-content table,.et_pb_post_content table{
  width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.97em;
  border:1px solid var(--spn-line); border-radius:10px; overflow:hidden;
}
.et_pb_text table th,.entry-content table th,.et_pb_post_content table th{
  background:var(--spn-navy); color:#fff; font-weight:500; text-align:left; padding:12px 14px;
}
.et_pb_text table td,.entry-content table td,.et_pb_post_content table td{
  padding:11px 14px; border-top:1px solid var(--spn-line); vertical-align:top;
}
.et_pb_text table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td,
.et_pb_post_content table tr:nth-child(even) td{ background:var(--spn-soft); }

/* --- Buttons (Divi + .spn-btn) --- */
.et_pb_button,a.spn-btn{
  background:var(--spn-navy)!important; color:#fff!important;
  border:2px solid var(--spn-navy)!important; border-radius:8px!important;
  padding:.65em 1.4em!important; font-weight:500!important; transition:.15s ease;
}
.et_pb_button:hover,a.spn-btn:hover{
  background:var(--spn-teal-dark)!important; border-color:var(--spn-teal-dark)!important;
  color:#fff!important; text-decoration:none;
}

/* --- "Das Wichtigste in Kürze"-Box (Wrapper-Klasse .spn-keybox) --- */
.spn-keybox{
  background:var(--spn-teal-050); border:1px solid #C5EAE4; border-left:5px solid var(--spn-teal);
  border-radius:10px; padding:1.1rem 1.3rem; margin:1.6rem 0;
}
.spn-keybox h2{ font-size:1.15em!important; margin:0 0 .6rem!important; border:0!important; padding:0!important; }
.spn-keybox ul{ margin:0; }

/* --- Hinweis/Transparenz-Box (.spn-hinweis) --- */
.spn-hinweis{
  background:var(--spn-soft); border-left:4px solid var(--spn-teal);
  padding:.9rem 1.1rem; margin:1.5rem 0; font-size:.95em; color:var(--spn-muted);
}

/* --- Inhaltsverzeichnis (.spn-toc) --- */
.spn-toc{
  background:#fff; border:1px solid var(--spn-line); border-radius:10px; padding:1rem 1.2rem; margin:1.4rem 0;
}
.spn-toc a{ color:var(--spn-navy); }

/* --- Header-Logo (Sparnia) --- */
#logo{ content:url("https://sparnia.de/wp-content/themes/divi-child/sparnia-logo.svg"); max-height:50px; width:auto; }

/* --- Startseite: Seitentitel ausblenden + volle Breite --- */
body.home h1.entry-title,
body.home .et_pb_title_container,
body.page-id-29 h1.entry-title{ display:none; }
body.home #sidebar{ display:none; }
body.home #left-area{ width:100%; padding-right:0; }

/* =====================================================
   Startseite (Homepage) – Hero, Karten, Empfehlung, Trust
   ===================================================== */
.spn-hero{ text-align:center; padding:1.2rem 1rem 2rem; }
.spn-hero h1{ font-size:2.4em; line-height:1.2; margin:0 0 .6rem; color:var(--spn-navy); }
.spn-hero p{ max-width:680px; margin:0 auto 1.3rem; color:var(--spn-muted); font-size:1.08em; line-height:1.7; }
.spn-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.spn-center{ text-align:center; }
.spn-muted{ color:var(--spn-muted); }

a.spn-btn.spn-btn-outline{ background:#fff!important; color:var(--spn-teal-dark)!important; border:2px solid var(--spn-teal-dark)!important; }
a.spn-btn.spn-btn-outline:hover{ background:var(--spn-teal-050)!important; color:var(--spn-navy)!important; }

.spn-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:1.4rem 0 2rem; }
.spn-card{ background:#fff; border:1px solid var(--spn-line); border-radius:12px; padding:22px; }
.spn-card h3{ font-size:1.15em; margin:.6rem 0 .3rem; color:var(--spn-navy); }
.spn-card p{ color:var(--spn-muted); font-size:.95em; margin:0 0 .7rem; line-height:1.6; }
.spn-card a{ font-weight:500; }
.spn-badge{ font-size:.62em; font-weight:500; color:var(--spn-teal-dark); background:var(--spn-teal-050); border-radius:20px; padding:2px 9px; vertical-align:middle; }

.spn-ico{ display:inline-block; width:34px; height:34px; background-position:center; background-repeat:no-repeat; background-size:contain; }
.spn-ico-wallet{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2'/><path d='M3 10h18'/><circle cx='17' cy='14' r='1.2'/></svg>"); }
.spn-ico-chart{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V5M4 19h16'/><path d='M8 15l3-4 3 2 4-6'/></svg>"); }
.spn-ico-cash{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='12' rx='2'/><path d='M3 10h18'/><circle cx='7' cy='14' r='1'/></svg>"); }
.spn-ico-shield{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/></svg>"); }
.spn-ico-book{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h11a2 2 0 012 2v14H7a2 2 0 01-2-2z'/><path d='M18 18H7'/></svg>"); }
.spn-ico-scale{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M6 8h12'/><path d='M8 8l-3 6h6z'/><path d='M16 8l3 6h-6z'/></svg>"); }
.spn-ico-eye{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>"); }

.spn-reco{ background:var(--spn-teal-050); border-radius:12px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:2rem 0; }
.spn-reco-text{ max-width:640px; }
.spn-reco-tag{ display:inline-block; font-size:.75em; font-weight:500; color:var(--spn-teal-dark); background:#fff; border-radius:20px; padding:3px 12px; margin-bottom:.5rem; }
.spn-reco h3{ margin:.2rem 0 .3rem; color:var(--spn-navy); font-size:1.3em; }
.spn-reco p{ margin:0; color:var(--spn-teal-dark); }

.spn-latest{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin:1.2rem 0 2rem; }
.spn-latest a{ display:block; background:#fff; border:1px solid var(--spn-line); border-left:4px solid var(--spn-teal); border-radius:0 8px 8px 0; padding:12px 16px; color:var(--spn-navy); font-weight:500; }
.spn-latest a:hover{ background:var(--spn-soft); text-decoration:none; }

.spn-trust{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; background:var(--spn-soft); border-radius:12px; padding:20px; margin:2rem 0; }
.spn-trust > div{ display:flex; align-items:center; gap:10px; color:var(--spn-navy); font-weight:500; }

/* Divi Sidebar-Trennlinie auf Vollbreite-Startseite entfernen */
body.home #main-content .container:before{ display:none !important; }

/* =====================================================
   Footer (Sparnia) – mehrspaltig, mit Logo & Disclaimer
   ===================================================== */
#main-footer{ background:var(--spn-navy); border-top:3px solid var(--spn-teal); }
#footer-widgets{ display:block !important; padding:54px 0 30px; }
#footer-widgets .container{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:34px; max-width:1120px;
}
#footer-widgets .footer-widget{ width:auto; margin:0; float:none; }
#footer-widgets .footer-widget .title{
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; margin:0 0 16px;
}
#footer-widgets .footer-widget p{ color:#9FB3C2; font-size:14px; line-height:1.7; margin:0; }
#footer-widgets .footer-widget ul{ list-style:none; padding:0; margin:0; }
#footer-widgets .footer-widget li{ margin-bottom:10px; }
#footer-widgets .footer-widget a{ color:#CDD9E3; font-size:14px; transition:color .15s ease; }
#footer-widgets .footer-widget a:hover{ color:var(--spn-teal); text-decoration:none; }

/* Markenspalte mit Logo */
.spn-foot-brand img{ height:38px; width:auto; margin:0 0 16px; display:block; }
.spn-foot-brand p{ max-width:320px; }

/* Untere Leiste: Copyright + Transparenz-Disclaimer */
#footer-bottom{ background:var(--spn-navy-dark); padding:0; }
.spn-footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 0;
}
.spn-footer-copy{ color:#9FB3C2; font-size:13px; margin:0; }
.spn-footer-disc{ color:#7E93A6; font-size:12px; line-height:1.5; margin:0; max-width:620px; text-align:right; }

/* Untere Divi-Menüleiste + Standard-Credits aus */
#et-footer-nav{ display:none !important; }

@media (max-width:980px){
  #footer-widgets .container{ grid-template-columns:1fr 1fr; }
  .spn-footer-bottom{ justify-content:center; text-align:center; }
  .spn-footer-disc{ text-align:center; }
}
@media (max-width:520px){
  #footer-widgets .container{ grid-template-columns:1fr; }
}

/* =====================================================
   Keine Sidebar – volle Breite auf allen Seiten/Beiträgen
   ===================================================== */
#sidebar{ display:none !important; }
#main-content #left-area{ width:100% !important; padding-right:0 !important; }
#main-content .container:before{ display:none !important; }

/* =====================================================
   Ratgeber-Übersicht – Karten-Raster
   ===================================================== */
.spn-blog-head{ text-align:center; margin:1rem 0 2.2rem; }
.spn-blog-head h1{ color:var(--spn-navy); font-size:2.1em; margin:0 0 .4rem; }
.spn-blog-head p{ color:var(--spn-muted); margin:0 auto; max-width:560px; }
.spn-rgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-bottom:2.5rem; }
.spn-rcard{ background:#fff; border:1px solid var(--spn-line); border-radius:12px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.spn-rcard:hover{ border-color:var(--spn-teal); box-shadow:0 8px 22px rgba(19,49,79,.10); transform:translateY(-2px); }
.spn-rcard-link{ display:block; padding:0; color:inherit; }
.spn-rcard-link:hover{ text-decoration:none; }
.spn-rcard-img{ display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; background:var(--spn-soft); border-bottom:1px solid var(--spn-line); }
.spn-rcard-body{ display:block; padding:18px 20px; }
.spn-rcard-cat{ display:inline-block; font-size:12px; font-weight:500; color:var(--spn-teal-dark); background:var(--spn-teal-050); border-radius:20px; padding:3px 10px; margin-bottom:12px; }
.spn-rcard-title{ color:var(--spn-navy); font-size:1.15em; line-height:1.35; margin:0 0 8px; }
.spn-rcard-ex{ color:var(--spn-muted); font-size:.95em; line-height:1.6; margin:0 0 14px; }
.spn-rcard-more{ color:var(--spn-teal-dark); font-weight:500; font-size:.92em; }

/* =====================================================
   Eigenes Mega-Menü (Ratgeber) – zweispaltig, Finanzfluss-Stil
   ===================================================== */
@media (min-width:981px){ #menu-item-51 > .sub-menu, #menu-item-50 > .sub-menu{ display:none !important; } }
.spn-mega{ position:fixed; top:80px; left:50%; transform:translateX(-50%); width:min(1080px,94vw); background:#fff; border:1px solid var(--spn-line); border-radius:14px; box-shadow:0 20px 50px rgba(19,49,79,.18); z-index:9999999; display:none; }
.spn-mega.open{ display:flex; }
.spn-mega-left{ width:240px; flex:none; background:#F4F7F9; border-right:1px solid #E3E9ED; border-radius:14px 0 0 14px; padding:14px; }
.spn-mega-cat{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; border-radius:9px; color:var(--spn-navy); font-weight:500; font-size:15px; cursor:pointer; }
.spn-mega-cat:hover, .spn-mega-cat.active{ background:var(--spn-teal-050); color:var(--spn-teal-dark); }
.spn-mega-cat.soon{ color:#9aa6b2; }
.spn-mega-cat em{ font-style:normal; font-size:11px; color:#9aa6b2; }
.spn-mega-cat .spn-chev{ color:#9aa6b2; font-size:18px; }
.spn-mega-right{ flex:1; padding:22px 26px; min-height:250px; }
.spn-mega-title{ font-size:20px; font-weight:500; color:var(--spn-navy); margin:0 0 18px; }
.spn-mega-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:18px 26px; }
.spn-mega-group h4{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--spn-teal-dark); margin:0 0 10px; font-weight:500; }
.spn-mega-group a{ display:block; color:#3a4b5c; font-size:14px; line-height:1.4; padding:5px 0; }
.spn-mega-group a:hover{ color:var(--spn-teal-dark); text-decoration:none; }
.spn-mega-soon{ color:#9aa6b2; font-size:14px; }
.spn-mega-foot{ margin-top:18px; padding-top:14px; border-top:1px solid var(--spn-line); }
.spn-mega-foot a{ color:var(--spn-teal-dark); font-weight:500; font-size:14px; }
.spn-mega-group .spn-mega-soon-link{ display:block; color:#9aa6b2; font-size:14px; line-height:1.4; padding:5px 0; cursor:default; }
.spn-mega-group .spn-mega-soon-link em{ font-style:normal; font-size:11px; color:var(--spn-teal-dark); background:var(--spn-teal-050); border-radius:10px; padding:1px 7px; margin-left:4px; }

/* =====================================================
   Autoren-Box unter Beiträgen
   ===================================================== */
.spn-author{ display:flex; gap:16px; align-items:flex-start; background:var(--spn-soft); border:1px solid var(--spn-line); border-radius:12px; padding:18px 20px; margin:2.4rem 0 0; }
.spn-author-av{ width:50px; height:50px; flex:none; border-radius:50%; overflow:hidden; background:var(--spn-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:21px; }
.spn-author-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.spn-author-label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--spn-teal-dark); font-weight:500; }
.spn-author-name{ font-weight:500; color:var(--spn-navy); font-size:1.05em; margin:1px 0 4px; }
.spn-author-bio{ color:var(--spn-muted); font-size:.95em; line-height:1.6; }

/* =====================================================
   Verwandte Beiträge (interne Verlinkung)
   ===================================================== */
.spn-related{ margin:2.6rem 0 0; }
.spn-related h2{ font-size:1.3em; margin:0 0 1rem; padding-bottom:.3rem; border-bottom:2px solid var(--spn-teal-050); }
.spn-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.spn-related-grid a{ display:block; background:#fff; border:1px solid var(--spn-line); border-left:4px solid var(--spn-teal); border-radius:0 8px 8px 0; padding:13px 16px; color:var(--spn-navy); font-weight:500; line-height:1.4; transition:background .15s ease, border-color .15s ease; }
.spn-related-grid a:hover{ background:var(--spn-soft); border-color:var(--spn-teal); text-decoration:none; }

/* =====================================================
   Seraphinite-Werbebanner ausblenden (Fallback zum JS-Remove)
   Hinweis: inline padding:0.5em!important des Plugins lässt sich per CSS
   nicht überschreiben → ohne JS bliebe ein dünner Streifen; das JS entfernt
   das Element vollständig.
   ===================================================== */
body > a[href*="s-sols.com"]{
  font-size:0 !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
}

/* =====================================================
   financeads Vergleichstabelle (Shortcode [fa_giro])
   ===================================================== */
.spn-fa{ margin:1.8rem 0; }
.spn-fa-top-note{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.82em; color:var(--spn-muted); margin-bottom:14px; }
.spn-fa-ad{ background:var(--spn-soft); border:1px solid var(--spn-line); border-radius:6px; padding:3px 9px; }
.spn-fa-row{ position:relative; background:#fff; border:1px solid var(--spn-line); border-radius:12px; padding:18px 20px; margin:0 0 14px; }
.spn-fa-row--top{ border:2px solid var(--spn-teal); }
.spn-fa-main{ display:grid; grid-template-columns:180px 1fr 160px; gap:18px; align-items:center; }
.spn-fa-badge{ position:absolute; top:-11px; left:20px; background:var(--spn-teal); color:#fff; font-size:.72em; font-weight:500; padding:2px 11px; border-radius:20px; }
.spn-fa-brand{ display:flex; flex-direction:column; gap:8px; }
.spn-fa-brand img{ max-width:150px; max-height:44px; width:auto; height:auto; object-fit:contain; }
.spn-fa-name strong{ display:block; color:var(--spn-navy); font-size:1.02em; }
.spn-fa-name span{ color:var(--spn-muted); font-size:.86em; }
.spn-fa-facts{ font-size:.95em; }
.spn-fa-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.spn-fa-kf{ color:var(--spn-ink); }
.spn-fa-kf.is-free{ color:var(--spn-teal-dark); font-weight:500; }
.spn-fa-bonus{ background:var(--spn-teal-050); color:var(--spn-teal-dark); font-weight:500; border-radius:20px; padding:2px 11px; font-size:.92em; }
.spn-fa-bes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; }
.spn-fa-bes li{ position:relative; padding-left:20px; color:var(--spn-ink); font-size:.9em; }
.spn-fa-bes li::before{ content:"\2713"; position:absolute; left:0; color:var(--spn-teal); font-weight:700; }
.spn-fa-cta{ text-align:center; }
a.spn-fa-btn{ display:block; background:var(--spn-navy)!important; color:#fff!important; font-weight:500; padding:11px 14px; border-radius:8px; text-decoration:none!important; }
a.spn-fa-btn:hover{ background:var(--spn-teal-dark)!important; }
.spn-fa-cta-note{ display:block; font-size:.72em; color:var(--spn-muted); margin-top:4px; }
.spn-fa-disc{ font-size:.78em; color:var(--spn-muted); line-height:1.6; border-top:1px solid var(--spn-line); padding-top:12px; margin-top:4px; }
.spn-fa-rep{ font-size:.72em; color:var(--spn-muted); line-height:1.5; margin:8px 0 0; }
.spn-fa-more{ margin:10px 0 0; }
.spn-fa-more summary{ cursor:pointer; color:var(--spn-teal-dark); font-size:.86em; font-weight:500; list-style:none; display:inline-block; }
.spn-fa-more summary::-webkit-details-marker{ display:none; }
.spn-fa-more summary::before{ content:"\25BE\00a0"; }
.spn-fa-more[open] summary::before{ content:"\25B4\00a0"; }
.spn-fa-dl{ display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:12px 0 2px; padding-top:12px; border-top:1px dashed var(--spn-line); font-size:.88em; }
.spn-fa-dk{ color:var(--spn-muted); }
.spn-fa-dv{ color:var(--spn-ink); }
/* Pflichtangaben nach PAngV: viel Text, deshalb kleiner und scrollbar. */
.spn-fa-legal{ font-size:.86em; color:var(--spn-muted); line-height:1.55; max-height:190px; overflow-y:auto; padding-right:6px; }
.spn-fa-legal u{ display:inline-block; margin-top:6px; }
/* Erklaer-Tooltip an einzelnen Kennzahlen. */
.spn-fa-hint{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:5px; border-radius:50%; background:var(--spn-soft); border:1px solid var(--spn-line); color:var(--spn-muted); font-size:.72em; cursor:help; vertical-align:middle; }
/* Abschlusspraemie: bewusst kraeftiger als der normale Bonus-Chip, weil eine
   Praemie der staerkste Abschlussgrund ist und sofort auffallen soll. */
.spn-fa-praemie{ background:var(--spn-teal); color:#fff; font-weight:600; border-radius:20px; padding:3px 13px; font-size:.92em; letter-spacing:.01em; box-shadow:0 1px 3px rgba(27,183,168,.35); }
.spn-fa-row--top .spn-fa-praemie{ background:var(--spn-teal-dark); }
/* Warn-Chip neben dem Hauptwert, z. B. Folgezins nach der Aktionsphase. */
.spn-fa-warn{ background:#fff3d6; color:#8a6316; border:1px solid #f0d089; font-weight:500; border-radius:20px; padding:2px 11px; font-size:.9em; }
/* Fussnote unter einer Tabelle (Methodik, Einschraenkungen). */
.spn-fa-hinweis{ font-size:.8em; color:var(--spn-muted); line-height:1.6; margin:2px 0 12px; }
/* Warnung, wenn ein Feed laenger nicht aktualisiert werden konnte. */
.spn-fa-veraltet{ background:#fff8e6; border:1px solid #f0d089; border-radius:8px; padding:10px 14px; font-size:.86em; color:#7a5a12; margin:0 0 14px; }
/* Ehrlicher Hinweis, wenn es zu einer Sparte keine belastbaren Daten gibt. */
.spn-fa-notice{ background:var(--spn-soft); border:1px solid var(--spn-line); border-radius:12px; padding:18px 22px; }
.spn-fa-notice p{ margin:0 0 10px; font-size:.95em; }
.spn-fa-notice p:last-child{ margin-bottom:0; }
.spn-fa-empty{ background:var(--spn-soft); border:1px solid var(--spn-line); border-radius:10px; padding:16px 20px; color:var(--spn-muted); font-size:.92em; }
@media (max-width:782px){
  .spn-fa-main{ grid-template-columns:1fr; gap:12px; }
  .spn-fa-cta{ text-align:left; }
  a.spn-fa-btn{ display:inline-block; }
}
@media (max-width:560px){
  .spn-fa-dl{ grid-template-columns:1fr; gap:2px 0; }
  .spn-fa-dk{ margin-top:7px; }
}

/* ===== Startseite Redesign (Finanzguru-Stil) — spn-h-* ===== */
.spn-h-hero{ position:relative; text-align:center; padding:3.2rem 1rem 3.4rem; background:linear-gradient(180deg,var(--spn-teal-050) 0%,#fff 100%); border-radius:0 0 28px 28px; margin:0 -20px 2.6rem; overflow:hidden; }
.spn-h-eyebrow{ display:inline-block; background:#fff; color:var(--spn-teal-dark); border:1px solid var(--spn-line); border-radius:20px; font-size:.82em; font-weight:500; padding:5px 14px; margin-bottom:1.1rem; box-shadow:0 4px 14px rgba(19,49,79,.06); }
.spn-h-hero h1{ font-size:clamp(2.1em,4.6vw,3.15em); line-height:1.15; color:var(--spn-navy); margin:0 auto .9rem; max-width:820px; font-weight:600; }
.spn-h-hero h1 em{ font-style:normal; color:var(--spn-teal-dark); }
.spn-h-sub{ max-width:640px; margin:0 auto 1.6rem; color:var(--spn-muted); font-size:1.12em; line-height:1.7; }
.spn-h-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:1.7rem; }
a.spn-btn.spn-btn-lg{ padding:.95rem 1.8rem!important; font-size:1.02em!important; border-radius:12px!important; }
.spn-h-stats{ display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; color:var(--spn-navy); font-weight:500; font-size:.95em; }
.spn-h-stats span{ display:flex; align-items:center; gap:7px; }
.spn-h-stats b{ color:var(--spn-teal-dark); font-weight:600; }
.spn-h-kicker{ text-align:center; color:var(--spn-teal-dark); font-weight:600; font-size:.85em; text-transform:uppercase; letter-spacing:1.2px; margin:0 0 .4rem; }
.spn-h-title{ text-align:center; font-size:clamp(1.5em,3vw,2em); color:var(--spn-navy); margin:0 0 .5rem; border-bottom:none!important; padding-bottom:0!important; }
.spn-h-lead{ text-align:center; color:var(--spn-muted); max-width:640px; margin:0 auto 1.8rem; line-height:1.7; }
/* Themen */
.spn-h-topics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:0 0 3rem; }
.spn-h-topic{ display:block; background:#fff; border:1px solid var(--spn-line); border-radius:16px; padding:24px 22px; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }
.spn-h-topic:hover{ text-decoration:none; transform:translateY(-4px); box-shadow:0 16px 34px rgba(19,49,79,.10); }
.spn-h-topic .spn-ico{ width:40px; height:40px; margin-bottom:10px; }
.spn-h-topic .spn-h-t-h{ display:block; font-size:1.12em; font-weight:600; margin:0 0 .35rem; color:var(--spn-navy); }
.spn-h-topic .spn-h-t-p{ display:block; color:var(--spn-muted); font-size:.93em; line-height:1.55; margin:0 0 .8rem; }
.spn-h-topic .spn-ico{ display:block; }
.spn-h-topic .spn-h-more{ color:var(--spn-teal-dark); font-weight:500; font-size:.95em; }
/* Vergleiche */
.spn-h-comps-wrap{ background:var(--spn-soft); border-radius:24px; padding:2.4rem 26px 2rem; margin:0 -20px 3rem; }
.spn-h-comps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-bottom:1.2rem; }
.spn-h-comp{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--spn-line); border-radius:14px; padding:18px 18px; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }
.spn-h-comp:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:0 12px 26px rgba(19,49,79,.10); }
.spn-h-comp b{ display:block; color:var(--spn-navy); font-weight:600; }
.spn-h-comp small{ color:var(--spn-muted); }
.spn-h-comp .spn-h-arrow{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--spn-teal-050); color:var(--spn-teal-dark); display:flex; align-items:center; justify-content:center; font-weight:700; }
.spn-h-pills{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.spn-h-pills a{ background:#fff; border:1px solid var(--spn-line); border-radius:20px; padding:6px 14px; font-size:.88em; color:var(--spn-navy); font-weight:500; }
.spn-h-pills a:hover{ border-color:var(--spn-teal); color:var(--spn-teal-dark); text-decoration:none; }
/* Schritte */
.spn-h-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:0 0 3rem; }
.spn-h-step{ background:#fff; border:1px solid var(--spn-line); border-radius:16px; padding:26px 22px; text-align:center; }
.spn-h-stepnum{ width:44px; height:44px; margin:0 auto 12px; border-radius:50%; background:var(--spn-teal); color:#fff; font-weight:700; font-size:1.15em; display:flex; align-items:center; justify-content:center; }
.spn-h-step h3{ font-size:1.08em; color:var(--spn-navy); margin:0 0 .35rem; }
.spn-h-step p{ color:var(--spn-muted); font-size:.93em; line-height:1.6; margin:0; }
/* Warum Sparnia */
.spn-h-why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:0 0 3rem; }
.spn-h-usp{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--spn-line); border-radius:14px; padding:18px; }
.spn-h-usp .spn-ico{ flex:none; width:30px; height:30px; margin-top:2px; }
.spn-h-usp b{ display:block; color:var(--spn-navy); margin-bottom:2px; }
.spn-h-usp small{ color:var(--spn-muted); line-height:1.5; display:block; }
/* Ratgeber-Karten */
.spn-h-guides{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:0 0 3rem; }
.spn-h-guide{ display:block; background:#fff; border:1px solid var(--spn-line); border-radius:14px; padding:18px 20px; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }
.spn-h-guide:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:0 12px 26px rgba(19,49,79,.10); }
.spn-h-guide small{ display:inline-block; color:var(--spn-teal-dark); background:var(--spn-teal-050); border-radius:12px; padding:2px 10px; font-weight:500; margin-bottom:8px; }
.spn-h-guide b{ display:block; color:var(--spn-navy); font-weight:600; line-height:1.4; }
/* FAQ */
.spn-h-faq{ max-width:760px; margin:0 auto 3rem; }
.spn-h-faq details{ background:#fff; border:1px solid var(--spn-line); border-radius:14px; padding:0; margin-bottom:10px; overflow:hidden; }
.spn-h-faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 20px; font-weight:500; color:var(--spn-navy); }
.spn-h-faq summary::-webkit-details-marker{ display:none; }
.spn-h-faq summary:after{ content:'+'; flex:none; width:26px; height:26px; border-radius:50%; background:var(--spn-teal-050); color:var(--spn-teal-dark); display:flex; align-items:center; justify-content:center; font-weight:600; transition:transform .18s ease; }
.spn-h-faq details[open] summary:after{ transform:rotate(45deg); }
.spn-h-faq details p{ padding:0 20px 17px; margin:0; color:var(--spn-muted); line-height:1.7; }
/* CTA-Band */
.spn-h-cta{ background:var(--spn-navy); border-radius:24px; text-align:center; padding:2.8rem 24px; margin:0 -20px 1.5rem; }
.spn-h-cta h2{ color:#fff; font-size:clamp(1.5em,3vw,2em); margin:0 0 .5rem; border-bottom:none!important; padding-bottom:0!important; }
.spn-h-cta a.spn-btn:not(.spn-btn-ghost){ background:var(--spn-teal)!important; color:#fff!important; }
.spn-h-cta a.spn-btn:not(.spn-btn-ghost):hover{ background:var(--spn-teal-dark)!important; }
.spn-h-cta p{ color:#B9C7D4; max-width:560px; margin:0 auto 1.4rem; line-height:1.7; }
a.spn-btn.spn-btn-ghost{ background:transparent!important; color:#fff!important; border:2px solid rgba(255,255,255,.45)!important; }
a.spn-btn.spn-btn-ghost:hover{ background:rgba(255,255,255,.1)!important; }
/* wpautop-Guard: keine Fuell-Elemente als Grid-Items */
.spn-h-topics > br, .spn-h-comps > br, .spn-h-guides > br, .spn-h-why > br, .spn-h-steps > br, .spn-h-pills > br, .spn-h-faq > br, .spn-h-stats > br{ display:none; }
.spn-h-topics > p:empty, .spn-h-comps > p:empty, .spn-h-guides > p:empty, .spn-h-why > p:empty, .spn-h-steps > p:empty, .spn-h-pills > p:empty{ display:none; }
/* Icons neu */
.spn-ico-percent{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='7' cy='7' r='2.4'/><circle cx='17' cy='17' r='2.4'/></svg>"); }
.spn-ico-coin{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M9.6 8.4h3.6a1.9 1.9 0 010 3.8H9.6h4.1a1.9 1.9 0 010 3.8H9.6'/><path d='M10.8 6.4v2M10.8 15.9v2'/></svg>"); }
.spn-ico-clock{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BB7A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3.2 3.2'/></svg>"); }
@media (max-width:700px){
  .spn-h-hero{ margin:0 -10px 2rem; padding:2.4rem .9rem 2.6rem; }
  .spn-h-comps-wrap, .spn-h-cta{ margin:0 -10px 2.4rem; }
}

/* Breadcrumbs (Rank Math, via mu-plugin sparnia-seo-extras) */
.spn-bc{ margin:0 0 16px; font-size:.85em; color:var(--spn-muted); }
.spn-bc a{ color:var(--spn-teal-dark); }
.spn-bc .separator{ margin:0 6px; color:#B9C7D4; }

/* ---------- Sparnia Rechner-Widgets (.spn-calc) ---------- */
.spn-calc{background:#fff;border:1px solid var(--spn-line);border-radius:14px;padding:22px;margin:0 0 28px;box-shadow:0 2px 10px rgba(19,49,79,.05)}
.spn-calc:not(.spn-calc-ready){min-height:120px}
.spn-calc-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:18px}
.spn-calc-field{display:flex;flex-direction:column;gap:5px;margin:0!important}
.spn-calc-full{grid-column:1/-1}
.spn-calc-field>span{font-size:13px;font-weight:600;color:var(--spn-navy);line-height:1.3}
.spn-calc-inwrap{display:flex;align-items:center;gap:8px;background:var(--spn-soft);border:1px solid var(--spn-line);border-radius:9px;padding:2px 12px 2px 2px}
.spn-calc-inwrap:focus-within{border-color:var(--spn-teal);box-shadow:0 0 0 2px rgba(27,183,168,.15)}
.spn-calc-inwrap input,.spn-calc-inwrap select{flex:1;border:none!important;background:transparent!important;padding:9px 10px!important;font-size:15px;font-weight:600;color:var(--spn-navy);min-width:0;outline:none;-moz-appearance:textfield}
.spn-calc-inwrap input::-webkit-outer-spin-button,.spn-calc-inwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.spn-calc-inwrap em{font-style:normal;font-size:12px;color:var(--spn-muted);white-space:nowrap}
.spn-calc-rows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--spn-line)}
.spn-calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--spn-line);font-size:14px;color:#3d4f63}
.spn-calc-row b{color:var(--spn-navy);white-space:nowrap}
.spn-calc-main{background:var(--spn-teal-050);margin:0 -22px;padding:13px 22px;border-bottom:none;border-top:2px solid var(--spn-teal)}
.spn-calc-main span{font-weight:700;color:var(--spn-navy)}
.spn-calc-main b{font-size:24px;color:var(--spn-teal);letter-spacing:-.5px}
.spn-calc-chart{width:100%;height:auto;margin-top:16px;display:block}
.spn-calc-details{margin-top:14px}
.spn-calc-details summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--spn-teal)}
.spn-calc-tablewrap{max-height:320px;overflow-y:auto;margin-top:10px}
.spn-calc-tablewrap table{width:100%;border-collapse:collapse;font-size:13px}
.spn-calc-tablewrap th{position:sticky;top:0;background:var(--spn-navy);color:#fff;text-align:left;padding:7px 10px;font-size:12px}
.spn-calc-tablewrap td{padding:6px 10px;border-bottom:1px solid var(--spn-line);color:#3d4f63}
.spn-calc-note{font-size:12px;color:var(--spn-muted);line-height:1.55;margin:14px 0 0!important}
.spn-calc select{cursor:pointer}
@media(max-width:640px){.spn-calc{padding:16px}.spn-calc-form{grid-template-columns:1fr}.spn-calc-main{margin:0 -16px;padding:12px 16px}.spn-calc-main b{font-size:20px}}
/* Rechner-Hub-Kacheln */
.spn-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.spn-tools>br,.spn-tools>p:empty{display:none}
a.spn-tool{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--spn-line);border-radius:12px;padding:18px;text-decoration:none;transition:box-shadow .15s,transform .15s;color:inherit}
a.spn-tool:hover{box-shadow:0 6px 18px rgba(19,49,79,.10);transform:translateY(-2px)}
a.spn-tool .spn-tool-kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--spn-teal)}
a.spn-tool .spn-tool-name{font-size:16px;font-weight:700;color:var(--spn-navy);line-height:1.3}
a.spn-tool .spn-tool-desc{font-size:13px;color:var(--spn-muted);line-height:1.5}
a.spn-tool.spn-tool-soon{opacity:.55;pointer-events:none}