@import url("/assets/css/guides.css");

: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;
  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 */
nav.site-nav .brand > img{
  height:150px;
  width:150px;
  display:block;
  vertical-align:middle;
}

/* Header-CTA (nur in der Navbar kompakter) */
nav.site-nav .btn{
  padding:8px 12px;
  line-height:1.2;
  border-radius:10px;
  font-weight:700;
}

/* 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"],
nav.site-nav .btn.btn-primary.is-active,
nav.site-nav .btn.btn-primary[aria-current="page"],
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;
}

/* ====== Responsive Navbar: nur Logo/Abstand anpassen ====== */
@media (max-width: 1024px){
  nav.site-nav .brand > img{height:120px;width:120px;}
}
@media (max-width: 640px){
  nav.site-nav .brand > img{height:100px;width:100px;}
  nav.site-nav{padding:10px 16px;}
}

/* BUTTONS (global) */
.btn,
.btn-primary,
.btn-secondary{
  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;
  line-height:1.2;
}

/* Fokus für Buttons außerhalb der Navbar */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible{
  outline:2px solid var(--responz-green);
  outline-offset:2px;
}

/* Primärbutton: beide Welten unterstützen */
.btn.primary,
.btn.btn-primary,
.btn-primary{
  background:var(--responz-green);
  border-color:var(--responz-green);
  color:#fff;
}

/* Secondary: bewusst zurückhaltend, aber klar als Button erkennbar */
.btn.secondary,
.btn.btn-secondary,
.btn-secondary{
  background:#fff;
  border-color:var(--responz-blue);
  color:var(--responz-blue);
}

/* Hover-Feedback */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover{
  opacity:.92;
}

/* 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;}

.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;
  background-clip:padding-box;
}
.card, .card *{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  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;}
.card.step small{
  line-height:1.4;
  -webkit-hyphens:auto;
  hyphens:auto;
  font-size:.98em;
}

/* Spaltenwechsel */
@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;}
  .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;
  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;
  background:var(--badge-bg, #eef2f7);
  color:var(--badge-fg, var(--responz-blue));
  vertical-align:middle;
}

.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);
}

.badge.is-compact{
  --badge-font:0.68rem;
  --badge-pad-y:0.18rem;
  --badge-pad-x:0.4rem;
}

/* TABLES (Blog / Post-Content) */
.post-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.25rem 0;
  font-size:.95em;
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.post-content th,
.post-content td{
  border:1px solid var(--line);
  padding:.55rem .75rem;
  text-align:left;
  vertical-align:top;
}
.post-content th{
  background:var(--bg-light);
  font-weight:700;
}
.post-content tr:hover{
  background:#f3f6fa;
}