/* ============================================================
   custom.css
   Ausgelagerte Overrides (vormals Inline-<style> in index.php).
   Wird NACH den Theme-CSS (style.css / overcast.css / mobile.css)
   geladen und ueberschreibt diese bewusst -- Reihenfolge in
   index.php nicht aendern.
   Ausgelagert am 2026-07-27.
   ============================================================ */

/* Header ueber die Karten heben: backdrop-filter erzeugt einen
   eigenen Stacking-Kontext, spaeter kommende Karten wuerden das
   Dropdown sonst ueberdecken. 100 liegt sicher unter den Modals
   (z-index 1000+) und ueber den Karten (z-index 2-10). */
#app > header {
  position: relative;
  z-index: 100;
}

.burger-menu {
  position: relative;
  display: inline-block;
}

/* Button-Optik (Icon oben, Label unten, Streifen-SVG) kommt komplett
   aus style.css ueber .header-buttons button und button#burger-menu */

/* padding-top statt margin-top: haelt das Menue beim
   Runterfahren mit der Maus offen (keine Hover-Luecke) */
.burger-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  padding-top: 10px;
  z-index: 1000;
}

.burger-menu:hover .burger-dropdown {
  display: block;
}

.burger-dropdown-inner {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 45, 89, 0.15);
  min-width: 180px;
  overflow: hidden;
}

/* Dropdown-Eintraege: Zeile statt Spalte (ueberschreibt
   .header-buttons button aus style.css) */
.header-buttons .burger-dropdown-inner button.burger-item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 0;
  font-size: 0.9rem;
  overflow: visible;
}

.header-buttons .burger-dropdown-inner button.burger-item:hover {
  background: #f5f5f5;
}

/* Im Dropdown die echten Material-Icons zeigen statt der
   SVG-Hintergruende aus style.css (dort ist das Logout-Icon
   das Streifen-Symbol) */
.burger-dropdown-inner .burger-item i.material-icons {
  color: #666;
  font-size: 20px;
  width: auto;
  height: auto;
  flex: 0 0 auto;
}

.burger-dropdown-inner .burger-item i.material-icons::before {
  display: none;
}

/* Profil + Abmelden: eigene SVG-Icons statt Material-Ligatur */
.burger-dropdown-inner button#player-info i.material-icons,
.burger-dropdown-inner button#logout-button i.material-icons {
  color: transparent;
  font-size: 1px;
  width: 1.25rem;
  height: 1.25rem;
}

.burger-dropdown-inner button#player-info i.material-icons::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20width=%2231.187162mm%22%20height=%2223.005039mm%22%20viewBox=%220%200%2031.187162%2023.005039%22%20version=%221.1%22%20id=%22svg1%22%20xml:space=%22preserve%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:svg=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%20id=%22defs1%22%20/%3E%3Cg%20id=%22layer1%22%20transform=%22translate(-107.97663,-111.26738)%22%3E%3Cpath%20style=%22fill:%23000000%22%20d=%22m%20108.5418,133.63125%20c%20-0.59186,-0.59186%20-0.6105,-0.70767%20-0.53187,-3.30392%200.15688,-5.17933%207.4018,-8.03039%2014.88113,-5.85609%203.78067,1.09907%206.21476,6.37013%204.15237,8.99204%20-0.76142,0.96799%20-17.5492,1.12041%20-18.50163,0.16797%20z%20m%2017.71778,-1.04094%20c%202.66467,-4.97898%20-5.47463,-9.28497%20-13.23798,-7.00338%20-3.17698,0.93369%20-5.43121,5.39958%20-3.63313,7.19766%200.61888,0.61888%2016.534,0.43562%2016.87111,-0.19428%20z%20m%203.58118,-0.54656%20c%20-0.38993,-0.63092%200.31443,-0.79375%203.43356,-0.79375%204.25856,0%204.10707,0.0784%204.10707,-2.12467%200,-3.35004%20-1.7052,-4.50168%20-7.01146,-4.73533%20-5.22474,-0.23006%20-5.02455,-0.94521%200.26458,-0.94521%206.38963,0%2010.64392,4.75357%207.43347,8.30585%20-0.55859,0.61807%20-7.8655,0.87839%20-8.22722,0.29311%20z%20m%20-13.71905,-9.79663%20c%20-4.10714,-1.23107%20-5.35017,-6.21664%20-2.30837,-9.25844%202.93521,-2.93521%207.2459,-2.00379%208.95878,1.93575%201.70434,3.9199%20-2.51248,8.563%20-6.65041,7.32269%20z%20m%203.45007,-1.48951%20c%201.37631,-0.6531%202.31284,-2.23075%202.31145,-3.8938%20-0.004,-4.17825%20-5.15397,-5.9792%20-7.66914,-2.68164%20-2.78735,3.65441%201.20021,8.5483%205.35769,6.57544%20z%20m%209.47523,0.64891%20c%20-3.37031,-1.1749%20-4.18973,-5.67435%20-1.45279,-7.97733%204.54984,-3.82843%2010.34411,2.80903%206.01358,6.88868%20-1.36782,1.28858%20-2.92265,1.65971%20-4.56079,1.08865%20z%20m%203.33046,-1.60769%20c%201.60162,-1.07933%202.03465,-2.98778%201.04588,-4.60942%20-1.33793,-2.19428%20-4.50433,-2.19428%20-5.84226,0%20-1.88423,3.09023%201.79867,6.62958%204.79638,4.60942%20z%22%20id=%22path3%22%20/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Abmelden-Eintrag: eigenes SVG-Icon statt Material-Ligatur */
.burger-dropdown-inner button#logout-button i.material-icons::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20width=%2232.1mm%22%20height=%2235.5mm%22%20viewBox=%2214.0%2013.3%2032.1%2035.5%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20style=%22fill:%23000000%22%20d=%22m%2016.971035,47.898522%20c%20-0.81597,-0.41013%20-1.34546,-0.91842%20-1.71979,-1.65091%20-0.29746,-0.58208%20-0.62229,-1.0954%20-0.72183,-1.14071%20-0.0995,-0.0453%20-0.19242,-5.83587%20-0.2064,-12.86791%20-0.0239,-12.00868%200.11868,-15.02204%200.73256,-15.48574%200.1012,-0.0764%200.31532,-0.37597%200.47583,-0.66563%200.33522,-0.60495%202.26296,-1.80012%203.42016,-2.12046%200.43226,-0.11965%202.92121,-0.26297%205.53101,-0.31849%204.95707,-0.10543%206.23512,0.0914%206.23512,0.96041%200,1.00334%20-0.45914,1.07915%20-6.53521,1.07915%20-3.75708,0%20-5.90021,0.0961%20-5.90021,0.26459%200,0.14552%20-0.16992,0.26458%20-0.37761,0.26458%20-0.20769,0%20-0.74347,0.44385%20-1.19062,0.98633%20l%20-0.81302,0.98632%20v%2012.99594%20c%200,13.78767%200.0141,13.95608%201.25481,14.95269%201.21887,0.9791%201.60684,1.03497%207.18663,1.03497%203.04601,0%205.72653,0.0723%205.95671,0.1606%200.23019,0.0883%200.41852,0.38598%200.41852,0.66146%200,0.47744%20-0.29381,0.50073%20-6.28386,0.49812%20-5.97779,-0.003%20-6.34127,-0.0316%20-7.4628,-0.59531%20z%20m%2021.03306,-9.43937%20c%20-0.15961,-0.25824%201.5329,-2.46564%203.46157,-4.51467%200.61638,-0.65484%201.15892,-1.28165%201.20563,-1.39292%200.0467,-0.11126%20-4.04662,-0.23032%20-9.09631,-0.26458%20-6.09796,-0.0414%20-9.27642,-0.15752%20-9.46463,-0.34587%20-0.20147,-0.20163%20-0.13891,-0.45016%200.21645,-0.8599%200.49468,-0.57037%200.59017,-0.57631%209.26619,-0.57631%204.8215,0%208.76637,-0.0918%208.76637,-0.20395%200,-0.11218%20-1.07157,-1.27055%20-2.38125,-2.57417%20-2.40656,-2.39541%20-2.71806,-2.96298%20-1.96786,-3.58559%200.35656,-0.29592%200.92043,0.16297%204.10105,3.33749%202.0282,2.02433%203.68764,3.8625%203.68764,4.08483%200,0.55105%20-6.6427,7.14347%20-7.19796,7.14347%20-0.24405,0%20-0.51265,-0.11152%20-0.59689,-0.24783%20z%20m%205.67818,-5.04383%20c%200,-0.14552%20-0.12609,-0.26459%20-0.2802,-0.26459%20-0.1541,0%20-0.20661,0.11907%20-0.11667,0.26459%200.0899,0.14552%200.21602,0.26458%200.2802,0.26458%200.0642,0%200.11667,-0.11906%200.11667,-0.26458%20z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Modal-Header-Icons an die Navbar-SVGs angleichen */
.knowledge-base-header h2 i.material-icons,
.team-credits-header h2 i.material-icons {
  color: transparent;
  font-size: 1px;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.knowledge-base-header h2 i.material-icons::before,
.team-credits-header h2 i.material-icons::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.knowledge-base-header h2 i.material-icons::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.758768 28.98888' fill='%23000000'%3E%3Cg transform='translate(-101.33542,-114.3)'%3E%3Cpath d='m 101.97561,142.47729 c -0.84994,-1.08052 -0.85521,-19.56005 -0.006,-20.75277 0.94035,-1.32061 4.08775,-1.81553 4.08775,-0.6428 0,0.43837 -0.20431,0.54354 -1.19063,0.61292 -2.45396,0.17261 -2.38125,-0.14479 -2.38125,10.39451 0,11.28496 -0.78246,10.02695 6.23661,10.02695 5.22867,0 5.40506,0.0173 5.40506,0.52916 0,0.95804 -11.38976,0.80059 -12.15163,-0.16797 z m 14.1801,0.52075 c -0.097,-0.097 -0.17639,-1.46623 -0.17639,-3.04271 0,-2.86632 0,-2.86632 -2.92356,-2.86632 -5.08569,0 -4.74961,0.77401 -4.74837,-10.9357 0.001,-12.94454 -1.12077,-11.81846 11.77723,-11.81846 12.19181,0 10.97595,-1.2603 10.97595,11.37708 0,9.95062 -0.0738,10.48549 -1.52943,11.08845 -0.79455,0.32911 -0.80149,0.34986 -0.89244,2.67044 -0.12523,3.19497 -0.60929,3.76017 -3.12451,3.64827 -2.30007,-0.10233 -2.49047,-0.80008 -0.27445,-1.00578 3.73137,-0.34635 3.23868,-5.0243 -0.52917,-5.0243 -2.64583,0 -2.64583,0 -2.64583,2.91872 0,3.18822 -0.22251,3.6362 -1.39111,2.80074 -0.3263,-0.23327 -0.85723,-0.61546 -1.17984,-0.84931 -0.55591,-0.40294 -0.63859,-0.38229 -1.58164,0.39505 -0.99361,0.81902 -1.42363,0.97665 -1.75644,0.64383 z m 3.04566,-2.64111 c 0.1924,0.0903 0.61772,0.35899 0.94514,0.59708 0.59531,0.43288 0.59531,0.43288 0.59531,-1.71606 0,-2.14894 0,-2.14894 -1.71979,-2.14894 -1.71979,0 -1.71979,0 -1.71979,2.12459 0,2.12459 0,2.12459 0.77465,1.55186 0.42606,-0.31499 0.93207,-0.49883 1.12448,-0.40853 z m 10.21878,-4.90833 c 0.53875,-0.53875 0.44589,-19.09548 -0.0983,-19.63965 -0.36111,-0.36111 -1.55945,-0.41577 -9.11567,-0.41577 -9.36438,0 -9.78906,0.0553 -10.46444,1.36129 -0.50674,0.97993 -0.56155,18.1921 -0.0595,18.69413 0.45532,0.45532 19.2826,0.45532 19.73792,0 z m -15.63102,-4.39605 c -0.2506,-0.0483 -0.45564,-0.31715 -0.45564,-0.59752 0,-0.59697 7.72125,-0.80913 8.08404,-0.22213 0.42956,0.69504 -5.15798,1.29541 -7.6284,0.81965 z m -0.45564,-5.60041 c 0,-0.52077 0.15734,-0.53396 6.3694,-0.53396 5.92362,0 6.36317,0.0324 6.28036,0.46302 -0.14921,0.77599 -12.64976,0.84609 -12.64976,0.0709 z m 0,-5.03188 c 0,-0.5288 0.11593,-0.53743 6.28385,-0.46781 5.37773,0.0607 6.28385,0.12817 6.28385,0.46781 0,0.33965 -0.90612,0.40711 -6.28385,0.46781 -6.16792,0.0696 -6.28385,0.061 -6.28385,-0.46781 z'/%3E%3C/g%3E%3C/svg%3E");
}

.team-credits-header h2 i.material-icons::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.187162 23.005039' fill='%23000000'%3E%3Cg transform='translate(-87.577082,-106.09793)'%3E%3Cpath d='m 88.142253,128.4618 c -0.59186,-0.59186 -0.6105,-0.70767 -0.53187,-3.30392 0.15688,-5.17933 7.4018,-8.03039 14.881127,-5.85609 3.78067,1.09907 6.21476,6.37013 4.15237,8.99204 -0.76142,0.96799 -17.549197,1.12041 -18.501627,0.16797 z m 17.717777,-1.04094 c 2.66467,-4.97898 -5.47463,-9.28497 -13.237977,-7.00338 -3.17698,0.93369 -5.43121,5.39958 -3.63313,7.19766 0.61888,0.61888 16.533997,0.43562 16.871107,-0.19428 z m 3.58118,-0.54656 c -0.38993,-0.63092 0.31443,-0.79375 3.43356,-0.79375 4.25856,0 4.10707,0.0784 4.10707,-2.12467 0,-3.35004 -1.7052,-4.50168 -7.01146,-4.73533 -5.22474,-0.23006 -5.02455,-0.94521 0.26458,-0.94521 6.38963,0 10.64392,4.75357 7.43347,8.30585 -0.55859,0.61807 -7.8655,0.87839 -8.22722,0.29311 z m -13.719047,-9.79663 c -4.10714,-1.23107 -5.35017,-6.21664 -2.30837,-9.25844 2.93521,-2.93521 7.245897,-2.00379 8.958777,1.93575 1.70434,3.9199 -2.512477,8.563 -6.650407,7.32269 z m 3.45007,-1.48951 c 1.376307,-0.6531 2.312837,-2.23075 2.311447,-3.8938 -0.004,-4.17825 -5.153967,-5.9792 -7.669137,-2.68164 -2.78735,3.65441 1.20021,8.5483 5.35769,6.57544 z m 9.475227,0.64891 c -3.37031,-1.1749 -4.18973,-5.67435 -1.45279,-7.97733 4.54984,-3.82843 10.34411,2.80903 6.01358,6.88868 -1.36782,1.28858 -2.92265,1.65971 -4.56079,1.08865 z m 3.33046,-1.60769 c 1.60162,-1.07933 2.03465,-2.98778 1.04588,-4.60942 -1.33793,-2.19428 -4.50433,-2.19428 -5.84226,0 -1.88423,3.09023 1.79867,6.62958 4.79638,4.60942 z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Profil-Modal-Header: gleiches SVG wie der Profil-Eintrag im Menue */
.user-profile-header h2 i.material-icons {
  color: transparent;
  font-size: 1px;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.user-profile-header h2 i.material-icons::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20width=%2231.187162mm%22%20height=%2223.005039mm%22%20viewBox=%220%200%2031.187162%2023.005039%22%20version=%221.1%22%20id=%22svg1%22%20xml:space=%22preserve%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:svg=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%20id=%22defs1%22%20/%3E%3Cg%20id=%22layer1%22%20transform=%22translate(-107.97663,-111.26738)%22%3E%3Cpath%20style=%22fill:%23000000%22%20d=%22m%20108.5418,133.63125%20c%20-0.59186,-0.59186%20-0.6105,-0.70767%20-0.53187,-3.30392%200.15688,-5.17933%207.4018,-8.03039%2014.88113,-5.85609%203.78067,1.09907%206.21476,6.37013%204.15237,8.99204%20-0.76142,0.96799%20-17.5492,1.12041%20-18.50163,0.16797%20z%20m%2017.71778,-1.04094%20c%202.66467,-4.97898%20-5.47463,-9.28497%20-13.23798,-7.00338%20-3.17698,0.93369%20-5.43121,5.39958%20-3.63313,7.19766%200.61888,0.61888%2016.534,0.43562%2016.87111,-0.19428%20z%20m%203.58118,-0.54656%20c%20-0.38993,-0.63092%200.31443,-0.79375%203.43356,-0.79375%204.25856,0%204.10707,0.0784%204.10707,-2.12467%200,-3.35004%20-1.7052,-4.50168%20-7.01146,-4.73533%20-5.22474,-0.23006%20-5.02455,-0.94521%200.26458,-0.94521%206.38963,0%2010.64392,4.75357%207.43347,8.30585%20-0.55859,0.61807%20-7.8655,0.87839%20-8.22722,0.29311%20z%20m%20-13.71905,-9.79663%20c%20-4.10714,-1.23107%20-5.35017,-6.21664%20-2.30837,-9.25844%202.93521,-2.93521%207.2459,-2.00379%208.95878,1.93575%201.70434,3.9199%20-2.51248,8.563%20-6.65041,7.32269%20z%20m%203.45007,-1.48951%20c%201.37631,-0.6531%202.31284,-2.23075%202.31145,-3.8938%20-0.004,-4.17825%20-5.15397,-5.9792%20-7.66914,-2.68164%20-2.78735,3.65441%201.20021,8.5483%205.35769,6.57544%20z%20m%209.47523,0.64891%20c%20-3.37031,-1.1749%20-4.18973,-5.67435%20-1.45279,-7.97733%204.54984,-3.82843%2010.34411,2.80903%206.01358,6.88868%20-1.36782,1.28858%20-2.92265,1.65971%20-4.56079,1.08865%20z%20m%203.33046,-1.60769%20c%201.60162,-1.07933%202.03465,-2.98778%201.04588,-4.60942%20-1.33793,-2.19428%20-4.50433,-2.19428%20-5.84226,0%20-1.88423,3.09023%201.79867,6.62958%204.79638,4.60942%20z%22%20id=%22path3%22%20/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- Intro-Boxen im Modal-Inhalt (.team-header / #knowledge-header):
   vom alten Dunkel-Design auf den hellen Karten-Look umgestellt ---- */
.team-header,
#knowledge-header,
#praxis-updates-header,
#praxis-talks-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .82));
  border: 1px solid rgba(16, 45, 89, .10);
  box-shadow: 0 4px 16px rgba(16, 45, 89, .06);
  backdrop-filter: none;
}

#knowledge-header {
  padding-top: 2rem;
}

.team-header h2,
#knowledge-header h2,
#praxis-updates-header h2,
#praxis-talks-header h2 {
  color: rgba(16, 45, 89, 0.92);
}

.team-header p,
#knowledge-header p,
#praxis-updates-header p,
#praxis-talks-header p {
  color: rgba(16, 45, 89, 0.75);
}

/* ---- Modal-Titelleisten: einheitlich neutral nach Impressum-Vorbild ---- */
.knowledge-base-header,
.team-credits-header,
.user-profile-header {
  /* Layout wie .modal-header (Impressum): zentriert, gleiches Padding */
  padding: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
  /* Neutraler Look statt Theme-Fotos */
  background-image: none;
  background:
    radial-gradient(circle at 100% 140%, rgba(16, 45, 89, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  color: rgba(16, 45, 89, 0.92);
  border-bottom: 3px solid rgba(16, 45, 89, 0.18);
}

.knowledge-base-header h2,
.team-credits-header h2,
.user-profile-header h2 {
  margin: 0;
  color: rgba(16, 45, 89, 0.92);
}

/* ---- Logout-Bestaetigung: Abbrechen-Button war noch
   Dunkel-Design (weiss auf weiss) ---- */
.cancel-logout-button {
  background: #fff;
  color: rgba(16, 45, 89, 0.85);
  border: 2px solid rgba(16, 45, 89, 0.18);
}

.cancel-logout-button:hover {
  background: rgba(16, 45, 89, 0.05);
  border-color: rgba(16, 45, 89, 0.35);
  color: rgba(16, 45, 89, 0.95);
}

/* ---- Impressum/Datenschutz an das helle Modal-Design angleichen ----
   (.modal/.modal-content stammen noch aus dem alten dunklen Design) */
.modal {
  color: rgba(16, 45, 89, 0.88);
  background: radial-gradient(circle at 20% 0%, rgba(103, 200, 181, .14), transparent 34%), radial-gradient(circle at 90% 18%, rgba(95, 168, 211, .13), transparent 32%), linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.modal-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .82));
  border: 1px solid rgba(16, 45, 89, .10);
  box-shadow: 0 24px 60px rgba(16, 45, 89, .09), 0 4px 16px rgba(16, 45, 89, .055);
  backdrop-filter: blur(18px);
}

.modal-header {
  background:
    radial-gradient(circle at 100% 140%, rgba(16, 45, 89, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  color: rgba(16, 45, 89, 0.92);
  border-bottom: 3px solid rgba(16, 45, 89, 0.18);
}

.modal-header .close-modal-button {
  color: rgba(16, 45, 89, 0.7);
}

.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body h5,
.modal-body p,
.modal-body ul,
.modal-body li,
.modal-body address {
  color: rgba(16, 45, 89, 0.88);
}

.modal-body a {
  color: #3f7fa8;
}

#datenschutz-modal table th,
#datenschutz-modal table td {
  border-bottom: 1px solid rgba(16, 45, 89, 0.12);
  padding: 0.4rem 0.6rem;
}

/* ---- Antwort-Optionen: heller Karten-Look statt Standard-Grau ----
   (Die Basis-Regel .answer-option ist in style.css auskommentiert) */
.answer-option {
  background: #fff;
  border: 2px solid rgba(16, 45, 89, 0.14);
  color: rgba(16, 45, 89, 0.88);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: 0 2px 8px rgba(16, 45, 89, 0.05);
}

.answer-option:hover:not(:disabled) {
  background: #fff;
  border-color: rgba(95, 168, 211, 0.6) !important;
  box-shadow: 0 6px 16px rgba(16, 45, 89, 0.12) !important;
  backdrop-filter: none !important;
}

/* Ausgewaehlt: Theme-Blau statt dunklem Marine */
.answer-option.selected {
  background: #5FA8D3;
  color: #fff;
  border-color: #5FA8D3;
  box-shadow: 0 0 0 3px rgba(95, 168, 211, 0.35);
}

/* Buchstaben-Kreise (A/B/C/D) in der Detail-Ansicht:
   heller Look statt schwerem Dunkel-Schatten */
#question-details-content .answer-option::before {
  background: #fff;
  color: rgba(16, 45, 89, 0.85);
  box-shadow: 0 2px 8px rgba(16, 45, 89, 0.18), inset 0 0 0 1px rgba(16, 45, 89, 0.12);
}

/* Kreis der ausgewaehlten Antwort mit einfaerben */
#question-details-content .answer-option.selected::before {
  background: #3f7fa8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 45, 89, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ---- Startseiten-Video: Desktop vom Text umflossen ---- */
.start-video-wrapper {
  float: left;
  width: min(45%, 420px);
  margin: 0.25rem 1.5rem 1rem 0rem;
}

.start-video {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: 0 8px 24px rgba(16, 45, 89, 0.15);
}

/* Intro-Text linksbuendig, damit der Umfluss ruhig wirkt */
.start-container .start-intro {
  text-align: left;
}

/* Float vor Prompt/Buttons beenden */
.start-container .auth-prompt {
  clear: both;
}

/* Praxis-Updates/-Talks-Header wie #knowledge-header stylen (zentriert, Abstand) */
#praxis-updates-header,
#praxis-talks-header {
  text-align: center;
  margin-bottom: 2rem;
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
}

/* ---- Praxis-Updates: Raster mit Video-Platzhaltern ---- */
.praxis-updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.praxis-update-card {
  background: #fff;
  border: 1px solid rgba(16, 45, 89, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(16, 45, 89, 0.05);
  overflow: hidden;
}

/* Laufendes Video: Karte spannt sich ueber die volle Grid-Breite */
.praxis-update-card.expanded {
  grid-column: 1 / -1;
  box-shadow: 0 8px 24px rgba(16, 45, 89, 0.12);
}

.praxis-update-thumb {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, rgba(95, 168, 211, 0.15), rgba(139, 191, 159, 0.15));
  color: rgba(16, 45, 89, 0.40);
}

.praxis-update-thumb .material-icons {
  font-size: 3rem;
}

/* Eingebettete Videos fuellen die Thumbnail-Flaeche
   (.video-js = video.js-Wrapper, video = native Fallback) */
.praxis-update-thumb .video-js,
.praxis-update-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.praxis-update-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(16, 45, 89, 0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}

.praxis-update-title {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(16, 45, 89, 0.88);
}

/* Kennzeichen fuer Videos mit Sichtbarkeit "Vorschau" (nur Vorschau-Benutzer) */
.praxis-preview-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff4e0;
  color: #8a5a00;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hinweis, wenn in einer Sektion gerade kein Video freigeschaltet ist
   (Zeitraeume: admin/videos.php) */
.praxis-updates-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px dashed rgba(16, 45, 89, 0.25);
  border-radius: var(--radius-lg);
  color: rgba(16, 45, 89, 0.60);
  font-size: 0.9rem;
}

/* ---- Glueckwunsch-Video im Profil-Modal ---- */
.profile-congrats-video {
  position: relative; /* Bezug fuer die "Neu"-Markierung */
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 16px rgba(16, 45, 89, 0.10);
}

/* "Neu"-Markierung auf dem Glueckwunsch-Video (nur am Abschluss-Tag,
   gesetzt in displayUserProfile / main.js) */
.profile-congrats-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2; /* ueber dem video.js-Player */
  padding: 2px 10px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none; /* Klicks gehen weiter an den Player */
}

/* ---- Wissen-Modal: neutraler, heller Look ---- */
/* Kategorien als weisse Karten wie auf dem Spielbrett */
.knowledge-category-item {
  background: #fff;
  border: 1px solid rgba(16, 45, 89, 0.10);
  box-shadow: 0 4px 16px rgba(16, 45, 89, 0.06);
  backdrop-filter: none;
}

.knowledge-category-item:hover {
  box-shadow: 0 8px 24px rgba(16, 45, 89, 0.10);
  border-color: rgba(16, 45, 89, 0.22);
}

.knowledge-category-header {
  background: #fff;
  color: rgba(16, 45, 89, 0.88);
}

.knowledge-category-header:hover {
  background: rgba(16, 45, 89, 0.03);
}

/* Kategoriefarben wie auf dem Gameboard (siehe overcast.css) */
.knowledge-category-item[data-category-id="1"],
.knowledge-category-item[data-category-id="3"],
.knowledge-category-item[data-category-id="5"] { --kat-farbe: #e6b84a; }

.knowledge-category-item[data-category-id="2"],
.knowledge-category-item[data-category-id="6"],
.knowledge-category-item[data-category-id="8"] { --kat-farbe: #E76F6A; }

.knowledge-category-item[data-category-id="4"],
.knowledge-category-item[data-category-id="7"] { --kat-farbe: #5fa8d3; }

.knowledge-category-item[data-category-id="9"] { --kat-farbe: #8BBF9F; }

/* Farbiger Balken vor dem Kategorietitel, wie der Pill auf den Karten */
.knowledge-category-header::before {
  content: '';
  flex: 0 0 auto;
  width: 34px;
  height: 6px;
  border-radius: 999px;
  margin-right: 0.75rem;
  background: var(--kat-farbe, rgba(16, 45, 89, 0.25));
  transform: rotate(90deg);
}

/* Aufgeklappte Kategorie: zarte Flaeche in der Kategoriefarbe */
.knowledge-category-item.expanded .knowledge-category-header {
  background: color-mix(in srgb, var(--kat-farbe, #64748b) 14%, white);
  color: rgba(16, 45, 89, 0.92);
}

.knowledge-category-count {
  background: var(--kat-farbe, rgba(16, 45, 89, 0.55));
  color: #fff;
}

.knowledge-category-item.expanded .knowledge-category-count {
  background: color-mix(in srgb, var(--kat-farbe, #64748b) 80%, black);
  color: #fff;
}

/* Fragen-Karten */
.knowledge-question {
  background: #fff;
  border: 1px solid rgba(16, 45, 89, 0.10);
  box-shadow: 0 2px 8px rgba(16, 45, 89, 0.05);
}

.knowledge-question:hover {
  box-shadow: 0 6px 16px rgba(16, 45, 89, 0.10);
  border-color: rgba(16, 45, 89, 0.22);
}

.knowledge-question-header {
  background: rgba(16, 45, 89, 0.02);
  color: rgba(16, 45, 89, 0.88);
}

/* Gesperrte Fragen dezent ausgrauen */
.knowledge-question-locked .knowledge-question-header {
  background: rgba(16, 45, 89, 0.03);
  color: rgba(16, 45, 89, 0.40);
}

.knowledge-question-locked:hover {
  border-color: rgba(16, 45, 89, 0.10);
}

/* Suchfeld */
#knowledge-search {
  background: #fff;
  border: 2px solid rgba(16, 45, 89, 0.12);
  color: var(--color-text);
}

#knowledge-search:focus {
  border-color: rgba(16, 45, 89, 0.35);
}

/* Lupe/Loeschen: kein Kasten, nur Icon */
#knowledge-search-btn,
#knowledge-clear-search {
  background: transparent;
  border: none;
  height: auto;
  padding: 0.4rem;
  color: rgba(16, 45, 89, 0.55);
}

#knowledge-search-btn {
  right: 10px;
}

/* X links neben der Lupe, nicht darauf */
#knowledge-clear-search {
  right: 44px;
}

#knowledge-search-btn:hover,
#knowledge-clear-search:hover {
  background: transparent;
  color: rgba(16, 45, 89, 0.9);
}

/* Mobile: kompletter Header als schwebende runde Bottom-Bar.
   Hier im Inline-Style-Block, damit es unabhaengig von
   mobile.css / Theme-CSS / Cache garantiert greift. */
@media (max-width: 767px) {
  #app > header {
    position: fixed !important;
    top: auto !important;
    bottom: 0.5rem !important; /* Fallback ohne env() */
    bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 100;
    margin: 0 !important;
    padding: 0.3rem 1rem !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--radius-xl) !important;
  }

  /* Seitentitel in der Bar ausblenden */
  #app > header > .header-logo + div {
    display: none !important;
  }

  /* Alte mobile Burger-Toggle-Elemente sicher aus */
  .burger-label {
    display: none !important;
  }

  /* Buttons anzeigen (hebt display:none aus alter mobile.css auf) */
  .header-buttons {
    display: flex !important;
    margin-top: 0 !important;
  }

  /* Logo auf Bar-Hoehe begrenzen */
  #app > header .header-logo .logo-image {
    max-height: 2.6rem;
    width: auto;
  }

  /* Platz am Seitenende, damit die Bar keinen Inhalt verdeckt */
  #game-container {
    padding-bottom: 6rem !important;
  }

  /* Ausgeloggt: der Start-Screen liegt nur position:absolute ueber der
     fixierten Bar. Beim iOS-Rubber-Band am Seitenende schiebt sich das
     Dokument (inkl. Start-Screen) hoch, Bar und Blur-Zone bleiben stehen
     und lugen unten hervor. Solange der Start-Screen sichtbar ist, werden
     beide daher komplett ausgeblendet (sie sind dort ohnehin verdeckt). */
  body:has(#start-screen:not(.hidden)) #app > header,
  body:has(#start-screen:not(.hidden)) #app::after {
    display: none !important;
  }

  /* Blur-Zone "drum rum": verschwommener Bereich hinter und um
     die Bar, der nach oben weich auslaeuft (iOS-Look) */
  #app::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6.5rem;
    z-index: 99; /* unter der Bar (100), ueber dem Inhalt */
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* leichte Aufhellung fuer bessere Lesbarkeit */
    background: linear-gradient(to top, rgba(251, 253, 255, 0.55), rgba(251, 253, 255, 0));
    /* Blur nach oben hin weich ausblenden */
    -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%);
    mask-image: linear-gradient(to top, black 55%, transparent 100%);
  }

  /* iOS zoomt bei Fokus auf Inputs mit Schriftgroesse < 16px
     automatisch rein -> mindestens 16px erzwingen */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Modal-Hintergruende: mobile.css verweist auf ein Theme-Bild
     (/themes/lightcandy/...), das ohne dieses Theme 404 laeuft ->
     transparente, nur-blurry Modals. Stattdessen der helle
     Seiten-Verlauf aus style.css. */
  #question-container,
  #question-details-container,
  #knowledge-base,
  #team-credits-modal,
  #user-profile-modal {
    background: radial-gradient(circle at 20% 0%, rgba(103, 200, 181, .14), transparent 34%), radial-gradient(circle at 90% 18%, rgba(95, 168, 211, .13), transparent 32%), linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%) !important;
  }

  .question-modal-content,
  .knowledge-modal-container,
  .team-credits-content,
  .user-profile-content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Startseiten-Video mobil in voller Breite ueber dem Text */
  .start-video-wrapper {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }

  /* Dropdown klappt ueber der Bottom-Bar nach OBEN auf (per Tap) */
  .burger-dropdown {
    top: auto;
    bottom: 100%;
    padding-top: 0;
    padding-bottom: 10px;
  }
}

/* ============================================================
   Benachrichtigung: Glueckwunsch-Video im Profil verfuegbar
   (Klasse .has-notification wird in main.js gesetzt, wenn alle
   regulaeren Fragen beantwortet sind und die letzte offene Frage
   heute erstmals beantwortet wurde -- sichtbar also nur einmalig
   am Tag des Abschlusses.)
   ============================================================ */

/* Menue-Button: roter Punkt oben rechts. Der Button hat overflow:hidden,
   deshalb liegt der Punkt bewusst innerhalb der Button-Flaeche. */
.header-buttons button#burger-menu.has-notification::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Profil-Eintrag im Dropdown: "Neu"-Pille rechts neben dem Label */
.header-buttons .burger-dropdown-inner button#player-info.has-notification::after {
  content: 'Neu';
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}