/* Nur für die Buchhaltungs-Vorschauen. Eigene Klassen (bhv-), index.html bleibt unberührt. */

.bhv-card .listings-head{margin-bottom:18px}
.bhv-card .bhv-steps{margin:0}
@media(min-width:1101px){.bhv-card .bhv-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bhv-card .bhv-steps .case-shot img,
.practice-grid--single .bhv-card .bhv-steps .case-shot img{
  height:210px;object-fit:cover;object-position:top left;background:#fff
}
.bhv-card .bhv-steps .step--contain .case-shot img,
.practice-grid--single .bhv-card .bhv-steps .step--contain .case-shot img{
  height:210px;object-fit:contain;object-position:top center;background:#f4f6f5
}
@media(max-width:650px){
  .bhv-card .bhv-steps .case-shot img,
  .practice-grid--single .bhv-card .bhv-steps .case-shot img,
  .bhv-card .bhv-steps .step--contain .case-shot img,
  .practice-grid--single .bhv-card .bhv-steps .step--contain .case-shot img{height:200px}
  .bhv-frame{height:200px}
}

.bhv-frame{
  position:relative;
  height:230px;
  border:1px solid #cfdcd3;
  border-radius:8px;
  background:#eef3f0;
  box-shadow:0 8px 20px #0a1f1222;
  overflow:hidden;
  container-type:size;
  cursor:zoom-in;
}
.bhv-frame--dark{background:#171717}
.bhv-frame:focus-visible{outline:2px solid #16763f;outline-offset:3px}
.bhv-badge{
  position:absolute;top:auto;bottom:6px;right:6px;z-index:3;
  background:#16763f;color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
  padding:4px 6px;border-radius:4px;pointer-events:none
}
.bhv-stage{
  position:absolute;top:50%;left:50%;
  width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform-origin:center center;
  transform:translate(-50%,-50%) scale(min(calc(100cqw / (var(--w) * 1px)), calc(100cqh / (var(--h) * 1px))));
  pointer-events:none;font-family:Arial,Helvetica,sans-serif
}

/* Hover-Vergrößerung: Overlay, Original bleibt im Raster */
.bhv-zoom-overlay{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  padding:24px;
  background:#0a1f1273;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease
}
.bhv-zoom-overlay.is-on{opacity:1;visibility:visible}
.bhv-zoom-overlay.is-hold{pointer-events:auto}
.bhv-zoom-stage{
  max-width:100%;max-height:100%;
  overflow:auto;
  display:grid;place-items:start center;
}
.bhv-frame--zoom{
  height:auto;cursor:default;box-shadow:0 24px 60px #030e0866;
  transform-origin:top center;
  overflow:hidden;flex:none
}
.bhv-frame--zoom .bhv-stage{
  transform:translate(-50%,-50%) scale(1)
}
@media(prefers-reduced-motion:reduce){
  .bhv-zoom-overlay{transition:none}
}

/* ========== 1. Gmail Dark Mode ========== */
.bhv-mail{width:1200px;height:560px;display:grid;grid-template-columns:228px 1fr;background:#292929;color:#e3e3e3}
.gm-side{background:#000;padding:8px 0 16px;display:flex;flex-direction:column;min-width:0}
.gm-brand{display:flex;align-items:center;gap:10px;padding:6px 16px 14px;font-size:22px;font-weight:500;color:#e3e3e3;letter-spacing:-.2px}
.gm-burger{width:18px;height:14px;display:inline-flex;flex-direction:column;justify-content:space-between}
.gm-burger i{display:block;height:2px;background:#e3e3e3;border-radius:1px}
.gm-logo{width:32px;height:24px;flex:none}
.gm-compose{align-self:flex-start;background:#fff;color:#1f1f1d;border:0;border-radius:18px;padding:11px 22px 11px 16px;font:600 14px Arial,Helvetica,sans-serif;margin:2px 12px 18px;box-shadow:0 1px 3px #0006;display:inline-flex;align-items:center;gap:10px}
.gm-pencil{width:16px;height:16px;border-radius:2px;border:2px solid #3c4043;transform:rotate(-45deg);position:relative}
.gm-nav,.gm-labs{list-style:none;margin:0;padding:0}
.gm-nav li,.gm-labs li{display:flex;align-items:center;gap:12px;padding:7px 18px 7px 16px;border-radius:0 18px 18px 0;font-size:14px;color:#c7c7c7;margin-right:12px}
.gm-nav li em,.gm-labs li em{margin-left:auto;font-style:normal;font-size:13px;font-weight:500;color:#c7c7c7}
.gm-nav .is-on,.gm-labs .is-on{background:#4d4d4d;color:#fff;font-weight:600}
.gm-nav .is-on em,.gm-labs .is-on em{color:#fff;font-weight:700}
.gm-ico{width:16px;height:14px;border:1.6px solid #c7c7c7;border-radius:2px;flex:none;opacity:.9}
.gm-ico--in{border-bottom-width:5px}
.gm-ico--sent{clip-path:polygon(0 0,100% 50%,0 100%);height:14px;background:#c7c7c7;border:0}
.gm-labhead{margin:14px 12px 6px 16px;font-size:14px;font-weight:500;color:#e3e3e3;display:flex;align-items:center}
.gm-labhead span{margin-left:auto;font-size:20px;font-weight:400;color:#9aa0a6;line-height:1}
.gm-dot{width:12px;height:12px;border-radius:2px;flex:none}
.gm-dot--green{background:#16a765}
.gm-dot--teal{background:#42d69c}
.gm-dot--red{background:#fb4c2f}
.gm-dot--yellow{background:#fbe983}
.gm-dot--blue{background:#b6cff5}
.gm-dot--orange{background:#ff7537}
.gm-dot--pink{background:#f6a6b2}
.gm-dot--rose{background:#efa9a0}
.gm-dot--purple{background:#b99aff}
.gm-dot--gold{background:#fbe983}
.gm-main{display:flex;flex-direction:column;min-width:0;background:#292929}
.gm-top{display:flex;align-items:center;gap:12px;padding:8px 16px 8px;background:#000}
.gm-search{flex:1;height:46px;border-radius:24px;background:#3a3a3a;color:#e8eaed;display:flex;align-items:center;padding:0 16px;font-size:15px;gap:10px}
.gm-search::before{content:"";width:16px;height:16px;border:2px solid #9aa0a6;border-radius:50%;box-shadow:5px 5px 0 -6px #9aa0a6;flex:none}
.gm-tools{display:flex;align-items:center;gap:10px;color:#9aa0a6;font-size:13px;padding-left:8px;flex:none}
.gm-up{background:#1a73e8;color:#fff;border-radius:16px;padding:6px 12px;font-size:12px;font-weight:600}
.gm-filters{display:flex;align-items:center;gap:8px;padding:8px 16px 6px;font-size:13px;color:#e8eaed;background:#292929}
.gm-chip{background:transparent;border:1px solid #5f6368;border-radius:16px;padding:5px 12px;white-space:nowrap}
.gm-chip--link{background:none;border:0;color:#8ab4f8;padding:5px 6px;font-weight:500}
.gm-toolbar{display:flex;align-items:center;gap:14px;padding:6px 16px;color:#9aa0a6;font-size:12px;border-bottom:0}
.gm-toolbar .box{width:15px;height:15px;border:2px solid #9aa0a6;border-radius:2px}
.gm-toolbar .right{margin-left:auto}
.gm-list{list-style:none;margin:0;padding:0;border-top:1px solid #3c4043;flex:1}
.gm-list li{display:grid;grid-template-columns:52px 176px minmax(0,1fr) 72px;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:8px 16px 8px 12px;border-bottom:1px solid #3c4043;font-size:13.5px;min-width:0;background:#292929}
.gm-list li.is-dim{background:#141414}
.gm-list .marks{display:flex;align-items:center;gap:10px;color:#9aa0a6;font-size:16px;grid-row:1/3;align-self:center}
.gm-list .box{width:15px;height:15px;border:2px solid #9aa0a6;border-radius:2px}
.gm-list .from{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-row:1}
.gm-list .mid{display:flex;align-items:baseline;gap:0;min-width:0;overflow:hidden;grid-row:1}
.gm-list .subj{font-weight:700;color:#fff;white-space:nowrap}
.gm-list .pre{color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gm-att{grid-column:3;grid-row:2;justify-self:start;margin-top:4px;background:#5c2a28;color:#f28b82;border-radius:14px;padding:2px 10px 2px 6px;font-size:12px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.gm-att i{width:12px;height:14px;border-radius:2px;background:#d93025;color:#fff;font-size:6px;font-weight:800;font-style:normal;display:grid;place-items:center;letter-spacing:-.3px}
.gm-list .when{color:#b0b0b0;text-align:right;font-size:13px;font-weight:700;grid-row:1}

/* ========== 2. n8n ========== */
.bhv-flow{width:893px;height:587px;background:#171717;color:#ececec;position:relative;overflow:hidden}
.nf-group{position:absolute;border-radius:2px;padding:8px 10px;box-sizing:border-box}
.nf-group h4{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.01em}
.nf-group p{margin:0;font-size:7.5px;line-height:1.25;opacity:.7;max-width:96%}
.nf-blue{left:10px;top:9px;width:319px;height:264px;background:#1c398e}
.nf-red{left:342px;top:9px;width:532px;height:262px;background:#460809}
.nf-purple{left:318px;top:206px;width:285px;height:110px;background:#2f0d68;z-index:2}
.nf-brown{left:30px;top:297px;width:303px;height:264px;background:#2d1d06}
.nf-green{left:354px;top:273px;width:510px;height:205px;background:#032e15}
.nf-node{position:absolute;width:40px;height:40px;background:#2b2b2b;border:1px solid #3a3a3a;border-radius:8px;box-shadow:0 2px 6px #0008;display:flex;align-items:center;justify-content:center;z-index:3}
.nf-node span{position:absolute;top:44px;left:50%;transform:translateX(-50%);font-size:7px;line-height:1.15;color:#ddd;white-space:nowrap;text-align:center;width:72px}
.nf-plus{position:absolute;left:16px;top:128px;width:16px;height:16px;color:#c5cbe0;font-size:16px;line-height:16px;text-align:center;z-index:3}
.nf-ico{width:16px;height:16px;border-radius:3px;display:block;background:#8ab4f8}
.nf-ico--mail{background:#ea4335;clip-path:polygon(0 20%,50% 55%,100% 20%,100% 80%,0 80%)}
.nf-ico--clock{background:transparent;border:2px solid #8ab4f8;border-radius:50%;position:relative}
.nf-ico--clock::after{content:"";position:absolute;left:6px;top:2px;width:2px;height:6px;background:#8ab4f8}
.nf-ico--code{background:#fbbc04}
.nf-ico--ai{background:#4285f4}
.nf-ico--ok{background:#34a853;border-radius:50%}
.nf-ico--file{background:#7b61ff}
.nf-ico--warn{background:#d93025;border-radius:50%}
.nf-ico--if{background:#1a73e8;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.nf-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ========== 3. Google Sheets ========== */
.bhv-sheet{width:1180px;height:540px;background:#fff;color:#202124;display:flex;flex-direction:column}
.sh-bar{height:22px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 8px;gap:8px;font-size:11px;color:#444}
.sh-bar b{color:#188038;font-size:12px}
.sh-fx{height:24px;display:flex;align-items:center;padding:0 8px;gap:8px;border-bottom:1px solid #e0e0e0;font-size:12px;color:#3c4043}
.sh-fx .cellname{width:28px;text-align:center;border:1px solid #dadce0;border-radius:2px;font-size:11px;padding:1px 0}
.sh-fx em{font-style:normal;color:#188038;font-weight:700;margin:0 4px}
.sh-wrap{flex:1;overflow:hidden}
.sh-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}
.sh-table th,.sh-table td{border:1px solid #c7d3df;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;height:21px}
.sh-table thead tr:first-child th{background:#fff;color:#5f6368;font-weight:500;font-size:10px;text-align:center;height:18px}
.sh-table thead tr:last-child th{background:#ddebf7;color:#202124;font-weight:700;font-size:11px}
.sh-table .rh{width:28px;background:#fff;text-align:center;color:#5f6368;font-size:10px;font-weight:500}
.sh-table thead tr:last-child .rh{background:#ddebf7}
.sh-table tbody td.rh{background:#f8f9fa;color:#174ea6;font-weight:600}
.sh-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.sh-merch{display:inline-block;padding:1px 7px;border-radius:2px;font-weight:700;font-size:10.5px}
.sh-c1{background:#e20074;color:#fff}
.sh-c2{background:#3e0d81;color:#fff}
.sh-c3{background:#95bf47;color:#1a1a1a}
.sh-c4{background:#ffcc00;color:#1a1a1a}
.sh-c5{background:#d40511;color:#fff}
.sh-c6{background:#4285f4;color:#fff}
.sh-link{color:#1a73e8;text-decoration:underline;font-weight:500}
.sh-link::before{content:"";display:inline-block;width:10px;height:10px;margin-right:4px;background:#fbbc04;border-radius:1px;vertical-align:-1px}
.sh-ok{color:#137333;font-weight:600}
.sh-table tbody td:not(.rh){background:#ddebf7}
.sh-table col.c-date{width:86px}
.sh-table col.c-merch{width:200px}
.sh-table col.c-no{width:120px}
.sh-table col.c-num{width:70px}
.sh-table col.c-cat{width:120px}
.sh-table col.c-tax{width:80px}
.sh-table col.c-file{width:110px}
.sh-table col.c-st{width:80px}

/* ========== 4. Windows / Dropbox Explorer ========== */
.bhv-box{width:912px;height:700px;background:#fff;color:#1a1a1a;display:flex;flex-direction:column}
.xb-path{height:52px;background:#fcfcfc;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;padding:0 14px;gap:8px;font-size:13.5px;color:#222}
.xb-pc{width:16px;height:12px;border:2px solid #333;border-radius:1px;position:relative;flex:none}
.xb-pc::after{content:"";position:absolute;left:3px;right:3px;bottom:-5px;height:2px;background:#333}
.xb-path b{font-weight:600}
.xb-sep{color:#6b6b6b;padding:0 2px;font-weight:600}
.xb-tools{height:52px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 14px;gap:16px;font-size:13px;color:#333}
.xb-tools span{padding:6px 4px;border-radius:4px;display:inline-flex;align-items:center;gap:6px}
.xb-ico{width:16px;height:16px;border:1.5px solid #5f5f5f;border-radius:2px;display:inline-block;flex:none}
.xb-cols,.xb-row{display:grid;grid-template-columns:minmax(280px,1.6fr) 88px 150px 150px 80px;gap:0 8px;align-items:center;padding:0 18px 0 14px}
.xb-cols{height:32px;font-size:12.5px;font-weight:600;color:#333;border-bottom:1px solid #e5e5e5;background:#fff}
.xb-cols span:first-child{position:relative}
.xb-cols span:first-child::after{content:"▴";font-size:9px;margin-left:6px;color:#666}
.xb-list{list-style:none;margin:0;padding:0;flex:1}
.xb-row{height:36px;border-bottom:1px solid #f0f0f0;font-size:13px}
.xb-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:400}
.xb-name b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a1a1a}
.xb-pdf{width:16px;height:18px;border-radius:2px;background:#d93025;color:#fff;font-size:6px;font-weight:800;display:grid;place-items:center;flex:none;position:relative}
.xb-pdf::after{content:"";position:absolute;right:-3px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:#2fc201;border:1px solid #fff}
.xb-check{width:18px;height:18px;border-radius:50%;background:#2fc201;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.xb-meta{color:#5f5f5f}
.xb-size{text-align:right;color:#5f5f5f}

/* Original-Screenshot in einem bhv-frame, gleiche Hover-Vergrößerung */
.bhv-shot{background:#171717}
.bhv-shot img{
  display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;
  image-rendering:auto
}
.bhv-zoom-stage:has(.bhv-shot){max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}
.bhv-frame--zoom .bhv-shot img{object-fit:contain;image-rendering:auto}