/* =========================================================================
   RÖMER — Website
   Shared stylesheet. Base appearance is authored inline on the elements
   (1:1 aus dem Design-Handoff übernommen); this file adds the self-hosted
   font, design tokens, keyframes, interaction states (hover/focus/active),
   the live-automation widget states and the responsive rules.
   ========================================================================= */

/* ---- Self-hosted Manrope (variable, 300–800). DSGVO: kein Google-CDN. ---- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.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;
}

/* ---- Design tokens (RÖMER Design System) ---- */
:root {
  --font-sans: 'Manrope', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Accent */
  --accent: #14B8A6;
  --accent-hover: #0E9384;
  --text-on-accent: #111111;

  /* Semantic aliases from the design system (kept for parity) */
  --color-white: #FFFFFF;
  --color-charcoal: #111111;
  --color-teal: #14B8A6;
  --color-teal-hover: #0E9384;
  --color-teal-soft: #E6F7F4;

  /* Site surfaces / ink (aus dem Referenz-Prototyp) */
  --rmr-ink: 20, 20, 19;
  --rmr-surf: 255, 255, 255;
  --rmr-page: linear-gradient(150deg, #EEEFF2 0%, #E2E4E8 30%, #D3D6DB 52%, #E0E3E7 74%, #EDEEF1 100%);
  --rmr-page-flat: #E0E2E6;
  --rmr-text: #141413;
  --rmr-card: #FFFFFF;
  --rmr-card-2: #FFFFFF;
  --rmr-card-deep: #D0D3D7;
  --rmr-logo-bg: #111111;
  --rmr-logo-fg: #FFFFFF;
  --rmr-portrait-a: #E9EBEE;
  --rmr-portrait-b: #DADDE1;
  --rmr-portrait-c: #C6CACE;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--rmr-page-flat);
  background-image: var(--rmr-page);
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden;
  transition: background 300ms ease;
}

/* ---- Seiten-Wrapper: Alu-Platte (viewport-fixiert) + dezentes 72px-Grid (scrollt mit) ---- */
.rmr-root {
  background-color: var(--rmr-page-flat);
  background-image:
    linear-gradient(rgba(var(--rmr-ink),0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rmr-ink),0.025) 1px, transparent 1px),
    var(--rmr-page);
  background-size: 72px 72px, 72px 72px, cover;
  background-position: 0 0, 0 0, center;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}

/* ---- Keyframes ---- */
@keyframes rmr-pulse { 0% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4); } 70% { box-shadow: 0 0 0 7px rgba(20,184,166,0); } 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); } }
@keyframes rmr-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rmr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmr-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rmr-pop-a { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes rmr-pop-b { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes rmr-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes rmr-aurora-a { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(44px, 26px) scale(1.12); opacity: 1; } }
@keyframes rmr-aurora-b { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; } 50% { transform: translate(-36px, -20px) scale(1.09); opacity: 1; } }
@keyframes rmr-draw { to { stroke-dashoffset: 0; } }
@keyframes rmr-sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }

/* ---- Reduced motion: springt auf Endzustand, keine Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: 0.001s !important;
  }
}

/* ---- Tastatur-Fokus (Accessibility) ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.rmr-field:focus-visible {
  outline: none;
}

/* Skip-Link */
.rmr-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2147483600;
  background: var(--accent);
  color: var(--text-on-accent);
  font: 600 14px/1 var(--font-sans);
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: top 160ms ease;
}
.rmr-skip:focus { top: 16px; }

/* =========================================================================
   Interaktions-Zustände (ersetzen style-hover / style-focus / style-active)
   Basis-Styles stehen inline am Element -> hier mit !important überschrieben.
   ========================================================================= */

/* Nav-Links (Desktop + Footer) */
.rmr-navlink:hover { color: var(--rmr-text) !important; }
.rmr-footlink:hover { color: var(--rmr-text) !important; }
.rmr-toplink:hover { color: var(--rmr-text) !important; }

/* Nav-CTA (Teal-Glas) */
.rmr-btn-navcta:hover {
  background: linear-gradient(165deg, rgba(14,147,132,0.97) 0%, rgba(14,147,132,0.87) 48%, rgba(14,147,132,0.94) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,0.6), inset 0 -5px 10px -7px rgba(255,255,255,0.45), 0 8px 24px rgba(20,184,166,0.32), 0 2px 5px rgba(17,17,17,0.08) !important;
}
.rmr-btn-navcta:active { transform: scale(0.985) !important; }

/* Header-CTA (nur mobil sichtbar) */
.rmr-header-cta { transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.rmr-header-cta:active { transform: scale(0.97); }

/* Hero Primär-CTA (Teal-Glas) */
.rmr-btn-primary:hover {
  background: linear-gradient(165deg, rgba(14,147,132,0.97) 0%, rgba(14,147,132,0.87) 48%, rgba(14,147,132,0.94) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -6px 12px -8px rgba(255,255,255,0.45), 0 14px 34px rgba(20,184,166,0.38), 0 3px 8px rgba(17,17,17,0.1) !important;
}
.rmr-btn-primary:active { transform: scale(0.985) !important; }

/* Hero Sekundär-CTA (Klarglas, ohne Border) */
.rmr-btn-secondary:hover {
  background: linear-gradient(165deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.18) 48%, rgba(255,255,255,0.26) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.7), inset 0 -6px 12px -8px rgba(255,255,255,0.5), 0 14px 30px rgba(17,17,17,0.16), 0 3px 8px rgba(17,17,17,0.09) !important;
}
.rmr-btn-secondary:active { transform: scale(0.985) !important; }

/* Leistungs-Karten */
.rmr-card:hover {
  border-color: rgba(20,184,166,0.35) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(17,17,17,0.10) !important;
}

/* FAQ-Zeile */
.rmr-faq-toggle:hover { background: rgba(var(--rmr-ink),0.025) !important; }

/* Kontakt-Formularfelder */
.rmr-field:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.22) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Kontakt-Submit */
.rmr-btn-submit:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(20,184,166,0.3) !important;
}
.rmr-btn-submit:active { transform: scale(0.99) !important; }

/* Social-Icons */
.rmr-social:hover {
  color: var(--rmr-text) !important;
  border-color: rgba(var(--rmr-ink),0.4) !important;
  transform: translateY(-2px) !important;
}

/* Nach-oben-Button */
.rmr-totop:hover {
  border-color: rgba(var(--rmr-ink),0.4) !important;
  background: rgba(255,255,255,0.95) !important;
  transform: translateY(-2px) !important;
}
.rmr-totop:active { transform: scale(0.94) !important; }

/* Rechtsseiten: Zurück-Link, TOC-Link, Mail-Link */
.rmr-backlink:hover { color: var(--rmr-text) !important; }
.rmr-toc-link:hover { color: var(--accent) !important; }
.rmr-maillink:hover { text-decoration: underline !important; }

/* =========================================================================
   Live-Automations-Widget ("Im Hintergrund")
   Zustände werden per JS umgeschaltet (.is-wait / .is-active / .is-done).
   ========================================================================= */
.rmr-auto-node {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 1px; background: transparent;
  border: 1.5px dashed rgba(var(--rmr-ink),0.28); box-shadow: none;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.rmr-auto-step.is-active .rmr-auto-node { border: 1.5px solid var(--accent); }
.rmr-auto-step.is-done .rmr-auto-node {
  background: var(--accent); border: 1px solid var(--accent);
  box-shadow: 0 0 14px rgba(20,184,166,0.25);
}

.rmr-auto-node .rmr-auto-check { display: none; animation: rmr-pop-a 280ms cubic-bezier(0.2,0.7,0.3,1) both; }
.rmr-auto-step.is-done .rmr-auto-node .rmr-auto-check { display: flex; }
/* Erster Schritt zeigt im Erledigt-Zustand keinen Haken (1:1 Referenz) */
.rmr-auto-step.is-first.is-done .rmr-auto-node .rmr-auto-check { display: none; }

.rmr-auto-node .rmr-auto-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: rmr-pulse 1.8s ease infinite; display: none;
}
.rmr-auto-step.is-active .rmr-auto-node .rmr-auto-dot { display: block; }
.rmr-auto-step.is-done .rmr-auto-node .rmr-auto-dot { display: none; }

.rmr-auto-line {
  width: 1.5px; flex: 1; min-height: 12px; margin: 4px 0; border-radius: 1px;
  background: rgba(var(--rmr-ink),0.09); transition: background 300ms ease;
}
.rmr-auto-step.is-done .rmr-auto-line { background: rgba(20,184,166,0.45); }

.rmr-auto-label {
  font-size: 14.5px; font-weight: 500; line-height: 1.4;
  color: rgba(var(--rmr-ink),0.38); transition: color 220ms ease;
}
.rmr-auto-step.is-active .rmr-auto-label { font-weight: 600; color: var(--rmr-text); }
.rmr-auto-step.is-done .rmr-auto-label { font-weight: 500; color: rgba(var(--rmr-ink),0.78); }

.rmr-auto-status {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; white-space: nowrap;
  color: rgba(var(--rmr-ink),0.25); transition: color 220ms ease;
}
.rmr-auto-step.is-active .rmr-auto-status { color: var(--accent); }
.rmr-auto-step.is-done .rmr-auto-status { color: rgba(var(--rmr-ink),0.35); }

.rmr-auto-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; border-radius: 1px;
  background: var(--accent); box-shadow: 0 0 12px rgba(20,184,166,0.5);
  width: 0%; transition: width 500ms cubic-bezier(0.4,0,0.2,1);
}

.rmr-auto-summary { display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 300ms ease; }
.rmr-auto-summary.is-visible { opacity: 1; }
.rmr-auto-summary-icon {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--rmr-ink),0.08); transition: background 220ms ease;
}
.rmr-auto-summary.is-done .rmr-auto-summary-icon { background: var(--accent); }
.rmr-auto-summary-icon .rmr-auto-check { display: none; animation: rmr-pop-b 300ms cubic-bezier(0.2,0.7,0.3,1) both; }
.rmr-auto-summary.is-done .rmr-auto-summary-icon .rmr-auto-check { display: flex; }
.rmr-auto-summary-title {
  font-size: 13.5px; font-weight: 600; color: rgba(var(--rmr-ink),0.5); transition: color 220ms ease;
}
.rmr-auto-summary.is-done .rmr-auto-summary-title { color: rgba(var(--rmr-ink),0.85); }

/* Hero-Ticker Pop-Animation (per JS neu getriggert) */
.rmr-ticker-title {
  font-size: 12.5px; font-weight: 600; color: rgba(var(--rmr-ink),0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rmr-ticker-title.pop-a { animation: rmr-pop-a 380ms cubic-bezier(0.2,0.7,0.3,1) both; }
.rmr-ticker-title.pop-b { animation: rmr-pop-b 380ms cubic-bezier(0.2,0.7,0.3,1) both; }

/* =========================================================================
   Ablauf-Sektion — gestaffelte Enthüllung (IntersectionObserver -> .is-in)
   ========================================================================= */
.rmr-ablauf-fill {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--accent); border-radius: 2px;
  transform-origin: left; transform: scaleX(0);
  transition: transform 560ms cubic-bezier(0.4,0,0.2,1);
}
.rmr-ablauf-arrow {
  position: absolute; top: -7px; right: -21px; display: flex; color: var(--accent); z-index: 1;
  opacity: 0; transform: translateX(-5px);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22,1,0.36,1);
}
.rmr-ablauf-content {
  padding-top: 22px; opacity: 0; transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.rmr-ablauf.is-in .rmr-ablauf-fill { transform: scaleX(1); }
.rmr-ablauf.is-in .rmr-ablauf-arrow { opacity: 1; transform: translateX(0); }
.rmr-ablauf.is-in .rmr-ablauf-content { opacity: 1; transform: translateY(0); }
/* gestaffelte Verzögerung je Schritt (0..3) */
.rmr-ablauf-step:nth-child(1) .rmr-ablauf-fill { transition-delay: 0ms; }
.rmr-ablauf-step:nth-child(1) .rmr-ablauf-content { transition-delay: 140ms; }
.rmr-ablauf-step:nth-child(1) .rmr-ablauf-arrow { transition-delay: 360ms; }
.rmr-ablauf-step:nth-child(2) .rmr-ablauf-fill { transition-delay: 240ms; }
.rmr-ablauf-step:nth-child(2) .rmr-ablauf-content { transition-delay: 380ms; }
.rmr-ablauf-step:nth-child(2) .rmr-ablauf-arrow { transition-delay: 600ms; }
.rmr-ablauf-step:nth-child(3) .rmr-ablauf-fill { transition-delay: 480ms; }
.rmr-ablauf-step:nth-child(3) .rmr-ablauf-content { transition-delay: 620ms; }
.rmr-ablauf-step:nth-child(3) .rmr-ablauf-arrow { transition-delay: 840ms; }
.rmr-ablauf-step:nth-child(4) .rmr-ablauf-fill { transition-delay: 720ms; }
.rmr-ablauf-step:nth-child(4) .rmr-ablauf-content { transition-delay: 860ms; }
.rmr-ablauf-step:nth-child(4) .rmr-ablauf-arrow { transition-delay: 1080ms; }
@media (prefers-reduced-motion: reduce) {
  .rmr-ablauf-step .rmr-ablauf-fill,
  .rmr-ablauf-step .rmr-ablauf-content,
  .rmr-ablauf-step .rmr-ablauf-arrow { transition-delay: 0ms !important; }
}

/* =========================================================================
   FAQ-Akkordeon — Zustand per JS (.is-open), Höhe animiert via grid-rows
   ========================================================================= */
.rmr-faq-q {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4;
  color: rgba(var(--rmr-ink),0.75); transition: color 180ms ease;
}
.rmr-faq-item.is-open .rmr-faq-q { color: var(--rmr-text); }
.rmr-faq-chev {
  display: flex; flex: none; color: rgba(var(--rmr-ink),0.45);
  transform: rotate(0deg);
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1), color 180ms ease;
}
.rmr-faq-item.is-open .rmr-faq-chev { color: rgba(var(--rmr-ink),0.8); transform: rotate(180deg); }
.rmr-faq-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(0.4,0,0.2,1);
}
.rmr-faq-item.is-open .rmr-faq-wrap { grid-template-rows: 1fr; }

/* Kontakt-Platzhalterfarbe */
#kontakt input::placeholder, #kontakt textarea::placeholder { color: rgba(255,255,255,0.34); }

/* =========================================================================
   Mobiles Menü — Frosted Glass (liegt DOM-seitig AUSSERHALB des <header>)
   ========================================================================= */
.rmr-mobile-menu {
  position: fixed; top: 62px; left: 0; right: 0; z-index: 39; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  max-height: 0; opacity: 0;
  border-bottom: 1px solid transparent; box-shadow: none;
  transition: max-height 320ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}
.rmr-mobile-menu.open {
  max-height: 400px; opacity: 1;
  border-bottom: 1px solid rgba(var(--rmr-ink),0.1);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -6px 12px -8px rgba(255,255,255,0.45), 0 20px 40px rgba(17,17,17,0.12), 0 2px 6px rgba(17,17,17,0.06);
}

/* =========================================================================
   Über-mich-Portrait — eigenes Foto, runder Ausschnitt (Desktop + Mobile)
   ========================================================================= */
.rmr-about-portrait {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(85% 68% at 55% 26%, var(--rmr-portrait-a) 0%, var(--rmr-portrait-b) 58%, var(--rmr-portrait-c) 100%);
  border: 1px solid rgba(var(--rmr-ink),0.09);
  box-shadow: 0 22px 46px rgba(17,17,17,0.11), 0 4px 12px rgba(17,17,17,0.05);
}
.rmr-about-portrait img {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  height: 175%;
  width: auto;
  display: block;
  filter: drop-shadow(0 16px 30px rgba(17,17,17,0.14));
}

/* =========================================================================
   Responsive — Startseite
   ========================================================================= */
@media (min-width: 901px) { .rmr-mobile-menu { display: none !important; } .rmr-header-cta { display: none !important; } }
@media (max-width: 900px) {
  .rmr-desktop-nav { display: none !important; }
  .rmr-burger { display: inline-flex !important; }
  .rmr-header-cta { display: inline-flex !important; }
  header > div:first-child { padding-left: 20px !important; padding-right: 20px !important; height: 62px !important; }
  #automatisierung, #problem, #leistungen, #ablauf, #ueber-mich, #warum, #faq, #kontakt { scroll-margin-top: 62px !important; }
  .rmr-hero-inner { padding: 68px 24px 0 !important; }
  .rmr-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .rmr-hero-grid > div { padding-left: 0 !important; padding-right: 0 !important; }
  .rmr-hero-img { width: 100%; max-width: 400px; margin: 0 auto; }
  .rmr-hero-img > div:last-child { animation: rmr-float 5s ease-in-out infinite alternate; }
  .rmr-trust { margin-left: 0 !important; margin-right: 0 !important; gap: 16px 36px !important; }
  #automatisierung, #problem, #leistungen, #ablauf, #ueber-mich, #warum, #faq { padding-left: 24px !important; padding-right: 24px !important; padding-top: 92px !important; }
  #problem > div:first-child { grid-template-columns: 1fr !important; gap: 32px !important; }
  #problem > div:last-child { margin-top: 72px !important; }
  .rmr-leistungen-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  #leistungen > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
  #ablauf > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 28px !important; }
  .rmr-ablauf-arrow { display: none !important; }
  #ueber-mich > div:first-child { grid-template-columns: 1fr !important; gap: 40px !important; }
  #ueber-mich > div:first-child > div:first-child { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  #warum > div:last-child { grid-template-columns: 1fr !important; }
  #warum > div:last-child > div { padding: 30px 26px !important; }
  #warum > div:last-child > div:last-child { border-left: none !important; border-top: 1px solid rgba(var(--rmr-ink),0.08) !important; }
  #faq > div:first-child { grid-template-columns: 1fr !important; gap: 32px !important; }
  #kontakt { margin-top: 96px !important; padding-top: 88px !important; padding-bottom: 88px !important; }
  #kontakt > div { padding-left: 24px !important; padding-right: 24px !important; }
  .rmr-footer-row { padding-left: 24px !important; padding-right: 24px !important; }
  /* Workflow-Zeilen stapeln: Mono-Status unter das Label statt rechts daneben */
  .rmr-auto-content { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; }
  .rmr-auto-step:not(:last-of-type) .rmr-auto-content { padding-bottom: 18px !important; }
  .rmr-auto-label { font-size: 14px !important; }
  .rmr-auto-status { font-size: 10.5px !important; }
}
@media (max-width: 560px) {
  .rmr-contact-2col { grid-template-columns: 1fr !important; }
  .rmr-hero-inner { padding-top: 40px !important; }
  .rmr-hero-grid { gap: 26px !important; }
  .rmr-hero-img { max-width: 330px; }
  .rmr-hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rmr-hero-grid > div:first-child > span:first-child { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-size: 11.5px !important; letter-spacing: 0.1em !important; }
  .rmr-hero-grid h1 { font-size: 42px !important; margin-top: 16px !important; }
  .rmr-hero-grid > div:first-child > p { margin-left: auto !important; margin-right: auto !important; max-width: 420px; }
  .rmr-hero-cta { flex-direction: column !important; width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }
  .rmr-hero-cta > a { width: 100%; text-align: center; box-sizing: border-box; }
  .rmr-trust { flex-direction: column !important; align-items: center !important; gap: 12px !important; margin-top: 40px !important; padding-bottom: 32px !important; }
  #automatisierung, #problem, #leistungen, #ablauf, #ueber-mich, #warum, #faq { padding-top: 76px !important; }
  .rmr-wf-head { padding: 14px 18px !important; }
  .rmr-wf-head > span:first-child { font-size: 10.5px !important; letter-spacing: 0.08em !important; }
  .rmr-wf-body { padding: 20px 18px 16px !important; }
  #leistungen > div:last-child { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 36px !important; }
  .rmr-l-card { display: grid !important; grid-template-columns: auto 1fr !important; gap: 2px 14px !important; padding: 15px 16px !important; align-items: start !important; }
  .rmr-l-card > svg { grid-row: 1 / span 2; margin-top: 3px; }
  .rmr-l-card h3 { margin: 0 !important; font-size: 15px !important; }
  .rmr-l-card p { margin: 2px 0 0 !important; font-size: 13px !important; }
  #ablauf > div:last-child { grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 44px !important; position: relative; }
  #ablauf > div:last-child::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 56px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(20,184,166,0.55) 0%, rgba(20,184,166,0.22) 72%, rgba(var(--rmr-ink),0.08) 100%); }
  .rmr-ablauf-step { padding: 0 0 38px 34px; }
  .rmr-ablauf-step:last-child { padding-bottom: 0; }
  .rmr-ablauf-step::before { content: ""; position: absolute; left: 3.5px; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(20,184,166,0.16); }
  .rmr-ablauf-track { display: none !important; }
  #warum > div:last-child > div { padding: 26px 22px !important; }
  .rmr-faq-a { padding: 0 18px 22px 14px !important; }
  .rmr-contact-form { padding: 24px 18px 22px !important; }
  .rmr-footer-row { flex-direction: column !important; align-items: center !important; text-align: center; gap: 26px !important; }
  .rmr-footer-row > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .rmr-footer-row > div { justify-content: center; }
  .rmr-footer-row nav { justify-content: center; gap: 12px 20px !important; }
  .rmr-footer-row nav a { white-space: nowrap; }
}

/* =========================================================================
   Responsive — Rechtsseiten (page-legal)
   ========================================================================= */
@media (max-width: 720px) {
  .page-legal main { padding-left: 24px !important; padding-right: 24px !important; padding-top: 56px !important; }
  .page-legal header > div { padding-left: 20px !important; padding-right: 20px !important; }
  .page-legal footer > div { padding-left: 24px !important; padding-right: 24px !important; }
}