/* =========================================================================
 * preiserhoehung.css — Tab "Preiserhöhung 1. August 2026"
 * Konsistent mit bestehenden VD-Token-System (keine Hex-Literale).
 * ========================================================================= */

/* --- Nav-Tab-Hervorhebung -------------------------------------------------- */

.topbar__nav-link--alert {
    color: var(--ampel-rot-text) !important;
    border-color: var(--ampel-rot-border) !important;
    background: var(--ampel-rot-bg) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.topbar__nav-link--alert:hover {
    background: hsl(358 80% 55% / 0.25) !important;
    border-color: var(--ampel-rot) !important;
}

.topbar__nav-link--alert[data-aktiv="true"] {
    background: var(--ampel-rot) !important;
    border-color: transparent !important;
    color: var(--color-text-inverse) !important;
}

/* --- Layout ---------------------------------------------------------------- */

.pe-seite {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-6);
    max-width: var(--layout-content-max);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* --- Header ---------------------------------------------------------------- */

.pe-header {
    margin-bottom: var(--space-6);
}

.pe-header__titel {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 var(--space-1) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pe-header__titel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ampel-rot-bg);
    border: 1px solid var(--ampel-rot-border);
    color: var(--ampel-rot-text);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    animation: pe-pulse 2s ease-in-out infinite;
}

@keyframes pe-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

.pe-header__untertitel {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.pe-header__chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pe-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: default;
}

.pe-chip--offen {
    background: var(--color-phase-unbekannt-bg);
    border-color: var(--color-phase-unbekannt-border);
    color: var(--color-phase-unbekannt-text);
}

.pe-chip--erreicht {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.pe-chip--erledigt {
    background: var(--color-phase-neu-bg);
    border-color: var(--color-phase-neu-border);
    color: var(--color-phase-neu-text);
}

.pe-chip__zahl {
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* --- Haupt-Layout (Liste + Panel) ----------------------------------------- */

.pe-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    flex: 1;
    min-height: 0;
}

.pe-layout--mit-panel {
    grid-template-columns: minmax(0, 1fr) var(--layout-drawer-width);
}

/* --- Makler-Liste ---------------------------------------------------------- */

.pe-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.pe-karte {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.pe-karte:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.pe-karte--aktiv {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
    background: var(--color-surface-2);
}

.pe-karte__zeile1 {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.pe-karte__firma-info {
    flex: 1;
    min-width: 0;
}

.pe-karte__firma {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-karte__ort {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin: 0;
}

.pe-karte__rechts {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.pe-karte__zeile2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.pe-karte__kontakt {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.pe-karte__person {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.pe-karte__telefon {
    font-size: var(--font-size-small);
    color: var(--color-accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.pe-karte__telefon:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.pe-karte__zeile3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pe-karte__pills {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
}

.pe-karte__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* --- Kontakt-Warnung ------------------------------------------------------- */

.pe-warnung-alt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-micro);
    color: var(--color-warn-text-soft);
    background: var(--color-warn-bg-soft);
    border: 1px solid var(--color-warn-border);
    padding: 0.1em 0.5em;
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
}

/* --- Gesellschafts-Pills -------------------------------------------------- */

.pe-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
    white-space: nowrap;
}

.pe-pill--gruen {
    background: var(--ampel-gruen-bg);
    border-color: var(--ampel-gruen-border);
    color: var(--ampel-gruen-text);
}

.pe-pill--gelb {
    background: var(--ampel-gelb-bg);
    border-color: var(--ampel-gelb-border);
    color: var(--ampel-gelb-text);
}

.pe-pill--rot {
    background: var(--ampel-rot-bg);
    border-color: var(--ampel-rot-border);
    color: var(--ampel-rot-text);
}

/* --- Paket-Badge ----------------------------------------------------------- */

.pe-badge-paket {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.55em;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    border: 1px solid transparent;
}

.pe-badge-paket--corporate {
    background: var(--color-phase-neu-bg);
    border-color: var(--color-phase-neu-border);
    color: var(--color-phase-neu-text);
}

.pe-badge-paket--premium {
    background: hsl(280 65% 60% / 0.15);
    border-color: hsl(280 65% 60% / 0.5);
    color: hsl(280 65% 78%);
}

/* --- Status-Badges --------------------------------------------------------- */

.pe-badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    border: 1px solid transparent;
}

.pe-badge-status--offen {
    background: var(--color-phase-unbekannt-bg);
    border-color: var(--color-phase-unbekannt-border);
    color: var(--color-phase-unbekannt-text);
}

.pe-badge-status--versucht {
    background: var(--color-phase-reaktivierung-bg);
    border-color: var(--color-phase-reaktivierung-border);
    color: var(--color-phase-reaktivierung-text);
}

.pe-badge-status--erreicht {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.pe-badge-status--termin {
    background: var(--color-phase-neu-bg);
    border-color: var(--color-phase-neu-border);
    color: var(--color-phase-neu-text);
}

.pe-badge-status--mail_gesendet {
    background: hsl(280 65% 60% / 0.15);
    border-color: hsl(280 65% 60% / 0.5);
    color: hsl(280 65% 78%);
}

/* --- Buttons -------------------------------------------------------------- */

.pe-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.pe-btn:hover {
    background: var(--color-surface-3);
    border-color: var(--color-border-strong);
}

.pe-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.pe-btn--primary {
    background: var(--color-accent);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.pe-btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: transparent;
}

.pe-btn--success {
    background: var(--ampel-gruen-bg);
    border-color: var(--ampel-gruen-border);
    color: var(--ampel-gruen-text);
}

.pe-btn--success:hover {
    background: var(--ampel-gruen);
    color: var(--color-text-inverse);
}

.pe-btn--warn {
    background: var(--color-phase-reaktivierung-bg);
    border-color: var(--color-phase-reaktivierung-border);
    color: var(--color-phase-reaktivierung-text);
}

.pe-btn--warn:hover {
    background: var(--color-phase-reaktivierung-solid);
    color: var(--color-text-inverse);
}

.pe-btn--mail {
    background: hsl(280 65% 60% / 0.15);
    border-color: hsl(280 65% 60% / 0.5);
    color: hsl(280 65% 78%);
}

.pe-btn--mail:hover {
    background: hsl(280 65% 55%);
    border-color: transparent;
    color: var(--color-text-inverse);
}

/* --- Detail-Panel ---------------------------------------------------------- */

.pe-panel {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    animation: pe-slide-in var(--duration-base) var(--ease-out);
    position: sticky;
    top: calc(var(--layout-topbar-height) + var(--space-4));
    max-height: calc(100vh - var(--layout-topbar-height) - var(--space-8));
}

@keyframes pe-slide-in {
    from {
        opacity: 0;
        transform: translateX(var(--space-4));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pe-panel__head {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex-shrink: 0;
}

.pe-panel__head-info {
    flex: 1;
    min-width: 0;
}

.pe-panel__titel {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-panel__ort {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin: 0;
}

.pe-panel__schliessen {
    background: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-small);
    transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.pe-panel__schliessen:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-border);
}

.pe-panel__status-row {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    background: var(--color-surface-2);
}

.pe-panel__status-label {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

.pe-panel__status-select {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-small);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    flex: 1;
}

.pe-panel__status-select:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.pe-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Scrollbar-Stil (dark theme) */
.pe-panel__body::-webkit-scrollbar {
    width: 6px;
}

.pe-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.pe-panel__body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

/* --- Panel-Sektionen ------------------------------------------------------- */

.pe-sektion {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pe-sektion__titel {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* --- Gesellschafts-Tabelle ------------------------------------------------- */

.pe-gesellschaft-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
}

.pe-gesellschaft-tabelle th {
    text-align: left;
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.pe-gesellschaft-tabelle td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
}

.pe-gesellschaft-tabelle tr:last-child td {
    border-bottom: none;
}

.pe-gesellschaft-tabelle td:first-child {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
}

.pe-gesellschaft-tabelle td:last-child {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.pe-umzug-summary {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    padding: var(--space-2) 0 0 0;
}

.pe-umzug-summary strong {
    color: var(--color-text);
}

/* --- Gesprächsleitfaden --------------------------------------------------- */

.pe-leitfaden {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.pe-leitfaden__typ {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: block;
}

.pe-leitfaden--einfach .pe-leitfaden__typ {
    color: var(--ampel-gruen-text);
}

.pe-leitfaden--mittel .pe-leitfaden__typ {
    color: var(--ampel-gelb-text);
}

.pe-leitfaden--schwer .pe-leitfaden__typ {
    color: var(--ampel-rot-text);
}

.pe-leitfaden__punkte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pe-leitfaden__punkt {
    display: flex;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

.pe-leitfaden__punkt::before {
    content: "→";
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

/* --- Notiz-Bereich --------------------------------------------------------- */

.pe-notiz-alt {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.pe-notiz-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-family: var(--font-sans);
    padding: var(--space-2) var(--space-3);
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.pe-notiz-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.pe-notiz-textarea::placeholder {
    color: var(--color-text-subtle);
}

.pe-notiz-gespeichert {
    font-size: var(--font-size-micro);
    color: var(--ampel-gruen-text);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.pe-notiz-gespeichert--sichtbar {
    opacity: 1;
}

/* --- Aktionen-Buttons ------------------------------------------------------ */

.pe-aktionen {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pe-aktionen .pe-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
}

/* --- Mail-Modal ------------------------------------------------------------ */

.pe-modal-overlay {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
    animation: pe-fade-in var(--duration-fast) var(--ease-out);
}

@keyframes pe-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pe-modal {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(640px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pe-modal-in var(--duration-base) var(--ease-out);
}

@keyframes pe-modal-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-4)) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pe-modal__head {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.pe-modal__titel {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.pe-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pe-modal__label {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    display: block;
    margin-bottom: var(--space-1);
}

.pe-modal__betreff {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

.pe-modal__betreff-text {
    flex: 1;
    font-size: var(--font-size-small);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.pe-modal__body-text {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--font-size-small);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: var(--line-height-loose);
    white-space: pre-wrap;
}

.pe-modal__footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* --- Kopiert-Hinweis ------------------------------------------------------- */

.pe-kopiert {
    font-size: var(--font-size-micro);
    color: var(--ampel-gruen-text);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
    margin-left: var(--space-1);
}

.pe-kopiert--sichtbar {
    opacity: 1;
}