/* DocAnonym v2 — bewusst schlank, kein Framework, kein Build-Schritt. */

:root {
  /* Angelehnt an die bestehende docanonym.com (per Farbauslese aus der Live-Seite
     ermittelt, keine Rate-Werte): petrolfarbener Akzent, dunkles Anthrazit für
     Text/Marke, helle Blau-/Grautöne für Karten-Hintergründe, Schwarz für die
     Haupt-CTA-Buttons wie auf der bisherigen Seite. */
  --color-bg: #f7f9f9;
  --color-text: #333333;
  --color-primary: #3f444b;
  --color-accent: #49848b;
  --color-accent-dark: #35646a;
  --color-cta: #0a0a0a;
  --color-tint: #d4e1e4;
  --color-border: #d9dee6;
  --color-error-bg: #fdecec;
  --color-error-text: #9b1c1c;
  --color-success-bg: #e8f6ee;
  --color-success-text: #1c6e3f;
  --color-highlight-bg: #fdf6e6;
  --color-highlight-border: #d9b35c;
  --color-highlight-text: #8a6416;
  --color-muted: #666666;
  --radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Für Screenreader/SEO: genau ein <h1> pro Seite, auch wenn der Hero
   zwei Marken-Schriftzüge zeigt (siehe .hero-brand). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow-x: hidden; /* Absicherung gegen die 100vw-Vollbreiten-Sektion (.hero-full) */
  /* Sticky Footer: Footer bleibt am unteren Ende des Viewports, auch wenn
     der Seiteninhalt (z. B. Startseite ohne Kennzahlen-Leiste) die Höhe
     des Bildschirms nicht ausfüllt (Markus, 28.09.2026). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 2rem;
  background: var(--color-accent-dark);
  border-bottom: 2px solid var(--color-accent);
}

.site-header .brand {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .brand img { border-radius: 50%; }

.site-header .site-nav {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.site-header nav a {
  margin: 0 1.15rem;
  color: #fff;
  opacity: 0.9;
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}

.site-header nav a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 700px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.6rem;
  }
  /* .brand/.site-nav haben oben grid-column:1/2 gesetzt -- ohne diese
     Rücksetzung würde Grid für Spalte 2 eine implizite Spalte anlegen und
     die Navigation bliebe rechts neben der Marke stehen statt darunter. */
  .site-header .brand,
  .site-header .site-nav {
    grid-column: 1;
  }
  .site-header .site-nav {
    justify-content: center;
    gap: 0.25rem 0.5rem;
  }
  .site-header nav a { margin: 0 0.5rem; }
}

.site-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
  width: 100%;
  flex: 1 0 auto; /* füllt den Raum zwischen Header und Footer -- Teil des Sticky-Footer-Layouts oben bei body */
}

.site-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 2rem 1rem;
  color: #667;
  font-size: 0.85rem;
}

h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }

/* Vollbreite Bild-Sektion auf der Startseite: bricht bewusst aus dem
   680px breiten .site-main-Container aus (100vw-Trick), damit das Bild
   randlos über die gesamte Fensterbreite geht. Das Ausgangsbild ist
   1360x858px -- bis zu dieser Breite bleibt es gestochen scharf; auf sehr
   breiten Monitoren (>1360px Viewport) wird object-fit:cover das Bild
   leicht hochskalieren müssen, das ist eine physikalische Grenze des
   Quellbilds und keine Einstellungssache. Für garantierte Schärfe auch auf
   großen Monitoren wäre ein höher aufgelöstes Ausgangsbild nötig (empfohlen
   mind. 1920px, besser 2400px Breite). */
.hero-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 460px;
  overflow: hidden;
  display: flex;
}

/* Zwei gleich breite Hälften (Ärzte / Arbeitgeber), durch einen senkrechten
   Strich getrennt (Markus, 28.09.2026). Beide Seiten haben ein eigenes Foto
   (hero-doctor.jpg / hero-employer.jpg) mit einheitlichem Abdunklungs-Wash
   für lesbaren weißen Text. */
.hero-half {
  position: relative;
  flex: 1 1 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-accent-dark); /* Fallback-Farbe, falls Bild nicht lädt */
}

.hero-half + .hero-half {
  border-left: 2px solid rgba(255, 255, 255, 0.55);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.hero-bg-employer {
  /* Quellfoto hat oben viel leeren Himmel/Fassade -- Bildausschnitt nach
     unten Richtung Eingang/Rettungswagen verschoben. */
  object-position: center 75%;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  background: rgba(10, 20, 22, 0.55);
}

.hero-overlay .hero-text { max-width: 380px; }

.hero-overlay .hero-brand {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero-overlay .slogan {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.85rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-overlay .hero-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 620px) {
  .hero-full { flex-direction: column; height: auto; }
  .hero-half { min-height: 320px; }
  .hero-half + .hero-half {
    border-left: none;
    border-top: 2px solid rgba(255, 255, 255, 0.55);
  }
  .hero-overlay .hero-text { max-width: 100%; }
}

/* Kennzahlen-Leiste unter dem Hero-Bild: standardmäßig sichtbar, per Klick
   ausblendbar (Merkt sich die Ausblendung im Browser via localStorage). */
.stats-bar {
  position: relative;
  background: var(--color-tint);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 2.5rem;
  text-align: center;
}

.stats-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  max-width: 760px;
  margin: 0 auto;
}

.stats-bar-inner strong { color: var(--color-accent-dark); font-size: 1.15rem; }

.stats-bar-close {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
}

.stats-bar-close:hover { background: rgba(0, 0, 0, 0.06); opacity: 1; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(20, 40, 45, 0.06);
}

.card h2 {
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-border);
}

/* Einheitliches Kachel-System für Dashboards: gleiche Bedeutung = gleiche Farbe,
   sitetweit. Immer zusammen mit class="card" verwenden, z.B. class="card card-status". */
.card-status {
  background: var(--color-tint);
  border-color: var(--color-accent);
}
.card-status h2 { border-bottom-color: var(--color-accent); }

.card-highlight {
  background: var(--color-highlight-bg);
  border-color: var(--color-highlight-border);
}
.card-highlight h2 { border-bottom-color: var(--color-highlight-border); color: var(--color-highlight-text); }

.card-info {
  background: var(--color-success-bg);
  border-color: #4a7c59;
}
.card-info h2 { border-bottom-color: #4a7c59; color: var(--color-success-text); }

.stacked-form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Markus, 29.09.2026 (Testergebnis Punkt 2/7): sichtbare Pflichtfeld-Markierung */
.form-legend {
  font-size: 0.85rem;
  color: var(--color-muted, #666);
  margin-bottom: 1rem;
}

/* Markus, 29.09.2026 (Testergebnis Punkt 10): anonymisiertes Avatar-Bild.
   .avatar-placeholder greift nur, solange es fuer "divers"/keine Angabe noch
   kein eigenes drittes Bild gibt (siehe da_avatar_path_for_gender()). */
.doctor-avatar {
  display: block;
  width: 72px;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.doctor-avatar-large {
  width: 160px;
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-border, #d8dee5);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.avatar-placeholder-large {
  width: 160px;
  height: 160px;
  font-size: 3rem;
}

/* Markus, 02.10.2026: neues Profil-Kopfzeile-Layout auf den Arztprofil-Seiten
   (profil-vorschau.php / arbeitgeber/arzt-profil.php) -- Foto links, Marke +
   anonymer Profilcode rechts daneben. */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.85rem;
}
.profile-header .doctor-avatar-large,
.profile-header .avatar-placeholder-large {
  margin-bottom: 0;
  flex-shrink: 0;
}
.profile-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-brand {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}
.profile-code {
  font-size: 1.05rem;
  color: var(--color-muted, #666);
}

/* Markus, 02.10.2026: Zusatzbezeichnung(en) + Schwerpunkt(e) auf den
   Arztprofil-Seiten optisch als zusammengehöriger Block abgegrenzt, statt als
   lose Absätze zwischen den übrigen Feldern. */
.profile-quals {
  background: var(--color-tint, #f4f6f7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  margin: 0.85rem 0;
}
.profile-quals p {
  margin: 0.3rem 0;
}
.profile-quals p:first-child {
  margin-top: 0;
}
.profile-quals p:last-child {
  margin-bottom: 0;
}

.stacked-form input[type=text],
.stacked-form input[type=email],
.stacked-form input[type=password],
.stacked-form select,
.stacked-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 400;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

/* Markus, 02.10.2026: optische Abgrenzung der Themenkomplexe im
   Registrierungsformular (Zugangsdaten / Angaben zur Person / Position &
   Werdegang / Tätigkeitsregion / Weitere Angaben / Dokumente / Zustimmung). */
.form-section {
  margin: 2rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
}
.form-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.form-section-title {
  font-size: 1.05rem;
  margin: 0 0 1rem;
  color: var(--color-muted, #555);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem 1rem;
  max-height: 260px;
  overflow-y: auto;
}

.checkbox-grid-compact { max-height: 200px; }

.career-stage-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.career-years-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.career-years-stepper button {
  padding: 0.3rem 0.7rem;
  font-size: 1rem;
}

.career-years-stepper input[type="number"] {
  width: 3rem;
  text-align: center;
}

.career-stage-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.career-stage-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.career-stage-item button {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.checkbox-item {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

button, .button {
  background: var(--color-cta);
  color: #fff;
  border: none;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover, .button:hover { opacity: 0.85; }

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.flash-error { background: var(--color-error-bg); color: var(--color-error-text); }
.flash-success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash ul { margin: 0; padding-left: 1.2rem; }

.verify-notice {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 2px solid var(--color-success-text);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.verify-notice h2 { margin: 0 0 0.5rem; font-size: 1.5rem; color: var(--color-success-text); }
.verify-notice p { font-size: 1.1rem; line-height: 1.5; margin: 0 0 0.5rem; }
.verify-notice p:last-child { margin-bottom: 0; }
.verify-notice .already-verified { margin-top: 1rem; font-size: 0.9rem; }
.verify-notice .already-verified a { color: var(--color-success-text); }

.conversation-list, .doctor-list { list-style: none; padding: 0; }
.conversation-list li, .doctor-list li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.conversation-list a { text-decoration: none; color: inherit; display: block; }
.conversation-list li.unread { border-color: var(--color-accent); }

.badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  margin-left: 0.4rem;
}
.badge-info { background: #4a7c59; }

.message-thread { list-style: none; padding: 0; }
.message {
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.6rem;
  background: #fff;
  border: 1px solid var(--color-border);
}
.message-doctor { border-left: 4px solid var(--color-accent); }
.message-employer { border-left: 4px solid #4a7c59; }
.message .timestamp { float: right; font-size: 0.75rem; color: #889; }
.message .message-author { font-size: 0.8rem; color: #667; font-style: italic; margin-left: 0.4rem; }

.conversation-list .badge-warning { background: #b8860b; }

/* Markus, 03.10.2026: Nachrichtenstränge aufräumbar -- Ordner-Reiter, eigene
   Codierung (Label neben DA-Nummer/Firmenname) + Verschieben/Löschen-Leiste
   pro Strang (messages.php, beide Seiten) sowie der Freitext-Kommentar auf
   der Thread-Detailseite (message-thread.php, beide Seiten). */
.folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.folder-tabs a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-muted, #555);
  font-size: 0.9rem;
  background: #fff;
}
.folder-tabs a.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.conv-label {
  display: inline-block;
  background: var(--color-tint, #f4f6f7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
  margin-left: 0.4rem;
  color: var(--color-muted, #555);
}

.conv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.inline-form input[type=text] {
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 220px;
}
.inline-form button {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}
.conv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}
.btn-text-danger {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-error-text);
}
.btn-text-danger:hover { background: var(--color-error-bg); }

.conv-comment-box {
  background: var(--color-tint, #f4f6f7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  margin-bottom: 1.1rem;
}
.conv-comment-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-muted, #555);
}
.conv-comment-box form { margin-top: 0.6rem; }
.conv-comment-box textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  margin-bottom: 0.5rem;
}

.pagination { margin-top: 1rem; }
.pagination a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin-right: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-primary);
}
.pagination a.active { background: var(--color-accent); color: #fff; }

/* Öffentliches Arbeitgeberprofil (Employer Branding), Markus 09/2026 */
.employer-profile-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.employer-profile-logo {
  max-height: 90px;
  max-width: 180px;
  object-fit: contain;
}
.employer-profile-headline {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0.2rem 0;
}
.employer-profile-video video {
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.employer-profile section {
  margin-bottom: 1.75rem;
}
/* Markus, 03.10.2026 (Konsistenz-Audit): "Offene Stellen" bleibt bewusst ohne
   .card (die Job-Einträge darin sind selbst schon .card-Kacheln, verschachtelte
   Karten sähen seltsam aus) -- diese Regel sorgt trotzdem für die gleiche
   Überschriften-Optik wie überall sonst auf der Seite (siehe .card h2). */
.employer-profile h2 {
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-border);
}
.employer-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.employer-gallery img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.employer-gallery form { margin-top: 0.35rem; }
.benefit-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem 1rem;
}

/* Markus, 28.09.2026: geteiltes Modal für zweistufige Lösch-Bestätigung
   (konto-loeschen.php, Arzt + Arbeitgeber) -- siehe da-confirm-delete.js-
   Logik inline in beiden Seiten. */
.da-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 28, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.da-modal-overlay.is-open { display: flex; }
.da-modal {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  max-width: 480px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.da-modal h2 { margin: 0 0 0.75rem; font-size: 1.25rem; color: var(--color-error-text); }
.da-modal p { margin: 0 0 1rem; line-height: 1.5; }
.da-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.da-modal-actions button { cursor: pointer; }
.da-modal-cancel {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}
.da-modal-confirm {
  background: var(--color-error-text);
  border: 1px solid var(--color-error-text);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 600;
}
.benefit-list li::before { content: "✓ "; color: #4a7c59; font-weight: 700; }

/* Stellensuche (Markus, 30.09.2026 -- angelehnt an aerztestellen.aerzteblatt.de) */
.job-search-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.job-search-topbar label { font-weight: 600; font-size: 0.9rem; }
.job-search-topbar input[type=text] {
  display: block;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 400;
  min-width: 220px;
}
.job-search-topbar select {
  display: block;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 400;
}
.job-search-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.job-search-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}
.job-search-sidebar fieldset { padding: 0.6rem 0.8rem; }
.job-search-sidebar .checkbox-grid {
  display: block;
  max-height: 180px;
}
.job-search-sidebar select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.job-search-sidebar > label { display: block; margin: 0.75rem 0; font-weight: 600; font-size: 0.9rem; }
.facet-count { color: var(--color-muted, #666); font-size: 0.85rem; }
.checkbox-item.facet-zero { color: var(--color-muted, #888); }
/* Bundesland-Liste: Deutschland / Österreich farblich abgesetzt (Markus, 06.10.2026) */
.fs-group { margin: 0 0 0.5rem; padding: 0.25rem 0.5rem 0.35rem; border-left: 4px solid var(--color-accent); border-radius: 4px; }
.fs-group.fs-de { background: var(--color-tint); border-left-color: var(--color-accent-dark); }
.fs-group.fs-at { background: var(--color-highlight-bg); border-left-color: var(--color-highlight-border); }
.fs-group-title { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.15rem 0 0.3rem; }
.fs-group.fs-de .fs-group-title { color: var(--color-accent-dark); }
.fs-group.fs-at .fs-group-title { color: var(--color-highlight-text); }
.facet-hint { font-size: 0.8rem; color: var(--color-muted, #666); margin: 0.2rem 0 0.5rem; }

/* Markus, 01.10.2026: Arbeitgeber-Logo links oben auf jeder Treffer-Karte
   der Stellensuche ("aha, das ist Helios") -- selbe Quelle wie
   employers.branding_logo_path auf dem öffentlichen Arbeitgeberprofil. */
.job-card { display: flex; gap: 0.9rem; align-items: flex-start; }
.job-card-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}
.job-card-body { flex: 1; min-width: 0; }
.button-reset {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.job-tags { color: var(--color-muted, #666); font-size: 0.9rem; }

@media (max-width: 720px) {
  .job-search-layout { grid-template-columns: 1fr; }
}

/* Markus, 01.10.2026: Rezensionen im weißen Bereich der Landingpage,
   direkt unter der Suche -- Verwaltung über admin/testimonials.php. */
.testimonials-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  text-align: center;
}
.testimonial-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.6rem;
  display: block;
}
.testimonial-quote {
  margin: 0 0 0.6rem;
  font-style: italic;
  font-size: 0.95rem;
}
.testimonial-attribution {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted, #666);
}

@media (max-width: 720px) {
  .testimonials-section { grid-template-columns: 1fr; }
}

/* Markus, 01.10.2026: Admin-Cockpit (admin/index.php) -- "nicht nur Links,
   sondern eine schöne Übersicht wie in einem Cockpit". Kachelreihen mit
   Kennzahl + Label vor jedem Themenblock; Farbe zeigt, ob etwas offen ist
   (highlight-Töne, bereits an anderer Stelle für Warnhinweise genutzt),
   erledigt (success-Töne) oder neutral/informativ (accent-Ton). */
.admin-quicklinks { font-size: 0.9rem; color: var(--color-muted, #666); }

.cockpit-heading {
  margin: 2rem 0 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #666);
}
.cockpit-heading:first-of-type { margin-top: 0.5rem; }

.cockpit-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.cockpit-tile {
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-border);
  background: #fff;
}
.cockpit-tile-number {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}
.cockpit-tile-label {
  display: block;
  font-size: 0.82rem;
  margin-top: 0.2rem;
  color: var(--color-muted, #666);
}
.cockpit-tile-alert {
  background: var(--color-highlight-bg);
  border-color: var(--color-highlight-border);
}
.cockpit-tile-alert .cockpit-tile-number { color: var(--color-highlight-text); }
.cockpit-tile-ok {
  background: var(--color-success-bg);
  border-color: #4a7c59;
}
.cockpit-tile-ok .cockpit-tile-number { color: var(--color-success-text); }
.cockpit-tile-neutral .cockpit-tile-number { color: var(--color-accent-dark); }

@media (max-width: 480px) {
  .cockpit-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* Admin-Cockpit: Navigation als Buttons (statt Textlinks) */
.admin-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.admin-nav-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 4.2rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.admin-nav-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.admin-nav-btn:focus-visible { outline: 3px solid var(--color-highlight-border); outline-offset: 2px; }
.admin-nav-title { font-weight: 600; font-size: 1rem; }
.admin-nav-sub { font-size: 0.82rem; opacity: 0.88; }
.admin-nav-btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: none;
  min-height: 4.2rem;
}
.admin-nav-btn-secondary:hover { background: var(--color-tint); box-shadow: none; }

/* Admin: Stellen-Import (Vorschau-Tabellen) */
.import-table-wrap { overflow-x: auto; }
.import-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.import-table th, .import-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.import-table th { color: var(--color-primary); }
.checkbox-label { display: flex; gap: 0.5rem; align-items: flex-start; }
.checkbox-label input { width: auto; margin-top: 0.25rem; }
details { margin: 0.4rem 0; }
details summary { cursor: pointer; font-weight: 600; }
details ul { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { details ul { columns: 1; } }

/* Markus, 06.10.2026: Arbeitgeber-Nachrichten mit Projekt-Ordnern (Ordner links, Liste rechts) */
.msg-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: start; }
.msg-sidebar { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; }
.msg-sidebar h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.msg-folders { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; max-height: 340px; overflow-y: auto; }
.msg-folders a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--radius); text-decoration: none; color: var(--color-text); font-size: 0.92rem; overflow-wrap: anywhere; }
.msg-folders a span { color: var(--color-muted, #666); white-space: nowrap; }
.msg-folders a:hover { background: var(--color-tint); }
.msg-folders a.active { background: var(--color-primary); color: #fff; }
.msg-folders a.active span { color: #fff; }
.msg-new-folder { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.msg-new-folder label { font-size: 0.85rem; font-weight: 600; }
.msg-new-folder input[type=text] { display: block; width: 100%; margin-top: 0.25rem; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.msg-folder-manage { border-top: 1px solid var(--color-border); padding-top: 0.8rem; }
.inline-form select { font-size: 0.85rem; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius); max-width: 190px; }
@media (max-width: 720px) { .msg-layout { grid-template-columns: 1fr; } }