:root{
  --responz-blue:#234B73;  /* Primär */
  --responz-green:#64AD59; /* Akzent */
  --bg-light:#F9FAFB;
  --line:#E5E7EB;

  /* Badge-Design-Token */
  --badge-radius:999px;
  --badge-font:0.72rem;
  --badge-pad-y:0.25rem;
  --badge-pad-x:0.5rem;

  /* Badge-Farben */
  --badge-free-bg:#e6f0f8;
  --badge-free-fg:var(--responz-blue);
  --badge-basic-bg:#eef8ee;
  --badge-basic-fg:#2f6d2a;
  --badge-pro-bg:#e6f0f8;
  --badge-pro-fg:var(--responz-blue);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-light);
  color:var(--responz-blue);
}

/* NAV */
nav.site-nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:12px 20px; /* kein Extra-Abstand */
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:3000;
}
.brand{display:flex;align-items:center;text-decoration:none; line-height:0;}
nav.site-nav ul{list-style:none;display:flex;gap:16px;margin:0;padding:0}
nav.site-nav a{color:var(--responz-blue);text-decoration:none;font-weight:500}
nav.site-nav a:hover{opacity:.8}

/* Aktiver Navigationspunkt */
nav.site-nav a.is-active,
nav.site-nav a[aria-current="page"]{
  border-bottom:2px solid var(--responz-green);
  font-weight:600;
}

/* Logo (SVG) – Zielwerte: Desktop 200px / iPad 180px / iPhone 140px */
nav.site-nav .brand > img{
  height:200px;   /* Desktop-Basis */
  width:auto;
  display:block;
  vertical-align:middle;
}

/* Header-CTA (nur in der Navbar kompakter & a11y-freundlich) */
nav.site-nav .btn{
  padding:8px 12px;
  line-height:1.2;
  border-radius:10px;
  font-weight:700;
}
nav.site-nav .btn.primary{
  background:var(--responz-green);
  border-color:var(--responz-green);
  color:#fff;
}
/* Aktiver Zustand: Beim CTA kein Unterstrich aus dem Link-Active-Style */
nav.site-nav .btn.primary.is-active,
nav.site-nav .btn.primary[aria-current="page"]{
  border-bottom:0;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
/* Sichtbarer Focus-Ring nur im Header-Menü */
nav.site-nav a:focus-visible{
  outline:2px solid var(--responz-green);
  outline-offset:2px;
  border-radius:8px;
}

/* Mobile Toggle: Logik & Darstellung liegen im Header-Partial (header.njk) */

/* ====== Responsive Navbar: nur Logo/Abstand anpassen ====== */
/* iPad & Phone: Logo 180px */
@media (max-width: 1024px){
  nav.site-nav .brand > img{ height:180px; }
}

/* iPhone ≤640px: Logo 140px */
@media (max-width: 640px){
  nav.site-nav .brand > img{ height:140px; }
  nav.site-nav{ padding:10px 16px; }
}

/* BUTTONS (global) */
.btn{
  display:inline-block;padding:10px 14px;border-radius:10px;
  border:2px solid var(--responz-blue);background:#fff;color:var(--responz-blue);
  text-decoration:none;font-weight:600
}
.btn.primary{background:var(--responz-green);border-color:var(--responz-green);color:#fff}

/* LAYOUT */
header.hero{
  padding:64px 20px;
  background:linear-gradient(180deg,#fff,#F4F7FB);
  text-align:center
}
.wrap{max-width:1040px;margin:0 auto}
.section{padding:40px 20px}

/* Grid & Cards */
.grid{
  display:grid;
  gap:16px;
}
.grid > *{ min-width:0; } /* WICHTIG: verhindert Overflow innerhalb Grid-Items (Safari/iOS) */

.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Karten-Styles (global) */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  overflow:hidden;                /* harte Überläufe abschneiden */
  background-clip: padding-box;   /* sauber an Rundungen */
}
.card, .card *{
  white-space:normal !important;
  overflow-wrap:anywhere !important;   /* bricht lange Wörter/Links aggressiv */
  word-break:break-word !important;    /* Fallback (u.a. Safari) */
  max-width:100% !important;
}

/* ============================= */
/* Speziell für 5-Schritte-Karten */
.card.step{ display:flex; flex-direction:column; }
.card.step b{ display:block; margin-bottom:4px; }
.card.step p{ margin:6px 0 0 0; }        /* statt <br> */
.card.step small{
  line-height:1.4;
  -webkit-hyphens:auto;
  hyphens:auto;
  font-size:.98em;                       /* minimal kleiner für mehr Zeilen */
}

/* Spaltenwechsel für die 5-Schritte (robuster) */
@media (max-width: 980px){
  .cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px){
  .cols-3{ grid-template-columns:1fr; }
  .grid{ gap:12px; }
  .card{ padding:14px; }
  .card.step small{ font-size:.94em; }   /* iPhone noch einen Tick kompakter */
  /* Ultima Ratio auf sehr schmalen Screens: brich jedes Wort */
  .card.step small{ word-break:break-all !important; }
}

/* FOOTER */
footer{
  padding:20px;background:#fff;border-top:1px solid var(--line);
  text-align:center;font-size:.9em;color:#6b7280
}

/* ========================================= */
/* Badges (vereinheitlicht) */
.badge{
  display:inline-flex;                /* bessere Vertikal-Ausrichtung */
  align-items:center;
  gap:.35rem;
  font-size:var(--badge-font);
  font-weight:700;
  line-height:1;
  padding:var(--badge-pad-y) var(--badge-pad-x);
  border-radius:var(--badge-radius);
  text-decoration:none;
  user-select:none;
  border:1px solid currentColor;     /* Border folgt Textfarbe */
  background:var(--badge-bg, #eef2f7);
  color:var(--badge-fg, var(--responz-blue));
  vertical-align:middle;
}

/* Varianten */
.badge.free{
  --badge-bg: var(--badge-free-bg);
  --badge-fg: var(--badge-free-fg);
}

.badge.basic{
  --badge-bg: var(--badge-basic-bg);
  --badge-fg: var(--badge-basic-fg);
}

.badge.pro{
  --badge-bg: var(--badge-pro-bg);
  --badge-fg: var(--badge-pro-fg);
}

/* Kompakter Modus (optional, falls benötigt) */
.badge.is-compact{
  --badge-font:0.68rem;
  --badge-pad-y:0.18rem;
  --badge-pad-x:0.4rem;
}