/*
Theme Name: Praxis Hello
Theme URI: https://e-empfang.de
Description: Child-Theme von Hello Elementor fuer die Praxis-Fabrik (Arztpraxis-Websites). Lokale Fonts (Source Sans 3, Open Sans), Design-Tokens und die Formen, die Elementor nicht selbst kann (Sechsecke, Kicker-Strich, umkreiste Haken). Das Layout liegt in Elementor.
Author: E-Empfang
Version: 2.0.0
Template: hello-elementor
Text Domain: praxis-hello
*/

/* Tokens. Die Primaerfarben setzt der Generator zusaetzlich als Inline-Style je Website. */
:root {
  --px-primary: #42B3E5;
  --px-primary-mid: #1E88C7;
  --px-primary-dark: #3156A3;
  --px-heading: #1F2A37;
  --px-text: #666666;
  --px-muted: #9AA3AC;
  --px-line: #E4E4E4;
  --px-surface: #F8F8F8;
  --px-surface-2: #F0F0F0;
  --px-dark: #2E3033;
  --px-danger: #B42318;
  --px-primary-light: #A9DCF3;
  --px-tint: #EAF6FC;
  --px-font-head: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --px-font-text: "Open Sans", "Segoe UI", system-ui, sans-serif;
  /* Formensprache der Symbole: Sechseck (Vorgabe), Kreis hell, Kreis grau */
  --px-icon-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --px-icon-radius: 0;
  --px-icon-w: 66px;
  --px-icon-h: 74px;
  --px-icon-bg: var(--px-primary);
  --px-icon-fg: #fff;
}

/* Formensprache je Variante; als Body-Klasse (ganze Website) oder als
   Wrapper-Klasse auf einer Vorschau-Seite. */
.px-form-kreis, .px-form-kreis-grau, .px-satz-rose, .px-satz-beere, .px-satz-bernstein, .px-satz-gruen {
  --px-icon-clip: none; --px-icon-radius: 50%; --px-icon-w: 72px; --px-icon-h: 72px; --px-icon-fg: var(--px-primary);
}
.px-form-kreis, .px-satz-rose, .px-satz-beere { --px-icon-bg: color-mix(in srgb, var(--px-primary) 15%, #fff); }
.px-form-kreis-grau, .px-satz-bernstein, .px-satz-gruen { --px-icon-bg: var(--px-surface-2); }

/* Design-Familie „Vaidy": eine Primaerfarbe, weiche Ecken, andere Schriften und Neutraltoene */
.px-familie-vaidy {
  --px-font-head: "Nunito", "Segoe UI", system-ui, sans-serif;
  --px-font-text: "Kumbh Sans", "Segoe UI", system-ui, sans-serif;
  --px-heading: #222222;
  --px-text: #999999;
  --px-muted: #AAAAAA;
  --px-line: #EEEEEE;
  --px-surface: #F6F6F6;
  --px-surface-2: #F6F6F6;
  --px-dark: #222222;
  --px-primary-mid: var(--px-primary);
  --px-primary-dark: #222222;
  --px-icon-clip: none;
  --px-icon-radius: 50%;
  --px-icon-w: 64px;
  --px-icon-h: 64px;
  --px-icon-bg: #FFFFFF;
  --px-icon-fg: var(--px-primary);
}
.px-familie-vaidy .elementor-button { border-radius: 6px; }
.px-familie-vaidy .px-card, .px-familie-vaidy .px-tile { border-radius: 6px; overflow: hidden; }
.px-familie-vaidy .elementor-widget-image img { border-radius: 8px; }
.px-familie-vaidy .px-tile .elementor-widget-image img { border-radius: 0; }
/* Kicker ohne Unterstrich, dafuer in Versalien */
.px-familie-vaidy .px-kicker .elementor-heading-title::after { display: none; }
.px-familie-vaidy .px-kicker .elementor-heading-title { text-transform: uppercase; letter-spacing: .6px; padding-bottom: 0; }
/* Symbolkreis mit weichem Schatten */
.px-familie-vaidy .px-hex .elementor-icon { box-shadow: 0 6px 18px rgba(34,34,34,.08); }
/* Menue mittig, aktiver Punkt nur farbig */
.px-familie-vaidy .px-header .elementor-nav-menu--main > li > a.elementor-item-active {
  background: transparent; color: var(--px-primary) !important;
}
.px-familie-vaidy .px-header .elementor-nav-menu--main > li > a:hover { background: transparent; color: var(--px-primary); }
/* Infoleiste eingerueckt mit unten abgerundeten Ecken */
.px-familie-vaidy .px-topbar { border-radius: 0 0 5px 5px; }

/* Design-Familie „Apicona": ein Akzent, durchgehend rechteckig, Raleway und Lato */
.px-familie-apicona {
  --px-font-head: "Raleway", "Segoe UI", system-ui, sans-serif;
  --px-font-text: "Lato", "Segoe UI", system-ui, sans-serif;
  --px-heading: #2D2D2D;
  --px-text: #7C7C7C;
  --px-muted: #9A9A9A;
  --px-line: #EAEAEA;
  --px-surface: #F7F7F7;
  --px-surface-2: #F7F7F7;
  --px-dark: #222222;
  --px-icon-clip: none;
  --px-icon-radius: 50%;
  --px-icon-w: 62px;
  --px-icon-h: 62px;
  --px-icon-bg: var(--px-primary);
  --px-icon-fg: #fff;
}
.px-familie-apicona .elementor-button, .px-familie-apicona .px-card { border-radius: 0; }
/* Abschnittstitel mit kurzem Akzentbalken */
.px-abschnittstitel .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 14px; }
.px-abschnittstitel .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 2px; background: var(--px-primary);
}
.px-titel-zentriert .px-abschnittstitel .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }
.px-titel-links { border-bottom: 1px solid var(--px-line); }
.px-titel-links .px-abschnittstitel .elementor-heading-title { margin-bottom: -1px; }
.px-on-dark .px-abschnittstitel .elementor-heading-title, .px-on-dark .px-titel-links { color: #fff; border-bottom-color: rgba(255,255,255,.15); }
/* Symbol im gefuellten Kreis (nur dort, wo die Vorlage ihn nutzt) */
.px-kreis-akzent .elementor-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--px-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.px-kreis-akzent .elementor-icon svg, .px-kreis-akzent .elementor-icon i { fill: #fff; color: #fff; }
/* Zitat-Karte mit Sprechblasen-Spitze und Anfuehrungsquadrat */
.px-zitat-karte { position: relative; }
.px-zitat-karte::before {
  content: "\201C"; position: absolute; top: 0; left: 0; width: 34px; height: 34px;
  background: var(--px-primary); color: #fff; font: 700 26px/40px Georgia, serif; text-align: center;
}
.px-zitat-karte::after {
  content: ""; position: absolute; bottom: -10px; left: 34px; width: 0; height: 0;
  border: 10px solid transparent; border-top-color: var(--px-line); border-bottom: 0;
}
/* Senkrechte Trennstriche in der Info-Leiste */
.px-trennstriche .elementor-icon-list-item + .elementor-icon-list-item { border-left: 1px solid var(--px-line); padding-left: 22px; }
/* Widget-Titel im Fussbereich mit kurzem Akzentstrich */
.px-widget-titel .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 10px; }
.px-widget-titel .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--px-primary);
}

/* Design-Familie „Medicare": zwei Akzente, Kurzlinie, runde Symbole auf Bildkanten */
.px-familie-medicare {
  --px-font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --px-font-text: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --px-heading: #222222;
  --px-text: #444444;
  --px-muted: #8A8A8A;
  --px-line: #E4E4E4;
  --px-surface: #F9F9F9;
  --px-surface-2: #F1F1F1;
  --px-dark: #1D1F27;
  --px-icon-clip: none;
  --px-icon-radius: 50%;
  --px-icon-w: 72px;
  --px-icon-h: 72px;
  --px-icon-bg: var(--px-primary);
  --px-icon-fg: #fff;
}
/* Zweifarbige Überschrift */
.px-akzent { color: var(--px-primary); }
.px-on-dark .px-akzent { color: #fff; opacity: .85; }
/* Kurzlinie („Dash") unter der Vorzeile */
.px-dash .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 14px; }
.px-dash .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--px-primary);
}
.px-dash-center .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }
.px-on-dark .px-dash .elementor-heading-title::after { background: #fff; }
/* Runder Symbolkreis, der die Bildunterkante halb überlappt */
.px-symbolkreis .elementor-icon {
  width: 76px; height: 76px; border-radius: 50%; background: var(--px-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; border: 4px solid #fff;
}
.px-symbolkreis { margin-top: -38px; position: relative; z-index: 2; }
.px-symbolkreis .elementor-icon svg, .px-symbolkreis .elementor-icon i { fill: #fff; color: #fff; }
.px-fotokachel { background: #fff; }
.px-fotokachel .elementor-widget-image img { display: block; width: 100%; }
/* Rundes Porträt in der Zitatkarte */
.px-rundbild img { border-radius: 50%; }
/* Vier-Kachel-Band: gestufte Töne wie in der Vorlage */
.px-kachel-2 { filter: brightness(.94); }
.px-kachel-3 { filter: brightness(.9); }

/* Farbfamilien der Demo-Varianten (Vorschau-Seiten setzen sie als Wrapper-Klasse) */
.px-satz-blau { --px-primary: #42B3E5; --px-primary-mid: #0384CE; --px-primary-dark: #3156A3; --px-tint: #EAF6FC; }
.px-satz-rose { --px-primary: #F4898C; --px-primary-mid: #606BA2; --px-primary-dark: #4B558B; --px-tint: #FDF0F0; }
.px-satz-bernstein { --px-primary: #F4B73C; --px-primary-mid: #59667B; --px-primary-dark: #444F61; --px-tint: #FDF4E4; }
.px-satz-gruen { --px-primary: #26A69A; --px-primary-mid: #1D8595; --px-primary-dark: #344C70; --px-tint: #E6F5F3; }
.px-satz-beere { --px-primary: #C371A3; --px-primary-mid: #8C9DAD; --px-primary-dark: #667889; --px-tint: #F9EFF5; }
.px-satz-apicona { --px-primary: #AE1010; --px-primary-mid: #363839; --px-primary-dark: #222222; --px-tint: #F7F7F7; }
.px-satz-mc-klinik { --px-primary: #0CB8B6; --px-primary-mid: #F36438; --px-primary-dark: #1D1F27; }
.px-satz-mc-zahn { --px-primary: #00B3CC; --px-primary-mid: #005B88; --px-primary-dark: #1D1F27; }
.px-satz-mc-tier { --px-primary: #1D7871; --px-primary-mid: #86825B; --px-primary-dark: #1D1F27; }
.px-satz-mc-psych { --px-primary: #CA4012; --px-primary-mid: #784533; --px-primary-dark: #1D1F27; }
.px-satz-mc-physio { --px-primary: #2FB3D4; --px-primary-mid: #4A2352; --px-primary-dark: #1D1F27; }
.px-satz-mc-kardio { --px-primary: #E10F28; --px-primary-mid: #282828; --px-primary-dark: #1D1F27; }
.px-satz-mc-augen { --px-primary: #1C4C93; --px-primary-mid: #30B2D2; --px-primary-dark: #1D1F27; }
.px-satz-mc-kinder { --px-primary: #44A7E3; --px-primary-mid: #1D1F27; --px-primary-dark: #1D1F27; }
.px-satz-mc-labor { --px-primary: #C52127; --px-primary-mid: #61B6F2; --px-primary-dark: #1D1F27; }
.px-satz-mc-haus { --px-primary: #0176D5; --px-primary-mid: #ADC624; --px-primary-dark: #1D1F27; }
.px-satz-mc-chirurgie { --px-primary: #0DA8BC; --px-primary-mid: #F95759; --px-primary-dark: #1D1F27; }
.px-satz-mc-aesthetik { --px-primary: #6B4C76; --px-primary-mid: #EBBEBE; --px-primary-dark: #1D1F27; }


html { scroll-behavior: smooth; }
/* Vollbreiten-Reihen rechnen mit 100vw; das ergibt je nach Rundung ein bis zwei
   Pixel Ueberhang. clip schneidet ihn ab, ohne position:sticky zu stoeren. */
body { overflow-x: clip; }
body { font-family: var(--px-font-text); color: var(--px-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .elementor-heading-title {
  font-family: var(--px-font-head); color: var(--px-heading);
  overflow-wrap: break-word; hyphens: auto;
}
.px-no-hyphens, .px-no-hyphens .elementor-heading-title,
.px-no-hyphens h1, .px-no-hyphens h2 { hyphens: none; overflow-wrap: normal; }
a { color: var(--px-primary); }
a:hover { color: var(--px-primary-dark); }
img { height: auto; }
.elementor-button { border-radius: 0; }

/* ---------------------------------------------------------------- Kopfzeile */

.px-topbar .elementor-icon-list-item a { color: inherit; }
.px-header .px-logo .elementor-heading-title { white-space: nowrap; }
.px-header .elementor-nav-menu--layout-horizontal .elementor-nav-menu a { white-space: nowrap; }
/* aktiver Menuepunkt: gefuelltes Feld wie in der Vorlage */
.px-header .elementor-nav-menu--main > li > a.elementor-item-active,
.px-header .elementor-nav-menu--main > li > a.highlighted {
  background: var(--px-primary); color: #fff !important;
}
.px-header .elementor-nav-menu--main > li > a { transition: background .15s ease, color .15s ease; }
.px-header .elementor-nav-menu--main > li > a:hover { background: var(--px-surface-2); }
@media (min-width: 1025px) and (max-width: 1340px) {
  .px-header .elementor-nav-menu--main .elementor-item { font-size: 12px !important; padding-left: 9px !important; padding-right: 9px !important; }
  .px-header .px-header-phone { display: none; }
}
.px-header .elementor-menu-toggle { border-radius: 0; }

/* Hinweisbanner (Urlaub etc.) */
.px-hinweis {
  background: #FFF4E0; color: #7A4B00; border-bottom: 1px solid #F3D9A4;
  font: 600 14px/1.5 var(--px-font-text); text-align: center; padding: 10px 16px;
}
.px-hinweis a { color: inherit; text-decoration: underline; }

/* Flex-Kind nur so breit wie sein Inhalt (Elementor-Container sind sonst 100 %) */
.px-auto { width: auto !important; max-width: 100%; flex: 0 0 auto !important; }
.px-auto > .e-con-inner { width: auto; }
/* Kontaktpaare in der Kopfzeile: eine Zeile, bei wenig Platz das erste Paar ausblenden */
.px-kontaktpaare { flex-wrap: nowrap !important; }
@media (max-width: 1400px) { .px-kontaktpaare > .px-auto:first-child { display: none; } }
@media (max-width: 1180px) { .px-kontaktpaare > .px-auto:nth-child(2) { display: none; } }
/* Sprechzeiten in schmalen Kaesten: Vormittag und Nachmittag untereinander */
.px-hours-kompakt th, .px-hours-kompakt td { padding: 9px 2px; font-size: 14px; }
.px-hours-kompakt td { white-space: normal; line-height: 1.5; }

/* ---------------------------------------------------------------- Kicker mit Strich */

.px-kicker .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 12px; }
.px-kicker .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--px-primary);
}
.px-kicker-center .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }
.px-kicker-light .elementor-heading-title::after { background: #fff; }

/* ---------------------------------------------------------------- Sechsecke */

.px-hex .elementor-icon,
.px-hex-o .elementor-icon {
  width: var(--px-icon-w); height: var(--px-icon-h); display: inline-flex; align-items: center; justify-content: center;
  clip-path: var(--px-icon-clip); border-radius: var(--px-icon-radius);
}
.px-hex .elementor-icon { background: var(--px-icon-bg); color: var(--px-icon-fg); }
.px-hex .elementor-icon svg, .px-hex .elementor-icon i { fill: var(--px-icon-fg); color: var(--px-icon-fg); }
/* kleine Marke in der Kopfzeile */
.px-hex-sm .elementor-icon { width: 42px; height: 48px; }
.px-form-kreis .px-hex-sm .elementor-icon, .px-form-kreis-grau .px-hex-sm .elementor-icon { width: 46px; height: 46px; }
.px-steps li::before { border-radius: var(--px-icon-radius); }
.px-form-kreis .px-steps li::before, .px-form-kreis-grau .px-steps li::before { clip-path: none; width: 38px; height: 38px; line-height: 38px; }
/* Umriss-Variante (Zahlen-Band): dieselbe Form, nur als Rahmen */
.px-hex-o .elementor-icon { background: transparent; position: relative; }
.px-hex-o .elementor-icon::before {
  content: ""; position: absolute; inset: 0; opacity: .9;
  background: currentColor; border-radius: var(--px-icon-radius);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 50% 0%, 50% 2px, 2px 26%, 2px 74%, 50% calc(100% - 2px), calc(100% - 2px) 74%, calc(100% - 2px) 26%, 50% 2px);
}
.px-form-kreis .px-hex-o .elementor-icon::before,
.px-form-kreis-grau .px-hex-o .elementor-icon::before,
.px-satz-rose .px-hex-o .elementor-icon::before,
.px-satz-beere .px-hex-o .elementor-icon::before,
.px-satz-bernstein .px-hex-o .elementor-icon::before,
.px-satz-gruen .px-hex-o .elementor-icon::before { background: none; border: 2px solid currentColor; }
/* Symbolkasten: Symbol links, Text buendig daneben */
.px-hex.elementor-widget-icon-box .elementor-icon-box-icon { flex-shrink: 0; }
/* weisser Kreis hinter dem Symbol (Kontakt-Band) */
.px-kreis-weiss .elementor-icon { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
/* Karte mit senkrechter Trennlinie zwischen Symbol und Text */
.px-karte-linie > .e-con-inner > .elementor-widget-icon, .px-karte-linie > .elementor-widget-icon { border-right: 1px solid var(--px-line); padding-right: 24px; }
/* Ablauf-Band: Pfeile zwischen den Karten */
.px-ablauf .px-ablauf-karte { position: relative; }
@media (min-width: 1025px) {
  .px-ablauf .px-ablauf-karte:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -21px; width: 22px; height: 22px; transform: translateY(-50%) rotate(45deg);
    background: var(--px-primary);
  }
}
/* Bereichszeile ueber der Galerie */
.px-filterzeile .elementor-icon-list-item { border-bottom: 2px solid transparent; padding-bottom: 8px; }
.px-filterzeile .elementor-icon-list-item:first-child { border-bottom-color: var(--px-primary); }
/* Foto in der Mitte der Merkmalsgruppe */
.px-ring-foto img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* ---------------------------------------------------------------- Haekchenliste mit Kreis */

.px-checks .elementor-icon-list-item { align-items: flex-start; }
.px-checks .elementor-icon-list-icon {
  width: 26px; height: 26px; min-width: 26px; border: 1px solid var(--px-primary); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.px-checks .elementor-icon-list-icon svg, .px-checks .elementor-icon-list-icon i { width: 11px; height: 11px; font-size: 11px; }
.px-checks .elementor-icon-list-text { padding-left: 14px !important; line-height: 1.7; }

/* ---------------------------------------------------------------- Drei-Kaesten-Band */

.px-boxband .e-con-inner, .px-boxband { gap: 0 !important; }
.px-box { padding: 40px 38px; }
.px-box .elementor-heading-title { color: #fff; }
.px-box p, .px-box .elementor-icon-list-text { color: rgba(255,255,255,.88); }
.px-box-1 { background: var(--px-primary); }
.px-box-2 { background: var(--px-primary-mid); }
.px-box-3 { background: var(--px-primary-dark); }
@media (max-width: 1024px) { .px-box { padding: 32px 26px; } }

/* Sprechzeiten-Tabelle */
.px-hours { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.px-hours th, .px-hours td { padding: 11px 4px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.px-hours th { font-weight: 400; color: var(--px-heading); white-space: nowrap; width: 40%; }
.px-hours td { text-align: right; overflow-wrap: anywhere; }
@media (min-width: 1025px) { .px-hours td { white-space: nowrap; } }
@media (max-width: 1240px) { .px-hours { font-size: 14px; } }
.px-hours tr:last-child th, .px-hours tr:last-child td { border-bottom: 0; }
.px-hours .px-closed { color: var(--px-muted); }
.px-on-dark .px-hours th { color: #fff; }
.px-on-dark .px-hours td { color: rgba(255,255,255,.9); }
.px-on-dark .px-hours th, .px-on-dark .px-hours td { border-color: rgba(255,255,255,.18); }
.px-on-dark .px-hours .px-closed { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------- Kacheln */

.px-tile { border: 1px solid var(--px-line); background: #fff; }
.px-tile .elementor-widget-image img { display: block; width: 100%; }
/* graue Flaeche fuellt die Karte, damit alle Kacheln einer Reihe gleich hoch wirken */
.px-tile > .e-con-inner > .px-tile-body, .px-tile > .px-tile-body { flex: 1 1 auto; }
.px-tile-body { background: var(--px-surface-2); }
.px-tile-title .elementor-heading-title {
  font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--px-heading);
}

/* ---------------------------------------------------------------- Zahlen-Band */

.px-counter .elementor-counter-number-wrapper { font-family: var(--px-font-head); font-weight: 300; }
.px-counter .elementor-counter-title { text-transform: uppercase; letter-spacing: 1.4px; font-size: 13px; }

/* ---------------------------------------------------------------- Leistungszeilen mit Faehnchen */

.px-rows { width: 100%; border-collapse: collapse; font-size: 16px; }
.px-rows td { padding: 14px 0; border-bottom: 1px solid var(--px-line); color: var(--px-heading); }
.px-rows td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.px-rows .px-flag {
  display: inline-block; background: var(--px-primary); color: #fff; font: 600 13px/1 var(--px-font-text);
  padding: 7px 12px; letter-spacing: .3px;
}

/* ---------------------------------------------------------------- Zitat */

.px-quote { position: relative; padding-top: 34px; }
.px-quote::before {
  content: "\201C"; position: absolute; top: -14px; left: 0; font: 700 76px/1 Georgia, serif; color: var(--px-line);
}
.px-quote p { font-style: italic; color: var(--px-primary-dark); font-size: 19px; line-height: 1.7; }
.px-quote-light p { color: #fff; }
.px-quote-light::before { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------- Seitenkopf (Unterseiten) */

.px-pagehead { border-bottom: 1px solid var(--px-line); }
.px-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
  font: 600 12px/1.4 var(--px-font-text); color: var(--px-muted); text-transform: uppercase; letter-spacing: .8px; }
.px-breadcrumbs li + li::before { content: "\2192"; margin-right: 8px; opacity: .7; }
.px-breadcrumbs a { color: var(--px-muted); text-decoration: none; }
.px-breadcrumbs a:hover { color: var(--px-primary); }
.px-on-dark .px-breadcrumbs, .px-on-dark .px-breadcrumbs a { color: rgba(255,255,255,.75); }
.px-on-dark .px-breadcrumbs span[aria-current] { color: #fff; }

/* Brotkrume als weisse Pille (Familie Vaidy) */
.px-krume-pille .px-breadcrumbs {
  background: #fff; border-radius: 6px; padding: 10px 18px; display: inline-block;
  box-shadow: 0 6px 18px rgba(34,34,34,.06);
}
.px-krume-pille .px-breadcrumbs ol { font-size: 13px; }
.px-krume-pille .px-breadcrumbs a { color: var(--px-primary); }
.px-krume-pille .px-breadcrumbs span[aria-current] { color: var(--px-heading); }
/* Seitenkopf auf farbigem Grund: Brotkrume hell, Titel weiss */
.px-pagehead.px-on-dark { border-bottom: 0; }
.px-pagehead.px-on-dark .px-breadcrumbs ol,
.px-pagehead.px-on-dark .px-breadcrumbs a { color: rgba(255,255,255,.75); }
.px-pagehead.px-on-dark .px-breadcrumbs span[aria-current] { color: #fff; }
/* Seitenkopf mit Foto (Familie Vaidy) */
.px-pagehead-vaidy { border-bottom: 0; }

/* ---------------------------------------------------------------- Notfall */

.px-notfall .elementor-icon-list-text strong { color: var(--px-danger); }

/* ---------------------------------------------------------------- Fusszeile */

.px-footbar { padding: 32px 30px; transition: filter .2s ease; }
.px-footbar:hover { filter: brightness(1.08); }
.px-footbar-1 { background: var(--px-primary); }
.px-footbar-2 { background: var(--px-primary-mid); }
.px-footbar-3 { background: var(--px-primary-dark); }
@media (max-width: 767px) { .px-footbar { padding: 24px 20px; } }
.px-footer a { color: rgba(255,255,255,.8); }
.px-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #fff; }

/* ---------------------------------------------------------------- Schritte, Rechtstexte, Artikel */

.px-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.px-steps li { counter-increment: s; position: relative; padding-left: 52px; }
.px-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 40px;
  background: var(--px-primary); color: #fff; font: 600 16px/40px var(--px-font-head); text-align: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.px-legal h2 { font-size: 24px; margin: 30px 0 10px; }
.px-legal p { margin: 0 0 12px; }
.px-article { font-size: 17px; line-height: 1.8; }
.px-article h2 { font-size: 28px; margin: 34px 0 12px; }
.px-article h3 { font-size: 22px; margin: 26px 0 10px; }
.px-article p, .px-article ul, .px-article ol { margin: 0 0 18px; }
.px-article ul, .px-article ol { padding-left: 24px; }
.px-article blockquote { border-left: 3px solid var(--px-primary); margin: 24px 0; padding: 6px 0 6px 20px; color: var(--px-heading); font-style: italic; }
.px-article table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.px-article th, .px-article td { border: 1px solid var(--px-line); padding: 8px 10px; text-align: left; }

/* ---------------------------------------------------------------- Karten, Fokus, Bewegung */

.px-card { transition: box-shadow .25s ease; }
.px-card:hover { box-shadow: 0 14px 34px rgba(31,42,55,.10); }
a:focus-visible, button:focus-visible, .elementor-button:focus-visible { outline: 3px solid var(--px-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .px-card, .px-card:hover { transition: none; box-shadow: none; }
}

/* Nachtrag: Zitat-Karte stand links — Elementor kennt kein flex_align_self, nur _flex_align_self. */
.e-con > .px-card:has(.px-quote){margin-left:auto;margin-right:auto}