@layer reset, tokens, base, layout, komponenten;
/* css/tokens.css */
@layer tokens {
:root {
--gruen-900: #004e2c;
--gruen-500: #7d9947;
--gruen-500-50: #bdcca2;
--gruen-100: #eef2eb;
--gruen-100-kalt: #d9e5e0;
--limette: #a9ba3d;
--schwarz: #000000;
--weiss: #ffffff;
--rot: #bd2c35;
--gelb: #ebe04d;
--c-text: var(--schwarz);
--c-text-auf-weiss: var(--gruen-900);
--c-flaeche: var(--weiss);
--c-fokus: var(--gruen-900);
--c-fokus-invers: var(--weiss);
--scrim-hero: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #000 100%);
--hero-line: clamp(31px, 13.4px + 4.51vw, 100px);
--metrik-halb: 0.3555;
--metrik-halb-body: 0.3879;
--t-hero-xl: clamp(30px, 12.16px + 4.575vw, 100px);
--t-display: clamp(28px, 9.65px + 4.706vw, 100px);
--t-h1: clamp(30px, 17.25px + 3.268vw, 80px);
--t-h1-seite: clamp(18px, 7.29px + 2.745vw, 60px);
--t-h2: clamp(19px, 13.14px + 1.503vw, 42px);
--t-h3: clamp(18px, 12.39px + 1.438vw, 40px);
--t-lead: clamp(22px, 14.86px + 1.830vw, 50px);
--t-body-l: clamp(17px, 15.90px + 0.281vw, 21px);
--t-body-m: clamp(16px, 14.90px + 0.281vw, 18px);
--t-body-s: clamp(14px, 13.45px + 0.140vw, 16px);
--t-bildunterschrift: clamp(13px, 12.75px + 0.065vw, 14px);
--t-nav: 18px;
--t-button: clamp(12px, 10.98px + 0.261vw, 16px);
--t-footer: clamp(11px, 10.75px + 0.065vw, 12px);
--t-teaser-hl: clamp(16px, 10.90px + 1.307vw, 36px);
--t-teaser-copy: clamp(12px, 9.96px + 0.523vw, 20px);
--t-kat-label: clamp(14px, 10.43px + 0.915vw, 28px);
--t-shop-hinweis: clamp(10px, 8.47px + 0.392vw, 16px);
--t-copy: var(--t-body-m);
--t-statement-copy: clamp(17px, 14.55px + 0.625vw, 26px);
--t-hero-sub: clamp(16px, 7.33px + 2.222vw, 50px);
--t-teaser-block: clamp(30px, 27.45px + 0.654vw, 40px);
--t-icon-titel: clamp(18px, 16.47px + 0.392vw, 24px);
--t-trust-intro: clamp(16px, 9.37px + 1.699vw, 42px);
--t-shopkreis: clamp(16px, 11.92px + 1.046vw, 32px);
--t-footer-marke: clamp(12px, 11.49px + 0.131vw, 14px);
--t-hero-xl-light: clamp(24px, 17.37px + 1.699vw, 50px);
--t-jobs-block: clamp(20px, 17.45px + 0.654vw, 30px);
--lh-h1: clamp(34px, 21.26px + 3.268vw, 84px);
--lh-h1-seite: 1.3;
--lh-h2: 1.2;
--lh-h3: 1.3;
--lh-lead: 1.25;
--lh-body-l: 1.55;
--lh-body-m: 1.6;
--lh-body-s: 1.5;
--lh-footer: 1.35;
--lh-teaser-hl: 1.44;
--lh-teaser-copy: 1.4;
--lh-display: 1;
--lh-kapitel-hl: clamp(24px, 16.86px + 1.830vw, 52px);
--lh-copy: calc(1.6 * var(--t-copy));
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 48px;
--s-10: 64px;
--s-11: 80px;
--s-12: 100px;
--s-13: 130px;
--s-14: 200px;
--header-h: 115px;
--footer-h: 200px;
--sektion-pad-block: var(--s-8);
--hero-zone: 75.1282vw;
--hero-bild-h: 91.2821vw;
--hero-fokus-x: -56.1538vw;
--container-max: 1650px;
--gutter: clamp(20px, -11.2px + 8.000vw, 135px);
--col-gap: var(--s-7);
--mass-fliesstext: 34em;
--bp-sm: 640px;
--bp-md: 900px;
--bp-lg: 1280px;
--bp-xl: 1680px;
--radius: 0;
--border-hair: 1px solid color-mix(in srgb, var(--schwarz) 50%, transparent);
--border-hair-gruen: 1px solid color-mix(in srgb, var(--gruen-900) 50%, transparent);
--border-1: 1px solid var(--gruen-900);
--border-2: 2px solid var(--schwarz);
--shadow-1: 2px 3px 2px rgb(0 0 0 / 0.16);
--ease-aus: cubic-bezier(.2, .8, .25, 1);
--ease-out: ease-out;
--d-mikro: 140ms;
--d-zustand: 180ms;
--d-uebergang: 260ms;
--d-bild: 400ms;
--d-blende: 600ms;
--ziel-min: 44px;
}
@media (min-width: 430px) {
:root {
--hero-zone: clamp(323.05px, 247.03px + 17.68vw, 473.33px);
--hero-bild-h: clamp(392.51px, 283.84px + 25.2729vw, 607.33px);
--hero-fokus-x: clamp(-241.46px, -354.50px + 26.2894vw, -18px);
}
}
@media (min-width: 900px) {
:root {
--header-h: 180px;
--col-gap: var(--s-10);
--sektion-pad-block: 72px;
}
}
@media (min-width: 1280px) {
:root {
--header-h: 215px;
--sektion-pad-block: var(--s-12);
--hero-zone: 36.9792vw;
--hero-bild-h: 47.4479vw;
--hero-fokus-x: -1.40625vw;
}
}
}
/* css/schrift.generiert.css */
@layer base {
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/opensans-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/opensans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/opensans-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("../assets/fonts/sourcesans3-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("../assets/fonts/sourcesans3-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("../assets/fonts/sourcesans3-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("../assets/fonts/sourcesans3-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("../assets/fonts/sourcesans3-900.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Open Sans Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
size-adjust: 106.4%;
ascent-override: 100.4%;
descent-override: 27.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "Source Sans 3 Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
size-adjust: 96.5%;
ascent-override: 106.1%;
descent-override: 41.5%;
line-gap-override: 0%;
}
:root {
--font-body: "Open Sans", "Open Sans Fallback", "Arial", sans-serif;
--font-display: "Source Sans 3", "Source Sans 3 Fallback", "Arial", sans-serif;
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-bold: 700;
--w-black: 900;
}
}
/* css/base.css */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
}
ul[role="list"], ol[role="list"] { list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--c-fokus);
outline-offset: 3px;
}
:focus-visible {
box-shadow: 0 0 0 2px var(--c-fokus-invers);
}
}
@layer base {
:root {
/* Kontrastkorrekturen (DESIGN-SPEC §5) sind Standard — die frühere
   Schaltklasse a11y-korrektur ist hier eingefaltet. */
--scrim-dunkel: 0;
--schleier-hell: 0.22;
--c-gruen-hell-text: #677e3b;
--fs-panel-label: 19px;
--fix-teaser-scrim: none;
--fix-shophint-color: var(--weiss);
--fix-aquarell-lift: 0;
--fix-titelhero-scrim: none;
--fix-katlabel-color: var(--gruen-900);
--fix-statement-bg: var(--gruen-500-50);
--fix-shopkreis-size: 20px;
--fix-shopkreis-flaeche: #677e3b;
--fix-shopkreis-deckkraft: 70%;
}
body {
background: var(--c-flaeche);
color: var(--c-text);
font-family: var(--font-body);
font-weight: var(--w-regular);
font-size: var(--t-body-m);
line-height: var(--lh-body-m);
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.t-hero-xl,
.t-hero-sub {
display: block;
font-family: var(--font-display);
font-weight: var(--w-bold);
line-height: var(--hero-line);
text-wrap: balance;
hyphens: none;
}
.t-hero-xl { font-size: var(--t-hero-xl); }
.t-hero-sub {
font-size: var(--t-hero-sub);
font-family: var(--font-display);
font-weight: var(--w-light);
line-height: var(--hero-line);
margin-block-start: calc(var(--metrik-halb)
* (var(--t-hero-xl) - var(--t-hero-sub)));
}
.t-hero-xl-light {
display: block;
font-family: var(--font-display);
font-weight: var(--w-light);
font-size: var(--t-hero-xl-light);
line-height: var(--hero-line);
text-wrap: balance;
hyphens: none;
}
.t-jobs-block {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-jobs-block);
line-height: 1.3;
text-wrap: balance;
hyphens: none;
}
.t-display {
font-family: var(--font-display);
font-weight: var(--w-black);
font-size: var(--t-display);
line-height: var(--lh-display);
text-wrap: balance;
hyphens: none;
}
.t-h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h1);
line-height: var(--lh-h1);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
}
.t-h1-seite {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h1-seite);
line-height: var(--lh-h1-seite);
color: var(--c-text-auf-weiss);
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h2);
line-height: var(--lh-h2);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
}
.t-h3 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h3);
line-height: var(--lh-h3);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
}
/* Ueberschriften-Rhythmus: Luft nach oben, sobald Inhalt vorausgeht. Steht
   eine Ueberschrift am Anfang ihres Blocks (Sektion, Spalte, Container),
   traegt den Abstand der Aussenabstand der Sektion. */
:is(.t-h1, .t-h2, .t-h3) {
margin-block-start: var(--s-9);
margin-block-end: var(--s-6);
}
:is(.t-h1, .t-h2, .t-h3):first-child { margin-block-start: 0; }
/* Die h2 traegt nach unten eine Stufe weniger als h1 und h3: sie steht naeher
   am Text, den sie ueberschreibt. */
.t-h2 { margin-block-end: var(--s-5); }
@media (min-width: 1280px) {
:is(.t-h1, .t-h2, .t-h3) {
margin-block-start: var(--s-10);
margin-block-end: var(--s-7);
}
:is(.t-h1, .t-h2, .t-h3):first-child { margin-block-start: 0; }
.t-h2 { margin-block-end: var(--s-6); }
}
.t-lead {
font-family: var(--font-body);
font-weight: var(--w-regular);
font-size: var(--t-lead);
line-height: var(--lh-lead);
color: var(--c-text-auf-weiss);
text-wrap: pretty;
}
.t-body-l { font-size: var(--t-body-l); line-height: var(--lh-body-l); }
.t-body-m { font-size: var(--t-body-m); line-height: var(--lh-body-m); }
.t-body-s { font-size: var(--t-body-s); line-height: var(--lh-body-s); }
p, li {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:not([class]) {
color: var(--gruen-900);
text-decoration: underline;
}
a:not([class]):hover {
text-decoration-thickness: 2px;
}
.skip-link {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 100;
transform: translateY(-120%);
padding: var(--s-3) var(--s-5);
background: var(--gruen-900);
color: var(--weiss);
font-size: 16px;
font-weight: var(--w-bold);
text-decoration: none;
transition: transform var(--d-mikro) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }
.umbruch-mobil { display: inline; }
@media (min-width: 900px) {
.umbruch-mobil { display: none; }
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:target { scroll-margin-block-start: calc(var(--header-h) + var(--s-5)); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.erlaubt-blende, .erlaubt-blende * {
transition-duration: 120ms !important;
}
}
@media print {
.header__suche, .hero__slider-punkte, .trust__pfeil, .nav-overlay { display: none; }
body { color: #000; background: #fff; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
}
/* css/layout.css */
@layer layout {
.container {
width: 100%;
max-width: calc(var(--container-max) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
.mass {
max-width: var(--mass-fliesstext);
}
.sektion {
padding-block: var(--sektion-pad-block);
}
.sektion--weiss { background: var(--weiss); }
.sektion--hell { background: var(--gruen-100); }
.sektion--hell-kalt { background: var(--gruen-100-kalt); }
.sektion--gruen { background: var(--gruen-900); color: var(--weiss); }
@media (min-width: 1280px) {
.sektion--standardhoehe { min-height: 577px; }
}
.sektion__h2 { margin-block-end: var(--s-5); }
@media (min-width: 1280px) {
.sektion__h2 { margin-block-end: var(--s-6); }
}

/* Eine Ueberschrift, die allein in ihrem Container steht, ueberschreibt die
   Sektionen darunter, nicht einen Text daneben. Ihr Abstand nach unten waere
   dort ein zweiter Sektionsabstand -- der Sektionsabstand allein genuegt. */
.container > :is(.t-h1, .t-h2, .t-h3):only-child { margin-block-end: 0; }
/* Folgen auf eine solche Ueberschrift direkt Inhalt-Spalten, gehoert die
   Ueberschrift zu ihnen: deren eigener Abstand nach oben genuegt, der
   Sektionsabstand unten entfaellt. */
.sektion:has(> .container > :is(.t-h1, .t-h2, .t-h3):only-child):has(+ .container > .inhalt-spalten) {
padding-block-end: 0;
}
.raster--bild-text {
display: grid;
gap: var(--col-gap);
}
@media (min-width: 900px) {
.raster--bild-text { grid-template-columns: 1fr 1fr; align-items: center; }
}
.raster--info-formular {
display: grid;
gap: var(--s-9);
}
@media (min-width: 900px) {
.raster--info-formular { grid-template-columns: 2fr 3fr; }
}
.raster--icons {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 640px) {
.raster--icons { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
.raster--icons { grid-template-columns: repeat(4, 1fr); }
}
.raster--download {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s-6);
align-items: start;
}
.raster--aktuelles {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"kopf"
"cover"
"text"
"kacheln";
row-gap: 22px;
column-gap: var(--s-8);
}
.aktuelles__text { margin-block-start: 61px; }
@media (min-width: 900px) {
.aktuelles__text { margin-block-start: 0; }
}
@media (min-width: 900px) {
.raster--aktuelles {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"kopf   kacheln"
"text   kacheln"
"cover  kacheln";
gap: var(--s-6) var(--col-gap);
align-content: start;
}
}
@media (min-width: 1280px) {
.raster--aktuelles {
margin-inline: calc(var(--gutter) * -1);
grid-template-columns:
5.4167% 19.9115% 22.6927% 1.9792% 1fr;
grid-template-areas:
".  kopf  cover  .  kacheln"
".  text  cover  .  kacheln"
".  .     cover  .  kacheln";
gap: 0;
align-content: start;
}
.raster--aktuelles > .aktuelles__kacheln { margin-inline: 0; }
.raster--aktuelles > .aktuelles__kopf { margin-block-end: 11px; }
}
.aktuelles__kopf { grid-area: kopf; }
.aktuelles__text { grid-area: text; }
.aktuelles__cover { grid-area: cover; }
.aktuelles__kacheln { grid-area: kacheln; }
.aktuelles__kacheln {
margin-inline: calc(var(--gutter) * -1);
}
@media (min-width: 1280px) {
.aktuelles__kacheln {
margin-inline-start: 0;
margin-inline-end: calc(var(--gutter) * -1);
}
}
}
/* css/komponenten/header.css */
@layer komponenten {
.header {
/* Bis zur Desktop-Navigation beginnen Logo und Burger auf derselben Linie
   wie der Inhalt. Ab 1280px baut sich der Kopf ohnehin um (Burger weg,
   Navigationszeile und Suche kommen dazu) und behaelt seinen engeren Rand. */
--header-rand: var(--gutter);
--nav-rand: clamp(26px, -19.5px + 5.55vw, 87px);
position: relative;
z-index: 20;
background: var(--weiss);
}
.header__zeile1 {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-5);
block-size: var(--header-h);
padding-inline: var(--header-rand);
}
@media (min-width: 1280px) {
.header { --header-rand: clamp(26px, 15.55px + 2.680vw, 67px); }
.header__zeile1 {
block-size: calc(var(--header-h) - 57px);
}
}
.header__logo {
display: block;
inline-size: clamp(168.7px, 122.8px + 11.77vw, 273.8px);
flex: none;
}
.header__logo svg,
.header__logo img { inline-size: 100%; block-size: auto; }
.header__suche {
display: none;
}
@media (min-width: 1280px) {
.header__suche {
display: flex;
align-items: center;
position: absolute;
inset-inline-start: 41.82%;
inset-block-start: 48px;
inline-size: clamp(340px, 14.00px + 25.469vw, 503px);
block-size: 51px;
border: var(--border-hair);
background: transparent;
}
}
.header__suche input {
flex: 1 1 auto;
min-inline-size: 0;
padding-inline: var(--s-5);
border: 0;
background: transparent;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--c-text);
}
.header__suche input::placeholder {
color: var(--c-text);
opacity: 1;
}
.header__suche button {
display: grid;
place-items: center;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
margin-inline-end: var(--s-2);
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
}
.header__suche button svg { inline-size: 24px; block-size: 24px; }
/* Fokus der Suche: der allgemeine Umriss (2px, 3px nach aussen versetzt) sass
   um das nackte Eingabefeld -- er sprang oben und unten ueber den Rahmen des
   Suchfelds hinaus und endete mittendrin vor der Lupe. Die Marke gehoert um
   das ganze Feld; der Knopf bekommt seine eigene, nach innen versetzt, damit
   sie im Feld bleibt. */
.header__suche:has(input:focus-visible),
.nav-overlay__suche:has(input:focus-visible) {
outline: 2px solid var(--c-fokus);
outline-offset: 2px;
}
.nav-overlay__suche:has(input:focus-visible) { outline-color: var(--c-fokus-invers); }
.header__suche input:focus-visible,
.nav-overlay__suche input:focus-visible {
outline: none;
box-shadow: none;
}
.header__suche button:focus-visible,
.nav-overlay__suche button:focus-visible {
outline: 2px solid var(--c-fokus);
outline-offset: -4px;
box-shadow: none;
}
.header__sprachen {
display: none;
}
@media (min-width: 1280px) {
.header__sprachen {
display: flex;
grid-column: 3;
align-items: center;
gap: var(--s-1);
}
.header__sprache {
display: grid;
place-items: center;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
text-decoration: none;
}
/* Nicht aktive Sprache abgeschwaecht — greift erst, sobald eine zweite
   Sprache in der Site-Konfiguration aktiviert ist. */
.header__sprache:not([aria-current]) { opacity: 0.5; }
.header__sprache:not([aria-current]):hover,
.header__sprache:not([aria-current]):focus-visible { opacity: 1; }
}
@media (min-width: 1680px) {
.header__sprachen { margin-inline-end: 151px; }
}
.flagge {
display: grid;
inline-size: 35px;
block-size: 20.4px;
grid-template-rows: repeat(3, 1fr);
flex: none;
}
.flagge i:nth-child(1) { background: var(--schwarz); }
.flagge i:nth-child(2) { background: var(--rot); }
.flagge i:nth-child(3) { background: var(--gelb); }
/* Englisch: Union Jack als SVG-Datei, die drei Streifen-<i> entfallen */
.flagge--en { background: url("../assets/icons/flagge-en.svg") center / 100% 100% no-repeat; }
.flagge--en i { display: none; }
.header__burger {
display: grid;
place-items: center;
inline-size: 48px;
block-size: 48px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
/* Ohne feste Spalte landete der Burger in der mittleren Rasterspalte und die
   Fuge dahinter schob ihn 20px vom Rand weg. */
grid-column: 3;
justify-self: end;
/* Die Klickflaeche ist 48px breit, das Zeichen nur 39px. Der halbe Unterschied
   nach aussen laesst die Balken auf derselben Linie enden wie das Logo
   beginnt, ohne die Zielflaeche zu verkleinern. */
margin-inline-end: -4.5px;
}
@media (min-width: 1280px) {
.header__burger { display: none; }
}
.burger-icon {
position: relative;
display: block;
inline-size: 39px;
block-size: 24px;
}
.burger-icon i {
position: absolute;
inset-inline: 0;
block-size: 2px;
background: var(--schwarz);
transition: transform var(--d-uebergang) var(--ease-aus),
opacity var(--d-mikro) linear;
}
.burger-icon i:nth-child(1) { inset-block-start: 0; }
.burger-icon i:nth-child(2) { inset-block-start: 11px; }
.burger-icon i:nth-child(3) { inset-block-start: 22px; }
.header__burger[aria-expanded="true"] .burger-icon i:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
.header__burger[aria-expanded="true"] .burger-icon i:nth-child(2) {
opacity: 0;
}
.header__burger[aria-expanded="true"] .burger-icon i:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
.header__nav {
display: none;
}
@media (min-width: 1280px) {
.header__nav {
display: block;
border-block-start: var(--border-hair);
}
.header__nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
gap: clamp(28px, -78px + 8.28vw, 81px);
block-size: 57px;
padding-inline-end: var(--nav-rand);
list-style: none;
}
}
.header__nav a {
font-size: var(--t-nav);
font-weight: var(--w-regular);
color: var(--schwarz);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color var(--d-mikro) var(--ease-out);
}
.header__nav a[aria-current="page"],
.header__nav a.ist-hervorgehoben {
font-weight: var(--w-bold);
color: var(--gruen-500);
}
.header__nav a:hover { color: var(--gruen-500); }
.header__nav a[aria-current="page"]:hover { color: var(--gruen-500); }
.nav-overlay {
/* Frueher waren Flaeche und Inhalt auf feste 724px gesetzt und die Hoehe
   wurde von 0 aufgezogen. Das hatte zwei Fehler: auf kurzen Geraeten lag das
   Suchfeld unerreichbar unterhalb des Bildschirms, auf langen blieb unter der
   gruenen Flaeche ein Streifen Seite stehen -- und die wachsende Hoehe gab
   den fertig gesetzten Inhalt wie unter einem Rollo frei, waehrend darunter
   die Seite durchblitzte. Jetzt fuellt die Flaeche den Bildschirm und faehrt
   als Ganzes hinter dem Kopf hervor (transform statt Layout, deshalb ohne
   Ruckeln); reicht der Platz nicht, laesst sie sich scrollen. */
position: fixed;
inset-block-start: var(--header-h);
inset-inline: 0;
z-index: 15;
block-size: calc(100vh - var(--header-h));
block-size: calc(100dvh - var(--header-h));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--gruen-500);
visibility: hidden;
translate: 0 -100%;
transition: translate var(--d-uebergang) var(--ease-aus),
visibility 0s linear var(--d-uebergang);
}
.nav-overlay[data-offen],
.nav-overlay:target {
visibility: visible;
translate: 0 0;
transition: translate var(--d-uebergang) var(--ease-aus),
visibility 0s linear 0s;
}
@media (min-width: 1280px) {
.nav-overlay { display: none; }
}
.nav-overlay__inner {
display: flex;
flex-direction: column;
padding-inline: var(--gutter);
/* Der Entwurfswert 164px stammt von der festen 724px-Flaeche. Am Bildschirm
   gemessen bleibt sonst auf kurzen Geraeten kein Platz fuer Suchfeld und
   Shop-Kreis, deshalb waechst der Kopfabstand jetzt mit der Bildschirmhoehe. */
padding-block-start: clamp(64px, 12vh, 164px);
min-block-size: 100%;
}
.nav-overlay__liste {
list-style: none;
display: grid;
gap: 0;
}
.nav-overlay__liste a {
display: flex;
align-items: center;
min-block-size: var(--ziel-min);
block-size: 45.5px;
font-size: var(--t-nav);
font-weight: var(--w-regular);
color: var(--schwarz);
text-transform: uppercase;
text-decoration: none;
}
.nav-overlay__liste a[aria-current="page"],
.nav-overlay__liste a.ist-hervorgehoben {
font-weight: var(--w-bold);
color: var(--weiss);
}
.nav-overlay__shop {
align-self: flex-end;
margin-block-start: var(--s-6);
margin-inline-end: var(--gutter);
}
.nav-overlay__suche {
margin-block-start: auto;
margin-block-end: 40px;
display: flex;
align-items: center;
inline-size: 318px;
max-inline-size: 100%;
block-size: 51px;
border: 1px solid var(--weiss);
color: var(--gruen-900);
}
.nav-overlay__suche input {
flex: 1 1 auto;
min-inline-size: 0;
padding-inline: var(--s-5);
border: 0;
background: transparent;
font-size: 16px;
color: var(--schwarz);
}
.nav-overlay__suche input::placeholder { color: var(--schwarz); opacity: 1; }
.nav-overlay__suche button {
display: grid;
place-items: center;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
border: 0;
background: transparent;
color: var(--schwarz);
cursor: pointer;
}
.nav-overlay__suche button svg { inline-size: 24px; block-size: 24px; }
.nav-overlay__sprachen {
position: absolute;
inset-block-start: var(--s-8);
inset-inline-start: var(--gutter);
display: flex;
align-items: center;
gap: var(--s-5);
}
.nav-overlay__sprache {
display: flex;
align-items: center;
gap: var(--s-2);
min-block-size: var(--ziel-min);
font-size: var(--t-body-s);
font-weight: var(--w-bold);
color: var(--schwarz);
text-decoration: none;
}
.nav-overlay__sprache:not([aria-current]) { opacity: 0.5; }
body[data-nav-offen] { overflow: hidden; }
/* Weniger Bewegung: kein Einfahren, nur ein kurzes Aufblenden an Ort und
   Stelle. Der Versatz wird zurueckgenommen, sonst staende die Flaeche
   unsichtbar ueber dem Bildschirm. */
@media (prefers-reduced-motion: reduce) {
.nav-overlay {
transition: opacity 120ms linear, visibility 0s linear 120ms;
translate: 0 0;
opacity: 0;
pointer-events: none;
}
.nav-overlay[data-offen], .nav-overlay:target {
translate: 0 0;
opacity: 1;
pointer-events: auto;
transition: opacity 120ms linear, visibility 0s linear 0s;
}
}
}
/* css/komponenten/hero.css */
@layer komponenten {
.hero {
position: relative;
isolation: isolate;
background: var(--hero-ton, var(--gruen-900));
}
.hero__media {
position: relative;
display: block;
block-size: var(--hero-zone);
overflow: hidden;
}
.hero__media picture {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: -1;
display: block;
block-size: var(--hero-bild-h);
}
.hero__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--hero-fokus-x, 50%) 100%;
}
.hero--scrim .hero__media::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 47.8%;
background: var(--scrim-hero);
pointer-events: none;
}
@media (min-width: 1280px) {
.hero--scrim .hero__media::before { block-size: 64.2%; }
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--fix-titelhero-scrim, none),
linear-gradient(to bottom,
rgb(0 0 0 / var(--scrim-dunkel)),
rgb(0 0 0 / calc(var(--scrim-dunkel) * 0.3)));
pointer-events: none;
}
.hero__inhalt {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 100%;
padding-inline: var(--hero-rand, clamp(20px, -2.24px + 5.703vw, 100px)) 20px;
--hero-fuss: clamp(18px, 6.28px + 3.007vw, 64px);
padding-block-end: calc(var(--hero-fuss) - var(--hero-line) / 2
+ var(--metrik-halb) * var(--t-hero-sub));
color: var(--weiss);
}
.hero__titel { margin: 0; }
.hero__titel .marke { color: var(--gruen-500); font-weight: var(--w-bold); }
.hero__punkte {
position: absolute;
inset-block-end: min(53px, 2.7604vw);
inset-inline-end: min(57px, 2.9688vw);
display: none;
gap: 22px;
list-style: none;
z-index: 2;
}
@media (min-width: 640px) {
.hero__punkte { display: flex; }
}
.hero__punkt {
position: relative;
inline-size: 15px;
block-size: 15px;
padding: 0;
border: 1px solid var(--weiss);
background: transparent;
cursor: pointer;
}
.hero__punkt::after {
content: "";
position: absolute;
inset: 50%;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
translate: -50% -50%;
}
.hero__punkt[aria-current="true"],
.hero__punkt--aktiv { background: var(--weiss); }
ul.hero__punkte .hero__punkt { cursor: default; }
.hero__shop {
position: absolute;
inset-block-start: clamp(28px, 21.28px + 1.7225vw, 43.33px);
inset-inline-end: clamp(-13.33px, 17.35px + -2.3966vw, 8px);
z-index: 2;
}
@media (min-width: 1280px) {
.hero__shop {
inset-block-start: min(65px, 3.3854vw);
inset-inline-end: max(-20px, -1.0417vw);
}
}
.hero__slides { display: grid; block-size: 100%; }
.hero__slide {
grid-area: 1 / 1;
opacity: 0;
transition: opacity var(--d-blende) ease-in-out;
}
.hero__slide[data-aktiv] { opacity: 1; }
.hero__slides:not([data-js]) .hero__slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero__slide { transition: none; }
}
.hero--titel .hero__band {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 130px;
background: var(--weiss);
}
.hero--titel {
--hero-zone: 75.1282vw;
--hero-bild-h: 84.1026vw;
--hero-bild-oben: -8.9744vw;
--hero-fokus-x: -4.8718vw;
}
@media (min-width: 430px) {
.hero--titel {
--hero-zone: clamp(323.05px, 204.19px + 27.6412vw, 558px);
--hero-bild-h: clamp(361.64px, 154.72px + 48.1212vw, 770.67px);
--hero-bild-oben: clamp(-132px, 8.66px + -10.9894vw, -38.59px);
--hero-fokus-x: clamp(-31.33px, -15.7px + -1.2212vw, -20.95px);
}
}
@media (min-width: 1280px) {
.hero--titel {
--hero-zone: 43.5938vw;
--hero-bild-h: 60.2083vw;
--hero-bild-oben: -10.3125vw;
--hero-fokus-x: -2.4479vw;
}
}
.hero--titel .hero__media picture {
inset-block-start: var(--hero-bild-oben);
inset-block-end: auto;
}
.hero--titel .hero__inhalt {
--hero-fuss: clamp(49px, 41.1px + 2.0261vw, 80px);
padding-block-end: calc(var(--hero-fuss) - var(--hero-line) / 2
+ var(--metrik-halb) * var(--t-hero-xl));
}
.hero--titel .hero__zierlinie {
position: absolute;
inset-block-end: 5.4688vw;
inset-inline-start: 23.8542vw;
inline-size: 65.1563vw;
block-size: 1px;
background: rgb(255 255 255 / 0.5);
display: none;
pointer-events: none;
z-index: 1;
}
@media (min-width: 1280px) {
.hero--titel .hero__zierlinie { display: block; }
}
.hero--titel .shop-tab {
display: none;
inset-block-start: 7.9167vw;
z-index: 2;
}
@media (min-width: 900px) {
.hero--titel .shop-tab { display: flex; }
}
}
/* css/komponenten/aktuelles.css */
@layer komponenten {
.aktuelles {
padding-block-start: clamp(21px, -7.0px + 7.19vw, 132px);
padding-block-end: clamp(21px, -5.0px + 6.67vw, 123px);
}
.aktuelles__hl {
margin: 0;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-teaser-block);
line-height: 1.14;
color: var(--c-text-auf-weiss);
hyphens: none;
}
@media (min-width: 1280px) {
.aktuelles__hl { line-height: 1.3; }
.aktuelles__kopf { padding-block-start: 40px; }
}
.aktuelles__copy {
margin: 0;
font-size: clamp(18px, 17.49px + 0.131vw, 20px);
font-weight: var(--w-bold);
line-height: 1.35;
color: var(--c-text-auf-weiss);
hyphens: none;
}
.aktuelles__cover { list-style: none; }
.shop-cta {
padding-block-start: clamp(27px, 1.0px + 6.67vw, 129px);
}
.shop-cta .container {
display: flex;
justify-content: center;
}
@media (min-width: 900px) {
.shop-cta .container { justify-content: flex-start; }
}
/* Produktseite: h1 links, Shop-Button oben rechts daneben; schmal bricht der
   Button unter die Ueberschrift. */
.kopf-shop {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-5) var(--s-8);
}
.kopf-shop > .t-h1 {
flex: 1 1 28rem;
margin: 0;
}
.kopf-shop > .btn { flex: none; }
}
/* css/komponenten/teaser-kachel.css */
@layer komponenten {
.kachel {
position: relative;
display: block;
isolation: isolate;
overflow: hidden;
aspect-ratio: 392 / 195;
background: var(--kachel-ton, var(--gruen-900));
color: var(--weiss);
text-decoration: none;
}
@media (min-width: 1280px) {
.kachel { aspect-ratio: 960 / 480; }
}
.kachel__media {
position: absolute;
inset: 0;
z-index: -2;
}
.kachel__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--kachel-fokus, 50% 50%);
transition: scale var(--d-bild) var(--ease-aus);
}
.kachel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--fix-teaser-scrim);
pointer-events: none;
transition: opacity var(--d-bild) var(--ease-aus);
}
.kachel__inhalt {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: auto auto 1fr;
block-size: 100%;
padding: clamp(12px, 4.35px + 1.961vw, 42px) clamp(38px, 35.20px + 0.719vw, 49px);
}
.kachel__hl {
margin: 0;
font-family: var(--font-body);
font-size: var(--t-teaser-hl);
font-weight: var(--w-bold);
line-height: 1.25;
text-wrap: balance;
}
@media (min-width: 1280px) {
.kachel__hl { line-height: var(--lh-teaser-hl); }
}
.kachel__copy {
margin: clamp(6px, 5.24px + 0.196vw, 9px) 0 0;
hyphens: none;
max-inline-size: 20em;
font-size: var(--t-teaser-copy);
font-weight: var(--w-bold);
line-height: var(--lh-teaser-copy);
}
.kachel__fuss {
align-self: end;
justify-self: end;
padding-block-end: clamp(6px, 2.94px + 0.7843vw, 18px);
}
.kachel__freisteller {
position: absolute;
z-index: 0;
inset-inline-end: var(--freisteller-rechts, 3%);
inset-block-end: var(--freisteller-unten, 16%);
inline-size: var(--freisteller-breite, 28%);
pointer-events: none;
}
.kachel__freisteller img { filter: drop-shadow(var(--shadow-1)); }
.kachel__link {
color: inherit;
text-decoration: none;
}
.kachel__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.kachel:hover .kachel__media img { scale: 1.03; }
.kachel:hover::before { opacity: 1.06; }
.kachel__link:focus-visible {
outline: 2px solid var(--weiss);
outline-offset: 3px;
box-shadow: 0 0 0 2px var(--gruen-900);
}
.kachel:has(.kachel__link:focus-visible) {
outline: 2px solid var(--weiss);
outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
.kachel:hover .kachel__media img { scale: 1; }
}
.kachel-stapel {
display: grid;
gap: 12px;
}
@media (min-width: 1280px) {
.kachel-stapel { gap: 15px; }
}
}
/* css/komponenten/icon-text.css */
@layer komponenten {
.werte {
position: relative;
isolation: isolate;
padding-block: clamp(28px, 7.86px + 5.1634vw, 107px)
clamp(40px, 17.06px + 5.882vw, 130px);
}
.werte__grund {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.werte__grund img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.werte__grund::after {
content: "";
position: absolute;
inset: 0;
background: rgb(255 255 255 / var(--schleier-hell));
opacity: 1;
pointer-events: none;
}
.werte__kopf {
text-align: start;
}
.werte__lead {
margin-block-start: clamp(14px, 4.57px + 2.4183vw, 51px);
font-size: clamp(16px, 9.37px + 1.699vw, 42px);
line-height: 1.24;
color: var(--c-text-auf-weiss);
max-inline-size: 28em;
}
.werte__lead strong { font-weight: var(--w-bold); }
.werte__liste {
margin-block-start: clamp(34px, 26.61px + 1.8954vw, 63px);
list-style: none;
}
.wert {
position: relative;
display: grid;
justify-items: center;
text-align: center;
padding: clamp(24px, 15.08px + 2.288vw, 59px) 12px;
color: var(--c-text-auf-weiss);
}
.wert + .wert { border-block-start: var(--border-1); }
@media (min-width: 640px) {
.wert:nth-child(2n) { border-inline-start: var(--border-1); }
.wert:nth-child(-n+2) { border-block-start: 0; }
.wert:nth-child(2) { border-block-start: 0; }
}
/* Trennlinien als Rahmen statt als absolut positionierte 1px-Flaeche:
   Rahmen rastet der Browser auf ganze Geraetepixel ein, die Linien sind
   daher bei jeder Spaltenbreite gleich dick (bruchteilige x-Positionen
   wurden sonst ueber zwei Pixel geglaettet). Der vertikale Abstand steht
   als Margin statt Padding ausserhalb des Rahmens, damit die Linien genau
   vom Icon bis zum Textende reichen. */
@media (min-width: 1280px) {
.wert {
border-block-start: 0;
padding-block: 0;
margin-block: clamp(24px, 15.08px + 2.288vw, 59px);
}
.wert + .wert { border-inline-start: var(--border-1); border-block-start: 0; }
}
.wert__icon {
inline-size: clamp(80px, 62.16px + 4.575vw, 150px);
aspect-ratio: 1;
margin-block-end: clamp(16px, 13.55px + 0.6275vw, 25.6px);
}
.wert__icon svg { inline-size: 100%; block-size: 100%; }
.wert__titel {
margin: 0 0 clamp(22px, 20.22px + 0.4575vw, 29px);
font-family: var(--font-body);
font-size: var(--t-icon-titel);
font-weight: var(--w-bold);
line-height: clamp(20px, 17.96px + 0.5229vw, 28px);
}
.wert__copy {
margin: 0;
font-size: var(--t-body-m);
line-height: 1.43;
hyphens: auto;
}
@media (min-width: 1280px) {
.wert__copy { line-height: 1.4; }
}
}
/* css/komponenten/trust-reihe.css */
@layer komponenten {
.trust {
position: relative;
text-align: center;
padding-block-start: clamp(50px, 21.5px + 7.32vw, 162px);
padding-block-end: clamp(20px, -7.8px + 7.12vw, 129px);
}
.trust__intro {
margin-inline: auto;
max-inline-size: 30em;
font-size: var(--t-trust-intro);
line-height: 1.24;
color: var(--schwarz);
text-wrap: balance;
}
.trust__intro strong {
font-weight: var(--w-bold);
color: var(--gruen-900);
}
.trust__buehne {
position: relative;
margin-block-start: clamp(19px, -9.3px + 7.25vw, 130px);
}
.trust__spur {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(33px, 20.00px + 3.333vw, 84px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
padding-inline: var(--s-2);
list-style: none;
}
@media (min-width: 900px) {
.trust__spur { justify-content: center; overflow-x: hidden; }
}
.trust__spur li {
flex: none;
scroll-snap-align: center;
}
.trust__spur img {
block-size: var(--logo-h-mob, 70px);
inline-size: auto;
object-fit: contain;
}
@media (min-width: 900px) {
.trust__spur img { block-size: var(--logo-h, 130px); }
}
.trust__pfeil {
display: none;
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
padding: 0;
border: 0;
background: transparent;
color: var(--schwarz);
cursor: pointer;
}
@media (min-width: 900px) {
.trust__pfeil { display: grid; place-items: center; }
.trust__pfeil--links { inset-inline-start: 0; }
.trust__pfeil--rechts { inset-inline-end: 0; }
}
@media (min-width: 1280px) {
.trust__pfeil--links { inset-inline-start: -61px; }
.trust__pfeil--rechts { inset-inline-end: -61px; }
}
.trust__pfeil svg { inline-size: 45px; block-size: 45px; }
.trust__punkte {
display: flex;
justify-content: center;
gap: clamp(8.5px, 6.33px + 0.556vw, 17px);
margin-block-start: clamp(15px, -2.1px + 4.38vw, 82px);
list-style: none;
}
.trust__punkt {
position: relative;
inline-size: clamp(5px, 3.73px + 0.327vw, 10px);
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--schwarz);
cursor: pointer;
}
.trust__punkt::after {
content: "";
position: absolute;
inset: 50%;
inline-size: var(--ziel-min);
block-size: var(--ziel-min);
translate: -50% -50%;
}
.trust__punkt[aria-current="true"],
.trust__punkt--aktiv { background: var(--gruen-500); }
ul.trust__punkte .trust__punkt { cursor: default; }
.trust__spur:focus-visible {
outline: 2px solid var(--c-fokus);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.trust__spur { overflow-x: auto; scrollbar-width: auto; }
}
}
/* css/komponenten/shop-einstieg.css */
@layer komponenten {
.shop-kreis {
display: grid;
place-items: center;
inline-size: clamp(115px, 75.74px + 10.065vw, 269px);
aspect-ratio: 1;
border-radius: 50%;
background: color-mix(in srgb,
var(--fix-shopkreis-flaeche, var(--gruen-500))
var(--kreis-deckkraft, var(--fix-shopkreis-deckkraft, 65%)),
transparent);
color: var(--weiss);
font-weight: var(--w-bold);
font-size: max(var(--t-shopkreis), var(--fix-shopkreis-size));
line-height: 1.34;
text-align: center;
text-decoration: none;
transition: background var(--d-zustand) var(--ease-out);
}
@media (min-width: 1280px) {
.shop-kreis { --kreis-deckkraft: 58%; }
}
.shop-kreis:hover {
background: color-mix(in srgb, var(--gruen-500) 74%, transparent);
}
.shop-kreis:focus-visible {
outline-color: var(--weiss);
box-shadow: 0 0 0 2px var(--gruen-900);
}
.shop-kreis--auf-gruen {
background: color-mix(in srgb, var(--weiss) 65%, transparent);
color: var(--gruen-900);
}
.shop-kreis--auf-gruen:hover {
background: color-mix(in srgb, var(--weiss) 80%, transparent);
}
.shop-tab {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
inline-size: 186px;
block-size: 50px;
padding-inline-start: var(--s-4);
background: var(--gruen-900);
color: var(--weiss);
/* Eigener Wert: der Shop-Tab ist ein Einstieg, kein Menuepunkt, und bleibt
   bei 20px, waehrend das Menue auf Flieesstextgroesse steht. */
font-size: 20px;
font-weight: var(--w-regular);
text-decoration: none;
transition: translate var(--d-uebergang) var(--ease-aus);
}
.shop-tab:hover { translate: -8px 0; }
.shop-hinweis {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--s-2);
color: var(--fix-shophint-color);
font-size: var(--t-shop-hinweis);
font-weight: var(--w-bold);
line-height: 1.375;
}
.shop-hinweis__icon {
grid-row: 1 / 3;
inline-size: clamp(21.9px, 15.1px + 1.74vw, 48.6px);
color: var(--gruen-500);
}
.shop-hinweis__sub {
display: none;
font-weight: var(--w-light);
}
@media (min-width: 1280px) {
.shop-hinweis__sub { display: block; }
}
}
/* css/komponenten/basis-teile.css */
@layer komponenten {
.btn {
display: inline-grid;
place-items: center;
inline-size: clamp(244px, 227.5px + 4.23vw, 310px);
min-block-size: clamp(37px, 34.5px + 0.65vw, 47px);
padding-inline: var(--s-4);
border: 0;
border-radius: var(--radius);
background: var(--gruen-900);
color: var(--weiss);
font-size: var(--t-button);
font-weight: var(--w-bold);
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--d-mikro) var(--ease-out);
}
.btn:hover {
background: color-mix(in srgb, var(--gruen-900) 86%, black);
}
.btn--breit { inline-size: 100%; }
/* Shop-Button: Pfeil, der beim Hover vorrueckt, und ein einzelner Lichtstreif,
   sobald der Button ganz im Bild ist (seite.js setzt data-glanz="an"). Kein
   Dauer-Effekt: einmal pro Seitenaufruf, dann ruht er. */
.btn--shop {
grid-auto-flow: column;
justify-content: center;
column-gap: 0.6em;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn__pfeil {
inline-size: 1em;
block-size: 1em;
transition: translate var(--d-uebergang) var(--ease-aus);
}
.btn--shop:hover .btn__pfeil,
.btn--shop:focus-visible .btn__pfeil { translate: 0.3em 0; }
.btn--shop::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.22) 50%, transparent 65%);
translate: -100% 0;
pointer-events: none;
}
/* Ein Durchlauf = 1,2 s Streif + 4,8 s Ruhe. Nach --glanz-runden Durchlaeufen
   steht der Button still (WCAG 2.2.2: keine endlose Bewegung ohne Stopp).
   Ausserhalb des Bildes und unter dem Mauszeiger pausiert der Streif. */
.btn--shop { --glanz-runden: 3; }
.btn--shop[data-glanz]::after {
animation: btn-glanz 6s linear 250ms var(--glanz-runden) both paused;
}
.btn--shop[data-glanz="an"]::after { animation-play-state: running; }
.btn--shop[data-glanz="an"]:hover::after { animation-play-state: paused; }
@keyframes btn-glanz {
0% { translate: -100% 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
20%, 100% { translate: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn--shop::after { display: none; }
.btn__pfeil { transition: none; }
.btn--shop:hover .btn__pfeil,
.btn--shop:focus-visible .btn__pfeil { translate: none; }
}
.cover-paar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.59%;
}
.cover figure { margin: 0; }
.cover img { inline-size: 100%; }
.cover__link {
position: relative;
display: block;
}
.cover__pdf {
position: absolute;
inset-inline-end: 9.6%;
inset-block-end: -16.35%;
inline-size: 23.6%;
color: var(--gruen-500);
pointer-events: none;
}
.cover__pdf svg { inline-size: 100%; block-size: auto; }
.cover figcaption {
margin-block-start: 25.9%;
font-size: var(--t-body-s);
line-height: 1.375;
color: var(--c-text-auf-weiss);
}
@media (max-width: 899px) {
.cover figcaption {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.cover figcaption b { font-weight: var(--w-bold); }
.download-liste {
--dl-icon: clamp(37px, 33.69px + 0.8497vw, 50px);
--t-download: clamp(16px, 13.96px + 0.5229vw, 24px);
display: grid;
row-gap: calc(0.3176 * var(--dl-icon));
}
.download-zeile {
display: grid;
grid-template-columns: var(--dl-icon) minmax(0, 1fr);
align-items: start;
column-gap: calc(0.34 * var(--dl-icon));
min-block-size: var(--ziel-min);
color: var(--c-text-auf-weiss);
text-decoration: none;
}
.download-zeile__icon {
inline-size: 100%;
color: var(--gruen-900);
transition: translate var(--d-mikro) var(--ease-out);
}
.download-zeile__icon svg { inline-size: 100%; block-size: auto; }
.download-zeile:hover .download-zeile__icon { translate: 0 2px; }
.download-zeile:hover .download-zeile__name { text-decoration: underline; }
.download-zeile__name {
font-size: var(--t-download);
line-height: 1.4;
margin-block-start: calc(0.78 * var(--dl-icon) - 1.0879 * var(--t-download));
hyphens: manual;
overflow-wrap: break-word;
}
.download-zeile__meta { font-size: var(--t-body-s); }
.footer {
--footer-rand: clamp(20px, -3.55px + 6.038vw, 105px);
display: grid;
align-content: start;
gap: var(--s-6);
block-size: var(--footer-h);
padding-block-start: clamp(46px, 41.92px + 1.046vw, 62px);
padding-inline: var(--footer-rand);
background: var(--gruen-900);
color: var(--weiss);
font-size: var(--t-footer);
line-height: var(--lh-footer);
letter-spacing: 0.016em;
}
@media (min-width: 900px) {
.footer {
grid-template-columns: 1fr auto;
align-items: start;
}
}
.footer__adresse {
font-style: normal;
line-height: clamp(14.2px, 13.69px + 0.131vw, 16.2px);
}
.footer__marke {
font-size: var(--t-footer-marke);
font-weight: var(--w-bold);
}
.footer__adresse a {
color: var(--weiss);
text-decoration: none;
}
.footer__adresse a:hover { text-decoration: underline; }
.footer__recht {
display: flex;
gap: clamp(20px, 11.08px + 2.288vw, 55px);
list-style: none;
}
@media (min-width: 900px) {
.footer__recht { align-self: end; }
}
.footer__recht a {
display: flex;
align-items: center;
min-block-size: var(--ziel-min);
color: var(--weiss);
text-decoration: none;
}
.footer__recht a:hover { text-decoration: underline; }
.footer a:focus-visible {
outline-color: var(--weiss);
box-shadow: 0 0 0 2px var(--gruen-900);
}
.platzhalter {
display: grid;
place-content: center;
gap: var(--s-2);
padding: var(--s-6);
border-radius: var(--radius);
background: var(--gruen-100);
color: var(--gruen-900);
text-align: center;
}
.platzhalter__titel {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-body-l);
line-height: 1.2;
}
.platzhalter__text {
font-size: var(--t-body-s);
line-height: var(--lh-body-s);
max-inline-size: 32ch;
margin-inline: auto;
}
.platzhalter--flaeche {
background: var(--gruen-500);
color: var(--weiss);
}
.platzhalter--auf-dunkel {
background: color-mix(in srgb, var(--gruen-900) 82%, transparent);
color: var(--weiss);
}
}
/* css/komponenten/bild-rahmen.css */
@layer komponenten {
.rahmen {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: var(--rahmen-ar);
background: var(--rahmen-ton, var(--gruen-100));
}
.rahmen--frei { background: transparent; }
.rahmen--bleed {
inline-size: var(--rahmen-w);
margin-inline-start: calc(var(--rahmen-x) - var(--gutter));
}
.unterseite main {
overflow-x: clip;
}
.rahmen picture {
position: absolute;
inset-block-start: var(--bild-oben);
inset-inline-start: var(--bild-links);
inline-size: var(--bild-breite);
block-size: var(--bild-hoehe);
display: block;
max-inline-size: none;
}
.rahmen img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
/* Bild im eigenen Seitenverhaeltnis, ohne die pixelkalibrierten Anschnitte der
   Entwurfs-Rahmen. Standard fuer neue Bilder in den Inhalt-Spalten. */
.rahmen--auto {
aspect-ratio: auto;
inline-size: 100%;
margin-inline-start: 0;
background: transparent;
}
.rahmen--auto picture {
position: static;
inline-size: 100%;
block-size: auto;
}
.rahmen--auto img {
/* block statt inline: sonst bleibt unter dem Bild der Baseline-Zwischenraum
   stehen und zwei gestapelte Bilder stossen nicht sauber aneinander. */
display: block;
block-size: auto;
object-fit: contain;
}
.rahmen--310 {
--rahmen-ar: 309 / 212;
--rahmen-w: 79.2308vw;
--rahmen-x: 9.2308vw;
--bild-breite: 113.251%;
--bild-hoehe: 104.854%;
--bild-links: -9.374%;
--bild-oben: 0%;
}
.rahmen--5ad {
--rahmen-ar: 403 / 277;
--rahmen-w: 103.3333vw;
--rahmen-x: -3.3333vw;
--bild-breite: 138.913%;
--bild-hoehe: 134.734%;
--bild-links: -1.489%;
--bild-oben: -34.657%;
}
.rahmen--3be {
--rahmen-ar: 400 / 275;
--rahmen-w: 102.5641vw;
--rahmen-x: 0vw;
--bild-breite: 128.890%;
--bild-hoehe: 125.422%;
--bild-links: -21.250%;
--bild-oben: -12.727%;
}
@media (min-width: 900px) {
.rahmen--bleed {
inline-size: auto;
margin-inline-start: 0;
}
.rahmen--310 {
--rahmen-ar: 780 / 535;
--bild-breite: 113.220%;
--bild-hoehe: 104.855%;
--bild-links: -9.358%;
--bild-oben: 0%;
}
.rahmen--5ad {
--rahmen-ar: 780 / 535;
--bild-breite: 138.622%;
--bild-hoehe: 134.735%;
--bild-links: -1.410%;
--bild-oben: -34.735%;
}
.rahmen--3be {
--rahmen-ar: 780 / 535;
--bild-breite: 128.588%;
--bild-hoehe: 125.421%;
--bild-links: -20.897%;
--bild-oben: -12.710%;
}
}
}
/* css/komponenten/inhalt-spalten.css */
@layer komponenten {
/* Frueher auf :where(.unterseite) — die Klasse vergibt der CMS-Build nicht,
   deshalb blieben Lead- und Kapitel-Zeilenhoehen wirkungslos (var() ungueltig
   -> geerbter Wert). Jetzt auf :root, damit die entworfenen Werte greifen. */
:root {
--lh-lead-u: clamp(26px, 16.06px + 2.549vw, 65px);
--lh-copy-kap1: var(--lh-copy);
--lh-text-a: var(--lh-copy);
}
.lead {
margin-block-start: clamp(35.2px, 11.11px + 6.176vw, 129.7px);
font-family: var(--font-display);
font-size: var(--t-lead);
line-height: var(--lh-lead-u);
color: var(--gruen-900);
text-wrap: pretty;
hyphens: none;
}
.lead__a,
.lead__c { font-weight: var(--w-medium); }
.lead__b { font-weight: var(--w-black); }
@media (min-width: 900px) {
.lead__a,
.lead__c { font-weight: var(--w-regular); }
.lead__b { font-weight: var(--w-bold); }
}
.inhalt-spalten {
margin-block-start: clamp(19.8px, 8px + 3.026vw, 66.1px);
/* Eine Fuge fuer alles: zwischen den Bausteinen einer Spalte, zwischen den
   vollbreiten Bloecken und -- einspaltig -- zwischen linker und rechter
   Spalte. Ab 900px traegt sie zusaetzlich die Zeilenfuge des Rasters. */
--spalten-fuge: clamp(24px, 19.87px + 1.059vw, 40px);
}
.inhalt-spalten__spalte { display: contents; }
/* Eintrag "Ueber beide Spalten": laeuft ueber die volle Inhaltsbreite. */
.inhalt-spalten__spalte > * + *,
.inhalt-spalten__voll > * + * { margin-block-start: var(--spalten-fuge); }
/* Bild auf Bild: schmale Fuge statt des grossen Abstands zwischen Text und
   Bild. 10px entspricht dem Entwurf (dort rund 10px bei 1467px Seitenbreite). */
.inhalt-spalten__spalte > .rahmen--auto + .rahmen--auto,
.inhalt-spalten__voll > .rahmen--auto + .rahmen--auto {
margin-block-start: 10px;
}
/* Traegt das obere Bild eine Bildunterschrift, gehoert sie zu ihm: das
   naechste Bild bekommt wieder die volle Fuge statt der schmalen. */
.inhalt-spalten__spalte > .rahmen--auto:has(> .bildunterschrift) + .rahmen--auto,
.inhalt-spalten__voll > .rahmen--auto:has(> .bildunterschrift) + .rahmen--auto {
margin-block-start: var(--spalten-fuge);
}
/* Bildunterschrift unter Bild oder Video: 13px mobil bis 14px ab 1920px,
   Abstand zum Bild 6px bis 10px (abgeleitet aus dem Entwurfs-Screenshot). */
.bildunterschrift {
margin-block-start: clamp(6px, 4.98px + 0.261vw, 10px);
font-size: var(--t-bildunterschrift);
line-height: 1.4;
color: var(--c-text-auf-weiss);
text-wrap: pretty;
hyphens: auto;
}
/* Video: eigene Datei im eigenen Seitenverhaeltnis, YouTube/Vimeo in 16:9. */
.medium__video {
display: block;
inline-size: 100%;
block-size: auto;
background: var(--gruen-100);
}
.medium__buehne {
position: relative;
aspect-ratio: 16 / 9;
background: var(--gruen-100);
overflow: hidden;
}
.medium__buehne picture,
.medium__buehne img {
display: block;
inline-size: 100%;
block-size: 100%;
}
.rahmen--auto .medium__buehne img { object-fit: cover; }
.medium__iframe {
display: block;
inline-size: 100%;
block-size: 100%;
border: 0;
}
/* Zwei-Klick-Hinweis: Optik der Anfahrtskarte, mittig auf dem Vorschaubild.
   Auf schmalen Buehnen reicht der Platz nicht fuer die Karte ueber dem
   Bild -- dort steht sie unter dem Bild. */
.medium__hinweis {
padding: var(--s-4) var(--s-5);
background: var(--weiss);
color: var(--c-text-auf-weiss);
box-shadow: 0 2px 16px rgb(0 0 0 / 0.25);
}
.medium__hinweis[hidden] { display: none; }
.medium__hinweis p {
margin: 0 0 var(--s-3);
font-size: var(--t-body-s);
line-height: 1.6;
}
.medium__hinweis a { color: inherit; }
.medium__aktionen {
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
}
.medium__laden {
min-block-size: var(--ziel-min);
padding-inline: var(--s-6);
border: 0;
background: var(--gruen-900);
color: var(--weiss);
font: inherit;
font-size: var(--t-button);
font-weight: var(--w-bold);
cursor: pointer;
}
.medium__laden:focus-visible {
outline: 2px solid var(--gruen-900);
outline-offset: 2px;
}
.medium__einstellungen {
min-block-size: var(--ziel-min);
padding: 0;
border: 0;
background: transparent;
font: inherit;
font-size: var(--t-body-s);
color: var(--c-text-auf-weiss);
text-decoration: underline;
cursor: pointer;
}
.medium__einstellungen[hidden] { display: none; }
.medium--extern { container-type: inline-size; }
@container (max-width: 519px) {
.medium__buehne:has(> .medium__hinweis:not([hidden])) {
aspect-ratio: auto;
overflow: visible;
}
.medium__buehne:has(> .medium__hinweis:not([hidden])) picture { aspect-ratio: 16 / 9; }
.medium__buehne:has(> .medium__hinweis:not([hidden])) .medium__hinweis { box-shadow: none; border: 1px solid var(--gruen-500-50); }
}
@container (min-width: 520px) {
.medium__hinweis {
position: absolute;
z-index: 1;
inset-block-end: 8%;
inset-inline-start: 50%;
translate: -50% 0;
inline-size: min(90%, 560px);
}
}
/* Einspaltig loest display:contents die Spalten auf — alles laeuft in EINEM
   Fluss. Deshalb braucht hier auch das erste Element der rechten Spalte (und
   jeder vollbreite Block) die Fuge nach oben; nur das allererste Element des
   Elements bleibt ohne. */
@media (max-width: 899px) {
.inhalt-spalten__spalte > :first-child,
.inhalt-spalten__voll { margin-block-start: var(--spalten-fuge); }
.inhalt-spalten > :first-child,
.inhalt-spalten > :first-child > :first-child { margin-block-start: 0; }
}
@media (min-width: 900px) {
/* Folgt direkt ein Statement mit Freisteller, haelt die rechte Spalte unten
   dessen Ueberstand frei. Der Freisteller liegt genau ueber diesem Bereich,
   deshalb wird der Platz nur hier reserviert und nicht ueber die ganze
   Breite -- die linke Spalte reicht weiter nach unten wie bisher. */
.container:has(.inhalt-spalten):has(+ .statement .statement__freisteller)
  .inhalt-spalten__spalte:last-child {
padding-block-end: var(--freisteller-platz);
}
.inhalt-spalten {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 80px;
row-gap: var(--spalten-fuge);
align-items: start;
}
.inhalt-spalten__voll {
grid-column: 1 / -1;
}
.inhalt-spalten__spalte {
display: flex;
flex-direction: column;
align-items: stretch;
min-inline-size: 0;
}
/* Zweispaltig beginnen beide Spalten auf derselben Linie — das erste Element
   traegt keinen Aussenabstand, egal ob Bild, Kapitel oder Textblock. */
.inhalt-spalten__spalte > :first-child { margin-block-start: 0; }
}
.text-a {
font-size: var(--t-copy);
line-height: var(--lh-text-a);
}
.text-a > p + p { margin-block-start: var(--lh-text-a); }
.text-a__zitat {
font-weight: var(--w-bold);
color: var(--gruen-900);
}
/* Ersetzt die frueheren Slot-Klassen kapitel--1 (erstes Kapitel der Spalte)
   und kapitel--2 (jedes weitere) sowie die Abstaende um rahmen--auto. */
.inhalt-spalten__spalte > .kapitel:first-child {
line-height: var(--lh-copy-kap1);
}
.kapitel {
font-size: var(--t-copy);
line-height: var(--lh-copy);
}
.kapitel--1 {
margin-block-start: 39px;
line-height: var(--lh-copy-kap1);
}
@media (min-width: 900px) {
.kapitel--1 { margin-block-start: 0; }
}
.kapitel--2 {
margin-block-start: clamp(27.3px, 16.85px + 2.680vw, 68.3px);
}
.kapitel__hl {
font-size: var(--t-h3);
line-height: var(--lh-kapitel-hl);
font-weight: var(--w-bold);
color: var(--gruen-900);
text-wrap: balance;
hyphens: none;
font-family: var(--font-body);
}
@media (min-width: 900px) {
.kapitel__hl { font-family: var(--font-display); }
}
.kapitel__copy {
margin-block-start: clamp(25.6px, 23.66px + 0.497vw, 33.2px);
}
.kapitel__copy > p + p { margin-block-start: var(--lh-copy); }
.kapitel__stark { font-weight: inherit; color: inherit; }
@media (min-width: 900px) {
.kapitel__stark {
font-weight: var(--w-bold);
color: var(--gruen-900);
}
}
.kapitel__gruss {
margin-block-start: calc(2 * var(--lh-copy));
font-weight: var(--w-bold);
color: var(--gruen-900);
}
/* Eingeklappter Textblock (Inhalt-Spalten, Schalter "Text eingeklappt
   anzeigen"): Titel + Teaser stehen, der Text folgt nach "Weiterlesen". */
.kapitel--aufklapp > :first-child { margin-block-start: 0; }
.aufklapp:not(:first-child) { margin-block-start: calc(0.5 * var(--lh-copy)); }
.aufklapp__schalter {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-weight: var(--w-bold);
color: var(--gruen-900);
cursor: pointer;
list-style: none;
}
.aufklapp__schalter::-webkit-details-marker { display: none; }
.aufklapp__schalter::after {
content: "";
inline-size: 0.5em;
block-size: 0.5em;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transition: transform 200ms ease;
}
.aufklapp[open] > .aufklapp__schalter::after { transform: translateY(25%) rotate(-135deg); }
.aufklapp__schalter:hover { text-decoration: underline; }
.aufklapp[open] .aufklapp__zu,
.aufklapp:not([open]) .aufklapp__auf { display: none; }
}
/* css/komponenten/statement.css */
@layer komponenten {
.statement {
position: relative;
/* Ohne Freisteller braucht die Flaeche keinen eigenen Aussenabstand: die
   Sektion davor bringt bereits den Sektionsabstand mit. Mit Freisteller
   setzen die Regeln weiter unten den noetigen Platz. */
margin-block-start: 0;
padding-block: clamp(43px, 29.63px + 3.428vw, 95.45px)
clamp(48px, 33.06px + 3.830vw, 106px);
background: var(--gruen-500-50);
text-align: center;
}
.statement > .container { padding-inline: 28px; }
@media (min-width: 900px) {
.statement > .container { padding-inline: var(--gutter); }
}
.statement__titel {
font-family: var(--font-display);
font-weight: var(--w-black);
/* Eine Spur kleiner als die Display-Groesse des Entwurfs (rund 10 %), damit
   die Headline den Fliesstext darunter nicht erdrueckt. */
font-size: clamp(26px, 8.66px + 4.230vw, 90px);
line-height: var(--lh-display);
color: var(--gruen-900);
hyphens: none;
}
.statement__copy {
margin-block-start: clamp(24px, 19.87px + 1.059vw, 40px);
margin-inline: auto;
max-inline-size: 78ch;
font-family: var(--font-body);
font-weight: var(--w-bold);
font-size: var(--t-statement-copy);
line-height: 1.45;
color: var(--gruen-900);
text-wrap: pretty;
/* Zentrierter Aussagesatz: keine Worttrennung, sonst steht in der Mitte der
   Flaeche ein "Tie-ren". */
hyphens: manual;
}
@media (min-width: 900px) {
.statement__copy { font-family: var(--font-display); }
}
/* Freisteller sitzt oben rechts und ragt ueber die OBERkante der gruenen
   Flaeche hinaus (vorher: unten heraus, 40.6vw breit). Breite, Ueberstand und
   der oben freigehaltene Platz sind ueber Variablen justierbar. */
/* Platz, den der herausragende Freisteller oberhalb der gruenen Flaeche
   braucht. Steht auf :root, weil ihn zwei Stellen lesen: die Sektion selbst
   (schmale Viewports, einspaltig) und die rechte Spalte des vorhergehenden
   Elements (ab 900px). In vw, damit beide denselben Bezug haben -- Prozente
   wuerden sich auf unterschiedlich breite Eltern beziehen. */
:root { --freisteller-platz: 63vw; }
.statement {
/* Schmale Viewports: der Freisteller nimmt die ganze Breite und sitzt oben
   auf der Flaeche. Das Layout ist hier einspaltig, deshalb wird der Ueberstand
   ueber den Aussenabstand der Sektion freigehalten -- es entsteht kein Loch
   neben einer zweiten Spalte. */
--freisteller-breite: 92%;
/* Ueber die ganze Breite wuerde jedes Hineinragen die Headline in der Flaeche
   verdecken, deshalb sitzt das Motiv hier vollstaendig oberhalb der Kante.
   Der reservierte Platz wird dabei vom Bild selbst gefuellt, es entsteht kein
   Leerraum: Bildhoehe = 92vw / 1,5 = rund 61vw, plus etwas Abstand zum Text. */
--freisteller-ueberstand: 100%;
--freisteller-rechts: 4%;
}
.statement:has(.statement__freisteller) {
margin-block-start: calc(clamp(10.1px, -17.4px + 7.052vw, 118px) + var(--freisteller-platz));
}
/* Freisteller: vollstaendig sichtbar im eigenen Seitenverhaeltnis — der
   Entwurfsrahmen rahmen--310 haette das Motiv beschnitten. */
.statement .statement__freisteller {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline-start: auto;
inset-inline-end: var(--freisteller-rechts);
inline-size: var(--freisteller-breite);
translate: 0 calc(-1 * var(--freisteller-ueberstand));
margin-inline-start: 0;
}
@media (min-width: 900px) {
:root { --freisteller-platz: calc(15vw + 40px); }
.statement:has(.statement__freisteller) {
margin-block-start: clamp(10.1px, -17.4px + 7.052vw, 118px);
}
.statement {
/* Nach dem Entwurf (unternehmen): die Freisteller-Gruppe steht rechts auf der
   Oberkante der gruenen Flaeche, rund drei Viertel ihrer Hoehe darueber.
   Ab hier haelt die rechte Spalte des vorhergehenden Elements den Platz frei
   (siehe --freisteller-platz weiter unten), nicht die Sektion selbst -- so
   entsteht links kein Loch und der Text wird nie ueberlagert.
   Bildhoehe = Breite / Seitenverhaeltnis (Motiv um 1,5:1 quer), davon der
   Ueberstand: 28vw / 1,5 * 0,76 = rund 14vw, plus Abstand zum Text. */
--freisteller-breite: 28%;
--freisteller-ueberstand: 76%;
--freisteller-rechts: 17%;
}
}
}
/* css/komponenten/galerie.css */
@layer komponenten {
.galerie {
margin-block-start: clamp(36.5px, 109.79px + -3.817vw, 94.9px);
padding-block-end: clamp(37px, 27.06px + 2.549vw, 76px);
}
.galerie__spalte { display: contents; }
.galerie__text {
font-size: var(--t-copy);
line-height: var(--lh-copy);
}
.galerie__text > p + p { margin-block-start: 0; }
.nur-desktop { display: none; }
.nur-mobil { display: block; }
@media (min-width: 900px) {
.nur-desktop { display: block; }
.nur-mobil { display: none; }
}
.galerie {
display: flex;
flex-direction: column;
}
.galerie__a { order: 1; }
.galerie__b { order: 2; margin-block-start: var(--lh-copy); }
.galerie .rahmen--5ad {
order: 3;
margin-block-start: clamp(34.1px, 28.65px + 1.399vw, 55.5px);
}
.galerie__c {
order: 4;
margin-block-start: clamp(25.9px, 20.14px + 1.477vw, 48.5px);
}
.galerie__d {
order: 5;
margin-block-start: var(--lh-copy);
}
.galerie .rahmen--3be {
order: 6;
margin-block-start: clamp(36.1px, 34.21px + 0.484vw, 43.5px);
}
@media (min-width: 900px) {
.galerie {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 80px;
align-items: start;
}
.galerie__spalte {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.galerie__a,
.galerie__b,
.galerie__c,
.galerie__d,
.galerie .rahmen--5ad,
.galerie .rahmen--3be { order: 0; }
.galerie__b { margin-block-start: 0; }
.galerie__spalte:last-child { margin-block-start: 19.4271vw; }
}
}
/* css/komponenten/jobs.css */
@layer komponenten {
.versal { text-transform: uppercase; }
.hero--jobs {
--hero-ton: #2b2a2c;
--hero-zone: 75.1282vw;
--hero-bild-w: 126.0256vw;
--hero-bild-h: 84.1026vw;
--hero-bild-oben: -8.9744vw;
--hero-bild-links: -8.7179vw;
}
@media (min-width: 430px) {
.hero--jobs {
--hero-zone: clamp(323.05px, 203.18px + 27.8765vw, 560px);
--hero-bild-w: clamp(541.9px, 64.85px + 110.9412vw, 1484.9px);
--hero-bild-h: clamp(361.64px, 43.29px + 74.0341vw, 990.93px);
--hero-bild-oben: clamp(-124.67px, 4.96px + -10.1271vw, -38.59px);
--hero-bild-links: clamp(-68.67px, -21.73px + -3.6671vw, -37.5px);
}
}
@media (min-width: 1280px) {
.hero--jobs {
--hero-zone: 43.75vw;
--hero-bild-w: 116.0104vw;
--hero-bild-h: 77.4167vw;
--hero-bild-oben: -9.7396vw;
--hero-bild-links: -5.3646vw;
}
}
.hero--jobs .hero__media picture {
inset-inline: var(--hero-bild-links) auto;
inset-block: var(--hero-bild-oben) auto;
inline-size: var(--hero-bild-w);
block-size: var(--hero-bild-h);
max-inline-size: none;
}
.hero--jobs .hero__media img {
transform: scaleX(-1);
object-position: 50% 50%;
}
.hero--jobs .hero__inhalt {
/* Derselbe Fussabstand wie beim Titel-Hero. Vorher war er an die Hoehe der
   Hero-Zone gekoppelt und damit rund doppelt so gross -- die Headline stand
   dadurch eher in der Mitte als unten. */
--hero-fuss: clamp(49px, 41.1px + 2.0261vw, 80px);
padding-block-end: calc(var(--hero-fuss) - var(--hero-line) / 2
+ 0.312 * var(--t-hero-sub));
}
.hero--jobs .t-hero-sub {
margin-block-start: calc(0.312 * (var(--t-hero-xl) - var(--t-hero-sub)));
}
/* Frueher trug das farbige Band oben rund die Haelfte des unteren
   Innenabstands (49px zu 100px bei 1440). Auf der Flaeche liest sich das als
   Fehler -- die Faerbung markiert den Block, also sitzt der Inhalt mittig.
   Abstaende und Ueberschriften-Rhythmus kommen jetzt aus .sektion. */
.stellen__raster {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"kopf"
"links"
"rechts";
row-gap: 0;
}
.stellen__kopf { grid-area: kopf; }
.stellen__spalte--links { grid-area: links; }
.stellen__spalte--rechts { grid-area: rechts; }
.stellen__spalte--rechts { margin-block-start: var(--s-8); }
@media (min-width: 900px) {
.stellen__raster {
grid-template-columns: 1083fr 493fr;
grid-template-areas:
"kopf  kopf"
"links rechts";
column-gap: 4.4848%;
align-items: start;
}
.stellen__spalte--rechts { margin-block-start: 0; }
.stellen__spalte--links { margin-block-start: 5px; }
}
.stellen {
--t-h2: clamp(19px, 13.65px + 1.3725vw, 40px);
}
.stellen__copy {
font-size: var(--t-body-m);
line-height: 1.5;
color: var(--c-text-auf-weiss);
}
.stellen__copy--stark { font-weight: var(--w-bold); }
.stellen__mail {
color: inherit;
text-decoration: none;
}
.stellen__mail:hover,
.stellen__mail:focus-visible { text-decoration: underline; }
.stellen__knopf {
margin-block-start: clamp(40px, 28.85px + 2.8601vw, 83.76px);
}
}
/* css/komponenten/downloads.css */
@layer komponenten {
.kataloge__raster {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1280px) {
.kataloge__raster {
grid-template-columns: 593fr 132.6fr 781.41fr 143fr;
align-items: start;
}
.kataloge__text { grid-column: 1; }
.kataloge__cover { grid-column: 3; }
}
.download-block__raster {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"kopf"
"copy"
"liste";
}
.download-block__kopf { grid-area: kopf; }
.download-block__copy { grid-area: copy; }
.download-block__liste { grid-area: liste; }
@media (min-width: 1280px) {
.download-block__raster {
grid-template-columns: 1094fr 556fr;
grid-template-areas:
"kopf kopf"
"copy liste";
align-items: start;
}
}
.download-block,
.kataloge {
--t-h2: clamp(19px, 13.65px + 1.3725vw, 40px);
}
.download-block__copy {
max-inline-size: none;
font-size: var(--t-body-m);
font-weight: var(--w-bold);
line-height: 1.5;
color: var(--c-text-auf-weiss);
hyphens: manual;
}
@media (min-width: 1280px) {
.download-block__copy--weit { line-height: 4; }
}
@media (min-width: 1280px) {
.download-block__copy { max-inline-size: 93.693%; }
}
@media (min-width: 1280px) {
.download-block__copy { margin-block-start: 5px; }
.download-block--kalt .download-block__copy { margin-block-start: 4px; }
.download-block__liste { margin-block-start: 17.76px; }
}
@media (max-width: 1279px) {
.download-block__liste { margin-block-start: var(--s-8); }
}
.download-block--kalt { margin-block-start: -4px; }
.download-block.download-block--weiss {
padding-block-start: clamp(33.07px, 21.99px + 2.8399vw, 76.52px);
padding-block-end: clamp(102.8px, 63.56px + 10.0627vw, 256.76px);
}
@media (min-width: 1280px) {
.download-block--weiss .download-block__copy { margin-block-start: 29px; }
}
.kataloge {
position: relative;
padding-block-start: clamp(40px, 29.42px + 2.7137vw, 81.52px);
padding-block-end: clamp(40px, 32.81px + 1.8438vw, 68.21px);
}
.kataloge .sektion__h2 {
margin-block-end: clamp(14.6px, 11.0px + 0.9229vw, 28.72px);
}
.kataloge__hl2 {
margin-block-start: clamp(40px, 28.2px + 3.0248vw, 86.28px);
}
.kataloge__copy {
font-size: var(--t-body-m);
line-height: 1.5;
color: var(--c-text-auf-weiss);
hyphens: manual;
}
.kataloge__copy + .kataloge__copy { margin-block-start: calc(1.5 * var(--t-body-m)); }
.kataloge__cover { margin-block-start: var(--s-8); }
@media (min-width: 1280px) {
.kataloge__cover { margin-block-start: 11.48px; }
}
.kataloge .cover figcaption { margin-block-start: 25.41%; }
.kataloge .cover figcaption { font-weight: var(--w-light); }
.kataloge__shop {
display: none;
inset-block-start: 7.9167vw;
z-index: 2;
}
@media (min-width: 1280px) {
.kataloge__shop { display: flex; }
}
}
/* css/komponenten/kontakt.css */
@layer komponenten {
.kontakt {
--t-h2: clamp(19px, 13.65px + 1.3725vw, 40px);
--kontakt-pad: clamp(40px, 29.42px + 2.7137vw, 81.52px);
padding-block-start: var(--kontakt-pad);
padding-block-end: clamp(25.6px, 15.81px + 2.5098vw, 64px);
}
.kontakt .sektion__h2 {
margin-block-end: clamp(15.5px, 11.68px + 0.9791vw, 30.48px);
}
.kontakt__raster {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.kontakt__raster {
grid-template-columns: 593fr 75fr 951fr 31fr;
align-items: start;
}
.kontakt__text { grid-column: 1; }
.kontakt__formular { grid-column: 3; }
}
.kontakt__info {
font-size: var(--t-body-m);
font-weight: var(--w-bold);
line-height: 1.5;
color: var(--c-text-auf-weiss);
max-inline-size: var(--mass-fliesstext);
hyphens: manual;
}
.kontakt__info + .kontakt__info {
margin-block-start: calc(1.5 * var(--t-body-m));
}
.kontakt__formular {
position: relative;
margin-block-start: var(--s-8);
}
@media (min-width: 900px) {
.kontakt__formular { margin-block-start: calc(0.8646 * var(--kontakt-pad)); }
}
/* Confirmation message after sending (Confirmation finisher, text maintained
   in the form editor). Its RTE drops the t-h3 class as soon as an editor
   touches the text, so headings get the t-h3 look and rhythm here. */
.kontakt__formularzone :where(h2, h3) {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h3);
line-height: var(--lh-h3);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
margin-block: var(--s-9) var(--s-6);
}
@media (min-width: 1280px) {
.kontakt__formularzone :where(h2, h3) { margin-block: var(--s-10) var(--s-7); }
}
.kontakt__formularzone :where(h2, h3):first-child { margin-block-start: 0; }
.formular__raster {
display: grid;
grid-template-columns: 1fr;
column-gap: 1.8927%;
row-gap: clamp(20px, 17.96px + 0.5229vw, 28px);
}
@media (min-width: 640px) {
.formular__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld--weit { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
.formular__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld--weit { grid-column: span 2; }
}
.feld {
position: relative;
block-size: 50px;
}
.feld__eingabe {
inline-size: 100%;
block-size: 100%;
border: var(--border-hair-gruen);
border-radius: var(--radius);
background: transparent;
padding-inline: var(--s-4);
color: var(--c-text-auf-weiss);
font-size: 16px;
line-height: 30px;
}
.feld__eingabe::placeholder { color: transparent; }
.feld__eingabe:user-invalid,
.feld__eingabe[aria-invalid="true"] {
border: var(--border-1);
border-color: var(--rot);
}
.feld__marke {
position: absolute;
inset-block-start: 8.79px;
inset-inline: 0;
text-align: center;
font-size: 16px;
line-height: 30px;
color: var(--c-text-auf-weiss);
pointer-events: none;
}
.feld__marke--leicht { font-weight: var(--w-light); }
.feld__marke--tief { inset-block-start: 66.79px; }
.feld__eingabe:focus ~ .feld__marke,
.feld__eingabe:not(:placeholder-shown) ~ .feld__marke {
inset-block-start: auto;
inset-block-end: calc(100% + 2px);
inset-inline-end: auto;
max-inline-size: 30%;
text-align: start;
font-size: var(--t-body-s);
line-height: 1.35;
pointer-events: auto;
}
.feld__fehler {
display: none;
font-size: var(--t-body-s);
line-height: 1.35;
color: var(--rot);
}
.feld:has(.feld__eingabe:user-invalid) .feld__fehler,
.feld:has(.feld__eingabe[aria-invalid="true"]) .feld__fehler {
display: block;
position: absolute;
inset-block-end: calc(100% + 2px);
inset-inline: 32% 0;
text-align: end;
}
.formular__hinweis {
margin-block-start: clamp(9.52px, 5.88px + 0.9327vw, 23.79px);
font-size: var(--t-body-s);
font-weight: var(--w-light);
line-height: 1.875;
color: var(--c-text-auf-weiss);
}
.feld--nachricht {
margin-block-start: clamp(14.08px, 8.69px + 1.381vw, 35.21px);
block-size: 108px;
}
.feld__eingabe--gross {
padding-block: 12px;
resize: vertical;
}
.formular__abschluss {
margin-block-start: clamp(38.4px, 23.72px + 3.7647vw, 96px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-7);
}
@media (max-width: 639px) {
.formular__knopf { inline-size: 100%; }
}
@media (min-width: 1280px) {
.formular__abschluss {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--s-6);
}
.formular__knopf { flex: none; }
}
.zustimmung {
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
min-inline-size: 0;
column-gap: 26px;
}
.zustimmung__box {
appearance: none;
flex: none;
margin: 0;
inline-size: 25px;
block-size: 25px;
border: var(--border-1);
border-radius: var(--radius);
padding: 4px;
background-clip: content-box;
cursor: pointer;
}
.zustimmung__box:checked { background-color: var(--gruen-900); }
@media (forced-colors: active) {
.zustimmung__box { appearance: auto; }
}
.zustimmung__marke {
min-block-size: var(--ziel-min);
padding-block: calc((var(--ziel-min) - 30px) / 2);
font-size: var(--t-body-s);
line-height: 30px;
color: var(--c-text-auf-weiss);
}
.zustimmung__fehler {
inset-block-end: calc(100% + 2px);
inset-inline-start: 0;
text-align: start;
}
.zustimmung:has(.zustimmung__box:user-invalid) .zustimmung__fehler,
.zustimmung:has(.zustimmung__box[aria-invalid="true"]) .zustimmung__fehler {
display: block;
position: absolute;
}
.zustimmung:has(.zustimmung__box:user-invalid) .zustimmung__box,
.zustimmung:has(.zustimmung__box[aria-invalid="true"]) .zustimmung__box {
border-color: var(--rot);
}
.honigtopf {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
pointer-events: none;
}
.adresse {
--t-h2: clamp(19px, 13.65px + 1.3725vw, 40px);
}
@media (min-width: 1280px) {
.adresse { min-block-size: 394px; }
}
.adresse__raster {
display: grid;
grid-template-columns: 1fr;
row-gap: var(--s-8);
}
@media (min-width: 900px) {
.adresse__raster {
grid-template-columns: 668fr 982fr;
align-items: start;
row-gap: 0;
}
}
.adresse .sektion__h2 {
margin-block-end: clamp(22.65px, 18.30px + 1.1157vw, 39.72px);
}
.adresse__copy {
font-style: normal;
font-size: var(--t-body-m);
font-weight: var(--w-bold);
line-height: 1.5;
color: var(--c-text-auf-weiss);
hyphens: manual;
}
.adresse__marke { margin-inline-end: 0.85em; }
.adresse__link {
color: inherit;
text-decoration: none;
}
.adresse__link:hover,
.adresse__link:focus-visible { text-decoration: underline; }
.anfahrt {
--t-h2: clamp(19px, 13.65px + 1.3725vw, 40px);
padding-block-start: clamp(30.91px, 20.56px + 2.6543vw, 71.52px);
padding-block-end: 0;
}
.anfahrt .anfahrt__h2 { margin-block-end: 0; }
.anfahrt__karte {
position: relative;
isolation: isolate;
margin: 0;
margin-block-start: clamp(23.98px, 15.95px + 2.0588vw, 55.48px);
margin-block-end: -3.4861%;
}
.anfahrt__karte img { inline-size: 100%; }
body:has(.anfahrt) .footer { position: relative; }
.anfahrt__marke {
position: absolute;
inset-inline-start: 57.1801%;
inset-block-start: 47.2122%;
translate: -50% -50%;
inline-size: 13.4235%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--gruen-500);
opacity: 0.28;
mix-blend-mode: multiply;
pointer-events: none;
}
}
/* css/komponenten/kategorien.css */
@layer komponenten {
.kat {
list-style: none;
aspect-ratio: var(--ring-asp);
margin-block-end: 39.33%;
}
.kat__link {
display: block;
position: relative;
inline-size: 100%;
block-size: 100%;
text-decoration: none;
}
.kat__kreis {
position: absolute;
inset-inline-start: var(--k-x);
inset-block-start: var(--k-y);
inline-size: var(--k-w);
block-size: var(--k-h);
border-radius: 50%;
background: var(--gruen-500-50);
transition: background var(--d-zustand) var(--ease-out);
}
.kat__link:hover .kat__kreis,
.kat__link:focus-visible .kat__kreis {
background: color-mix(in srgb, var(--gruen-500) 75%, var(--weiss));
}
.kat__ring {
position: absolute;
inset: 0;
background: no-repeat center / 100% 100%;
pointer-events: none;
}
.kat__bild {
position: absolute;
inset-inline-start: var(--b-x);
inset-block-start: var(--b-y);
inline-size: var(--b-w);
block-size: var(--b-h);
rotate: var(--b-dreh, 0deg);
transform-origin: 0 0;
}
.kat__bild,
.kat__bild img { max-inline-size: none; }
.kat__bild img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
scale: var(--b-sx, 1) 1;
transition: scale var(--d-bild) var(--ease-aus);
}
/* Der Entwurf platziert diese Motive horizontal gespiegelt (flipX im XD);
   die exportierten Dateien sind ungespiegelt. */
.motiv--voegel, .motiv--igel, .motiv--amphibien { --b-sx: -1; }
.kat__link:hover .kat__bild img,
.kat__link:focus-visible .kat__bild img { scale: calc(var(--b-sx, 1) * 1.04) 1.04; }
@media (prefers-reduced-motion: reduce) {
.kat__link:hover .kat__bild img,
.kat__link:focus-visible .kat__bild img { scale: var(--b-sx, 1) 1; }
}
.kat__label {
position: absolute;
inset-block-start: 0;
margin-block-start: calc(117.42% - 0.947 * var(--t-kat-label));
inset-inline-start: 50%;
translate: -50% 0;
text-align: center;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-kat-label);
line-height: 1.27;
color: var(--gruen-500);
white-space: nowrap;
hyphens: manual;
}
@media (max-width: 1482px) {
.kat__label { color: var(--fix-katlabel-color); }
}
.mosaik__rahmen {
inline-size: 100%;
max-inline-size: calc(var(--container-max) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.mosaik__feld { position: relative; }
.mosaik__liste {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 14.505%;
max-inline-size: 71.381%;
margin-inline: auto;
}
@media (min-width: 640px) {
.mosaik__liste {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 9.226%;
max-inline-size: 100%;
}
}
@media (min-width: 900px) {
.mosaik__liste {
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 6.762%;
}
}
@media (min-width: 1280px) {
.mosaik__rahmen { padding-inline: 0; }
.mosaik__feld {
margin-inline-start: 17.4365%;
inline-size: 56.9505%;
aspect-ratio: 1093.4497 / 790.9081;
}
.mosaik__liste {
display: block;
max-inline-size: 100%;
margin-inline: 0;
}
.kat {
position: absolute;
inset-inline-start: var(--x);
inset-block-start: var(--y);
inline-size: 10.426%;
aspect-ratio: 1;
margin-block-end: 0;
}
.kat__kreis { inset: 0; inline-size: 100%; block-size: 100%; }
.kat__ring { display: none; }
.mosaik__ringe {
position: absolute;
inset-inline-start: 14.4085%;
inset-block-start: 5.5746%;
inline-size: 74.0436%;
block-size: 93.3686%;
background: url("../assets/icons/mosaik-ringe.svg") no-repeat center / 100% 100%;
pointer-events: none;
}
.kat__label {
inset-block-start: calc(var(--l-y) - 0.947 * var(--t-kat-label));
margin-block-start: 0;
inset-inline-start: var(--l-x);
translate: none;
text-align: start;
}
}
@media (max-width: 1279px) {
.mosaik__ringe { display: none; }
}
/* Mosaik: Kreis, Ring und Bild haengen am Motiv (Feld "Motiv"), die Lage
   ab 1280px am Slot (Reihenfolge der Eintraege). */
.mosaik .motiv--voegel {
--ring-asp: 1.1372;
--k-x: 24.185%; --k-y: 9.217%;  --k-w: 60.412%; --k-h: 68.698%;
--b-x: -1.322%; --b-y: -17.792%; --b-w: 93.379%; --b-h: 96.264%;
--b-dreh: 6deg;
}
.mosaik .motiv--fledermaeuse {
--ring-asp: 1.0372;
--k-x: 24.096%; --k-y: 22.951%; --k-w: 59.373%; --k-h: 61.582%;
--b-x: -4.1%;   --b-y: -10.216%; --b-w: 109.88%; --b-h: 83.374%;
}
.mosaik .motiv--insekten {
--ring-asp: 1.0752;
--k-x: 16.868%; --k-y: 17.438%; --k-w: 61.92%;  --k-h: 64.426%;
--b-x: 17.168%; --b-y: 18.19%;  --b-w: 73.265%; --b-h: 63.019%;
}
.mosaik .motiv--igel {
--ring-asp: 1.0283;
--k-x: 18.937%; --k-y: 18.267%; --k-w: 62.869%; --k-h: 63.952%;
--b-x: 22.832%; --b-y: 22.062%; --b-w: 94.642%; --b-h: 68.09%;
}
.mosaik .motiv--bilche {
--ring-asp: 1.0097;
--k-x: 19.524%; --k-y: 21.157%; --k-w: 61.722%; --k-h: 63.416%;
--b-x: -12.442%; --b-y: 29.477%; --b-w: 97.542%; --b-h: 62.989%;
}
.mosaik .motiv--eichhoernchen {
--ring-asp: 0.9876;
--k-x: 20.375%; --k-y: 20.704%; --k-w: 63.758%; --k-h: 62.24%;
--b-x: 15.621%; --b-y: 8.47%;   --b-w: 74.604%; --b-h: 86.92%;
}
.mosaik .motiv--amphibien {
--ring-asp: 1.0135;
--k-x: 16.668%; --k-y: 18.595%; --k-w: 63.779%; --k-h: 64.642%;
--b-x: 20.973%; --b-y: 18.824%; --b-w: 67.675%; --b-h: 52.896%;
}
.mosaik .motiv--fuetterung {
--ring-asp: 1.0555;
--k-x: 18.545%; --k-y: 16.061%; --k-w: 61.465%; --k-h: 64.874%;
--b-x: -13.375%; --b-y: -16.856%; --b-w: 102.962%; --b-h: 108.671%;
}
.mosaik .motiv--voegel        .kat__ring { background-image: url("../assets/icons/ring-voegel.svg"); }
.mosaik .motiv--fledermaeuse  .kat__ring { background-image: url("../assets/icons/ring-fledermaeuse.svg"); }
.mosaik .motiv--insekten      .kat__ring { background-image: url("../assets/icons/ring-insekten.svg"); }
.mosaik .motiv--igel          .kat__ring { background-image: url("../assets/icons/ring-igel.svg"); }
.mosaik .motiv--bilche        .kat__ring { background-image: url("../assets/icons/ring-bilche.svg"); }
.mosaik .motiv--eichhoernchen .kat__ring { background-image: url("../assets/icons/ring-eichhoernchen.svg"); }
.mosaik .motiv--amphibien     .kat__ring { background-image: url("../assets/icons/ring-amphibien.svg"); }
.mosaik .motiv--fuetterung    .kat__ring { background-image: url("../assets/icons/ring-fuetterung.svg"); }
@media (min-width: 1280px) {
.mosaik .kat--voegel {
--x: 44.375%; --y: 8.677%;
--l-x: 137.447%; --l-y: 15.465%;
}
.mosaik .kat--fledermaeuse {
--x: 68.336%; --y: 25.746%;
--l-x: 154.395%; --l-y: 12.289%;
}
/* This slot's label clears the bat's wing tip. The bird ends well before it,
   so on this slot its label moves up to the ring (same gap as Fledermaeuse). */
.mosaik .kat--fledermaeuse.motiv--voegel { --l-x: 130%; }
/* Design value 134.465 % put the label almost on the ring; moved out to the
   same gap as the other labels. */
.mosaik .kat--insekten {
--x: 74.281%; --y: 47.241%;
--l-x: 147%; --l-y: 57.939%;
}
.mosaik .kat--igel {
--x: 63.123%; --y: 73.034%;
--l-x: 119.544%; --l-y: 135.754%;
}
.mosaik .kat--bilche {
--x: 46.113%; --y: 81.252%;
--l-x: -81.246%; --l-y: 119.202%;
}
.mosaik .kat--eichhoernchen {
--x: 29.651%; --y: 73.287%;
--l-r: 130.5%; --l-y: 106.711%;
}
.mosaik .kat--amphibien {
--x: 17.213%; --y: 51.16%;
--l-r: 137%; --l-y: 59.439%;
}
.mosaik .kat--fuetterung {
--x: 22.243%; --y: 23.976%;
--l-r: 149%; --l-y: 48.061%;
}
/* Labels left of the circle hang on it by their right edge (--l-r).
   Anchored on their left edge, they drifted away from the ring as the label
   font (vw-based) grows slower than the circle: up to 59 % of the circle
   width on wide screens. */
.mosaik .kat--eichhoernchen .kat__label,
.mosaik .kat--amphibien .kat__label,
.mosaik .kat--fuetterung .kat__label {
inset-inline-start: auto;
inset-inline-end: var(--l-r);
}
.mosaik .motiv--voegel {
--b-x: -34.209%; --b-y: -47.545%; --b-w: 157.399%; --b-h: 142.689%;
}
.mosaik .motiv--fledermaeuse {
--b-x: -47.57%; --b-y: -53.842%; --b-w: 185.088%; --b-h: 135.395%;
}
.mosaik .motiv--insekten {
--b-x: 0.377%; --b-y: 1.623%; --b-w: 119.877%; --b-h: 95.912%;
}
.mosaik .motiv--igel {
--b-x: 6.079%; --b-y: 6.018%; --b-w: 151.184%; --b-h: 105.772%;
}
.mosaik .motiv--bilche {
--b-x: -49.482%; --b-y: 11.263%; --b-w: 155.623%; --b-h: 99.535%;
}
.mosaik .motiv--eichhoernchen {
--b-x: -7.754%; --b-y: -19.623%; --b-w: 117.912%; --b-h: 139.088%;
}
.mosaik .motiv--amphibien {
--b-x: 6.386%; --b-y: -0.281%; --b-w: 107.246%; --b-h: 82.719%;
}
.mosaik .motiv--fuetterung {
--b-x: -51.956%; --b-y: -50.719%; --b-w: 167.5%; --b-h: 167.5%;
}
}
.mosaik__mitte {
padding-block-start: 4.654%;
margin-block-end: 10.808%;
max-inline-size: clamp(214px, 363.57px - 11.685vw, 318px);
margin-inline: auto;
}
.mosaik__shop {
position: relative;
container-type: inline-size;
display: grid;
place-items: center;
inline-size: 100%;
aspect-ratio: 318 / 44.4;
background: var(--gruen-500);
text-decoration: none;
/* Der Schlagschatten des Entwurfs haengt am Balken selbst statt an einem
   separat positionierten Bild und kann darum auf keiner Breite verrutschen. */
box-shadow: 0 8px 22px rgb(0 0 0 / 0.28);
transition: background-color var(--d-mikro) var(--ease-out);
}
.mosaik__shop-text {
font-family: var(--font-display);
text-decoration: none;
font-weight: var(--w-regular);
/* Groesse an der Balkenbreite: das Wort sitzt auf jeder Breite gleich im
   Balken, so wie es die Wortmarke des Entwurfs tat. */
font-size: 7.92cqw;
line-height: 1;
color: var(--weiss);
white-space: nowrap;
}
.mosaik__shop:hover { background-color: var(--gruen-900); }
.mosaik__claim {
position: relative;
inline-size: 66.305%;
aspect-ratio: 210.85 / 92.59;
margin-block-start: 2.846%;
margin-inline-start: 15.098%;
background: url("../assets/icons/claim-lebensraeume-mobil.svg")
no-repeat center / 100% 100%;
}
@media (min-width: 1280px) {
.mosaik__mitte {
position: absolute;
padding-block-start: 0;
inset-inline-start: 36.907%;
inset-block-start: 32.9849%;
inline-size: 26.742%;
max-inline-size: none;
margin-block-end: 0;
margin-inline: 0;
}
.mosaik__shop {
position: absolute;
inset-inline-start: 11.858%;
inset-block-start: 13.443%;
inline-size: 73.174%;
aspect-ratio: 213.96 / 44.05;
}
.mosaik__shop-text { font-size: 12.6cqw; }
.mosaik__claim {
inline-size: 100%;
aspect-ratio: 292.41 / 136.97;
margin-block-start: 35.939%;
margin-inline-start: 0;
background-image: url("../assets/icons/claim-lebensraeume.svg");
}
}
.mosaik {
padding-block-start: clamp(4.2px, 1.1px + 0.7954vw, 16.37px);
padding-block-end: clamp(21.53px, 0.35px + 5.4307vw, 104.62px);
}
}
/* css/komponenten/produktuebersicht.css */
@layer komponenten {
.besonderheiten {
padding-block-start: 0;
padding-block-end: clamp(119.47px, 141.72px - 5.7057vw, 137.15px);
}
.besonderheiten__h1 {
font-size: var(--t-h2);
line-height: var(--lh-kapitel-hl);
font-weight: var(--w-bold);
text-wrap: wrap;
margin-block-end: clamp(37.59px, 29.19px + 2.1542vw, 70.5px);
}
@media (min-width: 900px) {
.besonderheiten__h1 { font-weight: var(--w-black); }
}
.kapitel-block__hl {
font-size: clamp(18px, 11.88px + 1.5686vw, 42px);
line-height: clamp(20px, 11.84px + 2.0915vw, 52px);
font-weight: var(--w-bold);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
font-family: var(--font-body);
margin-block-end: clamp(21.55px, 19.55px + 0.5124vw, 29.42px);
}
@media (min-width: 900px) {
.kapitel-block__hl { font-family: var(--font-display); }
}
.kapitel-block--merkmale > .kapitel-block__hl,
.kapitel-block--erfahrung > .kapitel-block__hl {
margin-block-end: clamp(23.45px, 19.89px + 0.9131vw, 37.42px);
}
.kapitel-block__copy {
font-size: var(--t-body-m);
line-height: var(--lh-copy);
max-inline-size: 100%;
}
@media (min-width: 1280px) {
.kapitel-block__copy { max-inline-size: 95.333%; }
}
.kapitel-block__copy > p + p {
margin-block-start: var(--lh-copy);
}
.kapitel-block--erfahrung .kapitel-block__copy,
.kapitel-block--erfahrung .kapitel-block__copy > p + p {
line-height: clamp(18px, 15.45px + 0.6536vw, 28px);
}
.kapitel-block--merkmale {
margin-block-start: clamp(33.09px, 20.84px + 3.1418vw, 81.16px);
}
.kapitel-block--erfahrung {
margin-block-start: clamp(23.45px, 5.03px + 4.7242vw, 95.73px);
}
}
/* css/komponenten/produktseite.css */
@layer komponenten {
:where(.produktseite) {
--ps-lh: clamp(20px, 17.45px + 0.6536vw, 30px);
--ps-lh-h1: clamp(24px, 14.82px + 2.3529vw, 60px);
--ps-t-label-aktiv: clamp(22px, 19.96px + 0.5229vw, 30px);
--ps-t-label: clamp(19px, 17.72px + 0.3268vw, 24px);
}
.bogen {
padding-block-start: 12.6026vw;
padding-block-end: 12.4513vw;
}
@media (min-width: 900px) {
.bogen {
padding-block-start: 31.03px;
padding-block-end: 45.28px;
}
}
.bogen__rahmen {
inline-size: 100%;
max-inline-size: calc(var(--container-max) + 2 * var(--gutter));
margin-inline: auto;
}
.bogen__feld { position: relative; }
.bogen__liste {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-items: center;
align-items: start;
row-gap: var(--s-2);
column-gap: var(--s-6);
}
.bogen .kat {
position: relative;
aspect-ratio: 1;
margin-block-end: 0;
inline-size: auto;
inset-inline-start: auto;
inset-block-start: auto;
}
.bogen .bkat:not(.bkat--voegel) {
aspect-ratio: auto;
flex: 0 0 auto;
}
.bogen .bkat:not(.bkat--voegel) .kat__kreis,
.bogen .bkat:not(.bkat--voegel) .kat__bild { display: none; }
.bogen .bkat--voegel {
grid-column: 1 / -1;
inline-size: 29.7462%;
margin-block-end: 20.3333vw;
order: -1;
}
.bogen .kat__kreis {
inset: 0;
inline-size: 100%;
block-size: 100%;
}
.bogen__link {
display: block;
position: relative;
inline-size: 100%;
block-size: 100%;
text-decoration: none;
}
.bogen .bkat:not(.bkat--voegel) .bogen__link { block-size: auto; }
.bogen__label {
display: block;
font-family: var(--font-body);
font-weight: var(--w-bold);
font-size: var(--ps-t-label);
line-height: 1.2;
color: var(--gruen-500);
text-align: center;
white-space: nowrap;
hyphens: manual;
}
/* Gleiche Groesse wie die uebrigen Labels: Source Sans 3 hat eine um ca. 10 %
   kleinere x-Hoehe als Open Sans, darum 1.1em statt derselben Pixelgroesse.
   (--ps-t-label-aktiv greift nicht: .produktseite ist nirgends gesetzt.) */
.bkat--voegel .bogen__label {
font-family: var(--font-display);
font-size: 1.1em;
position: absolute;
inset-block-start: calc(163.0721% - (0.5lh + 0.312em));
inset-inline: 0;
}
.bogen__linie { display: none; }
@media (min-width: 900px) {
.bogen__feld {
inline-size: 100%;
aspect-ratio: 1920 / 326.9674;
}
.bogen__liste {
display: block;
gap: 0;
}
.bogen .bkat--voegel {
grid-column: auto;
inline-size: var(--kw);
margin-block-end: 0;
order: 0;
}
.bogen .kat {
position: absolute;
inset-inline-start: var(--x);
inset-block-start: var(--y);
inline-size: var(--kw);
aspect-ratio: 1;
}
.bogen .bkat:not(.bkat--voegel) {
aspect-ratio: 1;
flex: none;
}
.bogen .bkat:not(.bkat--voegel) .kat__kreis,
.bogen .bkat:not(.bkat--voegel) .kat__bild { display: block; }
.bogen .bkat:not(.bkat--voegel) .bogen__link { block-size: 100%; }
.bogen .bkat--voegel { order: 0; }
.bogen__label {
position: absolute;
inset-inline-start: var(--l-x);
inset-inline-end: auto;
inset-block-start: calc(var(--l-y) - (0.5lh + 0.3879em));
text-align: start;
}
/* Das Label der aktiven Kategorie haengt mit seiner linken Kante am Kreis.
   Mittig verankert (Entwurf: Mitte bei 153 %) wanderte es mit der Wortlaenge:
   kurze Namen rueckten vom Kreis ab, "Fledermausschutz" ragte ins Bild. */
.bkat--voegel .bogen__label {
inset-inline-start: var(--l-x);
inset-inline-end: auto;
inset-block-start: calc(var(--l-y) - (0.5lh + 0.312em));
}
.bogen__linie {
display: block;
position: absolute;
inset-inline-start: 5.7865%;
inset-block-start: 18.5566%;
inline-size: 86.3411%;
block-size: 72.9327%;
background: url("../assets/icons/kategorie-bogen.svg")
no-repeat center / 100% 100%;
pointer-events: none;
z-index: 0;
}
.bogen .kat { z-index: 1; }
}
@media (max-width: 899px) {
.bkat--voegel .kat__kreis::after {
content: "";
position: absolute;
inset-inline-start: -40.0569%;
inset-block-start: -13.4213%;
inline-size: 165.5116%;
block-size: 145.5564%;
background: url("../assets/icons/bogen-voegel-mobil.svg")
no-repeat center / 100% 100%;
pointer-events: none;
}
}
/* Lage der Slots (Reihenfolge der Eintraege). */
@media (min-width: 900px) {
.bkat--eichhoernchen {
--x: 6.8750%; --y: 51.0703%; --kw: 4.6875%;
--l-x: -67.7778%; --l-y: -41.1111%;
}
.bkat--insekten {
--x: 16.1458%; --y: 50.4587%; --kw: 4.6875%;
--l-x: -51.1111%; --l-y: 152.2222%;
}
.bkat--amphibien {
--x: 25.6771%; --y: 49.8471%; --kw: 4.6875%;
--l-x: -58.8889%; --l-y: -38.8889%;
}
.bkat--fuetterung {
--x: 35.4167%; --y: 51.0703%; --kw: 4.6875%;
--l-x: -68.8889%; --l-y: 151.1111%;
}
.bkat--voegel {
--x: 47.9688%; --y: 29.9694%; --kw: 8.6979%;
--l-x: 105%; --l-y: -10.1796%;
}
/* Die Fluegelspitze der Fledermaus reicht auf Hoehe des Labels bis ca.
   122 % der Kreisbreite; das Label beginnt dahinter. */
.bogen .bkat--voegel.motiv--fledermaeuse { --l-x: 128%; }
.bkat--fledermaeuse {
--x: 64.3229%; --y: 50.7645%; --kw: 4.6875%;
--l-x: -80.0000%; --l-y: 151.1111%;
}
.bkat--igel {
--x: 74.5833%; --y: 51.0703%; --kw: 4.6875%;
--l-x: 21.1111%; --l-y: -45.5556%;
}
.bkat--bilche {
--x: 86.5625%; --y: 50.7645%; --kw: 4.6875%;
--l-x: -30.0000%; --l-y: 151.1111%;
}
}
/* Zuschnitt je Motiv (Feld "Motiv"), in % des Kreises und damit fuer den
   kleinen wie den grossen (aktiven) Kreis gleich. Die Werte stammen aus dem
   Entwurf der Vogelschutz-Seite; jede Box hat das Seitenverhaeltnis ihres
   Freistellers, deshalb darf sie nicht an der Position haengen. */
.bogen .motiv--eichhoernchen { --m-x: -13.2337%; --m-y: -37.9580%; --m-w: 126.5822%; --m-h: 149.3144%; }
.bogen .motiv--insekten { --m-x: -9.1037%; --m-y: -7.6068%; --m-w: 128.6933%; --m-h: 102.9633%; }
.bogen .motiv--amphibien { --m-x: 3.3350%; --m-y: -3.2734%; --m-w: 115.1344%; --m-h: 88.7989%; }
.bogen .motiv--fuetterung { --m-x: -50.9256%; --m-y: -49.8138%; --m-w: 179.8144%; --m-h: 179.8144%; }
.bogen .motiv--voegel {
--m-x: -66.6307%; --m-y: -58.6631%; --m-w: 194.6126%; --m-h: 176.4251%;
--m-dreh: 5.9985deg;
}
.bogen .motiv--fledermaeuse { --m-x: -64.4444%; --m-y: -45.5556%; --m-w: 198.6944%; --m-h: 145.3511%; }
.bogen .motiv--igel { --m-x: -3.4074%; --m-y: -12.7163%; --m-w: 162.2956%; --m-h: 120.2622%; }
.bogen .motiv--bilche { --m-x: -44.8378%; --m-y: 2.1280%; --m-w: 167.0600%; --m-h: 106.8522%; }
.bogen .bkat {
--b-x: var(--m-x); --b-y: var(--m-y); --b-w: var(--m-w); --b-h: var(--m-h);
--b-dreh: var(--m-dreh, 0deg);
}
/* Mobil steht nur die aktive Kategorie mit Bild ueber dem Bogen. Der Entwurf
   verkleinert den Vogel dort auf 79,42 % um die Boxmitte; dasselbe gilt fuer
   jedes andere Motiv in der Mitte. */
@media (max-width: 899px) {
.bogen .bkat--voegel {
--b-w: calc(var(--m-w) * 0.7942);
--b-h: calc(var(--m-h) * 0.7942);
--b-x: calc(var(--m-x) + var(--m-w) * 0.1029);
--b-y: calc(var(--m-y) + var(--m-h) * 0.1029);
}
.bogen .bkat--voegel.motiv--voegel {
--b-x: -42.2530%; --b-y: -39.3217%; --b-w: 154.5574%; --b-h: 140.1138%;
}
}
.ps__h1 {
font-size: var(--t-h1-seite);
line-height: var(--ps-lh-h1);
font-weight: var(--w-bold);
color: var(--gruen-900);
font-family: var(--font-body);
text-wrap: wrap;
hyphens: none;
margin-block-end: clamp(22.55px, 8.12px + 3.7016vw, 79.19px);
}
@media (min-width: 900px) {
.ps__h1 { font-family: var(--font-display); }
}
.ps {
padding-block-start: 0;
padding-block-end: clamp(40.79px, 33.21px + 1.9440vw, 70.53px);
}
.ps__strecke {
display: flex;
flex-direction: column;
}
.ps__spalte { display: contents; }
.ps-kap--warum      { order: 1; }
.ps-flaeche--1      { order: 2; }
.ps-kap--besonders  { order: 3; }
.ps-flaeche--2      { order: 4; }
.ps-liste--b        { order: 5; }
.ps-flaeche--3      { order: 6; }
.ps-kap--erfahrung  { order: 7; }
@media (min-width: 900px) {
.ps__strecke {
display: grid;
grid-template-columns: 48.3030% 47.2727%;
column-gap: 3.6364%;
align-items: start;
}
.ps__spalte {
display: flex;
flex-direction: column;
align-items: stretch;
min-inline-size: 0;
}
.ps-kap--warum, .ps-flaeche--1, .ps-kap--besonders, .ps-flaeche--2,
.ps-liste--b, .ps-flaeche--3, .ps-kap--erfahrung { order: 0; }
}
.ps-kap,
.ps-kap__copy {
font-size: var(--t-copy);
line-height: var(--ps-lh);
}
.ps-kap__copy > p,
.ps-liste > li { hyphens: manual; }
.ps-kap__hl {
font-family: var(--font-body);
font-size: clamp(18px, 16.98px + 0.2614vw, 22px);
line-height: var(--ps-lh);
font-weight: var(--w-bold);
color: var(--gruen-900);
text-wrap: pretty;
hyphens: none;
margin-block-end: 0;
}
@media (min-width: 900px) {
.ps-kap__hl { color: var(--c-text); }
}
.ps-kap--warum > .ps-kap__hl,
.ps-kap--besonders > .ps-kap__hl {
margin-block-end: var(--ps-lh);
}
@media (min-width: 900px) {
.ps-kap--warum > .ps-kap__hl,
.ps-kap--besonders > .ps-kap__hl { margin-block-end: 0; }
}
.ps-kap--erfahrung > .ps-kap__hl { margin-block-end: var(--ps-lh); }
.ps-kap__copy > p + p,
.ps-liste > li + li { margin-block-start: var(--ps-lh); }
.ps-kap--warum .ps-kap__copy > p:nth-child(3) { margin-block-start: 0; }
.ps-liste {
list-style: none;
padding-inline-start: 0;
}
.ps-liste--b { margin-block-start: 0; }
@media (min-width: 900px) {
.ps-liste--b { margin-block-start: var(--ps-lh); }
}
.ps-kap--besonders { margin-block-start: 0; }
@media (min-width: 900px) {
.ps-kap--besonders { margin-block-start: var(--ps-lh); }
}
.ps-kap--erfahrung {
margin-block-start: clamp(33.21px, 31.61px + 0.4089vw, 39.47px);
}
@media (min-width: 900px) {
.ps-kap--erfahrung { margin-inline-start: 0.8974%; }
}
.ps-flaeche {
background: var(--gruen-500);
aspect-ratio: 390 / 251;
inline-size: 100vw;
margin-inline: calc(50% - 50vw);
}
.ps-flaeche--1 { margin-block: 32.43px 33.21px; }
.ps-flaeche--2 { margin-block: 20.79px 28.21px; }
.ps-flaeche--3 { margin-block-start: 45.79px; }
@media (min-width: 900px) {
.ps-flaeche {
aspect-ratio: 780 / 503;
inline-size: 100%;
margin-inline: 0;
}
.ps-flaeche--1 { margin-block: 0; }
.ps-flaeche--2 { margin-block: 70px 0; }
.ps-flaeche--3 {
margin-block-start: 70px;
margin-inline-start: 0.8974%;
}
}
.ps-shop {
padding-block-start: 0;
padding-block-end: clamp(55px, 46.84px + 2.0915vw, 87px);
text-align: center;
}
@media (min-width: 900px) {
.ps-shop { text-align: start; }
}
}
/* css/a11y-korrektur.css — Werte in die Standard-Defaults (base :root)
   eingefaltet; verblieben sind der motivgebundene Kachel-Scrim und die
   Lesbarkeit-Plus-Textgrößen. */
@layer komponenten {
.kachel--motiv-hell-links {
--fix-teaser-scrim: linear-gradient(96deg,
rgb(0 0 0 / 0.72) 0%,
rgb(0 0 0 / 0.55) 40%,
rgb(0 0 0 / 0.20) 100%);
}
@media (min-width: 1280px) {
.kachel--motiv-hell-links {
--fix-teaser-scrim: linear-gradient(96deg,
rgb(0 0 0 / 0.65) 0%,
rgb(0 0 0 / 0.50) 40%,
rgb(0 0 0 / 0.15) 100%);
}
}
.lesbarkeit-plus {
--t-footer: 12px;
--t-teaser-hl: clamp(18px, 13.4px + 1.18vw, 36px);
--t-teaser-copy: clamp(14px, 12.5px + 0.39vw, 20px);
--t-shop-hinweis: clamp(12px, 10.98px + 0.261vw, 16px);
--t-button: clamp(14px, 13.5px + 0.13vw, 16px);
}
}
/* css/komponenten/lead-cms.css */
@layer komponenten {
/* CMS-Fassung des Lead-Absatzes: der Markenname kommt aus dem RTE als
   <strong> statt als <span class="lead__b"> — gleiche Gewichte wie lead__b. */
.lead p { margin: 0; }
.lead strong {
font-weight: var(--w-black);
color: inherit;
}
@media (min-width: 900px) {
.lead strong { font-weight: var(--w-bold); }
}
}
/* css/komponenten/consent.css */
@layer komponenten {
/* Banner selbst kommt aus EXT:w52_consent — hier nur die Schwegler-Toene
   auf dessen Custom Properties gemappt (Doku: EXT:w52_consent/README.md) */
#w52-consent-banner {
--w52c-text: var(--c-text-auf-weiss);
--w52c-heading-color: var(--gruen-900);
--w52c-heading-font: var(--font-display);
--w52c-accent: var(--gruen-500);
--w52c-border: var(--gruen-500-50);
--w52c-table-head: var(--gruen-100);
--w52c-max-width: calc(var(--container-max) + 2 * var(--gutter));
--w52c-gutter: var(--gutter);
--w52c-font-size-small: var(--t-body-s);
--w52c-target-min: var(--ziel-min);
}
#w52-consent-banner .w52-consent__title { font-size: var(--t-h3); }
#w52-consent-banner .w52-consent__button { font-size: var(--t-button); }
/* Wiederaufruf im Footer: Button in der Optik der Footer-Links */
.footer__consent {
display: flex;
align-items: center;
min-block-size: var(--ziel-min);
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: var(--weiss);
cursor: pointer;
}
.footer__consent:hover { text-decoration: underline; }
.footer__consent[hidden] { display: none; }
}
/* css/komponenten/anfahrt-osm.css */
@layer komponenten {
/* Zwei-Klick-Karte: Hinweiskarte liegt auf dem statischen Kartenbild */
.anfahrt__hinweis {
position: absolute;
z-index: 1;
inset-block-end: 12%;
inset-inline-start: 50%;
translate: -50% 0;
inline-size: min(90%, 560px);
padding: var(--s-4) var(--s-5);
background: var(--weiss);
color: var(--c-text-auf-weiss);
box-shadow: 0 2px 16px rgb(0 0 0 / 0.25);
}
.anfahrt__hinweis[hidden] { display: none; }
.anfahrt__hinweis p {
margin: 0 0 var(--s-3);
font-size: var(--t-body-s);
line-height: 1.6;
}
.anfahrt__hinweis a { color: inherit; }
.anfahrt__aktionen {
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
}
.anfahrt__einstellungen {
min-block-size: var(--ziel-min);
padding: 0;
border: 0;
background: transparent;
font: inherit;
font-size: var(--t-body-s);
color: var(--c-text-auf-weiss);
text-decoration: underline;
cursor: pointer;
}
.anfahrt__einstellungen[hidden] { display: none; }
.anfahrt__laden {
min-block-size: var(--ziel-min);
padding-inline: var(--s-6);
border: 0;
background: var(--gruen-900);
color: var(--weiss);
font: inherit;
font-size: var(--t-button);
font-weight: var(--w-bold);
cursor: pointer;
}
.anfahrt__laden:focus-visible {
outline: 2px solid var(--gruen-900);
outline-offset: 2px;
}
/* Nach dem Laden: Leaflet-Karte im Format des statischen Kartenbilds,
   keine Footer-Ueberlappung mehr */
.anfahrt__osm {
display: block;
inline-size: 100%;
aspect-ratio: 1922 / 1112;
background: var(--gruen-100);
}
.anfahrt__karte:has(.anfahrt__osm) { margin-block-end: 0; }
.anfahrt__osm.leaflet-container {
font-family: var(--font-body);
font-size: var(--t-body-s);
}
.anfahrt__popup {
font-size: var(--t-body-s);
line-height: 1.5;
color: var(--c-text-auf-weiss);
}
.anfahrt__popup strong { color: var(--gruen-900); }
.anfahrt__quelle {
margin: var(--s-2) 0 var(--s-4);
font-size: var(--t-body-s);
}
.anfahrt__quelle a { color: var(--c-text-auf-weiss); }
}