:root {
  --headings-color: #1a1a17; /* geändert: fehlendes Semikolon ergänzt, sonst wirkungslos */
  --main-color: #333333; /* vorher #494949 */
  --nav-color: #000;
  --nav-hover-color: #999;
  --ziss-color: #A8BF00;  /* vorher #a8b818. */
}
html {
  scroll-behavior:  smooth;
  color: var(--main-color);
}
body {
  hyphens: auto;
  hyphenate-limit-chars: auto 8;
}
a {hyphens: none;}
.logo {max-width: 111px;}
h1, h2, h3, h4, .uk-card-default .uk-card-title, .hero-title-color {
    color: var(--headings-color);
}
/* Schriften neu ab 1.8.2026: Desktop */
h1 {
  font-size: 40px;
  font-weight: 400;
  color: #1A1A17;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-bottom: 24px;
}
h2 {
  font-size: 24px;
  font-weight: 400;
  color: #1A1A17;
  letter-spacing: 0px;
  margin-top: 40px;
  margin-bottom: 12px;
}
.uk-card > h2 {margin-top: 0px}
h3 {
  font-size: 18px;
  font-weight: 500;
  color: #1A1A17;
  letter-spacing: 0px;
  margin-top: 40px;
  margin-bottom: 4px;
}
h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A17;
  letter-spacing: 0.1px;
  margin-top: 24px;
  margin-bottom: 0px;
}
/* neu: margin-bottom bei H4 ist bereits 0 — der grosse Abstand zum Text
   danach kommt vom eigenen margin-top des folgenden Elements (meist <p>),
   das addiert sich trotzdem dazu. Diese Regel nullt ihn gezielt nur direkt
   nach H4, ohne Abstände zwischen anderen Absätzen zu verändern. */
h4 + * {
  margin-top: 0px;
}
/* Schriften neu ab 1.8.2026:
Mobile — abgeleitet aus Desktop, Breakpoint ≤ 640px */
@media (max-width: 640px) {
  h1 {
    font-size: 29px;
    font-weight: 400;
    color: #1A1A17;
    letter-spacing: 0.7px;
    margin-top: 0px;
    margin-bottom: 20px;
  }
  h2 {
    font-size: 22px;
    font-weight: 400;
    color: #1A1A17;
    letter-spacing: 0px;
    margin-top: 24px;
    margin-bottom: 10px;
  }
  .uk-card > h2 {margin-top: 0px}
  h3 {
    font-size: 19px;
    font-weight: 500;
    color: #1A1A17;
    letter-spacing: 0px;
    margin-top: 24px;
    margin-bottom: 4px;
  }
  h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A17;
    letter-spacing: 0.1px;
    margin-top: 12px;
    margin-bottom: 0px;
  }
}
.uk-navbar-dropdown.language-nav {
    width: 100px;
}
.uk-offcanvas-bar {
    background: white;
}
ul.uk-navbar-nav {        /* den tatsächlichen Selektor aus DevTools einsetzen */
  display: flex;
  justify-content: flex-start;  /* statt space-between / space-around */
  align-items: center;
  gap: 0.5rem;                    /* EIN einheitlicher Abstand für alle */
  flex-wrap: nowrap;
}
.uk-navbar-item.uk-logo {
     padding: 0 4rem 0 1.5rem;
}
.uk-navbar-nav > li > a,
.uk-navbar-dropdown-nav>li>a {
    color: var(--nav-color);
    font-size: 1vw;
    padding: 0 12px;
    letter-spacing: 1px;
    /* width: min-content; */
    width: 100%;
    white-space: normal;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-dropdown-nav>li>a:hover,
.uk-navbar-nav > li > a.uk-active,
.uk-navbar-dropdown-nav>li>a.uk-active {
    color: var(--nav-hover-color);
}
.language-nav-inline .uk-navbar-item {
    padding: 0 15px;
}
.language-nav-inline .lang-item {
    color: #999;           /* inaktive Sprachen */
    text-decoration: none;
    font-size: 1vw;
}
@media (min-width: 1280px) {
   .uk-navbar-nav > li > a,
   .uk-navbar-dropdown-nav>li>a,
   .language-nav-inline .lang-item {
       font-size: 14px;
   }
}
.language-nav-inline .lang-item:hover {
    color: var(--nav-hover-color);
}
.language-nav-inline .lang-active {
    color: var(--nav-color);           /* oder eure CD-Farbe */
    /* font-weight: 700; */
    /* alternativ: border-bottom: 2px solid #e30613; */
}
.language-nav-inline .lang-sep {
    margin: 0 6px;
    color: #ccc;
}
.uk-offcanvas-bar a {
    color: var(--nav-color);
}
.uk-offcanvas-bar a:hover,
.uk-offcanvas-bar a.uk-active {
    color: var(--nav-hover-color);
}
.uk-navbar {
    box-shadow: 0 1px 0 rgb(0 0 0 / 10%);
}
.wrapper {
    min-height: 95vh;
    box-sizing: border-box;
}
.content a {
  font-family: 'DM Sans Medium', sans-serif;
  /*  font-weight: bold; */
  color: var(--main-color);
  text-decoration: underline;
  text-decoration-color: var(--ziss-color);
  text-decoration-thickness: 2px;
/*  border-bottom: 1px solid var(--ziss-color); */
}
.content a:hover {
  color: #666;}
/* geändert: font-family war 'DM Sans Medium' — das ist ein benannter Schnitt
   der Variable-Font-Datei und fixiert die Stärke fest auf Medium, egal was
   bei font-weight steht. Mit 'DM Sans' (ohne Zusatz) greift font-weight
   wieder normal. Ausserdem: Stärke 500 -> 300 (Light), Grösse 18px neu. */
dl.accordion > dt > a {
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0px;
}
/* neu: Hover-Zustand gab es vorher nicht.
   color hier bewusst gesetzt, sonst greift eine generische a:hover-Regel
   aus dem Framework und der Titel-Text graut beim Hover aus. */
dl.accordion > dt > a:hover {
  background: #EEF2D4;
  color: #333333;
}
/* neu: geöffneter Zustand — 1px grösser und eine Stufe kräftiger (Regular) */
dl.accordion > dt > a.open {
  font-weight: 400;
  font-size: 19px;
  background: #EEF2D4;
}
/* neu: Einzug, damit Fliesstext im Akkordeon bündig mit dem Titel startet */
dl.accordion dd {
  padding-left: 22px;
}
.uk-card-default {
  color: var(--main-color);
}
em {
    color: var(--main-color);
}
.red {
    color: #f0506e;
}
.uk-first-column {padding-left: 0;}
.uk-card-title {
    font-size: 2rem;
}
.uk-card-default {
   box-shadow: 0 5px 15px rgba(0,0,0,.25);
}
.footer {
    height: 5vh;
    background: #eee;
}
.uk-totop-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none; /* Hidden by default */
  z-index: 1000;
}
.uk-button-secondary {
  /*  border: 1px solid #a8b818; */
  border: 1px solid var(--ziss-color);
  border-radius: 5px;
  background: #eee;
}
.uk-button-secondary:focus, .uk-button-secondary:hover {
  /* background: #a8b818; */
  background: var(--ziss-color);
  color: #eee;
}
.uk-button-danger {
  border: 1px solid var(--ziss-color);
  border-radius: 5px;
  background: var(--ziss-color);
}
a.uk-button-danger {
  color: white;
}
.uk-button-danger:focus, .uk-button-danger:hover {
  background: #eee;
  color: var(--ziss-color);
}
.list-with-image {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.list-with-image ul {
  margin: 0;
  padding-left: 1.2rem;
}
.list-with-image img {
  max-width: 200px;
  height: auto;
}
@media (max-width: 640px){
    .logo {
        max-width: 80px;
    }
}
dl.accordion {
  margin-bottom: 5px;
  border-bottom-color: var(--ziss-color);
}
dl.accordion > dt {
  border-color: var(--ziss-color);
}