/* ──────────────────────────────
Dynamische Settings (Custom-Props)
────────────────────────────── */
:root {
/* Grundlayout */
--background-color: #f0f0f0;
--table-bg-color: #fbfbfb;
--font-family: Inter, sans-serif;
--font-size: 16px;

/* Globale Fallbacks */
--header-size: 24px;
--text-color: #333333;
--heading-color: #1e2761;

/* Überschriften */
--h1-size: 24px;
--h1-color: #1e2761;

--h2-size: 20px;
--h2-color: #1e2761;

--h3-size: 16px;
--h3-color: #1e2761;

/* Legenden */
--legend-color: #1e2761;

/* Buttons */
--button-one-color: #6096bf;
--button-one-text-color: #ffffff;
--button-one-hover-color: #596f80;
--button-two-color: #bf6060;
--button-two-text-color: #ffffff;
--button-two-hover-color: #805959;
--button-three-color: #72a372;
--button-three-text-color: #ffffff;
--button-three-hover-color: #598059;

/* Elegante Juwelen-Diagrammfarben */
--chart-total-color: #9A1B27; /* Rotton - Gesamtkosten */
--chart-partial-color: #FFD954; /* Gelbton - Kostenanteil */
--chart-paid-color: #007F52; /* Grünton - Zahlungen */

/* Kreisdiagramm-Palette */
--chart-pie-1: #2E5A88; /* Saphirblau */
--chart-pie-2: #2D8659; /* Smaragdgrün */
--chart-pie-3: #B04A5A; /* Rubinrot */
--chart-pie-4: #7B5EA7; /* Amethyst */
--chart-pie-5: #C9A227; /* Gold */
--chart-pie-6: #3A9B94; /* Aquamarin */
--chart-pie-7: #D4785C; /* Koralle */
--chart-pie-8: #4A8B6F; /* Jade */
--chart-pie-9: #8E6B8C; /* Pflaume */
--chart-pie-10: #C4A35A; /* Champagner */
--chart-pie-11: #3D6B7D; /* Petrol */
--chart-pie-12: #C48B8B; /* Rosé */
--chart-pie-13: #5B7B4A; /* Moos */
--chart-pie-14: #9B6B47; /* Bronze */
--chart-pie-15: #6B8BA4; /* Taubenblau */
--chart-pie-16: #A67C5B; /* Karamell */

--border-radius: 5px;
--padding: 8px;

/* Abstände Container/Page */
--container-padding: 24px;
--page-padding: 28px;
}

/* ──────────────────────────────
Basis-Typografie & Layout
────────────────────────────── */
body{
background-color: var(--background-color);
font-family: var(--font-family);
font-size: var(--font-size);
color: var(--text-color);
margin:0;
padding:0;
line-height:1.6;
}

/* Überschriften mit neuen Variablen */
h1{
font-size: var(--h1-size, var(--header-size));
color: var(--h1-color, var(--heading-color));
font-weight: bold;
margin-top:0;
}
h2{
font-size: var(--h2-size, var(--header-size));
color: var(--h2-color, var(--heading-color));
font-weight: bold;
margin-top:0;
}
h3{
font-size: var(--h3-size, var(--header-size));
color: var(--h3-color, var(--heading-color));
font-weight: bold;
margin-top:0;
}

/* ──────────────────────────────
Formulare & Tabellen
────────────────────────────── */
fieldset{
border:1px solid #ccc;
margin-bottom:20px;
padding:15px;
border-radius:5px;
position:relative;
}
legend{
font-size:1.5em;
font-weight:bold;
padding:0 10px;
color:var(--legend-color);
}
label{
display:block;
margin-bottom:8px;
font-weight:bold;
}
table{
background-color:var(--table-bg-color);
border-collapse:collapse;
box-shadow:0 4px 6px rgba(0,0,0,.1);
border-radius:8px;
overflow:hidden;
width:100%;
margin-bottom:1rem;
}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
width:100%;
padding:8px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:5px;
font-size:1em;
}
textarea{resize:vertical;}

/* ──────────────────────────────
Buttons – responsiv per clamp()
────────────────────────────── */
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
--btn-fs: clamp(.75rem, 1.2vw, .85rem); /* kleinere Schrift */
--btn-py: clamp(.25rem, 0.8vw, .45rem); /* weniger Höhe */
--btn-px: clamp(.70rem, 2.5vw, 1.00rem); /* seitlich etwas kompakter */

display:inline-block;
margin-top:10px;
margin-right:10px;

font-size: var(--btn-fs);
padding: var(--btn-py) var(--btn-px);

text-decoration:none;
border-radius: var(--border-radius);
border:none;
line-height: 1.15;
transition: transform .2s ease, background-color .2s ease;
text-transform: uppercase;

letter-spacing: .6px;
cursor:pointer;
white-space: nowrap;
}

.button-one,
.button-one-right{
background-color:var(--button-one-color);
color:var(--button-one-text-color);
}
.button-one:hover,
.button-one-right:hover{
background-color:var(--button-one-hover-color);
transform: translateY(-1px);
}

.button-two,
.button-two-right{
background-color:var(--button-two-color);
color:var(--button-two-text-color);
}
.button-two:hover,
.button-two-right:hover{
background-color:var(--button-two-hover-color);
transform: translateY(-1px);
}

.button-three,
.button-three-right{
background-color:var(--button-three-color);
color:var(--button-three-text-color);
}
.button-three:hover,
.button-three-right:hover{
background-color:var(--button-three-hover-color);
transform: translateY(-1px);
}

/* Rechte Ausrichtung */
.button-one-right,
.button-two-right,
.button-three-right{ float:right; }

/* Feintuning für sehr kleine Geräte */
@media (max-width: 420px){
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
letter-spacing: .4px;
border-radius: 9px;
white-space: normal;
}
}

/* Ultra-klein noch kompakter */
@media (max-width: 360px){
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
--btn-fs: .78rem;
--btn-py: .45rem;
--btn-px: .70rem;
text-transform: none;
}
}

/* ──────────────────────────────
Container & Helferklassen
────────────────────────────── */
.button-container{
display:flex;
gap:20px;
justify-content:center;
align-items:center;
margin-top:10px;
flex-wrap: wrap;
}
.alternate-list{padding:0;margin:0;}
.alternate-list li{list-style:none;padding:10px;}
.alternate-list li:nth-child(odd){background-color:#ffffff;}
.alternate-list li:nth-child(even){background-color:#f0f0f0;}

.container{
max-width:1500px;
margin:0 auto;
padding:var(--container-padding);
}
.page-container{
max-width:1000px;
margin:20px auto;
padding:var(--page-padding);
background:#fff;
border:1px solid #ddd;
border-radius:8px;
box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.row{display:flex;flex-wrap:wrap;gap:20px;}
.col-30{flex:1 1 27%;}
.col-50{flex:1 1 47%;}
.col-70{flex:1 1 67%;}
.col-100{flex:1 1 100%;}

/* ──────────────────────────────
Responsive Basis
────────────────────────────── */
@media(max-width:1024px){
body{font-size:calc(var(--font-size) - 2px);}
.container{padding:calc(var(--container-padding) - 4px);}
.page-container{padding:calc(var(--page-padding) - 4px);}
}
@media(max-width:768px){
body{font-size:calc(var(--font-size) - 4px);}
.container{padding:calc(var(--container-padding) - 8px);}
.page-container{padding:calc(var(--page-padding) - 8px);}
table{font-size:calc(var(--font-size) - 2px);}
}
@media(max-width:480px){
body{font-size:calc(var(--font-size) - 6px);}
.container{padding:calc(var(--container-padding) - 12px);}
.page-container{padding:calc(var(--page-padding) - 12px);}
table{font-size:calc(var(--font-size) - 4px);}
}
@media (max-width: 360px){
body{ font-size: calc(var(--font-size) - 7px); }
}

/* ──────────────────────────────
Kopfbereich
────────────────────────────── */
.site-header{
margin-bottom:20px;
border-bottom:1px solid #ddd;
padding-bottom:10px;
}
.header-container{
display:flex;
align-items:center;
justify-content:space-between;
}
.portal-name{
flex:0 0 67%;
font-size:var(--header-size);
font-weight:bold;
color:var(--heading-color);
}
.logo-container{
flex:0 0 33%;
text-align:right;
}
.logo-container img{
max-width:80%;
height:auto;
}

/* ──────────────────────────────
QR-Code Modal
────────────────────────────── */
.qr-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.85);
justify-content: center;
align-items: center;
z-index: 9999;
cursor: pointer;
}
.qr-modal img {
max-width: 300px;
max-height: 300px;
border: 2px solid #333;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
background-color: #fff;
}