/*
Theme Name: ImZenox - First Edition
Description: Coding/Grafikdesign mit Modus-Switch, 3D-Druck, News & Jobs. Auftragsannahme immer hell.
Version: v3d5b
Text Domain: imzenox-eu
*/

:root{ --bg:#fff; --fg:#0f172a; --muted:#64748b; --border:rgba(0,0,0,.12); }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--fg); background:var(--bg); }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.section{ padding:3rem 0; }
.section--border{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.is-hidden{ display:none !important; }
.muted{ color:var(--muted); }

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(255,255,255,.75); border-bottom:1px solid var(--border); }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 1rem; }
.brand a{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; }
.brand .logo{ height:40px; width:32px; border-radius:.5rem; margin-right:.4rem; }
.site-nav .menu{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0; padding:0 1rem 1rem; }
.site-nav .menu li{ list-style:none; }
.site-nav .menu a{ display:inline-flex; padding:.5rem .75rem; border-radius:.6rem; border:1px solid transparent; }
.site-nav .menu .current-menu-item > a{ border-color:var(--border); }

/* Mode switch */
.mode-switch{ display:inline-grid; grid-auto-flow:column; gap:.35rem; padding:.25rem; border:1px solid var(--border); border-radius:.8rem; }
.mode-switch button{ padding:.45rem .8rem; border-radius:.6rem; border:1px solid transparent; background:transparent; cursor:pointer; }
.mode-switch button.active{ background:#000; color:#fff; border-color:transparent; }
body.theme-coding .mode-switch button{ color:#fff !important; border-color:rgba(255,255,255,.22); }
body.theme-design .mode-switch button{ color:#0f172a !important; border-color:var(--border); }
body.theme-design .mode-switch button.active{ background:transparent; border:1px solid #0f172a; font-weight:700; }
.no-mode .mode-switch{ display:none; }

/* Chips / Surfaces */
.badge,.chip{ display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:.6rem; border:1px solid var(--border); font-size:.78rem; }
.surface{ background:#fff; border:1px solid var(--border); border-radius:1rem; overflow:hidden; }

/* Grid & media */
.grid{ display:grid; gap:1rem; }
.grid.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.aspect-video{ position:relative; width:100%; padding-top:56.25%; border-radius:.75rem; background:#f1f5f9; overflow:hidden; }
.aspect-video > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Hero */
.hero{ position:relative; overflow:hidden; }
.hero h1{ margin:0; font-size:clamp(2rem,3vw + 1rem,3rem); line-height:1.12; }
.hero .lead{ margin-top:.75rem; font-size:1.1rem; color:var(--fg); opacity:.9; }
.hero .ring-overlay{ position:absolute; inset:0; pointer-events:none; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:1rem; border:1px solid var(--border); font-weight:600; }
.btn--primary{ color:#fff; background:linear-gradient(90deg,#8b5cf6,#d946ef); border-color:transparent; will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
.btn--ghost{ background:#fff; }
body.theme-coding .btn.btn--ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:#fff; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:2rem 1rem; color:var(--muted); }

/* Coding Theme (Gradient via ::before → keine Pixelkante) */
body.theme-coding{ color:#fff; overflow-x:hidden; background:#0b0b0f; }
body.theme-coding::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; transform:translateZ(0);
  background-image:
    radial-gradient(1200px 800px at 95% 20%, rgba(139,92,246,.42) 0%, rgba(139,92,246,.18) 45%, rgba(139,92,246,0) 70%),
    radial-gradient(900px 700px at 0% 0%, rgba(217,70,239,.18) 0%, rgba(217,70,239,0) 60%),
    linear-gradient(180deg,#0b0b0f 0%,#000 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:100% 20%,0% 0%,center;
  background-size:1400px 900px,900px 700px,auto;
}
body.theme-coding .site-header{ background:rgba(10,10,14,.55); border-color:rgba(255,255,255,.12); }
body.theme-coding .brand a, body.theme-coding .site-nav .menu a, body.theme-coding .hero .lead{ color:#fff; }
body.theme-coding .surface{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); box-shadow:0 10px 30px rgba(0,0,0,.35); }
body.theme-coding .badge, body.theme-coding .chip{ border-color:rgba(255,255,255,.22); color:#fff; }
body.theme-coding .hero{ background:transparent !important; }
body.theme-coding .hero .ring-overlay{ background:radial-gradient(800px 400px at 65% 15%, rgba(167,139,250,.25) 0%, rgba(167,139,250,0) 60%); }

/* Design Theme (hell + CMYK-Leiste) */


/* TechCare Theme */
body.theme-techcare{ background:linear-gradient(180deg,#eaf6ff 0%, #ffffff 55%, #fff9db 100%); color:#0b2a3a; }
body.theme-techcare::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; transform:translateZ(0);
  background-image:
    radial-gradient(900px 700px at 15% 15%, rgba(56,189,248,.35) 0%, rgba(56,189,248,0) 65%),
    radial-gradient(700px 600px at 85% 25%, rgba(250,204,21,.22) 0%, rgba(250,204,21,0) 60%);
  background-repeat:no-repeat,no-repeat;
}
body.theme-techcare .site-header{ background:rgba(255,255,255,.88); border-color:rgba(2,132,199,.18); }
body.theme-techcare .brand a, body.theme-techcare .site-nav .menu a, body.theme-techcare .hero .lead{ color:#0b2a3a; }
body.theme-techcare .surface{ background:#fff; border-color:rgba(2,132,199,.18); }
body.theme-techcare .badge, body.theme-techcare .chip{ border-color:rgba(2,132,199,.22); }

/* Mode-Switch Buttons in TechCare */
body.theme-techcare .mode-switch button{ color:#0b2a3a !important; border-color:rgba(2,132,199,.25); }
body.theme-techcare .mode-switch button.active{ background:rgba(2,132,199,.10); border-color:rgba(2,132,199,.55); font-weight:700; }
body.theme-design{ background:linear-gradient(180deg,#fff,#f8fafc); color:#0f172a; }
body.theme-design .site-header{ background:rgba(255,255,255,.85); border-color:var(--border); }
body.theme-design .brand a, body.theme-design .site-nav .menu a, body.theme-design .hero .lead{ color:#0f172a; }
.cmyk-strip{ display:none; height:8px; overflow:hidden; border-radius:999px; margin-top:.75rem; }
.cmyk-strip > span{ flex:1; }
.cmyk-strip .c{ background:#00BCD4; } .cmyk-strip .m{ background:#E91E63; } .cmyk-strip .y{ background:#FFEB3B; } .cmyk-strip .k{ background:#111; }
body.theme-design .cmyk-strip{ display:flex; }

/* Auftragsannahme immer hell, egal welcher Modus */
body.imz-auftrag{ background:linear-gradient(180deg,#fff 0%, #f8fafc 100%) !important; color:#0f172a !important; }
body.imz-auftrag::before{ display:none !important; }
body.imz-auftrag .site-header{ background:rgba(255,255,255,.92) !important; border-color:rgba(0,0,0,.12) !important; }
body.imz-auftrag .brand a, body.imz-auftrag .site-nav .menu a{ color:#0f172a !important; }
body.imz-auftrag .mode-switch button{ color:#0f172a !important; border-color:rgba(0,0,0,.15) !important; }
body.imz-auftrag .surface{ background:#fff !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 10px 30px rgba(2,6,23,.06) !important; }
body.imz-auftrag input, body.imz-auftrag select, body.imz-auftrag textarea{ background:#fff !important; color:#0f172a !important; border:1px solid rgba(0,0,0,.15) !important; border-radius:.6rem; padding:.6rem .75rem; }
body.imz-auftrag a{ color:#0f172a !important; text-decoration:underline; }
body.imz-auftrag input[type="checkbox"]{ accent-color:#8b5cf6; }

/* 3D‑Druck neutral & gut lesbar */
.post-type-archive-prints, .single-prints{ background:linear-gradient(180deg,#fff 0%, #f8fafc 100%); color:#0f172a; }
.post-type-archive-prints .site-header, .single-prints .site-header{ background:rgba(255,255,255,.9); }
.post-type-archive-prints .surface, .single-prints .surface{ background:#fff; border:1px solid rgba(0,0,0,.1); box-shadow:0 10px 30px rgba(2,6,23,.06); }
.print-price{ font-weight:700; background:linear-gradient(90deg,#06b6d4,#22d3ee); border:0; color:#002; padding:.15rem .5rem; border-radius:.5rem; }

/* Mobile */
@media (max-width:640px){
  .container{ padding:0 .75rem; }
  .site-nav .menu{ flex-direction:column; gap:.25rem; }
  .grid.grid-3{ grid-template-columns:1fr; }
  .hero .lead{ font-size:1rem; }
}


/* v3d5c: Custom Logo */
.custom-logo{ height:40px; width:auto; border-radius:.5rem; display:inline-block; }
.custom-logo-link{ display:inline-flex; align-items:center; gap:.5rem; }
.brand .logo{ height:40px; width:32px; border-radius:.5rem; margin-right:.4rem; }


/* IMZ: Mobile tweaks */
@media (max-width: 820px){
  .container{ padding-left:16px; padding-right:16px; }
  .section{ padding-top:28px; padding-bottom:28px; }

  /* Header / nav */
  .nav ul{ flex-wrap:wrap; gap:10px; }
  .nav a.nav-link{ padding:10px 10px; font-size:14px; }

  /* Mode switch */
  .mode-switch{ flex-wrap:wrap; gap:8px; }
  .mode-switch button{ padding:10px 12px; font-size:14px; border-radius:999px; }

  /* Hero */
  .hero h1{ font-size: clamp(28px, 7vw, 44px); line-height:1.1; }
  .lead{ font-size:16px; }

  /* Buttons */
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ width:100%; justify-content:center; }

  /* Chips */
  .chip{ font-size:13px; padding:8px 10px; }
  .chip svg{ width:18px; height:18px; }

  /* Grids */
  .grid, .imz-post-grid, .imz-grid, .imz-service-grid, .portfolio-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px){
  .nav a.nav-link{ padding:9px 9px; font-size:13px; }
  .mode-switch button{ padding:10px 10px; }
}
/* IMZ: end Mobile tweaks */


/* IMZ: Sticky header mobile */
@media (max-width: 820px){
  .site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  /* keep header content compact */
  .site-header .navbar{ padding-top:10px; padding-bottom:10px; }

  /* Put switcher on its own row above the menu tabs */
  .site-header .navbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .site-header .brand{ width:100%; }
  .site-header .brand a{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
  .site-header .brand span{ text-align:center; }

  .site-header .mode-switch{
    width:100%;
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:2px;
  }
  .site-header .mode-switch::-webkit-scrollbar{ height:4px; }
  .site-header .mode-switch button{
    flex:0 0 auto;
    min-width: 44px;
  }

  /* Menu tabs: allow wrap nicely */
  .site-nav .menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding-bottom:10px;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 820px){
  .site-header{
    background: rgba(8,12,20,.72);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}
/* IMZ: end Sticky header mobile */

/* IMZ: Mobile menu default hidden */
.imz-mobile-menu-btn{display:none;}
.imz-mobile-menu{display:none;}
/* IMZ: Mobile menu overlay */
@media (max-width: 820px){
  /* We no longer keep full header sticky; only the menu button is fixed */
  .site-header{ position: relative; }

  /* Hide the tabs/menu row on mobile */
  .site-nav{ display:none !important; }

  /* Floating menu button */
  .imz-mobile-menu-btn{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }
  .imz-burger{
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
    border-radius: 999px;
    display:block;
  }
  .imz-burger::before, .imz-burger::after{
    content:"";
    position:absolute;
    left:0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
  }
  .imz-burger::before{ top: -6px; }
  .imz-burger::after{ top: 6px; }

  /* Overlay */
  .imz-mobile-menu{
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0,0,0,.45);
    display:none;
  }
  .imz-mobile-menu.is-open{ display:block; }

  .imz-mobile-menu__panel{
    position:absolute;
    left: 10px;
    right: 10px;
    top: 66px;
    max-height: calc(100vh - 86px);
    overflow:auto;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    padding: 14px;
  }
  .imz-mobile-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
  }
  .imz-mobile-menu__close{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.9);
  }

  /* Menu list styling */
  .imz-mobile-menu__content ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .imz-mobile-menu__content a{
    display:flex;
    justify-content:center;
    text-decoration:none;
    padding: 12px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(2,132,199,.06);
    color: inherit;
    font-weight: 600;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 820px){
  .imz-mobile-menu-btn{
    background: rgba(8,12,20,.72);
    border-color: rgba(255,255,255,.14);
  }
  .imz-mobile-menu__panel{
    background: rgba(8,12,20,.78);
    border-color: rgba(255,255,255,.12);
  }
  .imz-mobile-menu__content a{
    border-color: rgba(255,255,255,.12);
    background: rgba(56,189,248,.08);
  }
  .imz-mobile-menu__close{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
}
/* IMZ: end Mobile menu overlay */

@media (max-width: 820px){ html.imz-no-scroll, html.imz-no-scroll body{ overflow:hidden; } }


/* IMZ: Mobile menu theme colors */
@media (max-width: 820px){
  body.theme-coding .imz-mobile-menu-btn{
    background: rgba(15, 23, 42, .78);
    border-color: rgba(56, 189, 248, .35);
    color: #fff;
  }
  body.theme-coding .imz-mobile-menu__panel{
    background: rgba(15, 23, 42, .82);
    border-color: rgba(56, 189, 248, .25);
    color: #fff;
  }
  body.theme-coding .imz-mobile-menu__content a{
    background: rgba(56, 189, 248, .10);
    border-color: rgba(255,255,255,.12);
    color: #fff;
  }

  body.theme-design .imz-mobile-menu-btn{
    background: rgba(255,255,255,.86);
    border-color: rgba(16,185,129,.35);
    color: #0b2a3a;
  }
  body.theme-design .imz-mobile-menu__panel{
    background: rgba(255,255,255,.94);
    border-color: rgba(16,185,129,.18);
    color: #0b2a3a;
  }
  body.theme-design .imz-mobile-menu__content a{
    background: rgba(16,185,129,.08);
    border-color: rgba(0,0,0,.10);
    color: #0b2a3a;
  }

  body.theme-techcare .imz-mobile-menu-btn{
    background: rgba(255,255,255,.90);
    border-color: rgba(56,189,248,.45);
    color: #0b2a3a;
    box-shadow: 0 10px 30px rgba(250, 204, 21, .18), 0 10px 30px rgba(56, 189, 248, .18);
  }
  body.theme-techcare .imz-mobile-menu__panel{
    background: rgba(255,255,255,.95);
    border-color: rgba(56,189,248,.22);
    color: #0b2a3a;
  }
  body.theme-techcare .imz-mobile-menu__content a{
    background: rgba(56,189,248,.10);
    border-color: rgba(250,204,21,.18);
    color: #0b2a3a;
  }
}
/* IMZ: end Mobile menu theme colors */