/* ============================================================
   digitalantrieb / 06 - SEKTIONEN B
   Beispiele, Aussage, Studio, Ablauf, Kontakt, Footer.
   ============================================================ */

/* ------------------------------------------------------------
   05 BEISPIELE

   Hier standen die Regeln fuer drei Projektkacheln. Sie sind
   entfallen, weil das Markup entfallen ist: Unter /beispiele/
   laufen jetzt sieben vollstaendige Websites, die man bedienen
   kann. Drei Stockfotos mit Schlagworten daneben waren die
   schwaechere Fassung derselben Aussage.

   Der Ruf, der an ihre Stelle getreten ist, steht in
   07-preview.css bei .demo-ruf.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   06 AUSSAGE
   Vollflaechiges Bild mit einer Aussage. Bewusst nicht
   gepinnt: die Pause soll wirken, nicht aufhalten.
   ------------------------------------------------------------ */
.claim {
  position: relative;
  min-height: clamp(30rem, 76svh, 52rem);
  overflow: clip;
  background: var(--stage);
  color: var(--on-stage);
  display: flex;
}
.claim__media {
  position: absolute;
  inset: 0;
}
.claim__media img { transform: scale(1.14); }
.claim__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 62%, transparent),
    transparent 40%,
    color-mix(in srgb, var(--ink) 78%, transparent)
  );
  pointer-events: none;
}
.claim__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--stack-4);
}
.claim__text {
  max-width: 16ch;
  margin-top: auto;
}
.claim__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding-top: var(--stack-3);
  border-top: var(--hair) solid color-mix(in srgb, var(--chalk) 25%, transparent);
}
.claim__foot .meta { color: color-mix(in srgb, var(--chalk) 70%, transparent); }

/* ------------------------------------------------------------
   07 STUDIO
   Wer dahintersteht, wie es ablaeuft. Ein Bild, zwei Absaetze,
   drei Zahlen, drei Schritte. Mehr braucht es nicht.
   ------------------------------------------------------------ */
.studio__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.studio__text {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.studio__copy b { color: var(--on-stage); font-weight: 600; }
.studio__media { grid-column: 8 / span 5; margin-top: clamp(0rem, 2vw, 2rem); }
.studio__media .media { aspect-ratio: 4 / 5; }

.stats {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 4vw, 3rem);
  border-top: var(--hair) solid var(--rule);
}
.stat__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 105%;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat__n sup { font-size: 0.42em; vertical-align: super; color: var(--signal); }
.stat p { margin-top: 0.8rem; max-width: 22ch; color: var(--on-stage-2); font-size: var(--t-sm); }

/* Ablauf: drei Schritte nebeneinander. Frueher lief das ueber
   drei volle Bildschirmhoehen. Der Inhalt ist derselbe. */
.steps {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: step;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: var(--hair) solid var(--rule);
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  line-height: 1;
}
.step p { font-size: var(--t-sm); color: var(--on-stage-2); max-width: 34ch; }

@media (max-width: 1024px) {
  .studio__text { grid-column: 1 / -1; }
  .studio__media { grid-column: 1 / -1; margin-top: 0; }
  .studio__media .media { aspect-ratio: 4 / 3; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; gap: 2rem; }
}

/* ------------------------------------------------------------
   08 KONTAKT
   Markengetoente Buehne. Links die harten Fakten, rechts das
   Formular. Ein Ziel, keine Ablenkung.
   ------------------------------------------------------------ */
.kontakt__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: var(--stack-3);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.kontakt__head h2 { grid-column: 1 / span 8; }
.kontakt__lede { grid-column: 9 / span 4; color: color-mix(in srgb, var(--chalk) 82%, transparent); }

.kontakt__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.kontakt__side {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.kontakt__block { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.kontakt__block address { font-style: normal; line-height: 1.6; color: var(--on-stage-2); }
.kontakt__mail {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  letter-spacing: var(--track-lg);
  line-height: 1.15;
  word-break: break-word;
}
.kontakt__facts {
  display: grid;
  gap: 0;
  border-top: var(--hair) solid var(--rule);
}
.kontakt__facts li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--t-sm);
  color: var(--on-stage-2);
}
.kontakt__facts span {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--signal);
  padding-top: 0.3em;
}

.form { grid-column: 6 / span 7; }

@media (max-width: 1024px) {
  .kontakt__head h2, .kontakt__lede { grid-column: 1 / -1; }
  .kontakt__side, .form { grid-column: 1 / -1; }
  /* Auf schmalen Geraeten steht das Formular oben: es ist das
     Ziel der Seite, nicht die Adresse darunter. */
  .form { order: -1; }
}

/* ------------------------------------------------------------
   09 FOOTER
   Das Finale. Typografie traegt, Kontakt sitzt darunter.
   ------------------------------------------------------------ */
.foot { position: relative; overflow: clip; }
.foot__type {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.95rem, 9vw, 11rem);
  line-height: 0.86;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  margin-bottom: clamp(3rem, 8vw, 6.5rem);
}
.foot__type .ln { display: block; }
.foot__type .w {
  display: inline-block;
  transition: transform 0.5s var(--e-out), color 0.4s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot__type .w:hover { color: var(--signal); transform: translateY(-0.06em) skewX(-5deg); }
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--hair) solid var(--rule);
}
.foot__col { display: flex; flex-direction: column; gap: 0.85rem; }
.foot__col--mail { grid-column: 1 / span 5; }
.foot__col--nav { grid-column: 7 / span 2; }
.foot__col--social { grid-column: 9 / span 2; }
.foot__col--adr { grid-column: 11 / span 2; }
.foot__mail {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  letter-spacing: var(--track-lg);
  line-height: 1.1;
  word-break: break-word;
}
.foot__col a { width: fit-content; }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: var(--stack-2);
  border-top: var(--hair) solid var(--rule);
}
.foot__mark { width: 38px; overflow: visible; color: var(--on-stage-2); }

@media (max-width: 1024px) {
  .foot__col--mail { grid-column: 1 / -1; }
  .foot__col--nav { grid-column: 1 / span 4; }
  .foot__col--social { grid-column: 5 / span 4; }
  .foot__col--adr { grid-column: 9 / span 4; }
}
@media (max-width: 640px) {
  .foot__col--nav, .foot__col--social, .foot__col--adr { grid-column: 1 / -1; }
}

/* Alle Unterseiten im Fuss: Branchen, Vorhaben, Beispielseiten.
   Wird von _NICHT-HOCHLADEN/scripts/branchen/bauen.pl zwischen
   den Marken alle-seiten:anfang/ende in index.html geschrieben. */
.foot__alle {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--hair) solid var(--rule);
}
.foot__alle ul { list-style: none; margin: var(--stack-2) 0 0; padding: 0; columns: 13rem; column-gap: clamp(1rem, 2vw, 2rem); }
.foot__alle li { break-inside: avoid; margin-bottom: 0.55rem; }
.foot__alle a { font-size: var(--t-sm); color: var(--on-stage-2); }
.foot__alle a:hover { color: var(--chalk); }

/* Drei Navigationsspalten nebeneinander statt untereinander:
   Alle drei hatten dieselbe Startspalte 7 und landeten deshalb
   in drei Zeilen uebereinander. */
@media (min-width: 1025px) {
  .foot__grid > .foot__col--mail { grid-column: 1 / span 4; }
  .foot__grid > .foot__col--mail .foot__mail { font-size: clamp(1.2rem, 1.75vw, 1.9rem); }
  .foot__grid > .foot__col--nav:nth-child(2) { grid-column: 5 / span 2; }
  .foot__grid > .foot__col--nav:nth-child(3) { grid-column: 7 / span 2; }
  .foot__grid > .foot__col--nav:nth-child(4) { grid-column: 9 / span 2; }
  .foot__grid > .foot__col--adr { grid-column: 11 / span 2; }
  .foot__grid > * { grid-row: 1; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .foot__grid > .foot__col--nav:nth-child(2) { grid-column: 1 / span 4; }
  .foot__grid > .foot__col--nav:nth-child(3) { grid-column: 5 / span 4; }
  .foot__grid > .foot__col--nav:nth-child(4) { grid-column: 9 / span 4; }
  .foot__grid > .foot__col--adr { grid-column: 1 / -1; }
}