/* ===================================================
   BalkonstromProfi · Grundstile
   Palette: Mitternachtsblau, Kobaltblau und Sonnengelb
   Formensprache: organisch, großzügige Rundungen
   =================================================== */

:root {
  color-scheme: light;

  --navy:          #1E3A5F;
  --navy-dark:     #162d4a;
  --navy-light:    #2a4d73;
  --green:         #2E8B57;
  --green-soft:    #e6f4ec;
  --yellow:        #F4B400;
  --yellow-hover:  #E68A00;

  --bg:            #F5F7FA;
  --surface:       #FFFFFF;
  --ink:           #222831;
  --muted:         #6B7280;
  --line:          #E4E8EF;

  /* Farbige Flächen (Punkt 1) */
  --tint-blue:     #EEF3FB;   /* leicht blau getönt */
  --tint-green:    #E8F5ED;   /* leicht grün getönt */
  --tint-yellow:   #FEF9E7;   /* leicht gelb getönt */

  --shadow-sm:     0 2px 12px rgba(17,24,39,.06);
  --shadow-md:     0 8px 32px rgba(17,24,39,.10);
  --shadow-lg:     0 24px 64px rgba(17,24,39,.13);
  --glow-yellow:   0 8px 32px rgba(244,180,0,.30);

  /* Yuma-inspirierte Radien */
  --r-xs:   6px;
  --r-sm:   12px;
  --r:      20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-2xl:  48px;
  --r-pill: 999px;

  font-family:
    "Segoe UI Variable","Segoe UI",
    ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.6; }
body:has(dialog[open]) { overflow: hidden; }
a    { color: inherit; }

/* ── Header ─────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; min-height: 72px;
  align-items: center; justify-content: space-between; gap: 20px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  padding: 0 max(24px, calc((100vw - 1200px) / 2));
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--navy); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.01em; text-decoration: none; flex-shrink: 0;
}

nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.site-header nav a {
  display: inline-flex; align-items: center;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: 7px 16px; color: #3d4f63;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.site-header nav a:hover { background: var(--green-soft); border-color: rgba(54,89,223,.28); color: var(--green); }

/* ── Layout ─────────────────────────────────────── */
main { width: min(1200px, calc(100% - 36px)); margin: 0 auto; }

/* ── Hero ───────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.82fr);
  gap: clamp(28px,5vw,64px);
  align-items: center;
  min-height: 540px;
  padding: 64px 0 32px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 18px;
  background: rgba(54,89,223,.09); border: 1px solid rgba(54,89,223,.2);
  border-radius: var(--r-pill); padding: 5px 14px;
  color: var(--green); font-size: .77rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

h1, h2, h3 { letter-spacing: -.022em; line-height: 1; }
h1 {
  max-width: 780px; margin: 0;
  font-size: clamp(2.8rem,6.5vw,5.8rem); font-weight: 800;
  color: var(--navy); line-height: .94;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 560px; margin: 22px 0 0;
  color: var(--muted); font-size: 1.08rem; line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Buttons ────────────────────────────────────── */
.button {
  display: inline-flex; min-height: 52px;
  align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); padding: 13px 28px;
  font-weight: 700; font-size: .97rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: none; font-family: inherit;
  transition: background 160ms, transform 120ms, box-shadow 160ms;
}
.button:active { transform: scale(.975); }

.primary { background: var(--yellow); color: var(--navy-dark); box-shadow: var(--glow-yellow); }
.primary:hover { background: var(--yellow-hover); box-shadow: 0 10px 36px rgba(230,138,0,.42); transform: translateY(-2px); }

.secondary { background: var(--surface); border: 1.5px solid var(--line); color: var(--navy); }
.secondary:hover { background: #f0f4fa; border-color: rgba(17,24,39,.28); transform: translateY(-2px); }

/* ── Hero Visual ────────────────────────────────── */
.hero-visual {
  position: relative; min-height: 460px;
  border: 1px solid rgba(228,232,239,.7); border-radius: var(--r-2xl);
  background: linear-gradient(145deg,#eef3fb 0%,#e4edf7 50%,#dae7f2 100%);
  padding: 28px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-visual::before {
  content: ""; position: absolute; top: -70px; right: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(244,180,0,.11); pointer-events: none;
}
.hero-visual::after {
  content: ""; position: absolute; bottom: -50px; left: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(54,89,223,.09); pointer-events: none;
}

.panel-illustration {
  position: absolute; top: 56px; right: 32px; left: 32px;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
  transform: rotate(-4deg) scale(.97);
  filter: drop-shadow(0 14px 28px rgba(17,24,39,.2));
}
.panel-illustration div {
  aspect-ratio: 1.3; border-radius: var(--r);
  background:
    linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 50%),
    linear-gradient(160deg,var(--navy) 0%,#1a5276 55%,var(--green) 100%);
  border: 1px solid rgba(255,255,255,.18);
}

.hero-metric {
  position: absolute; left: 22px; bottom: 22px;
  width: min(210px,calc(100% - 44px));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px; box-shadow: var(--shadow-md);
}
.hero-metric-dark { right: 22px; left: auto; bottom: 124px; background: var(--navy); border-color: transparent; color: #fff; }
.hero-metric span { display: block; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.hero-metric-dark span { color: rgba(255,255,255,.55); }
.hero-metric strong { display: block; margin-top: 6px; font-size: 1.5rem; font-weight: 800; color: var(--yellow); line-height: 1; letter-spacing: -.02em; }

.hero-footnote {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: .78rem;
  text-align: right;
}
@media (max-width: 960px) { .hero-footnote { text-align: left; } }

/* ── Topic Strip ─────────────────────────────────── */
.topic-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 28px; }
.topic-strip button {
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); padding: 8px 18px;
  color: var(--muted); font-size: .87rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms, transform 120ms;
}
.topic-strip button:hover { border-color: rgba(54,89,223,.35); color: var(--green); background: var(--green-soft); transform: translateY(-1px); }
.topic-strip button.active { border-color: var(--green); background: var(--green); color: #fff; }

/* ── Content Hub ─────────────────────────────────── */
/* Punkt 1: leicht getönter Hintergrund */
.content-hub {
  border: 1.5px solid rgba(17,24,39,.09); border-radius: var(--r-xl);
  background: var(--tint-blue);         /* ← farbige Fläche */
  padding: clamp(22px,3.5vw,36px); box-shadow: var(--shadow-md); margin-bottom: 28px;
}
.section-heading { max-width: 780px; margin-bottom: 24px; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(1.9rem,4vw,3.2rem); font-weight: 800; color: var(--navy); line-height: 1.06; }

/* Punkt 2: hub-stats entfernt → hub-tools einspaltig */
.hub-tools { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; margin-bottom: 22px; }
.search-box { display: grid; gap: 8px; }
.search-box span { font-size: .85rem; font-weight: 600; color: var(--ink); }

/* ── Inputs / Forms ──────────────────────────────── */
label { display: grid; grid-template-rows: auto 52px; gap: 8px; color: #374151; font-size: .86rem; font-weight: 650; }
label span { display: flex; align-items: center; line-height: 1.2; min-height: 20px; }

input:not([type="checkbox"]):not([type="radio"]),
select {
  width: 100%; height: 52px; min-height: 52px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); padding: 0 18px;
  color: var(--ink); font: inherit; font-size: .97rem;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
  appearance: none; -webkit-appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  appearance: auto; -webkit-appearance: auto;
  width: auto; height: auto; min-height: auto;
  border: revert; border-radius: revert; padding: revert; background: revert;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(17,24,39,.1); background: #fafcff; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(17,24,39,.28); outline-offset: 3px; }
.footer-links a:hover,
.footer-links a:focus,
.footer-links a:focus-visible,
.footer-links a:active { outline: none; background: none; border: none; color: var(--navy); }

/* ── Featured Cards ──────────────────────────────── */
.featured-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }
.featured-card {
  display: grid; gap: 10px; min-height: 180px; align-content: start;
  border: 1.5px solid rgba(17,24,39,.1); border-radius: var(--r-xl);
  background: var(--surface);           /* Featured: weißes Highlight */
  padding: 22px 24px;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.featured-card:hover { border-color: rgba(17,24,39,.3); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.featured-card span, .article-list small { color: var(--green); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.featured-card strong { font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.featured-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.52; }

/* ── Article Shell ───────────────────────────────── */
.article-shell { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px; align-items: start; }

/* Punkt 1 + 3: farbige Sidebar, kompakte Items für 10+ Artikel */
.article-nav {
  position: sticky; top: 84px;
  border: 1.5px solid rgba(17,24,39,.1); border-radius: var(--r-xl);
  background: var(--tint-green);        /* ← farbige Fläche */
  box-shadow: var(--shadow-sm); padding: 18px;
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.library-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(17,24,39,.1); }
.library-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }

.article-list { display: grid; gap: 4px; }

/* Punkt 3: kompakter für 10+ Einträge */
.article-list button {
  width: 100%; min-height: 38px;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  background: rgba(255,255,255,.65); padding: 7px 11px;
  color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.article-list button:hover { background: rgba(255,255,255,.9); border-color: rgba(17,24,39,.15); }
.article-list button.active { background: var(--navy); border-color: transparent; color: #fff; }
.article-list button.active small { color: rgba(255,255,255,.6); }
.article-list button.active em { color: rgba(255,255,255,.55); }
.article-list button strong { display: block; margin-top: 2px; font-size: .88rem; font-weight: 650; line-height: 1.3; }
.article-list button em { display: block; margin-top: 3px; color: var(--muted); font-size: .73rem; font-style: normal; font-weight: 600; }

.empty-state { margin: 0; border: 1.5px dashed rgba(17,24,39,.18); border-radius: var(--r-sm); padding: 16px; color: var(--muted); font-size: .9rem; line-height: 1.5; text-align: center; }

/* ── Article View ────────────────────────────────── */
.article-view {
  min-height: 720px;
  border: 1.5px solid rgba(17,24,39,.09); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding: clamp(26px,4vw,52px);
}
.article-meta {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  background: var(--green-soft); border: 1px solid rgba(54,89,223,.18);
  border-radius: var(--r-pill); padding: 4px 14px;
  color: var(--green); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.article-view h1 { margin: 0 0 22px; font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 800; color: var(--navy); }
.article-view h2 { margin: 38px 0 14px; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.article-view h3 { margin: 28px 0 10px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.article-view p, .article-view li { color: #374151; font-size: 1rem; line-height: 1.77; }
.article-view ul, .article-view ol { padding-left: 22px; }
.article-view blockquote { margin: 30px 0; border-left: 4px solid var(--yellow); border-radius: 0 var(--r) var(--r) 0; background: #fffbea; padding: 18px 22px; color: #6b4a0f; font-style: normal; }
.article-view table { width: 100%; margin: 26px 0; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: .93rem; }
.article-view th, .article-view td { border-bottom: 1px solid var(--line); padding: 13px 16px; text-align: left; vertical-align: top; }
.article-view th { background: var(--navy); color: #fff; font-weight: 700; font-size: .84rem; letter-spacing: .03em; }
.article-view tr:last-child td { border-bottom: none; }
.article-view tr:nth-child(even) td { background: var(--tint-blue); }
.article-view a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(54,89,223,.38); }
.article-view a:hover { color: var(--navy); }

/* ── Newsletter ──────────────────────────────────── */
.newsletter-section {
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(320px,1.05fr);
  gap: 28px; align-items: center;
  margin-top: 28px; margin-bottom: 28px;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 55%,#1e5f4a 100%);
  padding: clamp(28px,5vw,52px); color: #fff;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.newsletter-section::before { content: ""; position: absolute; top: -90px; right: -90px; width: 320px; height: 320px; border-radius: 50%; background: rgba(244,180,0,.09); pointer-events: none; }
.newsletter-section::after  { content: ""; position: absolute; bottom: -60px; left: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(54,89,223,.12); pointer-events: none; }
.newsletter-section h2 { max-width: 560px; margin: 8px 0 0; font-size: clamp(1.8rem,3.8vw,3.2rem); font-weight: 800; color: #fff; line-height: 1.08; }
.newsletter-section p:not(.eyebrow) { max-width: 540px; margin: 16px 0 0; color: rgba(255,255,255,.68); font-size: .97rem; line-height: 1.67; }
.newsletter-section .eyebrow { background: rgba(244,180,0,.16); border-color: rgba(244,180,0,.38); color: var(--yellow); }

/* Punkt 4: KlickTipp Formular */
.newsletter-form { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); background: rgba(255,255,255,.97); padding: 24px; color: var(--ink); }
.newsletter-form form { display: grid; gap: 16px; }

.ktv2-form-element { display: grid; gap: 6px; }
.ktv2-form-element label { display: block; grid-template-rows: none; color: var(--ink); font-size: .86rem; font-weight: 650; margin-bottom: 0; }
.ktv2-form-element br { display: none; }
.ktv2-form-element input[type="text"] {
  width: 100%; height: 52px; min-height: 52px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); padding: 0 18px;
  color: var(--ink); font: inherit; font-size: .97rem;
  transition: border-color 150ms, box-shadow 150ms;
  appearance: none; -webkit-appearance: none;
}
.ktv2-form-element input[type="text"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(17,24,39,.1); }

.ktv2-form-dsgvocheckbox { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; }
.ktv2-form-dsgvocheckbox br { display: none; }
.ktv2-form-dsgvocheckbox input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; margin-top: 3px; border-radius: 4px; accent-color: var(--green); }
.ktv2-form-dsgvocheckbox label { display: grid; gap: 6px; grid-template-rows: auto; color: #374151; font-size: .83rem; font-weight: 500; line-height: 1.47; }
.ktv2-form-dsgvocheckbox label span { display: block; min-height: 0; line-height: 1.5; }
.ktv2-form-dsgvocheckbox label span:last-child { color: var(--muted); font-size: .83rem; }
.ktv2-form-dsgvocheckbox label a { display: inline; }

/* Inline-Styles von KlickTipp überschreiben */
.ktv2-form-dsgvocheckbox label span[style] { font-size: inherit !important; color: inherit !important; }

.newsletter-form input[type="submit"] {
  width: 100%; min-height: 52px; border: none; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy-dark);
  font: inherit; font-size: .97rem; font-weight: 700; cursor: pointer;
  transition: background 150ms, box-shadow 150ms, transform 120ms;
}
.newsletter-form input[type="submit"]:hover { background: var(--yellow-hover); box-shadow: var(--glow-yellow); transform: translateY(-1px); }

/* ── Calculator ──────────────────────────────────── */
/* Punkt 1: farbige Flächen */
.calculator-section {
  border: 1.5px solid rgba(17,24,39,.09); border-radius: var(--r-xl);
  background: var(--tint-blue);          /* ← farbige Fläche */
  box-shadow: var(--shadow-md); padding: clamp(24px,3.5vw,40px); margin-top: 28px;
}
.calculator-grid { display: grid; grid-template-columns: minmax(320px,.95fr) minmax(0,1.05fr); gap: 20px; }
.calculator { border: 1.5px solid rgba(17,24,39,.1); border-radius: var(--r-lg); background: rgba(255,255,255,.7); padding: 22px; }
.input-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(86px,auto); gap: 14px; margin-bottom: 18px; }

.calculator-results { display: grid; gap: 14px; }
.result-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }

.result-card {
  min-height: 122px;
  border: 1.5px solid rgba(17,24,39,.1); border-radius: var(--r-xl);
  background: var(--surface);            /* weiße Karten auf blauem Grund */
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.result-card.highlight { min-height: 158px; background: var(--navy); border-color: transparent; color: #fff; box-shadow: var(--shadow-md); }
.result-card span { display: block; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.result-card.highlight span, .result-card.highlight p { color: rgba(255,255,255,.58); }
.result-card strong { display: block; margin-top: 8px; font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.result-card.highlight strong { color: var(--yellow); }
.result-card:not(.highlight) strong { color: var(--navy); }
.result-card p { margin: 12px 0 0; font-size: .9rem; line-height: 1.52; }

/* ── Money Pages ─────────────────────────────────── */
/* Punkt 1: farbige Flächen */
.money-pages {
  border: 1.5px solid rgba(17,24,39,.09); border-radius: var(--r-xl);
  background: var(--tint-green);         /* ← farbige Fläche */
  box-shadow: var(--shadow-md); padding: clamp(24px,3.5vw,40px);
  margin-top: 28px; margin-bottom: 28px;
}
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.product-grid article {
  display: flex; flex-direction: column; gap: 10px;  /* flex statt grid → Button ans Ende */
  border: 1.5px solid rgba(17,24,39,.1); border-radius: var(--r-xl);
  background: var(--surface);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.product-grid article:hover { border-color: rgba(17,24,39,.28); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-grid strong { font-size: 1.03rem; font-weight: 700; color: var(--navy); }
.product-grid p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.52; flex: 1; } /* flex:1 füllt Restraum */
.product-grid a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;                                   /* Button immer unten */
  align-self: flex-start;
  background: var(--green-soft); border: 1px solid rgba(54,89,223,.22);
  border-radius: var(--r-pill); padding: 8px 16px;
  color: var(--green); font-weight: 700; font-size: .86rem; text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.product-grid a:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  width: min(1200px,calc(100% - 36px)); margin: 0 auto;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 0 44px; color: var(--muted); font-size: .87rem;
}
.copyright { margin: 0; font-weight: 500; }

/* Impressum & Datenschutz: schlichte Textlinks */
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer-links a {
  display: inline; border: none; outline: none;
  background: none; padding: 0; border-radius: 0;
  color: var(--muted); font-weight: 600; font-size: .87rem;
  text-decoration: none; transition: color 150ms;
}
.footer-links a:hover { color: var(--navy); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 960px) {
  .hero, .article-shell, .newsletter-section, .calculator-grid { grid-template-columns: 1fr; }
  .hero { gap: 36px; }
  .article-nav { position: static; max-height: none; }
  .article-list { grid-template-columns: repeat(2,1fr); }
  .featured-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 660px) {
  .site-header { position: static; flex-direction: column; align-items: flex-start; padding: 14px 16px; gap: 12px; }
  main, .site-footer { width: calc(100% - 24px); }
  .hero { min-height: auto; padding-top: 30px; }
  .hero-visual { min-height: 360px; }
  .panel-illustration { top: 52px; right: 22px; left: 22px; }
  .hero-metric, .hero-metric-dark { right: 16px; left: 16px; width: auto; }
  .hero-metric-dark { bottom: 110px; }
  .featured-grid { grid-template-columns: 1fr; }
  .article-list, .hub-tools, .input-grid, .result-cards, .product-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 32px; }
}

/* 2026 visual refresh */
:root {
  --navy: #111827;
  --navy-dark: #0b1220;
  --navy-light: #2d4383;
  --green: #3659df;
  --green-soft: #edf1ff;
  --yellow: #ffc66b;
  --yellow-hover: #ffd58c;
  --bg: #f7f8fc;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #626f83;
  --line: #e0e6f0;
  --tint-blue: #eef3ff;
  --tint-green: #edf2ff;
  --tint-yellow: #fff7e9;
  --shadow-sm: 0 2px 12px rgba(18,36,75,.05);
  --shadow-md: 0 12px 34px rgba(18,36,75,.09);
  --shadow-lg: 0 28px 70px rgba(18,36,75,.14);
  --r-lg: 24px;
  --r-xl: 30px;
  --r-2xl: 36px;
  font-family: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
body { overflow-x: hidden; }
.site-header { min-height: 80px; background: rgba(247,248,252,.94); box-shadow: none; }
.brand { font-size: 1.2rem; letter-spacing: -.055em; }
.brand-accent { color: var(--green); }
.site-header nav a { color: var(--navy); }
.site-header nav a:last-child { border-color: var(--navy); }
.hero { min-height: 590px; padding: 72px 0 54px; grid-template-columns: minmax(0, 1fr) minmax(340px, .88fr); }
.hero .eyebrow { background: transparent; border: 0; padding: 0; letter-spacing: .14em; }
h1 { font-size: clamp(3.2rem, 6vw, 6.2rem); line-height: 1.01; letter-spacing: -.065em; }
h1 span { color: var(--green); }
.hero-copy > p:not(.eyebrow) { max-width: 600px; font-size: 1.16rem; color: #59677e; }
.hero-actions { margin-top: 34px; }
.button { border-radius: 12px; min-height: 54px; }
.primary { background: var(--navy); color: #fff; box-shadow: none; }
.primary:hover { background: var(--green); box-shadow: var(--shadow-md); }
.secondary { background: transparent; border-color: #bcc8dd; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 36px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.hero-trust span::before { content: "✓"; color: var(--green); margin-right: 7px; }
.hero-visual { min-height: 490px; border: 0; border-radius: 34px; background: radial-gradient(circle at 78% 22%, #ffd37e 0 14%, transparent 14.2%), linear-gradient(145deg,#e2edff 0%,#abc6f8 62%,#7799e7 100%); box-shadow: var(--shadow-lg); }
.hero-visual::before { top: auto; right: 0; bottom: 0; width: 100%; height: 42%; border-radius: 0; background: linear-gradient(155deg,transparent 0 25%,#4264ae 25.2% 30%,#e4ecfb 30.2% 100%); opacity: .9; }
.hero-visual::after { display: none; }
.panel-illustration { top: 105px; right: 54px; left: 54px; gap: 8px; transform: rotate(-8deg); filter: drop-shadow(0 22px 18px rgba(21,44,91,.27)); }
.panel-illustration div { aspect-ratio: 1.45; border-radius: 4px; background: repeating-linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.15) 23.4% 24%,transparent 24.4% 49%), repeating-linear-gradient(0deg,transparent 0 23%,rgba(255,255,255,.14) 23.4% 24%,transparent 24.4% 49%), linear-gradient(140deg,#19375f,#102742); border: 5px solid #e7efff; }
.hero-metric { bottom: 24px; left: 24px; width: 220px; border: 0; border-radius: 18px; }
.hero-metric-dark { bottom: 115px; right: 24px; left: auto; width: 210px; }
.hero-metric strong { font-size: 1.18rem; line-height: 1.2; color: var(--navy); }
.hero-metric-dark strong { color: #fff; }
.intro-strip { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 0 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intro-strip span { padding: 21px 24px; font-size: .9rem; font-weight: 650; color: var(--navy); }
.intro-strip span + span { border-left: 1px solid var(--line); }
.intro-strip b { color: var(--green); margin-right: 14px; font-size: .76rem; letter-spacing: .1em; }
.content-hub, .calculator-section, .money-pages { border: 0; box-shadow: none; border-radius: 30px; padding: clamp(25px,4vw,52px); }
.content-hub { background: #edf2ff; }
.calculator-section { background: #eef2fa; }
.money-pages { background: #fff3df; }
.section-heading { max-width: 800px; }
.section-heading h2 { font-size: clamp(2.1rem,4.2vw,3.5rem); letter-spacing: -.05em; }
.section-intro { max-width: 700px; color: var(--muted); margin: 14px 0 0; }
.search-box label { display: block; font-size: .86rem; font-weight: 650; }
input:not([type="checkbox"]):not([type="radio"]), select { border-radius: 12px; }
.featured-card, .article-view, .result-card, .product-grid article { border-radius: 20px; box-shadow: none; }
.article-nav { border-radius: 20px; }
.featured-card { min-height: 200px; }
.featured-card:hover, .product-grid article:hover { transform: translateY(-2px); }
.newsletter-section { border-radius: 30px; background: linear-gradient(135deg,#121c33,#293f85); }
.newsletter-section::after { background: rgba(115,150,255,.16); }
.newsletter-form { border-radius: 20px; }
.newsletter-form input[type="submit"] { border-radius: 12px; background: var(--yellow); }
.calculator { border-radius: 20px; }
.calculator-note { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.result-card.highlight { background: var(--navy); }
.result-card.highlight strong { color: var(--yellow); }
.product-grid article { min-height: 245px; gap: 15px; }
.product-grid strong { font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.2; }
.product-grid a { border-radius: 10px; background: var(--green-soft); }
.recommendation-number { color: var(--green); font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.legal-page { width: min(780px, calc(100% - 36px)); margin: 64px auto 90px; padding: clamp(26px,5vw,58px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.legal-page h1 { font-size: clamp(2.4rem,5vw,3.7rem); margin: 20px 0 35px; }
.legal-page p { line-height: 1.75; color: #425069; }
.legal-page h2 { margin: 32px 0 10px; font-size: clamp(1.2rem,2vw,1.45rem); line-height: 1.25; color: var(--navy); }
.legal-page h2 + p { margin-top: 0; }
.legal-page a:not(.legal-back) { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-page code { overflow-wrap: anywhere; font-size: .9em; }
.legal-back { color: var(--green); font-weight: 700; text-decoration: none; }
.legal-back::before { content: "← "; }
.legal-page h3 { margin: 25px 0 8px; font-size: 1.08rem; line-height: 1.35; color: var(--navy); }
.legal-page ul { padding-left: 1.45rem; color: #425069; line-height: 1.75; }
.legal-page li + li { margin-top: .5rem; }
.privacy-page { width: min(940px, calc(100% - 36px)); }
.privacy-page h1 { margin-bottom: 30px; line-height: 1.08; }
.privacy-page h2 { margin: 48px 0 22px; padding-top: 28px; border-top: 1px solid var(--line); font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.25; }
.privacy-page h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.privacy-page h3 { margin: 32px 0 12px; font-size: 1.24rem; line-height: 1.35; }
.privacy-page h4 { margin: 23px 0 7px; color: var(--navy); font-size: 1.03rem; line-height: 1.45; }
.privacy-page p, .privacy-page li { margin: 0 0 17px; color: #34445b; font-size: 1.02rem; line-height: 1.8; }
.privacy-page h3 + p, .privacy-page h4 + p { margin-top: 0; }
.privacy-page ul, .privacy-page ol { margin: 18px 0 24px; padding-left: 1.7rem; }
.privacy-page li { padding-left: .25rem; }
.privacy-page li + li { margin-top: 14px; }
.privacy-page .privacy-steps { padding-left: 1.9rem; }
.privacy-page .privacy-steps li::marker { color: var(--green); font-weight: 700; }
@media (max-width: 660px) { .privacy-page { width: min(100% - 24px, 940px); padding: 24px 20px 40px; } .privacy-page h2 { margin-top: 38px; } }
.contact-page { width: min(1050px, calc(100% - 36px)); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 38px; margin-top: 32px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.contact-field label { display: block; margin-bottom: 7px; font-weight: 700; color: var(--navy); }
.contact-field input, .contact-field textarea { display: block; width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font: inherit; }
.contact-field textarea { resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline: 3px solid rgba(44, 110, 175, .18); border-color: var(--green); }
.contact-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.55; color: #425069; }
.contact-consent input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--green); }
.contact-consent label { display: block; grid-template-rows: none; gap: 0; color: inherit; font-size: inherit; font-weight: 400; line-height: inherit; cursor: pointer; }
.contact-consent label a { display: inline; }
.contact-form .button { align-self: flex-start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.contact-form .contact-note { margin: -6px 0 0; font-size: .8rem; }
.contact-status { margin: 0; padding: 12px 15px; border-radius: 12px; }
.contact-status.success { background: #e8f7ed; border: 1px solid #9bd3ad; color: #155d2c; }
.contact-status.error { background: #fff0f0; border: 1px solid #f1a4a4; color: #9b2020; }
.contact-info { align-self: start; padding: 25px; border-radius: 18px; background: var(--green-soft); }
.contact-info h2 { margin-top: 0; }
.contact-info p { overflow-wrap: anywhere; }
.contact-info strong { color: var(--navy); }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#kontaktForm { scroll-margin-top: 100px; }
@media (max-width: 700px) { .contact-layout { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } .hero-visual { min-height: 440px; } }
@media (max-width: 660px) {
  .site-header { gap: 14px; padding: 15px 18px; }
  .site-header nav { width: 100%; justify-content: space-between; }
  .site-header nav a { padding: 7px 9px; font-size: .8rem; }
  .hero { padding: 45px 0 35px; gap: 30px; }
  .hero-visual { min-height: 350px; }
  .panel-illustration { top: 55px; left: 42px; right: 42px; }
  .hero-metric { left: 12px; bottom: 12px; width: 51%; padding: 13px; }
  .hero-metric-dark { left: auto; right: 12px; bottom: 90px; width: 53%; }
  .hero-metric strong { font-size: .95rem; }
  .intro-strip { grid-template-columns: 1fr; margin-bottom: 25px; }
  .intro-strip span { padding: 12px 4px; }
  .intro-strip span + span { border-left: 0; border-top: 1px solid var(--line); }
  .content-hub, .calculator-section, .money-pages { padding: 20px 16px; border-radius: 20px; }
  .article-view { overflow-x: auto; }
  .article-view table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }