/* ============================================================
   Schreinerei Baumgartner - Entwurf A "Prospekt", zweite Fassung
   (12.09.2026): DAS MUSTERBUCH.

   Die erste Fassung (04.09.) war ein Prospekt mit Kopfleiste, einem
   Foto hinter dem Aufmacher und den Hoelzern hinter Radioknoepfen.
   Carlo fand das Foto darin "mega schlecht" (07.09.), die Hoelzer
   waren ihm ausdruecklich wichtig. Also stehen die Hoelzer jetzt
   vorn und gross: fuenf Seiten, jede ein randloses Holzbild mit
   einem Zettel darauf, wie in einem Musterbuch, das man auf den Tisch
   legt. Keine Kopfleiste, kein Menue, kein Umschalter - ein Prospekt
   hat auch keins.

   Schriften wie in der ersten Fassung (Fraunces, DM Sans), Farben aus
   dem Holz: Papier, Tinte, ein Brauntonakzent. Bewegung: das Eichenbild
   auf dem Deckblatt treibt langsam; die Muster ziehen beim Scrollen
   auf, der Zettel schiebt sich nach. prefers-reduced-motion schaltet
   alles ab. Kein position: fixed, kein Javascript.
   ============================================================ */

:root {
  --papier:    #F4F0E6;
  --papier-2:  #FBF9F3;
  --tinte:     #1E1913;
  --tinte-2:   #5C5245;
  --linie:     #D8D0BE;
  --akzent:    #8F4A16;
  --nacht:     #1E1913;
  --hell:      #EFE7D8;

  --titel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bahn:  76rem;
  --rand:  clamp(1rem, 4vw, 2.5rem);
  --seite: max(var(--rand), calc((100% - var(--bahn)) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--titel); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
p, figure, ul, ol, dl, dd, address { margin: 0; font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.hinweis {
  margin: 0; padding: .55rem var(--seite); background: var(--nacht); color: var(--hell);
  font-size: .8rem; line-height: 1.45;
}
.hinweis b { color: #fff; }

.zumanfang {
  position: absolute; left: .75rem; top: -5rem; z-index: 10;
  padding: .6rem 1rem; background: var(--akzent); color: #fff; font-weight: 700; text-decoration: none;
}
.zumanfang:focus { top: 3rem; }

/* Die kleine Positionszeile ueber jeder Ueberschrift - wie im
   Angebot: Pos. 01, Pos. 02 ... */
.pos {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akzent);
}
.pos--hell { color: #E3B88A; }


/* ---------- Deckblatt ---------- */

.deckblatt {
  display: grid; min-height: calc(100svh - 2.6rem);
  background: var(--papier);
}
@media (min-width: 60em) {
  .deckblatt { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.deckblatt__text {
  align-self: center;
  padding: clamp(2.5rem, 7vw, 6rem) var(--rand) clamp(2.5rem, 7vw, 6rem) var(--seite);
  max-width: 44rem;
}
.deckblatt__marke { font-size: .95rem; font-weight: 700; }
.deckblatt__marke span { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); margin-top: .2rem; }
.deckblatt h1 {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(2.6rem, 5.8vw, 5rem); line-height: .98; font-weight: 600;
}
.deckblatt h1 em { font-style: normal; color: var(--akzent); }
.deckblatt__satz { max-width: 36rem; margin-top: 1.4rem; font-size: 1.1rem; line-height: 1.6; }
.deckblatt__ruf { margin-top: 2rem; }
.deckblatt__ruf a {
  font-family: var(--titel); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600;
  text-decoration: none; border-bottom: 3px solid var(--akzent);
}
.deckblatt__ruf small { display: block; margin-top: .6rem; font-size: .84rem; color: var(--tinte-2); }

.deckblatt__holz { position: relative; overflow: hidden; min-height: 46svh; background: #6b4a2a; }
.deckblatt__holz img { width: 100%; height: 100%; object-fit: cover; }
/* Treiben: das Holz wandert in 40 Sekunden ein Stueck nach links und zurueck. */
@media (prefers-reduced-motion: no-preference) {
  .deckblatt__holz img { scale: 1.12; animation: treiben 40s ease-in-out infinite alternate; }
}
@keyframes treiben { from { translate: 3% 0; } to { translate: -3% 1%; } }
.deckblatt__holz figcaption {
  position: absolute; left: 1.2rem; bottom: 1rem;
  padding: .35rem .7rem; background: var(--papier-2); color: var(--tinte);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}


/* ---------- Das Musterbuch: fuenf Hoelzer ---------- */

.musterbuch__kopf, .positionen__kopf, .schrittfolge__kopf { max-width: 42rem; }
.musterbuch__kopf { padding: clamp(3rem, 7vw, 5.5rem) var(--seite) clamp(2rem, 4vw, 3rem); }
.musterbuch h2, .positionen h2, .schrittfolge h2, .betriebsseite h2, .rueckseite h2 {
  margin-top: .8rem; font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.05;
}
.musterbuch__kopf p:last-child { margin-top: 1rem; color: var(--tinte-2); }

.probe { position: relative; isolation: isolate; display: grid; }
.probe__holz { position: relative; overflow: hidden; min-height: 42svh; background: #5a3d22; }
.probe__holz img { width: 100%; height: 100%; object-fit: cover; }
.probe__zettel {
  background: var(--papier-2); padding: clamp(1.6rem, 4vw, 2.6rem);
  border-top: 1px solid var(--linie);
}
@media (min-width: 60em) {
  .probe { min-height: 78svh; grid-template-columns: repeat(12, 1fr); align-items: center; }
  .probe__holz { position: absolute; inset: 0; z-index: -1; min-height: 0; }
  .probe__zettel {
    grid-column: 2 / span 5; margin: 4rem 0;
    border: 1px solid var(--linie); box-shadow: 0 1.5rem 3rem rgba(30, 25, 19, .25);
  }
  .probe--rechts .probe__zettel { grid-column: 7 / span 5; }
}
.probe__nr { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.probe h3 { margin-top: .5rem; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1; }
.probe__zettel > p:not(.probe__nr):not(.probe__fuer) { margin-top: 1rem; line-height: 1.6; }
.probe__fuer { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--linie); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }


/* ---------- Positionen ---------- */

.positionen { padding: clamp(3.5rem, 8vw, 6rem) var(--seite); background: var(--papier-2); border-top: 1px solid var(--linie); }
.positionen__liste { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 0 3rem; }
@media (min-width: 48em) { .positionen__liste { grid-template-columns: 1fr 1fr; } }
.positionen__liste li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 .6rem;
  padding: 1.1rem 0; border-top: 1px solid var(--linie);
}
.positionen__nr { grid-row: 1 / span 3; font-family: var(--titel); font-size: 1.1rem; color: var(--akzent); padding-top: .15rem; }
.positionen h3 { font-size: 1.35rem; }
.positionen__liste p { margin-top: .3rem; font-size: .95rem; line-height: 1.55; color: var(--tinte-2); }
.positionen__holz { font-size: .8rem !important; font-weight: 700; letter-spacing: .06em; color: var(--akzent) !important; }


/* ---------- Ablauf ---------- */

.schrittfolge { padding: clamp(3.5rem, 8vw, 6rem) var(--seite); }
.schrittfolge__kopf p:last-child { margin-top: 1rem; color: var(--tinte-2); }
.schrittfolge__liste { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 40em) { .schrittfolge__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .schrittfolge__liste { grid-template-columns: repeat(4, 1fr); } }
.schrittfolge__liste li { display: flex; flex-direction: column; padding: 1.4rem 1.3rem 1.3rem; background: var(--papier); }
.schrittfolge__nr { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.schrittfolge h3 { margin-top: .5rem; font-size: 1.3rem; }
.schrittfolge__liste p { margin-top: .6rem; font-size: .95rem; line-height: 1.55; color: var(--tinte-2); }
.schrittfolge__dauer { margin-top: auto; padding-top: 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }


/* ---------- Betrieb ---------- */

.betriebsseite { display: grid; gap: 2.4rem; padding: clamp(3.5rem, 8vw, 6rem) var(--seite); background: var(--papier-2); border-top: 1px solid var(--linie); }
@media (min-width: 60em) { .betriebsseite { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.betriebsseite__text p + p, .betriebsseite__text h2 + p { margin-top: 1.1rem; }
.betriebsseite__text p:not(.pos) { max-width: 40rem; }
.betriebsseite__saetze div { padding: .9rem 0; border-top: 1px solid var(--linie); }
.betriebsseite__saetze div:last-child { border-bottom: 1px solid var(--linie); }
.betriebsseite__saetze dt { font-family: var(--titel); font-size: 1.15rem; font-weight: 600; }
.betriebsseite__saetze dd { margin-top: .2rem; font-size: .95rem; color: var(--tinte-2); }
@media (min-width: 60em) { .betriebsseite__saetze { margin-top: 3.4rem; } }


/* ---------- Rueckseite ---------- */

.rueckseite { background: var(--nacht); color: var(--hell); padding: clamp(3.5rem, 8vw, 6rem) var(--seite); }
.rueckseite__innen { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .rueckseite__innen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; align-items: end; } }
.rueckseite h2 { color: #fff; max-width: 22ch; }
.rueckseite__nummer {
  display: inline-block; margin-top: 1.6rem;
  font-family: var(--titel); font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; line-height: 1;
  color: #fff; text-decoration: none; border-bottom: 4px solid #E3B88A;
}
.rueckseite__satz { max-width: 30rem; margin-top: 1.4rem; color: #C9BFAE; }
.rueckseite__daten address { font-size: 1.05rem; line-height: 1.6; }
.rueckseite__zeiten { margin-top: 1.4rem; }
.rueckseite__zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid #3a3229; font-size: .95rem; }
.rueckseite__zeiten dt { color: #C9BFAE; }
.rueckseite__zeiten dd { font-weight: 700; }


/* ---------- Fuss ---------- */

.impressumzeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.2rem var(--seite); background: #120f0b; color: #9c927f; font-size: .8rem; }
.impressumzeile__tot { color: #6f665a; }


/* ---------- Beim Scrollen ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .probe__holz img { animation: aufziehen linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .probe__zettel { animation: nachschieben linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .positionen__liste li, .schrittfolge__liste li { animation: erscheinen linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  }
}
@keyframes aufziehen    { from { scale: 1.12; } to { scale: 1; } }
@keyframes nachschieben { from { translate: 0 2rem; opacity: .3; } to { translate: 0 0; opacity: 1; } }
@keyframes erscheinen   { from { opacity: .2; } to { opacity: 1; } }

@media print {
  .deckblatt, .probe { min-height: 0; }
  .probe__holz, .zumanfang { display: none; }
  .rueckseite, .impressumzeile { background: #fff; color: #000; }
  .rueckseite h2, .rueckseite__nummer { color: #000; }
}