@font-face {
  font-family: "Anton Local";
  src: url("../assets/fonts/anton/anton-latin-ext-400-normal.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --gold: #d77836;
  --gold-light: #f3a363;
  --gold-dark: #9f421c;
  --gold-dim: #9f542c;
  --gold-soft: rgba(215, 120, 54, .09);
  --border-gold: rgba(229, 139, 77, .38);
  --glow-gold: rgba(215, 120, 54, .14);
  --black: #080a0c;
  --black-soft: #0d1013;
  --black-card: #14181c;
  --black-border: rgba(171, 184, 194, .14);
  --bg: #080a0c;
  --bg1: #0d1115;
  --bg2: #12171c;
  --surface1: #10151a;
  --surface2: #090c0f;
  --surface3: #171c21;
  --card: rgba(14, 18, 22, .96);
  --card-bg: #15191d;
  --border: rgba(171, 184, 194, .14);
  --line: rgba(171, 184, 194, .14);
  --white: #f4f1eb;
  --text: #f4f1eb;
  --white-muted: #a9afb4;
  --text-sec: #b8bdc1;
  --text-muted: #939ba1;
  --muted: #939ba1;
  --mut: #939ba1;
  --font: "Anton Local", Impact, sans-serif;
  --font-display: "Anton Local", Impact, sans-serif;
  --font-sans: "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;
}

html { color-scheme: dark; }

body {
  background:
    linear-gradient(rgba(5, 7, 9, .91), rgba(6, 8, 10, .96)),
    url("../assets/materials/01_obsidian_architecture_ultrawide.png") center top / cover fixed,
    #080a0c !important;
  color: #f4f1eb;
  font-family: "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  background:
    radial-gradient(circle at 78% 0%, rgba(215, 120, 54, .10), transparent 42%),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.025) 46%, transparent 56%) !important;
}

nav,
.topbar,
.sk-header {
  background:
    linear-gradient(180deg, rgba(29,34,38,.96), rgba(7,9,11,.98)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover !important;
  background-blend-mode: soft-light, normal !important;
  border-bottom: 1px solid rgba(226, 139, 78, .20) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 16px 42px rgba(0,0,0,.38);
}

.brand-name,
.nav-logo-name,
.footer-brand,
.brand,
.logo-main {
  font-family: "Anton Local", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .055em !important;
  color: #f2eee6 !important;
  text-transform: uppercase;
}

.brand-name em,
.nav-logo-name em {
  color: #e2823f;
  font-style: normal;
}

.brand-sub,
.nav-logo-sub,
.logo-sub {
  color: #b8aa9c !important;
  letter-spacing: .20em !important;
  text-transform: uppercase;
}

h1,
h2,
.hero-title,
.hero h1,
.section-title {
  font-family: "Anton Local", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .012em !important;
  text-wrap: balance;
}

h1 em,
h2 em,
.hero-title em,
.hero h1 em {
  color: #e2823f !important;
  font-style: normal;
}

.hero,
main::before {
  background-image:
    linear-gradient(90deg, rgba(6,8,10,.98) 0%, rgba(7,9,11,.84) 55%, rgba(7,9,11,.94) 100%),
    url("../assets/materials/05_central_workshop_atmosphere_ultrawide.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

.card,
.step-card,
.feature-card,
.price-card,
.faq-item,
.mockup-window,
.sk-card,
.result-card,
.option-card,
.impr-block,
.ds-block {
  background:
    linear-gradient(150deg, rgba(20,24,28,.92), rgba(10,13,16,.95) 42%, rgba(6,8,10,.96)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover !important;
  background-blend-mode: normal, soft-light !important;
  border-color: rgba(183, 194, 202, .17) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 20px 45px rgba(0,0,0,.26) !important;
}

.btn,
.btn-primary,
.btn-gold,
.nav-cta,
button[type="submit"],
.sk-primary {
  color: #100b07 !important;
  border: 1px solid rgba(255, 190, 133, .48) !important;
  background: linear-gradient(180deg, #f4a566 0%, #dd7c39 52%, #ad4b20 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.52), 0 9px 24px rgba(190,76,21,.24) !important;
  font-weight: 800 !important;
}

.btn:hover,
.btn-primary:hover,
.btn-gold:hover,
.nav-cta:hover,
button[type="submit"]:hover,
.sk-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-ghost,
.btn-secondary,
.nav-back,
.sk-secondary {
  background: linear-gradient(180deg, rgba(38,44,49,.82), rgba(14,17,20,.92)) !important;
  border-color: rgba(186,198,207,.19) !important;
  color: #e8e5df !important;
}

input,
textarea,
select {
  background: rgba(5,8,10,.82) !important;
  border-color: rgba(180,192,201,.19) !important;
  color: #f4f1eb !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(232,139,75,.72) !important;
  box-shadow: 0 0 0 3px rgba(215,120,54,.14) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #ee914f !important;
  outline-offset: 3px;
}

footer {
  background:
    linear-gradient(180deg, rgba(16,19,22,.96), rgba(5,7,8,.99)),
    url("../assets/materials/02_aramid_texture.png") center / 320px !important;
  background-blend-mode: normal, soft-light !important;
  border-top-color: rgba(215,120,54,.18) !important;
}

@media (max-width: 720px) {
  nav { padding-left: 18px !important; padding-right: 18px !important; }
  .brand-sub, .nav-logo-sub { letter-spacing: .13em !important; }
  h1, .hero-title, .hero h1 { line-height: 1.04 !important; }
  footer .footer-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px 20px;
  }
  footer .footer-links button {
    white-space: normal;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

/* Lesbarkeit: Anton nur für große Headlines, nicht für kleine Kartenüberschriften. */
h3,
h4,
h5,
h6,
.card h2,
.success h2,
.impr-block h2,
.impr-block h3,
.notice-block h2,
.notice-block h3,
.ds-block h2,
.ds-block h3,
.footer-brand {
  color: #d9d6d0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: -.01em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 transparent !important;
}