/* Logotex24 – Landingpage. Keine externen Schriften oder Dienste (datenschutzfreundlich). */

/* Archivo (variable Schrift, lokal eingebunden) */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --pad: 4.5rem;                        /* vertikaler Abstand der Abschnitte */
  --cut: clamp(2rem, 5vw, 5rem);        /* Tiefe der Pfeil-Übergänge */
  --blue: #0b5b8c;
  --blue-dark: #08456a;
  --accent: #2aa9e6;        /* helleres Blau für dunkle Flächen und Buttons */
  --accent-hover: #5bbdf0;
  --dark: #0a1620;          /* tiefes Blauschwarz */
  --dark-2: #12212d;
  --on-dark: #b8c7d3;       /* Fließtext auf dunklem Grund */
  --ink: #111418;
  --muted: #4b5563;
  --line: #e3e7ec;
  --bg: #ffffff;
  --bg-alt: #f3f6f9;
  --radius: 12px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1.0625rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { line-height: 1.02; margin: 0 0 .6em; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Volle Breite: kein festes Maximum, nur seitlicher Abstand, der mit dem Bildschirm mitwächst */
.container { width: 100%; padding: 0 var(--gutter); }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  padding: .9rem 1.6rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--dark); }
.btn-small { padding: .5rem 1.1rem; font-size: .95rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,22,32,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.logo-link img { height: 44px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 1.4rem; }
.main-nav a:not(.btn) { color: #e6edf3; text-decoration: none; font-weight: 600; font-size: .95rem; }
.main-nav a:not(.btn):hover { color: var(--accent); }

/* Hero: Breitbild als Vollbild-Hintergrund, Text zentriert darüber, gerade Kante mit
   hellblauer Akzentlinie am unteren Rand (statt der früheren Schräge). */
.hero {
  position: relative;
  padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(5.5rem, 13vw, 9.5rem);
  color: #fff;
  isolation: isolate;
  text-align: center;
  border-bottom: 6px solid var(--accent);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,14,20,.55) 0%, rgba(6,14,20,.35) 35%, rgba(6,14,20,.88) 100%),
    radial-gradient(60% 60% at 50% 35%, rgba(6,14,20,.15), rgba(6,14,20,.78) 75%),
    url("../assets/bilder/startseite/start-logotex-2400.webp") center 22% / cover no-repeat;
}
.hero-inner { max-width: 46em; margin: 0 auto; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.1; margin-bottom: 0; }
.hero h1 .line { display: block; margin-bottom: .1em; will-change: transform; }
.hero h1 .accent { color: var(--accent); }

.eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; margin-bottom: .8rem; }
/* Gleicher Abstand zum H1 darüber wie zu den Buttons darunter (siehe .hero-actions), damit
   der Spruch wirklich mittig zwischen beiden sitzt. */
.hero-claim {
  font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.005em;
  max-width: 22em; margin: 1.8rem auto 0;
}
/* Der Schluss des Spruchs ist hellblau und bekommt beim Scrollen eine Unterstreichung, die sich nach und nach zeichnet */
.hero-claim .mark {
  --mark: 0%;
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / var(--mark) 4px;
  padding-bottom: 4px;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; }

/* Sections */
.section { padding: var(--pad) 0; background: var(--bg); }
.section-alt { background: var(--bg-alt); }
.section-intro { color: var(--muted); max-width: 42em; margin-bottom: 2rem; }
.section-intro-lg { font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 500; line-height: 1.4; color: var(--ink); max-width: 38em; }

/* Drei Kernaussagen mit Piktogramm. Abstand von der Überschrift = var(--pad), also
   derselbe Wert wie von der Akzentlinie zur Überschrift (siehe #merkmale weiter unten) –
   dadurch sind alle Abstände in diesem Muster gleich groß. */
.feature-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--pad); }
.feature { text-align: center; }
.feature-icon {
  display: block; color: var(--accent); margin: 0 auto 1.4rem; line-height: 0;
  filter: drop-shadow(0 0 18px rgba(42, 169, 230, .45));
}
.feature-icon svg { display: inline-block; }
.feature h3 { font-size: 1.45rem; margin-bottom: .5em; color: #fff; }
.feature p { color: var(--accent); font-weight: 600; font-size: 1.15rem; line-height: 1.35; margin: 0 auto; max-width: 24em; }

/* Icon-Wappen sitzt mittig auf der geraden Kante zum vorherigen Abschnitt, halb im Hellen,
   halb im Dunklen. Ein eigener runder Rahmen mit dunklem Grund sorgt dafür, dass das Icon in
   beiden Bereichen gut lesbar bleibt, statt direkt auf den zwei Farben zu liegen.
   Braucht position:relative auf #merkmale (siehe unten) als Bezugsrahmen.
   --badge-size ist hier definiert, damit die Überschrift darunter (siehe #merkmale h2) den
   Abstand exakt um den unten überstehenden Teil des Wappens ausgleichen kann. */
.merkmale-badge {
  position: absolute; top: 0; left: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  width: var(--badge-size); height: var(--badge-size);
  border-radius: 50%;
  background: var(--dark);
  border: 4px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 2vw, 20px);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.merkmale-badge img { width: 100%; height: 100%; object-fit: contain; }
/* Abstand von der Kante zur Überschrift: die normale Sektions-Auffüllung (var(--pad)) plus
   die Hälfte der Wappengröße, weil das Wappen unten in den Abschnitt hineinragt und den
   sichtbaren Abstand sonst kleiner erscheinen lässt. So bleibt der sichtbare Abstand vom
   unteren Rand des Wappens bis zur Überschrift genauso groß wie überall sonst (var(--pad)). */
#merkmale h2 { margin-top: calc(var(--badge-size) / 2); margin-bottom: 0; }
.center { text-align: center; }
.section-intro.center { margin-left: auto; margin-right: auto; max-width: 48em; }
.note { color: var(--muted); margin-top: 1.5rem; }

/* Abstand von der Überschrift = var(--pad), also derselbe Wert wie von der Akzentlinie
   zur Überschrift, damit beide Abstände in diesem Muster gleich groß sind. */
#zielgruppen h2 { margin-bottom: 0; }
.card-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--pad); }
/* Gruppen-Karten: Bild, Text und Link in einem. Beim Darüberfahren hebt sich die Karte,
   das Bild zoomt und verschiebt sich, die Überschrift wird etwas größer. */
.group-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(10,22,32,.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.group-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--dark); }
.group-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.group-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.group-body h3 { margin-bottom: .5em; transform-origin: left center; transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s; overflow-wrap: anywhere; hyphens: auto; }
.group-body p { color: var(--muted); margin: 0 0 1.2rem; }
.group-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--blue); }
.group-cta svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.group-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.group-card:hover, .group-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--blue);
  box-shadow: 0 24px 50px rgba(10,22,32,.2);
}
.group-card:hover .group-media img, .group-card:focus-visible .group-media img { transform: scale(1.1) translate(-2%, -2%); }
.group-card:hover h3, .group-card:focus-visible h3 { transform: scale(1.06); color: var(--blue); }
.group-card:hover .group-cta svg, .group-card:focus-visible .group-cta svg { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .group-card, .group-media img, .group-body h3, .group-cta svg { transition: none; }
  .group-card:hover, .group-card:focus-visible { transform: none; }
  .group-card:hover .group-media img, .group-card:focus-visible .group-media img,
  .group-card:hover h3, .group-card:focus-visible h3,
  .group-card:hover .group-cta svg, .group-card:focus-visible .group-cta svg { transform: none; }
}

/* Hinweis unter den vier Karten: Gruppe nicht dabei? Der Link ist unterstrichen, so wie
   der Schluss des Spruchs im Hauptbereich, nur ohne die Scroll-Animation. */
/* Zusätzlicher Abstand nach unten, weil das runde Wappen bei "Unser Serviceversprechen" zur
   Hälfte in diesen Bereich hineinragt und den Abstand sonst kleiner wirken lässt als oben. */
.group-more { text-align: center; margin: 2.8rem 0 3.5rem; }
.group-more-lead { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.group-more-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.35rem; font-weight: 800; color: var(--blue); text-decoration: none;
}
.group-more-link:hover { color: var(--blue-dark); }
.group-more-link svg { flex-shrink: 0; transition: transform .2s; }
.group-more-link:hover svg { transform: translateX(4px); }
/* Der Strich erscheint erst beim Hover, in derselben Farbe wie die Schrift */
.group-more-link .us { position: relative; display: inline-block; }
.group-more-link .us::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.group-more-link:hover .us::after, .group-more-link:focus-visible .us::after { transform: scaleX(1); }

/* Dunkle Abschnitte: gleiches Blauschwarz mit Blau-Schimmer wie im Hauptbereich */
.section-dark {
  color: #fff;
  background:
    radial-gradient(1000px 600px at var(--glow-x, 85%) 0%, rgba(11,91,140,.6), transparent 65%),
    var(--dark);
}
.section-dark .section-intro, .section-dark .note { color: var(--on-dark); }
.section-dark .form-hint, .section-dark .form-field-hint { color: var(--on-dark); }
.section-dark .form-hint a { color: var(--accent); }
.section-dark .anfrage-text > p, .section-dark .anfrage-text a { color: var(--on-dark); }
.section-dark .anfrage-text a { color: var(--accent); font-weight: 700; }
/* Merkmale: kräftigerer Verlauf aus zwei Seiten, damit der Bereich nicht flach-dunkel wirkt.
   Als eigene Variable, damit dieselbe Fläche gleich unten bei .cut-accent wiederverwendet werden kann. */
/* Statt Pfeilform hier zwei gerade Kanten mit hellblauer Akzentlinie, oben und unten. */
#merkmale {
  --badge-size: clamp(88px, 12vw, 128px);
  --glow:
    radial-gradient(900px 550px at 12% 0%, rgba(11,91,140,.65), transparent 60%),
    radial-gradient(900px 550px at 88% 100%, rgba(11,91,140,.5), transparent 60%),
    var(--dark);
  background: var(--glow);
  position: relative;
  border-top: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
}

/* Übergänge: Abschnitte laufen unten spitz zu (Pfeil nach unten) und führen so zum nächsten.
   Der nächste Abschnitt rückt um die Tiefe --cut nach oben und füllt die Kerbe. */
.cut {
  position: relative;
  padding-bottom: calc(var(--pad) + var(--cut));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut)));
}
.cut + .section { margin-top: calc(var(--cut) * -1); padding-top: calc(var(--pad) + var(--cut)); }
/* Produkte → Veredelung: gerade Kante mit hellblauer Akzentlinie, wie im Hauptbereich. */
#produkte { border-bottom: 6px solid var(--accent); }

/* Veredelung: eigener Verlauf, wie bei Merkmale, aber an der anderen Ecke betont */
#veredelung {
  --glow:
    radial-gradient(1000px 600px at 88% 0%, rgba(11,91,140,.6), transparent 60%),
    var(--dark);
  background: var(--glow);
}
/* Pfeil mit hellblauer Akzentlinie, für Übergänge, die keine gerade Kante sind. Statt die
   Sektion direkt zuzuschneiden, kommt die Form aus zwei Ebenen: unten die Linie, darüber die
   eigene Fläche der Sektion, die 6px früher endet. So bleibt die Kerbe darunter echt
   durchsichtig, und der nächste Abschnitt kann durchscheinen. Pro Sektion wird nur die
   eigene Hintergrundfarbe gesetzt (siehe die Regeln direkt darunter). */
.cut-accent {
  clip-path: none;
  isolation: isolate;
  background: none;
}
.cut-accent::before, .cut-accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
}
.cut-accent::before {
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut)));
}
.cut-accent::after {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) - 6px), 50% calc(100% - 6px), 0 calc(100% - var(--cut) - 6px));
}
/* Pfeil-Übergänge ab Veredelung bekommen dieselbe Akzentlinie wie die geraden Kanten weiter
   oben auf der Seite. */
#veredelung.cut-accent { background: none; }
#veredelung.cut-accent::after { background: var(--glow); }
#ablauf.cut-accent { background: none; }
#ablauf.cut-accent::after { background: var(--bg); }
/* Ablauf der Seite: gerade Kanten mit Akzentlinie beim Hauptbereich und bei Produkte, ab
   Veredelung der Pfeil nach unten (Schritt für Schritt), Anfrage und Footer enden gerade. */
/* Frühere Abschnitte liegen oben, damit ihre Kante über dem nächsten Abschnitt sichtbar bleibt */
.hero { z-index: 7; } #zielgruppen { z-index: 6; } #merkmale { z-index: 5; }
#produkte { z-index: 4; } #veredelung { z-index: 3; } #ablauf { z-index: 2; }

/* Produkt-Karussell */
.product-carousel { position: relative; margin-top: 2rem; }
.product-track {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0; padding: .3rem .3rem 1rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.product-track::-webkit-scrollbar { height: 8px; }
.product-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.product-card { flex: 0 0 clamp(190px, 26vw, 260px); scroll-snap-align: start; }
.product-media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line);
}
.product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.product-media .back { opacity: 0; }
.product-card:hover .back, .product-card:focus-within .back { opacity: 1; }
.product-card:hover .front, .product-card:focus-within .front { opacity: 0; }
.product-card h3 { margin: .9rem 0 .3rem; font-size: 1.1rem; }
.product-card p { color: var(--muted); font-size: .95rem; margin: 0; }
/* Pfeile nur zeigen, wenn der Track tatsächlich mehr Karten enthält, als sichtbar sind
   (siehe js/main.js, das die Klasse "has-overflow" setzt und bei Bedarf entfernt). */
.carousel-btn {
  position: absolute; top: calc(50% - 1.1rem); z-index: 2;
  display: none; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: #fff; color: var(--blue); border: 1px solid var(--line); cursor: pointer;
  box-shadow: 0 8px 20px rgba(10,22,32,.12);
}
.product-carousel.has-overflow .carousel-btn { display: grid; }
.carousel-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.carousel-prev { left: -1.4rem; }
.carousel-next { right: -1.4rem; }
@media (max-width: 720px) { .carousel-btn { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .product-media .back, .product-media .front { transition: none; }
  .product-track { scroll-behavior: auto; }
}

/* Herstellermarken unter dem Produkt-Karussell: Logos in Graustufen für ein ruhiges,
   einheitliches Bild, beim Darüberfahren in Farbe. */
.hersteller { margin-top: var(--pad); }
.hersteller h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hersteller-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2.2rem 3rem; list-style: none; margin: 2rem 0 0; padding: 0;
}
.hersteller-logos img {
  height: 30px; width: auto; display: block;
  filter: grayscale(1) opacity(.6); transition: filter .2s;
}
.hersteller-logos li:hover img, .hersteller-logos li:focus-within img { filter: none; }
@media (prefers-reduced-motion: reduce) { .hersteller-logos img { transition: none; } }

/* Veredelung: vier Techniken, als kompakte, zentrierte Zeile statt über die ganze Breite
   verteilt, Text und Bild dicht nebeneinander. Auf schmalen Bildschirmen steht der Text
   zuerst und das Bild folgt darunter, weil beide einfach im Quelltext hintereinander in
   einer Spalte stehen. */
.techniques { display: grid; gap: 6rem; margin: 4.5rem auto 0; max-width: 960px; }
.technique { display: grid; gap: 1.8rem; align-items: center; justify-content: center; }
.technique-text h3 { color: #fff; margin-bottom: .5em; }
.technique-text p { color: var(--on-dark); margin: 0; }
.technique-media { width: 280px; justify-self: center; }
.technique-media img { width: 100%; border-radius: var(--radius); display: block; }
/* Vorteile als kurze Haken-Liste statt Fließtext oder Buttons */
.technique-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.technique-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--on-dark); font-size: .95rem; }
.technique-list svg { flex-shrink: 0; margin-top: .2em; color: var(--accent); }

.steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: step; margin-top: 1.5rem; }
.steps li { counter-increment: step; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 900; }
.steps p { color: var(--muted); margin: 0; }

/* Formular */
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.form input, .form textarea {
  font: inherit; font-weight: 400; color: var(--ink);
  padding: .75rem .9rem; border: 1px solid #c5ccd4; border-radius: 8px; background: #fff; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 3px solid rgba(11,91,140,.35); border-color: var(--blue); }
.form input[type="file"] { padding: .55rem .6rem; background: var(--bg-alt); cursor: pointer; }
.form-field-hint { font-weight: 400; font-size: .88rem; color: var(--muted); }
.form-hint { font-size: .85rem; color: var(--muted); margin: 0; }
.form .btn { justify-self: start; }
/* Einwilligungs-Checkbox: Kästchen und Text in einer Zeile statt wie die übrigen Felder
   übereinander, daher eigenes Layout statt des generischen ".form label". Zwei Klassen
   in einem Selektor (".form .form-checkbox"), damit diese Regel sicher höher gewichtet
   wird als ".form label" (eine Klasse + ein Element) und sich zuverlässig durchsetzt. */
.form .form-checkbox {
  display: flex; align-items: flex-start; gap: .65rem;
  font-weight: 400; font-size: .9rem; color: var(--muted); cursor: pointer;
}
.form-checkbox input { width: auto; margin: .2rem 0 0; flex-shrink: 0; }

/* Footer */
.site-footer { background: #050d13; color: var(--on-dark); padding: 2rem 0; font-size: .95rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.footer-inner p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer a { color: #fff; }

/* Rechtstexte */
.legal { padding-top: 3rem; padding-bottom: 4rem; }
.legal > * { max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal .todo { background: #fff7e0; border: 1px solid #f0d78a; border-radius: 8px; padding: 1rem 1.2rem; }

@media (min-width: 900px) {
  .anfrage-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .technique { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .technique-media { width: 100%; }
}

@media (max-width: 720px) {
  .main-nav a:not(.btn) { display: none; }
  :root { --pad: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}