/* ============================================================
   VARIABLES & RESET
============================================================ */
:root {
    --primary:        #000080;
    --primary-light:  #0000AA;
    --primary-dark:   #00005A;
    --secondary:      #000066;
    --accent:         #000099;
    --bg:             #FFFFFF;
    --bg-2:           #F8F8F8;
    --bg-3:           #F0F0F0;
    --surface:        rgba(0,0,0,0.03);
    --surface-hover:  rgba(0,0,128,0.06);
    --border:         rgba(0,0,0,0.09);
    --border-hi:      rgba(0,0,0,0.18);
    --text:           #0D0D0D;
    --text-muted:     #555566;
    --text-dim:       #999999;
    --white:          #FFFFFF;
    --grad:           linear-gradient(135deg, #000080, #0000AA);
    --grad-blue:      linear-gradient(135deg, #000080, #000066);
    --shadow-primary: 0 8px 32px rgba(0,0,128,0.25);
    --shadow-card:    0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    --r-sm: 8px;
    --r:    16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --ease: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; line-height:1.2; font-weight:700; }

.grad-text {
    background: linear-gradient(135deg, #000080 0%, #0000C0 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.label-chip {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.72rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--primary); margin-bottom:14px;
}

.section-title { font-size:clamp(1.9rem,3.8vw,2.7rem); color:var(--text); margin-bottom:14px; }
.section-sub   { color:var(--text-muted); font-size:1.05rem; max-width:580px; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 28px; border-radius:var(--r-sm);
    font-weight:600; font-size:0.95rem;
    cursor:pointer; transition:var(--ease); border:none;
    font-family:'Inter',sans-serif;
}
.btn-primary {
    background:var(--grad); color:#fff;
    box-shadow:0 4px 20px rgba(0,0,128,0.25);
    animation:none;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,128,0.38); }

.btn-ghost {
    background:transparent; color:var(--text);
    border:1px solid var(--border-hi);
}
.btn-ghost:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:20px 0; transition:var(--ease);
}
.navbar.scrolled {
    padding:12px 0;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 var(--border);
}
.nav-wrap {
    max-width:1200px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
    display:flex; align-items:center; gap:10px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800; font-size:1.35rem; color:var(--text);
}
.logo-img {
    width:46px; height:46px;
    border-radius:11px;
    object-fit:cover;
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
    flex-shrink:0;
    display:block;
}

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
    padding:8px 15px; border-radius:var(--r-sm);
    color:var(--text-muted); font-size:0.9rem; font-weight:500;
    transition:var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:#000080; background:rgba(0,0,128,0.06); }

.nav-cta {
    display:flex; align-items:center; gap:8px;
    background:var(--grad); color:#fff;
    padding:10px 22px; border-radius:var(--r-sm);
    font-weight:600; font-size:0.88rem;
    box-shadow:0 4px 16px rgba(0,0,128,0.22);
    transition:var(--ease);
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,128,0.32); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--ease); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display:none; flex-direction:column;
    background:rgba(255,255,255,0.98); backdrop-filter:blur(24px);
    border-top:1px solid var(--border); padding:20px 24px;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
    padding:14px 0; color:var(--text-muted);
    font-weight:500; font-size:1.05rem;
    border-bottom:1px solid var(--border); transition:var(--ease);
}
.mobile-nav a:last-of-type { border:none; }
.mobile-nav a:hover { color:#000080; background:rgba(0,0,128,0.05); }
.mobile-nav .m-cta {
    margin-top:16px; background:var(--grad); color:#fff;
    text-align:center; padding:14px; border-radius:var(--r-sm);
    font-weight:600; border:none;
}

/* ============================================================
   PAGE HEADER (für Unterseiten)
============================================================ */
.page-header {
    padding:140px 0 80px;
    text-align:center;
    background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0,0,128,0.05) 0%, transparent 65%);
}
.page-header .label-chip { margin-bottom:16px; }
.page-header h1 { font-size:clamp(2rem,4.5vw,3.2rem); color:var(--text); margin-bottom:18px; }
.page-header p { color:var(--text-muted); font-size:1.05rem; max-width:560px; margin:0 auto; line-height:1.8; }

/* ============================================================
   HERO
============================================================ */
.hero {
    min-height:88vh; display:flex; align-items:center;
    padding:120px 0 80px;
    background: #FFFFFF;
}
.hero-inner {
    max-width:780px; margin:0 auto; padding:0 24px;
    text-align:center;
}
.hero-eyebrow {
    font-size:0.75rem; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; color:#000080;
    margin-bottom:24px;
    animation:fadeUp 0.55s ease both; animation-delay:0.05s;
}

/* Hero-Logo */
.hero-logo {
    width: 96px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,128,0.15);
    animation: fadeUp 0.5s ease both;
    animation-delay: 0s;
}

.hero h1 { font-size:clamp(2.2rem,4.8vw,3.7rem); color:var(--text); margin-bottom:22px; line-height:1.12; animation:fadeUp 0.65s ease both; animation-delay:0.2s; }
.hero p   { color:var(--text-muted); font-size:1.05rem; margin-bottom:28px; line-height:1.85; max-width:520px; margin-left:auto; margin-right:auto; animation:fadeUp 0.6s ease both; animation-delay:0.4s; }
.hero-usp {
    list-style:none; display:flex; flex-direction:column; gap:11px;
    margin:0 auto 38px; max-width:460px; text-align:left;
    animation:fadeUp 0.55s ease both; animation-delay:0.55s;
}
.hero-usp li {
    display:flex; align-items:flex-start; gap:11px;
    font-size:0.9rem; color:var(--text-muted); line-height:1.5;
}
.hero-usp-check {
    width:20px; height:20px; flex-shrink:0; margin-top:1px;
    background:rgba(0,0,128,0.08); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#000080;
}
.hero-usp li strong { color:var(--text); font-weight:600; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:fadeUp 0.55s ease both; animation-delay:0.72s; }
.hero-trust {
    display:flex; align-items:flex-start; justify-content:center;
    gap:0; margin-top:64px; padding-top:48px;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
    animation:fadeIn 0.7s ease both; animation-delay:0.9s;
}
.hero-trust-item {
    padding:0 36px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-trust-item + .hero-trust-item { border-left:1px solid var(--border); }
.hero-trust-icon {
    width:44px; height:44px; border-radius:12px;
    background:#000080;
    display:flex; align-items:center; justify-content:center;
    color:#FFFFFF; flex-shrink:0;
}
.hero-trust-item strong { display:block; font-size:0.88rem; color:var(--text); font-weight:600; margin-bottom:1px; }
.hero-trust-item span  { font-size:0.75rem; color:var(--text-muted); }

/* ============================================================
   TECH BAR
============================================================ */
.tech-bar {
    padding:22px 0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    background:var(--bg-2);
}
.tech-bar .container { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.tech-label { font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.07em; font-weight:600; white-space:nowrap; }
.tech-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.tech-items { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.tech-item { display:flex; align-items:center; gap:7px; color:var(--text-dim); font-size:0.82rem; font-weight:600; }
.tech-item i { color:var(--primary-light); font-size:0.95rem; }

/* ============================================================
   LEISTUNGEN TEASER (Landing Page)
============================================================ */
.services-teaser { padding:100px 0; }

.teaser-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:22px;
}
.teaser-card-large {
    background:#fff; border:1px solid var(--border);
    border-top:3px solid var(--primary);
    border-radius:var(--r-lg); padding:44px 36px;
    transition:var(--ease); position:relative; overflow:hidden;
    box-shadow:var(--shadow-card);
    display:flex; flex-direction:column; gap:16px;
}
.teaser-card-large:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,128,0.1); }
.teaser-icon {
    width:60px; height:60px;
    background:rgba(0,0,128,0.08); border-radius:var(--r);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:#000080;
}
.teaser-card-large h3 { font-size:1.5rem; color:var(--text); }
.teaser-card-large p { color:var(--text-muted); font-size:0.93rem; line-height:1.75; flex:1; }
.teaser-link {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--primary); font-weight:600; font-size:0.9rem;
    transition:var(--ease);
}
.teaser-link:hover { gap:12px; }

.teaser-grid-small {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}
.teaser-card-small {
    background:#fff; border:1px solid var(--border);
    border-radius:var(--r); padding:28px 24px;
    transition:var(--ease);
    box-shadow:var(--shadow-card);
    display:flex; align-items:center; gap:16px;
}
.teaser-card-small:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,128,0.08); border-color:rgba(0,0,128,0.2); }
.teaser-card-small .teaser-icon { width:48px; height:48px; font-size:1.2rem; flex-shrink:0; }
.teaser-card-small h3 { font-size:1rem; color:var(--text); margin-bottom:4px; }
.teaser-card-small p { color:var(--text-muted); font-size:0.83rem; line-height:1.6; }

/* ============================================================
   LEISTUNGEN (volle Service-Kacheln)
============================================================ */
.services { padding:100px 0; }
.sec-head { text-align:center; margin-bottom:58px; }
.sec-head .section-sub { margin:0 auto; }

.srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.srv-card {
    background:#fff; border:1px solid var(--border);
    border-top:2px solid var(--border);
    border-radius:var(--r); padding:32px;
    transition:var(--ease); position:relative; overflow:hidden;
    box-shadow:var(--shadow-card);
}
.srv-card:hover { border-color:rgba(0,0,128,0.22); border-top-color:#000080; box-shadow:0 4px 24px rgba(0,0,128,0.1); transform:translateY(-4px); }
.srv-icon {
    width:50px; height:50px;
    background:rgba(0,0,128,0.08); border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; color:#000080; margin-bottom:20px; position:relative; z-index:1;
}
.srv-card h3 { font-size:1.1rem; color:var(--text); margin-bottom:9px; position:relative; z-index:1; }
.srv-card p  { color:var(--text-muted); font-size:0.875rem; line-height:1.75; position:relative; z-index:1; }

/* ============================================================
   PAKETE
============================================================ */
.packages {
    padding:100px 0;
    background:var(--bg-2);
}

.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pkg-card {
    background:#fff; border:1px solid var(--border);
    border-top:3px solid var(--border);
    border-radius:var(--r-lg); padding:36px 30px;
    position:relative; transition:var(--ease);
    box-shadow:var(--shadow-card);
}
.pkg-card:hover { border-color:rgba(0,0,128,0.2); border-top-color:var(--primary); transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,0.1); }
.pkg-card.featured {
    background:#000080;
    border:1px solid transparent;
    border-top:3px solid #000080;
}
.pkg-card.featured:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,128,0.35); }

.pkg-badge {
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:#FFFFFF; color:#000080;
    padding:4px 18px; border-radius:100px;
    font-size:0.72rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap;
}
.pkg-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.04em; }
.pkg-sub  { font-size:0.76rem; color:var(--primary-light); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-top:4px; margin-bottom:22px; }

.pkg-price { margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--border); }
.pkg-price .price { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.2rem; font-weight:800; color:var(--primary); line-height:1; }
.pkg-price .pnote { font-size:0.8rem; color:var(--text-muted); margin-top:7px; }

.pkg-feats { margin-bottom:30px; }
.pkg-feats li { display:flex; align-items:flex-start; gap:11px; padding:8px 0; font-size:0.875rem; color:var(--text-muted); line-height:1.55; }
.pkg-feats li i { color:var(--primary-light); font-size:0.82rem; margin-top:4px; flex-shrink:0; }

.pkg-btn {
    width:100%; display:block; text-align:center;
    padding:14px; border-radius:var(--r-sm);
    font-weight:600; font-size:0.93rem; transition:var(--ease);
}
.pkg-btn.filled { background:var(--grad); color:#fff; box-shadow:0 8px 24px rgba(0,0,128,0.22); }
.pkg-btn.filled:hover { box-shadow:0 12px 36px rgba(0,0,128,0.35); transform:translateY(-1px); }
.pkg-btn.outline { border:1px solid var(--border-hi); color:var(--text); }
.pkg-btn.outline:hover { border-color:#000080; color:#FFFFFF; background:#000080; }

/* Featured card text overrides */
.pkg-card.featured .pkg-name,
.pkg-card.featured .price { color:#FFFFFF; }
.pkg-card.featured .pkg-sub { color:rgba(255,255,255,0.5); }
.pkg-card.featured .pnote { color:rgba(255,255,255,0.4); }
.pkg-card.featured .pkg-feats li { color:rgba(255,255,255,0.75); }
.pkg-card.featured .pkg-feats li i { color:rgba(255,255,255,0.9); }
.pkg-card.featured .pkg-btn.filled { background:#FFFFFF; color:#000080; box-shadow:none; }
.pkg-card.featured .pkg-btn.filled:hover { background:#F0F0F8; }

/* ============================================================
   WARUM RP
============================================================ */
.why { padding:100px 0; }
.why-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.why-content .section-sub { margin-bottom:38px; }
.feat-list { display:flex; flex-direction:column; gap:22px; }
.feat { display:flex; gap:15px; align-items:flex-start; }
.feat-icon {
    width:44px; height:44px; flex-shrink:0;
    background:rgba(0,0,128,0.08); border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    color:#000080; font-size:1.05rem;
    transition:var(--ease);
}
.feat:hover .feat-icon { background:#000080; color:#FFFFFF; transform:scale(1.1); }
.feat-txt h4 { font-size:0.98rem; color:var(--text); margin-bottom:4px; }
.feat-txt p  { font-size:0.855rem; color:var(--text-muted); line-height:1.7; }

.stats-box {
    background:#000080; border:1px solid transparent;
    border-radius:var(--r); padding:28px;
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    position:relative;
}
.stat-tile {
    text-align:center; padding:24px 14px;
    background:rgba(255,255,255,0.1); border-radius:var(--r-sm);
    border:1px solid rgba(255,255,255,0.12);
}
.st-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.3rem; font-weight:800; color:#FFFFFF; line-height:1; }
.st-lbl { font-size:0.78rem; color:rgba(255,255,255,0.6); margin-top:5px; }

/* ============================================================
   ÜBER UNS
============================================================ */
.about { padding:100px 0; background:var(--bg-2); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.about-img-wrap { position:relative; max-width:340px; }
.about-img {
    border-radius:var(--r-lg); overflow:hidden;
    aspect-ratio:4/5; box-shadow:var(--shadow-card);
}
.about-img img { width:100%; height:100%; object-fit:cover; }

.about-content .section-title { margin-bottom:18px; }
.about-content p { color:var(--text-muted); font-size:0.94rem; margin-bottom:14px; line-height:1.85; }

.about-sig {
    display:flex; align-items:center; gap:15px; margin-top:30px;
    padding:18px 20px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--r);
}
.sig-avatar {
    width:50px; height:50px; flex-shrink:0;
    background:#000080; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
    font-size:1.05rem; color:#fff;
}
.sig-text strong { display:block; font-size:0.93rem; color:var(--text); }
.sig-text span   { font-size:0.8rem; color:var(--text-muted); }

/* ============================================================
   KONTAKT
============================================================ */
.contact { padding:100px 0; }
.contact-head { text-align:center; margin-bottom:60px; }
.contact-head .section-sub { margin:0 auto; }
.contact-inner { display:grid; grid-template-columns:1fr 1.45fr; gap:56px; align-items:start; }

.c-details { display:flex; flex-direction:column; gap:18px; margin-bottom:36px; }
.c-item { display:flex; align-items:flex-start; gap:15px; }
.c-icon {
    width:44px; height:44px; flex-shrink:0;
    background:rgba(0,0,128,0.08); border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    color:#000080; font-size:1rem;
}
.c-txt strong { display:block; font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.c-txt a, .c-txt p { color:var(--text); font-size:0.93rem; font-weight:500; }
.c-txt a:hover { color:var(--primary-light); }

.socials { display:flex; gap:10px; }
.soc-btn {
    width:42px; height:42px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); transition:var(--ease); font-size:0.95rem;
}
.soc-btn:hover { background:#000080; border-color:#000080; color:#FFFFFF; }

.c-form {
    background:#fff; border:1px solid var(--border);
    border-radius:var(--r-lg); padding:40px;
    box-shadow:var(--shadow-card);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grp { margin-bottom:18px; }
.form-grp label { display:block; font-size:0.82rem; font-weight:500; color:var(--text-muted); margin-bottom:7px; }
.form-grp input,
.form-grp select,
.form-grp textarea {
    width:100%; background:#fff;
    border:1px solid var(--border); border-radius:var(--r-sm);
    padding:12px 15px; color:var(--text); font-size:0.88rem;
    font-family:'Inter',sans-serif; transition:var(--ease); outline:none;
}
.form-grp input::placeholder, .form-grp textarea::placeholder { color:var(--text-dim); }
.form-grp input:focus, .form-grp select:focus, .form-grp textarea:focus {
    border-color:rgba(0,0,128,0.4);
    box-shadow:0 0 0 3px rgba(0,0,128,0.08);
    background:#fff;
}
.form-grp select option { background:#fff; color:var(--text); }
.form-grp textarea { resize:vertical; min-height:116px; }
.form-submit {
    width:100%; padding:16px;
    background:var(--grad); color:#fff; border:none;
    border-radius:var(--r-sm); font-size:0.97rem; font-weight:600;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:var(--ease); box-shadow:0 8px 24px rgba(0,0,128,0.22);
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.form-submit:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,128,0.35); }
.form-ok {
    display:none; text-align:center; padding:18px;
    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.22);
    border-radius:var(--r-sm); color:#22C55E; font-weight:500; margin-top:14px;
}
.form-error-msg {
    display:none; text-align:center; padding:18px;
    background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.22);
    border-radius:var(--r-sm); color:#EF4444; font-weight:500; margin-top:14px;
    font-size:0.875rem;
}
.form-submit.loading {
    opacity:0.7; pointer-events:none;
}
.form-submit .spinner {
    display:none; width:18px; height:18px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff; border-radius:50%;
    animation:spin 0.7s linear infinite;
}
.form-submit.loading .spinner { display:block; }
.form-submit.loading .btn-icon { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-err { border-color:rgba(239,68,68,0.5) !important; box-shadow:0 0 0 3px rgba(239,68,68,0.1) !important; }

/* ============================================================
   CTA SECTION
============================================================ */
.cta-section {
    padding:80px 0;
    background:var(--bg-2);
    text-align:center;
}
.cta-section h2 { font-size:clamp(1.7rem,3.5vw,2.4rem); color:var(--text); margin-bottom:14px; }
.cta-section p { color:var(--text-muted); font-size:1rem; max-width:520px; margin:0 auto 32px; line-height:1.8; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* Scroll-Reveal */
.reveal {
    opacity:0; transform:translateY(28px);
    transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),
                transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }
.reveal-delay-5 { transition-delay:0.5s; }

/* ============================================================
   FOOTER
============================================================ */
footer {
    background:#111118;
    border-top:none;
    padding:64px 0 32px;
}
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.foot-brand p { color:#8888A8; font-size:0.86rem; margin:14px 0 22px; line-height:1.75; max-width:270px; }
.foot-col h5 { font-size:0.78rem; font-weight:700; color:#FFFFFF; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:14px; }
.foot-col li { margin-bottom:9px; }
.foot-col li a { color:#8888A8; font-size:0.85rem; transition:var(--ease); }
.foot-col li a:hover { color:#FFFFFF; }
.foot-bottom {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:22px; border-top:1px solid rgba(255,255,255,0.07);
}
.foot-bottom p { color:#44445A; font-size:0.8rem; }
.foot-legal { display:flex; gap:22px; }
.foot-legal a { color:#44445A; font-size:0.8rem; transition:var(--ease); }
.foot-legal a:hover { color:#8888A8; }
.foot-brand .nav-logo { color:#FFFFFF !important; }
.foot-brand .logo-img { filter:brightness(0) invert(1); box-shadow:none; width:80px; height:80px; border-radius:16px; }

/* ============================================================
   COOKIE BANNER
============================================================ */
.cookie-banner {
    position:fixed; bottom:0; left:0; right:0; z-index:9999;
    background:#0D0D0D;
    border-top:1px solid rgba(255,255,255,0.1);
    box-shadow:0 -8px 40px rgba(0,0,0,0.5);
    padding:20px 24px;
    display:none;
    transition:opacity 0.4s ease, transform 0.4s ease;
}
.cookie-banner.visible { display:block; }
.cookie-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center;
    gap:24px; flex-wrap:wrap;
}
.cookie-text { flex:1; min-width:260px; }
.cookie-text strong {
    display:block; font-size:1rem;
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
    color:#FFFFFF; margin-bottom:6px;
}
.cookie-text p { font-size:0.82rem; color:rgba(255,255,255,0.55); line-height:1.6; }
.cookie-text a { color:rgba(255,255,255,0.8); text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.cb-btn {
    padding:11px 22px; border-radius:var(--r-sm);
    font-size:0.88rem; font-weight:600;
    cursor:pointer; border:none; font-family:inherit;
    transition:var(--ease); white-space:nowrap;
}
.cb-settings {
    background:transparent; color:rgba(255,255,255,0.65);
    border:1px solid rgba(255,255,255,0.2);
}
.cb-settings:hover { color:#FFFFFF; border-color:rgba(255,255,255,0.5); background:transparent; }
.cb-necessary {
    background:rgba(255,255,255,0.1); color:#FFFFFF;
    border:1px solid rgba(255,255,255,0.18);
}
.cb-necessary:hover { background:rgba(255,255,255,0.18); color:#FFFFFF; }
.cb-all {
    background:var(--grad); color:#fff;
    box-shadow:0 4px 16px rgba(0,0,128,0.35);
}
.cb-all:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,128,0.5); }

/* Cookie-Einstellungen Modal */
.cookie-modal-overlay {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; padding:20px;
}
.cookie-modal-overlay.visible { display:flex; }
.cookie-modal {
    background:#FFFFFF; border:1px solid rgba(0,0,0,0.12);
    border-radius:var(--r-lg); padding:36px;
    max-width:540px; width:100%; max-height:80vh; overflow-y:auto;
    box-shadow:0 24px 80px rgba(0,0,0,0.6);
}
.cookie-modal h3 {
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
    font-size:1.3rem; color:#0D0D0D; margin-bottom:8px;
}
.cookie-modal > p { font-size:0.875rem; color:#555566; margin-bottom:24px; line-height:1.65; }
.cookie-cat {
    background:#F8F8F8; border:1px solid rgba(0,0,0,0.08);
    border-radius:var(--r); padding:18px 20px; margin-bottom:12px;
}
.cookie-cat-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px;
}
.cookie-cat-head strong { font-size:0.92rem; color:#0D0D0D; }
.cookie-toggle {
    position:relative; width:42px; height:24px; flex-shrink:0;
}
.cookie-toggle input { opacity:0; width:0; height:0; }
.cookie-toggle .slider {
    position:absolute; inset:0; background:var(--border-hi);
    border-radius:24px; cursor:pointer; transition:0.3s;
}
.cookie-toggle .slider::before {
    content:''; position:absolute;
    width:18px; height:18px; left:3px; top:3px;
    background:white; border-radius:50%; transition:0.3s;
}
.cookie-toggle input:checked + .slider { background:#000080; }
.cookie-toggle input:checked + .slider::before { transform:translateX(18px); }
.cookie-toggle input:disabled + .slider { opacity:0.6; cursor:not-allowed; }
.cookie-cat p { font-size:0.8rem; color:#666666; line-height:1.55; }
.cookie-modal-actions {
    display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;
}
.cookie-modal-actions .cb-btn { flex:1; text-align:center; }

/* ── WhatsApp Float Button ── */
.wa-float {
    position:fixed; bottom:28px; right:28px; z-index:999;
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
}
.wa-float-label {
    background:#fff; color:#111; font-size:0.82rem; font-weight:600;
    padding:7px 14px; border-radius:20px;
    box-shadow:0 4px 16px rgba(0,0,0,0.12);
    white-space:nowrap; opacity:0; transform:translateX(8px);
    transition:opacity 0.25s ease, transform 0.25s ease;
    pointer-events:none;
}
.wa-float:hover .wa-float-label { opacity:1; transform:translateX(0); }
.wa-float-btn {
    width:56px; height:56px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.55rem;
    box-shadow:0 4px 20px rgba(37,211,102,0.45);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink:0;
    animation:wa-pulse 2.5s ease infinite;
}
.wa-float:hover .wa-float-btn { transform:scale(1.08); box-shadow:0 8px 28px rgba(37,211,102,0.6); }
@keyframes wa-pulse {
    0%,100% { box-shadow:0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.35); }
    50%      { box-shadow:0 4px 20px rgba(37,211,102,0.45), 0 0 0 10px rgba(37,211,102,0); }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px) {
    .srv-grid { grid-template-columns:repeat(2,1fr); }
    .pkg-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .pkg-card.featured { transform:scale(1); }
    .why-inner   { grid-template-columns:1fr; gap:48px; }
    .about-inner { grid-template-columns:1fr; }
    .about-img-wrap { max-width:400px; margin:0 auto; }
    .contact-inner { grid-template-columns:1fr; }
    .foot-grid { grid-template-columns:1fr 1fr; }
    .teaser-grid { grid-template-columns:1fr; }
    .teaser-grid-small { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
    .nav-links,.nav-cta { display:none; }
    .hamburger { display:flex; }

    /* Hero */
    .hero { padding:90px 0 52px; min-height:auto; }
    .hero-eyebrow { font-size:0.65rem; margin-bottom:16px; }
    .hero h1 { font-size:clamp(1.7rem,7.5vw,2.4rem); margin-bottom:16px; }
    .hero p  { font-size:0.92rem; margin-bottom:20px; line-height:1.75; }
    .hero-usp { gap:8px; margin-bottom:28px; }
    .hero-usp li { font-size:0.82rem; gap:9px; }
    .hero-usp-check { width:18px; height:18px; }
    .hero-btns { gap:10px; }
    .hero-btns .btn { padding:12px 20px; font-size:0.88rem; }
    .hero-trust { margin-top:44px; padding-top:36px; }
    .hero-trust-item { padding:0 20px; }
    .hero-trust-item + .hero-trust-item { border-left:none; border-top:1px solid var(--border); padding-top:14px; width:100%; }
    .hero-trust-icon { width:36px; height:36px; }
    .hero-trust-item strong { font-size:0.82rem; }
    .hero-trust-item span  { font-size:0.7rem; }

    /* Page Header */
    .page-header { padding:100px 0 56px; }
    .page-header h1 { font-size:clamp(1.7rem,7.5vw,2.4rem); }

    /* Sections */
    .services, .services-teaser, .packages, .why, .about, .contact, .cta-section { padding:60px 0; }
    .sec-head { margin-bottom:36px; }
    .section-title { font-size:clamp(1.5rem,5vw,2rem); }
    .section-sub { font-size:0.9rem; }

    /* Cards */
    .srv-grid { grid-template-columns:1fr; gap:14px; }
    .srv-card { padding:22px; }
    .srv-icon { width:42px; height:42px; font-size:1.05rem; margin-bottom:14px; }
    .pkg-grid { gap:14px; }
    .pkg-card { padding:28px 22px; }

    /* Teaser */
    .teaser-card-large { padding:28px 22px; }
    .teaser-grid-small { grid-template-columns:1fr; }

    /* Why */
    .why-inner { gap:36px; }
    .feat-list { gap:16px; }
    .feat-icon { width:38px; height:38px; font-size:0.9rem; }
    .stats-box { padding:20px; gap:14px; }
    .stat-tile { padding:18px 10px; }
    .st-num { font-size:1.8rem; }

    /* About */
    .about-img-wrap { max-width:300px; }
    .about-sig { padding:14px 16px; }

    /* Contact */
    .form-row { grid-template-columns:1fr; }
    .c-form { padding:24px; }

    /* Footer */
    .foot-grid { grid-template-columns:1fr; gap:32px; }
    .foot-bottom { flex-direction:column; gap:12px; text-align:center; }
    footer { padding:44px 0 24px; }
}

@media (max-width:600px) {
    .cookie-inner { flex-direction:column; align-items:flex-start; }
    .cookie-actions { width:100%; }
    .cb-btn { flex:1; text-align:center; }
    .wa-float { bottom:20px; right:16px; }
    .wa-float-label { display:none; }
}

@media (max-width:480px) {
    .hero h1 { font-size:1.65rem; }
    .hero-trust-item { padding:0 12px; }
    .container { padding:0 18px; }
    .srv-card, .pkg-card { padding:20px; }
    .c-form { padding:20px; }
}