:root {
    --steckbrief-radius: 6px;
}

.steckbrief-page {
    max-width: 1200px;
    margin: 28px auto;
    padding: 0 20px;
    color: var(--fire-text);
}

.steckbrief-usercp-nav {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    clear: both;
}

.steckbrief-usercp-nav::after {
    content: "";
    display: table;
    clear: both;
}

.steckbrief-main,
.steckbrief-status,
.steckbrief-field,
.steckbrief-wanted,
.steckbrief-adminbox {
    background: var(--fire-panel-alpha-soft);
    border: 1px solid var(--fire-border-soft);
    border-radius: var(--steckbrief-radius);
}

.steckbrief-main {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    clear: both;
}

.steckbrief-main h1 {
    margin: 0 0 18px;
    color: var(--fire-text-strong);
}

.steckbrief-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--fire-panel);
}

.steckbrief-field,
.steckbrief-wanted {
    position: relative;
    margin: 0 0 14px;
    padding: 16px;
}

.steckbrief-field > label,
.steckbrief-wanted > label,
#steckbrief-wanted-users > label {
    display: block;
    margin-bottom: 7px;
    color: var(--fire-text-strong);
    font-weight: 700;
}

.steckbrief-description,
.steckbrief-locknote,
.steckbrief-field small,
.steckbrief-wanted small {
    margin-bottom: 9px;
    color: var(--fire-text-muted);
    font-size: .92em;
}

.steckbrief-required {
    margin-left: 4px;
    color: var(--fire-accent-bright);
}

.steckbrief-field input[type="text"],
.steckbrief-field input[type="date"],
.steckbrief-field textarea,
.steckbrief-field select,
#steckbrief-wanted-user-search {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    color: var(--fire-text);
    background: var(--fire-bg-deep);
    border: 1px solid var(--fire-border);
    border-radius: var(--steckbrief-radius);
}

.steckbrief-field input[type="text"]:focus,
.steckbrief-field input[type="date"]:focus,
.steckbrief-field textarea:focus,
.steckbrief-field select:focus,
#steckbrief-wanted-user-search:focus {
    outline: none;
    border-color: var(--fire-accent-medium);
    box-shadow: 0 0 0 2px var(--fire-glow);
}

.steckbrief-field textarea {
    resize: vertical;
}

.steckbrief-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
}

.steckbrief-field-locked {
    opacity: .72;
}

.steckbrief-save-state {
    min-height: 18px;
    margin-top: 6px;
    color: var(--fire-text-muted);
    font-size: .82em;
    text-align: right;
}

.steckbrief-save-state.is-saved {
    color: var(--fire-accent-light);
}

.steckbrief-save-state.is-error {
    color: var(--fire-accent-bright);
}

.steckbrief-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.steckbrief-actions button,
.steckbrief-actions .button,
.steckbrief-warning button,
.steckbrief-wob-form button,
.steckbrief-delete-form button {
    display: inline-block;
    box-sizing: border-box;
    padding: 9px 14px;
    color: var(--fire-text-strong);
    background: var(--fire-button-gradient);
    border: 1px solid var(--fire-border);
    border-radius: var(--steckbrief-radius);
    cursor: pointer;
    text-decoration: none;
}

.steckbrief-actions button:hover,
.steckbrief-actions .button:hover,
.steckbrief-warning button:hover,
.steckbrief-wob-form button:hover,
.steckbrief-delete-form button:hover {
    color: var(--fire-white-soft);
    background: var(--fire-button-gradient-hover);
    border-color: var(--fire-accent-light);
}

.steckbrief-actions .steckbrief-submit {
    font-weight: 700;
    background: var(--fire-button-gradient-hover);
}

.steckbrief-userchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.steckbrief-userchip,
.steckbrief-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: var(--fire-text-soft);
    background: var(--fire-bg-dark);
    border: 1px solid var(--fire-border-soft);
    border-radius: 999px;
}

.steckbrief-userchip button {
    padding: 0;
    color: var(--fire-text-muted);
    background: var(--fire-transparent);
    border: 0;
    cursor: pointer;
    font-size: 1.2em;
}

.steckbrief-userchip button:hover {
    color: var(--fire-accent-bright);
}

.steckbrief-suggestions {
    position: relative;
    z-index: 20;
    display: grid;
    background: var(--fire-panel);
    border: 1px solid var(--fire-border);
    border-top: 0;
    box-shadow: var(--fire-shadow-tooltip);
}

.steckbrief-suggestions:empty {
    display: none;
}

.steckbrief-suggestion {
    padding: 8px 10px;
    color: var(--fire-text);
    background: var(--fire-transparent);
    border: 0;
    border-bottom: 1px solid var(--fire-border-soft);
    cursor: pointer;
    text-align: left;
}

.steckbrief-suggestion:hover,
.steckbrief-suggestion:focus {
    color: var(--fire-text-strong);
    background: var(--fire-hover-alpha);
}

.steckbrief-warning {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    color: var(--fire-white-soft);
    background: var(--fire-panel-gradient);
    border-bottom: 1px solid var(--fire-accent-medium);
    box-shadow: var(--fire-shadow-top);
}

.steckbrief-warning form {
    margin: 0;
}

.steckbrief-display-row,
.steckbrief-post-field {
    margin: 0 0 12px;
}

.steckbrief-display-label,
.steckbrief-post-label {
    display: block;
    margin-bottom: 3px;
    color: var(--fire-accent-light);
    font-size: .85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.steckbrief-adminbox {
    margin-top: 18px;
    padding: 14px;
    background: var(--fire-panel-gradient);
    border-color: var(--fire-border);
}

.steckbrief-admin-wanted {
    margin: 8px 0 12px;
    color: var(--fire-text-soft);
}

.steckbrief-adminbox .button {
    display: inline-block;
    margin: 3px 4px 3px 0;
}

.steckbrief-wob-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fire-border-soft);
}

.steckbrief-wob-form > label,
.steckbrief-wob-form fieldset {
    display: block;
    margin: 0 0 10px;
}

.steckbrief-wob-form select {
    margin-left: 8px;
    color: var(--fire-text);
    background: var(--fire-bg-deep);
    border: 1px solid var(--fire-border);
}

.steckbrief-wob-group {
    display: inline-block;
    margin: 3px 14px 3px 0;
}

.steckbrief-delete-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fire-border-soft);
}

.steckbrief-delete-form .steckbrief-delete-button {
    color: var(--fire-white-soft);
    background: var(--fire-accent-dark);
    border-color: var(--fire-accent-medium);
}

.steckbrief-delete-form .steckbrief-delete-button:hover {
    color: var(--fire-white-soft);
    background: var(--fire-accent-medium);
    border-color: var(--fire-accent-light);
}

@media (max-width: 760px) {
    .steckbrief-page {
        padding: 0 10px;
    }

    .steckbrief-main {
        padding: 16px;
    }

    .steckbrief-warning {
        flex-direction: column;
        align-items: stretch;
    }

    .steckbrief-warning button {
        width: 100%;
    }
}