/* Kräftiger Karten-CTA-Banner (vollflächig blau) für Ratgeber/Guides.
   Eigene, versionierte Datei – die bestehenden Stylesheets bleiben unberührt.
   Verwendung: <aside class="karte-banner"> … </aside>, Variante .kompakt für
   schlankere Banner mitten im Text. */

.karte-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
  border-radius:16px;padding:26px 24px;margin:30px 0;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  box-shadow:0 12px 30px rgba(37,99,235,.28);
}
/* dezenter Lichtkreis als Deko, bricht die Fläche auf */
.karte-banner::after{
  content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;
}
.karte-banner > *{position:relative;z-index:1}
.karte-banner .kb-titel{
  margin:0;font-size:22px;font-weight:800;line-height:1.2;
  letter-spacing:-.01em;color:#fff;
}
.karte-banner .kb-sub{
  margin:0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.92);
  max-width:54ch;
}
.karte-banner .kb-knopf{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#1d4ed8;font-weight:750;font-size:16px;
  padding:14px 26px;border-radius:12px;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 10px rgba(16,24,40,.16);transition:background .15s,transform .15s;
}
.karte-banner .kb-knopf:hover{background:#eef4ff;transform:translateY(-1px)}
.karte-banner .kb-knopf:active{transform:translateY(0)}

/* schlankere Variante für Banner mitten im Fließtext */
.karte-banner.kompakt{padding:18px 22px;gap:10px}
.karte-banner.kompakt .kb-titel{font-size:18.5px}

@media (min-width:720px){
  .karte-banner{
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:28px 32px;gap:28px;
  }
  .karte-banner.kompakt{padding:20px 26px}
  .karte-banner .kb-knopf{flex:none}
}

/* Header-CTA: "Zur Karte" als praesenter, gefuellter Button auf ALLEN Seiten.
   Scoped per href, damit kein HTML geaendert werden muss. */
.kopf-link[href="/karte/"]{
  background:var(--frei,#2563eb);color:#fff;
  padding:8px 16px;border-radius:999px;line-height:1;
  box-shadow:0 2px 8px rgba(37,99,235,.28);
  transition:background .15s,transform .15s;
}
.kopf-link[href="/karte/"]:hover{background:var(--frei-tief,#1d4ed8);color:#fff;transform:translateY(-1px)}
.kopf-link[href="/karte/"]:active{transform:translateY(0)}