/* ========================================================================== pages/gold.css Die Gewinnspielseite /gold/ – „Deckel finden, Gold gewinnen". EINE KAMPAGNENSEITE, KEINE INHALTSSEITE. Sie hat eine einzige Aufgabe: den Gewinncode entgegennehmen. Alles andere – Flaschen, Anleitung, Pflichttext – dient dieser einen Handlung und steht in der Reihenfolge, in der das Briefing sie aufzählt. OHNE NEUE FARBE UND OHNE NEUE SCHRIFT. Die Kampagne bringt ihr eigenes Gold mit, aber es steckt im Bildmaterial: Goldbarren und Sonderetikett sind Teil der Packshots. Die Seite selbst arbeitet mit genau den Token, die jede andere Seite trägt – ein zweites Gold für die Aktion wäre der Fehler, den das Projekt seit dem 28.08.2026 vermeidet (siehe --toem-gold in tokens.css). OHNE JAVASCRIPT. Es gibt nichts aufzuklappen, umzuschalten oder nachzuladen; die Pflichtfelder prüft der Browser selbst. ========================================================================== */ /* --- Seitenkopf ---------------------------------------------------------- ZWEI SPALTEN STATT VOLLFLÄCHIGEM MOTIV. .bogenhero legt sein Bild normalerweise absolut hinter den Text und deckt es mit einem Weißverlauf ab. Das Aktionsvisual ist ein Freisteller im Hochformat (998 × 1400) und zeigt genau die drei Flaschen, die im Regal wiedererkannt werden sollen – hinter Text und Verlauf wäre davon die Hälfte weg. .gokopf__inner bricht deshalb aus dem Muster aus und stellt Bild und Text nebeneinander. Bogen, Label und Titel bleiben die der Komponente. */ .gokopf { /* Die Fläche unter dem Bogen muss der Grund der FOLGENDEN Sektion sein, sonst reißt der Übergang – siehe components/schwung.css. Das war einmal die graue Flaschensektion; seit „So geht's" (weiß, ohne eigenen Grund) dazwischen steht, blieb hier ein grauer Streifen stehen (gemeldet 24.09.2026). Deshalb jetzt Weiß. Wer die Reihenfolge ändert, ändert diese Zeile mit. */ --schwung-grund: var(--bg-page); /* SO HOCH WIE DER HERO DER STARTSEITE, Wunsch vom 16.09.2026. NICHT ALS ZAHL ABGESCHRIEBEN, sondern als dieselbe Regel: die Startseite setzt in sections/hero.css `min-height: max(32rem, calc(95vh - var(--h-nav)))` und 64 px Polster oben wie unten. Eine nachgetragene Zahl wie „751 px" stimmte nur auf dem Schirm, auf dem sie gemessen wurde - der Hero der Startseite ist bildschirmhoch und wächst mit dem Fenster. Gemessen vorher bei 900 px Fensterhöhe: Startseite 751, /gold/ 852,5. Zu hoch waren beide Polster (96/128 statt 64/64) und das Motiv, das die Höhe allein bestimmte. */ --hero-hoehe: max(32rem, calc(95vh - var(--h-nav))); --hero-polster: var(--sp-8); --hero-polster-fuss: var(--sp-8); } .gokopf__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--sp-7); align-items: center; } /* DAS MOTIV STEHT IN DER HÜLLE DER KOMPONENTE, damit das Feld „Motiv" in der Seitenleiste auch hier greift (inc/seitenkopf.php sucht wörtlich nach
). Die Komponente legt diese Hülle sonst absolut hinter den Text und deckt sie mit einem Weißverlauf ab - beides muss hier weg, sonst verschwindet der Freisteller dahinter. Drei Regeln, nicht eine: Lage und overflow am Kasten, der Verlauf am ::after, die Bildmaße am img. Wer eine davon vergisst, sieht es erst, wenn das Bild fehlt. */ .gokopf .bogenhero__media { /* relative statt static, seit der Goldbarren daran haengt - beides holt die Huelle aus der absoluten Lage der Komponente zurueck, relative gibt zusaetzlich den Anker fuer das Kind. inset: auto daneben ist Pflicht, sonst zieht das inset der Komponente die Huelle weg. */ position: relative; inset: auto; overflow: visible; /* DIE HUELLE MUSS AUF DAS BILD SCHRUMPFEN, sonst sitzt der Barren neben den Flaschen statt darauf. Gemessen am 16.09.2026: unterhalb von 66rem fuellt die Huelle die ganze Spalte (bei 390 px 350 breit), das Bild darin misst nur 297 und steht zentriert. Ein Kind mit right: 0 haette also 26 px rechts vom Motiv gelegen. Rechnung statt fit-content: die Breite des Freistellers ergibt sich aus seiner gedeckelten Hoehe mal dem Seitenverhaeltnis 998/1400 = 0,713. fit-content hilft hier nicht - es fragt die Eigenbreite des Bildes ab (998 px) und nicht die, auf die max-height es herunterrechnet. */ --gokopf-bildhoehe: max(18rem, calc(95vh - var(--h-nav) - 2 * var(--sp-8))); width: min(100%, calc(var(--gokopf-bildhoehe) * 0.713)); margin-inline: auto; } /* Der Goldbarren im Hero. Prozente, keine festen Masse: die Huelle ist jetzt genau das Bild, also bezieht sich jeder Wert hier auf den Freisteller selbst und sitzt auf jeder Breite an derselben Stelle des Motivs. max-width: none gegen die globale Bildregel aus base.css, die sonst bei 440 px Eigenbreite zuschlaegt. */ .gokopf .bogenhero__media img.gokopf__barren { /* SO LANG WIE NOETIG: .gokopf .bogenhero__media img weiter oben setzt Breite, Deckel und Rand fuer den Freisteller und ist spezifischer als eine einzelne Klasse - gemessen stand der Barren sonst auf seinen eigenen 440 px und fuellte die ganze Huelle. */ position: absolute; right: 0; bottom: 6%; width: 32%; height: auto; max-width: none; max-height: none; margin-inline: 0; } .gokopf .bogenhero__media::after { content: none; } .gokopf .bogenhero__media img { display: block; /* HÖHE ZUERST, Breite danach. Solange das Bild die Breite seiner Spalte füllte, bestimmte es die Höhe des Heros - und die soll jetzt der Bildschirm bestimmen. Mit width/height auf auto und einer Deckelung in beide Richtungen passt sich der Freisteller in das ein, was übrig ist: dieselbe Rechnung wie oben, abzüglich der beiden Polster. Die Untergrenze von 18rem hält das Motiv auf einem flachen Fenster erkennbar - lieber ein etwas höherer Hero als drei Flaschen von Daumennagelgröße. */ width: auto; height: auto; max-width: 100%; max-height: max(18rem, calc(95vh - var(--h-nav) - 2 * var(--sp-8))); margin-inline: auto; object-fit: fill; background: none; } /* MEHR LUFT ZWISCHEN GERADER ZEILE UND SCHWUNGZEILE, Wunsch vom 16.09.2026. components/sektionstitel.css setzt margin-top: 0.02em an das - bei 76,8 px sind das 1,5 px, also praktisch nichts. Hier trägt die gerade Zeile einen Doppelpunkt und kündigt die Schwungzeile an; sie braucht den Absatz. In em, nicht in rem: die Überschrift läuft von 32 px auf dem Telefon bis 76,8 px am Schirm, und ein fester Abstand säße auf beiden falsch. */ .gokopf .bogenhero__title em { /* SO GROSS WIE DIE SCHREIBSCHRIFT DER STARTSEITE, Frage vom 16.09.2026. Gemessen stand die Startseite bei 1440 px auf 92,0 px und /gold/ auf 76,8 - die Unterseiten setzen ihre Schwungzeile als 1,6em der Seitenüberschrift (--fs-600), die Startseite hat mit --fs-800 eine eigene, größere Staffel. /gold/ bekommt hier bewusst die Staffel der Startseite, nicht die der Unterseiten: der Hero folgt seit derselben Runde auch deren Höhenregel, und die Seite wird aus Anzeigen und vom Neckhänger direkt angesprungen. Eine halbe Übernahme wäre die schlechtere von beiden Lösungen. */ font-size: var(--fs-800); margin-top: 0.16em; } /* .bogenhero__body deckelt auf 34rem. In einer eigenen Spalte ist das zu eng – die Spalte ist selbst schon die Begrenzung. */ .gokopf__body { max-width: 38rem; } /* DIE GEWINNZEILE IST DIE AUSSAGE DER KAMPAGNE, nicht ihr Vorspann. --fs-500 statt --fs-400 (Lead): sie steht auf jedem Plakat, jedem Neckhänger und in jeder Anzeige und darf auf der Landingpage nicht kleiner sein als ein gewöhnlicher Einleitungssatz. */ .gokopf .bogenhero__lead { margin: var(--sp-4) 0 0; max-width: none; font-size: var(--fs-500); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--toem-blau); } /* Das Sternchen führt zum Pflichttext am Seitenfuß. Gold, weil es Verweiszeichen ist und keine Aussage trägt – die Angabe steht dort, wohin es zeigt. Die Trefferfläche ist klein; deshalb padding statt nur Schrift, damit auf dem Telefon überhaupt getroffen werden kann. */ /* BLAU SEIT 25.09.2026, Kundenwunsch („Das Sternchen können wir blau einfärben, oder?"). Gold auf Weiß hielt 1,99:1; Gold bleibt die Farbe beim Überfahren. */ .gokopf__stern { color: var(--toem-blau); font-weight: 700; /* LINKS KEIN INNENABSTAND: mit 0,15em auf beiden Seiten stand zwischen „gewinnen" und dem Sternchen eine sichtbare Lücke, und das liest sich wie ein Tippfehler. Die Trefferfläche wächst deshalb nach rechts, oben und unten - dorthin, wo sie niemandem im Weg ist. */ padding: 0.3em 0.35em 0.3em 0; transition: color var(--dur) var(--ease); } .gokopf__stern:hover, .gokopf__stern:focus-visible { color: var(--toem-gold); } .gokopf__aktion { margin: var(--sp-6) 0 0; } /* Die Fussnote zum Sternchen unter dem Knopf, 25.09.2026 - derselbe Abstand wie im Slide der Startseite (.hero__slide .gostern__text). */ .gokopf .gostern__text { margin-top: var(--sp-5); } /* Unter 66rem untereinander. Die Grenze lag bis zum 16.09.2026 bei 60rem und war damit zu niedrig - gemessen bei der Prüfung über fünfzehn Breiten: 961 px Textspalte 388 Schreibschrift auf DREI Zeilen, 44 px Überstand 1024 px Textspalte 446 drei Zeilen, 5 px Überstand 1040 px Textspalte 461 zwei Zeilen, passt 1056 px Textspalte 475 zwei Zeilen, 11 px Luft Zwischen 960 und 1040 px brach „Deckel finden, Gold gewinnen" also in drei Zeilen, und die letzte ragte aus ihrer Spalte heraus. Sie berührte das Motiv nicht - dazwischen lagen noch 28 px -, aber sie stand schief. 66rem statt 65rem als Grenze: bei 1040 px bleiben nur 4 px Luft, und die Schreibschrift läuft mit der Fensterbreite weiter. */ @media (max-width: 66rem) { .gokopf { /* Untereinander bestimmt der Inhalt die Höhe, nicht der Bildschirm - genauso macht es die Startseite unterhalb von 60rem (min-height: 0). Mit der Bildschirmregel stünde hier Text UND Bild in 95vh, und beides zusammen passt dort nicht hinein. */ --hero-hoehe: 0; --hero-polster: var(--sp-6); --hero-polster-fuss: var(--sp-8); } .gokopf__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .gokopf__body { max-width: none; } /* Mittig und gedeckelt: über die volle Bahnbreite wäre das Visual auf einem Tablet 890 px hoch und schöbe das Formular aus dem Blick. GRÖSSER AUF DEM TELEFON, Wunsch vom 16.09.2026: 20rem waren 320 px Höhe und damit 228 px Breite - drei Flaschen nebeneinander, von denen man die Etiketten nur noch ahnt. 26rem sind 416 px hoch und 297 breit. UND ES DARF UNTER DEN KNOPF LAUFEN. Der negative Rand hebt das Motiv über den Rasterabstand hinaus an, sodass die Flaschenhälse hinter dem Knopf verschwinden - dieselbe Überlappung, die die Produktseiten zwischen Packshot und Textblock benutzen. Ohne sie steht zwischen Knopf und Motiv eine leere Zeile, die die Seite nur länger macht. */ .gokopf .bogenhero__media { /* --sp-9 und nicht --sp-7: mit 48 px war die Überlappung rechnerisch 16 px, sichtbar aber null - die Flaschenhälse haben oben transparenten Rand, und der überlappt eben nichts. Mit 96 px verschwindet der Hals des mittleren Freistellers wirklich hinter dem Knopf. Nachgemessen, nicht geschätzt. */ margin-top: calc(-1 * var(--sp-9)); /* Der Knopf darf nicht verdeckt werden - er ist der Hauptweg. */ z-index: -1; position: relative; } .gokopf .bogenhero__media { /* Derselbe Deckel wie am Bild darunter, damit die Huelle weiter genau auf dem Motiv liegt. */ --gokopf-bildhoehe: 26rem; } .gokopf .bogenhero__media img { max-width: min(28rem, 100%); max-height: 26rem; } } /* --- Motiv oben, Text darunter ------------------------------------------- ZURUF VOM 22.09.2026: der Kopf soll am Telefon und auf dem Tablet so stehen wie im Startbild-Karussell – Motiv zuerst, dann Eyebrow, Ueberschrift, Aussage, Knopf. WAS DAMIT ZURUECKGENOMMEN WIRD, steht im Block darueber und gilt bis 66rem: dort haengt das Motiv mit negativem Rand unter dem Knopf, damit die Flaschenhaelse dahinter verschwinden. Diese Ueberlappung braucht Text OBERHALB des Motivs. Steht das Motiv oben, gibt es nichts zu ueberlappen. ORDER STATT column-reverse: die Sternchen-Fussnote gehoert ans Ende, nicht zwischen Motiv und Ueberschrift. Dieselbe Loesung wie im Karussell. DIE BREITE FOLGT DER HOEHE – das Motiv ist hochformatig (998 x 1400), und ein breiter Kasten laesst den Goldbarren unten am Rand kleben statt bei den Flaschen. 0.72 ist das Seitenverhaeltnis, gerundet. BIS 66rem UND NICHT BIS 60: der Kopf wird bei 66rem einspaltig, nicht bei 60. Ein erster Stand endete bei 60rem - zwischen 960 und 1056 px stand der Text dann wieder oben und das Motiv darunter, mitten im einspaltigen Bereich. Wo der Kopf einspaltig ist, steht das Motiv oben. */ @media (max-width: 66rem) { .gokopf__inner { display: flex; flex-direction: column; gap: 0; } .gokopf .bogenhero__media { order: -1; /* Der Zug nach oben und die Lage hinter dem Knopf gelten nur dort, wo ein Knopf darueber steht. */ margin-top: 0; z-index: auto; position: relative; height: var(--motiv-hoehe-unter); min-height: var(--motiv-hoehe-unter-min); width: min(100%, calc(var(--motiv-hoehe-unter) * 0.72)); margin-inline: auto; } /* FREISTELLER, KEIN FOTO: die Flaschen stehen auf Weiss. */ .gokopf .bogenhero__media img { max-width: 100%; max-height: 100%; height: 100%; object-fit: contain; object-position: center top; } .gokopf .bogenhero__media img.gokopf__barren { position: absolute; right: 0; bottom: 0; width: 38%; height: auto; max-height: 34%; } .gokopf__body { order: 1; padding-top: var(--sp-6); } } /* --- „Wir vergolden Weihnachten:" in eine Zeile --------------------------- ZURUF VOM 22.09.2026, angeglichen an das Karussell. GEMESSEN, was die Zeile braucht: bei 32 px Schrift 405 px Breite. Die Bahn hat 280 px bei 320, 350 bei 390 und 374 bei 414 – noetig waeren also 21, 27 und 29 px. EINE FESTE GROESSE WAERE FALSCH: 21 px fuer alle sind auf einem 414er Telefon unnoetig klein. Die Groesse haengt deshalb an der Bahnbreite. DIE ZAHL IST GEMESSEN, nicht geraten: 32 px Schrift brauchen 405 px, also traegt jede 100 px Bahn rund 7,9 px Schrift. 7.6vw minus 3 px halten den Sicherheitsabstand nach unten. AB 600 px PASST DIE ZEILE OHNEHIN, deshalb endet die Regel bei 34rem. */ @media (max-width: 34rem) { .gokopf .bogenhero__title { font-size: calc(7.6vw - 3px); } } /* --- Die Aktionsflaschen ------------------------------------------------- DREI SPALTEN AUF JEDER BREITE. Die Packshots sind sehr schmal (189 × 900, Verhältnis 1 : 4,76); untereinander gestapelt ergäben sie auf dem Telefon drei Bildschirmlängen, durch die niemand scrollt, um drei Etiketten zu vergleichen. Nebeneinander stehen sie wie im Regal – und genau darum geht es in dieser Sektion. Die Höhe steuert das Bild, nicht die Breite: `height` mit `width: auto`, wie bei den Flaschengruppen auf /produkte/. */ .goflaschen { background: var(--bg-soft); padding-block: var(--sp-sektion); } .goflaschen__lead { margin: 0 0 var(--sp-7); max-width: 44rem; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-body); } .goflaschen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin: 0; padding: 0; /* Die Deckelung auf 60rem ist am 16.09.2026 entfallen: die Flaschen sollen größer stehen, und dann trägt die volle Bahn sie besser als eine schmale Insel. Der Abstand zwischen den Spalten hält sie zusammen. */ max-width: none; list-style: none; } .goflasche { display: grid; /* align-content: start – sonst wandert überschüssige Höhe in die Bildzeile und die Namen stehen auf drei verschiedenen Höhen. Vier Mal dieselbe Krankheit im Projekt gehabt, siehe raster-align-content-start. */ align-content: start; justify-items: center; /* Klein, weil er nur Namen und Etikettzeile trennt - der Abstand zur Flasche steht als Rand am Namen. */ gap: var(--sp-2); text-align: center; } /* SUBGRID, damit Name und Etikettzeile über alle drei Kacheln auf einer Höhe stehen. Ohne ihn hängt jede Kachel in ihrem eigenen Gitter, und sobald ein Name umbricht, rutscht seine Etikettzeile mit. GEMESSEN bei 600 px Fenster: „Rapskernöl Buttergeschmack" bricht auf zwei Zeilen, „BEIGES ETIKETT" stand daraufhin 20 px tiefer als die beiden anderen. Das ist dieselbe Krankheit wie bei den Rasterreihen ohne align-content: start - nur eine Ebene tiefer. */ @supports (grid-template-rows: subgrid) { /* VIER ZEILEN seit dem 16.09.2026: Bild, Name, Etikettzeile, Textlink. Die Zahl muss mit dem Markup mitwachsen - steht hier eine zu wenig, landet der Link in einer eigenen Zeile ausserhalb des geteilten Rasters und die drei Kacheln laufen wieder auseinander. */ .goflaschen__raster { grid-template-rows: auto auto auto auto; } .goflasche { grid-row: span 4; grid-template-rows: subgrid; } } /* Rückfall für Browser ohne subgrid: zwei Zeilen für den Namen reservieren. Kostet auf breiten Fenstern eine Leerzeile, hält aber die Reihe gerade. */ @supports not (grid-template-rows: subgrid) { .goflasche__name { min-height: 2lh; } } /* DIE FLASCHENHÖHE AN EINER STELLE. Sie steuert nicht nur das Packshot, sondern auch Größe und Lage des Goldbarrens daneben - stünde sie zweimal da, läge der Barren nach der ersten Änderung neben der Flasche statt an ihr. */ .goflasche__bild { --flaschenhoehe: clamp(13rem, 24.5vw, 22rem); margin: 0; } .goflasche__flasche { display: block; /* GRÖSSER, Wunsch vom 16.09.2026. Vorher clamp(11rem, 19vw, 17rem), also 272 px bei 1440. Jetzt 352 px - die Flasche steht damit so hoch wie das Aktionsvisual im Hero bei gleicher Fensterbreite, und das Sonderetikett ist lesbar statt nur erkennbar. Die Höhe steuert, nicht die Breite: die Packshots sind 189 x 900, eine Breitenangabe machte die Flasche bei drei Spalten unbrauchbar hoch. */ height: var(--flaschenhoehe); width: auto; max-width: 100%; } .goflasche__name { /* MEHR LUFT ZWISCHEN FLASCHE UND NAMEN, Wunsch vom 16.09.2026. Der Rasterabstand von 8 px gilt zwischen Namen und Etikettzeile, die zusammengehören; zur Flasche gehört mehr. Gemessen 8 plus 24 = 32 px. */ margin: var(--sp-5) 0 0; /* TRENNEN STATT UEBERLAUFEN. Gemessen bei 320 und 360 px: „Rapskernöl Buttergeschmack" ist als längstes Wort 120,6 px breit, die Spalte misst dort 85 - der Name ragte 15 px über den rechten Rand hinaus und die ganze Seite bekam eine waagerechte Scrollbahn. Gefunden erst beim Nachmessen unter 390 px. hyphens braucht die Sprachangabe am Dokument; die steht (). overflow-wrap als Rückfall für Browser ohne deutsche Trennmuster - ein harter Umbruch ist hässlich, eine Scrollbahn ist ein Fehler. */ hyphens: auto; overflow-wrap: break-word; font-size: var(--fs-300); font-weight: 600; line-height: var(--lh-snug); color: var(--toem-blau); } .goflasche__etikett { margin: 0; font-size: var(--fs-100); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } /* DER WEG ZUM ÖL. Dieselben Werte wie .rzoel__mehr auf den Rezeptseiten und .gostern__link am Seitenfuß: Versalien, Gewicht 600, Markenblau, Pfeil dahinter, beim Hover Gold und der Pfeil drei Pixel nach rechts. min-height hält die Trefferfläche bei 44 px - bei drei Links nebeneinander auf dem Telefon ist das der Unterschied zwischen Treffen und Zielen. margin-top am Link, nicht Rasterabstand: der Link steht eine Stufe weiter weg als Name und Etikettzeile, die zusammengehören. */ .goflasche__mehr { display: inline-flex; /* justify-self: center IST HIER PFLICHT, nicht Feinschliff. Als Kind des Kachelrasters wird `inline-flex` blockifiziert - der Browser macht daraus `flex`, und der Link nimmt die volle Spaltenbreite. Gemessen bei 390 px: Kasten 109 px breit, gebraucht werden 72. Der Text brach deshalb INNERHALB eines viel zu breiten Kastens um, und der Pfeil stand abgesetzt neben zwei Zeilen. Nicht die Schrift war zu breit, der Kasten war es. Mit justify-self schrumpft er auf seinen Inhalt und die Zeile hält. */ justify-self: center; /* UND ZUSAETZLICH width: fit-content. justify-self allein hat nicht gereicht - gemessen blieb der Kasten bei 108,7 px, obwohl der Wert berechnet als `center` ankam. Die Breite ist die Angabe, die wirklich zieht; justify-self bleibt daneben stehen, damit der Kasten mittig sitzt und nicht links. */ width: fit-content; max-width: 100%; align-items: center; gap: var(--sp-2); min-height: 2.75rem; margin-top: var(--sp-2); font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--toem-blau); transition: color var(--dur) var(--ease); } .goflasche__mehr:hover, .goflasche__mehr:focus-visible { color: var(--toem-gold); } .goflasche__mehr svg { width: var(--zeichen-inline); height: var(--zeichen-inline); transition: transform var(--dur-hover) var(--ease-hover); } .goflasche__mehr:hover svg, .goflasche__mehr:focus-visible svg { transform: translateX(3px); } /* Unter 30rem tragen die Namen zwei Zeilen („Rapskernöl Buttergeschmack"), und der Abstand zwischen den Spalten wird zum Engpass. */ @media (max-width: 30rem) { .goflaschen__raster { gap: var(--sp-3); } .goflasche__name { margin-top: var(--sp-4); font-size: var(--fs-200); } } /* VERSALIEN UND SPERRUNG KOSTEN AUF DEM TELEFON EINE ZEILE. Gemessen bei 390 px: die Spalte ist 109 px breit, „BLAUES ETIKETT" mit Sperrung 122 px, ohne 100 „MEHR ERFAHREN →" mit Versalien und Sperrung 145 px, ohne 134, gemischt geschrieben 106 Beide brachen deshalb um, und beim Link stand der Pfeil abgesetzt neben zwei Textzeilen - das sah aus wie ein Fehler und war auch einer. Versalien mit weiter Sperrung sind eine Auszeichnung für Zeilen, die Platz haben. In einer 109-px-Spalte haben sie ihn nicht. */ @media (max-width: 48rem) { .goflasche__etikett { letter-spacing: var(--ls-normal); } /* GEMESSEN, warum das nötig ist: bei 390 px misst die Spalte 108,7 px und „Mehr erfahren →" braucht mit 13 px Schrift, 4 px Abstand und einem 18-px-Pfeil rund 108. Es fehlten also Bruchteile, und die Zeile brach - mit dem Pfeil abgesetzt neben zwei Zeilen Text. Erst habe ich an der Kastenbreite gedreht (justify-self, width: fit-content); beides greift, hilft aber nichts, wenn der Inhalt selbst breiter ist als die Spalte. Eine Stufe kleiner und ein kleinerer Pfeil bringen 100 statt 108 px. */ .goflasche__mehr { text-transform: none; letter-spacing: var(--ls-normal); gap: var(--sp-1); font-size: 0.75rem; } .goflasche__mehr svg { width: var(--zeichen-mini); height: var(--zeichen-mini); } } /* Unter 22,5rem misst die Spalte nur noch 85 px - auch 100 passen dort nicht. Dann geht der Pfeil, nicht der Text: „Mehr erfahren" allein braucht 80 px und hält die Zeile. Der Pfeil ist Zierde, der Text ist die Aussage. Er trägt ohnehin aria-hidden, für Screenreader ändert sich nichts. */ @media (max-width: 22.5rem) { .goflasche__mehr svg { display: none; } .goflasche__mehr { gap: 0; } } /* Unter 22,5rem reicht auch das nicht mehr. Gemessen: bei 360 px misst die Spalte 99 px und „BLAUES ETIKETT" ohne Sperrung 100 - eine von drei Kacheln brach um, die anderen nicht, und das sieht schlimmer aus als drei gleich umbrechende. Bei 320 px sind es 85 zu 100. Ohne Versalien und eine Stufe kleiner passt die Zeile wieder: gemischt geschrieben braucht „Blaues Etikett" bei 12 px rund 81 px. */ @media (max-width: 22.5rem) { .goflasche__etikett { text-transform: none; font-size: 0.75rem; } } /* --- So geht's ----------------------------------------------------------- Drei Schritte nebeneinander, als
    . Die Ziffer ist Dekoration und trägt aria-hidden – die Ordnung steht schon in der Liste. */ .goschritte { padding-block: var(--sp-sektion); } .goschritte__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* --sp-9 statt --sp-6: die Lücke ist ab jetzt kein Abstand mehr, sondern der Platz für den Pfeil. 96 px tragen einen Pfeil von 64 px mit 16 px Luft auf jeder Seite. */ gap: var(--sp-9); margin: 0; padding: 0; list-style: none; counter-reset: none; } .goschritt { display: grid; align-content: start; gap: var(--sp-3); /* Bezugspunkt für den Pfeil, der in die Lücke dahinter ragt. */ position: relative; } /* GEBOGENE PFEILE ZWISCHEN DEN SCHRITTEN, Wunsch vom 16.09.2026. Sie stehen an den ersten beiden Schritten und tragen aria-hidden: die Reihenfolge steht schon in der
      , ein vorgelesener Pfeil wäre die zweite Ansage derselben Sache. ABSOLUT IN DIE LÜCKE, nicht als eigene Spalte: als Rasterkind wären sie drei weitere
    1. in einer geordneten Liste, und ein Screenreader zählte fünf Schritte statt drei. Gold, weil sie Dekoration sind - für dekorative Grafik gilt die 3:1-Regel nicht, die Aussage trägt die Ziffer daneben. */ /* BILDPLATZ JE SCHRITT, Wunsch vom 16.09.2026. Bis zum selben Tag stand hier ein gestrichelter Platzhalter mit dem Motiv als Beschriftung; seit die Fotos da sind, trägt die Hülle ein . Ihre Maße sind unverändert. 4:3 AN DER HÜLLE UND NICHT AM BILD: so stehen alle drei gleich hoch, auch wenn ein Motiv um ein Pixel vom Seitenverhältnis abweicht - so_gehts_3 kam als 1447 x 1087 statt 1448 x 1086. object-fit: cover schneidet die 0,16 Prozent Unterschied weg, statt das Bild zu verziehen. Die Hülle ist auch der Bezugspunkt für den Pfeil - der sitzt auf halber Bildhöhe und nicht an der Ziffer. */ .goschritt__bild { position: relative; margin: 0 0 var(--sp-2); aspect-ratio: 4 / 3; border-radius: var(--r-card); /* Solange ein Bild lädt, steht hier die Platzhalterfläche des Projekts - kein weißes Loch und kein Springen, weil das Seitenverhältnis die Höhe schon reserviert. */ background: var(--bg-platzhalter); overflow: hidden; } .goschritt__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .goschritt__pfeil { position: absolute; /* Auf halber Höhe des Bildes, nicht an der Ziffer: der Pfeil verbindet zwei Bilder, und die halbe Bildhöhe ist die Linie, auf der das Auge ohnehin von einem zum nächsten wandert. 0,875rem ist die halbe Pfeilhöhe. */ top: 50%; margin-top: -0.875rem; left: calc(100% + (var(--sp-9) - 4rem) / 2); width: 4rem; height: 1.75rem; color: var(--toem-gold); pointer-events: none; } /* DIE ZIFFER ALS SCHREIBSCHRIFT, nicht als Kreis mit Zahl. Grafolita trägt auf dieser Seite ohnehin die Überschrift; eine zweite Formsprache für drei Ziffern wäre eine Erfindung ohne Anlass. Gold als Fläche großer Schrift: ab 24 px gilt 3:1, gemessen trägt die Ziffer 64 px. */ .goschritt__zeichen { margin: 0; font-family: var(--font-accent); font-weight: 700; font-style: normal; font-size: var(--fs-700); line-height: 0.9; color: var(--toem-gold); } .goschritt__text { margin: 0; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-body); } /* DER HINWEIS AUF DEN DECKEL. Er steht zwischen den Schritten und der Fußnote und muss sich von beiden unterscheiden - sonst liest ihn niemand, und genau darauf kommt es hier an: wer die Kappe wegwirft, kann sein Foto nicht mehr machen. GOLDENE LINIE LINKS auf grauer Fläche, wie .form__meldung in components/formular.css. Kein Warndreieck und kein Rot: es ist kein Fehler, sondern eine Angabe, die zu früh kommen muss, um zu wirken. Schriftgrad wie der Schritttext, nicht kleiner - eine Angabe, die man überliest, hätte man sich sparen können. */ .goschritte__wichtig { /* BREITER UND MITTIG, Wunsch vom 16.09.2026, und der Schlusssatz steht jetzt mit darin: er gehörte inhaltlich ohnehin dazu und stand als graue Fußnote darunter, wo ihn niemand mit dem Kasten zusammenbrachte. margin-inline: auto setzt ihn mittig in die Bahn - er ist kein Fließtext, der an der linken Lesekante beginnen müsste, sondern ein Einschub zwischen zwei Sektionen. */ display: grid; gap: var(--sp-2); margin: var(--sp-8) auto 0; /* KLEINER, Wunsch vom 16.09.2026: 46 statt 60rem und --fs-300 statt --fs-400. Der Kasten steht damit als Einschub da und nicht als zweite Überschrift. NICHT NOCH KLEINER: --fs-200 wären 15 px, und dies ist die einzige Stelle der Seite, an der steht, dass der Deckel aufgehoben werden muss. Wer das überliest, kann sein Foto später nicht mehr machen. */ max-width: 46rem; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--toem-gold); background: var(--bg-soft); } .goschritte__satz { margin: 0; font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-body); } /* LINKS SICHTBAR MACHEN. Beide Absätze erben ihre Farbe - im Schritttext die Fließtext-Tinte, im Hinweis das Grau - und ein Link darin war vom Text nicht zu unterscheiden. Am Screenshot gesehen, nicht am DOM. Kennzeichnung über Dicke und Farbe, nicht über eine Linie: Projektregel vom 28.08.2026. */ .goschritt__text a, .goschritte__satz a { font-weight: 600; color: var(--toem-blau); transition: color var(--dur) var(--ease); } .goschritt__text a:hover, .goschritt__text a:focus-visible, .goschritte__satz a:hover, .goschritte__satz a:focus-visible { color: var(--toem-gold); } /* Unter 48rem untereinander: drei Textspalten von je 10rem brechen nach zwei Wörtern um. */ @media (max-width: 48rem) { .goschritte__liste { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } /* KEINE PFEILE MEHR, sobald die Schritte untereinander stehen - Wunsch vom 16.09.2026. Hier stand ein gedrehter Pfeil zwischen den Zeilen. Der Pfeil verbindet nebeneinanderliegende Bilder; untereinander ist die Reihenfolge ohnehin eindeutig, und ein gedrehter Pfeil im Leerraum zwischen zwei Bildern ist dann nur noch Dekoration, die Platz kostet. display: none und nicht weglassen im Markup: dasselbe Markup traegt beide Breiten, und der Pfeil ist ohnehin aria-hidden. */ .goschritt__pfeil { display: none; } /* Nebeneinander statt untereinander, sobald gestapelt wird: eine Ziffer über zwei Zeilen Text lässt die Liste dreimal so lang werden. */ /* FESTE ZIFFERNSPALTE, nicht auto. Gemessen bei 390 px waren die drei Ziffern 12, 15 und 16 px breit - der Text begann dadurch bei 48, 51 und 52 px und die Liste stand auf drei Kanten. Die Grafolita-Ziffern sind unterschiedlich breit, das lässt sich nicht wegstellen; die Spalte muss es tun. */ .goschritt { grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); } /* Das Bild über beide Spalten, Ziffer und Text darunter nebeneinander. */ .goschritt__bild { grid-column: 1 / -1; align-self: start; margin-bottom: var(--sp-2); /* Gedeckelt: über die volle Bahn wäre der Bildplatz auf einem Tablet 707 x 530 px, und drei davon füllten zwei Bildschirme, bevor der erste Schritt gelesen ist. */ max-width: 32rem; } /* Der Pfeil soll wieder am SCHRITT hängen und nicht am Bild - gestapelt steht er unter dem ganzen Schritt, nicht neben dem Bild. Dafür genügt es, dem Bild seinen Bezugspunkt zu nehmen: dann greift der nächste aufgespannte Vorfahr, und das ist .goschritt. */ .goschritt__bild { position: static; } .goschritt__zeichen { font-size: var(--fs-600); } } /* --- Das Formular -------------------------------------------------------- Auf grauer Bahn, damit die weißen Felder eine Kante haben. Dieselbe Entscheidung wie beim Bewerbungsformular. */ .goform { background: var(--bg-soft); padding-block: var(--sp-sektion); /* Sprungziel aus dem Kopf und aus Schritt 3. Ohne den Abstand steht die Überschrift beim Sprung direkt unter der fixierten Kopfzeile. */ scroll-margin-top: var(--h-nav-compact); } .goform__lead { margin: 0 0 var(--sp-3); max-width: 44rem; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-body); } /* Die Frist steht allein und fett - sie ist der Satz, der wehtut, wenn man ihn überliest. Gewicht 700 wie ein , Größe wie der Vorspann: größer wäre eine zweite Überschrift, kleiner eine Fußnote. */ .goform__frist { margin: 0 0 var(--sp-7); max-width: 44rem; font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-body); color: var(--toem-blau); } /* Der Pflichtfeldsatz steht ÜBER dem Formular und nicht darunter: wer erst am Ende erfährt, welche Felder nötig waren, hat sie schon übersprungen. */ .goform__pflicht { margin-bottom: var(--sp-2); } /* WO STEHEN DATUM UND CHARGE, 25.09.2026 (Kundenkorrektur). Unter den beiden Feldern, schmal genug, dass es wie eine Erklaerung aussieht und nicht wie ein Motiv. Rand statt Schatten: es ist ein Foto vom Etikett, keine Karte. */ .goform__fundort { margin: var(--sp-3) 0 var(--sp-5); max-width: 22rem; } .goform__fundort img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); } .goform__fundort figcaption { margin-top: var(--sp-2); font-size: var(--fs-100); line-height: var(--lh-body); color: var(--text-muted); } .goform__aktion { margin: var(--sp-5) 0 0; } /* --- Sternchentext ------------------------------------------------------- Pflichttext am Seitenfuß, Wortlaut unverändert aus dem Briefing. Kleiner als der Fließtext, aber nicht kleiner als --fs-100: darunter beginnt Unlesbarkeit, und ein Pflichttext, den niemand lesen kann, erfüllt seinen Zweck nicht. */ /* --- Haeufige Fragen ---------------------------------------------------- HINTER DEM FORMULAR, NICHT DAVOR. Das Formular ist das Ziel der Seite; eine Fragenliste davor schiebt es nach unten und beantwortet Fragen, die sich beim Ausfuellen noch gar nicht stellen. Hier faengt sie die auf, die nicht abgesendet haben, und die, die spaeter wiederkommen. HELL, weil .goform darueber auf --bg-soft steht und .gostern darunter wieder hell ist - der Wechsel der Sektionen laeuft damit weiter. DIE LISTE IST components/faq.css, nicht neu gebaut. Dieselben Aufklapper wie auf /faq/, dasselbe Akkordeon-Skript, dieselbe Pflege im Backend. Ein zweites Muster fuer dieselbe Sache waere doppelte Arbeit bei jeder spaeteren Aenderung. Deshalb traegt die Seite jetzt zwei Dateien mehr in ihrer Ladeliste: css/components/faq.css und js/akkordeon.js. */ .gofragen { padding-block: var(--sp-sektion); } /* MEHR LUFT ZWISCHEN UEBERSCHRIFT UND LISTE, als die uebrigen Sektionen tragen. Gemessen am 17.09.2026: ueberall auf der Seite stehen 16 px zwischen Titel und dem, was folgt - aber dort folgt ein Textabsatz, hier die Haarlinie an der Oberkante der Fragenliste. Eine Linie bringt keine Zeilenluft mit, ein Absatz schon, deshalb wirken dieselben 16 px hier deutlich enger; dazu reichen die Unterlaengen der Grafolita ins Weiss. Beanstandet vom Kunden, zu Recht. DER WERT STEHT HIER VOLL UND WIRD NICHT ADDIERT. Die 16 px unter der Ueberschrift und dieser Rand stossen aneinander und fallen zusammen - es gilt der groessere, nicht die Summe. Mit --sp-6 gemessen: 32 px, nicht die erwarteten 48. Deshalb steht hier der Zielwert selbst. 48 px liegen in derselben Groessenordnung wie die 56 px ueber derselben Liste auf /faq/, wo die Ueberschrift kleiner ist und weniger Weiss braucht. */ .gofragen .faqliste { margin-top: var(--sp-7); } .gostern { padding-block: var(--sp-7) var(--sp-8); scroll-margin-top: var(--h-nav-compact); } .gostern__text { margin: 0; max-width: 56rem; font-size: var(--fs-100); line-height: var(--lh-body); color: var(--text-muted); } .gostern__weiter { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-7); margin: var(--sp-4) 0 0; } /* WIE JEDER ANDERE TEXTLINK AM BLOCKENDE, Wunsch vom 16.09.2026: Versalien, Gewicht 600, Markenblau, Pfeil dahinter, beim Hover Gold und der Pfeil drei Pixel nach rechts. Dieselben Werte wie .rzoel__mehr in pages/rezept.css - abgeschrieben wird hier nichts, die Werte stehen in Token. min-height hält die Trefferfläche bei 44 px, obwohl der Link nur eine Zeile hoch ist. Der Mittelpunkt zwischen den beiden Links ist entfallen: zwei Links mit Pfeil trennen sich selbst. */ .gostern__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; font-size: var(--fs-200); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--toem-blau); transition: color var(--dur) var(--ease); } .gostern__link:hover, .gostern__link:focus-visible { color: var(--toem-gold); } .gostern__link svg { width: var(--zeichen-inline); height: var(--zeichen-inline); transition: transform var(--dur-hover) var(--ease-hover); } .gostern__link:hover svg, .gostern__link:focus-visible svg { transform: translateX(3px); } /* --- Meldungen nach dem Absenden ----------------------------------------- NACHGETRAGEN AM 29.09.2026, Rueckmeldung des Kunden. Beide Meldungen standen bis dahin ungestaltet als Fliesstext ueber dem Formular. DER FEHLER IN ROT: Balken und Titel. Die Liste darunter bleibt in Fliesstinte, sonst ist ein ganzer Kasten roter Text schwerer zu lesen als jeder einzelne Satz. */ .gofehler { max-width: 48rem; /* so breit wie das Formular darunter (.form--weit) */ border-left-color: var(--c-fehler); } .gofehler__titel { margin: 0; font-weight: 700; color: var(--c-fehler); } .gofehler ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); } /* DER DANK GROSS UND MIT HAKEN: „Ich hätte es fast überlesen." Der Kasten traegt die Linie in Gold rundherum, nicht nur links - er ist die Antwort auf das Absenden und soll wie ein Ergebnis aussehen, nicht wie ein Hinweis. Der Titel in der Groesse einer Zwischenueberschrift. */ .godanke { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-4); max-width: 48rem; padding: var(--sp-5) var(--sp-6); border: 2px solid var(--toem-gold); border-left-width: 6px; border-radius: var(--r-md); } .godanke:focus { outline: none; } .godanke__zeichen { width: 2.5rem; height: 2.5rem; padding: var(--sp-2); border-radius: 50%; background: var(--toem-gold); color: var(--toem-blau); } .godanke__titel { margin: 0; font-size: var(--fs-500); font-weight: 700; line-height: var(--lh-snug); color: var(--toem-blau); text-wrap: balance; } .godanke__text { margin: var(--sp-2) 0 0; font-size: var(--fs-400); } /* Die Teilnahmenummer bricht nicht am Bindestrich um. */ .godanke__text strong { white-space: nowrap; } /* Auf dem Telefon steht der Haken ueber dem Titel: in einer eigenen Spalte nahm er dem Text ein Sechstel der Breite. */ @media (max-width: 30rem) { .godanke { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); gap: var(--sp-3); } .godanke__zeichen { width: 2rem; height: 2rem; padding: 0.375rem; } } .gofehler:focus { outline: none; }