:root{
  --bg:#f6f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-900:#1e3a8a;
  --header:#0f172a;
  --nav:#111827;
  --card:#ffffff;
  --wrap:1200px;
  --radius:14px;
  --shadow:0 8px 28px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* Header + Nav */
header.site{
  background:linear-gradient(180deg,#1e3a8a 0%,#2563eb 100%);
  color:#fff;
}
.topbar{border-bottom:1px solid rgba(255,255,255,.08)}
.brandbar{display:flex;align-items:center;gap:12px;padding:12px 0}
.brandbar img{height:56px;border-radius:12px;box-shadow:var(--shadow)}
.brandbar h1{font-size:1.25rem;margin:0}
nav.site{background:#1e3a8a}
nav .inner{display:flex;gap:24px;justify-content:center;padding:10px 0}
nav a{color:#fff;opacity:.9;font-weight:600;position:relative;padding:6px 2px}
nav a:hover{opacity:1}
nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--primary);border-radius:2px}

/* Hero */
.hero{padding:56px 0 32px;text-align:center;color:var(--text)}
.hero h2{font-size:2.4rem;margin:.2rem 0 10px;color:#0f172a;font-weight:800}
.hero p{color:var(--muted);max-width:780px;margin:0 auto}
.cta{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;background:#e2e8f0;color:#111827;font-weight:700;box-shadow:0 4px 12px rgba(2,6,23,.12);transition:all .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:transparent;color:var(--text);border:1px solid #cbd5e1}

/* Sections / cards */
main{padding:32px 0 56px}
.section{margin:24px 0}
h3.section-title{font-size:1.8rem;max-width:1000px;margin:0 auto 14px;padding:0 16px}
.grid{display:grid;gap:20px;grid-template-columns:1fr;max-width:1000px;margin:0 auto;justify-content:center}
@media(min-width:900px){
  .grid.cols-2{grid-template-columns:2fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h4{margin:0 0 6px}
.muted{color:var(--muted)}
.kpi{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-start}
.kpi .pill{display:inline-flex;align-items:center;gap:8px;background:#eef2ff;border:1px solid #dbeafe;color:#1e3a8a;border-radius:999px;padding:8px 12px;font-weight:600;white-space:nowrap}

/* Icon rows (emoji as placeholders) */
.icon-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.icon{display:flex;gap:12px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;align-items:center;min-height:92px;box-shadow:var(--shadow)}
.icon .i{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 6px rgba(2,6,23,.06)}

/* Tables / pricing */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table td,.table th{padding:10px 12px}
.price{font-size:1.5rem;font-weight:800}

/* Forms */
.input{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px;background:#fff}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.form-row{margin-bottom:12px}

/* Footer */
footer.site{background:#0e1526;color:#cbd5e1;text-align:center;padding:18px 0}
footer .links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* Hover state for outline button on light sections */
.btn-outline:hover{background:#f1f5f9}

.grid.full{max-width:none;margin:0;}

/* Ensure inner wrap elements inside sections match grid width */
.section .wrap{max-width:1000px;margin:0 auto;padding:0 16px}


/* Why-us im gleichen Icon-Karten-Stil wie die Praxis-Beispiele */
.icon-row.whyus{ /* nutzt bestehendes .icon-row Grid (zentriert, max-width) */ }

.icon-row.whyus .icon{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 6px 20px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.icon-row.whyus .icon:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(2,8,23,.08);
  border-color:rgba(15,23,42,.12);
}

/* Icon-Badge links */
.icon-row.whyus .icon .i{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.12);
}

/* Typografie rechts */
.icon-row.whyus h4{
  margin:0 0 4px 0;
  font-size:16px;
  line-height:1.3;
  font-weight:600;
  color:#0F172A;
}
.icon-row.whyus p{
  margin:0;
  font-size:14px;
  line-height:1.35;
  color:#5B677A;
}

/* Mobile */
@media (max-width: 640px){
  .icon-row.whyus .icon{ padding:14px 16px; }
}
/* === Consistent Centering for all main blocks === */
:root{ --content-max: 1100px; }

/* Alle Inhaltsbereiche im <main> mittig und gleich breit */
main .wrap,
main .wrap.section,
main .section.wrap{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Sicherheitsnetz: auch Zeilen/Grids mittig halten, falls sie
   außerhalb vom section-wrapper stehen sollten */
main .grid,
main .icon-row,
main .kpi{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Hero-Block zentriert (falls nötig) */
.hero .wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.usecases-hero {
  display: flex;
  justify-content: center;
  margin: 20px auto 40px;
  max-width: 1000px;
}

.usecases-hero img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(2,6,23,.08);
}
/* FAQ Accordion */
.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  background: var(--card);
  cursor: pointer;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: #f1f5f9;
}

.faq-answer {
  display: none;
  padding: 0 18px 14px;
  color: var(--muted);
}

.faq-item.active .faq-answer {
  display: block;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #fff;
  color: #000;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Call-to-Action Blöcke mittig ausrichten */
.cta-block {
  text-align: center;
  margin: 40px auto;
  max-width: 800px;
}

.cta-block h2,
.cta-block p {
  margin-left: auto;
  margin-right: auto;
}

.cta-block .btn {
  display: inline-block;
  margin-top: 16px;
}
/* --- Blog-Übersicht (überarbeitet) --- */
.blog-grid{
  display:grid;
  gap:24px;
  grid-template-columns: 1fr;           /* mobil: 1 Spalte */
}

@media (min-width:800px){
  .blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* ab Tablet: 2 Spalten */
  .blog-grid > article:first-child{ grid-column: 1 / -1; }       /* neuester (1.) Teaser über volle Breite */
}

/* Teaser-Karten gleich hoch; Button unten */
.blog-teaser{
  display:flex;
  flex-direction:column;
  min-height:220px;
}

/* H2-Links dunkel statt blau */
.blog-teaser h2 a{
  color: var(--text);
  text-decoration: none;
}
.blog-teaser h2 a:hover{
  text-decoration: underline;
}

/* sanfter Hover */
.blog-teaser.card{ transition: transform .2s ease, box-shadow .2s ease; }
.blog-teaser.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(2,6,23,.10);
}

.blog-teaser p{ margin:0 0 12px; color:var(--muted); flex:1 1 auto; }
.blog-teaser .btn{ align-self:flex-start; }


/* Teaser-Karten gleich hoch; Button unten */
.blog-teaser{
  display:flex;
  flex-direction:column;
  min-height: 220px; /* ggf. anpassen */
}

.blog-teaser h2{
  margin:0 0 8px;
  line-height:1.25;
}

.blog-teaser p{
  margin:0 0 12px;
  color:var(--muted);
  flex:1 1 auto;          /* füllt den Raum bis zum Button */
}

.blog-teaser .btn{
  align-self:flex-start;  /* hübsch links ausgerichtet */
}

/* sanfter Hover */
.blog-teaser.card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-teaser.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(2,6,23,.10);
}
/* --- Blog-Artikel Layout --- */
.post-hero{
  background: linear-gradient(180deg,#f6f8ff 0%, rgba(246,248,255,0) 100%);
  padding:32px;
  border-radius:20px;
  margin:0 auto 24px;
  max-width:1100px;
}
.post-hero .eyebrow{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin:0 0 6px;
}
.post-hero h1{ margin:0 0 6px; }
.post-hero .meta{ color:#6b7280; font-size:.95rem; }

.post .lead{
  font-size:1.125rem;
  line-height:1.7;
  color:#334155;
  margin:10px 0 0;
  max-width:70ch;
}

.post-content{
  max-width:80ch;
  margin:0 auto;
}
.post-content h2{ margin:28px 0 10px; }
.post-content p{ margin:12px 0; }
.post-content ul{ margin:8px 0 16px 1.25rem; }
.post-content li{ margin:6px 0; }

/* Karten/Tabellen im Artikel */
.post-content .card{
  padding:16px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(2,6,23,.08);
}
.post-content .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.post-content .table tr{ background:#fff; }
.post-content .table td{
  padding:12px 14px;
  border-top:1px solid #eef2f7;
}
.post-content .table tr:first-child td{ border-top:none; }

/* Navigation unten im Artikel */
.post-nav{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:stretch;
  margin:24px auto 0;
  max-width:1100px;
}
.post-nav a{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(2,6,23,.08);
}
.post-nav .prev::before{ content:"← "; }
.post-nav .next::after{ content:" →"; }