/* ===== Tokens ===== */
:root{
  --brand:#0F2A59;
  --blue:#2267D6;
  --blue-600:#1b57c8;
  --blue-100:#eaf1ff;
  --blue-200:#d7e4ff;
  --wa:#25D366;

  --bg:#F4F7FC;
  --card:#FFFFFF;
  --text:#0F1B2D;
  --muted:#55637A;
  --line:#E2E8F0;
  --border:#E2E8F0;

  --radius:16px;
  --shadow-soft:0 10px 26px rgba(15,27,45,.08);
  --shadow-strong:0 18px 40px rgba(15,27,45,.14);
  --ring:#9cc2ff;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;color:var(--text);background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.container{width:min(1160px,100% - 32px);margin-inline:auto}
.section{padding:60px 0}
.section--alt{background:#F8FAFE}
.section__title{font-size:clamp(24px,3.2vw,36px);margin:0 0 18px}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--brand);
  color:#fff;
  font-size:14px;
  position: sticky;
  top: 0;
  z-index: 1200;
}
.topbar .container{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:7px 0;
}
.topbar a{color:#fff;opacity:.95}

/* ---------- Header / Navigation ---------- */
.header{
  position:sticky; top:0; z-index:1000;
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

/* Bar: links Marke, rechts Hamburger */
.header .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:12px 0; min-height:72px;
}

/* Marke */
.brand{display:flex; align-items:center; gap:12px; color:var(--text); font-weight:800; letter-spacing:.2px}
.brand__logo-img{
  display:block;
  height:64px;         /* etwas größer & schärfer */
  width:auto;
  max-width:100%;
}
@media (max-width:900px){
  .brand__logo-img{ height:52px; } /* mobil kompakter */
}
.brand__name{font-size:18px;color:var(--brand)}

/* Desktop-Navigation (Pill-Tabs) */
.nav{display:flex; align-items:center}
.nav__list{
  display:flex; gap:12px; align-items:center; margin:0; padding:0; list-style:none;
}
.nav__link{
  display:inline-flex; align-items:center; line-height:1;
  padding:12px 16px; border-radius:999px; font-weight:700; letter-spacing:.05px;
  color:var(--text); transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav__link:hover{ background:#F3F6FD }
.nav__link.is-active,
.nav__link[aria-current="page"]{
  background:var(--blue-100); color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue-200), 0 6px 14px rgba(34,103,214,.12);
}

/* Hamburger-Button */
.nav__toggle{display:none}

/* -------- Mobile-Layout: Nur Marke + Hamburger sichtbar -------- */
@media (max-width:900px){
  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:#fff; padding:8px 10px; border-radius:10px;
    cursor:pointer;
  }
  .nav{
    display:none;                 /* Dropdown erst nach Toggle */
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft);
  }
  .nav.open{ display:block; }
  .nav__list{
    flex-direction:column; align-items:stretch; padding:8px; gap:6px;
  }
  .nav__link{ padding:14px 12px; border-radius:12px }
}

/* ===== Hero ===== */
.hero{position:relative;min-height:58vh;display:grid;align-items:center;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;image-rendering:auto}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(15,42,89,.78) 0%, rgba(15,42,89,.55) 48%, rgba(15,42,89,.20) 75%, rgba(15,42,89,0) 100%);
}
.hero__content{position:relative;padding:64px 16px 76px;display:grid;gap:18px}
.hero h1{font-size:clamp(28px,3.6vw,46px);line-height:1.15;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.hero__lead{font-size:clamp(16px,2vw,20px);color:#E6EEF8;max-width:64ch}
.hero__hint{color:#E6EEF8}

/* CTA-Layouts – symmetrisch */
.hero__actions{
  display:grid; gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width:720px;
}
@media (min-width:768px){
  .hero__actions{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;padding:12px 16px;font-weight:700;border:1px solid transparent;
  transition:.2s;cursor:pointer; min-height:44px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 10px 28px rgba(34,103,214,.28)}
.btn-primary:hover{filter:brightness(.96)}
.btn-ghost{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:saturate(120%) blur(2px)}
.btn-ghost:hover{background:rgba(255,255,255,.32)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-wa{background:transparent;color:var(--wa);border:1px solid var(--wa)}
.btn-wa:hover{background:var(--wa);color:#fff}

/* Outline-Buttons auf hellem Untergrund */
.btn-outline--blue{ color: var(--blue); border-color: var(--blue); }
.btn-outline--blue:hover{ background: var(--blue-100); text-decoration: none; }

/* Kleine Buttons */
.btn-sm{ padding:10px 14px; font-size:.95rem; }

/* Einheitliche Button-Breiten in Reihen (symmetrisch) */
.btn-row{ display:grid; gap:10px; grid-template-columns: repeat(3, minmax(220px,1fr)); }
@media (max-width:760px){ .btn-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .btn-row{ grid-template-columns: 1fr; } }

/* ===== Cards & Grid ===== */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height: 100%;
}
.card__img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
.card__body{padding:18px; display:flex; flex-direction:column; gap:10px}
.card__title{margin:0 0 6px;font-size:clamp(16px,2.2vw,20px);font-weight:800}
.card__text{margin:0;color:var(--muted);font-size:clamp(14px,2vw,16px);line-height:1.55}

/* Karten als Link */
.card--link{position:relative}
.card__a{display:block;color:inherit;text-decoration:none}
.card__a:hover .card__title{text-decoration:underline}
.card__cta{display:inline-block;margin-top:10px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* Einheitliche Kartenhöhe innerhalb eines Grids */
.grid-3 > .card{ height:100%; }

/* ===== Footer ===== */
.site-footer{background:#0E2A4A;color:#e7eef8;padding:28px 0;margin-top:24px}
.site-footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer__bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer__nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.footer__copy{white-space:nowrap}
@media (max-width:800px){.site-footer__bar{flex-direction:column;align-items:flex-start}}

/* ===== USP-Liste (Startseite) ===== */
#usps .section__title { margin-bottom: 16px; }
.usp-list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 880px){ .usp-list{ grid-template-columns: 1fr 1fr; } }
.usp-list li{
  position: relative;
  padding: 14px 16px 14px 44px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft); color: var(--text);
}
.usp-list li::before{
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 999px; background: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,103,214,.16);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px 16px no-repeat;
}

/* ===== Subnav (nur mobil) ===== */
.subnav{ display:none; }
@media (max-width:900px){
  .subnav{
    display:block; background:#fff; border-bottom:1px solid var(--line);
    position: relative; z-index:1100;
  }
  .subnav__inner{
    display:flex; align-items:center; gap:8px; padding:8px 0; min-height:44px;
  }
  .subnav__track{
    display:flex; gap:8px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:2px;
  }
  .subnav__link{
    display:inline-flex; align-items:center; padding:10px 12px;
    border-radius:999px; background:#F3F6FD; white-space:nowrap; color:var(--text);
  }
  .subnav__link.is-active{ background:var(--blue-100); color:var(--blue); }
  .subnav__arrow{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; line-height:1; font-size:28px;
    border:1px solid var(--line); border-radius:50%;
    background:#fff; box-shadow:var(--shadow-soft); user-select:none;
    touch-action: manipulation;
  }
  /* Einheitliche, feste Position der mobilen Pfeile */
.subnav__prev,
.subnav__next {
  position: fixed;      /* bleibt ruhig beim Scrollen */
  top: 108px;           /* vorher 64px → jetzt unter dem Logo */
  z-index: 1100;
}

.subnav__prev { left: 12px; }
.subnav__next { right: 12px; }

}

/* ===== CTA-Reihen (generisch) ===== */
.cta-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.cta-row .btn{ max-width:100%; }
@media (min-width:640px){
  .cta-row{
    display:grid; grid-template-columns: repeat(3, max-content);
    justify-content:start; align-items:center; gap:10px;
  }
}

/* ============ Energie-Upload: Formular-Polish ============ */
#upload .card { border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
#upload .card__body { padding: 24px; }
@media (min-width: 900px){ #upload .card__body { padding: 28px; } }

.u-legend{
  font-weight: 800; color: var(--text); padding: 0; margin: 0 0 12px;
}
#upload fieldset{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; background: #fff;
}
.u-mb16{ margin-bottom:16px; }
.u-mt8{ margin-top:8px; }

/* Dropzone */
.dropzone{
  display:block; width:100%;
  border: 2px dashed var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: 14px; background: #FAFCFF;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer; position:relative; overflow:hidden;
}
.dropzone input{ position:absolute; inset:0; opacity:0; pointer-events:all; }
.dropzone__inner{ display:flex; gap:12px; align-items:center; }
.dropzone__icon{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background: var(--blue-100); color: var(--blue);
  font-size: 18px; font-weight: 800;
}
.dropzone:hover{ border-color: var(--blue-200); background:#F3F8FF; }
.dropzone:has(input:focus-visible){ outline:3px solid var(--ring); outline-offset:2px; }
.dropzone.dragover{ border-color: var(--blue); background:#EAF2FF; box-shadow: 0 0 0 4px rgba(34,103,214,.10) inset; }

/* Form-Grid */
.form-grid{
  display:grid; gap:14px; grid-template-columns: 1fr; margin-top: 16px;
}
@media (min-width: 760px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
  .form-field--full{ grid-column: 1 / -1; }
}

/* Inputs */
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field > span{
  font-weight:700; color:var(--text); font-size: .98rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select, textarea{
  appearance:none; width:100%;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background:#fff; color: var(--text); font-size: 1rem; line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color:#98A2B3; }
input:focus, select:focus, textarea:focus{
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,103,214,.18); outline: 0;
}
select{
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(50% - 5px),
                       calc(100% - 13px) calc(50% - 5px),
                       100% 0;
  background-size: 6px 6px, 6px 6px, 2.5rem 2.5rem;
  background-repeat: no-repeat; padding-right: 44px;
}

/* Consent */
.consent{
  display:flex; align-items:flex-start; gap:10px;
  margin: 12px 0 4px; color: var(--muted); font-size: .95rem;
}
.consent input{ transform: translateY(3px); }

/* Actions */
.u-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 8px; align-items:center; }
.btn[disabled], button[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none !important; }

/* Hinweise */
.u-hinweise{ margin: 16px 0 0; padding-left: 18px; color: var(--muted); font-size: .96rem; }
.u-hinweise li{ margin: 6px 0; }

/* Section-Titel näher ans Formular */
#upload .section__title{ margin-bottom: 14px; }

/* Hero-Anchor */
.link-hero{ text-decoration:none !important; }

/* WhatsApp neben Absenden */
#upload .btn.btn-wa{ border:1px solid var(--wa); color:var(--wa); background:transparent; }
#upload .btn.btn-wa:hover{ background:var(--wa); color:#fff; text-decoration:none; }

/* Chips / Previews */
.hidden{display:none}
.file-chip{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-soft); margin-top:10px;
}
.file-thumb{width:42px; height:42px; border-radius:10px; background:#f1f5fb; display:grid; place-items:center; overflow:hidden}
.file-thumb img{width:100%; height:100%; object-fit:cover}
.file-meta{min-width:0}
.file-name{display:block; max-width:56ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-actions{margin-left:auto; display:flex; gap:8px}
.chip-btn{border:1px solid var(--line); background:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
.chip-btn--danger{border-color:#f3b1b1; color:#a40000; background:#fff5f5}

.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#eef3ff; border:1px solid #dbe6ff; color:#2c56b8; margin-right:6px}

/* ===== „So funktioniert’s“ – Premium-Layout ===== */
/* Karten gleich hoch, Buttons sauber ausgerichtet */
#so-funktionierts .grid-3{ align-items:stretch; }
#so-funktionierts .card__body{ display:flex; flex-direction:column; gap:12px; }
#so-funktionierts .card__body .btn{ margin-top:auto; } /* Button nach unten – überall gleiche Optik */
/* === Toast: bessere Lesbarkeit des Texts === */
.toast span{
  line-height: 1.45;
  display: inline-block;
  text-align: left;
  max-width: 320px;
}
/* --- Footer: zweispaltig auf Desktop, gestapelt auf Mobile --- */
.site-footer{
  background:#0E2A4A; color:#E7EEF8; padding:26px 0; margin-top:24px;
}
.site-footer a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.site-footer a:hover{ text-decoration:underline; }

/* Ein Container-Name, der überall gleich ist */
.site-footer .footer-bar{
  display:flex; flex-direction:column; gap:12px;
}

/* Linkgruppe links */
.footer__nav{ display:flex; flex-wrap:wrap; gap:14px 18px; }

/* Copy rechts (auf Desktop), darunter (auf Mobile) */
.footer__copy{ opacity:.9; }

/* Desktop: wirklich zwei Spalten */
@media (min-width: 900px){
  .site-footer .footer-bar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;   /* Links links, Copy rechts */
  }
}
/* ============================================
   Perfekte Ausrichtung für 3-Schritte-Karten
   ============================================ */
#so-funktionierts .grid-3 {
  align-items: stretch;
}

#so-funktionierts .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#so-funktionierts .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 28px; /* etwas mehr "optische Luft" */
}

/* Buttons exakt bündig */
#so-funktionierts .card__body .btn-row,
#so-funktionierts .card__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Gemeinsame Mindesthöhe für alle drei Boxen */
#so-funktionierts .card__body {
  min-height: 260px; /* feinabgestimmt */
}

/* Mobile Ansicht bleibt unverändert */
@media (max-width: 760px) {
  #so-funktionierts .grid-3 {
    grid-template-columns: 1fr;
  }
}
/* ==== Header-Optimierung: klarer, kompakter, Logo stabilisiert ==== */
.header {
  background: #ffffff;                  /* sauberes Weiß, neutral */
  border-bottom: 1px solid #E2E8F0;     /* dezente Linie für Struktur */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* sanfter Schatten, kein Balken */
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ==== Header-Optimierung: klarer, kompakter, Logo stabilisiert ==== */
.header {
  background: #ffffff;                  /* sauberes Weiß, neutral */
  border-bottom: 1px solid #E2E8F0;     /* dezente Linie für Struktur */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* sanfter Schatten, kein Balken */
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Logo leicht größer und optisch mittig */
.brand__logo-img {
  height: 78px;                         /* etwas größer für Präsenz */
  margin-top: 2px;                      /* gleicht die weiße Lücke oben aus */
}

@media (max-width: 900px) {
  .brand__logo-img {
    height: 64px;
    margin-top: 0;
  }
}

.partner-logos img{ height:32px; width:auto; vertical-align:middle }
@media (max-width:900px){ .partner-logos img{ height:26px } }
.brand-disclaimer{ display:block; margin-top:.5rem; font-size:.85rem; color:#6b7280 }
/* === WhatsApp-Link in der Topbar entfernen === */
.topbar a[href*="wa.me"],
.topbar a[href*="whatsapp"]{
  display: none !important;
}
.header .bar{ min-height: 92px; }          /* Platz für großes Logo */

.brand__logo-img{
  height: 96px;                            /* Desktop-Größe */
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
@media (max-width:900px){
  .header .bar{ min-height: 76px; }
  .brand__logo-img{ height: 72px; }        /* Mobile-Größe */
}

/* USP-Checks sauber zentrieren (Override) */
.usp-list{ list-style:none; padding:0; margin:0 }

/* Text und Check nebeneinander */
.usp-list li{
  position:relative;
  display:flex; 
  align-items:center;          /* vertikal zentriert */
  padding:14px 18px 14px 48px; /* Platz für das Häkchen links */
}

/* bestehendes Häkchen mittig links ausrichten */
.usp-list li::before{
  position:absolute !important;
  left:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:20px !important;
  height:20px !important;
}

/* Falls irgendwo zusätzlich ein ::after-Icon gesetzt ist: deaktivieren */
.usp-list li::after{ content:none !important; }


/* Logo + Unterzeile als vertikale Einheit */
.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;               /* mittig unterm Logo */
  gap:4px;                          /* Abstand Logo ↔ Unterzeile */
  text-decoration:none;
}

.brand__logo-img{
  height:64px;                      /* Desktop: 64px → scharf */
  width:auto;
}
@media (max-width:900px){
  .brand__logo-img{ height:56px; }  /* Mobile etwas größer als 52px hilft der Lesbarkeit */
}

/* Unterzeile: scharf, ruhig, markenkonform */
.brand__tagline{
  font-size:12px;                   /* 12–13px ist sweet spot */
  line-height:1.1;
  letter-spacing:.02em;
  color:#0F2A59;                    /* Markenblau */
  font-weight:600;                  /* halbfett für Klarheit */
  white-space:nowrap;               /* bei Platzmangel nicht umbrechen */
}

/* Wenn sehr wenig Platz ist, Unterzeile mobil ausblenden (optional) */
@media (max-width:420px){
  .brand__tagline{ display:none; }
}

/* ===== Buttons: Overrides ===== */

/* 1) WhatsApp-Button: immer grün, nicht nur bei :hover  */
a.btn[href*="wa.me"],
a.btn[href*="whatsapp"],
.button[href*="wa.me"],
.button[href*="whatsapp"],
.btn--wa {
  background: var(--wa) !important;     /* #25D366 */
  border-color: var(--wa) !important;
  color: #fff !important;
}
a.btn[href*="wa.me"]:hover,
a.btn[href*="whatsapp"]:hover,
.button[href*="wa.me"]:hover,
.button[href*="whatsapp"]:hover,
.btn--wa:hover {
  filter: brightness(0.95);
}

/* 2) „Durchsichtige“/Ghost/Outline-Buttons: wie Primary blau */
.btn--ghost,
.btn-ghost,
.btn--outline,
.btn-outline,
.button--ghost,
.button--outline {
  background: var(--blue) !important;    /* gleiche Farbe wie Registrieren */
  border-color: var(--blue) !important;
  color: #fff !important;
}
.btn--ghost:hover,
.btn-ghost:hover,
.btn--outline:hover,
.btn-outline:hover,
.button--ghost:hover,
.button--outline:hover {
  filter: brightness(0.95);
}

/* 3) Falls Icons im Button eine eigene Farbe haben */
.btn svg, .button svg { fill: currentColor; }