/* ==========================================================================
   RUDEL — Prozessautomatisierung · Landingpage V2, Gestaltung nach CI
   Farbwelt und Typografie folgen dem Markenblatt:
   Graphit #0D1117, Off-White #F6F7F9, Professionelles Blau #2563EB,
   Gedaempftes Kupfer #C87A3A, Schrift Montserrat.
   Abweichung mit Absicht: Kupfer erreicht als kleiner Text auf Off-White nur
   3.11:1 und damit kein AA. Es dient deshalb als Flaechen- und Grafikakzent,
   fuer Text auf hellem Grund steht die abgedunkelte Variante bereit.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------- 2. Tokens */
:root {
  --graphit:     #0D1117;   /* 17.65:1 auf Off-White */
  --graphit-2:   #161C24;   /* Flaechen auf dunklem Grund */
  --offweiss:    #F6F7F9;
  --flaeche:     #EDEFF3;   /* abgesetzte Abschnitte */
  --weiss:       #FFFFFF;

  --grau:        #58606B;   /* 5.94:1 auf Off-White, 5.53:1 auf Flaeche */
  --blau:        #2563EB;   /* Leitfarbe, weisse Schrift 5.17:1 */
  --blau-tief:   #1D4FD0;
  --blau-hell:   #7FA6FF;   /* 7.93:1 auf Graphit */
  --kupfer:      #C87A3A;   /* Grafikakzent, auf Graphit 5.68:1 */
  --kupfer-text: #9C5A22;   /* 5.02:1 auf Off-White */
  --rot:         #A32A1E;

  --linie:        #DDE1E8;
  --linie-dunkel: rgba(246, 247, 249, .14);
  --hell-auf-ink: #A8B0BC;  /* 8.65:1 auf Graphit */

  --maxw: 1240px;
  --maxw-narrow: 780px;
  --measure: 66ch;
  --radius: 4px;
  --radius-lg: 6px;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-section: clamp(3.75rem, 7.5vw, 7rem);
  --schatten: 0 1px 2px rgba(13, 17, 23, .04), 0 10px 30px rgba(13, 17, 23, .06);
  --fokus: var(--blau);
}

/* ---------------------------------------------------------- 3. Reset/Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--graphit);
  background: var(--offweiss);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Lange deutsche Woerter trennen, statt die Seite breiter zu schieben.
   "overflow-wrap" allein reicht nicht, es beeinflusst die Mindestbreite nicht. */
p, li, dd, dt, figcaption, label { hyphens: auto; }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blau-tief); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--graphit); color: var(--offweiss);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 4. Layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.35rem, 4vw, 2.25rem); }
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--space-section); }
.section--shade { background: var(--flaeche); }
.section--ink { background: var(--graphit); color: var(--offweiss); }

.section--ink a { color: var(--blau-hell); }
.section--ink a:hover { color: var(--weiss); }
.section--ink :focus-visible { outline-color: var(--offweiss); }

/* -------------------------------------------------------- 5. Typografie */
h1, h2, h3 { margin: 0 0 .6em; text-wrap: balance; }
h1 {
  font-size: clamp(2.15rem, 5.2vw, 3.4rem); font-weight: 600;
  line-height: 1.14; letter-spacing: -.015em;
}
h1 .akzent { color: var(--blau); }
h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 400;
  line-height: 1.25; letter-spacing: -.005em; max-width: 22ch;
}
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.175rem); color: var(--grau); max-width: 58ch; }
.section--ink .lead { color: var(--hell-auf-ink); }

.eyebrow, .kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 1rem;
}
.section--ink .kicker { color: var(--hell-auf-ink); }

.note { font-size: .875rem; color: var(--grau); max-width: 72ch; }
.section--ink .note { color: var(--hell-auf-ink); }

/* Zentrierter Abschnittskopf mit kurzer Linie, wie im Markenblatt */
.kopf { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.kopf h2 { max-width: 30ch; margin-inline: auto; }
.kopf .lead { margin-inline: auto; }
.kopf::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--kupfer); margin: 1.5rem auto 0;
}
.section--ink .kopf::after { background: var(--kupfer); }

/* ---------------------------------------------------------- 6. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; min-height: 48px;
  font: inherit; font-weight: 600; font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--sm { padding: .55rem 1.1rem; min-height: 40px; font-size: .75rem; }
.btn--wide { width: 100%; }
/* Auf schmalen Bildschirmen duerfen Beschriftungen umbrechen, statt die
   Seite breiter zu schieben. */
.btn { max-width: 100%; }
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .btn { letter-spacing: .04em; padding-inline: 1.1rem; }
}

.btn--primary { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.btn--primary:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--weiss); }

.btn--ghost { background: transparent; color: var(--graphit); border-color: #C3C9D3; }
.btn--ghost:hover { background: rgba(13, 17, 23, .05); border-color: var(--graphit); color: var(--graphit); }
.section--ink .btn--ghost { color: var(--offweiss); border-color: rgba(246, 247, 249, .38); }
.section--ink .btn--ghost:hover { background: rgba(246, 247, 249, .1); border-color: var(--offweiss); color: var(--offweiss); }

.btn-arrow { transition: transform .15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

/* ----------------------------------------------------------- 7. Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 247, 249, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--linie); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--graphit); }
.brand-mark { width: 2rem; height: 2rem; flex: none; color: var(--graphit); }
.brand-wort { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.15rem; font-weight: 600; letter-spacing: .2em; }
.brand-sub { font-size: .5625rem; letter-spacing: .19em; text-transform: uppercase; color: var(--grau); font-weight: 500; }

.nav-links ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.nav-links a:not(.btn) {
  display: block; padding: .5rem .75rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphit); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):hover { color: var(--blau); }
.nav-links a.is-active:not(.btn) { border-bottom-color: var(--blau); color: var(--blau); }
.nav-links li:last-child { margin-left: .6rem; }

.nav-toggle {
  display: none; align-items: center; gap: .5rem; background: none;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: .5rem .85rem; min-height: 44px; font: inherit;
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--graphit); cursor: pointer;
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle-bars span { display: block; width: 18px; height: 1.5px; background: var(--graphit); }

/* Sehr schmale Geraete, ab hier passen Wortmarke und Beschriftung nicht mehr
   nebeneinander. Das Wort "Menue" bleibt fuer Screenreader erhalten. */
@media (max-width: 400px) {
  .brand { gap: .55rem; }
  .brand-mark { width: 1.75rem; height: 1.75rem; }
  .brand-name { font-size: 1.05rem; letter-spacing: .16em; }
  .brand-sub { font-size: .5rem; letter-spacing: .12em; }
  .nav-toggle { padding-inline: .7rem; }
  .nav-toggle > span:not(.nav-toggle-bars) {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; background: var(--offweiss); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); display: none; }
  .nav-links.is-open { display: block; }
  .nav-links ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1rem, 4vw, 2.25rem) 1.35rem; }
  .nav-links a:not(.btn) { padding: .95rem .25rem; border-bottom: 1px solid var(--linie); }
  .nav-links li:last-child { margin: .9rem 0 0; }
  .nav-links .btn { width: 100%; }
}

/* -------------------------------------------------------------- 8. Hero */
.hero { position: relative; background: var(--offweiss); }
.hero-grid { display: grid; align-items: stretch; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.35rem, 4vw, 2.25rem) clamp(2.75rem, 6vw, 4.5rem);
  width: 100%;
}
/* Die halbe Seitenbreite und der rechte Anschlag gelten nur, solange Text und
   Bild nebeneinander stehen. Einspaltig wuerde der Text sonst einruecken. */
@media (min-width: 980px) {
  .hero-text { max-width: calc(var(--maxw) / 2); margin-left: auto; }
}
.hero h1 { max-width: 13ch; }
.hero .lead { max-width: 46ch; }

.hero-branchen {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0; padding: 1.15rem 0 0;
  border-top: 1px solid var(--linie); max-width: none;
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grau);
}
.hero-branchen li { display: flex; align-items: center; gap: 1rem; }
.hero-branchen li + li::before { content: ""; width: 1px; height: .8rem; background: var(--linie); }

.hero-bild { position: relative; background: var(--flaeche); }
.hero-bild picture { position: absolute; inset: 0; display: block; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Die Mindesthoehe gilt nur nebeneinander. Zusammen mit dem Seitenverhaeltnis
   wuerde sie auf schmalen Bildschirmen eine Mindestbreite erzwingen. */
@media (min-width: 980px) { .hero-bild { min-height: 18rem; } }
@media (max-width: 979px) { .hero-bild { aspect-ratio: 16 / 11; width: 100%; } }

/* ------------------------------------------------------- 9. Belegleiste */
.beleg { border-bottom: 1px solid var(--linie); background: var(--offweiss); }
.beleg-grid { display: grid; gap: 0; }
@media (min-width: 820px) { .beleg-grid { grid-template-columns: repeat(3, 1fr); } }
.beleg-item { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
@media (min-width: 820px) {
  .beleg-item { padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
  .beleg-item + .beleg-item { border-left: 1px solid var(--linie); }
  .beleg-item:first-child { padding-left: 0; }
  .beleg-item:last-child { padding-right: 0; }
}
@media (max-width: 819px) { .beleg-item + .beleg-item { border-top: 1px solid var(--linie); } }
.beleg-num { font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; margin: 0 0 .35rem; line-height: 1.25; }
.beleg-text { font-size: .9375rem; color: var(--grau); margin: 0; }

/* ---------------------------------------------------- 10. Dreier-Spalten */
.spalten { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 2.25rem; }
@media (min-width: 880px) {
  .spalten { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .spalten > li { padding-inline: clamp(1.5rem, 3vw, 2.75rem); }
  .spalten > li + li { border-left: 1px solid var(--linie); }
  .spalten > li:first-child { padding-left: 0; }
  .spalten > li:last-child { padding-right: 0; }
}
.spalten h3 { margin-bottom: .6rem; }
.spalten p { margin: 0; font-size: .9375rem; color: var(--grau); }

.spalten-icon { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: 1.35rem; color: var(--blau); }
.spalten-icon svg { width: 100%; height: 100%; }
.spalten--zentriert { text-align: center; }
.spalten--zentriert .spalten-icon { margin-inline: auto; }
.spalten--zentriert p { margin-inline: auto; }

/* -------------------------------------------- 11. Vorher/Nachher-Ablauf */
.flow { display: grid; gap: 1.5rem; }
@media (min-width: 940px) { .flow { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.lane { border: 1px solid var(--linie); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); background: var(--weiss); }
.section--shade .lane { background: var(--offweiss); }
.lane--neu { border-color: var(--blau); }

.lane-head { margin: 0 0 1.5rem; }
.lane-label { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin-bottom: .3rem; }
.lane--neu .lane-label { color: var(--blau); }
.lane-title { font-size: 1.05rem; font-weight: 500; margin: 0; }

.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: none; }
.chain li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 1rem; align-items: start; padding: .8rem 0; font-size: .9375rem; }
.chain li + li { border-top: 1px solid var(--linie); }
.chain-mark {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .05rem;
  border: 1px solid var(--linie); border-radius: 50%;
  font-size: .75rem; font-weight: 600; color: var(--grau); background: var(--offweiss);
}
.lane--neu .chain-mark { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.chain-mark--mensch { background: var(--kupfer); border-color: var(--kupfer); color: var(--weiss); }
.chain strong { display: block; font-weight: 600; }
.chain .chain-sub { color: var(--grau); }

/* ------------------------------------------------------ 12. Praxisfall */
.fall { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .fall { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.fall-bild { margin: 0; }
.fall-bild img { width: 100%; border-radius: var(--radius-lg); }
.fall-block + .fall-block { margin-top: 1.6rem; }
.fall-label { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kupfer-text); margin: 0 0 .35rem; }
.fall-block p { margin: 0; color: var(--grau); }

.fall-ergebnis {
  margin-top: 2.25rem; padding: 1.6rem 1.75rem;
  background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  border-radius: var(--radius);
}
.section--shade .fall-ergebnis { background: var(--offweiss); }
.fall-num { font-size: 1.75rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .3rem; line-height: 1.2; }
.fall-sub { margin: 0 0 .9rem; font-size: .9375rem; }
.fall-note { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--grau); }

/* --------------------------------------------------------- 13. Vorgehen */
.steps { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 2.25rem; counter-reset: schritt; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.steps li { padding-top: 1.25rem; border-top: 1px solid var(--graphit); }
.steps-num { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--blau); margin-bottom: .8rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; font-size: .9375rem; color: var(--grau); }

/* ----------------------------------------------------------- 14. Preise */
.price-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 940px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.1rem);
}
.section--shade .price-card { background: var(--offweiss); }
.price-card--akzent { border-color: var(--blau); box-shadow: var(--schatten); }
.price-flag {
  display: inline-block; align-self: flex-start; margin-bottom: 1rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--blau); color: var(--weiss);
  font-size: .625rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.price-step { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 .5rem; }
.price-card h3 { margin-bottom: .7rem; font-size: 1.15rem; font-weight: 500; }
.price { font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.price small { display: block; font-size: .8125rem; font-weight: 400; color: var(--grau); margin-top: .25rem; letter-spacing: 0; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9375rem; color: var(--grau); }
.price-card li { position: relative; padding-left: 1.35rem; }
.price-card li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: .4rem; height: .4rem; border: 1px solid var(--blau); border-radius: 50%;
}

/* ------------------------------------------------------------ 15. Ueber */
.about { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 310px); gap: 4rem; } }
.about-text p { color: var(--grau); }
.about-text p:first-of-type { color: var(--graphit); font-size: clamp(1.0625rem, 1.5vw, 1.175rem); }
.about-facts { padding: 1.75rem; border: 1px solid var(--linie); border-radius: var(--radius-lg); background: var(--weiss); }
.section--shade .about-facts { background: var(--offweiss); }
.about-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.about-facts li { position: relative; padding-left: 1.35rem; font-size: .9375rem; }
.about-facts li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: .4rem; height: .4rem; border: 1px solid var(--kupfer); border-radius: 50%;
}
.about-facts-head { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 1.15rem; }

/* -------------------------------------------------------------- 16. FAQ */
.faq { border-top: 1px solid var(--linie); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: 100%; min-height: 44px; padding: 1.35rem 0;
  font: inherit; font-size: 1rem; font-weight: 500; text-align: left; color: var(--graphit);
  background: none; border: 0; cursor: pointer;
}
.faq-q:hover { color: var(--blau); }
.faq-icon { flex: none; position: relative; width: .9rem; height: .9rem; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--blau); }
.faq-icon::before { inset: 48% 0 48% 0; }
.faq-icon::after { inset: 0 48% 0 48%; transition: transform .2s ease, opacity .2s ease; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-a { padding-bottom: 1.35rem; }
.faq-a p { margin: 0; color: var(--grau); }
.js .faq-a { display: none; }
.js .faq-a.is-open { display: block; }

/* ---------------------------------------------------------- 17. Kontakt */
.kontakt { position: relative; background: var(--graphit); color: var(--offweiss); overflow: hidden; }
.kontakt-bild { position: absolute; inset: 0; z-index: 0; }
.kontakt-bild picture { display: block; height: 100%; }
.kontakt-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.kontakt-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 17, 23, .82) 0%, rgba(13, 17, 23, .94) 55%, var(--graphit) 100%);
}
.kontakt > .container { position: relative; z-index: 1; }

.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 3.5rem; } }

.contact-form { background: var(--offweiss); color: var(--graphit); border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2.25rem); }
.contact-form a { color: var(--blau); }
.contact-form :focus-visible { outline-color: var(--blau); }

.field { margin-bottom: 1.35rem; }
.field label { display: block; font-weight: 600; font-size: .8125rem; letter-spacing: .04em; margin-bottom: .45rem; }
.req { color: var(--kupfer-text); }
.opt { font-weight: 400; color: var(--grau); letter-spacing: 0; }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--graphit);
  padding: .75rem .9rem; min-height: 46px;
  background: var(--weiss); border: 1px solid #98A0AC; border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 9.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blau); }
.field [aria-invalid="true"] { border-color: var(--rot); border-width: 2px; }

.field-hint { font-size: .8125rem; color: var(--grau); margin: .4rem 0 0; }
.field-error { margin: .45rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--rot); display: none; }
.field-error.is-visible { display: block; }
.field-error.is-visible::before { content: "Fehler: "; }

.field--check .checkbox { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-weight: 400; font-size: .875rem; letter-spacing: 0; cursor: pointer; }
.field--check input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: .3rem; accent-color: var(--blau); }

/* Honeypot: fuer Menschen und Screenreader nicht erreichbar, fuer Bots sichtbar */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-status { padding: 1rem 1.15rem; border-radius: var(--radius); margin: 0 0 1.5rem; font-weight: 600; font-size: .9375rem; max-width: none; }
.form-status--ok { background: #E3EFE3; color: #1F4A1C; border-left: 3px solid #3F7A33; }
.form-status--err { background: #F6E3E1; color: #7A1E14; border-left: 3px solid var(--rot); }

.contact-side h3 { margin-bottom: 1.35rem; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hell-auf-ink); }
.contact-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.15rem; }
.contact-list li { display: grid; gap: .2rem; font-size: .9375rem; }
.contact-list .label { font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hell-auf-ink); }
.contact-promise { font-size: .9375rem; color: var(--hell-auf-ink); border-top: 1px solid var(--linie-dunkel); padding-top: 1.35rem; }

/* --------------------------------------- 18. Rechtstexte und Danke-Seite */
.nav-links--simple ul, .nav-links--simple { display: block; }
.nav-links--simple { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1060px) { .nav-links--simple { display: block; position: static; box-shadow: none; border: 0; background: none; } }
.nav-links--simple li { list-style: none; margin: 0; }
.nav-links--simple a { display: inline-block; padding: .5rem .3rem; color: var(--graphit); font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
.nav-links--simple a:hover { color: var(--blau); }

.legal { padding-block: var(--space-section); }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1.75rem; }
.legal h2 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; margin-top: 2.5rem; max-width: none; }
.legal p, .legal li { color: var(--grau); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .5rem; }

.danke { padding-block: clamp(4rem, 10vw, 7rem); }
.danke-box { max-width: 46rem; background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--blau); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }

/* ----------------------------------------------------------- 19. Footer */
.site-footer { background: var(--graphit); color: var(--hell-auf-ink); font-size: .9375rem; }
.site-footer a { color: var(--hell-auf-ink); text-decoration: none; }
.site-footer a:hover { color: var(--weiss); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--offweiss); }

.footer-claim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  padding-block: 2.5rem; border-bottom: 1px solid var(--linie-dunkel);
}
.footer-claim .brand-mark { width: 2.5rem; height: 2.5rem; color: var(--offweiss); }
.footer-claim-text { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 400; color: var(--offweiss); max-width: none; line-height: 1.35; }
.footer-claim-text .akzent { color: var(--blau-hell); }

.footer-grid { display: grid; gap: 2.5rem; padding-block: 3rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3.5rem; } }
.footer-head { font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--offweiss); margin-bottom: 1.1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--linie-dunkel); font-size: .8125rem; }
.footer-legal p { margin: 0; max-width: none; }
.footer-nav { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }

/* -------------------------------------------- 20. Mobiler Termin-Balken */
.mobil-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; padding: .6rem clamp(1rem, 4vw, 2.25rem);
  background: rgba(246, 247, 249, .97);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -2px 16px rgba(13, 17, 23, .1);
}
.mobil-cta .btn { width: 100%; }
@media (max-width: 700px) {
  .js .mobil-cta.is-visible { display: block; }
  .js body.hat-mobil-cta { padding-bottom: 4.75rem; }
}

/* -------------------------------------------------- 21. Bewegung/Motion */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

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