/* ====================================================================
   svg-akademie.css - zentrale Zusatz-CSS der SVG-Akademie

   Eingebunden auf allen Seiten des Akademie-Baums. Eigenes CSS gehoert
   ausschliesslich hierher, nicht als Inline-Style an einzelne Elemente
   (Regel Markus). Keine externen Schriften, Skripte oder Hosts.
   Dateipfade immer relativ (/fileadmin/...), nie mit Domain - sonst
   zeigen sie nach dem Go-Live weiter auf die Vorschau-Domain.

   Regeln, die an eine TYPO3-Element-ID gebunden sind (#c12345), mit
   einem Kommentar versehen: welches Element, welche Seite, warum.
   ==================================================================== */

  .hero-section {
    background: url('/fileadmin/user_upload/Dateisammlung_SVG_Akademie/Startseite/Header/hero_bg_clean_1920.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    padding: 6rem 2rem;
    position: relative;
    min-height: 1000px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* keeps truck clipped while exiting */
  }

  .hero-container {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: -325px;
    width: 100%;
    position: relative;
    z-index: 3;
  }

  .hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: all 0.3s ease-in-out;
    z-index: 1;
  }

  /* NEU: Scroll-driven LKW-Layer */
  .hero-truck-layer {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 600px;
    height: auto;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
    transform: translateX(0);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  .hero-content {
    max-width: 70%;
    width: 100%;
    color: #484848;
    text-align: left;
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 6px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    animation: hero-card-pulse 3.5s ease-in-out infinite;
    will-change: transform, box-shadow;
    position: relative;
  }

  /* L-förmiger gelber Akzent: wächst beim Page-Load aus der oberen-linken Ecke */
  .hero-content::before,
  .hero-content::after {
    content: '';
    position: absolute;
    background: #FFD100;
    z-index: 2;
  }
  /* Linker Balken: wächst nach unten */
  .hero-content::before {
    top: 0;
    left: 0;
    width: 6px;
    height: 0;
    border-radius: 3px 0 0 3px;
    animation: hero-edge-grow-left 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
  }
  /* Oberer Balken: wächst nach rechts */
  .hero-content::after {
    top: 0;
    left: 0;
    width: 0;
    height: 6px;
    border-radius: 3px 3px 0 0;
    animation: hero-edge-grow-top 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
  }
  @keyframes hero-edge-grow-left {
    from { height: 0; }
    to { height: 100%; }
  }
  @keyframes hero-edge-grow-top {
    from { width: 0; }
    to { width: 100%; }
  }

  @keyframes hero-card-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 6px 16px rgba(0, 0, 0, 0.06);
    }
    50% {
      transform: scale(1.015);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.15), 0 8px 22px rgba(0, 0, 0, 0.10);
    }
  }

  .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    padding: 0;
    line-height: 1.2;
    color: #484848;
    text-align: left;
    text-wrap: balance;
  }

  .typewriter {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 1.5rem 0;
  }

  .typewriter-text {
    font-size: 2.5rem;
    color: #484848;
    display: inline;
    text-align: left !important;
    line-height: 1.2;
    margin: 0;
    padding: 0;
  }

  .typewriter-text::after {
    content: '|';
    color: #484848;
    animation: cursor-blink 0.8s step-end infinite;
    display: inline;
  }

  @keyframes cursor-blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
  }

  .hero-description {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.8;
    line-height: 1.5;
    color: #484848;
    text-align: left;
  }

  .hero-buttons {
    display: flex !important;
    gap: 1rem;
  }

  .hero-buttons .btn:last-child {
    border: none;
    color: #484848;
  }

  @media (max-width: 768px) {
    .hero-section {
      height: 650px;
    }

    .hero-section::before {
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .hero-container {
      margin-top: -200px;
    }

    .hero-content {
      max-width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .hero-title {
      text-align: center;
      font-size: 2rem;
    }

    .typewriter {
      justify-content: center;
    }

    .typewriter-text {
      text-align: center !important;
      font-size: 1.8rem;
    }

    .hero-description {
      flex-direction: column;
      text-align: center;
      font-size: 1rem;
      opacity: 0.8;
    }

    .hero-buttons {
      flex-direction: column;
      align-items: center !important;
      max-width: 250px;
      width: 100%;
    }

    .hero-buttons .btn:last-child {
      align-items: center !important;
      max-width: 200px;
      width: 100%;
      margin-left: 0px;
    }

    /* LKW mobile kleiner */
    .hero-truck-layer {
      width: 280px;
      bottom: 20px;
    }
  }

  /* Reduced motion: keine Scroll-Animation */
  @media (prefers-reduced-motion: reduce) {
    .hero-truck-layer {
      transform: none !important;
    }
    .hero-content {
      animation: none !important;
      transform: none !important;
    }
    .hero-content::before {
      height: 100% !important;
      animation: none !important;
    }
    .hero-content::after {
      width: 100% !important;
      animation: none !important;
    }
  }

/* =========================================================================
   Aktuelle Online-Seminare — Karten (Sektion c7685, Startseite)
   ID-gescoped, kein Risiko von Kollisionen.
   ========================================================================= */
  #c7685 .item-inner {
    background: #ffffff;
    border: 1px solid #ededed;
    border-top: 4px solid #FFD100;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    top: 0;
    /* Lift via top statt transform: transform würde einen Stacking-Context
       erzeugen, der das z-index:-1 des gelben Datums-Balkens umkehrt
       (Balken würde sonst fälschlich hinter der Uhrzeit sichtbar). */
    transition: top 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }
  #c7685 .item-inner:hover {
    top: -6px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
    background-color: #FFFDF3;
  }
  @media (prefers-reduced-motion: reduce) {
    #c7685 .item-inner:hover { top: 0; }
    #c7685 .item-inner { transition: none; }
  }

/* =========================================================================
   Tile Slider auf Desktop sichtbar (Startseite, Sektion c27917)
   Theme initialisiert Slick nur auf Mobile (.d-md-none); Desktop bleibt
   sonst auf statischem 5-Spalten-Grid. Hier blenden wir die Slick-Variante
   auch auf Desktop ein, damit alle Items im Auto-Scroll durchlaufen.
   ========================================================================= */
  @media (min-width: 768px) {
    #c27917 .ticker-card-wrap.d-md-block { display: none !important; }
    #c27917 .slickslider-ticker.d-md-none { display: block !important; }
  }

  /* Nur eine Zeile sichtbar (statt 2-Row-Marquee aus Mobile-Init): */
  @media (min-width: 768px) {
    #c27917 .slickslider-ticker.d-md-none .slick-list {
      max-height: 340px;
      overflow: hidden;
    }
  }

  /* Karussell-Karten etwas mehr Abstand: 12px Padding links/rechts pro Karte
     → visueller Gap zwischen Cards ≈24px. */
  @media (min-width: 768px) {
    #c27917 .slickslider-ticker.d-md-none .slick-slide .item {
      padding-left: 12px;
      padding-right: 12px;
    }
  }
  /* =========================================================================
     Learning-Feed: Geräte-Mockups (Sektion c39843) — 3 Spalten gleichmäßig
     Container ist mask container_4_columns. Erste Spalte ist leer, also
     ausblenden und restliche 3 Spalten auf je 1/3 verteilen.
     ========================================================================= */
  @media (min-width: 992px) {
    #c39843 .row.content-sameheight > .col-xl-3.test {
      display: none;
    }
    #c39843 .row.content-sameheight > .col-xl-3:not(.test) {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
  }


/* ==========================================================================
   Buttons-Element: Buttons nebeneinander statt untereinander
   Betrifft: Fachkunde Omnibusverkehr (c40455), Taxi und Mietwagen (c40437), Gueterkraftverkehr (c40436)
   Grund: Das Mask-Element "Buttons" legt jeden Button in eine eigene Zeile
   (.btn-wrap). Diese Regel stellt sie in eine Reihe; auf schmalen Bildschirmen
   brechen sie automatisch um. Fuer weitere Elemente: Selektoren hier ergaenzen.
   ========================================================================== */
#c40455 > .container,
#c40437 > .container,
#c40436 > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}

#c40455 > .container > .btn-wrap,
#c40437 > .container > .btn-wrap,
#c40436 > .container > .btn-wrap {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}


/* ==========================================================================
   Timeline-Element: Mittelbalken von Hellgrau auf Anthrazit
   Betrifft: Fachkunde Guenterkraftverkehr (c39925), Taxi (c39965), Omnibus (c39968)
   Das Theme zeichnet hinter der Timeline ein 30rem breites graues Band
   (.frame-type-mask_timeline .timeline::before, Farbe --bs-lighter). Hier nur fuer
   die drei Fachkunde-Seiten auf Anthrazit (--bs-body-color) gesetzt. Layout unveraendert;
   verbessert zugleich den Kontrast der weissen KI-Hinweise auf den Bildern.
   Startseite (c27924) absichtlich NICHT enthalten.
   ========================================================================== */
#c39925 .timeline::before,
#c39965 .timeline::before,
#c39968 .timeline::before {
    background-color: var(--bs-body-color, #484848); /* Anthrazit */
}

/* ==========================================================================
   Bild-Ueberlappung: Text links liegt ueber dem Bild rechts, das Bild ist
   links von einem gleichmaessig transparenten Weiss ueberdeckt und endet
   dort mit harter Kante (Vorbild: Entwuerfe "Sach- und Fachkunde").
   Erst ab 992 px aktiv - darunter bleibt die normale Stapelung unberuehrt,
   sonst wuerde Text auf Bild liegen.

   Die Mechanik ist spaltenunabhaengig ueber :first-child / :last-child
   gebaut, weil die Sektionen unterschiedliche Raster nutzen
   (col-lg-7/5 auf der Uebersicht, col-md-8/4 bei Gueterkraftverkehr).

   Aktive Sektionen:
     c35104 = "Sach- und Fachkunde", Seite 3156  -> schraege Kante bei 44 %
     c34947 = "Fachkunde Gueterkraftverkehr", Seite 3216 -> gerade Kante bei 51 %

   Kante und Deckkraft sind ausgemessen, nicht geschaetzt:
   - Die Kante muss rechts der laengsten Textzeile liegen (c35104: Text bis
     42 %, c34947: Text bis 48 %).
   - Deckkraft 0.88: die dunkelste Bildstelle wird damit 224/255, Kontrast
     zur Textfarbe 7,0:1 (noetig 4,5:1). Weniger Deckkraft = Text leidet.
   - Die Stopps liegen 0,3 % auseinander (rund 3 px) und nicht beide auf
     demselben Wert: Ein exakt harter Farbstopp wird vom Browser NICHT
     kantengeglaettet, bei der schraegen Kante sah man Treppenstufen.
     Nicht "aufraeumen" - das ist Absicht.

   Weitere Sektion aufnehmen: ID in die vier Selektorlisten ergaenzen und
   eine eigene ::after-Regel mit gemessener Kantenposition anlegen.
   ========================================================================== */
@media (min-width: 992px) {
    .svg-img-bleed .box > .container > .row,
    #c35104 .box > .container > .row,
    #c34947 .box > .container > .row,
    #c35033 .box > .container > .row,
    #c35107 .frame-container > .container > .row,
    #c35110 .box > .container > .row,
    #c35113 .box > .container > .row,
    #c41511 .box > .container > .row,
    #c41680 .box > .container > .row,
    #c35120 .box > .container > .row,
    #c35343 .box > .container > .row {
        position: relative;
    }
    /* Textspalte nach vorn */
    .svg-img-bleed .box > .container > .row > div:first-child,
    #c35104 .box > .container > .row > div:first-child,
    #c34947 .box > .container > .row > div:first-child,
    #c35033 .box > .container > .row > div:first-child,
    #c35107 .frame-container > .container > .row > div:first-child,
    #c35110 .box > .container > .row > div:first-child,
    #c35113 .box > .container > .row > div:first-child,
    #c41511 .box > .container > .row > div:first-child,
    #c41680 .box > .container > .row > div:first-child,
    #c35120 .box > .container > .row > div:first-child,
    #c35343 .box > .container > .row > div:first-child {
        position: relative;
        z-index: 2;
    }
    /* Bildspalte nach hinten, als Flexbox fuer volle Hoehe */
    .svg-img-bleed .box > .container > .row > div:last-child,
    #c35104 .box > .container > .row > div:last-child,
    #c34947 .box > .container > .row > div:last-child,
    #c35033 .box > .container > .row > div:last-child,
    #c35107 .frame-container > .container > .row > div:last-child,
    #c35110 .box > .container > .row > div:last-child,
    #c35113 .box > .container > .row > div:last-child,
    #c41511 .box > .container > .row > div:last-child,
    #c41680 .box > .container > .row > div:last-child,
    #c35120 .box > .container > .row > div:last-child,
    #c35343 .box > .container > .row > div:last-child {
        position: relative;
        z-index: 1;
        display: flex;
    }
    /* Bild nach links unter den Text ziehen. flex: 0 0 auto verhindert,
       dass die Flexbox die Ueberbreite wieder wegschrumpft. */
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image {
        position: relative;
        flex: 0 0 auto;
        align-self: stretch;
        margin-left: -90%;
        width: 190%;
    }
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image div,
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image figure,
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image div,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image div,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image figure,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image picture,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image div,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image div,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image picture {
        height: 100%;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image img,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image img,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image img,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image img,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image img,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
    /* weisser Schleier - gemeinsame Eigenschaften */
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c34947 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image::after,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
    }
    /* Uebersichtsseite (alle vier Abschnitte): schraege Kante bei 48 %.
       Messwerte und die Baender fuer schmalere Fenster: siehe Dateiende. */
    .svg-img-bleed .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image::after,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: linear-gradient(100deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 47.85%,
            rgba(255, 255, 255, 0) 48.15%);
    }
    /* Gueterkraftverkehr (c34947) + Omnibusverkehr (c35033): kleinerer
       Ueberhang als bei c35104, damit das Motiv (Lkw bzw. Bus)
       weitgehend ausserhalb des Schleiers liegt. Bewusst prozentual statt in px:
       so bleibt das Verhaeltnis Ueberhang zu Bildbreite ueber alle Desktop-
       breiten konstant (gemessen bei Container 1382/1140/960/860 px: Text endet
       bei 28,9-34,3 %, Spaltenkante bei 35,4-38,1 % der Bildbreite). Deshalb
       liegt die harte Kante unten bei 38 % - immer hinter der laengsten
       Textzeile, aber knapp genug, dass die Zugmaschine frei steht.
       object-position hilft hier NICHT: Bildverhaeltnis 1,340 vs. Boxverhaeltnis
       1,330 - cover schneidet seitlich fast nichts weg, es gibt keinen
       Verschiebespielraum. */
    #c34947 .box > .container > .row > div:last-child > .frame-type-image,
    #c35033 .box > .container > .row > div:last-child > .frame-type-image,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image {
        margin-left: -72%;
        width: 172%;
    }
    /* Gueterkraftverkehr: gerade Kante bei 38 % */
    #c34947 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c41511 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c41680 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35120 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 37.85%,
            rgba(255, 255, 255, 0) 38.15%);
    }
    /* Omnibusverkehr: gerade Kante bei 38 % (vorher schraeg bei 46 %).
       Auf Wunsch senkrecht wie bei c34947. Beim senkrechten Schnitt gibt es
       keine Auffaecherung ueber die Bildhoehe, deshalb genuegt ein Wert fuer
       alle Fensterbreiten. Gemessen: Inhaltskante der Textspalte bei 34,3 %
       der Bildbreite, also 26 px Luft - identisch zu c34947, weil beide
       Seiten dasselbe Raster (8/4) und dieselbe Boxbreite (717 px) haben. */
    #c35033 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 37.85%,
            rgba(255, 255, 255, 0) 38.15%);
    }
    /* ------------------------------------------------------------------
       Taxi und Mietwagen (c34991): gleicher Effekt wie c35104, aber als
       eigener Block. Grund: dieses Element ist ein anderer Inhaltstyp
       (container_2_columns_8-4, ohne Hintergrund) und hat deshalb den
       Wrapper .frame-container statt .box - es passt nicht in die
       Selektorgruppen oben. Ueberhang prozentual wie bei c34947, damit
       das Taxi (ab ca. 46 % der Bildbreite) ausserhalb des Schleiers
       bleibt. Diagonale wie bei Sach- und Fachkunde: 100deg bei 44 %.
       Die Kante wandert dadurch von 53 % (oben) auf 32 % (unten); die
       laengste Textzeile endet bei 34 % und liegt damit ueberall auf
       dem Schleier (engste Stelle ca. 47 px Luft).
       ------------------------------------------------------------------ */
    #c34991 .frame-container > .container > .row {
        position: relative;
    }
    #c34991 .frame-container > .container > .row > div:first-child {
        position: relative;
        z-index: 2;
    }
    #c34991 .frame-container > .container > .row > div:last-child {
        position: relative;
        z-index: 1;
        display: flex;
    }
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image {
        position: relative;
        flex: 0 0 auto;
        align-self: stretch;
        margin-left: -72%;
        width: 172%;
    }
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image div,
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image figure,
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image picture {
        height: 100%;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
    #c34991 .frame-container > .container > .row > div:last-child > .frame-type-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(100deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 43.85%,
            rgba(255, 255, 255, 0) 44.15%);
    }
}


/* ======================================================================
   Uebersichtsseite Aus- und Weiterbildung: Anpassung nach Fensterbreite.
   Die vier Abschnitte haben 7/12 Text und 5/12 Bild. Wird das Fenster
   schmaler, wird die Textspalte schmaler UND dadurch hoeher. Weil die
   Diagonale eine feste Neigung hat, wandert ihre Kante ueber eine hoehere
   Box weiter nach links - der Schleier deckt den Text dann nicht mehr ab.
   Gemessen (Haltepunkt fuer 30 px Luft zur laengsten Textzeile, Maximum
   ueber alle vier Abschnitte):
     Container 1382 (Fenster ab ~1600 px) -> 48 %   <- Wert oben im Block
     Container 1320 (1400-1599 px)        -> 46 %
     Container 1140 (1200-1399 px)        -> 52 %   <- Band unten
     Container  960 ( 992-1199 px)        -> weit ueber 60 %
   Unter 1200 px wird der Effekt deshalb ganz zurueckgenommen: der Schleier
   muesste dort fast das ganze Bild bedecken, das ist kein Effekt mehr.
   Das Bild sitzt dann wieder normal in seiner Spalte.
   ====================================================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Kante bei 52 % statt 48 % - schmalerer Container, hoehere Box */
    #c35104 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image::after,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: linear-gradient(100deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 51.85%,
            rgba(255, 255, 255, 0) 52.15%);
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Effekt zuruecknehmen: Bild normal in der Spalte, kein Schleier */
    #c35104 .box > .container > .row > div:last-child,
    #c35107 .frame-container > .container > .row > div:last-child,
    #c35110 .box > .container > .row > div:last-child,
    #c35113 .box > .container > .row > div:last-child {
        display: block;
    }
    #c35104 .box > .container > .row > div:last-child > .frame-type-image,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image {
        margin-left: 0;
        width: 100%;
    }
    #c35104 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35104 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image div,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image figure,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image picture,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image img,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image img,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image img {
        height: auto;
    }
    #c35104 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35107 .frame-container > .container > .row > div:last-child > .frame-type-image::after,
    #c35110 .box > .container > .row > div:last-child > .frame-type-image::after,
    #c35113 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: none;
    }
}

/* ----------------------------------------------------------------------
   Auffrischungskurs Gefahrgutbeauftragter (c35343): Bildhoehe begrenzen.
   Besonderheit dieser Seite: in der Textspalte steht nicht nur Ueberschrift
   und Einleitung, sondern darunter auch die Tabgruppe (Termine / Lehrmittel)
   und der Preis. Die Spalte ist deshalb 890 px hoch - das auf Spaltenhoehe
   gestreckte Bild lief bis unter die Tabs. Auf den Schwesterseiten steht in
   der Spalte nur Ueberschrift und Text, dort ist das Strecken richtig.
   Loesung: hier nicht strecken (align-self: flex-start, Hoehen auf auto),
   dann folgt die Hoehe dem Seitenverhaeltnis des Bildes. Damit sie unter den
   Tabs bleibt, ist der Ueberhang kleiner: -62% statt -72% -> Box 675 x 509.
   Gemessen: Einleitungstext endet bei 506 px, Tab-Buttons beginnen bei
   522 px -> 14 px Luft.
   Bewusst KEINE feste Pixelhoehe: bei schmalerem Fenster wird der Text
   hoeher und das Bild kleiner, die Tabs bleiben dadurch automatisch frei.
   Kante deshalb bei 34 % statt 38 % - die Textkante liegt bei der
   schmaleren Box bei 30,3 %, das sind 25 px Luft.
   ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    #c35343 .box > .container > .row > div:last-child > .frame-type-image {
        align-self: flex-start;
        margin-left: -62%;
        width: 162%;
    }
    #c35343 .box > .container > .row > div:last-child > .frame-type-image div,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image figure,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image picture,
    #c35343 .box > .container > .row > div:last-child > .frame-type-image img {
        height: auto;
    }
    #c35343 .box > .container > .row > div:last-child > .frame-type-image::after {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.88) 0,
            rgba(255, 255, 255, 0.88) 33.85%,
            rgba(255, 255, 255, 0) 34.15%);
    }
}

/* ======================================================================
   LEARNING-FEED (Seite UID 6102, /learning-feed)
   Ausgelagert aus fuenf HTML-Inhaltselementen auf der Seite, damit kein
   eigenes CSS mehr im Seiteninhalt steht (Regel von Markus).
   Herkunft: tt_content 39837, 39827, 39824, 39822, 39818.

   WICHTIG - warum alles mit #p6102 beginnt:
   Die Original-Selektoren sind sehr allgemein (.device, .custom-footer,
   #device-container, body). Inline im Seiteninhalt war das unkritisch, weil
   sie nur auf dieser Seite geladen wurden. In dieser Datei gelten sie
   siteweit - deshalb ist jede Regel auf die Seiten-ID am body-Tag
   (#p6102) eingeschraenkt. Beim Umbenennen/Neuanlegen der Seite aendert
   sich diese ID.
   Ebenso umbenannt: die Keyframes heissen jetzt lf-ll-float und
   lf-svg-awards-scroll, damit sie nicht mit gleichnamigen Keyframes
   anderer Seiten kollidieren (die Abo-Seite hat eine eigene Kopie).

   OFFEN - Schriftart: aus tt_content 39822 stammt eine Regel, die die
   Schriftart der GANZEN Seite auf Arial setzt (im Original body, html).
   Sie ist hier 1:1 uebernommen, damit sich die Darstellung durch das
   Verlagern nicht aendert. Markus will die Schriftarten raus - dazu muss
   nur die font-family-Zeile in der #p6102-Regel unten geloescht werden,
   dann greift wieder die Theme-Schrift.
   ====================================================================== */

/* --- aus tt_content 39837: Vorteilsboxen: H3-Farbe schwarz auf gelb + gleiche Hoehe pro Reihe + Hover + Float-Animation der Datei-Logos --- */
/* Original-Kommentare: Vorteilsboxen mit gelbem Hintergrund: H3-Überschrift schwarz statt wei | Vorteilsboxen: Gleiche Höhe innerhalb einer Reihe (ab tablet/desktop) | Dezenter Hover-Effekt: Scale + Schatten (translate(0,0) damit Scroll-R | Float-Animation für PowerPoint/Word/PDF-Logos */
#p6102 .frame-background-primary header h3,
#p6102 .frame-background-primary .ce-headline-center {
    color: rgb(0, 0, 0);
}
@media (min-width: 768px) {
    #p6102 .col-md-4 > .frame.frame-background-primary,
    #p6102 .col-md-4 > .frame.frame-background-primary > .container,
    #p6102 .col-md-4 > .frame.frame-background-primary > .container > .box {
        height: 100%;
    }
}
#p6102 .col-md-4 > .frame.frame-background-primary {
    transition: transform 0.25s, box-shadow 0.25s;
}
#p6102 .col-md-4 > .frame.frame-background-primary:hover {
    transform: translate(0px, 0px) scale(1.03);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px;
}
@media (prefers-reduced-motion: reduce) {
    #p6102 .col-md-4 > .frame.frame-background-primary:hover {
        transform: translate(0px, 0px);
    }
}
@keyframes lf-ll-float {
    0%, 100% { transform: translateY(0px) rotate(-3deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}
#p6102 img[src*="learning-feed-powerpoint-icon"],
#p6102 img[src*="learning-feed-word-icon"],
#p6102 img[src*="learning-feed-pdf-icon"] {
    animation: 3.2s ease-in-out 0s infinite normal none running lf-ll-float;
    will-change: transform;
}
#p6102 img[src*="learning-feed-word-icon"] {
    animation-duration: 3.8s;
    animation-delay: -0.6s;
}
#p6102 img[src*="learning-feed-pdf-icon"] {
    animation-duration: 4.4s;
    animation-delay: -1.3s;
}
@media (prefers-reduced-motion: reduce) {
    #p6102 img[src*="learning-feed-powerpoint-icon"],
    #p6102 img[src*="learning-feed-word-icon"],
    #p6102 img[src*="learning-feed-pdf-icon"] {
        animation: auto ease 0s 1 normal none running none;
    }
}

/* --- aus tt_content 39827: Sektion "Erfolg durch digitales Lernen" (.custom-container) --- */
/* Original-Kommentare: Kleinere Schriftgröße für die Überschrift | Farbanpassung für die Überschrift | Kleinere Schriftgröße für den Text | Farbanpassung für den Text | Abstand zwischen den Logos | Größere Logos in der Webversion */
#p6102 .custom-container {
    text-align: center;
    padding: 20px;
}
#p6102 .custom-container h2 {
    font-size: 2.5vw;
    margin-bottom: 10px;
    color: rgb(74, 45, 40);
}
#p6102 .custom-container p {
    font-size: 1.8vw;
    color: rgb(74, 45, 40);
    margin-bottom: 20px;
}
#p6102 .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#p6102 .logos img {
    width: 20vw;
    max-width: 200px;
    transition: transform 0.3s;
}
#p6102 .logos img:hover {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    #p6102 .custom-container h2 {
        font-size: 6vw;
    }
    #p6102 .custom-container p {
        font-size: 4vw;
    }
    #p6102 .logos img {
        width: 25vw;
    }
}

/* --- aus tt_content 39824: Feature-Sektion (.custom-feature-container) --- */
/* Original-Kommentare: Noch größere Schriftgröße für die Überschrift | gleiche Farbe wie die Hauptüberschrift | Noch größere Schriftgröße für den Text | Angepasste Schriftgröße für die Überschrift bei kleineren Bildschirmen | Angepasste Schriftgröße für den Text bei kleineren Bildschirmen | Angepasste Schriftgröße für die Überschrift bei sehr kleinen Bildschir */
#p6102 .custom-feature-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 2rem 0px;
    text-align: center;
}
#p6102 .custom-feature-box {
    flex: 1 1 23%;
    max-width: 23%;
    background-color: rgb(245, 245, 245);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
    text-align: center;
    transition: transform 0.3s;
    position: relative;
}
#p6102 .custom-feature-box .image-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#p6102 .custom-feature-box img {
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}
#p6102 .custom-feature-box:hover img {
    transform: scale(1.1);
}
#p6102 .custom-feature-box h3 {
    font-size: 1.8rem;
    margin: 10px 0px;
    color: rgb(74, 45, 40);
}
#p6102 .custom-feature-box p {
    font-size: 1.4rem;
    color: rgb(119, 119, 119);
    padding: 0px 10px 20px;
}
@media (max-width: 768px) {
    #p6102 .custom-feature-box {
        flex: 1 1 45%;
        max-width: 45%;
    }
    #p6102 .custom-feature-box h3 {
        font-size: 2rem;
    }
    #p6102 .custom-feature-box p {
        font-size: 1.5rem;
    }
}
@media (max-width: 480px) {
    #p6102 .custom-feature-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
    #p6102 .custom-feature-box h3 {
        font-size: 1.8rem;
    }
    #p6102 .custom-feature-box p {
        font-size: 1.4rem;
    }
}
#p6102 .reset-text-align {
    text-align: left;
}

/* --- aus tt_content 39822: Geraete-Sektion (#device-container, .device) + Footer-Block + Seiten-Schriftart --- */
/* Original-Kommentare: Schriftgröße für die Anmerkung | Farbanpassung für die Anmerkung | Leichter Abstand nach oben | Angepasste Schriftgröße für mobile Ansicht | Erhöhte Polsterung für größere Hintergrundgröße | Verhindert Umbrüche */
#p6102 {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    height: 100%;
}
#p6102 .custom-footer {
    text-align: center;
    font-size: 1.2vw;
    color: rgb(74, 45, 40);
    font-style: italic;
    max-width: 80vw;
    margin: 10px auto;
}
@media (max-width: 768px) {
    #p6102 .custom-footer {
        font-size: 3vw;
        max-width: 90vw;
    }
}
#p6102 #device-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding-top: 0px;
    background-color: transparent;
}
#p6102 .device {
    position: relative;
    width: 80vw;
    max-width: 1280px;
    height: 0px;
    padding-bottom: 62.5%;
    background-color: rgb(51, 51, 51);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
    margin: 0px auto;
}
#p6102 .device .screen {
    position: absolute;
    inset: 2%;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}
#p6102 .device iframe {
    width: 100%;
    height: 100%;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
}
@media (max-width: 767px) {
    #p6102 .device {
        width: 100vw;
        max-width: 360px;
        padding-bottom: 200%;
        border-radius: 30px;
        margin: 0px auto;
    }
    #p6102 .device .screen {
        border-radius: 30px;
        inset: 2%;
    }
    #p6102 .device iframe {
        border-radius: 30px;
    }
}
@media (max-width: 767px) and (orientation: landscape) {
    #p6102 .device {
        max-width: 780px;
        padding-bottom: 46.15%;
        border-radius: 20px;
        margin: 0px auto;
    }
    #p6102 .device .screen {
        border-radius: 20px;
    }
    #p6102 .device iframe {
        border-radius: 20px;
    }
}
#p6102 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}
#p6102 .switch input {
    opacity: 0;
    width: 0px;
    height: 0px;
}
#p6102 .slider {
    position: absolute;
    cursor: pointer;
    inset: 0px;
    background-color: rgb(204, 204, 204);
    transition: 0.4s;
    border-radius: 34px;
}
#p6102 .slider::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
#p6102 input:checked + .slider {
    background-color: rgb(0, 158, 62);
}
#p6102 input:checked + .slider::before {
    transform: translateX(26px);
}
#p6102 .switch-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: rgb(255, 209, 0);
    padding: 5px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* --- aus tt_content 39818: Awards-Marquee (#svg-awards-marquee) --- */
#p6102 #svg-awards-marquee {
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
    margin: 0px auto;
    mask-image: linear-gradient(to right, transparent 0px, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent 100%);
}
#p6102 #svg-awards-marquee-track {
    display: flex;
    width: max-content;
    animation: 30s linear 0s infinite normal none running lf-svg-awards-scroll;
    will-change: transform;
}
#p6102 #svg-awards-marquee:hover #svg-awards-marquee-track {
    animation-play-state: paused;
}
#p6102 .svg-award-item {
    flex: 0 0 250px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#p6102 .svg-award-item img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
#p6102 .svg-award-item a {
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}
#p6102 .svg-award-item a:hover {
    transform: scale(1.08);
}
@keyframes lf-svg-awards-scroll {
    0% { transform: translateX(0px); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
    #p6102 .svg-award-item {
        flex: 0 0 180px;
    }
    #p6102 .svg-award-item img {
        width: 140px;
        height: 140px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #p6102 #svg-awards-marquee-track {
        animation: auto ease 0s 1 normal none running none;
    }
}


/* ---------------------------------------------------------------
   Leitbild der SVG-Akademie (Seite 5636) - Korrekturen 18.08.2026
   --------------------------------------------------------------- */

/* Claim-Band "Wofuer wir stehen" (c42077): Der gelbe Ueberschriften-
   Akzent background-h2::before sitzt bei left:-46px und ragte damit
   14px links aus dem gelben Kasten heraus. Auf farbigem Grund wird
   er nicht gebraucht. */
#c42077 h2.background-h2::before {
    display: none;
}

/* Hinweis Claim-Band c42077: Als "Extrabreit" (container-fluid) stiess der
   gelbe Kasten rechts an den Kontakt-Reiter und begann links deutlich vor
   dem Seitenraster. Das Element steht jetzt auf normaler Seitenbreite,
   eine Ausgleichsregel fuer den rechten Rand ist nicht mehr noetig. */

/* Abschluss-CTA (c42084): Button und die Zeile "Mehr ueber uns"
   standen ohne Abstand direkt aufeinander. */
#c42084 .btn-wrap {
    margin-top: 32px;
    margin-bottom: 24px;
}

/* Element "Unser Umgang mit KI" (c42085): Das Award-Bild stand oben
   buendig und endete rund 40px vor dem Textende. Die Bildspalte wird
   jetzt vertikal zum Text zentriert und bekommt einen gelben Rahmen
   mit weissem Zwischenraum. */
@media (min-width: 768px) {
    #c42085 .row > .col-img-maxw { align-self: center; }
}

#c42085 figure.image {
    padding: 14px;
    background-color: #ffffff;
    border: 3px solid var(--bs-primary, #ffd700);
}

/* Die Kaertchen-Bloecke "Haltung & innere Werte" (c42073) und "Unser
   Anspruch fuer Kunden & Interessenten" (c42074) sind bewusst dasselbe
   Element in zwei Farbvarianten. Damit sie nicht zweimal identisch
   wirken, wird der untere Block gespiegelt: gelber Kasten samt
   Ueberschrift rechts, Kaertchen nach links versetzt. */
#c42074 .inner .background {
    left: auto;
    right: 0;
}

#c42074 .inner .title {
    padding-left: 0;
    padding-right: 2.75rem;
    text-align: right;
}

#c42074 .inner > .row > .offset-1 {
    margin-left: 0;
    margin-right: 8.33333333%;
}

@media (min-width: 992px) {
    #c42074 .inner > .row > .offset-lg-2 { margin-right: 16.66666667%; }
}

/* Abschlussblock "Was wir bewusst nicht versprechen" bis Button (c42084)
   bekommt einen grauen Rahmen. Der Innenabstand ist links groesser, weil
   der gelbe Akzent der H2 46px nach links ueber die Ueberschrift hinaus-
   ragt und sonst durch die Rahmenlinie stechen wuerde. */
#c42084 .row {
    margin-left: 0;
    margin-right: 0;
}

#c42084 .row > .col-12 {
    padding: 3rem 3rem 3rem 4.5rem;
    border: 4px solid var(--bs-gray, #a5a5a5);
    border-radius: 0.625rem;
}

@media (max-width: 767.98px) {
    #c42084 .row > .col-12 { padding: 2rem 1.5rem 2rem 3.5rem; }
}

/* Die untere Kaertchen-Gruppe (c42074) ist die Spiegelung der oberen,
   deshalb laufen Text und Icon in den weissen Kaertchen rechtsbuendig.
   Die Karte ist ein Flex-Container in Spaltenrichtung und das Icon ein
   Element mit fit-content-Breite, darum align-self statt text-align. */
#c42074 .yellow-box {
    text-align: right;
}

#c42074 .yellow-box .icon-wrap {
    align-self: flex-end;
}

/* Ein Inhaltsverzeichnis (mask_inhaltsverzeichnis), das frei auf der Seite
   steht, wird als schmale zentrierte Sprungleiste dargestellt statt als
   hoher Kasten - so entsteht daneben keine leere Flaeche. Steckt das
   Element in einem Container (z. B. EU-AI-Act-Seite), greift die Regel
   nicht und die schmale Spaltenform bleibt erhalten. */
#page-content > .section > .frame-type-mask_inhaltsverzeichnis .box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px 28px;
    background-color: #f2f2f2;
    padding: 14px 24px;
    border-radius: 0.625rem;
}

#page-content > .section > .frame-type-mask_inhaltsverzeichnis .title {
    padding: 0;
    background: none;
    text-align: center;
    flex: 0 0 auto;
    font-weight: 700;
}

#page-content > .section > .frame-type-mask_inhaltsverzeichnis .links-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    padding: 0;
    background: none;
    flex: 0 1 auto;
}

#page-content > .section > .frame-type-mask_inhaltsverzeichnis .links-box p {
    margin: 0;
    text-align: center;
}

/* ==========================================================================
   Auszeichnungen (Seite 4085) - Seitentitel c42129
   Die H1 soll sich bewusst von den Abschnitts-Ueberschriften abheben:
   groesser, ohne gelben Block dahinter, dafuer eine gelbe Linie darunter
   ueber die volle Containerbreite. Der .box-Wrapper bekommt kein seitliches
   Padding, damit die H1 mit den uebrigen Elementen der Seite fluchtet.
   ========================================================================== */
#c42129 .box {
    padding-left: 0;
    padding-right: 0;
}
#c42129 h1 {
    font-size: 3.6rem;
    line-height: 1.12;
    margin-bottom: 0;
}
#c42129 h1::after {
    content: "";
    display: block;
    width: 100%;
    height: 7px;
    background-color: var(--bs-primary, #ffd700);
    margin-top: 1.4rem;
}
@media (max-width: 767.98px) {
    #c42129 h1 {
        font-size: 2.2rem;
    }
    #c42129 h1::after {
        height: 5px;
        margin-top: 1rem;
    }
}

/* ==========================================================================
   Brandschutzunterweisung (Seite /e-learning/brandschutzunterweisung)
   Umgezogen am 26.08.2026 aus fuenf <style>-Bloecken, die direkt in den
   HTML-Inhaltselementen c40704, c40705, c40707, c40708 und c40710 standen.
   Alle Selektoren sind auf die Klassen mit dem Praefix bsx- beschraenkt;
   diese Klassen kommen ausschliesslich auf dieser Seite vor (geprueft).
   Inhaltlich unveraendert uebernommen.
   ========================================================================== */
/* --- aus Inhaltselement c40704 (Warum jaehrlich unterweisen (3 Fakten + Zitat)) --- */
.bsx-warum{padding:8px 15px 0}
.bsx-warum .bsx-sub{max-width:760px;margin:0 auto 28px}
.bsx-warum .bsx-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.bsx-warum .bsx-fakt{background:#fff;border:1px solid #ddd;border-top:6px solid #ffd500;padding:22px;text-align:center}
.bsx-warum .bsx-fakt h3{font-size:1.5rem;margin:0 0 8px}
.bsx-warum .bsx-fakt p{margin:0}
.bsx-warum .bsx-zitat{max-width:860px;margin:28px auto 0;border-left:4px solid #ffd500;padding:4px 0 4px 18px;font-style:italic;color:#555;font-size:1.4rem}
.bsx-warum .bsx-zitat span{display:block;font-style:normal;font-size:1rem;color:#888;margin-top:6px}
@media(max-width:900px){.bsx-warum .bsx-fakten{grid-template-columns:1fr}}
.bsx-warum .bsx-zitat::before{content:none!important}

/* --- aus Inhaltselement c40705 (Das lernen Ihre Mitarbeiter (6 Kacheln)) --- */
.bsx-themen{padding:8px 15px 0}
.bsx-themen .bsx-sub{margin:0 auto 24px}
.bsx-themen .bsx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.bsx-themen .bsx-thema{background:#fff;border:1px solid #ddd;padding:16px 18px}
.bsx-themen .bsx-thema h3{font-size:1rem;margin:0 0 5px}
.bsx-themen .bsx-thema p{font-size:.88rem;margin:0;color:#444}
.bsx-themen .bsx-hinweis{margin:26px auto 0}
@media(max-width:900px){.bsx-themen .bsx-grid{grid-template-columns:1fr}}

/* --- aus Inhaltselement c40707 (In wenigen Schritten zur fertigen Unterweisung) --- */
.bsx-ablauf{padding:8px 15px 16px}
.bsx-ablauf .bsx-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1060px;margin:24px auto 0}
.bsx-ablauf .bsx-schritt{background:#fff;border:1px solid #ddd;padding:18px}
.bsx-ablauf .bsx-nr{display:inline-flex;width:34px;height:34px;background:#ffd500;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px;font-size:1.05rem}
.bsx-ablauf .bsx-schritt h3{font-size:.98rem;margin:0 0 6px}
.bsx-ablauf .bsx-schritt p{font-size:.87rem;margin:0;color:#444}
.bsx-ablauf .bsx-detail{font-size:.9rem;text-decoration:underline}
@media(max-width:900px){.bsx-ablauf .bsx-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bsx-ablauf .bsx-grid4{grid-template-columns:1fr}}

/* --- aus Inhaltselement c40708 (Ihre Vorteile im SVG-Lernportal) --- */
.bsx-vorteile{padding:8px 15px 16px}
.bsx-vorteile .bsx-sub{margin:0 auto 22px}
.bsx-vorteile .bsx-chips{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1000px;margin:0 auto;padding:0}
.bsx-vorteile .bsx-chips li{background:#f4f4f4;border:1px solid #e2e2e2;padding:14px 16px;font-size:1.4rem;line-height:1.4}
.bsx-vorteile .bsx-links{margin:24px auto 0;font-size:1.4rem}
.bsx-vorteile .bsx-links a{text-decoration:underline}
@media(max-width:900px){.bsx-vorteile .bsx-chips{grid-template-columns:1fr}}
.bsx-vorteile .bsx-chips li{margin:0!important}

/* --- aus Inhaltselement c40710 (Weitere Kurse zum Thema Sicherheitsunterweisung) --- */
.bsx-kurse{padding:8px 15px 16px}

/* ==========================================================================
   Kunden & Partner (Seite /unternehmen/kunden-partner) - Logo-Galerie c35286
   Die Bildunterschrift klebte ohne Abstand am Logo, und zwischen den Zeilen
   lagen nur 10px. Dadurch stand die Unterschrift optisch fast so nah am
   folgenden Logo wie an ihrem eigenen.
   Der Abstand sitzt an der Spalte, nicht an der Zeile - sonst greift er auf
   Mobil nicht, wo die Spalten innerhalb einer Zeile umbrechen. Das negative
   margin am Container faengt den ueberzaehligen Abstand nach der letzten
   Reihe wieder ab.
   ========================================================================== */
#c35286 figure.image figcaption {
    margin-top: 10px;
    /* display + width sind noetig, nicht kosmetisch: ohne sie ist die
       Unterschrift nur so breit wie ihr Text und die Zentrierung sitzt
       nicht unter der Bildmitte, sondern versetzt nach links. */
    display: block;
    width: 100%;
    text-align: center;
}
#c35286 .ce-column {
    margin-bottom: 40px;
}
#c35286 .ce-row {
    margin-bottom: 0;
}
#c35286 .ce-inner {
    margin-bottom: -40px;
}

/* Kontakt & Team - Team-Grid c40623
   Umgezogen aus dem <style>-Block des Elements (31.08.2026).
   Alle Selektoren sind mit .svgkt- praefigiert; Formatierung bewusst
   zeichengenau uebernommen, damit sich die Darstellung nicht aendert. */
.svgkt-marker { font-size: 34px; font-weight: 700; margin: 0 0 24px; position: relative; }
.svgkt-marker::before { content: ""; position: absolute; left: -12px; top: -6px;
  width: 170px; height: 34px; background: #FFD700; z-index: -1; }
.svgkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.svgkt-card { border: 1px solid #e4e4e4; border-radius: 14px; overflow: hidden;
  background: #fff; transition: box-shadow .25s, transform .25s; }
.svgkt-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-4px); }
.svgkt-card-body { padding: 16px 16px 18px; }
.svgkt-card h3 { font-size: 21px; margin-bottom: 2px; }
.svgkt-rolle { font-size: 15px; color: #7c7c7c; min-height: 42px; margin-bottom: 10px; }
.svgkt-kontaktdaten { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.svgkt-kzeile { color: #484848; text-decoration: none; font-size: 15px; }
.svgkt-kzeile:hover { text-decoration: underline; }
.svgkt-kzeile-leer { color: #a5a5a5; font-style: italic; }
.svgkt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.svgkt-btn { display: inline-block; border-radius: 48px; padding: 8px 18px; font-weight: 700;
  font-size: 14.5px; text-decoration: none; transition: all .2s; }
.svgkt-btn-gelb { background: #FFD700; color: #484848; }
.svgkt-btn-gelb:hover { background: #e8c400; }
.svgkt-btn-outline { border: 2px solid #484848; color: #484848; padding: 6px 16px; }
.svgkt-btn-outline:hover { background: #484848; color: #fff; }
.svgkt-foto { aspect-ratio: 1/1; overflow: hidden; background: #ddd; position: relative; }
.svgkt-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1); transition: filter .4s ease, transform .4s ease; }
.svgkt-card:hover .svgkt-foto img { filter: grayscale(0); transform: scale(1.03); }
.svgkt-foto-platzhalter { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; background: repeating-linear-gradient(45deg,
  #ececec, #ececec 12px, #e2e2e2 12px, #e2e2e2 24px); color: #9a9a9a; }
.svgkt-foto-platzhalter span { font-size: 42px; font-weight: 700; }
.svgkt-foto-platzhalter em { font-size: 13px; font-style: normal; }

/* Ausblenden der Rückrufformular Links im Flyout (global) */

div.mb-lg-3:has(a[href$="#rueckrufformular"]) {
    display: none !important;
}

a.btn.btn-img-icon.unfold-col-ansprechpersonen[href$="#ansprechpersonen"] {
    display: none !important;
}