/* ──────────────────────────────
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: #D7E1EF;
--card-bg-2: #EEDFDC;
--card-bg-3: #DEE4E9;
--card-bg-4: #F0E7D5;
--card-bg-5: #E4DFED;
--card-bg-6: #E7E6CD;
--card-bg-7: #D4E7E3;

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

/* Einheitlicher vertikaler/horizontaler Abstand für gestapelte Layouts.
   Wird pro Breakpoint EINMAL gesetzt statt in jeder Regel einzeln. */
--stack-gap: 20px;
}

/* ──────────────────────────────
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{
/* clamp() ersetzt die früheren Per-Breakpoint-Overrides (1.3em/1.1em/1em) */
font-size:clamp(1em, 3.5vw, 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; }

/* Innerhalb eines .button-container regelt der Container-gap die Abstände
   – kein doppelter margin-right/margin-top mehr. */
.button-container .button-one,
.button-container .button-one-right,
.button-container .button-two,
.button-container .button-two-right,
.button-container .button-three,
.button-container .button-three-right{
margin-right:0;
margin-top:0;
}

/* Mobile (≤ 480 px): Touch-Targets gemäß HIG (≥44px) + volle Breite,
   damit Buttons leicht treffbar sind und nicht abgeschnitten werden. */
@media (max-width: 480px){
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
--btn-fs: .9rem;
--btn-py: .7rem;
--btn-px: 1.1rem;
letter-spacing: .4px;
border-radius: 9px;
white-space: normal;
min-height: 44px;
display: flex;
width: 100%;
margin-right: 0;
float: none;          /* hebt .button-*-right-Float auf → kein Umbruch-Chaos */
align-items: center;
justify-content: center;
text-transform: none;
}
/* Mehrere Buttons untereinander, volle Breite, einheitlicher Abstand */
.button-container{
flex-direction: column;
align-items: stretch;
gap: var(--stack-gap);
}
.button-container .button-one,
.button-container .button-one-right,
.button-container .button-two,
.button-container .button-two-right,
.button-container .button-three,
.button-container .button-three-right{
width: 100%;
}
}

/* Sehr klein (≤ 360 px): nur leicht kompakter, aber Touch-Größe bleibt */
@media (max-width: 360px){
.button-one,
.button-one-right,
.button-two,
.button-two-right,
.button-three,
.button-three-right{
--btn-fs: .85rem;
--btn-px: .9rem;
}
}

/* ──────────────────────────────
Container & Helferklassen
────────────────────────────── */
.button-container{
display:flex;
gap:20px;
justify-content:center;
align-items:center;
margin-top:10px;
flex-wrap: wrap;
}

/* ──────────────────────────────
Einklappbare Fall-Navigation (render_case_nav)
────────────────────────────────
Desktop: Buttons als normale Reihe, KEIN Menü-Button.
Mobile : Buttons hinter einem deutlich erkennbaren „Menü"-Schalter (natives
         <details>/<summary>; den open-Zustand steuert js/nav-menu.js je nach
         Breite und Button-Anzahl, tastatur-/screenreaderfähig).
Wiederverwendbar für andere große Navigationsgruppen. */
.nav-collapse{margin-bottom:20px;}
.nav-collapse > summary{display:none;}   /* Standard: kein Toggle (nur .is-menu blendet ihn ein) */
/* Buttons-Layout NUR, wenn sie sichtbar sein sollen (offen ODER gar kein Menü).
   Einen GESCHLOSSENEN .is-menu lassen wir bewusst in Ruhe, damit das native
   <details>-Verstecken in jedem Browser greift. */
.nav-collapse:not(.is-menu) .nav-buttons,
.nav-collapse[open] .nav-buttons{display:flex;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);
}
/* 12-Spalten-Grid: fließt sauber mit, lässt sich pro Breakpoint mischen */
.row{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:var(--stack-gap);
align-items:start;
}
/* min-width:0 verhindert Overflow durch lange, nicht umbrechbare Strings
   (z. B. FIN oder E-Mail-Adressen) in Grid-Kindern. */
.col-30{grid-column:span 4;min-width:0;}
.col-50{grid-column:span 6;min-width:0;}
.col-70{grid-column:span 8;min-width:0;}
.col-100{grid-column:span 12;min-width:0;}

/* .col-50.button-container behält Flex-Verhalten, damit innere Buttons sauber
   ausgerichtet werden. .right-align hingegen ist nur ein Text-Alignment-Helfer und
   darf NICHT zum Flex-Container werden — sonst zerfällt text-align:right. */
.col-50.button-container{display:flex;}

/* ──────────────────────────────
Schlüssel-Wert-Daten (semantische Beschreibungslisten)
────────────────────────────────
.data-list  – einspaltige Liste von Label/Wert-Paaren
.data-grid  – zwei Paare nebeneinander (Desktop), füllt ZEILENWEISE in
              Quell-Reihenfolge und stapelt am Phone exakt in dieser Reihenfolge
.pair       – ein Label/Wert-Paar (Label linksbündig, Wert bricht sauber um)
────────────────────────────── */
.data-list,
.data-grid{
margin:0 0 1rem;
display:grid;
gap:var(--pair-row-gap, .4rem) 24px;
align-items:start;
}
.data-list{grid-template-columns:1fr;}
.data-grid{grid-template-columns:repeat(2, minmax(0,1fr));}

.pair{
display:grid;
grid-template-columns:max-content 1fr;
column-gap:10px;
min-width:0;
}
.pair dt{font-weight:bold;color:var(--text-color);}
.pair dd{
margin:0;
min-width:0;
overflow-wrap:anywhere;   /* lange FIN/E-Mail bricht statt zu überlaufen */
}
/* In einspaltigen Listen dürfen lange Feldnamen umbrechen (Silbentrennung de),
   damit der Wert daneben genug Platz behält. .data-grid (kurze Werte) und die
   gestapelte Freitext-Variante bleiben unberührt. */
.data-list .pair dt{hyphens:auto;overflow-wrap:anywhere;}
@media(min-width:361px){
.data-list .pair:not(.pair--stacked){grid-template-columns:fit-content(45%) 1fr;}
}
/* Modifier für Freitext (langes Label / mehrzeiliger Wert): Label IMMER über
   dem Wert statt daneben – sonst quetscht ein langes Label die Textspalte. */
.pair--stacked{grid-template-columns:1fr;column-gap:0;}
.pair--stacked dt{margin-bottom:2px;}
/* Label/Wert untereinander, sobald es eng wird */
@media(max-width:420px){
.data-grid{grid-template-columns:1fr;}
}
@media(max-width:360px){
.pair{grid-template-columns:1fr;column-gap:0;}
.pair dt{margin-bottom:1px;}
}

/* ──────────────────────────────
Kopfbereich (Basis vor Responsive, damit Mobile-Overrides greifen)
────────────────────────────── */
.site-header{
margin-bottom:20px;
border-bottom:1px solid #ddd;
padding-bottom:10px;
}
.header-container{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
}
.portal-name{
flex:1 1 60%;
min-width:0;
line-height:1.2;
}
/* Titel + Slogan beziehen ihre Größe aus inline-CSS-Variablen (gesetzt in header.php),
   damit Media-Queries sie sauber per clamp() überschreiben können. */
.portal-title{
font-size:var(--portal-title-size, 24px);
font-weight:bold;
color:var(--portal-title-color, var(--heading-color));
line-height:1.2;
}
.portal-slogan{
font-size:var(--portal-slogan-size, 12px);
color:#666;
margin-top:5px;
line-height:1.2;
}
.logo-container{
flex:0 1 33%;
text-align:right;
}
.logo-container img{
max-width:80%;
height:auto;
}

/* ──────────────────────────────
Responsive Basis
────────────────────────────── */
/* Verhindert Overflow durch Padding und Border (globaler Fix) */
*, *::before, *::after { box-sizing: border-box; }

/* Tablet (≤ 1024 px) — 3er-Reihen werden 2er-Reihen, col-70 wandert nach oben */
@media(max-width:1024px){
body{font-size:calc(var(--font-size) - 1px);}
.container{padding:calc(var(--container-padding) - 4px);}
.page-container{padding:calc(var(--page-padding) - 4px);}
.col-30{grid-column:span 6;}   /* drei col-30 nebeneinander → zwei pro Reihe */
.col-70{grid-column:span 12;}  /* verhindert Kollision mit col-30 (8+6 > 12) */
}

/* Schmale Tablets / große Phones (≤ 768 px) */
@media(max-width:768px){
body{font-size:calc(var(--font-size) - 2px);}
.container{padding:calc(var(--container-padding) - 8px);}
.page-container{padding:calc(var(--page-padding) - 8px);}
table{font-size:calc(var(--font-size) - 1px);}
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));}
:root{--stack-gap:14px;}
}

/* Phones (≤ 640 px) — col-30 / col-70 stapeln, col-50 bleibt 2-spaltig */
@media(max-width:640px){
:root{--stack-gap:12px;}
.col-30{grid-column:span 12;}
.col-70{grid-column:span 12;}
/* col-50 bewusst NICHT stapeln — passt locker nebeneinander bis 420px */

/* Klappmenü-Optik NUR, wenn js/nav-menu.js dieses <details> als „.is-menu"
   markiert hat (Mobile UND mehr als 3 Buttons). Das Ein-/Ausklappen selbst
   übernimmt das native open-Attribut (von nav-menu.js gesteuert).
   Bei ≤3 Buttons / am Desktop: keine Box, kein Schalter, Buttons direkt sichtbar. */
.nav-collapse.is-menu{
border:1px solid #e3e3e3;
border-radius:var(--border-radius);
background:#fafafa;
padding:6px;
}
.nav-collapse.is-menu > summary{display:flex;}   /* Menü-Schalter einblenden */

/* Optik des Menü-Schalters (greift nur, wenn oben via display:flex sichtbar) */
.nav-collapse > summary{
align-items:center;
justify-content:center;
gap:10px;
min-height:44px;
padding:.6rem 1rem;
list-style:none;            /* Standard-Dreieck entfernen */
cursor:pointer;
user-select:none;
background:var(--button-one-color);
color:var(--button-one-text-color);
border-radius:var(--border-radius);
font-weight:bold;
letter-spacing:.4px;
}
.nav-collapse > summary::-webkit-details-marker{display:none;}  /* Safari/iOS */
.nav-toggle-label{font-size:1rem;}
/* Hamburger-Symbol aus drei Strichen (box-shadow-Trick) */
.nav-toggle-icon{
width:18px;height:2px;
background:currentColor;
box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor;
}
/* Pfeil rechts, dreht beim Öffnen nach oben */
.nav-collapse > summary::after{
content:"";
width:9px;height:9px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg);
transition:transform .2s ease;
margin-left:2px;
}
.nav-collapse[open] > summary::after{transform:rotate(225deg);}
.nav-collapse[open] > summary{margin-bottom:10px;}

/* Outline-Variante (Fall-Aktionen-Schalter): setzt sich vom gefüllten
   Seiten-„Menü" ab. Icon/Pfeil färben sich über currentColor mit. */
.nav-collapse > summary.nav-toggle--outline{
background:transparent;
color:var(--button-one-color);
border:2px solid var(--button-one-color);
}
.nav-collapse > summary.nav-toggle--outline:hover{
background:var(--button-one-color);
color:var(--button-one-text-color);
}

/* E-Mail-Protokoll: Anlass- und Anhänge-Spalten ausblenden */
.email-col-context,.email-col-attachments{display:none;}

/* Tabellen horizontal scrollbar statt zerquetscht (Standard-Fallback) */
table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
max-width:100%;
}

/* Formularfelder straffen: weniger vertikaler Abstand */
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{margin-bottom:10px;padding:7px;}
fieldset{padding:12px 10px;margin-bottom:14px;}
label{margin-bottom:4px;}
}

/* Kleine Phones (≤ 480 px) */
@media(max-width:480px){
body{font-size:calc(var(--font-size) - 2px);}
.container{padding:6px;}
.page-container{padding:12px;margin:10px auto;}
:root{--stack-gap:10px;}

/* Button-Abstände auf Mobile straffen (gap statt doppeltem margin) */
.button-container{gap:10px;}

/* Header: Portalname + Logo bleiben IMMER nebeneinander, schrumpfen nur */
.header-container{flex-wrap:nowrap;gap:8px;}
.portal-name{flex:1 1 auto;min-width:0;}
.portal-title{font-size:clamp(.95rem, 4.8vw, var(--portal-title-size, 24px));}
.portal-slogan{font-size:clamp(.6rem, 2.6vw, var(--portal-slogan-size, 12px));margin-top:2px;}
.logo-container{flex:0 0 auto;max-width:38%;}
.logo-container img{max-width:100%;max-height:54px;width:auto;}
}

/* col-50 erst auf wirklich schmalen Phones stapeln (~iPhone SE / Galaxy A0X) */
@media(max-width:420px){
.col-50{grid-column:span 12;}
}

/* Sehr kleine Geräte (≤ 360 px) — Header bleibt nebeneinander, alles wird kompakter */
@media(max-width:360px){
body{font-size:calc(var(--font-size) - 2px);}
.page-container{margin:0;border-left:none;border-right:none;border-radius:0;padding:10px;}
.container{padding:4px;}
fieldset{padding:10px 8px;}
.header-container{gap:6px;}
.portal-title{font-size:clamp(.85rem, 4.5vw, 1rem);}
.portal-slogan{font-size:clamp(.55rem, 2.4vw, .7rem);}
.logo-container{max-width:34%;}
.logo-container img{max-height:44px;}
}

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