/*3/4 Chat-GPT - 1/4 Ich*/

/* Allgemeine Formatierung */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Hellgrauer Hintergrund */
    color: #000000;
}

@media (prefers-color-scheme: light) {
    .tab button:hover {
    background-color: #ddd; 
    }
    .tab button {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Abhebung mit Box-Schatten */
    background-color: #ffffff;
    }
    .tab button.active {
        background-color: #ccc;
    }
    .dropdown:hover .dropbtn {
        background-color: #ddd;
    }
    .dropdown_content a:hover {
        background-color: #f1f1f1;

    }
    .dropdown_content {
        background-color: #ffffff;
    }
    .container {
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); /* Schatten um den Container */
    }

    .kmlinks{
        background-color: #ffffff;
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* Horizontale und vertikale Verschiebung, Unschärfe und Farbe des Schattens */    
    }
    
    .kmcontainer button:hover {
        background-color: #ddd; 
    }
    .kmcontent {
     
        
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.037); /* Schatten um den Container */
    }
    #abrechnungstabelle tr {
        border-bottom: 1px solid #000000; /* Hinzufügen einer Linie unter jeder Zeile */
    }
    .kmlinks:hover {
        background-color: #e0e0e0; /* Hintergrundfarbe beim Hovern */
    }
    .cookie-popup{
        background: #ffffff;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(255,255,255,0.1);
    }
    #second-popup{
        background: #ffffff;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(255,255,255,0.1);
    }
    .cookie-popup button.reject-btn{
        color: #dfdfdf; /* Grau */
    }
    #own-select-btn{
        color: #dfdfdf; /* Grau */ 
    }
    .tooltip .tooltiptext {
        color: #ffffff;
    }


}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #ffffff;
    }
    a {
        color: #008cff; /* Linkfarbe im Dark Mode (Gelb) */
      }
    
    input {
        background-color: #333; /* Dunkle Hintergrundfarbe */
        color: #fff; /* Weiße Textfarbe */
        border-color: #666; /* Dunklerer Rahmen */
    }
    select {
        background-color: #333; /* Dunkle Hintergrundfarbe */
        color: #fff; /* Weiße Textfarbe */
        border-color: #666; /* Dunklerer Rahmen */
    }
    #abrechnungstabelle tr {
        border-bottom: 1px solid #ffffff; /* Hinzufügen einer Linie unter jeder Zeile */
    }
    .tab button {
        color: #ffffff;
        background-color: #333;
        box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.1); /* Abhebung mit Box-Schatten */
    }
    .tab button:hover {
        background-color: #404040;
    }
    .tab button.active {
        background-color: #404040;
    }
    .dropbtn:hover{
        background-color: #404040;
    }
    .dropdown:hover .dropbtn {
        background-color: #404040;
    }
    .dropdown_content a:hover {
        background-color: #404040;
    }
    .dropdown_content {
        background-color: #333;
    }
    .container {
        box-shadow: 0px 0px 10px 0px rgba(255, 255, 255); /* Schatten um den Container */
    }
    .kmcontent {
     
        box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.037); /* Schatten um den Container */
    }
    .kmlinks{
        color: #ffffff;
        background-color: inherit;
        box-shadow: 0px -2px 4px rgba(255, 255, 255, 0.1); /* Horizontale und vertikale Verschiebung, Unschärfe und Farbe des Schattens */    
    }
    .kmlinks:hover {
        background-color: #404040;
    }
    .cookie-popup{
        background: #333;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    #second-popup{
        background: #333;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .cookie-popup button.reject-btn{
        color: #777; /* Grau */
    }
    #own-select-btn{
        color: #777; /* Grau */ 
    }

}


    


/* Container für den Inhalt zentrieren */
.container {
    display: flex;
    width: 80%; /* Breite auf 80% erhöhen */
    margin: 0 auto;
    padding: 20px;
    justify-content: center;
    align-items: center;


    border-radius: 8px;
    align-items: center;
}

  
/* Container für die Buttons */
.tab {
    overflow: hidden;
    border: none;

    display: flex;
    justify-content: center; /* Zentriert die Inhalte horizontal */
    align-items: center; /* Zentriert die Inhalte vertikal */
    padding-bottom: 10px; /* Platz am unteren Rand für den Zurück-Link */
}

/* Style für die Buttons */
.tab button {
    /* Bestehender Style */
   

    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: background-color 0.3s, transform 0.2s; /* Übergang für Hover-Effekt */
    margin: 0 5px;
  
}


.tab button:hover {
  
    transform: translateY(2px); /* Eindrückungseffekt nach unten */
}



/* Tabellenknöpfe */
.tablinks {
 

    padding: 10px 15px;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tablinks:hover {
    background-color: #e0e0e0;
}

/* Aktiver Tabellenknopf */
.tablinks.active {
    border-bottom: 2px solid #ff0000;
}

/* Tab-Inhalte */
.tabcontent {
    display: none;
    padding: 40px;
    border: none;
    border-top: none; /* Entfernen der oberen Border */
    border-radius: 4px;
    align-self: flex-start; /* Ausrichtung oben */
    align-items: center;
}

/* Aktiver Tab-Inhalt */
.tabcontent.active {
    display: block;
    background-color: #f9f9f9;
}

/* Spezifische Formatierung für die Seite */
h1 {
    text-align: center;

    font-size: 36px; /* Größere Schriftgröße für Überschrift */
}

/* Eintrag Seite */
#Eintrag {
    display: block;
}


/* Information abrufen Seite */
.inf {
    margin-bottom: 20px;
    display: flex;
    align-items: center; /* Zentrierung vertikal */
}

/* Style für die Labels neben den Radio-Buttons */
.inf label {
    margin-right: 10px;
    text-align: center; /* Zentrierung des Texts */
    flex: 1; /* Flex-Grow-Eigenschaft, um den Text zu strecken */
}



/* Inhaltsbereich */
.infcontent {
    display: none;
    padding: 20px;
    border: none;
    border-radius: 4px;
    margin-top: 10px; /* Abstand nach oben hinzufügen */
}

/* Aktiver Inhaltsbereich */
.infcontent.active {
    display: block;
    background-color: #f9f9f9;
}

/* Radio Buttons */
.inflink {
    margin-right: 10px;
    align-items: center;
    display: flex; /* Flexbox verwenden */
    justify-content: center; /* Zentrierung horizontal */
    align-items: center; /* Zentrierung vertikal */
}


/* Überschrift */
h2 {
    text-align: center;

    font-size: 24px;
    margin-bottom: 20px;
}

/* Labels für Eingabefelder */
label {
    font-weight: bold;
    display: block; /* Jedes Label in einer neuen Zeile */
}

/* Eingabefelder */
input[type="date"],
input[type="datetime-local"],

input[type="number"],
select {
    padding: 8px;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    width: 100%;
    border: none;
}
/* Tabellen mit der ID "abrechnungstabelle" */
#abrechnungstabelle {
    border-collapse: collapse;
    width: 100%;
}


/* Tabellenüberschriften für die Tabelle mit der ID "abrechnungstabelle" */
#abrechnungstabelle th {

    padding: 10px; /* Innenabstand */
    text-align: center; /* Links ausrichten */
}

/* Tabellenspalten für die Tabelle mit der ID "abrechnungstabelle" */
#abrechnungstabelle td {
    padding: 10px; /* Innenabstand */
    text-align: center; /* Zentrierte Ausrichtung */
}

/* Tabellen-Header für Datum für die Tabelle mit der ID "abrechnungstabelle" */
#abrechnungstabelle th:first-child,
#abrechnungstabelle td:first-child {
    text-align: center; /* Zentrierte Ausrichtung */
}

table td {
    padding: 8px;
    border: none;
    text-align: center; /* Zentrierung des Texts */
}

/* Border zwischen dem zweiten und dritten tr */
#Kilometer-Eintrag tr:nth-child(2) {
    border-bottom: 1px solid #ddd;
}

/* Submit-Button */
input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50; /* Grün für den Submit-Button */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block; /* Vollständige Breite */
    margin: 0 auto; /* Zentrierung */
    transition: background-color 0.3s; /* Übergang für Hover-Effekt */
}

input[type="submit"]:hover {
    background-color: #45a049; /* Dunkleres Grün beim Hover */
}
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer; /* Zeige die Hand als Cursor, um anzudeuten, dass es anklickbar ist */
}

.tooltip .tooltiptext {
    visibility: hidden; /* Verstecke den Tooltip standardmäßig */
    width: 200px;
    background-color: #555;

    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px; /* Zentriere den Tooltip horizontal */
    opacity: 0; /* Standardmäßig nicht sichtbar */
    transition: opacity 0.3s; /* Füge eine sanfte Übergangseffekt hinzu */
}

.tooltip:hover .tooltiptext {
    visibility: visible; /* Zeige den Tooltip beim Überfahren */
    opacity: 1; /* Mach den Tooltip sichtbar */
}
.superscript {
    position: relative;
  }

  .superscript sup {
    position: absolute;
    top: -0.5em; /* Ändern Sie den Wert je nach Bedarf, um die gewünschte Position zu erreichen */
    font-size: 0.5em; /* Ändern Sie die Schriftgröße des hochgestellten Elements */
  }


.rechnung_wiedergabe {
    display: flex;
    align-items: center;
    justify-content: center; /* Optional: Zentriere auch horizontal */
    height: 5px; /* Ändern Sie die Höhe entsprechend */
}

#Fahrten_Zurücksetzen_submit {

    padding: 10px 20px;
    background-color: #ff0000; /* Grün für den Submit-Button */

    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block; /* Vollständige Breite */
    margin: 0 auto; /* Zentrierung */
    transition: background-color 0.3s; /* Übergang für Hover-Effekt */
}
#Fahrten_Zurücksetzen_submit:hover {
    background-color: #cf0000; /* Dunkleres Grün beim Hover */
}


/* Style für die Buttons */
/* Dropdown-Button-Stil */
.dropbtn {
   

    padding: 10px 15px;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin: 0 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s; /* Hinzufügen der Transition */
   
}

.dropbtn:hover {
  
    transform: translateY(2px); /* Eindrückungseffekt nach unten */
}

  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown_content {
    display: none;
    position: fixed; /* Änderung der Positionierung */
  
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

  
  .dropdown_content a {

    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
 
  
  .dropdown:hover .dropdown_content {
    display: block;
}
  
/* Container für die kmlinks-Buttons */
.kmcontainer {
    display: flex;
    justify-content: center; /* Zentriert die Buttons horizontal */
}

/* Style für die kmlinks-Buttons */
.kmlinks {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 15px; /* Angepasst an den Stil der tablinks */
    transition: background-color 0.3s, transform 0.2s; /* Übergang für Hover-Effekt */
    margin: 0 5px;
}



/* Aktiver kmlinks-Button */
.kmlinks.active {
    border-bottom: 2px solid #ff0000; /* Stil des aktiven tablinks */
}
.kmcontent{
    
      
 
        display: flex;
        justify-content: center;

        padding: 10px; /* Innenabstand des Containers */
        margin-bottom: 20px; /* Abstand zum nächsten Element */
    
    
    
        border-radius: 8px;
        align-items: center;
    
}
.preset_return {
    display: flex;
    justify-content: center; /* Zentriere horizontal */
    align-items: center; /* Zentriere vertikal */
    text-align: center;
    height: 5px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparentes Schwarz */
    z-index: 1000; /* Über allen anderen Elementen */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Popup-Stil */
.cookie-popup {
    
    padding: 20px;
    
    border-radius: 5px;
    
    max-width: 400px;
    text-align: center;
    position: relative;
}

/* Buttons im Popup */
.cookie-popup button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    font-size: 16px;
}

.cookie-popup button.accept-btn {
    background-color: #4CAF50; /* Grün */
    color: white;
}

.cookie-popup button.reject-btn {
    background-color: transparent; /* Transparent */
    
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
    font-size: 10px;
    margin-top: 5px;
}



/* Stil für das zweite Popup */
#second-popup {
    display: none;
   
    padding: 20px;
    
    border-radius: 5px;
    
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1100; /* Über dem ersten Popup */
}

.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.toggle-label {
    display: inline-block;
    margin-right: 10px;
}

.toggle-checkbox {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    cursor: pointer;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle-checkbox:checked + .toggle-slider {
    background-color: #4CAF50; /* Grün */
}

.toggle-checkbox:checked + .toggle-slider:before {
    left: calc(100% - 19.2px);
}

/* Stil für accept-all-btn */
#accept-all-btn {
    background-color: #4CAF50; /* Grün */
    color: white;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
    font-size: 16px;
    margin-top: 10px;
}
#own-select-btn{
    background-color: transparent; /* Grün */

    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
    font-size: 10px;
    margin-top: 5px;
}
@media only screen and (max-device-width: 600px) and (orientation: portrait) {
   
    body {
        transform: scale(1.75);
        transform-origin: top center;
        font-size: 1.5vw; 
        margin: 0;
        width: 100%;
        
        
      
      }
      .container{

        width: 50%;
        max-width: 1200px;
        height: 77%;
        margin: 0 auto; /* Margin der Kinder entfernen */
        padding: 0; /* Padding der Kinder entfernen */
      
        box-sizing: border-box; /* Behalte das Border- und Padding-Box-Modell bei */
      }
}
    /* Füge weitere Anpassungen für andere Elemente hinzu */