/* =========================================
   Globale Schriftdefinition (DSGVO-sicher)
   ========================================= */

/* Basis-Schriftfamilie:
   -apple-system  → macOS / iOS
   BlinkMacSystemFont → Safari
   Segoe UI → Windows
   Roboto → Android
   Helvetica Neue / Arial → fallback
   sans-serif → generisch
*/

html, body {
  font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;               /* angenehmes Dunkelgrau */
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
      font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  color: #111;
}

/* Links */
a {
  color: #0056b3;
  text-decoration: none;
}

a:hover {
  /*text-decoration: underline;*/
}

/* Absätze */
p {
  margin: 0 0 1em;
}

/* ===============================
   Variablen
   =============================== */
:root{
  --font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Navigation-Design */
  --nav-bg: rgba(255,255,255,0.99);  /* Transparenz (0–1) */
  --nav-hover: transparent;          /* kein Kästchen auf Hover */
  --nav-border: rgba(0,0,0,0.10);    /* auch für Unterkante/Dropdown */
  --nav-shadow: rgba(0,0,0,0.15);    /* Schattenfarbe */
  --nav-blur: 10px;                  /* Glas-Effekt */
  --nav-text: #111;
}

/* ===============================
   Navbar Rahmen + Schatten
   =============================== */
nav.navbar {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 8px 18px -10px var(--nav-shadow);
}

/* Nur Top-Level (level_1) – Unterpunkte bleiben unverändert */
.mod_navigation.font-system .navbar-start.level_1 > a.navbar-item > [itemprop="name"],
.mod_navigation.font-system .navbar-start.level_1 > .navbar-item.has-dropdown > a.navbar-link > [itemprop="name"]{
  font-family: var(--font-system) !important;
}

/* ===============================
   Glas-Hintergrund
   =============================== */
.navbar .navbar-start,
.navbar .navbar-dropdown,
.navbar .navbar-menu {
  background-color: var(--nav-bg) !important;
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
}

/* Textfarbe & Basis */
.navbar .navbar-item,
.navbar .navbar-link {
  color: var(--nav-text) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Kein grauer Hover-Hintergrund */
.navbar .navbar-item:hover,
.navbar .navbar-link:hover,
.navbar .navbar-item:active,
.navbar .navbar-link:active,
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active,
.navbar .navbar-dropdown .navbar-item:hover,
.navbar .navbar-dropdown .navbar-link:hover {
  background-color: var(--nav-hover) !important; /* transparent */
  box-shadow: none !important;
  color: #0a58ca !important; /* dezenter Textakzent - optional */
}

/* Fokus sichtbar, ohne Hintergrundkästchen */
.navbar .navbar-item:focus,
.navbar .navbar-link:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  background-color: transparent !important;
}

/* Dropdown optisch absetzen */
.navbar .navbar-dropdown {
  border: 1px solid var(--nav-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Burger-Menü (mobil) aktiv: gleicher Hintergrund */
.navbar .navbar-menu.is-active {
  background-color: var(--nav-bg) !important;
}

/* Pfeilfarbe bei Links (Bulma) */
.navbar .navbar-link:not(.is-arrowless)::after {
  border-color: currentColor;
}

/* ===============================
   Logo: Weißer Hintergrund, eckig,
   ohne linken Streifen
   =============================== */

/* 1) Weiß direkt am LOGO-Link setzen (deckt die ganze klickbare Fläche) */
nav.mod_navigation .navbar-brand > a.navbar-item {
  background: #fff !important;
  border-radius: 0 !important;
  padding: .5rem 1rem !important;   /* gewünschter weißer Rand */
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;                 /* falls Theme einen gap setzt */
  line-height: 1;                    /* keine Extra-Höhe durch line-height */
}

/* 2) Alle inneren Wrapper im Link neutralisieren (keine Abstände/Lücken) */
nav.mod_navigation .navbar-brand > a.navbar-item .mod_article,
nav.mod_navigation .navbar-brand > a.navbar-item .container.content,
nav.mod_navigation .navbar-brand > a.navbar-item .content-image,
nav.mod_navigation .navbar-brand > a.navbar-item figure {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 3) Bild sauber; falls PNG/SVG transparent ist, trotzdem weißer Untergrund */
nav.mod_navigation .navbar-brand > a.navbar-item picture,
nav.mod_navigation .navbar-brand > a.navbar-item img {
  display: block;
  height: auto;
  max-width: 100%;
  background: #fff !important;      /* nur unter dem Bild selbst */
  border-radius: 0 !important;
}

/* 4) Link-Hover darf NICHT wieder grau färben */
nav.mod_navigation .navbar-brand > a.navbar-item:hover {
  background: #fff !important;
}

/* 5) Link-Padding der Brand-Section selbst neutralisieren (falls da noch was kommt) */
nav.mod_navigation .navbar-brand { padding: 0 !important; background: transparent !important; }

/* Navigation nicht fett */
.navbar .navbar-item,
.navbar .navbar-link,
.navbar .navbar-dropdown .navbar-item,
.mod_navigation.font-system .navbar-start.level_1 > a.navbar-item > [itemprop="name"],
.mod_navigation.font-system .navbar-start.level_1 > .navbar-item.has-dropdown > a.navbar-link > [itemprop="name"]{
  font-weight: 400 !important; /* normal */
}

/* Auch aktive/hoverte Items nicht fett */
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active,
.navbar .navbar-item:hover,
.navbar .navbar-link:hover {
  font-weight: 400 !important;
}

/* Falls das Markup <strong> oder <b> in den Links enthält */
.navbar .navbar-item strong,
.navbar .navbar-item b {
  font-weight: inherit !important;
}

/* Mobile: Navbar überall weiß machen (Bulma-Breakpoint < 1024px) */
@media (max-width: 1023px) {

  /* 1) Variable mobil vollständig opak setzen */
  :root { --nav-bg: #fff; }

  /* 2) Oberer Balken (Brand + Burger) */
  nav.navbar,
  nav.navbar .navbar-brand,
  nav.navbar .navbar-burger {
    background-color: var(--nav-bg) !important;
    backdrop-filter: none;               /* Glas-Effekt mobil meist unnötig */
    -webkit-backdrop-filter: none;
  }

  /* 3) Ausklapp-Menü */
  nav.navbar .navbar-menu,
  nav.navbar .navbar-menu.is-active {
    background-color: var(--nav-bg) !important;
  }

  /* 4) Falls das Theme .is-transparent nutzt */
  nav.navbar.is-transparent,
  nav.navbar.is-transparent .navbar-menu {
    background-color: var(--nav-bg) !important;
  }

  /* 5) Burger-Icon gut lesbar */
  .navbar-burger span {
    background-color: #111 !important;
  }
}

/* Vollflächig weißer Header-Top-Bereich */
body.home,                           /* Seite selbst */
#wrapper,
#header,
#header .inside,
.mod_article.header-top,
.mod_article.header-top .container.content {
  background: #fff !important;
}

/* Falls das Theme Deko-Flächen über Pseudo-Elemente nutzt */
#header::before,
#header::after,
.mod_article.header-top::before,
.mod_article.header-top::after {
  background: none !important;
  box-shadow: none !important;
}

/* Optional: dezente Unterkante unter dem Header-Top */
.mod_article.header-top {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px -10px rgba(0,0,0,0.12);
}

/* Falls ein Verlauf/Bild am container hängt */
.mod_article.header-top .container.content {
  background: #fff !important;
}

/* Sicherheitshalber: Icons/Links gut lesbar auf Weiß */
.mod_article.header-top .ce_ct_featureElement .text a,
.mod_article.header-top .ce_ct_featureElement,
.mod_article.header-top .fa {
  color: #111;
}

/* zentrale Werte bequem steuerbar */
:root{
  /* maximale Inhaltsbreite – nach Bedarf 1200–1440 px */
  --content-max: 1320px;
  /* Innenabstand links/rechts für kleine Screens */
  --content-gutter: clamp(12px, 2vw, 24px);
}

/* WICHTIG: Nichts an der Navbar verändern! */
body.wide-centered nav.navbar,
body.wide-centered .navbar .container,
body.wide-centered header#header { 
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Haupt-Content zentrieren und verbreitern */
body.wide-centered #main .inside,
body.wide-centered .mod_article .content {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  width: 100%;
  box-sizing: border-box;
}

/* Optional: auch Footer-Inhalte zentriert und gleich breit */
body.wide-centered #footer .inside {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  width: 100%;
  box-sizing: border-box;
}

/* Sicherheit: harte max-widths im Content neutralisieren */
body.wide-centered #main .inside [style*="max-width"],
body.wide-centered .mod_article .content [style*="max-width"] {
  max-width: none !important;
}

/* Medien sauber skalieren */
body.wide-centered #main img,
body.wide-centered #main video,
body.wide-centered #main svg {
  max-width: 100%;
  height: auto;
}

/* Mobile: Abstand vom rechten Rand für Brand + Burger */
@media (max-width: 1023px) {
  /* 1) Brand-Bereich innen abpolstern */
  nav.mod_navigation .navbar-brand {
    padding-left: var(--content-gutter) !important;
    padding-right: calc(var(--content-gutter) + env(safe-area-inset-right)) !important;
  }

  /* 2) Zur Sicherheit: Burger selbst noch etwas nach innen */
  .navbar-burger {
    margin-right: env(safe-area-inset-right);
  }
}