@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/inter-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/oswald-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/oswald-700.woff2') format('woff2');
}

:root{
  --ink:#0a0a0a;
  --ink-700:#2a2a2a;
  --ink-500:#5c5c5c;
  --paper:#ffffff;
  --paper-off:#f3f2ef;
  --line:#e3e1db;
  --accent:#c8ff2e;
  --accent-ink:#0a0a0a;
  --radius:18px;
  --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  --space-md: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  --space-lg: clamp(2.6rem, 1.8rem + 3vw, 4.6rem);
  --space-xl: clamp(3.6rem, 2.6rem + 4vw, 6.4rem);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--space-sm);
  padding-right:var(--space-sm);
}
h1,h2,h3,h4{
  font-family:'Oswald', 'Inter', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
  margin:0 0 0.5em;
}
h1{ font-size:clamp(2.4rem, 1.6rem + 4vw, 4.6rem); }
h2{ font-size:clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
p{ margin:0 0 1em; color:var(--ink-700); }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-family:'Oswald', sans-serif;
  font-weight:500;
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-500);
}
.eyebrow::before{
  content:"";
  width:0.9em;
  height:0.9em;
  border:2px solid var(--ink);
  border-radius:50%;
  position:relative;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:var(--space-sm);
}
.brand{
  display:flex;
  align-items:center;
  gap:0.6em;
  text-decoration:none;
}
.brand img{ height:44px; width:auto; }
.brand span{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  letter-spacing:0.04em;
  font-size:1.1rem;
}
.main-nav{ display:flex; align-items:center; gap:var(--space-md); }
.main-nav ul{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
.main-nav a{
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}
.main-nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5em;
  padding:0.85em 1.5em;
  border-radius:999px;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:0.85rem;
  text-decoration:none;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-accent:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.nav-toggle{ display:none; }

/* Hero */
.hero{
  background:var(--ink);
  color:var(--paper);
  padding-top:var(--space-xl);
  padding-bottom:var(--space-xl);
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:var(--space-lg);
  align-items:center;
}
.hero .eyebrow{ color:var(--accent); }
.hero .eyebrow::before{ border-color:var(--accent); }
.hero h1{ color:var(--paper); margin-top:0.3em; }
.hero h1 em{
  font-style:normal;
  color:var(--accent);
}
.hero p.lead{
  color:#d8d6cf;
  font-size:1.1rem;
  max-width:46ch;
}
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--space-sm); }
.hero-visual{
  background:var(--paper);
  border-radius:var(--radius);
  padding:var(--space-md);
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
}
.hero-visual img{ width:100%; height:auto; }

/* Sections */
section{ padding:var(--space-xl) 0; }
.section-alt{ background:var(--paper-off); }
.section-head{ max-width:60ch; margin-bottom:var(--space-md); }
.section-head p{ font-size:1.05rem; }

/* Services grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:var(--space-sm);
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-md);
  min-width:0;
}
.card .num{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  color:var(--ink-500);
  font-size:0.85rem;
  letter-spacing:0.1em;
}
.card h3{ margin-top:0.4em; font-size:clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); hyphens:auto; }
.card p{ margin-bottom:0; font-size:0.98rem; }
.section-alt .card{ background:var(--paper); }

/* Feature (BALLFOKUS-Brille) */
.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-lg);
  align-items:center;
}
.feature-visual{
  background:var(--ink);
  border-radius:var(--radius);
  padding:var(--space-lg) var(--space-md);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-visual .logo-plate{
  background:var(--paper);
  border-radius:calc(var(--radius) - 6px);
  padding:var(--space-md);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-visual img{ width:min(320px, 100%); }
.feature-body .tag{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-ink);
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.35em 0.8em;
  border-radius:999px;
  margin-bottom:0.8em;
}
.feature-body ul{ padding-left:1.2em; color:var(--ink-700); }
.feature-body li{ margin-bottom:0.5em; }

/* Concepts */
.concepts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap:var(--space-sm);
}
.concept-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-md);
  background:var(--paper);
  position:relative;
}
.concept-card .placeholder-note{
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  margin-top:0.8em;
  font-size:0.85rem;
  color:var(--ink-500);
  font-style:italic;
}

/* About teaser */
.about-teaser{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:var(--space-lg);
  align-items:center;
}
.about-teaser .initials{
  width:100%;
  aspect-ratio:1;
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* CTA band */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:var(--space-lg) var(--space-md);
  text-align:center;
}
.cta-band h2{ color:var(--paper); }
.cta-band p{ color:#d8d6cf; max-width:52ch; margin-left:auto; margin-right:auto; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:var(--space-lg);
}
.contact-info dl{ margin:0; }
.contact-info dt{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:var(--ink-500);
  margin-top:1.2em;
}
.contact-info dd{ margin:0.2em 0 0; font-size:1.05rem; }
.contact-info a{ text-decoration:none; border-bottom:1px solid var(--line); }

.form-card{
  background:var(--paper-off);
  border-radius:var(--radius);
  padding:var(--space-md);
}
.field{ margin-bottom:var(--space-xs); }
.field label{
  display:block;
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:0.4em;
}
.field input,
.field textarea{
  width:100%;
  padding:0.85em 1em;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--paper);
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,
.field textarea:focus{
  outline:2px solid var(--ink);
  outline-offset:1px;
}
.form-note{ font-size:0.85rem; color:var(--ink-500); margin-top:0.6em; }
.hp-field{ position:absolute; left:-9999px; }
.form-status{ margin-top:1em; font-weight:600; }
.form-status[hidden]{ display:none; }
.form-status.ok{ color:#1a7d3c; }
.form-status.err{ color:#c62828; }

/* Footer */
.site-footer{
  background:var(--ink);
  color:#c9c7c0;
  padding:var(--space-lg) 0 var(--space-md);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr) minmax(0,0.9fr);
  gap:var(--space-md);
  padding-bottom:var(--space-md);
  border-bottom:1px solid #2c2c2c;
}
.footer-logo-plate{
  background:var(--paper);
  border-radius:14px;
  padding:1rem 1.3rem;
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:1em;
}
.footer-logo-plate img{ height:34px; }
.footer-logo-plate span{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  color:var(--ink);
}
.site-footer h4{
  color:var(--paper);
  font-family:'Oswald', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.1em;
  margin-bottom:0.8em;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:0.5em; }
.site-footer a{ text-decoration:none; color:#c9c7c0; }
.site-footer a:hover{ color:var(--paper); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1em;
  padding-top:var(--space-sm);
  font-size:0.85rem;
}
.footer-bottom nav{ display:flex; gap:1.4em; flex-wrap:wrap; }

/* Prose (Impressum/Datenschutz) */
.prose{ max-width:72ch; }
.prose h2{ margin-top:1.6em; font-size:1.3rem; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--ink-700); }
.prose ul{ padding-left:1.2em; }

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:280px; margin:0 auto; }
  .feature{ grid-template-columns:1fr; }
  .about-teaser{ grid-template-columns:1fr; }
  .about-teaser .initials{ max-width:220px; margin:0 auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .main-nav ul{ display:none; }
}