/* =====================================================
   SchlossFUN Custom CSS
   TYPO3 14 + Bootstrap Package 16
   ===================================================== */

/* =====================================================
   LOCAL FONTS
   Source Sans Pro
   ===================================================== */

@font-face {
    font-family: "Source Sans Pro";
    src: url("/fileadmin/schlossfun/fonts/SourceSansPro-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/fileadmin/schlossfun/fonts/SourceSansPro-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/fileadmin/schlossfun/fonts/SourceSansPro-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =====================================================
   01 VARIABLES
   Zentrale Farben, Abstände und Effekte
   ===================================================== */

:root {
    --sf-content-width: 1280px;

    --sf-bg: #f1e8dc;
    --sf-surface: #fffaf2;

    --sf-text: #12333a;
    --sf-muted: #355a61;

    --sf-primary: #2b6b73;
    --sf-primary-dark: #1f5860;

    --sf-accent: #c8a24a;

    --sf-radius: 17px;

    --bs-body-font-family: "Source Sans Pro", Arial, sans-serif;
    --bs-body-font-size: 18px;
    --bs-body-font-weight: 400;
	--bs-body-line-height: 1.7;

    --sf-shadow: 0 10px 20px rgba(18, 51, 58, 0.18);
}


/* =====================================================
   02 BASE
   Grundlayout der Seite
   ===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}
p,
li {
    font-weight: 400;
}

strong,
b {
    font-weight: 700;
}
h1 {
    font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: 2rem;
    font-weight: 300;
    color: var(--sf-primary);
}
h2,
h3,
h4,
h5,
h6 {
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-weight: 300;
    color: var(--sf-primary);
}

.sf-page {
    width: 100%;
    margin: 0;
}


/* =====================================================
   03 LOGO
   Temporäre Logo-Ausgabe über setup.typoscript
   ===================================================== */

.sf-logo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    padding: 0;
}

.sf-logo img {
    width: 220px;
    height: auto;
    display: block;
}


/* =====================================================
   04 HERO SWIPER
   Neuer Hero statt Bootstrap Carousel Fullscreen
   ===================================================== */

.sf-hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sf-hero-swiper {
    width: 100%;
    height: 75vh;
    min-height: 520px;
    overflow: hidden;
}
/* Unterseiten Hero: flacher als Home */
.sf-subpage-hero .sf-hero-swiper {
    height: 450px;
    min-height: 450px;
}

.sf-hero-swiper .swiper-slide {
    height: 100%;
}

.sf-hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.sf-hero-swiper .swiper-pagination {
    bottom: 1.25rem;
}

.sf-hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .55;
}

.sf-hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Hero Textbox TYPO3 Element */
#c15 {
    position: relative;
    z-index: 5;
    max-width: 430px;
    margin-top: -229px;
    margin-left: 5%;
    margin-bottom: -7rem;
    padding: 1.15rem 1.25rem;

    background: rgba(255, 250, 242, 0.58);
    backdrop-filter: blur(8px);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
}

#c15 h1 {
    font-size: clamp(1.8rem, 3vw, 2.1rem);
    line-height: 1.05;
    font-weight: 400;
    margin-bottom: .5rem;
}

#c15 p {
    color: var(--sf-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

#c15 p:last-child {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* =====================================================
   05 BUTTONS
   Einheitliche SchlossFUN Button-Farben
   ===================================================== */

.sf-page .btn-info,
.sf-page .btn-primary {
    color: #fff;
    background: var(--sf-primary);
    border-color: var(--sf-primary);
}

.sf-page .btn-info:hover,
.sf-page .btn-primary:hover {
    color: #fff;
    background: var(--sf-primary-dark);
    border-color: var(--sf-primary-dark);
}


/* =====================================================
   06 CARDS
   SchlossFUN Card-Design
   ===================================================== */

.sf-page .card {
    height: 100%;
    background: rgba(255, 250, 242, 0.68);
    border: 1px solid rgba(18, 51, 58, 0.14);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(18, 51, 58, 0.08);
}

.sf-page .card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.sf-page .card-body {
    padding: 1.35rem;
}

.sf-page .card-title {
    color: var(--sf-text);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
}

.sf-page .card-text {
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.6;
}

.sf-page .card .btn {
    margin-top: .5rem;
}

/* =====================================================
   07 RESPONSIVE
   Anpassungen für Tablet und Smartphone
   ===================================================== */

/* Desktop / Laptop */
@media (max-width: 1199.98px) {
    #c15 {
        max-width: 480px;
        margin-top: -220px;
        margin-bottom: -10rem;
    }
}

/* Tablet / iPad / kleinere Screens */
@media (max-width: 991.98px) {
    .sf-hero-swiper {
        height: 62vh;
        min-height: 430px;
    }

    #c15 {
        max-width: 460px;
        margin-top: -210px;
        margin-left: 4%;
        margin-right: 4%;
        margin-bottom: -7rem;
        padding: 1rem;
    }

    #c15 h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .sf-header-v5 .sf-nav-left,
    .sf-header-v5 .sf-nav-right {
        display: none !important;
    }

    .sf-menu-toggle {
        display: block;
    }
}

/* Smartphone */
@media (max-width: 575.98px) {
    .sf-logo img {
        width: 130px;
    }

    .sf-hero-swiper {
        height: 520px;
        min-height: 520px;
    }

    #c15 {
        max-width: none;
        margin-top: -220px;
        margin-left: 4%;
        margin-right: 4%;
        margin-bottom: -8rem;
        padding: 1rem;
    }

    #c15 h1 {
        font-size: clamp(1.6rem, 9vw, 2.2rem);
    }

    #c15 p {
        font-size: .95rem;
        line-height: 1.4;
    }

    #c15 .btn {
        display: inline-block;
        width: auto;
        margin: .25rem .25rem .25rem 0;
        font-size: .9rem;
        padding: .55rem .75rem;
    }

    #c8 {
        margin-top: 0;
    }
}
/* Sehr kleine Smartphones */
@media (max-width: 452px) {
    #c15 {
        margin-top: -215px;
        margin-bottom: -6rem;
    }

    #c15 p:last-child {
        flex-direction: column;
        gap: .5rem;
    }

    #c15 .btn {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================
   08 HEADER / NAVIGATION V5
   Desktop-first / SchlossFUN Standard
   Mobile: bis 820px
   Desktop: ab 821px
   ===================================================== */

/* Grundzustand */
.sf-menu-toggle {
    display: none;
    width: 32px;
    height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
}

.sf-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--sf-primary-dark);
}

.sf-mobile-nav {
    display: none;
}

/* Desktop Header */
.sf-header-v5 {
    position: relative;
    z-index: 50;
    height: 100px;
    background: var(--sf-bg);
    overflow: visible;
}

.sf-header-v5-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    column-gap: 4rem;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 1.65rem 2rem 0;
}

/* Logo Desktop */
.sf-header-v5 .sf-logo-v5 {
    position: relative;
    top: -15px;
    left: auto;
    transform: none;
    z-index: 100;
}

.sf-header-v5 .sf-logo-v5 img {
    width: 170px;
    height: auto;
    display: block;
}

/* Desktop Navigation */
.sf-header-v5 .sf-nav-left {
    justify-self: end;
}

.sf-header-v5 .sf-nav-right {
    justify-self: start;
}

.sf-header-v5 .sf-nav > ul {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-header-v5 .sf-nav > ul > li {
    position: relative;
}

.sf-header-v5 .sf-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    padding: .35rem 0;
    color: var(--sf-primary-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: .055em;
	white-space: nowrap;
}

.sf-header-v5 .sf-nav > ul > li > a:hover {
    color: var(--sf-primary);
}

/* Desktop Dropdown */
.sf-header-v5 .sf-nav > ul > li:has(ul) > a::after {
    content: "â–¼";
    font-size: .5rem;
    margin-left: .45rem;
    opacity: .6;
}

.sf-header-v5 .sf-nav > ul > li > ul {
    display: none;
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 165px;
    padding: 0;
    margin: 0;
    list-style: none;
    background: rgba(255, 250, 242, .97);
    box-shadow: var(--sf-shadow);
    z-index: 200;
}

.sf-header-v5 .sf-nav > ul > li:hover > ul {
    display: block;
}

.sf-header-v5 .sf-nav > ul > li > ul > li > a {
    display: block;
    padding: .65rem 1rem;
    color: var(--sf-text);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 400;
    white-space: nowrap;
}

.sf-header-v5 .sf-nav > ul > li > ul > li > a:hover {
    color: var(--sf-primary);
    background: rgba(43, 107, 115, .08);
}

/* =====================================================
   Mobile Header bis 820px
   ===================================================== */

@media (max-width: 1023px) {

    .sf-header-v5 {
        height: 80px;
    }

    .sf-header-v5-inner {
        display: block;
        position: relative;
        height: 80px;
        padding: 0;
    }

    .sf-header-v5 .sf-nav-left,
    .sf-header-v5 .sf-nav-right {
        display: none !important;
    }

    .sf-header-v5 .sf-logo-v5 {
        position: absolute;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        z-index: 100;
    }

    .sf-header-v5 .sf-logo-v5 img {
        width: 140px;
        height: auto;
    }

    .sf-menu-toggle {
        display: block !important;
        position: absolute;
        right: 1.25rem;
        top: 1.35rem;
        z-index: 300;
    }

    .sf-mobile-nav.is-open {
        display: block;
        position: absolute;
        top: 78px;
        left: auto;
        right: 1.25rem;
        transform: none;
        z-index: 250;

        width: 310px;
        max-width: calc(100% - 2rem);
        padding: 1rem;

        background: rgba(255, 250, 242, .72);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);

        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(18, 51, 58, .20);
    }

    .sf-mobile-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sf-mobile-nav li {
        margin-bottom: .65rem;
    }

    .sf-mobile-nav li:last-child {
        margin-bottom: 0;
    }

    .sf-mobile-nav a {
        display: block;
        color: var(--sf-primary-dark);
        text-decoration: none;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .045em;
        padding: .35rem 0;
    }

    .sf-mobile-nav li ul {
        display: none;
        margin-top: .2rem;
        margin-left: .8rem;
    }

    .sf-mobile-nav li.is-open > ul {
        display: block;
    }

    .sf-mobile-nav li ul a {
        font-size: 1.02rem;
        font-weight: 500;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: 0;
        color: var(--sf-text);

        padding: .35rem .6rem;
        border-radius: 8px;

        transition:
            color .22s ease,
            background-color .22s ease,
            transform .22s ease;
    }

    .sf-mobile-nav li ul a:hover,
    .sf-mobile-nav li ul a:focus {
        color: var(--sf-primary);
        background: rgba(43, 107, 115, .08);
        border-radius: 8px;
    }


    .sf-mobile-nav li:has(ul) > a::after {
        content: "â–¸";
        margin-left: .45rem;
        font-size: .75rem;
        opacity: .65;
    }

    .sf-mobile-nav li.is-open > a::after {
        content: "â–¾";
    }

    .sf-mobile-nav-cta {
        margin-top: .9rem;
    }

    .sf-mobile-nav-cta a {
        padding: .85rem 1rem;
        text-align: center;
        color: #fff !important;
        background: var(--sf-primary);
        border-radius: 10px;
        font-weight: 700;
    }
}

/* Kleine Smartphones */
@media (max-width: 430px) {

    .sf-header-v5 .sf-logo-v5 img {
        width: 130px;
    }

    .sf-mobile-nav.is-open {
        right: 1rem;
        width: calc(100% - 2rem);
    }
}
/* =====================================================
   09 FOOTER
   Minimaler Footer
   ===================================================== */

.sf-footer-minimal {
    padding: 2rem;
    margin-top: 3rem;
    font-size: .9rem;
    color: var(--sf-muted);
    border-top: 1px solid rgba(18, 51, 58, 0.12);
}

.sf-footer-minimal-inner {
    max-width: 1400px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.sf-footer-copy span {
    color: var(--sf-primary-dark);
    font-weight: 700;
}

.sf-footer-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.sf-footer-links a,
.sf-cookie-settings {
    color: var(--sf-primary);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sf-footer-links a:hover,
.sf-cookie-settings:hover {
    color: var(--sf-primary-dark);
}

@media (max-width: 767px) {
    .sf-footer-minimal-inner,
    .sf-footer-links {
        flex-direction: column;
        gap: .8rem;
        text-align: center;
    }
}


/* =====================================================
   10 SWIPER HOME SLIDER
   SchlossFUN Impressionen
   ===================================================== */

.sf-home-slider-section {
    margin: 4rem auto 3rem;
    width: 100%;
}

.sf-home-slider-head {
    margin-bottom: 1.25rem;
}

.sf-home-slider-head h2 {
    margin-bottom: .5rem;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-home-slider-head p {
    color: var(--sf-text);
    margin-bottom: 0;
}

.sf-home-slider {
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.sf-home-slider .swiper-slide {
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sf-surface);
}

.sf-home-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sf-home-slider .swiper-pagination {
    position: relative;
    margin-top: 1.5rem;
}

.sf-home-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--sf-primary);
    opacity: .35;
}

.sf-home-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

.sf-home-slider-note {
    text-align: center;
    margin-top: 1rem;
    font-size: .95rem;
    color: var(--sf-muted);
}
/* =====================================================
   11 THREE COLUMNS / ACCORDIONS
   ===================================================== */

/* Leeren 3-Spalten-Bereich auf Unterseiten vollständig entfernen */
.sf-subpage-middle-columns:not(:has(.sf-three-column:not(:empty))) {
    display: none !important;
}

.sf-three-columns {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.sf-three-column {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .sf-three-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 3rem auto;
    }
}

/* =====================================================
   99 GLOBAL FIXES / SPEZIALBEREICHE
   ===================================================== */
/* Abstand Hero zu erster Cardgroup */
#c8 {
    margin-top: 2.5rem;
}

html,
body,
.sf-page {
    overflow-x: hidden;
}
/* =====================================================
   History Swiper / Historisches Schlössle
   ===================================================== */

.sf-history-swiper {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 9px 9px 18px rgba(18, 51, 58, .18);
}

.sf-history-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.sf-history-swiper .swiper-pagination {
    bottom: .75rem !important;
}
/* =====================================================
   OnePager Two Columns
   ===================================================== */

.sf-two-columns {
    max-width: var(--sf-content-width);
    margin: 1rem auto 3rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    align-items: center;
}

.sf-two-column {
    min-width: 0;
}

@media (max-width: 900px) {
    .sf-two-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 4rem auto;
        padding: 0 1.25rem;
    }
}
/* =====================================================
   History Swiper Caption
   ===================================================== */

.sf-history-caption {
    background: #faf3eb;
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;

    border-top: none;
    backdrop-filter: none;
    box-shadow: none;
}

.sf-history-caption,
.sf-history-caption * {
    text-shadow: none;
}
/* =====================================================
   12 ONEPAGER RHYTHMUS / SECTION BACKGROUNDS
   Gezieltes Feintuning der eigenen TYPO3-OnePager-Bereiche
   ===================================================== */

/* Intro-Bereich */
#c5 {
    background: #e3dfd4;
}

/* Partner / Accordion-Bereich */
.sf-three-columns-first {
    background: #ebe5da;
    margin-top: 1rem;
    padding-top: 2rem;
    padding-bottom: 2.5rem;

    border-top: 1px solid #d4cec2;
    border-bottom: 1px solid #d4cec2;
}

/* Historien-/Normal-2-Bereich */
.sf-normal-2 {
    max-width: var(--sf-content-width);
    margin: -2rem auto 0;
    padding: 3rem 2rem;

    background: #f4efe6;
}

/* Zweiter 3-Spalten-Bereich bleibt separat steuerbar */
.sf-three-columns-second {
    margin-top: .5rem;
    display: none !important;
}

/* Unsichtbare reine Anker-Elemente im TYPO3-Backend */
.anchor-only,
.frame.anchor-only {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.anchor-only > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================
   PARTNER ACCORDIONS
   TYPO3 Media Position:
   Left / Top / Right / Bottom
   ========================================== */

.sf-three-column .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
}

.sf-three-column .accordion-item {
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(18,51,58,.12);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .75rem;
}

.sf-three-column .accordion-button {
    background: transparent;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sf-text);
    padding: 1rem 1.25rem;
    box-shadow: none;
}

.sf-three-column .accordion-button:not(.collapsed) {
    background: rgba(255,255,255,.25);
    color: var(--sf-text);
    box-shadow: none;
}

.sf-three-column .accordion-body {
    padding: 1rem;
    border-top: 1px solid rgba(18,51,58,.08);
}

.sf-three-column .accordion-body a {
    text-decoration: underline;
}


/* -------------------------------------
   Allgemeine Medienregeln
   ------------------------------------- */

.sf-three-column .accordion-content-media .gallery-row {
    display: block;
    width: 100%;
    margin: 0;
}

.sf-three-column .accordion-content-media .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.sf-three-column .accordion-content-media figure {
    margin: 0;
}

.sf-three-column .accordion-content-media img {
    display: block;
    float: none;
    width: 220px;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.sf-three-column .accordion-content-text {
    min-width: 0;
}


/* -------------------------------------
   LOGO RECHTS
   Text links, Logo oben rechts
   ------------------------------------- */

.sf-three-column .accordion-content-right {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 125px;
    gap: .75rem;
    align-items: start;
}

.sf-three-column .accordion-content-right .accordion-content-text {
    grid-column: 1;
    grid-row: 1;
    min-width: 140px;
}

.sf-three-column .accordion-content-right .accordion-content-media {
    grid-column: 2;
    grid-row: 1;
    width: 125px;
    transform: translateX(10px);
}

.sf-three-column .accordion-content-right .accordion-content-media img {
    max-width: 125px;
    margin-left: auto;
    margin-right: 0;
}

/* -------------------------------------
   LOGO LINKS
   Logo oben links, Text rechts
   ------------------------------------- */

.sf-three-column .accordion-content-left {
    display: grid;
    grid-template-columns: 125px minmax(140px, 1fr);
    gap: .75rem;
    align-items: start;
}

.sf-three-column .accordion-content-left .accordion-content-media {
    grid-column: 1;
    grid-row: 1;
    width: 125px;
    transform: translateX(-10px);
}

.sf-three-column .accordion-content-left .accordion-content-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 140px;
}

.sf-three-column .accordion-content-left .accordion-content-media img {
    max-width: 125px;
    margin-left: 0;
    margin-right: auto;
}


/* -------------------------------------
   LOGO OBEN
   ------------------------------------- */

.sf-three-column .accordion-content-top {
    display: block;
}

.sf-three-column .accordion-content-top .accordion-content-media {
    width: 100%;
    margin-bottom: 1.25rem;
}

.sf-three-column .accordion-content-top .accordion-content-media img {
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------
   LOGO UNTEN
   ------------------------------------- */

.sf-three-column .accordion-content-bottom {
    display: flex;
    flex-direction: column;
}

.sf-three-column .accordion-content-bottom .accordion-content-text {
    order: 1;
}

.sf-three-column .accordion-content-bottom .accordion-content-media {
    order: 2;
    width: 100%;
    margin-top: 1.25rem;
}

.sf-three-column .accordion-content-bottom .accordion-content-media img {
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------
   Kontaktdaten
   ------------------------------------- */

.sf-three-column .accordion-content-text a[href^="tel:"] {
    white-space: nowrap;
}


/* -------------------------------------
   Mobile
   Auf schmalen Geräten immer untereinander
   ------------------------------------- */

@media (max-width: 575.98px) {

    .sf-three-column .accordion-content-left,
    .sf-three-column .accordion-content-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .sf-three-column .accordion-content-left .accordion-content-media,
    .sf-three-column .accordion-content-right .accordion-content-media {
        width: 100%;
    }

    .sf-three-column .accordion-content-left .accordion-content-media {
        order: 1;
    }

    .sf-three-column .accordion-content-left .accordion-content-text {
        order: 2;
    }

    .sf-three-column .accordion-content-right .accordion-content-text {
        order: 1;
    }

    .sf-three-column .accordion-content-right .accordion-content-media {
        order: 2;
    }

    .sf-three-column .accordion-content-media img {
        margin-left: auto;
        margin-right: auto;
    }
}


/* -------------------------------------
   Sonstige bestehende Responsive Regel
   ------------------------------------- */

@media (max-width: 900px) {
    .sf-normal-2 {
        margin-top: 2rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
/* =====================================================
   14 SOCIAL SIDEBAR
   ===================================================== */

.sf-social-sidebar {
    position: fixed;
    top: 42%;
    right: 0;
    transform: translateY(-50%);
    z-index: 999;

    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sf-social-sidebar a {
    width: 170px;
    height: 52px;

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

    padding: 0 1rem;

    background: rgba(255,250,242,.95);
    color: var(--sf-text);
    text-decoration: none;

    border-radius: 12px 0 0 12px;
    box-shadow: var(--sf-shadow);

    transform: translateX(118px);
    transition: transform .35s ease, box-shadow .25s ease;
}

.sf-social-sidebar a:hover {
    transform: translateX(0);
}

.sf-social-sidebar img {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0;
    display: block;
}

.sf-social-sidebar span {
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Mobile: nur kleine Icons, kein Ausfahren, keine Texte */
@media (max-width: 991px) {

    .sf-social-sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 30%;
        transform: none;
        gap: .45rem;
        z-index: 9999;
    }

    .sf-social-sidebar a {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        transform: none;
        border-radius: 10px;
    }

    .sf-social-sidebar a:hover {
        transform: none;
    }

    .sf-social-sidebar span {
        display: none;
    }

    .sf-social-sidebar img {
        width: 24px !important;
        height: 24px !important;
    }
}
/* Partner / Accordion-Bereich */
.sf-three-columns-first {
    background: #ebe5da !important;
    margin-top: 1.5rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;

    border-top: 1px solid #d4cec2;
    border-bottom: 1px solid #d4cec2;
}

/* Abstand des Partner-Intro-Textframes reduzieren */
#c24.frame {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* =====================================================
   HOTFIX Partner UID 26 - Präsentationsstand
   ===================================================== */

/* Falls UID 26 noch zusätzlich in der Normal-Spalte ausgegeben wird: ausblenden */
.sf-page > #c26 {
    display: none !important;
}

/* Im echten Partner-Bereich wieder anzeigen */
#partner #c26 {
    display: block !important;
}

.sf-partner-section {
    background: #f4f0e8;
    padding: 2.25rem 1.5rem 4.25rem;
    border-top: 1px solid #d8d2c7;
    border-bottom: 1px solid #d8d2c7;
}

#partner #c26.frame,
#partner #c26 {
    max-width: none !important;
    margin: 0 auto 2rem !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    text-align: center;
}

#partner #c26 * {
    box-shadow: none !important;
}

.sf-three-columns-first {
    max-width: 1280px;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.sf-subpage-layout {
    max-width: 1280px;
    margin: .75rem auto 4rem;
    padding: 0 2rem;

    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}

.sf-subpage-sidebar {
    padding-top: .5rem;
}

.sf-subnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(18, 51, 58, .14);
    background: rgba(255, 250, 242, .35);
}

.sf-subnav li {
    border-bottom: 1px solid rgba(18, 51, 58, .12);
}

.sf-subnav li:last-child {
    border-bottom: 0;
}

.sf-subnav a {
    display: block;
    padding: .8rem 1rem;
    color: var(--sf-text);
    text-decoration: none;
    font-weight: 500;
}

.sf-subnav a:hover,
.sf-subnav .active > a {
    color: var(--sf-primary-dark);
    background: rgba(43, 107, 115, .08);
}

.sf-subpage-content {
    min-width: 0;
}

@media (max-width: 991px) {
    .sf-subpage-layout {
        display: block;
        margin-top: 1.5rem;
        padding: 0 1.25rem;
    }

    .sf-subpage-sidebar {
        margin-bottom: 2rem;
    }
}
/* =====================================================
   SchlossFUN Hybrid Layout Optimierungen
   ===================================================== */

/* -------------------------------------
   Subpage Layout
------------------------------------- */

.sf-subpage-sidebar {
    padding-top: 1.5rem;
}

.sf-subpage-content {
    max-width: 920px;
}

.sf-subnav a {
    font-size: .95rem;
}

/* -------------------------------------
   Abstand Before Content reduzieren
------------------------------------- */

.sf-subpage-before {
    margin-bottom: .5rem !important;
    padding-bottom: 0 !important;
}

.sf-subpage-before .frame {
    --frame-spacing: 0px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* -------------------------------------
   Footer 3-Spalter
------------------------------------- */

.sf-subpage-footer-columns {
    max-width: 1280px;
    margin: 3rem auto 0;
    padding: 0 2rem 2rem;
}

.sf-subpage-footer-columns .sf-footer-columns-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3rem !important;
    align-items: start !important;
}

.sf-subpage-footer-columns .frame,
.sf-subpage-footer-columns .frame-group-container,
.sf-subpage-footer-columns .frame-group-inner,
.sf-subpage-footer-columns .frame-container,
.sf-subpage-footer-columns .frame-inner,
.sf-subpage-footer-columns .frame-header {
    margin: 0 !important;
    padding: 0 !important;
}

.sf-subpage-footer-columns h2,
.sf-subpage-footer-columns .element-header {
    margin: 0 !important;
    font-size: 1.35rem;
}

/* -------------------------------------
   Back To Top
------------------------------------- */

.sf-back-to-top {
    position: fixed;
    right: .2rem;
    bottom: 2rem;
    z-index: 99999;

    width: 45px;
    height: 45px;

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

    background: #565656;
    border-radius: 8px;

    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: all .2s ease;

    font-size: 0; /* versteckt das ↑ aus dem HTML */
}

.sf-back-to-top::before {
    content: "";
    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #fff;
}

.sf-back-to-top:hover {
    background: #444;
    transform: translateY(-2px);
}
@media (max-width: 1180px) {

    .sf-back-to-top {
        width: 42px;
        height: 42px;

        right: .55rem;
        bottom: .75rem;

        opacity: .82;
    }

    .sf-back-to-top::before {
        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 7px;
    }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    .sf-header-v5-inner {
        column-gap: 2rem;
    }

    .sf-header-v5 .sf-nav > ul {
        gap: 2rem;
    }

    .sf-header-v5 .sf-nav > ul > li > a {
        font-size: 1rem;
        letter-spacing: .04em;
        white-space: nowrap;
    }
}
/* Kontaktseite Google Maps */
.sf-contact-map {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 540px;
    padding: 2rem;
}
.sf-contact-map iframe {
    width: 100%;
    max-width: 520px;

    height: 420px;

    border: 0;
    border-radius: 12px;

    box-shadow: 0 10px 28px rgba(18,51,58,.08);
}
/* Desktop */
#content-61 {
    --bs-aspect-ratio: 85%;
}

/* Mobile */
@media (max-width: 768px) {
    #content-61 {
        --bs-aspect-ratio: 120%;
    }
}
/* PhotoSwipe Lightbox */
.pswp__bg {
    background: rgba(62, 49, 36, 0.92) !important;
}
.pswp__img {
    border: 6px solid rgba(255,255,255,.9);
    border-radius: 0;
}

/* ==========================================
   Suite-Galerien – Romantik & Nachtigall
   ========================================== */
#c71 .gallery-row .gallery-item figure.image,
#c75 .gallery-row .gallery-item figure.image {
    border: 3px solid rgba(255,250,242,.95);
    box-shadow: 0 1px 4px rgba(18,51,58,.08);
    box-sizing: border-box;
}
.pswp__dynamic-caption {
    display: none !important;
}

/* Cookie Banner */
.sf-cookie-banner[hidden] {
    display: none !important;
}

.sf-cookie-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    width: min(540px, calc(100vw - 36px));
    padding: 1.25rem;
    border-radius: 16px;
    background: #fffaf2;
    color: #12333a;
    border: 1px solid rgba(18,51,58,.18);
    box-shadow: 0 12px 36px rgba(18,51,58,.22);
}

.sf-cookie-text {
    margin: 0 0 1rem;
    color: #12333a;
    line-height: 1.55;
}

.sf-cookie-form {
    display: grid;
    gap: .75rem;
}

.sf-cookie-check {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    color: #12333a;
}

.sf-cookie-check input {
    width: 18px;
    height: 18px;
    margin-top: .25rem;
    accent-color: #0f5f66;
}

.sf-cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .5rem;
}

.sf-cookie-actions .btn {
    cursor: pointer;
}

.sf-cookie-decline {
    border-color: rgba(18,51,58,.22);
}

@media (max-width: 767.98px) {
    .sf-cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .sf-cookie-actions .btn {
        width: 100%;
    }
}
.gallery-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
figure .caption {
    padding: 0.25rem 0.15rem 0.2rem;
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--sf-muted);
    text-align: center;
}

/* Galerien mit weißem Rahmen */
.sf-gallery-framed .gallery-row .gallery-item figure.image {
    border: 3px solid rgba(255,250,242,.95);
    box-shadow: 0 1px 4px rgba(18,51,58,.08);
    box-sizing: border-box;
}
.frame-type-gallery .gallery-row .gallery-item figure.image {
    background: rgba(255, 250, 242, .65);
}
/* =====================================================
   TYPO3 Galerie / Partnergalerien
   Lupe nur innerhalb echter Galerie-Content-Elemente
   ===================================================== */

.frame-type-gallery .gallery-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.frame-type-gallery .gallery-row .gallery-item {
    padding: 0 !important;
}

.frame-type-gallery .gallery-row .gallery-item figure.image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin: 0;

    border: 3px solid rgba(255,250,242,.95);
    box-shadow: 0 1px 4px rgba(18,51,58,.08);
    box-sizing: border-box;
}

.frame-type-gallery .gallery-row .gallery-item figure.image img {
    display: block;
    width: 100%;
    transition: transform .35s ease, filter .35s ease;
}

.frame-type-gallery .gallery-row .gallery-item figure.image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 51, 58, .18);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.frame-type-gallery .gallery-row .gallery-item figure.image::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translate(-50%, -50%) scale(.85);

    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;

    opacity: 0;
    z-index: 3;
    pointer-events: none;

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

.frame-type-gallery .gallery-row .gallery-item figure.image:hover img {
    transform: scale(1.05);
    filter: brightness(.88);
}

.frame-type-gallery .gallery-row .gallery-item figure.image:hover::after,
.frame-type-gallery .gallery-row .gallery-item figure.image:hover::before {
    opacity: 1;
}

.frame-type-gallery .gallery-row .gallery-item figure.image:hover::before {
    transform: translate(-50%, -50%) scale(1);
}


/* =====================================================
   Partner Cards im 2-Spalten Layout
   Galerie + Text/Textmedia wirken als eine Card
   ===================================================== */

.sf-layout-2columns .sf-subpage-two-columns {
    align-items: start !important;
}

.sf-layout-2columns .frame-type-gallery {
    background: rgba(255,250,242,.62);
    padding: .1rem;
    box-shadow: 0 12px 34px rgba(18,51,58,.08);
    overflow: hidden;
    margin-bottom: 0 !important;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-text,
.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia,
.sf-layout-2columns .frame-type-gallery + .frame-type-textpic {
    background: rgba(255,250,242,.62);
    border: 1px solid rgba(18,51,58,.12);
    border-top: 0;
    padding: .9rem .9rem 1.2rem;
    box-shadow: 0 16px 34px rgba(18,51,58,.08);
    text-align: left;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    color: #2f3a3d;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-text p,
.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia p,
.sf-layout-2columns .frame-type-gallery + .frame-type-textpic p {
    color: #2f3a3d;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-text a,
.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia a,
.sf-layout-2columns .frame-type-gallery + .frame-type-textpic a {
    color: var(--sf-primary);
    font-weight: 600;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia .textpic {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia .textpic-text {
    text-align: center;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia .textpic-gallery,
.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia .gallery-row {
    margin: 0 !important;
}

.sf-layout-2columns .frame-type-gallery + .frame-type-textmedia img {
    max-width: 140px;
    height: auto;
}

.sf-layout-2columns .gallery-row {
    --gallery-columns: 3 !important;
    gap: .55rem;
}

.sf-layout-2columns .gallery-row .gallery-item {
    width: calc((100% - 1.1rem) / 3) !important;
    flex: 0 0 calc((100% - 1.1rem) / 3) !important;
    padding: 0 !important;
}

.sf-layout-2columns .gallery-row .gallery-item figure.image {
    border-radius: 15px;
}

.sf-layout-2columns .gallery-row .gallery-item figure.image::before {
    content: "";
    width: 58px;
    height: 58px;
    z-index: 2;
}

.sf-layout-2columns .gallery-row .gallery-item figure.image::after {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 23px;
    height: 23px;
    transform: translate(-50%,-50%);
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5965' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
    z-index: 3;
}


/* =====================================================
   Partner Accordion
   ===================================================== */

.sf-layout-2columns .sf-partner-accordion {
    transition: transform .25s ease, box-shadow .25s ease;
}

.sf-layout-2columns .sf-partner-accordion:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(18,51,58,.10);
}

.sf-layout-2columns .sf-partner-accordion-toggle {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    cursor: pointer;
    color: var(--sf-primary);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.2;
}

.sf-layout-2columns .sf-partner-accordion-toggle span:first-child {
    display: block;
    color: var(--sf-primary);
}

.sf-layout-2columns .sf-partner-accordion-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(255,250,242,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary);
    transition: transform .25s ease, background-color .25s ease;
}

.sf-layout-2columns .sf-partner-accordion-icon::before {
    content: "+";
    font-size: 1.45rem;
    line-height: 1;
}

.sf-layout-2columns .sf-partner-accordion-toggle[aria-expanded="true"] .sf-partner-accordion-icon::before {
    content: "-";
}

.sf-layout-2columns .sf-partner-accordion-toggle:hover .sf-partner-accordion-icon {
    transform: rotate(90deg);
    background: rgba(255,250,242,1);
}

.sf-partner-accordion.is-closed .gallery-row {
    display: none !important;
}

.sf-partner-accordion-text.is-closed {
    display: none !important;
}
/* =====================================================
   Mobile Navigation – Ergänzung für Submenu-Button
   ===================================================== */

.sf-nav-divider {
    height: 1px;
    margin: 0.6rem 0;
    background: rgba(18, 51, 58, 0.12);
    list-style: none;
}

.sf-mobile-nav .sf-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 0.35rem 0;

    border: 0;
    background: transparent;
    appearance: none;

    color: var(--sf-primary-dark);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-align: left;

    cursor: pointer;
}

.sf-mobile-nav .sf-mobile-submenu-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 0.45rem;

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

    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    opacity: 0.65;
}

.sf-mobile-nav
.sf-mobile-submenu-toggle[aria-expanded="true"]::after {
    transform: rotate(45deg);
}
/* =========================================================
   CTA – BUCHEN
   Unabhängig von der Position im Menü
========================================================= */

.sf-header-v5 .sf-nav > ul > li > a[href="/buchen"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: .5rem .8rem;

    color: #fff !important;
    background: var(--sf-primary);

    border-radius: 8px;

    font-weight: 700;
    letter-spacing: .055em;
    text-decoration: none;

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

.sf-header-v5 .sf-nav > ul > li > a[href="/buchen"]:hover,
.sf-header-v5 .sf-nav > ul > li > a[href="/buchen"]:focus {
    color: #fff !important;
    background: var(--sf-primary-dark);

    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(18, 51, 58, .16);
}
/* =========================================================
   CTA – BUCHEN Mobile
   kompakt und linksbündig
========================================================= */

.sf-mobile-nav a[href="/buchen"] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    width: auto;

    margin: .5rem 0 0;
    padding: .65rem 1.15rem;

    color: #fff !important;
    background: var(--sf-primary);

    border-radius: 8px;

    font-weight: 700;
    text-align: left;
    text-decoration: none;
    letter-spacing: .055em;
}

.sf-mobile-nav a[href="/buchen"]:hover,
.sf-mobile-nav a[href="/buchen"]:focus {
    color: #fff !important;
    background: var(--sf-primary-dark);
}
/* =========================================================
   FORMULARE – ruhiger Rahmen auf Desktop / Tablet quer
   Mobile und Tablet hochkant bleiben unverändert
========================================================= */

/* Große Bildschirme */
@media (min-width: 1200px) {

    .frame-type-form_formframework form {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;

        padding: 34px 40px 38px;

        background: rgba(255, 255, 255, .42);
        border: 1px solid rgba(43, 112, 122, .18);
        border-radius: 16px;
    }
}


/* Tablet / kleinere Geräte ausschließlich quer */
@media (min-width: 768px)
       and (max-width: 1199.98px)
       and (orientation: landscape) {

    .frame-type-form_formframework form {
        padding: 28px 30px 32px;

        background: rgba(255, 255, 255, .38);
        border: 1px solid rgba(43, 112, 122, .18);
        border-radius: 14px;
    }
}


/* Smartphone + Tablet hochkant ausdrücklich neutral */
@media (max-width: 767.98px),
       (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {

    .frame-type-form_formframework form {
        max-width: none;
        margin-left: 0;
        margin-right: 0;

        padding-left: 0;
        padding-right: 0;

        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
/* =========================================================
   FORMULAR – oben bündiger zur linken Subnavigation
   nur Desktop und Tablet quer
========================================================= */

@media (min-width: 1200px) {

    .sf-subpage-content .frame-type-form_formframework {
        margin-top: -18px;
    }
}

@media (min-width: 768px)
       and (max-width: 1199.98px)
       and (orientation: landscape) {

    .sf-subpage-content .frame-type-form_formframework {
        margin-top: -12px;
    }
}
/* Partnergalerie Hochzeit – nur Inhaltselement c91 */
#c91 .gallery-item figure.image img {
    border-radius: 10px;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#c91 .gallery-item figure.image a:hover img {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
}

/* Subpage ohne linke Navigation:
   Inhalt über die komplette Grid-Breite ziehen */
.sf-subpage-layout > .sf-subpage-content:only-child {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
}

/* Galerie innerhalb solcher Unterseiten nicht zusätzlich begrenzen */
.sf-subpage-content .frame-type-gallery,
.sf-subpage-content .frame-type-gallery .frame-group-container,
.sf-subpage-content .frame-type-gallery .frame-container,
.sf-subpage-content .frame-type-gallery .frame-inner,
.sf-subpage-content .frame-type-gallery .gallery-row {
    width: 100%;
    max-width: none;
}
#c141 .gallery-item figure.image img {
    object-position: center top;
}/* =====================================================
   HOMEPAGE – ALBCARD
   UID 174
   ===================================================== */

#c174 {
    margin: 12rem 0 -4.5rem !important;
    padding: 0 !important;
}

/* Bootstrap-Package Innenabstände neutralisieren */
#c174 .frame-group-container,
#c174 .frame-group-inner,
#c174 .frame-container,
#c174 .frame-inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* eigentlicher AlbCard-Bereich */
#c174 .textpic {
    max-width: 1180px;
    margin: 0 auto;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 4rem;

    padding: 2rem 2.5rem;	

    background: rgba(255, 250, 242, .45);
    border: 1px solid rgba(18, 51, 58, .10);
    border-radius: 17px;
}

/* Bootstrap-Breiten zurücksetzen */
#c174 .textpic-item,
#c174 .textpic-text,
#c174 .textpic-gallery {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}

/* Text */
#c174 .textpic-text {
    min-width: 0;
}

#c174 .element-header {
    margin: 0 0 .25rem;
}

#c174 .element-subheader {
    margin: 0 0 .9rem;
}

#c174 .textpic-text p {
    margin: 0 0 .75rem;
}

/* AlbCard */
#c174 .textpic-gallery,
#c174 .gallery-row,
#c174 .gallery-item,
#c174 figure {
    margin: 0 !important;
    padding: 0 !important;
}

#c174 .textpic-gallery img {
    display: block;
    width: 100% !important;
    max-width: 300px !important;
    height: auto;
    margin: 0 auto;
}


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

    #c174 {
        margin: 1.75rem 0 2rem !important;
    }

    #c174 .textpic {
        margin-left: 1.25rem;
        margin-right: 1.25rem;

        grid-template-columns: 1fr;
        gap: 1.5rem;

        padding: 1.5rem;
    }

    #c174 .textpic-gallery {
        text-align: center;
    }

    #c174 .textpic-gallery img {
        max-width: 260px !important;
    }
}
/* AlbCard -> SchlossFUN entdecken */
#c174 + #c8 {
    margin-top: 0 !important;
}

#c8 {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* AlbCard CTA */
#c174 .textpic-text p:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: .55rem 1rem;

    color: #fff;
    background: var(--sf-primary);
    border-radius: 8px;

    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;
}

#c174 .textpic-text p:last-child a:hover,
#c174 .textpic-text p:last-child a:focus {
    color: #fff;
    background: var(--sf-primary-dark);
}
/* TEST: c60 darf keine Klicks abfangen */
#c60 {
    pointer-events: none;
	}
#c57 {
    pointer-events: none;
}
/* Reine Anker-Frames ohne Layout-Höhe */
#c9,
#c93,
#c94 {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

#c9 .frame-group-container,
#c9 .frame-group-inner,
#c9 .frame-container,
#c9 .frame-inner,
#c93 .frame-group-container,
#c93 .frame-group-inner,
#c93 .frame-container,
#c93 .frame-inner,
#c94 .frame-group-container,
#c94 .frame-group-inner,
#c94 .frame-container,
#c94 .frame-inner {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
}
/* =====================================================
   ALBCARD – VORTEILE / ICONS
   ===================================================== */

#c174 .textpic-text ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    margin: 1rem 0 1.25rem;
    padding: 0;

    list-style: none;
}

#c174 .textpic-text ul li {
    position: relative;

    /* Platz für 50px Icon + Abstand zum Text */
    padding-left: 64px;
    padding-right: 20px;

    margin: 0;
    min-height: 50px;

    display: flex;
    align-items: center;

    font-weight: 600;
    line-height: 1.3;
}


/* -----------------------------------------------------
   Icon 1 – Attraktionen & Sehenswürdigkeiten
   ----------------------------------------------------- */

#c174 .textpic-text ul li:nth-child(1)::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    background:
        url("/fileadmin/user_upload/02-Cards/Albcard/picto-kultur-schloss.svg")
        center / contain no-repeat;
}


/* -----------------------------------------------------
   Icon 2 – Bus & Bahn
   ----------------------------------------------------- */

#c174 .textpic-text ul li:nth-child(2)::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    background:
        url("/fileadmin/user_upload/02-Cards/Albcard/picto-Bus-Bahn.svg")
        center / contain no-repeat;
}


/* -----------------------------------------------------
   Mobile
   ----------------------------------------------------- */

@media (max-width: 700px) {

    #c174 .textpic-text ul {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;

        margin: 1rem 0 1.25rem;
    }

    #c174 .textpic-text ul li {
        width: 100%;
        padding-left: 64px;
        padding-right: 0;
    }
}
/* =====================================================
   75/25 Layout – rechte Spalte
   Einzelbild immer volle Spaltenbreite
   ===================================================== */

.sf-layout-2columns-75-25
.sf-two-column-right
.gallery-row {
    --gallery-columns: 1 !important;
    display: block;
}

.sf-layout-2columns-75-25
.sf-two-column-right
.gallery-item {
    width: 100% !important;
    max-width: 100% !important;
}

.sf-layout-2columns-75-25
.sf-two-column-right
figure,
.sf-layout-2columns-75-25
.sf-two-column-right
picture {
    display: block;
    width: 100%;
    margin: 0;
}

.sf-layout-2columns-75-25
.sf-two-column-right
img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}

.sf-layout-2columns-75-25
.sf-two-column-right
figcaption {
    text-align: center;
}
/* =====================================================
   AlbCard Erlebnispartner
   Desktop: 2 Tabellen
   Tablet / Mobile: Originaltabelle
   Nur Seite 52
   ===================================================== */


/* -----------------------------------------------------
   Desktop: zwei Tabellen nebeneinander
   ----------------------------------------------------- */

.page-52 .sf-albcard-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}


/* -----------------------------------------------------
   Tabellenbox
   Optik passend zur AlbCard-Infobox
   ----------------------------------------------------- */

.page-52 .sf-albcard-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(40, 70, 65, 0.14);
    border-radius: 18px;
    overflow: hidden;
}


/* -----------------------------------------------------
   Responsive Wrapper
   ----------------------------------------------------- */

.page-52 .sf-albcard-table .table-responsive {
    width: 100%;
    overflow-x: auto;
}


/* -----------------------------------------------------
   Tabelle
   Bootstrap-Hintergründe neutralisieren
   ----------------------------------------------------- */

.page-52 .sf-albcard-table table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.12);

    width: 100% !important;
    max-width: none !important;
    margin: 0;

    background-color: transparent;
}


/* -----------------------------------------------------
   Tabellenbereiche und Zellen transparent
   ----------------------------------------------------- */

.page-52 .sf-albcard-table thead,
.page-52 .sf-albcard-table tbody,
.page-52 .sf-albcard-table tr,
.page-52 .sf-albcard-table th,
.page-52 .sf-albcard-table td {
    background-color: transparent !important;
    box-shadow: none !important;
}


/* -----------------------------------------------------
   Tabellenkopf
   ----------------------------------------------------- */

.page-52 .sf-albcard-table th {
    padding: 0.9rem 1rem;

    font-weight: 700;
    text-align: left;
    vertical-align: top;

    border-bottom: 1px solid rgba(40, 70, 65, 0.18);
}


/* -----------------------------------------------------
   Tabellenzeilen
   ----------------------------------------------------- */

.page-52 .sf-albcard-table td {
    padding: 0.75rem 1rem;
    vertical-align: top;

    border-bottom: 1px solid rgba(40, 70, 65, 0.10);
}


/* Letzte Zeile ohne untere Trennlinie */

.page-52 .sf-albcard-table tbody tr:last-child td {
    border-bottom: 0;
}


/* -----------------------------------------------------
   Attraktionslinks
   ----------------------------------------------------- */

.page-52 .sf-albcard-table td a {
    color: var(--sf-primary, #287481);
    font-weight: 600;
    text-decoration: none;
}

.page-52 .sf-albcard-table td a:hover,
.page-52 .sf-albcard-table td a:focus {
    text-decoration: underline;
}


/* -----------------------------------------------------
   Originaltabelle
   Auf Desktop ausblenden
   ----------------------------------------------------- */

.page-52 .sf-albcard-source {
    display: none;
}


/* =====================================================
   Tablet / Mobile
   Originaltabelle wieder einspaltig anzeigen
   ===================================================== */

@media (max-width: 991.98px) {

    .page-52 .sf-albcard-tables {
        display: none;
    }

    .page-52 .sf-albcard-source {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .page-52 .sf-albcard-source table {
        width: 100% !important;
        max-width: none !important;
    }
}
/* =====================================================
   AlbCard CTA-Buttons auf der Startseite
   ===================================================== */

/* Abstand zwischen den beiden Buttons */
#c174 .btn + .btn {
    margin-left: 0.75rem;
}

/* Zweiter CTA mit Pfeil */
#c174 .sf-albcard-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

#c174 .sf-albcard-cta::after {
    content: "\2192";
}


/* Mobile: Buttons dürfen sauber umbrechen */
@media (max-width: 700px) {

    #c174 .btn + .btn {
        margin-left: 0;
        margin-top: 0.6rem;
    }
}

/* =====================================================
   RESPONSIVE CLEANUP 2026-08-28
   Homepage Hero + AlbCard
   Ziel: konsistente Reihenfolge und keine Ueberlagerung
   ===================================================== */

/* Desktop: Text links, AlbCard-Grafik rechts eindeutig festlegen */
#c174 .textpic-text {
    grid-column: 1;
    grid-row: 1;
}

#c174 .textpic-gallery {
    grid-column: 2;
    grid-row: 1;
}

/* CTA-Zeile ohne Leerzeichen-Tricks */
#c174 .textpic-text p:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

#c174 .btn + .btn {
    margin-left: 0;
}

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

    /* Hero-Textbox darf den folgenden AlbCard-Bereich nicht ueberdecken */
    body.page-1 #c15 {
        margin-bottom: 0;
    }

    /* Auf kleinen Screens immer zuerst Inhalt, danach AlbCard-Grafik */
    #c174 .textpic-text {
        grid-column: 1;
        grid-row: 1;
    }

    #c174 .textpic-gallery {
        grid-column: 1;
        grid-row: 2;
    }
}

/* Smartphone */
@media (max-width: 575.98px) {

    #c174 .textpic {
        margin-left: .75rem;
        margin-right: .75rem;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    #c174 .textpic-gallery img {
        max-width: 220px !important;
    }

    #c174 .textpic-text p:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    #c174 .textpic-text p:last-child .btn,
    #c174 .textpic-text p:last-child a.btn {
        width: 100%;
        margin: 0;
        text-align: center;
        justify-content: center;
    }
}
/* =====================================================
   Tischdekoration – Sonderfall
   ===================================================== */

#c188 {
    margin-top: -4rem !important;
    margin-bottom: -5rem !important;
}


/* =====================================================
   Hochzeitsgalerien – vertikale Abstände
   kompletter Galerieblock inklusive Überschrift
   ===================================================== */

.sf-subpage-content > .frame-type-gallery {
    margin-top: -4rem !important;
    margin-bottom: -5rem !important;
}


/* Galerie selbst nicht verschieben */
.sf-subpage-content > .gallery-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =====================================================
   Hochzeitsgalerien ohne frame-type-gallery Wrapper
   Bildgestaltung
   ===================================================== */

.sf-subpage-content > .gallery-row .gallery-item figure.image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin: 0;

    background: rgba(255,250,242,.78);
    border: 3px solid rgba(255,250,242,.95);
    box-shadow: 0 1px 4px rgba(18,51,58,.08);
    box-sizing: border-box;
}
/* Livemusik: 3 Audio-Spalten etwas höher ziehen */
#p61 .sf-subpage-middle-columns {
    margin-top: -4rem;
}
/* =====================================================
   Audio Player – technischen Dateinamen ausblenden
   ===================================================== */

.frame-type-audio .audio-heading {
    display: none !important;
}
/* =====================================================
   Galerieübersicht
   Eckigen Fokusrahmen beim Mausklick vermeiden
   ===================================================== */

.gallery-row figure.image > a {
    display: block;
    border-radius: 18px;
}

.gallery-row figure.image > a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.gallery-row figure.image > a:focus-visible {
    border-radius: 18px;
}
/* =====================================================
   Galerie Einstieg: Hochzeitsfotografie + Partnergalerien
   c241 + c242
   Desktop: zwei Kacheln nebeneinander
   Mobile: mehr Bild, kompakte Glasboxen, saubere Abstände
   ===================================================== */

/* Desktop */
#c241,
#c242 {
    display: inline-block;
    vertical-align: top;
    width: calc(45% - .75rem);
    margin: 0;
}

#c241 {
    margin-left: 5%;
    margin-right: 1.5rem;
}

#c241 .textpic,
#c242 .textpic {
    position: relative;
}

#c241 .textpic-gallery,
#c242 .textpic-gallery {
    margin: 0;
}

#c241 .gallery-row,
#c242 .gallery-row {
    display: block;
}

#c241 .gallery-item,
#c242 .gallery-item {
    width: 100% !important;
    max-width: none !important;
}

#c241 figure,
#c242 figure {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin: 0;
}

#c241 img,
#c242 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#c241 .textpic-text,
#c242 .textpic-text {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    right: auto;
    max-width: 35%;
    padding: 1.25rem 1.4rem;

    background: rgba(246, 238, 226, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 51, 58, .12);
    z-index: 2;
}

#c241 .textpic-text h3,
#c242 .textpic-text h3 {
    color: var(--sf-primary);
    margin-bottom: .45rem;
}

#c241 .textpic-text p,
#c242 .textpic-text p {
    color: var(--sf-text);
    margin-bottom: .65rem;
}

#c241 .textpic-text p:last-child,
#c242 .textpic-text p:last-child {
    margin-bottom: 0;
}

/* Tablet und kleinere Displays: Kacheln untereinander */
@media (max-width: 1199.98px) {

    #c241,
    #c242 {
        display: block;
        width: min(86%, 820px);
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #c241 {
        margin-bottom: 1.5rem !important;
    }

    #c242 {
        margin-bottom: 2.5rem !important;
    }

    #c241 .textpic,
    #c242 .textpic {
        margin: 0;
    }

    #c241 img,
    #c242 img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    #c241 .textpic-text,
    #c242 .textpic-text {
        left: 1.1rem;
        bottom: 1.1rem;
        right: auto;
        width: auto;
        max-width: 44%;
        padding: .9rem 1rem;
    }

    #c241 .textpic-text h3,
    #c242 .textpic-text h3 {
        font-size: 1.35rem;
        line-height: 1.15;
        margin-bottom: .3rem;
    }

    #c241 .textpic-text p,
    #c242 .textpic-text p {
        font-size: .95rem;
        line-height: 1.3;
        margin-bottom: .3rem;
    }

    #c241 .textpic-text .btn,
    #c242 .textpic-text .btn {
        font-size: .88rem;
        padding: .48rem .72rem;
    }
}

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

    #c241,
    #c242 {
        display: block;
        width: 100%;
        max-width: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #c241 {
        margin-bottom: 1rem !important;
    }

    #c242 {
        margin-bottom: 2.25rem !important;
    }

    #c241 .textpic,
    #c242 .textpic {
        margin: 0;
    }

    #c241 img,
    #c242 img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    #c241 .textpic-text,
    #c242 .textpic-text {
        left: .9rem;
        bottom: .9rem;
        right: auto;
        width: auto;
        max-width: 76%;
        padding: .7rem .85rem;
        border-radius: 13px;
        box-shadow: 0 6px 18px rgba(18, 51, 58, .10);
    }

    #c241 .textpic-text h3,
    #c242 .textpic-text h3 {
        margin-bottom: .25rem;
        font-size: 1.15rem;
        line-height: 1.15;
    }

    #c241 .textpic-text p,
    #c242 .textpic-text p {
        margin-bottom: .25rem;
        font-size: .84rem;
        line-height: 1.28;
    }

    #c241 .textpic-text .btn,
    #c242 .textpic-text .btn {
        margin-top: .1rem;
        padding: .42rem .65rem;
        font-size: .8rem;
        line-height: 1.2;
    }
}

/* Sehr kleine Smartphones */
@media (max-width: 430px) {

    #c241 .textpic-text,
    #c242 .textpic-text {
        max-width: 79%;
        left: .75rem;
        bottom: .75rem;
        padding: .62rem .72rem;
    }

    #c241 .textpic-text h3,
    #c242 .textpic-text h3 {
        font-size: 1.08rem;
    }

    #c241 .textpic-text p,
    #c242 .textpic-text p {
        font-size: .8rem;
        line-height: 1.24;
    }

    #c241 .textpic-text .btn,
    #c242 .textpic-text .btn {
        font-size: .76rem;
        padding: .38rem .58rem;
    }
}