/* ============================================================
   Schreinerei Baumgartner - Entwurf D "Plakat", zweite Fassung
   (12.09.2026): DIE PLAKATWAND.

   Carlo zur ersten Fassung: "mega", "sehr geil". Also bleibt alles,
   was sie ausmacht: Plakate hintereinander - Waldgruen als Traeger,
   Creme als Gegenflaeche, Senfgelb als lautes Detail; nur Outfit, die
   Hierarchie kommt aus Groesse und Flaeche; keine runden Ecken ausser
   an Stempel und Tasten; das Schnittholz als eigenes Plakat; der
   Stempel dreht sich, sonst steht alles still.

   Neu: kein Menue im ersten Plakat, nur Wortmarke und Nummer; jedes
   Plakat mindestens so hoch wie das Fenster, damit man wirklich
   blaettert; ein zweites Foto-Plakat (Hobel und Spaene); die Zeile
   steht unter dem Foto, nicht darauf. Kein Javascript.
   ============================================================ */

:root {
  --gruen:    #17402F;
  --gruen-2:  #0F2C20;
  --creme:    #F3EEE1;
  --creme-2:  #E9E2D0;
  --gelb:     #E8B33C;
  --tinte:    #16261E;
  --tinte-2:  #5B6B62;
  --hell:     #F3EEE1;
  --hell-2:   #A9C0B2;
  --linie-g:  rgba(243, 238, 225, .22);
  --linie-c:  rgba(22, 38, 30, .18);

  --schrift: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --bahn:    82rem;
  --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(--gruen); color: var(--hell); font: 400 1.0625rem/1.6 var(--schrift); -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p, ul, ol, dl, dd, address { margin: 0; font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

.hinweis { margin: 0; padding: .5rem var(--seite); background: var(--gruen-2); color: var(--hell-2); font-size: .78rem; line-height: 1.45; }
.hinweis b { color: var(--hell); }
.zumzweiten { position: absolute; left: .75rem; top: -5rem; z-index: 10; padding: .6rem 1rem; background: var(--gelb); color: var(--gruen); font-weight: 700; text-decoration: none; }
.zumzweiten:focus { top: 3rem; }


/* ---------- Plakate ---------- */

.plakat { display: grid; align-content: center; min-height: 100svh; padding: clamp(3rem, 7vw, 6rem) var(--seite); }
.plakat--gruen { background: var(--gruen); color: var(--hell); }
.plakat--creme { background: var(--creme); color: var(--tinte); }
.plakat--erstes { grid-template-rows: auto 1fr; align-content: stretch; padding-top: clamp(1.2rem, 3vw, 2rem); }

.plakat__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wortmarke { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.wortmarke i { width: .8rem; height: .8rem; background: var(--gelb); }
.taste { display: inline-block; padding: .7rem 1.3rem; border-radius: 999px; border: 2px solid var(--hell); font-weight: 700; text-decoration: none; }
.taste:hover { background: var(--hell); color: var(--gruen); }
.taste--gelb { background: var(--gelb); border-color: var(--gelb); color: var(--gruen); }
.taste--gelb:hover { background: #F2C65A; border-color: #F2C65A; }

.parole { position: relative; display: grid; align-content: end; gap: 2rem; padding-top: clamp(3rem, 8vw, 6rem); }
.stempel { position: absolute; right: 0; top: clamp(2rem, 6vw, 4rem); width: clamp(7rem, 14vw, 11rem); }
.stempel svg { width: 100%; height: auto; fill: none; stroke: var(--gelb); stroke-width: 2; }
.stempel .stempel__mitte { fill: var(--gelb); stroke: none; }
.stempel text { fill: var(--gelb); stroke: none; font-size: 13.5px; font-weight: 700; letter-spacing: .18em; }
@media (prefers-reduced-motion: no-preference) { .stempel svg { animation: drehen 28s linear infinite; } }
@keyframes drehen { to { rotate: 360deg; } }

.parole__zeilen { display: grid; font-size: clamp(3rem, 11.5vw, 10.5rem); line-height: .92; font-weight: 800; letter-spacing: -.045em; }
.parole__zeilen .gelb { color: var(--gelb); }
.parole__fuss { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 56em) { .parole__fuss { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.parole__satz { max-width: 36rem; font-size: 1.15rem; color: var(--hell-2); }
.parole__satz b { color: var(--hell); font-weight: 500; }

.plakat__titel { max-width: 40rem; }
.plakat__titel h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
.plakat__titel p { margin-top: 1rem; font-size: 1.1rem; color: var(--tinte-2); }
.plakat--gruen .plakat__titel p { color: var(--hell-2); }


/* ---------- Felder ---------- */

.felder { display: grid; gap: 1px; margin-top: 2.6rem; background: var(--linie-c); border: 1px solid var(--linie-c); }
@media (min-width: 40em) { .felder { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .felder { grid-template-columns: repeat(4, 1fr); } }
.feld { display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.8rem; background: var(--creme); min-height: 16rem; }
.feld__nr { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--gelb); }
.feld h3 { margin-top: 1.2rem; font-size: 1.5rem; }
.feld p { margin-top: .6rem; color: var(--tinte-2); }


/* ---------- Bild-Plakate ---------- */

.plakat--bild { padding: 0; min-height: 0; background: var(--gruen-2); }
.plakat--bild img { width: 100%; height: clamp(22rem, 80svh, 50rem); object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .plakat--bild img { animation: naeher 30s ease-in-out infinite alternate; } }
@keyframes naeher { from { scale: 1; } to { scale: 1.06; } }
.plakat--bild { overflow: hidden; }
.plakat__zeile { padding: 1.1rem var(--seite); background: var(--gelb); color: var(--gruen); font-size: 1.1rem; font-weight: 700; }


/* ---------- Kennwerte ---------- */

.kennwerte { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56em) { .kennwerte { grid-template-columns: repeat(4, 1fr); } }
.kennwerte > div { padding-top: 1.2rem; border-top: 2px solid var(--linie-g); }
.kennwerte__wert { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.kennwerte__wert small { font-size: .38em; font-weight: 700; color: var(--gelb); letter-spacing: 0; }
.kennwerte__wort { margin-top: .6rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); }


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

.ablauf { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 0 2.5rem; }
@media (min-width: 56em) { .ablauf { grid-template-columns: 1fr 1fr; } }
.ablauf li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--linie-c); }
.ablauf__nr { font-size: 3rem; font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--gelb); }
.ablauf h3 { font-size: 1.4rem; }
.ablauf__wann { margin-top: .2rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.ablauf p:not(.ablauf__wann) { margin-top: .5rem; color: var(--tinte-2); }


/* ---------- Ruf ---------- */

.ruf { display: grid; gap: 2.5rem; margin-top: 2.6rem; }
@media (min-width: 56em) { .ruf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; align-items: end; } }
.ruf__nummer { display: inline-block; font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--gelb); text-decoration: none; }
.ruf address { margin-top: 1.4rem; line-height: 1.6; }
.ruf__zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--linie-g); }
.ruf__zeiten dt { color: var(--hell-2); }
.ruf__zeiten dd { font-weight: 700; }


/* ---------- Fussleiste ---------- */

.fussleiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.1rem var(--seite); background: var(--gruen-2); color: var(--hell-2); font-size: .8rem; }
.fussleiste__tot { color: #5F786C; }


/* ---------- Beim Scrollen: die Felder und Zahlen kommen nacheinander ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feld, .kennwerte > div, .ablauf li { animation: kleben linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes kleben { from { opacity: .1; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }

@media print {
  .plakat { min-height: 0; background: #fff; color: #000; }
  .plakat--bild, .zumzweiten, .stempel { display: none; }
  .parole__satz, .kennwerte__wort, .plakat__titel p { color: #000; }
}