/* ==========================================================
   FARBEN – Spitex EasyCare Corporate Design
   Überschreibt den :root-Block der style.css (Zeile 73-88).
   Die style.css selbst bleibt unberührt.

   Rot:          #b32025
   Weiss Akzent: #f2f2f2
   Weiss:        #ffffff
   Dunkel:       #545454
   ========================================================== */
:root {
  /* Primärfarbe: das Spitex-Rot */
  --global--color-primary: #b32025;

  /* Dunklere Variante für Hover-Zustände */
  --global--color-primary-darken: #8c191d;

  /* Sehr helle Variante für Hintergrundflächen */
  --global--color-primary-light: #fbeced;

  /* Sekundärfarbe: Dunkelgrau */
  --global--color-secondary: #545454;

  /* Überschriften */
  --global--color-heading: #333333;
  --global--color-heading-darken: #1a1a1a;
  --global--color-heading-light: #545454;

  /* Fliesstext */
  --global--color-body: #6b6b6b;

  /* Weiss und Grautöne */
  --global--color-white: #ffffff;
  --global--color-gray: #f2f2f2;
  --global--color-gray-darken: #c9c9c9;
  --global--color-gray-light: #e6e6e6;
}
/* ----------------------------------------------------------
   Hart codierte Theme-Farben nachziehen
   (style.css Zeile 4702 und 7262 – dort steht #283b6a fest drin)
   ---------------------------------------------------------- */
.pricing .pricing-panel-featured,
.pricing-panel-featured .pricing-panel-heading {
  border-color: var(--global--color-secondary);
  background-color: var(--global--color-secondary);
}
/* ----------------------------------------------------------
   Cursor: runder Custom-Cursor aus, normaler Pfeil an
   ---------------------------------------------------------- */
.cursor {
  display: none !important;
}

body,
input,
textarea,
select {
  cursor: auto !important;
}

a,
button,
.btn,
[role="button"],
.navbar-toggler,
.backtop {
  cursor: pointer !important;
}


/* ----------------------------------------------------------
   Menü: Hover- und Aktiv-Zustand in Firmenfarbe
   Hinweis: Die Menüschrift ist im Theme bereits fett
   (font-weight 700), darum Farbwechsel statt "bolder".
   ---------------------------------------------------------- */
.header .navbar .navbar-nav > li > a:hover,
.header .navbar .navbar-nav > li > a:focus,
.header .navbar .navbar-nav > li.active > a,
.header.header-light .navbar .navbar-nav > li > a:hover,
.header.header-light .navbar .navbar-nav > li.active > a {
  color: var(--global--color-primary);
}

.header.header-light .navbar .navbar-nav > li > a:hover::before,
.header.header-light .navbar .navbar-nav > li.active > a::before {
  background-color: var(--global--color-primary);
}


/* ----------------------------------------------------------
   CTA-Button im Menü ("Kostenloses Erstgespräch vereinbaren")
   Das Theme setzt feste 140px Breite + overflow:hidden, dadurch
   wird langer Text abgeschnitten. Hier auf automatische Breite
   umgestellt und Innenabstand ergänzt.
   ---------------------------------------------------------- */
.module-contact.module-contact-3 .btn:first-child,
.header .module-contact .btn {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 40px;
  padding: 10px 22px;
  white-space: nowrap;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

/* Ab Tablet-Grösse abwärts nutzt das Theme volle Breite,
   das soll so bleiben */
@media screen and (max-width: 1199.98px) {
  .module-contact.module-contact-3 .btn:first-child,
  .header .module-contact .btn {
    width: 100%;
    white-space: normal;
  }
}
/* ----------------------------------------------------------
   Untermenü (Dropdown): Text beim Hovern fett
   Theme-Standard ist font-weight 400 (Desktop) bzw. 500 (mobil).
   Der Hover-Zustand färbt bereits rot, hier kommt fett dazu.
   ---------------------------------------------------------- */
.navbar-nav > li.has-dropdown > ul.dropdown-menu li a:hover,
.navbar-nav > li.has-dropdown > ul.dropdown-menu li a:focus,
.navbar-nav > li.has-dropdown > ul.dropdown-menu li a:active,
.navbar-nav > li.has-dropdown > ul.dropdown-menu li.current > a,
.header .navbar .dropdown-menu li a:hover,
.header .navbar .dropdown-menu li.current a {
  font-weight: 700;
}

/* ----------------------------------------------------------
   Automatische Grossschreibung abschalten
   Gezielt statt global, damit das Layout nicht leidet
   ---------------------------------------------------------- */
.top-bar,
.top-bar a,
.top-bar p,
.top-bar span,
.top-bar .top-contact,
.top-bar .contact-infos,
.top-bar .contact-body,
.top-bar .contact-body a,
.top-bar.top-bar-3 .container .block-right a,
.navbar-nav > li > a,
.navbar-nav > li > a span,
.dropdown-menu li a,
.dropdown-menu li a span,
.module-contact .btn,
.btn,
.btn span,
.footer a,
.footer li,
.footer p,
.footer h5,
.service-title h4,
.service-title h4 a,
.team-cat,
.team-cat span,
.heading-subtitle,
.hero-headline,
.hero-desc {
  text-transform: none !important;
}
/* ----------------------------------------------------------
   Logo: Seitenverhältnis erhalten
   Das Theme gibt feste Masse vor (für die Original-SVGs).
   Bei den PNG-Logos führt das zu Verzerrung.
   ---------------------------------------------------------- */
.navbar-brand .logo,
.navbar-brand .logo-dark,
.navbar-brand .logo-mobile {
  width: auto;
  height: auto;
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
}

/* ----------------------------------------------------------
   Abstand zwischen Header und Slider entfernen
   Das Theme fixiert den Header auf 155px Höhe, obwohl
   Top-Bar + Navbar mehr brauchen. Und der Slider bringt
   321px Innenabstand für einen überlagernden Header mit,
   den wir hier nicht verwenden.
   ---------------------------------------------------------- */
.header.header-topbar {
  height: auto;
}

/* ----------------------------------------------------------
   Footer: Unterpunkte in der Navigationsliste einrücken
   ---------------------------------------------------------- */
.footer .widget-links ul li.sub a {
  padding-left: 14px;
  opacity: 0.85;
  font-size: 14px;
}

/* ----------------------------------------------------------
   Footer: OPAN-Widget rechtsbündig ausrichten
   ---------------------------------------------------------- */
.footer .widget-opan .opan-button {
  margin-top: 15px;
}

@media screen and (min-width: 992px) {
  .footer .widget-opan {
    text-align: right;
  }
  .footer .widget-opan .opan-button {
    display: flex;
    justify-content: flex-end;
  }
}

/* ----------------------------------------------------------
   Footer: Kontaktzeilen mit Icon sauber ausrichten
   ---------------------------------------------------------- */
.footer .widget-contact ul li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer .widget-contact ul li a i {
  margin-top: 5px;
  flex-shrink: 0;
}
/* ----------------------------------------------------------
   Footer: dunkler Hintergrund für ausreichenden Kontrast
   Das Theme nutzt --global--color-heading-light als
   Footer-Hintergrund. Mit unserem Grau (#545454) sind
   Texte darauf nicht mehr lesbar.
   ---------------------------------------------------------- */
.footer {
  background-color: #2e2e2e;
}

/* Fliesstext und Adressen hell statt grau */
.footer .widget-contact .widget-content p,
.footer .widget-opan .widget-content p,
.footer .widget-content p {
  color: #e6e6e6;
}

.footer .widget-contact .widget-content .address a,
.footer .widget-links ul li a {
  color: #d4d4d4;
}

.footer .widget-contact .widget-content .address a:hover,
.footer .widget-links ul li a:hover {
  color: var(--global--color-white);
}

/* Telefonnummer und Route: Weiss statt Rot,
   auf dunklem Grund deutlich besser lesbar */
.footer .widget-contact .widget-content .phone a,
.footer .widget-contact .widget-content .phone a i,
.footer .widget-contact .widget-content .directions {
  color: var(--global--color-white);
}

.footer .widget-contact .widget-content .phone a:hover,
.footer .widget-contact .widget-content .directions:hover {
  color: var(--global--color-primary);
}

/* Widget-Überschriften */
.footer .footer-widget-title h5 {
  color: var(--global--color-white);
}

/* Untere Zeile */
.footer .footer-bottom,
.footer .footer-copyright .copyright span {
  color: #c9c9c9;
}

/* ----------------------------------------------------------
   Vertrauensleiste unter dem Hauptbild
   ---------------------------------------------------------- */
.trustbar {
  background-color: #f2f2f2;
  padding: 45px 0;
}

.trustbar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trustbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid #d9d9d9;
}

.trustbar-item:last-child {
  border-right: none;
}

.trustbar-item i {
  font-size: 24px;
  color: var(--global--color-primary);
  margin-bottom: 12px;
}

.trustbar-num {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--global--color-heading);
  margin-bottom: 6px;
}

.trustbar-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--global--color-body);
  max-width: 220px;
}

@media screen and (max-width: 991.98px) {
  .trustbar-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 34px;
  }
  .trustbar-item:nth-child(2n) {
    border-right: none;
  }
}

@media screen and (max-width: 575.98px) {
  .trustbar-list {
    grid-template-columns: 1fr;
  }
  .trustbar-item {
    border-right: none;
  }
}

/* ----------------------------------------------------------
   Leistungskarten: gleiche Höhe, letzte Reihe zentriert
   und ausreichend Abstand zwischen den Karten
   ---------------------------------------------------------- */
.services-2 .row {
  justify-content: center;
}

.services-2 .service-panel,
.services-2 .service-panel-holder {
  height: 100%;
  width: 100%;
}

/* Abstand zwischen den Karten */
.services-2 .service-panel.service-panel-2 {
  margin-bottom: 0;
}

.services-2 .row > [class*="col-"] {
  padding-left: 18px;
  padding-right: 18px;
  margin-bottom: 36px;
}

/* Innenabstand der Karten etwas reduzieren,
   damit sie nicht so wuchtig wirken */
.services-2 .service-panel.service-panel-2 .service-panel-holder {
  padding: 40px 30px;
}
/* Icon-Kreise der Leistungskarten in Firmenfarbe */
.services .service-panel.service-panel-2 .service-panel-holder .service-content .service-icon {
  border-color: #f7e4e5;
}

.services .service-panel.service-panel-2:hover .service-panel-holder .service-content .service-icon {
  background-color: #f7e4e5;
}

/* ----------------------------------------------------------
   Team-Karussell: alle Karten gleich hoch
   Owl Carousel gibt jedem Slide die Höhe seines Inhalts.
   Über Flexbox bekommen alle die Höhe der höchsten Karte.
   ---------------------------------------------------------- */
.team-carousel .owl-stage {
  display: flex;
}

.team-carousel .owl-item {
  display: flex;
  height: auto;
}

.team-carousel .owl-item > div,
.team-carousel .team-member,
.team-carousel .team-member-holder {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Der Textbereich füllt den Rest der Karte aus */
.team-carousel .team-content {
  flex-grow: 1;
}

/* Namen bekommen eine feste Mindesthöhe für zwei Zeilen,
   damit die Funktionsbezeichnung überall auf gleicher Höhe steht */
.team-carousel .team-title h4 {
  min-height: 2.6em;
  display: flex;
  align-items: center;
}

/* ----------------------------------------------------------
   Slider: Abstand zum Header entfernen
   Das Theme fixiert den Header auf 155px und der Slide-Inhalt
   hat 321px Innenabstand für einen überlagernden Header,
   den wir nicht verwenden.
   ---------------------------------------------------------- */
.header.header-topbar {
  height: auto;
}

/* ----------------------------------------------------------
   Abschluss-CTA vor dem Footer
   ---------------------------------------------------------- */
.closing-cta {
  padding: 80px 0;
  background-color: #f2f2f2;
}
.closing-cta-title {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 18px;
}
.closing-cta-desc {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 30px;
}
@media screen and (max-width: 767.98px) {
  .closing-cta { padding: 50px 0; }
  .closing-cta-title { font-size: 24px; }
}

/* ----------------------------------------------------------
   Abschluss-CTA: Button mittig setzen
   Die Regel für den Menü-Button macht alle .btn zu inline-flex,
   dadurch greift text--center hier nicht mehr.
   ---------------------------------------------------------- */
.closing-cta .btn {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

.closing-cta .col-12 {
  text-align: center;
}
/* ----------------------------------------------------------
   Leistungskarten: Icon-Kreis mittig
   ---------------------------------------------------------- */
.services-2 .service-panel-2 .service-panel-holder .service-content .service-icon {
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------
   Leistungskarten: Font-Awesome-Symbol im Kreis zentrieren
   Das Theme positioniert die alten Flaticon-Zeichen mit
   festen Werten, die für Font Awesome nicht passen.
   ---------------------------------------------------------- */
.services .service-panel.service-panel-2 .service-panel-holder .service-content .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.services .service-panel.service-panel-2 .service-panel-holder .service-content .service-icon i,
.services .service-panel.service-panel-2 .service-panel-holder .service-content .service-icon i::before {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  font-size: 46px;
}

/* ----------------------------------------------------------
   HERO – statisches Hauptbild statt Slider
   Ersetzt die frühere .slider-Sektion.
   ---------------------------------------------------------- */
.hero {
  position: relative;
  aspect-ratio: 1920 / 800;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero .bg-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero .bg-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-headline {
  color: #ffffff;
  font-size: 52px;
  line-height: 1.15;
  margin-bottom: 22px;
}

.hero-desc {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 640px;
}

.hero-action {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media screen and (max-width: 991.98px) {
  .hero-headline { font-size: 38px; }
}

@media screen and (max-width: 575.98px) {
  .hero-headline { font-size: 28px; }
  .hero-desc { font-size: 16px; }
}

/* ----------------------------------------------------------
   Leistungskarten: Buttons auf gleicher Höhe
   Titel und Beschreibung sind unterschiedlich lang, deshalb
   füllt der Textbereich den Platz und schiebt den Button
   in allen Karten nach ganz unten.
   ---------------------------------------------------------- */
.services-2 .service-panel-holder .service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Titel: Platz für zwei Zeilen reservieren */
.services-2 .service-content .service-title {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Beschreibung dehnt sich aus und schiebt den Button nach unten */
.services-2 .service-content .service-desc {
  flex-grow: 1;
}

/* Button unten, mittig */
.services-2 .service-content .service-more {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

/* ==========================================================
   BUTTONS – global
   Kein Strich, Text zentriert, kein Zeilenumbruch
   ========================================================== */
.btn .line {
  display: none !important;
}

.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 14px 34px;
  line-height: 1.3;
  overflow: visible;
}

/* Menüpunkte sind keine Buttons und dürfen nicht umbrechen */
.navbar-nav > li > a,
.navbar-nav > li > a span {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.navbar-nav > li {
  flex-shrink: 0;
}

.btn::before,
.btn::after {
  content: none !important;
}

/* Auf schmalen Bildschirmen darf umbrochen werden,
   sonst laufen lange Beschriftungen aus dem Bild */
@media screen and (max-width: 575.98px) {
  .btn {
    white-space: normal;
  }
}


/* ==========================================================
   BUTTON-HOVER – einheitlich für alle Varianten
   Beim Überfahren wird der Button nur leicht abgedunkelt.
   Farben und Ränder bleiben unverändert.
   ========================================================== */
.btn {
  transition: filter 0.25s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
  filter: brightness(0.88);
}

/* Farben und Ränder im Hover-Zustand festhalten,
   damit die Theme-Effekte nicht dazwischenfunken */
.btn.btn--primary,
.btn.btn--primary:hover,
.btn.btn--primary:focus,
.btn.btn--primary:active {
  background-color: var(--global--color-primary) !important;
  border: 2px solid var(--global--color-primary) !important;
  color: #ffffff !important;
}

.btn.btn--white,
.btn.btn--white:hover,
.btn.btn--white:focus,
.btn.btn--white:active {
  background-color: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: var(--global--color-heading) !important;
}

.btn.btn--transparent,
.btn.btn--transparent:hover,
.btn.btn--transparent:focus,
.btn.btn--transparent:active {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.btn.btn--secondary,
.btn.btn--secondary:hover,
.btn.btn--secondary:focus,
.btn.btn--secondary:active {
  background-color: var(--global--color-secondary) !important;
  border: 2px solid var(--global--color-secondary) !important;
  color: #ffffff !important;
}

.btn.btn--white:hover {
  filter: brightness(0.93);
  background-color: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
}

/* ----------------------------------------------------------
   Footer: Links beim Hovern fett
   ---------------------------------------------------------- */
.footer .widget-links ul li a,
.footer .widget-contact ul li a,
.footer .widget-contact .directions,
.footer .footer-copyright a {
  transition: font-weight 0.15s ease, color 0.25s ease;
}

.footer .widget-links ul li a:hover,
.footer .widget-contact ul li a:hover,
.footer .widget-contact .directions:hover,
.footer .footer-copyright a:hover {
  font-weight: 700;
}

/* ----------------------------------------------------------
   Hero: ganzes Bild zeigen statt zuschneiden
   functions.js wandelt das <img> in ein Hintergrundbild um,
   deshalb greift object-fit nicht. Gesteuert wird es über
   background-size.
   ---------------------------------------------------------- */
.hero .bg-section,
.hero.bg-section {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #f2f2f2;
}
/* Hintergrundbilder in Sektionen füllen den Bereich */
.bg-section {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ----------------------------------------------------------
   Features: Farbverlauf der Überlagerung auf Firmenfarbe
   Das Theme nutzt hier einen fest codierten Türkis-Verlauf.
   ---------------------------------------------------------- */
.features.bg-overlay-theme::before,
.bg-overlay.bg-overlay-theme::before {
  background: linear-gradient(
    to right,
    rgba(179, 32, 37, 0.92) 0%,
    rgba(179, 32, 37, 0.75) 60%,
    rgba(84, 84, 84, 0.75) 100%
  ) !important;
}

/* ----------------------------------------------------------
   Features: Link im Abschlusssatz lesbar machen
   Das Theme setzt dort eine dunkle Farbe, die auf dem roten
   Hintergrund nicht funktioniert.
   ---------------------------------------------------------- */
.features .more-features p a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.features .more-features p a:hover {
  color: #ffffff !important;
  opacity: 0.8;
}

/* ----------------------------------------------------------
   About-Sektion: Button mit ausreichend Innenabstand
   Das Theme setzt dort feste Masse, deshalb greift
   die globale Button-Regel nicht.
   ---------------------------------------------------------- */
.about .signature-block .btn,
.signature-block .btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 14px 34px !important;
}
/* Bürozeiten im Footer wie die anderen Kontaktzeilen ausrichten */
.footer .widget-contact ul li .office-hours {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #d4d4d4;
  font-size: 14px;
  line-height: 1.6;
}

.footer .widget-contact ul li .office-hours i {
  margin-top: 5px;
  flex-shrink: 0;
}
/* ----------------------------------------------------------
   Footer: Abstand zwischen den Kontaktzeilen
   ---------------------------------------------------------- */
.footer .widget-contact ul li {
  margin-bottom: 16px;
}

.footer .widget-contact ul li:last-child {
  margin-bottom: 0;
}
/* ----------------------------------------------------------
   Sticky-Header: Sprung beim Scrollen verhindern
   Beim Scrollen wird die Navbar fixiert und aus dem Fluss
   genommen. Ohne reservierten Platz springt der Inhalt.
   ---------------------------------------------------------- */
.header.header-topbar {
  min-height: 155px;
}

@media screen and (max-width: 991.98px) {
  .header.header-topbar {
    min-height: 100px;
  }
}
/* ==========================================================
   ERSTGESPRÄCH / ANMELDUNG
   ========================================================== */
.intro-erstgespraech {
  padding: 90px 0 60px;
}

.intro-title {
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 22px;
}

.intro-desc {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.intro-claim {
  font-size: 18px;
  color: var(--global--color-primary);
  margin-bottom: 30px;
}

.intro-action {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ablauf in drei Schritten */
.ablauf {
  padding: 60px 0;
  background-color: #f2f2f2;
}

.ablauf-step {
  background-color: #ffffff;
  padding: 34px 28px;
  height: 100%;
  border-radius: 8px 8px 0 8px;
}

.ablauf-num {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: var(--global--color-primary);
  margin-bottom: 10px;
}

.ablauf-title {
  font-size: 21px;
  margin-bottom: 12px;
}

.ablauf .row > [class*="col-"] {
  margin-bottom: 24px;
  display: flex;
}

/* Anmeldeformular */
.anmeldung {
  padding: 80px 0;
}

.anmeldung-title {
  font-size: 32px;
  margin-bottom: 18px;
}

.anmeldung-intro {
  margin-bottom: 40px;
}

.pflichtfeld-hinweis {
  font-size: 14px;
  color: var(--global--color-body);
}

.anmeldeformular fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 40px 0;
}

.anmeldeformular legend {
  font-size: 20px;
  font-weight: 700;
  color: var(--global--color-heading);
  padding-bottom: 10px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--global--color-primary);
  width: 100%;
}

.anmeldeformular label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--global--color-heading);
}

.anmeldeformular .form-control {
  margin-bottom: 20px;
  width: 100%;
}

.anmeldeformular .radio-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--global--color-heading);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 0;
}

.checkbox-option {
  align-items: flex-start;
  margin-bottom: 26px;
}

.radio-option input,
.checkbox-option input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--global--color-primary);
  cursor: pointer;
}

.checkbox-option input {
  margin-top: 3px;
}

.checkbox-option a {
  color: var(--global--color-primary);
  text-decoration: underline;
}

/* Spam-Schutz: für Menschen unsichtbar */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media screen and (max-width: 767.98px) {
  .intro-title { font-size: 28px; }
  .anmeldung { padding: 50px 0; }
}
/* ----------------------------------------------------------
   Anmeldeformular: gesperrter Absenden-Button
   ---------------------------------------------------------- */
.anmeldeformular .btn:disabled,
.anmeldeformular .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: none !important;
}

.anmeldeformular .btn:disabled:hover {
  filter: none !important;
}

.absenden-hinweis {
  font-size: 14px;
  color: var(--global--color-body);
  margin-top: 12px;
}
/* ----------------------------------------------------------
   Anmeldeformular: Krankenkassenfeld mit Vorschlagsliste
   Beim Tippen filtert der Browser die Liste automatisch.
   ---------------------------------------------------------- */
.anmeldeformular input[list] {
  margin-bottom: 20px;
  width: 100%;
}

.anmeldeformular input[list]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}
/* ----------------------------------------------------------
   Krankenkassenfeld: Vorschlagsliste lesbar machen
   ---------------------------------------------------------- */
.anmeldeformular input[list] {
  background-color: #ffffff !important;
  color: var(--global--color-heading) !important;
  border: 1px solid var(--global--color-gray-light);
  padding: 12px 16px;
  margin-bottom: 20px;
  width: 100%;
}
/* ----------------------------------------------------------
   Krankenkassen-Auswahl mit eigener Vorschlagsliste
   ---------------------------------------------------------- */
.kk-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.kk-wrapper .form-control,
.kk-wrapper input#krankenkasse {
  margin-bottom: 0;
  color: var(--global--color-heading) !important;
  -webkit-text-fill-color: var(--global--color-heading);
}

.kk-wrapper input#krankenkasse::placeholder {
  color: var(--global--color-body);
  opacity: 1;
}

.kk-liste {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid var(--global--color-gray-light);
  border-radius: 8px 8px 0 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.kk-liste.offen {
  display: block;
}

.kk-kopf {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--global--color-body);
}

.kk-eintrag {
  padding: 10px 16px;
  font-size: 15px;
  color: var(--global--color-heading);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.kk-eintrag:hover {
  background-color: var(--global--color-primary-light);
  color: var(--global--color-primary);
  font-weight: 700;
}

.kk-leer {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--global--color-body);
}

/* ----------------------------------------------------------
   Turnstile: Abstand zum Absenden-Button
   ---------------------------------------------------------- */
.cf-turnstile {
  margin-bottom: 24px;
}

/* ==========================================================
   SEITENÜBERGÄNGE
   Beim Klick blendet die Seite aus, beim Laden wieder ein.
   Der Ausgangszustand gilt nur, wenn das Skript im head
   die Klasse "uebergang" gesetzt hat. Ohne JavaScript
   bleibt die Seite sichtbar.
   ========================================================== */
html.uebergang body {
  opacity: 0;
  transform: translateY(12px);
}

html.uebergang.seite-bereit body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.uebergang.seite-geht body {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  html.uebergang body,
  html.uebergang.seite-bereit body,
  html.uebergang.seite-geht body {
    transform: none;
    transition-duration: 0.15s;
  }
}


/* ----------------------------------------------------------
   Preloader ausblenden
   ---------------------------------------------------------- */
.preloader {
  display: none !important;
}


/* ----------------------------------------------------------
   Breadcrumb-Navigation grundsätzlich ausblenden
   ---------------------------------------------------------- */
.breadcrumb {
  display: none !important;
}


/* ==========================================================
   TEAM-SEITE
   Karten mit rotem Balken oben. Beim Hovern wächst der
   Balken von oben zum vollen Rahmen. Die Rahmen-Ebene liegt
   darüber, damit sich beim Hovern nichts verschiebt.
   ========================================================== */
.team-grid .row > [class*="col-"] {
  margin-bottom: 30px;
  display: flex;
}

.team-grid .team-member {
  width: 100%;
  display: flex;
}

.team-grid .team-member-holder {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Der Rahmen liegt komplett in dieser Ebene.
   Im Ruhezustand ist nur der obere Streifen sichtbar,
   beim Hovern wird nach unten aufgedeckt. */
.team-grid .team-member-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid var(--global--color-primary);
  border-radius: 12px;
  pointer-events: none;
  clip-path: inset(0 0 calc(100% - 5px) 0);
  transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-grid .team-member:hover .team-member-holder {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(179, 32, 37, 0.16);
}

.team-grid .team-member:hover .team-member-holder::after {
  clip-path: inset(0 0 0 0);
}

/* Fotos immer quadratisch */
.team-grid .team-img {
  width: 100%;
}

.team-grid .team-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Textbereich füllt den Rest, damit alle Karten gleich hoch sind */
.team-grid .team-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 22px 20px;
}

.team-grid .team-title h4 {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.team-grid .team-cat {
  color: var(--global--color-primary);
  font-weight: 500;
}

.team-grid .team-content {
  padding: 18px 12px;
}

.error-404 {
  padding: 140px 0;
}
.error-404-code {
  display: block;
  font-size: 110px;
  font-weight: 700;
  line-height: 1;
  color: #b32025;
  margin-bottom: 10px;
}
.error-404-title {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 18px;
}
.error-404-desc {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 30px;
}
.error-404-action {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 767.98px) {
  .error-404 { padding: 80px 0; }
  .error-404-code { font-size: 70px; }
  .error-404-title { font-size: 24px; }
}

/* ==========================================================
   LEISTUNGSSEITEN
   Gilt für alle fünf Unterseiten der Leistungen.
   ========================================================== */
.leistung-content {
  padding: 90px 0 70px;
}

.leistung-head {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 26px;
}

.leistung-subhead {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 18px;
}

.leistung-text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.leistung-liste {
  margin-top: 40px;
}

.leistung-schluss {
  margin-top: 40px;
  padding: 22px 26px;
  background-color: var(--global--color-primary-light);
  border-left: 4px solid var(--global--color-primary);
  border-radius: 0 8px 8px 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--global--color-heading);
}

/* Häkchenliste */
.leistung-content .advantages-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leistung-content .advantages-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--global--color-body);
  margin-bottom: 12px;
}

.leistung-content .advantages-list li i {
  flex-shrink: 0;
  margin-top: 6px;
  font-size: 11px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--global--color-primary);
  color: #ffffff;
}


/* ----------------------------------------------------------
   Seitenspalte
   ---------------------------------------------------------- */
.leistung-sidebar {
  position: sticky;
  top: 30px;
}

.sidebar-box {
  background-color: #f2f2f2;
  border-radius: 12px;
  padding: 30px 28px;
  margin-bottom: 24px;
}

.sidebar-box h4 {
  font-size: 20px;
  margin-bottom: 14px;
}

.sidebar-box p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.sidebar-box p:last-child {
  margin-bottom: 0;
}

.sidebar-link {
  font-weight: 700;
  color: var(--global--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Roter Kasten mit Telefonnummer */
.sidebar-box-primary {
  background-color: var(--global--color-primary);
}

.sidebar-box-primary i {
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 16px;
  display: block;
}

.sidebar-box-primary h4,
.sidebar-box-primary p {
  color: #ffffff;
}

.sidebar-phone {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.sidebar-phone:hover {
  color: #ffffff;
  opacity: 0.85;
}


/* ----------------------------------------------------------
   Weitere Leistungen am Seitenende
   ---------------------------------------------------------- */
.weitere-leistungen {
  padding: 70px 0 50px;
  background-color: #f8f8f8;
}

.weitere-leistungen .service-desc {
  display: none;
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */
@media screen and (max-width: 991.98px) {
  .leistung-content {
    padding: 60px 0 40px;
  }
  .leistung-sidebar {
    position: static;
    margin-top: 50px;
  }
}

@media screen and (max-width: 767.98px) {
  .leistung-head {
    font-size: 26px;
  }
  .leistung-subhead {
    font-size: 20px;
  }
}

/* ==========================================================
   ÜBER UNS und KOSTEN & TARIFE
   Ergänzung zum Block "LEISTUNGSSEITEN"
   ========================================================== */

/* ----------------------------------------------------------
   Faktenliste in der Seitenspalte (Über uns)
   ---------------------------------------------------------- */
.fakten-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fakten-liste li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--global--color-heading);
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.fakten-liste li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fakten-liste li span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--global--color-body);
  margin-bottom: 3px;
}


/* ----------------------------------------------------------
   Tarif-Tabellen
   ---------------------------------------------------------- */
.tarif-block {
  margin-top: 45px;
}

.tarif-hinweis {
  font-size: 15px;
  line-height: 1.6;
  color: var(--global--color-body);
  margin-bottom: 18px;
}

.tarif-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.tarif-tabelle td {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--global--color-heading);
  vertical-align: top;
}

.tarif-tabelle tr:last-child td {
  border-bottom: none;
}

.tarif-preis {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--global--color-primary);
  padding-left: 20px !important;
}

.tarif-grundlage {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--global--color-body);
  margin-top: 4px;
}


/* ----------------------------------------------------------
   Adressblock (SVA Zürich)
   ---------------------------------------------------------- */
.tarif-adresse {
  background-color: #f2f2f2;
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 20px;
}

.tarif-adresse p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.tarif-adresse p:last-child {
  margin-bottom: 0;
}

.tarif-adresse a {
  color: var(--global--color-primary);
  font-weight: 700;
}


/* ----------------------------------------------------------
   Stand-Hinweis am Seitenende
   ---------------------------------------------------------- */
.tarif-stand {
  margin-top: 45px;
  padding-top: 20px;
  border-top: 2px solid var(--global--color-primary);
  font-size: 14px;
  line-height: 1.6;
  color: var(--global--color-body);
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */
@media screen and (max-width: 575.98px) {
  .tarif-tabelle td {
    display: block;
    border-bottom: none;
    padding: 6px 0;
  }
  .tarif-tabelle tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .tarif-preis {
    text-align: left;
    padding-left: 0 !important;
  }
}

/* ==========================================================
   ABLAUFLISTE (Erstgespräch)
   Nummerierte Schritte mit rotem Kreis
   ========================================================== */
.ablauf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}

.ablauf-liste li {
  display: flex;
  gap: 22px;
  position: relative;
  padding-bottom: 34px;
}

.ablauf-liste li:last-child {
  padding-bottom: 0;
}

/* Verbindungslinie zwischen den Schritten */
.ablauf-liste li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 10px;
  width: 2px;
  background-color: #e0e0e0;
}

.ablauf-nummer {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--global--color-primary);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ablauf-text h4 {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 8px;
  margin-top: 8px;
}

.ablauf-text p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0;
}

@media screen and (max-width: 575.98px) {
  .ablauf-liste li {
    gap: 16px;
  }
  .ablauf-nummer {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .ablauf-liste li:not(:last-child)::before {
    left: 17px;
    top: 44px;
  }
  .ablauf-text h4 {
    font-size: 18px;
    margin-top: 4px;
  }
}
/* ==========================================================
   OFFENE STELLEN (jobs.html)
   Ergänzung zum Block "LEISTUNGSSEITEN".
   Ganz unten in die custom.css einfügen.
   ========================================================== */

/* ----------------------------------------------------------
   Stellenblock – ein Kasten pro Inserat
   ---------------------------------------------------------- */
.stellen-block {
  border: 1px solid #e0e0e0;
  border-top: 4px solid var(--global--color-primary); /* roter Balken oben */
  border-radius: 12px;
  padding: 34px 32px;
  margin-bottom: 34px;
}

.stellen-block:last-of-type {
  margin-bottom: 0;
}

.stellen-titel {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.stellen-pensum {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--global--color-primary);
  margin-bottom: 22px;
}


/* ----------------------------------------------------------
   Kurzangaben (Pensum, Arbeitsort, Eintritt, Anstellung)
   ---------------------------------------------------------- */
.stellen-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid #e0e0e0;
}

.stellen-meta > div {
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
  padding-right: 20px;
}

.stellen-meta dt {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--global--color-body);
  margin-bottom: 3px;
}

.stellen-meta dd {
  font-size: 15px;
  line-height: 1.5;
  color: var(--global--color-heading);
  margin: 0;
}


/* ----------------------------------------------------------
   Abschnitte innerhalb eines Stellenblocks
   ---------------------------------------------------------- */
.stellen-abschnitt {
  margin-bottom: 28px;
}

.stellen-abschnitt:last-child {
  margin-bottom: 0;
}

.stellen-abschnitt h4 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.stellen-abschnitt .leistung-text:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   Fussnote zur Leitung Pflege
   ---------------------------------------------------------- */
.stellen-fussnote {
  background-color: #f2f2f2;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 20px;
}

.stellen-fussnote p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--global--color-body);
  margin-bottom: 10px;
}

.stellen-fussnote p:last-child {
  margin-bottom: 0;
}

.stellen-fussnote strong {
  color: var(--global--color-heading);
}


/* ----------------------------------------------------------
   Bewerbungsblock am Seitenende
   ---------------------------------------------------------- */
.bewerbung-block {
  margin-top: 45px;
  padding-top: 30px;
  border-top: 2px solid var(--global--color-primary);
}

.bewerbung-mail {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--global--color-primary);
  text-decoration: underline;
  text-underline-offset: 5px;
  margin-bottom: 22px;
}

.bewerbung-mail:hover {
  color: var(--global--color-primary);
  opacity: 0.8;
}


/* ----------------------------------------------------------
   E-Mail-Adresse in der roten Seitenspalte
   ---------------------------------------------------------- */
.sidebar-mail {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  word-break: break-word;
  margin-bottom: 20px;
}

.sidebar-mail:hover {
  color: #ffffff;
  opacity: 0.85;
}


/* ----------------------------------------------------------
   Telefonnummer im hellen Kasten
   (.sidebar-phone ist weiss, das braucht hier Rot)
   ---------------------------------------------------------- */
.sidebar-box .sidebar-phone-dark {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--global--color-primary);
  margin-bottom: 16px;
}

.sidebar-box .sidebar-phone-dark:hover {
  color: var(--global--color-primary);
  opacity: 0.8;
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */
@media screen and (max-width: 575.98px) {
  .stellen-block {
    padding: 26px 22px;
  }
  .stellen-titel {
    font-size: 21px;
  }
  .stellen-meta {
    grid-template-columns: 1fr;
  }
  .bewerbung-mail {
    font-size: 17px;
  }
  .sidebar-mail {
    font-size: 17px;
  }
  .sidebar-box .sidebar-phone-dark {
    font-size: 21px;
  }
}
/* ==========================================================
   DROPDOWN auch per Tastatur oeffnen
   Ergaenzt den :hover des Themes um :focus-within
   ========================================================== */
@media only screen and (min-width: 1200px) {
  .navbar-nav > li.has-dropdown:focus-within > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
/* ==========================================================
   LEISTUNGSÜBERSICHT (leistungen.html)
   Ergänzung zum Block "LEISTUNGSSEITEN".
   Ganz unten in die custom.css einfügen.
   ========================================================== */

.uebersicht-block {
  display: flex;
  gap: 24px;
  padding-bottom: 38px;
  margin-bottom: 38px;
  border-bottom: 1px solid #e0e0e0;
}

.uebersicht-block:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}


/* ----------------------------------------------------------
   Icon im roten Kreis
   ---------------------------------------------------------- */
.uebersicht-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--global--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Die Theme-Styles positionieren Icons mit festen Werten.
   Das hier setzt sie zurueck, damit das Glyph mittig sitzt. */
.uebersicht-icon i,
.uebersicht-icon i::before {
  position: static;
  transform: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 26px;
  color: #ffffff;
}


/* ----------------------------------------------------------
   Textteil
   ---------------------------------------------------------- */
.uebersicht-text {
  flex: 1 1 auto;
  min-width: 0;
}

.uebersicht-text h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-top: 12px;
  margin-bottom: 12px;
}

.uebersicht-text > p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

/* Kompaktere Häkchenliste als auf den Unterseiten */
.uebersicht-text .advantages-list li {
  margin-bottom: 8px;
  font-size: 15px;
}


/* ----------------------------------------------------------
   "Mehr erfahren"
   ---------------------------------------------------------- */
.uebersicht-mehr {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  color: var(--global--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.uebersicht-mehr:hover {
  color: var(--global--color-primary);
  opacity: 0.8;
}

/* Gleicher Reset wie oben: das Theme positioniert manche
   Icon-Glyphen absolut, der Pfeil wuerde sonst verrutschen. */
.uebersicht-mehr i,
.uebersicht-mehr i::before {
  position: static;
  transform: none;
  line-height: 1;
  font-size: 12px;
  margin: 0 0 0 6px;
  padding: 0;
  color: inherit;
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */
@media screen and (max-width: 575.98px) {
  .uebersicht-block {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  .uebersicht-icon {
    width: 50px;
    height: 50px;
  }
  .uebersicht-icon i,
  .uebersicht-icon i::before {
    font-size: 22px;
  }
  .uebersicht-text h3 {
    margin-top: 0;
    font-size: 20px;
  }
}

/* ==========================================================
   RÜCKMELDUNG NACH DEM ABSENDEN
   Wird von assets/js/anmeldung-status.js gefüllt.
   Ganz unten in die custom.css einfügen.
   ========================================================== */

/* Solange der Kasten leer ist, nimmt er keinen Platz weg */
.contact-result:empty {
  display: none;
}

.contact-result {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.7;
}

.contact-result strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}


/* ----------------------------------------------------------
   Erfolg
   ---------------------------------------------------------- */
.contact-result.ergebnis-ok {
  background-color: #eef7ee;
  border-left: 4px solid #2e7d32;
  color: #1b5e20;
}


/* ----------------------------------------------------------
   Fehler und unvollständige Angaben
   ---------------------------------------------------------- */
.contact-result.ergebnis-fehler {
  background-color: var(--global--color-primary-light);
  border-left: 4px solid var(--global--color-primary);
  color: var(--global--color-heading);
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */
@media screen and (max-width: 575.98px) {
  .contact-result {
    padding: 16px 18px;
    font-size: 15px;
  }
  .contact-result strong {
    font-size: 16px;
  }
}