/* ========================================================================== Welt „Halle" — ENTWURF vom 29.9.2026, nur auf der Startseite und nur mit ?welt=halle (oder localStorage schakal.welt = halle). Ohne den Schalter greift keine Regel dieser Datei: Alles steht unter html[data-welt='halle']. Die Leitmetapher, nach DESIGN_SOFTWARE.md Abschnitt 3: Schakal Sports ist eine Hamburger Boxhalle am Abend. Die Ware liegt im Licht eines Hallenstrahlers, alles andere ist Halle — Beton, Matte, Tape und Seil. Rot ist das Ringseil. Warum überhaupt: Regel 13 des Leitfadens warnt vor Claudes Hausstil (warmer heller Grund, Terrakotta-Knopf, helle Karten mit Haarlinie). Die Seite lag nah daran — vor allem bei den Karten mit Rahmen und Schatten und der Vertrauensleiste als Kachelblock. Das Rot und die breite Archivo bleiben: Sie sind die Marke, nicht der Hausstil. Was die Metapher hier trägt, von oben nach unten: Beton feines, kühles Korn im Seitengrund Licht ein Kegel von oben auf die Ware im Auftakt Matte ein Bodenschatten, auf dem das Paket steht Auslage Produktbilder frei auf dem Grund, ohne Kasten (Vorbild LFDY) Tape Hinweise auf der Ware als Streifen Bandage Seil seit 1.10.2026 nur noch auf dem Preisetikett ========================================================================== */ /* --- Beton ----------------------------------------------------------------- Kühler als vorher (#e9e8e5 → #e5e6e5): Der alte Grund hatte einen Gelbstich, der ihn in die Nähe von Creme rückte. Der Unterschied ist klein genug, dass jede Kontrastmessung der Seite ihn trägt. Das Korn ist eine gekachelte SVG-Rauschtextur, 160 px, im Grund des Body — nicht als feste Ebene über allem. Eine fixierte Vollbildebene müsste der Browser bei jedem Scrollbild mit zusammensetzen, und iOS ist dort empfindlich (siehe Projektnotiz zu den Render-Bremsen). Als Hintergrund scrollt es mit und kostet nichts. */ html[data-welt='halle'] { --bg: #e5e6e5; --stage-flat: #dedfde; --surface: #efefee; --beton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } /* Dunkel nur bei ausdrücklicher Wahl. Die Seite folgt der Systemvorgabe seit dem 6.9.2026 nicht mehr (Hell ist Standard); eine Regel hier, die es doch tat, gab im ersten Entwurf dunklen Grund unter heller Schrift. */ html[data-welt='halle'][data-theme='dark'] { --bg: #141417; --stage-flat: #19191c; } html[data-welt='halle'] body, html[data-welt='halle'] .hero { background-image: var(--beton); background-size: 160px 160px; } /* --- Licht: der Hallenstrahler --------------------------------------------- Ein schmaler, hoher Kegel von oben auf die Ware. Er ersetzt die breite Ellipse, die bisher hinter dem Handschuh lag: Die war Studiolicht auf einem Fototisch, der Kegel ist eine Lampe unter einer Hallendecke. Gezeichnet als zwei Verläufe übereinander, der Kern hell und eng, der Schein weit und schwach — ein einzelner Verlauf sieht nach Scheinwerfer auf einer Bühne aus, zwei nach Licht im Raum. Er atmet nicht: Umgebung, die man bei jedem Besuch sieht, bewegt sich nicht (Leitfaden 7.1). */ /* Licht liest sich nur gegen Dunkel: Weiß auf hellem Grau hatte im ersten Entwurf keinen Kontrast, der Kegel war nicht zu sehen. Der Auftakt liegt deshalb eine Stufe tiefer als die Seite, und die Ecken fallen weich ab — die Halle außerhalb des Lichts. */ html[data-welt='halle'] { --halle-rand: rgba(24, 24, 28, .13); } html[data-welt='halle'] .hero { background-color: #d9dad9; } html[data-welt='halle'][data-theme='dark'] .hero { background-color: var(--stage-flat); } @media (min-width: 1020px) { html[data-welt='halle'] .hero::after { background: radial-gradient(ellipse 13% 80% at 30% -6%, rgba(255, 255, 255, .9), transparent 72%), radial-gradient(ellipse 30% 100% at 30% -10%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(ellipse 80% 90% at 32% 40%, transparent 50%, var(--halle-rand) 100%), linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--stage-flat) 62%, transparent) 100%); } } @media (max-width: 1019px) { html[data-welt='halle'] .hero::after { background: radial-gradient(ellipse 36% 70% at 64% -4%, rgba(255, 255, 255, .85), transparent 72%), radial-gradient(ellipse 90% 80% at 60% 40%, transparent 50%, var(--halle-rand) 100%), linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--stage-flat) 62%, transparent) 100%); } } /* In der dunklen Fassung ist das Licht wärmer und schwächer: Eine Halle am Abend hat Natriumdampf, kein Studioweiß. */ html[data-welt='halle'][data-theme='dark'] .hero::after { background: radial-gradient(ellipse 16% 80% at 30% -6%, rgba(255, 236, 214, .16), transparent 72%), radial-gradient(ellipse 36% 96% at 30% -10%, rgba(255, 236, 214, .07), transparent 70%); } /* --- Matte: der Boden unter der Ware -------------------------------------- Das Paket stand bisher in einem Lichtfleck und schwebte darin. Ein flacher, weicher Bodenschatten stellt es ab — dieselbe Regel, mit der der Leitfaden Gegenstände zeichnet (Abschnitt 8: „Schatten als weichgezeichnete Ellipse unter dem Objekt"). Er liegt in der Bühne, hinter der Ware, und bläht das Layout nicht auf (absolute Lage, kein eigenes Maß im Fluss). */ html[data-welt='halle'] .hero__stage::after { content: ''; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: 2%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20, 20, 24, .22), transparent 70%); pointer-events: none; } html[data-welt='halle'] .hero__spot { opacity: .55; } /* --- Auslage statt Karten --------------------------------------------------- Das eigentliche Hausstil-Merkmal: helle Karte, Haarlinie, Schatten, Hub beim Zeigen. Jetzt steht das Bild frei auf dem Grund, Name und Preis darunter ohne Kasten — wie bei LFDY, und wie Ware auf einem Regal. Der Hub entfällt: Bewegung gehört dem Bild (Tausch Motiv → Freisteller), nicht der ganzen Kachel. */ html[data-welt='halle'] .card { background: transparent; border: 0; box-shadow: none; overflow: visible; } @media (hover: hover) and (pointer: fine) { html[data-welt='halle'] .card:hover { transform: none; box-shadow: none; } } html[data-welt='halle'] .card__media { border-radius: var(--r-3); } /* Die rote Kante wandert vom Kartenrand unter das Bild: ein Stück Seil, das beim Zeigen einläuft. */ html[data-welt='halle'] .card::after { display: none; } html[data-welt='halle'] .card__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); pointer-events: none; } html[data-welt='halle'] .card:focus-within .card__media::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { html[data-welt='halle'] .card:hover .card__media::after { transform: scaleX(1); } } html[data-welt='halle'] .card__body { padding: var(--s-4) 0 0; gap: var(--s-2); } html[data-welt='halle'] .card__row { margin-top: var(--s-2); } /* --- Tape: Hinweise auf der Ware ------------------------------------------ „Nur 14 OZ" war eine Pille. Jetzt ist es ein Streifen Bandage, leicht schräg aufgeklebt, mit gerissenen Enden. Die Bandage ist eigene Ware — der Hinweis spricht also die Sprache des Sortiments. clip-path ist statisch und damit billig; teuer wird er erst unter einer Animation (Projektnotiz iOS-Render-Bremsen). */ html[data-welt='halle'] .card__flag { top: var(--s-4); left: calc(var(--s-3) * -1); padding: .5rem 1rem .5rem 1.1rem; border-radius: 1px; background: var(--bone); color: var(--night); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(20, 20, 24, .18); clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 0, 97% 30%, 100% 55%, 96% 78%, 100% 100%, 12% 100%, 7% 90%, 3% 100%, 0 88%, 2% 50%); } html[data-welt='halle'] .card__flag--out { background: var(--oxblood); color: var(--bone); } /* --- Vertrauensleiste: kein Kachelblock -------------------------------- Vier helle Kacheln in einem gerundeten Kasten mit Schatten waren das zweite Hausstil-Merkmal. Jetzt vier Angaben in einer Reihe unter dem Seil, ohne Fläche. */ html[data-welt='halle'] .trust--unten { box-shadow: none; border: 0; border-radius: 0; /* Seit 1.10.2026 ohne Seil (siehe components.css): eine Haarlinie. */ background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat; padding-top: var(--s-5); gap: 0; } html[data-welt='halle'] .trust--unten .trust__cell { background: transparent; padding-inline: 0 var(--s-5); } @media (hover: hover) and (pointer: fine) { html[data-welt='halle'] .trust--unten .trust__cell:hover { background: transparent; } }