Geht jetzt ohne Bootstrap/jquery

public/stylesheets/style.css

@@ -261,15 +261,6 @@ footer #author #versn {
     display: none;
   }
 }
-.nav-tabs .nav-item .nav-link {
-  background-color: #2D6AF8;
-  color: #FFF;
-}
-
-.nav-tabs .nav-item .nav-link.active {
-  color: #2D6AF8;
-  background-color: #FFFFFF;
-}
 
 #stday, #nbday, #pklim, #odth {
   display: none;
@@ -298,4 +289,199 @@ footer #author #versn {
 
 .errdiv {
   display: none;
-}/*# sourceMappingURL=style.css.map */
+}
+
+/* Button Styles */
+button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+button:hover {
+  background-color: #e9ecef;
+}
+
+button:active {
+  background-color: #dee2e6;
+}
+
+#btnSet, #btnHelp {
+  background-color: #2D6AF8;
+  color: white;
+  border-color: #2D6AF8;
+}
+
+#btnSet:hover, #btnHelp:hover {
+  background-color: #1e5ae8;
+}
+
+#btnMyLocation {
+  background-color: white;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 2px;
+  background-color: #f1f1f1;
+  border-bottom: 1px solid #ccc;
+  padding: 0;
+  margin: 0 0.5vw;
+}
+
+.tab-button {
+  background-color: #2D6AF8;
+  color: white;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.tab-button:hover {
+  background-color: #1e5ae8;
+}
+
+.tab-button.active {
+  background-color: white;
+  color: #2D6AF8;
+  border-bottom: 2px solid white;
+}
+
+.tab-content {
+  display: block;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* Dialog Styles */
+dialog {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  max-width: 600px;
+  width: 90%;
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.dialog-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  opacity: 0.5;
+}
+
+.dialog-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.dialog-body {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: 60vh;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.dialog-button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.dialog-button.primary {
+  background-color: #2D6AF8;
+  color: white;
+  border-color: #2D6AF8;
+}
+
+.dialog-button.primary:hover {
+  background-color: #1e5ae8;
+}
+
+.dialog-button.secondary {
+  background-color: #6c757d;
+  color: white;
+  border-color: #6c757d;
+}
+
+.dialog-button.secondary:hover {
+  background-color: #5a6268;
+}
+
+/* Radio buttons */
+.radio-group {
+  display: flex;
+  gap: 15px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.radio-label input[type="radio"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=style.css.map */