:root {
--bg:#f3f6fc;
--card:#ffffff;
--accent:#0f5fb8;
--accent-soft:#1e7be2;
--accent-soft-bg:rgba(30,123,226,0.10);
--border:#c9d4e6;
--text:#0f172a;
--muted:#64748b;
--danger:#dc3545;
--radius-lg:18px;
--radius-xl:24px;

--shadow-lg:none;
--shadow-soft:none;
}

* {
  box-sizing:border-box;
  }

html,
body {
margin:0;
padding:0;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--text);
}

a {
color:var(--accent);
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

img {
max-width:100%;
display:block;
}

.page {
min-height:100vh;
display:flex;
flex-direction:column;
}

.shell {
width:min(1120px,94%);
margin:0 auto;
}

.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0;
}

/* HEADER */

header.site-header {
position:sticky;
top:0;
z-index:40;
background:#ffffff;
border-bottom:1px solid var(--border);
}

.header-inner {
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 0;
gap:20px;
}

.brand {
display:flex;
align-items:center;
gap:12px;
}

.brand-logo {
width:40px;
height:40px;
border-radius:14px;
background:var(--accent);
display:flex;
align-items:center;
justify-content:center;
color:#ffffff;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
}

.brand-text {
display:flex;
flex-direction:column;
gap:2px;
}

.brand-title {
font-weight:650;
font-size:18px;
letter-spacing:0.02em;
}

.brand-sub {
font-size:12px;
color:var(--muted);
}

.header-nav {
display:flex;
align-items:center;
gap:18px;
font-size:14px;
color:var(--muted);
}

.header-nav a {
padding:4px 0;
border-bottom:2px solid transparent;
}

.header-nav a:hover {
color:var(--accent);
border-color:var(--accent-soft-bg);
}

.header-nav a.active {
color:var(--accent);
border-color:var(--accent);
}

.header-cta {
display:flex;
align-items:center;
gap:8px;
}

.btn-header {
padding:7px 13px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
font-size:13px;
color:var(--text);
cursor:pointer;
}

.btn-header-primary {
border-color:var(--accent);
background:var(--accent);
color:#ffffff;
}

/* MOBILE HEADER */

@media (max-width:768px) {
.header-inner {
padding-inline:4px;
}
.header-nav {
display:none;
}
.brand-title {
font-size:16px;
}
.brand-logo {
width:34px;
height:34px;
}
.btn-header,
.btn-header-primary {
font-size:12px;
padding:6px 10px;
}
}

main {
flex:1;
}

/* BREADCRUMBS */

.breadcrumbs {
font-size:12px;
color:var(--muted);
padding:10px 0 0;
}

.breadcrumbs ol {
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}

.breadcrumbs li::after {
content:">";
margin-left:6px;
color:var(--muted);
}

.breadcrumbs li:last-child::after {
content:"";
margin:0;
}

.breadcrumbs a {
color:var(--muted);
}

.breadcrumbs a:hover {
color:var(--accent);
}

/* HERO */

.hero {
padding:30px 0 42px;
background:linear-gradient(135deg,#eef3ff 0%,#dde8ff 50%,#edf3ff 100%);
}

.hero-grid {
display:grid;
grid-template-columns:minmax(0,3fr) minmax(0,2.5fr);
gap:32px;
align-items:flex-start;
}

@media (max-width:880px) {
.hero-grid {
grid-template-columns:1fr;
}
}

.hero-kicker {
font-size:14px;
color:var(--accent);
margin-bottom:10px;
}

.hero-title {
font-size:42px;
line-height:1.2;
margin:0 0 14px;
color:#0f172a;
font-weight:700;
}

.hero-title .highlight {
color:var(--accent);
}

.hero-lead {
font-size:18px;
line-height:1.6;
color:#334155;
max-width:720px;
margin:0 0 22px;
}

.hero-meta {
display:flex;
flex-wrap:wrap;
gap:10px 22px;
font-size:15px;
color:#475569;
margin-bottom:22px;
}

.hero-meta strong {
color:#0f172a;
}

.hero-bullets {
list-style:none;
padding:0;
margin:0 0 22px;
display:grid;
gap:8px;
}

.hero-bullets li {
display:flex;
align-items:flex-start;
gap:10px;
font-size:15px;
color:#374151;
}

.hero-bullets .icon {
width:20px;
height:20px;
border-radius:999px;
background:var(--accent-soft-bg);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
font-size:13px;
margin-top:2px;
}

.hero-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
}

.btn-primary {
padding:11px 18px;
border-radius:999px;
border:none;
cursor:pointer;
background:var(--accent);
color:#ffffff;
font-weight:600;
font-size:15px;
display:inline-flex;
align-items:center;
gap:8px;
}

.btn-ghost {
padding:10px 16px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
color:var(--text);
font-size:14px;
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
}

.hero-note {
font-size:13px;
line-height:1.6;
color:#4b5563;
max-width:720px;
margin-top:4px;
}

/* MOBILE TYPO HERO */

@media (max-width:768px) {
.hero {
padding:24px 0 32px;
}
.hero-title {
font-size:30px;
}
.hero-lead {
font-size:16px;
}
.hero-meta {
font-size:14px;
}
.hero-bullets li {
font-size:14px;
}
.hero-note {
font-size:12px;
}
}

/* HERO FORM CARD RECHTS */

.card {
background:linear-gradient(145deg,#edf2ff 0%,#dde6fb 45%,#e9f0ff 100%);
border-radius:var(--radius-xl);
border:1px solid var(--border);
padding:18px 18px 16px;
position:relative;
box-shadow:0 10px 24px rgba(15,95,184,0.18);
}

.card-inner {
position:relative;
z-index:1;
}

.card-header {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}

.card-title {
font-size:16px;
font-weight:600;
display:flex;
flex-direction:column;
gap:3px;
}

.card-title span.sub {
font-size:12px;
color:var(--muted);
font-weight:400;
}

.card-badge {
padding:4px 9px;
border-radius:999px;
background:rgba(255,255,255,0.9);
border:1px solid var(--border);
font-size:11px;
color:var(--accent);
display:flex;
align-items:center;
gap:6px;
}

.card-badge span.dot {
width:7px;
height:7px;
border-radius:999px;
background:var(--accent-soft);
}

/* FORM IM CARD */

.form-shell {
margin-top:4px;
border-radius:16px;
border:1px solid var(--border);
background:#ffffff;
padding:12px;
}

.form-grid {
display:grid;
grid-template-columns:1fr;
gap:10px;
align-items:flex-end;
}

.field {
display:flex;
flex-direction:column;
gap:5px;
}

.field label {
font-size:12px;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--muted);
}

.field select,
.field input {
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
color:var(--text);
padding:8px 12px;
font-size:14px;
outline:none;
}

.field select:focus,
.field input:focus {
border-color:var(--accent-soft);
}

.btn-submit {
border:none;
cursor:pointer;
padding:10px 10px;
border-radius:999px;
background:var(--accent);
color:#ffffff;
font-weight:600;
font-size:15px;
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
}

.form-foot {
margin-top:8px;
display:flex;
justify-content:space-between;
gap:8px;
font-size:11px;
color:var(--muted);
flex-wrap:wrap;
}

.tagline-row {
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
font-size:11px;
color:var(--muted);
}

.tag-pill {
padding:4px 9px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
}

/* MOBILE CARD */

@media (max-width:768px) {
.card {
margin-top:8px;
}
.form-shell {
padding:10px;
}
.btn-submit {
font-size:14px;
}
}

/* SECTIONEN UNTER DEM HERO */

.section {
padding:20px 0 38px;
}

.section-header {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:14px;
margin-bottom:16px;
}

.section-title {
font-size:22px;
letter-spacing:-0.01em;
margin:0 0 4px;
color:#0f172a;
}

.section-title span {
color:var(--accent);
}

.section-sub {
font-size:15px;
color:var(--muted);
max-width:520px;
line-height:1.6;
}

.bubble-row {
display:flex;
flex-wrap:wrap;
gap:8px;
font-size:13px;
}

.bubble {
padding:6px 10px;
border-radius:999px;
border:1px solid var(--border);
background:#ffffff;
color:#1f2933;
display:inline-flex;
align-items:center;
gap:6px;
}

.bubble span.dot {
width:8px;
height:8px;
border-radius:999px;
background:var(--accent-soft);
}

/* MOBILE SECTION HEADER */

@media (max-width:880px) {
.section-header {
flex-direction:column;
align-items:flex-start;
}
}

/* GRID-KARTEN */

.grid-3 {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

@media (max-width:960px) {
.grid-3 {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px) {
.grid-3 {
grid-template-columns:1fr;
}
}

.info-card {
border-radius:var(--radius-lg);
background:#ffffff;
border:1px solid var(--border);
padding:12px 12px 10px;
}

.info-card h3 {
font-size:16px;
margin:0 0 8px;
color:#0f172a;
}

.info-card p {
font-size:14px;
color:var(--muted);
margin:0 0 8px;
line-height:1.6;
}

.info-meta {
display:flex;
flex-wrap:wrap;
gap:8px;
font-size:11px;
color:var(--muted);
}

.info-meta span {
padding:3px 8px;
border-radius:999px;
background:#eef2ff;
border:1px solid var(--border);
}

/* CONTENT GRID */

.content-grid {
display:grid;
grid-template-columns:minmax(0,1.8fr) minmax(0,1.2fr);
gap:20px;
margin-top:18px;
}

@media (max-width:880px) {
.content-grid {
grid-template-columns:1fr;
}
}

.content-block {
border-radius:var(--radius-lg);
background:#ffffff;
border:1px solid var(--border);
padding:14px 14px 12px;
}

.content-block h3 {
margin:0 0 8px;
font-size:18px;
color:#0f172a;
}

.content-block h2,
.content-block h4,
.content-block h5 {
color:#0f172a;
margin:10px 0 6px;
font-size:16px;
}

.content-block p {
margin:0 0 8px;
font-size:14px;
color:var(--muted);
line-height:1.7;
}

.content-block ul {
margin:0 0 8px 18px;
padding:0;
font-size:14px;
color:var(--muted);
line-height:1.6;
}

.content-block a {
color:var(--accent);
}

/* HOWTO STEPS */

.howto-steps {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

@media (max-width:960px) {
.howto-steps {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px) {
.howto-steps {
grid-template-columns:1fr;
}
}

.step-card {
border-radius:var(--radius-lg);
background:#ffffff;
border:1px solid var(--border);
padding:12px;
font-size:14px;
color:var(--muted);
}

.step-head {
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
}

.step-num {
width:22px;
height:22px;
border-radius:999px;
background:#e0edff;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
color:var(--accent);
font-weight:600;
}

.step-title {
font-size:15px;
color:#0f172a;
font-weight:500;
}

/* CTA-STRIP */

.cta-strip {
margin-top:16px;
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:space-between;
font-size:14px;
color:var(--muted);
}

.cta-strip-buttons {
display:flex;
flex-wrap:wrap;
gap:8px;
}

@media (max-width:768px) {
.cta-strip {
font-size:13px;
}
}

/* FAQ-BEREICH */

.faq-grid {
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(0,1.3fr);
gap:18px;
}

@media (max-width:880px) {
.faq-grid {
grid-template-columns:1fr;
}
}

.faq-list {
border-radius:var(--radius-lg);
border:1px solid var(--border);
background:#ffffff;
padding:10px 12px;
}

details.faq-item {
border-bottom:1px solid var(--border);
padding:8px 0;
}

details.faq-item:last-of-type {
border-bottom:none;
}

details summary {
list-style:none;
cursor:pointer;
font-size:14px;
color:#0f172a;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

details summary::-webkit-details-marker {
display:none;
}

.faq-answer {
margin-top:6px;
font-size:14px;
color:var(--muted);
line-height:1.6;
}

/* NOTE BOX */

.note-box {
border-radius:var(--radius-lg);
border:1px solid var(--border);
background:#ffffff;
padding:12px;
font-size:14px;
color:var(--muted);
}

.note-box strong {
display:block;
margin-bottom:6px;
color:#0f172a;
}

/* WIDGET-BLOCK (SMAVA) */

.widget-block {
border-radius:var(--radius-lg);
background:#ffffff;
border:1px solid var(--border);
padding:12px;
font-size:14px;
color:var(--muted);
}

/* HR UND KLEINE HILFEN */

.hr-separator {
border-color:var(--border);
border-width:0 0 1px;
border-style:solid;
margin:10px 0 12px;
}

.p-note-margin {
margin-top:10px;
}

/* FOOTER */

footer.site-footer {
border-top:1px solid var(--border);
background:#ffffff;
margin-top:30px;
}

.footer-inner {
padding:16px 0 18px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:10px;
font-size:13px;
color:var(--muted);
}

.footer-links {
display:flex;
flex-wrap:wrap;
gap:10px;
}

.footer-links a {
color:var(--muted);
}

.footer-links a:hover {
color:var(--accent);
}

/* MOBILE TEXT ALLGEMEIN */

@media (max-width:640px) {
body {
font-size:15px;
}
.content-block p,
.info-card p,
.faq-answer {
font-size:14px;
}
}