/* ==========================================================================
   Wurstvogel Werkstätte — Aussehen der Website
   --------------------------------------------------------------------------
   Diese Datei bestimmt, WIE die Seite aussieht. Was auf ihr steht, steht in
   der index.html. Wenn dir eine Farbe, ein Abstand oder eine Größe nicht
   gefällt, wird hier geändert — nicht in der index.html.

   Stand: 15.10.2026 — VORLÄUFIGE ONLINE-FASSUNG: Menü ausgeblendet (Schalter
   „leiste--ohne-menue", Abschnitt 4a-3), Fußbereich als Bild (Abschnitt 6),
   Testleiste des Prototyps entfernt (der frühere Abschnitt 7). Stand davor:
   5_Archiv/website-2026-10-15-vor-vorlaeufig-online/.
   Davor 09.10.2026, spät abends — die schwarze Leiste ist weg: Logo und
   Menü stehen schwarz direkt auf dem Seitengrund, beim Überfahren mit der
   Maus werden sie violett. Davor am selben Tag: Leiste 6 px höher, Menü
   rechts (am Handy als Burger-Menü).
   Version 5 (08.10.2026): feste schwarze Leiste oben, Kopf aus drei
   Ebenen, die beim Scrollen unterschiedlich schnell laufen (rotes W,
   schwarzer Schriftzug, Wurstvogel), darunter vier rahmenlose Kacheln mit
   aufgelegtem Rahmen. Die Versionen 1 bis 4 liegen in 5_Archiv/.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1  STELLSCHRAUBEN
   Alles, was du am ehesten ändern willst, an einer Stelle. Was du hier
   änderst, wirkt überall dort, wo der Wert verwendet wird.
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --farbe-hintergrund:  #f5f5f5;   /* 4 % Schwarz (Stefan, 09.10.2026, spät abends). Davor am selben Tag:
                                      3 % = #f7f7f7, 5 % = #f2f2f2, 7 % Violett #6000b8 auf Weiß = #f4edfa,
                                      7 % Schwarz = #ededed, ganz zu Anfang #ffffff */

  /* VIER SCHALTER FÜR DEN GRAUEN GRUND (09.10.2026) — zusammen mit der Zeile
     darüber. Zurück zum Stand davor (weiße Seite, durchsichtige Kacheln mit
     violettem Rahmen): die vier Werte auf die „vorher"-Angabe stellen.
     Der komplette Stand davor liegt außerdem in
     5_Archiv/website-v5-menue-2026-10-09/.

     --kachel-grund     die Fläche jeder Kachel. Sie liegt UNTER dem
                        Wurstvogel: Der Vogel bleibt auf den Kacheln sichtbar,
                        das Grau der Seite nicht.
     --kachel-schleier  eine zweite weiße Fläche je Kachel, ÜBER dem Vogel
                        und unter der Schrift — sie hellt den Vogel auf den
                        Kacheln auf. Der Wert ist ihre Deckkraft:
                        0 = kein Schleier (Vogel in voller Farbe),
                        0.5 = halb durchsichtig, 1 = Vogel auf den Kacheln
                        ganz verdeckt.
     --rahmen-sichtbar  der violette Rahmen der Schrift-Kacheln: 1 = zu sehen,
                        0 = ausgeblendet. */
  --kachel-grund:       #ffffff;   /* vorher: transparent */
  --kachel-schleier:    0.5;       /* vorher: 0 */
  --rahmen-sichtbar:    0;         /* vorher: 1 */
  --farbe-text:         #111111;
  --farbe-akzent:       #5B10D6;   /* das Violett aus den Kenner-Kacheln */
  --farbe-leise:        #767676;   /* für Nebensächliches im Fußbereich */

  /* LOGO UND MENÜ OBEN (Stefan, 09.10.2026, spät abends): Die schwarze
     Leiste ist verschwunden, Logo und Menüwörter stehen schwarz direkt auf
     dem Seitengrund und werden violett, wenn die Maus darüber steht.
       --leiste-grund    die Fläche hinter Logo und Menü. transparent =
                         keine Leiste. Vorher: #000 (die schwarze Leiste).
       --leiste-schrift  Farbe von Logo, Menüwörtern und Burger. Vorher #fff.
       --leiste-hover    Farbe beim Überfahren mit der Maus (Stefan: #6000b8 —
                         ein anderes Violett als --farbe-akzent der Kacheln).
     Die Bilddateien bleiben weiß; ein Farbfilter färbt sie in der Farbe
     von hier ein (Abschnitt 4a). Das aufgeklappte
     Handy-Menü nimmt --farbe-hintergrund als Grund (vorher schwarz). */
  --leiste-grund:       transparent;
  --leiste-schrift:     #000000;
  --leiste-hover:       #6000b8;

  /* Maße */
  --seite-max:          1600px;    /* wie breit die Seite höchstens wird */
  --rand:               clamp(16px, 4vw, 56px);    /* Abstand zum Fensterrand */
  --kachel-abstand:     clamp(12px, 2.5vw, 32px);  /* Lücke zwischen Kacheln */

  /* Die schwarze Leiste oben. Ihr GRUNDMASS: in der Vorlage 26 px bei 800 px
     Seitenbreite, also 3,25 % der Breite („vw" = Prozent der Fensterbreite).
     Nach unten auf 30 px begrenzt, nach oben auf 52 px. Nach dem Grundmaß
     richten sich Logo, Menüwörter und Burger — sie wachsen mit dem Fenster.

     Die HÖHE der Leiste ist das Grundmaß plus eine feste Zugabe oben und
     unten (Stefan, 09.10.2026: je 3 px, zusammen 6). Das Logo wird dadurch
     nicht größer, es bekommt nur mehr Luft.
       --leiste-zugabe: 0px  = Leiste wie vor dem 09.10.2026 */
  --leiste-grundmass: clamp(30px, 3.25vw, 52px);
  --leiste-zugabe:    3px;
  --leiste-hoehe:     calc(var(--leiste-grundmass) + 2 * var(--leiste-zugabe));

  /* Das Menü in der Leiste (Rechner): Abstand zwischen den Menüpunkten.
     In referenzbild balken1.png 2,4 % der Fensterbreite — er schrumpft mit
     dem Fenster und wächst ab 1600 px Breite nicht weiter (wie die Leiste). */
  --menue-abstand: min(2.4vw, 38.4px);

  /* Die Menüwörter in der Leiste sitzen tiefer als die senkrechte Mitte:
     um --menue-tiefer-max bei voller Größe der Leiste (ab 1600 px
     Fensterbreite; Stefan, 09.10.2026: 5 px). Wird die Leiste kleiner,
     schrumpft der Versatz im gleichen Verhältnis mit — bei 1000 px
     Fensterbreite sind es rund 3 px. Hier nur die erste Zahl ändern;
     0 = genau mittig. Gilt nicht für das aufgeklappte Handy-Menü. */
  --menue-tiefer-max: 5;
  --menue-tiefer: calc(var(--leiste-grundmass) * var(--menue-tiefer-max) / 52);

  /* Das Logo („wurstvogel typefaces" samt rundem Emblem) sitzt um so viele
     Pixel tiefer als die senkrechte Mitte (Stefan, 09.10.2026, spät abends:
     5 px). Fester Wert, bei jeder Fensterbreite gleich. 0px = genau mittig. */
  --logo-tiefer: 5px;

  /* Größe des Logos als Faktor (Stefan, 09.10.2026, spät abends: 0.8 =
     80 %). 1 = wie in der Vorlage (0,81 Grundmaße hoch). Es schrumpft um
     seine Mitte, bleibt also senkrecht mittig (plus --logo-tiefer). */
  --logo-groesse: 0.8;

  /* Das aufgeklappte Menü am Handy: so breit ist der längste Menüpunkt,
     „wurstvogel werkstaette" (Stefan, 09.10.2026: 90 % der Bildschirmbreite).
     Die anderen Wörter richten sich in der Größe danach. */
  --menue-handy-breite: 90vw;

  /* Das runde Emblem in der Leiste dreht sich beim Scrollen: so viel
     Scrollweg ergibt eine volle Umdrehung. Stefan (08.10.2026): 100 px.
     Größer = langsamer, kleiner = schneller. Das Skript am Ende der
     index.html liest den Wert hier aus. */
  --emblem-umdrehung: 200px;

  /* Der Wurstvogel im Hintergrund: Größe als Faktor seiner Vorlagengröße.
       1     = so groß wie in referenzbild header4.png (Version 5)
       0.8   = um 20 % verkleinert
     Er schrumpft und wächst um seinen Mittelpunkt, bleibt also an der
     gleichen Stelle. (In Version 4 stand hier 0.8 — die Vorlage von
     Version 5 zeigt ihn bereits in der gewünschten Größe.) */
  --vogel-groesse: 1;

  /* Wurstvogel seitlich rücken, z. B. calc(var(--kachel-abstand) / 4) für
     eine viertel Kachellücke nach rechts (so stand es in Version 4).
     0 = wie in der Vorlage. */
  --vogel-versatz-rechts: 0;

  /* Den ganzen Kopf samt Kacheln nach oben ziehen, als Anteil der
     Bühnenbreite (in Version 4 stand hier 6.9%). Die Vorlage von Version 5
     zeigt alles schon an der gewünschten Stelle, darum 0. Mehr Luft über
     dem Kopf = kleinerer Wert, weniger = größerer. */
  --kopf-hochziehen: 0%;

  /* Nur am Handy (unter 700 px): zusätzliche Luft zwischen Kopf und erster
     Kachelreihe. Stefan (08.10.2026): erst „etwa 50 Pixel weiter unten", dann 70, dann 40.
     Rückgängig = 0. Am Desktop wirkt der Wert nicht. */
  --kacheln-luft-handy: 65px;

  /* Wie schnell die drei Kopf-Ebenen beim Scrollen nach oben laufen, als
     Anteil der Scrollgeschwindigkeit. Stefan (08.10.2026, Version 5): erst
     1 / 0.8 / 0.6, dann W 1.4, Schriftzug 1, Wurstvogel 0.6; später W 2.
     Seit 14.10.2026: Schriftzug 1.5 — die Mitte zwischen 1 und dem W (2),
     das zugleich ausgeblendet wurde (--w-sichtbar).
       0   = steht fest am Bildschirm
       0.5 = halbe Geschwindigkeit
       1   = scrollt genau wie die Seite
       1.4 = schneller als die Seite (läuft ihr davon)
     Das Skript „DIE KOPF-EBENEN LAUFEN MIT" am Ende der index.html liest
     die Werte hier aus. Bei „Bewegung reduzieren" laufen alle drei mit 1,
     also schlicht mit der Seite. */
  --w-mitlauf: 2;
  --schriftzug-mitlauf: 2.5;
  --vogel-mitlauf: 0.6;

  /* Wann der Wurstvogel ganz ausgeblendet ist: sobald die Oberkante des
     Kachelrasters noch so viele Pixel von der UNTERKANTE DER LEISTE entfernt
     ist. Stefan (09.10.2026): 100 px. Größer = der Vogel ist früher weg,
     0 = genau wenn die Kacheln unter der Leiste anstoßen.
     (Bis 08.10.2026: 50 px, gemessen von der oberen Fensterkante.) */
  --vogel-ausblend-abstand: 100px;

  /* Die Farbe des W. Es ist seit 10.10.2026 violett (Stefan), nicht mehr
     rot — das Bild kopf-w.png bleibt rot, ein Farbfilter färbt es in
     dieser Farbe ein (Abschnitt 4a, 4c).
     Die beiden Werte können verschieden sein: Dann wechselt das W beim
     Scrollen gleichmäßig von --w-farbe-start (ganz oben) nach --w-farbe-ende,
     fertig, sobald die Unterkante des W noch --w-farbe-abstand von der
     oberen Fensterkante entfernt ist. So war es am 10.10.2026 kurz eingebaut
     (Start #d50000, das Rot der Bilddatei); Stefan wollte dann „W von
     vornherein #6000b8, ohne Farbänderung" — deshalb beide gleich. */
  --w-farbe-start:   #6000b8;
  --w-farbe-ende:    #6000b8;
  --w-farbe-abstand: 50px;

  /* Ist das W zu sehen? Stefan (14.10.2026): ausblenden.
       hidden  = unsichtbar (und per Tastatur nicht mehr erreichbar —
                 der Klick in den Kopf funktioniert weiter, Abschnitt 4c)
       visible = sichtbar, wie bis 13.10.2026 */
  --w-sichtbar: hidden;

  /* Klick auf das rote W scrollt genau bis zu dieser Stelle — an der der
     Wurstvogel gerade ganz ausgeblendet ist. So lange dauert die Fahrt
     (Stefan, 09.10.2026: 1 Sekunde). Sie beginnt langsam, wird schneller
     und bremst am Ende wieder ab. */
  --w-scroll-dauer: 1s;

  /* Die Fahrt geht noch so viele Pixel weiter als bis zu der Stelle, an der
     der Wurstvogel ganz ausgeblendet ist (Stefan, 09.10.2026: erst 50 px,
     spät abends 100 px — „50 Pixel weiter unten"). 0px = sie endet genau dort. */
  --w-scroll-zugabe: 90px;

  /* Anklickbar ist nicht nur das W, sondern der ganze Bereich über den
     Kacheln, in voller Fensterbreite. Er endet so viele Pixel über der
     ersten Kachelreihe (Stefan, 09.10.2026: 50 px). */
  --klick-abstand-kacheln: 50px;

  /* Luft über und unter dem Kopf gibt es seit Version 4 nicht mehr als
     eigene Werte: Die Abstände stecken in den Prozentwerten der Bühne
     (Abschnitt 4b), weil sie aus der Vorlage abgemessen sind. */

  /* DAS FUSSBILD (seit 10.10.2026, Vorlage referenzbild footer1.png): der
     Laser-Kopf unter dem Kachelraster, so breit wie das Fenster. Es liegt
     auf derselben Ebene wie der Wurstvogel: über der weißen Fläche der
     Kacheln, unter ihrem halb durchsichtigen Schleier und unter der Schrift.
       --fussbild-ueberlappung  wie weit das Bild von unten in das Raster
                                hineinragt, als Anteil seiner eigenen Höhe
                                (aus der Vorlage: 0.64 — die Unterkante des
                                Kopfes liegt dann rund eine Kachelhöhe unter
                                der letzten Reihe). 0 = das Bild beginnt
                                genau an der Unterkante des Rasters.
       --fussbild-handy-anteil  am Handy (unter 700 px) wird das Bild links
                                beschnitten: so viel seiner Breite bleibt
                                (Stefan: 0.6, die linken 40 % fallen weg).
                                1 = ganz zu sehen wie am Rechner.
       --fussbild-luft-unten    Luft unter dem Bild bis zum Seitenende
                                (Stefan, 10.10.2026: 50 px weniger als zuerst;
                                zuerst clamp(48px, 6vw, 92px)).
       --fussbild-mitlauf       Parallaxe (seit 10.10.2026): Das Bild läuft
                                beim Scrollen schneller als die Seite nach
                                oben (Stefan: erst 2 wie das W, dann 3). Es
                                kommt genau am Seitenende an seiner
                                endgültigen Stelle an; davor liegt es um so
                                viel tiefer, wie es bis dorthin aufholen
                                muss, und taucht entsprechend später auf.
                                1 = läuft schlicht mit der Seite.
       --fussbild-kurve         Wie sich die Geschwindigkeit über den Weg
                                verteilt (Stefan, 10.10.2026: „nicht linear,
                                sondern in einer Kurve"):
                                  1 = gleichmäßig, die ganze Zeit mit
                                      --fussbild-mitlauf
                                  2 = startet mit --fussbild-mitlauf und
                                      wird stetig langsamer, bis es am
                                      Seitenende genau mit der Seite läuft
                                      (sanftes Auslaufen)
                                  3 = dasselbe, nur bleibt es länger schnell
                                      und bremst später stärker
                                Technisch: Verschiebung = (Mitlauf − 1) ×
                                Scrollweg ÷ Kurve × (Restweg ÷ Scrollweg)
                                hoch Kurve. Bei 1 ist das die gerade Linie.
     Das Bild blendet beim Scrollen EIN (Gegenstück zum Wurstvogel): ganz
     durchsichtig, sobald seine Oberkante am unteren Fensterrand auftaucht,
     ganz da, wenn die Seite zu Ende gescrollt ist. Das macht das Skript
     „DIE KOPF-EBENEN LAUFEN MIT" in der index.html — keine Stellschraube.

     DER TEXTFUSS (Contact · Imprint · Legal) liegt seit 10.10.2026 ÜBER dem
     Fußbild, unten links; er blendet nicht mit ein.
       --fuss-freiraum-rechts   so viel der Breite bleibt rechts frei, damit
                                der Text nicht über dem Kopf steht (Rechner:
                                der Kopf beginnt bei rund 70 % der Breite).
       --fuss-freiraum-rechts-handy  dasselbe unter 700 px (dort ist der Kopf
                                größer und beginnt bei rund 48 %).
       --fuss-luft-oben         Abstand vom Kachelraster bis zum Textbeginn.
       --fuss-luft-unten        Abstand des Textes zur Unterkante des Bildes. */
  --fussbild-ueberlappung: 0.64;
  --fussbild-handy-anteil: 0.6;
  --fussbild-luft-unten:   clamp(0px, 6vw - 50px, 42px);
  --fussbild-mitlauf:      3;
  --fussbild-kurve:        2;
  --fuss-freiraum-rechts:       40%;
  --fuss-freiraum-rechts-handy: 52%;
  --fuss-luft-oben:             var(--kachel-abstand);
  --fuss-luft-unten:            var(--rand);
  /* FUSSBILD AUSGEBLENDET (Schalter „fussbereich--ohne-bild" am <footer> in der
     index.html, seit 13.10.2026): Abstand vom Kachelraster bis zum Fuß.
     Gilt nur, solange das Laser-Bild ausgeblendet ist.
     Seit 15.10.2026 ist der Fuß ein Bild (fuss-text.png), das seine Luft über
     dem Text schon mitbringt (360 px der 830 px hohen Vorlage). Darum hier
     nur noch die normale Kachellücke; bis dahin 48px. */
  --fuss-luft-oben-ohne-bild:   var(--kachel-abstand);

  /* Kacheln */
  --kachel-verhaeltnis: 3 / 2;     /* Breite / Höhe — entspricht 6:4 */
  --kachel-radius:      0px;       /* Eckenrundung. 0 = scharfe Ecken */

  /* DIE SCHRIFT-KACHEL NACH VORLAGE (13.10.2026, Abschnitt 5e) — bisher Strategie,
     gedacht für alle Schrift-Kacheln. Vorlage: kacheln-Strategie-referenz5.png
     (seit dieser Referenz: Ladebalken kleiner, 300 statt 388 breit, Schriftzug 14 tiefer).

     SCHRIFTBAND — der Schriftzug läuft von rechts nach links durch, sobald die
     Maus auf der Kachel steht. Er startet dort, wo er im Ruhezustand steht;
     im selben Moment taucht die nächste Kopie am rechten Rand der Kachel auf.

     --band-tempo    Pixel pro Sekunde — gemeint bei einer Kachel von
                     --band-bezug Pixeln Breite (eine typische Laptop-Kachel).
                     Schmalere Kacheln laufen anteilig langsamer, breitere
                     schneller, der Eindruck bleibt gleich. Größer = schneller.
     --band-zugabe   zusätzlicher Abstand bis zur nächsten Kopie, in Pixeln
                     (wieder bei --band-bezug). 0 = die nächste Kopie steht
                     beim Start genau am rechten Kachelrand (dein Wunsch);
                     50 = sie kommt 50 px später ins Bild. Nicht unter 0.
     --band-bezug    Kachelbreite in Pixeln, für die beide Werte genau gelten. */
  --band-tempo:   150;    /* Stefan, 13.10.2026; zuerst 100 */
  --band-tempo-2:  90;    /* ZWEITE Zeile bei zweizeiligen Schriftzügen (Stefan, 13.10.2026).
                             Weil die Zeilen verschieden schnell laufen, schieben sich
                             Unterlängen der ersten und Oberlängen der zweiten Zeile hin
                             und wieder übereinander — das ist gewollt. Gleicher Wert wie
                             --band-tempo = beide Zeilen laufen gemeinsam. */
  --band-zugabe:  0;
  --band-bezug:   560;

  /* FEINVERSCHIEBUNG der vier Teile, für ALLE Kacheln nach Vorlage zugleich.
     Gemeint sind Pixel deiner InDesign-Vorlage (1800 × 1200 px).
     0 = Lage wie in kacheln-Strategie-referenz5.png, 20 = 20 px höher,
     negative Zahl = tiefer.

     --vorlage-wort-hoeher      der Schriftzug (stehend und laufend)
     --vorlage-balken-hoeher    Ladebalken mit „LOADING …" (einzelne Kacheln können
                                ihn zusätzlich tiefer setzen: „--balken-tiefer" am
                                <button> in der index.html; zurzeit nutzt das keine Kachel)
     --vorlage-original-hoeher  Vogel und „A Wurstvogel Werkstätte Original"
     --vorlage-release-hoeher   „Expected Release: …"

     Bis zur Referenz 3 hießen die Schrauben --strategie-wort-hoeher (zuletzt 40)
     und --strategie-balken-hoeher (zuletzt 60) und zählten ab der Referenz 1;
     die Referenz 3 entspricht dort 43 und 113. Stand davor:
     5_Archiv/website-v5-schriftband-2026-10-13/. */
  --vorlage-wort-hoeher:      0;
  --vorlage-balken-hoeher:    0;
  --vorlage-original-hoeher:  0;
  --vorlage-release-hoeher:   0;

  /* Wie lange ein Zustand stehen bleibt, steht NICHT hier, sondern ganz
     unten in der index.html (TAKT = 1000, in Millisekunden). */
}


/* --------------------------------------------------------------------------
   2  GRUNDLAGEN
   Browser bringen eigene Voreinstellungen mit. Die werden hier auf einen
   einheitlichen Stand gebracht.
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Weiches Scrollen, z. B. beim Klick auf das Logo in der Leiste. Wer
   „Bewegung reduzieren" eingeschaltet hat, springt stattdessen sofort. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-top: var(--leiste-hoehe);        /* Platz für die feste Leiste (4a) */
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* PLATZHALTER: Sobald feststeht, welche Schrift die Seite verwendet,
     wird sie hier eingetragen und in 3_Website/schriften/ abgelegt. */
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }


/* --------------------------------------------------------------------------
   3  DIE UNSICHTBARE ÜBERSCHRIFT
   --------------------------------------------------------------------------
   Seit dem 14.09.2026 gibt es keinen sichtbaren Schriftzug mehr im Kopf —
   das Kopfbild übernimmt diese Aufgabe. Die Überschrift (h1) in der
   index.html bleibt aber bestehen, damit Suchmaschinen und Vorleseprogramme
   den Namen der Seite finden.

   Diese Regel schiebt sie aus dem Blickfeld, ohne sie abzuschalten. Ein
   schlichtes „display: none" ginge nicht: Damit wäre sie auch für
   Vorleseprogramme verschwunden. Stattdessen wird sie auf ein Feld von
   einem Bildpunkt zusammengezogen und dessen Inhalt abgeschnitten.
   Der Trick ist über zwanzig Jahre alt und funktioniert in jedem Browser.
   -------------------------------------------------------------------------- */

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   4  DAS KACHELRASTER
   --------------------------------------------------------------------------
   „Grid" heißt Raster. Wir sagen dem Browser: stell die Kacheln in Spalten.
   Wie viele Spalten, hängt von der Fensterbreite ab — das ist der Kern von
   „responsive": nicht eine Seite fürs Handy und eine für den Desktop,
   sondern eine Seite, die sich der Breite anpasst.

   Grundzustand = eine Spalte. Erst ab 700 px Fensterbreite kommt die zweite
   dazu. Man baut immer von schmal nach breit — das ist die Reihenfolge,
   in der Browser die Regeln abarbeiten.
   -------------------------------------------------------------------------- */

.kacheln {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0 var(--rand);
  position: relative;
  /* Hier stand bis 09.10.2026 „z-index: 1" (Kacheln als Ganzes über dem
     Wurstvogel). Jetzt bewusst NICHT mehr: So kann die weiße Fläche jeder
     Kachel UNTER den Wurstvogel rutschen (Abschnitt 5, „.kachel::before"),
     während die Kachelbilder weiter ÜBER ihm liegen — sie stehen in der
     index.html nach dem Vogel und gewinnen deshalb. */
  display: grid;
  grid-template-columns: 1fr;              /* Handy: eine Spalte */
  gap: var(--kachel-abstand);
}

@media (min-width: 700px) {
  .kacheln {
    grid-template-columns: 1fr 1fr;        /* Desktop: zwei nebeneinander */
  }
}

/* Handy: die Kacheln beginnen etwas tiefer (Stellschraube in Abschnitt 1) */
@media (max-width: 699px) {
  .kacheln { margin-top: var(--kacheln-luft-handy); }
}


/* ---- 4a  Die Leiste -------------------------------------------------------
   Der Streifen am oberen Rand mit Logo und Menü. Seit 09.10.2026 (spät
   abends) hat er keine Farbe mehr (--leiste-grund: transparent) — Logo und
   Menü stehen direkt auf dem Seitengrund, die Seite scrollt sichtbar unter
   ihnen durch. „position: fixed" macht den Streifen am Bildschirm fest.
   Damit er nichts verdeckt, bekommt der body oben genau so viel Innenabstand,
   wie der Streifen hoch ist (Abschnitt 2). z-index 10: liegt über allem
   anderen. Die Maße (Höhe, Grundmaß) gelten weiter, auch wenn man den
   Streifen nicht sieht — an seiner Unterkante hängen z. B. das Ausblenden
   des Wurstvogels und die Klickfahrt.

   Das Logo darin: 81 % des Grundmaßes hoch, senkrecht mittig, links
   0,58 Grundmaße Luft — so sitzt es in der Vorlage (Grundmaß 26 px, Logo
   21 px hoch, 15 px vom Rand). Es wächst und schrumpft mit dem Grundmaß,
   nicht mit der Zugabe oben und unten (Abschnitt 1).

   FARBFILTER (seit 14.10.2026): Logo und Menüwörter sind weiße Bilder auf
   durchsichtigem Grund. Ein Farbfilter färbt jeden sichtbaren Bildpunkt in
   der gewünschten Farbe ein und lässt die Form unverändert. Die Filter
   stehen als kleines unsichtbares SVG gleich nach <body> in der index.html
   („farbe-leiste" und „farbe-hover"); ihre Farben kommen von hier aus
   Abschnitt 1 (--leiste-schrift, beim Hover --leiste-hover) — die Regeln
   „#farbe-leiste feFlood" und „#farbe-hover feFlood" weiter unten. So
   braucht es keine schwarzen oder violetten Bilddateien. Die Bildhöhe steht
   weiter als --bild-hoehe da (Logo: 0,81 Grundmaße; Menüwörter: 0,558
   Grundmaße, am Handy anders — jeweils dort gesetzt).

   Bis 13.10.2026 lief das über eine SCHATTEN-TECHNIK (Bild aus seinem
   Rahmen geschoben und versteckt, sichtbar nur sein Schlagschatten). Die
   scheiterte in Safari: Safari zeichnet ein Bild gar nicht erst, wenn das
   Bild selbst außerhalb seines sichtbaren Rahmens liegt — und mit dem Bild
   fehlt auch sein Schatten. Zu sehen war nur, was zufällig in einem Bereich
   lag, den Safari ohnehin neu zeichnete (die Spalte der Kacheln). Ein
   früherer Versuch mit einer CSS-Schablone („mask") scheiterte ebenfalls:
   Beim Öffnen direkt vom Rechner laden Chrome und Safari sie nicht nach.
   Die Farbfilter stehen in derselben Datei und brauchen nichts nachzuladen.
   -------------------------------------------------------------------------- */

.leiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--leiste-hoehe);
  background: var(--leiste-grund);         /* Stellschraube in Abschnitt 1 */
  color: var(--leiste-schrift);            /* Farbe von Logo, Menü und Burger */
  z-index: 10;
  display: flex;
  align-items: center;
  padding-left: calc(var(--leiste-grundmass) * 0.58);
}

/* Der Farbfilter (Erklärung oben): färbt das weiße Bild in der Farbe
   --leiste-schrift ein, beim Überfahren mit der Maus in --leiste-hover. */
.bildwort {
  display: block;
}
.bildwort img {
  display: block;
  height: var(--bild-hoehe);
  width: auto;
  filter: url(#farbe-leiste);
}
#farbe-leiste feFlood { flood-color: var(--leiste-schrift); }
#farbe-hover  feFlood { flood-color: var(--leiste-hover); }

/* Beim Überfahren mit der Maus: das ganze Logo (Schriftzug und Emblem
   zusammen, es ist ein Link), jedes Menüwort einzeln und der Burger.
   Logo und Menüwörter wechseln dazu den Farbfilter, der Burger (gezeichnete
   Striche, kein Bild) die Textfarbe. */
.leiste__logo:hover .bildwort img,
.menue__punkt:hover img {
  filter: url(#farbe-hover);
}
.burger:hover {
  color: var(--leiste-hover);
}

.leiste__logo {
  display: flex;                           /* Schriftzug und Emblem nebeneinander, ohne Lücke */
  align-items: center;
  --bild-hoehe: calc(var(--leiste-grundmass) * 0.81 * var(--logo-groesse));   /* Bildhöhe */
  height: var(--bild-hoehe);
  position: relative;
  top: var(--logo-tiefer);                 /* Stellschraube in Abschnitt 1 */
  color: inherit;
}

.leiste__logo .bildwort {
  height: 100%;
}

/* Das Emblem dreht sich um seinen Mittelpunkt (Skript am Ende der
   index.html setzt den Winkel). „will-change" sagt dem Browser vorab, dass
   sich hier etwas bewegt — dann läuft die Drehung ruckelfrei. */
.leiste__emblem {
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Sichtbarer Rahmen nur bei Bedienung per Tastatur, in der aktuellen Farbe */
.leiste__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ---- 4a-2  Das Menü in der Leiste -----------------------------------------
   Seit 09.10.2026, Vorlage: 1_Konzept/Referenzen/eigene_website/
   referenzbild balken1.png. Die Menüpunkte sind Bilder (weiß auf
   durchsichtig, aus Stefans menü.png geschnitten, alle 180 px hoch), damit
   die Schrift nicht als Datei auf dem Server liegen muss. Gefärbt werden sie
   über den Farbfilter aus 4a (Klasse „bildwort", Bildhöhe --bild-hoehe).

   AB 700 px FENSTERBREITE (Rechner): die Wörter stehen rechts in der Leiste,
   „imprint" entfällt, der Burger ist unsichtbar.

   UNTER 700 px (Handy): rechts steht nur der Burger. Antippen setzt die
   Klasse „menue-offen" (Skript am Ende der index.html) — dann überdeckt das
   Menü den ganzen Bildschirm unter der Leiste in der Seitenfarbe (bis
   09.10.2026 abends: schwarz), die Menüpunkte stehen mittig untereinander,
   und aus dem Burger wird ein X.

   Größe der Wörter in der Leiste: 0,558 Grundmaße hoch — so groß sind sie
   in der Vorlage.
   -------------------------------------------------------------------------- */

.menue {
  margin-left: auto;                       /* schiebt das Menü ganz nach rechts */
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--menue-abstand);
  padding-right: calc(var(--menue-abstand) * 0.98);   /* Vorlage: 71 px rechts, 72,5 dazwischen */
}

.menue__punkt {
  display: block;
  position: relative;
  top: var(--menue-tiefer);                /* Stellschraube in Abschnitt 1 */
  color: inherit;
  text-decoration: none;
}

/* Hat ein Menüpunkt noch kein Ziel (kein href), zeigt die Maus trotzdem
   die Hand — damit das Violett beim Überfahren nicht wie ein Fehler wirkt. */
.menue__punkt { cursor: pointer; }

.menue__punkt {
  --bild-hoehe: calc(var(--leiste-grundmass) * 0.558);  /* Bildhöhe (4a) */
}

.menue__punkt--nur-handy { display: none; }          /* „imprint": nur im Handy-Menü */

.menue__punkt:focus-visible,
.burger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Der Burger: drei Striche in der Farbe --leiste-schrift, hier gezeichnet statt als Bild — so kann
   aus denselben Strichen das X werden. Maße aus Stefans menü.png: 140 breit,
   104 hoch, Striche 15 dick. Höhe am Bildschirm: 0,55 Grundmaße.
   Der Knopf selbst ist größer als die Striche (so hoch wie die Leiste,
   mindestens 44 px breit), damit der Finger ihn sicher trifft. */
.burger {
  display: none;                           /* am Rechner unsichtbar */
  margin-left: auto;
  height: 100%;
  min-width: 44px;
  padding: 0 calc(var(--leiste-grundmass) * 0.58);    /* rechts so viel Luft wie links vom Logo */
  border: 0;
  background: none;
  color: inherit;                          /* Knöpfe erben Farbe sonst nicht */
  cursor: pointer;
  align-items: center;
  justify-content: flex-end;
}

.burger__striche {
  position: relative;
  display: block;
  height: calc(var(--leiste-grundmass) * 0.55);
  aspect-ratio: 140 / 104;
}

.burger__striche span {
  position: absolute;
  left: 0;
  right: 0;
  height: 14.4%;
  background: currentColor;                /* --leiste-schrift, beim Hover --leiste-hover */
}
.burger__striche span:nth-child(1) { top: 0; }
.burger__striche span:nth-child(2) { top: 42.8%; }
.burger__striche span:nth-child(3) { top: 85.6%; }

/* Menü offen: oberer und unterer Strich wandern in die Mitte und kreuzen
   sich, der mittlere verschwindet — das X. Harter Schnitt, ohne Übergang. */
.menue-offen .burger__striche span:nth-child(1) { top: 42.8%; transform: rotate(45deg); }
.menue-offen .burger__striche span:nth-child(2) { opacity: 0; }
.menue-offen .burger__striche span:nth-child(3) { top: 42.8%; transform: rotate(-45deg); }

@media (max-width: 699px) {
  .burger { display: flex; }

  /* Zugeklappt ist das Menü gar nicht da. Aufgeklappt füllt es den
     Bildschirm von der Unterkante der Leiste bis ganz unten. */
  .menue {
    display: none;
    position: fixed;
    top: var(--leiste-hoehe);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    margin: 0;
    padding: calc(var(--menue-handy-breite) * 0.08) 0;
    background: var(--farbe-hintergrund);  /* vorher #000, als die Leiste noch schwarz war */
    color: var(--leiste-schrift);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--menue-handy-breite) * 0.05);
    overflow-y: auto;                      /* im Querformat lässt sich das Menü scrollen */
  }
  .menue-offen .menue { display: flex; }

  /* Bildhöhe so, dass „wurstvogel werkstaette" (1437 × 180 px) genau
     --menue-handy-breite breit wird; die anderen Wörter im gleichen Maßstab. */
  .menue__punkt { --bild-hoehe: calc(var(--menue-handy-breite) * 180 / 1437); }
  .menue__punkt--nur-handy { display: block; }
  .menue__punkt { top: 0; }                /* im Handy-Menü kein Versatz */

  /* Solange das Menü offen ist, scrollt die Seite dahinter nicht mit. */
  html.menue-offen,
  html.menue-offen body { overflow: hidden; }
}

/* ---- 4a-3  Schalter: Menü ausgeblendet ------------------------------------
   Seit 15.10.2026 (vorläufige Online-Fassung). Trägt die Leiste in der
   index.html zusätzlich die Klasse „leiste--ohne-menue", verschwinden die
   Menüwörter und am Handy der Burger — nur das Logo bleibt. Die Regel steht
   NACH dem Handy-Block oben, damit sie dessen „display: flex" schlägt.
   Klasse in der index.html löschen = Menü wieder da; an 4a-2 wurde nichts
   geändert. */
.leiste--ohne-menue .menue,
.leiste--ohne-menue .burger { display: none; }


/* ---- 4b  Die beiden Hintergrund-Ebenen: Wurstvogel und Schriftzug ---------
   Seit Version 5 (08.10.2026), Vorlage referenzbild header4.png. Der Kopf
   besteht aus drei Ebenen, die beim Scrollen unterschiedlich schnell nach
   oben laufen — das gibt Tiefe („Parallaxe"):

     oben    das W               läuft mit 2    (4c, im Seitenfluss + Skript;
                                                 seit 14.10.2026 ausgeblendet)
     mitte   der Schriftzug      läuft mit 1.5                      (hier)
     hinten  der Wurstvogel      läuft mit 0.6                      (hier)

   Schriftzug und Wurstvogel sind am Bildschirm festgemacht („fixed") und
   werden vom Skript „DIE KOPF-EBENEN LAUFEN MIT" am Ende der index.html
   bei jedem Scrollschritt um ihren Anteil des Scrollwegs nach oben
   geschoben (Stellschrauben in Abschnitt 1). Der Wurstvogel blendet dabei
   außerdem aus — ganz weg, sobald das Kachelraster bis auf
   --vogel-ausblend-abstand an die Unterkante der Leiste herangescrollt ist;
   der Schriftzug läuft einfach oben raus.

   Jede Ebene baut dieselbe Bühne nach wie der Kopf (4c): gleiche
   Höchstbreite, gleicher Rand, gleiches Format 698 : 371. So stehen alle
   Teile beim Laden exakt dort, wo sie in der Vorlage stehen. Lage und Größe
   in Prozent, aus der Vorlage abgemessen (Bühne = 698 × 371 px, ab Spalte
   51, Oberkante = Unterkante der Leiste). Achtung: „left" und „width" sind
   Prozent der Bühnenbreite, „top" ist Prozent der Bühnenhöhe — so will es
   CSS.

   „pointer-events: none": die Ebenen fangen keine Maus ab — Klicks und
   Hover gehen durch sie hindurch zu Kacheln und Leiste. Kacheln (4) und
   Kopf (4c) liegen mit z-index 1 über beiden Ebenen; die Kacheln sind
   durchsichtig, der Vogel scheint also durch.
   -------------------------------------------------------------------------- */

.vogel,
.schriftzug {
  position: fixed;
  top: var(--leiste-hoehe);
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;   /* wird beim Scrollen laufend bewegt */
}

.vogel__buehne,
.schriftzug__buehne {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.vogel__flaeche,
.schriftzug__flaeche {
  position: relative;
  aspect-ratio: 698 / 371;
  /* nach oben ziehen — derselbe Wert wie beim Kopf (4c), sonst verschöben
     sich die Ebenen gegenüber W und Kacheln */
  margin-top: calc(-1 * var(--kopf-hochziehen));
}

/* Der Wurstvogel. Seit 09.10.2026 die freigestellte PNG-Datei
   (kopf-wurstvogel.png, durchsichtiger Grund) — auf dem grauen Seitengrund
   stünde das frühere JPEG mit seinem weißen Grund als weißes Rechteck da.
   Datei 1200 × 1200 px (der Vogel füllt sie fast ganz);
   in der Vorlage 452 px breit, Oberkante 5 px unter der Leiste. */
.vogel__bild {
  position: absolute;
  left:  15.27%;
  top:   1.37%;                          /* 5 / 371 — Prozent der Bühnenhöhe */
  width: 64.74%;                         /* 452 / 698 — Prozent der Bühnenbreite */
  height: auto;

  /* Versatz und Größe nach den Stellschrauben (Abschnitt 1). Die
     Prozentwerte oben bleiben die der Vorlage; erst wird verschoben, dann
     um den Mittelpunkt des Bilds skaliert. */
  transform: translateX(var(--vogel-versatz-rechts)) scale(var(--vogel-groesse));
  transform-origin: 50% 50%;
}

/* Der schwarze Schriftzug „wurstvogel typefaces". Datei 1944 × 215 px;
   in der Vorlage 664 px breit, 163 px unter der Leiste. */
.schriftzug__bild {
  position: absolute;
  left:  2.58%;
  top:   43.94%;                         /* 163 / 371 */
  width: 95.13%;                         /* 664 / 698 */
  height: auto;
}


/* ---- 4c  Der Kopf: das rote W ---------------------------------------------
   Eine Bühne, so breit wie das Kachelraster (gleiche Höchstbreite, gleicher
   Rand), im Format 698 : 371 — so hoch, dass die erste Kachelreihe genau dort
   beginnt, wo sie in der Vorlage beginnt. Darin das rote W, festgepinnt
   („position: absolute"), Lage und Größe in Prozent der Bühne.

   Das W steht im normalen Fluss der Seite und scrollt deshalb von selbst
   mit Geschwindigkeit 1. Alles darüber hinaus (Stellschraube --w-mitlauf,
   derzeit 2) legt das Skript als Verschiebung obendrauf. z-index 1: liegt
   über Schriftzug und Wurstvogel (4b).
   -------------------------------------------------------------------------- */

.kopf {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0 var(--rand);
  position: relative;
  z-index: 1;
}

.kopf__buehne {
  position: relative;
  aspect-ratio: 698 / 371;
  /* nach oben ziehen (Stellschraube in Abschnitt 1): Die Bühne rutscht um
     diesen Anteil ihrer Breite unter die Leiste, alles darunter folgt. */
  margin-top: calc(-1 * var(--kopf-hochziehen));
}

/* Das rote W. Datei 802 × 640 px; in der Vorlage 149 px breit, 132 px
   unter der Leiste. */
.kopf__w {
  position: absolute;
  left:  39.11%;
  top:   35.58%;                         /* 132 / 371 */
  width: 21.35%;                         /* 149 / 698 */
  height: auto;
  will-change: transform;                /* wird beim Scrollen laufend bewegt */
  cursor: pointer;                       /* anklickbar: scrollt zu den Kacheln (Skript) */
  visibility: var(--w-sichtbar);         /* Stellschraube in Abschnitt 1: hidden = ausgeblendet */
}

/* Das W-Bild, eingefärbt mit dem Farbfilter „farbe-w" (wie Logo und Menü,
   Abschnitt 4a). Die Farbe setzt das Skript „DIE KOPF-EBENEN LAUFEN MIT",
   weil sie beim Scrollen wechseln kann (--w-farbe-start / -ende); bis
   dahin gilt --w-farbe-start (Regel darunter). Bis 13.10.2026 lief das über
   die Schatten-Technik — in Safari blieb das W damit unsichtbar. */
.kopf__w-bild {
  display: block;
  width: 100%;
  height: auto;
  filter: url(#farbe-w);
}
#farbe-w feFlood { flood-color: var(--w-farbe-start); }

/* Die Klickfläche über dem ganzen Kopf: unsichtbar, volle Fensterbreite,
   vom Seitenanfang bis --klick-abstand-kacheln über der ersten Kachelreihe.
   Sie gehört zur Seite und scrollt mit ihr weg. Ihre Höhe setzt das Skript
   „DIE KOPF-EBENEN LAUFEN MIT" (es kennt die Lage der Kacheln). z-index 2:
   über W, Schriftzug und Wurstvogel, aber unter der Leiste (10) — die Leiste
   und ihr Menü behalten ihre eigenen Klicks. */
.klickflaeche {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 2;
  cursor: pointer;
}

/* Sichtbarer Rahmen nur bei Bedienung per Tastatur */
.kopf__w:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   5  DIE EINZELNE KACHEL
   --------------------------------------------------------------------------
   Wie der Wechsel funktioniert: Die Zustände einer Kachel liegen als Bilder
   exakt übereinander — wie Folien auf einem Stapel. Der Browser schaltet sie
   reihum sichtbar. Kein GIF, keine Videodatei: ganz normale Bilder in voller
   Qualität.

   Die Kachel ist technisch ein Knopf (button). Am Touchgerät, weil man sie
   antippt; überall, weil sie damit auch mit der Tastatur erreichbar ist
   (Tab-Taste) — wer keine Maus benutzt, hat kein Hover und käme sonst nie an
   den alternativen Zustand. Die Voreinstellungen, die Browser Knöpfen
   mitgeben — Rahmen, Innenabstand, grauer Hintergrund — werden hier
   abgeräumt.
   -------------------------------------------------------------------------- */

.kachel {
  /* Knopf-Voreinstellungen abräumen */
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kachel-verhaeltnis);
  overflow: hidden;
  border-radius: var(--kachel-radius);
  /* Der Schleier (Schalter --kachel-schleier in Abschnitt 1): halb
     durchsichtiges Weiß als Hintergrund der Kachel selbst. Er liegt ÜBER dem
     Wurstvogel und UNTER den Kachelbildern. Bei 0 ist die Kachel hier
     durchsichtig wie seit Version 4. */
  background: rgba(255, 255, 255, var(--kachel-schleier));
}

/* Die Fläche der Kachel (Schalter --kachel-grund in Abschnitt 1). Sie ist
   ein eigenes Blatt HINTER der Kachel: „z-index: -1" legt es unter den
   Wurstvogel, aber über den Seitengrund. Reihenfolge von unten nach oben:
     grauer Seitengrund → diese Fläche → Wurstvogel → Schleier → Kachelbild
   So verdeckt die Kachel das Grau, aber nicht den Vogel. */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kachel-grund);
  z-index: -1;
  pointer-events: none;
}

/* Sichtbarer Rahmen, wenn die Kachel per Tastatur angesteuert wird.
   Nur dann — bei Mausklick würde er stören. */
.kachel:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 3px;
}

.kachel__zustand,
.kachel__alt,
.kachel__klick {
  position: absolute;
  inset: 0;                                /* füllt die Kachel ganz aus */
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---- 5a  Der automatische Wechsel ----------------------------------------
   Die Zustände liegen übereinander; sichtbar ist nur der mit der Klasse
   „ist-aktiv“. Die setzt das kleine Skript am Ende der index.html im
   Sekundentakt weiter. Harter Schnitt, keine Überblendung.

   Bis Version 3 waren alle Zustände immer sichtbar, gewechselt wurde nur,
   welcher obenauf liegt (z-index). Das ging, weil die Bilder deckend waren.
   Seit Version 4 sind sie durchsichtig — dann lägen alle Ladebalken
   gleichzeitig im Bild. Deshalb jetzt: der aktive Zustand sichtbar
   (opacity 1), alle anderen unsichtbar (opacity 0).

   Warum nicht als reine CSS-Animation (Stand bis 14.09.2026, 17 Uhr):
   Dort hatte jedes Bild seine eigene Stoppuhr. Safari — und damit jedes
   iPhone — bringt diese Uhren aus dem Takt. Mit EINER Uhr je Kachel im
   Skript kann das nicht passieren — daran ändert Version 4 nichts.

   Das Skript setzt „ist-aktiv“ auch bei „Bewegung reduzieren“ auf Zustand 1.
   Die :where-Regel ist nur der Rückhalt für den Fall, dass gar kein Skript
   läuft — „:where“ gibt ihr absichtlich wenig Gewicht, damit die Hover-
   Regeln in 5b sie überstimmen können.
   -------------------------------------------------------------------------- */

.kachel__zustand                                      { opacity: 0; }
.kachel__zustand.ist-aktiv                            { opacity: 1; }
.kachel:not(.laeuft) :where(.kachel__zustand:first-of-type) { opacity: 1; }


/* ---- 5b  Der alternative Zustand -----------------------------------------
   Er erscheint auf zwei Wegen, je nachdem, womit jemand die Seite bedient:

     mit Maus      solange der Zeiger auf der Kachel steht (Hover)
     mit Finger    nach dem Antippen, bis zum nächsten Antippen
     mit Tastatur  solange die Kachel angesteuert ist (Tab-Taste)

   Unterschieden wird NICHT nach Bildschirmbreite, sondern danach, ob das Gerät
   überhaupt einen Mauszeiger hat: „hover: hover" heißt echte Maus, „hover: none"
   heißt Touchscreen. Das ist verlässlicher — ein Laptop mit Touchscreen oder ein
   iPad mit Tastatur würden nach Bildschirmbreite sonst falsch bedient.

   Solange der alternative Zustand zu sehen ist, hält der Ladebalken an —
   das erledigt das Skript am Ende der index.html.
   -------------------------------------------------------------------------- */

.kachel__alt {
  z-index: 2;                              /* liegt über dem ganzen Stapel */
  opacity: 0;
  pointer-events: none;
}

/* Jede Regel kommt als Paar: Alternative einblenden UND den laufenden
   Zustand ausblenden — seit Version 4 sind die Bilder durchsichtig, sonst
   schiene der Ladebalken durch das Specimen hindurch. */

/* Tastatur — gilt auf jedem Gerät */
.kachel:focus-visible .kachel__alt      { opacity: 1; }
.kachel:focus-visible .kachel__zustand  { opacity: 0; }

/* Maus */
@media (hover: hover) and (pointer: fine) {
  .kachel:has(.kachel__klick) { cursor: pointer; }
  .kachel:hover .kachel__alt      { opacity: 1; }
  .kachel:hover .kachel__zustand  { opacity: 0; }
}

/* Touchscreen — hier setzt ein Antippen die Klasse „zeigt-alt" */
@media (hover: none) {
  .kachel { cursor: pointer; }
  .kachel.zeigt-alt .kachel__alt      { opacity: 1; }
  .kachel.zeigt-alt .kachel__zustand  { opacity: 0; }
}


/* ---- 5c  Das Klickbild ----------------------------------------------------
   Manche Kacheln haben ein weiteres Bild (Klasse kachel__klick, bisher nur
   Strategie). Es erscheint bei Klick — am Rechner, während die Maus auf der
   Kachel liegt; am Handy beim zweiten Antippen. Das Skript „ANTIPPEN UND
   KLICKEN" setzt dafür die Klasse „zeigt-klick" auf die Kachel.

   Es liegt über Zuständen und Alternative (gleicher z-index wie die
   Alternative, steht aber später in der index.html und gewinnt deshalb);
   nur der Rahmen (5d) bleibt darüber. Alternative und Zustände werden dabei
   ausgeblendet. Diese Regeln stehen NACH 5b, damit sie Hover überstimmen.
   -------------------------------------------------------------------------- */

.kachel__klick {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.kachel.zeigt-klick .kachel__klick    { opacity: 1; }
.kachel.zeigt-klick .kachel__alt      { opacity: 0; }
.kachel.zeigt-klick .kachel__zustand  { opacity: 0; }


/* ---- 5d  Der Rahmen -------------------------------------------------------
   Seit Version 4 (08.10.2026) sind die Kachelbilder rahmenlos. Der violette
   Rahmen kommt aus EINER Datei, bilder/allgemein/rahmen.png (1800 × 1200 px,
   durchsichtig), und wird hier über jede Kachel mit der Zusatzklasse
   „kachel--schrift" gelegt — als Pseudo-Element „::after", also ohne eigene
   Zeile in der index.html. z-index 3: über Zuständen und Alternative.
   „pointer-events: none": der Rahmen fängt keine Maus ab.

   Rahmen ändern = diese eine Datei tauschen. Eine Kachel ohne die Klasse
   (spätere Branding-Kacheln) bleibt rahmenlos.
   -------------------------------------------------------------------------- */

.kachel--schrift::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../bilder/allgemein/rahmen.png") center / 100% 100% no-repeat;
  opacity: var(--rahmen-sichtbar);         /* Schalter in Abschnitt 1: 1 = zu sehen, 0 = aus */
  z-index: 3;
  pointer-events: none;
}


/* ---- 5e  Die Schrift-Kachel nach Vorlage (alle Schrift-Kacheln) -----
   Seit 13.10.2026 (Vorlage kacheln-Strategie-referenz5.png). Eine Kachel mit
   der Zusatzklasse „kachel--vorlage" ist nicht mehr aus fertigen Ganzbildern
   gebaut, sondern aus Teilen, die übereinander liegen. Je Schrift gibt es
   nur EIN eigenes Bild — den Schriftzug. Alles andere ist für alle
   Schrift-Kacheln dasselbe und liegt in bilder/allgemein/:

     ladebalken5-1/-2/-3.png   der Ladebalken mit „LOADING …" — die Zahl ist die
     ladebalken10-1/…/-4.png   höchste Strichzahl: bis 5 Striche (drei Zustände)
                               bzw. bis 10 Striche (vier Zustände)
     kachel-original.png       Vogel und „A Wurstvogel Werkstätte Original"
     kachel-release-2027.png   „Expected Release: 2027" (je Erscheinungstermin
                               eine Datei, z. B. kachel-release-late-2027.png)

   Diese Bilder sind 1800 × 1200 px groß und durchsichtig; jedes Teil steht
   darin schon an seinem Platz. Sie füllen die Kachel also einfach ganz aus.

   Der Schriftzug (bilder/kacheln/<schrift>-wort.png) ist dagegen auf seine
   Umrisse beschnitten, weil er laufen muss. Wo er steht, sagen vier Zahlen
   an seinem <div class="kachel__band"> in der index.html, in Pixeln der
   Vorlage:
     --wort-links  --wort-oben  --wort-breite  --wort-hoehe
   Bild und Zahlen liefert 1_Konzept/Werkzeuge/wort-schneiden.py.

   ZWEIZEILIGE SCHRIFTZÜGE (Muster: Wurstvogel Grotesk kursiv): Jede Zeile ist
   ein eigenes Bild (…-wort-1.png, …-wort-2.png) in einem eigenen Band mit
   eigenen vier Zahlen. Das zweite Band trägt zusätzlich die Klasse
   „kachel__band--2" und läuft mit --band-tempo-2 statt --band-tempo. Für
   jede Zeile gilt dieselbe Abstandsregel: Beim Loslaufen steht ihre nächste
   Kopie am rechten Kachelrand. Weil die Zeilen verschieden weit links
   beginnen und verschieden schnell laufen, dauert eine Runde je Zeile
   unterschiedlich lang — sie verschieben sich laufend gegeneinander.

   Was wann zu sehen ist:
     Ruhezustand   Schriftzug + Ladebalken (wechselt im Takt)
     Überfahren    dazu Vogelzeile und Release-Zeile; der Ladebalken wechselt
                   weiter, der Schriftzug läuft als Band durch
     Klickbild     (falls vorhanden) verdeckt alles, nur der Rahmen bleibt

   Das Band enthält das Wortbild dreimal hintereinander. Eine CSS-Animation
   (je Bild einzeln, alle im Gleichschritt — Grund bei „.band__lauf img")
   schiebt es gleichmäßig nach links, genau um eine „Strecke", und springt
   dann zurück — weil dort schon die nächste Kopie steht, sieht man den
   Sprung nicht. Die Strecke ist der Weg vom Start des Wortes bis zum rechten
   Kachelrand: Beim Loslaufen steht die zweite Kopie also genau am rechten
   Rand der weißen Fläche. Die Kachel schneidet ab, was über ihren Rand ragt.

   Maßeinheit „cqw": 1cqw = 1 % der Breite des umgebenden Containers, hier
   der Kachel. Dafür bekommt die Band-Ebene „container-type: inline-size". So
   skaliert alles mit der Kachel, ohne Skript. Tempo, Abstand und die
   Feinverschiebung der Teile sind Stellschrauben in Abschnitt 1.

   Gelaufen wird nur, solange der alternative Zustand zu sehen ist (Maus,
   Tastatur, Antippen). Danach steht das Wort sofort wieder an seinem Platz.
   Bei „Bewegung reduzieren" läuft es gar nicht.
   -------------------------------------------------------------------------- */

/* Der Schriftzug */
.kachel__band {
  position: absolute;
  inset: 0;
  z-index: 1;                              /* über den Ladebalken, unter Alternative und Klickbild */
  container-type: inline-size;             /* macht „cqw" verfügbar */
  overflow: hidden;
  pointer-events: none;

  --links:   calc(var(--wort-links)  / 1800 * 100cqw);
  --breite:  calc(var(--wort-breite) / 1800 * 100cqw);
  --zugabe:  calc(var(--band-zugabe) / var(--band-bezug) * 100cqw);
  /* Weg bis zur nächsten Kopie: vom Start des Wortes bis zum rechten Rand */
  --strecke: calc(100cqw - var(--links) + var(--zugabe));
  /* Dauer einer Runde = Strecke (in Pixeln bei Bezugsbreite) geteilt durch Tempo */
  --tempo:   var(--band-tempo);
  --dauer:   calc(((1 - var(--wort-links) / 1800) * var(--band-bezug) + var(--band-zugabe)) / var(--tempo) * 1s);
  /* Lücke zwischen zwei Bildern im Band, und der Weg einer ganzen Runde */
  --luecke:  calc(var(--strecke) - var(--breite));
  --weg:     var(--strecke);
}

/* BAND ALS FOLGE (Muster: Knalle, seit 13.10.2026): mehrere VERSCHIEDENE Bilder
   nacheinander statt eines Bildes endlos. Jedes Bild bringt seine Breite als
   „--b" mit; am Band stehen zusätzlich --folge-breite (Summe der Breiten einer
   Runde) und --folge-anzahl (Zahl der Bilder). Die Lücke ist überall dieselbe
   wie zwischen dem ersten und dem zweiten Bild. Eine Runde ist dann: alle
   Breiten plus so viele Lücken, wie es Bilder sind. Das Tempo bleibt
   --band-tempo — die Runde dauert nur entsprechend länger. */
.kachel__band--folge {
  --weg:   calc(var(--folge-breite) / 1800 * 100cqw + var(--folge-anzahl) * var(--luecke));
  --dauer: calc(((var(--folge-breite) / 1800
                  + var(--folge-anzahl) * (1 - var(--wort-links) / 1800 - var(--wort-breite) / 1800)) * var(--band-bezug)
                 + var(--folge-anzahl) * var(--band-zugabe)) / var(--tempo) * 1s);
}
.kachel__band--folge .band__lauf img { width: calc(var(--b) / 1800 * 100cqw); }

/* Zweite Zeile eines zweizeiligen Schriftzugs: eigenes Tempo */
.kachel__band--2 { --tempo: var(--band-tempo-2); }

.band__lauf {
  position: absolute;
  top:    calc((var(--wort-oben) - var(--vorlage-wort-hoeher)) / 1200 * 100%);
  height: calc(var(--wort-hoehe) / 1200 * 100%);
  left: var(--links);
  width: max-content;
  display: flex;
  column-gap: var(--luecke);
}

.band__lauf img {
  display: block;
  flex: none;
  width: var(--breite);
  height: 100%;
  max-width: none;
  /* Bewegt wird jedes Bild einzeln, nicht das Band als Ganzes (seit
     14.10.2026). Alle laufen gleich, das Ergebnis ist dasselbe. Grund:
     Safari zerlegt sehr breite bewegte Flächen (ab etwa 2000 px, beim
     Knalle-Band mit seinen sechs Bildern der Fall) in Teilstücke und hält
     nur die gerade sichtbaren bereit. Beim Zurückspringen am Rundenende
     fehlten die Teilstücke vom Anfang des Bandes — ein Bild lang war die
     Kachel weiß. Einzelne Bilder sind klein genug und immer ganz bereit. */
  animation: none var(--dauer) linear infinite;   /* „none": steht still, bis eine Regel unten den Namen setzt */
}

@keyframes kachel-band {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--weg))); }
}

/* Laufen — auf denselben drei Wegen, auf denen in 5b die Alternative erscheint */
@media (prefers-reduced-motion: no-preference) {
  .kachel:focus-visible .band__lauf img                      { animation-name: kachel-band; }
  @media (hover: hover) and (pointer: fine) {
    .kachel:hover .band__lauf img                            { animation-name: kachel-band; }
  }
  @media (hover: none) {
    .kachel.zeigt-alt .band__lauf img                        { animation-name: kachel-band; }
  }
}

/* Unter dem Klickbild ist das Wort weg */
.kachel.zeigt-klick .kachel__band { opacity: 0; }

/* Der Ladebalken: Er bleibt auch im alternativen Zustand sichtbar und in
   Bewegung — in 5b wird er sonst ausgeblendet, und das Bildwechsel-Skript
   hält ihn sonst an (es fragt dieselbe Klasse „kachel--vorlage" ab). Nur
   unter dem Klickbild ist er weg. */
.kachel--vorlage .kachel__zustand {
  /* --balken-tiefer: Zugabe einer einzelnen Kachel, am <button> gesetzt (sonst 0) */
  transform: translateY(calc((var(--balken-tiefer, 0) - var(--vorlage-balken-hoeher)) / 1200 * 100%));
}
.kachel.kachel--vorlage .kachel__zustand.ist-aktiv                                { opacity: 1; }
.kachel.kachel--vorlage.zeigt-klick .kachel__zustand.ist-aktiv                    { opacity: 0; }

/* Vogelzeile und Release-Zeile: zwei Bilder in der Ebene des alternativen
   Zustands (ein <div class="kachel__alt"> statt eines einzelnen Bilds) */
.kachel__original,
.kachel__release {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kachel__original { transform: translateY(calc(var(--vorlage-original-hoeher) / 1200 * -100%)); }
.kachel__release  { transform: translateY(calc(var(--vorlage-release-hoeher)  / 1200 * -100%)); }


/* ---- 5f  Rücksicht auf „Bewegung reduzieren" ------------------------------
   Wer diese Einstellung im Betriebssystem gesetzt hat, bekommt keine
   Animation, sondern nur den ersten Zustand. Das stellen Menschen ein, denen
   von Bewegung auf dem Bildschirm schwindlig oder übel wird. Geregelt im
   Skript am Ende der index.html: Es startet den Wechsel dann gar nicht.
   Der alternative Zustand funktioniert weiterhin.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   5b  DER FUSSBEREICH: FUSSBILD UND TEXTFUSS
   Seit 10.10.2026, Vorlage 1_Konzept/Referenzen/eigene_website/
   referenzbild footer1.png. Ein Bild (fuss-laser.png, 1600 × 1333 px, Format
   6 : 5, durchsichtiger Grund) über die ganze Fensterbreite — auch breiter
   als --seite-max, anders als das Raster. Der ganze Bereich wird mit einem
   negativen Abstand nach oben („margin-top") von unten in das Kachelraster
   geschoben (Stellschraube --fussbild-ueberlappung in Abschnitt 1).

   AUFBAU: <footer class="fussbereich"> ist ein Raster mit EINER Zelle, in
   der zwei Blätter übereinanderliegen: das Bild (.fussbild) und der Text
   (.fuss). Die Zelle ist so hoch wie das Bild; der Text sitzt darin unten.

   EBENEN: Das Bild hat „z-index: -1" — dieselbe Nummer wie die weiße Fläche
   jeder Kachel (.kachel::before). Bei gleicher Nummer gewinnt, was in der
   index.html später steht: das Bild. Es liegt also über den weißen Flächen
   und unter allem Übrigen — Kachel-Schleier, Schrift, Textfuß. Genau die
   Ebene des Wurstvogels:
     grauer Seitengrund → weiße Kachelfläche → FUSSBILD → Schleier → Schrift
   Der Umweg über z-index −1 ist nötig, weil das Bild beim Scrollen
   einblendet (opacity): Ein halb durchsichtiges Element behandelt der
   Browser wie ein eigenes Blatt, und ohne eigene Nummer läge es dann über
   den Kacheln. Der Textfuß bekommt „position: relative" ohne Nummer — damit
   liegt er über dem Bild.

   HANDY (unter 700 px): Das Bild ist breiter als das Fenster
   (100 % geteilt durch --fussbild-handy-anteil) und nach links
   hinausgeschoben; .fussbild schneidet ab, was links übersteht. Die
   Prozentwerte von margin beziehen sich in CSS auf die BREITE des
   Elternelements — deshalb ergibt „Breite × 5/6" die Bildhöhe.
   -------------------------------------------------------------------------- */

.fussbereich {
  display: grid;
  /* Bildhöhe = Breite × 5/6; davon der Überlappungsanteil nach oben */
  margin-top: calc(-1 * var(--fussbild-ueberlappung) * 100% * 5 / 6);
  padding-bottom: var(--fussbild-luft-unten);
  /* Parallaxe: Das Bild wird vom Skript nach unten verschoben, bis es am
     Seitenende ankommt. Was dabei unter das Seitenende rutscht, wird hier
     abgeschnitten — sonst würde die Seite um die Verschiebung länger. Die
     Schnittkante liegt am Seitenende, also nie im Fenster. */
  overflow: hidden;
}

.fussbereich > * {
  grid-area: 1 / 1;                        /* beide Blätter in derselben Zelle */
}

.fussbild {
  position: relative;
  z-index: -1;                             /* siehe EBENEN oben */
  overflow: hidden;                        /* schneidet am Handy den linken Teil ab */
  pointer-events: none;                    /* fängt keine Klicks ab */
  will-change: transform, opacity;         /* läuft mit und blendet ein (Skript) */
}

.fussbild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1333;               /* reserviert den Platz, bevor das Bild geladen ist (loading="lazy") */
}

@media (max-width: 699px) {
  .fussbereich {
    margin-top: calc(-1 * var(--fussbild-ueberlappung) * (100% / var(--fussbild-handy-anteil)) * 5 / 6);
  }
  .fussbild img {
    max-width: none;                       /* hebt „img { max-width: 100% }" aus Abschnitt 2 auf */
    width: calc(100% / var(--fussbild-handy-anteil));
    margin-left: calc(100% - 100% / var(--fussbild-handy-anteil));   /* negativ: nach links hinaus */
  }
}


/* --------------------------------------------------------------------------
   6  DER TEXTFUSS — seit 15.10.2026 ein Bild
   Stefans Vorlage kachel-footer1.png (3600 × 830 px) als fuss-text.png,
   am Handy (unter 700 px) fuss-text-handy.png (1800 × 917 px: linke Hälfte,
   Copyright-Zeile darunter). Welches Bild geladen wird, entscheidet das
   <picture> in der index.html — hier wird nur die Lage geregelt. Beide
   Bilder baut 1_Konzept/Werkzeuge/fuss-bauen.py.

   Das Bild ist so breit wie das Kachelraster (--seite-max abzüglich --rand),
   wie der Kopf: Stefans 3600-px-Vorlagen meinen immer diese Breite. Es liegt
   über dem (zurzeit ausgeblendeten) Laser-Bild, unten links in der Zelle;
   oben bekommt es so viel Innenabstand, wie das Laser-Bild in das Raster
   hineinragt (dieselbe Rechnung wie in 5b) — bei ausgeblendetem Laser-Bild
   nur --fuss-luft-oben-ohne-bild (Abschnitt 6a).

   KLICKFLÄCHEN: Weil die Schrift ein Bild ist, liegen über „info@wurstvogel.de"
   und „Instagram" zwei unsichtbare Links (.fuss__link). Ihre Lage ist in
   Prozent der Bildfläche angegeben (links, oben, Breite, Höhe) und wurde mit
   fuss-bauen.py gemessen — für beide Bilder getrennt, weil die Handy-Fassung
   anders geschnitten ist. Wird die Vorlage neu gesetzt, die Werte aus der
   Ausgabe des Werkzeugs hier nachtragen.

   Bis 15.10.2026 stand hier echter Text (Contact · Imprint · Legal, alles
   Platzhalter) — 5_Archiv/website-2026-10-15-vor-vorlaeufig-online/.
   -------------------------------------------------------------------------- */

.fuss {
  position: relative;                      /* ohne z-index: liegt über dem Laser-Bild (z-index −1) */
  align-self: end;                         /* unten in der Zelle */
  justify-self: center;
  width: 100%;
  max-width: var(--seite-max);
  padding: calc(var(--fussbild-ueberlappung) * (100% / var(--fussbild-handy-anteil)) * 5 / 6 + var(--fuss-luft-oben))
           var(--fuss-freiraum-rechts-handy) var(--fuss-luft-unten) var(--rand);
  /* Der Innenabstand oben liegt über den Kacheln: Dort darf der Fuß keine
     Maus abfangen (sonst reagieren die Kacheln nicht auf Hover). Nur das
     Bild selbst ist anklickbar. */
  pointer-events: none;
}

@media (min-width: 700px) {
  .fuss {
    padding-top: calc(var(--fussbild-ueberlappung) * 100% * 5 / 6 + var(--fuss-luft-oben));
    padding-right: var(--fuss-freiraum-rechts);
  }
}

.fuss__bild {
  position: relative;                      /* Bezug für die Klickflächen */
  pointer-events: auto;
  /* Lage der Klickflächen im HANDY-Bild (1800 × 917 px), gemessen 15.10.2026
     (Bild seit dem Nachmittag höher: Copyright-Zeile mit dreifachem Abstand) */
  --mail-links:        10.94%;
  --mail-oben:         39.26%;
  --mail-breite:       27.72%;
  --mail-hoehe:         6.22%;
  --instagram-links:   11.00%;
  --instagram-oben:    47.55%;
  --instagram-breite:  13.22%;
  --instagram-hoehe:    5.78%;
}

@media (min-width: 700px) {
  /* Lage der Klickflächen im RECHNER-Bild (3600 × 830 px), gemessen 15.10.2026 */
  .fuss__bild {
    --mail-links:        5.47%;
    --mail-oben:        43.37%;
    --mail-breite:      13.86%;
    --mail-hoehe:        6.87%;
    --instagram-links:   5.50%;
    --instagram-oben:   52.53%;
    --instagram-breite:  6.61%;
    --instagram-hoehe:   6.39%;
  }
}

.fuss__bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die unsichtbaren Links: etwas größer als die Schrift (Zugabe rundum),
   damit Maus und Finger sie leicht treffen. */
.fuss__link {
  position: absolute;
  --zugabe: 6px;
  left:   calc(var(--l) - var(--zugabe));
  top:    calc(var(--o) - var(--zugabe));
  width:  calc(var(--b) + 2 * var(--zugabe));
  height: calc(var(--h) + 2 * var(--zugabe));
}
.fuss__link--mail      { --l: var(--mail-links);      --o: var(--mail-oben);      --b: var(--mail-breite);      --h: var(--mail-hoehe); }
.fuss__link--instagram { --l: var(--instagram-links); --o: var(--instagram-oben); --b: var(--instagram-breite); --h: var(--instagram-hoehe); }

.fuss__link:focus-visible {
  outline: 2px solid var(--leiste-hover);
  outline-offset: 2px;
}

/* ---- 6a  Schalter: Fußbild ausgeblendet ------------------------------------
   Seit 13.10.2026. Trägt der <footer> zusätzlich die Klasse
   „fussbereich--ohne-bild", verschwindet das Laser-Bild samt seinem Platz:
   Der Bereich schiebt sich nicht mehr ins Kachelraster, der Fuß steht über
   die volle Breite unter den Kacheln (rechts muss kein Kopf mehr frei
   bleiben). Das Bild wird dann auch nicht geladen. Klasse in der index.html
   löschen = alles wieder wie vorher; an den Regeln in 5b und 6 wurde nichts
   geändert. */
.fussbereich.fussbereich--ohne-bild           { margin-top: 0; padding-bottom: 0; }
.fussbereich.fussbereich--ohne-bild .fussbild { display: none; }
.fussbereich.fussbereich--ohne-bild .fuss {
  padding-top:   var(--fuss-luft-oben-ohne-bild);
  padding-right: var(--rand);
}


/* --------------------------------------------------------------------------
   7  (frei) — hier stand bis 15.10.2026 die TESTLEISTE des Prototyps
   (schwarzer Balken unten mit „Maus/Touch"). Sie ist mit der vorläufigen
   Online-Fassung entfernt; die Regeln liegen in
   5_Archiv/website-2026-10-15-vor-vorlaeufig-online/stil/stil.css.
   -------------------------------------------------------------------------- */