/* Schlichtes CSS mit Farbvariablen aus der Einstellung (/stil/farben.css). Kein Querlauf bei 360 px. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--grund);color:var(--text)}
a{color:var(--akzent)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.kopf{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--flaeche);border-bottom:1px solid var(--rand)}
.marke{display:flex;gap:.5rem;align-items:center;font-weight:700;color:var(--text);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
main{max-width:46rem;margin:0 auto;padding:1rem}
.fuss{text-align:center;padding:1.5rem 1rem;color:var(--leise);font-size:.875rem}
.fuss a{color:var(--leise)}
h1{font-size:1.5rem;line-height:1.25;margin:.5rem 0 1rem}
h2{font-size:1.125rem;margin:1.5rem 0 .5rem}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;padding:1rem;margin:0 0 1rem}
label{display:block;font-weight:600;margin:.75rem 0 .25rem}
input,select{width:100%;max-width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--rand);border-radius:8px;background:var(--grund);color:var(--text)}
button,.knopf{display:inline-block;font:inherit;font-weight:600;margin-top:1rem;padding:.65rem 1.1rem;border:0;border-radius:8px;background:var(--akzent);color:var(--akzent-text);cursor:pointer;text-decoration:none;min-height:44px}
button.leise{background:transparent;color:var(--akzent);border:1px solid var(--rand);margin-top:0;padding:.4rem .8rem;min-height:36px}
.gefahr{color:#b42318}
button.gefahr{background:#b42318;color:#fff}
form.inline{display:inline;margin:0}
.leise{color:var(--leise)}
.hinweis{border-left:4px solid var(--akzent);background:var(--flaeche);padding:.6rem .8rem;border-radius:6px}
.warnung{border-left-color:#b42318}
.liste{list-style:none;padding:0;margin:0}
.liste li{padding:.5rem 0;border-bottom:1px solid var(--rand);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.marke-klein{font-size:.75rem;border:1px solid var(--rand);border-radius:99px;padding:.05rem .5rem;color:var(--leise)}
.zugang{text-align:center}
.qr svg{width:min(240px,100%);height:auto;background:#fff;padding:8px;border-radius:8px}
.code{font:700 2rem/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em}
/* K2 Kalender. Farben der Arten kommen aus /stil/arten.css als --art je Klasse a-<id>; ohne Regel grau. */
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.knopf.gross{display:block;text-align:center;font-size:1.125rem;padding:.9rem 1rem}
.knopf.zweit{background:var(--flaeche);color:var(--text);border:1px solid var(--rand)}
.knopf.leise{background:transparent;color:var(--akzent);border:1px solid var(--rand);margin:0;padding:.3rem .8rem;min-height:40px}
.band{background:var(--akzent);color:var(--akzent-text);border-radius:8px;padding:.5rem .8rem;font-weight:600}
.marke-art,.punkt,.zelle{--art:#8a8f99;background:var(--art);color:#fff}
.marke-art{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.6rem;border-radius:6px;font-size:.75rem;font-weight:700;flex:none}
.offen{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 4px,transparent 4px 8px)}
.zeile{display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center;color:var(--text);text-decoration:none;flex:1;min-width:0}
.wer{font-weight:600}.wann{margin-left:auto}
.liste li .zeile+form{margin-left:auto}
.monatkopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.monatkopf h1,.monatkopf h2{margin:.5rem 0;text-align:center}
.filter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem}
.filter>a{border:1px solid var(--rand);border-radius:99px;padding:.3rem .8rem;text-decoration:none;color:var(--text);background:var(--flaeche)}
.filter>a[aria-current]{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent)}
.personfilter{display:flex;gap:.4rem;align-items:center;flex:1 1 14rem}
.personfilter select{flex:1;min-width:0;padding:.35rem .5rem}
.raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.wtag{text-align:center;font-size:.75rem;color:var(--leise)}
.tag{display:flex;flex-direction:column;min-height:3.4rem;padding:3px;border:1px solid var(--rand);border-radius:6px;background:var(--flaeche);color:var(--text);text-decoration:none;min-width:0}
.tag.frei{background:var(--grund)}
.tag.heute .nr{background:var(--akzent);color:var(--akzent-text);border-radius:99px;padding:0 .35rem}
.tag.gewaehlt{outline:2px solid var(--akzent)}
.tag .nr{font-size:.8rem;align-self:flex-start}
.marken{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto}
.punkt{width:.55rem;height:.55rem;border-radius:99px}
.mehr{font-size:.65rem;color:var(--leise);line-height:.6rem}
.nur-rechner{display:none}
@media (min-width:900px){
  main{max-width:none}
  .nur-handy{display:none}.nur-rechner{display:block}
}
.tabelle-rahmen{overflow-x:auto;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche)}
.plan{border-collapse:collapse;width:100%;font-size:.8rem}
.plan th,.plan td{border:1px solid var(--rand);padding:0;text-align:center;min-width:1.7rem;height:1.9rem}
.plan th[scope=row]{text-align:left;padding:0 .5rem;white-space:nowrap;font-weight:500;position:sticky;left:0;background:var(--flaeche);min-width:9rem}
.plan thead th{font-weight:500;color:var(--leise);line-height:1.1;padding:.2rem 0}
.plan .gruppe th{text-align:left;padding:.3rem .5rem;background:var(--grund);font-weight:700}
.plan .frei{background:color-mix(in srgb,var(--rand) 45%,transparent)}
.plan .heute{color:var(--akzent);font-weight:700}
.zelle{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:1.8rem;font-size:.7rem;font-weight:700;text-decoration:none}
.zelle.leer{background:transparent}
.zelle.leer:hover,.zelle.leer:focus-visible{background:color-mix(in srgb,var(--akzent) 20%,transparent)}
.legende{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;margin:1rem 0;font-size:.875rem}
.legende>span{display:inline-flex;gap:.35rem;align-items:center}
.frei-muster{display:inline-block;width:1.2rem;height:1.2rem;border:1px solid var(--rand);background:color-mix(in srgb,var(--rand) 45%,transparent)}
.formular fieldset{border:0;padding:0;margin:.75rem 0}
.formular legend{font-weight:600;padding:0}
.arten{display:flex;flex-wrap:wrap;gap:.4rem}
.arten legend{width:100%;margin-bottom:.4rem}
.arten input,.wochentage input{position:absolute;opacity:0;width:1px;height:1px}
.arten label,.wochentage label{display:inline-block;margin:0;font-weight:600;border:1px solid var(--rand);border-radius:8px;padding:.6rem .9rem;cursor:pointer;background:var(--grund)}
.arten input:checked+label,.wochentage input:checked+label{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent)}
.arten input:focus-visible+label,.wochentage input:focus-visible+label{outline:3px solid var(--akzent);outline-offset:2px}
.wochentage{display:flex;flex-wrap:wrap;gap:.3rem}
.wochentage label{padding:.45rem .6rem}
.datum{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0 .75rem}
.datum input{min-width:0}
label.inline{display:inline;font-weight:600}
.serie{display:none}
.serie .serie-felder{display:none}
.formular:has(input[data-serie]:checked) .serie{display:block}
.serie:has(#serie:checked) .serie-felder{display:block}
.senden .t-beantragen{display:none}
.formular:has(input[data-freigabe]:checked) .senden .t-beantragen{display:inline}
.formular:has(input[data-freigabe]:checked) .senden .t-eintragen{display:none}
details summary{cursor:pointer;margin-top:.75rem;color:var(--akzent);font-weight:600}
.antrag form.inline button{margin-right:.5rem}