/* ============================================================
   PRO-Sulting - Website-Stile
   Uebernommen aus den WPCode-Snippets 534 (Global) und 821 (AGB)
   ============================================================ */

/* ---------- Farbpalette ---------- */
/* Alle Farbwerte dieser Datei stehen hier und nur hier. Wer die Anmutung
   der Seite umstellen will, aendert diesen Block - nicht die 1400 Zeilen
   darunter. Die gleichen Werte liegen zusaetzlich als globale Farben im
   Elementor-Kit, damit sie auch im Baukasten auswaehlbar sind. */
:root {
  --ps-grund:        #14161A;  /* Tiefschwarz, Grundflaeche */
  --ps-grund-kopf:   #1B1E23;  /* aufgehellter Grund im Kopfbereich */
  --ps-signal:       #F4B400;  /* Signalgelb, Akzent */
  --ps-signal-hell:  #FFD028;  /* Signalgelb beim Zeigen */
  --ps-signal-tief:  #8A6200;  /* Ocker, seit 08.10.2026 nicht mehr im Einsatz (auf hellem Grund jetzt Gelb plus Tinte) */
  --ps-auf-signal:   #14161A;  /* Schrift auf Signalgelb */
  --ps-papier:       #EDEBE4;  /* Schrift auf dunklem Grund */
  --ps-fliess:       #B9BCB7;  /* Fliesstext */
  --ps-gedaempft:    #9A9E9B;  /* Nebentext */
  --ps-dim:          #8E938F;  /* noch weiter zurueckgenommen */
  --ps-rahmen:       #2A2D31;  /* Trennlinien */
  --ps-feldrand:     #666B6E;  /* Rahmen von Eingabefeldern, 3.36:1 - WCAG 1.4.11 verlangt 3:1 */
  --ps-signal-a08:   rgba(244,180,0,0.08);
  --ps-signal-a12:   rgba(244,180,0,0.12);
  --ps-signal-a15:   rgba(244,180,0,0.15);
  --ps-signal-a30:   rgba(244,180,0,0.30);
  --ps-fehler:       #F87171;  /* Rot fuer das Gegenteil, z. B. "Con"sulting */
  --ps-warnung:      #FBBF24;  /* Ampel gelb */
  --ps-erfolg:       #4ADE80;  /* Ampel gruen */
  /* Ueberschriften: Grotesk fett und eng. Die Serife bleibt fuer
     Akzentwoerter, Zitate und Kennzahlen reserviert. */
  --ps-titelschrift: "Manrope", system-ui, sans-serif;
  --ps-titelschnitt: 800;
  --ps-titellauf:    -0.02em;
}

/* ---------- Global ---------- */
/* === HINTERGRUNDVERLAUF ===
   Wichtig ist die Unterscheidung: background-attachment:fixed unterstuetzt
   iOS Safari nicht, position:fixed am Element dagegen schon.
   Der Verlauf liegt deshalb auf einem fixierten Pseudo-Element.
   Damit er dort nicht verschwindet, darf der Body keinen eigenen
   Hintergrund haben: Ein Kind mit z-index:-1 liegt hinter dem Hintergrund
   seines Elternelements. Die Grundfarbe traegt deshalb das Wurzelelement. */
html {
  background-color: var(--ps-grund);
}
body {
  background: none transparent;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(ellipse 58% 34% at 50% 0%, rgba(244,180,0,0.10) 0%, transparent 62%),
    linear-gradient(180deg,
      var(--ps-grund-kopf) 0%, #181B20 26%, var(--ps-grund) 62%,
      var(--ps-grund) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Der schraege Lichtstrahl gehoert zum Kopfbereich und soll mitscrollen,
   deshalb absolut zum Body statt fixiert. z-index:-1 haelt ihn hinter dem
   Inhalt, sichtbar bleibt er trotzdem, weil der Body selbst keinen eigenen
   Hintergrund traegt. Auf schmalen Bildschirmen wuerde er die Ueberschrift
   kreuzen und entfaellt dort. */
@media (min-width: 1025px) {
  body::after {
    content: "";
    position: absolute;
    top: 0;
    right: 9vw;
    width: 1px;
    height: 760px;
    background: linear-gradient(180deg, transparent, rgba(244,180,0,0.30), transparent);
    transform: rotate(14deg);
    transform-origin: top center;
    z-index: -1;
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  body,
  .elementor-section,
  .e-container,
  .elementor-container {
    background-attachment: scroll !important;
  }
}
html { scroll-behavior: smooth; }
::selection { background: var(--ps-signal-a30); color: var(--ps-papier); }

/* ============================================================
   Erscheinungsbild "Signal" (Vorschlag C, September 2026)
   ============================================================ */

/* ---------- Ueberschriften ---------- */
/* H1 und H2 stehen in Manrope 800 mit engem Satz (Groesse, Schnitt und
   Laufweite kommen aus den globalen Schriften im Kit). Hier nur, was das
   Kit nicht kann: ausgewogene Zeilenumbrueche statt eines einzelnen Worts
   in der letzten Zeile. */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
  text-wrap: balance;
}

/* ---------- Akzentwoerter ---------- */
/* Das eine hervorgehobene Wort einer Ueberschrift wechselt bewusst in die
   kursive Serifenschrift. Der Bruch zwischen harter Grotesk und weicher
   Serife ist das Erkennungszeichen der Seite. Die Farbe kommt von hier,
   nicht mehr als Inline-Stil aus dem Baukasten: im Editor genuegt es,
   das Wort kursiv zu setzen. Die echte Kursive von DM Serif Display liegt
   lokal vor (OMGF), der Browser muss also nichts schraeg rechnen. */
.elementor-heading-title em,
.agb-title em,
.ps-cta .ps-cta-titel em,
.ps-schalter-text h3 em,
.ps-buchung-titel em,
.ps-inhalt .elementor-widget-theme-post-content h2 em,
.ps-akzent {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ps-signal);
}
/* Auf hellem Grund bleibt das Akzentwort seit 08.10.2026 ebenfalls Signalgelb
   (Wunsch: kein Ocker mehr). Es steht nur in grossen Ueberschriften. */

/* ---------- Marke im Kopfbereich ---------- */
/* Die kleine Zeile ueber der H1 wird zur Pille mit Signalpunkt. Die Klasse
   ps-marke sitzt am jeweiligen Textbaustein im Kopfbereich jeder Seite.
   Elementor 4 laesst mit optimiertem Markup die innere Huelle
   .elementor-widget-container weg - die Pille ist deshalb das Widget
   selbst. width:fit-content statt 100 %, dann folgt sie der Ausrichtung
   ihres Containers (links auf den Seiten, mittig im Blog). */
.elementor-widget-text-editor.ps-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content !important;
  max-width: 100%;
  /* !important: Elementor setzt Innen- und Aussenabstand je Widget mit
     hoeherer Spezifitaet und wuerde die Pille sonst auf 0 px druecken. */
  padding: 7px 15px 7px 12px !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}
.elementor-widget-text-editor.ps-marke::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-signal);
  box-shadow: 0 0 0 4px var(--ps-signal-a15);
}
.elementor-widget-text-editor.ps-marke p {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #C8CBC6 !important;
  line-height: 1.3 !important;
}

/* ---------- Knoepfe ---------- */
/* Pillenform und Grundfarbe kommen aus dem Kit. Hier die Bewegung: der
   Knopf hebt sich beim Zeigen leicht an und bekommt einen warmen Schein. */
.elementor-button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.elementor-widget-button:not(.btn-outline):not(.btn-ghost) .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(244,180,0,0.55);
}
/* Schrift bleibt beim Zeigen dunkel. Sonst greift die Link-Farbe des Kits
   (.elementor-kit-93 a:hover, Signalgelb hell) und die Beschriftung
   verschwindet auf dem gelben Grund. Tiefschwarz auf Signalgelb: 9,8:1. */
.elementor-widget-button:not(.btn-outline):not(.btn-ghost) .elementor-button:hover,
.elementor-widget-button:not(.btn-outline):not(.btn-ghost) .elementor-button:focus-visible {
  color: #14161A;
}
.btn-outline .elementor-button,
.btn-ghost .elementor-button {
  border-radius: 999px !important;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-button { transition: none; }
  .elementor-widget-button .elementor-button:hover { transform: none; }
}

/* ---------- Helle Baender ---------- */
/* Die zweite Ebene aus Vorschlag C: ein Band auf Papier mit weissen Karten.
   Im Baukasten genuegt die Klasse ps-hell am Abschnitt. Sie definiert die
   globalen Elementor-Farben und die Seitenvariablen innerhalb des Abschnitts
   um - alles, was an einer globalen Farbe haengt, schaltet dadurch von selbst
   auf hell, ohne dass ein einzelnes Widget angefasst wird.
   Kontraste (WCAG): Tinte 15.9:1, Fliesstext 8.7:1, Nebentext 6.1:1,
   Dim 4.95:1 - jeweils auf Papier, auf Weiss hoeher. Gelb nur als Schmuck, siehe unten. */
.e-con.ps-hell {
  --ps-papier:       #14161A;
  --ps-fliess:       #3E4441;
  --ps-gedaempft:    #565B57;
  --ps-dim:          #63686B;
  --ps-signal:       #F4B400;
  --ps-signal-hell:  #FFD028;
  --ps-auf-signal:   #14161A;
  --ps-rahmen:       #E2DDD3;
  --ps-fokusfarbe:   #14161A;
  --ps-fehler:       #B91C1C;  /* 5.7:1 auf Papier */
  --ps-warnung:      #854D0E;  /* 6.6:1 auf Papier */
  --ps-erfolg:       #166534;  /* 6.5:1 auf Papier */
  --ps-signal-a08:   rgba(244,180,0,0.10);
  --ps-signal-a12:   rgba(244,180,0,0.16);
  --ps-signal-a15:   rgba(244,180,0,0.22);
  --e-global-color-primary:   #14161A;
  --e-global-color-text:      #14161A;
  --e-global-color-secondary: #14161A;
  --e-global-color-accent:    #14161A;
  --e-global-color-be66433:   #3E4441;
  --e-global-color-3ffef50:   #565B57;
  --e-global-color-1035ea6:   #63686B;
  --e-global-color-fliesstx:  #3E4441;
  --e-global-color-582268b:   #E2DDD3;
  --e-global-color-f3c7a14:   #E2DDD3;
  --e-global-color-8bfcdf9:   #E2DDD3;
  --e-global-color-b8ffb71:   #E2DDD3;
  /* Status- und Markenfarben tragen auf Weiss nicht (Rose 3.7:1, Gruen 1.7:1),
     deshalb dunklere Fassungen - alle ueber 4.5:1 auf Papier und Weiss. */
  --e-global-color-f219b95:   #BE123C;
  --e-global-color-f1216c1:   #C2410C;
  --e-global-color-ead56d2:   #166534;
  --e-global-color-6ab8f6c:   #854D0E;
  --e-global-color-f933c50:   #B91C1C;
  background-color: #F2F0EA !important;
  background-image: none !important;
  color: #14161A;
}
.e-con.ps-hell ::selection { background: rgba(244,180,0,0.40); color: #14161A; }

/* Gelb auf hellem Grund (seit 08.10.2026, statt Ocker): Signalgelb traegt dort als
   Schrift nicht (1.7:1). Darum laufen die globalen Akzentfarben im hellen Band auf
   Tinte (Ueberzeilen, Links, "Mehr erfahren" bleiben lesbar), und Gelb bekommen nur
   Dinge, die man nicht lesen muss: Symbole, Pfeile, Schrittnummern, Linien und die
   grossen Akzentwoerter. Einzelne Widgets schalten mit der Klasse ps-gelb auf Gelb. */
.ps-hell .ps-icon,
.ps-karte-hell .ps-icon {
  color: var(--ps-signal);
}
.ps-hell .ps-gelb,
.ps-hell .ps-gelb p,
.ps-hell .ps-gelb .elementor-heading-title {
  color: var(--ps-signal) !important;
}
/* Textlinks und kleine Beschriftungen, die direkt an --ps-signal haengen:
   im hellen Band Tinte, das Gelb wandert in die Unterstreichung. */
.ps-hell .ps-faq-antwort a,
.ps-hell .ps-test-einwilligung a {
  color: var(--ps-papier);
  text-decoration-color: var(--ps-signal);
  text-decoration-thickness: 2px;
}
.ps-hell .ps-faq-antwort a:hover,
.ps-hell .ps-test-einwilligung a:hover,
.ps-hell .ps-test .ps-test-zurueck:hover {
  color: var(--ps-fliess);
}
.ps-hell .ps-rk-zusatz { fill: var(--ps-papier); }

/* Karten: weiss, feiner Rand, leichter Schatten - der Rand allein
   (1.19:1) waere zu schwach, der Schatten traegt die Kante. */
.ps-hell .ps-karte {
  background-color: #FFFFFF !important;
  border-color: #E2DDD3 !important;
  box-shadow: 0 1px 2px rgba(20,22,26,0.05), 0 8px 24px -16px rgba(20,22,26,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ps-hell .ps-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(20,22,26,0.05), 0 18px 40px -18px rgba(20,22,26,0.28);
}

/* Die eine dunkle Karte im hellen Band: das Gegengewicht aus dem Entwurf.
   Sie stellt innerhalb ihres Rahmens die dunkle Palette wieder her. */
.ps-hell .ps-karte.ps-karte-dunkel {
  --ps-papier:       #EDEBE4;
  --ps-fliess:       #B9BCB7;
  --ps-gedaempft:    #9A9E9B;
  --ps-dim:          #8E938F;
  --ps-signal:       #F4B400;
  --ps-signal-hell:  #FFD028;
  --ps-auf-signal:   #14161A;
  --ps-fokusfarbe:   #F4B400;
  --e-global-color-text:      #EDEBE4;
  --e-global-color-secondary: #F4B400;
  --e-global-color-accent:    #F4B400;
  --e-global-color-3ffef50:   #9A9E9B;
  --e-global-color-1035ea6:   #8E938F;
  --e-global-color-fliesstx:  #B9BCB7;
  background-color: #14161A !important;
  border-color: #14161A !important;
  box-shadow: 0 18px 40px -20px rgba(20,22,26,0.55);
}

/* Knoepfe auf Papier: Signalgelb als Flaeche traegt dort nicht,
   deshalb Tinte mit Papierschrift (15.2:1). */
.ps-hell .elementor-widget-button:not(.btn-outline):not(.btn-ghost) .elementor-button {
  background-color: #14161A !important;
  color: #EDEBE4 !important;
}
.ps-hell .elementor-widget-button:not(.btn-outline):not(.btn-ghost) .elementor-button:hover {
  background-color: #2A2D31 !important;
  box-shadow: 0 10px 28px -12px rgba(20,22,26,0.5);
}
.ps-hell .btn-outline .elementor-button,
.ps-hell .btn-ghost .elementor-button {
  color: #14161A !important;
  border-color: #BDB6A8 !important;
}
@media (prefers-reduced-motion: reduce) {
  .ps-hell .ps-karte { transition: none; }
  .ps-hell .ps-karte:hover { transform: none; }
}

/* ---------- FAQ [ps_faq] ---------- */
/* Offene Karten wie auf der Regionalseite. Im dunklen Band ein feiner Rahmen,
   im hellen Band macht .ps-hell .ps-karte sie weiß mit Schatten. Ab Tablet
   zwei Spalten, damit die Zeilen nicht über die volle Breite laufen. */
.ps-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
@media (min-width: 1025px) {
  .ps-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ps-faq-eintrag {
  border: 1px solid var(--e-global-color-f3c7a14, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 28px 24px;
}
.ps-faq .ps-faq-frage {
  margin: 0 0 8px;
  font-family: var(--ps-titelschrift), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--ps-papier);
}
.ps-faq-antwort p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ps-fliess);
}
.ps-faq-antwort p:last-child { margin-bottom: 0; }
.ps-faq-antwort a { color: var(--ps-signal); text-decoration: underline; text-underline-offset: 3px; }
.ps-faq-klappen summary { list-style: none; cursor: pointer; position: relative; padding-right: 32px; margin: 0; }
.ps-faq-klappen summary::-webkit-details-marker { display: none; }
.ps-faq-klappen summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 24px; line-height: 1; color: var(--ps-signal); }
.ps-faq-klappen details[open] summary::after { content: "‘2"; }
.ps-faq-klappen details[open] summary { margin-bottom: 8px; }

/* ---------- Zahlentabelle in Beiträgen (figure.ps-zahlen) ---------- */
/* Feine Linien statt Gitter, Zahlen rechtsbündig mit gleich breiten Ziffern.
   Auf dem Handy scrollt die Tabelle waagerecht, statt die Seite zu sprengen. */
.ps-zahlen { margin: 8px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ps-zahlen table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ps-zahlen th, .ps-zahlen td { border: 0; border-bottom: 1px solid var(--ps-rahmen); background: transparent !important; padding: 10px 12px; text-align: right; white-space: nowrap; }
.ps-zahlen th:first-child, .ps-zahlen td:first-child { text-align: left; padding-left: 0; }
.ps-zahlen th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-gedaempft); }
.ps-zahlen td { color: var(--ps-fliess); }
.ps-zahlen tbody tr:last-child td { border-bottom: 0; border-top: 2px solid var(--ps-signal); color: var(--ps-papier); }
/* Handy: enger setzen und Kopfzeile umbrechen lassen, damit fünf Spalten
   ohne seitliches Scrollen auf 300 px passen. */
@media (max-width: 480px) {
  .ps-zahlen table { min-width: 0; font-size: 14px; }
  .ps-zahlen th, .ps-zahlen td { padding: 9px 5px; }
  .ps-zahlen th { font-size: 10px; letter-spacing: .04em; white-space: normal; vertical-align: bottom; hyphens: auto; }
  .ps-zahlen th:last-child, .ps-zahlen td:last-child { padding-right: 0; }
}

/* ---------- Themenknöpfe [ps_blogfilter] ---------- */
.ps-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-family: var(--ps-titelschrift), system-ui, sans-serif; }
.ps-filter a {
  font-size: 12px; font-weight: 600; line-height: 1.4;
  padding: 7px 16px; border-radius: 999px;
  color: var(--ps-gedaempft); background: transparent;
  border: 1px solid var(--e-global-color-f3c7a14, rgba(255,255,255,0.06));
  text-decoration: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.ps-filter a:hover, .ps-filter a:focus-visible { color: var(--ps-papier); border-color: var(--ps-signal-a30); }
.ps-filter a.aktiv { color: var(--ps-signal); background: var(--ps-signal-a08); border-color: var(--ps-signal-a30); }

/* ---------- Untermenü im Kopf (Digitalisierung > Dashboards, Cockpits) ---------- */
/* Elementor gibt dem Untermenü fast keinen Grund (2 % Weiß). Über dem Seiteninhalt
   wäre es unlesbar, deshalb eine feste Karte in der Kopffarbe. */
.elementor-location-header .elementor-nav-menu--main .sub-menu {
  background: var(--ps-grund-kopf) !important;
  border: 1px solid var(--ps-rahmen) !important;
  border-radius: 12px;
  padding: 6px !important;
  min-width: 210px !important;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.75);
}
.elementor-location-header .elementor-nav-menu--main .sub-menu a {
  color: var(--ps-gedaempft) !important;
  background: transparent !important;
  border-radius: 8px;
  padding: 11px 14px !important;
  font-size: 14px;
  border: 0 !important;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu a:hover,
.elementor-location-header .elementor-nav-menu--main .sub-menu a:focus-visible,
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-item-active {
  color: var(--ps-papier) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Handy-Menü: Untermenü als eingerückte Liste im Fluss, nicht als schwebendes
   Feld (lag sonst über „Über uns" und „Blog"). Der geöffnete Elterneintrag
   bekam dunkle Schrift auf dunklem Grund. */
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.03) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu a { padding: 13px 20px 13px 36px !important; }
.elementor-location-header .elementor-nav-menu--dropdown a.highlighted,
.elementor-location-header .elementor-nav-menu--dropdown a.has-submenu { color: var(--ps-papier) !important; }

/* ---------- Preise und Leistungslisten in Karten ---------- */
/* .ps-preis: große Zahl in der Karte, <small> für „im Monat".
   .ps-liste: Häkchenliste, Farben über --ps-*, damit sie hell wie dunkel stimmt.
   .ps-karte-hervor: die empfohlene Karte mit Signal-Rand. */
.ps-preis { margin: 2px 0 12px !important; font-family: var(--ps-titelschrift), system-ui, sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ps-papier); }
.ps-preis small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ps-gedaempft); }
.ps-preis .ps-ab { font-size: 16px; font-weight: 700; color: var(--ps-gedaempft); margin-right: 4px; }
.ps-preis.ps-preis-text { font-size: 22px; line-height: 1.25; }
ul.ps-liste { list-style: none; margin: 0 0 12px !important; padding: 0 !important; }
ul.ps-liste li { position: relative; padding: 5px 0 5px 26px; line-height: 1.45; color: var(--ps-fliess); }
ul.ps-liste li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 7px;
  border-left: 2px solid var(--ps-signal); border-bottom: 2px solid var(--ps-signal);
  transform: rotate(-45deg);
}
@media (min-width: 768px) { ul.ps-liste.ps-liste-2 { columns: 2; column-gap: 32px; } ul.ps-liste.ps-liste-2 li { break-inside: avoid; } }
.ps-karte.ps-karte-hervor { border-color: var(--ps-signal) !important; box-shadow: 0 0 0 1px var(--ps-signal-a30); }
.ps-klein { font-size: 14px !important; color: var(--ps-gedaempft) !important; }
/* Zwei gleichwertige Textlinks nebeneinander, auf dem Handy untereinander. */
.ps-linkpaar { display: flex; flex-wrap: wrap; gap: 10px 28px; }
/* Sprungziele (#preise, #termin …) nicht unter dem angehefteten Kopf verstecken. */
.e-con[id] { scroll-margin-top: 110px; }
/* Tablet: drei Preiskarten nebeneinander wären 218 px schmal, vier Schritte 159 px.
   Deshalb Preise untereinander, Schritte als 2 × 2. Nur ab 768 px, darunter
   stapelt Elementor ohnehin (Spaltenrichtung, dort wäre flex-basis eine Höhe). */
@media (min-width: 768px) and (max-width: 1024px) {
  #preise .e-con-inner > .e-con:has(> .ps-karte),
  #betriebs-check .e-con-inner > .e-con:has(> .ps-karte) { flex-wrap: wrap !important; }
  #betriebs-check .e-con-inner > .e-con > .ps-karte { flex: 1 1 calc(50% - 12px) !important; max-width: calc(50% - 6px) !important; }
}
@media (min-width: 768px) and (max-width: 959px) {
  #preise .e-con-inner > .e-con > .ps-karte { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* ---------- Kontakt-Pop-up ---------- */
/* Grund und Ecken kommen aus den Pop-up-Einstellungen (globale Farbe
   "Kartengrund dunkel"). Hier die feine Signal-Kante wie im Anmeldekasten. */
.elementor-popup-modal .dialog-widget-content {
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
/* Kein overflow:hidden an der Karte: der Schliessen-Knopf sitzt mit
   negativem Versatz ueber dem Rand und wuerde abgeschnitten. Die Kante
   ist deshalb von den runden Ecken eingerueckt statt beschnitten. */
.elementor-popup-modal .dialog-widget-content::before {
  content: "";
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ps-signal), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ---------- Rechtsseiten auf dem Handy ---------- */
/* Der Container der drei Rechtsseiten hat auf dem Handy 0 px Seitenabstand,
   Kopf und Karten lagen dadurch direkt am Bildschirmrand. Kopf und Raster
   bekommen den ueblichen Rand von 16 px; die Sprungmarken-Leiste bleibt
   randlos, weil sie waagerecht gewischt wird, ihr Inhalt rueckt ein. */
@media (max-width: 767px) {
  .agb-page-header,
  .agb-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .agb-nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---------- Selbsttest [ps_selbsttest] ---------- */
/* Eine Karte, die in dunklen wie hellen Abschnitten funktioniert: Farben kommen
   aus den --ps-*-Variablen, die ps-hell umdefiniert. Nur Kartengrund und Linien
   brauchen eigene Werte je Grund. */
.ps-test {
  --st-grund: #1B1E23;
  --st-linie: rgba(255,255,255,0.14);
  --st-schatten: 0 24px 60px rgba(0,0,0,0.35);
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 40px 32px;
  background: var(--st-grund);
  border: 1px solid var(--st-linie);
  border-radius: 18px;
  box-shadow: var(--st-schatten);
  color: var(--ps-papier);
  font-family: Manrope, system-ui, sans-serif;
  text-align: left;
}
.ps-hell .ps-test {
  --st-grund: #FFFFFF;
  --st-linie: #DDD7CB;
  --st-schatten: 0 1px 2px rgba(20,22,26,0.05), 0 18px 44px -20px rgba(20,22,26,0.28);
}
.ps-test [hidden] { display: none !important; }

/* Fortschritt */
.ps-test-kopf { margin-bottom: 26px; }
.ps-test-stand {
  margin: 0 0 10px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ps-gedaempft);
}
.ps-test-balken {
  height: 4px;
  border-radius: 999px;
  background: var(--st-linie);
  overflow: hidden;
}
.ps-test-balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ps-signal);
  transition: width .3s ease;
}

/* Frage */
.ps-test .ps-test-titel {
  margin: 0 0 22px;
  font-family: var(--ps-titelschrift);
  font-weight: var(--ps-titelschnitt);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: var(--ps-titellauf);
  color: var(--ps-papier);
  text-wrap: balance;
}
.ps-test .ps-test-titel:focus { outline: none; }
/* minmax(0,1fr): sonst waechst die Spalte mit der laengsten Antwort. Dazu braucht
   der Knopf white-space:normal, das Theme setzt in Knoepfen nowrap. */
.ps-test-antworten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.ps-test .ps-test-antwort {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--st-linie);
  border-radius: 12px;
  color: var(--ps-papier);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.ps-test .ps-test-antwort:hover {
  border-color: var(--ps-signal);
  background: var(--ps-signal-a08);
  color: var(--ps-papier);
}
.ps-test .ps-test-antwort[aria-pressed="true"] {
  border-color: var(--ps-signal);
  background: var(--ps-signal-a15);
  color: var(--ps-papier);
}
.ps-test .ps-test-antwort:active { transform: scale(0.99); }
.ps-test-buchstabe {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--st-linie);
  font-size: 13px;
  font-weight: 800;
  color: var(--ps-gedaempft);
}
.ps-test-antwort[aria-pressed="true"] .ps-test-buchstabe {
  background: var(--ps-signal);
  border-color: var(--ps-signal);
  color: var(--ps-auf-signal);
}

/* Zurueck und Hinweis */
.ps-test-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  min-height: 44px;
}
.ps-test .ps-test-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--ps-gedaempft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ps-test .ps-test-zurueck:hover { color: var(--ps-signal); background: none; }
.ps-test-anzahl {
  margin-left: auto;
  font-size: 13px;
  color: var(--ps-dim);
}

/* Ergebnis */
.ps-test .ps-test-marke {
  margin: 0 0 10px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ps-signal);
}
.ps-test .ps-test-ergebnistitel {
  margin: 0 0 8px;
  font-family: var(--ps-titelschrift);
  font-weight: var(--ps-titelschnitt);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ps-papier);
  text-wrap: balance;
}
.ps-test .ps-test-ergebnistitel:focus { outline: none; }
.ps-test-punkte {
  margin: 0 0 12px !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--ps-gedaempft);
}
.ps-test-text {
  margin: 0 0 26px !important;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ps-fliess);
}
.ps-test-saeulen {
  list-style: none;
  margin: 0 0 26px !important;
  padding: 0 !important;
  display: grid;
  gap: 18px;
}
.ps-test-saeule { --st-ampel: var(--ps-erfolg); }
.ps-test-saeule--gelb { --st-ampel: var(--ps-warnung); }
.ps-test-saeule--rot  { --st-ampel: var(--ps-fehler); }
.ps-test-saeulenkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--ps-papier);
  font-size: 16px;
}
.ps-test-ampel {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--st-ampel);
  flex: 0 0 10px;
}
.ps-test-stufe {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ampel);
}
.ps-test-leiste {
  height: 6px;
  border-radius: 999px;
  background: var(--st-linie);
  overflow: hidden;
  margin-bottom: 10px;
}
.ps-test-leiste span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--st-ampel);
}
.ps-test-saeule p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ps-fliess);
}

/* Der groesste Hebel: immer dunkel, auch im hellen Band - das Gegengewicht */
.ps-test-hebel {
  --ps-papier: #EDEBE4;
  --ps-fliess: #B9BCB7;
  --ps-gedaempft: #9A9E9B;
  --ps-signal: #F4B400;
  --ps-signal-hell: #FFD028;
  --ps-auf-signal: #14161A;
  --ps-fokusfarbe: #F4B400;
  padding: 26px 26px 24px;
  border-radius: 14px;
  background: #14161A;
  color: var(--ps-papier);
  position: relative;
  overflow: hidden;
}
.ps-test-hebel::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ps-signal), transparent);
}
.ps-test-hebel h3 {
  margin: 0 0 12px;
  font-family: var(--ps-titelschrift);
  font-weight: var(--ps-titelschnitt);
  font-size: 24px;
  letter-spacing: var(--ps-titellauf);
  color: var(--ps-papier);
}
.ps-test-hebel p {
  margin: 0 0 12px !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ps-fliess);
}
.ps-test-hebel p strong { color: var(--ps-papier); }
.ps-test-hebel .ps-test-abschluss { color: var(--ps-papier); font-weight: 600; margin-top: 16px !important; }
.ps-test-aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ps-test .ps-test-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  line-height: 1.2;  /* sonst 51 statt 50 px, eine Spur hoeher als "Test neu starten" */
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--ps-signal);
  color: var(--ps-auf-signal);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ps-test .ps-test-knopf:hover {
  background: var(--ps-signal-hell);
  color: var(--ps-auf-signal);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(244,180,0,0.55);
}
.ps-test .ps-test-neu {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ps-papier);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ps-test .ps-test-neu:hover { border-color: var(--ps-signal); color: var(--ps-papier); background: transparent; }
.ps-test-hinweis { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ps-fliess); }

/* Ergebnis freiwillig senden */
.ps-test-senden {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--st-linie);
}
.ps-test .ps-test-sendentitel {
  margin: 0 0 6px;
  font-family: var(--ps-titelschrift);
  font-weight: var(--ps-titelschnitt);
  font-size: 20px;
  letter-spacing: var(--ps-titellauf);
  color: var(--ps-papier);
}
.ps-test-senden > p {
  margin: 0 0 14px !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ps-fliess);
}
.ps-test .ps-test-senden-auf {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ps-feldrand);
  color: var(--ps-papier);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.ps-test .ps-test-senden-auf:hover { border-color: var(--ps-signal); color: var(--ps-papier); background: var(--ps-signal-a08); }
.ps-test-formular { display: grid; gap: 14px; margin-top: 4px; }
.ps-test-feld { display: grid; gap: 6px; }
.ps-test-feld label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ps-papier);
}
.ps-test-frei { font-weight: 500; color: var(--ps-gedaempft); }
.ps-test .ps-test-feld input,
.ps-test .ps-test-feld textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ps-feldrand);
  border-radius: 10px;
  background: transparent;
  color: var(--ps-papier);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}
.ps-test .ps-test-feld textarea { min-height: 90px; resize: vertical; }
.ps-test .ps-test-feld input:focus,
.ps-test .ps-test-feld textarea:focus {
  outline: none;
  border-color: var(--ps-signal);
  box-shadow: 0 0 0 3px var(--ps-signal-a15);
}
.ps-test [aria-invalid="true"] { border-color: var(--ps-fehler) !important; }
.ps-test-falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ps-test-einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ps-fliess);
  cursor: pointer;
}
.ps-test-einwilligung input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ps-signal);
  cursor: pointer;
}
.ps-test-einwilligung a { color: var(--ps-signal); text-decoration: underline; }
.ps-test-formular .ps-test-absenden { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.ps-test-formular .ps-test-absenden:disabled { opacity: .6; cursor: wait; transform: none; }
.ps-test-meldung { margin: 0 !important; min-height: 1px; font-size: 14px; font-weight: 600; color: var(--ps-fliess); }
.ps-test-meldung--fehler { color: var(--ps-fehler); }
.ps-test .ps-test-danke {
  margin: 4px 0 0 !important;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ps-signal-a12);
  border: 1px solid var(--ps-signal);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ps-papier);
}
.ps-test .ps-test-danke:focus { outline: none; }

@media (max-width: 767px) {
  .ps-test { padding: 26px 18px 22px; border-radius: 16px; }
  .ps-test .ps-test-titel { font-size: 22px; }
  .ps-test .ps-test-antwort { font-size: 15px; padding: 12px 14px; gap: 12px; }
  .ps-test .ps-test-ergebnistitel { font-size: 26px; }
  .ps-test-hebel { padding: 22px 18px 20px; }
  .ps-test-anzahl { margin-left: 0; }
  /* Auf dem Handy stehen beide Knoepfe gleich breit untereinander,
     sonst wirkt der Hauptknopf neben dem schmalen Zweitknopf wuchtig. */
  .ps-test-aktionen .ps-test-knopf,
  .ps-test .ps-test-aktionen .ps-test-neu,
  .ps-test-formular .ps-test-absenden,
  .ps-test .ps-test-senden-auf { width: 100%; justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-test-balken span,
  .ps-test .ps-test-antwort,
  .ps-test .ps-test-knopf { transition: none; }
  .ps-test .ps-test-knopf:hover,
  .ps-test .ps-test-antwort:active { transform: none; }
}

/* ---------- Lange Woerter im Fussmenue ---------- */
/* "Datenschutzerklaerung" ist 171 px breit, die schmalste Fussspalte auf dem
   Tablet nur 127 px. Das Wort ragte hinaus und machte jede Seite 23 px zu breit.
   Silbentrennung (die Seite ist lang="de-DE") statt starrer Umbrueche. */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-widget-text-editor {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* anywhere statt break-word: nur anywhere senkt die Mindestbreite von
     Flex-Elementen (die Menuelinks sind welche). Mit Woerterbuch trennt der
     Browser trotzdem nach Silben, anywhere greift nur als Rueckfall. */
  overflow-wrap: anywhere;
}

/* ---------- Fuss nach hellem Abschlussband ---------- */
/* Der Fuss war fuer durchgehend dunklen Grund gebaut: sein Logo sass auf dem
   Handy 21 px unter der Farbkante, wenn die Seite mit einem hellen Band endet
   (Kontakt, Selbsttest). Nur in diesem Fall bekommt er oben zusaetzlich Luft;
   der Fuss ist durchsichtig, der Abstand erscheint also dunkel. */
body:has(.e-parent.ps-hell:last-child) .elementor-location-footer {
  padding-top: 48px;
}

/* ---------- Regionalseite: Karte, Ortsliste, Öffnungszeiten ---------- */
/* Farben über die --ps-*-Variablen, damit die Karte im hellen wie im dunklen
   Band stimmt. Die Flüsse bekommen ein eigenes, zurückhaltendes Blaugrau. */
.ps-regionkarte {
  --rk-fluss: #3E5566;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  font-family: Manrope, system-ui, sans-serif;
}
.ps-hell .ps-regionkarte { --rk-fluss: #A9C0D0; }
.ps-rk-fluss { fill: none; stroke: var(--rk-fluss); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ps-rk-neckar { stroke-width: 3; }
.ps-rk-flussname { fill: var(--rk-fluss); font-size: 13px; font-style: italic; font-weight: 600; filter: brightness(0.75); }
.ps-rk-land { fill: var(--ps-gedaempft); opacity: .35; font-size: 22px; font-weight: 800; letter-spacing: .3em; }
.ps-rk-ort { fill: var(--ps-papier); }
.ps-rk-sitz { fill: var(--ps-signal); }
.ps-rk-halo { fill: var(--ps-signal-a15); }
.ps-rk-name { fill: var(--ps-papier); font-size: 15px; font-weight: 700; }
.ps-rk-name-sitz { font-size: 18px; font-weight: 800; }
.ps-rk-zusatz { fill: var(--ps-signal); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Hof in Grundfarbe, damit ein Name über einem Fluss lesbar bleibt. */
.ps-regionkarte { --rk-grund: var(--ps-grund); }
.ps-hell .ps-regionkarte { --rk-grund: #F2F0EA; }
.ps-rk-name, .ps-rk-zusatz { paint-order: stroke; stroke: var(--rk-grund); stroke-width: 4px; stroke-linejoin: round; }
/* Handy: die Karte schrumpft auf gut die Hälfte, die Schrift darf das nicht.
   Größen in Kartenmaß, bei 343 px Breite ergibt 21 etwa 11,5 px. Die neue
   Anordnung der Namen macht assets/regionkarte.js. */
@media (max-width: 767px) {
  .ps-rk-name { font-size: 21px; }
  .ps-rk-name-sitz { font-size: 25px; }
  .ps-rk-zusatz { font-size: 16px; }
  .ps-rk-flussname { font-size: 18px; }
  .ps-rk-land { font-size: 25px; letter-spacing: .2em; }
  .ps-rk-name, .ps-rk-zusatz { stroke-width: 6px; }
}

.ps-orte {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  columns: 2;
  column-gap: 28px;
}
.ps-orte li {
  break-inside: avoid;
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ps-papier);
}
.ps-orte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-gedaempft);
}
.ps-orte li.ps-orte-sitz::before { background: var(--ps-signal); box-shadow: 0 0 0 4px var(--ps-signal-a15); }
@media (max-width: 480px) { .ps-orte { columns: 1; } }

.ps-zeiten { display: inline-block; line-height: 1.8; }
.ps-zeit-tag { font-weight: 700; color: var(--ps-papier); }
.ps-zeit-uhr { color: var(--ps-fliess); }

/* === HEADER STICKY === */
.elementor-element-2f8803ee:not(.elementor-sticky--effects) {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
}
.elementor-element-2f8803ee.elementor-sticky--effects {
  background: rgba(20,22,26,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: background 0.3s ease;
}
.elementor-element-2f8803ee.elementor-sticky__spacer {
  display: none !important;
}

/* === BUTTON OUTLINE === */
.btn-outline .elementor-button {
  background: transparent !important;
  color: var(--ps-papier) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-weight: 500 !important;
}
.btn-outline .elementor-button:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* === BUTTON GHOST === */
.btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--ps-signal) !important;
  border: 1px solid var(--ps-signal) !important;
  font-weight: 600 !important;
}
.btn-ghost .elementor-button:hover {
  background: var(--ps-signal-a08) !important;
}

/* === FLUENT FORMS CHECKBOX === */
.fluentform .ff-el-form-check,
.fluentform .ff-el-form-check label,
.fluentform .ff-el-form-check label span,
.fluentform .ff-el-form-check .ff-el-form-check-label,
.fluentform .ff-checkable-siblings .ff-el-form-check label,
.fluentform .ff-checkable-siblings .ff-el-form-check label *,
.fluentform .ff-el-fc-label,
.fluentform .ff-el-fc-label span,
.fluentform .ff-field-checkbox-list label,
.fluentform .ff-field-checkbox-list label span {
  color: var(--ps-papier) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
}

/* === DASHBOARDS — PAIN CARDS === */
.pain-grid-el > div {
  position: relative;
  overflow: hidden;
}
.pain-grid-el > div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ps-signal), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.pain-grid-el > div:hover {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.02) !important;
}
.pain-grid-el > div:hover::before {
  opacity: 1;
}

/* === DASHBOARDS — CTA === */
.cta-dash {
  position: relative !important;
  overflow: hidden !important;
}
.cta-dash::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ps-signal), transparent);
  z-index: 1;
}

/* === DASHBOARDS — RESPONSIVE === */
@media (max-width: 960px) {
  .pain-grid-el { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .pain-grid-el { grid-template-columns: 1fr !important; }
}

/* === BLOG CARDS === */
.blog-card-el {
  transition: all 0.3s ease;
}
.blog-card-el:hover {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.02) !important;
  transform: translateY(-3px);
}

/* === BLOG CATEGORY TAG === */
.blog-cat-tag a,
.blog-cat-tag .elementor-post-info__terms-list-item a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--ps-signal) !important;
  background: var(--ps-signal-a08) !important;
  border: 1px solid var(--ps-signal-a15) !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}

/* === BLOG FILTER HOVER === */
.blog-filter-row a:hover {
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--ps-papier) !important;
}

/* ---------- AGB-Seite ---------- */

:root {
  --agb-accent:       var(--ps-signal);
  --agb-text-primary: var(--ps-papier);
  --agb-text-dim:     var(--ps-dim);
}

/* ── Seitentitel ── */
.agb-page-header { margin-bottom: 2rem; }

.agb-overline {
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ps-signal);
  margin-bottom: 0.4rem;
}

.elementor-widget-html .agb-title,
.agb-title,
.agb-title * {
  font-family: var(--ps-titelschrift) !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-weight: var(--ps-titelschnitt) !important;
  letter-spacing: var(--ps-titellauf) !important;
  color: var(--ps-papier) !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.2 !important;
}

.agb-meta {
  font-size: 0.72rem;
  color: var(--ps-dim);
  letter-spacing: 0.03em;
}

/* ── Paragraphen-Navigation ── */
.agb-nav {
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 0;
  position: sticky;
  top: 80px;
  z-index: 50;
  background: rgba(20,22,26,0.97);
  backdrop-filter: blur(8px);
  margin-bottom: 2rem;
}
.agb-nav-inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.agb-nav-inner::-webkit-scrollbar { display: none; }

/* Nav-Links deutlich heller */
.agb-nav a,
.agb-nav a:visited,
.elementor-widget-html .agb-nav a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ps-gedaempft) !important;
  text-decoration: none !important;
  padding: 0.7rem 0.65rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  display: inline-block;
}
.agb-nav a:hover,
.elementor-widget-html .agb-nav a:hover {
  color: var(--ps-signal) !important;
  border-bottom-color: var(--ps-signal);
}

/* ── Zwei-Spalten-Grid ── */
.agb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  /* stretch statt start: nebeneinanderstehende Karten sollen gleich hoch sein. */
  align-items: stretch;
}

/* ── Paragraf-Karten — sichtbarere Border ── */
.agb-section {
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px;
  padding: 1.4rem 1.5rem 1.2rem;
  transition: border-color 0.2s;
  scroll-margin-top: 120px;
}
.agb-section:hover {
  border-color: var(--ps-signal-a30) !important;
}
.agb-section.agb-wide { grid-column: span 2; }

/* H2 */
.elementor-widget-html .agb-section h2,
.agb-section h2 {
  font-family: var(--ps-titelschrift) !important;
  font-size: 1rem !important;
  font-weight: var(--ps-titelschnitt) !important;
  letter-spacing: -0.01em !important;
  color: var(--ps-papier) !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin: 0 0 1rem !important;
  line-height: 1.3 !important;
}
.agb-section h2 .agb-para-num { color: var(--ps-signal); }

/* H3 */
.elementor-widget-html .agb-section h3,
.agb-section h3 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ps-signal) !important;
  margin: 1.2rem 0 0.6rem !important;
}

/* ── Nummerierte Liste ── */
ol.agb-clauses {
  list-style: none !important;
  counter-reset: agb-clause;
  padding: 0 !important;
  margin: 0 !important;
}
ol.agb-clauses > li {
  counter-increment: agb-clause;
  display: grid !important;
  grid-template-columns: 1.3rem 1fr;
  gap: 0 0.4rem;
  margin-bottom: 0.6rem !important;
  padding: 0 !important;
  font-size: 0.78rem;
}
ol.agb-clauses > li::before {
  content: counter(agb-clause) "." !important;
  color: var(--ps-dim) !important;
  font-size: 0.68rem;
  font-weight: 600;
  padding-top: 0.12rem;
}
ol.agb-clauses > li > span,
.elementor-widget-html ol.agb-clauses > li > span {
  color: var(--ps-papier) !important;
  line-height: 1.65;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.78rem !important;
}

/* ── Bullet-Liste ── */
ul.agb-items {
  list-style: none !important;
  margin: 0.45rem 0 0.3rem !important;
  padding: 0 !important;
}
ul.agb-items li,
.elementor-widget-html ul.agb-items li {
  padding: 0.1rem 0 0.1rem 1rem !important;
  position: relative;
  font-size: 0.76rem !important;
  color: var(--ps-papier) !important;
  font-family: 'Manrope', sans-serif !important;
}
ul.agb-items li::before {
  content: '–' !important;
  position: absolute;
  left: 0;
  color: var(--ps-signal);
}

/* ── Links ── */
.agb-section a,
.agb-section a:visited {
  color: var(--ps-signal) !important;
  text-decoration: none !important;
}
.agb-section a:hover { color: var(--ps-signal-hell) !important; text-decoration: underline !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .agb-grid { grid-template-columns: 1fr; }
  .agb-section.agb-wide { grid-column: span 1; }
}


/* ---------- Auswahllisten ---------- */
/* Die aufgeklappte Optionsliste zeichnet das Betriebssystem. Sie erbt nur
   Hintergrund- und Textfarbe des <select>; ohne diese Regeln steht die helle
   Formularschrift auf weißem Grund und ist praktisch unlesbar.
   Die Farben kommen aus den globalen Elementor-Variablen, damit eine
   Änderung im Kit hier automatisch mitzieht. */
.elementor-field-type-select select option,
.elementor-field-type-select select optgroup {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-text);
}

/* Die erste Option ist der Platzhalter mit leerem Wert und wird gedämpft
   dargestellt, damit sie sich von echten Auswahlmöglichkeiten abhebt. */
.elementor-field-type-select select option[value=""] {
  color: var(--e-global-color-1035ea6);
}

/* ============================================================
   Barrierefreiheit
   ============================================================ */

/* ---------- Sichtbare Tastatur-Fokusanzeige ---------- */
/* Elementor entfernt die Umrandung an neun Stellen, unter anderem auf allen
   Formularfeldern, ohne einen Ersatz zu setzen. Wer mit der Tastatur bedient,
   sieht dadurch nicht, wo er gerade ist (WCAG 2.4.7).
   :focus-visible statt :focus, damit ein Mausklick keine Umrandung erzeugt.
   Die Auswahl steht in :where(), hat also Spezifitaet null - das !important
   ist nötig, weil die Elementor-Regeln spezifischer sind. */
/* Eigene Variable statt --e-global-color-secondary: Elementor setzt diese
   Kit-Variable auf Link-Elementen an fuenf Stellen auf "unset", die Umrandung
   waere dort zu einer dunklen Farbe aufgeloest und auf dem dunklen Grund
   unsichtbar gewesen. */
:root { --ps-fokusfarbe: var(--ps-signal); }

:where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(.elementor-field, .elementor-button, .elementor-field-group input,
       .elementor-field-group select, .elementor-field-group textarea):focus-visible {
  outline: 3px solid var(--ps-fokusfarbe) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ---------- Sprunglink ---------- */
/* Der Sprunglink des Themes bleibt auch im Fokus 1x1 Pixel gross und ist damit
   unbrauchbar. Hier wird er sichtbar, sobald er den Fokus erhaelt. Sein Ziel
   #content liefert jetzt der Hauptbereich aus prosulting-core.php. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: .8rem 1.4rem !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  background: var(--e-global-color-primary, var(--ps-grund)) !important;
  color: var(--e-global-color-text, var(--ps-papier)) !important;
  font-size: 1rem !important;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
  border: 2px solid var(--ps-fokusfarbe) !important;
  border-radius: 4px;
}

/* ---------- Klickflaechen ---------- */
/* Textlinks in Fliesstext und Karten waren teils nur 17 Pixel hoch. WCAG 2.2
   verlangt mindestens 24 Pixel. Der zusaetzliche Raum entsteht ueber die
   Innenabstaende, das Schriftbild bleibt unveraendert. */
.elementor-widget-text-editor a,
.elementor-widget-heading a,
.elementor-widget-icon-list a,
.ps-inhalt p a {
  display: inline-block;
  padding-block: 4px;
}

/* ---------- Bewegung reduzieren ---------- */
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie hier
   auch nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Klickflaechen im Fussbereich ---------- */
/* Die Menuepunkte im Fussbereich waren 315 Pixel breit, aber nur 20 hoch.
   WCAG 2.2 verlangt mindestens 24 Pixel in beide Richtungen.
   !important ist noetig, weil Elementor den Innenabstand pro Element ueber
   eine spezifischere Regel auf 0 setzt. Der Abstand wirkt nur im Fussbereich -
   in der Kopfnavigation wuerde er das Layout verschieben. */
[data-elementor-type="footer"] .elementor-nav-menu .elementor-item,
footer .elementor-nav-menu .elementor-item {
  padding-block: 6px !important;
}

/* ============================================================
   Blogbeitraege
   ============================================================ */

/* Ausgangslage: Der Beitragstext erbte die dunkle Standardfarbe des Themes
   (var(--ps-grund)) und stand damit auf dem dunkelgruenen Grund mit einem Kontrast
   von 1,01 - praktisch unsichtbar. Ausserdem kam die Systemschrift zum
   Einsatz statt Manrope. Hier bekommt der Lesetext eine eigene, auf langes
   Lesen ausgelegte Gestaltung.
   Alle Farben stammen aus dem Kit, damit eine Aenderung dort mitzieht. */

.ps-inhalt .elementor-widget-theme-post-content {
  color: var(--e-global-color-fliesstx, var(--ps-fliess));
}

/* Die Lesespalte wird jetzt vom Container der Vorlage vorgegeben (680 px).
   Eine zusaetzliche Begrenzung hier wuerde den Text schmaler machen als die
   Ueberschrift darueber - die beiden sollen auf derselben Kante stehen. */

/* ---------- Fliesstext ---------- */
.ps-inhalt .elementor-widget-theme-post-content p {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--e-global-color-fliesstx, var(--ps-fliess));
  margin: 0 0 1.5em;
}

/* Der erste Absatz fuehrt in den Text ein und darf etwas groesser sein. */
.ps-inhalt .elementor-widget-theme-post-content > p:first-of-type {
  font-size: 21px;
  line-height: 1.65;
  color: var(--e-global-color-fliesstx, var(--ps-fliess));
  margin-bottom: 1.8em;
}

.ps-inhalt .elementor-widget-theme-post-content strong {
  font-weight: 700;
  color: var(--e-global-color-secondary, var(--ps-signal));
}

/* ---------- Zwischenueberschriften ---------- */
/* Titelschrift wie auf den uebrigen Seiten, mit deutlich mehr Luft oben
   als unten - so gehoert die Ueberschrift sichtbar zum folgenden Abschnitt. */
.ps-inhalt .elementor-widget-theme-post-content h2 {
  font-family: var(--ps-titelschrift);
  font-weight: var(--ps-titelschnitt);
  letter-spacing: var(--ps-titellauf);
  font-size: 30px;
  line-height: 1.25;
  color: var(--e-global-color-text, var(--ps-papier));
  margin: 2.4em 0 .6em;
  text-wrap: balance;
}

.ps-inhalt .elementor-widget-theme-post-content h3 {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--e-global-color-text, var(--ps-papier));
  margin: 2em 0 .5em;
  text-wrap: balance;
}

/* ---------- Listen ---------- */
.ps-inhalt .elementor-widget-theme-post-content ul,
.ps-inhalt .elementor-widget-theme-post-content ol {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--e-global-color-fliesstx, var(--ps-fliess));
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}

.ps-inhalt .elementor-widget-theme-post-content li {
  margin-bottom: .5em;
}

.ps-inhalt .elementor-widget-theme-post-content li::marker {
  color: var(--e-global-color-secondary, var(--ps-signal));
}

/* ---------- Zitate ---------- */
.ps-inhalt .elementor-widget-theme-post-content blockquote {
  margin: 2.2em 0;
  padding: 0 0 0 1.4em;
  border-left: 3px solid var(--e-global-color-secondary, var(--ps-signal));
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  line-height: 1.5;
  color: var(--e-global-color-text, var(--ps-papier));
}

.ps-inhalt .elementor-widget-theme-post-content blockquote p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}

/* ---------- Trenner ---------- */
/* Der Trenner markiert einen Gedankenwechsel und bekommt deshalb spuerbar
   Raum, aber nur eine zurueckhaltende Linie. */
.ps-inhalt .elementor-widget-theme-post-content hr {
  border: 0;
  border-top: 1px solid var(--e-global-color-582268b, var(--ps-rahmen));
  margin: 3em auto;
  width: 100%;
}

/* ---------- Links im Text ---------- */
.ps-inhalt .elementor-widget-theme-post-content a:not(.elementor-button) {
  color: var(--e-global-color-secondary, var(--ps-signal));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ps-inhalt .elementor-widget-theme-post-content a:not(.elementor-button):hover {
  color: var(--e-global-color-be66433, var(--ps-signal-hell));
  text-decoration-thickness: 2px;
}

/* ---------- Bilder im Text ---------- */
.ps-inhalt .elementor-widget-theme-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.ps-inhalt .elementor-widget-theme-post-content figure {
  margin: 2.2em 0;
}

.ps-inhalt .elementor-widget-theme-post-content figcaption {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
  margin-top: .7em;
}

/* ---------- Auf kleinen Bildschirmen ---------- */
@media (max-width: 767px) {
  .ps-inhalt .elementor-widget-theme-post-content p,
  .ps-inhalt .elementor-widget-theme-post-content ul,
  .ps-inhalt .elementor-widget-theme-post-content ol { font-size: 17px; }
  .ps-inhalt .elementor-widget-theme-post-content > p:first-of-type { font-size: 19px; }
  .ps-inhalt .elementor-widget-theme-post-content h2 { font-size: 26px; margin-top: 2em; }
  .ps-inhalt .elementor-widget-theme-post-content h3 { font-size: 19px; }
}

/* ---------- Feinschliff der Beitragsseite ---------- */

/* Beitragsbild: festes Seitenverhaeltnis, damit unterschiedlich hohe Bilder
   die Seite nicht unterschiedlich weit nach unten schieben. */
.ps-inhalt .elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Zurueck-Link: kleiner Pfeil, der beim Zeigen nach links wandert. */
.ps-inhalt .elementor-widget-button .elementor-button {
  gap: .5em;
}
.ps-inhalt .elementor-widget-button .elementor-button-icon {
  transition: transform .2s ease;
}
.ps-inhalt .elementor-widget-button .elementor-button:hover .elementor-button-icon {
  transform: translateX(-3px);
}

/* Metazeile: Kategorie und Datum als ruhige Grundlinie ueber dem Titel. */
.ps-inhalt .elementor-widget-post-info .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.ps-inhalt .elementor-widget-post-info .elementor-icon-list-item {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
}
/* Die Kategorie tritt hervor, das Datum bleibt zurueckhaltend. */
.ps-inhalt .elementor-widget-post-info .elementor-post-info__item--type-terms,
.ps-inhalt .elementor-widget-post-info .elementor-post-info__item--type-terms a {
  color: var(--e-global-color-secondary, var(--ps-signal));
  font-weight: 700;
  text-decoration: none;
}
/* Trennpunkt zwischen den Angaben, statt sie nur nebeneinanderzustellen. */
.ps-inhalt .elementor-widget-post-info .elementor-icon-list-item + .elementor-icon-list-item::before {
  content: "·";
  margin-right: .9rem;
  color: var(--e-global-color-1035ea6, var(--ps-dim));
}

/* Titel: engerer Zeilenabstand, damit mehrzeilige Ueberschriften
   als ein Block wirken. */
.ps-inhalt .elementor-widget-theme-post-title .elementor-heading-title {
  line-height: 1.12;
  text-wrap: balance;
}

/* Teilen und Blaettern: durch eine feine Linie vom Text abgesetzt. */
.ps-inhalt .elementor-widget-share-buttons {
  padding-top: 32px;
  border-top: 1px solid var(--e-global-color-582268b, var(--ps-rahmen));
}

.ps-inhalt .elementor-widget-post-navigation {
  padding-top: 8px;
}
.ps-inhalt .elementor-post-navigation__link a {
  text-decoration: none;
}
.ps-inhalt .elementor-post-navigation__prev--label,
.ps-inhalt .elementor-post-navigation__next--label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
}

/* Weitere Beitraege: gleiche Ruhe wie der Artikel darueber. */
.ps-inhalt .elementor-widget-posts .elementor-post__title {
  text-wrap: balance;
}
.ps-inhalt .elementor-widget-posts .elementor-post__thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .ps-inhalt .elementor-widget-theme-post-featured-image img { border-radius: 6px; }
  .ps-inhalt .elementor-widget-post-info .elementor-icon-list-item { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   Rechtsseiten: Fliesstext lesbar machen
   Gilt fuer Impressum, Datenschutzerklaerung und AGB gleichermassen.
   Vorher: #333333 auf dem damaligen Waldgruen #12321B = 1.43:1, deutlich unter WCAG AA.
   ══════════════════════════════════════════════════════════════════ */
:root {
	--agb-text-body: var(--ps-fliess); /* 9.44:1 auf Tiefschwarz - AAA */
	--agb-text-dim:  var(--ps-dim);    /* 5.80:1 auf Tiefschwarz - AA */
}

.elementor-widget-html .agb-section p,
.elementor-widget-html .agb-section li,
.agb-section p,
.agb-section li {
	color: var(--agb-text-body) !important;
}

.elementor-widget-html .agb-section strong,
.agb-section strong {
	color: var(--agb-text-primary) !important;
}

.elementor-widget-html .agb-meta,
.agb-meta {
	color: var(--agb-text-dim) !important;
}

/* Listen brauchen Einzug, sonst kleben die Punkte am Kartenrand. */
.elementor-widget-html .agb-section ul,
.elementor-widget-html .agb-section ol {
	padding-left: 1.3rem;
}

.elementor-widget-html .agb-section li {
	margin-bottom: 0.4rem;
}

/* Sprungleiste: auf breiten Bildschirmen umbrechen statt unsichtbar
   seitlich wegzulaufen. Auf schmalen bleibt das Wischen erhalten. */
@media (min-width: 782px) {
	.elementor-widget-html .agb-nav-inner,
	.agb-nav-inner {
		flex-wrap: wrap;
		row-gap: 0.35rem;
		overflow-x: visible;
	}
}

/* ══════════════════════════════════════════════════════════════════
   Handlungsaufruf am Ende eines Beitrags, Ausgabe über [ps_cta].
   Optik wie der CTA-Block der Leistungsseiten: goldene auslaufende
   Linie oben, zentrierte Spalte, keine Box.
   Die Schaltflächen erben Größe, Schrift und Farbe aus dem Kit.
   ══════════════════════════════════════════════════════════════════ */
.ps-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 4rem 0 1rem;
	padding: 3.5rem 1.5rem 1rem;
	border: 0;
	background: none;
}

.ps-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ps-signal), transparent);
}

.ps-cta .ps-cta-overline {
	font-family: "Manrope", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	color: var(--ps-signal) !important;
	margin: 0 0 0.9rem !important;
}

.ps-cta .ps-cta-titel {
	font-family: var(--ps-titelschrift) !important;
	font-size: 1.9rem !important;
	font-weight: var(--ps-titelschnitt) !important;
	letter-spacing: var(--ps-titellauf) !important;
	line-height: 1.2 !important;
	color: var(--ps-papier) !important;
	margin: 0 0 0.9rem !important;
	max-width: 24ch;
	text-wrap: balance;
}

.ps-cta .ps-cta-titel em {
	color: var(--ps-signal);
	font-style: italic;
}

.ps-cta .ps-cta-text {
	color: var(--ps-gedaempft) !important;
	font-size: 1rem !important;
	line-height: 1.7 !important;
	max-width: 56ch;
	margin: 0 0 2rem !important;
}

.ps-cta .ps-cta-knoepfe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Nur was die globale Schaltfläche nicht abdeckt: Unterstreichung weg. */
.ps-cta .ps-cta-knopf {
	text-decoration: none !important;
}

/* Zweite Schaltfläche: gleiche Größe, nur Fläche und Farbe umgekehrt. */
.ps-cta .ps-cta-knopf-zweit {
	background-color: transparent !important;
	color: var(--ps-signal) !important;
	box-shadow: inset 0 0 0 1px var(--ps-signal);
}

.ps-cta .ps-cta-knopf-zweit:hover {
	background-color: rgba(255, 255, 255, 0.03) !important;
	color: var(--ps-signal-hell) !important;
	box-shadow: inset 0 0 0 1px var(--ps-signal-hell);
}

.ps-cta .ps-cta-knopf:focus-visible {
	outline: 2px solid var(--ps-signal-hell);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.ps-cta { padding: 2.6rem 0.5rem 0.5rem; margin-top: 3rem; }
	.ps-cta .ps-cta-titel { font-size: 1.5rem !important; }
	.ps-cta .ps-cta-knoepfe { flex-direction: column; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Beitragsbild: läuft nach unten in den Seitenhintergrund aus.
   Oben gerundet, unten weich auslaufend, damit kein harter Schnitt
   zwischen Bild und Text steht.
   ══════════════════════════════════════════════════════════════════ */
.ps-inhalt .elementor-widget-theme-post-featured-image img {
	border-radius: 12px 12px 0 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════
   Blogbeiträge nach der Elementor-Umstellung neu justiert.
   Vorher addierten sich zwei Abstände: der Absatzabstand aus dieser
   Datei und der Baustein-Abstand von Elementor. Jetzt trägt der
   letzte Absatz je Baustein keinen eigenen Abstand mehr.
   ══════════════════════════════════════════════════════════════════ */
.ps-inhalt .elementor-widget-theme-post-content p {
	font-size: 17px !important;
	line-height: 1.68 !important;
	margin: 0 0 1.05em !important;
}

/* Letzter Absatz eines Bausteins: kein Abstand, sonst doppelt. */
.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-text-editor p:last-child {
	margin-bottom: 0 !important;
}

/* Vorspann: der erste Absatz des ersten Textbausteins. */
.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-text-editor:first-of-type p:first-child {
	font-size: 19px !important;
	line-height: 1.58 !important;
}

.ps-inhalt .elementor-widget-theme-post-content ul,
.ps-inhalt .elementor-widget-theme-post-content ol {
	font-size: 17px !important;
	line-height: 1.68 !important;
	margin: 0 0 1.05em !important;
}

.ps-inhalt .elementor-widget-theme-post-content li {
	margin-bottom: 0.35em !important;
}

/* Überschriften: Abstand steuert der Baustein, nicht das Element. */
.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-heading .elementor-heading-title {
	margin: 0 !important;
}

.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-heading h2.elementor-heading-title {
	font-size: 27px !important;
	line-height: 1.25 !important;
}

.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-heading h3.elementor-heading-title {
	font-size: 19px !important;
	line-height: 1.35 !important;
}

@media (max-width: 767px) {
	.ps-inhalt .elementor-widget-theme-post-content p,
	.ps-inhalt .elementor-widget-theme-post-content ul,
	.ps-inhalt .elementor-widget-theme-post-content ol { font-size: 16px !important; }
	.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-text-editor:first-of-type p:first-child { font-size: 17px !important; }
	.ps-inhalt .elementor-widget-theme-post-content .elementor-widget-heading h2.elementor-heading-title { font-size: 23px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Icon-Set, Ausgabe über [ps_icon]. Linien-Icons im Stil der
   ROTTINGERs-Icons: fill none, Strichstärke 1.7, runde Enden.
   Die Hauptlinie erbt currentColor, Details treten gedämpft zurück.
   ══════════════════════════════════════════════════════════════════ */
.ps-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--e-global-color-secondary, var(--ps-signal));
	line-height: 0;
}

.ps-icon svg {
	display: block;
	overflow: visible;
}

.ps-icon .ps-ico-dim {
	stroke: var(--e-global-color-3ffef50, var(--ps-gedaempft));
}

/* In Karten sitzt das Icon über der Überschrift und braucht etwas Luft. */
.ps-icon + p,
.elementor-widget-text-editor .ps-icon {
	margin-bottom: 0;
}

/* ==========================================================================
   Momentschalter (Dashboards-Seite)
   Reiterleiste plus umschaltbare Felder. Farben kommen aus den globalen
   Vorgaben, damit ein Wechsel im Kit hier automatisch ankommt.
   ========================================================================== */

.ps-schalter-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.ps-schalter .ps-schalter-reiter {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px Mindesthoehe, damit die Flaeche auf dem Handy sicher zu treffen ist */
	min-height: 44px;
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--e-global-color-fldrand, var(--ps-feldrand));
	border-radius: 999px;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ps-schalter .ps-schalter-reiter:hover {
	border-color: var(--e-global-color-secondary, var(--ps-signal));
	color: var(--e-global-color-text, var(--ps-papier));
}

.ps-schalter .ps-schalter-reiter[aria-selected="true"] {
	background: var(--e-global-color-secondary, var(--ps-signal));
	border-color: var(--e-global-color-secondary, var(--ps-signal));
	color: var(--ps-auf-signal);
}

.ps-schalter .ps-schalter-reiter:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, var(--ps-signal));
	outline-offset: 3px;
}

/* --- Feld: Mockup und Text nebeneinander --- */

.ps-schalter-feld {
	display: flex;
	gap: 48px;
	align-items: center;
}

.ps-schalter-feld[hidden] {
	display: none;
}

.ps-schalter-spalte {
	flex: 1 1 54%;
	min-width: 0;
}

.ps-schalter-text {
	flex: 1 1 46%;
	min-width: 0;
}

.ps-schalter-frage {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, var(--ps-signal));
	margin: 0 0 10px;
}

.ps-schalter-text h3 {
	font-family: var(--ps-titelschrift);
	font-size: 30px;
	line-height: 1.15;
	font-weight: var(--ps-titelschnitt);
	letter-spacing: var(--ps-titellauf);
	color: var(--e-global-color-text, var(--ps-papier));
	margin: 0 0 12px;
}

.ps-schalter-text p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin: 0 0 18px;
}

.ps-schalter-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-schalter-marken li {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid var(--e-global-color-fldrand, var(--ps-feldrand));
	border-radius: 6px;
	color: var(--e-global-color-secondary, var(--ps-signal));
}

/* Hinweis auf das seitliche Schieben, nur mobil sichtbar */
.ps-schalter-wisch {
	display: none;
	font-size: 12px;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin-top: 10px;
}

/* --- Mobil --- */

@media (max-width: 767px) {
	.ps-schalter-feld {
		flex-direction: column;
		gap: 24px;
		align-items: stretch;
	}

	.ps-schalter-text h3 {
		font-size: 24px;
	}

	/* Die Mockups arbeiten mit Schriftgraden von 6 bis 9 Pixeln und sind erst ab
	   etwa 520px Breite lesbar. Statt sie unleserlich zu stauchen, bekommen sie
	   einen seitlich scrollbaren Rahmen. Der Hinweis liegt bewusst ausserhalb,
	   sonst erbte er die Mindestbreite. */
	.ps-schalter-bild {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}

	.ps-schalter-bild > * {
		min-width: 520px;
	}

	.ps-schalter-wisch {
		display: block;
	}

	.ps-schalter .ps-schalter-reiter {
		flex: 1 1 auto;
		padding: 10px 14px;
		font-size: 13px;
	}
}

.ps-schalter-aufruf {
	font-size: 15px;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin: 0 0 16px;
}

/* Herkunftsgrafik im Block "So funktioniert's" */
.ps-schaubild {
	width: 100%;
}

.ps-schaubild-wisch {
	display: none;
	font-size: 12px;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin-top: 10px;
}

@media (max-width: 767px) {
	/* Die Karten und Feldnamen sind erst ab etwa 560px lesbar, deshalb
	   seitlich schiebbar statt gestaucht. */
	.ps-schaubild {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}

	.ps-schaubild > svg {
		min-width: 560px;
	}

	.ps-schaubild-wisch {
		display: block;
	}
}


/* Elementor setzt am Body eine eigene Hintergrundfarbe. Die wuerde den
   Verlauf des Wurzelelements verdecken, deshalb hier ausdruecklich frei. */
body.elementor-kit-93 {
	background-color: transparent;
}



/* Das Burger-Menue hat auf dem Handy einen oberen Aussenabstand von -74px
   und erbt die volle Zeilenbreite. Sein Kasten liegt damit ueber dem Logo
   und faengt den Tipp ab, obwohl dort nichts zu sehen ist. Der leere Teil
   wird deshalb durchlaessig, die Schaltflaeche und das aufgeklappte Menue
   bleiben bedienbar. */
@media (max-width: 767px) {
	.elementor-element-dac1133 {
		pointer-events: none;
	}

	.elementor-element-dac1133 .elementor-menu-toggle,
	.elementor-element-dac1133 .elementor-nav-menu--dropdown,
	.elementor-element-dac1133 nav {
		pointer-events: auto;
	}
}


/* === MOBILES MENUE, ps-menue-voll ===
   Der Menue-Baustein ist auf dem Handy nur 317 von 390 Pixeln breit und
   sein Aufklappmenue war mit rgba(255,255,255,0.02) fast durchsichtig.
   Hier spannt es sich unter der Kopfzeile ueber die volle Breite, mit
   deckendem Grund. Die Kopfhoehe liefert das Skript als Variable. */
@media (max-width: 767px) {
	.elementor-element-dac1133 .elementor-nav-menu--dropdown {
		position: fixed;
		top: var(--ps-kopfhoehe, 108px);
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - var(--ps-kopfhoehe, 108px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: var(--ps-grund) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
	}

	.elementor-element-dac1133 .elementor-nav-menu--dropdown .elementor-nav-menu {
		width: 100%;
	}

	/* Groessere Trefferflaechen: vorher waren die Eintraege 36px hoch. */
	.elementor-element-dac1133 .elementor-nav-menu--dropdown .elementor-item {
		padding: 16px 24px;
		font-size: 17px;
		min-height: 52px;
		display: flex;
		align-items: center;
	}

	.elementor-element-dac1133 .elementor-nav-menu--dropdown li:not(:last-child) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
}

/* ps-menue-eintrag-grund: Die Eintraege bringen aus dem Kit einen eigenen
   halbdurchsichtigen Grund mit, der ueber dem deckenden Panel liegt. */
@media (max-width: 767px) {
	.elementor-element-dac1133 .elementor-nav-menu--dropdown .elementor-item {
		background-color: transparent !important;
	}

	.elementor-element-dac1133 .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-element-dac1133 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
		background-color: var(--ps-signal-a12) !important;
		color: var(--ps-papier) !important;
	}
}

/* Solange das Menue offen ist, bekommt auch die Kopfzeile einen deckenden
   Grund. Sonst schaut zwischen Logo und Menue der Seiteninhalt durch, weil die
   Kopfzeile im ungescrollten Zustand absichtlich durchsichtig ist.
   :has() versteht nicht jeder aeltere Browser. Faellt die Regel aus, bleibt es
   beim bisherigen Verhalten, kaputt geht dabei nichts. */
@media (max-width: 767px) {
	.elementor-element-2f8803ee:has(.elementor-menu-toggle.elementor-active) {
		background-color: var(--ps-grund) !important;
		border-bottom-color: rgba(255, 255, 255, 0.08) !important;
	}
}

/* Eigene Linien-Icons im Elementor-Icon-Baustein.
   Elementor faerbt eingebundene SVG grundsaetzlich ueber fill. Unsere Motive
   leben aber von der Linie, deshalb hier zurueckgestellt. Der Zugriff geht
   ueber den viewBox-Wert 0 0 32 32, den nur das eigene Set verwendet.
   Markenzeichen wie LinkedIn bleiben dadurch unberuehrt. */
.elementor-icon > svg[viewBox="0 0 32 32"] {
	fill: none;
}

.elementor-icon > svg[viewBox="0 0 32 32"] path,
.elementor-icon > svg[viewBox="0 0 32 32"] rect,
.elementor-icon > svg[viewBox="0 0 32 32"] circle,
.elementor-icon > svg[viewBox="0 0 32 32"] line,
.elementor-icon > svg[viewBox="0 0 32 32"] polyline {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* === TERMINBUCHUNG, Zwei-Klick-Loesung ===
   Vor dem Klick liegt hier nur eigenes Markup. Erst der Knopf laedt den
   Kalender von Microsoft nach. */
.ps-buchung {
	position: relative;
	width: 100%;
}

.ps-buchung-schleier {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 32px 28px;
	border: 1px solid var(--e-global-color-8bfcdf9, rgba(255, 255, 255, .1));
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
}

.ps-buchung-icon {
	color: var(--e-global-color-secondary, var(--ps-signal));
	line-height: 0;
	margin-bottom: 16px;
}

.ps-buchung-titel {
	font-family: var(--ps-titelschrift);
	font-size: 26px;
	line-height: 1.15;
	font-weight: var(--ps-titelschnitt);
	letter-spacing: var(--ps-titellauf);
	color: var(--e-global-color-text, var(--ps-papier));
	margin: 0 0 10px;
}

.ps-buchung-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin: 0 0 16px;
}

.ps-buchung-hinweis {
	font-size: 13px;
	line-height: 1.55;
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	margin: 0 0 22px;
	padding-left: 12px;
	border-left: 2px solid var(--e-global-color-fldrand, var(--ps-feldrand));
}

.ps-buchung-hinweis a {
	color: var(--e-global-color-secondary, var(--ps-signal));
}

.ps-buchung .ps-buchung-knopf {
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	min-height: 48px;
	padding: 12px 26px;
	border: 0;
	border-radius: 8px;
	background: var(--e-global-color-secondary, var(--ps-signal));
	color: var(--ps-auf-signal);
	cursor: pointer;
	transition: background-color .18s ease;
}

.ps-buchung .ps-buchung-knopf:hover {
	background: var(--ps-signal-hell);
	color: var(--ps-auf-signal); /* sonst Weiß aus button:hover der Theme-Grundregeln */
}

.ps-buchung .ps-buchung-knopf:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, var(--ps-signal));
	outline-offset: 3px;
}

.ps-buchung-fremd {
	margin: 14px 0 0;
	font-size: 14px;
}

.ps-buchung-fremd a {
	color: var(--e-global-color-3ffef50, var(--ps-gedaempft));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ps-buchung-fremd a:hover {
	color: var(--e-global-color-secondary, var(--ps-signal));
}

/* Nach dem Klick */
.ps-buchung-rahmen {
	width: 100%;
	border: 1px solid var(--e-global-color-8bfcdf9, rgba(255, 255, 255, .1));
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.ps-buchung-rahmen iframe {
	display: block;
	width: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.ps-buchung-schleier {
		padding: 24px 20px;
	}

	.ps-buchung-titel {
		font-size: 22px;
	}
}

/* Icons mitten im Fliesstext.
   Ohne Angabe sitzt ein inline-flex-Element auf der Grundlinie. Da das Icon
   hoeher ist als die Schrift, steht es dann sichtbar zu weit oben. "middle"
   legt seine Mitte auf die halbe x-Hoehe ueber der Grundlinie, also auf die
   optische Mitte des Textes, und zwar unabhaengig vom Schriftgrad. */
.ps-icon-inline {
	vertical-align: middle;
	margin-right: .35em;
}

/* Der Abstand kommt aus der Regel oben, ein zusaetzliches Leerzeichen im
   Quelltext wuerde ihn verdoppeln. */
.ps-icon-inline + span,
.ps-icon-inline + em,
.ps-icon-inline + strong {
	vertical-align: middle;
}

/* === SOCIAL-LEISTE IM FUSS ===
   Einheitliche Optik statt der Markenfarben von Elementor: durchsichtiger
   Grund, Rahmen und Symbol in den globalen Farben. Das eigene Brief-Icon
   braucht zusaetzlich die Linienfuehrung, weil Elementor SVG mit fill faerbt. */
.ps-social .elementor-social-icon {
	background-color: transparent;
	border: 1px solid var(--e-global-color-fldrand, var(--ps-feldrand));
	color: var(--e-global-color-secondary, var(--ps-signal));
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.ps-social .elementor-social-icon:hover {
	background-color: var(--e-global-color-secondary, var(--ps-signal));
	border-color: var(--e-global-color-secondary, var(--ps-signal));
	color: var(--ps-auf-signal);
}

.ps-social .elementor-social-icon i,
.ps-social .elementor-social-icon svg {
	color: inherit;
	fill: currentColor;
}

/* Eigenes Linien-Icon: erkennbar am 32er Raster, das nur unser Set verwendet. */
.ps-social .elementor-social-icon svg[viewBox="0 0 32 32"] {
	fill: none;
}

.ps-social .elementor-social-icon svg[viewBox="0 0 32 32"] path,
.ps-social .elementor-social-icon svg[viewBox="0 0 32 32"] rect,
.ps-social .elementor-social-icon svg[viewBox="0 0 32 32"] circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ps-social .elementor-social-icon:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, var(--ps-signal));
	outline-offset: 3px;
}


/* ---------- Zahlenkarte „Dein Betrieb, live“ ---------- */
/* Weisse Karte zwischen Seitenkopf und Engpass-Band, halb in den dunklen Kopf
   gezogen (Vorschlag C). Sie steht als erstes Element im hellen Band; der
   negative Abstand oben ist der Bandabstand (--padding-top des Elementor-
   Containers, je Breite) plus 56px Überlappung. Feste Farben,
   weil die Karte auf beiden Gründen liegt. Kontraste auf Weiss: Tinte 18:1,
   Nebentext 6.9:1. */
.ps-zk {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  margin: calc(-1 * var(--padding-top, 80px) - 56px) auto 64px;
  padding: 26px 30px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E2DDD3;
  box-shadow: 0 24px 60px rgba(0,0,0,0.38);
  color: #14161A;
  font-family: var(--ps-titelschrift);
}
.ps-zk-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 20px;
}
.ps-zk .ps-zk-titel {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #565B57;
}
.ps-zk-hinweis {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #565B57;
  padding: 5px 10px;
  border: 1px solid #E2DDD3;
  border-radius: 999px;
}
.ps-zk-reiter {
  margin-left: auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #F2F0EA;
  border-radius: 999px;
}
/* Mit Elternklasse, sonst gewinnen button-Regeln aus Theme und Kit. */
.ps-zk .ps-zk-reiter button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 34px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: #565B57;
  transition: background-color .18s ease, color .18s ease;
}
.ps-zk .ps-zk-reiter button:hover {
  background: #E9E6DD;
  color: #14161A;
}
.ps-zk .ps-zk-reiter button[aria-selected="true"],
.ps-zk .ps-zk-reiter button[aria-selected="true"]:hover {
  background: #F4B400;
  color: #14161A;
}
.ps-zk .ps-zk-reiter button:focus-visible {
  outline: 3px solid #14161A;
  outline-offset: 2px;
}
.ps-zk-feld {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ps-zk-feld[hidden] {
  display: none;
}
.ps-zk-wert {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: 11px;
  background: #F7F6F1;
}
.ps-zk-name {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #565B57;
}
.ps-zk-zahl {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: #14161A;
}
.ps-zk-zusatz {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #14161A;
}
.ps-zk .ps-zk-fuss {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #565B57;
}
.ps-zk .ps-zk-link {
  color: #14161A;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #F4B400;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ps-zk .ps-zk-link:hover {
  color: #3E4441;
}
@media (max-width: 1024px) {
  .ps-zk-feld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ps-zk {
    margin: calc(-1 * var(--padding-top, 50px) - 56px) auto 48px;
    padding: 20px 16px;
    border-radius: 14px;
  }
  .ps-zk-reiter { margin-left: 0; width: 100%; }
  .ps-zk .ps-zk-reiter button { flex: 1 1 0; }
  .ps-zk-feld { gap: 10px; }
  .ps-zk-wert { padding: 14px 12px; }
  .ps-zk-zahl { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-zk .ps-zk-reiter button { transition: none; }
}

/* Karten mit Link unten: Inhalt oben ausgerichtet, nur das letzte Element (Link) rutscht
   nach unten. So stehen Überschriften einer Reihe auf einer Linie, auch bei ungleich
   langen Texten. Klasse ps-ans-ende am letzten Widget der Karte. */
.e-con > .elementor-widget.ps-ans-ende,
.e-con > .e-con-inner > .elementor-widget.ps-ans-ende {
  margin-top: auto;
}

/* Die helle Karte im dunklen Band: Gegenstück zu .ps-karte-dunkel. Stellt innerhalb
   ihres Rahmens die Palette des hellen Bands her (Tinte, Gelb nur als Schmuck), auf Weiß.
   Kontraste auf Weiß: Tinte 18:1, Fließtext 9.6:1, Nebentext 6.9:1. */
.e-con.ps-karte.ps-karte-hell {
  --ps-papier:       #14161A;
  --ps-fliess:       #3E4441;
  --ps-gedaempft:    #565B57;
  --ps-dim:          #63686B;
  --ps-signal:       #F4B400;
  --ps-signal-hell:  #FFD028;
  --ps-auf-signal:   #14161A;
  --ps-rahmen:       #E2DDD3;
  --ps-fokusfarbe:   #14161A;
  --e-global-color-primary:   #14161A;
  --e-global-color-text:      #14161A;
  --e-global-color-secondary: #14161A;
  --e-global-color-accent:    #14161A;
  --e-global-color-be66433:   #3E4441;
  --e-global-color-3ffef50:   #565B57;
  --e-global-color-1035ea6:   #63686B;
  --e-global-color-fliesstx:  #3E4441;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}

/* Kartenüberschriften (h3) mit Zeilenabstand 1.3 statt 1.0, damit zweizeilige Titel
   nicht aufeinander kleben. Der negative Rand gleicht den zusätzlichen Zeilenraum oben
   und unten aus: einzeilige Titel stehen genau wie vorher. Die großen Nummern (01, 02)
   sind keine h3 und bleiben unberührt. */
.ps-karte h3.elementor-heading-title {
  line-height: 1.3;
  margin-top: -0.15em;
  margin-bottom: -0.15em;
}

/* ---------- Seiten ohne Elementor ---------- */
/* Rückfallebene für Seiten, die ohne Elementor angelegt werden. Das Hello-Theme setzt
   dort nur Systemschrift und #333. Spalte 760px, oben Platz für den angehefteten Kopf,
   Titel im Website-Stil. Elementor-Seiten tragen die Klasse elementor-page und bleiben
   unberührt. (Gebaut für die PRO-Kademie, die seit 07.10.2026 eigenständig läuft; am
   09.10.2026 gab es keine solche Seite mehr, die Regel bleibt als Vorsorge.) */
body.page.elementor-default:not(.elementor-page) main.site-main {
  box-sizing: border-box;
  max-width: 792px;
  margin: 0 auto;
  padding: 140px 16px 80px;
  color: var(--ps-fliess);
  font-family: var(--ps-titelschrift);
}
body.page.elementor-default:not(.elementor-page) .page-header .entry-title {
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--ps-titelschrift);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ps-papier);
}
@media (max-width: 767px) {
  body.page.elementor-default:not(.elementor-page) main.site-main { padding: 120px 16px 56px; }
  body.page.elementor-default:not(.elementor-page) .page-header .entry-title { font-size: 34px; }
}

/* ---------- Über uns (13.10.2026) ---------- */
/* Porträt im Kopfbereich: hochkant zugeschnitten, gleiche Ecke wie Rahmen und Menüs. */
.ps-portrait img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 12px;
}
.ps-portrait-zeile p {
  margin: 12px 0 0 !important;
  font-size: 13px;
  line-height: 1.4;
}

/* Prinzipien: linksbündig, lesbare Schrift, alle Karten gleich hoch.
   !important, weil Elementor Ausrichtung und Breite je Widget mit höherer Spezifität setzt. */
.ps-prinzip {
  align-items: flex-start !important;
}
.ps-prinzip > .elementor-widget,
.ps-prinzip > .elementor-widget p {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}
.ps-prinzip > .elementor-widget:last-child p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ps-fliess) !important;
}

/* Werdegang als durchgehende Zeitleiste: Punkt in Signalgelb, feine Linie bis zum nächsten Eintrag. */
.ps-werdegang-eintrag {
  position: relative;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 0 22px 28px !important;
}
.ps-werdegang-eintrag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ps-signal);
  box-shadow: 0 0 0 4px var(--ps-signal-a15);
}
.ps-werdegang-eintrag::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  bottom: 2px;
  width: 1px;
  background: var(--ps-rahmen);
}
.ps-werdegang-eintrag:last-child { padding-bottom: 0 !important; }
.ps-werdegang-eintrag:last-child::after { display: none; }
.ps-werdegang-eintrag > .elementor-widget-html { display: none !important; }
.ps-werdegang-eintrag > .ps-werdegang-jahr {
  flex: 0 0 44px !important;
  width: 44px !important;
}
.ps-werdegang-eintrag > .elementor-widget:not(.ps-werdegang-jahr) {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
.ps-werdegang-eintrag p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Etiketten (Über uns, Erfahrung): kleine Pillen nebeneinander, umbrechend.
   Elementor gibt Kind-Containern sonst 100 % Breite. */
.e-con.ps-etiketten {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.e-con.ps-etiketten > .e-con {
  --width: auto;
  width: auto !important;
  flex: 0 0 auto !important;
}
.e-con.ps-etiketten p {
  margin: 0 !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Tablet: Prinzipien zwei mal zwei statt vier schmaler Spalten,
   Person und Werdegang untereinander. */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-con:has(> .ps-prinzip) {
    flex-wrap: wrap !important;
  }
  .e-con:has(> .ps-prinzip) > .ps-prinzip {
    --width: calc(50% - 8px);
    width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}
@media (max-width: 900px) {
  .e-con:has(> .ps-werdegang),
  .e-con-inner:has(> .ps-werdegang) {
    flex-direction: column !important;
  }
  .e-con:has(> .ps-werdegang) > .e-con,
  .e-con-inner:has(> .ps-werdegang) > .e-con {
    --width: 100%;
    width: 100% !important;
  }
}