/* ================================================================
 * Section variant: .themenwelt — Themenwelt-Grid mit Gradient-Tiles
 * ================================================================
 * CMS setzt css_element_name="themenwelt" auf dem Magazine-Eintrag
 * (Render: <section class="themenwelt"> als Content-Section). Drin
 * werden die einzelnen Themenwelten als innere <section>-Tiles ins
 * Text-Feld gepflegt, z.B.:
 *
 *   <section class="themenwelt">
 *     <section>
 *       <p>Werbemittel</p>
 *       <hgroup><h2>Apotheken</h2></hgroup>
 *       <p><a class="link intern" href="…">Check it out!</a></p>
 *     </section>
 *     <section>…</section>
 *     …
 *   </section>
 *
 * Der Overline-<p> darf optional in <hgroup> wandern — CSS behandelt
 * beide Varianten (greift direkt auf <p>-Siblings & hgroup > p).
 */

.themenwelt{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(22rem, 1fr));
    gap:.5rem;
    padding:0;
}

.themenwelt > section{
    position:relative;
    aspect-ratio:4 / 3;
    min-height:12rem;
    overflow:hidden;
    border-radius:.5rem;

    /* Animierter Multi-Color-Gradient (OKLCH mit RGB-Fallback) */
    background:linear-gradient(
        135deg,
        rgb(110,14,200) 0%,
        rgb(240,28,72) 50%,
        rgb(250,186,108) 100%
    );
    background:linear-gradient(
        135deg,
        oklch(42% 0.24 305) 0%,
        oklch(60% 0.26 20) 50%,
        oklch(78% 0.16 70) 100%
    );
    background-size:400% 400%;
    animation:gradient-shift 18s ease infinite;

    color:#fff;
    padding:1.25rem 1.5rem;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:.5rem;
}

/* Button-Paragraph schiebt sich nach unten rechts */
.themenwelt > section > p:last-child{
    margin:auto 0 0 0;
    padding:0;
    align-self:flex-end;
}

/* Overline — erster <p> direkt in der Tile (ausserhalb hgroup) ODER
 * erstes <p> innerhalb hgroup. Gleiche Optik. */
.themenwelt > section > p:first-child,
.themenwelt > section hgroup > p{
    margin:0;
    padding:0;
    font-size:.85rem;
    font-weight:500;
    opacity:.85;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.05em;
}

/* Headline — <h?> egal ob in hgroup oder direkt */
.themenwelt > section hgroup{
    margin:0;
    padding:0;
    color:#fff;
}

.themenwelt > section hgroup > :is(h1,h2,h3,h4,h5,h6),
.themenwelt > section > :is(h1,h2,h3,h4,h5,h6){
    margin:0;
    padding:0;
    font-size:1.75rem;
    line-height:1.15;
    color:#fff;
    font-weight:600;
}

/* Button-Paragraph wird weiter oben positioniert (margin-top:auto +
 * align-self:flex-end) — hier nur noch default-Margins killen. */

/* Glas-Button */
.themenwelt > section a.link{
    display:inline-block;
    padding:.55rem 1.15rem;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.5);
    border-radius:.3rem;
    color:#fff;
    font-size:.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease;
}

.themenwelt > section a.link:hover{
    background:rgba(255,255,255,.35);
    border-color:rgba(255,255,255,.8);
}

/* Mobile: kompakter */
@media (max-width: 44.999rem){
    .themenwelt > section{
        aspect-ratio:16 / 9;
        min-height:10rem;
    }
    .themenwelt > section hgroup > :is(h1,h2,h3,h4,h5,h6),
    .themenwelt > section > :is(h1,h2,h3,h4,h5,h6){
        font-size:1.35rem;
    }
}