Andrej StevanovskiandClaude Opus 5.5
6bd5c12d3e
- .trust span traf auch den Icon-Chip (selbst ein span): Icon rutschte aus dem Kreis und war dunkel. Selektor auf die Unterzeile eingegrenzt. - Gelbe Display-Schrift jetzt helles Markengelb mit dunkler Kontur wie im Logo statt sun-600/700 (las als Braun). Kleine gelbe Texte und Links auf Ink umgestellt, Icon-Chips im Verein hellgelb mit Ink-Icon. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
583 lines
30 KiB
CSS
583 lines
30 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.
|
|
Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt.
|
|
Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei
|
|
320/360px scrollte die Nav seitlich weg, ohne dass man es sieht.
|
|
Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px
|
|
(WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst
|
|
dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine
|
|
mitlaufende Navigation kein Verlust. */
|
|
@media (max-width:639.98px){
|
|
.hdr{position:static; height:auto}
|
|
html{scroll-padding-top:16px}
|
|
.hdr__in{
|
|
flex-direction:column; align-items:stretch; justify-content:flex-start;
|
|
height:auto; gap:6px; padding-block:10px;
|
|
}
|
|
.hdr__brand{
|
|
justify-content:center; min-height:44px; gap:10px;
|
|
font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif;
|
|
}
|
|
.hdr__brand img{width:30px; height:30px}
|
|
.nav{
|
|
display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
|
|
flex-wrap:nowrap; overflow:visible;
|
|
}
|
|
.nav a{
|
|
min-height:44px; display:flex; align-items:center; justify-content:center;
|
|
padding:6px 4px; font-size:13px; line-height:1.15; text-align:center;
|
|
white-space:normal; hyphens:auto;
|
|
}
|
|
/* 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-600)}
|
|
/* 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);
|
|
-webkit-text-stroke:6px var(--ink-700); paint-order:stroke fill;
|
|
}
|
|
.hero .hl .c-coral{color:var(--coral-600)}
|
|
.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}
|
|
}
|
|
|
|
/* ============================================================ 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)}
|