@charset "UTF-8";
/* CSS Document */

body {
	background-color: #1A3557;
	margin: 0;
	padding: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

/*Logo*/
.logo_slider {
	width: 30%;
}

.info-container, 
.text-image-container {
    max-width: 1200px;
    width: 95%; 
    margin: 0 auto;
}

@charset "UTF-8";
/* CSS Document */

body {
	background-color: #1A3557;
	margin: 0;
	padding: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

/*Logo*/
.logo_slider {
	width: 30%;
}

.info-container, 
.text-image-container {
    max-width: 1200px;
    width: 95%; 
    margin: 0 auto;
}

/* ========================================================================= */
/* INFOBOXEN - NEUES DESIGN */
/* ========================================================================= */

.info-section {
    padding: 40px 20px 20px; 
}

.info-container {
    display: flex; 
    justify-content: space-between; 
    padding: 0; 
    max-width: 1200px; 
    margin: 0 auto; 
    gap: 30px; 
}

.info-box {
    position: relative; /* Anker fuer die Billardkugel */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    text-align: left;
    flex: 1;
    margin: 0;
    min-width: 0;
    border-top: 5px solid #feed00; /* Gelber Akzent anstelle von Blau */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.info-box h2 {
    color: #1A3557; 
    margin-top: 0;
    font-size: 1.4rem;
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info-box p {
    color: #555555; 
    line-height: 1.6;
}

.info-box a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f6f8fb;
    color: #1A3557;
    text-decoration: none;
    padding: 11px 15px;
    border-radius: 9px;
    margin-bottom: 10px;
    font-weight: bold;
    border-left: 4px solid #feed00;
    transition: all 0.25s ease;
}

.info-box a::after {
    content: "\203A"; /* › Chevron */
    font-size: 1.3em;
    line-height: 1;
    color: #c9a900;
    transition: transform 0.25s ease;
}

.info-box a:hover {
    background-color: #fff8cc;
    border-left-color: #e0c000;
    color: #12294a;
}

.info-box a:hover::after {
    transform: translateX(4px);
}

/* Mobile Anpassung */
@media screen and (max-width: 800px) {
    .info-container {
        flex-direction: column; 
        align-items: center;
    }

    .info-box {
        margin: 10px 0; 
        width: 100%; 
        max-width: 100%; 
        box-sizing: border-box; 
        background-color: #ffffff; 
        border: none; 
        border-top: 5px solid #feed00; 
    }
    
    .info-box:hover {
        transform: none;
    }
}

/* ========================================================================= */
/* BILLARDKUGEL-AKZENT (per JS zufaellig 1-9 auf Streifen-Karten gesetzt)     */
/* ========================================================================= */
.pbc-ball {
    position: absolute;
    top: -16px;
    right: -10px;
    width: 54px;
    height: 54px;
    z-index: 3;
    transform: rotate(-8deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    transition: transform 0.3s ease;
}
.info-box:hover .pbc-ball,
.membership-card:hover .pbc-ball,
.vevent:hover .pbc-ball,
.bk-card:hover .pbc-ball {
    transform: rotate(0deg) scale(1.06);
}
@media screen and (max-width: 600px) {
    .pbc-ball { width: 44px; height: 44px; top: -12px; right: -6px; }
}

/* ========================================================================= */
/* Textbeitrag mit Bild (Text-Image-Section) */
/* ========================================================================= */

.text-image-section {
    padding: 40px 20px; 
}

.text-image-container {
    display: flex; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto 60px auto; 
    align-items: flex-start; 
    color: #ffffff; 
    padding: 0 10px; 
}

.text-image-section .text-image-container:last-child {
    margin-bottom: 0;
}

.image-wrapper {
    flex: 0 0 40%; 
}

.image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.text-wrapper {
    flex: 1; 
}

.text-wrapper h2 {
    color: #ffffff; 
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .text-image-container {
        flex-direction: column; 
        gap: 20px;
        margin-bottom: 40px; 
        padding: 0; 
    }
    
    .image-wrapper {
        flex: none; 
        width: 100%; 
    }
}

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

.footer {
    background-color: #0A1A2F; 
    color: #f5f5f5; 
    padding: 60px 20px 20px 20px; 
}

.footer-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px; 
}

.footer-col {
    flex: 1; 
    min-width: 200px; 
}

.footer-col.logo-col {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 150px;
    order: -1; 
}

.footer-logo {
    width: 150px;
    max-width: 100%;
    height: auto;
    align-self: flex-start;   /* verhindert vertikales Strecken im Flex-Container */
    object-fit: contain;
    margin-bottom: 15px;
}

.footer-col p, 
.footer-col address {
    color: #f5f5f5; 
    font-style: normal; 
    margin-bottom: 10px;
    line-height: 1.6;
}

.social-links a {
	color: #7CBAEE; 
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s;
}

.social-links a:hover {
    color: #ffffff;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #196fb8; 
    padding-bottom: 5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #ffffff; 
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #7cbaee; 
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #2A3A4F; 
    font-size: 0.9em;
    color: #bdbdbd;
}

@media screen and (max-width: 800px) {
    .footer-container {
        flex-direction: column; 
        gap: 30px;
    }
    
    .footer-col {
        min-width: 100%; 
        text-align: center;
    }

    .footer-col.logo-col {
        justify-content: center; 
        flex: 1 1 100%;
        order: 0; 
    }
}
/* ========================================================================= */
/* Textbeitrag mit Bild (Text-Image-Section) */
/* ========================================================================= */

.text-image-section {
    padding: 40px 20px; 
}

.text-image-container {
    display: flex; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto 60px auto; 
    align-items: flex-start; 
    color: #ffffff; 
    padding: 0 10px; 
}

.text-image-section .text-image-container:last-child {
    margin-bottom: 0;
}

.image-wrapper {
    flex: 0 0 40%; 
}

.image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.text-wrapper {
    flex: 1; 
}

.text-wrapper h2 {
    color: #ffffff; 
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .text-image-container {
        flex-direction: column; 
        gap: 20px;
        margin-bottom: 40px; 
        padding: 0; 
    }
    
    .image-wrapper {
        flex: none; 
        width: 100%; 
    }
}

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

.main-footer {
    background-color: #0A1A2F; /* NEU: Sehr dunkler blauer Hintergrund */
    color: #f5f5f5; 
    padding: 60px 20px 20px 20px; 
}

.footer-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px; 
}

.footer-col {
    flex: 1; 
    min-width: 200px; 
}

/* Logo Spalte ganz links */
.footer-col.logo-col {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 150px;
    order: -1; 
}

.footer-logo {
    width: 150px;
    max-width: 100%;
    height: auto;
    align-self: flex-start;   /* verhindert vertikales Strecken im Flex-Container */
    object-fit: contain;
    margin-bottom: 15px;
}

/* Adress- und Textstyling im Footer */
.footer-col p, 
.footer-col address {
    color: #f5f5f5; 
    font-style: normal; 
    margin-bottom: 10px;
    line-height: 1.6;
}

.social-links a {
	color: #7CBAEE; 
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s;
}

.social-links a:hover {
    color: #ffffff;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #196fb8; 
    padding-bottom: 5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #ffffff; 
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #7cbaee; 
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #2A3A4F; /* Angepasst an das Blau */
    font-size: 0.9em;
    color: #bdbdbd;
}

@media screen and (max-width: 800px) {
    .footer-container {
        flex-direction: column; 
        gap: 30px;
    }
    
    .footer-col {
        min-width: 100%; 
        text-align: center;
    }

    .footer-col.logo-col {
        justify-content: center; 
        flex: 1 1 100%;
        order: 0; 
    }
}



/* ========================================================================= */
/* KLIEBIWEB CMS STYLES (Angepasst für PBC Karben) */
/* ========================================================================= */

#kcm {
    color: #ffffff; /* Helle Schrift für dunklen Hintergrund */
    line-height: 1.6;
    font-size: 1.1rem;
}

#kcm h1, #kcm h2, #kcm h3 {
    color: #feed00; /* Das Billard-Gelb für CMS-Überschriften */
    margin-top: 0;
    margin-bottom: 15px;
}

#kcm a {
    color: #7CBAEE;
    text-decoration: none;
    transition: color 0.3s ease;
}

#kcm a:hover {
    color: #ffffff;
}

/* --- BILDER ANORDNUNG --- */
#kcm .bild_links {
    float: left;
    margin: 5px 20px 10px 0;
    max-width: 40%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#kcm .bild_rechts {
    float: right;
    margin: 5px 0 10px 20px;
    max-width: 40%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#kcm .bild_gross {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- MEHRSPALTIGE STILE (Flexbox für moderne Darstellung) --- */
#kcm article {
    display: block;
    width: 100%;
}

/* Stil 6 (2 Spalten) und Stil 7 (3 Spalten) */
#kcm .stil6_links, 
#kcm .stil6_rechts,
#kcm .stil7_links,
#kcm .stil7_rechts {
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Clearfix für alte float-Befehle */
.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Mobile Anpassungen für das CMS */
@media screen and (max-width: 800px) {
    #kcm .bild_links, 
    #kcm .bild_rechts {
        float: none; /* Hebt den Textfluss auf dem Handy auf */
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}


/* ========================================================================= */
/* KORREKTUREN & BUTTON-LINKS FÜR DEN INHALTSBEREICH */
/* ========================================================================= */

/* 1. Verhindern, dass die Überschrift unter das Menü rutscht */
.text-image-section {
    padding-top: 120px;
}

/* 2. Standard-Aussehen für normale Text-Links (im Text und in Listen) */
#kcm p a, 
#kcm li a {
    color: #7CBAEE; /* Helles Blau */
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s ease;
}

#kcm p a:hover, 
#kcm li a:hover {
    color: #ffffff; /* Wird beim Drüberfahren weiß */
    text-decoration: underline;
}

/* 3. OPT-IN: Button-Optik NUR für class="link_button", .mehr_lesen und .btn */
#kcm a.link_button, 
#kcm .mehr_lesen,
.btn {
    display: inline-block;
    background-color: #7CBAEE;
    color: #1A3557 !important; /* Dunkelblaue Schrift */
    padding: 8px 18px;
    margin: 5px 2px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: bold !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

#kcm a.link_button:hover, 
#kcm .mehr_lesen:hover,
.btn:hover {
    background-color: #feed00; /* Billard-Gelb */
    color: #1A3557 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}


/* ========================================================================= */
/* SPONSOREN & PARTNER BEREICH - HARMONISCHES 7-LOGOS-LAYOUT (4-3) */
/* ========================================================================= */

.sponsoren-bereich {
    margin: 30px auto;
    padding: 22px 18px;
    max-width: 820px;
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sponsoren-bereich h3 {
    color: #1A3557;
    margin-bottom: 18px;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sponsoren-grid {
    display: flex;
    flex-wrap: nowrap;          /* alle Logos in einer Reihe nebeneinander */
    justify-content: center;
    align-items: center;
    gap: 26px;
}

.sponsor-logo {
    flex: 1 1 0;                /* gleicher Anteil, schrumpft bei Bedarf */
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
}

.sponsor-logo img {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.sponsor-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Auf Handys: Logos sofort farbig und als 2x2-Raster (zwei pro Reihe) */
@media (max-width: 600px) {
    .sponsoren-grid { flex-wrap: wrap; gap: 16px; }
    .sponsor-logo { flex: 0 1 40%; padding: 4px; }
    .sponsor-logo img {
        max-height: 44px;
        filter: grayscale(0%);
        opacity: 1;
    }
}

/* ========================================================================= */
/* PREIS-BOXEN (MITGLIEDSCHAFT) - NAHTLOSE 3-STREIFEN-BOX */
/* ========================================================================= */

.membership-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
    align-items: stretch; /* Garantiert, dass alle Boxen pro Reihe exakt gleich hoch sind */
}

.membership-card {
    /* WICHTIG: Kein Padding mehr! Das verhindert Lücken zwischen den Streifen */
    padding: 0 !important;
    margin: 0;

    border: 1px solid rgba(26, 53, 87, 0.15);
    border-top: 6px solid #1A3557;
    border-radius: 12px;
    width: calc(25% - 20px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

    /* Layout für lückenlose Streifen */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Schneidet die Farbstreifen passend zu den runden Ecken ab */

    background-color: transparent; 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.membership-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(26, 53, 87, 0.25);
}

/* 1. STREIFEN: TITEL (Mit gelber Schrift) */
#kcm .membership-card h3 {
    margin: 0 !important; 
    padding: 20px 10px !important; 
    background: rgba(228, 240, 254, 0.4) !important;
    color: #feed00 !important; /* Hier ist das Kliebiweb-Gelb wieder da! */
    font-size: 1.3em !important; 
    font-weight: bold !important;
    min-height: 95px !important; 
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.3;
    border-bottom: none !important;
}

#kcm .membership-card h3 small {
    font-size: 0.75em !important;
    color: #1A3557 !important; /* Bleibt dunkelblau, damit es auf dem Schildchen lesbar ist */
    font-weight: bold !important;
    margin-top: 5px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Hover-Effekt für den Titel */
#kcm .membership-card:hover h3 { 
    background: rgba(228, 240, 254, 0.65) !important; 
}

/* 2. STREIFEN: PREIS */
.membership-card .price {
    margin: 0;
    padding: 15px 10px;
    background: rgba(197, 219, 246, 0.4);
    font-size: 2.1em;
    font-weight: 800;
    color: #ffffff; /* Weiß für besseren Kontrast / Barrierefreiheit */
    transition: background 0.3s ease;
}

.membership-card .price small {
    font-size: 0.5em;
    color: #ffffff; /* Weiß für besseren Kontrast / Barrierefreiheit */
    font-weight: bold;
}

/* 3. STREIFEN: BESCHREIBUNG */
.membership-card .description {
    margin: 0;
    padding: 20px 10px;
    background: rgba(172, 202, 238, 0.4);
    flex-grow: 1; /* Der Beschreibungsstreifen füllt den restlichen Platz bis ganz nach unten aus */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.3s ease;
}

.membership-card .description p {
    margin: 6px 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: #1C2D42;
}

.membership-card .description p strong {
    color: #0A1A2F;
}

/* HOVER EFFEKTE FÜR DIE STREIFEN */
.membership-card:hover h3 { background: rgba(228, 240, 254, 0.65); }
.membership-card:hover .price { background: rgba(197, 219, 246, 0.65); }
.membership-card:hover .description { background: rgba(172, 202, 238, 0.65); }

/* Unteres Drittel (Beschreibungs-Streifen) entfernt: Box endet am Preis.
   Der Preis-Streifen füllt die restliche Höhe, damit keine leere Fläche entsteht. */
.membership-card .description { display: none !important; }
.membership-card .price {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive Anpassungen */
@media (max-width: 1200px) { .membership-card { width: calc(33.333% - 20px); } }
@media (max-width: 900px) { .membership-card { width: calc(50% - 20px); } }
@media (max-width: 600px) { .membership-card { width: 100%; } }


/* ========================================================================= */
/* GOOGLE MAPS RESPONSIVE CONTAINER (Kugelsicher & Mobil-optimiert) */
/* ========================================================================= */
#kcm .maps-container {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 16:9 Format */
    height: 0 !important;
    overflow: hidden !important;
    
    /* Die entscheidenden Zeilen für das Handy: */
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important; /* Verhindert, dass Ränder die Box breiter als 100% machen */
    margin: 20px 0 !important; /* Löscht alle seitlichen Abstände, die das CMS vielleicht erzwingt */
    display: block !important;
    
    border-radius: 10px;
    border: 1px solid rgba(26, 53, 87, 0.15);
    border-top: 5px solid #1A3557;
}

#kcm .maps-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    box-sizing: border-box !important;
}
/* ============================================================ */
/* Sticky-Footer (global): Footer sitzt immer am unteren Rand,  */
/* auch bei wenig Inhalt. Die feste Navigation (position:fixed) */
/* bleibt davon unberuehrt.                                     */
/* ============================================================ */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.footer {
    margin-top: auto;
}