/* ===== Fonts ===== */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v43-latin-regular.woff2') format('woff2'); 
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v43-latin-700.woff2') format('woff2'); 
}

/* Pulsierende Effekte je nach Farbe */

/* ===== Keyframes ===== */
@keyframes pulse-success {
  0% { box-shadow: 0 0 0 0 rgba(40,167,69, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(40,167,69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69, 0); }
}

@keyframes pulse-warning {
  0% { box-shadow: 0 0 0 0 rgba(255,193,7, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255,193,7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255,193,7, 0); }
}

@keyframes pulse-info {
  0% { box-shadow: 0 0 0 0 rgba(23,162,184, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(23,162,184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23,162,184, 0); }
}

@keyframes pulse-danger {
  0% { box-shadow: 0 0 0 0 rgba(220,53,69, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(220,53,69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69, 0); }
}

@keyframes zoom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes zoomPop {
  0%   { transform: scale(1); font-weight: normal; }
  75%  { transform: scale(2.5) rotate(360deg); font-weight: bold; color: #0d6efd;}
  100% { transform: scale(1); font-weight: normal; color: inherit;}
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin180 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}
@keyframes spin360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes flipX {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(180deg); }
}

/* Größerer Kaffee-Button */

/* ===== Animations ===== */
.zoom {
  animation: zoom 0.3s ease-in-out;
}

/* Animation Zähler in Begrüßung */
.zoom-pop {
  animation: zoomPop 1s ease-in-out;
}
#coffeeCount,
#candyCount {
  display: inline-block;
  transition: transform 0.3s ease;
}
/* Ende Animation Zähler */


/* Weiter mit normalen CSS */

.pulse-success {
  animation: pulse-success 2s infinite;
}

.pulse-warning {
  animation: pulse-warning 2s infinite;
}

.pulse-info {
  animation: pulse-info 2s infinite;
}

.pulse-danger {
  animation: pulse-danger 2s infinite;
}

.fade-in {
  animation: fadeIn 1s ease forwards;
}
.zoomable-image {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.zoomable-image:hover {
  transform: scale(1.02);
}



/* ===== Global Layout ===== */
html, body {
  height: 100%;
  transition: background-color 1.2s ease, color 1.2s ease;
}

/* Für animierten Wechsel light/dark */
body, .card, .navbar, .modal, .offcanvas,
.dropdown-menu, .list-group-item,
.table, .table th, .table td,
.alert, .badge,
.form-control, .form-select, .form-check-input,
.btn, .text-muted {
  transition: background-color 1.2s ease,
              color 1.2s ease,
              border-color 1.2s ease;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Safari fix */
  z-index: -100;
}

h1 {
  margin-top: 4rem; /* oder was dir gefällt */
  font-size: 2rem;
}

/* Eigene erweiterung nach Bootstrap Syntax */
.mt-6 {margin-top: 5rem;}
.pt-6 {padding-top: 5rem;}
.mt-7 {margin-top: 7rem;}
.pt-7 {padding-top: 7rem;}

/* Focus-Ring in Microsoft Edge (und auch Chrome/Firefox) unterdrücken */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}


/* ===== Header/Footer ===== */
.glass-header {
  background-color: color-mix(in srgb, var(--bs-body-bg) 25%, transparent);
  backdrop-filter: blur(10px); /* eigentlicher Blur-Effekt */
  -webkit-backdrop-filter: blur(10px); /* für Safari */
}
#scrollTopBtn.glass-header {
  background-color: color-mix(in srgb, var(--bs-body-bg) 25%, transparent);
  backdrop-filter: blur(10px); /* eigentlicher Blur-Effekt */
  -webkit-backdrop-filter: blur(10px); /* für Safari */
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* Allgemeine Farbklassen für Bootstrap-Switches */

/* ===== Buttons & Icons ===== */
.btn-kaffee {
	font-size: 1.3rem;
	padding: 0.75rem 1.5rem;
}

/* Icon-Größen anpassen */
.fa-mug-saucer { color: var(--bs-light); }
.fa-crown { color: var(--bs-warning); }

.price-highlight {
  background-color: var(--bs-secondary-bg);
}

/* Card Slide bei mehreren Card Seiten */
.dot {
  height: 8px;
  width: 8px;
  margin: 0 4px;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s, transform 0.3s;
}
.dot:hover { cursor: pointer;}
.dot.active {
  background-color: var(--bs-dark);
  transform: scale(1.3);
}

.rounded-table {
  border: 1px solid #dee2e6; /* gleiche Farbe wie Bootstrap-Borders */
  border-radius: 0.5rem;
  overflow: hidden; /* wichtig, damit die Rundung greift */
  background-clip: padding-box; /* für saubere Ecken */
  border-collapse: separate;
  border-spacing: 0;
}

#passwordRules li {
  transition: color 0.6s ease;
}

.badge.bg-success { background-color: var(--bs-success) !important; }
.badge.bg-warning { background-color: var(--bs-warning) !important; }
.badge.bg-danger  { background-color: var(--bs-danger) !important; }


/* ===== Navbar ===== */
.navbar-nav .nav-link.active {
  background-color: var(--bs-nav-pills-link-active-bg, rgba(0,0,0,0.1));
  color: var(--bs-nav-pills-link-active-color, var(--bs-body-color)) !important;
  font-weight: 600;
  border-radius: var(--bs-border-radius);
}
.navbar-nav .nav-link.active small,
.navbar-nav .nav-link.active i {
  color: var(--bs-nav-pills-link-active-color, var(--bs-body-color));
}
.navbar-nav .nav-link:hover {
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,0.05));
  border-radius: var(--bs-border-radius);
  transition: background-color 0.3s ease;
  transform: scale(1.05);
}
.navbar-nav .nav-link:hover i {
  color: var(--bs-body-color);
}

/* Dropdownmenü */
.nav-link.dropdown-toggle::after {
	display: none;
}

/* Custom Burgermenü */
.custom-toggler span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px auto;
  background-color: var(--bs-body-color);
  transition: all 0.3s ease;
}

.custom-toggler:hover  {
  background-color: var(--bs-tertiary-bg);
}

.custom-toggler[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.custom-toggler[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Varianten für Klassen */
.navbar-nav .nav-item {
  margin: 0 0.5rem;
  text-align: center;
}

.modal-body-scrollable {
  max-height: 80vh; /* 80% der Viewport-Höhe */
  overflow-y: auto;
}

/* ===== Toggel für Dark/Light Mode ===== */

/* Basis-Button orientiert sich am aktiven Theme */
.theme-toggle-btn {
  /* background-color: var(--bs-body-bg); */
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  transition: all 0.3s ease;
}

/* Hover: zeig den "anderen Theme"-Look + Animation */
[data-bs-theme="light"] .theme-toggle-btn:hover {
  background-color: var(--bs-body-color);
  color: var(--bs-body-bg);
  border-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .theme-toggle-btn:hover {
  background-color: var(--bs-body-color);
  color: var(--bs-body-bg);
  border-color: var(--bs-body-color);
}

/* Standardzustand */
.theme-toggle-btn i {
  transition: transform 0.4s ease;
}

/* Hover: Icon bleibt geflippt solange Hover aktiv ist */
.theme-toggle-btn:hover i {
  transform: rotateY(180deg);
  /* transform: rotate(360deg); */
}


/* ===== Switches ===== */
.switch-primary .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.switch-success .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.switch-warning .form-check-input:checked {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.switch-danger .form-check-input:checked {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.switch-info .form-check-input:checked {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

.switch-secondary .form-check-input:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

/* Regenbogen Switches */
.switch-red .form-check-input:checked {
  background-color: #e3342f;
  border-color: #e3342f;
}

.switch-orange .form-check-input:checked {
  background-color: #f97316;
  border-color: #f97316;
}

.switch-yellow .form-check-input:checked {
  background-color: #facc15;
  border-color: #facc15;
}

.switch-green .form-check-input:checked {
  background-color: #10b981;
  border-color: #10b981;
}

.switch-cyan .form-check-input:checked {
  background-color: #06b6d4;
  border-color: #06b6d4;
}

.switch-blue .form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.switch-purple .form-check-input:checked {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}

.switch-pink .form-check-input:checked {
  background-color: #ec4899;
  border-color: #ec4899;
}

/* ===== Bundesliga Tabs ===== */
/* Einheitliche Höhe für Tabs sichern */
#bundesligaTabs .nav-link {
  color: var(--bs-secondary);
  font-weight: 700;
  border: none;
  border-bottom: 3px solid transparent; /* Platz für Linie reservieren */
  background-color: transparent;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#bundesligaTabs .nav-link:hover {
  color: var(--bs-link-hover-color);
  background-color: var(--bs-tertiary-bg); /* dezentes Hover-Highlight, theme-aware */
}

#bundesligaTabs .nav-link.active {
  color: var(--bs-body-color) !important; 
  border-bottom-color: var(--bs-body-color); /* Linie sichtbar machen */
  background-color: var(--bs-secondary-bg); /* aktive Tabs klar abheben */
}

#bundesligaTabs {
  border-bottom: 1px solid var(--bs-border-color); /* dezente Linie unter der Tab-Leiste */
}

.club-logo {
  height: 3rem;        /* Basisgröße, orientiert sich an Schriftgröße */
  max-width: auto;     /* Seitenverhältnis bleibt erhalten */
  transition: transform 0.2s ease;
}
.club-logo:hover {
  transform: scale(1.2);
  position: relative;
  z-index: 10;
}

.badge-live {
  background-color: var(--bs-danger); /* rot */
  font-size: 0.75rem;        /* etwas kleiner */
  font-weight: 600;
  animation: pulse 1.5s infinite; /* sanftes Blinken */
}

@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}


/* ===== Carousel ===== */
.carousel-indicators {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.carousel-indicators [data-bs-target] {
  all: unset; /* entfernt alle Browser-Styles */
  background: none !important;
  cursor: pointer;
  font-size: 0.5rem;
  color: #aaa;
  /*transition: all 0.3s ease;*/
}

.carousel-indicators [data-bs-target].active i {
  color: var(--bs-secondary); 
  transform: scale(1.3);
  transition: all 0.3s ease-in-out
}


/* ===== Hover/Transitions ===== */
.hover-effect {
  transition: all 0.2s ease-in-out;
  border-radius: 0.5rem;
}

.hover-effect:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* Ende Card Sliede */

.table th a:hover {
	text-decoration: none;
}

th.sortable:hover {
  cursor: pointer;
}

.list-group-item:hover {
  background-color: var(--bs-secondary-bg); /* helle graue Hintergrundfarbe beim Hover */
  transition: background-color 0.2s ease;
}

/* max 30 Zeichen */
.truncate-text30 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}

/* ===== Tables ===== */
.table th a {
	text-decoration: none;
	color: inherit;
}
thead.table-secondary i {
  color: var(--bs-body-color);
}

/* ===== Markdown ===== */
.markdown-content {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bs-body-color);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3  {
  font-size: 1.25rem; /* Bootstrap fs-5 */
  margin-top: 0rem;
  margin-bottom: 0.5rem; /* Bootstrap mb-3 */
  color: var(--bs-heading-color, var(--bs-body-color));
}

.markdown-content h1 { font-weight: 700; }
.markdown-content h2 { font-weight: 600; }
.markdown-content h3 { font-weight: 400; }

.markdown-content p {
  margin-bottom: 0.5rem;
}

.markdown-content.modal-body h1:not(:first-child) {
  margin-top: 2rem;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-content li {
  margin-bottom: 0.5rem;
}

.markdown-content blockquote {
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  border-left: 4px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  font-style: italic;
}

.markdown-content code {
  font-family: monospace;
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: var(--bs-code-color, var(--bs-danger));
  background-color: var(--bs-tertiary-bg);
  border-radius: 0.25rem;
}

.markdown-content pre code {
  display: block;
  padding: 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-radius: 0.5rem;
  overflow-x: auto;
}

.markdown-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
}

.markdown-content a {
  color: var(--bs-link-color);
  text-decoration: underline;
}
.markdown-content a:hover {
  color: var(--bs-link-hover-color); 
  text-decoration: none;
}

.markdown-content img {
  max-width: calc(100% - 2rem);
  height: auto;
  display: block;
  margin: 0.5rem auto;
  border-radius: 0.5rem;
  box-sizing: content-box;
}

/* ===== Utilities ===== */


/* ===== Media Queries ===== */

/* Tablet aufwärts */
@media (min-width: 768px) {
  /* Regeln für >=768px */
}

/* Bis Tablet runter */
@media (max-width: 767.98px) {
  /* Regeln für <768px */
}

/* ========================================
   Safe-Area-Padding für iOS Geräte (z. B. mit Notch oder Dynamic Island)
   Schützt wichtige Layoutbereiche vor Überlagerung durch Systemleisten.
   env(safe-area-inset-*) wird nur auf unterstützten Geräten aktiv.
   Gilt nur für mobile Geräte (max-width: 1024px)
========================================= */  
@media (max-width: 1024px) {
  body {
    padding-top: constant(safe-area-inset-top); /* iOS 11 */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 1024px) {
  .glass-header {
    padding-top: env(safe-area-inset-top);
  }
}

@media (max-width: 1024px) {
  .header-spacer {
    height: calc(80px + env(safe-area-inset-top));
  }
}

@media (max-width: 1024px) {
  .footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===== Other ===== */
/* open-sans-regular - latin */

/* ========================================
   Dark Mode Overrides
   ======================================== */

/* Body Overlay (Hintergrundschleier) */
[data-bs-theme="dark"] body::before {
  background: var(--bs-body-bg);
  opacity: 0.95; /* leicht transparent */
}

/* Glass Header & ScrollTop-Button */
[data-bs-theme="dark"] .glass-header,
[data-bs-theme="dark"] #scrollTopBtn.glass-header {
  background-color: rgba(0, 0, 0, 0.25); /* leicht transparentes Schwarz */
  color: #f8f9fa; /* helle Schriftfarbe */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Navbar Links */
[data-bs-theme="dark"] .navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}
[data-bs-theme="dark"] .navbar-nav .nav-link.active small,
[data-bs-theme="dark"] .navbar-nav .nav-link.active i {
  color: #fff;
}
[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] .navbar-nav .nav-link:hover i {
  color: #fff;
}
/* Ausgewählte Bilder abdunkeln */
[data-bs-theme="dark"] img.dark-sensitive {
  filter: brightness(0.8) contrast(1.1);
}
[data-bs-theme="dark"] .navbar-brand img {
  filter: brightness(0) invert(0.9);
}

/* Dark-Mode Styling für Tempus Dominus v6.9.4 */
[data-bs-theme="dark"] .tempus-dominus-widget {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
}

/* Tage */
[data-bs-theme="dark"] .tempus-dominus-widget .date-container .day {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tempus-dominus-widget .date-container .day:hover {
  background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .tempus-dominus-widget .date-container .day.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Zeit-Auswahl */
[data-bs-theme="dark"] .tempus-dominus-widget .time-container .timepicker-hour,
[data-bs-theme="dark"] .tempus-dominus-widget .time-container .timepicker-minute,
[data-bs-theme="dark"] .tempus-dominus-widget .time-container .timepicker-second {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* Toolbar-Buttons */
[data-bs-theme="dark"] .tempus-dominus-widget .toolbar button {
  background: transparent;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tempus-dominus-widget .toolbar button:hover {
  background-color: var(--bs-tertiary-bg);
}