/*
 * This file is part of ClubCash.
 *
 * ClubCash is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License,
 * or (at your option) any later version.
 *
 * ClubCash is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with ClubCash. If not, see <https://www.gnu.org/licenses/>.
 */


/* ============================================
   NEU und unsortiert - hier werden die neuen Styles hinzugefügt
   ============================================ */
#alter-zaehlerstand {
    font-size: 5cqw;
    color: var(--error-color);
    font-weight: bold;
    text-align: center;
    margin: 1cqw;
}

.abrechnungstabelle {
    width: 100%;
    border-spacing: 0.5cqw;
    font-size: 2.5cqw;
}   


/* ============================================
   FONTS
   ============================================ */

@font-face {
    font-family: 'Carlito';
    src: url('../grafik/carlito-v3-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ============================================
   GRUNDLEGENDE ELEMENTE
   ============================================ */

body {
    font-family: 'Carlito', sans-serif;
    color: var(--text-color-dark);
    margin: 0;
}

h1 {
    margin: 0;
    text-align: center;
}

h2 {
    text-align: left;
    font-size: 4cqw;
    font-weight: bold;
    margin: 3cqw 0 0 0;
}

p {
    font-size: 2cqw;
}

p.infortext {
    font-size: 2.5cqw;
    color: var(--text-color-dark);
}

a {
    text-decoration: none;
    cursor: pointer;
}

button {
    font-size: 2.2cqw;
    height: 7cqw;
    width: 22cqw;
    font-weight: bold;
    background-color: var(--button-color);
    border: none;
    border-radius: 1cqw;
    color: var(--text-color-dark);
    margin: 0.3cqw;
}

button:hover {
    background: var(--button-hover);
}

button:disabled {
    background-color: var(--border-color);
    color: var(--text-color-dark);
    cursor: not-allowed;
    opacity: 0.6;
}

th {
    background-color: var(--border-color);
    color: var(--text-color-dark);
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 2cqw;
}


/* ============================================
   LAYOUT
   ============================================ */

#display {
    background-color: var(--background-light);
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    height: 100vh;
    max-width: calc(100vh * 5 / 3);
    width: 100%;
    justify-content: center;
    justify-items: center;
    align-items: start;
    container-type: inline-size;
}

#linkeSpalte {
    display: flex;
    flex-direction: column;
    max-height: 100cqh;
    min-height: 100cqh;
}

.box_zentrieren {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: auto;
}

.box_zentrieren_fullheight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 100%;
}


/* ============================================
   NAVIGATION / MENÜ
   ============================================ */

#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-dark);
    position: absolute;
    margin: 1.5cqw;
    left: 0;
}

.menu-icon {
    display: block;
    cursor: pointer;
    font-size: 2.5cqw;
}

.menu {
    flex-direction: column;
    background: var(--background-light);
    position: absolute;
    top: 4.5cqw;
    left: -2cqw;
    text-align: center;
    border: solid 1px var(--border-color);
    border-top: none;
    border-bottom-left-radius: 1cqw;
    border-bottom-right-radius: 1cqw;
    z-index: 10;
    transform-origin: top;
    transition: transform 0.3s ease-out;
    transform: scaleY(0);
    width: 28cqw;
}

.menu button {
    background: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    width: 26cqw;
    cursor: pointer;
    font-size: 1.8cqw;
    border-radius: 1cqw;
    margin: 0.5cqw;
    height: 5cqw;
}

.menu button:hover {
    background: var(--tertiary-color);
}

.menu.active {
    transform: scaleY(1);
    width: 28cqw;
}

.menubuttondown {
    font-size: 2cqw;
}

#menubar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 2.5cqw;
}


/* ============================================
   LOGO & HEADER
   ============================================ */

#logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-bild {
    width: 15cqw;
    padding: 1cqw;
}

#vereinsnamen {
    font-size: 1em;
    text-align: left;
    margin: 0;
    padding: 0;
}


/* ============================================
   DIREKTWAHL
   ============================================ */

#direktwahl {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

#direktwahl button {
    font-weight: bold;
    background-color: var(--button-color);
    border: none;
    border-radius: 1cqw;
    color: var(--text-color-dark);
    width: 29cqw;
    height: 6cqw;
}

#direktwahl button:hover {
    background: var(--button-hover);
}


/* ============================================
   DATENFELD / WARENKORB
   ============================================ */

#datenfeld {
    overflow: auto;
    border: 1px solid var(--border-color);
    padding: 1cqw;
    margin: 1cqw;
    background-color: var(--text-color-light);
    border-radius: 1cqw;
    flex: 1 1 auto;
    min-height: 0;
    width: 70cqw;
    height: 100%;
}

#warenkorbtabelle {
    width: 100%;
    flex: 1;
    border-spacing: 0.5cqw;
    font-size: 2cqw;
}

#warenkorb-initial-message {
    height: 4cqw;
    font-size: 3cqw;
}

#summenkasten {
    align-items: center;
    font-weight: bold;
    font-size: 5cqw;
    width: 22cqw;
    text-align: center;
    position: absolute;
    bottom: 0;
    margin: 0 0 1cqw 0;
}

#Namenfeld {
    background-color: var(--border-color);
    font-weight: bold;
    text-align: left;
    padding: 5px;
    position: sticky;
    top: 0;
    z-index: 1;
}


/* ============================================
   STATUSFELD & COPYRIGHT
   ============================================ */

#statusfeld {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: var(--text-color-dark);
    padding: 0;
    font-size: 4cqw;
    height: 5cqw;
}

#copyright {
    height: 4cqw;
}

#copyright-text {
    margin: 0;
    font-size: 2.5cqw;
}

#terminal-info-text {
    margin: 0;
}

#offlineFenster {
    visibility: hidden;
}

#offline-status-text {
    padding: 1cqw 0;
    margin: 0;
    color: var(--warning-color);
    font-size: 2.5cqw;
}


/* ============================================
   TASTATUR
   ============================================ */

#tastatur {
    display: none;
    width: 22cqw;
    position: fixed;
    background: var(--text-color-light);
    left: 76cqw;
    top: 20cqw;
    border: solid 1px;
    height: 34cqw;
    padding: 0.5cqw;
    border-radius: 1cqw;
}

#tastatur button {
    width: 5cqw;
    height: 5cqw;
    font-size: 3cqw;
    padding: 0;
}

.tastaturtabelle {
    width: 22cqw;
    border-spacing: 1cqw;
    font-size: 4cqw;
    font-weight: bold;
}

.tastaturtabelle td {
    width: 5cqw;
    height: 5cqw;
    border-spacing: 2cqw;
    vertical-align: middle;
    text-align: center;
    background: var(--button-color);
    border-radius: 1cqw;
}

.preiseingabe {
    font-size: 4cqw;
    text-align: center;
    margin: 1cqw;
}

.BT_Eingabe {
    background-color: var(--sucess-color);
}

#BT_EingabeBestätigt {
    background-color: var(--success-color);
}

#BT_EingabeBestätigt:hover {
    background: var(--button-hover);
}

#BT_Abbruch {
    background-color: var(--error-color);
}

#abbruch {
    background-color: var(--warning-color);
}


/* ============================================
   PREISFENSTER
   ============================================ */

#preisfenster {
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
    background-color: var(--background-light);
    margin: 0;
    padding: 0;
    height: 100cqh;
    width: 100cqw;
    z-index: 3;
    display: none;
}

#preisfenster_inhalt {
    background-color: var(--text-color-light);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 1px var(--border-color);
    height: 100%;
    margin: 1cqw;
    padding: 1cqw;
    border-radius: 1cqw;
}

#preisliste_schließen {
    background-color: var(--success-color);
    position: absolute;
    top: 1cqw;
    right: 1cqw;
    border: 1px solid;
    height: 5cqw;
    width: 5cqw;
    font-size: 4cqw;
    z-index: 3;
}

#preisliste_überschrift {
    font-size: 5cqw;
    margin-bottom: 1cqw;
}

#preislistentabelle {
    font-size: 3cqw;
}

#preislistentabelle td {
}

.preisliste_rechts_groß {
    text-align: right;
    padding: 0 1cqw 0 0;
    max-width: 50cqw;
}

#preislistentabelle thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.plus-button {
    width: 5cqw;
    height: 5cqw;
    font-size: 3cqw;
    padding: 0;
}

.plus-button-zelle {
    /* text-align: center; */
    vertical-align: middle;
    font-size: 4cqw;
    padding: 0 1cqw;
}


/* ============================================
   TABELLEN - AUSRICHTUNG & SPALTEN
   ============================================ */

.zentriert {
    text-align: center;
}

.zentriertTop {
    text-align: center;
    vertical-align: top;
}

.rechts {
    text-align: right;
}

.rechts_groß {
    text-align: right;
    font-size: 4cqw;
    padding-right: 1cqw;
}

.links {
    text-align: left;
}

.top {
    vertical-align: top;
}

.währung {
    text-align: right;
    vertical-align: bottom;
    width: 100px;
}

.zeit {
    text-align: center;
    width: 90px;
    font-size: 15px;
}

.leerspalte {
    width: 3cqw;
}

.preisspalteWarenkorb {
    width: 14cqw;
}

.datumspalte {
    width: 100px;
}

.kundenspalte {
    text-align: left;
    vertical-align: top;
}

.tagesabrechnung-th-left {
    text-align: left;
}

.kunden-summen-padding {
    padding-bottom: 10px;
}


/* ============================================
   SCROLLBALKEN
   ============================================ */

.scrollbalken::-webkit-scrollbar {
    width: 4cqw;
}

.scrollbalken::-webkit-scrollbar-track {
    background: var(--text-color-light);
    border-radius: 2xqw;
}

.scrollbalken::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2cqw;
}

.scrollbalken::-webkit-scrollbar-thumb:hover {
    background: var(--tertiary-color);
}


/* ============================================
   BILDSCHIRMSCHONER & MODAL FENSTER
   ============================================ */

#bildschirmschoner {
    display: none;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    background-color: black;
    z-index: 20;
}

.scaling-img {
    width: 0;
    height: auto;
    animation: scale-image 30s linear infinite;
}

@keyframes scale-image {
    0% { width: 0; opacity: 0; }
    40% { width: 400px; opacity: 1; }
    50% { width: 400px; opacity: 1; }
    90% { width: 0; opacity: 0; }
    100% { width: 0; opacity: 0; }
}

#Wartungsfenster {
    display: none;
    background-color: var(--background-dark);
    color: var(--text-color-light);
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100cqh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#Wartungsfenster h1 {
    font-size: 3cqw;
    max-width: 106cqw;
}

#wartungs-logo {
    margin: 1cqw;
    height: 30cqw;
    max-height: 22cqh;
}

#OfflineBildschirm {
    display: none;
    background-color: var(--background-dark);
    color: var(--text-color-light);
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#OfflineBildschirm h1 {
    font-size: 4cqw;
}

#offline-logo {
    width: 30cqw;
    max-height: 50cqh;
}


/* ============================================
   CHECKMARK / BESTÄTIGUNGEN
   ============================================ */

#checkmark-container {
    display: none;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    color: #4CAF50;
    position: absolute;
    top: 30cqw;
    left: 25cqw;
    z-index: 1000;
}

#checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 2s ease;
}

.warenkorb-checkmark-container {
    display: none;
}

#warenkorb-checkmark-svg {
    margin: -105px 0 0 0;
}


/* ============================================
   PREIS ÄNDERUNG FEEDBACK
   ============================================ */

.preis-geaendert-erfolg {
    font-size: 4cqw;
    color: var(--success-color);
}

.preis-geaendert-info {
    font-size: 3cqw;
}

.preis-geaendert-wert {
    color: var(--success-color);
    font-size: 12cqw;
}

.preis-fehler {
    font-size: 3.5cqw;
    color: var(--success-color);
}

.warenkorb-uebertragung-text {
    font-size: 3.5cqw;
}


/* ============================================
   PRELOADER
   ============================================ */

#preloader {
    display: flex;
}


/* ============================================
   SYSTEMINFO
   ============================================ */

.systeminfo-cache-liste {
    font-size: 2vw;
    text-align: left;
}


/* ============================================
   HILFSELEMENTE
   ============================================ */

.input-button {
    display: none;
}

@media print {
    .no-break {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}