/* Arbeitsansicht im Kunden-Cockpit (21.09.2026)
   Ab 1200 px: Planung (Budget, Ablauf, Checkliste, Eventdetails) als feste Seitenleiste
   rechts, immer offen, über die ganze Seitenhöhe. Die Angebotskarte zeigt ab 1100 px
   Kartenbreite drei Spalten: Übersicht, Angebot, Chat; der Chat lässt sich auf einen
   Streifen verkleinern, dann teilen sich Übersicht und Angebot den Platz hälftig.
   Darunter bleibt alles wie bisher gestapelt (Handy zuerst). */
.sv-menue__kopf{display:none}
.sv-menue__blatt{display:contents}
.sv-chatklein{display:none}
[x-cloak]{display:none!important}

@media (min-width:1200px){
  /* Planung als feste Seitenleiste rechts, immer offen, über die ganze Seitenhöhe
     (Entscheidung des Inhabers vom 21.09.2026). Der gesamte Seiteninhalt hält dafür
     rechts Platz frei; die Leiste scrollt in sich. */
  html.fi body:has(.sv-arbeitsansicht) .fi-main{padding-right:380px;max-width:none}
  .sv-cockpit.sv-arbeitsansicht .sv-cockpit__raster{grid-template-columns:minmax(0,1fr)}
  .sv-cockpit.sv-arbeitsansicht .sv-spalte--mitte{grid-column:1;grid-row:1}
  .sv-cockpit.sv-arbeitsansicht .sv-spalte--rechts{display:block;position:fixed;right:16px;top:88px;bottom:16px;width:348px;z-index:30;min-width:0}
  .sv-menue__blatt{display:flex;flex-direction:column;gap:14px;height:100%;overflow:auto;overscroll-behavior:contain;padding:12px 12px 72px;border-radius:20px;background:#f6f9f8;border:1px solid #fff;box-shadow:0 10px 28px #0753871a}
  .sv-menue__kopf{display:flex;align-items:center;padding:2px 4px}
  .sv-menue__kopf strong{font-family:var(--svw-font-titel);font-size:1rem;color:var(--svw-blau)}
}

/* ---------- Karte: Kopf, Spaltentitel, interne Einschätzung (alle Breiten) ---------- */
.sv-angebot__haupt{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;padding-bottom:12px;border-bottom:1px solid var(--portal-line)}
.sv-angebot__wer{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.sv-angebot__haupt .sv-angebot__anbieter{font-size:1.15rem}
.sv-angebot__haupt .sv-angebot__preis{margin:0;justify-content:flex-end}
.sv-angebot__haupt .sv-preis{font-size:1.5rem}
.sv-spaltentitel{font-family:var(--svw-font-titel);font-size:.95rem;font-weight:650;color:var(--svw-blau);margin:0;letter-spacing:0;text-transform:none}
.sv-uebersicht h5{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--portal-muted);margin:10px 0 3px}
.sv-uebersicht h5:first-child{margin-top:2px}
.sv-original__kopf h4{font-family:var(--svw-font-titel);font-size:.95rem;font-weight:650;color:var(--svw-blau);letter-spacing:0;text-transform:none}
.sv-pruefstand{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0 0 4px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:650}
.sv-pruefstand--ok{background:#e3f6ec;color:#00563e}
.sv-pruefstand--offen{background:#fff3d6;color:#7a5a00}
html.dark .sv-pruefstand--ok{background:#123a2c;color:#9be8c4}
html.dark .sv-pruefstand--offen{background:#3a3112;color:#f0d98a}
.sv-intern{margin-top:10px;padding:12px 14px;border-radius:14px;background:#fff8e6;border:1px dashed #e0c36a;display:flex;flex-direction:column;gap:6px}
.sv-intern__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px}
.sv-intern .sv-spaltentitel{color:#6b4e00}
.sv-intern__privat{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:650;color:#7a5a00}
.sv-intern__privat .sv-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.sv-intern__sterne{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.sv-intern__sterne .sv-leise{margin-left:8px;font-size:.78rem}
.sv-stern{border:0;background:none;padding:0;width:36px;height:40px;font-size:1.7rem;line-height:1;color:#d9d2bd;cursor:pointer}
.sv-stern--an{color:#e6a700}
.sv-stern:hover{color:#c98f00}
.sv-intern__label{font-size:.74rem;font-weight:650;color:#6b4e00}
.sv-intern__notiz{width:100%;min-height:60px;resize:vertical;border:1px solid #e3d29a;border-radius:10px;padding:9px 11px;background:#fff;font:inherit;font-size:.88rem;line-height:1.45;color:var(--svw-text)}
.sv-intern__von{margin:0;font-size:.72rem;color:#8a7434}
html.dark .sv-intern{background:#2b2612;border-color:#6b5a1e}
html.dark .sv-intern .sv-spaltentitel,html.dark .sv-intern__label,html.dark .sv-intern__privat{color:#f0d98a}
html.dark .sv-intern__notiz{background:#1d1a0d;border-color:#6b5a1e;color:#f4efdc}

/* Umschalter Angebot | Profil im Dokumentbereich */
.sv-original__angebot{display:flex;flex-direction:column;gap:6px;min-width:0}
.sv-umschalter{display:inline-flex;padding:3px;border-radius:999px;background:#e9efed;border:1px solid var(--portal-line)}
.sv-umschalter button{border:0;background:transparent;border-radius:999px;min-height:34px;padding:0 16px;font:inherit;font-size:.86rem;font-weight:650;color:var(--svw-text-mittel);cursor:pointer}
.sv-umschalter button.sv-umschalter--an{background:#fff;color:var(--svw-blau);box-shadow:0 1px 4px #12284626}
.sv-original__profil{background:#fff}
html.dark .sv-umschalter{background:#1b2b43;border-color:#ffffff24}
html.dark .sv-umschalter button.sv-umschalter--an{background:#0f1a2c;color:#9cd5f5}

/* ---------- Karte: drei Spalten ----------
   Überblick und Angebot bekommen gleich viel Platz, der Chat eine feste, schmalere
   Spalte. Überblick und Chat stehen als ruhige Flächen neben dem Dokument, alle drei
   beginnen auf einer Linie; das Dokument ist so hoch wie der Bildschirm es hergibt. */
@container (min-width:1100px){
  .sv-angebot__teile{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(300px,360px);gap:18px;align-items:start;padding-top:4px}
  .sv-angebot__rechts{display:contents}
  .sv-angebot--chatklein .sv-angebot__teile{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px}
  .sv-angebot__links{padding:14px 16px;border-radius:16px;background:#f7faf9;border:1px solid var(--portal-line)}
  .sv-original{padding:14px 16px;border-radius:16px;background:#f7faf9;border:1px solid var(--portal-line)}
  .sv-original__dokument{height:clamp(420px,calc(100vh - 330px),760px)}
  .sv-angebot__chatspalte{position:sticky;top:96px;min-width:0}
  .sv-angebot__chatspalte .sv-kontakt{margin:0;border-radius:16px}
  .sv-chatklein{display:inline-flex;align-items:center;justify-content:center;border:1px solid #9ccfc6;background:#fff;color:#00664f;cursor:pointer;font:inherit}
  .sv-chatklein--zu{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:999px;font-size:1.2rem;line-height:1}
  .sv-chatklein--zu:hover{background:#e0f4ec}
  .sv-chatklein--auf{flex-direction:column;gap:8px;width:52px;min-height:150px;padding:12px 0;border-radius:14px;border-top:3px solid #008c70;background:#f1faf7;font-weight:700;font-size:.8rem}
  .sv-chatklein--auf svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sv-chatklein--auf span{writing-mode:vertical-rl;letter-spacing:.06em}
  .sv-chatklein--auf b{min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#c2410c;color:#fff;font-size:.72rem;line-height:20px;text-align:center}
  .sv-chatklein--auf:hover{background:#e0f4ec}
  .sv-angebot__chatspalte .sv-kontakt__kopf{padding-right:40px}
  html.dark .sv-angebot__links,html.dark .sv-original{background:#14203699;border-color:#ffffff1f}
}
/* Unter drei Spalten bleibt der Chat immer offen, egal was gespeichert ist. */
@container (max-width:1099.98px){.sv-angebot__chatinhalt{display:block!important}}
html.dark .sv-menue__blatt{background:#142036f2;border-color:#ffffff1f}
html.dark .sv-chatklein{background:#1b3832;color:#d7f5ea;border-color:#578577}