:root{
  --kp-bg:#ffffff;
  --kp-muted:#6b7280;
  --kp-border:#e5e7eb;
  --kp-soft:#f8fafc;
  --kp-text:#0f172a;
  --kp-accent:#0f172a;
  --kp-danger:#e11d48;
}

.outer-kp-wrap {background:#F6F3EC}
.outer-kp-wrap-bottom {background:#ffffff; padding-top: 25px;padding-bottom:25px;}
.kp-artist-above-title {color:#911688;font-size:15px;font-weight:600;}
.kp-wrap{max-width:1200px;margin:0 auto;padding:1.25rem}
.kp-artist-top {background:#F6F3EC;}
.kp-card-artist{background:#F6F3EC;padding:1rem;margin:1rem 0}
.kp-card{background:#ffffff;padding:1rem;margin:1rem 0}
.kp-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:10px;}
.kp-grid{display:grid;gap:1rem}
.kp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
a.no-account{color:#333333 !important;}
a.no-account:hover{color:#666666 !important;}

@media (max-width:1024px){
  .kp-grid-4{grid-template-columns:repeat(3,1fr)}
  .kp-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .kp-grid-4{grid-template-columns:repeat(2,1fr)}
}

.kp-square{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--kp-soft);}
.kp-square img{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:cover}
.kp-placeholder{width:100%;height:100%;background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#e5e7eb 10px,#e5e7eb 20px);border-radius:4px}

.kp-title{margin:.5rem 0 0;font-size:1.05rem;line-height:1.3}
.kp-title a:hover{color:#444444 !important;}
.kp-price{color:var(--kp-text);font-weight:600}
.kp-lg{font-size:1.15rem}
.kp-h1{font-size:1.55rem;margin:.25rem 0 1rem}
.kp-content{color:#5f5f5f;margin: 20px 0;font-size:17px;}
.kp-meta{color:#333333;}
.kp-meta a{color:#333333;}
.kp-meta a:hover{text-decoration:underline;color:#05403e !important;}

.kp-card label {font-size: 17px;}
.kp-form .kp-input,.kp-form .kp-number,.kp-form .kp-file,.kp-form .kp-textarea{
  width:100%;padding:.6rem;border:1px solid var(--kp-border);border-radius:4px;background:#fff;font-size:17px;
}
.kp-textarea{min-height:160px;margin-bottom: 20px;}

/* Buttons (generisch) */
.kp-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border:1px solid var(--kp-accent);
  background:var(--kp-accent);color:#fff;border-radius:4px;
  text-decoration:none;cursor:pointer;font-size:0.95rem;line-height:1
}
.kp-btn.small{padding:.35rem .6rem;font-size:.88rem}
.kp-btn.secondary{background:#fff;color:var(--kp-accent)}
.kp-btn.secondary:hover{background:#fff;color:#333333;}
.kp-btn.danger{background:var(--kp-danger);border-color:var(--kp-danger)}
.kp-btn.primary{background:var(--kp-accent)}
.kp-btn:hover{filter:brightness(0.95)}

/* Tabs */
.kp-tabs{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.kp-tabs a:hover{background:#05403e;}
.kp-tab{
  padding:.5rem .85rem;border:1px solid var(--kp-border);font-size:17px;
  border-radius:4px;background:#fff;text-decoration:none;color:var(--kp-text)
}
.kp-tab.is-active{background:var(--kp-accent);color:#fff;border-color:var(--kp-accent)}

/* NEU: Buttons innerhalb der Tab-Leiste wie Tabs aussehen lassen */
.kp-tabs .kp-btn{
  padding:.5rem .85rem;
  font-size:inherit;
  line-height:1;
  background:#fff;
  color:var(--kp-text);
  border:1px solid var(--kp-border);
  border-radius:2px;
  font-size:17px;
  filter:none;
}
.kp-tabs .kp-btn:hover{
  background:#fff; /* Tabs haben kein farbiges Hover */
  filter:brightness(0.97);
}
.kp-tabs .kp-btn.danger{
  /* In der Tab-Leiste soll „Abmelden“ wie ein Tab aussehen, nicht rot */
  background:#911688;
  color:#ffffff;
  border-color:var(--kp-border);
}

/* Listen */
.kp-list{width:100%}
.kp-list-head,.kp-list-row{
  display:grid;grid-template-columns:140px 1fr 160px 220px;
  gap:1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--kp-border)
}
.kp-list-head{font-weight:600}
.kp-list-row .thumb .wp-post-image{width:120px;height:120px;object-fit:cover;border-radius:4px}

.kp-search{display:flex;gap:.5rem;margin-bottom:1rem}
.kp-search input[type=text]{flex:1}
.kp-pagination{margin-top:.5rem}

.kp-alert{padding:.6rem .9rem;font-size:17px;border:1px solid var(--kp-border);border-radius:2px;background:#05403e; color:#ffffff;}
.kp-alert.success{background:#05403e;margin-bottom: 20px;}

/* Lightbox */
.kp-no-scroll{overflow:hidden}
.kp-lightbox-overlay{position:fixed;inset:0;background:rgba(17,24,39,.6);display:none;align-items:center;justify-content:center;z-index:9999}
.kp-lightbox-overlay.is-open{display:flex}
.kp-lightbox-dialog{position:relative;max-width:90vw;max-height:90vh}
.kp-lightbox-dialog img{max-width:90vw;max-height:90vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.kp-lightbox-close{position:absolute;top:-12px;right:-12px;background:var(--kp-accent);color:#fff;border:0;border-radius:20px;width:32px;height:32px;cursor:pointer;font-size:20px;line-height:1}

/* --- Variable Overrides from Settings --- */
.kp-card{ border-radius: var(--kp-radius); }
.kp-tab{ border-radius: var(--kp-radius); }
.kp-list-row .thumb .wp-post-image{ border-radius: var(--kp-radius); }
.kp-btn{ font-size: var(--kp-btn-font); border-radius: var(--kp-radius); }
.kp-form .kp-input,.kp-form .kp-number,.kp-form .kp-file{ height: var(--kp-input-h); }
.kp-h1{ font-size: var(--kp-h1-size); }
.kp-title{ font-size: var(--kp-title-size); }
html{ font-size: var(--kp-font-base); }

/* Design options (advanced) */
.kp-grid{ gap: var(--kp-grid-gap, 1rem); }
.kp-tab.is-active{
  background: var(--kp-tab-active-bg, var(--kp-accent));
  border-color: var(--kp-tab-active-bg, var(--kp-accent));
  color: var(--kp-tab-active-text, #fff);
}
.kp-btn:hover{
  background: var(--kp-btn-hover-bg, var(--kp-accent));
  border-color: var(--kp-btn-hover-bg, var(--kp-accent));
  color: var(--kp-btn-hover-text, #fff);
  filter: none;
}
/* Link-Hover generell */
.kp-wrap a:hover { color: var(--kp-link-hover, var(--kp-accent));}
/* === KP Modern File Upload (progressive enhancement) === */
.kp-file.kp-file-hidden{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

.kp-upload{
  display:flex; align-items:center; gap:1rem;
  border:1px dashed var(--kp-border); background:var(--kp-soft);
  border-radius: var(--kp-radius); padding:1rem;
}
.kp-upload-drop{ flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; color:var(--kp-muted); }
.kp-upload-drop strong{ color:var(--kp-text); }
.kp-upload-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .85rem; border:1px solid var(--kp-border); border-radius:var(--kp-radius);
  background:#fff; color:var(--kp-text); cursor:pointer; text-decoration:none; line-height:1;
}
.kp-upload-btn:hover{ filter:brightness(.97); }
.kp-upload-hint{ font-size:.9rem; color:var(--kp-muted); }

.kp-upload.is-dragover{ border-color:var(--kp-accent); background:#fff; box-shadow:0 0 0 3px rgb(15 23 42 / .06) inset; }

.kp-upload-preview{ display:flex; align-items:center; gap:.75rem; margin-left:auto; }
.kp-upload-preview[hidden]{ display:none; }
.kp-upload-preview img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--kp-border); background:#fff; }
.kp-upload-name{ font-size:.95rem; color:var(--kp-text); max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-upload-clear{
  background:transparent; border:0; color:var(--kp-muted); cursor:pointer; padding:.25rem .35rem; border-radius:6px;
}
.kp-upload-clear:hover{ color:var(--kp-text); background:#f3f4f6; }

/* Mobile: Dropzone stapelt sauber */
@media (max-width:640px){
  .kp-upload{ flex-direction:column; align-items:flex-start; }
  .kp-upload-preview{ margin-left:0; }
}

/* =========================================================
   RESPONSIVE ERWEITERUNGEN (nur Ergänzungen, nichts gelöscht)
   Fokus: Mobile UX – Tabs, Listen, Buttons, Formulare
   ========================================================= */

/* Tabs auf kleinen Screens horizontal scrollbar (Swipe) */
.kp-tabs{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.kp-tabs::-webkit-scrollbar{ display:none; }

/* Bessere Tap-Ziele für Tabs & Tab-Buttons */
.kp-tab, .kp-tabs .kp-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

/* Container/Typografie auf schmalen Geräten */
@media (max-width:640px){
  .kp-wrap{ padding:.75rem; }
  .kp-card{ padding:.9rem; }
  .kp-h1{ font-size:1.35rem; }
  .kp-tabs{ margin:0 -.5rem; padding:.25rem .5rem; position:sticky; top:0; background:var(--kp-bg); z-index:5; }
  .kp-form .kp-input,.kp-form .kp-number,.kp-form .kp-file,.kp-form .kp-textarea{ font-size:1rem; }
}

/* Grid-Utilities fein abstufen */
@media (max-width:860px){ .kp-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .kp-grid-4{ grid-template-columns:1fr; } }

/* Liste: von Tabelle zu Kartenlayout umbrechen */
@media (max-width:900px){
  .kp-list-head{ display:none; }
  .kp-list-row{
    grid-template-columns:100px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb price"
      "thumb actions";
    align-items:flex-start;
    padding:.8rem 0;
  }
  .kp-list-row > .thumb{ grid-area:thumb; }
  .kp-list-row > .title{ grid-area:title; font-weight:600; }
  .kp-list-row > .price{ grid-area:price; margin:.15rem 0 .35rem; }
  .kp-list-row > .actions{ grid-area:actions; display:flex; flex-wrap:wrap; gap:.5rem; }
  .kp-list-row .thumb .wp-post-image{ width:90px; height:90px; }
  /* Optionale Feld-Labels für mehr Klarheit */
  .kp-list-row > .price::before{
    content:'Preis';
    display:block;
    font-size:.85rem;
    color:var(--kp-muted);
    margin-bottom:.1rem;
  }
}

@media (max-width:640px){
  .kp-list-row{ grid-template-columns:84px 1fr; }
  .kp-list-row .thumb .wp-post-image{ width:80px; height:80px; }
  .kp-list .actions .kp-btn{ width:100%; justify-content:center; }
}

@media (max-width:420px){
  .kp-list-row{ grid-template-columns:72px 1fr; }
  .kp-list-row .thumb .wp-post-image{ width:68px; height:68px; }
  .kp-tabs{ gap:.35rem; }
  .kp-btn.small{ padding:.45rem .6rem; }
}

/* Lange Titel/Links umbrechen statt überzulaufen */
.kp-list-row .title a{ word-break:break-word; }

/* Lightbox: größere Close-Fläche auf Touch */
@media (max-width:640px){
  .kp-lightbox-close{ width:36px; height:36px; font-size:22px; }
}

/* Upload-Komponente auf Mobil kompakter */
@media (max-width:640px){
  .kp-upload{ padding:.85rem; }
  .kp-upload-preview img{ width:48px; height:48px; }
}

/* Form-Inputs: Touch-Optimierung */
.kp-form .kp-input,.kp-form .kp-number,.kp-form .kp-file,.kp-form .kp-textarea{
  -webkit-tap-highlight-color:transparent;
}

/* Aktionen/Buttons in Listen: saubere Zeilen-Umbrüche */
.kp-list .actions{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Tabs: leichte Schattenabsetzung auf Mobil, wenn sticky */
@media (max-width:640px){
  .kp-tabs{ box-shadow:0 1px 0 var(--kp-border); }
}

.kp-form .kp-error-msg{color:#b91c1c;font-size:.9rem;margin-top:.35rem}
.kp-box.is-loading, .kp-btn.is-loading{opacity:.75;pointer-events:none}

#kp-register-card .kp-grid{display:grid;gap:.75rem}           /* vorher var(--kp-grid-gap,1rem) */
#kp-register-card .kp-field{margin:0 0 .6rem}                  /* vorher .9rem */