/* Marketing-Website β€” Geruest nach `prototyp/index-v6.html` (von Mark abgenommen 26.08.2026). * **Farben, Schrift und Form ausschliesslich aus `marke.css`** (`--web-*`). * * πŸ”΄ Kein einziger Hex-Wert in dieser Datei. Ein Test prueft das β€” dieselbe Zusicherung wie bei * `kurs.css`: Ein zweiter Farbort driftet, sobald jemand β€žnur schnell" hier eine Farbe setzt. * Das gilt auch fuer nackte `rgba()`-Werte: Der Kopfschleier und der Fuss-Grund stehen als * `--web-kopf-schleier` und `--web-bg-fuss` in `marke.css`, nicht hier. * * πŸ”΄ **Berichtigt am 26.08.2026 (Regel 17).** Hier stand: β€žKeine Webfonts. Der Prototyp nennt * Cinzel/Cormorant/Inter; die kaemen von Google und waeren bei jedem Aufruf eine Verbindung zu * einem Dritten." Die Begruendung war richtig β€” sie galt der **Quelle**, nicht der Schrift. * Seit Scheibe 1 liegen die Schnitte selbst im Repo (`core/static/core/fonts/`, `@font-face` in * `marke.css`); ein Dritter wird dabei nicht angefasst. Der Satz β€žder Systemstapel traegt" gilt * damit nicht mehr: Versalien und Sperrung machen den Deco-Charakter **mit** der Schrift. * * πŸ”΄ **Berichtigt am 27.08.2026 (Regel 17, Regel 02).** Hier stand: β€žWas hier NICHT steht: Hero * mit Wappen, die drei Saeulen, Zahlenband, Faktenkasten, Bilder und Logos β€” Scheibe 2." Der Satz * war richtig, solange es Scheibe 2 noch nicht gab. **Die drei Saeulen, das Zahlenband und der * Faktenkasten stehen jetzt hier** (Auftrag 2026-08-27-0116). * * πŸ”΄ **Berichtigt am 03.09.2026 (Regel 17, Scheibe 3, Auftrag 2026-09-01-1840).** Hier stand: * β€žWas weiterhin NICHT hier steht: der rahmenlose Hero mit Wortmarke und Cocktailschale sowie * jedes Bild und jedes Logo β€” beides braucht Bilddateien und kommt mit Scheibe 3." Die Bilder * liegen jetzt unter `core/static/core/web/` (Herkunft je Datei: `web/HERKUNFT.md`), **der Hero * traegt sie und sechs der acht Wappenplaetze auch.** Zwei Plaetze β€” Fun4Four und Events β€” * behalten den Platzhalter, weil es die Logos nicht gibt; das ist kein Zwischenstand. * * πŸ”΄ **Was hier NICHT steht: eine zweite Farbe.** Auch die Verlaeufe des Heros und die * Kontur-Schatten sind Farbaussagen und stehen als Token in `marke.css`. Hier steht ihre Form. */ @import url("marke.29256710142f.css"); @import url("web-formular.210d5a79f074.css"); * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--web-bg); color: var(--web-text); font-family: var(--web-schrift); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* πŸ”΄ Korn β€” taktile Tiefe, damit keine Flaeche tot wirkt. Ein SVG-Rauschen als Data-URI: kein * zweiter Abruf, kein Bild im Repo. `pointer-events:none` und eine niedrige Ebene, damit es * ueber nichts Bedienbarem liegt; 0.035 Deckkraft ist der Wert aus dem abgenommenen Prototyp. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035; background-image: url("data:image/svg+xml;utf8,"); } /* Display-Schrift fuer die Ueberschriften β€” der Deco-Charakter. `text-wrap:balance` verhindert * die einsame letzte Silbe in einer Zeile; wo der Browser es nicht kennt, aendert sich nichts. */ h1, h2, h3 { font-family: var(--web-display); font-weight: 700; line-height: 1.15; letter-spacing: .02em; text-wrap: balance; } /* πŸ”΄ `strong` auf 600 statt 700: Ausgeliefert ist Inter 400 und 600. Bei 700 muesste der Browser * einen Fettschnitt **rechnen** β€” das sieht auf jedem Geraet anders aus. Lieber der Schnitt, den * wir wirklich haben (Auftrag Β§2.1, β€žnur ausliefern, was benutzt wird"). */ strong, b { font-weight: 600; } a { color: var(--web-gold); } a:hover { color: var(--web-gold-hell); } .w-wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; } /* ── Kopf / Navigation ──────────────────────────────────────────────────────────── */ /* Der Kopf liegt **ueber** dem Inhalt statt daneben: getoenter Schleier plus Weichzeichner. * Wo `backdrop-filter` fehlt, traegt der Schleier allein β€” die Leiste bleibt lesbar. */ .w-kopf { border-bottom: 1px solid var(--web-linie); background: var(--web-kopf-schleier); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); position: sticky; top: 0; z-index: 50; } .w-kopf .w-wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; position: relative; } .w-marke { font-family: var(--web-display); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--web-gold); text-decoration: none; font-size: 1.05rem; min-height: var(--web-tap); display: inline-flex; align-items: center; } .w-marke span { color: var(--web-gold-tief); } /* πŸ”΄ **Kein Umbruch** (Auftrag 2026-10-15-0330): Mit `flex-wrap: wrap` und zwΓΆlf Punkten brach der Kopf * je Seite und Sprache verschieden um (MenΓΌ ΓΌber der Marke, β€žEnglishβ€œ in eigener Zeile). Jetzt sieben * Punkte, `nowrap`, und der Sprachknopf ist ein eigenes Element daneben. Gemessen 1000–1920 px, DE und * EN: eine Zeile (`bin/web-kopf-0330-sichtprobe.py`). */ .w-nav { display: flex; gap: 1.15rem; margin-left: auto; flex-wrap: nowrap; align-items: center; } .w-nav a, .w-gruppe-knopf { white-space: nowrap; } .w-nav a { position: relative; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; color: var(--web-leise); min-height: var(--web-tap); display: inline-flex; align-items: center; transition: color .2s ease; } /* Der Unterstrich waechst von links β€” dieselbe Bewegung wie der Eyebrow-Strich, damit die Seite * eine Handschrift hat und nicht zwei. */ .w-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 12px; height: 1px; background: var(--web-gold); transition: right .28s cubic-bezier(.4, 0, .2, 1); } .w-nav a:hover { color: var(--web-gold); } .w-nav a:hover::after, .w-nav a[aria-current="page"]::after { right: 0; } .w-nav a[aria-current="page"] { color: var(--web-gold); } .w-nav a:focus-visible { outline: 2px solid var(--web-gold-hell); outline-offset: 3px; } /* Gruppen mit UntermenΓΌ (Billard & Darts, Events & Gruppen). Offen bei Hover, bei Fokus darin * (Tab β€” auch ohne JavaScript) und nach Klick (`.offen`); Esc setzt `.zu` (`web.js`). */ .w-gruppe { position: relative; display: flex; align-items: center; } .w-gruppe-knopf { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; color: var(--web-leise); min-height: var(--web-tap); display: inline-flex; align-items: center; transition: color .2s ease; } .w-gruppe-knopf::after { content: "β–Ύ"; margin-left: .35em; font-size: .9em; } .w-gruppe-knopf:hover, .w-gruppe.aktiv > .w-gruppe-knopf, .w-gruppe.offen > .w-gruppe-knopf { color: var(--web-gold); } .w-gruppe-knopf:focus-visible { outline: 2px solid var(--web-gold-hell); outline-offset: 3px; } .w-unter { position: absolute; top: 100%; left: -1rem; min-width: 11rem; z-index: 60; display: none; flex-direction: column; padding: .35rem 1rem; background: var(--web-bg-2); border: 1px solid var(--web-linie); } .w-gruppe:hover > .w-unter, .w-gruppe:focus-within > .w-unter, .w-gruppe.offen > .w-unter { display: flex; } .w-gruppe.zu > .w-unter { display: none; } /* πŸ”΄ Aufklapp-Navigation unter 1000 px β€” **ohne JavaScript**: `
` traegt es allein * (Auftrag Β§2.4). Elf Punkte a 48 px brechen sonst bei 375 px ueber drei Zeilen um. * * Die Punkte stehen **einmal** in `web/_menuepunkte.html` und werden zweimal eingebunden β€” die * Liste zweimal abzuschreiben waere die Kopie, die beim naechsten neuen Punkt vergessen wird * (Regel 02). Ueber 1000 px ist der Aufklapper aus, darunter die Reihe. */ .w-mobilnav { display: none; margin-left: auto; } .w-mobilnav > summary { list-style: none; cursor: pointer; width: var(--web-tap); height: var(--web-tap); display: grid; place-items: center; color: var(--web-gold); font-size: 1.3rem; border: 1px solid var(--web-linie); } .w-mobilnav > summary::-webkit-details-marker { display: none; } .w-mobilnav > summary:focus-visible { outline: 2px solid var(--web-gold-hell); outline-offset: 2px; } /* πŸ”΄ **`display:none` als Grundzustand β€” gehaertet am 27.08.2026** (Auftrag …-0116 Β§2.5, Punkt 2). * Hier stand `display:flex` **ohne** `[open]`-Bedingung. Es funktionierte, weil `
` den * Inhalt trotzdem nicht rendert (bei der Abnahme von Scheibe 1 gemessen: `innerText` leer, * `elementFromPoint` trifft nie einen Eintrag) β€” aber Β§13 jenes Berichts warnt selbst davor, den * Inhalt eines `
` per CSS zu steuern. Mit der Bedingung haengt es nicht mehr an dieser * Browsergunst. Haertung, kein Fehler. */ .w-mobilliste { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; background: var(--web-bg-2); border-block: 1px solid var(--web-linie); padding: .5rem 1.25rem 1.25rem; z-index: 50; } .w-mobilnav[open] .w-mobilliste { display: flex; } .w-mobilliste a { min-height: var(--web-tap); display: flex; align-items: center; color: var(--web-leise); text-decoration: none; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--web-linie); } .w-mobilliste a:last-child { border-bottom: none; } .w-mobilliste a[aria-current="page"] { color: var(--web-gold); } /* Gruppen im Aufklapper: Überschrift, Unterpunkte eingerΓΌckt (Auftrag 2026-10-15-0330). */ .w-mobilgruppe { display: flex; flex-direction: column; border-bottom: 1px solid var(--web-linie); } .w-mobilgruppe-titel { min-height: var(--web-tap); display: flex; align-items: center; color: var(--web-leise); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .w-mobilgruppe.aktiv > .w-mobilgruppe-titel { color: var(--web-gold); } .w-mobilgruppe a { padding-left: 1.2rem; } .w-mobilgruppe a:last-child { border-bottom: none; } /* Der Sprachknopf β€” seit Auftrag 2026-10-15-0330 ein eigenes Element rechts außen im Kopf, nicht mehr * im MenΓΌ. `flex: none`: er schrumpft und bricht nicht. Unter 1000 px steht er vor dem Aufklapper. */ .w-sprache { flex: none; white-space: nowrap; color: var(--web-leise); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; min-height: var(--web-tap); display: inline-flex; align-items: center; padding-left: 1.15rem; border-left: 1px solid var(--web-linie); } .w-sprache:hover { color: var(--web-gold); } .w-sprache:focus-visible { outline: 2px solid var(--web-gold-hell); outline-offset: 3px; } /* ── Eyebrow-Tick: goldener Haarlinien-Strich vor jeder Rubrik ──────────────────── */ .w-eyebrow { text-transform: uppercase; letter-spacing: .24em; font-size: .7rem; font-weight: 600; color: var(--web-gold-tief); display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .w-eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--web-gold-tief); flex: none; } /* ── Hero ───────────────────────────────────────────────────────────────────────── */ .w-hero { padding: clamp(3rem, 9vw, 6rem) 0; border-bottom: 1px solid var(--web-linie); position: relative; overflow: hidden; } /* πŸ”΄ **Mindestens das 2,4-fache des Fliesstextes, auch auf 390 px** (Auftrag …-1840 Β§3). * Hierarchie ist keine Schreibtischfrage: Der untere Anschlag ist deshalb `2.4rem` und nicht * `1.9rem` wie bis zum 03.09.2026 β€” bei 16 px Fliesstext sind das genau 2,4x. Nach oben deckelt * `3.35rem`; `3.9vw` dazwischen ist der Wert aus dem abgenommenen Prototyp. */ .w-hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.35rem); line-height: 1.15; margin: .6rem 0 1rem; letter-spacing: .01em; max-width: 19ch; } /* πŸ”΄ **`:not(.w-eyebrow)` β€” und das war ein Fehler, kein Feinschliff** (gefunden 03.09.2026). * Hier stand `.w-hero p`. Das ist (0,1,1) und damit **spezifischer als `.w-eyebrow`** (0,1,0): * Die Rubrikzeile ueber der Ueberschrift bekam auf **jeder** Seite die Fliesstextgroesse und die * leise Textfarbe statt `.7rem` in Gold β€” sie sah aus wie ein zweiter Vorspann. Aufgefallen ist * es beim Hero-Umbau, verursacht wurde es in Scheibe 1. * * Dieselbe Lehre wie bei der Saeulen-Kopplung: **kein Rennen veranstalten.** Nicht `.w-eyebrow` * spezifischer machen (das naechste Element haette dasselbe Problem), sondern das ausnehmen, * was nicht gemeint ist. `test_die_rubrikzeile_im_hero_wird_nicht_ueberstimmt` haelt es fest. */ .w-hero p:not(.w-eyebrow) { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--web-leise); max-width: 46rem; } /* ── Der rahmenlose Hero der Startseite (Auftrag 2026-09-01-1840 Β§3) ───────────────────────── * * πŸ”΄ **Nur die Startseite traegt das Foto.** Die Unterseiten benutzen denselben `.w-hero` β€” ohne * die zusaetzliche Klasse bleiben sie, wie sie waren. Ein Foto auf zehn Seiten waere zehnmal * derselbe Abruf fuer eine Wand, die nur einmal etwas erzaehlt. * * πŸ”΄ **Zwei Fassungen des Fotos, umgeschaltet an der Breite** β€” nicht per `image-set()`: Das * waehlt nach Pixeldichte, nicht nach Breite, und ein Telefon mit 3x-Display holte dann die * grosse Datei fuer einen 390-px-Ausschnitt. Ladezeit ist hier keine Kosmetik (ADR-002: Tempo * ist Rankingfaktor); der Unterschied ist 78 KB gegen 140 KB. Der Bruch ist derselbe wie fuer Menue * und Saeulen β€” ein Layout, ein Umschaltpunkt. Der Verlauf steht in beiden * Regeln als **dasselbe Token** β€” es gibt keine zweite Farbe, nur eine zweite Datei. */ .w-hero-start { border-bottom: none; } .w-hero-start::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--web-hero-schleier), url("web/hero-goldberg-1000.05aae20847db.webp") center right/cover no-repeat; } @media (min-width: 1000px) { .w-hero-start::before { background-image: var(--web-hero-schleier), url("web/hero-goldberg-1600.79f445ae35ba.webp"); } } .w-hero-start::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--web-hero-vignette); } /* Asymmetrisch: der Text traegt mehr Gewicht als die Marke daneben. */ .w-herogrid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 3rem; align-items: center; } /* πŸ”΄ **Kein Kasten, kein Rand** (Mark, 26.08.2026). Die Tiefe kommt aus zwei Scheiben hinter der * Marke und aus Schatten an der **Kontur** β€” `drop-shadow`, nicht `box-shadow`: Ein Rechteck um * einen freigestellten Schriftzug waere genau der Rahmen, der hier weg soll. */ .w-wappen { position: relative; text-align: center; } .w-wappen::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none; background: var(--web-hero-scheiben); } .w-wappen .w-wort { width: min(100%, 19rem); height: auto; display: block; margin: 0 auto .7rem; position: relative; filter: var(--web-schatten-wortmarke); } .w-wappen .w-glas { width: min(58%, 11rem); height: auto; display: block; margin: 0 auto; position: relative; filter: var(--web-schatten-glas); transition: transform .55s cubic-bezier(.2, .7, .3, 1), filter .55s ease; } .w-wappen:hover .w-glas { transform: translateY(-8px) scale(1.03); filter: var(--web-schatten-glas-hoch); } .w-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; } /* Der Knopf fuellt sich beim Ueberfahren von links β€” die Flaeche kommt, der Rahmen bleibt. * `overflow:hidden` haelt die Fuellung in der Form; `z-index:-1` legt sie unter die Schrift. */ /* `.w-btn` steht in `web-formular.css` (Auftrag 2026-10-04-0130): Der Absendeknopf der Anfragemaske braucht ihn auch in der Buchungsstrecke. */ /* ── AngebotsblΓΆcke ─────────────────────────────────────────────────────────────── */ .w-block { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; } .w-block.wechsel { background: var(--web-bg-2); border-block: 1px solid var(--web-linie); } .w-karten { display: grid; gap: 1rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .w-karte { border: 1px solid var(--web-linie); border-radius: var(--web-radius); background: var(--web-karte); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; } /* `h2` auf der Startseite (Karten direkt unter dem `h1`), `h3` auf der Bar-Seite (unter einem * `h2`) β€” dasselbe Aussehen, die Ebene folgt der Gliederung (Auftrag 2026-10-06-1002). */ .w-karte h2, .w-karte h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; } .w-karte p { margin: 0; color: var(--web-leise); font-size: .92rem; flex: 1; } /* πŸ”΄ **Trefferflaeche, nachgezogen am 27.08.2026** (Auftrag 2026-08-27-0116 Β§2.5, Punkt 1). Diese * fuenf Links waren **21 px** hoch β€” Altbestand, schon das alte `web.css` gab ihnen keine * Mindesthoehe. `ui-gast` verlangt 48 px fuer alles, was angetippt wird. Aufgefallen sind sie * erst, als bei der Abnahme von Scheibe 1 mit dem **vollen** Selektor gemessen wurde * (`a, button, summary, input, select, textarea`) statt nur nach Knoepfen zu sehen. * `align-self:flex-start` haelt den Link schmal β€” die Flaeche waechst nach unten, nicht die * Klickbreite ueber die ganze Karte. */ .w-karte .w-mehr { text-decoration: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; min-height: var(--web-tap); display: inline-flex; align-items: center; align-self: flex-start; } /* Noch nicht gebaute Ziele erscheinen als Text, nicht als Link (siehe Vorlage). */ .w-karte .w-bald { color: var(--web-leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; } /* Die Wege der Kontaktseite (Auftrag 2026-10-08-0043): Die Überschrift **ist** der Link β€” fΓΌnf * gleichlautende β€žWeiterβ€œ-Links wΓ€ren fΓΌr einen Screenreader fΓΌnfmal dasselbe. TrefferflΓ€che wie * `.w-mehr` oben (`ui-gast`: 48 px). */ .w-karte h3 a { min-height: var(--web-tap); display: inline-flex; align-items: center; } /* ── Fakten-Leiste ──────────────────────────────────────────────────────────────── */ .w-fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.4rem; color: var(--web-leise); font-size: .9rem; } .w-fakten b { color: var(--web-text); font-weight: 600; } /* ── Kurstermine + Konfetti-Fenster (Auftrag 2026-09-15-2104) ─────────────────────────────── * Die Liste ist Text aus dem Kursregister; das Fenster entsteht erst auf Klick (`konfetti.js`). * πŸ”΄ **Der Fuss mit Konfettis Logo steht auf hellem Grund.** Das Logo aus dem Snippet ist schwarz * (`full-logo-color-black`) und das Skript faerbt den Link schwarz β€” auf `--web-bg` waere beides * unsichtbar. */ .w-termine { list-style: none; padding: 0; margin: 1.2rem 0 0; } .w-termine li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--web-linie); } .w-termine b { color: var(--web-text); font-weight: 600; } /* Die Abende auf der Events-Seite (Auftrag 2026-10-15-0331): Karte im Stil von `.w-karte`, Flyer links, * Text rechts; unter 620 px untereinander. Das Archiv steht gedΓ€mpft β€” vorbei ist vorbei. */ .w-events { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); } .w-event { display: flex; gap: 1.1rem; padding: 1rem; background: var(--web-karte); border: 1px solid var(--web-linie); border-radius: var(--web-radius); } .w-event-flyer { width: 7.5rem; height: auto; flex: none; align-self: flex-start; border-radius: calc(var(--web-radius) / 2); } .w-event-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .w-event-text time { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--web-gold); } .w-event-text h4 { margin: 0; font-size: 1.02rem; letter-spacing: .03em; } .w-event-text p { margin: 0; color: var(--web-leise); font-size: .9rem; } .w-event-text p.w-event-zeile { font-size: .82rem; letter-spacing: .04em; } .w-event-text p.w-event-reihe { font-size: .78rem; letter-spacing: .08em; margin-bottom: -.25rem; } /* GedΓ€mpft ΓΌber FlΓ€che und Bild, nicht ΓΌber `opacity` β€” die WΓ€chter halten jede Regel fest, die etwas * ohne JavaScript unsichtbarer macht (`tests_web_bilder.BewegungTest`). */ .w-events.vorbei .w-event { background: transparent; } .w-events.vorbei .w-event-flyer { filter: saturate(.55); } .w-events.vorbei .w-event-text time { color: var(--web-leise); } @media (max-width: 620px) { .w-events { grid-template-columns: 1fr; } .w-event-flyer { width: 6rem; } } .w-konfetti:empty { display: none; } .w-konfetti { margin-top: 1.4rem; } .w-konfetti #konfetti_footer { background: var(--web-text); color: var(--web-bg); border-radius: var(--web-radius); padding: .35rem .7rem; font-size: .8rem; } /* ── Die drei SΓ€ulen: Trinken Β· Spielen Β· Feiern ───────────────────────────────────────────── * Auftrag 2026-08-27-0116 Β§2.1/Β§2.2, Vorlage `prototyp/index-v6.html`. * * πŸ”΄ **Ohne ein einziges Bild.** Alle acht Plaetze tragen den Platzhalter, auch die sechs mit * vorhandenem Logo β€” ein halb bebilderter Block saehe kaputt aus statt unfertig (Scheibe 3 * bringt die Logos; dann bekommt `.w-wa-bild` ein `` statt eines ``, und die Regeln * unten gelten unveraendert weiter, weil sie an der **Klasse** haengen und nicht am Element). */ .w-lead { color: var(--web-leise); max-width: 46rem; margin: .6rem 0 0; } .w-saeulen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2rem; } /* Der 1-px-Goldrand entsteht als Flaeche unter der Karte: aussen die Linienfarbe, darauf mit * `inset:1px` die Kartenflaeche β€” beide mit derselben Kerbung. Kein Bild, kein SVG. */ .w-saeule { --kerbe: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)); position: relative; padding: 1px; clip-path: var(--kerbe); background: var(--web-linie); transition: background .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1); } .w-saeule:hover { background: var(--web-gold-tief); transform: translateY(-4px); } .w-saeule::after { content: ""; position: absolute; inset: 1px; clip-path: var(--kerbe); background: var(--web-karte); z-index: 0; } .w-saeule > * { position: relative; z-index: 1; margin: 0; } .w-saeule h3 { padding: 1.6rem 1.6rem .2rem; font-size: 1.6rem; } /* πŸ”΄ **`minmax(0, 1fr)`, nicht `1fr`** β€” und das Dreierraster bleibt auch in der Saeule mit nur * zwei Plaetzen stehen. Beides gemessen, nicht vermutet: Mit blossem `1fr` bestimmt das laengste * Wort der Unterschrift die Spaltenbreite (im Prototyp machte β€žGETRAENKEKARTE" den Platz 114 px * breit, β€žPHILOSOPHIE" nur 88), und ohne das feste Dreierraster waeren die Plaetze der * Feiern-Saeule breiter als die der anderen beiden. */ .w-wappenreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1.1rem 1.6rem 1.2rem; } .w-wa { display: block; text-align: center; text-decoration: none; min-height: var(--web-tap); color: inherit; } .w-wa:focus-visible { outline: 2px solid var(--web-gold-hell); outline-offset: 3px; } /* πŸ”΄ **Der Platz ist die Klasse, nicht das Element** (Scheibe 2 hat das absichtlich so gebaut, * Scheibe 3 loest es ein). Seit dem 13.10.2026 tragen alle acht Plaetze ein `` * (Auftrag 2026-10-13-0208, Wappen Fun4Four und Events). Bis dahin trugen zwei β€” **Fun4Four * und Events, weil es die Logos nicht gab** β€” seit dem 30.09.2026 einen **leeren** Platz * `` (Auftrag 2026-09-30-0100, Mark: β€žerst mal die Platzhalter raus"); * er bleibt fuer jeden kuenftigen Platz ohne Bild (`None` in `core.web.SAEULEN`). * Er ist unsichtbar, aber so gross wie ein Wappen: Ohne ihn stuende die Unterschrift von Fun4Four * oben im Feld, die der Nachbarn darunter β€” die Reihe saehe verrutscht aus. * Hier stand bis dahin: β€žzwei weiterhin ein `` mit dem Platzhalter", und * die Regel `span.w-wa-bild` zeichnete den gestrichelten Kasten β€žLOGO FOLGT". Beides ist weg. * * πŸ”΄ **Die Groesse steht genau einmal**, in der Regel fuer beide Klassen. Wuerde sie zweimal * stehen, koennten Bild und leerer Platz auseinanderlaufen, sobald jemand eine davon anfasst β€” * und ein Bild darf den Platz nicht verschieben (Auftrag 2026-09-01-1840 Β§4). * `test_bild_und_leerer_platz_teilen_sich_die_groesse` haelt es fest. */ .w-wa-bild, .w-wa-leer { width: 100%; aspect-ratio: 1; } .w-wa-bild { clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)); transition: transform .3s cubic-bezier(.2, .7, .3, 1), border-color .3s ease, color .3s ease; } /* `display:block`, weil ein `` inline ist und `aspect-ratio` dort nicht greift; * `visibility:hidden` statt `display:none`, weil der Platz seine Hoehe behalten soll. */ .w-wa-leer { display: block; visibility: hidden; } /* πŸ”΄ `display:block` ist nicht Kosmetik: Ein `` ist von Haus aus inline und sitzt dann auf * der Grundlinie β€” darunter bliebe ein Spalt von einigen Pixeln, und der Platz waere hoeher als * der Platzhalter daneben. Ein `box-shadow` steht hier bewusst **nicht**: `clip-path` schneidet * ihn mit weg β€” er waere eine Regel, die nichts tut. * * πŸ”΄ **`height:auto` ist nicht Kosmetik** (Auftrag 2026-09-30-0090). Das Markup traegt * `width="320" height="320"`, damit der Platz vor dem Laden steht. Ohne `height:auto` bleibt die * Hoehe aus dem Attribut stehen, die Breite kommt aus der Spalte β€” beide Seiten sind dann * definit, und `aspect-ratio` greift **gar nicht** (es gilt nur, solange eine Seite `auto` ist). * Gemessen im Browser: 100 Γ— 320, sichtbar ein senkrechter Streifen des Logos, vom 03.09. bis * 30.09.2026 auf jeder Startseite. `.w-bild img` weiter unten hatte die Zeile die ganze Zeit. * Das Quadrat haelt `aspect-ratio`; `object-fit:cover` fuellt es nur, falls die Datei einmal * nicht quadratisch ist. * Hier stand bis zum 30.09.2026: β€ž`object-fit:cover` haelt das Quadrat, falls die Datei einmal * nicht quadratisch ist." β€” falsch zugeordnet: `cover` haelt keine Form, es fuellt eine; und die * Form, die es fuellte, war wegen der fehlenden Zeile kein Quadrat. */ img.w-wa-bild { display: block; height: auto; object-fit: cover; } /* Das Wappen einer Unterseite im Hero (Auftrag 2026-09-30-0100 Teil 2b). Diese Regel setzt nur den * Rahmen: Breite und Lage. Groesse, Kerbung und `height:auto` kommen aus den Regeln darueber β€” * das Bild darin ist dasselbe Bauteil wie im Saeulen-Block (`_wappenbild.html`). Rechts neben * Ueberschrift und Einleitung, weil es die Seite kennzeichnet und nicht den Text ersetzt; unter * 620 px ueber der Ueberschrift, kleiner, sonst draengt es den Text in eine schmale Spalte. */ .w-hero-wappen { float: right; width: clamp(6rem, 14vw, 9.5rem); margin: 0 0 1rem 1.5rem; } .w-wa-text { display: block; margin-top: .55rem; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--web-leise); transition: color .3s ease; line-height: 1.45; /* Trennen statt irgendwo umbrechen: `overflow-wrap:anywhere` machte im Prototyp * β€žGETRAENKEKAR-TE". Mit `hyphens` bricht Deutsch an der Fuge. */ hyphens: auto; -webkit-hyphens: auto; } .w-wa:hover .w-wa-bild { transform: translateY(-5px); border-color: var(--web-gold-tief); color: var(--web-gold); } .w-wa:hover .w-wa-text { color: var(--web-gold); } .w-beschreibung { padding: 0 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .65rem; font-size: .92rem; color: var(--web-leise); } .w-beschreibung span { transition: color .3s ease, opacity .3s ease; } .w-beschreibung b { color: var(--web-text); font-weight: 600; transition: color .3s ease; } /* ── Die Kopplung Platz ↔ Satz β€” ohne eine Zeile JavaScript ────────────────────────────────── * * πŸ”΄ **ACHTUNG SPEZIFITAET. Hier lag im Prototyp ein Fehler** (Mark, 26.08.2026: β€žueber den * ganzen Text liegt ein Overlay"). Zuerst wurden **alle** Saetze gedaempft und der getroffene * wieder aufgehellt. Das Zurueckholen verlor: Die Daempf-Regel endete auf `.w-beschreibung span` * (0,4,1), die Aufhell-Regel nur auf `[data-teil]` (0,4,0) β€” ein Element-Selektor mehr, also * gewann das Daempfen. Der hervorgehobene Satz war **mit** verdunkelt, waehrend sein Name in Gold * umschlug: sah aus wie eine Folie ueber allem, war aber ein verlorenes Rennen. * * **Jetzt gibt es kein Rennen.** Gedaempft wird ausschliesslich, was **nicht** gemeint ist * (`:not([data-teil=…])`); der getroffene Satz wird nie angefasst und kann darum auch nicht * ueberstimmt werden. Und `.58` statt `.38` β€” haerter wirkt wie ausgegraut statt zurueckgetreten. * * πŸ”΄ **Die Kennungen stehen auch in `core.web.SAEULEN`.** Sie muessen doppelt stehen: `:has()` * kann nicht ueber einen variablen Wert koppeln. `test_jede_kennung_ist_im_stil_gekoppelt_und_ * umgekehrt` haelt beide Listen gegeneinander β€” in **beide** Richtungen (Regel 02). */ .w-saeule:has([data-ziel="bar"]:hover) .w-beschreibung span:not([data-teil="bar"]), .w-saeule:has([data-ziel="mixtur"]:hover) .w-beschreibung span:not([data-teil="mixtur"]), .w-saeule:has([data-ziel="mixologie"]:hover) .w-beschreibung span:not([data-teil="mixologie"]), .w-saeule:has([data-ziel="partie"]:hover) .w-beschreibung span:not([data-teil="partie"]), .w-saeule:has([data-ziel="wurf"]:hover) .w-beschreibung span:not([data-teil="wurf"]), .w-saeule:has([data-ziel="fun4four"]:hover) .w-beschreibung span:not([data-teil="fun4four"]), .w-saeule:has([data-ziel="feier"]:hover) .w-beschreibung span:not([data-teil="feier"]), .w-saeule:has([data-ziel="events"]:hover) .w-beschreibung span:not([data-teil="events"]) { opacity: .58; } /* Der gemeinte Satz: heller, mit goldenem Anstrich am Rand. */ .w-saeule:has([data-ziel="bar"]:hover) .w-beschreibung span[data-teil="bar"], .w-saeule:has([data-ziel="mixtur"]:hover) .w-beschreibung span[data-teil="mixtur"], .w-saeule:has([data-ziel="mixologie"]:hover) .w-beschreibung span[data-teil="mixologie"], .w-saeule:has([data-ziel="partie"]:hover) .w-beschreibung span[data-teil="partie"], .w-saeule:has([data-ziel="wurf"]:hover) .w-beschreibung span[data-teil="wurf"], .w-saeule:has([data-ziel="fun4four"]:hover) .w-beschreibung span[data-teil="fun4four"], .w-saeule:has([data-ziel="feier"]:hover) .w-beschreibung span[data-teil="feier"], .w-saeule:has([data-ziel="events"]:hover) .w-beschreibung span[data-teil="events"] { color: var(--web-text); box-shadow: inset 3px 0 0 var(--web-gold); padding-left: .7rem; margin-left: -.7rem; } .w-saeule:has([data-ziel="bar"]:hover) .w-beschreibung span[data-teil="bar"] b, .w-saeule:has([data-ziel="mixtur"]:hover) .w-beschreibung span[data-teil="mixtur"] b, .w-saeule:has([data-ziel="mixologie"]:hover) .w-beschreibung span[data-teil="mixologie"] b, .w-saeule:has([data-ziel="partie"]:hover) .w-beschreibung span[data-teil="partie"] b, .w-saeule:has([data-ziel="wurf"]:hover) .w-beschreibung span[data-teil="wurf"] b, .w-saeule:has([data-ziel="fun4four"]:hover) .w-beschreibung span[data-teil="fun4four"] b, .w-saeule:has([data-ziel="feier"]:hover) .w-beschreibung span[data-teil="feier"] b, .w-saeule:has([data-ziel="events"]:hover) .w-beschreibung span[data-teil="events"] b { color: var(--web-gold); } /* … und umgekehrt: ueber dem Satz stehen hebt seinen Platz hervor. Im Prototyp fehlte diese * Richtung fuer die zwei Plaetze ohne Logo β€” sie zielte auf `img`. Hier zielt sie auf * `.w-wa-bild`, und damit gilt sie fuer alle acht. */ .w-saeule:has([data-teil="bar"]:hover) [data-ziel="bar"] .w-wa-bild, .w-saeule:has([data-teil="mixtur"]:hover) [data-ziel="mixtur"] .w-wa-bild, .w-saeule:has([data-teil="mixologie"]:hover) [data-ziel="mixologie"] .w-wa-bild, .w-saeule:has([data-teil="partie"]:hover) [data-ziel="partie"] .w-wa-bild, .w-saeule:has([data-teil="wurf"]:hover) [data-ziel="wurf"] .w-wa-bild, .w-saeule:has([data-teil="fun4four"]:hover) [data-ziel="fun4four"] .w-wa-bild, .w-saeule:has([data-teil="feier"]:hover) [data-ziel="feier"] .w-wa-bild, .w-saeule:has([data-teil="events"]:hover) [data-ziel="events"] .w-wa-bild { transform: translateY(-5px); border-color: var(--web-gold-tief); color: var(--web-gold); } /* Ohne Zeigegeraet gibt es kein β€ždarueberfahren" β€” dann steht alles gleichberechtigt da. */ @media (hover: none) { .w-saeule:has(.w-wa:hover) .w-beschreibung span { opacity: 1; } } /* ── Zahlenband ────────────────────────────────────────────────────────────────────────────── * πŸ”΄ `auto-fit` statt `repeat(4, 1fr)`: Fehlt eine Angabe im Register, faellt ihre Kachel weg β€” * mit vier festen Spalten bliebe an ihrer Stelle ein Loch. Bei 390 px ergibt es zwei Spalten, * am Schreibtisch vier. */ .w-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 2rem; text-align: center; } .w-zahl b { display: block; font-family: var(--web-display); font-weight: 400; color: var(--web-gold); font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; letter-spacing: .02em; } .w-zahl span { display: block; margin-top: .6rem; color: var(--web-leise); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; } /* ── Deko-Rahmen und Faktenkasten ──────────────────────────────────────────────────────────── * Der gekerbte Goldrahmen der Wappen, als CSS nachgebaut β€” das visuelle Reim-Element. Zwei * Ebenen wie bei der Saeule: goldene Flaeche, darauf 1 px eingesetzt die Kartenflaeche. */ .w-rahmen { --kerbe: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)); clip-path: var(--kerbe); background: var(--web-linie); padding: 1px; margin-top: 1.6rem; } .w-rahmen > * { clip-path: var(--kerbe); background: var(--web-karte); height: 100%; } .w-rahmen.gold { background: var(--web-gold-tief); } .w-faktenkasten { padding: 1.9rem; } .w-faktenkasten .w-zeile { display: flex; justify-content: space-between; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--web-linie); font-size: .95rem; } .w-faktenkasten .w-zeile:last-child { border-bottom: none; } .w-faktenkasten .w-zeile > span { color: var(--web-leise); } .w-faktenkasten .w-zeile b { color: var(--web-text); font-weight: 600; text-align: right; } .w-faktenkasten .w-tel { display: inline-flex; align-items: center; min-height: var(--web-tap); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .w-faktenkasten .w-tel:hover { border-color: var(--web-gold); } /* Saisonhinweis β€” ein Stilbruch in Miniatur: kuehles Zeichen in der warmen Palette. Ob er * ueberhaupt ausgeliefert wird, entscheidet der Server (`core.web._saison_laeuft`). */ .w-saison { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.8rem; padding: .5rem 1rem; border: 1px solid var(--web-linie); border-radius: 22px; background: var(--web-gold-schleier); color: var(--web-gold); font-size: .78rem; letter-spacing: .06em; } .w-saison span { color: var(--web-text); font-size: .9rem; } /* ── Bildplatzhalter: ehrlich leer statt gebrochenes Symbol ─────────────────────── */ .w-bildplatz { border: 1px dashed var(--web-linie); border-radius: var(--web-radius); background: var(--web-bg-2); color: var(--web-leise); display: grid; place-items: center; min-height: 12rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; } /* ── Ein echtes Foto, wo es eins gibt (Auftrag 2026-09-01-1840 Β§5) ─────────────────────────── * πŸ”΄ **Nur die Fassade bei Nacht.** Innen-, Drink- und Eventfotos gibt es nicht; dort bleibt der * Platzhalter oben stehen. Ehrlich leer schlaegt geliehen. * * Hochformat, deshalb gedeckelt: ueber die volle Spaltenbreite waere das Bild zwei Bildschirme * hoch. `height:auto` neben den `width`/`height`-Angaben im Markup β€” die stehen dort, damit der * Platz schon vor dem Laden stimmt und nichts springt. */ .w-bild { margin: 1.8rem 0 0; max-width: 26rem; } .w-bild img { width: 100%; height: auto; display: block; border-radius: var(--web-radius); } /* Das Innenfoto β€žBei unsβ€œ auf der Startseite (Auftrag 2026-10-13-0236): ΓΌber die ganze Breite statt * des schmalen Fassadenformats; der flache Zuschnitt steckt in der Datei, nicht im Stil. */ .w-bild.breit { max-width: none; margin-top: 0; } /* ── Rechtstexte in der Website-Huelle (Auftrag 2026-09-30-0100 Teil 1) ────────────────────────── * Impressum, Datenschutz und die Fassungen aus dem Archiv tragen ab `website_live` Kopfleiste und * Fuss der Website. Ihr **Text** ist unveraendert derselbe wie in der Gast-Huelle und bringt deren * vier Klassen mit (`g-rechtstext`, `g-warnung`, `g-fuss`, `g-widerruf`) β€” sie werden hier fuer * diesen Rahmen gesetzt, statt `gast.css` einzubinden: Das waere ein zweiter Farbort auf einer * Website-Seite. Gilt nur innerhalb von `.w-rechtstext`, damit nichts in die Gastseiten zurueckwirkt. */ .w-rechtstext .w-wrap { max-width: 46rem; } .w-rechtstext h1 { font-family: var(--web-display); color: var(--web-gold); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 1.4rem; hyphens: auto; overflow-wrap: anywhere; } /* `hyphens`/`overflow-wrap` (Auftrag 2026-10-13-0226, gemessen bei 390 px): β€žGeschΓ€ftsbedingungenβ€œ in * Cinzel ist breiter als die Spalte, die AGB-Seite scrollte 5 px quer. */ .w-rechtstext p, .w-rechtstext li { color: var(--web-leise); line-height: 1.6; } .w-rechtstext strong { color: var(--web-text); } .w-rechtstext a { color: var(--web-gold); } /* πŸ”΄ Gegliedert statt `pre-wrap` (Auftrag 2026-10-13-0226, `core.agb.gliederung`): KΓΆpfe als `h2` * in Display-Schrift und Gold, β€ž- β€¦β€œ als Liste, jede Zeile ein Absatz. Dieselben Werte stehen fΓΌr die * Gast-HΓΌlle in `gast.css` (`.g-wrap-recht`, `.g-rechtstext`) β€” wer einen Γ€ndert, Γ€ndert beide. */ .w-rechtstext .g-rechtstext { font-size: .95rem; line-height: 1.6; color: var(--web-leise); margin: 1rem 0; overflow-wrap: anywhere; } .w-rechtstext .g-rechtstext h2 { color: var(--web-gold); font-size: 1.15rem; line-height: 1.25; margin: 1.8rem 0 .75rem; } .w-rechtstext .g-rechtstext p { margin: 0 0 .75rem; } .w-rechtstext .g-rechtstext ul { margin: 0 0 .75rem; padding-left: 1.25rem; } .w-rechtstext .g-rechtstext li { margin: 0 0 .375rem; } .w-rechtstext .g-rt-kopf { color: var(--web-text); } .w-rechtstext .g-rt-schluss { font-size: .85rem; margin-top: 1.8rem; } .w-rechtstext .g-warnung { border: 1px solid var(--web-warn); background: var(--web-warn-weich); border-radius: var(--web-radius); padding: .8rem 1rem; color: var(--web-text); } .w-rechtstext .g-fuss { font-size: .85rem; margin-top: 2rem; } .w-rechtstext .g-widerruf { font-weight: 600; } /* ── Frage und Antwort (FAQ) und die Kleinschrift ──────────────────────────────────────────── * πŸ”΄ **Beide Klassen standen seit Scheibe 1 in den Vorlagen, ohne dass es sie im Stil gab** * (gefunden 03.09.2026): `.w-faq` auf jedem FAQ-Block, `.w-klein` auf dem Impressum-Verweis in * β€žUeber uns". Eine Klasse ohne Regel faellt niemandem auf β€” die Seite sieht nur unfertig aus. * `test_jede_klasse_aus_den_vorlagen_hat_eine_regel` faengt den naechsten Fall. */ .w-faq { margin: 0 0 1.6rem; } .w-faq h2 { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: .03em; } .w-faq p { margin: 0; color: var(--web-leise); } .w-faq + .w-faq { border-top: 1px solid var(--web-linie); padding-top: 1.6rem; } .w-klein { font-size: .85rem; color: var(--web-leise); } /* ── Fuss ───────────────────────────────────────────────────────────────────────── */ .w-fuss { border-top: 1px solid var(--web-linie); background: var(--web-bg-fuss); padding: 3.5rem 0 2.5rem; font-size: .85rem; color: var(--web-leise); } .w-fuss .w-wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; } .w-fuss nav { display: flex; flex-wrap: wrap; gap: 1.4rem; } /* 44 px statt 48: Der Fuss ist Pflichtprogramm, keine Hauptnavigation β€” aber unter die * Mindest-Trefferflaeche darf er trotzdem nicht (Skill `ui-gast`). */ .w-fuss nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .2s ease; } .w-fuss nav a:hover { color: var(--web-gold); } .w-fuss-link { color: inherit; display: inline-flex; align-items: center; min-height: 44px; } .w-fuss-link:hover { color: var(--web-gold); } /* Stufe 1 der Widerrufsfunktion (Auftrag 2026-09-27-0029, Nachtrag Punkt 4): hervorgehoben, * weil ein normaler Fußlink laut Auftrag nicht reicht β€” dieselbe Gold-FlΓ€che wie `.w-btn.prim`. */ .w-fuss nav a.w-widerruf { background: var(--web-gold); color: var(--web-gold-text); padding: 0 1rem; border-radius: 999px; font-weight: 600; } .w-fuss nav a.w-widerruf:hover { background: var(--web-gold-hell); color: var(--web-gold-text); } /* Ein fehlender Textbaustein ist sichtbar β€” nicht leer (Scheibe 1). */ .seitentext-fehlt { color: var(--web-gold-tief); font-family: monospace; font-size: .85em; } /* ── Formular: steht in `web-formular.css` (Auftrag 2026-10-04-0130) ───────────────────── * πŸ”΄ Ausgezogen, damit die Anfragemaske auch in der Buchungsstrecke steht, ohne dort die ganze * Website-Optik zu laden β€” und ohne zweite Kopie der Regeln. */ /* ── Inszenierter Seitenaufbau ────────────────────────────────────────────────────────────── * * πŸ”΄ **Alles haengt an `.js` am ``** β€” und die Klasse setzt in Scheibe 1 **niemand**. * Das ist Absicht: Ohne JavaScript steht die Seite vollstaendig da, und zwar sofort. Wer den * Aufbau ohne diese Bedingung baut, liefert eine Seite aus, die bei abgeschaltetem JavaScript * **unsichtbar** ist (`opacity:0` und niemand setzt sie zurueck) β€” der Fehler faellt beim * Entwickeln nie auf, weil dort JavaScript laeuft. * * Die Klasse und der Beobachter fuer `.reveal` kommen mit Scheibe 2, wenn es etwas zu * inszenieren gibt. Bis dahin sind das hier die Grundlagen (Auftrag Β§2.3) und kein toter Code: * Sie sind die Zusage, wie Bewegung auf dieser Seite auszusehen hat. */ @keyframes w-auf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes w-strich { from { width: 0; } to { width: 2.4rem; } } /* πŸ”΄ **Die Reihenfolge im Hero ist die Staffelung** β€” Eyebrow, Ueberschrift, Subline, Knoepfe. * Keine Klasse je Stufe in den Vorlagen: Die Reihenfolge steht ohnehin dort und waere sonst * zweimal gepflegt (Regel 02) β€” und jede neue Unterseite muesste daran denken. So bekommt jeder * Hero die Staffelung von selbst, auch der, den es noch nicht gibt. * * πŸ”΄ **Unter 700 ms fertig** (Auftrag …-1840 Β§6): letzte Stufe 300 ms + Dauer 380 ms = 680 ms. * Deshalb `.38s` und nicht die `.72s`, die Scheibe 1 hier als Vorrat hinterlassen hatte β€” * mit ihr waere die letzte Stufe erst nach 1,02 s stehengeblieben. `test_der_seitenaufbau_ist_ * unter_700_ms_fertig` rechnet es aus dem Stil nach. * * Der Ausschluss `:not(.w-herogrid)` ist noetig, weil der Hero der Startseite eine Spalte mehr * hat: Dort sind die Stufen die Kinder von `.w-herotext`, nicht die des Rahmens. Ohne ihn liefe * die Textspalte als Ganzes **und** jedes ihrer Kinder einzeln an. */ .js .w-hero > .w-wrap:not(.w-herogrid) > *, .js .w-herotext > *, .js .w-hero .w-wappen { opacity: 0; animation: w-auf .38s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d, 0ms); } .js .w-hero > .w-wrap:not(.w-herogrid) > *:nth-child(1), .js .w-herotext > *:nth-child(1) { --d: 60ms; } .js .w-hero > .w-wrap:not(.w-herogrid) > *:nth-child(2), .js .w-herotext > *:nth-child(2) { --d: 140ms; } .js .w-hero > .w-wrap:not(.w-herogrid) > *:nth-child(3), .js .w-herotext > *:nth-child(3) { --d: 220ms; } /* Ab der vierten Stufe bleibt es bei 300 ms β€” sonst haengt die Grenze daran, wie viele Absaetze * eine Seite hat, und die naechste faellt aus dem Rahmen, ohne dass jemand es merkt. */ .js .w-hero > .w-wrap:not(.w-herogrid) > *:nth-child(n+4), .js .w-herotext > *:nth-child(n+4) { --d: 300ms; } /* Die Marke kommt mit den Knoepfen, nicht danach. */ .js .w-hero .w-wappen { --d: 300ms; } .js .w-hero .w-eyebrow::before { animation: w-strich .42s ease forwards 60ms; } /* Scroll-Reveal: erst sichtbar, wenn die Sektion ins Bild kommt. Ohne `.js` ist alles da. */ .js .w-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); } .js .w-reveal.da { opacity: 1; transform: none; } /* ── Mobil ────────────────────────────────────────────────────────────────────────────────── * Die Grenze liegt bei 1000 px, nicht bei 768: Elf Menuepunkte a 48 px brauchen den Platz, und * ein Tablet im Querformat ist naeher am Telefon als am Schreibtisch. */ @media (max-width: 1000px) { .w-nav { display: none; } .w-mobilnav { display: block; margin-left: 0; } .w-sprache { margin-left: auto; border-left: 0; padding-left: 0; } /* Drei Saeulen nebeneinander waeren hier drei Spalten a drei Logoplaetzen β€” die Plaetze * kleiner als die Schrift darunter. Untereinander bleibt jede Saeule vollstaendig lesbar * (so auch im abgenommenen Prototyp). */ .w-saeulen { grid-template-columns: 1fr; gap: 1.2rem; } .w-zahlen { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; } /* Der Hero stapelt: Text oben, Marke darunter. Die Scheiben dahinter schrumpfen mit β€” mit * 34 rem stuenden sie auf 390 px weit ueber den Rand hinaus. */ .w-herogrid { grid-template-columns: 1fr; gap: 2.5rem; } .w-wappen .w-wort { width: min(100%, 16rem); } .w-wappen::before { width: 20rem; height: 20rem; } /* Ohne Textspalte daneben gehoert die Flaschenwand in die Mitte, nicht an den Rand. */ .w-hero-start::before { background-position: center; } } @media (max-width: 620px) { .w-hero-wappen { float: none; width: 5.5rem; margin: 0 0 1.1rem; } /* Ein Knopf, der neben einem zweiten auf 320 px steht, ist zweimal zu schmal zum Treffen. */ .w-cta .w-btn { flex: 1 1 100%; justify-content: center; } .w-wrap { width: min(100% - 1.5rem, 72rem); } } /* ── Wer keine Bewegung will, bekommt keine ──────────────────────────────────────────────── * πŸ”΄ Nicht nur β€žlangsamer": **aus**. Die Einstellung steht im Betriebssystem, weil Bewegung * Menschen mit vestibulaeren Stoerungen krank macht β€” eine abgeschwaechte Animation ist dann * keine Ruecksicht, sondern eine kleinere Zumutung. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } /* πŸ”΄ **Ohne diese Zeile waere die Seite leer.** Der Block darueber schaltet die Animation ab β€” * der Startwert `opacity: 0` bliebe aber stehen, und niemand setzte ihn je zurueck. Deshalb * traegt die Liste **jede** Regel nach, die oben mit `opacity: 0` beginnt. * `test_ohne_bewegung_bleibt_nichts_unsichtbar` haelt beide Listen gegeneinander. */ .js .w-hero > .w-wrap > *, .js .w-herotext > *, .js .w-hero .w-wappen, .js .w-reveal { opacity: 1 !important; transform: none !important; } }