/* ==========================================================
   Schreinerei Daxenberger – neues.schreinerei-daxenberger.de
   Teaser (Startseite) + Ausbildung
   Referenz: Figma "Daxenberger - 1.0", Seite "03 - Final"
   Desktop-Raster 1728 × 1117 px, Mobil 393 px
   ========================================================== */

@font-face {
  font-family: "Gotham";
  src: url("../fonts/gotham-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/gotham-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --dark: #3d3938;
  --light: #f5f1ee;
  --line: rgba(61, 57, 56, .2);
  /* Skalierung: 1 Figma-Pixel bei 1728 px Breite */
  /* an Breite UND Höhe gebunden: eine Sektion = ein Screen (wie im Figma-Raster) */
  --s: min(calc(100vw / 1728), calc(100vh / 1117));
  /* gleicher Rand wie auf der Startseite */
  --pad: calc(120 * var(--s));
  --bar: max(56px, calc(80 * var(--s)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Gotham", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--light);
  background: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
a, button { transition: opacity .2s, background-color .2s, color .2s; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- Button (Pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 30px;
  border: 1px solid currentColor; border-radius: 20px;
  font-size: 14px; line-height: 20px; font-weight: 700;
  white-space: nowrap;
}
.btn:hover { opacity: 1; background: var(--light); color: var(--dark); border-color: var(--light); }
.btn--dark { color: var(--dark); background: var(--light); border-color: var(--dark); }
.btn--dark:hover { background: var(--dark); color: var(--light); border-color: var(--dark); }

/* ==========================================================
   STARTSEITE (Teaser)
   ========================================================== */
.teaser {
  /* auf Desktop proportional an Breite UND Höhe gebunden -> kein Scrollen */
  --t: min(calc(100vw / 1728), calc(100vh / 1117));
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "foot right" "brand right";
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.teaser__screen { display: contents; }
.teaser__foot { grid-area: foot; padding: calc(120 * var(--t)) calc(120 * var(--t)) 0; }
.teaser__brand { grid-area: brand; align-self: end; padding: 0 calc(120 * var(--t)) calc(120 * var(--t)); }
.teaser__right { grid-area: right; }
.teaser__links { display: flex; gap: calc(52 * var(--t)); font-weight: 700; }
.teaser__links { font-size: max(13px, calc(14 * var(--t))); line-height: 1.43; }
.teaser__contact, .teaser__showroom { font-style: normal; font-size: max(13px, calc(14 * var(--t))); line-height: 1.6; }
.teaser__contact a { display: block; }
.teaser__contact a + a { margin-top: .35em; }
.teaser__contact .mail { font-weight: 700; }
.teaser__showroom { margin-top: calc(56 * var(--t)); }
.teaser__showroom > * { display: block; }
.teaser__showroom > * + * { margin-top: 1.4em; }
.teaser__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.teaser__links--mob { display: none; }
.teaser__logo { width: max(180px, calc(300 * var(--t))); }

.teaser__right {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(120 * var(--t)) calc(120 * var(--t)) calc(120 * var(--t)) calc(136 * var(--t));
  /* Foto mit 50 % Deckkraft auf Dunkel (wie im Figma) */
  background:
    linear-gradient(rgba(61, 57, 56, .5), rgba(61, 57, 56, .5)),
    var(--dark) url("../img/teaser.jpg") 50% 100% / cover no-repeat;
}
.teaser__title {
  font-weight: 700;
  font-size: calc(96 * var(--t));
  line-height: 1.0625;
}
.teaser__sub {
  margin-top: calc(20 * var(--t));
  font-size: max(16px, calc(24 * var(--t)));
  line-height: 1.25;
}
.teaser__right .btn { flex: 0 0 auto; }
.br-m { display: none; }

/* Teaser – Mobil */
@media (max-width: 820px) {
  .teaser { display: block; height: auto; overflow: visible; }
  /* Logo + Bildbereich füllen genau den ersten Screen, Kontakt liegt darunter */
  .teaser__screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .teaser__brand { flex: 1 0 auto; align-self: stretch; padding: 40px 40px 32px; }
  .teaser__logo { width: 200px; }
  .br-m { display: inline; }
  .teaser__right {
    flex: 0 0 auto;
    min-height: 348px;
    padding: 40px 40px 48px;
    background-image: linear-gradient(rgba(61, 57, 56, .5), rgba(61, 57, 56, .5)), url("../img/teaser-m.jpg");
    gap: 24px;
    justify-content: flex-start;
  }
  .teaser__title { font-size: 48px; line-height: 54px; }
  .teaser__sub { margin-top: 32px; font-size: 16px; line-height: 22px; max-width: 265px; }
  .teaser__actions { display: block; }
  .teaser__links--desk { display: none; }
  .teaser__links--mob { display: flex; margin-top: 40px; }
  .teaser__foot { padding: 60px 40px 48px; }
  .teaser__links { gap: 52px; font-size: 14px; }
  .teaser__contact, .teaser__showroom { font-size: 14px; line-height: 22px; }
  .teaser__showroom { margin-top: 44px; }
}

/* ==========================================================
   AUSBILDUNG
   ========================================================== */
.wrap { padding-inline: var(--pad); }
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(20 * var(--s));
}
.sec { position: relative; min-height: calc(1117 * var(--s)); padding-block: calc(169 * var(--s)); }
.sec--light { background: var(--light); color: var(--dark); }

.h-xl { font-weight: 700; font-size: calc(96 * var(--s)); line-height: 1.1; }
.h-lg { font-size: calc(48 * var(--s)); line-height: 1.15; }
.h-md { font-size: calc(36 * var(--s)); line-height: 1.3; }
.t-lg { font-size: max(16px, calc(24 * var(--s))); line-height: 1.38; }
.t-md { font-size: max(15px, calc(18 * var(--s))); line-height: 1.5; }

/* Navigation */
.nav {
  /* bündig mit dem Textblock rechts (Headline) */
  position: absolute; top: calc(40 * var(--s)); z-index: 5;
  left: calc(50% + 136 * var(--s)); right: calc(120 * var(--s));
  display: flex; justify-content: space-between; gap: calc(32 * var(--s));
  font-size: max(14px, calc(18 * var(--s))); line-height: 1.333; font-weight: 700;
}
.burger { display: none; }

/* Hero */
/* exakt gleiche Geometrie wie die Startseite -> Logo steht beim Seitenwechsel still */
.hero { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100svh; position: relative; }
.hero__brand { display: flex; align-items: flex-end; padding: 0 calc(120 * var(--s)) calc(120 * var(--s)); }
.hero__logo { width: max(180px, calc(300 * var(--s))); }
.hero__visual {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 calc(120 * var(--s)) calc(143 * var(--s)) calc(136 * var(--s));
  background: var(--dark) url("../img/closeup.jpg") center top / cover no-repeat;
}
.hero__title { font-weight: 700; font-size: calc(96 * var(--s)); line-height: 1.1; }
.hero__sub { margin-top: calc(44 * var(--s)); font-size: calc(36 * var(--s)); line-height: 1.3; }

/* Wer wir sind */
.about .cols { align-items: start; }
.about__lead { margin-top: calc(40 * var(--s)); font-weight: 700; }
.about__text { margin-top: calc(390 * var(--s)); max-width: calc(608 * var(--s)); }
.about__text p + p { margin-top: 1.333em; }

/* Ausbildungsberufe */
.jobs__title strong { display: block; margin-bottom: 1.0833em; }
.jobs__list { margin-top: calc(166 * var(--s)); }
.jobs__list li {
  display: flex; align-items: flex-start; gap: calc(10 * var(--s));
  padding: calc(14 * var(--s)) 0; border-bottom: 1px solid var(--line);
  min-height: calc(75 * var(--s));
}
.jobs__list li + li { margin-top: calc(26 * var(--s)); }
.jobs__nr { flex: 0 0 calc(30 * var(--s)); font-size: max(11px, calc(18 * var(--s))); line-height: 1.333; margin-top: calc(7 * var(--s)); }
.jobs__name { font-weight: 700; font-size: calc(32 * var(--s)); line-height: 1.4; }
.jobs__row2 { margin-top: calc(100 * var(--s)); }
.jobs__info .btn { margin-top: calc(14 * var(--s)); }

/* Handwerk */
.craft {
  display: flex; align-items: center;
  background: var(--dark) url("../img/handwerk.jpg") center / cover no-repeat;
  overflow: hidden;
}
.craft__deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; pointer-events: none; }
.craft__text { position: relative; font-size: calc(48 * var(--s)); line-height: 1.2; max-width: calc(608 * var(--s)); }
.craft__text p + p { margin-top: 1.125em; }
.craft__text strong { display: block; }

/* Was wir bieten */
.offer__cols { margin-top: calc(32 * var(--s)); }
.offer__item h3 { font-size: inherit; font-weight: 700; }
.offer__item + .offer__item { margin-top: 1.25em; }
.icons {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin: calc(140 * var(--s)) calc(20 * var(--s)) 0; gap: calc(60 * var(--s));
}
.icons li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.icons svg { height: calc(48 * var(--s)); width: auto; min-height: 32px; }
.icons span {
  margin-top: calc(28 * var(--s));
  font-size: max(13px, calc(18 * var(--s))); line-height: 1.4; font-weight: 700;
}

/* Bereit */
.cta { padding-top: calc(120 * var(--s)); padding-bottom: calc(148 * var(--s)); }
.cta__title { max-width: calc(734 * var(--s)); }
.cta__text { align-self: center; }
.cta__text p + p { margin-top: 1.25em; font-weight: 700; }
.cta__row2 { margin-top: calc(84 * var(--s)); align-items: end; }
.cta__logo { width: calc(300 * var(--s)); min-width: 180px; }
.cta__addr a { display: block; }
.cta__addr .mail { font-weight: 700; }

/* Footer */
.foot {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 120px; padding-block: 24px;
  font-size: 14px; line-height: 1.7;
}
.foot__legal { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.foot__legal a { font-weight: 700; }
.social { display: flex; align-items: center; gap: 36px; }
.social svg { height: 24px; width: auto; }

/* ---------- Ausbildung – Tablet/Mobil ---------- */
@media (max-width: 900px) {
  :root { --pad: 40px; }
  .cols { display: block; }
  .sec { min-height: 0; padding-block: 80px; }
  .h-xl { font-size: 48px; line-height: 54px; }
  .h-lg { font-size: 28px; line-height: 35px; }
  .h-md { font-size: 21px; line-height: 30px; }
  .t-lg { font-size: 18px; line-height: 26px; }
  .t-md { font-size: 16px; line-height: 26px; }

  /* Menü */
  /* Burger und X sind dasselbe Element an fester Position -> nichts springt */
  .burger {
    display: block; position: fixed; top: 36px; right: 28px; z-index: 50;
    transition: top .3s;
    width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 22px;
    background: rgba(61, 57, 56, 0); color: var(--light); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* in der Sticky-Leiste sitzt der Burger mittig in der Leiste */
  .sticky-on .burger { top: 10px; }
  .burger svg { width: 28px; height: 28px; }
  .burger .x { display: none; }
  .nav-open .burger .x { display: block; }
  .nav-open .burger .bars { display: none; }
  .nav {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20;
    justify-content: flex-start;
    flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 28px;
    padding: 140px 40px 40px; background: var(--dark);
    font-size: 28px; line-height: 34px;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .nav-open { overflow: hidden; }

  .hero { display: block; min-height: 0; }
  .hero__brand { display: block; padding: 40px 40px 64px; }
  .hero__logo { width: 200px; min-width: 0; }
  .hero__visual { height: 440px; padding: 40px 40px 48px; background-image: url("../img/closeup-m.jpg"); background-position: center 30%; }
  .hero__title { font-size: 50px; line-height: 58px; }
  .hero__sub { margin-top: 16px; padding-bottom: 0; font-size: 20px; line-height: 26px; }

  .about__lead { margin-top: 24px; font-size: 20px; line-height: 28px; }
  .about__text { margin-top: 32px; max-width: none; }

  .jobs__title strong { margin-bottom: 16px; }
  .jobs__list { margin-top: 40px; }
  .jobs__list li { gap: 14px; padding: 18px 0; min-height: 0; }
  .jobs__list li + li { margin-top: 0; }
  .jobs__nr { flex: 0 0 20px; font-size: 12px; line-height: 16px; margin-top: 4px; }
  .jobs__name { font-size: 20px; line-height: 28px; }
  .jobs__row2 { margin-top: 56px; }
  .jobs__info { margin-top: 20px; }
  .jobs__info .btn { margin-top: 24px; height: 50px; padding: 0 29px; border-radius: 25px; font-size: 16px; }

  .craft { display: block; padding-block: 120px; background-image: url("../img/handwerk-m.jpg"); }
  .craft__deco { display: none; }
  .craft__text { font-size: 26px; line-height: 35px; max-width: none; }

  .offer__cols { margin-top: 28px; }
  .offer__cols > div + div { margin-top: 1.5em; }
  .offer__item + .offer__item { margin-top: 1.5em; }
  .icons { grid-template-columns: 1fr 1fr; margin: 48px 0 0; gap: 36px 0; }
  .icons svg { height: 40px; min-height: 0; }
  .icons span { margin-top: 16px; font-size: 14px; line-height: 18px; }

  .cta { padding-top: 80px; padding-bottom: 80px; }
  .cta__title { font-size: 44px; line-height: 48px; max-width: none; }
  .cta__text { margin-top: 32px; }
  .cta__row2 { margin-top: 48px; }
  .cta__logo { width: 200px; min-width: 0; }
  .cta__addr { margin-top: 32px; }

  .foot { display: block; padding-block: 36px; }
  .foot__legal { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot__links { display: flex; gap: 28px; }
  .social { margin-bottom: 20px; gap: 28px; }
  .foot__copy { font-size: 12px; line-height: 18px; }
}
@media (min-width: 901px) {
  .foot { flex-direction: row; }
  .foot__wrap { display: contents; }
  .foot__legal { order: 0; }
  .social { order: 1; }
}
.foot__links { display: flex; gap: 32px; }
h1, h2, h3 { font-weight: inherit; }
.h-xl, .hero__title, .teaser__title { font-weight: 700; }
@media (max-width: 900px) { .foot__links { order: -1; } }

/* Flattersatz: gleichmäßigere Zeilenlängen */
.about__text p, .offer__item p, .cta__text p, .jobs__info p, .jobs__row2 .h-md, .craft__text p { text-wrap: pretty; }
.about__text p, .offer__item p, .cta__text p, .jobs__info p { text-wrap: balance; }
@media (min-width: 901px) {
  /* Luft zwischen den beiden Spalten */
  .cols > :first-child:not(img) { padding-right: calc(96 * var(--s)); }
  .offer__cols > :last-child { padding-right: calc(40 * var(--s)); }
}

/* ---------- Sticky Header (Ausbildung) ---------- */
.sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 0 calc(120 * var(--s));
  background: var(--dark);
  transform: translateY(-100%); transition: transform .3s ease;
}
.sticky-on .sticky { transform: none; }
.sticky__brand img { width: max(150px, calc(224 * var(--s))); }
.sticky__nav {
  display: flex; gap: calc(56 * var(--s));
  font-size: max(14px, calc(18 * var(--s))); line-height: 1.333; font-weight: 700;
}
.sec, #kontakt { scroll-margin-top: var(--bar); }
@media (max-width: 900px) {
  :root { --bar: 64px; }
  .sticky { padding: 0 40px; }
  .sticky__brand img { width: 150px; }
  .sticky__nav { display: none; }
  .nav-open .sticky { transform: none; }
}