:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

  :root{
    --bg:#DCEBF5;
    --bg-alt:#CBE0F0;
    --surface:#FFFFFF;
    --ink:#111315;
    --ink-muted:#45535F;
    --accent:#1E5A82;
    --accent-deep:#163F5C;
    --accent-ink:#FFFFFF;
    --accent-soft:#D3E7F4;
    --line:#B9D4E6;
    --night:#C9DFF0;
    --night-ink:#111315;
    --shadow: 0 1px 2px rgba(17,26,34,.08), 0 8px 24px -12px rgba(17,26,34,.18);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0D1B24;
      --bg-alt:#132635;
      --surface:#16303F;
      --ink:#E7F0F6;
      --ink-muted:#9FB4C2;
      --accent:#6FB2DC;
      --accent-deep:#8FC5E6;
      --accent-ink:#0D1B24;
      --accent-soft:#1C3A4C;
      --line:#254358;
      --night:#1C3A4C;
      --night-ink:#E7F0F6;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1B24;
    --bg-alt:#132635;
    --surface:#16303F;
    --ink:#E7F0F6;
    --ink-muted:#9FB4C2;
    --accent:#6FB2DC;
    --accent-deep:#8FC5E6;
    --accent-ink:#0D1B24;
    --accent-soft:#1C3A4C;
    --line:#254358;
    --night:#1C3A4C;
    --night-ink:#E7F0F6;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  html{scroll-padding-top:98px;}
  body{
    margin:0;
    padding-top:86px;
    background:var(--bg);
    color:var(--ink);
    font-family:'Karla', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  img{max-width:100%;}
  [hidden]{display:none!important;}
  h1,h2,h3{
    font-family:'Oswald', ui-sans-serif, system-ui, sans-serif;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
    letter-spacing:.01em;
  }
  a{color:inherit;}
  button{font-family:inherit;}
  .wrap{
    max-width:1320px;
    margin:0 auto;
    padding-inline:28px;
  }
  .eyebrow{
    font-family:'Oswald', sans-serif;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }

  /* ---------- Header ---------- */
  header.site{
    position:fixed;
    top:0; left:0; right:0;
    padding-top:env(safe-area-inset-top,0px);
    z-index:50;
    background:var(--night);
    border-bottom:1px solid var(--line);
  }
  header.site::after{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:0 8px 20px -12px rgba(17,26,34,.35);
    opacity:0;
    transition:opacity 200ms var(--ease-out);
    pointer-events:none;
  }
  header.site.is-scrolled::after{opacity:1;}
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-block:14px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--night-ink);
    text-decoration:none;
  }
  .brand-logo{
    display:block;
    height:clamp(48px, 3.6vw, 74px);
    width:clamp(48px, 3.6vw, 74px);
    flex:none;
    border-radius:50%;
  }
  .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.22;
  }
  .brand-text .name{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:clamp(1rem, 1.6vw, 1.32rem);
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .brand-text .sub{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:clamp(.74rem, 1vw, .92rem);
    letter-spacing:.14em;
    color:var(--accent);
    white-space:nowrap;
  }
  @media (max-width:480px){
    body{padding-top:76px;}
    html{scroll-padding-top:88px;}
  }
  .call-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--accent);
    color:var(--accent-ink);
    font-family:'Oswald', sans-serif;
    font-weight:600;
    letter-spacing:.03em;
    text-decoration:none;
    padding:9px 16px;
    border:none;
    border-radius:999px;
    font-size:.88rem;
    white-space:nowrap;
    box-shadow:var(--shadow);
    transition:transform 160ms var(--ease-out);
  }
  .call-btn:active{transform:scale(.97);}
  .call-btn:focus-visible{outline:2px solid var(--accent-deep); outline-offset:2px;}
  .call-btn svg{flex:none;}
  .call-btn.ghost{
    background:transparent;
    color:var(--ink);
    border:1.5px solid rgba(17,19,21,.3);
    box-shadow:none;
  }
  @media (max-width:640px){
    .header-row .call-btn.solid-desktop{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--night);
    color:var(--night-ink);
    border-bottom:1px solid var(--line);
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:32px;
    align-items:center;
    padding-block:36px;
  }
  @media (max-width:780px){ .hero .wrap{grid-template-columns:1fr;} }
  .hero h1{
    font-size:clamp(1.65rem, 4vw, 3rem);
    font-weight:700;
    text-transform:uppercase;
    line-height:1.4;
    max-width:16ch;
  }
  .hero p.lede{
    max-width:50ch;
    font-size:clamp(1rem, 1.3vw, 1.15rem);
    color:var(--ink-muted);
    margin:10px 0 0;
  }
  .hero-ctas{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px;
  }
  .hero-ctas .call-btn{
    font-size:.98rem;
    padding:13px 22px;
  }
  .badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    margin-top:14px;
  }
  .badge-row span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.84rem;
    color:var(--ink-muted);
  }
  .badge-row svg{flex:none;color:var(--accent-deep);}
  .media-frame{
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 14px 32px -16px rgba(17,26,34,.35);
    aspect-ratio:4/3;
  }
  .media-frame img{width:100%; height:100%; object-fit:cover; display:block;}

  /* ---------- Section shells ---------- */
  section{padding-block:40px;}
  @media (min-width:1000px){
    section{padding-block:64px;}
    .hero .wrap{padding-block:52px;}
  }
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
  }
  .section-head h2{
    font-size:clamp(1.5rem, 3.6vw, 2.3rem);
    text-transform:uppercase;
    font-weight:700;
  }
  .alt{background:var(--bg-alt);}

  /* ---------- Price tabs ---------- */
  .price-tabs{
    display:flex;
    gap:4px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    position:relative;
  }
  .tab-highlight{
    position:absolute;
    top:4px; left:0;
    height:calc(100% - 8px);
    border-radius:999px;
    background:var(--accent);
    transition:transform 250ms var(--ease-out), width 250ms var(--ease-out);
    will-change:transform;
    z-index:0;
  }
  .price-tab{
    position:relative;
    z-index:1;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:.82rem;
    padding:8px 16px;
    border-radius:999px;
    border:none;
    background:transparent;
    color:var(--ink-muted);
    cursor:pointer;
    transition:color 150ms var(--ease-out), transform 160ms var(--ease-out);
  }
  .price-tab[aria-pressed="true"]{
    color:var(--accent-ink);
  }
  .price-tab:active{transform:scale(.97);}
  .price-tab:focus-visible{outline:2px solid var(--accent-deep); outline-offset:2px;}

  .price-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:20px;
  }
  @media (max-width:780px){ .price-grid{grid-template-columns:1fr;} }
  .price-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 22px;
    border-bottom:1px solid var(--bg-alt);
  }
  .price-row:last-child{border-bottom:none;}
  .price-row .time{font-size:.95rem;}
  .price-row .amount{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:1.03rem;
    color:var(--accent-deep);
    white-space:nowrap;
  }
  .price-row.fixed{background:var(--bg-alt);}
  .price-row.fixed .time{color:var(--ink-muted); font-size:.9rem;}
  .price-row.fixed .amount{font-size:.96rem;}

  .side-cards{display:flex; flex-direction:column; gap:14px;}
  .anfahrt-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 20px;
    display:flex; flex-direction:column; gap:6px;
  }
  .anfahrt-card .head{font-family:'Oswald',sans-serif; font-weight:600; font-size:.9rem; text-transform:uppercase; margin-bottom:4px;}
  .anfahrt-card .row{display:flex; justify-content:space-between; font-size:.86rem; padding-block:4px; border-top:1px solid var(--bg-alt);}
  .anfahrt-card .row:first-of-type{border-top:none;}
  .rabatt-card{
    background:var(--accent);
    color:var(--accent-ink);
    border-radius:14px;
    padding:18px 20px;
    display:flex; flex-direction:column; gap:6px;
  }
  .rabatt-card .head{font-family:'Oswald',sans-serif; font-weight:700; font-size:1.25rem;}
  .rabatt-card p{margin:0; font-size:.84rem; opacity:.92;}

  .trust-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:20px;
  }
  @media (max-width:780px){ .trust-row{grid-template-columns:1fr;} }
  .trust-row .item{
    display:flex; align-items:center; gap:10px;
    background:var(--accent);
    border:1px solid var(--accent-deep);
    border-radius:12px;
    padding:14px 16px;
  }
  .trust-row .item svg{flex:none; color:var(--accent-ink);}
  .trust-row .item strong{font-size:.86rem; font-weight:600; color:var(--accent-ink);}

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:center;
  }
  @media (max-width:780px){ .about-grid{grid-template-columns:1fr;} }
  .about-grid p{color:var(--ink-muted); font-size:.94rem; line-height:1.55; max-width:48ch; margin:0;}

  /* ---------- Contact / footer ---------- */
  .contact{
    background:var(--ink);
    color:var(--night-ink);
  }
  :root[data-theme="dark"] .contact, :root:not([data-theme="light"]) .contact{ color:var(--bg); }
  .contact-inner{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  }
  .contact-inner h2{font-size:1.3rem; text-transform:uppercase; font-weight:700; color:#F4F3F1;}
  .contact-inner .sub{color:#9FB4C2; font-size:.9rem;}
  .contact-inner .call-btn{font-size:1rem; padding:13px 24px;}
  .contact-ctas{display:flex; flex-wrap:wrap; gap:12px;}
  .whatsapp-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    color:#F4F3F1;
    font-family:'Oswald', sans-serif;
    font-weight:600;
    letter-spacing:.03em;
    text-decoration:none;
    padding:9px 16px;
    border:1.5px solid rgba(244,243,241,.35);
    border-radius:999px;
    font-size:.88rem;
    white-space:nowrap;
    transition:transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
  }
  .whatsapp-btn:hover{border-color:rgba(244,243,241,.6);}
  .whatsapp-btn:active{transform:scale(.97);}
  .whatsapp-btn:focus-visible{outline:2px solid var(--accent-deep); outline-offset:2px;}
  .whatsapp-btn svg{flex:none;}
  .contact-inner .whatsapp-btn{font-size:1rem; padding:13px 24px;}

  footer{
    background:var(--night);
    border-top:1px solid var(--line);
    padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));
    color:var(--ink-muted);
    font-size:.82rem;
  }
  footer .wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    justify-content:space-between;
    align-items:center;
  }

  /* ---------- Mobile sticky call bar ---------- */
  .sticky-call{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    display:none;
    background:var(--accent);
    color:var(--accent-ink);
    text-align:center;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
    font-family:'Oswald',sans-serif;
    font-weight:600;
    text-decoration:none;
    letter-spacing:.03em;
    box-shadow:0 -6px 18px rgba(0,0,0,.18);
  }
  @media (max-width:640px){
    .sticky-call{display:flex; align-items:center; justify-content:center; gap:8px;}
    body{padding-bottom:64px;}
  }

  /* ---------- Entrance motion ---------- */
  .hero .eyebrow, .hero h1, .hero p.lede, .hero-ctas, .hero .badge-row, .hero .media-frame{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  }
  .hero.is-ready .eyebrow{transition-delay:0ms;}
  .hero.is-ready h1{transition-delay:40ms;}
  .hero.is-ready p.lede{transition-delay:90ms;}
  .hero.is-ready .hero-ctas{transition-delay:140ms;}
  .hero.is-ready .badge-row{transition-delay:190ms;}
  .hero.is-ready .media-frame{transition-delay:110ms;}
  .hero.is-ready .eyebrow, .hero.is-ready h1, .hero.is-ready p.lede,
  .hero.is-ready .hero-ctas, .hero.is-ready .badge-row, .hero.is-ready .media-frame{
    opacity:1;
    transform:translateY(0);
  }

  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  }
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .trust-row .reveal:nth-child(1){transition-delay:0ms;}
  .trust-row .reveal:nth-child(2){transition-delay:60ms;}
  .trust-row .reveal:nth-child(3){transition-delay:120ms;}

  @media (prefers-reduced-motion: reduce){
    .hero .eyebrow, .hero h1, .hero p.lede, .hero-ctas, .hero .badge-row, .hero .media-frame,
    .reveal{
      transform:none;
      transition:opacity 200ms linear;
    }
    .tab-highlight{transition:none;}
  }