/* ============================================================
   Fox CAM Solutions — Stylesheet
   Palette: Blaupausen-Blau / Graphit-Stahl / Papier + Messing-Akzent
   Type:    Archivo (Display) · IBM Plex Sans (Body) · IBM Plex Mono (Daten)
   ============================================================ */

@font-face{ font-family:'Archivo'; src:url('fonts/Archivo-Variable.ttf'); font-weight:100 900; font-stretch:62% 125%; }
@font-face{ font-family:'Plex Sans'; src:url('fonts/IBMPlexSans-Light.ttf'); font-weight:300; }
@font-face{ font-family:'Plex Sans'; src:url('fonts/IBMPlexSans-Regular.ttf'); font-weight:400; }
@font-face{ font-family:'Plex Sans'; src:url('fonts/IBMPlexSans-Medium.ttf'); font-weight:500; }
@font-face{ font-family:'Plex Sans'; src:url('fonts/IBMPlexSans-SemiBold.ttf'); font-weight:600; }
@font-face{ font-family:'Plex Mono'; src:url('fonts/IBMPlexMono-Regular.ttf'); font-weight:400; }
@font-face{ font-family:'Plex Mono'; src:url('fonts/IBMPlexMono-Medium.ttf'); font-weight:500; }
@font-face{ font-family:'Plex Mono'; src:url('fonts/IBMPlexMono-SemiBold.ttf'); font-weight:600; }

:root{
  --blueprint:      #1B4965;
  --blueprint-deep: #0F3349;
  --blueprint-pale: #E8EEF1;
  --graphite:       #22262B;
  --steel:          #5C6570;
  --steel-light:    #8B949C;
  --steel-line:     #D6DBDE;
  --paper:          #FAFAF8;
  --surface:        #FFFFFF;
  --brass:          #B8794A;
  --brass-deep:     #96602E;
  --brass-pale:     #F2E5D9;

  --ff-display:'Archivo',system-ui,sans-serif;
  --ff-body:'Plex Sans',system-ui,-apple-system,sans-serif;
  --ff-mono:'Plex Mono',ui-monospace,monospace;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--ff-body); font-weight:400;
  color:var(--graphite); background:var(--paper);
  line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

h1,h2,h3{ font-family:var(--ff-display); font-weight:600; color:var(--blueprint-deep); line-height:1.15; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.1rem, 4.2vw, 3.1rem); font-weight:500; font-stretch:100%; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); margin-bottom:1rem; }
h3{ font-size:1.15rem; margin-bottom:.5rem; }
p{ max-width:62ch; }
p + p{ margin-top:.9em; }

.eyebrow{
  font-family:var(--ff-mono); font-size:.72rem; font-weight:500;
  color:var(--brass-deep); letter-spacing:.05em; margin-bottom:.6rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-body); font-weight:600; font-size:.94rem;
  padding:.75rem 1.4rem; border-radius:2px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brass); color:var(--surface); }
.btn--primary:hover{ background:var(--brass-deep); box-shadow:0 8px 18px -10px rgba(150,96,46,.55); }
.btn--ghost{ border-color:var(--surface); color:var(--surface); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--outline{ border-color:var(--blueprint); color:var(--blueprint); }
.btn--outline:hover{ background:var(--blueprint); color:var(--surface); box-shadow:0 8px 18px -10px rgba(15,51,73,.4); }

/* ── Kopf/Navigation ──────────────────────────────────────── */
header.site{ background:var(--blueprint); color:var(--paper); position:relative; }
header.site::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brass); }
.nav{ display:flex; align-items:center; gap:1.6rem; padding-block:1.2rem; }
.wordmark{ font-family:var(--ff-mono); font-weight:600; font-size:1.02rem; letter-spacing:.02em; margin-right:auto; display:inline-flex; align-items:center; gap:.5rem; }
.wordmark img{ height:28px; width:auto; display:block; }
.wordmark b{ color:var(--brass); font-weight:600; }
.navlinks{ display:flex; gap:1.9rem; font-size:.92rem; font-weight:500; }
.navlinks a{ opacity:.85; padding-bottom:2px; border-bottom:1.5px solid transparent; }
.navlinks a:hover, .navlinks a[aria-current]{ opacity:1; border-color:var(--brass); }
.navtoggle{ display:none; background:none; border:none; color:var(--paper); font-size:1.5rem; cursor:pointer; }
.langswitch{ display:flex; align-items:center; gap:.4rem; font-family:var(--ff-mono); font-size:.78rem; }
.langswitch a{ opacity:.6; padding:.2rem .3rem; }
.langswitch a[aria-current]{ opacity:1; color:var(--brass); font-weight:600; }
.langswitch a:hover{ opacity:1; }
.langswitch .sep{ opacity:.4; }

@media (max-width:760px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0; background:var(--blueprint-deep);
    flex-direction:column; gap:0; padding:.5rem var(--gutter) 1rem; display:none;
  }
  .navlinks.open{ display:flex; }
  .navlinks a{ padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .navtoggle{ display:block; }
}

/* ── Hero (Innenseiten, einfarbig) ────────────────────────── */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(184,121,74,.16), transparent 60%),
    var(--blueprint);
  color:var(--paper); padding-block:3.2rem 4rem; overflow:hidden;
}
.hero .eyebrow{ color:var(--brass); }
.hero h1{ color:var(--paper); max-width:20ch; }
.hero p.lead{ margin-top:1.1rem; font-size:1.12rem; max-width:52ch; color:rgba(250,250,248,.88); }
.hero .actions{ margin-top:1.8rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* ── Hero (Startseite, Vollbild) ──────────────────────────── */
.hero-full{
  position:relative; color:var(--paper); overflow:hidden;
  min-height:min(78vh, 640px); display:flex; align-items:flex-end;
}
.hero-full .bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('assets/img/hero-werkstatt.jpg');
  background-size:cover; background-position:center 38%;
}
.hero-full .bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(15,51,73,.96) 0%, rgba(15,51,73,.86) 32%,
    rgba(15,51,73,.42) 60%, rgba(15,51,73,.08) 100%);
}
.hero-full .content{ position:relative; z-index:1; padding-block:3.4rem 3.2rem; }
.hero-full .eyebrow{ color:var(--brass); }
.hero-full h1{ color:var(--paper); max-width:18ch; font-size:clamp(2.4rem,5vw,3.6rem); }
.hero-full p.lead{ margin-top:1.1rem; font-size:1.14rem; max-width:46ch; color:rgba(250,250,248,.92); }
.hero-full .actions{ margin-top:1.9rem; display:flex; gap:1rem; flex-wrap:wrap; }

@keyframes fox-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.hero-full .content > *{ animation:fox-rise .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-full .content > *:nth-child(2){ animation-delay:.08s; }
.hero-full .content > *:nth-child(3){ animation-delay:.16s; }
.hero-full .content > *:nth-child(4){ animation-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .hero-full .content > *{ animation:none; } }
@media (max-width:700px){
  .hero-full{ min-height:auto; }
  .hero-full .bg{ background-position:center 30%; }
  .hero-full .bg::after{ background:linear-gradient(180deg, rgba(15,51,73,.55) 0%, rgba(15,51,73,.94) 55%); }
}

/* ── Format-Leiste: Ueberschrift + Format-Chips ──────────── */
.formatband{ background:var(--graphite); color:var(--paper); padding-block:2.8rem; }
.formatband-head{
  font-family:var(--ff-display); font-weight:600; font-stretch:88%;
  font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--brass); margin-bottom:1.4rem;
}
.formatband-list{ display:flex; flex-wrap:wrap; gap:.8rem; }
.formatband-list span{
  font-family:var(--ff-mono); font-size:.85rem; color:var(--paper);
  border:1px solid rgba(250,250,248,.28); border-radius:2px;
  padding:.5rem .9rem;
}

/* Bildausschnitt-Variante fuer den Vollbild-Hero auf Innenseiten */
.hero-full.crop-b .bg{ background-position:78% 30%; }
.statband{ background:var(--graphite); color:var(--paper); padding-block:2.6rem; }
.statband .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem 1.5rem; }
.statband .item{ flex:1 1 160px; }
.statband .num{
  font-family:var(--ff-display); font-weight:600; font-stretch:88%;
  font-size:clamp(2.6rem,5.5vw,4.2rem); line-height:1; color:var(--paper);
  display:block;
}
.statband .num.accent{ color:var(--brass); }
.statband .label{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--steel-light); margin-top:.5rem; max-width:22ch;
}

/* ── Sektionen ────────────────────────────────────────────── */
section{ padding-block:3.6rem; }
section.alt{
  background-color:var(--surface);
  background-image:
    linear-gradient(rgba(27,73,101,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,73,101,.035) 1px, transparent 1px);
  background-size:32px 32px;
  border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);
}
.section-head{ max-width:56ch; margin-bottom:2.2rem; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:760px){ .grid2,.grid3{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--steel-line); padding:1.6rem; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-3px); border-color:var(--brass); box-shadow:0 10px 24px -16px rgba(15,51,73,.35); }
.card h3{ color:var(--blueprint-deep); }
.card p{ font-size:.94rem; color:var(--steel); }

.stat{ font-family:var(--ff-mono); }
.stat .num{ font-size:2.1rem; font-weight:600; color:var(--blueprint-deep); display:block; }
.stat .label{ font-size:.78rem; color:var(--steel); letter-spacing:.02em; }

/* ── Übergabe-Schema ──────────────────────────────────────── */
.schema{ background:var(--surface); border:1px solid var(--steel-line); padding:2.2rem clamp(1rem,3vw,2.4rem); }
.schema-row{ display:flex; align-items:stretch; gap:0; }
.schema-col{ flex:none; display:flex; flex-direction:column; gap:.7rem; justify-content:center; }
.schema-node{
  text-align:left; padding:.85rem 1.1rem;
  border:1.5px solid var(--brass); background:var(--brass-pale);
}
.schema-node.center{
  border-color:var(--blueprint); background:var(--blueprint-pale);
  text-align:center; padding:1.3rem 1.1rem;
}
.schema-node .t{ font-family:var(--ff-mono); font-weight:600; font-size:.82rem; color:var(--brass-deep); }
.schema-node.center .t{ color:var(--blueprint-deep); font-size:.9rem; }
.schema-node .s{ font-size:.72rem; color:var(--steel); margin-top:.15rem; }
.schema-center{ flex:none; width:170px; display:flex; align-items:center; justify-content:center; padding-inline:1rem; }
.schema-targets{ flex:1; margin-left:1.2rem; }
.schema-tier{ margin-bottom:1.1rem; }
.schema-tier:last-child{ margin-bottom:0; }
.schema-tier-label{ font-family:var(--ff-mono); font-size:.66rem; color:var(--steel-light); letter-spacing:.05em; margin-bottom:.4rem; }
.schema-tier.live .schema-tier-label{ color:var(--blueprint); }
.schema-line{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.schema-line:last-child{ margin-bottom:0; }
.schema-line .track{ width:22px; height:1.5px; background:var(--steel-line); position:relative; flex:none; overflow:visible; }
.schema-line .track::after{ content:"›"; position:absolute; right:-3px; top:50%; transform:translateY(-50%); color:var(--steel-light); font-size:.8rem; }
.schema-tier.live .track::before{
  content:""; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%;
  background:var(--brass); transform:translate(-2px,-50%);
  animation:fox-flow 2.6s ease-in-out infinite;
}
.schema-tier.live .schema-line:nth-child(2) .track::before{ animation-delay:.5s; }
.schema-tier.live .schema-line:nth-child(3) .track::before{ animation-delay:1s; }
@keyframes fox-flow{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .schema-tier.live .track::before{ animation:none; display:none; } }
.schema-line .fmt{ font-family:var(--ff-mono); font-size:.74rem; color:var(--graphite); }
.schema-tier:not(.live) .schema-line .fmt{ color:var(--steel); }
@media (max-width:820px){
  .schema-row{ flex-direction:column; }
  .schema-col{ flex-direction:row; flex-wrap:wrap; }
  .schema-node{ flex:1 1 200px; }
  .schema-center{ width:auto; padding-block:1rem; }
  .schema-targets{ margin-left:0; }
}

/* ── Titelfeld-Motiv (Fusszeile eines Abschnitts) ─────────── */
.dimband{
  border-top:.6px solid var(--steel-line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  font-family:var(--ff-mono); font-size:.7rem; color:var(--steel-light);
  padding-block:.7rem; letter-spacing:.02em;
}

/* ── Footer ───────────────────────────────────────────────── */
footer.site{ background:var(--graphite); color:var(--steel-line); padding-block:2.6rem 1.6rem; }
footer.site .wordmark{ color:var(--paper); }
.footgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footgrid h4{ font-family:var(--ff-mono); font-size:.72rem; color:var(--steel-light); letter-spacing:.05em; margin-bottom:.8rem; }
.footgrid a{ display:block; font-size:.9rem; padding-block:.3rem; color:var(--steel-line); }
.footgrid a:hover{ color:var(--brass); }
.footgrid p{ font-size:.88rem; color:var(--steel-light); }
.footbottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.78rem; color:var(--steel-light); }
@media (max-width:760px){ .footgrid{ grid-template-columns:1fr; } }

/* ── Hero mit seitlicher Illustration (Innenseiten) ──────── */
.hero .wrap.hero-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.2rem; align-items:center; }
.hero-illustration{ display:flex; justify-content:center; align-items:center; }
.hero-illustration svg{ width:100%; max-width:340px; height:auto; }
@media (max-width:860px){
  .hero .wrap.hero-split{ grid-template-columns:1fr; }
  .hero-illustration{ order:-1; max-width:220px; margin:0 auto 1rem; }
}

.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }