:root{
  /* Baumdienst-Gerber-CI.
     Schwarz ist die Aktionsfarbe. Logo-Grün steht für Marke und Anmeldung.
     Zierde-Grün erreicht auf Weiß nur ~1,9:1 und ist deshalb ausschließlich
     Dekoration – nie Text, Icon oder alleiniges Signal. */
  --ink-aktion:#0b0b0b; --ink-aktion-hover:#2c2c2a;
  --logo-gruen:#009640; --zierde-gruen:#A2C617;

  /* Aliase: die bestehenden Namen bleiben, damit .btn-primary, .input,
     .toast & Co. ohne JS-Änderung mitziehen. */
  --primary:var(--ink-aktion); --primary-d:var(--ink-aktion-hover); --primary-dd:#000000;
  --navy:#0b0b0b; --navy2:#0b0b0b; --brand-blue:var(--logo-gruen);
  --ink:#0B0B0B; --muted:#52514E; --fine:#898781; --fine2:#9A9993;
  --bg:#F6F6F3; --card:#FFFFFF; --line:#E6E5E1; --line2:#D3D2CC; --tint:#F1F1EE;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
  /* iOS-Gummiband: sonst löst sich beim Überziehen die ganze Fläche vom Rand. */
  overscroll-behavior:none;
}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',monospace;}
input,textarea,select,button{font-family:inherit;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(11,11,11,.14);}
::placeholder{color:#A3A29C;}
button{font-family:inherit;}

@keyframes dvfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dvsheet{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* schmale, ausgeblendete Scrollbalken */
.dvscroll::-webkit-scrollbar{width:0;height:0}
.dvscroll{scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}

/* App-Rahmen: Tablet-Hochformat zentriert, auf kleinen Screens vollflächig */
.dv-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 700px at 50% -10%, #F0EFEB, #E0DFD9);}
.dv-frame{position:relative;width:824px;max-width:100vw;height:1098px;max-height:100vh;background:var(--bg);overflow:hidden;border-radius:0;}
@media(min-width:880px) and (min-height:1140px){
  .dv-shell{padding:30px;}
  .dv-frame{border-radius:28px;box-shadow:0 40px 80px -30px rgba(11,11,11,.45);}
}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:dvfade .32s ease;}

/* gemeinsame Bausteine */
.tap{cursor:pointer;}
.row{display:flex;}
.col{display:flex;flex-direction:column;}
.field-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:9px;}
.input{width:100%;height:54px;border:1.5px solid var(--line2);border-radius:12px;padding:0 15px;font-size:16px;color:var(--ink);background:#fff;}
.textarea{width:100%;min-height:110px;border:1.5px solid var(--line2);border-radius:12px;padding:14px 15px;font-size:16px;resize:none;line-height:1.5;}
.btn-primary{border:none;border-radius:14px;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 12px 24px -12px rgba(11,11,11,.7);}
.btn-secondary{border:1.5px solid var(--line2);border-radius:14px;background:#fff;color:var(--primary);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;}
.toast{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);background:var(--navy2);color:#fff;padding:14px 22px;border-radius:13px;font-size:16px;font-weight:500;box-shadow:0 14px 30px -10px rgba(11,11,11,.5);z-index:50;display:flex;align-items:center;gap:10px;animation:dvsheet .3s ease;white-space:nowrap;}
.qrbox svg{display:block;width:120px;height:120px;}
.qrbox.lg svg{width:150px;height:150px;}
img.photo{object-fit:cover;}

/* Brandzeile und Protokollpunkt gehören nur in die Desktop-Seitenleiste.
   In der Bottom-Nav wären sie Punkt sechs und sieben – die fünf vorhandenen
   sind auf einem 320-px-Handy bereits das engste Element der App.
   Das !important ist nötig, weil beide Elemente – wie die ganze Nav – ihr
   display aus einem Inline-Style beziehen. */
.navbrand,.navlog{display:none!important;}

/* Der Filter-Umschalter im Protokoll ist reine Handy-Bedienung. */
.dv-logtoggle{display:none;}


/* ============================================================
   1) Handy und schmale Fenster: der Rahmen füllt die Fläche.
   Die Höhenbedingung fängt zusätzlich den häufigen Laptop-Fall ab,
   bei dem von den 1098 px sonst unten etwas abgeschnitten wird.
   ============================================================ */
@media (max-width:900px), (max-height:1140px){
  .dv-shell{min-height:100dvh;padding:0;align-items:stretch;justify-content:stretch;background:var(--bg);}
  .dv-frame{
    width:100vw;max-width:100vw;
    height:100vh;            /* Rückfall für ältere iOS-Safari */
    height:100dvh;
    max-height:none;
    border-radius:0;box-shadow:none;
  }
}

/* ============================================================
   2) Touchgeräte bis 900 px: Sicherheitsbereiche, Eingabegrößen,
   Bruchstellen der einzelnen Screens.
   ============================================================ */
@media (max-width:900px){
  /* Unter 16 px zoomt iOS beim Fokus die gesamte Fläche und kommt
     nicht wieder heraus. Die Inline-Größen im JS werden überstimmt. */
  input,textarea,select{font-size:16px!important;}

  /* Home-Leiste des iPhones: ohne das liegt die Nav darunter. */
  .dv-nav{
    height:calc(88px + env(safe-area-inset-bottom))!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    align-items:flex-start!important;
    padding-top:6px!important;
  }
  .dv-frame.with-nav .dv-body{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important;}
  .dv-frame.with-nav .toast{bottom:calc(104px + env(safe-area-inset-bottom));}
  .dv-frame:not(.with-nav) .dv-body{padding-bottom:calc(40px + env(safe-area-inset-bottom))!important;}
  .dv-formfoot{padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;}

  /* KPI-Raster bricht selbst um, statt auf zwei Spalten zu beharren. */
  .dv-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;}

  .toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center;}

  /* Protokoll: Filter eingeklappt, sonst bleibt kaum Platz für die Einträge. */
  .dv-logtoggle{display:flex!important;}
  .dv-logf-wrap:not(.offen){display:none;}
  .dv-logf-wrap.offen{margin-top:2px;}
}

/* Verlaufs-Kante an den waagerecht scrollenden Chip- und Tab-Leisten:
   deren Scrollbalken sind ausgeblendet, ohne Hinweis wirken sie zu Ende. */
@media (max-width:640px){
  .dv-chiprow{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
}

/* ============================================================
   3) Handyformat bis 560 px: mehrspaltige Zeilen werden gestapelt.
   ============================================================ */
@media (max-width:560px){
  .dv-2col{flex-direction:column!important;align-items:stretch!important;}
  .dv-2col > *{width:100%!important;}
  .dv-due{flex-direction:row!important;}   /* die zwei Zählkacheln bleiben nebeneinander */
  .dv-due > *{width:auto!important;}

  /* Formular-Hero: 42-px-Kennung und Erklärtext untereinander. */
  .dv-hero{flex-wrap:wrap!important;gap:8px!important;}
  .dv-herocode{font-size:34px!important;}

  /* Detailkopf: der 96-px-QR steht nicht mehr neben dem Titel. */
  .dv-detailhead{flex-direction:column!important;}
  .dv-qrbox{flex-direction:row!important;align-self:stretch;align-items:center!important;gap:14px!important;}

  /* Listenzeile: Status, Ampel und Fälligkeit rutschen unter die Bezeichnung. */
  .dv-listrow{flex-wrap:wrap!important;gap:12px!important;}
  .dv-listmeta{
    flex-direction:row!important;width:100%;flex:1 1 100%!important;
    align-items:center!important;justify-content:space-between!important;
    gap:10px!important;border-top:1px solid var(--line);padding-top:10px;
  }
  .dv-thumb{width:52px!important;height:52px!important;}
  .dv-listcode{font-size:16px!important;padding:9px 11px!important;}

  .dv-grid2{grid-template-columns:1fr!important;}
  .dv-photogrid{grid-template-columns:1fr 1fr!important;}
  .dv-simrow{flex-wrap:wrap!important;}
  .dv-simpin{width:auto!important;flex:1 1 110px!important;}

  /* Etiketten-Modal: 40 px Außenabstand lassen bei 375 px zu wenig übrig. */
  .dv-modalwrap{padding:16px!important;align-items:flex-start!important;padding-top:24px!important;}
  .dv-modalcard{padding:20px!important;}
  .dv-labelcode{font-size:44px!important;}

  .dv-scancard{padding:18px 16px 20px!important;}
}

/* ============================================================
   4) Sehr schmal (iPhone SE, 320 px): die fünf Nav-Punkte und die
   Kopfzeile brauchen jeden Pixel.
   ============================================================ */
@media (max-width:390px){
  .dv-head{padding-left:16px!important;padding-right:16px!important;}
  .dv-body{padding-left:16px!important;padding-right:16px!important;}
  .dv-pad{padding-left:16px!important;padding-right:16px!important;}
  /* Kopfzeile: Name und Wortlaut weichen, die Symbole bleiben. Bei 320 px
     zählt jeder Pixel – Bildmarke, Schriftgrad und Abstände schrumpfen mit. */
  .dv-username{display:none;}
  .dv-logoutlabel{display:none;}
  .dv-logout{width:40px;padding:0!important;justify-content:center;}
  .dv-apphead{padding-left:12px!important;padding-right:12px!important;gap:8px!important;}
  .dv-apphead > div:last-child{gap:8px!important;}
  .dv-applogo{width:34px!important;height:34px!important;}
  .dv-apptitle{font-size:17px!important;}

  /* „automatisch · einmalig“ steht als Satz schon im Text darunter. */
  .dv-heronote{display:none;}

  .dv-nav{padding-left:2px!important;padding-right:2px!important;justify-content:space-between!important;}
  .dv-nav .navbtn{width:auto!important;flex:1 1 0!important;min-width:0!important;gap:4px!important;}
  .dv-nav .navlabel{font-size:11px!important;}
  .dv-nav .navcta{margin-top:-10px!important;}
  .dv-nav .navcta-badge{width:50px!important;height:50px!important;border-radius:16px!important;}

  .dv-compbtns{flex-wrap:wrap;}
  .dv-compbtns > *{flex:1 1 calc(50% - 4px)!important;}
}

/* ============================================================
   5) Desktop ab 1100 px: aus der Bottom-Nav wird eine Seitenleiste,
   der Inhalt bekommt eine zentrierte Höchstbreite und mehrspaltige
   Raster. Diese Regeln stehen bewusst zuletzt – bei 1440×900 greift
   auch Block 1, und die Vollflächigkeit ist dort gerade richtig.
   ============================================================ */
@media (min-width:1100px){
  .dv-shell{display:block;min-height:100dvh;padding:0;background:var(--bg);}
  .dv-frame{
    width:100vw;max-width:100vw;height:100dvh;max-height:none;
    border-radius:0;box-shadow:none;
  }

  /* Inhalt zentriert, aber nie enger als 32 px Rand. --dv-max setzt der
     jeweilige Screen (Formular schmaler als die Listen). */
  .dv-head,.dv-body,.dv-pad{
    padding-left:max(32px, calc((100% - var(--dv-max,1320px)) / 2))!important;
    padding-right:max(32px, calc((100% - var(--dv-max,1320px)) / 2))!important;
  }
  .dv-narrow{--dv-max:940px;}

  /* --- Seitenleiste --- */
  .dv-frame.with-nav .screen{left:250px;}
  .dv-frame.with-nav .toast{left:calc(50% + 125px);}
  .dv-nav{
    top:0!important;bottom:0!important;right:auto!important;
    width:250px!important;height:auto!important;
    flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:4px;
    padding:22px 14px!important;
    border-top:none!important;border-right:1px solid var(--line)!important;
    box-shadow:none!important;
  }
  .navbrand{
    display:flex!important;align-items:center;gap:10px;order:-2;
    padding:0 8px 18px;margin-bottom:6px;border-bottom:1px solid var(--line);
  }
  .navbrand img{width:34px;height:34px;object-fit:contain;flex:none;}
  .navbrand span{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
  .navlog{display:flex!important;}

  .dv-nav .navbtn{
    width:100%!important;height:46px;margin-top:0!important;
    flex-direction:row!important;justify-content:flex-start!important;
    align-items:center!important;gap:13px!important;
    padding:0 12px;border-radius:11px;
  }
  .dv-nav .navbtn:hover{background:var(--tint);}
  .dv-nav .navbtn[data-on="1"]{background:var(--tint);color:var(--ink)!important;}
  .dv-nav .navlabel{font-size:15px!important;}
  .dv-nav .navmark{display:none;}

  /* Der Erfassen-Knopf wird zur vollbreiten Aktionsschaltfläche ganz oben. */
  .dv-nav .navcta{
    order:-1;height:50px;margin-bottom:10px!important;
    background:var(--primary)!important;
    box-shadow:0 12px 22px -14px rgba(11,11,11,.8);
  }
  .dv-nav .navcta:hover{background:var(--primary-d)!important;}
  .dv-nav .navcta-badge{
    width:28px!important;height:28px!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;
  }
  .dv-nav .navcta .navlabel{color:#fff!important;font-weight:600;}

  /* Die Wortmarke steht am Desktop schon in der Seitenleiste – im Kopf
     bleibt die Zeile als reine Werkzeugleiste. */
  .dv-apphead > div:first-child{display:none!important;}
  .dv-apphead{justify-content:flex-end!important;}

  /* --- mehrspaltige Raster --- */
  .dv-kpis{grid-template-columns:repeat(4,1fr)!important;}
  .dv-cardlist{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(430px,1fr))!important;
    align-content:start;
  }
  .dv-grid2{grid-template-columns:repeat(3,1fr)!important;}
  .dv-detailhead{max-width:none;}
  .dv-scancard{max-width:720px;margin:0 auto;border-radius:0 0 26px 26px;}

  /* Zeiger statt Fingerspitze: Hover-Rückmeldung lohnt sich hier. */
  .tap{transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;}
  .tap:hover{border-color:var(--line2);box-shadow:0 10px 26px -18px rgba(11,11,11,.45);}
  .dv-cardlist > .tap:hover{transform:translateY(-1px);}
}

@media (min-width:1500px){
  .dv-cardlist{grid-template-columns:repeat(auto-fill,minmax(460px,1fr))!important;}
}