Emma's Schatzkiste — statische Website, fünf Seiten
Umsetzung des Design-Handoffs als statisches HTML ohne Build-Schritt, nach dem Hausmuster der übrigen ASX-Websites. Seiten - index.html Startseite (blaue Welt) - hilfe-verein.html Hilfe Verein (gelbe Welt) - shop.html Platzhalter, Online-Shop bewusst nicht gebaut - impressum.html § 5 DDG - datenschutz.html Art. 13 DSGVO Design - Farbe lebt in Flächen und Display-Typo, nie im Fließtext — dadurch laufen alle drei Markenfarben, ohne die Hierarchie zu brechen. - Ein gesättigtes Vollflächen-Band pro Seite gegen die Blässe der reinen Pastellfassung. - Alle fünf Seiten bestehen WCAG AA im Kontrast. Mobil - Header unter 640px zweizeilig, Navigation als Viererraster, alle Touch-Ziele >= 44px (WCAG 2.5.5), Footer-Links >= 24px (2.5.8). - Geprüft bei 320/375/390/640/768/1024/1440/1920 px. Datenschutz - Keine Cookies, kein Storage, keine Skripte, null Fremdanfragen. Deshalb bewusst kein Einwilligungsbanner. - Fredoka und Nunito selbst gehostet statt über Google Fonts (LG München I, 3 O 17493/20). Bilder - Drei Pexels-Fotos, Lizenz geprüft, heruntergeladen und selbst gehostet. - Bewusst keine Kinderfotos: Pexels gibt kein Model Release. Offen: drei Angaben in den Rechtstexten, Foto Opa Martin, zwei Audiodateien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5 committed
commit
92a6faaf54
31 files changed
+5880
No files matched your search
@@ -0,0 +1,52 @@
|
||||
/* Selbst gehostete Schriften — Fredoka und Nunito, beide SIL Open Font License 1.1.
|
||||
|
||||
Lokal statt ueber fonts.googleapis.com / fonts.gstatic.com: das Einbinden ueber Googles
|
||||
CDN uebertraegt die IP-Adresse jedes Besuchers in die USA, ohne dass der Besucher
|
||||
zustimmen konnte. Das LG Muenchen I hat das am 20.01.2022 (3 O 17493/20) als
|
||||
Verletzung des Persoenlichkeitsrechts gewertet. Selbst gehostet entfaellt der
|
||||
Drittkontakt vollstaendig — und damit auch der Grund fuer ein Einwilligungsbanner.
|
||||
|
||||
Beides sind VARIABLE FONTS: alle Schnitte einer Familie stecken in einer Datei,
|
||||
deshalb je eine Deklaration mit Gewichtsbereich statt sechs Einzelgewichten.
|
||||
Nur die Subsets latin und latin-ext — deckt Deutsch vollstaendig ab.
|
||||
Geholt am 2026-09-21 ueber die Google Fonts API v2. Lizenz: fonts/OFL.txt */
|
||||
|
||||
/* Fredoka — Display, 500-700 */
|
||||
@font-face {
|
||||
font-family: 'Fredoka';
|
||||
font-style: normal;
|
||||
font-weight: 500 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/fredoka-500-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fredoka';
|
||||
font-style: normal;
|
||||
font-weight: 500 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/fredoka-500-latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* Nunito — Body, 400-700 */
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/nunito-400-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/nunito-400-latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2014 The Nunito Project Authors (https://github.com/googlefonts/nunito)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
+537
@@ -0,0 +1,537 @@
|
||||
/*
|
||||
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.
|
||||
|
||||
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 */
|
||||
|
||||
/* 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:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;
|
||||
|
||||
/* Pro Seite überschrieben — genau ein Identitätsakzent */
|
||||
--accent:var(--sky-500);
|
||||
--accent-text:var(--sky-600);
|
||||
--accent-soft:var(--sky-50);
|
||||
--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-100);
|
||||
--accent-line:var(--sun-400);
|
||||
}
|
||||
|
||||
/* ============================================================ 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}
|
||||
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-50)}
|
||||
.field--warm{background:var(--sun-100)}
|
||||
.field--rose{background:var(--coral-50)}
|
||||
.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:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
|
||||
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)}
|
||||
|
||||
.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(--accent-soft); color:var(--accent-text);
|
||||
}
|
||||
.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)}
|
||||
.trust 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){
|
||||
.hero{min-height:clamp(540px,64vw,680px); display:grid}
|
||||
.hero__in{align-self:center}
|
||||
.hero--shop .hero__scrim{
|
||||
background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
|
||||
}
|
||||
.hero--verein .hero__scrim{
|
||||
background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
|
||||
}
|
||||
}
|
||||
@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(--surface-page)}
|
||||
.hero--verein{background:var(--sun-100)}
|
||||
}
|
||||
.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(--accent-soft); color:var(--accent-text);
|
||||
transform:rotate(-3deg);
|
||||
}
|
||||
.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
|
||||
.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);
|
||||
}
|
||||
.tile--cool{background:var(--sky-50); border-color:#D6E8F7; border-top-color:var(--sky-400)}
|
||||
.tile--warm{background:var(--sun-100); border-color:#F2E5C4; border-top-color:var(--sun-400)}
|
||||
.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
|
||||
/* 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}
|
||||
.portrait__slot{
|
||||
width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
|
||||
background:var(--surface-card); border:2px dashed var(--sun-400);
|
||||
display:grid; place-items:center; padding:var(--space-6);
|
||||
}
|
||||
.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
|
||||
.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
|
||||
.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
|
||||
|
||||
/* 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)} /* 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)}
|
||||
.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); word-break:break-word}
|
||||
/* 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)}
|
||||
Reference in new issue
Block a user