/* Webzulauf Kita-Vorlage. Eine Datei, kein JavaScript, keine Fremdressourcen. */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(../fonts/AtkinsonHyperlegibleNext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --bg:#F6F9F2;--ink:#16302B;--muted:#46605A;
  --action:#B8231B;--action-ink:#fff;
  --free:#2B7A4B;--note:#F3B61F;--soft:#E2EEF3;
  --line:rgba(22,48,43,.22);
  --font:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-theme=himmel]{--action:#1F5FA8;--soft:#E4EEF8}
[data-theme=wiese]{--action:#2A6B3F;--soft:#E7F0DF}
[data-theme=sonne]{--action:#A34700;--soft:#FBEBD0}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;accent-color:var(--action)}
body{margin:0;background:var(--bg);color:var(--ink);font:1.125rem/1.6 var(--font)}
img,svg{max-width:100%;height:auto}
a{color:var(--action);text-decoration-thickness:.1em;text-underline-offset:.2em}
a:hover{text-decoration-thickness:.18em}
:focus-visible{outline:.2rem solid var(--ink);outline-offset:.2rem}
ul,ol{padding-left:1.25rem}
.schlicht,.liste,.zeitleiste,.punkte{list-style:none;padding:0}

h1,h2,h3{margin:0 0 .6em}
h1{text-wrap:balance;font-size:clamp(2.25rem,1.2rem + 5.5vw,4.25rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:.5em}
h2{font-size:1.55rem;font-weight:700;line-height:1.2;margin-top:2.5em}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
p,ul,ol,dl{margin:0 0 1em}
.haupt>:first-child,.haupt>.demo+*{margin-top:0}
.haupt{max-width:42rem}
.haupt p,.haupt li{max-width:62ch}

.sprunglink{position:absolute;left:-999rem;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:10}
.sprunglink:focus{left:1rem;top:1rem}

.demo{margin:0;padding:.55rem 1rem;background:var(--note);color:var(--ink);font-size:.95rem}

/* Kopf und Menü */
.kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;max-width:72rem;margin:0 auto;padding:1rem 1.25rem}
.marke{display:flex;align-items:center;gap:.7rem;color:var(--ink);font-weight:800;font-size:1.25rem;text-decoration:none}
.marke img,.marke svg{width:2.75rem;height:2.75rem;flex:none}
.menue summary{cursor:pointer;font-weight:700;padding:.55rem 1rem;border:.125rem solid var(--ink);border-radius:.4rem;list-style:none;min-height:2.75rem;display:inline-flex;align-items:center}
.menue summary::-webkit-details-marker{display:none}
.menue ul{list-style:none;margin:.5rem 0 0;padding:0}
.menue li a{display:block;padding:.6rem 0;color:var(--ink);font-weight:600;text-decoration:none}
.menue li a:hover,.menue li a[aria-current]{text-decoration:underline;text-decoration-thickness:.15em;text-underline-offset:.3em}
.menue li a[aria-current]{color:var(--action)}
@supports selector(::details-content){
  @media (min-width:60rem){
    .menue{flex-basis:100%}
    .menue summary{display:none}
    .menue::details-content{content-visibility:visible}
    .menue ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin:0}
  }
}

/* Seitenaufbau */
.seite{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;display:grid;gap:3rem}
@media (min-width:60rem){
  .seite{grid-template-columns:minmax(0,1fr) 17rem;gap:4.5rem;padding-top:2.5rem}
  .rand{position:sticky;top:1.5rem;align-self:start}
}
.rand{font-size:1rem;padding-top:1.25rem;border-top:.125rem solid var(--line)}
@media (min-width:60rem){.rand{border-top:0;padding-top:0}}
.rand h2{font-size:1.1rem;margin:0 0 .4em}
.rand h2+p,.rand h2+dl{margin-bottom:1.5em}
.zeiten dt{font-weight:600}
.zeiten dd{margin:0 0 .6rem}

/* Käferpunkte: roter Punkt = vergeben, grüner Ring = frei */
.plaetze{margin:0 0 1.75rem}
.punkte{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 .9rem}
.punkte li{width:2.6rem;height:2.6rem;border-radius:50%}
.punkte .vergeben{background:var(--action)}
.punkte .frei{border:.32rem solid var(--free);background:transparent}
.plaetze-satz{font-size:1.25rem;font-weight:600;margin:0}
@keyframes landen{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .punkte li{animation:landen .5s cubic-bezier(.2,.9,.3,1.25) backwards}
  .punkte li:nth-child(2){animation-delay:.09s}.punkte li:nth-child(3){animation-delay:.18s}
  .punkte li:nth-child(4){animation-delay:.27s}.punkte li:nth-child(5){animation-delay:.36s}
  .punkte li:nth-child(6){animation-delay:.45s}.punkte li:nth-child(7){animation-delay:.54s}
  .punkte li:nth-child(8){animation-delay:.63s}.punkte li:nth-child(9){animation-delay:.72s}
  .punkte li:nth-child(10){animation-delay:.81s}.punkte li:nth-child(11){animation-delay:.9s}
  .punkte li:nth-child(12){animation-delay:.99s}
}

/* Bausteine */
.knopf{display:inline-block;min-height:2.75rem;padding:.7rem 1.5rem;background:var(--action);color:var(--action-ink);font:inherit;font-weight:700;text-decoration:none;border:0;border-radius:.4rem;cursor:pointer}
.knopf:hover{filter:brightness(.92)}
.einleitung{font-size:1.25rem;line-height:1.5}
.blick{list-style:none;padding:0}
.blick li{margin:0 0 .7em}
.meta{color:var(--muted);margin-top:-.2em}
.hinweis{background:var(--note);padding:.1rem .45rem;border-radius:.25rem;font-weight:600;color:var(--ink)}
.foto{margin:1.5rem 0}
.foto img{display:block;border-radius:.4rem}
.foto.klein{max-width:15rem}

.liste li{display:grid;grid-template-columns:6.5rem 1fr;gap:.25rem 1.25rem;padding:1rem 0;border-top:.0625rem solid var(--line)}
.liste time{color:var(--muted);font-size:1rem;padding-top:.15rem}
.liste h3{margin:0 0 .2em}
.liste p{margin:0}
@media (max-width:30rem){.liste li{grid-template-columns:1fr}}

.zeitleiste{background:var(--soft);padding:1.25rem 1.5rem;border-radius:.6rem}
.zeitleiste li{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:.55rem 0}
.zeitleiste time{font-weight:800;font-variant-numeric:tabular-nums}
.zeitleiste p{margin:.1em 0 0;color:var(--muted)}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;margin-top:1.5rem}
.galerie figure{margin:0}
.galerie img{display:block;width:100%;height:auto;border-radius:.4rem}

.fragen details{border-top:.0625rem solid var(--line);padding:.25rem 0}
.fragen details:last-child{border-bottom:.0625rem solid var(--line)}
.fragen summary{cursor:pointer;font-weight:700;padding:.75rem 0}
.fragen details>*:not(summary){margin-bottom:1rem}

/* Formular */
fieldset{border:0;padding:0;margin:0 0 1.25rem}
legend{font-weight:600;padding:0;margin-bottom:.4rem}
.feld{margin:0 0 1.25rem}
.feld label:not(.inline){display:block;font-weight:600;margin-bottom:.35rem}
label.inline{display:flex;align-items:flex-start;gap:.6rem;font-weight:400;margin-bottom:.4rem}
label.inline input{margin-top:.35rem;width:1.15rem;height:1.15rem;flex:none}
input[type=text],input[type=email],input[type=tel],textarea{display:block;width:100%;max-width:36rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:#fff;border:.125rem solid var(--ink);border-radius:.3rem}
[aria-invalid=true]{border-color:var(--action);outline:.125rem solid var(--action)}
.feldfehler{color:var(--action);font-weight:600;margin:.4rem 0 0}
.fehler,.bestaetigung{background:#fff;padding:.9rem 1.1rem;border-left:.4rem solid var(--action);margin:0 0 1.5rem;font-weight:600}
.bestaetigung{border-left-color:var(--free)}
.falle{position:absolute;left:-999rem;width:1px;height:1px;overflow:hidden}

.fuss{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;border-top:.0625rem solid var(--line);font-size:1rem;color:var(--muted)}
.fuss ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;padding:0;margin:0}
.fuss a{color:var(--ink)}

/* Elternbereich */
.einspaltig{display:block}
.eltern .haupt{max-width:34rem}
.leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;margin-top:.5rem}
.leiste a[aria-current]{color:var(--action)}
.leiste a{color:var(--ink);font-weight:600}
.leiste form{margin:0}
.knopf.zweit{background:transparent;color:var(--ink);border:.125rem solid var(--ink)}
.kinder li{font-size:1.25rem;margin:0 0 .4em}
input[type=password]{display:block;width:100%;max-width:36rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:#fff;border:.125rem solid var(--ink);border-radius:.3rem}

/* Elternbereich: Nachrichten, Karten, Kalender, Fotos */
.verlauf{margin:0 0 2rem}
.nachricht{margin:0 0 1rem;padding:.7rem 1rem;background:#fff;border-left:.4rem solid var(--soft)}
.nachricht.eigen{border-left-color:var(--action)}
.nachricht p{margin:0 0 .3em}
.kopfzeile{color:var(--muted);font-size:1rem}
.liste-karten li{padding:.8rem 0;border-top:.0625rem solid var(--line)}
.liste-karten form{margin:.5rem 0 0}
.neu li{margin:0 0 .6rem}
.einwilligung{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.6rem 0;border-top:.0625rem solid var(--line)}
.einwilligung form{margin:0}
select,input[type=date],input[type=file]{display:block;width:100%;max-width:36rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:#fff;border:.125rem solid var(--ink);border-radius:.3rem}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kalender-paar{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:0 0 1rem}
.kalender{border-collapse:collapse;width:100%;font-size:1rem}
.kalender caption{font-weight:700;text-align:left;padding:0 0 .4rem}
.kalender th{font-weight:600;color:var(--muted);padding:.2rem}
.kalender td{text-align:center;padding:.45rem .2rem;border:.0625rem solid var(--line);position:relative}
.m-urlaub{background:#CFE3EE}.m-schliess{background:var(--note)}.m-krank{background:#F2C9C6}
td.m-schliess{font-weight:800;text-decoration:underline}td.m-krank{font-style:italic}td.m-urlaub{box-shadow:inset 0 -.2rem 0 var(--ink)}
.legende{display:flex;flex-wrap:wrap;gap:.3rem 1.25rem}
.punkt{display:inline-block;width:.9rem;height:.9rem;border:.0625rem solid var(--ink);margin-right:.35rem;vertical-align:-.1rem}
.foto-kachel{display:inline-block;margin:0 1rem 1rem 0;vertical-align:top;max-width:15rem}
.foto-kachel img{display:block;width:100%;height:auto;border-radius:.4rem}
.foto-kachel figcaption{font-size:1rem;color:var(--muted)}
.tabelle{border-collapse:collapse;width:100%}.tabelle th,.tabelle td{text-align:left;padding:.5rem .6rem;border-bottom:.0625rem solid var(--line);vertical-align:top}
.heute{background:var(--note);font-weight:600}

@media print{.menue,.sprunglink,.punkte{display:none}.seite{display:block}}

/* Beitragsrechner (optionales Modul) */
.hilfetext{color:var(--muted);font-size:.95rem;margin:0 0 .5rem}
.klein{font-size:.95rem;color:var(--muted)}
.knopf.klein{min-height:2.25rem;padding:.35rem 1rem;font-size:1rem;color:var(--ink)}
.hinweis-box{background:var(--soft);border-left:.3rem solid var(--ink);padding:.7rem 1rem;margin:1rem 0}
.rechner fieldset{border:0;border-top:.125rem solid var(--line);margin:1.5rem 0 0;padding:1rem 0 0}
.rechner legend{font-weight:700;font-size:1.2rem;padding:0 .5rem 0 0}
.rechner input[type=number],.rechner select{font:inherit;min-height:2.75rem;padding:.4rem .6rem;border:.125rem solid var(--ink);border-radius:.4rem;background:#fff;color:var(--ink);max-width:100%}
.rechner input[type=number]{width:12rem}
.btr-kind{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem}
.btr-kind label{min-width:5.5rem;font-weight:600}
.btr-blick{background:var(--soft);padding:.5rem 1.25rem 1rem;margin-top:2rem}
.btr-blick dl{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.5rem;margin:0}
.btr-blick dt{font-weight:600}.btr-blick dd{margin:0;font-weight:700}
.btr-ergebnis{border-left:.3rem solid var(--ink);padding:.1rem 1rem .5rem;margin-top:1.25rem}
.btr-ergebnis h3{margin-top:.8rem}
.btr-gut{border-color:var(--free)}.btr-vielleicht{border-color:var(--note)}.btr-nein{border-color:var(--action)}
.btr-betrag{font-size:1.9rem;font-weight:800;margin:.2rem 0 .6rem}
.btr-zeile{display:flex;justify-content:space-between;gap:1rem;border-top:.0625rem solid var(--line);padding:.4rem 0}
.btr-hinweis{background:var(--bg);padding:.4rem .6rem;border-radius:.25rem;font-size:.95rem}
details.frage{border-top:.0625rem solid var(--line);padding:.6rem 0}details.frage summary{cursor:pointer;font-weight:600}