/* === BPM Hintergrund: schwarz + zwei driftende Glow-Kugeln === */
html, body { background-color: #080808 !important; min-height: 100vh !important; margin: 0; padding: 0; overflow-x: clip; }

/* Der gesamte Seiteninhalt muss ÜBER den Kugeln liegen */
#page { position: relative !important; z-index: 2 !important; }

/* Gold-Kugel (oben links) */
body::before {
  content: "" !important; display: block !important;
  position: fixed; top: -10%; left: 5%; width: 75vw; height: 75vw;
  background: radial-gradient(circle, rgba(212,175,55,0.65) 0%, rgba(180,120,30,0.25) 45%, rgba(0,0,0,0) 70%);
  border-radius: 50%; filter: blur(50px);
  z-index: 1 !important; pointer-events: none;
  animation: geminiDriftOne 18s ease-in-out infinite alternate;
}

/* Rote Kugel (unten rechts) */
body::after {
  content: "" !important; display: block !important;
  position: fixed; bottom: -10%; right: 5%; width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(227,27,35,0.6) 0%, rgba(140,15,20,0.2) 50%, rgba(0,0,0,0) 70%);
  border-radius: 50%; filter: blur(55px);
  z-index: 1 !important; pointer-events: none;
  animation: geminiDriftTwo 22s ease-in-out infinite alternate;
}

@keyframes geminiDriftOne {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-15%, 15%) scale(1.25); }
  100% { transform: translate(15%, -10%) scale(0.9); }
}
@keyframes geminiDriftTwo {
  0%   { transform: translate(0, 0) scale(1.1); }
  50%  { transform: translate(15%, -15%) scale(0.85); }
  100% { transform: translate(-15%, 10%) scale(1.2); }
}

/* ------------------------------------------------------------
   Zusätze für 360 Wedemark (nur für Seiten MIT diesem Stylesheet,
   die Login-Seite lädt bpm.css bewusst nicht).
   ------------------------------------------------------------ */

/* Palette "bpm" (entspricht der Tailwind-Config aus dem CRM) */
:root {
  --bpm-red: #e31b23;
  --bpm-dark: #181818;
  --bpm-border: #2A2724;
  --bpm-text: #dfd5c6;
  --bpm-gold: #d4af37;
  --bpm-goldlight: #fff0cc;
  --bpm-golddark: #aa843d;

  /* bestehende Variablen aus style.css auf die Palette umbiegen */
  --color-bg: #080808;
  --color-card: #181818;
  --color-border: #2A2724;
  --color-text: #dfd5c6;
  --color-muted: #9c9488;
  --color-primary: #e31b23;
  --color-primary-hover: #b8151b;
}

/* Altes Hintergrundbild (Verlauf) aus style.css entfernen */
html, body { background-image: none !important; color: #dfd5c6; }

/* Layout mit Wrapper: zentrierte Seiten (page-narrow) bleiben zentriert */
body.page-narrow { display: block; padding: 0; }
body.page-narrow #page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
}

/* Karten, Eingabefelder, Akzente */
.card { background: #181818; border-color: #2A2724; box-shadow: inset 0 0 0 1px #2A2724, 0px 25px 60px rgba(0,0,0,0.6); }
.topbar { background: #181818; border-bottom-color: #2A2724; }
.topbar nav a { color: #d4af37; }
form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="file"], form select, form textarea { background: #050505; border-color: #2A2724; color: #dfd5c6; }
dialog.modal { background: #181818; border-color: #2A2724; }
.panorama-tile { background: #181818; border-color: #2A2724; }
.panorama-tile img { background: #050505; }
code { background: #050505 !important; color: #dfd5c6; }
a { color: #d4af37; }

/* ------------------------------------------------------------
   Logo (assets/img/logo.png, logo-icon.png)
   Das Logo hat dunkelblaue Schrift auf weißem Grund -> auf dem
   schwarzen Hintergrund sitzt es auf einer weißen, runden Fläche.
   ------------------------------------------------------------ */
.topbar h1 { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 36px; height: 36px; border-radius: 50%; flex: none; }

.brand-logo {
  display: block; width: 100%; max-width: 260px; height: auto;
  margin: 0 auto 20px; padding: 10px 14px;
  background: #fff; border-radius: 12px;
}

/* Impressum / Datenschutz */
.brand-logo-left { margin-left: 0; }
.legal { max-width: 820px; margin: 0 auto; line-height: 1.6; }
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 2em; font-size: 1.3rem; color: #d4af37; }
.legal h3 { margin-top: 1.6em; font-size: 1.1rem; }
.legal h4 { margin-top: 1.2em; font-size: 1rem; }
.legal ul { padding-left: 1.4em; }

/* Fußzeile mit Impressum-/Datenschutz-Link */
.legal-links {
  position: fixed; left: 0; right: 0; bottom: 8px; z-index: 3;
  text-align: center; font-size: 0.75rem; color: #9c9488; pointer-events: none;
}
.legal-links a { color: #9c9488; pointer-events: auto; }
.legal-links a:hover { color: #d4af37; }

/* ------------------------------------------------------------
   Admin-Dashboard: Kundenliste
   ------------------------------------------------------------ */
.brand-link { display: inline-flex; line-height: 0; }
.brand-link:hover .brand-icon { box-shadow: 0 0 0 2px #d4af37; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h2 { margin: 0; }

/* Jeder Kunde als eigene, deutlich abgesetzte Karte mit Gold-Akzent */
.customer-block {
  background: #202020;
  border: 1px solid #3a3631;
  border-left: 4px solid #d4af37;
  border-radius: 10px;
  padding: 16px 18px !important;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.customer-block:first-of-type { border-top: 1px solid #3a3631 !important; padding-top: 16px !important; }
.customer-block:last-child { margin-bottom: 0; }
.customer-header { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #3a3631; }
.customer-header strong { font-size: 1.15rem; color: #fff0cc; }
.customer-block .tour-list li:last-child { border-bottom: none; }

.access-code code { padding: 3px 8px; border-radius: 6px; letter-spacing: 0.08em; }

/* Kleine runde Icon-Buttons (Kopieren, Öffnen, Zahnrad) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: #2a2724; color: #dfd5c6; border: 1px solid #4a443d;
  cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: #3a3631; color: #d4af37; border-color: #d4af37; }
.icon-btn.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }
.icon-btn-gear { width: 36px; height: 36px; color: #e31b23; border-color: #e31b23; background: rgba(227,27,35,0.08); }
.icon-btn-gear:hover { background: #e31b23; color: #fff; border-color: #e31b23; }

/* Einstellungs-Modal */
.modal-sep { border: none; border-top: 1px solid #2A2724; margin: 16px 0; }
dialog.modal form p.muted { margin: 0 0 8px; }

/* ------------------------------------------------------------
   Hotspot-Formular (setup.php): Art-Umschalter + Symbol-Auswahl
   ------------------------------------------------------------ */
.field-group { margin-bottom: 14px; }
.field-title { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }

.type-toggle { display: flex; gap: 8px; }
.type-toggle button {
  flex: 1; background: #050505; color: #dfd5c6;
  border: 1px solid #2A2724; border-radius: 10px; padding: 10px 14px;
}
.type-toggle button:hover { border-color: #d4af37; background: #101010; }
.type-toggle button.is-active { background: #e31b23; border-color: #e31b23; color: #fff; }

.icon-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-choice { margin: 0 !important; cursor: pointer; }
.icon-choice input { position: absolute; opacity: 0; pointer-events: none; }
.icon-choice span {
  display: block; padding: 4px; line-height: 0; border-radius: 12px;
  background: #3a3631; border: 2px solid transparent;
}
.icon-choice:hover span { border-color: #9c9488; }
.icon-choice input:checked + span { border-color: #d4af37; background: #4a4233; box-shadow: 0 0 0 2px rgba(212,175,55,0.35); }
.icon-choice input:focus-visible + span { outline: 2px solid #fff; }

/* Verknüpfungs-Marker im Editor */
.wedemark-icon-marker { width: 40px; height: 40px; line-height: 0; cursor: pointer; }

/* Panorama-Kacheln: Bild anklicken = Hotspots bearbeiten, Startbild-Badge oben links */
.panorama-tile { padding: 10px; }
.panorama-tile .tile-image { display: block; border-radius: 6px; }
.panorama-tile .tile-image img { margin-bottom: 8px; transition: filter 0.15s; }
.panorama-tile .tile-image:hover img { filter: brightness(1.15); }
.start-badge-form { position: absolute; top: 18px; left: 18px; margin: 0; }
.start-badge, .start-badge-form .start-badge {
  position: absolute; top: 18px; left: 18px; display: inline-block;
  padding: 3px 10px; border-radius: 999px; border: none;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: #fff;
}
.start-badge-form .start-badge { position: static; background: rgba(90,90,90,0.9); cursor: pointer; }
.start-badge-form .start-badge:hover { background: #d4af37; color: #080808; }
.start-badge.is-start { background: #16a34a; }

.name-row { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.name-row input[type="text"] { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; }
.panorama-actions { display: flex; gap: 6px; align-items: center; }
.panorama-actions form { margin: 0; }
.panorama-actions .push-right { margin-left: auto; }

/* Hotspot bearbeiten */
.edit-banner { background: rgba(212,175,55,0.15); border: 1px solid #d4af37; color: #fff0cc; border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; }
.form-buttons { display: flex; gap: 10px; }
.hotspot-list li .btn-secondary { margin-left: auto; }
.hotspot-list li .btn-secondary + form { margin-left: 0; }

/* Upload-Bereich: Umschalter + Anhänge */
.upload-toggle { margin-bottom: 14px; max-width: 520px; }
.upload-toggle button { padding: 8px 14px; }

.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.attachment-tile { border: 1px solid #2A2724; border-radius: 10px; padding: 10px; background: #181818; }
.attachment-thumb { display: flex; align-items: center; justify-content: center; height: 90px; border-radius: 6px; background: #050505; overflow: hidden; margin-bottom: 8px; }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment-size { font-size: 0.78rem; margin-bottom: 8px; }
.pdf-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 70px; border-radius: 6px; background: #c0392b; color: #fff; font-weight: 700; font-size: 0.9rem; }
.pdf-icon-small { width: 40px; height: 40px; font-size: 0.75rem; flex: none; }

/* Anhang-Auswahl im Notiz-Formular */
.attach-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid #2A2724; border-radius: 10px; background: #050505; }
.attach-option { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.attach-option input { width: auto !important; margin: 0 !important; }
.attach-option img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }

/* Button "Blickwinkel speichern" mittig unter dem Editor-Bild */
.view-save { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 18px; }
.view-save #view-status { min-height: 1.2em; font-size: 0.85rem; }

/* Kachel-Hinweis: für dieses Panorama fehlt noch ein gespeicherter Blickwinkel */
.view-missing {
  display: inline-block; margin: 6px 0 2px; padding: 3px 9px; border-radius: 999px;
  background: rgba(212,175,55,0.12); border: 1px solid #d4af37; color: #d4af37;
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
}
.view-missing:hover { background: #d4af37; color: #050505; }

/* Drag & Drop in den Upload-Formularen */
form.dropzone { position: relative; border: 2px dashed #2A2724; border-radius: 12px; padding: 14px; transition: border-color .1s, background .1s; }
/* Irgendwo wird eine Datei gezogen: Upload-Feld zeigt "hier ablegen" */
body.is-dragging-files form.dropzone { border-color: #d4af37; background: rgba(212,175,55,0.05); }
/* Datei ist direkt über dem Feld: sofort deutliches Feedback mit Hinweistext */
form.dropzone.is-dragover { border-style: solid; border-color: #e31b23; background: rgba(227,27,35,0.12); box-shadow: 0 0 0 4px rgba(227,27,35,0.25); }
form.dropzone.is-dragover::after {
  content: "Zum Hochladen loslassen"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(5,5,5,0.78); color: #fff; font-size: 1.2rem; font-weight: 700; pointer-events: none;
}
form.dropzone.is-uploading { opacity: 0.7; pointer-events: none; }
.drop-info { margin: 0 0 10px; font-size: 0.85rem; }

/* Gruppen */
.group-heading { margin: 22px 0 0; font-size: 1.05rem; color: #d4af37; border-bottom: 1px solid #2A2724; padding-bottom: 6px; }
.group-heading:first-of-type { margin-top: 16px; }
/* Gruppen-Reiter (Karteikarten-Optik) über der Panorama-Übersicht */
.group-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 14px; border-bottom: 1px solid #2A2724; }
.group-tabs button {
  margin: 0 0 -1px; padding: 8px 16px; font: inherit; font-size: 0.9rem; cursor: pointer;
  background: #050505; color: #bfb5a5;
  border: 1px solid #2A2724; border-bottom-color: #2A2724; border-radius: 10px 10px 0 0;
}
.group-tabs button:hover { color: #d4af37; border-color: #d4af37; }
.group-tabs button.is-active { background: #e31b23; border-color: #e31b23; color: #fff; }
.group-tabs .tab-count { opacity: 0.7; font-size: 0.85em; }
#panorama-groups.single-group .group-heading { display: none; }
.name-form { margin: 0; }
.group-row { margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
select.group-select { width: 100%; padding: 6px 8px; border-radius: 10px; border: 1px solid #2A2724; background: #050505; color: #dfd5c6; font-size: 0.9rem; }
.group-new { margin: 0 !important; }
.field-group select.group-select { max-width: 320px; margin-bottom: 6px; }
.field-group .group-new { max-width: 320px; }
#hs-group { width: 100%; }