/* ==============================================
   FAMILIENKIEZ - BUTTONS (NEO-BRUTALISM)
   Hard Edges, High Contrast.
   ============================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--brutal-radius);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;

    /* The Brutal Core - nutzt zentrale Tokens */
    border: var(--brutal-border);
    box-shadow: var(--brutal-shadow);
    position: relative;
    top: 0;
    left: 0;
}

/* --- Interaction --- */
.btn:hover,
.btn:active {
    transform: translate(2px, 2px);
    /* Physical Press */
    box-shadow: var(--shadow-none);
    /* Schatten verschwindet */
}

/* --- Variants --- */

/* Press Buttons: Light Mode nutzt Variante A, Dark Mode kommt über Tokens */
.btn-primary,
.btn-secondary,
.btn-action,
.btn-external {
    background: var(--btn-solid-bg, var(--color-ink));
    color: var(--btn-solid-text, var(--text-light));
    border-color: var(--btn-solid-border, var(--color-ink));
}

/* Einheitlicher Hover & Active Zustand für gefüllte Buttons: Gelb mit Schwarzer Schrift */
.btn-primary:hover,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:active,
.btn-action:hover,
.btn-action:active,
.btn-external:hover,
.btn-external:active {
    background: var(--btn-solid-hover-bg, var(--color-yellow));
    color: var(--btn-solid-hover-text);
    border-color: var(--btn-solid-hover-border);
}

/* Icons within Buttons */
.btn i {
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* Block Button */
.btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* --- Action Icons (Square) --- */
.btn-action-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--brutal-border);
    background: var(--bg-card);
    box-shadow: var(--brutal-shadow);
    border-radius: 8px;
    /* Slightly rounded squares */
    cursor: pointer;
}

.btn-action-icon:hover {
    transform: translate(1px, 1px);
    box-shadow: var(--shadow-none);
}

/* Outline Button */
.btn-outline {
    background: transparent;
    color: var(--color-ink);
    border: var(--brutal-border);
    box-shadow: none;
}

.btn-outline:hover,
.btn-outline:active {
    background: var(--color-yellow);
    color: var(--text-on-bright);
    box-shadow: var(--brutal-shadow);
    transform: translate(-1px, -1px);
}

/* Delete Action */
.btn-delete-icon {
    background: var(--bg-card);
    color: var(--color-coral);
}

.btn-delete-icon:hover {
    background: var(--color-coral);
    color: var(--color-ink);
}

/* Danger Button (Solid, own base color) */
.btn-danger {
    background: var(--danger-color);
    color: var(--text-light);
    border-color: var(--btn-solid-border, var(--color-ink));
}

.btn-danger:hover,
.btn-danger:active {
    background: var(--btn-solid-hover-bg, var(--color-yellow));
    color: var(--btn-solid-hover-text);
    border-color: var(--btn-solid-hover-border);
}

/* Ghost Button (Transparent, minimal) */
.btn-ghost {
    background: transparent;
    color: var(--color-ink);
    border: none;
    box-shadow: none;
    text-transform: none;
    font-weight: 600;
}

.btn-ghost:hover {
    background: var(--bg-surface-2);
    box-shadow: none;
    transform: none;
}

/* Small Button Variant */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 8px;
    /* Slightly smaller radius for small buttons */
    /* Ensure borders scale down visually if needed, though tokens handle most */
}

/* Outline Neo Button (For Chat/Icons) */
.btn-outline-neo {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-main);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: background 0.2s;
}

.btn-outline-neo:hover,
[data-theme="dark"] .btn-outline-neo:hover {
    background: var(--overlay-10);
}