/* SchuhAssist - Styles CSS - Mobile First Design
VOLLSTÄNDIGE VERSION mit allen Verbesserungen */

:root {
--primary-dark: #0A2438;
--primary-medium: #1A5A7F;
--primary-light: #6F9DB5;
--accent-light: #A8DCF4;
--accent-lighter: #DBEDF6;
--accent-lightest: #C2E5F5;
--neutral-dark: #5A6B79;
--neutral-medium: #A7B1B8;
--neutral-light: #DFE6EA;
--error-color: #E74C3C;
--warning-color: #FFC107;
--success-color: #28A745;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* MOBILE FIRST - Base Styles */
body {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 50%, var(--accent-light) 100%);
min-height: 100vh;
color: #333;
line-height: 1.6;
padding: 5px;
font-size: 14px;
}

.container {
max-width: 100%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 10px 20px rgba(10, 36, 56, 0.3);
padding: 15px;
border: 1px solid rgba(168, 220, 244, 0.3);
}

/* Header */
header {
text-align: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent-light);
}

h1 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.description {
color: var(--neutral-dark);
font-size: 0.9rem;
}

/* Tab Navigation - Mobile First */
.tabs {
display: flex;
flex-direction: column;
margin-bottom: 15px;
background: linear-gradient(90deg, var(--accent-lighter), var(--accent-light));
border-radius: 10px;
padding: 3px;
gap: 2px;
}

.tab {
padding: 10px 15px;
cursor: pointer;
background: transparent;
border: none;
border-radius: 8px;
font-weight: 600;
color: var(--neutral-dark);
transition: all 0.3s ease;
text-align: center;
font-size: 0.9rem;
}

.tab.active {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
box-shadow: 0 4px 10px rgba(26, 90, 127, 0.3);
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Typography */
h2 {
color: var(--primary-medium);
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid var(--accent-light);
font-weight: 700;
font-size: 1.1rem;
}

h3 {
color: var(--primary-dark);
margin: 15px 0 10px;
font-weight: 600;
font-size: 0.9rem;
}

h4 {
color: var(--primary-medium);
margin: 10px 0 8px;
font-weight: 600;
font-size: 0.8rem;
}

/* Layout - Mobile First */
.two-column {
display: block;
gap: 15px;
}

.search-box {
width: 100%;
padding: 12px;
border: 2px solid var(--accent-light);
border-radius: 8px;
margin-bottom: 15px;
font-size: 16px;
background: white;
transition: all 0.3s ease;
}

.search-box:focus {
outline: none;
border-color: var(--primary-medium);
box-shadow: 0 0 0 2px rgba(26, 90, 127, 0.1);
}

.selection-column {
padding: 12px;
background: linear-gradient(135deg, rgba(219, 237, 246, 0.5), rgba(168, 220, 244, 0.3));
border-radius: 12px;
border: 2px solid var(--accent-lightest);
margin-bottom: 15px;
}

.diagnosis-list-container {
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--accent-lightest);
border-radius: 8px;
background: white;
padding: 8px;
}

.diagnosis-list-container::-webkit-scrollbar {
width: 6px;
}

.diagnosis-list-container::-webkit-scrollbar-track {
background: var(--accent-lighter);
border-radius: 6px;
}

.diagnosis-list-container::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
border-radius: 6px;
}

/* Position Items */
.position-item {
padding: 12px;
margin: 8px 0;
background: linear-gradient(135deg, white, rgba(200, 217, 225, 0.3));
border-radius: 8px;
border-left: 4px solid var(--primary-medium);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(90, 107, 121, 0.1);
font-size: 0.8rem;
line-height: 1.3;
}

.position-item:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent-lighter));
transform: translateX(3px);
}

.position-item.selected-item {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
}

.diagnosis-bilateral {
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
border-left: 4px solid var(--warning-color);
}

.diagnosis-unilateral {
background: linear-gradient(135deg, #C8D9E1, var(--accent-lighter));
border-left: 4px solid var(--primary-light);
}

/* Form Elements */
.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--primary-medium);
font-size: 0.8rem;
}

.side-selection {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}

.side-option {
padding: 10px 8px;
background: linear-gradient(135deg, var(--accent-lighter), var(--accent-light));
border: 2px solid rgba(26, 90, 127, 0.3);
border-radius: 8px;
text-align: center;
cursor: pointer;
font-weight: 600;
color: var(--primary-medium);
transition: all 0.3s ease;
font-size: 0.8rem;
line-height: 1.2;
}

.side-option.selected {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
}

.side-option:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(26, 90, 127, 0.2);
}

.info-text {
background: linear-gradient(135deg, var(--accent-lighter), rgba(168, 220, 244, 0.5));
padding: 12px;
border-radius: 8px;
border-left: 4px solid var(--primary-medium);
margin: 15px 0;
font-size: 0.8rem;
line-height: 1.3;
}

/* KRITISCH: Shoe Type Grid - Mobile First */
.shoe-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 15px;
}

.shoe-type-card {
padding: 8px 4px;
background: linear-gradient(135deg, var(--accent-lighter), var(--accent-light));
border-radius: 8px;
border: 2px solid rgba(26, 90, 127, 0.3);
cursor: pointer;
text-align: center;
font-weight: 600;
color: var(--primary-medium);
transition: all 0.3s ease;
font-size: 0.7rem;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.1;
}

.shoe-type-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(26, 90, 127, 0.3);
}

.shoe-type-card.selected {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
}

/* Interimsschuh über beide Spalten */
.shoe-type-card:nth-child(5) {
grid-column: 1 / 3;
max-width: 60%;
margin: 0 auto;
}

/* Result Panel */
.result-panel {
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, var(--accent-lighter), rgba(168, 220, 244, 0.3));
border-radius: 12px;
border: 2px solid var(--accent-light);
}

.warning {
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
color: #856404;
padding: 15px;
border-radius: 8px;
border: 2px solid #FFEAA7;
margin: 10px 0;
font-size: 0.8rem;
}

/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
font-size: 0.7rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(90, 107, 121, 0.1);
}

th, td {
padding: 8px 4px;
text-align: left;
border-bottom: 1px solid var(--accent-lightest);
word-break: break-word;
}

th {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
font-weight: 600;
font-size: 0.7rem;
}

tr:hover {
background: rgba(26, 90, 127, 0.1);
}

/* VERBESSERTE POSITION/BESCHREIBUNG SPALTE */
#positionDetailsContent table td:first-child {
width: 40%;
min-width: 120px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
vertical-align: top;
padding: 10px;
}

.position-number {
font-weight: 700;
font-size: 0.85rem;
color: var(--primary-medium);
display: block;
margin-bottom: 4px;
padding: 3px 8px;
background: linear-gradient(135deg, var(--accent-lighter), rgba(168, 220, 244, 0.3));
border-radius: 4px;
border-left: 3px solid var(--primary-medium);
}

.position-description {
font-weight: 400;
font-size: 0.75rem;
color: var(--neutral-dark);
line-height: 1.3;
margin-top: 4px;
font-style: italic;
}

/* SEITE SPALTE */
#positionDetailsContent table td:nth-child(2) {
width: 35%;
font-weight: 500;
color: var(--primary-dark);
vertical-align: middle;
padding: 10px;
}

/* INFO-BUTTON SPALTE */
#positionDetailsContent table td:nth-child(3) {
width: 25%;
text-align: center;
vertical-align: middle;
padding: 8px;
}

/* MODERNE INFO-BUTTONS */
.info-btn {
background: rgba(23, 162, 184, 0.1);
color: #17A2B8;
border: 2px solid #17A2B8;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}

.info-btn:hover {
background: #17A2B8;
color: white;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

/* Refresh Button */
.refresh-btn {
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.8rem;
margin-bottom: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
}

.refresh-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(26, 90, 127, 0.3);
}

/* Buttons */
.btn-full {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 10px;
font-size: 0.9rem;
}

.btn-full:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(26, 90, 127, 0.3);
}

.btn-secondary {
background: linear-gradient(135deg, var(--accent-light), var(--accent-lighter));
color: var(--primary-dark);
padding: 10px 20px;
border: 2px solid var(--primary-light);
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85rem;
}

.btn-secondary:hover {
background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
color: white;
transform: translateY(-2px);
}

.clear-data-btn {
background: linear-gradient(135deg, #DC3545, #C82333);
}

.clear-data-btn:hover {
background: linear-gradient(135deg, #C82333, #BD2130);
}

/* File Input */
.file-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 2px dashed var(--accent-light);
border-radius: 8px;
background: white;
font-size: 0.85rem;
}

/* Status Messages */
.status {
padding: 10px;
border-radius: 8px;
margin-top: 10px;
font-size: 0.85rem;
display: none;
}

.status.success {
background: #D4EDDA;
color: #155724;
border: 1px solid #C3E6CB;
display: block;
}

.status.error {
background: #F8D7DA;
color: #721C24;
border: 1px solid #F5C6CB;
display: block;
}

/* Admin Panel */
.admin-panel {
padding: 15px;
}

.admin-warning {
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
color: #856404;
padding: 15px;
border-radius: 8px;
border: 2px solid #FFEAA7;
margin-bottom: 20px;
font-weight: 600;
text-align: center;
font-size: 0.85rem;
}

.summary-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}

.summary-badge {
background: linear-gradient(135deg, var(--accent-lighter), var(--accent-light));
padding: 10px 15px;
border-radius: 8px;
border: 2px solid var(--primary-light);
font-weight: 600;
color: var(--primary-dark);
font-size: 0.8rem;
}

.import-sections {
display: block;
gap: 15px;
}

.import-section {
background: linear-gradient(135deg, rgba(219, 237, 246, 0.5), rgba(168, 220, 244, 0.3));
padding: 15px;
border-radius: 12px;
border: 2px solid var(--accent-lightest);
margin-bottom: 15px;
}

/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 36, 56, 0.8);
backdrop-filter: blur(5px);
}

.modal-content {
background: white;
margin: 0;
padding: 20px;
border-radius: 12px;
max-width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(10, 36, 56, 0.5);
animation: slideDown 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.modal-small {
max-width: 500px;
}

@keyframes slideDown {
from { transform: translate(-50%, -60%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}

.close {
color: var(--neutral-medium);
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}

.close:hover {
color: var(--error-color);
}

/* Card */
.card {
background: linear-gradient(135deg, rgba(219, 237, 246, 0.5), rgba(168, 220, 244, 0.3));
padding: 15px;
border-radius: 12px;
border: 2px solid var(--accent-lightest);
margin-bottom: 15px;
}

.card h3 {
margin-top: 0;
}

.card ul, .card ol {
margin-left: 20px;
}

.card li {
margin-bottom: 8px;
}

/* Footer */
footer {
text-align: center;
padding: 15px;
margin-top: 20px;
border-top: 2px solid var(--accent-light);
color: var(--neutral-dark);
font-size: 0.85rem;
}

/* ============================================================================
   AUTHENTIFIZIERUNGS-STYLES - NEU HINZUGEFÜGT
   ============================================================================ */

/* Auth Overlay */
.auth-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 36, 56, 0.95), rgba(26, 90, 127, 0.95));
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.5s ease;
}

.auth-overlay.hidden {
display: none;
}

/* Auth Container */
.auth-container {
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(10, 36, 56, 0.5);
max-width: 420px;
width: 90%;
padding: 30px;
animation: slideUp 0.5s ease;
}

@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Auth Header */
.auth-header {
text-align: center;
margin-bottom: 30px;
}

.auth-header h2 {
color: var(--primary-medium);
font-size: 1.8rem;
margin-bottom: 10px;
border-bottom: none;
}

.auth-header p {
color: var(--neutral-dark);
font-size: 0.95rem;
}

/* Auth Form */
.auth-form {
width: 100%;
}

.auth-form .form-group {
margin-bottom: 20px;
}

.auth-form .form-group label {
display: block;
margin-bottom: 8px;
color: var(--primary-dark);
font-weight: 600;
font-size: 0.9rem;
}

/* Auth Input */
.auth-input {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--accent-light);
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}

.auth-input:focus {
outline: none;
border-color: var(--primary-medium);
box-shadow: 0 0 0 3px rgba(26, 90, 127, 0.1);
}

.auth-input::placeholder {
color: var(--neutral-medium);
}

/* Auth Button */
.auth-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--primary-medium), var(--primary-light));
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}

.auth-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(26, 90, 127, 0.4);
background: linear-gradient(135deg, var(--primary-light), var(--primary-medium));
}

.auth-btn:active {
transform: translateY(0);
}

/* Auth Secondary Button (Abbrechen) */
.auth-btn-secondary {
width: 100%;
padding: 14px;
background: transparent;
color: var(--primary-medium);
border: 2px solid var(--primary-medium);
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}

.auth-btn-secondary:hover {
background: var(--accent-lighter);
transform: translateY(-2px);
}

.auth-btn-secondary:active {
transform: translateY(0);
}

/* Auth Error */
.auth-error {
display: none;
background: #F8D7DA;
color: #721C24;
padding: 12px;
border-radius: 8px;
border: 1px solid #F5C6CB;
margin-top: 15px;
font-size: 0.9rem;
}

.auth-error.show {
display: block;
animation: shake 0.5s ease;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}

/* Auth Warning */
.auth-warning {
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
color: #856404;
padding: 15px;
border-radius: 8px;
border: 2px solid #FFEAA7;
margin-bottom: 20px;
font-weight: 600;
text-align: center;
font-size: 0.9rem;
}

/* Auth Info */
.auth-info {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--neutral-light);
text-align: center;
}

.auth-info p {
margin: 8px 0;
color: var(--neutral-dark);
font-size: 0.85rem;
}

.auth-info code {
background: var(--accent-lighter);
padding: 2px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: var(--primary-dark);
font-weight: 600;
}

/* Password Requirements */
.password-requirements {
background: var(--accent-lighter);
padding: 12px;
border-radius: 6px;
margin-top: 10px;
border-left: 3px solid var(--primary-medium);
}

.password-requirements small {
color: var(--primary-dark);
font-weight: 600;
}

.password-requirements ul {
margin: 8px 0 0 20px;
padding: 0;
}

.password-requirements li {
color: var(--neutral-dark);
font-size: 0.8rem;
margin: 4px 0;
}

/* Header Actions */
.header-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.header-actions {
width: 100%;
display: flex;
justify-content: center;
}

/* Session Info */
.session-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--accent-lighter), rgba(168, 220, 244, 0.3));
padding: 10px 15px;
border-radius: 8px;
border: 2px solid var(--accent-light);
font-size: 0.85rem;
}

.session-info span {
color: var(--primary-dark);
font-weight: 600;
}

/* Logout Button */
.logout-btn {
background: linear-gradient(135deg, #DC3545, #C82333);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.logout-btn:hover {
background: linear-gradient(135deg, #C82333, #BD2130);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

/* Admin Security Section */
.admin-security-section {
background: linear-gradient(135deg, rgba(219, 237, 246, 0.5), rgba(168, 220, 244, 0.3));
padding: 20px;
border-radius: 12px;
border: 2px solid var(--accent-light);
margin-bottom: 20px;
}

.security-info {
display: flex;
flex-direction: column;
gap: 10px;
}

.security-info p {
margin: 5px 0;
font-size: 0.9rem;
}

.security-info strong {
color: var(--primary-medium);
}

/* Admin Logout Section */
.admin-logout-section {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
padding: 15px;
border-radius: 8px;
border: 2px solid #FFEAA7;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}

.logout-btn-admin {
background: linear-gradient(135deg, #DC3545, #C82333);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.logout-btn-admin:hover {
background: linear-gradient(135deg, #C82333, #BD2130);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.admin-session-info {
display: flex;
align-items: center;
gap: 10px;
color: var(--primary-dark);
font-weight: 600;
font-size: 0.9rem;
}

/* ============================================================================
   RESPONSIVE ANPASSUNGEN
   ============================================================================ */

@media (min-width: 768px) {
body {
padding: 20px;
font-size: 15px;
}

.container {
max-width: 1200px;
padding: 30px;
}

h1 {
font-size: 2.5rem;
}

.tabs {
flex-direction: row;
}

.tab {
font-size: 1rem;
}

.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.shoe-type-grid {
grid-template-columns: repeat(3, 1fr);
}

.shoe-type-card {
font-size: 0.85rem;
padding: 12px 8px;
}

.shoe-type-card:nth-child(5) {
grid-column: auto;
max-width: 100%;
}

table {
font-size: 0.85rem;
}

th, td {
padding: 12px;
}

.auth-container {
max-width: 480px;
padding: 40px;
}

.auth-header h2 {
font-size: 2rem;
}

.header-content {
flex-direction: row;
justify-content: space-between;
}

.header-actions {
width: auto;
}

.session-info {
flex-direction: row;
gap: 15px;
}
}

@media (min-width: 900px) {
.container {
max-width: 1400px;
}

.shoe-type-grid {
grid-template-columns: repeat(5, 1fr);
}

.modal-content {
max-width: 600px;
}
}

/* No Data Message */
.no-data {
padding: 20px;
text-align: center;
color: var(--neutral-dark);
font-style: italic;
background: var(--accent-lighter);
border-radius: 8px;
}

.no-results {
padding: 20px;
text-align: center;
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
border-radius: 8px;
border: 2px solid #FFEAA7;
}

.no-results h4 {
color: #856404;
margin-bottom: 10px;
}

.no-results p {
color: #856404;
font-size: 0.9rem;
}

/* Type Badges für Versorgungsseite/Gegenseite */
.type-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
}

.badge-versorgung {
background: linear-gradient(135deg, #D4EDDA, #C3E6CB);
color: #155724;
border: 1px solid #C3E6CB;
}

.badge-gegen {
background: linear-gradient(135deg, #D1ECF1, #BEE5EB);
color: #0C5460;
border: 1px solid #BEE5EB;
}

/* Leisten Info Box */
.leisten-info {
background: linear-gradient(135deg, #FFF3CD, #FFE69C);
padding: 15px;
border-radius: 8px;
border: 2px solid #FFEAA7;
margin-top: 15px;
}

.leisten-info h4 {
color: #856404;
margin-bottom: 8px;
}

.leisten-info p {
color: #856404;
margin: 0;
}

/* Export Buttons */
.export-buttons {
display: flex;
gap: 10px;
margin: 15px 0;
flex-wrap: wrap;
}

.export-btn {
flex: 1;
min-width: 150px;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.export-pdf {
background: linear-gradient(135deg, #DC3545, #C82333);
color: white;
}

.export-pdf:hover {
background: linear-gradient(135deg, #C82333, #BD2130);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

/* Print Styles - Minimal */
@media print {
body {
background: white;
}
}

/* Export Modal Styles */
.export-options {
padding: 10px 0;
}

.export-options p {
margin-bottom: 20px;
color: var(--neutral-dark);
font-size: 0.95rem;
}

.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 25px;
}

.radio-option {
display: flex;
align-items: flex-start;
padding: 15px;
border: 2px solid var(--accent-light);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
}

.radio-option:hover {
background: var(--accent-lighter);
border-color: var(--primary-medium);
}

.radio-option input[type="radio"] {
margin-top: 3px;
margin-right: 12px;
width: 18px;
height: 18px;
cursor: pointer;
}

.radio-option input[type="radio"]:checked + .radio-label {
color: var(--primary-medium);
}

.radio-label {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}

.radio-label strong {
font-size: 1rem;
color: var(--primary-dark);
}

.radio-label small {
font-size: 0.85rem;
color: var(--neutral-dark);
}

.modal-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}

.modal-buttons button {
flex: 1;
}