/* ============================================================
   re.venture · Messe-Hub — Metal Layer
   Legt die edlen Metall-Buttons & gebürsteten Backgrounds über das
   bestehende Drei-Theme-System (anthrazit / schwarz / hell).
   Wird in jede Seite als <link> eingebunden — verändert keine Logik.
   ============================================================ */

:root{
  --metal-grain: repeating-linear-gradient(100deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.05) 2px 3px);
}

/* — Gebürsteter Grain-Overlay über dem ganzen Hintergrund (theme-neutral) —
   z-index:-1 + isolation hält ihn hinter dem Inhalt, ohne fixe Header/
   Bottom-Navs zu beeinflussen (kein Eingriff in position der Kinder). */
body{ isolation:isolate; }
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--metal-grain);
  opacity:.5;
  mix-blend-mode:soft-light;
}

/* ============================================================
   METALL-BUTTONS  (.mbtn …)  — selbsttragende Optik
   ============================================================ */
.mbtn{
  --grain: var(--metal-grain);
  position:relative;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
  padding:14px 28px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); cursor:pointer;
  background:var(--grain), linear-gradient(180deg,#3C3835 0%,#2C2926 52%,#201E1C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.45),
             0 6px 16px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.6);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.mbtn:hover{ filter:brightness(1.1); }
.mbtn:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10), 0 1px 3px rgba(0,0,0,.4);
}
.mbtn--spun{
  background:var(--grain),
    conic-gradient(from 0deg at 50% 50%, #2A2725 0deg,#4A4642 35deg,#232120 80deg,#4E4945 130deg,#201E1C 180deg,#443F3B 230deg,#1E1C1A 280deg,#4A4642 320deg,#2A2725 360deg);
}
.mbtn--green{
  color:#fff;
  background:var(--grain), linear-gradient(180deg,#4E7D22 0%,#3A6019 52%,#244012 100%);
  border-color:rgba(174,219,107,.4);
  box-shadow:inset 0 1px 0 rgba(198,232,138,.45), inset 0 -2px 4px rgba(0,0,0,.4),
             0 6px 16px rgba(30,51,17,.45), 0 1px 0 rgba(0,0,0,.5);
}
.mbtn--platinum{
  color:#2C2A2A; text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:var(--grain), linear-gradient(180deg,#FCFBFB 0%,#DEDADB 52%,#C4C0C1 100%);
  border-color:rgba(0,0,0,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.16),
             0 6px 16px rgba(40,38,38,.22), 0 1px 0 rgba(0,0,0,.18);
}

/* ============================================================
   HUB-INTEGRATION  (index.html)
   Primäre Link-Karten als gebürstete Jet-Plinthen, Akzent als
   anodisiertes Grün, die grünen Icon-Tiles als Spun-Metall.
   ============================================================ */
.hub .btn-link{
  background:var(--metal-grain), linear-gradient(180deg,#312E2B 0%,#272421 55%,#1E1C1A 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 5px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.34);
}
.hub .btn-link:hover{ filter:brightness(1.08); transform:translateY(-1px); border-color:rgba(255,255,255,.18); }
.hub .btn-link:active{ transform:translateY(0); box-shadow:inset 0 2px 6px rgba(0,0,0,.5); }
.hub .btn-link.accent{
  background:var(--metal-grain), linear-gradient(180deg,#4E7D22 0%,#3A6019 55%,#244012 100%);
  border-color:rgba(174,219,107,.4);
  box-shadow:inset 0 1px 0 rgba(198,232,138,.4), inset 0 -2px 5px rgba(0,0,0,.38), 0 8px 22px rgba(30,51,17,.4);
}
.hub .btn-link.accent .lbl,
.hub .btn-link.accent .lbl small,
.hub .btn-link.accent .arr{ color:#fff; }
.hub .btn-link.accent .lbl small{ color:rgba(255,255,255,.82); }
.hub .btn-link .lbl{ text-shadow:0 1px 1px rgba(0,0,0,.35); }

/* Icon-Tiles → Spun-Metall-Dials */
.hub .icon{
  background:conic-gradient(from 0deg at 50% 50%, #2A2725 0deg,#4A4642 40deg,#232120 90deg,#4E4945 150deg,#201E1C 200deg,#443F3B 260deg,#2A2725 360deg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 3px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.4);
}
.hub .btn-link.accent .icon{
  background:conic-gradient(from 0deg at 50% 50%, #3A6019 0deg,#6FA52C 50deg,#2E4A1E 110deg,#7CB834 170deg,#244012 230deg,#5C8C2A 300deg,#3A6019 360deg);
  color:#fff;
}
.hub .icon.green{ color:#BDE372; }
.hub .icon.dim{ color:rgba(255,255,255,.7); }

/* Brushed-Plate hinter dem Logo */
.hub .brand{
  padding:26px 40px 22px; border-radius:18px;
  background:var(--metal-grain), linear-gradient(180deg,#34312E 0%,#262320 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 34px rgba(0,0,0,.4);
}

/* — Hell-Theme: Metalle auf Platinum umstellen — */
:root[data-theme="hell"] body::before{ mix-blend-mode:multiply; opacity:.35; }
:root[data-theme="hell"] .hub .btn-link:not(.accent){
  background:var(--metal-grain), linear-gradient(180deg,#FCFBFB 0%,#ECE9EA 55%,#D6D2D3 100%);
  border-color:rgba(0,0,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 5px rgba(0,0,0,.12), 0 8px 20px rgba(40,38,38,.16);
}
:root[data-theme="hell"] .hub .btn-link:not(.accent) .lbl{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
:root[data-theme="hell"] .hub .brand{
  background:var(--metal-grain), linear-gradient(180deg,#FCFBFB 0%,#E4E0E1 100%);
  border-color:rgba(0,0,0,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 30px rgba(40,38,38,.14);
}
:root[data-theme="hell"] .hub .icon.dim{ color:rgba(44,42,42,.7); }

@media(prefers-reduced-motion:reduce){ .mbtn{ transition:none; } }

/* ============================================================
   PRIMÄRE AKTIONS-BUTTONS auf den Funktionsseiten
   (lead-erfassung · buchung · meeting-buchen · raumbuchung · admin)
   Anodisiertes Grünmetall — nur Optik, Layout/Größe der Seite bleibt.
   ============================================================ */
.btn-submit,
.btn-save,
.btn.btn-prim{
  background:var(--metal-grain), linear-gradient(180deg,#4E7D22 0%,#3A6019 52%,#244012 100%) !important;
  color:#fff !important;
  border:1px solid rgba(174,219,107,.4) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(198,232,138,.45), inset 0 -2px 4px rgba(0,0,0,.4),
             0 6px 16px rgba(30,51,17,.42), 0 1px 0 rgba(0,0,0,.5) !important;
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-submit:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.btn.btn-prim:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }
.btn-submit:active:not(:disabled),
.btn-save:active:not(:disabled),
.btn.btn-prim:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(198,232,138,.2), 0 1px 3px rgba(0,0,0,.4) !important;
}
/* Disabled: flach & gedämpft, nicht „aktiv" wirken lassen */
.btn-submit:disabled,
.btn-save:disabled,
.btn.btn-prim:disabled{
  background:linear-gradient(180deg,#3A4030,#2C3127) !important;
  color:rgba(255,255,255,.4) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  text-shadow:none; filter:none; transform:none;
}

/* Sekundär-Button im Admin (Aktualisieren) → gebürstetes Jet, dezent */
.btn.btn-sec{
  background:var(--metal-grain), linear-gradient(180deg,#34312E,#232120) !important;
  color:rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.3) !important;
}
.btn.btn-sec:hover{ filter:brightness(1.1); }

/* Refresh-Buttons in den Dashboards → gebürstetes Jet */
.refresh-btn{
  background:var(--metal-grain), linear-gradient(180deg,#34312E,#232120) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.3) !important;
}
.refresh-btn:hover{ filter:brightness(1.1); }

/* ============================================================
   LEAD-ERFASSUNG — volle Metall-Integration (body.rev-metal-page)
   Karten als gebürstete Plinthen, Header als Brushed-Plate,
   aktive Tabs als anodisiertes Grünmetall. Theme-fähig (dark/light).
   ============================================================ */
body.rev-metal-page[data-theme="dark"] .card{
  background:var(--metal-grain), linear-gradient(180deg,#2A2724 0%,#211F1C 60%,#1A1817 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 5px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.32) !important;
}
body.rev-metal-page[data-theme="dark"] header{
  background:var(--metal-grain), linear-gradient(180deg,#34312E 0%,#252220 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.34);
}
body.rev-metal-page[data-theme="light"] .card{
  background:var(--metal-grain), linear-gradient(180deg,#FFFFFF 0%,#F1EEEF 60%,#E4E0E1 100%) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 5px rgba(0,0,0,.07), 0 10px 24px rgba(40,38,38,.12) !important;
}
body.rev-metal-page[data-theme="light"] header{
  background:var(--metal-grain), linear-gradient(180deg,#FFFFFF 0%,#ECE9EA 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(40,38,38,.10);
}
/* Aktiver Tab → anodisiertes Grünmetall (statt flachem Grün) */
body.rev-metal-page .tab-btn.active{
  background:var(--metal-grain), linear-gradient(180deg,#5C8C2A 0%,#3A6019 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(198,232,138,.45), 0 4px 12px rgba(30,51,17,.4);
}
body.rev-metal-page .tab-btn.active i{ color:#fff !important; }

/* — Plastischere Buttons in der Lead-Erfassung — */
/* Primärer Submit: extrudierte Kante, Lime-Akzentrand oben, Innensheen */
body.rev-metal-page .btn-submit{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 16%),
    var(--metal-grain),
    linear-gradient(180deg,#5C8C2A 0%,#3F6A1C 52%,#244012 100%) !important;
  border:1px solid rgba(174,219,107,.5) !important;
  border-top-color:rgba(198,232,138,.85) !important;
  color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:
    inset 0 1.5px 0 rgba(198,232,138,.6),
    inset 0 -3px 6px rgba(0,0,0,.42),
    0 8px 20px rgba(30,51,17,.5),
    0 3px 0 #1B3110 !important;            /* solide Extrusionskante = 3D */
  transition:transform .09s ease, box-shadow .12s ease, filter .12s ease;
}
body.rev-metal-page .btn-submit:hover:not(:disabled){ filter:brightness(1.08); }
body.rev-metal-page .btn-submit:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(198,232,138,.35),
    inset 0 2px 6px rgba(0,0,0,.5),
    0 1px 0 #1B3110 !important;            /* Button sinkt auf die Kante */
}
/* "Nächstes Gespräch": vom Outline- zum erhabenen Grünmetall-Button */
body.rev-metal-page .btn-new{
  background:var(--metal-grain), linear-gradient(180deg,#4E7D22 0%,#345714 100%) !important;
  border:1px solid rgba(174,219,107,.5) !important;
  border-top-color:rgba(198,232,138,.8) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(198,232,138,.5), 0 4px 12px rgba(30,51,17,.4), 0 2px 0 #1B3110 !important;
}
body.rev-metal-page .btn-new:hover{ filter:brightness(1.1); background:var(--metal-grain), linear-gradient(180deg,#4E7D22 0%,#345714 100%) !important; color:#fff !important; }
body.rev-metal-page .btn-new:active{ transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.4), 0 1px 0 #1B3110 !important; }
/* Zurück-zum-Hub: dezenter Bevel statt flachem Outline */
body.rev-metal-page .btn-back-hub{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.25);
}
/* Prioritäts-Chips (gewählt): Innenlicht oben = plastisch */
body.rev-metal-page #ph:checked + .prio-lbl,
body.rev-metal-page #pm:checked + .prio-lbl,
body.rev-metal-page #pl:checked + .prio-lbl{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(0,0,0,.3), 0 2px 0 rgba(0,0,0,.25) !important;
}