Andrej StevanovskiandClaude Opus 5.5
7f1525b381
- Header einzeilig und sticky, aktiver Punkt als Akzentkante statt Pille - Hero: Headline zuerst, Foto danach als gerahmtes Bild - Headline so groß wie die Spalte erlaubt (45px statt 34px bei 375), Kontur dünner - Abstände und Bilder gestrafft: Startseite 4936 -> 4260px Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
615 lines
32 KiB
CSS
615 lines
32 KiB
CSS
/*
|
||
EMMA'S SCHATZKISTE — Startseite · Hilfe Verein · Shop
|
||
Stand 2026-09-21
|
||
|
||
BENANNTE REFERENZ (Workspace-Regel: kein UI-Code ohne benannte Referenz)
|
||
→ design-references/entries/emmas-schatzkiste-ds.md
|
||
Übernommen: die handgelegte Headline (jede Zeile eigene Rotation), die
|
||
Zwei-Farbwelten-Trennung Shop=blau / Verein=gelb, die durchgehende Pill-Rundung,
|
||
die blaustichigen Schatten, das 4px-Raster, Motion nur als Zustandsfeedback,
|
||
Sprache/Tonalität (Deutsch, Du-Form, Satzkleinschreibung, keine Emoji).
|
||
NICHT übernommen: der Dreifach-Akzent, die neunstufige Typo-Skala, die
|
||
durchgefallenen Textkontraste, die fixen Pixel-Stopps im Hero-Scrim.
|
||
|
||
BEWUSSTE ABWEICHUNGEN VOM HANDOFF — alle drei vom Auftraggeber freigegeben,
|
||
Begründung je Guardrail:
|
||
|
||
1. FARBE — bewusste Abweichung vom Guardrail "Ein einziger Akzent-Ton pro Seite",
|
||
auf ausdrücklichen Kundenwunsch (2026-09-21: die disziplinierte Ein-Akzent-Fassung
|
||
wurde als zu blass empfunden). Gleiches Vorgehen wie bei Hypno Active, wo die drei
|
||
Logofarben ebenfalls gegen den Guardrail stehen und dokumentiert sind.
|
||
|
||
Damit die Hierarchie trotzdem trägt, gilt eine harte Regel:
|
||
FARBE LEBT IN FLÄCHEN UND IN DISPLAY-TYPO — NIE IM FLIESSTEXT.
|
||
Alle drei Buntfamilien laufen wieder, aber nur als Sektionsflächen, Kachelfüllungen,
|
||
Icon-Chips und H1-Zeilen. Jeder Fliesstext bleibt --ink-500 / --ink-700. Damit
|
||
kollidieren die Farben nie miteinander um dieselbe Leseebene.
|
||
Die Seitenidentität bleibt erhalten: --accent* ist weiter pro Seite gesetzt
|
||
(Startseite Sky, Verein Sun) und regiert Icons, Rahmen und aktiven Nav-Zustand.
|
||
Coral bleibt ausschliesslich Handlungsfarbe der primären Buttons.
|
||
|
||
2. KONTRAST (Guardrail "Graue Schrift auf farbigem Grund")
|
||
Gemessen, nicht geschätzt:
|
||
ink-300 #8B94A0 auf sun-100 #FDF4DC .... 2.80 durchgefallen (§19-Zeile!)
|
||
weiß auf coral-400 #F4715A ............... 2.85 durchgefallen
|
||
weiß auf sky-400 #4A9FE0 ................. 2.87 durchgefallen
|
||
ink-500 #4A5560 auf sun-100 .............. 6.94 bestanden
|
||
Auf farbigem Grund steht Text jetzt in --ink-700 (13.20 auf Creme).
|
||
Primärbutton: weiß auf --coral-600 #C8402B (4.97), Hover #B03422 (6.25),
|
||
Press #A82F1E (6.80) — dunkelt bei jedem Schritt nach, nie heller.
|
||
Header: weiß statt sky-400, damit die Navigation nicht weiß auf Hellblau steht.
|
||
|
||
3. TYPO-SKALA (Guardrail "Typo-Extreme, kein Mittelmaß")
|
||
Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
|
||
Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.
|
||
|
||
4. KRÄFTIGERE TÖNUNGEN (2026-09-24) — zweite Kundenrückmeldung "zu transparent".
|
||
Referenz wie oben: der DS-Eintrag hält fest, dass Pastell allein nicht trägt.
|
||
sun-100 → sun-200, sky-50 → sky-100, coral-50 → coral-100, Icon-Chips im Vollton,
|
||
Hero-Schleier auf eine kurze Kante gekürzt, Header deckend. Auf den neuen Gründen
|
||
Display-Typo in der dunkleren Stufe (≥3.87). Messwerte in DESIGN.md, Abschnitt 1b.
|
||
|
||
ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
|
||
per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
|
||
jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
|
||
800px, 96-Farben-Palette, 67/68 KB) und liegen als assets/logo-*.png. Kein Blend-Mode
|
||
mehr noetig. Originale: design_handoff_emmas_schatzkiste/assets/.
|
||
|
||
FONTS: Fredoka + Nunito. Laut Handoff Platzhalter für einen nicht gelieferten
|
||
Markenfont — ersetzen, sobald echte Binaries da sind. Kein Inter, kein System-Font.
|
||
*/
|
||
|
||
/* ============================================================ TOKENS */
|
||
:root{
|
||
/* Marke, unverändert aus dem Handoff */
|
||
--sky-400:#4A9FE0; --sky-500:#2E86D0; --sky-600:#1F6BAB;
|
||
--sky-50:#EAF4FC; --sky-100:#CFE6F8;
|
||
--sun-400:#F5C13B; --sun-600:#A87811; --sun-100:#FDF4DC;
|
||
--coral-400:#F4715A; --coral-500:#DB513A; --coral-50:#FFF1EE;
|
||
|
||
/* Ergänzt für AA-Textkontrast — siehe Abweichung 2 */
|
||
--sun-700:#8F6510; /* gelber Text in Body-Größe: 4.74 auf Creme */
|
||
--coral-600:#C8402B; /* Primärbutton, weiß darauf: 4.97 */
|
||
--coral-700:#B03422; /* Hover: 6.25 */
|
||
--coral-800:#A82F1E; /* Press: 6.80 */
|
||
|
||
/* Kräftigere Tönungen — 2026-09-24, siehe Abweichung 4. Die 50/100-Pastelle
|
||
lasen gegen Weiß wie verwaschen ("zu transparent"). */
|
||
--sun-200:#FBE3A0; /* ink-700 darauf 11.44 */
|
||
--coral-100:#FFD8CE; /* ink-700 darauf 11.01 */
|
||
|
||
/* Getönte Neutrale (blaustichig, kein reines Grau) */
|
||
--ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
|
||
--line-soft:#EDEFF2; --line:#DFE3E8;
|
||
|
||
--surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
|
||
--surface-band:var(--sun-200); --surface-band-cool:var(--sky-100); --surface-footer:var(--sun-200);
|
||
|
||
/* Pro Seite überschrieben — genau ein Identitätsakzent */
|
||
--accent:var(--sky-500);
|
||
--accent-text:var(--sky-600);
|
||
--accent-soft:var(--sky-100);
|
||
--accent-line:var(--sky-400);
|
||
|
||
/* Typo — sechs Stufen */
|
||
--t-display: 700 clamp(34px, 7.2vw, 60px)/1.02 'Fredoka', 'Trebuchet MS', sans-serif;
|
||
--t-h2: 600 clamp(24px, 3.1vw, 30px)/1.12 'Fredoka', 'Trebuchet MS', sans-serif;
|
||
--t-h3: 600 20px/1.3 'Fredoka', 'Trebuchet MS', sans-serif;
|
||
--t-body: 400 17px/1.65 'Nunito', 'Segoe UI', sans-serif;
|
||
--t-small: 400 13px/1.5 'Nunito', 'Segoe UI', sans-serif;
|
||
--t-label: 700 11px/1.4 'Nunito', 'Segoe UI', sans-serif;
|
||
--ls-display:-0.01em; --ls-caps:0.08em;
|
||
|
||
/* Raster 4px. --space-14 existiert im Handoff nicht und fehlt hier bewusst auch. */
|
||
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
|
||
--space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
|
||
--space-16:64px; --space-20:80px; --space-24:96px;
|
||
|
||
--page-max:1180px; --page-pad-x:24px; --gutter-grid:20px; --header-h:64px;
|
||
|
||
--radius-xs:6px; --radius-s:10px; --radius-m:14px; --radius-l:20px; --radius-xl:28px;
|
||
--radius-band:24px; --radius-pill:999px;
|
||
|
||
--shadow-xs:0 1px 2px rgba(35,52,74,.06);
|
||
--shadow-card:0 2px 10px rgba(35,52,74,.07);
|
||
--shadow-card-hover:0 10px 24px rgba(35,52,74,.13);
|
||
--shadow-band:0 4px 22px rgba(35,52,74,.09);
|
||
--shadow-button:0 2px 0 rgba(35,52,74,.10);
|
||
--ring-focus:0 0 0 3px var(--sky-100), 0 0 0 5px var(--sky-400);
|
||
|
||
--ease:cubic-bezier(.2,.6,.3,1);
|
||
--dur-color:120ms; --dur-lift:200ms; --dur-large:340ms;
|
||
}
|
||
|
||
/* Vereinsseite: gelbe Welt. Einziger Akzentwechsel im ganzen System. */
|
||
.page-verein{
|
||
--accent:var(--sun-600);
|
||
--accent-text:var(--sun-700);
|
||
--accent-soft:var(--sun-200);
|
||
--accent-line:var(--sun-400);
|
||
/* Icon-Chips im hellen Gelb statt sun-600 (las als Braun). Weißes Icon darauf
|
||
wäre 1.6 — deshalb Ink-Icon: 8.67. */
|
||
--chip-bg:var(--sun-400); --chip-fg:var(--ink-700);
|
||
}
|
||
|
||
/* ============================================================ BASE */
|
||
*{box-sizing:border-box}
|
||
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
|
||
body{
|
||
margin:0; background:var(--surface-page); color:var(--ink-500);
|
||
font:var(--t-body); -webkit-font-smoothing:antialiased;
|
||
}
|
||
h1,h2,h3{margin:0; letter-spacing:var(--ls-display); color:var(--ink-700)}
|
||
h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)}
|
||
p{margin:0}
|
||
img{max-width:100%; display:block}
|
||
a{color:var(--accent-text); text-underline-offset:3px}
|
||
/* Verein: Links in Ink mit dicker gelber Unterstreichung statt braunem Text. */
|
||
.page-verein main a:not(.btn){color:var(--ink-700); text-decoration-color:var(--sun-400); text-decoration-thickness:3px}
|
||
a:hover{color:var(--sky-600)}
|
||
|
||
.wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)}
|
||
.section{padding-block:var(--space-16)}
|
||
.section--tight{padding-block:var(--space-12)}
|
||
|
||
/* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
|
||
tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
|
||
.field{padding-block:var(--space-16)}
|
||
.field--cool{background:var(--sky-100)}
|
||
.field--warm{background:var(--sun-200)}
|
||
.field--rose{background:var(--coral-100)}
|
||
.field--sunk{background:var(--surface-sunk)}
|
||
|
||
/* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
|
||
nicht — sie verschwinden gegen Weiss. Gemessen: Weiss auf --sky-500 = 3.86, reicht
|
||
fuer Ueberschriften ab 24px (Schwelle 3.0), NICHT fuer Fliesstext; deshalb steht auf
|
||
dem blauen Band nur die Ueberschrift, der Fliesstext sitzt in den weissen Kacheln.
|
||
--ink-700 auf --sun-400 = 8.67 und ist ueberall zulaessig. */
|
||
.field--solid-sky{background:var(--sky-500)}
|
||
.field--solid-sky h2{color:#fff}
|
||
.field--solid-sky .lede{color:#fff}
|
||
.field--solid-sun{background:var(--sun-400)}
|
||
.field--solid-sun h2, .field--solid-sun .lede{color:var(--ink-700)}
|
||
.field--solid-sky .sh__chip, .field--solid-sun .sh__chip{background:var(--surface-card); color:var(--ink-700)}
|
||
.field--solid-sky .tile, .field--solid-sun .tile{background:var(--surface-card)}
|
||
.lede{font:var(--t-body); color:var(--ink-500); max-width:56ch}
|
||
.label{
|
||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||
color:var(--ink-500);
|
||
}
|
||
.skip{
|
||
position:absolute; left:-9999px; top:0; z-index:100;
|
||
background:var(--surface-card); color:var(--ink-700); padding:12px 18px;
|
||
border-radius:var(--radius-pill); box-shadow:var(--shadow-card);
|
||
}
|
||
.skip:focus{left:var(--page-pad-x); top:12px}
|
||
|
||
/* ============================================================ HEADER */
|
||
/* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
|
||
.hdr{
|
||
position:sticky; top:0; z-index:50; height:var(--header-h);
|
||
background:var(--surface-page); /* deckend: das durchscheinende Weiß wirkte milchig */
|
||
border-bottom:1px solid var(--line-soft);
|
||
}
|
||
.hdr__in{
|
||
height:100%; display:flex; align-items:center; justify-content:space-between;
|
||
gap:var(--space-6);
|
||
}
|
||
.hdr__brand{
|
||
display:flex; align-items:center; gap:10px; text-decoration:none;
|
||
font:var(--t-h3); color:var(--ink-700); white-space:nowrap;
|
||
min-height:44px; /* Touch-Ziel, auch auf Tablets */
|
||
}
|
||
.hdr__brand img{width:34px; height:34px; object-fit:contain}
|
||
.nav{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap}
|
||
/* 44px hoch statt 31: Tablets sind Touch-Geraete, WCAG 2.5.5 will 44x44.
|
||
Passt weiterhin in den 64px hohen Header. */
|
||
.nav a{
|
||
display:flex; align-items:center; min-height:44px;
|
||
padding:8px 14px; border-radius:var(--radius-pill);
|
||
font:600 15px/1 'Nunito','Segoe UI',sans-serif; color:var(--ink-500);
|
||
text-decoration:none; transition:color var(--dur-color) var(--ease),
|
||
background var(--dur-color) var(--ease);
|
||
}
|
||
.nav a:hover{color:var(--ink-700); background:var(--surface-sunk)}
|
||
.nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)}
|
||
|
||
/* MOBILER HEADER — unter 640px. Dritte Fassung (2026-09-24).
|
||
Die Zwei-Zeilen-Fassung (Wortmarke mittig, darunter Viererraster mit Pillen) hat
|
||
der Kunde als klobig zurückgewiesen. Jetzt wieder eine Zeile und sticky: links nur
|
||
das Zeichen (der Name steht groß im Hero-Logo direkt darunter und bleibt für
|
||
Screenreader im Link), rechts die vier Punkte. Aktiv ist eine 3px-Unterkante im
|
||
Akzent statt der Pille — dieselbe Geste wie die Footer-Kante.
|
||
Gemessen passt das bis 320px: 44px Zeichen + vier Ziele à ≥44px Höhe. */
|
||
@media (max-width:639.98px){
|
||
:root{--header-h:60px; --page-pad-x:20px}
|
||
.hdr__in{gap:var(--space-2)}
|
||
.hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
|
||
.hdr__brand img{width:36px; height:36px}
|
||
.nav{flex-wrap:nowrap; gap:0}
|
||
.nav a{
|
||
position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
|
||
font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
|
||
}
|
||
.nav a[aria-current="page"]{background:none}
|
||
.nav a[aria-current="page"]::after{
|
||
content:""; position:absolute; left:clamp(5px,2.2vw,10px); right:clamp(5px,2.2vw,10px);
|
||
bottom:6px; height:3px; border-radius:var(--radius-pill); background:var(--accent-line);
|
||
}
|
||
/* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */
|
||
.ftr__col ul{gap:2px}
|
||
.ftr__col a, .ftr__col span{
|
||
display:flex; align-items:center; min-height:44px; padding-block:2px;
|
||
}
|
||
}
|
||
|
||
/* ============================================================ BUTTONS */
|
||
.btn{
|
||
display:inline-flex; align-items:center; gap:10px; justify-content:center;
|
||
padding:13px 22px; border-radius:var(--radius-pill); border:1px solid transparent;
|
||
font:700 16px/1 'Nunito','Segoe UI',sans-serif; text-decoration:none; cursor:pointer;
|
||
transition:background var(--dur-color) var(--ease), color var(--dur-color) var(--ease),
|
||
transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
|
||
}
|
||
.btn svg{width:18px; height:18px; flex:none}
|
||
/* Primär: weiß auf coral-600 = 4.97. Dunkelt bei Hover und Press weiter nach. */
|
||
.btn--primary{background:var(--coral-600); color:#fff; box-shadow:var(--shadow-button)}
|
||
.btn--primary:hover{background:var(--coral-700); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||
.btn--primary:active{background:var(--coral-800); transform:scale(.97); box-shadow:var(--shadow-xs)}
|
||
.btn--secondary{background:var(--surface-card); color:var(--ink-700); border-color:var(--line); box-shadow:var(--shadow-button)}
|
||
.btn--secondary:hover{background:var(--surface-sunk); color:var(--ink-700); transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||
.btn--secondary:active{transform:scale(.97); box-shadow:var(--shadow-xs)}
|
||
.btn--l{padding:15px 26px; font-size:17px}
|
||
|
||
/* ============================================================ HERO */
|
||
.hero{position:relative; overflow:hidden; background:var(--accent-soft)}
|
||
.hero__media{position:absolute; inset:0; background-size:cover; background-position:74% 45%}
|
||
.hero__scrim{position:absolute; inset:0}
|
||
.hero__in{position:relative; width:100%; padding-block:var(--space-16)}
|
||
/* width:100% ist nötig: .wrap bringt margin:0 auto mit, und im Grid-Container
|
||
schluckt ein Auto-Margin das Stretch — der Block schrumpft sonst auf Max-Content. */
|
||
.hero__col{display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%,560px)}
|
||
.hero__logo{width:100%; max-width:200px}
|
||
|
||
/* Der eine Move der Referenz: jede Zeile einzeln gekippt. Bleibt.
|
||
Neu ist die Farbdisziplin — Ink trägt, ein Wort trägt den Akzent. */
|
||
.hl{display:grid; justify-items:start; gap:2px; line-height:1.05}
|
||
.hl span{display:inline-block}
|
||
.hl span:nth-child(1){transform:rotate(-2.5deg)}
|
||
.hl span:nth-child(2){transform:rotate(1.5deg) translateX(14px)}
|
||
.hl span:nth-child(3){transform:rotate(-1deg)}
|
||
/* Display-Typo darf Farbe tragen: bei >=24px gilt die Large-Text-Schwelle 3.0,
|
||
alle drei Marken-Buntwerte liegen darueber (auf Weiss 3.86 / 3.92 / 4.00,
|
||
auf Creme 3.52 / 3.57 / 3.65). Im Fliesstext waere keiner davon zulaessig. */
|
||
.hl .c-sky{color:var(--sky-500)}
|
||
.hl .c-sun{color:var(--sun-600)}
|
||
.hl .c-coral{color:var(--coral-500)}
|
||
.hl .on{color:var(--accent)}
|
||
/* Beide Heros stehen seit 2026-09-24 auf getöntem Grund (sky-100 / sun-200). Dort
|
||
fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere
|
||
Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */
|
||
.hero .hl .c-sky{color:var(--sky-500)}
|
||
/* Gelb: dunkles Gelb, das auf hellem Grund lesbar bleibt, ist zwangsläufig Braun
|
||
(sun-600/700 wurden vom Kunden am 2026-09-24 als "braun statt gelb" zurückgewiesen).
|
||
Deshalb helles Markengelb mit dunkler Kontur — wie die Buchstaben im Logo. Lesbar
|
||
macht die Kontur: ink-700 gegen den Grund misst ≥11. paint-order legt sie unter die
|
||
Füllung, damit die Buchstaben nicht dünner werden. */
|
||
.hero .hl .c-sun, .yellow-type{color:var(--sun-400)}
|
||
/* Kontur auf allen drei Zeilen (Kundenwunsch 2026-09-24) — einheitlicher Sticker-Look
|
||
wie die Wortmarke. Da die Kontur den Kontrast trägt, stehen Blau und Coral wieder
|
||
in ihren helleren Markenwerten sky-500 / coral-500 statt der dunklen 600er. */
|
||
/* 0.1em statt fester 6px: auf dem Handy (34px) liefen die Buchstaben sonst zu. */
|
||
.hero .hl span{-webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill}
|
||
.hero .hl .c-coral{color:var(--coral-500)}
|
||
.hero .trust b + span{color:var(--ink-700)}
|
||
|
||
.hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
|
||
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
|
||
|
||
.pill-eyebrow{
|
||
display:inline-block; background:var(--sun-400); color:var(--ink-700);
|
||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||
padding:7px 15px; border-radius:var(--radius-pill); transform:rotate(-2deg);
|
||
}
|
||
|
||
.trusts{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)}
|
||
.trust{display:flex; align-items:center; gap:10px}
|
||
.trust__chip{
|
||
width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
|
||
display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon 3.86 */
|
||
}
|
||
.trust svg{width:15px; height:15px; flex:none}
|
||
.trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
|
||
/* Nur die Unterzeile treffen — .trust__chip ist selbst ein <span>, und ein blankes
|
||
".trust span" setzte ihm display:block und die Textfarbe: Icon aus dem Kreis
|
||
gerutscht und dunkel statt weiß. */
|
||
.trust b + span{display:block; font:var(--t-small); color:var(--ink-500)}
|
||
|
||
/* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto
|
||
unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
|
||
Text darunter auf voller Fläche. */
|
||
@media (min-width:820px){
|
||
/* Kante der Fläche folgt der Textspalte: .wrap ist zentriert, die Spalte endet bei
|
||
50% - 590px + 24px + 560px. max() hält sie bei schmalen Fenstern bei 600px. */
|
||
.hero{min-height:clamp(540px,64vw,680px); display:grid; --scrim-edge:max(600px, calc(50% + 10px))}
|
||
.hero__in{align-self:center}
|
||
.hero--shop .hero__scrim{
|
||
/* Getönte Fläche statt Weiß, und eine kurze Kante statt eines langen Schleiers:
|
||
vorher lag bis 820px ein halbtransparenter Weißverlauf über dem Foto und nahm ihm
|
||
die Farbe. Jetzt deckt die Fläche die Textspalte, das Foto steht voll gesättigt. */
|
||
background:linear-gradient(98deg,var(--sky-100) 0,var(--sky-100) var(--scrim-edge),rgba(207,230,248,0) calc(var(--scrim-edge) + 90px));
|
||
}
|
||
.hero--verein .hero__scrim{
|
||
background:linear-gradient(100deg,var(--sun-200) 0,var(--sun-200) var(--scrim-edge),rgba(251,227,160,0) calc(var(--scrim-edge) + 90px));
|
||
}
|
||
}
|
||
@media (max-width:819.98px){
|
||
.hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
|
||
.hero__scrim{display:none}
|
||
.hero__in{padding-block:var(--space-10)}
|
||
.hero--shop{background:var(--sky-100)}
|
||
.hero--verein{background:var(--sun-200)}
|
||
}
|
||
.hero--verein{border-bottom:6px solid var(--sun-400)}
|
||
/* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
|
||
auf dem gemusterten Stoff war die feine Schrift darin nicht mehr lesbar. */
|
||
.hero__mark{
|
||
position:absolute; right:var(--page-pad-x); bottom:var(--space-6);
|
||
width:clamp(110px,16vw,180px); transform:rotate(-3deg);
|
||
background:rgba(255,255,255,.94); padding:12px; border-radius:var(--radius-xl);
|
||
box-shadow:var(--shadow-band); box-sizing:content-box;
|
||
}
|
||
@media (max-width:819.98px){ .hero__mark{display:none} }
|
||
|
||
/* ============================================================ SECTIONS */
|
||
.sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
|
||
.sh__chip{
|
||
width:44px; height:44px; flex:none; border-radius:var(--radius-m);
|
||
display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon: Grafik-Schwelle 3.0 */
|
||
transform:rotate(-3deg);
|
||
}
|
||
.sh svg{width:22px; height:22px; flex:none}
|
||
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
|
||
.cols p{max-width:52ch}
|
||
|
||
.story{
|
||
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
|
||
gap:var(--space-8); align-items:center;
|
||
}
|
||
.story__copy{display:grid; gap:var(--space-4)}
|
||
.story__copy p{max-width:50ch}
|
||
.story__img{
|
||
/* height:auto ist noetig: die width/height-Attribute im HTML (gegen Layout-Shift)
|
||
machen beide Achsen definit, dann ignoriert der Browser aspect-ratio. */
|
||
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
|
||
border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
|
||
transform:rotate(-1.5deg);
|
||
}
|
||
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)}
|
||
|
||
/* Kacheln tragen Farbe als Fuellung — der Text darin bleibt durchgehend
|
||
ink-700/ink-500 (12.99-13.20 bzw. 6.83-6.94 auf allen drei Toenen). */
|
||
.tile{
|
||
background:var(--surface-card); border:1px solid var(--line-soft);
|
||
border-top:4px solid var(--accent-line);
|
||
border-radius:var(--radius-l); box-shadow:var(--shadow-card);
|
||
padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
|
||
transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
|
||
}
|
||
/* Getönte Kacheln tragen auch auf dem gelben Vollband ihre Farbe (Spezifität 0,2,0,
|
||
damit sie das Weiß von .field--solid-* .tile schlagen). Fließtext darin ink-700:
|
||
Guardrail "keine graue Schrift auf farbigem Grund". */
|
||
.tile.tile--cool{background:var(--sky-100); border-color:var(--sky-100); border-top-color:var(--sky-500)}
|
||
.tile.tile--warm{background:var(--sun-200); border-color:var(--sun-200); border-top-color:var(--sun-600)}
|
||
.tile.tile--rose{background:var(--coral-100); border-color:var(--coral-100); border-top-color:var(--coral-500)}
|
||
.tile[class*="tile--"] p{color:var(--ink-700)}
|
||
/* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
|
||
.field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
|
||
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||
.tile p{color:var(--ink-500)}
|
||
.tile .btn{justify-self:start; margin-top:var(--space-1)}
|
||
|
||
/* Opa Martin */
|
||
/* 560px waren als leeres Platzhalterquadrat eine tote Flaeche mitten auf der Seite.
|
||
Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
|
||
vorbereiteter Rahmen liest und nicht wie ein Loch. */
|
||
.portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
|
||
/* Gleiche Behandlung wie .story__img — gekippt, weiß gerahmt, wie ein aufgelegtes Foto. */
|
||
.portrait__img{
|
||
width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
|
||
border-radius:var(--radius-xl); border:6px solid var(--surface-card);
|
||
box-shadow:var(--shadow-band); transform:rotate(1.5deg);
|
||
}
|
||
.portrait__name{font:var(--t-h2); color:var(--accent-text); letter-spacing:var(--ls-display)} /* 4.43 auf sun-200 */
|
||
|
||
/* Audio */
|
||
.song{
|
||
max-width:520px; margin-inline:auto; background:var(--surface-card);
|
||
border:1px solid var(--line-soft); border-radius:var(--radius-l);
|
||
box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4);
|
||
}
|
||
.song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
|
||
.song__top h3{color:var(--accent-text)}
|
||
/* Auf der Vereinsseite wäre das Braun — 20px ist zu klein für die Kontur-Lösung.
|
||
Ink trägt den Text, die gelbe Badge daneben trägt die Farbe. */
|
||
.page-verein .song__top h3{color:var(--ink-700)} /* nicht --accent: 20px/600 zaehlt nicht als
|
||
Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */
|
||
.badge{
|
||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||
padding:5px 11px; border-radius:var(--radius-pill);
|
||
background:var(--sun-400); color:var(--ink-700); /* 8.67 */
|
||
}
|
||
.song__row{display:flex; align-items:center; gap:var(--space-4)}
|
||
.iconbtn{
|
||
width:44px; height:44px; flex:none; border-radius:var(--radius-circle, 50%);
|
||
display:grid; place-items:center; border:1px solid var(--line);
|
||
background:var(--sun-100); color:var(--ink-300); cursor:not-allowed;
|
||
}
|
||
.iconbtn svg{width:18px; height:18px}
|
||
.song__meter{flex:1; display:grid; gap:var(--space-2)}
|
||
.song__track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
|
||
.song__time, .song__note{font:var(--t-small); color:var(--ink-500)}
|
||
|
||
/* Band */
|
||
.band{
|
||
background:var(--surface-band); border-radius:var(--radius-band);
|
||
padding:clamp(24px,4vw,44px);
|
||
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
|
||
gap:var(--space-8); align-items:center;
|
||
}
|
||
.band--cool{background:var(--surface-band-cool)}
|
||
.band__copy{display:grid; gap:var(--space-4); justify-items:start}
|
||
/* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
|
||
.band__copy p{color:var(--ink-700); max-width:46ch}
|
||
.band__copy h2{color:var(--accent-text)} /* 4.43 auf sun-200 */
|
||
.page-verein .band__copy h2{color:var(--sun-400); -webkit-text-stroke:5px var(--ink-700); paint-order:stroke fill}
|
||
.band__copy .label{color:var(--ink-700)}
|
||
.band img{width:100%; max-width:380px; justify-self:center}
|
||
|
||
/* Kontakt */
|
||
.contacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)}
|
||
.contact{
|
||
background:var(--surface-card); border:1px solid var(--line-soft);
|
||
border-left:4px solid var(--accent-line);
|
||
border-radius:var(--radius-l); box-shadow:var(--shadow-card);
|
||
padding:var(--space-6); display:grid; gap:var(--space-2);
|
||
}
|
||
.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); overflow-wrap:break-word} /* bricht am <wbr> nach dem @ */
|
||
/* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
|
||
einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
|
||
Handy zuverlaessig antippen. */
|
||
.contact a{
|
||
color:var(--accent-text); display:inline-flex; align-items:center;
|
||
min-height:44px; text-decoration:underline; text-underline-offset:3px;
|
||
}
|
||
|
||
/* Shop-Platzhalter */
|
||
.parked{min-height:100vh; display:flex; flex-direction:column}
|
||
.parked main{flex:1; display:grid; place-items:center; padding:var(--space-20) var(--page-pad-x)}
|
||
.parked__in{max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
|
||
.parked__in h1{font:var(--t-h2); color:var(--accent)}
|
||
.parked__in p{max-width:48ch}
|
||
|
||
/* ============================================================ RECHTSTEXTE */
|
||
.prose{max-width:74ch; margin-inline:auto; display:grid; gap:var(--space-5)}
|
||
.prose h1{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
|
||
.prose h2{
|
||
font:var(--t-h3); color:var(--ink-700); margin-top:var(--space-6);
|
||
padding-top:var(--space-4); border-top:2px solid var(--accent-line);
|
||
}
|
||
.prose h3{font:600 17px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); margin-top:var(--space-2)}
|
||
.prose p, .prose li{color:var(--ink-500)}
|
||
.prose ul{margin:0; padding-left:1.2em; display:grid; gap:var(--space-2)}
|
||
.prose dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-5)}
|
||
.prose dt{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); padding-top:4px}
|
||
.prose dd{margin:0; color:var(--ink-700)}
|
||
/* Telefon und E-Mail in der Angabenliste stehen allein, nicht im Satz — sie brauchen
|
||
ein echtes Ziel. Links mitten im Fliesstext bleiben unveraendert: fuer die gilt die
|
||
Inline-Ausnahme von WCAG 2.5.8. */
|
||
.prose dd a{display:inline-flex; align-items:center; min-height:44px}
|
||
.prose__intro{
|
||
background:var(--accent-soft); border-radius:var(--radius-l);
|
||
padding:var(--space-5); color:var(--ink-700);
|
||
}
|
||
/* Offene Stellen, die der Betreiber noch fuellen muss — im Quelltext und auf der
|
||
Seite unuebersehbar, damit nichts davon versehentlich live geht. */
|
||
.todo{
|
||
display:inline-block; background:var(--coral-50); color:var(--ink-700);
|
||
border:2px dashed var(--coral-400); border-radius:var(--radius-xs);
|
||
padding:1px 8px; font-weight:700;
|
||
}
|
||
.prose__warn{
|
||
background:var(--coral-50); border:2px dashed var(--coral-400);
|
||
border-radius:var(--radius-l); padding:var(--space-5); color:var(--ink-700);
|
||
}
|
||
.prose__warn strong{color:var(--ink-700)}
|
||
|
||
/* ============================================================ FOOTER */
|
||
.ftr{
|
||
background:var(--surface-footer); padding-block:var(--space-16) var(--space-8);
|
||
margin-top:var(--space-16); border-top:6px solid var(--accent-line);
|
||
}
|
||
.parked .ftr{margin-top:0}
|
||
.ftr__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--space-8)}
|
||
.ftr__col h3{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); margin-bottom:var(--space-3)}
|
||
.ftr__col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
|
||
/* Guardrail + Kontrast: auf Creme kein ink-300 (2.80). Ink-700 = 13.20. */
|
||
/* Waren 21px hoch und verfehlten damit sogar die AA-Untergrenze von 24px
|
||
(WCAG 2.5.8). Auf dem Handy weiter oben auf 44px gesetzt. */
|
||
.ftr__col a, .ftr__col span{
|
||
display:flex; align-items:center; min-height:30px;
|
||
font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none;
|
||
}
|
||
.ftr__col a:hover{color:var(--sky-600); text-decoration:underline}
|
||
.ftr__legal{
|
||
margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12);
|
||
font:var(--t-small); color:var(--ink-700); max-width:80ch;
|
||
}
|
||
|
||
@media (prefers-reduced-motion:reduce){
|
||
*{animation:none !important; transition:none !important}
|
||
html{scroll-behavior:auto}
|
||
.hl span, .pill-eyebrow, .hero__mark{transform:none}
|
||
}
|
||
|
||
/* ============================================================ MOBILE TYPOGRAFIE
|
||
Muss hinter allen Basisregeln stehen: .badge und .ftr__col h3 setzen ihre Groesse
|
||
ueber die font-Kurzform, und bei gleicher Spezifitaet gewinnt die spaetere Regel.
|
||
11px Versalschrift ist auf Handygroesse zu knapp — 12px ist die Untergrenze. */
|
||
@media (max-width:639.98px){
|
||
.label, .ftr__col h3, .badge{font-size:12px}
|
||
}
|
||
|
||
/* ============================================================ HANDY-RHYTHMUS
|
||
Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
|
||
Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und
|
||
Logo — die Headline begann bei ~560px. Referenz bleibt das Handoff-DS; geändert
|
||
werden nur Verhältnisse, nicht die Bausteine. */
|
||
@media (max-width:639.98px){
|
||
/* Headline zuerst, Foto danach als gekipptes, gerahmtes Bild — dieselbe Behandlung
|
||
wie .story__img und das Porträt. */
|
||
.hero{display:flex; flex-direction:column}
|
||
.hero__in{order:1; padding-block:var(--space-6) var(--space-5)}
|
||
.hero__media{
|
||
order:2; height:190px; margin:0 var(--page-pad-x) var(--space-8);
|
||
border-radius:var(--radius-xl); box-shadow:var(--shadow-band); transform:rotate(-1.5deg);
|
||
}
|
||
.hero__col{gap:var(--space-4)}
|
||
.hero__logo{max-width:112px}
|
||
/* So groß, wie "weitergegeben!" in die Spalte passt (Breite ≈ 7.2 × Schriftgröße):
|
||
46px bei 375, 39px bei 320. Kontur dünner, sonst laufen die Punzen zu. */
|
||
.hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))}
|
||
/* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */
|
||
.hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))}
|
||
.hero .hl span{-webkit-text-stroke-width:.075em}
|
||
|
||
.section{padding-block:var(--space-10)}
|
||
.section--tight{padding-block:var(--space-8)}
|
||
.field{padding-block:var(--space-10)}
|
||
.sh{margin-bottom:var(--space-4)}
|
||
.story{gap:var(--space-5)}
|
||
.story__img{aspect-ratio:3/2}
|
||
.portrait{max-width:260px; gap:var(--space-3)}
|
||
.tiles{gap:var(--space-3)}
|
||
.tile{padding:var(--space-5)}
|
||
.band{gap:var(--space-5)}
|
||
.band img{max-width:220px}
|
||
.ftr{margin-top:var(--space-10); padding-block:var(--space-10) var(--space-6)}
|
||
}
|
||
|
||
/* ============================================================ FOKUS
|
||
Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song
|
||
setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel.
|
||
Stand vorher im Base-Block und wurde von .btn--primary still ueberschrieben:
|
||
Tastaturnutzer sahen auf Buttons gar keinen Fokus. */
|
||
:focus-visible{
|
||
outline:none;
|
||
box-shadow:var(--ring-focus);
|
||
border-radius:var(--radius-xs);
|
||
}
|
||
/* Elemente mit eigener Schattierung: Ring davor, eigener Schatten dahinter. */
|
||
.btn:focus-visible{border-radius:var(--radius-pill); box-shadow:var(--ring-focus), var(--shadow-button)}
|
||
.nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)}
|
||
.iconbtn:focus-visible{border-radius:50%}
|
||
.contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)}
|