.rk-top {
    position: fixed;
    bottom: 50px;
    right: 40px;
    z-index: 1
}

/*============================================================================== NAVBAR ==============================================================================*/ 

.uk-navbar-primary {
	padding-top:10px;
	padding-bottom:10px;
}

.uk-navbar-primary a:not(.uk-logo) {
  text-decoration: none;
  color: white !important;
  /* Padding links/rechts lassen wir, oben/unten reduzieren wir oder nutzen die Navbar-Höhe */
  /* display: flex sorgt dafür, dass wir den Text im Link wieder zentrieren können */
  display: flex;
  align-items: center; /* Zentriert den Text vertikal */
  justify-content: center; /* Zentriert den Text horizontal */
  
  /* Die Höhe sollte der Höhe deiner Navbar entsprechen */
  height: 80px; /* Teste hier mal 80px oder 100%, je nach deiner Navbar-Höhe */
  
  position: relative;
  z-index: 1;
}

/* 2. Die Outline (das ::before Element) */
.uk-navbar-primary a:not(.uk-logo)::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0px;
  right:0px;
  background-color: transparent; 
  border: 2px solid #FFD600;
  box-sizing: border-box;
  
  /* WICHTIG: z-index muss kleiner sein als beim Link-Text */
  z-index: -1; 
  
  opacity: 0;
  transform: translateY(10px) rotateX(-90deg); 
  transition: all 0.4s ease;
  border-radius: 500px;
}

/* 3. Hover & Active Zustände */
.uk-navbar-primary a:not(.uk-logo):hover::before,
.uk-navbar-primary li.uk-active > a:not(.uk-logo)::before {
  opacity: 1 !important;
  transform: translateY(0) rotateX(0) !important;
}

/* Falls UIkit die Textfarbe bei Hover/Active automatisch ändert (z.B. auf Schwarz) */
.uk-navbar-primary a:not(.uk-logo):hover,
.uk-navbar-primary li.uk-active > a:not(.uk-logo) {
  color: white !important; 
}

/*============================================================================== NAVBAR BUTTON JETZT BUCHEN ==============================================================================*/ 

/* Wähle das letzte Listen-Element und dort den Link aus */
/* 1. Den Link-Text zwingen, vorne und mittig zu bleiben */
.uk-navbar-nav li:last-child a:not(.uk-logo) {
  color: #000 !important; /* Schwarzer Text für Lesbarkeit */
  position: relative;
  z-index: 2;             /* Höher als der Kasten (::before) */
  display: flex;          /* Zentrierung wieder herstellen */
  align-items: center;
  justify-content: center;
  height: 100%;           /* Oder deine Navbar-Höhe, z.B. 80px */
  transition: all 0.3s ease;
}

/* 2. Der ausgefüllte Kasten im Hintergrund */
.uk-navbar-nav li:last-child a:not(.uk-logo)::before {
  content: "";
  position: absolute; 
  background-color: #FFD600;
  opacity: 1;
  transform: translateY(0) rotateX(0);
  z-index: -1;  /* ZWINGEND hinter den Text */
  border-radius: 500px;
  transition: all 0.3s ease;
}

/* 3. Der Hover-Effekt für den Button */
.uk-navbar-nav li:last-child a:not(.uk-logo):hover::before {
  background-color: transparent; /* Etwas dunkler */
  transform: scale(1.02);    /* Minimales Wachsen */
}

/* 4. Sicherstellen, dass der Text beim Hover nicht verschwindet */
.uk-navbar-nav li:last-child a:not(.uk-logo):hover {
  color: #FFD600 !important; 
}

/*============================================================================== SOCIAL BAR ==============================================================================*/ 

/* Der erste Button bleibt bei 340px */
#sidebar .uk-grid > div:nth-child(1) .uk-card-default {
    bottom: 400px;
}

/* Der zweite Button wird um die Höhe des ersten (50px) + Abstand (10px) nach unten verschoben */
#sidebar .uk-grid > div:nth-child(2) .uk-card-default {
    bottom: 330px; /* 340px - 50px Höhe - 10px Gap */
}

/* 1. DEN CONTAINER FIXIEREN (Das verhindert das Springen des Buttons) */
#sidebar .uk-card-default {
    position: fixed !important;
    right: 0 !important;
    bottom: 340px;
    width: 350px; /* Gib dem Button eine feste Breite! */
    height: 60px; /* Gib dem Button eine feste Höhe! */
    display: flex !important;
    align-items: center;
    padding: 0 15px !important;
    background-color: #020B24 !important;
    border: 2px solid #FFD600;
	border-radius:500px;
    z-index: 9999;
    /* Verstecke alles, was aus dem Button ragt während des Ladens */
    overflow: hidden; 
    /* Startposition: Fast ganz rechts aus dem Bild */
    transform: translateX(280px); 
    /* NUR Transform animieren! */
    transition: transform 0.4s ease-in-out, background-color 0.3s;
}

/* 2. DAS ICON SOFORT BÄNDIGEN */
/* Wir sprechen ALLES an, was ein SVG ist oder werden könnte */
#sidebar .uk-card-default svg,
#sidebar .uk-card-default [uk-icon],
#sidebar .uk-card-default .uk-icon {
	fill: #FFD600 !important;   /* Farbe für Flächen */
    stroke: #FFD600 !important; /* Farbe für Linien */
    color: #FFD600 !important;  /* Fallback für manche Schrift-Icons */
	margin-top: 8px;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important; /* Verhindert das Zusammenquetschen */
    max-width: 40px !important; /* Verhindert das Explodieren */
    flex: 0 0 40px !important; /* Fixiert die Größe in Flex-Layouts */
}

/* 3. HOVER */
#sidebar .uk-card-default:hover {
    transform: translateX(0) !important;
    background-color: #FFD600 !important;
    overflow: visible; /* Text beim Hover zeigen */
}

/* Ändert das Icon, wenn man über die Karte (Button) hovert */
#sidebar .uk-card-default:hover svg,
#sidebar .uk-card-default:hover [uk-icon] svg,
#sidebar .uk-card-default:hover .uk-icon svg {
    fill: #020B24 !important;   /* Farbe für Flächen */
    stroke: #FFD600 !important; /* Farbe für Linien */
    color: #FFD600 !important;  /* Fallback für manche Schrift-Icons */
}

/* Falls das Icon aus mehreren Pfaden besteht, erzwinge die Farbe für alle */
#sidebar .uk-card-default:hover svg * {
    fill: inherit !important;
    stroke: inherit !important;
}

/* 4. TEXT-ABSTAND */
#sidebar .uk-card-default .el-title, 
#sidebar .uk-card-default span:not([uk-icon]) {
    margin-left: 0px !important;
    white-space: nowrap;
}

/* Versuche, alle Pfade direkt anzusprechen */
svg path,  
svg rect, 
svg {
    fill: #FFD600 !important;  /* Für Flächen */
    stroke: #020B24 !important; /* Für Umrandungen/Linien */
}




.uk-button-primary, .btn-primary {
    background-color: transparent;
    border: 2px solid #FFD600
}

.uk-button-primary, .btn-primary:hover {
    background-color: #FFD600;
    color: #020B24;
}


#userForm h2 {
    color: #FFD600;
}

/* Bento-Box für Taxi-Service */
#userForm {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #FFD600; /* Die orangefarbene "Linie" als Akzent links */    
    border-right: 4px solid #FFD600; 
    backdrop-filter: blur(15px);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
}

.rsfp_thankyou_popup_inner {
	color:black;
}
/*============================================================================== MOBILE MENÜ ==============================================================================*/ 

.uk-offcanvas-bar .toolbar-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; /* Zwingt die Box, sich bis zum rechten Rand zu dehnen */
    width: 100% !important;
    background-color: #FFCC00 !important;
    
    /* Padding oben etwas mehr, damit der Text mittig neben dem X wirkt */
    padding: 20px 20px 20px 20px !important; 
    
    box-sizing: border-box !important;
    color: #000 !important;
    font-weight: bold;
    text-align: left; /* Text linksbündig, falls gewünscht */
    z-index: 100;
}

/* Schiebt den gesamten Inhalt des Menüs nach unten, 
   damit 'Home' unter der Toolbar erscheint */
.uk-offcanvas-bar {
    padding-top: 80px !important; /* Erhöhe diesen Wert, falls 'Home' noch leicht verdeckt ist */
}

/* Falls das 'Home' immer noch ein Stück zu hoch klebt, 
   können wir die Liste direkt ansprechen: */
.uk-offcanvas-bar > ul.uk-nav {
    margin-top: 20px !important;
}

/* Das Schließen-Icon (X) über die gelbe Box holen, damit man es noch sieht */
.uk-offcanvas-close {
    z-index: 110 !important;
    color: #000 !important; /* X schwarz machen, damit es auf Gelb sichtbar ist */
    top: 20px !important;
    right: 15px !important;
}
/*============================================================================== FOOTERBAR ==============================================================================*/ 

#footerbar {
	display:none;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-top: 5px;
    padding-bottom: -10px;
	left:0px;
    z-index: 999;
    background-color: #FFD600;
}


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

@media (max-width: 1308px) {
	.uk-navbar-nav {gap: 0px;}
}

@media (max-width: 1552px) {
	.uk-child-width-1-5\@m>* {
		width: 33%;
	}
}

@media (max-width: 1210px) and (min-width: 1026px) {
    #taxi {
        display: none;
    }
}

@media (max-width: 1163px) {
	.uk-navbar-nav {margin-left: -50px;}
}

@media (max-width: 1115px) {
	.uk-navbar-nav {gap: 0px;}
}

@media (max-width: 1067px) {
	.uk-logo {width: 75%}
}

@media (max-width: 1025px) {
	#footerbar {display:block;}
	    .tm-header .uk-navbar-right,
    .tm-header .uk-navbar-center,
    .tm-header .uk-navbar-left  {
        display: none !important;
    }
	 .tm-header-mobile {
	 display: block !important;} 
	 .tm-toolbar {display:none;}
	 .uk-logo {width: 100%}
	 #sidebar {display:none}
	 .uk-navbar-sticky  {
		 display:none;
	 }
	 .rk-headline2 {
		 margin-top: -50px;
		 font-size: 70px;
	 }
	 .rk-text {
		font-size: 20px;
	}
	 .rk-top {
    position: fixed;
    bottom: 110px;
    right: 20px;
    z-index: 1
}
    .uk-list {
		column-count:2;
	}
}

@media (max-width: 989px) {
	.uk-child-width-1-5\@m>* {
		width: 50%;
	}
}

@media (max-width: 960px) {
	.rk-bild {
		width: 300px;
	}
	.rk-bild2 {
		text-align: right;
	}
	.uk-child-width-1-5\@m>* {
		width:100%;
	}
}

@media (max-width: 640px) {
   /* Das seitliche Menü (Offcanvas) breiter machen */
.uk-offcanvas-bar {
    width: 350px !important; /* Standard ist oft 270px, wir erhöhen auf 350px */
}

/* Die gelbe Box oben zwingen, den Text nicht umzubrechen */
.toolbar-top {
    white-space: nowrap !important; /* Verhindert das Umbrechen von "Ab-lauf" */
    display: flex !important;
    gap: 15px !important; /* Abstand zwischen den Elementen */
    align-items: center !important;
}

/* Falls das X (Schließen-Button) im Weg ist, geben wir rechts etwas Padding */
.uk-offcanvas-bar {
    padding-top: 80px !important; /* Schiebt den Inhalt unter das X, falls nötig */
}
}

@media (max-width: 398px) {
	.rk-headline2 {
		font-size: 40px;
	}
	.rk-text {
		font-size: 18px;
	}
}

@media (max-width: 450px) {
	.rk-headline2 {
		margin-top: -90px;
		font-size: 40px;
	}
	.rk-text {
		font-size: 18px;
	}
	.rk-button-groß {
		height: 50%; 
	}
	.rk-slide {
		margin-top:-60px;
	}
}

@media (max-width: 400px) {
	.rk-headline3 {
		font-size: 45px;
	}
}

@media (max-width: 360px) {
	.uk-button-large {
		font-size: 16px !important;
		padding: 5px 39px;
	}
}