/* Kreiter Technische Betreuung — Karten-Band + Story-Overlay (Shortcode [ki_technische_betreuung])
   Alle Selektoren unter .ki-tb-wrap gescoped, damit das Theme (Houzez/Elementor) nichts überschreibt. */
@font-face{
  font-family:"KiTbArchivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("assets/archivo-400.woff2") format("woff2");
}
.ki-tb-wrap{font-family:"KiTbArchivo","Segoe UI",Arial,sans-serif; color:#1D1A16; overflow:hidden}
.ki-tb-wrap *{box-sizing:border-box}

/* ─── Coverflow-Karussell: aktive Karte gross zentral, Nachbarn gestaffelt ─── */
.ki-tb-head{max-width:1240px; margin:0 auto; padding:8px 24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.ki-tb-head-l{display:flex; flex-direction:column; gap:10px}
.ki-tb-label{font-size:12px; letter-spacing:.28em; color:#E2001A; font-weight:700}
.ki-tb-hint{font-size:13.5px; color:#6F675C; display:flex; align-items:center; gap:10px}
.ki-tb-hint::before{content:""; width:22px; height:1px; background:#E2001A}
.ki-tb-hint b{color:#1D1A16}
.ki-tb-navbtns{display:flex; gap:12px}
.ki-tb-navbtn{width:48px; height:48px; border-radius:50%; border:1px solid rgba(0,0,0,.2);
  background:#fff; color:#1D1A16; font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:border-color .25s, color .25s, transform .25s}
.ki-tb-navbtn:hover{border-color:#E2001A; color:#E2001A}
.ki-tb-navbtn:active{transform:scale(.92)}
.ki-tb-navbtn:focus-visible{outline:3px solid #E2001A; outline-offset:2px}

.ki-tb-cf{--cw:clamp(260px,44vw,600px); --ch:calc(var(--cw)*.71);
  position:relative; max-width:1240px; margin:0 auto; padding:34px 24px 8px; perspective:1900px}
.ki-tb-stage{position:relative; height:calc(var(--ch) + 44px); transform-style:preserve-3d}

.ki-tb-card{position:absolute; left:50%; top:22px; width:var(--cw); height:var(--ch); margin:0;
  border-radius:18px; overflow:hidden; cursor:pointer; background:#1a1512;
  border:1px solid rgba(0,0,0,.14);
  transform:translateX(-50%); transform-origin:center center;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .5s ease, box-shadow .5s ease;
  will-change:transform,opacity}
.ki-tb-card:focus-visible{outline:none}
.ki-tb-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; max-width:none}
.ki-tb-shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,17,14,0) 44%, rgba(20,17,14,.8) 100%)}
.ki-tb-row{position:absolute; left:26px; right:26px; bottom:24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; color:#fff}
.ki-tb-t{font-size:26px; font-weight:700; text-shadow:0 1px 12px rgba(0,0,0,.55); line-height:1.15}
.ki-tb-sub{font-size:14px; color:#E7DFD4; margin-top:5px; text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ki-tb-arrow{flex:none; width:44px; height:44px; border-radius:50%; background:#E2001A;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff}
.ki-tb-badge{position:absolute; top:18px; left:18px; background:#E2001A; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.14em; padding:7px 13px; border-radius:999px}
/* aktive Karte: roter Puls-Pfeil + kraeftiger Schatten */
.ki-tb-card.is-active{box-shadow:0 40px 80px -24px rgba(0,0,0,.5); border-color:rgba(0,0,0,.2)}
.ki-tb-card.is-active .ki-tb-arrow{animation:kiTbPulse 2.2s ease-out infinite}
@keyframes kiTbPulse{0%{box-shadow:0 0 0 0 rgba(226,0,26,.55)}100%{box-shadow:0 0 0 15px rgba(226,0,26,0)}}
.ki-tb-cw.is-active{border-color:#E2001A}

/* Notdienst-Karte (gleiche Kachelgroesse, roter Look, statt Bild) */
.ki-tb-nd{background:linear-gradient(155deg, #E2001A 0%, #b00016 55%, #7c0010 100%)}
.ki-tb-nd .ki-tb-nd-in{position:absolute; inset:0; padding:30px; display:flex; flex-direction:column;
  justify-content:space-between; color:#fff}
.ki-tb-nd-label{font-size:12px; letter-spacing:.26em; font-weight:700; color:#fff; opacity:.9}
.ki-tb-nd-tel{font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.01em}
.ki-tb-nd-sub{font-size:14px; color:rgba(255,255,255,.88); margin-top:8px}

.ki-tb-dots{display:flex; justify-content:center; gap:9px; margin-top:22px}
.ki-tb-dot{width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:#cfc9c0; transition:background .25s, width .25s}
.ki-tb-dot.on{background:#E2001A; width:26px; border-radius:999px}
.ki-tb-dot:focus-visible{outline:2px solid #E2001A; outline-offset:2px}

@media (max-width:640px){
  .ki-tb-cf{--cw:min(82vw, 420px)}
  .ki-tb-navbtn{width:42px; height:42px}
  .ki-tb-t{font-size:22px}
  .ki-tb-head{padding:8px 16px 0}
  .ki-tb-cf{padding:26px 12px 6px}
}

/* Dive-Übergang + Toast */
.ki-tb-dive{position:fixed; z-index:99998; overflow:hidden; border-radius:16px; pointer-events:none;
  display:none; will-change:top,left,width,height,border-radius,opacity}
.ki-tb-dive img{width:100%; height:100%; object-fit:cover; display:block; max-width:none}
.ki-tb-dive-veil{position:absolute; inset:0; background:#05080d; opacity:0}

.ki-tb-toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%,14px); z-index:99999;
  background:#1a1512; color:#F4EFE7; font-size:14px; padding:13px 20px; border-radius:999px;
  border:1px solid rgba(226,0,26,.4); opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s}
.ki-tb-toast.on{opacity:1; transform:translate(-50%,0)}

/* Story-Overlay: Vollbild-Iframe — die Story läuft unverändert in ihrem eigenen Fenster */
.ki-tb-story{position:fixed; inset:0; z-index:99997; background:#0e141d}
.ki-tb-story iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.ki-tb-story-close{position:absolute; top:134px; right:14px; z-index:2; display:flex;
  align-items:center; gap:8px; padding:10px 16px; border-radius:999px; cursor:pointer;
  background:rgba(10,20,33,.88); color:#eef3f9; border:1px solid rgba(148,178,208,.35);
  font-family:"KiTbArchivo","Segoe UI",Arial,sans-serif; font-size:13px; font-weight:600}
.ki-tb-story-close:hover{border-color:#ff5a5a}
.ki-tb-story-close:focus-visible{outline:3px solid #5aa9e6; outline-offset:2px}
@media (max-width:899.98px){.ki-tb-story-close{top:74px}}

@media (prefers-reduced-motion: reduce){
  .ki-tb-track{animation:none}
  .ki-tb-card, .ki-tb-notdienst{transition:none}
  .ki-tb-cw .ki-tb-arrow{animation:none}
}

/* ─── Vollbreite animierte Garten-Video-Sektion (Shortcode [ki_garten_video]) ─── */
.ki-gv{position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  height:var(--gvh, 64vh); min-height:340px; max-height:820px; overflow:hidden;
  font-family:"KiTbArchivo","Segoe UI",Arial,sans-serif}
.ki-gv *{box-sizing:border-box}
.ki-gv-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; margin:0; max-width:none}
.ki-gv-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,15,12,.28) 0%, rgba(18,15,12,0) 26%, rgba(18,15,12,0) 62%, rgba(18,15,12,.72) 100%)}
.ki-gv-in{position:absolute; left:0; right:0; bottom:0; z-index:2;
  max-width:1240px; margin:0 auto; padding:0 48px 46px; color:#fff}
.ki-gv-label{font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:#fff; display:flex; align-items:center; gap:12px; margin-bottom:14px}
.ki-gv-label::before{content:""; width:30px; height:2px; background:#E2001A; flex:none}
.ki-gv-title{font-size:clamp(28px,4vw,52px); font-weight:700; letter-spacing:-.015em; line-height:1.08;
  text-shadow:0 2px 24px rgba(0,0,0,.55); max-width:20ch}
@media (max-width:640px){
  .ki-gv{height:52vh; min-height:300px}
  .ki-gv-in{padding:0 20px 28px}
}
@media (prefers-reduced-motion: reduce){
  .ki-gv-vid{display:none}
  .ki-gv{background-size:cover; background-position:center}
}