/* CONSID-Beratung — Joomla-Template Stylesheet */

:root {
  --navy: #1b2470;
  --navy-dark: #141a54;
  --sidebar-bg: #d4d4d4;
  --sidebar-bg-active: #a9a9a9;
  --sidebar-text: #2b2b2b;
  --link-blue: #1c4fa0;
  --heading-blue: #1c4fa0;
  --body-text: #333333;
  --muted: #7a7a7a;
  --page-bg: #ffffff;
  --rule: #cfcfcf;

  /* Breite der Sidebar/Menübuttons = Breite des Vögel-/Logo-Bildes.
     Beim Austausch des Bildes diesen Wert auf die tatsächliche
     Pixelbreite der neuen Datei anpassen. */
  --sidebar-width: 220px;

  /* Abstand zwischen den Menü-Buttons - wird auch für den Abstand
     unter der Kopfzeile und über dem Vögel-Bild verwendet. */
  --sidebar-gap: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--body-text);
  background: var(--page-bg);
  line-height: 1.5;
}

a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.site { max-width: 1000px; margin: 0 auto; }

/* ---------- Kopfbereich ---------- */

header.site-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.header-navy {
  background: var(--navy);
  background-image: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  width: 52%;
  min-width: 300px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Kopfmenü (Position "topnav") - Joomla mod_menu Ausgabe */
.top-nav, .top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.top-nav ul { display: flex; flex-wrap: wrap; gap: 0; }
.top-nav li { display: inline; }
.top-nav li::after { content: "|"; color: #8f96c9; margin: 0 6px; }
.top-nav li:last-child::after { content: ""; margin: 0; }
.top-nav a { color: #ffffff; }

.header-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 24px;
  gap: 10px;
}

.logo-img { max-height: 90px; width: auto; display: block; }

/* ---------- Layout ---------- */

.layout { display: flex; align-items: flex-start; }

nav.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 auto;
  padding-top: var(--sidebar-gap);
}

/* Hauptmenü (Position "sidebar") - generische Joomla mod_menu Ausgabe */
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar li { margin-bottom: var(--sidebar-gap); }
.sidebar li ul { margin-left: 12px; margin-top: var(--sidebar-gap); }
.sidebar a {
  display: block;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.3;
}
.sidebar li ul a {
  background: var(--sidebar-bg-active);
  padding: 10px 14px 10px 26px;
  font-size: 12px;
}
.sidebar a:hover { text-decoration: none; background: #c4c4c4; }
/* Joomla markiert den aktiven Menüpunkt u.a. mit "current" oder "active" */
.sidebar li.current > a,
.sidebar li.active > a,
.sidebar a.current,
.sidebar a.active {
  background: var(--sidebar-bg-active);
  font-weight: bold;
}
.sidebar li ul li.current > a,
.sidebar li ul li.active > a {
  background: #8f8f8f;
  color: #fff;
}

.sidebar-image { margin-top: var(--sidebar-gap); }
.sidebar-image img { width: var(--sidebar-width); height: auto; display: block; }

main.content { flex: 1; padding: 24px 30px 60px 30px; min-width: 0; }

/* Breadcrumb (Position "breadcrumb") - Joomla mod_breadcrumbs Ausgabe */
.breadcrumb, .breadcrumb ul {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
  list-style: none;
  padding: 0;
}
.breadcrumb ul { display: flex; flex-wrap: wrap; }
.breadcrumb li { display: inline; }
.breadcrumb li::after { content: "\203A"; margin: 0 6px; color: var(--muted); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--link-blue); }

/* ---------- Inhaltsbereich / Artikel ---------- */

.content h1, .content h2.article-header, .content .page-header h2 {
  color: var(--heading-blue);
  font-size: 20px;
  margin: 0 0 16px 0;
}
.content h2 { color: var(--heading-blue); font-size: 15px; margin: 22px 0 8px 0; }
.content p { margin: 0 0 14px 0; max-width: 640px; }
.content ul { margin: 0 0 16px 0; padding-left: 22px; max-width: 620px; }
.content ul li { margin-bottom: 6px; }

.quote {
  font-style: italic;
  color: #555;
  text-align: right;
  max-width: 460px;
  margin: 24px 0 24px auto;
  font-size: 13px;
}
.quote .who { display: block; margin-top: 4px; }

.divider { border: none; border-top: 1px dotted #999; margin: 30px 0; max-width: 620px; }

.values-list { color: #8a8a8a; font-size: 12px; line-height: 1.7; }
.values-list strong { color: #444; }

/* Diagramm-/Personen-Boxen (falls per Modul/Beitrag eingebunden) */
.diagram-wrap { margin: 18px 0 28px 0; max-width: 420px; }
.diagram-wrap svg, .diagram-wrap img { width: 100%; height: auto; }

.person-block { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.person-info { flex: 1; min-width: 260px; }
.person-photo { width: 140px; flex-shrink: 0; }
.person-photo img { width: 100%; height: auto; border: 1px solid #ddd; }

.contact-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.contact-row svg, .contact-row img { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Fußzeile (Position "footer") ---------- */

.footer-nav {
  margin-top: 40px;
  padding: 16px 30px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--muted);
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.footer-nav li { display: inline; }
.footer-nav a { color: var(--muted); }

/* ---------- Login-Formular (com_users) ---------- */

.login .form-control, .content input[type="text"], .content input[type="password"] {
  padding: 5px 6px;
  border: 1px solid #bbb;
  font-family: inherit;
  font-size: 12px;
}
.content button, .content input[type="submit"] {
  background: var(--sidebar-bg-active);
  border: 1px solid #999;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  header.site-header { flex-direction: column; }
  .header-navy, .header-logo { width: 100%; }
  .header-logo { justify-content: flex-start; padding: 16px 20px; }
  .logo-wordmark { text-align: left; }
  .layout { flex-direction: column; }
  nav.sidebar { width: 100%; padding: 14px 20px; }
  .sidebar ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .sidebar li { flex: 1 1 auto; }
  .sidebar-image { display: none; }
  main.content { padding: 20px; }
  .person-block { flex-direction: column; }
}