@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #1e2124; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff; -webkit-font-smoothing: antialiased; }
a { color: #21c1fc; text-decoration: none; }
a:hover { color: #8be2ff; }
section[id] { scroll-margin-top: 90px; }

.nav-link { color: #e8eaed; font-size: 15px; }
.nav-link:hover { color: #21c1fc; }

.btn-line { display: inline-block; background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; padding: 17px 38px; cursor: pointer; font-family: inherit; }
.btn-line:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.foot-link { display: block; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #b8bdc2; font-size: 15px; }
a.foot-link:hover { color: #21c1fc; }
.foot-link a { color: inherit; }
.foot-link a:hover { color: #21c1fc; }

.fab { position: fixed; right: 26px; bottom: 26px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #21c1fc; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.fab:hover { background: #8be2ff; }

/* Prozess-Tabs */
.step { flex: 1 1 130px; text-align: center; padding: 14px 8px; cursor: pointer; font-size: 17px; color: #9aa0a6; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.step:hover { color: #21c1fc; }
.step.active { font-weight: 600; color: #21c1fc; border-bottom: 2px solid #21c1fc; }
.step-desc { display: none; max-width: 680px; margin: 38px auto 0; text-align: center; font-size: 17.5px; line-height: 1.7; color: #c3c8cd; }
.step-desc.active { display: block; }

/* E-Mail-Maskierung: data-e trägt die Adresse rückwärts, JS dekodiert nach
   erster Nutzer-Interaktion; das versteckte <b> vergiftet Scraper-Textinhalte. */
.e-mask b { display: none; }
.nav-mail a { color: inherit; }
.tel-link { color: #cfd4d8; }
.tel-link:hover { color: #21c1fc; }
.anfragen-link { display: inline-block; margin-top: 14px; font-size: 20px; font-weight: 700; color: #ffffff; }
.anfragen-link:hover { color: #21c1fc; }
.kontakt-dog { width: 52px; height: auto; flex: none; }
.kontakt-dog-r { transform: scaleX(-1); }
.kontakt-mail { font-size: clamp(26px, 4.5vw, 44px); font-weight: 700; letter-spacing: -1px; line-height: 1.2; min-height: 1.2em; }
.kontakt-mail a { color: #ffffff; }
.kontakt-mail a:hover { color: #21c1fc; }

.map-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; }

/* Scroll-Reveal (rein CSS, Fallback: keine Animation) */
@keyframes st-in { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes st-out { from { opacity: 1; } to { opacity: 0.15; } }
@supports (animation-timeline: view()) {
  @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .st-reveal { animation: st-in linear both, st-out linear forwards; animation-timeline: view(0px), view(0px); animation-range: cover 0px cover 220px, cover calc(100% - 220px) cover 100%; }
  }
}

@media (max-width: 1100px) { .st-annotation { display: none !important; } }
@media (max-width: 640px) {
  .nav-mail { display: none; }
  .kontakt-dog { width: 34px; }
  header { padding: 0 20px !important; }
  header nav { gap: 20px !important; }
}