/* =====================================================================
   HANDY-APP-ANSICHT des Partner-Portals (ausgelagert am 24.08.2026)
   Eingebunden in portal.html ueber
     <link id="handy-css" media="(max-width:820px)">
   Das kleine Skript daneben setzt media="all", sobald das Geraet mit dem
   Finger bedient wird. Grund: Auf dem iPhone melden „Desktop-Website
   anfordern" und eine Zoomstufe unter 100 % eine viel zu breite Flaeche,
   dann greift die Groessenabfrage nicht und die App sieht aus wie die
   Website. `navigator.maxTouchPoints` laesst sich davon nicht taeuschen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TEIL 1 · Schmale Raster
   Kopien der Breitenabfragen aus portal.html (bis 980px). Sie stehen hier
   ohne Abfrage, weil die Datei auf dem Handy hart zugeschaltet wird: Meldet
   das Geraet eine zu breite Flaeche, greifen die Originale naemlich nicht
   und der Inhalt bliebe im Schreibtisch-Raster (vier Kacheln nebeneinander).
   Reihenfolge zaehlt: Teil 2 steht danach und gewinnt bei Gleichstand.
   --------------------------------------------------------------------- */
/* aus portal.html: (max-width:900px) */
.d-cols{grid-template-columns:1fr;} .drawer--full .drawer-head{padding:14px 18px;} .drawer--full .drawer-body{padding:16px 18px 60px;}

/* aus portal.html: (max-width:980px) */
.goals-layout{grid-template-columns:minmax(0,1fr);} .goals-side{position:static;}

/* aus portal.html: (max-width:620px) */

/* aus portal.html: (max-width:520px) */
.calc-arrow{display:none;} .calc-step{flex-basis:calc(50% - 6px);}

/* aus portal.html: (max-width:720px) */
.rt-right{align-items:flex-start;}

/* aus portal.html: (max-width:720px) */
.fin-nav .fin-title{min-width:110px;} .sec-head{flex-wrap:wrap;}

/* aus portal.html: (max-width:720px) */
.grid2{grid-template-columns:1fr;}
    .wrap{padding:0 14px;}
    .top .row{padding:0 14px;gap:9px;height:56px;}
    .top img.brand{height:18px;}
    .role-pill{display:none;}
    .top #dd-ansicht{display:none;}
    .whoami .em{display:none;}
    .gsearch{flex:1 1 auto;min-width:0;}
    .gsearch .in{padding-left:30px;font-size:12.5px;}
    .gsearch .in::placeholder{color:transparent;}
    .gs-out{position:fixed;left:10px;right:10px;top:62px;}
    .top .btn{padding:7px 11px;font-size:12.5px;}
    .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;}
    .tabs::-webkit-scrollbar{display:none;}
    .tab{white-space:nowrap;flex:0 0 auto;}
    .kpis{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
    .kpi{padding:13px 14px;}
    .kpi .k-val{font-size:1.45rem;margin-top:6px;}
    .board{flex-direction:column;overflow-x:visible;}
    .col,.col.col-leer{flex:0 0 auto;min-width:0;min-height:auto;}
    .sec-head h2{font-size:1.08rem;}
    /* Nichts darf breiter als der Bildschirm werden, sonst zoomt das Handy die Seite heraus
       und feste Elemente (Sheet, Knöpfe unten) passen nicht mehr. */
    html,body{overflow-x:hidden;max-width:100%;}
    .top .row{min-width:0;overflow:hidden;}

/* aus portal.html: (max-width:480px) */
/* Schmale Handys: nur noch der Avatar. Dahinter liegen Profil, Passwort und Abmelden,
       deshalb darf er hier nicht mehr verschwinden. */
    button.whoami{padding:3px;}
    .me-caret{display:none;}
    .top .row{gap:7px;}

/* aus portal.html: (max-width:720px) */
.me-menu{width:min(236px,calc(100vw - 20px));}

/* aus portal.html: (max-width:640px) */
.hkopf{gap:14px;padding:14px;}
    .hkopf .tagwerk{flex-basis:100%;}
    /* Die beiden Aktionen nebeneinander, jede halbe Breite */
    .hk-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .hk-act .btn{width:100%;}

/* aus portal.html: (max-width:640px) */
.today-row{flex-wrap:wrap;}
    .tr-act{width:100%;padding-left:40px;}
    .tr-act .row-actions{flex-wrap:wrap;}
    /* Kurzfassung: die zwei verbliebenen Knoepfe flacher und naeher an den Text. */
    .today-row.knapp .tr-act{padding-left:38px;}
    .today-row.knapp .tr-act .btn{min-height:34px;padding:5px 14px;}
    .outcomes{grid-template-columns:repeat(3,1fr);}
    .sheet{width:100%;}

/* aus portal.html: (max-width:640px) */
.dc-looks{grid-template-columns:1fr;} .dc-look{flex-direction:column;gap:0;}
    .dc-look img{width:100%;max-width:none;} .dc-look figcaption{padding:14px;}

/* aus portal.html: (max-width:640px) */
.dc-tablewrap{overflow:visible;border:none;border-radius:0;}
    .dc-table{min-width:0;display:block;} .dc-table thead{display:none;}
    .dc-table tbody,.dc-table tr,.dc-table td{display:block;width:100%;}
    .dc-table tr{border:1px solid var(--hairline);border-radius:12px;background:var(--bg);margin-bottom:10px;padding:4px 0;}
    .dc-table td{border-bottom:none;padding:8px 14px;}
    .dc-table td::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px;}
    .dc-table td:first-child::before{display:none;}
    .dc-table td:first-child{padding-top:10px;padding-bottom:2px;}
    .dc-table td:last-child{padding-bottom:12px;}

/* aus portal.html: (max-width:640px) */
.acc-s{display:none;} .acc>summary{padding:13px 14px;} .acc-body{padding:14px;}

/* aus portal.html: (max-width:640px) */
#fb-fab-wrap{right:14px;bottom:14px;gap:6px;}
    #fb-fab,#ql-fab{padding:10px 14px;}
    #fb-fab span,#ql-fab span{font-size:12px;}
    #ql-fab .ql-ic{font-size:14px;}
    #fb-pop{right:14px;left:14px;bottom:66px;width:auto;}

/* aus portal.html: (max-width:720px) */
.team-when{max-width:44%;}.team-flow{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}.team-flow li::after{display:none;}

/* ---------------------------------------------------------------------
   TEIL 2 · App-Schale (Kopf, Leiste unten, Blaetter, Schubladen)
   --------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;}
    body{overscroll-behavior-y:contain;}
    a,button,summary,.tab,.chipbtn,.lead-card,.pl-item{-webkit-tap-highlight-color:transparent;}

    /* ---------- Kopfleiste ---------- */
    .top .row{height:56px;gap:8px;padding:0 12px;}
    /* Feste Groesse, damit der Kopf nicht springt, bevor das Logo geladen ist */
    .top img.brand{height:19px;width:84px;aspect-ratio:956/216;flex:none;}
    .role-pill{display:none;}
    /* Der Ansichtswechsel der Verwaltung sprengt die schmale Kopfzeile, er zieht ins „Mehr"-Blatt um.
       Der Umfangs-Schalter Kurz/Alles genauso: beide werden in crm-app.js (openMoreSheet)
       umgehaengt, .mo-view macht sie dort wieder sichtbar. */
    #view-as,#dd-ansicht{display:none;}
    .mo-view{margin:0 0 14px;}
    .mo-view>span{display:block;color:var(--muted);font-weight:700;margin-bottom:6px;}
    .mo-view #view-as,.mo-view #dd-ansicht{display:block;width:100% !important;padding:12px 36px 12px 14px !important;
      border-radius:12px;opacity:1;font-size:14px;}
    .whoami .em,.me-caret{display:none;}
    button.whoami{padding:3px;}
    /* Suche: im Ruhezustand nur die Lupe, beim Tippen ueber die ganze Breite */
    .gsearch{flex:0 0 40px;min-width:0;transition:flex-basis .22s cubic-bezier(.2,.8,.2,1);}
    .gsearch:focus-within{flex:1 1 auto;}
    .gsearch .in{padding:9px 10px 9px 34px;font-size:16px !important;}
    .gsearch:not(:focus-within) .in{color:transparent;}
    .gsearch .in::placeholder{color:transparent;}
    /* Die Glocke fuer „Hinweise" steht seit 04.09.2026 in portal.html, sie gilt ueberall. */
    #notif-panel{position:fixed !important;left:10px;right:10px;top:calc(62px + env(safe-area-inset-top));width:auto !important;max-width:none !important;}
    html.standalone #notif-panel{top:calc(62px + env(safe-area-inset-top));}

    /* ---------- Reiter: oben weg, unten hin ---------- */
    .tabs{display:none;}
    .wrap{padding:0 16px;}
    main{padding:16px 0 24px;}
    .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:820;
      background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(170%);
      backdrop-filter:blur(20px) saturate(170%);border-top:1px solid var(--hairline);
      padding:5px 4px calc(5px + env(safe-area-inset-bottom));}
    .mnav-i{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
      min-height:50px;padding:6px 2px 4px;border:0;border-radius:14px;background:transparent;cursor:pointer;
      font-family:inherit;font-size:10px !important;font-weight:700 !important;line-height:1.2;
      letter-spacing:0 !important;text-transform:none !important;color:var(--muted2);
      transition:color .15s ease;}
    .mnav-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .mnav-i svg{width:23px;height:23px;flex:none;stroke:currentColor;fill:none;
      stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
    .mnav .tab.active,.mnav-i.active{color:var(--fg);background:transparent;}
    .mnav .tab.active svg,.mnav-i.active svg{stroke-width:2.2;}
    .mnav-i:active{transform:scale(.94);}
    @media (prefers-reduced-motion:reduce){.mnav-i:active{transform:none;}}

    /* „Mehr"-Blatt: Kacheln statt Liste, damit der Daumen trifft */
    .mo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .mo-item{display:flex;align-items:center;gap:11px;padding:14px 14px;border-radius:14px;
      border:1px solid var(--hairline);background:var(--bg);color:var(--fg);cursor:pointer;
      font-family:inherit;font-size:var(--fs-text) !important;font-weight:700 !important;
      text-transform:none !important;letter-spacing:0 !important;text-align:left;min-height:56px;}
    .mo-item svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .mo-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .mo-item.active{background:var(--fg);border-color:var(--fg);color:var(--bg);}
    .mo-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline2);
      text-align:center;color:var(--muted2);font-size:12px;}
    .mo-foot a{color:inherit;}

    /* ---------- Schwebendes raeumt der Leiste den Platz ---------- */
    #fb-fab-wrap,html.standalone #fb-fab-wrap{right:12px;bottom:calc(86px + env(safe-area-inset-bottom));}
    #fb-pop,#fr-pop{bottom:calc(140px + env(safe-area-inset-bottom));}
    .toast,html.standalone .toast{bottom:calc(100px + env(safe-area-inset-bottom));}
    /* Impressum und Datenschutz am Seitenende, mit Polster fuer Leiste und Taste (waren bis 04.09.2026 am Handy ausgeblendet). */
    .legal-foot,html.standalone .legal-foot,body:has(#app > .center) .legal-foot,html.standalone body:has(#app > .center) .legal-foot{
      position:static;text-align:center;margin:0;max-width:none;padding:8px 16px calc(96px + env(safe-area-inset-bottom));}
    /* Der Installations-Hinweis: auf der Anmeldeseite unten, im Portal ueber
       Leiste und schwebenden Knoepfen (sonst deckt er den Anmelde-Knopf zu). */
    #pwa-hint{bottom:calc(14px + env(safe-area-inset-bottom));}
    body:has(.mnav) #pwa-hint{bottom:calc(148px + env(safe-area-inset-bottom));}

    /* ---------- Schublade: ueber den ganzen Schirm ---------- */
    .drawer,.drawer--wide,.drawer--full{width:100%;border-left:0;}
    .drawer-head,.drawer--full .drawer-head{position:sticky;top:0;z-index:3;background:var(--bg);
      padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));}
    .drawer-body,.drawer--full .drawer-body{padding:16px 16px calc(50px + env(safe-area-inset-bottom));
      -webkit-overflow-scrolling:touch;}
    /* Kopf der Schublade: Titel ueber die volle Breite, Hauptknopf darunter,
       das Kreuz oben rechts. Sonst quetscht der Knopf den Namen auf drei Zeilen. */
    .drawer-head,.drawer--full .drawer-head{position:relative;flex-wrap:wrap;row-gap:10px;padding-right:56px;}
    .drawer-head>div:first-child{flex:1 1 100%;min-width:0;}
    .drawer-head .d-head-actions{width:100%;margin-left:0;flex-wrap:wrap;}
    .drawer-head .d-head-actions .btn{flex:1 1 auto;justify-content:center;}
    .drawer-head .d-head-actions .x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;}

    /* Detailansicht deckt die Leiste zu, wie in einer App, in der ein Blatt hochkommt. */
    .mnav{transition:transform .25s cubic-bezier(.4,0,.2,1);}
    body:has(.drawer.show) .mnav,body:has(.sheet.show) .mnav{transform:translateY(130%);}
    body:has(.drawer.show) #fb-fab-wrap{opacity:0;pointer-events:none;}
    body:has(.drawer.show) #pwa-hint,body:has(.sheet.show) #pwa-hint{opacity:0;pointer-events:none;}
    @media (prefers-reduced-motion:reduce){.mnav{transition:none;}}

    /* ---------- Blatt: Griff oben, Fuss ueber dem Rand ---------- */
    .sheet{width:100%;max-height:88vh;border-radius:22px 22px 0 0;}
    .sheet-head{position:sticky;padding-top:22px;}
    .sheet-head::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
      width:38px;height:4px;border-radius:999px;background:var(--hairline);}
    .sheet-body{padding-bottom:14px;}
    .sheet-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom));}

    /* ---------- Finger statt Maus ---------- */
    .in,input.in,select.in,textarea.in,input,select,textarea{font-size:16px !important;}
    .btn{min-height:44px;padding:12px 18px;}
    .btn-sm{min-height:40px;} .btn-xs{min-height:36px;}
    .tab,.chipbtn{min-height:38px;}
    .lead-card{padding:14px;}
    .lead-card:hover{transform:none;}

/* Raster, die sich sonst selbst aufteilen (auto-fit/auto-fill): auf dem Handy
   immer einspaltig. Bei echten 375 px passiert das von allein, bei einer zu
   breit gemeldeten Flaeche sonst nicht, dann staenden drei Diagramme nebeneinander. */
.charts,.team-grid,.goal-wrap,.nutzen-grid,.dc-looks,.dc-dd{grid-template-columns:1fr;}

/* Die Kopfzeile soll wie in einer App oben stehen bleiben. `overflow-x:hidden`
   (aus dem 720er-Block) macht aus dem Dokument einen Scroll-Behaelter und setzt
   `position:sticky` ausser Kraft. `clip` schneidet genauso ab, ohne zu scrollen. */
html,body{overflow-x:clip;}

/* ---------------------------------------------------------------------
   Der eigentliche Grund fuer die geschrumpfte Ansicht auf dem iPhone:
   Die geschlossene Schublade steht mit `translateX(100%)` rechts neben dem
   Bildschirm geparkt und ist eine volle Bildschirmbreite breit. Am Rechner
   faellt das nicht auf, iOS rechnet sie aber zur Seitenbreite dazu, zoomt
   die Seite heraus, damit alles hineinpasst, und laesst sich seitlich
   wegschieben. Deshalb auf dem Handy: geschlossen = nicht vorhanden,
   das Hereinschieben uebernimmt eine Animation beim Oeffnen.
   --------------------------------------------------------------------- */
.drawer:not(.show){display:none;}
.drawer.show{animation:schublade-rein .28s cubic-bezier(.4,0,.2,1);}
@keyframes schublade-rein{from{transform:translateX(100%);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){.drawer.show{animation:none;}}

/* ---------------------------------------------------------------------
   AUFRAEUMEN AUF SCHMALEN SCHIRMEN (24.08.2026)
   --------------------------------------------------------------------- */

/* Ring-Karten: der Ring nimmt 128 px, daneben blieben der Werteliste nur
   ~108 px. Dadurch klebten Beschriftung und Zahl aneinander ("Schlecht0").
   Die Liste bekommt jetzt den ganzen Rest, und jede Zeile einen Mindestabstand. */
.chart-card > div:has(> svg) > div{flex:1 1 auto;min-width:0;}
.chart-card > div:has(> svg) > svg{flex:0 0 auto;}
.pstat{gap:12px;}
.pstat > span:first-child{min-width:0;}
.pstat > b{white-space:nowrap;}

/* Schwebende Knoepfe: bis zum 04.09.2026 standen hier zwei runde Tasten (Schnellfunktion,
   Kurzauskunft) dauerhaft ueber dem Inhalt. Jetzt ist es wie am Schreibtisch ein
   Pluszeichen, das nach oben auffaechert; beide Wege stehen ausserdem im Blatt hinter
   "Mehr". "Fehler / Idee" bleibt dort und faechert hier nicht mit. */
#fb-fab{display:none;}
#fb-fab-items{position:absolute;right:0;bottom:calc(100% + 8px);flex-direction:column;align-items:flex-end;gap:8px;}
#ql-fab,#fr-fab{width:52px;height:52px;padding:0;justify-content:center;border-radius:999px;}
#ql-fab span:not(.ql-ic),#fr-fab span:not(.fr-ic){display:none;}
#ql-fab .ql-ic{font-size:21px;}
#fr-fab .fr-ic{font-size:22px;font-weight:800;}
#fb-fab-items > button{transform:translateY(10px) scale(.9);}
#fb-fab-wrap.fan #fb-fab-items > button{transform:none;}
/* Die Tagesaktionen bleiben auf dem Handy beschriftet: ein Plus und ein Kalender ohne
   Wort waeren neben Blitz und Fragezeichen nicht zu unterscheiden. */
.fab-aktion{min-height:44px;padding:10px 16px;font-size:14px;}
/* Symbol im Blatt hinter "Mehr" fuer Eintraege ohne Strich-Symbol (Blitz, Fragezeichen) */
.mo-ic{flex:none;width:20px;text-align:center;font-size:17px;font-weight:800;line-height:1;overflow:visible;}

/* Platz unter dem letzten Eintrag: sonst verschwindet er hinter Leiste und Taste. */
main.wrap{padding-bottom:24px;}

/* Formularzeilen: die Felder standen in ungleichen Stufen (203 / 253 / 157 / 88 px)
   und sahen aus wie hingewuerfelt. Auf dem Handy fuellen sie die Zeile, zwei
   nebeneinander wenn Platz ist, sonst untereinander. */
.filters{gap:8px;align-items:stretch;}
.filters > *{flex:1 1 0;min-width:150px;}
.filters > .btn,.filters > button{flex:0 0 auto;}
/* Der Info-Punkt bleibt ein Punkt und wird nicht zur eigenen Formularzeile. */
.filters > .itip{flex:0 0 auto;min-width:0;align-self:center;}
.filters .in,.filters .sug-wrap{width:100%;}
.sug-wrap{display:block;}
.sug-wrap .in{width:100%;}

/* Lead-Karte: Name und Knopf wurden beide nach rechts gedraengt (zweimal
   margin-left:auto), dazwischen klaffte eine Luecke. Name links, Knopf rechts. */
.lc-foot{gap:10px;align-items:center;}
.lc-foot .owner-tag{margin-left:0 !important;margin-right:auto;}

/* Der Installations-Hinweis war fuenf Zeilen hoch und lag mitten im Inhalt.
   Kompakter, dichter am unteren Rand, Text kuerzer gesetzt. */
#pwa-hint{padding:10px 12px;gap:10px;font-size:12.5px;line-height:1.35;}
#pwa-hint b{font-weight:700;}
#pwa-hint .pwa-txt{max-height:none;}
/* Erklaertexte in Formularzeilen bekommen eine eigene Zeile, sonst stehen sie
   halb neben einem Feld ("Vor Ort am" links, Uhrzeit rechts, Satz daneben). */
.filters > span.small,.filters > span.muted{flex:1 1 100%;}