/* /* Zuerst die Default-Vorgabe. Sollte inzwischen im Kopf */ /* jeder Seite stehen als: */ /* Farbschema richtig dark: */ [data-theme="dark"] { --colBodyBack: #1E2952; /* die Body-Färbung */ --colMainFont: #eeeeee; /* die Schriftfarbe */ --colRowDark: #1F305E; /* die dunklere und */ --colRowLight: #00009C; /* die hellere Zeile */ --colTblBorders: #caf0f8; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } /* das ist light ... */ [data-theme="light"] { --colBodyBack: #F0F8FF; /* die Body-Färbung */ --colMainFont: #111111; /* die Schriftfarbe */ --colRowDark: #a2d2ff; /* die dunklere und */ --colRowLight: #bde0fe; /* die hellere Zeile */ --colTblBorders: #023e8a; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } [data-theme="darkGreen"] { --colBodyBack: #111111; /* die Body-Färbung */ --colMainFont: #eeeeee; /* die Schriftfarbe */ --colRowDark: #2f3e46; /* die dunklere und */ --colRowLight: #354f52; /* die hellere Zeile */ --colTblBorders: #84a98c; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } /* Theme "Coastal - von coolors.co! */ [data-theme="darkCoastal"] { --colBodyBack: #111111; /* die Body-Färbung */ --colMainFont: #e0fbfc; /* die Schriftfarbe */ --colRowDark: #293241; /* die dunklere und */ --colRowLight: #3d5a80; /* die hellere Zeile */ --colTblBorders: #ffb703; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } /* das ist dann in braun ... */ [data-theme="darkBrown"] { --colBodyBack: #210e00; /* die Body-Färbung */ --colMainFont: #eeeeee; /* die Schriftfarbe */ --colRowDark: #341900; /* die dunklere und */ --colRowLight: #422000; /* die hellere Zeile */ --colTblBorders: #DE3163; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } /* die Vorgaben global: */ root:: { --colBodyBack: #1E2952; /* die Body-Färbung */ --colMainFont: #eeeeee; /* die Schriftfarbe */ --colRowDark: #1F305E; /* die dunklere und */ --colRowLight: #00009C; /* die hellere Zeile */ --colTblBorders: #caf0f8; /* die Ränder - bzw. DIE Kontrastfarbe, auch für die Großbuchstaben - wichtig ! */ --colDivBack: #3042cf; /* mormaler Textbereich ... */ --colTblFooter: #28beff; /* der Table-Fußbereich */ } body { background-color: var(--colBodyBack); color: var(--colMainFont); margin: 0 auto; font-size: 1.2rem; transition: background-color 0.5s ease, color 0.5s ease; min-height: 100vh; } p { margin-bottom: 0.7rem; border-radius: 10px; padding: 1px 3px; padding-bottom: 1px; } /* Erster Buchstabe: Kapital !! */ .ErsterBuchstabeGross:first-letter { font-size: clamp(1.7rem, 4vw, 3rem); color: var(--colTblBorders); font-weight: bold; padding-right: 0.05rem; } h3 { font-size: clamp(1.5rem, 3vw, 2.6rem); } li { list-style: none; list-style-type: disc; padding: 30px auto; padding-right: 30px; /* font-size: 1.25rem; */ } a { color: var(--colTblBorders); font-weight: bold; text-decoration-line: none; } a:hover { text-decoration-line: none; } a::after { content:'→'; } #Filters { padding-bottom: 10px; } select, input, #filter-clear { color: var(--colTblBorders); font-weight: bold; background-color: var(--colBodyBack); border: solid 1px var(--colTblBorders); border-radius: 8px; font-size: 1.1rem; height: 2rem; margin-right: 10px; } #filter-field { width: 240px; } #filter-type { width: 80px; } input { width: 80px; } #filter-clear{ right: 10px; /* padding: -0.5rem: */ /* margin-bottom: -10px; */ } #filter-clear:hover { background-color: var(--colTblBorders); color: var(--colBodyBack); } /* *** Ende Filtering *** */ .container-circle { margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; } /* Main Section */ .wrapper { display: flex; } .main { flex: 5; display: flow-root; } .main p { font-size: 1rem; margin-bottom: .75rem; } .circle { width: 250px; height: 250px; background-image: url("../img/DerHirsch250.jpg"); float: left; border-radius: 50%; shape-outside: circle(50%); margin-right: 12px; } article { display: flow-root; } .GecksoSVG { width: 256px; height: 256px; float: left; shape-outside: url("../img/Logo/Geckso256.png"); /* shape-outside: url("../img/Geckso256.webp"); */ shape-margin: 2rem; /* margin-right: 12px; */ } .right { float: right; margin-left: 12px; margin-right: 0; } /* nur noch etwas kleiner machen das Bild, damit der Rand verschwindet */ .DynaRed { width: 238px; height: 238px; background-image: url("../img/DynaRed.jpg"); border: none; } .DynaWeiss { width: 239px; height: 239px; background-image: url("../img/DynaWeiss.jpg"); } .big { width: 350px; height: 350px; background-image: url("../img/Draussen350.jpg"); } .Viern { width: 350px; height: 350px; background-image: url("../img/ViernKarte.jpg"); } iframe { width: 100%; height: 98%; /* resize: both; */ border-radius: 10px; border-color: var(--colTblBorders); color: var(--colMainFont); } .marquee { color: var(--colMainFont); font-size: 24px; font-family: Arial; } .rounded { border-radius: 10px; font-family: inherit; font-weight: inherit; font-size: inherit; } /* ** Die Section für die Web Awesome's !! ** */ .gradient-button::part(base) { background: linear-gradient(217deg, var(--colRowDark), var(--colTblBorders)); /* border: solid 1px var(--colTblBorders); */ transition: transform 100ms, box-shadow 100ms; } .gradient-button::part(base):hover { box-shadow: var(--colTblBorders); transform: translateY(-5px); } .gradient-button::part(base):active { box-shadow: inset var(--wa-shadow-s); transform: translateY(0); } .gradient-button::part(label) { color: var(--colBodyBack); } /**/ button.primary { background-color: var(--colRowLight); padding: 0.5rem 2rem; margin-right: 1rem; margin-bottom: 1.5rem; border-radius: 0.6rem; border: none; color: var(--colMainFont); cursor: pointer; } button.primary:hover { background-color: var(--colRowDark); color: var(--colTblBorders); border: 1px solid var(--colTblBorders); } /* Für alle Pop-Overs gemeinsam: Eine Class: */ /* Farbgebung invertiert: Rahmen gleich !! */ .poppy { background-image: linear-gradient( 180deg, var(--colTblBorders), var(--colMainFont), var(--colMainFont) ); border-radius: 1rem; border: 4px solid var(--colRowDark); color: var(--colBodyBack); padding: 1rem; max-width: 750px; } .poppy h3 { margin-top: 0.5rem; text-align: center; } .poppy p { /* color: #666; */ } .poppy button.primary { width: 30%; } /* ************ Poppinger !!******** */ /* Ab hier die vielen einzelnen Pop-Overs! */ #PopNo1 { max-width: 400px; } /* Der hübsche Hintergrund, während das Pop-Over angezeigt wird */ /* Damit jeder merkt, daß der Rest der Seite grad nicht aktiv ist */ /* Aktuell nur 4 pro Seite damit ichs merke wenns zuviele werden */ #PopNo1::backdrop, #PopNo2::backdrop, #PopNo3::backdrop, #PopNo4::backdrop { background-image: linear-gradient( 30deg, var(--colTblBorders), var(--colBodyBack), var(--colTblBorders) ); opacity: 0.75; } /* ============================================ */ /* TABULATOR TABLES - Nested Base Styling */ /* ============================================ */ .tabulator-row { max-height: 24px; background-color: var(--colRowLight); color: var(--colMainFont); &.tabulator-row-even { background-color: var(--colRowDark); } } .tabulator { .tabulator-row:hover { background-color: var(--colTblBorders); color: var(--colBodyBack); font-weight: bold; } .tabulator-header { position: relative; box-sizing: border-box; width: 100%; border-bottom: 2px var(--colMainFont); background-color: var(--colRowDark); color: var(--colMainFont); font-weight: bold; white-space: nowrap; overflow: hidden; user-select: none; .tabulator-col { display: inline-block; position: relative; box-sizing: border-box; background-color: var(--colRowDark); color: var(--colMainFont); border-right: 1px solid var(--colTblBorders); &-content:hover { background-color: var(--colTblBorders); color: var(--colBodyBack); } } .headertooltip { font-size: 18px; color: var(--colBodyBack); } } .tabulator-header-filter { background-color: var(--colBodyBack); height: 15px; } .tabulator-footer { padding: 5px 10px; background-color: #000000; text-align: right; color: #fff; font-weight: bold; white-space: nowrap; display: none; /* Hidden by default for all tables */ } } /* ============================================ */ /* ALL THE TABLE HOLDERS - Shared Base Styling */ /* ============================================ */ [id^="Holder"] { border: 1px solid var(--colTblBorders); border-radius: 10px; padding: 10px; margin-bottom: 20px; } /* ============================================ */ /* TABLE HOLDERS - Individual Heights */ /* ============================================ */ #HolderPlayerWisch { max-height: 95vh; padding-bottom:10px; /* nur bei diesem einen: */ /* Footer gesondert formatiert */ .tabulator { .tabulator-footer { /* background-color: #800000; */ /* border: 1px solid var(--colTblBorders); */ /* border-radius: 10px; */ } .tabulator-headers { background-color: var(--colRowDark); color: var(--colMainFont); } } } #HolderNations { max-height: 90vh; } #HolderKonti { max-height: 200px; } #HolderLigen2010 { max-height: 89vh; } #HolderELigen2010 { max-height: 89vh; } #HolderNat32 { max-height: 500px; } #HolderWEG { max-height: 375px; } #HolderWEGmass { max-height: 375px; } #HolderUnterschiede { max-height: 75vh; } #HolderLinx { max-height: 95vh; } /* *** End of nested tabulator rules *** */ #LinkInButton { font-size: 1.2rem; color: var(--colTblBorders); font-weight: bold; font-underline: none; } /* Jetzt wieder da: der Toggler! */ #themeSwitcher { position: fixed; top: 20px; right: 50px; z-index: 10000; } #themeToggle { position: absolute; top: 5; right: 5; width: 36px; height: 36px; border-radius: 50%; background: var(--colRowLight); border: none; cursor: pointer; transition: transform 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } #themeToggle:hover { transform: scale(1.1); } #themeMenu { position: absolute; top: 0; right: 0; width: 120px; height: 120px; border-radius: 50%; background: var(--colBodyBack); border: 2px solid var(--colTblBorders); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; } #themeMenu.active { display: flex; } .theme-options { position: relative; width: 100%; height: 100%; } .theme-option { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--colTblBorders); border: none; cursor: pointer; transition: transform 0.2s ease; left: 50%; top: 50%; } .theme-option:hover { transform: scale(1.2); } /* Äquidistante Verteilung: 5 Punkte im Kreis, startend bei -90° (oben) */ .theme-option[data-theme="dark"] { transform: translate(-50%, -50%) rotate(-90deg) translateX(45px) rotate(90deg); } .theme-option[data-theme="darkGreen"] { transform: translate(-50%, -50%) rotate(-18deg) translateX(45px) rotate(18deg); } .theme-option[data-theme="darkCoastal"] { transform: translate(-50%, -50%) rotate(54deg) translateX(45px) rotate(-54deg); } .theme-option[data-theme="darkBrown"] { transform: translate(-50%, -50%) rotate(126deg) translateX(45px) rotate(-126deg); } .theme-option[data-theme="light"] { transform: translate(-50%, -50%) rotate(198deg) translateX(45px) rotate(-198deg); } .theme-option:hover[data-theme="dark"] { transform: translate(-50%, -50%) rotate(-90deg) translateX(45px) rotate(90deg) scale(1.2); } .theme-option:hover[data-theme="darkGreen"] { transform: translate(-50%, -50%) rotate(-18deg) translateX(45px) rotate(18deg) scale(1.2); } .theme-option:hover[data-theme="darkCoastal"] { transform: translate(-50%, -50%) rotate(54deg) translateX(45px) rotate(-54deg) scale(1.2); } .theme-option:hover[data-theme="darkBrown"] { transform: translate(-50%, -50%) rotate(126deg) translateX(45px) rotate(-126deg) scale(1.2); } .theme-option:hover[data-theme="light"] { transform: translate(-50%, -50%) rotate(198deg) translateX(45px) rotate(-198deg) scale(1.2); } /* Transition Overlay */ #transitionOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; pointer-events: none; z-index: 9999; transition: opacity 0.75s ease; } #transitionOverlay.active { opacity: 1; } /* Animation für das Menu */ @keyframes spinToSelection { 0% { transform: rotate(0deg) scale(1); } 70% { transform: rotate(720deg) scale(1); } 85% { transform: rotate(var(--final-rotation, 720deg)) scale(1); opacity: 1; } 100% { transform: rotate(var(--final-rotation, 720deg)) scale(0.3); opacity: 0.3; } } #themeMenu.spinning { animation: spinToSelection 2s ease-in-out forwards; } /* Ende des Togglers! */ /* ***** Neu: Für die Toasts ! ********* */ .neon { background: #111; color: #0f0; border: 1.5px solid #0f0; text-shadow: 0 0 4px #0f0; box-shadow: 0 0 6px rgba(0, 255, 0, 0.15), 0 0 12px rgba(0, 255, 0, 0.1); } .modern-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.95rem; padding: 0.75rem 1rem; background: #2a2b2c; border: 1.5px solid #444; border-radius: 10px; color: white; cursor: pointer; transition: all 0.2s ease; } .modern-btn i { font-size: 1.1rem; } .modern-btn:hover { background: #333; border-color: var(--colTblBorders); } .modern-btn.active { border-color: var(--colTblBorders); box-shadow: 0 0 8px #0ff; background: #2a2b2c; color: var(--colTblBorders); .btn-wrap { display: flex; justify-content: center; margin-top: 4rem; } @keyframes slide { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes zoom { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } } /* ******** Responsives ! *********** */ /* Beim Drucken nur relevante Teile zeigen: */ @media print { .site-header, .site-footer { display: none; } } /* Bootstraps Definition der Grenzen für die Screen-Breiten: */ /* .col- (extra small devices - screen width less than 576px) */ /* .col-sm- (small devices - screen width equal to or greater than 576px) */ /* .col-md- (medium devices - screen width equal to or greater than 768px) */ /* .col-lg- (large devices - screen width equal to or greater than 992px) */ /* .col-xl- (xlarge devices - screen width equal to or greater than 1200px) */