/* Mac-Layout im Browser (html.desktop ab 900 px Fensterbreite, gesetzt von js/shell/layout.js; nie in der iPhone-App).
   Wird als letztes Stylesheet geladen. Alles hier ist an html.desktop gebunden, darunter bleibt das iPhone-Layout unverändert.
   Aufbau: Seitenleiste links statt Tab-Leiste, Inhalt in einer Spalte (max. --spalte), Sheets als Dialog in der Mitte,
   Hover- und Fokuszustände, danach Anpassungen je Screen. */

html.desktop {
  --sat: 0px; --sab: 0px; --tab-h: 0px;
  --seite-b: 248px;          /* Seitenleiste */
  --spalte: 960px;           /* Inhaltsspalte; gestapelte Detail-Screens schmaler (unten) */
}
/* Hinweisleiste (Betrieb ohne onOffice): --sat bleibt hier 0, deshalb rückt die ganze App darunter */
html.desktop #app { top: var(--hinweis-h); height: calc(100dvh - var(--hinweis-h)); }
/* Text lässt sich am Mac markieren und kopieren (Telefonnummern, Adressen); Bedienelemente nicht */
html.desktop body { -webkit-user-select: text; user-select: text; touch-action: auto; }
html.desktop :is(button, .tabbar, .leiste, .chip, .knopf, .segment, .tippbar:not(.karte)) { -webkit-user-select: none; user-select: none; }

/* ───────────── Seitenleiste ───────────── */
html.desktop .stapelbereich, html.desktop .ebene-modal { left: var(--seite-b); }
html.desktop .tabbar { top: 0; right: auto; bottom: 0; width: var(--seite-b); height: auto; flex-direction: column; gap: 2px; padding: 26px 14px 16px;
  background: var(--creme); border-top: 0; border-right: 1px solid var(--linie); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; overflow-y: auto; scrollbar-width: none; }
html.desktop .tabbar.versteckt { transform: none; }
html.desktop .tabbar::before { display: none; }
.seite-marke, .seite-profil { display: none; }
html.desktop .seite-marke { display: block; flex: none; padding: 0 10px 26px; }
html.desktop .seite-marke img { width: 150px; height: auto; }
html.desktop .tab { flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; height: 42px; padding: 0 12px; border-radius: 11px;
  color: var(--text2); transition: background-color .15s, color .15s; }
html.desktop .tab > .ic { width: 20px; height: 20px; }
html.desktop .tab .tab-l { font: 500 14.5px/1 var(--schrift); letter-spacing: -.005em; }
html.desktop .tab.aktiv { background: var(--taupe-bg); color: var(--navy); }
html.desktop .tab.aktiv > .ic { color: var(--taupe-tief); }
html.desktop .tab.aktiv .tab-l { font-weight: 600; }
html.desktop .tab.gedrueckt > .ic { transform: none; }
html.desktop .tab.mitte { justify-content: flex-start; }
html.desktop .tab.mitte .tab-l { color: inherit; }
html.desktop .mic-knopf, html.desktop .tabbar.hoert .mic-knopf { position: static; width: 26px; height: 26px; margin: 0 -3px; box-shadow: none; flex: none; }
html.desktop .mic-knopf svg, html.desktop .tabbar.hoert .mic-knopf svg { width: 15px; height: 15px; }
html.desktop .tabbar.hoert .mic-knopf { box-shadow: 0 0 0 3px rgba(158,139,119,.28); }
html.desktop .tab.mitte.gedrueckt .mic-knopf { transform: none; }
/* Mehr bzw. Konto steht unten als Profil */
html.desktop .tab.profil-tab { order: 99; margin-top: auto; }
html.desktop .seite-profil { order: 99; margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--text3);
  border: 1px solid var(--linie); background: #fff; transition: background-color .15s, border-color .15s; }
html.desktop .seite-profil .ava, html.desktop .seite-profil .ava-txt { box-shadow: none; }
html.desktop .seite-profil-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.desktop .seite-profil-t b { font: 600 13.5px/17px var(--schrift); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop .seite-profil-t span { font: 500 11.5px/14px var(--schrift); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop .seite-profil.aktiv { border-color: var(--taupe-hell); background: var(--taupe-bg); }

/* ───────────── Ansichten: Inhaltsspalte, Leiste, Rollbereich ───────────── */
html.desktop .rollbereich { overscroll-behavior-y: auto; scrollbar-width: thin; scrollbar-color: rgba(28,36,75,.2) transparent; }
html.desktop .rollbereich::-webkit-scrollbar { display: initial; }
html.desktop .rollinhalt { max-width: var(--spalte); margin: 0 auto; padding-bottom: 56px; }
html.desktop .ansicht.ohne-tabbar > .rollbereich > .rollinhalt { padding-bottom: 56px; }
html.desktop .ansicht[data-kopf="ohne"] > .rollbereich > .rollinhalt { padding-bottom: 0; }
html.desktop .ansicht[data-kopf="leiste"] > .rollbereich > .rollinhalt { padding-top: calc(var(--leiste-h) + 12px); }
html.desktop .ansicht.mit-schatten { box-shadow: none; }
html.desktop .ptr { display: none; }
/* Leiste: Knöpfe stehen über der Inhaltsspalte, der Hintergrund läuft über die ganze Breite */
html.desktop .leiste { padding-left: max(0px, calc((100% - var(--spalte)) / 2)); padding-right: max(0px, calc((100% - var(--spalte)) / 2));
  height: calc(var(--leiste-h) + 8px); padding-top: 8px; }
html.desktop .leiste-titel { bottom: 0; max-width: min(58%, 560px); }
html.desktop .leiste-links { padding-left: 8px; }
html.desktop .leiste-rechts { padding-right: 8px; }
/* Großtitel */
html.desktop .kopf { padding: 34px 20px 0; }
html.desktop .ansicht.gestapelt[data-kopf="gross"] > .rollbereich > .rollinhalt > * > .kopf:first-child { padding-top: calc(var(--leiste-h) + 18px); }
html.desktop .lt { font-size: 32px; line-height: 38px; }

/* Fotokopf: Foto als Banner über die ganze Breite, das Blatt darunter in der Spalte */
html.desktop .ansicht[data-kopf="foto"] > .rollbereich > .rollinhalt { max-width: none; }
html.desktop .ansicht[data-kopf="foto"] .held { height: 400px; }
html.desktop .ansicht[data-kopf="foto"] .held-blatt { max-width: var(--spalte); margin: -40px auto 0; padding: 26px 20px 0; border-radius: 24px 24px 0 0; }
html.desktop .ansicht[data-kopf="foto"] .held-blatt { min-height: calc(100dvh - 360px); }
html.desktop .leiste.foto .leiste-links { padding-left: 12px; }
html.desktop .leiste.foto .leiste-rechts { padding-right: 12px; }

/* ───────────── Sheets als Dialog ───────────── */
html.desktop .ebene-sheet { display: grid; place-items: center; padding: 40px; }
html.desktop .sheet { position: relative; left: auto; right: auto; bottom: auto; width: min(560px, 100%); max-height: calc(100dvh - 80px);
  border-radius: 20px; transform: none; box-shadow: 0 0 0 1px rgba(28,36,75,.06), 0 30px 80px -20px rgba(17,22,48,.40); overflow: hidden; }
html.desktop .sheet.gross { height: min(860px, calc(100dvh - 80px)); }
html.desktop .sheet::after, html.desktop .sheet-griff { display: none; }
html.desktop .sheet-kopf { padding: 18px 16px 10px 24px; }
html.desktop .sheet-inhalt { padding: 0 24px 20px; scrollbar-width: thin; scrollbar-color: rgba(28,36,75,.2) transparent; }
html.desktop .sheet-inhalt::-webkit-scrollbar { display: initial; }
html.desktop .sheet-aktionen { padding: 12px 24px 22px; border-top: 1px solid var(--linie-hell); }
html.desktop .sheet-aktionen.leer { padding: 0 0 10px; border-top: 0; }
html.desktop .sheet-aktionen .knopf.gross { height: 50px; font-size: 16px; }

/* Abfrage: kleine Box in der Mitte statt Action-Sheet unten */
html.desktop .ebene-abfrage { justify-content: center; align-items: center; padding: 40px; }
html.desktop .abfrage { width: 340px; gap: 0; transform: none; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(28,36,75,.06), 0 30px 80px -20px rgba(17,22,48,.40); }
html.desktop .abfrage-gruppe { border-radius: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.desktop .abfrage-text { padding: 22px 24px 16px; }
html.desktop .abfrage-text b { font-size: 15px; line-height: 20px; color: var(--navy); }
html.desktop .abfrage-text span { font-size: 13.5px; }
html.desktop .abfrage-knopf { height: 48px; font-size: 15.5px; line-height: 48px; border-top: 1px solid var(--linie); }
html.desktop .abfrage-knopf.nein { font-weight: 600; color: var(--text2); border-top: 1px solid var(--linie); }

/* Toast oben in der Mitte */
html.desktop .ebene-toast { padding-top: 18px; }

/* Modal: deckt nur den Inhaltsbereich neben der Seitenleiste */
html.desktop .ebene-modal > .modal-blatt { box-shadow: -1px 0 0 var(--linie); }

/* ───────────── Maus und Tastatur ───────────── */
html.desktop .tippbar, html.desktop [data-tipp], html.desktop label:has(> input[type=checkbox]) { cursor: pointer; }
html.desktop :focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
html.desktop input:focus-visible, html.desktop textarea:focus-visible, html.desktop select:focus-visible { outline: none; }
@media (hover: hover) {
  html.desktop .tab:not(.aktiv):hover { background: rgba(28,36,75,.05); color: var(--navy); }
  html.desktop .seite-profil:not(.aktiv):hover { border-color: var(--sand); background: var(--papier); }
  html.desktop .karte.tippbar:hover, html.desktop .tippbar .karte:hover { border-color: #E0D8CF; box-shadow: 0 1px 2px rgba(28,36,75,.05), 0 16px 36px -14px rgba(28,36,75,.22); }
  html.desktop .zeile.tippbar:hover::after { opacity: .7; }
  html.desktop .knopf.primaer:hover { background: var(--navy-hell); }
  html.desktop .knopf.primaer.gefahr:hover { background: #A04630; }
  html.desktop .knopf.gruen:hover { background: #356B50; }
  html.desktop .knopf.sekundaer:hover, html.desktop .knopf.text:hover { background-color: #F7F4EF; }
  html.desktop .chip:not(.an):hover { border-color: var(--taupe-hell); }
  html.desktop .rund-knopf:hover { border-color: var(--taupe-hell); }
  html.desktop .leiste-knopf:hover { background-color: rgba(28,36,75,.06); }
  html.desktop .leiste.foto:not(.voll) .leiste-knopf:hover, html.desktop .leiste.foto:not(.voll) .leiste-zurueck:hover, html.desktop .glas-knopf:hover { background-color: #fff; }
  html.desktop .leiste-zurueck:hover, html.desktop .leiste-fertig:hover { opacity: .7; }
  html.desktop .sek a:hover { opacity: 1; }
  html.desktop .sheet-zu:hover { background: #E5DFD7; color: var(--navy); }
  html.desktop .abfrage-knopf:hover { background-color: rgba(28,36,75,.04); }
  html.desktop .segment > button:not(.an):hover { color: var(--navy); }
}

/* ───────────── Fotobänder: Pfeile statt Wischen (shell/layout.js bandPfeile) ───────────── */
.band-pfeil { display: none; }
html.desktop .band-pfeil { display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  color: var(--navy); background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(20,26,56,.18);
  opacity: 0; transition: opacity .2s, background-color .15s; }
html.desktop .band-pfeil.links { left: 16px; }
html.desktop .band-pfeil.rechts { right: 16px; }
html.desktop :hover > .band-pfeil, html.desktop .band-pfeil:focus-visible { opacity: 1; }
html.desktop .band-pfeil:hover { background: #fff; }
html.desktop .objekt-viewer > .band-pfeil { opacity: 1; width: 48px; height: 48px; margin-top: -24px; color: #fff; background: rgba(20,26,56,.45); box-shadow: none; }
html.desktop .objekt-viewer > .band-pfeil:hover { background: rgba(20,26,56,.7); }
html.desktop .objekt-viewer > .band-pfeil.links { left: 24px; }
html.desktop .objekt-viewer > .band-pfeil.rechts { right: 24px; }

/* ───────────── Screens ───────────── */
/* Gestapelte Detail- und Formular-Screens in einer schmaleren Spalte, damit Felder, Karten und große Knöpfe nicht in die Breite
   laufen; Übersichten mit vielen Zeilen behalten die volle Spalte */
html.desktop .ansicht.gestapelt:not([data-kopf="foto"]):not(:is([data-screen="akquise"], [data-screen="marketing"], [data-screen="wochenrueckblick"],
  [data-screen="protokoll"], [data-screen="arbeitszeiten"], [data-screen="abschluesse"], [data-screen="provision"], [data-screen="academy"],
  [data-screen="zeiten"], [data-screen="anrufe"], [data-screen="konten"])) { --spalte: 760px; }
/* Tab-Wurzeln, die Formulare oder Einstellungen sind, ebenfalls schmaler; der Assistent als Gesprächsspalte */
html.desktop .ansicht:is([data-screen="mehr"], [data-screen="k-suche"], [data-screen="k-anfragen"], [data-screen="k-konto"]) { --spalte: 760px; }
html.desktop .ansicht[data-screen="assistent"] { --spalte: 820px; }
/* Waagerecht wischbare Chip-Reihen brechen um (mit der Maus lässt sich nicht seitlich wischen) */
html.desktop .chips.lauf { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 8px; }
html.desktop .chips.lauf::after { display: none; }
/* Umschalter nicht über die ganze Spalte ziehen */
html.desktop .rollinhalt .segment { max-width: 520px; }

/* Anmeldung: Foto links, Anmelden rechts */
html.desktop .ansicht[data-screen="anmeldung"] > .rollbereich > .rollinhalt { max-width: none; }
html.desktop .s1-foto { right: 50%; bottom: 0; height: auto; }
html.desktop .s1-foto::after { display: none; }
html.desktop .s1-zeichen { top: calc(50% - 250px); left: 75%; }
html.desktop .s1-text { top: calc(50% - 140px); left: calc(75% - 220px); right: calc(25% - 220px); }
html.desktop .s1-akt { top: calc(50% + 34px); bottom: auto; left: calc(75% - 210px); right: calc(25% - 210px); }
html.desktop .s1-fuss { left: 50%; bottom: 18px; }

/* Objekte und Angebote: Fotokarten im Raster */
html.desktop .objekte .ok-liste, html.desktop .k-objekte .kob-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
html.desktop .objekte .ok-liste > :not(.ok), html.desktop .k-objekte .kob-liste > :not(.kk) { grid-column: 1 / -1; }
html.desktop .objekte .ok-titel { font-size: 17px; line-height: 22px; }
/* In der schmaleren Karte stehen Wert und Beschriftung untereinander, damit nichts abgeschnitten wird */
html.desktop .objekte .ok-zahlen > div { flex-direction: column; align-items: flex-start; gap: 0; }
/* Leads: zwei Spalten (im schmalen Fenster eine), Trenner und Leer-Karten über die ganze Breite */
html.desktop .leads .leads-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; padding-top: 12px; }
html.desktop .leads .leads-liste > .lead { margin-top: 0; }
html.desktop .leads .leads-liste > :not(.lead) { grid-column: 1 / -1; }
/* Kunden-Start: Angebote als Raster statt Band */
html.desktop .k-start .ks-band { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; white-space: normal; }
html.desktop .k-start .ks-band::after { display: none; }
html.desktop .k-start .ks-band .kk.klein { width: auto; }

/* Unterschrift groß: Dialog in der Mitte statt gedrehtem Vollbild (überschreibt auch die Hochformat-Drehung). Die Karte ist
   ein echtes Element (.vt-vb-karte), damit ein Klick hinein nie als Klick daneben zählt; am iPhone bleibt sie ohne eigene Box. */
.vt-vb-karte { display: contents; }
html.desktop .vt-vollbild { inset: 0; width: auto; height: auto; transform: none; padding: 40px 48px; background: rgba(17,22,48,.34);
  align-items: center; justify-content: center; }
html.desktop .vt-vb-karte { display: flex; flex-direction: column; gap: 14px; flex: none; width: min(1040px, 100%); height: min(600px, 100%);
  padding: 20px 24px; border-radius: 20px; background: var(--grund); box-shadow: 0 30px 80px -20px rgba(17,22,48,.4); }
html.desktop .vt-vb-knoepfe { justify-content: flex-end; }
html.desktop .vt-vb-knoepfe .knopf { flex: none; min-width: 150px; padding: 0 20px; }
/* Rückfrage „Unterschrift verwerfen?“ liegt über dem Unterschriftsdialog */
#app:has(> .vt-vollbild) > .ebene-abfrage { z-index: 210; }

/* Seitenleiste: ist Mehr über das Profil offen, zählt das Profil als aktiv, der Reiter darunter nur noch leise */
html.desktop .tabbar:has(.seite-profil.aktiv) .tab.aktiv { background: none; }
/* Toast über der Inhaltsspalte, sobald die Seitenleiste da ist (bei der Anmeldung über dem ganzen Fenster) */
html.desktop #app:has(.tabbar) > .ebene-toast { left: var(--seite-b); }
/* Mitteilung (Vorschau: neuer Lead) oben rechts wie am Mac statt über die ganze Breite */
html.desktop .live-ebene { left: auto; right: 0; width: 400px; padding: 16px 16px 0 0; }
/* Jahres- und Monatswechsler: Pfeile nah am Titel statt an den Rändern */
html.desktop .zz-nav { max-width: 420px; margin-left: auto; margin-right: auto; }
/* Arbeitszeit-Karte: Kommen, Pause, Gehen als normale Knöpfe rechts */
html.desktop .az-knoepfe { justify-content: flex-end; }
html.desktop .az-knoepfe .knopf { flex: 0 0 auto; min-width: 150px; padding: 0 22px; }
/* Person: Umschalter unter dem mittigen Kopf ebenfalls mittig */
html.desktop .ansicht[data-screen="person"] .segment { margin-left: auto; margin-right: auto; }