/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::
::   MASTER ADMINISTRATION INTERFACE                     © COLOREA GbR
::   Dateiname : index.css
::   Version   : 1.20 (Fix Modals + Full Editor Support)
::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* ============================================================
   ROOT + RESET
============================================================ */
:root{
  /* ROYAL BLUE DARK THEME BASE */
  --bg: #02040a;       /* Deepest Navy */
  --panel: #0b1221;    /* Lighter Royal Navy */

  --primary: #f2c14e;  /* Gold */
  --accent: #f2c14e;
  --text: #e4e4e7;
  --muted: #94a3b8;

  --btn-bg: #f2c14e;
  --btn-text: #ffffff;

  /* ACCENTS & GLOWS */
  --ring: rgba(242,193,78,.40);
  --line: rgba(255,255,255,.08);
  --line-blue: rgba(61,123,255,.15);

  /* Deep Blue tinted shadows */
  --shadow: 0 18px 60px rgba(2,4,10,.95);
  --shadow2: 0 14px 44px rgba(2,4,10,.85);

  --radius: 22px;
  --radius2: 16px;

  /* INTENSIFIED GLOWS */
  --glowGold: 0 0 0 1px rgba(242,193,78,.25), 0 0 22px rgba(242,193,78,.25), 0 0 50px rgba(242,193,78,.10);
  --glowBlue: 0 0 0 1px rgba(61,123,255,.25), 0 0 25px rgba(61,123,255,.30), 0 0 60px rgba(61,123,255,.15);

  /* Final Hover Glow */
  --glowRoyal: 0 0 60px rgba(61,123,255, 0.4), 0 0 20px rgba(242,193,78, 0.3);

  --wrap: 1200px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text); overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font-family:inherit; }
::selection{ background: rgba(61,123,255,.35); color: #fff; text-shadow: 0 0 5px rgba(255,255,255,.5); }

.wrap{ width: min(var(--wrap), calc(100% - 36px)); margin: 0 auto; }

.ref-hidden-text{ display:none !important; }

/* ============================================================
   BACKGROUND CANVAS LAYER
============================================================ */
#bg-canvas-wrap{ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -20%, #0f1c3d 0%, #02040a 60%); }
#bg-canvas{ position:absolute; inset:0; }
.bg-noise{ position:absolute; inset:0; opacity:.09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.bg-vignette{ position:absolute; inset:-20%; background: radial-gradient(ellipse at center, rgba(2,4,10,0) 0%, rgba(2,4,10,.6) 55%, #02040a 100%); opacity:.9; }

header, main, section, footer, .adminbar, .modal, .drawer, .lightbox-modal { position:relative; z-index:1; }

/* ============================================================
   TOPBAR
============================================================ */
.topbar{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(2,4,10,.92), rgba(11,18,33,.75)); border-bottom: 1px solid rgba(255,255,255,.06); }
.topbar-inner{ width:min(var(--wrap), calc(100% - 36px)); margin:0 auto; display:flex; align-items:center; gap:18px; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; min-width: 140px; }
.brand-logo{ display:block; width:auto; height:auto; max-height: 64px; object-fit: contain; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: filter .25s ease; border-radius: 10px; }
.brand:hover .brand-logo{ filter: drop-shadow(0 0 15px rgba(242,193,78,.3)); }

.nav{ flex:1; }
.nav-links{justify-content:flex-end;  list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:14px; justify-content:center; }
.nav-item{ position:relative; }
.nav-link{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 14px; font-weight: 850; letter-spacing:.2px; color: rgba(255,255,255,.82); transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.nav-link:hover{ background: rgba(61,123,255,.10); box-shadow: var(--glowBlue); color:#fff; }
.nav-link .dd{ opacity:.75; font-size:.85rem; }

.dropdown{ position:absolute; top: calc(100% + 10px); left: 0; min-width: 220px; padding: 10px; border-radius: 18px; background: rgba(11,18,33,.95); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 80px rgba(0,0,0,.75); backdrop-filter: blur(14px); opacity:0; transform: translateY(8px); pointer-events:none; transition: opacity .18s ease, transform .18s ease; }
.nav-item:hover .dropdown{ opacity:1; transform: translateY(0); pointer-events:auto; }
.dd-link{ display:block; padding: 10px 12px; border-radius: 14px; font-weight: 800; color: rgba(255,255,255,.82); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.dd-link:hover{ background: rgba(242,193,78,.10); color:#fff; box-shadow: var(--glowGold); }

.nav-cta{ display:flex; align-items:center; justify-content:flex-end; min-width: 170px; }
.nav-burger{ display:none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.nav-burger span{ display:block; height:2px; width: 18px; background:#fff; margin: 4px auto; border-radius: 4px; opacity:.9; }
.nav-mobile{ display:none; padding: 10px 18px 18px; background: rgba(11,18,33,.98); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-mobile.open{ display:block; }
.m-link{ display:block; padding: 10px 12px; border-radius: 14px; font-weight: 850; color: rgba(255,255,255,.86); }
.m-link:hover{ background: rgba(61,123,255,.10); }
.m-sublink{ display:block; padding: 10px 12px; border-radius: 14px; color: rgba(255,255,255,.86); opacity:.78; padding-left: 22px; font-weight: 800; }
.m-sublink:hover{ background: rgba(61,123,255,.10); opacity:1; }

/* ============================================================
   BUTTONS
============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 16px; font-weight: 900; letter-spacing:.2px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: #fff; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease; user-select:none; }
.btn i{ opacity:.92; }
.btn:hover{ box-shadow: var(--glowBlue); background: rgba(61,123,255,.15); border-color: rgba(61,123,255,.3); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:none; box-shadow: var(--glowGold); }

.btn-gold{ background: linear-gradient(180deg, rgba(242,193,78,1), rgba(212,163,48,1)); border-color: rgba(242,193,78,.35); color:#fff; box-shadow: 0 10px 40px rgba(242,193,78,.15); }
.btn-gold:hover{ filter: brightness(1.1); box-shadow: var(--glowGold); background: linear-gradient(180deg, #f2c14e, #f2c14e); }
.btn-ghost{ background: rgba(10,20,40,.4); border-color: rgba(61,123,255,.25); color:#fff; }
.btn-ghost:hover{ box-shadow: var(--glowBlue); background: rgba(61,123,255,.15); }

/* ============================================================
   HERO & ACTION BAR
============================================================ */
.hero{ position:relative; min-height: 86vh; display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-layer{ position:absolute; inset:0; overflow:hidden; }
.hero-layer video, .hero-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.04); filter: contrast(1.05) saturate(1.1); }
.hero-slide{ position:absolute; inset:0; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(242,193,78,.15), rgba(0,0,0,0) 45%), radial-gradient(circle at 80% 40%, rgba(61,123,255,.18), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(2,4,10,.3), rgba(2,4,10,.9)); opacity: .62; }

/* CENTERING HERO */
.hero-inner{ width: 100%; margin: 0; padding: 92px 18px 70px; position:relative; z-index:2; text-align:center; display:flex; justify-content:center; }
.hero-content{ width:min(var(--wrap), 100%); }
.hero-kicker{ display:inline-block; font-weight: 950; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); font-size: 1.1rem; margin-bottom: 16px; text-shadow: 0 0 20px rgba(242,193,78,.4); cursor:pointer; }
.hero-badge{ display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(61,123,255,.3); background: rgba(2,4,10,.6); box-shadow: var(--glowBlue); color: #fff; font-weight: 900; letter-spacing:.4px; text-transform: uppercase; font-size:.82rem; backdrop-filter: blur(4px); }
.hero-title{ margin: 10px 0 10px; font-size: clamp(2.2rem, 4.2vw, 4.2rem); line-height: 1.05; letter-spacing: .6px; font-weight: 950; text-transform: uppercase; background: linear-gradient(180deg, #fff 30%, #aab4cc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-title .dot{ -webkit-text-fill-color: var(--primary); color: var(--primary); text-shadow: 0 0 25px rgba(242,193,78,.55); }
.hero-sub{ margin: 0 auto; max-width: 820px; font-size: 1.12rem; color: rgba(255,255,255,.84); line-height: 1.6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 22px; justify-content:center; }
.hero-scroll{ display:none; }
.hero-glow-floor{ position:absolute; left:50%; bottom:-220px; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(circle at center, rgba(61,123,255,.18), rgba(0,0,0,0) 65%); filter: blur(20px); opacity: .85; z-index:1; }

.action-bar-wrap{ border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(11,18,33, 0.6); backdrop-filter: blur(10px); }
.action-bar-inner{ width:min(var(--wrap), calc(100% - 36px)); margin:0 auto; padding: 10px 0; text-align:center; }
.ab-content{ font-size: 1.25rem; font-weight: 850; letter-spacing: 1px; color:#fff; text-transform: uppercase; line-height: 1.1; }
.ab-content strong{ color: var(--primary); text-shadow: 0 0 10px rgba(242,193,78,.4); }
.marquee-wrap{ display:none; }

/* ============================================================
   SECTIONS
============================================================ */
section{ padding: 70px 0; }
.section-head{ margin-bottom: 24px; text-align: center; }
.kicker{ font-weight: 950; letter-spacing: 2px; text-transform: uppercase; color: rgba(242,193,78,.95); font-size: .82rem; text-shadow: 0 0 15px rgba(242,193,78,.25); }
.section-head h2{ margin: 10px 0 10px; font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 950; letter-spacing:.4px; }
.section-head p{ margin: 0 auto; max-width: 860px; color: rgba(255,255,255,.78); line-height:1.7; }

/* ============================================================
   CARD EFFECT (Snake / Conic Border)
============================================================ */
.svc-card, .proof-tile, .ref-card-big {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  isolation: isolate;
}
.svc-card::before, .proof-tile::before, .ref-card-big::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  background: conic-gradient(from 180deg, transparent 40%, var(--primary), #3d7bff, transparent 80%);
  opacity: 0; transition: opacity 0.3s;
  animation: none;
}
.svc-card::after, .proof-tile::after, .ref-card-big::after{
  content:""; position:absolute; inset:2px; z-index:-1;
  background: var(--panel);
  border-radius: calc(var(--radius) - 2px);
}
.svc-card:hover, .proof-tile:hover, .ref-card-big:hover{
  transform: translateY(-5px);
  box-shadow: var(--glowRoyal);
  border-color: transparent;
}
.svc-card:hover::before, .proof-tile:hover::before, .ref-card-big:hover::before{
  opacity: 1;
  animation: rotate 2.5s linear infinite;
}
@keyframes rotate { 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }

.svc-card > *, .ref-card-big > * { position: relative; z-index: 2; }
.proof-img, .ref-media-big img { backface-visibility: hidden; transform: translateZ(0); will-change: transform; }

/* ============================================================
   GRID LAYOUTS (CENTERED)
============================================================ */
.cards-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.svc-card{ padding: 22px; text-align: center; }
.svc-ico{ width: 54px; height: 54px; border-radius: 18px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(242,193,78,.22); background: rgba(2,4,10,.5); box-shadow: var(--glowGold); margin: 0 auto 12px auto; transition: transform .3s ease; }
.svc-card:hover .svc-ico{ transform: scale(1.1); }
.svc-ico i{ font-size: 1.15rem; color:#fff; }
.svc-card h3{ margin: 0 0 8px; font-size: 1.25rem; font-weight: 950; }
.svc-card p{ margin:0; color: rgba(255,255,255,.76); line-height: 1.65; }

.mega-strip{ margin-top: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.strip-left, .strip-right{ border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); background: linear-gradient(135deg, rgba(15,25,45,.6), rgba(5,10,20,.8)); padding: 18px; box-shadow: var(--shadow2); position:relative; overflow:hidden; }
.strip-left::before, .strip-right::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 10% 10%, rgba(61,123,255,.15), transparent 60%); opacity:.9; }
.strip-left > *, .strip-right > *{ position:relative; z-index:1; }
.mega-strip h3{ margin:0 0 6px; font-weight: 950; }
.mega-strip p{ margin:0; color: rgba(255,255,255,.75); line-height:1.6; }

.proofwall{ padding-top: 62px; }
.proof-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
@media(min-width: 820px){ .proof-grid{ grid-template-columns: repeat(4, 1fr); } }
@media(min-width: 1201px){ .proof-grid{ grid-template-columns: repeat(5, 1fr); } }
.proof-tile{ position:relative; border-radius: 18px; overflow:hidden; border: 1px solid rgba(255,255,255,.06); background: #02040a; box-shadow: var(--shadow2); aspect-ratio: 1 / 1; transition: all .4s ease; }
.proof-img{ width:100%; height:100%; object-fit: cover; transition: transform .5s ease; transform: scale(1.01); }
.proof-tile:hover .proof-img{ transform: scale(1.05); }
.proof-note{ margin-top: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(242,193,78,.18); background: rgba(242,193,78,.05); color: rgba(255,255,255,.85); text-align: center; }

.refs{ position:relative; }
.refs-grid-big{ display:grid; grid-template-columns: repeat(1, 1fr); gap: 14px; margin-top: 22px; }
@media(min-width: 860px){ .refs-grid-big{ grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1200px){ .refs-grid-big{ grid-template-columns: repeat(3, 1fr); } }
.ref-card-big{ border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(15,25,45,.6), rgba(2,4,10,.9)); box-shadow: var(--shadow2); overflow:hidden; display:flex; flex-direction:column; min-height: 340px; transition: all .4s cubic-bezier(0.25, 1, 0.5, 1); cursor:pointer; }
.ref-media-big{ position:relative; height: 190px; overflow:hidden; }
.ref-media-big img{ width:100%; height:100%; object-fit: cover; transform: scale(1.02); transition: transform .6s ease; }
.ref-card-big:hover .ref-media-big img{ transform: scale(1.06); }
.ref-shade-big{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(2,4,10,.7) 100%); }
.ref-body-big{ padding: 16px 16px 18px; text-align: center; }
.ref-name-big{ font-weight: 950; font-size: 1.15rem; margin-bottom: 8px; }
.ref-desc-big{ color: rgba(255,255,255,.76); line-height: 1.6; margin-bottom: 10px; }
.ref-tags{ display:inline-flex; gap:10px; flex-wrap:wrap; font-weight: 900; font-size: .86rem; color: rgba(242,193,78,.92); text-transform: uppercase; letter-spacing: .8px; justify-content: center; }
.refs-glow{ position:absolute; inset:auto 0 -220px 0; height: 520px; background: radial-gradient(circle at 50% 10%, rgba(61,123,255,.18), transparent 62%); filter: blur(40px); pointer-events:none; }

/* ============================================================
   FRONTEND OVERLAY HARD-GUARD
   backend.css in COLOREA CMS also defines generic classes like
   .modal / .drawer which can unintentionally override the root
   page overlays. These rules FORCE the expected overlay behavior.
   (Design stays identical; this only prevents "falls under footer".)
============================================================ */
.modal-backdrop,
.modal,
.drawer,
.lightbox-backdrop,
.lightbox-modal{
  position: fixed !important;
}
.modal-backdrop{ inset:0 !important; }
.modal{ left:50% !important; top:50% !important; transform: translate(-50%,-50%) scale(.98) !important; }
.modal.open{ transform: translate(-50%,-50%) scale(1) !important; }
.drawer{ top:12px !important; bottom:12px !important; right:12px !important; left:auto !important; }
.lightbox-backdrop{ inset:0 !important; }
.lightbox-modal{ left:50% !important; top:50% !important; transform: translate(-50%,-50%) scale(.95) !important; }
.lightbox-modal.open{ transform: translate(-50%,-50%) scale(1) !important; }

/* ensure overlays always float above layout regardless of other styles */
.modal-backdrop{ z-index:3000 !important; }
.modal{ z-index:3100 !important; }
.drawer{ z-index:3200 !important; }
.lightbox-backdrop{ z-index:4000 !important; }
.lightbox-modal{ z-index:4001 !important; }

/* ============================================================
   LIGHTBOX MODAL
============================================================ */
.lightbox-backdrop{ position:fixed; inset:0; z-index: 4000; background: rgba(0,0,0,.92); backdrop-filter: blur(12px); opacity:0; pointer-events:none; transition: opacity .3s ease; }
.lightbox-backdrop.open{ opacity:1; pointer-events:auto; }

.lightbox-modal{
  position:fixed; left:50%; top:50%; transform: translate(-50%, -50%) scale(.95);
  width: 90%; max-width: 1400px; height: 85vh;
  background: #0b1221; border: 1px solid rgba(61,123,255,.2);
  border-radius: 24px; box-shadow: 0 0 100px rgba(61,123,255,.2);
  display:grid; grid-template-columns: 1.4fr 1fr; overflow:hidden; opacity:0; pointer-events:none; transition: all .3s ease; z-index: 4001;
}
.lightbox-modal.open{ opacity:1; pointer-events:auto; transform: translate(-50%, -50%) scale(1); }
@media(max-width:900px){ .lightbox-modal{ grid-template-columns: 1fr; height: auto; max-height: 90vh; overflow-y:auto; } }

.lb-img-col{ background:#000; display:flex; align-items:center; justify-content:center; position:relative; height: 100%; }
.lb-img-col img{ width:100%; height:100%; object-fit:contain; }
.lb-txt-col{ padding: 40px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow-y: auto; text-align: left; }
.lb-close{ position:absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size: 1.2rem; z-index:10; transition:all .2s; }
.lb-close:hover{ background: var(--primary); color:#000; transform: rotate(90deg); }
.lb-title{ font-size: 2.2rem; font-weight: 950; margin-bottom: 20px; color:#fff; line-height:1.1; }
.lb-desc{ font-size: 1.1rem; line-height: 1.8; color: rgba(255,255,255,.8); }

/* ============================================================
   FOOTER
============================================================ */
.site-footer{ padding: 54px 0 28px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(2,4,10,.6), #000000); }
.fcols-3{ display:flex; justify-content:space-between; align-items: flex-start; gap: 40px; flex-wrap:wrap; }
.f-left { flex:1; text-align:left; }
.f-mid  { flex:1; text-align:center; }
.f-right{ flex:1; text-align:right; }
@media(max-width: 900px){ .fcols-3{ flex-direction: column; text-align: center; } .f-left, .f-mid, .f-right{ text-align: center; } }

.site-footer h4{ margin:0 0 12px; font-weight: 950; letter-spacing:.5px; text-transform: uppercase; color:#fff; }
.site-footer p{ margin:0; color: rgba(255,255,255,.72); line-height: 1.7; }
.site-footer a{ color: rgba(242,193,78,.92); font-weight: 850; }
.site-footer a:hover{ text-decoration: underline; text-shadow: 0 0 10px rgba(242,193,78,.4); }
.fcopy-wide{ margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); text-align:center; color: rgba(255,255,255,.5); font-size: 0.9rem; }

/* ============================================================
   ADMIN TOOLS
============================================================ */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

.adminbar{ position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2000; border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: rgba(11,18,33,.88); backdrop-filter: blur(16px); box-shadow: 0 24px 90px rgba(0,0,0,.8); padding: 12px 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.ab-left{ display:flex; align-items:center; gap: 12px; min-width: 240px; }
.ab-brand{ display:flex; align-items:center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); }
.ab-logo{ height: 34px; width:auto; border-radius: 10px; }
.ab-title{ font-weight: 950; letter-spacing:.5px; text-transform: uppercase; font-size: .86rem; color: rgba(255,255,255,.92); line-height: 1.1; }
.ab-pill{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(242,193,78,.20); background: rgba(0,0,0,.22); font-weight: 950; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; color: rgba(255,255,255,.86); }
.ab-pill.dirty{ border-color: rgba(61,123,255,.35); box-shadow: var(--glowBlue); }

.ab-right{ display:flex; flex-wrap:wrap; align-items:center; gap: 10px; justify-content:flex-end; }
.ab-btn{ display:inline-flex; align-items:center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; font-weight: 900; cursor:pointer; transition: box-shadow .18s ease, background .18s ease, transform .18s ease, border-color .18s ease; }
.ab-btn:hover{ background: rgba(61,123,255,.15); box-shadow: var(--glowBlue); }
.ab-btn:active{ transform: translateY(1px); }
.ab-btn span{ opacity:.95; }
.ab-save{ border-color: rgba(242,193,78,.32); background: linear-gradient(180deg, rgba(242,193,78,.96), rgba(242,193,78,.78)); color:#fff; }
.ab-save:hover{ box-shadow: var(--glowGold); background: #f2c14e; }
.ab-discard{ border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.22); }
.ab-backend{ border-color: rgba(61,123,255,.25); background: rgba(61,123,255,.10); }
.ab-backend:hover{ box-shadow: var(--glowBlue); }

/* EDIT PENS (centered on text elements) */
.editable, .editable-media{ position: relative; }
.editable-text{ display:inline-block; }

.edit-pen{position:absolute; z-index:9; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(0,0,0,.55); border:1px solid rgba(242,193,78,.45); color:#fff; backdrop-filter: blur(8px); transform:translate(-50%,-50%); opacity:0; transition:opacity .18s ease, transform .18s ease;}
.edit-pen:hover{ box-shadow: var(--glowRoyal); background: rgba(61,123,255,.18); }
.editable:hover > .edit-pen,
.editable:focus-within > .edit-pen{position:absolute; z-index:9; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(0,0,0,.55); border:1px solid rgba(242,193,78,.45); color:#fff; backdrop-filter: blur(8px); transform:translate(-50%,-50%); opacity:0; transition:opacity .18s ease, transform .18s ease;}

/* media pen stays top-right */
img.editable-media + .edit-pen,
video.editable-media + .edit-pen{position:absolute; z-index:9; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(0,0,0,.55); border:1px solid rgba(242,193,78,.45); color:#fff; backdrop-filter: blur(8px); transform:translate(-50%,-50%); opacity:0; transition:opacity .18s ease, transform .18s ease;}
.proof-tile:hover img.editable-media + .edit-pen,
.ref-media-big:hover img.editable-media + .edit-pen{position:absolute; z-index:9; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(0,0,0,.55); border:1px solid rgba(242,193,78,.45); color:#fff; backdrop-filter: blur(8px); transform:translate(-50%,-50%); opacity:0; transition:opacity .18s ease, transform .18s ease;}

/* Modals */
.modal-backdrop{ position: fixed; inset: 0; z-index: 3000; background: rgba(2,4,10,.85); opacity: 0; pointer-events:none; transition: opacity .18s ease; backdrop-filter: blur(5px); }
.modal-backdrop.open{ opacity: 1; pointer-events:auto; }
.modal{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); width: min(980px, calc(100% - 24px)); max-height: min(86vh, 900px); overflow:hidden; z-index: 3100; border-radius: 24px; border: 1px solid rgba(255,255,255,.10); background: rgba(11,18,33,.96); box-shadow: 0 40px 120px rgba(0,0,0,.8); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; }
.modal.open{ opacity: 1; pointer-events:auto; transform: translate(-50%, -50%) scale(1); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(180deg, rgba(61,123,255,.12), rgba(0,0,0,0)); border-bottom: 1px solid rgba(255,255,255,.08); }
.modal-title{ font-weight: 950; letter-spacing: .4px; font-size: 1.1rem; }
.modal-sub{ margin-top: 4px; color: rgba(255,255,255,.70); font-weight: 850; font-size: .92rem; }
.modal-close{ width: 44px; height: 44px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.modal-close:hover{ box-shadow: var(--glowBlue); }
.modal-body{ padding: 16px 18px; overflow:auto; max-height: calc(86vh - 160px); }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(2,4,10,.4); }
.modal-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Editor & Drawer */
.toolbar{ display:flex; gap: 10px; flex-wrap:wrap; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,4,10,.4); margin-bottom: 10px; }
.tb-btn{ height: 40px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; font-weight: 900; cursor:pointer; display:inline-flex; align-items:center; gap: 8px; transition: box-shadow .18s ease, background .18s ease, transform .18s ease; }
.tb-btn:hover{ background: rgba(255,255,255,.08); box-shadow: var(--glowBlue); }
.tb-btn:active{ transform: translateY(1px); }
.tb-color{ width: 44px; height: 40px; padding: 0; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }

.editor{ min-height: 260px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: #050a14; color:#fff; outline:none; line-height: 1.65; }
.editor a{ color: rgba(242,193,78,.95); text-decoration: underline; }
.editor:focus{ border-color: rgba(61,123,255,.35); box-shadow: var(--glowBlue); }

/* Dedicated TextArea Style */
.editor-textarea{ width: 100%; min-height: 280px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: #050a14; color: #fff; padding: 14px; font-family: inherit; font-size: 1rem; outline: none; line-height: 1.6; }
.editor-textarea:focus{ border-color: var(--primary); box-shadow: var(--glowGold); }

.drawer{ position: fixed; right: 12px; top: 12px; bottom: 12px; width: min(1100px, calc(100% - 24px)); max-width: 1100px; z-index: 3200; border-radius: 24px; border: 1px solid rgba(255,255,255,.10); background: rgba(11,18,33,.96); box-shadow: 0 40px 120px rgba(0,0,0,.8); transform: translateX(110%); transition: transform .22s ease; overflow:hidden; }
.drawer.open{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(180deg, rgba(61,123,255,.15), rgba(0,0,0,0)); border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-title{ font-weight: 950; letter-spacing: .4px; display:flex; align-items:center; gap: 10px; }
.drawer-close{ width: 44px; height: 44px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.drawer-close:hover{ box-shadow: var(--glowBlue); }
.drawer-body{ padding: 16px 18px; height: calc(100% - 78px); overflow:auto; }
.drawer-grid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 14px; height: 100%; }
@media(max-width: 980px){ .drawer-grid{ grid-template-columns: 1fr; } }
.media-left, .media-right{ border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,4,10,.4); overflow:hidden; display:flex; flex-direction:column; min-height: 520px; }
.media-tabs{ display:flex; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(2,4,10,.4); }
.mtab{ height: 40px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; font-weight: 900; cursor:pointer; }
.mtab.active{ background: rgba(242,193,78,.18); border-color: rgba(242,193,78,.28); box-shadow: var(--glowGold); }
.media-search{ display:flex; align-items:center; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.media-search input{ width:100%; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:#fff; padding: 0 12px; outline:none; }
.media-search input:focus{ box-shadow: var(--glowBlue); }
.media-drop{ margin: 12px; border-radius: 22px; border: 1px dashed rgba(61,123,255,.35); background: rgba(2,4,10,.3); padding: 14px; }
.md-title{ font-weight: 950; letter-spacing: .8px; text-transform: uppercase; }
.md-sub{ margin-top: 4px; color: rgba(255,255,255,.72); line-height:1.5; }
.media-drop input[type="file"]{ width:100%; margin: 10px 0; color:#fff; }
.md-hint{ margin-top: 10px; color: rgba(255,255,255,.72); font-weight: 850; }
.media-list{ padding: 10px; overflow:auto; height: 100%; }
.media-item{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.04); cursor:pointer; margin-bottom: 10px; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.media-item:hover{ background: rgba(61,123,255,.15); box-shadow: var(--glowBlue); }
.mi-name{ font-weight: 950; color:#fff; }
.mi-meta{ margin-top: 4px; color: rgba(255,255,255,.68); font-weight: 800; font-size: .9rem; word-break: break-all; }
.media-preview{ padding: 14px; display:flex; align-items:center; justify-content:center; height: 100%; border-bottom: 1px solid rgba(255,255,255,.06); }
.media-preview img, .media-preview video{ width: 100%; max-height: 380px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.3); object-fit: contain; }
.mp-empty{ color: rgba(255,255,255,.70); font-weight: 900; text-align:center; padding: 20px; }
.media-assign{ padding: 14px; }
.ma-title{ font-weight: 950; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; }
.ma-row{ display:flex; gap: 10px; flex-wrap:wrap; }
.ma-note{ margin-top: 10px; color: rgba(255,255,255,.70); font-weight: 850; line-height:1.6; }
.ma-progress{ margin-top: 10px; color: rgba(242,193,78,.92); font-weight: 950; }

@media(max-width: 980px){
  .nav{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .topbar-inner{ justify-content:space-between; }
  .hero-inner{ padding: 78px 0 62px; }
  .cards-3{ grid-template-columns: 1fr; }
  .mega-strip{ grid-template-columns: 1fr; }
  .adminbar{ left: 10px; right: 10px; }
  .ab-left{ min-width: 0; }
  .ab-title{ display:none; }
}
@media(max-width: 560px){
  .hero-title{ letter-spacing:.3px; }
  section{ padding: 56px 0; }
  .adminbar{ padding: 10px; }
  .ab-right{ gap: 8px; }
  .ab-btn{ padding: 0 12px; }
  .ab-btn span{ display:none; }
}

hr{ border:none; border-top: 1px solid rgba(255,255,255,.08); margin: 18px 0; }
code{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); padding: 2px 6px; border-radius: 10px; }


/* --- v7 width fix: ensure hero stays centered on ultra-wide screens --- */
.hero{ justify-content: center; }

/* --- FRONTEND GUARD (backend.css neutralizer) ---
   backend.css is a required project asset, but if it is loaded on this root page
   it can include backend layout rules (e.g. body:flex / sidebar offsets).
   These overrides only reset layout positioning so the frontend can span full width.
*/
html, body{ width:100% !important; }
body{ display:block !important; }
body > header, body > main, body > section, body > footer{ width:100% !important; flex: 0 0 auto !important; }
main{ margin-left: 0 !important; }
.topbar{ left:0 !important; right:0 !important; width:100% !important; }
.hero, .hero-media, .hero-layer, .hero-inner{ width:100% !important; }
.hero-media{ left:0 !important; right:0 !important; }
.brand img, .brand-logo{ width:auto !important; max-width: 100% !important; object-fit: contain !important; }


/* EDIT WRAP (pen positioning without layout break) */
.edit-wrap{position:relative; display:inline-block;}
.edit-wrap.block{display:block; width:100%;}

.edit-wrap:hover .edit-pen, .editable:hover + .edit-pen, .edit-pen:hover{opacity:1;}

.service-icon{display:flex; align-items:center; justify-content:center;}
.service-icon i{display:block; line-height:1;}

.ml-tip{grid-column:1/-1; width:100%;}

/* ============================================================
   OVERLAY FIX (Modal/Drawer/Lightbox)
   Ensure overlays stay fixed and never flow into the document,
   even if backend.css defines generic modal styles.
============================================================ */
.modal-backdrop{ position:fixed !important; inset:0 !important; }
.modal{ position:fixed !important; left:50% !important; top:50% !important; transform: translate(-50%, -50%) scale(.98) !important; }
.modal.open{ transform: translate(-50%, -50%) scale(1) !important; }

.drawer{ position:fixed !important; top:12px !important; bottom:12px !important; right:12px !important; left:auto !important; }

.lightbox-backdrop{ position:fixed !important; inset:0 !important; }
.lightbox-modal{ position:fixed !important; left:50% !important; top:50% !important; transform: translate(-50%, -50%) scale(.95) !important; }
.lightbox-modal.open{ transform: translate(-50%, -50%) scale(1) !important; }



/* ============================================================
   PATCH 2026-02-25 (Fixes requested)
   - Show reference/proof #10
   - Elegant snake border run + delayed glow (border only)
   - Ref cards: border-only animation (no fill tint)
   - Nav: remove submenu icons + no hover layout shift + stable dropdown hover
   - Remove "Tipp: Du kannst Bilder per Media Library..." everywhere
============================================================ */

/* --- NAV: kill submenu icons + stabilize hover --- */
.dropdown .dd-link i,
.dropdown .dd-link svg,
.dropdown .dd-link .fa,
.dropdown .dd-link [class*="fa-"]{
  display:none !important;
}
.dropdown .dd-link::before{ content:none !important; }

.nav-link{
  border:1px solid transparent; /* reserve space so nothing shifts */
  transform:none !important;
}
.nav-link:hover{
  transform:none !important;
}

/* keep dropdown open while moving cursor from item to dropdown */
.nav-item{ position:relative; }
.nav-item::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:14px; /* hover-bridge */
}


/* ============================================================
   PATCHES (2026-02-25)
   - Proof/Ref #10 sichtbar
   - Menü: Icons + Login-CTA weg, kein "tanzen", edler Hover
   - Hero kleiner
   - Snake-Rahmen: einmal rundum zeichnen, Glow erst danach
   - Snake auch für Popups (Modal/Drawer/Lightbox)
   - Media-Tipp-Text hart entfernen
============================================================ */

/* --- ensure item #10 is NOT hidden by any other stylesheet --- */
.refs-grid-big > .ref-card-big:nth-child(10){ display:flex !important; }
.proof-grid > .proof-tile:nth-child(10){ display:block !important; }

/* --- HERO: weniger tief --- */
.hero{ min-height: 68vh !important; }
.hero-inner{ padding: 70px 18px 52px !important; }
.hero-glow-floor{ bottom:-260px !important; opacity:.75 !important; }

/* --- NAV: remove login + icons everywhere (incl. dropdown) --- */
.nav-cta{ display:none !important; } /* login button area */
header .nav-link i,
header .nav-link svg,
header .dropdown i,
header .dropdown svg,
header .dd-link i,
header .dd-link svg,
header .m-link i,
header .m-link svg,
header .m-sublink i,
header .m-sublink svg{
  display:none !important;
}

/* NAV: no layout shift / "tanzen" */
.nav-link,
.dd-link{
  border: 1px solid transparent !important;
  transform: none !important;
  box-shadow: none !important;
  transition: color .18s ease, background .18s ease, opacity .18s ease !important;
}

/* NAV: edler hover (underline glow instead of boxes) */
.nav-link{
  position: relative;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  opacity:0;
  background: linear-gradient(90deg, rgba(242,193,78,.0), rgba(242,193,78,.85), rgba(61,123,255,.85), rgba(61,123,255,0));
  filter: drop-shadow(0 0 10px rgba(61,123,255,.25));
  transform: scaleX(.65);
  transition: opacity .2s ease, transform .25s ease;
}
.nav-link:hover,
.nav-link:focus-visible{
  background: transparent !important;
  color:#fff !important;
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  opacity:1;
  transform: scaleX(1);
}

/* dropdown hover: stays open + smooth items */
.dropdown{ box-shadow: 0 30px 90px rgba(0,0,0,.78) !important; }
.dd-link{
  position: relative;
  padding-left: 12px !important;
}
.dd-link:hover{ background: rgba(61,123,255,.08) !important; box-shadow:none !important; }

/* keep dropdown open while cursor moves */
.nav-item{ position:relative; }
.nav-item::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:14px;
}

/* ============================================================
   SNAKE FRAME (edler + sanfter)
   - zeichnet den Rahmen einmal rundum
   - Glow startet erst nachdem der Rahmen "fertig" ist
============================================================ */
:root{
  --snakeW: 2px;
  --snakeRun: 1150ms;
  --snakeEase: cubic-bezier(.18,.78,.18,1);
  --snakeGlowDelay: 1150ms;
  --snakeGlowDur: 280ms;
  --snakeGold: rgba(242,193,78,1);
  --snakeBlue: rgba(61,123,255,1);
}

/* apply to cards + popups */
.svc-card, .proof-tile, .ref-card-big,
.modal, .drawer, .lightbox-modal{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* draw-only frame */
.svc-card::before, .proof-tile::before, .ref-card-big::before,
.modal::before, .drawer::before, .lightbox-modal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;

  background:
    linear-gradient(90deg, var(--snakeGold), var(--snakeBlue)) 0 0 / 0% var(--snakeW) no-repeat,
    linear-gradient(180deg, var(--snakeBlue), var(--snakeGold)) 100% 0 / var(--snakeW) 0% no-repeat,
    linear-gradient(270deg, var(--snakeGold), var(--snakeBlue)) 100% 100% / 0% var(--snakeW) no-repeat,
    linear-gradient(0deg, var(--snakeBlue), var(--snakeGold)) 0 100% / var(--snakeW) 0% no-repeat;

  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* run once */
.svc-card:hover::before, .proof-tile:hover::before, .ref-card-big:hover::before,
.modal:hover::before, .drawer:hover::before, .lightbox-modal:hover::before{
  opacity: 1;
  animation: snakeDraw var(--snakeRun) var(--snakeEase) 1 forwards;
}

/* delayed glow (after draw) */
.svc-card, .proof-tile, .ref-card-big,
.modal, .drawer, .lightbox-modal{
  transition: box-shadow var(--snakeGlowDur) ease, border-color .25s ease, transform .25s ease;
}
.svc-card:hover, .proof-tile:hover, .ref-card-big:hover,
.modal:hover, .drawer:hover, .lightbox-modal:hover{
  border-color: transparent !important;
  transition-delay: var(--snakeGlowDelay);
  box-shadow:
    0 0 0 1px rgba(242,193,78,.14),
    0 0 30px rgba(242,193,78,.16),
    0 0 60px rgba(61,123,255,.14);
}

/* refs: no moving the whole block */
.ref-card-big:hover{ transform:none !important; }

/* keyframes: draw around */
@keyframes snakeDraw{
  0%{
    background-size:
      0% var(--snakeW),
      var(--snakeW) 0%,
      0% var(--snakeW),
      var(--snakeW) 0%;
  }
  25%{
    background-size:
      100% var(--snakeW),
      var(--snakeW) 0%,
      0% var(--snakeW),
      var(--snakeW) 0%;
  }
  50%{
    background-size:
      100% var(--snakeW),
      var(--snakeW) 100%,
      0% var(--snakeW),
      var(--snakeW) 0%;
  }
  75%{
    background-size:
      100% var(--snakeW),
      var(--snakeW) 100%,
      100% var(--snakeW),
      var(--snakeW) 0%;
  }
  100%{
    background-size:
      100% var(--snakeW),
      var(--snakeW) 100%,
      100% var(--snakeW),
      var(--snakeW) 100%;
  }
}

/* ============================================================
   HARD REMOVE the media tip text (even if injected elsewhere)
============================================================ */
.mp-tip,
.media-tip,
#mediaTip{
  display:none !important;
}