/* ============================================================================
EDITION FICHTER — Design System „1b Editorial Modern"
Stylesheet / Design Tokens + Komponenten
----------------------------------------------------------------------------
Framework-agnostisch. Nur Custom Properties + BEM-artige Klassen.
Fonts: Space Grotesk (UI/Display), Newsreader (Serifen-Titel), Hanken Grotesk (Text).
Einbinden im :
============================================================================ */
:root {
/* ---- Flächen / Farben ---- */
--ef-cream: #faf6ec; /* Seitenhintergrund */
--ef-cream-soft: #fbf8f0; /* leicht abgesetzte Zonen (sticky bars) */
--ef-paper: #ffffff; /* Karten, Buchflächen, Inputs */
--ef-tint: #f2ead9; /* Amber-getönte Info-/Hinweisboxen */
--ef-ink: #1b1a17; /* Primärtext, dunkle Flächen, Buttons */
--ef-ink-deep: #17150f; /* tiefstes Schwarz (Menü-Overlay) */
--ef-body: #4a463f; /* Fließtext */
--ef-muted: #6b655a; /* Sekundärtext / inaktive Nav */
--ef-muted-soft: #8a8375; /* Platzhalter, Meta, Captions */
--ef-line: #e7ddc9; /* Standard-Rahmen / Trennlinien */
--ef-line-soft: #ece3d0; /* zarte Linien, Karten-Sockelschatten */
/* ---- Akzent (Corporate Amber — bleibt erhalten) ---- */
--ef-amber: #e9a21a; /* Primär-Akzent: CTA, Panels, Marker */
--ef-amber-bright: #f5b301; /* Logo-Gelb, Highlights auf Dunkel */
--ef-amber-ink: #7a5407; /* Text AUF Amber-Flächen */
--ef-label: #b98a12; /* Eyebrow-/Kategorie-Labels auf Creme */
--ef-success: #3b7d4f; /* „Lieferbar", Versand frei */
/* ---- Dunkle Oberflächen (Footer, Panels, Summary) ---- */
--ef-dark: #1b1a17;
--ef-dark-raise: #2c2823; /* Inputs/Chips auf Dunkel */
--ef-dark-line: #34302a; /* Trennlinien auf Dunkel */
--ef-dark-text: #c9c2b3; /* Text auf Dunkel */
--ef-dark-muted: #a49d8f; /* Sekundärtext auf Dunkel */
/* ---- Typografie ---- */
--ef-font-ui: 'Space Grotesk', system-ui, sans-serif; /* Display, Labels, Preise, Buttons */
--ef-font-serif: 'Newsreader', Georgia, serif; /* Buch- & Editorial-Titel */
--ef-font-body: 'Hanken Grotesk', system-ui, sans-serif;/* Fließtext, Formulare */
/* ---- Radius ---- */
--ef-r-pill: 30px; /* Buttons, Chips, Suchfeld */
--ef-r-card: 14px; /* Panels, Summary, Newsletter */
--ef-r-input: 9px; /* Formularfelder */
--ef-r-book: 4px; /* Buch-/Cover-Flächen (bewusst kantig) */
/* ---- Schatten ---- */
--ef-shadow-card: 0 20px 40px rgba(30,25,15,.16); /* Karten-Hover */
--ef-shadow-book: 0 12px 18px rgba(0,0,0,.22); /* Cover drop-shadow */
--ef-shadow-panel: 0 24px 54px rgba(30,25,15,.24); /* Phone / große Panels */
/* ---- Layout ---- */
--ef-pad-x: 56px; /* horizontaler Seitenrand (Desktop) */
--ef-maxw: 1280px; /* Content-Maxbreite */
}
/* ============================================================================
BASIS
============================================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ef-cream);
color: var(--ef-ink);
font-family: var(--ef-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.ef-page { max-width: var(--ef-maxw); margin: 0 auto; }
.ef-section{ padding: 56px var(--ef-pad-x); }
/* ============================================================================
TYPOGRAFIE-HILFSKLASSEN
============================================================================ */
.ef-eyebrow { /* kleines Label über Titeln, auf Creme */
font-family: var(--ef-font-ui);
font-weight: 600;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ef-label);
}
.ef-h1 { font-family: var(--ef-font-ui); font-weight: 700; font-size: 46px; letter-spacing: -1px; margin: 0; }
.ef-h1--hero{ font-size: 58px; letter-spacing: -1.5px; line-height: 1.03; }
.ef-h2 { font-family: var(--ef-font-ui); font-weight: 700; font-size: 34px; letter-spacing: -.5px; margin: 0; }
.ef-serif { font-family: var(--ef-font-serif); font-weight: 500; }
.ef-serif-italic { font-family: var(--ef-font-serif); font-weight: 500; font-style: italic; }
.ef-lead { font-family: var(--ef-font-body); font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--ef-body); }
.ef-body { font-family: var(--ef-font-body); font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--ef-body); }
.ef-price { font-family: var(--ef-font-ui); font-weight: 700; font-size: 16px; }
.ef-num { font-family: var(--ef-font-ui); font-weight: 700; font-size: 44px; letter-spacing: -1px; color: var(--ef-amber); } /* /01 /02 */
/* Kleines Kapitälchen-Label (z.B. Kategorie/Autor über Buchtitel) */
.ef-cap {
font-family: var(--ef-font-ui);
font-weight: 600;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ef-label);
}
/* ============================================================================
BUTTONS
============================================================================ */
.ef-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ef-font-ui); font-weight: 700; font-size: 13px;
letter-spacing: .8px; text-transform: uppercase;
padding: 15px 30px; border-radius: var(--ef-r-pill);
border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.ef-btn--dark { background: var(--ef-ink); color: #fff; }
.ef-btn--amber { background: var(--ef-amber); color: var(--ef-ink); }
.ef-btn--ghost { background: transparent; color: var(--ef-ink); padding: 15px 8px; }
.ef-btn:hover { transform: translateY(-1px); }
.ef-btn--block { display: flex; justify-content: center; width: 100%; }
/* Text-Link im UI-Stil mit Pfeil: „Alle ansehen →" */
.ef-link {
font-family: var(--ef-font-ui); font-weight: 600; font-size: 12px;
letter-spacing: 1px; text-transform: uppercase; color: var(--ef-label);
}
/* ============================================================================
HEADER / NAV
============================================================================ */
.ef-header {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 48px; background: var(--ef-cream);
border-bottom: 1px solid var(--ef-line);
}
.ef-logo { display: flex; align-items: center; gap: 12px; }
.ef-logo__mark {
width: 36px; height: 36px; border-radius: 8px; background: var(--ef-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--ef-font-ui); font-weight: 700; font-size: 14px; color: var(--ef-amber-bright);
}
.ef-logo__word { font-family: var(--ef-font-ui); font-weight: 600; font-size: 16px; letter-spacing: 3px; white-space: nowrap; }
.ef-nav { display: flex; align-items: center; gap: 28px; }
.ef-nav a {
font-family: var(--ef-font-ui); font-weight: 600; font-size: 12px;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--ef-muted);
}
.ef-nav a.is-active { color: var(--ef-ink); border-bottom: 2px solid var(--ef-amber); padding-bottom: 4px; }
.ef-search {
display: flex; align-items: center; gap: 8px; width: 150px;
background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: 22px;
padding: 9px 16px; font-family: var(--ef-font-body); font-size: 13px; color: var(--ef-muted-soft);
}
.ef-cartpill {
background: var(--ef-ink); color: var(--ef-amber-bright);
font-family: var(--ef-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .5px;
padding: 10px 15px; border-radius: 22px; white-space: nowrap;
}
/* Ticker-Band (dunkel, Versalien) */
.ef-ticker {
display: flex; gap: 44px; padding: 16px var(--ef-pad-x);
background: var(--ef-ink); color: var(--ef-dark-muted);
font-family: var(--ef-font-ui); font-weight: 600; font-size: 12px;
letter-spacing: 2px; text-transform: uppercase; overflow: hidden; white-space: nowrap;
}
.ef-ticker .is-hi { color: var(--ef-amber-bright); }
/* ============================================================================
HERO (Split: Text + Amber-Panel)
============================================================================ */
.ef-hero { display: grid; grid-template-columns: 1fr .82fr; align-items: stretch; }
.ef-hero__text { padding: 66px var(--ef-pad-x) 60px; }
.ef-hero__rule { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.ef-hero__rule span:first-child { width: 34px; height: 3px; background: var(--ef-amber); }
.ef-hero__panel {
background: var(--ef-amber); color: var(--ef-ink);
display: flex; flex-direction: column; justify-content: center; padding: 48px 52px;
}
.ef-hero__panel .ef-cap { color: var(--ef-amber-ink); }
.ef-cover-hero { width: 220px; height: 288px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(90,60,10,.4)); align-self: center; }
/* ============================================================================
SECTION-HEADER (/01 Titel ………………… Alle ansehen →)
============================================================================ */
.ef-sechead { display: flex; align-items: baseline; gap: 22px; margin-bottom: 38px; }
.ef-sechead__sub { font-family: var(--ef-font-body); font-size: 14px; color: var(--ef-muted-soft); margin-top: 4px; }
.ef-sechead .ef-link { margin-left: auto; align-self: center; }
/* Divider-Variante: Titel — linie — link */
.ef-bandhead { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ef-bandhead__line { flex: 1; height: 1px; background: var(--ef-line); }
/* ============================================================================
PRODUKTKARTE (Editorial: weiße Buchfläche, kein Rahmen, Sockelschatten)
============================================================================ */
.ef-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.ef-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.ef-card { display: flex; flex-direction: column; gap: 16px; }
.ef-card__cover {
aspect-ratio: 1 / 1.32; background: var(--ef-paper); border-radius: var(--ef-r-book);
display: flex; align-items: center; justify-content: center; padding: 4px;
box-shadow: 0 2px 0 var(--ef-line-soft); transition: box-shadow .25s;
}
.ef-card:hover .ef-card__cover { box-shadow: var(--ef-shadow-card); }
.ef-card__cover img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ef-card__title { font-family: var(--ef-font-serif); font-weight: 500; font-size: 19px; line-height: 1.28; min-height: 48px; }
.ef-card__rule { height: 1px; background: var(--ef-line); }
.ef-card__foot { display: flex; align-items: center; justify-content: space-between; }
.ef-card__cta { font-family: var(--ef-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--ef-ink); }
/* ============================================================================
FORMULARE
============================================================================ */
.ef-field { display: flex; flex-direction: column; gap: 7px; }
.ef-label {
font-family: var(--ef-font-ui); font-weight: 600; font-size: 11px;
letter-spacing: .8px; text-transform: uppercase; color: var(--ef-muted);
}
.ef-input, .ef-textarea {
background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: var(--ef-r-input);
padding: 15px 16px; font-family: var(--ef-font-body); font-size: 14px; color: var(--ef-ink);
}
.ef-input::placeholder, .ef-textarea::placeholder { color: var(--ef-muted-soft); }
.ef-input:focus, .ef-textarea:focus { outline: none; border-color: var(--ef-ink); }
.ef-textarea { min-height: 130px; resize: vertical; }
/* Radio-/Auswahl-Kachel (Versand-/Zahlart) */
.ef-choice {
display: flex; align-items: center; gap: 14px;
background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: 11px; padding: 16px 18px;
cursor: pointer;
}
.ef-choice.is-selected { border: 1.5px solid var(--ef-ink); }
.ef-choice__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ef-line); flex: none; display: flex; align-items: center; justify-content: center; }
.ef-choice.is-selected .ef-choice__dot { border-color: var(--ef-ink); }
.ef-choice.is-selected .ef-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ef-amber); }
/* Menge-Stepper */
.ef-stepper {
display: inline-flex; align-items: center; gap: 18px;
background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: var(--ef-r-pill); padding: 12px 20px;
font-family: var(--ef-font-ui); font-weight: 700; font-size: 16px;
}
.ef-stepper button { border: 0; background: none; font: inherit; color: var(--ef-muted-soft); cursor: pointer; }
/* ============================================================================
DUNKLE PANELS (Bestellübersicht, Warenkorb-Summary, Kontakt-Infokarte)
============================================================================ */
.ef-panel-dark { background: var(--ef-dark); color: #fff; border-radius: var(--ef-r-card); padding: 32px 30px; }
.ef-panel-dark__title { font-family: var(--ef-font-ui); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 22px; }
.ef-srow { display: flex; justify-content: space-between; font-family: var(--ef-font-body); font-size: 14px; color: var(--ef-dark-text); padding: 9px 0; }
.ef-srow--total { align-items: baseline; padding: 12px 0 22px; }
.ef-srow--total .lbl { font-family: var(--ef-font-ui); font-weight: 600; font-size: 15px; color: #fff; }
.ef-srow--total .val { font-family: var(--ef-font-ui); font-weight: 700; font-size: 28px; color: var(--ef-amber-bright); }
.ef-panel-dark hr { border: 0; border-top: 1px solid var(--ef-dark-line); margin: 12px 0; }
.ef-input-dark { background: var(--ef-dark-raise); border: 1px solid #3d382f; border-radius: var(--ef-r-pill); padding: 12px 18px; color: var(--ef-muted-soft); font-family: var(--ef-font-body); font-size: 13px; }
/* ============================================================================
NEWSLETTER-BAND (dunkel, gerundet)
============================================================================ */
.ef-newsletter {
margin: 44px var(--ef-pad-x) 0; background: var(--ef-dark); border-radius: var(--ef-r-card);
padding: 52px 56px; display: grid; grid-template-columns: 1fr .8fr; gap: 40px; align-items: center;
}
/* ============================================================================
FOOTER
============================================================================ */
.ef-footer { padding: 52px var(--ef-pad-x) 40px; border-top: 1px solid var(--ef-line); }
.ef-footer__cols { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; }
.ef-footer__col { display: flex; flex-direction: column; gap: 10px; font-family: var(--ef-font-body); font-weight: 500; font-size: 13px; color: var(--ef-body); }
.ef-footer__head { font-family: var(--ef-font-ui); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ef-ink); margin-bottom: 4px; }
.ef-footer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ef-line); font-family: var(--ef-font-body); font-weight: 500; font-size: 12px; color: var(--ef-muted-soft); }
/* ============================================================================
BREADCRUMB / PAGE-HEAD (Innenseiten)
============================================================================ */
.ef-breadcrumb { font-family: var(--ef-font-ui); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ef-label); }
.ef-breadcrumb .is-current { color: var(--ef-ink); }
.ef-pagehead { padding: 44px var(--ef-pad-x) 8px; }
/* ============================================================================
HILFEN: Sidebar-Nav (Shop-Filter / Info-Seiten), Chips, Pagination, Stepper-Checkout, Tabelle, Hinweisbox
============================================================================ */
.ef-sidenav { display: flex; flex-direction: column; gap: 2px; }
.ef-sidenav a { font-family: var(--ef-font-body); font-weight: 500; font-size: 14px; padding: 11px 14px; color: var(--ef-body); border-radius: 8px; }
.ef-sidenav a.is-active { font-weight: 600; background: var(--ef-ink); color: #fff; }
.ef-chip { font-family: var(--ef-font-ui); font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; background: var(--ef-paper); border: 1px solid var(--ef-line); color: var(--ef-muted); border-radius: 20px; padding: 7px 12px; }
.ef-chip.is-active { background: var(--ef-amber); border-color: var(--ef-amber); color: var(--ef-ink); }
.ef-page-num { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ef-line); border-radius: 9px; font-family: var(--ef-font-ui); font-weight: 600; font-size: 14px; color: var(--ef-body); }
.ef-page-num.is-active { background: var(--ef-ink); color: #fff; border-color: var(--ef-ink); }
.ef-table { border: 1px solid var(--ef-line); border-radius: 12px; overflow: hidden; }
.ef-table__head, .ef-table__row { display: grid; }
.ef-table__head { background: var(--ef-ink); color: #fff; font-family: var(--ef-font-ui); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.ef-table__row { background: var(--ef-paper); font-family: var(--ef-font-body); font-weight: 500; font-size: 14px; border-bottom: 1px solid var(--ef-line-soft); }
.ef-table__row:last-child { border-bottom: 0; }
.ef-table span { padding: 13px 16px; }
.ef-note { background: var(--ef-tint); border-left: 3px solid var(--ef-amber); border-radius: 0 10px 10px 0; padding: 18px 22px; font-family: var(--ef-font-body); font-size: 14px; line-height: 1.7; color: var(--ef-body); }
/* Checkout-Stepper */
.ef-steps { display: flex; align-items: center; justify-content: center; padding: 34px var(--ef-pad-x) 8px; }
.ef-step { display: flex; align-items: center; gap: 12px; }
.ef-step__dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ef-font-ui); font-weight: 700; font-size: 13px; background: var(--ef-paper); border: 1.5px solid var(--ef-line); color: var(--ef-muted-soft); }
.ef-step.is-done .ef-step__dot { background: var(--ef-ink); border-color: var(--ef-ink); color: #fff; }
.ef-step.is-active .ef-step__dot { background: var(--ef-amber); border-color: var(--ef-amber); color: var(--ef-ink); }
.ef-step__label { font-family: var(--ef-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--ef-muted-soft); }
.ef-step.is-done .ef-step__label, .ef-step.is-active .ef-step__label { color: var(--ef-ink); font-weight: 700; }
.ef-steps__line { width: 70px; height: 2px; background: var(--ef-line); margin: 0 18px; }
.ef-steps__line.is-done { background: var(--ef-ink); }
/* ============================================================================
RESPONSIVE ( ≤ 900px → mobile )
============================================================================ */
@media (max-width: 900px) {
:root { --ef-pad-x: 20px; }
.ef-header { padding: 14px 20px; }
.ef-nav, .ef-search { display: none; } /* Nav wandert ins Burger-Overlay */
.ef-h1 { font-size: 32px; }
.ef-h1--hero { font-size: 30px; letter-spacing: -1px; }
.ef-h2 { font-size: 22px; }
.ef-hero { grid-template-columns: 1fr; }
.ef-hero__text { padding: 26px 20px; }
.ef-hero__panel { padding: 26px 22px; }
.ef-grid, .ef-grid--3 { grid-template-columns: 1fr 1fr; gap: 22px; }
.ef-card__title { font-size: 14px; min-height: 36px; }
.ef-newsletter { grid-template-columns: 1fr; padding: 24px 22px; margin: 22px 20px 0; }
/* Layouts mit Sidebar (Shop-Filter, Info-Seiten, Checkout-Summary) stapeln: */
.ef-two-col, .ef-checkout, .ef-info { grid-template-columns: 1fr !important; }
}
/* Mobile-Overlay-Menü (Vollbild, dunkel) */
.ef-menu { position: fixed; inset: 0; background: var(--ef-ink-deep); color: var(--ef-dark-text); z-index: 100; padding: 20px 24px; overflow-y: auto; }
.ef-menu a { display: flex; justify-content: space-between; align-items: center; font-family: var(--ef-font-serif); font-weight: 500; font-size: 30px; color: #fff; padding: 16px 0; border-bottom: 1px solid var(--ef-dark-line); }
.ef-menu a.is-active { color: var(--ef-amber); font-style: italic; }