* {
  font-family: "Quicksand", sans-serif !important;
}

/* --- Globale Farben / Variablen (Zusammengeführt) --- */
:root {
  --color-white: #ffffff;
  --color-off-white: #f8f8f8;
  --color-light-gray: #f2f2f2;
  --color-dark-gray: #333333;
  --color-black: #000000;
  --color-red: #ea0000;
  --color-red-rgb: 234, 0, 0;
  --color-blue: #4a90e2;
  --color-info-bg: #e0f2f7;
  --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-red-strong: 0 8px 20px rgba(var(--color-red-rgb), 0.3);
  --shadow-red-shimmer-light: 0 0 10px rgba(var(--color-red-rgb), 0.1);
  --shadow-red-shimmer-medium: 0 0 15px rgba(var(--color-red-rgb), 0.2);
  --shimmer-color: rgba(255, 255, 255, 0.4);
  --shimmer-width: 80px;
  --color-gray-light: #f8f8f8;
  --color-gray-dark: #333333;
  --color-primary: #007bff;
  --shadow-base: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contact-form > .uk-padding-large {
  padding: 0px; /* Nur bei voller breite soll ein padding angezeigt sein (media query) */
}

@media (min-width: 1225px) {
  .contact-form > .uk-padding-large {
    padding: 70px; /* Nur bei voller breite soll ein padding angezeigt sein (media query) */
  }
}

/* --- Software Produkt Intro Sektion (für Landing Pages) --- */
.software-product-intro-section {
  background-color: var(
    --color-white
  ); /* Oder bg-off-white, je nach Sektion davor */
  padding-top: 80px; /* Mehr Padding oben für den Intro-Bereich */
  padding-bottom: 80px;
  text-align: center;
  transition: background-color 0.5s ease; /* Für Dark Mode */
}

/* Stil der einzelnen grossen Produkt-Intro-Karte */
.product-intro-card {
  /* NEU: Subtiler Hintergrund-Farbverlauf */
  background: linear-gradient(
    145deg,
    var(--color-white),
    var(--color-off-white)
  ); /* Dezenter Verlauf */
  border-radius: 16px; /* Etwas stärker abgerundete Ecken für modernen Look */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Prominenterer, aber weicher Schatten */
  padding: 50px; /* Grosszügiger Raum */
  max-width: 900px; /* Etwas breiter als 800px für mehr Eleganz */
  margin: 0 auto; /* Zentrieren */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: background-color 0.5s ease, box-shadow 0.5s ease,
    transform 0.2s ease; /* Übergang für Hover */

  border: 1px solid var(--color-light-gray); /* Dezenter Rand */
}

/* NEU: Leichter Hover-Effekt für die Karte */
.product-intro-card:hover {
  transform: translateY(-8px); /* Karte schwebt leicht nach oben */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18); /* Schatten wird intensiver */
}

/* Grösserer Logo-Container für die Intro-Karte */
.software-logo-container.large-logo-container {
  /* Spezifische Klasse für diese Grösse */
  width: 300px; /* Deutlich grösser */
  height: 200px; /* Deutlich grösser */
  margin-bottom: 30px; /* Mehr Abstand zum Titel */
  overflow: visible; /* Wichtig, falls Animationen über den Rand gehen */
  position: relative;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Titel des Produkts in der Intro-Card */
.product-intro-card h1 {
  color: var(--color-black);
  font-size: 2em; /* Noch grösserer Titel für mehr Impact */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px; /* Mehr Abstand zur Beschreibung */
  line-height: 1.2; /* Etwas straffer, da der Titel grösser ist */
  transition: color 0.5s ease; /* Für Dark Mode */
}

/* NEU: Dezente Trennlinie unter dem Titel */
.product-intro-card h1::after {
  content: "";
  display: block;
  width: 100%; /* Breite der Linie */
  height: 3px; /* Dicke der Linie */
  background-color: var(--color-red); /* Rote Farbe */
  margin: 15px auto 25px; /* Abstand über und unter der Linie */
  border-radius: 2px; /* Leicht abgerundet */
}

/* Titel des Produkts in der Intro-Card */
.product-overview-card h2 {
  color: var(--color-black);
  font-size: 2em; /* Noch grösserer Titel für mehr Impact */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px; /* Mehr Abstand zur Beschreibung */
  line-height: 1.2; /* Etwas straffer, da der Titel grösser ist */
  transition: color 0.5s ease; /* Für Dark Mode */
}

/* NEU: Dezente Trennlinie unter dem Titel */
.product-overview-card h2::after {
  content: "";
  display: block;
  width: 100%; /* Breite der Linie */
  height: 3px; /* Dicke der Linie */
  background-color: var(--color-red); /* Rote Farbe */
  margin: 15px auto 25px; /* Abstand über und unter der Linie */
  border-radius: 2px; /* Leicht abgerundet */
}

/* Beschreibung des Produkts in der Intro-Card */
.product-intro-card p.uk-text-large {
  /* uk-text-large für UIkit-Konsistenz */
  font-size: 1.25em; /* Grössere Beschreibung für bessere Lesbarkeit */
  line-height: 1.7;
  color: var(--color-dark-gray);
  margin-bottom: 0;
  transition: color 0.5s ease; /* Für Dark Mode */
}

/* Media Queries für responsive Anpassungen */
@media (max-width: 960px) {
  .software-product-intro-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .product-intro-card {
    padding: 40px;
    max-width: 700px;
  }
  .software-logo-container.large-logo-container {
    width: 250px;
    height: 170px;
    margin-bottom: 25px;
  }
  .product-intro-card h3 {
    font-size: 2.5em;
  }
  .product-intro-card h3::after {
    /* Anpassung der Linie auf Tablets */
    margin: 10px auto 20px;
  }
  .product-intro-card p.uk-text-large {
    font-size: 1.15em;
  }
}

@media (max-width: 640px) {
  .software-product-intro-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .product-intro-card {
    padding: 25px;
    border-radius: 10px;
  }
  .software-logo-container.large-logo-container {
    width: 180px;
    height: 120px;
    margin-bottom: 20px;
  }
  .product-intro-card h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
  }
  .product-intro-card h3::after {
    /* Anpassung der Linie auf Handys */
    margin: 8px auto 15px;
  }
  .product-intro-card p.uk-text-large {
    font-size: 1em;
  }
}

/* --- Mitarbeiter-Portraits Sektion --- */
.employee-portraits-section {
  /* Hintergrundfarbe für Abwechslung wählen: Weiß oder Off-White */
  background-color: var(--color-white); /* Beispiel */
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Stil der einzelnen Mitarbeiter-Card */
.employee-card {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Startet den Inhalt oben in der Card */
  align-items: center; /* Zentriert den Inhalt horizontal */
  text-align: center;
  padding: 30px 20px;
  min-height: 350px; /* Mindesthöhe für die Card, anpassen falls nötig */
}

/* Wrapper für das runde Profilfoto */
.employee-photo-wrapper {
  width: 120px; /* Durchmesser des Kreises */
  height: 120px; /* Durchmesser des Kreises */
  border-radius: 50%; /* Macht den Wrapper rund */
  overflow: hidden; /* Schneidet alles ab, was über den Kreis hinausgeht */
  margin-bottom: 20px; /* Abstand zum Namen */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten um das Profilbild */
  display: flex; /* Für zentrierte Bildplatzierung */
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Verhindert, dass der Wrapper schrumpft */
}

/* Das Profilbild selbst innerhalb des Wrappers */
.employee-photo {
  width: 100%; /* Bild füllt den Wrapper */
  height: 100%; /* Bild füllt den Wrapper */
  object-fit: cover; /* Bildausschnitt füllt den Kreis ohne Verzerrung */
  display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
}

/* Name des Mitarbeiters */
.employee-name {
  color: var(--color-black);
  font-size: 1.6em; /* Etwas größerer Name */
  font-weight: 700;
  margin-bottom: 5px; /* Kleiner Abstand zur Funktion */
}

/* Funktion/Rolle des Mitarbeiters */
.employee-function {
  color: var(--color-dark-gray);
  font-size: 1.1em;
  margin-bottom: 15px; /* Abstand zu Kontaktdaten */
  font-weight: 400;
  max-width: 200px;
}

/* Kontaktdaten (Telefon, E-Mail) */
.employee-contact-info {
  font-size: 1em;
  line-height: 1.4;
  margin-bottom: 5px; /* Abstand zwischen Telefon und E-Mail */
}

.employee-contact-info:last-child {
  margin-bottom: 0; /* Kein Abstand nach dem letzten Kontaktfeld */
}

.employee-contact-info a {
  color: var(--color-black); /* Standard Linkfarbe schwarz */
  text-decoration: none; /* Keine Unterstreichung */
  transition: color 0.2s ease-in-out; /* Sanfter Farbwechsel beim Hover */
}

.employee-contact-info a:hover {
  color: var(--color-red); /* Link wird rot beim Hover */
  text-decoration: underline; /* Unterstreichung beim Hover für Klickbarkeit */
}

/* Media Queries für responsive Anpassungen */
@media (max-width: 1200px) {
  /* UKit 'l' breakpoint (4 Spalten) */
  .employee-card {
    min-height: 330px;
  }
  .employee-photo-wrapper {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 960px) {
  /* UKit 'm' breakpoint (3 Spalten) */
  .employee-card {
    min-height: 300px;
    padding: 25px 15px;
  }
  .employee-photo-wrapper {
    width: 90px;
    height: 90px;
    margin-bottom: 15px;
  }
  .employee-name {
    font-size: 1.4em;
  }
  .employee-function,
  .employee-contact-info {
    font-size: 0.95em;
  }
}

@media (max-width: 640px) {
  /* UKit 's' breakpoint (2 Spalten) */
  .employee-portraits-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .employee-card {
    min-height: 280px;
    padding: 20px 10px;
  }
  .employee-photo-wrapper {
    width: 80px;
    height: 80px;
  }
  .employee-name {
    font-size: 1.3em;
  }
  .employee-function,
  .employee-contact-info {
    font-size: 0.9em;
  }
}

/* Stil der einzelnen Job-Card */
.job-card {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Startet den Inhalt oben in der Card */
  align-items: center; /* Zentriert den Inhalt horizontal */
  text-align: center;
  padding: 30px 20px;
  min-height: 200px; /* Mindesthöhe für die Card, anpassen falls nötig */
  /* NEU: Sanfte Übergänge für Hover-Effekte */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
/* --- Hover-Effekt für die Karte (für "cooler" und Dynamik) --- */
.job-card:hover {
  transform: translateY(-8px); /* Karte schwebt leicht nach oben */
  box-shadow: var(--shadow-red-strong); /* Roter Schatten */
}

.job-card:hover .job-name {
  color: var(--color-red) !important; /* Bleibt Rot, falls es andere Farbe hätte */
}

.job-name {
  color: var(--color-black) !important;
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 5px;
}

.job-description {
  color: var(--color-black) !important;
  font-size: 1em;
  font-weight: 200;
  margin-bottom: 5px;
}

.job-open-section {
  height: auto;
  flex-grow: 1;
}

.job-unsolicited-section {
  background-color: var(
    --color-off-white
  ); /* Beispiel: Ein leichter Off-White Hintergrund */
  text-align: center; /* Zentriert den Text im Container */
}

/* Stil der einzelnen Job-Card */
.job-card {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Startet den Inhalt oben in der Card */
  align-items: center; /* Zentriert den Inhalt horizontal */
  text-align: center;
  padding: 30px 20px;
  min-height: 200px; /* Mindesthöhe für die Card, anpassen falls nötig */
}


/* --- Simple Text Block Sektion --- */

.simple-text-block-section {
  /* Wähle die Hintergrundfarbe basierend auf der Sektion davor/danach */
  /* Wenn die vorherige Sektion weiß war, hier var(--color-off-white) */
  /* Wenn die vorherige Sektion off-white war, hier var(--color-white) */
  background-color: var(
    --color-off-white
  ); /* Beispiel: Ein leichter Off-White Hintergrund */
  padding-top: 60px; /* Abstand zum vorherigen Modul */
  padding-bottom: 60px;
  text-align: center; /* Zentriert den Text im Container */
}

/* Stil für den eigentlichen Textinhalt */
.simple-text-block-section .simple-text-content {
  color: var(--color-dark-gray); /* Dunkelgrauer Text für bessere Lesbarkeit */
  font-size: 1.1em; /* Etwas größere Schriftgröße */
  line-height: 1.7; /* Angenehmer Zeilenabstand */
  max-width: 800px; /* Optional: Maximale Breite des Textblocks, falls uk-container-small nicht reicht */
  margin-left: auto; /* Zentriert den Block, wenn max-width gesetzt ist */
  margin-right: auto;
}

/* Anpassung für vom CKEditor erzeugte Elemente innerhalb des Textblocks */
.simple-text-block-section .simple-text-content p {
  margin-bottom: 1em; /* Abstand zwischen Absätzen */
}
.simple-text-block-section .simple-text-content h1,
.simple-text-block-section .simple-text-content h2,
.simple-text-block-section .simple-text-content h3,
.simple-text-block-section .simple-text-content h4,
.simple-text-block-section .simple-text-content h5,
.simple-text-block-section .simple-text-content h6 {
  margin-top: 1.5em; /* Abstand zu vorherigem Text */
  margin-bottom: 0.5em;
  font-weight: 700;
}
.simple-text-block-section .simple-text-content ul,
.simple-text-block-section .simple-text-content ol {
  text-align: left; /* Listen linksbündig */
  padding-left: 20px;
  margin-bottom: 1em;
  max-width: 700px; /* Optional: Listenbreite anpassen */
  margin-left: auto;
  margin-right: auto;
}
.simple-text-block-section .simple-text-content li {
  margin-bottom: 0.5em;
}

/* Media Queries für responsive Anpassungen (basierend auf bestehenden Breakpoints) */
@media (max-width: 960px) {
  .simple-text-block-section .simple-text-content {
    font-size: 1em;
  }
}

@media (max-width: 640px) {
  .simple-text-block-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .simple-text-block-section .simple-text-content {
    font-size: 0.95em;
  }
}

/* --- CSS Scroll Snapping für verbesserte Scrollability (Angepasst) --- */

/* Der Scroll-Container (normalerweise html) */
html {
  /*scroll-snap-type: y proximity; /* GEÄNDERT: Sanfteres Einrasten (nicht zwingend) */
  scroll-behavior: smooth;
  overflow-y: scroll;
  /* NEU (WICHTIG bei fixiertem Header): Abstand von oben beim Einrasten */
  /* Ersetze 80px mit der tatsächlichen Höhe deines fixierten Headers */
  scroll-padding-top: var(
    --header-height,
    0px
  ); /* Annahme: CSS-Variable --header-height ist definiert */
  /* Wenn du keine CSS-Variable nutzen willst, setze direkt z.B. 80px */
}

/* Jede Sektion, die als Snap-Punkt dienen soll */
.uk-section {
  scroll-snap-align: start; /* Rastet am Anfang (oben) der Sektion ein */

  /* Diese Stile kannst du beibehalten, da sie die Sektionen selbst betreffen */
  width: 100%;
  box-sizing: border-box;
  padding-top: 60px;
  padding-bottom: 60px;
  /* text-align: center; kannst du hier behalten oder spezifischer in H2/P/Div setzen,
        wenn du nicht alles in der Sektion zentriert haben willst */
}

@media (max-width: 640px) {
  .uk-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* --- Sektion 1: Funktionen Übersicht (Beispielklasse, falls du sie hast) --- */
/* Dies wäre die Sektion, die zuerst kommt und vielleicht einen WEISSEN Hintergrund hat */
.functions-section {
  background-color: var(
    --color-white
  ); /* Weißer Hintergrund für diese Sektion */
}

/* Anpassung der function-card, falls der Sektionshintergrund jetzt anders ist */
.function-card .uk-card {
  background-color: var(--color-white); /* Kacheln bleiben weiß */
  color: var(--color-black); /* Schwarzer Text */
  box-shadow: var(--shadow-medium); /* Subtiler Schatten */
  /* ... restliche Stile wie zuvor ... */
}
.function-card .function-icon svg {
  fill: var(--color-black);
}
.function-card:hover .function-icon svg,
.function-card:hover p {
  color: var(--color-red); /* Roter Text und Icon bei Hover */
  fill: var(--color-red); /* Rotes Icon bei Hover */
}

/* --- Sektion 2: Zielgruppen Übersicht (DEIN AKTUELL BEARBEITETES MODUL) --- */
/* Hier geben wir der Sektion einen leicht ABWEICHENDEN Hintergrund */
.target-groups-section {
  background-color: var(
    --color-off-white
  ); /* Leichter Off-White/Grau-Hintergrund */
  padding-top: 60px; /* Abstand zum vorherigen Modul (obere Sektion) */
  padding-bottom: 60px;
}

/* Stil der einzelnen Zielgruppen-Karte */
.target-group-card {
  background-color: var(--color-white); /* Die Cards selbst bleiben WEISS */
  border-radius: 12px;
  box-shadow: var(--shadow-medium); /* Subtiler Schatten */
}

/* Titel innerhalb der Karte */
.target-group-card .target-group-title {
  color: var(--color-black); /* Schwarz für den Titel */
}

/* Beschreibungstext innerhalb der Karte */
.target-group-card .target-group-description {
  color: var(
    --color-dark-gray
  ); /* Dunkelgrauer Text für die Beschreibung (oft angenehmer als reines Schwarz) */
}

html,
body {
  height: 100%;
  scroll-snap-align: start;
  display: flex; /* Aktiviert Flexbox */
  flex-direction: column; /* Ordnet die Elemente vertikal an */
  min-height: 100vh;
}

#hero-header {
  height: 300px;
}

.header-hero-text {
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  text-shadow:
        /* Feine, helle Umrandung */ -1px -1px 0 #333,
    1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333,
    /* Subtiler Schlagschatten für Tiefe */ 3px 3px 5px rgba(0, 0, 0, 0.6);
}

.header-hero-text h1 {
  color: white;
  text-shadow:
        /* Feine, helle Umrandung */ -1px -1px 0 #333,
    1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333,
    /* Subtiler Schlagschatten für Tiefe */ 3px 3px 5px rgba(0, 0, 0, 0.6);
}

header.pageheader {
  flex-shrink: 0;
}

footer.pageheader {
  flex-shrink: 0;
}

main {
  margin-bottom: auto;
}

main#content {
  height: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

div.pagefooter {
  flex-shrink: 0;
}

header.pageheader ul a:hover {
  color: #ea0000;
}

header.pageheader ul a {
  font-weight: bold;
}

header.pageheader ul li.active a {
  color: #ea0000;
}

footer.pageheader ul a:hover {
  color: #ea0000;
}

footer.pageheader ul a {
  font-weight: bold;
}

footer.pageheader ul li.active a {
  color: #ea0000;
}

div.mainnavigation {
  margin-left: 4rem;
}

nav {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* PAUS BUTTON CSS */
.pausbutton {
  /* Button Basis-Styling */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #ea0000; /* Startet mit weißem Hintergrund */
  color: white; /* Textfarbe, anpassen falls nötig */
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: Quicksand, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  transition: background-color 0.6s ease, color 0.4s ease,
    border-color 0.4s ease;
  z-index: 0;
  cursor: pointer;
}

.pausbutton::before {
  /* Der rote Punkt, der sich zum Hintergrund transformiert */
  content: "";
  position: absolute;
  top: 0px; /*-- Entfernt, da transform-origin jetzt die vertikale Position steuert */
  left: 50%;
  transform: translateX(-50%) translateY(-5px); /* Startposition des Punktes (horizontal zentriert, 5px über dem oberen Rand) */
  transform-origin: center top; /* Transformation startet von der Mitte oben des Punktes */
  width: 15px; /* Startgröße des Punktes */
  height: 15px;
  background-color: #ea0000; /* Startfarbe des Punktes (rot) */
  border-radius: 50%; /* Startform des Punktes (kreisrund) */
  border: 1px solid transparent; /* Startet mit transparentem Rahmen */
  z-index: -1; /* Wichtig: Liegt jetzt HINTER dem Text */
  transition: transform 0.6s ease-out, background-color 0.6s ease,
    border-color 0.6s ease; /* Übergänge für Transformation, Farbe und Rahmen */
}

/* Das NEUE ::after-Element für den Füll-Effekt von unten nach oben */
.pausbutton::after {
  content: "";
  position: absolute;
  bottom: 0; /* Startet am unteren Rand des Buttons */
  left: 0;
  width: 100%;
  height: 0; /* Startet mit 0 Höhe */
  background-color: white; /* Die Füllfarbe (Rot) */
  border-radius: 5px; /* Angleichen an den Button-Rand */
  transition: height 0.4s ease; /* Animiert die Höhe */
  z-index: -1; /* Liegt hinter dem Text und dem ::before-Element */
}

.pausbutton:hover::after {
  height: 100%; /* Füllt den Button komplett von unten nach oben */
  width: 120%;
  border-radius: 0px;
}

.pausbutton span[uk-icon] {
  position: relative; /* Stellt sicher, dass Icon und Text über dem transformierten Punkt liegen */
  z-index: 1; /* Höherer z-index als das ::before-Element */
}

/* Wende margin-right nur an, wenn die Bildschirmbreite mindestens 960px ist (Nicht-Mobile) */
@media (min-width: 960px) {
  .pausbutton span[uk-icon] {
    margin-right: 8px; /* Abstand zwischen Icon und Text nur auf Desktops */
  }
}

.pausbutton:hover {
  color: #333; /* Textfarbe wird weiß */
  border-color: #ea0000; /* Optional: Rahmenfarbe anpassen */
  overflow: hidden;
  text-decoration: none;
}

.pausbutton:hover::before {
  /* Der Punkt bewegt sich nach unten, wird groß und füllt den Button */
  /* Die translateY(0) sorgt dafür, dass die vertikale Position konsistent ist */
  transform: translateX(-50%) translateY(120%);
  /* Anpassung der Skalierung und Positionierung für den Füll-Effekt */
  /*width: 100%; /* Der Punkt nimmt die volle Breite des Buttons an */
  /*height: 100%; /* Der Punkt nimmt die volle Höhe des Buttons an */
  border-radius: 50%; /* Wird rechteckig */
  /*background-color: #ea0000; /* Bleibt rot */
  border-color: transparent; /* Der Punktrahmen wird transparent */
  transition: transform 0.3s ease;
}

.mainnavigation {
  position: relative; /* Wichtig für die Positionierung des Punktes */
}

.uk-navbar-nav {
  position: relative; /* Muss relativ sein, damit der Punkt absolut darin positioniert werden kann */
  z-index: 1; /* Stellt sicher, dass die Links über dem Punkt liegen, falls nötig */
}

.uk-navbar-nav li {
  position: relative; /* Damit Z-Index für Links funktioniert */
  z-index: 2; /* Links über dem Punkt */
}

.uk-navbar-nav a {
  /* Dein vorhandenes Link-Styling */
  padding: 10px 15px; /* Beispiel-Padding, an dein Design anpassen */
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease; /* Sanfter Farbwechsel des Textes */
}

/* Stil für den roten Punkt selbst */
.nav-dot {
  position: absolute;
  height: 15px; /* Größe des Punktes */
  width: 15px; /* Größe des Punktes */
  background-color: #ea0000; /* Der rote Farbcode */
  border-radius: 50%;
  z-index: 0; /* Der Punkt liegt unter den Links */
  transition: transform 0.3s ease-out; /* Sanfter Übergang für die Bewegung des Punktes */
  transform-origin: center center; /* Wichtig für die Skalierung, falls du die Größe ändern willst */
}

/* Wichtige Funktionen CSS */
/* Custom CSS für die Funktionsübersicht */

.function-card {
  margin-top: 1rem;
  display: block; /* Stellt sicher, dass der gesamte Bereich klickbar ist */
  transition: transform 0.2s ease-in-out; /* Nur Transformation beim Hover für die Karte */
  text-decoration: none; /* Entfernt die Unterstreichung von Links */
}

/* Stil der Karte selbst: Weißer Hintergrund, schwarzer Inhalt */
.function-card .uk-card {
  background-color: #ffffff; /* WEISSER Hintergrund für die Kachel */
  color: #000000; /* SCHWARZER Text im Normalzustand */
  border-radius: 8px; /* Etwas größere Abrundung für modernen Look */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtiler Schatten für Tiefe */
  min-height: 200px; /* Mindesthöhe für die Kachel */
  display: flex; /* Für Flexbox-Zentrierung */
  flex-direction: column; /* Elemente untereinander */
  justify-content: center; /* Vertikale Zentrierung */
  align-items: center; /* Horizontale Zentrierung */
  padding: 20px; /* Innenabstand */
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Übergänge für Karte selbst */
}

/* Icons: Farbe anpassen */
.function-card .function-icon svg {
  fill: #000000; /* SCHWARZE Icon-Farbe im Normalzustand */
  transition: fill 0.2s ease-in-out; /* Übergang für Icon-Farbe */
}

/* Text im Normalzustand (wird durch .uk-card color schon gesetzt, aber explizit für Hover) */
.function-card p {
  color: #000000; /* SCHWARZER Text im Normalzustand */
  transition: color 0.2s ease-in-out; /* Übergang für Textfarbe */
}

/* Hover-Effekt auf der gesamten Karte */
.function-card:hover {
  transform: translateY(-8px); /* Etwas stärkerer Hoch-Effekt für Dynamik */
}

.function-card:hover .uk-card {
  box-shadow: var(
    --shadow-red-strong
  ); /* Schatten wird intensiver beim Hover */
  /* Optional: Hintergrund bei Hover ändern, z.B. leicht grau oder eine andere Farbe
    background-color: #f8f8f8; */
}

/* Hover-Effekt: Text und Icon werden ROT */
.function-card:hover .function-icon svg,
.function-card:hover p {
  color: #ea0000; /* ROTER Text bei Hover */
  fill: #ea0000; /* ROTES Icon bei Hover */
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 640px) {
  /* UIkit 's' breakpoint */
  .function-card .uk-card {
    min-height: 150px; /* Etwas kleiner auf Handys */
    padding: 15px;
  }
}

/* --- Zielgruppen-Sektion --- */

.target-groups-section {
  padding-top: 60px; /* Standardabstand oben zum vorherigen Modul */
  padding-bottom: 60px; /* Standardabstand unten */
  /* Optional: Hintergrundfarbe für die gesamte Sektion, falls nicht schon durch body/globales CSS gesetzt */
  /* background-color: #f8f8f8; */
}

/* Stil der einzelnen Zielgruppen-Karte */
.target-group-card {
  background-color: #ffffff; /* Weißer Hintergrund */
  border-radius: 12px; /* Stärkere Abrundung für modernen Look */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Subtiler Schatten */
  /* Keine Transition, da kein Hover-Effekt */
  min-height: 220px; /* Mindesthöhe der Karte, anpassen falls nötig */
  display: flex; /* Flexbox für vertikale Zentrierung des Inhalts */
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Horizontale Zentrierung */
  text-align: center; /* Textzentrierung */
  padding: 30px 20px; /* Innenabstand */
}

/* Titel innerhalb der Karte */
.target-group-card .target-group-title {
  color: #000000; /* Schwarz für den Titel */
  font-size: 1.5em; /* Etwas größerer Titel */
  font-weight: 700;
  margin-bottom: 15px; /* Abstand zum Beschreibungstext */
  /* Keine Transition, da kein Hover-Effekt */
}

/* Beschreibungstext innerhalb der Karte */
.target-group-card .target-group-description {
  color: #333333; /* Dunkelgrauer Text für die Beschreibung */
  font-size: 1em;
  line-height: 1.6;
  /* Keine Transition, da kein Hover-Effekt */
}

/* Alle Hover-Effekte entfernt */
/* .target-group-card:hover { ... } */
/* .target-group-card:hover .target-group-title, ... { ... } */

/* Anpassung der allgemeinen Überschriftenfarbe, falls gewünscht */
.target-groups-section .uk-h2 {
  color: #333333; /* Dunkle Farbe für den Haupttitel */
}

/* Media Queries für responsive Anpassungen */
@media (max-width: 960px) {
  /* UKit 'm' breakpoint */
  .target-group-card {
    min-height: 200px; /* Etwas weniger Höhe auf Tablets */
    padding: 25px 15px;
  }
}

@media (max-width: 640px) {
  /* UKit 's' breakpoint */
  .target-groups-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .target-group-card {
    min-height: 180px; /* Noch etwas weniger Höhe auf Handys */
    padding: 20px 15px;
  }
  .target-group-card .target-group-title {
    font-size: 1.3em;
  }
}

/* --- Tätigkeitsbereich-Sektion (beibehalten) --- */
.activity-areas-section {
  background-color: var(
    --color-white
  ); /* Oder var(--color-off-white) je nach Sektionsreihenfolge */
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Stil der einzelnen Tätigkeitsbereich-Karte (der div.uk-card) */
.activity-area-card {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  min-height: 380px; /* BEHALTEN: Für großen Desktop-Viewport */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
}

/* Der Link-Container selbst (activity-area-card-link) */
.activity-area-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Bild-Wrapper für mehr Kontrolle */
.activity-area-image-wrapper {
  width: 100%;
  height: 180px; /* BEHALTEN: Für großen Desktop-Viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Bild/Icon innerhalb des Wrappers (beibehalten) */
.activity-area-card .activity-area-image {
  max-width: 95%;
  max-height: 100%;
  object-fit: contain;
  transition: filter 0.2s ease-in-out;
}

/* Titel und Beschreibung (beibehalten) */
.activity-area-card .activity-area-name {
  color: var(--color-black);
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 10px;
  transition: color 0.2s ease-in-out;
}
.activity-area-card .activity-area-description {
  color: var(--color-dark-gray);
  font-size: 1em;
  line-height: 1.6;
  transition: color 0.2s ease-in-out;
}

/* Hover-Effekt (beibehalten) */
.activity-area-card-link:hover .activity-area-card {
  transform: translateY(-8px);
  box-shadow: var(--shadow-red-strong);
}
.activity-area-card-link:hover .activity-area-name,
.activity-area-card-link:hover .activity-area-description {
  color: var(--color-red);
}
.activity-area-card-link:hover .activity-area-image {
  filter: brightness(1.1) contrast(1.1);
}

/* Anpassung der allgemeinen Überschriftenfarbe (beibehalten) */
.activity-areas-section .uk-h2 {
  color: var(--color-dark-gray);
}

/* Media Queries für responsive Anpassungen */
@media (min-width: 960px) {
  /* UKit 'm' breakpoint - jetzt für 3 Spalten */
  .activity-area-card {
    min-height: 350px; /* Leicht reduzierte Höhe, wenn 3 Spalten sind, um nicht zu lang zu wirken */
    height: 100%;
    padding: 25px 15px;
  }
  .activity-area-image-wrapper {
    height: 160px; /* Etwas kleinerer Bildbereich bei 3 Spalten */
    margin-bottom: 15px;
  }
  .activity-area-card-link {
    height: 100%;
  }
}

@media (max-width: 959px) and (min-width: 640px) {
  /* UKit 's' breakpoint - für 2 Spalten */
  .activity-area-card {
    min-height: 300px; /* Höhe für 2 Spalten auf Tablets */
    padding: 25px 15px;
  }
  .activity-area-image-wrapper {
    height: 140px; /* Bildbereich auf Tablets */
    margin-bottom: 15px;
  }
}

@media (max-width: 639px) {
  /* Standard für kleine Bildschirme - 1 Spalte */
  .activity-areas-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .activity-area-card {
    min-height: 280px; /* Höhe für 1 Spalte auf Handys */
    padding: 20px 15px;
  }
  .activity-area-image-wrapper {
    height: 120px; /* Bildbereich auf Handys */
    margin-bottom: 15px;
  }
  .activity-area-card .activity-area-name {
    font-size: 1.3em;
  }
}

/*--- Kontaktformular ----*/
/* Basic Form Styles */
.contact-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sanfter Schatten */
  max-width: 1000px; /* Max. Breite für das Formular */
  margin: 40px auto; /* Zentrieren und Abstand oben/unten */
}

.contact-form h3 {
  color: #333;
  font-size: 2em;
  margin-bottom: 25px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  color: #333;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-sizing: border-box; /* Wichtig für korrekte Breite */
}

.form-control:focus {
  border-color: #007bff; /* Blauer Fokusrand */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Blauer Fokus-Schatten */
  outline: none;
}

textarea.form-control {
  resize: vertical; /* Nur vertikales Skalieren erlauben */
  min-height: 120px;
}

/* Error States */
.form-group.has-error .form-control {
  border-color: #dc3545; /* Roter Rand bei Fehler */
}

.form-group.has-error .help-block {
  color: #dc3545; /* Rote Fehlermeldung */
  font-size: 0.9em;
  margin-top: 5px;
}

/* Button Styling */
.btn {
  display: inline-block;
  font-weight: 600;
  color: #fff;
  background-color: #007bff; /* Blauer Button */
  border: 1px solid #007bff;
  padding: 12px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  text-align: center;
  width: auto; /* An Inhalt anpassen */
}

.btn:hover {
  background-color: #0056b3; /* Dunkelblauer Hover-Effekt */
  border-color: #0056b3;
}

/* Alert Messages */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.text-danger {
  color: #dc3545; /* Für das Sternchen bei Pflichtfeldern */
}

/* --- Firmen-Zeitstrahl Sektion (unverändert) --- */
.company-timeline-section {
  background-color: var(--color-off-white);
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.timeline-wrapper {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--color-light-gray);
  transform: translateX(-50%);
  z-index: 1;
}

/* Einzelnes Zeitstrahl-Element */
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-bottom: 60px;
  margin-bottom: 0;
  z-index: 2; /* Wichtig, damit Inhalt über der Linie liegt */

  /* Animation: Standardzustand (versteckt) */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Linie des letzten Elements kürzen (optional) */
.timeline-item:last-child {
  padding-bottom: 0;
}

/* Animation: Zustand, wenn das Element sichtbar wird (durch JS-Klasse "is-visible") */
.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- NEU: Der Punkt als ::before Pseudo-Element auf dem aktiven timeline-item --- */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 5px; /* Position am oberen Anfang des timeline-item */
  left: 50%; /* Zentriert auf der Linie */
  transform: translate(-50%, 0); /* Horizontal zentrieren */
  width: 0; /* Anfangs unsichtbar */
  height: 0; /* Anfangs unsichtbar */
  background-color: var(--color-red);
  border-radius: 50%;
  z-index: 3; /* Über Linie, unter Inhalt */
  border: 0px solid var(--color-white); /* Anfangs kein Rand */
  transition: width 0.3s ease-out, height 0.3s ease-out,
    border-width 0.3s ease-out, opacity 0.3s ease-out; /* Sanfte Animation beim Erscheinen/Verschwinden */
  opacity: 0;
}

/* Zustand, wenn das timeline-item aktiv ist (durch JS-Klasse "is-active") */
.timeline-item.is-active::before {
  width: 24px; /* Punkt wird sichtbar und größer */
  height: 24px;
  border-width: 4px; /* Rand erscheint */
  opacity: 1;
}
/* --- ENDE NEUER STIL für Punkt --- */

/* Jahr-Anzeige */
.timeline-year {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--color-black);
  width: calc(50% - 70px);
  text-align: right;
  padding-right: 30px;
  flex-shrink: 0;
  padding-top: 0;
  line-height: 1.2;
}

/* Inhalt der Zeitstrahl-Karte */
.timeline-content {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  padding: 25px;
  flex-grow: 1;
  max-width: calc(50% - 70px);
  text-align: left;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 350px;
}

/* Bild-Wrapper in der Karte */
.timeline-image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 25px;
  border-radius: 8px;
  flex-shrink: 0;
}

.timeline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Überschrift des Ereignisses */
.timeline-headline {
  color: var(--color-black);
  font-size: 1.4em;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Beschreibungstext */
.timeline-description {
  color: var(--color-dark-gray);
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Abwechselnde Darstellung (rechte Seite) (unverändert) --- */
.timeline-item--right {
  flex-direction: row-reverse;
}
.timeline-item--right .timeline-year {
  text-align: left;
  padding-left: 30px;
  padding-right: 0;
}
.timeline-item--right .timeline-content {
  margin-left: 0;
  margin-right: 40px;
  align-items: flex-end;
}

/* Mobile Anpassungen: Alles auf einer Seite */
@media (max-width: 960px) {
  /* UKit 'm' breakpoint (Tablet) */
  .timeline-wrapper::before {
    left: 20px;
    transform: none;
  }
  /* Punkt Position auf Mobil anpassen */
  .timeline-item::before {
    /* ANPASSUNG: ::before Punkt folgt der Linie */
    left: 20px;
    transform: translateX(-50%);
  }

  .timeline-item {
    flex-direction: row;
    padding-bottom: 40px;
  }
  .timeline-item .timeline-year {
    width: 80px;
    text-align: right;
    padding-right: 15px;
    font-size: 1.4em;
  }
  .timeline-content {
    max-width: calc(100% - 120px);
    margin-left: 20px;
    margin-right: 0;
    padding: 20px;
    align-items: flex-start;
    min-height: 280px;
  }
  .timeline-image-wrapper {
    width: 100%;
    height: 160px;
    margin-bottom: 15px;
  }
  /* Alle spezifischen --right-Anpassungen zurücksetzen */
  .timeline-item--right {
    flex-direction: row;
  }
  .timeline-item--right .timeline-year {
    text-align: right;
    padding-left: 0;
    padding-right: 15px;
  }
  .timeline-item--right .timeline-content {
    margin-left: 20px;
    margin-right: 0;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  /* UKit 's' breakpoint (Mobile) */
  .company-timeline-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .timeline-item {
    padding-bottom: 30px;
  }
  .timeline-year {
    font-size: 1.2em;
    width: 70px;
  }
  .timeline-content {
    font-size: 0.95em;
    padding: 15px;
    min-height: 240px;
  }
  .timeline-image-wrapper {
    width: 100%;
    height: 120px;
    margin-bottom: 15px;
  }
  .timeline-headline {
    font-size: 1.2em;
  }
}

/* --- Stil für den einzigen, mitscrollenden Punkt --- */
.timeline-active-dot {
  position: absolute;
  left: 50%; /* Position auf der zentralen Linie */
  top: 0; /* Startposition (wird durch JS gesetzt) */
  transform: translate(
    -50%,
    -50%
  ); /* Horizontal und vertikal auf seinen eigenen Mittelpunkt zentrieren */
  width: 24px; /* Grösse des Punktes */
  height: 24px;
  background-color: var(--color-red); /* Rote Farbe */
  border-radius: 50%; /* Macht den Punkt rund */
  z-index: 4; /* Über Linie und Inhalten */
  border: 4px solid var(--color-white); /* Prominenter weisser Rand */
  transition: top 0.4s ease-out; /* Sanfte Bewegung beim Ändern der Top-Position */
  opacity: 1; /* Standardmässig sichtbar, JS steuert dynamisch auf 0 oder 1 */
}

/* Anpassung der Position auf Mobil (wenn die Linie nach links wandert) */
@media (max-width: 960px) {
  /* UKit 'm' breakpoint (Tablet) */
  .timeline-active-dot {
    left: 20px; /* Punkt wandert auch auf die linke Seite, passend zur Linie */
  }
}

/* --- Basis-Stil für Timeline-Content (die Karte) --- */
.timeline-content {
  position: relative; /* Für das ::before Pseudoelement */
  /* Standard (dunkler/subtiler) Rand und Schatten, der nach der Animation sichtbar sein soll */
  border: 2px solid var(--color-light-gray, #f2f2f2); /* Standard: subtiler grauer Rand */

  /* Transition für den Standard-Rand und Schatten (falls diese sich jemals ändern) */
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Das Pseudoelement, das den zeichnenden Rahmen und Schatten erzeugt */
.timeline-item.is-visible .timeline-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px; /* Abrundung des Pseudoelements, passend zur Karte */
  z-index: 1; /* Über dem Inhalt der Karte */
  pointer-events: none; /* Blockiert keine Klicks */

  /* Animation für das Zeichnen der Ränder und den Schatten */
  animation: drawBorder 2s ease-in forwards; /* Name geändert zu drawBorder */
  opacity: 0; /* Anfangs unsichtbar, um den initialen "Blitz" zu vermeiden */
  box-shadow: none; /* Anfangs kein Schatten */
}

/* --- Keyframes für die NEUE Wander-Animation (zeichnender Rahmen) --- */
@keyframes drawBorder {
  0% {
    background-size: 0% 1px, 0% 1px, 1px 0%, 1px 0%; /* Alle Ränder sind 0% */
    box-shadow: 0 0 0 rgba(255, 0, 0, 0); /* Schatten ist aus */
    opacity: 0; /* Beginnt unsichtbar */
  }
  5% {
    opacity: 0.5; /* Wird sichtbar */
    box-shadow: 0 0 5px var(--color-red); /* Schatten leicht an */
  }
  25% {
    background-size: 100% 1px, 0% 1px, 1px 0%, 1px 0%; /* Top border draws to 100% */
    box-shadow: 0 0 10px var(--color-red);
  }
  50% {
    background-size: 100% 1px, 0% 1px, 1px 100%, 1px 0%; /* Right border draws to 100% */
    box-shadow: 0 0 15px var(--color-red);
  }
  75% {
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 0%; /* Bottom border draws to 100% */
    box-shadow: 0 0 20px var(--color-red);
  }
  90% {
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; /* Left border draws to 100% (all drawn) */
    box-shadow: 0 0 10px var(--color-red);
    opacity: 1; /* Immer noch voll sichtbar */
  }
  99% {
    /* Kurz vor Ende, um den Übergang sanft zu machen */
    opacity: 0; /* Pseudoelement verschwindet */
    box-shadow: 0 0 0 rgba(255, 0, 0, 0); /* Schatten verschwindet */
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; /* Bleibt gezeichnet, wird aber unsichtbar */
  }
  100% {
    /* Endzustand nach der Animation */
    opacity: 0; /* Komplett unsichtbar */
    box-shadow: none;
    background-size: 0% 0px, 0% 0px, 0px 0%, 0px 0%; /* Ränder auf 0 setzen */
    display: none; /* Wichtig, um es komplett aus dem Render-Flow zu nehmen */
  }
}

/* --- IT-Dienstleistungen Sektion (bleibt gleich) --- */
.it-services-section {
  background-color: var(--color-white);
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Stil der einzelnen Dienstleistungs-Karte */
.it-service-card {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow-medium); /* Standard subtiler Schatten */
  /* NEU: Sanfte Übergänge für Hover-Effekte */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    color 0.2s ease-in-out, max-height 0.7s ease-in-out;
  min-height: 250px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: inherit;
  text-align: left;
  padding: 30px;
  max-height: 350px;
  
  
}
.card-content {
width: 100%;
}

/* Icon der Dienstleistung */
.it-service-icon {
  /* uk-icon mit ratio: 3.5 wird im HTML gesetzt - machen wir 4.0 für mehr Impact */
  margin-bottom: 25px; /* ANGEPASST: Mehr Abstand zum Titel */
}
.it-service-icon svg {
  transition: fill 0.2s ease-in-out; /* NEU: Transition für Iconfarbe */
}

/* Titel der Dienstleistung */
.it-service-title {
  font-size: 1.8em; /* ANGEPASST: Grösser für mehr Impact */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3; /* Etwas straffer, da der Titel grösser ist */
  transition: color 0.2s ease-in-out; /* NEU: Transition für Titelfarbe */
}

/* Beschreibung der Dienstleistung */
.it-service-description {
  color: var(--color-dark-gray);
  font-size: 1em;
  line-height: 1.6; /* Guter Zeilenabstand für Lesbarkeit */
  margin-bottom: 0;
}

/* --- Hover-Effekt für die Karte (für "cooler" und Dynamik) --- */
.it-service-card:hover {
  transform: translateY(-8px); /* Karte schwebt leicht nach oben */
  box-shadow: var(--shadow-red-strong); /* Roter Schatten */
}

/* Text und Iconfarbe ändern sich beim Hover zu Rot */
.it-service-card:hover .it-service-icon svg,
.it-service-card:hover .it-service-title {
  fill: var(--color-red); /* Bleibt Rot, falls es andere Farbe hätte */
  color: var(--color-red); /* Bleibt Rot, falls es andere Farbe hätte */
}
/* Wenn Sie möchten, dass der Text beim Hover etwas Dunkler wird, ändern Sie dies: */
/* .it-service-card:hover .it-service-description {
    color: var(--color-black);
} */

/* Anpassung der allgemeinen Überschriftenfarbe (bleibt gleich) */
.it-services-section .uk-h2 {
  color: var(--color-dark-gray);
}

/* Media Queries für responsive Anpassungen */
@media (max-width: 960px) {
  /* UKit 'm' breakpoint */
  .it-service-card {
    padding: 25px;
    min-height: 220px;
	max-height: 600px;
	flex-direction: column;
  }
  .it-service-icon {
    margin-bottom: 15px;
  }
  .it-service-title {
    font-size: 1.6em; /* Skalierung für Tablets */
  }
}

@media (max-width: 640px) {
  /* UKit 's' breakpoint */
  .it-services-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .it-service-card {
    padding: 20px;
    min-height: 200px;
  }
  .it-service-icon {
    margin-bottom: 10px;
  }
  .it-service-title {
    font-size: 1.4em; /* Skalierung für Handys */
  }
}

.uk-card {
  height: 100%;
}

/* --- Styles für die Software-Module-Übersicht (software.css) --- */

/* Die Sektion für die Modul-Übersicht */
.software-modules-overview-section {
  background-color: var(
    --color-off-white
  ); /* Hintergrundfarbe wie in output.php */
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center; /* Zentriert den Titel und das Grid */
}

/* Der Container für das Grid der Modulkarten */
/* WICHTIG: Spezifität erhöht, um sicherzustellen, dass diese Regeln greifen */
.software-modules-overview-section .uk-grid {
  display: grid; /* Sicherstellen, dass Grid-Layout aktiv ist */
  grid-template-columns: 1fr; /* Standard: 1 Spalte für sehr kleine Bildschirme */
  row-gap: 30px; /* Abstand zwischen den Reihen */
  column-gap: 20px; /* Abstand zwischen den Spalten */
  max-width: 1000px; /* Konsistenz mit anderen Grid-Containern */
  margin: 0 auto;
}

/* Stil der einzelnen Modul-Karte */
.software-modules-overview-section .card {
  background-color: var(--color-white); /* Weisser Hintergrund */
  border-radius: 12px;
  box-shadow: var(--shadow-medium); /* Subtiler Schatten */
  padding: 30px; /* Innenabstand */
  min-height: 220px; /* Mindesthöhe für Konsistenz */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Inhalt vertikal zentrieren */
  align-items: center; /* Inhalt horizontal zentrieren */
  text-align: center;

  /* Hover-Effekt */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    border-color 0.3s ease;
  position: relative; /* Für das card-link-overlay */
}

.software-modules-overview-section .card:hover {
  transform: translateY(-5px); /* Leichtes Schweben */
  box-shadow: var(--shadow-red-strong); /* Roter Schatten beim Hover */
  border-color: var(--color-red); /* Roter Rand beim Hover */
}

/* Wrapper für das Modul-Icon (Bild) */
.software-modules-overview-section .card .module-icon-wrapper {
  width: 40px; /* Kleinere Breite */
  height: 40px; /* Kleinere Höhe */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Stil für das Modul-Icon (<img>) */
.software-modules-overview-section .card .module-card-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease;
}

/* Icon (Emoji oder UIkit) - Fallback Stil, falls kein Bild geladen wird */
.software-modules-overview-section .card .icon {
  font-size: 2.5em; /* Kleinere Schriftgrösse */
  color: var(--color-red);
  margin-bottom: 15px;
  transition: color 0.2s ease-in-out;
}

/* Titel des Moduls */
.software-modules-overview-section .card h3 {
  color: var(--color-black);
  font-size: 1.4em;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color 0.2s ease-in-out;
}

/* Beschreibung des Moduls */
.software-modules-overview-section .card p {
  color: var(--color-dark-gray);
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Overlay-Link für die Karten (aus dem Prototyp) */
.software-modules-overview-section .card-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  text-decoration: none;
}

/* Media Queries für responsive Anpassungen */
@media (min-width: 1225px) {
  /* UKit 'm' breakpoint - für 3 Spalten */
  .software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }

  #eva-modules-section.software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }
  #pub-modules-section.software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }
  .software-modules-overview-section .card {
    padding: 25px;
    min-height: 200px;
  }
  .software-modules-overview-section .card .module-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  .software-modules-overview-section .card .icon {
    font-size: 2.5em;
  }
  .software-modules-overview-section .card h3 {
    font-size: 1.3em;
  }
}

@media (max-width: 1225px) and (min-width: 640px) {
  /* UKit 's' breakpoint - für 2 Spalten */
  .software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }
  #eva-modules-section.software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }
  #pub-modules-section.software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
    column-gap: 20px;
  }
  .software-modules-overview-section .card {
    padding: 25px;
    min-height: 200px;
  }
  .software-modules-overview-section .card .module-icon-wrapper {
    width: 35px;
    height: 35px;
  }
  .software-modules-overview-section .card .icon {
    font-size: 2em;
  }
  .software-modules-overview-section .card h3 {
    font-size: 1.3em;
  }
}

@media (max-width: 639px) {
  /* UKit 's' breakpoint - für 1 Spalte */
  .software-modules-overview-section .uk-grid {
    /* KORRIGIERT: Zielt direkt auf .uk-grid */
    grid-template-columns: 1fr;
    row-gap: 20px;
    column-gap: 0;
  }
  .software-modules-overview-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .software-modules-overview-section .card {
    padding: 20px;
    min-height: 180px;
  }
  .software-modules-overview-section .card .module-icon-wrapper {
    width: 30px;
    height: 30px;
  }
  .software-modules-overview-section .card .icon {
    font-size: 1.8em;
    margin-bottom: 8px;
  }
  .software-modules-overview-section .card h3 {
    font-size: 1.1em;
  }
}

/* --- Allgemeine Card-Stile (für .card-Elemente in verschiedenen Modulen) --- */
.card {
  background-color: var(--color-white); /* Weisser Hintergrund */
  border-radius: 12px; /* Abgerundete Ecken */
  box-shadow: var(--shadow-medium); /* Subtiler Schatten */
  padding: 25px; /* Innenabstand */
  min-height: 180px; /* Mindesthöhe für gleiche Höhen im Grid */

  display: flex;
  flex-direction: column;
  justify-content: center; /* Inhalt vertikal zentrieren */
  align-items: center; /* Inhalt horizontal zentrieren */
  text-align: center;

  /* Hover-Effekt */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    border-color 0.3s ease;
  position: relative; /* Wichtig für .card-link-overlay */
}

.card:hover {
  transform: translateY(-5px); /* Leichtes Schweben */
  box-shadow: var(--shadow-red-strong); /* Roter Schatten beim Hover */
  border-color: var(--color-red); /* Roter Rand beim Hover */
}

/* Icon (Emoji oder UIkit) */
.card .icon {
  font-size: 2.5em; /* Grösse des Icons */
  color: var(--color-red); /* Rote Farbe */
  margin-bottom: 15px;
  transition: color 0.2s ease-in-out;
}

/* Titel des Moduls */
.card h3 {
  color: var(--color-black); /* Schwarzer Text */
  font-size: 1.4em; /* Angemessene Grösse */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color 0.2s ease-in-out;
}

/* Beschreibung des Moduls */
.card p {
  color: var(--color-dark-gray); /* Dunkelgrauer Text */
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Overlay-Link für die Karten (macht die ganze Karte klickbar) */
.card-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  text-decoration: none;
}

/* --- Spezifische Anpassungen für Modul-Icons (Bilder) innerhalb der Card --- */
.card .module-icon-wrapper {
  width: 40px; /* Grösse des Icon-Containers */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.card .module-card-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease;
}

/* --- Media Queries für die Card-Elemente (Skalierung) --- */
@media (min-width: 960px) {
  /* UKit 'm' breakpoint - für 3 Spalten */
  .card {
    padding: 25px;
    min-height: 200px;
  }
  .card .module-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  .card .icon {
    font-size: 2.5em;
  }
  .card h3 {
    font-size: 1.3em;
  }
}

@media (max-width: 959px) and (min-width: 640px) {
  /* UKit 's' breakpoint - für 2 Spalten */
  .card {
    padding: 25px;
    min-height: 200px;
  }
  .card .module-icon-wrapper {
    width: 35px;
    height: 35px;
  }
  .card .icon {
    font-size: 2em;
  }
  .card h3 {
    font-size: 1.3em;
  }
}

@media (max-width: 639px) {
  /* UKit 's' breakpoint - für 1 Spalte */
  .card {
    padding: 20px;
    min-height: 180px;
  }
  .card .module-icon-wrapper {
    width: 30px;
    height: 30px;
  }
  .card .icon {
    font-size: 1.8em;
    margin-bottom: 8px;
  }
  .card h3 {
    font-size: 1.1em;
  }
}

/* KONTAKT FORM CSS */

#website {
  display: none;
}

#firstname {
  display: none;
}

.software-product-contact-section {
  background-color: var(--color-off-white);
}

#content > section:nth-child(odd) {
  background-color: var(--color-white) !important;
}

#content > section:nth-child(even) {
  background-color: var(--color-off-white) !important;
}

#main-content > section:nth-child(odd) {
  background-color: var(--color-white) !important;
}

#main-content > section:nth-child(even) {
  background-color: var(--color-off-white) !important;
}
/* --- Gallery Section --- */
.gallery-section {
  background-color: var(
    --color-off-white
  ); /* Konsistent mit anderen Sektionen */
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center; /* Für Sektionstitel, falls vorhanden */
  transition: background-color 0.5s ease;
}

.gallery-image {
  margin-bottom: 0px;
}

/* Der UIkit Grid-Container für die Galerie-Bilder */
.gallery-section .gallery-grid {
  /* NEU: Zielt auf .gallery-grid */
  display: grid; /* WICHTIG: Erzwingt CSS Grid */
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Standard: Flexible Spalten, min 250px */

  row-gap: 15px; /* Kleinerer vertikaler Abstand zwischen den Reihen */
  column-gap: 15px; /* Kleinerer horizontaler Abstand zwischen den Spalten */

  margin-left: auto; /* Zentriert das Grid, falls es nicht die volle Breite einnimmt */
  margin-right: auto;
  /* max-width: 100%; /* Sicherstellen, dass es die volle Breite innerhalb seines Containers einnimmt */
}

/* WICHTIG: Überschreibt uk-grid-margin */
/* Dies betrifft die zusätzlichen Margins, die UIkit für Reihenumbrüche setzt */
.gallery-section .gallery-grid > div.uk-grid-margin {
  /* NEU: Zielt auf .gallery-grid */
  margin-top: 15px !important; /* Setzt den vertikalen Abstand konsistent mit row-gap */
}
/* Für die erste Spalte in einer neuen Reihe, die auch uk-grid-margin hat */
.gallery-section .gallery-grid > div.uk-grid-margin.uk-first-column {
  /* NEU: Zielt auf .gallery-grid */
  margin-top: 15px !important; /* Sicherstellen, dass auch hier der Abstand konsistent ist */
}

/* Wrapper für jedes Galerie-Element (die kachelartige Darstellung) */
.gallery-item-wrapper {
  background-color: var(--color-white); /* Hintergrund der Kachel */
  border-radius: 12px; /* Abgerundete Ecken */
  box-shadow: var(--shadow-medium); /* Subtiler Schatten */
  overflow: hidden; /* Wichtig für Bildskalierung und border-radius */
  position: relative; /* Für Overlays oder absolute Positionierung innen */
  display: flex; /* Um Inhalt zu zentrieren, falls nötig */
  justify-content: center;
  padding-left: 0px;
  align-items: center;
  /* min-height: 200px; /* Kann entfernt werden, wenn Bilder feste Seitenverhältnisse haben */
  /* Übergänge für Hover-Effekte und Dark Mode */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    border-color 0.3s ease-out, background-color 0.3s ease-out;
}

/* Hover-Effekt für den Galerie-Element-Wrapper */
.gallery-item-wrapper:hover {
  transform: translateY(-5px); /* Hebe-Effekt */
  box-shadow: var(--shadow-red-strong); /* Roter Schatten beim Hover */
  border-color: var(--color-red); /* Optional: Roter Rand beim Hover */
}

/* Das Bild selbst innerhalb des Wrappers */
.gallery-item-wrapper .gallery-image {
  display: block;
  width: 100%; /* Bild füllt seinen Container */
  height: 100%; /* Höhe passt sich an, um Seitenverhältnis zu bewahren */
  /* object-fit: cover; /* Schneidet das Bild zu, um den Bereich zu füllen, behält das Seitenverhältnis bei */
  border-radius: 12px; /* Passt zum border-radius des Wrappers */
  transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

/* Hover-Effekt auf dem Bild, wenn der Wrapper gehovered wird */
.gallery-item-wrapper:hover .gallery-image {
  transform: scale(1.05); /* Bild leicht vergrössern */
  filter: brightness(0.9); /* Bild leicht abdunkeln */
}

/* Sicherstellen, dass der uk-inline-Link den Wrapper füllt */
.gallery-item-wrapper .uk-inline {
  display: block;
  width: 100%;
  height: 100%;
}

/* Media Queries für Responsivität (Anpassung an UIkit-Grid) */
@media (min-width: 960px) {
  /* UKit 'm' breakpoint (Desktop) */
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(3, 1fr); /* Explizit 3 Spalten */
    row-gap: 20px; /* Angepasster Abstand */
    column-gap: 20px; /* Angepasster Abstand */
  }
  .gallery-section .gallery-grid > div.uk-grid-margin,
  .gallery-section .gallery-grid > div.uk-grid-margin.uk-first-column {
    margin-top: 20px !important;
  }
  .gallery-item-wrapper {
    min-height: 200px; /* Angepasste Mindesthöhe */
  }
}

@media (max-width: 959px) and (min-width: 640px) {
  /* UKit 's' breakpoint (Tablet) */
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Explizit 2 Spalten */
    row-gap: 15px; /* Angepasster Abstand */
    column-gap: 15px; /* Angepasster Abstand */
  }
  .gallery-section .gallery-grid > div.uk-grid-margin,
  .gallery-section .gallery-grid > div.uk-grid-margin.uk-first-column {
    margin-top: 15px !important;
  }
  .gallery-item-wrapper {
    min-height: 180px; /* Angepasste Mindesthöhe */
  }
}

@media (max-width: 639px) {
  /* UKit 's' breakpoint (Mobile) */
  .gallery-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gallery-section .gallery-grid {
    grid-template-columns: 1fr; /* Explizit 1 Spalte */
    row-gap: 10px; /* Angepasster Abstand */
    column-gap: 0;
  }
  .gallery-section .gallery-grid > div.uk-grid-margin,
  .gallery-section .gallery-grid > div.uk-grid-margin.uk-first-column {
    margin-top: 10px !important;
  }
  .gallery-item-wrapper {
    min-height: 150px;
  }
}

#sidebar-module-detail {
  background-color: var(
    --color-info-bg
  ); /* Heller Blauton für den Hintergrund */
}

/* --- IT-Dienstleistungs Detail Sektion (z.B. Installation, Security) --- */
.it-details-section {
  background-color: var(--color-white); /* Hintergrundfarbe der Sektion */
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center; /* Zentriert den Sektionstitel */
  transition: background-color 0.5s ease; /* Für Dark Mode */
}

.it-details-section .uk-h2 {
  color: var(--color-black); /* Farbe des Sektionstitels */
  margin-bottom: 40px;
}

/* Die Hauptkarte, die die Details der Dienstleistung anzeigt */
.it-detail-card {
  background-color: var(--color-white); /* Hintergrund der Detailkarte */
  border-radius: 16px; /* Stärker abgerundete Ecken */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Prominenterer Schatten */
  padding: 50px; /* Grosszügiger Innenabstand */
  max-width: 900px; /* Maximale Breite der Karte */
  margin: 0 auto; /* Zentriert die Karte */

  display: flex;
  flex-direction: column; /* Icon und Text untereinander */
  justify-content: center;
  align-items: center;
  text-align: center;

  border: 1px solid var(--color-light-gray); /* Dezenter Rand */
  /* Übergänge für Hover-Effekte oder Dark Mode */
  transition: background-color 0.5s ease, box-shadow 0.5s ease,
    border-color 0.5s ease;
}

/* Wrapper für das Icon */
.it-detail-icon-wrapper {
  width: 120px; /* Grösse des Icon-Containers */
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px; /* Abstand zum Titel */
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%; /* Optional: Wenn der Wrapper selbst rund sein soll */
  background-color: var(
    --color-off-white
  ); /* Leichter Hintergrund für das Icon */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Dezenter Schatten für Icon-Wrapper */
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

/* Das UIkit Icon selbst (SVG) */
.it-detail-icon-wrapper .it-service-icon.uk-icon svg {
  fill: var(--color-red); /* Rote Farbe für das Icon */
  width: 100%; /* Icon füllt den Wrapper */
  height: 100%;
  transition: fill 0.3s ease;
}

/* Wrapper für Titel und Beschreibung */
.it-detail-content-wrapper {
  max-width: 700px; /* Begrenzt die Breite des Textes für bessere Lesbarkeit */
  margin: 0 auto;
}

/* Titel der Dienstleistung */
.it-detail-content-wrapper h3 {
  color: var(--color-black); /* Schwarzer Text */
  font-size: 2.5em; /* Prominenter Titel */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px; /* Abstand zur Beschreibung */
  line-height: 1.2;
  transition: color 0.5s ease;
}

/* Dezente Trennlinie unter dem Titel (wie bei Produkt-Intro-Card) */
.it-detail-content-wrapper h3::after {
  content: "";
  display: block;
  width: 80px; /* Breite der Linie */
  height: 4px; /* Dicke der Linie */
  background-color: var(--color-red); /* Rote Farbe */
  margin: 15px auto 25px; /* Abstand über und unter der Linie */
  border-radius: 2px;
}

/* Beschreibungstext */
.it-detail-content-wrapper p {
  font-size: 1.15em; /* Gute Lesbarkeit */
  line-height: 1.7;
  color: var(--color-dark-gray); /* Dunkelgrauer Text */
  margin-bottom: 0;
  transition: color 0.5s ease;
}

/* Media Queries für Responsivität */
@media (max-width: 960px) {
  .it-detail-card {
    padding: 40px;
    max-width: 700px;
  }
  .it-detail-icon-wrapper {
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
  }
  .it-detail-content-wrapper h3 {
    font-size: 2em;
    margin-bottom: 15px;
  }
  .it-detail-content-wrapper h3::after {
    margin: 10px auto 20px;
  }
  .it-detail-content-wrapper p {
    font-size: 1.05em;
  }
}

@media (max-width: 640px) {
  .it-details-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .it-detail-card {
    padding: 25px;
    border-radius: 10px;
  }
  .it-detail-icon-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  .it-detail-content-wrapper h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
  }
  .it-detail-content-wrapper h3::after {
    margin: 8px auto 15px;
  }
  .it-detail-content-wrapper p {
    font-size: 0.95em;
  }
}
/* --- Partner Logos Sektion --- */
.partner-logos-section {
  background-color: var(--color-white); /* Hintergrundfarbe der Sektion */
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  overflow: hidden; /* Wichtig, um den Slider-Inhalt nicht überlaufen zu lassen */
  position: relative;
}

.partner-logos-section .uk-h2 {
  color: var(--color-black);
  margin-bottom: 40px;
}

/* Container für alle Partner-Logos (der äussere Slider-Container) */
.all-partner-slide {
  display: flex; /* Macht die Tracks nebeneinander */
  width: 100%; /* Nimmt die volle Breite des Elterncontainers ein */
  box-sizing: border-box;

  /* Animation für den Endlos-Scroll */
  /* Die Dauer (z.B. 30s) muss an die Anzahl und Breite der Logos angepasst werden */
  animation: scroll-logos 30s linear infinite;
  animation-play-state: running; /* Standardmässig läuft die Animation */
}

.all-partner-slide:hover {
  animation-play-state: paused; /* Animation pausiert beim Hover */
}

/* Innerer Container für eine einzelne Gruppe von Partner-Logos */
.partner-slide-track {
  display: flex; /* Macht die einzelnen Logos nebeneinander */
  flex-shrink: 0; /* Verhindert, dass dieser Track schrumpft */
  white-space: nowrap; /* Hält alle Logos auf einer Linie */
  /* Dieser Track nimmt die natürliche Breite seiner Inhalte ein */
}

/* Einzelner Partner-Logo-Container */
.partner-display {
  flex-shrink: 0; /* Verhindert, dass die Logos schrumpfen */
  display: flex; /* Für Zentrierung des Bildes */
  justify-content: center;
  align-items: center;
  height: 100px; /* Feste Höhe für alle Logo-Container */
  padding: 0 30px; /* Horizontaler Abstand zwischen den Logos */
  box-sizing: border-box;
}

/* Das Partner-Logo Bild */
.partner-logo {
  max-height: 80%; /* Skaliert das Bild innerhalb des Containers */
  max-width: 100%; /* Skaliert das Bild innerhalb des Containers */
  object-fit: contain; /* Bild wird skaliert, ohne abgeschnitten zu werden */
  display: block;

  /* Moderner Effekt: Grayscale im Normalzustand, Farbe beim Hover */
  filter: grayscale(100%); /* Initial in Graustufen */
  transition: filter 0.3s ease, transform 0.3s ease; /* Sanfter Übergang */
}

.partner-display:hover .partner-logo {
  filter: grayscale(0%); /* Zeigt die Originalfarben beim Hover */
  transform: scale(1.05); /* Leichtes Zoomen beim Hover */
}

/* Keyframes für die kontinuierliche Scroll-Animation */
@keyframes scroll-logos {
  from {
    transform: translateX(0%); /* Startet ganz links */
  }
  to {
    transform: translateX(
      -100%
    ); /* Scrollt um die gesamte Breite EINES .partner-slide-track */
  }
}

/* Responsive Anpassungen */
@media (max-width: 960px) {
  .partner-display {
    padding: 0 20px; /* Weniger Abstand auf Tablets */
    height: 80px;
  }
  /* Animation auf Tablets anpassen (Dauer ggf. anpassen) */
  @keyframes scroll-logos {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
}

@media (max-width: 640px) {
  .partner-logos-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .partner-display {
    padding: 0 15px; /* Noch weniger Abstand auf Handys */
    height: 60px;
  }
  /* Animation auf Handys anpassen (Dauer ggf. schneller, da weniger Logos sichtbar) */
  @keyframes scroll-logos {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
}

.service-partner-container {
  overflow: hidden;
}

.important-features-sektion {
  max-width: 1225px;
  margin: auto;
}

.prozess-svg {
  display: none;
  transition: width 0.5s ease-out;
  width: 100%;
}

/* --- Release Notes Sektion --- */
.release-notes-section {
    background-color: var(--color-white);
    padding-top: 60px;
    padding-bottom: 60px;
}
.release-notes-section .uk-h2 {
    color: var(--color-black);
    margin-bottom: 40px;
}

/* Stil für einen einzelnen Release Note-Eintrag */
.release-note-item {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Icon-Stil */
.release-note-icon {
    margin-top: 5px; /* Icon leicht nach unten verschieben */
    fill: var(--color-red); /* Icon-Farbe */
    transition: fill 0.2s ease;
}

/* Titel des Eintrags */
.release-note-title {
    color: var(--color-black);
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 5px;
    transition: color 0.2s ease;
}

/* Beschreibungstext */
.release-note-text {
    color: var(--color-dark-gray);
    font-size: 1em;
    line-height: 1.6;
    margin-top: 0;
}

/* Media Queries */
@media (max-width: 640px) {
    .release-notes-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .release-note-icon {
        margin-top: 2px;
        font-size: 1.2em;
    }
    .release-note-title {
        font-size: 1.2em;
    }
    .release-note-text {
        font-size: 0.95em;
    }
}

.releasenotes-link {
	text-decoration: none;
	cursor: pointer;
}

.releasenotes-link:hover {
	text-decoration: none;
	cursor: pointer;
}

.portfolio-neuheit-card {
	height: 100%;

}