/* Startseite Phase 6 – Szene (Hero + drei Ansichten), Plattform Kanzlei/Mandant (B), Suche (C), Belege (D),
   Rollen-Linse (E), Demo mit Ordnungsmotiv (F). Roter Faden: Dokument „Jahresabschluss 2025“ (.faden). */

/* ---------- Szene: Hero und „Alles an einem Ort“ ---------- */
/* ---------- Szene: Hero und „Alles an einem Ort“ ---------- */
.szene { position: relative; height: 340vh; background: linear-gradient(180deg, #fff 0, var(--grund) 34%, var(--grund) 100%); }
.buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); max-width: var(--breite); margin: 0 auto; padding: clamp(20px, 4.5vh, 52px) var(--rand); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: center; overflow: hidden; }
.held-text { grid-area: 1 / 1; position: relative; z-index: 3; display: grid; gap: 18px; align-content: center; max-width: 34rem; will-change: transform, opacity; }
.lead { font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); color: var(--text-2); }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.phasen { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: ph; }
.phasen li { counter-increment: ph; position: relative; padding: 6px 0 6px 34px; font-size: .95rem; color: var(--text-3); transition: color .25s ease-out; }
.phasen li::before { content: counter(ph); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b7c2d1; display: grid; place-items: center; font: 600 .75rem/1 var(--kopf); color: var(--text-3); transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out; }
.phasen li.ist-aktiv { color: var(--navy); font-weight: 600; }
.phasen li.ist-aktiv::before { background: var(--navy); border-color: var(--navy); color: #fff; }
.phasen li.ist-erledigt::before { border-color: var(--petrol); color: var(--petrol); }

/* A-Leiste: Überschrift, Bereichsknöpfe, Beschreibung – erscheint unter dem gewachsenen Workspace */
.a-text { position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(14px, 2.6vh, 28px); z-index: 4; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 32px; align-items: start; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.a-text.ist-sichtbar { visibility: visible; }
.a-kopf { display: grid; gap: 2px; }
.a-kopf h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }
.a-kopf p { color: var(--text-2); font-size: .97rem; }
.a-bereiche { display: grid; gap: 6px; min-width: 0; }
.module { list-style: none; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.module button { position: relative; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #c5cfdc; background: #fff; color: var(--navy); font: 600 .95rem/1 var(--kopf); cursor: pointer; transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.module button:hover { border-color: var(--navy); }
.module button[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.a-beschreibung { color: var(--text); font-size: 1rem; min-height: 3.2em; }

.welt-platz { display: none; }
.bahnen-koepfe { display: none; }
.welt-rahmen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.welt { --k: 1; --rahmen: 0; --leiste: 0; position: absolute; left: 0; top: 0; width: 780px; height: 560px; transform-origin: 0 0; will-change: transform; }
.fenster { position: absolute; inset: 0; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -32px rgba(13,31,60,.35), 0 0 0 1px var(--linie); opacity: var(--rahmen); }
.fenster-kopf { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--linie); font-size: .86rem; color: var(--text-2); }
.fenster-titel { font-weight: 700; color: var(--navy); }
.fenster-suche { margin-left: auto; display: flex; align-items: center; height: 30px; border: 1px solid var(--linie); border-radius: 8px; padding: 0 10px; min-width: 210px; color: var(--text-3); transition: border-color .25s ease-out, box-shadow .25s ease-out; }
.seitenleiste { position: absolute; left: 0; top: 46px; bottom: 0; width: 232px; background: var(--grund); border-right: 1px solid var(--linie); border-bottom-left-radius: 16px; }
.spalte-titel { position: absolute; z-index: 1; font: 700 .76rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .07em; color: #4f5b6f; }
.s-mandanten { left: 16px; top: 62px; }
.s-dokumente { left: 248px; top: 62px; }
.s-aufgaben { left: 248px; top: 328px; }
.s-vorgang { left: 522px; top: 62px; }
.s-nachrichten { left: 522px; top: 282px; }
/* Modulleiste der App: schiebt sich beim Übergang links an das Fenster */
.leiste { position: absolute; right: 100%; top: 0; bottom: 0; width: 168px; margin-right: 8px; border-radius: 16px; background: var(--navy); color: #c9d4e4; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; opacity: var(--leiste); transform: translateX(calc((1 - var(--leiste)) * 40px)); font-size: .9rem; }
.leiste-marke { display: flex; align-items: center; gap: 8px; color: #fff; font: 700 1rem/1 var(--kopf); padding: 4px 6px 14px; }
.leiste-marke img { width: 24px; height: 24px; border-radius: 6px; }
.leiste-punkt { padding: 8px 10px; border-radius: 8px; transition: background-color .3s ease-out, color .3s ease-out; }
.leiste-punkt.ist-aktiv { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
.bezuege { position: absolute; inset: 0; width: 780px; height: 560px; overflow: visible; pointer-events: none; z-index: 30; }

/* Objekte (Koordinaten im Entwurfsraster; Tiefe über --t: 0 hinten … 2 vorn) */
.obj { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: #fff; border-radius: 9px; box-shadow: var(--schatten); font-size: .9rem; line-height: 1.2; color: var(--text); white-space: nowrap; will-change: transform, opacity; transition: box-shadow .4s ease-out, filter .35s ease-out; }
.obj.tiefe-0 { z-index: 8; box-shadow: 0 0 0 1px var(--linie), 0 4px 10px -8px rgba(13,31,60,.3); }
.obj.tiefe-2 { z-index: 12; box-shadow: 0 1px 0 rgba(13,31,60,.06), 0 0 0 1px var(--linie), 0 22px 34px -18px rgba(13,31,60,.45); }
.o-mandant { width: 204px; height: 36px; border-radius: 999px; padding-left: 4px; font-weight: 600; font-size: .88rem; }
.o-mandant b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hell); color: var(--navy); font: 700 .75rem/1 var(--kopf); flex: none; }
.o-mandant.ist-aktiv { box-shadow: 0 0 0 2px var(--navy), 0 8px 18px -12px rgba(13,31,60,.35); }
.o-mandant.ist-aktiv b { background: var(--navy); color: #fff; }
.o-dok, .o-aufgabe, .o-frist { width: 258px; }
.box { width: 15px; height: 15px; border: 1.5px solid #8a96a8; border-radius: 4px; flex: none; }
.kal { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 5px; background: var(--hell); font: 700 .78rem/1 var(--kopf); color: var(--navy); text-align: center; font-style: normal; flex: none; }
.o-status { height: 30px; border-radius: 999px; font-weight: 700; font-size: .82rem; width: 168px; justify-content: center; }
.s-bearb { background: #e7effa; color: #154a86; }
.s-wartet { background: var(--orange-weich); color: var(--orange-text); }
.s-fertig { background: var(--navy); color: #fff; }
.o-freigabe { width: 244px; height: 56px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; border-left: 4px solid var(--orange); font-size: .88rem; }
.o-freigabe b { font: 700 .75rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .05em; color: var(--orange-text); }
.o-nachricht { width: 244px; height: auto; min-height: 44px; padding: 9px 13px; white-space: normal; border-radius: 14px 14px 14px 4px; background: #eef3fa; box-shadow: none; }
.o-nachricht.tiefe-2, .o-nachricht.tiefe-0 { box-shadow: none; }
.o-nachricht--mandant { border-radius: 14px 14px 4px 14px; background: var(--navy); color: #fff; }

/* ---------- C: Dokumente finden ---------- */
.finden { background: var(--grund); padding-block: clamp(64px, 9vw, 112px); border-block: 1px solid var(--linie); }
.finden-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.finden-steuerung { display: grid; gap: 22px; position: sticky; top: calc(var(--kopf-h) + 24px); }
.suchfeld { display: grid; gap: 12px; background: #fff; border-radius: 18px; padding: 20px; box-shadow: var(--schatten); }
.suchfeld > label { font-weight: 700; color: var(--navy); }
.suchfeld input[type="search"] { -webkit-appearance: none; appearance: none; height: 52px; font: 600 1.15rem/1 var(--lauf); padding: 10px 16px; border-radius: 12px; border: 1.5px solid #b9c4d3; color: var(--navy); background: #fff; }
.suchfeld input[type="search"]:focus-visible { border-color: var(--navy); outline: 3px solid var(--orange); outline-offset: 2px; }
.such-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.such-chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--grund); color: var(--navy); font: 600 .92rem/1 var(--lauf); cursor: pointer; }
.such-chips button:hover { border-color: var(--navy); }
.sicht { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.sicht legend { float: left; margin-right: 6px; font-size: .95rem; color: var(--text-2); }
.sicht label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--navy); cursor: pointer; }
.sicht input { width: 20px; height: 20px; accent-color: var(--navy); }
.such-erkannt { font-size: .95rem; color: var(--text-2); min-height: 1.5em; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.such-erkannt b { color: var(--navy); background: var(--petrol-hell); border-radius: 6px; padding: 2px 8px; font-weight: 700; }
.wand-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kachel { position: relative; display: grid; gap: 5px; align-content: start; min-height: 98px; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--linie); transition: opacity .35s ease-out, box-shadow .35s ease-out, filter .35s ease-out; }
.kachel .k-typ { font: 700 .76rem/1.1 var(--kopf); letter-spacing: .05em; text-transform: uppercase; color: var(--blau); }
.kachel .k-name { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--navy); font-size: .93rem; line-height: 1.3; overflow-wrap: break-word; hyphens: manual; }
.kachel .k-wer { font-size: .84rem; color: var(--text-2); }
.kachel.ist-nein { background: transparent; box-shadow: inset 0 0 0 1px var(--linie); }
.kachel.ist-nein .k-name { color: var(--text-2); font-weight: 600; }
.kachel.ist-nein .k-typ, .kachel.ist-nein .k-wer { color: var(--text-3); }
.kachel.ist-nein .dok-icon { border-color: #a9b6c8; }
.kachel.ist-treffer { box-shadow: 0 0 0 2px var(--petrol), 0 16px 28px -18px rgba(13,31,60,.45); }
.kachel.ist-erster { box-shadow: 0 0 0 2.5px var(--orange), 0 18px 30px -16px rgba(13,31,60,.5); }

.wand-mehr { display: none; margin-top: 10px; font-size: .92rem; color: var(--text-2); }
.kachel.ist-erster .k-typ::after { content: " · Treffer"; color: var(--orange-text); }

/* ---------- E: Rollen-Linse ---------- */
.linse-abschnitt { background: var(--navy); color: #c9d4e4; padding-block: clamp(64px, 9vw, 112px); }
.linse-abschnitt h2 { color: #fff; }
.linse-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.linse-text { display: grid; gap: 16px; }
.rollen { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rollen legend { width: 100%; margin-bottom: 6px; font-size: .95rem; }
.rollen label { position: relative; cursor: pointer; }
.rollen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rollen span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); color: #fff; font: 600 1rem/1 var(--kopf); transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.rollen input:checked + span { background: #fff; color: var(--navy); border-color: #fff; }
.rollen input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.linse-satz { min-height: 3.2em; color: #e6ecf5; }
.linse { color: var(--text); }
.linse-zeilen { list-style: none; padding: 8px 0; margin: 0; }
.linse-zeilen li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 52px; padding: 10px 20px; border-top: 1px solid var(--linie); transition: background-color .35s ease-out; }
.linse-zeilen li:first-child { border-top: 0; }
.lz-name { flex: 1 1 240px; font-weight: 600; color: var(--navy); transition: color .35s ease-out, opacity .35s ease-out; }
.lz-wert { font-size: .92rem; color: var(--text-2); transition: opacity .35s ease-out; }
.lz-alt { display: none; font-size: .88rem; font-weight: 700; color: var(--orange-text); }
.linse-zeilen li.ist-gesperrt { background: repeating-linear-gradient(135deg, #fff 0 10px, #f3f5f8 10px 20px); }
.linse-zeilen li.ist-gesperrt .lz-name { color: #7a8597; text-decoration: line-through; text-decoration-color: rgba(122,133,151,.6); }
.linse-zeilen li.ist-gesperrt .lz-wert { opacity: 0; }
.linse-zeilen li .lz-alt.ist-an { display: inline; }
.linse-zeilen li.ist-anders .lz-wert { opacity: 0; }
.linse-zeilen li.ist-anders .lz-name { text-decoration: none; color: var(--navy); }
.fakten { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; margin-top: clamp(40px, 6vw, 64px); }
.fakten li { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid rgba(255,255,255,.22); font-size: .95rem; }
.fakten b { color: #fff; font-family: var(--kopf); font-size: 1.05rem; }
.mehr--hell a { color: #fff; }


/* ---------- Roter Faden: das wiederkehrende Dokument „Jahresabschluss 2025“ ---------- */
.faden { position: relative; box-shadow: inset 3px 0 0 var(--orange), 0 0 0 1px var(--linie), 0 10px 22px -14px rgba(13,31,60,.35) !important; }
.faden::after { content: ""; position: absolute; right: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--orange); }

/* ---------- A: Ansichten derselben Akte ---------- */
.fenster-titel { display: grid; }
.fenster-titel > span { grid-area: 1 / 1; white-space: nowrap; }
.portal-flaeche { position: absolute; left: 404px; right: 8px; top: 54px; bottom: 8px; border-radius: 12px; background: #fff7ef; box-shadow: inset 0 0 0 1px #f6dcc2; opacity: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; font-size: .8rem; color: var(--orange-text); }
.portal-flaeche b { font: 700 .86rem/1.2 var(--kopf); color: var(--navy); }
.portal-flaeche > * { position: absolute; right: 16px; top: 12px; }
.portal-flaeche > span { top: 30px; }
.v1-status { left: 250px; top: 64px; }
.v1-unterlagen { left: 250px; top: 150px; }
.v1-aufgaben { left: 516px; top: 150px; }
.v2-kanzlei { left: 20px; top: 64px; }
.v2-portal { left: 420px; top: 64px; color: var(--orange-text); }
.spalte-titel[data-v="1"], .spalte-titel[data-v="2"] { opacity: 0; }
.stufenlinie { position: absolute; inset: 0; width: 780px; height: 560px; overflow: visible; pointer-events: none; z-index: 2; }
.stufen-pfad { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; }

/* ---------- B: eine Plattform, zwei Zugänge ---------- */
.zusammen { position: relative; height: 300vh; background: linear-gradient(180deg, var(--grund) 0, #fff 30%); }
.zusammen-buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); padding-block: clamp(18px, 3.5vh, 40px) clamp(14px, 2.5vh, 28px); }
.zusammen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: end; gap: 12px 32px; width: 100%; }
.zusammen-kopf .kopfblock { gap: 8px; }
.zus-steuerung { display: grid; gap: 8px; justify-items: end; }
.zus-meldung { min-height: 3.2em; color: var(--text); font-size: 1rem; text-align: right; max-width: 34rem; }
.zus-schritte { list-style: none; padding: 0; display: flex; gap: 6px; }
.zus-schritte button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #c5cfdc; background: #fff; color: var(--navy); font: 700 1rem/1 var(--kopf); cursor: pointer; transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.zus-schritte button:hover { border-color: var(--navy); }
.zus-schritte button.ist-erreicht { border-color: var(--petrol); color: #1f6378; }
.zus-schritte button[aria-current="step"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.zus-flaeche { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; }
.plattform { position: relative; flex: 1; max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); border-radius: 20px; background: #fff; box-shadow: var(--schatten-gross); }
.plattform-kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--linie); font-size: .88rem; color: var(--text-2); }
.plattform-kopf b { font: 700 1rem/1 var(--kopf); color: var(--navy); }
.bereich { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; min-width: 0; }
.bereich--k { background: var(--navy); color: #c9d4e4; border-bottom-left-radius: 20px; }
.bereich--m { background: #fff7ef; border-bottom-right-radius: 20px; }
.bereich-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; font-size: .9rem; }
.bereich-kopf b { font: 700 1.05rem/1.2 var(--kopf); color: var(--navy); }
.bereich--k .bereich-kopf b { color: #fff; }
.bereich-kopf .pille { margin-left: auto; transition: background-color .3s ease-out, color .3s ease-out; }
.bereich-titel { font: 700 .76rem/1.2 var(--kopf); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; }
.bereich--k .bereich-titel { color: #9fb0c8; }
.slot { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--text); font-size: .92rem; box-shadow: 0 0 0 1px var(--linie); visibility: hidden; opacity: 0; transition: opacity .35s ease-out; }
.slot > span { flex: 1; min-width: 0; }
.bereich--k .slot { background: var(--navy-2); color: #e6ecf5; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.slot.ist-da { visibility: visible; opacity: 1; }
.slot--blase { border-radius: 12px 12px 12px 4px; background: #eef3fa; box-shadow: none; }
.bereich--k .slot--blase { background: #24395e; }
.slot--mandant { border-radius: 12px 12px 4px 12px; background: var(--navy); color: #fff; }
.bereich--k .slot--mandant { background: #fff; color: var(--navy); }
.slot--upload { visibility: visible; opacity: 1; display: grid; gap: 6px; border: 1.5px dashed #e3b98f; box-shadow: none; background: #fff; }
.slot--upload .balken { height: 6px; border-radius: 3px; background: #f3e3d2; overflow: hidden; }
.slot--upload .balken i { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--b, 0)); }
.slot--upload.ist-erledigt { border-style: solid; border-color: #b9d9c6; }
.naht { position: relative; display: grid; place-items: center; background: linear-gradient(90deg, var(--navy) 0 50%, #fff7ef 50% 100%); }
.naht span { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 6px 14px -8px rgba(13,31,60,.5); background-image: url(/brand/mandaxa-icon-192.png); background-size: 20px; background-repeat: no-repeat; background-position: center; }
.mover { position: absolute; left: 0; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--navy); font-size: .92rem; font-weight: 600; box-shadow: 0 0 0 2px var(--orange), 0 22px 34px -18px rgba(13,31,60,.55); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.mover--notiz { background: #e2f1f5; box-shadow: 0 0 0 2px var(--petrol), 0 18px 30px -18px rgba(13,31,60,.55); border-radius: 4px 12px 12px 12px; }
.mover--antwort { background: var(--navy); color: #fff; border-radius: 12px 12px 4px 12px; }
.m-freigabe { min-height: 44px; }
.leer-halter { position: relative; height: 0; }
.leer { position: absolute; left: 2px; top: 12px; margin: 0; font-size: .88rem; color: var(--text-3); font-style: italic; pointer-events: none; }
.bereich--k .leer { color: #9fb0c8; }
.status-band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 15; }
.status-band path { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 6; }
.status-band.ist-gruen path { stroke: var(--gruen); }

/* ---------- D: Belegverarbeitung als große Produktansicht ---------- */
.beleg-abschnitt { padding-block: clamp(64px, 9vw, 112px); }
.status-marke { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 .76rem/1 var(--lauf); letter-spacing: 0; text-transform: none; background: var(--petrol-hell); color: #1f5d72; vertical-align: middle; }
.beleg-buehne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; margin-top: clamp(28px, 4vw, 44px); border-radius: 22px; overflow: hidden; box-shadow: var(--schatten-gross); background: #fff; }
.beleg-papier { position: relative; margin: 28px; padding: 26px 28px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--linie), 0 24px 40px -28px rgba(13,31,60,.5); font-size: .95rem; color: var(--text); display: grid; gap: 10px; align-content: start; }
.bp-kopf { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.bp-kopf span { font-size: .85rem; color: var(--text-2); }
.bp-titel { font: 700 1.2rem/1.2 var(--kopf); color: var(--navy); }
.bp-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bp-tabelle td { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.bp-tabelle td:last-child { text-align: right; white-space: nowrap; }
.bp-summe td { border-bottom: 0; font-weight: 700; color: var(--navy); }
.beleg-papier [data-feld] { border-radius: 4px; padding: 0 3px; margin: 0 -3px; transition: background-color .35s ease-out, box-shadow .35s ease-out; }
.beleg-papier [data-feld].ist-erkannt { background: var(--petrol-hell); box-shadow: 0 0 0 1.5px var(--petrol); }
.beleg-seite { display: grid; gap: 16px; align-content: start; padding: 28px; background: var(--grund); border-left: 1px solid var(--linie); }
.beleg-status { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.beleg-status li { padding-top: 8px; border-top: 3px solid var(--linie); font: 700 .82rem/1.2 var(--kopf); color: var(--text-3); transition: border-color .3s ease-out, color .3s ease-out; }
.beleg-status li.ist-erreicht { border-color: var(--petrol); color: var(--navy); }
.beleg-status li.ist-jetzt { border-color: var(--orange); color: var(--navy); }
.erkannt ul { list-style: none; padding: 0; display: grid; gap: 0; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--linie); }
.erkannt li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linie); font-size: .93rem; transition: background-color .35s ease-out; }
.erkannt li { position: relative; }
.erkannt li:not(.ist-erkannt) b { visibility: hidden; }
.erkannt li:not(.ist-erkannt)::after { content: ""; position: absolute; left: 144px; top: 50%; width: 38%; height: 10px; margin-top: -5px; border-radius: 5px; background: #e3e8ef; }
@media (max-width: 640px) { .erkannt li:not(.ist-erkannt)::after { left: 120px; } }
.erkannt li:first-child { border-top: 0; }
.erkannt li span { color: var(--text-2); }
.erkannt li b { color: var(--navy); }
.erkannt li.ist-erkannt { background: #fbfdfe; }
.vorschlag-gross { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linie); outline: 1.5px dashed #b9c4d3; outline-offset: -1.5px; transform: translateY(8px); transition: transform .45s var(--aus), box-shadow .3s ease-out, outline-color .3s ease-out; }
.vorschlag-gross:not(.ist-da) .vg-konto, .vorschlag-gross:not(.ist-da) .vg-grund { color: var(--text-3); }
.vorschlag-gross.ist-da { transform: none; outline-color: transparent; box-shadow: 0 0 0 2px var(--petrol); }
.vg-konto { font: 650 1.3rem/1.2 var(--kopf); color: var(--navy); }
.vg-konto b { font-size: 1.9rem; margin-right: 6px; }
.vg-grund { color: var(--text-2); font-size: .93rem; }
.vg-aktion { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.vg-hinweis { font-size: .93rem; color: var(--gruen); font-weight: 700; }
/* Funktionsindex: eine ruhige Fläche, vier Bereiche mit Line-Icons (Strich Dunkelblau, Akzent Orange) */
.index { margin-top: clamp(40px, 6vw, 64px); padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: linear-gradient(180deg, #fff 0, var(--grund) 100%); box-shadow: 0 0 0 1px var(--linie); }
.index h3 { font-size: 1.3rem; }
.index-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 0; margin-top: 22px; }
.index-gruppe { padding-inline: 22px; border-left: 1px solid var(--linie); }
.index-gruppe:first-child { padding-left: 0; border-left: 0; }
.index-gruppe:last-child { padding-right: 0; }
.index-titel { font: 700 1.05rem/1.25 var(--kopf); margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; }
.index-titel-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 46px; justify-content: center; }
.index-titel a { color: var(--navy); padding-block: 4px; text-decoration: underline 2px var(--orange); text-underline-offset: 5px; }
.index-titel a:hover { text-decoration-thickness: 3px; }
.ganz { white-space: nowrap; }
.index-ikon { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 10px 18px -14px rgba(13,31,60,.45); }
.index-ikon, .fkt-ikon { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.index-ikon .ak, .fkt-ikon .ak { stroke: var(--orange); }
.index ul { list-style: none; padding: 0; display: grid; gap: 2px; color: var(--text-2); font-size: .97rem; }
.index li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; line-height: 1.35; }
.fkt-ikon { width: 32px; height: 32px; padding: 6px; border-radius: 9px; background: var(--hell); stroke-width: 1.8; transition: background-color .15s ease-out; }
.index li a { color: var(--blau); text-underline-offset: 3px; }
.index li:has(a:hover) .fkt-ikon { background: var(--orange-weich); }
.index li.ist-vorb { color: var(--text-3); }
.index li.ist-vorb .fkt-ikon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange); stroke: var(--text-3); stroke-dasharray: 3 2.4; }
.index li.ist-vorb .fkt-ikon .ak { stroke-dasharray: none; }
.index li.ist-vorb .marke-vorbereitung { margin-left: 4px; }

/* ---------- F: Demo – Ordnung kehrt zurück ---------- */
.demo-final { padding-block: clamp(56px, 8vw, 104px); background: linear-gradient(180deg, #fff 0, var(--grund) 100%); }
.demo-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.demo-text { display: grid; gap: 16px; }
.demo-text p { color: var(--text-2); }
.agenda { position: relative; background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--schatten-gross); }
.agenda-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.agenda-kopf b { font: 700 1.1rem/1.2 var(--kopf); color: var(--navy); }
.agenda-kopf span { font-size: .92rem; color: var(--text-2); }
.agenda-liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.agenda-liste li, .agenda-faden { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 10px; background: var(--grund); color: var(--navy); font-size: .97rem; font-weight: 600; will-change: transform, opacity; }
.agenda-liste li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 700 .85rem/1 var(--kopf); }
.agenda-faden { margin-top: 12px; background: #fff; }
/* Ordnungsmotiv: Einträge liegen leicht versetzt in der Karte und ordnen sich einmal, sobald die Agenda sichtbar wird */
.js .agenda:not(.ist-geordnet) .agenda-liste li, .js .agenda:not(.ist-geordnet) .agenda-faden { transform: translateX(var(--vx, 0)) rotate(var(--vr, 0deg)); }
.agenda-liste li, .agenda-faden { transition: transform .7s var(--aus), opacity .5s ease-out; transition-delay: var(--vd, 0s); }
.agenda-faden .pille { margin-left: auto; margin-right: 18px; }

/* ---------- Tablet ---------- */
@media (min-width: 1024px) and (max-width: 1180px) { .held-text h1 { font-size: 2.35rem; } }
@media (max-width: 1023px) {
  .buehne { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding-block: 18px 14px; }
  .held-text { max-width: 40rem; gap: 12px; }
  .phasen, .leiste { display: none; }
  .a-text { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .a-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .a-kopf p { display: none; }
  .module { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); }
  .module::-webkit-scrollbar { display: none; }
  .module button { white-space: nowrap; }
  .zusammen-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .zusammen { height: 240vh; }
  .zus-steuerung { justify-items: start; width: 100%; }
  .zus-meldung { text-align: left; }
  .finden-raster, .linse-raster, .demo-raster { grid-template-columns: minmax(0, 1fr); }
  .finden-steuerung { position: static; }
  .wand-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beleg-buehne { grid-template-columns: minmax(0, 1fr); }
  .beleg-seite { border-left: 0; border-top: 1px solid var(--linie); }
  .index-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .index-gruppe:nth-child(odd) { padding-left: 0; border-left: 0; }
  .index-gruppe:nth-child(even) { padding-right: 0; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .aktionen .knopf--rand { display: none; }
  .lead { font-size: 1rem; }
  .welt { width: 360px; height: 600px; }
  .fenster-suche { display: none; }
  .seitenleiste { display: none; }
  .s-mandanten { left: 14px; top: 60px; }
  .s-dokumente { left: 14px; top: 130px; }
  .s-aufgaben { left: 14px; top: 292px; }
  .s-vorgang { left: 14px; top: 410px; }
  .s-nachrichten { left: 14px; top: 512px; }
  .v1-status { left: 14px; top: 60px; }
  .v1-aufgaben { left: 14px; top: 142px; }
  .v1-unterlagen { left: 14px; top: 270px; }
  .v2-kanzlei { left: 14px; top: 60px; }
  .v2-portal { left: 20px; top: 300px; }
  .portal-flaeche { left: 8px; right: 8px; top: 286px; }
  .portal-flaeche > * { display: none; }
  .fenster-titel { font-size: .95rem; }
  .spalte-titel { font-size: .88rem; }
  .o-status { font-size: .9rem; }
  .o-freigabe b { font-size: .84rem; }
  .obj { font-size: .95rem; }
  .o-mandant { width: 166px; overflow: hidden; font-size: .8rem; }
  .o-mandant b { width: 26px; height: 26px; }
  .o-dok, .o-aufgabe { width: 332px; }
  .o-status { width: 162px; }
  .o-freigabe { width: 332px; height: 30px; flex-direction: row; align-items: center; gap: 8px; }
  .o-nachricht { width: 300px; }
  .obj[data-nur="d"] { display: none; }
  /* B gestapelt: Portal oben (der Vorgang beginnt beim Mandanten), Kanzlei unten */
  .plattform { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 22px auto; }
  .plattform-kopf span { display: none; }
  .bereich--m { order: 1; border-radius: 0; }
  .naht { order: 2; background: linear-gradient(180deg, #fff7ef 0 50%, var(--navy) 50% 100%); }
  .naht span { width: 22px; height: 22px; background-size: 14px; }
  .bereich--k { order: 3; border-radius: 0 0 20px 20px; }
  .bereich { gap: 5px; padding: 10px 12px 12px; }
  .bereich-titel, .leer-halter { display: none; }
  .bereich-kopf { margin-bottom: 0; font-size: .82rem; }
  .bereich-kopf > span { display: none; }
  .slot, .mover { min-height: 36px; padding: 6px 10px; font-size: .85rem; }
  .m-freigabe { min-height: 0; }
  .zus-meldung { font-size: .93rem; min-height: 4.4em; }
  .zus-schritte button { width: 44px; height: 44px; }
  .zus-schritte { gap: 4px; }
  .wand-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kachel { min-height: 92px; padding: 12px; }
  .kachel.ist-ueberzaehlig { display: none; }
  .a-beschreibung { min-height: 4.8em; font-size: .97rem; }
  .wand-mehr { display: block; }
  .beleg-papier { margin: 16px; padding: 18px; }
  .beleg-seite { padding: 18px 16px; }
  .erkannt li { grid-template-columns: 96px 1fr; }
  .index { padding: 22px 18px 24px; border-radius: 18px; }
  .index-raster { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; }
  .index-gruppe, .index-gruppe:nth-child(n) { padding: 18px 0 14px; border-left: 0; border-top: 1px solid var(--linie); }
  .index-gruppe:first-child { border-top: 0; padding-top: 8px; }
  .index-titel { margin-bottom: 4px; }
  .index-ikon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; }
  .index ul { font-size: .97rem; }
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .linse-zeilen li { padding: 10px 14px; }
}
/* Niedrige Bildschirme: Zusammenarbeit nicht anheften (sonst passt die Plattform nicht in die Bühne) */
@media (max-width: 1023px) and (max-height: 739px) {
  .zusammen { height: auto; }
  .zusammen-buehne { position: relative; top: 0; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fkt-ikon { transition: none; }
  .szene { height: auto; }
  .buehne { position: relative; top: 0; height: auto; min-height: 0; overflow: visible; }
  .welt-platz { display: block; grid-area: 1 / 2; align-self: center; }
  .a-text { position: relative; left: auto; right: auto; bottom: auto; grid-column: 1 / -1; opacity: 1 !important; visibility: visible; transform: none !important; padding-top: 12px; }
  .zusammen { height: auto; }
  .zusammen-buehne { position: relative; top: 0; height: auto; }
  .zus-flaeche { min-height: 560px; }
  .vorschlag-gross { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .welt-platz { grid-area: auto; order: 2; } .a-text { order: 3; } }