/* =========================================================================
   KInnovativ - Popups.
   Dieselben Werte wie die Seite: Onyx, ein Akzent, keine Schatten,
   Karten mit 14 Pixel Radius, Knoepfe als Pille.
   Diese Datei wird zweimal benutzt: auf der Seite und fuer die Sofortvorschau
   im Adminbereich. Darum darf hier nichts stehen, was nur an einem Ort gilt.
   ========================================================================= */

.kip-root,
.kip-stage{
  --kip-canvas:#171721;
  --kip-card:#1e1e2a;
  --kip-card-2:#272735;
  --kip-line:#2c2c3b;
  --kip-ivory:#ededf3;
  --kip-ash:#c3c3cc;
  --kip-fog:#8b8b98;
  --kip-cobalt:#5266eb;
  --kip-cobalt-hi:#6376f0;
  --kip-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kip-display:'Instrument Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --kip-r-card:14px;
  --kip-r-pill:999px;
}

/* ---------- Buehne ----------
   Liegt ueber der Seite, faengt aber keine Klicks ab. Nur die Karte selbst
   und der abgedunkelte Grund der mittigen Fassung nehmen Klicks an. */
.kip-root{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  font-family:var(--kip-ui);
}
.kip-root *{box-sizing:border-box}

/* ---------- Abgedunkelter Grund, nur mittig ---------- */
.kip-veil{
  position:absolute;inset:0;background:rgba(13,13,20,.62);
  pointer-events:auto;opacity:0;transition:opacity .32s ease;
}
.kip-root.is-open .kip-veil{opacity:1}

/* ---------- Die Karte ---------- */
.kip-box{
  position:absolute;pointer-events:auto;
  background:var(--kip-card);border:1px solid var(--kip-line);
  border-radius:var(--kip-r-card);color:var(--kip-ivory);
  padding:22px 24px 24px;
  opacity:0;transform:translateY(10px);
  transition:opacity .32s ease,transform .32s ease;
}
.kip-root.is-open .kip-box{opacity:1;transform:none}

.kip-title{
  font-family:var(--kip-display);font-weight:600;font-size:1.12rem;line-height:1.3;
  letter-spacing:-.012em;margin:0 0 8px;color:var(--kip-ivory);
  padding-right:26px;
}
.kip-text{
  margin:0;color:var(--kip-ash);font-size:.95rem;line-height:1.62;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  white-space:pre-line;
}
.kip-title:empty,.kip-text:empty{display:none}

.kip-cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:16px;padding:11px 22px;border-radius:var(--kip-r-pill);
  background:var(--kip-cobalt);color:#fff;border:1px solid transparent;
  font:inherit;font-size:.93rem;font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease;
}
.kip-cta:hover{background:var(--kip-cobalt-hi)}
.kip-cta:empty{display:none}

/* ---------- Schliessen ---------- */
.kip-x{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:50%;
  color:var(--kip-fog);cursor:pointer;padding:0;
  transition:color .15s ease,border-color .15s ease;
}
.kip-x:hover{color:var(--kip-ivory);border-color:var(--kip-line)}
.kip-x svg{width:15px;height:15px}
.kip-root :focus-visible{outline:2px solid var(--kip-cobalt-hi);outline-offset:3px;border-radius:4px}

/* ---------- Fassung: Ecke unten rechts ---------- */
.kip-root--corner .kip-box{
  right:24px;bottom:24px;width:min(380px,calc(100% - 48px));max-width:380px;
}

/* ---------- Fassung: Mitte ---------- */
.kip-root--center .kip-box{
  left:50%;top:50%;transform:translate(-50%,-50%) translateY(10px);
  width:min(460px,calc(100% - 40px));
}
.kip-root--center.is-open .kip-box{transform:translate(-50%,-50%)}

/* ---------- Fassung: Band am unteren Rand ---------- */
.kip-root--bar .kip-box{
  left:0;right:0;bottom:0;width:100%;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
  background:rgba(30,30,42,.96);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  padding:16px clamp(20px,5vw,32px);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.kip-root--bar .kip-box-text{min-width:0;flex:1 1 380px;order:1}
.kip-root--bar .kip-title{margin:0 0 4px;font-size:1.02rem;padding-right:0}
.kip-root--bar .kip-text{font-size:.9rem;text-align:left;hyphens:none;-webkit-hyphens:none}
.kip-root--bar .kip-cta{margin-top:0;flex:0 0 auto;order:2}
.kip-root--bar .kip-x{position:static;flex:0 0 auto;order:3;margin-left:auto}

/* ---------- Handy: alle drei werden zur Karte am unteren Rand ---------- */
@media (max-width:640px){
  .kip-root--corner .kip-box,
  .kip-root--center .kip-box,
  .kip-root--bar .kip-box{
    left:10px;right:10px;bottom:10px;top:auto;
    width:auto;max-width:none;
    transform:translateY(10px);
    border:1px solid var(--kip-line);border-radius:var(--kip-r-card);
    background:var(--kip-card);backdrop-filter:none;-webkit-backdrop-filter:none;
    display:block;padding:20px 22px 22px;
  }
  .kip-root.is-open .kip-box{transform:none}
  .kip-root--bar .kip-title{margin:0 0 8px;padding-right:26px}
  .kip-root--bar .kip-text{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .kip-root--bar .kip-cta{margin-top:16px}
  .kip-root--bar .kip-x{position:absolute;top:12px;right:12px;margin-left:0}
}

/* ---------- Ruhe statt Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .kip-box,.kip-veil{transition:opacity .28s ease!important}
  .kip-box{transform:none!important}
  .kip-root--center .kip-box{transform:translate(-50%,-50%)!important}
  @media (max-width:640px){
    .kip-root--center .kip-box{transform:none!important}
  }
}

/* =========================================================================
   Nur im Adminbereich: der Editor und die Sofortvorschau.
   Die Vorschau benutzt oben genau dieselben Regeln, damit Vorschau und
   Wirklichkeit nicht auseinanderlaufen.
   ========================================================================= */

.kip-editor{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
.kip-editor-main{min-width:0}
.kip-editor-rail{min-width:0;position:sticky;top:calc(59px + 18px)}
.kip-editor-side{margin-bottom:18px}

.kip-langs{display:flex;flex-wrap:wrap;gap:14px 24px}
.kip-lang{display:flex}

.kip-nowrap{white-space:nowrap}
.kip-state{font-size:.82rem;letter-spacing:.04em;white-space:nowrap}
.kip-state--laeuft{color:#7fd39a}
.kip-state--geplant{color:#6376f0}
.kip-state--abgelaufen{color:#8b8b98}
.kip-state--aus{color:#8b8b98}

/* Der Ausschnitt, in dem die Vorschau steht. Er ersetzt das Fenster. */
.kip-stage{
  position:relative;overflow:hidden;
  height:300px;border:1px solid #2c2c3b;border-radius:12px;
  background:#171721;
}
.kip-stage .kip-root{position:absolute}
.kip-stage .kip-box{font-size:.9rem}
.kip-stage .kip-title{font-size:1rem}
.kip-stage .kip-text{font-size:.86rem}
.kip-stage .kip-cta{padding:9px 18px;font-size:.86rem}

/* Angedeutete Seite im Hintergrund, damit man die Wirkung sieht. */
.kip-stage-page{position:absolute;inset:0;padding:22px;display:flex;
  flex-direction:column;gap:11px;opacity:.5}
.kip-stage-line{display:block;height:9px;border-radius:5px;background:#23232f}
.kip-stage-line--short{width:58%}

/* In der Vorschau gilt immer die grosse Fassung, auch wenn das Fenster
   schmal ist. Sonst zeigt die Vorschau am Rechner die Handy-Karte. */
.kip-stage .kip-root--corner .kip-box{
  left:auto;right:16px;bottom:16px;top:auto;width:min(280px,calc(100% - 32px));
  border-radius:var(--kip-r-card);display:block;padding:16px 18px 18px;
}
.kip-stage .kip-root--center .kip-box{
  left:50%;right:auto;top:50%;bottom:auto;width:min(300px,calc(100% - 32px));
  border-radius:var(--kip-r-card);display:block;padding:16px 18px 18px;
}
.kip-stage .kip-root--bar .kip-box{
  left:0;right:0;bottom:0;top:auto;width:100%;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;
}
.kip-stage .kip-root--bar .kip-box-text{order:1;flex:1 1 200px;min-width:0}
.kip-stage .kip-root--bar .kip-title{margin:0 0 4px;padding-right:0;font-size:.94rem}
.kip-stage .kip-root--bar .kip-text{text-align:left;hyphens:none;-webkit-hyphens:none}
.kip-stage .kip-root--bar .kip-cta{margin-top:0;order:2;flex:0 0 auto}
.kip-stage .kip-root--bar .kip-x{position:static;order:3;margin-left:auto;flex:0 0 auto}

@media (max-width:1100px){
  .kip-editor{grid-template-columns:minmax(0,1fr)}
  .kip-editor-rail{position:static}
}