/* ============================================================================
   Karrieretag Exhibitor Portal — Frontend CSS
   Karrieretag-Brand: Primary-Rot (#e01f15), dunkles Grau-Schwarz für Text.
   Alle Komponenten nutzen die Tokens am Anfang; das macht spätere
   Branding-Updates trivial.
   ============================================================================ */

.kte-form,
.kte-dashboard,
.kte-profile-edit,
.kte-detail,
.kte-directory,
.kte-preview-wrapper,
.kte-modal {
    --kte-color-primary:        #e01f15;
    --kte-color-primary-hover:  #a6211f;
    --kte-color-primary-soft:   #fdecea;
    --kte-color-text:           #1f2937;
    --kte-color-text-soft:      #4b5563;
    --kte-color-muted:          #6b7280;
    --kte-color-border:         #e5e7eb;
    --kte-color-border-strong:  #d1d5db;
    --kte-color-bg:             #ffffff;
    --kte-color-bg-soft:        #f9fafb;
    --kte-color-bg-tint:        #f3f4f6;

    --kte-color-success:        #065f46;
    --kte-color-success-bg:     #ecfdf5;
    --kte-color-success-border: #a7f3d0;
    --kte-color-warning:        #92400e;
    --kte-color-warning-bg:     #fef3c7;
    --kte-color-warning-border: #fde68a;
    --kte-color-error:          #991b1b;
    --kte-color-error-bg:       #fef2f2;
    --kte-color-error-border:   #fecaca;
    --kte-color-info:           #1e3a8a;
    --kte-color-info-bg:        #eff6ff;
    --kte-color-info-border:    #bfdbfe;

    --kte-radius-sm:  4px;
    --kte-radius:     8px;
    --kte-radius-lg:  12px;
    --kte-radius-pill: 999px;

    --kte-shadow-sm:  0 1px 2px rgba(0,0,0,.04);
    --kte-shadow:     0 4px 12px rgba(0,0,0,.06);
    --kte-shadow-lg:  0 12px 24px rgba(0,0,0,.08);

    --kte-font-size-xs:  .75rem;   /* 12px */
    --kte-font-size-sm:  .875rem;  /* 14px */
    --kte-font-size:     1rem;     /* 16px */
    --kte-font-size-lg:  1.125rem; /* 18px */
    --kte-font-size-xl:  1.5rem;   /* 24px */
    --kte-font-size-2xl: 2rem;     /* 32px */

    --kte-icon-sm: 16px;
    --kte-icon:    20px;
    --kte-icon-lg: 24px;

    color: var(--kte-color-text);
    font-family: inherit;
}

/* ---------- Forms (Login, Register, Password-Reset) ---------- */
.kte-form {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-lg);
    box-shadow: var(--kte-shadow-sm);
}
.kte-form p { margin: 0 0 1rem; }
.kte-form label { display: block; font-weight: 400; margin-bottom: .35rem; font-size: var(--kte-font-size-sm); }
.kte-form input[type="text"],
.kte-form input[type="email"],
.kte-form input[type="password"] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--kte-color-border-strong);
    border-radius: var(--kte-radius-sm);
    font-size: var(--kte-font-size);
    box-sizing: border-box;
    background: var(--kte-color-bg);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.kte-form input:focus {
    outline: none;
    border-color: var(--kte-color-primary);
    box-shadow: 0 0 0 3px rgba(224,31,21,.12);
}
.kte-form .kte-required { color: var(--kte-color-primary); font-weight: 700; }
.kte-form .kte-consent input { margin-right: .5rem; vertical-align: middle; }
.kte-form .kte-consent label { display: inline; font-weight: 400 !important; font-size: var(--kte-font-size-sm); line-height: 1.5; }
.kte-form small { display: block; color: var(--kte-color-muted); font-size: var(--kte-font-size-xs); margin-top: .35rem; line-height: 1.4; }
.kte-form .kte-row { display: flex; align-items: center; gap: .5rem; }
.kte-form__head { text-align: center; margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--kte-color-border); }
.kte-form__title { margin: 0 0 .5rem; font-size: var(--kte-font-size-xl); font-weight: 700; line-height: 1.2; color: var(--kte-color-text); }
.kte-form__subtitle { margin: 0; font-size: var(--kte-font-size-sm); color: var(--kte-color-text-soft); line-height: 1.5; }
.kte-form__actions { display: flex; flex-direction: column; gap: .5rem; }

.kte-form .kte-form-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--kte-color-border); font-size: var(--kte-font-size-sm); color: var(--kte-color-text-soft); text-align: center; }
.kte-form .kte-form-footer a { color: var(--kte-color-primary); text-decoration: none; font-weight: 500; }
.kte-form .kte-form-footer a:hover { text-decoration: underline; }

.kte-form .kte-form-footer--stacked { list-style: none !important; padding: 0; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--kte-color-border); text-align: center; }
.kte-form .kte-form-footer--stacked li { padding: .35rem 0; list-style: none !important; }
.kte-form .kte-form-footer--stacked li::marker { content: none !important; }

.kte-checkbox-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400 !important; font-size: var(--kte-font-size-sm); cursor: pointer; }
.kte-checkbox-label input { margin: 0; }

/* ---------- Buttons ----------
   Spezifität bewusst hoch (Tag + Class), damit Theme-Link-Styles (z.B. Enfold:
   `a { color: ... }`, `entry-content a { ... }`) nicht durchschlagen. Plus
   text-decoration !important gegen aggressive Theme-Underlines.
*/
a.kte-button, button.kte-button, .kte-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* `!important` für Layout/Typography-Properties, weil Enfold `button[type=submit]`
       und `body button` aggressiv überschreibt (Padding, Uppercase, Gradient, Schatten).
       Ohne diese Resets sieht `<button>` anders aus als der gleichgeklasste `<a>`. */
    padding: .65rem 1.25rem !important;
    border: 1px solid transparent;
    border-radius: var(--kte-radius-sm) !important;
    font-family: inherit !important;
    font-size: var(--kte-font-size-sm) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-sizing: border-box;
    min-height: 40px;
    height: auto !important;
    margin: 0;
    cursor: pointer;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
/* Color/Background mit !important: Enfold hat `body .main_color a { color: #e01f15 }`
   (Specificity 0-2-1), das schlägt jede normale Klassen-Definition. Da kommen wir
   ohne !important nicht heraus — die Eigenschaften sind aber bewusst eng begrenzt
   (nur color, background-color, border-color). */
a.kte-button--primary, button.kte-button--primary, .kte-button--primary {
    background-color: var(--kte-color-primary) !important;
    color: #ffffff !important;
    border-color: var(--kte-color-primary) !important;
}
a.kte-button--primary:hover,
a.kte-button--primary:focus,
button.kte-button--primary:hover,
button.kte-button--primary:focus,
.kte-button--primary:hover,
.kte-button--primary:focus {
    background-color: var(--kte-color-primary-hover) !important;
    border-color: var(--kte-color-primary-hover) !important;
    color: #ffffff !important;
}
a.kte-button--secondary, button.kte-button--secondary, .kte-button--secondary {
    background-color: var(--kte-color-bg) !important;
    color: var(--kte-color-text) !important;
    /* Etwas kräftigerer Border (gray-400 statt -300) — `border-strong` ist gegen
       weiße Container zu blass, der Button war für viele User nicht als Button
       erkennbar. */
    border: 1px solid #9ca3af !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04) !important;
}
a.kte-button--secondary:hover,
a.kte-button--secondary:focus,
button.kte-button--secondary:hover,
button.kte-button--secondary:focus,
.kte-button--secondary:hover,
.kte-button--secondary:focus {
    background-color: var(--kte-color-bg-tint) !important;
    color: var(--kte-color-text) !important;
    border-color: #6b7280 !important;
}
/* Ghost-Variante des Primary-Buttons: weißer Hintergrund, roter Rand und rote
   Schrift. !important spiegelt das Primary-Setup, damit Enfold-Theme-Regeln nicht
   durchgreifen. Hover invertiert (gefüllter Primary-Style). */
a.kte-button--ghost-primary, button.kte-button--ghost-primary, .kte-button--ghost-primary {
    background-color: #ffffff !important;
    color: var(--kte-color-primary) !important;
    border: 1px solid var(--kte-color-primary) !important;
}
a.kte-button--ghost-primary:hover,
a.kte-button--ghost-primary:focus,
button.kte-button--ghost-primary:hover,
button.kte-button--ghost-primary:focus,
.kte-button--ghost-primary:hover,
.kte-button--ghost-primary:focus {
    background-color: var(--kte-color-primary) !important;
    color: #ffffff !important;
    border-color: var(--kte-color-primary) !important;
}
a.kte-button--sm, button.kte-button--sm, .kte-button--sm {
    padding: .35rem .75rem;
    font-size: var(--kte-font-size-sm);
    gap: .35rem;
}
.kte-button--sm .kte-icon { width: var(--kte-icon-sm); height: var(--kte-icon-sm); }
a.kte-button--disabled, button.kte-button--disabled, .kte-button--disabled { opacity: .55; cursor: not-allowed; }
a.kte-button--block, button.kte-button--block, .kte-button--block { width: 100%; }
/* SVG-Icons brauchen explizites Block-Display, sonst rendert der Browser sie
   inline mit Baseline-Offset — das verursacht je nach Container-Tag (<a>, <button>,
   <span>) unterschiedliche Line-Box-Höhen. Mit display: block sind alle Icons
   physikalisch gleich hoch, unabhängig vom umgebenden Element. */
.kte-icon {
    display: block;
    flex-shrink: 0;
}
.kte-button .kte-icon { width: var(--kte-icon-sm); height: var(--kte-icon-sm); }

/* ---------- Notices (Flash-Messages, Banners) ---------- */
.kte-notice {
    padding: .85rem 1rem;
    border-radius: var(--kte-radius-sm);
    margin-bottom: 1rem;
    font-size: var(--kte-font-size-sm);
    border: 1px solid transparent;
    line-height: 1.45;
}
.kte-notice--success { background: var(--kte-color-success-bg); color: var(--kte-color-success); border-color: var(--kte-color-success-border); }
.kte-notice--error   { background: var(--kte-color-error-bg);   color: var(--kte-color-error);   border-color: var(--kte-color-error-border); }
.kte-notice--info    { background: var(--kte-color-info-bg);    color: var(--kte-color-info);    border-color: var(--kte-color-info-border); }

/* ---------- Dashboard ---------- */
.kte-dashboard {
    max-width: 760px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-lg);
    box-shadow: var(--kte-shadow-sm);
}
.kte-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--kte-color-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.kte-dashboard__greeting { margin: 0 0 .25rem; font-size: var(--kte-font-size-lg); font-weight: 500; }
.kte-dashboard__email { margin: 0; color: var(--kte-color-muted); font-size: var(--kte-font-size-sm); }
.kte-dashboard__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.kte-dashboard__profiles h2 { font-size: var(--kte-font-size-lg); margin: 0 0 1.25rem; font-weight: 600; }
.kte-dashboard__status { font-size: var(--kte-font-size-xs); padding: .2rem .65rem; border-radius: var(--kte-radius-pill); background: var(--kte-color-bg-tint); color: var(--kte-color-text); font-weight: 500; white-space: nowrap; }

/* Profil-Karten im Dashboard ------------------------------------- */
.kte-profile-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.kte-profile-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.1rem;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-left: 4px solid var(--kte-color-border);
    border-radius: var(--kte-radius);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.kte-profile-card:hover {
    border-color: var(--kte-color-primary);
    border-left-color: var(--kte-color-primary);
    box-shadow: var(--kte-shadow);
}
/* Status-Akzent als linker Streifen */
.kte-profile-card--publish        { border-left-color: var(--kte-color-success); }
.kte-profile-card--pending        { border-left-color: var(--kte-color-warning); }
.kte-profile-card--kte_correction { border-left-color: var(--kte-color-error); }
.kte-profile-card--delete-requested { border-left-color: var(--kte-color-error); }
.kte-profile-card--kte_archived   { border-left-color: var(--kte-color-muted); opacity: .8; }

a.kte-profile-card__logo, .kte-profile-card__logo {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kte-color-bg-soft);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-sm);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
}
.kte-profile-card__logo img { max-width: 88%; max-height: 88%; height: auto; width: auto; object-fit: contain; }
/* Konsistent mit Directory- und Detail-Placeholdern: rote Initialen auf rot-softem
   Pill-Background. Vorher: graue Initialen — fiel optisch aus dem Plugin-Stil. */
.kte-profile-card__logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--kte-radius-pill);
    background: var(--kte-color-primary-soft);
    color: var(--kte-color-primary);
    font-size: var(--kte-font-size-xl);
    font-weight: 700;
    letter-spacing: .05em;
}

.kte-profile-card__body { flex: 1; min-width: 0; }
.kte-profile-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .35rem;
}
a.kte-profile-card__title, .kte-profile-card__title {
    font-weight: 600;
    font-size: var(--kte-font-size-lg);
    color: var(--kte-color-text) !important;
    text-decoration: none !important;
    line-height: 1.25;
    word-break: break-word;
}
a.kte-profile-card__title:hover { color: var(--kte-color-primary) !important; }
.kte-profile-card__meta {
    margin: .15rem 0 .15rem;
    color: var(--kte-color-text-soft);
    font-size: var(--kte-font-size-sm);
}
.kte-profile-card__timestamp {
    margin: 0 0 .85rem;
    color: var(--kte-color-muted);
    font-size: var(--kte-font-size-xs);
}
.kte-profile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    padding-top: .65rem;
    border-top: 1px solid var(--kte-color-bg-tint);
    font-size: var(--kte-font-size-sm);
}
a.kte-profile-card__action, button.kte-profile-card__action, .kte-profile-card__action {
    color: var(--kte-color-primary) !important;
    text-decoration: none !important;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
a.kte-profile-card__action:hover, button.kte-profile-card__action:hover, .kte-profile-card__action:hover { text-decoration: underline !important; }
.kte-profile-card__action--danger { color: var(--kte-color-error) !important; }
/* display: contents → der Form-Wrapper verschwindet aus dem Layout, sein Submit-Button
   wird direkter Flex-Child der __actions-Row und richtet sich gleich mit den Links aus. */
.kte-profile-card__delete-form { display: contents; margin: 0; padding: 0; }
.kte-profile-card__delete-form input[type="hidden"] { display: none; }

/* ---------- Confirm-Modal ---------- */
.kte-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.kte-modal[hidden] { display: none; }
.kte-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    animation: kte-modal-fade .15s ease-out;
}
.kte-modal__dialog {
    position: relative;
    background-color: #ffffff !important;
    border-radius: var(--kte-radius-lg, 12px);
    box-shadow: var(--kte-shadow-lg, 0 12px 24px rgba(0,0,0,.18));
    max-width: 480px;
    width: 100%;
    padding: 1.75rem;
    color: #1f2937 !important;
    animation: kte-modal-pop .18s cubic-bezier(.16,1,.3,1);
}
/* Defensive Farbgebung: Themes (Enfold) überschreiben sonst h2/p mit eigenen Tönen. */
.kte-modal .kte-modal__title,
.kte-modal h2.kte-modal__title {
    margin: 0 0 .75rem !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1f2937 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.kte-modal .kte-modal__message,
.kte-modal p.kte-modal__message {
    margin: 0 0 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    color: #4b5563 !important;
}
.kte-modal__actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .kte-modal__dialog { padding: 1.25rem; }
    .kte-modal__actions { flex-direction: column-reverse; }
    .kte-modal__actions .kte-button { width: 100%; }
}
@keyframes kte-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kte-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@media (max-width: 540px) {
    .kte-profile-card { flex-direction: column; gap: .9rem; padding: 1rem; }
    a.kte-profile-card__logo, .kte-profile-card__logo { width: 100%; height: 90px; flex-basis: auto; }
    .kte-profile-card__header { flex-direction: column; gap: .35rem; }
}

/* Status-Badges */
.kte-status--publish          { background: var(--kte-color-success-bg); color: var(--kte-color-success); }
.kte-status--pending          { background: var(--kte-color-warning-bg); color: var(--kte-color-warning); }
.kte-status--kte_correction   { background: var(--kte-color-error-bg);   color: var(--kte-color-error); }
.kte-status--draft            { background: var(--kte-color-bg-tint);    color: var(--kte-color-text-soft); }
.kte-status--kte_archived     { background: var(--kte-color-bg-tint);    color: var(--kte-color-muted); }
.kte-status--delete-requested { background: var(--kte-color-error-bg);   color: var(--kte-color-error); }
.kte-empty { color: var(--kte-color-muted); padding: 1rem 0; font-style: italic; }
.kte-muted { color: var(--kte-color-muted); font-size: var(--kte-font-size-sm); margin-top: 1rem; }

/* ---------- Profil-Editor ---------- */
.kte-profile-edit {
    max-width: 880px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-lg);
    box-shadow: var(--kte-shadow-sm);
}
.kte-profile-edit__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--kte-color-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.kte-profile-edit__title { margin: 0 0 .35rem; font-size: var(--kte-font-size-xl); font-weight: 600; line-height: 1.25; }
/* Layout-only — Farben kommen von `.kte-status--*` (Combo-Selektor unten gewinnt
   gegen die einzelnen `.kte-status--*` Definitionen oben). */
.kte-profile-edit__status {
    display: inline-block;
    padding: .25rem .8rem;
    border-radius: var(--kte-radius-pill);
    font-size: var(--kte-font-size-xs);
    margin: 0;
    font-weight: 600;
    letter-spacing: .02em;
}
.kte-profile-edit__status.kte-status--new            { background: var(--kte-color-bg-tint);     color: var(--kte-color-text-soft); }
.kte-profile-edit__status.kte-status--publish        { background: var(--kte-color-success-bg);  color: var(--kte-color-success); }
.kte-profile-edit__status.kte-status--pending        { background: var(--kte-color-warning-bg);  color: var(--kte-color-warning); }
.kte-profile-edit__status.kte-status--kte_correction { background: var(--kte-color-error-bg);    color: var(--kte-color-error); }
.kte-profile-edit__status.kte-status--draft          { background: var(--kte-color-bg-tint);     color: var(--kte-color-text-soft); }
.kte-profile-edit__status.kte-status--kte_archived   { background: var(--kte-color-bg-tint);     color: var(--kte-color-muted); }
.kte-profile-edit__status.kte-status--delete-requested { background: var(--kte-color-error-bg); color: var(--kte-color-error); }
.kte-profile-section { margin: 2.25rem 0; padding-top: 1.75rem; border-top: 1px solid var(--kte-color-border); }
.kte-profile-section:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.kte-profile-section h2 {
    font-size: var(--kte-font-size-lg);
    margin: 0 0 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kte-color-text);
}
.kte-field { margin-bottom: 1.5rem; }
.kte-field:last-child { margin-bottom: 0; }
.kte-field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: var(--kte-font-size-sm); color: var(--kte-color-text); }
.kte-field input[type="text"],
.kte-field input[type="url"],
.kte-field input[type="email"],
.kte-field input[type="number"],
.kte-field textarea,
.kte-field select {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--kte-color-border-strong);
    border-radius: var(--kte-radius-sm);
    font-size: var(--kte-font-size);
    line-height: 1.4;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--kte-color-text);
    background: var(--kte-color-bg);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.kte-field input:hover,
.kte-field textarea:hover,
.kte-field select:hover {
    border-color: var(--kte-color-text-soft);
}
/* `!important` defensiv gegen Enfold-Theme-Defaults (`input:focus { outline: 0 }` o.ä.):
   ohne die Override-Hinweise sieht der User keinen Focus-Ring — explizites
   matching mit wp-admin (3px-Glow + farbiger Border). */
.kte-field input:focus,
.kte-field textarea:focus,
.kte-field select:focus,
.kte-form input:focus,
.kte-form textarea:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px;
    border-color: var(--kte-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(224, 31, 21, .18) !important;
}
.kte-field textarea { resize: vertical; min-height: 110px; }

/* File-Input — WordPress-Admin-ähnlich: gestrichelter Rahmen + gestylter
   ::file-selector-button (Chromium/Safari/Firefox supporten das seit 2021).
   Macht den „Datei auswählen"-Button erkennbar statt UA-Default-Grau. */
.kte-field input[type="file"] {
    display: block;
    width: 100%;
    padding: .55rem .75rem;
    border: 1px dashed var(--kte-color-border-strong);
    border-radius: var(--kte-radius-sm);
    background: var(--kte-color-bg-soft);
    font-family: inherit;
    font-size: var(--kte-font-size-sm);
    color: var(--kte-color-text-soft);
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.kte-field input[type="file"]:hover {
    border-color: var(--kte-color-primary);
    background: var(--kte-color-primary-soft);
}
.kte-field input[type="file"]:focus {
    outline: 2px solid transparent !important;
    border-color: var(--kte-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(224, 31, 21, .18) !important;
}
.kte-field input[type="file"]::file-selector-button {
    margin-right: .9rem;
    padding: .4rem .9rem;
    background-color: var(--kte-color-bg);
    color: var(--kte-color-text);
    border: 1px solid var(--kte-color-border-strong);
    border-radius: var(--kte-radius-sm);
    font-family: inherit;
    font-size: var(--kte-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.kte-field input[type="file"]:hover::file-selector-button {
    background-color: var(--kte-color-primary);
    color: #ffffff;
    border-color: var(--kte-color-primary);
}
.kte-field small { display: block; color: var(--kte-color-muted); font-size: var(--kte-font-size-xs); margin-top: .35rem; line-height: 1.4; }
.kte-field .kte-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem; }
.kte-field .kte-checkbox-group label { font-weight: 400; font-size: var(--kte-font-size-sm); }

/* ---------- Checkbox-Picker (Zielgruppen, Mehrfachauswahlen) ---------- */
.kte-checkbox-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem;
    padding: .25rem;
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-sm);
    background: var(--kte-color-bg-soft);
}
.kte-checkbox-picker__item {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-sm);
    background: var(--kte-color-bg);
    cursor: pointer;
    font-size: var(--kte-font-size-sm) !important;
    font-weight: 400 !important;
    line-height: 1.3;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.kte-checkbox-picker__item:hover { border-color: var(--kte-color-primary); }
.kte-checkbox-picker__item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.kte-checkbox-picker__item.is-selected {
    border-color: var(--kte-color-primary);
    background: var(--kte-color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--kte-color-primary);
}
.kte-checkbox-picker__name { color: var(--kte-color-text); word-break: break-word; }

/* Browser-Accent-Color für Checkbox-/Radio-Inputs — Karrieretag-Rot statt System-Blau.
   Wirkt auf alle Plugin-Checkboxen sowohl in Forms als auch in den Pickern. */
.kte-form input[type="checkbox"],
.kte-form input[type="radio"],
.kte-dashboard input[type="checkbox"],
.kte-dashboard input[type="radio"],
.kte-profile-edit input[type="checkbox"],
.kte-profile-edit input[type="radio"],
.kte-detail input[type="checkbox"],
.kte-detail input[type="radio"],
.kte-events-picker input[type="checkbox"],
.kte-checkbox-picker input[type="checkbox"] {
    accent-color: var(--kte-color-primary);
}

/* ---------- Event-Multi-Picker (Frontend + Admin shared) ---------- */
.kte-events-picker {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.kte-events-picker__filter {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--kte-color-border-strong);
    border-radius: var(--kte-radius-sm);
    font-size: var(--kte-font-size-sm);
    background: var(--kte-color-bg);
    box-sizing: border-box;
}
.kte-events-picker__filter:focus {
    outline: none;
    border-color: var(--kte-color-primary);
    box-shadow: 0 0 0 3px rgba(224,31,21,.12);
}
.kte-events-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-sm);
    background: var(--kte-color-bg-soft);
}
.kte-events-picker__item {
    display: flex !important;
    align-items: flex-start;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-sm);
    background: var(--kte-color-bg);
    cursor: pointer;
    font-weight: 400 !important;
    font-size: var(--kte-font-size-sm) !important;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
    line-height: 1.3;
}
.kte-events-picker__item:hover { border-color: var(--kte-color-primary); }
.kte-events-picker__item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}
.kte-events-picker__item.is-selected {
    border-color: var(--kte-color-primary);
    background: var(--kte-color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--kte-color-primary);
}
.kte-events-picker__body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.kte-events-picker__name { font-weight: 500; color: var(--kte-color-text); word-break: break-word; }
.kte-events-picker__sub { color: var(--kte-color-muted); font-size: var(--kte-font-size-xs); }
.kte-events-picker__item.is-hidden { display: none !important; }
.kte-events-picker__hint { margin: .35rem 0 0; font-size: var(--kte-font-size-xs); color: var(--kte-color-muted); }
.kte-events-picker__hint .kte-events-picker__count { font-weight: 600; color: var(--kte-color-primary); }
.kte-events-picker__empty-state {
    grid-column: 1 / -1;
    padding: 1rem;
    text-align: center;
    color: var(--kte-color-muted);
    font-size: var(--kte-font-size-sm);
}
.kte-field--has-error label { color: var(--kte-color-error); }
.kte-field--has-error input,
.kte-field--has-error textarea,
.kte-field--has-error select { border-color: var(--kte-color-primary); box-shadow: 0 0 0 1px rgba(224,31,21,.15); }
.kte-field-error { margin: .4rem 0 0; color: var(--kte-color-error); font-size: var(--kte-font-size-xs); font-weight: 500; }
.kte-attachment-current { margin-bottom: .5rem; }
.kte-attachment-current img { max-width: 200px; height: auto; border: 1px solid var(--kte-color-border); border-radius: var(--kte-radius-sm); display: block; }
.kte-gallery-current { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.kte-gallery-current img { display: block; border: 1px solid var(--kte-color-border); border-radius: var(--kte-radius-sm); max-width: 80px; height: auto; }
.kte-profile-actions { display: flex; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--kte-color-border); margin-top: 2rem; flex-wrap: wrap; }
.kte-profile-edit__footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--kte-color-bg-tint); font-size: var(--kte-font-size-xs); }
.kte-profile-edit__footer a { color: var(--kte-color-muted); }
.kte-profile-legal { background: var(--kte-color-bg-soft); padding: 1.25rem; border-radius: var(--kte-radius); border-top: 0; margin-top: 1.5rem; }

/* ---------- Verzeichnis-Grid ---------- */
.kte-directory-section {
    max-width: 1200px;
    margin: 2rem auto;
}

.kte-directory__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 2px solid var(--kte-color-primary);
}
.kte-directory__heading {
    margin: 0;
    font-size: var(--kte-font-size-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--kte-color-text);
}
.kte-directory__count {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    background: var(--kte-color-primary-soft);
    color: var(--kte-color-primary);
    border-radius: var(--kte-radius-pill);
    font-size: var(--kte-font-size-sm);
    font-weight: 600;
}

.kte-directory {
    display: grid;
    grid-template-columns: repeat(var(--kte-cols, 4), 1fr);
    gap: 1.25rem;
    margin: 0;
}
@media (max-width: 900px) { .kte-directory { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (max-width: 640px) { .kte-directory { grid-template-columns: repeat(2, 1fr); gap: .85rem; } }
@media (max-width: 380px) { .kte-directory { grid-template-columns: 1fr; } }

a.kte-directory__tile, .kte-directory__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--kte-color-text) !important;
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-lg);
    overflow: hidden;
    background-color: var(--kte-color-bg);
    box-shadow: var(--kte-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    isolation: isolate;
}
a.kte-directory__tile::before, .kte-directory__tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(224, 31, 21, 0) 60%, rgba(224, 31, 21, .04) 100%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
    z-index: 0;
}
a.kte-directory__tile:hover, .kte-directory__tile:hover,
a.kte-directory__tile:focus-visible, .kte-directory__tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--kte-shadow-lg);
    border-color: var(--kte-color-primary);
    color: var(--kte-color-text) !important;
    outline: none;
}
a.kte-directory__tile:hover::before, .kte-directory__tile:hover::before,
a.kte-directory__tile:focus-visible::before, .kte-directory__tile:focus-visible::before {
    opacity: 1;
}
a.kte-directory__tile:focus-visible, .kte-directory__tile:focus-visible {
    box-shadow: 0 0 0 3px var(--kte-color-primary-soft), var(--kte-shadow-lg);
}

.kte-directory__logo {
    position: relative;
    width: 100%;
    padding-top: 60%; /* 5:3 Aspect-Ratio rein aus Breite — bulletproof in allen Browsern */
    background: linear-gradient(180deg, #ffffff 0%, var(--kte-color-bg-soft) 100%);
    border-bottom: 1px solid var(--kte-color-border);
    z-index: 1;
    overflow: hidden;
}
.kte-directory__tile--logo-only .kte-directory__logo { border-bottom: 0; }
.kte-directory__logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    transition: transform .25s ease;
}
.kte-directory__tile:hover .kte-directory__logo img,
.kte-directory__tile:focus-visible .kte-directory__logo img {
    transform: scale(1.04);
}
.kte-directory__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kte-font-size-2xl);
    font-weight: 700;
    color: var(--kte-color-primary);
    letter-spacing: .05em;
    isolation: isolate;
}
.kte-directory__placeholder::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--kte-color-primary-soft);
    border-radius: var(--kte-radius-pill);
    z-index: -1;
}

.kte-directory__arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kte-color-primary);
    color: #fff;
    border-radius: var(--kte-radius-pill);
    opacity: 0;
    transform: translate(6px, -6px) scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(224, 31, 21, .25);
}
.kte-directory__arrow .kte-icon {
    width: var(--kte-icon-sm);
    height: var(--kte-icon-sm);
    stroke-width: 2.2;
}
.kte-directory__tile:hover .kte-directory__arrow,
.kte-directory__tile:focus-visible .kte-directory__arrow {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.kte-directory__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem 1rem;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 5.75rem;
}
.kte-directory__name {
    font-size: var(--kte-font-size);
    font-weight: 600;
    line-height: 1.3;
    color: var(--kte-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.kte-directory__meta {
    font-size: var(--kte-font-size-xs);
    font-weight: 500;
    color: var(--kte-color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1em;
    margin-top: auto;
}

.kte-directory-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    background: var(--kte-color-bg-soft);
    border: 1px dashed var(--kte-color-border-strong);
    border-radius: var(--kte-radius-lg);
    text-align: center;
}
.kte-directory-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--kte-radius-pill);
    background: var(--kte-color-bg);
    color: var(--kte-color-muted);
    border: 1px solid var(--kte-color-border);
}
.kte-directory-empty__icon .kte-icon { width: var(--kte-icon-lg); height: var(--kte-icon-lg); }
.kte-directory-empty__text {
    margin: 0;
    color: var(--kte-color-text-soft);
    font-size: var(--kte-font-size);
    max-width: 36ch;
}

@media (prefers-reduced-motion: reduce) {
    .kte-directory__tile,
    .kte-directory__tile::before,
    .kte-directory__logo img,
    .kte-directory__arrow {
        transition: none;
    }
    .kte-directory__tile:hover { transform: none; }
}

/* ---------- Detailseite (Sidebar + Hauptbereich) ---------- */
.kte-detail {
    max-width: 1100px;
    margin: 0 auto 3rem;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius-lg);
    overflow: hidden;
    box-shadow: var(--kte-shadow-sm);
    container-type: inline-size;
    container-name: kte-detail;
}
.kte-detail__header-image img { width: 100%; height: auto; display: block; max-height: 320px; object-fit: cover; }
.kte-detail__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
}
@container kte-detail (max-width: 720px) { .kte-detail__grid { grid-template-columns: 1fr; } }
@supports not (container-type: inline-size) {
    @media (max-width: 720px) { .kte-detail__grid { grid-template-columns: 1fr; } }
}

/* Defensive Resets gegen Theme-Bullet-Listen */
.kte-detail ul, .kte-detail ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.kte-detail ul li, .kte-detail ol li {
    list-style: none !important;
    background-image: none !important;
    padding-left: 0 !important;
}
.kte-detail ul li::before,
.kte-detail ul li::marker,
.kte-detail ol li::marker { content: none !important; }

/* Sidebar */
.kte-detail__sidebar {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    background: var(--kte-color-bg-soft);
    border-right: 1px solid var(--kte-color-border);
    font-size: var(--kte-font-size-sm);
}
@container kte-detail (max-width: 720px) {
    .kte-detail__sidebar { border-right: 0; border-bottom: 1px solid var(--kte-color-border); }
}
.kte-detail__logo-box {
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--kte-color-bg);
    border: 1px solid var(--kte-color-border);
    border-radius: var(--kte-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.kte-detail__logo-box img { max-width: 84%; max-height: 84%; height: auto; object-fit: contain; }
.kte-detail__logo-placeholder {
    font-size: var(--kte-font-size-2xl);
    font-weight: 700;
    color: var(--kte-color-primary);
    letter-spacing: .05em;
    background: var(--kte-color-primary-soft);
    width: 64px;
    height: 64px;
    border-radius: var(--kte-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kte-detail__socials {
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
/* color !important wegen Enfold `body .main_color a` Override (siehe Buttons-Block). */
.kte-detail__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--kte-color-text) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color .12s ease, transform .12s ease;
}
.kte-detail__socials a:hover {
    background-color: var(--kte-color-primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.kte-detail__socials .kte-icon { width: var(--kte-icon); height: var(--kte-icon); }

/* All-Caps-Tag-Label — kleine Inline-Beschriftung (z. B. Fact-Item-Überschriften „BRANCHE"). */
.kte-detail__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--kte-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kte-color-muted);
    margin: 0 0 .65rem;
    line-height: 1.3;
}
.kte-detail__label .kte-icon { width: var(--kte-icon); height: var(--kte-icon); flex-shrink: 0; }

/* Echte Sektions-Überschriften: h3 mit Label-Klasse bekommt volle Heading-Optik
   (kein Uppercase, kein Letter-Spacing, Primärtextfarbe). Hierarchie:
     Theme-h1 (45px) > .kte-detail__title h2 (30px) > .kte-detail__label h3 (20px) */
h3.kte-detail__label {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kte-color-text);
    margin: 1.5rem 0 .75rem;
}
/* Sidebar-Heading hat eigene Specificity-Bedarfe: muss h2/h3-Default-Größen
   schlagen und in den engen Sidebar-Container passen. */
.kte-detail__sidebar h3.kte-detail__sidebar-heading,
.kte-detail__sidebar h2.kte-detail__sidebar-heading {
    margin-top: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--kte-color-border);
    font-size: 18px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kte-color-text);
}

/* Kontaktliste */
.kte-detail__contact-list { padding: 0; margin: 0 0 1.5rem; }
.kte-detail__contact-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .7rem 0;
    line-height: 1.45;
    border-bottom: 1px solid var(--kte-color-border);
    font-size: var(--kte-font-size-sm);
}
.kte-detail__contact-list li:last-child { border-bottom: 0; }
.kte-detail__contact-list .kte-icon { flex: 0 0 var(--kte-icon); width: var(--kte-icon); height: var(--kte-icon); color: var(--kte-color-muted); margin-top: 1px; }
.kte-detail .kte-button .kte-icon { width: var(--kte-icon); height: var(--kte-icon); }

/* Beide Detail-Page-Buttons (Back-Link als <a>, Teilen als <button>) auf
   identische Höhe lockern, unabhängig von Browser-Default-Padding/Line-Heights
   der jeweiligen Tags. Flex-Centering kümmert sich ums Vertikal-Layout. */
.kte-detail a.kte-button,
.kte-detail button.kte-button {
    height: 44px;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
.kte-detail__contact-list a { color: var(--kte-color-primary); text-decoration: none; word-break: break-word; }
.kte-detail__contact-list a:hover { text-decoration: underline; }

.kte-detail__back-link {
    margin-top: auto;
    width: 100%;
}

/* Hauptbereich */
.kte-detail__main { padding: 2rem; }
@container kte-detail (max-width: 720px) {
    .kte-detail__main { padding: 1.5rem 1.25rem; }
    .kte-detail__sidebar { padding: 1.5rem 1.25rem; }
}

.kte-detail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.kte-detail__share-btn--copied,
.kte-detail__share-btn--copied:hover,
.kte-detail__share-btn--copied:focus {
    background-color: var(--kte-color-success-bg) !important;
    color: var(--kte-color-success) !important;
    border-color: var(--kte-color-success-border) !important;
}

.kte-detail__title { font-size: 30px; margin: 0 0 .5rem; line-height: 1.2; font-weight: 700; color: var(--kte-color-text); }

/* Theme-h1 (`.post-title.entry-title`) wird auf der Aussteller-Single ausgeblendet:
   `.kte-detail__title` zeigt den Firmennamen bereits prominent über dem Banner-Bild,
   die Theme-Überschrift wäre Doppel-Information. Scope auf den CPT, damit das
   Theme-Layout anderer Seiten unangetastet bleibt. */
body.single-kte_exhibitor .post-title.entry-title,
body.single-kte_exhibitor h1.entry-title {
    display: none !important;
}
.kte-detail__teaser { color: var(--kte-color-text-soft); font-size: var(--kte-font-size-lg); margin: 0 0 1.25rem; line-height: 1.5; }

.kte-detail__description { font-size: var(--kte-font-size); line-height: 1.65; color: var(--kte-color-text); }
.kte-detail__description p { margin: 0 0 .85rem; }
.kte-detail__description p:last-child { margin-bottom: 0; }

.kte-detail__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@container kte-detail (max-width: 580px) { .kte-detail__facts { grid-template-columns: 1fr; gap: 1.25rem; } }
.kte-detail__fact p { margin: 0; font-size: var(--kte-font-size-sm); line-height: 1.5; color: var(--kte-color-text); }

.kte-detail__about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@container kte-detail (max-width: 580px) { .kte-detail__about-grid { grid-template-columns: 1fr; } }
.kte-detail__about-item {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.kte-detail__about-item .kte-icon { color: var(--kte-color-muted); width: var(--kte-icon); height: var(--kte-icon); flex-shrink: 0; margin-top: 1px; }
.kte-detail__about-item strong {
    display: block;
    font-size: var(--kte-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kte-color-muted);
    margin-bottom: .25rem;
    line-height: 1.3;
}
.kte-detail__about-item span { color: var(--kte-color-text); font-size: var(--kte-font-size-sm); line-height: 1.5; }

/* Einheitliche Vertikal-Rhythmik für alle Content-Sections der Detailseite.
   Statt vorher: jede Section hatte eigene margin + padding + border-top-Kombi —
   was unterschiedliche Werte zwischen den Sections (1.75rem padding vs. 1.25rem,
   2rem margin vs. 2.5rem) und Collapsing-Margin-Effekte ergab. Jetzt: ein
   einziger Selektor für alle direkt-Children-Sections, gleiche Werte überall. */
.kte-detail__main > .kte-detail__description,
.kte-detail__main > section,
.kte-detail__main > .kte-detail__footer {
    margin: 0;
    padding-top: 2.25rem;
    border-top: 1px solid var(--kte-color-border);
}

/* Responsive 16:9-Container für oEmbed-Videos (YouTube/Vimeo).
   wp_oembed_get() liefert iframes mit fixen width/height-Attributen;
   ohne diese Regel würde das Theme die Breite auf 100% strecken,
   die Höhe aber auf den hartcodierten 281px belassen. */
.kte-detail__video iframe,
.kte-detail__video object,
.kte-detail__video embed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    border-radius: var(--kte-radius);
    max-width: 100%;
}
.kte-detail__employer p { font-size: var(--kte-font-size); line-height: 1.55; margin: 0 0 1rem; }

/* Erste h3 in einer Section: kein zusätzliches margin-top, weil die Section
   ihren eigenen padding-top hat. Alle nachfolgenden h3 (z. B. Benefits/Kultur
   unter „Warum wir?") behalten das normale h3-Margin oben für klare Trennung. */
.kte-detail__main > section > h3.kte-detail__label:first-child {
    margin-top: 0;
}
.kte-detail__events { font-size: var(--kte-font-size-sm); }
.kte-detail__events li { padding: .4rem 0; }
.kte-detail__events a { color: var(--kte-color-primary); text-decoration: none; font-weight: 500; }
.kte-detail__events a:hover { text-decoration: underline; }

.kte-detail__gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
}
.kte-detail__gallery-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kte-radius-sm); display: block; }
.kte-detail__gallery-grid a { display: block; overflow: hidden; border-radius: var(--kte-radius-sm); transition: transform .12s ease; }
.kte-detail__gallery-grid a:hover { transform: scale(1.02); }

.kte-detail__chip {
    display: inline-block;
    padding: .2rem .65rem;
    background: var(--kte-color-bg-tint);
    color: var(--kte-color-text);
    border-radius: var(--kte-radius-pill);
    font-size: var(--kte-font-size-xs);
    margin-right: .35rem;
    font-weight: 500;
}

/* ---------- Vorschau-Banner ---------- */
.kte-preview-wrapper { max-width: 1100px; margin: 0 auto; }
.kte-preview-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--kte-color-warning-bg);
    color: var(--kte-color-warning);
    padding: .75rem 1.25rem;
    border-radius: var(--kte-radius);
    margin-bottom: 1.5rem;
    font-size: var(--kte-font-size-sm);
    flex-wrap: wrap;
    gap: .5rem;
    border: 1px solid var(--kte-color-warning-border);
}
.kte-preview-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Detail-Seite v0.3.0: Hierarchie, Akzente, Social-Reihenfolge ---------- */

/* „Aussteller"-Type-Label oben im Hauptbereich — bewusst größer und nicht
   uppercase, damit der Aussteller-Kontext sofort lesbar ist. */
.kte-detail__type-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--kte-font-size-lg);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--kte-color-text);
    margin: 0 0 .65rem;
    line-height: 1.3;
}

/* Metadata-Icons (Branche, Zielgruppen, Sprachen, Mitarbeitende) in Brand-Rot;
   Kontakt-Icons bleiben grau (siehe `.kte-detail__contact-list .kte-icon`). */
.kte-detail__facts .kte-detail__label .kte-icon,
.kte-detail__about-item > .kte-icon {
    color: var(--kte-color-primary);
}

/* Social-Block am Ende des Kontaktmoduls — zusätzlicher Top-Margin zur Abgrenzung
   gegen die Kontaktliste, plus dezente Trennlinie. */
.kte-detail__socials--bottom {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kte-color-border);
}

/* Section-Headings im Employer-Block (Warum wir / Benefits / Kultur & Werte):
   linker Brand-Akzent + größere Schrift, damit die Überschriften auch bei viel
   Fließtext klar als Trenner erkennbar bleiben. Bewusst nicht über die globale
   `h3.kte-detail__label`-Regel, damit andere Bereiche (Über uns, Auf der Messe,
   Video, Eindrücke) unverändert bleiben. */
.kte-detail__employer-heading {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--kte-color-text);
    margin: 1.75rem 0 .75rem;
    padding-left: 12px;
    border-left: 4px solid var(--kte-color-primary);
}
.kte-detail__employer-heading:first-child { margin-top: 0; }

/* ---------- Mobile-Anpassungen ---------- */
@media (max-width: 540px) {
    .kte-form, .kte-dashboard, .kte-profile-edit { padding: 1.25rem; margin: 1rem auto; }
    .kte-detail { margin: 0 0 2rem; border-radius: 0; border-left: 0; border-right: 0; }
    .kte-profile-edit__title { font-size: var(--kte-font-size-xl); }
    .kte-detail__title { font-size: 24px; }
    h3.kte-detail__label { font-size: 18px; }
    .kte-detail__employer-heading { font-size: 19px; }
    .kte-detail__type-label { font-size: var(--kte-font-size); }
    .kte-detail__sidebar h3.kte-detail__sidebar-heading { font-size: 17px; }
    .kte-detail__teaser { font-size: var(--kte-font-size); }
    .kte-button { width: 100%; }
    .kte-button--sm { width: auto; }
    .kte-profile-actions .kte-button { width: 100%; }
    .kte-form .kte-button { width: 100%; }
}