/* Frontida index.css - kompaktiert; dokumentierte Vollversion: Git-Historie */

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 100 900;
font-display: block;
src: url('../fonts/Open-Sans.woff2') format('woff2');
}
:root {
--blue:         #2165AE;
--blue-mid:     #3F6EA0;
--blue-light:   #6096C4;
--blue-bg:      #EDF4FB;
--orange:       #F47522;
--orange-dark:  #C4601A;
--orange-light: #F5A05A;
--gray-bg:      #F5F7FA;
--gray-light:   #EDF0F4;
--text:         #454C4D;
--text-mid:     #454C4D;
--text-light:   #636363;
--border:       #DDE2E9;
--white:        #FFFFFF;
--shadow:       0 2px 16px rgba(0,0,0,0.08);
--shadow-hover: 0 8px 32px rgba(0,0,0,0.14);
}
* { margin:0; padding:0; box-sizing:border-box; }
html{scroll-behavior:smooth;scroll-padding-top:100px;}
img { max-width:100%; height:auto; }
body { font-family:'Open Sans',sans-serif; color:#454C4D; background:var(--white); font-size:15px; line-height:1.7; overflow-x: clip; }
.topbar { background:linear-gradient(90deg,#1a4f8c 0%,#236BB4 50%,#2a7fcf 100%); padding:0.52rem 5%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar-items { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.tb-item { display:flex; align-items:center; gap:0.38rem; font-size:0.8rem; color:rgba(255,255,255,0.92); }
.tb-item svg { width:14px; height:14px; flex-shrink:0; }
.tb-stars { color:#FFD060; font-size:0.82rem; }
.tb-tagline { font-size:0.74rem; color:rgba(255,255,255,0.92); }
.tb-phone a { display:flex; align-items:center; gap:0.45rem; background:#fff; color:#236BB4; border-radius:20px; padding:0.4rem 1.1rem; text-decoration:none; font-weight:700; font-size:0.82rem; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:all 0.18s; white-space:nowrap; }
.tb-phone a:hover { background:#EDF4FB; }
@media(max-width:768px) { .tb-tagline { display:none; } .topbar-items { gap:1rem; } }
header { position:sticky; top:0; z-index:200; background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.08); }
nav { display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:100px; }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:170px; display:block; }
.nav-logo-text { font-size:1.15rem; font-weight:600; color:var(--blue); line-height:1.2; }
.nav-logo-text span { color:var(--orange); display:block; font-size:0.75rem; font-weight:400; letter-spacing:0.05em; }
.nav-links { display:flex; list-style:none; gap:0; height:100px; align-items:center; }
.nav-links a { display:flex; align-items:center; height:100px; padding:0 1rem; text-decoration:none; color:var(--text); font-size:0.84rem; font-weight:600; transition:color 0.2s; white-space:nowrap; border-bottom:3px solid transparent; }
.nav-links a:hover { color:var(--blue); border-bottom-color:var(--blue); }
.nav-links a.active { color: #2165AE; border-bottom-color: #2165AE; }
.nav-cta { background:var(--blue); border-radius:6px; margin-left:0.5rem; }
.nav-links a.nav-cta { color:white; transition:background 0.2s; }
.nav-orange { background:var(--orange); border-radius:6px; margin-left:0.3rem; }
.nav-links a.nav-orange { color:white; }
.hero { position:relative; min-height:540px; display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(26,58,92,0.62) 0%,rgba(26,58,92,0.35) 55%,rgba(26,58,92,0.08) 100%); }
.hero-content { position:relative; z-index:1; padding:90px 5%; max-width:680px; }
.hero-tag { display:inline-block; background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.4); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.35rem 1rem; border-radius:4px; margin-bottom:1.2rem; }
.hero h1 { font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; line-height:1.2; margin-bottom:1.2rem; font-weight:600; }
.hero p { color:rgba(255,255,255,0.88); font-size:1rem; font-weight:300; margin-bottom:2rem; max-width:540px; line-height:1.8; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-blue { display:inline-flex; align-items:center; gap:0.4rem; background:var(--blue); color:#fff; padding:0.8rem 1.8rem; border-radius:6px; text-decoration:none; font-weight:700; font-size:0.9rem; transition:background 0.2s,transform 0.15s; border:none; cursor:pointer; font-family:inherit; }
.btn-blue:hover { background:var(--blue-mid); transform:translateY(-1px); }
.btn-white { display:inline-flex; align-items:center; gap:0.4rem; background:white; color:var(--blue); padding:0.8rem 1.8rem; border-radius:6px; text-decoration:none; font-weight:700; font-size:0.9rem; transition:all 0.2s; }
.btn-white:hover { background:var(--gray-light); transform:translateY(-1px); }
.btn-orange { display:inline-flex; align-items:center; gap:0.4rem; background:var(--orange); color:#fff; padding:0.8rem 1.8rem; border-radius:6px; text-decoration:none; font-weight:700; font-size:0.9rem; transition:background 0.2s,transform 0.15s; border:none; cursor:pointer; font-family:inherit; }
.btn-orange:hover { background:var(--orange-dark); transform:translateY(-1px); }
.features-strip { background:#EEF4FB; border-top:1px solid rgba(45,79,122,0.1); border-bottom:1px solid rgba(45,79,122,0.1); padding:3rem 5%; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; }
.feat-item { display:flex; gap:1rem; align-items:flex-start; }
.feat-icon { width:56px; height:56px; background:transparent; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none; overflow:hidden; } .feat-icon img { width:56px; height:56px; object-fit:contain; }
.feat-item h2 { font-size:0.93rem; font-weight:700; line-height:1.7; color:var(--blue); margin-bottom:0.3rem; }
.feat-item p { font-size:0.82rem; color:var(--text-mid); font-weight:300; line-height:1.6; }
section { padding:80px 5%; }
.section-label { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); margin-bottom:0.6rem; display:block; }
h2.section-title { font-size:clamp(1.65rem,3vw,2.3rem); color:var(--blue); line-height:1.25; margin-bottom:1rem; font-weight:600; }
.section-lead { color:var(--text-mid); font-size:0.98rem; font-weight:300; max-width:640px; line-height:1.8; }
.center { text-align:center; }
.center .section-lead { margin:0 auto; }
.center .section-label { display:block; }
.check-list { list-style:none; margin:1.2rem 0 2rem; }
.check-list li { padding:0.45rem 0; font-size:0.92rem; color:var(--text-mid); display:flex; align-items:flex-start; gap:0.7rem; border-bottom:1px solid var(--border); }
.check-list li:last-child { border-bottom:none; }
.check-list li::before { content:'\2713'; color:var(--blue); font-weight:700; flex-shrink:0; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.split.reverse { direction:rtl; }
.split.reverse > * { direction:ltr; }
.split-img { border-radius:14px; max-width:70%; height:100%; display: block; margin: 0 auto; transition: transform 0.5s ease; object-fit:contain; box-shadow:var(--shadow); }
.image-window:hover .split-img { transform: scale(1.5); }
.leistungen-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-top: 3rem;
}
.leistungen-grid > * { flex: 0 0 calc((100% - 4rem) / 3); }
@media (max-width: 992px) {
.leistungen-grid > * { flex-basis: calc((100% - 2rem) / 2); }
}
@media (max-width: 768px) {
.leistungen-grid > * { flex-basis: 100%; }
}
.lcard { background:var(--white); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; display:flex; flex-direction:column; }
.lcard:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.lcard-body {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lcard-icon { width:52px; height:52px; background:transparent; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:0.9rem; border:none; } .lcard-icon img { width:52px; height:52px; object-fit:contain; border-radius:50%; }
.lcard h3 { font-size:0.97rem; font-weight:700; color:var(--blue); margin-bottom:0.5rem; line-height:1.3; }
.lcard p { font-size:0.86rem; color:var(--text-mid); font-weight:300; line-height:1.7; flex:1; }
.lcard-link { display:inline-flex; align-items:center; gap:0.3rem; margin-top:1.1rem; color:var(--blue); font-size:0.84rem; font-weight:700; text-decoration:none; transition:gap 0.2s; }
.lcard-link:hover { gap:0.6rem; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:3rem; }
.team-card { background:var(--white); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; text-align:center; }
.team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.team-card img { width:100%; height:240px; object-fit:cover; object-position:top; }
.team-card-body { padding:1.2rem; }
.team-card h3 { font-size:1.05rem; color:var(--blue); font-weight:600; margin-bottom:0.3rem; }
.team-card span { font-size:0.8rem; color:var(--text-light); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.frk-kassen-section { background: #fff; padding: 4rem 5%; }
.frk-kassen-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.frk-kassen-box { background: #F0F4FF; border-radius: 14px; padding: 1.5rem 0; margin-top: 1rem; border-left: 4px solid #2165AE; overflow: hidden; box-shadow: 0 4px 18px rgba(33,101,174,0.08); }
.frk-kassen-scroller { overflow: hidden; cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); }
.frk-kassen-scroller::-webkit-scrollbar { display: none; }
.frk-kassen-scroller.dragging { cursor: grabbing; }
.frk-kassen-track { display: flex; align-items: center; gap: 2.5rem; padding: 0.5rem 2rem; width: max-content; }
.frk-kassen-item { flex-shrink: 0; height: 60px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.frk-kassen-item img { max-height: 100%; max-width: 180px; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; user-drag: none; }
@media (max-width: 768px) {
.frk-kassen-section { padding: 2.5rem 5%; }
.frk-kassen-item { height: 45px; }
.frk-kassen-item img { max-width: 140px; }
.frk-kassen-track { gap: 1.8rem; }
}
.kontakt-wrap { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; margin-top:3rem; align-items:start; }
.kontakt-info h3 { font-size:1.25rem; color:var(--blue); margin-bottom:1.5rem; font-weight:600; }
.kinfo-row { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.3rem; padding-bottom:1.3rem; border-bottom:1px solid var(--border); }
.kinfo-row:last-child { border-bottom:none; }
.kinfo-icon {
width: 50px; height: 50px; background: transparent;
border-radius: 10px; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; }
.kinfo-icon img { width: 35px; height: 35px; display: block; }
.kinfo-body strong { display:block; font-size:0.73rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); margin-bottom:0.2rem; }
.kinfo-body span { color:var(--text); font-size:0.93rem; }
.kinfo-body a { color:var(--blue); text-decoration:none; font-weight:700; font-size:0.93rem; }
.kinfo-body a.big { font-size:1.15rem; }
.kinfo-body a:hover { text-decoration:underline; }
.kontakt-form-box {
background:var(--gray-bg);
border-radius:12px;
padding:2.5rem;
border:1px solid var(--border);
display: flex;
flex-direction: column;
min-height: 720px;
}
.kontakt-form-box h3 { font-size:1.25rem; color:var(--blue); margin-bottom:1.4rem; font-weight:600; }
.kontakt-form-box .form-group:last-of-type {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.kontakt-form-box textarea { flex:1; }
.karriere-box { background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%); border-radius:20px; padding:3rem; color:#fff; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.karriere-box h3 { font-size:1.5rem; font-weight:600; margin-bottom:0.8rem; }
.karriere-box p { font-size:0.9rem; opacity:0.85; font-weight:300; line-height:1.8; }
footer { background:#EEF4FB; color:#454C4D; padding:2rem 90px 1.2rem 5%; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 1.5rem;
align-items: start;
margin-bottom: 1.8rem;
}
.footer-grid .footer-col { padding-left: 1rem; }
.footer-brand img { height:180px; width:auto; display:block; margin:0 auto 0.8rem; }
.footer-brand p { font-size:0.85rem; line-height:1.7; font-weight:300; }
.footer-col h5 { color:#1C3A6E; font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col p,.footer-col a { display:block; font-size:0.84rem; color:#454C4D; text-decoration:none; margin-bottom:0.5rem; line-height:1.6; }
.footer-col a:hover { color:#2165AE; }
.footer-social { display:flex; justify-content:center; gap:0.7rem; margin-top:1rem; }
.footer-social a { width:50px; height:50px; background:transparent; border:none; border-radius:7px; display:flex; align-items:center;
justify-content:center; text-decoration: none; transition: transform 0.2s ease;}
.footer-social a img {width: 45px; height: 45px; display: block;}
.footer-social a:hover { background:transparent; transform: scale(1.3); }
.footer-bottom { border-top:1px solid rgba(45,79,122,0.2); padding-top:1.2rem; display:flex; justify-content:space-between; align-items:center; font-size:0.77rem; flex-wrap:wrap; gap:0.5rem; }
.footer-bottom a { color:#454C4D; text-decoration:none; margin-left:1rem; }
.footer-bottom a:hover { color:#2165AE; }
.footer-col button.cx-cookie-link { display:block; font-size:0.84rem; color:#454C4D; background:none; border:none; padding:0; margin-bottom:0.5rem; line-height:1.6; cursor:pointer; font-family:inherit; text-align:left; }
.footer-col button.cx-cookie-link:hover { color:#2165AE; }
.footer-bottom button.cx-cookie-link { color:#454C4D; background:none; border:none; padding:0; margin-left:1rem; cursor:pointer; font-family:inherit; font-size:inherit; }
.footer-bottom button.cx-cookie-link:hover { color:#2165AE; }
@media (max-width:900px) {
.split,.kontakt-wrap { grid-template-columns:1fr; gap:2.5rem; }
.split.reverse { direction:ltr; }
.footer-grid { grid-template-columns:1fr 1fr; }
.karriere-box { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
.features-grid { grid-template-columns:1fr 1fr; }
.footer-grid { grid-template-columns:1fr 1fr; gap:1.2rem; }
footer { padding:1.8rem 5% 1.2rem !important; }
.footer-brand { text-align:center; grid-column:1/-1; }
.footer-brand img { height:100px; margin:0 auto 0.6rem; display:block; }
.footer-brand p { font-size:0.82rem; max-width:280px; margin:0 auto; }
.footer-social { justify-content:center; }
.footer-grid .footer-col { padding-left:0; }
.footer-col h5 { margin-bottom:0.6rem; }
.footer-bottom { flex-direction:column; align-items:center; text-align:center; gap:0.4rem; }
.footer-bottom a { margin-left:0.5rem; }
}
@media (max-width:480px) {
.footer-grid { grid-template-columns:1fr; }
}
.burger {
display: none;
background: none;
border: none;
font-size: 1.7rem;
cursor: pointer;
color: var(--blue, #2D4F7A);
padding: 0.3rem 0.5rem;
line-height: 1;
z-index: 1100;
position: relative;
-webkit-tap-highlight-color: rgba(33,101,174,0.2);
touch-action: manipulation;
}
.nav-close {
display: none;
position: absolute;
top: 0.6rem;
right: 0.8rem;
background: none;
border: none;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: #2165AE;
padding: 0.2rem 0.5rem;
z-index: 1200;
-webkit-tap-highlight-color: rgba(33,101,174,0.2);
touch-action: manipulation;
}
.nav-links.open .nav-close { display: block; }
body.menu-open .burger { display: none !important; }
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 999;
opacity: 0;
animation: navOverlayIn 0.25s ease forwards;
}
body.menu-open header { z-index: 1500; }
@keyframes navOverlayIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes navCardIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 1200px) {
.burger { display: block; }
.nav-links {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
scrollbar-gutter: stable;
background: var(--white, #FFFFFF);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0,0,0,0.28);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.25rem;
height: auto;
padding: 3rem 0.9rem 0.9rem;
z-index: 1000;
}
.nav-links.open {
display: flex;
animation: navCardIn 0.28s ease forwards;
}
.nav-links li { width: 100%; text-align: center; list-style: none; }
.nav-links a {
display: block;
height: auto;
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-weight: 600;
background: var(--gray-bg, #F5F7FA);
color: var(--text, #454C4D);
border-radius: 10px;
border-bottom: none;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active {
background: var(--blue-bg, #EDF4FB);
color: var(--blue, #2165AE);
border-bottom-color: transparent;
}
.nav-links a.nav-cta {
background: var(--blue, #2165AE);
color: #fff;
}
.nav-links a.nav-cta:hover {
background: var(--blue-mid, #3F6EA0);
color: #fff;
}
.nav-links a.nav-orange {
background: var(--orange, #F47522);
color: #fff;
}
.nav-links a.nav-orange:hover {
background: var(--orange-dark, #C4601A);
color: #fff;
}
nav { height: 85px; }
.nav-logo img { height: 135px; max-height: 135px; }
html { scroll-padding-top: 80px; }
}
@media (max-width: 768px) {
.topbar { font-size: 0.72rem; }
.hero { padding: 0; border-radius: 0; display:block; }
.hero-img { position:relative; inset:auto; width:100%; height:auto; object-fit:cover; object-position:center top; aspect-ratio:16/9; display:block; }
.hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(26,58,92,0.62) 0%,rgba(26,58,92,0.35) 55%,rgba(26,58,92,0.08) 100%); }
.hero-content { position:relative; z-index:2; padding:2rem 5%; background:linear-gradient(180deg,rgba(15,35,65,0.88) 0%,rgba(15,35,65,0.75) 100%); margin-top:-4px; }
.hero h1 { font-size: 1.6rem; }
h2.section-title { font-size: 1.4rem; }
.features-grid, .lcard-grid, .jobs-grid, .benefits-grid { grid-template-columns: 1fr; }
.feat-item { flex-direction: row; }
section { padding: 3rem 5%; }
.footer-grid { grid-template-columns: 1fr; }
.hero-actions { flex-direction: column; gap: 0.7rem; }
.btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 1.35rem; }
.kontakt-wrap { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
.hero-img { object-position: center 50%; }
}
@media (min-width: 1101px) {
.nav-links a.nav-cta { padding:0.6rem 1.3rem; height:auto; border-bottom:none; }
.nav-links a.nav-cta:hover { background:var(--blue-mid); border-bottom:none; }
.nav-links a.nav-orange { padding:0.6rem 1.3rem; height:auto; border-bottom:none; }
.nav-links a.nav-orange:hover { background:var(--orange-dark); border-bottom:none; }
}
:root h1, :root h2, :root h3, :root h4, :root h5, :root h6 { font-family: 'Open Sans', sans-serif; }
.ds-modal-close-btn {
background: rgba(45,79,122,0.2);
border: none;
color: #454C4D;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
flex-shrink: 0;
}
.bg-section { background:#F8FCF8; }
.bgl-grid { display:grid; grid-template-columns:1fr 100px 1fr; gap:2rem; margin-top:3rem; align-items:start; }
.bgl-card { background:#fff; border-radius:18px; padding:2rem; position:relative; border:2px solid #E0E0E0; }
.bgl-card-green { border-color:#43A047; box-shadow:0 4px 24px rgba(67,160,71,0.14); }
.bgl-card-blue  { border-color:#2165AE; box-shadow:0 4px 24px rgba(30,61,110,0.13); }
.bgl-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; padding:0.32rem 1.1rem; border-radius:100px; white-space:nowrap; color:#fff; }
.bgl-badge-green { background:#43A047; }
.bgl-badge-blue  { background:#2165AE; }
.bgl-icon { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:12px; margin-bottom:1rem; }
.bgl-icon-green { background:#E8F5E9; }
.bgl-icon-blue  { background:#EDF4FB; }
.bgl-icon.has-visual { width:150px; height:150px; background:transparent; border-radius:0; display: flex; margin: 0 auto 1rem; }
.bgl-icon.has-visual img { width:200px; height:200px; object-fit:contain; }
.bgl-card h3 { font-size:1.15rem; font-weight:600; margin-bottom:0.25rem; }
.bgl-h3-green { color:#2E7D32; }
.bgl-h3-blue  { color:#2165AE; }
.bgl-sub { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.9rem; color:#454C4D; }
.bgl-sub-blue { color:#3F6EA0; }
.bgl-card > p { font-size:0.87rem; color:#454C4D; font-weight:300; line-height:1.7; margin-bottom:1.1rem; }
.bgl-list { list-style:none; margin-bottom:1.5rem; }
.bgl-list li { font-size:0.87rem; color:#454C4D; padding:0.24rem 0; display:flex; align-items:center; gap:0.6rem; }
.bgl-list li::before { content:"\2713"; font-weight:700; font-size:0.95rem; flex-shrink:0; }
.bgl-list-green li::before { color:#43A047; }
.bgl-list-blue li::before { color:#2165AE; }
.bgl-btn { display:block; width:100%; text-align:center; padding:0.9rem 1rem; border-radius:9px; font-size:0.93rem; font-weight:700; text-decoration:none; transition:opacity 0.2s; border:none; cursor:pointer; font-family:inherit; color:#fff; }
.bgl-btn:hover { opacity:0.88; }
.bgl-btn-green { background:#43A047; }
.bgl-btn-blue  { background:#2165AE; }
.bgl-plus { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem; padding-top:5rem; }
.bgl-circle { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem; font-weight:300; flex-shrink:0; }
.bgl-circle-blue { background:linear-gradient(135deg, #2165AE 0%, #2196F3 100%); box-shadow:0 4px 14px rgba(30,61,110,0.35); }
.bgl-label { font-size:0.63rem; font-weight:700; letter-spacing:0.07em; color:#454C4D; text-align:center; line-height:1.5; }
@media(max-width:800px){ .bgl-grid{ grid-template-columns:1fr; } .bgl-plus{ flex-direction:row; padding-top:0; } }
.cx-map-card {
background: linear-gradient(135deg, #e8f5e9 0%, #84e5e9 100%);
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
min-height: 350px;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
margin-top: 3rem;
text-align: center;
}
.cx-map-placeholder {
background: #ffffff;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
max-width: 675px;
width: 100%;
}
.cx-map-kicker {
display: block;
font-size: 0.75rem;
font-weight: 700;
color: #2165AE;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.cx-map-placeholder h3 {
font-size: 1.4rem;
font-weight: 600;
color: #454C4D;
margin-top: 0;
margin-bottom: 0.8rem;
}
.cx-map-placeholder p {
font-size: 0.9rem;
color: #454C4D;
line-height: 1.6;
margin-bottom: 1.8rem;
}
.cx-map-actions {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.cx-map-load {
background: #2165AE;
color: #ffffff;
border: none;
padding: 0.9rem 1.5rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: transform 0.2s ease, background 0.2s ease;
}
.cx-map-load:hover {
background: #2165AE;
transform: translateY(-2px);
}
.cx-map-link {
background: transparent;
color: #2165AE;
border: 2px solid #2165AE;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.cx-map-link:hover {
background: rgba(45, 106, 31, 0.05);
color: #083f88;
border-color: #6681ce;
}
@media (min-width: 600px) {
.cx-map-actions {
flex-direction: row;
justify-content: center;
}
.cx-map-load, .cx-map-link {
width: auto;
}
}
.dsm-h2{font-size:1.15rem;color:#2D4F7A;font-weight:600;margin:2rem 0 0.6rem;padding-top:1.5rem;border-top:1px solid #eee;}
.dsm-h3{font-size:0.95rem;font-weight:700;color:#454C4D;margin:1.2rem 0 0.4rem;}
.dsm-p{font-size:0.87rem;color:#454C4D;font-weight:300;line-height:1.8;margin-bottom:0.7rem;}
:root {
--bg-0: #f3f5f9;
--brand-orange: #D95A00;
--brand-blue: #1d57a0;
--ink: #0c1929;
--ink-dim: #3a5068;
--ink-faint: #8a9fb8;
--ring1: rgba(217,90,0,.38);
--ring2: rgba(29,87,160,.28);
--ring3: rgba(29,87,160,.14);
--card-bg: rgba(255,255,255,.96);
--card-border: rgba(0,0,0,.07);
--card-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink); font-family: "Open Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.einzugsgebiet {
position: relative;
width: 100%;
padding: 80px 24px 72px;
background: radial-gradient(ellipse 90% 65% at 50% 28%, #ffffff 0%, #eef3fb 45%, #e0ebf8 100%);
overflow: hidden;
isolation: isolate;
}
.einzugsgebiet::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(0,0,0,.045) 1px, transparent 1px);
background-size: 30px 30px;
opacity: .7;
z-index: 0; pointer-events: none;
}
.einzugsgebiet::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(210,225,245,.55) 100%);
z-index: 1; pointer-events: none;
}
.eg-head {
position: relative; z-index: 3;
max-width: 1100px; margin: 0 auto 48px;
text-align: center;
}
.eg-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 16px;
border: 1px solid rgba(217,90,0,.22);
border-radius: 999px;
background: rgba(217,90,0,.06);
color: #904000;
font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}
.eg-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-orange);
box-shadow: 0 0 8px var(--brand-orange);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:.5} }
.eg-title {
margin: 18px 0 12px;
font-size: clamp(28px,4vw,50px);
font-weight: 300; letter-spacing: -.015em; line-height: 1.1;
color: var(--ink);
}
.eg-title strong {
font-weight: 700;
background: linear-gradient(120deg, #4a8fd4 0%, #2165AE 45%, #1a4278 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.eg-sub {
margin: 0 auto; max-width: 640px;
font-size: 16px; font-weight: 300; line-height: 1.7;
color: var(--ink-dim);
}
.eg-stage-wrap { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.eg-stage {
position: relative;
width: 100%; aspect-ratio: 1200 / 1000;
max-height: 780px; margin: 0 auto;
}
.eg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ring { fill: none; stroke-width: 1.2; }
.r1 { stroke: var(--ring1); }
.r2 { stroke: var(--ring2); }
.r3 { stroke: var(--ring3); }
.ring-label { fill: #334155; font-family: "Open Sans",sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; paint-order: stroke fill; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.path-line { fill: none; stroke: rgba(29,87,160,.18); stroke-width: .8; }
.hub {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%);
display: flex; flex-direction: column; align-items: center;
z-index: 5;
}
.hub-core {
width: 74px; height: 74px; border-radius: 50%;
background: #ffffff;
border: 2px solid var(--brand-blue);
box-shadow: 0 0 0 8px rgba(29,87,160,.08), 0 4px 28px rgba(29,87,160,.22), 0 1px 8px rgba(0,0,0,.08);
display: flex; align-items: center; justify-content: center;
}
.hub-label {
margin-top: 10px;
font-size: 12px; font-weight: 800; letter-spacing: .06em;
color: var(--brand-blue); text-align: center; white-space: nowrap; text-transform: uppercase;
}
.hub-meta { font-size: 11px; color: #475569; margin-top: 4px; font-weight: 600; letter-spacing: .02em; }
.star { color: var(--brand-blue); }
.city {
position: absolute; transform: translate(-50%,-50%);
text-decoration: none; color: var(--ink); z-index: 4;
}
.city-card {
display: flex; flex-direction: column; align-items: center;
padding: 7px 12px; border-radius: 10px;
background: var(--card-bg);
border: 1px solid var(--card-border);
box-shadow: var(--card-shadow);
white-space: nowrap; cursor: pointer;
transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;
}
.city:hover .city-card {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 28px rgba(217,90,0,.14), 0 2px 8px rgba(0,0,0,.06);
border-color: rgba(217,90,0,.38);
}
.city-card::before {
content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; margin: 0 auto 4px;
}
.city.z1 .city-card::before { background: var(--brand-orange); }
.city.z2 .city-card::before { background: var(--brand-blue); }
.city.z3 .city-card::before { background: #8aabcc; }
.city-name { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink); }
.city-dist { font-size: 10px; color: #5F7186; margin-top: 1px; }
.city-dist b { color: #B04800; font-weight: 700; }
.eg-legend {
position: relative; z-index: 3;
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; margin: 28px auto 0; max-width: 800px;
}
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px;
font-size: 12px; font-weight: 500; color: var(--ink-dim);
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.85);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.chip .sw { width: 10px; height: 10px; border-radius: 50%; }
.chip.z1 .sw { background: var(--brand-orange); }
.chip.z2 .sw { background: var(--brand-blue); }
.chip.z3 .sw { background: #8aabcc; }
.eg-hint { position: relative; z-index: 3; text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--brand-blue); letter-spacing: .04em; font-weight: 700; }
.eg-hint .arrow { color: var(--brand-orange); margin-right: 6px; font-weight: 800; font-size: 1.1em; }
.eg-mobile { display: block !important; padding: 0 5% 1.5rem; margin-top: 1rem; }
.eg-mobile-zone { margin-bottom: 1.4rem; }
.eg-mobile-zone-title { font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #334155; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 6px; }
.eg-mobile-zone-title span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.eg-mobile-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eg-mobile-chip { background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; color: #1f2937; text-decoration: none; display: inline-flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 6px rgba(15,23,42,0.06); transition: transform 0.15s, box-shadow 0.15s; }
.eg-mobile-chip:active { transform: scale(0.97); }
.eg-mobile-chip small { font-size: 0.7rem; color: #64748b; font-weight: 500; }
.eg-mobile-chip.z1 { border-color: #F47522; border-left-width: 4px; }
.eg-mobile-chip.z2 { border-color: #2165AE; border-left-width: 4px; }
.eg-mobile-chip.z3 { border-color: #94a3b8; border-left-width: 4px; }
@media (min-width: 901px) {
.eg-mobile { display: none !important; }
}
@media (max-width: 900px) {
.eg-stage-wrap { display: none; }
.eg-hint { display: none; }
.eg-legend { flex-direction: column; align-items: flex-start; padding: 0 5%; }
}
body { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; }
h2, .section-title, .block-title, .verspr-text h2 { font-size: clamp(1.65rem, 2.5vw + 0.6rem, 2.3rem); font-weight: 600; line-height: 1.25; }
.btn, .btn-blue, .btn-orange, .btn-white, .lmodal-cta-primary, .verspr-cta, .pg-cta-btn, .form-submit, .submit-btn, .btn-call, .btn-wa, .hero-cta, .nav-cta, .nav-orange { font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 700; }
.section-label, .page-hero-kicker, .lmodal-kicker, .lmodal-vorteile-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
footer { font-family: 'Open Sans', sans-serif; }
footer p, footer span, footer li, footer a, .footer-bottom span, .footer-bottom a { font-size: 0.84rem; font-weight: 400; }
footer p, .footer-brand p { font-weight: 300; }
footer h5, .footer-col h5 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
footer, footer * {
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1;
text-rendering: optimizeLegibility;
}
footer h5, .footer-col h5 {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1rem;
line-height: 1.4;
}
footer p, footer a, footer span, footer li, .footer-col p, .footer-col a {
font-size: 0.84rem;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
.footer-brand p {
font-size: 0.85rem;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
.footer-bottom, .footer-bottom span, .footer-bottom a, .footer-bottom button {
font-size: 0.77rem;
font-weight: 400;
line-height: 1.5;
}
.nav-logo img,
header .nav-logo img,
img#nav-logo-img {
height: 130px;
width: auto !important;
max-width: none !important;
max-height: 130px;
display: block !important;
flex-shrink: 0;
}
@media (max-width: 768px) {
.nav-logo img, header .nav-logo img, img#nav-logo-img {
height: 120px !important;
max-height: 120px;
}
}
@media (min-width: 1201px) {
.nav-links {
display: flex;
list-style: none;
gap: 0;
align-items: center;
}
.nav-links a {
display: flex;
align-items: center;
height: 100px;
padding: 0 1rem;
font-size: 0.95rem;
font-weight: 600;
color: #2A2A2A;
white-space: nowrap;
transition: color 0.2s !important;
}
}
@media (max-width: 1200px) {
.nav-links { display: none; }
.nav-links.open { display: flex !important; }
}
.nav-links a.nav-cta,
.nav-links a.nav-orange {
height: auto !important;
padding: 0.6rem 1.3rem;
border-radius: 8px !important;
font-size: 0.92rem;
font-weight: 700 !important;
margin-left: 0.4rem;
border-bottom: none !important;
color: #fff;
}
html, body { font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; }
body { font-size: 15px; font-weight: 400; line-height: 1.7; color: #454C4D; }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; }
h1, .hero h1, .page-hero h1, .danke-card h1 { font-size: clamp(1.9rem, 3vw + 0.8rem, 2.9rem); font-weight: 600; line-height: 1.2; }
h2, .section-title, .block-title { font-size: clamp(1.65rem, 2.5vw + 0.6rem, 2.3rem); font-weight: 600; line-height: 1.25; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.95rem; font-weight: 700; }
.section-label, .page-hero-kicker, .lmodal-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.btn, .btn-blue, .btn-orange, .btn-white, .nav-cta, .nav-orange, .form-submit, .submit-btn, .btn-call, .btn-wa, .hero-cta, .pg-cta-btn, .verspr-cta, .lmodal-cta-primary { font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0; }
.nav-links a { font-size: 0.95rem; font-weight: 600; }
footer, footer * { font-family: 'Open Sans', sans-serif; }
footer h5, .footer-col h5 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; margin-bottom: 1rem; color: #1C3A6E; }
footer p, .footer-col p, footer span, footer li, .footer-bottom span { font-size: 0.84rem; font-weight: 400; line-height: 1.65; letter-spacing: 0; }
.footer-col a { font-size: 0.84rem; font-weight: 400; line-height: 1.65; letter-spacing: 0; display: block; }
.footer-brand p { font-size: 0.85rem; font-weight: 400; line-height: 1.65; }
.footer-bottom, .footer-bottom a, .footer-bottom button { font-size: 0.77rem; font-weight: 400; line-height: 1.5; }
input, textarea, select { font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 400; }
.form-group label { font-family: 'Open Sans', sans-serif; }
.faq-btn, details > summary { font-family: 'Open Sans', sans-serif; font-size: 0.97rem; font-weight: 700; }
.faq-item{background:white;border-radius:14px;margin-bottom:1rem;border:1px solid var(--border);overflow:hidden;}
.faq-q{width:100%;background:none;border:none;padding:1.2rem 1.6rem;text-align:left;font-size:0.97rem;font-weight:700;color:var(--blue);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:'Open Sans',sans-serif;}
.faq-q::after{content:'';display:inline-block;width:1.2rem;height:1.2rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236096C4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/contain;flex-shrink:0;transition:transform 0.35s ease;}
.faq-item.is-open .faq-q::after{transform:rotate(180deg);}
.faq-a{padding:0 1.6rem;font-size:0.9rem;color:var(--text-mid);line-height:1.8;overflow:hidden;max-height:0;transition:max-height 0.35s ease,padding-bottom 0.35s ease;}
.faq-item.is-open .faq-a{max-height:600px;padding-bottom:1.2rem;}
p { font-family: 'Open Sans', sans-serif; }
#warum-frontida h3 {
font-weight: 700;
line-height: 1.3;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
#warum-frontida h3,
#warum-frontida p {
min-width: 0;
}
@media (max-width: 800px) {
#mdk-note .mdk-flex { flex-direction: column !important; min-height: auto !important; }
#mdk-note .mdk-yellow { width: 100% !important; border-right: none !important; border-bottom: 2px solid #2165AE !important; padding: 1rem 1.2rem !important; flex-direction: row !important; gap: 1rem !important; flex-wrap: wrap !important; }
#mdk-note .mdk-yellow > div { margin: 0 !important; flex: 1 !important; min-width: 140px !important; }
#mdk-note .mdk-main { padding: 1.2rem 1rem !important; }
#mdk-note .mdk-scores { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
#mdk-note .mdk-cta-bar { flex-direction: column !important; align-items: stretch !important; padding: 1rem !important; text-align: center !important; }
#mdk-note .mdk-cta-bar > div { justify-content: center !important; font-size: 0.78rem !important; }
#mdk-note .mdk-cta-bar a { justify-content: center !important; }
#mdk-note .mdk-ribbon { font-size: 0.62rem !important; padding: 0.4rem 0.9rem !important; top: -18px !important; max-width: 90% !important; white-space: normal !important; text-align: center !important; line-height: 1.2 !important; }
#mdk-note .mdk-ribbon svg { width: 22px !important; height: 22px !important; }
#mdk-note .mdk-stamp { width: 60px !important; height: 60px !important; top: -10px !important; right: 8px !important; }
#mdk-note .mdk-stamp span:nth-child(1) { font-size: 0.45rem !important; }
#mdk-note .mdk-stamp span:nth-child(2) { font-size: 1.35rem !important; }
#mdk-note .mdk-stamp span:nth-child(3) { font-size: 0.42rem !important; }
#mdk-note .mdk-card { margin-top: 1.5rem !important; }
#mdk-note { padding: 4rem 4% 3rem !important; }
}
@media (max-width: 480px) {
#mdk-note .mdk-scores { grid-template-columns: 1fr 1fr !important; }
#mdk-note .mdk-main h3 { font-size: 1.05rem !important; line-height: 1.2 !important; }
#mdk-note .mdk-main { padding: 1rem 0.7rem !important; }
#mdk-note .mdk-yellow > div { flex: 1 100% !important; }
}
.pg-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:2.5rem; }
.pg-card { border-radius:14px; padding:2rem 1.2rem; text-align:center; transition:transform 0.25s ease, box-shadow 0.25s ease; }
.pg-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(15,30,55,0.18); }
.pg-num { font-size:3.2rem; font-weight:800; line-height:1; margin-bottom:1rem; }
.pg-label { font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1.2rem; line-height:1.4; }
.pg-desc { font-size:0.85rem; line-height:1.65; font-weight:400; }
.pg-1 { background:#E3EDF7; }
.pg-1 .pg-num, .pg-1 .pg-label { color:#2165AE; }
.pg-1 .pg-desc { color:#2A4F7A; }
.pg-2 { background:#BFD7EE; }
.pg-2 .pg-num, .pg-2 .pg-label { color:#1F4F8F; }
.pg-2 .pg-desc { color:#2A4F7A; }
.pg-3 { background:#3F6EA0; }
.pg-3 .pg-num, .pg-3 .pg-label, .pg-3 .pg-desc { color:#ffffff; }
.pg-3 .pg-desc { color:rgba(255,255,255,0.95); }
.pg-4 { background:#2165AE; }
.pg-4 .pg-num, .pg-4 .pg-label { color:#ffffff; }
.pg-4 .pg-desc { color:rgba(255,255,255,0.95); }
.pg-5 { background:#1a3a5c; }
.pg-5 .pg-num, .pg-5 .pg-label { color:#ffffff; }
.pg-5 .pg-desc { color:rgba(255,255,255,0.95); }
.pg-cta { background:linear-gradient(135deg, #1a3a5c 0%, var(--blue) 100%); border-radius:16px; padding:2rem 2.5rem; margin-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; color:#fff; }
.pg-cta-text h3 { font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:0.4rem; }
.pg-cta-text p { font-size:0.92rem; color:rgba(255,255,255,0.88); line-height:1.6; margin:0; }
.pg-cta-btn { background:#ffffff; color:var(--blue); padding:0.85rem 1.6rem; border-radius:8px; text-decoration:none; font-weight:700; font-size:0.92rem; white-space:nowrap; transition:transform 0.2s ease, box-shadow 0.2s ease; display:inline-flex; align-items:center; gap:0.4rem; }
.pg-cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.25); }
@media (max-width: 1100px) { .pg-grid { grid-template-columns:repeat(5,1fr); gap:0.6rem; } .pg-card { padding:1.5rem 0.8rem; } .pg-num { font-size:2.4rem; } .pg-label { font-size:0.65rem; } .pg-desc { font-size:0.78rem; } }
@media (max-width: 768px) { .pg-grid { grid-template-columns:repeat(2,1fr); gap:0.8rem; } .pg-card { padding:1.5rem 1rem; } .pg-num { font-size:2.6rem; } .pg-label { font-size:0.7rem; } .pg-desc { font-size:0.82rem; } .pg-cta { flex-direction:column; text-align:center; padding:1.5rem; } .pg-cta-btn { width:100%; justify-content:center; } }
@media (max-width: 480px) { .pg-grid { grid-template-columns:1fr; } }
.verspr-section { background: linear-gradient(180deg, #EDF4FB 0%, #F5F9FE 100%); padding: 5rem 5%; }
.verspr-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.verspr-text { min-width: 0; }
.verspr-text .section-label { color: var(--blue); font-weight: 700; letter-spacing: 0.12em; font-size: 0.78rem; text-transform: uppercase; margin-bottom: 1rem; display: inline-block; }
.verspr-text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--blue); line-height: 1.2; font-weight: 700; margin-bottom: 1.2rem; }
.verspr-text .verspr-lead { font-size: 1rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1.8rem; }
.verspr-checks { display: grid; gap: 0.7rem; margin-bottom: 2rem; }
.verspr-check {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.85rem 1.2rem;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(33,101,174,0.18);
border-radius: 12px;
font-size: 0.92rem; color: var(--text);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.verspr-check:hover { background: #fff; transform: translateX(4px); box-shadow: 0 4px 16px rgba(33,101,174,0.1); }
.verspr-check-icon {
flex-shrink: 0; width: 26px; height: 26px;
background: var(--blue); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.78rem; font-weight: 700;
}
.verspr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(33,101,174,0.18); border-bottom: 1px solid rgba(33,101,174,0.18); }
.verspr-stat { text-align: center; }
.verspr-stat-num { font-size: 1.2rem; font-weight: 700; color: var(--blue); line-height: 1.2; margin-bottom: 0.3rem; }
.verspr-stat-label { font-size: 0.78rem; color: var(--text-mid); line-height: 1.4; }
.verspr-cta { display: block; width: 100%; padding: 1rem 1.5rem; background: var(--blue); color: #fff; text-align: center; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(33,101,174,0.3); }
.verspr-cta:hover { background: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(33,101,174,0.4); }
.verspr-image-wrap { position: relative; }
.verspr-image-wrap img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 20px 50px rgba(33,101,174,0.18); display: block; }
@media (max-width: 900px) {
.verspr-section { padding: 3rem 5%; }
.verspr-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.verspr-image-wrap { order: -1; }
.verspr-image-wrap img { border-radius: 18px; }
.verspr-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.verspr-stat-num { font-size: 1.05rem; }
.verspr-stat-label { font-size: 0.72rem; }
}
@media (max-width: 480px) {
.verspr-stats { grid-template-columns: 1fr; }
.verspr-stat { padding: 0.4rem 0; }
}
.fpf-wrap {
position: fixed;
bottom: 1.4rem;
right: 1.4rem;
z-index: 600;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.45rem;
width: 260px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.13));
}
.fpf-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-radius: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 0.78rem;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;
transition: transform 0.2s, opacity 0.2s;
}
.fpf-btn:hover { transform: translateY(-2px); opacity: 0.93; }
.fpf-orange {
background: #F47522;
animation: fpf-pulse-o 2.5s ease-in-out infinite;
}
.fpf-blue {
background: #2165AE;
animation: fpf-pulse-b 2.5s ease-in-out infinite;
animation-delay: 1.25s;
}
@keyframes fpf-pulse-o {
0%,100% { box-shadow: 0 3px 14px rgba(244,117,34,0.4); }
50%      { box-shadow: 0 3px 22px rgba(244,117,34,0.7), 0 0 0 5px rgba(244,117,34,0.12); }
}
@keyframes fpf-pulse-b {
0%,100% { box-shadow: 0 3px 14px rgba(33,101,174,0.4); }
50%      { box-shadow: 0 3px 22px rgba(33,101,174,0.7), 0 0 0 5px rgba(33,101,174,0.12); }
}
.fpf-icons {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.fpf-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.2s, opacity 0.2s;
flex-shrink: 0;
}
.fpf-icon:hover { transform: scale(1.1); opacity: 0.9; }
.fpf-wa    { background: #25D366; box-shadow: 0 3px 14px rgba(37,211,102,0.45); }
.fpf-orange {
width: 240px; padding: 0.6rem 0.85rem; font-size: 0.78rem;
border-radius: 8px; white-space: nowrap; font-weight: 700; line-height: 1.2;
}
.fpf-blue { width: 90%; align-self: flex-end; padding: 0.42rem 0.8rem; font-size: 0.7rem; }
@media (max-width: 600px) {
.fpf-wrap {
display: grid;
grid-template-columns: 1fr 56px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
border-radius: 0;
gap: 0;
filter: none;
box-shadow: 0 -3px 14px rgba(0,0,0,0.16);
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
overflow: visible;
}
.fpf-btn {
display: flex;
width: auto;
max-width: none;
align-self: stretch;
border-radius: 0;
font-size: 0.78rem;
padding: 0.65rem 0.5rem;
line-height: 1.3;
white-space: nowrap;
animation: none;
box-shadow: none;
box-sizing: border-box;
}
.fpf-orange { grid-column: 1; grid-row: 1; }
.fpf-blue   { grid-column: 1; grid-row: 2; }
.fpf-icons {
grid-column: 2;
grid-row: 1 / 3;
align-self: stretch;
display: flex;
gap: 0;
width: auto;
align-items: stretch;
justify-content: flex-end;
}
.fpf-icon {
border-radius: 0;
height: auto;
width: auto;
flex: 1 1 auto;
padding: 0;
margin: 0;
box-shadow: none;
}
.fpf-icon svg { width: 24px; height: 24px; flex-shrink: 0; }
}
@media (max-width: 380px) {
.fpf-btn { font-size: 0.76rem; padding: 0.75rem 0.5rem; }
}
@media (max-width: 600px) {
body { padding-bottom: 84px !important; }
footer { padding-bottom: 1.2rem !important; }
.footer-bottom {
flex-direction: column !important;
gap: 0.6rem !important;
align-items: flex-start !important;
text-align: left !important;
}
.footer-bottom a,
.footer-bottom button.cx-cookie-link {
margin-left: 0 !important;
display: inline-block;
padding: 0.3rem 0;
}
}
@media (max-width: 380px) {
body { padding-bottom: 84px !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid #2165AE;
outline-offset: 2px;
}
.lcard[data-leistung] { cursor: pointer; background: none; border: 1px solid var(--border); font: inherit; text-align: inherit; color: inherit; width: 100%; padding: 0; }
.lcard[data-leistung]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.leistung-source { display: none; }
.lmodal-overlay {
position: fixed; inset: 0; z-index: 2000;
background: rgba(15, 30, 55, 0.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem; opacity: 0; visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.lmodal-overlay.is-open { opacity: 1; visibility: visible; }
body.lmodal-open { overflow: hidden; }
.lmodal {
position: relative;
width: 100%; max-width: 820px; max-height: calc(100vh - 3rem);
background: var(--white); border-radius: 20px;
box-shadow: 0 30px 80px rgba(15, 30, 55, 0.35), 0 6px 22px rgba(0, 0, 0, 0.12);
display: flex; flex-direction: column; overflow: hidden;
transform: scale(0.94) translateY(18px); opacity: 0;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.lmodal-overlay.is-open .lmodal { transform: scale(1) translateY(0); opacity: 1; }
.lmodal-head {
position: relative; flex-shrink: 0;
background: linear-gradient(135deg, #1a3a5c 0%, var(--blue) 60%, var(--blue-mid) 100%);
color: #fff; padding: 1.6rem 3.5rem 1.4rem 1.8rem;
}
.lmodal-kicker {
display: inline-block;
background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 4px;
margin-bottom: 0.7rem;
}
.lmodal-head h2 {
font-family: 'Open Sans', sans-serif; color: #fff;
font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 600;
line-height: 1.25; margin: 0 0 0.4rem;
}
.lmodal-head p {
color: rgba(255, 255, 255, 0.85); font-size: 0.92rem;
font-weight: 300; line-height: 1.6; margin: 0;
}
.lmodal-close {
position: absolute; top: 1rem; right: 1rem;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32);
color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.lmodal-close:hover { background: rgba(255, 255, 255, 0.28); transform: rotate(90deg); }
.lmodal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lmodal-body {
flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
scroll-behavior: smooth; padding: 1.7rem 1.8rem 1.4rem;
color: var(--text); font-size: 0.94rem; line-height: 1.7;
}
.lmodal-body::-webkit-scrollbar { width: 8px; }
.lmodal-body::-webkit-scrollbar-thumb { background: rgba(33, 101, 174, 0.35); border-radius: 8px; }
.lmodal-body::-webkit-scrollbar-track { background: transparent; }
.lmodal-body p { color: var(--text-mid); margin-bottom: 1rem; font-size: 0.94rem; }
.lmodal-body strong { color: var(--text); }
.lmodal-hero-img {
width: 100%; max-height: 260px; object-fit: cover; object-position: center 30%;
display: block; border-radius: 14px; margin: 0 0 1.3rem;
box-shadow: 0 6px 22px rgba(15, 30, 55, 0.12);
background: var(--gray-bg);
}
@media (max-width: 640px) {
.lmodal-hero-img { max-height: 180px; border-radius: 10px; margin-bottom: 1rem; }
}
.lmodal-lead {
font-size: 1.02rem; line-height: 1.65; color: var(--text);
margin: 0 0 1.4rem; font-weight: 400;
}
.lmodal-lead strong { color: var(--blue); font-weight: 700; }
.lmodal-vorteile-title {
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--blue);
margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.5rem;
}
.lmodal-vorteile-title::before {
content: ''; width: 28px; height: 2px; background: var(--orange); border-radius: 2px;
}
.lmodal-vorteile {
list-style: none; padding: 0; margin: 0 0 1.6rem;
display: grid; gap: 0.6rem;
}
.lmodal-vorteile li {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: 0.85rem 1rem; background: var(--blue-bg);
border-radius: 10px; border-left: 3px solid var(--blue);
font-size: 0.91rem; line-height: 1.55; color: var(--text);
}
.lmodal-vorteile li::before {
content: '\2713'; flex-shrink: 0; width: 22px; height: 22px;
background: var(--blue); color: #fff; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.78rem; font-weight: 700; margin-top: 1px;
}
.lmodal-vorteile li strong { color: var(--blue); font-weight: 700; display: inline; }
.lmodal-cta-block {
background: linear-gradient(135deg, #f8fafc 0%, var(--blue-bg) 100%);
border-radius: 14px; padding: 1.2rem 1.2rem 1.1rem;
border: 1px solid var(--border);
margin-top: 0.4rem;
}
.lmodal-cta-primary {
display: flex; align-items: center; justify-content: center;
gap: 0.5rem; width: 100%;
background: var(--blue); color: #fff;
padding: 0.95rem 1.4rem; border-radius: 10px;
font-weight: 700; font-size: 0.96rem;
text-decoration: none; transition: background 0.2s ease, transform 0.15s ease;
box-shadow: 0 4px 14px rgba(33, 101, 174, 0.28);
}
.lmodal-cta-primary:hover {
background: var(--blue-mid); transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(33, 101, 174, 0.38);
}
.lmodal-cta-primary svg { width: 16px; height: 16px; }
.lmodal-cta-secondary {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0.6rem; margin-top: 0.7rem;
}
.lmodal-cta-secondary a {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.4rem; padding: 0.7rem 0.9rem; border-radius: 8px;
font-size: 0.84rem; font-weight: 700; text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lmodal-cta-secondary .lcta-beratung {
background: #fff; color: var(--blue); border: 1.5px solid var(--blue-light);
}
.lmodal-cta-secondary .lcta-beratung:hover {
background: var(--blue-bg); border-color: var(--blue);
}
.lmodal-cta-secondary .lcta-call { background: var(--blue); color: #fff; border: 1.5px solid var(--blue); }
.lmodal-cta-secondary .lcta-call:hover { background: var(--blue-mid); border-color: var(--blue-mid); }
@media (max-width: 480px) {
.lmodal-cta-secondary { grid-template-columns: 1fr; }
.lmodal-vorteile li { font-size: 0.88rem; padding: 0.75rem 0.85rem; }
.lmodal-lead { font-size: 0.96rem; }
}
.lmodal-infobox {
background: var(--blue-bg); border-left: 4px solid var(--blue);
border-radius: 12px; padding: 1rem 1.2rem; margin: 1.1rem 0;
}
.lmodal-infobox h4 { font-size: 0.92rem; color: var(--blue); font-weight: 700; margin-bottom: 0.4rem; }
.lmodal-infobox p { font-size: 0.86rem; color: var(--text-mid); margin: 0; line-height: 1.65; }
.lmodal-section-title {
font-size: 1rem; font-weight: 700; color: var(--blue);
margin: 1.3rem 0 0.7rem;
}
.lmodal-list {
list-style: none; margin: 0 0 1.3rem; padding: 0;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.lmodal-list li {
display: flex; gap: 0.7rem; padding: 0.65rem 0.9rem;
border-bottom: 1px solid #eee; font-size: 0.9rem;
color: #454C4D; line-height: 1.55;
}
.lmodal-list li:last-child { border-bottom: none; }
.lmodal-list li::before { content: '\2713'; color: var(--blue); font-weight: 700; flex-shrink: 0; }
.lmodal-area {
background: #F0F4FF; border-left: 3px solid var(--blue);
border-radius: 10px; padding: 0.8rem 1rem; margin: 0.8rem 0 1.2rem;
font-size: 0.84rem; color: #454C4D; line-height: 1.65;
}
.lmodal-area strong { color: var(--blue); }
.lmodal-kasse {
background: var(--gray-bg); border: 1px solid var(--border);
border-radius: 14px; padding: 1.2rem 1.3rem; margin: 1rem 0 1.3rem;
}
.lmodal-kasse h3 { font-size: 1rem; font-weight: 700; color: var(--blue); margin-bottom: 0.6rem; }
.lmodal-kasse p { font-size: 0.87rem; color: var(--text-mid); margin-bottom: 0.7rem; }
.lmodal-kasse ul { list-style: none; padding: 0; margin: 0; font-size: 0.87rem; color: #454C4D; line-height: 1.85; }
.lmodal-kasse ul li::before { content: '\2713 \00a0'; color: var(--blue); font-weight: 700; }
.lmodal-kasse .lmodal-kasse-hint {
background: var(--blue-bg); border-radius: 8px; padding: 0.7rem 0.9rem; margin-top: 0.8rem;
font-size: 0.82rem; color: var(--blue); font-weight: 600;
}
.lmodal-kasse .lmodal-kasse-hint small { display: block; color: var(--text-mid); font-weight: 400; margin-top: 0.2rem; }
.lmodal-cta {
display: flex; gap: 0.7rem; flex-wrap: wrap;
padding-top: 0.4rem; margin-bottom: 0.2rem;
}
.lmodal-cta .btn-blue, .lmodal-cta .btn-orange, .lmodal-cta .btn-white {
padding: 0.7rem 1.3rem; font-size: 0.86rem;
}
.lmodal-faq { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.lmodal-faq h3 { font-size: 1rem; font-weight: 700; color: var(--blue); margin-bottom: 0.7rem; }
.lmodal-faq details {
background: var(--gray-bg); border: 1px solid var(--border);
border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.5rem;
}
.lmodal-faq details[open] { background: var(--blue-bg); border-color: var(--blue-light); }
.lmodal-faq summary {
list-style: none; cursor: pointer; font-weight: 700;
font-size: 0.88rem; color: var(--blue);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.lmodal-faq summary::-webkit-details-marker { display: none; }
.lmodal-faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; flex-shrink: 0; }
.lmodal-faq details[open] summary::after { content: '\2013'; }
.lmodal-faq details p { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-mid); line-height: 1.7; }
@media (max-width: 640px) {
.lmodal-overlay { padding: 0; align-items: stretch; }
.lmodal { max-width: 100%; max-height: 100vh; border-radius: 0; }
.lmodal-head { padding: 1.3rem 3.2rem 1.2rem 1.2rem; border-radius: 0; }
.lmodal-head h2 { font-size: 1.2rem; }
.lmodal-body { padding: 1.3rem 1.2rem 1.2rem; }
.lmodal-close { top: 0.8rem; right: 0.8rem; width: 36px; height: 36px; }
.lmodal-cta { flex-direction: column; }
.lmodal-cta .btn-blue, .lmodal-cta .btn-orange, .lmodal-cta .btn-white { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.lmodal-overlay, .lmodal { transition: none; }
.lmodal { transform: none; }
}
@media (max-width: 768px) {
.kpl-card {
grid-column: auto !important;
padding: 1.4rem !important;
gap: 1.1rem !important;
}
.kpl-card .kpl-head { gap: 0.85rem !important; }
.kpl-card .kpl-icon {
width: 44px !important;
height: 44px !important;
}
.kpl-card .kpl-text {
font-size: 0.86rem !important;
line-height: 1.65 !important;
}
.kpl-card .kpl-logos {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.38rem !important;
padding: 0.6rem 1rem !important;
}
.kpl-card .kpl-logo-item,
.kpl-card .kpl-result {
min-width: 0 !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.kpl-card .kpl-logo-item {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 0.45rem !important;
}
.kpl-card .kpl-result {
text-align: center !important;
padding-top: 0.3rem;
}
.kpl-card .kpl-sep {
align-self: center !important;
font-size: 1.35rem !important;
color: var(--blue-light) !important;
line-height: 1;
padding: 0.1rem 0;
}
.kpl-card .kpl-logos img { height: 102px !important; }
.kpl-card .kpl-footer {
flex-direction: column !important;
align-items: stretch !important;
gap: 1rem !important;
}
.kpl-card .kpl-pills {
justify-content: flex-start !important;
gap: 0.45rem !important;
}
.kpl-card .kpl-pill {
font-size: 0.74rem !important;
padding: 0.3rem 0.75rem !important;
}
.kpl-card .kpl-cta-btn {
width: 100% !important;
justify-content: center !important;
padding: 0.85rem 1rem !important;
font-size: 0.9rem !important;
}
}
@media (max-width: 420px) {
.kpl-card { padding: 1.15rem !important; border-radius: 14px !important; }
.kpl-card .kpl-text { font-size: 0.83rem !important; }
.kpl-card .kpl-pill {
font-size: 0.72rem !important;
padding: 0.28rem 0.65rem !important;
}
}
.nav-close { display:none; position:absolute; top:0.75rem; right:0.85rem; background:#236BB4; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; color:#fff; font-size:1.25rem; line-height:1; align-items:center; justify-content:center; z-index:1200; box-shadow:0 3px 10px rgba(35,107,180,0.45); -webkit-tap-highlight-color:rgba(35,107,180,0.2); touch-action:manipulation; transition:background 0.2s,transform 0.15s; }
.nav-close:hover { background:#1b5490; transform:scale(1.08); }
.nav-links.open .nav-close { display:flex !important; }
.nav-links.open ~ .burger, body.menu-open .burger { display:none !important; visibility:hidden !important; }
.burger { -webkit-tap-highlight-color:rgba(35,107,180,0.2); touch-action:manipulation; }
.fpf-wrap { transition: opacity 0.25s ease; }
.fpf-wrap.fpf-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.wf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.wf-card { background:white; border-radius:16px; padding:1.8rem; border:1px solid var(--border); display:flex; gap:1.1rem; align-items:flex-start; }
.wf-icon { flex-shrink:0; width:52px; height:58px; position:relative; }
.wf-card h3 { font-size:0.97rem; font-weight:700; color:var(--blue); margin-bottom:0.4rem; }
.wf-card p { font-size:0.83rem; color:var(--text-mid); line-height:1.6; }
.kpl-card { background:linear-gradient(135deg,var(--blue-bg) 0%,#fff 100%); border-radius:16px; padding:2rem; border:1.5px solid var(--blue-light); display:flex; flex-direction:column; gap:1.4rem; grid-column:1 / -1; }
.kpl-icon { flex-shrink:0; width:62px; height:70px; position:relative; }
.kpl-icon svg:first-child { position:absolute; inset:0; width:100%; height:100%; }
.kpl-icon svg:last-child { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; z-index:2; }
.kpl-head h3 { font-size:0.97rem; font-weight:700; color:var(--blue); margin:0; }
.kpl-text { font-size:0.88rem; color:var(--text-mid); line-height:1.7; margin:0; }
.kpl-logos { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:0.55rem 1rem; background:white; border-radius:12px; border:1px solid var(--border); }
.kpl-result { flex:1; min-width:140px; text-align:center; }
.kpl-footer { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; justify-content:space-between; }
.kpl-pills { display:flex; flex-wrap:wrap; gap:0.5rem; }
.kpl-pill { background:white; border:1px solid var(--border); border-radius:100px; padding:0.25rem 0.8rem; font-size:0.78rem; font-weight:600; color:var(--blue); }
@media (min-width: 901px) {
.wf-grid { display:grid; grid-template-columns:0.95fr 0.725fr 0.725fr; gap:0.75rem 0.8rem; }
.wf-grid .kpl-card { grid-column:1; grid-row:1 / span 4; padding:1.4rem 1.5rem; gap:0.8rem; }
.wf-grid .wf-card { padding:0.8rem 1rem; align-items:center; gap:0.8rem; }
.wf-grid .wf-card:nth-child(7) { grid-column:2 / span 2; }
.wf-icon { width:38px; height:43px; }
.wf-card h3 { font-size:0.84rem; margin-bottom:0.1rem; }
.wf-card p { font-size:0.75rem; line-height:1.45; }
.kpl-card .kpl-logo-item { flex-direction: column; text-align: center; justify-content: center; }
.kpl-icon { width:44px; height:50px; }
.kpl-icon svg:last-child { width:27px; height:27px; }
.kpl-text { font-size:0.81rem; line-height:1.55; }
.kpl-logos { justify-content:center; gap:0.9rem; padding:0.6rem 0.8rem; }
.kpl-logos > div:nth-child(4) { flex-basis:100%; text-align:center; line-height:1; }
.kpl-result { flex-basis:100%; }
.kpl-footer { flex-direction:column; justify-content:center; gap:0.7rem; margin-top:auto; }
.kpl-pills { justify-content:center; }
.kpl-pill { font-size:0.7rem; padding:0.18rem 0.6rem; }
}

/* ===== Nav: Menue mittig zwischen Logo und Buttons (User-Wahl Variante 1, 12.06.2026) ===== */
@media (min-width: 1201px) {
  .nav-links { flex: 1; }
  .nav-links li:nth-of-type(1) { margin-left: auto; }
  .nav-links li:nth-last-child(2) { margin-left: auto; }
}