@font-face { font-family: 'Nunito'; src: url('fonts/Nunito-ExtraBold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local(''), url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: local(''), url('fonts/montserrat-v25-latin-700.woff2') format('woff2'); }

:root {
    --clr-ink: hsl(24, 30%, 13%);
    --clr-ink-soft: hsl(24, 12%, 33%);
    --clr-cream: hsl(38, 46%, 95%);
    --clr-sand: hsl(34, 40%, 88%);
    --clr-sand-deep: hsl(30, 32%, 80%);
    --clr-clay: hsl(16, 62%, 48%);
    --clr-clay-dark: hsl(14, 60%, 38%);
    --clr-clay-soft: hsl(20, 62%, 92%);
    --clr-moss: hsl(146, 24%, 18%);
    --clr-moss-mid: hsl(146, 16%, 27%);
    --clr-sage: hsl(112, 14%, 45%);
    --clr-white: hsl(40, 55%, 99%);
    --ff-display: 'Nunito', 'Trebuchet MS', sans-serif;
    --ff-body: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
    --radius-s: 6px; --radius-m: 18px;
    --radius-l: 34px;
    --shadow-soft: 0 18px 48px -24px hsla(24, 40%, 12%, 0.45);
    --shadow-hard: 8px 8px 0 var(--clr-ink);
    --border-ink: 1.5px solid var(--clr-ink);
    --tr: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 3) RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background-color: var(--clr-cream); color: var(--clr-ink); font-family: var(--ff-body); font-size: clamp(16px, 15.2px + 0.25vw, 17.28px); line-height: 1.72; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: bold; line-height: 1.08; margin: 0 0 0.6em; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--tr), opacity var(--tr); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--clr-clay); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- 4) BASIS-BAUSTEINE ---------- */
.skip-link { position: absolute; top: -120%; left: 16px; z-index: 9999; padding: 12.8px 22.4px; background: var(--clr-ink); color: var(--clr-cream); border-radius: 0 0 var(--radius-s) var(--radius-s); font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); }
.skip-link:focus { top: 0; }
.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; }
.grain { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); }
.eyebrow { display: flex; align-items: center; gap: 11.2px; font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clr-clay); margin-bottom: 17.6px; }
.eyebrow--light { color: var(--clr-sand); }
.eyebrow-line {display: inline-block;width: 22.4px;height: 22.4px;background-color: currentColor; -webkit-mask: url('img/pferd-icon.svg') no-repeat center / contain;mask: url('img/pferd-icon.svg') no-repeat center / contain;opacity: 0.9;flex-shrink: 0;}
.section-title { font-size: clamp(30.4px, 22.4px + 2.1vw, 48px); max-width: 22ch; }
.section-title--light { color: var(--clr-cream); }
.lead { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); line-height: 1.6; color: var(--clr-ink-soft); max-width: 56ch; }
.lead--light { color: hsla(38, 46%, 95%, 0.82); }
.mini-head { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); margin-top: 38.4px; }
.mini-head--center { text-align: center; margin-bottom: 25.6px; }
.accent { font-style: normal; color: var(--clr-clay); position: relative; white-space: nowrap; }
.accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.22em; background: hsla(16, 62%, 48%, 0.22); border-radius: 0.2em; z-index: -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8.8px; padding: 15.2px 30.4px; border-radius: 100px; border: var(--border-ink); font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform var(--tr), background-color var(--tr), color var(--tr), box-shadow var(--tr); }
.btn-primary { background: var(--clr-clay); color: var(--clr-white); box-shadow: 4px 4px 0 var(--clr-ink); }
.btn-primary:hover { background: var(--clr-ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--clr-clay); }
.btn-ghost { background: transparent; color: var(--clr-ink); }
.btn-ghost:hover { background: var(--clr-ink); color: var(--clr-cream); }
.btn-block { width: 100%; }

/* ---------- 5) HEADER & NAVIGATION ---------- */
.site-header { position: sticky; top: 0; z-index: 800; transition: background-color var(--tr), box-shadow var(--tr); }
.site-header.is-scrolled { background: hsla(38, 46%, 95%, 0.94); box-shadow: 0 1px 0 hsla(24, 30%, 13%, 0.12); }
.header-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17.6px 0; }
.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1001; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--clr-clay); color: var(--clr-white); flex-shrink: 0; transition: transform var(--tr); }
.brand-mark img {width: 26px;height: 26px;object-fit: contain;filter: brightness(0) invert(1);}
.brand:hover .brand-mark { transform: rotate(-12deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--ff-display); font-weight: bold; font-size: 20px; letter-spacing: -0.02em; }
.brand-claim { font-size: 10.88px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clr-ink-soft); }
.main-nav { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 30.4px; list-style: none; }
.nav-link { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); font-weight: 700; position: relative; padding: 4.8px 0; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--clr-clay); transition: width var(--tr); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-cta { display: inline-flex; padding: 11.2px 22.4px; border-radius: 100px; background: var(--clr-ink); color: var(--clr-cream); font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); font-weight: 700; }
.nav-cta:hover { background: var(--clr-clay); }
.nav-cta::after { display: none; }
.nav-foot { display: none; }
.menu-toggle {display: none;flex-direction: column;justify-content: center;gap: 6px;width: 46px;height: 46px;padding: 0;background: none; border: none;color: var(--clr-ink);}
.menu-bar {display: block;width: 26px;height: 2px; margin: 0 auto;background: currentColor;border-radius: 2px;transition: transform var(--tr), opacity var(--tr);}
.menu-toggle.open .menu-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open .menu-bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .menu-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 6a) HERO ---------- */
.hero { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); overflow-x: clip;}
.hero::before { content: ""; position: absolute; top: -18%; right: -12%; width: 736px; height: 736px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, hsla(20, 62%, 88%, 0.9), hsla(38, 46%, 95%, 0) 70%); z-index: -2; }
.hero-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: clamp(40px, 6vw, 64px); align-items: center; }
.hero-title { font-size: clamp(40px, 23.6px + 4.2vw, 70px); margin-bottom: 19.2px; }
.hero-lead { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); color: var(--clr-ink-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14.4px; margin: 32px 0 41.6px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 25.6px 38.4px; list-style: none; padding-top: 28.8px; border-top: 1px dashed hsla(24, 30%, 13%, 0.25); }
.hero-fact { display: flex; flex-direction: column; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); }
.hero-fact strong { font-family: var(--ff-display); font-size: 16.8px; }
.hero-fact span { color: var(--clr-ink-soft); font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); }
.hero-media { position: relative; }
.hero-photo--main {position: relative;background: transparent;margin: 0;filter: drop-shadow(0 18px 32px rgba(42, 28, 20, 0.15));}
.hero-photo--main img {display: block;width: 100%;height: auto;object-fit: contain;transform: scale(1.15) rotate(-20deg);transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);}
.hero-photo--main:hover img {transform: scale(1.22) rotate(3deg);}
.hero-photo--main::after {display: none;}

/* ---------- 6c) ÜBER MICH ---------- */
.about { padding: 0 0 clamp(72px, 9vw, 144px); }
.about-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: clamp(40px, 6vw, 80px); align-items: start; }
.about-media { position: relative; }
.about-photo { margin: 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;object-position: top; }
.about-caption { margin-top: 19.2px; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); font-style: italic; }
.about-text p { max-width: 62ch; }
.badges { display: flex; flex-wrap: wrap; gap: 9.6px; list-style: none; margin-top: 16px; }
.badge { padding: 8px 17.6px; border: var(--border-ink); border-radius: 100px; font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); font-weight: 700; background: var(--clr-white); transition: transform var(--tr), background-color var(--tr), color var(--tr); }
.badge:hover { transform: translateY(-3px); background: var(--clr-ink); color: var(--clr-cream); }

/* ---------- 6d) REITPÄDAGOGIK ---------- */
.method { background: var(--clr-moss); color: var(--clr-cream); padding: clamp(72px, 9vw, 144px) 0; position: relative; }
.method-head { width: min(100% - 38.4px, 1312px); margin: 0 auto 56px; position: relative; }
.method-grid { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 19.2px; list-style: none; position: relative; }
.m-card { padding: 32px 28.8px; background: hsla(38, 46%, 95%, 0.05); border: 1px solid hsla(38, 46%, 95%, 0.16); border-radius: var(--radius-m); transition: background-color var(--tr), transform var(--tr), border-color var(--tr); }
.m-card:hover { background: hsla(38, 46%, 95%, 0.1); border-color: var(--clr-clay); transform: translateY(-5px); }
.m-title { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); margin-bottom: 8px; }
.m-text { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: hsla(38, 46%, 95%, 0.78); margin: 0; }
.method-band { width: min(100% - 38.4px, 1312px); margin: 56px auto 0; position: relative; border-radius: var(--radius-l); overflow: hidden; }
.method-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.method-band-caption { position: absolute; left: 50%; bottom: clamp(16px, 4vw, 40px); transform: translateX(-50%); width: max-content; max-width: 90%; padding: 12.8px 25.6px; background: hsla(146, 24%, 12%, 0.72); color: var(--clr-cream); border-radius: 100px; font-family: var(--ff-display); font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); text-align: center; }
.method-head {display: flex;flex-direction: column-reverse;gap: 40px;align-items: flex-start;}
.method-head-text {flex: 1;}
.method-head-image {width: clamp(260px, 25vw, 340px);flex-shrink: 0;}
.method-head-image img {width: 100%;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 50%;border: 4px solid var(--clr-cream);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);}

/* ---------- 6e) SCHWERPUNKTE ---------- */
.focus { padding: clamp(72px, 9vw, 144px) 0; }
.focus-head { width: min(100% - 38.4px, 1312px); margin: 0 auto 48px; }
.focus-layout { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
.focus-list { list-style: none; counter-reset: focus; border-top: 1px solid hsla(24, 30%, 13%, 0.16); }
.f-item { counter-increment: focus; padding: 25.6px 16px 25.6px 54.4px; border-bottom: 1px solid hsla(24, 30%, 13%, 0.16); position: relative; transition: background-color var(--tr), padding-left var(--tr); }
.f-item::before { content: counter(focus, decimal-leading-zero); position: absolute; left: 6.4px; top: 30.4px; font-family: var(--ff-display); font-size: 13.6px; color: var(--clr-clay); letter-spacing: 0.05em; }
.f-item:hover { background: var(--clr-sand); padding-left: 64px; }
.f-title { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); margin-bottom: 4.8px; }
.f-text { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); margin: 0; max-width: 52ch; }
.focus-aside { position: relative; }
.focus-photo { margin: 0 0 19.2px; overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--shadow-soft); }
.focus-photo--a { transform: rotate(-2deg); }
.focus-photo--b { transform: rotate(2deg); margin-left: clamp(0px, 4vw, 40px); }
.focus-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.focus-note { font-family: var(--ff-display); font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); line-height: 1.3; margin-top: 28.8px; padding-left: 19.2px; border-left: 4px solid var(--clr-sage); }

/* ---------- 6f) FÜR WEN ---------- */
.who { background: var(--clr-sand); padding: clamp(72px, 9vw, 144px) 0; position: relative; }
.who-head { width: min(100% - 38.4px, 1312px); margin: 0 auto 48px; text-align: center; }
.who-head .eyebrow { justify-content: center; }
.who-head .section-title { margin-left: auto; margin-right: auto; }
.who-cards { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: 25.6px; }
.w-card { background: var(--clr-white); border: var(--border-ink); border-radius: var(--radius-m); padding: 16px 16px 28.8px; transition: transform var(--tr), box-shadow var(--tr); }
.w-card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-hard); }
.w-photo { margin: 0 0 20.8px; border-radius: 12px; overflow: hidden; }
.w-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.w-title { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); padding: 0 11.2px; }
.w-text { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); padding: 0 11.2px; margin: 0; }
.who-tags-wrap { width: min(100% - 38.4px, 992px); margin: 56px auto 0; text-align: center; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 9.6px; list-style: none; }
.tag { padding: 8.8px 18.4px; background: var(--clr-cream); border: 1px solid hsla(24, 30%, 13%, 0.2); border-radius: 100px; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); transition: background-color var(--tr), border-color var(--tr); }
.tag:hover { background: var(--clr-clay-soft); border-color: var(--clr-clay); }

/* ---------- 6g) FAQ ---------- */
.faq { padding: clamp(72px, 9vw, 144px) 0; }
.faq-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-list { border-top: 2px solid var(--clr-ink); }
.faq-item { border-bottom: 1px solid hsla(24, 30%, 13%, 0.2); padding: 6.4px 0; }
.faq-q { font-family: var(--ff-display); font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); padding: 17.6px 40px 17.6px 0; cursor: pointer; list-style: none; position: relative; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: ""; position: absolute; right: 6.4px; top: 27.2px; width: 12px; height: 12px; border-right: 2px solid var(--clr-clay); border-bottom: 2px solid var(--clr-clay); transform: rotate(45deg); transition: transform var(--tr); }
.faq-item[open] .faq-q::after { transform: rotate(-135deg); }
.faq-a { padding: 0 40px 19.2px 0; }
.faq-a p { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); margin: 0; max-width: 62ch; }

/* ---------- 6h) KONTAKT ---------- */
.contact { background: var(--clr-ink); color: var(--clr-cream); padding: clamp(72px, 9vw, 144px) 0; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; left: -128px; bottom: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, hsla(16, 62%, 48%, 0.28), transparent 70%); }
.contact-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; position: relative; }
.contact-list { list-style: none; margin-top: 32px; display: grid; gap: 16px; }
.c-item { display: flex; align-items: center; gap: 14.4px; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); }
.c-item svg { color: var(--clr-clay); flex-shrink: 0; }
.c-item a:hover { color: var(--clr-clay); }
.contact-card { background: var(--clr-cream); color: var(--clr-ink); border-radius: var(--radius-l); padding: clamp(28.8px, 4vw, 44.8px); box-shadow: var(--shadow-soft); }
.contact-card-head { font-size: clamp(22.4px, 18.4px + 1.1vw, 32px); margin-bottom: 9.6px; }
.contact-card-text { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12.8px; margin: 25.6px 0 28.8px; }
.contact-hours { list-style: none; display: grid; gap: 8px; padding-top: 22.4px; border-top: 1px dashed hsla(24, 30%, 13%, 0.25); }
.hours-row { display: flex; justify-content: space-between; gap: 16px; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); }
.hours-day { font-weight: 700; }
.hours-time { color: var(--clr-ink-soft); }
.contact-hint { font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); color: var(--clr-ink-soft); margin: 19.2px 0 0; }

/* ---------- 8) PARTNER & FOOTER ---------- */
.partner { padding: clamp(48px, 7vw, 80px) 0; text-align: center; }
.partner-inner { width: min(100% - 38.4px, 672px); margin: 0 auto; padding: 38.4px 24px; border: 2px dashed hsla(24, 30%, 13%, 0.28); border-radius: var(--radius-l); }
.partner-title { font-family: var(--ff-body); font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clr-ink-soft); margin-bottom: 14.4px; }
.partner-name { font-family: var(--ff-display); font-size: clamp(22.4px, 18.4px + 1.1vw, 32px); margin-bottom: 4.8px; }
.partner-address { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); margin-bottom: 6.4px; }
.partner-link { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); font-weight: 700; color: var(--clr-clay); text-decoration: underline; text-underline-offset: 4px; }
.partner-link:hover { color: var(--clr-ink); }
.site-footer { background: var(--clr-moss); color: var(--clr-cream); position: relative; padding-bottom: 24px; }
.footer-wave { color: var(--clr-moss); line-height: 0; margin-top: -1px; transform: translateY(-99%); position: absolute; left: 0; right: 0; }
.footer-inner { width: min(100% - 38.4px, 1312px); margin: 0 auto; padding: clamp(40px, 6vw, 64px) 0 40px; display: grid; gap: 38.4px; }
.footer-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--clr-clay); color: var(--clr-clay); margin-bottom: 14.4px; }
.footer-name { font-family: var(--ff-display); font-size: clamp(22.4px, 18.4px + 1.1vw, 32px); margin: 0; }
.footer-claim { font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); letter-spacing: 0.16em; text-transform: uppercase; color: hsla(38, 46%, 95%, 0.7); margin-bottom: 16px; }
.footer-note { font-family: var(--ff-display); color: var(--clr-clay); margin: 0; }
.footer-head { font-family: var(--ff-body); font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: hsla(38, 46%, 95%, 0.6); margin-bottom: 16px; }
.footer-list { list-style: none; display: grid; gap: 8.8px; }
.footer-link { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); border-bottom: 1px solid transparent; }
.footer-link:hover { color: var(--clr-clay); border-bottom-color: currentColor; }
.footer-plain { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: hsla(38, 46%, 95%, 0.78); margin: 0 0 6.4px; }
.footer-partner { font-family: var(--ff-display); font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); margin: 0 0 4.8px; }
.footer-bottom { width: min(100% - 38.4px, 1312px); margin: 0 auto; padding-top: 22.4px; border-top: 1px solid hsla(38, 46%, 95%, 0.18); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.footer-copy { font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); color: hsla(38, 46%, 95%, 0.62); margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 8px; padding: 8.8px 17.6px; background: transparent; color: var(--clr-cream); border: 1px solid hsla(38, 46%, 95%, 0.35); border-radius: 100px; font-size: clamp(12px, 11.52px + 0.15vw, 13.12px); letter-spacing: 0.1em; text-transform: uppercase; transition: background-color var(--tr), color var(--tr); }
.to-top:hover { background: var(--clr-clay); border-color: var(--clr-clay); }

/* ---------- 8b) RECHTSSEITEN ---------- */
.legal { padding: clamp(48px, 7vw, 80px) 0 clamp(72px, 9vw, 144px); }
.legal-inner { width: min(100% - 38.4px, 832px); margin: 0 auto; }
.legal-title { font-size: clamp(30.4px, 22.4px + 2.1vw, 48px); margin-bottom: 24px; }
.legal h2 { font-size: clamp(16.4px, 18.4px + 1.1vw, 22px); margin-top: 41.6px; }
.legal h3 { font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); margin-top: 28.8px; }
.legal p, .legal li { font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); color: var(--clr-ink-soft); }
.legal-list { list-style: disc; padding-left: 20.8px; margin-bottom: 19.2px; display: grid; gap: 6.4px; }
.legal-box { background: var(--clr-sand); border-radius: var(--radius-m); padding: 22.4px 25.6px; margin-bottom: 24px; }
.legal-box p { margin: 0; }
.legal a { color: var(--clr-clay); text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-size: clamp(13.76px, 13.28px + 0.2vw, 15.2px); font-weight: 700; }
.back-link:hover { color: var(--clr-clay); }

/* ---------- 9) ANIMATIONEN ---------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.45; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 10) RESPONSIVE ---------- */

@media (min-width: 468px) {
    .method-head {flex-direction: row;align-items: center;justify-content: space-between;}
}
@media (max-width: 1250px){
    .about-photo img {aspect-ratio: 3 / 5;}
}

@media (max-width: 940px) {
    .menu-toggle { display: flex; position: relative; z-index: 1001; }
    .main-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh;  max-height: 100vh;background: var(--clr-cream); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 88px 24px 64px; overflow: hidden; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity var(--tr), visibility var(--tr), transform var(--tr); z-index: 1000; }
    .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links { display: flex; flex-direction: column; gap: clamp(14.4px, 3.2vh, 25.6px); text-align: center; margin: auto 0; }
    .nav-link { font-family: var(--ff-display); font-size: clamp(22.4px, 18.4px + 1.1vw, 32px); }
    .nav-cta { font-size: clamp(16px, 15.2px + 0.25vw, 17.28px); padding: 13.6px 28.8px; }

    .nav-foot {position: absolute;bottom: 24px;left: 0;right: 0;width: 100%;text-align: center;display: block;font-size: clamp(12px, 11.52px + 0.15vw, 13.12px);letter-spacing: 0.14em;text-transform: uppercase;color: var(--clr-ink-soft);margin: 0;white-space: nowrap;}
    .hero-media {max-width: 620px;margin: 0 auto;}
    .hero-photo--main img {transform: scale(1) rotate(-10deg);}
    .hero-photo--main:hover img {transform: scale(1.05) rotate(0deg);}
    .hero-photo--small { left: -8px; bottom: -19.2px; }
}


@media (max-width: 1100px) {
    .nav-cta{display: none;}
    .footer-wave{display: none;}
}

@media (max-width: 1023px) {
    .footer-inner {grid-template-columns: repeat(2, 1fr) !important;gap: 32px 24px;}
    .about-inner {display: flex;flex-direction: column-reverse;}
    .about-text {width: 100%;}
    .about-text p {max-width: 100%;}
    .about-media {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto 1fr auto;grid-template-areas:"photo head""photo badges""caption caption";gap: 0 24px;align-items: start;width: 100%;}
    .about-photo {grid-area: photo;margin: 0;}
    .about-photo img {aspect-ratio: 4 / 5;max-height: 380px;width: 100%;object-fit: cover;}
    .about-media .mini-head {grid-area: head;margin-top: 0;margin-bottom: 8px;}
    .about-media .badges {grid-area: badges;margin-top: 0;gap: 8px;align-content: start;}
    .about-caption {grid-area: caption;margin-top: -150px;margin-left: 52%;font-size: clamp(25px, 1.1vw, 27px);font-style: italic;line-height: 1.5;}
    .focus-aside {display: flex;gap: 20px;justify-content: center;align-items: stretch;width: 100%;}
    .focus-photo {flex: 1 1 280px;max-width: 450px;margin: 0;}
    .focus-photo--a,
    .focus-photo--b {transform: none;margin-left: 0;}
    .focus-photo img {aspect-ratio: 4 / 3;max-height: 320px;}
}

@media (max-width: 700px) {
    .about-caption{margin-top: 16px;margin-left: 0%;font-size: clamp(15px, 1.1vw, 17px);}
    .method-head {flex-direction: column;}
    .method-head-image {width: 100%;max-width: 450px;flex-shrink: 0;}
    .method-head-image img {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;border-radius: var(--radius-m);border: none;box-shadow: var(--shadow-soft);}
    .method-band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .method-band-caption { position: absolute; left: 50%; bottom: clamp(16px, 4vw, 40px); transform: translateX(-50%); width: max-content; max-width: 90%; padding: 6.8px 10.6px; background: hsla(146, 24%, 12%, 0.72); color: var(--clr-cream); border-radius: 100px; font-family: var(--ff-display); font-size: clamp(17.92px, 16px + 0.55vw, 21.6px); text-align: center; }
}

@media (max-width: 599px) {
    .about-media {grid-template-columns: 1fr;grid-template-areas:"photo""head""badges""caption";gap: 16px 0;}
    .focus-aside {flex-direction: column;display: none;}
}

@media (max-width: 480px) {
    .footer-inner {grid-template-columns: 1fr !important;text-align: center;justify-items: center;}
    .footer-list {justify-items: center;}
    .footer-bottom {flex-direction: column;text-align: center;gap: 12px;}
}

@media (max-width: 420px) {
    .method-band-caption { position: absolute; left: 50%; bottom: clamp(16px, 4vw, 40px); transform: translateX(-50%); width: max-content; max-width: 90%; padding: 6.8px 10.6px; background: hsla(146, 24%, 12%, 0.72); color: var(--clr-cream); border-radius: 100px; font-family: var(--ff-display); font-size: 16px; text-align: center; }
}


@media (min-width: 941px) {
    .hero-inner { grid-template-columns: 1.05fr 0.95fr; }
    .method-grid { grid-template-columns: repeat(2, 1fr); }
    .who-cards { grid-template-columns: repeat(3, 1fr); }
    .footer-inner { grid-template-columns: repeat(2, 1fr); }
    .faq-inner { grid-template-columns: 0.85fr 1.15fr; }
}

@media (min-width: 1024px) {
    .about-inner { grid-template-columns: 0.85fr 1.15fr; }
    .focus-layout { grid-template-columns: 1.15fr 0.85fr; }
    .contact-inner { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
    .method-grid { grid-template-columns: repeat(4, 1fr); }
    .focus-aside { position: sticky; top: 112px; }
    .method-head { max-width: 992px; }
}

@media (min-width: 1440px) {
    .hero { padding-top: 48px; }
    .hero-title { letter-spacing: -0.025em; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .seal { animation: none; }
}

@media print {
    .site-header, .site-footer, .to-top, .grain { display: none !important; }
    body { background: #fff; color: #000; }
}