/* Ubuntu (lokal eingebunden, Ubuntu Font Licence), wie die Firmen-Website */
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/4iCs6KVjbNBYlgoKcQ72nU6AF7xm.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/4iCs6KVjbNBYlgoKfw72nU6AFw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/4iCv6KVjbNBYlgoCjC3jvmyNPYZvg7UI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/4iCv6KVjbNBYlgoCjC3jsGyNPYZvgw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/4iCv6KVjbNBYlgoCxCvjvmyNPYZvg7UI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--blau:#0b3d66;--blau2:#14598f;--hell:#eef3f8;--text:#17212b;--grau:#5b6b7a;--rand:#d3dce5;--warn:#b26a00;--warnbg:#fff4e0;--fehler:#b00020;--ok:#1b6b3a;--okbg:#e6f4ea;--abw:#e8eaed;--einsatz:#dbeafe}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--hell);line-height:1.45}
a{color:var(--blau2)}
.kopf{background:#fff;color:var(--blau);border-bottom:5px solid #e8690b;padding:.6rem 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;font-size:1.1rem}
.kopf .marke{padding:0;margin-right:.2rem;display:flex}.kopf .marke img{height:48px;width:auto;display:block}.kopf .produkt{font-weight:600;color:var(--grau);font-size:1.1rem;margin:0 .8rem 0 .3rem}
.kopf a{color:var(--blau);text-decoration:none;padding:.3rem .65rem;border-radius:6px;font-weight:500}
.kopf a:hover{background:var(--hell)}.kopf a.aktiv{background:var(--blau);color:#fff}.kopf .marke:hover{background:transparent}
.kopf .rechts{margin-left:auto;display:flex;gap:.7rem;align-items:center;font-size:1.05rem}
.kopf button{background:#fff;color:var(--blau2);border:1px solid var(--blau2)}
main{max-width:1100px;margin:0 auto;padding:1rem}
main.eng{max-width:640px}
h1{margin:.4rem 0 1rem;font-size:1.6rem}h2{margin:1.6rem 0 .6rem;font-size:1.2rem}h3{margin:1rem 0 .3rem;font-size:1rem}
.karte{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:1rem;margin:.6rem 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin:1rem 0}
.kachel{display:block;background:#fff;border:1px solid var(--rand);border-radius:12px;padding:1.1rem;text-decoration:none;color:var(--text)}
.kachel:hover{border-color:var(--blau2);box-shadow:0 2px 8px rgba(11,61,102,.15)}
.kachel strong{display:block;font-size:1.05rem;color:var(--blau)}.kachel span{color:var(--grau);font-size:.9rem}
button,.knopf{font:inherit;padding:.45rem .9rem;border-radius:8px;border:1px solid var(--blau2);background:var(--blau2);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button.leise,.knopf.leise{background:#fff;color:var(--blau2)}
button.gefahr{background:#fff;color:var(--fehler);border-color:var(--fehler)}
button.klein{padding:.2rem .55rem;font-size:.85rem}
input,select,textarea{font:inherit;padding:.4rem .5rem;border:1px solid var(--rand);border-radius:8px;background:#fff;max-width:100%}
label{display:block;margin:.5rem 0}label>input,label>select,label>textarea{display:block;margin-top:.2rem;width:100%}
.zeile{display:flex;flex-wrap:wrap;gap:.8rem}.zeile>label{flex:1 1 160px}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--rand);padding:.4rem .5rem;text-align:left;vertical-align:top}th{background:#f4f7fa}
.scroll{overflow-x:auto;border-radius:10px}
.meldung{padding:.6rem .8rem;border-radius:8px;margin:.6rem 0}
.meldung.ok{background:var(--okbg);color:var(--ok);border:1px solid #b7dfc4}
.meldung.fehler{background:#fdecee;color:var(--fehler);border:1px solid #f3b8c0}
.meldung.warnung{background:var(--warnbg);color:#6b4100;border:2px solid var(--warn)}
.meldung code{font-size:1.1rem;background:#fff;padding:.1rem .4rem;border-radius:4px;user-select:all}
.nav2{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 1rem}
.wochentabelle th.name{white-space:nowrap}.wochentabelle td{min-width:112px;font-size:.88rem}
.chip{display:block;border-radius:6px;padding:.2rem .4rem;margin:.15rem 0}
.chip.einsatz{background:var(--einsatz)}.chip.abw{background:var(--abw);color:#444;font-style:italic}
.heute{background:#fff7d6}
.tag{margin-top:1rem}.tag h3{color:var(--blau)}
.plankarte{border-left:6px solid var(--blau2);background:#fff;border-radius:10px;padding:.9rem 1rem;margin:.5rem 0;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:1.05rem}
.plankarte.abw{border-left-color:#8a94a0;background:var(--abw)}
.plankarte .nr{font-weight:700}.plankarte p{margin:.25rem 0}
.klein-text{color:var(--grau);font-size:.9rem}
.status-aus{color:var(--fehler)}
@media(max-width:1250px){.kopf .produkt{display:none}}
@media(max-width:600px){main{padding:.7rem}.kopf{gap:.2rem .5rem}.kopf .marke img{height:38px}.kopf .produkt{display:none}h1{font-size:1.35rem}}
.chip form{float:right;margin:0 0 0 .2rem}.chip .klein-text{font-size:.8rem}
.chip.hotel{background:#fde9d4;color:#6b3a00}.plankarte.hotel{border-left-color:#e8690b;background:#fff8f0}

.kal-panel{border:1px solid var(--rand);border-radius:10px;background:#fff;padding:.7rem;margin:.5rem 0;max-width:420px;box-shadow:0 4px 14px rgba(11,61,102,.12)}
.kal-panel[hidden]{display:none}
.kal-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.kal-tabelle{width:100%;border-collapse:separate;border-spacing:2px;background:transparent}
.kal-tabelle th,.kal-tabelle td{border:0;padding:0;text-align:center;background:transparent;font-size:.85rem;color:var(--grau)}
.kal-tabelle button{width:100%;padding:.4rem 0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font-size:.95rem}
.kal-tabelle button.kal-kw{color:var(--blau2);font-weight:600;background:var(--hell);font-size:.8rem}
.kal-tabelle button.kal-tag:not(.start):not(.ende):not(.auswahl):hover{background:var(--hell);border-color:var(--rand)}
.kal-tabelle button.fremd{color:#a2adb8}.kal-tabelle button.we{color:#8a4b00}
.kal-tabelle button.heute{border-color:var(--blau2);font-weight:700}
.kal-tabelle button.auswahl{background:#cfe4fa;color:var(--text)}
.kal-tabelle button.kal-tag.start,.kal-tabelle button.kal-tag.ende{background:var(--blau2);color:#fff;font-weight:700}
.kal-zusammenfassung{margin:.5rem 0 .2rem;font-weight:600}
[data-kalender]{margin:.4rem 0}
.auswahl-gruppe{border:1px solid var(--rand);border-radius:8px;margin:.5rem 0;padding:.4rem .7rem}
.auswahl-gruppe .raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.1rem .8rem}
.auswahl-gruppe label.cb{display:flex;gap:.4rem;align-items:center;margin:.15rem 0}.auswahl-gruppe label.cb input{width:auto;margin:0}

.nav2 .knopf.an{background:var(--blau);color:#fff;border-color:var(--blau)}
/* Wochenplan: Anordnung wie die Excel-PEP, Aussehen modern (Karten, Pastellfarben, weiche Schatten) */
.pep{display:grid;grid-template-columns:minmax(130px,170px) repeat(var(--spalten,5),minmax(170px,1fr));gap:.55rem;background:#fff;border-radius:18px;padding:1rem;box-shadow:0 1px 3px rgba(16,42,67,.08),0 8px 24px rgba(16,42,67,.06);min-width:900px}
.pep-kopf{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.2rem 0 .6rem;border-bottom:2px solid #e6edf4}
.pep-wt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.pep-dat{font-size:1.45rem;font-weight:700;color:var(--blau);line-height:1.1;padding:.1rem .7rem;border-radius:999px}
.pep-kopf.heute .pep-dat{background:var(--blau2);color:#fff}
.pep-kopf.heute .pep-wt{color:var(--blau2)}
.pep-titel{grid-column:1 / -1;margin:.7rem 0 0;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);display:flex;align-items:center;gap:.7rem}
.pep-titel::after{content:"";flex:1;height:1px;background:#e6edf4}
.pep-leer{grid-column:1 / -1;padding:.6rem .9rem;border-radius:12px;background:#f6f9fc;color:var(--grau);font-size:.95rem}
.pep-label{grid-column:1;display:flex;align-items:center;font-size:.95rem;color:var(--text);padding-right:.4rem}
.pep-balken{display:flex;align-items:center;justify-content:center;min-height:2.4rem;padding:.25rem .8rem;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:700;font-size:.9rem}
.pep-block{grid-column:2;position:relative;background:var(--bg);border-radius:14px;padding:.8rem 1rem .8rem 1.15rem;line-height:1.4;font-size:.93rem;box-shadow:0 1px 2px rgba(16,42,67,.06)}
.pep-block::before{content:"";position:absolute;left:0;top:.7rem;bottom:.7rem;width:5px;border-radius:0 6px 6px 0;background:var(--akzent)}
.pep-auftrag{font-size:1.02rem;margin-bottom:.2rem;color:var(--text)}
.pep-auftrag strong{color:var(--akzent);filter:brightness(.8)}
.pep-ma{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.3rem .35rem;align-items:center}
.pep-ma>.klein-text{margin-right:.1rem}
.pep-person{display:inline-flex;gap:.2rem;align-items:center;background:#fff;border-radius:999px;padding:.12rem .25rem .12rem .65rem;font-weight:600;font-size:.88rem;box-shadow:0 1px 2px rgba(16,42,67,.12)}
.pep-person:not(:has(form)){padding-right:.65rem}
.pep-person form{margin:0}.pep-person button{padding:0 .35rem;line-height:1.25;border:0;border-radius:999px;background:transparent;font-size:.8rem}
.pep-person button:hover{background:#fdeceb}
.pep-kopf.heute{background:transparent}

/* ===== Anpassung an die Bildschirmgröße ===== */
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
.kopf .menue{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
.kopf .menue a{white-space:nowrap}
main{width:100%}
/* sehr große Bildschirme: mehr Platz nutzen */
@media(min-width:1500px){main{max-width:1440px}.pep{grid-template-columns:minmax(150px,200px) repeat(var(--spalten,5),minmax(190px,1fr))}.pep-block{font-size:1rem}.wochentabelle td{font-size:.95rem}}
@media(min-width:1900px){main{max-width:1760px}}
/* Tablet */
@media(max-width:1000px){
  .kopf{padding:.5rem .8rem;font-size:1rem}
  .kopf .marke img{height:42px}
  .pep{min-width:780px;grid-template-columns:minmax(100px,130px) repeat(var(--spalten,5),minmax(120px,1fr));padding:.7rem;gap:.45rem}
  .pep-block{font-size:.88rem;padding:.65rem .75rem .65rem .95rem}
  .pep-dat{font-size:1.2rem}
}
/* Handy */
@media(max-width:700px){
  body{font-size:16px}
  main{padding:.8rem .8rem 2rem}
  .kopf{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem .5rem;padding:.5rem .7rem;border-bottom-width:4px}
  .kopf .marke{grid-column:1}.kopf .marke img{height:36px}
  .kopf .rechts{grid-column:2;grid-row:1;margin:0;font-size:.9rem;gap:.4rem}
  .kopf .menue{grid-column:1 / -1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;gap:.3rem;padding-bottom:.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .kopf .menue::-webkit-scrollbar{display:none}
  .kopf .menue a{padding:.5rem .8rem;background:var(--hell);font-size:.95rem}
  .kopf .menue a.aktiv{background:var(--blau)}
  .kopf .rechts a{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:1.35rem}h2{font-size:1.1rem}
  /* große Touch-Flächen, keine Zoom-Sprünge beim Tippen (iOS zoomt bei < 16 px) */
  input,select,textarea{font-size:16px;min-height:44px}
  button,.knopf{min-height:44px;padding:.55rem 1rem}
  button.klein,.knopf.klein{min-height:40px;padding:.4rem .8rem}
  .nav2{gap:.4rem}.nav2 .knopf{flex:1 1 auto;text-align:center}
  .zeile>label{flex:1 1 100%}
  .kacheln{grid-template-columns:1fr}
  .kal-panel{max-width:100%;padding:.5rem}
  .kal-tabelle button{padding:.6rem 0;min-height:44px}
  .auswahl-gruppe .raster{grid-template-columns:1fr 1fr}
  .auswahl-gruppe label.cb{min-height:40px}
  /* Tabellen werden zu Karten */
  .scroll:has(.kartenliste){overflow:visible}
  table.kartenliste,table.kartenliste tbody,table.kartenliste tr,table.kartenliste td{display:block;width:100%;background:transparent}
  table.kartenliste thead{display:none}
  table.kartenliste tr{background:#fff;border:1px solid var(--rand);border-radius:12px;margin:.6rem 0;padding:.5rem .8rem;box-shadow:0 1px 2px rgba(16,42,67,.05)}
  table.kartenliste td{border:0;padding:.3rem 0;display:flex;gap:.8rem;justify-content:space-between;align-items:flex-start;text-align:right}
  table.kartenliste td::before{content:attr(data-label);flex:0 0 38%;text-align:left;font-weight:600;color:var(--grau);font-size:.88rem}
  table.kartenliste td[data-label=""],table.kartenliste td[data-label="Aktionen"]{display:block;text-align:left;padding-top:.5rem;border-top:1px solid var(--rand);margin-top:.3rem}
  table.kartenliste td[data-label=""]::before{content:none}
  table.kartenliste td[data-label="Aktionen"]::before{display:block;margin-bottom:.2rem}
  table.kartenliste td[data-label=""] form,table.kartenliste td[data-label="Aktionen"] form{display:block!important;margin:.35rem 0}
  table.kartenliste td[data-label=""] button,table.kartenliste td[data-label=""] .knopf,table.kartenliste td[data-label="Aktionen"] button{width:100%;white-space:normal;text-align:center}
  table.kartenliste td[data-label=""] .knopf{margin:.35rem 0}
  /* Wochenplan: eine Spalte, Tage stehen im Text */
  .scroll:has(.pep){overflow:visible}
  .pep{display:flex;flex-direction:column;min-width:0;padding:.7rem;gap:.5rem;border-radius:14px}
  .pep-kopf{display:none}
  .pep-titel{margin:.9rem 0 .1rem}
  .pep-label{padding:.4rem 0 0;font-size:1rem}
  .pep-balken{justify-content:space-between;border-radius:12px;min-height:2.6rem;padding:.35rem .9rem;text-align:left}
  .pep-tage{display:inline;font-weight:600;font-size:.82rem;opacity:.85}
  .pep-block{padding:.8rem .9rem .8rem 1.1rem;font-size:.97rem}
  .pep-block .pep-tage{display:block;margin-bottom:.15rem;color:var(--grau);font-size:.82rem;font-weight:700}
  .pep-person{padding-top:.25rem;padding-bottom:.25rem}.pep-person button{min-height:32px;min-width:32px}
  /* Raster-Ansicht: Mitarbeitername bleibt beim seitlichen Wischen stehen */
  .wochentabelle th.name{position:sticky;left:0;background:#f4f7fa;z-index:1}
  .wochentabelle td{min-width:130px}
}
@media(min-width:701px){.pep-tage{display:none}}
@media(hover:none){button:hover,.knopf:hover{filter:none}}

/* Wochenplan: Bauvorhaben-Blöcke mit eingesetzten Mitarbeitern und darunter dem Hotel */
.pep-projekt{grid-column:1 / -1;display:grid;grid-template-columns:inherit;gap:.35rem .55rem;background:var(--bg);border-radius:16px;padding:.9rem 1rem 1rem 1.25rem;position:relative;box-shadow:0 1px 2px rgba(16,42,67,.07)}
.pep-projekt::before{content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:6px;border-radius:0 6px 6px 0;background:var(--akzent)}
.pep-pkopf{grid-column:1 / -1;line-height:1.4;font-size:.95rem;padding-bottom:.35rem;margin-bottom:.1rem;border-bottom:1px solid rgba(16,42,67,.1)}
.pep-pkopf .pep-auftrag{font-size:1.15rem}
.pep-plabel{padding:0;align-items:center}
.pep-pbalken{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.3rem;border-radius:999px;padding:.2rem .8rem;font-weight:700;font-size:.88rem}
.pep-pbalken.pep-einsatz{background:var(--akzent);color:#fff}
.pep-pbalken.pep-nacht{background:#fff;color:#8a4b00;border:2px solid #f2b366}
.pep-pbalken form{margin:0}.pep-pbalken button{padding:0 .35rem;line-height:1.2;border:0;border-radius:999px;background:rgba(255,255,255,.9);font-size:.78rem;min-height:0}
.pep-hotelkopf{grid-column:1 / -1;margin-top:.55rem;background:rgba(255,255,255,.75);border-radius:12px;padding:.6rem .85rem;border-left:5px solid #e8690b;line-height:1.4;font-size:.93rem}
.pep-hoteltitel{font-weight:700;color:#8a4b00;font-size:1rem}
.pep-hotelblock{padding-top:.3rem}.pep-hotelblock .pep-hotelkopf:first-child{margin-top:.3rem}
@media(max-width:700px){
  .pep-projekt{display:flex;flex-direction:column;gap:.35rem;padding:.8rem .8rem .9rem 1.05rem}
  .pep-pbalken{justify-content:space-between;border-radius:12px;min-height:2.6rem;padding:.35rem .8rem}
  .pep-plabel{padding-top:.3rem}
}

/* Mo–So immer sichtbar: Spalten teilen sich die Breite, Wochenende leicht abgesetzt */
.pep{grid-template-columns:minmax(120px,170px) repeat(var(--spalten,7),minmax(0,1fr));min-width:calc(130px + var(--spalten,7) * 112px)}
.pep-kopf.we .pep-wt{color:#b4641a}.pep-kopf.we .pep-dat{color:#9a5a1f}
@media(min-width:1500px){.pep{grid-template-columns:minmax(150px,200px) repeat(var(--spalten,7),minmax(0,1fr))}}
@media(max-width:1000px){.pep{grid-template-columns:minmax(100px,130px) repeat(var(--spalten,7),minmax(0,1fr));min-width:calc(110px + var(--spalten,7) * 104px)}.pep-pbalken{padding:.2rem .4rem;font-size:.8rem}}
@media(max-width:700px){.pep{min-width:0}}

/* Balken in den Blöcken exakt an den Spalten des Tageskopfs ausrichten (Subgrid) */
@supports (grid-template-columns: subgrid){
  .pep-projekt{grid-template-columns:subgrid}
}
@media(max-width:700px){.pep-projekt{display:flex}}

/* Bauvorhaben-Block nur über seine Tage; Name steht im Balken */
.pep-projekt.pep-teil{padding-left:1.1rem;padding-right:.7rem}
.pep-teil .pep-pbalken{justify-content:flex-start;padding:.2rem .6rem;min-width:0}
.pep-teil .pep-btext{display:flex;align-items:center;gap:.25rem;min-width:0;overflow:hidden;white-space:nowrap}
.pep-teil .pep-bname{overflow:hidden;text-overflow:ellipsis}
.pep-teil .pep-pbalken form{margin-left:auto}
.pep-teil .pep-pkopf{overflow-wrap:anywhere}
@media(max-width:700px){
  .pep-projekt.pep-teil{grid-column:auto!important;padding:.8rem .8rem .9rem 1.05rem}
  .pep-teil .pep-btext{white-space:normal}
}

/* Feiertage, Status, Zu planen, Protokoll, Verfügbarkeit */
.feiertag-chip{display:block;max-width:100%;font-size:.7rem;line-height:1.15;font-weight:600;color:#9a3d00;background:#ffe9d6;border-radius:6px;padding:.1rem .35rem;margin-top:.2rem;text-align:center;overflow-wrap:anywhere}
.pep-kopf.feiertag .pep-dat{color:#9a3d00}
.feiertag-hinweis{background:#fff4e8;border-color:#f2b366}
.meldung.info{background:#e7f1fc;color:#12395f;border:1px solid #b6d3f2}.meldung.info ul{margin:.3rem 0 0 1.1rem;padding:0}
.status{display:inline-block;padding:.05rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid transparent}
.status.gebucht{background:#e3f5e9;color:#1f7a45}.status.angefragt{background:#fff1d6;color:#9a6200}.status.storniert{background:#fde5e3;color:#b3382f}
tr.durchgestrichen td{text-decoration:line-through;color:var(--grau)}tr.durchgestrichen td:nth-child(6){text-decoration:none}
.zuplanen{display:grid;gap:.5rem}.zp{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0}.zp.ueberfaellig{border-left:5px solid var(--fehler)}
.pep-kopieren{float:right;margin:0 0 .3rem .6rem}.pep-edit{text-decoration:none;color:inherit;opacity:.85;padding:0 .2rem;line-height:1.2;border-radius:6px;font-weight:700}.pep-edit:hover{background:rgba(255,255,255,.45);opacity:1}
.pep-nacht .pep-edit{color:#8a4b00}
.pep-frei{font-size:.85rem;line-height:1.35;color:var(--text);padding:.15rem .2rem;border-top:1px dashed #d7e1ea;overflow-wrap:anywhere}
.verf{display:block;font-size:.75rem;font-weight:600;margin-left:1.35rem}.verf.frei{color:#1f7a45}.verf.abwesend{color:#b3382f}.verf.belegt{color:#9a6200}
td.belegt{background:#fff1d6;font-weight:700;text-align:center}
details.karte summary{cursor:pointer}
.route{color:var(--blau2);text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){.pep-kopieren{float:none;margin:0 0 .5rem}.zp{flex-direction:column;align-items:stretch}.zp .knopf{text-align:center}}
/* Verfügbarkeitstexte unter dem Namen, ohne die Auswahl zu verbreitern */
.auswahl-gruppe .raster{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.auswahl-gruppe label.cb{flex-wrap:wrap;min-width:0}
.auswahl-gruppe .verf{flex:1 1 100%;margin-left:1.5rem;overflow-wrap:anywhere}
@media(max-width:700px){.auswahl-gruppe .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Schmale Blöcke (ein oder zwei Tage): Namen und Texte brechen um statt abgeschnitten zu werden */
.pep-teil .pep-btext{flex-wrap:wrap}
@media all{
  .pep-teil.schmal .pep-pbalken{flex-wrap:wrap;border-radius:14px;padding:.3rem .5rem;min-height:2rem;font-size:.8rem;line-height:1.25}
  .pep-teil.schmal .pep-btext{white-space:normal;flex:1 1 auto}
  .pep-teil.schmal .pep-bname{overflow:visible;text-overflow:clip;white-space:normal}
  .pep-teil.schmal .pep-pbalken form{margin-left:0}
  .pep-teil.schmal .pep-pkopf{font-size:.85rem}
  .pep-teil.schmal .pep-pkopf .pep-auftrag{font-size:1rem}
  .pep-teil.schmal .pep-kopieren{float:none;margin:0 0 .4rem}
  .pep-teil.schmal .pep-kopieren button{width:100%;font-size:.75rem;padding:.25rem .3rem;white-space:normal;line-height:1.2}
  .pep-teil.schmal .pep-hotelkopf{font-size:.8rem;padding:.45rem .55rem}
  .pep-teil.schmal .pep-hoteltitel{font-size:.88rem}
}
.pep-projekt{align-content:start}

/* ===== KW-Anzeige auf Höhe der Wochentage, auffällige KW-Knöpfe ===== */
.knopf.kw{background:var(--blau2);color:#fff;border-color:var(--blau2);font-weight:700;font-size:1.05rem;padding:.55rem 1.3rem;box-shadow:0 2px 6px rgba(20,89,143,.25)}
.knopf.kw:hover{background:var(--blau)}
.kw-nav{gap:.6rem}
.pep-kopf.pep-kw{flex-direction:row;justify-content:space-between;align-items:center;gap:.2rem;padding:.1rem 0 .5rem;grid-column:1}
.kw-anzeige{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.kw-nr{font-size:1.5rem;font-weight:800;color:var(--blau)}.kw-jahr{font-size:.8rem;font-weight:600;color:var(--grau)}
.kw-pfeil{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--blau2);color:#fff;text-decoration:none;font-size:1.7rem;line-height:1;font-weight:700;padding-bottom:.15rem}
.kw-pfeil:hover{background:var(--blau)}
@media(min-width:701px){h1.woche-titel.sr-breit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:700px){.pep-kopf.pep-kw{display:none}}
/* Externe */
.extern-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#6a3d9a;background:#efe6fb;border-radius:999px;padding:.02rem .45rem;vertical-align:middle}
.neu-extern{margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--rand)}
/* Aktionen am Block, Dialog */
.pep-aktionen{float:right;display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end;margin:0 0 .3rem .6rem}
.pep-aktionen .pep-kopieren{float:none;margin:0}
.pep-aktionen .knopf.klein,.pep-aktionen button.klein{white-space:nowrap}
.pep-teil.schmal .pep-aktionen{float:none;justify-content:flex-start;flex-direction:column;align-items:stretch;margin:0 0 .4rem}
.pep-teil.schmal .pep-aktionen .knopf,.pep-teil.schmal .pep-aktionen button{width:100%;white-space:normal;text-align:center;font-size:.75rem;padding:.25rem .3rem;line-height:1.2}
.zuordnen-dialog{border:0;border-radius:16px;padding:1.1rem 1.2rem;max-width:min(560px,94vw);width:100%;box-shadow:0 20px 60px rgba(16,42,67,.35)}
.zuordnen-dialog::backdrop{background:rgba(16,42,67,.45)}
.dialog-knoepfe{display:flex;gap:.6rem;margin-top:.8rem}
@media(max-width:700px){.pep-aktionen{float:none;justify-content:flex-start;margin:0 0 .5rem}}
/* Mehrwochen-Überblick */
.mw{display:grid;grid-template-columns:minmax(150px,210px) repeat(var(--tage),minmax(22px,1fr));gap:2px;background:#fff;border-radius:16px;padding:.8rem;box-shadow:0 1px 3px rgba(16,42,67,.08),0 8px 24px rgba(16,42,67,.06);min-width:calc(170px + var(--tage) * 26px)}
.mw-ecke{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);align-self:end}
.mw-kw{display:flex;gap:.4rem;align-items:baseline;justify-content:center;background:#eaf2fb;color:var(--blau);text-decoration:none;border-radius:8px;padding:.3rem .2rem;font-size:.9rem;white-space:nowrap;overflow:hidden}
.mw-kw span{font-size:.75rem;color:var(--grau)}.mw-kw:hover{background:#d9e8f8}
.mw-tag{display:flex;flex-direction:column;align-items:center;line-height:1.05;font-size:.72rem;color:var(--grau);padding:.1rem 0;border-radius:6px}
.mw-tag strong{font-size:.85rem;color:var(--blau)}.mw-tag.we{background:#f5efe6}.mw-tag.we strong{color:#9a5a1f}.mw-tag.feiertag{background:#ffe9d6}.mw-tag.heute{background:var(--blau2)}.mw-tag.heute span,.mw-tag.heute strong{color:#fff}
.mw-label{grid-column:1;display:flex;align-items:center;gap:.4rem;font-size:.88rem;min-width:0}
.mw-tagzeile{grid-column:1}
.mw-bv{text-decoration:none;color:var(--text);border-left:5px solid var(--akzent);padding:.2rem .4rem;border-radius:6px;overflow:hidden;white-space:nowrap}
.mw-bv span{overflow:hidden;text-overflow:ellipsis;color:var(--grau)}.mw-bv:hover{background:var(--hell)}
.mw-zelle{min-height:2rem;border-radius:5px;background:#f7f9fb;display:flex;align-items:center;justify-content:center;font-size:.8rem;text-decoration:none}
.mw-zelle.we{background:#f5efe6}.mw-zelle.feiertag{background:#ffe9d6}
.mw-zelle.belegt{background:var(--akzent);color:#fff;font-weight:800}.mw-zelle.belegt:hover{filter:brightness(1.1)}
.mw-trenner{grid-column:1 / -1;height:1px;background:#d7e1ea;margin:.3rem 0}
.mw-summe{font-weight:700;color:var(--grau);font-size:.82rem}
.mw-zahl{min-height:1.7rem;font-weight:700;background:transparent}.mw-zahl.eingesetzt{color:var(--blau2)}.mw-zahl.abwesend{color:#b3382f}.mw-zahl.frei{color:#1f7a45}
.mw-leer{grid-column:1 / -1;padding:.6rem;border-radius:10px;background:#f6f9fb;color:var(--grau)}
@media(max-width:700px){.mw-label{position:sticky;left:0;background:#fff;z-index:1}.mw-ecke{position:sticky;left:0;background:#fff;z-index:1}.nav2 .knopf.kw{flex:1 1 40%}}

.pep-bauleiter{font-size:.9rem;margin:.1rem 0 .2rem;color:var(--text)}
.pep-bauleiter.fehlt{color:#b3382f;font-weight:600}.pep-bauleiter.fehlt a{color:#b3382f}

/* ===== Werkzeugleiste der Wochenansicht: aufgeräumt ===== */
.kw-nav{justify-content:space-between;gap:.6rem 1rem;margin:.4rem 0 .6rem}
.kw-gruppe{display:inline-flex;align-items:center;gap:.5rem}
.kw-gruppe .knopf.leise{background:transparent;border-color:var(--rand);color:var(--blau2)}
.wz-extra{display:inline-flex;gap:1.2rem;align-items:center}
.textlink{color:var(--blau2);text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:1px solid transparent}
.textlink:hover{border-bottom-color:var(--blau2)}
.segment{display:inline-flex;flex-wrap:wrap;background:#dde7f3;border-radius:10px;padding:3px;gap:2px;margin:0 0 1rem}
.segment .knopf{background:transparent;border:0;color:var(--blau);font-size:.95rem;padding:.4rem .9rem;border-radius:8px}
.segment .knopf:hover{background:rgba(255,255,255,.6)}
.segment .knopf.an{background:#fff;color:var(--blau);font-weight:700;box-shadow:0 1px 3px rgba(16,42,67,.18)}
@media(max-width:700px){.kw-nav{justify-content:flex-start}.kw-gruppe{width:100%}.kw-gruppe .knopf{flex:1 1 auto}.wz-extra{width:100%;justify-content:flex-start}.segment{display:flex;width:100%}.segment .knopf{flex:1 1 45%;text-align:center}}

/* ===== Design wie die Firmen-Website: Ubuntu, Marine/Blau/Hellblau, Orange als Akzent, runde Knöpfe, weiche Karten ===== */
:root{--blau:#04283f;--blau2:#015c88;--hell:#f1f8fc;--text:#3b4a56;--grau:#52626e;--rand:#dbe8f0;--sky:#eaf6fc;--orange:#f08a3c;--orange-text:#b34a00;--hellblau:#89ceeb;--schatten:0 10px 30px rgba(1,58,90,.12);--warn:#b34a00;--warnbg:#fff3e6}
body{font-family:Ubuntu,Helvetica,Arial,sans-serif;background:var(--hell);color:var(--text);line-height:1.55}
h1,h2,h3{color:var(--blau);letter-spacing:-.01em;line-height:1.2}
a{color:var(--blau2)}
/* Kopf: weiß mit feiner Linie, Menüpunkte als Pillen in Großbuchstaben */
.kopf{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:50;padding:.5rem 1.4rem}
.kopf a{border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;padding:.55rem 1rem;color:var(--blau2)}
.kopf a:hover{background:var(--sky);color:var(--blau)}
.kopf a.aktiv{background:var(--blau2);color:#fff}
.kopf .marke{padding:0;border-radius:0;text-transform:none}.kopf .marke:hover{background:transparent}
.kopf .rechts a{text-transform:none;letter-spacing:0;font-weight:500;font-size:.95rem}
.kopf button{border-radius:999px;border-color:var(--blau2);color:var(--blau2);background:#fff;font-size:.85rem;padding:.35rem .9rem}
/* schmales Titelband wie die Unterseiten der Website */
.seitenband{position:relative;background:linear-gradient(160deg,var(--blau2),var(--blau));color:#fff;overflow:hidden}
.seitenband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--hellblau),var(--blau2) 55%,var(--blau))}
.seitenband-innen{max-width:none;margin:0;padding:.9rem 1rem 1.6rem 2rem;display:flex;flex-direction:column;gap:.1rem}
.seitenband .eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--hellblau)}
.seitenband strong{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.seitenband .welle{display:none}
main>h1:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;white-space:nowrap}
body:has(.pep) .seitenband-innen,body:has(.mw) .seitenband-innen{max-width:none;padding-left:2rem}
/* Knöpfe: rund; Hauptaktion orange mit Marine-Schrift, „leise“ mit Linie */
button,.knopf{border-radius:999px;font-weight:700;border-color:var(--orange);background:var(--orange);color:var(--blau);transition:.2s}
button:hover,.knopf:hover{filter:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(240,138,60,.35)}
button.leise,.knopf.leise{background:#fff;color:var(--blau2);border:1.5px solid var(--blau2);font-weight:500}
button.leise:hover,.knopf.leise:hover{background:var(--sky);box-shadow:none}
button.gefahr{background:#fff;color:var(--fehler);border-color:var(--fehler);font-weight:500}
.knopf.kw{background:var(--blau2);border-color:var(--blau2);color:#fff;box-shadow:0 2px 6px rgba(1,92,136,.25)}
.knopf.kw:hover{background:var(--blau);box-shadow:0 8px 20px rgba(1,58,90,.3)}
.kw-gruppe .knopf.leise{background:transparent;border-color:var(--rand);color:var(--blau2)}
/* dezente Aktionen im Bauvorhaben-Block: Textknöpfe statt Knopfreihe */
.pep-aktionen{gap:.2rem .9rem}
.pep-aktionen .knopf,.pep-aktionen button,.pep-aktionen button.klein,.pep-aktionen .knopf.klein{background:transparent;border:0;box-shadow:none;padding:.1rem 0;font-weight:500;font-size:.8rem;color:var(--blau2);border-radius:0;border-bottom:1px dashed rgba(1,92,136,.4)}
.pep-aktionen button:hover,.pep-aktionen .knopf:hover{background:transparent;transform:none;box-shadow:none;color:var(--blau);border-bottom-style:solid}
button.textlink,.textlink{background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;box-shadow:none;color:var(--blau2);font-weight:500;font-size:.92rem;padding:.2rem 0;text-decoration:none;cursor:pointer}
button.textlink:hover,.textlink:hover{background:transparent;transform:none;box-shadow:none;border-bottom-color:var(--blau2)}
.segment{background:var(--sky)}
.segment .knopf,.segment .knopf:hover{border:0;background:transparent;transform:none;box-shadow:none;color:var(--blau)}
.segment .knopf:hover{background:rgba(255,255,255,.7)}
.segment .knopf.an{background:#fff;box-shadow:0 1px 3px rgba(1,58,90,.2);color:var(--blau);font-weight:700}
.segment.klein{margin:0 0 0 auto}.segment.klein .knopf{padding:.25rem .7rem;font-size:.85rem}
.reiter{display:flex;gap:.4rem;margin:0 0 1rem}
.reiter a{padding:.4rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.85rem;color:var(--blau2);border:1.5px solid var(--rand);background:#fff}
.reiter a.aktiv{background:var(--blau2);border-color:var(--blau2);color:#fff}
/* Karten und Felder */
.karte,.plankarte{border-radius:18px;border:1px solid var(--rand);box-shadow:var(--schatten)}
.pep{border-radius:18px;box-shadow:var(--schatten)}
input,select,textarea{border-radius:10px;border-color:var(--rand);background:#f6fafc}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--hellblau);outline-offset:2px}
th{background:var(--sky);color:var(--blau)}
dialog.zuordnen-dialog{border-radius:18px;border:0;box-shadow:0 20px 60px rgba(4,40,63,.35)}
dialog.zuordnen-dialog::backdrop{background:rgba(4,40,63,.55)}
details.mehr{margin:.5rem 0;border:1px solid var(--rand);border-radius:12px;padding:.3rem .8rem;background:#fff}
details.mehr>summary{cursor:pointer;font-weight:700;color:var(--blau2);padding:.3rem 0}
details.pflege{margin-top:.8rem}details.pflege ul{margin:.3rem 0;padding-left:1.1rem}
.status{border-radius:999px}
.meldung{border-radius:14px}
@media(max-width:700px){.seitenband strong{font-size:1.25rem}.kopf a{font-size:.78rem;padding:.45rem .7rem}}
.pep-teil.schmal .pep-aktionen{display:flex;flex-wrap:wrap;gap:.1rem .7rem}
.pep-teil.schmal .pep-aktionen .knopf,.pep-teil.schmal .pep-aktionen button,.pep-teil.schmal .pep-aktionen button.klein{width:auto;font-size:.72rem;padding:.05rem 0;text-align:left;white-space:nowrap}
.pep-teil.schmal .pep-kopieren{display:contents}
@media(max-width:700px){.kw-gruppe .knopf.kw{white-space:nowrap;padding:.5rem .9rem;font-size:.95rem}.kw-gruppe{flex-wrap:nowrap}}
/* Der eigene große Kalender ersetzt den Datumsdialog des Browsers */
input[type=date]::-webkit-calendar-picker-indicator{display:none}
input[type=date]::-webkit-inner-spin-button{display:none}

/* ===== Mein Plan: Desktop mit Monatskalender und Details der Woche, Handy nur die Wochenliste ===== */
.tag .leer-text{margin:.3rem 0;color:var(--grau)}
.tag.leer{display:none}
.kalender-monat,.km-detail{display:none}
main:has(.wochenliste){max-width:640px}
@media(min-width:1000px){
  main:has(.wochenliste){max-width:1300px}
  .kalender-monat{display:block;background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schatten);padding:1rem;margin:.6rem 0 1rem}
  .km-detail{display:block;margin:1.2rem 0 .2rem}
  .km-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}.km-kopf strong{font-size:1.15rem;color:var(--blau)}
  .km-raster{display:grid;grid-template-columns:3rem repeat(7,minmax(0,1fr));gap:4px}
  .km-th{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);padding:.2rem .4rem}.km-th.we{color:var(--orange-text)}
  .km-kw{display:flex;align-items:flex-start;justify-content:center;padding-top:.45rem;font-size:.8rem;font-weight:700;color:var(--blau2);text-decoration:none;border-radius:10px}
  .km-kw.aktiv{background:var(--sky)}.km-kw:hover{background:var(--sky)}
  .km-tag{display:flex;flex-direction:column;gap:3px;min-height:5.6rem;padding:.35rem .4rem;border-radius:10px;background:#f6fafc;border:1px solid transparent;text-decoration:none;color:var(--text);overflow:hidden}
  .km-tag:hover{border-color:var(--hellblau)}
  .km-tag.we{background:#fff8f0}.km-tag.fremd{opacity:.5}.km-tag.aktiv{background:var(--sky);border-color:var(--hellblau)}.km-tag.we.aktiv{background:#ffefdd}
  .km-tag.heute .km-nr{background:var(--orange);color:var(--blau);border-radius:999px;padding:0 .45rem}
  .km-nr{align-self:flex-start;font-weight:700;font-size:.85rem;color:var(--blau)}
  .km-feiertag{font-size:.68rem;color:var(--orange-text);font-weight:700;line-height:1.1}
  .km-chip{display:block;font-size:.72rem;line-height:1.25;padding:.1rem .35rem;border-radius:6px;background:var(--bg,#eaf3ff);border-left:3px solid var(--akzent,#2f7dd1);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .km-chip.abw{background:var(--abw);border-left-color:#8a94a0;font-style:italic}
  .km-chip.hotel{background:#fff4e8;border-left-color:var(--orange)}
  .wochenliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.4rem 1rem;align-items:start}
  .wochenliste .tag{margin-top:0}
}

/* ===== Vorschau, Fahrzeuge, Besetzung, Hinweis-Punkt ===== */
.vorschau{margin:.2rem 0 .8rem;padding:.55rem 1rem;border-radius:12px;background:#fff;border:1px solid var(--rand);font-size:.92rem;color:var(--grau)}
.vorschau.achtung{background:var(--warnbg);border-color:#f0c79b;color:#6b3a00}
.pep-fahrzeug,.pep-besetzung{margin-top:.2rem;font-size:.85rem}
.pep-besetzung{color:var(--orange-text);font-weight:700}
.pep-fahrzeug form{margin-left:.3rem}
button.frei-name{font-size:inherit;padding:0 .1rem}
.punkt{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--orange);margin-left:.25rem;vertical-align:middle;box-shadow:0 0 0 3px rgba(240,138,60,.3)}
.kopf a.aktiv .punkt{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.telefonliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.4rem 1.2rem}
.telefonzeile{display:flex;gap:.5rem;align-items:center;margin:0}.telefonzeile span{flex:0 0 9rem;font-size:.92rem}.telefonzeile input{flex:1;margin:0}
.wz-extra{flex-wrap:wrap;gap:.3rem 1.2rem}
.telefonliste{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.telefonzeile{flex-wrap:wrap}.telefonzeile span{flex:1 1 100%}.telefonzeile input{flex:1 1 8rem;min-width:0;width:auto}
@media(min-width:700px){.telefonzeile{flex-wrap:nowrap}.telefonzeile span{flex:0 0 9rem}}
.reiter{flex-wrap:wrap}
@media(max-width:700px){.reiter a{padding:.35rem .8rem;font-size:.8rem}}

/* Einsatz verschieben per Ziehen */
.pep-pbalken.verschiebbar{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.pep-pbalken.verschiebbar *{-webkit-user-drag:none}
.pep-pbalken.zieht{cursor:grabbing;z-index:30;box-shadow:0 8px 24px rgba(4,40,63,.35);opacity:.92;transition:none;position:relative}
.pep-pbalken.zieht::after{content:attr(data-ziel);position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);background:var(--blau);color:#fff;border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:700;white-space:nowrap}

/* Termine (z. B. G31) */
.pep-balken.termin{--bg:#e0f4f4;--fg:#0d5c63;display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.pep-balken.termin form{margin:0}.pep-balken.termin button{padding:0 .3rem;line-height:1.2}
.plankarte.termin{border-left-color:#1b9aaa;background:#f0fafa}
.km-chip.termin{background:#e0f4f4;border-left-color:#1b9aaa}

.zieht-aktiv,.zieht-aktiv *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.mw-zelle.belegt.verschiebbar{cursor:grab}.mw-zelle.zieht{position:relative;z-index:30;box-shadow:0 6px 16px rgba(4,40,63,.35);opacity:.92;transition:none;cursor:grabbing}
.mw-zelle.zieht[data-ziel]::after{content:attr(data-ziel);position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);background:var(--blau);color:#fff;border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.pep-pbalken.verschiebbar:hover{box-shadow:inset 5px 0 0 rgba(255,255,255,.65),inset -5px 0 0 rgba(255,255,255,.65)}.pep-pbalken.verschiebbar.zieht{box-shadow:0 8px 24px rgba(4,40,63,.35)}
.pep-projekt[data-auftrag] .pep-pkopf{cursor:grab}
.pep-projekt.zieht{z-index:30;box-shadow:0 10px 28px rgba(4,40,63,.35);opacity:.93;transition:none;cursor:grabbing}
.pep-projekt.zieht[data-ziel]::after{content:attr(data-ziel);position:absolute;top:-1.4rem;left:50%;transform:translateX(-50%);background:var(--blau);color:#fff;border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.kw-nr small{font-size:.6em;font-weight:700}
.wisch-hinweis{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--blau);color:#fff;border-radius:999px;padding:.35rem 1rem;font-weight:700;box-shadow:0 6px 20px rgba(4,40,63,.35);z-index:60;display:none}

/* Wochenplan am breiten Bildschirm: viele Wochen, seitliches Scrollen wie beim senkrechten (Namensspalte bleibt stehen) */
@media(min-width:701px){
  .scroll:has(.pep[data-anker]){overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .pep[data-anker]{grid-template-columns:var(--label,170px) repeat(var(--spalten),var(--tagbreit,120px));min-width:0;width:max-content;max-width:none}
  .pep[data-anker] .pep-kw,.pep[data-anker] .pep-label,.pep[data-anker] .pep-plabel{position:sticky;left:0;z-index:5;background:#fff}
  .pep[data-anker] .pep-titel,.pep[data-anker] .pep-leer{position:sticky;left:1rem;width:var(--sichtbreit,60vw);max-width:var(--sichtbreit,60vw);box-sizing:border-box;z-index:4}
  .pep[data-anker] .pep-kopf.wochenstart{border-left:2px solid #cfdbe7;padding-left:.25rem}
  .pep-kwmini{font-size:.66rem;font-weight:800;color:var(--blau);letter-spacing:.06em;text-transform:uppercase}
  .pep[data-anker] .pep-projekt:not(.pep-teil){position:sticky;left:1rem;width:var(--sichtbreit,60vw);max-width:var(--sichtbreit,60vw);box-sizing:border-box}
  .pep[data-anker] .pep-pkopf{position:sticky;left:calc(var(--label,170px) + 1rem);width:fit-content;max-width:calc(var(--sichtbreit,60vw) - var(--label,170px) - 4rem)}
}
.kw-nr small{font-size:.6em;font-weight:700}
.autosave-status{font-size:.82rem;font-weight:700;min-width:7rem}.autosave-status.ok{color:#1f7a45}.autosave-status.fehler{color:#b3382f}
.pep .aus{display:none!important}

/* News */
.brett-beitrag header{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.5rem}
.brett-beitrag h2{margin:0;font-size:1.15rem}
.brett-beitrag.angepinnt{border-left:4px solid var(--orange)}
.brett-text{line-height:1.5;overflow-wrap:anywhere}
.brett-aktionen{display:flex;gap:.5rem;align-items:center;margin:.8rem 0 0}
.brett-form{display:flex;flex-direction:column;gap:.7rem;margin-top:.7rem}
.brett-form textarea{width:100%;font:inherit}
.brett-optionen{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:end}
.brett-neu summary{cursor:pointer;font-weight:700;color:var(--blau2)}

/* Stundenzettel */
.stunden-status{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;background:#eef1f4;color:#4a5662}
.stunden-status.eingereicht{background:#fff1d6;color:#9a6200}.stunden-status.freigegeben{background:#e3f5e9;color:#1f7a45}
.stunden-tag{padding:.7rem 1rem}.stunden-tag.frei{background:#f6f8fa}
.stunden-tag header{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.stunden-abw{background:#e3eefc;color:#2161b4;border-radius:999px;padding:.05rem .55rem;font-size:.8rem;font-weight:700}
.stunden-zeile{margin:.3rem 0}.stunden-warnung{margin:.2rem 0;color:#9a6200}
.stunden-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin:.5rem 0}
.stunden-form label{display:flex;flex-direction:column;font-size:.85rem;gap:.15rem}.stunden-form label.breit{flex:1 1 16rem}
.stunden-neu summary{cursor:pointer;color:var(--blau2);font-weight:700;margin-top:.4rem}
.stunden-admin{display:flex;gap:.6rem;align-items:end;margin:.6rem 0;flex-wrap:wrap}
.stunden-aktionen{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

.stunden-tag.zukunft{opacity:.6;background:#f6f8fa}

.stunden-neu-reihe{display:flex;gap:1.5rem;flex-wrap:wrap}.stunden-form label.haken{flex-direction:row;align-items:center;gap:.4rem;font-size:.9rem}

.stunden-tagesform fieldset{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;border:1px solid var(--rand);border-radius:8px;padding:.4rem .7rem;margin:0;flex:1 1 100%}.stunden-tagesform legend{font-weight:700;font-size:.85rem;padding:0 .3rem}

.stunden-form label.haken>input[type=radio],.stunden-form label.haken>input[type=checkbox]{display:inline-block;width:auto;margin:0;padding:0;flex:none}

.stunden-konto{border-collapse:collapse;margin:.4rem 0;font-size:.95rem}.stunden-konto th{text-align:left;font-weight:500;padding:.15rem 1.5rem .15rem 0}.stunden-konto td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.stunden-konto tr.summe th,.stunden-konto tr.summe td{border-top:2px solid var(--blau2);padding-top:.3rem}

.stunden-form input,.stunden-form select{font-size:16px} /* verhindert das Hineinzoomen am iPhone */
.stunden-fehler{flex:1 1 100%;background:#fde5e3;color:#b3382f;border-radius:8px;padding:.5rem .7rem;font-weight:600}
.stunden-form.wackeln{animation:wackeln .35s}
@keyframes wackeln{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.stunden-tag{transition:background .6s,box-shadow .6s}.stunden-tag.gespeichert{background:#e3f5e9;box-shadow:0 0 0 2px #1f7a45 inset}
details.stunden-neu[open]>.stunden-form{animation:einblenden .2s ease-out}
@keyframes einblenden{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.stunden-neu summary{display:inline-block;padding:.5rem .9rem;border-radius:999px;background:#eef5fa;min-height:2.4rem;line-height:1.4rem;-webkit-tap-highlight-color:transparent}
.stunden-form button{min-height:2.6rem}
@media(prefers-reduced-motion:reduce){.stunden-form.wackeln,details.stunden-neu[open]>.stunden-form{animation:none}}

.zeitfeld{width:5.2rem;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em}.zeitfeld.ungueltig{border-color:#b3382f;background:#fde5e3}

.stunden-abgabe{display:inline-block;vertical-align:top}.stunden-abgabe summary{list-style:none;cursor:pointer;display:inline-block}.stunden-abgabe summary::-webkit-details-marker{display:none}
.stunden-abgabeform{margin:.6rem 0;padding:.8rem;border:1px solid var(--rand);border-radius:12px;background:#fff;max-width:640px;display:flex;flex-direction:column;gap:.6rem}
.stunden-abgabeform label.haken{display:flex;flex-direction:row;align-items:center;gap:.5rem}.stunden-abgabeform label.haken input{width:auto;margin:0}
.unterschrift canvas{display:block;width:100%;max-width:600px;aspect-ratio:10/3;background:#fff;border:1.5px dashed var(--blau2);border-radius:10px;touch-action:none;cursor:crosshair}
.unterschrift-leiste{display:flex;gap:.8rem;align-items:center;margin-top:.3rem}

/* Aufgaben */
.aufgabe header{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;justify-content:space-between}.aufgabe h2{margin:0;font-size:1.1rem}
.aufg-frist{font-weight:600;color:var(--blau2)}.aufg-frist.ueberfaellig{color:#b3382f;font-weight:700}
.aufgabe.ueberfaellig{border-left:4px solid #b3382f}.aufgabe.fertig{opacity:.75}
.aufg-neu{background:var(--orange);color:var(--blau);border-radius:999px;padding:.05rem .5rem;font-size:.7rem;font-weight:700;vertical-align:middle}
.aufg-text{line-height:1.5;margin:.4rem 0;overflow-wrap:anywhere}
.aufg-form{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}.aufg-form label.haken,.aufg-empfaenger label.haken{display:flex;flex-direction:row;align-items:center;gap:.5rem;margin:.1rem 0}
.aufg-form label.haken input,.aufg-empfaenger label.haken input{width:auto;margin:0}
.aufg-zeile{display:flex;gap:1rem;flex-wrap:wrap}.aufg-empfaenger{border:1px solid var(--rand);border-radius:8px;padding:.5rem .8rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.1rem .8rem}
.aufg-empf{list-style:none;padding:0;margin:.4rem 0}.aufg-empf li{margin:.2rem 0}
.aufg-aktionen{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap}.aufg-neu-form summary{cursor:pointer;font-weight:700;color:var(--blau2)}
.aufg-zahlen{display:flex;gap:.8rem;flex-wrap:wrap}.aufg-zahlen .karte{display:flex;flex-direction:column;align-items:center;min-width:8rem;margin:.4rem 0}.aufg-zahlen strong{font-size:1.8rem}.aufg-zahlen .ueberfaellig strong{color:#b3382f}

.plan-aufgaben h2{font-size:1.05rem}.plan-aufgabe{border-top:1px solid var(--rand);padding:.5rem 0}.plan-aufgabe:first-of-type{border-top:0}
.plan-aufgabe.ueberfaellig{border-left:4px solid #b3382f;padding-left:.6rem}.plan-aufgabe-kopf{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;justify-content:space-between}
.aufg-klein{flex-direction:row;flex-wrap:wrap;align-items:center}.aufg-klein button{min-height:2.4rem}

.aufg-wer{margin:.4rem 0;font-weight:600}.plan-hof{border-left:4px solid var(--orange)}

.reiter-plan{margin:.2rem 0 1rem}.reiter-zahl{display:inline-block;min-width:1.3rem;padding:0 .35rem;border-radius:999px;background:var(--orange);color:var(--blau);font-size:.75rem;text-align:center;margin-left:.2rem}
.reiter-plan a.aktiv .reiter-zahl{background:#fff}.aufg-abschnitt{font-size:1.05rem;margin:1.2rem 0 .3rem}
/* Handy-Menü: ab hier unten an stil.css anhängen */
.menue-box{display:contents}
.menue-knopf{display:none}
@media(max-width:700px){
  .kopf{position:relative}
  .kopf.js-menue .menue-knopf{display:inline-flex;grid-column:2;grid-row:1;align-items:center;gap:.55rem;min-height:44px;padding:.35rem .95rem .35rem .8rem;border-radius:999px;border:1.5px solid var(--rand);background:#fff;color:var(--blau);font-weight:700;font-size:.95rem}
  .kopf.js-menue.offen .menue-knopf{background:var(--blau);border-color:var(--blau);color:#fff}
  .burger,.burger::before,.burger::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .burger{position:relative}
  .burger::before,.burger::after{content:"";position:absolute;left:0}
  .burger::before{top:-6px}.burger::after{top:6px}
  .kopf.offen .burger{background:transparent}
  .kopf.offen .burger::before{top:0;transform:rotate(45deg)}
  .kopf.offen .burger::after{top:0;transform:rotate(-45deg)}

  .kopf.js-menue .menue-box{display:none;grid-column:1 / -1;grid-row:2;background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schatten);padding:.45rem;margin-top:.35rem}
  .kopf.js-menue.offen .menue-box{display:block}
  .kopf.js-menue .menue-box .menue{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:visible;gap:.1rem;padding:0}
  .kopf.js-menue .menue-box .menue a{display:flex;align-items:center;justify-content:flex-start;min-height:50px;padding:.6rem .95rem;border-radius:12px;background:transparent;font-size:1.05rem;font-weight:600;color:var(--blau);text-transform:none;letter-spacing:0;white-space:normal}
  .kopf.js-menue .menue-box .menue a.aktiv{background:var(--blau);color:#fff}
  .kopf.js-menue .menue-box .rechts{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:stretch;gap:.55rem;margin:.4rem 0 0;padding:.7rem .55rem .35rem;border-top:1px solid var(--rand)}
  .kopf.js-menue .menue-box .rechts a{max-width:none;padding:.2rem .4rem;font-size:.9rem;color:var(--grau);text-align:center}
  .kopf.js-menue .menue-box .rechts button{width:100%}
}

/* Handy-Menü: Name vor dem Namen und Hinweis-Punkt am Knopf */
.menue-knopf .punkt{margin-left:0}
@media(max-width:700px){.kopf.js-menue .menue-box .rechts a::before{content:"Angemeldet als "}}

/* Handy: Platz sparen (nur unter 700 Pixel Breite, Desktop unverändert) */
@media(max-width:700px){
  .kopf{padding:.35rem .7rem}
  .kopf .marke img{height:34px}
  .kopf.js-menue .menue-knopf{min-height:40px;padding:.25rem .85rem .25rem .7rem}
  .seitenband .eyebrow{display:none}
  .seitenband-innen{padding:.5rem .9rem .55rem}
  .seitenband strong{font-size:1.05rem}
  main{padding-top:.5rem}
  main h1{font-size:1.2rem;margin:.1rem 0 .5rem}
  .karte{padding:.65rem .8rem;margin:.45rem 0}
  [data-stunden-seite] > .nav2{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.4rem;margin:.2rem 0 .5rem}
  [data-stunden-seite] > .nav2 .knopf{flex:0 0 auto;min-height:36px;padding:.25rem .7rem;font-size:.85rem}
  [data-stunden-seite] > .nav2 strong{flex:1 1 auto;text-align:center;font-size:.95rem;white-space:nowrap}
  .stunden-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
  .stunden-kopf > *{flex:1 1 100%;margin:.15rem 0}
  .stunden-kopf > .stunden-aktionen,.stunden-kopf > details.stunden-abgabe:not([open]){flex:0 0 auto}
  .stunden-kopf > .stunden-aktionen{gap:.4rem}
  .stunden-kopf .stunden-aktionen .knopf,.stunden-kopf details.stunden-abgabe > summary{min-height:38px;padding:.3rem .8rem;font-size:.9rem}
  .stunden-kopf [data-testid="stunden-summen"]{font-size:.85rem;color:var(--grau)}
  .stunden-konto{width:100%;margin:.2rem 0}
  .stunden-konto th,.stunden-konto td{padding:.2rem .5rem;font-size:.9rem}
  .stunden-tag{display:flex;flex-wrap:wrap;align-items:center;gap:0 .4rem;padding:.55rem .8rem}
  .stunden-tag > header{flex:1 1 100%;margin-bottom:.1rem}
  .stunden-tag > .stunden-zeile{flex:1 1 calc(100% - 3rem);min-width:0;margin:.15rem 0;font-size:.92rem}
  .stunden-tag > form.stunden-loeschen{flex:0 0 auto;display:block !important;margin:0}
  .stunden-tag form.stunden-loeschen button{min-height:32px;min-width:32px;padding:.1rem .5rem;font-size:.85rem}
  .stunden-tag > p:empty{flex:0 0 100%;margin:0;height:0}
  .stunden-tag > .stunden-tagessumme{flex:1 1 100%;margin:.15rem 0}
  .stunden-tag > details{flex:1 1 100%}
  .stunden-tag details.stunden-neu > summary{min-height:36px;padding:.3rem .8rem;font-size:.9rem}
}