/* =================================
   RESET
================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =================================
   VARIABLEN
================================= */
:root {
  --gold: #d1ad5c;
  --red: #8e1f1b;
  --bg-dark: #07192f;
  --bg-light: #0d2340;
  --text-soft: #e8e6e3;
}

/* =================================
   iOS / MOBILE FIXES
================================= */
html {
  -webkit-text-size-adjust: 100%;
}

/* =================================
   BASIS
================================= */
body {
  font-family: "Inter", sans-serif;
  background: radial-gradient(circle at top, var(--bg-light), var(--bg-dark));
  color: var(--text-soft);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 80px; /* Desktop-Navi */
}

/* =================================
   NAVIGATION – DESKTOP
================================= */
.nav {
  position: fixed;
  top: 24px;
  right: 40px;
  z-index: 1000;
}

.nav a {
  color: var(--gold);
  text-decoration: none;
  margin-left: 24px;
  font-size: 13px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* =================================
   BRAND ACCENT
================================= */
.accent,
.footer-accent {
  color: var(--red);
  font-weight: 600;
}

/* =================================
   HERO (Startseite)
================================= */
.hero {
  min-height: calc(100svh - 160px); /* Navi + Footer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px 60px;
}

.hero-logo {
  width: 220px;
  margin-bottom: 40px;
}

.brand {
  font-family: "Playfair Display", serif;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--gold);
}

.claim {
  font-family: "Playfair Display", serif;
  font-size: 44px;
  line-height: 1.35;
  color: var(--gold);
  max-width: 900px;
  margin: 40px auto 24px;
}

.subclaim {
  font-size: 22px;
  line-height: 1.65;
  max-width: 720px;
  margin-bottom: 52px;
}

/* =================================
   BUTTON
================================= */
.btn-primary {
  background: var(--red);
  color: #fff;
  text-decoration: none;
  padding: 16px 42px;
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* =================================
   CONTENT – UNTERSEITEN
================================= */
.content {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* Headline Fix */
.page-title,
.section-title {
  font-family: "Playfair Display", serif;
  font-size: 42px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 40px;
}

.service-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  color: var(--gold);
  margin-top: 56px;
  margin-bottom: 18px;
}

.content p {
  max-width: 720px;
  margin: 0 auto 20px;
  font-size: 18px;
  line-height: 1.75;
}

/* =================================
   KONTAKT – MAIL FIX
================================= */
.contact-mail a {
  color: var(--gold);
  text-decoration: none;
}

.contact-mail a:hover {
  opacity: 0.85;
}

/* =================================
   FOOTER
================================= */
.footer {
  flex-shrink: 0;
  padding: 32px 20px 20px;
  text-align: center;
}

.footer-copy {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
}

.footer-links {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.footer-links a,
.footer-links a:visited {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gold);
}

/* =================================
   MOBILE – FINAL & STABIL
================================= */
@media (max-width: 768px) {

  body {
    padding-top: 96px;
  }

  body.home {
    overflow: hidden; /* Startseite statisch */
  }

  /* NAV – MOBILE */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    background: rgba(7,25,47,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .nav a {
    font-size: 17px;
    letter-spacing: 0.03em;
    font-weight: 500;
    margin: 0;
  }

  /* HERO */
  .hero {
    min-height: calc(100svh - 160px);
    padding: 40px 20px 60px;
  }

  .hero-logo {
    width: 170px;
    margin-bottom: 20px;
  }

  .brand {
    font-size: 42px;
    margin-bottom: 10px;
  }

  .claim {
    font-size: 30px;
    line-height: 1.35;
    margin: 18px auto 14px;
    max-width: 92%;
  }

  .subclaim {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 32px;
    max-width: 90%;
  }

  .btn-primary {
    font-size: 14px;
    padding: 14px 34px;
  }

  .footer {
    padding-top: 64px;
  }
}

/* =================================
   BRAND FIX – FB4S "4" IMMER ROT
================================= */
.brand span,
.fb4s span {
  color: var(--red);
}

/* =================================
   STATEMENTS / LEITSÄTZE
================================= */
.statement {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-soft);
  text-align: center;
  margin: 60px auto 60px;
  max-width: 800px;
}