/* =========================================================
   Verkaeufer-Portal: Patock ImmoPlus GmbH (PIP)
   PIP-Look nach Marken-Kit mp_design-pip: ORANGE #FF7D0F ist die
   EINZIGE Schmuckfarbe (Primaer UND CTA), Anthrazit-Text,
   Hellorange-Flaechen #FFF1E6, viel Weissraum.
   Fork von /coinvest (dort PHO-Gelb). Die Variablen heissen aus
   Fork-Gruenden weiter --blau/--hellblau, tragen aber ORANGE-Werte.
   ========================================================= */
:root{
  --blau:#FF7D0F;   --blau-d:#e96d05;        /* Primaerfarbe = PATOCK-ORANGE */
  --orange:#FF7D0F; --orange-d:#e96d05;      /* Akzent / CTA (identisch, eine Schmuckfarbe) */
  --hellblau:#FFF1E6; --blaurand:#F6C69B;    /* Flaechen + Raender (Hellorange) */
  --hellorange:#FFF3E5;
  --text:#1A1A1A; --grau:#595959; --linie:#e3e9ec; --weiss:#fff;
  --head:"Montserrat","Century Gothic","Futura",system-ui,"Segoe UI Semibold","Segoe UI",sans-serif;
  --body:system-ui,"Segoe UI",Calibri,Arial,sans-serif;
  --radius:18px;
  --shadow:0 18px 50px rgba(10,17,20,.12);
  --shadow-sm:0 8px 24px rgba(10,17,20,.08);
  --grad:linear-gradient(90deg,var(--blau),var(--blau-d));          /* Flaechen/Header */
  --grad-cta:linear-gradient(90deg,var(--orange),var(--orange-d));  /* CTA-Buttons */
}
*{box-sizing:border-box}

/* Useransicht-Banner: Admin schaut mit den Augen einer Person (nur Lesen) */
.ansicht-band{position:sticky; top:0; z-index:80; background:var(--hellblau);
  border-bottom:2px solid var(--blau); padding:.55rem 1rem; text-align:center;
  font-size:.92rem; color:var(--text); box-shadow:var(--shadow-sm)}
.ansicht-band a{margin-left:.8rem; font-weight:800; color:var(--blau-d); white-space:nowrap}
.ansicht-band a:hover{text-decoration:underline}
/* Zwei sticky-Elemente wuerden sich beim Scrollen ueberlagern: unter dem Band
   scrollt der Portal-Kopf deshalb normal mit */
.ansicht-band + .phdr{position:static}
@media print{.ansicht-band{display:none !important}}

body{margin:0; font-family:var(--body); color:var(--text); line-height:1.65;
  background:linear-gradient(160deg,#fff 0%, var(--hellblau) 100%); min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-size:17px; font-weight:500}   /* kraeftiger und besser lesbar (Manfred-Wunsch) */
img{max-width:100%; height:auto}
a{color:var(--blau-d); text-decoration:none; font-weight:600}
h1,h2,h3{font-family:var(--head); line-height:1.15; margin:0 0 .45em; letter-spacing:-.3px; font-weight:800}
p{margin:0 0 1rem}
.muted{color:#454b51}
.intro{color:#454b51; font-size:1.02rem}
code{font-family:Consolas,Menlo,monospace}

.wrap{max-width:1020px; margin:0 auto; padding:0 22px}

/* ---------- Login ---------- */
.login-stage{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 0}
.login-card{width:100%; max-width:440px; background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:2.6rem 2.4rem; position:relative; overflow:hidden}
.login-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad)}
.login-logo{height:56px; width:auto; margin:0 auto 1.6rem; display:block}
.login-card h1{font-size:1.45rem; text-align:center}
.login-sub{text-align:center; color:var(--grau); font-size:.95rem; margin-bottom:1.8rem; text-wrap:balance}
.lock-badge{display:flex; align-items:center; justify-content:center; gap:.45rem; margin:0 auto 1.1rem;
  width:max-content; font-family:var(--head); font-size:.7rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; background:var(--hellblau); color:var(--blau-d);
  padding:.28rem .85rem; border-radius:999px; border:1px solid var(--blaurand); text-decoration:none}
a.lock-badge:hover{color:var(--blau-d); background:var(--hellblau)}
.lock-badge svg{width:12px; height:12px}
.lock-badge .schloss{display:inline-flex; align-items:center; color:inherit; padding:.1rem}

.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem}
.field label{font-family:var(--head); font-weight:700; font-size:.86rem}
.field input{font-family:var(--body); font-size:1rem; padding:.8rem .95rem; border:1px solid var(--linie);
  border-radius:11px; background:#fff; color:var(--text)}
.field input:focus{outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau)}

/* Passwortfeld mit Auge-Schalter */
.pww{position:relative; display:flex; align-items:center}
.pww input{width:100%; padding-right:3rem}
.pwt{position:absolute; right:.45rem; display:flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border:0; background:none; cursor:pointer; border-radius:8px; color:#9aa1a7}
.pwt:hover{color:var(--blau-d); background:var(--hellblau)}
.pwt svg{width:20px; height:20px}
.pwt .eye-off{display:none}
.pwt.on .eye{display:none}
.pwt.on .eye-off{display:block}
.pwt.on{color:var(--blau-d)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  min-height:48px; padding:.95rem 1.5rem; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:1rem; letter-spacing:.2px;
  background:var(--grad-cta); color:#fff; box-shadow:0 8px 22px rgba(255,125,15,.3);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease}
.btn:hover{filter:brightness(.96); transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,125,15,.42)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-sm{width:auto; padding:.55rem 1.15rem; font-size:.88rem; box-shadow:none; min-height:44px}
.btn-ghost{background:transparent; color:var(--blau-d); border:2px solid var(--blau); box-shadow:none}
.btn-ghost:hover{background:var(--hellblau); color:var(--blau-d); filter:none}
.btn-danger{background:#fdeaea; color:#b03434; border:1px solid #f3c2c2; box-shadow:none}
.btn-danger:hover{background:#f8d7d7; filter:none}
.linkbtn{background:none; border:0; color:#b03434; cursor:pointer; font-size:.8rem; text-decoration:underline; padding:0}

.alert{padding:.9rem 1.1rem; border-radius:11px; font-weight:600; font-size:.92rem; margin-bottom:1.2rem}
.alert.err{background:#fdeaea; border:1px solid #f3c2c2; color:#b03434}
/* Positiv-Meldungen IMMER gruen (Manfred-Vorgabe) */
.alert.ok{background:#e6f7ec; border:1px solid #b7e3c6; color:#1c7a3f}

.login-foot{text-align:center; margin-top:1.6rem; font-size:.8rem; color:var(--grau)}
.login-foot a{color:var(--grau); text-decoration:underline}

/* ---------- Portal ---------- */
.phdr{background:#fff; border-bottom:1px solid var(--linie); height:70px; display:flex; align-items:center;
  position:sticky; top:0; z-index:20}
.phdr .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.phdr-logo{height:38px; width:auto}
.phdr-right{display:flex; align-items:center; gap:1rem;
  flex:1; justify-content:flex-start; margin-left:2.2rem; min-width:0}  /* links neben dem Logo (Manni-Vorgabe) */
.phdr-right .btn-sm{padding:.55rem 1.4rem}
.phdr-right .pille-ok{order:9}  /* Status-Pille ans Ende der linken Gruppe */
.pille-ok{display:inline-flex; align-items:center; gap:.45rem; background:#e6f7ec;
  border:1px solid #b7e3c6; color:#1c7a3f; font-family:var(--head); font-weight:700;
  font-size:.78rem; letter-spacing:.5px; padding:.32rem .85rem; border-radius:999px; white-space:nowrap}
.pille-dot{width:9px; height:9px; border-radius:50%; background:#2eaf5e;
  box-shadow:0 0 0 0 rgba(46,175,94,.5); animation:pillepuls 2s infinite}
@keyframes pillepuls{0%{box-shadow:0 0 0 0 rgba(46,175,94,.45)}70%{box-shadow:0 0 0 7px rgba(46,175,94,0)}100%{box-shadow:0 0 0 0 rgba(46,175,94,0)}}
@media (prefers-reduced-motion:reduce){.pille-dot{animation:none}}
.phdr-user{font-family:var(--head); font-weight:700; font-size:.92rem}
.phdr-user span{display:block; font-family:var(--body); font-weight:400; font-size:.74rem; color:var(--grau)}

.portal-main{padding:2.6rem 0 4rem}
.eyebrow{text-transform:uppercase; letter-spacing:3px; font-size:.74rem; font-weight:800;
  font-family:var(--head); color:var(--blau-d); margin:0 0 .5rem}
.portal-main h1{font-size:1.7rem}

.pcard{background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.8rem 2rem; margin-top:1.6rem; position:relative; overflow:hidden}
.pcard::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad)}
.pcard h2{font-size:1.15rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.pcard h2 svg{width:20px; height:20px; flex:0 0 auto}

.dockey{display:flex; align-items:center; gap:1rem; background:var(--hellblau);
  border:1px solid var(--blaurand); border-radius:12px; padding:1rem 1.2rem; margin-top:.4rem}
.dockey code{font-size:1.05rem; font-weight:700; letter-spacing:1px; background:#fff;
  padding:.35rem .8rem; border-radius:8px; border:1px solid var(--blaurand)}
.dockey p{margin:0; font-size:.88rem; color:var(--grau)}

table.docs{width:100%; border-collapse:collapse; margin-top:.4rem}
table.docs th{font-family:var(--head); font-size:.76rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--grau); text-align:left; padding:.5rem .6rem; border-bottom:2px solid var(--linie)}
table.docs td{padding:.65rem .6rem; border-bottom:1px solid var(--linie); font-size:.95rem}
table.docs tr:last-child td{border-bottom:0}
table.docs .doc-name{font-weight:600}
table.docs .doc-meta{color:var(--grau); font-size:.85rem; white-space:nowrap}
.docempty{color:var(--grau); font-size:.92rem; padding:.6rem 0 0}

.upl{display:flex; flex-direction:column; gap:1rem; margin-top:.4rem}
.upl input[type=file]{font-family:var(--body); padding:1.1rem; background:var(--hellblau);
  border:1.5px dashed var(--blaurand); border-radius:12px; width:100%}
.upl .hint{font-size:.82rem; color:var(--grau); margin:0}

/* ---------- Dokumenten-Passwort: zentraler Hero-Kasten ---------- */
.dockey-hero{background:#fff; border:2px solid var(--blaurand); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.8rem 2rem 1.6rem; margin-top:1.6rem; text-align:center;
  position:relative; overflow:hidden}
.dockey-hero::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--grad)}
.dh-icon{width:52px; height:52px; margin:0 auto .5rem; border-radius:50%; background:var(--hellblau);
  border:1px solid var(--blaurand); display:flex; align-items:center; justify-content:center; color:var(--blau-d)}
.dh-icon svg{width:26px; height:26px}
.dh-label{font-family:var(--head); font-weight:800; font-size:1.05rem; margin:0 0 .5rem}
.dh-code{display:inline-block; font-size:1.55rem; font-weight:700; letter-spacing:2.5px;
  background:var(--hellblau); border:1px solid var(--blaurand); border-radius:12px;
  padding:.55rem 1.4rem; margin-bottom:.6rem; user-select:all}
.dh-note{margin:0; color:#454b51; font-size:.95rem}

/* Auswahl-Kacheln (aus coinvest uebernommen, generisch nutzbar) */
.wahl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.2rem}
.wahl input{position:absolute; opacity:0; pointer-events:none}
.wahl-box{display:flex; flex-direction:column; align-items:center; gap:.2rem; cursor:pointer;
  padding:1.2rem 1rem 1.1rem; border:2px solid var(--linie); border-radius:14px; background:#fff;
  transition:border-color .15s ease, background .15s ease, transform .15s ease; position:relative}
.wahl-box b{font-family:var(--head); font-size:1.35rem}
.wahl-box small{color:var(--grau); font-size:.82rem; letter-spacing:.5px; text-transform:uppercase;
  font-family:var(--head); font-weight:700}
.wahl-kond{margin-top:.55rem; padding-top:.55rem; border-top:1px dashed var(--linie);
  font-size:.88rem; color:#454b51; text-align:center; line-height:1.5}
.wahl-box:hover{transform:translateY(-2px); border-color:var(--blaurand)}
.wahl input:checked + .wahl-box{border-color:var(--blau); background:var(--hellblau);
  box-shadow:0 8px 22px rgba(0,145,200,.18)}
.wahl input:focus-visible + .wahl-box{outline:2px solid var(--blau); outline-offset:2px}

.wahl-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .wahl-grid.vier{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .wahl-grid.vier{grid-template-columns:1fr} }

/* Zustand "angefragt": alles grau, der gewaehlte GRUEN */
.wahl-box.grau{cursor:default; background:#f3f4f5; border-color:#e2e5e8; color:#7a8087}
.wahl-box.grau b, .wahl-box.grau .wahl-kond{color:#7a8087}
.wahl-box.grau:hover{transform:none}
.wahl-box.aktiv-gruen{cursor:default; background:#e6f7ec; border-color:#4caf6d}
.wahl-box.aktiv-gruen b{color:#1c7a3f}
.wahl-box.aktiv-gruen .wahl-kond, .wahl-box.aktiv-gruen small{color:#2e6b45}
.wahl-box.aktiv-gruen:hover{transform:none}
.wahl-tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:#454b51; color:#fff; font-family:var(--head); font-weight:700; font-size:.7rem;
  letter-spacing:1px; text-transform:uppercase; padding:.2rem .75rem; border-radius:999px; white-space:nowrap}
.wahl-tag.gruen{background:#1c7a3f}

/* Widerruf-Button: bewusst auffaellig */
.btn-widerruf{background:#c24141; color:#fff; box-shadow:0 8px 22px rgba(194,65,65,.32);
  font-size:1.02rem; padding:1rem 2rem; width:auto}
.btn-widerruf:hover{background:#a83434; color:#fff; filter:none;
  box-shadow:0 12px 28px rgba(194,65,65,.45)}

/* Live-Zusammenfassung der Auswahl */
.zsum{background:var(--hellblau); border:1px solid var(--blaurand); border-radius:12px;
  padding:.9rem 1.1rem; margin:0 0 1.2rem; font-size:1rem}

/* Stammdaten-Formular */
.sd-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem 1.2rem; margin-bottom:1.2rem}
.sd-grid label{display:flex; flex-direction:column; gap:.3rem; font-family:var(--head); font-weight:700; font-size:.84rem}
.sd-grid input{font-family:var(--body); font-size:1rem; padding:.65rem .8rem;
  border:1px solid var(--linie); border-radius:10px}
.sd-grid input:focus{outline:2px solid var(--blau); border-color:var(--blau)}
@media(max-width:560px){ .sd-grid{grid-template-columns:1fr} }

/* Freitext */
.vs-text{width:100%; font-family:var(--body); font-size:1rem; padding:.8rem .95rem;
  border:1px solid var(--linie); border-radius:11px; resize:vertical; margin-bottom:.4rem}
.vs-text:focus{outline:2px solid var(--blau); border-color:var(--blau)}

/* Aktionen mittig unter der Auswahl */
.wahl-actions{display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:.4rem}
.wahl-actions .btn{width:auto}
.wahl-hint{margin:0; font-size:.88rem; color:#454b51; text-align:center}

/* Auswahl-Boxen (Monat/Termin) */
.start-label{font-family:var(--head); font-weight:800; font-size:.98rem; margin:1.1rem 0 .6rem}
.start-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1.2rem}
.start input{position:absolute; opacity:0; pointer-events:none}
.start-box{display:flex; flex-direction:column; align-items:center; gap:.1rem; cursor:pointer;
  padding:.75rem .6rem; border:2px solid var(--linie); border-radius:12px; background:#fff;
  font-family:var(--head); font-weight:700; font-size:.92rem; text-align:center;
  transition:border-color .15s ease, background .15s ease}
.start-box small{color:var(--grau); font-family:var(--body); font-weight:600; font-size:.82rem}
.start-box:hover{border-color:var(--blaurand)}
.start input:checked + .start-box{border-color:var(--blau); background:var(--hellblau)}
.start input:focus-visible + .start-box{outline:2px solid var(--blau); outline-offset:2px}
@media(max-width:560px){ .start-grid{grid-template-columns:1fr} }

/* Datumsfeld */
.start-datum{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.2rem}
.start-datum input[type=date]{font-family:var(--body); font-size:1.05rem; font-weight:600;
  padding:.7rem .9rem; border:2px solid var(--linie); border-radius:12px; width:max-content; min-width:230px}
.start-datum input[type=date]:focus{outline:2px solid var(--blau); border-color:var(--blau)}
.start-datum input[type=date]:valid{border-color:var(--blaurand); background:var(--hellblau)}
.start-datum .hint{font-size:.85rem; color:#454b51; margin:0}

/* "Wie geht es weiter?"-Box */
.weiter-box{background:var(--hellblau); border:1px solid var(--blaurand); border-radius:12px;
  padding:1rem 1.2rem; margin:0 0 1.2rem; font-size:1rem; line-height:1.6}

/* Feldbezogene Fehlermeldungen */
.sd-grid .ferr{font-family:var(--body); font-weight:600; font-size:.8rem; color:#b03434; min-height:1em}
.sd-grid input.invalid{border-color:#e08c8c; background:#fdf4f4}

/* Geheimer Verwaltungs-Punkt auf der Login-Seite (bewusst unscheinbar) */
.geheim{color:inherit; text-decoration:none; font-weight:400; padding:0 .2rem; opacity:.7}
.geheim:hover{opacity:1}

/* Freies Anliegen / Nachricht */
.andere{margin-top:1.4rem; border-top:1px solid var(--linie); padding-top:1rem}
.andere-form{display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; margin-top:.8rem}
.andere-form textarea{width:100%; font-family:var(--body); font-size:1rem; padding:.75rem .9rem;
  border:1px solid var(--linie); border-radius:11px; resize:vertical}
.andere-form textarea:focus{outline:2px solid var(--blau); border-color:var(--blau)}

@media(max-width:560px){ .wahl-grid{grid-template-columns:1fr; gap:1.3rem} }

/* Konditionen / Eckdaten-Kacheln */
.kond-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:.4rem}
.kond{background:#f7fafc; border:1px solid var(--linie); border-radius:12px; padding:.85rem 1rem}
.kond span{display:block; font-size:.74rem; letter-spacing:1px; text-transform:uppercase;
  font-family:var(--head); font-weight:700; color:var(--grau); margin-bottom:.15rem}
.kond b{font-size:1.05rem}
.goody{margin-top:1rem; background:var(--hellblau); border:1px solid var(--blaurand);
  border-radius:12px; padding:.9rem 1.1rem; font-size:.92rem}
table.plan .plan-sum td{border-top:2px solid var(--linie); border-bottom:0; padding-top:.7rem}
.plan-details summary{margin-bottom:.4rem}

/* Admin */
.adm-sum{cursor:pointer; font-family:var(--head); font-weight:700; font-size:.9rem; color:var(--blau-d)}
.adm-form{margin-top:1rem}
.adm-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem 1rem; margin-bottom:.9rem}
.adm-grid label{display:flex; flex-direction:column; gap:.3rem; font-family:var(--head); font-weight:700; font-size:.78rem}
.adm-grid input, .adm-grid select{font-family:var(--body); font-size:.95rem; padding:.55rem .7rem;
  border:1px solid var(--linie); border-radius:9px}
.adm-grid input:focus, .adm-grid select:focus{outline:2px solid var(--blau); border-color:var(--blau)}
.adm-check{display:inline-flex; align-items:center; gap:.45rem; font-size:.88rem; margin:0 1rem .9rem 0}
.adm-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; align-items:center}
.adm-files{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.2rem;
  border-top:1px solid var(--linie); padding-top:1rem}
.adm-filerow{display:flex; align-items:center; gap:.7rem; font-size:.9rem; padding:.25rem 0}
.adm-filerow a{font-weight:600}
.adm-filerow .muted{font-size:.78rem; margin-left:auto}
.adm-upl{display:flex; gap:.6rem; align-items:center; margin-top:.7rem}
.adm-upl input[type=file]{font-size:.85rem; flex:1; padding:.45rem; background:var(--hellblau);
  border:1.5px dashed var(--blaurand); border-radius:9px}

/* Register (Tabs) fuer die Portal-Bereiche */
.tabs{display:flex; gap:.5rem; margin:1.8rem 0 0; flex-wrap:wrap}
.tab{flex:1 1 0; min-width:190px; font-family:var(--head); font-weight:800; font-size:1rem;
  padding:.95rem 1rem; cursor:pointer; border:2px solid var(--blaurand); border-radius:14px;
  background:#fff; color:var(--blau-d); transition:background .15s ease, transform .15s ease}
.tab:hover{transform:translateY(-2px)}
.tab.aktiv{background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 8px 22px rgba(0,145,200,.3)}
.tabpane{display:none}
.tabpane.aktiv{display:block}
.pane-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.2rem}

/* Kopier-Pille (Zwischenablage) */
.kopier{font-family:var(--head); font-weight:700; font-size:.82rem; letter-spacing:.3px;
  padding:.4rem 1rem; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--blau-d); border:2px solid var(--blau);
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.kopier:hover{background:var(--hellblau)}
.kopier.ok{background:#e6f7ec; border-color:#4caf6d; color:#1c7a3f}
.kopier.klein{font-size:.72rem; padding:.2rem .7rem; border-width:1.5px}
.dh-zeile{display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem}
.dh-zeile .dh-code{margin-bottom:0}

/* Admin-Login: klar unterscheidbar (dunkler Balken + dunkles Badge) */
.login-card.admin::before{background:#16191c}
.lock-badge.admin{background:#16191c; color:#fff; border-color:#16191c}
a.lock-badge.admin:hover{background:#2a2f34; color:#fff}

/* ADMINBEREICH: Black Design, damit er sich klar vom Verkaeufer-Bereich abhebt */
body.admin .btn{background:#16191c; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.22)}
body.admin .btn:hover{background:#2a2f34; color:#fff; filter:none; box-shadow:0 12px 28px rgba(0,0,0,.3)}
body.admin .btn-ghost{background:transparent; color:#16191c; border:2px solid #16191c; box-shadow:none}
body.admin .btn-ghost:hover{background:#eef1f4; color:#16191c}
body.admin .btn-danger{background:#c24141; color:#fff; border:0}
body.admin .kopier{border-color:#16191c; color:#16191c}
body.admin .kopier:hover{background:#eef1f4}
body.admin .kopier.ok{background:#e6f7ec; border-color:#4caf6d; color:#1c7a3f}
body.admin .pcard::before{background:#16191c}
body.admin .eyebrow{color:#16191c}
body.admin .adm-band .btn{background:var(--grad); color:#fff} /* Rueck-Button bleibt blau sichtbar */

/* Prozessbalken (Stepper): Kreise auf einer Verbindungslinie */
.stepper{list-style:none; display:flex; padding:0; margin:0 0 1.8rem; counter-reset:s}
.stepper li{flex:1; position:relative; text-align:center; padding-top:2.8rem;
  font-family:var(--head); font-weight:700; font-size:.85rem; color:#8a8f94}
.stepper li::before{counter-increment:s; content:counter(s); position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:38px; height:38px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:#fff; border:3px solid var(--linie); color:#8a8f94}
.stepper li:not(:first-child)::after{content:""; position:absolute; top:17px; right:50%;
  width:100%; height:4px; background:var(--linie); z-index:0}
.stepper li.aktiv{color:var(--text)}
.stepper li.aktiv::before{background:var(--grad-cta); border-color:var(--orange); color:#fff}
.stepper li.fertig{color:#1c7a3f}
.stepper li.fertig::before{content:"✓"; background:#2eaf5e; border-color:#2eaf5e; color:#fff}
.stepper li.fertig:not(:first-child)::after{background:#2eaf5e}
.stepper li.aktiv:not(:first-child)::after{background:linear-gradient(90deg,#2eaf5e,var(--orange))}
@media(max-width:560px){ .stepper li{font-size:.7rem} }

.pane-nav.oben{margin:1.4rem 0 0}

/* Grosser CTA-Button mit Zusatzzeile */
.btn-jetzt{width:auto; display:inline-flex; flex-direction:column; gap:.1rem; line-height:1.2;
  padding:.8rem 1.8rem}
.btn-jetzt small{font-family:var(--body); font-weight:600; font-size:.78rem; opacity:.85}
.start-zeile .oder{font-size:.9rem; color:#454b51; font-weight:600}

/* Status-/Rollen-Pillen an der Karte */
.pille-mini{display:inline-block; vertical-align:middle; font-family:var(--head); font-weight:800;
  font-size:.68rem; letter-spacing:1px; text-transform:uppercase; padding:.22rem .7rem;
  border-radius:999px; margin:0 .25rem 0 .4rem}
.pille-mini.gruen{background:#e6f7ec; border:1px solid #b7e3c6; color:#1c7a3f}
.pille-mini.rot{background:#fdeaea; border:1px solid #f3c2c2; color:#b03434}
.pille-mini.rolle{background:#eef1f4; border:1px solid #d5dbe0; color:#454b51}

/* Prozess-Schritte (Kompakt-Liste) */
.schritte{list-style:none; margin:.9rem 0 0; padding:.9rem 1.1rem; background:#f7fafc;
  border:1px solid var(--linie); border-radius:12px;
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1.2rem; font-size:.9rem}
.schritte li.ok{color:#1c7a3f; font-weight:600}
.schritte li.offen{color:var(--orange-d); font-weight:600}
@media(max-width:760px){ .schritte{grid-template-columns:1fr} }

/* Sortierbare Uebersichtstabelle */
table.sortier th{cursor:pointer; user-select:none; white-space:nowrap}
table.sortier th:hover{color:var(--blau-d)}
table.sortier th.sort-auf::after{content:" ▲"; font-size:.7rem}
table.sortier th.sort-ab::after{content:" ▼"; font-size:.7rem}
table.sortier td{white-space:nowrap}

/* Admin-Aktionsleiste */
.adm-leiste{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.4rem;
  padding:.9rem 1rem; background:#f7fafc; border:1px solid var(--linie); border-radius:12px}
.adm-leiste form{margin:0}
.adm-infos{margin-top:.8rem}
.adm-infos p{margin:0 0 .35rem; font-size:.92rem; color:#454b51}
.adm-spalte-titel{font-family:var(--head); font-weight:800; font-size:.9rem; margin:0 0 .4rem}
.adm-danger{display:flex; align-items:center; gap:.8rem; margin-top:1.2rem;
  padding-top:1rem; border-top:1px dashed #f3c2c2}
.upl-mini{display:inline}

/* Datums-Zeile mit Heute-Button */
.start-zeile{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}

/* Admin-Kennzeichnung: dunkles Band mit grossem Rueck-Button */
.adm-band{background:#16191c; color:#fff; padding:.8rem 0}
.adm-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.adm-band-titel{font-family:var(--head); font-weight:800; letter-spacing:1px; font-size:.95rem; text-transform:uppercase}
.adm-band-btn{width:auto; padding:.75rem 1.6rem; font-size:.95rem}

/* Ablauf-Ampel an Dokumenten */
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle}
.dot.gruen{background:#2eaf5e}
.dot.rot{background:#d24040; box-shadow:0 0 0 0 rgba(210,64,64,.5); animation:pillepuls 1.6s infinite}
.ablauf-rot{color:#b03434}

/* Zusammenfassung ueber dem Absenden-Button */
.zus{background:var(--hellblau); border:2px solid var(--blaurand); border-radius:14px;
  padding:1.1rem 1.3rem 1.2rem; margin:0 0 1.4rem}
.zus-titel{font-family:var(--head); font-weight:800; font-size:1.05rem; margin:0 0 .8rem}
.zus .kond{background:#fff}

/* ---------- Gefuehrtes Home ---------- */
.wrap.schmal{max-width:760px}
.statuskarte h2{font-size:1.5rem}
.home-cta{display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:1.4rem 0 .4rem}
.btn-gross{width:auto; font-size:1.12rem; padding:1.1rem 2.4rem}
.linktext-form{margin:1.2rem 0 0; text-align:center}
.linktext{background:none; border:0; cursor:pointer; color:#8a8f94; font-size:.85rem;
  text-decoration:underline; padding:.2rem}
.linktext:hover{color:#b03434}
.karte-link{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.1rem 1.5rem; margin-top:1.2rem; color:var(--text);
  font-family:var(--head); font-weight:700; transition:transform .15s ease, box-shadow .15s ease}
.karte-link:hover{transform:translateY(-2px); box-shadow:var(--shadow); color:var(--text)}
.karte-link b{color:var(--orange-d)}
.dockey-zeile{font-size:.9rem; color:#454b51; text-align:center; margin:.2rem 0 0}
.dockey-zeile code{background:var(--hellblau); border:1px solid var(--blaurand);
  border-radius:8px; padding:.15rem .6rem; font-weight:700}
.upload-block{margin-top:1.4rem; padding-top:1.2rem; border-top:1px dashed var(--blaurand); text-align:center}
.upload-block p{margin-bottom:.8rem}
.journey{margin-top:1.2rem}

/* Rueckfrage-Pille an Status-Karten */
.karte-kopf{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.rueckfrage{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-family:var(--head); font-weight:700; font-size:.78rem; letter-spacing:.3px;
  border:1.5px solid var(--blau); color:var(--blau-d); border-radius:999px; padding:.3rem .85rem}
.rueckfrage:hover{background:var(--hellblau); color:var(--blau-d)}
.rf-zeile{margin:1rem 0 0; display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap}

/* Widerruf/Abbruch als ORANGE Pille (Manni-Vorgabe) */
button.rueckfrage{background:transparent; cursor:pointer}
.rueckfrage.widerruf{border-color:var(--orange); color:var(--orange-d)}
.rueckfrage.widerruf:hover{background:var(--hellorange); color:#C05E00}

/* Bezug-Anzeige im Nachricht-Formular */
.bezug-pille{display:inline-block; background:var(--hellblau); border:1px solid var(--blaurand);
  border-radius:999px; padding:.4rem 1rem; font-size:.9rem; margin-bottom:1rem}

/* CTA-Karte */
.karte-link.cta{border:2px solid var(--blaurand); background:var(--hellblau)}

/* Zeileneditor (Verwaltung) */
.dl-editor{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.7rem}
.dl-zeile{display:grid; grid-template-columns:1.1fr .7fr 1.1fr 1.1fr auto; gap:.5rem; align-items:center}
.dl-zeile input{font-family:var(--body); font-size:.92rem; padding:.5rem .65rem;
  border:1px solid var(--linie); border-radius:9px}
.dl-zeile input:focus{outline:2px solid var(--blau); border-color:var(--blau)}
@media(max-width:760px){ .dl-zeile{grid-template-columns:1fr 1fr} }

/* Fortschrittsbalken im Cockpit (gruen = erledigt) */
.balken{height:10px; border-radius:999px; background:#eef1f4; margin:1rem 0 .4rem; overflow:hidden}
.balken-voll{height:100%; border-radius:999px; background:linear-gradient(90deg,#2eaf5e,#7ed957)}

/* Laufleiste (langgezogene Pille) */
.laufpille{position:relative; height:38px; border-radius:999px; background:#eef1f4;
  border:1px solid var(--linie); margin:1rem 0 .4rem; overflow:hidden}
.lauf-voll{position:absolute; top:0; left:0; bottom:0; border-radius:999px;
  background:linear-gradient(90deg,#2eaf5e,#7ed957); transition:width .4s ease}
.lauf-links, .lauf-rechts{position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  font-family:var(--head); font-weight:700; font-size:.74rem; white-space:nowrap;
  background:rgba(255,255,255,.82); border-radius:999px; padding:.16rem .6rem}
.lauf-links{left:.45rem; color:#1c7a3f}
.lauf-rechts{right:.45rem; color:#454b51}
@media(max-width:560px){
  .lauf-links, .lauf-rechts{font-size:.62rem}
  .lauf-links{left:.65rem} .lauf-rechts{right:.65rem}
}

/* Dokument-Zeilen (mobilfreundlich) */
.doczeile{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--linie); flex-wrap:wrap}
.doczeile:last-of-type{border-bottom:0}
.dz-info b{display:block; font-family:var(--head); font-size:.95rem}
.dz-info span{font-size:.82rem; color:#454b51}
.dz-aktion{display:flex; gap:.5rem; align-items:center}
.badge-rot{color:#b03434}

/* Auswahl-Kacheln: alle gleich gross */
.wahl{display:flex}
.wahl-box{flex:1; width:100%}
.wahl-genau{display:block; font-size:.78rem; color:var(--grau); margin-top:.15rem}

/* Motivations-Satz */
.jetzt-satz{font-family:var(--head); font-weight:800; font-size:1.15rem; color:var(--blau-d);
  margin:0 0 1rem}
.jetzt-satz b{color:#fff; background:var(--grad);
  padding:.05rem .45rem; border-radius:8px}

/* Zusammenfassung: Wert gross, Zusatzinfo klein */
.kond-sub{display:block; font-style:normal; font-size:.8rem; color:#454b51; margin-top:.2rem; line-height:1.45}
.zus .kond-grid{grid-template-columns:repeat(3,1fr)}
.zus .kond b{font-size:1.15rem}
.zus-goody{margin:.9rem 0 0; background:#fff; border:1px dashed var(--blaurand); border-radius:10px;
  padding:.7rem 1rem; font-size:.92rem}
@media(max-width:700px){ .zus .kond-grid{grid-template-columns:1fr 1fr} }

/* Admin-Uebersicht: mehrzeilige Zeilen mit Prozess-Haekchen */
table.mehrzeilig td{white-space:normal; vertical-align:top; line-height:1.5}
table.mehrzeilig td.doc-name a{font-size:1rem}
.zeile2{display:block; font-size:.8rem; color:var(--grau); font-weight:400; white-space:nowrap}
.zeile2 b{color:var(--text)}
.tick{display:inline-block; font-size:.78rem; font-family:var(--head); font-weight:700;
  margin:.05rem .5rem .05rem 0; white-space:nowrap}
.tick.ok{color:#1c7a3f}
.tick.offen{color:var(--orange-d)}
body.admin .tick.offen{color:#a05a00}

/* Portal-Navigation: jeder Punkt sofort erreichbar */
.pnav{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.4rem}
.pnav a{display:inline-flex; align-items:center; gap:.3rem; font-family:var(--head); font-weight:700;
  font-size:.82rem; color:#454b51; background:#fff; border:1.5px solid var(--linie);
  border-radius:999px; padding:.45rem 1rem; white-space:nowrap}
.pnav a:hover{border-color:var(--blaurand); color:var(--blau-d)}
.pnav a.akt{background:var(--grad); border-color:transparent; color:#fff}
.pnav-n{background:var(--text); color:#fff; font-size:.68rem; border-radius:999px;
  padding:.05rem .45rem; margin-left:.15rem}
.pnav a.akt .pnav-n{background:rgba(0,0,0,.35)}

/* Status-Chips unter der Begruessung */
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.4rem}
.chip{display:inline-flex; align-items:center; gap:.3rem; font-size:.86rem; color:#454b51;
  background:#fff; border:1px solid var(--linie); border-radius:999px; padding:.4rem .95rem}
.chip b{color:var(--text)}
.chip.gruen{background:#e6f7ec; border-color:#b7e3c6; color:#1c7a3f; font-weight:600}

/* Ihr persoenlicher Ansprechpartner */
.ansprech{display:flex; gap:1.4rem; align-items:center}
.ansprech img{width:110px; height:110px; object-fit:cover; object-position:top;
  border-radius:50%; background:var(--hellblau); border:3px solid var(--blaurand); flex-shrink:0}
.ansprech h2{margin:0 0 .3rem}
.ansprech .intro{margin-bottom:.8rem}
.ansprech-wege{display:flex; gap:.5rem; flex-wrap:wrap}
@media(max-width:560px){ .ansprech{flex-direction:column; text-align:center}
  .ansprech-wege{justify-content:center} }

/* Bearbeiten-Pille in der Admin-Uebersicht (bewusst klein und dezent) */
.pille-edit{display:inline-flex; align-items:center; gap:.2rem; margin-top:.3rem;
  font-family:var(--head); font-weight:700; font-size:.62rem; letter-spacing:.2px;
  border:1px solid #d4d7db; color:#5a6068; border-radius:999px; padding:.06rem .5rem; white-space:nowrap}
.pille-edit:hover{background:#16191c; color:#fff; border-color:#16191c}

/* Objekt-Block in der Uebersicht */
.inv-block{padding:.15rem 0 .3rem}
.inv-block + .inv-block{border-top:1px dashed var(--linie)}

/* Status-Spalte zentriert */
td.mitte{text-align:center}
.mitte-text{white-space:nowrap; margin-top:.25rem}

/* Prozess-Liste: nummerierte, klickbare Schritte untereinander */
.tick-kette{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem}
a.tick{display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  border-radius:8px; padding:.05rem .35rem .05rem .15rem; margin:0; white-space:nowrap}
a.tick:hover{background:var(--hellblau)}
body.admin a.tick:hover{background:#eef0f2}
.tick-nr{display:inline-flex; align-items:center; justify-content:center; width:1.05rem; height:1.05rem;
  flex-shrink:0; border-radius:50%; background:#eef0f2; color:#454b51; font-size:.62rem}
a.tick.ok .tick-nr{background:#e6f7ec; color:#1c7a3f}
.tfeil{display:none}

/* Uebersichtstabelle: nie aus der Karte laufen, notfalls horizontal scrollen */
.tab-scroll{overflow-x:auto}
table.mehrzeilig td:last-child{padding-right:.6rem}
table.mehrzeilig td{padding:.55rem .45rem}
table.mehrzeilig .tick{font-size:.72rem}
table.mehrzeilig .zeile2{font-size:.74rem}
table.mehrzeilig .inv-block .zeile2{font-size:.78rem}

/* Rollen-Kennzeichnung */
.rollen-interessent{color:var(--orange-d); font-weight:700}
.rollen-investor{color:#1c7a3f; font-weight:700}
.rollen-admin{color:#16191c; font-weight:700}
.pille-mini.rolle.interessent{background:var(--hellorange); color:var(--orange-d); border-color:#f5cba0}

/* Verteil-Formular (Dokument an mehrere Empfaenger) */
.vt-empf{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem .8rem;
  margin:.4rem 0 .8rem; padding:.7rem .9rem; background:#f7fafc; border:1px solid var(--linie); border-radius:12px}
.vt-e{font-size:.92rem}
.vt-zeile{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin:.4rem 0 .8rem}
.vt-zeile input[type=file]{font-family:var(--body); font-size:.9rem}
@media(max-width:560px){ .vt-empf{grid-template-columns:1fr} }

/* Vertrauenszeile ueber dem Footer */
.vertrauen{text-align:center; font-size:.8rem; color:var(--grau); padding:1rem 1.2rem 0;
  max-width:820px; margin:0 auto}

/* Wizard (Grundgeruest aus coinvest, wird ggf. wiederverwendet) */
.wprog{display:flex; flex-direction:column; gap:.4rem; margin:1rem 0 1.6rem;
  font-family:var(--head); font-weight:700; font-size:.9rem; color:#454b51}
.wbar{height:8px; border-radius:999px; background:#eef1f4; overflow:hidden}
.wbar-voll{height:100%; border-radius:999px; background:var(--grad); transition:width .3s ease}
.wstep{display:none}
.wstep.aktiv{display:block; animation:wrein .25s ease}
@keyframes wrein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.wstep.aktiv{animation:none}}
.wtitel{font-size:1.5rem; margin-bottom:1.2rem}
.wnav{position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; padding:1rem 0 1.2rem; margin-top:1.4rem;
  background:linear-gradient(to top, var(--hellblau) 65%, transparent)}
.wnav .btn{min-width:9.5rem}
@media(max-width:560px){
  .btn-gross{width:100%}
  .wnav .btn{flex:1; min-width:0}
  .doczeile{flex-direction:column; align-items:flex-start}
}

.pfoot{border-top:1px solid var(--linie); padding:1.6rem 0 2.2rem; text-align:center;
  font-size:.8rem; color:var(--grau)}

@media(max-width:760px){
  .pcard{padding:1.4rem 1.2rem}
  /* Kopfleiste: mehrzeilig statt abgeschnitten */
  .phdr{height:auto; padding:.55rem 0}
  .phdr .wrap{flex-wrap:wrap; row-gap:.35rem}
  .phdr-logo{height:30px}
  .phdr-right{flex:1 1 100%; min-width:0; flex-wrap:wrap; gap:.35rem .5rem; margin-left:0;
    justify-content:center}
  .phdr-right .phdr-user{flex:1 1 100%; text-align:center}
  .phdr-right .btn-sm{flex:1 1 auto; justify-content:center; text-align:center}
  .pille-ok{display:none}
  .phdr-user{font-size:.85rem}
  .phdr-user span{display:none}
  .phdr-right .btn-sm{padding:.4rem .8rem; font-size:.72rem}
  table.docs .doc-meta{display:none}
  .kond-grid{grid-template-columns:1fr 1fr}
  .adm-grid{grid-template-columns:1fr 1fr}
  .adm-files{grid-template-columns:1fr}
}

/* =========================================================
   NEU (PIP): Vertikale Journey-Timeline + Checkliste
   CSS-Klassen-Vertrag: .vtl, .vtl-phase, .vtl-step (.fertig/
   .aktuell/.offen/.entfaellt), .vtl-dot, .vtl-datum, .vtl-text,
   .vtl-notiz, .wer-badge (+Varianten), .cl-item, .ampel,
   .fortschritt/.fortschritt-balken
   ========================================================= */

/* ---------- Vertikale Journey-Timeline ---------- */
.vtl{list-style:none; margin:1rem 0 0; padding:0; position:relative}

/* Phasen-Ueberschrift innerhalb der Timeline */
.vtl-phase{font-family:var(--head); font-weight:800; font-size:.8rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--blau-d);
  padding:1.3rem 0 .5rem 3.4rem; position:relative}
.vtl-phase:first-child{padding-top:.2rem}
.vtl-phase::before{content:""; position:absolute; left:3.4rem; right:0; bottom:.3rem;
  height:2px; background:linear-gradient(90deg,var(--blaurand),transparent)}

/* Einzelner Schritt: Punkt links, Inhalt rechts, grosse Touch-Flaeche */
.vtl-step{position:relative; padding:.55rem 0 1.15rem 3.4rem; min-height:48px}
/* senkrechte Verbindungslinie */
.vtl-step::before{content:""; position:absolute; left:calc(1rem + 13px); top:0; bottom:0;
  width:3px; background:var(--linie)}
.vtl-step:last-child::before{bottom:auto; height:1.4rem}
.vtl-step.fertig::before{background:#bfe6cc}

/* Punkt (Dot) */
.vtl-dot{position:absolute; left:1rem; top:.7rem; width:29px; height:29px; border-radius:50%;
  background:#fff; border:3px solid var(--linie); z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800; color:#8a8f94; line-height:1}

/* erledigt: gruener Haken-Kreis */
.vtl-step.fertig .vtl-dot{background:#2eaf5e; border-color:#2eaf5e; color:#fff}
.vtl-step.fertig .vtl-dot::before{content:"✓"}
.vtl-step.fertig .vtl-titel{color:#1c7a3f}

/* aktuell: orangener Puls-Punkt (Muster .pille-dot) */
.vtl-step.aktuell .vtl-dot{border-color:var(--orange); background:var(--orange); color:#fff;
  box-shadow:0 0 0 0 rgba(255,125,15,.5); animation:vtlpuls 2s infinite}
.vtl-step.aktuell .vtl-dot::before{content:"●"; font-size:.6rem}
@keyframes vtlpuls{0%{box-shadow:0 0 0 0 rgba(255,125,15,.45)}
  70%{box-shadow:0 0 0 9px rgba(255,125,15,0)}
  100%{box-shadow:0 0 0 0 rgba(255,125,15,0)}}
@media (prefers-reduced-motion:reduce){.vtl-step.aktuell .vtl-dot{animation:none}}
.vtl-step.aktuell{background:linear-gradient(90deg,var(--hellorange),transparent 70%);
  border-radius:12px}
.vtl-step.aktuell .vtl-titel{color:var(--text)}

/* offen: neutraler leerer Kreis */
.vtl-step.offen .vtl-dot{background:#fff; border-color:var(--linie)}
.vtl-step.offen .vtl-titel{color:#5a6068}

/* entfaellt: hellgrau, Titel dezent durchgestrichen */
.vtl-step.entfaellt{opacity:.62}
.vtl-step.entfaellt .vtl-dot{background:#f3f4f5; border-color:#e2e5e8; color:#b3b8bd}
.vtl-step.entfaellt .vtl-dot::before{content:"✕"}
.vtl-step.entfaellt .vtl-titel{color:#8a8f94; text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:#b3b8bd}

/* Inhalt eines Schritts */
.vtl-titel{font-family:var(--head); font-weight:700; font-size:1rem; display:inline-block;
  margin-right:.4rem}
.vtl-datum{display:inline-block; font-family:var(--head); font-weight:700; font-size:.78rem;
  color:var(--grau); background:#fff; border:1px solid var(--linie); border-radius:999px;
  padding:.12rem .6rem; white-space:nowrap; vertical-align:middle}
.vtl-step.fertig .vtl-datum{border-color:#b7e3c6; color:#1c7a3f; background:#e6f7ec}
.vtl-text{margin:.25rem 0 0; font-size:.95rem; color:#454b51; line-height:1.55}
.vtl-notiz{margin:.45rem 0 0; font-size:.88rem; color:#454b51;
  background:var(--hellblau); border:1px solid var(--blaurand); border-left:4px solid var(--blau);
  border-radius:9px; padding:.5rem .8rem}
.vtl-step.aktuell .vtl-notiz{background:var(--hellorange); border-color:#f5cba0;
  border-left-color:var(--orange)}

/* =========================================================
   NEU (PIP): Vertikaler Klapp-Zeitstrahl (Journey) als Akkordeon
   Klassen: .vtl2, .vtl2-step (.fertig/.aktuell/.offen/.entfaellt),
   .vtl2-det (natives <details>), .vtl2-kopf (summary), .vtl2-num,
   .vtl2-check, .vtl2-mitte, .vtl2-titel, .vtl2-pillen, .vtl2-zeit,
   .vtl2-pfeil, .vtl2-detail (+ -datum/-text/-punkte/-notiz/-dauer/-rf),
   .pille-wer, .pille-status (+Varianten)
   ========================================================= */
.vtl2{list-style:none; margin:1rem 0 0; padding:0; position:relative}

/* Einzelne Zeile: Punkt links auf senkrechter Linie, Inhalt rechts */
.vtl2-step{position:relative; padding-left:3.4rem}
/* senkrechte Verbindungslinie (hinter der Nummer) */
.vtl2-step::before{content:""; position:absolute; left:calc(1rem + 15px); top:0; bottom:0;
  width:3px; background:var(--linie); z-index:0}
.vtl2-step:first-child::before{top:1.1rem}
.vtl2-step:last-child::before{bottom:auto; height:1.1rem}
.vtl2-step.fertig::before{background:#bfe6cc}

/* natives <details> als Panel */
.vtl2-det{border:1px solid transparent; border-radius:14px; margin:.15rem 0}
.vtl2-det[open]{border-color:var(--linie); background:#fbfdff; box-shadow:var(--shadow-sm)}

/* ---------- Kopfzeile (summary), immer sichtbar, grosse Touch-Flaeche ---------- */
.vtl2-kopf{display:flex; align-items:center; gap:.7rem; cursor:pointer; list-style:none;
  padding:.6rem .8rem; min-height:48px; border-radius:14px; font-family:var(--head)}
.vtl2-kopf::-webkit-details-marker{display:none}
.vtl2-kopf:hover{background:rgba(0,145,200,.05)}
.vtl2-det[open] .vtl2-kopf:hover{background:transparent}
.vtl2-det:focus-visible .vtl2-kopf{outline:2px solid var(--blau); outline-offset:1px}

/* Zahl-Kreis: Nummer bleibt IMMER sichtbar (auch bei erledigt/entfaellt) */
.vtl2-num{position:relative; z-index:1; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; line-height:1;
  background:#fff; border:3px solid var(--linie); color:var(--blau-d)}
/* Overlay-Symbol als Ecke (ersetzt NICHT die Zahl) */
.vtl2-check{position:absolute; top:-4px; right:-4px; z-index:2;
  width:16px; height:16px; border-radius:50%; background:#2eaf5e; color:#fff;
  font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; line-height:1}
.vtl2-check.entf{background:#9aa1a7}

/* Mittelteil: Titel + Pillen */
.vtl2-mitte{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.3rem}
.vtl2-titel{font-family:var(--head); font-weight:700; font-size:1rem; color:var(--text);
  line-height:1.25}
.vtl2-pillen{display:flex; flex-wrap:wrap; gap:.4rem}

/* Zeit-Label rechts (klein, dezent) */
.vtl2-zeit{flex:0 0 auto; font-family:var(--head); font-weight:700; font-size:.76rem;
  color:var(--grau); background:#fff; border:1px solid var(--linie); border-radius:999px;
  padding:.14rem .6rem; white-space:nowrap; text-align:right}
.vtl2-pfeil{flex:0 0 auto; color:#9aa1a7; font-size:.9rem; transition:transform .2s ease}
.vtl2-det[open] .vtl2-pfeil{transform:rotate(180deg)}

/* Zustands-Varianten der Nummer/Zeile */
.vtl2-step.fertig .vtl2-num{background:#2eaf5e; border-color:#2eaf5e; color:#fff}
.vtl2-step.fertig .vtl2-titel{color:#1c7a3f}
.vtl2-step.fertig .vtl2-zeit{border-color:#b7e3c6; color:#1c7a3f; background:#e6f7ec}
.vtl2-step.aktuell .vtl2-num{background:var(--orange); border-color:var(--orange); color:#fff;
  box-shadow:0 0 0 0 rgba(255,125,15,.5); animation:vtlpuls 2s infinite}
.vtl2-step.aktuell .vtl2-det[open]{border-color:#f5cba0; background:var(--hellorange)}
.vtl2-step.offen .vtl2-num{background:#fff; border-color:var(--blau); color:var(--blau-d)}
.vtl2-step.entfaellt{opacity:.66}
.vtl2-step.entfaellt .vtl2-num{background:#f3f4f5; border-color:#e2e5e8; color:#8a8f94}
.vtl2-step.entfaellt .vtl2-titel{color:#8a8f94; text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:#b3b8bd}
@media (prefers-reduced-motion:reduce){.vtl2-step.aktuell .vtl2-num{animation:none}}

/* ---------- Detailblock (unter der Kopfzeile) ---------- */
.vtl2-detail{padding:0 .9rem 1rem 3.4rem}
.vtl2-datum{margin:.2rem 0 .6rem; font-family:var(--head); font-weight:700; font-size:.9rem; color:#1c7a3f}
.vtl2-text{margin:.2rem 0 .6rem; font-size:1rem; color:#454b51; line-height:1.6}
.vtl2-punkte{margin:.2rem 0 .8rem; padding-left:1.3rem}
.vtl2-punkte li{margin:.2rem 0; font-size:.95rem; color:#454b51}
.vtl2-dauer{margin:.2rem 0 .6rem; font-size:.9rem; color:var(--grau)}
.vtl2-notiz{margin:.6rem 0 0; font-size:.92rem; color:#454b51;
  background:var(--hellblau); border:1px solid var(--blaurand); border-left:4px solid var(--blau);
  border-radius:9px; padding:.6rem .9rem}
.vtl2-step.aktuell .vtl2-notiz{background:#fff; border-color:#f5cba0; border-left-color:var(--orange)}
.vtl2-rf{margin-top:1rem}
@media(max-width:560px){
  .vtl2-step{padding-left:3rem}
  .vtl2-step::before{left:calc(.8rem + 15px)}
  .vtl2-num{margin-left:-.2rem}
  .vtl2-detail{padding-left:3rem; padding-right:.4rem}
  .vtl2-zeit{font-size:.7rem; padding:.12rem .5rem}
}

/* ---------- Druck: alle Zeilen aufgeklappt, Nummern sichtbar ---------- */
@media print{
  .vtl2-det{border:1px solid #ccc !important; background:#fff !important; break-inside:avoid;
    box-shadow:none !important; margin-bottom:.4rem}
  .vtl2-detail{display:block !important}   /* auch geschlossene <details> ausgeben */
  .vtl2-pfeil{display:none}
  .vtl2-num{animation:none !important; box-shadow:none !important}
  .vtl2-step.aktuell .vtl2-det{background:#fff !important; border-color:#ccc !important}
}

/* ---------- Pillen (WER + STATUS) ---------- */
.pille-wer, .pille-status{display:inline-flex; align-items:center; font-family:var(--head);
  font-weight:800; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase;
  border-radius:999px; padding:.3rem .85rem; white-space:nowrap; border:1px solid transparent}
/* WER-Pille */
.pille-wer.wer-sie{background:var(--blau); color:#fff}
.pille-wer.wer-wir{background:var(--orange); color:#fff}
.pille-wer.wer-beide{background:linear-gradient(90deg,var(--blau) 0 50%,var(--orange) 50% 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pille-wer.wer-notar{background:#16191c; color:#fff}
.pille-wer.wer-amt, .pille-wer.wer-bank{background:#eef1f4; color:#454b51; border-color:#d5dbe0}
.pille-wer.wer-verwalter{background:#eef1f4; color:#454b51; border:1.5px solid var(--blau)}
/* STATUS-Pille */
.pille-status.erledigt{background:#e6f7ec; color:#1c7a3f; border-color:#b7e3c6}
.pille-status.aktuell{background:var(--hellorange); color:#C05E00; border-color:#f5cba0}
.pille-status.offen{background:#eef1f4; color:#5a6068; border-color:#d5dbe0}
.pille-status.entfaellt{background:#f6f7f8; color:#8a8f94; border-color:#e2e5e8}

/* ---------- Objekt-Karte: Kopf mit kleinem Haus-Thumbnail ---------- */
.objekt-kopf{display:flex; align-items:center; gap:1rem; margin-bottom:.4rem}
.objekt-kopf h2{margin:0}
.objekt-thumb{flex:0 0 auto; display:block; width:104px; height:104px; border-radius:14px;
  overflow:hidden; border:2px solid var(--blaurand); background:var(--hellblau)}
.objekt-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.objekt-thumb:hover{border-color:var(--blau)}
@media(max-width:560px){
  .objekt-thumb{width:84px; height:84px}
}

/* ---------- Druck: Pillen entfaerbt (Zeitstrahl-Print steht oben bei .vtl2) ---------- */
@media print{
  .pille-wer, .pille-status{border:1px solid #999; background:#fff !important; color:#000 !important;
    text-shadow:none}
}

/* ---------- Wer-Badges (alte vertikale Timeline) ---------- */
.wer-badge{display:inline-flex; align-items:center; font-family:var(--head); font-weight:800;
  font-size:.66rem; letter-spacing:1px; text-transform:uppercase;
  border-radius:999px; padding:.16rem .62rem; margin-left:.35rem; white-space:nowrap;
  vertical-align:middle; border:1px solid transparent}
.wer-badge.wer-sie{background:var(--blau); color:#fff}
.wer-badge.wer-wir{background:var(--orange); color:#fff}
.wer-badge.wer-beide{background:linear-gradient(90deg,var(--blau) 0 50%,var(--orange) 50% 100%);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25)}
.wer-badge.wer-notar{background:#16191c; color:#fff}
.wer-badge.wer-amt{background:#eef1f4; color:#454b51; border-color:#d5dbe0}
.wer-badge.wer-bank{background:#eef1f4; color:#454b51; border-color:#d5dbe0}
.wer-badge.wer-verwalter{background:#eef1f4; color:#454b51; border:1.5px solid var(--blau)}

/* ---------- Checkliste ---------- */
.cl-item{display:flex; align-items:flex-start; gap:.8rem; padding:.85rem .2rem;
  border-bottom:1px solid var(--linie); min-height:48px}
.cl-item:last-child{border-bottom:0}
.cl-item .cl-titel{font-family:var(--head); font-weight:700; font-size:.98rem}
.cl-item .cl-sub{display:block; font-size:.85rem; color:#454b51; font-family:var(--body);
  font-weight:500; margin-top:.15rem}
.cl-item .cl-aktion{margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-shrink:0}
@media(max-width:560px){
  .cl-item{flex-wrap:wrap}
  .cl-item .cl-aktion{margin-left:2rem; width:100%; justify-content:flex-start}
}

/* Pflichtgrad-Badge (oben am Item, nicht im Fliesstext) */
.pflicht-badge{display:inline-block; vertical-align:middle; font-family:var(--head);
  font-weight:800; font-size:.62rem; letter-spacing:1px; text-transform:uppercase;
  border-radius:999px; padding:.16rem .6rem; margin:0 .5rem .2rem 0; white-space:nowrap;
  border:1px solid transparent}
.pflicht-badge.pflicht{background:var(--blau); color:#fff}
.pflicht-badge.optional{background:#eef1f4; color:#5a6068; border-color:#d5dbe0}
.pflicht-badge.wennvorhanden{background:#eef1f4; color:#5a6068; border-color:#d5dbe0}

/* Ausgeblendetes Item (nicht_noetig): ausgegraut, kompakt */
.cl-ausgeblendet{opacity:.72}
.cl-ausgeblendet .cl-titel{color:#8a8f94; text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:#c4c9ce}
.cl-ausgeblendet .pflicht-badge{opacity:.85}

/* Ampel-Punkte (Status je Checklisten-Punkt) */
.ampel{display:inline-block; flex-shrink:0; width:14px; height:14px; border-radius:50%;
  margin-top:.35rem; vertical-align:middle; border:1px solid rgba(0,0,0,.08)}
.ampel.rot{background:#d24040}
.ampel.gelb{background:#f0b429}
.ampel.gruen{background:#2eaf5e}
.ampel.grau{background:#c4c9ce}

/* Fortschrittsbalken (blau auf Hellblau) */
.fortschritt{height:12px; border-radius:999px; background:var(--hellblau);
  border:1px solid var(--blaurand); overflow:hidden; margin:.8rem 0 .3rem}
.fortschritt-balken{height:100%; border-radius:999px; background:var(--grad);
  transition:width .4s ease; min-width:0}

/* ---------- Druck: Timeline kompakt ---------- */
@media print{
  body{background:#fff; font-size:12pt}
  .phdr, .pnav, .btn, .kopier, .rueckfrage, .wnav, .pfoot{display:none !important}
  .pcard{box-shadow:none; border:1px solid #ccc; break-inside:avoid}
  .vtl-step{padding:.15rem 0 .35rem 2.2rem; min-height:0}
  .vtl-step::before{left:calc(.4rem + 8px); width:2px}
  .vtl-dot{left:.4rem; top:.25rem; width:18px; height:18px; border-width:2px; font-size:.6rem;
    animation:none !important; box-shadow:none !important}
  .vtl-step.aktuell{background:none}
  .vtl-phase{padding:.7rem 0 .25rem 2.2rem}
  .vtl-phase::before{left:2.2rem}
  .vtl-text{font-size:10pt}
  .vtl-notiz{background:#fff; border:1px solid #bbb; border-left-width:3px}
  .wer-badge{border:1px solid #999; background:#fff !important; color:#000 !important;
    text-shadow:none}
  .fortschritt{border-color:#999}
  .fortschritt-balken{background:#666}
  .ampel{border:1px solid #666}
}

/* ---------- Scan-Hinweis (Seite Unterlagen): auffaellig, aber markentreu ---------- */
.scan-hinweis{
  background:var(--hellblau);
  border:1px solid var(--blaurand);
  border-left:6px solid var(--blau);
  border-radius:12px;
  padding:.95rem 1.15rem;
  margin:1rem 0 .8rem;
}
.scan-hinweis p{margin:.35rem 0; font-size:.95rem; line-height:1.55; color:var(--text)}
.scan-hinweis .scan-titel{
  font-family:var(--head); font-weight:800; font-size:1.02rem;
  color:var(--blau-d); margin:0 0 .45rem; letter-spacing:-.2px;
}
@media (max-width:560px){
  .scan-hinweis{padding:.8rem .9rem; border-left-width:5px}
  .scan-hinweis p{font-size:.9rem}
}

/* Eingebettet im zentralen Cockpit (/admin, iframe): eigene Kopfleisten ausblenden */
body.eingebettet .phdr, body.eingebettet .adm-band, body.eingebettet .pfoot{display:none}
body.eingebettet .portal-main{padding-top:1rem}