/* TEMPLATE 1: NEO-BRUTALISM
   Aktivierung: Klasse .cn-template-1 auf Body (Global) oder Element (Lokal)
*/

.cn-template-1 {
    /* --- COLORS OVERRIDE --- */
    --cn-primary: #000000;
    --cn-primary-hover: #333333;
    --cn-secondary: #ffcc00;
    --cn-success: #00ff66;
    --cn-danger: #ff3333;
    --cn-info: #3399ff;
    /* --- BASICS OVERRIDE --- */
    --cn-bg-body: #f0f0f0;
    --cn-bg-surface: #ffffff;
    --cn-bg-panel: #ffffff;
    --cn-text-main: #000000;
    --cn-text-muted: #444444;
    --cn-border-color: #000000;
    --cn-border-radius: 0px; /* Eckig */
    --cn-border-radius-sm: 0px;
    --cn-border-radius-lg: 0px;
    /* --- FONT --- */
    --cn-font-family: 'Courier New', Courier, monospace;
    --cn-font-heading: 'Courier New', Courier, monospace;
}

    /* Spezifische Layout-Anpassungen für dieses Template */

    /* Karten mit hartem Schatten */
    .cn-template-1 .cn-card {
        border: 2px solid var(--cn-border-color);
        box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
        transition: transform 0.1s;
    }

        .cn-template-1 .cn-card:hover {
            transform: translate(-2px, -2px);
            box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
        }

    /* Buttons massiv */
    .cn-template-1 .cn-btn {
        border: 2px solid #000;
        text-transform: uppercase;
        font-weight: 900;
        box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
    }

        .cn-template-1 .cn-btn:hover {
            transform: translate(-1px, -1px);
            box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
        }

    .cn-template-1 .cn-btn-primary {
        background-color: var(--cn-secondary); /* Gelb als Akzent */
        color: #000;
    }

    /* Inputs */
    .cn-template-1 .cn-input,
    .cn-template-1 .cn-textarea,
    .cn-template-1 .cn-select {
        border: 2px solid #000;
        background: #fff;
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
    }

        .cn-template-1 .cn-input:focus {
            box-shadow: 3px 3px 0px 0px #000;
        }

    /* Navbar */
    .cn-template-1 .cn-navbar {
        border-bottom: 3px solid #000;
        background: var(--cn-secondary);
    }

    /* Badges */
    .cn-template-1 .cn-badge {
        border: 1px solid #000;
        color: #000;
        background: #fff;
    }