/* ===================================================================

   DRK Web – Konsolidierte CSS-Basis nach Styleguide

   Ziel: Einheitliche Buttons, Eingabefelder, Typografie & States

   Quelle: https://styleguide.drk.de …/digital/webseite

   Version: 1.7.0

   Erstellt: 2025-11-01

   =================================================================== */



/* ----------------------------

   1) Design Tokens (CSS Custom Properties)

   ---------------------------- */

:root {

  /* Rot-Töne (Styleguide) */

  --drk-red:        rgb(230, 0, 5);    /* Primär: Buttons, Headlines, Icons, etc. */

  --drk-softred:    rgb(228, 100, 80); /* Headlines/Icons je nach Kontext */

  --drk-darkred:    rgb(165, 30, 15);  /* Hover/Active */



  /* Blau-Töne (Styleguide) */

  --drk-darkblue:   rgb(0, 45, 85);    /* Navigation/Icons/Buttons/Hover-Effekte */

  --drk-midblue:    rgb(0, 140, 205);  /* Hover-Effekte */

  --drk-blue:       rgb(34, 117, 208); /* Fließtext-Links */

  --drk-lightblue:  rgb(235, 245, 255);/* Form-Hintergründe/Hover im Burger-Menü */



  /* Grau-Töne (Styleguide) */

  --drk-darkgray:   rgb(85, 79, 74);   /* Fließtext */

  --drk-midgray:    rgb(180, 180, 180);/* Trennlinien, neutrale Rahmen */

  --drk-lightgray:  rgb(239, 238, 234);/* alternative Hintergründe/Flächen */

  --drk-landgray:   rgb(217, 217, 217);/* spezielle Kartenhintergründe */



  /* Neutrale */

  --drk-white:      #ffffff;

  --drk-black:      #000000;



  /* Typo & Rhythmus */

  --font-family-base: "Helvetica Neue", "Open Sans", Arial, Helvetica, sans-serif;

  --font-size-base: 16px;      /* 1rem */

  --line-height-base: 1.5;



  /* Maße & Rundungen */

  --radius-sm: 4px;

  --radius-md: 6px;

  --radius-lg: 8px;

  --space-1: 0.25rem; /* 4px  */

  --space-2: 0.5rem;  /* 8px  */

  --space-3: 0.75rem; /* 12px */

  --space-4: 1rem;    /* 16px */

  --space-6: 1.5rem;  /* 24px */

  --space-8: 2rem;    /* 32px */



  /* Fokus (WCAG 2.2 konform, klar sichtbar) */

  --focus-ring: 3px;

  --focus-color: var(--drk-midblue);

  --focus-offset: 2px;



  /* Button-Defaults */

  --btn-bg: var(--drk-red);

  --btn-bg-hover: var(--drk-darkred);

  --btn-text: var(--drk-white);

  --btn-padding-y: 0.625rem; /* 10px */

  --btn-padding-x: 1rem;     /* 16px */

  --btn-gap: 0.5rem;

  --btn-border-radius: var(--radius-md);

  --btn-font-weight: 600;



  /* Eingabefeld-Defaults */

  --field-font-size: 1rem; /* = 16px */

  --field-padding-y: 0.5rem;

  --field-padding-x: 0.75rem;

  --field-border: 1px solid var(--drk-midgray);

  --field-border-radius: var(--radius-sm);

  --field-bg: var(--drk-white);

  --field-bg-alt: var(--drk-lightblue); /* für große Formflächen */

  --field-color: var(--drk-darkgray);

  --field-placeholder: color-mix(in srgb, var(--drk-darkgray) 60%, white 40%);

}



/* ----------------------------

   2) Basistypografie

   ---------------------------- */

html { 

  font-size: 100%; /* 16px Standard */

  height: 100%;

}

body {

  font-family: var(--font-family-base);

  font-size: var(--font-size-base);

  line-height: var(--line-height-base);

  color: var(--drk-darkgray);

  background: var(--drk-white);

  margin: 0;

  padding: 0;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



/* Main Content nimmt verfügbaren Platz */

.main-content {

  flex: 1 0 auto;

}



/* Headlines: laut Styleguide Rot/Softrot einsetzen */

h1, h2, h3 {

  color: var(--drk-softred);

  font-weight: 700;

  line-height: 1.2;

  margin: var(--space-4) 0 var(--space-2);

}

h4, h5, h6 {

  color: var(--drk-darkgray);

  font-weight: 600;

  margin: var(--space-3) 0 var(--space-2);

}



/* Fließtext-Links in Blau, Hover etwas kräftiger; underlines für Klarheit */

a {

  color: var(--drk-blue);

  text-decoration: underline;

  text-underline-offset: 2px;

}

a:hover, a:focus-visible {

  color: var(--drk-midblue);

}



/* Trennlinien/Gruppierungsflächen gemäß Grau-Palette */

.hr, hr {

  border: 0;

  border-top: 1px solid var(--drk-midgray);

  margin: var(--space-6) 0;

}

.section--alt {

  background: var(--drk-lightgray);

  padding: var(--space-6) 0;

}



/* ----------------------------

   3) Fokus-Styles (WCAG 2.2)

   Gut sichtbar, nicht nur Farbe, ausreichend Kontrast.

   ---------------------------- */

:focus-visible {

  outline: var(--focus-ring) solid var(--focus-color);

  outline-offset: var(--focus-offset);

}

a:focus-visible,

button:focus-visible,

[role="button"]:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

  outline: var(--focus-ring) solid var(--focus-color);

  outline-offset: var(--focus-offset);

}



/* ----------------------------

   4) Buttons – Einheitliche Gestaltung

   .btn  = Primär (Rot)

   .btn--secondary = Sekundär (Kontur in Dunkelblau)

   .btn--ghost     = Textlink-Stil mit Pads

   ---------------------------- */

.btn {

  -webkit-font-smoothing: antialiased;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--btn-gap);

  background: var(--btn-bg);

  color: var(--btn-text);

  padding: var(--btn-padding-y) var(--btn-padding-x);

  border: none;

  border-radius: var(--btn-border-radius);

  font-weight: var(--btn-font-weight);

  font-size: 1rem;

  line-height: 1.2;

  cursor: pointer;

    text-decoration: none;

  transition: background-color 0.2s ease, transform 0.1s ease;

}

.btn:hover {

  background: var(--btn-bg-hover);

}

.btn:active {

  transform: translateY(0.5px);

}



/* Sekundär: Umriss in Dunkelblau, Text Dunkelblau, dezente Hintergründe */

.btn--secondary {

  background: transparent;

  color: var(--drk-darkblue);

  border: 2px solid var(--drk-darkblue);

}

.btn--secondary:hover {

  background: color-mix(in srgb, var(--drk-darkblue) 10%, white);

}



/* Ghost: wie Link, mit Pads – nutzt DRK-Blau */

.btn--ghost {

  background: transparent;

  color: var(--drk-blue);

  border: 0;

  padding: var(--btn-padding-y) 0;

}

.btn--ghost:hover {

  color: var(--drk-midblue);

  text-decoration: underline;

}



/* Disabled-Status: alle Buttons */

.btn[disabled],

.btn:disabled,

.btn[aria-disabled="true"] {

  opacity: 0.5;

  cursor: not-allowed;

  pointer-events: none;

}



/* Button-Größen */

.btn--small {

  padding: 0.375rem 0.75rem;

  font-size: 0.875rem;

}

.btn--large {

  padding: 0.875rem 1.5rem;

  font-size: 1.125rem;

}



/* ----------------------------

   5) Formulare – Einheitliche Felder

   Einheitliche Schriftgröße, Abstände, Zustände.

   ---------------------------- */

label {

  display: inline-block;

  margin-bottom: var(--space-2);

  font-weight: 600;

  color: var(--drk-darkgray);

}



input[type="text"],

input[type="email"],

input[type="tel"],

input[type="url"],

input[type="search"],

input[type="password"],

input[type="number"],

input[type="date"],

input[type="datetime-local"],

select,

textarea {

  font-family: var(--font-family-base);

  font-size: var(--field-font-size);

  color: var(--field-color);

  background: var(--field-bg);

  border: var(--field-border);

  border-radius: var(--field-border-radius);

  width: 100%;

  max-width: 600px;

  padding: var(--field-padding-y) var(--field-padding-x);

  line-height: 1.4;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

}

input::placeholder,

textarea::placeholder {

  color: var(--field-placeholder);

}



/* Kontextabhängige Feldbreiten */

input[type="email"] {

  max-width: 400px;

}

input[type="password"] {

  max-width: 350px;

}

input[type="tel"] {

  max-width: 250px;

}

input[type="url"] {

  max-width: 500px;

}

input[type="date"],

input[type="datetime-local"] {

  max-width: 250px;

}

input[type="number"] {

  max-width: 200px;

}



/* PLZ, Hausnummer, etc. */

input[name*="plz"],

input[name*="PLZ"],

input[id*="plz"] {

  max-width: 150px;

}

input[name*="hausnummer"],

input[name*="Hausnummer"] {

  max-width: 120px;

}



/* Textareas größer, aber begrenzt */

textarea {

  max-width: 800px;

  min-height: 120px;

}



/* Select-Felder */

select {

  max-width: 400px;

}



/* Utility-Klassen für spezielle Fälle */

.field--full {

  max-width: 100% !important;

}

.field--small {

  max-width: 150px !important;

}

.field--medium {

  max-width: 300px !important;

}

.field--large {

  max-width: 600px !important;

}



/* Fokus und Hover – deutliche, markenkonforme Hervorhebung */

input:hover,

select:hover,

textarea:hover {

  border-color: var(--drk-darkblue);

}

input:focus,

select:focus,

textarea:focus {

  border-color: var(--drk-darkblue);

  box-shadow: 0 0 0 var(--focus-ring) color-mix(in srgb, var(--drk-lightblue) 60%, var(--drk-midblue) 40%);

  outline: none; /* Fokus wird über :focus-visible global dargestellt */

}



/* Fehler- und Erfolgszustände */

.is-invalid,

input[aria-invalid="true"] {

  border-color: var(--drk-red);

}

.is-valid {

  border-color: var(--drk-darkblue);

}



/* Gruppierte Formularbereiche mit hellblauem Flächenhintergrund */

.form-area {

  background: var(--drk-lightblue);

  padding: var(--space-6);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-4);

}



/* Form Fields Container */

.form-field {

  margin-bottom: var(--space-4);

}



/* Form Rows für Side-by-Side Felder */

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-4);

  margin-bottom: var(--space-4);

}



/* Checkboxen/Radio – Mindestgröße für Touch, Fokus sichtbar */

input[type="checkbox"],

input[type="radio"] {

  width: 1.125rem;

  height: 1.125rem;

  cursor: pointer;

}



/* Hilfe-/Fehlermeldungen unter Feldern */

.form-hint {

  margin-top: var(--space-2);

  color: var(--drk-darkgray);

  font-size: 0.9375rem;

}

.form-error {

  margin-top: var(--space-2);

  color: var(--drk-red);

  font-weight: 600;

}



/* ----------------------------

   6) Karten/Info-Flächen

   ---------------------------- */

.card {

  background: var(--drk-white);

  border: 1px solid var(--drk-midgray);

  border-radius: var(--radius-md);

  padding: var(--space-6);

  margin-bottom: var(--space-4);

}

.card--alt {

  background: var(--drk-lightgray);

}



/* Stat Cards für Dashboard */

.stat-card {

  background: var(--drk-white);

  border: 1px solid var(--drk-midgray);

  border-radius: var(--radius-md);

  padding: var(--space-4);

  text-align: center;

}

.stat-card__value {

  font-size: 2rem;

  font-weight: 700;

  color: var(--drk-softred);

  margin-bottom: var(--space-2);

}

.stat-card__label {

  color: var(--drk-darkgray);

  font-size: 0.875rem;

}



/* ----------------------------

   7) Alerts & Info-Boxen

   ---------------------------- */

.alert {

  padding: var(--space-4);

  border-radius: var(--radius-sm);

  margin-bottom: var(--space-4);

  border-left: 4px solid;

}

.alert-info {

  background: var(--drk-lightblue);

  border-left-color: var(--drk-midblue);

  color: var(--drk-darkgray);

}

.alert-warning {

  background: #fff3cd;

  border-left-color: #ff9800;

  color: var(--drk-darkgray);

}

.alert-error {

  background: #ffe6e6;

  border-left-color: var(--drk-red);

  color: var(--drk-darkgray);

}

.alert-success {

  background: #e8f5e9;

  border-left-color: #2d7d2d;

  color: var(--drk-darkgray);

}



/* ----------------------------

   8) Badges & Status-Indicators

   ---------------------------- */

.badge {

  display: inline-block;

  padding: 0.25rem 0.75rem;

  border-radius: var(--radius-sm);

  font-size: 0.875rem;

  font-weight: 600;

  text-align: center;

}

.badge-success {

  background: #2d7d2d;

  color: var(--drk-white);

}

.badge-warning {

  background: #ff9800;

  color: var(--drk-white);

}

.badge-error {

  background: var(--drk-red);

  color: var(--drk-white);

}

.badge-secondary {

  background: var(--drk-midgray);

  color: var(--drk-white);

}

.badge-info {

  background: var(--drk-midblue);

  color: var(--drk-white);

}



/* ----------------------------

   9) Tabellen

   ---------------------------- */

.data-table,

.einsaetze-table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: var(--space-4);

  font-size: 1rem;

}

.data-table th,

.data-table td,

.einsaetze-table th,

.einsaetze-table td {

  padding: var(--space-4);

  text-align: left;

  border-bottom: 1px solid var(--drk-midgray);

}

.data-table th,

.einsaetze-table th {

  background: var(--drk-lightgray);

  font-weight: 600;

  color: var(--drk-darkgray);

  font-size: 1.05rem;

}

.data-table tr:hover,

.einsaetze-table tbody tr:hover {

  background: var(--drk-lightblue);

}

.einsaetze-table a {

  font-weight: 500;

  font-size: 1.05rem;

}



/* Templates Table - größer und schöner */

.templates-table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: var(--space-4);

  font-size: 1rem;

}

.templates-table th,

.templates-table td {

  padding: var(--space-4);

  text-align: left;

  border-bottom: 1px solid var(--drk-midgray);

}

.templates-table th {

  background: var(--drk-lightgray);

  font-weight: 600;

  color: var(--drk-darkgray);

  font-size: 1.05rem;

}

.templates-table tbody tr:hover {

  background: var(--drk-lightblue);

}

.templates-table a {

  font-weight: 500;

  font-size: 1.05rem;

}



/* ----------------------------

   10) Layout & Container

   ---------------------------- */

.site-header {

  background: var(--drk-red);

  color: var(--drk-white);

  padding: var(--space-4) 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}

.header-container {

    max-width: 1200px;

    margin: 0 auto;

  padding: 0 var(--space-4);

    display: flex;

    justify-content: space-between;

  align-items: center;

}

.header-brand a {

  color: var(--drk-white);

    text-decoration: none;

}

.header-brand a:hover,

.header-brand a:focus-visible {

  color: var(--drk-white);

  opacity: 0.9;

}

.site-title {

  margin: 0;

  font-size: 1.5rem;

}

.logo-text {

  font-weight: 700;

}

.logo-subtitle {

  font-weight: 400;

  font-size: 0.875rem;

  margin-left: var(--space-2);

}



.content-container {

  max-width: 1200px;

  margin: var(--space-6) auto;

  padding: 0 var(--space-4);

}



/* Navigation */

.main-nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

  display: flex;

  gap: var(--space-4);

}

.main-nav a {

  color: var(--drk-white);

    text-decoration: none;

  font-weight: 500;

  padding: var(--space-2) 0;

  border-bottom: 2px solid transparent;

  transition: border-color 0.2s ease;

}

.main-nav a:hover,

.main-nav a[aria-current="page"] {

  border-bottom-color: var(--drk-white);

}

.main-nav a:focus-visible {

  outline-color: var(--drk-white);

}



/* Dropdown-Menüs */

.has-submenu {

  position: relative;

}

.nav-submenu-toggle {

  background: transparent;

  color: var(--drk-white);

  border: none;

  cursor: pointer;

  font-size: 1rem;

  font-weight: 500;

  padding: var(--space-2) 0;

  display: flex;

  align-items: center;

  gap: var(--space-1);

}

.nav-submenu-toggle:hover {

  opacity: 0.9;

}

.nav-submenu {

  position: absolute;

  top: 100%;

  left: 0;

  background: var(--drk-white);

  border: 1px solid var(--drk-midgray);

    border-radius: var(--radius-sm);

  min-width: 200px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  list-style: none;

  margin: var(--space-2) 0 0;

  padding: var(--space-2) 0;

  z-index: 100;

}

.nav-submenu[aria-hidden="true"] {

  display: none;

}

.nav-submenu a {

  display: block;

  padding: var(--space-2) var(--space-4);

  color: var(--drk-darkgray);

  border-bottom: none;

}

.nav-submenu a:hover {

  background: var(--drk-lightblue);

  border-bottom: none;

}



/* User Menu */

.user-menu {

    position: relative;

}

.user-menu-toggle {

  background: transparent;

  color: var(--drk-white);

  border: none;

  cursor: pointer;

  font-size: 1rem;

  font-weight: 500;

  padding: var(--space-2) var(--space-3);

    display: flex;

    align-items: center;

  gap: var(--space-2);

}

.user-menu-toggle:hover {

  background: rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-sm);

}

.user-menu-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

  background: var(--drk-white);

  border: 1px solid var(--drk-midgray);

  border-radius: var(--radius-sm);

  min-width: 180px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    list-style: none;

  margin: var(--space-2) 0 0;

  padding: var(--space-2) 0;

  z-index: 100;

}

.user-menu-dropdown[aria-hidden="true"] {

  display: none;

}

.user-menu-dropdown a {

    display: block;

  padding: var(--space-2) var(--space-4);

  color: var(--drk-darkgray);

    text-decoration: none;

}

.user-menu-dropdown a:hover {

  background: var(--drk-lightblue);

}



/* Breadcrumb - nur noch in Meldungen/Dienste/Einsätze */

.breadcrumb {

  display: flex;

  list-style: none;

  padding: var(--space-3) 0;

  margin: 0;

  font-size: 0.875rem;

}

.breadcrumb li {

  display: flex;

  align-items: center;

}

.breadcrumb li + li:before {

  content: "›";

  margin: 0 var(--space-2);

  color: var(--drk-midgray);

}

.breadcrumb a {

  color: var(--drk-blue);

}

.breadcrumb a:hover {

  color: var(--drk-midblue);

}



/* Skip Link */

.skip-link {

  position: absolute;

  top: -100px;

  left: 0;

  background: var(--drk-red);

  color: var(--drk-white);

  padding: var(--space-2) var(--space-4);

  text-decoration: none;

  z-index: 1000;

}

.skip-link:focus {

  top: 0;

}



/* Page Header */

.page-header {

  margin-bottom: var(--space-6);

}

.page-header h1 {

  margin-bottom: var(--space-2);

}



/* Timeline */

.timeline {

  position: relative;

  padding-left: var(--space-6);

}

.timeline-item {

  position: relative;

  padding-bottom: var(--space-4);

  border-left: 2px solid var(--drk-midgray);

  padding-left: var(--space-4);

  margin-bottom: var(--space-4);

}

.timeline-marker {

  position: absolute;

  left: -0.75rem;

  top: 0;

  width: 1.5rem;

  height: 1.5rem;

  border-radius: 50%;

  background: var(--drk-white);

  border: 2px solid var(--drk-midgray);

    display: flex;

    align-items: center;

    justify-content: center;

  font-size: 0.75rem;

}

.timeline-content h3,

.timeline-content h4 {

  margin-top: 0;

  color: var(--drk-darkgray);

}



/* Footer - Sticky (immer unten) */

.site-footer {

  background: var(--drk-lightgray);

  padding: var(--space-4) 0;

  margin-top: auto;

  border-top: 1px solid var(--drk-midgray);

  flex-shrink: 0;

}

.footer-content {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--space-4);

    display: flex;

  justify-content: space-between;

  align-items: center;

    flex-wrap: wrap;

  gap: var(--space-4);

  color: var(--drk-darkgray);

  font-size: 0.875rem;

}

.footer-nav {

    display: flex;

    align-items: center;

  gap: var(--space-2);

}

.footer-nav a {

  color: var(--drk-blue);

  text-decoration: underline;

}

.footer-nav a:hover {

  color: var(--drk-midblue);

}

@media (max-width: 768px) {

  .footer-content {

    flex-direction: column;

    text-align: center;

  }

}



/* ----------------------------

   11) Dashboard-Spezifisch

   ---------------------------- */

/* Highlight Banner für wichtige Call-to-Actions */

.highlight-banner {

  background: linear-gradient(135deg, #005fcc 0%, #0077e6 100%);

  color: var(--drk-white);

  border: none;

  padding: var(--space-6);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-6);

}

.highlight-banner h2 {

  color: var(--drk-white);

  margin: 0 0 var(--space-2) 0;

  font-size: 1.8rem;

}

.highlight-banner p {

  margin: 0;

  opacity: 0.9;

  font-size: 1.1rem;

}

.highlight-banner__content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-6);

}

.highlight-banner .btn {

  background: var(--drk-white);

  color: #005fcc;

  border: none;

  font-size: 1.2rem;

  padding: 1rem 2rem;

  font-weight: bold;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.highlight-banner .btn:hover {

  background: var(--drk-lightgray);

  color: #0077e6;

}



/* Section Header mit Action */

.section-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: var(--space-4);

}

.section-header h2 {

  margin: 0;

}



/* Dashboard Sections */

.dashboard-section {

  margin-bottom: var(--space-8);

}



/* Dashboard Grid */

.dashboard-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-4);

}



/* Dashboard Cards */

.dashboard-card {

  display: flex;

  align-items: flex-start;

  gap: var(--space-4);

  background: var(--drk-white);

  border: 2px solid var(--drk-midgray);

    border-radius: var(--radius-md);

  padding: var(--space-4);

  text-decoration: none;

  color: inherit;

  transition: all 0.2s ease;

}

.dashboard-card:hover {

  border-color: var(--drk-blue);

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  transform: translateY(-2px);

}

.dashboard-card--large {

  grid-column: span 2;

}

@media (max-width: 768px) {

  .dashboard-card--large {

    grid-column: span 1;

  }

}



.dashboard-card__icon {

  font-size: 2rem;

  flex-shrink: 0;

}



.dashboard-card__content {

  flex: 1;

}



.dashboard-card__title {

  margin: 0 0 var(--space-2) 0;

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--drk-darkgray);

}



.dashboard-card__meta {

  margin: 0;

  font-size: 0.875rem;

  color: var(--drk-midgray);

  line-height: 1.6;

}



.dashboard-card__location {

  margin: var(--space-2) 0 0 0;

  font-size: 0.875rem;

  color: var(--drk-darkblue);

  font-weight: 500;

}



/* Meldungs-Karte */

.meldung-card {

  border-left: 4px solid;

  padding: var(--space-4);

  margin-bottom: var(--space-6);

  background: var(--drk-white);

  border-radius: var(--radius-sm);

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.meldung-card--eingereicht { border-left-color: #f39c12; }

.meldung-card--bestätigt { border-left-color: #27ae60; }

.meldung-card--abgelehnt { border-left-color: #95a5a6; }



/* ----------------------------
   Admin-Seiten Styles
   ---------------------------- */

/* Admin Container */
.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6);
}

.admin-container .intro-text {
  color: var(--drk-midgray);
  font-size: 1.1rem;
  margin-bottom: var(--space-6);
}

/* Admin Sections */
.admin-section {
  margin-bottom: var(--space-8);
}

.admin-section h2 {
  color: var(--drk-darkblue);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--drk-lightgray);
  padding-bottom: var(--space-3);
}

/* Info Grid (System-Info) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.info-card {
  background: var(--drk-white);
  border: 1px solid var(--drk-lightgray);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-label {
  font-size: 0.875rem;
  color: var(--drk-midgray);
  font-weight: 500;
}

.info-value {
  font-size: 1.25rem;
  color: var(--drk-darkblue);
  font-weight: 600;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: linear-gradient(135deg, var(--drk-white) 0%, #f8f9fa 100%);
  border: 2px solid var(--drk-lightgray);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--drk-blue);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.stat-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--drk-red);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: 0.95rem;
  color: var(--drk-darkgray);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.stat-sublabel {
  font-size: 0.8rem;
  color: var(--drk-midgray);
  line-height: 1.4;
}

/* Admin Menu Grid (Verwaltungsfunktionen) */
.admin-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}

.admin-menu-card {
  background: var(--drk-white);
  border: 2px solid var(--drk-lightgray);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.admin-menu-card:hover {
  border-color: var(--drk-red);
  box-shadow: 0 8px 20px rgba(230, 0, 0, 0.15);
  transform: translateY(-4px);
}

.admin-menu-card:focus {
  outline: 3px solid var(--drk-blue);
  outline-offset: 2px;
}

.admin-card-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.admin-menu-card h3 {
  color: var(--drk-darkblue);
  font-size: 1.25rem;
  margin: 0;
  font-weight: 700;
}

.admin-menu-card p {
  color: var(--drk-midgray);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .admin-container {
    padding: var(--space-4);
  }
  
  .admin-menu-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-value {
    font-size: 1.75rem;
  }
}



/* ----------------------------

   Qualifikations-Matrix & Meldungen-Tabellen (Dienste-View)

   ---------------------------- */



.qualifikations-matrix,

.meldungen-table,

.templates-table {

  width: 100%;

  min-width: 800px;

  border-collapse: collapse;

  margin-bottom: var(--space-4);

}



.qualifikations-matrix thead tr,

.meldungen-table thead tr,

.templates-table thead tr {

  background: #f8f9fa;

}



.qualifikations-matrix th,

.qualifikations-matrix td,

.meldungen-table th,

.meldungen-table td,

.templates-table th,

.templates-table td {

  padding: 0.75rem;

  border: 1px solid #dee2e6;

}



.qualifikations-matrix th,

.meldungen-table th,

.templates-table th {

  font-weight: bold;

  text-align: left;

}



.qualifikations-matrix td:nth-child(2),

.qualifikations-matrix td:nth-child(3),

.qualifikations-matrix td:nth-child(4) {

  text-align: center;

}



.qualifikations-matrix tfoot tr {

  background: #f1f3f4;

  font-weight: bold;

}



.qualifikations-matrix .erfuellt {

  background: #e8f5e9;

  font-weight: bold;

  text-align: center;

}



.qualifikations-matrix .nicht-erfuellt {

  color: #ccc;

  text-align: center;

}



/* Meldungen-Tabelle: Status-Spalte zentriert */

.meldungen-table td:nth-child(2) {

  text-align: center;

}



/* Templates-Tabelle: Aktionen-Spalte */

.templates-table td:last-child {

  white-space: nowrap;

}



.templates-table td:last-child a {

  margin-right: var(--space-2);

}



.templates-table td:last-child a:last-child {

  margin-right: 0;

}



/* ----------------------------

   Filter

   ---------------------------- */



.filters {

  margin-bottom: var(--space-6);

  padding: var(--space-4);

  background: var(--drk-lightgray);

  border-radius: var(--radius-md);

}



/* Filter-Form: Felder nebeneinander */

.filter-form {

  display: grid;

  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;

  gap: var(--space-3);

  align-items: center;

}



.filter-form label {

  font-weight: 600;

  white-space: nowrap;

}



.filter-form select {

  min-width: 200px;

}



.filter-form button {

  grid-column: -1;

}



@media (max-width: 1200px) {

  .filter-form {

    grid-template-columns: auto 1fr;

    gap: var(--space-2);

  }

  

  .filter-form button {

    grid-column: 1 / -1;

    width: 100%;

  }

}



.meldung-card__header {

  display: grid;

  grid-template-columns: 2fr 1.5fr 1fr auto;

  gap: var(--space-6);

  align-items: center;

  margin-bottom: var(--space-4);

}



.meldung-card__title {

  margin: 0 0 var(--space-2) 0;

  font-size: 1.1rem;

}



.meldung-card__meta {

  font-size: 0.9rem;

  color: var(--drk-midgray);

}



.meldung-card__label {

  font-weight: 600;

  font-size: 0.85rem;

  color: var(--drk-midgray);

  margin-bottom: var(--space-1);

}



.meldung-card__value {

  font-size: 0.95rem;

}



.meldung-card__strength {

  font-size: 1.5rem;

    font-weight: bold;

  color: #005fcc;

}



.meldung-card__qualifikationen {

  background: var(--drk-lightgray);

  padding: var(--space-4);

  border-radius: var(--radius-sm);

  margin-bottom: var(--space-4);

}



.meldung-card__qual-label {

  font-weight: 600;

  font-size: 0.85rem;

  color: var(--drk-midgray);

  margin-bottom: var(--space-3);

}



.meldung-card__qual-list {

  display: flex;

  gap: var(--space-4);

  flex-wrap: wrap;

}



.meldung-card__qual-item {

  background: var(--drk-white);

  padding: var(--space-2) var(--space-4);

  border-radius: var(--radius-sm);

  border: 1px solid var(--drk-midgray);

}



.meldung-card__qual-count {

  font-weight: bold;

  color: #005fcc;

}



.meldung-card__qual-code {

  color: var(--drk-midgray);

}



.meldung-card__qual-name {

  font-size: 0.85rem;

  color: var(--drk-midgray);

}



.meldung-card__footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-4);

}



.meldung-card__date {

  font-size: 0.85rem;

  color: var(--drk-midgray);

}



.meldung-card__actions {

  display: flex;

  gap: var(--space-2);

}



/* ----------------------------

   12) Auth-Seiten (Login, Register)

   ---------------------------- */



/* Login/Register Container - zentriert */

.login-container,

.register-container,

.confirm-container {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: calc(100vh - 300px);

  padding: var(--space-6) var(--space-4);

}



.login-box,

.register-box,

.confirm-box {

  background: var(--drk-white);

  border: 2px solid var(--drk-midgray);

  border-radius: var(--radius-lg);

  padding: var(--space-8);

  max-width: 480px;

  width: 100%;

  box-shadow: 0 4px 16px rgba(0,0,0,0.1);

}



.login-box h2,

.register-box h2,

.confirm-box h2 {

  margin-top: 0;

  margin-bottom: var(--space-6);

  text-align: center;

  color: var(--drk-softred);

}



.login-box .form-actions,

.register-box .form-actions {

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

  margin-top: var(--space-6);

}



.login-box .form-actions .btn,

.register-box .form-actions .btn {

  width: 100%;

  justify-content: center;

}



/* Input-Felder mit Icons - Neue vereinfachte Struktur */

.input-icon-wrapper {

  position: relative;

  width: 100%;

}



.input-icon-wrapper .field-icon {

  position: absolute;

  left: 12px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--drk-midgray);

  pointer-events: none;

  z-index: 1;

}



.input-icon-wrapper input.input-with-icon {

  width: 100%;

  padding-left: 44px; /* Platz für Icon: 12px + 20px + 12px */

  box-sizing: border-box;

}



.input-icon-wrapper:focus-within .field-icon {

  color: var(--drk-red);

}



/* Login-Box: Felder müssen gleich breit sein (überschreibt max-width) */

.login-box .input-icon-wrapper input {

  width: 100% !important;

  max-width: none !important;

  box-sizing: border-box;

}



/* Fehlermeldungen unter Eingabefeldern */

.field-error {

  display: block;

  width: 100%;

  color: #d32f2f;

  font-size: 0.875rem;

  margin-top: 0.5rem;

  margin-bottom: 0.5rem;

  font-weight: 500;

  line-height: 1.4;

}



.form-field.has-error input,

.form-field.has-error select,

.form-field.has-error textarea {

  border-color: #d32f2f;

}



.webauthn-section {

  margin-top: var(--space-6);

  padding-top: var(--space-6);

  border-top: 1px solid var(--drk-midgray);

  text-align: center;

}



.webauthn-text {

  margin-bottom: var(--space-3);

  color: var(--drk-midgray);

  font-size: 0.875rem;

}



@media (max-width: 640px) {

  .login-box,

  .register-box,

  .confirm-box {

    padding: var(--space-6);

  }

}



/* ----------------------------

   13) Utilities

   ---------------------------- */

.u-visually-hidden {

  position: absolute !important;

  clip: rect(1px, 1px, 1px, 1px);

  clip-path: inset(50%);

  height: 1px; 

  width: 1px;

  overflow: hidden; 

  white-space: nowrap;

  border: 0; 

  padding: 0; 

  margin: -1px;

}

.u-text-center { text-align: center !important; }

.u-text-left { text-align: left !important; }

.u-text-right { text-align: right !important; }

.u-mb-0 { margin-bottom: 0 !important; }

.u-mb-2 { margin-bottom: var(--space-2) !important; }

.u-mb-4 { margin-bottom: var(--space-4) !important; }

.u-mb-6 { margin-bottom: var(--space-6) !important; }

.u-mt-4 { margin-top: var(--space-4) !important; }

.u-mt-6 { margin-top: var(--space-6) !important; }

.u-p-4  { padding: var(--space-4) !important; }

.u-p-6  { padding: var(--space-6) !important; }



/* Text Colors */

.text-muted { color: var(--drk-midgray); }

.text-error { color: var(--drk-red); }

.text-success { color: #2d7d2d; }

.text-warning { color: #ff9800; }



/* ----------------------------

   12) Responsives Verhalten

   ---------------------------- */

@media (max-width: 768px) {

  .form-row {

    grid-template-columns: 1fr;

  }

  

  .main-nav ul {

    flex-direction: column;

    gap: var(--space-2);

  }

  

  .header-container {

        flex-direction: column;

    align-items: flex-start;

    gap: var(--space-4);

  }

}



@media (min-width: 640px) {

  .grid--2 { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: var(--space-4); 

  }

}



@media (min-width: 960px) {

  .container { 

    max-width: 960px; 

    margin-inline: auto; 

    padding-inline: var(--space-4); 

  }

}



/* ----------------------------

   13) Print Styles

   ---------------------------- */

@media print {

    .site-header,

    .site-footer,

    .main-nav,

    .user-menu,

    .breadcrumb,

  .btn {

    display: none !important;

  }

  

  body {

    color: var(--drk-black);

    background: var(--drk-white);

  }

  

  a {

    text-decoration: underline;

  }

}



/* ===================================================================
   WebAuthn/Passkey Styling
   Version: 1.10.0
   Erstellt: 2025-11-02
   =================================================================== */

/* WebAuthn-Sektion auf Login-Seite */
.webauthn-section {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--drk-lightblue);
  border-radius: 8px;
  text-align: center;
}

.webauthn-info {
  margin-bottom: 1.5rem;
}

.webauthn-icon {
  color: var(--drk-red);
  margin-bottom: 1rem;
}

.webauthn-info p {
  color: var(--drk-darkgray);
  font-size: 0.95rem;
  margin: 0;
}

.webauthn-section .form-field {
  display: block;
  text-align: left;
  margin-bottom: 1.5rem;
}

.webauthn-section .form-field label,
.webauthn-section .form-field input,
.webauthn-section .form-field .form-help {
  display: block;
  width: 100%;
}

.webauthn-section .form-field label {
  margin-bottom: 0.5rem;
}

.webauthn-section .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.webauthn-section .btn svg {
  flex-shrink: 0;
}

.form-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--drk-darkgray);
}

/* Login-Alternativen */
.login-alternatives {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--drk-gray);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-alternatives .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Passkey-Liste (Verwaltungsseite) */
.passkey-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.passkey-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--drk-white);
  border: 1px solid var(--drk-gray);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.passkey-item:hover {
  border-color: var(--drk-red);
  box-shadow: 0 2px 8px rgba(230, 0, 5, 0.1);
}

.passkey-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--drk-lightblue);
  border-radius: 50%;
}

.passkey-icon {
  color: var(--drk-red);
}

.passkey-info {
  flex: 1;
  min-width: 0;
}

.passkey-name-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.passkey-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--drk-darkblue);
}

.btn-icon {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--drk-darkgray);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  color: var(--drk-red);
}

.btn-icon:focus {
  outline: 2px solid var(--drk-red);
  outline-offset: 2px;
  border-radius: 4px;
}

.passkey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--drk-darkgray);
}

.passkey-date,
.passkey-last-used {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.passkey-date svg,
.passkey-last-used svg {
  flex-shrink: 0;
}

.passkey-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}

.empty-state-icon {
  color: var(--drk-gray);
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--drk-darkblue);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--drk-darkgray);
  margin-bottom: 1.5rem;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* Info-Grid (Was sind Passkeys?) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.info-item {
  text-align: center;
}

.info-icon {
  color: var(--drk-red);
  margin-bottom: 1rem;
}

.info-item h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--drk-darkblue);
  margin-bottom: 0.5rem;
}

.info-item p {
  font-size: 0.95rem;
  color: var(--drk-darkgray);
  line-height: 1.5;
}

.info-note {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--drk-lightblue);
  border-left: 4px solid var(--drk-blue);
  border-radius: 4px;
}

.info-note svg {
  flex-shrink: 0;
  color: var(--drk-blue);
}

.info-note strong {
  color: var(--drk-darkblue);
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal[aria-hidden="false"] {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: var(--drk-white);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--drk-gray);
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--drk-darkblue);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--drk-darkgray);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--drk-red);
}

.modal-close:focus {
  outline: 2px solid var(--drk-red);
  outline-offset: 2px;
  border-radius: 4px;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--drk-gray);
}

/* Button-Varianten */
.btn--block {
  width: 100%;
  display: block;
}

.btn--large {
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 768px) {
  .passkey-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .passkey-icon-wrapper {
    align-self: center;
  }
  
  .passkey-actions {
    width: 100%;
  }
  
  .passkey-actions .btn {
    flex: 1;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .login-alternatives {
    align-items: stretch;
  }
  
  .login-alternatives .btn {
    width: 100%;
  }
}

/* Animation für Passkey-Item Löschung */
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* Fokus-States (WCAG 2.2) */
.webauthn-section button:focus,
.passkey-item button:focus {
  outline: 3px solid var(--drk-red);
  outline-offset: 2px;
}

/* Print */
@media print {
  .webauthn-section,
  .passkey-actions,
  .modal {
    display: none;
  }
}