/* BRAUN Stuhlfabrik – Übergangsseite (Marketing Schmiede, 09.10.2026)
   Gestaltung wie die neue Website: Papier, Tinte, kühles Braun, Oswald + Outfit.
   Schriften lokal eingebunden (SIL Open Font License 1.1). */
@font-face { font-family: "Oswald"; src: url(/fonts/oswald.woff2) format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url(/fonts/outfit.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #F6F3EE;
  --white: #FFFFFF;
  --line: #DCD5CB;
  --ink: #1C1A18;
  --ink-2: #232120;
  --text: #2B2825;
  --muted: #6A635B;
  --muted-d: #A9A097;
  --brown: #6B5A4E;
  --brown-d: #564840;
  --brown-l: #C1B2A5;
  --brown-t: #ECE5DE;
  --ff-d: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ff-b: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(16px, 4vw, 44px);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--ff-b);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brown-d); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--brown-l); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* Infoleiste + Kopfzeile */
.leiste { background: var(--ink); color: var(--muted-d); font: 600 .78rem/1.2 var(--ff-b); letter-spacing: .04em; }
.leiste-in { max-width: var(--wrap); margin: 0 auto; padding: .6rem var(--gut); display: flex; align-items: center; gap: 1rem; }
.leiste b { color: var(--paper); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.leiste .raute { color: var(--brown-l); }
.leiste-kontakt { margin-left: auto; display: flex; gap: 1.4rem; }
.leiste a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.leiste a:hover { color: var(--white); }

.kopf { background: var(--paper); border-bottom: 1px solid var(--line); }
.kopf-in { max-width: var(--wrap); margin: 0 auto; padding: .9rem var(--gut); display: flex; align-items: center; gap: 1rem; }
.marke { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); }
.marke img { width: 52px; height: 52px; }
.marke span { font: 500 1.6rem/1 var(--ff-d); letter-spacing: .06em; text-transform: uppercase; }
.kopf .btn { margin-left: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--brown);
  border-radius: 2px;
  font: 500 .92rem/1 var(--ff-d);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-voll { background: var(--brown); color: var(--white); }
.btn-voll:hover { background: var(--brown-d); border-color: var(--brown-d); color: var(--white); }
.btn-hell { background: transparent; color: var(--white); border-color: rgba(246,243,238,.55); }
.btn-hell:hover { background: rgba(246,243,238,.12); color: var(--white); }
.btn-klein { padding: .75rem 1.1rem; font-size: .85rem; }

/* Hero */
.hero {
  position: relative;
  color: var(--paper);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(28,26,24,.78) 0%, rgba(28,26,24,.70) 45%, rgba(28,26,24,.88) 100%),
    url(/img/hero.webp) center / cover no-repeat;
  background-color: var(--ink);
}
.hero-in { max-width: 60rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gut) clamp(2.5rem, 6vw, 4rem); }
.hero-logo { width: clamp(84px, 11vw, 112px); height: auto; margin: 0 auto 1.6rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 0 0 1.2rem;
  font: 500 .8rem/1.3 var(--ff-d);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown-l);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: rgba(193,178,165,.6); flex: 0 0 auto; }
.hero h1 {
  max-width: 50rem;
  margin: 0 auto;
  font: 500 clamp(1.75rem, 4vw, 2.6rem)/1.15 var(--ff-d);
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--white);
}
.hero h1 span { display: block; color: var(--brown-l); }
.hero .lead { max-width: 40rem; margin: 0 auto; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #E7E1D9; }

/* Hinweis „in Bearbeitung“ */
.bearbeitung {
  max-width: 46rem;
  margin: clamp(2rem, 5vw, 2.8rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.2rem) clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(246,243,238,.08);
  border: 1px solid rgba(246,243,238,.28);
  border-top: 3px solid var(--brown-l);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bearbeitung .status {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 .8rem;
  font: 500 .78rem/1 var(--ff-d);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brown-l);
}
.bearbeitung h2 {
  margin: 0 0 .6rem;
  font: 500 clamp(1.7rem, 4.4vw, 2.5rem)/1.1 var(--ff-d);
  text-transform: uppercase;
  color: var(--white);
}
.bearbeitung p { margin: 0 auto 1.5rem; max-width: 34rem; color: #E7E1D9; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.fakten {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem;
  margin: 1.8rem 0 0; padding: 0;
  font-size: .95rem; color: #E7E1D9;
}
.fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.fakten .ic { color: var(--brown-l); }

/* Kontakt */
.kontakt-band { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gut); }
.kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kontakt > div { background: var(--white); padding: 1.5rem 1.6rem; display: flex; gap: 1rem; }
.kontakt .ic { width: 1.5rem; height: 1.5rem; color: var(--brown); margin-top: .15rem; }
.kontakt h2 { margin: 0 0 .35rem; font: 500 .8rem/1.2 var(--ff-d); letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }
.kontakt p, .kontakt address { margin: 0; font-style: normal; }
.kontakt a { font-weight: 600; }

/* Unterseiten */
.wrap { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) var(--gut) 3.5rem; }
.seitenkopf h1 { margin: 0 0 1.5rem; font: 500 clamp(1.8rem, 6vw, 3rem)/1.1 var(--ff-d); text-transform: uppercase; color: var(--ink); overflow-wrap: break-word; hyphens: manual; }
.wrap h2 { margin: 2.2rem 0 .5rem; font: 500 1.05rem/1.3 var(--ff-d); letter-spacing: .08em; text-transform: uppercase; color: var(--brown-d); }
.wrap p { margin: 0 0 1rem; }
.wrap address { font-style: normal; }
.wrap ul { padding-left: 1.25rem; }
.zurueck { margin-top: 2.5rem; }

/* Fußzeile */
.fuss { background: var(--ink); color: var(--muted-d); font-size: .92rem; }
.fuss-in { max-width: var(--wrap); margin: 0 auto; padding: 2.4rem var(--gut) 1.6rem; }
.fuss-oben { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(246,243,238,.14); }
.fuss .marke { color: var(--paper); }
.fuss .marke img { width: 48px; height: 48px; }
.fuss .marke span { font-size: 1.45rem; }
.fuss .marke small { display: block; margin-top: .3rem; font: 500 .68rem/1 var(--ff-d); letter-spacing: .2em; color: var(--muted-d); }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss-unten { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; padding-top: 1.2rem; }
.fuss p { margin: 0; }
.fuss a { color: var(--paper); }
.fuss a:hover { color: var(--white); }

@media (max-width: 760px) {
  .leiste-name { display: none; }
  .leiste-kontakt { margin-left: 0; }
  .kopf .btn { display: none; }
  .hero { background:
    linear-gradient(180deg, rgba(28,26,24,.80) 0%, rgba(28,26,24,.74) 45%, rgba(28,26,24,.90) 100%),
    url(/img/hero-m.webp) center / cover no-repeat; }
  .kontakt { grid-template-columns: 1fr; }
  .ctas .btn { width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .bearbeitung { background: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}