.hero{
  position:relative;
  overflow:hidden;
  padding:100px 0 88px;
  background:
    radial-gradient(circle at 82% 14%,rgba(11,117,109,.13),transparent 26%),
    radial-gradient(circle at 11% 90%,rgba(19,35,44,.045),transparent 24%),
    linear-gradient(180deg,#fff 0%,#f7fafb 100%);
  border-bottom:1px solid var(--line)
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  pointer-events:none;
  background-image:linear-gradient(rgba(19,35,44,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(19,35,44,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 75%)
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);
  gap:76px;
  align-items:center
}
.hero-content{position:relative;z-index:1}
.hero h1{max-width:770px}
.hero-copy{
  max-width:690px;
  color:var(--muted);
  font-size:19px;
  line-height:1.65
}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin:31px 0 24px}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  color:var(--muted);
  font-size:13px;
  font-weight:650
}
.trust-row span{
  position:relative;
  padding:0 16px
}
.trust-row span:first-child{padding-left:0}
.trust-row span+span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#9aabb1
}
.trust-row b{color:var(--text)}
.hero-directory{
  position:relative;
  z-index:1;
  padding:16px;
  border:1px solid rgba(220,229,231,.95);
  border-radius:27px;
  background:rgba(255,255,255,.90);
  box-shadow:0 26px 70px rgba(17,38,48,.10);
  backdrop-filter:blur(16px)
}
.directory-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 10px 14px
}
.directory-header strong{font-size:15px}
.mini-label{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  color:var(--accent-dark);
  background:var(--accent-soft);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em
}
.directory-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px 14px;
  border-top:1px solid #edf1f2;
  border-radius:14px;
  transition:.18s ease
}
.directory-row:hover{background:#f3f8f8}
.directory-row>span:nth-child(2) strong,.directory-row small{display:block}
.directory-row small{margin-top:1px;color:var(--muted);font-size:12px}
.directory-row>b{color:var(--accent);font-size:18px}
.directory-icon{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:var(--accent);
  background:var(--accent-soft);
  font-weight:900
}
.topic-section{background:#fff}
.savings-section{
  background:
    linear-gradient(180deg,#eef4f4 0%,#f4f7f7 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.section-heading.modern-heading{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);
  gap:70px;
  align-items:end;
  margin-bottom:38px
}
.section-heading.modern-heading h2{margin:5px 0 0}
.section-heading.modern-heading p{
  max-width:none;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7
}
.section-kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:850;
  letter-spacing:.06em
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.topic-card{
  position:relative;
  min-height:242px;
  display:flex;
  flex-direction:column;
  padding:25px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 6px 22px rgba(17,38,48,.025);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.active-card:hover{
  transform:translateY(-4px);
  border-color:rgba(11,117,109,.28);
  box-shadow:0 18px 38px rgba(17,38,48,.075)
}
.card-number{
  position:absolute;
  top:22px;
  right:22px;
  color:#a6b3b8;
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em
}
.card-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:27px;
  border-radius:13px;
  color:var(--accent);
  background:var(--accent-soft);
  font-size:19px;
  font-weight:900
}
.topic-card h3{font-size:21px}
.topic-card p{
  flex:1;
  margin-bottom:24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65
}
.card-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:15px;
  border-top:1px solid #edf1f2;
  color:var(--text);
  font-size:13px;
  font-weight:800
}
.card-link b{color:var(--accent);font-size:17px}
.featured-card{
  background:linear-gradient(155deg,#fff 20%,#f1faf8 100%)
}
.future-card{opacity:.72}
.badge{
  position:absolute;
  top:18px;
  right:18px;
  padding:5px 9px;
  border-radius:999px;
  color:var(--muted);
  background:var(--soft);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em
}
.note-section{background:#fff}
.info-box{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:55px;
  align-items:center;
  padding:38px 40px;
  background:#f6f9f9;
  border:1px solid var(--line);
  border-radius:22px
}
.info-box h2{margin:5px 0 0;font-size:32px}
.info-box p{margin:0;color:var(--muted)}
@media(max-width:920px){
  .hero-grid,.section-heading.modern-heading,.info-box{grid-template-columns:1fr}
  .hero-grid{gap:45px}
  .section-heading.modern-heading{gap:15px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .hero{padding:58px 0 62px}
  .hero h1{font-size:44px}
  .hero-directory{padding:10px;border-radius:20px}
  .trust-row{gap:8px}
  .trust-row span{padding:0}
  .trust-row span+span::before{display:none}
  .card-grid{grid-template-columns:1fr}
  .topic-card{min-height:220px}
}

.income-section{background:#fff;border-top:1px solid var(--line)}
.income-grid{grid-template-columns:minmax(0,1fr);max-width:780px}
html[data-theme="dark"] .income-section{background:var(--bg)}

.helper-section{background:#fff;border-top:1px solid var(--line)}
.helper-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-theme="dark"] .helper-section{background:var(--bg)}

@media(max-width:920px){.helper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.helper-grid{grid-template-columns:1fr}}


/* Version 0.14.1 - Startseite verfeinert */
.hero-actions .button-secondary{
  min-width:320px;
  justify-content:center
}
.hero-directory{
  border-radius:30px;
  box-shadow:0 28px 80px rgba(17,38,48,.10)
}
.directory-row:first-of-type{border-top:1px solid #edf1f2}
.card-number{display:none}
.topic-card{min-height:224px}
.topic-card .card-icon{margin-bottom:22px}
@media(max-width:760px){
  .hero-actions .button-secondary{min-width:0}
}
html[data-theme="dark"] .directory-row:first-of-type{border-top-color:#21353f}


/* Version 0.15.1 - bessere Startseiten-Icons */
.card-icon,
.directory-icon{
  box-shadow:inset 0 0 0 1px rgba(11,117,109,.06)
}
.card-icon svg,
.directory-icon svg{
  width:22px;
  height:22px;
  display:block;
  stroke:currentColor;
  fill:none
}
.directory-icon svg{width:20px;height:20px}
.tone-finance{
  color:#0e6e69;
  background:linear-gradient(180deg,#e9f8f3 0%,#ddf4ee 100%)
}
.tone-household{
  color:#21577a;
  background:linear-gradient(180deg,#edf5fb 0%,#e1eef8 100%)
}
.tone-savings{
  color:#3a7d4c;
  background:linear-gradient(180deg,#edf8ef 0%,#e3f2e6 100%)
}
.tone-income{
  color:#8a5b14;
  background:linear-gradient(180deg,#fff5e6 0%,#feedd0 100%)
}
.tone-helper{
  color:#4b5b74;
  background:linear-gradient(180deg,#eff3f9 0%,#e6ecf5 100%)
}
.hero-directory{
  border-radius:28px;
  box-shadow:0 30px 78px rgba(17,38,48,.11)
}
.directory-row{
  border-top:1px solid #edf1f2
}
.directory-row:first-of-type{
  border-top:1px solid #edf1f2
}
.directory-icon{
  width:42px;
  height:42px;
  border-radius:13px
}
.topic-card{
  border-radius:22px
}
.topic-card .card-icon{
  width:48px;
  height:48px;
  border-radius:15px
}
.topic-card h3{
  letter-spacing:-.02em
}
html[data-theme="dark"] .tone-finance{
  color:#7fd9ca;
  background:#163532
}
html[data-theme="dark"] .tone-household{
  color:#9fcaed;
  background:#1a2e3e
}
html[data-theme="dark"] .tone-savings{
  color:#a7dbb0;
  background:#1b3322
}
html[data-theme="dark"] .tone-income{
  color:#f2d28b;
  background:#352b16
}
html[data-theme="dark"] .tone-helper{
  color:#c2cfdf;
  background:#1d2734
}


/* Version 0.15.2 - Home-Feinschliff */
.hero{
  background:
    radial-gradient(circle at 85% 15%,rgba(14,117,110,.12),transparent 30%),
    radial-gradient(circle at 10% 5%,rgba(22,54,75,.055),transparent 25%),
    linear-gradient(180deg,#f7fafb 0%,#f3f6f7 100%)
}
.hero-directory{
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(250,252,252,.97) 100%);
  border-color:rgba(14,117,110,.10)
}
.topic-card{
  box-shadow:0 8px 24px rgba(18,37,49,.035)
}
.active-card:hover{
  box-shadow:0 20px 42px rgba(18,37,49,.08)
}
.card-link b{
  color:var(--brand-navy)
}
.mini-label{
  background:#e9f3f8;
  color:var(--brand-navy)
}
html[data-theme="dark"] .hero{
  background:
    radial-gradient(circle at 84% 13%,rgba(78,199,183,.13),transparent 30%),
    radial-gradient(circle at 10% 3%,rgba(224,191,122,.05),transparent 22%),
    linear-gradient(180deg,#101b21,#0d171d)!important
}


/* Version 0.15.3 - Premium-Startseite */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:108px;
  padding-bottom:92px;
  background:
    radial-gradient(circle at 86% 14%, rgba(15,119,111,.14), transparent 30%),
    radial-gradient(circle at 10% 4%, rgba(22,54,75,.07), transparent 24%),
    linear-gradient(180deg,#f8fbfc 0%,#f4f7f8 100%)
}
.hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-80px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,175,89,.12), transparent 62%);
  pointer-events:none
}
.hero-copy{
  max-width:760px;
  font-size:19px
}
.trust-row{
  margin-top:26px;
  padding:14px 16px;
  border:1px solid rgba(14,117,110,.10);
  border-radius:18px;
  background:rgba(255,255,255,.86)
}
.hero-directory{
  border-radius:30px;
  border:1px solid rgba(14,117,110,.10);
  box-shadow:0 28px 70px rgba(18,37,49,.10)
}
.directory-row{
  padding:17px 18px
}
.directory-row:hover{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%)
}
.topic-grid{
  gap:18px
}
.topic-card{
  position:relative;
  border:1px solid rgba(18,37,49,.06);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%)
}
.topic-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 0 18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(14,117,110,.65), rgba(22,54,75,.7));
  opacity:0;
  transition:opacity .18s ease
}
.topic-card:hover::after{
  opacity:1
}
.active-card{
  box-shadow:0 14px 36px rgba(18,37,49,.06)
}
.active-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 52px rgba(18,37,49,.10)
}
.info-box{
  border:1px solid rgba(14,117,110,.10)
}
html[data-theme="dark"] .hero{
  background:
    radial-gradient(circle at 86% 14%, rgba(78,199,183,.14), transparent 30%),
    radial-gradient(circle at 10% 4%, rgba(224,191,122,.06), transparent 24%),
    linear-gradient(180deg,#101b21 0%,#0d171d 100%)!important
}
html[data-theme="dark"] .trust-row{
  background:#14232b;
  border-color:#2b3d47
}
html[data-theme="dark"] .topic-card{
  border-color:#243641!important;
  background:linear-gradient(180deg,#15232b 0%,#162831 100%)!important
}
html[data-theme="dark"] .directory-row:hover{
  background:linear-gradient(180deg,#16272e 0%,#183035 100%)
}


/* Version 0.15.5 - Icon-System passend zum runden Hauptlogo */
.card-icon,
.directory-icon{
  border-radius:50%;
  border:1px solid rgba(22,54,75,.06);
  box-shadow:none!important
}
.card-icon{
  width:50px;
  height:50px
}
.directory-icon{
  width:44px;
  height:44px
}
.card-icon svg{
  width:22px;
  height:22px
}
.directory-icon svg{
  width:19px;
  height:19px
}
.tone-finance{
  color:#0E756E;
  background:#E5F3F1
}
.tone-household{
  color:#24516D;
  background:#E7EFF4
}
.tone-savings{
  color:#39745A;
  background:#E8F2EC
}
.tone-income{
  color:#9A6B20;
  background:#F8F0DE
}
.tone-helper{
  color:#596878;
  background:#EDF1F4
}
html[data-theme="dark"] .tone-finance{color:#7FD7CC;background:#173431}
html[data-theme="dark"] .tone-household{color:#A9CAE0;background:#1A2D39}
html[data-theme="dark"] .tone-savings{color:#A4D6B4;background:#1B3023}
html[data-theme="dark"] .tone-income{color:#E4C47C;background:#332A19}
html[data-theme="dark"] .tone-helper{color:#C0CBD5;background:#1D2730}