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


/* --- Der Zuruf -------------------------------------------------------------
   EIN HERVORGEHOBENER WEG ZUR PROJEKTANFRAGE, mitten auf der Seite und noch
   einmal am Schluss. Angelegt am 2. September 2026 auf Wunsch der
   Auftraggeberin: Nach der Sieben-Stufen-Geschichte soll "direkt ein Verweis
   folgen, der gut hervorgehoben wird".

   WARUM ER ANDERS AUSSIEHT ALS DER REST DER SEITE: Die Startseite ist bis
   dahin ruhig und dunkel; jeder Verweis darauf ist eine feine Linie
   (.link). Ein Zuruf, der genauso aussieht, ist keiner. Deshalb hat dieser
   Block als einziger einen eigenen Rahmen, einen Lichtschein von oben und
   einen gefuellten Knopf. Er soll beim Vorbeiscrollen auffallen — das ist
   sein ganzer Zweck.

   ER STEHT ZWEIMAL, und das ist Absicht: einmal unmittelbar nach der
   Geschichte, solange sie noch wirkt, und einmal am Seitenende. Ein dritter
   waere einer zu viel.
   -------------------------------------------------------------------------- */

/* Der Zuruf war bis zum 2. September 2026 ein umrandeter Kasten mit
   Lichtschein ueber die ganze Spaltenbreite. Auf Weisung der Auftraggeberin
   ist er ein gewoehnlicher Textabschnitt mit einem Knopf darin: kein
   flaechiger Block, kein eigener Rahmen. Was ihn jetzt vom uebrigen Text
   absetzt, ist Luft, nicht eine Umrandung. */
.zuruf {
  margin: 96px var(--pad) 0;
  padding: 0;
  text-align: center;
}

/* Der Zuruf am Seitenende. Er ist das letzte Element vor der Fusszeile und
   braucht deshalb auch nach unten Luft — sonst klebt der Knopf am
   Fusszeilenstrich. */
.zuruf--schluss {
  margin-bottom: 110px;
}

.zuruf__titel {
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08;
  margin-top: 16px;
}

/* HIER STAND .zuruf__text (2. September 2026 entfernt). Der Zuruf trug einen
   erklaerenden Satz zwischen Ueberschrift und Knopf; beide Vorkommen sind an
   diesem Tag auf Weisung der Auftraggeberin gestrichen worden. Der Abschluss
   der Startseite besteht jetzt aus Ueberschrift und Knopf, sonst nichts. */

.zuruf__aktion {
  margin-top: 30px;
}

/* Der gefuellte Knopf steht nicht mehr hier, sondern unmittelbar hinter
   .button (Abschnitt Formulare). Grund: Beide Regeln sind gleich stark, und
   die spaetere gewinnt. Solange .button--voll VOR .button stand, hat .button
   ihm Fuellung, Schriftfarbe und Rahmen wieder weggenommen — der gefuellte
   Knopf war ueberall nur eine Umrisslinie. */

@media (max-width: 900px) {
  .zuruf {
    margin: 70px var(--pad-sm) 0;
  }

  /* Muss NACH .zuruf stehen: Dort wird margin in der Kurzschreibweise
     gesetzt, die den unteren Abstand sonst wieder auf null zieht. */
  .zuruf--schluss {
    margin-bottom: 70px;
  }
}

/* --- Technische Ausführungen -----------------------------------------------
   Uebernommen von stanek-werbung.de, aber anders dargestellt: dort blaettert
   man mit „Vor | Weiter" durch eine Variante nach der anderen und muss sich
   merken, was zwei Klicks vorher stand. Hier stehen alle nebeneinander und
   lassen sich vergleichen — das ist der eigentliche Zweck einer Profilliste.

   Die Zeichnungen sind technische Unterlagen und werden NICHT eingefaerbt:
   eine Querschnittzeichnung ist eine Auskunft, keine Dekoration. Sie sassen
   dafuer zunaechst auf einer hellen Flaeche — wie ein Datenblatt auf dem
   Tisch. Seit dem 1. September 2026 ist der Grund dunkel; wie das lesbar
   bleibt, steht in Abschnitt 40.
   -------------------------------------------------------------------------- */

/* Der Vorspann ueber den Varianten.

   VORGESCHICHTE, DAMIT IHN NIEMAND VERSEHENTLICH WIEDER ABRAEUMT: Am
   1. September 2026 stand ueber den Karten eine Einleitung im .split-Aufbau
   — eine grosse Ueberschrift und ein bis zwei Absaetze. Sie ist auf Ansage
   entfernt worden ("das ist viel zu viel zum lesen"). Am selben Tag wurde
   ein Vorspann wieder ausdruecklich verlangt, aber ein anderer: kurz, ohne
   Ueberschrift, und mit einer klaren Aufgabe. Er beantwortet drei Fragen und
   sonst nichts — was hier gezeigt wird, warum das wichtig ist, und worin
   sich die Varianten unterscheiden.

   Deshalb hat er keine Ueberschrift und keinen zweispaltigen Aufbau: Beides
   macht aus drei Saetzen wieder einen Abschnitt, den man liest wie ein
   Kapitel. Wer ihn erweitert, prueft vorher, ob der neue Satz eine der drei
   Fragen beantwortet — sonst gehoert er nicht hierher.

   Fachwoerter sind hier zulaessig, aber nur mit Erklaerung im selben Satz
   ("rechts der Querschnitt: die Saeule von oben aufgeschnitten"). Der Leser
   soll die Karten darunter verstehen koennen, ohne etwas nachzuschlagen. */
/* Dieselbe Spalte wie die Karten darunter, damit die Seite eine einzige
   Mittelachse hat (3. September 2026, siehe .technik). */
.vorspann {
  padding: 96px var(--pad) 0;
  max-width: 900px;
  margin-inline: auto;
}

.vorspann p {
  /* 68 Zeichen je Zeile. Breiter wird ein Absatz zur Wand, und der Vorspann
     soll sich in zwei Blicken lesen lassen. */
  max-width: 68ch;
  /* Seit dem 13. Oktober 2026 deutlich größer (Wunsch der Auftraggeberin):
     Es ist nur noch ein Satz, und in Fließtextgröße ging er unter. */
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 200;
  line-height: 1.4;
  color: #e2e2e6;
}

/* Die Karten trugen den Abstand der frueheren Einleitung mit (110 Pixel nach
   oben, siehe .technik). Steht wieder ein Vorspann davor, waere das zweimal
   derselbe Abstand — der Vorspann uebernimmt ihn, die Karten ruecken auf.
   Seit dem 23. Oktober 2026 greift die Regel auf allen drei Variantenseiten:
   Der Aufruf "Projekt anfragen" zwischen Vorspann und Karten ist entfernt,
   die Karten folgen jetzt direkt auf den Vorspann. */
.vorspann + .technik {
  padding-top: 46px;
}

/* EINE SPALTE, MITTIG — Änderung vom 3. September 2026 auf Wunsch der
   Auftraggeberin: "die verschiedenen Optionen sollen visuell untereinander
   dargestellt werden ... achte darauf, dass das Ganze dann mittig ist".

   Vorher standen die Ausfuehrungen zu zweit nebeneinander (EGOLIGHT 1 links,
   EGOLIGHT 1-1 rechts). Wer vergleichen will, springt dabei im Zickzack und
   sieht zwei benachbarte Bauarten nie in derselben Blickachse. Untereinander
   liegen alle Motive auf einer Linie, und der Unterschied von einer Karte zur
   naechsten faellt beim Weiterscrollen von selbst auf.

   Die Spalte ist begrenzt und zentriert. Ohne Begrenzung liefe eine einzelne
   Karte ueber die ganze Bildschirmbreite: Das Bildpaar waere dann sehr breit
   und flach, und die kurzen Angaben darunter stuenden verloren in einer
   ueberlangen Zeile. 900 Pixel abzueglich Seitenrand ergeben eine Karte von
   792 Pixeln, breit genug fuer das Bildpaar und schmal genug fuer den Text.

   DIESELBE BREITE GILT FUER VORSPANN, ZURUF UND DEN GEMEINSAM-BLOCK. Nur wenn
   alle Bloecke derselben Spalte folgen, wirkt die Seite mittig statt wie eine
   zentrierte Karte in einem linksbuendigen Rest. */
.technik {
  display: grid;
  grid-template-columns: 1fr;
  /* 40 statt 20 Pixel seit dem 23. Oktober 2026 (Wunsch der Auftraggeberin):
     Die Varianten sollen deutlicher voneinander abgesetzt sein. Auf dem
     Telefon etwas weniger, siehe unten. */
  gap: 40px;
  max-width: 900px;
  margin-inline: auto;
  /* 110 oben, nicht 60. Bis zum 1. September 2026 stand zwischen Seitenkopf
     und Karten eine Einleitung (`.split`, 110 Pixel Abstand nach oben); die
     ist auf allen drei Loesungsseiten entfernt worden — "das ist viel zu
     viel zum Lesen". Ohne sie stiessen die Karten fast an das Kopfbild.
     Der Wert uebernimmt darum den Abstand, den die Einleitung mitbrachte. */
  padding: 110px var(--pad) 0;
}

.karte {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
}

.karte__text {
  padding: 24px 26px 28px;
  flex: 1;
}

/* SEIT DEM 23. OKTOBER 2026 UMGEDREHT (Wunsch der Auftraggeberin): Die
   Beschreibung steht oben als große Zeile, der Produktname darunter klein.
   Vorher war .karte__name die große h2 (19 Pixel, weiß) und .karte__art ein
   kleiner Absatz darunter (12 Pixel, Lichtfarbe). Jetzt stehen beide als
   span in einer gemeinsamen h2 (.karte__titel) und haben die Gestaltung
   getauscht. Die Klassen behalten ihre Bedeutung, weil basis.js den Namen
   für die Merkliste aus .karte__name liest. */
.karte__titel {
  /* Gegen die große Grundgröße von h2; der Abstand nach oben (20 Pixel aus
     der h2-Regel) bleibt wie vorher. */
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* NOCH AM 23. OKTOBER 2026 ZURÜCKGEDREHT (Wunsch von Jürgen Stanek): Der
   Produktname steht wieder oben groß, die Beschreibung darunter klein in der
   Lichtfarbe. In der h2 steht dazu .karte__name wieder vor .karte__art. */
.karte__name {
  display: block;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
  letter-spacing: 0.04em;
}

.karte__art {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--glow);
  margin-top: 7px;
}

/* Die Angaben je Variante. dl statt Absaetzen, weil es Wertepaare sind —
   Screenreader lesen dann „Ausleuchtung: LED" und nicht zwei lose Zeilen. */
.karte dl {
  margin-top: 20px;
  border-top: 1px solid #24242a;
  font-size: 14px;
}

.karte dt {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
  padding-top: 15px;
}

.karte dd {
  margin: 6px 0 0;
  color: var(--mut);
  line-height: 1.6;
  padding-bottom: 15px;
  border-bottom: 1px solid #24242a;
}

.karte dd:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.karte ul {
  list-style: none;
  margin: 0;
}

.karte li {
  padding-left: 15px;
  position: relative;
}

.karte li + li {
  margin-top: 5px;
}

.karte li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--glow);
}

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

.karte ul.aufbau {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.karte .aufbau li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* Die Angaben in .karte dd stehen einzeilig; hier laufen zwei bis drei
     Zeilen. Etwas mehr Luft dazwischen, sonst verschmelzen die Eintraege. */
  padding-left: 0;
}

.karte .aufbau li + li {
  margin-top: 9px;
}

/* Kein Punkt davor — das Zeichen ist der Kreis. Die allgemeine Regel
   .karte li::before wuerde sonst zusaetzlich einen Mittelpunkt setzen. */
.karte .aufbau li::before {
  content: none;
}

.aufbau__zeichen {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  /* Rueckt den Kreis auf die Mittellinie der ersten Textzeile. Ohne den
     Versatz sitzt er auf der Oberkante und wirkt hochgerutscht. */
  margin-top: 1px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0;
  color: rgba(255,255,255,0.72);
}

.aufbau__wort {
  /* Etwas kleiner als die uebrigen Angaben: Es sind Bauteilnamen, keine
     Aussage ueber das Produkt. Sie sollen lesbar sein, aber die
     Lichtwirkung darueber nicht ueberstimmen. */
  font-size: 13px;
  line-height: 1.6;
}

/* Angaben, die fuer alle Varianten einer Familie gelten — auf der alten Seite
   standen sie bei jeder Variante erneut. */
.gemeinsam {
  padding: 70px var(--pad) 0;
  max-width: 900px;
  margin-inline: auto;
}

.gemeinsam__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
  margin-top: 26px;
  max-width: 900px;
}

.gemeinsam__liste li {
  list-style: none;
  padding: 13px 0 13px 16px;
  border-bottom: 1px solid #24242a;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
  position: relative;
}

.gemeinsam__liste li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--glow);
}

@media (max-width: 900px) {
  .technik,
  .technik--schmal {
    grid-template-columns: 1fr;
    padding: 40px var(--pad-sm) 0;
    /* Telefon: 32 statt 20 Pixel (23. Oktober 2026), etwas weniger als
       die 40 Pixel am großen Bildschirm. */
    gap: 32px;
  }

  .gemeinsam {
    padding: 50px var(--pad-sm) 0;
  }

  .gemeinsam__liste {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   40. Zwei Bilder je Karte — Ansicht und Schnitt

   Bis zum 1. September 2026 trug eine Karte im Loesungsbereich ein einziges
   Bild: ein Katalog-JPEG von 379 x 250 Pixeln, in dem ein roter Namensbalken,
   die Produktansicht und der Querschnitt eingebacken nebeneinander standen.
   Der Hersteller hat die Einzelteile nachgeliefert, und seither ordnet sie
   diese Regel an statt Photoshop.

   DUNKLER GRUND, NICHT MEHR HELL. Der erste Anlauf setzte die Bilder auf
   helle Felder (#ededee und #dededf) — mit dem Gedanken, eine Zeichnung
   brauche Papier. Auf der fast schwarzen Seite wirkten diese Kaesten aber
   wie aufgeklebte Datenblaetter. Ausgewaehlt wurde am 1. September 2026 die
   zurueckhaltendste von drei vorgelegten Stufen: eine weisse Flaeche mit
   6 Prozent Deckkraft ueber dem Seitenhintergrund. Sie hebt sich noch ab,
   ohne ein eigener Kasten zu sein. Das Schnittfeld bleibt etwas dunkler,
   damit die beiden Felder als zwei Dinge lesbar bleiben und nicht als ein
   durchlaufender Streifen.

   MOEGLICH IST DAS ERST, SEIT DIE BILDER FREIGESTELLT SIND. Die Ansichten
   waren JPEG mit untergelegtem hellem Grund — der Grund steckte also im
   Bild. Jeder Farbwechsel und jeder Schatten waere an diesem hellen Rechteck
   haengen geblieben. Seit dem 1. September liefert
   werkzeuge/loesungsbilder-setzen.sh auch die Ansichten als PNG mit
   Transparenz; die Herstellervorlagen waren ohnehin freigestellt.
   ========================================================================== */

.karte__bilder {
  display: flex;
  /* Der Abstand zeigt den Kartenrahmen durch und wird so zur Trennlinie —
     eine echte border waere hier ein zweiter Wert, der zu pflegen waere. */
  gap: 1px;
  background: var(--line);
  /* Feste Hoehe fuer das Paar. Sie ist der Grund, warum beide Felder gleich
     hoch sind und beide Motive gleich gross erscheinen — ohne sie richtet
     sich jedes Feld nach seinem eigenen Bild, und zwei Karten nebeneinander
     stehen auf verschiedenen Kanten. 290 statt der frueheren 232, weil das
     Motiv jetzt rundum Luft hat statt bis an den Rand zu reichen. */
  height: 290px;
}

/* FESTES BREITENVERHAELTNIS 70 ZU 30 — der zweite Teil der Gleichmacherei.

   Vorher nahm sich das Schnittfeld nur die Breite, die seine Zeichnung
   brauchte. Das klingt sparsam, macht aber jede Produktart anders: Der
   Pylonschnitt ist ein 44 Pixel schmaler Streifen, der Leuchtkastenschnitt
   fast quadratisch. Das linke Feld wurde beim Pylon dadurch fast 600 Pixel
   breit und beim Leuchtkasten 480 — dasselbe Motiv sass links in deutlich
   mehr Flaeche als rechts und wirkte darum verloren ("hier ist zu viel
   freier weisser Raum um das Motiv herum", 1. September 2026).

   Mit einem festen Verhaeltnis ist das Ansichtsfeld auf allen drei
   Loesungsseiten gleich breit. Was der schmale Pylonschnitt an Flaeche nicht
   fuellt, steht ihm jetzt als gleichmaessiger Rand zu — das ist die
   ruhigere Loesung als ein Feld, das mit seinem Inhalt mitwaechst. */
.karte__feld {
  position: relative;
  background: rgba(255,255,255,0.06);
  flex: 0 0 70%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Der Schatten unten darf nicht auf das Nachbarfeld und nicht auf den Text
     der Karte laufen. Wie weit er reichen darf, steht bei .karte__feld img. */
  overflow: hidden;
}

.karte__feld--schnitt {
  background: rgba(255,255,255,0.035);
  flex: 0 0 calc(30% - 1px);
}

/* GLEICHE OPTISCHE MOTIVGROESSE — der Kern dieser Regel.

   Vorher war nur die HOEHE der Motive festgelegt (180 Pixel). Das klingt
   nach Gleichbehandlung, ist aber das Gegenteil: Bei gleicher Hoehe haengt
   die Breite am Seitenverhaeltnis, und das reicht hier von 2,45 (das flache,
   breite STANEK-S der Leuchtbuchstaben) bis 1,41 (die hochformatigere
   Pylonecke). Aus 180 Pixeln Hoehe wurden so 441 Pixel Breite beim einen und
   254 beim anderen. Das eine wirkte massiv und dominant, das andere klein
   und verloren — bei exakt gleicher Hoehe.

   Zwei Grenzen loesen das: Das Motiv darf hoechstens 69 Prozent der
   Feldbreite und hoechstens 72 Prozent der Feldhoehe einnehmen; welche
   Grenze zuerst greift, entscheidet die Form des Motivs. Jedes Motiv hat
   danach rundum 14 bis 17 Prozent Luft, egal welches Format es hat, und
   keines wird angeschnitten.

   Prozente und nicht Pixel, damit das Verhaeltnis auch dann stimmt, wenn die
   Karte schmaler wird — sonst waere die Luft auf einem kleinen Bildschirm
   auf einmal die Haelfte des Feldes.

   WIE WEIT DER SCHATTEN REICHEN DARF: Das Feld schneidet ab, was ueber seine
   Kante hinausgeht. Zwischen Motiv und Feldkante liegen im engsten Fall 40
   Pixel — ein hochformatiges Motiv wird auf 72 Prozent von 290 begrenzt,
   macht 209, bleiben 40 oben und unten. Versatz plus Weichzeichnung muessen
   darunter bleiben, sonst bekommt der weiche Schatten eine harte gerade
   Kante. Deshalb 14 + 20 und nicht mehr. */
.karte__feld img {
  position: relative;
  z-index: 1;
  /* Gegen die globale Regel img{width:100%;height:100%;object-fit:cover}:
     eine Zeichnung darf nicht beschnitten werden, sonst fehlt ein Bauteil. */
  width: auto;
  height: auto;
  max-width: 69%;
  max-height: 72%;
  object-fit: contain;
  /* Der Schatten sitzt auf dem BILD, nicht auf dem Feld. Nur so folgt er der
     Form des Objekts; auf dem Feld waere er der Schatten eines Rechtecks,
     und das Motiv saehe aus wie ein aufgeklebtes Foto. Zwei Schatten
     uebereinander: ein weiter fuer den Raum, ein enger direkt an der Kante.
     Bewusst zurueckhaltend — kraeftigere Fassungen sind am 1. September 2026
     vorgelegt und verworfen worden. */
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.55))
          drop-shadow(0 3px 5px rgba(0,0,0,0.45));
}

/* ZEICHNUNGEN OHNE EIGENE FLAECHE. Die Pylonschnitte sind reine Umrisse: ein
   duenner dunkler Strich, alles dazwischen durchsichtig. Auf hellem Grund
   war das lesbar, auf dunklem verschwindet es fast. Umgekehrte Helligkeit
   macht weisse Linien daraus.

   Erlaubt ist das NUR hier, und nur weil diese Zeichnungen einfarbig sind.
   Bei den Aufbauzeichnungen der Leuchtbuchstaben und den Schnitten der
   Leuchtkaesten wuerde dasselbe das STANEK-Rot in Tuerkis verwandeln — die
   bleiben unangetastet, sie bringen ihre hellen, deckenden Flaechen selbst
   mit und sind auf dunklem Grund von sich aus lesbar. */
.karte__feld--umriss img {
  filter: invert(1)
          drop-shadow(0 12px 18px rgba(0,0,0,0.5))
          drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}

/* Die Glühbirne auf den Variantenbildern sitzt oben rechts und nicht wie
   sonst unten: Unten steht über die ganze Breite das Wort "Ansicht" oder
   "Aufbau", und der Knopf legte sich sonst darüber. */
.karte__feld .merken {
  top: 12px;
  right: 12px;
  bottom: auto;
}

/* Seit dem 23. Oktober 2026 kleiner und leiser, ganz in der Ecke (Wunsch
   von Jürgen Stanek: "ein bisschen arg präsent mitten im Bild"). Ist sie
   an, leuchtet sie trotzdem in voller Farbe. */
.karte__feld .merken {
  top: 8px;
  right: 8px;
  padding: 5px;
  border-color: rgba(255, 227, 176, 0.14);
  background: rgba(10, 10, 11, 0.4);
}

.karte__feld .merken .merken__licht {
  width: 15px;
  height: 15px;
}

/* "Schnitt" beziehungsweise "Ansicht" unter dem Bild. Im Katalog stand das
   Wort in einem grauen Balken darueber; unten steht es ruhiger.

   Es liegt UEBER dem Feld statt darunter im Fluss. Vorher nahm es dem Motiv
   Hoehe weg und schob es um elf Pixel nach oben — das Motiv stand damit nie
   wirklich in der Mitte. */
.karte__feldwort {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  z-index: 2;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher rgba(255,255,255,0.42)) */
  margin: 0;
}

/* Auf schmalen Ansichten untereinander: Zwei Felder nebeneinander in einer
   Spalte von 320 Pixeln ergeben zwei unlesbare Briefmarken. Beide Felder
   nehmen dann die volle Breite, und weil die Hoehe je Feld erhalten bleibt,
   stimmt das Verhaeltnis von Motiv zu Rand auch hier. */
@media (max-width: 620px) {
  .karte__bilder { flex-direction: column; height: auto; }
  .karte__feld { height: 260px; flex: 0 0 auto; }
  .karte__feld--schnitt { flex: 0 0 auto; }
}

/* =============================================================================
   Hinweis zur Bedienung der Projektübersicht (seit 12. Oktober 2026)
   Sprechblase, die das Skript (bis Auftrag 043) an die Glühbirne des ersten Projekts setzt,
   sobald es ins Bild kommt. Gleiche Fassung wie die Bestätigung beim Merken
   (.merkruf), aber mit Knopf zum Schließen, weil sie stehen bleibt.

   --blase ist die gewählte Fassung (12. Oktober 2026). --unten ist nur der
   Rückfall, falls gerade kein Projekt zu sehen ist.
   ========================================================================== */

/* Die Glühbirne, auf die die Sprechblase zeigt: dauerhaft sichtbar, und sie
   glimmt ruhig auf und ab, solange der Hinweis steht. */
/* Steht gleich auch in basis.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.merken.wird-gezeigt {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 227, 176, 0.7);
  background: rgba(26, 20, 10, 0.85);
}


/* =============================================================================
   45. Projektraum: visuelle Angleichung an die übrige Website (15.10.2026)

   Dieselbe Formsprache wie die Stufenkette auf full-service.html und die
   Listen im Portalgerüst: Nummern im Kreis, dünne Linien, kleine
   Versal-Beschriftungen, Überschriften in der leichten Schrift. Kästen und
   Rahmen fallen weg, Farbe bleibt dem Stand vorbehalten.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   28. Full Service: Kacheln links, Text rechts (seit dem 20. Oktober 2026)

   Vorgabe von Jürgen Stanek: Die Leistungen stehen als Kacheln auf der
   linken Seite, ein Klick zeigt rechts den Text dazu. Der Kunde wählt selbst,
   was er davon möchte. Die Kacheln sind Reiter (role="tab"), die Texte die
   Felder dazu. Ohne JavaScript bekommt der Block die Klasse .ist-bereit nicht,
   dann stehen alle Texte untereinander, und die Kacheln bleiben eine Liste.
   -------------------------------------------------------------------------- */

.leistungen {
  padding: 96px var(--pad) 0;
}

.leistungen__kopf {
  max-width: 720px;
  margin-bottom: 36px;
}

.leistungen__titel {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: #fff;
}

.leistungen__raster {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

/* Die Kacheln: eine Spalte, Linien dazwischen wie bei der alten Sprungliste. */
.leistungen__kacheln {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.leistungen__kachel {
  font: inherit;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  background: var(--bg);
  color: #b2b2ac;
  border: 0;
  padding: 17px 18px;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, box-shadow 0.25s;
}

.leistungen__kachel:hover,
.leistungen__kachel:focus-visible {
  color: var(--glow);
  background: var(--bg-alt);
}

/* Die gewählte Kachel trägt links einen Streifen in der Lichtfarbe, damit
   man auf einen Blick sieht, wozu der Text rechts gehört. */
.leistungen__kachel[aria-selected="true"] {
  background: #141417;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--glow);
}

.leistungen__nr {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #55554e) */
}

.leistungen__kachel:hover .leistungen__nr,
.leistungen__kachel[aria-selected="true"] .leistungen__nr {
  color: var(--glow);
}

.leistungen__feld[hidden] {
  display: none;
}

.leistungen__name {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: #fff;
}

.leistungen__kurz {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
  margin-top: 10px;
}

.leistungen__text {
  margin-top: 22px;
  max-width: 640px;
}

.leistungen__text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
}

.leistungen__text p + p {
  margin-top: 14px;
}

/* Ohne Skript: alle Felder untereinander, jedes mit einer Linie darüber. */
.leistungen:not(.ist-bereit) .leistungen__feld[hidden] {
  display: block;
}

.leistungen:not(.ist-bereit) .leistungen__feld + .leistungen__feld {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .leistungen {
    padding: 36px var(--pad-sm) 0;
  }

  /* Auf dem Telefon stehen die Kacheln als Raster über dem Text. */
  .leistungen__raster {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 26px;
  }

  .leistungen__kacheln {
    grid-template-columns: repeat(2, 1fr);
  }

  .leistungen__kachel {
    padding: 14px 14px;
    font-size: 13px;
  }
}

/* --- Warum bei STANEK kaufen ---------------------------------------------- */

.warum {
  padding: 56px var(--pad) 0;
}

.warum__raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 36px;
}

.warum__karte {
  background: var(--bg);
  padding: 30px 28px 32px;
}

.warum__name {
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}

.warum__karte p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mut);
}

@media (max-width: 900px) {
  .warum {
    padding: 64px var(--pad-sm) 0;
  }

  .warum__raster {
    grid-template-columns: 1fr;
  }

  .warum__karte {
    padding: 24px 20px 26px;
  }
}

/* Wann STANEK nicht der richtige Partner ist (Full Service, seit dem
   20. Oktober 2026). Zeilen als Kästen mit rotem Rand, das Nein-Wort
   unterstrichen, nach dem Vorbild der Auftraggeberin. */
.nicht {
  padding: 96px var(--pad) 0;
}

.nicht__kopf {
  max-width: 720px;
}

.nicht__titel {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: #fff;
}

.nicht__titel u {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nicht__liste {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 12px;
}

.nicht__zeile {
  padding: 13px 22px;
  border: 1px solid #c0282a;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a0d0e 0%, #140606 100%);
  box-shadow: 0 0 0 1px rgba(192, 40, 42, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mut);
}

.nicht__zeile b {
  color: #fff;
  font-weight: 600;
}

.nicht__zeile u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .nicht {
    padding: 64px var(--pad-sm) 0;
  }

  .nicht__zeile {
    padding: 12px 16px;
    font-size: 15px;
  }
}


/* =============================================================================
   VARIANTEN WECHSELN BEIM SCROLLEN (seit dem 23. Oktober 2026)

   Gehört zu js/loesungen.js, Abschnitt "Varianten wechseln beim Scrollen". Die
   Klasse .technik--wechsel setzt erst das Skript, und nur, wenn jede Karte in
   die Bühne passt. Ohne sie bleibt die Liste von oben.

   Die Höhe von .technik ist die Scrollstrecke: eine Bühne (ein Bildschirm)
   plus 70 Prozent eines Bildschirms je weitere Karte. 70 und nicht 100, damit
   man nicht zu lange auf einer Karte scrollt, die man schon gelesen hat.
   ========================================================================== */
.technik--wechsel {
  display: block;
  max-width: none;
  padding: 60px 0 0;
  height: calc(100vh + (var(--wechsel-anzahl) - 1) * 130vh);
  height: calc(100svh + (var(--wechsel-anzahl) - 1) * 130svh);
}

/* SEIT DEM 23. OKTOBER 2026 130 STATT 70 PROZENT JE KARTE (Wunsch von
   Jürgen Stanek: "viel zu schnell, ich kann mich gar nicht auf eine Sache
   konzentrieren"). Auch der Wechsel selbst ist langsamer (0,9 statt 0,6 s,
   unten bei .karte). */

.wechsel__buehne {
  --wechsel-frei: 0px;
  position: sticky;
  top: var(--wechsel-oben, 0px);
  height: calc(100vh - var(--wechsel-oben, 0px));
  height: calc(100svh - var(--wechsel-oben, 0px));
  overflow: hidden;
}

.technik--wechsel .karte {
  position: absolute;
  left: 50%;
  /* Mitte des Platzes UNTER --wechsel-frei und ÜBER der Fortschrittslinie
     (30 Pixel). --wechsel-frei hält auf schmalen Ansichten den Zurück-Knopf
     frei, der dort oben links über der Bühne liegt. */
  top: calc(var(--wechsel-frei) + (100% - var(--wechsel-frei) - 30px) / 2);
  width: min(1100px, calc(100% - 2 * var(--pad)));
  /* Zwei Spalten: Bilder links, Text rechts. In der Liste standen sie
     untereinander, in der Bühne wäre die Karte dann höher als der Bildschirm. */
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 40px));
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}

/* Schon gezeigte Karten gehen nach oben weg, kommende kommen von unten. So
   läuft die Bewegung beim Zurückscrollen von selbst rückwärts. */
.technik--wechsel .karte.is-vorbei {
  transform: translate(-50%, calc(-50% - 40px));
}

.technik--wechsel .karte.is-current {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.technik--wechsel .karte__bilder {
  height: auto;
  min-height: min(460px, 56vh);
}

.technik--wechsel .karte__text {
  align-self: center;
  padding: 32px 36px;
}

/* Wie weit man in den Varianten ist: eine dünne Linie unten in der Bühne.
   Seit dem 23. Oktober 2026 setzt das Skript sie nicht mehr ein (Wunsch von
   Jürgen Stanek: sieht nicht gut aus). Die Regeln bleiben für den Fall,
   dass sie zurückkommt. */
.wechsel__linie {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: min(1100px, calc(100% - 2 * var(--pad)));
  height: 2px;
  transform: translateX(-50%);
  background: var(--line);
}

.wechsel__linie span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--glow);
}

/* Tablet und Telefon: Bilder oben, Text darunter, beide Bilder nebeneinander
   und niedriger als in der Liste, damit die Karte in den Bildschirm passt. */
@media (max-width: 900px) {
  .technik--wechsel {
    padding-top: 40px;
  }

  /* Bis zum 23. Oktober 2026 hielten hier 64 Pixel den Zurück-Knopf frei.
     Den gibt es auf schmalen Ansichten seitdem nicht mehr. */
  .wechsel__buehne {
    --wechsel-frei: 0px;
  }

  .technik--wechsel .karte {
    grid-template-columns: 1fr;
    width: calc(100% - 2 * var(--pad-sm, 16px));
  }

  .technik--wechsel .karte__bilder {
    flex-direction: row;
    min-height: 0;
    height: 28vh;
    height: 28svh;
  }

  /* Seit dem 23. Oktober 2026 kleinere Motive mit mehr Luft und ein
     breiteres Feld für den Aufbau (Wunsch von Jürgen Stanek: "da ist sehr
     viel hergezoomt"). Vorher 70 zu 30 und die Motive bis an 69 Prozent. */
  .technik--wechsel .karte__feld {
    height: auto;
    flex: 0 0 62%;
  }

  .technik--wechsel .karte__feld--schnitt {
    flex: 0 0 calc(38% - 1px);
  }

  .technik--wechsel .karte__feld img {
    max-width: 62%;
    max-height: 58%;
  }

  .technik--wechsel .karte__text {
    padding: 18px 18px 20px;
  }

  .wechsel__linie {
    bottom: 12px;
    width: calc(100% - 2 * var(--pad-sm, 16px));
  }
}

/* Überschrift als ganzer Satz im Seitenkopf (full-service.html, seit dem
   23. Oktober 2026). In der normalen Größe wuchs der Satz in der schmalen
   Textspalte neben dem Bild über den oberen Rand und wurde abgeschnitten. */
.pagehead__title--satz {
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.12;
}

/* =============================================================================
   BILDWECHSEL IM SEITENKOPF (seit dem 23. Oktober 2026, full-service.html)

   Wie die Diashow im Kopf der Startseite (.hero__dia), mit denselben
   Animationen dia-ein und dia-fahrt. Das Skript steht in js/loesungen.js,
   "Bildwechsel im Seitenkopf". Es legt das neue Bild per z-index nach oben.

   BREIT STEHT DAS BILD ALS SPALTE LINKS NEBEN DEM TITEL, wie auf den anderen
   Seiten mit Kopfbild. Dort entsteht die Spalte, weil die Glühbirne den
   Bildbereich auf position: relative setzt (siehe .pagehead__image weiter
   oben). Hier gibt es keine Glühbirne, deshalb steht die Spalte ausdrücklich
   da: 3 zu 2 wie die Fotos, unten bündig, höchstens 65 Prozent der Breite.
   Schmal (bis 900 px) liegt das Bild wie überall vollflächig hinter dem Titel.
   ========================================================================== */
/* isolation: Die Bilder bekommen vom Skript einen z-index. Ohne eigene Ebene
   würden sie sich damit über den Schleier und auf dem Telefon über den Titel
   legen. */
.kopfwechsel {
  overflow: hidden;
  isolation: isolate;
}

.kopfwechsel__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  --s0: 1.12;
  --s1: 1.02;
  --x0: 0%;
  --x1: 0%;
  --y0: 0%;
  --y1: 0%;
}

.kopfwechsel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* Schmal ist vom Querformat nur ein Streifen zu sehen. --pos-schmal legt ihn
   so, dass der Schriftzug darin steht (wie --pos-schmal auf der Startseite). */
@media (max-width: 900px) {
  .kopfwechsel__bild img {
    object-position: var(--pos-schmal, var(--pos, 50% 50%));
  }
}

/* Jedes Bild fährt anders, wie auf der Startseite. */
.kopfwechsel__bild:nth-child(2) { --s0: 1.12; --s1: 1.12; --x0: -4%; --x1: 4%; }
.kopfwechsel__bild:nth-child(3) { --s0: 1.16; --s1: 1.04; --y0: 3%; }
.kopfwechsel__bild:nth-child(4) { --s0: 1.12; --s1: 1.12; --x0: 4%; --x1: -4%; --y0: 2%; --y1: -2%; }
.kopfwechsel__bild:nth-child(5) { --s0: 1.04; --s1: 1.14; --y1: -3%; }

.kopfwechsel__bild.is-an {
  opacity: 1;
  will-change: transform, filter, opacity;
  animation:
    dia-ein 1.1s cubic-bezier(0.4, 0, 0.2, 1) both,
    dia-fahrt 4.4s linear both;
}

/* Das erste Bild beim Aufruf: kein Einblenden, es steht sofort da und fährt
   nur. Die Fahrt dauert so lange wie Standzeit und Blende zusammen. */
.kopfwechsel__bild.is-erstes {
  animation: dia-fahrt 3.2s linear both;
}

@media (prefers-reduced-motion: reduce) {
  .kopfwechsel__bild.is-an,
  .kopfwechsel__bild.is-erstes {
    animation: none;
  }
}

@media (min-width: 901px) {
  /* Darf schmaler werden (flex-shrink, min-width 0), damit der Titel
     daneben nie über den rechten Rand hinausläuft ("Leuchtbuchstaben"). */
  .pagehead__image--wechsel {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    align-self: flex-end;
    height: calc(100% - 70px);
    aspect-ratio: 3 / 2;
    max-width: 65%;
  }

  /* Der Titel nimmt den Rest, mindestens aber sein längstes Wort. Mit
     width: 100% aus .pagehead__body hätte er dem Bild alles weggenommen. */
  .pagehead__image--wechsel ~ .pagehead__body {
    width: auto;
    flex: 1 1 0;
  }
}


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

/* Auf sehr niedrigen Telefonen (etwa 375 x 667) passten nicht alle
   Variantenkarten in die Bühne, dann fiel die Seite auf die Liste zurück.
   Dort sind die Bilder etwas niedriger. */
@media (max-width: 900px) and (max-height: 700px) {
  .technik--wechsel .karte__bilder {
    height: 22vh;
    height: 22svh;
  }

  .technik--wechsel .karte__text {
    padding: 14px 16px 16px;
  }
}

/* Etwas mehr Fläche zum Antippen für die kleine Glühbirne der Varianten. */
.karte__feld .merken {
  padding: 8px;
}

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

/* --- STANEK-Prinzip am Handy: Bild oben, Text darunter ---------------------
   Seit dem 24. Oktober 2026 (Wunsch von Jürgen Stanek): Die wechselnden
   Bilder lagen am Handy vollflächig hinter dem Titel und waren dadurch stark
   angeschnitten, man sah nur Ausschnitte. Jetzt stehen sie als Band im
   Format 4 zu 3 oben, man sieht die Anlagen wie von etwas weiter weg, und
   der Titel steht darunter statt darüber. */
@media (max-width: 900px) {
  .pagehead.pagehead--bild-oben {
    display: block;
    height: auto;
    min-height: 0;
    padding: var(--leiste, 65px) 0 0;
  }

  .pagehead--bild-oben .kopfwechsel {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
  }

  .pagehead--bild-oben .kopfwechsel__bild img {
    object-position: var(--pos, 50% 50%);
  }

  .pagehead--bild-oben .pagehead__veil {
    display: none;
  }

  .pagehead--bild-oben .pagehead__body {
    position: relative;
    padding: 28px var(--pad-sm) 44px;
  }
}

/* =============================================================================
   STANEK-PRINZIP: RUHIGER ZU LESEN (seit dem 24. Oktober 2026)

   Hinweis von Jürgen Stanek: Am Computer standen die Texte zu dicht
   nebeneinander, es war zu viel auf einmal. Dazu wechselte die Anordnung:
   ein Viererblock, dann linksbündige Abschnitte, am Ende plötzlich mittig.

   Jetzt folgt alles unterhalb des Kopfs einer Linie: Überschriften mittig,
   Inhalt in einer mittigen Spalte. Die vier Punkte stehen untereinander,
   je Zeile links die Überschrift, rechts der Text, mit viel Luft dazwischen.
   So liest man einen Punkt nach dem anderen.
   ========================================================================== */
.warum__raster {
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  max-width: 1000px;
  margin: 0 auto;
}

.warum__karte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px 56px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  background: none;
}

.warum__karte:last-child {
  border-bottom: 1px solid var(--line);
}

.warum__name {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
}

.warum__karte p {
  margin-top: 0;
  max-width: 58ch;
}

/* Weiter zu den Projekten */
.weiter-projekte {
  padding: 110px var(--pad) 0;
  text-align: center;
}

.weiter-projekte__aktion {
  margin-top: 32px;
}

/* Full Service und "nicht der richtige Partner": Überschrift mittig, Inhalt
   in derselben mittigen Spalte wie oben. */
.leistungen,
.nicht {
  padding-top: 110px;
}

.leistungen__kopf,
.nicht__kopf {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.leistungen__raster {
  max-width: 1000px;
  margin: 0 auto;
}

.nicht__liste {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .warum__karte {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }

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

  .leistungen,
  .nicht {
    padding-top: 70px;
  }
}

/* =============================================================================
   "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.
   ========================================================================== */
.nicht__liste {
  max-width: 820px;
  gap: 0;
  padding: 10px 44px;
  background: var(--bg-alt);
  border-radius: 14px;
}

.nicht__zeile {
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

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

.nicht__zeile b {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

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

  .nicht__zeile {
    padding: 18px 0;
  }
}

/* Knopf "Projekt anfragen" in jedem Leistungsfeld (seit dem 24. Oktober 2026) */
.leistungen__aktion {
  margin-top: 26px;
}

/* Auf sehr schmalen Telefonen (320 px) ragten die Leistungskacheln über den
   Rand: Die Spalten dürfen schmaler werden als ihr längstes Wort. */
@media (max-width: 900px) {
  .leistungen__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .leistungen__kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leistungen__kachel {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .leistungen__kachel {
    padding: 12px 10px;
    font-size: 12px;
    grid-template-columns: 26px 1fr;
  }
}

/* Unter den vier Punkten auf dem STANEK-Prinzip steht seit dem 24. Oktober
   2026 nur noch der Knopf "Zu den Projekten". */
.weiter-projekte--knopf {
  padding-top: 80px;
}

.weiter-projekte--knopf .weiter-projekte__aktion {
  margin-top: 0;
}

/* Der Satz im Kopf des STANEK-Prinzips bleibt ein kompakter Block (seit dem
   24. Oktober 2026, Hinweis von Jürgen Stanek): Auf sehr großen Bildschirmen
   zog er sich sonst in drei langen Zeilen weit nach rechts. Höchstens etwa
   zwölf Buchstabenbreiten, dann bricht er in vier bis fünf Zeilen um. */
.pagehead__title--satz {
  max-width: 12em;
}


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

/* --- Trefferflächen am Handy: mindestens 44 Pixel ------------------------ */

/* Die kleine Glühbirne der Varianten bleibt so klein, wie sie aussieht. Die
   Fläche, die auf den Finger reagiert, ist unsichtbar etwas größer. */
.karte__feld .merken::after {
  content: "";
  position: absolute;
  inset: -7px;
}

@media (max-width: 900px) {

  .leistungen__kachel {
    min-height: 44px;
  }
}

/* --- 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, projekte.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;
  }
}