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

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

/* Überschriften */
--h1-size: 32px;
--h1-color: #2c3e50;

--h2-size: 28px;
--h2-color: #2c3e50;

--h3-size: 24px;
--h3-color: #2c3e50;

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

/* Buttons */
--button-one-color: #79a7d3;
--button-one-text-color: #ffffff;
--button-one-hover-color: #00264d;
--button-two-color: #c07080;
--button-two-text-color: #ffffff;
--button-two-hover-color: #7a0000;
--button-three-color: #78ad8a;
--button-three-text-color: #ffffff;
--button-three-hover-color: #005a00;

/* Elegante Juwelen-Diagrammfarben */
--chart-total-color: #9A1B27; /* Rotton - Gesamtkosten */
--chart-partial-color: #FFD954; /* Gelbton - Regulierungsbasis */
--chart-liability-color: #2E5A88; /* Blauton - Anerkannte Haftung */
--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 */

/* Index-Seite Karten-Hintergrundfarben */
--card-bg-1: #6184c6;
--card-bg-2: #C0A9BD;
--card-bg-3: #94A7AE;
--card-bg-4: #E2C499;
--card-bg-5: #8CA9D3;
--card-bg-6: #BACEC1;

/* Index-Seite Typografie */
--card-title-fs: clamp(22px, 5.4vw, 42px);
--card-text-fs: clamp(17px, 3.4vw, 22px);

--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;
min-width:0;
}
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;
}
table thead tr{background-color:var(--table-header-bg);}
table tbody tr:nth-child(odd){background-color:var(--table-row-odd-bg);}
table tbody tr:nth-child(even){background-color:var(--table-row-even-bg);}
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;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.1);}
.alternate-list li{list-style:none;padding:10px;}
.alternate-list li:nth-child(odd){background-color:var(--table-row-odd-bg);}
.alternate-list li:nth-child(even){background-color:var(--table-row-even-bg);}

.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
────────────────────────────── */
/* Verhindert Overflow durch Padding und Border (globaler Fix) */
*, *::before, *::after { box-sizing: border-box; }

/* Tablet (≤ 1024 px) */
@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);}
}

/* Schmale Tablets / große Phones (≤ 768 px) */
@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);}
h1{font-size:clamp(1.4rem,5.5vw,var(--h1-size));}
h2{font-size:clamp(1.25rem,4.5vw,var(--h2-size));}
h3{font-size:clamp(1.1rem,4vw,var(--h3-size));}
legend{font-size:1.3em;}
}

/* Spalten-Stapelung & selektive Tabellenspalten (≤ 640 px) */
@media(max-width:640px){
.col-30,.col-50,.col-70{flex:1 1 100%;}
.row{gap:10px;}
/* E-Mail-Protokoll: Anlass- und Anhänge-Spalten ausblenden */
.email-col-context,.email-col-attachments{display:none;}
}

/* Phones (≤ 480 px) */
@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);}
fieldset{padding:10px 8px;}
legend{font-size:1.15em;}
}

/* Sehr kleine Geräte (≤ 360 px) */
@media(max-width:360px){
body{font-size:calc(var(--font-size) - 7px);}
.page-container{margin:0;border-left:none;border-right:none;border-radius:0;}
legend{font-size:1em;}
}

/* ──────────────────────────────
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
────────────────────────────── */
/* ──────────────────────────────
Alert-Meldungen
────────────────────────────── */
.alert {
margin: 16px 0;
padding: 10px 12px;
border-radius: 8px;
}
.alert-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-danger {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
}

/* ──────────────────────────────
QR-Code Modal
────────────────────────────── */
/* ──────────────────────────────
Overlay-Balkendiagramm
────────────────────────────── */
.overlay-bar-chart {
position: relative;
width: 100%;
height: 14px;
background: var(--chart-total-color, #B04A5A);
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.overlay-bar-chart div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
transition: width 1.2s ease-out;
}
.overlay-bar-chart .prop {
background: var(--chart-partial-color, #C9A227);
border-radius: 4px;
transition: width 1.5s ease-out;
}
.overlay-bar-chart .liab {
background: var(--chart-liability-color, #2E5A88);
border-radius: 4px;
transition: width 1.8s ease-out;
}
.overlay-bar-chart .paid {
background: var(--chart-paid-color, #2D8659);
border-radius: 4px;
transition: width 2s ease-out;
}
.overlay-bar-chart.overlay-bar-lg {
height: 30px;
margin-top: 20px;
}
.overlay-bar-legend {
display: flex;
justify-content: flex-start;
gap: 16px;
font-size: 0.9em;
margin-top: 8px;
align-items: center;
flex-wrap: wrap;
}
.overlay-bar-legend .swatch {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #333;
}

/* ──────────────────────────────
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;
}