/* ============================================================
   RIF OBERES FREIAMT
   SYSTEM 8 / bereinigte Arbeitsbasis
   Stand: 2026-08-18

   Grundsatz:
   - RIF-Designregeln bleiben erhalten.
   - doppelte / überholte Definitionen sind konsolidiert.
   - System-8-spezifische Ergänzungen stehen gesammelt.
============================================================ */


/* ============================================================
   ROOT
============================================================ */

:root {
    --rif-dark: #1f2b29;
    --rif-text: #4f5f5a;
    --rif-green: #26765f;
    --rif-soft: #fbf7ef;
    --rif-line: rgba(31,43,41,.13);
}


/* ============================================================
   RESET / BASIS
============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--rif-dark);
    background: #fff;
}

.rif-page a {
    transition:
        color .42s ease,
        background-color .42s ease,
        border-color .42s ease,
        box-shadow .42s ease,
        transform .42s ease;
}




/* ============================================================
   RIF SITE WRAPPER
   Begrenzung für sehr breite Displays
============================================================ */

.rif-site {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   PAGE / HINTERGRUND
============================================================ */

.rif-page {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(244,216,198,.72) 0,
            rgba(244,216,198,0) 34%
        ),
        radial-gradient(
            circle at 86% 14%,
            rgba(220,232,221,.78) 0,
            rgba(220,232,221,0) 34%
        ),
        linear-gradient(
            135deg,
            #fbf5ec 0%,
            #fbfaf6 45%,
            #f1f6f0 100%
        );
}

.rif-flow {
    position: absolute;
    z-index: 1;

    top: -28px;
    right: -220px;

    width: min(1500px,108vw);
    aspect-ratio: 2048 / 1448;

    background:
        url("../_tmc_daten/Image/rif-verlauf-6.png")
        center / contain
        no-repeat;

    opacity: .58;

    mix-blend-mode: multiply;

    pointer-events: none;

    transform: rotate(-2deg);

    filter: saturate(.96);
}


/* ============================================================
   HEADER
============================================================ */

.rif-header {
    position: relative;
    z-index: 10;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 36px 6% 0;
}


/* ============================================================
   LOGO
============================================================ */

.rif-logo {
    display: inline-block;

    transform: translateY(12px);
}

.rif-logo img {
    display: block;

    width: min(520px,40vw);
    height: auto;

    margin: 36px 0 0 -18px;
}



/* ============================================================
   NAVIGATION
============================================================ */

.rif-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 24px;

    width: 500px;
    min-width: 500px;

    padding-right: 76px;

    white-space: nowrap;
}

.rif-nav {
    display: flex;
    align-items: center;

    gap: 28px;
}

.rif-nav a {
    color: var(--rif-dark);

    text-decoration: none;

    font-size: .96rem;
    font-weight: 560;
}

.rif-nav a:hover {
    color: var(--rif-green);
}
.rif-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}



/* ============================================================
   BURGER
============================================================ */

.rif-burger {
    position: relative;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(14px);

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(31,43,41,.06);

    transition:
        background .45s ease,
        box-shadow .45s ease,
        transform .45s ease;
}

.rif-burger span {
    position: absolute;

    left: 50%;

    width: 22px;
    height: 2px;

    background: #24302c;

    border-radius: 999px;

    transform: translateX(-50%);

    transition:
        transform .45s ease,
        opacity .45s ease,
        background .45s ease;
}

.rif-burger span:first-child {
    top: 21px;
}

.rif-burger span:last-child {
    top: 29px;
}

.rif-burger:hover {
    background: rgba(255,255,255,.92);

    box-shadow:
        0 18px 38px rgba(31,43,41,.12);

    transform: translateY(-2px);
}

.rif-burger:hover span {
    background: var(--rif-green);
}

.rif-burger:hover span:first-child {
    transform: translateX(-50%) translateY(-1px);
}

.rif-burger:hover span:last-child {
    transform: translateX(-50%) translateY(1px);
}

.rif-burger-fixed {
    display: block;

    position: fixed;
    z-index: 9999;

    top: 24px;
    right: calc(
        (100vw - min(100vw, 1920px)) / 2
        + min(6vw, 115.2px)
    );
}

.rif-header .rif-burger {
    display: none;
}


/* ============================================================
   HERO
============================================================ */

.rif-hero {
    position: relative;
    z-index: 3;

    min-height: 680px;

    padding: 70px 6% 150px;
}

.rif-hero-copy {
    max-width: 780px;
}

.rif-kicker {
    margin: 0 0 18px;

    font-size: .82rem;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: .105em;

    font-weight: 700;

    color: #af6548;
}

.rif-hero-title {
    margin: 0;

    max-width: 720px;

    font-size: clamp(2.7rem, 4.85vw, 4.65rem);
    line-height: .96;

    letter-spacing: -.058em;

    font-weight: 650;

    color: #202b29;
}

.rif-lead {
    margin: 28px 0 0;

    max-width: 720px;

    font-size: clamp(1.08rem, 1.35vw, 1.24rem);
    line-height: 1.68;

    font-weight: 400;

    color: var(--rif-text);
}

.rif-lead-small {
    margin: 22px 0 0;

    max-width: 720px;

    font-size: clamp(.98rem, 1.08vw, 1.06rem);
    line-height: 1.72;

    color: rgba(79,95,90,.9);
}


/* ============================================================
   HERO CARDS / ZIELGRUPPEN
============================================================ */

.rif-paths {
    position: relative;
    z-index: 4;

    margin-top: -112px;

    padding: 0 6% 92px;
}

.rif-path-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 18px;
}

.rif-card {
    display: flex;
    align-items: flex-end;

    min-height: 128px;

    padding: 26px 24px;

    border: 1px solid rgba(255,255,255,.82);
    border-radius: 26px;

    color: var(--rif-dark);

    text-decoration: none;

    backdrop-filter: blur(12px);

    box-shadow:
        0 16px 45px rgba(31,43,41,.07);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}

.rif-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 58px rgba(31,43,41,.11);
}

.rif-card:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            rgba(92,198,184,.68),
            rgba(233,248,245,.92)
        );
}

.rif-card:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            rgba(228,191,163,.68),
            rgba(250,241,235,.94)
        );
}

.rif-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(174,205,158,.72),
            rgba(241,248,238,.94)
        );
}

.rif-card:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            rgba(135,196,218,.68),
            rgba(239,247,250,.94)
        );
}

.rif-card h3 {
    margin: 0;

    font-size: clamp(1.08rem, 1.4vw, 1.28rem);
    line-height: 1.18;

    font-weight: 680;

    letter-spacing: -.025em;
}


/* ============================================================
   MOBILE INFO
============================================================ */

.rif-mobile-info {
    display: none;
}


/* ============================================================
   INTRO
============================================================ */

.rif-intro {
    position: relative;
    z-index: 4;

    padding: 96px 6%;

    background: rgba(255,255,255,.62);

    backdrop-filter: blur(10px);
}

.rif-intro-inner {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        340px;

    gap: clamp(40px,7vw,100px);

    align-items: start;

    max-width: 1180px;

    margin: 0 auto;
}

.rif-intro-text {
    max-width: 760px;
}

.rif-intro .rif-page-title,
.rif-mag-text h2 {
    margin: 0 0 26px;

    font-size: clamp(2.15rem, 4.2vw, 4rem);
    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 650;
}

.rif-intro p,
.rif-mag-text p {
    margin: 0 0 18px;

    font-size: 1.12rem;
    line-height: 1.72;

    color: var(--rif-text);
}

.rif-intro-note {
    padding: 32px;

    border-radius: 30px;

    background: rgba(237,245,239,.82);
}

.rif-intro-note strong {
    display: block;

    margin-bottom: 14px;

    font-size: 1.15rem;
    font-weight: 680;
}

.rif-intro-note p {
    margin: 0;

    font-size: 1rem;
    line-height: 1.6;
}


/* ============================================================
   AKTUELL / MONATSPROGRAMM
============================================================ */

.rif-current {
    position: relative;
    z-index: 4;

    padding: 90px 6%;

    background: rgba(241,248,238,.72);
}

.rif-current-inner {
    max-width: 1180px;

    margin: 0 auto;
}

.rif-current-head {
    max-width: 760px;

    margin-bottom: 34px;
}

.rif-current-head h2 {
    margin: 0 0 22px;

    font-size: clamp(2.1rem, 4vw, 3.7rem);
    line-height: 1.02;

    letter-spacing: -.055em;

    font-weight: 650;
}

.rif-current-head p {
    margin: 0;

    font-size: 1.12rem;
    line-height: 1.72;

    color: var(--rif-text);
}


/* ============================================================
   AKTUELL GRID
============================================================ */

.rif-current-grid {
    display: grid;

    grid-template-columns:
        1.25fr
        repeat(2,minmax(0,1fr));

    gap: 18px;
}


/* ============================================================
   AKTUELL CARDS
============================================================ */

.rif-current-main,
.rif-current-flyer {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    min-height: 170px;

    padding: 28px;

    border-radius: 28px;

    color: var(--rif-dark);

    text-decoration: none;

    box-shadow:
        0 16px 45px rgba(31,43,41,.07);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}

.rif-current-main:hover,
.rif-current-flyer:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 58px rgba(31,43,41,.11);
}

.rif-current-main {
    grid-row: span 2;

    min-height: 240px;

    background:
        linear-gradient(
            135deg,
            rgba(135,196,218,.62),
            rgba(239,247,250,.94)
        );
}

.rif-current-flyer {
    border: 1px solid rgba(255,255,255,.82);

    background: rgba(255,255,255,.74);

    backdrop-filter: blur(10px);
}

.rif-current-main span,
.rif-current-flyer span {
    font-size: .76rem;

    text-transform: uppercase;
    letter-spacing: .12em;

    font-weight: 750;

    color: #af6548;

    opacity: .92;
}

.rif-current-main strong {
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    line-height: 1.12;

    letter-spacing: -.035em;
}

.rif-current-flyer strong {
    font-size: 1.16rem;
    line-height: 1.22;

    letter-spacing: -.025em;
}


/* ============================================================
   MAGAZINE
============================================================ */

.rif-magazine {
    position: relative;
    z-index: 4;

    padding: 100px 6%;

    background: #fff;
}
/* ============================================================
   SYSTEM 8 – gemeinsamer Content-Wrapper
   ============================================================ */

.rif-content.rif-magazine {
    padding: 0;
    background: transparent;
}


.rif-mag-item {
    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1fr);

    gap: clamp(40px,7vw,90px);

    align-items: center;

    max-width: 1180px;

    margin: 0 auto 96px;

}

.rif-mag-item:last-child {
    margin-bottom: 0;
}

.rif-mag-item-reverse .rif-mag-image {
    order: 2;
}

.rif-mag-image img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 36px;
}

.rif-mag-text {
    max-width: 560px;
}


/* ============================================================
   TEXTLINKS
============================================================ */

.rif-textlink {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-top: 16px;

    color: var(--rif-green);

    font-weight: 650;

    text-decoration: none;

    transition:
        color .45s ease,
        transform .45s ease;
}

.rif-textlink::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(.25);
    transform-origin: left center;

    opacity: .35;

    transition:
        transform .45s ease,
        opacity .45s ease;
}

.rif-textlink::after {
    content: "›";

    margin-left: 10px;

    font-size: 1.35em;
    line-height: .8;

    transition:
        transform .45s ease,
        opacity .45s ease;
}

.rif-textlink:hover {
    color: #1f6b55;

    transform: translateX(2px);
}

.rif-textlink:hover::before {
    transform: scaleX(1);

    opacity: .75;
}

.rif-textlink:hover::after {
    transform: translateX(5px);
}


/* ============================================================
   FOOTER
============================================================ */

.rif-footer {
    position: relative;
    z-index: 4;

    padding: 70px 6% 50px;

    background: #219c7d;

    color: #edf4ef;
}

.rif-footer-inner {
    max-width: 1180px;

    margin: 0 auto;
}

.rif-footer-inner-stacked {
    display: grid;

    grid-template-columns:
        180px
        minmax(0,1fr);

    gap: 54px;

    align-items: start;
}

.rif-footer-brand img {
    display: block;

    width: 170px;
    height: auto;

    filter: brightness(0) invert(1);

    opacity: .92;
}

.rif-footer-info-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 34px;

    max-width: 780px;
}

.rif-footer-info-block {
    font-size: .95rem;
    line-height: 1.62;

    color: rgba(237,244,239,.82);
}

.rif-footer-info-block strong {
    display: block;

    margin-bottom: 12px;

    color: #fff;

    font-size: .96rem;
    font-weight: 700;
}

.rif-footer-info-block p {
    margin: 0 0 14px;
}

.rif-footer-info-block p:last-child {
    margin-bottom: 0;
}

.rif-footer-info-block a {
    color: rgba(237,244,239,.92);

    text-decoration: none;
}

.rif-footer-info-block a:hover {
    color: #fff;
}


/* ============================================================
   MEDIA QUERY / NOTEBOOK
============================================================ */

@media (min-width:1065px) and (max-width:1680px) {

    .rif-header {
        padding-top: 24px;
    }

    .rif-logo {
        transform: translateY(4px);
    }

    .rif-logo img {
        width: min(430px,34vw);

        margin-top: 22px;
    }

    .rif-hero {
        min-height: 560px;

        padding-top: 42px;
        padding-bottom: 128px;
    }

    .rif-hero-title {
        font-size: clamp(2.65rem, 4.25vw, 4.35rem);
        line-height: .95;
    }

    .rif-lead {
        margin-top: 22px;

        font-size: clamp(1.04rem, 1.15vw, 1.18rem);
        line-height: 1.58;
    }

    .rif-lead-small {
        margin-top: 16px;

        font-size: clamp(.94rem, 1vw, 1rem);
        line-height: 1.52;
    }

    .rif-paths {
        margin-top: -104px;

        padding-bottom: 72px;
    }

    .rif-card {
        min-height: 104px;

        padding: 22px;
    }

    .rif-card h3 {
        font-size: clamp(1rem, 1.05vw, 1.16rem);
        line-height: 1.16;
    }
}


/* ============================================================
   MEDIA QUERY / NOTEBOOK LOW HEIGHT
============================================================ */

@media (min-width:1065px) and (max-width:1680px) and (max-height:820px) {

    .rif-header {
        padding-top: 18px;
    }

    .rif-logo img {
        width: min(390px,32vw);

        margin-top: 14px;
    }

    .rif-hero {
        min-height: 500px;

        padding-top: 30px;
        padding-bottom: 112px;
    }

    .rif-hero-title {
        font-size: clamp(2.45rem, 3.9vw, 3.9rem);
    }

    .rif-lead {
        margin-top: 18px;

        line-height: 1.5;
    }

    .rif-lead-small {
        margin-top: 13px;

        line-height: 1.46;
    }

    .rif-paths {
        margin-top: -94px;
    }

    .rif-card {
        min-height: 92px;

        padding: 20px;
    }
}


/* ============================================================
   MEDIA QUERY / TABLET
============================================================ */

@media (max-width:1100px) {

    .rif-flow {
        top: 10px;
        right: -430px;

        width: 1320px;

        opacity: .48;
    }

    .rif-header {
        padding: 34px 5vw 0;
    }

    .rif-logo {
        transform: translateY(8px);
    }

    .rif-logo img {
        width: min(390px,43vw);

        margin: 26px 0 0 -10px;
    }

    .rif-hero {
        min-height: 650px;

        padding: 64px 5vw 142px;
    }

    .rif-paths {
        margin-top: -104px;

        padding: 0 5vw 82px;
    }

    .rif-card {
        min-height: 118px;
    }
}


/* ============================================================
   MEDIA QUERY / 980
============================================================ */

@media (max-width:980px) {

    .rif-path-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .rif-intro-inner,
    .rif-mag-item {
        grid-template-columns: 1fr;
    }

    .rif-intro-inner {
        gap: 20px;
    }

    .rif-intro {
        padding-top: 72px;
        padding-bottom: 44px;
    }

    .rif-intro-note {
        max-width: 560px;

        padding: 26px;
    }

    .rif-current {
        padding: 72px 6vw;
    }

    .rif-current-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .rif-current-main {
        grid-column: 1 / -1;
        grid-row: auto;

        min-height: 190px;
    }

    .rif-magazine {
        padding-top: 44px;
    }

    .rif-mag-item {
        gap: 34px;

        margin-bottom: 76px;
    }

    .rif-mag-item-reverse .rif-mag-image {
        order: 0;
    }

    .rif-mag-text {
        max-width: 680px;
    }

    .rif-mag-image img {
        height: 340px;
    }
}


/* ============================================================
   MEDIA QUERY / MOBILE NAV
============================================================ */

@media (max-width:946px) {

    .rif-nav-wrap {
        width: auto;
        min-width: 0;
    }
}


/* ============================================================
   MEDIA QUERY / MOBILE
============================================================ */

@media (max-width:880px) {

    .rif-header {
        flex-direction: column;

        gap: 26px;

        padding: 28px 28px 0;

        background: rgba(255,255,255,.78);

        backdrop-filter: blur(14px);
    }

    .rif-nav-wrap {
        width: auto;
        min-width: 0;

        justify-content: flex-start;
    }

    .rif-nav {
        flex-wrap: wrap;

        gap: 18px;
    }

    .rif-nav a {
        font-size: .92rem;
    }

    .rif-logo {
        transform: none;
    }

    .rif-logo img {
        width: min(360px,78vw);

        margin: 10px 0 0 -8px;
        padding-bottom: 24px;
    }

    .rif-burger-fixed {
        top: 18px;
        right: 16px;

        width: 46px;
        height: 46px;
    }

    .rif-burger-fixed span:first-child {
        top: 18px;
    }

    .rif-burger-fixed span:last-child {
        top: 26px;
    }

    .rif-flow {
        top: 210px;
        right: -610px;

        width: 1080px;

        opacity: .4;

        transform: rotate(-3deg);
    }

    .rif-hero {
        min-height: auto;

        padding: 72px 28px 118px;
    }

    .rif-paths {
        margin-top: -78px;

        padding: 0 28px 72px;
    }

    .rif-card {
        min-height: 112px;
    }
}


/* ============================================================
   MEDIA QUERY / MOBILE PRIORITY
============================================================ */

@media (max-width:768px) {

    .rif-hero {
        padding-bottom: 56px;
    }

    .rif-hero-title {
        max-width: 520px;

        font-size: clamp(2.15rem, 8.2vw, 3.15rem);
        line-height: .94;

        letter-spacing: -.052em;
    }

    .rif-hero .rif-lead,
    .rif-hero .rif-lead-small {
        display: none;
    }

    .rif-paths {
        margin-top: -24px;

        padding-bottom: 38px;
    }

    .rif-mobile-info {
        display: block;

        position: relative;
        z-index: 4;

        padding: 0 28px 72px;
    }

    .rif-mobile-info-inner {
        padding: 28px;

        border: 1px solid rgba(255,255,255,.8);
        border-radius: 28px;

        background: rgba(255,255,255,.62);

        backdrop-filter: blur(12px);

        box-shadow:
            0 16px 45px rgba(31,43,41,.06);
    }

    .rif-mobile-info p {
        margin: 0 0 16px;

        font-size: 1rem;
        line-height: 1.62;

        color: var(--rif-text);
    }

    .rif-mobile-info p:last-child {
        margin-bottom: 0;
    }
}


/* ============================================================
   MEDIA QUERY / SMALL MOBILE
============================================================ */

@media (max-width:560px) {

    .rif-header {
        gap: 22px;

        padding: 24px 22px 0;
    }

    .rif-logo {
        padding-bottom: 36px;
    }

    .rif-logo img {
        width: min(360px,78vw);

        margin: 8px 0 0 -6px;
        padding-bottom: 0;
    }

    .rif-burger-fixed {
        top: 14px;
        right: 12px;

        width: 42px;
        height: 42px;
    }

    .rif-burger-fixed span:first-child {
        top: 16px;
    }

    .rif-burger-fixed span:last-child {
        top: 24px;
    }

    .rif-flow {
        top: 300px;
        right: -650px;

        width: 1040px;

        opacity: .34;
    }

    .rif-hero {
        padding: 62px 22px 52px;
    }

    .rif-hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: .93;
    }

    .rif-paths {
        margin-top: -18px;

        padding: 0 22px 42px;
    }

    .rif-path-grid {
        grid-template-columns: 1fr;
    }

    .rif-card {
        min-height: 92px;

        padding: 22px;
    }

    .rif-mobile-info {
        padding: 0 22px 62px;
    }

    .rif-mobile-info-inner {
        padding: 24px;

        border-radius: 24px;
    }

    .rif-current {
        padding: 62px 22px;
    }

    .rif-current-grid {
        grid-template-columns: 1fr;
    }

    .rif-current-main,
    .rif-current-flyer {
        min-height: 130px;

        padding: 24px;

        border-radius: 24px;
    }
}


/* ============================================================
   MEDIA QUERY / EXTRA SMALL
============================================================ */

@media (max-width:320px) {

    .rif-logo img {
        width: min(220px,84vw);
    }
}


/* ============================================================
   MEDIA QUERY / FOOTER
============================================================ */

@media (max-width:980px) {

    .rif-footer-inner-stacked {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .rif-footer-info-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        max-width: none;
    }
}

@media (max-width:720px) {

    .rif-footer {
        padding: 54px 28px 42px;
    }

    .rif-footer-info-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }
}
/* ============================================================
    Language Switcher
============================================================ */

.rif-lang-switcher{
    display:flex;
    align-items:center;
    gap:.5rem;
}

.rif-lang-switcher label{
    font-size:.85rem;
    opacity:.75;
}

.rif-lang-select{
    border:1px solid rgba(0,0,0,.18);
    border-radius:999px;
    padding:.45rem 2rem .45rem .8rem;
    background:#fff;
    font-size:.9rem;
    cursor:pointer;
}
#rif-translate-loading{

    display:none;

    position:fixed;
    inset:0;

    background:rgba(255,255,255,.88);

    z-index:999999;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:1.5rem;

    backdrop-filter:blur(3px);
}

.rif-translate-spinner{

    width:56px;
    height:56px;

    border:4px solid rgba(0,0,0,.1);
    border-top:4px solid #ba480e;

    border-radius:50%;

    animation:rifspin 1s linear infinite;
}

@keyframes rifspin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.rif-translate-loading-text{

    text-align:center;

    color:#444;

    font-size:1rem;

    line-height:1.6;
}
#rif-translate-loading.is-active{
    display:flex !important;
}
/* ============================================================
    Language Info
============================================================ */

.rif-lang-label{

    display:flex;
    align-items:center;
    gap:.5rem;

}

.rif-lang-info{

    position:relative;
}

.rif-lang-info summary{

    list-style:none;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(0,0,0,.08);

    color:#666;

    cursor:pointer;

    font-size:.75rem;
}

.rif-lang-info summary::-webkit-details-marker{
    display:none;
}

.rif-lang-info:hover .rif-lang-info-box,
.rif-lang-info[open] .rif-lang-info-box {
    color:#444;
}

.rif-lang-info:hover summary {
    background:rgba(186,72,14,.12);
    color:#ba480e;
}

.rif-lang-info-box{
    position:absolute;

    top:28px;
    left:-34px;

    width:280px;
    max-width:calc(100vw - 32px);

    padding:1rem 1.1rem 1rem 3rem;

    border-radius:16px;

    background:#fff;

    box-shadow:0 8px 24px rgba(0,0,0,.14);

    font-size:.82rem;
    line-height:1.55;

    color:#444;

    z-index:99999;

    white-space:normal;
}

.rif-lang-info-box::before{
    content:"ⓘ";

    position:absolute;
    left:1rem;
    top:1rem;

    color:#26765f;

    font-size:1.2rem;
}
/* ============================================================

   INTRO
============================================================ */

.rif-intro-single {
    max-width: 850px;
}


/* ============================================================
   MONATSPROGRAMM
============================================================ */

.rif-program-panel {
    position: relative;
    z-index: 4;
    padding: 94px 6%;

    background: #fff;
}

.rif-program-panel-inner {
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(320px,.55fr);
    gap: 28px;

    max-width: 1180px;
    margin: 0 auto;
}

.rif-program-main {
    padding: 44px;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(135,196,218,.42),
            rgba(239,247,250,.96)
        );

    box-shadow: 0 18px 52px rgba(31,43,41,.10);
}

.rif-program-main h2 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 3.8vw, 3.55rem);
    line-height: 1.02;

    letter-spacing: -.052em;
    font-weight: 650;
}

.rif-program-main p {
    max-width: 760px;

    margin: 0 0 18px;

    font-size: 1.12rem;
    line-height: 1.72;

    color: var(--rif-text);
}

.rif-program-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 28px;
}

.rif-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 19px;

    border-radius: 999px;

    background: #2f7f9f;

    color: #fff;
    text-decoration: none;
    font-weight: 750;

    box-shadow: 0 12px 28px rgba(47,127,159,.18);
}

.rif-button:hover {
    transform: translateY(-2px);
}

.rif-button-secondary {
    background: rgba(255,255,255,.78);

    color: #2f7f9f;
}

.rif-program-current {
    padding: 32px;

    border-radius: 30px;

    background: rgba(239,247,250,.82);

    border: 1px solid rgba(135,196,218,.36);
}

.rif-program-current h3 {
    margin: 0 0 18px;

    font-size: 1.36rem;
    line-height: 1.15;

    letter-spacing: -.03em;
}

.rif-program-current ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.rif-program-current li {
    position: relative;

    padding: 0 0 14px 22px;

    font-size: .98rem;
    line-height: 1.45;

    color: var(--rif-text);
}

.rif-program-current li::before {
    content: "";

    position: absolute;
    left: 0;
    top: .62em;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2f7f9f;
}

.rif-program-current li:last-child {
    padding-bottom: 0;
}


/* ============================================================
   SERVICE-SEKTIONEN
============================================================ */

.rif-service-sections {
    position: relative;
    z-index: 4;

    padding: 90px 6%;

    background: rgba(241,248,238,.54);
}

.rif-service-sections-inner {
    display: grid;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.rif-service-block {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
    gap: 30px;

    padding: 36px;

    border-radius: 34px;

    background: rgba(255,255,255,.76);
    backdrop-filter: blur(10px);

    box-shadow: 0 16px 45px rgba(31,43,41,.075);
}

.rif-service-block:nth-child(even) {
    background: rgba(239,247,250,.86);
}

.rif-service-copy h2 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 3.7vw, 3.35rem);
    line-height: 1.04;

    letter-spacing: -.05em;
    font-weight: 650;
}

.rif-service-copy p {
    margin: 0 0 20px;

    font-size: 1.08rem;
    line-height: 1.72;

    color: var(--rif-text);
}

.rif-offer-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;

}

.rif-offer-card {
    padding: 19px;
    border-radius: 22px;

    background: #fff;

    border: 1px solid rgba(135,196,218,.30);
}

.rif-offer-card strong {
    display: block;

    margin-bottom: 8px;

    font-size: 1rem;
    line-height: 1.25;
}

.rif-offer-card span {
    display: block;

    font-size: .94rem;
    line-height: 1.46;

    color: var(--rif-text);
}

.rif-offer-card a {
    display: inline-flex;

    margin-top: 12px;

    color: #2f7f9f;
    text-decoration: none;
    font-weight: 750;
    font-size: .92rem;
}


/* ============================================================
   CONTACT PANEL
============================================================ */

.rif-contact-panel {
    position: relative;
    z-index: 4;

    padding: 96px 6%;

    background: #fff;
}

.rif-contact-panel-inner {
    max-width: 1180px;

    margin: 0 auto;
    padding: 44px;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(135,196,218,.36),
            rgba(239,247,250,.94)
        );

    box-shadow: 0 18px 52px rgba(31,43,41,.09);
}

.rif-contact-panel h2 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 3.6vw, 3.35rem);
    line-height: 1.04;

    letter-spacing: -.05em;
    font-weight: 650;
}

.rif-contact-panel p {
    max-width: 760px;

    margin: 0 0 22px;

    font-size: 1.12rem;
    line-height: 1.72;

    color: var(--rif-text);
}


/* ============================================================
   THEMENWELT / MIGRATION
============================================================ */

.rif-page-migration .rif-flow {
    opacity: .68;

    filter:
        saturate(1.08)
        hue-rotate(24deg)
        brightness(1.04);
}

.rif-page-migration .rif-topic-card:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            rgba(135,196,218,.76),
            rgba(239,247,250,.96)
        );
}

.rif-page-migration .rif-topic-card:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            rgba(112,184,210,.62),
            rgba(239,247,250,.96)
        );
}

.rif-page-migration .rif-topic-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(160,210,224,.66),
            rgba(244,250,252,.97)
        );
}

.rif-page-migration .rif-topic-card:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            rgba(121,198,204,.56),
            rgba(239,249,248,.96)
        );
}


/* ============================================================
   MEDIA QUERIES
============================================================ */

@media (max-width:980px) {

    .rif-subnav-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .rif-program-panel-inner,
    .rif-service-block {
        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {

    .rif-back-orbit {
        left: 14px;
        bottom: 14px;

        width: 42px;
        height: 42px;

        opacity: .72;

        background: rgba(239,247,250,.82);
        backdrop-filter: blur(10px);
    }

    .rif-back-orbit span {
        width: 11px;
        height: 11px;
    }
}

@media (max-width:560px) {

    .rif-subhero {
        padding: 62px 22px 56px;
    }

    .rif-subhero h1 {
        font-size: clamp(2.1rem, 10vw, 3.1rem);
    }

    .rif-subnav,
    .rif-program-panel,
    .rif-service-sections,
    .rif-contact-panel {
        padding-left: 22px;
        padding-right: 22px;
    }

    .rif-subnav {
        padding-bottom: 58px;
    }

    .rif-subnav-grid,
    .rif-offer-grid {
        grid-template-columns: 1fr;
    }

    .rif-topic-card {
        min-height: 0;
    }

    .rif-program-main,
    .rif-program-current,
    .rif-service-block,
    .rif-contact-panel-inner {
        padding: 28px;

        border-radius: 26px;
    }
}

/* ============================================================
   LISTEN
============================================================ */

.rif-list{

    margin:34px 0 0;

    padding:0;

    list-style:none;
}

.rif-list li{

    position:relative;

    margin-bottom:18px;

    padding-left:28px;

    color:var(--rif-text);

    font-size:1.1rem;

    line-height:1.65;
}

.rif-list li::before{

    content:"";

    position:absolute;

    left:0;
    top:.72em;

    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(92,198,184,.85);
}


.rif-theme-migration{

    --rif-theme-accent: rgba(79,175,159,.85);

    --rif-theme-accent-solid: #4FAF9F;

    --rif-theme-soft:
        rgba(229,244,242,.72);

    --rif-theme-soft-strong:
        rgba(229,244,242,.92);

    --rif-theme-soft-card:
        rgba(239,249,247,.86);

    --rif-theme-border:
        rgba(79,175,159,.24);

}


/* ------------------------------------------------------------
   Farbverlauf
------------------------------------------------------------ */

.rif-theme-migration .rif-flow{

    opacity:.68;

    filter:
        saturate(1.04)
        hue-rotate(-10deg)
        brightness(1.01);

}


/* ------------------------------------------------------------
   Monatsprogramm
------------------------------------------------------------ */

.rif-theme-migration .rif-program-main{

    background:
        linear-gradient(
            135deg,
            rgba(79,175,159,.22),
            rgba(255,255,255,.92)
        );

}

.rif-theme-migration .rif-program-current{

    background:var(--rif-theme-soft-card);

    border:1px solid var(--rif-theme-border);

}


/* ------------------------------------------------------------
   Servicebereiche
------------------------------------------------------------ */

.rif-theme-migration .rif-service-sections{

    background:
        rgba(229,244,242,.35);

}

.rif-theme-migration .rif-offer-card{

    background:
        rgba(255,255,255,.72);

    border:1px solid var(--rif-theme-border);

}


/* ------------------------------------------------------------
   Listen
------------------------------------------------------------ */

.rif-theme-migration .rif-list li::before{

    background:var(--rif-theme-accent-solid);

}

.rif-theme-migration .rif-program-current li::marker{

    color:var(--rif-theme-accent-solid);

}


/* ------------------------------------------------------------
   Kontaktbereich
------------------------------------------------------------ */

.rif-theme-migration .rif-contact-panel{

    background:
        rgba(229,244,242,.55);

}


/* ------------------------------------------------------------
   Monatsprogramm + Flyerwand
------------------------------------------------------------ */

.rif-button-secondary {
    color: #fff;
}

.rif-offer-card a {
    color: #469A8E;
}

/* äusserer Zweispalter */

.rif-program-area {
    width: min(94%, 1500px);
    margin-left: max(6%, calc((100% - 1180px) / 2));
    margin-right: auto;

    padding: 94px 0;

    display: grid;
    grid-template-columns: minmax(660px, 820px) minmax(430px, 560px);
    gap: 3rem;

    align-items: start;
}

/* linke Monatsprogramm-Box */
.rif-program-panel {
    padding: 0;
    background: transparent;
    min-width: 0;
}

.rif-program-panel-inner {
    display: block;
    width: 100%;
    background: transparent;
    max-width: none;
    margin: 0;
}

.rif-program-main {
    width: 100%;
    background:transparent;
}

/* Monatsprogramm-Seiten */
.rif-program-preview {
    margin-top: 3rem;
    display: grid;
    gap: 2rem;
}

.rif-program-preview a {
    display: block;
    text-decoration: none;
    transition: transform .25s ease;
}

.rif-program-preview a:hover {
    transform: translateY(-4px);
}

.rif-program-preview img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* rechte Flyerwand */
.rif-flyer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

    padding: 1.5rem;

    background: rgba(255,255,255,.42);
    border-radius: 2rem;

    align-content: flex-start;
}

.rif-flyer-card {
    flex: 1 1 calc(50% - .75rem);
    min-width: 180px;

    display: block;

    padding: 1rem;

    background: #fff;
    border-radius: 1.5rem;

    text-decoration: none;

    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.rif-flyer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.rif-flyer-card img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 1rem;
    background: #fff;
}

.rif-flyer-card span {

    display:block;

    margin-top:.9rem;
    padding:0 .2rem;

    color:#2f4642;

    font-size:1rem;
    font-weight:600;
    line-height:1.35;

    letter-spacing:-0.01em;

}
.rif-flyer-list h3{
    width:100%;
    margin:0 0 .5rem;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#4d5e5c;
}
/* Fix: keine eckige Hintergrundfläche hinter der runden Monatsprogramm-Kachel */
.rif-theme-migration .rif-program-panel {
    background: transparent;
}


/* Umbruch, bevor es quetscht */
@media (max-width: 1320px) {

    .rif-program-area {
        grid-template-columns: 1fr;
        width: min(92vw, 820px);
    }

}

/* Mobile */
@media (max-width: 700px) {

    .rif-program-area {
        padding: 62px 22px;
        width: 100%;
    }

    .rif-flyer-card {
        flex-basis: 100%;
    }

    .rif-flyer-item {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

}


/* ============================================================
   SYSTEM 8 – RIF CONTENT-INTEGRATION
============================================================ */



/* ------------------------------------------------------------
   Flyer + TMC-Editormenü

   Im Originalscreendesign war .rif-flyer-card direktes Flex-Kind.
   System 8 benötigt zusätzlich .rif-flyer-item, damit Editormenü
   und Flyerkarte eine gemeinsame Einheit bilden.
------------------------------------------------------------ */

.rif-flyer-item {
    flex: 0 0 calc(50% - .75rem);
    min-width: 180px;
    max-width: calc(50% - .75rem);

    display: flex;
    flex-direction: column;
}

.rif-flyer-item .rif-flyer-card {
    width: 100%;
    min-width: 0;
    flex: none;
}

.rif-flyer-item .rif-nav-edit {
    width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   System-8 Editor – Navigation / Karten
------------------------------------------------------------ */

.rif-menu-nav .rif-nav-edit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 8px 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
}

.rif-menu-nav .rif-nav-edit-online {
    background: #d6f2dd;
}

.rif-menu-nav .rif-nav-edit-offline {
    background: #d2c077;
}

.rif-menu-nav .rif-nav-edit-info {
    display: inline-block;
    flex: 1;
}

.rif-menu-nav .rif-nav-edit-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.rif-menu-nav a.rif-nav-edit-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.rif-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.rif-card .rif-nav-edit {
    width: 100%;
    margin-bottom: 10px;
}

.rif-card-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
RIF DETAIL CONTENT – kompatibel mit rif-magazine
========================================================== */

/* Detail-Longread im Magazinraster links bündig halten */
.rif-magazine .rif-detail-longread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* Text beginnt in der linken Magazinspalte */
.rif-magazine .rif-detail-longread .rif-detail-text {
    grid-column: 1 / 3;
    max-width: none;
}

/* Zweispaltiger Text innerhalb des Longreads */
.rif-detail-columns {
    column-count: 2;
    column-gap: clamp(2rem, 5vw, 5rem);
    margin-top: 2rem;
}

.rif-detail-columns p {
    break-inside: avoid;
    margin-top: 0;
}

/* Mobile */
@media (max-width: 900px) {

    .rif-magazine .rif-detail-longread {
        display: block;
    }

    .rif-detail-columns {
        column-count: 1;
    }

}
/* ==========================================================
RIF HAMBURGER PANEL
========================================================== */

.rif-menu-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,.96);
    backdrop-filter: blur(18px);

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.rif-menu-panel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.rif-menu-panel-inner {

    flex: 1;

    overflow-y: auto;

    padding:
        6rem
        clamp(2rem,6vw,5rem)
        4rem;

    max-width: 820px;
    width:100%;
    margin:0 auto;
}
.rif-menu-close {
    position: fixed;
    top: 1.4rem;
    right: 1.4rem;
    width: 3.2rem;
    height: 3.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--rif-theme-color, #4f8f9f);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.rif-menu-nav {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
}

.rif-menu-nav a {
    display: block;
    padding: .85rem 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.rif-menu-nav a:hover {
    color: var(--rif-theme-color, #4f8f9f);
}

/* Body sperren wenn Menü offen */
body.rif-menu-is-open {
    overflow: hidden;
}
.rif-menu-group {
    margin-bottom: 2rem;
}

.rif-menu-group strong {
    display: block;
    margin-bottom: .75rem;
}

.rif-menu-sub {
    padding-left: 1.25rem;
    border-left: 2px solid var(--rif-theme-color, #4f8f9f);
    margin: .25rem 0 .75rem;
}

.rif-menu-sub a {
    opacity: .85;
}
.rif-service-block {
    max-width: 1180px;
    margin:auto;
}
.spz7{
    margin-top:56px;
}
/* ============================================================
   BACK ORBIT
============================================================ */

.rif-back-orbit {
    position: fixed;
    z-index: 80;

    left: calc(
        (100vw - min(100vw, 1920px)) / 2
        + 28px
    );
    bottom: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background: rgba(255,255,255,.68);
    backdrop-filter: blur(14px);

    color: var(--rif-dark);
    text-decoration: none;

    box-shadow: 0 14px 38px rgba(31,43,41,.12);
}

.rif-back-orbit:hover {
    background: rgba(255,255,255,.92);
    transform: translateY(-3px);
}

.rif-back-orbit span {
    width: 14px;
    height: 14px;

    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform:
        rotate(45deg)
        translate(2px,-2px);
}

/* ============================================================
   RIF THEMENFARBEN – zentrale System-8-Steuerung
============================================================ */

.rif-theme-migration {
    --rif-theme-color: #95d2c6;
    --rif-theme-color-light: rgba(238,248,246,.94);
}

.rif-theme-fachstellen {
    --rif-theme-color: #eacdb8;
    --rif-theme-color-light: rgba(251,245,240,.94);
}

.rif-theme-freiwillige {
    --rif-theme-color: #c3d7b3;
    --rif-theme-color-light: rgba(245,249,241,.94);
}

.rif-theme-neu {
    --rif-theme-color: #9dd0dd;
    --rif-theme-color-light: rgba(241,249,251,.94);
}


/* Schnellzugänge / Subnavigation
   Startseite ohne Themenklasse behält die bestehenden
   vier unterschiedlichen nth-child-Farben. */

.rif-page[class*="rif-theme-"] .rif-card {
    background:
        linear-gradient(
            135deg,
            var(--rif-theme-color),
            var(--rif-theme-color-light)
        );
}


/* Primäre Buttons */

.rif-page[class*="rif-theme-"] .rif-button:not(.rif-button-secondary) {
    background: var(--rif-theme-color);
    color: var(--rif-dark);

    box-shadow:
        0 14px 34px rgba(31,43,41,.10);
}

.rif-page[class*="rif-theme-"] .rif-button:not(.rif-button-secondary):hover {
    background:
        linear-gradient(
            135deg,
            var(--rif-theme-color),
            var(--rif-theme-color-light)
        );

    color: var(--rif-dark);
}


/* Sekundärbutton bleibt bewusst sekundär */

.rif-page[class*="rif-theme-"] .rif-button-secondary {
    background: rgba(255,255,255,.78);
    color: var(--rif-dark);
}


/* Back-Orbit */

.rif-page[class*="rif-theme-"] .rif-back-orbit {
    background:
        linear-gradient(
            135deg,
            var(--rif-theme-color),
            var(--rif-theme-color-light)
        );
}

.rif-page[class*="rif-theme-"] .rif-back-orbit:hover {
    background:
        linear-gradient(
            135deg,
            var(--rif-theme-color),
            rgba(255,255,255,.96)
        );

    transform: translateY(-3px);
}


/* Mobile: Position und Grösse bleiben bestehen,
   Themenfarbe bleibt erhalten. */

@media (max-width:768px) {

    .rif-page[class*="rif-theme-"] .rif-back-orbit {
        background:
            linear-gradient(
                135deg,
                var(--rif-theme-color),
                var(--rif-theme-color-light)
            );
    }

}

/* ============================================================
   ULTRA-WIDE / SYSTEM 8
   ------------------------------------------------------------
   Desktop-Seitenabstände rechnen innerhalb von .rif-site
   mit Prozentwerten. Media-Query-vw-Werte bleiben bewusst
   viewportbezogen.
============================================================ */

/* ============================================================
   FIXED CONTROLS / ULTRA-WIDE
   ------------------------------------------------------------
   Burger und Back-Orbit bleiben position:fixed, orientieren
   sich auf Displays >1920px aber an der 1920px breiten
   RIF-Site statt am äusseren Browserrand.

   Mobile-Regeln überschreiben diese Desktopwerte weiterhin.
============================================================ */




/* ============================================================
   RIF STARTSEITE – MONATSPROGRAMM TEASER
   Plugin unter Layout 0100
============================================================ */

.rif-month-teaser {
    max-width: 1180px;
    margin: 54px auto 0;
}

.rif-month-teaser-link {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;

    padding: clamp(26px, 4vw, 48px);

    border-radius: 30px;
    background: rgba(149, 210, 198, .30);

    color: var(--rif-dark);
    text-decoration: none;

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.rif-month-teaser-link:hover {
    transform: translateY(-3px);
    background: rgba(149, 210, 198, .42);
    box-shadow: 0 20px 54px rgba(31, 43, 41, .08);
}

.rif-month-teaser-preview {
    width: min(100%, 250px);
    margin: 0 auto;
}

.rif-month-teaser-preview img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(31, 43, 41, .13);
}

.rif-month-teaser-copy {
    max-width: 620px;
}

.rif-month-teaser-copy .rif-kicker {
    margin-bottom: 12px;
}

.rif-month-teaser-copy h3 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 4vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 650;
}

.rif-month-teaser-copy p:not(.rif-kicker) {
    max-width: 560px;
    margin: 0 0 22px;

    font-size: 1.08rem;
    line-height: 1.65;
}

.rif-month-teaser-copy .rif-textlink {
    display: inline-block;
}

@media (max-width: 760px) {
    .rif-month-teaser {
        margin-top: 38px;
    }

    .rif-month-teaser-link {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .rif-month-teaser-preview {
        width: min(74vw, 250px);
        margin-left: 0;
    }
}
.rif-service-block {
    margin-bottom: 28px;
}
.rif-service-block:last-child {
    margin-bottom: 0;
}

/* ============================================================
   AKTUELL / MONATSPROGRAMM – Contentfläche
   ============================================================ */

.rif-content.rif-magazine:has(> .rif-program-area) {
    background: #fafaf7;
}
/* ============================================================
   INFOBOXEN – LISTENAUSGABEN
   PDF- und Linklisten unterhalb des gesamten Containers
   ============================================================ */

.rif-service-list {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 28px;
}

.rif-mag-list {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 28px;
}

/* ============================================================
   RIF – PDF-LISTE
   ============================================================ */


.rif-pdf-list {
    width: 100%;
}

.rif-pdf-list-item {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    align-items: start;

    padding: 28px 0;
    border-top: 1px solid rgba(31, 45, 42, 0.14);
}

.rif-pdf-list-item:last-child {
    border-bottom: 1px solid rgba(31, 45, 42, 0.14);
}


/* PDF-Vorschau */

.rif-pdf-list-preview {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
}

.rif-pdf-list-preview img {
    display: block;
    width: 100%;
    height: auto;
}


/* Textbereich */

.rif-pdf-list-content {
    min-width: 0;
    padding-top: 4px;
}

.rif-pdf-list-content h3 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    line-height: 1.25;
}

.rif-pdf-list-content p {
    margin: 0 0 18px;
    max-width: 720px;
}


/* Link */

.rif-pdf-list-link {
    display: inline-block;
    margin-top: 4px;
}


/* Mobile */

@media (max-width: 700px) {

    .rif-pdf-list-item {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 20px;
        padding: 22px 0;
    }

}

@media (max-width: 480px) {

    .rif-pdf-list-item {
        grid-template-columns: 1fr;
    }

    .rif-pdf-list-preview {
        width: 140px;
    }

}

/* CMS-Editor innerhalb PDF-Liste über volle Breite */
.rif-pdf-list-item > .rif-nav-edit {
    grid-column: 1 / -1;
    width: 100%;
}
.rif-pdf-list-preview {
    position: relative;

    display: block;
    width: 100%;

    padding: 10px;

    background: #fff;
    border: 1px solid rgba(31, 45, 42, 0.14);
    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(31, 45, 42, 0.10);
}

.rif-pdf-list-preview img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   RIF – LINKLISTE
   ============================================================ */

.rif-link-list {
    width: 100%;
}

.rif-link-list-item {
    padding: 26px 0;
    border-top: 1px solid rgba(31, 45, 42, 0.14);
}

.rif-link-list-item:last-child {
    border-bottom: 1px solid rgba(31, 45, 42, 0.14);
}

.rif-link-list-content h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.rif-link-list-content p {
    margin: 0 0 14px;
    max-width: 760px;
}

.rif-link-list-link {
    display: inline-block;
    margin-top: 2px;
}
/* ============================================================
   INFOBOXEN-LISTEN unter Layout 10
   ============================================================ */

.rif-mag-list {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 28px;
    order: 99;
}
@media (max-width: 1100px) {

    .rif-mag-item,
    .rif-service-block {
        margin-left: 28px;
        margin-right: 28px;
    }

}
@media (max-width: 700px) {

    .rif-mag-item,
    .rif-service-block {
        margin-left: 18px;
        margin-right: 18px;
    }

}
.rif-mag-caption {
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
}