/* =========================================================
   Investoren-Portal — Patock Holding GmbH
   PHO-Look: gelbes Logo (Verlauf #FFE100 -> #FF8C00),
   Amber-Akzente, Anthrazit, viel Weissraum.
   ========================================================= */
:root{
  --g1:#FFE100; --g2:#FF8C00;              /* Logo-Verlauf */
  --amber:#E39400; --amber-d:#C97F00;      /* lesbare Akzentfarbe */
  --hellgelb:#FFF6DC; --gelbrand:#F2D389;
  --text:#1A1A1A; --grau:#595959; --linie:#e9e6de; --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(20,17,10,.12);
  --shadow-sm:0 8px 24px rgba(20,17,10,.08);
  --grad:linear-gradient(90deg,var(--g1),var(--g2));
}
*{box-sizing:border-box}

/* Useransicht-Banner: Admin schaut mit den Augen eines Users (nur Lesen) */
.ansicht-band{position:sticky; top:0; z-index:80; background:var(--hellgelb);
  border-bottom:2px solid var(--amber); 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(--amber-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(--hellgelb) 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(--amber-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(--hellgelb); color:var(--amber-d);
  padding:.28rem .85rem; border-radius:999px; border:1px solid var(--gelbrand); text-decoration:none}
a.lock-badge:hover{color:var(--amber-d); background:var(--hellgelb)}
.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(--amber); outline-offset:1px; border-color:var(--amber)}

/* 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(--amber-d); background:var(--hellgelb)}
.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(--amber-d)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  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); color:var(--text); box-shadow:0 8px 22px rgba(255,160,0,.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,160,0,.42)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-sm{width:auto; padding:.55rem 1.15rem; font-size:.88rem; box-shadow:none}
.btn-ghost{background:transparent; color:var(--amber-d); border:2px solid var(--amber); box-shadow:none}
.btn-ghost:hover{background:var(--hellgelb); color:var(--amber-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), unabhaengig vom gelben Markenlook */
.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 (nicht rechts aussen, App-Breite!) */
.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(--amber-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(--hellgelb);
  border:1px solid var(--gelbrand); 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(--gelbrand)}
.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(--hellgelb);
  border:1.5px dashed var(--gelbrand); 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(--gelbrand); 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(--hellgelb);
  border:1px solid var(--gelbrand); display:flex; align-items:center; justify-content:center; color:var(--amber-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(--hellgelb); border:1px solid var(--gelbrand); border-radius:12px;
  padding:.55rem 1.4rem; margin-bottom:.6rem; user-select:all}
.dh-note{margin:0; color:#454b51; font-size:.95rem}

/* Co-Investment-Auswahl (10/20/30k) */
.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(--gelbrand)}
.wahl input:checked + .wahl-box{border-color:var(--amber); background:var(--hellgelb);
  box-shadow:0 8px 22px rgba(255,160,0,.18)}
.wahl input:focus-visible + .wahl-box{outline:2px solid var(--amber); outline-offset:2px}

/* Vier Kacheln (10/20/30k + eigener Vorschlag) */
.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(--hellgelb); border:1px solid var(--gelbrand); border-radius:12px;
  padding:.9rem 1.1rem; margin:0 0 1.2rem; font-size:1rem}

/* Vertragsdaten-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(--amber); border-color:var(--amber)}
@media(max-width:560px){ .sd-grid{grid-template-columns:1fr} }

/* Eigener Vorschlag: Textfeld */
.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(--amber); border-color:var(--amber)}

/* 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}

/* Start-Monat-Auswahl */
.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(--gelbrand)}
.start input:checked + .start-box{border-color:var(--amber); background:var(--hellgelb)}
.start input:focus-visible + .start-box{outline:2px solid var(--amber); outline-offset:2px}
@media(max-width:560px){ .start-grid{grid-template-columns:1fr} }

/* Startdatum (freies Datum) */
.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(--amber); border-color:var(--amber)}
.start-datum input[type=date]:valid{border-color:var(--gelbrand); background:var(--hellgelb)}
.start-datum .hint{font-size:.85rem; color:#454b51; margin:0}

/* "Wie geht es weiter?"-Box */
.weiter-box{background:var(--hellgelb); border:1px solid var(--gelbrand); 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}

/* "Anderes Co-Investment vorschlagen" */
.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(--amber); border-color:var(--amber)}

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

/* Konditionen + Zahlungsplan */
.kond-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:.4rem}
.kond{background:#fbfaf6; 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(--hellgelb); border:1px solid var(--gelbrand);
  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(--amber-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(--amber); border-color:var(--amber)}
.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(--hellgelb);
  border:1.5px dashed var(--gelbrand); 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(--gelbrand); border-radius:14px;
  background:#fff; color:#7a5a00; transition:background .15s ease, transform .15s ease}
.tab:hover{transform:translateY(-2px)}
.tab.aktiv{background:var(--grad); color:var(--text); border-color:transparent;
  box-shadow:0 8px 22px rgba(255,160,0,.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(--amber-d); border:2px solid var(--amber);
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.kopier:hover{background:var(--hellgelb)}
.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 Mitgliederbereich 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:var(--text)} /* Rueck-Button bleibt gelb sichtbar */

/* Prozessbalken (Stepper): Kreise auf einer Verbindungslinie, klar als Prozess erkennbar */
.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); border-color:var(--amber); color:var(--text)}
.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(--amber))}
@media(max-width:560px){ .stepper li{font-size:.7rem} }

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

/* "Jetzt investieren"-Button mit Tagesdatum */
.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:.75}
.start-zeile .oder{font-size:.9rem; color:#454b51; font-weight:600}

/* Status-/Rollen-Pillen an der Investor-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 je Investor */
.schritte{list-style:none; margin:.9rem 0 0; padding:.9rem 1.1rem; background:#fbfaf6;
  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:#a86a00; 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(--amber-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: alles auf einen Klick */
.adm-leiste{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.4rem;
  padding:.9rem 1rem; background:#fbfaf6; 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}

/* Startdatum-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 Beantragen-Button */
.zus{background:var(--hellgelb); border:2px solid var(--gelbrand); 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 + Wizard ---------- */
.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(--amber-d)}
.dockey-zeile{font-size:.9rem; color:#454b51; text-align:center; margin:.2rem 0 0}
.dockey-zeile code{background:var(--hellgelb); border:1px solid var(--gelbrand);
  border-radius:8px; padding:.15rem .6rem; font-weight:700}
.upload-block{margin-top:1.4rem; padding-top:1.2rem; border-top:1px dashed var(--gelbrand); text-align:center}
.upload-block p{margin-bottom:.8rem}
.journey{margin-top:1.2rem}

/* Rueckfrage-Pille an Investment-/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(--amber); color:var(--amber-d); border-radius:999px; padding:.3rem .85rem}
.rueckfrage:hover{background:var(--hellgelb); color:var(--amber-d)}
.rf-zeile{margin:1rem 0 0; display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap}

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

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

/* Weiteres-Investment-CTA-Karte */
.karte-link.cta{border:2px solid var(--gelbrand); background:var(--hellgelb)}

/* Darlehens-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(--amber); border-color:var(--amber)}
@media(max-width:760px){ .dl-zeile{grid-template-columns:1fr 1fr} }

/* Fortschrittsbalken im Investment-Cockpit */
.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): links erhaltene Zinsen + Tag, rechts Resttage + offene Zinsen */
.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}

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

/* "Die beste Zeit zum Investieren ist jetzt!" */
.jetzt-satz{font-family:var(--head); font-weight:800; font-size:1.15rem; color:var(--amber-d);
  margin:0 0 1rem}
.jetzt-satz b{color:var(--text); background:var(--grad);
  padding:.05rem .45rem; border-radius:8px}

/* Zusammenfassung (Schritt 5): Wert gross, Zusatzinfo klein, Bonus-Zeile */
.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(--gelbrand); 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(--amber-d)}
body.admin .tick.offen{color:#a06a00}

/* 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(--gelbrand); color:var(--amber-d)}
.pnav a.akt{background:var(--grad); border-color:transparent; color:var(--text)}
.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,.75)}

/* 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}

/* Dein 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(--hellgelb); border:3px solid var(--gelbrand); 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}

/* Investment-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 (Nummer = Reihenfolge) */
.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(--hellgelb)}
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: Interessent (noch nichts unterschrieben) vs. Investor */
.rollen-interessent{color:var(--amber-d); font-weight:700}
.rollen-investor{color:#1c7a3f; font-weight:700}
.rollen-admin{color:#16191c; font-weight:700}
.pille-mini.rolle.interessent{background:var(--hellgelb); color:var(--amber-d); border-color:var(--gelbrand)}

/* Verteil-Formular (Dokument an mehrere Investoren) */
.vt-empf{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem .8rem;
  margin:.4rem 0 .8rem; padding:.7rem .9rem; background:#fbfaf6; 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} }

/* 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}

/* 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 */
.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(--hellgelb) 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}
}