/* ========================================================================= GAH574 — Event-Landingpage Eine Quelle der Wahrheit fuer die gesamte Optik (Leitfaden §9). Keine Inline-Styles im gerenderten HTML. Aufbau 1 Tokens 2 Basis und Bricks-Neutralisierung 3 Layout: Rahmen, Panels, Inhaltsspalte 4 Bausteine: Eyebrow, Pfeil, Pills, Links, Platzhalter 5 Sektionen 6 Bold-Tickets-Formular 7 Bewegung und Fokus ========================================================================= */ /* ------------------------------------------------------------------------- 1 Tokens ---------------------------------------------------------------------- */ .gah-page { /* Farbe — nur zwei echte Farben tragen die Seite (Handoff). BARRIEREFREIHEIT: #327EDB ergibt gegen Weiss 4,08:1 und liegt damit unter den 4,5:1 der WCAG AA fuer normalen Text. Betroffen ist alles unter 24px: Fliesstext, Eyebrows, Navigation, CTA- und FAQ-Beschriftung, Partner-Label. Ueberschriften ab 24px sind mit 3:1 in Ordnung. Ein Tausch auf #2676D7 (Helligkeit -6 %) erreicht 4,51:1 bei nahezu gleicher Anmutung. Die Entscheidung liegt bei clot.design — bis dahin bleibt der Entwurfswert stehen. Gemessen mit pruefung/kontrast.js. */ --gah-blau: #327edb; /* Freigegebene Alternative, wenn clot.design zustimmt: #2676D7 */ --gah-blau-rgb: 50, 126, 219; --gah-weiss: #ffffff; --gah-blau-22: rgba(50, 126, 219, 0.22); --gah-weiss-15: rgba(255, 255, 255, 0.15); --gah-grau-platzhalter: #d9d9d9; --gah-partner-grund: #f4f6f9; --gah-partner-slot: #e2e6ec; --gah-partner-schrift: #929caa; /* Hover-Ton aus dem Handoff — steht laut clot.design noch unter Vorbehalt */ --gah-dunkel: #14293f; --gah-schatten-select: 0 4px 8px rgba(0, 0, 0, 0.06); /* Schrift */ --gah-schrift: "TT Firs Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; --gah-schrift-display: "Helvetica Now Display", "TT Firs Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Schriftgroessen — fluid, Zielwert ist der Figma-Wert bei 1512px. Bewusst in px: Bricks setzt html auf 62,5 %, damit waere 1rem = 10px und jede rem-Angabe um 37,5 % zu klein (gemessen, §12.1). */ --gah-h1: clamp(44px, 5.3vw, 80px); --gah-h2: clamp(32px, 3.6vw, 54px); --gah-h2-display: clamp(30px, 3vw, 45px); --gah-h3-display: clamp(24px, 2.4vw, 36px); --gah-countdown: clamp(28px, 3vw, 45px); --gah-label: clamp(20px, 1.85vw, 28px); --gah-gross: clamp(17px, 1.32vw, 20px); --gah-basis: 16px; --gah-klein: 13px; /* Radien */ --gah-radius-select: 8px; --gah-radius-panel: 18px; --gah-radius-bild: 20px; --gah-radius-pill: 100px; /* Raster */ --gah-rahmen-max: 1512px; --gah-inhalt-max: 1232px; --gah-gutter: clamp(24px, 9.26vw, 140px); /* 140px bei 1512px */ --gah-panel-inset: clamp(12px, 1.46vw, 22px); /* * Hoehe der Kopfzeile — nachgemessen, nicht geschaetzt: 124px ab * 1512px, 105 bei 1280, 84 bei 1024, 68 ab 600 und darunter. Die * Kopfzeile liegt `absolute` ueber der ersten Sektion, also muss die * ihren Platz kennen. Wer am Logoblock oder am Polster der Kopfzeile * dreht, muss diesen Wert nachmessen. */ --gah-kopf-hoehe: clamp(68px, 8.2vw, 124px); --gah-spalten-abstand: clamp(24px, 3.2vw, 48px); --gah-text-abstand: 18px; --gah-tick-abstand: 12px; --gah-tick-breite: 5px; /* Vertikale Rhythmik — im Figma handgesetzt, hier je Sektion gemessen */ --gah-py-s: clamp(28px, 3.5vw, 52px); --gah-py-m: clamp(48px, 8.2vw, 124px); --gah-py-l: clamp(64px, 10.7vw, 162px); --gah-py-xl: clamp(80px, 16.2vw, 245px); } /* ------------------------------------------------------------------------- 2 Basis und Bricks-Neutralisierung ---------------------------------------------------------------------- */ /* Bricks vererbt global line-height 1.7, Ueberschriften zusaetzlich 1.4. Die Design-Datei setzt keine -> normal. Ohne das ist jeder Block zu hoch (§9.2). */ .gah-page, .gah-page :where(h1, h2, h3, h4, h5, h6) { line-height: normal; } .gah-page { font-family: var(--gah-schrift); font-size: var(--gah-basis); font-weight: 400; color: var(--gah-blau); background: var(--gah-weiss); -webkit-font-smoothing: antialiased; /* * Der Rahmen ist rundum gleich breit. Links und rechts rueckt jedes * Panel sich selbst ein (`.gah-sec--panel { margin-inline }`); oben und * unten kann das kein Panel leisten, weil dort die Seite endet — das * gehoert an die Flaeche darunter. Derselbe Wert, damit es ein Rahmen * bleibt und keine vier Entscheidungen. */ padding-block: var(--gah-panel-inset); } .gah-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd) { margin: 0; } .gah-page :where(ul, ol) { padding: 0; list-style: none; } /* Jede eigene display-Angabe schlaegt die Browserregel `[hidden] { display: none }` — der Countdown blieb dadurch nach der Veranstaltung sichtbar UND meldete gleichzeitig, sie sei vorbei. Das gilt fuer jedes Element, das wir per hidden schalten, deshalb hier einmal grundsaetzlich. Die Ausnahme mit !important ist genau dafuer gedacht. */ .gah-page [hidden] { display: none !important; } /* Bricks stylt generische Tags per Element-Selektor (§4.3). */ .gah-page blockquote { margin: 0; padding-left: 0; border-left: 0; font-family: inherit; font-size: inherit; } .gah-page blockquote cite { font-family: inherit; text-transform: none; opacity: 1; } .gah-page figcaption { text-align: left; } /* Bricks faerbt