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

/* -----------------------------------------------------------------------------
   1. Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ausgeblendet heißt ausgeblendet.

   Das hidden-Attribut wirkt nur über das Standardblatt des Browsers, und das
   verliert gegen jede eigene display-Angabe, egal wie unscheinbar. .button
   trägt display: inline-block, also stand der Knopf "Anfrage senden" von
   Anfang an unter dem Formular, obwohl das Skript ihn bis zum letzten Schritt
   ausgeblendet hatte. Dasselbe galt für "Zurück" im ersten Schritt.

   Diese eine Regel stellt das für die ganze Website richtig. Sie steht
   absichtlich hier oben und nicht bei den Knöpfen: Der Fehler kann an jedem
   Element auftreten, das gleichzeitig hidden trägt und ein eigenes display
   bekommt. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #0a0a0b;
  --bg-alt: #0e0e10;
  --txt: #f0f0ee;
  --mut: #a8a8a2;
  /* Seit dem 24. Oktober 2026: Farbe für kleine Beschriftungen (Fußzeile,
     Nummern, Feldnamen). Die bisherigen Grautöne (#54544e bis #75756e)
     waren auf dem dunklen Grund zu schwach zum Lesen. Dieser Ton ist noch
     deutlich gedämpft, erreicht aber den nötigen Abstand zum Grund. */
  --mut-klein: #8a8a82;
  --line: #1e1e22;
  --glow: #ffe3b0;

  /* Seitenrand. Einmal definiert, damit Nav, Abschnitte und Fusszeile
     garantiert auf derselben Kante stehen. */
  --pad: 54px;
  --pad-sm: 22px;
}

html {
  scroll-behavior: smooth;
}

/* Sprungziele nicht unter die feste Leiste rutschen lassen. Ohne das landet
   jeder Anker (#ablauf, #anfrage, die Stufen des Full Service) genau unter
   der Navigationsleiste, und die Ueberschrift, auf die man gesprungen ist,
   ist als Erstes nicht zu sehen. Gilt fuer alles mit einer id — die
   Eigenschaft wirkt nur, wenn tatsaechlich dorthin gesprungen wird. */
[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 900px) {
  [id] {
    scroll-margin-top: 76px;
  }
}

/* HAUSSCHRIFT (seit dem 24. Oktober 2026): Archivo, Version 2.001, frei
   unter der SIL Open Font License (vendor/archivo-2.001/OFL.txt). Gewählt
   als kostenlose Schrift, die Trade Gothic, der Schrift von STANEK, am
   nächsten kommt (Wunsch von Jürgen Stanek; Trade Gothic selbst liegt nur
   als Lizenz für den Computer vor und darf nicht auf die Website). Etwas
   schmaler gestellt (font-stretch), dann trifft sie den Charakter von Trade
   Gothic. Die Datei liegt bei uns und wird nicht von einem fremden Dienst
   geladen: Es gehen keine Besucherdaten an Dritte. Auf die lateinischen
   Zeichen gekürzt, rund 90 KB. Eine einzige Datei trägt alle Stärken von
   100 bis 900 und alle Breiten.

   Vorher stand hier nur "Helvetica Neue", und jedes Gerät nahm, was es
   hatte: am iPhone Helvetica, unter Windows meist Arial. */
@font-face {
  font-family: "Archivo";
  src: url("../vendor/archivo-2.001/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-stretch: 93%;
  overflow-x: hidden;
}

/* Alle Bilder fuellen ihren Rahmen. Traegt die Seite: jedes Bild sitzt in
   einem Container mit fester Hoehe, das Motiv wird beschnitten statt verzerrt. */
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
}

/* Leichte Schrift der Ueberschriften — das Erkennungsmerkmal des Entwurfs. */
.display {
  font-weight: 200;
  letter-spacing: 0.012em; /* seit 24.10.2026 etwas weiter, edler (vorher -0.018em) */
  /* Überschriften etwas schmaler als der Text, wie bei Trade Gothic. */
  font-stretch: 90%;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #8a8a82;
}

/* Die kleine Zeile über dem großen Satz ist seit dem 26. Oktober 2026 auf
   den Hauptseiten die eigentliche Überschrift (h1) für Google und KI-Suchen.
   Sie sieht aus wie jede andere Dachzeile; der große Satz ist ein Absatz. */
h1.eyebrow {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
}

/* Tastaturbedienung sichtbar machen. Im Entwurf fehlte das vollstaendig;
   ohne diese Regel ist die Seite mit der Tastatur nicht benutzbar. */
:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   2. Navigation
   Eine Leiste mit sechs Punkten, von denen jeder ein Feld aufklappt. Die
   Punkte sind <button>, nicht <a>: sie fuehren nicht irgendwohin, sondern
   oeffnen etwas. Das entscheidet auch, was Screenreader ansagen und was die
   Leertaste tut.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px var(--pad);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c6c6c8;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
}

/* Wird per JS ab 60 px Scrollweite gesetzt. */
.nav.is-stuck {
  background: rgba(8, 8, 9, 0.86);
  padding: 16px var(--pad);
  border-color: var(--line);
}

/* Die Unschärfe hinter der Leiste sitzt seit dem 23. Oktober 2026 auf einem
   Pseudoelement statt auf .nav selbst. Ein backdrop-filter auf .nav machte
   die Leiste zum Bezugsrahmen für das feste Handy-Menü (position: fixed;
   inset: 0), das dann auf die Höhe der Leiste zusammenfiel. Auf dem
   Pseudoelement wirkt der Effekt gleich, das Menü bezieht sich wieder auf
   den Bildschirm. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.nav.is-stuck::before,
.nav.has-open::before {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Sobald ein Feld offen ist, braucht die Leiste ihren eigenen Grund —
   sonst stuende das Feld unter durchsichtigem Nichts. */
.nav.has-open {
  background: rgba(8, 8, 9, 0.94);
  border-color: var(--line);
}

/* Die echte Wortmarke als Bild — im Entwurf stand hier der gesperrte
   Schriftzug „S T A N E K", der nur so aussah wie ein Logo. */
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Etwas Luft nach oben und unten, damit der Klickbereich nicht auf die
     blosse Bildhoehe zusammenfaellt. */
  padding: 4px 0;
}

.nav__logo img {
  /* Gegen die globale Regel img{width:100%;height:100%}: das Logo behaelt
     sein Seitenverhaeltnis und wird ueber die Hoehe bemessen. */
  width: auto;
  height: 26px;
  object-fit: contain;
  transition: height 0.4s;
}

/* Claim neben dem Logo (seit 8. Oktober 2026, Wunsch der Auftraggeberin).
   Durch eine feine Linie vom Logo getrennt. Auf schmalen Bildschirmen
   ausgeblendet, dort braucht die Leiste den Platz fuer das Menue. */
.nav__claim {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}

@media (max-width: 1360px) {
  .nav__claim {
    display: none;
  }
}

/* Faehrt mit der Leiste zusammen, wenn sie beim Scrollen schmaler wird. */
.nav.is-stuck .nav__logo img {
  height: 22px;
}

.nav__bar {
  display: flex;
  align-items: center;
}

.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav__item {
  position: relative;
}

/* Der aufklappende Punkt. */
.nav__top {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c6c6c8;
  background: none;
  border: 0;
  padding: 8px 0;
  margin-left: 30px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
}

.nav__top:hover,
.nav__top[aria-expanded="true"] {
  color: #fff;
}

/* Unterstrich, der von links nach rechts aufzieht. */
.nav__top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--glow);
  transition: right 0.35s;
}

.nav__top:hover::after,
.nav__top[aria-expanded="true"]::after,
.nav__top.ist-hier::after {
  right: 0;
}

/* Der Menüpunkt der Seite, auf der man gerade ist, behält seinen Unterstrich
   (seit dem 24. Oktober 2026, Wunsch von Jürgen Stanek). Die Klasse setzt
   js/basis.js ("Menüpunkt der aktuellen Seite"). Am Telefon gilt das nicht:
   Dort ist das Menü eine Liste im Vollbild. */
.nav__top.ist-hier {
  color: #fff;
}

/* „Projekte" ist der einzige Punkt ohne Aufklappfeld — ein direkter Link auf
   die Uebersicht. Er sieht aus wie die anderen Punkte und traegt denselben
   aufziehenden Unterstrich; es klappt nur nichts auf. Die Projektarten
   waehlt man auf der Uebersicht im Filter, nicht hier oben. */
.nav__top--link {
  display: inline-block;
  text-decoration: none;
}

/* Der letzte Punkt ist der Aufruf zum Handeln und traegt deshalb einen
   Rahmen — im Entwurf war das ein Link, jetzt klappt auch er auf. */
.nav__item--cta .nav__top {
  border: 1px solid #46463e;
  padding: 10px 20px;
  color: var(--glow);
  transition: 0.3s;
}

.nav__item--cta .nav__top::after {
  display: none;
}

.nav__item--cta .nav__top:hover,
.nav__item--cta .nav__top[aria-expanded="true"] {
  background: var(--glow);
  color: #0a0a0b;
  box-shadow: 0 0 30px rgba(255, 200, 140, 0.35);
}

/* Das aufgeklappte Feld. Sichtbarkeit steuert das Attribut `hidden`, das
   JavaScript setzt — deshalb steht hier bewusst KEIN `display`, das es
   uebersteuern wuerde. */
.nav__panel {
  position: absolute;
  top: calc(100% + 18px);
  left: -22px;
  min-width: 290px;
  background: rgba(10, 10, 12, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-top: 1px solid #3a3a30;
  padding: 14px 26px 18px;
  z-index: 70;
}

/* Das letzte Feld liefe sonst ueber den rechten Rand hinaus. */
.nav__item--cta .nav__panel {
  left: auto;
  right: 0;
}

.nav__panel ul {
  list-style: none;
}

.nav__panel a {
  display: block;
  padding: 11px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: #c6c6c8;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1e;
  transition: color 0.25s, padding-left 0.25s;
}

.nav__panel li:last-child a {
  border-bottom: 0;
}

.nav__panel a:hover {
  color: var(--glow);
  padding-left: 6px;
}

@keyframes dia-ein {
  from { opacity: 0; filter: brightness(1.4); }
  to   { opacity: 1; filter: brightness(1); }
}

@keyframes dia-fahrt {
  from { transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  to   { transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}

/* Textlink im Lichtton, mit Unterkante. */
.link {
  display: inline-block;
  margin-top: 30px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--glow);
  border-bottom: 1px solid #55503f;
  padding-bottom: 7px;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

.link:hover {
  border-color: var(--glow);
  text-shadow: 0 0 18px rgba(255, 200, 140, 0.6);
}

/* -----------------------------------------------------------------------------
   4. Einblenden beim Scrollen
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
   6. Abschnitte
   -------------------------------------------------------------------------- */

.section {
  padding: 120px var(--pad) 0;
}

h2 {
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.04;
  color: #fff;
  margin-top: 20px;
  font-weight: 200;
  letter-spacing: 0.012em; /* seit 24.10.2026 etwas weiter, edler (vorher -0.018em) */
}

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 580px;
  margin-top: 20px;
}

/* Einleitungssatz im Ratgeber: größer und in zwei Zeilen (seit 13. Oktober
   2026), in der Art des Vorspanns der Variantenseiten. */
.lead--gross {
  max-width: none;
  margin-top: 0;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 200;
  line-height: 1.45;
  color: #e2e2e6;
}

/* Kundenstimme MITTEN IM TEXT — die kleine Schwester von .stimme.

   Zwei Groessen fuer zwei Aufgaben: .stimme ist das Schau-Zitat, das allein
   auf weiter Flur steht und in bis zu 29 px auf einen Blick landen muss.
   .zitat steht neben dem, wovon es handelt — einer Fallstudie, einer Stufe im
   Ablauf — und wird gelesen statt ueberflogen. Deshalb Textgroesse; so darf
   dasselbe Zitat auch acht Zeilen lang sein, was in 29 px eine Wand waere.

   Der Strich links macht sichtbar, dass hier jemand anderes spricht als die
   Seite. Er traegt die Lichtfarbe, weil das Zitat der Beleg ist und nicht die
   Behauptung.

   Steht bisher auf projekte.html (Fallstudie Hengst) und full-service.html
   (Stufe 07, Montage). Die Klasse ist bewusst neutral benannt und nicht an
   einen Abschnitt gebunden. */
.zitat {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--glow);
}

.zitat blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
}

.zitat figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #83837c;
}

.zitat figcaption b {
  color: var(--txt);
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   11. Abschluss und Kontakt
   -------------------------------------------------------------------------- */

/* HIER STAND EIN ZWEITER .cta (2. September 2026 entfernt). Er stammte vom
   bildschirmfuellenden Abschlussblock der Startseite — Hintergrundbild,
   Verlauf darueber, min-height 560 px — und der Block selbst ist laengst weg.
   Die Regel nicht: Sie stand VOR dem heutigen .cta weiter unten und hat jeder
   Aufrufzeile der Website ihre 560 px Mindesthoehe mitgegeben. Deshalb wirkten
   die Aufrufe wie ganze Bildschirmseiten statt wie ein Knopf im Text.
   Mit ihr sind .cta__image, .cta__veil und .cta__body entfallen; sie standen
   in keiner Seite mehr. Wer hier etwas zurueckbaut, prueft zuerst, ob er nicht
   dieselbe Mindesthoehe wieder einschleppt. */

/* Kontaktdaten. Im Entwurf zeigte der Abschluss-Link auf den Seitenanfang;
   fuer eine betriebsbereite Seite steht hier, wie man STANEK erreicht. */
.contact {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 34px;
}

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

.contact__value {
  font-size: 17px;
  font-weight: 200;
  color: #e6e6e2;
  margin-top: 8px;
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s;
}

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

.contact__value address {
  font-style: normal;
}

/* --- Anfrageblock ----------------------------------------------------------
   Steht bewusst NACH dem Abschlussbild: erst die Aussage, dann die
   Aufforderung. Wer bis hierher gescrollt ist, hat die Arbeiten gesehen —
   das ist der Moment, in dem eine Anfrage entsteht.

   Zwei Spalten: links, was danach passiert, rechts das Formular. Die linke
   Seite nimmt dem Formular die Unverbindlichkeit — ein Eingabefeld allein
   sagt nicht, was es einbringt.
   -------------------------------------------------------------------------- */

/* Die drei Schritte nach der Anfrage. */
.schritte {
  list-style: none;
  margin-top: 40px;
  border-top: 1px solid #24242a;
  max-width: 520px;
}

.schritte li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid #24242a;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut);
}

.schritte b {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--glow);
  font-weight: normal;
  /* Feste Breite, damit die Texte auf einer Kante stehen und die Ziffern
     nicht je nach Zeilenlaenge wandern. */
  flex: 0 0 22px;
}

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

/* --- Stellenanzeige ---------------------------------------------------------
   Eine Anzeige ist kein Fliesstext: Titel, Aufgabe, Erwartung und der Weg zur
   Bewerbung muessen einzeln erfassbar sein. Deshalb ein abgesetzter Block
   statt eines Absatzes — und keine Tabelle, denn es sind keine Wertepaare.
   -------------------------------------------------------------------------- */

.stelle {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 30px 32px 34px;
  margin-top: 32px;
}

/* Zwei Klassen tief, sonst gewinnt die allgemeine Absatzregel
   von .split__body p ueber die Schriftgroesse. */
.stelle .stelle__marke {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #75756e;
}

.stelle__titel {
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.15;
  margin-top: 7px;
  color: #fff;
}

.stelle .stelle__art {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--glow);
  margin-top: 9px;
}

.stelle__zwischen {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #75756e;
  font-weight: 400;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #24242a;
}

.stelle .stelle__aktion {
  margin-top: 26px;
}

/* Nur der Fliesstext der Anzeige — die beschrifteten Absaetze
   (Marke, Art) bringen ihre eigenen Abstaende mit. */
.stelle > p:not([class]) {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 12px;
}

@media (max-width: 700px) {
  .stelle {
    padding: 24px 22px 28px;
  }
}
/* -----------------------------------------------------------------------------
   12. Fusszeile
   -------------------------------------------------------------------------- */

.footer {
  padding: 56px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px; /* seit 24.10.2026 (vorher 10px) */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #5e5e58) */
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 14px;
}

.footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
  /* Seit dem 24. Oktober 2026 mindestens 44 Pixel hoch, damit man die
     Links am Handy sicher mit dem Finger trifft. Die Schrift bleibt, wo sie
     war; nur die Trefferfläche wächst. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Anschrift in der Fußzeile (seit dem 24. Oktober 2026). <address> setzt
   der Browser sonst kursiv. */
.footer__adresse {
  font-style: normal;
  /* Die Anschrift in normaler Schreibung: In Versalien würde aus dem ß ein
     SS, und eine lange Zeile in Sperrschrift liest sich schlecht. */
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 13px;
}

/* Am Handy stehen die drei Teile der Fußzeile untereinander, am Computer
   in einer Zeile (mit Umbruch, falls es eng wird). */
@media (max-width: 900px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 44px var(--pad-sm);
  }
}

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

/* -----------------------------------------------------------------------------
   13. Rechtstexte (Impressum, Datenschutz, AGB)
   -------------------------------------------------------------------------- */

.legal {
  max-width: 780px;
  padding: 190px var(--pad) 120px;
}

.legal h1:not(.eyebrow),
.legal > p.display {
  margin-bottom: 0.67em;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 200;
  letter-spacing: 0.012em; /* seit 24.10.2026 etwas weiter, edler (vorher -0.018em) */
  color: #fff;
  margin-top: 20px;
}

.legal h2 {
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--glow);
  font-weight: 400;
  margin-top: 52px;
}

.legal p,
.legal address {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 14px;
  font-style: normal;
}

/* Nur Verweise im Fließtext. Bis zum 23. Oktober 2026 stand hier ".legal a"
   ohne Ausnahme. Das traf auch die Knöpfe und die Kontaktangaben auf
   kontakt.html (dort ist main ebenfalls .legal): .legal a ist stärker als
   .button--voll, der gefüllte Knopf bekam helle Schrift auf hellem Grund und
   war leer, der andere Knopf und Telefon und E-Mail waren unterstrichen. */
.legal a:not(.button):not(.contact__value) {
  color: #e6e6e2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:not(.button):not(.contact__value):hover {
  color: var(--glow);
}

/* Dasselbe für die Anschrift in den Kontaktangaben (kontakt.html): Sie
   bekam von ".legal address" Abstand, Größe und Farbe des Fließtexts und
   stand tiefer und grauer als Telefon und E-Mail daneben (seit dem
   23. Oktober 2026 behoben). */
.legal .contact__value address {
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* AGB (agb.html), seit dem 23. Oktober 2026. Die Absatznummern "(1)" stehen
   als Text im HTML und nicht als Zähler aus CSS: Sie gehören zum Wortlaut
   und sollen beim Kopieren mitkommen. Die Liste zeigt sie mit hängendem
   Einzug, damit der Absatztext auf einer Kante bleibt. */
.legal__stand {
  font-size: 14px;
}

.legal .legal__teil {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  font-weight: 300;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legal__absaetze {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal__absaetze li {
  position: relative;
  padding-left: 2.6em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 14px;
}

.legal__nr {
  position: absolute;
  left: 0;
  top: 0;
  color: #e6e6e2;
}

.legal__anschrift {
  margin-top: 64px;
}

.legal__anschrift strong {
  color: #e6e6e2;
  font-weight: 400;
}

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

@media (max-width: 900px) {
  :root {
    --pad: var(--pad-sm);
  }

  .nav {
    padding: 16px var(--pad-sm);
  }

  .section,
  .process,
  .work {
    padding-top: 80px;
  }

  .legal {
    padding-top: 140px;
  }
}

/* Wer Bewegung abbestellt hat, bekommt die Seite ohne Animation — die
   Lichtsequenz schaltet das Skript dann hart auf „an". */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !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.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   16. Navigation auf schmalen Ansichten
   Aus der Leiste wird ein Vollbildmenue, aus den Feldern eine Ziehharmonika.
   Dieselbe Bedienung wie oben — nur untereinander statt nebeneinander.
   -------------------------------------------------------------------------- */

.nav__toggle {
  display: none;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c6c6c8;
  background: none;
  border: 1px solid #2c2c33;
  padding: 9px 13px;
  margin-left: 14px;
  cursor: pointer;
}

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

@media (max-width: 900px) {
  /* DREI STRICHE STATT DES WORTES "MENÜ" (seit dem 23. Oktober 2026,
     Wunsch von Jürgen Stanek: "wie man es normal macht", ganz rechts
     außen). Das Wort bleibt im Knopf stehen, nur in Schriftgröße 0: So
     liest ein Bildschirmleser weiter "Menü" bzw. "Schließen" vor (das
     Skript tauscht es aus). Die Striche zeichnen ::before (oberer, per
     Schatten auch der mittlere) und ::after (unterer). Offen werden sie
     zum X. Die Fläche ist 44 Pixel groß, damit der Daumen sie sicher
     trifft; der negative Rand rückt die Striche bündig an den Seitenrand. */
  .nav__toggle {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-right: -11px;
    border: 0;
    font-size: 0;
    letter-spacing: 0;
    color: transparent;
  }

  .nav__toggle::before,
  .nav__toggle::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    background: #e6e6e8;
    transition: transform 0.3s ease, top 0.3s ease, box-shadow 0.2s ease;
  }

  .nav__toggle::before {
    top: 14px;
    box-shadow: 0 7px 0 #e6e6e8;
  }

  .nav__toggle::after {
    top: 28px;
  }

  .nav__toggle[aria-expanded="true"]::before {
    top: 21px;
    box-shadow: none;
    transform: rotate(45deg);
  }

  .nav__toggle[aria-expanded="true"]::after {
    top: 21px;
    transform: rotate(-45deg);
  }

  .nav__toggle:hover::before,
  .nav__toggle:hover::after {
    background: #fff;
  }

  /* Logo und Schalter muessen ueber dem Vollbildmenue liegen. Das Menue ist
     `position: fixed; inset: 0` und deckte sonst genau die Leiste mit zu —
     der Schliessen-Schalter waere dann zwar sichtbar, aber nicht mehr
     anklickbar, und man kaeme aus dem offenen Menue nicht wieder heraus.
     Der obere Innenabstand des Menues (88 px) haelt die Eintraege frei. */
  .nav__logo,
  .nav__toggle {
    position: relative;
    z-index: 80;
  }

  .nav__logo img {
    height: 20px;
  }

  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* Oben Platz fuer die Leiste, unten fuer den Daumen. Die Liste kann
       laenger als der Bildschirm werden — deshalb scrollt sie selbst. */
    padding: 88px var(--pad-sm) 60px;
    overflow-y: auto;
    background: rgba(8, 8, 9, 0.98);
    backdrop-filter: blur(14px);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .nav__links.is-open {
    transform: none;
  }

  .nav__item {
    border-bottom: 1px solid var(--line);
  }

  .nav__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding: 20px 0;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-align: left;
  }

  /* Plus und Minus statt des aufziehenden Unterstrichs. */
  .nav__top::after {
    content: "+";
    position: static;
    height: auto;
    background: none;
    color: var(--glow);
    font-size: 16px;
    line-height: 1;
  }

  .nav__top[aria-expanded="true"]::after {
    content: "–";
  }

  /* Der Link hat kein Feld, also auch kein Plus zum Aufklappen. */
  .nav__top--link::after {
    content: "";
  }

  .nav__item--cta {
    border-bottom: 0;
    margin-top: 18px;
  }

  .nav__item--cta .nav__top {
    justify-content: space-between;
  }

  .nav__item--cta .nav__top::after {
    display: block;
  }

  /* Das Feld haengt jetzt im Fluss unter seinem Punkt. */
  .nav__panel {
    position: static;
    min-width: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-left: 1px solid #2a2a30;
    padding: 0 0 14px 18px;
  }

  .nav__panel a {
    font-size: 14px;
    padding: 12px 0;
  }
}
/* -----------------------------------------------------------------------------
   17. Projektseiten
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  height: min(78vh, 660px);
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.pagehead__image {
  position: absolute;
  inset: 0;
}

/* Kopfbild auf Telefon und Tablet (seit dem 23. Oktober 2026).
   js/basis.js setzt auf den Bildbereich die Klasse .hat-merken für die
   Glühbirne, und deren position: relative (Abschnitt 33) gewinnt gegen die
   Regel oben (gleich stark, später notiert). Der Bildbereich steht dann
   nicht mehr hinter dem Titel, sondern als Spalte daneben.

   Breit ist daraus die geteilte Ansicht geworden: Bild links, Titel rechts
   auf Schwarz. Die ist seit Wochen der gewohnte Stand und bleibt so.
   Schmaler geht sie nicht mehr auf: Auf dem Tablet lag über dem Bild ein
   breiter schwarzer Streifen, auf dem Telefon schrumpfte das Bild zu einem
   kleinen Rechteck unten links. Deshalb gilt bis 900 px Breite (die übliche
   Grenze dieser Seite, ab der auch das Menü zusammenklappt) wieder, was
   .pagehead__image vorsieht: das Bild vollflächig hinter
   dem Schleier und dem Titel. Zwei Klassen, damit .hat-merken nicht
   gewinnt. Ab 901 px hat die Titelspalte auf allen Seiten genug Platz
   (geprüft mit den längsten Wörtern, z. B. "Leuchtbuchstaben").
   Die Glühbirne bleibt im Bildbereich und liegt über dem Titel (z-index 4
   gegen 3), sie ist also weiter erreichbar. Damit eine lange letzte
   Titelzeile ("Pylone & Werbestelen") nicht unter ihr verschwindet, rückt
   der Titel schmal um ihre Höhe nach oben. */
@media (max-width: 900px) {
  .pagehead__image.hat-merken {
    position: absolute;
    inset: 0;
  }

  .pagehead__image.hat-merken ~ .pagehead__body {
    padding-bottom: 88px;
  }
}

.pagehead__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 4, 5, 0.72) 0%,
    rgba(4, 4, 5, 0.25) 45%,
    rgba(4, 4, 5, 0.92) 100%
  );
}

.pagehead__body {
  position: relative;
  z-index: 3;
  padding: 0 var(--pad) 64px;
  width: 100%;
}

.pagehead__title {
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.02;
  color: #fff;
  margin-top: 18px;
}

/* Zweispaltiger Textteil: links die Ueberschrift, rechts der Text. */
.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  padding: 110px var(--pad) 0;
  align-items: start;
}

.split__body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 640px;
}

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

/* Text und Anfrageknopf nebeneinander (Seite Qualität, seit 13. Oktober
   2026). Wird es eng, rutscht der Knopf unter den Text. */
.split__body--knopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 56px;
}

.split__body--knopf .split__text {
  flex: 1 1 380px;
  max-width: 640px;
}

@media (min-width: 1101px) {
  .split--knopf {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }
}

.split__body--knopf .split__aktion {
  flex: none;
  margin: 0;
}

/* Ein Absatz mit dem Anfrageknopf rechts daneben (Ratgeber, letzter
   Abschnitt, seit 13. Oktober 2026). Wird es eng, rutscht der Knopf unter
   den Text. */
.text-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-top: 26px;
}

.text-knopf > p {
  margin: 0;
}

.text-knopf__aktion {
  flex: none;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 70px;
  }
}

/* Bildstrecke */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 70px var(--pad) 0;
}

.strip figure {
  margin: 0;
}

.strip .frame {
  height: 260px;
  overflow: hidden;
}

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

  .strip .frame {
    height: 170px;
  }
}

/* Abstand am Seitenende. Bis zum 13. Oktober 2026 stand hier die Leiste zum
   Vor- und Zurückblättern und brachte den Abstand zum Fuß mit. Sie ist auf
   allen Seiten entfernt, der Abstand bleibt. Seiten, die mit dem
   Abschluss-Zuruf enden, haben ihn schon. */
main:has(> :is(.split, .cta, .uebernehmen, .strip, .builder, .stimme-schluss):last-child) {
  padding-bottom: 110px;
}

.button {
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--glow);
  background: none;
  border: 1px solid #46463e;
  /* 15 px oben und unten ergeben mit der Zeilenhoehe rund 50 px Gesamthoehe —
     die uebliche Knopfhoehe. Seitlich 24 px: breiter wuerde der Knopf zur
     Flaeche, schmaler verliert er die Fassung. */
  padding: 15px 24px;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
}

/* NUR MIT MAUS (seit dem 24. Oktober 2026). Am Handy blieb der Knopf beim
   ersten Antippen farbig stehen, und erst ein zweites Antippen führte weiter
   (Hinweis von Jürgen Stanek). Ohne Maus gibt es deshalb keinen
   Darüberfahr-Zustand, und das Telefon wartet nicht erst auf einen zweiten
   Tipp (touch-action). */
.button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .button:hover {
    background: var(--glow);
    color: #0a0a0b;
    box-shadow: 0 0 30px rgba(255, 200, 140, 0.35);
  }
}

/* Der gefuellte Knopf. Der gewoehnliche .button ist eine Umrisslinie und
   ordnet sich der Seite unter — hier soll er das gerade nicht. Er traegt den
   Hauptweg des Abschnitts; steht ein zweiter Knopf daneben, bleibt der eine
   Umrisslinie. MUSS NACH .button STEHEN, sonst nimmt .button ihm die
   Fuellung wieder weg. */
.button--voll {
  background: var(--glow);
  color: #0a0a0b;
  border-color: var(--glow);
}

@media (hover: hover) {
  .button--voll:hover {
    background: #fff;
    border-color: #fff;
    color: #0a0a0b;
    box-shadow: 0 0 40px rgba(255, 200, 140, 0.45);
  }
}

/* Sichtbarer Fokus fuer die Tastatur. Der Umriss liegt aussen, damit er auch
   auf dem gefuellten Knopf zu sehen ist. */
.button:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Bis zum 23. Oktober 2026 zog der Knopf auf dem Telefon über die volle
   Breite. Jürgen Stanek fand das zu breit ("macht ja keinen Sinn"). Seither
   bleibt er so breit wie sein Text, mit etwas mehr Fläche zum Antippen
   (mindestens 48 px hoch). */
@media (max-width: 620px) {
  .button {
    display: inline-block;
    width: auto;
    max-width: 100%;
    text-align: center;
    padding: 16px 22px;
  }
}

/* -----------------------------------------------------------------------------
   24. Merkliste — Gluehbirne, Zaehler, Auswahlseite

   Das Haus baut Licht. Etwas zu merken heisst hier darum: es anschalten.
   Die Gluehbirne ist aus, solange das Projekt nicht gemerkt ist, und geht
   an, sobald es gemerkt ist — mit demselben warmen Ton, den die ganze Seite
   fuer Licht verwendet.

   Bewusst kein Herz und keine rote Zahl: das ist die Sprache sozialer Netze
   und traegt dort die Bedeutung "gefaellt mir oeffentlich". Gemeint ist aber
   "das lege ich mir zurueck" — eine stille, private Geste.
   -------------------------------------------------------------------------- */

.merken {
  /* Auf der Kachel liegt oben rechts schon "Mit meinem Logo" und oben links
     kann die Stimmen-Marke stehen. Unten rechts ist frei — und die untere
     Haelfte ist ohnehin abgedunkelt, das Zeichen steht dort ruhig. */
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;

  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(255, 227, 176, 0.28);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(6px);
  color: var(--glow);
  cursor: pointer;
  font: inherit;

  /* Am Zeigergeraet erst beim Hinsehen — wie "Mit meinem Logo". Sonst liegt
     auf jeder Kachel dauerhaft ein Bedienelement und nimmt dem Bild die Ruhe. */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s, border-color 0.3s, background 0.3s;
}

/* SICHTBAR WIRD DIE GLUEHBIRNE BEIM HINSEHEN. Die Galeriekachel war lange
   der einzige Ort mit einem Knopf, deshalb stand hier nur .project. Seit die
   Gluehbirne im August 2026 auf jedes Inhaltsbild wanderte, war sie ueberall
   sonst dauerhaft durchsichtig: gebaut, anklickbar, im Menue mitgezaehlt,
   aber am Bildschirm nicht zu sehen. Aufgefallen ist das am 3. September
   2026 an den Variantenkarten.

   .hat-merken setzt das Skript auf jeden Bildbehaelter, dem es einen Knopf
   gibt — Kopfbild, Bildstreifen, Variantenkarte, Fallstudie, Story-Rahmen.
   Eine Regel fuer alle also, und ein kuenftiger Bildbaustein bekommt die
   Sichtbarkeit von selbst mit, sobald er in der Liste in js/basis.js steht. */
.project:hover .merken,
.project:focus-within .merken,
.hat-merken:hover .merken,
.hat-merken:focus-within .merken,
.merken:focus-visible {
  opacity: 1;
  transform: none;
}

/* Ein gemerktes Projekt bleibt sichtbar markiert, auch wenn der Zeiger
   woanders ist. Sonst waere nach dem Klick nicht mehr zu sehen, was man
   gemerkt hat — und man klickte es ein zweites Mal wieder aus. */
.merken[aria-pressed="true"] {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 227, 176, 0.62);
  background: rgba(26, 20, 10, 0.82);
}

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

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

/* --- Das Zeichen ---------------------------------------------------------- */

.merken__licht {
  width: 21px;
  height: 21px;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Aus: kuehl und zurueckhaltend, nicht schwarz — das Zeichen soll lesbar
   bleiben, ohne zu leuchten. */
.merken__glas {
  fill: transparent;
  transition: fill 0.45s, stroke 0.45s;
}

.merken__faden {
  opacity: 0.45;
  transition: opacity 0.45s, stroke 0.45s;
}

.merken__sockel {
  opacity: 0.7;
}

/* Die Strahlen gehoeren zum eingeschalteten Zustand. Ausgeschaltet sind sie
   nicht nur unsichtbar, sondern auch eingezogen — so entsteht beim Anschalten
   eine Bewegung nach aussen statt eines blossen Einblendens. */
.merken__strahlen {
  opacity: 0;
  transform: scale(0.55);
  transform-origin: 12px 12px;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.merken[aria-pressed="true"] .merken__glas,
.nav__merk.ist-an .merken__glas {
  fill: rgba(255, 205, 130, 0.3);
}

.merken[aria-pressed="true"] .merken__faden,
.nav__merk.ist-an .merken__faden {
  opacity: 1;
  stroke: #fff2d8;
}

.merken[aria-pressed="true"] .merken__strahlen,
.nav__merk.ist-an .merken__strahlen {
  opacity: 0.9;
  transform: none;
}

.merken[aria-pressed="true"] .merken__licht,
.nav__merk.ist-an .merken__licht {
  filter: drop-shadow(0 0 7px rgba(255, 198, 120, 0.75));
}

/* Der Moment des Anschaltens: ein kurzes Aufflackern, wie bei einer Roehre,
   die zuendet. Einmal, nicht dauernd — ein pulsendes Zeichen auf einer
   Bildkachel waere Kirmes. Die Klasse setzt das Skript nur beim echten
   Wechsel und nimmt sie beim Ausschalten wieder weg. */
.merken.ist-angegangen .merken__licht {
  animation: merken-zuenden 0.62s ease-out;
}

@keyframes merken-zuenden {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255, 198, 120, 0)); }
  22%  { transform: scale(1.22); filter: drop-shadow(0 0 16px rgba(255, 214, 150, 0.95)); }
  38%  { transform: scale(1.02); filter: drop-shadow(0 0 4px rgba(255, 198, 120, 0.5)); }
  55%  { transform: scale(1.1);  filter: drop-shadow(0 0 13px rgba(255, 214, 150, 0.85)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 7px rgba(255, 198, 120, 0.75)); }
}

/* --- Ohne Zeigergeraet ---------------------------------------------------- */

/* Am Telefon gibt es kein Hinsehen. Eine Schaltflaeche, die erst bei Hover
   erscheint, waere dort schlicht nicht vorhanden — sie steht deshalb
   dauerhaft da und ist groesser, damit sie sich mit dem Daumen treffen
   laesst, ohne die Kachel zu oeffnen. */
@media (hover: none) {
  .merken {
    opacity: 1;
    transform: none;
    padding: 11px;
  }

  .merken__licht {
    width: 23px;
    height: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .merken,
  .merken__glas,
  .merken__faden,
  .merken__strahlen {
    transition: none;
  }

  .merken.ist-angegangen .merken__licht {
    animation: none;
  }
}

/* --- Gluehbirne und Zahl im Menue ----------------------------------------- */

/* Der Menuepunkt ist dasselbe Zeichen wie auf den Kacheln. Wer ein Bild
   anschaltet, sieht hier oben dieselbe Lampe angehen — das verbindet die
   beiden Orte, ohne dass ein Wort es erklaeren muss.

   Deshalb steht hier auch keine rote Blase mit weisser Ziffer: das ist die
   Form einer Benachrichtigung ("etwas verlangt deine Aufmerksamkeit"). Die
   Zahl hier sagt etwas anderes — "so viele hast du dir zurueckgelegt" — und
   traegt darum dieselbe ruhige Lichtfarbe wie die Lampe selbst. */
.nav__merk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav__merk .merken__licht {
  width: 19px;
  height: 19px;
}

/* Solange nichts gemerkt ist, ist die Lampe aus und der Punkt so
   zurueckhaltend wie die uebrigen. */
.nav__merk:hover .merken__licht {
  color: #fff;
}

/* Das Wort ist der Rueckfall ohne JavaScript. Sobald das Skript die Lampe
   eingesetzt hat, traegt das Zeichen die Bedeutung — dann waere das Wort
   daneben doppelt. Vorgelesen wird weiterhin der volle Text: er steht als
   aria-label am Punkt und nennt zusaetzlich die Anzahl. */
.nav__merk.ist-bereit .nav__merkwort {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav__zahl {
  color: var(--glow);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.nav__zahl[hidden] {
  display: none;
}

/* Im Vollbildmenue steht das Wort wieder da: die Punkte sind dort eine
   Liste aus Zeilen, und eine Zeile, in der nur ein Zeichen steht, waere
   zwischen fuenf beschrifteten Zeilen das eine Raetsel. */
@media (max-width: 900px) {
  .nav__merk.ist-bereit .nav__merkwort {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .nav__merk {
    justify-content: flex-start;
    gap: 12px;
  }

  .nav__merk .merken__licht {
    width: 22px;
    height: 22px;
  }

  .nav__zahl {
    font-size: 14px;
  }
}

/* --- Die drei Wege -------------------------------------------------------- */

/* Am Ende einer langen Seite steht der Leser an einer von drei Stellen: mit
   einem Vorhaben, mit einer bestehenden Anlage, oder unentschieden. Ein
   einziger Aufruf traefe zwei davon nicht. */
/* HIER STANDEN .wege UND .weg (2. September 2026 entfernt). Drei grosse
   anklickbare Karten nebeneinander, auf full-service.html und kontakt.html.
   Die Auftraggeberin hat entschieden, dass ein Aufruf ein Knopf im Text ist
   und keine Kachel. An ihre Stelle ist .knopfreihe getreten; der Text, den
   die Karten trugen, steht jetzt als Absatz darueber. */

/* Mehrere Knoepfe nebeneinander. Der erste ist gefuellt und traegt den
   Hauptweg, die uebrigen bleiben Umrisslinie — sonst waeren es drei
   Hauptwege und damit keiner. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin-top: 26px;
}

/* -----------------------------------------------------------------------------
   28. Rueckweg

   Ein Knopf oben links, direkt unter der Leiste, der dorthin zurueckfuehrt,
   wo der Besucher herkam. Schwebend, damit er auch nach langem Scrollen
   erreichbar bleibt.

   Er liegt bewusst LINKS: Zurueck ist links — der Knopf des Browsers, die
   Wischgeste am Telefon, die Leserichtung. Rechts oben sitzt ausserdem auf
   schmalen Ansichten der Menue-Schalter und auf breiten der Knopf
   "Projektanfrage"; darunter waere es eng.

   Der Abstand von oben richtet sich nach der Leiste. Deren Hoehe ist nicht
   fest — auf der Startseite steht sie zunaechst gross ueber dem Hero und
   schrumpft beim Scrollen. Das Skript misst sie und reicht sie als
   --leiste weiter; der Wert hier ist nur der Rueckfall.

   Eingesetzt wird er vom Skript, und nur dann, wenn es eine Vorgaengerseite
   gibt — im Markup steht er darum nirgends.
   -------------------------------------------------------------------------- */

.rueckweg {
  position: fixed;
  left: 16px;
  top: calc(var(--leiste, 68px) + 16px);
  z-index: 85;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 12px;

  font: inherit;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c6c6c8;

  background: rgba(10, 10, 12, 0.86);
  border: 1px solid #2f2f36;
  backdrop-filter: blur(10px);
  cursor: pointer;

  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

/* Beim Hinsehen geht er an — dieselbe Geste wie ueberall sonst auf der
   Seite. Kein Farbwechsel des Grundes: der Knopf liegt ueber Fotos, und ein
   heller Grund waere dort ein Loch im Bild. */
.rueckweg:hover {
  color: #fff;
  border-color: var(--glow);
  background: rgba(10, 10, 12, 0.95);
}

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

.rueckweg__pfeil {
  width: 15px;
  height: 15px;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s;
}

/* Der Pfeil ruecht beim Hinsehen nach links — die Richtung, in die er
   fuehrt. Dieselbe Bewegung wie bei den Wegweisern auf Full Service, nur
   spiegelverkehrt. */
.rueckweg:hover .rueckweg__pfeil {
  transform: translateX(-3px);
  stroke: var(--glow);
}

/* Auf schmalen Ansichten nur das Zeichen. Das Wort kostet dort ein Drittel
   der Bildschirmbreite, und ein Pfeil nach links ist die eine Geste, die
   ohne Beschriftung verstanden wird. Vorgelesen wird weiterhin der volle
   Text — er steht als aria-label am Knopf. */
@media (max-width: 620px) {
  .rueckweg {
    padding: 12px;
    gap: 0;
  }

  .rueckweg__wort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rueckweg__pfeil {
    width: 17px;
    height: 17px;
  }

}

/* Seit dem 23. Oktober 2026: Solange das Handy-Menü offen ist, tritt der
   Knopf zurück. Er liegt über der Leiste und hätte sonst den ersten
   Menüpunkt verdeckt. Die Klasse setzt das Skript (setzeMenue). */
body.menue-offen .rueckweg {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rueckweg,
  .rueckweg__pfeil {
    transition: none;
  }

  .rueckweg:hover .rueckweg__pfeil {
    transform: none;
  }
}


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

/* --- Grossansicht ---------------------------------------------------------
   Bewusst ohne <dialog>: die Seite muss auch in aelteren Browsern die Bilder
   zeigen koennen, und die Grossansicht ist der einzige Ort, an dem showModal
   gebraucht wuerde. Ein schlichtes Overlay mit hidden kostet nichts.
   -------------------------------------------------------------------------- */

.lupe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 76px 84px 88px;
  background: rgba(6, 6, 7, 0.97);
  /* Macht die freie Flaeche messbar (cqw, cqh) fuer .lupe__bild. */
  container-type: size;
}

.lupe[hidden] {
  display: none;
}

/* DAS BILD FUELLT DEN BILDSCHIRM, SO WEIT ES GEHT (2. Oktober 2026). Vorher
   wurde es nur verkleinert, nie vergroessert: Auf einem grossen Bildschirm
   blieb ein 1600 Pixel breites Foto mit breitem schwarzem Rand stehen.

   Die Breite ist das Kleinere aus der freien Breite und der Breite, die das
   Bild bei voller freier Hoehe haette. --seite ist das Seitenverhaeltnis des
   gerade gezeigten Bildes, das Skript setzt es (Abschnitt 20). Die Hoehe
   folgt dem Bild, also wird nichts verzerrt.

   Die erste Breitenangabe ist der Rueckfall fuer Browser, die die
   Flaechenmasse nicht kennen: Dort bleibt es beim alten Verhalten. */
.lupe__bild {
  width: auto;
  width: min(100cqw, 100cqh * var(--seite, 1.5));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lupe__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 84px 22px;
  text-align: center;
  font-size: 13px;
  color: var(--mut);
  background: linear-gradient(transparent, rgba(6, 6, 7, 0.92) 45%);
}

@media (max-width: 700px) {

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

  .lupe__info {
    padding: 14px 22px 18px;
  }

  /* Auch hier bleibt die Gluehbirne unten rechts wie auf der Kachel. Die
     Beschriftung laesst rechts Platz fuer sie, die Blaetterpfeile stehen
     darueber. */
  .lupe__info {
    padding-right: 72px;
  }
}

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


/* =============================================================================
   33. „Gefaellt mir" auf allen Bildern — Bezugsrahmen und Rueckmeldung

   Die Gluehbirne selbst ist in Abschnitt 24 beschrieben; hier steht nur, was
   dazukam, als sie im August 2026 von den Galeriekacheln auf jedes
   Inhaltsbild wanderte.
   ========================================================================== */

/* Der Knopf sitzt absolut — sein Bezugsrahmen muss stehen. Das Skript setzt
   diese Klasse auf jeden Bildbehaelter, den es mit einer Gluehbirne
   versieht; sie tut nichts weiter. */
.hat-merken {
  position: relative;
}

/* Auf einem bildschirmbreiten Kopfbild sitzt die Gluehbirne weiter innen —
   in der Ecke waere sie am Rand der Aufnahme und damit fast im Nichts. */
.pagehead__image.hat-merken .merken {
  right: 26px;
  bottom: 26px;
}

/* --- Bestaetigung -----------------------------------------------------------
   Unten mittig, schmal, ohne Knopf zum Wegklicken: sie geht von selbst.
   Wer zehn Bilder hintereinander merkt, soll nichts wegklicken muessen.
   -------------------------------------------------------------------------- */

/* Haengt an der Gluehbirne in der Leiste. top und right setzt das Skript
   beim Anzeigen aus der gemessenen Lage des Punktes (Abschnitt 23); die
   Werte hier sind nur der Rueckfall, falls kein Punkt gefunden wird. */
.merkruf {
  position: fixed;
  top: 84px;
  right: 22px;
  z-index: 300;

  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 44px));

  padding: 13px 20px;
  border: 1px solid rgba(255, 227, 176, 0.3);
  border-radius: 2px;
  background: rgba(14, 14, 16, 0.93);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);

  font-size: 13px;
  line-height: 1.5;
  color: var(--txt);

  /* Ruhezustand: unsichtbar, ein Stueck weiter oben — sie faellt also aus der
     Gluehbirne heraus statt von unten hereinzuschieben. pointer-events: none
     ist wichtig: sonst laege ein unsichtbarer Streifen unter der Leiste und
     finge Klicks ab. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.merkruf.ist-da {
  opacity: 1;
  transform: translateY(0);
}

/* Der Lichtpunkt davor — dieselbe Farbe wie die Gluehbirne, damit ohne ein
   Wort klar ist, wovon die Meldung spricht. */
.merkruf::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px rgba(255, 227, 176, 0.9);
}

@media (max-width: 700px) {
  .merkruf {
    max-width: calc(100vw - 32px);
    font-size: 12.5px;
    padding: 11px 16px;
  }
}

/* Wer Bewegung reduziert haben will, bekommt sie eingeblendet statt
   herausfallend. Die Auskunft bleibt dieselbe. */
@media (prefers-reduced-motion: reduce) {
  .merkruf {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .merkruf.ist-da {
    transform: none;
  }
}

/* --- Aufleuchten der Gluehbirne in der Leiste --------------------------------
   Beim Merken blitzt sie kurz auf: der Blick geht damit dorthin, wo das
   Gemerkte spaeter zu finden ist. Dieselbe Animation wie auf der Kachel
   (merken-zuenden, Abschnitt 24) — aber ein eigener Selektor, weil die
   Leisten-Birne an einem <a class="nav__merk"> haengt und nicht an einem
   <button class="merken">. Ohne diese Regel passierte in der Leiste nichts.
   -------------------------------------------------------------------------- */

/* Groesser als auf der Kachel, aber ruhig: auf das Doppelte, langsam.

   WARUM UEBERHAUPT GROESSER: Auf der Kachel steht die Gluehbirne unter dem
   Finger, dort genuegt ein Flackern. Die Leiste ist beim Klicken oft am
   anderen Ende des Bildschirms — ein Aufflackern von 19 auf 23 Pixel sieht
   dort niemand. 19 auf 38 Pixel reicht, um den Blick zu holen.

   WARUM LANGSAM: Ein schneller Sprung wirkt wie eine Warnung. Bei 1,6
   Sekunden mit weichem Anlauf und langem Ausklang liest es sich als
   Bestaetigung — man SIEHT es, ohne dass es einen anspringt. Der grosse
   Zustand steht nur kurz; die meiste Zeit geht fuer das ruhige Anwachsen
   und Zurueckgehen drauf.

   Der leichte Ruecksetzer bei 48 Prozent ist Absicht: einmal kurz nachlassen
   und wieder aufflammen, wie bei einer Roehre, die zuendet. Er ist bewusst
   klein gehalten — bei einem grossen Ausschlag flackerte es unruhig.

   transform veraendert kein Layout: die Menuepunkte daneben bleiben stehen. */
.nav__merk.ist-angegangen .merken__licht {
  animation: nav-merk-blitz 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* Der Schein soll ueber den Nachbarpunkten liegen, nicht unter ihnen. */
  position: relative;
  z-index: 2;
}

@keyframes nav-merk-blitz {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 214, 150, 0));
  }
  26% {
    transform: scale(2);
    filter: drop-shadow(0 0 16px rgba(255, 228, 180, 0.95))
            drop-shadow(0 0 30px rgba(255, 198, 120, 0.4));
  }
  48% {
    transform: scale(1.86);
    filter: drop-shadow(0 0 10px rgba(255, 214, 150, 0.7));
  }
  62% {
    transform: scale(1.96);
    filter: drop-shadow(0 0 15px rgba(255, 228, 180, 0.9))
            drop-shadow(0 0 28px rgba(255, 198, 120, 0.38));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 7px rgba(255, 198, 120, 0.75));
  }
}

/* Waehrend des Blitzes leuchtet das Glas voll, unabhaengig davon, ob die
   Lampe vorher schon "an" war — sonst blitzte beim ersten gemerkten Bild
   eine dunkle Birne auf. */
.nav__merk.ist-angegangen .merken__glas {
  fill: rgba(255, 226, 170, 0.55);
}

.nav__merk.ist-angegangen .merken__faden {
  opacity: 1;
  stroke: #fff;
}

.nav__merk.ist-angegangen .merken__strahlen {
  opacity: 1;
  transform: none;
}

/* Wer Bewegung reduziert haben will, bekommt kein Wachsen — aber sehr wohl
   eine Rueckmeldung: das Zeichen leuchtet auf, es springt nur nicht. */
@media (prefers-reduced-motion: reduce) {
  .nav__merk.ist-angegangen .merken__licht {
    animation: nav-merk-leuchten 1.6s ease-in-out;
  }

  @keyframes nav-merk-leuchten {
    0%   { filter: drop-shadow(0 0 0 rgba(255, 214, 150, 0)); }
    30%  { filter: drop-shadow(0 0 16px rgba(255, 228, 180, 0.95)); }
    100% { filter: drop-shadow(0 0 7px rgba(255, 198, 120, 0.75)); }
  }
}

/* =============================================================================
   38. Fuenfzehn Minuten — der dreiseitige Terminweg

   Gehoert zu termin.html, termin-kontakt.html und termin-buchen.html. Der
   Weg beginnt im Menue unter "Projektanfrage → Beratungstermin
   vereinbaren" und an der dritten Karte am Ende von full-service.html.

   WARUM EIGENE FELDER (.feld-hell) UND NICHT .field AUS ABSCHNITT 18:
   Ausdrueckliche Vorgabe — die Eingabefelder dieses Weges sollen heller und
   freundlicher sein als die uebrigen Formulare der Website. Der Unterschied
   ist absichtlich und besteht aus drei Dingen:

     1. Heller Grund. .field steht auf rgba(255,255,255,0.03) und
        verschwindet fast im Seitenhintergrund; hier sind es 0.07 mit einem
        helleren Rahmen. Das Feld sieht aus wie etwas, in das man schreibt.
     2. Lesbare Beschriftung. .field beschriftet in 9 px Grossbuchstaben mit
        0.3em Sperrung — praezise, aber unwirsch. Hier steht ein normaler
        Satz in normaler Groesse.
     3. Runde Ecken und mehr Luft. Der Rest der Website ist kantig; an dieser
        einen Stelle ist das gewollt gebrochen.

   Die uebrigen Formulare bleiben unveraendert. Wer diesen Stil dort auch
   haben will, aendert nicht .field, sondern vergibt .feld-hell zusaetzlich —
   sonst kippt das Erscheinungsbild der ganzen Website mit einer Regel.

   MITTIG: Der ganze Weg steht in einer schmalen Spalte in der Seitenmitte.
   Wer einen Termin bucht, soll nichts anderes sehen — dieselbe Ueberlegung
   wie beim Anmeldekasten (.reg__kasten, Abschnitt 35).

   NICHT ZENTRIERT IST DER TEXT IN DEN FELDERN SELBST: Beschriftungen und
   Ueberschriften stehen mittig, die Eingabe steht links. Eine mittig
   laufende E-Mail-Adresse springt bei jedem Zeichen um eine halbe Breite —
   das liest sich beim Tippen wie ein Fehler.
   ========================================================================== */

/* Sichtbar nur fuer Screenreader.

   Gebraucht fuer Ueberschriften, die im Dokument stehen muessen, aber im
   Bild nichts verloren haben — auf termin.html etwa, wo die sichtbare
   Ueberschrift entfallen ist. Eine Seite ohne <h1> hat fuer jemanden, der
   sich per Ueberschriftenliste bewegt, keinen Anfang.

   Nicht display:none und nicht visibility:hidden — beides nimmt das Element
   auch aus der Vorlesereihenfolge. Ein Punkt bleibt stehen, damit die Zeile
   im Textfluss existiert. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 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.
   ========================================================================== */

.cta__aktion {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
}

/* -----------------------------------------------------------------------------
   Ausrichtung nebeneinanderstehender Ueberschriften und Texte (8. Oktober 2026).
   h2 bringt allgemein 20px Abstand nach oben mit. Steht die Ueberschrift in
   einer Spalte NEBEN dem Text (Zweispalter, Stufen im Full Service), rutscht
   sie dadurch unter die erste Textzeile. Hier beginnen beide auf einer Hoehe.
   -------------------------------------------------------------------------- */
.split > h2,
.stufe__titel {
  margin-top: 0;
}

/* Menuepunkte nie umbrechen ("Full Service", "Know-how"): seit der Claim
   neben dem Logo steht, wird es in der Leiste enger. */
.nav__top {
  white-space: nowrap;
}

/* =============================================================================
   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 loesungen.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);
}

.merken.wird-gezeigt .merken__glas {
  fill: rgba(255, 205, 130, 0.3);
}

.merken.wird-gezeigt .merken__faden {
  opacity: 1;
  stroke: #fff2d8;
}

.merken.wird-gezeigt .merken__strahlen {
  opacity: 0.9;
  transform: none;
}

.merken.wird-gezeigt .merken__licht {
  animation: hinweis-glimmen 1.8s ease-in-out infinite;
}

@keyframes hinweis-glimmen {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 198, 120, 0.45)); }
  50%      { filter: drop-shadow(0 0 15px rgba(255, 214, 150, 0.95)); }
}

@media (prefers-reduced-motion: reduce) {

  .merken.wird-gezeigt .merken__licht {
    animation: none;
    filter: drop-shadow(0 0 9px rgba(255, 214, 150, 0.8));
  }
}

/* =============================================================================
   Blog (seit 13. Oktober 2026)

   Übersicht: Karten mit Bild, Thema, Titel, Kurztext und "Weiterlesen", drei
   in einer Reihe. Beitrag: eine Lesespalte. Vorbild für den Aufbau ist die
   Blogseite von Rexago, die Gestaltung bleibt die der übrigen Seiten.
   ========================================================================== */

/* Beitragsseite */
.pagehead__title--beitrag {
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.08;
  max-width: 18ch;
}

.lesetext {
  max-width: calc(760px + 2 * var(--pad));
  margin: 0 auto;
  padding: 90px var(--pad) 110px;
}

.lesetext > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mut);
}

.lesetext > p + p {
  margin-top: 16px;
}

.lesetext > p:first-child {
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 200;
  line-height: 1.5;
  color: #e2e2e6;
}

.lesetext h2 {
  margin-top: 46px;
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.lesetext__ende {
  margin-top: 60px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.lesetext__ende .link {
  margin-top: 0;
}

@media (max-width: 900px) {
  /* Steht gleich auch in blog.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .beitraege,
  .blog-schluss,
  .lesetext {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }

  .lesetext {
    padding-top: 60px;
  }
}


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

/* -----------------------------------------------------------------------------
   29. Das Logo zündet mit dem Licht (seit dem 20. Oktober 2026)

   Nur auf der Startseite: Dort steht der body ohne .is-lit, bis das Hero-Bild
   geflackert hat. Solange ist das Logo gedimmt, dann flackert es im selben
   Takt mit (Skript, Teil 1) und glüht kurz in seinem Rot nach. Alle anderen
   Seiten tragen .is-lit von Anfang an, dort passiert nichts.
   -------------------------------------------------------------------------- */

body:not(.is-lit) .nav__logo img {
  opacity: 0.18;
  filter: brightness(0.7);
}

.nav__logo img {
  transition: height 0.4s, opacity 0.12s linear, filter 0.3s;
}

/* Das Nachglühen ist kurz und zurückhaltend, damit es nicht gegen das
   Bild darunter anleuchtet: dasselbe Anlaufen, nur kleiner. */
.nav__logo img.ist-gezuendet {
  animation: logo-nachgluehen 1.1s ease-out both;
}

@keyframes logo-nachgluehen {
  0%   { filter: brightness(1.35) drop-shadow(0 0 8px rgba(236, 56, 42, 0.8)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(236, 56, 42, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo img.ist-gezuendet {
    animation: none;
  }
}

/* =============================================================================
   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.
   ========================================================================== */
.strip .frame img {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

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

/* --- Kein Zurück-Pfeil auf schmalen Ansichten ------------------------------
   Oben rechts steht das Menü, von dort kommt man überall hin ("dieser Pfeil,
   der muss da weg"). Am Computer bleibt der Knopf "Zurück". */
@media (max-width: 900px) {
  .rueckweg {
    display: none;
  }
}

/* --- Glühbirne in der Kopfleiste -------------------------------------------
   Am Telefon steht die Glühbirne der Merkliste jetzt immer sichtbar neben den
   drei Strichen, mit der Zahl der gemerkten Bilder. Ein Tipp führt zur
   Auswahl. Das Skript setzt sie ein (Abschnitt Navigation, .nav__merk--leiste).
   Am Computer steht dieselbe Glühbirne ohnehin in der Leiste. */
.nav__merk--leiste {
  display: none;
}

@media (max-width: 900px) {
  .nav__merk.nav__merk--leiste {
    width: auto;
    border: 0;
    position: relative;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 8px;
    margin-left: auto;
    color: #c6c6c8;
    text-decoration: none;
  }

  .nav__merk--leiste .merken__licht {
    width: 21px;
    height: 21px;
  }

  .nav__merk.nav__merk--leiste .nav__merkwort,
  .nav__merk.nav__merk--leiste.ist-bereit .nav__merkwort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav__merk--leiste .nav__zahl {
    font-size: 13px;
  }

  /* Im offenen Menü steht die Glühbirne ohnehin als Zeile. */
  body.menue-offen .nav__merk--leiste {
    visibility: hidden;
  }
}

/* --- Telefonnummer als Knopf (seit dem 23. Oktober 2026) -------------------
   Wunsch von Jürgen Stanek: Man soll sehen, dass man auf die Nummer tippen
   kann und das Telefon dann gleich wählt. Ein Rahmen wie bei den übrigen
   Knöpfen, davor ein Hörer. Steht auf unternehmen.html und am Ende von
   ratgeber.html. */
.telknopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 13px 20px 13px 16px;
  border: 1px solid #46463e;
  color: #e6e6e2;
  font-size: 17px;
  font-weight: 200;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.telknopf svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--glow);
}

.telknopf:hover,
.telknopf:focus-visible {
  color: #fff;
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.06);
}


/* --- Verweise im Text der Blogbeiträge (seit dem 23. Oktober 2026) --------
   .link ist der Verweis im Stil eines Knopfes; Verweise mitten im Satz
   stehen in Lichtfarbe und unterstrichen. Fette Einstiege nicht zu schwer. */
.lesetext a:not(.link):not(.button) {
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.lesetext__ende {
  border-top: 0;
  padding-top: 0;
}

/* =============================================================================
   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").
   ========================================================================== */
.nav__merk.pulsiert .merken__licht {
  animation: birne-puls 2.2s ease-in-out infinite;
}

@keyframes birne-puls {
  0%, 100% {
    color: inherit;
    filter: none;
    transform: scale(1);
  }
  50% {
    color: var(--glow);
    filter: drop-shadow(0 0 7px rgba(255, 200, 130, 0.9));
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__merk.pulsiert .merken__licht {
    animation: none;
    color: var(--glow);
  }
}

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

/* Lange zusammengesetzte Wörter in Überschriften (etwa in den AGB) brechen
   auf schmalen Bildschirmen um, statt über den Rand zu ragen. */
h1, h2, h3 {
  overflow-wrap: break-word;
}

.legal h2,
.legal h3 {
  hyphens: auto;
}


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

/* Kopfbild am Handy: Dort liegt der Text auf dem Foto, die gedämpfte
   Dachzeile ging im Bild unter. */
@media (max-width: 900px) {
  .pagehead:not(.pagehead--ohne-bild):not(.pagehead--bild-oben) .eyebrow {
    color: var(--txt);
  }
}

/* Lange Zeilen in den Beiträgen sind schwer zu lesen. */
.lesetext > p {
  max-width: 68ch;
}

@media (max-width: 900px) {

  a.contact__value {
    padding: 10px 0;
    margin-top: -2px;
  }

  .nav__merk.nav__merk--leiste {
    min-width: 44px;
    justify-content: center;
  }
}

/* --- 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, blog.css, loesungen.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;
  }
}


/* Verfasser und Datum unter der Überschrift der Blogbeiträge (seit dem
   24. Oktober 2026). */
.beitrag__autor {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut-klein);
}

/* =============================================================================
   EIN STRICH, DER IM MENÜ MITWANDERT (seit dem 27. Oktober 2026)
   Siehe js/basis.js. Am Computer ersetzt .nav__strich die einzelnen
   Unterstriche der Punkte. Er liegt unten in der Menüleiste und gleitet mit.
   ========================================================================== */
@media (min-width: 901px) {
  .nav__links.hat-strich {
    position: relative;
  }

  .nav__links.hat-strich .nav__top::after {
    display: none;
  }

  .nav__strich {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 1px;
    background: var(--glow);
    transform-origin: center;
    transform: scaleX(0);
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.38s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
}

@media (max-width: 900px) {
  .nav__strich {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__strich {
    transition: none;
  }
}

/* =============================================================================
   Einwilligung für Leadbeat (seit dem 9. November 2026, Auftrag 042)

   Schmale Leiste am unteren Rand, im Ton der Seite. Ablehnen und Zustimmen
   sehen gleich aus (gewöhnlicher .button): Keine Wahl wird hervorgehoben.
   Baustein resources/views/partials/consent-banner.blade.php.
   ========================================================================== */

.zustimmung {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  background: var(--bg-alt);
  border: 1px solid #2a2a2e;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

.zustimmung[hidden] {
  display: none;
}

.zustimmung__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut);
}

.zustimmung__text a {
  color: inherit;
  text-decoration: underline;
}

.zustimmung__wahl {
  display: flex;
  gap: 10px;
  margin: 0;
}

@media (max-width: 600px) {
  .zustimmung {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 16px;
  }

  .zustimmung__wahl,
  .zustimmung__wahl .button {
    flex: 1 1 0;
    text-align: center;
  }
}

/* Der Knopf "Datenschutz-Einstellungen" im Fuß sieht aus wie die Links dort. */
.footer__knopf {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  min-height: 44px;
  transition: color 0.3s;
}

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