/* ============================================================
   Gemeinsame Stile aller Seiten (Hover-Effekte aus dem Design)
   Die Farben der Seite stehen direkt in den Seiten-Dateien.
   ============================================================ */
html { scroll-behavior: smooth; }
/* Automatisch erzeugte Hover-Stile (aus dem Design uebernommen) */
.hv-138532:hover { border:1.5px solid #FDFFFC !important; background:#FDFFFC1a !important; color:#FDFFFC !important; }
.hv-2e56a2:hover { background:#61CE70 !important; color:#022C22 !important; }
.hv-36accf:hover { background:#61CE70 !important; color:#022C22 !important; border:1px solid #61CE70 !important; }
.hv-47f444:hover { transform:rotate(0deg) scale(1.04) !important; }
.hv-72269f:hover { border:1.5px solid #022C22 !important; color:#022C22 !important; }
.hv-760970:hover { transform:translateY(-3px) !important; }
.hv-87fc5f:hover { background:#FDFFFC !important; color:#022C22 !important; }
.hv-a401cb:hover { background:#00667B !important; color:#FDFFFC !important; }
.hv-b4b628:hover { background:#022C22 !important; color:#FDFFFC !important; }
/* Anfrage-Seite */
.hv-9zurueck:hover { border: 1.5px solid #022C22 !important; color: #022C22 !important; }
.hv-verlauf:hover { background: #00667B !important; color: #FDFFFC !important; }
.hv-opt:hover { transform: translateY(-3px); }
/* Rechtstexte */
.recht { max-width: 880px; margin: 0 auto; padding: 140px clamp(20px,4.5vw,40px) 100px; }
.recht h1 { font-weight: 700; font-size: clamp(30px,5vw,44px); line-height: 1.1; margin: 0 0 32px; }
.recht h2 { font-weight: 700; font-size: 22px; margin: 40px 0 12px; }
.recht p, .recht li { font-size: 16px; line-height: 1.7; color: #022C22a6; }
.recht .hinweis { background: #61CE701c; border-radius: 16px; padding: 18px 22px; color: #022C22; font-size: 15px; }

/* ---------- Handy-Verbesserungen ---------- */
@media (max-width: 1100px) {
  /* Angebot-Karten: Text unten staerker abdunkeln, damit er auf hellen Fotos lesbar bleibt */
  .acard-scrim { background: linear-gradient(180deg, rgba(2,30,23,0.4) 0%, rgba(2,30,23,0.68) 40%, rgba(2,30,23,0.92) 100%) !important; }
  /* Bild-Text-Bloecke: auf dem Handy immer zuerst das Foto, dann der Text */
  .r-grid2 > div[style*="rotate("] { order: -1 !important; }
  /* Hero-Kreise: die Desktop-Versatz-Abstaende aufheben -> gleichmaessige Abstaende */
  .r-heropops [data-pop] { margin-bottom: 0 !important; }
  .r-heropops > div { gap: 20px !important; }
}

/* ---------- Menü: Umschalten auf den Menü-Knopf ----------
   Die Kopfzeile braucht rund 1000 px, damit Logo, Menü, Telefon und
   Button nebeneinander passen. Umgeschaltet wird schon bei 1099 px, damit
   auch bei etwas breiter gerenderten Schriften Reserve bleibt. Darunter
   wandern die Menüpunkte in das aufklappbare Menü (siehe js/main.js). */
@media (max-width: 1099px) {
  .r-nav { display: none !important; }
  .r-burger { display: flex !important; }
}
.r-mobilnav[hidden] { display: none !important; }