/* ======================================
   Landakademie Weilrod – Custom Styles
   (aufgeräumt / konsolidiert)
   ====================================== */

/* === Grundfarben & Variablen === */
:root {
  --lak-red: #b30000;
  --lak-red-dark: #800000;
  --lak-grey-light: #f5f5f5;

  /* Footer: leicht kleiner als Fließtext */
  --lak-footer-font-size: 0.875rem; /* vorher 0.9rem; 0.875 wirkt meist „richtiger“ */
  --lak-footer-text: #111111;
  --lak-footer-muted: #666666;
}

/* ======================================
   Grundlayout & Typografie
   ====================================== */

body {
  background-color: #ffffff;
  color: #111111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Globale Links – alle Zustände sauber definieren */
a,
a:link,
a:visited {
  color: var(--lak-red);
}

a:hover,
a:focus,
a:active {
  color: var(--lak-red-dark);
  /* text-decoration: underline; */
}

/* Überschriften im Inhalt */
#body-wrapper h1,
#body-wrapper h2,
#body-wrapper h3,
#body-wrapper h4,
.content h1,
.content h2,
.content h3,
.content h4 {
  color: #111111;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* h3 und h4 im Inhaltsbereich in Rot darstellen */
#body-wrapper h3,
#body-wrapper h4,
.content h3,
.content h4 {
  color: var(--lak-red);
}

/* Größen & Abstände der Überschriften (Desktop) */
#body-wrapper h1,
.content h1 {
  font-size: 2rem;
  border-bottom: 2px solid var(--lak-red);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

#body-wrapper h2,
.content h2 {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

#body-wrapper h3,
.content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

/* etwas kleinere Überschriften auf schmalen Screens */
@media (max-width: 768px) {
  #body-wrapper h1,
  .content h1 {
    font-size: 1.6rem;
  }

  #body-wrapper h2,
  .content h2 {
    font-size: 1.4rem;
  }

  #body-wrapper h3,
  .content h3 {
    font-size: 1.2rem;
  }
}


/* Etwas Luft zwischen Header und Seiteninhalt */
#body-wrapper.section {
  padding-top: 2rem;   /* kannst du nach Geschmack anpassen (1.5–2.5rem) */
}


/* ======================================
   Listen im Inhaltsbereich
   ====================================== */

#body-wrapper ul,
#body-wrapper ol,
.content ul,
.content ol {
  margin: 0 0 1rem 1.2rem;
  padding-left: 1.1rem;
  list-style-position: outside;
}

#body-wrapper ul li,
#body-wrapper ol li,
.content ul li,
.content ol li {
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

/* Falls in Listeneinträgen <p>-Tags erzeugt werden */
#body-wrapper ul li p,
.content ul li p {
  margin: 0.1rem 0 !important;
}

/* ======================================
   Header, Logo & Navigation
   (Layout von Quark/Spectre, nur Optik hier)
   ====================================== */

.header {
  background: #ffffff;
  border-bottom: 4px solid var(--lak-red);
}

/* Header-Section etwas luftiger */
#header.section {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Logo im Header – nur Höhe begrenzen */
.navbar .logo img {
  max-height: 100px;
  height: auto;
  width: auto;
}

/* Hauptmenü-Liste (Reset + Optik) */
nav.dropmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menüeinträge nebeneinander */
nav.dropmenu ul li {
  display: inline-block;
  margin-left: 0.25rem;
}

/* Links im Desktop-Menü */
nav.dropmenu ul li > a {
  color: #333333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  padding: 0.4rem 0.9rem;
  line-height: 1.2;
  text-align: center;
}

/* Hover, Fokus & aktive Seite im Desktop-Menü */
nav.dropmenu ul li > a:hover,
nav.dropmenu ul li > a:focus,
nav.dropmenu ul li > a.active,
nav.dropmenu ul li.active > a {
  color: var(--lak-red) !important;
  border-bottom-color: var(--lak-red) !important;
  text-decoration: none;
}

/* Untermenüs (Dropdowns) vertikal listen */
nav.dropmenu ul ul li {
  display: block;
  margin-left: 0;
}

/* Links im Untermenü linksbündig & normal umbrechen */
nav.dropmenu ul ul li > a {
  display: block;
  text-align: left;
  white-space: normal;
  padding: 0.3rem 0.9rem;
}

/* Mobile-Menü (Overlay) – Basislinks */
.overlay-menu .tree li > a {
  color: #333333;
}

.overlay-menu .tree li > a:hover,
.overlay-menu .tree li > a:focus,
.overlay-menu .tree li > a.active,
.overlay-menu .tree li.active > a {
  color: var(--lak-red) !important;
}

/* Mobile Menü-Button (Hamburger) */
.mobile-menu .button_container span {
  background: var(--lak-red);
}

/* Standard: Desktop-Menü sichtbar, Mobile-Menü ausblenden */
.desktop-menu {
  display: block;
}

.mobile-menu {
  display: none;
}

/* Unter 1250px komplett auf Mobile-Menü umschalten */
@media (max-width: 1250px) {
  .desktop-menu {
    display: none !important;
  }

  .mobile-menu {
    display: block !important;
  }
}

/* ======================================
   Home-Layout: rechte Spalte / Events
   ====================================== */

.event-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.event-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eeeeee;
}

/* Farbe für Event-Links explizit setzen */
.event-list li a,
.event-list li a:link,
.event-list li a:visited {
  font-weight: 600;
  color: var(--lak-red) !important;
  text-decoration: none;
}

.event-list li a:hover,
.event-list li a:focus,
.event-list li a:active {
  color: var(--lak-red-dark) !important;
  text-decoration: underline;
}

.event-list li small {
  display: block;
  font-size: 0.8rem;
  color: #777777;
}

/* leichte optische Trennung der rechten Spalte auf Desktop */
@media (min-width: 768px) {
  .home-columns > .column:last-child {
    border-left: 1px solid #eeeeee;
    padding-left: 2rem;
  }
}

/* ======================================
   Buttons & Formulare
   ====================================== */

.button,
.btn,
input[type="submit"],
button {
  background: var(--lak-red);
  border-color: var(--lak-red);
  color: #ffffff;
}

.button:hover,
.btn:hover,
input[type="submit"]:hover,
button:hover {
  background: var(--lak-red-dark);
  border-color: var(--lak-red-dark);
  color: #ffffff;
}

/* Formfelder leicht abrunden */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-radius: 2px;
}

/* ======================================
   Footer
   ====================================== */

.footer {
  background: var(--lak-grey-light);
  border-top: 2px solid var(--lak-red);

  /* Typo exakt an Fließtext anlehnen */
  font-family: inherit;
  font-size: var(--lak-footer-font-size);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;

  /* Textfarbe */
  color: var(--lak-footer-text); /* oder var(--lak-footer-muted) */
}

/* Wichtig: Footer-Elemente erben Typo (Quark/Spectre Defaults neutralisieren) */
.footer p,
.footer a,
.footer li,
.footer span {
  font: inherit;
  letter-spacing: inherit;
}

/* Footer-Section vertikal kompakter machen */
.footer.section {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Layout im Footer */
.footer-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* Linke Seite */
.footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.footer-left p {
  margin: 0;
}

/* Rechte Seite */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.footer-links li {
  margin: 0;
}

/* Links im Footer */
.footer a,
.footer a:link,
.footer a:visited {
  color: var(--lak-red);
  text-decoration: none;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: var(--lak-red-dark);
  text-decoration: underline;
}

/* Footer auf schmalen Screens untereinander */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-left {
    margin-bottom: 0.25rem;
  }
}

/* ======================================
   Mobile-Menü (Overlay)
   ====================================== */

.mobile-container .overlay {
  background: rgba(255, 255, 255, 0.98);
}

.overlay-menu .tree {
  list-style: none;
  margin: 2rem 1.5rem;
  padding: 0;
}

.overlay-menu .tree li {
  margin-bottom: 0.5rem;
}

.overlay-menu .tree li > a {
  display: block;
  padding: 0.4rem 0;
  color: #111111;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid #eeeeee;
}

.overlay-menu .tree li > a:hover,
.overlay-menu .tree li > a:focus,
.overlay-menu .tree li > a.active,
.overlay-menu .tree li.active > a {
  border-bottom-color: var(--lak-red);
}

.mobile-logo {
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  text-align: left;
}

/* ======================================
   Übersichtskarten (Lehrgänge, Veranstaltungen …)
   ====================================== */

.overview-cards {
  margin-top: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.overview-cards .column {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

.overview-card {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.overview-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

.overview-card-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #111111;
}

.overview-card-title a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.overview-card-title a:hover,
.overview-card-title a:focus {
  color: var(--lak-red-dark);
  text-decoration: underline;
}

.overview-card-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #333333;
}

/* ======================================
   Event-Detailseiten
   ====================================== */

.event-detail-header {
  margin-bottom: 1rem;
}

.event-detail-date {
  font-size: 0.95rem;
  color: #777777;
  margin-bottom: 0.25rem;
}

.event-detail-location {
  font-size: 1rem;
  font-weight: 600;
  color: #111111;
  margin-top: 0.25rem;
}

.event-detail-categories {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.event-detail-categories-label {
  font-size: 0.9rem;
  color: #555555;
  margin-right: 0.25rem;
}

.event-category-chip {
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background-color: #fce5e5;
  color: var(--lak-red-dark);
}

.event-detail-content {
  margin-top: 0.5rem;
}

/* ======================================
   Event-Anmeldebutton
   ====================================== */

.event-detail-registration {
  margin: 1rem 0 1.5rem 0;
}

.event-detail-registration .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none;

  /* HIER kleiner machen */
  padding: 0.30rem 0.8rem;   /* vorher 0.5rem 1.3rem */
  font-size: 0.7rem;       /* neu: etwas kleinere Schrift */

  border-radius: 4px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}


.event-detail-registration .button:hover,
.event-detail-registration .button:focus {
  color: #ffffff !important;
  text-decoration: none;
  background: var(--lak-red-dark);
  border-color: var(--lak-red-dark);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* ======================================
   Kontaktseite
   ====================================== */

.contact-intro {
  margin-bottom: 1.5rem;
}

.contact-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 640px) {
  .contact-icons {
    grid-template-columns: 1fr;
  }
}

.contact-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-icon img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.contact-icon p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-form-wrap {
  margin-top: 1rem;
}


/* --- Footer: Typo exakt wie Fließtext, nur kleiner --- */

/* Body-Defaults explizit machen (damit Footer exakt „gleich“ rechnen kann) */
body {
  font-size: 16px;     /* falls du global nichts gesetzt hast */
  font-weight: 400;
  line-height: 1.5;
}

/* Footer übernimmt Body-Typo, skaliert nur runter */
.footer {
  font-family: inherit;
  font-size: 0.85rem;     /* kleiner als vorher 0.875/0.9 */
  font-weight: inherit;
  line-height: inherit;

  color: #111111;         /* gleiche Farbe wie Fließtext */
}

/* Spectre/Quark Defaults im Footer neutralisieren (wichtig!) */
.footer p,
.footer span,
.footer small,
.footer li {
  color: inherit !important;
  font: inherit;
}

/* Links bleiben rot, aber Typo bleibt identisch */
.footer a,
.footer a:link,
.footer a:visited {
  color: var(--lak-red) !important;
  font: inherit;
}


/* ===========================
   Menü-Schrift leicht größer
   =========================== */

/* Desktop-Menü-Einträge */
nav.dropmenu ul li > a {
  font-size: 0.85rem;         /* nur minimal größer als Standard */
  padding: 0.35rem 0.85rem;   /* etwas weniger „dick“ → weniger Stauchung */
}

/* Falls Grav statt dropmenu-class mal auf .navbar .navigation wechselt */
.navbar .navigation > li > a {
  font-size: 0.98rem;
}

/* ===========================
   Footer-Schrift etwas kleiner
   =========================== */

/* Nur auf größeren Screens kleiner machen, 
   auf mobilen Geräten gute Lesbarkeit lassen */
@media (min-width: 992px) {
  .footer {
    font-size: 0.8rem;   /* vorher 0.9rem */
  }
}

/* ======================================
   Rote Hervorhebung im Fließtext
   ====================================== */

/* einfache Inline-Hervorhebung in Rot */
.text-red {
  color: var(--lak-red);
}

/* Option: kräftige Hervorhebung (rot + fett) */
.text-red-strong {
  color: var(--lak-red);
  font-weight: 700;
}



/* ======================================
   Kleine Schrift / Fußnote
   ====================================== */

/* Allgemein kleinerer Text (inline) */
.text-small {
  font-size: 0.50rem;      /* deutlich kleiner als Standard */
  line-height: 1.4;
}

/* Fußnotenblock am Seitenende o.Ä. */
.footnote-text {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #666666;         /* etwas „leiser“ */
}

/* Zahl hochgestellt, z.B. im Fließtext: Text¹ */
sup.footnote-ref {
  font-size: 0.7em;
  line-height: 1;
}



/* ======================================
   Unterstreichung
   ====================================== */

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;  /* optional: etwas definierter */
  text-underline-offset: 0.12em;   /* etwas Abstand zur Grundlinie */
}

/* Kombination: rot + unterstrichen */
.text-red-underline {
  color: var(--lak-red);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}



/* ======================================
   2-spaltige Inhalte (Bild + Text)
   ====================================== */

.two-col {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 1.5rem 0;
}

/* Variante: Bild rechts, Text links */
.two-col--reverse {
  flex-direction: row-reverse;
}

/* Bild-Spalte */
.two-col-image {
  flex: 0 0 40%;          /* ca. 40% Breite für das Bild */
  max-width: 40%;
}

.two-col-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;     /* leicht abgerundet, sieht wertig aus */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Text-Spalte */
.two-col-text {
  flex: 1 1 0;
}

.two-col-text h3:first-child,
.two-col-text p:first-child {
  margin-top: 0;          /* keinen extra Abstand nach oben */
}

/* Auf schmalen Screens untereinander statt nebeneinander */
@media (max-width: 768px) {
  .two-col {
    flex-direction: column;
  }

  .two-col-image,
  .two-col-text {
    max-width: 100%;
    flex: 1 1 auto;
  }
}




/* Bild links, Text daneben – redaktionsfreundlich mit align-left */
.content img.align-left,
#body-wrapper img.align-left {
  float: left;
  max-width: 260px;         /* Größe des Bildes in der Spalte */
  height: auto;
  margin: 0 1.5rem 1rem 0;  /* Abstand zum Text */
}

/* Bild rechts, Text daneben – falls gebraucht */
.content img.align-right,
#body-wrapper img.align-right {
  float: right;
  max-width: 260px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
}

/* Auf schmalen Screens alles wieder untereinander */
@media (max-width: 768px) {
  .content img.align-left,
  #body-wrapper img.align-left,
  .content img.align-right,
  #body-wrapper img.align-right {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 80%;         /* oder 100%, wenn du möchtest */
  }
}



/* ======================================
   Mobile-Menü (Overlay) – Tree UX Upgrade
   (ganze Zeile klickbar, Unterpunkte deutlicher)
   ====================================== */

/* Größere Tap-Fläche + saubere Trennung */
.overlay-menu .tree li > a {
  padding: 0.85rem 0.2rem;   /* vorher 0.4rem 0 */
  font-size: 1.1rem;         /* bleibt wie bei dir */
  line-height: 1.25;
  border-bottom: 1px solid #eeeeee;
}

/* Falls das Tree-Plugin links einen kleinen Toggler (+/-) rendert: ausblenden */
.overlay-menu .tree .toggler,
.overlay-menu .tree .tree-toggler,
.overlay-menu .tree i.toggler {
  display: none !important;
}

/* Parent-Items mit Kindern: Platz für Indicator rechts */
.overlay-menu .tree li.has-children > a {
  position: relative;
  padding-right: 3rem;
}

/* Indicator rechts: + / – (passt zu deinem JS-Open-State "is-open") */
.overlay-menu .tree li.has-children > a::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--lak-red);
  opacity: 0.9;
}

.overlay-menu .tree li.has-children.is-open > a::after {
  content: "–";
}

/* Untermenü: deutlichere Hierarchie */
.overlay-menu .tree li ul {
  margin: 0.25rem 0 0.75rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 2px solid var(--lak-red);
}

/* Unterpunkte: etwas kleiner + eigener Background */
.overlay-menu .tree li ul li > a {
  font-size: 1.0rem;
  padding: 0.65rem 0.2rem 0.65rem 0.8rem;
  border-bottom: 1px solid #f0f0f0;
  background: rgba(179, 0, 0, 0.03);
  border-radius: 6px;
  margin: 0.15rem 0;
}

/* Optional: kleines Bullet links (wirkt wie klare Liste) */
.overlay-menu .tree li ul li > a::before {
  content: "•";
  display: inline-block;
  width: 1rem;
  margin-left: -0.2rem;
  color: var(--lak-red);
  opacity: 0.85;
}

/* Hover/Fokus (auch für Tastatur) */
.overlay-menu .tree li ul li > a:hover,
.overlay-menu .tree li ul li > a:focus {
  background: rgba(179, 0, 0, 0.06);
  border-bottom-color: var(--lak-red);
}