:root{
    /* CI-Farben aus dem Logo (CI-nah) */
    --bg:#022B74;                 /* sehr dunkler Hintergrund */
    --card:#0351A8;               /* Navy für Karten */
    --text:#F3F7F8;               /* Off-White */
    --muted:#8DA9C4;              /* Stahlblau */

    --brand:#0351A8;              /* Markenblau */
    --brand-dark:#022B74;         /* Dunkelblau */
    --brand-accent:#0474CA;       /* Akzentblau */
    --brand-glow:#02A8F3;         /* Highlight/Glow */

    --ok:#36d399;

    --border:rgba(141,169,196,.22);
    --shadow: 0 12px 30px rgba(0,0,0,.45);
    --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
    color:var(--text);
    background-image:
            linear-gradient(to bottom, #96afc5, #022B74)
}
a{
    color:inherit
}

.container{
    width:min(1100px, 92vw);
    margin:0 auto;
}

header{
    position:sticky; top:0; z-index:20;
    backdrop-filter: blur(10px);
    background: rgba(17, 26, 40, 0.72);
    border-bottom:1px solid var(--border);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:14px;
    position:relative;
    width: 100%;
}

/* Mobile-Menü Button */
.nav-toggle{
    display:none;
    border:1px solid var(--border);
    background: rgba(255,255,255,.02);
    color:var(--text);
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
    line-height:1;
    font-size:20px;
}
.nav-toggle:hover{background: rgba(255,255,255,.04)}

.brand{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: 302px;
    margin-left: 50px;
}
.brand img{
    width: 20rem;
    height: auto;
    object-fit: contain;
}
.brand-text b{
    display:block;
    font-size:27px;
    letter-spacing:.2px
}

.brand-text span{
    display:block;
    font-size:18px;
    color:var(--muted)
}

nav {
    position: absolute;
    left: 36rem;
}

nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
}

nav ul li {
    font-size:2rem;
}

nav a {
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--muted);
    border: 1px solid transparent;
}

.header_button_right {
    right: 1rem;
    position: fixed;
}

nav a:hover{
    color:var(--text);
    border-color:var(--border);
    background:rgba(255,255,255,.04)
}

.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
    background: rgba(255,255,255,.02);
}
.btn:hover{background: rgba(255,255,255,.04)}
.btn-primary{
    border:none;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-glow));
    color:#061026;
    box-shadow: 0 16px 30px rgba(4,116,202,.28);
}
.btn-primary:hover{filter:brightness(1.05)}

.hero{padding:54px 0 28px}
.hero-grid{
    display: block;
    position: relative;
    width: 90vw;
}

.card{
    background: rgba(11,22,48,.78);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero-card{padding:28px}

h1{
    margin:0 0 12px;
    font-size: clamp(30px, 4vw, 44px);
    line-height:1.08;
    letter-spacing:-.5px;
}
.subline{color:var(--muted); font-size: clamp(15px, 1.8vw, 18px); line-height:1.55; margin:0 0 18px}
.subline b{color:var(--text)}

.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0}
.pill{
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    color:var(--muted);
}

.trust-card{
    padding:22px;
    margin-bottom: 1rem;
    width: 90vw;
    left: 5vw;
    position: relative;
}
.trust-card h2{margin:0 0 10px; font-size:18px}
.trust-list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.trust-list li{
    display:flex; gap:10px; align-items:flex-start;
    color:var(--muted);
    padding:10px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.02);
}
.check-list {margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px}
.check{
    width:18px; height:18px; border-radius:6px;
    background: rgba(54,211,153,.18);
    border:1px solid rgba(54,211,153,.45);
    flex:0 0 auto;
    position:relative;
    margin-top:2px;
}
.check:after{
    content:"";
    position:absolute; left:5px; top:4px;
    width:6px; height:3px;
    border-left:2px solid var(--ok);
    border-bottom:2px solid var(--ok);
    transform: rotate(-45deg);
}

section{padding:28px 0}
.section-title{font-size:22px; margin:0 0 8px; letter-spacing:-.2px}
.section-lead{margin:0 0 18px; color:var(--muted); line-height:1.6}

.grid-3{
    display:grid; gap:14px;
    grid-template-columns: repeat(3, 1fr);
}
.feature{padding:16px}
.feature h3{margin:0 0 8px; font-size:16px}
.feature p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}

.prices {
    padding:18px;
    display:grid;
    gap:14px;
    grid-template-columns: repeat(2, 1fr);
    position:relative;
    padding-top: 70px;
}

.offers{
    padding:18px;
    display:grid;
    gap:14px;
    grid-template-columns: repeat(2, 1fr);
    position:relative;
    padding-top: 50px;
}
#offer1 {
    padding-bottom: 60px;
}
#offer2 {
    padding-bottom: 50px;
    padding-top: 50px;
    margin-top: 20px;
}
#offer2 .offers_head {
    margin-top: 15px;
}
#offer2 .offer {
    width: 202%;
}
#offer2 .offers_footer {
    position: absolute;
    inset: 194px 18px auto 18px;
    margin: 0;
    font-size: 14px;
}
.offers_head {
    position:absolute;
    inset: 0px 18px auto 18px;
    margin:0;
}
.offers_footer {
    position:absolute;
    inset: 363px 18px auto 18px;
    margin:0;
    font-size: 14px;
}
.offer{
    padding:16px;
    border-radius:16px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.02);
}
.offer b{display:block; margin-bottom:6px}
.offer .small{color:var(--muted)}
.offer ul{margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.6; font-size:14px}

#plus_icon {
    position: relative;
    width: 1.3rem;
    height: auto;
    top: 0.27rem;
}

.contact-wrap{
    display:grid; gap:16px;
    grid-template-columns: 1fr 1fr;
    align-items:start;
}
form{padding:18px}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 6px}
input, textarea{
    width:100%;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(0,0,0,.18);
    color:var(--text);
    padding:12px 12px;
    outline:none;
    font-size:16px;
}
input:focus, textarea:focus{border-color: rgba(2,168,243,.55)}
textarea{min-height:120px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-note{color:var(--muted); font-size:12px; line-height:1.5; margin:10px 0 0}
.form-actions{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap}

.action-button{
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}

.error{color:#ffb4b4; font-size:13px; margin-top:10px; display:none}
.ok{color:#a8ffde; font-size:13px; margin-top:10px; display:none}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

footer{
    margin-top:28px;
    padding:22px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
}
.footer-inner{
    display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text); text-decoration:underline}
.small{font-size:12px}

@media (max-width: 900px){
    .hero-grid{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr}
    .offers{grid-template-columns:1fr}
    .contact-wrap{grid-template-columns:1fr}
    .header-inner{flex-wrap:wrap}
    .brand{min-width:0}

    /* Burger-Menü aktivieren */
    .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
    .site-nav{width:100%}
    nav ul{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:10px 0 2px;
    }
    nav ul.is-open{display:flex}
    nav a{padding:12px 12px}

    .offers{padding-top:18px}
    .offers_head{position:static; inset:auto; margin:0 0 10px}
}

@media (max-width: 520px){
    body {max-width: 520px}
    .brand-text b{font-size:13px}
    .brand-text span{font-size:11px}
    .brand img{
        width: 17.7rem;
        height: auto;
        position: relative;
        left: -2rem;
    }
}