/*
 * Abfallmakler.eu GmbH – eigenständiger Auftritt (v0.4.8, nur auf /abfallmakler/ geladen)
 * Idee: Klarglas über weichem Licht. Ruhige Verläufe in Logo-Grün #45aa69 und Logo-Grau #777878,
 * wenige echte Glasflächen (backdrop-filter nur Header, „Auf einen Blick“ und Forschung),
 * alles andere als satte, leicht transparente Flächen ohne Weichzeichner.
 * Schriften (selbst gehostet, SIL Open Font License 1.1, Lizenztexte in assets/fonts/):
 *   Manrope (variabel 200–800) – Text & Überschriften · Instrument Serif Italic – Akzente in Überschriften
 */
@font-face { font-family: "Manrope"; src: url(../fonts/manrope-var-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Metrik-Fallback gegen Layout-Sprung beim Schriftwechsel */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 103%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%; }

:root {
	color-scheme: light;
	--am-green: #45aa69;          /* Logo-Grün – Flächen, Deko, große Elemente */
	--am-grey: #777878;           /* Logo-Grau – Flächen, Deko */
	--am-bg: #eef3f0;
	--am-ink: #0f1c15;
	--am-ink-2: #3c4a42;          /* Fließtext gedämpft */
	--am-accent: #165c35;         /* Links/Akzenttext (AA auf allen hellen Flächen) */
	--am-accent-bg: #1f7a45;      /* Primärbutton, weißer Text */
	--am-on-accent: #ffffff;
	--am-line: rgba(15, 28, 21, .12);
	--am-glass: rgba(255, 255, 255, .56);
	--am-glass-strong: rgba(255, 255, 255, .7);
	--am-glass-edge: rgba(255, 255, 255, .85);
	--am-panel: rgba(255, 255, 255, .66);
	--am-panel-edge: rgba(255, 255, 255, .9);
	--am-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -24px rgba(22, 52, 34, .28), 0 2px 6px -2px rgba(22, 52, 34, .08);
	--am-logo-grey: #777878;
	--am-light-1: rgba(69, 170, 105, .30);
	--am-light-2: rgba(119, 120, 120, .24);
	--am-light-3: rgba(146, 199, 150, .30);
	--am-fehlt-bg: #fff4d6;
	--am-fehlt-ink: #6b4a00;
	--am-fehlt-edge: #e6c76a;
	--am-r: 22px;
	--am-r-s: 14px;
	--am-wrap: 1200px;
	--am-pad: clamp(1rem, 4vw, 2rem);
	--am-head-h: 76px;
	--am-blur: blur(18px) saturate(1.5);
	--am-ease: cubic-bezier(.2, .7, .2, 1);
	--am-font: "Manrope", "Manrope Fallback", system-ui, sans-serif;
	--am-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}
:root[data-mode="dunkel"] {
	color-scheme: dark;
	--am-bg: #0c1310;
	--am-ink: #e9f0ec;
	--am-ink-2: #b3c1b9;
	--am-accent: #7bd6a0;
	--am-accent-bg: #7bd6a0;
	--am-on-accent: #0b1a12;
	--am-line: rgba(233, 240, 236, .12);
	--am-glass: rgba(18, 28, 23, .55);
	--am-glass-strong: rgba(16, 25, 20, .7);
	--am-glass-edge: rgba(255, 255, 255, .12);
	--am-panel: rgba(20, 31, 25, .72);
	--am-panel-edge: rgba(255, 255, 255, .09);
	--am-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 50px -28px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .4);
	--am-logo-grey: #e3e6e4;      /* Negativ-Variante: nur das Grau der Wortmarke wird hell */
	--am-light-1: rgba(69, 170, 105, .24);
	--am-light-2: rgba(150, 152, 152, .13);
	--am-light-3: rgba(63, 166, 102, .14);
	--am-fehlt-bg: #3a2f12;
	--am-fehlt-ink: #f5d98a;
	--am-fehlt-edge: #8a6d1f;
}
/* Ohne JS: Systemeinstellung */
@media (prefers-color-scheme: dark) {
	:root:not([data-mode]) {
		color-scheme: dark; --am-bg: #0c1310; --am-ink: #e9f0ec; --am-ink-2: #b3c1b9; --am-accent: #7bd6a0; --am-accent-bg: #7bd6a0; --am-on-accent: #0b1a12;
		--am-line: rgba(233, 240, 236, .12); --am-glass: rgba(18, 28, 23, .55); --am-glass-strong: rgba(16, 25, 20, .7); --am-glass-edge: rgba(255, 255, 255, .12);
		--am-panel: rgba(20, 31, 25, .72); --am-panel-edge: rgba(255, 255, 255, .09); --am-logo-grey: #e3e6e4;
		--am-light-1: rgba(69, 170, 105, .24); --am-light-2: rgba(150, 152, 152, .13); --am-light-3: rgba(63, 166, 102, .14);
		--am-fehlt-bg: #3a2f12; --am-fehlt-ink: #f5d98a; --am-fehlt-edge: #8a6d1f;
	}
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: calc(var(--am-head-h) + 28px); background: var(--am-bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.am { margin: 0; min-height: 100vh; font-family: var(--am-font); font-size: 1.0625rem; line-height: 1.6; color: var(--am-ink); background: transparent; font-feature-settings: "kern", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Licht-Hintergrund: eine Ebene über die ganze Seite, nur Verläufe – kein Bild, kein Filter.
   Oben zwei Lichter, darunter ein ruhiger 1800-px-Rhythmus aus Grün und Grau, der beim Scrollen wandert. */
body.am { position: relative; isolation: isolate; }
body.am::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(900px 680px at 6% -80px, var(--am-light-1), transparent 70%) 0 0 / 100% 100% no-repeat,
		radial-gradient(760px 560px at 98% 240px, var(--am-light-2), transparent 70%) 0 0 / 100% 100% no-repeat,
		radial-gradient(720px 520px at 88% 52%, var(--am-light-3), transparent 70%) 0 600px / 100% 1800px repeat-y,
		radial-gradient(640px 460px at 6% 84%, var(--am-light-2), transparent 70%) 0 600px / 100% 1800px repeat-y,
		radial-gradient(520px 400px at 40% 22%, color-mix(in srgb, var(--am-light-1) 60%, transparent), transparent 70%) 0 600px / 100% 1800px repeat-y;
}
img, svg { max-width: 100%; }
a { color: var(--am-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--am-accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
address { font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
.am-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.am-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--am-accent-bg); color: var(--am-on-accent); border-radius: 10px; font-weight: 700; }
.am-skip:focus { top: 1rem; }
.am-wrap { width: min(100% - 2 * var(--am-pad), var(--am-wrap)); margin-inline: auto; }
.am-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------- Glas & Flächen ---------- */
.am-glass, .am-panel { border-radius: var(--am-r); border: 1px solid var(--am-glass-edge); box-shadow: var(--am-shadow); }
.am-glass { background: var(--am-glass); -webkit-backdrop-filter: var(--am-blur); backdrop-filter: var(--am-blur); }
.am-glass--strong { background: var(--am-glass-strong); }
.am-panel { background: var(--am-panel); border-color: var(--am-panel-edge); }
/* Lichtkante oben: edel statt milchig */
.am-glass, .am-panel { position: relative; isolation: isolate; }
.am-glass::after, .am-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
	background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%); opacity: .55; }
:root[data-mode="dunkel"] :is(.am-glass, .am-panel)::after { background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%); opacity: 1; }
/* Fallback: kein backdrop-filter oder reduzierte Transparenz gewünscht → nahezu deckend */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.am-glass { background: color-mix(in srgb, var(--am-bg) 12%, var(--am-glass-strong)); }
	:root { --am-glass: rgba(255, 255, 255, .92); --am-glass-strong: rgba(255, 255, 255, .95); }
	:root[data-mode="dunkel"] { --am-glass: rgba(18, 28, 23, .94); --am-glass-strong: rgba(16, 25, 20, .96); }
}
@media (prefers-reduced-transparency: reduce) {
	:root { --am-glass: #fbfdfc; --am-glass-strong: #fbfdfc; --am-panel: #f8fbf9; }
	:root[data-mode="dunkel"] { --am-glass: #131d18; --am-glass-strong: #131d18; --am-panel: #141f19; }
	.am-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
	body.am::before { opacity: .5; }
}

/* ---------- Buttons ---------- */
.am-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: .65rem 1.25rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--am-ease), background-color .2s, box-shadow .2s; }
.am-btn--primary { background: var(--am-accent-bg); color: var(--am-on-accent); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--am-green) 80%, transparent); }
.am-btn--primary:hover { background: color-mix(in srgb, var(--am-accent-bg) 88%, #000); }
:root[data-mode="dunkel"] .am-btn--primary:hover { background: color-mix(in srgb, var(--am-accent-bg) 85%, #fff); }
.am-btn--ghost { background: var(--am-panel); color: var(--am-ink); border-color: var(--am-line); }
.am-btn--ghost:hover { border-color: var(--am-accent); }
@media (prefers-reduced-motion: no-preference) { .am-btn:hover { transform: translateY(-1px); } }
/* E-Mail (Theme-Verschleierung, Button baut mailto per JS) */
.hdb-mail { font-weight: 600; overflow-wrap: anywhere; }
.hdb-mail__btn { display: inline-flex; align-items: center; min-height: 36px; margin-top: .35rem; padding: .35rem .9rem; border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--am-accent); background: transparent; border: 1px solid color-mix(in srgb, var(--am-accent) 55%, transparent); cursor: pointer; }
.hdb-mail__btn:hover { background: color-mix(in srgb, var(--am-accent) 10%, transparent); }
html:not(.js) .hdb-mail__btn { display: none; }

/* ---------- Header ---------- */
.am-header { position: sticky; top: 0; z-index: 50; padding: 10px var(--am-pad) 0; }
.am-header__bar { width: min(100%, calc(var(--am-wrap) + 24px)); margin-inline: auto; min-height: var(--am-head-h); display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); padding: 4px 12px 4px 6px; border-radius: 999px; }
/* v0.4.8b: Logo präsenter. Die Wortmarke belegt nur ~30 % der Logohöhe (Dreieck ragt oben/unten heraus),
   daher 60 px Gesamthöhe am Desktop ≈ 31 px für „Abfallmakler.eu / GmbH“.
   Plakette: im Hell-Modus unsichtbar, im Dunkel-Modus helle Glasfläche → Logo in Originalfarben auf hellem Grund. */
.am-header__brand { display: inline-flex; align-items: center; flex: none; padding: 2px 14px 2px 10px; border-radius: 999px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.am-logo { display: block; width: auto; height: 60px; }
:root[data-mode="dunkel"] .am-header__brand { --am-logo-grey: #777878; background: rgba(238, 244, 240, .94); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px -10px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .am-header__brand { --am-logo-grey: #777878; background: rgba(238, 244, 240, .94); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px -10px rgba(0, 0, 0, .6); } }
@media (min-width: 960px) and (max-width: 1199.98px) { .am-logo { height: 54px; } .am-nav a { padding-inline: .6rem; } }
.am-nav a, .am-mode, .am-header__cta { white-space: nowrap; }
.am-nav ul { flex-wrap: nowrap; }
.am-nav { margin-left: auto; }
.am-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.am-nav a { display: block; padding: .5rem .8rem; border-radius: 999px; color: var(--am-ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
.am-nav a:hover { background: color-mix(in srgb, var(--am-green) 12%, transparent); }
.am-nav a[aria-current="true"] { color: var(--am-accent); background: color-mix(in srgb, var(--am-green) 14%, transparent); }
.am-header__tools { display: flex; align-items: center; gap: .5rem; }
.am-mode { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .85rem .4rem .7rem; border-radius: 999px; border: 1px solid var(--am-line); background: transparent; color: var(--am-ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.am-mode:hover { border-color: var(--am-accent); }
.am-mode__ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.am-mode__moon, :root[data-mode="dunkel"] .am-mode__sun, :root[data-mode="dunkel"] .am-mode__rays, :root[data-mode="dunkel"] .am-mode__hell, .am-mode__dunkel { display: none; }
:root[data-mode="dunkel"] .am-mode__moon, :root[data-mode="dunkel"] .am-mode__dunkel { display: inline; }
.am-header__cta { min-height: 44px; padding-inline: 1.1rem; }
.am-menu { display: none; }

@media (max-width: 959.98px) {
	:root { --am-head-h: 64px; }
	.am-header__bar { padding-left: 6px; gap: .5rem; }
	.am-header__brand { padding: 3px 10px 3px 6px; }
	.am-logo { height: 48px; }
	.am-menu { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--am-line); background: transparent; color: var(--am-ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
	.am-menu__bars, .am-menu__bars::before, .am-menu__bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
	.am-menu__bars { position: relative; }
	.am-menu__bars::before, .am-menu__bars::after { content: ""; position: absolute; left: 0; }
	.am-menu__bars::before { top: -5px; } .am-menu__bars::after { top: 5px; }
	.am-menu[aria-expanded="true"] .am-menu__bars { background: transparent; }
	.am-menu[aria-expanded="true"] .am-menu__bars::before { top: 0; transform: rotate(45deg); }
	.am-menu[aria-expanded="true"] .am-menu__bars::after { top: 0; transform: rotate(-45deg); }
	.am-header__tools { margin-left: auto; }
	.am-header__cta { display: none; }
	/* Ohne JS bleibt die Navigation sichtbar (unter der Leiste) */
	/* Panel sitzt in der Glasleiste (Backdrop-Root) – eigener Weichzeichner würde nur die Leiste sehen, daher deckend */
	.am-nav { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: .5rem; border-radius: var(--am-r); background: color-mix(in srgb, var(--am-bg) 70%, var(--am-glass-strong)); border: 1px solid var(--am-glass-edge); box-shadow: var(--am-shadow); }
	.js .am-nav { display: none; }
	.js .am-header.is-open .am-nav { display: block; }
	.am-nav ul { flex-direction: column; }
	.am-nav a { padding: .8rem 1rem; font-size: 1.05rem; border-radius: 14px; }
	.am-header { position: sticky; }
	.am-header__bar { position: relative; }
}
@media (max-width: 959.98px) and (prefers-reduced-transparency: reduce) { .am-nav { background: var(--am-bg); } }
@media (max-width: 419.98px) {
	.am-mode__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.am-mode { padding: .4rem; width: 44px; justify-content: center; }
	.am-menu { padding-inline: .75rem; }
	.am-logo { height: 44px; }
	.am-header__brand { padding-inline: 4px 8px; }
}
@media (max-width: 339.98px) { .am-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .am-menu { width: 44px; justify-content: center; padding: 0; } .am-logo { height: 40px; } }

/* ---------- Typo ---------- */
.am-h1 { font-size: clamp(2.35rem, 1.4rem + 4.4vw, 4.6rem); font-weight: 780; letter-spacing: -.035em; line-height: 1.02; }
.am-h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 760; letter-spacing: -.028em; }
:is(.am-h1, .am-h2) em { font-family: var(--am-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--am-accent); }
.am-h1 em { display: inline; font-size: 1.08em; }
.am-h2 em { font-size: 1.08em; }
.am-lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--am-ink-2); max-width: 40rem; }
.am-kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--am-accent); }
.am-dry { color: var(--am-ink-2); font-style: italic; }
.am-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; }
.am-textlink { font-weight: 700; display: inline-block; margin-top: .4rem; }

/* ---------- Hero ---------- */
.am-hero { padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(2.5rem, 6vw, 5rem); overflow-x: clip; }
.am-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .am-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.am-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; padding: .4rem .9rem .4rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--am-ink); background: var(--am-panel); border: 1px solid var(--am-panel-edge); }
.am-eyebrow__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--am-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--am-green) 22%, transparent); }
.am-h1 { margin-bottom: 1.4rem; }
.am-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 0; }
.am-hero__card { position: relative; }
/* Abstrakte Lichtkörper (Logo-Grün, Logo-Grau) hinter der Glaskarte – erst dadurch wird das Glas sichtbar */
.am-hero__card::before, .am-hero__card::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.am-hero__card::before { width: min(62%, 280px); aspect-ratio: 1; top: -9%; right: -5%; background: radial-gradient(circle at 36% 32%, #c7ead2, #45aa69 46%, #2c8550 62%, rgba(44, 133, 80, 0) 71%); opacity: .75; }
.am-hero__card::after { width: min(48%, 210px); aspect-ratio: 1; bottom: -10%; left: -6%; background: radial-gradient(circle at 58% 40%, #eceeed, #a3a5a4 40%, #777878 58%, rgba(119, 120, 120, 0) 71%); opacity: .36; }
:root[data-mode="dunkel"] .am-hero__card::before { opacity: .55; }
:root[data-mode="dunkel"] .am-hero__card::after { opacity: .35; }
.am-glance { z-index: 1; padding: clamp(1.25rem, 3vw, 2rem); }
.am-glance__h { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--am-accent); margin-bottom: 1rem; }
.am-glance__list { margin: 0; }
.am-glance__list div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--am-line); }
.am-glance__list div:first-child { border-top: 0; padding-top: 0; }
.am-glance__list dt { font-weight: 700; color: var(--am-ink-2); font-size: .92rem; }
.am-glance__list dd { margin: 0; font-weight: 700; }
.am-glance__foot { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--am-line); font-size: .9rem; color: var(--am-ink-2); }
@media (max-width: 379.98px) { .am-glance__list div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* ---------- Abschnitte ---------- */
.am-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

/* Leistungen */
.am-tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 760px) { .am-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.am-tile { --k-ink: #2a7448; --k-edge: #45aa69; --k-bg: #f4f9f6; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--am-r); background: var(--am-panel); border: 1px solid var(--am-panel-edge); box-shadow: var(--am-shadow); transition: transform .3s var(--am-ease), box-shadow .3s; }
.am-tile--grey { --k-ink: #535b57; --k-edge: #777878; --k-bg: #f5f6f6; }
:root[data-mode="dunkel"] .am-tile { --k-ink: #8fdcae; --k-edge: #45aa69; --k-bg: #15211b; }
:root[data-mode="dunkel"] .am-tile--grey { --k-ink: #c9cfcc; --k-edge: #8d9290; --k-bg: #18201c; }
.am-tile__body { padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 1.9rem) 0; }
.am-tile__kick { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem; padding: .3rem .75rem .3rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 800; color: var(--am-ink); background: color-mix(in srgb, var(--k-edge) 16%, transparent); }
.am-tile__kick .am-ico { color: var(--k-ink); width: 1.3em; height: 1.3em; }
.am-tile__title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); font-weight: 760; margin-bottom: .7rem; }
.am-tile__body > p:not(.am-tile__kick) { color: var(--am-ink); }
.am-tile .am-dry { color: var(--am-ink-2); }
.am-tile__link a { font-weight: 700; }
.am-tile__art { margin-top: auto; padding: 0 0 0 30%; }
.am-tile__art .hdb-tileart { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .am-tile:hover { transform: translateY(-3px); } }

/* Line-Art (Motive aus inc/tile-art.php, neu eingefärbt) */
.hdb-tileart { overflow: visible; }
.hdb-tileart path { fill: none; stroke: var(--k-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hdb-tileart .ta-fine { stroke-width: 1.15; opacity: .7; }
.hdb-tileart .ta-dot { stroke-width: 3.4; }
.hdb-tileart .ta-fill { fill: color-mix(in srgb, var(--k-edge) 16%, var(--k-bg)); }
.hdb-tileart .ta-fill2 { fill: color-mix(in srgb, var(--k-edge) 32%, var(--k-bg)); }
.hdb-tileart :is(.ta-wheel, .ta-glass) { fill: var(--k-bg); }
.hdb-tileart .ta-nostroke { stroke: none; }
.hdb-tileart .ta-halo { fill: color-mix(in srgb, var(--k-edge) 16%, transparent); stroke: none; }
.hdb-tileart .ta-dash { stroke-dasharray: 2 9; }
.hdb-tileart g { transform-box: view-box; }
:root[data-mode="dunkel"] .hdb-tileart .ta-fill { fill: color-mix(in srgb, var(--k-edge) 24%, var(--k-bg)); }
:root[data-mode="dunkel"] .hdb-tileart .ta-fill2 { fill: color-mix(in srgb, var(--k-edge) 42%, var(--k-bg)); }
@media (prefers-reduced-motion: no-preference) {
	.hdb-tileart g { transition: transform .6s var(--am-ease); }
	.am-tile:hover .ta-move { transform: translateY(-3px); }
	.am-research:hover .ta-lens { transform: translate(6px, -4px); }
}

/* Gabel HDB ↔ Makler */
.am-fork { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.4rem, 4vw, 3rem); }
@media (min-width: 960px) { .am-fork { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.am-fork__text p:last-child { margin-bottom: 0; color: var(--am-ink-2); }
.am-fork__text .am-h2 { margin-bottom: 1rem; }
.am-fork__ways { display: grid; gap: .9rem; counter-reset: way; }
.am-way { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--am-r-s); border: 1px solid var(--am-line); background: color-mix(in srgb, var(--am-bg) 40%, transparent); }
.am-way > :not(.am-way__n) { grid-column: 2; }
.am-way__n { grid-row: 1 / span 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 800; color: #fff; background: var(--am-grey); }
.am-way--am .am-way__n { background: var(--am-green); color: #0b1a12; }
.am-way h3 { font-size: 1.1rem; font-weight: 760; margin-bottom: .25rem; }
.am-way p { margin: 0 0 .4rem; color: var(--am-ink-2); }
.am-way__link { font-weight: 700; }
:root[data-mode="dunkel"] .am-way__n { background: #5f6362; }

/* Labor */
.am-labor { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 960px) { .am-labor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.am-labor__text .am-h2 { margin-bottom: 1rem; }
.am-facts { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); }
.am-facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .25rem 1rem; padding: .9rem 0; border-top: 1px solid var(--am-line); }
.am-facts div:first-child { border-top: 0; padding-top: 0; }
.am-facts div:last-child { padding-bottom: 0; }
.am-facts dt { font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--am-ink-2); padding-top: .2rem; }
.am-facts dd { margin: 0; }
@media (max-width: 479.98px) { .am-facts div { grid-template-columns: minmax(0, 1fr); } }

/* Forschung */
.am-research { --k-ink: #2a7448; --k-edge: #45aa69; --k-bg: #f2f8f4; display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding: clamp(1.4rem, 4vw, 3rem); overflow: hidden; }
:root[data-mode="dunkel"] .am-research { --k-ink: #8fdcae; --k-bg: #14201a; }
@media (min-width: 960px) { .am-research { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } .am-slots { grid-column: 1 / -1; } }
.am-research__intro .am-h2 { margin-bottom: 1rem; }
.am-research__intro p:last-child { margin-bottom: 0; color: var(--am-ink-2); }
.am-research__art .hdb-tileart { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.am-slots { display: grid; gap: .9rem; }
@media (min-width: 640px) { .am-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.am-slot { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem; border-radius: var(--am-r-s); border: 1.5px dashed color-mix(in srgb, var(--am-ink) 28%, transparent); }
.am-slot__n { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--am-ink-2); }

/* Team */
.am-team { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }
.am-person { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .2rem; align-content: start; padding: 1.25rem 1.25rem 1.35rem; border-radius: var(--am-r); background: var(--am-panel); border: 1px solid var(--am-panel-edge); box-shadow: var(--am-shadow); }
.am-person__ini { margin-bottom: .8rem; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-weight: 800; font-size: 1rem; letter-spacing: .02em; color: var(--am-ink);
	background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--am-green) 30%, transparent), color-mix(in srgb, var(--am-grey) 18%, transparent)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--am-green) 55%, transparent); }
.am-person__name { font-weight: 760; line-height: 1.25; }
.am-person__role { font-size: .92rem; color: var(--am-ink-2); line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 479.98px) { .am-person { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; } .am-person__ini { grid-row: 1 / span 2; margin: 0; } }

/* Kontakt */
.am-contact { display: grid; gap: 1rem; }
@media (min-width: 760px) { .am-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .am-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); } }
.am-card { padding: clamp(1.25rem, 3vw, 1.75rem); }
.am-card h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 760; margin-bottom: .9rem; }
.am-card h3 .am-ico { color: var(--am-accent); width: 1.35em; height: 1.35em; }
.am-card__meta { margin: .6rem 0 0; color: var(--am-ink-2); }
.am-dl { margin: 0; }
.am-dl div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; }
.am-dl dt { color: var(--am-ink-2); font-weight: 600; }
.am-dl dd { margin: 0; }
.am-dl a { font-weight: 700; white-space: nowrap; }
@media (min-width: 760px) and (max-width: 1099.98px) { .am-card--reach { grid-column: 1 / -1; grid-row: 1; } }

/* [FEHLT]/[PRÜFEN] – sichtbar, aber ruhig */
.am-fehlt { display: inline; padding: .1em .45em; border-radius: 6px; font-size: .86em; font-weight: 700; line-height: 1.5; color: var(--am-fehlt-ink); background: var(--am-fehlt-bg); box-shadow: inset 0 0 0 1px var(--am-fehlt-edge); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.am-fehlt--short { white-space: nowrap; font-size: .78em; }

/* ---------- Footer ---------- */
.am-footer { margin-top: clamp(1rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; border-top: 1px solid var(--am-line); background: color-mix(in srgb, var(--am-panel) 70%, transparent); font-size: .95rem; }
.am-footer__grid { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 640px) { .am-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .am-footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } }
.am-footer .am-logo { height: 48px; margin-bottom: .9rem; }
.am-footer__h { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--am-ink-2); margin-bottom: .5rem; }
.am-footer__group { color: var(--am-ink-2); margin: 0; }
.am-footer__group a { font-weight: 700; }
.am-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--am-line); color: var(--am-ink-2); font-size: .88rem; }
.am-footer__legal p { margin: 0; }
.am-footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Dezenter Auftritt beim Laden (nur ohne Bewegungsreduktion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* H1/Lead bleiben sofort sichtbar (LCP), nur die Glaskarte gleitet herein */
	.am-glance { animation: am-rise .7s var(--am-ease) .1s both; }
}
@keyframes am-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media print { body.am::before, .am-header, .hdb-mail__btn { display: none; } .am-glass, .am-panel { box-shadow: none; background: #fff; } }
html:not(.js) .am-mode { display: none; }

/* Forschung: zwei ruhige Lichtkörper hinter der Glasfläche (gleiches Prinzip wie im Hero) */
#forschung { overflow-x: clip; }
#forschung .am-wrap { position: relative; }
#forschung .am-wrap::before, #forschung .am-wrap::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; aspect-ratio: 1; }
#forschung .am-wrap::before { width: min(40%, 320px); top: -40px; left: -50px; background: radial-gradient(circle at 40% 36%, #c7ead2, #45aa69 46%, rgba(69, 170, 105, 0) 71%); opacity: .55; }
#forschung .am-wrap::after { width: min(34%, 260px); bottom: -50px; right: -40px; background: radial-gradient(circle at 50% 40%, #eceeed, #8d8f8e 48%, rgba(119, 120, 120, 0) 71%); opacity: .45; }
:root[data-mode="dunkel"] #forschung .am-wrap::before { opacity: .4; }
:root[data-mode="dunkel"] #forschung .am-wrap::after { opacity: .25; }

/* v0.4.10 flachere Buttons – gleiche Höhen wie HDB-Seiten (42/36 px Desktop, 44/40 px Mobil); Breiten/Schrift unverändert */
:root { --am-btn-h: 42px; --am-btn-py: .45rem; --am-btn-h-sm: 36px; --am-btn-py-sm: .3rem; }
@media (max-width: 600px) { :root { --am-btn-h: 44px; --am-btn-h-sm: 40px; } }
.am-btn { min-height: var(--am-btn-h); padding-block: var(--am-btn-py); }
.am-btn.am-header__cta, .am-mode, .am .hdb-mail__btn { min-height: var(--am-btn-h-sm); padding-block: var(--am-btn-py-sm); }
@media (max-width: 959.98px) { .am-menu { min-height: var(--am-btn-h-sm); padding-block: var(--am-btn-py-sm); } }

/* v0.4.14: Kachel-Gliederung (EBV, Abfallbeauftragte), breite Kachel, Hinweiszeile, Laborfoto halbbreit */
.am-points { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.am-points li { position: relative; padding: .7rem .9rem .75rem 1rem; border-radius: var(--am-r-s); border-left: 3px solid var(--k-edge); background: color-mix(in srgb, var(--k-edge) 7%, transparent); }
.am-points__h { display: block; font-weight: 760; color: var(--am-ink); margin-bottom: .15rem; }
.am-points li span { display: block; color: var(--am-ink); line-height: 1.55; }
.am-tile__note { font-size: .85rem; color: var(--am-ink-2); margin-top: -.25rem; }
@media (min-width: 760px) { .am-tile--wide { grid-column: 1 / -1; } }
@media (min-width: 960px) {
	.am-tile--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
	.am-tile--wide .am-tile__body { padding-bottom: clamp(1.25rem, 3vw, 1.9rem); }
	.am-tile--wide .am-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.am-tile--wide .am-tile__art { padding: 0; align-self: end; }
}
.am-labor__photo { margin: 1.4rem 0 0; }
.am-labor__photo picture, .am-labor__photo img { display: block; }
.am-labor__photo img { width: 100%; max-width: 697px; height: auto; aspect-ratio: 697 / 463; object-fit: cover; border-radius: var(--am-r); border: 1px solid var(--am-panel-edge, var(--am-line)); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
:root[data-mode="dunkel"] .am-labor__photo img { filter: brightness(.9); }

/* v0.4.14: Forschungsprojekte (ersetzen die Platzhalter-Slots). Logos immer auf heller Fläche – im Dunkel-Modus bleiben Grün und Grau lesbar. */
.am-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.9rem, 2vw, 1.25rem); }
@media (min-width: 760px) { .am-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .am-projects { grid-column: 1 / -1; } }
.am-proj { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--am-r-s); border: 1px solid var(--am-line); background: color-mix(in srgb, var(--am-bg) 55%, transparent); }
.am-proj__logo { display: flex; align-items: center; justify-content: center; height: 7.5rem; padding: 1rem 1.4rem; background: #fff; border-bottom: 1px solid var(--am-line); }
.am-proj__logo picture { display: contents; }
.am-proj__logo source { display: none; }
/* Logo-Bühne: feste Höhe, Logos eng beschnitten, Breite je Logo nach gleicher Fläche (--logo-w), zentriert, ohne Verzerrung */
.am-proj__logo img { display: block; width: calc(var(--logo-w, 260px) * var(--logo-k, 1)); max-width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; }
.am-proj__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.am-proj__name { font-size: 1.15rem; font-weight: 760; margin-bottom: .2rem; }
.am-proj__meta { font-size: .82rem; font-weight: 700; color: var(--am-ink-2); margin-bottom: .6rem; }
.am-proj__body > p { color: var(--am-ink); }
.am-proj__who { font-size: .9rem; color: var(--am-ink-2) !important; line-height: 1.55; }
.am-proj__who strong { color: var(--am-ink); }
.am-proj__link { margin: auto 0 0; }
:root[data-mode="dunkel"] .am-proj { background: color-mix(in srgb, #0c1310 55%, transparent); }
:root[data-mode="dunkel"] .am-proj__logo { background: #f3f6f4; border-bottom-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .am-proj__logo { background: #f3f6f4; } }

/* v0.4.14: Footer-Rechtslinks + Rechtstexte (page-abfallmakler-recht.php) */
.am-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.am-footer__legal a:hover, .am-footer__legal a[aria-current="page"] { color: var(--am-ink); }
.am-legal-sec { padding-top: clamp(6.5rem, 12vw, 8.5rem); }
.am-legal { max-width: 52rem; margin-inline: auto; padding: clamp(1.4rem, 4vw, 2.75rem); border-radius: var(--am-r); }
.am-legal h1 { margin-bottom: 1.25rem; hyphens: manual; }
.am-legal h2 { font-size: 1.08rem; font-weight: 760; margin: 1.9rem 0 .45rem; }
.am-legal p, .am-legal address { color: var(--am-ink-2); line-height: 1.65; max-width: 68ch; font-style: normal; }
.am-legal p + p { margin-top: .7rem; }
.am-legal strong { color: var(--am-ink); }
.am-legal__lead { font-size: 1.05rem; }
.am-legal__dl { max-width: 26rem; }
.am-legal__more { margin-top: 2.2rem !important; padding-top: 1.1rem; border-top: 1px solid var(--am-line); }
@media (max-width: 479px) { .am-proj__logo { --logo-k: .86; } } /* schmal: alle Logos gleichmäßig verkleinern, gleiche Fläche bleibt */