/* ???????????????????????????????????????????????????
   RTC-SERVICE Design System 2026
   Prim?rfarbe: #C00000  |  Hintergrund: #FFFFFF
   ??????????????????????????????????????????????????? */

/* Schriften liegen lokal unter static/fonts/ (Variable Fonts, latin + latin-ext).
   Frueher stand hier ein @import auf fonts.googleapis.com. Das war der teuerste
   Einzelposten der Seite: der Browser musste erst rtc.css laden und parsen, bevor
   er ueberhaupt vom Font-CSS erfuhr, und danach noch einmal auf die Schriftdateien
   warten - drei Anfragen hintereinander, bevor der erste Text erscheinen durfte.
   Lokal ausgeliefert entfaellt diese Kette; ausserdem geht keine Besucher-IP mehr
   an Google (Datenschutzerklaerung Abschnitt zu Google Fonts entfaellt damit). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.311d352d9323.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: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.d16dfe26bcd7.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin.dcf31ebe1074.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: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin-ext.062c1f2aaf2d.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;
}

/* ── Tokens ─────────────────────────────────────── */
:root {
  --rtc-bg:          #0f0f0f;
  --rtc-bg-2:        #191919;
  --rtc-bg-card:     #1e1e1e;
  --rtc-bg-card-2:   #272727;
  --rtc-border:      rgba(255,255,255,0.1);
  --rtc-border-hot:  rgba(192,0,0,0.5);

  --rtc-primary:      #C00000;
  --rtc-primary-dark: #8B0000;
  /* Das Markenrot bleibt ueberall dort, wo es Flaeche ist (Buttons, Balken,
     Rahmen) - weisse Schrift darauf hat 6,5:1 und ist einwandfrei.
     Als Schriftfarbe auf dem dunklen Hintergrund kommt #C00000 dagegen nur auf
     3,0:1 und war damit der Grund fuer die Kontrast-Abzuege: kleine rote Labels,
     Links und Tags waren schlecht lesbar. Dafuer gibt es jetzt diesen helleren
     Ton mit 5,8:1 auf dem Seitenhintergrund und 4,7:1 auf den Karten.
     Beim Drucken (heller Grund) wird weiter unten auf #C00000 zurueckgestellt. */
  --rtc-primary-text: #FF4D4D;
  --rtc-gold:        #f59e0b;
  --rtc-green:       #22c55e;

  --rtc-text:        #f0f0f0;
  --rtc-text-2:      #a0a0a0;
  /* Frueher #606060. Auf dem dunklen Hintergrund ergab das ein Kontrastverhaeltnis
     von 2,9:1 - die WCAG verlangen 4,5:1, und Google zieht dafuer Punkte ab.
     #909090 kommt auf 6,0:1 gegen den Seitenhintergrund und 4,9:1 gegen die
     Karten, bleibt optisch aber die zurueckhaltende dritte Textstufe. */
  --rtc-text-3:      #909090;

  --rtc-font-head:   'Montserrat', sans-serif;
  --rtc-font-body:   'Open Sans', sans-serif;

  --rtc-radius:      8px;
  --rtc-radius-lg:   14px;
  --rtc-radius-xl:   20px;
  --rtc-shadow:      0 4px 24px rgba(0,0,0,0.5);
  --rtc-shadow-hot:  0 8px 32px rgba(192,0,0,0.3);
  --rtc-transition:  250ms cubic-bezier(0.4,0,0.2,1);
}

/* Auf Papier ist der Hintergrund weiss - dort ist das kraeftige Markenrot die
   besser lesbare Variante (6,5:1 statt 3,3:1). */
@media print {
  :root { --rtc-primary-text: #C00000; }
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
.rw-page section, .rw-page main, .rw-page div { max-width: 100%; }
.rw-page { font-family: var(--rtc-font-body); background: var(--rtc-bg); color: var(--rtc-text); line-height: 1.7; overflow-x: hidden; }
.rw-page h1,.rw-page h2,.rw-page h3,.rw-page h4 { font-family: var(--rtc-font-head); line-height: 1.15; letter-spacing: -0.02em; }
.rw-page a { text-decoration: none; }
.rw-page ul { list-style: none; }
.rw-page img { max-width: 100%; display: block; }
/* <picture> waere sonst selbst das Flex- oder Grid-Kind und wuerde jede
   Ausrichtung veraendern, die fuer das <img> gedacht war. display:contents
   blendet den Wrapper aus dem Layout aus - das Bild bleibt an genau der
   Stelle, an der es vor der WebP-Umstellung stand. */
.rw-page picture { display: contents; }

.rw-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.rw-section { padding: 96px 0; }

/* ── Navbar ─────────────────────────────────────── */
.rw-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 72px; z-index: 9000;
  display: flex; align-items: center;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background var(--rtc-transition), box-shadow var(--rtc-transition);
}
.rw-nav.scrolled {
  background: rgba(8,8,8,0.99);
  box-shadow: 0 4px 24px rgba(0,0,0,0.8);
}
.rw-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px;
}
.rw-nav-brand { display: flex; align-items: center; gap: 12px; }
.rw-nav-logo {
  height: 44px; width: auto; max-width: 120px; object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
}
.rw-nav-name { font-family: var(--rtc-font-head); font-weight: 800; font-size: 1.1rem; color: var(--rtc-text); letter-spacing: -0.01em; }
.rw-nav-name span { color: var(--rtc-primary-text); }
.rw-nav-links { display: flex; align-items: center; gap: 4px; }
.rw-nav-link {
  padding: 8px 16px; border-radius: var(--rtc-radius);
  color: #a0a0a0; font-size: 0.9rem; font-weight: 500; font-family: var(--rtc-font-body);
  transition: color var(--rtc-transition), background var(--rtc-transition);
}
.rw-nav-link:hover { color: var(--rtc-text); background: rgba(255,255,255,0.06); }
.rw-nav-cta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--rtc-radius);
  background: var(--rtc-primary); color: #fff;
  font-weight: 700; font-size: 0.9rem; font-family: var(--rtc-font-head);
  transition: background var(--rtc-transition), box-shadow var(--rtc-transition), transform var(--rtc-transition);
  white-space: nowrap;
}
.rw-nav-cta:hover { background: var(--rtc-primary-dark); box-shadow: var(--rtc-shadow-hot); transform: translateY(-1px); color: #fff; }
.rw-nav-ctas { display:flex; align-items:center; gap:10px; }

/* ── Hero ───────────────────────────────────────── */
.rw-hero {
  min-height: 100vh; padding-top: 72px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--rtc-bg);
}
.rw-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(192,0,0,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,158,11,0.05) 0%, transparent 60%);
}
.rw-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.rw-hero-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto; padding: 80px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.rw-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 99px;
  background: rgba(192,0,0,0.15); border: 1px solid rgba(192,0,0,0.3);
  color: var(--rtc-primary-dark); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 24px; font-family: var(--rtc-font-head);
}
.rw-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rtc-primary);
  box-shadow: 0 0 8px var(--rtc-primary);
  animation: rw-pulse 2s ease-in-out infinite;
}
@keyframes rw-pulse { 0%,100%{opacity:1}50%{opacity:0.3} }

.rw-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 900;
  color: var(--rtc-text); margin-bottom: 20px;
}
.rw-hero h1 em { font-style: normal; color: var(--rtc-primary-text); }
.rw-hero-sub {
  font-size: 1.1rem; color: var(--rtc-text-2); line-height: 1.8;
  margin-bottom: 36px; max-width: 500px;
}
.rw-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.rw-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px;
  background: linear-gradient(135deg, #C00000 0%, #990000 100%);
  color: #fff;
  font-weight: 800; font-size: 0.95rem; font-family: var(--rtc-font-head);
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(192,0,0,0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  border: none; cursor: pointer;
  text-decoration: none;
}
.rw-btn-primary:hover {
  background: linear-gradient(135deg, #990000 0%, #700000 100%);
  box-shadow: 0 6px 24px rgba(192,0,0,0.35);
  transform: translateY(-2px);
  color: #fff;
}
.rw-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(192,0,0,0.2); }
.rw-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  background: transparent;
  color: var(--rtc-primary-text);
  border: 2px solid var(--rtc-primary);
  font-weight: 700; font-size: 0.92rem; font-family: var(--rtc-font-head);
  transition: all 0.2s ease;
  text-decoration: none;
}
.rw-btn-outline:hover { background: rgba(192,0,0,.06); transform: translateY(-1px); color: var(--rtc-primary-text); }
.rw-btn-outline:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: var(--rtc-text); }

.rw-hero-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.rw-trust-item { display: flex; align-items: center; gap: 8px; }
.rw-trust-icon { font-size: 1.2rem; }
.rw-trust-text { font-size: 0.85rem; color: var(--rtc-text-2); font-weight: 500; }

/* Hero Right \2014 Logo Card */
.rw-hero-visual {
  display: flex; justify-content: center; align-items: center;
}
.rw-logo-card {
  background: var(--rtc-bg-card);
  border: 1px solid var(--rtc-border);
  border-radius: var(--rtc-radius-xl);
  padding: 40px;
  text-align: center;
  box-shadow: var(--rtc-shadow);
  position: relative; overflow: hidden;
  max-width: 380px; width: 100%;
}
.rw-logo-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rtc-primary), var(--rtc-gold));
}
.rw-logo-company {
  font-family: var(--rtc-font-head); font-weight: 900; font-size: 1.35rem;
  color: var(--rtc-text); margin-bottom: 6px; letter-spacing: -0.02em;
}
.rw-logo-company span { color: var(--rtc-primary-text); }
.rw-logo-tagline { font-size: 0.85rem; color: var(--rtc-text-2); margin-bottom: 24px; }
.rw-logo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rw-stat-mini {
  background: var(--rtc-bg-2); border-radius: var(--rtc-radius); padding: 12px;
  border: 1px solid var(--rtc-border);
}
.rw-stat-mini-val { font-family: var(--rtc-font-head); font-weight: 900; font-size: 1.5rem; color: var(--rtc-primary-text); }
.rw-stat-mini-lbl { font-size: 0.72rem; color: var(--rtc-text-2); }

/* ── Section Header ─────────────────────────────── */
.rw-section-header { text-align: center; margin-bottom: 56px; }
.rw-section-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 99px;
  background: rgba(192,0,0,0.12); border: 1px solid rgba(192,0,0,0.25);
  color: var(--rtc-primary-dark); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 16px; font-family: var(--rtc-font-head);
}
.rw-section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; color: var(--rtc-text); margin-bottom: 14px; }
.rw-section-title em { font-style: normal; color: var(--rtc-primary-text); }

/* ── About Section ──────────────────────────────── */
.rw-about { background: var(--rtc-bg-2); }
.rw-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.rw-about-badge-wrap { margin-bottom: 16px; }
.rw-about h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; margin-bottom: 16px; }
.rw-about h2 em { font-style: normal; color: var(--rtc-primary-text); }
.rw-about-text { font-size: 0.95rem; color: var(--rtc-text-2); line-height: 1.85; margin-bottom: 16px; }
.rw-about-highlights { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.rw-highlight {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--rtc-bg-card); border: 1px solid var(--rtc-border);
  border-radius: var(--rtc-radius-lg); padding: 16px;
}
.rw-highlight-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.rw-highlight-title { font-family: var(--rtc-font-head); font-weight: 700; font-size: 0.9rem; color: var(--rtc-text); margin-bottom: 2px; }
.rw-highlight-text { font-size: 0.82rem; color: var(--rtc-text-2); }

.rw-about-visual { display: flex; flex-direction: column; gap: 16px; }
.rw-exp-card {
  background: var(--rtc-bg-card); border: 1px solid var(--rtc-border-hot);
  border-radius: var(--rtc-radius-xl); padding: 32px; text-align: center;
  position: relative; overflow: hidden;
}
.rw-exp-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rtc-primary), var(--rtc-gold));
}
.rw-exp-number { font-family: var(--rtc-font-head); font-weight: 900; font-size: 3.5rem; color: var(--rtc-primary-text); line-height: 1; }
.rw-exp-label { font-size: 0.85rem; color: var(--rtc-text-2); margin-top: 4px; margin-bottom: 16px; }
.rw-exp-divider { height: 1px; background: var(--rtc-border); margin: 16px 0; }
.rw-exp-name { font-family: var(--rtc-font-head); font-weight: 800; font-size: 1rem; color: var(--rtc-text); }
.rw-exp-role { font-size: 0.8rem; color: var(--rtc-text-2); margin-top: 4px; }

/* ── Footer ─────────────────────────────────────── */
.rw-footer {
  background: #0d0d0d;
  border-top: 1px solid var(--rtc-border);
  padding: 60px 0 32px;
}
.rw-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.rw-footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rw-footer-brand-name { font-family: var(--rtc-font-head); font-weight: 900; font-size: 1rem; color: var(--rtc-text); }
.rw-footer-brand-name span { color: var(--rtc-primary-text); }
.rw-footer-desc { font-size: 0.85rem; color: var(--rtc-text-2); line-height: 1.7; max-width: 280px; }
.rw-footer-col-title { font-family: var(--rtc-font-head); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rtc-text); margin-bottom: 16px; }
.rw-footer-links { display: flex; flex-direction: column; gap: 8px; }
.rw-footer-link { font-size: 0.875rem; color: var(--rtc-text-2); transition: color var(--rtc-transition), padding-left var(--rtc-transition); }
.rw-footer-link:hover { color: var(--rtc-text); padding-left: 4px; }
.rw-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--rtc-border); gap: 16px; flex-wrap: wrap; }
.rw-footer-copy { font-size: 0.82rem; color: var(--rtc-text-3); }
.rw-footer-legal { display: flex; gap: 20px; }
.rw-footer-legal a { font-size: 0.82rem; color: var(--rtc-text-3); transition: color var(--rtc-transition); }
.rw-footer-legal a:hover { color: var(--rtc-text-2); }
.rw-stat-big-val.green { color: var(--rtc-green); }
.rw-reno .rw-section-badge {
  background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25);
  color: #4ade80;
}
.rw-reno .rw-section-title em { color: var(--rtc-green); }

/* ── Burger Mobile ──────────────────────────────── */
.rw-burger {
  display: none; flex-direction: column; gap: 5px;
  width: 40px; height: 40px; background: none;
  border: 1px solid var(--rtc-border); border-radius: var(--rtc-radius);
  cursor: pointer; padding: 8px;
}
.rw-burger span { display: block; height: 2px; background: var(--rtc-text-2); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.rw-mobile-menu {
  display: none; position: fixed; top: 72px; left: 0; right: 0;
  background: rgba(17,17,17,0.98); border-bottom: 1px solid var(--rtc-border);
  padding: 16px 24px; flex-direction: column; gap: 4px; z-index: 8999;
  backdrop-filter: blur(20px);
}
.rw-mobile-menu.open { display: flex; }
.rw-mobile-menu .rw-nav-link { font-size: 1rem; padding: 12px 16px; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .rw-hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .rw-hero-sub { margin-left: auto; margin-right: auto; }
  .rw-hero-actions { justify-content: center; }
  .rw-hero-trust { justify-content: center; }
  .rw-usp-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-about-inner { grid-template-columns: 1fr; gap: 48px; }
  .rw-services-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-services-grid .rw-service-card:nth-child(4),
  .rw-services-grid .rw-service-card:nth-child(5) { grid-column: auto; }
  .rw-vorteile-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-prozess-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .rw-prozess-steps::before { display: none; }
  .rw-fahrzeuge-grid { grid-template-columns: 1fr; }
  .rw-leistungen-grid { grid-template-columns: 1fr; }
  .rw-leistung-features { grid-template-columns: 1fr; }
  .rw-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-stat-big { border-right: none; border-bottom: 1px solid var(--rtc-border); padding: 16px 0; }
  .rw-stat-big:nth-child(even) { border-right: none; }
  .rw-entsorgung-inner { grid-template-columns: 1fr; gap: 48px; }
  .rw-wohnverm-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-reno-grid { grid-template-columns: repeat(2, 1fr); }
  .rw-reno-banner { flex-direction: column; text-align: center; padding: 32px 24px; }
  .rw-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .rw-section { padding: 64px 0; }
  .rw-nav-links { display: none; }
  .rw-nav-cta { display: none; }
  .rw-burger { display: flex; }
  .rw-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .rw-footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .rw-logo-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Promise Badges ─────────────────────────────── */
.rw-promise-strip {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px;
}
.rw-promise-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 99px;
  background: rgba(192,0,0,0.12); border: 1px solid rgba(192,0,0,0.25);
  font-size: 0.82rem; font-weight: 700; color: var(--rtc-primary-dark);
  font-family: var(--rtc-font-head);
}
.rw-promise-badge.green {
  background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2);
  color: #4ade80;
}

/* ── Leistungen Page Hero ───────────────────────── */
.rw-leistungen-hero {
  padding: 140px 0 64px;
  background: var(--rtc-bg);
  border-bottom: 1px solid var(--rtc-border);
  position: relative; overflow: hidden;
}
.rw-leistungen-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(232,88,10,0.07) 0%, transparent 70%);
}
.rw-leistungen-hero-inner { position: relative; z-index: 1; }
.rw-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--rtc-text-2); margin-bottom: 20px;
}
.rw-breadcrumb a { color: var(--rtc-text-2); transition: color var(--rtc-transition); }
.rw-breadcrumb a:hover { color: var(--rtc-primary-text); }
.rw-breadcrumb-sep { color: var(--rtc-text-3); }

/* ── Scroll Reveal ──────────────────────────────── */
[data-rw-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
[data-rw-reveal].visible { opacity: 1; transform: translateY(0); }
[data-rw-delay="1"] { transition-delay: 100ms; }
[data-rw-delay="2"] { transition-delay: 200ms; }
[data-rw-delay="3"] { transition-delay: 300ms; }
[data-rw-delay="4"] { transition-delay: 400ms; }
[data-rw-delay="5"] { transition-delay: 500ms; }

/* ── Mobile Fullscreen & Overflow Fix ───────────── */
html { overflow-x: hidden; }
.rw-page { overflow-x: hidden; width: 100%; }

/* ── Burger active animation ────────────────────── */
.rw-burger span { transition: transform 0.3s ease, opacity 0.3s ease; }
.rw-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rw-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.rw-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Menu improvements ───────────────────── */
.rw-mobile-menu {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.rw-mobile-menu .rw-btn-primary {
  display: flex; text-align: center;
}

/* ── Responsive additions ───────────────────────── */
@media (max-width: 768px) {
  .rw-hero { min-height: 100svh; min-height: 100vh; }
  .rw-cta-content { flex-direction: column; gap: 32px; }
  .rw-cta-text { text-align: center; }
  .rw-cta-actions { justify-content: center; }
  .rw-prozess-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .rw-container { padding: 0 16px; }
  .rw-section { padding: 56px 0; }
  .rw-hero-inner { padding: 28px 16px 48px; }
  .rw-hero h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .rw-hero-actions { flex-direction: column; align-items: stretch; }
  .rw-hero-actions .rw-btn-primary,
  .rw-hero-actions .rw-btn-outline { justify-content: center; text-align: center; }
  .rw-hero-trust { gap: 10px; }
  .rw-logo-card { padding: 24px 16px; max-width: 100%; }
  .rw-about-inner { gap: 32px; }
  .rw-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Nav active state ───────────────────────────── */
.rw-nav-link--active {
  color: var(--rtc-primary-text) !important;
  background: rgba(192,0,0,0.1);
}
.rw-btn-lg { padding: 18px 36px; font-size: 1rem; white-space: nowrap; }

/* ── Responsive: category blocks & new sections ─── */
@media (max-width: 1024px) {
  .rw-kat-grid { grid-template-columns: 1fr; gap: 20px; }
  .rw-about-teaser-inner { grid-template-columns: 260px 1fr; gap: 48px; }
  .rw-bestell-cta { padding: 32px 28px; }
}
@media (max-width: 768px) {
  .rw-bestell-cta .rw-btn-primary,
  .rw-bestell-cta .rw-btn-reno { align-self: center; }
}
@media (max-width: 480px) {
  .rw-btn-lg { padding: 16px 24px; font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════
   MOBILE FULLSCREEN FIX
   ═══════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  width: 100%;
}
.rw-hero {
  min-height: 100dvh;
  min-height: 100svh;
}
.rw-leistungen-hero {
  min-height: 40dvh;
}

/* ═══════════════════════════════════════════════
   PROMISE STRIP (Kontakt & Dienstleistungen hero)
   ═══════════════════════════════════════════════ */
.rw-promise-strip {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.rw-promise-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(192,0,0,0.12); border: 1px solid rgba(192,0,0,0.3);
  color: var(--rtc-text-2); font-size: 0.82rem; font-weight: 600;
  padding: 8px 14px; border-radius: 100px;
}
.rw-promise-badge.green {
  background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25);
  color: #4ade80;
}

/* ── Responsive: kontakt & form ─────────────────── */
@media (max-width: 1024px) {
  .rw-kontakt-layout { grid-template-columns: 300px 1fr; gap: 32px; }
  .rw-form-card { padding: 36px 28px; }
}
@media (max-width: 480px) {
  .rw-promise-strip { gap: 8px; }
  .rw-promise-badge { font-size: 0.78rem; padding: 7px 12px; }
}

/* ═══════════════════════════════════════════════
   KONTAKT INFO PAGE
   ═══════════════════════════════════════════════ */
.rw-kontakt-info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-bottom: 56px;
}
.rw-kontakt-info-card {
  background: var(--rtc-bg-card); border: 1px solid var(--rtc-border);
  border-radius: var(--rtc-radius-xl); padding: 36px 28px;
  text-decoration: none; display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--rtc-transition), transform var(--rtc-transition), box-shadow var(--rtc-transition);
  position: relative; overflow: hidden;
}
.rw-kontakt-info-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rtc-primary), var(--rtc-gold));
}
.rw-kontakt-info-card:hover {
  border-color: var(--rtc-border-hot); transform: translateY(-3px);
  box-shadow: var(--rtc-shadow-hot);
}
.rw-kontakt-info-icon { font-size: 2rem; margin-bottom: 4px; }
.rw-kontakt-info-label {
  font-size: 0.8rem; font-weight: 700; color: var(--rtc-primary-text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rw-kontakt-info-main {
  font-family: var(--rtc-font-head); font-weight: 800;
  font-size: 1.05rem; color: var(--rtc-text);
}
.rw-kontakt-info-sub { font-size: 0.85rem; color: var(--rtc-text-3); line-height: 1.6; }

@media (max-width: 768px) {
  .rw-kontakt-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .rw-kontakt-anfrage-cta .rw-btn-primary { align-self: center; }
}
@media (max-width: 480px) {
  .rw-kontakt-info-card { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════
   STANDORTE PAGE
   ═══════════════════════════════════════════════ */
.rw-standorte-list {
  display: flex; flex-direction: column; gap: 64px;
}
.rw-standort-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--rtc-bg-card); border: 1px solid var(--rtc-border);
  border-radius: var(--rtc-radius-xl); overflow: hidden;
}
.rw-standort-card--reverse { direction: rtl; }
.rw-standort-card--reverse > * { direction: ltr; }

.rw-standort-info {
  padding: 48px 40px; display: flex; flex-direction: column;
}
.rw-standort-badge {
  display: inline-flex; align-items: center;
  background: rgba(192,0,0,0.12); border: 1px solid rgba(192,0,0,0.3);
  color: var(--rtc-primary-text); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 14px; width: fit-content;
}
.rw-standort-title {
  font-family: var(--rtc-font-head); font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--rtc-text); margin-bottom: 8px;
}
.rw-standort-title span { color: var(--rtc-primary-text); }
.rw-standort-cities {
  font-size: 0.85rem; color: var(--rtc-text-3); margin-bottom: 16px;
}
.rw-standort-desc {
  font-size: 0.95rem; color: var(--rtc-text-2); line-height: 1.85; margin-bottom: 20px;
}
.rw-standort-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rw-standort-tag {
  font-size: 0.8rem; font-weight: 600; color: var(--rtc-text-2);
  background: var(--rtc-bg); border: 1px solid var(--rtc-border);
  border-radius: 100px; padding: 5px 12px;
}

.rw-standort-map {
  height: 100%; min-height: 320px; display: flex; flex-direction: column;
}
.rw-standort-map iframe {
  width: 100%; flex: 1; min-height: 300px; border: none; display: block;
  filter: invert(0.85) hue-rotate(180deg);
}
.rw-standort-map-link {
  display: block; text-align: center; font-size: 0.78rem;
  color: var(--rtc-text-3); padding: 8px; background: var(--rtc-bg);
  text-decoration: none; border-top: 1px solid var(--rtc-border);
  transition: color var(--rtc-transition);
}
.rw-standort-map-link:hover { color: var(--rtc-primary-text); }

.rw-standort-cta {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(192,0,0,0.1), transparent 60%);
  border: 1px solid rgba(192,0,0,0.3); border-radius: var(--rtc-radius-xl);
  padding: 40px 48px;
}
.rw-standort-cta-icon { font-size: 2.5rem; flex-shrink: 0; }
.rw-standort-cta-title {
  font-family: var(--rtc-font-head); font-weight: 900;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: var(--rtc-text); margin-bottom: 8px;
}
.rw-standort-cta-sub { font-size: 0.9rem; color: var(--rtc-text-2); max-width: 480px; }
.rw-standort-cta .rw-btn-primary { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1024px) {
  .rw-standort-card { grid-template-columns: 1fr; }
  .rw-standort-card--reverse { direction: ltr; }
  .rw-standort-map { min-height: 260px; }
  .rw-standort-info { padding: 36px 28px; }
}
@media (max-width: 768px) {
  .rw-standorte-list { gap: 40px; }
  .rw-standort-info { padding: 28px 20px; }
  .rw-standort-cta { flex-direction: column; text-align: center; padding: 28px 20px; }
  .rw-standort-cta .rw-btn-primary { margin-left: 0; align-self: center; }
}
@media (max-width: 480px) {
  .rw-standort-map iframe { min-height: 220px; }
}

/* ── Legal pages (Impressum / Datenschutz / AGB) ── */
.rw-legal-content {
  max-width: 800px; margin: 0 auto;
}
.rw-legal-block {
  margin-bottom: 48px; padding-bottom: 40px;
  border-bottom: 1px solid var(--rtc-border);
}
.rw-legal-block:last-child { border-bottom: none; margin-bottom: 0; }
.rw-legal-h2 {
  font-family: var(--rtc-font-head); font-weight: 800;
  font-size: 1.15rem; color: var(--rtc-text);
  margin-bottom: 16px;
}
.rw-legal-content p {
  font-size: 0.95rem; color: var(--rtc-text-2); line-height: 1.85;
  margin-bottom: 14px;
}
.rw-legal-content p:last-child { margin-bottom: 0; }
.rw-legal-list {
  list-style: none; padding: 0; margin: 12px 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.rw-legal-list li {
  font-size: 0.95rem; color: var(--rtc-text-2); line-height: 1.7;
  padding-left: 20px; position: relative;
}
.rw-legal-list li::before {
  content: '\2014'; position: absolute; left: 0; color: var(--rtc-primary-text);
}
.rw-rechner-step.active {
  color: var(--rtc-text);
  background: rgba(192,0,0,0.12);
}
.rw-rechner-step.active .rw-rechner-step-num {
  background: var(--rtc-primary);
  border-color: var(--rtc-primary);
  color: #fff;
}
.rw-rechner-step.done {
  color: var(--rtc-text-2);
}
.rw-rechner-step.done .rw-rechner-step-num {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.3);
  color: var(--rtc-green);
}
.rw-rechner-panel.active {
  display: block;
  animation: rw-fade-up 0.35s ease;
}
@keyframes rw-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rw-rechner-email-input.error {
  border-color: #ef4444;
}
.rw-rechner-error-msg.visible {
  display: block;
}

/* Responsive: Rechner */
@media (max-width: 768px) {
  .rw-rechner-leistung-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .rw-rechner-steps {
    padding: 4px;
  }
  .rw-rechner-step {
    padding: 10px 4px;
    font-size: 0.72rem;
    gap: 6px;
  }
  .rw-rechner-step-text {
    display: none;
  }
  .rw-rechner-result-includes {
    grid-template-columns: 1fr;
  }
  .rw-rechner-email-row {
    grid-template-columns: 1fr;
  }
  .rw-rechner-result-header {
    padding: 24px 20px;
  }
  .rw-rechner-result-body {
    padding: 20px;
  }
  .rw-rechner-email-box {
    padding: 20px;
  }
  .rw-rechner-teaser {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }
  .rw-rechner-teaser-desc {
    max-width: 100%;
  }
}

/* ── Über uns logo card ─────────────────────────── */
.rw-about-logo-card {
  background: var(--rtc-bg-card); border: 1px solid var(--rtc-border);
  border-radius: var(--rtc-radius-xl); padding: 28px 24px;
  text-align: center; margin-bottom: 20px;
}
.rw-about-logo-img {
  width: 100%; max-width: 260px; height: auto;
  border-radius: 10px; background: #fff; padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); margin-bottom: 16px;
}
.rw-about-logo-name {
  font-family: var(--rtc-font-head); font-weight: 900;
  font-size: 1.15rem; color: var(--rtc-text); letter-spacing: -0.02em;
}
.rw-about-logo-name span { color: var(--rtc-primary-text); }

/* Responsive additions */
@media (max-width: 1100px) {
  .rw-rechner-leistung-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Apply to panels (upgrade existing animation) */
.rw-rechner-panel.active {
  animation: rw-fade-up 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Mobile Improvements ────────────────────────── */
@media (max-width: 860px) {
  .rw-rechner-wrap {
    max-width: 100%;
  }
}

/* Hero actions: stack on small phones */
@media (max-width: 400px) {
  .rw-hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .rw-hero-actions .rw-btn-primary,
  .rw-hero-actions .rw-btn-calc-hero {
    width: 100%;
    justify-content: center;
  }
}

/* Prevent body horizontal overflow on all mobile */
@media (max-width: 768px) {
  .rw-page { overflow-x: hidden; }
  .rw-container { padding: 0 16px; }
  .rw-section { padding: 56px 0; }
  .rw-hero { min-height: auto; padding-top: 88px; padding-bottom: 56px; }
  .rw-hero-inner { padding: 0; }
  .rw-logo-card { padding: 20px; }
  .rw-logo-stats { grid-template-columns: repeat(2,1fr); gap: 12px; }
}

@media (max-width: 480px) {
  .rw-hero h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .rw-hero-sub { font-size: 0.9rem; }
  .rw-hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-items: start;
  }
  .rw-promise-strip { flex-wrap: wrap; gap: 6px; }
  .rw-promise-badge { font-size: 0.76rem; }
  .rw-leistungen-hero { padding: 32px 0 28px; }
}

/* ── Bottom Navigation (Mobile) ────────────────── */
.rtc-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--rtc-border);
  padding: .55rem .5rem calc(.55rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
.rtc-bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}
.rtc-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  color: rgba(0,0,0,0.38);
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
  padding: .3rem .4rem;
  min-width: 48px;
  position: relative;
  font-family: var(--rtc-font-head);
}
.rtc-bottom-nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform .2s ease;
}
.rtc-bottom-nav-item:hover { color: rgba(0,0,0,0.65); }
.rtc-bottom-nav-item:hover svg { transform: translateY(-2px); }
.rtc-bottom-nav-item.active {
  color: var(--rtc-primary-text);
}
.rtc-bottom-nav-item.active svg { transform: translateY(-2px); }
.rtc-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  background: var(--rtc-primary);
  border-radius: 0 0 3px 3px;
}

/* Centre CTA pill */
.rtc-bottom-nav-item.rtc-bottom-nav-cta {
  background: var(--rtc-primary);
  color: #fff;
  border-radius: 18px;
  padding: .6rem 1.1rem;
  gap: .2rem;
  box-shadow: 0 4px 18px rgba(192,0,0,0.40);
  font-size: .58rem;
  min-width: 64px;
  margin-bottom: 2px;
}
.rtc-bottom-nav-item.rtc-bottom-nav-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(192,0,0,0.50);
}
.rtc-bottom-nav-item.rtc-bottom-nav-cta.active { color: #fff; }
.rtc-bottom-nav-item.rtc-bottom-nav-cta::before { display: none; }
.rtc-bottom-nav-item.rtc-bottom-nav-cta svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .rtc-bottom-nav { display: block; }
  .rw-page { padding-bottom: 76px; }
}

/* ── Mobile zoom prevention: ensure inputs never trigger auto-zoom on iOS ── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Top info bar: shift nav + hero paddings on desktop ── */
@media (min-width: 769px) {
  #rw-nav { top: 40px; }
  .rw-hero { padding-top: 112px; }
  .rw-leistungen-hero { padding-top: 180px; }
}

/* ════════════════════════════════════════════════════════
   MOBILE EXCELLENCE — Krasse Mobile UX
   ════════════════════════════════════════════════════════ */

/* ── Touch-Feedback: Alle interaktiven Elemente ──────── */
@media (hover: none) {
  .rw-btn-primary:active    { transform: scale(0.96); box-shadow: 0 2px 8px rgba(192,0,0,.2); }
  .rw-btn-wa:active         { transform: scale(0.96); }
  .rw-btn-outline-hero:active { transform: scale(0.96); }
  .rw-service-card:active   { transform: scale(0.98); border-color: var(--rtc-border-hot); }
  .rw-nav-cta:active        { transform: scale(0.97); }
  .schnell-card:active      { transform: scale(0.97) translateY(0) !important; }
  .srv-card:active          { transform: translateY(-1px); }
  .koop-benefit-card:active { transform: scale(0.98); }
  a:active                  { -webkit-tap-highlight-color: transparent; }
}

/* ── Hero: Dramatisches Mobile-Fullscreen ─────────────── */
@media (max-width: 767px) {
  .rw-hero {
    background: radial-gradient(ellipse 120% 60% at 50% 20%, rgba(192,0,0,0.18) 0%, transparent 65%),
                linear-gradient(180deg, #0a0a0a 0%, #0f0000 50%, #0a0a0a 100%);
    align-items: center;
  }
  .rw-hero-bg {
    background:
      radial-gradient(ellipse 80% 40% at 50% 15%, rgba(192,0,0,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 50% 30% at 80% 70%, rgba(192,0,0,0.06) 0%, transparent 50%);
  }
  .rw-hero-grid {
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
  }
  .rw-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 20px 52px;
    gap: 0;
  }
  .rw-hero-visual { display: none; }
  .rw-hero-badge { margin: 0 auto 20px; width: fit-content; }
  .rw-hero h1 {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
    line-height: 1.08;
    margin-bottom: 18px;
  }
  .rw-hero-sub {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 28px;
    margin-left: auto;
    margin-right: auto;
    max-width: 380px;
  }
  .rw-hero-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
  }
  .rw-hero-actions .rw-btn-primary,
  .rw-hero-actions .rw-btn-wa {
    flex: 1;
    min-width: 0;
    justify-content: center;
    max-width: 180px;
  }
  .rw-hero-actions .rw-btn-outline-hero {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }
  .rw-hero-trust {
    justify-content: center;
    gap: 10px 18px;
  }
  .rw-trust-text { font-size: 0.8rem; }
}

/* ── Trust Bar: kompakter auf Mobile ──────────────────── */
@media (max-width: 600px) {
  .trust-bar-inner {
    gap: 16px 28px;
    padding: 0 20px;
  }
  .trust-stat-num { font-size: 1.5rem; }
  .trust-stat-lbl { font-size: .68rem; }
}
@media (max-width: 400px) {
  .trust-bar-inner { gap: 14px 16px; }
  .trust-stat-num { font-size: 1.3rem; }
}

/* ── Service Cards: weniger Padding ──────────────────── */
@media (max-width: 560px) {
  .srv-card { padding: 20px 14px; }
  .srv-icon-wrap { width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: 12px; }
  .srv-card h3 { font-size: .86rem; }
  .srv-card p { font-size: .78rem; }
}

/* ── Why-Cards: tighter ───────────────────────────────── */
@media (max-width: 600px) {
  .why-card { padding: 18px 14px; gap: 12px; border-radius: 12px; }
  .why-icon { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0; }
  .why-card h3 { font-size: .9rem; }
  .why-card p { font-size: .82rem; }
}

/* ── Process Steps: 2x2 auf kleinen Phones ───────────── */
@media (max-width: 480px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .step-num { width: 52px; height: 52px; font-size: 1.2rem; margin-bottom: 12px; }
  .step-title { font-size: .86rem; }
  .step-desc { font-size: .78rem; }
}

/* ── Contact Strip: sauber gestapelt ─────────────────── */
@media (max-width: 650px) {
  .contact-strip-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .contact-strip-text { text-align: center; }
  .contact-strip-actions { justify-content: center; flex-wrap: wrap; }
  .contact-strip-text h2 { font-size: 1.4rem; }
}
@media (max-width: 400px) {
  .btn-phone, .btn-email { padding: 12px 18px; font-size: .92rem; }
}

/* ── CTA-Banner: stack on mobile ─────────────────────── */
@media (max-width: 600px) {
  .cta-banner-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-btn-white, .cta-btn-outline { text-align: center; padding: 14px 20px; }
}

/* ── Leistungen-Hero: Mobile-Padding fix ─────────────── */
@media (max-width: 480px) {
  .rw-leistungen-hero { padding-top: 140px !important; padding-bottom: 44px; min-height: 0; }
  .rw-section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .rw-section-badge { font-size: .68rem; padding: 4px 12px; margin-bottom: 10px; }
  .rw-section-sub { font-size: .88rem; }
  .rw-section-header { margin-bottom: 32px; }
  .rw-promise-strip { gap: 8px; }
  .rw-promise-badge { font-size: .72rem; padding: 6px 10px; }
  .rw-breadcrumb { font-size: .76rem; }
}

/* ── About: tightened gaps ───────────────────────────── */
@media (max-width: 480px) {
  .rw-about-highlights { gap: 10px; margin-top: 20px; }
  .rw-highlight { padding: 12px 14px; }
  .rw-highlight-title { font-size: .86rem; }
  .rw-highlight-text { font-size: .78rem; }
  .rw-exp-card { padding: 22px 18px; }
  .rw-about-logo-card { padding: 20px 16px; }
  .rw-about-logo-img { height: 80px !important; }
}

/* ── Kooperationen: Mobile ───────────────────────────── */
@media (max-width: 480px) {
  .koop-partner-card { padding: 22px 16px; }
  .koop-firm-name { font-size: 1.4rem; }
  .koop-firm-desc { font-size: .88rem; }
  .koop-benefits-grid { gap: 12px; }
  .koop-benefit-card { padding: 22px 16px; }
  .koop-benefit-icon { width: 42px; height: 42px; font-size: 1.2rem; }
  .koop-cta-banner { padding: 28px 18px; }
  .koop-intro-item { padding: 14px 0; }
}

/* ── Dienstleistungen: Jump-Nav & Cards ──────────────── */
@media (max-width: 480px) {
  .jump-a { padding: 10px 11px; font-size: .71rem; gap: 4px; }
  .svc-inner { gap: 20px; }
  .svc-big-num { font-size: 2.2rem; }
  .svc-icon-box { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 12px; }
  .svc-checks { gap: 8px; }
  .sc-item { padding: 10px 12px; }
  .sc-text { font-size: .82rem; }
  .ov-card { padding: 14px 10px; }
  .ov-name { font-size: .75rem; }
  .ov-from { font-size: .68rem; }
  .svc-desc { font-size: .86rem; }
}
@media (max-width: 440px) {
  .ov-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .ov-name { font-size: .72rem; }
}

/* ── Anfrage-Form: Mobile ────────────────────────────── */
@media (max-width: 480px) {
  .af-card { padding: 20px 14px; border-radius: 12px; }
  .af-leistung-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .af-leistung-label { padding: 10px 10px; border-radius: 8px; }
  .af-leistung-icon { font-size: 1.1rem; }
  .af-leistung-name { font-size: .78rem; }
  .af-leistung-sub { font-size: .66rem; }
  .af-input, .af-textarea { padding: 10px 12px; }
  .af-input-grid { gap: 12px; }
  .af-submit { padding: 14px; font-size: .93rem; }
  .af-promise { padding: 10px 12px; font-size: .78rem; }
  .af-section-label { margin-top: 18px; }
}

/* ── Preisrechner: Mobile ────────────────────────────── */
@media (max-width: 480px) {
  .rc-wrap { padding: 20px 10px 40px; }
  .rc-prog-inner { padding: 12px 10px; gap: 4px; }
  .rc-plabel { font-size: .58rem; }
  .rc-card { padding: 20px 16px; border-radius: 14px; }
  .rc-h { font-size: 1.05rem; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-btn { padding: 12px 12px; gap: 10px; border-radius: 12px; }
  .cat-ic { font-size: 1.6rem; width: 36px; }
  .cat-nm { font-size: .84rem; }
  .cat-ds { font-size: .68rem; }
  .ty-lbl { padding: 12px 12px; }
  .ty-nm { font-size: .86rem; }
  .qty-row { padding: 10px 12px; }
  .qty-btn { width: 38px; height: 38px; font-size: 1.2rem; }
  .qty-val { font-size: 1.1rem; }
  .tog { padding: 11px 10px; }
  .tog-nm { font-size: .84rem; }
  .tog-ds { font-size: .68rem; }
  .ex-lbl { padding: 11px 12px; }
  .ex-nm { font-size: .82rem; }
  .rc-nav { gap: 10px; margin-top: 16px; }
  .btn-back { padding: 13px; font-size: .88rem; }
  .btn-next { padding: 14px; font-size: .94rem; }
  .res-box { padding: 22px 16px; border-radius: 14px; }
  .res-price { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .cta-row { gap: 8px; }
  .cta-a, .cta-b { padding: 12px 8px; font-size: .82rem; }
  .rc-restart button { font-size: .76rem; }
}

/* ── Bottom Nav: Polished ────────────────────────────── */
@media (max-width: 767px) {
  .rtc-bottom-nav {
    box-shadow: 0 -1px 0 rgba(255,255,255,0.07),
                0 -12px 40px rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .rtc-bottom-nav-item {
    padding: 8px 2px 10px;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.12s ease;
  }
  .rtc-bottom-nav-item:active {
    transform: scale(0.9);
    opacity: 0.7;
  }
  .rtc-bottom-nav-item span { font-size: 0.67rem; letter-spacing: 0.02em; }
  .rtc-bottom-nav-item.rtc-bottom-nav-cta {
    box-shadow: 0 0 24px rgba(192,0,0,0.45);
  }
  .rtc-bottom-nav-item.rtc-bottom-nav-cta:active {
    transform: scale(0.9);
    box-shadow: 0 0 12px rgba(192,0,0,0.3);
  }
}
@media (max-width: 360px) {
  .rtc-bottom-nav-item svg { width: 20px; height: 20px; }
  .rtc-bottom-nav-item span { font-size: 0.62rem; }
}

/* ── WhatsApp FAB: mobile position ───────────────────── */
@media (max-width: 767px) {
  .rtc-wa-fab { right: 14px; bottom: 84px; width: 48px; height: 48px; }
}
@media (max-width: 360px) {
  .rtc-wa-fab { width: 44px; height: 44px; right: 10px; bottom: 82px; }
}

/* ── Partner-Strip: mobile ───────────────────────────── */
@media (max-width: 480px) {
  .partner-strip { padding: 18px 0; }
  .partner-strip-badge { font-size: .62rem; }
  .partner-strip-text { font-size: .76rem; }
  .partner-strip-card { padding: 10px 14px; }
  .partner-logo-img { height: 28px; }
  .partner-strip-name { font-size: .82rem; }
  .partner-strip-sub { font-size: .68rem; }
}

/* ── General tiny-screen ────────────────────────────── */
@media (max-width: 360px) {
  .rw-container { padding: 0 14px; }
  .rw-section { padding: 44px 0; }
  .rw-hero-actions .rw-btn-primary,
  .rw-hero-actions .rw-btn-wa { font-size: .82rem; padding: 11px 14px; }
}

/* ── Smooth scroll padding for sticky nav+topbar ──── */
@media (max-width: 767px) {
  html { scroll-padding-top: 88px; }
}
@media (min-width: 768px) {
  html { scroll-padding-top: 120px; }
}

/* ── Overflow/Clipping prevention ─────────────────── */
.rw-hero, .rw-leistungen-hero { overflow-x: clip; }
.rtc-topbar, #rw-nav { overflow: hidden; }
.rw-page * { max-width: 100%; }
.rw-container { overflow-x: hidden; }

/* Wortumbruch überall erzwingen */
.srv-card, .why-card, .koop-benefit-card,
.sc-item, .ov-card, .rw-highlight,
.af-leistung-label, .cat-btn, .ty-lbl {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* SVG-Icons in Icon-Containern korrekt skalieren */
.srv-icon-wrap svg,
.why-icon svg,
.svc-icon-box svg,
.af-leistung-icon svg,
.koop-benefit-icon svg,
.rw-highlight-icon svg,
.schnell-icon svg,
.step-icon svg {
  display: block;
  flex-shrink: 0;
}
.srv-icon-wrap svg  { width: 32px; height: 32px; color: var(--rtc-primary-text); }
.why-icon svg       { width: 24px; height: 24px; color: #fff; }
.af-leistung-icon svg { width: 22px; height: 22px; }
.koop-benefit-icon svg { width: 26px; height: 26px; }
.rw-highlight-icon svg { width: 22px; height: 22px; }
.schnell-icon svg   { width: 36px; height: 36px; }

/* Jump-Nav: nie aus dem Viewport scrollen */
.jump-nav { max-width: 100vw; }
.jump-inner { scrollbar-width: none; }
.jump-inner::-webkit-scrollbar { display: none; }

/* ── WhatsApp button ── */
.rw-btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  background: #25D366; color: #fff;
  font-weight: 800; font-size: 0.92rem; font-family: var(--rtc-font-head);
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  transition: all 0.2s ease; text-decoration: none; white-space: nowrap; border: none;
}
.rw-btn-wa:hover {
  background: #1db954; box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  transform: translateY(-2px); color: #fff;
}
.rw-btn-wa:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   RTC ANIMATION SYSTEM — Premium Animations in Rot/Schwarz
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Hero Entrance — gestaffeltes Einblenden ────────────── */
/* Ohne filter:blur(). Eine Animation, die einen Filter mitfuehrt, kann der
   Browser nicht an die Grafikkarte abgeben - Filter koennen Pixel verschieben,
   also muss jedes Bild auf dem Hauptthread entstehen. Das traf hier die fuenf
   obersten Hero-Elemente, darunter die H1, die zugleich das groesste sichtbare
   Element beim Laden ist. Genau in dem Zeitfenster wird die Blockierzeit
   gemessen. Einblenden und Hochschieben bleiben, nur die Unschaerfe faellt weg. */
@keyframes heroEnter {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:none;             }
}
.rw-hero .rw-hero-badge  { animation:heroEnter .7s cubic-bezier(.16,1,.3,1) .1s both; }
.rw-hero h1              { animation:heroEnter .8s cubic-bezier(.16,1,.3,1) .25s both; }
.rw-hero-sub             { animation:heroEnter .8s cubic-bezier(.16,1,.3,1) .45s both; }
.rw-hero-actions         { animation:heroEnter .8s cubic-bezier(.16,1,.3,1) .65s both; }
.rw-hero-trust           { animation:heroEnter .7s cubic-bezier(.16,1,.3,1) .85s both; }

/* ── 2. Neon-Glitch auf Hero-<em> (rot, Technik, Installation) ── */
.rw-hero em {
  display: inline-block;
  position: relative;
  text-shadow: 0 0 24px rgba(192,0,0,.55), 0 0 48px rgba(192,0,0,.25);
  animation: neonFlicker 4s ease-in-out infinite, heroGlitch 9s ease-in-out infinite;
}
/* Das Flackern lief frueher ueber text-shadow. Jeder Zwischenschritt zwang den
   Browser, den Schriftzug samt Schein neu zu zeichnen - und das dauerhaft, im
   Hero, direkt neben dem LCP-Element. Der Schein steht jetzt fest, geflackert
   wird ueber die Deckkraft; das laeuft auf der Grafikkarte. */
@keyframes neonFlicker {
  0%,90%,93%,95%,100% { opacity:1;   }
  92%                 { opacity:.82; }
  96%                 { opacity:.88; }
}
@keyframes heroGlitch {
  0%,86%,100%  { transform:none; filter:none; }
  87%          { transform:translateX(-3px) skewX(-3deg); filter:hue-rotate(80deg) brightness(1.3); }
  88%          { transform:translateX(3px)  skewX(3deg);  filter:hue-rotate(-80deg); }
  89%          { transform:none;             filter:none; }
}

/* ── 3. Scan-Line über Hero ────────────────────────────────── */
/* Die Scan-Linie wanderte frueher per top ueber den Hero. top ist eine
   Layout-Eigenschaft: der Browser musste fuenf Sekunden lang, in Endlosschleife,
   in jedem einzelnen Bild die Position neu berechnen - ueber die volle
   Bildschirmhoehe und ausgerechnet dort, wo der Besucher zuerst hinsieht.
   Jetzt ist das Element so hoch wie der Hero, traegt den Strich als Verlauf am
   oberen Rand und wird per transform verschoben. Optisch identisch, aber die
   Grafikkarte erledigt es allein - der Hauptthread bleibt frei fuer den Aufbau
   der Seite. translateY(100%) entspricht exakt dem frueheren top:100%, weil sich
   die Prozentangabe nun auf die Elementhoehe bezieht, und die ist die Herohoehe.
   .rw-hero hat overflow:hidden, die Linie kann also nicht nach unten ausbrechen. */
.rw-hero::after {
  content:'';
  position:absolute; left:0; right:0; top:0;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(192,0,0,.7),transparent) top left/100% 2px no-repeat;
  animation:scanLine 5s linear infinite;
  pointer-events:none; z-index:2;
}
@keyframes scanLine {
  0%   { transform:translateY(72px);  opacity:0; }
  4%   { opacity:.9; }
  96%  { opacity:.5; }
  100% { transform:translateY(100%);  opacity:0; }
}
@media(min-width:769px){
  .rw-hero::after { animation:scanLineDt 5s linear infinite; }
  @keyframes scanLineDt {
    0%   { transform:translateY(112px); opacity:0; }
    4%   { opacity:.9; }
    96%  { opacity:.5; }
    100% { transform:translateY(100%); opacity:0; }
  }
}

/* Dekor-Animationen anhalten, solange ihr Abschnitt nicht im Bild ist.
   Eine CSS-Animation laeuft auch dann Bild fuer Bild weiter, wenn das Element
   weit ausserhalb des sichtbaren Bereichs liegt. Die Klasse setzt ein kleines
   Skript in rw_js.html per IntersectionObserver.

   WICHTIG - hier stand zuerst `.rtc-anim-pause *` mit !important. Das war ein
   teurer Fehlgriff: ein Universalselektor zwingt den Browser, beim Setzen der
   Klasse fuer jeden einzelnen Nachfahren die Stile neu zu berechnen. Bei neun
   Abschnitten, die zusammen die ganze Seite abdecken, kostete allein das ueber
   drei Sekunden Hauptthread - die Blockierzeit stieg dadurch von 590 ms auf
   4170 ms. Deshalb ausschliesslich gezielte Selektoren auf die wenigen
   Elemente, die tatsaechlich eine Dauer-Animation tragen. */
.rw-hero.rtc-anim-pause .rw-sp,
.rw-hero.rtc-anim-pause .rw-hero-bg,
.rtc-ticker.rtc-anim-pause .rtc-ticker-track,
.trust-bar.rtc-anim-pause .rw-badge-dot { animation-play-state: paused; }
.rw-hero.rtc-anim-pause::after,
.cta-banner.rtc-anim-pause::after { animation-play-state: paused; }

/* ── 4. Floating Sparks (hero background) ──────────────────── */
.rw-hero-sparks { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* Auf kleinen Geraeten kosten neun schwebende Funken mehr, als sie optisch
   hergeben - dort traegt der Hero ohnehin schon Glow, Ring und Roboter. */
@media (max-width: 767px) { .rw-hero-sparks { display: none; } }
.rw-sp {
  position:absolute;
  font-style:normal;
  opacity:0;
  animation:sparkFloat var(--dur,5s) ease-in-out infinite var(--delay,0s);
  color: var(--rtc-primary-text);
  filter:drop-shadow(0 0 5px rgba(192,0,0,.8));
  user-select:none; pointer-events:none;
}
@keyframes sparkFloat {
  0%   { opacity:0; transform:translateY(8px)   rotate(0deg)   scale(.85); }
  10%  { opacity:.4; }
  50%  { opacity:.15; transform:translateY(-55px) rotate(18deg) scale(1.1); }
  90%  { opacity:.28; }
  100% { opacity:0; transform:translateY(-110px) rotate(-10deg) scale(.9); }
}

/* ── 5. Ticker Tape ────────────────────────────────────────── */
.rtc-ticker {
  overflow:hidden; background:#C00000; padding:11px 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rtc-ticker-track {
  display:inline-flex; gap:0;
  white-space:nowrap;
  animation:tickerScroll 28s linear infinite;
}
.rtc-ticker:hover .rtc-ticker-track { animation-play-state:paused; }
.rtc-tick-item {
  color:rgba(255,255,255,.92);
  font-family:var(--rtc-font-head); font-weight:700; font-size:.8rem;
  letter-spacing:.25px; padding:0 20px;
}
.rtc-tick-sep { color:rgba(255,255,255,.38); font-size:1rem; align-self:center; }
@keyframes tickerScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── 6. Rotierender Conic-Border auf Cards ─────────────────── */
@property --rtc-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.srv-card, .why-card, .koop-benefit-card, .rw-service-card {
  position:relative; isolation:isolate;
}
.srv-card::before, .why-card::before, .koop-benefit-card::before {
  content:'';
  position:absolute; inset:-1.5px;
  border-radius:15px;
  background:conic-gradient(from var(--rtc-angle), #C00000 0%, rgba(192,0,0,0) 25%, rgba(192,0,0,0) 75%, #C00000 100%);
  z-index:-1; opacity:0;
  transition:opacity .3s ease;
  animation:rotateBorder 3s linear infinite;
  /* Der Rahmen ist erst beim Darueberfahren sichtbar (opacity:0). Ohne diese
     Zeile drehte er sich trotzdem pausenlos weiter - auf der Startseite allein
     elfmal gleichzeitig, jedes Mal ein neu gerasterter Farbverlauf fuer etwas,
     das niemand sieht. Animierte CSS-Variablen kann der Compositor nicht
     uebernehmen, das laeuft komplett auf dem Hauptthread. */
  animation-play-state:paused;
}
.srv-card:hover::before, .why-card:hover::before, .koop-benefit-card:hover::before {
  opacity:1;
  animation-play-state:running;
}
@keyframes rotateBorder { to { --rtc-angle:360deg; } }

/* ── 7. Button Shimmer ─────────────────────────────────────── */
.rw-btn-primary, .rw-nav-cta, .cta-btn-white, .btn-next:not(:disabled) {
  position:relative; overflow:hidden;
}
.rw-btn-primary::after, .rw-nav-cta::after {
  content:'';
  position:absolute; top:0; left:0;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-200%) skewX(-20deg);
  animation:shimmerBtn 4s ease-in-out infinite;
  pointer-events:none;
}
/* Bewegt wird per transform statt per left: left aendert die Position im Layout
   und zwingt den Browser, den Button in jedem Bild neu zu berechnen. Die Strecke
   ist dieselbe - das Glanzlicht ist 60% breit, -200% seiner eigenen Breite
   entsprechen also den frueheren -120% der Buttonbreite. */
@keyframes shimmerBtn {
  0%,100% { transform:translateX(-200%) skewX(-20deg); }
  45%,55% { transform:translateX(217%)  skewX(-20deg); }
}

/* ── 8. Red Glow Pulse auf primären CTAs ───────────────────── */
/* Laeuft nur noch beim Ueberfahren. Vorher pulsierte er dauerhaft auf jedem
   primaeren Knopf - und weil er einen Filter mitfuehrt, konnte der Browser ihn
   nicht an die Grafikkarte abgeben: jedes Bild entstand auf demselben Thread,
   der auch Klicks und Scrollen bedient. Drei solcher Knoepfe stehen allein auf
   der Startseite. Im Ruhezustand gibt es jetzt weder Animation noch Filter;
   den Grundschatten bringt .rw-btn-primary ohnehin mit. Gleiche Loesung wie
   bei rotateBorder weiter oben. */
.rw-btn-primary:hover, .btn-next:not(:disabled):hover {
  animation:redPulse 3s ease-in-out infinite;
}
@keyframes redPulse {
  0%,100% { filter:drop-shadow(0 2px 6px  rgba(192,0,0,.30)); }
  50%     { filter:drop-shadow(0 4px 14px rgba(192,0,0,.60)); }
}

/* ── 9. Counter Pop (JS adds class) ────────────────────────── */
/* ebenfalls ohne filter:blur() - siehe heroEnter */
@keyframes numPop {
  from { transform:scale(.65); opacity:0; }
  to   { transform:scale(1);   opacity:1; }
}
.rtc-counted { animation:numPop .55s cubic-bezier(.34,1.56,.64,1); }

/* ── 10. Magnetische Karte (JS setzt transform-style) ───────── */
.srv-card, .why-card {
  transform-style:preserve-3d;
  will-change:transform;
}
.srv-card, .why-card { transition:transform .2s ease, box-shadow .2s ease; }

/* ── 11. Section enter (ergänzt data-rw-reveal) ─────────────── */
[data-rw-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease, transform .65s ease;
}
[data-rw-reveal].visible { opacity:1; transform:translateY(0); }
[data-rw-delay="1"] { transition-delay:100ms; }
[data-rw-delay="2"] { transition-delay:200ms; }
[data-rw-delay="3"] { transition-delay:300ms; }
[data-rw-delay="4"] { transition-delay:400ms; }

/* ── 12. Klick-Welle (JS fügt Klasse hinzu) ────────────────── */
@keyframes rippleOut {
  from { transform:scale(0);   opacity:.55; }
  to   { transform:scale(2.5); opacity:0;   }
}
.rtc-ripple {
  position:absolute; border-radius:50%;
  background:rgba(192,0,0,.35);
  pointer-events:none;
  animation:rippleOut .5s ease-out forwards;
  transform-origin:center;
}

/* ── 13. WhatsApp FAB – Pulse-Ring ─────────────────────────── */
.rtc-wa-fab::before {
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.45);
  animation:waPulse 2s ease-in-out infinite;
}
@keyframes waPulse {
  0%,100% { transform:scale(1);   opacity:.7; }
  50%     { transform:scale(1.25); opacity:0; }
}

/* ── 14. Schnellkontakt-Karten – slide-up on mobile ─────────── */
@media(max-width:700px){
  .schnell-card {
    animation:cardSlideUp .5s cubic-bezier(.16,1,.3,1) both;
  }
  .schnell-card:nth-child(2) { animation-delay:.08s; }
  .schnell-card:nth-child(3) { animation-delay:.16s; }
  @keyframes cardSlideUp {
    from { opacity:0; transform:translateY(16px) scale(.95); }
    to   { opacity:1; transform:none; }
  }
}

/* ── Hero outline button (was missing) ── */
.rw-btn-outline-hero {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  background: transparent; color: var(--rtc-text-2);
  border: 2px solid rgba(255,255,255,0.2);
  font-weight: 700; font-size: 0.92rem; font-family: var(--rtc-font-head);
  transition: all 0.2s ease; text-decoration: none; white-space: nowrap;
}
.rw-btn-outline-hero:hover {
  border-color: rgba(255,255,255,0.45); color: var(--rtc-text);
  background: rgba(255,255,255,0.06);
}