/* PEP V8.5 – mobile Arbeitsoberfläche. Ausschließlich Darstellung und Bedienhierarchie. */
:root{
  --pep-mobile-blue:#1672d4;
  --pep-mobile-bar:calc(66px + env(safe-area-inset-bottom));
  --pep-mobile-radius:14px;
}

/* Notizpapier bleibt auch am Desktop hochauflösend, ruhig und sauber. */
.pep-note-canvas-wrap{
  background-color:#fffdf7;
  background-image:radial-gradient(circle,rgba(150,143,122,.42) .62px,transparent .72px);
  background-size:24px 24px;
  background-position:12px 12px;
}

.pep-mobile-only{display:none}
/* Das mobile Aufklappsymbol wird am Desktop nicht in den LV-Zeilen dargestellt. */
.pep-measure-expand{display:none}

@media (max-width:720px){
  html{background:#f4f6f8}
  body{padding-bottom:var(--pep-mobile-bar);background:#f4f6f8}
  header{top:0;box-shadow:0 1px 0 rgba(16,44,85,.05)}
  header .top{
    min-height:58px;padding:7px 12px;display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    grid-template-areas:"logo brand user";gap:9px;
  }
  .top>.logo{grid-area:logo;width:38px;height:38px;border-radius:11px}
  .top>.brand{grid-area:brand;min-width:0;line-height:1.1}
  .brand .pep-title{font-size:14px}.brand .pep-sub{display:none}.brand .pep-version{display:block;font-size:8.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top>.user{grid-area:user;display:flex!important;align-items:center;max-width:104px;min-height:36px;padding:3px 7px;border-radius:18px;background:#fff}
  .top>.user select{width:88px;min-width:0;border:0;background:transparent;color:var(--navy);font-size:11px;text-overflow:ellipsis}
  .top>.user span{display:none}

  /* Vier feste Ziele und ein Mehr-Menü: dieselbe ungekürzte 48-Pixel-Kachel. */
  .top>.mainnav{
    position:fixed;z-index:90;left:0;right:0;bottom:0;width:100%;height:var(--pep-mobile-bar);
    display:flex;align-items:center;justify-content:space-around;gap:0;padding:5px 12px env(safe-area-inset-bottom);
    overflow:hidden;background:rgba(255,255,255,.97);border-top:1px solid #dce2e8;
    box-shadow:0 -8px 24px rgba(16,44,85,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .mainnav button{flex:0 0 48px;min-width:48px;min-height:48px;padding:0!important;border-radius:12px!important}
  .mainnav button.on{background:#eef6ff!important;color:var(--pep-mobile-blue)!important}
  .mainnav .navico,.mainnav .navico svg{display:none!important}

  .page{padding:12px 10px 24px}
  .hero{margin-bottom:12px}.hero h1{font-size:24px;letter-spacing:-.02em}.hero .muted{font-size:11px;line-height:1.4;margin-top:3px}
  .panel,.work,.timepanel{border-radius:var(--pep-mobile-radius);box-shadow:0 2px 10px rgba(16,44,85,.035)}
  .btn{border-radius:10px;font-size:12px}.btn.primary{background:var(--navy)}
  .help-fab{top:67px;right:10px;width:36px;height:36px}

  /* Projektkopf und Unterbereiche bleiben kompakt und mit dem Daumen erreichbar. */
  #order.work{border:0;background:transparent;overflow:visible}
  #order>.ph{padding:8px 2px 10px;border:0;align-items:flex-start}
  #order>.ph h2{font-size:15px;line-height:1.3;max-width:68%}
  #order>.ph .btn{min-height:38px;padding:6px 8px}
  #order>.tabs{
    position:sticky;top:58px;z-index:24;margin:0 -10px 8px;padding:7px 10px;
    background:rgba(244,246,248,.97);border:0;border-bottom:1px solid #e1e6eb;backdrop-filter:blur(14px);
  }
  #order>.tabs button{flex:0 0 auto;min-height:38px;padding:7px 11px;font-size:10px}
  #order>.sub{padding:4px 0 10px}

  /* Aufmaß: klare Ebenen – Projekt, Bereich, Suche/Filter, LV, Position. */
  #measure>.hero{display:none}
  .pep-mobile-only{display:flex}
  .pep-mobile-measure-head{align-items:center;justify-content:space-between;gap:8px;margin:2px 0 9px}
  .pep-mobile-measure-title{min-width:0}
  .pep-mobile-measure-title b{display:block;color:var(--navy);font-size:19px;letter-spacing:-.02em}
  .pep-mobile-measure-title span{display:block;overflow:hidden;color:var(--muted);font-size:10px;white-space:nowrap;text-overflow:ellipsis}
  .pep-icon-button{position:relative;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid #ced7df;border-radius:12px;background:#fff;color:var(--navy)}
  .pep-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .pep-mobile-more-wrap{position:relative}
  .pep-mobile-more-menu{display:none;position:absolute;z-index:40;right:0;top:50px;width:min(285px,calc(100vw - 22px));padding:7px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 18px 42px rgba(16,44,85,.18)}
  .pep-mobile-more-menu.on{display:grid}
  .pep-mobile-more-menu button{min-height:46px;border:0;border-radius:9px;background:transparent;padding:10px 11px;text-align:left;color:var(--navy);font-size:12px;font-weight:700}
  .pep-mobile-more-menu button+button{border-top:1px solid #edf0f3}
  #measure>.subtabs{position:sticky;top:58px;z-index:23;margin:0 -10px 8px;padding:6px 10px;background:rgba(244,246,248,.97);border-bottom:1px solid #e1e6eb;backdrop-filter:blur(14px)}
  #measure>.subtabs button{flex:1;min-height:40px;font-size:11px}
  #measureLv>.officebar,#measureLv>#officeTools{display:none!important}
  #serviceCollapse{margin:8px 0 9px!important}
  #serviceCollapse>.chead{width:100%!important;min-height:44px!important;justify-content:space-between;border-color:#cad6e0!important;background:#fff!important;color:var(--navy)!important}
  .pep-measure-controls{position:sticky!important;top:105px!important;margin:0 -1px 4px!important;padding:7px 1px!important;background:rgba(244,246,248,.97)!important}
  .pep-measure-controls .search{height:46px!important;border-radius:12px!important;padding-left:13px!important;background:#fff!important}
  .pep-filter-button,.pep-measure-controls .modern-fold{border-radius:12px!important;background:#fff!important}
  .pep-active-filters{min-height:0;margin:5px 0 7px}.pep-active-filters:empty{display:none}
  .pep-measure-heading{margin:8px 2px 5px}.pep-measure-heading h2{font-size:14px}
  #measureLv .lvgroup{margin:8px 0;border-radius:14px;border-color:#d7e0e7;box-shadow:0 2px 8px rgba(16,44,85,.035)}
  #measureLv .gh{min-height:58px;padding:10px 11px;background:#f0f3f6}
  #measureLv .gh .gleft{min-width:0}.gh .gleft>span:last-child{min-width:0}
  #measureLv .gh b{display:block;font-size:12px;line-height:1.3;color:#0875d1}
  #measureLv .gh .muted{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #measureLv .gpos{padding:6px;background:#edf1f4}
  #measureLv .lvrow{position:relative;display:grid;grid-template-columns:1fr!important;gap:0!important;margin:0 0 7px;padding:0!important;border:1px solid #dbe3e9;border-radius:13px;background:#fff;overflow:hidden;box-shadow:none}
  #measureLv .lvrow:last-child{margin-bottom:0}
  #measureLv .pep-measure-position-no{grid-column:1!important;padding:10px 38px 1px 11px!important;color:#607181!important;font-size:9px!important;font-weight:800;letter-spacing:.03em}
  #measureLv .pep-measure-description{grid-column:1!important;padding:2px 38px 7px 11px!important}
  #measureLv .pep-measure-description>b{display:block;font-size:13px!important;line-height:1.32;color:var(--navy)}
  #measureLv .lv-preview{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0!important;font-size:10.5px!important;line-height:1.42!important;color:#637282}
  #measureLv .pep-measure-description>.tiny{display:none}
  .pep-measure-expand{position:absolute;right:7px;top:9px;width:32px;height:32px;border:0;border-radius:9px;background:#f1f5f8;color:var(--navy);display:grid;place-items:center}
  .pep-measure-expand svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .16s}
  .pep-measure-expanded .pep-measure-expand svg{transform:rotate(180deg)}
  #measureLv .pep-mobile-measure-metrics{grid-column:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0;padding:7px 8px 9px;border-top:1px solid #edf0f3;background:#fbfcfd}
  #measureLv .pep-mobile-measure-metrics>span{padding:6px 7px!important;border:1px solid #dce4ea!important;border-radius:9px!important;background:#fff!important}
  #measureLv .pep-mobile-measure-metrics small{font-size:8px!important;letter-spacing:.035em}
  #measureLv .pep-mobile-measure-metrics b{font-size:11px!important;margin-top:2px}
  #measureLv .pep-measure-entry-cell{grid-column:1!important;display:none!important;padding:10px!important;border-top:1px solid #e2e8ed!important;background:#fff}
  #measureLv .pep-measure-expanded .pep-measure-entry-cell{display:grid!important}
  #measureLv .addline{grid-template-columns:minmax(0,1fr) 88px!important;gap:7px!important}
  #measureLv .addline input{height:46px!important;font-size:16px!important}
  #measureLv .addline .btn{grid-column:1/-1!important;width:100%;height:46px!important}
  #measureLv .pep-measure-unit,.pep-redundant-place-action{display:none!important}
  #measureLv .measure .mi{min-height:46px;padding:8px 9px;border-radius:9px;font-size:11px}

  /* Zeiterfassung: der heutige Eintrag ist die primäre mobile Aufgabe. */
  #time .timelayout{display:flex;flex-direction:column;gap:0}
  #time .timelayout>section{display:contents}
  #time .timelayout>section>.timepanel:first-child{order:1}
  #time .timelayout>aside{order:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #time .timelayout>aside .timepanel{margin:0}
  #time .timelayout>aside .timepanel:nth-child(2),#time .timelayout>aside .timepanel:nth-child(3){display:none}
  #time .timelayout>section>.timepanel:nth-child(2){order:3;margin-top:10px}
  #time .timepanel>.ph{padding:12px 13px}.timepanel>.ph h2{font-size:16px}
  #time .entry{padding:11px}
  #time .topline{gap:9px}.daybuttons{grid-template-columns:repeat(3,1fr)!important;gap:5px}.daybuttons button{min-height:44px;padding:8px 5px}
  .pep-time-yesterday{margin:2px 0 11px;border-radius:12px;background:#eef7ff}
  .pep-time-yesterday-summary{max-width:40%;line-height:1.3}
  .pep-time-entry{margin-bottom:10px;padding:12px 10px;border-radius:14px}
  .pep-time-entry-head{position:static!important;margin:-2px 0 8px!important;padding:0 0 8px!important;background:transparent!important}
  .pep-time-projects{gap:6px;margin:7px 0 10px}.pep-time-project{padding:9px 7px;min-height:46px;border-radius:10px}
  .pep-time-range-summary{margin:17px 0 0}.pep-dual-range{margin:0 22px;height:76px}.pep-time-ticks{margin-bottom:16px}
  .pep-pause-choice{gap:5px}.pep-pause-choice button{padding:8px 5px}
  #workarea>.bottomactions{margin:0 -11px -11px!important;padding:10px 11px calc(10px + env(safe-area-inset-bottom))!important}
  #workarea>.bottomactions .btn.primary{height:50px}
  #time .summarygrid{grid-template-columns:1fr 1fr}.summarygrid .sum{padding:9px}.summarygrid .sum strong{font-size:17px}
  #time .tablewrap{overflow-x:auto}

  /* Tickets: die bestehende Farbkennung bleibt unübersehbar erhalten. */
  .pep-ticket-card{border-left-width:6px;border-radius:14px}
  .pep-ticket-card.pep-ticket-request{border-left-color:#d7b05a}
  .pep-ticket-card.pep-ticket-project{border-left-color:#4e9fd1}
  .pep-ticket-request .pep-ticket-card-head{background:#fff8e9}
  .pep-ticket-project .pep-ticket-card-head{background:#edf7fd}
  .pep-ticket-kind-dot{width:11px;height:11px}
  .pep-ticket-card-body{padding:12px}.pep-ticket-facts{gap:6px}.pep-ticket-fact{padding:8px}

  /* Notizen: auf dem Handy entweder Übersicht oder Editor, nicht beides gequetscht. */
  #notes>.hero{margin-bottom:9px}
  .pep-notes-shell{display:block;height:auto;min-height:0}
  .pep-notes-sidebar{max-height:none}.pep-notes-list{max-height:none}
  .pep-note-editor{display:none;padding:8px;border-radius:14px}
  #notes.pep-mobile-note-editor-open .pep-notes-sidebar{display:none}
  #notes.pep-mobile-note-editor-open .pep-note-editor{display:flex}
  .pep-note-editor-head{top:58px!important;padding:0 0 7px}.pep-note-title{min-height:48px!important;padding:0 12px!important;font-size:15px}
  .pep-note-toolbar{top:106px!important;display:flex;flex-wrap:nowrap;gap:5px;min-height:54px;padding:4px 0 7px;overflow-x:auto;overflow-y:hidden}
  .pep-note-toolbar-spacer{flex:0 0 4px}.pep-note-tool{width:42px;height:42px;flex-basis:42px;padding:8px}.pep-note-tool svg{width:24px;height:24px}.pep-note-color{width:29px;height:29px;flex-basis:29px}
  .pep-note-canvas-wrap{height:61dvh;min-height:470px;border-radius:12px;background-size:22px 22px;background-position:11px 11px}
  .pep-note-keyboard-text{padding:21px 22px!important;font-size:15px!important;line-height:25px!important}
  .pep-note-bottom{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:9px 0 0}
  .pep-note-down{grid-column:1;width:44px;height:44px}.pep-note-pages{grid-column:2;margin:0;justify-content:flex-end;gap:5px}.pep-note-pages button{width:38px;height:38px}.pep-note-pages span{min-width:70px;font-size:10px}
  .pep-note-save{grid-column:1/-1;width:100%;min-height:48px}
}

@media (min-width:721px) and (max-width:1100px){
  #measureLv .pep-measure-description>.tiny{display:none}
  #measureLv .pep-measure-unit,.pep-redundant-place-action{display:none!important}
  .pep-note-canvas-wrap{background-size:24px 24px}
}