/* ========================================= NAVBAR ========================================= */
.uk-navbar-nav>li>a::before {
	bottom: 30px;
}

.uk-navbar-primary .uk-navbar-nav > li > a {
	font-size: 23px;
}

.uk-logo {
	background-color: black;
	padding-left: 20px;
	padding-right: 20px;
}

/* ========================================= ÜBERSCHRIFT ========================================= */

.rk-headline {
	font-size: 85px;
}
 
 /* ========================================= CARDS ========================================= */
 
.uk-card-default {
	border:none;
	border-radius:0px;
}

.uk-card-primary {
	border:none;
	border-radius:0px;
}

.uk-card-secondary {
	border:none;
	border-radius:0px;
}

 /* ========================================= SVGS ========================================= */

 /* ========================================= MARK ========================================= */
 
.rk-mark {
	/* 1. TEXT-STYLING */
    color: #EC6608;            /* Dunkleres Braun/Bronze für den Text */
    font-family: sans-serif;  /* Passe die Schriftart an, falls nötig */
    font-weight: 600;        /* Text fett machen */
    text-transform: uppercase;/* Alles in Großbuchstaben umwandeln */
    font-size: 14px;          /* Angemessene Größe für den Button */
    letter-spacing: 0.5px;    /* Optional: Minimaler Abstand zwischen Buchstaben */
    text-align: center;
    text-decoration: none;    /* Falls es ein Link ist, Unterstreichung entfernen */

    /* 2. HINTERGRUND & FORM */
    background-color: #FFF5F0; /* Heller, pfirsichfarbener Hintergrund mit 30% Deckkraft (leicht transparent) */
    border-radius: 2px;       /* Leicht abgerundete Ecken */
    
    /* 3. ABSTÄNDE & DISPLAY */
   
	display:inline-block;
    padding-top: 10px;        /* Innenabstand Oben */
    padding-bottom: 10px;     /* Innenabstand Unten */
    padding-left: 20px;       /* Innenabstand Links */
    padding-right: 20px;      /* Innenabstand Rechts */
    
    /* 4. OPTIONAL: HOVER-EFFEKT */
    transition: background-color 0.3s ease; /* Weicher Übergang beim Drüberfahren */
}

.rk-mark2 {
	/* 1. TEXT-STYLING */
    color: #EC6608;            /* Dunkleres Braun/Bronze für den Text */
    font-family: sans-serif;  /* Passe die Schriftart an, falls nötig */
    font-weight: 600;        /* Text fett machen */
    text-transform: uppercase;/* Alles in Großbuchstaben umwandeln */
    font-size: 14px;          /* Angemessene Größe für den Button */
    letter-spacing: 0.5px;    /* Optional: Minimaler Abstand zwischen Buchstaben */
    text-align: center;
    text-decoration: none;    /* Falls es ein Link ist, Unterstreichung entfernen */

    /* 2. HINTERGRUND & FORM */
    background-color: #FFF5F0; /* Heller, pfirsichfarbener Hintergrund mit 30% Deckkraft (leicht transparent) */
    border-radius: 2px;       /* Leicht abgerundete Ecken */
    
    /* 3. ABSTÄNDE & DISPLAY */
   
	display:block;
	margin-left:auto;
	margin-right:auto;
	width: fit-content;
    padding-top: 10px;        /* Innenabstand Oben */
    padding-bottom: 10px;     /* Innenabstand Unten */
    padding-left: 20px;       /* Innenabstand Links */
    padding-right: 20px;      /* Innenabstand Rechts */
    
    /* 4. OPTIONAL: HOVER-EFFEKT */
    transition: background-color 0.3s ease; /* Weicher Übergang beim Drüberfahren */
}

 /* ========================================= ACCORDION ========================================= */

.uk-accordion-default .uk-accordion-content {
	color: white;
}

/* Den Titel weiß färben, wenn das Item geöffnet ist */
.uk-open .uk-accordion-title {
    color: #ffffff !important;
}

/* Optional: Falls auch das Plus-Icon/Minus-Icon weiß werden soll */
.uk-open .uk-accordion-title::after {
    color: #ffffff !important;
}

 /* ========================================= FLIP CARD ========================================= */
 
 /* 1. Der äußere Container (Wichtig für die Perspektive) */
.flip-card-container {
  background-color: transparent;
  width: 100%;
  height: 400px; /* Stelle hier die gewünschte Höhe der Karte ein */
  perspective: 1000px; /* Erzeugt den 3D-Effekt der Drehung */
  margin-bottom: 20px;
}

/* 2. Die eigentliche Karte (Die sich dreht) */
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s; /* Geschwindigkeit der Drehung */
  transform-style: preserve-3d; /* Wichtig für den 3D-Effekt */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-radius: 2px;
}

/* 3. Der Hover-Effekt (Die Drehung) */
.flip-card-container:hover .flip-card {
  transform: rotateY(180deg); /* Dreht die Karte um 180 Grad um die Y-Achse */
}

/* 4. Gemeinsame Eigenschaften für Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Versteckt die Rückseite, wenn sie hinten ist */
  backface-visibility: hidden;
  border-radius: 2px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Zentriert den Inhalt vertikal */
  align-items: center; /* Zentriert den Inhalt horizontal */
  box-sizing: border-box;
}

/* 5. Styling der Vorderseite */
.flip-card-front {
  background-color: #EC6608; /* Weißer Hintergrund */
  color: white;
  border: 2px solid #EC6608;
}

.flip-card-front h2 {
  color: white; /* Dein Orange-Ton für den Titel */
  margin-bottom: 15px;
}

.flip-card-front .hint {
  font-size: 0.8rem;
  color: white;
  position: absolute;
  bottom: 20px;
}

/* 6. Styling der Rückseite */
.flip-card-back {
  background-color: white; /* Dein Orange-Ton für den Hintergrund */
  color: black;
  transform: rotateY(180deg); /* Startet bereits gedreht, damit sie nach der Drehung sichtbar ist */
}

.flip-card-back h3 {
  color: #ffffff;
  margin-bottom: 15px;
}

.flip-card-back ul {
  text-align: left;
  margin-bottom: 20px;
}

.flip-card-back .uk-button {
  margin-top: auto; /* Schiebt den Button nach unten */
}

 /* ========================================= MOBILE TOOLBAR ========================================= */



.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: black !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: white !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: white !important; /* X schwarz machen, damit es auf Gelb sichtbar ist */
    top: 20px !important;
    right: 15px !important;
}

 /* ========================================= MEDIA QUEREIES ========================================= */
@media (max-width: 1297px) {
		.uk-navbar-primary .uk-navbar-nav > li > a {
			padding-right: 5px;
		}
}

@media (max-width: 1252px) {
		.uk-navbar-primary .uk-navbar-nav > li > a {
			padding-right: 0px;
		}
}

@media (max-width: 1228px) {
		.uk-navbar-primary .uk-navbar-nav > li > a {
			font-size: 20px;
			padding-left: 0px;
			gap: 20px;
		}
}

@media (max-width: 1110px) {
	    .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;}
}

@media (max-width: 960px) {
   .cc-revoke.cc-left {
left: auto !important;
    bottom: 50px !important;
} 
}

@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 */
}