/* Update 96 Teil B (Plan data/plaene/UPDATE-96-ABSAGE-UND-LOESCHEN.md): Kunden-Zugang und persönlicher Bereich. Ruhig, Inhalt zuerst, eine Knopfleiste.
   .u96-loesung   bis 100 km niemand: positiver Satz je Marke, «Ich habe Personalbedarf» und «Stelleninserat über uns erstellen, kostenlos und unverbindlich»
   .u96-mehr      Inserat über uns: weitere Angaben freiwillig (aufklappbar)
   .u96-erlaubnis Haken zur Veröffentlichung ohne Firmennamen
   .u96-umkreis   Umkreis der offenen Stellen im persönlichen Bereich (25, 50, 100 km) */
.u96-loesung .leer p { max-width: 520px; }
.u96-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 560px; }
.u96-knoepfe .knopf { flex: 1 1 240px; min-width: 0; white-space: normal; padding-top: 10px; padding-bottom: 10px; }
.u96-knoepfe .knopf svg.i { flex: none; }

.u96-mehr { border: 1px solid var(--line); border-radius: 12px; background: var(--flaeche); }
.u96-mehr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-weight: 700; }
.u96-mehr > summary::-webkit-details-marker { display: none; }
.u96-mehr > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.u96-mehr[open] > summary::after { transform: rotate(225deg); }
.u96-mehr > summary .frei { font-weight: 400; }
.u96-mehr-inhalt { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 14px; }
.u96-mehr-inhalt .p-klein { margin: 0; }

.u96-erlaubnis { align-items: flex-start; line-height: 1.45; }
.u96-erlaubnis span { min-width: 0; overflow-wrap: anywhere; }

.u96-umkreis { margin: 4px 0 2px; }
.u96-umkreis button { min-height: 36px; }

@media (max-width: 767.98px) {
  /* Handy: Umkreis 25, 50 und 100 km in einer Reihe; 10 und 15 km nur, wenn gewählt (am Computer alle fünf) */
  .p-filter .p-seg button[data-umkreis="10"]:not([aria-pressed="true"]), .p-filter .p-seg button[data-umkreis="15"]:not([aria-pressed="true"]) { display: none; }
  .u96-knoepfe { flex-direction: column; }
  .u96-knoepfe .knopf { flex: 0 0 auto; width: 100%; }
}