/* Sander first, Anfrageseite. Stil nach der neuen Sander-Website (sander.melioration24.com): Inter, Sander-Rot, Großbuchstaben-Headlines, gerade Kanten, feine Rasterlinien. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/inter-latin-ext-var.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --rot: #aa0020; --rot-dunkel: #8a001a; --ink: #1e1e1e; --graphit: #4d4d4d; --dunkelgrau: #6b6b6b; --mittelgrau: #a1a1a1; --hellgrau: #d2d2d2; --lichtgrau: #e9e9e9; --weiss: #fff;
  --font: "Inter", Arial, sans-serif;
  --container: 1240px; --rand: clamp(20px, 4.2vw, 56px); --kopf-h: 72px;
  --t-hero: clamp(1.9rem, 3.8vw, 3.1rem); --t-h2: clamp(1.5rem, 2.9vw, 2.3rem); --t-h3: clamp(1.05rem, 1.4vw, 1.2rem);
  --ls: .04em; --schatten: 0 2px 6px rgba(0,0,0,.18); --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-weight: 300; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls); line-height: 1.12; text-wrap: balance; }
strong { font-weight: 700; }
.innen { max-width: var(--container); margin: 0 auto; padding: 0 var(--rand); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--hellgrau); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-h); }
.kopf-logo img { height: 38px; width: auto; }
.kopf-rechts { display: flex; align-items: center; gap: 1.6rem; }
.kopf-ort { color: var(--dunkelgrau); font-size: .95rem; font-weight: 400; }
.kopf-ort a { text-decoration: none; font-weight: 600; color: var(--ink); }
.kopf-ort a:hover { color: var(--rot); }

/* Knöpfe wie auf der neuen Website: Großbuchstaben, fett, Pfeil rechts, gerade Kanten */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 46px; max-width: 100%; padding: .7rem 1.1rem .7rem 1.25rem; background: var(--rot); color: #fff; font-family: inherit; font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--rot); border-radius: 0; box-shadow: var(--schatten); cursor: pointer; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.btn-pfeil { flex: none; margin-left: auto; display: block; }
.btn:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.btn--hell { background: #fff; color: var(--rot); border-color: #fff; }
.btn--hell:hover { background: var(--lichtgrau); border-color: var(--lichtgrau); color: var(--rot-dunkel); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--voll { width: 100%; white-space: normal; }
.btn--klein { min-height: 40px; font-size: .82rem; padding: .55rem .9rem .55rem 1rem; gap: 1rem; }

/* Hero: roter Block links, Foto rechts */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(78vh, 720px); }
.hero-rot { background: var(--rot); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 88px) clamp(28px, 4.5vw, 72px) clamp(40px, 6vw, 88px) max(var(--rand), calc((100vw - var(--container)) / 2)); }
.hero h1 { font-size: var(--t-hero); max-width: 16ch; }
.hero-lead { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 300; line-height: 1.5; max-width: 40ch; color: rgba(255,255,255,.94); }
.hero-aktion { margin-top: 2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hero-hinweis { font-size: .92rem; color: rgba(255,255,255,.85); font-weight: 400; }
.hero-vertrauen { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.35); font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.9); max-width: 44ch; }
.hero-bild { position: relative; min-height: 380px; }
.hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }

/* Ansprechpartner-Leiste wie auf der Website */
.personen { border-bottom: 1px solid var(--hellgrau); }
.personen-grid { display: grid; grid-template-columns: 1fr 1fr; }
.person { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem 1.4rem 0; }
.person + .person { padding-left: 1.6rem; border-left: 1px solid var(--hellgrau); }
.person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.person strong { display: block; font-size: 1.05rem; }
.person-rolle { color: var(--dunkelgrau); font-size: .92rem; font-weight: 400; }
.person-kontakt { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .92rem; font-weight: 400; }
.person-kontakt a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hellgrau); }
.person-kontakt a:hover { color: var(--rot); border-color: var(--rot); }

/* Abschnitte */
.abschnitt { padding: clamp(56px, 7.5vw, 112px) 0; }
.abschnitt--linie { border-top: 1px solid var(--hellgrau); }
.abschnitt h2 { font-size: var(--t-h2); }
.abschnitt .lead { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 300; line-height: 1.5; color: var(--ink); }
.abschnitt p + p { margin-top: 1rem; }
.text-max { max-width: 62ch; }
.zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.zwei--bildlinks { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.zwei--bildlinks .bild { order: -1; }
.bild img { width: 100%; height: auto; }
.bildzeile { margin-top: .7rem; font-size: .88rem; color: var(--dunkelgrau); font-weight: 400; }

/* Modelle: Karten wie auf der Website */
.modelle { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hellgrau); }
.modell { display: flex; flex-direction: column; border-right: 1px solid var(--hellgrau); }
.modell:last-child { border-right: 0; }
.modell-bild { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.modell-bild img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.modell h3 { text-align: center; font-size: 1.15rem; padding: 0 1rem; }
.modell-typ { text-align: center; color: var(--dunkelgrau); font-size: .88rem; font-weight: 400; margin-top: .3rem; }
.specs { list-style: none; padding: 1.2rem 1rem .6rem; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.specs li { display: flex; align-items: center; gap: .8rem; font-size: .95rem; font-weight: 400; }
.specs img { width: 34px; height: 34px; flex: none; }
.specs { flex: 1; }
.modell .btn { margin: 0; border-left: 0; border-right: 0; border-bottom: 0; display: flex; justify-content: flex-start; gap: .7rem; white-space: normal; text-align: left; }
.modell .btn .btn-pfeil { margin-left: 0; }
.modelle-hinweis { margin-top: 1rem; font-size: .88rem; color: var(--dunkelgrau); font-weight: 400; }
.branchen { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .92rem; font-weight: 500; }
.branchen span { padding: .45rem .8rem; border: 1px solid var(--hellgrau); }

/* Fakten-Zeilen */
.liste { margin-top: 2.2rem; border-top: 1px solid var(--hellgrau); }
.liste-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .8rem 2.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--hellgrau); }
.liste-zeile h3 { font-size: var(--t-h3); }
.liste-zeile p { font-weight: 300; }

/* Rotes Statement-Band */
.band { background: var(--rot); color: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.band-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.band h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.05; }
.band p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.94); }
.band .btn { margin-top: 1.4rem; }

/* Fragen als offene Liste, kein Akkordeon */
.fragen { margin-top: 2rem; border-top: 1px solid var(--hellgrau); }
.frage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .6rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hellgrau); }
.frage h3 { font-size: var(--t-h3); }
.frage p { font-weight: 300; grid-column: 2; }
.frage p + p { margin-top: .7rem; }

/* Vollbreites Bild */
.voll img { width: 100%; height: min(64vh, 720px); object-fit: cover; }
.voll .bildzeile { margin-top: .9rem; }

/* Anfrage */
.anfrage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.anfrage-kontakt { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--hellgrau); font-weight: 400; }
.anfrage-kontakt a { text-decoration: none; font-weight: 700; color: var(--ink); }
.anfrage-kontakt a:hover { color: var(--rot); }
.anfrage-kontakt p + p { margin-top: .6rem; }
.anfrage-kontakt-titel { font-weight: 600; }
.person--klein { padding: 1rem 0 0; }
.person--klein + .person--klein { border-left: 0; padding-left: 0; }
.person--klein img { width: 64px; height: 64px; }
.person--klein strong { font-size: 1rem; }
.formular { background: #fff; padding: clamp(24px, 3vw, 44px); border: 1px solid var(--hellgrau); }
.feld { margin-bottom: 1.15rem; }
.feld label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .45rem; }
.feld-optional { font-weight: 400; color: var(--dunkelgrau); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--mittelgrau); border-radius: 0; padding: .85rem 1rem; }
.feld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graphit) 50%), linear-gradient(135deg, var(--graphit) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--rot); outline: 2px solid var(--rot); outline-offset: 0; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.feld--zwei > * { min-width: 0; }
.feld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld-check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; font-weight: 400; color: var(--graphit); }
.feld-check input { width: 18px; height: 18px; flex: none; margin: .2rem 0 0; accent-color: var(--rot); }
.form-modell { margin-bottom: 1.1rem; padding: .8rem 1rem; background: var(--lichtgrau); font-size: .92rem; font-weight: 400; }
.form-hinweis { margin-top: .9rem; font-size: .88rem; color: var(--dunkelgrau); font-weight: 400; }
.form-platzhalter { margin-bottom: 1.1rem; padding: .9rem 1rem; background: var(--lichtgrau); font-size: .92rem; font-weight: 400; }
.form-status { margin-top: 1rem; font-size: .95rem; min-height: 1.4em; font-weight: 400; }
.form-status--fehler { color: var(--rot); font-weight: 700; }
.erfolg { background: #fff; padding: clamp(28px, 4vw, 56px); border-top: 6px solid var(--rot); border: 1px solid var(--hellgrau); border-top: 6px solid var(--rot); }
.erfolg h3 { font-size: var(--t-h2); }
.erfolg p { margin-top: 1rem; font-size: 1.05rem; max-width: 40ch; }

/* Fuß, hell wie die Website */
.fuss { border-top: 1px solid var(--hellgrau); padding: clamp(40px, 5vw, 64px) 0 2rem; font-weight: 400; font-size: .95rem; }
.fuss-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.fuss img { height: 36px; width: auto; }
.fuss p { margin-top: 1rem; color: var(--graphit); }
.fuss a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hellgrau); }
.fuss a:hover { color: var(--rot); border-color: var(--rot); }
.fuss-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.fuss-unten { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--hellgrau); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; font-size: .88rem; color: var(--dunkelgrau); }
.fuss-slogan { font-weight: 700; color: var(--rot); text-transform: uppercase; letter-spacing: .06em; }

/* Zustimmung Pixel */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--hellgrau); box-shadow: 0 -8px 30px rgba(0,0,0,.08); padding: 1rem var(--rand); }
.consent-innen { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; font-size: .92rem; font-weight: 400; }
.consent-innen p { flex: 1 1 420px; }
.consent-knoepfe { display: flex; gap: .6rem; }

/* Rechtsseiten */
.rechts { padding: clamp(40px, 6vw, 96px) 0; font-weight: 400; }
.rechts h1 { font-size: var(--t-h2); margin-bottom: 1.6rem; }
.rechts h2 { font-size: 1.15rem; margin: 2.2rem 0 .7rem; }
.rechts h3 { font-size: 1rem; margin: 1.6rem 0 .5rem; }
.rechts p { margin: 0 0 .9rem; max-width: 72ch; }
.rechts ul { margin: 0 0 .9rem; padding-left: 1.2rem; max-width: 72ch; }
.rechts .delta { margin-top: 3rem; padding: 1.4rem 1.6rem; background: var(--lichtgrau); border-left: 6px solid var(--rot); }
.rechts .delta h2 { margin-top: 0; }
.rechts a { color: var(--rot); }

/* Einblenden */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js .reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1100px) { .modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modell:nth-child(2) { border-right: 0; } .modell:nth-child(-n+2) { border-bottom: 1px solid var(--hellgrau); } }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-rot { padding: clamp(36px, 7vw, 64px) var(--rand); }
  .hero h1 { max-width: none; }
  .hero-bild { min-height: 0; aspect-ratio: 4 / 3; }
  .hero-bild img { object-position: 66% 50%; }
  .personen-grid { grid-template-columns: 1fr; }
  .person + .person { padding-left: 0; border-left: 0; border-top: 1px solid var(--hellgrau); }
  .zwei, .zwei--bildlinks, .band-grid, .anfrage-grid { grid-template-columns: 1fr; }
  .zwei .bild { order: -1; }
  .liste-zeile, .frage { grid-template-columns: 1fr; gap: .4rem; }
  .frage p { grid-column: auto; }
  .fuss-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .kopf-ort { display: none; }
  .kopf-logo img { height: 30px; }
  .modelle { grid-template-columns: 1fr; }
  .modell { border-right: 0; border-bottom: 1px solid var(--hellgrau); }
  .modell:last-child { border-bottom: 0; }
  .feld--zwei { grid-template-columns: 1fr; }
  .voll img { height: 52vh; }
  .hero-aktion .btn, .band .btn { width: 100%; white-space: normal; }
  .person img { width: 68px; height: 68px; }
}