/* MG Gebäudeservice — Theme für Taskey Share Kö-Quartier.
   Wird nach style.css und taskey-share.css geladen und überschreibt nur
   Farben, Schriften und Formen; Layout und Verhalten bleiben unverändert.
   Werte folgen der Website (legacy.css :root). */

:root {
  --mg-blue: #004aad;
  --mg-blue-light: #0059d0;
  --mg-dark: #07102B;
  --mg-gray: #8A9BC4;
  --mg-muted: #6f7790;
  --mg-line: #e3e8f2;
  --mg-surface: #f6f8fb;
  --mg-accent: #e1ecff;
  --ink: var(--mg-dark);
  --muted: var(--mg-muted);
  --line: var(--mg-line);
  --green: var(--mg-blue);
  --warm: var(--mg-gray);
  --paper: var(--mg-surface);
  --mg-label: 'Barlow Condensed', 'Barlow', sans-serif;
  --mg-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
}

body {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--mg-dark);
  background: #fff;
}

button:hover { background: var(--mg-accent); }
button:focus-visible, a:focus-visible, input:focus-visible,
.share-panel :focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 2px; }

/* ── Kopfzeile ── */
.brand { color: var(--mg-dark); font-family: var(--mg-label); font-weight: 700; letter-spacing: 3px; }
.brand small { font-family: 'Barlow', sans-serif; font-weight: 500; color: var(--mg-muted); }
.monogram { font: 36px var(--mg-display); letter-spacing: 0; color: var(--mg-blue); }
.monogram > span { color: var(--mg-blue); }

.view-switch { background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 2px; padding: 3px; }
.view-switch button { border-radius: 2px; font-family: var(--mg-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mg-muted); }
.view-switch button.active, .view-switch button[aria-pressed=true] { background: var(--mg-blue); color: #fff; box-shadow: none; }

.quiet { border-radius: 2px; font-family: var(--mg-label); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.info-icon { border-color: var(--mg-blue); color: var(--mg-blue); }

.share-toggle { border: 1.5px solid var(--mg-blue); border-radius: 2px; color: var(--mg-blue); font-family: var(--mg-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.share-toggle[aria-pressed=true] { background: var(--mg-blue); border-color: var(--mg-blue); color: #fff; }
.share-toggle[aria-pressed=true]:hover { background: var(--mg-blue-light); }

/* ── Kennzahlen ── */
.share-bar { color: var(--mg-dark); border-bottom-color: var(--mg-line); }
.share-progress > span, .share-kpi > span { font-family: var(--mg-label); font-weight: 700; letter-spacing: 2.5px; color: var(--mg-blue); }
.share-progress strong, .share-kpi strong { font-family: var(--mg-display); font-weight: 400; font-size: 40px; letter-spacing: 1px; line-height: 1.1; }
.share-progress div > span, .share-kpi small, .share-feed small { color: var(--mg-muted); }
.share-progress b { background: var(--mg-accent); color: var(--mg-blue); border-radius: 2px; font-weight: 600; }
.share-progress progress { accent-color: var(--mg-blue); border-radius: 0; height: 4px; }
.share-progress progress::-webkit-progress-bar { background: var(--mg-line); }
.share-progress progress::-webkit-progress-value { background: var(--mg-blue); }
.share-kpi { border-left-color: var(--mg-line); }
.share-demo { font-family: var(--mg-label); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mg-muted); }
.share-demo:before { background: var(--mg-gray); }
.share-feed button { border-radius: 2px; background: #fff; border: 1px solid var(--mg-line); color: var(--mg-dark); }
.share-feed button:hover { border-color: var(--mg-blue); color: var(--mg-blue); }

/* ── Seitenleiste ── */
.sidebar { border-right-color: var(--mg-line); }
.section-title, .level-heading, .share-eyebrow { font-family: var(--mg-label); font-weight: 700; letter-spacing: 3px; color: var(--mg-blue); }
.level-heading > span + span { font-family: 'Barlow', sans-serif; color: var(--mg-muted); letter-spacing: 0; }
.whole { border-radius: 2px; }
.whole.active { background: var(--mg-accent); color: var(--mg-blue); }
.line-icon { color: var(--mg-blue); }
.floor-btn { border-radius: 2px; }
.floor-btn .number { background: var(--mg-surface); color: var(--mg-muted); border-radius: 2px; font-family: var(--mg-display); font-size: 17px; }
.floor-btn.active, .taskey-on .floor-btn.active { background: var(--mg-accent); color: var(--mg-blue); }
.floor-btn.active .number, .taskey-on .floor-btn.active .number { background: var(--mg-blue); color: #fff; }
.floor-btn small em { color: #b8741a; }
.dot { background: var(--mg-blue); }

/* ── 3D-Fläche ── */
.viewport, .taskey-on .viewport { background: radial-gradient(ellipse at 50% 40%, #fff, #e6ecf5); }
.scene-heading > span { font-family: var(--mg-label); font-weight: 700; letter-spacing: 3px; color: var(--mg-blue); }
.scene-heading h1, .taskey-on .scene-heading h1 { font-family: var(--mg-display); font-weight: 400; letter-spacing: 1.5px; font-size: 38px; line-height: 1; color: var(--mg-dark); }
.scene-heading p, .taskey-on .scene-heading p { color: var(--mg-muted); }

.scene-actions button { border-radius: 2px; border-color: var(--mg-line); font-family: var(--mg-label); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.scene-actions button.active { background: var(--mg-blue); border-color: var(--mg-blue); color: #fff; }

.toolbar { border-radius: 2px; border-color: var(--mg-line); box-shadow: 0 10px 30px rgba(0, 74, 173, .1); }
.toolbar button { border-radius: 2px; font-family: var(--mg-label); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.toolbar button.active { background: var(--mg-blue); color: #fff; }
.toolbar i { background: var(--mg-line); }
#viewCaption, .hint, .scene-options, #compass { color: var(--mg-muted); }
.scene-options input { accent-color: var(--mg-blue); }
#compass { color: var(--mg-blue); }

.share-legend button { border-radius: 2px; border-color: var(--mg-line); }
.share-legend button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--mg-blue); }
.share-legend i, .share-status b { border-radius: 2px; }

.floating-floor, .taskey-on .floating-floor { border-radius: 2px; border-color: var(--mg-line); color: var(--mg-dark); box-shadow: 0 6px 20px rgba(0, 74, 173, .1); }
.floating-floor small { color: var(--mg-muted); }
.floating-floor:hover { background: var(--mg-blue); color: #fff; }
#floorLeaders path { stroke: var(--mg-gray); }
#floorLeaders circle { fill: var(--mg-blue); }

#openBuilding { border: 1.5px solid var(--mg-blue); border-radius: 2px; color: var(--mg-dark); box-shadow: 0 16px 40px rgba(0, 74, 173, .18); }
#openBuilding:after { background: var(--mg-blue); }
#openBuilding .building-name { font-family: var(--mg-label); font-weight: 700; letter-spacing: 3px; color: var(--mg-blue); }
#openBuilding strong { font-family: var(--mg-display); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
#openBuilding > span:last-child { color: var(--mg-muted); }
#openBuilding:hover, #openBuilding.emphasis { background: var(--mg-blue); border-color: var(--mg-blue); color: #fff; box-shadow: 0 16px 40px rgba(0, 74, 173, .3); }
#openBuilding:hover .building-name, #openBuilding.emphasis .building-name,
#openBuilding:hover > span:last-child, #openBuilding.emphasis > span:last-child { color: rgba(255, 255, 255, .85); }
#openBuilding:focus-visible { outline-color: var(--mg-blue); }

#inspector { border-radius: 2px; border-color: var(--mg-line); box-shadow: 0 20px 50px rgba(0, 74, 173, .14); }
#inspector h2 { font: 400 28px/1 var(--mg-display); letter-spacing: 1px; }
#inspector p, #inspector .metrics span, .room-category { color: var(--mg-muted); }
#inspector .metrics { border-color: var(--mg-line); }
#inspector .focus { background: var(--mg-blue); border-radius: 2px; font-family: var(--mg-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
#inspector .focus:hover { background: var(--mg-blue-light); }

#toast { background: var(--mg-dark); border-radius: 2px; }

#loading { background: rgba(246, 248, 251, .94); color: var(--mg-muted); }
#loading strong { font: 400 34px var(--mg-display); letter-spacing: 1.5px; color: var(--mg-dark); }
.loader { border-color: var(--mg-line); border-top-color: var(--mg-blue); }
#error { border-radius: 2px; }

/* ── Grundriss ── */
.plan-room:hover, .plan-room.selected { fill: #b9cdef !important; }
.plan-room:focus { stroke: var(--mg-blue); }
.plan-label, #plan .plan-label, .taskey-on #plan .plan-label { fill: var(--mg-dark); font-family: 'Barlow', sans-serif; }
.taskey-on #plan .plan-room:hover, .taskey-on #plan .plan-room.selected { stroke: var(--mg-blue); }
.scale, .room-key { color: var(--mg-muted); }
.room-key i { border-color: var(--mg-line); }

/* ── Raumliste ── */
.share-panel { color: var(--mg-dark); border-left-color: var(--mg-line); }
.share-panel-head { border-bottom-color: var(--mg-line); }
.share-panel h2, #shareDetail h2 { font-family: var(--mg-display); font-weight: 400; font-size: 28px; letter-spacing: 1px; line-height: 1.1; }
.share-panel-head button { color: var(--mg-muted); border-radius: 2px; }
.share-search, .share-filter { color: var(--mg-muted); }
.share-search input, .share-filter select,
.share-ticket-dialog input, .share-ticket-dialog textarea, .share-ticket-dialog select { border-color: var(--mg-line); border-radius: 2px; color: var(--mg-dark); }
.share-search input:focus, .share-filter select:focus { border-color: var(--mg-blue); outline: none; }
.share-count, .share-room-row small, .share-room-meta, .share-times dt,
.share-history time, .share-ticket small, .share-ticket time, .share-empty { color: var(--mg-muted); }
.share-room-row { border-bottom-color: var(--mg-line); border-radius: 0; }
.share-room-row:hover { background: var(--mg-surface); }
.share-room-row strong { font-weight: 600; }
.share-status { color: var(--mg-dark); }
.share-back, .share-focus { color: var(--mg-blue); font-family: var(--mg-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.share-assignee, .share-ticket { background: var(--mg-surface); border-color: var(--mg-line); border-radius: 2px; }
.share-avatar { background: var(--mg-accent); color: var(--mg-blue); }
.share-assignee small { font-family: var(--mg-label); font-weight: 700; letter-spacing: 2px; color: var(--mg-blue); }
.share-times { border-bottom-color: var(--mg-line); }
#shareDetail h3 { font-family: var(--mg-label); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
#shareDetail h3 > span { color: var(--mg-muted); }
.share-task-list li { color: var(--mg-muted); }
.share-task-list .complete { color: var(--mg-dark); }
.share-room-actions button, .share-primary { border-color: var(--mg-line); border-radius: 2px; font-family: var(--mg-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.share-room-actions .share-primary, .share-primary { background: var(--mg-blue); border-color: var(--mg-blue); color: #fff; }
.share-room-actions .share-primary:hover, .share-primary:hover { background: var(--mg-blue-light); }
.share-demo-note { color: var(--mg-muted) !important; }

/* ── Fußzeile ── */
footer { border-top-color: var(--mg-line); color: var(--mg-muted); }
footer i { background: var(--mg-blue); }
footer button { color: var(--mg-blue); font-family: var(--mg-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* ── Dialoge ── */
dialog { border-color: var(--mg-line); border-radius: 2px; color: var(--mg-dark); box-shadow: 0 30px 100px rgba(7, 16, 43, .2); }
dialog::backdrop { background: rgba(7, 16, 43, .45); }
dialog h2, .share-ticket-dialog h2 { font: 400 40px/1 var(--mg-display); letter-spacing: 1.5px; }
dialog p { color: var(--mg-muted); }
dialog summary, dialog a { color: var(--mg-blue); }
.material-grid { background: var(--mg-surface); border-radius: 2px; }
.material-grid span { color: var(--mg-muted); }
.dialog-close { border-radius: 2px; }

@media (max-width: 720px) {
  .scene-heading h1, .taskey-on .scene-heading h1 { font-size: 28px; }
  .share-progress strong, .share-kpi strong { font-size: 30px; }
  .monogram { font-size: 30px; }
}

/* Statuslegende unter Titel und Untertitel statt darüber */
@media (min-width: 721px) {
  .taskey-on .scene-heading h1 { font-size: 34px; }
  .share-legend { top: 112px; }
  .taskey-on .scene-actions { top: 150px; }
}

@media (max-width: 720px) {
  .share-legend { top: 118px; }
  .taskey-on .scene-actions { top: 160px; }
  #openBuilding strong { font-size: 20px; white-space: nowrap; }
}

/* ── Einbettung auf der Website (index.html?embed) ──
   Nur das 3D-Modell mit seinen Bedienelementen; Kopfzeile, Kennzahlen,
   Etagen-Seitenleiste, Raumliste, Titel, Legende und Fußzeile entfallen.
   Die Etagen bleiben über die Beschriftungen am Modell erreichbar. */
.mg-embed header,
.mg-embed .share-bar,
.mg-embed .sidebar,
.mg-embed .share-panel,
.mg-embed footer,
.mg-embed .scene-heading,
.mg-embed .share-legend,
.mg-embed .scene-options,
.mg-embed #compass,
.mg-embed .hint,
.mg-embed #viewCaption { display: none !important; }

.mg-embed main,
.mg-embed .taskey-on main { height: 100dvh; min-height: 0; }

.mg-embed .scene-actions,
.mg-embed .taskey-on .scene-actions { top: 16px; right: 16px; }

.mg-embed .scene-bottom,
.mg-embed .taskey-on .scene-bottom { bottom: 16px; }

.mg-embed #inspector { top: 64px; }