/* ========================================================================== Gemeinsames Seiten-Designsystem -------------------------------------------------------------------------- Eine Komponentenbibliothek für die Inhaltsseiten Projekt (/about), Kostenlos bestellen (/order), Partner (/partners) und Spenden (/donate). Ziel: identischer Aufbau auf allen Seiten – gleicher Titel-Hero, gleiche Inhaltsbreite, gleiche Abstände, gleiches Zwei-Spalten-Raster, gleiche weiße Karten (dezente Kontur statt schwerem Schatten) und ein einheitlicher Formularsatz (Inputs, Labels, Checkboxen, Radios, Badges, Hinweise, CTAs). Marken-Akzent bleibt durchgehend --gold (Kupfer). ========================================================================== */ body.page-about, body.page-order, body.page-donate, body.page-partners, body.page-register, body.page-anmelden, body.page-passwort-vergessen, body.page-passwort-neu, body.page-profil { /* Farben (fest – themenunabhängig, da die Seiten bewusst hell sind) */ --p-ink: var(--text-strong); /* kühl-neutrale Schrift statt Braun */ --p-ink-soft: var(--text-default); --p-ink-muted: var(--text-muted); --p-paper: #ffffff; /* reine weiße Kartenfläche */ --p-surface: color-mix(in srgb, var(--secondary) 5%, #fff); /* kühle, helle Füllung */ --p-line: color-mix(in srgb, var(--secondary) 13%, transparent); --p-line-strong:color-mix(in srgb, var(--secondary) 26%, transparent); --p-field: color-mix(in srgb, var(--secondary) 5%, #fff); /* kühle Felder */ --p-danger: #c0492f; /* Maße – überall gleich */ --p-max: var(--maxw); /* an die globale Navbar-/Containerbreite gekoppelt */ --p-gutter: clamp(1.15rem, 4vw, 2rem); --p-section: clamp(2.75rem, 5.5vw, 4.5rem); /* Abstand Hero→Inhalt & zwischen Abschnitten */ --p-gap: clamp(1.5rem, 3vw, 2.75rem); /* Rasterabstand */ --p-radius: 18px; /* Karten */ --p-radius-sm: 11px; /* Inputs, kleine Elemente */ --p-pad: clamp(1.5rem, 3vw, 2.25rem); /* Kartenpolsterung */ --phero-pull: 95px; /* Höhe der schwebenden Nav (Desktop) – der Hero wird darunter hochgezogen, damit der Verlauf hinter der Nav beginnt */ /* Solider Creme-Hintergrund (kein Gold-Verlauf). Nur die Startseite behält ihren Hero-Verlauf. .phero & .pbody bleiben transparent und fließen über diesen einheitlichen Grund. */ background: transparent; /* Seitengrund liegt auf (Canvas) */ color: var(--p-ink); } /* #main trägt global eine deckende Creme-Fläche (style.css). Auf den Hero- Seiten transparent schalten, damit der Body-Verlauf oben sichtbar bleibt – die Creme-Grundfarbe des Body trägt den restlichen Inhalt. */ body.page-about #main, body.page-order #main, body.page-donate #main, body.page-partners #main, body.page-register #main, body.page-anmelden #main, body.page-passwort-vergessen #main, body.page-passwort-neu #main, body.page-profil #main { background: transparent; } /* ============================ Titel-Hero ============================ */ /* Senkrechter Verlauf: oben exakt der Body-Ton (#bc845c) hinter der Nav-Pille, unten exakt der Inhalts-Ton (--bg-page). Der Kupferton hält durch die Textzone und blendet erst darunter nahtlos in den Creme-Inhalt über – keine sichtbare Kante zwischen Hero und .pbody. */ .phero { text-align: center; color: var(--p-ink); background: transparent; /* Verlauf liegt auf dem Body (einheitlicher Hero) */ } .phero__inner { max-width: 48rem; margin-inline: auto; padding: var(--hero-pad-top) var(--p-gutter) var(--hero-pad-bottom); display: grid; gap: var(--hero-gap); justify-items: center; } .phero__kicker { margin: 0; color: rgba(255, 255, 255, .82); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .phero__title { margin: 0; /* Einheitliche Hero-H1 (Token-basiert) – identisch auf allen Hauptseiten. */ font-family: var(--font-display-medium); font-size: var(--hero-h1-size); line-height: var(--hero-h1-lh); letter-spacing: normal; color: var(--p-ink); } .phero__subtitle { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .88); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; } /* ============================ Inhaltsbereich ============================ */ .pbody { background: transparent; /* Body trägt Verlauf + Creme-Grund (einheitlicher Hero) */ padding-block: var(--p-section); } .pcontainer { /* Exakt dieselbe Breite/Ausrichtung wie der globale .container (Gutter als Rand statt Innenpolsterung) – damit Karten überall gleich breit sind. */ width: min(calc(100% - (var(--gutter) * 2)), var(--maxw)); max-width: none; margin-inline: auto; padding-inline: 0; } /* Vertikaler Rhythmus zwischen Abschnitten – überall gleich. */ .pstack > * + * { margin-top: var(--p-section); } /* Einheitliches Zwei-Spalten-Raster (Info links · Karte/Formular rechts). */ .pgrid { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--p-gap); align-items: start; } /* ============================ Typo-Skala ============================ */ .pheading { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; color: var(--p-ink); } .psubheading { margin: 0; font-family: var(--font-display-medium); font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.2; color: var(--p-ink); } .peyebrow { margin: 0; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .ptext { margin: 0; color: var(--p-ink-soft); font-size: 1rem; line-height: 1.6; } .ptext + .ptext { margin-top: .9rem; } .pmuted { color: var(--p-ink-muted); font-size: .9rem; line-height: 1.5; } .paccent { color: var(--gold); } /* ============================ Karten ============================ */ .pcard { background: var(--p-paper); /* reines Weiß – hebt sich allein durch den Tonwert vom kühlen Grund ab (randlos) */ border-radius: var(--p-radius); padding: var(--p-pad); } .pcard--soft { background: var(--p-paper); } /* ebenfalls weiß – Trennung über Abstand */ .pcard--tint { background: color-mix(in srgb, var(--gold) 6%, var(--surface-mix)); } /* dezente Akzent-Tönung */ /* Icon-Kreis (Badges, Listen, Sektionsköpfe) */ .pic { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); } .pic svg { width: 1.3rem; height: 1.3rem; } .pic--lg { width: 3.2rem; height: 3.2rem; } .pic--lg svg { width: 1.55rem; height: 1.55rem; } .pic--fill { background: var(--gold); color: #fff; } /* Badge / kleiner Pillen-Hinweis */ .pbadge { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .pbadge svg { width: .9rem; height: .9rem; } /* Kleiner Infokasten / Hinweiszeile */ .pnote { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.15rem; border: 0; border-radius: var(--p-radius); background: var(--surface-card); color: var(--p-ink-soft); font-size: .94rem; line-height: 1.45; } .pnote--accent { background: color-mix(in srgb, var(--gold) 8%, var(--surface-mix)); } .pnote__ic { flex: none; display: inline-flex; color: var(--gold); } .pnote__ic svg { width: 1.3rem; height: 1.3rem; } /* Liste mit Häkchen */ .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .plist li { display: flex; align-items: flex-start; gap: .65rem; color: var(--p-ink); font-size: 1rem; line-height: 1.45; } .plist__check { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .05rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; } .plist__check svg { width: .8rem; height: .8rem; } /* ============================ Formular-Komponenten ============================ */ .pform { display: grid; gap: 1.1rem; } .prow { display: grid; gap: 1rem; } .prow--2 { grid-template-columns: 1fr 1fr; } .prow--3 { grid-template-columns: 1fr 1fr 1.15fr; } .pfield { display: grid; gap: .4rem; min-width: 0; } .pfield > label, .plabel { color: var(--p-ink-soft); font-size: .85rem; font-weight: 500; } .pfield input, .pfield textarea, .pfield select { width: 100%; height: 3rem; padding: 0 .9rem; border: 0; border-radius: var(--p-radius-sm); background: var(--p-field); color: var(--p-ink); font-family: var(--font-body); font-size: .95rem; transition: background .18s var(--ease-out-soft), box-shadow .18s var(--ease-out-soft); } .pfield textarea { height: auto; min-height: 5rem; padding: .7rem .9rem; line-height: 1.5; resize: vertical; } .pfield select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; } .pfield input::placeholder, .pfield textarea::placeholder { color: var(--p-ink-muted); } .pfield input:focus, .pfield textarea:focus, .pfield select:focus { outline: none; background: var(--surface-sunken); box-shadow: 0 0 0 2px var(--gold); } /* Feld mit Icon rechts */ .pcontrol { position: relative; } .pcontrol input, .pcontrol select { padding-right: 2.5rem; } .pcontrol__ic { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); display: grid; color: var(--p-ink-muted); pointer-events: none; } .pcontrol__ic svg { width: 1.1rem; height: 1.1rem; } /* Fehlerzustände (globale field--error / field__error Klassen mitgenutzt) */ .pfield.field--error input, .pfield.field--error textarea, .pfield.field--error select { background: color-mix(in srgb, var(--p-danger) 9%, var(--surface-mix)); } .field__error { display: block; color: var(--p-danger); font-size: .82rem; } /* Checkbox */ .pcheck { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; cursor: pointer; } .pcheck input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pcheck__box { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--p-surface); color: #fff; transition: background .15s; } .pcheck__box svg { width: .85rem; height: .85rem; opacity: 0; transition: opacity .15s; } .pcheck input:checked + .pcheck__box { background: var(--gold); } .pcheck input:checked + .pcheck__box svg { opacity: 1; } .pcheck input:focus-visible + .pcheck__box { box-shadow: 0 0 0 2px var(--gold); } .pcheck__text { color: var(--p-ink-soft); font-size: .88rem; line-height: 1.45; } .pcheck__text a { color: var(--gold); } /* Auswahlkarte (Presets / Pakete) – Radio versteckt, Karte als Zustand */ .popt { display: block; cursor: pointer; } .popt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .popt__card { position: relative; border: 0; border-radius: var(--p-radius-sm); background: var(--p-surface); transition: background .18s var(--ease-out-soft), box-shadow .18s var(--ease-out-soft); } .popt:hover .popt__card { background: color-mix(in srgb, var(--secondary) 8%, var(--p-surface)); } .popt input:checked + .popt__card { background: color-mix(in srgb, var(--gold) 15%, var(--surface-mix)); } .popt input:focus-visible + .popt__card { box-shadow: 0 0 0 2px var(--gold); } /* Durchgehender CTA in Formularen/Karten */ .pcta { width: 100%; min-height: 54px; gap: .5rem; font-size: 1.02rem; } .pcta svg { width: 1.1rem; height: 1.1rem; } /* ============================ Responsiv ============================ */ /* Unter 1120px wird die Nav-Pille kompakter (siehe style.css) – Pull anpassen, damit der Titel weiterhin frei unter der Nav steht. */ @media (max-width: 1120px) { body.page-about, body.page-order, body.page-donate, body.page-partners, body.page-register, body.page-anmelden, body.page-passwort-vergessen, body.page-passwort-neu, body.page-profil { --phero-pull: 80px; } } @media (max-width: 880px) { .pgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .prow--2, .prow--3 { grid-template-columns: minmax(0, 1fr); } } /* ============================ Dark-Mode ============================ */ /* Die Seiten-Tokens (--p-*) sind hell definiert. Hier nur die Farb-/Flächen- Token auf ihre dunklen Äquivalente umsetzen; Maße (Radius/Abstand) bleiben unverändert. Die konsumierenden Seiten (about/order/donate/partners) passen sich dadurch automatisch an. */ html[data-theme="dark"] body.page-about, html[data-theme="dark"] body.page-order, html[data-theme="dark"] body.page-donate, html[data-theme="dark"] body.page-partners, html[data-theme="dark"] body.page-register, html[data-theme="dark"] body.page-anmelden, html[data-theme="dark"] body.page-passwort-vergessen, html[data-theme="dark"] body.page-passwort-neu, html[data-theme="dark"] body.page-profil { --p-paper: var(--surface-card); /* Kartenfläche statt reinem Weiß */ --p-surface: var(--surface-mix); /* kühle Füll-/Auswahlflächen */ --p-field: var(--surface-sunken); /* Eingabefelder */ }