Relaunch Phase 1: Gestaltungs-Grundlage, Kopfleiste, Footer, neue Startseiten-Struktur
Token für Hell und Dunkel, eine Schriftfamilie (Instrument Sans selbst gehostet, ?schrift=a für die Systemschrift), gemeinsames Layout für alle Seiten, Abschnitte Über uns und Kontakt, Platzhalter für Hero, Kundenportal, Leistungen und Preise. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
11fd118aa7
commit
822481f2e4
19 files changed
+1150
-51
No files matched your search
@@ -0,0 +1,10 @@
|
||||
/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
|
||||
const HeroKarte = () => (
|
||||
<section className="wk-section">
|
||||
<div className="wk-container">
|
||||
<h2 className="wk-h2">HeroKarte</h2>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default HeroKarte;
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
/** Spezifikation 7.7: ein Satz, ein Button, E-Mail und Telefon. */
|
||||
const KontaktBuehne = () => (
|
||||
<section id="kontakt" className="wk-section wk-section--alt wk-kontakt" aria-labelledby="kontakt-titel">
|
||||
<div className="wk-container wk-kontakt__inhalt">
|
||||
<h2 id="kontakt-titel" className="wk-h2 wk-reveal">
|
||||
Erzählen Sie uns, was Sie vorhaben.
|
||||
</h2>
|
||||
<p className="wk-lead wk-reveal">
|
||||
Zwei Sätze genügen. Wir melden uns spätestens am nächsten Werktag. Im ersten Gespräch klären wir in
|
||||
15 Minuten, ob und wie wir helfen können – kostenlos und unverbindlich.
|
||||
</p>
|
||||
<div className="wk-kontakt__aktion wk-reveal">
|
||||
<Link to="/kontakt" className="wk-btn wk-btn--primary">
|
||||
Projekt besprechen
|
||||
</Link>
|
||||
</div>
|
||||
<p className="wk-kontakt__wege">
|
||||
<a href="mailto:support@webklar.com" className="wk-link">
|
||||
support@webklar.com
|
||||
</a>
|
||||
<span aria-hidden>·</span>
|
||||
<a href="tel:+4917623726355" className="wk-link wk-num">
|
||||
0176 23726355
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default KontaktBuehne;
|
||||
@@ -0,0 +1,10 @@
|
||||
/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
|
||||
const Kundenportal = () => (
|
||||
<section id="kundenportal" className="wk-section">
|
||||
<div className="wk-container">
|
||||
<h2 className="wk-h2">Kundenportal</h2>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Kundenportal;
|
||||
@@ -0,0 +1,10 @@
|
||||
/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
|
||||
const Leistungen = () => (
|
||||
<section id="leistungen" className="wk-section">
|
||||
<div className="wk-container">
|
||||
<h2 className="wk-h2">Leistungen</h2>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Leistungen;
|
||||
@@ -0,0 +1,10 @@
|
||||
/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
|
||||
const Preise = () => (
|
||||
<section id="preise" className="wk-section">
|
||||
<div className="wk-container">
|
||||
<h2 className="wk-h2">Preise</h2>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Preise;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
/** Spezifikation 7.6: wer dahinter steckt. Keine Fotos, bis echte Teamfotos vorliegen. */
|
||||
const UeberUns = () => (
|
||||
<section id="ueber-uns" className="wk-section" aria-labelledby="ueber-uns-titel">
|
||||
<div className="wk-container wk-ueber-uns">
|
||||
<h2 id="ueber-uns-titel" className="wk-h2 wk-reveal">
|
||||
Wer hinter WEBklar steckt.
|
||||
</h2>
|
||||
<div className="wk-reveal">
|
||||
<p className="wk-lead">
|
||||
Wir sind ein kleines Team aus Winnweiler in der Pfalz. Sie sprechen bei uns direkt mit den Leuten, die Ihre
|
||||
Website bauen.
|
||||
</p>
|
||||
<p className="wk-ueber-uns__link">
|
||||
<Link to="/ueber-uns" className="wk-link">
|
||||
Mehr über uns
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default UeberUns;
|
||||
@@ -0,0 +1,46 @@
|
||||
/* Kleine Abschnitte der Startseite: Über uns und Kontakt */
|
||||
|
||||
.wk-ueber-uns {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
|
||||
gap: 2rem 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
.wk-ueber-uns__link {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@media (max-width: 899.98px) {
|
||||
.wk-ueber-uns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.wk-kontakt__inhalt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.wk-kontakt .wk-h2 {
|
||||
max-width: 16ch;
|
||||
}
|
||||
.wk-kontakt .wk-lead {
|
||||
max-width: 38rem;
|
||||
}
|
||||
.wk-kontakt__aktion {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
.wk-kontakt__wege {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem 0.9rem;
|
||||
margin-top: 1.75rem;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
.wk-kontakt__wege a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import Logo from "@/components/Logo";
|
||||
import "./site.css";
|
||||
|
||||
type FooterLink = { label: string; to?: string; href?: string; pflicht?: boolean };
|
||||
|
||||
/** Spezifikation 7.8: Seiten und Rechtliches; Kündigen und Widerrufen bleiben hervorgehoben. */
|
||||
const SEITEN: FooterLink[] = [
|
||||
{ label: "Startseite", to: "/" },
|
||||
{ label: "Kundenportal", to: "/#kundenportal" },
|
||||
{ label: "Was wir bauen", to: "/#leistungen" },
|
||||
{ label: "Preise", to: "/#preise" },
|
||||
{ label: "Über uns", to: "/ueber-uns" },
|
||||
{ label: "Kontakt", to: "/kontakt" },
|
||||
{ label: "Wartungs-Abo", to: "/wartungs-abo" },
|
||||
{ label: "Hosting-Abo", to: "/hosting-abo" },
|
||||
];
|
||||
|
||||
const RECHTLICHES: FooterLink[] = [
|
||||
{ label: "AGB", to: "/agb" },
|
||||
{ label: "Impressum", to: "/impressum" },
|
||||
{ label: "Datenschutz", href: "https://project.webklar.com/datenschutz.html" },
|
||||
{ label: "Verträge hier kündigen", href: "https://project.webklar.com/kuendigen.html", pflicht: true },
|
||||
{ label: "Vertrag widerrufen", href: "https://project.webklar.com/widerrufen.html", pflicht: true },
|
||||
];
|
||||
|
||||
const Eintrag = ({ link }: { link: FooterLink }) => (
|
||||
<li>
|
||||
{link.to ? (
|
||||
<Link to={link.to}>{link.label}</Link>
|
||||
) : (
|
||||
<a href={link.href} className={link.pflicht ? "wk-footer__pflicht" : undefined}>
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
||||
const SiteFooter = () => (
|
||||
<footer className="wk-footer">
|
||||
<div className="wk-container">
|
||||
<div className="wk-footer__raster">
|
||||
<div className="wk-footer__info">
|
||||
<Link to="/" className="wk-footer__marke">
|
||||
<Logo width={24} height={24} />
|
||||
<span>WEBklar</span>
|
||||
</Link>
|
||||
<p>
|
||||
WEBklar GbR
|
||||
<br />
|
||||
Am Schwimmbad 10
|
||||
<br />
|
||||
67722 Winnweiler
|
||||
</p>
|
||||
</div>
|
||||
<nav aria-label="Seiten">
|
||||
<h2>Seiten</h2>
|
||||
<ul>
|
||||
{SEITEN.map((link) => (
|
||||
<Eintrag key={link.label} link={link} />
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Rechtliches">
|
||||
<h2>Rechtliches</h2>
|
||||
<ul>
|
||||
{RECHTLICHES.map((link) => (
|
||||
<Eintrag key={link.label} link={link} />
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<p className="wk-footer__unten">© {new Date().getFullYear()} WEBklar GbR</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default SiteFooter;
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useEffect, useId, useRef, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import Logo from "@/components/Logo";
|
||||
import { projekte } from "@/data/projekte";
|
||||
import "./site.css";
|
||||
|
||||
/** Navigation der Kopfleiste (Spezifikation 6.1). „Projekte“ erscheint erst mit freigegebenen Referenzen. */
|
||||
export const NAVIGATION = [
|
||||
{ label: "Kundenportal", to: "/#kundenportal" },
|
||||
{ label: "Was wir bauen", to: "/#leistungen" },
|
||||
...(projekte.length > 0 ? [{ label: "Projekte", to: "/#projekte" }] : []),
|
||||
{ label: "Preise", to: "/#preise" },
|
||||
{ label: "Über uns", to: "/#ueber-uns" },
|
||||
];
|
||||
|
||||
/** Hell/Dunkel umschalten. Vor dem ersten Rendern ist das Thema unbekannt, daher kein Symbolwechsel beim Laden. */
|
||||
const ThemaSchalter = ({ mitText = false }: { mitText?: boolean }) => {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const [bereit, setBereit] = useState(false);
|
||||
useEffect(() => setBereit(true), []);
|
||||
const dunkel = bereit && resolvedTheme === "dark";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={mitText ? "wk-menu-theme" : "wk-icon-btn"}
|
||||
onClick={() => setTheme(dunkel ? "light" : "dark")}
|
||||
aria-label={dunkel ? "Hellen Modus einschalten" : "Dunklen Modus einschalten"}
|
||||
>
|
||||
{dunkel ? <Sun size={18} aria-hidden /> : <Moon size={18} aria-hidden />}
|
||||
{mitText && <span>{dunkel ? "Heller Modus" : "Dunkler Modus"}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
/** Ein zweiter Klick auf denselben Anker ändert die URL nicht; dann selbst hinscrollen. */
|
||||
const zumAnker = (to: string) => {
|
||||
const [pfad, id] = to.split("#");
|
||||
if (!id || window.location.pathname !== (pfad || "/") || window.location.hash !== `#${id}`) return;
|
||||
document.getElementById(id)?.scrollIntoView();
|
||||
};
|
||||
|
||||
const SiteHeader = () => {
|
||||
const [offen, setOffen] = useState(false);
|
||||
const [gescrollt, setGescrollt] = useState(false);
|
||||
const { pathname, hash } = useLocation();
|
||||
const panelId = useId();
|
||||
const knopfRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
// Trennlinie erst nach dem ersten Scrollen
|
||||
useEffect(() => {
|
||||
const pruefe = () => setGescrollt(window.scrollY > 4);
|
||||
pruefe();
|
||||
window.addEventListener("scroll", pruefe, { passive: true });
|
||||
return () => window.removeEventListener("scroll", pruefe);
|
||||
}, []);
|
||||
|
||||
// Menü schließt bei jedem Seiten- oder Ankerwechsel
|
||||
useEffect(() => setOffen(false), [pathname, hash]);
|
||||
|
||||
// Offenes Menü: Seite sperren, Escape schließt und gibt den Fokus an den Knopf zurück
|
||||
useEffect(() => {
|
||||
if (!offen) return;
|
||||
const vorher = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
const taste = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
setOffen(false);
|
||||
knopfRef.current?.focus();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", taste);
|
||||
return () => {
|
||||
document.body.style.overflow = vorher;
|
||||
window.removeEventListener("keydown", taste);
|
||||
};
|
||||
}, [offen]);
|
||||
|
||||
return (
|
||||
<header className={`wk-header${gescrollt || offen ? " wk-header--linie" : ""}`}>
|
||||
<div className="wk-container wk-header__zeile">
|
||||
<Link to="/" className="wk-header__marke" aria-label="WEBklar – zur Startseite">
|
||||
<Logo width={28} height={28} />
|
||||
<span>WEBklar</span>
|
||||
</Link>
|
||||
|
||||
<nav className="wk-header__nav" aria-label="Hauptnavigation">
|
||||
<ul>
|
||||
{NAVIGATION.map((eintrag) => (
|
||||
<li key={eintrag.to}>
|
||||
<Link to={eintrag.to} onClick={() => zumAnker(eintrag.to)}>
|
||||
{eintrag.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="wk-header__aktionen">
|
||||
<ThemaSchalter />
|
||||
<Link to="/kontakt" className="wk-btn wk-btn--primary wk-btn--small">
|
||||
Projekt besprechen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
ref={knopfRef}
|
||||
type="button"
|
||||
className="wk-header__menuknopf"
|
||||
aria-expanded={offen}
|
||||
aria-controls={panelId}
|
||||
aria-label={offen ? "Menü schließen" : "Menü öffnen"}
|
||||
onClick={() => setOffen((o) => !o)}
|
||||
>
|
||||
<span className="wk-burger" data-offen={offen} aria-hidden>
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Handy-Menü: Abdunkelung schließt per Tipp daneben */}
|
||||
<div className="wk-menu-hintergrund" data-offen={offen} onClick={() => setOffen(false)} aria-hidden />
|
||||
<div id={panelId} className="wk-menu" data-offen={offen} hidden={!offen}>
|
||||
<nav aria-label="Menü">
|
||||
<ul>
|
||||
{NAVIGATION.map((eintrag) => (
|
||||
<li key={eintrag.to}>
|
||||
<Link
|
||||
to={eintrag.to}
|
||||
onClick={() => {
|
||||
setOffen(false);
|
||||
zumAnker(eintrag.to);
|
||||
}}
|
||||
>
|
||||
{eintrag.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="wk-menu__fuss">
|
||||
<Link to="/kontakt" className="wk-btn wk-btn--primary" onClick={() => setOffen(false)}>
|
||||
Projekt besprechen
|
||||
</Link>
|
||||
<ThemaSchalter mitText />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteHeader;
|
||||
@@ -0,0 +1,283 @@
|
||||
/* Kopfleiste, Handy-Menü und Footer (Spezifikation 6.1 und 7.8) */
|
||||
|
||||
.wk-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, var(--bg) 94%, transparent);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color var(--dur-state) var(--ease);
|
||||
}
|
||||
.wk-header--linie {
|
||||
border-bottom-color: var(--line);
|
||||
}
|
||||
|
||||
.wk-header__zeile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
height: var(--header-h);
|
||||
}
|
||||
|
||||
.wk-header__marke {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.0625rem;
|
||||
letter-spacing: 0;
|
||||
color: var(--fg);
|
||||
min-height: 44px;
|
||||
}
|
||||
.wk-header__marke svg {
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 0 1px var(--line);
|
||||
}
|
||||
|
||||
.wk-header__nav {
|
||||
flex: 1;
|
||||
}
|
||||
.wk-header__nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.wk-header__nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0 0.85rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--fg-muted);
|
||||
transition: color var(--dur-state) var(--ease);
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.wk-header__nav a:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
}
|
||||
|
||||
.wk-header__aktionen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wk-icon-btn {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
color: var(--fg-muted);
|
||||
transition: color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.wk-icon-btn:hover {
|
||||
color: var(--fg);
|
||||
background: var(--bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.wk-header__menuknopf {
|
||||
display: none;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-left: auto;
|
||||
margin-right: -10px;
|
||||
place-items: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.wk-burger {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
}
|
||||
.wk-burger span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: transform var(--dur-state) var(--ease), top var(--dur-state) var(--ease);
|
||||
}
|
||||
.wk-burger span:first-child {
|
||||
top: 2px;
|
||||
}
|
||||
.wk-burger span:last-child {
|
||||
top: 9px;
|
||||
}
|
||||
.wk-burger[data-offen="true"] span:first-child {
|
||||
top: 5.5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.wk-burger[data-offen="true"] span:last-child {
|
||||
top: 5.5px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.wk-menu,
|
||||
.wk-menu-hintergrund {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 899.98px) {
|
||||
.wk-header__nav,
|
||||
.wk-header__aktionen {
|
||||
display: none;
|
||||
}
|
||||
.wk-header__menuknopf {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.wk-menu-hintergrund {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: var(--header-h) 0 0 0;
|
||||
background: rgb(0 0 0 / 0.32);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--dur-state) var(--ease);
|
||||
}
|
||||
.wk-menu-hintergrund[data-offen="true"] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.wk-menu {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: calc(100dvh - var(--header-h));
|
||||
overflow-y: auto;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 0.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
.wk-menu[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.wk-menu nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--fg);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.wk-menu__fuss {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.wk-menu__fuss .wk-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.wk-menu-theme {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 48px;
|
||||
border-radius: 999px;
|
||||
color: var(--fg);
|
||||
box-shadow: inset 0 0 0 1px var(--line);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.wk-menu[data-offen="true"] {
|
||||
animation: wk-menu-auf var(--dur-state) var(--ease);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wk-menu-auf {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Footer ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.wk-footer {
|
||||
background: var(--bg-alt);
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--fg-muted);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.5;
|
||||
padding-block: 56px calc(40px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.wk-footer__raster {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
.wk-footer__marke {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.wk-footer__marke svg {
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 0 0 1px var(--line);
|
||||
}
|
||||
.wk-footer h2 {
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
color: var(--fg);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.wk-footer li a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
color: var(--fg-muted);
|
||||
transition: color var(--dur-state) var(--ease);
|
||||
}
|
||||
.wk-footer li a.wk-footer__pflicht {
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.wk-footer li a:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
}
|
||||
.wk-footer__unten {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (max-width: 719.98px) {
|
||||
.wk-footer__raster {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.wk-footer__info {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.wk-footer li a {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user