/* ============================================================================
   Bauteil: RAVARO-Schluss — v1.2 · Stand 2026-10-12
   Der RAVARO-Kontaktteil am Ende jeder Showcase-Seite. Optik 1:1 aus Showcase D2 PULPA v0.22
   (kipp.css Abschnitt 7 + ravaro-teil.css v1.3), Farben und Schriften nach DESIGN.md.
   Alles ist unter .rs gekapselt: eigene Klassen mit Präfix rs-, eigene Variablen --rs-*, keine Regel auf
   html, body oder :root. Die Seite muss nichts zurücksetzen und kann nichts versehentlich überschreiben.
   Schriften: Space Grotesk (Titel), Inter (Text), JetBrains Mono (Mikrolabels). Hat die Seite sie nicht schon
   geladen, zusätzlich schrift.css einbinden.
   Stellschraube für die Seite: --rs-oben (Abstand über der Trennlinie, Standard wie bei PULPA).
   ========================================================================== */

.rs {
  --rs-grund: #0E0F12;
  --rs-flaeche: #17181B;
  --rs-linie: rgba(255, 255, 255, 0.14);
  --rs-text: #F8F8F8;
  --rs-leise: #BBBEC3;
  --rs-leise-hell: #C9CCD1;
  --rs-orange: #FF7716;
  --rs-auf-orange: #0A0B0D;
  --rs-schrift-titel: "Space Grotesk", system-ui, sans-serif;
  --rs-schrift-text: "Inter", system-ui, sans-serif;
  --rs-schrift-mono: "JetBrains Mono", ui-monospace, monospace;
  --rs-rand: clamp(16px, 4.4vw, 112px);
  --rs-oben: clamp(48px, 4.4vw, 112px);
  --rs-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rs-dauer: 200ms;
  --rs-dauer-sofort: 120ms;
  /* feines Raster: der Grund ist nie flach (DESIGN.md 1) */
  --rs-raster:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px;

  display: block; padding-top: var(--rs-oben);
  background: var(--rs-raster), var(--rs-grund); color: var(--rs-text);
  font-family: var(--rs-schrift-text); font-size: 17px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs a { color: inherit; }
.rs[hidden], .rs [hidden] { display: none !important; }

/* ---- Mikrolabel, Überschriften ---- */
.rs-mikro {
  margin: 0; font-family: var(--rs-schrift-mono); font-weight: 500; font-size: clamp(16px, 0.85vw, 19px);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rs-leise);
}
.rs-titel {
  margin: 0; font-family: var(--rs-schrift-titel); font-weight: 600;
  font-size: clamp(36px, 4.6vw, 124px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  overflow-wrap: break-word; color: var(--rs-text);
}
.rs-titel em { font-style: normal; color: var(--rs-orange); }
.rs-zwischentitel {
  margin: 0; font-family: var(--rs-schrift-titel); font-weight: 600; font-size: clamp(22px, 1.7vw, 40px); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--rs-text);
}

/* ---- Kontakt: links Beleg, rechts Termin und Formular ---- */
.rs-kontakt {
  margin: 0 var(--rs-rand); padding: clamp(40px, 3.6vw, 88px) 0 clamp(56px, 6vw, 140px);
  border-top: 1px solid var(--rs-linie);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 140px); align-items: start;
  scroll-margin-top: 24px;
}
.rs-links, .rs-rechts { display: flex; flex-direction: column; min-width: 0; }
.rs-lohn { margin: clamp(16px, 1.6vw, 32px) 0 0; font-size: clamp(19px, 1.5vw, 36px); line-height: 1.35; }
.rs-lohn b { font-weight: 700; }
.rs-ich {
  margin: clamp(18px, 1.6vw, 36px) 0 0; max-width: 34ch;
  font-family: var(--rs-schrift-titel); font-weight: 500; font-size: clamp(19px, 1.35vw, 32px); line-height: 1.35;
}

.rs-beleg { margin-top: clamp(32px, 3vw, 72px); padding-top: clamp(24px, 2.2vw, 52px); border-top: 1px solid var(--rs-linie); }
.rs-kunden-titel { margin: 0; font-size: clamp(16px, 0.98vw, 22px); line-height: 1.5; color: var(--rs-leise-hell); }
.rs-kunden {
  list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0;
  font-family: var(--rs-schrift-titel); font-weight: 600; font-size: clamp(20px, 1.5vw, 36px); line-height: 1.3;
  letter-spacing: -0.005em; color: var(--rs-text);
}
.rs-kunden li { white-space: nowrap; }
.rs-kunden li:not(:last-child)::after { content: "·"; margin: 0 0.45em; color: #8C9096; font-weight: 400; }

.rs-beispiele-titel { margin-top: clamp(28px, 2.6vw, 60px); }
.rs-beispiele { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 28px); }
.rs-beispiele > li { display: flex; }
.rs-beispiel {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(8px, 0.6vw, 14px) clamp(8px, 0.6vw, 14px) clamp(14px, 1vw, 22px);
  background: var(--rs-flaeche); border: 1px solid var(--rs-linie); border-radius: 0.5rem;
  color: var(--rs-text); text-decoration: none;
  transition: border-color var(--rs-dauer) var(--rs-ease), transform var(--rs-dauer) var(--rs-ease);
}
.rs-beispiel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.3rem; margin-bottom: 8px; background: var(--rs-grund); }
.rs-beispiel-name { padding: 0 clamp(4px, 0.4vw, 10px); padding-right: 34px; font-family: var(--rs-schrift-titel); font-weight: 600; font-size: clamp(18px, 1.2vw, 28px); line-height: 1.2; }
.rs-beispiel-was { padding: 0 clamp(4px, 0.4vw, 10px); font-size: clamp(16px, 0.95vw, 21px); line-height: 1.45; color: var(--rs-leise-hell); }
.rs-beispiel-pfeil {
  position: absolute; right: clamp(16px, 1.2vw, 26px); top: clamp(16px, 1.2vw, 26px); width: 30px; height: 30px; padding: 5px;
  border-radius: 50%; background: var(--rs-grund); border: 1px solid var(--rs-linie); color: var(--rs-text);
}
.rs-beispiel:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .rs-beispiel:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); } }
.rs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rs-direkt { margin-top: clamp(32px, 3vw, 72px); padding-top: clamp(24px, 2.2vw, 52px); border-top: 1px solid var(--rs-linie); }
.rs-direkt-wege { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2vw, 48px); }
.rs-direkt-wege a {
  display: inline-flex; align-items: center; min-height: 48px; color: var(--rs-text);
  font-size: clamp(18px, 1.2vw, 28px); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px; text-underline-offset: 6px; border-radius: 4px;
}
.rs-direkt-wege a:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .rs-direkt-wege a:hover { text-decoration-color: var(--rs-orange); } }

/* ---- Drei Schritte und der EINE orange Knopf ---- */
.rs-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rs-schritte li {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(14px, 1.4vw, 32px); align-items: baseline;
  padding: clamp(14px, 1.2vw, 26px) 0; border-top: 1px solid var(--rs-linie);
  font-size: clamp(16px, 1.1vw, 26px); line-height: 1.5;
}
.rs-schritte .rs-mikro { white-space: nowrap; }
.rs-schritte li:last-child { border-bottom: 1px solid var(--rs-linie); }

.rs-termin-block { margin-top: clamp(22px, 3.2svh, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rs-termin {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 26px;
  border-radius: 0.5rem; background: var(--rs-orange); color: var(--rs-auf-orange) !important; text-decoration: none;
  font: 600 clamp(17px, 1.15vw, 26px)/1.15 var(--rs-schrift-titel); letter-spacing: -0.005em;
  transition: transform var(--rs-dauer-sofort) var(--rs-ease), background-color var(--rs-dauer) var(--rs-ease);
}
.rs-termin svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--rs-dauer) var(--rs-ease); }
.rs-termin:active { transform: scale(0.97); }
.rs-termin:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rs-termin:hover { background: #FF8A3A; }
  .rs-termin:hover svg { transform: translateX(3px); }
}
.rs-termin-zeile {
  margin: 0; max-width: 56ch; font-family: var(--rs-schrift-text); font-size: clamp(16px, 0.95vw, 20px); line-height: 1.5; color: var(--rs-leise);
}
.rs-termin-zeile a { color: var(--rs-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.rs-termin-zeile a:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; border-radius: 3px; }

/* ---- Zweitweg: Formular (Bauteil kontaktformular, hier nur in RAVARO-Dunkel gekleidet) ---- */
.rs-schreiben {
  margin-top: clamp(40px, 3.6vw, 88px); padding-top: clamp(28px, 2.6vw, 60px); border-top: 1px solid var(--rs-linie);
}
.rs-schreiben .rs-zwischentitel { margin-bottom: clamp(14px, 1.2vw, 28px); }
.rs-formular {
  padding: clamp(20px, 2vw, 44px); background: var(--rs-flaeche); border: 1px solid var(--rs-linie); border-radius: 0.5rem;
  font-size: clamp(16px, 0.95vw, 21px);
}
/* Variablen MÜSSEN auf [data-kontaktformular] stehen, sonst gewinnt das Bauteil (LIESMICH kontaktformular, Lehre 2) */
[data-kontaktformular].rs-formular {
  --kf-text: #F8F8F8;
  --kf-leise: #BBBEC3;
  --kf-grund: #0E0F12;
  --kf-linie: rgba(255, 255, 255, 0.34);
  --kf-linie-aktiv: #F8F8F8;
  --kf-akzent: #FF7716;
  --kf-akzent-text: #0A0B0D;
  --kf-fehler: #FF5A61;
  --kf-fehler-hell: #2A1517;
  --kf-ok: #5FD08A;
  --kf-ok-hell: #13241A;
  --kf-radius: 0.5rem;
  --kf-dauer: 200ms;
}
[data-kontaktformular].rs-formular .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
[data-kontaktformular].rs-formular label { font-size: clamp(16px, 0.9vw, 19px); }
.rs-frei { font-weight: 400; color: var(--rs-leise); }
[data-kontaktformular].rs-formular .haken { font-size: clamp(16px, 0.8vw, 18px); line-height: 1.6; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Link im Haken-Text: Tippfläche 46 px hoch, ohne die Zeile zu verschieben */
[data-kontaktformular].rs-formular .haken a { padding: 14px 0; position: relative; }
/* Absenden ist Zweitweg: NICHT orange (nur EIN oranger Knopf je Bildschirm) */
[data-kontaktformular].rs-formular button[type=submit] {
  min-height: 52px; padding: 14px 28px; font-size: clamp(16px, 1vw, 22px);
  background: #17181B; color: #F8F8F8; border: 1px solid rgba(255, 255, 255, 0.34);
}
@media (hover: hover) and (pointer: fine) {
  [data-kontaktformular].rs-formular button[type=submit]:not(:disabled):hover { background: #202126; border-color: rgba(255, 255, 255, 0.6); }
}
[data-kontaktformular].rs-formular button[type=submit]:focus-visible { outline: 2px solid #F8F8F8; outline-offset: 3px; }
[data-kontaktformular].rs-formular [data-meldung][data-art=sendet] { background: #0E0F12; border-color: var(--kf-linie); color: var(--kf-leise); }
[data-kontaktformular].rs-formular [data-meldung][data-art=gesendet]::before,
[data-kontaktformular].rs-formular [data-meldung][data-art=fehler]::before { color: #0A0B0D; }
[data-kontaktformular].rs-formular[data-zustand=fehler] button[type=submit] { color: #0A0B0D; background: var(--kf-fehler); border-color: var(--kf-fehler); }
[data-kontaktformular].rs-formular[data-zustand=gesendet] button[type=submit] { background: var(--kf-ok); color: #0A0B0D; border-color: var(--kf-ok); }

/* ---- Fuß ---- */
.rs-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px;
  padding: clamp(40px, 3.4vw, 80px) var(--rs-rand); border-top: 1px solid var(--rs-linie);
  font-size: clamp(16px, 0.9vw, 19px); color: var(--rs-leise);
}
.rs-logo-link { display: inline-block; border-radius: 4px; }
.rs-logo-link:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; }
.rs-logo { display: block; width: clamp(180px, 12vw, 320px); height: auto; margin: clamp(16px, 1.2vw, 30px) 0; }   /* Schutzraum: rundum >= Höhe des R */
.rs-fuss p { margin: 0; }
.rs-version { margin-left: auto !important; font-family: var(--rs-schrift-mono); font-weight: 500; letter-spacing: 0.08em; }
.rs-fuss-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rs-fuss-links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.rs-fuss-links a:hover { color: var(--rs-text); text-decoration: underline; text-underline-offset: 4px; }
.rs-fuss-links a:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; border-radius: 4px; }

/* ---- Handy / Tablett: Spalten lösen sich auf; Folge Überschrift · Termin · Beleg · direkt · schreiben ---- */
@media (max-width: 1000px) {
  .rs-kontakt { grid-template-columns: minmax(0, 1fr); }
  .rs-links, .rs-rechts { display: contents; }
  .rs-text { order: 1; }
  .rs-weg { order: 2; }
  .rs-beleg { order: 3; margin-top: 0; }
  .rs-direkt { order: 4; margin-top: 0; }
  .rs-schreiben { order: 5; margin-top: 0; }
}
@media (max-width: 700px) {
  .rs-termin { width: 100%; justify-content: space-between; }
  .rs-termin-zeile a[href^="tel:"] { display: flex; align-items: center; width: max-content; min-height: 44px; }
  .rs-fuss { gap: 8px 24px; }
  .rs-fuss-links { width: 100%; gap: 0 18px; }
}
@media (max-width: 560px) {
  .rs-beispiele { grid-template-columns: minmax(0, 1fr); }
  .rs-direkt-wege { flex-direction: column; }
}
@media (max-width: 520px) {
  [data-kontaktformular].rs-formular .zwei { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-beispiel, .rs-termin, .rs-termin svg { transition: none !important; }
}
@media (prefers-contrast: more) {
  .rs { --rs-linie: rgba(255, 255, 255, 0.6); }
  [data-kontaktformular].rs-formular { --kf-linie: #F8F8F8; }
  .rs-kunden-titel, .rs-beispiel-was, .rs-frei { color: var(--rs-text); }
}