/* ============================================================
   Frontend-Stile des Mitgliederportals

   Bewusst schlank und ohne Rahmenwerk: Die Stile sollen sich in ein
   bestehendes Theme einfuegen, nicht dagegen arbeiten. Farben kommen
   aus CSS-Variablen und lassen sich im Theme ueberschreiben, ohne
   dass hier etwas geaendert werden muss.

   Die Variablen stehen an EINER Stelle und gelten fuer alle Bausteine.
   Vorher hing jeder Baustein seine eigene Kopie an, und der zuletzt
   hinzugekommene Anmeldebaustein hatte gar keine. Folge: `border: 1.5px
   solid var(--phc-linie)` war dort ungueltig, der Rahmen fiel ersatzlos
   weg, und das Eingabefeld stand weiss auf weiss. Gemessen: Kontrast 1.0.

   Deshalb zusaetzlich zu jeder Variablen ein Rueckfallwert direkt im
   Selektor unten, wo es um Lesbarkeit geht. Wer eine neue Variable
   ergaenzt, traegt sie hier ein und nirgends sonst.
   ============================================================ */

:root,
.phc-suche,
.phc-verzeichnis,
.phc-profil,
.phc-profil-editor,
.phc-login,
.phc-treffer,
.phc-vz-eintrag {
  --phc-blau: #194670;
  --phc-blau-hell: #f1f6fb;
  --phc-brombeer: #8e2456;
  --phc-brombeer-dunkel: #7a1f4b;
  --phc-linie: #dce4e3;
  --phc-linie-hell: #edf2f1;

  /*
   * Eigener Wert fuer die Umrandung von Eingabefeldern. Die dekorative
   * Linie #dce4e3 erreicht gegen Weiss nur 1.29 zu 1; WCAG 2.1 verlangt
   * fuer die Begrenzung eines Bedienelements 3 zu 1. #6b7f8c erreicht
   * 4.17 gegen Weiss und 3.88 gegen die helle Flaeche.
   */
  --phc-feldrand: #6b7f8c;
  --phc-text: #12211f;
  --phc-text-leise: #5c6a68;
  --phc-radius: 12px;
}

.phc-profil-editor,
.phc-suche {
  max-width: 46rem;
  color: var(--phc-text, #12211f);
}

.phc-login,
.phc-verzeichnis,
.phc-profil { color: var(--phc-text, #12211f); }

/* ---------- Hinweise ---------- */
.phc-hinweis {
  border-left: 4px solid var(--phc-blau);
  background: var(--phc-blau-hell);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--phc-radius) var(--phc-radius) 0;
  margin: 0 0 1.5rem;
}
.phc-hinweis > :first-child { margin-top: 0; }
.phc-hinweis > :last-child { margin-bottom: 0; }
.phc-hinweis--erfolg { border-left-color: #1e7a4c; background: #eef7f2; }
.phc-hinweis--warnung { border-left-color: var(--phc-brombeer); background: #fcf3f7; }
.phc-hinweis--fehler { border-left-color: #a12020; background: #fdf0f0; }

/* ---------- Abschnitte ---------- */
.phc-fieldset,
.phc-gruppe {
  border: 1px solid var(--phc-linie);
  border-radius: var(--phc-radius);
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem;
}
.phc-fieldset > legend,
.phc-gruppe > legend {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 .5rem;
}

/* ---------- Felder ---------- */
.phc-feld { margin: 0 0 1.1rem; }
.phc-feld > label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .35rem;
}
.phc-feld input[type="text"],
.phc-feld input[type="email"],
.phc-feld input[type="url"],
.phc-feld input[type="tel"],
.phc-feld input[type="number"],
.phc-feld input[type="file"],
.phc-feld textarea {
  width: 100%;
  min-height: 44px;
  padding: .65rem .85rem;
  border: 1.5px solid var(--phc-feldrand, #6b7f8c);
  border-radius: var(--phc-radius, 12px);
  background: #fff;
  color: var(--phc-text, #12211f);
  font: inherit;
}
.phc-feld textarea { min-height: 7rem; resize: vertical; }
.phc-feld input:focus,
.phc-feld select:focus,
.phc-feld textarea:focus { border-color: var(--phc-blau, #194670); }

/* Schalter: Kaestchen und Beschriftung nebeneinander, nicht untereinander */
.phc-feld--schalter {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.phc-feld--schalter > label {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}
.phc-feld--schalter input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
  flex: 0 0 auto;
  accent-color: var(--phc-blau);
}

.phc-hilfe {
  display: block;
  font-size: .85rem;
  color: var(--phc-text-leise);
  margin-top: .35rem;
  line-height: 1.5;
}
.phc-pflicht { color: var(--phc-brombeer); }

.phc-checkboxen {
  display: grid;
  gap: .25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---------- Wiederholbare Gruppen ---------- */
.phc-gruppe__zeile {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding: .75rem 0;
  border-bottom: 1px solid var(--phc-linie-hell);
}
.phc-gruppe__zeile:last-child { border-bottom: 0; }

/* ---------- Galerie ---------- */
.phc-galerie {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.phc-galerie__eintrag {
  border: 1px solid var(--phc-linie);
  border-radius: var(--phc-radius);
  padding: .75rem;
}
.phc-galerie__eintrag img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: .75rem;
  display: block;
}

/* ---------- Schaltflaechen ---------- */
.phc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--phc-blau);
  color: #fff;
}
.phc-btn--primaer { background: var(--phc-brombeer); }
.phc-btn--primaer:hover { background: var(--phc-brombeer-dunkel); }
.phc-btn--rand {
  background: #fff;
  color: var(--phc-blau);
  border-color: var(--phc-linie);
}
.phc-btn--rand:hover { border-color: var(--phc-blau); background: var(--phc-blau-hell); }

.phc-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0 0;
}

.phc-vollstaendigkeit {
  font-size: .92rem;
  color: var(--phc-text-leise);
  margin: 0 0 1.5rem;
}

.phc-datenschutz { font-size: .9rem; }

/* ---------- Sichtbarer Fokus ----------
   Die wichtigste Einzelmassnahme fuer Tastaturbedienung. Viele Themes
   entfernen den Standardfokus, deshalb wird er hier gesetzt. */
.phc-profil-editor :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--phc-brombeer);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .phc-profil-editor * { transition-duration: .01ms !important; }
}

/* ============================================================
   Umkreissuche

   Das Raster ist bewusst mit clamp() und minmax() gebaut statt mit
   Breakpoints: die Suche steht mal in einer schmalen Spalte, mal ueber
   die volle Breite. Feste Umbruchpunkte waeren in einem Elementor-Layout
   immer an der falschen Stelle.
   ============================================================ */

.phc-suche {
  color: var(--phc-text);
}

.phc-suche__formular {
  background: var(--phc-linie-hell);
  border-radius: var(--phc-radius);
  padding: clamp(1rem, 3vw, 1.75rem);
}

.phc-suche__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.phc-suche__zeile .phc-feld--ort { grid-column: span 2; }

@media (max-width: 40rem) {
  .phc-suche__zeile .phc-feld--ort { grid-column: span 1; }
}

.phc-feld label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.phc-feld input[type="text"],
.phc-feld input[type="search"],
.phc-feld select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--phc-feldrand, #6b7f8c);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: var(--phc-text, #12211f);
}

.phc-feld input:focus-visible,
.phc-feld select:focus-visible,
.phc-suche button:focus-visible {
  outline: 3px solid var(--phc-brombeer);
  outline-offset: 2px;
}

/* Schaltflaechen */
.phc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px; /* Zielgroesse nach WCAG 2.2 */
}

.phc-button--primaer {
  background: var(--phc-brombeer);
  color: #fff;
  width: 100%;
}

.phc-button--primaer:hover,
.phc-button--primaer:focus { background: var(--phc-brombeer-dunkel); }

.phc-button--leise {
  background: transparent;
  border-color: var(--phc-blau);
  color: var(--phc-blau);
  padding: 0.5rem 1rem;
}

.phc-suche__standort { margin: 0.9rem 0 0; }

/* Filter */
.phc-suche__filter { margin-top: 1.25rem; }

.phc-suche__filter > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4rem 0;
  color: var(--phc-blau);
}

.phc-suche__filter-inhalt {
  display: grid;
  gap: 1.25rem;
  padding-top: 1rem;
}

.phc-checkliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.4rem 1rem;
}

.phc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.3rem 0;
  line-height: 1.4;
}

.phc-checkbox input { margin-top: 0.2rem; flex: none; }
.phc-checkbox--tiefe-1 { padding-left: 1.25rem; }
.phc-checkbox--tiefe-2 { padding-left: 2.5rem; }

/* Karte */
.phc-karte {
  margin-top: 1.5rem;
  border-radius: var(--phc-radius);
  overflow: hidden;
  border: 1px solid var(--phc-linie);
}

.phc-karte__einwilligung {
  background: var(--phc-blau-hell);
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.phc-karte__einwilligung .phc-button--primaer { width: auto; }
.phc-karte__text { max-width: 46ch; margin: 0 auto 1rem; }

.phc-karte__kleingedrucktes {
  font-size: 0.85rem;
  color: var(--phc-text-leise);
  margin: 0.75rem 0 0;
}

.phc-karte__flaeche { height: 0; }
.phc-karte__flaeche--aktiv { height: clamp(20rem, 55vh, 34rem); }

.phc-popup strong { display: block; margin-bottom: 0.25rem; }
.phc-popup__entfernung { color: var(--phc-text-leise); font-size: 0.9rem; }
.phc-popup__link { display: inline-block; margin-top: 0.5rem; font-weight: 600; }

/* Ergebnisse */
.phc-ergebnisse { margin-top: 1.75rem; }

.phc-ergebnisse__zahl {
  font-weight: 600;
  margin: 0 0 1rem;
}

.phc-trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.phc-treffer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--phc-linie);
  border-radius: var(--phc-radius);
  background: #fff;
}

.phc-treffer:has(> .phc-treffer__inhalt:only-child) { grid-template-columns: 1fr; }

.phc-treffer__logo img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 8px;
}

.phc-treffer__name {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}

.phc-treffer__name a { text-decoration: none; color: var(--phc-blau); }
.phc-treffer__name a:hover { text-decoration: underline; }

.phc-treffer__praxis { margin: 0 0 0.4rem; color: var(--phc-text-leise); }
.phc-treffer__adresse { margin: 0 0 0.4rem; }

.phc-treffer__entfernung {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--phc-brombeer);
}

.phc-treffer__fachgebiete {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
}

.phc-treffer__fachgebiete li {
  background: var(--phc-blau-hell);
  color: var(--phc-blau);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
}

.phc-treffer__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
}

@media (max-width: 30rem) {
  .phc-treffer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .phc-suche * { transition: none !important; animation: none !important; }
}

/* ---------- Vorschau der Geschaeftsstelle ---------- */
.phc-hinweis--vorschau {
  border-left-color: #b8860b;
  background: #fdf8ec;
}

.phc-treffer__zustand {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #fdf8ec;
  border: 1px solid #e0c27a;
  color: #7a5c00;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   Profilseite
   ============================================================ */


.phc-profil__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--phc-linie);
  margin-bottom: 2rem;
}

.phc-profil__bilder {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: none;
}

.phc-profil__portrait img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--phc-radius);
  display: block;
}

.phc-profil__logo img {
  width: 180px;
  max-height: 90px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.phc-profil__kopfdaten { flex: 1 1 20rem; }

.phc-profil__praxis {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.phc-profil__inhaber {
  color: var(--phc-text-leise);
  margin: 0 0 0.75rem;
}

.phc-profil__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.phc-profil__aktionen .phc-button--primaer { width: auto; }

/* Raster */
.phc-profil__raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .phc-profil__raster { grid-template-columns: 1fr; }
}

.phc-profil__block { margin: 0 0 2rem; }
.phc-profil__block > h2 { margin-top: 0; font-size: 1.25rem; }
.phc-profil__block > h3 { font-size: 1rem; margin-bottom: 0.3rem; }

.phc-profil__seite .phc-profil__block {
  background: var(--phc-linie-hell);
  border-radius: var(--phc-radius);
  padding: 1.25rem;
}

.phc-profil__adresse { font-style: normal; margin: 0 0 1rem; }

.phc-profil__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.phc-profil__liste li {
  padding-left: 1rem;
  border-left: 3px solid var(--phc-blau-hell);
}

.phc-profil__liste strong { display: block; }
.phc-profil__liste span { color: var(--phc-text-leise); font-size: 0.95rem; }
.phc-profil__jahr { display: inline-block; }

.phc-profil__daten { margin: 0; }
.phc-profil__daten dt {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--phc-text-leise);
  margin-top: 0.75rem;
}
.phc-profil__daten dt:first-child { margin-top: 0; }
.phc-profil__daten dd { margin: 0.1rem 0 0; }

.phc-profil__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 1rem 0 0;
}

.phc-profil__merkmale {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.phc-profil__merkmale li { padding-left: 1.5rem; position: relative; }
.phc-profil__merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6rem;
  height: 0.3rem;
  border-left: 2px solid var(--phc-brombeer);
  border-bottom: 2px solid var(--phc-brombeer);
  transform: rotate(-45deg);
}

.phc-profil__zeiten { margin: 0 0 1rem; }

/*
   Masonry ueber CSS-Spalten.

   Bewusst nicht ueber grid-template-rows: masonry, das koennen die Browser
   noch nicht verlaesslich, und nicht ueber eine JavaScript-Bibliothek, die
   erst nach dem Laden aller Bilder umsortiert und dabei die Seite springen
   laesst. Spalten koennen das seit Jahren ueberall.

   Entscheidend ist, dass die Bilder ihr eigenes Seitenverhaeltnis behalten:
   Kein aspect-ratio, kein object-fit. Ein hochkant fotografierter
   Behandlungsraum wird sonst oben und unten abgeschnitten, und genau da liegt
   bei einem Praxisfoto meist das Motiv.
*/
.phc-profil__galerie {
  columns: 3 15rem;
  column-gap: 1rem;
}

@media (max-width: 40rem) {
  .phc-profil__galerie { columns: 2 9rem; }
}

.phc-profil__galerie figure {
  margin: 0 0 1rem;
  break-inside: avoid;
  page-break-inside: avoid; /* aeltere WebKit-Fassungen */
}

.phc-profil__galerie img {
  width: 100%;
  height: auto;
  border-radius: var(--phc-radius);
  display: block;
}

/* Lupe beim Ueberfahren, damit erkennbar ist, dass sich das Bild oeffnen laesst. */
.phc-profil__galerie a {
  display: block;
  position: relative;
  border-radius: var(--phc-radius);
  overflow: hidden;
}

.phc-profil__galerie a:focus-visible {
  outline: 3px solid var(--phc-brombeer);
  outline-offset: 3px;
}

.phc-profil__galerie a img { transition: transform 0.25s ease; }
.phc-profil__galerie a:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .phc-profil__galerie a img,
  .phc-profil__galerie a:hover img { transition: none; transform: none; }
}

/* Grossansicht */
.phc-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1400px);
  max-height: 94vh;
}

.phc-lightbox::backdrop { background: rgba(8, 36, 42, 0.88); }

.phc-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--phc-radius);
}

.phc-lightbox__bildunterschrift {
  color: #fff;
  text-align: center;
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.phc-lightbox__schliessen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #08242a;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.phc-karte--klein { margin: 0 0 1rem; }
.phc-karte--klein .phc-karte__flaeche--aktiv { height: 15rem; }
.phc-karte--klein .phc-karte__einwilligung { padding: 1rem; font-size: 0.9rem; }
.phc-karte--klein .phc-karte__text { margin-bottom: 0.75rem; }

.phc-profil__zurueck {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--phc-linie);
}

/* Kompakte Suchmaske: nur Feld und Knopf, keine Ergebnisse */
.phc-suche--kompakt .phc-suche__formular {
  background: transparent;
  padding: 0;
}

/* Einzelbild im Profileditor */
.phc-bild-vorschau img {
  max-width: 220px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.75rem;
}

/* ============================================================
   Nachbesserungen gegen Theme-Vorgaben

   Elementor-Kits setzen Linkfarben global und mit hoher Spezifitaet.
   Ohne die Erhoehung hier steht der Text eines Knopfes in der Themefarbe
   auf der Themefarbe, also unsichtbar. Das ist kein hypothetischer Fall,
   sondern genau das, was auf der Verbandsseite passiert ist.
   ============================================================ */

.phc-profil a.phc-button,
.phc-suche a.phc-button,
.phc-profil .phc-button.phc-button--primaer,
.phc-suche .phc-button.phc-button--primaer,
a.phc-button.phc-button--primaer,
button.phc-button.phc-button--primaer {
  text-decoration: none;
}

.phc-profil .phc-button--primaer,
.phc-suche .phc-button--primaer,
a.phc-button--primaer,
button.phc-button--primaer {
  background-color: var(--phc-brombeer, #8e2456);
  color: #fff;
  border-color: transparent;
}

.phc-profil .phc-button--primaer:hover,
.phc-profil .phc-button--primaer:focus,
.phc-suche .phc-button--primaer:hover,
.phc-suche .phc-button--primaer:focus,
a.phc-button--primaer:hover,
a.phc-button--primaer:focus,
button.phc-button--primaer:hover,
button.phc-button--primaer:focus {
  background-color: var(--phc-brombeer-dunkel, #7a1f4b);
  color: #fff;
}

.phc-profil .phc-button--leise,
.phc-suche .phc-button--leise,
a.phc-button--leise,
button.phc-button--leise {
  background-color: transparent;
  color: var(--phc-blau, #194670);
  border-color: var(--phc-blau, #194670);
}

.phc-profil .phc-button--leise:hover,
.phc-profil .phc-button--leise:focus,
.phc-suche .phc-button--leise:hover,
.phc-suche .phc-button--leise:focus,
a.phc-button--leise:hover,
a.phc-button--leise:focus {
  background-color: var(--phc-blau, #194670);
  color: #fff;
}

/*
   Eigener Container. Ohne Elementor-Theme-Vorlage liefert das Theme fuer den
   Inhaltstyp keinen begrenzten Bereich, der Inhalt klebt sonst am Fensterrand.
   Steht doch ein Container drumherum, greift die kleinere Breite, und die
   Begrenzung faellt nicht auf.
*/
.phc-profil {
  max-width: 1140px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.phc-profil__titel {
  margin: 0 0 0.3rem;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
}

/* ============================================================
   Mitgliederverzeichnis

   Zwei Darstellungen aus einem Markup: Kacheln und Liste. Der Unterschied
   steckt allein im Raster der Eintraege, nicht in zwei getrennten Vorlagen.
   Was in beiden Ansichten gleich aussieht, ist damit auch nur einmal
   beschrieben.
   ============================================================ */


.phc-verzeichnis__filter {
  background: var(--phc-linie-hell);
  border-radius: var(--phc-radius);
  padding: clamp(1rem, 3vw, 1.75rem);
}

.phc-verzeichnis__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.phc-verzeichnis__zeile .phc-feld--ort { grid-column: span 2; }

@media (max-width: 40rem) {
  .phc-verzeichnis__zeile .phc-feld--ort { grid-column: span 1; }
}

.phc-anzahl {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--phc-linie);
  font-size: 0.75rem;
  color: var(--phc-text-leise);
}

/* Buchstabenband */
.phc-buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 1.25rem 0 0;
}

.phc-buchstaben__eintrag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--phc-linie);
  background: #fff;
  color: var(--phc-blau);
  text-decoration: none;
  font-weight: 600;
}

.phc-buchstaben__eintrag:hover,
.phc-buchstaben__eintrag:focus { border-color: var(--phc-blau); }

.phc-buchstaben__eintrag--aktiv {
  background: var(--phc-blau);
  border-color: var(--phc-blau);
  color: #fff;
}

/* Kopfzeile mit Zahl und Umschalter */
.phc-verzeichnis__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 1.75rem 0 1rem;
}

.phc-verzeichnis__kopf .phc-ergebnisse__zahl { margin: 0; }

.phc-verzeichnis__zuruecksetzen {
  margin-left: 0.75rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.phc-verzeichnis__ansicht {
  display: inline-flex;
  border: 1px solid var(--phc-linie);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.phc-verzeichnis__schalter {
  padding: 0.5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--phc-blau);
  font-weight: 600;
  font-size: 0.9rem;
}

.phc-verzeichnis__schalter--aktiv {
  background: var(--phc-blau);
  color: #fff;
}

/* Eintraege */
.phc-verzeichnis__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phc-verzeichnis__liste--kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.phc-verzeichnis__liste--liste {
  display: grid;
  gap: 0.6rem;
}

.phc-vz-eintrag {
  background: #fff;
  border: 1px solid var(--phc-linie);
  border-radius: var(--phc-radius);
  padding: 1.15rem;
}

.phc-vz-eintrag--kacheln {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.phc-vz-eintrag--liste {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 1.15rem;
  align-items: center;
}

@media (max-width: 46rem) {
  .phc-vz-eintrag--liste {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .phc-vz-eintrag--liste .phc-vz-eintrag__kontakt {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
}

.phc-vz-eintrag__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.phc-vz-eintrag--kacheln .phc-vz-eintrag__bild img {
  max-height: 110px;
  object-fit: contain;
  object-position: left center;
}

.phc-vz-eintrag--liste .phc-vz-eintrag__bild img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.phc-vz-eintrag--kacheln .phc-vz-eintrag--liste .phc-vz-eintrag__inhalt { min-width: 0; }

.phc-vz-eintrag__name {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.phc-vz-eintrag__name a { text-decoration: none; color: var(--phc-blau); }
.phc-vz-eintrag__name a:hover { text-decoration: underline; }

.phc-vz-eintrag__praxis {
  margin: 0 0 0.3rem;
  color: var(--phc-text-leise);
  font-size: 0.92rem;
}

.phc-vz-eintrag__adresse { margin: 0 0 0.6rem; font-size: 0.95rem; }

.phc-vz-eintrag__kontakt {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  font-size: 0.92rem;
}

.phc-vz-eintrag--liste .phc-vz-eintrag__kontakt {
  align-items: flex-end;
  text-align: right;
}

.phc-vz-eintrag--kacheln .phc-vz-eintrag__kontakt { margin-top: auto; }

.phc-vz-eintrag__mehr { padding: 0.5rem 1rem; font-size: 0.9rem; }
.phc-treffer__mehr { background: transparent !important; border: 1px dashed var(--phc-linie); }

/* Blaettern */
.phc-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.phc-blaettern__stand { color: var(--phc-text-leise); }

/* ============================================================
   Platzhalter fuer fehlende Profilbilder

   Eingebettetes SVG statt eines geladenen Bildes: kostet keine einzige
   zusaetzliche Anfrage, auch nicht bei hundert Eintraegen in einer Liste,
   und skaliert verlustfrei.
   ============================================================ */

.phc-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--phc-blau-hell, #f1f6fb);
  color: #b3c6d8;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.phc-platzhalter__figur {
  width: 78%;
  height: 78%;
  display: block;
}

.phc-platzhalter--initialen {
  color: var(--phc-blau, #194670);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
}

/* Gross auf der Profilseite */
.phc-platzhalter--gross {
  width: 180px;
  height: 180px;
  border-radius: var(--phc-radius, 12px);
  font-size: 2.4rem;
}

/* Im Verzeichnis */
.phc-vz-eintrag--kacheln .phc-platzhalter {
  aspect-ratio: auto;
  height: 72px;
  border-radius: 8px;
}

.phc-vz-eintrag--kacheln .phc-platzhalter__figur { width: auto; height: 100%; }

.phc-vz-eintrag--liste .phc-platzhalter {
  width: 64px;
  height: 64px;
  font-size: 1.05rem;
}

/* In der Trefferliste der Umkreissuche */
.phc-treffer__logo .phc-platzhalter {
  width: 84px;
  height: 84px;
  font-size: 1.15rem;
}

/*
   Bei einem Farbschema mit dunklem Grund waere ein sehr helles Grau
   unsichtbar, deshalb wird die Figur dort etwas kraeftiger.
*/
@media (prefers-color-scheme: dark) {
  .phc-platzhalter { color: #7f97ad; }
}

/* ============================================================
   Eigener Container fuer Suche und Verzeichnis

   Gemessen auf der Verbandsseite: Beide Bausteine haengen dort im
   Wurzelelement von Elementor. Ohne eigene Begrenzung laeuft der Inhalt
   ueber die volle Fensterbreite und klebt am Rand.

   1140px entspricht der Standardbreite eines Elementor-Containers und damit
   der Breite von Kopf- und Fusszeile. Liegt der Baustein doch in einem
   Container, greift die jeweils kleinere Breite und die Regel faellt nicht
   auf.
   ============================================================ */

.phc-verzeichnis,
.phc-suche:not(.phc-suche--kompakt) {
  max-width: 1140px;
  margin-inline: auto;
  box-sizing: border-box;
}

.phc-verzeichnis *,
.phc-suche *,
.phc-profil * { box-sizing: border-box; }

/*
   Innenabstand nur, wenn das Fenster breiter ist als die Begrenzung nicht
   traegt. Innerhalb eines Containers hat dieser bereits Abstand, doppelt
   waere er zu viel; ohne Container klebt der Inhalt sonst am Rand.
*/
@media (max-width: 1200px) {
  .phc-verzeichnis,
  .phc-suche:not(.phc-suche--kompakt) {
    padding-inline: clamp(1rem, 4vw, 2rem);
  }
}

/* ------------------------------------------------------------
   Ausgleich fuer Seiten ohne Elementor-Container

   Auf /physio-hp-suche/ liegen saemtliche Widgets nackt im Wurzelelement
   von Elementor, ohne Container dazwischen. Ueberschrift und Text kleben
   dadurch am Fensterrand, waehrend Kopf- und Fusszeile eingerueckt sind.
   Der Baustein saehe dann als einziges Element zentriert aus, was schlimmer
   wirkt als der gemeinsame Fehler.

   Die Regel greift ausschliesslich in genau diesem Fall: ein
   Elementor-Wurzelelement, das kein einziges Container-Element enthaelt.
   Auf einer richtig aufgebauten Seite trifft sie nie zu. Sie ersetzt keine
   Reparatur des Seitenaufbaus, macht die Seite aber ansehnlich, bis sie
   erfolgt ist.
   ------------------------------------------------------------ */

.elementor:not(:has(.e-con)):not(:has(.elementor-container)):not(:has(.elementor-section)) > .elementor-element,
.elementor:not(:has(.e-con)):not(:has(.elementor-container)):not(:has(.elementor-section)) > .phc-verzeichnis,
.elementor:not(:has(.e-con)):not(:has(.elementor-container)):not(:has(.elementor-section)) > .phc-suche {
  max-width: 1140px;
  margin-inline: auto;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .elementor:not(:has(.e-con)):not(:has(.elementor-container)):not(:has(.elementor-section)) > .elementor-element {
    padding-inline: clamp(1rem, 4vw, 2rem);
  }
}

/*
   Der Absendeknopf soll nicht die ganze Rasterspalte fuellen. In der
   Umkreissuche steht er allein in einer schmalen Spalte, im Verzeichnis
   neben zwei breiten Feldern, und dort wirkt ein Knopf ueber die volle
   Breite wie ein Fehler.
*/
.phc-verzeichnis .phc-feld--absenden .phc-button--primaer {
  width: auto;
  justify-self: start;
}

/* Nichts darf ueber den rechten Rand hinauslaufen. */
.phc-verzeichnis__kopf { max-width: 100%; }
.phc-verzeichnis__ansicht { flex: none; }

.phc-verzeichnis .phc-hinweis,
.phc-verzeichnis .phc-hinweis--vorschau { border-radius: 0 var(--phc-radius) var(--phc-radius) 0; }


/* ---------- Anmeldung ---------- */

/*
 * Schmaler als der Rest: Ein Anmeldeformular über die volle Breite einer
 * 1140er Seite sieht verloren aus, und lange Eingabefelder für ein Passwort
 * helfen niemandem.
 */
.phc-login {
  max-width: 30rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.phc-login__formular,
.phc-login__angemeldet {
  border: 1px solid var(--phc-linie);
  border-radius: var(--phc-radius);
  background: var(--phc-flaeche);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.phc-login__titel {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.phc-login__vorspann {
  margin: 0 0 1.25rem;
  color: var(--phc-text-leise, inherit);
}

.phc-login .phc-feld { margin-bottom: 1.15rem; }

.phc-login .phc-feld input[type="text"],
.phc-login .phc-feld input[type="password"] { width: 100%; }

.phc-feld__hinweis {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.phc-login .phc-feld--merken { margin-bottom: 1.5rem; }

.phc-login .phc-feld--absenden { margin-bottom: 0; }

.phc-login .phc-feld--absenden .phc-button--primaer { width: 100%; }

.phc-login__wechsel {
  margin: 1.25rem 0 0;
  text-align: center;
}

.phc-login__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

/* Auf schmalen Geräten stehen die beiden Knöpfe untereinander. */
@media (max-width: 30rem) {
  .phc-login__aktionen .phc-button { flex: 1 1 100%; text-align: center; }
}


/* ============================================================
   Lesbarkeit gegen fremde Themes
   ============================================================

   Elementor setzt seine Linkfarbe als `.elementor-kit-88 a`. Das ist eine
   Klasse plus ein Element, also spezifischer als eine einzelne Klasse von uns.
   Gemessen auf der Verbandsseite: Der aktive Buchstabe stand in Brombeer
   #8E2456 auf blauem Grund #194670, Kontrast 1.18 zu 1. Gefordert sind 4.5.
   Das ist nicht "etwas dunkel", das ist unlesbar.

   Deshalb steht hier jeder Fall, in dem ein Element eine eigene Hintergrund-
   farbe mitbringt, noch einmal mit zwei Klassen im Selektor. Kein !important:
   Wer im Child-Theme bewusst etwas anderes will, soll das weiterhin können.

   Wer hier etwas ergänzt, laesst danach `node tests/kontrast/check.js` laufen.
   ============================================================ */

/* Buchstabenfilter */
.phc-verzeichnis a.phc-buchstaben__eintrag,
.phc-buchstaben a.phc-buchstaben__eintrag {
  color: var(--phc-blau, #194670);
}

.phc-verzeichnis a.phc-buchstaben__eintrag--aktiv,
.phc-buchstaben a.phc-buchstaben__eintrag--aktiv {
  color: #fff;
}

/* Umschalter Kacheln/Liste */
.phc-verzeichnis a.phc-verzeichnis__schalter {
  color: var(--phc-blau, #194670);
}

.phc-verzeichnis a.phc-verzeichnis__schalter--aktiv {
  color: #fff;
}

/* Knöpfe auf farbigem Grund, unabhaengig vom Baustein */
.phc-verzeichnis a.phc-button--primaer,
.phc-login a.phc-button--primaer,
.phc-treffer a.phc-button--primaer,
.phc-vz-eintrag a.phc-button--primaer {
  color: #fff;
}

/* Leise Knöpfe: heller Grund, dunkle Schrift, erst im Hover invertiert */
.phc-verzeichnis a.phc-button--leise,
.phc-login a.phc-button--leise,
.phc-treffer a.phc-button--leise,
.phc-vz-eintrag a.phc-button--leise {
  color: var(--phc-blau, #194670);
}

.phc-verzeichnis a.phc-button--leise:hover,
.phc-verzeichnis a.phc-button--leise:focus,
.phc-login a.phc-button--leise:hover,
.phc-login a.phc-button--leise:focus,
.phc-treffer a.phc-button--leise:hover,
.phc-treffer a.phc-button--leise:focus,
.phc-vz-eintrag a.phc-button--leise:hover,
.phc-vz-eintrag a.phc-button--leise:focus {
  color: #fff;
}

/* Bildunterschrift in der Lightbox steht auf fast schwarzem Grund */
.phc-lightbox p.phc-lightbox__bildunterschrift { color: #fff; }

/*
 * Textlinks in den Bausteinen: Brombeer auf Weiss ergibt 7.4 zu 1 und ist in
 * Ordnung. Festgeschrieben wird es trotzdem, damit ein Theme mit heller
 * Linkfarbe die Eintraege nicht unlesbar macht.
 */
.phc-vz-eintrag__name a,
.phc-treffer__name a,
.phc-vz-eintrag__kontakt a,
.phc-treffer__kontakt a,
.phc-login__wechsel a {
  color: var(--phc-brombeer, #8e2456);
}


/* ============================================================
   Eingabefelder sichtbar halten
   ============================================================

   Gemessen auf der Verbandsseite: Das Feld im Anmeldebaustein hatte
   `border-style: none` und stand weiss auf weiss, Kontrast 1.0. Ursache war
   nicht das Theme, sondern eine nicht aufgeloeste Variable: `--phc-linie` war
   nur auf einzelnen Bausteinen definiert, nicht auf `.phc-login`. Damit war
   die ganze border-Deklaration ungueltig und fiel ersatzlos weg.

   Zwei Konsequenzen: Die Variablen stehen jetzt oben an einer Stelle, und jede
   Regel, an der die Bedienbarkeit haengt, bringt ihren eigenen Rueckfallwert
   mit. Faellt eine Variable wieder aus, wird es hoechstens haesslich, aber
   nicht unbenutzbar.
   ============================================================ */

.phc-login .phc-feld input[type="text"],
.phc-login .phc-feld input[type="password"],
.phc-login .phc-feld input[type="email"],
.phc-verzeichnis .phc-feld input[type="text"],
.phc-verzeichnis .phc-feld input[type="search"],
.phc-verzeichnis .phc-feld select,
.phc-suche .phc-feld input[type="text"],
.phc-suche .phc-feld input[type="search"],
.phc-suche .phc-feld select,
.phc-profil-editor .phc-feld input,
.phc-profil-editor .phc-feld select,
.phc-profil-editor .phc-feld textarea {
  border: 1.5px solid var(--phc-feldrand, #6b7f8c);
  border-radius: var(--phc-radius, 12px);
  background: #fff;
  color: var(--phc-text, #12211f);
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}

.phc-profil-editor .phc-feld textarea { min-height: 7rem; }

/* Im Fokus deutlich mehr als nur eine Farbaenderung. */
.phc-login .phc-feld input:focus,
.phc-verzeichnis .phc-feld input:focus,
.phc-verzeichnis .phc-feld select:focus,
.phc-suche .phc-feld input:focus,
.phc-suche .phc-feld select:focus,
.phc-profil-editor .phc-feld input:focus,
.phc-profil-editor .phc-feld select:focus,
.phc-profil-editor .phc-feld textarea:focus {
  border-color: var(--phc-blau, #194670);
  box-shadow: 0 0 0 3px rgba(25, 70, 112, 0.18);
  outline: none;
}

/* Tastaturbedienung bleibt sichtbar, auch wo box-shadow untergeht. */
.phc-login :where(input, select, textarea, button, a):focus-visible,
.phc-verzeichnis :where(input, select, textarea, button, a):focus-visible,
.phc-suche :where(input, select, textarea, button, a):focus-visible {
  outline: 3px solid var(--phc-brombeer, #8e2456);
  outline-offset: 2px;
}

/* Kontrollkaestchen brauchen ebenfalls einen sichtbaren Rand. */
.phc-login input[type="checkbox"],
.phc-verzeichnis input[type="checkbox"],
.phc-suche input[type="checkbox"],
.phc-profil-editor input[type="checkbox"] {
  accent-color: var(--phc-blau, #194670);
  width: 1.15rem;
  height: 1.15rem;
}


/* ============================================================
   Profil-Editor: Oberflaeche fuer Nicht-Fachleute
   ============================================================

   Die Mitglieder sind Therapeutinnen und Therapeuten. Ein Formular mit dreissig
   Feldern und ohne ein Wort dazu wird halb ausgefuellt liegen gelassen. Also:
   Abschnitte als abgesetzte Karten, ueber jeder ein Satz wozu, unter jedem Feld
   ein Hinweis, und wo mehr zu sagen ist ein Marker zum Aufklappen.
   ============================================================ */

.phc-profil-editor {
  max-width: 46rem;
  margin-inline: auto;
}

/* ---------- Fortschritt ---------- */

.phc-fortschritt {
  background: var(--phc-blau-hell, #f1f6fb);
  border-radius: var(--phc-radius, 12px);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}

.phc-fortschritt__text {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.phc-fortschritt__rat {
  display: block;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--phc-text-leise, #5c6a68);
  margin-top: 0.25rem;
}

.phc-fortschritt__balken {
  height: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--phc-feldrand, #6b7f8c);
  overflow: hidden;
}

.phc-fortschritt__fuellung {
  display: block;
  height: 100%;
  background: var(--phc-blau, #194670);
  transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .phc-fortschritt__fuellung { transition: none; }
}

/* ---------- Abschnitte ---------- */

.phc-profil-editor .phc-abschnitt {
  border: 1px solid var(--phc-linie, #dce4e3);
  border-radius: var(--phc-radius, 12px);
  padding: 1.25rem 1.35rem 1rem;
  margin: 0 0 1.5rem;
  background: #fff;
}

.phc-profil-editor .phc-abschnitt > legend {
  font-size: 1.2rem;
  font-weight: 700;
  padding-inline: 0.4rem;
  color: var(--phc-blau, #194670);
}

.phc-abschnitt__erklaerung {
  margin: 0 0 1.25rem;
  color: var(--phc-text-leise, #5c6a68);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- Hinweise und Marker ---------- */

.phc-hilfe {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--phc-text-leise, #5c6a68);
}

.phc-info {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.phc-info > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--phc-blau, #194670);
  font-weight: 600;
  padding: 0.35rem 0;
  min-height: 44px;
  list-style: none;
}

.phc-info > summary::-webkit-details-marker { display: none; }

.phc-info__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 999px;
  background: var(--phc-blau, #194670);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.phc-info__inhalt,
.phc-info > p {
  margin: 0.25rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--phc-blau-hell, #f1f6fb);
  border-radius: var(--phc-radius, 12px);
  line-height: 1.6;
}

.phc-info__inhalt > p { margin: 0 0 0.7rem; }
.phc-info__inhalt > p:last-child { margin-bottom: 0; }

.phc-info--gross {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

/* ---------- Bilder ---------- */

.phc-bild-vorgabe {
  margin: 0 0 0.5rem;
  line-height: 1.55;
  font-size: 0.95rem;
}

.phc-gruppe--bild .phc-bild-vorschau img,
.phc-gruppe--galerie img {
  border-radius: var(--phc-radius, 12px);
  border: 1px solid var(--phc-linie, #dce4e3);
}

.phc-profil-editor input[type="file"] {
  padding: 0.55rem;
  background: #fff;
}

/* ---------- Pflichtangaben und Aktionen ---------- */

.phc-pflicht {
  color: var(--phc-brombeer, #8e2456);
  font-weight: 700;
  margin-left: 0.15rem;
}

.phc-profil-editor .phc-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 1rem 0;
  border-top: 1px solid var(--phc-linie, #dce4e3);
  margin-top: 1.5rem;
}

@media (max-width: 30rem) {
  .phc-profil-editor .phc-aktionen .phc-btn { flex: 1 1 100%; text-align: center; }
}