/* ==========================================================================
   smeileys-v1 · Smeiley’s · «Frisch & verspielt»
   These: Eine Schale, drei Erbsen. Die runde, leicht unregelmässige Schale
   trägt alles: Logo, Bildmaske, Zähler, Wegmarke, Bestätigung.
   Farben vom Teller: Heidelbeer-Tinte, Erbse, gebrannter Kürbis, Butter.
   ========================================================================== */

/* ---------- Schriften (ein Paar, self-hosted, swap) ---------- */
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-var-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-var-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka Fallback"; src: local("Avenir Next"), local("Arial"); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
	--weiss: #ffffff;
	--tinte: #272b4a;      /* Heidelbeere */
	--tinte-2: #535a78;
	--tinte-3: #7b8096;    /* nur Dekor, kein Fliesstext */
	--linie: #ece8df;
	--linie-stark: #d9d3c4;
	--kuerbis: #b4561a;    /* gebrannt, CTA-Flaeche, 4.9:1 */
	--kuerbis-dunkel: #9e4a13;
	--kuerbis-dekor: #e8892b;
	--erbse: #2a7034;      /* Text, >= 4.97:1 auf allen Tischtuechern */
	--erbse-dekor: #5fae5b;
	--erbse-hell: #9ed391;
	--blau: #1377b5;       /* Teller-Blau: Schale im Logo, Fokus */
	--butter: #fbf4d6; --butter-500: #f2e27a;
	--mint: #e4f3de;   --mint-500: #9ed391;
	--pfirsich: #fde6d3; --pfirsich-500: #f7b98f;
	--rosa: #fbe3e6;   --rosa-500: #f0a3a3;
	--himmel: #e2ecf8; --himmel-500: #9dbbe8;

	--font-display: "Fredoka", "Fredoka Fallback", "Avenir Next", system-ui, sans-serif;
	--font-text: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-hero: clamp(3rem, min(1.2rem + 7.2vw, 10.5vh), 8rem);
	--fs-h1: clamp(2.625rem, 1.4rem + 4.8vw, 5.25rem);
	--fs-h2: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	--fs-h3: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
	--fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	--fs-body: 1.0625rem;
	--fs-small: .9375rem;
	--fs-eyebrow: .8125rem;

	--s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
	--s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
	--sektion: clamp(4rem, 2.5rem + 5vw, 7.5rem);
	--cta-abstand: var(--sektion); /* Abstand der CTA-Box «Lernen Sie Smeiley’s kennen» nach oben und unten, EIN Token fuer alle Seiten */
	--wrap: 76rem;
	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--kopf-h: 4.5rem;

	--r-schale: 1.15rem .95rem 1.25rem 1rem / 1rem 1.2rem .95rem 1.15rem;  /* Buttons: leicht unregelmaessig */
	--r-feld: .85rem;
	--r-kante: 0 0 50% 50% / 0 0 4.5rem 4.5rem;  /* Schalen-Kante fuer Baender */
	--t-fast: 150ms; --t-base: 220ms; --t-slow: 300ms;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--spring: cubic-bezier(.34, 1.45, .64, 1);
}
@media (min-width: 60em) { :root { --kopf-h: 5.5rem; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 1rem); background: var(--weiss); --warm: 0; --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--butter); opacity: var(--warm); pointer-events: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: 70; background-image: var(--korn); background-size: 180px; opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
body {
	margin: 0; font: 400 var(--fs-body)/1.6 var(--font-text); color: var(--tinte); background: transparent;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga";
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd, figcaption { text-wrap: pretty; }
a { color: var(--erbse); text-decoration-thickness: .08em; text-underline-offset: .16em; transition: color var(--t-fast); }
a:hover { color: var(--tinte); }
strong { font-weight: 700; }
abbr[title] { text-decoration: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: .35rem; }
::selection { background: var(--kuerbis); color: #fff; }
::-moz-selection { background: var(--kuerbis); color: #fff; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -100%; z-index: 100; padding: .7rem 1rem; background: var(--tinte); color: #fff; border-radius: var(--r-schale); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s4); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sektion { padding-block: var(--sektion); }
.sektion__kopf { max-width: 48rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.sektion__kopf .lead { margin-top: var(--s5); }
.sektion__kopf--zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); max-width: none; }
.prose p { max-width: 60ch; }
.prose p + p { margin-top: var(--s5); }

/* ---------- Typografie ---------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: .65rem; margin-bottom: var(--s4);
	font: 600 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--erbse);
}
.eyebrow::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--kuerbis-dekor); flex: none; }
.vorzeile { font: 500 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.35 var(--font-display); color: var(--tinte); max-width: 28ch; text-wrap: balance; }
.titel { font: 600 var(--fs-h2)/1.04 var(--font-display); letter-spacing: -.022em; color: var(--tinte); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tinte-2); max-width: 54ch; }
h3 { font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -.01em; }

/* Handgezeichnete Akzente */
.hand { position: absolute; pointer-events: none; overflow: visible; }
.hand path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hand-ul { position: relative; display: inline-block; white-space: nowrap; }
.hand-ul .hand--ul { left: -.01em; bottom: -.1em; width: 102%; height: .26em; z-index: -1; transform-origin: left center; }
.hand--ul path { fill: var(--kuerbis-dekor); stroke: none; opacity: .92; }
/* Signature-Moment: der Pinselstrich zieht sich einmal von links auf (nur transform) */
.js .hand-ul .hand--ul { transform: scaleX(0); }
.fonts-ok .hand-ul .hand--ul { animation: smv1-strich 640ms var(--ease) 380ms forwards; }
@keyframes smv1-strich { to { transform: scaleX(1); } }
.hand-ul { isolation: isolate; }
@media (scripting: none) { .hand-ul .hand--ul { transform: none; } }
.hand-ring { position: relative; display: inline-block; padding: 0 .08em; white-space: nowrap; }
.hand-ring .hand--ring { left: -.3em; top: -.26em; width: calc(100% + .6em); height: calc(100% + .5em); }
.hand--ring path { stroke: var(--pfirsich-500); stroke-width: 5; vector-effect: non-scaling-stroke; }
.pfeil-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--erbse); text-decoration: none; }
.pfeil-link svg { width: 1.4rem; height: 1.4rem; overflow: visible; transition: transform var(--t-slow) var(--spring); }
.pfeil-link svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pfeil-link:hover { color: var(--tinte); }
.pfeil-link:hover svg { transform: translateX(.35rem) rotate(-8deg); }
.pfeil-link--gross { font-size: var(--fs-lead); }

/* ---------- Buttons: Schalen-Form, Erbsen-Punkt ---------- */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
	min-height: 3.25rem; padding: .9rem 1.55rem .9rem 1.3rem; border-radius: var(--r-schale);
	font: 600 1rem/1.1 var(--font-text); text-decoration: none; cursor: pointer; border: 2px solid transparent;
	transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.btn::before { content: ""; width: .62rem; height: .62rem; border-radius: 50%; background: currentColor; opacity: .9; flex: none; transition: transform 360ms var(--spring); }
.btn:hover::before { transform: translateX(.25rem) scale(1.2); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn--gross { min-height: 3.6rem; padding: 1rem 1.8rem 1rem 1.5rem; font-size: 1.0625rem; }
.btn--klein { min-height: 2.6rem; padding: .55rem 1.1rem .55rem .95rem; font-size: .9375rem; }
.btn--primaer { background: var(--kuerbis); color: #fff; border-color: var(--kuerbis); }
.btn--primaer:hover { background: var(--kuerbis-dunkel); border-color: var(--kuerbis-dunkel); color: #fff; }
.btn--primaer[aria-current="page"] { background: var(--tinte); border-color: var(--tinte); }
.btn--primaer[aria-current="page"]::before { background: var(--erbse-hell); transform: scale(1.2); }
.btn--ghost { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn--ghost:hover { background: var(--tinte); color: #fff; }
.btn--hell { background: #fff; color: var(--tinte); border-color: #fff; }
.btn--hell:hover { background: var(--butter); border-color: var(--butter); color: var(--tinte); }

/* ---------- Logo ---------- */
.logo { height: auto; color: var(--tinte); }
.logo .hd__finger { transform-box: fill-box; transform-origin: 50% 92%; }
/* Begruessung: die Finger spreizen sich einmal auf, wenn die Seite steht (nur transform/opacity) */
.js .kopf .logo .hd__finger { animation: smv1-spreizen 640ms var(--spring) both; }
.js .kopf .logo .hd__finger--1 { animation-delay: 60ms; } .js .kopf .logo .hd__finger--2 { animation-delay: 120ms; } .js .kopf .logo .hd__finger--3 { animation-delay: 180ms; } .js .kopf .logo .hd__finger--4 { animation-delay: 240ms; }
@media (hover: hover) { .kopf__logo:hover .logo .hd__finger { animation: smv1-winken 560ms var(--ease); } .kopf__logo:hover .logo .hd__finger--1 { animation-delay: 40ms; } .kopf__logo:hover .logo .hd__finger--2 { animation-delay: 80ms; } .kopf__logo:hover .logo .hd__finger--3 { animation-delay: 120ms; } .kopf__logo:hover .logo .hd__finger--4 { animation-delay: 160ms; } }
@keyframes smv1-spreizen { from { opacity: 0; transform: scaleY(.55) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes smv1-winken { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-7deg); } 70% { transform: rotate(5deg); } }
.logovar__feld--dunkel .logo { color: #fff; }
.logo--fuss { --logo-blau: #3a9fe0; --logo-kuerbis: #e8893a; }
.logovar--verbaut .logovar__name::after { content: 'gewählt'; display: inline-block; margin-left: .6em; vertical-align: middle; font: 600 .7rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--erbse); background: var(--mint); padding: .35em .6em; border-radius: 99px; }
.logovar__feld--dunkel { --logo-blau: #3a9fe0; --logo-kuerbis: #e8893a; }
.logo--kopf { height: 2.6rem; width: auto; }
.logo--kopf .claim { display: none; }
@media (min-width: 60em) { .logo--kopf .claim { display: block; } }
.logo--fuss { height: 3rem; width: auto; color: #fff; }
.logo--gross { width: 100%; max-width: 22rem; height: auto; }
@media (min-width: 60em) { .logo--kopf { height: 3rem; } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); transition: box-shadow var(--t-slow) var(--ease); }
.kopf.is-scrolled { box-shadow: 0 1px 0 var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: var(--s5); min-height: var(--kopf-h); }
.kopf__logo { display: block; flex: none; margin-right: auto; border-radius: .5rem; transition: transform var(--t-slow) var(--spring); }
.kopf__logo:hover { transform: translateY(-1px); }
.kopf__nav, .kopf__cta { display: none; }
.kopf__nav ul { display: flex; gap: clamp(.5rem, .2rem + 1vw, 1.25rem); }
.kopf__nav a {
	position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem .5rem 1.35rem;
	font-weight: 500; color: var(--tinte); text-decoration: none; border-radius: var(--r-schale);
	transition: background-color var(--t-fast), color var(--t-fast);
}
.kopf__nav a::before {
	content: ""; position: absolute; left: .55rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%;
	background: var(--erbse-dekor); transform: scale(0); transition: transform 300ms var(--spring);
}
.kopf__nav a:hover { background: var(--butter); }
.kopf__nav a:hover::before, .kopf__nav a[aria-current="page"]::before { transform: scale(1); }
.kopf__nav a[aria-current="page"] { font-weight: 600; color: var(--tinte); }
.kopf__toggle { position: relative; width: 3rem; height: 3rem; margin-right: -.5rem; border: 0; background: transparent; border-radius: 50%; cursor: pointer; transition: background-color var(--t-fast); }
.kopf__toggle:hover { background: var(--butter); }
.kopf__toggle-linie, .kopf__toggle-linie::before, .kopf__toggle-linie::after {
	position: absolute; left: .75rem; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--tinte); content: "";
	transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease), background-color var(--t-fast);
}
.kopf__toggle-linie { top: calc(50% - 1px); }
.kopf__toggle-linie::before { top: -7px; left: 0; }
.kopf__toggle-linie::after { top: 7px; left: 0; }
.kopf__toggle[aria-expanded="true"] .kopf__toggle-linie { background: transparent; }
.kopf__toggle[aria-expanded="true"] .kopf__toggle-linie::before { top: 0; transform: rotate(45deg); }
.kopf__toggle[aria-expanded="true"] .kopf__toggle-linie::after { top: 0; transform: rotate(-45deg); }
/* Mobile Menue: ganze Flaeche, Butter, grosse Fredoka-Ziffern, gestaffelt */
.kopf__panel { position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0; z-index: 49; background: var(--butter); overflow: auto; opacity: 0; transform: translateY(-.5rem); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.kopf__panel[hidden] { display: none; }
.kopf__panel.is-offen { opacity: 1; transform: none; }
.kopf__panel::after { content: ""; position: absolute; right: -18%; bottom: -22%; width: 70vw; max-width: 26rem; aspect-ratio: 1 / .7; background: var(--pfirsich); border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; }
.kopf__panel-innen { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; padding-block: var(--s6) var(--s8); }
.kopf__panel-liste { display: grid; gap: .1rem; margin-bottom: auto; }
.kopf__panel-liste li { opacity: 0; transform: translateY(10px); transition: opacity 340ms var(--ease), transform 340ms var(--ease); transition-delay: calc(60ms + var(--i, 0) * 55ms); }
.is-offen .kopf__panel-liste li { opacity: 1; transform: none; }
.kopf__panel-liste a { display: flex; align-items: baseline; gap: .9rem; padding: .7rem .25rem; font: 600 clamp(1.75rem, 1.4rem + 2vw, 2.5rem)/1.15 var(--font-display); color: var(--tinte); text-decoration: none; letter-spacing: -.01em; }
.kopf__panel-liste a[aria-current="page"] { color: var(--kuerbis); }
.kopf__panel-nr { font: 600 .8125rem/1 var(--font-text); letter-spacing: .12em; color: var(--erbse); }
.kopf__panel-fuss { margin-top: var(--s7); display: grid; gap: var(--s4); justify-items: start; }
.kopf__panel-adresse { font-size: var(--fs-small); color: var(--tinte-2); }
html.menu-offen, html.menu-offen body { overflow: hidden; }
@media (min-width: 60em) { .kopf__nav, .kopf__cta { display: block; } .kopf__toggle, .kopf__panel { display: none; } }

/* ---------- Bildformen: Schale, Teller, Blob ---------- */
.blob { position: relative; isolation: isolate; }
.blob img, .blob picture { width: 100%; height: 100%; }
.blob img { object-fit: cover; aspect-ratio: 1 / 1; transition: transform 500ms var(--ease), border-radius 600ms var(--ease); filter: saturate(1.06) contrast(1.03); }
.blob--breit img { aspect-ratio: 4 / 3; }
.blob::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translate(5%, 6%) rotate(-3deg); background: var(--butter); transition: transform 500ms var(--ease); }
.blob--mint::before { background: var(--mint); } .blob--pfirsich::before { background: var(--pfirsich); } .blob--rosa::before { background: var(--rosa); } .blob--himmel::before { background: var(--himmel); } .blob--butter::before { background: var(--butter); }
.blob--a, .blob--a img, .blob--a picture, .blob--a::before { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
.blob--b, .blob--b img, .blob--b picture, .blob--b::before { border-radius: 44% 56% 47% 53% / 57% 45% 55% 43%; }
.blob--c, .blob--c img, .blob--c picture, .blob--c::before { border-radius: 52% 48% 60% 40% / 42% 58% 42% 58%; }
.blob img, .blob picture { overflow: hidden; }
.blob:hover img { transform: scale(1.035) rotate(-1.2deg); }
.blob--a:hover img { border-radius: 50% 50% 48% 52% / 54% 50% 50% 46%; }
.blob--b:hover img { border-radius: 52% 48% 55% 45% / 50% 52% 48% 50%; }
.blob--c:hover img { border-radius: 46% 54% 50% 50% / 48% 50% 50% 52%; }
.blob:hover::before { transform: translate(7%, 8%) rotate(-5deg); }
.kreis { position: relative; }
.kreis img, .kreis picture { border-radius: 50%; width: 100%; height: 100%; }
.kreis img { object-fit: cover; aspect-ratio: 1 / 1; transition: transform 500ms var(--ease); filter: saturate(1.06) contrast(1.03); }
.kreis:hover img { transform: scale(1.04); }
/* Schale: die Logoform als Bildmaske */
.schale { position: relative; }
.schale__bild { position: relative; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 62% 62%; aspect-ratio: 1 / .82; }
.schale__bild img, .schale__bild picture { width: 100%; height: 100%; }
.schale__bild img { object-fit: cover; filter: saturate(1.06) contrast(1.03); }
.schale__rand { position: absolute; left: -3%; right: -3%; top: -.55rem; height: 1.1rem; border-radius: 999px; background: var(--blau); }

/* ---------- Hero: gepinnte Passage, die Zutaten fallen in die Schale ---------- */
.hero { position: relative; --p: 0; --spread: 1; }
.js .hero { height: 190vh; }
.hero__buehne { position: relative; display: grid; align-items: center; overflow: clip; padding-top: clamp(1.5rem, .5rem + 3vw, 3rem); }
.hero__buehne::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--butter); border-radius: 50% 50% 0 0 / 3rem 3rem 0 0; z-index: 0; }
.hero__buehne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background-image: var(--korn); background-size: 180px; opacity: .45; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.stempel { position: absolute; z-index: 4; left: -6%; bottom: -2%; width: 28%; max-width: 11rem; filter: drop-shadow(0 10px 18px rgba(39, 43, 74, .14)); transform: translate(calc(var(--p) * -10vw), calc(var(--p) * 10vh)); opacity: calc(1 - var(--p) * 1.6); }
.stempel svg { width: 100%; height: auto; }
.js .stempel svg { animation: smv1-drehen 40s linear infinite; }
.stempel__text { font: 600 12.5px var(--font-text); letter-spacing: .1em; text-transform: uppercase; fill: var(--tinte); }
@keyframes smv1-drehen { to { transform: rotate(360deg); } }
.stempel svg { transform-origin: 50% 50%; }
.js .hero__buehne { position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); height: calc(100svh - var(--kopf-h)); padding-top: 0; }
.hero__innen { position: relative; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; width: 100%; }
.hero__text { position: relative; z-index: 3; transform: translateY(calc(var(--p) * -10vh)); opacity: calc(1 - var(--p) * 1.5); }
.hero__titel { font: 600 var(--fs-hero)/.94 var(--font-display); letter-spacing: -.036em; color: var(--tinte); max-width: 12ch; text-wrap: balance; }
.hero__titel .hand-ul { color: var(--kuerbis-dunkel); -webkit-text-fill-color: transparent; -webkit-text-stroke: .028em var(--kuerbis-dunkel); }
.hero__titel .hand--ul path { fill: var(--kuerbis-dekor); opacity: .55; }
.fonts-ok .hero__titel .hand-ul { animation: smv1-fuellen 620ms var(--ease) 820ms forwards; }
@keyframes smv1-fuellen { to { -webkit-text-fill-color: var(--kuerbis-dunkel); } }
.hero__subline { margin-top: var(--s5); font-size: clamp(1.0625rem, min(1.05rem + .35vw, 2.1vh), 1.3125rem); line-height: 1.5; color: var(--tinte-2); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s3); margin-top: var(--s6); }
.hero__cta .btn--gross { padding-inline: 1.4rem 1.2rem; min-height: 3.4rem; }
.hero__bild { position: relative; z-index: 2; width: 100%; max-width: 28rem; margin-inline: auto; padding-top: 30%;
	transform: translate(calc(var(--p) * -6vw), calc(var(--p) * -6vh)) scale(calc(1 + var(--p) * .22)); transform-origin: 50% 60%; }
.hero__schale { width: 100%; }
.js .hero__schale { animation: smv1-schale 820ms var(--ease) 60ms both; }
@keyframes smv1-schale { from { transform: translateY(26px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
/* Zutaten: Ebene 1 = Scroll-Versatz (Prozent der Buehne), Ebene 2 = Groesse, Ebene 3 = Landung beim Laden */
.zutat { position: absolute; inset: 0; z-index: 3; pointer-events: none;
	transform: translate(calc(var(--dx) * var(--spread) * (1 - var(--p) * .92)), calc(var(--dy) * var(--spread) * (1 - var(--p) * .92))); }
.zutat__mitte { position: absolute; left: calc(50% - var(--w, 12%) / 2); top: calc(46% - var(--w, 12%) / 2); width: var(--w, 12%); aspect-ratio: 1;
	transform: scale(calc(1 - var(--p) * .45)); }
.zutat__innen { width: 100%; height: 100%; border-radius: 50%; }
.zutat--foto .zutat__innen { border: 4px solid #fff; background: #fff; overflow: hidden; pointer-events: auto; }
.zutat--foto img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; }
.zutat--erbse .zutat__innen { background: var(--f, var(--mint-500)); }
.js .zutat__innen { animation: smv1-landen 760ms var(--spring) both; animation-delay: var(--d, 200ms); }
@keyframes smv1-landen { from { transform: translateY(-48px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.js .hero__text > * { animation: smv1-auftreten 620ms var(--ease) both; }
.js .hero__text > :nth-child(1) { animation-delay: 40ms; } .js .hero__text > :nth-child(2) { animation-delay: 120ms; } .js .hero__text > :nth-child(3) { animation-delay: 260ms; } .js .hero__text > :nth-child(4) { animation-delay: 360ms; }
@keyframes smv1-auftreten { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__hinweis { position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); opacity: calc(1 - var(--p) * 3); pointer-events: none; }
.hero__hinweis::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--erbse-dekor); animation: smv1-huepfen 1.6s var(--ease) infinite; }
@keyframes smv1-huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.35rem); } }
@media (min-width: 56.25em) {
	.hero__innen { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
	.hero__titel { max-width: 9ch; position: relative; z-index: 3; width: 128%; }
	.hero__bild { max-width: none; padding-top: 22%; margin-right: -4%; }
}
@media (max-width: 56.24em) { .hero { --spread: .72; } .stempel { width: 30%; left: -2%; bottom: -4%; transform: none !important; opacity: 1 !important; } .js .hero { height: auto; } .js .hero__buehne { position: relative; height: auto; top: auto; padding-top: clamp(1.5rem, .5rem + 3vw, 3rem); } .hero__text, .hero__bild, .zutat__mitte { transform: none !important; opacity: 1 !important; } .hero__hinweis { display: none; } .hero__bild { padding-top: 40%; margin-top: var(--s6); } }
/* Sehr hohe Viewports (Grossmonitore, Headless): statischer Hero statt Passage */
@media (max-height: 760px) and (min-width: 56.25em) { .stempel { transform: none !important; opacity: 1 !important; } .js .hero { height: auto; } .js .hero__buehne { position: relative; height: auto; top: auto; padding-top: clamp(1.5rem, .5rem + 3vw, 3rem); padding-bottom: 3rem; } .hero__text, .hero__bild, .zutat__mitte { transform: none !important; opacity: 1 !important; } .hero__hinweis { display: none; } }
@media (min-height: 1400px) { .stempel { transform: none !important; opacity: 1 !important; } .js .hero { height: auto; } .js .hero__buehne { position: relative; height: auto; top: auto; padding-top: clamp(1.5rem, .5rem + 3vw, 3rem); } .hero__text, .hero__bild, .zutat__mitte { transform: none !important; opacity: 1 !important; } .hero__hinweis { display: none; } }

/* ---------- Vertrauen: Butter-Band mit Schalen-Kante, Zaehler ---------- */
.vertrauen { position: relative; background: var(--butter); border-radius: var(--r-kante); padding-block: clamp(1rem, .5rem + 2vw, 2rem) clamp(4rem, 3rem + 4vw, 6.5rem); }
.vertrauen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--korn); background-size: 180px; opacity: .5; mix-blend-mode: multiply; pointer-events: none; }
.vertrauen__innen { position: relative; z-index: 1; }
.vertrauen__innen { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
.zaehler { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 1rem + 4vw, 5rem) clamp(2rem, 1rem + 5vw, 6rem); align-items: flex-end; }
.zaehler__item { position: relative; }
.zaehler__zahl { display: block; font: 600 clamp(4.25rem, 2rem + 10vw, 10.5rem)/.92 var(--font-display); letter-spacing: -.045em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.zaehler__item:first-child { margin-top: -.9em; }
.zaehler__zahl sup { font-size: .45em; vertical-align: super; color: var(--kuerbis); margin-left: .05em; }
.zaehler__label { display: block; margin-top: .4rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; color: var(--tinte-2); }
.vertrauen__satz { font: 500 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.35 var(--font-display); max-width: 26ch; text-wrap: balance; }
.vertrauen__satz strong { font-weight: 600; color: var(--kuerbis-dunkel); }
@media (min-width: 56.25em) { .vertrauen__innen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; } .vertrauen__satz { justify-self: end; } }

/* ---------- Teaser: Tablett, gestaffelte Reihe ---------- */
.tablett { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.tablett__item { position: relative; padding-top: var(--s5); border-top: 2px dotted var(--linie-stark); }
.tablett__nr { position: absolute; right: 0; top: .6rem; font: 600 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--kuerbis-dekor); letter-spacing: -.02em; }
.tablett__bild { width: 7.5rem; margin-bottom: var(--s5); }
.tablett__item:nth-child(1) .tablett__bild { width: 8.5rem; }
.tablett__item:nth-child(2) .tablett__bild { width: 6.75rem; }
.tablett__titel { margin-bottom: var(--s2); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.625rem); text-wrap: balance; }
.tablett__titel a { color: inherit; text-decoration: none; }
.tablett__titel a:hover { color: var(--kuerbis-dunkel); }
.tablett__item:has(.tablett__titel a:hover, .pfeil-link:hover) .tablett__bild img { transform: scale(1.1) rotate(-5deg); }
.tablett__item:has(.tablett__titel a:hover, .pfeil-link:hover) .tablett__nr { -webkit-text-stroke-color: var(--erbse-dekor); }
.tablett__text { color: var(--tinte-2); max-width: 34ch; }
.tablett__link { margin-top: var(--s4); }
@media (min-width: 48em) { .tablett { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 64em) {
	.tablett { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tablett__item:nth-child(2) { margin-top: 4rem; }
	.tablett__item:nth-child(3) { margin-top: 1.25rem; }
	.tablett__item:nth-child(4) { margin-top: 5rem; }
}

/* ---------- Trio: drei Teller in versetzter Hoehe ---------- */
.trio { background: #fff; }
.trio__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: start; }
.trio__item:nth-child(3) { grid-column: span 2; max-width: 60%; margin-inline: auto; }
.trio__item figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--tinte-2); }
@media (min-width: 56.25em) {
	.trio__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.trio__item:nth-child(2) { margin-top: 5rem; }
	.trio__item:nth-child(3) { grid-column: auto; max-width: none; margin: 0; margin-top: 1.5rem; }
}

/* ---------- CTA-Band: Tinte, Kontrast am Ende jeder Seite ---------- */
.sektion--cta { padding-block: var(--cta-abstand); }
/* Die Box setzt ihren Abstand selbst (oben = unten = --cta-abstand). Vorgaenger ohne farbiges Band enden deshalb buendig, ihr Sektions-Padding entfaellt vor der Box (auch ein verschachteltes Partnerlogo-Band). Band-Sektionen wie .gebiet oder die Tisch-Welle behalten ihr Innen-Padding: ihre sichtbare Kante ist das Sektionsende, von dort zaehlt der Token. */
.sektion:not(.gebiet):has(+ .sektion--cta), .partnerlogos:has(+ .sektion--cta), .sektion:has(+ .sektion--cta) .partnerlogos { padding-bottom: 0; }
.cta-band { position: relative; overflow: clip; display: grid; gap: var(--s5); align-items: center; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 4rem); background: var(--tinte); color: #fff; border-radius: 2rem 2rem 2rem .75rem; }
.cta-band::before { content: ""; position: absolute; right: -6rem; top: -8rem; width: 18rem; height: 18rem; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: rgba(255, 255, 255, .06); }
.cta-band__titel { font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.2 var(--font-display); margin-bottom: var(--s2); }
.cta-band__text p:last-child { color: rgba(255, 255, 255, .78); max-width: 44ch; }
.cta-band__aktionen { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--tinte); border-color: #fff; }
@media (min-width: 56.25em) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; } .cta-band__aktionen { justify-content: flex-end; } }

/* ---------- Kopfzone der Unterseiten: Tischtuch mit Teller an der Kante ---------- */
.kopfzone { position: relative; background: var(--butter); border-radius: var(--r-kante); padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: visible; }
.kopfzone--mint { background: var(--mint); } .kopfzone--himmel { background: var(--himmel); } .kopfzone--rosa { background: var(--rosa); } .kopfzone--pfirsich { background: var(--pfirsich); } .kopfzone--butter { background: var(--butter); }
.kopfzone__innen { display: grid; gap: var(--s6); align-items: center; }
.kopfzone__titel { font: 600 var(--fs-h1)/1 var(--font-display); letter-spacing: -.03em; color: var(--tinte); max-width: 14ch; text-wrap: balance; }
.kopfzone__lead { margin-top: var(--s5); }
.kopfzone__bild { width: min(55%, 16rem); margin-inline: auto; border: 8px solid #fff; border-radius: 50%; background: #fff; will-change: transform; }
.kopfzone--mit-bild { padding-bottom: 0; }
.kopfzone--mit-bild .kopfzone__innen { align-items: end; }
.kopfzone--mit-bild .kopfzone__text { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.kopfzone--mit-bild .kopfzone__bild { transform: translateY(22%); margin-bottom: 0; }
.kopfzone--mit-bild + .sektion { padding-top: calc(var(--sektion) + 3rem); }
@media (min-width: 56.25em) {
	.kopfzone__innen { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
	.kopfzone__bild { width: min(100%, 20rem); margin: 0; justify-self: end; }
	.kopfzone--mit-bild .kopfzone__bild { transform: translateY(28%); }
}
/* Kopfzone mit Portraet (Ueber uns): der Kreis der Kopfzone, auf halbe Contentbreite skaliert; er traegt den Hero von der H1-Oberkante bis unter den Lead, der Text steht vertikal mittig dazu. Kein Ueberhang an der Kante. Mobil unter dem Lead in voller Breite, Hoehe nach Bild. */
.kopfzone--portraet { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.kopfzone--portraet .kopfzone__innen { align-items: center; }
.kopfzone--portraet .kopfzone__text { padding-bottom: 0; }
.kopfzone--portraet .kopfzone__bild { width: 100%; max-width: 28rem; margin: var(--s4) auto 0; transform: none; }
.kopfzone--portraet + .sektion { padding-top: var(--sektion); }
@media (min-width: 56.25em) {
	.kopfzone--portraet .kopfzone__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
	.kopfzone--portraet .kopfzone__bild { max-width: none; margin: 0; justify-self: end; }
}

/* ---------- Speisekarte: nummerierte Liste statt Karten ---------- */
.gaenge { border-top: 2px dotted var(--linie-stark); }
.gang { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s4) var(--s5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; border-bottom: 2px dotted var(--linie-stark); }
.gang__nr { position: relative; font: 600 2rem/1 var(--font-display); color: var(--erbse); z-index: 0; }
.gang__nr::before { content: ""; position: absolute; left: -.75rem; top: -.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; z-index: -1; background: var(--butter); }
.gang:nth-child(2) .gang__nr::before { background: var(--mint); } .gang:nth-child(3) .gang__nr::before { background: var(--pfirsich); } .gang:nth-child(4) .gang__nr::before { background: var(--himmel); }
.gang__titel { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.gang__text { grid-column: 2; color: var(--tinte-2); max-width: 58ch; }
@media (min-width: 48em) { .gang { grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr); align-items: start; } .gang__titel { padding-top: .25rem; } .gang__text { grid-column: 3; } }

/* ---------- Essen: Bildstrecke, Teller mit Tiefe ---------- */
.bildstrecke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1rem, .5rem + 2vw, 2rem); align-items: center; }
.bildstrecke__item { will-change: transform; }
.bildstrecke__item.ist-gross { grid-column: span 2; }
.bildstrecke__item figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--tinte-2); padding-left: .15rem; }
.bildstrecke .blob { width: 100%; }
.bildstrecke .ist-gross .blob { max-width: 32rem; }
@media (min-width: 56.25em) {
	.bildstrecke { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.bildstrecke__item.ist-gross { grid-column: span 5; } .bildstrecke__item.ist-mittel { grid-column: span 4; } .bildstrecke__item.ist-klein { grid-column: span 3; }
	.bildstrecke .ist-gross .blob { max-width: none; }
	.bildstrecke__item:nth-child(2) { margin-top: 8%; } .bildstrecke__item:nth-child(3) { margin-bottom: 6%; } .bildstrecke__item:nth-child(4) { margin-top: 6%; } .bildstrecke__item:nth-child(5) { margin-bottom: 10%; }
}

/* ---------- Der Weg: Zickzack mit gezeichnetem Pfad und rollender Erbse ---------- */
.weg { position: relative; padding-block: var(--s4) var(--s6); }
.weg__pfad { position: absolute; top: 0; bottom: 0; left: 2.25rem; width: 2rem; overflow: visible; pointer-events: none; }
.weg__pfad svg { width: 100%; height: 100%; overflow: visible; }
.weg__pfad .weg__spur { fill: none; stroke: var(--linie-stark); stroke-width: 3; stroke-dasharray: .4 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.weg__pfad .weg__fortschritt { fill: none; stroke: var(--erbse-dekor); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.weg__erbse { position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; margin: -.625rem 0 0 -.625rem; border-radius: 50%; background: var(--erbse-dekor); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .12), 0 0 0 5px var(--weiss); pointer-events: none; opacity: 0; }
.weg__erbse.is-aktiv { opacity: 1; }
.etappen { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.etappe { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s5); align-items: start; padding-left: 0; }
.etappe__bild { position: relative; width: 5rem; isolation: isolate; }
.etappe__nr { position: absolute; left: -.25rem; top: -.5rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--erbse); font: 600 1.05rem/1 var(--font-display); border: 2px solid var(--erbse-hell); }
.etappe__titel { margin-bottom: var(--s2); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.etappe p { color: var(--tinte-2); max-width: 46ch; }
@media (min-width: 56.25em) {
	.weg__pfad { left: 50%; margin-left: -1rem; }
	.etappen { gap: clamp(3rem, 2rem + 4vw, 6rem); }
	.etappe { grid-template-columns: minmax(0, 1fr) 12rem minmax(0, 1fr); gap: var(--s6); align-items: center; }
	.etappe__bild { width: 12rem; grid-column: 2; }
	.etappe__nr { left: -.5rem; top: -.25rem; width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
	.etappe__text { grid-column: 3; grid-row: 1; }
	.etappe:nth-child(even) .etappe__text { grid-column: 1; text-align: right; justify-self: end; }
	.etappe:nth-child(even) .etappe p { margin-left: auto; }
}

/* ---------- Gut zu wissen: Tabelle mit Punkten ---------- */
.gutzuwissen { border-top: 2px dotted var(--linie-stark); }
.gutzuwissen__zeile { display: grid; gap: var(--s2) var(--s6); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) 0; border-bottom: 2px dotted var(--linie-stark); }
.gutzuwissen dt { font: 600 1.125rem/1.3 var(--font-display); color: var(--tinte); }
.gutzuwissen dd { color: var(--tinte-2); max-width: 60ch; }
@media (min-width: 48em) { .gutzuwissen__zeile { grid-template-columns: 16rem minmax(0, 1fr); } }

/* ---------- Einzugsgebiet ---------- */
.gebiet { background: var(--himmel); border-radius: 2.5rem 2.5rem 0 0; }
.gebiet__innen { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.gebiet__text .prose { margin-top: var(--s5); }
.gebiet__karte { width: 100%; max-width: 28rem; margin-inline: auto; }
.gebiet__karte svg { width: 100%; height: auto; overflow: visible; }
.gebiet__karte .ring { fill: none; stroke-width: 2.5; stroke-dasharray: .5 10; stroke-linecap: round; }
.gebiet__karte .ring--1 { stroke: var(--kuerbis-dekor); } .gebiet__karte .ring--2 { stroke: var(--blau); opacity: .7; } .gebiet__karte .ring--3 { stroke: var(--erbse-dekor); }
.gebiet__karte .p--mint { fill: var(--mint-500); } .gebiet__karte .p--pfirsich { fill: var(--pfirsich-500); } .gebiet__karte .p--rosa { fill: var(--rosa-500); } .gebiet__karte .p--himmel { fill: #fff; stroke: var(--himmel-500); stroke-width: 2; } .gebiet__karte .p--butter { fill: var(--butter-500); }
.gebiet__karte .pin__halo { fill: #fff; } .gebiet__karte .pin__punkt { fill: var(--kuerbis); } .gebiet__karte .pin__kern { fill: #fff; }
.gebiet__karte text { font-family: var(--font-text); fill: var(--tinte); }
.gebiet__karte .pin__text--1 { font-size: 17px; font-weight: 600; } .gebiet__karte .pin__text--2 { font-size: 15px; fill: var(--tinte-2); }
.gebiet__karte .tag__pfad { fill: none; stroke: var(--tinte-2); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.gebiet__karte .tag__box { fill: #fff; stroke: #fff; stroke-width: 1.5; } .gebiet__karte .tag__text { font-size: 15px; font-weight: 600; fill: var(--erbse); }
@media (min-width: 56.25em) { .gebiet__innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .gebiet__karte { margin: 0; justify-self: center; } }

/* ---------- Ueber uns ---------- */
.ueber__innen { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.ueber__text .prose { margin-top: var(--s5); }
.anspruch { margin-top: var(--s7); padding: var(--s5) var(--s6); background: var(--rosa); border-radius: 2rem .75rem 2rem 2rem; }
.anspruch__titel { font: 600 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kuerbis-dunkel); margin-bottom: var(--s2); }
.anspruch__text { font: 500 var(--fs-lead)/1.45 var(--font-display); max-width: 34ch; }
.ueber__bild { width: 100%; max-width: 34rem; margin-inline: auto; }
.ueber__komposition { position: relative; padding: 0 10% 8% 0; }
.ueber__bild .blob { width: 100%; }
.ueber__klein { position: absolute; right: 0; bottom: 0; width: 32%; max-width: 10rem; border: 6px solid #fff; border-radius: 50%; background: #fff; }
.ueber__bild figcaption { margin-top: var(--s4); font-size: var(--fs-small); color: var(--tinte-2); }
@media (min-width: 56.25em) { .ueber__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ueber__bild { max-width: none; margin: 0; } }
/* Zeitleiste: drei Erbsen an einer Schnur */
.zeit { padding-top: 0; }
.zeitleiste { position: relative; display: grid; gap: var(--s6); padding-left: 2.5rem; }
.zeitleiste::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; border-left: 3px dotted var(--linie-stark); }
.zeitleiste__item { position: relative; }
.zeitleiste__item::before { content: ""; position: absolute; left: -2.5rem; top: .35rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--erbse-dekor); box-shadow: 0 0 0 5px #fff; }
.zeitleiste__jahr { display: block; font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--font-display); color: var(--tinte); margin-bottom: var(--s2); letter-spacing: -.02em; }
.zeitleiste__item p { color: var(--tinte-2); max-width: 30ch; }
@media (min-width: 56.25em) {
	.zeitleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; padding-top: 2.5rem; gap: var(--s6); }
	.zeitleiste::before { left: .5rem; right: .5rem; top: .55rem; bottom: auto; border-left: 0; border-top: 3px dotted var(--linie-stark); }
	.zeitleiste__item::before { left: 0; top: -2.5rem; }
}
/* Marke: grosses Logo, Erbsen fallen in die Schale */
.marke { background: var(--butter); border-radius: var(--r-kante); }
.marke__innen { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.marke__logo { padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: #fff; border-radius: 2.5rem 2.5rem 2.5rem 1rem; display: grid; place-items: center; }
.marke__logo .logo { color: var(--tinte); }
.js .marke__logo .hd__finger { transform-box: fill-box; transform-origin: 50% 92%; }
/* Marken-Moment: die Finger richten sich nacheinander auf */
.js .marke__logo:not(.is-in) .hd__finger { opacity: 0; transform: scaleY(.4) rotate(-18deg); }
.js .marke__logo.is-in .hd__finger { animation: smv1-spreizen 820ms var(--spring) both; }
.js .marke__logo.is-in .hd__finger--1 { animation-delay: 110ms; } .js .marke__logo.is-in .hd__finger--2 { animation-delay: 220ms; } .js .marke__logo.is-in .hd__finger--3 { animation-delay: 330ms; } .js .marke__logo.is-in .hd__finger--4 { animation-delay: 440ms; }
@keyframes smv1-erbse-fallen { from { opacity: 0; transform: translateY(-70px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (min-width: 56.25em) { .marke__innen { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ---------- Kontakt ---------- */
.kontakt { padding-bottom: clamp(4rem, 3rem + 5vw, 7rem); }
.kontakt__innen { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: start; }
.kontakt__direkt-titel { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.kontakt__direkt-text { color: var(--tinte-2); max-width: 40ch; }
.kontakt__adresse { margin-top: var(--s6); line-height: 1.7; color: var(--tinte-2); padding-left: var(--s5); border-left: 3px dotted var(--linie-stark); }
.kontakt__adresse strong { color: var(--tinte); }
.kontakt__adresse a { font-weight: 600; }
.kopf__panel-adresse a { color: var(--erbse); font-weight: 600; }
.kontakt__karte { background: var(--mint); border-radius: 2.5rem 1rem 2.5rem 2.5rem; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
.form__chips { border: 0; padding: 0; margin-bottom: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.form__chips legend { float: left; width: 100%; margin-bottom: var(--s2); font-weight: 600; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .45rem 1rem .45rem .85rem; background: #fff; border: 2px solid #fff; border-radius: var(--r-schale); font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-base) var(--spring); }
.chip span::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--erbse-hell); transition: background-color var(--t-fast), transform var(--t-base) var(--spring); }
.chip:hover span { border-color: var(--erbse-hell); transform: translateY(-1px); }
.chip input:checked + span { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.chip input:checked + span::before { background: var(--erbse-dekor); transform: scale(1.25); }
.chip input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 2px; }
.form__zeile--2 { display: grid; gap: var(--s4); }
@media (min-width: 36em) { .form__zeile--2 { grid-template-columns: 1fr 1fr; } }
.form__feld { margin-bottom: var(--s4); }
.form__feld label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: var(--fs-small); transition: color var(--t-fast); }
.form__feld:focus-within label { color: var(--erbse); }
.form__feld abbr { color: var(--kuerbis); }
.form__feld input, .form__feld textarea { width: 100%; padding: .9rem 1rem; border: 2px solid #fff; border-radius: var(--r-feld); background: #fff; color: var(--tinte); font: inherit; line-height: 1.4; transition: border-color var(--t-fast), transform var(--t-base) var(--ease), box-shadow var(--t-fast); }
.form__feld textarea { resize: vertical; min-height: 8rem; }
.form__feld input:hover, .form__feld textarea:hover { border-color: var(--erbse-hell); }
.form__feld input:focus-visible, .form__feld textarea:focus-visible { outline: none; border-color: var(--erbse); transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(47, 122, 58, .14); }
.form__feld input:user-invalid, .form__feld textarea:user-invalid { border-color: var(--kuerbis); }
.form__hinweis { font-size: var(--fs-small); color: var(--tinte-2); margin: var(--s3) 0 var(--s5); max-width: 56ch; }
.form__danke { padding: var(--s4) 0; outline: none; }
.form__schale { width: 6.5rem; margin-bottom: var(--s5); overflow: visible; }
.form__schale circle { transform-box: fill-box; transform-origin: center; animation: smv1-erbse-fallen 820ms var(--spring) both; }
.form__schale circle:nth-of-type(2) { animation-delay: 140ms; } .form__schale circle:nth-of-type(3) { animation-delay: 280ms; }
.form__danke h3 { margin-bottom: var(--s3); }
.form__danke p { color: var(--tinte-2); max-width: 40ch; }
@media (min-width: 56.25em) { .kontakt__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Rechtliches ---------- */
.recht__raster { display: grid; gap: var(--s5); margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.recht__block { padding: var(--s5); background: var(--butter); border-radius: 1.5rem 1.5rem 1.5rem .5rem; }
.recht__block dt { font: 600 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--erbse); margin-bottom: var(--s2); }
.recht__block dd { line-height: 1.65; }
.recht__abschnitte { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 48rem; }
.recht__abschnitt h2 { display: flex; align-items: baseline; gap: .75rem; font: 600 1.375rem/1.25 var(--font-display); margin-bottom: var(--s2); }
.recht__nr { font: 600 .9rem/1 var(--font-text); color: var(--erbse); letter-spacing: .08em; }
.recht__abschnitt p { color: var(--tinte-2); max-width: 62ch; }
@media (min-width: 48em) { .recht__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .recht__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Logo-Varianten (intern) ---------- */
.logovar { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 2px dotted var(--linie-stark); }
.logovar__kopf { max-width: 52rem; margin-bottom: var(--s6); }
.logovar__name { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--font-display); margin-bottom: var(--s3); }
.logovar__text { color: var(--tinte-2); }
.logovar__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.logovar__feld { position: relative; min-height: 9rem; padding: 2.5rem 1.5rem 1.5rem; border-radius: 1.25rem; display: grid; place-items: center; }
.logovar__feld--gross { grid-column: span 2; min-height: 14rem; }
.logovar__feld--hell { background: #fff; border: 1px solid var(--linie); color: var(--tinte); }
.logovar__feld--dunkel { background: var(--tinte); color: #fff; }
.logovar__label { position: absolute; left: 1.25rem; top: .9rem; font: 600 .75rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.logovar__stage .logo, .logovar__stage img { width: 100%; max-width: 30rem; height: auto; }
.logovar__stage--klein .logo, .logovar__stage--klein img { max-width: 9rem; }
.logovar__stage--fav .logo, .logovar__stage--fav img { width: 32px; height: 32px; max-width: none; }
.logovar__stage--zeichen .logo, .logovar__stage--zeichen img { width: 96px; height: 96px; max-width: none; }
@media (min-width: 56.25em) { .logovar__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Fuss: dunkel, Wortmarke weiss ---------- */
.fuss { background: var(--tinte); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.fuss__innen { display: grid; gap: var(--s7) var(--s6); }
.fuss__zeile { margin-top: var(--s4); font-size: var(--fs-small); color: rgba(255, 255, 255, .72); max-width: 36ch; }
.fuss__titel { font: 600 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--erbse-hell); margin-bottom: var(--s3); }
.fuss__nav ul { display: grid; gap: .35rem; }
.fuss__nav a, .fuss__kontakt a, .fuss__recht a { color: #fff; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.fuss__nav a::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--erbse-dekor); transform: scale(0); transition: transform 300ms var(--spring); }
.fuss__nav a:hover::before, .fuss__nav a[aria-current="page"]::before { transform: scale(1); }
.fuss__nav a:hover, .fuss__kontakt a:hover, .fuss__recht a:hover { color: var(--butter-500); }
.fuss__kontakt address, .fuss__kontakt p { color: rgba(255, 255, 255, .82); line-height: 1.7; }
.fuss__kontakt p { margin-top: var(--s3); }
.fuss__unten { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--fs-small); color: rgba(255, 255, 255, .7); }
.fuss__recht { display: flex; gap: var(--s5); }
@media (min-width: 56.25em) { .fuss__innen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .fuss__unten { grid-column: 1 / -1; } }

/* ---------- Reveal (nur mit JS, nur opacity/transform) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.sektion--404 { min-height: 60vh; }
.sektion--404 .titel { margin: var(--s4) 0 var(--s5); }
.sektion--404 p + p { margin-top: var(--s6); }

/* ---------- B01 Teller zu Uhr (Hero-Signature, uebersetzt): ein Teller rechts der Schale fliegt beim Scrollen in die Ecke und wird zur Uhr ---------- */
.teller__platz { position: absolute; z-index: 3; left: 80%; top: 26%; width: 25%; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; background: #fff; overflow: hidden; box-shadow: 0 12px 24px rgba(39, 43, 74, .12); pointer-events: none;
	transform: translate(calc(var(--p) * 4vw), calc(var(--p) * -3vh)); }
.teller__platz img, .teller__platz picture { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; aspect-ratio: 1; display: block; }
.js .teller__platz { animation: smv1-landen 760ms var(--spring) 520ms both; }
.teller { display: none; }
.js.teller-an .teller__platz { opacity: 0; animation: none; }
.js.teller-an .teller { display: block; position: fixed; right: var(--tp, 1.5rem); bottom: var(--tp, 1.5rem); width: var(--ts, 4.75rem); aspect-ratio: 1; z-index: 45; pointer-events: none; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 10px 18px rgba(39, 43, 74, .16)); opacity: 0; }
.js.teller-an .teller.is-an { opacity: 1; }
.teller__innen { position: relative; width: 100%; height: 100%; animation: smv1-landen 760ms var(--spring) 520ms both; }
.teller__foto { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #fff; background: #fff; overflow: hidden; opacity: var(--foto, 1); }
.teller__foto img, .teller__foto picture { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; aspect-ratio: 1; display: block; }
.teller__uhr { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--ring, 0); overflow: visible; }
.uhr__blatt { fill: #fff; stroke: var(--butter-500); stroke-width: 5; }
.uhr__punkt { fill: var(--tinte-3); }
.uhr__zwoelf { fill: var(--kuerbis); }
.uhr__zeiger, .uhr__h, .uhr__m { stroke: var(--tinte); stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; }
.uhr__zeiger { stroke-width: 9; transform: rotate(var(--hand, 240deg)); }
.uhr__achse { fill: var(--tinte); }
.uhr__text { font: 600 24px var(--font-display); fill: var(--kuerbis); text-anchor: middle; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.teller.is-zwoelf .uhr__zeiger, .uhr.is-zwoelf .uhr__h, .uhr.is-zwoelf .uhr__m { stroke: var(--kuerbis); }
.teller.is-zwoelf .uhr__achse, .uhr.is-zwoelf .uhr__achse { fill: var(--kuerbis); }
.teller.is-zwoelf .uhr__text { opacity: 1; }
.teller.is-zwoelf .uhr__zwoelf, .uhr.is-zwoelf .uhr__zwoelf { transform-box: fill-box; transform-origin: center; animation: smv1-huepfer-klein 640ms var(--spring); }
@keyframes smv1-huepfer-klein { 0% { transform: scale(1); } 45% { transform: scale(1.8); } 100% { transform: scale(1); } }
@media (max-width: 56.24em) { .teller__platz { left: 76%; top: 4%; width: 26%; transform: none !important; } .js.teller-an .teller { --ts: 3.75rem; --tp: .9rem; } }
@media (max-height: 760px) and (min-width: 56.25em), (min-height: 1400px) { .teller__platz { transform: none !important; } }

/* ---------- B04 Punkt zwoelf (uebersetzt): klebende Uhr links, Etappen rechts, Erbsen-Linie fuellt sich ---------- */
.punktzwoelf { display: grid; gap: var(--s6); align-items: start; }
.uhrwrap { display: flex; align-items: center; gap: var(--s4); }
.uhr { width: clamp(4rem, 14vw, 13rem); flex: none; filter: drop-shadow(0 10px 18px rgba(39, 43, 74, .10)); }
.uhr svg { width: 100%; height: auto; overflow: visible; display: block; }
.uhr__h { stroke-width: 8; transform: rotate(var(--h, 225deg)); }
.uhr__m { stroke-width: 5; transform: rotate(var(--m, 180deg)); }
.uhr__label { margin: 0; }
.uhr__label span { display: inline-block; transition: opacity var(--t-base) var(--ease); }
.etappenwrap { position: relative; padding-left: clamp(1.75rem, 1rem + 3vw, 3rem); }
.etappen--uhr { display: grid; gap: 0; }
.etappen__linie { position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 3px; border-radius: 2px; background-image: linear-gradient(var(--linie-stark) 0 4px, transparent 4px 11px); background-size: 3px 11px; pointer-events: none; }
.etappen__fuell { position: absolute; inset: 0; background: var(--erbse-dekor); border-radius: 2px; transform-origin: top; transform: scaleY(var(--progress, 0)); }
.etappen__erbse { position: absolute; left: 50%; top: 0; width: 1.25rem; height: 1.25rem; margin-left: -.625rem; margin-top: -.625rem; border-radius: 50%; background: var(--erbse-dekor); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .12), 0 0 0 5px var(--weiss); opacity: 0; will-change: transform; }
.etappen__erbse.is-aktiv { opacity: 1; }
.etappe--uhr { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "nr titel" "bild bild"; gap: var(--s4) var(--s4); align-items: start; padding: var(--s6) 0 var(--s7); border-bottom: 2px dotted var(--linie); }
.etappe--uhr:last-child { border-bottom: 0; }
.etappe__punkt { position: absolute; left: calc(-1 * clamp(1.75rem, 1rem + 3vw, 3rem) - 5.5px); top: calc(var(--s6) + .45em); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--linie-stark); transition: background-color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), transform var(--t-slow) var(--spring); }
.etappe--uhr.is-aktiv .etappe__punkt, .etappe--uhr.is-fertig .etappe__punkt { background: var(--erbse-dekor); border-color: var(--erbse-dekor); }
.etappe--uhr.is-aktiv .etappe__punkt { transform: scale(1.35); }
.etappe--uhr .etappe__nr { grid-area: nr; position: static; width: auto; height: auto; border: 0; background: none; display: block; font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--font-display); color: var(--tinte-3); font-variant-numeric: tabular-nums; transition: color var(--t-slow) var(--ease); }
.etappe--uhr.is-aktiv .etappe__nr, .etappe--uhr.is-fertig .etappe__nr { color: var(--kuerbis); }
.etappen--uhr .etappe--uhr .etappe__text { grid-area: titel; text-align: left; justify-self: stretch; padding: 0; }
.etappen--uhr .etappe--uhr .etappe p { margin-left: 0; max-width: 46ch; }
.etappen--uhr .etappe--uhr .etappe__bild--breit { grid-area: bild; width: 100%; }
.etappe--uhr .etappe__titel { margin-bottom: var(--s2); }
.etappe__bild--breit { grid-area: bild; width: 100%; margin: 0; border-radius: 2rem 2rem 2rem .75rem; overflow: hidden; box-shadow: 0 14px 28px rgba(39, 43, 74, .10); isolation: isolate; }
.etappe__bild--breit img, .etappe__bild--breit picture { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms var(--ease); filter: saturate(1.06) contrast(1.03); }
@media (hover: hover) { .etappe--uhr:hover .etappe__bild--breit img { transform: scale(1.025); } }
@media (max-width: 56.24em) {
	.uhrwrap { position: sticky; top: var(--kopf-h); z-index: 5; background: var(--weiss); padding: .6rem 0; margin-top: calc(-1 * var(--s4)); }
	.uhr { width: 3.75rem; }
}
@media (min-width: 56.25em) {
	.punktzwoelf { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
	.uhrwrap { position: sticky; top: calc(var(--kopf-h) + 2rem); flex-direction: column; align-items: flex-start; gap: var(--s5); }
	.etappe--uhr { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "nr titel bild"; gap: var(--s5) var(--s6); align-items: center; padding: var(--s7) 0 var(--s8); }
	.etappen--uhr .etappe--uhr .etappe__text { padding-right: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
	.teller { display: none !important; } .js.teller-an .teller__platz { opacity: 1; }
	.uhr { --h: 360deg !important; --m: 360deg !important; } .etappenwrap { --progress: 1 !important; } .etappen__erbse { display: none; }
	.etappe--uhr .etappe__punkt { background: var(--erbse-dekor); border-color: var(--erbse-dekor); } .etappe--uhr .etappe__nr { color: var(--kuerbis); }
	.teller.is-zwoelf .uhr__zwoelf, .uhr.is-zwoelf .uhr__zwoelf { animation: none; }
}

/* ---------- Fable-2-Transplantat A «Bild waechst aus dem Rahmen» (Baustein smeileys-v2, README-Rezept): die Kuechen-Schale auf /so-funktioniert-es/ startet links und rechts um 14 % eingeklappt (clip-path mit --g 0..1 aus dem Scrollfortschritt) und oeffnet sich auf volle Breite; dazu die leise Parallaxe (--py) des Bildes im Rahmen. Nur clip-path/transform, kein Layout-Shift. Die Schalen-Kante ragt -3 % ueber den Kasten, der Rand .55rem darueber: deshalb negative Innenabstaende am Ende. ---------- */
.schale--waechst { clip-path: inset(-1rem calc(-3% + 17% * (1 - var(--g, 1))) 0 calc(-3% + 17% * (1 - var(--g, 1)))); will-change: clip-path; }
[data-parallax] img { transform: translateY(var(--py, 0)) scale(1.06); transition: none; }
@media (prefers-reduced-motion: reduce) { .schale--waechst { clip-path: none; } [data-parallax] img { transform: none; } }

/* ---------- Fable-2-Transplantat B «Fuenf Etappen, ein Zmittag» (nur /etappen-vorschau/): Port des Bausteins smeileys-v2. Token-Mapping: Espresso->Tinte, auf-dunkel->Weiss, Eigelb->Butter, haar-dunkel->Weiss .22; Newsreader->Fredoka, Schibsted->Instrument Sans. Nur transform/opacity, Linie scaleY, Marken werden aktiv, reduced-motion = Endzustand. ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.weg2 { --w2-flaeche: var(--tinte); --w2-text: #fff; --w2-text-2: rgba(255, 255, 255, .74); --w2-akzent: var(--butter-500); --w2-haar: rgba(255, 255, 255, .22); background: var(--w2-flaeche); color: var(--w2-text); border-radius: var(--r-kante); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) clamp(4rem, 3rem + 5vw, 8rem); }
.weg2__innen { display: grid; gap: var(--s7); }
.weg2__kopf { display: grid; gap: var(--s4); align-content: start; }
.weg2 .eyebrow, .weg2 .titel { color: var(--w2-text); }
.weg2 .weg2__eyebrow { color: var(--w2-text-2); }
.weg2__stand { font: 400 clamp(3rem, 2rem + 5vw, 7rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--w2-text); font-variant-numeric: tabular-nums; }
.weg2__stand small { display: block; margin-top: var(--s3); font: 600 var(--fs-eyebrow)/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--w2-text-2); }
.weg2__liste { position: relative; padding-left: 2.75rem; }
.weg2__etappen { display: grid; gap: var(--s7); }
.weg2__linie { position: absolute; left: .6rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--w2-haar); border-radius: 2px; }
.weg2__fuell { position: absolute; inset: 0; background: var(--w2-akzent); border-radius: 2px; transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 120ms linear; }
.weg2__etappe { position: relative; display: grid; gap: var(--s3); }
.weg2__marke { position: absolute; left: -2.75rem; top: .15rem; width: 1.5rem; height: 1.5rem; transform: translateX(-.1rem); overflow: visible; }
.weg2__marke circle { fill: var(--w2-flaeche); stroke: var(--w2-text-2); stroke-width: 8; transition: stroke var(--t-slow) var(--ease); }
.weg2__marke .portion { fill: transparent; stroke: none; transform-box: view-box; transform-origin: 50% 50%; transform: scale(.4); transition: fill var(--t-slow) var(--ease), transform var(--t-slow) var(--spring); }
.weg2__etappe.is-aktiv .weg2__marke circle { stroke: var(--w2-akzent); }
.weg2__etappe.is-aktiv .weg2__marke .portion { fill: var(--w2-akzent); transform: scale(1); }
.weg2__nr { font: 400 2.25rem/1 var(--font-display); color: var(--w2-text-2); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.weg2__h3 { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -.012em; color: var(--w2-text); }
.weg2__etappe p { color: var(--w2-text-2); max-width: 30rem; }
.weg2__bild { margin-top: var(--s4); max-width: 34rem; }
.weg2__bild--rund { max-width: 16rem; }
.weg2__rahmen { overflow: hidden; border-radius: 1.5rem 1.5rem 1.5rem .5rem; background: rgba(255, 255, 255, .06); }
.weg2__rahmen.kreis { border-radius: 50%; }
.weg2__rahmen img, .weg2__rahmen picture { display: block; width: 100%; height: auto; }
.weg2__rahmen img { transition: transform 600ms var(--ease); filter: saturate(1.06) contrast(1.03); }
@media (hover: hover) { .weg2__etappe:hover .weg2__rahmen img { transform: scale(1.025); } }
.weg2__legende { display: flex; gap: .75rem; align-items: baseline; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--w2-haar); font-size: var(--fs-small); line-height: 1.45; color: var(--w2-text-2); max-width: 34rem; }
.weg2__legende-strich { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--w2-akzent); transform: translateY(-.05em); }
.weg2__schluss { color: var(--w2-text-2); max-width: 42rem; }
.weg2__schluss .pfeil-link { color: var(--w2-akzent); }
@media (min-width: 56.25em) {
	.weg2__innen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
	.weg2__kopf { position: sticky; top: calc(var(--kopf-h) + 2rem); }
	.weg2__liste { padding-left: 4rem; }
	.weg2__etappen { gap: clamp(4rem, 3rem + 4vw, 6rem); }
	.weg2__linie { left: 1rem; }
	.weg2__marke { left: -4rem; top: .3rem; width: 2rem; height: 2rem; transform: translateX(.05rem); }
	.weg2__schluss { grid-column: 2; padding-left: 4rem; }
}
@media (prefers-reduced-motion: reduce) { .weg2__fuell { transform: scaleY(1) !important; transition: none; } .weg2__marke circle { stroke: var(--w2-akzent); } .weg2__marke .portion { fill: var(--w2-akzent); transform: scale(1); } }

/* ---------- Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.js .marke__logo .hd__finger, .js .kopf .logo .hd__finger { opacity: 1 !important; transform: none !important; animation: none !important; }
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.hand-ul .hand--ul { transform: none !important; animation: none; }
	.js .reveal { opacity: 1; transform: none; }
	.js .hero { height: auto; }
	.js .hero__buehne { position: relative; height: auto; top: auto; }
	.hero__text, .hero__bild, .zutat__mitte { transform: none !important; opacity: 1 !important; }
	.hero__hinweis { display: none; }
	.js .stempel svg { animation: none; }
	.stempel { transform: none !important; opacity: 1 !important; }
	body::before { opacity: 0 !important; }
	.weg__pfad .weg__fortschritt { stroke-dashoffset: 0; }
	.weg__erbse { display: none; }
	.js .marke__logo:not(.is-in) circle { opacity: 1; transform: none; }
	.bildstrecke__item { transform: none !important; }
}

/* ---------- Der gedeckte Tisch: horizontale Passage mit Tellern. Inhalt zuerst: die Reihe ist eine native, horizontal scrollbare Bahn (ohne JS, mit reduced motion, auf sehr hohen Viewports oder wenn die Buehne den Inhalt nicht fasst). Die Scroll-Passage .tisch--fahrt (Buehne sticky, Reihe faehrt per transform) setzt JS nur, wenn Bewegung erlaubt ist und die gepinnte Buehne den Inhalt nachweislich fasst; die Sektionshoehe (Viewport + Reiseweg) setzt JS inline. Eigener Klassenname .tisch__teller, weil .teller dem Hero-Baustein B01 gehoert (dort display:none bzw. fixed). ---------- */
.tisch { position: relative; padding-top: 0; }
.tisch .tisch__buehne { padding-top: var(--s6); }
.tisch__buehne { position: relative; overflow: clip; }
.tisch__buehne { background: var(--pfirsich); border-radius: var(--r-kante); }
.tisch__buehne::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--korn); background-size: 180px; opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.tisch__kopf, .tisch__bahn { position: relative; z-index: 1; }
.tisch--fahrt .tisch__buehne { position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); height: calc(100svh - var(--kopf-h)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; padding-top: 0; }
.tisch__kopf { display: grid; gap: var(--s4) var(--s6); align-items: end; padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.tisch--fahrt .tisch__kopf { margin-bottom: var(--s5); }
.tisch__lead { max-width: 44ch; }
.tisch__bahn { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: var(--s4) var(--s8); } /* unten Platz fuer den Versatz der ungeraden Teller (bis 2.5rem) */
.tisch__bahn::-webkit-scrollbar { display: none; }
.tisch--fahrt .tisch__bahn { overflow: hidden; min-width: 0; width: 100%; padding-block: var(--s5) var(--s7); } /* unten Platz fuer den Versatz der ungeraden Teller */
.tisch__reihe { display: flex; align-items: center; gap: clamp(1.25rem, 1rem + 2vw, 3rem); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.tisch__teller { flex: none; scroll-snap-align: center; }
.tisch__teller--l { width: clamp(14rem, 60vw, 26rem); }
.tisch__teller--m { width: clamp(11rem, 46vw, 19rem); }
.tisch__teller--s { width: clamp(8rem, 34vw, 13rem); }
.tisch__teller:nth-child(odd) { transform: translateY(clamp(.5rem, 2vw, 2.5rem)); }
.tisch__teller:nth-child(3n) { transform: translateY(calc(clamp(.5rem, 2vw, 2.5rem) * -1)); }
.tisch__teller--ende { width: auto; padding-inline: var(--s6); align-self: center; }
.teller__rand { position: relative; padding: .45rem; background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie); }
.teller__rand::after { content: ""; position: absolute; inset: .45rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -22px 30px -20px rgba(39, 43, 74, .22); pointer-events: none; }
.teller__rand img { transition: transform 600ms var(--ease); filter: saturate(1.08) contrast(1.04) brightness(1.02); }
.tisch__teller:hover .teller__rand img { transform: scale(1.04) rotate(-2deg); }
.tisch__teller figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--tinte-2); text-align: center; }
@media (min-width: 56.25em) { .tisch__kopf { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* ---------- Tischplatte: zwoelf Teller in freier Ordnung ---------- */
.tischplatte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1rem, .5rem + 2vw, 2rem); align-items: center; }
.tischplatte__item { will-change: transform; }
.tischplatte__item--l { grid-column: span 2; max-width: 75%; margin-inline: auto; }
.tischplatte figcaption { margin-top: var(--s3); margin-bottom: var(--s4); font-size: var(--fs-small); color: var(--tinte-2); text-align: center; }
.tischplatte .teller__rand img { transition: transform 600ms var(--ease); filter: saturate(1.08) contrast(1.04) brightness(1.02); }
.tischplatte__item:hover .teller__rand img { transform: scale(1.04) rotate(2deg); }
@media (min-width: 56.25em) {
	.tischplatte { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.tischplatte__item--l { grid-column: span 5; max-width: none; margin: 0; }
	.tischplatte__item--m { grid-column: span 4; }
	.tischplatte__item--s { grid-column: span 3; }
	.tischplatte { row-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
	.tischplatte__item:nth-child(2) { margin-top: 8%; }
	.tischplatte__item:nth-child(3) { margin-top: 2%; }
	.tischplatte__item:nth-child(5) { margin-top: 10%; }
	.tischplatte__item:nth-child(7) { margin-top: 3%; }
	.tischplatte__item:nth-child(8) { margin-top: 12%; }
	.tischplatte__item:nth-child(11) { margin-top: 8%; }
}
@media (prefers-reduced-motion: reduce) {
	.tisch__reihe { transform: none !important; }
	.tischplatte__item { transform: none !important; }
}

/* ---------- Unsere Kueche (Start): Schalen-Totale mit Kuehlraum-Teller ---------- */
.kueche__innen { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.kueche__komposition { position: relative; padding: 0 12% 10% 0; }
.kueche__schale { width: 100%; }
.kueche__klein { position: absolute; right: 0; bottom: 0; width: 34%; max-width: 12rem; border: 6px solid #fff; border-radius: 50%; background: #fff; }
.kueche__text .lead { margin-top: var(--s5); }
.kueche__link { margin-top: var(--s6); }
@media (min-width: 56.25em) { .kueche__innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
/* ---------- Blick in die Kueche (Ablauf): grosse Totale ---------- */
.kuechenblick { padding-top: 0; }
.kuechenblick__innen { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: end; }
.kuechenblick__text .lead { margin-top: var(--s5); }
.kuechenblick__bild .schale { width: 100%; }
@media (min-width: 56.25em) { .kuechenblick__innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .kuechenblick__text { padding-bottom: 8%; } }

/* ---------- Tagesplan: stilisiertes Planungsblatt, frei erfunden ---------- */
.tagesplan { padding-top: 0; }
.tagesplan__innen { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.tagesplan__text .lead { margin-top: var(--s5); }
.plan { width: 100%; max-width: 36rem; }
.plan__blatt { position: relative; background: #fff; border-radius: 1.5rem 1.5rem 1.5rem .5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.plan__blatt::before { content: ""; position: absolute; right: -3rem; top: -3rem; width: 9rem; height: 9rem; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: var(--butter); }
.plan__blatt::after { content: ""; position: absolute; inset: 0; background-image: var(--korn); background-size: 180px; opacity: .1; mix-blend-mode: multiply; pointer-events: none; }
.plan__kopfzeile { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.plan__titel { font: 600 1.375rem/1.2 var(--font-display); }
.plan__tag { font: 600 .75rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--kuerbis-dunkel); padding: .35rem .6rem; border: 1.5px dashed var(--kuerbis-dekor); border-radius: .5rem; }
.plan__raster { position: relative; display: grid; gap: 0; font-size: var(--fs-small); }
.plan__zeile { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, .7fr)) 1.6rem; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 2px dotted var(--linie-stark); }
.plan__zeile--kopf { font: 600 .75rem/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); border-bottom-color: var(--tinte-2); }
.plan__zeile--kopf span:not(:first-child) { text-align: right; }
.plan__gericht { font-weight: 600; }
.plan__zahl { text-align: right; font: 600 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--tinte); }
.plan__zahl:last-of-type { color: var(--kuerbis-dunkel); }
.plan__haken { justify-self: end; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--mint); display: grid; place-items: center; }
.plan__haken svg { width: .9rem; height: .9rem; }
.plan__haken path { fill: none; stroke: var(--erbse); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.plan__zeile--kontrolle { grid-template-columns: minmax(0, 1.7fr) minmax(0, 2.8fr) 1.6rem; border-bottom: 0; padding-top: .9rem; }
.plan__kontrolle { color: var(--tinte-2); }
.plan__haken--gross { width: 1.6rem; height: 1.6rem; background: var(--erbse-hell); }
.plan__haken--gross svg { width: 1.1rem; height: 1.1rem; }
.plan figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--tinte-2); }
/* Einschreib-Moment: Zeilen treten auf, Haken zeichnen sich, Zahlen zaehlen (data-zaehler) */
.js .plan .plan__zeile:not(.plan__zeile--kopf) { opacity: 0; transform: translateX(-8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.js .plan.is-in .plan__zeile { opacity: 1; transform: none; }
.js .plan.is-in .plan__haken path { animation: smv1-haken 420ms var(--ease) forwards; animation-delay: calc(500ms + var(--i, 0) * 120ms); }
@keyframes smv1-haken { to { stroke-dashoffset: 0; } }
@media (min-width: 56.25em) { .tagesplan__innen { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .plan { justify-self: end; } }
@media (prefers-reduced-motion: reduce) { .js .plan .plan__zeile { opacity: 1; transform: none; } .plan__haken path { stroke-dashoffset: 0; animation: none; } }

/* ---------- Fuenf Wochen: die Zahl, die haengen bleibt ---------- */
.fuenf { padding-top: 0; }
.fuenf__innen { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.fuenf__zahl { position: relative; display: flex; align-items: baseline; gap: .25em; line-height: 1; }
.fuenf__ziffer { font: 600 clamp(8rem, 4rem + 18vw, 18rem)/.85 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: .04em var(--kuerbis-dekor); }
.fuenf__einheit { font: 600 clamp(1.5rem, 1rem + 2.2vw, 3rem)/1 var(--font-display); color: var(--tinte); transform: translateY(-.35em); }
.fuenf__text .lead { margin-top: var(--s5); }
.js .fuenf.is-in .fuenf__ziffer { animation: smv1-fuellen-orange 900ms var(--ease) 200ms forwards; }
@keyframes smv1-fuellen-orange { to { color: var(--kuerbis); } }
@media (min-width: 56.25em) { .fuenf__innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
/* ---------- Verantwortung: sechs Kapitel als Liste, Partner als Namen ---------- */
.kapitel__liste { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 2px dotted var(--linie-stark); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.kapitel__item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s5); align-items: start; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 2px dotted var(--linie-stark); }
.kapitel__bild { position: relative; width: 6rem; }
.kapitel__nr { position: absolute; left: -.25rem; top: -.35rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--erbse); font: 600 1rem/1 var(--font-display); border: 2px solid var(--erbse-hell); }
.kapitel__titel { margin-bottom: var(--s2); }
.kapitel__text p { color: var(--tinte-2); max-width: 60ch; }
.kapitel__fakt { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s3); padding: .4rem .85rem .4rem .7rem; background: var(--butter); border-radius: var(--r-schale); font-size: var(--fs-small); font-weight: 600; color: var(--tinte) !important; }
.kapitel__fakt::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--erbse-dekor); }
@media (min-width: 56.25em) { .kapitel__item { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s6); } .kapitel__bild { width: 9rem; } .kapitel__item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 9rem; } .kapitel__item:nth-child(even) .kapitel__bild { order: 2; } }
.partner { padding-top: 0; }
.partner__innen { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
.partner__text .lead { margin-top: var(--s5); }
.partner__liste { border-top: 2px dotted var(--linie-stark); }
.partner__zeile { display: grid; gap: .25rem var(--s5); padding: var(--s4) 0; border-bottom: 2px dotted var(--linie-stark); }
.partner__zeile dt { font: 600 1.0625rem/1.3 var(--font-display); }
.partner__zeile dd { color: var(--tinte-2); font-size: var(--fs-small); }
@media (min-width: 48em) { .partner__zeile { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 56.25em) { .partner__innen { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (prefers-reduced-motion: reduce) { .js .fuenf.is-in .fuenf__ziffer { color: var(--kuerbis); animation: none; } }

/* ---------- Seitenuebergaenge (Cross-Document View Transitions, progressiv) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- 404: die leere Schale ---------- */
.sektion--404 .schale-leer { width: 7rem; margin-bottom: var(--s5); }
.sektion--404 .schale-leer svg { width: 100%; height: auto; }

/* ---------- Druck ---------- */
@media print {
	.kopf, .fuss__nav, .kopf__toggle, .kopf__panel, .skip, .hero__hinweis, .sektion--cta, body::after, body::before { display: none !important; }
	.js .hero, .tisch--fahrt { height: auto !important; }
	.js .hero__buehne, .tisch--fahrt .tisch__buehne { position: static !important; height: auto !important; }
	.hero__text, .hero__bild, .zutat, .zutat__mitte, .tisch__reihe, .bildstrecke__item, .tischplatte__item { transform: none !important; opacity: 1 !important; }
	.js .reveal { opacity: 1 !important; transform: none !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ---------- Dreissig: der Anfang (Ueber uns) ---------- */
.fuenf--dreissig { padding-top: 0; }
.fuenf--dreissig .fuenf__ziffer { -webkit-text-stroke-color: var(--erbse-dekor); }
.js .fuenf--dreissig.is-in .fuenf__ziffer { animation-name: smv1-fuellen-gruen; }
@keyframes smv1-fuellen-gruen { to { color: var(--erbse); } }

/* ---------- Fachpartner: ruhige Logo-Reihe, Logos unveraendert ---------- */
.partnerlogos { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.partnerlogos--kompakt .partnerlogos__titel { margin-bottom: var(--s4); }
.partnerlogos__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); align-items: center; }
.partnerlogos__item { display: grid; gap: .5rem; justify-items: center; text-align: center; }
.partnerlogos__bild { display: grid; place-items: center; width: 100%; height: 4.25rem; padding: .6rem .9rem; background: #fff; border-radius: 1.25rem 1.25rem 1.25rem .5rem; box-shadow: inset 0 0 0 1px var(--linie); }
.partnerlogos__bild img { max-height: 2.75rem; width: auto; max-width: 9.5rem; object-fit: contain; transition: transform 400ms var(--spring); }
.partnerlogos__item:hover .partnerlogos__bild img { transform: scale(1.05); }
.partnerlogos__name { font: 600 .875rem/1.3 var(--font-text); color: var(--tinte); }
.partnerlogos__rolle { font-size: .8125rem; color: var(--tinte-2); }
.partnerlogos--kompakt .partnerlogos__name, .partnerlogos--kompakt .partnerlogos__rolle { display: none; }
@media (min-width: 40em) { .partnerlogos__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .partnerlogos__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } .partnerlogos__bild { height: 5rem; } .partnerlogos__bild img { max-height: 3.25rem; max-width: 11rem; } }