/* Securalis – Stylesheet
   Schrift: IBM Plex Sans (lokal eingebunden, siehe /fonts)
   Farben: Navy #0B1F3A · Gold #C9A24B · Cream #F5F3EE · Slate #7C89A0 */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-300.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-700.woff2") format("woff2");
}

/* ---------- Basis ---------- */
html,
body {
  height: 100%;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #2a2a2a;
  font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}

a {
  color: #c9a24b;
  text-decoration: none;
}

a:hover {
  color: #f5f3ee;
}

#app,
#app > .app-inner {
  height: 100%;
}

/* ---------- Hero ---------- */
.hero-bg {
  background:
    linear-gradient(
      90deg,
      rgba(11, 31, 58, 0.92) 0%,
      rgba(11, 31, 58, 0.7) 42%,
      rgba(11, 31, 58, 0) 78%
    ),
    url("../hero-moodbild.jpg") right center / cover no-repeat #0b1f3a;
}

@media (max-width: 1000px) {
  .hero-bg {
    background:
      linear-gradient(
        90deg,
        rgba(11, 31, 58, 0.9) 0%,
        rgba(11, 31, 58, 0.62) 55%,
        rgba(11, 31, 58, 0.25) 100%
      ),
      url("../hero-moodbild.jpg") right center / auto 100% no-repeat #0b1f3a;
  }
}

@media (max-width: 600px) {
  .hero-bg {
    background:
      linear-gradient(
        90deg,
        rgba(11, 31, 58, 0.92) 0%,
        rgba(11, 31, 58, 0.72) 60%,
        rgba(11, 31, 58, 0.45) 100%
      ),
      url("../hero-moodbild.jpg") 88% center / auto 100% no-repeat #0b1f3a;
  }
}

/* ---------- Hover-Zustände ---------- */
.hover-light:hover {
  color: #f5f3ee;
}

.hover-gold:hover {
  color: #c9a24b;
}

.hover-border-gold:hover {
  border-color: #c9a24b;
}

.btn-primary:hover {
  background: #d8b562;
  color: #0b1f3a;
}

.btn-outline:hover {
  border-color: #c9a24b;
  color: #f5f3ee;
}