/* =============================================================================
   sh_intranet – central stylesheet
   -----------------------------------------------------------------------------
   All front-end CSS for the intranet extension lives here (previously scattered
   as inline <style> blocks across the templates). Loaded once per page via
   <f:asset.css identifier="sh-intranet" href="EXT:sh_intranet/Resources/Public/Css/intranet.css" />
   (the AssetCollector de-duplicates, so it is safe to include from several
   templates/partials).

   NOTE: the e-mail templates (Layouts/Email/*) keep their own inline styles –
   mail clients do not load external stylesheets, so that CSS must stay inline.

   Sections:
     1. Kontaktdaten list ............ .khd
     2. Organisationen list .......... .sh-contacts
     3. Login ........................ .intranet-login / .login-*
     4. Edit forms – shared base ..... .sh-edit
     5. Contact edit form ............ .sh-edit--contact
     6. Organisation edit form ....... .sh-edit--org
   ============================================================================= */


/* =============================================================================
   1. Kontaktdaten list (.khd)
   ============================================================================= */
.khd { padding: 3rem 0 5rem; }
.khd__inner { max-width: 84rem; margin: 0 auto; padding: 0 1.5rem; }
.khd__title { text-align: center; font-size: 42px; line-height: 1.2; margin: 0 0 0.4rem; font-weight: 400; }
.khd__scope { text-align: center; font-size: 16px; opacity: .6; margin: 0 0 1rem; }

.khd .khd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* layout: viewers get a single full-width column; admins get
   [filter sidebar | contacts] (search + export above the contacts column). */
.khd__layout {
    display: grid; grid-template-columns: 1fr;
    column-gap: 2.5rem; row-gap: 2.25rem; align-items: start;
    margin-top: 2.5rem;
}
.khd__layout--filtered { grid-template-columns: 230px 1fr; }
@media (max-width: 800px) {
    .khd__layout--filtered { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .khd__topspacer { display: none; }
}

/* search (spans the contacts column) */
.khd__search { position: relative; }
.khd__searchicon { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: .75; pointer-events: none; }
.khd__searchinput {
    width: 100%; border: 0; border-bottom: 1px solid var(--color-black);
    background: transparent; padding: 0.7rem 0.5rem 0.7rem 2.4rem;
    font-size: 18px; font-family: inherit; outline: none;
}
.khd__searchinput::placeholder { opacity: .45; }

/* export */
.khd__exportrow { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem 1.1rem; margin-top: 1.1rem; }
.khd__exportlabel { font-size: 14px; opacity: .55; margin-right: .1rem; }
.khd__export { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-size: 15px; }
.khd__export svg { width: 18px; height: 18px; }
.khd__export:hover { text-decoration: underline; text-underline-offset: 3px; }

/* bottom actions – left-aligned pill buttons (text + arrow), consistent across pages */
.khd__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.25rem; margin-top: 3.5rem; }
/* admins have the 200px filter column – start the buttons where the table starts */
.khd__actions--offset { padding-left: calc(230px + 2.5rem); }
@media (max-width: 800px) { .khd__actions--offset { padding-left: 0; } }
.khd__actions .arrow-link { background: #EAE3D4; border: 0; border-radius: 999px; padding: .8rem 1.7rem; transition: background .15s ease; }
.khd__actions .arrow-link:hover { background: #c5beaf; }

/* filters */
.khd__filterhead { font-size: 15px; opacity: .55; margin: 0 0 1rem; display: flex; align-items: center; }
/* active-filter count badges (rose circle with a number) */
.khd__filterreset { order: -1; font-size: 13px; color: var(--color-red); text-decoration: underline; text-underline-offset: 3px; margin-right: .75rem; cursor: pointer; opacity: .85; }
.khd__filterreset:hover { opacity: 1; }
.khd__filterreset[hidden] { display: none; }
.khd__filtercount, .khd-acc__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--color-rose); color: var(--color-black);
    font-size: 12px; font-weight: 500; line-height: 1; margin-left: 6px; flex-shrink: 0;
}
.khd__filtercount[hidden], .khd-acc__count[hidden] { display: none; }
.khd-acc { border-top: 1px solid rgba(30,30,30,.14); }
.khd-acc__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; background: none; border: 0; cursor: pointer; padding: .8rem 0;
    font-family: inherit; font-size: 14px; text-align: left; color: inherit;
}
/* keep the label + count badge on one line */
.khd-acc__head > span:first-child { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.khd-acc__chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; margin-right: 2px; }
.khd-acc.is-open .khd-acc__chev { transform: rotate(-135deg); }
.khd-acc__body { display: none; padding: 0 0 .8rem; }
.khd-acc.is-open .khd-acc__body { display: block; }
.khd-acc__group { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .5; margin: .2rem 0 .3rem; }

.khd-check, .khd-toggle { display: flex; align-items: center; gap: .65rem; padding: .32rem 0; font-size: 15px; cursor: pointer; line-height: 1.35; }
.khd-toggle { border-top: 1px solid rgba(30,30,30,.14); padding: .8rem 0; font-size: 16px; }

/* all filter checkboxes rendered as toggle switches (green = on, grey = off).
   knob drawn via background-image so it also renders in Firefox */
.khd input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    width: 40px; height: 24px; min-width: 40px; border-radius: 999px; padding: 0; margin: 0;
    flex: 0 0 auto; vertical-align: middle; cursor: pointer;
    background-color: #ccc;
    background-image: radial-gradient(circle 10px, #fff 99%, rgba(0,0,0,0) 100%);
    background-size: 24px 24px; background-position: 0 center; background-repeat: no-repeat;
    transition: background-color .3s, background-position .3s;
}
.khd input[type="checkbox"]:checked { background-color: var(--color-rose); background-position: 100% center; }

/* table */
.khd-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.khd-table th {
    text-align: left; font-size: 14px; font-weight: 400; opacity: .75;
    padding: 0 1rem .7rem; border-bottom: 1px solid var(--color-black); white-space: nowrap;
}
.khd-table__sortable { cursor: pointer; user-select: none; }
.khd-table__caret { opacity: .3; font-size: 11px; margin-left: 3px; }
.khd-table__caret.is-active { opacity: 1; }
.khd-table__actionshead { width: 124px; }
.khd-table td {
    padding: .75rem 1rem; font-size: 15px; vertical-align: middle;
    border-bottom: 1px solid rgba(30,30,30,.1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.khd-cell-name { width: 24%; }
.khd-cell-titel { width: 28%; }
.khd-cell-email { width: 24%; }
.khd-cell-org  { width: 18%; }
.khd-table a { text-decoration: none; color: inherit; }
.khd-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.khd-muted { opacity: .3; }

/* flex on an inner div, NOT on the <td> (Safari ignores flex on table cells) */
.khd-namewrap { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.khd-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--color-beige); font-size: 13px;
}
.khd-badge__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.khd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* deactivated rows */
.khd-table tr.is-off .khd-cell-name,
.khd-table tr.is-off .khd-cell-titel,
.khd-table tr.is-off .khd-cell-email,
.khd-table tr.is-off .khd-cell-org { opacity: .38; }
.khd-table tr.is-off .khd-name { text-decoration: line-through; }

/* row action icons */
.khd-table td.khd-cell-actions { text-align: right; overflow: visible; padding-left: .25rem; padding-right: .25rem; }
.khd-actions { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.khd-icoform { margin: 0; display: inline-flex; }
.khd-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
    color: inherit; opacity: .6; border-radius: 50%; transition: opacity .15s, background .15s; padding: 0;
}
.khd-ico svg { width: 19px; height: 19px; }
.khd-ico:hover { opacity: 1; background: rgba(30,30,30,.06); }
.khd-ico.is-off { opacity: 1; }
.khd-ico--danger:hover { color: var(--color-red, #b00020); }

/* pager */
.khd-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; font-size: 15px; }
.khd-pager__jump select { font-family: inherit; font-size: 15px; border: 0; border-bottom: 1px solid rgba(30,30,30,.3); background: transparent; padding: 2px 4px; cursor: pointer; }
.khd-pager__nav { display: inline-flex; align-items: center; gap: .35rem; }
.khd-pager__num, .khd-pager__arrow {
    min-width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 15px; color: inherit; opacity: .7; border-radius: 4px;
}
.khd-pager__num:hover, .khd-pager__arrow:hover { opacity: 1; background: rgba(30,30,30,.06); }
.khd-pager__num.is-current { opacity: 1; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.khd-pager__ellipsis { opacity: .5; padding: 0 .1rem; }
.khd-pager__count { opacity: .6; }

.khd-empty { text-align: center; font-size: 17px; opacity: .6; padding: 3rem 0; }

.khd.is-loading .khd__results { opacity: .5; transition: opacity .15s; pointer-events: none; }


/* =============================================================================
   2. Organisationen list ("Firmen verwalten", .sh-contacts)
   ============================================================================= */
.sh-contacts { padding: 3rem 0 2rem 5rem; }
.sh-contacts__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.sh-contacts__title { text-align: center; font-size: 42px; line-height: 1.2; margin-bottom: 1rem; }
.sh-contacts__search { position: relative; margin-bottom: 1.5rem; }
.sh-contacts__searchicon { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: .75; pointer-events: none; }
.sh-contacts__searchinput { width: 100%; border: 0; border-bottom: 1px solid var(--color-black); background: transparent; padding: .7rem .5rem .7rem 2.4rem; font-size: 18px; font-family: inherit; outline: none; }
.sh-contacts__searchinput::placeholder { opacity: .45; }
.sh-contacts__searchinfo { font-size: 15px; opacity: .6; margin: 0 0 1rem; }
.sh-contacts__searchinfo a { text-decoration: underline; text-underline-offset: 3px; }
.sh-contacts__empty { text-align: center; font-size: 17px; opacity: .6; padding: 2.5rem 0; }
.sh-contacts__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.25rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(30,30,30,.14); }
.sh-contacts__actions .arrow-link { background: #EAE3D4; border: 0; border-radius: 999px; padding: .8rem 1.7rem; transition: background .15s ease; }
.sh-contacts__actions .arrow-link:hover { background: #d1cabb; }
.sh-contacts__table { width: 100%; border-collapse: collapse; }
.sh-contacts__table th { text-align: left; font-size: 14px; font-weight: 400; padding: 0 1rem 0.75rem; border-bottom: 1px solid var(--color-black); }
.sh-contacts__table td { padding: 0.9rem 1rem; font-size: 16px; border-bottom: 1px solid rgba(30,30,30,.12); vertical-align: middle; }
.sh-contacts__statuscol { width: 70px; white-space: nowrap; }
.sh-status { font-size: 14px; }
.sh-status--mitg { color: var(--color-black); font-weight: 500; }
.sh-status--sub { color: rgba(30,30,30,.5); }
.sh-contacts__table a { text-decoration: none; }
.sh-contacts__table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-contacts__editcell { text-align: right; }
.sh-actions { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.sh-icoform { margin: 0; display: inline-flex; }
.sh-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none; cursor: pointer; color: inherit; opacity: .55; border-radius: 50%; padding: 0; text-decoration: none; }
.sh-ico svg { width: 19px; height: 19px; }
.sh-ico:hover { opacity: 1; background: rgba(30,30,30,.06); }
.sh-ico.is-off { opacity: 1; }
.sh-ico--danger:hover { color: var(--color-red, #b00020); }
.sh-contacts__table tr.is-off td:not(.sh-contacts__editcell) { opacity: .4; }
.sh-contacts__table tr.is-off td:first-child { text-decoration: line-through; }
.sh-contacts__pager { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; font-size: 16px; }
.sh-contacts__pagerlink { text-decoration: none; }
.sh-contacts__pagerlink.is-disabled { opacity: .3; pointer-events: none; }
.sh-contacts__pagerinfo { opacity: .6; }
.sh-contacts.is-loading #sh-orgs-results { opacity: .5; transition: opacity .15s; pointer-events: none; }


/* =============================================================================
   3. Login (.intranet-login / .login-*)
   ============================================================================= */
/* ---- split layout ---- */
.intranet-login { display: flex; flex-direction: column; min-height: 100svh; }
.intranet-login__media {
    min-height: 42svh;
    background: url('/fileadmin/user_upload/intranet/login-container.jpg') center / cover no-repeat;
}
.intranet-login__panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: var(--color-rose);
    padding: 5rem 1.5rem 2rem;
}
.intranet-login__inner { width: 100%; max-width: 32rem; }
.intranet-login__lead { font-size: 26px; line-height: 1.4; }
@media (min-width: 768px) {
    .intranet-login { flex-direction: row; }
    .intranet-login__media { width: 50%; min-height: 100svh; }
    .intranet-login__panel { width: 50%; padding: 4rem; }
}

/* ---- nav overlays the split (transparent, on top) ----
     Only the site nav header, NOT content-element <header>s (those live
     inside .frame) and NOT the sticky header. */
body:has(.intranet-login) header:not(#sticky-header):not(:where(.frame *)) {
    position: absolute; top: 0; left: 0; width: 100%; z-index: 40; background: transparent;
}

/* ---- CSS-only tabs ---- */
.login-tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.login-tabs__row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.login-tab {
    display: inline-flex; align-items: center;
    border: 1px solid var(--color-black); border-radius: 9999px;
    padding: 0.7rem 1.5rem; cursor: pointer; opacity: .4;
    transition: opacity .2s ease;
}
#sh-mode-magic:checked ~ .login-tabs__row label[for="sh-mode-magic"],
#sh-mode-pass:checked ~ .login-tabs__row label[for="sh-mode-pass"] { opacity: 1; }

.login-panel { display: none; margin-top: 3rem; }
#sh-mode-magic:checked ~ .login-panel--magic { display: block; }
#sh-mode-pass:checked ~ .login-panel--pass { display: block; }

.login-label { display: block; font-size: 14px; }
.login-field {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    border-bottom: 1px solid var(--color-black); padding-bottom: .6rem; margin-top: .5rem;
}
.login-input { flex: 1 1 auto; background: transparent; border: 0; outline: none; font-size: 20px; }
/* kill the browser autofill's white/blue background – paint it with the panel colour */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-rose) inset;
            box-shadow: 0 0 0 1000px var(--color-rose) inset;
    -webkit-text-fill-color: var(--color-black);
    caret-color: var(--color-black);
    transition: background-color 9999s ease-in-out 0s;
}
.login-submit { flex-shrink: 0; background: none; border: 0; cursor: pointer; font-size: 20px; }


/* =============================================================================
   4. Edit forms – base shared by both the contact and organisation forms
      (identical rules only; anything that differs is scoped in §5 / §6)
   ============================================================================= */
.sh-edit { padding: 3rem 0 5rem; }
.sh-edit__inner { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }
.sh-edit__title { font-size: 36px; margin-bottom: 2rem; }
.sh-edit__field--wide { grid-column: 1 / -1; }
.sh-edit__deleteform { margin-top: 2.5rem; border-top: 1px solid rgba(30,30,30,.12); padding-top: 1.5rem; }
.sh-edit__delete { background: none; border: 0; cursor: pointer; color: #b00020; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; padding: 0; }


/* =============================================================================
   5. Contact edit form (.sh-edit--contact) – modern "airy" filled fields
   ============================================================================= */
.sh-edit--contact .sh-edit__photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--color-beige); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.sh-edit--contact .sh-edit__photoimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-edit--contact .sh-edit__photoinit { font-size: 30px; opacity: .35; }
.sh-edit--contact .sh-edit__photofield { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; font-size: 14px; }
.sh-edit--contact .sh-edit__photofield input[type="file"] { font-size: 15px; }
.sh-edit--contact .sh-edit__photofield input[type="file"]::file-selector-button { font-family: inherit; font-size: 14px; cursor: pointer; border: 0; border-radius: 999px; background: rgba(30,30,30,.08); padding: .5rem 1.1rem; margin-right: .8rem; }
.sh-edit--contact .sh-edit__photofield input[type="file"]::file-selector-button:hover { background: rgba(30,30,30,.14); }
.sh-edit--contact .sh-edit__photoremove { display: inline-flex; align-items: center; gap: .6rem; font-size: 15px; cursor: pointer; margin-top: .4rem; }
.sh-edit--contact .sh-edit__subtitle { font-size: 20px; margin: 2.5rem 0 0; padding: 2.5rem 0 1.75rem; border-top: 1px solid var(--color-black); }
.sh-edit--contact .sh-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.75rem; }
.sh-edit--contact .sh-edit__field { display: flex; flex-direction: column; gap: .45rem; font-size: 14px; }
.sh-edit--contact .sh-edit__field > span { opacity: .6; }
/* modern, airy fields: soft filled background, no hard border, rounded.
   editable values in red so it's obvious what can be changed (static labels
   + the read-only organisation box stay black) */
.sh-edit--contact .sh-edit__field input, .sh-edit--contact .sh-edit__field select {
    border: 0; border-radius: 5px; background: var(--color-beige);
    padding: .8rem 1rem; font-size: 17px; outline: none;;
    box-shadow: none; transition: box-shadow .15s;
}
.sh-edit--contact .sh-edit__field select {
    appearance: none; -webkit-appearance: none; padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.1rem center;
}
.sh-edit--contact .sh-edit__field input:focus, .sh-edit--contact .sh-edit__field select:focus { box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.2); }
.sh-edit--contact .sh-edit__field input::placeholder { color: var(--color-red); opacity: .4; }
.sh-edit--contact .sh-edit__field select option { color: var(--color-black); }
.sh-edit--contact .sh-edit__buttons { display: flex; align-items: center; gap: 1.75rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(30,30,30,.1); }
.sh-edit--contact .sh-edit__submit { background: var(--color-red); color: #fff; border: 0; cursor: pointer; font-size: 16px; border-radius: 999px; padding: .85rem 2.4rem; transition: opacity .15s; }
.sh-edit--contact .sh-edit__submit:hover { opacity: .85; }
.sh-edit--contact .sh-edit__cancel { opacity: .55; text-decoration: none; font-size: 16px; }
.sh-edit--contact .sh-edit__cancel:hover { opacity: 1; }
.sh-edit--contact .sh-edit__orglink { margin-top: 2rem; }

/* Funktionen Firma – checkbox chips (multi-select) */
.sh-edit--contact .sh-edit__funcs { display: flex; flex-direction: column; gap: .5rem; }
.sh-edit--contact .sh-edit__funcslabel { font-size: 14px; }
/* aligned grid instead of free-wrapping flex – toggles line up in columns */
.sh-edit--contact .sh-edit__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem 1.25rem; }
.sh-edit--contact .sh-edit__check { display: flex; align-items: center; gap: .6rem; font-size: 15px; cursor: pointer; line-height: 1.3; }
.sh-edit--contact .sh-edit__toggle { display: inline-flex; align-items: center; gap: .65rem; font-size: 15px; cursor: pointer; align-self: end; padding-bottom: .5rem; }

/* all checkboxes rendered as toggle switches (green = on, grey = off).
   knob drawn via background-image so it also renders in Firefox */
.sh-edit--contact input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    width: 40px; height: 24px; min-width: 40px; border-radius: 999px; padding: 0; margin: 0;
    flex: 0 0 auto; vertical-align: middle; cursor: pointer;
    background-color: #ccc;
    background-image: radial-gradient(circle 10px, #fff 99%, rgba(0,0,0,0) 100%);
    background-size: 24px 24px; background-position: 0 center; background-repeat: no-repeat;
    transition: background-color .3s, background-position .3s;
}
.sh-edit--contact input[type="checkbox"]:checked { background-color: var(--color-rose); background-position: 100% center; }

/* read-only organisation box: soft beige card, no border */
.sh-edit--contact .sh-edit__orgbox { border: 0; border-radius: 5px; background: var(--color-beige); padding: 1.75rem 2rem; margin-top: .75rem; }
.sh-edit--contact .sh-edit__orgname { font-size: 20px; font-weight: 500; margin: 0 0 1.1rem; }
.sh-edit--contact .sh-edit__orggrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.5rem; margin: 0 0 1.1rem; }
.sh-edit--contact .sh-edit__orggrid div { display: flex; flex-direction: column; }
.sh-edit--contact .sh-edit__orggrid dt { font-size: 12px; opacity: .55; }
.sh-edit--contact .sh-edit__orggrid dd { margin: 0; font-size: 15px; }

/* Fachgruppen category groups */
.sh-edit--contact .sh-edit__cats { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.sh-edit--contact .sh-edit__catgroup { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .5; margin: .3rem 0 0; }

/* "Andere Kontakte" accordion */
.sh-edit--contact .sh-edit__acc { margin-top: 2.5rem; border-top: 1px solid var(--color-black); }
.sh-edit--contact .sh-edit__accsummary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; font-size: 20px; padding: 2.5rem 0 1rem; }
.sh-edit--contact .sh-edit__accsummary::-webkit-details-marker { display: none; }
.sh-edit--contact .sh-edit__accsummary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: .2rem; transition: transform .2s; opacity: .6; }
.sh-edit--contact .sh-edit__acc[open] .sh-edit__accsummary::after { transform: rotate(-135deg); }
.sh-edit--contact .sh-edit__acccount { font-size: 14px; opacity: .5; font-weight: 400; }
.sh-edit--contact .sh-edit__accbody { padding-bottom: .5rem; }
.sh-edit--contact .sh-edit__others { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.sh-edit--contact .sh-edit__others th { text-align: left; font-size: 13px; font-weight: 400; opacity: .6; padding: 0 .8rem .5rem; border-bottom: 1px solid var(--color-black); }
.sh-edit--contact .sh-edit__others td { padding: .55rem .8rem; font-size: 15px; border-bottom: 1px solid rgba(30,30,30,.1); }

@media (max-width: 640px) { .sh-edit--contact .sh-edit__grid, .sh-edit--contact .sh-edit__orggrid { grid-template-columns: 1fr; } }


/* =============================================================================
   6. Organisation edit form (.sh-edit--org) – classic underline fields
   ============================================================================= */
.sh-edit--org .sh-edit__subtitle { font-size: 20px; margin: 2.5rem 0 1rem; }
.sh-edit--org .sh-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sh-edit--org .sh-edit__field { display: flex; flex-direction: column; gap: .35rem; font-size: 14px; }
.sh-edit--org .sh-edit__field input, .sh-edit--org .sh-edit__field select {
    border: 0; border-bottom: 1px solid var(--color-black); background: transparent;
    padding: .5rem 0; font-size: 18px; outline: none;
}
.sh-edit--org .sh-edit__field input:disabled { opacity: .5; }
.sh-edit--org .sh-edit__hint { font-size: 12px; opacity: .5; }
.sh-edit--org .sh-edit__buttons { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; }
.sh-edit--org .sh-edit__buttons button { background: none; border: 0; cursor: pointer; font-size: 20px; }
.sh-edit--org .sh-edit__cancel { opacity: .6; text-decoration: none; }
@media (max-width: 640px) { .sh-edit--org .sh-edit__grid { grid-template-columns: 1fr; } }