/* Entwurf 1 «Der Zimmerermeister». Tannengrün als große Fläche, die Farbe von frischem Holz für alles, was man
   antippt, dazu Weiß und ein warmes Hell. Ein großes Bild vom Dachstuhl trägt den ersten Bildschirm.
   Werte und Begründungen: DESIGN.md. */

@font-face {
  font-family: Epilogue;
  src: url("/fonts/epilogue-de-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Ersatzschrift mit angeglichenen Maßen: Der Wechsel zur geladenen Schrift verschiebt keine Zeile. */
@font-face {
  font-family: "Epilogue Ersatz";
  src: local("Arial");
  size-adjust: 111%;
  ascent-override: 79%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}

:root {
  --tanne: #16382b;
  --tanne-tief: #0e261d;
  --holz: #f2c777;
  --hell: #f7f2e8;
  --grund: #ffffff;
  --schrift: #17201b;
  --leise: #4a554e;
  --linie: #d9d2c2;
  --griff: #0e261d;
  --griff-schrift: #ffffff;
  --knopf: #16382b;
  --knopf-schrift: #ffffff;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --kante: max(var(--rand), calc((100vw - 76rem) / 2 + var(--rand)));
}

body {
  font-family: Epilogue, "Epilogue Ersatz", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  hyphens: auto;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
dl {
  margin: 0;
}

/* ---- Erster Bildschirm ---- */

.kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--tanne);
  color: #fff;
}

.kopf-bild picture,
.kopf-bild img {
  display: block;
  width: 100%;
  height: 100%;
}

.kopf-bild {
  height: 11.5rem;
}

.kopf-bild img,
.bild img {
  object-fit: cover;
}

.kopf-tafel {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem var(--rand) 1.75rem;
}

.kopf-tafel > * {
  min-width: 0;
}

.kopf h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.kopf-wer {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  font-weight: 600;
  hyphens: manual;
  text-wrap: balance;
}

.kopf-satz {
  color: var(--holz);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
}

.kopf-nummer {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 3rem;
  margin-top: 0.25rem;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.625rem 1.75rem;
  border: 2px solid var(--holz);
  border-radius: 0.5rem;
  background: var(--holz);
  color: var(--schrift);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
}

.knopf-leise {
  background: transparent;
  color: #fff;
}

/* ---- Seine Sätze, groß ---- */

.worte {
  padding: clamp(3rem, 8vw, 6.5rem) var(--kante);
  background: var(--hell);
}

.wort {
  max-width: 22em;
  font-size: clamp(1.625rem, 3.8vw, 3.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  hyphens: manual;
  text-wrap: balance;
}

/* Jeder zweite Satz rückt nach rechts: Die Sätze stehen wie versetzte Balken. */
.wort + .wort {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.wort:nth-child(even) {
  margin-left: auto;
  color: var(--tanne);
}

.worte-von {
  margin-top: 2rem;
  color: var(--leise);
  font-weight: 600;
}

/* ---- Abschnitte ---- */

.band {
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.innen {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.band h2 {
  max-width: 16em;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  hyphens: manual;
  text-wrap: balance;
}

.band h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.holz {
  background: var(--holz);
}

.tanne {
  background: var(--tanne);
  color: #fff;
}

.gross {
  max-width: 22em;
  margin-top: 1rem;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  hyphens: manual;
}

.holz .knopf {
  border-color: var(--tanne);
  background: var(--tanne);
  color: #fff;
}

.holz .knoepfe {
  margin-top: 1.5rem;
}

/* ---- Arbeiten ---- */

.liste {
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.liste li {
  padding: 0.25rem 0;
  border-top: 2px solid var(--linie);
}

.liste a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  hyphens: manual;
}

.liste a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.liste span {
  display: block;
  margin: -0.25rem 0 0.5rem;
  color: var(--leise);
}

.mehr summary {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--tanne);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.mehr .liste {
  margin-top: 0;
}

.bild picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
}

.bild img {
  display: block;
  width: 100%;
  height: 100%;
}

.bild figcaption,
.klein {
  margin-top: 0.5rem;
  color: var(--leise);
  font-size: 1rem;
}

.tanne .klein {
  margin-top: 1.5rem;
  color: #fff;
}

/* ---- Werdegang ---- */

.weg-vor {
  margin-top: 1rem;
  font-size: 1.25rem;
}

.weg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.weg li {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding-top: 0.875rem;
  border-top: 0.25rem solid var(--tanne);
}

.weg b {
  color: var(--tanne);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Kontakt und Anfrage ---- */

.tanne p {
  margin-top: 0.5rem;
}

.tanne .kopf-nummer {
  margin-top: 1rem;
}

.verweis {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}

.anschrift {
  font-size: 1.25rem;
  font-weight: 700;
}

.tanne .zeiten {
  margin-top: 0.5rem;
}

.zeiten div {
  display: flex;
  gap: 1rem;
}

.zeiten dt {
  min-width: 5rem;
  font-weight: 700;
}

.zeiten dd {
  margin: 0;
}

.karte {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--schrift);
}

.karte .anfrage {
  max-width: none;
}

.karte .feld input,
.karte .feld select {
  min-height: 3.25rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
}

.karte .anfrage button {
  flex: 1 1 12rem;
  min-height: 3.25rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
}

.karte .anfrage-klein {
  font-size: 1rem;
}

.karte :focus-visible {
  outline-color: var(--tanne);
}

/* ---- Fuß ---- */

.fuss {
  margin-top: 0;
  padding: 2rem var(--kante) 5rem;
  border-top: 0;
  background: var(--tanne-tief);
  color: #fff;
  font-size: 1rem;
}

.fuss-muster,
.fuss-macher {
  color: #fff;
}

.fuss a {
  padding: 0.6875rem 0;
}

/* ---- Breiter ---- */

@media (min-width: 60rem) {
  /* Bild über die ganze Breite, die Tafel liegt unten links darauf. */
  .kopf {
    min-height: min(46rem, calc(100svh - 3rem));
    background: none;
  }

  .kopf-bild,
  .kopf-tafel {
    grid-area: 1 / 1;
  }

  /* Das Bild füllt die Fläche, bestimmt aber nicht ihre Höhe. */
  .kopf-bild {
    position: relative;
    height: auto;
  }

  .kopf-bild picture {
    position: absolute;
    inset: 0;
  }

  .kopf-tafel {
    position: relative;
    align-self: end;
    justify-self: start;
    gap: 0.75rem;
    max-width: 44rem;
    margin: 0 0 0 calc(var(--kante) - 3rem);
    padding: 2.75rem 3.5rem 3rem 3rem;
    background: var(--tanne);
  }

  .zwei {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: start;
  }

  .bild picture {
    aspect-ratio: 4 / 5;
  }

  .wort {
    max-width: 19em;
  }

  .karte {
    padding: 2rem;
  }
}