:root{
    --brand: #3f4f6e; --brand-dark: #2c3a52; --brand-darker: #212c3f; --brand-soft: #6b7b9a;
    --tint: #eef2f8; --tint-2: #f7f9fc; --paper: #ffffff; --ink: #202a3a; --ink-soft: #5c6577;
    --border: #dde3ee; --flash: #f0b23e; --flash-ink: #5a3f0a; --pink: #ff6f91; --mint: #1fae6e;
    --radius: 18px; --shadow: 0 20px 45px -20px rgba(33,44,63,.35); --shadow-sm: 0 8px 20px -10px rgba(33,44,63,.25);
    --danger: #d64545;
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Inter', system-ui, sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
h1,h2,h3,h4{
    font-family:'Bricolage Grotesque', system-ui, sans-serif;
    font-weight:700;
    line-height:1.12;
    margin:0 0 .5em;
    letter-spacing:-0.02em;
    color:var(--brand-darker);
  }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} }
.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--brand);
    background:var(--tint);
    border:1px solid var(--border);
    padding:7px 14px 7px 10px;
    border-radius:999px;
    margin-bottom:18px;
  }
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--pink); flex:none;}
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 26px;
    border-radius:12px;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    border:2px solid transparent;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.97); transition-duration:.08s; }
.btn-primary{ background:var(--flash); color:var(--brand-darker); box-shadow:0 8px 18px -8px rgba(184,140,40,.45);}
.btn-primary:hover{ box-shadow:0 10px 22px -8px rgba(184,140,40,.55);}
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--brand-darker); }
.btn-ghost:hover{ border-color:var(--brand); background:var(--tint);}
/* HEADER */
header{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid rgba(255,255,255,.02);
  }
.header-glass{
    position:absolute; inset:0; z-index:-1;
    background:rgba(18,23,34,.92);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
  }
.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:46px; width:auto; display:block; }
.navlinks{ display:flex; gap:30px; font-weight:600; font-size:1.05rem; color:rgba(255,255,255,.86);}
.navlinks a:hover{ color:#fff; }
.navcta{ display:flex; align-items:center; gap:14px; }
.navcta .btn{ padding:11px 20px; font-size:.92rem; }
.btn-header-cta{
    background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85); box-shadow:none;
    opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
  }
.btn-header-cta:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
header.is-scrolled .btn-header-cta{
    opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  }
#navtoggle{ display:none; }
.burger{ display:none; }
/* FOOTER */
footer{ background:var(--brand-darker); color:#c7d0e0; padding-top:70px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
footer h4{ color:#fff; font-size:.95rem; letter-spacing:.03em; margin-bottom:16px; }
footer .brand{ color:#fff; margin-bottom:14px; }
footer p.claim{ color:#a9b4c8; font-size:.92rem; max-width:32ch; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.92rem; }
footer ul a:hover{ color:#fff; }
.city-list{ font-size:.82rem; line-height:2; color:#8b97ac; }
.city-list a{ margin-right:6px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:.82rem; color:#8b97ac; flex-wrap:wrap; gap:10px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* COOKIE BANNER */
.cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:300;
    max-width:640px; margin:0 auto;
    background:rgba(255,255,255,.82); color:var(--ink);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1.5px solid rgba(255,255,255,.6);
    border-radius:16px; padding:22px 24px;
    box-shadow:0 20px 45px -15px rgba(0,0,0,.25);
  }
@media (prefers-reduced-transparency: reduce){
  .cookie-banner{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:var(--border); }
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0 0 16px; font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.cookie-banner a{ color:var(--brand); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-banner-actions .btn{ flex:1; min-width:130px; justify-content:center; padding:12px 20px; font-size:.9rem; }
@media (max-width:480px){
    .cookie-banner{ left:10px; right:10px; bottom:10px; padding:18px 18px; }
    .cookie-banner-actions .btn{ min-width:0; }
  }
/* REDUCED MOTION: sanftere/keine Bewegung für Nutzer, die das in ihrem Betriebssystem eingestellt haben */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{ transform:none; }
  .btn:active{ transform:none; }
}