/* OKNXT Unterseite Immobilien-Cockpit. Baut auf site.css, abschnitte.css und agenten-seite.css auf (Abstände 150 px wie überall).
   Software-Ansichten hell wie in OKNXT, in den OKNXT-Farben. Alle Zahlen, Namen und Adressen sind erfunden.
   Achtung: --w und --dreh sind seitenweit als Winkel registriert, hier nicht verwenden. */

.ic-seite{--h-grund:#F2F4F9;--h-karte:#FFFFFF;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5;
  --ic-blau:#2F6BFF;--ic-rot:#E5484D;--ic-bern:#F59E0B;--ic-gruen:#16A36A;--ic-tuerkis:#00A8C0;--ic-violett:#7B3BFF}
.ic-hell{color:var(--h-text)}

/* ---------- Kundenreise ---------- */
.ic-reise{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.ic-reise li{position:relative;padding-bottom:9px;font-size:.62rem;font-weight:600;color:var(--h-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;transition:color .4s}
.ic-reise li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:#DCE3F0;transition:background .5s}
.ic-reise li.erreicht{color:var(--h-text)}
.ic-reise li.erreicht::after{background:linear-gradient(90deg,var(--cyan),var(--blau))}
.ic-reise li:nth-child(n+5).erreicht::after{background:linear-gradient(90deg,var(--blau),var(--violett))}
.ic-reise li.jetzt{color:var(--blau)}
.ic-reise li.jetzt::after{background:var(--violett);animation:ic-puls-balken 1.6s ease-in-out infinite}
@keyframes ic-puls-balken{50%{box-shadow:0 0 10px 1px rgba(155,5,254,.7)}}
.ic-licht{position:absolute;bottom:-3px;left:0;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(47,107,255,.35),0 0 16px 4px rgba(47,107,255,.9);opacity:0;transition:left .55s cubic-bezier(.65,0,.35,1),opacity .3s}
.ic-licht.da{opacity:1}
.ic-reise-gross li{font-size:.74rem;padding-bottom:11px}
.ic-reise-gross li::after{height:4px}

/* ---------- Kacheln ---------- */
.ic-gesamt{display:flex;justify-content:space-between;align-items:baseline}
.ic-gesamt span{font-size:.62rem;font-weight:600;color:var(--h-text-2)}
.ic-gesamt b{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.ic-balken{height:8px;margin:8px 0 4px;border-radius:8px;background:#DCE3F0;overflow:hidden}
.ic-balken i{display:block;height:100%;width:57%;border-radius:inherit;background:linear-gradient(90deg,#16A36A,var(--cyan) 35%,var(--blau));transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.ic-warten .ic-balken i{transform:scaleX(0)}
.ic-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ic-reihe-3{grid-template-columns:1fr 1fr 2fr}
.ic-k{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border-radius:14px;background:#fff;border:1px solid var(--h-linie);box-shadow:0 10px 24px -18px rgba(22,27,46,.35);transition:opacity .6s ease calc(var(--n) * .07s),transform .7s cubic-bezier(.22,1,.36,1) calc(var(--n) * .07s)}
.ic-k::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--f),color-mix(in srgb,var(--f) 35%,#fff))}
.ic-warten .ic-k{opacity:0;transform:translateY(16px)}
.ic-k-ic{display:grid;place-items:center;width:32px;height:32px;margin-bottom:8px;border-radius:9px;color:var(--f);background:color-mix(in srgb,var(--f) 12%,#fff)}
.ic-k-ic svg{width:17px;height:17px}
.ic-k small{font-size:.74rem;color:var(--h-text-2)}
.ic-k b{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.ic-k-gross b{font-size:1.2rem;line-height:1.25}
.ic-k em{font-style:normal;font-size:.66rem;letter-spacing:.04em;color:var(--h-text-3)}

/* ---------- I1 · Einstieg ---------- */
.ic-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.ic-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.ic-start .h1{max-width:13ch;font-size:clamp(2.3rem,4vw,3.8rem)}
.ic-start .unterzeile{max-width:42ch}
.ic-fakten{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ic-fakten li{display:flex;flex-direction:column;padding:12px 18px;border-radius:16px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ic-fakten b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.ic-fakten span{font-size:.8rem;color:var(--text-2)}
.ic-start .einstieg-aktionen{display:flex;margin-top:32px}
.ic-buehne{position:relative;perspective:1800px;padding:30px 0 0}
.ic-buehne::before{content:"";position:absolute;inset:-4% -8%;background:radial-gradient(50% 50% at 55% 50%,rgba(47,107,255,.4),transparent 70%),radial-gradient(35% 40% at 85% 80%,rgba(155,5,254,.28),transparent 70%);filter:blur(20px);pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s}
.ic-an.ic-buehne::before{opacity:1}
.ic-schirm{--rx:18deg;--ry:-18deg;position:relative;overflow:hidden;display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:14px;border-radius:20px;background:var(--h-grund);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(143,164,255,.25),0 0 90px -30px rgba(92,203,255,.6);
  transform:rotateX(var(--rx)) rotateY(var(--ry));opacity:0;translate:0 60px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.ic-an .ic-schirm{--rx:6deg;--ry:-10deg;opacity:1;translate:0 0}
/* Lichtbahn, die nach dem Aufbau einmal über das Cockpit streicht */
.ic-schirm::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-16deg);pointer-events:none;opacity:0}
.ic-glanz .ic-schirm::after{animation:ic-glanz 1.6s cubic-bezier(.45,0,.25,1)}
@keyframes ic-glanz{0%{left:-40%;opacity:1}100%{left:130%;opacity:1}}
.ic-buehne.ic-folgt .ic-schirm{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.ic-leiste{display:flex;flex-direction:column;gap:6px;font-size:.7rem}
.ic-leiste img{width:100%;height:86px;max-width:none;object-fit:cover;border-radius:10px;margin-bottom:4px}
.ic-id{font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.ic-leiste>small{color:var(--h-text-2);line-height:1.35}
.ic-leiste dl{display:grid;gap:6px;margin:6px 0 0}
.ic-leiste dt{font-size:.6rem;font-weight:600;color:var(--h-text-2)}
.ic-leiste dd{margin:-4px 0 0;font-size:.7rem;color:var(--h-text)}
.ic-eig{margin:6px 0 0;padding-top:8px;border-top:1px solid var(--h-linie);font-size:.7rem;font-weight:600}
.ic-eig small{display:block;font-size:.6rem;color:var(--h-text-2);font-weight:600}
.ic-haupt{min-width:0;display:grid;gap:12px;align-content:start}
.ic-schirm .ic-reise li{font-size:.5rem}
.ic-reiter{display:flex;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--h-linie);font-size:.58rem;color:var(--h-text-2);white-space:nowrap;overflow:hidden}
.ic-reiter .an{color:var(--h-text);font-weight:600;box-shadow:0 9px 0 -7px var(--blau)}
.ic-mini{display:grid;gap:6px;padding:12px 12px 14px;border-radius:12px;background:#fff;border:1px solid var(--h-linie)}
.ic-mini h4{margin:6px 0 0;font-size:.62rem;font-weight:700;color:var(--h-text)}
.ic-mini .ic-gesamt span{font-size:.52rem}.ic-mini .ic-gesamt b{font-size:.8rem}
.ic-mini .ic-balken{height:6px;margin:4px 0 2px}
.ic-mini .ic-reihe{gap:6px;perspective:900px}
.ic-mini .ic-k{gap:2px;padding:8px 8px 9px;border-radius:9px;box-shadow:none;background:var(--h-grund)}
.ic-mini .ic-k::before{height:2px}
.ic-mini .ic-k-ic{width:20px;height:20px;margin-bottom:3px;border-radius:6px}
.ic-mini .ic-k-ic svg{width:11px;height:11px}
.ic-mini .ic-k small{font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-mini .ic-k b{font-size:.78rem;white-space:nowrap}
.ic-mini .ic-k-gross b{font-size:.7rem;white-space:normal;line-height:1.25}
.ic-mini .ic-k em{font-size:.46rem}
/* Auftritt im Einstieg: Kacheln klappen in 3D nacheinander auf */
.ic-mini.ic-warten .ic-k{opacity:0;transform:rotateX(-75deg) translateY(10px)}
.ic-mini .ic-k{transform-origin:50% 0;transition:opacity .5s ease calc(.15s + var(--n) * .08s),transform .9s cubic-bezier(.22,1.3,.4,1) calc(.15s + var(--n) * .08s)}

/* ---------- I3 · Objektdaten ---------- */
.ic-od-huelle{position:relative;max-width:1080px;margin:0 auto;padding:18px;border-radius:22px;background:var(--h-grund);border:var(--ic-rahmen,1px solid rgba(255,255,255,.55));box-shadow:var(--ic-schatten,0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.4))}
.ic-od-oben{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.ic-od-tipp{font-size:.76rem;color:var(--h-text-2)}
.ic-od-schalter{display:inline-flex;gap:4px;padding:4px;margin:0;border-radius:12px;background:var(--ic-schalter,#E6EAF2)}
.ic-od-schalter button{padding:9px 14px;border:0;border-radius:9px;background:none;font:600 .8rem/1 "Manrope",sans-serif;color:var(--h-text-2);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.ic-od-schalter button.an{background:var(--ic-schalter-an,#fff);color:var(--h-text);box-shadow:0 4px 12px -6px rgba(22,27,46,.35)}
.ic-od{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:1400px}
.ic-od-karte{transition:opacity .8s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.ic-od-karte:nth-child(2){transition-delay:.12s}
.ic-od-warten .ic-od-karte:nth-child(1){opacity:0;transform:translateX(-60px) rotateY(18deg)}
.ic-od-warten .ic-od-karte:nth-child(2){opacity:0;transform:translateX(60px) rotateY(-18deg)}
.ic-od-karte{padding:18px 20px;border-radius:14px;background:var(--ic-f1,#fff);border:1px solid var(--h-linie)}
.ic-od-karte h4{margin:0 0 12px;font-size:.95rem;font-weight:700}
.ic-od-karte .ic-h4-2{margin-top:20px}
.ic-od-karte dl{display:grid;grid-template-columns:118px 1fr;gap:8px 12px;margin:0;align-items:center}
.ic-od-karte dt{font-size:.8rem;color:var(--h-text-2)}
.ic-od-karte dd{position:relative;margin:0;display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 11px;border-radius:9px;border:1px solid var(--h-linie);background:var(--ic-f2,#FAFBFD);font-size:.82rem;white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s,background .3s,opacity .4s,max-height .45s,min-height .45s,padding .45s,margin .45s}
.ic-od-karte dd.leuchtet{border-color:var(--ic-blau-rand,#9DB6FF);background:var(--ic-blass,#F5F8FF);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.ic-leer{color:var(--h-text-3)}
.ic-proz{margin-left:auto;padding:3px 7px;border-radius:7px;border:1px solid var(--h-linie);font-size:.72rem;color:var(--h-text-2);font-variant-numeric:tabular-nums}
.ic-av{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font:700 .6rem/1 "Manrope",sans-serif;font-style:normal;color:#fff}
.ic-av-blau{background:linear-gradient(140deg,#5CCBFF,#2F6BFF)}.ic-av-violett{background:linear-gradient(140deg,#C495FF,#7B3BFF)}.ic-av-bern{background:linear-gradient(140deg,#FFD27A,#F59E0B)}
/* Generalist: der Verkaufsmakler fällt weg, der Einkauf trägt 100 % */
.ic-od-karte dt.weg,.ic-od-karte dd.weg{opacity:0;max-height:0;min-height:0;padding-top:0;padding-bottom:0;margin-top:-8px;border-width:0;overflow:hidden}
.ic-id-zeile{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(var(--ic-f1,#fff),var(--ic-f1,#fff)) padding-box,linear-gradient(120deg,var(--cyan),var(--blau) 45%,var(--violett)) border-box;border:1.5px solid transparent;box-shadow:0 12px 28px -18px rgba(47,107,255,.8)}
.ic-id-titel{font-size:.8rem;color:var(--h-text-2);width:106px;flex:none}
.ic-id-bau{display:flex;font:700 1.25rem/1 "JetBrains Mono",monospace;letter-spacing:.02em;color:var(--h-text)}
.ic-seg{font-style:normal;display:inline-block;max-width:4em;overflow:hidden;white-space:nowrap;transition:max-width .5s cubic-bezier(.22,1,.36,1),opacity .4s,color .4s,transform .5s cubic-bezier(.34,1.4,.5,1)}
.ic-seg.aus{max-width:0;opacity:0;transform:translateY(-10px)}
.ic-seg.neu{color:var(--ic-blau-t,var(--blau))}
.ic-nr{display:inline-block;font-variant-numeric:tabular-nums}
.ic-eigen{font-style:normal;display:inline-block;max-width:10em;overflow:hidden;white-space:nowrap;transition:max-width .5s cubic-bezier(.22,1,.36,1),opacity .4s}
.ic-eigen.aus{max-width:0;opacity:0}
.ic-eigen-text.tippt::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--blau);animation:ic-cursor .7s steps(2) infinite}
.ic-id-hinweis.eigen{color:var(--ic-violett-t,#7A2FD6);background:var(--ic-violett-bg,#F2E8FF)}
.ic-id-hinweis{margin-left:auto;padding:4px 9px;border-radius:999px;font:600 .6rem/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ic-gruen-t,#11804F);background:var(--ic-gruen-bg,#E3F8EE)}
.ic-zeiger{position:absolute;z-index:7;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.ic-zeiger.da{opacity:1}
.ic-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.ic-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.ic-zeiger.klick i{animation:ic-ring .6s ease-out}
.ic-zeiger.klick svg{animation:ic-druck .3s ease}
@keyframes ic-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
@keyframes ic-druck{50%{transform:scale(.82)}}

/* ---------- I4 · Haus & Grund ---------- */
.ic-hg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,2.4vw,32px);max-width:1080px;margin:0 auto;align-items:start}
.ic-hg-links{display:grid;gap:16px;justify-items:center;position:sticky;top:calc(var(--oben-hoehe,90px) + 20px)}
.ic-bogen{position:relative;width:min(100%,380px);aspect-ratio:1/1.3;padding:26px 26px 20px;border-radius:6px;background:#FBFAF5;color:#2B2F3A;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.4);transform:translateY(var(--by,0px)) rotate(var(--br,-2.5deg));background-image:repeating-linear-gradient(180deg,transparent 0 33px,#E7E3D6 33px 34px)}
.ic-bogen-kopf{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid #2B2F3A}
.ic-bogen-kopf b{font-size:1rem;letter-spacing:.02em;text-transform:uppercase}
.ic-bogen-kopf small{font-size:.7rem;color:#6B6E78}
.ic-bogen-zeilen p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;height:34px;line-height:34px;font-size:.72rem}
.ic-bogen-zeilen small{color:#6B6E78;text-transform:uppercase;letter-spacing:.06em;font-size:.6rem}
.ic-bogen-zeilen span{font:italic 500 1.02rem/34px "Segoe Print","Bradley Hand","Comic Sans MS",cursive;color:#1F45B5;transform:rotate(-1deg)}
.ic-scan{position:absolute;left:-10%;right:-10%;top:0;height:70px;background:linear-gradient(180deg,transparent,rgba(0,180,249,.18) 60%,rgba(47,107,255,.55) 92%,transparent);border-bottom:2px solid #5CCBFF;box-shadow:0 6px 24px rgba(0,180,249,.7);opacity:0;transform:translateY(-80px)}
.ic-scannt .ic-scan{animation:ic-scan 2.3s cubic-bezier(.45,0,.55,1) 4 alternate}
@keyframes ic-scan{0%{opacity:0;transform:translateY(-80px)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(calc(380px * 1.3))}}
.ic-hg-steuer{display:flex;align-items:center;gap:14px}
.ic-hochladen{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:0;border-radius:12px;font:700 .9rem/1 "Manrope",sans-serif;color:#fff;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE);box-shadow:0 14px 30px -14px rgba(47,107,255,.9);cursor:pointer;transition:transform .2s,filter .2s}
.ic-hochladen svg{width:17px;height:17px}
.ic-hochladen:hover{transform:translateY(-1px)}
.ic-hochladen:disabled{filter:saturate(.5) brightness(.85);cursor:default;transform:none}
.ic-uhr{font-size:.8rem;color:var(--text-2);letter-spacing:.06em}
.ic-uhr b{display:inline-block;min-width:2.6em;text-align:right;font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums}
.ic-hg-rechts{padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.ic-hg-titel{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px}
.ic-hg-titel b{font-size:1rem;font-weight:700}
.ic-hg-fertig{font-size:.62rem;color:#11804F;opacity:0;transition:opacity .4s}
.ic-hg-rechts.fertig .ic-hg-fertig{opacity:1}
.ic-hg-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ic-hg-ber{border-radius:13px;background:#fff;border:1px solid var(--h-linie);transition:border-color .3s,box-shadow .3s}
.ic-hg-ber.offen{border-color:#9DB6FF;box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.ic-hg-kopf{display:flex;align-items:center;gap:12px;padding:13px 16px}
.ic-hg-kopf b{font-size:.88rem;font-weight:600}
.ic-hg-pfeil{width:8px;height:8px;border:solid var(--h-text-2);border-width:0 1.8px 1.8px 0;transform:rotate(-45deg);transition:transform .35s}
.ic-hg-ber.offen .ic-hg-pfeil{transform:rotate(45deg)}
.ic-hg-status{width:8px;height:8px;border-radius:50%;background:#FF7A45;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.ic-hg-ber.erledigt .ic-hg-status{width:18px;height:18px;margin:-5px 0 -5px -5px;background:#16A36A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.ic-hg-felder{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.ic-hg-ber.offen .ic-hg-felder{grid-template-rows:1fr}
.ic-hg-felder>div{min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 16px}
.ic-hg-ber.offen .ic-hg-felder>div{padding-bottom:14px}
.ic-hg-felder label{display:grid;gap:5px}
.ic-hg-felder small{font-size:.68rem;color:var(--h-text-2)}
.ic-hg-felder span{min-height:34px;padding:8px 10px;border-radius:8px;border:1px solid var(--h-linie);background:#FAFBFD;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-hg-felder span.tippt::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--blau);animation:ic-cursor .7s steps(2) infinite}
@keyframes ic-cursor{50%{opacity:0}}


/* ---------- I5 · Dateien & Verlauf: angeheftete Bühne ---------- */
.dv-buehne{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,3vw,48px);align-items:center}
.dv-schritte{position:relative;list-style:none;margin:0;padding:0 0 0 28px;display:grid;gap:26px}
.dv-bahn{position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.dv-bahn i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(180deg,var(--cyan),var(--blau),var(--violett));box-shadow:0 0 10px rgba(47,107,255,.8)}
.dv-schritt{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;opacity:.38;transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1);cursor:pointer}
.dv-schritt::before{content:"";position:absolute;left:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grund);border:2px solid rgba(255,255,255,.25);transition:all .4s}
.dv-schritt.an{opacity:1;transform:translateX(6px)}
.dv-schritt.an::before{background:var(--blau);border-color:#8FDCFF;box-shadow:0 0 12px rgba(47,107,255,.9)}
.dv-nr{font-size:.72rem;padding-top:4px;background:linear-gradient(90deg,#5CCBFF,#C495FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.dv-schritt h3{margin:0 0 6px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.dv-schritt p{margin:0;font-size:.92rem;line-height:1.5;color:var(--text-2)}
.dv-fenster{position:relative;padding:16px;border-radius:22px;background:var(--h-grund);border:var(--ic-rahmen,1px solid rgba(255,255,255,.55));box-shadow:var(--ic-schatten,0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.5))}
.dv-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--h-linie)}
.dv-objekt{display:flex;align-items:center;gap:9px;font-size:.78rem}
.dv-objekt img{width:44px;height:30px;max-width:none;object-fit:cover;border-radius:6px}
.dv-objekt small{color:var(--h-text-2)}
.dv-reiter{display:flex;gap:4px}
.dv-reiter span{position:relative;padding:7px 11px;border-radius:9px;font-size:.78rem;color:var(--h-text-2);transition:color .3s,background .3s}
.dv-reiter span.an{color:#fff;background:linear-gradient(100deg,#2F6BFF,#7B3BFF)}
.dv-ansichten{position:relative;display:grid}
.dv-ansicht{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(22px) scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.dv-ansicht.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .7s cubic-bezier(.22,1,.36,1) .1s,visibility 0s}
.dv-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 2px 10px}
.dv-zeile b{font-size:.92rem;font-weight:700}
.dv-zeile b em{font-style:normal;font-weight:500;color:var(--h-text-3)}
.dv-legende{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.64rem;color:var(--h-text-2)}
.dv-legende span{display:inline-flex;align-items:center;gap:4px}
.dv-legende svg{width:12px;height:12px}
/* Bilder */
.dv-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dv-bild{position:relative;display:grid;gap:6px;padding:6px 6px 8px;border-radius:12px;background:var(--ic-f1,#fff);border:1px solid var(--h-linie);opacity:0;transform:translateY(18px) rotateX(-30deg);transform-origin:50% 0}
.dv-bilder.an .dv-bild{opacity:1;transform:none;transition:opacity .45s ease calc(.15s + var(--n) * .06s),transform .7s cubic-bezier(.22,1.2,.4,1) calc(.15s + var(--n) * .06s),box-shadow .3s}
.dv-bild.hebt{z-index:3;box-shadow:0 24px 40px -14px rgba(22,27,46,.5),0 0 0 2px var(--ic-blau-rand,#9DB6FF)}
.dv-foto{position:relative;display:block;border-radius:8px;overflow:hidden}
.dv-foto img{width:100%;height:84px;max-width:none;object-fit:cover;display:block}
.dv-titel,.dv-ki{position:absolute;top:6px;padding:3px 7px;border-radius:6px;font:700 .56rem/1 "Manrope",sans-serif;font-style:normal}
.dv-titel{left:6px;color:#3D2A00;background:#FFD27A}
.dv-ki{left:6px;bottom:6px;top:auto;color:#fff;background:linear-gradient(100deg,#2F6BFF,#9B05FE)}
.dv-kanaele{display:flex;gap:3px}
.dv-kanaele i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--ic-kreis-rand,#D5DBE7);color:var(--ic-kreis-t,#A3ABBD);background:var(--ic-f1,#fff);transition:background .3s,color .3s,border-color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.dv-kanaele i svg{width:10px;height:10px}
.dv-bilder.an .dv-kanaele i.an{background:var(--blau);border-color:var(--blau);color:#fff;transition-delay:calc(.6s + var(--n) * .06s + var(--k) * .07s)}
.dv-kanaele i.an:nth-child(6){background:#F5B000;border-color:#F5B000}
.dv-bild small{font-size:.66rem;color:var(--h-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dokumente */
.dv-pfad{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--h-text-2)}
.dv-pfad svg{width:14px;height:14px}
.dv-pfad strong{color:var(--h-text)}
.dv-liste{list-style:none;margin:0;padding:0;border-radius:12px;background:var(--ic-f1,#fff);border:1px solid var(--h-linie);overflow:hidden}
.dv-liste li{display:grid;grid-template-columns:auto 1fr auto 64px auto;gap:12px;align-items:center;padding:0 14px;height:46px;border-bottom:1px solid var(--ic-zlinie,#EEF1F6);font-size:.8rem;opacity:0;transform:translateX(-14px)}
.dv-doks.an .dv-liste li:not(.dv-neu){opacity:1;transform:none;transition:opacity .4s ease calc(.15s + var(--n) * .07s),transform .55s cubic-bezier(.22,1,.36,1) calc(.15s + var(--n) * .07s)}
.dv-liste li.dv-neu{height:0;border-bottom-width:0;transition:height .45s cubic-bezier(.22,1,.36,1),opacity .4s,transform .5s,background .8s}
.dv-liste li.dv-neu.da{height:46px;opacity:1;transform:none;background:var(--ic-gruen-hl,#EEF8F2)}
.dv-liste b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-liste em{font-style:normal;font-size:.72rem;color:var(--h-text-2);text-align:right}
.dv-pdf{padding:3px 6px;border-radius:5px;font:700 .56rem/1 "Manrope",sans-serif;color:var(--ic-rot-t,#C62828);background:var(--ic-rot-bg,#FFE9E9)}
.dv-schalter{display:flex;gap:4px}
.dv-schalter i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--ic-kreis-rand,#D5DBE7);color:var(--ic-kreis-t,#A3ABBD);transition:background .3s,color .3s,border-color .3s}
.dv-schalter i svg{width:12px;height:12px}
.dv-doks.an .dv-schalter i.an{background:#16A36A;border-color:#16A36A;color:#fff;transition-delay:calc(.5s + var(--n) * .1s)}
.dv-aktion svg{width:15px;height:15px;color:var(--h-text-3)}
.dv-ablage{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;height:52px;border-radius:12px;border:1.5px dashed var(--ic-rand,#C3CCE0);font-size:.78rem;color:var(--h-text-2);transition:border-color .3s,background .3s}
.dv-ablage svg{width:16px;height:16px}
.dv-ablage.ziel{border-color:var(--blau);background:var(--ic-blass,#EEF2FF)}
.dv-flug{position:absolute;right:10%;top:-120px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--ic-f2,#fff);box-shadow:0 18px 34px -12px rgba(22,27,46,.45);font-size:.74rem;color:var(--h-text);opacity:0;pointer-events:none}
.dv-flug.fliegt{animation:dv-flug 1.3s cubic-bezier(.45,0,.25,1) forwards}
@keyframes dv-flug{0%{opacity:0;transform:translate(60px,-40px) rotate(8deg)}25%{opacity:1}80%{opacity:1;transform:translate(-30%,118px) rotate(0)}100%{opacity:0;transform:translate(-30%,118px) scale(.8)}}
/* Aktivitäten und Historie */
.dv-chips{display:flex;flex-wrap:wrap;gap:5px}
.dv-chips span{padding:5px 9px;border-radius:8px;border:1px solid var(--h-linie);background:var(--ic-f1,#fff);font-size:.68rem;color:var(--h-text-2)}
.dv-chips span.an{border-color:var(--ic-blau-rand,#B9CBFF);background:var(--ic-blass,#EEF2FF);color:var(--ic-blau-t,#2F6BFF);font-weight:600}
.dv-tl{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dv-tl::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;background:var(--ic-tl-linie,#DCE3F0);transform:scaleY(0);transform-origin:50% 0}
.dv-ansicht.an .dv-tl::before{transform:scaleY(1);transition:transform 1.2s cubic-bezier(.22,1,.36,1) .2s}
.dv-tl li{position:relative;display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(18px)}
.dv-ansicht.an .dv-tl li{opacity:1;transform:none;transition:opacity .4s ease calc(.25s + var(--n) * .12s),transform .6s cubic-bezier(.22,1,.36,1) calc(.25s + var(--n) * .12s)}
.dv-tl i{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;background:var(--blau);transform:scale(0)}
.dv-ansicht.an .dv-tl i{transform:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--n) * .12s)}
.dv-tl i svg{width:14px;height:14px}
.dv-tl span{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;padding:10px 120px 10px 13px;border-radius:11px;background:var(--ic-f1,#fff);border:1px solid var(--h-linie)}
.dv-tl b{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-tl small{flex:none;font-size:.68rem;color:var(--h-text-3)}
.dv-tl time{position:absolute;right:12px;font-size:.66rem;color:var(--h-text-2);font-variant-numeric:tabular-nums}
.dv-tl-aus i{background:#2F6BFF}.dv-tl-ein i{background:#00A8C0}.dv-tl-termin i{background:#7B3BFF}.dv-tl-anruf i{background:#F59E0B}
.dv-tl-auto i{background:linear-gradient(140deg,var(--cyan),var(--violett))}.dv-tl-dok i{background:#5C8DFF}.dv-tl-hist i{background:#5C8DFF}.dv-tl-neu i{background:#16A36A}
.dv-hist .dv-tl span{flex-wrap:nowrap}
.dv-hist s{font-size:.74rem;color:var(--ic-rot-t,#C0392B);text-decoration-thickness:1.5px;white-space:nowrap}
.dv-hist em{font-style:normal;color:var(--h-text-3)}
.dv-hist strong{font-size:.76rem;color:var(--ic-gruen-t,#11804F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-akt .dv-tl li:first-child span{border-color:var(--ic-blau-rand,#9DB6FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.dv-mail{position:absolute;right:-10px;top:52px;width:min(330px,60%);padding:14px 16px;border-radius:14px;background:var(--ic-f2,#fff);border:1px solid var(--h-linie);box-shadow:0 30px 60px -20px rgba(22,27,46,.55);opacity:0;transform:translateX(40px) rotateY(-14deg);transform-origin:100% 50%}
.dv-akt.an .dv-mail{opacity:1;transform:none;transition:opacity .5s ease 1.3s,transform .9s cubic-bezier(.22,1,.36,1) 1.3s}
.dv-mail small{font-size:.64rem;color:var(--h-text-3)}
.dv-mail b{display:block;margin:4px 0 6px;font-size:.84rem}
.dv-mail p{margin:0 0 10px;font-size:.74rem;line-height:1.5;color:var(--h-text-2)}
.dv-anhang{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;background:var(--h-grund);font-size:.7rem}
.dv-anhang svg{width:13px;height:13px;color:var(--ic-rot-t,#C62828)}
.dv-gepinnt .ak-kopf{margin-bottom:clamp(20px,3vh,40px)}
/* Ohne angeheftete Bühne (Handy, Tablet, reduzierte Bewegung): alle vier Ansichten untereinander */
.ic-dv-ab:not(.dv-gepinnt) .dv-buehne{grid-template-columns:1fr}
.ic-dv-ab:not(.dv-gepinnt) .dv-schritte{display:none}
.ic-dv-ab:not(.dv-gepinnt) .dv-kopf{display:none}
.ic-dv-ab:not(.dv-gepinnt) .dv-ansichten{gap:30px}
.ic-dv-ab:not(.dv-gepinnt) .dv-ansicht{grid-area:auto}
.dv-handy-kopf{display:none}
.ic-dv-ab:not(.dv-gepinnt) .dv-handy-kopf{display:block;margin:0 2px 12px}
.dv-handy-kopf h3{margin:0 0 6px;font-size:1.15rem;font-weight:700;color:var(--h-text)}
.dv-handy-kopf p{margin:0;font-size:.88rem;line-height:1.5;color:var(--h-text-2)}
.ic-dv-ab:not(.dv-gepinnt) .dv-zeile>b{display:none}
.ic-dv-ab:not(.dv-gepinnt) .dv-mail{position:relative;right:auto;top:auto;width:auto;margin-top:12px}
@media (max-width:640px){
  .dv-fenster{padding:12px}
  .dv-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-raster li:nth-child(n+5){display:none}
  .dv-legende{display:none}
  .dv-liste li{grid-template-columns:auto 1fr auto;padding:0 10px}
  .dv-liste em,.dv-aktion{display:none}
  .dv-tl span{padding-right:13px;flex-direction:column;gap:2px}
  .dv-tl time{display:none}
  .dv-hist .dv-tl span{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .dv-ansicht{grid-area:auto;opacity:1;visibility:visible;transform:none}
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:900px){
  .ic-start-innen{grid-template-columns:1fr;min-height:0}
  .ic-od{grid-template-columns:1fr}
  .ic-hg{grid-template-columns:1fr}
  .ic-hg-links{position:static}
  .ic-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ic-reihe-3{grid-template-columns:1fr 1fr}
  .ic-reihe-3 .ic-k-gross{grid-column:1/-1}
  .ic-mini .ic-reihe-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .ic-schirm{grid-template-columns:1fr;--rx:0deg;--ry:0deg}
  .ic-an .ic-schirm{--rx:0deg;--ry:0deg}
  .ic-leiste{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:start}
  .ic-leiste img{grid-row:span 3;height:70px}
  .ic-leiste dl,.ic-eig{display:none}
  .ic-reise li{text-overflow:clip}
  .ic-reise li span{visibility:hidden}
  .ic-bogen{width:min(100%,300px);padding:20px 20px 16px;--br:-1.5deg}
  .ic-bogen-zeilen span{font-size:.9rem}
  .ic-reise li.jetzt span{display:inline-block;transform:translateX(-25%)}
  .ic-reise li.jetzt span{visibility:visible;position:relative;z-index:1;overflow:visible}
  .ic-reise li.jetzt{overflow:visible}
  .ic-reise{gap:3px}
  .ic-mini .ic-reihe,.ic-mini .ic-reihe-3{grid-template-columns:1fr 1fr}
  .ic-mini .ic-k-gross{grid-column:1/-1}
  .ic-mini .ic-k small{font-size:.62rem}.ic-mini .ic-k b{font-size:.92rem}.ic-mini h4{font-size:.74rem}
  .ic-od-huelle{padding:12px}
  .ic-od-karte{padding:14px}
  .ic-od-karte dl{grid-template-columns:92px 1fr}
  .ic-id-zeile{flex-wrap:wrap}
  .ic-id-titel{width:auto}
  .ic-hg-felder>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .ic-seite *,.ic-seite *::before,.ic-seite *::after{transition:none!important;animation:none!important}
  .ic-schirm{opacity:1;translate:0 0}
  .ic-warten .ic-k{opacity:1;transform:none}.ic-warten .ic-balken i{transform:none}
}

/* ---------- Dunkle Abschnitte im Stil der übrigen Website (wie Kundenportal): Objektdaten, Dateien & Verlauf ---------- */
.ic-dunkel{--h-grund:var(--panel);--h-karte:#161A24;--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;
  --ic-f1:#161A24;--ic-f2:#1C2130;--ic-zlinie:rgba(255,255,255,.06);--ic-rand:rgba(255,255,255,.18);--ic-tl-linie:rgba(255,255,255,.12);
  --ic-schalter:rgba(255,255,255,.04);--ic-schalter-an:#1C2130;--ic-kreis-rand:rgba(255,255,255,.14);--ic-kreis-t:#6F7281;
  --ic-blau-t:#8FA4FF;--ic-blau-rand:rgba(143,164,255,.55);--ic-blass:rgba(110,140,255,.12);--ic-gruen-bg:rgba(74,222,154,.12);--ic-gruen-t:#4ADE9A;--ic-gruen-hl:rgba(74,222,154,.1);
  --ic-violett-bg:rgba(180,140,255,.14);--ic-violett-t:#C4A6FF;--ic-rot-bg:rgba(255,110,110,.14);--ic-rot-t:#FF8A8A;
  --ic-rahmen:1px solid var(--linie);--ic-schatten:var(--schatten);color:var(--h-text)}
.ic-dunkel .ic-od-schalter button.an,.ic-dunkel .dv-flug,.ic-dunkel .dv-mail{box-shadow:0 18px 34px -12px rgba(0,0,0,.7)}
.ic-dunkel .ic-id-zeile{box-shadow:none}
/* Handy: Aktivitäten und Historie ragten rechts über die Karte (lange Zeilen ohne Umbruch zogen die Liste breiter, Feedback iPhone 18.10.2026) */
@media (max-width:640px){
  .dv-tl{grid-template-columns:minmax(0,1fr)}
  .dv-tl li{min-width:0}
  .dv-tl b{white-space:normal;line-height:1.3}
}

/* ---------- Immobilien-Cockpit auf dem Handy, zweiter Teil (18.10.2026) ---------- */
@media (max-width:640px){
  /* Einstieg: Objektdaten und Eigentümer wie am Desktop (fehlten), alle elf Reiter in zwei Zeilen,
     Kacheln kompakter (das Cockpit war 882 px hoch) */
  .ic-leiste{grid-template-columns:96px minmax(0,1fr)}
  .ic-leiste img{grid-column:1;grid-row:1 / 4}
  .ic-leiste .ic-id{grid-column:2;grid-row:1}
  .ic-leiste>small{grid-column:2;grid-row:2}
  .ic-leiste .ic-eig{display:block;grid-column:2;grid-row:3;margin:0;padding-top:5px}
  .ic-leiste dl{display:grid;grid-column:1 / -1;grid-row:4;grid-auto-flow:column;grid-template-rows:auto auto;justify-content:space-between;gap:3px 8px;margin:4px 0 0;padding-top:8px;border-top:1px solid var(--h-linie)}
  .ic-leiste dd{margin:0;font-weight:600}
  .ic-eig small,.ic-leiste dt{font-size:.6rem}
  .ic-schirm .ic-reise li{font-size:.6rem}
  .ic-reiter{flex-wrap:wrap;gap:7px 11px;font-size:.6rem;overflow:visible}
  .ic-mini .ic-k{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;row-gap:3px;align-items:center;padding:7px 8px 8px}
  .ic-mini .ic-k-ic{width:18px;height:18px;margin:0}
  .ic-mini .ic-k b,.ic-mini .ic-k em{grid-column:1 / -1}
  .ic-mini .ic-k em{font-size:.6rem;letter-spacing:0}
  .ic-mini .ic-gesamt span{font-size:.6rem}
  .ic-mini .ic-k-gross b{font-size:.82rem}
  /* Safari: Fortschrittsbalken mit Skalierung bleibt rund */
  .ic-balken{clip-path:inset(0 round 8px)}
  /* Objektdaten: Objekt-ID auf fester zweiter Zeile (die Zeile sprang zwischen 46 und 106 px);
     beim Generalisten bleibt die Zeile „Verkauf“ als leerer Platz stehen, statt die Karte zu verkürzen */
  .ic-id-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .ic-id-titel{grid-column:1;grid-row:1}
  .ic-id-hinweis{grid-column:2;grid-row:1;margin-left:0}
  .ic-id-bau{grid-column:1 / -1;grid-row:2;white-space:nowrap;height:1.25rem}
  /* „100 %“ und Platzhalter wurden bei 375 px rechts abgeschnitten */
  .ic-od-karte dl{grid-template-columns:84px minmax(0,1fr)}
  .ic-od-karte dd{padding-left:9px;padding-right:9px;font-size:.78rem}
  .ic-leer{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ic-od-karte dt.weg{max-height:none;margin-top:0;opacity:0}
  .ic-od-karte dd.weg{max-height:none;min-height:36px;padding:7px 9px;margin-top:0;border-width:1px;opacity:0}
  /* Haus & Grund: Bogen kleiner und mit fester Höhe (Safari), Liste so hoch wie mit dem größten offenen Bereich,
     damit beim Auf- und Zuklappen nichts darunter springt (schwankte zwischen 529 und 673 px) */
  .ic-bogen{width:260px;height:338px;aspect-ratio:auto;padding:16px 16px 12px}
  .ic-bogen-kopf b{font-size:.86rem}
  .ic-bogen-zeilen span{font-size:.84rem}
  .ic-hg-rechts{min-height:680px}
  .ic-hg-fertig{font-size:.62rem}
  /* Dateien: alle acht Bilder in drei Spalten, Legende sichtbar */
  .dv-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .dv-raster li:nth-child(n+5){display:grid}
  .dv-bild{gap:5px;padding:5px 5px 7px}
  .dv-foto img{height:62px}
  .dv-titel,.dv-ki{top:4px;left:4px;padding:3px 5px;font-size:.6rem}
  .dv-ki{bottom:4px;top:auto}
  .dv-bild{grid-template-columns:minmax(0,1fr)}
  .dv-kanaele{gap:1px}
  .dv-kanaele i{width:14px;height:14px}
  .dv-kanaele i svg{width:9px;height:9px}
  .dv-bild small{font-size:.64rem}
  .dv-legende{display:flex;gap:4px 10px;font-size:.62rem}
  /* Dokumente: Größe unter dem Namen, Aktion wieder da; die neue Datei hat ihren Platz schon vorher (Liste sprang um 52 px) */
  .dv-liste li{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;gap:1px 10px;height:52px;align-content:center;padding:0 10px}
  .dv-liste .dv-pdf{grid-row:1 / 3}
  .dv-liste b{grid-column:2;grid-row:1}
  .dv-liste em{display:block;grid-column:2;grid-row:2;text-align:left;font-size:.66rem}
  .dv-liste .dv-schalter{grid-column:3;grid-row:1 / 3}
  .dv-liste .dv-aktion{display:block;grid-column:4;grid-row:1 / 3}
  .dv-liste li.dv-neu,.dv-liste li.dv-neu.da{height:52px;border-bottom-width:1px}
  .dv-pdf{font-size:.6rem}
  /* Aktivitäten und Historie: Datum und Uhrzeit als letzte Zeile in der Karte; Historie „alt → neu“ in einer Zeile */
  .dv-tl span{padding-bottom:27px}
  .dv-tl time{display:block;left:53px;right:auto;bottom:9px}
  .dv-hist .dv-tl span{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px}
  .dv-hist .dv-tl b,.dv-hist .dv-tl small{flex-basis:100%}
  .dv-hist strong{white-space:normal}
}
/* Handy: Hover-Effekte bleiben auf Touch nicht hängen (18.10.2026) */
@media (max-width:640px) and (hover:none){
  .ic-hochladen:hover{transform:none}
}