/* ============================================================
   Schreinerei Baumgartner - Entwurf E "Aufmasszettel", zweite
   Fassung (12.09.2026): DER ZETTEL.

   Die erste Fassung (07.09.) hatte das Formular als klebende Karte
   rechts neben dem Text - Carlo: "finde ich gut". Die zweite nimmt
   den Namen woertlich: Das Formular ist ein Aufmasszettel ueber die
   ganze Breite, gleich unter dem Streifen aus der Halle, mit Feldern
   fuer Masse in Zentimetern und das Holz. Wer weiss, was er will,
   fuellt ihn aus und ist fertig. Keine Kopfleiste mit Menue.

   Farben wie zuvor: kuehles Grau, Weiss, Signalblau. Schriften wie
   zuvor: Archivo fuer Ueberschriften, Beschriftungen und Zahlen,
   Newsreader fuer den Lauftext. Das einzige Foto ist schwarzweiss -
   ein farbiges Werkstattbild streitet sich mit dem Blau. Bewegung:
   das Foto atmet langsam; die Schritte und Richtwerte kommen beim
   Scrollen nacheinander. Kein position: fixed.
   ============================================================ */

:root {
  --grund:     #E9EAEC;
  --grund-2:   #DFE1E5;
  --karte:     #FFFFFF;
  --tinte:     #14181D;
  --tinte-2:   #4A525B;
  --blau:      #0B4FD0;
  --blau-tief: #08409F;
  --linie:     #C9CDD2;
  --linie-2:   #DEE1E4;

  --kopf:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lauf:  'Newsreader', Georgia, 'Times New Roman', serif;
  --bahn:  74rem;
  --rand:  clamp(1rem, 4vw, 2.5rem);
  --seite: max(var(--rand), calc((100% - var(--bahn)) / 2));
  --ecke:  3px;
}

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

body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--kopf);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-family: var(--kopf); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p, figure, ul, ol, dl, dd, address, fieldset { margin: 0; padding: 0; border: 0; font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

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

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

/* Die kleine Zeile ueber einer Ueberschrift. */
.oben { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blau); }
.oben--hell { color: #9DBBF7; }

/* Lauftext in der Serife - was man liest, nicht was man ausfuellt. */
.ansage__satz, .schritte__liste p, .richtwerte__fuss, .betrieb__satz, .fragen__liste p, .schluss > div > p:not(.oben) { font-family: var(--lauf); font-size: 1.15rem; line-height: 1.55; }


/* ---------- Kopfzeile ---------- */

.kopfzeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--seite); border-bottom: 1px solid var(--linie);
}
.kopfzeile__name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.kopfzeile__name span { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.kopfzeile__ruf { font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--blau); }
.kopfzeile__ruf small { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); text-align: right; }


/* ---------- Ansage ---------- */

.ansage { max-width: 50rem; padding: clamp(2.5rem, 6vw, 5rem) var(--seite) clamp(2rem, 5vw, 3.5rem); }
.ansage h1 { margin-top: .9rem; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; }
.ansage__satz { max-width: 38rem; margin-top: 1.4rem; }
.zusagen { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; font-size: .9rem; font-weight: 600; }
.zusagen li::before { content: "✓"; margin-right: .5rem; color: var(--blau); }


/* ---------- Streifen ---------- */

.streifen { overflow: hidden; background: #222; }
.streifen img { width: 100%; height: clamp(14rem, 34vw, 30rem); object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .streifen img { animation: atmen 28s ease-in-out infinite alternate; }
}
@keyframes atmen { from { scale: 1; } to { scale: 1.06; } }
.streifen figcaption { padding: .6rem var(--seite); background: var(--tinte); color: #A9B0B8; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }


/* ---------- Der Zettel ---------- */

.zettel { padding: clamp(2.5rem, 6vw, 4.5rem) var(--seite); background: var(--grund-2); }
.zettel__blatt { max-width: var(--bahn); margin: 0 auto; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--ecke); padding: clamp(1.4rem, 4vw, 2.8rem); }
.zettel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--tinte); }
.zettel__kopf h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.zettel__kopf p { font-family: var(--lauf); font-size: 1.05rem; color: var(--tinte-2); }

.zettel__felder { display: grid; gap: 1.1rem 1.4rem; margin-top: 1.6rem; }
@media (min-width: 46em) { .zettel__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .zettel__felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feld label, .feld legend { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: .35rem; }
.feld__leise { font-weight: 500; letter-spacing: 0; text-transform: none; }
@media (min-width: 64em) { .feld--breit { grid-column: span 2; } }
.feld--ganz { grid-column: 1 / -1; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: var(--ecke);
  background: #fff; color: var(--tinte); font: 500 1rem/1.3 var(--kopf);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
.feld textarea { resize: vertical; font-family: var(--lauf); font-size: 1.05rem; }
.feld ::placeholder { color: #8A929B; }
.masse { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.masse label { margin: 0; }
.masse label span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: var(--tinte-2); margin-bottom: .25rem; }

.zettel__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-2); }
.zettel__fuss p { font-size: .9rem; color: var(--tinte-2); }
.zettel__fuss a { color: var(--blau); font-weight: 700; }
.knopf { display: inline-block; padding: .85rem 1.5rem; background: var(--blau); color: #fff; border: 0; border-radius: var(--ecke); font: 700 1rem var(--kopf); letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--blau-tief); }
.zettel__antwort { margin-top: 1.2rem; padding: 1rem 1.1rem; background: #EEF3FD; border-left: 4px solid var(--blau); font-size: .95rem; line-height: 1.5; }


/* ---------- Schritte ---------- */

.schritte { padding: clamp(3rem, 7vw, 5.5rem) var(--seite) 0; }
.schritte h2, .richtwerte h2, .betrieb h2, .fragen h2 { margin-top: .8rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; }
.schritte__liste { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--ecke); overflow: hidden; }
@media (min-width: 40em) { .schritte__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .schritte__liste { grid-template-columns: repeat(4, 1fr); } }
.schritte__liste li { padding: 1.3rem 1.2rem 1.4rem; background: var(--karte); }
.schritte__nr { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--blau); }
.schritte h3 { margin-top: .4rem; font-size: 1.15rem; }
.schritte__liste p { margin-top: .5rem; font-size: 1.05rem !important; color: var(--tinte-2); }


/* ---------- Richtwerte und Betrieb ---------- */

.doppel { display: grid; gap: 3rem; padding: clamp(3rem, 7vw, 5.5rem) var(--seite); }
@media (min-width: 62em) { .doppel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.richtwerte__liste { margin-top: 1.6rem; }
.richtwerte__liste div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.richtwerte__liste div:last-child { border-bottom: 1px solid var(--linie); }
.richtwerte__liste dt { font-family: var(--lauf); font-size: 1.1rem; }
.richtwerte__liste dd { font-weight: 800; white-space: nowrap; }
.richtwerte__fuss { margin-top: 1rem; font-size: 1rem !important; color: var(--tinte-2); }
.betrieb__satz { margin-top: 1.2rem; }
.zahlen { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.zahlen li { padding: .9rem 1rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--ecke); }
.zahlen b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.zahlen span { display: block; margin-top: .3rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }


/* ---------- Fragen ---------- */

.fragen { padding: 0 var(--seite) clamp(3rem, 7vw, 5.5rem); }
.fragen__liste { max-width: 50rem; margin-top: 1.6rem; }
.fragen__liste details { border-top: 1px solid var(--linie); }
.fragen__liste details:last-child { border-bottom: 1px solid var(--linie); }
.fragen__liste summary { padding: .9rem 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.fragen__liste summary::after { content: "+"; color: var(--blau); font-weight: 800; }
.fragen__liste details[open] summary::after { content: "–"; }
.fragen__liste details p { padding: 0 0 1rem; color: var(--tinte-2); max-width: 44rem; }


/* ---------- Schluss ---------- */

.schluss { display: grid; gap: 2rem; padding: clamp(3rem, 7vw, 5rem) var(--seite); background: var(--tinte); color: #E6E9ED; }
@media (min-width: 56em) { .schluss { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 4rem; } }
.schluss h2 { margin-top: .8rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #fff; }
.schluss > div > p:not(.oben) { margin-top: 1rem; max-width: 34rem; color: #C9CDD2; }
.schluss__wege { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem !important; }
.knopf--hell { background: #fff; color: var(--tinte); }
.knopf--hell:hover { background: #E6E9ED; }
.knopf--rand { background: transparent; border: 2px solid #4A525B; color: #fff; }
.knopf--rand:hover { background: #22282F; }
.schluss address { font-size: 1rem; line-height: 1.65; }


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

.fusszeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.1rem var(--seite); background: #0C0F12; color: #7E868F; font-size: .8rem; }
.fusszeile__tot { color: #565D66; }


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

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schritte__liste li, .richtwerte__liste div, .zahlen li { animation: hochkommen linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes hochkommen { from { opacity: .15; translate: 0 .8rem; } to { opacity: 1; translate: 0 0; } }

@media print {
  .streifen, .zumzettel { display: none; }
  .schluss, .fusszeile { background: #fff; color: #000; }
}