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

:root {
  --bg: #070809;
  --bg1: #0a0c0e;
  --bg2: #101316;
  --bg3: #171b1f;
  --bg4: #20262b;
  --line: rgba(199, 209, 216, 0.12);
  --edge: rgba(224, 231, 235, 0.2);
  --gold: #d47635;
  --gl: #ed9a5d;
  --copper-deep: #713415;
  --copper: #d47635;
  --copper-light: #f0ad75;
  --steel: #bcc4ca;
  --text: #f4f5f5;
  --mut: #a1a8ad;
  --dim: #697178;
  --success: #70c898;
  --font-display: "Anton Local", "Arial Narrow", sans-serif;
  --font-body: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;
  --fd: var(--font-display);
  --fb: var(--font-body);
  --fm: var(--font-mono);
  --ai-blue: var(--copper);
  --ai-blue-bright: var(--copper-light);
  --ai-blue-soft: rgba(212, 118, 53, 0.13);
  --ai-blue-border: rgba(230, 145, 85, 0.28);
  --hero-cyan: var(--copper);
  --hero-cyan-bright: var(--copper-light);
  --hero-cyan-soft: rgba(212, 118, 53, 0.1);
  --hero-cyan-border: rgba(230, 145, 85, 0.28);
  --hero-cyan-glow: rgba(212, 118, 53, 0.12);
  --hero-cyan-muted: #cb7840;
  --hero-gold-strong: var(--copper-light);
}

html {
  color-scheme: dark;
  scroll-padding-top: 76px;
}

body {
  background:
    linear-gradient(rgba(5, 6, 7, 0.92), rgba(6, 7, 8, 0.96)),
    url("../assets/materials/01_obsidian_architecture_ultrawide.png") center top / cover fixed,
    #070809;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 8%, rgba(218, 126, 62, 0.075), transparent 24%),
    radial-gradient(circle at 82% 38%, rgba(150, 174, 190, 0.045), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

::selection {
  color: #08090a;
  background: var(--copper-light);
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--copper-light) !important;
  outline-offset: 4px;
}

nav {
  min-height: 72px;
  height: 72px;
  padding: 0 clamp(22px, 3vw, 58px);
  background:
    linear-gradient(180deg, rgba(21, 24, 27, 0.96), rgba(5, 6, 7, 0.98)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply, normal;
  border-bottom: 1px solid rgba(224, 231, 235, 0.13);
  box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 18px 44px rgba(0,0,0,0.4);
}

nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(212,118,53,0.75) 28%, rgba(212,118,53,0.12) 62%, transparent 95%);
}

.nav-l {
  gap: 12px;
}

.nav-logo {
  display: none;
}

.dt-mark {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.48));
}

.nav-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #f4f5f5;
  font-family: var(--font-display) !important;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-name-line {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.nav-name strong {
  color: var(--copper-light);
  font-weight: 400;
}

.nav-name small {
  margin-top: 5px;
  color: #949ca2;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.19em;
  line-height: 1;
}

.nav-c {
  gap: clamp(18px, 2vw, 34px);
}

.nav-c a {
  color: #aab0b5;
  font-family: var(--font-body) !important;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.nav-c a:hover {
  color: #fff;
}

.nav-pill {
  color: var(--copper-light);
  border-color: rgba(212,118,53,0.28);
  background: rgba(212,118,53,0.07);
}

.nav-r {
  gap: 10px;
}

.nav-r .btn-g,
.nav-r .btn-o {
  padding: 9px 15px !important;
  font-size: 0.74rem !important;
}

.wrap {
  width: min(100%, 1440px);
  max-width: 1440px;
  padding-inline: clamp(24px, 4vw, 72px);
}

.sec {
  padding: clamp(82px, 8vw, 128px) 0;
  position: relative;
}

.sec-dark {
  background:
    linear-gradient(180deg, rgba(12,14,16,0.98), rgba(6,7,8,0.98)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply;
  border-color: rgba(198,207,213,0.11);
  box-shadow: inset 0 1px rgba(255,255,255,0.035), inset 0 -1px rgba(255,255,255,0.025);
}

.hero {
  min-height: min(900px, calc(100svh - 72px));
  padding-top: 72px;
  background-image: url("../assets/materials/05_central_workshop_atmosphere_ultrawide.png");
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 54% at 74% 48%, rgba(0,0,0,0.08), rgba(3,4,5,0.45) 72%),
    linear-gradient(90deg, rgba(5,6,7,0.94) 0%, rgba(5,6,7,0.76) 43%, rgba(5,6,7,0.36) 72%, rgba(5,6,7,0.76) 100%),
    linear-gradient(180deg, rgba(5,6,7,0.5), rgba(5,6,7,0.76));
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("../assets/materials/04_forge_copper_reflection_alpha.png") -12% -38% / 62% auto no-repeat;
  opacity: 0.42;
  mix-blend-mode: screen;
}

.hero-bg-overlay {
  background:
    radial-gradient(ellipse 64% 66% at 69% 46%, rgba(0,0,0,0.08), transparent 68%),
    linear-gradient(180deg, rgba(4,5,6,0.16), rgba(4,5,6,0.72));
}

.dot-grid {
  opacity: 0.26;
  background-size: 72px 72px;
}

.hero-row {
  width: min(100%, 1440px);
  max-width: 1440px;
  padding-inline: clamp(24px, 4vw, 72px);
  gap: clamp(34px, 5vw, 86px);
  z-index: 4;
}

.hero-top {
  max-width: 690px;
}

.badge {
  padding: 8px 14px;
  border-radius: 8px;
  color: #d9dde0;
  border-color: rgba(215,139,84,0.34);
  background: linear-gradient(180deg, rgba(212,118,53,0.09), rgba(12,14,16,0.6));
  box-shadow: inset 0 1px rgba(255,255,255,0.07);
  white-space: nowrap;
}

.badge-dot {
  background: var(--copper-light);
  box-shadow: 0 0 10px rgba(237,154,93,0.42);
}

.hero-h1-marker {
  color: #7f878d;
}

.hero-h1-marker-line {
  background: linear-gradient(90deg, var(--copper), transparent);
}

.hero-h1 {
  margin-top: 14px;
  font-family: var(--font-display) !important;
  font-size: clamp(3.6rem, 5.8vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: none;
}

.hero-h1 .hl,
.hero-cyan-word,
.ai-word,
.ai-badge-accent {
  color: var(--copper-light) !important;
  background: linear-gradient(180deg, #f7c39b 0%, #d57838 48%, #9b4e22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  max-width: 650px;
  margin-top: 24px;
  color: #c2c7ca;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.65;
}

.hero-trust {
  margin-top: 22px;
  gap: 9px;
}

.ht-badge {
  min-height: 34px;
  padding: 7px 12px;
  color: #b9bec2;
  border-color: rgba(204,214,220,0.13);
  background: rgba(11,13,15,0.68);
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
}

.ht-check {
  color: var(--copper-light);
}

.hero-btns {
  margin-top: 26px;
  gap: 12px;
}

.btn-g {
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid rgba(255,205,164,0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #f1a66d 0%, #d57434 47%, #a74d1d 100%);
  color: #120b07;
  box-shadow: inset 0 1px rgba(255,255,255,0.42), inset 0 -1px rgba(61,22,4,0.54), 0 10px 30px rgba(119,52,17,0.22);
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.btn-g:hover {
  background: linear-gradient(180deg, #f7ba8a 0%, #df8240 50%, #b55b25 100%);
  box-shadow: inset 0 1px rgba(255,255,255,0.46), 0 14px 38px rgba(163,75,29,0.34);
}

.btn-o {
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid rgba(205,214,220,0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(38,44,49,0.86), rgba(15,18,20,0.9)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply;
  color: #e3e6e8;
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
}

.btn-o:hover {
  border-color: rgba(235,166,112,0.36);
  background-color: rgba(212,118,53,0.06);
}

.hero-social-proof,
.platform-line {
  color: #8c949a;
  font-size: 0.72rem;
}

.founder-row {
  margin-top: 23px;
  border-color: rgba(199,209,216,0.16);
  background: linear-gradient(100deg, rgba(29,34,38,0.76), rgba(8,10,11,0.58));
  box-shadow: inset 0 1px rgba(255,255,255,0.06);
}

.founder-avatar {
  border-color: rgba(233,155,99,0.44);
}

.founder-txt strong {
  color: #f1f2f3;
  font-family: var(--font-body) !important;
}

.phone-frame {
  border-color: rgba(204,213,219,0.28);
  background:
    linear-gradient(145deg, #40474d, #080a0c 18%, #1a1f23 68%, #050607),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: soft-light;
  box-shadow: inset 0 1px rgba(255,255,255,0.24), inset 0 -1px rgba(0,0,0,0.9), 0 42px 90px rgba(0,0,0,0.72);
}

.phone-front {
  box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 0 0 1px rgba(214,126,64,0.12), 0 46px 100px rgba(0,0,0,0.82);
}

.platform-badge {
  border-color: rgba(200,209,215,0.12);
  background: rgba(9,11,12,0.76);
}

.bridge {
  background:
    radial-gradient(ellipse 48% 38% at 12% 0%, rgba(212,118,53,0.08), transparent 70%),
    linear-gradient(180deg, rgba(11,13,15,0.98), rgba(6,7,8,0.98));
  border-top: 1px solid rgba(218,227,232,0.1);
}

.bridge-h,
.sec-h,
.wl-card h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.012em !important;
  line-height: 1.05 !important;
}

.bridge-h,
.sec-h {
  font-size: clamp(2.8rem, 4vw, 4.7rem);
}

.bridge-p,
.sec-p,
.wl-sub {
  color: #aab1b6;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
}

.eyebrow,
.b-lbl,
.tc-label {
  color: var(--copper-light);
}

.el {
  background: linear-gradient(90deg, transparent, var(--copper-light));
}

.hub-grid,
.biz-grid,
.yt-grid,
.bento {
  gap: clamp(16px, 2vw, 26px);
}

.hub-card,
.status-panel,
.freebie-card,
.platform-info-card,
.b,
.flip-card,
.b-check,
.trailer-card,
.yt-card,
.biz-card,
.wl-card {
  border-color: rgba(202,211,217,0.14) !important;
  background:
    linear-gradient(155deg, rgba(39,45,50,0.78), rgba(10,12,14,0.95) 58%, rgba(5,6,7,0.98)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover !important;
  background-blend-mode: multiply, normal !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.09), inset 0 -1px rgba(0,0,0,0.7), 0 22px 48px rgba(0,0,0,0.2) !important;
}

.hub-card,
.biz-card,
.yt-card,
.freebie-card,
.platform-info-card,
.wl-card {
  border-radius: 14px !important;
}

.hub-card:hover,
.biz-card:hover,
.yt-card:hover {
  border-color: rgba(225,143,84,0.34) !important;
  transform: translateY(-3px);
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 24px 54px rgba(0,0,0,0.36), 0 0 30px rgba(153,67,23,0.08) !important;
}

.hub-card h3,
.biz-card h3,
.b h3,
.flip-card h3,
.b-check h3,
.freebie-card h3,
.platform-info-card h4 {
  color: #f0f2f3;
}

.hub-card p,
.biz-card p,
.b p,
.flip-card p,
.b-check p,
.freebie-card p,
.platform-info-card p {
  color: #a5adb2;
}

.hub-status,
.tag,
.status-label,
.bcs {
  border-radius: 6px;
}

.hub-status-done,
.hub-status-free {
  color: var(--success);
  border-color: rgba(112,200,152,0.28);
  background: rgba(112,200,152,0.07);
}

.hub-status-wip {
  color: var(--copper-light);
  border-color: rgba(212,118,53,0.28);
  background: rgba(212,118,53,0.08);
}

.hub-cta,
.trailer-link,
.biz-link {
  color: var(--copper-light);
}

.founder-note {
  border-color: rgba(200,209,215,0.14);
  background: rgba(10,12,14,0.72);
}

.fn-img {
  border-color: rgba(222,143,88,0.42);
}

.status-sec {
  background: linear-gradient(180deg, rgba(5,6,7,0.88), rgba(10,12,14,0.96));
}

.status-panel-after {
  border-color: rgba(112,200,152,0.24) !important;
}

.status-accent,
.rm-line,
.bar-fill {
  background: linear-gradient(90deg, var(--copper-deep), var(--copper-light), transparent);
}

.rm-step.active .rm-n,
.rm-step.done .rm-n {
  border-color: rgba(225,143,84,0.48);
  color: var(--copper-light);
  background: rgba(212,118,53,0.1);
}

.rm-lbl,
.tag,
.bar-name,
.bar-val {
  color: #aeb5ba;
}

.terminal {
  border-color: rgba(202,211,217,0.14);
  background: rgba(4,5,6,0.68);
}

.tc-chrome {
  background:
    linear-gradient(180deg, rgba(40,46,51,0.96), rgba(15,18,20,0.98)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply;
  border-bottom-color: rgba(202,211,217,0.14);
}

.tc-dot:first-child { background: #9c4d25; }
.tc-dot:nth-child(2) { background: #d17b3e; }
.tc-dot:nth-child(3) { background: #78a68a; }

.yt-play,
.biz-icon {
  color: var(--copper-light);
  border-color: rgba(224,143,84,0.3);
  background: rgba(8,10,11,0.82);
}

.biz-sec {
  background:
    linear-gradient(90deg, rgba(5,6,7,0.94), rgba(7,8,9,0.75), rgba(5,6,7,0.96)),
    url("../assets/materials/01_obsidian_architecture_ultrawide.png") center / cover;
  border-block: 1px solid rgba(202,211,217,0.1);
}

.wl-sec {
  background: radial-gradient(ellipse at 50% 50%, rgba(212,118,53,0.07), transparent 60%), #070809;
}

#kontakt .wrap {
  max-width: 780px !important;
}

#kontakt form {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(202,211,217,0.14);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(33,38,43,0.78), rgba(8,10,11,0.96)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 24px 54px rgba(0,0,0,0.26);
}

#kontakt label {
  color: #b2b8bc !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 650;
}

#kontakt :is(input, textarea) {
  border-color: rgba(202,211,217,0.16) !important;
  background: rgba(5,7,8,0.76) !important;
  color: #f4f5f5 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
}

#kontakt :is(input, textarea):focus {
  border-color: rgba(230,145,85,0.54) !important;
  box-shadow: 0 0 0 3px rgba(212,118,53,0.11);
  outline: none;
}

footer {
  background:
    linear-gradient(180deg, rgba(18,21,24,0.95), rgba(5,6,7,0.99)),
    url("../assets/materials/03_gunmetal_titanium_texture.png") center / cover;
  background-blend-mode: multiply;
  border-top-color: rgba(202,211,217,0.12);
  box-shadow: inset 0 1px rgba(255,255,255,0.05);
}

.f-brand em,
.f-links a:hover,
.f-links-btn:hover {
  color: var(--copper-light);
}

@media (max-width: 1040px) {
  nav {
    padding-inline: 20px;
  }

  .nav-c,
  .nav-pill {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 70px;
  }

  .hero-row {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.72fr);
  }
}

@media (max-width: 760px) {
  nav {
    height: 64px;
    min-height: 64px;
  }

  .dt-mark {
    width: 34px;
    height: 34px;
  }

  .nav-name {
    font-size: 1rem;
  }

  .nav-name small {
    font-size: 0.41rem;
    letter-spacing: 0.13em;
  }

  .nav-r .btn-g {
    min-height: 40px;
    padding: 8px 11px !important;
    font-size: 0.68rem !important;
  }

  .hero {
    padding-top: 84px;
    background-position: 60% center;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(5,6,7,0.84), rgba(5,6,7,0.7) 48%, rgba(5,6,7,0.94));
  }

  .hero::after {
    background-size: 110% auto;
    opacity: 0.28;
  }

  .hero-row {
    display: flex;
    flex-direction: column;
    padding-inline: 22px;
  }

  .hero-top {
    max-width: none;
  }

  .hero-top .badge {
    font-size: .52rem;
    letter-spacing: .14em;
    padding-inline: 11px;
  }

  .hero-h1 {
    font-size: clamp(2.75rem, 11.4vw, 3rem) !important;
    letter-spacing: -.025em !important;
  }

  .hero-h1 br {
    display: none;
  }

  .hero-h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .hero-sub {
    font-size: 1.06rem;
  }

  .hero-btns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-btns :is(.btn-g, .btn-o) {
    width: 100%;
    justify-content: center;
  }

  .founder-row {
    align-items: center;
  }

  .platform-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .pl-sep {
    display: none;
  }

  .hero-visual {
    width: 100%;
    min-height: 520px;
  }

  .bridge-h,
  .sec-h {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .sec {
    padding-block: 74px;
  }

  .wrap {
    padding-inline: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Kleine Texte bleiben bewusst sachlich und scharf. Die schmale Display-Schrift
   ist ausschließlich für große Marken- und Bereichsüberschriften vorgesehen. */
.hub-card h3,
.platform-info-card h4,
.freebie-inner h3,
.b h3,
.flip-card h3,
.b-check h3,
.yt-info h4,
.biz-card h3,
.fn-name,
.founder-txt strong {
  color: #d9d6d0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: -.012em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

.hub-card h3,
.platform-info-card h4,
.biz-card h3 {
  font-size: 1rem !important;
}

.fn-name,
.founder-txt strong {
  font-size: .76rem !important;
}