/* DATEI: /assets/css/app.css */
:root{--bg:#f7f4ef;--bg2:#efe8dc;--card:#fffdfb;--ink:#1f2430;--muted:#697180;--line:#e5ded4;--brand:#8A1538;--brand2:#B21E4B;--brand3:#D95D7F;--danger:#b42318;--ok:#147a3f;--soon:#fff2c7;--shadow:0 22px 60px rgba(68,22,36,.13);--soft:0 10px 30px rgba(20,24,32,.08);--radius:26px}*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,#fff7f1 0,#f7f4ef 42%,#efe8dc 100%);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.container{max-width:1260px;margin:0 auto;padding:24px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:rgba(255,253,251,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(138,21,56,.12)}.brand{display:flex;align-items:center;gap:10px}.brand-dot{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand3));box-shadow:0 0 0 6px rgba(138,21,56,.08)}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.user-pill,.top-select{padding:8px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft)}.top-select{min-width:150px}.page-title{margin:10px 0 22px}.page-title h1{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0;color:#21151a;letter-spacing:-.04em}.page-title p,.muted{color:var(--muted)}.grid{display:grid;gap:18px}.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.card,.module-card,.auth-card{background:rgba(255,253,251,.92);border:1px solid rgba(138,21,56,.10);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.elevated-form{background:linear-gradient(180deg,#fff,#fff8fb)}.compact{padding:14px 18px}.module-card{display:flex;flex-direction:column;min-height:218px;transition:transform .18s ease, box-shadow .18s ease}.module-card:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(138,21,56,.18)}.module-card .icon{font-size:34px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0f5,#fff);box-shadow:inset 0 0 0 1px rgba(138,21,56,.08)}.module-card h2{margin:14px 0 6px}.module-card p{color:var(--muted);flex:1}.btn,.ghost,.danger,.primary{border:0;border-radius:15px;padding:11px 16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800}.btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;box-shadow:0 10px 20px rgba(138,21,56,.22)}.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;box-shadow:0 12px 28px rgba(138,21,56,.28)}.ghost{background:#fff;border:1px solid rgba(138,21,56,.16);color:var(--brand)}.danger{background:#fee4e2;color:#912018}.small{padding:8px 11px;font-size:14px}.mini{border:0;border-radius:10px;padding:3px 8px;background:#fff;color:var(--danger)}.wide{width:100%}.inline-form{display:inline}.stack-form{display:grid;gap:14px}.row{display:flex;align-items:center}.between{justify-content:space-between}.gap{gap:10px;flex-wrap:wrap}.center{text-align:center}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}label{display:grid;gap:7px;font-weight:700}input,select,textarea{width:100%;border:1px solid #ded6cd;border-radius:15px;background:#fff;padding:12px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(138,21,56,.10)}textarea{resize:vertical}.check{display:flex;align-items:center;gap:10px}.check input{width:auto}.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0}.detail-card{border:1px solid rgba(138,21,56,.12);border-radius:20px;background:#fff;padding:16px;margin:12px 0;box-shadow:var(--soft)}.detail-card summary{cursor:pointer}.settings-box{border:1px solid rgba(138,21,56,.12);border-radius:22px;padding:18px;margin:16px 0;background:#fff}.flash{padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:800}.flash-ok{background:#dcfae6;color:#05603a}.flash-error{background:#fee4e2;color:#912018}.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:#fff}table{width:100%;border-collapse:collapse;background:#fff}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}th{background:#fff3f7}.family-calendar{min-width:900px;font-family:"Arial Narrow",Arial,sans-serif;border:2px solid #2a2a2a}.family-calendar th,.family-calendar td{border-right:1px solid #333;border-bottom:1px solid #cfcfcf;padding:4px 6px}.family-calendar thead th{background:#fafafa;color:#111;text-align:center}.family-calendar .date-col{width:170px;min-width:150px;background:#fff}.family-calendar tbody .date-col{font-weight:500}.family-calendar .date-col span{display:block}.family-calendar .date-col small{display:block;color:#333;font-size:12px}.family-calendar tr.weekend-row .date-col{color:#b91c1c}.family-calendar td{min-width:130px;height:38px}.calendar-print-wrap{overflow:auto;border-radius:18px;background:white;box-shadow:var(--soft)}.calendar-toolbar{position:relative;z-index:1}.cal-chip{position:relative;margin:0 0 5px;padding:6px 24px 6px 8px;border-radius:10px;background:#ffe9f0;border:1px solid rgba(138,21,56,.14);font-size:13px}.cal-chip small{display:block;color:#5d6470}.type-shopping{background:#f0fff5}.type-task{background:#fff8db}.modal{border:0;border-radius:26px;padding:0;max-width:560px;width:calc(100vw - 28px);box-shadow:0 30px 90px rgba(0,0,0,.30);background:#fff}.modal::backdrop{background:rgba(30,20,25,.45);backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.modal-form{padding:20px}.overview-card{background:linear-gradient(135deg,#fff,#fff1f5)}.mini-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:10px 0}.mini-overview>div{padding:14px;border-radius:18px;background:#fff;box-shadow:var(--soft)}.dashboard-feed p{background:#fff;border-radius:14px;padding:10px 12px}.big-result{font-size:clamp(34px,6vw,70px);font-weight:900;color:var(--brand)}.dice{display:inline-grid;place-items:center;width:110px;height:110px;border-radius:24px;background:#fff0f5;color:var(--brand);font-size:54px;font-weight:900}.privacy-map{position:relative;min-height:340px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#eef7ff,#fff7fb)}.privacy-map:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:28px 28px}.map-marker{position:absolute;transform:translate(-50%,-50%);z-index:2}.map-marker span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand);color:white;font-weight:900;box-shadow:0 8px 18px rgba(138,21,56,.35)}.note-readonly{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.public-page{background:#e7ebef}.unavailable-wrap{min-height:100vh;display:grid;place-items:center;padding:30px}.unavailable-card{position:relative;display:flex;align-items:center;gap:44px;max-width:970px;width:100%;padding:36px 42px;background:#eef2f5;border-radius:2px;box-shadow:0 6px 16px rgba(0,0,0,.08);border-top:1px solid #cbd3dc}.language-list p{display:grid;grid-template-columns:36px 1fr;gap:12px;margin:0 0 14px;color:#2f668f;line-height:1.28}.language-list span{font-size:25px}.stop-symbol{flex:0 0 112px;width:112px;height:112px;border-radius:50%;background:#ef3338;box-shadow:0 8px 18px rgba(239,51,56,.25);position:relative}.stop-symbol:before{content:"";position:absolute;left:22px;right:22px;top:50%;height:16px;background:white;border-radius:2px;transform:translateY(-50%)}.hidden-login-form{position:fixed;right:16px;top:16px;z-index:10}.hidden-login{width:24px;height:24px;border:0;border-radius:50%;background:rgba(100,110,120,.22);color:#fff;font-weight:800;line-height:24px;padding:0;font-size:14px;opacity:.55}.hidden-login:hover{opacity:.95;background:rgba(100,110,120,.42)}.login-page{min-height:100vh;background:radial-gradient(circle at top left,#ffe4ed,#f7f4ef 38%,#ece3d8)}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{max-width:520px;width:100%;margin:auto}.glass{background:rgba(255,253,251,.83);backdrop-filter:blur(22px)}.login-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:28px;font-weight:900;margin:0 auto 14px}.auth-foot{display:flex;justify-content:center;margin-top:14px}.flag{border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 9px}.danger-zone{margin-top:10px}.manual-field{display:none}.hidden-resume{display:none}.tab-delete-row{margin-top:12px}.training-block{display:grid;gap:5px}.training-block input{padding:7px;font-size:13px}.meal-table textarea{min-width:140px}.backup-card .file-label{display:inline-flex}.import-form{gap:8px;align-items:center}
@media(max-width:760px){.container{padding:14px}.topbar{align-items:stretch;flex-direction:column;padding:10px 12px}.top-actions{justify-content:flex-start}.user-pill,.top-select{width:auto;max-width:100%}.page-title h1{font-size:32px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.module-card{min-height:168px;padding:15px;border-radius:22px}.module-card .icon{width:44px;height:44px;font-size:26px}.module-card h2{font-size:16px}.module-card p{font-size:13px}.btn,.ghost,.danger,.primary{padding:10px 12px;border-radius:13px}.card{padding:16px;border-radius:22px}.form-grid{grid-template-columns:1fr}.unavailable-card{padding:24px;gap:20px}.stop-symbol{display:none}.language-list p{grid-template-columns:30px 1fr;font-size:14px}.family-calendar{font-size:12px;min-width:760px}.family-calendar .date-col{width:125px;min-width:125px}.family-calendar td{min-width:108px}.calendar-toolbar .between{align-items:flex-start}.modal{width:calc(100vw - 14px);border-radius:22px}.privacy-map{min-height:280px}}
@media(max-width:420px){.cards{grid-template-columns:1fr}.top-actions .flag{padding:6px 8px}.family-calendar{min-width:680px}.family-calendar td{min-width:95px}.module-card{min-height:auto}}

/* v1.2: OpenStreetMap-Livekarte ohne externe JavaScript-Bibliothek. */
.osm-map{position:relative;min-height:420px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#eaf1f5;box-shadow:var(--soft);touch-action:pan-x pan-y}.osm-tiles{position:absolute;inset:0;overflow:hidden}.osm-tiles img{position:absolute;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none}.osm-markers{position:absolute;inset:0;z-index:2}.osm-marker{position:absolute;transform:translate(-50%,-100%);z-index:3}.osm-marker span{display:grid;place-items:center;width:42px;height:42px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:900;box-shadow:0 12px 26px rgba(138,21,56,.35);border:3px solid #fff}.osm-marker span::first-letter{transform:rotate(45deg)}.osm-marker span{line-height:1}.osm-marker span{font-size:0}.osm-marker span:after{content:attr(data-initial);font-size:15px;transform:rotate(45deg)}.osm-empty{position:absolute;inset:auto 18px 18px 18px;z-index:4;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:16px;padding:12px;color:var(--muted);text-align:center}.osm-attribution{position:absolute;right:8px;bottom:6px;z-index:4;background:rgba(255,255,255,.82);font-size:11px;padding:3px 7px;border-radius:9px;color:#4b5563}.gps-table-wrap{margin-top:14px}.action-col{width:120px;text-align:center}.tasks-table .action-col button{white-space:nowrap}
@media(max-width:760px){.osm-map{min-height:360px;border-radius:18px}.gps-table-wrap table{font-size:13px}.action-col{width:92px}.tasks-table .action-col button{padding:8px 9px;font-size:12px}}
.osm-marker span{font-size:15px}.osm-marker span:after{content:none}.osm-marker span b{display:block;transform:rotate(45deg);line-height:1}

/* v1.3: alte GPS-Livekarte und besser bedienbare GPS-Zoomsteuerung. */
.legacy-live-map{position:relative;min-height:460px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#eaf1f5;box-shadow:var(--soft)}
.map-privacy-note{margin-top:10px;font-size:13px}.osm-controls{position:absolute;left:12px;top:12px;z-index:5;display:grid;gap:6px}.osm-controls button{width:42px;height:42px;border:0;border-radius:12px;background:#fff;color:var(--brand);font-size:24px;font-weight:900;box-shadow:0 8px 20px rgba(0,0,0,.16)}.meal-actions{margin-top:14px}.meal-table textarea{min-height:76px}
@media(max-width:760px){.legacy-live-map{min-height:380px;border-radius:18px}.meal-table textarea{min-width:118px;min-height:70px}.meal-actions{align-items:stretch}.meal-actions button{flex:1}}

/* v1.4: deutlich bessere GPS-Karte für Mobile/Desktop.
   - Alte Kartenvariante nutzte eigene Zoom-/Pan-/Fullscreen-Bedienelemente.
   - OpenStreetMap-Fallback ist jetzt als eigene Slippy-Map mit Drag, Wheel-Zoom,
     Verlaufslinien und Marker-Liste umgesetzt. */
.gps-provider-note{margin-top:14px;padding:14px 16px;border:1px solid rgba(138,21,56,.18);border-radius:18px;background:linear-gradient(135deg,#fff1f6,#fffdfb);color:#43202c;line-height:1.45}.map-actionbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:8px 0 14px;flex-wrap:wrap}.live-map-shell{min-height:560px;border-radius:26px;border:1px solid rgba(138,21,56,.16);box-shadow:0 24px 70px rgba(68,22,36,.16);overflow:hidden}.legacy-live-map{min-height:560px}.osm-map{position:relative;background:#dbeaf2;touch-action:none;cursor:grab;user-select:none}.osm-map.is-dragging{cursor:grabbing}.osm-tiles{position:absolute;inset:0;overflow:hidden;background:#dbeaf2}.osm-tiles img{position:absolute;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none}.osm-paths{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.osm-paths polyline{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.72;filter:drop-shadow(0 2px 3px rgba(255,255,255,.65))}.osm-markers{position:absolute;inset:0;z-index:3;pointer-events:none}.osm-marker{position:absolute;transform:translate(-50%,-100%);z-index:4;filter:drop-shadow(0 14px 18px rgba(80,20,42,.25))}.osm-marker-pin{display:grid;place-items:center;width:46px;height:46px;border-radius:50% 50% 50% 10px;transform:rotate(-45deg);background:linear-gradient(135deg,var(--brand),var(--brand2));border:3px solid #fff;color:#fff;font-weight:900}.osm-marker-pin b{transform:rotate(45deg);font-size:15px;line-height:1}.osm-marker-label{position:absolute;left:50%;top:50px;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid rgba(138,21,56,.15);box-shadow:0 8px 20px rgba(0,0,0,.14);font-size:12px;font-weight:800;color:#281820;white-space:nowrap}.osm-controls{position:absolute;left:14px;top:14px;z-index:7;display:grid;gap:8px}.osm-controls button{width:48px;height:48px;border:0;border-radius:16px;background:rgba(255,255,255,.96);color:var(--brand);font-size:26px;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.18)}.osm-controls button:active{transform:scale(.96)}.osm-hint{position:absolute;left:74px;top:17px;z-index:6;background:rgba(255,255,255,.92);border:1px solid rgba(138,21,56,.12);border-radius:999px;padding:9px 13px;color:#4b5563;font-size:13px;box-shadow:0 8px 20px rgba(0,0,0,.12)}.osm-empty{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:8;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:18px;padding:14px 18px;color:var(--muted);text-align:center;box-shadow:var(--soft)}.osm-attribution{position:absolute;right:8px;bottom:8px;z-index:7;background:rgba(255,255,255,.86);font-size:11px;padding:4px 8px;border-radius:10px;color:#4b5563}.gps-table-wrap{margin-top:16px}.gps-table-wrap td p{margin:.2rem 0}.gps-table-wrap td:first-child{font-weight:800;color:#321621}@media(max-width:760px){.map-actionbar{justify-content:stretch}.map-actionbar button{flex:1}.live-map-shell,.legacy-live-map,.osm-map{min-height:62vh;border-radius:22px}.osm-controls button{width:46px;height:46px}.osm-hint{left:12px;right:12px;top:auto;bottom:38px;text-align:center;border-radius:16px;font-size:12px}.osm-marker-label{display:none}.gps-table-wrap{font-size:13px}}
/* v1.4 specificity corrections: override older generic .osm-marker span rules. */
.osm-marker .osm-marker-pin{display:grid;place-items:center;width:46px;height:46px;border-radius:50% 50% 50% 10px;transform:rotate(-45deg);background:linear-gradient(135deg,var(--brand),var(--brand2));border:3px solid #fff;color:#fff;font-weight:900;line-height:1;font-size:15px}.osm-marker .osm-marker-pin:after{content:none}.osm-marker .osm-marker-pin b{display:block;transform:rotate(45deg);font-size:15px;line-height:1}.osm-marker .osm-marker-label{display:block;position:absolute;left:50%;top:50px;transform:translateX(-50%);width:auto;height:auto;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid rgba(138,21,56,.15);box-shadow:0 8px 20px rgba(0,0,0,.14);font-size:12px;font-weight:800;color:#281820;white-space:nowrap;line-height:1.1}.osm-marker .osm-marker-label:after{content:none}@media(max-width:760px){.osm-marker .osm-marker-label{display:none}}


/* v1.5: GPS-Karte mit echtem Leaflet + OpenStreetMap wie im Fahrer-Modul. */
.leaflet-live-map{position:relative;min-height:560px;border-radius:26px;border:1px solid rgba(138,21,56,.16);box-shadow:0 24px 70px rgba(68,22,36,.16);overflow:hidden;background:#dbeaf2}.leaflet-live-map .leaflet-control-zoom a{color:var(--brand);font-weight:900}.leaflet-live-map .leaflet-control-attribution{font-size:11px;background:rgba(255,255,255,.86);border-radius:10px;margin:0 8px 8px 0;padding:4px 8px}.pf-leaflet-marker-wrap{background:transparent;border:0}.pf-leaflet-marker{position:absolute;left:50%;top:0;width:46px;height:46px;transform:translateX(-50%) rotate(-45deg);border-radius:50% 50% 50% 10px;background:linear-gradient(135deg,var(--brand),var(--brand2));border:3px solid #fff;box-shadow:0 14px 24px rgba(80,20,42,.28);display:grid;place-items:center}.pf-leaflet-marker span{display:block;transform:rotate(45deg);color:#fff;font-weight:900;font-size:15px;line-height:1}.pf-leaflet-label{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.96);border:1px solid rgba(138,21,56,.15);border-radius:999px;padding:5px 9px;color:#281820;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.14)}.map-error{display:grid;place-items:center;height:100%;min-height:360px;padding:22px;text-align:center;color:var(--muted);background:#fff;border-radius:22px}.leaflet-popup-content strong{color:var(--brand)}@media(max-width:760px){.leaflet-live-map{min-height:62vh;border-radius:22px}.pf-leaflet-label{display:none}.leaflet-live-map .leaflet-control-zoom a{width:42px;height:42px;line-height:42px;font-size:24px}.leaflet-live-map .leaflet-control-zoom{border:0;box-shadow:0 10px 24px rgba(0,0,0,.18)}}

/* v1.6: Mehrsprachigkeit, Smartphone-Optimierung, Cookie-Dialog, rote Notiz-Badges. */
.flag.active{outline:2px solid rgba(138,21,56,.35);background:#fff1f6}.login-lang-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}.auth-links{display:flex;justify-content:center;margin-top:12px}.badge-red{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:8px;padding:0 7px;border-radius:999px;background:#dc2626;color:#fff;font-size:12px;font-weight:900;vertical-align:middle;box-shadow:0 8px 18px rgba(220,38,38,.25)}.language-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.compact-table table{font-size:14px}.topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(18px);background:rgba(255,250,247,.92)}.top-actions{max-width:100%;overflow-x:auto;scrollbar-width:thin}.top-select{max-width:220px}.module-card h2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.settings-box{border:1px solid rgba(138,21,56,.14);border-radius:22px;padding:18px;background:rgba(255,255,255,.72);box-shadow:0 14px 40px rgba(44,18,28,.06)}
@media(max-width:860px){body{font-size:15px}.container{padding:16px 10px 80px}.topbar{align-items:flex-start;gap:10px;padding:10px}.brand{min-width:100%;justify-content:space-between}.top-actions{width:100%;justify-content:flex-start;padding-bottom:4px}.top-select{max-width:160px}.page-title h1{font-size:30px;line-height:1.05}.page-title p{font-size:14px}.grid.two{grid-template-columns:1fr}.mini-overview{grid-template-columns:1fr}.table-wrap{margin-left:-6px;margin-right:-6px;padding:0 6px;overflow:auto;-webkit-overflow-scrolling:touch}.dynamic-table input,.dynamic-table textarea,table input,table select,table textarea{min-height:44px;font-size:16px}.modal::backdrop{background:rgba(22,12,18,.58);backdrop-filter:blur(4px)}.modal{max-height:calc(100dvh - 18px);height:auto;overflow:auto;padding:16px}.modal .form-grid{grid-template-columns:1fr}.row.between{align-items:stretch}.row.gap{gap:8px}.calendar-toolbar .row{width:100%}.calendar-toolbar .row .inline-form{flex:1}.calendar-toolbar .row .inline-form button{width:100%}.family-calendar{font-size:12px}.family-calendar th,.family-calendar td{padding:7px 6px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.module-card{padding:14px;border-radius:20px}.module-card p{display:none}.module-card .icon{width:42px;height:42px}.module-card h2{font-size:15px}.module-card .btn{width:100%}.leaflet-live-map{min-height:65dvh}.auth-card{width:min(100%,460px);padding:20px}.login-wrap{padding:18px 10px;align-items:flex-start}.settings-box{padding:14px}}
@media(max-width:430px){.cards{grid-template-columns:1fr}.top-actions .ghost,.top-actions .danger,.top-actions .btn,.top-actions .primary{padding:8px 10px}.top-actions .flag{min-width:40px}.top-select{max-width:140px}.page-title h1{font-size:28px}.card{padding:14px}.family-calendar{min-width:720px}.modal{width:calc(100vw - 10px);border-radius:20px}.check-grid{grid-template-columns:1fr}.language-grid{grid-template-columns:1fr}}
/* v1.8 Kalender-Aktionen: Bearbeiten und Löschen direkt am Eintrag, auch für jährliche Wiederholungen. */
.cal-actions{display:flex;gap:4px;position:absolute;right:4px;top:4px}.cal-chip{padding-right:52px}.type-recurring{background:#eef6ff;border-color:rgba(38,101,180,.18)}


/* v1.9 Toolbar-Erweiterung: Button zum Leeren der aktuell geöffneten Einkaufs-/Aufgabenliste. */
.module-toolbar { align-items: center; }
.toolbar-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ghost-danger {
  border: 1px solid rgba(160, 18, 70, .28);
  background: rgba(255,255,255,.78);
  color: #9f123f;
  border-radius: 16px;
  padding: .82rem 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(160, 18, 70, .10);
}
.ghost-danger:hover { background: #fff0f5; }
@media (max-width: 720px) {
  .module-toolbar { align-items: stretch; }
  .module-toolbar > h2 { width: 100%; }
  .toolbar-actions { width: 100%; justify-content: stretch; }
  .toolbar-actions form, .toolbar-actions button { width: 100%; }
  .toolbar-actions .primary, .toolbar-actions .ghost-danger { width: 100%; }
}


/* v2.0 Stundenplan-Modul + weitere Smartphone-Optimierungen. */
.timetable-form { gap: 18px; }
.timetable-child-name { display: grid; gap: 8px; margin: 14px 0 18px; max-width: 560px; }
.timetable-mobile-grid { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.timetable-day-card { border: 1px solid rgba(138,21,56,.13); border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 12px 30px rgba(44,18,28,.06); overflow: hidden; }
.timetable-day-card h3 { margin: 0; padding: 12px 14px; color: var(--brand); background: linear-gradient(180deg, #fff8fb, #fff); border-bottom: 1px solid rgba(138,21,56,.12); font-size: 16px; }
.timetable-lessons { display: grid; gap: 8px; padding: 12px; }
.timetable-lesson-row { display: grid; grid-template-columns: 34px minmax(110px,1fr) minmax(120px,1fr); gap: 8px; align-items: center; }
.lesson-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #fff0f5; color: var(--brand); font-weight: 900; border: 1px solid rgba(138,21,56,.15); }
.timetable-lesson-row input { min-width: 0; }
@media (max-width: 1180px) { .timetable-mobile-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 720px) {
  .timetable-mobile-grid { grid-template-columns: 1fr; gap: 12px; }
  .timetable-day-card { border-radius: 20px; }
  .timetable-lesson-row { grid-template-columns: 34px 1fr; }
  .timetable-lesson-row input:nth-of-type(2) { grid-column: 2; }
  .timetable-lesson-row input { font-size: 16px; min-height: 44px; }
  .detail-card summary { min-height: 48px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tab-delete-row .inline-form, .tab-delete-row button { width: 100%; }
}
@media (max-width: 430px) {
  .container { padding-left: 8px; padding-right: 8px; }
  .card { border-radius: 22px; }
  .timetable-lessons { padding: 10px; }
}

/* v2.1: Support, Arbeitszeit und mobile Optimierung */
.wrap{flex-wrap:wrap}.top-actions{gap:.45rem}.top-select{max-width:min(46vw,260px)}
.worktime-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}.worktime-buttons form{margin:0}.worktime-buttons button{width:100%;border:0;border-radius:1.2rem;padding:1.35rem 1rem;font-size:1.15rem;font-weight:900;color:#fff;box-shadow:0 1.1rem 2.4rem rgba(138,21,56,.22)}
.worktime-buttons .worktime-start{background:linear-gradient(135deg,#138a42,#19b862)}.worktime-buttons .worktime-end{background:linear-gradient(135deg,#9f1239,#dc2626)}.worktime-buttons .worktime-break{background:linear-gradient(135deg,#6b7280,#9ca3af);font-size:1rem;padding:1rem}.worktime-buttons button:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed;box-shadow:none}.no-screen-capture{-webkit-user-select:none;user-select:none}.gps-e2ee-box input{min-width:min(100%,320px)}.badge-red{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;padding:0 .4rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.75rem;margin-left:.45rem;vertical-align:middle}
@media print{.worktime-secure .no-screen-capture{display:none!important}.worktime-secure:after{content:"Aus Sicherheitsgründen ist Drucken/Screenshot in diesem Modul nicht vorgesehen.";display:block;padding:2rem;font-weight:800}}
@media(max-width:760px){.container{padding:1rem}.page-title h1{font-size:2.05rem}.topbar{position:sticky;top:0;z-index:30;align-items:flex-start;gap:.5rem;padding:.65rem}.top-actions{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:.2rem}.user-pill{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.module-card{padding:1rem;min-height:9rem}.module-card h2{font-size:1rem}.card{padding:1rem;border-radius:1.25rem}.form-grid{grid-template-columns:1fr!important}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.worktime-buttons{grid-template-columns:1fr}.worktime-buttons button{padding:1.2rem 1rem}.leaflet-live-map{min-height:62vh}.modal{width:calc(100vw - 1rem);max-width:none}.row.between,.row.gap{align-items:stretch}.row.gap>*{flex:1 1 auto}}
@media(max-width:420px){.grid.cards{grid-template-columns:1fr}.top-select{max-width:62vw}.page-title h1{font-size:1.8rem}}

/* v2.2 Arbeitszeit: Mehrere Arbeitsblöcke pro Tag + klare Pause-Ende-Hervorhebung. */
.worktime-buttons .worktime-pause-end-active{
  background:linear-gradient(135deg,#9f1239,#ef4444)!important;
  box-shadow:0 1.1rem 2.4rem rgba(220,38,38,.28)!important;
}
.worktime-buttons .worktime-pause-end-active:before{content:"✓ ";}

/* v2.2 Stundenplan: eine zentrale Uhrzeitenspalte rechts, Fächer nur in den Wochentagen. */
.timetable-card{overflow:hidden}.timetable-print-table-wrap{width:100%;overflow:auto;border:1px solid rgba(138,21,56,.13);border-radius:22px;background:#fff;box-shadow:var(--soft);-webkit-overflow-scrolling:touch}.timetable-print-table{min-width:920px;border-collapse:separate;border-spacing:0}.timetable-print-table th,.timetable-print-table td{border-right:1px solid rgba(138,21,56,.10);border-bottom:1px solid rgba(138,21,56,.10);padding:10px;vertical-align:middle}.timetable-print-table th{position:sticky;top:0;z-index:1;text-align:center;background:linear-gradient(180deg,#fff2f6,#fff8fb);color:var(--brand);font-weight:900}.timetable-print-table .lesson-col{width:72px;text-align:center;background:#fff8fb}.timetable-print-table .time-col{width:190px;background:#fffdf8}.timetable-print-table input{min-width:0;border-radius:14px;padding:10px 12px}.timetable-print-table .subject-input{text-align:center;font-weight:750}.timetable-print-table .time-input{font-weight:750}.timetable-mobile-list{display:none}.timetable-mobile-lesson{border:1px solid rgba(138,21,56,.13);border-radius:20px;background:#fff;box-shadow:var(--soft);padding:12px;margin:12px 0}.timetable-mobile-lesson-head{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:end;margin-bottom:10px}.timetable-mobile-subjects{display:grid;grid-template-columns:1fr;gap:10px}.timetable-mobile-subjects label{font-size:13px;color:var(--brand)}
@media(max-width:820px){.timetable-print-table-wrap{display:none}.timetable-mobile-list{display:block}.timetable-child-name{max-width:100%}.timetable-mobile-lesson input{font-size:16px;min-height:46px}.timetable-mobile-lesson .lesson-number{width:40px;height:40px}.timetable-detail{padding:12px}.timetable-detail summary{position:sticky;top:74px;z-index:2;background:rgba(255,253,251,.94);border-radius:16px;padding:8px 10px;margin:-4px -4px 10px}}
@media(max-width:420px){.timetable-mobile-lesson{padding:10px;border-radius:18px}.timetable-mobile-lesson-head{grid-template-columns:40px 1fr}.timetable-mobile-subjects{gap:8px}}

/* Phase 2: MFA / Betriebssicherheit */
.code-box {
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 14px;
    overflow-wrap: anywhere;
    line-height: 1.8;
}
.code-box code {
    font-size: 1rem;
    letter-spacing: .04em;
}

/* Phase 3: Support-Tickets und Kontakte-VCF */
.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.35rem .7rem;font-weight:900;font-size:.85rem;border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--ink)}
.status-open{background:#fff2c7;color:#7a4b00}.status-in_progress{background:#e0f2fe;color:#075985}.status-waiting_user{background:#fef3c7;color:#92400e}.status-resolved{background:#dcfae6;color:#05603a}.status-closed{background:#e5e7eb;color:#374151}
.support-ticket .note-readonly,.support-ticket-admin .note-readonly{white-space:pre-wrap}.attachment-list{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.8rem 0}.support-ticket-admin details{margin-top:.8rem}.support-ticket-admin .compact{box-shadow:none;background:#fffdfb}
@media(max-width:760px){.attachment-list .inline-form,.attachment-list button{width:100%}.status-pill{width:100%}.support-ticket-admin .row.between{display:grid}}

/* =========================================================
   MFA QR-Code Einrichtung
   Funktion:
   - Zeigt den lokalen QR-Code sauber und smartphone-freundlich an.
   - Es werden keine externen CSS-/JS-Dateien benötigt.
   ========================================================= */
.mfa-qr-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1.5rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
}

.mfa-qr-box {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 340px;
}

.mfa-qr-svg {
    display: block;
    width: min(100%, 300px);
    height: auto;
}

.mfa-qr-help {
    color: var(--muted, #475569);
    line-height: 1.55;
}

.mfa-qr-help ol {
    margin: 0.6rem 0 0;
    padding-left: 1.25rem;
}

.mfa-manual-fallback {
    margin: 1rem 0 1.5rem;
}

@media (max-width: 760px) {
    .mfa-qr-panel {
        grid-template-columns: 1fr;
    }

    .mfa-qr-box {
        max-width: 100%;
    }

    .mfa-qr-svg {
        width: min(100%, 280px);
    }
}

/* ========================================================================== 
   DATEI: /assets/css/app.css
   ABSCHNITT: Phase 5 - professionelle Mobile-Optimierung und DSGVO-Adminseiten
   FUNKTION:
   - Verhindert abgeschnittene Inhalte auf Smartphones.
   - Macht Tabellen als Karten lesbar.
   - Vergrößert Touch-Ziele.
   - Verbessert Formulare, Navigation und Admin-Karten.
   SICHERHEIT:
   - Reines CSS, keine externen Ressourcen, kein Tracking, keine Drittanbieter-Abhängigkeiten.
   ========================================================================== */

:root {
    --pf-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pf-touch-target: 46px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

button,
.btn,
.primary,
.danger,
.ghost,
input,
select,
textarea {
    min-height: var(--pf-touch-target);
}

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-box,
textarea[readonly],
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.danger-zone {
    border: 1px solid rgba(185, 28, 28, .28);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,245,.96));
}

.danger-zone h2 {
    color: #991b1b;
}

.mfa-qr-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1rem;
    align-items: center;
}

.mfa-qr-box {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, .14);
    display: grid;
    place-items: center;
}

.mfa-qr-box svg {
    width: min(100%, 280px);
    height: auto;
}

@media (max-width: 860px) {
    .container {
        width: min(100% - 1rem, 1200px);
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        align-items: flex-start;
        gap: .75rem;
    }

    .top-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
    }

    .brand {
        width: 100%;
    }

    .grid.cards,
    .cards,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .module-card,
    .card,
    .elevated-form {
        border-radius: 1.1rem;
        padding: 1rem;
    }

    .row,
    .wrap,
    .inline-form,
    .import-form {
        max-width: 100%;
    }

    .inline-form {
        display: inline-flex;
        align-items: stretch;
    }

    .stack-form,
    .stack-form label {
        width: 100%;
    }

    .mfa-qr-panel {
        grid-template-columns: 1fr;
    }

    .responsive-table table,
    .responsive-table thead,
    .responsive-table tbody,
    .responsive-table th,
    .responsive-table td,
    .responsive-table tr {
        display: block;
    }

    .responsive-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .responsive-table tr {
        border: 1px solid rgba(15, 23, 42, .10);
        border-radius: 1rem;
        margin: .75rem 0;
        padding: .75rem;
        background: rgba(255,255,255,.84);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    }

    .responsive-table td {
        border: 0 !important;
        display: grid;
        grid-template-columns: minmax(8rem, 40%) 1fr;
        gap: .75rem;
        align-items: center;
        padding: .45rem 0 !important;
        word-break: break-word;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 800;
        color: rgba(15, 23, 42, .70);
    }

    .data-table input,
    .data-table select,
    .data-table button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .page-title h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        line-height: 1.05;
    }

    .top-actions form,
    .top-actions button,
    .top-actions select,
    .user-pill {
        flex: 0 0 auto;
    }

    .btn,
    .primary,
    .danger,
    .ghost,
    button {
        width: 100%;
        justify-content: center;
        touch-action: manipulation;
    }

    .top-actions .inline-form button,
    .top-actions .flag,
    .top-actions .small {
        width: auto;
        min-width: var(--pf-touch-target);
    }

    .responsive-table td {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .worktime-buttons {
        grid-template-columns: 1fr !important;
    }

    body {
        padding-bottom: calc(0.75rem + var(--pf-mobile-safe-bottom));
    }
}

/* ==========================================================================
   DSGVO-LÖSCHUNG: MODUL-AUSWAHL
   Funktion:
   Diese Styles optimieren die neue getrennte Modulauswahl für automatische
   und manuelle Löschung. Die Karten sind touch-freundlich, responsiv und
   verhindern abgeschnittene Inhalte auf Smartphones.
   Sicherheit:
   CSS selbst löscht keine Daten. Die serverseitige Prüfung bleibt in PHP.
   Die visuelle Darstellung hilft aber, Fehlbedienungen zu vermeiden.
   ========================================================================== */
.compact-check {
    align-items: center;
    gap: .55rem;
    margin: 0;
    min-height: 2.5rem;
}

.module-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .75rem;
    width: 100%;
}

.module-choice-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    min-height: 4.25rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(160, 20, 71, .18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 .35rem 1rem rgba(40, 20, 30, .04);
    cursor: pointer;
    touch-action: manipulation;
}

.module-choice-card:hover,
.module-choice-card:focus-within {
    border-color: rgba(160, 20, 71, .42);
    box-shadow: 0 .65rem 1.25rem rgba(160, 20, 71, .08);
}

.module-choice-card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
}

.module-choice-card span {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.module-choice-card strong {
    font-size: 1rem;
    line-height: 1.25;
}

.module-choice-card small {
    color: var(--muted, #6f7480);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .module-choice-grid {
        grid-template-columns: 1fr;
    }

    .module-choice-card {
        min-height: 4.75rem;
        padding: 1rem;
    }

    .compact-check {
        min-height: 3rem;
    }
}


/* ============================================================================
   DATEI: /assets/css/app.css
   ABSCHNITT: Arbeitszeit-Screenshot-Schutz
   FUNKTION:
   - Dieser Abschnitt schützt das Modul "Arbeitszeiten Erfassung" visuell gegen
     Drucken, Kopieren, unbemerkte App-Wechsel und Bildschirmfreigabe über Browser.
   - Wichtig: Betriebssystem-Screenshots auf iPad/iPhone/Android/Windows können in
     einer normalen Webseite technisch nicht absolut blockiert werden. Deshalb wird
     ein sichtbares Wasserzeichen eingeblendet, damit unerlaubte Screenshots nicht
     neutral/verwertbar sind.
   SICHERHEIT:
   - Es werden keine Klartextdaten in CSS geschrieben.
   - Das Wasserzeichen wird zur Laufzeit aus einem technischen Guard-Wert erzeugt.
   - Beim Drucken werden geschützte Inhalte vollständig ausgeblendet.
   ============================================================================ */
.screen-protected-area{position:relative;isolation:isolate}.screen-protection-banner{display:grid;gap:4px;margin:0 0 16px;padding:14px 16px;border:1px solid rgba(180,35,24,.24);border-radius:18px;background:linear-gradient(135deg,#fff1f0,#fff8fb);color:#7a271a;box-shadow:var(--soft)}.screen-protection-banner strong{font-size:16px}.screen-protection-banner span{font-size:14px;line-height:1.45}.screen-protected-content{transition:filter .16s ease, opacity .16s ease}.screen-watermark-layer{position:fixed;inset:0;z-index:9998;pointer-events:none;display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));grid-auto-rows:110px;overflow:hidden;opacity:.105;mix-blend-mode:multiply}.screen-watermark-layer span{display:flex;align-items:center;justify-content:center;transform:rotate(-24deg);font-size:13px;font-weight:900;letter-spacing:.06em;color:#7f1d1d;text-transform:uppercase;white-space:nowrap;user-select:none}.screen-redaction-shield{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(33,21,26,.94);color:#fff;text-align:center}.screen-redaction-shield[aria-hidden="false"]{display:flex}.screen-redaction-box{max-width:560px;border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:24px;background:rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.35)}.screen-redaction-box strong{display:block;font-size:24px;margin-bottom:10px}.screen-redaction-box p{margin:0;color:rgba(255,255,255,.84);line-height:1.5}.screen-redacted .screen-protected-content{filter:blur(18px);opacity:.18}.screen-redacted .screen-watermark-layer{opacity:.22}.worktime-secure .no-screen-capture,.worktime-secure .screen-protected-area{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.worktime-secure input,.worktime-secure textarea,.worktime-secure select{-webkit-user-select:text;user-select:text}.worktime-secure .screen-protected-area img{-webkit-user-drag:none;user-drag:none}@media(max-width:760px){.screen-watermark-layer{grid-template-columns:repeat(2,minmax(160px,1fr));grid-auto-rows:95px;opacity:.13}.screen-watermark-layer span{font-size:11px}.screen-protection-banner{border-radius:16px;padding:12px}.screen-redaction-box strong{font-size:20px}}@media print{body.worktime-secure *{visibility:hidden!important}.screen-redaction-shield,.screen-redaction-shield *{visibility:visible!important}.screen-redaction-shield{display:flex!important;background:#fff!important;color:#000!important}.screen-redaction-box{border:2px solid #000!important;background:#fff!important;color:#000!important;box-shadow:none!important}.screen-redaction-box p{color:#000!important}}

/* ========================================================================== 
   PHASE 8: Mobile-Optimierung, Wartungs-Tabs, Arbeitszeit-Notizen
   --------------------------------------------------------------------------
   FUNKTION:
   - Optimiert Tabellen und Formulare für Smartphones.
   - Ergänzt Tabs für das Wartungsmodul.
   - Verbessert Passwort-Hinweise und Arbeitszeitnotizen.

   SICHERHEIT:
   - Reine Darstellung; keine Sicherheitsentscheidung wird nur im CSS getroffen.
   - Server prüft Rechte, CSRF, Rollen, Kategorien und Eingaben weiterhin eigenständig.
   - Mobile Darstellung verhindert abgeschnittene Inhalte und reduziert Bedienfehler.
   ========================================================================== */

.security-hint{
  border:1px solid rgba(138,21,56,.18);
  background:rgba(138,21,56,.055);
  border-radius:16px;
  padding:12px 14px;
  color:#4b2532;
  line-height:1.45;
}

.password-policy-card{max-width:760px;margin-inline:auto;}
.password-policy-hint{margin:16px 0 18px;}
.password-policy-list{margin:10px 0 8px 20px;padding:0;display:grid;gap:6px;}
.password-policy-list li{padding-left:2px;}

.worktime-note-form textarea{min-height:110px;resize:vertical;}
.worktime-action-form{display:flex;}
.worktime-action-form button{width:100%;min-height:54px;touch-action:manipulation;}

.secure-tabs{
  display:flex;
  gap:10px;
  padding:8px;
  border:1px solid rgba(138,21,56,.12);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  margin:18px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tab-button{
  appearance:none;
  border:1px solid rgba(138,21,56,.16);
  background:#fff;
  color:#24111a;
  border-radius:14px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  min-height:44px;
  box-shadow:0 8px 22px rgba(25,18,20,.04);
  touch-action:manipulation;
}
.tab-button.active,
.tab-button[aria-selected="true"]{
  background:linear-gradient(135deg,#9f1648,#c21f5a);
  color:#fff;
  border-color:transparent;
}
.tab-panel[hidden]{display:none!important;}
.sub-section-head{margin:8px 0 14px;align-items:center;}
.maintenance-page .table-wrap{margin-top:10px;}
.maintenance-page td[data-label="Info"]{max-width:360px;}

.mobile-optimized input,
.mobile-optimized select,
.mobile-optimized textarea,
.mobile-optimized button{
  font-size:16px; /* verhindert iOS-Zoom beim Fokus */
}
.mobile-optimized .card{overflow:hidden;}
.mobile-optimized .form-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}

@media (max-width: 820px){
  body.app-page{background:#f7f1ed;}
  .container{width:min(100% - 20px, 1180px);padding:12px 0 92px;margin-inline:auto;}
  .topbar{position:sticky;top:0;z-index:50;align-items:flex-start;gap:8px;padding:8px 10px;background:rgba(255,250,247,.94);backdrop-filter:blur(14px);}
  .brand{min-width:100%;font-size:.95rem;}
  .top-actions{width:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .top-actions .inline-form,.top-actions form{flex:0 0 auto;}
  .top-actions button,.top-actions select,.user-pill{min-height:38px;font-size:.84rem;}
  .page-title{margin:18px 0 12px;}
  .page-title h1{font-size:clamp(1.65rem,7vw,2.4rem);line-height:1.05;}
  .page-title p{font-size:.95rem;line-height:1.45;}
  .card,.auth-card{border-radius:22px;padding:16px;box-shadow:0 14px 38px rgba(30,20,20,.08);}
  .row.between{align-items:stretch;}
  .row.gap{gap:8px;}
  .row{flex-wrap:wrap;}
  .btn,.primary,.danger,.ghost,button{min-height:44px;}
  .worktime-buttons{grid-template-columns:1fr 1fr;gap:10px;}
  .worktime-buttons button{min-height:64px;border-radius:18px;font-size:1rem;}
  .screen-protection-banner{align-items:flex-start;gap:8px;line-height:1.35;}
  .modal{width:min(94vw,720px);max-height:86dvh;border-radius:22px;padding:16px;}
  .modal-form{max-height:70dvh;overflow:auto;padding-right:2px;}
}

@media (max-width: 680px){
  .mobile-card-table{overflow:visible;}
  .mobile-card-table table,
  .mobile-card-table thead,
  .mobile-card-table tbody,
  .mobile-card-table th,
  .mobile-card-table td,
  .mobile-card-table tr{display:block;width:100%;}
  .mobile-card-table thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .mobile-card-table tbody{display:grid;gap:12px;}
  .mobile-card-table tr{
    border:1px solid rgba(138,21,56,.12);
    border-radius:18px;
    background:#fff;
    padding:10px;
    box-shadow:0 8px 24px rgba(30,20,20,.055);
  }
  .mobile-card-table td{
    display:grid;
    grid-template-columns:minmax(105px,38%) 1fr;
    gap:10px;
    align-items:start;
    border:0!important;
    padding:8px 4px!important;
    overflow-wrap:anywhere;
  }
  .mobile-card-table td::before{
    content:attr(data-label);
    font-weight:900;
    color:#7a2445;
  }
  .mobile-card-table td[colspan]::before{content:"";display:none;}
  .mobile-card-table td[colspan]{display:block;text-align:center;}
  .form-grid{grid-template-columns:1fr!important;}
  .tab-switcher{gap:8px;}
  .tab-button{flex:1 0 auto;text-align:center;padding:12px 14px;}
  .section-head,.sub-section-head{display:grid;gap:10px;}
  .section-head .primary,.sub-section-head .primary{width:100%;}
}

@media (max-width: 420px){
  .container{width:min(100% - 14px, 1180px);}
  .card,.auth-card{padding:14px;border-radius:20px;}
  .worktime-buttons{grid-template-columns:1fr;}
  .mobile-card-table td{grid-template-columns:1fr;gap:4px;}
  .mobile-card-table td::before{font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;}
}

/* DATEI: /assets/css/app.css – Zusatz: übersetzbare sichere Dateiauswahl
   FUNKTION:
   Verhindert, dass browsernative Texte wie „Durchsuchen“ oder „Keine Datei ausgewählt“
   in einer falschen Sprache sichtbar bleiben.
   SICHERHEIT:
   Das native File-Input bleibt technisch aktiv und wird nur optisch versteckt. Es werden
   keine Dateiinhalte im Browser ausgelesen und keine externen Dienste verwendet. */
.secure-file-field{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem;
    padding:.35rem 0;
}
.secure-file-field .form-label{
    width:100%;
    font-weight:800;
    color:var(--text);
}
.file-picker-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:.75rem 1rem;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--accent);
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(138,21,56,.06);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.file-picker-button:hover,
.file-picker-button:focus-within{
    transform:translateY(-1px);
    border-color:rgba(138,21,56,.35);
    box-shadow:0 12px 24px rgba(138,21,56,.12);
}
.secure-file-input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}
.file-picker-name{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:.65rem .85rem;
    border:1px dashed var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.72);
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width: 680px){
    .secure-file-field{align-items:stretch;}
    .file-picker-button,.file-picker-name{width:100%;}
}

/* DATEI: /assets/css/app.css – Phase 14 Upload-Fix
   FUNKTION:
   Macht die benutzerdefinierte Datei-Auswahl zuverlässig anklickbar.
   Der sichtbare Button bleibt übersetzbar; das native Datei-Input liegt unsichtbar
   über dem Button und öffnet dadurch auf Desktop, Android, iPad und iPhone den
   systemeigenen Datei-Dialog.

   SICHERHEIT:
   - Das native <input type="file"> bleibt vollständig erhalten.
   - Es werden keine Dateiinhalte im Browser gelesen.
   - Es wird keine Vorschau erzeugt.
   - Es werden keine Dateien an externe Dienste übertragen.
   - Die echte Sicherheitsprüfung erfolgt weiterhin serverseitig im Support-Backend:
     Dateianzahl, Dateigröße, MIME-Type, Dateiname und verschlüsselte Speicherung. */
.file-picker-button{
    position:relative;
    overflow:hidden;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.file-picker-button [data-file-button-label]{
    position:relative;
    z-index:1;
    pointer-events:none;
}

.secure-file-input{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    cursor:pointer !important;
    overflow:hidden !important;
    clip:auto !important;
    white-space:normal !important;
    border:0 !important;
    z-index:2 !important;
}

.secure-file-input:focus + [data-file-button-label],
.file-picker-button:focus-within{
    outline:3px solid rgba(138,21,56,.18);
    outline-offset:3px;
}