.aligned-bottom {margin-top: auto;}
.logo {height: 140px;}
.logo > img{max-height:140px;}
body { background-image: url("../images/Muster_auschnitte.svg"); }
.hero.is-primary{background-color: hsl(201,100%,37%); }
.hero.is-secondary {background-color: rgba(148,193,28,0.8)}
.has-secondary-background {background-color: rgba(148,193,28,1)}
.is-secondary-text {color: rgba(148,193,28,1)}
.has-secondary-border {border:1px solid rgba(148,193,28,1);}
.has-primary-border {border:1px solid hsl(201,100%,37%);}
.has-text-primary {color: hsl(201,100%,37%)!important;}
.has-primary-background, .button.is-primary {background-color: hsl(201,100%,37%)!important;}
.is-underlined {text-decoration:underline;}
.has-spacing {letter-spacing:0.08rem;}
.has-margin-left {margin-left:0.5rem;}
.has-margin-top {margin-top:0.1rem;}
.card-footer-item.has-less-padding{padding:0.4rem;}
.is-info-card {padding:1.0rem; margin-bottom:0px!important;}
.card-footer-item a {width: 100%;height: 100%;justify-content: center;display: flex;}
span.is-fab-container {    padding: 0.3rem 3.0rem;}
@media screen and (min-width:600px) {
    .is-mobile.is-fab-container{display:block;}
    .is-fab-container .column {width:auto;padding-left:0.75rem;}
    .is-fab-container {margin:0.3rem 0px;}
    }
.hero-image img {height:2.6rem; width:auto;!important}
.card-person{height:100%; max-width:500px;}
.is-big{width:1000px;flex:none;}
.is-padded{padding:5px;}

/* Optimierte Collapsible-Animationen - Langsamer und stabiler */
.collapsible, .tile.collapsible {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-20px);
}

.collapsible.is-active {
    display: inherit;
    opacity: 1;
    max-height: 3000px;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth Tile Transitions */
.tile, .is-child, img, figure { 
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card Image Transitions - Korrigiert für alle Schwerpunkte */
.card-image > figure {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
}

.card-image > figure.is-16by9 {
    padding-top: 56.25% !important;
    margin-bottom: 0 !important;
}

.card-image > figure.is-3by1.cropped {
    padding-top: 33.33% !important;
    margin-bottom: 0 !important;
}

.cropped {
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cropped img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fix für Bilder ohne cropped Klasse */
.card-image > figure:not(.cropped) img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}

/* Spezifische Fixes für Schwerpunkt 1 und 6 */
#schwerpunkt1 .card-image > figure.cropped img,
#schwerpunkt6 .card-image > figure.cropped img {
    object-position: center top !important;
}

#schwerpunkt1 .card-image > figure:not(.cropped) img,
#schwerpunkt6 .card-image > figure:not(.cropped) img {
    object-position: center center !important;
}

/* Chiffre Animation - Korrigiert für Bulma 1.0.2 */
.chiffre {
    position: relative;
    overflow: hidden;
    animation: revealChiffreText 3s ease-out forwards;
    animation-delay: 1s;
}

.chiffre::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: decryptChiffreText 2s ease-out forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

.chiffre::after {
    content: attr(data-decoded);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: showDecodedText 0.5s ease-out forwards;
    animation-delay: 2.5s;
    z-index: 2;
    background-color: inherit;
    color: inherit;
}

@keyframes decryptChiffreText {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes revealChiffreText {
    0% {
        color: inherit;
    }
    40% {
        color: transparent;
    }
    90% {
        color: transparent;
    }
    100% {
        color: transparent;
    }
}

@keyframes showDecodedText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Navbar Desktop-Ansicht - Vertikale Ausrichtung korrigiert */
@media screen and (min-width: 1024px) {
    .navbar {
        min-height: 3.25rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .navbar-brand {
        align-items: center !important;
        display: flex !important;
        min-height: 3.25rem !important;
    }
    
    .navbar-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
        align-items: center !important;
        min-height: 3.25rem !important;
        margin: 0 !important;
        top: 0 !important;
        transform: translateY(0) !important;
    }
    
    .navbar-start {
        display: flex !important;
        align-items: center !important;
        min-height: 3.25rem !important;
    }
    
    .navbar-item {
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 3.25rem !important;
        vertical-align: middle !important;
        margin: 0 !important;
        top: 0 !important;
    }
    
    .navbar-item.has-dropdown {
        min-height: 3.25rem !important;
        align-items: center !important;
    }
    
    .navbar-link {
        min-height: 3.25rem !important;
        align-items: center !important;
        display: flex !important;
        margin: 0 !important;
        top: 0 !important;
    }
}

/* Navbar Sichtbarkeit - Komplette Korrektur für Bulma */
.navbar.is-dark .navbar-item {
    color: #ffffff !important;
}

.navbar.is-dark .navbar-item:hover,
.navbar.is-dark .navbar-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.navbar.is-dark .navbar-link {
    color: #ffffff !important;
}

.navbar.is-dark .navbar-link:hover,
.navbar.is-dark .navbar-link:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Dropdown-Menü Sichtbarkeit */
.navbar.is-dark .navbar-dropdown {
    background-color: #363636 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar.is-dark .navbar-dropdown .navbar-item {
    color: #ffffff !important;
    background-color: transparent !important;
}

.navbar.is-dark .navbar-dropdown .navbar-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Mobile Navbar Menu */
.navbar.is-dark .navbar-menu {
    background-color: #363636 !important;
}

/* Burger Menu */
.navbar.is-dark .navbar-burger span {
    background-color: #ffffff !important;
}

/* Z-Index für Dropdown */
.navbar-dropdown {
    z-index: 1000 !important;
}

/* Dropdown Hover-Aktivierung */
.navbar-item.has-dropdown:hover .navbar-dropdown {
    display: block !important;
}

/* Expand Button - FontAwesome square Icons */
.expand-link {
    height: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: white !important;
    font-weight: 500;
    font-family: inherit;
    font-size: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
}

/* FontAwesome Icon - square-plus/square-xmark - Korrigiert für FA 7.0 */
.expand-icon {
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard: square-plus Icon */
.expand-icon::before {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    content: "\f0fe"; /* fa-square-plus */
    display: inline-block;
}

/* Expanded: square-xmark Icon */
.expand-icon.rotated::before {
    content: "\f2d3"; /* fa-square-xmark */
}

/* Text-Styling */
.expand-text {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Navbar Animation */
.navbar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.is-fixed-top {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Burger Menu Animation */
.navbar-burger {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-burger.is-active {
    transform: rotate(90deg);
}

.navbar-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-10px);
    opacity: 0;
}

.navbar-menu.is-active {
    transform: translateY(0);
    opacity: 1;
}

/* Optimierte Hover-Effekte */
.button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card {
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.card-footer {
    margin-top: auto;
}

.is-row-reverse {flex-direction:row-reverse;}

/* Bulma 1.0.2 Column-System für Schwerpunkt-Karten mit langsamerer Animation */
.columns.is-multiline {
    margin: -0.75rem !important;
}

.columns.is-multiline .column {
    padding: 0.75rem !important;
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card Höhen-Konsistenz für bessere Alignment */
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-content {
    flex-grow: 1;
}

.card-footer {
    margin-top: auto;
}

/* Column-Expansion Animation - Mit Zeilenumbruch-Erzwingung */
.column.collapsible-parent {
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.column.collapsible-parent.expanded {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 999 !important;
}

/* Alle nicht-expandierten Columns kleiner machen wenn eine expandiert ist */
.columns.is-multiline:has(.column.expanded) .column:not(.expanded) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Fallback für Browser ohne :has() Support */
.columns.is-multiline.has-expanded .column:not(.expanded) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Responsive Anpassungen */
@media screen and (max-width: 1023px) {
    .column.collapsible-parent.expanded {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .columns.is-multiline:has(.column.expanded) .column:not(.expanded),
    .columns.is-multiline.has-expanded .column:not(.expanded) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media screen and (max-width: 768px) {
    .columns.is-multiline:has(.column.expanded) .column:not(.expanded),
    .columns.is-multiline.has-expanded .column:not(.expanded) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Collapsible Content in Column-Layout mit langsamerer Animation */
.collapsible-parent .collapsible {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-20px);
}

.collapsible-parent .collapsible.is-active {
    display: block;
    opacity: 1;
    max-height: 3000px;
    transform: translateY(0);
}

/* Card Image Transitions für Column-Layout - Langsamere Animation */
.column .card-image > figure {
    transition: all 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
}

.column .card-image > figure.is-16by9 {
    padding-top: 56.25% !important;
    margin-bottom: 0 !important;
}

.column .card-image > figure.is-3by1.cropped {
    padding-top: 33.33% !important;
    margin-bottom: 0 !important;
}

.column .card-image > figure img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.column-break {
    flex-basis: 100% !important;
    width: 0 !important;
    height: 0 !important;
}

/* Spezifische Fixes für Schwerpunkt 1 und 6 */
#schwerpunkt1 .card-image > figure.cropped img,
#schwerpunkt6 .card-image > figure.cropped img {
    object-position: center top !important;
}

.is-anchor {margin-top:90px;padding:8px;}
.card-anchor {padding-top:70px!important;}
:root{ $primary: hsl(201,100%,37%); }
#leaflet_map_big { height: 320px; z-index:0; }

/* Smooth Scrolling optimiert */
html {   
    scroll-behavior: smooth; 
    scroll-padding-top: 90px;
}

/* Intersection Observer für lazy loading Vorbereitung */
.lazy-load {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lazy-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Performance-optimierte Animationen */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Optimierung der transform-origin für bessere Performance */
.expand-icon {
    transform-origin: center;
}

/* Parallax-ähnlicher Effekt für Hero-Bilder */
.hero-image {
    transform: translateZ(0);
}

/* Fokus-Styles für Accessibility */
.expand-link:focus,
.button:focus {
    outline: 2px solid hsl(201,100%,37%);
    outline-offset: 2px;
}



/* =================
   DARK MODE FIXES
   ================= */

/* Dark Mode Detection und Container-Anpassungen */
@media (prefers-color-scheme: dark) {
    /* Container und Karten heller machen für besseren Kontrast */
    .card.has-background-light {
        background-color: #2a2a2a !important; /* Deutlich heller als Standard-Schwarz */
    }
    
    .box {
        background-color: #2a2a2a !important;
    }
    
    .tile.is-child.box.has-background-light {
        background-color: #2a2a2a !important;
    }
    
    /* Alternative: Primär- und Sekundärfarben im Dark Mode tauschen */
    /* Uncomment diese Regeln wenn Container-Aufhellung nicht genug ist: */
    /*
    .has-text-primary,
    .is-secondary-text {
        color: rgba(148,193,28,1) !important; 
    }
    
    .has-primary-background,
    .button.is-primary,
    .hero.is-primary {
        background-color: rgba(148,193,28,1) !important;
    }
    
    .has-secondary-background,
    .hero.is-secondary {
        background-color: hsl(201,100%,37%) !important;
    }
    
    .has-primary-border {
        border: 1px solid rgba(148,193,28,1) !important;
    }
    
    .has-secondary-border {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    */
    
    /* Text-Kontrast in Dark Mode verbessern */
    .card-content,
    .content {
        color: #e0e0e0 !important;
    }
    
    /* Navbar Text im Dark Mode */
    .navbar.is-dark .navbar-item {
        color: #ffffff !important;
    }
}

/* =================
   MOBILE COLUMN FIXES
   ================= */

/* Bulma Mobile Column Fix - Margins und Paddings korrigieren */
@media screen and (max-width: 768px) {
    /* Container-Margins reduzieren */
    .columns.is-multiline {
        margin-left: -0.375rem !important;
        margin-right: -0.375rem !important;
        margin-top: -0.375rem !important;
    }
    
    .columns.is-multiline .column {
        padding: 0.375rem !important;
    }
    
    /* Mobile Column Fixes für Team-Bereich */
    .column.is-3-desktop.is-6-tablet.is-6-mobile {
        flex: none !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    
    /* Spezifische Fixes für verschiedene Column-Kombinationen */
    .column.is-4.is-6-tablet {
        flex: none !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    
    /* Container Spacing auf Mobile anpassen */
    .section {
        padding: 1.5rem !important;
    }
    
    /* Karten auf Mobile optimieren */
    .card {
        margin-bottom: 0.75rem;
    }
    
    /* Overflow verhindern */
    .columns.is-multiline {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
    }
}

/* Extra Small Mobile Devices */
@media screen and (max-width: 480px) {
    /* Bei sehr kleinen Bildschirmen alle Karten auf volle Breite */
    .column.is-6-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .columns.is-multiline {
        margin-left: -0.25rem !important;
        margin-right: -0.25rem !important;
    }
    
    .columns.is-multiline .column {
        padding: 0.25rem !important;
    }
}

/* =================
   ZUSÄTZLICHE OPTIMIERUNGEN
   ================= */

/* Bessere Touch-Targets für Mobile */
@media screen and (max-width: 768px) {
    .expand-link {
        padding: 1rem !important;
        min-height: 44px;
    }
    
    .card-footer-item {
        min-height: 44px;
    }
    
    .button {
        min-height: 44px;
    }
}

/* Verbesserte Lesbarkeit */
@media (prefers-color-scheme: dark) {
    .subtitle,
    .title {
        color: #f0f0f0 !important;
    }
    
    /* Links im Dark Mode besser sichtbar machen */
    a {
        color: #60a5fa !important;
    }
    
    a:hover {
        color: #93c5fd !important;
    }
    
}

/* =================
   ALTERNATIVE: KOMPLETTE CSS-JAVASCRIPT INTEGRATION
   ================= */

/* Falls du die CSS-Animation behalten möchtest, nutze diese Version: */

.chiffre {
    position: relative;
    overflow: hidden;
}

.chiffre.decoding {
    animation: revealChiffreText 3s ease-out forwards;
    animation-delay: 1s;
}

.chiffre.decoding::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: decryptChiffreText 2s ease-out forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

.chiffre.decoded {
    opacity: 1;
}

@keyframes decryptChiffreText {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes revealChiffreText {
    0% { opacity: 1; }
    40% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* =================
   DARK MODE BORDER SYSTEM
   ================= */

@media (prefers-color-scheme: dark) {
    
    /* STANDARD: Alle Container bekommen blauen (primary) Rahmen */
    .card,
    .box,
    .tile.is-child.box {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    
    /* SCHWERPUNKTE: Behalten ihren grünen (secondary) Rahmen */
    .card.has-secondary-border {
        border: 1px solid rgba(148,193,28,1) !important;
    }
    
    /* Spezifische Schwerpunkt-Karten (falls has-secondary-border fehlt) */
    #schwerpunkt1 .card,
    #schwerpunkt2 .card,
    #schwerpunkt3 .card,
    #schwerpunkt4 .card,
    #schwerpunkt5 .card,
    #schwerpunkt6 .card,
    #schwerpunkt7 .card,
    #schwerpunkt8 .card {
        border: 1px solid rgba(148,193,28,1) !important;
    }
    
    /* TEAM-BEREICH: Blaue Rahmen für Personen-Karten */
    .card-person {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    
    /* IMPRESSUM/DATENSCHUTZ: Blaue Rahmen für Infoboxen */
    .tile.is-child.box.has-background-light {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    
    /* NAVBAR: Dezenter Rahmen */
    .navbar.is-dark {
        border-bottom: 1px solid hsl(201,100%,37%) !important;
    }
    
    /* BUTTONS: Rahmen für bessere Sichtbarkeit */
    .button {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    
    .button.has-secondary-background {
        border: 1px solid rgba(148,193,28,1) !important;
    }
    
    .button.is-primary {
        border: 1px solid hsl(201,100%,37%) !important;
    }
    
    /* HERO-SECTIONS: Subtile Rahmen */
    .hero.is-primary {
        border-bottom: 2px solid rgba(148,193,28,0.3) !important;
    }
    
    .hero.is-secondary {
        border-bottom: 2px solid hsl(201,100%,37%) !important;
        border-bottom-color: rgba(0, 119, 187, 0.3) !important;
    }
    
    /* MOBILE: Dünnere Rahmen für bessere Optik */
    @media screen and (max-width: 768px) {
        .card,
        .box,
        .tile.is-child.box {
            border-width: 0.5px !important;
        }
    }
    
    /* HOVER-EFFEKTE: Rahmen werden heller */
    .card:hover {
        border-color: rgba(0, 119, 187, 0.8) !important;
        box-shadow: 0 4px 8px rgba(0, 119, 187, 0.2) !important;
    }
    
    .card.has-secondary-border:hover,
    #schwerpunkt1 .card:hover,
    #schwerpunkt2 .card:hover,
    #schwerpunkt3 .card:hover,
    #schwerpunkt4 .card:hover,
    #schwerpunkt5 .card:hover,
    #schwerpunkt6 .card:hover,
    #schwerpunkt7 .card:hover,
    #schwerpunkt8 .card:hover {
        border-color: rgba(148,193,28,0.8) !important;
        box-shadow: 0 4px 8px rgba(148,193,28,0.2) !important;
    }
    
    /* EXPANDED CARDS: Verstärkter Rahmen */
    .collapsible-parent.expanded .card {
        border-width: 2px !important;
    }
    
    /* OPTIONAL: Gradient-Rahmen für besonderen Effekt */
    /*
    .card::before {
        content: '';
        position: absolute;
        inset: 0;
        padding: 1px;
        background: linear-gradient(45deg, hsl(201,100%,37%), rgba(148,193,28,1));
        border-radius: inherit;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: xor;
        pointer-events: none;
    }
    */
}

/* =================
   LIGHT MODE: Rahmen entfernen oder dezent machen
   ================= */

@media (prefers-color-scheme: light) {
    /* Im Light Mode nur sehr dezente oder gar keine Rahmen */
    .card:not(.has-secondary-border) {
        border: 1px solid rgba(0,0,0,0.1) !important;
    }
    
    .box {
        border: 1px solid rgba(0,0,0,0.1) !important;
    }
}

/* =================
   MOBILE COLUMN FIXES - VERSTÄRKT
   ================= */

/* Problem: Die Standard Bulma-Margins überschreiben unsere Fixes */

/* LÖSUNG 1: Höhere Spezifität und !important */
@media screen and (max-width: 768px) {
    
    /* Container-Margins komplett neu definieren */
    .columns.is-multiline {
        margin: -0.25rem !important; /* Noch kleinere Margins */
    }
    
    .columns.is-multiline > .column {
        padding: 0.25rem !important;
    }
    
    /* Alle is-6-mobile Columns explizit fixieren */
    .column.is-6-mobile,
    .column.is-3-desktop.is-6-tablet.is-6-mobile,
    .column.is-4.is-6-tablet,
    .column.is-6-tablet.is-6-mobile {
        flex: none !important;
        width: calc(50% - 0.5rem) !important; /* Berücksichtigt Padding */
        max-width: calc(50% - 0.5rem) !important;
    }
    
    /* Fallback für alle möglichen Column-Kombinationen */
    .columns.is-multiline .column[class*="is-6-mobile"] {
        flex: none !important;
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    
    /* Container selbst optimieren */
    .section {
        padding: 1rem 0.75rem !important; /* Reduzierte Seitenränder */
    }
    
    /* Box-sizing sicherstellen */
    .columns.is-multiline .column {
        box-sizing: border-box !important;
    }
    
    /* Overflow komplett verhindern */
    .columns.is-multiline {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
}

/* LÖSUNG 2: Spezifische Selektoren für Team-Bereiche */
@media screen and (max-width: 768px) {
    
    /* Diabetes-/Ernährungsberatung Bereich */
    .column.is-3-desktop.is-6-tablet {
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        flex: none !important;
    }
    
    /* MFA Bereich */
    .column.is-4.is-6-tablet {
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        flex: none !important;
    }
    
    /* Termine Bereich */
    .column.is-6 {
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        flex: none !important;
    }
}

/* LÖSUNG 3: Flexbox-Reset für Mobile */
@media screen and (max-width: 768px) {
    
    .columns.is-multiline {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    
    /* Alle Columns als Flexbox-Items behandeln */
    .columns.is-multiline > .column {
        flex-basis: calc(50% - 0.5rem) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

/* Extra Small Mobile - Alle auf volle Breite */
@media screen and (max-width: 480px) {
    .columns.is-multiline > .column {
        flex-basis: calc(100% - 0.5rem) !important;
        width: calc(100% - 0.5rem) !important;
        max-width: calc(100% - 0.5rem) !important;
    }
    
    .columns.is-multiline {
        margin: -0.125rem !important;
    }
    
    .columns.is-multiline > .column {
        padding: 0.125rem !important;
    }
}

 /* Custom Styles für das Impfbanner */
        .vaccination-banner {
            background: linear-gradient(135deg, #3273dc 0%, #2366d1 100%);
            position: relative;
            overflow: hidden;
            margin-bottom: 0;
        }

        .vaccination-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="fade"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><circle cx="10" cy="10" r="2" fill="url(%23fade)"/><circle cx="30" cy="15" r="1.5" fill="url(%23fade)"/><circle cx="50" cy="8" r="2.5" fill="url(%23fade)"/><circle cx="70" cy="12" r="1.8" fill="url(%23fade)"/><circle cx="90" cy="6" r="2.2" fill="url(%23fade)"/></svg>') repeat;
            opacity: 0.3;
        }

        .banner-content {
            position: relative;
            z-index: 2;
        }

        .vaccination-title {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            font-weight: 700;
        }

        .vaccination-subtitle {
            opacity: 0.95;
            font-weight: 500;
        }

        .vaccine-tags {
            justify-content: center;
            margin-bottom: 1rem;
        }

        .vaccine-tag {

            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .vaccine-tag:hover {

            transform: translateY(-2px);
        }

        .vaccine-tag .icon {
            margin-right: 0.5rem;
        }

        .vial-container {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            justify-content: center;
        }

        .vial {
            width: 25px;
            height: 45px;
            background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 70%, #6c5ce7 100%);
            border-radius: 4px 4px 8px 8px;
            position: relative;
            animation: float 3s ease-in-out infinite;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .vial:nth-child(2) {
            animation-delay: -0.5s;
            height: 42px;
        }

        .vial:nth-child(3) {
            animation-delay: -1s;
            height: 48px;
        }

        .vial:nth-child(4) {
            animation-delay: -1.5s;
            height: 40px;
        }

        .vial::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 12px;
            background: #6c5ce7;
            border-radius: 2px 2px 0 0;
        }

        .vial::after {
            content: '';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 6px;
            background: #5a4fcf;
            border-radius: 2px 2px 0 0;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        .shield-icon {
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.9);
            animation: pulse 2s infinite;
            margin-left: 1rem;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.9; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }

        .cta-text {
            font-weight: 600;
        }

        .banner-close {
            transition: opacity 0.3s ease;
        }

        .banner-close:hover {
            opacity: 0.8;
        }

        /* Responsive Anpassungen */
        @media screen and (max-width: 768px) {
            .vaccination-title {
                font-size: 1.75rem !important;
            }
            
            .vaccination-subtitle {
                font-size: 1.1rem !important;
            }
            
            .vaccine-tags {
                flex-wrap: wrap;
            }
            
            .vaccine-tag {
                margin: 0.25rem;
                font-size: 0.85rem;
            }
            
            .shield-icon {
                font-size: 2rem;
                margin-left: 0.5rem;
            }
        }