/* ============================================================================
   Cranach-City Art Galerie — Branding-Chrome (extern, ueber der Pano2VR-Tour)
   Persistente Custom-Schicht. Wird NIE vom Pano2VR-Re-Export ueberschrieben.
   Palette + Layout 1:1 aus dem Chrome-Mockup (2026-07-13). Fonts self-hosted.
   ============================================================================ */

/* ── Self-hosted Fonts (kein Google-CDN) ──────────────────────────────────── */
@font-face{
  font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/cinzel-latin-700.woff2") format("woff2");
}
/* Inter ist ein Variable-Font; eine Datei deckt 100–900 ab. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/inter-latin-var.woff2") format("woff2");
}

:root{
  --warm-white:   #f4f0e9;
  --warm-white-2: #faf7f1;
  --anthracite:   #262322;
  --anthracite-2: #4a4441;
  --bordeaux:     #6e1a28;
  --bordeaux-deep:#56121e;
  --hairline:     rgba(38,35,34,0.14);
  --chrome-blur:  saturate(1.05) blur(14px);
  --serif:'Cinzel','Times New Roman',serif;
  --sans:'Inter',system-ui,sans-serif;
}

/* Chrome-Elemente bekommen ihre Typo/Box selbst; das Pano (#container) bleibt unberuehrt. */
.ccag-chrome, .ccag-chrome *{ box-sizing:border-box; margin:0; padding:0; }
.ccag-chrome{ font-family:var(--sans); color:var(--anthracite); }

/* ── Kopfleiste ───────────────────────────────────────────────────────────── */
header.ccag-chrome{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:58px; padding:0 26px;
  background:linear-gradient(180deg, rgba(244,240,233,0.82), rgba(244,240,233,0.58));
  -webkit-backdrop-filter:var(--chrome-blur); backdrop-filter:var(--chrome-blur);
  border-bottom:1px solid var(--hairline);
}
.ccag-wordmark{
  font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:0.14em;
  color:var(--anthracite); text-transform:uppercase;
  display:flex; align-items:baseline; gap:10px; white-space:nowrap;
}
.ccag-wordmark .dot{ color:var(--bordeaux); font-size:18px; line-height:0; }
.ccag-wordmark .sub{
  font-family:var(--sans); font-weight:300; font-size:10px; letter-spacing:0.22em;
  color:var(--anthracite-2); text-transform:uppercase;
}

/* ── Kuenstler-Navigation (aufklappbar) ───────────────────────────────────── */
.ccag-nav{ position:relative; }
.ccag-nav-trigger{
  font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--anthracite);
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:9px; padding:8px 4px;
}
.ccag-nav-trigger .caret{ color:var(--bordeaux); font-size:10px; transition:transform .2s; }
.ccag-nav[open] .ccag-nav-trigger .caret{ transform:rotate(180deg); }

.ccag-menu{
  position:absolute; top:calc(100% + 12px); right:0; width:288px;
  background:rgba(250,247,241,0.92);
  -webkit-backdrop-filter:var(--chrome-blur); backdrop-filter:var(--chrome-blur);
  border:1px solid var(--hairline); box-shadow:0 24px 60px rgba(38,35,34,0.18);
  padding:10px 0; max-height:min(70vh,560px); overflow-y:auto;
  display:none;                         /* eingeklappt = default */
}
.ccag-nav[open] .ccag-menu{ display:block; }   /* aufgeklappt */

.ccag-menu-head{
  font-family:var(--serif); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--anthracite-2); padding:6px 22px 12px;
  border-bottom:1px solid var(--hairline); margin-bottom:6px;
}
.ccag-menu a{
  display:flex; align-items:baseline; gap:14px; padding:9px 22px; text-decoration:none;
  color:var(--anthracite); font-size:14px; font-weight:400;
  transition:background .15s, color .15s;
}
.ccag-menu a .num{
  font-family:var(--serif); font-size:11px; color:var(--bordeaux);
  min-width:20px; letter-spacing:0.05em;
}
.ccag-menu a:hover, .ccag-menu a.active{
  background:linear-gradient(90deg, rgba(110,26,40,0.09), rgba(110,26,40,0));
  color:var(--bordeaux-deep);
}
.ccag-menu a.active{ box-shadow:inset 3px 0 0 var(--bordeaux); }

/* ── Footer / Ecklinks ────────────────────────────────────────────────────── */
/* Die Pano2VR-Bedienleiste (skin.js #navigation_menu) sitzt bodenzentriert:
   bottom:1.8%, height:60px, width:188px, horizontal mittig. Ein Vollbreiten-
   Footer-Band ueber der Mitte ueberdeckt deren Zoom/Vollbild/Info-Icons (optisch
   + Klick). Deshalb: Footer selbst transparent + klick-durchlaessig, die beiden
   Ecklinks-Cluster tragen ihren eigenen kompakten Backdrop und bleiben klickbar.
   Ergebnis: die bodenzentrierte Player-Leiste bleibt komplett frei. */
footer.ccag-chrome{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:40px; padding:0 26px;
  background:none;                 /* kein Vollbreiten-Band mehr ueber der Player-Mitte */
  pointer-events:none;             /* Mitte klick-durchlaessig -> Player-Controls erreichbar */
}
.ccag-footer-left,
.ccag-legal{
  pointer-events:auto;             /* Ecklinks bleiben interaktiv */
  padding:5px 13px;
  background:linear-gradient(0deg, rgba(244,240,233,0.86), rgba(244,240,233,0.42));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--hairline);
}
.ccag-footer-left{
  font-family:var(--sans); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--anthracite-2);
}
.ccag-footer-left b{ color:var(--bordeaux); font-weight:500; }
.ccag-legal{ display:flex; align-items:center; gap:20px; }
.ccag-legal button{
  font-family:var(--sans); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--anthracite-2); background:none; border:none; cursor:pointer;
  padding:6px 0; position:relative;
}
.ccag-legal button::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:0;
  background:var(--bordeaux); transition:width .2s;
}
.ccag-legal button:hover{ color:var(--anthracite); }
.ccag-legal button:hover::after{ width:100%; }

/* Schmale Viewports: die zentrierte 188px-Player-Leiste wird relativ so breit,
   dass der rechte Ecklinks-Cluster ihre Kante touchieren wuerde. Dann die
   Footer-Cluster ueber die Player-Leiste heben (sie sitzt bei bottom:1.8% + 60px).
   Klicks passieren dank pointer-events:none ohnehin immer durch — das hier ist
   rein optisch, damit sich auf schmalen Fenstern nichts mehr beruehrt. */
@media (max-width:820px){
  footer.ccag-chrome{ bottom:calc(1.8vh + 64px); }
}

/* ── Modal-Overlay: Tour laeuft dahinter WEITER ───────────────────────────── */
.ccag-overlay{
  position:fixed; inset:0; z-index:1100;
  display:none; align-items:center; justify-content:center;
  background:rgba(38,35,34,0.30);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ccag-overlay.open{ display:flex; }
.ccag-modal{
  width:min(560px,90vw); max-height:86vh; overflow-y:auto;
  background:var(--warm-white-2); border:1px solid var(--hairline);
  box-shadow:0 40px 90px rgba(38,35,34,0.35);
  padding:40px 44px 38px; position:relative;
}
.ccag-modal h2{
  font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--anthracite); margin-bottom:6px;
}
.ccag-modal h3{
  font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:0.06em;
  color:var(--anthracite); margin:22px 0 8px;
}
.ccag-modal .rule{ width:40px; height:2px; background:var(--bordeaux); margin:14px 0 20px; }
.ccag-modal p, .ccag-modal li{
  font-size:13.5px; line-height:1.7; color:var(--anthracite-2); font-weight:300;
}
.ccag-modal p{ margin-bottom:12px; }
.ccag-modal ul{ margin:0 0 12px 20px; }
.ccag-modal a{ color:var(--bordeaux); text-decoration:none; }
.ccag-modal a:hover{ text-decoration:underline; }
.ccag-modal .close{
  position:absolute; top:16px; right:18px; font-size:22px; line-height:1;
  background:none; border:none; cursor:pointer; color:var(--anthracite-2);
}
.ccag-modal .close:hover{ color:var(--bordeaux); }