/* Qogy public site — minimal, modern. No framework. System font stack + subtle scroll motion. */
:root{
  --bg:#faf6ef;         /* warm cream — friendly, inviting (echoes the playful Q logo) */
  --page-bg:#ffffff;    /* page background behind content card */
  --ink:#3a352c;        /* warm charcoal text */
  --muted:#8a7f6d;      /* warm taupe secondary text */
  --line:#e9e0d1;       /* warm hairlines / borders */
  --card:#ffffff;
  --accent:#b5542c;     /* warm terracotta — friendly accent, echoes the logo's red. Change once → cascades. */
  --accent-ink:#fff;
  --hover:#9a4423;      /* deeper terracotta on hover */
  --radius:18px;
  --maxw:1060px;
  --shadow:0 1px 3px rgba(80,60,40,.05), 0 6px 20px rgba(80,60,40,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}

/* Content container — adds horizontal padding at all screen sizes so the page never bleeds edge-to-edge.
   At narrow widths, minimum 20px gutter; at wide screens (>=1400px), up to ~56px. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);width:100%}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
a{color:inherit;text-decoration:none;transition:color .15s ease}
h1,h2,h3{line-height:1.18;letter-spacing:-.01em;margin:0 0 .4em;font-weight:700;color:var(--ink)}
.muted,.fineprint{color:var(--muted)}

/* ---- Header — desktop: brand | menu | actions in one row. Mobile (< 960px): hamburger toggle + expanded panel ---- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,253,249,.88);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
/* NOTE: vertical padding as longhands — this element also has .wrap, whose shorthand sets the horizontal padding; a shorthand here would clobber it. */
.nav{display:flex;align-items:center;gap:16px;padding-top:1.1rem;padding-bottom:1.1rem}
/* Language switch lives in the header bar (all viewports) — it + the hamburger form the right group. */
.nav .lang{margin-left:auto;height:34px;padding:.4em .85em;font-size:13px;border-radius:9px}
.brand{font-weight:700;font-size:19px;display:inline-flex;align-items:center;gap:8px;color:var(--ink);white-space:nowrap}
.mark{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);object-fit:contain;display:block;padding:2px;flex:none}
/* Nav items — visible on desktop, hidden behind hamburger on mobile */
.menu{display:flex;gap:4px 22px;font-weight:500;color:var(--muted);align-items:center}
.menu a:hover{color:var(--ink)}
.menu-legal{font-size:.88em;opacity:.75;white-space:nowrap}
.head-actions{display:flex;align-items:center;gap:10px}

/* Hamburger button — only visible below 960px. Standard three-bar icon; morphs to X when open.
   flex-direction:column is REQUIRED — the spans are flex items and would otherwise sit in a row. */
.hamburger{
  display:none;
  background:none;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:var(--ink);cursor:pointer;flex-shrink:0;
  flex-direction:column;
}
/* .hb-line spacing: tight vertical gap between the three bars (3px each side = 6px gap). */
.hamburger .hb-line{display:block;width:20px;height:2px;margin:3px 0;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .15s ease}
.hamburger .hb-line:first-child{margin-top:0}
.hamburger .hb-line:last-child{margin-bottom:0}
/* Open state = a TRUE cross. Layout math (verified against rendered rects, 2026-11-03):
   bars are 2px tall with 3px margins between → centers at y = 1 / 9 / 17 in the content box
   (8px center-to-center), content center = 9 = middle bar. Moving both outer bars exactly
   8px onto the middle bar's center line makes the two diagonals pass through the same point
   (cx, 9) — a symmetric ✕ whose intersection is the button's exact center. (±5px left each
   diagonal 3px off-center and the X crossed 4px to one side.) */
.hamburger[aria-expanded="true"] .hb-line:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hb-line:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .hb-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile overlay panel */
.menu-panel{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:#fff;border-bottom:1px solid var(--line);
  padding:16px clamp(20px,5vw,56px);box-shadow:0 8px 24px rgba(16,18,24,.08);
}
.menu-panel.open{display:flex;flex-direction:column;gap:4px}
/* On mobile the panel stacks items + actions vertically */
.menu-panel .mob-menu{
  display:flex;flex-direction:column;gap:4px;
}
.menu-panel .mob-menu a,
.menu-panel .menu-legal{padding:10px 8px;border-radius:8px;color:var(--ink);font-weight:500;font-size:1rem;display:block;transition:background .15s}
.menu-panel .mob-menu a:hover,.menu-panel .menu-legal:hover{background:#f4f3ee;text-decoration:none}
.menu-panel .mob-actions{
  display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--line);margin-top:6px;
}

/* ---- Buttons — one shared size/shape. Neutral (gray) palette, all consistent height & centered text. ---- */
.btn,.lang{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:.5em 1em;height:40px;line-height:1;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;
  border:1px solid transparent;background:#fff;color:var(--ink);white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease}
.btn:hover{transform:translateY(-1px)}
/* Primary = filled neutral (the "decent gray") */
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:var(--hover);border-color:var(--hover);box-shadow:0 6px 18px rgba(120,60,30,.28)}
/* Ghost = white w/ subtle border */
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:#c7ccd4;background:#fafbfc}
/* Language switcher = neutral outline, same height & shape as .btn */
.lang{border:1px solid var(--line);color:var(--muted);font-family:inherit}
.lang:hover{color:var(--ink);border-color:var(--line)}

/* ---- Hero ---- */
.hero{padding:clamp(72px,14vh,150px) 0 clamp(56px,9vh,100px);text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--accent);font-weight:700;margin:0 0 16px}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);max-width:19ch}
.lead{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);max-width:60ch;margin:.3em 0 1.6em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Sections — alternating subtle backgrounds for structure. Even sections get a light warm tint. ---- */
section{padding:clamp(56px,9vh,104px) 0;border-top:1px solid var(--line)}
.services{background:var(--card)}
.sec-title{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.9em}

/* ---- Services grid + cards ---- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card:hover{border-color:#d8c5aa;transition:border-color .18s ease}
.card h3{font-size:1.25rem}
.tagline{color:var(--muted);margin:0 0 .8em;font-weight:500}
.card-body p:last-child,.card-body ul{margin-bottom:0}
.card-body code{background:#f0e8db;padding:.1em .35em;border-radius:5px;font-size:.9em}
.audience{font-size:.95rem;color:var(--muted)}
.next-step{font-size:.95rem;color:var(--ink);font-weight:500;margin-top:.9em}
.meta{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:.4em 0}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);margin-top:20px}
.price{font-weight:600;color:var(--muted)}

/* ---- About ---- */
.about-lead{font-size:1.2rem;font-weight:500;max-width:46ch}

/* ---- Contact cards ---- */
.contact-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:8px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:3px;text-decoration:none;transition:border-color .15s,box-shadow .2s,transform .15s}
.ccard:hover{border-color:#c7ccd4;box-shadow:0 14px 34px -26px rgba(20,28,40,.5);transform:translateY(-2px)}
.ccard span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.ccard b{font-size:1.02rem;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink);word-break:break-all}
.ccard.static:hover{transform:none;box-shadow:none;border-color:var(--line)}
@media (max-width:820px){ .contact-cards{grid-template-columns:1fr} }

/* ---- Forms (kept for any future use) ---- */
input,select,textarea{width:100%;padding:.68em .8em;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,.lang:focus-visible,.btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(181,84,44,.18)}

/* ---- Footer ---- */
.site-foot{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.9rem;background:#f5efe2}
.foot-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot a:hover{color:var(--ink)}

/* ---- Interior pages (impressum / datenschutz / agb) ---- */
/* Vertical rhythm only, as LONGHANDS — a padding shorthand here would override the horizontal
   gutter that .wrap sets on the same <main>, which is what broke the boundary padding on the
   imprint/interior pages. (HTML keeps the .wrap class; CSS owns the gutters.) */
.interior{padding-top:clamp(48px,9vh,80px);padding-bottom:clamp(48px,9vh,80px);border-top:none}
.interior > h1{margin-bottom:.7em}
.legal p{line-height:1.7;color:#2a2e36;margin:0 0 .9em}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.legal h2{font-size:1.15rem;margin:1.4em 0 .4em}

/* ---- Reveal-on-scroll (subtle) — SAFETY FIRST: visible by default; hidden only once JS adds `js-ready`, with a fallback timer so nothing can stay invisible. ---- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px)}
.js.js-ready .reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
@keyframes qogyRevealFallback{to{opacity:1;transform:none}}
.js .reveal.fallback-shown{animation:qogyRevealFallback .6s ease forwards}

/* ---- Legacy / archive product pages (NOT linked from nav) ---- */
.legacy-badge{display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#8a5a00;background:#fff3d6;border:1px solid #f2d99b;padding:5px 12px;border-radius:999px;margin-bottom:1.1rem}
.legacy-page > h1{margin-top:.2rem}
.legacy-note a{color:var(--accent);text-decoration:none;font-weight:600}
.game-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:.8rem}
.game-imgs figure{margin:0;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.game-imgs img{width:100%;height:auto;display:block;border-radius:8px}
.game-imgs figcaption{font-size:.8rem;color:var(--muted);margin-top:6px;text-align:center}
@media(max-width:640px){.game-imgs{grid-template-columns:1fr}}

/* ---- Responsive / mobile (<960px): hamburger toggle + panel ---- */
@media (max-width:960px){
  .menu{display:none}                 /* hide desktop nav */
  .hamburger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
  .hero{text-align:center}
  .hero h1,.lead{margin-left:auto;margin-right:auto}
  .about-lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
}