/* M·A·D Design System V1.3 — angewendet aus assets/Design */

@font-face {
    font-family: 'MAD_Regular';
    src: url('/assets/Fonts/MAD_Regular.otf') format('opentype'),
         url('/assets/Fonts/MAD_Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'MAD_Bold';
    src: url('/assets/Fonts/MAD_Bold.otf') format('opentype'),
         url('/assets/Fonts/MAD_Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'MAD_Italic';
    src: url('/assets/Fonts/MAD_Italic.otf') format('opentype'),
         url('/assets/Fonts/MAD_Italic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'MAD_Symbols';
    src: url('/assets/Fonts/MAD_Symbols.otf') format('opentype'),
         url('/assets/Fonts/MAD_Symbols.ttf') format('truetype');
    font-display: swap;
}

:root {
    --mad-accent: #a82f0d;
    --mad-accent-hover: #a82f0d;
    --mad-accent-pressed: #a82f0d;
    --mad-button: #7A3200;
    --mad-button-hover: #5C2500;
    --mad-heading-dark: #ffd3b7;
    --mad-heading-light: #a82f0d;
    --mad-weiss: #FFFFFF;
    --mad-schwarz: #000000;
    --mad-fliederfarben: #ffd3b7;
    --mad-dunkellila: #a82f0d;
    --mad-bg-dark: #414A4C;
    --mad-bg-panel: #353D40;
    --mad-bg-input: #384145;
    --mad-bg-elevated: #384145;
    --mad-bg-light: #F5F2F8;
    --mad-bg-panel-light: #EDE8F4;
    --mad-bg-card-light: #FAF8FC;
    --mad-bg-input-light: #FFFFFF;
    --mad-bg-elevated-light: #FAF8FC;
    --mad-bg-white: #FFFFFF;
    --mad-bg-doc-panel: #F2F2F2;
    --mad-text-dark: #FFFFFF;
    --mad-text-secondary-dark: #FFFFFF;
    --mad-text-light: #000000;
    --mad-text-secondary-light: #000000;
    --mad-text-disabled-light: #000000;
    --mad-text-doc: #000000;
    --mad-text-on-accent: #D7D2C4;
    --mad-border-dark: #a82f0d;
    --mad-border-light: #a82f0d;
    --mad-success: #D5FFD5;
    --mad-success-text: #375623;
    --mad-error: #FFD5D5;
    --mad-error-text: #C00000;
    --mad-error-strong: #FFD5D5;
    --mad-warning: #F0A020;
    --mad-titlebar: #a82f0d;
    --mad-base-size: 18px;
    --mad-border-radius: 6px;

    --mad-hover: var(--mad-button-hover);
    --mad-bg: var(--mad-bg-dark);
    --mad-panel: var(--mad-bg-panel);
    --mad-input: var(--mad-bg-input);
    --mad-elevated: var(--mad-bg-elevated);
    --mad-text: var(--mad-text-dark);
    --mad-secondary: var(--mad-text-secondary-dark);
    --mad-disabled: #FFFFFF;
    --mad-heading: var(--mad-heading-dark);
    --mad-border: rgba(141,153,158,.22);

    --accent: var(--mad-accent);
    --accent-h: var(--mad-accent-hover);
    --accent-hover: var(--mad-accent-hover);
    --accent-p: var(--mad-accent-pressed);
    --accent-press: var(--mad-accent-pressed);
    --hd: var(--mad-heading-dark);
    --bg: var(--mad-bg-dark);
    --panel: var(--mad-bg-panel);
    --field-bg: var(--mad-bg-input);
    --input: var(--mad-bg-input);
    --inp: var(--mad-bg-input);
    --elev: var(--mad-bg-elevated);
    --elevated-bg: var(--mad-bg-elevated);
    --text: var(--mad-text-dark);
    --tx: var(--mad-text-dark);
    --text-s: var(--mad-text-secondary-dark);
    --text-sec: var(--mad-text-secondary-dark);
    --ts: var(--mad-text-secondary-dark);
    --text-d: #FFFFFF;
    --td: #FFFFFF;
    --border: rgba(141,153,158,.22);
    --border-sub: rgba(141,153,158,.22);
    --tb: var(--mad-titlebar);
    --title-bar: var(--mad-titlebar);
    --titlebar: var(--mad-titlebar);
    --accent-hover: var(--mad-accent-hover);
    /* Kurz-Aliase aller App-Familien -> zentrale Tokens (damit Seiten ohne eigenen :root auskommen) */
    --ac: var(--mad-accent);
    --ap: var(--mad-accent);
    --btn: var(--mad-button);
    --btnh: var(--mad-button-hover);
    --bo: rgba(168,47,13,.5);
    --erd: var(--mad-error);
    --txt: var(--mad-text);
    --txt-s: var(--mad-secondary);
    --seam: #6e6c70;
    /* matrix-Extras */
    --mad-text-sec: var(--mad-secondary);
    --mad-text-disabled: var(--mad-disabled);
    --mad-success-hover: var(--mad-success);
    --mad-success-pressed: var(--mad-success);
    --mad-error-hover: var(--mad-error);
    --mad-error-pressed: var(--mad-error);
    --mad-disabled-bg: #5E5E5E;
    --mad-secondary-bg: var(--mad-bg-elevated);
    --mad-secondary-hover: var(--mad-bg-elevated);
    --mad-secondary-pressed: var(--mad-bg-elevated);
    /* roundsticker-Familie */
    --acc: var(--mad-accent);
    --accd: var(--mad-accent);
    --acc-hi: var(--mad-accent-hover);
    --acc-text: var(--mad-text-on-accent);
    --input-field: var(--mad-input);
    --success: var(--mad-success);
    --danger: var(--mad-error);
    --r: var(--mad-border-radius);
    /* Sticker-Picker-Familie (Papier -> zentrale Flächen) */
    --danger-text: var(--mad-error-text);
    --success-text: var(--mad-success-text);
    --text-disabled: var(--mad-disabled);
    --font-bold: 'MAD_Bold';
    --paper: var(--mad-bg-panel);
    --paper-line: var(--mad-border);
    --paper-muted: var(--mad-secondary);
    --surface-soft: var(--mad-bg-elevated);
    /* logo.php-Familie */
    --bg-panel: var(--mad-bg-panel);
    --bg-input: var(--mad-bg-input);
    --bg-elev: var(--mad-bg-elevated);
    --heading: var(--mad-heading);
    --ok: var(--mad-success);
    --success: var(--mad-success);
    --er: var(--mad-error);
    --danger: var(--mad-error);
    --wa: var(--mad-warning);
    --btn-text: var(--mad-text-on-accent);
    --font: 'MAD_Regular';
    --ff: 'MAD_Regular';
    --mono: 'MAD_Regular';
}

[data-theme="light"] {
    --mad-bg: var(--mad-bg-light);
    --mad-panel: var(--mad-bg-panel-light);
    --mad-input: var(--mad-bg-input-light);
    --mad-elevated: var(--mad-bg-elevated-light);
    --mad-text: var(--mad-text-light);
    --mad-secondary: var(--mad-text-secondary-light);
    --mad-disabled: var(--mad-text-disabled-light);
    --mad-heading: var(--mad-heading-light);
    --mad-border: rgba(122,106,136,.35);
    --mad-success: #D5FFD5;
    --mad-success-text: #375623;
    --mad-error: #FFD5D5;
    --mad-error-text: #C00000;
    --mad-error-strong: #FFD5D5;

    --hd: var(--mad-heading-light);
    --bg: var(--mad-bg-light);
    --panel: var(--mad-bg-panel-light);
    --field-bg: var(--mad-bg-input-light);
    --input: var(--mad-bg-input-light);
    --inp: var(--mad-bg-input-light);
    --elev: var(--mad-bg-elevated-light);
    --elevated-bg: var(--mad-bg-elevated-light);
    --text: var(--mad-text-light);
    --tx: var(--mad-text-light);
    --text-s: var(--mad-text-secondary-light);
    --text-sec: var(--mad-text-secondary-light);
    --ts: var(--mad-text-secondary-light);
    --text-d: var(--mad-text-disabled-light);
    --td: var(--mad-text-disabled-light);
    --border: rgba(122,106,136,.35);
    --border-sub: rgba(122,106,136,.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--mad-bg);
    color: var(--mad-text);
    font-family: 'MAD_Regular';
    font-size: var(--mad-base-size);
    line-height: 1.4;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'MAD_Bold';
    font-weight: 700;
    margin: 0 0 .4em;
    color: var(--mad-text);
}
h1 { font-size: 2.08em; }
h2 { font-size: 1.69em; }
h3 { font-size: 1.43em; }

/* Kursiv NUR unter Überschriften als Erklärung */
h1 + .mad-explain,
h2 + .mad-explain,
h3 + .mad-explain,
h4 + .mad-explain {
    font-family: 'MAD_Italic';
    font-style: italic;
    color: var(--mad-secondary);
    font-size: 1.17em;
    margin: -.2em 0 1em;
    display: block;
}

/* ── Titlebar ───────────────────────────────────────────── */
.mad-titlebar {
    height: 44px;
    background: var(--mad-titlebar);
    color: var(--mad-text-on-accent);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.mad-titlebar img.mad-logo {
    height: 34px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.mad-titlebar .mad-title {
    font-family: 'MAD_Bold';
    font-size: 1.08em;
    flex: 1;
    text-align: center;
}
.mad-titlebar .mad-tb-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Layout ─────────────────────────────────────────────── */
.mad-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.mad-main {
    flex: 1;
    padding: 16px;
    padding-bottom: 170px; /* Platz für Log-Fenster */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.mad-panel {
    background: var(--mad-panel);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

/* ── Buttons ────────────────────────────────────────────── */
.mad-btn {
    max-height: 27px;
    height: 27px;
    line-height: 1;
    padding: 0 10px;
    font-family: 'MAD_Bold';
    font-weight: 700;
    font-size: 17px;
    border-radius: 4px;
    border: none;
    background: var(--mad-button);
    color: var(--mad-text-on-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .12s;
}
.mad-btn:hover    { background: var(--mad-button-hover); }
.mad-btn:disabled { background: var(--mad-disabled); cursor: not-allowed; }
.mad-btn.danger   { background: var(--mad-error); }
.mad-btn.danger:hover { background: var(--mad-error-strong); }
.mad-btn.success  { background: var(--mad-success); color: var(--mad-text-doc); }
.mad-btn.ghost    { background: transparent; color: var(--mad-text); border: 1px solid var(--mad-accent); }

/* ── Inputs ─────────────────────────────────────────────── */
.mad-input, select.mad-input, textarea.mad-input {
    background: var(--mad-input);
    color: var(--mad-text);
    border: 1px solid var(--mad-elevated);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: 'MAD_Regular';
    font-size: 18px;
    width: 100%;
}
.mad-input:focus { outline: 2px solid var(--mad-accent); outline-offset: -1px; }
label.mad-label {
    display: block;
    font-size: 17px;
    color: var(--mad-secondary);
    margin: 8px 0 4px;
    font-family: 'MAD_Bold';
}

/* ── Tabellen ───────────────────────────────────────────── */
.mad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}
.mad-table th, .mad-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--mad-elevated);
}
.mad-table th {
    background: var(--mad-elevated);
    font-family: 'MAD_Bold';
    color: var(--mad-secondary);
    font-size: 16px;
    text-transform: uppercase;
}
.mad-table tr:hover td { background: var(--mad-input); }

/* ── Tabs ───────────────────────────────────────────────── */
.mad-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--mad-accent);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.mad-tab {
    padding: 6px 14px;
    background: var(--mad-panel);
    color: var(--mad-secondary);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-family: 'MAD_Bold';
    font-size: 17px;
    border: none;
}
.mad-tab.active { background: var(--mad-button); color: var(--mad-text-on-accent); }
.mad-tab:hover:not(.active) { background: var(--mad-hover); color: var(--mad-text-on-accent); }

/* ── Progress bars (50/50 nebeneinander) ────────────────── */
.mad-progress-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}
.mad-progress {
    position: relative;
    background: var(--mad-input);
    border: 1px solid var(--mad-elevated);
    border-radius: 4px;
    height: 22px;
    overflow: hidden;
}
.mad-progress-fill {
    background: var(--mad-button);
    height: 100%;
    width: 0%;
    transition: width .2s;
}
.mad-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'MAD_Bold';
    font-size: 16px;
    color: var(--mad-text);
    text-shadow: 0 0 3px rgba(0,0,0,.45);
    pointer-events: none;
}

/* ── Log-Fenster (50–150px unten) ───────────────────────── */
.mad-log {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: var(--mad-panel);
    border-top: 2px solid var(--mad-accent);
    display: flex;
    flex-direction: column;
    z-index: 90;
}
.mad-log-head {
    height: 24px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mad-elevated);
    font-family: 'MAD_Bold';
    font-size: 16px;
    color: var(--mad-secondary);
}
.mad-log-body {
    flex: 1;
    overflow-y: auto;
    font-family: 'MAD_Regular';
    font-size: 16px;
    padding: 6px 10px;
    color: var(--mad-secondary);
    white-space: pre-wrap;
}
.mad-log-line { line-height: 1.3; }
.mad-log-line.err { background: var(--mad-error); color: var(--mad-error-text); border: none; font-family: 'MAD_Bold' !important; font-weight: 700; padding: 2px 4px; border-radius: 3px; }
.mad-log-line.ok  { background: var(--mad-success); color: var(--mad-success-text); border: none; font-family: 'MAD_Bold' !important; font-weight: 700; padding: 2px 4px; border-radius: 3px; }

/* ── Scrollbars ─────────────────────────────────────────── */
* { scrollbar-color: var(--mad-accent) var(--mad-panel); scrollbar-width: thin; }
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: var(--mad-panel); }
*::-webkit-scrollbar-thumb   { background: var(--mad-accent); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--mad-hover); }

/* ── Drop-Zone ──────────────────────────────────────────── */
.mad-drop {
    border: 2px dashed var(--mad-accent);
    border-radius: 6px;
    padding: 30px;
    text-align: center;
    color: var(--mad-secondary);
    cursor: pointer;
    transition: all .15s;
    background: var(--mad-input);
}
.mad-drop.over { background: var(--mad-elevated); border-color: var(--mad-accent); color: var(--mad-text); }

/* ── Login zentriert ────────────────────────────────────── */
.mad-login-wrap {
    min-height: calc(100vh - 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mad-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--mad-panel);
    border-radius: 8px;
    padding: 24px;
    box-shadow: none;
}

/* ── Flash / Alerts ─────────────────────────────────────── */
.mad-flash {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 18px;
}
.mad-flash.ok  { background: #D5FFD5; color: #375623; border: none; font-family: 'MAD_Bold' !important; font-weight: 700; }
.mad-flash.err { background: #FFD5D5; color: #C00000; border: none; font-family: 'MAD_Bold' !important; font-weight: 700; }

button,
input,
select,
textarea {
    font-family: 'MAD_Regular' !important;
}

label {
    color: var(--mad-secondary) !important;
}

canvas {
    background: transparent !important;
    border-color: var(--mad-border) !important;
    box-shadow: none !important;
}

button,
.btn,
.btn-primary,
.btn-export,
.btn-sb,
.dl-btn,
.tab-btn.active,
.mode-tab.active,
.cat-chip.active {
    background: #7A3200 !important;
    color: #D7D2C4 !important;
    border-color: #4a1e00 !important;
    box-shadow: none !important;
}

.theme-btn,
.theme-toggle,
.tb-theme {
    background: transparent !important;
    color: #ffd3b7 !important;
    border-color: rgba(255,255,255,.3) !important;
    box-shadow: none !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-export:hover,
.btn-sb:hover,
.dl-btn:hover {
    background: #5C2500 !important;
    color: #D7D2C4 !important;
}

.theme-btn:hover,
.theme-toggle:hover,
.tb-theme:hover {
    background: rgba(255,255,255,.15) !important;
    color: #ffd3b7 !important;
}

.btn-d,
.btn-danger,
.btn-sb-danger,
.danger,
.modal-close:hover {
    background: var(--mad-error) !important;
    color: var(--mad-error-text) !important;
    border: none !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.btn-g,
.btn-ghost,
.btn-sb-outline,
.mad-btn.ghost,
.mode-tab:not(.active),
.cat-chip:not(.active),
.theme-btn,
.theme-toggle,
.tb-theme {
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
}

.btn-g:hover,
.btn-ghost:hover,
.btn-sb-outline:hover,
.mad-btn.ghost:hover,
.mode-tab:not(.active):hover,
.cat-chip:not(.active):hover,
.theme-btn:hover,
.theme-toggle:hover,
.tb-theme:hover {
    background: var(--mad-elevated) !important;
    color: var(--mad-text) !important;
}

input,
select,
textarea,
.mad-in,
.mad-sel,
.mad-ta,
.picker-hex,
.param-num,
.param-select {
    background: var(--mad-input) !important;
    border: 1px solid var(--mad-border) !important;
    border-radius: 4px !important;
}

body,
.app-layout,
.canvas-area,
.wrap,
.main,
.res-side {
    background: var(--mad-bg) !important;
    color: var(--mad-text) !important;
    font-family: 'MAD_Regular' !important;
}

.titlebar,
.title-bar,
.mad-titlebar,
.mad-design-titlebar {
    height: 44px !important;
    background: var(--mad-titlebar) !important;
    color: var(--mad-text-on-accent) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.titlebar img,
.title-bar img,
.mad-titlebar > img,
.mad-titlebar img.mad-logo,
.mad-design-titlebar img {
    height: 34px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

.header-logo,
.mad-header-logo,
.login-logo,
.hero-logo {
    height: clamp(112px, 14vw, 220px) !important;
    width: auto !important;
    max-width: min(48vw, 320px) !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

.header,
header,
.card,
.tile,
.box,
.sidebar,
.settings-card,
.gen-card,
.kat-card,
.modal,
.logo-card,
.dl-card,
.bg-card,
.swatch,
.mad-panel,
.form-side,
.log-wrap,
.mad-log,
.mad-design-shell {
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
    border-radius: var(--mad-border-radius) !important;
    box-shadow: none !important;
}

.card-head,
.log-head,
.mad-log-head,
.modal-header,
.sb-head,
.mad-design-head,
.mad-design-progress {
    background: var(--mad-elevated) !important;
    color: var(--mad-secondary) !important;
    border-color: var(--mad-border) !important;
}

.header-sub,
.tile-desc,
.footer,
.hint,
.note,
.drop-label,
.preview-hint,
.logo-card-size,
.dl-desc,
.swatch-hex,
.brand-sub,
.mad-explain {
    font-family: 'MAD_Italic' !important;
    color: var(--mad-secondary) !important;
}

.sec,
.sec-title,
.card-head,
.res-head,
.sb-head,
h1,
h2,
h3,
h4,
.tile-name,
.brand-name,
.header-name {
    font-family: 'MAD_Bold' !important;
    color: var(--mad-heading) !important;
}

.mad-title,
.titlebar-txt,
.tb-title,
.badge,
.btn,
.mad-btn,
button {
    font-family: 'MAD_Bold' !important;
}

.mad-titlebar .mad-title,
.titlebar .tb-title,
.titlebar .titlebar-txt,
.title-bar .title-text {
    color: var(--mad-text-on-accent) !important;
}

a[aria-disabled="true"] {
    cursor: default !important;
    opacity: .72;
}

.log-body,
.mad-log-body,
.ilog,
.render-console,
.console,
.mad-design-log-body {
    font-family: 'MAD_Regular' !important;
    color: var(--mad-secondary) !important;
}

.log-wrap,
.mad-log,
.mad-design-shell {
    height: 75px !important;
    max-height: 75px !important;
    background: var(--mad-panel) !important;
    border-top: 1px solid var(--mad-accent) !important;
}

.log-head,
.mad-log-head,
.mad-design-head {
    background: var(--mad-elevated) !important;
    color: var(--mad-text-on-accent) !important;
}

.log-body,
.mad-log-body,
.mad-design-log-body {
    background: var(--mad-bg) !important;
    color: var(--mad-text) !important;
}

.layout,
.tab-pane,
.tab-pane.active,
.settings-pane {
    height: calc(100vh - 36px - 38px - 75px) !important;
}

.mad-design-shell {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(220px, 35%) 1fr;
    z-index: 999;
}

.mad-design-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 8px;
    align-items: center;
}

.mad-design-bar {
    position: relative;
    height: 22px;
    background: var(--mad-input);
    border: 1px solid var(--mad-border);
    border-radius: 4px;
    overflow: hidden;
}

.mad-design-fill {
    height: 100%;
    width: 0;
    background: var(--mad-button);
}

.mad-design-bar:nth-child(2) .mad-design-fill {
    background: var(--mad-button-hover);
}

.mad-design-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'MAD_Bold';
    font-size: 11px;
    color: var(--mad-text);
}

.mad-design-log {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-left: 1px solid var(--mad-border);
}

.mad-design-head {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-family: 'MAD_Bold';
    font-size: 12px;
}

.mad-design-log-body {
    overflow-y: auto;
    padding: 4px 8px;
    font-size: 11px;
}

.mad-design-export {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
}

body.mad-design-padding {
    padding-bottom: 75px !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .mad-progress-row { grid-template-columns: 1fr; }
    .mad-titlebar .mad-title { font-size: 1.1em; }
    .mad-main { padding: 10px; padding-bottom: 160px; }
    .mad-design-shell {
        grid-template-columns: 1fr;
        height: 120px !important;
        max-height: 120px !important;
    }
    body.mad-design-padding {
        padding-bottom: 120px !important;
    }
}

/* Matrix palette lock: final cascade layer for legacy app pages. */
:root,
html[data-theme="dark"] {
    --mad-bg: #414A4C !important;
    --mad-page: #414A4C !important;
    --mad-panel: #353D40 !important;
    --mad-card: #384145 !important;
    --mad-input: #384145 !important;
    --mad-bg-page: #414A4C !important;
    --mad-bg-panel: #353D40 !important;
    --mad-bg-input: #384145 !important;
    --mad-bg-elevated: #384145 !important;
    --mad-elevated: #384145 !important;
    --mad-titlebar: #a82f0d !important;
    --mad-header: #a82f0d !important;
    --mad-accent: #a82f0d !important;
    --mad-accent-hover: #a82f0d !important;
    --mad-hover: #a82f0d !important;
    --mad-accent-pressed: #a82f0d !important;
    --mad-button: #7A3200 !important;
    --mad-button-hover: #5C2500 !important;
    --mad-text: #FFFFFF !important;
    --mad-fg: #FFFFFF !important;
    --mad-secondary: #FFFFFF !important;
    --mad-muted: #FFFFFF !important;
    --mad-border: #a82f0d !important;
    --mad-heading: #ffd3b7 !important;
    --mad-label: #ffd3b7 !important;
    --mad-success: #D5FFD5 !important;
    --mad-error: #FFD5D5 !important;
    --mad-error-strong: #FFD5D5 !important;
}

html[data-theme="light"] {
    --mad-bg: #F5F2F8 !important;
    --mad-page: #F5F2F8 !important;
    --mad-panel: #EDE8F4 !important;
    --mad-card: #FAF8FC !important;
    --mad-input: #FFFFFF !important;
    --mad-bg-page: #F5F2F8 !important;
    --mad-bg-panel: #EDE8F4 !important;
    --mad-bg-input: #FFFFFF !important;
    --mad-bg-elevated: #FAF8FC !important;
    --mad-elevated: #FAF8FC !important;
    --mad-titlebar: #a82f0d !important;
    --mad-header: #a82f0d !important;
    --mad-accent: #a82f0d !important;
    --mad-accent-hover: #a82f0d !important;
    --mad-hover: #a82f0d !important;
    --mad-accent-pressed: #a82f0d !important;
    --mad-button: #7A3200 !important;
    --mad-button-hover: #5C2500 !important;
    --mad-text: #000000 !important;
    --mad-fg: #000000 !important;
    --mad-secondary: #000000 !important;
    --mad-muted: #000000 !important;
    --mad-border: #a82f0d !important;
    --mad-heading: #a82f0d !important;
    --mad-label: #a82f0d !important;
    --mad-success: #D5FFD5 !important;
    --mad-error: #FFD5D5 !important;
    --mad-error-strong: #FFD5D5 !important;
}

body,
.wrap,
.main,
.layout,
.tab-pane,
.tab-pane.active,
.settings-pane,
.canvas-area,
.workspace,
.preview,
.preview-wrap,
.app,
.app-shell,
.mad-main,
.mad-app,
.mad-page,
.page,
.content,
.screen,
.res-side {
    background: var(--mad-bg) !important;
    color: var(--mad-text) !important;
}

.titlebar,
.title-bar,
.mad-titlebar,
.mad-design-titlebar,
.app-titlebar,
.topbar,
.top-bar,
.toolbar-main {
    height: 44px !important;
    min-height: 44px !important;
    background: #a82f0d !important;
    color: #ffd3b7 !important;
    border-color: #a82f0d !important;
}

.titlebar img,
.title-bar img,
.mad-titlebar > img,
.mad-titlebar img,
.mad-design-titlebar img,
.app-titlebar img,
.topbar img,
.top-bar img {
    height: 34px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

.header,
header,
.hero,
.brand,
.card,
.panel,
.tile,
.box,
.login-card,
.login-wrap,
.sidebar,
.side,
.split-side,
.params,
.settings-card,
.gen-card,
.kat-card,
.modal,
.logo-card,
.dl-card,
.bg-card,
.swatch,
.mad-panel,
.form-side,
.drop-zone,
.upload,
.palette,
.matrix-card {
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
    box-shadow: none !important;
}

.card-head,
.panel-head,
.section-head,
.modal-header,
.sb-head,
.res-head,
.params-head,
.palette-head,
.mad-design-progress {
    background: var(--mad-card) !important;
    color: var(--mad-heading) !important;
    border-color: var(--mad-border) !important;
}

input,
select,
textarea,
.input,
.field,
.mad-input,
.drop,
.drop-zone,
.preview-box,
.canvas-box,
.file-box,
.qr-preview,
.swatch-hex,
.color-swatch {
    background-color: var(--mad-input) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
}

button,
.btn,
.mad-btn,
.tool-btn,
.action,
.primary,
[role="button"] {
    background: #7A3200 !important;
    color: #D7D2C4 !important;
    border-color: #4a1e00 !important;
}

.tab,
.tabs button {
    background: var(--mad-card) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
}

button:hover,
.btn:hover,
.mad-btn:hover,
.tab:hover,
.tabs button:hover,
.tool-btn:hover,
.action:hover,
[role="button"]:hover {
    background: var(--mad-button-hover) !important;
    color: #ffd3b7 !important;
    border-color: #a82f0d !important;
}

button.primary,
.btn.primary,
.mad-btn.primary,
.tab.active,
.tabs button.active,
.tool-btn.active,
.action.primary,
.btn.is-active,
.mad-btn.is-active,
.tool-btn.is-active,
[aria-selected="true"] {
    background: var(--mad-button) !important;
    color: #ffd3b7 !important;
    border-color: var(--mad-accent) !important;
}

.tabs,
.tabbar,
.toolbar,
.modebar,
.nav,
.mad-tabs {
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
}

.tabs .active,
.tabbar .active,
.mad-tabs .active,
.nav .active,
.tab.active {
    border-color: var(--mad-accent) !important;
    box-shadow: inset 0 -3px 0 var(--mad-accent) !important;
}

h1,
h2,
h3,
h4,
.sec-title,
.pane-title,
.res-head,
.tile-name,
.brand-name,
.header-name,
.login-title,
.mad-heading {
    color: var(--mad-heading) !important;
}

label,
.label,
.hint,
.note,
.help,
.muted,
.header-sub,
.tile-desc,
.footer,
.drop-label,
.preview-hint,
.logo-card-size,
.dl-desc,
.brand-sub,
.mad-explain {
    color: var(--mad-secondary) !important;
}

.log-wrap,
.mad-log,
.mad-design-shell,
.session-log,
.statusbar,
.status-bar,
.bottom-log {
    height: 75px !important;
    max-height: 75px !important;
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
    border-top: 2px solid var(--mad-accent) !important;
    box-shadow: none !important;
}

.log-head,
.mad-log-head,
.mad-design-head,
.session-log-head,
.status-head {
    background: var(--mad-card) !important;
    color: var(--mad-heading) !important;
    border-color: var(--mad-border) !important;
}

.log-body,
.mad-log-body,
.ilog,
.render-console,
.console,
.mad-design-log-body,
.session-log-body {
    background: var(--mad-panel) !important;
    color: var(--mad-text) !important;
}

.ok,
.success,
.mad-log-line.ok {
    background: var(--mad-success) !important;
    color: var(--mad-success-text) !important;
    border: none !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.err,
.error,
.danger,
.mad-log-line.err {
    background: var(--mad-error) !important;
    color: var(--mad-error-text) !important;
    border: none !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.btn-primary,
.login-btn,
.btn-p,
.btn-sb-primary,
.btn-export:not(.btn-export-secondary):not(.btn-export-link),
.tab-btn.active,
.mad-tab.active,
.mode-tab.active,
.toggle-switch.active,
.param-toggle.on,
button.primary,
.btn.primary,
.mad-btn.primary,
.tool-btn.active,
.action.primary,
.btn.is-active,
.mad-btn.is-active,
.tool-btn.is-active,
[aria-selected="true"] {
    background: var(--mad-button) !important;
    color: #ffd3b7 !important;
    border-color: var(--mad-accent) !important;
}

.btn-primary:hover,
.login-btn:hover,
.btn-p:hover,
.btn-sb-primary:hover,
.btn-export:not(.btn-export-secondary):not(.btn-export-link):hover,
.tab-btn.active:hover,
.mad-tab.active:hover,
.mode-tab.active:hover {
    background: var(--mad-button-hover) !important;
    color: #ffd3b7 !important;
    border-color: var(--mad-button-hover) !important;
}

.btn-export-secondary,
.btn-export-link,
.btn-ghost,
.btn.ghost,
.mad-btn.ghost,
button.ghost {
    background: var(--mad-card) !important;
    color: var(--mad-text) !important;
    border-color: var(--mad-border) !important;
}

.btn-d,
.btn-sb-danger,
button.danger,
.btn.danger,
.mad-btn.danger {
    background: var(--mad-error) !important;
    color: var(--mad-error-text) !important;
    border: none !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.btn-d:hover,
.btn-sb-danger:hover,
button.danger:hover,
.btn.danger:hover,
.mad-btn.danger:hover {
    background: var(--mad-error) !important;
    color: var(--mad-error-text) !important;
    border: none !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

/* Matrix header lock: shared top chrome for every legacy app page. */
.mad-titlebar > img,
.mad-titlebar img.mad-logo,
.mad-titlebar > a:has(img.mad-logo),
.mad-titlebar > a:not(.mad-titlebar-btn):first-child,
.mad-titlebar .mad-tb-actions > a[href="/index.php"].mad-btn.ghost,
.titlebar > img,
.title-bar > img.title-logo,
.tb-logo {
    display: none !important;
}

.mad-titlebar,
.titlebar,
.title-bar {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    gap: 12px !important;
    background: #a82f0d !important;
    color: #ffd3b7 !important;
    border-bottom: 1px solid rgba(0,0,0,.15) !important;
}

.mad-titlebar .mad-title,
.mad-titlebar-text,
.titlebar .tb-title,
.titlebar .titlebar-txt,
.title-bar .title-text {
    flex: 0 1 auto !important;
    text-align: left !important;
    font-family: 'MAD_Bold' !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #ffd3b7 !important;
    letter-spacing: .02em !important;
}

.mad-titlebar-spacer,
.tb-spacer,
.titlebar-spacer {
    flex: 1 1 auto !important;
}

.mad-titlebar-btn,
.tb-theme,
.theme-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    background: transparent !important;
    color: #ffd3b7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.mad-titlebar-btn:hover,
.tb-theme:hover,
.theme-btn:hover {
    background: #a82f0d !important;
    color: #ffd3b7 !important;
    border-color: #a82f0d !important;
}

.mad-header,
.header {
    min-height: 78px !important;
    padding: 10px 28px !important;
    background: var(--mad-panel) !important;
    border-bottom: 1px solid var(--mad-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.mad-header-logo,
.header-logo {
    height: 54px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
}

.mad-header h1,
.header-name,
.mad-header .brand-name {
    font-family: 'MAD_Bold' !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    color: var(--mad-heading) !important;
    letter-spacing: .05em !important;
    margin: 0 !important;
}

.mad-header .sub,
.header-sub,
.mad-header .brand-sub {
    font-family: 'MAD_Italic' !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: var(--mad-secondary) !important;
    margin-top: 4px !important;
}

body:has(.mad-header) .layout,
body:has(.mad-header) .tab-pane,
body:has(.mad-header) .tab-pane.active,
body:has(.mad-header) .settings-pane {
    height: calc(100vh - 44px - 78px - 75px) !important;
}

body:has(.mad-header) .mad-tabs + .tab-content,
body:has(.mad-header) .tab-content {
    min-height: 0 !important;
}

/* M-A-D Design V1.3 final color lock */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
    --mad-neonlila: #a82f0d !important;
    --mad-dunkellila: #a82f0d !important;
    --mad-fliederfarben: #ffd3b7 !important;
    --mad-weiss: #FFFFFF !important;
    --mad-schwarz: #000000 !important;
    --mad-titlebar: #a82f0d !important;
    --mad-header: #a82f0d !important;
    --mad-button: #7A3200 !important;
    --mad-button-hover: #5C2500 !important;
    --mad-accent: #a82f0d !important;
    --mad-accent-hover: #a82f0d !important;
    --mad-hover: #a82f0d !important;
    --mad-accent-pressed: #a82f0d !important;
    --mad-heading: #ffd3b7 !important;
    --mad-label: #ffd3b7 !important;
    --mad-success: #D5FFD5 !important;
    --mad-success-text: #375623 !important;
    --mad-error: #FFD5D5 !important;
    --mad-error-text: #C00000 !important;
    --mad-error-strong: #FFD5D5 !important;
}

.mad-titlebar,
.titlebar,
.title-bar,
.app-titlebar,
.topbar,
.top-bar,
.toolbar-main {
    background: #a82f0d !important;
}

.btn-primary,
.login-btn,
.btn-p,
.btn-sb-primary,
.btn-export:not(.btn-export-secondary):not(.btn-export-link),
.tab-btn.active,
.mad-tab.active,
.mode-tab.active,
.toggle-switch.active,
.param-toggle.on,
button.primary,
.btn.primary,
.mad-btn.primary,
.tool-btn.active,
.action.primary,
.btn.is-active,
.mad-btn.is-active,
.tool-btn.is-active,
[aria-selected="true"] {
    background: #7A3200 !important;
    color: #D7D2C4 !important;
    border-color: #a82f0d !important;
}

.ok,
.success,
.mad-log-line.ok,
.log-line.ok {
    background: #D5FFD5 !important;
    color: #375623 !important;
    border-color: transparent !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.err,
.error,
.danger,
.mad-log-line.err,
.log-line.er {
    background: #FFD5D5 !important;
    color: #C00000 !important;
    border-color: transparent !important;
    font-family: 'MAD_Bold' !important;
    font-weight: 700 !important;
}

.symbol-circle,
.icon-circle,
.mad-symbol-circle,
.btn .ico,
.mad-btn .ico,
.tool-btn .ico,
.icon-btn,
.mad-titlebar-btn,
.tb-theme,
.theme-btn {
    background: #7A3200 !important;
    color: #D7D2C4 !important;
    border: 1px solid #4a1e00 !important;
    border-radius: 50% !important;
    font-family: 'MAD_Regular' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

.btn .ico,
.mad-btn .ico,
.tool-btn .ico,
.icon-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 14px !important;
}

.symbol-circle svg,
.icon-circle svg,
.mad-symbol-circle svg,
.btn .ico svg,
.mad-btn .ico svg,
.tool-btn .ico svg,
.icon-btn svg {
    width: 60% !important;
    height: 60% !important;
    color: #ffd3b7 !important;
    stroke: currentColor !important;
    fill: none !important;
}

@media (max-width: 700px) {
    .mad-header,
    .header {
        min-height: 68px !important;
        padding: 8px 16px !important;
        gap: 10px !important;
    }

    .mad-header-logo,
    .header-logo {
        height: 42px !important;
        max-width: 92px !important;
    }

    .mad-header h1,
    .header-name,
    .mad-header .brand-name {
        font-size: 20px !important;
    }

    .mad-header .sub,
    .header-sub,
    .mad-header .brand-sub {
        font-size: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   M·A·D ROST-THEME — Feinschliff nach Farbvorgabe (Stand 2026-06-04)
   Nur Farben. Steht am Ende → gewinnt in der Kaskade.
   ════════════════════════════════════════════════════════════════════ */

/* Buttons: Füllung #7A3200 · Rand #4a1e00 · Schrift #D7D2C4 */
button,
.btn,
.mad-btn,
.btn-primary,
.login-btn,
.btn-p,
.btn-sb,
.btn-sb-primary,
.dl-btn,
.btn-export,
.tool-btn,
.action,
.mad-install-btn,
[role="button"] {
    background: #7A3200 !important;
    border: 1px solid #4a1e00 !important;
    color: #D7D2C4 !important;
}

/* Angewählte Buttons / Hover / aktive Tabs: BG #d7d3c5 · Schrift #84331d */
button:hover,
.btn:hover,
.mad-btn:hover,
.btn-primary:hover,
.login-btn:hover,
.tool-btn:hover,
.action:hover,
[role="button"]:hover {
    background: #5C2500 !important;
    color: #D7D2C4 !important;
    border-color: #4a1e00 !important;
}

.tab:hover,
.tabs button:hover,
.tab.active,
.tabs button.active,
.tool-btn.active,
.btn.is-active,
.mad-btn.is-active,
.tool-btn.is-active,
.tab-btn.active,
.mad-tab.active,
.mode-tab.active,
.cat-chip.active,
.toggle-switch.active,
.param-toggle.on,
[aria-selected="true"] {
    background: #d7d3c5 !important;
    color: #84331d !important;
    border-color: #a82f0d !important;
}

/* Nicht angewählte Tabs/Chips: Rost-Rand #a82f0d · Schrift #d7d2c4 · dunkler BG */
.tab:not(.active),
.tab-btn:not(.active),
.mad-tab:not(.active),
.mode-tab:not(.active),
.cat-chip:not(.active) {
    background: #353d40 !important;
    border: 1px solid #a82f0d !important;
    color: #d7d2c4 !important;
}

/* Danger/Ghost behalten ihre Bedeutung (nicht vom Button-Rost übermalt) */
.btn-d,
.btn-danger,
.btn-sb-danger,
button.danger,
.btn.danger,
.mad-btn.danger,
.danger {
    background: #FFD5D5 !important;
    color: #C00000 !important;
    border-color: transparent !important;
}

/* Seiten-Überschrift (z.B. STARTSEITE / 3D ModBot): #a82f0d mit dünner Umrandung */
.mad-header h1,
.mad-header .brand-name,
.header-name {
    color: #a82f0d !important;
    -webkit-text-stroke: 0.7px #ffd3b7;
}

/* "größere Überschriften" #ffd3b7 (Zwischenüberschriften, Panel-Titel) */
h1, h2, h3, h4,
.sec-title,
.pane-title,
.res-head,
.mad-heading {
    color: #ffd3b7 !important;
}

/* Hervorhebung des eingeloggten Benutzers ("admin"): #b6b7a8 */
.header-actions strong,
.header-actions .who strong,
.who strong,
.mad-header .who strong {
    color: #b6b7a8 !important;
}

/* Infoboxen: BG #d7d2c4 · Schrift #9f6750 */
.info-box,
.infobox,
.mad-info,
.notice,
.hinweis,
.mad-flash.info {
    background: #d7d2c4 !important;
    color: #9f6750 !important;
    border-color: #72311e !important;
}

/* ════════════════════════════════════════════════════════════════════
   M·A·D Rost-Redesign — Final Override (2026-06-04, zentral)
   Steht ganz am Ende → gewinnt in der Kaskade.
   ════════════════════════════════════════════════════════════════════ */

/* Kein Italic mehr: MAD_Italic-Font auf Regular umbiegen + native Italics neutralisieren */
@font-face{font-family:'MAD_Italic';src:url('/assets/Fonts/MAD_Regular.otf') format('opentype'),url('/assets/Fonts/MAD_Regular.ttf') format('truetype');font-display:swap;}
*{font-style:normal !important;}
.mad-explain,.header-sub,.tile-desc,.hint,.note,.drop-label,.preview-hint,.logo-card-size,.dl-desc,.swatch-hex,.brand-sub,.mad-header .sub,.mad-header .brand-sub,i,em,cite,address{font-family:'MAD_Regular' !important;font-style:normal !important;}

/* Logo in der Rost-Leiste sichtbar (Seiten setzen .mad-titlebar img{display:none}) */
.mad-titlebar .mad-tb-logo,.titlebar .mad-tb-logo,.title-bar .mad-tb-logo{display:inline-flex !important;align-items:center;height:100%;text-decoration:none;flex:0 0 auto;}
.mad-titlebar .mad-tb-logo img,.titlebar .mad-tb-logo img,.title-bar .mad-tb-logo img{display:block !important;height:30px !important;width:auto !important;max-width:170px !important;object-fit:contain !important;image-rendering:auto !important;}

/* Aktionsgruppe rechts + Icon-Buttons (Haus/Kreis) */
.mad-tb-actions{display:inline-flex !important;align-items:center;gap:8px !important;flex:0 0 auto;}
.mad-tb-icon{text-decoration:none !important;}
.mad-tb-icon svg{width:18px !important;height:18px !important;color:#ffd3b7 !important;stroke:currentColor !important;fill:none !important;}

/* Buttons: zusätzliche Umrandung in Rost #a82f0d (Wunsch) */
button,.btn,.mad-btn,.btn-primary,.login-btn,.btn-p,.btn-sb,.btn-sb-primary,.dl-btn,.btn-export,.tool-btn,.action,.mad-install-btn,[role="button"]{border:1px solid #4a1e00 !important;}

/* Untere Leiste: keine Fortschrittsbalken, Session-Log über volle Breite */
.mad-design-progress{display:none !important;}
.mad-design-shell{grid-template-columns:1fr !important;}
.mad-design-log{border-left:none !important;min-width:0 !important;}

/* ── Startseite (index.php): Kacheln als KREISE (Mockup hp_header.png) ── */
body .wrap .grid{gap:16px !important;justify-content:center !important;}
body .wrap .grid .tile{border-radius:50% !important;aspect-ratio:1 / 1 !important;border:3px solid #681a1e !important;justify-content:center !important;text-align:center !important;gap:6px !important;padding:12px !important;overflow:hidden !important;background:var(--mad-panel) !important;}
body .wrap .grid .tile .tile-icon{width:46px !important;height:46px !important;}
body .wrap .grid .tile:hover{border-color:#a82f0d !important;transform:translateY(-3px) !important;}
body .wrap .grid .tile .tile-name{color:#e5bca6 !important;}
body .wrap .grid .tile .tile-desc{color:#d7d2c4 !important;font-style:normal !important;}
/* Zweite Leiste der Startseite: nur Name + Logo (wie Mockup) — Aktionen raus */
.header .header-actions{display:none !important;}

/* ── Native Radios/Checkboxen in Rost (waren Browser-Blau, z.B. ModBot Prop./Exakt) ── */
input[type=radio],input[type=checkbox],input[type=range]{accent-color:#a82f0d !important;}
/* "INTERAKTIVE 3D VORSCHAU"-Badge: helle Normalschrift statt Rost */
.vp-badge{color:#ffffff !important;}

/* ── Emoji→SVG Icons (zentral via mad-design.js) ── */
.mad-ico-wrap{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.16em;line-height:0;}
.mad-ico{width:1.05em;height:1.05em;display:inline-block;}
.mad-ico-wrap + *{margin-left:.05em;}

/* ── Zweite Leiste: Logo doppelt so groß + scharf (Quelle logo_512) ── */
.mad-header-logo,.header-logo,.mad-header img,.header > img{height:104px !important;max-width:280px !important;width:auto !important;object-fit:contain !important;}
@media(max-width:700px){.mad-header-logo,.header-logo,.mad-header img,.header > img{height:72px !important;max-width:190px !important;}}

/* ── Session-Log oben in der Rost-Leiste (PRIO 3) ── */
/* Aktueller Aktions-Status (eigener Bereich): läuft … klein · FERTIG groß+fett */
.mad-tb-status{flex:0 1 auto;max-width:46%;padding:0 12px;display:flex;align-items:center;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'MAD_Regular';font-size:12px;color:#d7d3c5;letter-spacing:.02em;border-right:1px solid rgba(255,255,255,.18);}
.mad-tb-status.run{color:#ffd3b7;}
.mad-tb-status.done{font-family:'MAD_Bold' !important;font-weight:700;font-size:16px;color:#ffffff;}
@media(max-width:760px){.mad-tb-status{max-width:60%;font-size:11px;}.mad-tb-status.done{font-size:14px;}}
.mad-tb-log{flex:1 1 auto;min-width:30px;overflow:hidden;display:flex;align-items:center;height:100%;padding:0 10px;}
.mad-tb-log-body{font-family:'MAD_Regular' !important;font-size:13px !important;color:#d7d3c5 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;letter-spacing:.02em;}
.mad-tb-logbtns{display:inline-flex !important;gap:6px !important;align-items:center;flex:0 0 auto;margin-right:8px;}
.mad-tb-logbtns .mad-tb-icon{font-family:'MAD_Bold' !important;font-size:13px !important;}
.mad-tb-icon{border:1px solid #ffd3b7 !important;}
.mad-design-shell{display:none !important;}
@media(max-width:760px){.mad-tb-log{display:none !important;}}

/* ════ Farb-Verbote (PRIO danach): kein Grün/Rot mehr → neue Schemata ════ */
:root,html[data-theme="dark"],html[data-theme="light"]{
  --mad-success:#D7D2C4 !important;--mad-success-text:#F7F7F2 !important;
  --mad-error:#B8431F !important;--mad-error-text:#d7d3c5 !important;--mad-error-strong:#B8431F !important;
}
.flash.ok,.mad-flash.ok,.mad-flash.info,.ok,.success,.mad-log-line.ok,.log-line.ok,.toast.ok,.info-box,.infobox,.mad-info,.notice,.hinweis{
  background:#D7D2C4 !important;color:#F7F7F2 !important;border:1px solid #A5A59E !important;
}
.flash.err,.mad-flash.err,.err,.error,.danger,.mad-log-line.err,.log-line.er,.toast.err,
.btn-d,.btn-danger,.btn-sb-danger,button.danger,.btn.danger,.mad-btn.danger{
  background:#B8431F !important;color:#d7d3c5 !important;border:1px solid #B8431F !important;
}

/* Log nur noch OBEN: untere Session-Log-Leisten ausblenden (Platz holt madFitMain zurück) */
.log-wrap,.mad-log,.session-log,.bottom-log,.mad-design-shell{display:none !important;}
body.mad-design-padding{padding-bottom:0 !important;}

/* Kleine Inline-Logs ausblenden — die echte Aktivität läuft jetzt oben in der Rost-Leiste */
.ilog,.dummy-log,.render-console,.console{display:none !important;}

/* Auch codemode (.cm-titlebar) + pixfix (.pix-titlebar) bekommen die identische Rost-Leiste */
.cm-titlebar,.pix-titlebar{height:44px !important;min-height:44px !important;background:#a82f0d !important;color:#ffd3b7 !important;display:flex !important;align-items:center !important;padding:0 18px !important;gap:12px !important;border-bottom:1px solid rgba(0,0,0,.15) !important;position:sticky !important;top:0;z-index:100;}
.cm-titlebar .mad-tb-log-body,.pix-titlebar .mad-tb-log-body{color:#d7d3c5 !important;}