/* ============================================================================ KAP. 222 (11.08.2026) — DIE LOOK-VORLAGE „V9 · Best of". Fundament der Runde 1. Vorlage: V9.html (Stand 10.08.2026, 15:47), 1:1 (R16). DIESE DATEI WIRD NUR GELADEN, WENN DIE VORLAGE AKTIV IST. Ohne Aktivierung steht kein darauf im HTML — die Seite bleibt Zeichen fuer Zeichen wie heute. Jede Regel haengt zusaetzlich am Attribut `body[data-hp-look]`, damit auch ein versehentlich eingebundenes Stylesheet nichts anrichten kann (zweite Linie, wie beim Mischen der Einstellungen). AUFBAU 1. Tokens — die Werte aus V9, an den bestehenden Namen aufgehaengt 2. Typo + Knopf — der V9-Feinschliff 3. Katalog ECKEN — Rundung ueber Stellschraube, Sonderformen ueber Attribut 4. Katalog ANORDNUNG — Versatz der Bilder 5. Katalog EFFEKTE — jeder einzeln ueber [data-hp-fx~="…"] WARUM DIE TOKENS AM STEHEN und nicht an :root: Ein Alias wird dort aufgeloest, wo er DEFINIERT ist. Eine :root-Regel wuerde die Ueberschreibung am Koerper nicht sehen. Alle sichtbaren Elemente liegen im Koerper. ============================================================================ */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ /* Alle Werte stammen aus V9.html. --brand-dark ist bewusst V9s helles Gold: der Knopf braucht eine Hover-Antwort, und eine eigene Farbe zu erfinden waere Designen statt Kopieren (R16). */ body[data-hp-look="v9"] { /* EINE Farbe fuer alles (R38): --hp-look-akzent kommt aus dem Bedienfeld und hat das V9-Gold als Rueckfall. Alles, was bisher die Markenfarbe nutzte — Label, Knopf, Zahlen, Linien — zieht darueber automatisch mit. */ --brand: var(--hp-look-akzent, #A8762B); --brand-dark: color-mix(in srgb, var(--hp-look-akzent, #A8762B) 78%, #fff); --ink: #12141A; --ink-soft: #6B7076; --ink-faint: #8A9096; --line: rgba(18, 20, 26, 0.10); --bg-soft: #F7F6F4; --dark: #111318; --radius-card: 16px; --container: 1240px; /* V9s zweites Gold — fuer Linien und Winkel, wo das satte Gold zu schwer waere. */ --hp-look-gold-hell: #C99A46; } /* ── 2. Typo + Knopf ─────────────────────────────────────────────────────── */ /* V9: h2 clamp(32px,4.8vw,64px), Spur -.045em, Zeile .92. Die Ausgleiche der Schriftwahl (Kap. 217) bleiben eingerechnet — sonst kleben schmale Schriften wieder zusammen. */ body[data-hp-look="v9"] .hp-h2 { font-size: clamp(32px, 4.8vw, 64px); letter-spacing: calc(-0.045em + var(--hp-trackadd, 0em)); line-height: calc(0.92 + var(--hp-lineadd, 0)); } body[data-hp-look="v9"] .hp-h1 { letter-spacing: calc(-0.045em + var(--hp-trackadd, 0em)); } /* V9s Label: kleiner, weiter gesperrt. */ body[data-hp-look="v9"] .hp-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.22em; margin-bottom: 14px; } body[data-hp-look="v9"] .hp-lead { font-size: 17px; } /* V9s Knopf: Pille, kraeftiger Text, Anheben mit farbigem Schatten. */ body[data-hp-look="v9"] .hp-btn { font-weight: 800; font-size: 14.5px; padding: 14px 28px; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.3s ease; } body[data-hp-look="v9"] .hp-btn--brand:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 34%, transparent); } /* ── 2b. DER HERO (Paket 2) ──────────────────────────────────────────────── */ /* V9 ordnet den Hero neu: Marke — STADT + Datum — Slogan — Knopf. Das HTML bleibt dafuer unangetastet; die Reihenfolge macht `order` im Flex-Kasten (.hp-hero__in ist bereits `flex-direction: column`). So bleibt die Seite ohne Vorlage byte-gleich und es gibt keinen zweiten Hero-Baustein, der gepflegt werden muesste (R38). */ body[data-hp-look="v9"] .hp-hero__marke { order: 1; } body[data-hp-look="v9"] .hp-hero__event { order: 2; } body[data-hp-look="v9"] .hp-hero__in .hp-h1 { order: 3; } body[data-hp-look="v9"] .hp-hero__in .hp-btn { order: 4; } /* Die Marken-Zeile. Die Sperrung auf die Breite der Stadt rechnet das Look-Skript aus (markeAnpassen) — mit einem festen letter-spacing traefe man die Breite nie, weil sie mit dem Fenster waechst. `nowrap` haelt die Zeile einzeilig. */ body[data-hp-look="v9"] .hp-hero__marke { display: inline-block; white-space: nowrap; font-family: var(--hp-fonth, var(--hp-fontt, var(--font))); font-size: clamp(12px, 1.9vw, 25px); font-weight: 900; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hp-look-akzent, #A8762B); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); margin-bottom: clamp(12px, 1.7vw, 22px); /* KAP. 240 (Andys B4c): der Kasten der Zeile laeuft nie mehr ueber den Rand. Solange der Text passt (der Regelfall am Desktop), aendert sich kein Pixel. */ max-width: 100%; } /* ── KAP. 240 (Andys B4) — MARKEN-ZEILE: GROESSE WIRKSAM, HOEHE EINSTELLBAR, KEIN UEBERLAUF ───────────────────────────────────────────────────────────── (b) Diagnose: markeAnpassen (homepage-look.js:42-59) sperrt die GESAMTBREITE der Zeile auf die Breite der Stadt — eine groessere Schrift wird dort per kleinerem letter-spacing sofort wieder auf dieselbe Breite gedrueckt (bzw. bei ls<0 auf letter-spacing:0 gesetzt). Der Groessen-Regler schreibt zwar font-size inline (HomepageLook::heroMarke), sichtbar blieb davon fast nichts. Loesung OHNE Eingriff ins Look-Skript: traegt die Zeile eine EIGENE Groesse (nur dann steht `font-size` im style-Attribut), gewinnt hier das Grund- letter-spacing der Vorlage per !important ueber die inline gesetzte Sperrung — die Zeile hat dann ihre natuerliche Breite und die Groesse wirkt echt. Ohne eigene Groesse (kein font-size im style) greift die Sperrung wie bisher: pixelgleich. */ body[data-hp-look="v9"] .hp-hero__marke[style*="font-size"] { letter-spacing: 0.30em !important; margin-right: 0 !important; } /* (Andys B4b, neuer Hoehen-Regler): der line-height-Leser fuer `marke.hoehe` steht in homepage.css — er ist ein BAUSTEIN-Regler wie marke.groesse und haengt nicht am Look (Nacharbeit: der HomepageLookTest-Waechter verlangt zu Recht, dass in Look-Dateien keine Regel ohne Look-Attribut wirkt). */ /* (Andys B4c, absichtlich sichtbar bei SCHMALEN Breiten): unterhalb des bestehenden Hero-Breakpoints (640px, homepage.css) darf die Zeile umbrechen, statt rechts aus dem Bild zu laufen. Kurze Markennamen brechen nicht um — fuer sie aendert sich auch hier nichts. */ @media (max-width: 640px) { body[data-hp-look="v9"] .hp-hero__marke { white-space: normal; } } /* Die Stadt wird zum zweiten Hauptdarsteller, der Slogan tritt zurueck. Beides sind Vorlagen-Werte: hat der Bediener im Hero-Bedienfeld eine eigene Groesse gesetzt, steht die als style am Element und gewinnt — das ist gewollt, die eigene Einstellung schlaegt die Vorlage. */ body[data-hp-look="v9"] .hp-hero__city { font-size: clamp(54px, 12.5vw, 190px); letter-spacing: calc(-0.045em + var(--hp-trackadd, 0em)); line-height: calc(0.86 + var(--hp-lineadd, 0)); text-shadow: 0 8px 46px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3); } body[data-hp-look="v9"] .hp-hero__in .hp-h1 { font-size: clamp(19px, 3.1vw, 42px); letter-spacing: calc(-0.02em + var(--hp-trackadd, 0em)); line-height: calc(1.06 + var(--hp-lineadd, 0)); opacity: 0.94; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); margin: 0; } /* In V9 steht das Datum UNTER der Stadt und traegt die Akzentfarbe. Heute steht es darueber — deshalb der Kasten auf Flex und das Datum ans Ende. */ body[data-hp-look="v9"] .hp-hero__event { display: flex; flex-direction: column; } body[data-hp-look="v9"] .hp-hero__date { order: 2; margin: clamp(6px, 1vw, 12px) 0 0; font-size: clamp(16px, 2.35vw, 30px); font-weight: 800; letter-spacing: 0.20em; color: var(--hp-look-akzent, #A8762B); text-align: center; text-align-last: center; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65); } /* Ausrichtung des ganzen Blocks. `!important` ist hier bewusst: der Hero traegt seine Position als style AM ELEMENT (das 3x3-Raster aus Kap. 210), und die Vorlage soll den Block als Ganzes stellen koennen. Nur diese beiden Eigenschaften, nichts sonst. */ body[data-hp-look="v9"][data-hp-hero="mitte"] .hp-hero__in { align-items: center !important; text-align: center; justify-content: center; } body[data-hp-look="v9"][data-hp-hero="mitte"] .hp-hero__event, body[data-hp-look="v9"][data-hp-hero="mitte"] .hp-hero__in .hp-h1 { align-self: center !important; } body[data-hp-look="v9"][data-hp-hero="links"] .hp-hero__in { align-items: flex-start !important; text-align: left; } body[data-hp-look="v9"][data-hp-hero="links"] .hp-hero__event { align-self: flex-start !important; } /* Die Lesbarkeits-Linse. In V9 haelt der Verlauf oben und unten zusammen, waehrend die weiche Linse in der Mitte dafuer sorgt, dass der Stadtname auch vor HELLEN Bildstellen steht (in der Vorlage lag genau dort das weisse Shirt der Taenzerin). Der bestehende Verlauf (.hp-hero__media::after) bleibt unangetastet. */ body[data-hp-look="v9"][data-hp-linse="1"] .hp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* KAP. 240 (Andys B1): Die Linsen-Staerke ist eine Stellschraube (Vorgabe EXAKT der bisherige feste Wert 0.42). Der zweite Anlauf haengt als calc(- 0.2) daran: bei der Vorgabe ergibt das exakt die bisherigen 0.22, und beim Drehen wandern beide Anlaeufe gemeinsam (unter 0 klemmt CSS die Deckkraft selbst auf 0). Gesetzt wird die Variable inline an .hp-hero (hero.blade.php), nur bei eigenem Wert — sonst pixelgleich. */ background: radial-gradient(58% 42% at 50% 52%, rgba(0, 0, 0, var(--hp-hero-linse, 0.42)) 0%, rgba(0, 0, 0, calc(var(--hp-hero-linse, 0.42) - 0.2)) 52%, rgba(0, 0, 0, 0) 78%); } /* Effekt „Hero kommt entgegen": von fern/klein auf nah/gross. Der STADT-Block kommt am staerksten entgegen — er ist die Botschaft. Auch hier haengt der unsichtbare Startzustand an `body.hp-look-js`: ohne Skript ist der Hero sofort da. */ body.hp-look-js[data-hp-fx~="hero"] .hp-hero__in > *:not(.hp-look-da) { opacity: 0; transform: scale(0.80); filter: blur(6px); } body.hp-look-js[data-hp-fx~="hero"] .hp-hero__event:not(.hp-look-da) { transform: scale(0.54); filter: blur(12px); } body[data-hp-fx~="hero"] .hp-hero__in > * { transition: opacity 1.05s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.2s cubic-bezier(0.16, 0.84, 0.28, 1), filter 0.9s ease; } /* Die Endwerte muessen bei der Stadt WIEDERHOLT werden: ihre Startregel steht spaeter im Dokument und haette sie sonst ueberschrieben — die Stadt waere dauerhaft klein und unscharf geblieben (derselbe Stolperstein wie in V9). */ body[data-hp-fx~="hero"] .hp-hero__in > *.hp-look-da, body[data-hp-fx~="hero"] .hp-hero__event.hp-look-da { opacity: 1; transform: scale(1); filter: blur(0); } body[data-hp-fx~="hero"] .hp-hero__event { transition: opacity 1.3s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.55s cubic-bezier(0.14, 0.86, 0.24, 1), filter 1.15s ease; } /* ── 3. Katalog ECKEN ────────────────────────────────────────────────────── */ /* Der Rundungs-Teil braucht KEINE Regel je Stil: --hp-look-rs / --hp-look-rd kommen aus dem Katalog (HomepageLook::cssVariablen). Ein neuer Rundungs-Stil ist damit allein durch seinen Katalog-Eintrag ueberall wirksam. Die Reihenfolge der Rueckfaelle ist Absicht: --evk-radius was im Karten-Bedienfeld steht, gewinnt immer (Kap. 217) --hp-look-rs sonst die Ecken-Wahl des Looks --radius-card sonst der Wert der Vorlage */ body[data-hp-look] .hp-eventcard { border-radius: var(--evk-radius, var(--hp-look-rs, var(--radius-card))); } body[data-hp-look] .hp-dzcard { border-radius: var(--hp-look-rd, var(--radius-card)); } /* Die runden Trainer-Bilder der Startseite. `:not([class*="--form-"])` haelt die Wahl aus dem Trainer-Bedienfeld (Kap. 210) vorn — ohne diese Bedingung wuerde der Look sie ueberstimmen, weil er spaeter im Dokument steht. */ body[data-hp-look] .hp-avatars:not([class*="--form-"]) .hp-avatar__img { border-radius: var(--hp-look-rd, 50%); } /* ── KAP. 233 (A2) — SCHRAEGSTELLUNG DER TRAINER-BILDER ─────────────────────── Der Winkel sitzt am selbst, nicht am Umschlag und nicht am Abschnitt. Dort ist er unkritisch: weder `.hp-avatar` noch `.hp-avatars` hat `overflow`, es wird also nichts beschnitten. Am Abschnitt waere er dagegen gefaehrlich — die Wurzel des Bausteins ist `.hp-section`, und die wird von `fade` und von `prefers-reduced-motion` auf `transform:none` gesetzt. DER RUECKFALL IST `none`, NICHT `rotate(0deg)`. Ohne Reglerbewegung entsteht dadurch exakt dieselbe berechnete Darstellung wie vorher — kein Stapel-Kontext, keine Sub-Pixel-Verschiebung. Das ist die Bedingung dafuer, dass der A/B-Vergleich der oeffentlichen Seiten byte-gleich bleibt. ⚠ ZU WISSEN: Die Rundheit kommt aus `border-radius:50%` AM BILD. Ein gedrehtes rundes Bild ist weiter rund (ein Kreis sieht gedreht gleich aus) — bei den grossen Foto-Karten (3:4,1) kippt dagegen das ganze Hochformat. Das ist gewollt, aber es ist eine Gestaltungsfrage und gehoert vor Andys Auge. */ body[data-hp-look] .hp-avatar__img { transform: var(--hp-look-dtilt, none); } /* Sonderformen — sie lassen sich nicht als Rundung ausdruecken und tragen deshalb ihren eigenen Schluessel im Attribut. */ /* asymmetrisch: nur eine Ecke rund (V9: 0 32px 0 0). */ body[data-hp-ecken-s="asym"] .hp-eventcard { border-radius: 0 32px 0 0; } body[data-hp-ecken-d="asym"] .hp-dzcard, body[data-hp-ecken-d="asym"] .hp-avatars:not([class*="--form-"]) .hp-avatar__img { border-radius: 0 32px 0 0; } /* Scoop: eine ausgestanzte Ecke oben rechts (V9-Maske, 28px). */ body[data-hp-ecken-s="scoop"] .hp-eventcard, body[data-hp-ecken-d="scoop"] .hp-dzcard { -webkit-mask-image: radial-gradient(28px at 100% 0, transparent 98%, #000 100%); mask-image: radial-gradient(28px at 100% 0, transparent 98%, #000 100%); } /* Gold-Winkel: Eck-Linien wie im Kamera-Sucher, an zwei gegenueberliegenden Ecken. V9 nutzt dafuer ::before UND ::after. Bei uns ist ::after schon der Bild-Verlauf (homepage.css) — deshalb stecken hier BEIDE Winkel in ::before, gezeichnet aus vier Farbflaechen. Masse wie in V9: 16px Abstand, 56px lang, 4px dick. */ body[data-hp-ecken-s="winkel"] .hp-eventcard::before, body[data-hp-ecken-d="winkel"] .hp-dzcard::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); background: linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) 16px 16px / 56px 4px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) 16px 16px / 4px 56px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) right 16px bottom 16px / 56px 4px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) right 16px bottom 16px / 4px 56px no-repeat; transition: background-size 0.35s ease; } /* Gold-Kerbe (Royals-Stil): zwei abgeschraegte Ecken, ringsum ein feiner Goldrand. Bauart wie in V9: der Kasten selbst IST die Goldflaeche, das Bild liegt 2px eingerueckt darin — was durchscheint, ist der Rand. Anders bekaeme man an der Schraege keinen sauberen Strich. */ body[data-hp-ecken-s="kerbe"] .hp-eventcard, body[data-hp-ecken-d="kerbe"] .hp-dzcard { --kerbe: 36px; background: var(--hp-look-gold-hell, #C99A46); clip-path: polygon(var(--kerbe) 0, 100% 0, 100% calc(100% - var(--kerbe)), calc(100% - var(--kerbe)) 100%, 0 100%, 0 var(--kerbe)); } body[data-hp-ecken-d="kerbe"] .hp-dzcard { --kerbe: 26px; } body[data-hp-ecken-s="kerbe"] .hp-eventcard img, body[data-hp-ecken-d="kerbe"] .hp-dzcard img { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); clip-path: polygon(calc(var(--kerbe) - 2px) 0, 100% 0, 100% calc(100% - var(--kerbe) + 2px), calc(100% - var(--kerbe) + 2px) 100%, 0 100%, 0 calc(var(--kerbe) - 2px)); } /* ── 3a. DIESELBEN SONDERFORMEN AM TRAINER-BAUSTEIN (Kap. 231) ───────────── */ /* Die Regeln oben treffen .hp-eventcard und .hp-dzcard. Der Trainer-Baustein der Startseite rendert aber weder das eine noch das andere, sondern .hp-avatars > a.hp-avatar > img.hp-avatar__img (dozenten.blade.php:134-140) — Scoop, Gold-Winkel und Gold-Kerbe waren dort deshalb wirkungslos. Hier kommen sie an, mit denselben Massen wie oben; erfunden wird nichts. DREI DINGE SIND AM TRAINER ANDERS: 1. DAS BILD IST RUND (homepage.css:425, border-radius:50%), alle drei Formen sind aber an einem RECHTECK gedacht. Nachgerechnet am 184px-Bild: die Ecke der Bildflaeche liegt 130px von der Mitte, der Kreisrand nur 92px — die 28px des Scoop reichen also gar nicht bis zum Kreis, der Biss waere UNSICHTBAR. Die Gold-Winkel wiederum staenden zur Haelfte neben dem Bild. Alle drei heben die Rundung deshalb auf, genau wie `asym` (Zeile 229/230) es schon tut. `:not([class*="--form-"])` haelt weiter die Wahl aus dem Trainer-Bedienfeld vorn (Kap. 210). Das doppelt genannte Attribut hebt die Stufe auf (0,5,1): sonst staende sie gleichauf mit der Foto-Karten-Regel weiter unten und es entschiede die Reihenfolge im Dokument (Merker „CSS-Spezifitaet schlaegt Reihenfolge"). 2. EIN KANN KEIN ::before TRAGEN — es ist ein ersetztes Element. Gold- Winkel und Gold-Kerbe brauchen aber eins. Das umschliessende haelt Bild UND Name UND Stil; ein ::before daran saesse an der Ecke des ganzen Textblocks, nicht an der Bildecke. Fuer diese zwei Formen legt der Baustein deshalb einen Umschlag um das Bild — und NUR fuer sie: ohne sie entsteht kein Zeichen mehr HTML als bisher. `width:fit-content` heisst: der Umschlag ist so gross, wie das Bild WIRKLICH ist — 184px (Grundregel), 248px (Uebersicht --xl), volle Spaltenbreite (Foto-Karten) oder was der Regler „Bildgroesse" vorgibt. Gemessen statt nachgerechnet; eine zweite Wahrheit ueber die Bildbreite gibt es hier nicht. 3. DER ZOOM BEIM ZEIGEN IST EINE TRANSFORMATION (weiter unten: scale(1.03) am Bild), und `transform` ist EINE Eigenschaft — was dort steht, loescht alles andere. Scoop (Maske am Bild) und Gold-Winkel (::before am Umschlag) stoert er nicht: die Maske skaliert mit, die Winkel sitzen auf einem anderen Element. Die Gold-Kerbe schon — ihr Goldrand entsteht aus zwei um 2px versetzten Clip-Pfaden, und ein mitskalierter Clip-Pfad des Bildes schoebe sich ueber genau diesen Rand. Bei ihr wandert der Zoom deshalb auf den Umschlag: Rahmen und Bild wachsen zusammen, der Effekt bleibt erhalten. */ /* Die Rundung weg — sonst waere von allen dreien nichts oder das Falsche zu sehen. */ body[data-hp-ecken-d="scoop"][data-hp-ecken-d] .hp-avatars:not([class*="--form-"]) .hp-avatar__img, body[data-hp-ecken-d="winkel"][data-hp-ecken-d] .hp-avatars:not([class*="--form-"]) .hp-avatar__img, body[data-hp-ecken-d="kerbe"][data-hp-ecken-d] .hp-avatars:not([class*="--form-"]) .hp-avatar__img { border-radius: 0; } /* Scoop: derselbe 28px-Biss oben rechts wie an der Staedte-Karte. */ body[data-hp-ecken-d="scoop"] .hp-avatar__img { -webkit-mask-image: radial-gradient(28px at 100% 0, transparent 98%, #000 100%); mask-image: radial-gradient(28px at 100% 0, transparent 98%, #000 100%); } /* Der Umschlag ums Bild. Er ersetzt am Trainer die Karte, an der die zwei Gold-Formen oben haengen. Der Abstand von 14px unter dem Bild wandert mit auf den Umschlag, damit dessen Hoehe wirklich die Bildhoehe ist. */ body[data-hp-ecken-d="winkel"] .hp-avatar__pic, body[data-hp-ecken-d="kerbe"] .hp-avatar__pic { position: relative; display: block; width: fit-content; margin: 0 auto 14px; } body[data-hp-ecken-d="winkel"] .hp-avatar__pic > .hp-avatar__img, body[data-hp-ecken-d="kerbe"] .hp-avatar__pic > .hp-avatar__img { display: block; margin: 0; } /* Gold-Winkel: Masse und Aufbau wie bei der Staedte-Karte (16px Abstand, 56px lang, 4px dick, beide Winkel in EINEM ::before). `overflow:hidden` haelt den Zoom beim Zeigen im Rahmen — genau das tun .hp-eventcard/.hp-dzcard auch. */ body[data-hp-ecken-d="winkel"] .hp-avatar__pic { overflow: hidden; } body[data-hp-ecken-d="winkel"] .hp-avatar__pic::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); background: linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) 16px 16px / 56px 4px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) 16px 16px / 4px 56px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) right 16px bottom 16px / 56px 4px no-repeat, linear-gradient(var(--hp-look-gold-hell, #C99A46) 0 0) right 16px bottom 16px / 4px 56px no-repeat; transition: background-size 0.35s ease; } /* Gold-Kerbe: Bauart wie bei der Staedte-Karte — der Umschlag IST die Goldflaeche, das Bild liegt 2px eingerueckt darin, und was durchscheint, ist der Rand. Statt `inset:2px` (dort liegt das Bild absolut in der Karte) macht das hier ein Innenabstand von 2px; das Ergebnis ist dasselbe. */ body[data-hp-ecken-d="kerbe"] .hp-avatar__pic { --kerbe: 26px; padding: 2px; background: var(--hp-look-gold-hell, #C99A46); clip-path: polygon(var(--kerbe) 0, 100% 0, 100% calc(100% - var(--kerbe)), calc(100% - var(--kerbe)) 100%, 0 100%, 0 var(--kerbe)); transition: transform 1s cubic-bezier(0.2, 0.7, 0.25, 1); } body[data-hp-ecken-d="kerbe"] .hp-avatar__pic > .hp-avatar__img { clip-path: polygon(calc(var(--kerbe) - 2px) 0, 100% 0, 100% calc(100% - var(--kerbe) + 2px), calc(100% - var(--kerbe) + 2px) 100%, 0 100%, 0 calc(var(--kerbe) - 2px)); } /* Der Zoom wandert vom Bild auf den Umschlag (s. Punkt 3 oben) — und NUR dort, wo es ihn ueberhaupt gibt: bei den Foto-Karten. Bei den runden Bildern zoomt nichts, und die Gold-Kerbe soll das nicht heimlich einfuehren (gemessen: `transform` blieb dort „none", mit und ohne Mauszeiger). Die zwei Attribute zusammen heben die Stufe auf (0,5,1) und damit ueber die Foto-Karten-Regel weiter unten — auf „spaeter im Dokument gewinnt" verlassen wir uns nicht. */ /* KAP. 233 (A2): Bei der Gold-Kerbe wandert der Zoom auf den Umschlag (Zeile darunter); das Bild bekommt hier absichtlich KEINEN Zoom. Der Winkel muss aber stehen bleiben, sonst schnappte das Bild beim Zeigen gerade — deshalb `var(...)` statt `none`, mit `none` als Rueckfall. */ body[data-hp-dozenten="karten"][data-hp-ecken-d="kerbe"] .hp-avatar:hover .hp-avatar__img { transform: var(--hp-look-dtilt, none); } body[data-hp-dozenten="karten"][data-hp-ecken-d="kerbe"] .hp-avatar:hover .hp-avatar__pic { transform: scale(1.03); } /* ── 3b. STÄDTE ALS BREITE BANNER (Paket 3) ──────────────────────────────── */ /* Dieselben Karten, andere Darstellung — kein zweiter Baustein und kein anderes HTML (R38). Aus dem Raster wird eine Spalte, aus der Kachel ein breites Banner. */ body[data-hp-staedte="banner"] .hp-grid-3, body[data-hp-staedte="banner"] .hp-evgrid { grid-template-columns: 1fr; gap: var(--hp-look-babs, 22px); counter-reset: hp-banner; } body[data-hp-staedte="banner"] .hp-eventcard { aspect-ratio: auto; height: var(--hp-look-bh, 400px); counter-increment: hp-banner; } /* Der Verlauf laeuft beim Banner von LINKS (in der Kachel von unten): der Text steht links, und rechts soll das Bild frei bleiben. */ body[data-hp-staedte="banner"] .hp-eventcard::after { background: linear-gradient(90deg, rgba(8, 9, 12, 0.80) 0%, rgba(8, 9, 12, 0.42) 42%, rgba(8, 9, 12, 0.06) 78%); } /* Reihenfolge wie in der Vorlage: Nummer — STADT — Termin — „Mehr erfahren". Heute steht der Termin ueber der Stadt, deshalb der Flex-Kasten mit `order`. */ body[data-hp-staedte="banner"] .hp-eventcard__txt { display: flex; flex-direction: column; align-items: flex-start; left: clamp(22px, 3.2vw, 44px); right: auto; bottom: clamp(22px, 3.2vw, 44px); max-width: 78%; } /* Die laufende Nummer kommt aus dem Zaehler — sie steht nicht im HTML und muss deshalb auch nicht gepflegt werden. */ body[data-hp-staedte="banner"] .hp-eventcard__txt::before { content: counter(hp-banner, decimal-leading-zero); order: 1; font-size: 12px; font-weight: 800; letter-spacing: 0.20em; color: var(--hp-look-akzent, #A8762B); margin-bottom: 8px; } body[data-hp-staedte="banner"] .hp-eventcard__city { order: 2; font-size: clamp(32px, 5.6vw, 80px); letter-spacing: calc(-0.04em + var(--hp-trackadd, 0em)); line-height: calc(0.94 + var(--hp-lineadd, 0)); } body[data-hp-staedte="banner"] .hp-eventcard__date { order: 3; font-size: 14px; font-weight: 700; letter-spacing: 0.10em; opacity: 0.9; margin-top: 8px; } body[data-hp-staedte="banner"] .hp-eventcard__more { order: 4; margin-top: 14px; font-size: 14px; font-weight: 800; border-bottom: 2px solid var(--hp-look-akzent, #A8762B); padding-bottom: 3px; } /* Der Goldrand ringsum — nur wenn eine Dicke eingestellt ist. */ body[data-hp-staedte="banner"] .hp-eventcard { box-shadow: inset 0 0 0 var(--hp-look-brand, 0px) var(--hp-look-akzent, #A8762B); } @media (max-width: 700px) { body[data-hp-staedte="banner"] .hp-eventcard { height: max(240px, calc(var(--hp-look-bh, 400px) * 0.62)); } body[data-hp-staedte="banner"] .hp-eventcard__txt { max-width: 92%; } } /* Die NUMMERN-LASCHE. Sie ragt aus der oberen Ecke heraus — dafuer muss der Rand der Karte frei sein. Der Bild-Zoom beim Zeigen entfaellt bei diesem Stil bewusst: ohne `overflow: hidden` liefe das groesser werdende Bild sonst ueber die Kante. */ /* Der Zaehler wird sonst nur in der Banner-Darstellung gesetzt — ohne ihn stuende auf der Lasche gar keine Nummer. Deshalb hier noch einmal fuer beide Formen. */ body[data-hp-ecken-s="lasche"] .hp-grid-3, body[data-hp-ecken-s="lasche"] .hp-evgrid { counter-reset: hp-banner; } body[data-hp-ecken-s="lasche"] .hp-eventcard { counter-increment: hp-banner; } body[data-hp-ecken-d="lasche"] .hp-avatars { counter-reset: hp-banner; } body[data-hp-ecken-d="lasche"] .hp-dzcard { counter-increment: hp-banner; } body[data-hp-ecken-s="lasche"] .hp-eventcard, body[data-hp-ecken-d="lasche"] .hp-dzcard { overflow: visible; margin-top: 15px; } body[data-hp-ecken-s="lasche"] .hp-eventcard:hover img, body[data-hp-ecken-d="lasche"] .hp-dzcard:hover img { transform: none; } body[data-hp-ecken-s="lasche"] .hp-eventcard::before, body[data-hp-ecken-d="lasche"] .hp-dzcard::before { content: counter(hp-banner, decimal-leading-zero); position: absolute; top: -15px; left: 26px; z-index: 5; display: flex; align-items: center; height: 30px; padding: 0 15px; background: var(--hp-look-akzent, #A8762B); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; border-radius: 6px; box-shadow: 0 6px 16px color-mix(in srgb, var(--hp-look-akzent, #A8762B) 40%, transparent); } /* Traegt das Banner schon eine Nummer im Text, waere sie doppelt. */ body[data-hp-staedte="banner"][data-hp-ecken-s="lasche"] .hp-eventcard__txt::before { content: none; } /* ── 3c. TRAINER ALS FOTO-KARTEN (Paket 3) ───────────────────────────────── */ /* BEWUSSTE ABWEICHUNG von der Vorlage: Dort steht der Name zweimal — einmal fest unter dem Bild, einmal als Einblendung beim Zeigen. Unsere Karte hat nur EINEN Namen; als Einblendung waere er ohne Maus unsichtbar (Handy, Tastatur, Vorleser). Er bleibt deshalb sichtbar, und das Zeigen bringt Zoom und Leuchten. */ body[data-hp-dozenten="karten"] .hp-avatars { grid-template-columns: repeat(3, 1fr); gap: var(--hp-look-dabs, 24px); } body[data-hp-dozenten="karten"] .hp-avatar { text-align: left; } /* DIE ECKEN BRAUCHEN DIESELBE STUFE wie die Regel weiter oben, die die runden Bilder bedient (`body[data-hp-look] .hp-avatars:not(…) .hp-avatar__img`) — sonst gewinnt die, und die Foto-Karte bliebe kreisrund. Bei 381 x 521 px wird daraus eine Ellipse, die fast alles abschneidet: im Sichtvergleich sah der ganze Trainer-Bereich leer aus. Gefunden am Bild, nachgemessen im Browser (radius war „50%"). */ body[data-hp-dozenten="karten"] .hp-avatars:not([class*="--form-"]) .hp-avatar__img { border-radius: var(--hp-look-rd, 16px); } body[data-hp-dozenten="karten"] .hp-avatar__img { width: 100%; aspect-ratio: 3 / 4.1; object-fit: cover; object-position: top center; margin: 0 0 14px; transition: transform 1s cubic-bezier(0.2, 0.7, 0.25, 1); } /* KAP. 233 (A2): `transform` ist EINE Eigenschaft — ein blankes `scale(1.03)` loeschte die Schraege, und die Karte schnappte unter der Maus gerade. Beides muss deshalb in DIESELBE Deklaration. Der Rueckfall ist hier `rotate(0deg)` und nicht `none`: in einer zusammengesetzten Angabe waere `none scale(1.03)` ungueltig, und der Browser wuerfe die ganze Zeile weg — der Zoom waere weg. Ohne gesetzten Winkel ist `rotate(0deg) scale(1.03)` sichtbar dasselbe wie vorher, und einen Stapel-Kontext gab es beim Zeigen ohnehin schon. */ body[data-hp-dozenten="karten"] .hp-avatar:hover .hp-avatar__img { transform: var(--hp-look-dtilt, rotate(0deg)) scale(1.03); } body[data-hp-dozenten="karten"] .hp-avatar__name { font-size: 15px; font-weight: 800; } body[data-hp-dozenten="karten"] .hp-avatar__style { font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase; margin-top: 2px; } @media (max-width: 900px) { body[data-hp-dozenten="karten"] .hp-avatars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { body[data-hp-dozenten="karten"] .hp-avatars { grid-template-columns: 1fr; } } /* ── 3d. ZAHLEN-STREIFEN ─────────────────────────────────────────────────── */ /* Der Block ist schon heute dunkel — in der Vorlage steht er nur GERADE statt schraeg, und die Zahlen sind hell statt farbig. */ body[data-hp-look="v9"] .hp-skew, body[data-hp-look="v9"] .hp-skew > .hp-unskew { transform: none; } body[data-hp-look="v9"] .hp-stat b { color: #F4F5F7; font-size: clamp(34px, 4.6vw, 54px); } body[data-hp-look="v9"] .hp-stat span { color: #9AA0A8; } /* ── 4. Katalog ANORDNUNG ────────────────────────────────────────────────── */ /* V9 setzt jedes zweite Trainer-Feld tiefer. Der Betrag kommt als Stellschraube aus dem Katalog; ohne Wahl steht sie nicht da und nichts verschiebt sich. Am Handy wird der Versatz aufgehoben — untereinander waere er nur ein Loch. */ body[data-hp-anord-d] .hp-avatars > *:nth-child(even), body[data-hp-anord-d] .hp-grid-3 > *:nth-child(even) { margin-top: var(--hp-look-versatz, 0px); } @media (max-width: 560px) { body[data-hp-anord-d] .hp-avatars > *:nth-child(even), body[data-hp-anord-d] .hp-grid-3 > *:nth-child(even) { margin-top: 0; } } /* ── 5. Katalog EFFEKTE ──────────────────────────────────────────────────── */ /* glow — Leuchten beim Zeigen. Rein CSS, V9-Werte (26 % / 30 % / 55 %). */ body[data-hp-fx~="glow"] .hp-eventcard, body[data-hp-fx~="glow"] .hp-dzcard { transition: box-shadow 0.4s ease, border-color 0.4s ease; } body[data-hp-fx~="glow"] .hp-eventcard:hover, body[data-hp-fx~="glow"] .hp-dzcard:hover { box-shadow: 0 18px 46px color-mix(in srgb, var(--brand) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); } body[data-hp-fx~="glow"] .hp-avatars:not([class*="--form-"]) .hp-avatar__img { transition: box-shadow 0.4s ease; } body[data-hp-fx~="glow"] .hp-avatar:hover .hp-avatar__img { box-shadow: 0 18px 46px color-mix(in srgb, var(--brand) 26%, transparent); } /* reveal / fade — beide brauchen das kleine Look-Skript. DIE SICHERUNG: Der unsichtbare Startzustand haengt an `body.hp-look-js`, und diese Klasse setzt erst das Skript selbst. Bleibt das Skript aus (Fehler, blockiert, alter Browser), ist einfach alles sofort sichtbar — nie eine leere Seite. Das ist der Unterschied zwischen „Effekt faellt aus" und „Seite weg". */ body.hp-look-js[data-hp-fx~="reveal"] .hp-eventcard:not(.hp-look-da), body.hp-look-js[data-hp-fx~="reveal"] .hp-dzcard:not(.hp-look-da) { opacity: 0; transform: translateY(74px) scale(1.02); } body[data-hp-fx~="reveal"] .hp-eventcard, body[data-hp-fx~="reveal"] .hp-dzcard { transition: opacity 1.15s cubic-bezier(0.2, 0.7, 0.25, 1), transform 1.35s cubic-bezier(0.2, 0.7, 0.25, 1), box-shadow 0.4s ease; } body[data-hp-fx~="reveal"] .hp-eventcard.hp-look-da, body[data-hp-fx~="reveal"] .hp-dzcard.hp-look-da { opacity: 1; transform: none; } body.hp-look-js[data-hp-fx~="fade"] .hp-section:not(.hp-look-da) { opacity: 0; transform: translateY(26px); } body[data-hp-fx~="fade"] .hp-section { transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.25, 1); } body[data-hp-fx~="fade"] .hp-section.hp-look-da { opacity: 1; transform: none; } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. Aus V9 uebernommen — und hier doppelt wichtig, weil die Startzustaende sonst stehen blieben. */ @media (prefers-reduced-motion: reduce) { body[data-hp-look] * { animation: none !important; transition-duration: 0.01ms !important; } body[data-hp-look] .hp-eventcard, body[data-hp-look] .hp-dzcard, body[data-hp-look] .hp-section { opacity: 1 !important; transform: none !important; } }