:root {
--bg:#f5f6f8;
--primary:#0b599b;
--primary-dark:#06406f;
--accent:#16a34a;
--text:#111827;
--muted:#6b7280;
--border:#e5e7eb;
--card:#ffffff;
--radius:14px;
--shadow:0 14px 40px rgba(15,23,42,0.18);
--container:1200px;
}

{
box-sizing:border-box;
}

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

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

a:hover {
text-decoration:none;
}

.container {
width:min(var(--container),92%);
margin:0 auto;
}

/* Top-Bar */
.top-bar {
background:#0f172a;
color:#e5e7eb;
font-size:0.9rem;
}

.top-bar-inner {
display:flex;
align-items:center;
justify-content:space-between;
padding:0.4rem 0;
gap:1rem;
flex-wrap:wrap;
}

.top-bar-left,
.top-bar-right {
display:flex;
align-items:center;
gap:0.75rem;
flex-wrap:wrap;
}

.top-bar-phone {
font-weight:600;
white-space:nowrap;
}

.badge-smava {
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:0.85rem;
background:rgba(15,23,42,0.7);
padding:0.25rem 0.6rem;
border-radius:999px;
}

.badge-smava span {
color:#9ca3af;
}

/* Header */
.site-header {
background:rgba(15,23,42,0.88);
color:#f9fafb;
position:sticky;
top:0;
z-index:40;
backdrop-filter:blur(12px);
}

.site-header-inner {
display:flex;
align-items:center;
justify-content:space-between;
padding:0.75rem 0;
gap:1.5rem;
}

.logo-link {
display:flex;
align-items:center;
}

.site-logo {
height:46px;
width:auto;
display:block;
}

.header-nav {
display:flex;
gap:1.25rem;
font-size:0.95rem;
}

.header-nav a {
color:#e5e7eb;
text-decoration:none;
}

.header-nav a:hover {
color:#ffffff;
}

.btn-small {
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.45rem 0.9rem;
border-radius:999px;
border:1px solid rgba(148,163,184,0.8);
font-size:0.9rem;
background:rgba(15,23,42,0.4);
color:#e5e7eb;
cursor:pointer;
}

.btn-small:hover {
background:rgba(15,23,42,0.9);
}

/* Hero */
.hero {
position:relative;
color:#ffffff;
min-height:78vh;
display:flex;
flex-direction:column;
align-items:stretch;
isolation:isolate;
background-image:
linear-gradient(to right,
rgba(15,23,42,0.92) 0,
rgba(15,23,42,0.88) 34%,
rgba(15,23,42,0.6) 55%,
rgba(15,23,42,0.15) 100%),
url('/assets/img/slider01.png');
background-size:cover;
background-position:center right;
background-repeat:no-repeat;
}

.hero::after {
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 10% 0, rgba(59,130,246,0.32), transparent 55%);
opacity:0.9;
pointer-events:none;
z-index:-1;
}

.hero-inner {
display:flex;
align-items:center;
padding:3.5rem 0 2.2rem 0;
min-height:52vh;
}

.hero-text {
max-width:44rem;
}

.hero-prehead {
font-size:0.95rem;
text-transform:uppercase;
letter-spacing:0.18em;
color:#bfdbfe;
margin-bottom:0.85rem;
}

.hero-title {
font-size:2.4rem;
line-height:1.15;
margin:0 0 0.75rem 0;
}

.hero-title span {
color:#facc15;
}

.hero-subtitle {
font-size:1.02rem;
color:#e5e7eb;
max-width:38rem;
margin-bottom:1.3rem;
}

.hero-bullets {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.5rem 1.5rem;
font-size:0.95rem;
margin-bottom:1.7rem;
}

.hero-bullet {
display:flex;
align-items:flex-start;
gap:0.45rem;
}

.hero-bullet-icon {
width:18px;
height:18px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#16a34a);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:0.8rem;
color:#f9fafb;
flex-shrink:0;
}

.hero-meta {
display:flex;
flex-wrap:wrap;
gap:1.25rem;
font-size:0.88rem;
color:#d1d5db;
margin-top:0.5rem;
}

.hero-meta-item {
display:flex;
flex-direction:column;
gap:0.25rem;
}

.hero-meta-label {
text-transform:uppercase;
letter-spacing:0.12em;
font-size:0.76rem;
color:#9ca3af;
}

.hero-meta-value {
font-weight:600;
}

/* Horizontaler Formularbereich unten in der Hero-Section */
.hero-form-bar {
padding:0 0 3.2rem 0;
}

.hero-form-card {
background:rgba(15,23,42,0.97);
border-radius:var(--radius);
padding:0.9rem 1.1rem 1rem 1.1rem;
box-shadow:var(--shadow);
border:1px solid rgba(148,163,184,0.55);
}

.hero-form {
display:flex;
align-items:flex-end;
gap:0.9rem;
flex-wrap:nowrap;
}

.hero-form-field {
display:flex;
flex-direction:column;
gap:0.35rem;
flex:1 1 0;
}

.hero-form-btn-wrap {
display:flex;
align-items:flex-end;
flex:0 0 auto;
}

.hero-form-btn {
white-space:nowrap;
padding-left:1.4rem;
padding-right:1.4rem;
}

.hero-form-meta {
margin-top:0.4rem;
display:flex;
flex-wrap:wrap;
gap:0.9rem;
font-size:0.78rem;
color:#9ca3af;
}

/* Formular-Grundstyles (Select etc.) */
.compare-form {
display:flex;
flex-direction:column;
gap:0.85rem;
margin-bottom:0.65rem;
}

.form-row {
display:flex;
flex-direction:column;
gap:0.3rem;
font-size:0.9rem;
}

.form-label {
color:#e5e7eb;
font-weight:500;
}

.form-helper {
font-size:0.78rem;
color:#9ca3af;
}

.form-control,
.form-select {
width:100%;
border-radius:10px;
border:1px solid rgba(148,163,184,0.85);
background:rgba(15,23,42,0.96);
color:#e5e7eb;
padding:0.55rem 0.8rem;
font-size:0.93rem;
outline:none;
appearance:none;
}

.form-control:focus,
.form-select:focus {
border-color:#60a5fa;
box-shadow:0 0 0 1px rgba(37,99,235,0.75);
}

.select-wrapper {
position:relative;
}

.select-wrapper::after {
content:"▾";
position:absolute;
right:0.7rem;
top:50%;
transform:translateY(-50%);
font-size:0.75rem;
color:#9ca3af;
pointer-events:none;
}

/* Primärer Button */
.btn-primary {
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
margin-top:0.35rem;
padding:0.75rem 1rem;
border-radius:999px;
border:none;
font-weight:600;
font-size:0.98rem;
cursor:pointer;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#f9fafb;
}

.btn-primary:hover {
filter:brightness(1.05);
}

.btn-primary span {
margin-left:0.4rem;
font-size:1rem;
}

main {
background:var(--bg);
}

/* Sektionen und Content */
.section {
padding:3.25rem 0;
}

.section-narrow {
max-width:900px;
margin:0 auto;
}

.section-header {
display:flex;
flex-direction:column;
gap:0.4rem;
margin-bottom:1.8rem;
}

.section-kicker {
font-size:0.9rem;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--primary);
}

.section-title {
font-size:1.7rem;
margin:0;
}

.section-intro {
font-size:0.98rem;
color:var(--muted);
max-width:46rem;
}

/* Content-Grid */
.content-grid {
display:grid;
grid-template-columns:minmax(0,3fr) minmax(0,2.4fr);
gap:2rem;
align-items:flex-start;
}

.content-main {
min-width:0;
}

.content-main p {
margin:0 0 0.9rem 0;
font-size:0.97rem;
}

.content-main h2,
.content-main h3 {
margin:1.4rem 0 0.6rem 0;
font-size:1.15rem;
}

.content-main ul {
margin:0 0 1rem 0;
padding-left:1.1rem;
font-size:0.96rem;
}

.content-main li {
margin-bottom:0.35rem;
}

/* Infokarten */
.card-list {
display:flex;
flex-direction:column;
gap:0.9rem;
}

.info-card {
background:var(--card);
border-radius:var(--radius);
padding:1rem 1.1rem;
border:1px solid var(--border);
box-shadow:0 8px 26px rgba(15,23,42,0.08);
font-size:0.9rem;
}

.info-card h3 {
margin:0 0 0.45rem 0;
font-size:1.02rem;
}

.info-keydata {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0.4rem 1.1rem;
font-size:0.9rem;
margin-top:0.5rem;
}

.info-keydata span {
display:block;
}

.info-key-label {
color:var(--muted);
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.08em;
}

/* Schritte */
.steps-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.3rem;
margin-top:0.7rem;
}

.step-card {
background:var(--card);
border-radius:var(--radius);
padding:1rem 1.1rem 1.1rem 1.1rem;
border:1px solid var(--border);
box-shadow:0 8px 26px rgba(15,23,42,0.08);
font-size:0.9rem;
}

.step-number {
width:28px;
height:28px;
border-radius:999px;
background:#eff6ff;
color:var(--primary);
display:flex;
align-items:center;
justify-content:center;
font-size:0.9rem;
font-weight:600;
margin-bottom:0.45rem;
}

.step-card h3 {
margin:0 0 0.35rem 0;
font-size:1.02rem;
}

/* Betrag-Links */
.amount-links {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:0.55rem 1.1rem;
font-size:0.92rem;
margin-top:0.5rem;
}

.amount-links a {
display:flex;
align-items:center;
justify-content:space-between;
padding:0.5rem 0.75rem;
border-radius:999px;
background:#ffffff;
border:1px solid var(--border);
box-shadow:0 4px 18px rgba(15,23,42,0.06);
}

.amount-links span {
font-size:0.84rem;
color:var(--muted);
}

/* FAQ */
.faq-grid {
display:grid;
grid-template-columns:minmax(0,3fr) minmax(0,2.4fr);
gap:2.2rem;
align-items:flex-start;
}

.faq-list details {
background:#ffffff;
border-radius:var(--radius);
border:1px solid var(--border);
padding:0.85rem 0.95rem;
margin-bottom:0.7rem;
box-shadow:0 6px 22px rgba(15,23,42,0.08);
font-size:0.95rem;
}

.faq-list summary {
cursor:pointer;
font-weight:600;
list-style:none;
}

.faq-list summary::-webkit-details-marker {
display:none;
}

.faq-list p {
margin:0.65rem 0 0 0;
font-size:0.92rem;
color:var(--muted);
}

.faq-aside {
font-size:0.9rem;
background:#f9fafb;
border-radius:var(--radius);
border:1px solid var(--border);
padding:1rem 1.15rem;
}

.faq-aside h3 {
margin:0 0 0.5rem 0;
font-size:1.02rem;
}

.faq-aside ul {
margin:0.4rem 0 0 0;
padding-left:1.15rem;
}

.faq-aside li {
margin-bottom:0.3rem;
}

/* Footer */
footer {
background:#020617;
color:#9ca3af;
}

.footer-inner {
padding:1.8rem 0 1.4rem 0;
font-size:0.85rem;
}

.footer-top {
display:flex;
justify-content:space-between;
gap:1.5rem;
flex-wrap:wrap;
margin-bottom:1rem;
align-items:flex-start;
}

.footer-links {
display:flex;
flex-direction:column;
gap:0.2rem;
}

.footer-links a {
color:#e5e7eb;
font-size:0.86rem;
}

.footer-links a:hover {
text-decoration:none;
}

.footer-powered {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0.4rem;
font-size:0.8rem;
}

.footer-powered span {
color:#d1d5db;
}

.footer-powered strong {
color:#22c55e;
}

.footer-bottom {
display:flex;
justify-content:space-between;
gap:1.25rem;
flex-wrap:wrap;
align-items:center;
}

.footer-meta {
color:#6b7280;
}

.footer-meta span {
white-space:nowrap;
}

/* Cookie-Banner */
.cookie-banner {
position:fixed;
left:0;
right:0;
bottom:0;
background:#020617;
color:#e5e7eb;
font-size:0.86rem;
display:none;
z-index:50;
}

.cookie-banner-inner {
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
padding:0.9rem 0;
}

.cookie-text strong {
display:block;
margin-bottom:0.15rem;
}

.cookie-text p {
margin:0;
font-size:0.86rem;
color:#9ca3af;
}

.cookie-button {
border:none;
border-radius:999px;
padding:0.45rem 1.1rem;
background:var(--primary);
color:#f9fafb;
font-weight:500;
cursor:pointer;
}

.cookie-button:hover {
background:var(--primary-dark);
}

/* Responsive */
@media (max-width:960px) {
.header-nav {
display:none;
}

.hero-inner {
min-height:unset;
padding-top:2.6rem;
}

.hero {
background-position:65% 0;
}
}

@media (max-width:860px) {
.hero-form {
flex-direction:column;
align-items:stretch;
gap:0.7rem;
}

.hero-form-field,
.hero-form-btn-wrap {
flex:1 1 100%;
}

.hero-form-btn {
width:100%;
justify-content:center;
}
}

@media (max-width:720px) {
.top-bar-inner {
flex-direction:column;
align-items:flex-start;
}

.hero-title {
font-size:1.9rem;
}

.hero-bullets {
grid-template-columns:1fr;
}

.content-grid,
.faq-grid {
grid-template-columns:minmax(0,1fr);
}

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

.section {
padding:2.5rem 0;
}

.hero-form-card {
padding:0.9rem 0.85rem 1rem 0.85rem;
}
}

@media (max-width:480px) {
.hero {
min-height:unset;
}

.hero-inner {
padding:2.1rem 0 2.6rem 0;
}
}

@media (max-width:720px) {
.hero {
background-image:none;
background-color:#0f172a;
}
}

/* Sekundärer Button */
.btn-secondary {
display:inline-block;
padding:12px 22px;
background:#ffffff;
color:#0b599b;
border:2px solid #0b599b;
border-radius:6px;
cursor:pointer;
font-size:16px;
line-height:1.2;
transition:all .2s;
text-decoration:none;
}

.btn-secondary:hover {
background:#0b599b;
color:#ffffff;
}

/* CTA-Buttons in Sektionen */
.section-cta {
margin-top:32px;
text-align:left;
}

.section-cta .btn-primary,
.section-cta .btn-secondary {
margin-right:12px;
}

/* Sekundäre Buttons im FAQ-Bereich */
.faq-aside button.btn-secondary {
width:100%;
text-align:center;
margin-top:16px;
}

/* Tabellen global scrollbar machen */
.rate-table {
width:100%;
border-collapse:collapse;
margin:1.5rem 0;
display:block;
max-width:100%;
overflow-x:auto;
white-space:nowrap;
-webkit-overflow-scrolling:touch;
}

.rate-table th,
.rate-table td {
padding:0.75rem 0.5rem;
text-align:left;
font-size:0.95rem;
}

@media (max-width:480px) {
.rate-table th,
.rate-table td {
font-size:0.9rem;
}
}


/* Tabelle scrollbar */
.rate-table {
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0;
  display:block;
  max-width:100%;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* schmaler Schieberegler-Hinweis */
.rate-table::after {
  content:"";
  position:absolute;
  bottom:2px;
  right:0;
  width:40px;
  height:4px;
  background:linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  border-radius:2px;
  pointer-events:none;
}



#calc-form .form-label {
color: var(--text);
}

#calc-form .form-control,
#calc-form .form-select {
background: #ffffff;
color: var(--text);
border: 1px solid var(--border);
}

#calc-form .form-control:focus,
#calc-form .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 1px rgba(11,89,155,0.6);
}


#calc-form .form-label {
color: var(--text);
}

#calc-form .form-control,
#calc-form .form-select {
background: #ffffff;
color: var(--text);
border: 1px solid var(--border);
}

#calc-form .form-control:focus,
#calc-form .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 1px rgba(11,89,155,0.6);
}

.footer-laufzeiten-row {
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 0.8rem;
  font-size:0.5rem;
  color:#e5e7eb;
  margin-bottom:0.4rem;
}

.footer-laufzeiten-label {
  font-weight:600;
}

.laufzeit-item {
  padding:0.1rem 0.3rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
}