body {
    margin: 0;
    font-family: Arial;
    background: #f5f5f5;
    color: black;
}

body.dark {
    background: #1e1e1e;
    color: white;
}

.container {
    display: flex;
    height: 100vh;
}

.left { width:40%; padding:20px; background:#fff; }
.right { width:60%; padding:20px; }

body.dark .left { background:#2a2a2a; }
body.dark .right { background:#1e1e1e; }

.display {
    font-size: 40px;
    text-align: right;
    padding: 10px;
    border: 1px solid #ccc;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.keypad button {
    font-size: 28px;
    padding: 20px;
}

.addBtn, .payBtn, .clearBtn {
    width: 100%;
    padding: 20px;
    font-size: 25px;
    color: white;
}

.addBtn { background: green; }
.payBtn { background: blue; }
.clearBtn { background: red; margin-top:10px; }

#cart { height: 60%; overflow:auto; }

.item {
    display:flex;
    justify-content:space-between;
    padding:10px;
    border-bottom:1px solid #ccc;
}

.total { font-size:30px; margin-top:20px; }

/* DARK */
body.dark .item { border-color:#444; }

/* MODAL */
.modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
}

.modalContent {
    background:white;
    width:90%;
    height:90%;
    max-width:1000px;
    max-height:800px;
    display:flex;
    flex-direction:column;
    padding:20px;
    border-radius:10px;
}

body.dark .modalContent { background:#2a2a2a; }

.bigTotal { font-size:clamp(20px,4vh,40px); }

.givenDisplay {
    font-size:clamp(25px,5vh,50px);
    background:#eee;
    padding:15px;
    text-align:right;
}

body.dark .givenDisplay { background:#333; }

.changeBox {
    font-size:clamp(18px,3vh,30px);
}

/* Farben Rückgeld */
.positive { color: limegreen; }
.negative { color: red; }
.neutral { color: gray; }

.paymentLayout {
    flex:1;
    display:flex;
    gap:10px;
}

.payLeft, .payRight { flex:1; }

.payRight {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
}

.cash {
    width:100%;
    height:120px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:white;
    border:1px solid #ccc;
    border-radius:10px;
}

/* Bilder */
.c1 { background-image:url("https://pos.fwprod.ch/1chf.png"); }
.c2 { background-image:url("https://pos.fwprod.ch/2chf.png"); }
.c5 { background-image:url("https://pos.fwprod.ch/5chf.png"); }

.c10 { background-image:url("https://pos.fwprod.ch/10chf.jfif"); }
.c20 { background-image:url("https://pos.fwprod.ch/20chf.jfif"); }
.c50 { background-image:url("https://pos.fwprod.ch/50chf.jfif"); }
.c100 { background-image:url("https://pos.fwprod.ch/100chf.jpg"); }

.modalButtons {
    display:flex;
    gap:10px;
}

.modalButtons button {
    flex:1;
    padding:20px;
    font-size:20px;
}

.backBtn { background:grey; color:white; }
.doneBtn { background:green; color:white; }

/* DARK TOGGLE */
.darkToggle {
    position:absolute;
    top:10px;
    right:10px;
    font-size:25px;
}

/* LOGIN */
#loginScreen {
    text-align:center;
    margin-top:100px;
}