/* =====================================================================
   ONLINE COACHING — "Die Digitalen Masterclasses"
   ---------------------------------------------------------------------
   Vier gleich grosse Karten im 2x2-Raster (585x484px bei 1440). Der
   Block war bei 390px 3047px hoch - dreieinhalb Bildschirme fuer vier
   Angebote. Ursache waren nicht nur die Texte: die Karten trugen
   50px Innenrand, bei 342px Kartenbreite blieben davon 242px Text.

   Jetzt ein asymmetrisches Raster:
     Reihe 1  Online Personal Training (ueber beide Spalten)
     Reihe 2  Breathwork   Ernaehrungsanalyse
     Reihe 3  Ganzheitliches Paket (ueber beide Spalten)

   Dazu ein grosses ruhiges Hintergrundsymbol je Karte - dieselbe
   Sprache wie auf den uebrigen Seiten. Die roemische Ziffer trug den
   Blickfang schon vorher.

   Zur Spezifitaet: die Kartenstile stehen im <style>-Block im Body,
   also NACH dieser Datei. Wo hier !important steht, ist es deshalb
   noetig.
   ===================================================================== */

@media (min-width: 1025px) {
    html body .oc-master-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
    /* Eine hohe Leitkachel war hier falsch: alle vier Karten tragen
       etwa gleich viel Inhalt, die hohe waere auf 1080px gestreckt
       worden und zur Haelfte leer geblieben (gemessen). Stattdessen
       rahmen zwei breite Karten das Paar in der Mitte. */
    html body .oc-mc--1 { grid-column: 1 / -1; }
    html body .oc-mc--4 { grid-column: 1 / -1; }

    /* Die breiten Karten stellen Text und Punkte nebeneinander -
       ein Absatz ueber 1150px waere sonst gezogen. */
    html body .oc-mc--1,
    html body .oc-mc--4 {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        grid-template-rows: auto auto auto;
        column-gap: 40px;
        align-items: start;
    }
    html body .oc-mc--1 > .oc-card-icon-container,
    html body .oc-mc--4 > .oc-card-icon-container { grid-column: 1; grid-row: 1; }
    html body .oc-mc--1 > h3,
    html body .oc-mc--4 > h3 { grid-column: 1; grid-row: 2; }
    html body .oc-mc--1 > p,
    html body .oc-mc--4 > p { grid-column: 1; grid-row: 3; margin-bottom: 0 !important; }
    html body .oc-mc--1 > .oc-card-list,
    html body .oc-mc--4 > .oc-card-list { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

html body .oc-mc { min-width: 0; }

/* Grosses ruhiges Hintergrundsymbol */
html body .oc-ghost {
    position: absolute;
    right: -18px; bottom: -22px;
    width: 134px; height: 134px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
html body .oc-ghost svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #E5B83B;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #E5B83B;
}
html body .oc-mc:hover .oc-ghost { transform: scale(1.14) rotate(-7deg); opacity: .13; }
html body .oc-mc--1 .oc-ghost,
html body .oc-mc--4 .oc-ghost { width: 182px; height: 182px; }

/* Alles ausser dem Hintergrundsymbol bleibt darueber */
html body .oc-mc > *:not(.oc-ghost):not(.oc-card-glow) { position: relative; z-index: 2; }

/* Ruhiges Dauerleuchten der Symbolkachel, versetzt */
html body .oc-mc.fx-in .oc-card-icon-container { animation: ocIcoPulse 7s ease-in-out infinite; }
html body .oc-mc--2.fx-in .oc-card-icon-container { animation-delay: 1.1s; }
html body .oc-mc--3.fx-in .oc-card-icon-container { animation-delay: 2.2s; }
html body .oc-mc--4.fx-in .oc-card-icon-container { animation-delay: 3.3s; }
@keyframes ocIcoPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); }
    45%      { box-shadow: 0 0 26px rgba(202, 138, 4, .3); }
}

/* Laufzeiten der Goldkante auseinanderziehen */
html body .oc-mc--1.fx-in::after { animation-duration: 13s, 2.8s; }
html body .oc-mc--2.fx-in::after { animation-duration: 16s, 2.8s; }
html body .oc-mc--3.fx-in::after { animation-duration: 19s, 2.8s; }
html body .oc-mc--4.fx-in::after { animation-duration: 22s, 2.8s; }

/* Die Seite deckelt das Raster ab 1024px auf max-width: 600px. Bei
   976px verfuegbarer Innenbreite blieben die Karten dadurch 292px
   breit - abzueglich Innenrand 236px Text auf einem Tablet. Der
   Deckel gilt jetzt nur noch fuer die einspaltige Ansicht, wo eine
   Karte ueber die volle Breite gezogen aussaehe. */
@media (min-width: 769px) and (max-width: 1024px) {
    html body .oc-master-grid {
        max-width: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    html body .oc-master-card { padding: 34px 28px !important; }
}
@media (max-width: 768px) {
    html body .oc-master-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px !important;
        margin-inline: auto;
        gap: 14px;
    }
    /* 50px Innenrand liessen bei 342px Kartenbreite nur 242px Text */
    html body .oc-master-card { padding: 26px 20px !important; border-radius: 22px; }
    html body .oc-ghost,
    html body .oc-mc--1 .oc-ghost,
    html body .oc-mc--4 .oc-ghost { width: 104px; height: 104px; right: -14px; bottom: -16px; }
    html body .oc-bento-card { padding: 26px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html body .oc-mc.fx-in .oc-card-icon-container { animation: none !important; }
}