/* ============================================================ Wasserrettungs-App · Wasserwacht-CI Themes: feld (Standard) / elw über ============================================================ */ :root { --ww-blau:#008ccd; --ww-blau-60:#73afdc; --ww-blau-30:#b4d7eb; --drk-rot:#e60005; --ww-dunkelblau:#002d55; --ww-dblau-60:#698caf; --ww-dblau-30:#b4c3d7; --ww-beige:#f5f0e6; --ww-weiss:#fff; --chart-1:var(--ww-blau); --chart-2:var(--ww-dunkelblau); --chart-3:var(--ww-blau-60); --chart-4:var(--ww-dblau-60); --chart-5:var(--ww-blau-30); --chart-6:var(--ww-dblau-30); --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; --radius:10px; --touch:48px; --touch-k:64px; } :root,[data-theme=feld]{ --grund:var(--ww-weiss); --fl-info:var(--ww-beige); --fl-karte:var(--ww-weiss); --linie:var(--ww-dblau-30); --text:#1a1a1a; --text-g:#4a5a6a; --text-inv:var(--ww-weiss); --akzent:var(--ww-blau); --akzent-fl:var(--ww-blau-30); --kopf:var(--ww-dunkelblau); --stopp:var(--drk-rot); --stopp-fl:#fdecec; --ok:#1a7a4a; --warn:#b57400; --warn-fl:#fdf3e0; --fs:16px; --fs-zeit:1.9rem; --schatten:0 1px 3px rgba(0,45,85,.12); } [data-theme=elw]{ --grund:var(--ww-dunkelblau); --fl-info:#0a3a66; --fl-karte:#06304f; --linie:#1c4d7a; --text:var(--ww-weiss); --text-g:var(--ww-dblau-30); --text-inv:var(--ww-dunkelblau); --akzent:var(--ww-blau); --akzent-fl:#0d4d7d; --kopf:var(--ww-blau-60); --stopp:#ff4a4e; --stopp-fl:#5a1214; --ok:#4dc98a; --warn:#f0b23e; --warn-fl:#4a3a10; --fs:19px; --fs-zeit:2.6rem; --schatten:none; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:var(--fs);background:var(--grund);color:var(--text);line-height:1.4} h1,h2,h3{color:var(--kopf)} .streifen{height:8px;background:repeating-linear-gradient(90deg,var(--ww-blau) 0 26px,var(--grund) 26px 36px,var(--kopf) 36px 62px,var(--grund) 62px 72px)} /* Kopf + Navigation */ header.app{background:var(--kopf);color:var(--ww-weiss);padding:.6rem 1rem;display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:20} [data-theme=elw] header.app{color:var(--ww-dunkelblau)} header.app h1{font-size:.98rem;margin:0;flex:1;letter-spacing:.05em;text-transform:uppercase;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} header.app h1 small{display:block;font-weight:400;opacity:.8;text-transform:none;letter-spacing:0;font-size:.72rem} #statusPille{font-family:var(--mono);font-size:.7rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;white-space:nowrap} #statusPille.online{background:var(--ok);color:#fff} #statusPille.offline{background:var(--warn);color:#201200} #statusPille.pending{background:transparent;border:2px solid var(--warn);color:var(--warn)} nav.module{display:flex;background:var(--kopf);position:sticky;top:2.9rem;z-index:19;overflow-x:auto} nav.module button{flex:1;min-width:96px;background:none;border:none;border-bottom:4px solid transparent;color:rgba(255,255,255,.65);font:inherit;font-size:.85rem;font-weight:700;padding:.7rem .3rem;cursor:pointer;min-height:var(--touch);white-space:nowrap} [data-theme=elw] nav.module button{color:rgba(0,45,85,.65)} nav.module button.aktiv{color:var(--ww-weiss);border-bottom-color:var(--ww-blau)} [data-theme=elw] nav.module button.aktiv{color:var(--ww-dunkelblau);border-bottom-color:var(--ww-weiss)} main{max-width:860px;margin:0 auto;padding:1rem 1rem 7.5rem} /* Karten */ .karte{background:var(--fl-karte);border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:1rem;overflow:hidden;box-shadow:var(--schatten)} .karte>h2{margin:0;padding:.65rem 1rem;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;background:var(--fl-info);color:var(--kopf);border-bottom:1px solid var(--linie)} [data-theme=elw] .karte>h2{color:var(--ww-blau-60)} .inhalt{padding:.9rem} .karte--info .inhalt{background:var(--fl-info)} /* Buttons */ .b{font:inherit;font-weight:700;border:none;border-radius:var(--radius);min-height:var(--touch);padding:.55rem 1rem;cursor:pointer} .b:active{filter:brightness(.85)} .b:focus-visible{outline:3px solid var(--ww-blau-60);outline-offset:2px} .b-p{background:var(--akzent);color:#fff} .b-k{background:var(--kopf);color:var(--text-inv)} .b-l{background:transparent;color:var(--akzent);border:2px solid var(--linie)} .b-s{background:var(--stopp);color:#fff} .b-jetzt{background:var(--akzent);color:#fff;min-height:var(--touch-k);font-size:1.1rem;flex:1} .b-s.b-jetzt{background:var(--stopp);flex:0 1 auto} .b-mini{min-height:40px;padding:.3rem .7rem;font-size:.85rem} .reihe{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} /* Eingaben */ label.feld{display:block;margin-bottom:.7rem} label.feld .name, .feldname{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-g);margin-bottom:.2rem} input[type=text],input[type=date],input[type=time],textarea,select{width:100%;font:inherit;padding:.6rem .7rem;border:1.5px solid var(--linie);border-radius:8px;background:var(--fl-karte);color:var(--text);min-height:46px} textarea{min-height:80px;resize:vertical} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-fl)} .zeile{display:grid;gap:.5rem .7rem}.zeile.c2{grid-template-columns:1fr 1fr}.zeile.c3{grid-template-columns:1fr 1fr 1fr} @media(max-width:560px){.zeile.c2,.zeile.c3{grid-template-columns:1fr}} /* Stepper (Zahlen ohne Tastatur) */ .stepper{display:inline-flex;align-items:center;border:2px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:var(--fl-karte)} .stepper button{font:inherit;font-size:1.35rem;font-weight:800;border:none;background:var(--fl-info);color:var(--kopf);width:52px;min-height:var(--touch);cursor:pointer} [data-theme=elw] .stepper button{color:var(--ww-weiss)} .stepper output{font-family:var(--mono);font-weight:700;min-width:86px;text-align:center;font-size:1.05rem} /* Zeit & Badges & Banner */ .zeit{font-family:var(--mono);font-size:var(--fs-zeit);font-weight:700;font-variant-numeric:tabular-nums;color:var(--kopf)} [data-theme=elw] .zeit{color:var(--ww-weiss)} .badge{font-family:var(--mono);font-size:.66rem;font-weight:700;padding:.22em .65em;border-radius:999px;white-space:nowrap} .badge-ok{background:var(--ok);color:#fff} .badge-warn{background:var(--warn-fl);color:var(--warn);border:1px solid var(--warn)} .badge-blau{background:var(--akzent-fl);color:var(--kopf)} [data-theme=elw] .badge-blau{color:var(--ww-weiss)} .badge-stopp{background:var(--stopp);color:#fff} .banner{border-radius:var(--radius);padding:.7rem .9rem;font-weight:600;margin-bottom:.6rem} .banner-s{background:var(--stopp);color:#fff} .banner-w{background:var(--warn-fl);color:var(--warn);border:2px solid var(--warn)} .banner small{opacity:.8;font-family:var(--mono);font-weight:400} /* Auswahl-Blatt (Picker, Kachelwahl) */ .blatt-hintergrund{position:fixed;inset:0;background:rgba(0,20,40,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50} .blatt{background:var(--grund);border-radius:16px 16px 0 0;width:100%;max-width:660px;max-height:84vh;overflow:auto;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))} .kachel{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:var(--fl-karte);border:2px solid var(--linie);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.5rem;font:inherit;color:var(--text);cursor:pointer;min-height:var(--touch-k)} .kachel:active{border-color:var(--akzent)} .kachel .avatar{width:44px;height:44px;border-radius:50%;background:var(--akzent-fl);color:var(--kopf);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0} [data-theme=elw] .kachel .avatar{color:var(--ww-weiss)} .kachel .info{flex:1;min-width:0}.kachel .name{font-weight:700} .kachel .sub{font-size:.76rem;color:var(--text-g)} .kachel.gesperrt{opacity:.55;border-style:dashed} .kachel.gesperrt .grund{color:var(--stopp);font-size:.76rem;font-weight:700} /* GBU-Dreifachschalter */ .gb-item{display:flex;align-items:center;gap:.55rem;padding:.5rem 0;border-bottom:1px dashed var(--linie);flex-wrap:wrap} .gb-item:last-child{border-bottom:none} .gb-item .titel{flex:1 1 210px;font-size:.9rem} .gb-item.gefahr{background:var(--stopp-fl);border-radius:8px;padding-left:.5rem;padding-right:.5rem} [data-theme=elw] .gb-item.gefahr{background:var(--stopp-fl)} .triple{display:flex;border:1.5px solid var(--linie);border-radius:8px;overflow:hidden} .triple button{font:inherit;font-size:.76rem;font-weight:700;border:none;background:var(--fl-karte);color:var(--text-g);padding:.45rem .65rem;min-height:44px;min-width:50px;cursor:pointer;border-left:1.5px solid var(--linie)} .triple button:first-child{border-left:none} .triple .an-nein{background:var(--akzent-fl);color:var(--kopf)} [data-theme=elw] .triple .an-nein{color:var(--ww-weiss)} .triple .an-ja{background:var(--warn-fl);color:var(--warn)} .triple .an-gef{background:var(--stopp);color:#fff} /* Trupp & Tauchgang */ .mitglied{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px dashed var(--linie)} .mitglied:last-child{border-bottom:none} .rolle-tag{font-size:.68rem;font-weight:800;letter-spacing:.05em;padding:.2em .6em;border-radius:6px;background:var(--akzent-fl);color:var(--kopf);text-transform:uppercase} [data-theme=elw] .rolle-tag{color:var(--ww-weiss)} .tg{border:2px solid var(--linie);border-radius:var(--radius);padding:.8rem;margin-top:.8rem} .tg.laeuft{border-color:var(--akzent)} .tg .kopfzeile{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap} .tg .details{font-size:.8rem;color:var(--text-g)} /* Tagebuch */ .tb div{display:flex;gap:.6rem;padding:.32rem 0;border-bottom:1px dashed var(--linie);font-size:.86rem} .tb time{font-family:var(--mono);color:var(--text-g);flex-shrink:0} /* Einsatzliste */ .einsatz-kachel{background:var(--fl-karte);border:1px solid var(--linie);border-left:6px solid var(--kopf);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.7rem;cursor:pointer;display:flex;align-items:center;gap:.8rem;box-shadow:var(--schatten)} .einsatz-kachel .meta{flex:1;min-width:0} .einsatz-kachel .ort{font-weight:700} .einsatz-kachel .datum{font-family:var(--mono);font-size:.78rem;color:var(--text-g)} .leer{text-align:center;color:var(--text-g);padding:2.5rem 1rem} /* Fußleiste */ .fuss{position:fixed;bottom:0;left:0;right:0;background:var(--grund);border-top:2px solid var(--linie);padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom));display:flex;gap:.6rem;z-index:30} .hidden{display:none!important}