/* === Winkler & Winkler · DARK THEME (durchgängig) === */

/* Base (Farben) */
:root {
  /* Primärrot aus Plugin-Einstellungen (Fallback: #9c1c28) */
  --kp-primary: var(--kp-primary, #9c1c28);

  /* Dark Theme */
  --kp-bg: #000;             /* Seitenhintergrund */
  --kp-surface: #0b0b0b;     /* Flächen */
  --kp-card: #131313;        /* Cards/Panele */
  --kp-border: #262626;      /* Linien */
  --kp-text: #000000;        /* Standard-Text */
  --kp-muted: #b7b7b7;       /* Sekundärtext */
  --kp-accent: var(--kp-primary);
  --kp-warn: #f0b429;
  --kp-sidebar: var(--kp-primary); /* Sidebar in Rot */
}

/* Shell & Layout */
.kp-shell { min-height: 100vh; display:flex; flex-direction:column; background: #ffffff; color: var(--kp-text); }
.kp-shell.kp-has-sidebar { flex-direction:row; }
.kp-main { flex:1; }
.kp-section { max-width:1200px; margin:2rem auto; padding:0 1rem; }
.kp-section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:1rem; }

/* Sidebar (rot, weiße Schrift) */
.kp-sidebar { width:260px; background: var(--kp-sidebar) !important; border-right:none; min-height:100vh; position:sticky; top:0; color:#fff; }
.kp-sidebar-inner { display:flex; flex-direction:column; height:100%; }
.kp-brand { display:block; padding:1rem; border-bottom:1px solid rgba(255,255,255,.15); }
.kp-logo { height:70px; width:auto; display:block; object-fit:contain; filter: brightness(100%); }
.kp-sidenav { display:flex; flex-direction:column; padding:.5rem; gap:.35rem; }
.kp-sidenav-link { display:block; padding:.75rem .9rem; border-radius:10px; color:#fff; text-decoration:none; opacity:.95; transition:background .2s ease, opacity .2s; }
.kp-sidenav-link:hover { opacity:1; background: rgba(255,255,255,.12); }
.kp-sidenav-link.is-active { background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); }
.kp-sidenav-footer { margin-top:auto; padding:1rem; border-top:1px solid rgba(255,255,255,.15); }
.kp-link { color:#fff; text-decoration:none; opacity:.9; }
.kp-link:hover { opacity:1; text-decoration:underline; }

/* Typografie */
.kp-h1 { font-size:clamp(1.4rem, 2.5vw, 2rem); margin:.2rem 0; color:#000000; }
.kp-h3 { font-size: 20px; margin:0 0 .5rem 0; color:#000000; }
.kp-muted, .kp-meta { color: black; }
.kp-meta { font-size: 12px; color: black; }

/* Cards & Grid (dunkel) */
@media (max-width: 768px) {
  /* Sektion schmaler paddings */
  .kp-section { padding: 0 .875rem; }

  /* Karten schmaler & zentriert */
  .kp-card {
    width: 100%;
    max-width: min(92vw, 520px);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;            /* verhindert visuelles “Überlaufen” */}
.kp-card-body { padding:1rem; }
.kp-card-footer { padding:.75rem 1rem; border-top:1px solid var(--kp-border); display:flex; justify-content:flex-end; }
.kp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }
}
div[data-popup-id="4731"] .brx-popup-content {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Links/Akzente im Content */
.kp-card a, .kp-content a, .kp-table a { text-decoration:none; }
.kp-card a:hover, .kp-content a:hover, .kp-table a:hover { text-decoration:underline; }

/* Buttons (rot) */
.kp-btn, .kp-btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border-radius:10px; border:none;
  background: var(--kp-accent); color:#fff; text-decoration:none; font-weight:500;
  transition: filter .15s ease, transform .05s ease;
}
.kp-btn:hover, .kp-btn-primary:hover { filter: brightness(1.08); }
.kp-btn:active, .kp-btn-primary:active { transform: translateY(1px); }

/* Badges */
.kp-badge { display:inline-block; padding:.2rem .5rem; border-radius:8px; border:1px solid var(--kp-border); background:#1b1b1b; color:#e3e3e3; font-size:.8rem; }
.kp-badge-warn { background:#3a2a00; color:#ffd98a; }

/* Login */
.kp-login-card { max-width:560px; margin:4rem auto; padding:1.25rem; }
.kp-login-input { display:flex; gap:.5rem; margin-top:.5rem; }
.kp-login-input input[type="text"] {
  flex:1; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--kp-border);
  background: var(--kp-surface); color: white;
}
.kp-login-input .kp-btn { white-space:nowrap; }
.kp-error { color:#ff7a7a; margin-top:.75rem; }

/* Details */
.kp-details { display:grid; grid-template-columns: 1fr; gap:.5rem; }
.kp-details .kp-label { display:inline-block; width:100%; color: var(--kp-muted); }
@media (min-width:640px){
  .kp-details { grid-template-columns: auto; }
  .kp-details .kp-label { text-align:left; padding-right:.75rem; }
}

/* Tabellen (dark) */
.kp-table table { border-collapse:collapse; width:100%; background: var(--kp-card); }
.kp-table th, .kp-table td { border-bottom:1px solid var(--kp-border); color: var(--kp-text); }
.kp-table th { font-weight:700; }

/* Empty state */
.kp-empty { padding:2rem; text-align:center; color: var(--kp-muted); }

/* v1.2.0 Fixes */
.kp-shell.kp-has-sidebar .kp-main { width:100%; }

/* Modal (Dark) – Shortcode [kundenportal_button] */
.kp-modal { position:fixed; inset:0; display:none; }
.kp-modal.is-open { display:block; }
.kp-modal-backdrop { position:absolute; inset:0; background:rgb(255, 255, 255); }
.kp-modal-dialog {
  position:relative; z-index:2; max-width:560px; margin:8vh auto;
  background: var(--kp-card); border:1px solid var(--kp-border);
  border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.5); color: var(--kp-text);
}
.kp-modal-head { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--kp-border); }
.kp-modal-body { padding:1rem; }
.kp-modal-close { background:none; border:0; color: var(--kp-text); font-size:1.5rem; cursor:pointer; }

/* Kundenportal-Button (Floating & im Content) */
.kp-btn.kp-portal-btn {
  background: var(--kp-primary) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: filter .15s ease, transform .05s ease;
}
.kp-btn.kp-portal-btn:hover { filter: brightness(1.08); }
.kp-btn.kp-portal-btn:active { transform: translateY(1px); }

/* Floating-Wrapper (wenn globaler Button aktiv) */
.kp-floating-cta { position:fixed; right:1rem; bottom:1rem; z-index:9999; }

/* Responsive */
@media (max-width:1024px){ .kp-header-inner { padding:.75rem 1rem; } }
@media (max-width:768px){
  .kp-sidenav-link { border-radius:12px; }
  .kp-login-input { flex-direction:column; gap:.5rem; }
  .kp-login-input input { width:100%; }
  .kp-grid { grid-template-columns: 1fr; }
}
@media (max-width:420px){
  .kp-h1 { font-size:1.25rem; }
  .kp-btn { padding:.6rem .9rem; }
}
/* --- Mobile Sidebar Breite --- */
@media (max-width: 768px) {
  .kp-sidebar {
    width: 125px !important;
    min-width: 125px !important;
  }
  .kp-layout {
    grid-template-columns: 125px 1fr !important;
  }
}
@media (max-width: 478px) {
    body {
        font-size: 13px !important;
    }

}