:root {
            --sun-yellow: #fecb00;
            --hot-red: #e30613;
            --dark-grey: #333333;

            /* Gemeinsame Hoehe fuer Schriftzug + Vereinslogo im Header.
               Hier die Zahl aendern = beide Bilder bleiben zueinander passend.
               Basiswert = Handy, die Stufen darunter greifen ab Tablet/Desktop. */
            --logo-hoehe: 48px;
        }

        @media (min-width: 576px) {
            :root { --logo-hoehe: 56px; }
        }

        @media (min-width: 992px) {
            :root { --logo-hoehe: 64px; }
        }


        body {
            /* font-family: 'Open Sans', sans-serif; */
            /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; */
			font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
			font-weight: 400;
			letter-spacing: 0.04em;
            background-color: #f8f9fa;
            color: #333;
        }

        h1, h2, strong {
            font-weight: 700;
        }

        .header-top {
            background-color: white;
            padding: 12px 0;
            border-bottom: 5px solid var(--sun-yellow);
        }

        /* Schriftzug (breites Bild) und Vereinslogo (hochkant) haben sehr
           unterschiedliche Seitenverhaeltnisse. Beide werden deshalb ueber die
           HOEHE gesteuert, die Breite ergibt sich automatisch - so passen sie
           in jeder Fenstergroesse zueinander. */
        .logo-image {
            flex: 0 0 auto;
            margin: 0;
            line-height: 0;
        }

        .logo-image img {
            display: block;
            height: var(--logo-hoehe);
            width: auto;
        }

        .header-logo {
            flex: 0 0 auto;
            height: var(--logo-hoehe);
            width: auto;
        }

        /* Navigation */
        .navbar {
            background-color: var(--dark-grey) !important;
            padding: 0;
        }

        .nav-link {
            color: white !important;
            font-weight: bold;
            padding: 15px 20px !important;
            text-transform: uppercase;
            transition: 0.3s;
        }

        .nav-link:hover, .nav-link.active {
            background-color: var(--sun-yellow);
            color: var(--dark-grey) !important;
        }

        /* Hero Bereich */
        .hero-section {
            background-color: white;
            padding: 40px 0;
            text-align: center;
        }

        .main-banner {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
        }

        .highlight-box {
            background-color: #fff9c4;
            border: 2px dashed var(--sun-yellow);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        /* Content */
        .section-title {
            border-left: 5px solid var(--hot-red);
            padding-left: 15px;
            margin-bottom: 25px;
            color: var(--dark-grey);
        }

        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .btn-primary-custom {
            background-color: var(--hot-red);
            border: none;
            color: white;
            padding: 12px 30px;
            font-weight: bold;
            border-radius: 50px;
            transition: 0.3s;
        }

        .btn-primary-custom:hover {
            background-color: #b3050f;
            transform: scale(1.05);
        }

        /* Footer */
        footer {
            background-color: var(--dark-grey);
            color: white;
            padding: 30px 0;
            margin-top: 50px;
        }

        footer a {
            color: var(--sun-yellow);
            text-decoration: none;
        }
		.gallery-item {
        transition: transform 0.3s ease;
        overflow: hidden;
        border-radius: 8px;
    }

    .gallery-item:hover {
        transform: translateY(-5px);
    }

    .shadow-hover:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    /* Paginierung Styling */
    .page-link {
        color: var(--dark-grey);
    }
	
	.nav-tabs .nav-link.active {
    background-color: var(--sun-yellow) !important;
    color: var(--dark-grey) !important;
    border-color: var(--sun-yellow) !important;
}
.nav-tabs .nav-link {
    color: white;
    border: none;
    margin-right: 5px;
}

.bild-wrapper {
    position: relative;
    width: 100%; 
    max-width: 1500px;
    line-height: 0; 
}

.bild-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Vereinslogo als Overlay unten rechts im grossen Foto.
   Groesse UND Abstaende sind in Prozent des Fotos angegeben, dadurch sitzt es
   in jeder Fenstergroesse an derselben Stelle des Bildes.
   Die Skalierung erfolgt ueber transform (Mitte als Drehpunkt), damit das
   "Pumpen" die Position nicht verschiebt. */
.bild-wrapper .bild-logo {
    position: absolute;
    right: 3%;
    bottom: 4%;
    width: 14%;
    height: auto;
    pointer-events: none;
    transform-origin: center center;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
    animation: logo-pumpen 3s ease-in-out infinite;
}

/* auf kleinen Displays etwas groesser, sonst kaum zu erkennen */
@media (max-width: 575.98px) {
    .bild-wrapper .bild-logo {
        width: 20%;
    }
}

@keyframes logo-pumpen {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* Nutzer, die Animationen abgeschaltet haben, sehen das Logo ruhig */
@media (prefers-reduced-motion: reduce) {
    .bild-wrapper .bild-logo {
        animation: none;
    }
}

.TEXT_MINI{
	font-size:10px;
}

/* Emoji-Symbol neben Adressblöcken */
.kontakt-emoji {
    font-size: 2rem;
    line-height: 1;
    margin-right: 15px;
    flex: 0 0 auto;
}

/* ================================================================
   Anfahrtsskizze (SVG) - klassische Wegbeschreibung:
   gelbe Bundesstrasse mit Schild, rote Nebenstrassen,
   gruene Ortsflaechen, Bahnlinie, Blockpfeile.
   ================================================================ */
.karte-scroll {
    overflow-x: auto;
}

.karte {
    display: block;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin: 0 auto;
}

/* Auf dem Handy nicht zusammenquetschen, sondern schiebbar lassen */
@media (max-width: 575.98px) {
    .karte {
        min-width: 620px;
    }
}

.karte text {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-anchor: middle;
}

/* Ortsflaechen */
.karte .k-flaeche {
    fill: #d8e7cb;
}

/* Bundesstrasse: dunklerer Rand, hellere Fuellung darueber */
.karte .k-strasse-gelb-rand {
    fill: none;
    stroke: #d8a72c;
    stroke-width: 21;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.karte .k-strasse-gelb {
    fill: none;
    stroke: #fbd45c;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Nebenstrassen */
.karte .k-strasse-rot {
    fill: none;
    stroke: #e8563f;
    stroke-width: 7;
    stroke-linecap: round;
}

/* Bahnlinie */
.karte .k-bahn {
    fill: none;
    stroke: #8a8a8a;
    stroke-width: 3;
}

.karte .k-bahn-schwellen {
    fill: none;
    stroke: #8a8a8a;
    stroke-width: 12;
    stroke-dasharray: 2 15;
}

.karte .k-halt {
    fill: #ffffff;
    stroke: #6f6f6f;
    stroke-width: 3;
}

/* Ziel */
.karte .k-ziel-ring {
    fill: #ffffff;
    stroke: var(--hot-red);
    stroke-width: 5;
}

.karte .k-ziel-punkt {
    fill: var(--hot-red);
}

.karte .k-box {
    fill: #ffffff;
    stroke: #333333;
    stroke-width: 2;
}

/* Pfeile */
.karte .k-pfeil-schwarz {
    fill: #222222;
}

.karte .k-pfeil-grau {
    fill: #ececec;
    stroke: #9a9a9a;
    stroke-width: 2;
}

/* Strassenschild */
.karte .k-schild {
    fill: #fcd116;
    stroke: #1a1a1a;
    stroke-width: 2;
}

.karte .k-schild-text {
    fill: #1a1a1a;
    font-weight: 700;
    font-size: 17px;
}

/* Beschriftung */
.karte .k-ort {
    fill: #7a7a7a;
    font-weight: 700;
    font-size: 19px;
}

.karte .k-ort-gross {
    font-size: 24px;
    letter-spacing: 0.06em;
}

.karte .k-ort-klein {
    fill: #8a8a8a;
    font-weight: 700;
    font-size: 15px;
}

.karte .k-label {
    fill: #3a3a3a;
    font-size: 15px;
}

.karte text.k-label-links {
    text-anchor: end;
}

.karte .k-ziel-text {
    fill: var(--hot-red);
    font-weight: 700;
    font-size: 17px;
}

.karte text.k-hinweis {
    fill: #a5a5a5;
    font-size: 13px;
    text-anchor: end;
}
/* Vorteilsliste mit Haken statt Aufzaehlungspunkten */
.vorteile-liste li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
}

.vorteile-liste li::before {
    content: "\2713";           /* Haken */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hot-red);
    font-weight: 700;
}

/* Beitrags-Stern auf der Seite "Mitglied werden" */
.beitrag-stern {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 0 auto;
}

.beitrag-stern polygon {
    fill: var(--sun-yellow);
    stroke: var(--hot-red);
    stroke-width: 5;
}

.beitrag-stern text {
    text-anchor: middle;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    fill: var(--dark-grey);
}

.beitrag-stern .stern-klein {
    font-size: 26px;
    font-weight: 600;
}

.beitrag-stern .stern-preis {
    font-size: 58px;
    font-weight: 800;
    fill: var(--hot-red);
}

/* Kontaktliste mit Telefon, E-Mail, Instagram, Facebook.
   Die Symbole sind direkt als SVG im HTML eingebettet - kein Icon-Font,
   keine Nachladerei von fremden Servern. */
.kontakt-liste li + li {
    margin-top: 10px;
}

.kontakt-liste a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--dark-grey);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.kontakt-liste a:hover,
.kontakt-liste a:focus {
    color: var(--hot-red);
    text-decoration: underline;
}

.kontakt-liste svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    fill: var(--hot-red);
    transition: transform 0.2s;
}

.kontakt-liste a:hover svg {
    transform: scale(1.15);
}

.overlay-text {
    position: absolute;
    top: 20%;
    left: 8%;
    font-size: 3vw; 
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1% 2%;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.2;
}

@media (min-width: 1000px) {
    .overlay-text {
        font-size: 30px;
    }
}