/* ============================================================
   ImmoPortal Pro – Hauptstylesheet
   Schrift: Montserrat
   Farben: Fricke Finanzhaus – Orange #f76404 / Schwarz #000000
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── CSS-Variablen: Dark Theme (Standard) ───────────────────── */
:root {
    --bg:          #0d0f14;
    --bg-2:        #13161d;
    --bg-3:        #1a1d27;
    --border:      #2e3245;
    --text:        #f0f1f5;
    --text-muted:  #6b7280;
    --text-dim:    #9ca3af;
    --accent:      #f76404;
    --accent-2:    #d95500;
    --accent-glow: rgba(247, 100, 4, 0.15);
    --success:     #22c55e;
    --warning:     #f59e0b;
    --danger:      #ef4444;
    --info:        #3b82f6;
    --sidebar-w:   260px;
    --header-h:    58px;
    --radius:      10px;
    --shadow:      0 4px 24px rgba(0,0,0,0.35);
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
    --transition:  0.18s ease;
    --font:        'Montserrat', sans-serif;
    --font-head:   'Montserrat', sans-serif;
}

/* ── Light Theme ─────────────────────────────────────────────── */
[data-theme="light"] {
    --bg:          #f4f5f7;
    --bg-2:        #ffffff;
    --bg-3:        #f0f1f4;
    --border:      #d0d3dc;
    --text:        #000000;
    --text-muted:  #555a6b;
    --text-dim:    #6b7280;
    --accent:      #f76404;
    --accent-2:    #d95500;
    --accent-glow: rgba(247, 100, 4, 0.12);
    --shadow:      0 4px 24px rgba(0,0,0,0.10);
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
/* Globale Portal-Vergrößerung ("alles etwas größer" – skaliert px + rem gleichmäßig, wie Browser-Zoom).
   Wert anpassen: 1.05 = subtil, 1.10 = eine Nummer, 1.15 = deutlich größer. */
:root { zoom: 1.10; }

/* iOS Safari/WebKit (auch Chrome auf iPhone) rendert position:fixed unter einem
   gezoomten :root fehlerhaft → die fixierte Sidebar verschwindet vom Bildschirm.
   Auf iOS/WebKit daher KEIN CSS-zoom (die 10%-Vergrößerung ist auf dem Handy
   ohnehin verzichtbar). Die @supports-Abfrage trifft nur WebKit-Browser. */
@supports (-webkit-touch-callout: none) {
    :root { zoom: 1 !important; }
    body  { zoom: 1 !important; }
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

img { max-width: 100%; display: block; }

/* ── Layout ───────────────────────────────────────────────────── */
.app-layout {
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    grid-row: 1 / -1;
    background: #0d1525;
    border-right: none;
    display: flex;
    flex-direction: column;
    position: fixed;
    /* NICHT height:100vh – :root hat zoom:1.10, und vh-Einheiten werden davon nicht
       erfasst: die Sidebar wuerde 110% der Bildschirmhoehe hoch und ihr Fuss
       (Abmelden) rutschte unter die Unterkante. Ueber top/bottom verankern. */
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    z-index: 100;
    overflow: hidden;
}

/* Logo und Fuss behalten ihre Hoehe, nur die Navigation scrollt */
.sidebar-logo, .sidebar-footer { flex-shrink: 0; }

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 20px 16px;
    border-bottom: 2px solid #fff;
}

.sidebar-logo-icon {
    width: 38px; height: 38px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-size: 15px; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 14px rgba(247,100,4,.35);
}

.sidebar-logo-text {
    display: flex; flex-direction: column;
    align-items: center;
}

.sidebar-logo-name {
    font-size: 14px; font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.sidebar-logo-sub {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sidebar-nav {
    flex: 1;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Bei vielen Menuepunkten/kleinen Bildschirmen scrollt die Navigation selbst –
       min-height:0 ist noetig, damit ein Flex-Kind ueberhaupt schrumpfen darf. */
    overflow-y: auto;
    min-height: 0;
}

.nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.4);
    padding: 14px 10px 5px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.nav-item:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.nav-item.active {
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 700;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.nav-item.active .nav-icon { color: #fff; opacity: 1; }

.nav-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    opacity: 0.85;
}

.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}

.sidebar-user:hover { background: rgba(255,255,255,.08); }

.sidebar-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
    font-size: 13px; font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    text-transform: capitalize;
}

/* ── Header ──────────────────────────────────────────────────── */
.header {
    background: var(--bg-2);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--header-h);
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    z-index: 90;
}

.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 8px; }

.page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* ── Theme Toggle ─────────────────────────────────────────────── */
.theme-toggle {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-3);
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 16px;
}

.theme-toggle:hover {
    background: var(--bg);
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Lang Toggle ─────────────────────────────────────────────── */
.lang-btn {
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-3);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    display: flex; align-items: center; gap: 4px;
}

.lang-btn:hover, .lang-btn.active {
    background: var(--accent-glow);
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Main Content ─────────────────────────────────────────────── */
.main {
    margin-left: var(--sidebar-w);
    margin-top: var(--header-h);
    padding: 28px 32px;
    min-height: calc(100vh - var(--header-h));
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Finanz-Modus: Sidebar als schmale Icon-Leiste (Auto-Collapse) ──
   Im Buchhaltungs-/Angebots-Bereich (.app-layout.finance-collapsed) wird nur
   die Variable --sidebar-w verkleinert – Sidebar, Header und Main rücken
   dadurch automatisch mit. Hover klappt die Leiste temporär als Overlay aus
   (position:fixed + z-index) → kein Reflow des Contents. Nur Desktop. */
@media (min-width: 769px) {
    .app-layout.finance-collapsed { --sidebar-w: 66px; }
    .app-layout.finance-collapsed .sidebar { transition: width .18s ease, box-shadow .18s ease; }

    /* eingeklappt: Texte/Labels aus, nur Icons */
    /* Logo: FESTE Höhe in beiden Zuständen → Nav-Items darunter springen nicht */
    .app-layout.finance-collapsed .sidebar-logo { height: 90px; padding: 0 8px; justify-content: center; overflow: hidden; }
    .app-layout.finance-collapsed .sidebar-logo img { width: auto; max-width: 100%; max-height: 48px; object-fit: contain; }
    .app-layout.finance-collapsed .sidebar-logo-text,
    .app-layout.finance-collapsed .sidebar-logo-cap,
    .app-layout.finance-collapsed .sidebar-user-info,
    .app-layout.finance-collapsed .sidebar-user > span { display: none; }
    .app-layout.finance-collapsed .nav-item {
        justify-content: center;
        gap: 0;
        padding: 9px 0;        /* gleiche vertikale Höhe wie aufgeklappt (9px) → kein Versatz */
        font-size: 0;
        white-space: nowrap;   /* verhindert Zeilenumbruch/„Springen" beim Aufklappen */
    }
    .app-layout.finance-collapsed .nav-item > span:not(.nav-icon) { display: none; }
    .app-layout.finance-collapsed .sidebar-user { justify-content: center; padding: 10px 0; }

    /* Hover: temporär voll ausklappen (überlagert den Content) */
    .app-layout.finance-collapsed .sidebar:hover { width: 260px; box-shadow: 4px 0 26px rgba(0,0,0,.30); }
    .app-layout.finance-collapsed .sidebar:hover .sidebar-logo-text { display: flex; }
    .app-layout.finance-collapsed .sidebar:hover .sidebar-logo-cap { display: block; }
    .app-layout.finance-collapsed .sidebar:hover .sidebar-user-info { display: block; }
    .app-layout.finance-collapsed .sidebar:hover .sidebar-user > span { display: inline; }
    .app-layout.finance-collapsed .sidebar:hover .nav-item {
        justify-content: flex-start;
        gap: 11px;
        padding: 9px 12px;
        font-size: 16px;
    }
    .app-layout.finance-collapsed .sidebar:hover .nav-item > span:not(.nav-icon) { display: inline; }
    .app-layout.finance-collapsed .sidebar:hover .sidebar-user { justify-content: flex-start; padding: 10px 12px; }
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* ── Stat Cards ──────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.stat-icon {
    font-size: 22px;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--accent-glow);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 7px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

/* ── Einheitlicher Hover portalweit: sanftes Anheben + tieferer Schatten ──
   Steht VOR den Varianten, damit diese ihre eigene Farbe/Schatten behalten;
   das translateY greift überall (Varianten überschreiben es nicht). */
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 13px rgba(0,0,0,.14); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active { transform: none; }
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-secondary {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--text-muted);
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-lg { padding: 11px 22px; font-size: 16px; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 9px 13px;
    background: var(--bg-3);
    border: 2px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    /* Eingegebene Werte klar fett – damit gefüllte Felder eindeutig von (leeren) Feldern mit
       Platzhalter-Hinweis unterscheidbar sind. Platzhalter unten bewusst dezent/kursiv. */
    font-weight: 600;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

/* Light Theme: Inputs weiß */
[data-theme="light"] .form-control {
    background: #ffffff;
    border-color: #b0b5c5;
    color: #000000;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(247,100,4,0.12);
}

/* Platzhalter = Hinweis, NICHT Wert: dezent, kursiv, leichter – klar vom fetten Eingabewert
   unterscheidbar (portalweit; behebt „sieht ausgefüllt aus, ist aber leer"). */
.form-control::placeholder { color: #9aa0ab; font-weight: 400; font-style: italic; opacity: 1; }
[data-theme="light"] .form-control::placeholder { color: #9aa4b2; }

select.form-control { cursor: pointer; min-width: 140px; }

textarea.form-control { resize: vertical; min-height: 100px; }

.form-error {
    font-size: 13px;
    color: var(--danger);
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Alerts / Toasts ─────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 2px solid transparent;
    font-weight: 500;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--bg-3); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-green  { background: rgba(34,197,94,0.15);  color: #22c55e; }
.badge-red    { background: rgba(239,68,68,0.15);   color: #ef4444; }
.badge-yellow { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.badge-blue   { background: rgba(59,130,246,0.15);  color: #3b82f6; }
.badge-gray   { background: var(--bg-3); color: var(--text-muted); }
.badge-purple { background: var(--accent-glow); color: var(--accent); }

/* Solide Variante für Badges ÜBER Bildern (Objektfotos): volle Deckkraft + weißer
   Text + Schatten, damit sie auf jedem Foto lesbar bleiben. Nur bewusst einsetzen –
   die dezenten Badges in Listen/Formularen bleiben unberührt. */
.badge-solid { color: #fff; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.badge-solid.badge-green  { background: #16a34a; }
.badge-solid.badge-red    { background: #dc2626; }
.badge-solid.badge-yellow { background: #d97706; color: #fff; }
.badge-solid.badge-blue   { background: #2563eb; }
.badge-solid.badge-gray   { background: #4b5563; color: #fff; }
.badge-solid.badge-purple { background: var(--accent); color: #fff; }

/* ── Dropdown ────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    right: 0;
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 160px;
    z-index: 200;
    overflow: hidden;
    display: none;
}

.dropdown-menu.open { display: block; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition);
}

.dropdown-item:hover { background: var(--bg-3); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.page-header-title {
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

.page-header-sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Auth Layout ─────────────────────────────────────────────── */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}

.auth-card {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow);
}

[data-theme="light"] .auth-card .form-control {
    background: #ffffff;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.auth-logo-icon {
    width: 44px; height: 44px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-size: 18px; font-weight: 800; color: #fff;
    box-shadow: 0 4px 20px var(--accent-glow);
}

.auth-title {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.auth-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}

.auth-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Utilities ───────────────────────────────────────────────── */
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-sm      { font-size: 12.5px; }
.text-xs      { font-size: 11.5px; }
.font-head    { font-family: var(--font-head); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.w-full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; }
    .sidebar { transform: translateX(-260px); transition: transform 0.25s ease; }
    .sidebar.open { transform: translateX(0); --sidebar-w: 260px; }
    .header { left: 0; }
    .main { margin-left: 0; padding: 16px; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Toast System ──────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    min-width: 260px;
    max-width: 380px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    pointer-events: all;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .3s ease, transform .3s ease;
    border: 2px solid transparent;
}

.toast.toast-show {
    opacity: 1;
    transform: translateX(0);
}

/* Voll deckend + weißer Text – Toasts verschwinden ohnehin von selbst, daher keine
   Transparenz (war mit 15% kaum lesbar). */
.toast-success {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}
.toast-error {
    background: #dc2626;
    border-color: #b91c1c;
    color: #fff;
}
.toast-warning {
    background: #d97706;
    border-color: #b45309;
    color: #fff;
}
.toast-info {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #fff;
}

.toast-icon { font-size: 15px; flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; }

.toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}
.toast-close:hover { opacity: 1; }

/* ── Modal System ──────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .25s ease;
}

.modal-overlay.modal-show { opacity: 1; }

.modal-overlay.modal-show .modal-box {
    transform: scale(1) translateY(0);
}

.modal-box {
    background: var(--bg-3);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px 24px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.95) translateY(10px);
    transition: transform .25s ease;
}

.modal-icon { font-size: 2.5rem; margin-bottom: 12px; line-height: 1; }

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.modal-message {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { min-width: 110px; }

/* KI-Vorschlag-Modal (aiPreviewModal) – breiter, linksbündig, mit scrollbarer Vorschau */
.modal-box.ai-suggest-box {
    max-width: 640px;
    text-align: left;
}
.modal-box.ai-suggest-box .modal-icon,
.modal-box.ai-suggest-box .modal-title { text-align: center; }
.ai-suggest-hint {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 4px 0 14px;
    text-align: center;
}
.ai-suggest-preview {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    max-height: 45vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.6;
}

/* KI-Umschreiben-Button (global, via ai_button()-Helper) – Variante D: Solid Gradient */
.ai-rewrite-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(135deg, #f76404, #ff9048);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 15px 7px 12px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(247,100,4,.22);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ai-rewrite-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s ease; }
.ai-rewrite-btn:hover {
    background: linear-gradient(135deg, #ff7415, #ffa056);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(247,100,4,.34);
}
.ai-rewrite-btn:hover svg { transform: scale(1.12) rotate(8deg); }
.ai-rewrite-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(247,100,4,.25); }
.ai-rewrite-btn:disabled { opacity: .8; cursor: default; transform: none;
    background: linear-gradient(135deg, #f76404, #ff9048); color: #fff; box-shadow: 0 3px 10px rgba(247,100,4,.18); }
.ai-rewrite-btn .ai-spin { animation: ai-spin .8s linear infinite; transform-origin: center; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ai-rewrite-btn, .ai-rewrite-btn svg { transition: none; }
    .ai-rewrite-btn:hover, .ai-rewrite-btn:hover svg { transform: none; }
    .ai-rewrite-btn .ai-spin { animation: none; }
}

/* =====================================================================
   PORTAL-MODERN – zentrale Bausteine (Pilot: Digitale Medien)
   Ruhiger Content-Look: Haarlinien statt 2px-Rahmen, weiche Schatten,
   mehr Luft, größere Radien. Orange-Farbwelt bleibt (--accent).
   Wiederverwendbar auf weiteren Portal-Seiten (Klassen pm-*).
   ===================================================================== */
:root{
    --pm-line:#ecedf1;
    --pm-line-2:#f2f3f6;
    --pm-surface:#ffffff;
    --pm-surface-2:#fbfaf9;
    --pm-muted:#8b8f98;
    --pm-muted-2:#aeb2bb;
    --pm-accent-soft:#fff2ea;
    --pm-accent-line:rgba(247,100,4,.30);
    --pm-sh-sm:0 1px 2px rgba(20,20,30,.05);
    --pm-sh-md:0 4px 16px rgba(20,20,30,.06);
    --pm-r:14px;
}

.pm-shop{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:stretch; }
.pm-shop > div:last-child{ height:100%; }
.pm-group-label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--pm-muted-2); margin:2px 2px 12px; }
.pm-pkg-head{ margin:2px 2px 14px; }
.pm-pkg-name{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
.pm-pkg-desc{ font-size:13px; font-weight:400; color:var(--pm-muted); margin-top:3px; line-height:1.5; max-width:60ch; }
/* Klare Trennung zwischen einzelnen Paketen im Shop */
.pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:38px; }
.pm-grid:last-child{ margin-bottom:0; }

.pm-card{ position:relative; display:flex; gap:13px; background:var(--pm-surface); border:1px solid var(--pm-line); border-radius:var(--pm-r); padding:15px; box-shadow:var(--pm-sh-sm); cursor:pointer; transition:box-shadow .16s, transform .16s, border-color .16s, background .16s; }
.pm-card:hover{ box-shadow:var(--pm-sh-md); transform:translateY(-1px); }
.pm-card.sel{ border-color:var(--pm-accent-line); background:var(--pm-accent-soft); box-shadow:0 8px 22px rgba(247,100,4,.12); }
.pm-card.owned{ opacity:.72; cursor:default; }
.pm-card.owned:hover{ transform:none; box-shadow:var(--pm-sh-sm); }

.pm-cb{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pm-chk{ position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:7px; border:1.5px solid #d9dce2; background:#fff; display:grid; place-items:center; font-size:12px; color:#fff; transition:.15s; }
.pm-chk::after{ content:"✓"; opacity:0; transform:scale(.6); transition:.15s; }
.pm-card.sel .pm-chk{ background:var(--accent); border-color:var(--accent); }
.pm-card.sel .pm-chk::after{ opacity:1; transform:scale(1); }

.pm-owned-tag{ position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; color:var(--success); background:#e9f8ef; padding:3px 8px; border-radius:20px; }

.pm-ic{ flex:0 0 44px; height:56px; border-radius:9px; background:linear-gradient(160deg,#fff,#f3f0ed); border:1px solid var(--pm-line); display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--accent-2); box-shadow:var(--pm-sh-sm); }
.pm-txt{ flex:1; min-width:0; padding-right:22px; }
.pm-nm{ display:block; font-weight:700; font-size:14px; line-height:1.25; }
.pm-ds{ display:block; font-size:11.5px; color:var(--pm-muted); margin-top:3px; line-height:1.4; }
.pm-price{ display:block; margin-top:9px; font-weight:800; font-size:13.5px; }
.pm-price.free{ color:var(--success); }
.pm-meta{ display:block; font-size:10.5px; color:var(--pm-muted-2); margin-top:2px; }

.pm-cart{ background:var(--pm-surface); border-radius:var(--pm-r); box-shadow:var(--pm-sh-md); padding:18px; position:sticky; top:76px; align-self:start; }
.pm-cart-title{ font-size:13px; font-weight:800; color:var(--ink); margin:0 0 12px; }
.pm-cart-empty{ font-size:12.5px; color:var(--pm-muted); text-align:center; padding:12px 0; }
.pm-cart-line{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:#41454e; padding:6px 0; border-bottom:1px dashed var(--pm-line-2); }
.pm-cart-tot{ display:flex; justify-content:space-between; font-weight:800; font-size:16px; margin-top:10px; }
.pm-cart-tax{ font-size:10.5px; color:var(--pm-muted-2); margin-top:2px; }

.pm-seg{ display:flex; background:var(--pm-surface-2); border-radius:11px; padding:4px; gap:4px; margin:14px 0 12px; }
.pm-seg label{ flex:1; cursor:pointer; margin:0; }
.pm-seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.pm-seg span{ display:block; text-align:center; font-size:12px; font-weight:700; padding:8px; border-radius:8px; color:var(--pm-muted); transition:.15s; }
.pm-seg input:checked + span{ background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(247,100,4,.30); }

.pm-cta{ display:block; width:100%; text-align:center; background:var(--accent); color:#fff; font-weight:700; font-size:13.5px; border:none; border-radius:12px; padding:13px; box-shadow:0 8px 18px rgba(247,100,4,.28); cursor:pointer; transition:.15s; }
.pm-cta:hover{ background:var(--accent-2); }
.pm-cart-hint{ font-size:10.5px; color:var(--pm-muted-2); text-align:center; margin:10px 0 0; }

@media(max-width:820px){
    .pm-shop{ grid-template-columns:1fr; }
    .pm-cart{ position:static; }
}
@media(max-width:520px){
    .pm-grid{ grid-template-columns:1fr; }
}

/* ═══ Portal-Sync-Overlay (Vollbild-Feedback während synchroner Portal-Übertragung) ═══ */
.sync-overlay{
    position:fixed; inset:0; z-index:3000;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(17,24,39,.55); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.sync-overlay.is-visible{ opacity:1; visibility:visible; }
.sync-overlay-card{
    background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3);
    padding:34px 40px; max-width:390px; width:100%; text-align:center;
}
.sync-overlay-spinner{
    width:46px; height:46px; margin:0 auto 18px;
    border:4px solid #f0f0f3; border-top-color:#f76404; border-radius:50%;
    animation:sync-spin .8s linear infinite;
}
@keyframes sync-spin{ to{ transform:rotate(360deg); } }
.sync-overlay-title{ font-size:17px; font-weight:700; color:#111827; margin-bottom:6px; }
.sync-overlay-step{ font-size:14px; color:#6b7280; min-height:20px; margin-bottom:18px; }
.sync-overlay-bar{ height:5px; background:#f0f0f3; border-radius:99px; overflow:hidden; margin-bottom:14px; }
.sync-overlay-bar > span{
    display:block; height:100%; width:40%;
    background:linear-gradient(90deg,#f76404,#ffb066); border-radius:99px;
    animation:sync-slide 1.4s ease-in-out infinite;
}
@keyframes sync-slide{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
.sync-overlay-hint{ font-size:12px; color:#9ca3af; }
@media(prefers-reduced-motion:reduce){
    .sync-overlay-spinner{ animation-duration:2s; }
    .sync-overlay-bar > span{ animation-duration:3s; }
}

/* ── Hilfe (Hero + Karten-Tabs, Fricke-Look) ───────────────────────── */
.help-page{--hp-navy:#0d1525;--hp-navy2:#16203a;--hp-accent:#f76404;--hp-accent2:#d95500;--hp-accent-soft:#fff2e7;--hp-surface:#fff;--hp-surface2:#f5f7fa;--hp-text:#1a2230;--hp-muted:#6b7280;--hp-border:#e3e7ef;--hp-danger:#c62828;--hp-danger-soft:#fbeaea;}
.help-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--hp-navy),var(--hp-navy2));color:#eef1f6;border-radius:18px;padding:34px 30px 30px;}
.help-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(247,100,4,.22),transparent 68%);}
.help-hero-in{position:relative;z-index:1;}
.help-hero-top{display:flex;align-items:center;gap:13px;}
.help-hero-mark{width:44px;height:44px;flex:0 0 auto;}
.help-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hp-accent);}
.help-hero h1{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:2px 0 6px;color:#fff;}
.help-hero p{color:#aeb8cc;max-width:560px;margin:0;}
.help-manage{position:absolute;top:0;right:0;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#cdd5e5;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:9px;}
.help-manage:hover{background:rgba(255,255,255,.14);color:#fff;}
.help-search{margin-top:20px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:12px 16px;max-width:520px;box-shadow:0 12px 30px -14px rgba(0,0,0,.55);}
.help-search svg{color:var(--hp-muted);flex:0 0 auto;}
.help-search input{border:none;outline:none;font:inherit;font-size:15px;color:var(--hp-text);width:100%;background:transparent;}
.help-interface{margin-top:22px;}
.help-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 6px;}
.help-tab{display:flex;align-items:center;gap:13px;text-decoration:none;border:1px solid var(--hp-border);border-bottom:none;background:var(--hp-surface2);color:var(--hp-muted);padding:14px 18px;border-radius:14px 14px 0 0;position:relative;transition:background .2s,color .2s;}
.help-tab:hover{color:var(--hp-text);background:#eef1f6;}
.help-tab.active{background:var(--hp-surface);color:var(--hp-text);box-shadow:0 -6px 20px -14px rgba(13,21,37,.3);}
.help-tab.active::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--hp-accent);box-shadow:0 3px 12px rgba(247,100,4,.45);}
.help-tab-ic{width:44px;height:44px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#e7ebf1;color:var(--hp-muted);}
.help-tab.active .help-tab-ic{background:var(--hp-accent-soft);color:var(--hp-accent2);}
.help-tab-t{font-weight:700;color:var(--hp-text);display:block;}
.help-tab-d{font-size:.8rem;color:var(--hp-muted);margin-top:1px;display:block;}
.help-panel{background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:0 0 16px 16px;box-shadow:0 1px 2px rgba(13,21,37,.04),0 18px 40px -20px rgba(13,21,37,.18);padding:26px;}
.help-cat{margin-bottom:22px;}
.help-cat:last-child{margin-bottom:0;}
.help-cat-h{display:flex;align-items:center;gap:9px;margin:0 0 12px;}
.help-cat-h .dot{width:8px;height:8px;border-radius:50%;background:var(--hp-accent);}
.help-cat-h h3{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-muted);margin:0;}
.help-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.help-art{display:block;text-decoration:none;color:inherit;border:1px solid var(--hp-border);border-radius:12px;padding:15px 16px;background:#fff;transition:border-color .15s,box-shadow .15s,transform .12s;}
.help-art:hover{border-color:var(--hp-accent);box-shadow:0 10px 24px -16px rgba(247,100,4,.6);transform:translateY(-1px);}
.help-art .t{font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.help-art .t .arr{color:var(--hp-accent);transition:transform .15s;}
.help-art:hover .t .arr{transform:translateX(3px);}
.help-art .d{font-size:.85rem;color:var(--hp-muted);margin-top:3px;}
.help-docs{display:flex;flex-direction:column;gap:10px;}
.help-doc{display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit;border:1px solid var(--hp-border);border-radius:12px;padding:15px 17px;background:#fff;transition:border-color .15s,box-shadow .15s;}
.help-doc:hover{border-color:var(--hp-accent);box-shadow:0 10px 24px -16px rgba(247,100,4,.55);}
.help-doc-ic{flex:0 0 auto;width:46px;height:46px;border-radius:11px;background:var(--hp-danger-soft);color:var(--hp-danger);display:flex;align-items:center;justify-content:center;}
.help-doc .body{flex:1 1 auto;}
.help-doc .t{font-weight:700;}
.help-doc .d{font-size:.85rem;color:var(--hp-muted);margin-top:1px;}
.help-doc .go{flex:0 0 auto;font-size:.8rem;font-weight:700;color:var(--hp-accent);white-space:nowrap;}
.help-hint{font-size:.78rem;color:var(--hp-muted);margin-top:14px;}
.help-empty{color:var(--hp-muted);margin:0;}
@media(max-width:720px){.help-art-grid{grid-template-columns:1fr;}.help-tabs{grid-template-columns:1fr;}.help-tab{border-radius:12px;border-bottom:1px solid var(--hp-border);}.help-panel{border-radius:16px;margin-top:8px;}}