:root {
	--bg-color: radial-gradient(1200px 700px at 10% -10%, rgba(124,195,255,.08), transparent 60%),
	radial-gradient(1000px 600px at 90% 10%, rgba(142,230,200,.07), transparent 60%), #f6f9fc;
	--text-color: #222;
	/* NAVBAR */
	--logo-color: linear-gradient(140deg, #471e89, #693dae, #471e89, #471e89);
	--logo-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
	--behind-navbar-background: linear-gradient(145deg, rgba(241, 241, 241, 1), rgba(235, 234, 235, 1));
	--navbar-background: rgba(277, 277, 277, 0.3);
	--nav-bar-link-hover: #4f94f6;
	--nav-bar-dropdown-link-hover: #4f94f6;
	--nav-bar-in-text-color: black;
	--nav-bar-dropdown-background: rgba(242, 241, 242, 0.95);
	--nav-bar-dropdown-background-hover: rgba(127, 116, 255, 0.1);
	--nav-bar-dropdown-text-color: black;
	--nav-bar-small-svg-color: #16479b;
	/* FREE-NAVBAR */
	--free-logo-color: url('../../sources/assets/source-a/image_large_06b34595-b302-440e-b603-d94a103b682e.jpeg');
	--free-logo-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	--free-navbar-background: rgba(277, 277, 277, 0.97);
	--free-nav-bar-link-hover: #095cf0;
	--free-nav-bar-dropdown-link-hover: #095cf0;
	--free-nav-bar-in-text-color: black;
	--free-nav-bar-dropdown-background: rgba(255, 255, 255, 0.95);
	--free-nav-bar-dropdown-background-hover: rgba(127, 116, 255, 0.1);
	--free-nav-bar-dropdown-text-color: black;
	--navbar-border-color: #eee4ff;
	/* BAR */
	--bar-time-block-color: black;
	--bar-button-text-color: #222;
	--bar-button-hover-color: rgba(196, 196, 244, 0.2);
	--search-placeholder-color: #222;
	--search-input-color: #222;
	--search-background-color: rgba(196, 196, 244, 0.2);
	/* Settings-Overlay */
	--settings-link-color: #4a90e2;
	--settings-link-color-hover: #0f3793;
}

[data-theme="dark"] {
	--bg-color: radial-gradient(1200px 700px at 10% -10%, rgba(124,195,255,.08), transparent 60%),
	radial-gradient(1000px 600px at 90% 10%, rgba(142,230,200,.07), transparent 60%), #0f1220;
	/* BAR */
	--bar-time-block-color: white;
	--bar-button-text-color: white;
	--bar-button-hover-color: rgba(255, 255, 255, 0.2);
	--search-placeholder-color: #ffffe3;
	--search-input-color: #ffffe3;
	--search-background-color: rgba(255, 255, 255, 0.2);
	--navbar-border-color: #7944cb;
	/* Settings-Overlay */
	--settings-link-color: lightblue;
	--settings-link-color-hover: white;
}

[data-nav-style="dark"] {
	/* NAVBAR */
	--logo-color: linear-gradient(90deg, rgba(277, 277, 277, 1), rgba(277, 277, 277, 1));
	--logo-shadow: 0 rgba(277, 277, 277, 0);
	--behind-navbar-background: radial-gradient(1200px 700px at 10% -10%, rgba(124,195,255,.08), transparent 60%),
	radial-gradient(1000px 600px at 90% 10%, rgba(142,230,200,.07), transparent 60%), #0f1220;
	--navbar-background: rgba(0, 0, 0, 0.1);
	--nav-bar-link-hover: #4f94f6;
	--nav-bar-dropdown-link-hover: #4f94f6;
	--nav-bar-in-text-color: white;
	--nav-bar-dropdown-background: rgba(19, 26, 36, 0.95);
	--nav-bar-dropdown-background-hover: rgba(255, 255, 255, 0.1);
	--nav-bar-dropdown-text-color: white;
	--nav-bar-small-svg-color: white;
	/* FREE-NAVBAR */
	--free-navbar-background: radial-gradient(1200px 700px at 10% -10%, rgba(124,195,255,.08), transparent 60%),
	radial-gradient(1000px 600px at 90% 10%, rgba(142,230,200,.07), transparent 60%), #0f1220;
	--free-behind-navbar-background: rgba(0, 0, 0, 0);
	--free-nav-bar-in-text-color: white;
	--free-nav-bar-link-hover: #095cf0;
	--free-nav-bar-dropdown-link-hover: #095cf0;
	--free-nav-bar-dropdown-background: rgba(21, 27, 39, 0.95);
	--free-nav-bar-dropdown-background-hover: rgba(255, 255, 255, 0.1);
	--free-nav-bar-dropdown-text-color: white;
	/* Navbar-border */
	--navbar-border-color: rgba(19, 52, 83, 0.45);
}

.header-wrapper {
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
}

.header-section {
	position: sticky;
	top: 0;
	z-index: 101;
	width: 100%;
	height: 100%;
	min-height: 4rem;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.header-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--behind-navbar-background);
	background-size: cover;
	opacity: 1;
}

.header-section.header-section-free::before {

}

/* === NAVBAR === */

.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0.3rem 2rem;
	min-width: 0; /* wichtig bei flex-wrap */
	z-index: 1000;
	background: var(--navbar-background);
	transition: background 0.2s ease, box-shadow 0.3s ease;
}

.header-section-free .navbar {
	background: var(--free-navbar-background);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

/* NAVBAR CONTENT */

/* NavLogo */

.nav-logo-m,
.nav-logo {
	font-family: sans-serif; /* FONT FREELIGHT */
	font-size: 1.75rem;
	font-weight: bold;
	background: var(--logo-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	padding: 0.5rem;
	display: inline-block;
	text-shadow: var(--logo-shadow);
	transition: transform 0.2s ease, text-shadow 0.2s ease, background-position 0.3s ease, background 0.4s ease;
	will-change: transform, text-shadow, background, -webkit-background-clip;
}

.header-section-free .nav-logo-m,
.header-section-free .nav-logo {
	background: var(--free-logo-color);
	background-position: center;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: var(--free-logo-shadow);
}

.nav-logo-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-logo-link:hover .nav-logo-m,
.nav-logo-link:hover .nav-logo {
	background-position: 25% 45%;
	transform: scale(1.02);
}

.nav-logo-link:focus .nav-logo-m,
.nav-logo-link:focus .nav-logo {
	transform: scale(0.98) translateY(0);
}

/* NavList */

.all-nav-wrapper {
	display: flex;
	gap: 1rem;
}

.all-nav-wrapper li {
	list-style: none;
}

.user-login-wrapper button span {
	pointer-events: none;
}

.nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
  align-items: center;
}

.nav-list-medium {
  display: none;
  margin-left: 0.5rem;
}

.nav-list-me {
	list-style: none;
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	align-items: center;
}

.nav-list-mobile {
  display: none;
  padding: 0 !important;
  margin-left: 0.7rem;
}

.nav-list-mo {
	list-style: none;
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	align-items: center;
}

.nav-list-mobile-s {
    display: none;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--nav-bar-in-text-color);
    padding: 0 0.5rem;
	padding-right: 1.5rem;
}

.header-section-free .nav-list-mobile-s {
	color: var(--free-nav-bar-in-text-color) !important;
}

.moblie-s {
  padding: 0 !important;
}

.dropdownmobile-s .dropdown-menu-wrapper {
	margin-top: 0.6rem !important;
}

.nav-list-mo-s {
  list-style: none;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
  align-items: center;
}

.nav-list-mo-s .menu-button {
	padding: 0 !important;
}

.nav-list-mo-s button .button-text svg {
	vertical-align: middle;
	stroke: var(--nav-bar-small-svg-color); 
}

.nav-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-list a {
  font-family: sans-serif; /* FONT MenuList */
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--nav-bar-in-text-color);
  padding: 1rem 1rem;
  display: block;
}

.header-section-free .nav-list a {
	color: var(--free-nav-bar-in-text-color) !important;
}

.nav-list a:hover {
	color: var(--nav-bar-link-hover);
}

.header-section-free .nav-list a:hover {
	color: var(--free-nav-bar-link-hover) !important;
}

.navbar .dropdown > button {
  font-family: sans-serif; /* FONT MenuList */
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--nav-bar-in-text-color);
  padding: 1rem 1rem;
  display: flex;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: transform 0.2s ease;
}

.header-section-free .navbar .dropdown > button {
	color: var(--free-nav-bar-in-text-color) !important;
}

.nav-button-text-wrapper {
	display: inline-flex;
	will-change: transform;
	gap: 0.2rem;
	transition: transform 0.2s ease;
}

.navbar .dropdown > button:hover .nav-button-text-wrapper {
  color: var(--nav-bar-link-hover);
  transform: translateY(-2.5px);
}

.header-section-free .navbar .dropdown > button:hover {
	color: var(--free-nav-bar-link-hover) !important;
}

.nav-list > li > a,
.button-text {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 1.5, 0.5, 1);
  will-change: transform;
}

.nav-list > li > a:hover {
  color: var(--nav-bar-link-hover);
  transform: translateY(-2px);
}

.header-section-free .nav-list > li > a:hover {
	color: var(--free-nav-bar-link-hover) !important;
}

/* Dropdown */

.dropdown {
  position: relative;
}

.dropdown-menu, 
.dropdown-menu li, 
.dropdown-menu li a,
.dropdown-menu li button {
  box-sizing: border-box;
  line-height: 1;
  margin: 0;
  padding: 0;
  border-spacing: 0;
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  line-height: 0;
  top: 100%;
  left: 46%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0;
  margin: 0;
  list-style: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  min-width: 140px;
  transform: translateX(-46%) translateY(0);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  pointer-events: none;
}

.dropdown.active > .dropdown-menu {
  display: block;
}

.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  animation: dropdownBounce 0.4s ease-out forwards;
}

@keyframes dropdownBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(2px);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px); /* leicht über Ziel hinaus */
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown:hover .dropdown-menu li {
  opacity: 1;
  transform: translateY(0px);
  margin-top: 0;
}

.dropdown-menu li {
  position: relative;
  width: 100%;
  display: block;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  opacity: 0;
  border: none;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu li:first-child {
  padding-top: 0.15rem;
}

.dropdown-menu-wrapper {
	background: var(--nav-bar-dropdown-background);
	margin-top: 0.2rem;
}

.header-section-free .dropdown-menu-wrapper {
	background: var(--free-nav-bar-dropdown-background) !important;
}

/* Optional: kleine Verzögerung gestaffelt */
.dropdown-menu li:nth-child(1) { transition-delay: 0.10s; }
.dropdown-menu li:nth-child(2) { transition-delay: 0.20s; }
.dropdown-menu li:nth-child(3) { transition-delay: 0.30s; }
.dropdown-menu li:nth-child(4) { transition-delay: 0.40s; }
.dropdown-menu li:nth-child(5) { transition-delay: 0.50s; }
.dropdown-menu li:nth-child(6) { transition-delay: 0.60s; }
/* weitere nach Bedarf... */

.dropdown-menu li:not(:last-child) {
  margin-bottom: 0;
}

.dropdown-menu li button,
.dropdown-menu li a {
  font-family: sans-serif; /* FONT DROPDOWN */
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px 12px;
  margin: 0;
  border: none;
  line-height: 1;
  width: 100%;
  white-space: nowrap;
  color: var(--nav-bar-dropdown-text-color);
  text-decoration: none;
  background: transparent;
  transition: background 0.3s ease;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.header-section-free .dropdown-menu li button,
.header-section-free .dropdown-menu li a {
	color: var(--free-nav-bar-dropdown-text-color) !important;
}

.dropdown-menu li button:hover,
.dropdown-menu li a:hover {
  background: var(--nav-bar-dropdown-background-hover);
}

.header-section-free .dropdown-menu li button:hover,
.header-section-free .dropdown-menu li a:hover {
	background: var(--free-nav-bar-dropdown-background-hover) !important;
}

.dropdown-menu li button span,
.dropdown-menu li a span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.dropdown-menu li button:hover span,
.dropdown-menu li a:hover span {
  transform: translateX(5px);
  color: var(--nav-bar-dropdown-link-hover);
}

.header-section-free .dropdown-menu li button:hover span,
.header-section-free .dropdown-menu li a:hover span {
	color: var(--free-nav-bar-dropdown-link-hover);
}

.dropdown-menu li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.dropdown-menu li:hover::before {
  opacity: 1;
}

/* NAVBAR ICONS */

.arrow {
	display: inline-block;
	transition: transform 0.3s ease;
}

.dropdown:hover .arrow {
  transform: rotate(180deg);
}

.comet {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(135deg);
}

.nav-logo-link:hover .comet {
  transform: rotate(135deg);
}

/* NAVBAR BORDER */

.navbar-border {
	position: absolute;
	bottom: 0;
	height: 1px;
	width: 100%;
	z-index: 3;
	background: var(--navbar-border-color);
	transition: all 0s ease;
}

/* ANMELDEN/PROFIL BUTTON */

.anmelden-button {
	font-family: sans-serif;
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--nav-bar-in-text-color);
	padding: 1rem 1rem;
	display: flex;
	cursor: pointer;
	border: none;
	background: transparent;
	transition: transform 0.2s ease;
}

.header-section-free .anmelden-button {
	color: var(--free-nav-bar-in-text-color) !important;
}

.anmelden-button:hover {
  color: var(--nav-bar-link-hover);
  transform: translateY(-2.5px);
}

.nav-list-mobile-s .anmelden-button:hover {
  transform: translateY(0) !important;
}

.header-section-free .anmelden-button:hover {
	color: var(--free-nav-bar-link-hover) !important;
}

/* === BAR === */

#bar {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0.5rem;
}

.bar-background {
	padding-top: 0.3rem;
	padding-bottom: 0.7rem;
	margin-bottom: 0;
	min-height: 2.5rem;
	overflow: hidden;
	pointer-events: none;
	position: relative;
    z-index: 10;
}

#bar {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 1.7rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
  gap: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

/*#bar:hover { *//* Vergrößert bar beim Hover */
  /*padding-top: 0.5rem;
  padding-bottom: 0.3rem;
}*/

/*#bar:hover .bar-content {
  background-color: rgba(126, 192, 238, 0.2);
  padding-left: 1rem; *//* Hover Content bewegen 1rem=0 */
  /*padding-right: 1rem;
  outline: 1px solid rgba(87, 131, 248, 0.1);
}*/

/* Die eigentliche Bar-Inhaltsfläche */
.bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.3rem;
  padding: 0 1rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

/* BAR JS SYMBOLS */

.toggleFnts-symbol {
  align-self: center;
  margin-top: 0.1rem
}

/* Linker Bereich (Text, später evtl. Bilder etc.) */

.bar-left {
	display: flex;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 0.2rem;
	pointer-events: auto;
}

.time-block {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  gap: 5px;
  min-width: 2rem;
  transition: background 0.3s ease;
  border-radius: 16px;
}

.time-block:hover {
	background: rgba(255, 255, 255, 0.1);
}

#time-icon {
	max-width: 20px;
	max-height: 20px;
	align-content: center;
	pointer-events: none;
	display: flex;
	align-items: center;
}

#time-icon svg {
	fill: var(--bar-time-block-color);
}

/* Buttons */

.switches {
	display: flex;
	justify-content: flex-end;
	gap: 0.2rem;
	padding: 0.2rem;
	align-items: center;
	pointer-events: auto;
}

.switches svg {
	pointer-events: none;
}

#toggleMode:hover,
#toggleMode2:hover,
#toggleNav:hover,
#toggleNav2:hover,
#largeFonts:hover,
#largeFonts2:hover {
	background: var(--bar-button-hover-color);
}

#toggleMode,
#toggleMode2,
#largeFonts,
#largeFonts2,
#toggleNav,
#toggleNav2 {
	display: flex;
	cursor: pointer;
	background: rgba(0, 0, 0, 0);
	border-radius: 16px;
	color: var(--bar-button-text-color);
	border: none;
	align-items: center;
	justify-content: center;
	height: 2rem;
	font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

#toggleMode2,
#largeFonts2,
#toggleNav2 {
	gap: 0.3rem;
}

/* DARK-MODE */

.themeBtn-symbol {
  /*transition: fill 0.3s ease;*/
  fill: black;
  height: 24px;
  align-self: center;
}

[data-theme="dark"] .themeBtn-symbol {
  fill: white;
}

.theme-toggle-btn .bar-btn-text.light {
  display: flex;
}
.theme-toggle-btn .bar-btn-text.dark {
  display: none;
}

[data-theme="dark"] .bar-btn-text.light {
  display: none;
}

[data-theme="dark"] .bar-btn-text.dark {
  display: flex;
}

/* DARK-NAV */

.nav-symbol-wrapper {
	position: relative;
	display: flex;
	height: 22px;
	align-self: center;
}

.navBtn-symbol {
  align-self: center;
}

.navBtn-symbol.filled-nav {
	/* transition: fill 0.3s ease, opacity 0.3s ease;*/
	fill: black;
	height: 100%;
	z-index: 2;
}

.navBtn-symbol.outline-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/*transition: opacity 0.3s ease;*/
	z-index: 1;
}

[data-theme="dark"][data-nav-style="dark"] .navBtn-symbol.outline-nav {
	transition: opacity 0s ease;
}

[data-nav-style="dark"] .navBtn-symbol {
	fill: black;
}

[data-theme="dark"] .navBtn-symbol {
	fill: white;
}

[data-theme="dark"] .navBtn-symbol.filled-nav {
	opacity: 1;
}

[data-theme="dark"] .navBtn-symbol.outline-nav,
[data-theme="dark"][data-nav-style="dark"] .navBtn-symbol.filled-nav,
.navBtn-symbol.filled-nav,
[data-nav-style="dark"] .navBtn-symbol.outline-nav {
	opacity: 0;
}

[data-theme="dark"][data-nav-style="dark"]  .navBtn-symbol.outline-nav,
.navBtn-symbol.outline-nav,
[data-nav-style="dark"] .navBtn-symbol.filled-nav {
	opacity: 1;
}

.toggleNav .bar-btn-text.light-nav {
	display: flex;
}
.toggleNav .bar-btn-text.dark-nav {
	display: none;
}

[data-nav-style="dark"] .bar-btn-text.light-nav {
	display: none;
}

[data-nav-style="dark"] .bar-btn-text.dark-nav {
  display: flex;
}

/* LARGE FONTS */

.fontBtn-symbol {
  /*transition: fill 0.3s ease;*/
  fill: black;
  height: 20px;
  align-self: center;
}
.largeFonts:hover .fontBtn-symbol {
	transition: fill 0.3s ease, transform 0.2s ease;
}

[data-theme="dark"] .fontBtn-symbol {
  fill: white;
}

[data-font-size="large"] .fontBtn-symbol {
	transform: scale(1.3);
}

.largeFonts .bar-btn-text.medium-fonts {
  display: flex;
}
.largeFonts .bar-btn-text.large-fonts {
  display: none;
}

[data-font-size="large"] .bar-btn-text.medium-fonts {
  display: none;
}

[data-font-size="large"] .bar-btn-text.large-fonts {
  display: flex;
}

/*@media (max-width: 768px) {
	.bar-btn-text {
		display: none !important;
	}
}*/

@media (max-width: 500px) {
	.switches > .largeFonts,
	.switches > .toggleNav {
		display: none !important;
	}
}

/* SETTINGS */

.button-settings:hover {
	background: var(--bar-button-hover-color);
}

.button-settings.settings-open svg {
	animation: rotate-gear-open 1s cubic-bezier(0.25, 0.1, 0.45, 1) forwards;
}

@keyframes rotate-gear-open {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(7deg); /* kurzes Rucken nach rechts */
  }
  100% {
    transform: rotate(-135deg); /* langsame Drehung nach links */
  }
}

.button-settings.settings-close svg {
	animation: rotate-gear-close 1s cubic-bezier(0.25, 0.1, 0.45, 1) forwards;
}

@keyframes rotate-gear-close {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-7deg); /* kurzes Rucken nach rechts */
  }
  100% {
    transform: rotate(135deg); /* langsame Drehung nach links */
  }
}

.button-settings {
	display: flex;
	cursor: pointer;
	padding: 1px 6px;
	background: rgba(0, 0, 0, 0);
	border-radius: 16px;
	color: var(--bar-button-text-color);
	border: none;
	align-items: center;
	justify-content: center;
	height: 2rem;
	font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	gap: 0.1rem;
}

.button-settings svg {
	display: inline-block;
	width: 20px;
	height: 20px;
	fill: black;
	transition: transform 0.5s ease-out/*, fill 0.3s ease*/;
	will-change: transform;
}

[data-theme="dark"] .button-settings svg {
	fill: white;
}

/* Logout Override (in styles auch gesetzt) */

.logout-button {
	padding: 0.1rem 0.2rem;
	border: none;
	border-radius: 16px;
	cursor: pointer;
	background: none;
}

.logout-button:hover {
	background: var(--bar-button-hover-color);
}

.logout-button svg {
	transform: scale(0.8);
	vertical-align: bottom;
	fill: black;
}

[data-theme="dark"] .logout-button svg {
	fill: white;
}

/* overlay */

.settings-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.settings-overlay.hidden {
	display: none;
}

.overlay-content {
	background: var(--bg-color);
	border-radius: 8px;
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 20px;
	width: 700px;
	max-width: 90%;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	position: relative;
}

.overlay-content h2,
.overlay-content p {
	margin: 0;
}

.overlay-content h3 {
	margin: 0.5rem 0;
}

.fast-settings-slider-wrapper {
}

.fast-settings-slider {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fast-settings-to-settings-wrapper {
	align-self: center;
	margin-top: 1rem;
}

.overlay-content a {
	text-decoration: none;
	color: var(--settings-link-color);
	transition: color 0.1s ease;
}

.overlay-content a:hover {
	text-decoration: underline;
	color: var(--settings-link-color-hover);
}

.close-button {
	position: absolute;
	display: flex;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: none;
	font-size: 20px;
	cursor: pointer;
}

.close-button svg {
	flex: 1;
	width: 26px;
	height: 26px;
	fill: var(--text-color);
	transition: fill 0.2s ease;
}

.close-button:hover svg {
	fill: red;
}

/* SEARCH */

.bar .search-container {
    position: relative;
	justify-self: left;
  }

  .bar .search-container input[type="text"] {
	font-family: 'Arial', sans-serif;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* rechts Platz für Icon */
    font-size: 1rem;
	color: var(--search-input-color);
	font-weight: 500;
	width: 100%;
    box-sizing: border-box;
	background: var(--search-background-color);
	border: none;
	border-radius: 16px;
	resize: vertical; /* erlaubt Höhe verändern */
	transition: all 0.3s ease;
  }
  
  .bar .search-container input:focus {
	  outline: 1px solid;
	  border: none;
  }
  
  .bar .search-container input::placeholder {
	  color: var(--search-placeholder-color);
	  opacity: 0.9;
  }

  .bar .search-container button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  .bar .search-container button svg {
    width: 20px;
    height: 20px;
	pointer-events: none;
  }
  
.bar .search-container button svg circle,
.bar .search-container button svg line {
	stroke: var(--text-color);
}
  
  .bar .search-container button:hover svg {
    animation: smoothCircleBottomSmall 0.8s ease;
  }
  
  @keyframes smoothCircleBottomSmall {
  0%     { transform: translate(0px, 0px); }
  12.5%  { transform: translate(-1px, 0.5px); }
  25%    { transform: translate(-1.5px, 1.5px); }
  37.5%  { transform: translate(-1px, 2.5px); }
  50%    { transform: translate(0px, 3px); }
  62.5%  { transform: translate(1px, 2.5px); }
  75%    { transform: translate(1.5px, 1.5px); }
  87.5%  { transform: translate(1px, 0.5px); }
  100%   { transform: translate(0px, 0px); }
}

/* BAR MEDIA */

@media (max-width: 375px) {
	.bar-content {
		justify-content: center !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.bar-left {
		gap: 0.2rem !important;
		padding-right: 0;
	}
}


/* === MEDIA === */


/* NAVBAR */

@media (max-width: 730px) {
  .nav-list {
	  display: none !important;
  }
  .nav-list-medium {
	  display: flex !important;
  }
}

@media (max-width: 560px) {
	.nav-logo-text-seite {
	  display: none !important;
  }
  .nav-list-medium {
	  display: none !important;
  }
  .nav-list-mobile {
	  display: flex !important;
  }
  .navbar .user-login-wrapper {
	  display: none !important;
  }
}

@media (max-width: 429px) {
	.header-section {
		min-height: 3.5rem !important;
	}
	.navbar {
	  justify-content: space-between !important;
	  padding: 0.3rem 2rem !important;
  }
  .nav-list-mobile {
	  display: none !important;
  }
  .nav-list-mobile-s {
	  display: flex !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
}