/* ==================================================
   Custom overrides – Editorial (2022)
   Author: Alexander Babel
   Purpose: Visual identity & typography only

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

:root {
  --bg-main: #EDF5FE; /* Seitenhintergrund */
  --bg-surface: #FFFFFF; /* Content-Flächen */
  --text-main: #383E41; /* Fließtext */
  --text-muted: #6B7276; /* Meta, Datum, kleine Hinweise */
  --primary-900: #00294F; /* sehr dunkel (Sidebar-Hintergrund) */
  --primary-700: #0059AA; /* Haupttitel, Logo, Buttons */
  --primary-600: #3a6f9f; /* Footer, Menü Ebene 3 */
  --primary-500: #4382C0;  /* Linien, Subtitel */
  --primary-300: #86AED7;  /* Links */
  --primary-200: #A6D1FD;  /* Menü Ebene 1 */
  --color-hover: #FFFFFF;  /* Hover auf dunklem Grund */
  --color-focus: #CFE5FF;  /* Fokus-Rahmen */
  --color-active: #6699CC;  /* Aktive Menüpunkte */
  --color-info: #4382C0;
  --color-success: #3FA37C;
  --color-warning: #E0A800;
  --color-error: #C04343;
}

/* Background */
#wrapper {
  background-color: var(--bg-main);
}

/* Base text */
body,
#wrapper,
#wrapper > .inner {
  color: var(--text-main);
}

/* Typography */
body,
input,
select,
textarea {
  font-size: 13pt;
  font-weight: 500;
}

/* Links */
a {
  color: var(--primary-300);
  border-bottom: dotted 1px;
}

a:hover {
  color: var(--primary-500);
}

/* Emphasis */
strong,
b {
  color: var(--primary-500);
}

/* Header Linie */

#header {
  border-bottom: solid 5px var(--primary-500);
}
#header a:hover {
  color: var(--color-active) !important;
}

#hero header.major h1 {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
}
#hero header.major p.subtitle {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: solid 3px var(--primary-500);
}

#archive-link header.major h2 {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
}
#archive-link header.major p {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: solid 3px var(--primary-500);
}

#main h2 {
    color: var(--primary-600); 
}
#main h3 {
    color: var(--primary-500); 
}

#hero {
    position: relative;
	width: 100%;
    max-width: 100%;
    overflow: hidden;
}
#hero h1 {
  font-size: 2.5em;
  color: var(--primary-700);
}
#hero-heading {
  line-height: 1.3;
  max-width: 900px;
}

.image.hero {
    width: 100%;
    height: auto;
    display: block;
	margin: 2rem 0 3rem 0;
}
#hero .image.hero img {
	display: block;
    width: 100%;
}
.hero-content h1 {
  font-size: 2rem;
  color: var(--primary-700);
}
.hero-content h2 {
  font-size: 1.75rem;
  color: var(--primary-700);
}
.hero-content {
  max-width: 700px;
}


/* Hauptbereich Überschrift */
.main h1 {
  font-size: 2.75em;
  color: var(--primary-700);
}

/* Hauptbereich Texte */
.main,
.main p {
  color: var(--text-main);
}
.posts,
.posts p {
  color: var(--text-main);
}

/* Überschriften */
.posts h1,
.posts h2,
.posts h3,
.posts h4,
.posts h5,
.posts h6 {
  color: var(--primary-500);
}
.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
  color: var(--primary-500);
}

.button {
  color: var(--primary-700) !important;
  box-shadow: inset 0 0 0 2px var(--primary-700);
}
.button:hover {
  color: var(--color-active) !important;
  background-color: color-mix(in srgb, var(--primary-200) 5%, transparent);
}
.button:active {
  color: var(--primary-600) !important;
  background-color: color-mix(in srgb, var(--color-active) 15%, transparent);
}

.button.primary {
  color: var(--primary-900) !important;
  background-color: var(--primary-300);
  box-shadow: inset 0 0 0 2px var(--primary-700);
}
.button.primary:hover {
  color: var(--color-active) !important;
  background-color: color-mix(in srgb, var(--primary-200) 5%, transparent);
}
.button.primary:active {
  color: var(--primary-600) !important;
  background-color: color-mix(in srgb, var(--color-active) 15%, transparent);
}
.button.multiline {
    white-space: normal;      /* Erlaubt den Umbruch */
    height: auto !important;  /* Hebt die feste Höhe auf */
    line-height: 1.5;         /* Sorgt für lesbaren Zeilenabstand */
    padding: 1em 2em;         /* Optional: Padding für bessere Optik anpassen */
    display: inline-flex;     /* Zentriert den Textinhalt oft besser */
    align-items: center;      /* Vertikale Zentrierung */
    text-align: center;
}

/* Hamburger Lines */
#sidebar .toggle {
  color: var(--primary-700);
}
#sidebar .toggle:hover {
  color: var(--primary-500) !important;
}

/* Sidebar */
#sidebar {
  background-color: var(--primary-900);
}

/* logo */
#logo .image.logo {
	display: block;
	border-radius: 0;
	border-bottom: 0;
	border: 0;
	margin: 0 auto 0 auto;
	width: 70%;
}
#logo .image.logo img {
	display: block;
	width: 100%;
}
			
/* Menu – Basis */
#menu a {
  border-bottom: none;
}
#menu ul ul {
  display: none;
}
#menu button[aria-expanded="true"] + ul {
  display: block;
}

/* Buttons */
#menu button.opener,
#menu button.opener2,
#menu button.opener3 {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
  position: relative;
}

/* Ebene 1 */
#menu > ul > li > a,
#menu > ul > li > button.opener {
  color: var(--primary-200) !important;
}

/* Ebene 2 */
#menu ul ul > li > a,
#menu ul ul > li > button.opener2 {
  color: var(--color-active) !important;
}

/* Ebene 3 */
#menu ul ul ul > li > a,
#menu ul ul ul > li > button.opener3 {
  color: var(--primary-600) !important;
}

/* Hover */
#menu a:hover,
#menu button:hover,
#menu button[class^="opener"]:hover {
  color: var(--color-hover) !important;
}

/* Aktiv (aufgeklappt) */
#menu button[aria-expanded="true"] {
  color: var(--color-hover);
}
#menu button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Pfeile */
#menu .opener::before,
#menu .opener2::before,
#menu .opener3::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f078';
  position: absolute;
  right: 0%;
  color: currentColor;
  transition: transform 0.2s ease, color 0.2s ease;
  top: 50%;
  transform: translateY(-45%);
}
#menu button[aria-expanded="true"]::before {
  transform: translateY(-45%) rotate(-180deg);
}
#sidebar > .inner > #logo {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Mini-posts */
#sidebar #aktuell {
  color: var(--primary-200);
}
#sidebar #aktuell h2 {
  color: var(--primary-500);
}

/* Contact */
#sidebar #contact {
  color: var(--primary-200);
}
#sidebar #contact h2 {
  color: var(--primary-500);
}
#sidebar #contact > ul > li > a {
  color: var(--color-active);
  border-bottom: none;
}
#sidebar #contact > ul > li > a:hover {
  color: var(--color-hover) !important;
}
#sidebar #contact ul li a:hover:before {
  color: var(--color-hover) !important;
}
#sidebar #contact ul li:before {
  color: var(--color-active);
}
#sidebar #contact ul li:hover:before {
  color: var(--color-hover); 
}

/* Footer */
#footer .copyright {
  color: var(--primary-600);
}
#footer .copyright a:hover {
  color: var(--color-active) !important;
}

/* Language switcher */
#language .language-switcher {
  list-style: none;         
  margin: 0;
  padding: 0;
  display: flex;            
  gap: 0.75rem;              /* Abstand zwischen Flaggen */
  align-items: center;
}

#language .language-switcher li {
  margin: 0;
  padding: 0;
}

/* Flaggen-Größe */
#language .language-switcher img {
  width: 44px;             
  height: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover-Effekt */
#language .language-switcher a:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* Donation-progress */
.donation-bar {
  width: 100%;
  max-width: 420px;          /* optional */
  height: 22px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

.donation-progress {
  height: 100%;
  width: 0;                  /* Startwert */
  background: linear-gradient(
    90deg,
    #4caf50,
    #81c784
  );
  transition: width 0.8s ease;
}
.donate-button {
  display: inline-block;
  padding: 0.75em 1.2em;
  border-radius: 6px;
  background: var(--color-warning);
  color: #111;
  font-weight: 600;
  text-decoration: none;
}

.donate-button:hover {
  background: var(--primary-200);
  color: var(--color-success) !important;
}


.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin: 2rem 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

figure.image {
  margin: 2rem 0;
}

figure.image figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.faq details {
  border-top: 1px solid #ddd;
  padding: 0.75rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
/* Pfeil */
.faq summary::after {
  content: "▸";
  float: right;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(90deg);
}
.faq p {
  margin: 0.75rem 0 0;
  color: #444;
}

.image.center {
	display: block;
	margin: 0 0 2em 0;
    max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}
    .image.center img {
      width: 100%; 
	  }

.map-container {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 8px;
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.map h2 {
  color: var(--primary-500);
}
.map,
.map p {
  color: var(--text-main);
}