/* =================================================================
   Kita-Generatoren (Tagesablauf + Wochenplan)
   Passend zum allcss-Template (Tokens aus assets-ka/css/style.css).
   Alle Regeln sind unter .kag gekapselt -> keine Konflikte mit WB.
   ================================================================= */
.kag{
  --kag-pink:var(--pink,#E92E8B); --kag-pink-strong:var(--pink-strong,#C81E74);
  --kag-pink-soft:#FDEEF6; --kag-navy:var(--navy,#28347E); --kag-ink:var(--ink,#2A2540);
  --kag-muted:var(--muted,#6E6A82); --kag-line:var(--line,#ECEBF3); --kag-line-strong:var(--line-strong,#DEDCEB);
  --kag-soft:var(--bg-soft,#F6F7FB); --kag-shadow:var(--shadow,0 2px 5px rgba(40,52,126,.06),0 14px 34px -14px rgba(40,52,126,.22));
  --kag-display:var(--display,"Fredoka","Nunito",system-ui,sans-serif); --kag-sans:var(--sans,"Nunito",system-ui,sans-serif);
  counter-reset:kagstep;
  max-width:1040px; margin:8px 0 28px; font-family:var(--kag-sans); color:var(--kag-ink); line-height:1.5;
}
.kag *,.kag *::before,.kag *::after{box-sizing:border-box}
.kag [hidden]{display:none!important}

.kag .kag__lead{margin:0 0 20px; font-size:17px; color:var(--kag-ink)}

/* Schritt-Boxen mit automatischer Nummerierung (versteckte Schritte zaehlen nicht) */
.kag .kag__step{background:#fff; border:1px solid var(--kag-line); border-radius:18px; padding:20px 22px; margin:0 0 16px; box-shadow:var(--kag-shadow)}
.kag h2.kag__h{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-family:var(--kag-display); font-weight:600; font-size:clamp(18px,1.9vw,21px); line-height:1.25; color:var(--kag-navy); letter-spacing:0}
.kag h2.kag__h::before{counter-increment:kagstep; content:counter(kagstep); flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--kag-pink); color:#fff; font-family:var(--kag-sans); font-weight:800; font-size:15px}
.kag .kag__opt{font-family:var(--kag-sans); font-weight:700; font-size:13px; color:var(--kag-muted); background:var(--kag-soft); border-radius:999px; padding:2px 10px}

/* Auswahl-Kacheln (Radio) */
.kag .kag__choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.kag .kag__choices--2{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kag .kag__choice{position:relative; display:block; border:2px solid var(--kag-line-strong); border-radius:14px; padding:14px 16px 14px 44px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s}
.kag .kag__choice:hover{border-color:var(--kag-pink)}
.kag .kag__choice input{position:absolute; left:16px; top:17px; margin:0; width:18px; height:18px; accent-color:var(--kag-pink)}
.kag .kag__choice strong{display:block; font-size:16px; color:var(--kag-navy)}
.kag .kag__choice small{display:block; margin-top:5px; font-size:14px; line-height:1.45; color:var(--kag-muted)}
.kag .kag__choice.is-checked,.kag .kag__choice:has(input:checked){border-color:var(--kag-pink); background:var(--kag-pink-soft)}

/* Ein-/Ausklappen */
.kag .kag__details{border:1px solid var(--kag-line-strong); border-radius:14px; overflow:hidden}
.kag .kag__details>summary{display:flex; align-items:center; gap:8px; padding:13px 16px; font-weight:800; color:var(--kag-navy); background:var(--kag-soft); cursor:pointer; list-style:none}
.kag .kag__details>summary::-webkit-details-marker{display:none}
.kag .kag__details>summary::after{content:""; margin-left:auto; width:9px; height:9px; border-right:2.5px solid var(--kag-pink); border-bottom:2.5px solid var(--kag-pink); transform:rotate(45deg) translateY(-3px); transition:transform .2s}
.kag .kag__details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.kag .kag__sel{font-weight:700; color:var(--kag-pink)}
.kag .kag__inner{padding:16px}

/* Kleine Buttons */
.kag .kag__actions{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.kag .kag__mini{appearance:none; border:2px solid var(--kag-line-strong); background:#fff; color:var(--kag-navy); font:inherit; font-weight:800; font-size:14px; border-radius:999px; padding:7px 16px; cursor:pointer}
.kag .kag__mini:hover{border-color:var(--kag-pink); color:var(--kag-pink)}

/* Motiv-Karten (Tagesablauf) */
.kag .kag__cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.kag .kag__card{min-width:0; border:2px solid var(--kag-line); border-radius:14px; padding:10px; background:#fff; transition:border-color .15s, background .15s, opacity .15s}
.kag .kag__card.is-active{border-color:var(--kag-pink); background:var(--kag-pink-soft)}
.kag .kag__card.is-locked{opacity:.55}
.kag .kag__pick{display:flex; align-items:flex-start; gap:8px; font-weight:800; font-size:14.5px; line-height:1.3; color:var(--kag-navy); cursor:pointer; margin:0 0 8px; min-height:2.6em}
.kag .kag__pick input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--kag-pink)}
.kag img.kag__thumb{display:block; width:100%; height:140px; object-fit:contain; border-radius:8px; background:#fff}
.kag .kag__media{position:relative}
.kag .kag__input,.kag .kag__select{width:100%; min-width:0; font:inherit; font-size:14px; color:var(--kag-ink); background:#fff; border:1.5px solid var(--kag-line-strong); border-radius:10px; padding:9px 10px}
.kag .kag__input:focus,.kag .kag__select:focus{outline:none; border-color:var(--kag-pink); box-shadow:0 0 0 3px rgba(233,46,139,.15)}
.kag .kag__input--label{margin-top:8px}
.kag .kag__input--order{position:absolute; top:4px; right:4px; width:54px; text-align:center; font-weight:800; color:var(--kag-navy); padding:5px 2px 5px 6px; border-radius:999px; box-shadow:0 2px 6px rgba(40,52,126,.15)}
.kag .kag__input--big{font-size:16px; padding:11px 14px}
.kag .kag__note{margin:10px 0 0; font-size:14px; color:var(--kag-muted)}
.kag .kag__limit{margin:10px 0 0; font-weight:800; color:var(--kag-navy)}

/* Gruppenmotive (Wochenplan) */
.kag .kag__groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px}
.kag .kag__group{min-width:0; position:relative; display:block; border:2px solid var(--kag-line); border-radius:13px; padding:8px; text-align:center; background:#fff; cursor:pointer; transition:border-color .15s, background .15s}
.kag .kag__group:hover{border-color:var(--kag-pink)}
.kag .kag__group input{position:absolute; opacity:0; width:1px; height:1px}
.kag .kag__group:focus-within{box-shadow:0 0 0 3px rgba(233,46,139,.2)}
.kag .kag__group.is-checked,.kag .kag__group:has(input:checked){border-color:var(--kag-pink); background:var(--kag-pink-soft)}
.kag .kag__group img{display:block; width:100%; height:80px; object-fit:contain; border-radius:0}
.kag .kag__group .kag__none{display:grid; place-items:center; height:80px; margin:0; font-size:30px; color:var(--kag-line-strong)}
.kag .kag__group span{display:block; margin-top:5px; font-size:12.5px; overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto; font-weight:800; line-height:1.25; color:var(--kag-navy)}

/* Wochentage (Wochenplan) */
.kag .kag__days{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.kag .kag__day{min-width:0; border:2px solid var(--kag-line); border-radius:15px; padding:12px; background:var(--kag-soft)}
.kag h3.kag__dayname{margin:0 0 6px; text-align:center; font-family:var(--kag-display); font-weight:600; font-size:18px; color:var(--kag-navy)}
.kag .kag__select{margin-top:7px; padding:9px 8px}

/* Absenden */
.kag .kag__msg{margin:0 0 12px; padding:11px 14px; border-radius:12px; background:var(--kag-pink-soft); border:1px solid var(--kag-pink); color:var(--kag-pink-strong); font-weight:800}
.kag .kag__submit{display:block; width:100%; appearance:none; border:0; border-radius:999px; background:var(--kag-pink); color:#fff; font-family:var(--kag-sans); font-weight:800; font-size:18px; padding:16px 24px; cursor:pointer; box-shadow:0 3px 0 var(--kag-pink-strong); transition:background .15s, transform .1s}
.kag .kag__submit:hover{background:var(--kag-pink-strong)}
.kag .kag__submit:active{transform:translateY(2px); box-shadow:0 1px 0 var(--kag-pink-strong)}

@media (max-width:620px){
  .kag .kag__step{padding:16px 14px; border-radius:14px}
  .kag .kag__inner{padding:12px}
  .kag .kag__cards{grid-template-columns:repeat(2,1fr); gap:8px}
  .kag img.kag__thumb{height:110px}
  .kag .kag__groups{grid-template-columns:repeat(3,1fr)}
  .kag .kag__days{grid-template-columns:1fr}
}
@media (max-width:380px){
  .kag .kag__cards{grid-template-columns:1fr}
  .kag .kag__groups{grid-template-columns:repeat(2,1fr)}
}

/* =================================================================
   SCHUTZSCHICHT: verhindert, dass globale Button-/Input-Regeln
   der Seite (z. B. mit !important) die Generator-Elemente verformen.
   ================================================================= */
.kag.kag button,.kag.kag input,.kag.kag select{text-transform:none!important; letter-spacing:normal!important; text-shadow:none!important; background-image:none!important; float:none!important; min-width:0!important; max-width:100%!important}

/* Kleine Buttons "Alle auswaehlen" / "Auswahl loeschen" */
.kag.kag .kag__mini,.kag.kag .kag__mini:focus,.kag.kag .kag__mini:active,.kag.kag .kag__mini:visited{
  display:inline-block!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important;
  padding:7px 16px!important; line-height:1.3!important; font-family:var(--kag-sans)!important; font-size:14px!important; font-weight:800!important;
  color:var(--kag-navy)!important; background:#fff!important; border:2px solid var(--kag-line-strong)!important; border-radius:999px!important;
  box-shadow:none!important; transform:none!important; opacity:1!important; cursor:pointer}
.kag.kag .kag__mini:hover{color:var(--kag-pink)!important; border-color:var(--kag-pink)!important; background:#fff!important}
.kag.kag .kag__mini:focus-visible{outline:none!important; box-shadow:0 0 0 3px rgba(233,46,139,.2)!important}

/* Grosser Absende-Button */
.kag.kag .kag__submit,.kag.kag .kag__submit:focus{
  display:block!important; width:100%!important; height:auto!important; margin:0!important; padding:16px 24px!important; line-height:1.3!important;
  font-family:var(--kag-sans)!important; font-size:18px!important; font-weight:800!important; color:#fff!important;
  background:var(--kag-pink)!important; border:0!important; border-radius:999px!important; box-shadow:0 3px 0 var(--kag-pink-strong)!important}
.kag.kag .kag__submit:hover{background:var(--kag-pink-strong)!important; color:#fff!important}

/* Text- und Auswahlfelder */
.kag.kag .kag__input,.kag.kag .kag__select{
  box-sizing:border-box!important; width:100%!important; height:auto!important; margin:0!important; line-height:1.3!important;
  font-family:var(--kag-sans)!important; font-size:14px!important; color:var(--kag-ink)!important; background-color:#fff!important;
  border:1.5px solid var(--kag-line-strong)!important; border-radius:10px!important; padding:9px 10px!important; box-shadow:none!important}
.kag.kag .kag__input--big{font-size:16px!important; padding:11px 14px!important}
.kag.kag .kag__input--label{margin-top:8px!important}
.kag.kag .kag__select{margin-top:7px!important; padding:9px 8px!important}
.kag.kag .kag__input:focus,.kag.kag .kag__select:focus{border-color:var(--kag-pink)!important; box-shadow:0 0 0 3px rgba(233,46,139,.15)!important; outline:none!important}

/* Reihenfolge-Zahl als kleines Badge oben rechts im Bild */
.kag.kag .kag__media{position:relative!important; display:block!important}
.kag.kag .kag__input--order{
  position:absolute!important; top:4px!important; right:4px!important; left:auto!important; bottom:auto!important; z-index:2;
  width:46px!important; height:30px!important; padding:0 4px!important; margin:0!important;
  text-align:center!important; font-size:14px!important; font-weight:800!important; color:var(--kag-navy)!important;
  border-radius:999px!important; box-shadow:0 2px 6px rgba(40,52,126,.18)!important;
  -moz-appearance:textfield!important; appearance:textfield!important}
.kag.kag .kag__input--order::-webkit-outer-spin-button,
.kag.kag .kag__input--order::-webkit-inner-spin-button{-webkit-appearance:none!important; margin:0!important}

/* Checkboxen und Radios */
.kag.kag input[type=checkbox],.kag.kag input[type=radio]{width:18px!important; height:18px!important; padding:0!important; box-shadow:none!important; accent-color:var(--kag-pink)}
.kag.kag .kag__pick input{margin:1px 0 0!important; position:static!important}
.kag.kag .kag__choice input{position:absolute!important; left:16px!important; top:17px!important; margin:0!important}
.kag.kag .kag__group input{position:absolute!important; opacity:0!important; width:1px!important; height:1px!important}

/* Bilder */
.kag.kag img.kag__thumb{width:100%!important; height:140px!important; max-width:100%!important; object-fit:contain!important; margin:0!important}
@media (max-width:620px){ .kag.kag img.kag__thumb{height:110px!important} }