/* eBizCon Design System */
:root {
  --color-primary: #E4003A; /* eBizCon Rot */
  --color-secondary: #333333; /* Dunkelgrau */
  --color-accent: #00B2A9; /* Türkis */
  --color-light: #F5F5F5; /* Hellgrau */
  --color-white: #FFFFFF;
  --color-dark: #1A1A1A;
  --color-danger: #D9534F;
  --font-primary: 'Arial', sans-serif;
  --font-secondary: 'Georgia', serif;
  --root-font-size-small: 14px;
  --root-font-size-large: 16px;
  --focus-ring: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  --headings-font-weight: 700;
  --headings-color: var(--color-primary);
  --h1-font-size: 2.25rem;
  --h2-font-size: 1.875rem;
  --h3-font-size: 1.5rem;
  --link-color: var(--color-primary);
  --link-transition: color 0.3s ease;
  --link-hover-color: var(--color-accent);
  --button-filled-bg: var(--color-primary);
  --button-filled-bg-hover: var(--color-accent);
  --button-filled-text: var(--color-white);
  --button-filled-padding: 0.5rem 1.5rem;
  --button-filled-radius: 0;
  --button-filled-transition: all 0.3s ease;
  --button-outline-border: 2px solid var(--color-primary);
  --button-outline-text: var(--color-primary);
  --button-outline-padding: 0.5rem 1.5rem;
  --button-outline-radius: 0;
  --button-outline-transition: all 0.3s ease;
  --card-bg: white;
  --card-border: none;
  --card-radius: 0;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --card-transition: transform 0.3s ease, box-shadow 0.3s ease;
  --card-hover-transform: translateY(-5px);
  --card-hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  --form-control-radius: 0;
  --form-control-border: 1px solid #ddd;
  --form-control-padding-y: 0.75rem;
  --form-control-padding-x: 1rem;
  --form-control-focus-shadow: 0 0 0 0.2rem rgba(0, 102, 179, 0.25);
  --form-control-focus-border: var(--color-primary);
  --table-layout: separate;
  --table-border-spacing: 0;
  --table-header-bg: var(--color-primary);
  --table-header-text: var(--color-white);
  --table-header-border: none;
  --table-header-padding: 1rem;
  --table-zebra-bg: rgba(0, 102, 179, 0.05);
  --table-cell-padding: 1rem;
  --table-cell-border-bottom: 1px solid #eee;
  --navbar-bg: var(--color-white);
  --navbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --navbar-padding-y: 1rem;
  --navbar-brand-font-family: var(--font-secondary);
  --navbar-brand-font-weight: 700;
  --navbar-brand-font-size: 1.5rem;
  --navbar-brand-color: var(--color-primary);
  --nav-link-font-weight: 500;
  --nav-link-color: var(--color-secondary);
  --nav-link-padding: 0.5rem 1rem;
  --nav-link-margin-x: 0.25rem;
  --nav-link-hover-color: var(--color-primary);
  --nav-link-active-color: var(--color-primary);
  --badge-offset-top: -0.5rem;
  --badge-offset-right: -0.5rem;
  --badge-bg: var(--color-primary);
  --badge-text: white;
  --badge-radius: 0;
  --badge-padding: 0.25rem 0.5rem;
  --icon-stroke-width: 1px;
  --icon-stroke: #333333;
  --footer-bg: var(--color-secondary);
  --footer-text: var(--color-white);
  --footer-padding-y: 2rem;
  --footer-link-color: var(--color-accent);
  --footer-link-hover-color: var(--color-white);
  --md-heading-font-family: var(--font-secondary);
  --md-heading-color: var(--color-secondary);
  --md-headings-line-height: 1.3;
  --md-h1-size: 1.8rem;
  --md-h2-size: 1.4rem;
  --md-h3-size: 1.2rem;
  --md-text-line-height: 1.6;
  --md-list-indent: 1.5em;
  --md-item-spacing: 0.2em;
  --md-hr-border-top: 1px solid #e5e7eb;
  --md-hr-margin-y: 1.5em;
  --md-blockquote-border-left: 3px solid var(--color-accent);
  --md-blockquote-text-color: var(--color-secondary);
  --md-blockquote-bg: rgba(0, 178, 169, 0.05);
  --md-table-border: 1px solid #ddd;
  --md-thead-bg: var(--color-light);
  --md-thead-text: var(--color-secondary);
  --md-thead-border-bottom: 2px solid #d1d5db;
  --md-zebra-bg: #f9fafb;
  --md-code-block-bg: #2d2d2d;
  --md-code-block-text: #f0f0f0;
  --font-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --md-code-inline-bg: rgba(0,0,0,0.05);
  --md-code-inline-text: var(--color-secondary);
}

html {
  font-size: var(--root-font-size-small, 14px);
}

@media (min-width: 768px) {
  html {
    font-size: var(--root-font-size-large, 16px);
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: var(--focus-ring, 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: var(--font-primary);
  color: var(--color-secondary);
  background-color: var(--color-light);
  margin: 0;
  padding: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: var(--headings-font-weight, 700);
  color: var(--headings-color, var(--color-primary));
}

h1 { font-size: var(--h1-font-size, 2.25rem); margin-bottom: 1.5rem; }
h2 { font-size: var(--h2-font-size, 1.875rem); margin-bottom: 1.25rem; }
h3 { font-size: var(--h3-font-size, 1.5rem); margin-bottom: 1rem; }

a {
  color: var(--link-color, var(--color-primary));
  text-decoration: none;
  transition: var(--link-transition, color 0.3s ease);
}

a:hover {
  color: var(--link-hover-color, var(--color-accent));
}

/* Buttons */
.btn-primary {
  background-color: var(--button-filled-bg, var(--color-primary));
  border-color: var(--button-filled-bg, var(--color-primary));
  color: var(--button-filled-text, var(--color-white));
  padding: var(--button-filled-padding, 0.5rem 1.5rem);
  border-radius: var(--button-filled-radius, 0);
  font-weight: 600;
  transition: var(--button-filled-transition, all 0.3s ease);
}

.btn-primary:hover {
  background-color: var(--button-filled-bg-hover, var(--color-accent));
  border-color: var(--button-filled-bg-hover, var(--color-accent));
}

.btn-outline {
  background-color: transparent;
  border: var(--button-outline-border, 2px solid var(--color-primary));
  color: var(--button-outline-text, var(--color-primary));
  padding: var(--button-outline-padding, 0.5rem 1.5rem);
  border-radius: var(--button-outline-radius, 0);
  font-weight: 600;
  transition: var(--button-outline-transition, all 0.3s ease);
}

.btn-outline:hover {
  background-color: var(--button-outline-text, var(--color-primary));
  color: var(--color-white);
}

/* Cards */
.card {
  background-color: var(--card-bg, white);
  border: var(--card-border, none);
  border-radius: var(--card-radius, 0);
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
  overflow: hidden;
  transition: var(--card-transition, transform 0.3s ease, box-shadow 0.3s ease);
}

.card:hover {
  transform: var(--card-hover-transform, translateY(-5px));
  box-shadow: var(--card-hover-shadow, 0 8px 16px rgba(0, 0, 0, 0.15));
}

/* Forms */
.form-control {
  border-radius: var(--form-control-radius, 0);
  border: var(--form-control-border, 1px solid #ddd);
  padding: var(--form-control-padding-y, 0.75rem) var(--form-control-padding-x, 1rem);
}

.form-control:focus {
  box-shadow: var(--form-control-focus-shadow, 0 0 0 0.2rem rgba(0, 102, 179, 0.25));
  border-color: var(--form-control-focus-border, var(--color-primary));
}

/* Tables */
.table {
  border-collapse: var(--table-layout, separate);
  border-spacing: var(--table-border-spacing, 0);
}

.table thead th {
  background-color: var(--table-header-bg, var(--color-primary));
  color: var(--table-header-text, var(--color-white));
  font-weight: 600;
  border: var(--table-header-border, none);
  padding: var(--table-header-padding, 1rem);
}

.table tbody tr:nth-child(even) {
  background-color: var(--table-zebra-bg, rgba(0, 102, 179, 0.05));
}

.table tbody td {
  padding: var(--table-cell-padding, 1rem);
  border-top: none;
  border-bottom: var(--table-cell-border-bottom, 1px solid #eee);
}

/* Navigation */
.navbar {
  background-color: var(--navbar-bg, var(--color-white));
  box-shadow: var(--navbar-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
  padding: var(--navbar-padding-y, 1rem) 0;
}

.navbar-brand {
  font-family: var(--navbar-brand-font-family, var(--font-secondary));
  font-weight: var(--navbar-brand-font-weight, 700);
  font-size: var(--navbar-brand-font-size, 1.5rem);
  color: var(--navbar-brand-color, var(--color-primary));
}

.nav-link {
  font-weight: var(--nav-link-font-weight, 500);
  color: var(--nav-link-color, var(--color-secondary));
  position: relative;
  padding: var(--nav-link-padding, 0.5rem 1rem);
  margin: 0 var(--nav-link-margin-x, 0.25rem);
}

.nav-link:hover {
  color: var(--nav-link-hover-color, var(--color-primary));
}

.nav-link.active {
  color: var(--nav-link-active-color, var(--color-primary));
}

/* Badge */
.badge {
  position: absolute;
  top: var(--badge-offset-top, -0.5rem);
  right: var(--badge-offset-right, -0.5rem);
  background-color: var(--badge-bg, var(--color-primary));
  color: var(--badge-text, white);
  border-radius: var(--badge-radius, 0);
  padding: var(--badge-padding, 0.25rem 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icons */
.icon {
  stroke-width: var(--icon-stroke-width, 1px);
  stroke: var(--icon-stroke, #333333);
}

/* Footer */
footer {
  background-color: var(--footer-bg, var(--color-secondary));
  color: var(--footer-text, var(--color-white));
  padding: var(--footer-padding-y, 2rem) 0;
}

footer a {
  color: var(--footer-link-color, var(--color-accent));
}

footer a:hover {
  color: var(--footer-link-hover-color, var(--color-white));
  text-decoration: none;
}

/* Manuelle Stile für von marked.js generiertes HTML im Chat */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    font-family: var(--md-heading-font-family, var(--font-secondary)); 
    color: var(--md-heading-color, var(--color-secondary)); 
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: var(--md-headings-line-height, 1.3);
}

/* Spezifische Größenanpassungen, falls globale nicht passen */
.message-content h1 { font-size: var(--md-h1-size, 1.8rem); } 
.message-content h2 { font-size: var(--md-h2-size, 1.4rem); }
.message-content h3 { font-size: var(--md-h3-size, 1.2rem); }

.message-content p {
    margin-bottom: 0.75em;
    line-height: var(--md-text-line-height, 1.6);
}

.message-content ul,
.message-content ol {
    margin-left: var(--md-list-indent, 1.5em);
    margin-bottom: 0.75em;
    list-style-position: outside;
}

.message-content ul {
    list-style-type: disc;
}

.message-content ol {
    list-style-type: decimal;
}

.message-content li {
    margin-bottom: var(--md-item-spacing, 0.2em);
}

.message-content strong {
    font-weight: bold;
}

.message-content em {
    font-style: italic;
}

.message-content a {
    text-decoration: underline; /* Explizit für Markdown-Links, falls global anders */
}

.message-content hr {
    border: 0;
    border-top: var(--md-hr-border-top, 1px solid #e5e7eb);
    margin-top: var(--md-hr-margin-y, 1.5em);
    margin-bottom: var(--md-hr-margin-y, 1.5em);
}

.message-content blockquote {
    border-left: var(--md-blockquote-border-left, 3px solid var(--color-accent)); /* Akzentfarbe für Zitate */
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
    font-style: italic;
    color: var(--md-blockquote-text-color, var(--color-secondary)); /* Haupttextfarbe, leicht abgedunkelt */
    background-color: var(--md-blockquote-bg, rgba(0, 178, 169, 0.05)); /* Leichter Akzent-Hintergrund */
}

/* Tabellen-Styling für Markdown im Chat */
.message-content table {
    width: auto; /* Passt sich Inhalt an, oder 100% wenn gewünscht */
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 0.9em;
    border: var(--md-table-border, 1px solid #ddd); /* Konsistent mit .form-control */
}

.message-content th,
.message-content td {
    border: 1px solid #ddd;
    padding: 0.5em 0.75em;
    text-align: left;
}

.message-content thead th {
    background-color: var(--md-thead-bg, var(--color-light));
    color: var(--md-thead-text, var(--color-secondary));
    font-weight: bold;
    border-bottom: var(--md-thead-border-bottom, 2px solid #d1d5db); /* Mittleres Grau als Trennlinie */
}

.message-content tbody tr:nth-child(even) {
    background-color: var(--md-zebra-bg, #f9fafb); /* Sehr helles Grau für Zebra-Streifen */
}

/* Code-Blöcke und Inline-Code */
.message-content pre {
    background-color: var(--md-code-block-bg, #2d2d2d); /* Dunkler Hintergrund für Codeblöcke */
    color: var(--md-code-block-text, #f0f0f0); /* Heller Text für Codeblöcke */
    padding: 0.75em;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1em;
    font-family: var(--font-code, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace);
    font-size: 0.85em;
    line-height: 1.4;
}

.message-content code {
    font-family: var(--font-code, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace);
    background-color: var(--md-code-inline-bg, rgba(0,0,0,0.05)); /* Leichter Hintergrund für Inline-Code */
    color: var(--md-code-inline-text, var(--color-secondary));
    padding: 0.15em 0.3em;
    border-radius: 3px;
    font-size: 0.85em;
}

.message-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}