/* =============================================================================
   STANEK GmbH — Website
   Umsetzung des Entwurfs aus STANEK-Konzept-D.html.
   Das Erscheinungsbild ist unveraendert uebernommen; geaendert wurden nur
   Struktur und Benennung: sprechende Klassennamen statt der Kuerzel des
   Entwurfs (.rv, .f, .c, .n, .t), gruppierte Abschnitte, Tokens in :root.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   5. Kennzahlenleiste

   Zurueckgenommen statt praesent: die Zahlen sind Beleg, nicht Aussage. Sie
   stehen darum gedaempft da und gehen erst an, wenn jemand hinsieht — mit
   demselben kurzen Zoegern wie eine Leuchtreklame beim Einschalten.

   Das Flackern ist bewusst hart gestuft (steps) statt weich geblendet: eine
   Roehre oder ein Starter springt an, er wird nicht heller.
   -------------------------------------------------------------------------- */

.facts {
  display: flex;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Mittig statt linksbuendig. WARUM: Die Leiste traegt seit August 2026 nur
   noch zwei Kacheln. Linksbuendig klebte die Beschriftung dann am aeusseren
   Rand ihrer Haelfte, und rechts daneben stand jeweils eine grosse leere
   Flaeche — bei vier Kacheln faellt das nicht auf, bei zweien sehr wohl.
   Zentriert sitzen die beiden Angaben auf einem Viertel und drei Vierteln der
   Breite und stehen damit symmetrisch im Kasten.

   Gilt bewusst unabhaengig von der Anzahl: kommt eine dritte belegte Menge
   dazu, bleibt die Leiste ruhig. */
.facts__item {
  flex: 1;
  min-width: 190px;
  padding: 34px 30px;
  border-right: 1px solid var(--line);
  transition: background 0.4s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.facts__item:last-child {
  border-right: 0;
}

/* Auf sehr schmalen Ansichten brechen die Kacheln untereinander (flex-wrap
   greift, sobald zweimal min-width nicht mehr nebeneinander passt). Dann
   trennt sie kein senkrechter Strich mehr, sondern ein waagerechter — sonst
   haengt am oberen Kasten rechts eine Linie ins Leere. */
@media (max-width: 420px) {
  .facts__item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .facts__item:last-child {
    border-bottom: 0;
  }
}

.facts__item:hover,
.facts__item:focus-within {
  background: rgba(255, 227, 176, 0.025);
}

.facts__label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #6c6c66) */
  transition: color 0.4s;
}

.facts__item:hover .facts__label,
.facts__item:focus-within .facts__label {
  color: var(--glow);
}

.facts__value {
  font-size: 22px;
  margin-top: 10px;
  /* Gedaempft, aber nicht unter das Kontrastminimum: der Wert gegen den
     Seitengrund ist gerechnet, nicht geschaetzt. Zurueckgenommen heisst
     nicht schlecht lesbar. */
  color: #7c7c75;
  font-weight: 200;
  transition: color 0.4s, text-shadow 0.4s;
}

.facts__item:hover .facts__value,
.facts__item:focus-within .facts__value {
  color: #fff;
  /* Drei Hoefe wie am Hero und am Kundenband: ein enger heller Kern, ein
     mittlerer Schein, ein weiter Ueberstrahl. Ein einzelner Schatten sieht
     nach Weichzeichner aus, nicht nach Licht. */
  text-shadow:
    0 0 7px rgba(255, 227, 176, 0.9),
    0 0 20px rgba(255, 227, 176, 0.55),
    0 0 54px rgba(255, 200, 140, 0.35);
  animation: kennzahlAn 0.44s steps(1, end);
}

@keyframes kennzahlAn {
  0% { opacity: 0.35; }
  16% { opacity: 1; }
  24% { opacity: 0.3; }
  40% { opacity: 1; }
  48% { opacity: 0.65; }
  100% { opacity: 1; }
}

/* Ohne Zeigergeraet gibt es kein Hinsehen — dort waere die gedaempfte Zeile
   dauerhaft gedaempft. Also etwas heller, aber ohne Effekt. */
@media (hover: none) {
  .facts__label {
    color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #6c6c66) */
  }

  .facts__value {
    color: #cfcfc9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .facts__item:hover .facts__value,
  .facts__item:focus-within .facts__value {
    animation: none;
  }
}

/* =============================================================================
   ENTWURFSSTAND — alles ab hier gehoert zum klickbaren Dummy.

   Die Seite dient derzeit der Gestaltung: Wege, die es noch nicht gibt
   (Projektseiten, Kontaktformular, Karriere), sind angelegt und bedienbar,
   ihre Inhalte aber ausdruecklich Platzhalter. Die Kennzeichnung folgt dem
   Konzept, das Fehlendes ebenfalls in eckige Klammern gesetzt hat.

   Vor dem Livegang zu entfernen: Abschnitt 15 (Kennzeichnung). Alles andere
   bleibt und wird nur mit echten Inhalten gefuellt.
   ============================================================================= */

/* Kopf mit Porträt (unternehmen.html, seit dem 23. Oktober 2026): links
   Jürgen Stanek im Hochformat, rechts Überschrift, Name und ein Absatz.
   Kein Schleier und kein Text auf dem Bild wie bei .pagehead: Das Porträt
   hat selbst einen dunklen Hintergrund und steht für sich. Der Verlauf am
   unteren Rand lässt das Studiograu weich in den Seitengrund übergehen.
   Auf dem Telefon steht das Bild oben, der Text darunter. */
.kopf-person {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
  padding: 150px var(--pad) 30px;
}

.kopf-person__bild {
  position: relative;
  height: min(78vh, 720px);
  min-height: 460px;
  overflow: hidden;
}

.kopf-person__bild img {
  object-position: 50% 20%;
}

.kopf-person__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 72%, rgba(10, 10, 11, 0.55) 100%);
  pointer-events: none;
}

.kopf-person__titel {
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.04;
  color: #fff;
  margin-top: 18px;
}

.kopf-person__name {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.32em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #a6a69e;
}

.kopf-person__absatz {
  margin-top: 22px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mut);
}

@media (max-width: 900px) {
  .kopf-person {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 140px; /* Bild beginnt unter dem Knopf "Zurück" */
  }

  /* Hoch, aber nie höher als drei Viertel des Bildschirms, damit unter dem
     Bild schon die Überschrift zu ahnen ist. */
  .kopf-person__bild {
    height: min(120vw, 72vh);
    min-height: 0;
  }
}

.split + .split {
  padding-top: 80px;
}

/* -----------------------------------------------------------------------------
   23. Kundenstimme

   Bewusst kein Karussell und keine Zitatwand: gesammelte Lobsprueche liest
   niemand, weil austauschbar ist, was fuer jeden Anbieter gelten koennte.
   Ein Zitat wirkt an genau einer Stelle — direkt bei dem Projekt, das der
   Leser gerade angesehen hat. Dort ist es ueberpruefbar.

   Darum auch kein Kasten: der Baustein "Dieselbe Anlage bei dir" steht auf
   denselben Seiten und ist bereits gerahmt. Ein zweiter Rahmen machte aus
   Beweis und Angebot zwei gleichrangige Werbeflaechen.
   -------------------------------------------------------------------------- */

.stimme {
  padding: 100px var(--pad) 0;
  margin: 0;
  max-width: 900px;
}

.stimme__marke {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--glow);
}

.stimme blockquote {
  margin: 22px 0 0;
  /* Am 13. Oktober 2026 zweimal verkleinert (Wunsch der Auftraggeberin):
     erst von clamp(21px, 2.5vw, 29px) auf clamp(18px, 2.05vw, 24px), dann
     noch einmal auf den jetzigen Wert. */
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.45;
  color: #fff;
  font-weight: 200;
  /* Haengende Anfuehrung: das oeffnende Zeichen steht im Rand, damit die
     erste Textzeile auf derselben Kante beginnt wie alles darunter. */
  text-indent: -0.42em;
}

.stimme figcaption {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #24242a;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mut);
}

.stimme figcaption b {
  display: block;
  color: var(--txt);
  font-weight: 400;
  font-size: 15px;
}

@media (max-width: 900px) {
  .stimme {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }

  .stimme blockquote {
    text-indent: 0;
  }
}

/* Kundenstimme als Abschluss der Unternehmensseite, rechts daneben der Knopf
   "Projekt anfragen" (13. Oktober 2026). Auf schmalen Bildschirmen rutscht
   der Knopf unter die Kundenstimme. */
.stimme-schluss {
  display: flex;
  align-items: center;
  /* Der Knopf steht neben der Kundenstimme und nicht am rechten Rand
     (nachgebessert am 13. Oktober 2026). */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 40px 64px;
  padding: 100px var(--pad) 0;
}

.stimme-schluss .stimme {
  flex: 0 1 900px;
  padding: 0;
}

/* Unter dem Zitat auf der Unternehmensseite ohne Trennlinie (23. Oktober
   2026, Wunsch von Jürgen Stanek). */
.stimme-schluss .stimme figcaption {
  border-top: 0;
  padding-top: 0;
}

.stimme-schluss__aktion {
  flex: none;
  margin: 0;
}

@media (max-width: 900px) {
  .stimme-schluss {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }
}


/* =============================================================================
   HANDY, ZWEITE RUNDE (seit dem 23. Oktober 2026, Wünsche von Jürgen Stanek)
   ========================================================================== */


/* --- Kennzahlen: Zahl oben (unternehmen.html, seit dem 23. Oktober 2026) --- */
.facts--zahl-oben .facts__value {
  margin-top: 0;
  font-size: 34px;
  color: #b4b4ac;
}

.facts--zahl-oben .facts__label {
  margin-top: 12px;
  line-height: 1.6;
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */

/* --- Kleine Beschriftungen am Handy: mindestens 11 Pixel ------------------
   Am Computer bleiben sie bei 9 Pixeln, wie gestaltet. Auf dem kleinen
   Bildschirm waren sie zu klein zum Lesen. Ausgenommen sind die Wochentage
   im Kalender: Sie stehen in sieben schmalen Spalten. */
@media (max-width: 560px) {
  /* Steht gleich auch in anfrage.css, basis.css, blog.css, loesungen.css, projekte.css, ratgeber.css, termin.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .hero__scrollcue,
  .facts__label,
  .story__number,
  .project__link,
  .contact__label,
  .schritte b,
  .karte dt,
  .filter__name,
  .stelle .stelle__marke,
  .stelle__zwischen,
  .strip figcaption,
  .field label,
  .themen__nr,
  .faq__gruppe,
  .builder__stand,
  .uebernehmen__marke,
  .stimme__marke,
  .auswahl__weg,
  .anfrage__kachel .auswahl__weg,
  .anfrage__terminkopf,
  .stufenliste__nr,
  .pt__block,
  .liste th,
  .marke h3,
  .lichtprobe figcaption,
  .posten__gruppe,
  .stand__marke,
  .punkte__wer,
  .kette__stand,
  .marke__da,
  .buchen__zusage-marke,
  .karte__feldwort,
  .beitrag__thema,
  .faq__thema small,
  .probleme span,
  .leistungen__nr {
    font-size: 11px;
  }
}