/* R&G Classics — Responsive-Ebene
   Wird als letztes Stylesheet geladen, damit die Mobil-Regeln die
   Inline-Styles der Seiten überschreiben können (daher !important).
   Angriffspunkte sind die rg-*-Klassen auf den Struktur-Containern;
   alles andere bleibt unangetastet. */

:root {
  --rg-gutter: 20px;
}

/* --- Grundsicherung, alle Viewports --- */
img, svg, video { max-width: 100%; }
body { overflow-x: clip; }
h1, h2, h3, p { overflow-wrap: break-word; }

/* --- Menü-Schalter: unsichtbar, steuert das mobile Menü --- */
.rg-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.rg-burger { display: none; }

/* --- Kontaktkarten füllen ihre Rasterzelle gleich hoch aus --- */
.rg-contact-grid > a { height: 100%; }
.rg-contact-grid > a > div,
.rg-contact-grid > div {
  height: 100%;
  box-sizing: border-box;
}

/* ===================== Tablet und kleiner ===================== */
@media (max-width: 900px) {

  /* Kopfzeile */
  .rg-header-inner {
    position: relative;
    height: 68px !important;
    padding: 0 var(--rg-gutter) !important;
  }
  .rg-header-inner > a > img { height: 38px !important; }

  .rg-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .rg-burger span {
    display: block;
    height: 2px;
    background: var(--text-heading);
    border-radius: 2px;
    transition: transform var(--duration-normal) var(--ease-standard),
                opacity var(--duration-fast) linear;
  }
  .rg-nav-toggle:checked ~ .rg-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rg-nav-toggle:checked ~ .rg-burger span:nth-child(2) { opacity: 0; }
  .rg-nav-toggle:checked ~ .rg-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .rg-nav-toggle:focus-visible ~ .rg-burger {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
  }

  /* Ausklappmenü */
  .rg-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px var(--rg-gutter) 18px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
  }
  .rg-nav-toggle:checked ~ .rg-nav { display: flex !important; }
  .rg-nav > a {
    padding: 15px 2px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--border-default);
  }
  .rg-nav > a:last-child {
    margin-top: 16px;
    padding: 14px 22px !important;
    border-bottom: none;
    text-align: center;
  }

  /* Abschnitts-Rhythmus */
  .rg-hero     { padding: 64px var(--rg-gutter) 56px !important; }

  /* Deckel für das mitwachsende Startseiten-Logo, falls das Skript
     beim ersten Rendern noch eine Desktop-Breite gemeldet bekommt */
  .rg-hero > img { max-height: 170px; object-fit: contain; }
  .rg-sec-y    { padding: 64px var(--rg-gutter) !important; }
  .rg-sec-b    { padding: 0 var(--rg-gutter) 64px !important; }
  .rg-sec-text { padding: 72px var(--rg-gutter) !important; }

  /* Raster */
  .rg-grid-2,
  .rg-grid-3,
  .rg-split { grid-template-columns: 1fr !important; }
  .rg-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .rg-split { gap: 40px !important; }
  .rg-grid-gap { gap: 40px 24px !important; }

  /* Team-Raster: rechte Spalte war rechtsbündig */
  .rg-team-grid > div {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Bildstreifen: das sind Grafiken mit Text darin. Nebeneinander wären
     sie auf dem Handy nur noch ein Viertel so groß und damit unlesbar —
     deshalb untereinander, in Originalgröße und ohne Beschnitt. */
  .rg-strip {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-items: center;
  }
  .rg-strip > img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* Bildergalerie mit übergroßem Erstbild */
  .rg-gallery > img {
    grid-row: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  /* Fußzeile */
  .rg-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 24px !important;
    padding: 48px var(--rg-gutter) 28px !important;
  }
  .rg-footer-bar   { padding: 20px var(--rg-gutter) 28px !important; }
  .rg-footer-legal { padding: 28px var(--rg-gutter) !important; }
}

/* ===================== Smartphone ===================== */
@media (max-width: 640px) {

  /* Schriftgrößen des Design-Systems eine Stufe kleiner */
  :root {
    --text-display-xl: 2.6rem;
    --text-display-lg: 2.1rem;
    --text-display-md: 1.75rem;
    --text-heading-lg: 1.5rem;
    --text-heading-md: 1.25rem;
    --text-body-lg: 1.0625rem;
  }

  h1 {
    font-size: clamp(1.85rem, 7.6vw, 2.35rem) !important;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  h2, h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .rg-hero     { padding: 44px var(--rg-gutter) 48px !important; }
  .rg-hero > img { max-height: 120px; }
  .rg-sec-y    { padding: 52px var(--rg-gutter) !important; }
  .rg-sec-b    { padding: 0 var(--rg-gutter) 52px !important; }
  .rg-sec-text { padding: 56px var(--rg-gutter) 64px !important; }

  .rg-grid-4 { grid-template-columns: 1fr !important; }
  .rg-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .rg-card { padding: 26px 22px !important; }

  /* Zeilen, die am Desktop links/rechts auseinanderlaufen */
  .rg-row-split {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .rg-row-split > * {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Breitbild-Aufmacher sind auf dem Handy sonst nur ein Streifen */
  .rg-media-wide { aspect-ratio: 16 / 10 !important; }

  /* bequemere Tippziele in der Fußzeile */
  .rg-footer-grid a { padding: 3px 0; }
}