/**
* labaronne — Basis, Kopf, Startseite, Fuss.
* Vanilla CSS, kein Build-Step. Farben ausschliesslich ueber die Tokens aus tokens.css.
* Struktur folgt dem freigegebenen Entwurf docs/work/2026-09-08-designvorschlag/entwurf-v2.html.
*/
/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--primary);
font-family: var(--sans);
font-weight: 300;
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--serif);
font-weight: 600;
margin: 0;
letter-spacing: var(--track-display);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: 0; }
p { margin: 0 0 var(--space-2); max-width: min(66ch, 100%); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
/* Sichtbarer Fokus ueberall — nie ohne Ersatz entfernen (theme.md §7). */
:focus-visible {
outline: 2px solid var(--accent-ink);
outline-offset: 2px;
}
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
/*
* `padding-block`, NICHT die Kurzform. `padding: X 0` löscht die seitliche Polsterung aus
* `.wrap`, sobald beide Klassen am selben Element hängen — dann klebt der Inhalt am
* Bildschirmrand. Dieser Fehler ist mir heute dreimal unterlaufen: bei `.entry-content`,
* bei `.page-header` und hier.
*/
.section { padding-block: var(--space-8); }
/* Zwei Split-Abschnitte direkt untereinander brauchen dazwischen keinen doppelten Abstand. */
.section-tight { padding-top: 0; }
.section-intro { max-width: 56ch; margin-bottom: var(--space-5); }
.section-intro h2 { margin-bottom: var(--space-2); }
.featured-title { margin-bottom: var(--space-4); }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link:focus {
position: fixed; top: 12px; left: 12px; z-index: 999;
width: auto; height: auto; clip: auto;
background: var(--surface); color: var(--primary);
padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-ink);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
padding: var(--space-2) var(--space-4);
background: var(--accent-ink);
color: var(--on-dark);
text-decoration: none;
font-size: var(--fs-small);
letter-spacing: var(--track-label);
text-transform: uppercase;
border: 1px solid var(--accent-ink);
transition: background .25s, border-color .25s, transform .12s;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn-line { background: transparent; color: var(--primary); border-color: var(--primary); }
/* Hover ist überall die Akzentfarbe — vorher füllte dieser Knopf mit Schwarz. */
.btn-line:hover { background: var(--accent-ink); color: var(--on-dark); border-color: var(--accent-ink); }
.btn-light { background: var(--surface); color: var(--primary); border-color: var(--surface); }
.btn-light:hover { background: var(--bg); border-color: var(--bg); }
/* ---------- Kopf ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(253, 242, 242, .96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
/*
* EINE Zeile, drei Bereiche: Wortmarke links, Menü mittig, Konto und Warenkorb rechts.
* Das Raster `1fr auto 1fr` hält das Menü in der echten Seitenmitte, egal wie breit die
* beiden Seitenbereiche sind — mit Flexbox säße es je nach Wortlänge daneben.
* Alles auf einer Grundlinie (Arthur 2026-09-09: „nicht gleich hoch").
*/
.nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
/*
* Wortmarke in Versalien.
*
* Verkleinert am 2026-09-10. Sie war auf „so groß wie die Seitenüberschrift SHOP" kalibriert
* — und genau das war der Fehler: Wortmarke und Seitenüberschrift standen als zwei fast
* gleiche Blöcke untereinander an derselben Kante. Der Kopf fällt damit auch unter die
* 80 px, die der `taste-skill` als Obergrenze setzt.
*
* Bei Versalien braucht Literata eine leicht positive Laufweite; eine negative würde die
* Buchstaben ineinanderschieben.
*/
.mark {
font-family: var(--serif);
/*
* Kräftiger als die Überschriften, bei gleicher Größe (Arthur 2026-09-15: „nicht größer,
* sondern fetter, dann sieht er moderner aus"). Braucht die freigegebene Gewichtsachse,
* `font-weight: 600 800` im @font-face in inc/enqueue.php.
*/
font-weight: 750;
font-size: clamp(1.35rem, 2.2vw, 1.9rem);
line-height: var(--lh-display);
letter-spacing: .015em;
text-transform: uppercase;
text-decoration: none;
color: var(--primary);
justify-self: start;
}
.nav-main {
display: flex;
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
justify-self: center;
}
.nav-main a {
text-decoration: none;
font-size: var(--fs-small);
letter-spacing: var(--track-label);
text-transform: uppercase;
padding: var(--space-micro) 0;
border-bottom: 1px solid transparent;
transition: border-color .25s, color .25s;
}
.nav-main a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/*
* Die aktuelle Seite in Koralle (Arthur 2026-09-09). WordPress vergibt je nach Seitentyp
* eine andere Klasse — alle drei nötig, sonst bleibt der Punkt auf Kategorieseiten und
* im Shop unmarkiert.
*/
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .current-menu-ancestor > a {
color: var(--accent-ink);
border-color: var(--accent-ink);
}
.nav-util {
display: flex;
justify-self: end;
gap: var(--space-3);
font-size: var(--fs-small);
}
.nav-util a { text-decoration: none; }
.nav-util .cart-link { color: var(--accent-ink); font-weight: 500; }
/* Mobilmenü: reines CSS über ein Kontrollkästchen, damit es ohne JS funktioniert. */
.nav-toggle, .nav-toggle-label { display: none; }
/* ---------- Hero ---------- */
/*
* Hero bis ganz nach unten: Bildschirmhöhe minus Kopfzeile (Arthur 2026-09-14). Vorher
* `min(84vh, 820px)` — auf großen Bildschirmen blieb darunter ein Streifen frei.
*
* `--kopf-hoehe` misst hero.js an der echten Kopfzeile nach. Ohne Skript gelten die hier
* gemessenen Werte (Desktop 73 px, zweizeilig mobil 127 px), der Unterschied ist dann ein,
* zwei Pixel. `svh` statt `vh`: die kleine Bildschirmhöhe, damit der Hero nicht springt, wenn
* die Adressleiste im Handy-Browser ein- und ausfährt. Die `vh`-Zeile davor ist der Rückfall
* für Browser ohne `svh`. `min-height` schützt quergehaltene Telefone.
*/
:root { --kopf-hoehe: 73px; }
.hero {
position: relative;
height: calc(100vh - var(--kopf-hoehe));
height: calc(100svh - var(--kopf-hoehe));
min-height: 460px;
overflow: hidden;
background: var(--primary);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/*
* Manschettenknopf-Collagen (Arthur 2026-09-15): drei oder vier gleich große Kacheln
* nebeneinander, dazwischen eine feine Fuge. Die Bilder füllen ihre Kachel über
* `.hero-slide img` (cover); auf den Knopf zugeschnitten sind sie schon
* (scripts/hero-collage.php).
*/
.hero-collage { display: grid; grid-template-rows: 100%; gap: 4px; background: var(--primary); }
.hero-collage-2 { grid-template-columns: repeat(2, 1fr); }
.hero-collage-3 { grid-template-columns: repeat(3, 1fr); }
.hero-collage-4 { grid-template-columns: repeat(4, 1fr); }
.hero-collage img { min-width: 0; min-height: 0; }
/*
* Am Handy keine Collagen, sondern je Folie ein Einzelbild, dafür mehr Folien (Arthur
* 2026-09-15: „sonst sieht man nichts, wenn die so gequetscht zu dritt draufstehen"). Vorher
* standen die Kacheln dort 2 × 2 bzw. untereinander.
*
* Zwei Folgen in hero.php: `data-nur="breit"` (Collagen samt Punkten) und `data-nur="schmal"`
* (Einzelbilder samt Punkten). Die jeweils andere ist ganz ausgeblendet, damit ihre Bilder
* nicht laden (`loading="lazy"`). Die Grenze muss zu hero.js passen (560 px).
*/
@media (min-width: 561px) { .hero [data-nur="schmal"] { display: none; } }
@media (max-width: 560px) { .hero [data-nur="breit"] { display: none; } }
/*
* Schleier über dem Hero-Bild.
*
* Gerechnet, nicht geschätzt: Weiß auf einem 55%-Schleier über einem hellen Motiv
* (die gedeckte Tafel ist fast weiß) ergibt nur ~3:1 — der Text war unlesbar.
* Bei 78% am unteren Rand liegt der Grund bei etwa #575755, Weiß darauf erreicht ~5,4:1.
* Der Verlauf lässt das Bild oben frei, damit das Motiv nicht ersäuft.
*/
.hero::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
rgba(26,28,24,.78) 0%,
rgba(26,28,24,.62) 26%,
rgba(26,28,24,.28) 52%,
rgba(26,28,24,.06) 74%,
transparent 100%
);
}
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: var(--space-6); }
/*
* Die Überschrift der Manschetten-Collagen ist ein
(genau eine h1 je Seite), sieht aber
* aus wie die h1 daneben — dieselben Werte wie `h1` oben in dieser Datei.
*/
.hero-titel {
font-family: var(--serif); font-weight: 600;
font-size: var(--fs-h1); line-height: var(--lh-display);
letter-spacing: var(--track-display); text-wrap: balance;
margin-top: 0;
}
.hero-copy h1,
.hero-titel {
color: var(--on-dark);
max-width: 16ch;
margin-bottom: var(--space-2);
/* Zweite Absicherung neben dem Schleier: fängt helle Stellen im Motiv ab. */
text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 32px rgba(0,0,0,.35);
}
.hero-description,
.hero-unterzeile {
color: var(--on-dark);
max-width: min(44ch, 100%);
margin-bottom: var(--space-4);
font-size: var(--fs-lead);
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/*
* Wechselt das Motiv (Karaffen ↔ Manschetten), blendet der Text sanft ein. hero.js setzt
* `is-gewechselt` erst beim ersten Wechsel — beim Laden steht die Überschrift sofort da.
*/
@media (prefers-reduced-motion: no-preference) {
.hero-copy.is-gewechselt { animation: hero-text-ein .9s ease both; }
}
@keyframes hero-text-ein {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.hero-dots { position: absolute; right: var(--gutter); bottom: 64px; z-index: 4; display: flex; gap: var(--space-1); }
.hero-dots button {
width: 34px; height: 3px; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,.42);
transition: background .3s;
}
.hero-dots button[aria-current="true"] { background: var(--on-dark); }
/* Ein einzelnes Hero-Bild braucht keine Punkte. */
.hero[data-slides="1"] .hero-dots { display: none; }
/* ---------- Startseite: Split-Abschnitte ---------- */
.dive { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; }
/*
* Gespiegelt: das Bild wandert nach rechts. Im Markup steht das Bild immer zuerst,
* damit es ohne CSS in sinnvoller Reihenfolge bleibt; gedreht wird nur visuell.
*/
.dive.is-flipped img { order: 2; }
/*
* `4/5` ergab bei halber Breite von 1460 px eine Bildhöhe von 869 px — das Bild lief über
* den Bildschirm hinaus (Arthur 2026-09-09). Querformat plus Höhenbegrenzung.
*/
.dive img {
width: 100%;
aspect-ratio: 4 / 3;
max-height: min(58vh, 520px);
object-fit: cover;
}
.dive-eyebrow {
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--muted);
margin: 0 0 var(--space-1);
}
.dive-text h2 { margin-bottom: var(--space-2); }
.dive-text p { margin-bottom: var(--space-2); }
/* Belegte Merkmale als knappe Aufzählung — gibt der Spalte Substanz. */
.dive-points {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
display: grid;
gap: var(--space-1);
font-size: var(--fs-body);
color: var(--muted);
}
.dive-points li {
padding-left: var(--space-2);
position: relative;
}
.dive-points li::before {
content: '';
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 1px;
background: var(--accent-ink);
}
/* ---------- Startseite: Band ---------- */
/*
* `min-height: 70vh` war zu viel (Arthur 2026-09-10). Auf einem hohen Bildschirm wurde das
* Band fast bildschirmfuellend, und weil das Tischkultur-Bild ein Hochformat-Zoom ist, sah
* man dort vor allem eine formatfuellende Melone. Ein Band ist ein Zwischenruf, kein Hero.
*/
.band {
position: relative; min-height: min(46vh, 420px);
/*
* Polsterung oben und unten (2026-09-15, Arthur: „zu gedrungen"). Am Handy ist der Inhalt
* höher als die Mindesthöhe, dann klebte die Überschrift oben und der Knopf unten am Rand.
*/
padding-block: var(--space-7);
display: grid; place-items: center;
overflow: hidden; color: var(--on-dark); text-align: center;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gleiche Rechnung wie beim Hero: 50% reichten auf hellen Motiven nicht. */
.band::after { content: ''; position: absolute; inset: 0; background: rgba(26,28,24,.68); }
.band-inner { position: relative; z-index: 2; max-width: 52ch; padding: 0 var(--gutter); }
.band h2 { color: var(--on-dark); margin-bottom: var(--space-2); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.band p { color: var(--on-dark); margin: 0 auto var(--space-4); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
/* ---------- Startseite: Mosaik ---------- */
.mosaic {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
grid-auto-rows: 220px;
gap: var(--space-2);
margin-top: var(--space-4);
}
.mosaic a { position: relative; overflow: hidden; display: block; text-decoration: none; }
.mosaic a:first-child { grid-row: span 2; }
.mosaic img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.mosaic a:hover img { transform: scale(1.05); }
.mosaic .caption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: var(--space-3); color: var(--on-dark); font-size: var(--fs-lead);
background: linear-gradient(to top, rgba(26,28,24,.75), transparent);
}
/* ---------- Produktkacheln ---------- */
/*
* Startseiten-Raster. Der Shop bringt sein eigenes mit (`ul.products` in woocommerce.css,
* drei Spalten) — diese Klasse kommt nur auf der Startseite vor, gemessen 2026-09-10.
*
* Vier Spalten statt drei (Arthur: „die Fotos springen einem zu sehr ins Gesicht"). Bei
* gleicher Seitenbreite schrumpft jede Kachel um ein Viertel. Im Shop bleiben es drei: dort
* sind die Kacheln die Hauptsache, auf der Startseite sind sie ein Ausschnitt.
*/
/* `minmax(0, 1fr)` statt `1fr`: Begründung bei `ul.products` in woocommerce.css (Safari). */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); list-style: none; margin: 0; padding: 0; }
/*
* Kacheltitel: EINE Regel für Startseite und Shop (Arthur 2026-09-14). Vorher stand der Shop
* eine Stufe größer (`--fs-h3`, als
mit enger Display-Laufweite) — zu groß für eine
* Kachel. Maßstab ist jetzt „Unsere Lieblinge". Gilt auch für „Ähnliche Produkte", die
* dieselbe Kachel benutzen (woocommerce/content-product.php).
*/
.product-card h3,
.product-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: var(--fs-lead);
line-height: 1.3;
letter-spacing: 0;
margin: 0 0 var(--space-micro);
}
.product-card { text-decoration: none; display: block; min-width: 0; }
/*
* Zur Vorgeschichte der Kachelfläche (2026-09-09): Ein erster Versuch legte eine **rosa
* Fläche mit Polsterung** unter die Fotos. Das machte es schlechter — die Produktfotos haben
* selbst weiße Hintergründe, also stand ein weißes Rechteck auf Rosa. Seitdem füllt das Foto
* die Kachel ganz aus (`cover`, keine Polsterung); die Originale sind fast durchweg
* quadratisch, es wird praktisch nichts beschnitten. Das gilt weiter.
*
* **Neu 2026-09-10:** ein feiner Strichrahmen in `--line-photo` (siehe `.photo-frame`).
* Das ist kein Widerspruch zur damaligen Entscheidung — die galt der Fläche, nicht der
* Linie. Der Rahmen grenzt das Weiß der Fotos gegen den rosa Grund ab, ohne Polsterung
* dazwischen.
*/
.product-card-media {
aspect-ratio: 1;
/* Sonst reicht Safari die Eigengröße des Fotos als Mindestbreite an die Spalte weiter. */
min-width: 0;
overflow: hidden;
margin-bottom: var(--space-2);
position: relative;
}
.product-card-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.product-card:hover .product-card-media img { transform: scale(1.06); }
.product-card h3 { margin-bottom: var(--space-micro); }
.product-card .price { font-size: var(--fs-body); color: var(--muted); }
.product-card .price del { opacity: .7; margin-right: .4em; }
.product-card .price ins { text-decoration: none; color: var(--accent-ink); font-weight: 500; }
/* ---------- Fuss ---------- */
/*
* Fuss nach dem Vorbild von schlossbuendorf.de (Arthur 2026-09-10).
*
* Zwei Dinge waren vorher falsch:
* 1. **Die Hierarchie stand auf dem Kopf.** Die Spaltenueberschriften waren kleiner UND
* blasser als die Links darunter. Bei Buendorf ist es umgekehrt: Ueberschrift klein,
* aber dunkel und kraeftig; die Links darunter groesser, aber ruhiger im Ton.
* 2. **Zu viel Luft.** Buendorfs Fuss ist deutlich enger gesetzt. Zeilenhoehe runter,
* Innenabstand runter, und der Tagline-Absatz ist ganz entfallen — er war der
* Hauptgrund, warum unserer auseinanderlief.
*/
.site-footer {
background: var(--bg-deep);
border-top: 1px solid var(--line);
padding: var(--space-6) 0 var(--space-4);
}
/* Markenspalte links, daneben vier gleich breite Link-Spalten. */
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-5); }
.site-footer h2 {
font-family: var(--sans);
font-size: var(--fs-micro);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--primary);
margin: 0 0 var(--space-2);
font-weight: 500;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); line-height: 1.9; }
.site-footer li { color: var(--muted); }
.site-footer a { text-decoration: none; color: var(--muted); }
/* Nicht --accent-ink: der erreicht auf dem Fußgrund nur 4,14:1. --accent-hover: 4,94:1. */
.site-footer a:hover { color: var(--accent-hover); }
/* Der Schriftzug steht vertikal mittig zu den Spalten, wie das Logo bei Bündorf. */
.footer-brand { display: flex; align-items: center; }
.footer-mark { color: var(--primary); }
/*
* Die Kontaktzeilen teilen sich das Markup mit der Kontaktseite. Dort tragen sie einen
* eigenen Zeilenabstand; im Fuß muss er weg, sonst steht die Spalte lockerer als ihre
* Nachbarn und die vier Spalten laufen optisch auseinander.
*/
.site-footer .contact-lines { margin: 0; }
.site-footer .contact-lines li { margin-bottom: 0; }
.footer-bottom {
margin-top: var(--space-5); padding-top: var(--space-3);
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-small); color: var(--muted);
gap: var(--space-3); flex-wrap: wrap;
}
/* Rechtstexte in der Fußleiste, waagerecht nebeneinander. */
.footer-legal ul {
display: flex; gap: var(--space-3); flex-wrap: wrap;
font-size: var(--fs-small); line-height: 1.6;
}
/* ---------- Statische Seiten ---------- */
/*
* EU-Gewährleistungsmitteilung als Abbildung (Seite /gewaehrleistung/ und Kasse). Nur
* proportional skaliert — kein Zuschnitt, kein Filter, keine Deckkraft (Auftrag G10).
*/
.gewaehr-mitteilung { margin: var(--space-4) 0 0; }
.gewaehr-mitteilung img { display: block; width: 100%; height: auto; }
.gewaehr-mitteilung figcaption {
display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
margin-top: var(--space-1); font-size: var(--fs-small);
}
.gewaehr-mitteilung figcaption a { color: var(--accent-ink); }
/*
* EIN Abstand für die Seitenüberschrift, überall gleich (Arthur 2026-09-09).
* Vorher: statische Seiten 72 px, Shop 64 px, Produktseite wieder anders — man sah es
* beim Wechsel zwischen den Seiten springen.
*/
/*
* NUR senkrecht polstern. Die Kurzform `padding: X 0 Y` löscht die seitliche Polsterung
* aus `.wrap` — dann klebt die Überschrift am linken Rand. Das ist mir in dieser Datei
* jetzt zweimal passiert (2026-09-09), einmal hier und einmal bei `.entry-content`.
*/
/*
* Unten 0 (2026-09-15): Den Abstand unter der Überschrift gibt der kurze Strich vor
* (`.titel-strich`, `--space-4`), auf JEDER Seite gleich — Arthur: „wenn die Überschrift mit
* dem Unterstrich, dann überall so". Vorher addierten sich hier `--space-2`, der Rand der
*
und die obere Polsterung von `.entry-content` zu rund 80 px.
*/
.page-header,
.store-head { padding-block: var(--space-4) 0; }
/*
* Seitenüberschriften links (Arthur 2026-09-15), bündig mit dem Inhalt darunter.
*
* Vom 2026-09-10 bis heute standen sie mittig. Der Grund damals: Wortmarke und Überschrift
* standen als zwei fast gleiche Blöcke an derselben Kante. Das ist erledigt, seit die
* Wortmarke kleiner ist. Deshalb braucht es hier keine Regel mehr, links ist der Normalfall.
*
* Damit rechts neben der Überschrift kein leerer Streifen bleibt, bringt jede Seite etwas mit:
* - Shop: Anzahl und Sortierung in derselben Zeile (woocommerce/archive-product.php)
* - /about-us/ und /kontakt/: die Überschrift steht in einer Spalte, gegenüber Porträt bzw.
* Formular (page-about-us.php, page-kontakt.php), ohne `.page-header`
* - Textseiten: Kopf und Inhalt in derselben schmalen Spalte (`.narrow`, page.php)
*/
/*
* Nur senkrechte Polsterung setzen. Die Kurzform `padding: 34px 0 96px` loeschte die
* seitliche Polsterung aus `.narrow`/`.wrap`, weil sie spaeter in der Datei steht —
* der Inhalt klebte auf allen Seiten am linken Rand (gesehen 2026-09-09).
*/
.entry-content { padding-block: var(--space-4) var(--space-7); }
.page-header + .entry-content { padding-top: 0; }
/*
* ---------- Breitenregel, gilt fuer alle Seiten (Arthur 2026-09-10) ----------
*
* `.wrap` (1460 px + Polsterung) ist die **eine** Aussenkante der Seite. Startseite, Shop
* und Kategorien halten sie schon; hier ziehen die statischen Seiten nach, damit der Rand
* links und rechts ueberall gleich ist.
*
* Innen wird unterschieden, und das ist der Punkt:
* - **Layout-Bloecke** (Bild-Text-Raster, Baender) nehmen die volle Breite, etwa
* /about-us/ (`page-about-us.php` setzt `.about wrap`).
* - **Fliesstext** behaelt seine Lesebreite: die Spalte (`.narrow`) steht mittig, die
* Ueberschrift links darin. Eine Textzeile ueber 1400 px waere unlesbar; „volle Breite"
* heisst volle Breite fuer das Layout, nicht fuer den Satzspiegel.
*/
.entry-content h2 { margin: 1.6em 0 .5em; }
.entry-content h3 { margin: 1.6em 0 .4em; }
.entry-content ul, .entry-content ol { max-width: 62ch; }
/*
* `:not(.btn)` (2026-09-14): `.entry-content a` wiegt schwerer als `.btn` und färbte die
* Knopfschrift koralle — auf dem korallenen Knopf „Kontakt aufnehmen" (/about-us/) stand
* damit unsichtbare Schrift. Knöpfe bringen ihre Farben selbst mit.
*/
.entry-content a:not(.btn) { color: var(--accent-ink); }
/*
* Rechtstexte: eine eigene, kleinere Überschriftenstufe (2026-09-14).
*
* Mit der normalen Stufe stand „Widerrufsrecht" als
fast so groß wie die
darüber,
* und die Datenschutzerklärung mit 13 Abschnitten wurde zur Treppe. Hier gliedern die
* Überschriften ein Dokument, sie eröffnen keine Abschnitte einer Seite — also Kachelgröße
* für
, Fließtextgröße in der Grundschrift für
. Startseite und /about-us/ behalten
* ihre Stufen. Welche Seiten gemeint sind: `labaronne_body_class_rechtstext()`.
*/
.is-rechtstext .entry-content h2 { font-size: var(--fs-h3); margin: 2.2em 0 .5em; }
.is-rechtstext .entry-content h3 {
font-family: var(--sans); font-size: var(--fs-body); font-weight: 500;
margin: 1.6em 0 .3em;
}
.is-rechtstext .entry-content > :first-child { margin-top: 0; }
/* ---------- Schmale Viewports ---------- */
@media (max-width: 980px) {
/* `padding-block`, nicht die Kurzform — siehe Begründung oben bei `.section`. */
.section { padding-block: var(--space-6); }
.dive { grid-template-columns: 1fr; gap: var(--space-4); }
/* Einspaltig immer Bild oben, Text darunter — die Spiegelung ergibt hier keinen Sinn. */
.dive.is-flipped img { order: 0; }
.mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
.mosaic a:first-child { grid-row: span 1; grid-column: span 2; }
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-cols { grid-template-columns: 1fr 1fr; }
/* Zweizeilige Kopfzeile (Wortmarke/Menü, darunter Konto/Warenkorb) — hero.js misst nach. */
:root { --kopf-hoehe: 127px; }
/*
* Navigation klappt auf — ohne JS, über ein verstecktes Kontrollkästchen.
*
* Als Raster mit benannten Flächen, nicht als Flexbox (2026-09-14): `.nav` ist seit dem
* Desktop-Umbau ein Grid, und die alten Flex-Regeln (`flex-wrap`, `flex-basis: 100%`)
* wirkten darin nicht mehr. Folge bei 390 px: alle drei Bereiche in einer Zeile, der
* rechte ragte 15 px hinaus und machte die GANZE Seite breiter als den Bildschirm —
* samt Cookie-Banner. Gemessen mit `scripts/mobil-pruefen.mjs`.
*
* Zeile 1: Wortmarke links, Menü-Schalter rechts. Zeile 2: Instagram, Konto, Warenkorb.
* Zeile 3: das aufgeklappte Menü über die volle Breite.
*/
.nav {
grid-template-columns: 1fr auto;
grid-template-areas: "mark schalter" "util util" "menue menue";
column-gap: var(--space-3);
row-gap: var(--space-2);
padding-bottom: var(--space-2);
}
.mark { grid-area: mark; }
.nav-toggle-label {
grid-area: schalter;
display: block; cursor: pointer;
font-size: var(--fs-small); letter-spacing: var(--track-label); text-transform: uppercase;
padding: var(--space-1) 0; border-bottom: 1px solid var(--primary);
}
.nav-main {
grid-area: menue; justify-self: stretch;
display: none; flex-direction: column; gap: var(--space-micro);
text-align: center; padding-bottom: var(--space-1);
}
.nav-toggle:checked ~ .nav-main { display: flex; }
.nav-util { grid-area: util; justify-self: center; align-items: center; }
}
@media (max-width: 560px) {
/*
* Zwei Spalten auch auf dem Handy (2026-09-14). Einspaltig war jede Kachel 345 px hoch —
* vier Lieblinge füllten fast drei Bildschirme. Zwei nebeneinander ist das, was man in
* jedem Shop erwartet; die Lücke dazwischen wird dafür schmaler.
*/
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); }
/*
* Wechsel-Striche unter den Knopf (2026-09-15, Arthur: der Knopf „geht in die vier kleinen
* Dinger rein"). Beide standen 64 px über dem unteren Rand, die Striche rechts. Ein langer
* Knopf wie „Manschettenknöpfe ansehen" (292 px) lief bei 390 px Breite in sie hinein.
*/
.hero-dots { bottom: var(--space-3); }
/*
* Nur der erste Satz der Hero-Beschreibung (Arthur 2026-09-15: die Überschrift lief in die
* Manschette). „Von Hand gefertigt, in vielen Farben." fällt weg, alles rückt eine Zeile
* tiefer. Geteilt wird in hero.php (labaronne_erster_satz()).
*/
.hero-mehr { display: none; }
.footer-cols { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* ---------- Bewegung zurueckhalten ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
html { scroll-behavior: auto; }
}
/* Eingebettete Karte: gleiche Kante wie alles andere, keine Iframe-Umrandung. */
.entry-content iframe {
width: 100%;
border: 1px solid var(--line);
display: block;
}
/* ---------- Suchformular ---------- */
/* 404-Seite: „Zum Shop" stand direkt unter der Suchzeile (gesehen 2026-09-14, mobil). */
.search-form + p { margin-top: var(--space-4); }
/*
* WordPress' Standardformular (404-Seite, Suchergebnisse) kam bisher ungestylt durch: graues
* Kaestchen, Systemschrift, Standardknopf. Dieselbe Sprache wie die uebrigen Felder — ohne
* eigene searchform.php, das waere ein Template fuer zwei Zeilen CSS.
*/
.search-form {
display: flex;
gap: var(--space-2);
max-width: 460px;
align-items: stretch;
}
.search-form label { flex: 1; display: block; }
.search-form .search-field {
width: 100%;
height: var(--control-h);
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 300;
color: var(--primary);
background: var(--surface);
border: 1px solid var(--line-control);
border-radius: 0;
padding: 0 var(--space-2);
}
.search-form .search-field::placeholder { color: var(--muted); opacity: 1; }
.search-form .search-field:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.search-form .search-submit {
height: var(--control-h);
padding: 0 var(--space-3);
background: var(--accent-ink);
color: var(--on-dark);
border: 1px solid var(--accent-ink);
border-radius: 0;
font-family: var(--sans);
font-size: var(--fs-small);
letter-spacing: var(--track-label);
text-transform: uppercase;
cursor: pointer;
transition: background .25s, border-color .25s;
}
.search-form .search-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* ---------- Einwilligungsbanner ---------- */
/*
* Unten angedockt, nicht als Vollbild-Sperre. Es verdeckt bewusst **keine** Footer-Links:
* „Vertrag widerrufen" und das Impressum müssen erreichbar bleiben (R18), auch während das
* Banner steht. Deshalb bleibt die Seite scrollbar und das Banner nimmt nur so viel Höhe,
* wie es braucht.
*/
.consent {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background: var(--surface);
border-top: 1px solid var(--line-control);
box-shadow: 0 -8px 32px rgba(26,28,24,.10);
max-height: 85vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.consent-box { padding-block: var(--space-4); }
.consent h2 { font-size: var(--fs-h2-sm); margin-bottom: var(--space-2); }
.consent p { color: var(--muted); max-width: 78ch; }
.consent a { color: var(--accent-ink); }
.consent-details { margin: var(--space-3) 0; }
.consent-details summary {
cursor: pointer;
font-size: var(--fs-small);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--accent-ink);
padding: var(--space-1) 0;
}
/*
* Unten genauso viel Luft wie oben. Ohne die untere Hälfte stösst die letzte Dienst-Zeile
* direkt an die Trennlinie der nächsten Gruppe, und die Zeilen lesen sich als eine lange
* Liste statt als drei Gruppen.
*/
.consent-gruppe {
border: 0;
border-top: 1px solid var(--line);
margin: 0;
padding: var(--space-3) 0;
}
/*
* `float: left; width: 100%` macht aus dem