…
Sieben Welten stehen bereit. Sind alle vergeben, faengt man
wieder vorne an.
Ohne JavaScript: die Eintraege sind Beschriftungen zu
unsichtbaren Auswahlfeldern. Geht mit der Tastatur (Tabulator
hinein, dann Pfeiltasten) und wird von Vorlesehilfen als
Auswahlgruppe angesagt.
------------------------------------------------------------ */
/* ---- Maße --------------------------------------------------
Der aktive Reiter ist hoeher als die inaktiven und schiebt
sich nach rechts ueber die Kante der Tafel — deshalb die
negativen Aussenabstaende und der z-index unten.
------------------------------------------------------------ */
/* Dieser Abschnitt darf breiter sein als der uebrige Inhalt */
.innen--breit {
max-width: 1660px; /* 1660 px */
padding-left: clamp(1.25rem, 3vw, 2.5rem);
padding-right: clamp(1.25rem, 3vw, 2.5rem);
}
.reiter {
border: 0;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(8.5rem, 11.5rem) minmax(0, 1fr);
gap: 0;
align-items: start;
}
.reiter > legend { padding: 0; }
.reiter__liste {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 2; /* liegt ueber der Tafel */
padding-top: 2.5rem;
}
.reiter__liste > li { margin-bottom: .3rem; }
.reiter input {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.reiter__name {
display: flex;
align-items: center;
gap: .6rem;
padding: .8rem 1rem .8rem .2rem;
border-radius: var(--radius);
color: var(--text);
font-size: 1rem;
line-height: 1.3;
cursor: pointer;
user-select: none;
}
/* Das Winkelzeichen vor dem Namen */
.reiter__name::before {
content: "";
flex: 0 0 auto;
width: .38em; height: .38em;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
opacity: .5;
}
.reiter__name:hover { color: var(--gruen); }
.reiter input:focus-visible + .reiter__name { outline: 3px solid var(--gruen); outline-offset: 2px; }
/* Der aktive Reiter: groesser, gepolstert — und er ragt nach
rechts ueber die Kante der Tafel. */
.reiter input:checked + .reiter__name {
padding: 1.05rem 1.4rem 1.05rem 1.15rem;
margin-right: -3.5rem;
font-size: 1.05rem;
}
.reiter input:checked + .reiter__name::before { opacity: 1; }
/* Die Tafeln: alle im Quelltext, nur eine sichtbar. */
.reiter__tafel {
display: none;
border-radius: 20px;
overflow: hidden;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: stretch;
min-height: 19rem;
}
/* Der Inhalt braucht links Platz, weil der Reiter hineinragt */
.reiter__inhalt {
padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 6vw, 5.5rem);
align-self: center;
}
.reiter__inhalt h3 { margin: 0 0 .5em; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; }
.reiter__inhalt p { max-width: 28em; }
.reiter__inhalt .knopf { margin-top: 1.4rem; }
/* Alle Reiter im selben Querformat. Sonst bestimmt jedes Foto seine
eigene Hoehe, und die Tafel springt beim Umschalten. 3:2 haelt sie
ausserdem niedriger als die quadratischen Originale; zugeschnitten
wird mittig. Auf dem Telefon gilt weiter 16:9 (siehe unten). */
.reiter__bild { line-height: 0; aspect-ratio: 3 / 2; }
/* Das Bild ragt an jeder Seite 1 px ueber und wird von der Tafel
abgeschnitten. Sonst mischt der Browser an der Kante — die Breite
ist fast nie ein ganzer Pixelwert — das Bild mit dem Tafelgrund
darunter, und bei hellen Fotos auf brauner Tafel steht rechts eine
feine dunkle Linie, die der runden Ecke folgt. */
.reiter__bild img {
width: calc(100% + 2px);
height: calc(100% + 2px);
margin: -1px;
max-width: none;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.reiter { grid-template-columns: 1fr; }
.reiter__liste { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 0; margin-bottom: 1.2rem; }
.reiter__liste > li { margin: 0; }
.reiter__name { padding: .65rem 1rem; background: var(--mintweiss); font-size: .95rem; }
.reiter input:checked + .reiter__name { margin-right: 0; padding: .65rem 1.1rem; font-size: .95rem; }
.reiter__tafel { grid-template-columns: 1fr; min-height: 0; }
.reiter__inhalt { padding: clamp(1.5rem, 4vw, 2.5rem); }
.reiter__bild { order: -1; aspect-ratio: 16/9; }
}
/* ---- Die Farbwelten ----------------------------------------
Jede Zeile ist nachgerechnet (noetig: 4,5:1).
------------------------------------------------------------ */
/* 1 — Dunkel: dunkler Reiter, sehr helle Tafel */
li.welt--dunkel input:checked + .reiter__name { background: var(--dunkel); color: var(--mint); }
.reiter__tafel.welt--dunkel { background: var(--mintweiss); color: var(--text); }
.reiter__tafel.welt--dunkel h3 { color: var(--gruen); }
.reiter__tafel.welt--dunkel .knopf { background: var(--dunkel); color: var(--weiss); }
/* 2 — Braun: minzfarbener Reiter, braune Tafel */
li.welt--braun input:checked + .reiter__name { background: var(--mint); color: var(--braun); }
.reiter__tafel.welt--braun { background: var(--braun); color: rgba(255,255,255,.88); }
.reiter__tafel.welt--braun h3 { color: var(--mint); }
.reiter__tafel.welt--braun .knopf { background: var(--mint); color: var(--braun); }
/* 3 — Sand: sandfarbener Reiter, dunkle Tafel */
li.welt--sand input:checked + .reiter__name { background: var(--sand); color: var(--orange-dunkel); }
.reiter__tafel.welt--sand { background: var(--dunkel); color: rgba(241,249,246,.85); }
.reiter__tafel.welt--sand h3 { color: var(--mint); }
.reiter__tafel.welt--sand .knopf { background: var(--sand); color: var(--orange-dunkel); }
/* 4 — Orange: oranger Reiter, sandfarbene Tafel */
li.welt--orange input:checked + .reiter__name { background: var(--orange); color: var(--weiss); }
.reiter__tafel.welt--orange { background: var(--sand); color: var(--text); }
.reiter__tafel.welt--orange h3 { color: var(--dunkel); }
.reiter__tafel.welt--orange .knopf { background: var(--orange); color: var(--weiss); }
/* 7 — Blau: helle Reiter, dunkelblaue Tafel — nur Hydroponik */
li.welt--blau input:checked + .reiter__name { background: var(--blau-hell); color: var(--blau); }
.reiter__tafel.welt--blau { background: var(--blau); color: rgba(255,255,255,.88); }
.reiter__tafel.welt--blau h3 { color: var(--blau-hell); }
.reiter__tafel.welt--blau .knopf { background: var(--blau-hell); color: var(--blau); }
/* 6 — Gold: brauner Reiter, Tafel im warmen Verlauf */
li.welt--gold input:checked + .reiter__name { background: var(--braun); color: var(--gold); }
.reiter__tafel.welt--gold { background: var(--verlauf-gold); color: var(--text); }
.reiter__tafel.welt--gold h3 { color: var(--gruen); }
.reiter__tafel.welt--gold .knopf { background: var(--braun); color: var(--weiss); }
/* 5 — Himmel: dunkler Reiter, hellblaue Tafel */
li.welt--himmel input:checked + .reiter__name { background: var(--dunkel); color: var(--weiss); }
.reiter__tafel.welt--himmel { background: var(--himmel); color: var(--text); }
.reiter__tafel.welt--himmel h3 { color: var(--dunkel); }
.reiter__tafel.welt--himmel .knopf { background: var(--dunkel); color: var(--weiss); }
/* ---- Umschaltung ------------------------------------------
Ohne Auswahl steht die erste Tafel offen. Danach zeigt der
n-te Reiter die n-te Tafel — bewusst allgemein, damit keine
Seite eigene CSS-Regeln braucht. Reicht fuer acht Eintraege. */
.reiter__tafel:first-child { display: grid; }
.reiter:has(input:checked) .reiter__tafel { display: none; }
.reiter:has(.reiter__liste > li:nth-child(1) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(1),
.reiter:has(.reiter__liste > li:nth-child(2) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(2),
.reiter:has(.reiter__liste > li:nth-child(3) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(3),
.reiter:has(.reiter__liste > li:nth-child(4) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(4),
.reiter:has(.reiter__liste > li:nth-child(5) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(5),
.reiter:has(.reiter__liste > li:nth-child(6) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(6),
.reiter:has(.reiter__liste > li:nth-child(7) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(7),
.reiter:has(.reiter__liste > li:nth-child(8) input:checked) .reiter__tafeln > .reiter__tafel:nth-child(8) {
display: grid;
}
/* Browser ohne :has() zeigen alle Tafeln untereinander statt
einer — unschoen, aber vollstaendig lesbar. */
@supports not selector(:has(*)) {
.reiter { grid-template-columns: 1fr; }
.reiter__liste { display: none; }
.reiter__tafel { display: grid; margin-bottom: 1.2rem; }
}
/* -- 8.13 HERO ALS BAND
Bild über die volle Breite, Text in einem Glaskasten darüber:
eine getönte, unscharf gerechnete Fläche direkt unter dem
Text (50 % Deckkraft, damit die Schrift auf jedem Foto
lesbar bleibt).
------------------------------------------------------------ */
.hero--band { position: relative; padding: 0; background: var(--dunkel); }
.hero--band .hero__innen { display: block; }
.hero--band .hero__bildrahmen { display: block; }
.hero--band .hero__bild {
width: 100%;
aspect-ratio: 21 / 9;
max-height: 60vh;
border-radius: 0;
object-fit: cover;
}
/* Der Kasten sitzt unten im Bild, im Raster der Seite */
.hero--band .hero__text {
position: absolute;
inset: auto 0 0 0;
max-width: 1660px;
margin: 0 auto;
padding: 0 var(--rand) clamp(1.5rem, 4vw, 3rem);
z-index: 2;
}
.hero--band .hero__glas {
max-width: 34rem;
padding: clamp(1.4rem, 3vw, 2rem);
border-radius: 8px;
background: rgba(44, 54, 24, .5);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
}
/* Browser ohne Unschärfe-Rechnung bekommen eine kräftigere
Tönung — sonst wäre die Schrift dort schlechter lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hero--band .hero__glas { background: rgba(44, 54, 24, .84); }
}
.hero--band h1, .hero--band h2 { color: var(--weiss); margin-bottom: .35em; }
.hero--band .hero__vorspann { color: rgba(255,255,255,.92); max-width: none; }
@media (max-width: 800px) {
.hero--band .hero__bild { aspect-ratio: 4 / 3; }
.hero--band .hero__glas { max-width: none; }
}
/* -- 8.13b PRODUKT-HERO MIT VERLAUF
Farbverlauf als Fläche, Text links, freigestelltes Produkt
rechts. Braucht ein freigestelltes Produktfoto, sonst bricht
der Verlauf am Bildrand ab.
------------------------------------------------------------ */
.produkt-hero {
padding: 0;
background: linear-gradient(135deg, var(--dunkel) 0%, var(--gruen) 45%, var(--oliv-hell) 100%);
color: var(--weiss);
overflow: hidden;
}
.produkt-hero__innen {
display: grid;
grid-template-columns: minmax(0, var(--anteil-text, 1fr)) minmax(0, var(--anteil-bild, 1fr));
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
min-height: 26rem;
}
.produkt-hero__text { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.produkt-hero__pfad {
font-size: .9rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
margin: 0 0 1.2rem;
}
.produkt-hero h1,
.produkt-hero h2 {
color: var(--weiss);
margin: 0 0 .5em;
}
/* Die feine Linie unter dem Produktnamen */
.produkt-hero__strich {
border: 0;
border-top: 1px solid rgba(255,255,255,.35);
margin: 1.5rem 0 2rem;
max-width: 32rem;
}
.produkt-hero__satz {
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
line-height: 1.3;
color: var(--weiss);
margin: 0 0 1.2rem;
max-width: 22em;
}
.produkt-hero p { color: rgba(255,255,255,.88); max-width: 30em; }
.produkt-hero__bild { align-self: end; line-height: 0; }
.produkt-hero__bild img { width: 100%; height: auto; display: block; }
@media (max-width: 800px) {
.produkt-hero__innen { grid-template-columns: 1fr; min-height: 0; }
.produkt-hero__text { padding-bottom: 1rem; }
}
/* -- 8.14 SPLITSCHIRM
Zwei Hälften über die volle Fensterbreite: eine farbige mit
Text, eine mit Bild. Anders als „Text und Bild nebeneinander"
läuft hier nichts im Raster — die Farbfläche geht bis an den
Fensterrand.
Die Farbwelten aus 8.11 gelten auch hier:
-- */
.split {
padding: 0;
display: grid;
grid-template-columns: var(--anteil-text, 1fr) var(--anteil-bild, 1fr);
align-items: stretch;
}
.split__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
}
.split__text > * { max-width: 34rem; }
.split__bild { line-height: 0; } /* randlos: keine Rundung */
.split__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gedreht: Bild links, Text rechts — die Breiten wandern mit. */
.split--gedreht { grid-template-columns: var(--anteil-bild, 1fr) var(--anteil-text, 1fr); }
.split--gedreht .split__text { order: 2; }
/* Farbwelten — dieselben Paare wie bei den Reitern */
.split.welt--dunkel { background: var(--mintweiss); }
.split.welt--dunkel h2 { color: var(--gruen); }
.split.welt--braun { background: var(--braun); color: rgba(255,255,255,.88); }
.split.welt--braun h2, .split.welt--braun .ueberzeile { color: var(--mint); }
.split.welt--sand { background: var(--dunkel); color: rgba(241,249,246,.85); }
.split.welt--sand h2, .split.welt--sand .ueberzeile { color: var(--mint); }
.split.welt--orange { background: var(--sand); }
.split.welt--orange h2 { color: var(--dunkel); }
.split.welt--himmel { background: var(--himmel); }
.split.welt--himmel h2 { color: var(--dunkel); }
.split.welt--blau { background: var(--blau); color: rgba(255,255,255,.88); }
.split.welt--blau h2, .split.welt--blau .ueberzeile { color: var(--blau-hell); }
.split.welt--gold { background: var(--verlauf-gold); }
.split.welt--gold h2 { color: var(--gruen); }
.split.welt--braun .knopf { background: var(--mint); color: var(--braun); }
.split.welt--sand .knopf { background: var(--sand); color: var(--orange-dunkel); }
.split.welt--gold .knopf { background: var(--braun); color: var(--weiss); }
.split.welt--blau .knopf { background: var(--blau-hell); color: var(--blau); }
@media (max-width: 800px) {
.split { grid-template-columns: 1fr; }
.split--gedreht .split__text { order: 0; }
.split__bild { aspect-ratio: 16 / 9; }
}
/* -- 8.15 MUSTERSEITE
Nur für die Seite „Elemente". Die Bausteine stehen dort so da,
wie sie auf einer echten Seite aussehen — kein Rahmen, keine
Kästchen drumherum. Getrennt werden sie durch eine feine Linie
und eine kleine Zeile mit Name und Zweck.
------------------------------------------------------------ */
.baustein { padding: 0; border-top: 1px solid var(--linienfarbe); }
.baustein:first-of-type { border-top: 0; }
.baustein__kopf {
max-width: 1660px;
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4rem) var(--rand) clamp(1.5rem, 3vw, 2.5rem);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.baustein__kopf h2 {
margin: 0;
font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem);
letter-spacing: -.015em;
}
.baustein__zweck {
margin: .35rem 0 0;
color: var(--text-leise);
font-size: .95rem;
max-width: 42em;
flex: 1 1 20rem;
}
.baustein__name {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: .8rem;
color: var(--gruen);
background: var(--mint);
padding: .3rem .7rem;
border-radius: 999px;
white-space: nowrap;
flex: 0 0 auto;
}
/* Der Quelltext sitzt unauffällig unter dem Beispiel */
.baustein__quelltext {
max-width: 1660px;
margin: 0 auto;
padding: 1rem var(--rand) clamp(2.5rem, 5vw, 4rem);
}
.baustein__quelltext > summary {
cursor: pointer;
font-size: .85rem;
color: var(--text-leise);
list-style: none;
padding: .4rem 0;
display: inline-block;
}
.baustein__quelltext > summary::-webkit-details-marker { display: none; }
.baustein__quelltext > summary::before { content: "▸ "; }
.baustein__quelltext[open] > summary::before { content: "▾ "; }
.baustein__quelltext > summary:hover { color: var(--gruen); }
.baustein__quelltext pre {
margin: .5rem 0 0;
padding: 1.2rem 1.4rem;
background: var(--dunkel);
color: #CEE9DF;
border-radius: 14px;
overflow-x: auto;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: .8rem;
line-height: 1.6;
tab-size: 2;
}
/* Farbmuster */
.farben {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.farbe { margin: 0; border-radius: 14px; overflow: hidden; background: var(--mintweiss); }
.farbe__flaeche { height: 6rem; }
.farbe__text { padding: .85rem 1rem 1.1rem; font-size: .82rem; color: var(--text-leise); }
.farbe__text strong { display: block; font-size: 1rem; color: var(--dunkel); margin-bottom: .15rem; }
.farbe__text code { font-family: ui-monospace, Consolas, monospace; }
/* -- 8.16 HERO, ZENTRIERT
Große Überschrift mittig, darunter ein Satz und ein Knopf.
------------------------------------------------------------ */
.hero--mitte {
padding: clamp(4rem, 9vw, 8rem) 0;
text-align: center;
background: var(--weiss);
}
.hero--mitte .innen { max-width: 60rem; }
.hero--mitte h1 { color: var(--gruen); margin-bottom: .4em; }
.hero--mitte .ueberzeile { margin-bottom: 1.2em; }
.hero--mitte p {
font-size: 1.125rem;
line-height: 1.5;
color: var(--text-leise);
max-width: 34em;
margin-inline: auto;
}
.hero--mitte .knopf { margin-top: 2rem; }
/* -- 8.17 MERKMALSRASTER
Links die Überschrift, rechts zwei Spalten mit Symbol,
Zwischenüberschrift und kurzem Text.
Die Symbole sind schlichte Strichzeichnungen und erben ihre
Farbe vom Text.
------------------------------------------------------------ */
.raster { background: var(--mintweiss); }
.raster__innen {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.raster__kopf h2 { margin: 0; }
.raster__kopf p:not(.ueberzeile) { margin: 1.2rem 0 0; color: var(--text); }
.raster__kopf .ueberzeile { margin-bottom: 1em; }
/* Die Plätze im Raster stehen fest, damit die Fußnote unter den
Merkmalen landet und nicht unter der Überschrift. */
.raster__kopf { grid-column: 1; grid-row: 1; }
.raster__liste { grid-column: 2; grid-row: 1; }
/* Gedreht: die Merkmale links, der Text rechts. Die Reihenfolge
im Quelltext bleibt gleich — eine Vorlesehilfe bekommt also
weiter zuerst die Überschrift, dann die Merkmale. */
.raster--gedreht .raster__innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.raster--gedreht .raster__kopf { grid-column: 2; }
.raster--gedreht .raster__liste { grid-column: 1; }
/* Fußnote unter den Merkmalen, z. B. für das Sternchen an den
Elementen, die als Chelat gebunden sind. */
.raster__fussnote {
grid-column: 2;
grid-row: 2;
margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
font-size: .85rem;
line-height: 1.45;
color: var(--text-leise);
}
.raster--gedreht .raster__fussnote { grid-column: 1; }
.raster__punkt h3 sup { font-size: .7em; line-height: 0; }
.raster__liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: clamp(1.75rem, 3.5vw, 3rem);
list-style: none;
margin: 0;
padding: 0;
}
.raster__punkt { margin: 0; }
.raster__symbol {
display: block;
width: 1.75rem;
height: 1.75rem;
margin-bottom: 1.1rem;
color: var(--gruen);
}
.raster__punkt h3 {
margin: 0 0 .5em;
font-size: 1.5rem; /* 28 px */
line-height: 1.15;
color: var(--dunkel);
}
.raster__punkt p {
margin: 0;
font-size: 1rem;
line-height: 1.45;
color: var(--text-leise);
}
@media (max-width: 800px) {
.raster__innen,
.raster--gedreht .raster__innen { grid-template-columns: 1fr; }
/* Untereinander gilt wieder die Reihenfolge aus dem Quelltext. */
.raster__kopf, .raster__liste, .raster__fussnote,
.raster--gedreht .raster__kopf,
.raster--gedreht .raster__liste,
.raster--gedreht .raster__fussnote { grid-column: auto; grid-row: auto; }
}
/* -- 8.17b MERKMALSRASTER IN DER ERDWELT
Symbole in Orange, Zwischenueberschriften in Braun.
Orange #8F4A0A auf Mintweiss #FAF7F1 6,4:1
Braun #573F2A auf Mintweiss 9,2:1 */
.raster.welt--erde .raster__symbol { color: var(--orange); }
.raster.welt--erde .raster__punkt h3 { color: var(--braun); }
/* -- 8.17c FARBWELT BLAU · HYDROPONIK
Blau ist bei Blusana dem Thema Hydroponik vorbehalten. Gesetzt
wird es mit welt--wasser an den Baendern, am Merkmalsraster
und am FAQ.
Das dunkle Blau traegt jede Schrift (11,9:1 auf Mintweiss),
das mittlere Blau nur Symbole und Haken (4,3:1 — Grafik, dafuer
genuegen 3:1). Die Naehrstoffkarten bleiben ausgenommen: ihre
Farben stehen fuer N, P und K, nicht fuer das Thema. */
.band--blau-hell { background: var(--blau-hell); }
.band.welt--wasser h2 { color: var(--blau); }
.band.welt--wasser h3:not(.naehrkarte__titel) { color: var(--blau); }
.band.welt--wasser .merkmale li::before {
border-right-color: var(--blau-mittel);
border-bottom-color: var(--blau-mittel);
}
/* Der gefuellte Knopf erbt sonst das Gruen aus 8.6 und faellt
in der Wasserwelt aus der Farbfamilie. */
.band.welt--wasser .knopf { background: var(--blau); color: var(--weiss); }
.band.welt--wasser .knopf:hover,
.band.welt--wasser .knopf:focus-visible { background: var(--blau-mittel); color: var(--weiss); }
.band.welt--wasser .knopf--umriss { background: transparent; color: var(--blau); border-color: var(--blau); }
.band.welt--wasser .knopf--umriss:hover { background: var(--blau); color: var(--weiss); }
.raster.welt--wasser .raster__symbol { color: var(--blau-mittel); }
.faq.welt--wasser .faq__frage > summary { color: var(--blau); }
.faq.welt--wasser .faq__frage[open] { border-color: var(--blau); }
/* -- 8.18 FAQ ALS KARTEN
Jede Frage ist eine gerahmte, abgerundete Zeile mit Winkel
rechts.
------------------------------------------------------------ */
.faq { display: grid; gap: .75rem; }
.faq__frage {
border: 1px solid var(--linienfarbe);
border-radius: 14px;
background: var(--weiss);
}
.faq__frage > summary {
padding: 1.35rem 3.5rem 1.35rem 1.6rem;
cursor: pointer;
position: relative;
font-size: 1.15rem;
font-weight: 400;
color: var(--dunkel);
list-style: none;
}
.faq__frage > summary::-webkit-details-marker { display: none; }
.faq__frage > summary::after {
content: "";
position: absolute;
right: 1.6rem; top: 1.75rem;
width: .5em; height: .5em;
border-right: 1.5px solid var(--text-leise);
border-bottom: 1.5px solid var(--text-leise);
transform: rotate(45deg);
}
.faq__frage[open] > summary::after { transform: rotate(-135deg); top: 2rem; }
.faq__frage[open] { border-color: var(--gruen); }
.faq__antwort { padding: 0 3.5rem 1.5rem 1.6rem; color: var(--text-leise); }
/* Erdwelt: nur auf den Substratseiten. Die aufgeklappte Frage
bekommt den braunen Rahmen statt des gruenen, die Frage selbst
Braun statt Dunkelgruen. Der Pfeil bleibt leise — er ist
Bedienung, keine Farbaussage. */
.faq.welt--erde .faq__frage > summary { color: var(--braun); }
.faq.welt--erde .faq__frage[open] { border-color: var(--braun); }
/* -- 8.19 STIMMEN
Kundenstimmen als gerahmte Karten mit Schlagwort-Pille oben.
------------------------------------------------------------ */
.stimmen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
list-style: none;
margin: 0;
padding: 0;
}
.stimme {
margin: 0;
border: 1px solid var(--linienfarbe);
border-radius: 18px;
padding: clamp(1.5rem, 3vw, 2.25rem);
background: var(--weiss);
}
.stimme__marke {
display: inline-block;
background: var(--mint);
color: var(--gruen);
font-size: .95rem;
padding: .5rem 1.1rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.stimme blockquote { margin: 0; }
.stimme blockquote p { color: var(--dunkel); line-height: 1.55; }
.stimme footer { margin-top: 1.25rem; color: var(--text-leise); font-size: .95rem; }
/* -- 8.20 BEITRAGS-ANRISS
Für den Wissensbereich: links Schlagwort, Überschrift, Anriss
und Weiterlesen-Link, rechts das Bild.
------------------------------------------------------------ */
.anriss__innen {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.anriss__marke {
font-size: .95rem;
color: var(--gruen);
margin: 0 0 1rem;
}
.anriss__marke span { color: var(--text-leise); }
.anriss h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem); margin: 0 0 .6em; }
.anriss p { color: var(--text-leise); max-width: 34em; }
.anriss__weiter {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.25rem;
color: var(--gruen);
font-weight: 500;
text-decoration: none;
}
.anriss__weiter::after { content: "→"; }
.anriss__weiter:hover { text-decoration: underline; }
.anriss__bild img { width: 100%; border-radius: 18px; }
@media (max-width: 800px) {
.anriss__innen { grid-template-columns: 1fr; }
}
/* -- 8.21 REITER OBEN
Waagerechte Pillen in einem farbigen Balken, der MIT der Tafel
darunter eine Einheit bildet: der Balken sitzt mittig auf der
Oberkante der Tafel, ohne Fuge und ohne Versatz.
Gleiche Technik wie die senkrechten Reiter: Auswahlfelder mit
Beschriftungen, kein JavaScript, mit Tastatur bedienbar.
------------------------------------------------------------ */
.reiter-oben {
border: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.reiter-oben > legend { padding: 0; }
.reiter-oben__leiste {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .35rem;
list-style: none;
margin: 0;
padding: .6rem .7rem;
background: var(--mint);
border-radius: 20px 20px 0 0;
/* Heller Balken, dunkle Pille — der Akzent liegt auf dem
aktiven Reiter, nicht auf der Leiste. */
/* eine Haaresbreite Überlappung, damit keine Fuge sichtbar wird */
margin-bottom: -1px;
position: relative;
z-index: 2;
max-width: 100%;
}
.reiter-oben input {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.reiter-oben__name {
display: block;
padding: .8rem 1.6rem;
border-radius: 999px;
color: var(--gruen); /* auf Mint: 7,3:1 */
font-size: 1rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.reiter-oben__name:hover { background: rgba(255,255,255,.55); }
/* Aktiv: dunkle Fläche, weiße Schrift — 10,4:1 */
.reiter-oben input:checked + .reiter-oben__name {
background: var(--gruen);
color: var(--weiss);
font-weight: 500;
}
.reiter-oben input:focus-visible + .reiter-oben__name { outline: 3px solid var(--weiss); outline-offset: 2px; }
/* Die Tafeln nehmen die volle Breite und tragen die Rundung.
Sie liegen ALLE UEBEREINANDER in derselben Rasterzelle —
dadurch ist der Abschnitt immer so hoch wie die laengste
Tafel, und beim Umschalten springt nichts.
Versteckt wird mit visibility, nicht mit display: display:
none nimmt der Tafel ihre Hoehe, und genau die brauchen wir.
visibility: hidden haelt den Platz frei und nimmt die Tafel
trotzdem aus Tastaturreihenfolge und Vorlesehilfe.
Preis dafuer: die Bilder der nicht sichtbaren Tafeln werden
mitgeladen, weil sie im Layout stehen. Bei drei Bildern à
40 KB ist das vertretbar. */
.reiter-oben__tafeln { width: 100%; display: grid; }
.reiter-oben__tafel {
grid-area: 1 / 1;
display: grid;
visibility: hidden;
background: var(--weiss);
border: 1px solid var(--mint);
border-radius: 20px;
overflow: hidden;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/* Text OBEN, nicht mittig: Bei gleich hohen Tafeln wandert
sonst der Textanfang mit der Textlaenge, und beim
Umschalten springt die erste Zeile. Oben beginnt jeder
Reiter an derselben Stelle. */
align-items: start;
min-height: 20rem;
}
/* Die Bildspalte fuellt weiter die ganze Hoehe — randlose
Bilder brauchen das, freigestellte zentrieren sich darin
selbst (siehe --ganz). */
.reiter-oben__bild { align-self: stretch; }
.reiter-oben__inhalt { padding: clamp(2rem, 4vw, 3.5rem); }
/* In der Tafel sitzen Text, fuenf Merkmale und ein Schlusssatz
uebereinander. Damit das nicht zu hoch wird, stehen die
Merkmale hier enger als sonst. */
.reiter-oben__inhalt .merkmale li { margin-bottom: .3em; line-height: 1.4; }
/* Der Schlusssatz: wofuer sich dieses Substrat am besten
eignet. Steht abgesetzt unter den Merkmalen, weil er die
Kaufentscheidung traegt. */
.reiter-oben__fazit {
margin: 1.4rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--mint);
color: var(--gruen);
font-weight: 500;
}
/* Abstand zwischen Schlusssatz und Knopf */
.reiter-oben__fazit + p { margin-top: 1.6rem; }
.reiter-oben__inhalt h3 { color: var(--dunkel); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.15; margin: 0 0 .6em; }
.reiter-oben__bild { line-height: 0; height: 100%; }
.reiter-oben__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Freigestellte Motive auf weissem Grund vertragen keinen
Beschnitt — bei gleich hohen Tafeln wird der Bildkasten
hochkant, und ein 16:9-Motiv verliert links und rechts die
Haelfte. Mit „--ganz" steht das ganze Bild da. Der weisse
Rand faellt nicht auf: die Tafel ist selbst weiss. */
.reiter-oben__bild--ganz {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 2vw, 2rem);
}
.reiter-oben__bild--ganz img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
.reiter-oben__tafel:first-child { visibility: visible; }
.reiter-oben:has(input:checked) .reiter-oben__tafel { visibility: hidden; }
.reiter-oben:has(.reiter-oben__leiste > li:nth-child(1) input:checked) .reiter-oben__tafeln > .reiter-oben__tafel:nth-child(1),
.reiter-oben:has(.reiter-oben__leiste > li:nth-child(2) input:checked) .reiter-oben__tafeln > .reiter-oben__tafel:nth-child(2),
.reiter-oben:has(.reiter-oben__leiste > li:nth-child(3) input:checked) .reiter-oben__tafeln > .reiter-oben__tafel:nth-child(3),
.reiter-oben:has(.reiter-oben__leiste > li:nth-child(4) input:checked) .reiter-oben__tafeln > .reiter-oben__tafel:nth-child(4),
.reiter-oben:has(.reiter-oben__leiste > li:nth-child(5) input:checked) .reiter-oben__tafeln > .reiter-oben__tafel:nth-child(5) {
visibility: visible;
}
/* Browser ohne :has() zeigen alle Tafeln untereinander. Dort
duerfen sie nicht uebereinander liegen. */
@supports not selector(:has(*)) {
.reiter-oben__leiste { display: none; }
.reiter-oben__tafeln { display: block; }
.reiter-oben__tafel { grid-area: auto; visibility: visible; margin-bottom: 1rem; }
}
@media (max-width: 800px) {
.reiter-oben__leiste { border-radius: 20px; margin-bottom: .75rem; }
.reiter-oben__name { padding: .65rem 1.1rem; font-size: .95rem; }
/* „minmax(0, 1fr)" statt „1fr": Eine 1fr-Spalte hat als
Mindestmass die min-content-Breite ihres Inhalts. Das
freigestellte Bild bringt seine volle Eigenbreite mit —
die Spalte wuchs dadurch auf bis zu 576 px und der Inhalt
wurde am rechten Bildschirmrand abgeschnitten. Mit der
Null als Untergrenze darf die Spalte schrumpfen. */
.reiter-oben__tafel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* „align-self: start" hebt das „stretch" von oben auf. Sonst
ist die Hoehe definit, und „aspect-ratio" rechnet daraus die
BREITE statt der Hoehe — der Bildkasten wurde dadurch
breiter als die Spalte. */
.reiter-oben__bild {
order: -1;
aspect-ratio: 16/9;
height: auto;
align-self: start;
width: 100%;
}
/* Gleicher Grund, eine Ebene tiefer: Flex- und Rasterkinder
haben „min-width: auto" und schrumpfen sonst nicht unter
ihren Inhalt. */
.reiter-oben__bild--ganz,
.reiter-oben__inhalt { min-width: 0; }
}
/* -- 8.23 ABLAUF IN SPALTEN
Drei Schritte nebeneinander: große helle Ziffer, Überschrift,
kurzer Text, darunter Platz für eine Strichzeichnung.
Unterschied zum Baustein „schritte": der läuft untereinander
und trägt längere Anleitungen. Dieser hier ist für drei bis
vier knappe Punkte nebeneinander.
Die Ziffern erzeugt das Stylesheet — sie stehen nicht im
Quelltext und stimmen deshalb immer.
------------------------------------------------------------ */
.ablauf {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
counter-reset: ablauf;
list-style: none;
margin: 0;
padding: 0;
}
.ablauf__punkt { counter-increment: ablauf; margin: 0; }
.ablauf__punkt::before {
content: "0" counter(ablauf);
display: block;
font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
line-height: 1;
color: var(--linienfarbe);
margin-bottom: .6rem;
}
.ablauf__punkt h3 {
margin: 0 0 .55em;
font-size: 1.25rem;
color: var(--gruen);
}
.ablauf__punkt p { margin: 0; color: var(--text); }
.ablauf__bild { margin-top: 1.75rem; line-height: 0; }
.ablauf__bild img { width: 100%; max-width: 18rem; }
/* -- 8.24 NÄHRSTOFFKARTEN
Eine Karte je Hauptnährstoff: oben Name und Anteil, rechts
das Kürzel im Kreis, darunter die Überschrift, dann das Icon
und vier Stichpunkte.
Bis 1240 px stehen die Karten untereinander, darüber
nebeneinander.
FÜR ALLE NPK-DÜNGER DERSELBE BLOCK. Text, Farben, Icons und
die Reihenfolge stehen fest — je Dünger ändern sich nur die
drei Prozentwerte in „naehrkarte__wert". Sie sitzen immer an
derselben Stelle: der Name steht in einer festen Spalte von
7,5 rem, der Anteil beginnt dahinter.
Der Block gehört in „innen" (1180 px), nicht in „innen--breit".
Icons: bilder/naehrstoff-*.png, transparent, alt="" — was sie
zeigen, steht als Text daneben.
------------------------------------------------------------ */
.naehrkarten {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 2.5vw, 1.6rem);
list-style: none;
padding: 0;
align-items: stretch;
/* Untereinander werden die Karten nicht beliebig breit,
sondern behalten ihr Maß und stehen mittig. Eine Karte über
die ganze Seitenbreite hätte rechts neben den Stichpunkten
nur leere Fläche. */
max-width: 34rem;
margin: 0 auto;
}
.naehrkarte {
margin: 0;
border-radius: 18px;
padding: clamp(1.2rem, 2.2vw, 1.6rem);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: .9rem;
row-gap: .3rem;
/* Ein feiner Rand in der Schriftfarbe der Karte — sie steht damit
auch dann fuer sich, wenn das Band dahinter fast dieselbe
Helligkeit hat. Gilt fuer alle Karten. */
border: 1px solid var(--karte-schrift);
/* Grundwerte — die drei Karten unten überschreiben sie */
background: var(--mint);
--karte-schrift: var(--gruen);
--karte-kreis: var(--mintweiss);
}
/* ---- Kopfzeile: Name und Anteil beieinander --------------
Nicht auseinandergezogen: der Name steht in einer festen
Spalte, der Anteil schließt direkt an. Was rechts übrig
bleibt, gehört dem Kreis. */
.naehrkarte__kopf {
grid-column: 1;
margin: 0;
display: grid;
grid-template-columns: 7.5rem auto;
justify-content: start;
align-items: baseline;
gap: .5rem;
font-size: .95rem;
line-height: 1.3;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--karte-schrift);
}
/* Der Anteil — das Einzige, was sich je Dünger ändert. */
.naehrkarte__wert { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
/* ---- Das Kürzel im Kreis --------------------------------
Sitzt in der Kopfzeile, nicht darüber und nicht daneben:
die Mitte des Kreises liegt auf der Zeile mit dem Namen. */
.naehrkarte__zeichen {
grid-column: 2;
grid-row: 1;
margin: -.55rem 0 0;
align-self: start;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
background: var(--karte-kreis);
color: var(--karte-schrift);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
}
/* ---- Überschrift ----------------------------------------- */
.naehrkarte__titel {
grid-column: 1 / -1;
margin: .1rem 0 0;
font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
line-height: 1.2;
color: var(--karte-schrift);
}
/* ---- Icon und Stichpunkte -------------------------------- */
.naehrkarte__inhalt {
grid-column: 1 / -1;
margin-top: clamp(.7rem, 1.6vw, 1rem);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(.8rem, 1.6vw, 1rem);
}
.naehrkarte__bild {
width: clamp(3rem, 5vw, 3.6rem);
height: auto;
aspect-ratio: 1 / 1;
display: block;
}
.naehrkarte__punkte {
list-style: none;
margin: 0;
padding: 0;
font-size: .9rem;
line-height: 1.5;
color: var(--text);
}
/* ---- Die drei Karten ------------------------------------
Jede Paarung Fläche/Schrift ist nachgerechnet, nötig sind
4,5:1. Der Fließtext steht auf allen dreien in --text und
kommt damit auf 9,5:1 und besser.
---------------------------------------------------------- */
.naehrkarte--stickstoff {
background: var(--mint); /* #E3E8D5 */
--karte-schrift: var(--gruen); /* 7,2:1 */
--karte-kreis: var(--mintweiss);
}
.naehrkarte--phosphor {
background: var(--gold-hell); /* #EFE2CB */
--karte-schrift: var(--orange-dunkel); /* 6,6:1 */
--karte-kreis: var(--mintweiss);
}
/* Kalium: dunkles Blau als Schrift (10,0:1). Das mittlere Blau
#1E7AB9 kaeme auf #DEE4F1 nur auf 3,7:1. */
.naehrkarte--kalium {
background: var(--blau-hell); /* #DEE4F1 */
--karte-schrift: var(--blau); /* 10,0:1 */
--karte-kreis: var(--mintweiss);
}
/* ---- Anwendungskarten -----------------------------------
Vier Karten nach demselben Muster wie die NPK-Reihe, nur
ohne Prozentwert: „naehrkarten--vier" stellt ab 1240 px
vier nebeneinander, „naehrkarte--ohne-wert" gibt dem Namen
in der Kopfzeile die volle Breite (die feste Spalte von
7,5 rem ist nur fuer die kurzen Naehrstoffnamen gedacht).
Icons: bilder/icon-anwendung-*.png, transparent, alt="".
---------------------------------------------------------- */
.naehrkarte--ohne-wert .naehrkarte__kopf { grid-template-columns: minmax(0, 1fr); }
/* Statt eines Kuerzels steht im Kreis ein kleines Icon —
dieselbe Strichstaerke wie die Symbole im Raster. */
.naehrkarte__zeichen svg {
width: 1.6rem;
height: 1.6rem;
display: block;
}
/* Ohne Icon neben den Stichpunkten faellt die Bildspalte weg,
dafuer bekommen die Stichpunkte Haken wie in „merkmale". */
.naehrkarte--nur-punkte .naehrkarte__inhalt { grid-template-columns: minmax(0, 1fr); }
.naehrkarte--nur-punkte .naehrkarte__punkte li {
margin-left: 1.7rem;
text-indent: -1.7rem;
margin-bottom: .45em;
}
/* Haken wie in „merkmale": inline und auf der Schriftlinie. */
.naehrkarte--nur-punkte .naehrkarte__punkte li::before {
content: "";
display: inline-block;
vertical-align: baseline;
margin-right: 1.1rem;
width: .4rem; height: .72rem;
border-right: 2px solid var(--karte-schrift);
border-bottom: 2px solid var(--karte-schrift);
transform: rotate(45deg);
}
.naehrkarte--substrat {
background: var(--mint); /* #E3E8D5 */
--karte-schrift: var(--gruen); /* 7,2:1 */
--karte-kreis: var(--mintweiss);
}
.naehrkarte--drainage {
background: var(--blau-hell); /* #DEE4F1 */
--karte-schrift: var(--blau); /* 10,0:1 */
--karte-kreis: var(--mintweiss);
}
.naehrkarte--mischen {
background: var(--gold-hell); /* #EFE2CB */
--karte-schrift: var(--orange-dunkel); /* 6,6:1 */
--karte-kreis: var(--mintweiss);
}
.naehrkarte--dekor {
background: var(--sand); /* #F4EDE6 */
--karte-schrift: var(--braun); /* 9,0:1 */
--karte-kreis: var(--mintweiss);
}
/* ---- Ab 1240 px nebeneinander ---------------------------- */
@media (min-width: 1240px) {
.naehrkarten {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
margin: 0;
}
/* Optional: jede zweite Karte tiefer (nicht fuer die NPK-Reihe) */
.naehrkarten--versetzt .naehrkarte:nth-child(even) { margin-top: clamp(1.5rem, 3vw, 3rem); }
/* Vier Anwendungskarten in einer Reihe. Der Block darf etwas
breiter sein als die 1180 px der NPK-Reihe, sonst stehen vier
Karten zu eng — mehr als 1400 px liest sich aber schlechter. */
.naehrkarten--vier {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: 1400px;
margin-inline: auto;
}
}
/* Sehr schmale Geraete: Icon und Stichpunkte untereinander */
@media (max-width: 340px) {
.naehrkarte__inhalt { grid-template-columns: 1fr; }
.naehrkarte__kopf { grid-template-columns: auto auto; }
}
/* -- 8.25 UMRISS-KNOPF MIT PUNKTEN
Schmaler Knopf mit Umriss und je einem Punkt links und rechts
der Beschriftung.
------------------------------------------------------------ */
.knopf--umriss {
background: transparent;
color: var(--gruen);
border: 1px solid var(--gruen);
border-radius: 4px;
font-size: .875rem;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
padding: .85rem 1.6rem;
}
.knopf--umriss::before { content: "· "; }
.knopf--umriss::after { content: " ·"; }
.knopf--umriss:hover { background: var(--gruen); color: var(--weiss); }
/* -- 8.21b REITER OBEN IN DER ERDWELT
Farbschema der Substrate: Braun, Gold, Orange.
Nur die Farben wechseln, Aufbau und Masse bleiben. Gesetzt
wird es mit welt--erde am Reiterkasten.
Nachgerechnet, alles ueber 4,5:1:
Braun #573F2A auf Gold hell #EFE2CB 7,6:1
Weiss auf Braun 9,8:1
Braun auf Weiss 9,8:1
Weiss auf Orange #8F4A0A 6,7:1
Orange #8F4A0A auf Weiss 6,7:1 */
.reiter-oben.welt--erde .reiter-oben__leiste { background: var(--gold-hell); }
.reiter-oben.welt--erde .reiter-oben__name { color: var(--braun); }
.reiter-oben.welt--erde .reiter-oben__name:hover { background: rgba(255, 255, 255, .6); }
.reiter-oben.welt--erde input:checked + .reiter-oben__name {
background: var(--braun);
color: var(--weiss);
}
.reiter-oben.welt--erde .reiter-oben__tafel { border-color: var(--gold-tief); }
.reiter-oben.welt--erde .reiter-oben__inhalt h3 { color: var(--braun); }
.reiter-oben.welt--erde .reiter-oben__fazit {
border-top-color: var(--gold-tief);
color: var(--braun);
}
/* Der Haken erbt sonst das Gruen aus 8.9 */
.reiter-oben.welt--erde .merkmale li::before {
border-right-color: var(--orange);
border-bottom-color: var(--orange);
}
.reiter-oben.welt--erde .knopf {
background: var(--orange);
color: var(--weiss);
}
.reiter-oben.welt--erde .knopf:hover { background: var(--orange-dunkel); }
/* -- 8.22 BLOG / WISSENSBEREICH
Die Titel stehen kräftiger (600) und luftiger (1,3) als auf
den Produktseiten.
------------------------------------------------------------ */
/* ---- Kopfzeile eines Beitrags: Marke, Kategorie, Datum ---- */
.beitrag__kopf {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 1rem;
font-size: .9375rem;
line-height: 1.5;
color: var(--text-leise);
}
.beitrag__marke {
font-size: .875rem;
font-weight: 500;
color: var(--gruen);
letter-spacing: .06em;
text-transform: uppercase;
}
.beitrag__kategorie { color: var(--gruen); }
.beitrag__kopf .punkt { color: var(--linienfarbe); }
/* ---- Autorzeile ---- */
.autor {
display: flex;
align-items: center;
gap: .75rem;
margin: 1.5rem 0 0;
}
.autor__bild {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
object-fit: cover;
background: var(--mint);
display: grid;
place-items: center;
font-size: .95rem;
font-weight: 500;
color: var(--gruen);
}
.autor__name { font-size: .9375rem; font-weight: 500; color: var(--dunkel); margin: 0; line-height: 1.3; }
.autor__rolle { font-size: .875rem; color: var(--text-leise); margin: 0; line-height: 1.3; }
/* ---- Hervorgehobener Beitrag: Text links, Bild rechts ---- */
.beitrag--gross { border-bottom: 1px solid var(--linienfarbe); }
.beitrag--gross .innen {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.beitrag--gross h2 {
font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--dunkel);
margin: 0 0 .7em;
}
.beitrag--gross p { font-size: 1rem; line-height: 1.7; color: var(--text-leise); max-width: 34em; }
.beitrag--gross .beitrag__bild img { width: 100%; border-radius: 18px; }
@media (max-width: 800px) {
.beitrag--gross .innen { grid-template-columns: 1fr; }
}
/* ---- Raster weiterer Beiträge ---- */
.beitraege {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: clamp(1.75rem, 3.5vw, 3rem);
list-style: none;
margin: 0;
padding: 0;
}
.beitrag {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
}
.beitrag__bild { line-height: 0; margin-bottom: 1.25rem; }
.beitrag__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.beitrag h3 {
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
color: var(--dunkel);
margin: 0 0 .6em;
}
.beitrag h3 a { color: inherit; text-decoration: none; }
.beitrag h3 a::after { content: ""; position: absolute; inset: 0; }
.beitrag:hover h3 a { color: var(--gruen); }
.beitrag > p { font-size: 1rem; line-height: 1.7; color: var(--text-leise); margin: 0; }
.beitrag .autor { margin-top: auto; padding-top: 1.5rem; }
/* ---- Weiterlesen ---- */
.weiterlesen {
display: inline-flex;
align-items: center;
gap: .45rem;
margin-top: 1.4rem;
font-size: 1rem;
font-weight: 500;
color: var(--gruen);
text-decoration: none;
}
.weiterlesen::after { content: "→"; }
.weiterlesen:hover { text-decoration: underline; }
/* ---- Filterleiste über der Beitragsliste ---- */
.filter {
display: flex;
flex-wrap: wrap;
gap: .5rem;
list-style: none;
margin: 0 0 clamp(2rem, 4vw, 3rem);
padding: 0;
}
.filter a {
display: block;
padding: .55rem 1.2rem;
border-radius: 999px;
border: 1px solid var(--linienfarbe);
color: var(--text-leise);
text-decoration: none;
font-size: .95rem;
}
.filter a:hover { border-color: var(--gruen); color: var(--gruen); }
.filter a[aria-current="page"] { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
/* ------------------------------------------------------------
8b. BEWEGUNG
Die Bewegung steuert GSAP mit ScrollTrigger (siehe
bewegung.js). Im Stylesheet steht dafür nur noch das Nötigste:
die Hüllen, hinter denen die Wörter einer Überschrift
hervorklappen.
Nichts hiervon versteckt etwas. Lädt GSAP nicht, sind alle
Texte trotzdem sichtbar — GSAP setzt die Startwerte selbst
und nimmt sie am Ende wieder zurück.
------------------------------------------------------------ */
.wort {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
/* Polster, damit Unterlängen (g, p, y) nicht abgeschnitten werden */
padding-bottom: .14em;
margin-bottom: -.14em;
}
.wort__innen { display: inline-block; }
/* Zusammenhalten, was nicht umbrechen darf — Domains, Masse,
Artikelnummern. Sonst trennt der Browser an jedem Bindestrich. */
.nowrap { white-space: nowrap; }
/* -- 8.26 AUFTEILUNG · wie breit Bild und Text sind
Ohne Zusatzklasse teilen sich Bild und Text den Platz je zur
Hälfte. Das passt nicht immer: bei wenig Text wirkt die halbe
leere Spalte verloren, dann darf das Bild mehr Raum bekommen.
Umgekehrt bei viel Text — dann steht das Bild oft besser
hochkant daneben als breit und flach.
Die vier Klassen gelten für alle Bausteine mit zwei Spalten:
Hero, Splitschirm, Produkt-Hero, „Text und Bild" — und für
den Trenner darunter, damit der an derselben Stelle bricht.
Gerechnet wird in fr, nicht in Prozent: so bleibt der Abstand
zwischen den Spalten außen vor und nichts läuft über. Welche
Spalte die erste ist, entscheidet der Baustein — „gedreht"
tauscht Inhalt und Breite gemeinsam.
Unter 800 px steht ohnehin alles untereinander; dort gelten
die Klassen nicht mehr.
------------------------------------------------------------ */
.teilung--bild-breit { --anteil-bild: 6fr; --anteil-text: 4fr; } /* 60 / 40 */
.teilung--bild-weit { --anteil-bild: 7fr; --anteil-text: 3fr; } /* 70 / 30 */
.teilung--text-breit { --anteil-bild: 4fr; --anteil-text: 6fr; } /* 40 / 60 */
.teilung--text-weit { --anteil-bild: 3fr; --anteil-text: 7fr; } /* 30 / 70 */
/* Bekommt der Text mehr Spalte, darf er sie auch nutzen. Sonst
bleibt er bei seinen 34rem stehen und es klafft eine Lücke
bis zum Bild — der Abschnitt fiele in zwei Teile.
40rem sind rund 75 Zeichen je Zeile, die Obergrenze für gut
Lesbares; darüber wird nicht erhöht. Wer noch mehr Text hat,
nimmt „bild--hochkant" dazu. */
.teilung--text-breit .split__text > *,
.teilung--text-weit .split__text > * { max-width: 40rem; }
/* ---- Bild hochkant ----------------------------------------
Der Gegenpart zu „viel Text": das Bild wird schmal und hoch
statt breit und flach. Gehört fast immer mit
„teilung--text-breit" zusammen.
Im Splitschirm steht das Bild dann nicht mehr randlos,
sondern als gerahmtes Hochformat in der Farbfläche — randlos
wäre es entweder verzerrt, oder der Abschnitt würde sehr hoch.
Das Seitenverhältnis 3:4 ist dasselbe wie bei einem
Hochformat aus der Kamera.
------------------------------------------------------------ */
.bild--hochkant.hero .hero__bild { aspect-ratio: 3 / 4; max-height: 74vh; }
/* Der Inhalt läuft hier NICHT bis an die Fensterkante, sondern
steht in der Seitenmitte. Sonst zieht es Text und Bild auf
einem breiten Schirm auseinander: der Abstand in der Mitte
wird größer als der Rand außen, und der Abschnitt fällt in
zwei Teile. Die Farbfläche bleibt randlos — dafür sitzt der
Abstand als Innenabstand am Abschnitt, nicht an den Spalten. */
.bild--hochkant.split {
align-items: center;
padding-left: max(var(--rand), (100% - var(--innen)) / 2);
padding-right: max(var(--rand), (100% - var(--innen)) / 2);
column-gap: clamp(2rem, 4vw, 3.5rem);
}
/* Die seitlichen Ränder kommen jetzt vom Abschnitt. Der Text
darf seine Spalte dafür ausfüllen — 40rem sind rund 75
Zeichen je Zeile, die Obergrenze für gut Lesbares. */
.bild--hochkant.split .split__text { padding-left: 0; padding-right: 0; }
.bild--hochkant.split .split__text > * { max-width: 40rem; }
.bild--hochkant.split .split__bild {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.bild--hochkant.split .split__bild img {
width: auto;
max-width: 100%;
max-height: 40rem;
aspect-ratio: 3 / 4;
border-radius: var(--radius);
}
.bild--hochkant.textbild img { aspect-ratio: 3 / 4; object-fit: cover; }
.bild--hochkant.produkt-hero .produkt-hero__bild { align-self: center; }
.bild--hochkant.produkt-hero .produkt-hero__bild img {
width: auto;
max-height: 34rem;
margin: 0 auto;
}
@media (max-width: 800px) {
/* Untereinander bleibt das Hochformat, aber gedeckelt — sonst
füllt ein einziges Bild den ganzen Schirm. */
.bild--hochkant.hero .hero__bild { aspect-ratio: 4 / 5; max-height: 68vh; }
.bild--hochkant.split .split__bild { aspect-ratio: auto; padding: clamp(1.5rem, 6vw, 3rem) 0; }
}
/* -- 8.27 TRENNER
Der schmale Streifen zwischen zwei Abschnitten. Er nimmt die
Aufteilung des Blocks darüber auf: die eine Hälfte so breit
wie dessen Textseite, die andere so breit wie dessen
Bildseite, und in jeder Hälfte ein feiner Strich. Dadurch
läuft die Kante des Splitschirms noch ein Stück weiter, statt
hart abzubrechen.
DIE FARBEN STEHEN ÜBER KREUZ. Unter der dunklen Hälfte des
Blocks steht die helle Trennerhälfte und umgekehrt — der
Streifen soll einen Kontrast setzen, nicht die Farbe von oben
fortführen. Dunkelblau unter Dunkelblau ist keine Kante,
sondern nur ein tieferer Abschnitt.
Er bekommt dieselben Zusatzklassen wie der Block darüber:
Steht oben „split--gedreht", gehört unten „trenner--gedreht"
dazu: dann wandern Farbe und Strichlänge mit auf die andere
Seite.
Soll der Streifen ausnahmsweise doch die Farbe von oben
weiterführen, statt zu kontrastieren: „trenner--durchlaufend".
Ohne geteilten Block darüber nimmt man „trenner--einfarbig":
eine Fläche, ein Strich in der Mitte.
Die beiden leeren div sind Absicht — der Streifen ist reine
Zierde und trägt keinen Inhalt.
------------------------------------------------------------ */
.trenner {
--hoehe: 2.2rem;
/* Grundpaar, wenn keine Farbwelt angegeben ist */
--kraeftig: var(--gruen);
--strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--mint);
--strich-ruhig: rgba(44,54,24,.28);
display: grid;
grid-template-columns: var(--anteil-text, 1fr) var(--anteil-bild, 1fr);
}
.trenner__seite {
height: var(--hoehe);
display: flex;
align-items: center;
justify-content: center;
}
/* Der Strich sitzt mittig in seiner Hälfte und lässt links und
rechts Luft — er soll die Fläche andeuten, nicht ausfüllen.
Die beiden Längen sind bewusst verschieden und hängen an der
Seite, nicht an der Farbe: links lang, rechts kurz. */
.trenner__seite::before {
content: "";
display: block;
height: 1px;
width: 62%;
}
/* Über Kreuz: die erste Hälfte steht unter der Textseite, und
die trägt oben die kräftige Farbe — hier kommt deshalb die
ruhige. */
.trenner__seite:first-child { background: var(--ruhig); }
.trenner__seite:first-child::before { background: var(--strich-ruhig); }
.trenner__seite:last-child { background: var(--kraeftig); }
.trenner__seite:last-child::before { background: var(--strich-kraeftig); width: 38%; }
/* Ausnahme: der Streifen führt die Farben von oben weiter,
statt zu kontrastieren. */
.trenner--durchlaufend .trenner__seite:first-child { background: var(--kraeftig); }
.trenner--durchlaufend .trenner__seite:first-child::before { background: var(--strich-kraeftig); }
.trenner--durchlaufend .trenner__seite:last-child { background: var(--ruhig); }
.trenner--durchlaufend .trenner__seite:last-child::before { background: var(--strich-ruhig); }
/* Gedreht: die Spalten tauschen die Breite, die erste Hälfte
wandert mit ihrer Farbe nach rechts. */
.trenner--gedreht { grid-template-columns: var(--anteil-bild, 1fr) var(--anteil-text, 1fr); }
.trenner--gedreht .trenner__seite:first-child { order: 2; }
/* Eine Fläche, ein Strich — für Abschnitte ohne Bildseite.
Hier steht nur ein div im Quelltext. Die kräftige Farbe, weil
darüber in aller Regel ein helles Band steht. */
.trenner--einfarbig { grid-template-columns: 1fr; }
.trenner--einfarbig .trenner__seite { background: var(--kraeftig); }
.trenner--einfarbig .trenner__seite::before { background: var(--strich-kraeftig); width: 30%; }
/* ---- Die Farbpaare ----------------------------------------
Je Welt eine kräftige und eine ruhige Fläche, dazu der Strich,
der auf ihr liegt. Welche Hälfte welche bekommt, steht oben —
im Regelfall über Kreuz.
Es steht kein Text darauf, deshalb sind hier keine
Kontrastwerte nötig — die Striche sind Zierde.
------------------------------------------------------------ */
.trenner.welt--dunkel {
--kraeftig: var(--dunkel); --strich-kraeftig: rgba(255,255,255,.45);
--ruhig: var(--mint); --strich-ruhig: rgba(44,54,24,.28);
}
.trenner.welt--braun {
--kraeftig: var(--braun); --strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--gold-tief); --strich-ruhig: rgba(87,63,42,.38);
}
.trenner.welt--sand {
--kraeftig: var(--dunkel); --strich-kraeftig: rgba(255,255,255,.45);
--ruhig: var(--gold-tief); --strich-ruhig: rgba(44,54,24,.3);
}
.trenner.welt--orange {
--kraeftig: var(--orange); --strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--gold-tief); --strich-ruhig: rgba(122,62,8,.38);
}
.trenner.welt--himmel {
--kraeftig: var(--gruen); --strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--himmel); --strich-ruhig: rgba(44,54,24,.25);
}
.trenner.welt--gold {
--kraeftig: var(--braun); --strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--gold-hell); --strich-ruhig: rgba(87,63,42,.32);
}
.trenner.welt--blau {
--kraeftig: var(--blau); --strich-kraeftig: rgba(255,255,255,.5);
--ruhig: var(--blau-hell); --strich-ruhig: rgba(35,46,101,.32);
}
@media (max-width: 800px) {
/* Der Block darüber steht jetzt untereinander — die
Aufteilung hätte nichts mehr, worauf sie sich bezieht. */
.trenner,
.trenner--gedreht { grid-template-columns: 1fr 1fr; }
.trenner { --hoehe: 1.6rem; }
}
/* -- 8.28 PRODUKTLISTE
Steht in einem Reiter, wenn dort mehrere Produkte hängen —
auf der Düngerseite drei Flüssigdünger unter einem Reiter.
Die Liste nennt je Zeile Nährstoffverhältnis und Einsatzzweck.
Die ganze Zeile ist der Link, nicht nur der Name: ein
größeres Ziel für Maus und Finger.
------------------------------------------------------------ */
.produktliste {
list-style: none;
margin: 1.2rem 0 0;
padding: 0;
border-top: 1px solid var(--linienfarbe);
}
.produktliste li { border-bottom: 1px solid var(--linienfarbe); }
/* Vier Spalten: Name, Nährstoffverhältnis, Leerraum, Dreieck.
Der Wert steht direkt hinter dem Namen — dort gehört er
hin, er ist Teil der Produktbezeichnung. Die dritte Spalte
ist nur Luft und schiebt das Dreieck an den rechten Rand. */
.produktliste a {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: baseline;
column-gap: .7rem;
row-gap: .15rem;
padding: .8rem .2rem;
text-decoration: none;
color: inherit;
}
.produktliste__name { grid-column: 1; grid-row: 1; }
.produktliste__wert { grid-column: 2; grid-row: 1; }
.produktliste a:hover { background: var(--mintweiss); }
.produktliste a:hover .produktliste__name { text-decoration: underline; }
.produktliste__name {
font-weight: 500;
color: var(--gruen);
}
/* Das Nährstoffverhältnis — der eigentliche Unterschied */
.produktliste__wert {
font-size: .85rem;
letter-spacing: .04em;
color: var(--text-leise);
white-space: nowrap;
}
/* Das Dreieck am Zeilenende. Gefuellt statt als Winkelzeichen:
Es soll auf den ersten Blick sagen „hier geht es weiter".
Aus Rahmenlinien gebaut, damit es bei jeder Groesse scharf
bleibt und die Farbe der Seite mitnimmt.
Es braucht seinen Platz ausdruecklich: als ::after steht es
im Kasten hinter dem Zweck und landet sonst in einer
eigenen Zeile. */
.produktliste a::after {
content: "";
grid-column: 4;
grid-row: 1;
align-self: center;
width: 0;
height: 0;
border-left: .62rem solid var(--gruen);
border-top: .42rem solid transparent;
border-bottom: .42rem solid transparent;
transition: transform .15s ease-out;
}
/* Beim Überfahren rückt das Dreieck ein Stück nach rechts.
Die einzige Bewegung auf einer sonst ruhigen Seite — sie
sagt „hier geht es weiter" deutlicher als jede Farbe. */
.produktliste a:hover::after,
.produktliste a:focus-visible::after { transform: translateX(.3rem); }
@media (prefers-reduced-motion: reduce) {
.produktliste a::after { transition: none; }
}
/* Der Zweck steht in der zweiten Zeile, über die volle Breite */
.produktliste__zweck {
grid-column: 1 / -1;
grid-row: 2;
font-size: .9rem;
line-height: 1.4;
color: var(--text);
}
@media (max-width: 420px) {
/* Sehr schmal: Verhältnis unter den Namen statt daneben. */
.produktliste a { grid-template-columns: minmax(0, 1fr) auto; }
.produktliste__name { grid-column: 1; grid-row: 1; }
.produktliste__wert { grid-column: 1; grid-row: 2; }
.produktliste a::after { grid-column: 2; grid-row: 1; }
.produktliste__zweck { grid-row: 3; }
}
/* ------------------------------------------------------------
9. NACH-OBEN-KNOPF
Erscheint erst, wenn man ein gutes Stück gescrollt hat, und
sitzt unten rechts. Auf den langen Ratgeber- und
Produktseiten spart er den Weg zurück; ganz oben, wo die
Navigation ohnehin steht, wäre er nur im Weg.
Er liegt unter dem Klappmenü (z-index 60), damit er bei
geöffnetem Menü nicht davor schwebt.
Ohne JavaScript bleibt er unsichtbar — und dank „visibility"
auch für die Tastatur unerreichbar. Sonst führte der
Tabulator auf einen Knopf, den niemand sieht.
------------------------------------------------------------ */
.nachoben {
position: fixed;
right: clamp(.9rem, 2.5vw, 1.8rem);
bottom: clamp(.9rem, 2.5vw, 1.8rem);
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
gap: .2rem;
width: 4.5rem;
padding: .7rem .4rem .65rem;
border: 0;
border-radius: var(--radius-klein);
background: var(--gruen);
color: var(--weiss); /* 9,0:1 */
font-family: inherit;
font-size: .68rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: .07em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(.6rem);
transition: opacity .2s, transform .2s, visibility .2s;
}
.nachoben.ist-da { opacity: 1; visibility: visible; transform: none; }
.nachoben:hover { background: var(--dunkel); }
.nachoben svg { display: block; }
@media (prefers-reduced-motion: reduce) {
.nachoben { transition: none; }
}
@media (max-width: 600px) {
/* Auf dem Telefon nur der Pfeil — die Beschriftung kostet
dort Platz, den der Inhalt besser gebraucht. */
.nachoben { width: 3rem; padding: .6rem; gap: 0; }
.nachoben span { display: none; } /* der Name steht im aria-label */
}
/* ------------------------------------------------------------
10. FOOTER
------------------------------------------------------------ */
.fuss { color: var(--weiss); padding-bottom: 0; }
.fuss__innen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(1.5rem, 4vw, 3.5rem);
}
.fuss a { color: var(--weiss); }
.fuss address { font-style: normal; }
/* Das Logo ist roter Schriftzug auf Transparenz. Statt einer
zweiten Bilddatei wird es hier weiß eingefärbt. */
.fuss__logo { width: clamp(160px, 20vw, 200px); height: auto; filter: brightness(0) invert(1); }
/* Firmenanschrift als , nicht als Ueberschrift */
.fuss__titel {
font-family: "DM Sans", system-ui, sans-serif;
font-size: 1.35rem;
color: var(--weiss);
margin: 0 0 .8em;
}
.fuss__claim {
font-family: "DM Sans", system-ui, sans-serif;
font-size: 1.2rem;
margin: 1rem 0 0;
color: var(--mint);
}
.fuss__social { display: flex; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.fuss__social a {
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
}
.fuss__social a:hover { background: rgba(255,255,255,.14); }
.fuss__rechtliches {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: 1.4rem;
padding-bottom: 1.6rem;
border-top: 1px solid rgba(255,255,255,.2);
display: flex;
flex-wrap: wrap;
gap: .6rem 1.6rem;
align-items: center;
justify-content: space-between;
font-size: .875rem;
}
.fuss__rechtliches ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.fuss__copy { margin: 0; color: rgba(255,255,255,.7); }
/* ------------------------------------------------------------
11. BARRIEREFREIHEIT UND DRUCK
Kontraste, Tastaturbedienung und Semantik stecken direkt im
HTML und im CSS.
------------------------------------------------------------ */
.sprung {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: .8rem 1.2rem;
background: var(--gruen);
color: var(--weiss);
}
.sprung:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.fuss :focus-visible { outline-color: var(--mint); }
.nur-screenreader {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* -- 8.29 DOWNLOAD-VERZEICHNIS
Die Seite Datenblätter: je Produkt Bild, Name, die PDFs, die
für alle Packungen gelten (Sicherheitsdatenblatt), und eine
Tabelle der Packungen mit Artikelnummer, EAN und — wo es eins
gibt — dem Datenblatt dieser Packung. Geschrieben wird der
Inhalt von werkzeuge/datenblaetter-bauen.mjs.
Die Tabelle scrollt auf dem Handy in ihrem Rahmen seitlich,
die Seite selbst nie. */
.download {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2rem);
align-items: start;
padding: clamp(1.25rem, 3vw, 2rem) 0;
border-bottom: var(--linie);
}
.download:last-child { border-bottom: 0; }
.download__bild img {
display: block;
width: 100%;
height: auto;
border-radius: .6rem;
background: var(--weiss);
}
.download h3 { margin: 0 0 .7rem; }
.download h3 a { color: inherit; text-decoration: none; }
.download h3 a:hover { color: var(--gruen); text-decoration: underline; }
.download__dateien {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: grid;
gap: .55rem;
}
/* Eine Zeile je Dokument: Name, Groesse, dann die beiden Wege
Anzeigen und Herunterladen. */
.download__zeile {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .35rem .9rem;
}
/* Die beiden Wege bleiben als Paar zusammen und rutschen
notfalls gemeinsam in die naechste Zeile. */
.download__aktionen {
display: inline-flex;
flex: 0 0 auto;
gap: .9rem;
}
.download__datei {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 500;
color: var(--dunkel);
}
.download__aktion {
font-size: .9rem;
font-weight: 500;
color: var(--gruen);
text-decoration: underline;
text-underline-offset: .2em;
}
.download__aktion:hover,
.download__aktion:focus-visible { color: var(--dunkel); }
.download__datei::before {
content: "PDF";
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
padding: .15rem .35rem;
border-radius: .25rem;
background: var(--gruen);
color: var(--weiss);
}
.download__groesse { font-size: .85rem; color: var(--dunkel); opacity: .75; }
.download__fehlt { font-size: .9rem; font-style: italic; color: var(--dunkel); opacity: .75; }
/* „Sicherheitsdatenblatt: nicht erforderlich" — eine Auskunft, kein Platzhalter */
.download__hinweis { font-size: .9rem; color: var(--dunkel); }
/* -- PDF-Schau: „Anzeigen" legt das PDF ueber die Seite.
Groesse: fast das ganze Fenster, auf dem Telefon ganz. -- */
.pdfschau {
width: min(92vw, 60rem);
height: min(88vh, 52rem);
max-width: none;
max-height: none;
padding: 0;
border: 0;
border-radius: var(--radius);
background: var(--weiss);
color: var(--dunkel);
overflow: hidden;
}
.pdfschau[open] { display: flex; flex-direction: column; }
.pdfschau::backdrop { background: rgba(44, 54, 24, .55); }
.pdfschau__kopf {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 1rem;
min-height: 3.4rem;
padding: .5rem .7rem .5rem 1.2rem;
background: var(--gruen);
color: var(--mintweiss);
}
/* Ein langer Name darf den Kopf nicht auseinanderziehen —
er wird gekuerzt, der volle Titel steht im PDF selbst. */
.pdfschau__titel {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdfschau__laden {
flex: 0 0 auto;
color: var(--mintweiss);
font-size: .9rem;
text-decoration: underline;
text-underline-offset: .2em;
}
.pdfschau__laden:hover, .pdfschau__laden:focus-visible { color: var(--weiss); }
.pdfschau__zu {
flex: 0 0 auto;
width: 2.1rem;
height: 2.1rem;
display: grid;
place-items: center;
border: 0;
border-radius: .4rem;
background: transparent;
color: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.pdfschau__zu:hover, .pdfschau__zu:focus-visible { background: rgba(255, 255, 255, .18); }
.pdfschau__rahmen {
display: block;
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: 0;
background: var(--weiss);
}
@media (max-width: 620px) {
.pdfschau { width: 100vw; height: 100dvh; border-radius: 0; }
}
.tabelle-rahmen { overflow-x: auto; }
.artikeltabelle {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
}
.artikeltabelle th,
.artikeltabelle td {
padding: .55rem .75rem;
text-align: left;
border-bottom: var(--linie);
white-space: nowrap;
}
.artikeltabelle th { font-size: .85rem; font-weight: 700; color: var(--gruen); }
.artikeltabelle td:nth-child(2),
.artikeltabelle td:nth-child(3) { font-variant-numeric: tabular-nums; }
.artikeltabelle tr:last-child td { border-bottom: 0; }
.artikeltabelle .download__datei::before { display: none; }
@media (max-width: 620px) {
.download { grid-template-columns: 90px minmax(0, 1fr); }
}
/* ------------------------------------------------------------
MITGLIEDSCHAFTEN
Logo und Name nebeneinander — das Logo allein sagt nicht jedem
etwas. Uebernommen von leni-hydrokultur.de, Farben auf Blusana
umgestellt. Der Pfeil fuer Links nach aussen sitzt am Namen,
nicht am Link: im Raster bekaeme er sonst eine eigene Zelle.
------------------------------------------------------------ */
.mitglieder {
padding: 28px 30px 30px;
border-radius: var(--radius);
background: var(--mint);
border-left: 5px solid var(--gruen);
}
.mitglieder__titel {
font-family: var(--ff-head);
font-weight: 700;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.3;
color: var(--gruen);
margin-bottom: 16px;
}
.mitglieder__liste {
list-style: none;
margin: 0;
padding: 0;
}
.mitglieder__liste a {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: center;
gap: 18px;
padding: 12px 10px;
border-radius: var(--radius-klein);
color: inherit;
text-decoration: none;
transition: background-color .18s ease;
}
.mitglieder__liste a:hover { background: rgba(255, 255, 255, .55); }
.mitglieder__liste a:hover .mitglieder__name { text-decoration: underline; text-underline-offset: 3px; }
/* Feste Hoehe, damit die drei sehr unterschiedlich proportionierten
Logos optisch gleich gross wirken und die Zeile nicht springt. */
.mitglieder__liste img {
width: 100%;
height: 58px;
object-fit: contain;
}
.mitglieder__name { font-size: 16px; line-height: 1.45; }
.mitglieder__liste a[href^="http"] .mitglieder__name::after {
content: "\2197";
margin-left: .25em;
font-size: .85em;
line-height: 1;
}
@media (max-width: 900px) {
.mitglieder { padding: 24px 22px 26px; }
}
@media (max-width: 560px) {
.mitglieder__liste a { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
.mitglieder__liste img { height: 50px; }
}
@media print {
.navi, .burger, .leiste, .fuss__social, .sprung,
.nachoben, .trenner { display: none; }
body { font-size: 11pt; color: #000; }
.band { padding: 0; background: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}