/* === Grid & Cards ==================== */
.kjp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:10px}
.kjp-card{border:1px solid #ddd;border-radius:8px;padding:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer}
.kjp-card__media{display:flex;align-items:center;justify-content:center;height:150px;background:#fafafa;border-radius:6px}
.kjp-card__media img{max-width:130px;max-height:130px;display:block}
.kjp-card__title{margin:8px 0 2px;font-size:.95rem}
.kjp-card__meta{font-size:.85rem;color:#666}

/* === Modal (Desktop) ================= */
.kjp-modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  padding:2rem;
  z-index:999999;
}
.kjp-modal.is-open{display:flex}

.kjp-modal__dialog{
  position:relative;
  background:#fff;
  width:min(1000px, calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);
  overflow:auto;
  border-radius:14px;
  box-shadow:none;
}
.kjp-modal__body{display:flex;gap:28px;align-items:flex-start;padding:20px 24px 28px}
.kjp-modal__image{flex:1 1 58%}
.kjp-modal__image img{display:block;width:clamp(260px,45vw,520px);height:auto;border-radius:10px}
.kjp-modal__content{flex:1 1 42%;min-width:260px;outline:none}
.kjp-modal__title{margin:0 0 .75rem;font-size:1.25rem;font-weight:700}

/* Tabelle dezent (Desktop) */
.kjp-spec{border-collapse:collapse;width:100%}
.kjp-spec th,.kjp-spec td{border-bottom:1px solid rgba(0,0,0,.08);padding:.5rem .75rem;text-align:left;line-height:1.3}
.kjp-spec th{width:52%;color:#666;font-weight:600}

/* Close / Pfeile */
.kjp-modal__close{
  position:fixed; top:10px; right:10px;
  width:44px; height:44px; line-height:44px;
  border:0; border-radius:999px; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:26px; text-align:center; z-index:100030;
}
/* NAV-BUTTONS – Position unverändert, nur Optik */
.kjp-modal__nav{
  position: fixed; top: 50vh; transform: translateY(-50%);
  width: 50px; height: 50px;                 /* gleich hoch/breit -> nicht oval */
  padding: 0 !important;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50% !important;             /* rund erzwingen */
  background: rgba(255,255,255,.25);         /* 25% weiß transparent */
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  backdrop-filter: saturate(1.2) blur(2px);   /* optional: etwas „glasig“ */
  cursor: pointer; z-index: 100020;

  /* ursprüngliches "<" / ">" verstecken – wir setzen es per ::before */
  display: grid; place-items: center;
  font-size: 0; line-height: 0; color: transparent;
}
.kjp-modal__prev{ left: 12px; }              /* Position UNVERÄNDERT */
.kjp-modal__next{ right: 12px; }             /* Position UNVERÄNDERT */

/* Blaue Doppelpfeile als Text – sauber und fett */
.kjp-modal__prev::before,
.kjp-modal__next::before{
  content: "";
  font-family: "Segoe UI", "SF Pro Text", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -2px;                      /* << / >> kompakter */
  line-height: 1;
  color: #1a73e8;                            /* Blau */
}
.kjp-modal__prev::before{ content: "<<"; }
.kjp-modal__next::before{ content: ">>"; }

/* leichte Hover-Reaktion (optional) */
.kjp-modal__nav:hover{
  background: rgba(255,255,255,.35);
  transform: translateY(-50%) scale(1.06);
}

/* schöne Chevrons, gleiche Position/Größe */
.kjp-modal__prev::before,
.kjp-modal__next::before{
  font-family: "Segoe UI Symbol","SF Pro Text",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight: 700; font-size: 22px; line-height: 1; color: #222;
  content: "";
}
.kjp-modal__prev::before{ content: "❮"; }  /* U+276E */
.kjp-modal__next::before{ content: "❯"; }  /* U+276F */


/* ===== Mobile ================================================= */
@media (max-width: 768px){
  /* Fullscreen unter Sticky-Bereich + vertikal zentriert */
  .kjp-modal{
    padding: 0;
    padding-top: 20px;                /* Abstand unter dem Header */
    display: grid;
    place-items: center;              /* vertikal + horizontal zentrieren */
  }

  .kjp-modal__dialog{
    width: 100vw;
    height: auto !important;          /* nicht strecken */
    min-height: 72vh;                  /* NEU: Modal nie kleiner als ~72% der Höhe */
    max-height: calc(100vh - 20px);    /* Obergrenze bleibt */
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    align-self: center;
    justify-self: center;
  }

  /* Bild bestimmt die optische Höhe – keine weiße Fläche mehr */
  .kjp-modal__body{
    position: relative;
    min-height: 72vh;                  /* NEU: Body hält die Höhe */
  }

/* Wrapper */
.kjp-modal__img{
  position: relative;          /* nötig fürs Overlay */
  overflow: hidden;            /* runde Ecken auch fürs Overlay */
  border-radius: 16px;
  height:100%
}

/* Hintergrundmotiv – standardmäßig AUS */
.kjp-modal__img::before{
  content:"";
  position:absolute; inset:0;
  background:url('/wp-content/uploads/Erfal/kind_am_tisch.jpg') center/cover no-repeat;
  /*opacity:0; transition:opacity .2s ease;*/
  border-radius:inherit; z-index:0;
}
/*#kjp-modal.kjp-bg-demo-on .kjp-modal__img::before{ opacity:1; }*/


/* Plissee-Bild – Deckkraft per CSS-Variable */
.kjp-modal__img img{
  position:relative; z-index:1;
  display:block;
  max-width:100%;
  max-height:72vh;   /* füllt den sichtbaren Bereich, ohne zu quetschen */
  width:auto; height:auto;
  /* opacity: var(--img-opacity,1);  ← ENTFERNEN */
  /* transition: opacity .2s ease;   ← optional entfernen */
}






  /* Info-Card über dem Bild (kein Scrollbalken, alles sichtbar) */
  .kjp-modal__info{
    position: absolute; 
    top: 12px; left: 12px; right: 12px;
    margin: 0;
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    overflow: visible;
  }

  /* kompaktere Typo (wie gewünscht) */
  .kjp-infoTable, .kjp-infoTable table{ border: 0; }
  .kjp-infoTable th, .kjp-infoTable td{
    border: 0;
    padding: 10px 12px;
    line-height: 1.2;
  }

  /* Pfeile über dem Bild*/
.kjp-modal__body { position: relative; }

/* Pfeile relativ zur Mitte, aber etwas höher */
.kjp-modal__navBtn{
  position: absolute;
  top: calc(50% - 10px);   
  transform: translateY(-50%);
  z-index: 3;
}

/* Optional mobil etwas stärker anheben */
@media (max-width:768px){
  .kjp-modal__navBtn{ top: 40px; } 


  .kjp-modal__navBtn--prev{ left: 10px; }
  .kjp-modal__navBtn--next{ right: 10px; }

  /* Close/X bleibt frei vom Header */
  .kjp-modal__close{
    position: fixed; 
    top: 40px; right: 12px; 
    z-index: 4;
  }
}



/* Fallback, falls der Browser kein dvh kann */
@supports not (height: 100dvh){
  @media (max-width: 768px){
    .kjp-modal__dialog{
      height: calc(100vh - 20px);
      max-height: calc(100vh - 20px);
    }
  }
}

  /* Bild oben vollbreit */
  .kjp-modal__body{position:relative;display:block;padding:0}
  .kjp-modal__image{margin:0}
  .kjp-modal__image img{width:100%;height:auto;border-radius:0}

  /* Info-Block: IMMER vollständig sichtbar, ohne Scrollbar,
     darf den UNTEREN Teil des Bildes überlappen. */
  .kjp-modal__content{
    position:absolute; left:0; right:0; bottom:0;
    margin:0; padding:10px 12px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(2px);
    border-radius:14px 14px 0 0;   /* oben rund, unten KEIN Rand */
    box-shadow:none; border:0; outline:0;
  }

  /* kompakter Text, keine Gitternetz-Linien */
  .kjp-modal__title{margin:0 0 .4rem;font-size:1.05rem}
  .kjp-spec{width:100%;border-collapse:separate;border-spacing:0;margin:0}
  .kjp-spec th,.kjp-spec td{
    padding:.35rem .5rem; line-height:1.15; border:none;   /* keine Linien */
    font-size:.95rem;
  }
  .kjp-spec tr:last-child th,.kjp-spec tr:last-child td{border:0}

  /* Pfeile bleiben über dem Bild im Viewport */
  .kjp-modal__prev{left:6px}
  .kjp-modal__next{right:6px}
}
.kjp-grid .kjp-card__meta{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.kjp-grid .kjp-card__meta .kjp-ss{
  width:28px;
  height:28px;
  flex:0 0 28px;
  object-fit:contain;
  vertical-align:middle;
}
/* falls Theme wieder kleiner macht:
.kjp-grid .kjp-card__meta .kjp-ss{width:28px!important;height:28px!important;}
*/
/* Sichtschutz-Icons in den Karten: doppelte Größe */
.kjp-grid .kjp-card__meta{
  display:flex;
  align-items:center;
  gap: .8rem;            /* etwas mehr Abstand */
}
.kjp-grid .kjp-card__meta .kjp-ss{
  width: 56px;           /* vorher 28px → jetzt doppelt */
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
  vertical-align: middle;
}

/* Falls das Theme die Größe überschreibt, notfalls so: */
/* .kjp-grid .kjp-card__meta .kjp-ss{ width:56px!important; height:56px!important; } */

/* Icon-Grundgröße (wie bisher) */
.kjp-grid .kjp-card__meta .kjp-ss{
  width:56px;
  height:56px;
  flex:0 0 56px;
  object-fit:contain;
  vertical-align:middle;
  transition: transform .15s ease-out; /* smooth */
  transform-origin: left center;       /* wächst nach rechts */
}

/* Hover/Focus: doppelt so groß */
.kjp-grid .kjp-card__meta .kjp-ss:hover,
.kjp-grid .kjp-card__meta .kjp-ss:focus-visible{
  transform: scale(2);
  z-index: 10;
}

/* Damit nichts abgeschnitten wird */
.kjp-grid .kjp-card__meta,
.kjp-grid .kjp-card{
  overflow: visible;
}
.kjp-grid .kjp-card__meta{
  display:flex; align-items:center; gap:.8rem; overflow:visible;
}

/* Sichtschutz-Icon (du hast es schon so ähnlich) */
.kjp-grid .kjp-card__meta .kjp-ss{
  width:56px; height:56px; flex:0 0 56px;
  object-fit:contain; vertical-align:middle;
  transition: transform .15s ease-out;
  transform-origin: left center;
}
.kjp-grid .kjp-card__meta .kjp-ss:hover,
.kjp-grid .kjp-card__meta .kjp-ss:focus-visible{
  transform: scale(2); z-index:10;
}

/* Transmission-Icon + Wert */
.kjp-grid .kjp-card__meta .kjp-tr{
  width:56px; height:56px; flex:0 0 56px;
  object-fit:contain; vertical-align:middle;
  transition: transform .15s ease-out;
  transform-origin: left center;
}
.kjp-grid .kjp-card__meta .kjp-tr:hover,
.kjp-grid .kjp-card__meta .kjp-tr:focus-visible{
  transform: scale(1.3); z-index:10;
}
.kjp-grid .kjp-card__meta .kjp-tr-wrap{
  display:inline-flex; align-items:center; gap:.4rem;
}
.kjp-grid .kjp-card__meta .kjp-tr-val{
  font-weight:600; line-height:1; white-space:nowrap;
}
/* Sichtschutz-Icon (Basis) */
.kjp-grid .kjp-card__meta .kjp-ss{
  width:56px; height:56px; flex:0 0 56px;
  object-fit:contain; vertical-align:middle;
  transition: transform .15s ease-out;
  transform-origin: left center;
}

/* Transmission-Icon exakt gleiche Größe wie Sichtschutz */
.kjp-grid .kjp-card__meta .kjp-tr{
  width:40px; height:40px; display:block;
  object-fit:contain; vertical-align:middle;
}

/* Transmission: Prozent-Overlay unten links auf dem Icon */
.kjp-grid .kjp-card__meta .kjp-tr-wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease-out;
  transform-origin: left center;
}
.kjp-grid .kjp-card__meta .kjp-tr-val{
  position:absolute; left:4px; bottom:4px;
  padding: 2px 6px;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff; background: rgba(0,0,0,.55);
  border-radius: 4px;
  white-space: nowrap;
  pointer-events:none;
}

/* Hover-Scale (wie beim Sichtschutz) */
.kjp-grid .kjp-card__meta .kjp-ss:hover,
.kjp-grid .kjp-card__meta .kjp-ss:focus-visible,
.kjp-grid .kjp-card__meta .kjp-tr-wrap:hover,
.kjp-grid .kjp-card__meta .kjp-tr-wrap:focus-within{
  transform: scale(1.5);
  z-index:10;
}

/* Meta-Reihe: Platz für vergrößerte Icons */
.kjp-grid .kjp-card__meta{
  display:flex; align-items:center; gap:.8rem; overflow:visible;
}
/* Meta-Reihe (lassen wie gehabt) */
.kjp-grid .kjp-card__meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  overflow:visible;
}

/* Meta bleibt sichtbar für vergrößerte Elemente */
.kjp-grid .kjp-card__meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  overflow:visible;
}

/* --- TRANSMISSION: Icon 40px + Badge unterhalb, 2px ins Icon überlappend --- */
.kjp-grid .kjp-card__meta .kjp-tr-wrap{
  position: relative;           /* Bezug für das Badge */
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease-out;
  transform-origin: left center;
}
.kjp-grid .kjp-card__meta .kjp-tr{
  width:40px; height:40px;      /* gleiche Zielgröße wie gewünscht */
  display:block;
  object-fit:contain;
  vertical-align:middle;
}
/* Transmission-Badge: ohne Hintergrund, schwarze Schrift */
.kjp-grid .kjp-card__meta .kjp-tr-val{
  position: absolute;
  top: calc(100% - 0px);     /* leicht ins Icon hinein */
  left: 50%;
  transform: translateX(-50%);
  font: 700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: #142bfa;               /* blaue Schrift */
  background: none;          /* kein Hintergrund */
  padding: 0;                /* keine zusätzliche Höhe durch Padding */
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}



/* Hover-Vergrößerung wirkt auf Icon + Badge gemeinsam */
.kjp-grid .kjp-card__meta .kjp-tr-wrap:hover,
.kjp-grid .kjp-card__meta .kjp-tr-wrap:focus-within{
  transform: scale(1.5);
  z-index: 10;
}
/* Custom Tooltip */
.kjp-tooltip{
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20,20,20,.92);
  color: #fff;
  font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  white-space: pre-line;                /* \n anzeigen */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.kjp-tooltip::after{                    /* kleiner Pfeil */
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: rgba(20,20,20,.92);
}

/* Toolbar-Grundlayout */
.kjp-toolbar{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Filter kompakt in Spalten (kein Vollbreite-Select) */
.kjp-toolbar .kjp-filters{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 10px 12px;
  align-items: end;
}

/* Label + Select als kompakter Block */
.kjp-toolbar .kjp-filters label{
  display: inline-grid;
  grid-auto-flow: row;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

/* WICHTIG: Theme überschreibt oft width:100% → hier explizit zurücknehmen */
.kjp-toolbar .kjp-filters select{
  width: auto !important;          /* bricht das volle Breite-Verhalten */
  max-width: 220px;                /* begrenzt die Breite */
  min-width: 160px;                /* nicht zu klein */
  padding-right: 28px;             /* Platz für die Pfeil-Grafik */
}

/* Optional: auf größeren Screens Toolbar zweispaltig (Filter links, Zähler/Active rechts) */
@media (min-width: 920px){
  .kjp-toolbar{
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .kjp-stats{ justify-self: end; }
}

/* Toolbar einspaltig – Active-Zeile unter den Filtern */
.kjp-toolbar{
  display:grid;
  grid-template-columns: 1fr;   /* immer einspaltig */
  gap:12px;
}

/* Filter bleiben oben */
.kjp-toolbar .kjp-filters{
  grid-column: 1 / -1;
}

/* Active-Zeile UNTER den Filtern, Text links, Button rechts */
.kjp-toolbar .kjp-active{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr auto;  /* Text | Button */
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* (optional) Zähler separat darunter/rechts */
.kjp-toolbar .kjp-stats{
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 4px;
}

/* Falls du vorher eine 2-Spalten-Desktop-Regel hattest: hart überstimmen */
@media (min-width: 920px){
  .kjp-toolbar{ grid-template-columns: 1fr !important; }
}
/* Modal sichtbar, wenn nicht [hidden] */
#kjp-modal[hidden]{ display:none !important; }

#kjp-modal{
  position: fixed;
  inset: 0;
  display: flex;                 /* sichtbar */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 99990;
}

.kjp-modal__dialog{
  max-width: min(960px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  padding: 16px 20px;
}

.kjp-modal__close{
  position: sticky; top: 0; float: right;
  border: 0; background: transparent; font-size: 24px; line-height: 1;
  cursor: pointer;
}

body.kjp-modal-open{ overflow: hidden; }
/* Sichtbarkeit */
#kjp-modal[hidden]{ display:none !important; }
#kjp-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:99990;
}
.kjp-modal__dialog{
  max-width:min(1100px, 92vw);
  max-height:86vh; overflow:auto;
  background:#fff; border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,.35);
  padding:20px 24px; position:relative;
}

/* Title & Grid */
.kjp-modal__title{ margin:0 0 10px; }
.kjp-modal__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.kjp-modal__img img{ display:block; max-width:100%; height:auto; border-radius:8px; }
.kjp-modal__id{ margin:.25rem 0 1rem; }

/* Infos Tabelle */
.kjp-props{ border-collapse: collapse; width:100%; }
.kjp-props th{ text-align:left; font-weight:600; padding:.4rem .6rem .4rem 0; white-space:nowrap; }
.kjp-props td{ padding:.4rem 0; }

/* Close-Button: Kreis + zentriertes X, Hover NICHT ausfüllen */
.kjp-modal__close{
  position: sticky; top: 0; float: right;

  width: 44px; height: 44px;
  padding: 0 !important;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50% !important;
  background: rgba(255,255,255,.25);
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
  cursor: pointer; user-select: none; appearance: none;

  display: grid; place-items: center;

  /* Original-Text ausblenden – X kommt über ::before */
  font-size: 0; line-height: 0; color: transparent;

  transition: background .2s ease, box-shadow .12s ease, transform .12s ease;

  /* nur Glyphen-Feinjustage (px) – Kreis bleibt stehen */
  --x-dy: -10px; /* bei Bedarf -2..+2 testen */
}

/* Nur die Glyphe verschieben – der Kreis bleibt unverändert */
.kjp-modal__close::before{
  content: "×";
  font-family: "Segoe UI","SF Pro Text",system-ui,-apple-system,Arial,sans-serif;
  font-weight: 700;
  font-size: 50px;   /* deine Basisgröße */
  line-height: 1;
  color: #1a73e8;
  transform: translateY(var(--x-dy));
  transform-origin: center;
  text-rendering: geometricPrecision;
}

/* Hover wie Nav: NICHT voll füllen, nur minimal heller */
.kjp-modal__close:hover{
  background: rgba(255,255,255,.35) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.16);
  transform: scale(1.06);
}

/* Farbe des X nicht invertieren, egal was das Theme macht */
.kjp-modal__close:hover::before{ color: #1a73e8; }
.kjp-modal__close:focus-visible{ outline:2px solid #1a73e8; outline-offset:2px; }




/* --- EINZIG aktiver Block am Dateiende --- */
.kjp-modal__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px;           /* gleich -> Kreis */
  padding: 0;                           /* kein Aufblähen */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;                   /* Kreis */
  background: rgba(255,255,255,.25);    /* 25% weiß transparent */
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  display: grid; place-items: center; cursor: pointer;
  font-size: 0; line-height: 0; color: transparent; /* Original-< > ausblenden */
  z-index: 100020;
}
.kjp-modal__prev{ left: 10px; }
.kjp-modal__next{ right: 10px; }

/* Blaue Doppelpfeile – gleiche Breite, doppelte Höhe */
.kjp-modal__prev::before,
.kjp-modal__next::before{
  display: inline-block;               /* nötig, damit transform sauber greift */
  font-family: "Segoe UI","SF Pro Text",system-ui,-apple-system,Arial,sans-serif;
  font-weight: 800;
  font-size: 20px;                     /* Breite bleibt von dieser Größe abhängig */
  line-height: 1;
  letter-spacing: -2px;                /* << / >> kompakter */
  color: #1a73e8;                      /* Blau */
  transform: scaleY(3);                /* <-- Höhe x2, Breite unverändert */
  transform-origin: center;            /* mittig strecken */
  text-rendering: geometricPrecision;  /* etwas sauberere Kanten */
}

.kjp-modal__prev::before{ content: "<<"; }
.kjp-modal__next::before{ content: ">>"; }


.kjp-modal__nav:hover{
  background: rgba(255,255,255,.35);
  transform: translateY(-50%) scale(1.06);
}


@media (max-width: 820px){
  .kjp-modal__grid{ grid-template-columns: 1fr; }
}
body.kjp-modal-open{ overflow:hidden; }

.kjp-demo-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-left:.5rem; font-size:.9rem;
}
.kjp-demo-toggle input{ transform: translateY(1px); }


/* === Transparenz-Demo global (Desktop + Mobile) === */
#kjp-modal .kjp-modal__img{
  position: relative;
  overflow: hidden;          /* runde Ecken auch fürs Overlay */
  border-radius: 16px;
}
#kjp-modal .kjp-modal__img::before{
  content:"";
  position:absolute; inset:0;
  background:url('/wp-content/uploads/Erfal/kind_am_tisch.jpg') center/cover no-repeat;
  /*opacity:0;                   */
  /*transition: opacity .2s ease;*/
  border-radius: inherit;
  z-index:0;
  pointer-events: none;              /* Swipe/Klicks nicht blockieren */
}
#kjp-modal .kjp-modal__img img{
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  /*transition: opacity .2s ease;*/
}
#kjp-modal.kjp-bg-demo-on .kjp-modal__img::before{ opacity:1; }

/* Info-Tabelle im Modal ohne Linien */
#kjp-modal .kjp-props{ border-collapse: separate; border-spacing: 0; width: 100%; }
#kjp-modal .kjp-props th,
#kjp-modal .kjp-props td{
  border: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: .55rem .75rem;
  text-align: left; line-height: 1.3;
}
#kjp-modal .kjp-props th{ width: 52%; color: #666; font-weight: 600; }

/* Inline-Checkbox neben SSK */
.kjp-demo-toggle--inline{
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: .6rem; font-size: .95rem;
  white-space: nowrap;
}
.kjp-demo-toggle--inline input{ transform: translateY(1px); }
/* Sicherstellen, dass in der Details-Spalte geklickt werden kann */
#kjp-modal .kjp-modal__details,
#kjp-modal .kjp-props,
#kjp-modal .kjp-props td,
#kjp-modal .kjp-props th {
  position: relative;
  pointer-events: auto !important;
  z-index: 1;
}

/* Die Inline-Checkbox bekommt Priorität */
#kjp-modal .kjp-demo-toggle--inline,
#kjp-modal #opt-bg-demo-modal {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
}

/* Falls irgendeine Linie/Overlay noch darüber liegt */
#kjp-modal .kjp-modal__img { z-index: 0; }


#kjp-modal .kjp-props,
#kjp-modal .kjp-props * {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
/* Modal: echtes Browser-Checkbox-UI erzwingen */
#kjp-modal .kjp-demo-toggle--inline input[type="checkbox"]{
  /* alle Theme-Hacks neutralisieren */
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  position: static !important;
  display: inline-block !important;
  width: 1.15em; height: 1.15em;
  margin: 0 .45rem 0 0;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 3;
  vertical-align: middle;
  accent-color: #1a73e8;  /* Farbe des Häkchens */
}

/* evtl. vom Theme erzeugte „Fake-Kästchen“ entfernen */
#kjp-modal .kjp-demo-toggle--inline::before,
#kjp-modal .kjp-demo-toggle--inline::after,
#kjp-modal .kjp-demo-toggle--inline span::before,
#kjp-modal .kjp-demo-toggle--inline span::after{
  content: none !important;
}

/* Label selbst neutral halten (keine pill/grüne Fläche davor) */
#kjp-modal .kjp-demo-toggle--inline{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
}
#kjp-modal .kjp-demo-wrap{
  display:inline-flex; align-items:center; gap:.45rem;
}

#kjp-modal #opt-bg-demo-modal{
  appearance:checkbox; -webkit-appearance:checkbox;
  width:1.15em; height:1.15em; margin:0;
  vertical-align:middle;
  pointer-events:auto; z-index:1;
  accent-color:#1a73e8;
}

#kjp-modal .kjp-demo-toggle--inline{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; cursor:pointer;
}
/* Halbtransparenz links, volle Deckkraft rechts */
.kjp-modal__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Aktiv, wenn Demo-Checkbox an ist */
.kjp-bg-demo-on .kjp-modal__img img {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,var(--img-opacity)) 0%,
    rgba(0,0,0,var(--img-opacity)) 50%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,var(--img-opacity)) 0%,
    rgba(0,0,0,var(--img-opacity)) 50%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,1) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 1 !important;
  filter: none !important;
}
#kjp-modal .kjp-modal__title a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
#kjp-modal .kjp-modal__title a:hover{
  text-decoration: none;
}
/* Titel-Link im Modal sicher klickbar machen */
#kjp-modal .kjp-modal__title {
  position: relative;
  z-index: 5;                 /* über Bild/Overlays/Nav */
  pointer-events: auto !important;
}
#kjp-modal .kjp-modal__title a {
  pointer-events: auto !important;
}

/* Falls ein globales Overlay danebenliegt: */
#kjp-modal .kjp-modal__content {
  position: relative;
  z-index: 2;                 /* Inhalt über dem Bild-Wrapper */
  pointer-events: auto !important;
}

/* Sicherheit: Bild-Wrapper nimmt keine Klicks aus dem Textbereich weg */
#kjp-modal .kjp-modal__img,
#kjp-modal .kjp-modal__img::before {
  pointer-events: none;       /* nur Bildbereich reagiert nicht */
}
#kjp-modal .kjp-modal__img img {
  pointer-events: none;
}
/* --- Klick-Reihenfolge im Modal definieren --- */
#kjp-modal .kjp-modal__img { position: relative; z-index: 1; }
#kjp-modal .kjp-modal__nav { position: absolute; z-index: 2; }   /* Pfeile über Bild */
#kjp-modal .kjp-modal__content { position: relative; z-index: 4; }/* Text/Title über allem */
#kjp-modal .kjp-modal__close { position: sticky; z-index: 6; }     /* X ganz oben */

/* Titel-Link sicher klickbar */
#kjp-modal .kjp-modal__title { position: relative; }
#kjp-modal .kjp-modal__title a {
  position: relative; display: inline-block; z-index: 5;
  pointer-events: auto;
}

/* Bild-Overlays sollen Klicks nicht „schlucken“ */
#kjp-modal .kjp-modal__img::before { pointer-events: none; }
#kjp-modal .kjp-modal__img img      { pointer-events: none; }

/* Hinweistext zur Transparenz-Simulation */
#kjp-modal .kjp-disclaimer {
  display: none;
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1456c3;           /* dezent blau */
}
#kjp-modal .kjp-disclaimer.is-visible { display: block; }

/* Optional: Sternchen am Label ausrichten */
.kjp-demo-toggle--inline { gap: .3rem; }

/* Sicherheit: Wenn global .kjp-bg-demo-on genutzt wird, kann man alternativ auch per CSS anzeigen: */
/* #kjp-modal.kjp-bg-demo-on .kjp-disclaimer { display:block; } */