Neubau Fundament + Startseite: Designsystem, PHP-Komponenten, Brevo-Formular, Instagram-Sync
- Ordnerstruktur mit public/-Docroot, Deny-.htaccess für app/bin/config/data/storage - CLAUDE.md mit Leitplanken (self-hosted only, Single Source of Truth, Component-first) - Design-Tokens aus alter Seite extrahiert (Akzent #e20612, Coolvetica/Abel als woff2) - Front Controller mit Routen-Register, Sitemap, Canonical, JSON-LD (SportsClub) - Startseite: Hero, Instagram-Feed (lokaler Cache), Historie/Sportheim, Stats, Partner, Kontakt - Kontaktformular via PHPMailer/Brevo mit Honeypot + HMAC-Time-Trap (kein reCAPTCHA) - bin/instagram-sync.php: Scraper mit Strategie-Kette, flock, atomarem Cache, lokalen Bildern Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
106
public/assets/css/base.css
Normal file
106
public/assets/css/base.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/* ============================================================
|
||||
BASE — Fonts, Typografie, Links, Fokus, Skip-Link
|
||||
============================================================ */
|
||||
@font-face {
|
||||
font-family: 'Coolvetica';
|
||||
src: url('../fonts/coolvetica.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Abel';
|
||||
src: url('../fonts/abel.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--ff-body);
|
||||
font-size: var(--fs-600);
|
||||
font-weight: var(--fw-regular);
|
||||
line-height: var(--lh-body);
|
||||
color: var(--clr-text);
|
||||
background-color: var(--clr-bg);
|
||||
background-image: url('../img/background.jpg');
|
||||
background-size: 100% auto;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
/* fixed-Attachment ruckelt auf Mobile */
|
||||
background-attachment: scroll;
|
||||
background-size: auto;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--ff-heading);
|
||||
font-weight: var(--fw-regular);
|
||||
line-height: var(--lh-heading);
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 { font-size: var(--fs-900); }
|
||||
h2 { font-size: var(--fs-800); }
|
||||
h3 { font-size: var(--fs-700); }
|
||||
h4 { font-size: 1.625rem; }
|
||||
h5,
|
||||
h6 { font-size: var(--fs-600); }
|
||||
|
||||
p {
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--clr-text);
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--clr-accent);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 1rem;
|
||||
z-index: 100;
|
||||
padding: 0.75em 1.25em;
|
||||
background: var(--clr-accent);
|
||||
color: var(--clr-text);
|
||||
text-decoration: none;
|
||||
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
|
||||
}
|
||||
|
||||
.skip-link:focus-visible {
|
||||
top: 0;
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
/* Scrollbar dezent dunkel */
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--clr-bg-corporate) transparent;
|
||||
}
|
||||
341
public/assets/css/components.css
Normal file
341
public/assets/css/components.css
Normal file
@@ -0,0 +1,341 @@
|
||||
/* ============================================================
|
||||
COMPONENTS — eine Sektion pro Komponente, Banner-Kommentare
|
||||
============================================================ */
|
||||
|
||||
/* === hero === */
|
||||
.hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
min-height: min(92vh, 900px);
|
||||
padding-block: calc(var(--header-h) + 80px) var(--space-section);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Dunkler Verlauf wie auf der alten Seite: oben transparent → unten Seitenhintergrund */
|
||||
.hero__media::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgb(20 20 20 / 0.25) 0%, rgb(20 20 20 / 0.55) 55%, var(--clr-bg) 100%);
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
text-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.hero__text {
|
||||
margin-top: 1rem;
|
||||
max-width: 60ch;
|
||||
text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
/* === instagram === */
|
||||
.instagram__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.instagram__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.instagram__link {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.instagram__link img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.instagram__link:hover img,
|
||||
.instagram__link:focus-visible img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.instagram__badge {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
border-radius: 50%;
|
||||
font-size: 0.8rem;
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.instagram__fallback {
|
||||
margin-top: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instagram__fallback p {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.instagram__fallback .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* === split (Bild/Text-Sektion) === */
|
||||
.split__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.split--flip .split__text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.split--flip .split__media {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.split__text p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.split__cta {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.split__img {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.split__inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.split--flip .split__text {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.split--flip .split__media {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* === stats === */
|
||||
.stats {
|
||||
background: var(--clr-bg-deep);
|
||||
}
|
||||
|
||||
.stats__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.stats__list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.stats__item {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stats__value {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-800);
|
||||
line-height: var(--lh-heading);
|
||||
color: var(--clr-accent);
|
||||
text-shadow: 0 0 30px rgb(var(--clr-accent-rgb) / 0.35);
|
||||
}
|
||||
|
||||
.stats__label {
|
||||
font-size: var(--fs-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* === partners === */
|
||||
.partners__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-block: 2.5rem;
|
||||
}
|
||||
|
||||
.partners__item {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
/* Dunkles Glas — die Partner-Logos sind weiße Varianten */
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.partners__item img {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* === contact form === */
|
||||
.contact__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.contact__inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__intro p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
padding: 2rem;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.form__row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.form__row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form__field {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.form__field label {
|
||||
font-size: var(--fs-500);
|
||||
}
|
||||
|
||||
.form__field input,
|
||||
.form__field select,
|
||||
.form__field textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.form__field select option {
|
||||
background: var(--clr-bg);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.form__field textarea {
|
||||
resize: vertical;
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.form__field--checkbox {
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.form__field--checkbox input {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-top: 0.2rem;
|
||||
accent-color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.form__field--checkbox label {
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.form__status:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form__success {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--clr-success);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--clr-success);
|
||||
}
|
||||
|
||||
.form__error {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--clr-error);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--clr-error);
|
||||
}
|
||||
|
||||
.form__submit {
|
||||
margin: 0;
|
||||
}
|
||||
218
public/assets/css/layout.css
Normal file
218
public/assets/css/layout.css
Normal file
@@ -0,0 +1,218 @@
|
||||
/* ============================================================
|
||||
LAYOUT — Container, Header, Navigation, Footer, Sektionen
|
||||
============================================================ */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-pad);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: var(--space-section);
|
||||
}
|
||||
|
||||
.section--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section--center p {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* --- Header --- */
|
||||
.site-header {
|
||||
position: absolute;
|
||||
inset: 20px 0 auto 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
min-height: var(--header-h);
|
||||
}
|
||||
|
||||
.site-header__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.site-header__logo {
|
||||
height: var(--logo-h);
|
||||
width: auto;
|
||||
filter: drop-shadow(var(--shadow));
|
||||
}
|
||||
|
||||
.site-header__name {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* --- Navigation --- */
|
||||
.site-nav__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
font-size: var(--fs-500);
|
||||
}
|
||||
|
||||
.site-nav__list a:not(.btn) {
|
||||
color: var(--clr-text);
|
||||
text-decoration: none;
|
||||
padding-block: 0.25em;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
.site-nav__list a:not(.btn):hover,
|
||||
.site-nav__list a:not(.btn)[aria-current="page"] {
|
||||
border-bottom-color: var(--clr-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 1249px) {
|
||||
.site-nav__toggle {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Burger: Mittelbalken + Pseudo-Balken, animiert zum X */
|
||||
.site-nav__toggle-bar,
|
||||
.site-nav__toggle-bar::before,
|
||||
.site-nav__toggle-bar::after {
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 3px;
|
||||
background: var(--clr-text);
|
||||
border-radius: 2px;
|
||||
transition: transform var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
.site-nav__toggle-bar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-nav__toggle-bar::before,
|
||||
.site-nav__toggle-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.site-nav__toggle-bar::before { top: -9px; }
|
||||
.site-nav__toggle-bar::after { top: 9px; }
|
||||
|
||||
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::before {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::after {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1.75rem;
|
||||
background: rgb(0 0 0 / 0.91);
|
||||
font-size: var(--fs-700);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition), visibility var(--transition);
|
||||
}
|
||||
|
||||
.site-nav__list a:not(.btn) {
|
||||
font-family: var(--ff-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
body.nav-open .site-nav__list {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.nav-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Toggle über dem Overlay halten */
|
||||
.site-nav__toggle {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.site-footer {
|
||||
margin-top: var(--space-section);
|
||||
padding: 70px 0 25px;
|
||||
background: var(--clr-bg-footer);
|
||||
font-size: var(--fs-400);
|
||||
}
|
||||
|
||||
.site-footer__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.site-footer__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer__heading {
|
||||
font-size: var(--fs-600);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.site-footer__address {
|
||||
font-style: normal;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.site-footer__list {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.site-footer__list a,
|
||||
.site-footer__address a {
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.site-footer__list a:hover,
|
||||
.site-footer__address a:hover {
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.site-footer__copyright {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--clr-glass-border);
|
||||
color: var(--clr-text-faint);
|
||||
}
|
||||
66
public/assets/css/reset.css
Normal file
66
public/assets/css/reset.css
Normal file
@@ -0,0 +1,66 @@
|
||||
/* ============================================================
|
||||
RESET — moderner Minimal-Reset + reduced-motion Kill-Switch
|
||||
============================================================ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul[class],
|
||||
ol[class] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Sektion-Anker landen nicht unter dem Header */
|
||||
[id] {
|
||||
scroll-margin-top: calc(var(--header-h) + 60px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
58
public/assets/css/tokens.css
Normal file
58
public/assets/css/tokens.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* ============================================================
|
||||
DESIGN-TOKENS — EINZIGE Quelle für Farben, Typo, Spacing etc.
|
||||
Werte extrahiert und verifiziert aus der alten Seite
|
||||
(CSS bc-style + DB main_layout). Siehe CLAUDE.md.
|
||||
============================================================ */
|
||||
:root {
|
||||
/* --- Farben --- */
|
||||
--clr-accent: #e20612; /* Marken-Rot (alte DB: primary_accent) */
|
||||
--clr-accent-dark: #b00510; /* Hover/Active auf Rot */
|
||||
--clr-accent-rgb: 226 6 18; /* für rgb(var(--clr-accent-rgb) / α) */
|
||||
--clr-bg: #222222; /* Grund-Hintergrund (mit Textur) */
|
||||
--clr-bg-deep: #161616; /* abgesetzte Sektionen */
|
||||
--clr-bg-footer: #000000;
|
||||
--clr-bg-corporate: #383838;
|
||||
--clr-bg-light: #f5f5f5;
|
||||
--clr-text: #ffffff;
|
||||
--clr-text-muted: #b3b3b3; /* 7.7:1 auf --clr-bg */
|
||||
--clr-text-faint: #8c8c8c; /* 4.5:1 auf --clr-bg (AA) */
|
||||
--clr-glass-bg: rgb(255 255 255 / 0.11);
|
||||
--clr-glass-border: rgb(255 255 255 / 0.22);
|
||||
--clr-error: #ff8a8a; /* Formularfehler, lesbar auf dunkel */
|
||||
--clr-success: #8ce99a;
|
||||
|
||||
/* --- Typografie --- */
|
||||
--ff-heading: 'Coolvetica', 'Arial Narrow', system-ui, sans-serif;
|
||||
--ff-body: 'Abel', 'Helvetica Neue', system-ui, sans-serif;
|
||||
--fs-300: 0.8125rem; /* 13px Buttons klein */
|
||||
--fs-400: 0.9375rem; /* 15px Footer, Meta */
|
||||
--fs-500: 1.125rem; /* 18px Navigation */
|
||||
--fs-600: 1.3125rem; /* 21px Body */
|
||||
--fs-700: clamp(2rem, 1.2rem + 3.5vw, 3.125rem); /* 50px h3 */
|
||||
--fs-800: clamp(2.25rem, 1.3rem + 4.5vw, 3.75rem); /* 60px h2 */
|
||||
--fs-900: clamp(2.625rem, 1.4rem + 5.5vw, 4.375rem); /* 70px h1 */
|
||||
--lh-heading: 0.9;
|
||||
--lh-body: 1.5;
|
||||
--fw-regular: 400;
|
||||
--fw-bold: 700;
|
||||
|
||||
/* --- Form & Tiefe --- */
|
||||
--radius-btn: 8px;
|
||||
--radius-card: 15px;
|
||||
--shadow: 0 0 14px rgb(0 0 0 / 0.15);
|
||||
--shadow-card: 0 7px 29px rgb(0 0 0 / 0.33);
|
||||
|
||||
/* --- Layout --- */
|
||||
--container-max: 1200px;
|
||||
--container-pad: 1rem;
|
||||
--space-section: 5rem;
|
||||
--header-h: 60px;
|
||||
--logo-h: 97px;
|
||||
|
||||
/* --- Bewegung --- */
|
||||
--transition: 300ms ease;
|
||||
}
|
||||
|
||||
/* Breakpoints (Referenz — Custom Properties funktionieren nicht in Media Queries,
|
||||
Werte müssen in den CSS-Dateien synchron gehalten werden):
|
||||
1249px Burger-Menü | 1024px | 992px | 768px | 600px | 500px */
|
||||
52
public/assets/css/utilities.css
Normal file
52
public/assets/css/utilities.css
Normal file
@@ -0,0 +1,52 @@
|
||||
/* ============================================================
|
||||
UTILITIES — Buttons, visually-hidden, kleine Helfer
|
||||
============================================================ */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 18px;
|
||||
background: var(--clr-accent);
|
||||
color: var(--clr-text);
|
||||
font-size: var(--fs-500);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: 1px solid var(--clr-accent);
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--clr-accent-dark);
|
||||
border-color: var(--clr-accent-dark);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
background: transparent;
|
||||
border-color: var(--clr-text);
|
||||
}
|
||||
|
||||
.btn--outline:hover {
|
||||
background: var(--clr-glass-bg);
|
||||
border-color: var(--clr-text);
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
Reference in New Issue
Block a user