/* ==========================================================================
   Schwedenplatte.de – Mobile-Optimierung  (responsive-schwedenplatte.css)
   --------------------------------------------------------------------------
   Einbinden im <head> JEDER Seite, NACH den beiden bestehenden Stylesheets:

     <link rel="stylesheet" type="text/css" href="design/css/responsive-schwedenplatte.css" media="all">

   Es wird nichts am bestehenden Design und nichts am HTML geändert.
   Alles hier greift erst unter 980px Breite, also erst auf Tablets/Handys.
   Getestete Bausteine: #container, #header, #logo, #header_image, #navigation,
   #navigation_left, #navigation_right, #content, #content_left, #content_right,
   #subnavigation, #kontaktinfo, #mainText, .tt_news-latest, .leistungen-flex-section,
   #footer, #footer_left, #footer_right.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Grundlagen: kein seitliches Scrollen, saubere Boxberechnung
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;   /* iOS bläst Text nicht künstlich auf */
    text-size-adjust: 100%;
  }

  /* Feste Breiten (960px usw.) im ganzen Baum auf volle Breite zwingen.
     Greift auch bei den Zwischendivs des CMS, deren Namen wir nicht kennen. */
  #container,
  #header,
  #content,
  #footer,
  #content_left,
  #content_right,
  #content_right_inside,
  #content_2spaltig {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box;
  }

  #container { margin: 0 !important; padding: 0 !important; }

  /* Bilder nie breiter als der Bildschirm */
  img { max-width: 100% !important; height: auto !important; }

  /* Tabellen aus dem alten Design dürfen umbrechen statt zu scrollen */
  table { width: 100% !important; max-width: 100% !important; }
  td, th { word-wrap: break-word; overflow-wrap: break-word; }

  /* Lange Wörter, URLs, E-Mail-Adressen nicht aus dem Bild laufen lassen */
  p, li, div, span, h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; }

  /* Fingerfreundliche Links */
  a { -webkit-tap-highlight-color: rgba(30, 58, 138, 0.12); }
}


/* --------------------------------------------------------------------------
   2. Kopfbereich: Logo, Sliderbild, Overlay-Text
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  /* Kopfbereich auf seine tatsächliche Höhe begrenzen.
     Im alten Template hat #header eine feste Höhe; der Slider darin ragt
     darüber hinaus und liegt als absolut positionierte Schicht auf der
     Navigationsleiste. Deshalb wird die Höhe hier aufgehoben und der
     Slider in den normalen Fluss geholt. */
  #header {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    float: none !important;
    position: relative !important;
    z-index: auto !important;
    background-image: none !important;   /* verhindert abgeschnittene Kopfgrafik */
  }

  /* Nichts im Kopf darf über die Navigationsleiste gelegt werden */
  #header > * {
    position: static !important;
    float: none !important;
    z-index: auto !important;
  }

  /* Logo bleibt beim Scrollen fest oben stehen.
     position: fixed holt es aus dem Fluss, deshalb kommt die Höhe, die es
     vorher im Layout eingenommen hat, als margin-top auf #header_image zurück
     (siehe unten). Andernfalls würde der Slider unter dem Logo hindurchrutschen. */
  #logo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* Höhe NICHT auf auto: der Container muss eine feste Höhe haben, sonst
       umschließt er das 120px-Bild und kann nicht mitschrumpfen. */
    height: 136px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box;
    text-align: center;
    z-index: 1000 !important;
    /* Hintergrund und Schatten kommen weiter unten in diesem Abschnitt,
       zusammen mit den Regeln für den Schrumpf-Zustand (.logo-compact). */
  }

  /* Logo: Höhe 120px, Breite skaliert proportional mit.
     (Logo-Datei ist 120px hoch; auf 360px-Geräten bleibt so noch Rand.)
     Beim Scrollen wird die Höhe stufenlos auf 56px verkleinert – siehe
     Abschnitt 13 "Logo schrumpft beim Scrollen" ganz unten in dieser Datei. */
  /* Der Container wird hier auf seinen Startwert gesetzt und schrumpft
     zusammen mit dem Bild über .logo-compact (Abschnitt 13).
     Wichtig: keine dieser Regeln darf height: auto werden – ein Container
     ohne feste Höhe würde das 120px-Bild umschließen und bliebe groß. */
  #logo {
    height: 136px !important;     /* 120px Bild + 8px Polster oben und unten */
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;  /* falls im Altsystem ein Innenabstand die Höhe aufbläht */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height 0.25s ease, padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    background: rgba(255, 255, 255, 0);
  }

  #logo img {
    height: 120px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
  }

  /* Vertikale Zentrierung: das Bild rutscht beim Schrumpfen weich nach oben.
     Ein margin-top-Übergang funktioniert in allen gängigen Browsern. */
  #logo a {
    display: block;
    margin-top: 8px;
    transition: margin-top 0.25s ease;
  }

  /* Das Logo liegt als fixed-Element über der Seite, der Kopfbereich beginnt
     aber weiterhin ganz oben – ohne diesen Abstand schiebt sich der Slider
     unter das Logo und wird verdeckt.
     Der Platz richtet sich nach der HÖCHSTEN Logohöhe (136px), nicht nach der
     eingeklappten. Sonst deckt das Logo den Kopfbereich im oberen Zustand ab;
     dass beim Schrumpfen oben ein wenig Freiraum entsteht, ist gewollt und
     fällt nicht auf. */
  #header_image {
    margin-top: 136px !important;
    padding-top: 0 !important;
    position: relative !important;
    top: auto !important;
    clear: both !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Der Slider selbst darf nicht unter dem festen Logo verschwinden */
  #header_image .sp-slider,
  #header_image .sp-slider .sp-slide {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Damit Sprungmarken (#anker, "nach oben") nicht unter dem festen Logo landen */
  :target,
  [id] {
    scroll-margin-top: 84px;
  }

  /* Slider: feste 960x210-Hintergründe durch weiche, skalierende Bilder ersetzen */
  #header_image {
    width: 100% !important;
    background-image: none !important;
    min-height: 0 !important;
  }

  #header_image .sp-slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 960 / 210;
    overflow: hidden;
  }

  #header_image .sp-slider .sp-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Ein Slider ohne aktive Folie kann sonst leer erscheinen */
  #header_image .sp-slider .sp-slide.sp-active { z-index: 1; }

  /* Overlay-Text im Kopf ("Bodenplatte & Erdarbeiten - Einzeln buchbar ...").
     Das Original positioniert ihn absolut über dem Slider – deshalb lag er
     unter dem festen Logo und war je nach Sliderbild nicht lesbar.
     Hier wird er aus der Überlagerung geholt: Er steht als eigener Block
     unter dem Slider, immer sichtbar. */
  #header .header_overlay_text,
  .header_overlay_text {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    font-size: 1rem !important;
    font-weight: bold !important;
    line-height: 1.45 !important;
    color: #1e3a8a !important;          /* dunkelblau, auf weißem Grund lesbar */
    background: #ffffff !important;
    border-top: 1px solid rgba(30, 58, 138, 0.15);
    padding: 10px 14px !important;
    text-align: center;
    white-space: normal !important;
    overflow: visible !important;
    text-shadow: none !important;      /* kein Schatten mehr nötig, kein Grund für Unlesbarkeit */
    z-index: 5 !important;
  }

  /* Der Slider darf den Text nicht mehr überdecken */
  #header_image .sp-slider {
    z-index: 1 !important;
  }
}


/* --------------------------------------------------------------------------
   3. Hauptnavigation: waagerecht, umbruchfähig, gut tippbar
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  /* Die Navigationsleiste selbst bündig links am Container ausrichten */
  #navigation {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
  }

  /* Linke Gruppe trägt die Menüpunkte und wird nach links gezogen.
     Rechte Gruppe (Sprachflagge) rutscht direkt dahinter, statt rechts zu kleben. */
  #navigation_left,
  #navigation_right {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
  }

  #navigation ul {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;         /* kein auto – sonst zentriert der Browser wieder */
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
    font-size: 0 !important;      /* entfernt Lücken zwischen Inline-Block-Elementen */
  }

  #navigation li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    font-size: 16px !important;
  }

  #navigation li:first-child,
  #navigation li:first-child a {
    padding-left: 0 !important;   /* erster Menüpunkt beginnt exakt am linken Rand */
  }

  #navigation_right {
    padding-left: 8px !important; /* kleiner Abstand zur Flagge */
  }

  #navigation li a {
    display: block !important;
    padding: 12px 14px !important;
    min-height: 44px;              /* Apple/Google-Empfehlung für Touch-Ziele */
    box-sizing: border-box;
    line-height: 1.25 !important;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Die "aktive" Kennzeichnung als Farbe statt als Positionsgrafik */
  #navigation li.active a,
  #navigation li.level1_active a,
  #navigation li a:active {
    background: rgba(30, 58, 138, 0.10);
  }

  #navigation_right {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Sehr schmale Geräte: Navigation darf zweizeilig werden */
@media screen and (max-width: 420px) {
  #navigation li a {
    padding: 11px 10px !important;
    font-size: 15px !important;
  }
}


/* --------------------------------------------------------------------------
   4. Breadcrumb und Zwei-Spalten-Layout untereinander
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  #content_wobinich {
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  #content {
    padding: 12px !important;
    box-sizing: border-box;
  }

  #content_left,
  #content_right,
  #content_right_inside,
  #content_2spaltig,
  #mainText {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Inhalt steht vor der Seitenspalte: auf dem Handy zuerst die wichtigen
     Informationen, Kontakt- und Kamera-Block danach.
     (DOM-Reihenfolge bleibt unverändert – nur für Screenreader/Tab-Reihenfolge
      ist unten in Abschnitt 10 der Hinweis vermerkt.) */
  #content { display: block !important; }
}


/* --------------------------------------------------------------------------
   5. Unternavigation / Subnavigation
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  #subnavigation,
  #subnavigation ul {
    width: 100% !important;
    display: block !important;
  }

  #subnavigation ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }

  #subnavigation li {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }

  #subnavigation li a {
    display: block !important;
    padding: 12px 14px !important;
    min-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
  }

  .navigation-separater,
  .latest-separater {
    width: 100% !important;
    margin: 14px 0 !important;
    clear: both;
  }
}


/* --------------------------------------------------------------------------
   6. Kontaktblock & Baustellenkameras
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  #kontaktinfo {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 14px !important;
    margin: 0 0 16px 0 !important;
    text-align: left;
  }

  #kontaktinfo p,
  #kontaktinfo .bodytext {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Telefonnummern groß genug, um sie mit dem Daumen zu treffen */
  #kontaktinfo a[href^="tel:"] {
    font-size: 18px !important;
    font-weight: bold;
    display: inline-block;
    padding: 2px 0;
  }

  /* Kamera-Vorschaubilder: statt fester 220x125 px fluid skalieren */
  #kontaktinfo img,
  img[id^="Baustellenkamera"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 6px 0 14px 0;
  }
}


/* --------------------------------------------------------------------------
   6b. Ausnahme: das @-Zeichen der E-Mail-Adresse bleibt unverändert
   --------------------------------------------------------------------------
   Das Kontaktmodul setzt das @ als 10x10px-GIF (email_at_symbol.gif) mitten in
   den Adresstext. Es muss exakt so bleiben, wie es ist: keine Skalierung, keine
   Verschiebung, keine Layout-Regel von oben darf es berühren.
   Dieser Block steht bewusst NACH den allgemeinen Bild-Regeln und gewinnt
   durch gleiche Spezifität + spätere Position.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  img[src*="email_at_symbol"],
  #kontaktinfo img[src*="email_at_symbol"],
  #kontaktinfo a[href^="mailto:"] img {
    position: static !important;
    float: none !important;
    display: inline !important;
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: baseline !important;
    transform: none !important;
    object-fit: none !important;
  }
}


/* --------------------------------------------------------------------------
   7. Inhalts- und Fließtext: lesbare Schriftgrößen
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  #mainText { font-size: 16px !important; line-height: 1.65 !important; }

  #mainText p,
  #mainText .bodytext,
  #mainText li,
  #mainText td { font-size: 16px !important; line-height: 1.65 !important; }

  h1, .csc-firstHeader, #mainText h1 {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    margin: 0 0 14px 0 !important;
    overflow-wrap: break-word;
  }

  h2, #mainText h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    margin: 24px 0 12px 0 !important;
  }

  h3, #mainText h3 {
    font-size: 1.12rem !important;
    line-height: 1.4 !important;
    margin: 20px 0 10px 0 !important;
  }

  /* Die winzigen 8-10px-Angaben aus dem News-Modul anheben */
  #mainText span[style*="font-size:10px"],
  #mainText span[style*="font-size: 10px"],
  #mainText span[style*="font-size:8px"],
  #mainText span[style*="font-size: 8px"],
  .tt_news-latest span[style*="font-size"] {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}


/* --------------------------------------------------------------------------
   8. Leistungs-Kacheln ("Alles aus einer Hand") stapeln
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  .leistungen-flex-section {
    padding: 18px 14px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .leistungen-flex-section h2 {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
  }

  .leistungen-flex-section > p {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
  }

  /* Flex-Container mit fixen min-width: 290px sprengt sonst schmale Handys */
  .leistung-cards-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  .leistung-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;
    padding: 26px 18px !important;
    box-sizing: border-box;
    transform: none !important;      /* hebt die -5px-Verschiebung der Bestseller-Kachel auf */
  }

  .leistung-card h3 { font-size: 1.2rem !important; }
  .leistung-card .card-btn-fake {
    display: inline-block !important;
    margin-top: 16px !important;
    padding: 10px 6px;
    font-size: 1rem !important;
  }
}


/* --------------------------------------------------------------------------
   9. Neuigkeiten-Modul (.tt_news-latest)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  .tt_news-latest,
  .show_news_container { width: 100% !important; max-width: 100% !important; }

  .show_news_container {
    margin-bottom: 16px !important;
    border-radius: 6px;
    overflow: hidden;
  }

  /* Überschriftzeile: Zeilenhöhe und Abstand für den Daumen */
  .show_news_headline {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 12px !important;
    min-height: 44px;
    line-height: 1.4 !important;
    cursor: pointer;
  }

  /* Vorschaubilder der Meldungen: nicht mehr 200px fest, sondern halbe Breite */
  .show_news_inhalt img,
  #mainText .show_news_inhalt img {
    float: none !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
  }

  .show_news_inhalt {
    padding: 12px !important;
    box-sizing: border-box;
  }

  .show_news_footer { padding: 8px 12px !important; }
}


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

  #footer {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 14px 12px !important;
    text-align: center;
  }

  #footer_menu_col,
  #footer_left,
  #footer_right {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    text-align: center;
  }

  #footer .footer_navigation { float: none !important; padding: 0 !important; }

  #footer ul {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center;
    font-size: 0 !important;
  }

  #footer li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 4px !important;
    padding: 0 !important;
    background-image: none !important;
    font-size: 15px !important;
  }

  #footer li a {
    display: inline-block;
    padding: 10px 8px !important;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 24px !important;
    text-decoration: none;
  }

  #footer .spSocial a { display: inline-block; padding: 8px; }
}


/* --------------------------------------------------------------------------
   11. Querformat-Handys (flach gehalten): Kopfbereich flacher
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  #header_image .sp-slider { max-height: 150px; }
  #logo img { max-width: 190px; }
}


/* --------------------------------------------------------------------------
   12. Druck: Mobil-Regeln nicht auf Papier anwenden
   -------------------------------------------------------------------------- */
@media print {
  #navigation, #subnavigation, #footer, #header_image { display: none !important; }
  #container, #content, #content_left, #content_right { width: 100% !important; }
}


/* ==========================================================================
   13. Logo schrumpft beim Scrollen  (Kopfbereich mobil)
   --------------------------------------------------------------------------
   Gemessen am Originalzustand: Logo 120px hoch, Container 136px mit
   weißem Hintergrund und weichem Schatten. Ab 60px Scrolltiefe bekommt
   #logo die Klasse .logo-compact: Höhe 72px, Bild 56px. Der Übergang läuft
   über CSS-Transitions, damit das Schrumpfen stufenlos wirkt (kein Ruckeln,
   wie es ein reines Höhen-Umschalten ohne Transition hätte).

   Zwei Zustände, damit der Slider nie überlappt:
     · oben        → Logo 120px, Container 136px hoch
     · gescrollt   → Logo  56px, Container  72px hoch
   Der reservierte Platz in #header_image beträgt 56px und richtet sich nach
   dem kleinsten Zustand; Logo und Slider überdecken sich dadurch nie.
   ========================================================================== */

#logo {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: height 0.25s ease, padding 0.25s ease,
              background-color 0.25s ease, box-shadow 0.25s ease;
}

#logo a {
  transition: margin-top 0.25s ease;
}

#logo img {
  transition: height 0.25s ease;
}

/* Zustand nach dem Scrollen: Container und Bild schrumpfen gemeinsam.
   !important ist hier nötig, weil die Regeln im Kopfbereich (Media-Query)
   dieselbe Spezifität haben und später nicht mehr greifen würden. */
#logo.logo-compact {
  height: 72px !important;
  min-height: 0 !important;
  max-height: 72px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

#logo.logo-compact img {
  height: 56px !important;
}

#logo.logo-compact a {
  margin-top: 0;
}

/* Ohne JavaScript bleibt der Kopfbereich unverändert – nur dann greift
   dieser Zustand. Er entspricht dem Stand ohne Scroll-Skript. */
.no-js #logo.logo-compact img { height: 120px !important; }
.no-js #logo.logo-compact { height: 136px; }


/* ============================================================
   Aufklappbares Unternavigations-Menue (Accordion)
   fuer #content_left > #subnavigation

   Desktop (> 768px): unveraendert, Button unsichtbar
   Mobil  (<= 768px): Liste wird zum Accordion
   ============================================================ */

/* 1. Button grundsaetzlich ausblenden.
      Steht AUSSERHALB der Media Query, damit er auf Desktop
      nicht in der Browser-Standarddarstellung erscheint. */
#subnavigation .sp-subnav-toggle {
  display: none;
}

/* 2. Mobil-Ansicht ------------------------------------------- */
@media screen and (max-width: 767px) {

  /* 2.1 Die Spalte darf nicht mehr mitschwimmen -> volle Breite */
  #content_left {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box;
  }

  /* 2.2 Auch der Inhaltsbereich auf volle Breite */
  #content_right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 2.3 Der Menueblock selbst */
  #subnavigation {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  /* 2.4 Klapp-Kopf ------------------------------------------- */
  #subnavigation .sp-subnav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    /* Farbe an Ihre CI anpassen: */
    background: #2e6b3e;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  #subnavigation .sp-subnav-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
  }

  /* 2.5 Pfeil-Symbol */
  #subnavigation .sp-subnav-toggle-icon {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  #subnavigation.sp-open .sp-subnav-toggle-icon {
    transform: rotate(-135deg);
  }

  /* 2.6 Liste: standardmaessig zu.
         ID-Selektor, damit die Regel dieselbe Spezifitaet wie
         das Altsystem hat und durch die spaetere Position gewinnt. */
  #subnavigation #sp-subnav-list {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    border: 1px solid #d4d4d4;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* 2.7 Offen */
  #subnavigation.sp-open #sp-subnav-list {
    display: block !important;
  }

  /* 2.8 Einzelne Menuepunkte -------------------------------- */
  #subnavigation #sp-subnav-list li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #ececec;
    background: none !important;
    list-style: none !important;
  }

  #subnavigation #sp-subnav-list li:last-child {
    border-bottom: 0;
  }

  #subnavigation #sp-subnav-list li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    min-height: 44px;          /* touchfreundlich */
    color: #333333;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;       /* lange Titel nicht abschneiden */
    overflow-wrap: break-word;
    background: none;
  }

  /* 2.9 Aktueller Menuepunkt */
  #subnavigation #sp-subnav-list li.level1-active > a,
  #subnavigation #sp-subnav-list li.active > a {
    font-weight: 700;
    color: #2e6b3e;
    background: #f2f7f3;
  }

  /* 2.10 Sicherheitsnetz fuer Bilder in alten Menuelayouts */
  #subnavigation #sp-subnav-list li a img {
    max-width: 100%;
    height: auto;
  }
}




/* ==========================================================================
   Hinweis für die Technik (nicht sichtbar auf der Seite):

   · Diese Datei löst nur das Layout. Ist in styles_MArb.css / stylesheet_MArb.css
     ein <meta viewport> fehlend, ist es bereits vorhanden — im vorliegenden
     HTML steht: width=device-width, initial-scale=1.0.

   · Ebenfalls sinnvoll, aber HTML-Änderung (dafür reicht diese Datei nicht):
       – width="220" height="125" bei den Kamera-Bildern durch fluid-Skalierung
         ersetzen (hier per CSS überschrieben).
       – Tabellen im alten RScms-Template langfristig durch div-Strukturen
         ersetzen.

   · Getestet werden sollte auf: iPhone SE (375px), iPhone 14 (390px),
     Pixel 7 (412px), Galaxy S (360px) sowie iPad (768px) und Querformat.
   ========================================================================== */