/* =============================================================================
   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.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   10. Arbeiten
   -------------------------------------------------------------------------- */

.project {
  position: relative;
  overflow: hidden;
  min-width: 280px;
}

.project img {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.6s;
}

/* Abdunklung nach unten, damit die Beschriftung lesbar bleibt. */
.project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.82));
  transition: background 0.5s;
  pointer-events: none;
}

.project:hover img {
  transform: scale(1.045);
}

.project:hover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.88));
}

.project__meta {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  transition: transform 0.5s;
}

.project:hover .project__meta {
  transform: translateY(-6px);
}

.project__title {
  font-size: 22px;
  color: #fff;
  font-weight: 200;
}

.project__kind {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #b2b2ac;
  margin-top: 7px;
}


/* Die ganze Kachel ist der Ziel-Link — nicht nur der Titel. Eine Kachel, die
   aussieht wie ein Ziel, muss sich auch ueberall anklicken lassen.

   Frueher war die Kachel selbst ein <a>. Seit auf ihr eine Schaltflaeche
   liegt — heute die Gluehbirne —, geht das nicht mehr: verschachtelte Links
   sind ungueltig, und der Browser wirft den inneren heraus. Stattdessen
   liegt der Titel-Link mit einer unsichtbaren Flaeche ueber der Kachel. */
.project {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project__ganz {
  color: inherit;
}

.project__ganz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Der Fokusrahmen gehoert um die Kachel, nicht um die Schrift — sonst sieht
   man bei Tastaturbedienung nicht, welche Kachel gemeint ist. */
.project:focus-within {
  outline: 1px solid var(--glow);
  outline-offset: 2px;
}

.project__ganz:focus-visible {
  outline: none;
}

/* ==========================================================================
   DIE LEGENDE ZUR AUFBAUZEICHNUNG

   In jeder Aufbauzeichnung des Herstellers stehen graue Kreise mit A, B, C
   und D auf den Bauteilen. Ohne Legende sind sie stumm: Man sieht, DASS drei
   Teile bezeichnet sind, erfaehrt aber nicht, welches Teil welches ist. Bis
   zum 1. September 2026 stand auf der Seite genau das — die Zeichnung mit
   ihren Kreisen und kein Wort dazu.

   Der Text stammt aus dem bestehenden Auftritt (stanek-werbung.de, je eine
   Seite pro Ausfuehrung) und ist gegen die Zeichnungen geprueft: Jeder
   Buchstabe, der in einer Zeichnung vorkommt, hat einen Eintrag, und keiner
   steht in der Liste, den die Zeichnung nicht zeigt.

   DAS ZEICHEN IST EIN KREIS, KEINE AUFZAEHLUNG. Ein schlichtes "A)" waere
   eine Nummerierung wie jede andere; der Leser muesste selbst darauf kommen,
   dass es sich auf die Zeichnung daneben bezieht. Der Kreis nimmt die Form
   auf, die in der Zeichnung steht, und stellt die Verbindung ohne einen Satz
   Erklaerung her.

   NICHT als ol mit list-style, sondern mit eigenem Zeichen: Die Buchstaben
   sind keine Reihenfolge, sondern Namen. Bei EGOLIGHT 6 traegt die Zeichnung
   dreimal dasselbe A — eine Nummerierung wuerde daraus A, B, C machen und
   damit die Zeichnung verfaelschen.
   ========================================================================== */

/* --- Projektübersicht mit Filter --------------------------------------------
   Die Kacheln sind dieselben wie auf der Startseite (.project) — nur im
   Raster statt in Reihen. Das spart eine zweite Gestaltung und sorgt dafür,
   dass eine Kachel überall gleich aussieht.

   Der Filter blendet aus, statt neu zu laden: kein Seitenwechsel, keine
   verlorene Scrollposition. Ohne JavaScript sind schlicht alle Projekte zu
   sehen — das ist der richtige Rückfall, nicht eine leere Seite.
   -------------------------------------------------------------------------- */

/* Der Abstand zum Abschnitt darüber sitzt am Kasten und nicht an der Leiste:
   Was an der Leiste hinge, klebte beim Scrollen als leerer Streifen mit. */
.projektbereich {
  padding-top: 40px;
}

/* DIE LEISTE KLEBT. Wer sich durch einundsechzig Bilder scrollt, soll die
   Kategorien nicht oben suchen müssen, sondern jederzeit umschalten können.

   56 Pixel sind die Höhe der Kopfleiste, sobald sie beim Scrollen schmaler
   geworden ist. Der Grund ist deckend, sonst liefen die Bilder sichtbar
   darunter durch. Der Kasten .projektbereich begrenzt das Kleben auf die
   Galerie; darunter scrollt die Leiste normal weg. */
/* Der Fussabstand ist am 3. September 2026 von 8 auf 18 px gewachsen. Vorher
   schloss die Leiste mit der Standzeile "x von y Anlagen" ab, die selbst
   22 px Luft mitbrachte; seit die Zeile weg ist, endet die Leiste mit der
   Trennlinie der letzten Filtergruppe und braucht den Abstand selbst. */
.filter {
  position: sticky;
  top: 56px;
  z-index: 40;
  background: var(--bg);
  padding: 6px var(--pad) 18px;
}

/* Der unsichtbare Streifen, an dem das Skript erkennt, ob die Leiste klebt.
   Ein Pixel hoch, weil ein Element ohne jede Höhe je nach Browser gar nicht
   erst als sichtbar gilt. */
.filter__wache {
  height: 1px;
}

/* Erst wenn sie wirklich klebt, wird sie schmaler und bekommt eine Kante.
   Im Ruhezustand wäre beides falsch: Die Kante stünde mitten im Text, und
   die enge Fassung sähe gedrängt aus, wo genug Platz ist. Die Klasse setzt
   das Skript. */
.filter.is-geklebt {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 24px -20px #000;
}

.filter.is-geklebt .filter__gruppe {
  padding: 9px 0;
}

/* Seit dem 23. Oktober 2026: Klebt die Leiste und gibt es den schwebenden
   Knopf "Zurück" (.rueckweg, links oben, vom Skript eingesetzt), lag der
   Knopf genau über "Finde deine Bauart". Die Leiste rückt dann links so weit
   ein, dass der Knopf daneben Platz hat (16 px Rand, gut 110 px Knopf,
   dazu Luft). Unter 761 px klebt die Leiste nicht, dort gilt das nicht. */
body:has(> .rueckweg) .filter.is-geklebt {
  padding-left: max(var(--pad), 150px);
}

/* Auf dem Telefon bricht jede Achse in mehrere Zeilen um. Klebte die Leiste
   dort, stünde der halbe Bildschirm voller Knöpfe und darunter ein Streifen
   Bild. Deshalb bleibt sie dort stehen, wo sie steht. */
@media (max-width: 760px) {
  .filter {
    position: static;
    padding-top: 10px;
  }

  body:has(> .rueckweg) .filter.is-geklebt {
    padding-left: var(--pad);
  }

  /* Das Skript setzt die Klasse trotzdem, sobald die Leiste oben aus dem
     Bild ist. Hier klebt aber nichts, also darf sie auch nicht aussehen
     wie eine klebende Leiste. */
  .filter.is-geklebt {
    border-bottom: 0;
    box-shadow: none;
  }

  .filter.is-geklebt .filter__gruppe {
    padding: 16px 0;
  }
}

.filter__gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.filter__gruppe:first-of-type {
  border-top: 1px solid var(--line);
}

.filter__name {
  /* Seit 23. Oktober 2026 "Finde deine Bauart" statt "Bauart": Die Breite
     richtet sich nach dem Text, damit er nicht umbricht (vorher fest 130px). */
  flex: 0 0 auto;
  min-width: 130px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #6c6c66) */
}

.filter__knopf {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #b2b2ac;
  background: none;
  border: 1px solid #2c2c33;
  padding: 8px 15px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.filter__knopf:hover {
  color: #fff;
  border-color: #46463e;
}

.filter__knopf[aria-pressed="true"] {
  color: var(--glow);
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.07);
}

/* Werte, zu denen es (noch) kein veroeffentlichtes Projekt gibt. Sie bleiben
   stehen und anklickbar — nur leiser. Wer klickt, bekommt den ausformulierten
   Hinweis unter der Galerie; das ist ehrlicher als ein Knopf, der gar nicht
   erst da ist, und es verschweigt nicht, dass es die Loesung gibt. */
.filter__knopf[data-leer] {
  opacity: 0.42;
}

.filter__knopf[data-leer]:hover,
.filter__knopf[data-leer][aria-pressed="true"] {
  opacity: 1;
}

/* Die Achse "Anwendung" gehoert nur zu den Leuchtbuchstaben und haengt
   darum am Attribut `hidden`.

   Das allein genuegt nicht: `display: flex` weiter oben ueberschreibt die
   Voreinstellung des Browsers fuer versteckte Elemente. Ohne diese Regel
   staende die Gruppe immer da. */
.filter__gruppe[hidden] {
  display: none;
}

.filter__leer {
  padding: 60px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 520px;
}

/* --- Raster --------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 30px var(--pad) 0;
}

.galerie .project {
  height: 340px;
  min-width: 0;
}

/* Ausgeblendete Kacheln nehmen keinen Platz mehr ein. */
.project[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .galerie {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .filter {
    padding: 30px var(--pad-sm) 0;
  }

  .filter__name {
    flex: 0 0 100%;
    margin-bottom: 4px;
  }

  .galerie {
    grid-template-columns: 1fr;
    padding: 20px var(--pad-sm) 0;
  }

  .galerie .project {
    height: 300px;
  }
}

/* -----------------------------------------------------------------------------
   14. Schmale Ansichten
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .project {
    height: 300px !important;
    flex: 1 1 100% !important;
  }
}

/* =============================================================================
   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.
   ============================================================================= */

/* Seitenkopf ohne Bild — bisher nur projekte.html. Dort folgen unmittelbar
   darunter die Fallstudien mit grossen Aufnahmen und danach 61 Galeriebilder;
   ein bildschirmfuellendes Kopfbild davor war eines zu viel.

   Ohne Bild braucht der Kopf keine Bildschirmhoehe mehr, sondern nur noch
   Abstand zur festen Navigationsleiste. Die 190 px sind dieselben wie bei
   .legal, damit Seiten ohne Kopfbild alle auf derselben Kante beginnen. */
.pagehead--ohne-bild {
  height: auto;
  min-height: 0;
  padding-top: 190px;
}

.pagehead--ohne-bild .pagehead__body {
  padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
   21. "Dieselbe Anlage bei mir" — Uebernehmen

   Der Moment, in dem jemand ein fertiges Projekt gut findet, ist der einzige,
   in dem er von sich aus weiterklickt. Genau dort steht dieser Baustein: an
   der Projektseite gross, an der Kachel klein.

   Zwei Formen, ein Ziel — der Project Builder mit vorgewaehlter Loesung.
   -------------------------------------------------------------------------- */

.uebernehmen {
  margin: 0 var(--pad);
  margin-top: 100px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--glow);
  background: var(--bg-alt);
  padding: 44px 46px 48px;
  max-width: 780px;
}

.uebernehmen__titel {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  color: #fff;
  margin-top: 14px;
}

.uebernehmen__aktion {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .uebernehmen {
    margin-left: var(--pad-sm);
    margin-right: var(--pad-sm);
    padding: 32px 26px 36px;
  }
}

.merken__wort {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
}

/* --- Auswahlseite --------------------------------------------------------- */

.auswahl__stand {
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #75756e;
}

.auswahl__stand[hidden] {
  display: none;
}

#auswahl {
  padding-top: 34px;
}

#auswahl:empty {
  display: none;
}

/* Auf der Auswahlseite ist die Gluehbirne ueberfluessig — hier steht ohnehin
   nur, was gemerkt ist. Gebraucht wird das Gegenteil, und das sagt es
   deutlich statt als Zeichen: wer etwas wegnehmen will, will sich nicht
   erst ein Symbol erklaeren. */
.auswahl__weg {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(6px);
  padding: 9px 14px;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c6c6c8;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.auswahl__weg:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(10, 10, 11, 0.9);
}

.auswahl__weg:focus-visible {
  outline: 1px solid var(--glow);
  outline-offset: 2px;
}

/* --- Wozu die Glühbirne gut ist --------------------------------------------
   Die Erklärung steht oben auf der Auswahlseite und ist absichtlich flach
   gehalten: Wer schon zwanzig Bilder gemerkt hat, will seine Liste sehen und
   nicht dreimal lesen, was er längst tut. Drei kurze Spalten, eine feine
   Linie darüber, sonst nichts.
   -------------------------------------------------------------------------- */

/* Der obere Teil dieser Seite steht mittig. Das ist eine ausdrückliche
   Vorgabe der Auftraggeberin vom 2. September 2026 und die einzige Stelle
   der Website, an der ein Seitenkopf zentriert ist: Diese Seite ist keine
   Verkaufsseite, sondern das Deckblatt einer eigenen Sammlung, und der
   Kopf trägt hier keine Fließtextspalte, die eine linke Kante bräuchte.

   Die Bilder darunter bleiben links ausgerichtet wie überall sonst. */
.auswahl__kopf {
  text-align: center;
}

/* Die Glühbirne wird hier eingeschaltet gezeigt. Auf den Bildern hängt
   dieser Zustand am Knopf; hier gibt es keinen Knopf, also stehen die
   Angaben an dieser Stelle noch einmal. */
.wozu__zeichen {
  display: flex;
  color: var(--glow);
}

.wozu__zeichen .merken__glas {
  fill: rgba(255, 205, 130, 0.3);
}

.wozu__zeichen .merken__faden {
  opacity: 1;
  stroke: #fff2d8;
}

.wozu__zeichen .merken__strahlen {
  opacity: 0.9;
  transform: none;
}

.wozu__zeichen .merken__licht {
  filter: drop-shadow(0 0 7px rgba(255, 198, 120, 0.75));
}

.auswahl__leer {
  padding: 40px var(--pad) 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 560px;
}

.auswahl__leer[hidden] {
  display: none;
}

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


/* =============================================================================
   29. Referenzen — Galerie und Grossansicht

   DREI KACHELN NEBENEINANDER, NICHT VIER. Bis zum 2. September 2026 standen
   hier vier Kacheln von 260 px Hoehe. Das war auf Menge gerechnet: viele
   kleine Bilder, die zusammen „viel gebaut" sagen. Die Auftraggeberin hat
   das umgedreht — die Bilder sollen gross und hochwertig wirken, drei
   nebeneinander statt einer kleinteiligen Wand. Eine Kachel ist damit rund
   anderthalbmal so breit.

   FESTES SEITENVERHAELTNIS STATT FESTER HOEHE. Mit `height: 260px` wurde
   jedes Bild auf einen schmalen Streifen beschnitten, und je breiter der
   Bildschirm, desto mehr fiel oben und unten weg. `aspect-ratio: 4 / 3`
   waechst dagegen mit der Spalte mit: der Ausschnitt bleibt derselbe, das
   Bild wird nur groesser. Die Vorlagen sind bis zu 1600 px breit und tragen
   diese Groesse ohne sichtbaren Verlust.

   Die Kacheln fuehren nirgendwohin: zu diesen Anlagen gibt es keine eigene
   Seite. Ein Klick oeffnet das Bild gross. Deshalb liegt ueber der Kachel
   ein Knopf und kein Verweis — ein <a> ohne Ziel waere gelogen, und die
   Tastaturbedienung bekaeme ein Element, das sich nicht wie ein Link verhaelt.
   ========================================================================== */

.galerie--referenzen {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Seit dem 24. Oktober 2026 quadratisch statt 4 zu 3, am Telefon 4 zu 5
   statt 3 zu 2 (Hinweis von Jürgen Stanek: Die Pylone, etwa Tobsteel,
   A&S, Zuse und Schütter, waren oben und unten abgeschnitten). Querformate
   verlieren dabei nur seitlich etwas Rand. */
.galerie--referenzen .project {
  height: auto;
  aspect-ratio: 5 / 4;
}

/* EIN AUSSCHNITT FUER ALLE KACHELN (2. Oktober 2026). Bis dahin schnitt die
   Kachel jedes Bild mittig zu. Bei Hochformaten, vor allem den Pylonen, fiel
   dadurch der Kopf mit dem Logo weg, und die Stele stand mitten im Bild
   (Oldtimer Zentrum). Jetzt sitzt der Ausschnitt oben: Der Kopf ist zu sehen,
   darueber bleibt ein Rest Himmel, wie bei R.WEISS und Halder.

   Querformate betrifft das kaum. Sie sind breiter als die Kachel und werden
   nur seitlich beschnitten; die Hoehe zeigt die Kachel dort ganz. */
.galerie--referenzen .project img {
  object-position: 50% 8%;
}

/* Der Aufruf mitten in den Kacheln. Er läuft über alle Spalten, damit die
   Bildreihen nicht auseinanderfallen, und trägt sonst dieselbe Optik wie
   jeder andere Aufruf der Seite. Den Seitenrand hat er nicht: Den bringt
   das Raster schon mit. */
.galerie .cta {
  grid-column: 1 / -1;
  margin: 20px 0;
}

/* Tablet: zwei nebeneinander. Die Regel muss hier stehen und nicht bei
   .galerie — beide Wahlformen sind gleich stark, und diese Datei liest der
   Browser von oben nach unten, also gewinnt die spaetere. */
@media (max-width: 1100px) {
  .galerie--referenzen {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Telefon: eine Kachel je Zeile, dafuer breiter im Bild. */
@media (max-width: 700px) {
  .galerie--referenzen {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .galerie--referenzen .project {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Seit dem 23. Oktober 2026: Die allgemeine Regel .project { height: 300px
   !important } unter 900 px schlug bei diesen Kacheln durch. Aus 300 px Höhe
   und dem Seitenverhältnis errechnete der Browser die Breite (3:2 ergab
   450 px, 4:3 ergab 400 px). Die Kacheln ragten über ihre Spalte und den
   Bildschirm hinaus, die Seite ließ sich seitlich schieben. Jetzt bestimmt
   die Spaltenbreite die Größe, die Höhe folgt dem Seitenverhältnis. */
@media (max-width: 900px) {
  .galerie--referenzen .project {
    width: 100%;
    height: auto !important;
  }
}

/* Der Knopf liegt ueber der ganzen Kachel. Er ist unsichtbar — sichtbar ist
   das Bild darunter; er traegt nur die Beschriftung und den Fokusrahmen.

   Die Reihenfolge der Ebenen auf einer Kachel, von unten:
     0  .project::after   Abdunklung, faengt keine Klicks (pointer-events)
     2  .project__meta    Name und Bauart
     3  .ref__lupe        oeffnet die Grossansicht  ← diese Regel
     4  .merken           die Gluehbirne der Merkliste

   Die 3 muss ueber der Beschriftung liegen, sonst faengt diese den Klick ab
   und ausgerechnet die Bildmitte reagiert nicht. Sie muss unter der
   Gluehbirne bleiben, sonst laesst sich nichts mehr merken: die Lupe deckt
   die ganze Kachel ab und schluckte den Klick auf das Zeichen. */
.ref__lupe {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.ref__lupe:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: -4px;
}

/* Die weiteren Aufnahmen eines Projekts. Sie stehen im Markup, damit Bild,
   Beschreibung und Bauart an einer einzigen Stelle stehen — zu sehen sind
   sie aber nur in der Grossansicht. Das hidden-Attribut allein genuegte;
   die Regel steht hier, damit beim Umbauen niemand ueber ein Rudel Bilder
   stolpert, das er nicht erwartet hat. */
.project__weitere {
  display: none;
}

/* „3 Bilder" oben links auf der Kachel. Sie sagt, dass hinter dem Projekt
   mehr steckt als das eine Foto — ohne sie sieht eine Kachel mit drei
   Aufnahmen aus wie eine mit einer.

   Oben links ist frei (unten links steht der Name, unten rechts die
   Gluehbirne). pointer-events: none, damit die Angabe den Klick auf die
   Kachel nicht abfaengt. */
.project__zahl {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  padding: 5px 11px;
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d8d8d2;
  background: rgba(10, 10, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 0.4s, border-color 0.4s;
}

.project:hover .project__zahl,
.project:focus-within .project__zahl {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.32);
}

/* OHNE RAHMEN (5. Oktober 2026). Der Rand von 76/84/88 Pixeln liess das Bild
   auch nach dem 2. Oktober sichtbar kleiner als den Bildschirm; die
   Auftraggeberin sah darin keinen Unterschied. Jetzt reicht das Bild von
   oben bis unten, Knoepfe, Pfeile und Beschriftung liegen darueber und
   bekommen dafuer einen dunklen Grund. Links und rechts bleibt nur so viel
   Schwarz, wie das Seitenverhaeltnis des Fotos erzwingt: beschnitten wird
   in der Grossansicht nichts. Gilt nur fuer die Projektseite, die Lichtlupe
   der Anfrage hat ihren Schliessen-Knopf nicht in .lupe__knoepfe. */
.lupe--randlos {
  padding: 0;
  background: #060607;
}

.lupe--randlos .lupe__zu,
.lupe--randlos .lupe__link,
.lupe--randlos .lupe__blaettern {
  background: rgba(6, 6, 7, 0.62);
}

.lupe--randlos .lupe__blaettern {
  border-radius: 2px;
}

/* Nach dem Kopieren geht der Knopf kurz an — dieselbe Farbe wie die
   Gluehbirne, damit die Rueckmeldung nicht erklaert werden muss. */
.lupe__link.ist-kopiert {
  color: var(--glow);
  border-color: rgba(255, 227, 176, 0.5);
}

/* Die Blaetterpfeile sind gross und deutlich (6. Oktober 2026). Vorher war
   es ein duennes Schriftzeichen von 34 Pixeln, das auf dem dunklen Grund
   kaum auffiel. Jetzt ist es ein gezeichneter Pfeil mit kraeftigem Strich. */
.lupe__blaettern {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 128px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.lupe__blaettern svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.lupe__blaettern:hover {
  color: var(--glow);
}

/* Am Anfang und am Ende der Liste bleibt der Knopf stehen, statt zu
   verschwinden: ein Knopf, der sich beim Blaettern wegnimmt, laesst den
   Daumen ins Leere greifen. Er zeigt nur, dass es nicht weitergeht. */
.lupe__blaettern:disabled {
  opacity: 0.22;
  cursor: default;
}

.lupe__blaettern--zurueck {
  left: 16px;
}

.lupe__blaettern--vor {
  right: 16px;
}

/* Am letzten Bild zeigt der rechte Knopf ein X und schließt (seit dem
   23. Oktober 2026, js/projekte.js Abschnitt 20). Das X ist etwas kleiner
   gezeichnet als der Pfeil, damit beide gleich schwer wirken. */
.lupe__x {
  display: none;
}

.lupe__blaettern.ist-schliessen .lupe__pfeil {
  display: none;
}

.lupe__blaettern.ist-schliessen .lupe__x {
  display: inline;
}

.lupe__blaettern.ist-schliessen svg {
  transform: scale(0.7);
}

.lupe__info b {
  color: var(--txt);
  font-weight: 400;
}

/* Die Gluehbirne des gerade gezeigten Bildes. Unten rechts, an derselben
   Stelle wie auf der Kachel (6. Oktober 2026, vorher unten links). Dort
   kommt sie der mittigen Beschriftung nicht in die Quere und liegt nicht
   unter einem der Blaetterpfeile.

   Sie ist hier dauerhaft zu sehen und nicht erst beim Hinsehen wie auf den
   Kacheln: In der Grossansicht gibt es nur dieses eine Bild, und ein Knopf,
   den man erst durch Herumfahren findet, waere hier eine Zumutung. */
.lupe__merken {
  position: absolute;
  right: 26px;
  bottom: 20px;
  z-index: 4;
}

/* AUF DEM BILD, NICHT AM BILDSCHIRMRAND (13. Oktober 2026, Wunsch der
   Auftraggeberin). Ist das Foto schmaler als der Bildschirm, stand die
   Glühbirne bisher rechts daneben im Schwarzen, und mit Beschriftung. Jetzt
   sitzt sie wie auf der Kachel in der unteren rechten Ecke des Bildes, ohne
   Wort. Die Lage folgt aus derselben Rechnung wie die Bildgröße
   (.lupe__bild); --seite setzt das Skript am Fenster. Browser, die die
   Flächenmaße nicht kennen, behalten die Angabe darüber. */
.lupe--randlos .lupe__merken {
  right: calc(50cqw - min(100cqw, 100cqh * var(--seite, 1.5)) / 2 + 14px);
  bottom: calc(50cqh - min(100cqh, 100cqw / var(--seite, 1.5)) / 2 + 14px);
}

.lupe__merken .merken {
  position: static;
  margin: 0;
  opacity: 1;
  transform: none;
}

/* In der Großansicht ist das Bild groß, die Glühbirne in Kachelgröße ging
   darauf unter. Hier ist sie deshalb doppelt so groß und steht auf einem
   kräftigeren Grund (13. Oktober 2026, Wunsch der Auftraggeberin). */
.lupe--randlos .lupe__merken .merken {
  padding: 14px;
  border-color: rgba(255, 227, 176, 0.55);
  background: rgba(10, 10, 11, 0.82);
}

.lupe--randlos .lupe__merken .merken__licht {
  width: 42px;
  height: 42px;
}

@media (max-width: 1100px) {
  .galerie--referenzen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .galerie--referenzen {
    grid-template-columns: 1fr;
  }

  .galerie--referenzen .project {
    height: 300px;
  }

  /* Steht gleich auch in basis.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .lupe {
    padding: 62px 16px 92px;
  }

  .lupe__blaettern {
    top: auto;
    bottom: 60px;
    transform: none;
    width: 64px;
    height: 80px;
  }

  .lupe__blaettern svg {
    width: 48px;
    height: 48px;
  }

  .lupe__merken {
    right: 16px;
    bottom: 12px;
  }

  /* Hier hat das Fenster wieder einen Rand (62, 16 und 92 Pixel), das Bild
     steht mittig in der Fläche dazwischen. Der Rand kommt zur Rechnung dazu. */
  .lupe--randlos .lupe__merken {
    right: calc(16px + 50cqw - min(100cqw, 100cqh * var(--seite, 1.5)) / 2 + 10px);
    bottom: calc(92px + 50cqh - min(100cqh, 100cqw / var(--seite, 1.5)) / 2 + 10px);
  }

  .lupe--randlos .lupe__merken .merken {
    padding: 11px;
  }

  .lupe--randlos .lupe__merken .merken__licht {
    width: 32px;
    height: 32px;
  }

  /* Unten ist es schmal. Das Wort neben der Gluehbirne faellt deshalb weg,
     vorgelesen wird es weiterhin. */
  .lupe__merken .merken__wort {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Steht gleich auch in anfrage.css, basis.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .lupe__zu,
  .lupe__link,
  .lupe__blaettern {
    transition: none;
  }
}

/* =============================================================================
   32. Fallstudien — die Tiefe vor der Breite

   Auf projekte.html stehen die Fallstudien VOR dem Filter und der Galerie:
   erst drei Projekte ganz, dann 61 Anlagen als Bild.

   BIS ZUM 2. SEPTEMBER 2026 war das der Baustein .case von der Startseite:
   ein Bild links, Fliesstext rechts. Die Auftraggeberin hat drei Dinge
   verlangt, die .case nicht kann — mehrere Bilder je Projekt, die
   Kundenstimme als Kern statt als Beigabe, und keinen langen Text. Daraus
   ist .fall geworden, ein eigener Baustein. .case bleibt unveraendert, er
   traegt weiterhin unternehmen.html.

   Die Bildstrecke ist der eigentliche Inhalt: seit dem 28. September 2026
   nur noch ein grosses Feld (die kleinen Felder darunter hat die
   Auftraggeberin entfernen lassen, "das sieht nicht gut aus"). Frueher: zwei
   kleine darunter. Jedes Feld ist ein Knopf, der die Grossansicht mit genau
   den Bildern dieses Projekts oeffnet — nicht mit denen der Galerie weiter
   unten. Fehlt ein Bild, steht an seiner Stelle ein gestricheltes Feld
   (.bildfehlt) statt eines Ersatzmotivs aus dem Bestand. Ein fremdes Bild
   waere hier eine Behauptung ueber ein Projekt, das anders aussieht.
   ========================================================================== */

/* Seit dem 12. Oktober 2026 hat der Abschnitt keinen eigenen Kopf mehr, die
   erste Fallstudie folgt direkt auf die Seitenueberschrift. Deshalb weniger
   Abstand nach oben (vorher 110 und 70 Pixel). */
.fallstudien {
  padding: 50px 0 0;
}

.fall {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 40px;
  padding: 70px var(--pad);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Liegen zwei Fallstudien direkt untereinander, faellt die doppelte Linie
   dazwischen weg — sonst steht dort ein zwei Pixel breiter Balken. */
.fall + .fall {
  margin-top: 0;
  border-top: 0;
}

/* --- Bildstrecke ---------------------------------------------------------- */

.fall__bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Der Rahmen um das Bild. Er ist seit dem 2. September 2026 dazwischen
   gekommen, weil auf jedem Bild eine Glühbirne sitzen soll: Das Bild selbst
   liegt in einem Knopf, der die Bildstrecke öffnet, und ein Knopf im Knopf
   ist nicht erlaubt. Also trägt der Rahmen den Zuschnitt, der Knopf füllt
   ihn aus, und die Glühbirne sitzt daneben im Rahmen. */
.fall__rahmen {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
}

.fall__rahmen--gross {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

/* Der Knopf traegt kein eigenes Aussehen: sichtbar ist das Bild darin. */
.fall__bild {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
}

.fall__bild img {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fall__bild:hover img {
  transform: scale(1.04);
}

/* --- Textseite ------------------------------------------------------------ */

.fall__titel {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-top: 8px;
}

.fall__art {
  margin-top: 10px;
  font-size: 13px;
  color: var(--mut);
}

/* Der Knopf sieht aus wie ein Textlink, ist aber keiner: er fuehrt auf keine
   Seite, sondern oeffnet die Grossansicht. Ein <a> ohne Ziel waere gelogen. */
.fall__mehr {
  font-family: inherit;
  background: none;
  border-width: 0 0 1px;
  padding: 0 0 7px;
}

/* --- Kopf der weiteren Projekte ------------------------------------------- */

.weitere {
  padding: 110px var(--pad) 0;
}

@media (max-width: 980px) {
  .fall {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 54px var(--pad-sm);
  }
}

@media (max-width: 900px) {
  .fallstudien {
    padding-top: 20px;
  }

  .weitere {
    padding: 70px var(--pad-sm) 0;
  }
}

/* =============================================================================
   41. Zuruf in der Seitenmitte (.cta)

   WOZU ES DEN BAUSTEIN GIBT: Bis zum 2. September 2026 konnte eine Seite den
   Leser nur auf zwei Arten zur Anfrage schicken — mit dem grossen .zuruf, der
   eine ganze Bildschirmbreite fuellt und deshalb hoechstens zweimal je Seite
   ertraeglich ist, oder mit einem .link, den man leicht ueberliest. Dazwischen
   fehlte etwas: ein Angebot, das nach einem ueberzeugenden Abschnitt steht,
   deutlich sichtbar ist und die Seite trotzdem nicht unterbricht.

   Die Auftraggeberin hat am 2. September 2026 verlangt, dass die Anfrage nicht
   erst am Seitenende moeglich ist, sondern nach jedem Argument, das traegt.
   Genau dafuer ist .cta gebaut.

   AUFBAU: ein Satz links, der an den Abschnitt darueber anschliesst, und
   rechts die Handlung. Die Handlung ist immer ein gefuellter Knopf (der
   primaere Weg) und hoechstens ein zurueckhaltender Zweitweg daneben. Mehr
   als zwei Moeglichkeiten waeren keine Entscheidungshilfe mehr, sondern eine
   zweite Navigation.

   DER STRICH LINKS traegt die Lichtfarbe und ist dasselbe Zeichen wie beim
   Zitat: hier spricht die Seite den Leser direkt an, statt weiter zu
   berichten.

   NICHT VERWECHSELN mit .zuruf. Der steht einmal in der Seitenmitte und
   einmal am Ende, ist mittig gesetzt und hat eine eigene Ueberschrift. .cta
   hat keine Ueberschrift und ordnet sich dem Textfluss unter.
   ========================================================================== */

/* Seit 23. Oktober 2026 auf der ganzen Website ohne grauen Kasten und ohne
   Strich links (Wunsch der Auftraggeberin): nur Satz und Knopf. */
.cta {
  margin: 56px var(--pad) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 34px;
}

/* Steht der Zuruf innerhalb eines Abschnitts, der schon Seitenrand mitbringt
   (.split, .section), waere der eigene Rand doppelt. */
.cta--eingerueckt {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 900px) {
  .cta {
    margin: 40px var(--pad-sm) 0;
    /* Auf dem Telefon untereinander: nebeneinander wuerde der Knopf auf eine
       Breite gequetscht, in der seine Beschriftung umbricht. */
    flex-direction: column;
    align-items: flex-start;
  }

  .cta--eingerueckt {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =============================================================================
   BILDER ZOOMEN BEIM SCROLLEN (seit dem 23. Oktober 2026)

   Wunsch von Jürgen Stanek: Bilder, die beim Darüberfahren mit der Maus
   langsam heranzoomen, sollen das auch beim Scrollen tun, kurz, während sie
   durch die Mitte des Bildschirms laufen. Die Klasse .is-im-blick setzt
   js/basis.js ("Bilder im Blick"). Größe und Tempo sind die des
   Darüberfahrens. Die Bildstreifen (.strip) zoomen seither auch beim
   Darüberfahren, wie die übrigen Bilder.
   ========================================================================== */

/* NUR AUF GERÄTEN OHNE MAUS (seit dem 23. Oktober 2026, noch am selben
   Tag). Mit Maus stand das Bild in der Mitte schon herangezoomt, und das
   Darüberfahren zeigte keine Wirkung mehr (Hinweis von Jürgen Stanek: "das
   war vorher besser"). Am Computer zoomt es deshalb wieder nur unter der
   Maus, am Telefon beim Scrollen. */
@media (hover: none) {
  /* Steht gleich auch in basis.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .project.is-im-blick img,
  .fall__bild.is-im-blick img,
  .strip .frame.is-im-blick img {
    transform: scale(1.045);
  }
}

/* Bis zum 23. Oktober 2026 standen hier die Regeln, mit denen die Kacheln auf
   projekte.html unscharf waren und erst beim Anschauen scharf wurden. Am
   selben Tag wieder entfernt (Wunsch von Jürgen Stanek). Der Zoom bleibt. */

@media (prefers-reduced-motion: reduce) {
  /* Steht gleich auch in basis.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .project.is-im-blick img,
  .fall__bild.is-im-blick img,
  .strip .frame.is-im-blick img {
    transform: none;
  }
}


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

/* --- Großansicht: Knöpfe an den Enden --------------------------------------
   Ein Projekt mit nur einem Bild hat keinen linken Knopf (js/projekte.js setzt
   hidden). display: flex von .lupe__blaettern schlüge das Attribut sonst. */
.lupe__blaettern[hidden] {
  display: none;
}

/* --- Projekte: die Leiste klebt auch am Telefon ----------------------------
   Bis zum 23. Oktober 2026 blieb sie dort stehen, weil die Knöpfe in mehrere
   Zeilen umbrachen. Jetzt stehen sie in einer Zeile, die man seitlich wischt;
   klebt die Leiste, entfällt "Finde deine Bauart" darüber. So ist sie nur
   gut 60 Pixel hoch. Der Verlauf am rechten Rand zeigt, dass es weitergeht. */
@media (max-width: 760px) {
  .projektbereich .filter {
    position: sticky;
    top: calc(var(--leiste, 65px) - 1px);
    padding: 10px 0 0;
  }

  .projektbereich .filter .filter__gruppe {
    display: block;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  .projektbereich .filter .filter__name {
    display: block;
    padding: 0 var(--pad-sm);
    margin-bottom: 10px;
  }

  .projektbereich .filter.is-geklebt .filter__name {
    display: none;
  }

  .projektbereich .filter.is-geklebt {
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px -20px #000;
  }

  .projektbereich .filter.is-geklebt .filter__gruppe {
    padding: 10px 0;
    border-top: 0;
    border-bottom: 0;
  }

  .filter__knoepfe {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 var(--pad-sm);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .filter__knoepfe::-webkit-scrollbar {
    display: none;
  }

  .filter__knoepfe .filter__knopf {
    flex: none;
    white-space: nowrap;
    font-size: 11px;
    padding: 8px 13px;
  }
}

/* Die Projekte-Seite hat am Telefon keinen Zurück-Knopf mehr, also braucht
   die klebende Leiste auch keinen Platz für ihn. */
@media (max-width: 900px) {
  body:has(> .rueckweg) .filter.is-geklebt {
    padding-left: var(--pad);
  }
}

@media (max-width: 760px) {
  body:has(> .rueckweg) .projektbereich .filter.is-geklebt {
    padding-left: 0;
  }
}

/* --- Bildstreifen in den Kacheln (Telefon) ---------------------------------
   Siehe js/projekte.js "Bildstreifen in den Kacheln". Der Streifen liegt über
   dem Kachelbild und unter Abdunklung, Beschriftung und Glühbirne. Die
   unsichtbare Klickfläche der Kachel lässt Berührungen durch, damit das
   Wischen beim Streifen ankommt; mit der Tastatur bleibt sie bedienbar. */
.project__streifen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.project__streifen::-webkit-scrollbar {
  display: none;
}

.project__streifen img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  transform: none !important;
}

.project.hat-streifen::after {
  z-index: 2;
}

.project.hat-streifen .ref__lupe {
  pointer-events: none;
}

.project.hat-streifen .project__meta {
  z-index: 3;
  pointer-events: none;
}


/* Kopf ohne Bild (projekte.html): Der Kopf schneidet ab, was über seinen
   Rand ragt, und die Überschrift stand ganz unten. Die Unterlängen (g)
   wurden dadurch abgeschnitten (Hinweis von Jürgen Stanek, 23. Oktober
   2026). Etwas Luft unter der Überschrift behebt das. */
.pagehead--ohne-bild .pagehead__title {
  padding-bottom: 0.18em;
}

/* --- Auswahlseite: ein Satz mit Glühbirne (seit dem 24. Oktober 2026) ------ */
.auswahl__satz {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.15;
  max-width: 20em;
}

.auswahl__satz .wozu__zeichen {
  flex: none;
}

.auswahl__satz .merken__licht {
  width: 1.3em;
  height: 1.3em;
}

/* =============================================================================
   STARTSEITE: ANFRAGE HÄLT, VILEDA NUR MIT LETZTEM SATZ
   (seit dem 24. Oktober 2026 am Handy, noch am selben Tag auch am Computer,
   Wünsche von Jürgen Stanek)
   ========================================================================== */

/* Nachbesserungen vom 24. Oktober 2026 */
.auswahl__satz {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}


/* =============================================================================
   PROJEKTKACHELN: DAS GANZE BILD (seit dem 24. Oktober 2026)

   Hinweis von Jürgen Stanek: Die Bilder waren nicht ordentlich eingepasst.
   Die Kacheln haben ein festes Format, die Fotos nicht: Breite Schriftzüge
   (Studio Lamisse, Felicitas) verloren links und rechts Buchstaben, hohe
   Pylone (Tobsteel, A&S) oben und unten den Kopf. Kein Ausschnitt passt für
   alle.

   Jetzt steht jedes Foto vollständig in seiner Kachel. Was es nicht füllt,
   füllt dasselbe Foto noch einmal, groß, weichgezeichnet und abgedunkelt.
   So gibt es keine schwarzen Balken, und das Bild sieht aus wie eingebettet.
   Die Bildadresse für den Hintergrund setzt js/projekte.js als --hinter
   ("Ganzes Bild in den Projektkacheln"). Ohne Skript bleibt der Grund
   dunkel, das Foto ist trotzdem ganz zu sehen.

   Das Format der Kacheln ist dafür 5 zu 4 am Computer und quadratisch am
   Telefon: dazwischen, wo die meisten Fotos liegen.
   ========================================================================== */
.galerie--referenzen .project {
  isolation: isolate;
  background: #0d0d0f;
}

.galerie--referenzen .project::before,
.streifen__bild::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--hinter, none) center / cover no-repeat;
  filter: blur(26px) brightness(0.42) saturate(1.15);
  pointer-events: none;
}

.galerie--referenzen .project > img,
.streifen__bild img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

.streifen__bild {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}

.streifen__bild img {
  width: 100%;
  height: 100%;
}

/* =============================================================================
   "PROJEKT ANFRAGEN" OHNE KASTEN (seit dem 24. Oktober 2026)

   Wunsch von Jürgen Stanek, überall: Der Aufruf steht frei, ohne Hintergrund
   und ohne Rand- oder Leuchtlinie. Betrifft die Auswahlseite, den Schluss der
   Blogübersicht und das Ende der Blogbeiträge.
   ========================================================================== */
.uebernehmen {
  border: 0;
  background: none;
  padding: 0;
  max-width: none;
  text-align: center;
}

/* =============================================================================
   AUSWAHLSEITE: GLÜHBIRNE OBEN BÜNDIG (seit dem 24. Oktober 2026)
   ========================================================================== */
.auswahl__satz {
  align-items: flex-start;
}

.auswahl__satz .wozu__zeichen {
  margin-top: 0.05em;
}

/* =============================================================================
   DIE GLÜHBIRNE IN DER LEISTE PULSIERT (seit dem 24. Oktober 2026)

   Wunsch von Jürgen Stanek: Die Erklärung der Glühbirne steht nicht mehr
   über den Projektkacheln. Stattdessen fängt die Glühbirne oben in der
   Leiste nach einem Stück Scrollen an, sanft zu pulsieren, bis man sie
   einmal antippt. Dahinter liegt die Auswahlseite, die erklärt, wozu sie da
   ist. Die Klasse setzt js/basis.js ("Glühbirne pulsiert").
   ========================================================================== */

/* Der Hinweis bei leerer Auswahl steht mittig wie der Satz darüber. */
.auswahl__leer {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- Großansicht: X oben rechts am Computer (seit dem 24. Oktober 2026) --- */
.lupe__x-oben {
  display: none;
}

@media (min-width: 901px) {
  .lupe__x-oben {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: rgba(6, 6, 7, 0.62);
    color: #fff;
    cursor: pointer;
    transition: color 0.15s;
  }

  .lupe__x-oben svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  .lupe__x-oben:hover,
  .lupe__x-oben:focus-visible {
    color: var(--glow);
  }
}

/* =============================================================================
   PROJEKTKACHELN AM HANDY: OHNE RAHMEN, HÖHE JE BILD (seit dem 24. Oktober 2026)

   Hinweis von Jürgen Stanek: Der weichgezeichnete Rand um die Bilder gefällt
   am Handy nicht. Jede Kachel bekommt dort stattdessen die Höhe, die zu
   ihrem Bild passt (js/projekte.js setzt --kachel-seite aus dem
   Seitenverhältnis). Das Bild füllt die Kachel ganz. Nur sehr breite und sehr
   hohe Bilder werden begrenzt: Breite verlieren etwas an den Seiten, hohe
   unten. Oben bleibt immer etwas Luft über der Anlage.
   ========================================================================== */
@media (max-width: 700px) {
  .galerie--referenzen .project {
    aspect-ratio: var(--kachel-seite, 1);
    background: none;
  }

  .galerie--referenzen .project::before,
  .streifen__bild::before {
    content: none;
  }

  .galerie--referenzen .project > img,
  .streifen__bild img {
    object-fit: cover !important;
    object-position: 50% 12% !important;
  }
}

/* =============================================================================
   "WANN STANEK NICHT DER RICHTIGE PARTNER IST": RUHIGER (seit dem 24. Oktober
   2026, Wunsch von Jürgen Stanek)

   Vorher stand jede Zeile in einem eigenen Kasten mit rotem Rand und rotem
   Verlauf. Das wirkte zu dominant und passte nicht mehr zum übrigen Design.
   Jetzt liegt die ganze Liste mittig auf einer einzigen, leicht helleren
   Fläche, die Zeilen trennt nur eine feine Linie. Das Nein-Wort bleibt
   unterstrichen.
   ========================================================================== */

/* --- Großansicht: X oben rechts auch am Handy, dezentere Pfeile ------------
   Seit dem 24. Oktober 2026 (Wunsch von Jürgen Stanek): Auch am Handy soll
   man jederzeit herauskommen, deshalb steht das X oben rechts jetzt überall.
   Die Pfeile links und rechts waren "ziemlich knallhart": jetzt halb
   durchsichtig, mit feinerem Strich, und erst beim Darüberfahren hell. */
@media (max-width: 900px) {
  .lupe__x-oben {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }

  .lupe__x-oben svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

.lupe__blaettern {
  color: rgba(255, 255, 255, 0.42);
}

.lupe--randlos .lupe__blaettern {
  background: none;
}

.lupe__blaettern svg {
  stroke-width: 1.6;
  filter: none;
}

.lupe__blaettern:hover,
.lupe__blaettern:focus-visible {
  color: rgba(255, 255, 255, 0.9);
}

.lupe__x-oben {
  background: none;
}

.lupe__x-oben:not(:hover):not(:focus-visible) {
  color: rgba(255, 255, 255, 0.7);
}


/* =============================================================================
   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.
   ========================================================================== */

@media (max-width: 900px) {
  .filter__knopf,
  .filter__knoepfe .filter__knopf {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* Der Abstand über dem Text bleibt gleich (30 Pixel), er liegt jetzt
     nur innerhalb der Trefferfläche statt davor. */
  .link.fall__mehr {
    margin-top: 5px;
    padding-top: 25px;
  }

  /* Kleine Angaben auf den Projektkacheln */
  .project__zahl,
  .project__kind {
    font-size: 11px;
  }
}

/* --- 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, ratgeber.css, termin.css, unternehmen.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;
  }
}


/* Kachelbilder im Format der Kachel (seit dem 24. Oktober 2026): Sie füllen
   die Kachel ganz, ohne weichgezeichneten Rand. Siehe js/projekte.js "Kachelbilder
   am Computer". Bilder ohne eigene Fassung (etwa nach dem Filtern) behalten
   das Einpassen mit Rand. */
.galerie--referenzen .project > img.ist-kachel {
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Auswahlseite am Handy: Der Satz klebte direkt unter der Leiste (Hinweis von
   Jürgen Stanek, 26. Oktober 2026). Die Leiste ist dort knapp 80 px hoch. */
@media (max-width: 760px) {
  .auswahl__kopf {
    padding-top: 136px;
  }
}

/* =============================================================================
   PROJEKTKACHELN WERDEN BEIM ÜBERFAHREN HELLER (seit dem 26. Oktober 2026)
   Wunsch von Jürgen Stanek: Bis dahin wurde der Schleier beim Überfahren
   dunkler (.project:hover::after). Jetzt ist das Bild in Ruhe leicht
   gedämpft und leuchtet beim Überfahren auf, wie eingeschaltet. Der
   Verlauf nach unten bleibt, damit die Beschriftung lesbar ist.
   ========================================================================== */
@media (hover: hover) {
  .project img {
    filter: brightness(0.82);
  }

  .project:hover img,
  .project:focus-within img {
    filter: brightness(1.08);
  }

  .project:hover::after,
  .project:focus-within::after {
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.7));
  }
}