/* Entwurf 2 «Schaden am Dach». Schiefer als dunkle Fläche, Ziegelrot für die Nummer und alles, was man antippt,
   dazu ein kühles Hell. Die alten Dachziegel stehen als hohe Fläche neben dem Text und ragen in den nächsten
   Abschnitt. Werte und Begründungen: DESIGN.md. */

@font-face {
  font-family: Bricolage;
  src: url("/fonts/bricolage-de.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: "Bricolage Ersatz";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  --schiefer: #1b2733;
  --schiefer-tief: #111a22;
  --ziegel: #ff8a5b;
  --ziegel-tief: #a8321a;
  --hell: #f1f3f5;
  --grund: #ffffff;
  --schrift: #1b2733;
  --leise: #4d5a66;
  --linie: #cfd6dd;
  --griff: #111a22;
  --griff-schrift: #ffffff;
  --knopf: #1b2733;
  --knopf-schrift: #ffffff;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --ragt: 3rem;
}

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

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

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

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

.kopf {
  position: relative;
  z-index: 1;
  background: var(--schiefer);
  color: #fff;
}

.kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1rem;
}

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

.marke {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.3;
}

.marke b {
  font-size: 1.25rem;
  font-weight: 800;
}

.kopf-text {
  display: grid;
  gap: 0.875rem;
}

.kopf h1 {
  font-size: clamp(3.25rem, 8.2vw, 7.25rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.02em;
  hyphens: manual;
  text-wrap: balance;
}

.kopf-satz {
  max-width: 24em;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.25;
  font-weight: 600;
  hyphens: manual;
  text-wrap: pretty;
}

.nummer {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 3rem;
  color: var(--ziegel);
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.625rem 1.75rem;
  border: 2px solid var(--ziegel);
  border-radius: 999px;
  background: var(--ziegel);
  color: var(--schiefer);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  transition: translate 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

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

.kopf-not {
  font-size: 1rem;
}

/* Das Bild ragt unten aus dem dunklen Kopf in den hellen Abschnitt. */
.kopf-bild {
  position: relative;
  margin: 0.75rem 0 calc(-1 * var(--ragt));
}

.kopf-bild picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem -1rem rgb(17 26 34 / 55%);
}

.kopf-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kopf-bild figcaption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: #fff;
  color: var(--schrift);
  font-size: 0.9375rem;
}

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

.band {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.band h2 {
  max-width: 14em;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  hyphens: manual;
  text-wrap: balance;
}

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

.hell {
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + var(--ragt));
  background: var(--hell);
}

/* ---- Wobei er hilft ---- */

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

.kachel {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.125rem 0.25rem rgb(27 39 51 / 8%), 0 1rem 2rem -1.25rem rgb(27 39 51 / 35%);
  text-decoration: none;
  transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.kachel > * {
  min-width: 0;
}

.zeichen {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  fill: none;
  stroke: var(--ziegel-tief);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kachel b {
  min-width: 0;
  font-size: clamp(1.5rem, 1.95vw, 1.75rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.kachel span {
  color: var(--leise);
}

.kachel i {
  margin-top: 0.75rem;
  color: var(--ziegel-tief);
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Seine Sätze ---- */

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

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

.wort-gross {
  font-size: clamp(2.5rem, 6.4vw, 5.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  hyphens: manual;
  text-wrap: balance;
}

.wort-rest {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.4;
  font-weight: 600;
}

.wort-von {
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 45%);
  font-size: 1rem;
  font-weight: 400;
}

/* ---- Übrige Arbeiten ---- */

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

.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
}

.reihe a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--schiefer);
  border-radius: 999px;
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

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

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

.schiefer .nummer {
  margin-top: 1.25rem;
}

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

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

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

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

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

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

.zeiten dd {
  margin: 0;
}

.klein {
  font-size: 1rem;
}

.schiefer .klein {
  margin-top: 1.5rem;
}

.karte {
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #fff;
  color: var(--schrift);
  box-shadow: 0 2rem 4rem -2rem rgb(0 0 0 / 60%);
}

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

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

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

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

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

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

.fuss {
  margin-top: 0;
  padding: 2rem max(var(--rand), calc((100vw - 76rem) / 2 + var(--rand))) 5rem;
  border-top: 0;
  background: var(--schiefer-tief);
  color: #fff;
  font-size: 1rem;
}

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

.fuss a {
  padding: 0.6875rem 0;
}

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

@media (min-width: 60rem) {
  :root {
    --ragt: 6rem;
  }

  /* Text links, die Ziegel rechts als hohe Fläche über beide Zeilen. */
  .kopf-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    gap: 2rem 3rem;
    padding-top: 1.75rem;
  }

  .kopf-text {
    gap: 1.25rem;
    padding-bottom: 4rem;
  }

  .kopf-bild {
    grid-area: 1 / 2 / 3 / 3;
    margin-top: 0;
  }

  .kopf-bild picture {
    height: 100%;
    aspect-ratio: auto;
    min-height: 30rem;
  }

  /* Hochkant geschnitten: nach links rücken, damit die fehlenden Ziegel im Bild bleiben. */
  .kopf-bild img {
    object-position: 12% 50%;
  }

  /* Rechts ragt das Bild herein – die Überschrift bleibt in der linken Spalte. */
  .hell {
    padding-top: clamp(3.5rem, 8vw, 7rem);
  }

  .hell h2 {
    max-width: 50%;
  }

  .kacheln {
    margin-top: 3.5rem;
  }

  .worte {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 4rem;
    align-items: end;
  }

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

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

  .karte {
    padding: 2rem;
  }
}

/* ---- Zeiger und Bewegung ---- */

@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    translate: 0 -2px;
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 60%);
  }

  .knopf-leise:hover {
    background: #fff;
    color: var(--schiefer);
  }

  .kachel:hover {
    translate: 0 -0.375rem;
    box-shadow: 0 0.25rem 0.5rem rgb(27 39 51 / 10%), 0 2rem 2.5rem -1.25rem rgb(27 39 51 / 45%);
  }

  .reihe a:hover {
    background: var(--schiefer);
    color: #fff;
  }
}

/* Abschnitte kommen beim Rollen herein. Nur wo der Browser es ohne Skript kann und niemand Ruhe verlangt;
   der erste Bildschirm wartet auf nichts. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .zeig {
      animation: zeig linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    .kacheln li:nth-child(2) {
      animation-range: entry 10% entry 60%;
    }

    .kacheln li:nth-child(3) {
      animation-range: entry 20% entry 75%;
    }

    @keyframes zeig {
      from {
        opacity: 0;
        translate: 0 2.5rem;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .knopf,
  .kachel,
  .reihe a {
    transition: none;
  }
}