/* QUAMARO Design System – master tokens + reusable components
   Brand: navy/slate + teal interaction. Garden green is a category accent only. */
:root{
  --q-navy:#102543;
  --q-navy-2:#173964;
  --q-ink:#102a47;
  --q-text:#536877;
  --q-muted:#667783;
  --q-slate:#3d5163;
  --q-teal:#0a8c99;
  --q-teal-bright:#19b7b2;
  --q-teal-dark:#08747f;
  --q-teal-soft:#e8f8f7;
  --q-bg:#f6f8fb;
  --q-bg-2:#eef3fb;
  --q-card:#fff;
  --q-line:rgba(16,42,71,.11);
  --q-line-strong:rgba(16,42,71,.18);
  --q-shadow:0 14px 34px rgba(16,42,71,.075);
  --q-shadow-lg:0 22px 58px rgba(16,42,71,.11);
  --q-radius:20px;
  --q-radius-sm:12px;
  --q-radius-lg:24px;
  --q-shell:min(1180px,calc(100% - 2rem));
  --q-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --q-display:Georgia,"Times New Roman",serif;

  /* Spacing, type and chrome – one scale for all page families */
  --q-space-1:.25rem;
  --q-space-2:.5rem;
  --q-space-3:.75rem;
  --q-space-4:1rem;
  --q-space-5:1.25rem;
  --q-space-6:1.75rem;
  --q-space-7:2.5rem;
  --q-page-pad:1.25rem;
  --q-section-y:clamp(1.7rem,3.6vw,2.85rem);
  --q-card-pad:1.15rem;
  --q-grid-gap:.85rem;
  --q-header-h:76px;
  --q-touch:44px;
  --q-hero-media-h:420px;
  --q-type-h1:clamp(2rem,4vw,3.25rem);
  --q-type-h2:clamp(1.45rem,2.5vw,2.05rem);
  --q-type-h3:clamp(1.02rem,1.5vw,1.2rem);
  --q-type-lead:clamp(.96rem,1.25vw,1.06rem);
  --q-type-body:1rem;
  --q-type-meta:.82rem;
  --q-type-label:.78rem;
  --q-type-btn:.9rem;

  /* Brand interaction – never garden green at the base layer */
  --q-accent:var(--q-teal);
  --q-accent-dark:var(--q-teal-dark);
  --q-accent-soft:var(--q-teal-soft);
  --q-accent-bright:var(--q-teal-bright);
  --q-theme-accent:var(--q-accent);
  --q-theme-accent-dark:var(--q-accent-dark);
  --q-theme-accent-soft:var(--q-accent-soft);

  /* Aliases so existing layout/header/homepage CSS inherit the same system */
  --ql-ink:var(--q-ink);
  --ql-text:var(--q-text);
  --ql-green:var(--q-theme-accent);
  --ql-green-dark:var(--q-theme-accent-dark);
  --ql-green-soft:var(--q-theme-accent-soft);
  --ql-bg:var(--q-bg);
  --ql-card:var(--q-card);
  --ql-line:var(--q-line);
  --ql-shadow:var(--q-shadow);
  --ql-shadow-lg:var(--q-shadow-lg);
  --ql-radius:var(--q-radius);
  --qnav-ink:var(--q-ink);
  --qnav-muted:var(--q-muted);
  --qnav-green:var(--q-accent);
  --qnav-green-dark:var(--q-accent-dark);
  --qnav-soft:var(--q-accent-soft);
  --qnav-line:var(--q-line);
  --qh-navy:var(--q-navy);
  --qh-navy-2:var(--q-navy-2);
  --qh-green:var(--q-accent);
  --qh-green-dark:var(--q-accent-dark);
  --qh-green-soft:var(--q-accent-soft);
  --qh-mint:var(--q-bg);
  --qh-bg:var(--q-bg);
  --qh-card:var(--q-card);
  --qh-text:var(--q-ink);
  --qh-muted:var(--q-muted);
  --qh-line:var(--q-line);
  --qu-hero-ink:var(--q-ink);
  --qu-hero-text:var(--q-text);
  --qu-hero-accent:var(--q-theme-accent);
  --qu-hero-bg:var(--q-bg);
  --qu-hero-line:var(--q-line);
  --qu-hero-image-bg:var(--q-bg-2);
  --qsr-ink:var(--q-ink);
  --qsr-muted:var(--q-text);
  --qsr-green:var(--q-theme-accent);
  --qsr-green-dark:var(--q-theme-accent-dark);
  --qsr-soft:var(--q-theme-accent-soft);
  --qsr-line:var(--q-line);
}

/* Category accents – they tint content, never the shared chrome */
[data-q-theme="garden"]{
  --q-theme-accent:#0b8a55;
  --q-theme-accent-dark:#087347;
  --q-theme-accent-soft:#edf7f1;
}
[data-q-theme="technik"],
[data-q-theme="tech"]{
  --q-theme-accent:#1d4b65;
  --q-theme-accent-dark:#163a4e;
  --q-theme-accent-soft:#e8f1f6;
}
[data-q-theme="gaming"]{
  --q-theme-accent:#5b4db1;
  --q-theme-accent-dark:#463c8c;
  --q-theme-accent-soft:#f0eefb;
}
[data-q-theme="smarthome"]{
  --q-theme-accent:#0f7aa8;
  --q-theme-accent-dark:#0b5e82;
  --q-theme-accent-soft:#e7f5fb;
}
[data-q-theme="haushalt"]{
  --q-theme-accent:#b8792c;
  --q-theme-accent-dark:#94611f;
  --q-theme-accent-soft:#fff4e8;
}
[data-q-theme="outdoor"]{
  --q-theme-accent:#2f6f62;
  --q-theme-accent-dark:#24574d;
  --q-theme-accent-soft:#e8f4f1;
}

body.qsite-layout-v3{
  --ql-green:var(--q-theme-accent);
  --ql-green-dark:var(--q-theme-accent-dark);
  --ql-green-soft:var(--q-theme-accent-soft);
  --qsr-green:var(--q-theme-accent);
  --qsr-green-dark:var(--q-theme-accent-dark);
  --qsr-soft:var(--q-theme-accent-soft);
}

/* -------------------------------------------------------------------------- */
/* Shared primitives                                                          */
/* -------------------------------------------------------------------------- */
.q-shell{width:var(--q-shell);margin-inline:auto;min-width:0}
.q-kicker,
.q-eyebrow{
  margin:0 0 .55rem;
  color:var(--q-theme-accent-dark);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.q-title{margin:0;color:var(--q-navy);font-family:var(--q-display);font-size:clamp(2rem,4vw,3.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.q-lead{margin:.9rem 0 0;max-width:64ch;color:var(--q-text);font-size:clamp(.96rem,1.3vw,1.08rem);line-height:1.62}

.q-btn,
.qhome-btn{
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.15rem;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--q-accent);
  box-shadow:0 8px 20px rgba(10,140,153,.16);
  color:#fff!important;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none!important;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.q-btn:hover,
.qhome-btn:hover{transform:translateY(-1px);background:var(--q-accent-dark)}
.q-btn--secondary,
.qhome-btn--secondary{
  border-color:var(--q-line-strong);
  background:#fff;
  box-shadow:none;
  color:var(--q-navy)!important;
}
.q-btn--secondary:hover,
.qhome-btn--secondary:hover{background:var(--q-bg);border-color:rgba(16,42,71,.32)}
.q-btn--ghost{background:transparent;box-shadow:none;color:var(--q-accent-dark)!important;min-height:40px;padding:.4rem .2rem}
.q-btn--theme{background:var(--q-theme-accent);box-shadow:0 8px 20px color-mix(in srgb,var(--q-theme-accent) 28%,transparent)}
.q-btn--theme:hover{background:var(--q-theme-accent-dark)}

.q-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--q-line);
  border-radius:var(--q-radius);
  background:var(--q-card);
  box-shadow:var(--q-shadow);
}
.q-card:hover{border-color:color-mix(in srgb,var(--q-accent) 35%,var(--q-line))}

.q-breadcrumb,
.category-breadcrumb,
.rg-breadcrumb,
.qg-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .45rem;
  margin:0 0 1rem;
  color:var(--q-muted);
  font-size:.82rem;
  line-height:1.4;
}
.q-breadcrumb a,
.category-breadcrumb a,
.rg-breadcrumb a,
.qg-breadcrumb a{color:var(--q-ink);text-decoration:none}
.q-breadcrumb a:hover{color:var(--q-accent-dark);text-decoration:underline}

.q-progress{height:8px;overflow:hidden;border-radius:999px;background:#e8eef3}
.q-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--q-accent),var(--q-accent-bright));transition:width .35s ease}

.q-notice,
.q-info{
  padding:1rem 1.1rem;
  border:1px solid var(--q-line);
  border-radius:16px;
  background:var(--q-bg);
  color:var(--q-text);
  font-size:.9rem;
  line-height:1.55;
}
.q-notice{border-color:color-mix(in srgb,var(--q-accent) 28%,var(--q-line));background:var(--q-accent-soft);color:var(--q-ink)}
.q-notice strong,.q-info strong{display:block;margin-bottom:.2rem;color:var(--q-navy)}

.q-accordion details,
.faq-group details{
  border:1px solid var(--q-line);
  border-radius:14px;
  background:#fff;
}
.q-accordion details+details,
.faq-group details+details{margin-top:.45rem}
.q-accordion summary,
.faq-group summary{
  cursor:pointer;
  list-style:none;
  padding:.9rem 1rem;
  color:var(--q-ink);
  font-weight:800;
}
.q-accordion summary::-webkit-details-marker,
.faq-group summary::-webkit-details-marker{display:none}
.q-accordion details p,
.faq-group details p{margin:0;padding:0 1rem 1rem;color:var(--q-text)}

.q-cta{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
  gap:1.2rem;
  align-items:center;
  padding:1.35rem;
  border:1px solid var(--q-line);
  border-radius:22px;
  background:linear-gradient(135deg,var(--q-bg),#fff 58%,var(--q-bg-2));
}
.q-cta h2{margin:0 0 .35rem;color:var(--q-navy);font-family:var(--q-display);font-size:clamp(1.35rem,2.4vw,1.85rem)}
.q-cta p{margin:0;color:var(--q-text)}
.q-cta__actions{display:flex;flex-wrap:wrap;gap:.65rem}

/* Hero variants used by homepage + unified page heroes */
.q-hero,
.qhome-hero,
.qu-page-hero{
  --q-hero-media-ratio:16/10;
  --q-hero-media-max:420px;
}
.q-hero__media,
.qhome-hero__visual,
.qu-page-hero__media{
  overflow:hidden;
  border-radius:24px;
  background:var(--q-bg-2);
  box-shadow:var(--q-shadow-lg);
  aspect-ratio:var(--q-hero-media-ratio);
  max-height:var(--q-hero-media-max);
}
.q-hero__media img,
.qhome-hero__visual img,
.qu-page-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.q-hero--brand .q-hero__media,
.qhome-hero--brand .qhome-hero__visual{
  --q-hero-media-ratio:5/3;
  background:
    radial-gradient(circle at 82% 18%,rgba(25,183,178,.16),transparent 32%),
    linear-gradient(135deg,#f5fbfb,#eef3fb);
}
.q-hero--brand .q-hero__media img,
.qhome-hero--brand .qhome-hero__visual img{object-fit:cover;object-position:68% 46%;padding:0}
@media (max-width:720px){
.q-hero--brand .q-hero__media img,
.qhome-hero--brand .qhome-hero__visual img{object-position:78% 42%}
}
.q-hero--category{--q-hero-media-ratio:16/10}
.q-hero--advisor{--q-hero-media-ratio:16/10;--q-hero-media-max:380px}
.q-hero--guide,
.qu-page-hero[data-qu-hero-kind="guide"]{--q-hero-media-ratio:16/9}
.q-hero--result{--q-hero-media-ratio:16/9;--q-hero-media-max:320px}
.q-hero--compact{--q-hero-media-ratio:16/9;--q-hero-media-max:280px}

html body:not(.home-page) .qu-page-hero>.qu-page-hero__grid>.qu-page-hero__copy :is(.eyebrow,.rg-list-kicker,.qu-page-hero__eyebrow,[class*="eyebrow"],[class*="kicker"]){
  color:var(--q-theme-accent-dark)!important;
}
html body:not(.home-page) .qu-page-hero .qu-hero-btn--primary{
  background:var(--q-accent)!important;
  border-color:var(--q-accent)!important;
  box-shadow:0 8px 18px rgba(10,140,153,.16)!important;
}
[data-q-theme="garden"] .qu-page-hero .qu-hero-btn--primary{
  background:var(--q-theme-accent)!important;
  border-color:var(--q-theme-accent)!important;
}

/* Navigation: growing worlds without chaos */
.qsite-menu.is-active>.qsite-menu__trigger{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}
.qsite-menu.is-active>.qsite-menu__trigger:after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:4px;
  height:2px;
  border-radius:99px;
  background:var(--q-accent);
}
.qsite-menu{position:relative}
.qsite-drop-link.is-current,
.qsite-mega-links a.is-current,
.qsite-mobile-links a.is-current{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}
.qsite-category-item--soon,
.qsite-world-soon{
  opacity:.88;
  cursor:default;
}
.qsite-category-item--soon small,
.qsite-world-soon small{color:var(--q-muted)!important}
.qsite-soon-badge{
  display:inline-flex;
  align-items:center;
  padding:.18rem .42rem;
  border-radius:999px;
  background:var(--q-bg-2);
  color:var(--q-navy-2);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.qsite-category-item,
.qsite-category-all{
  color:var(--q-ink)!important;
}
.qsite-category-item:hover,
.qsite-category-item:focus-visible,
.qsite-category-item.is-active,
.qsite-category-all:hover{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}
.qsite-category-panel__links a:hover,
.qsite-category-panel__links a.is-current{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}
.qsite-category-panel__quick a{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}
.qsite-category-panel__footer a{color:var(--q-accent-dark)!important}
.qsite-mobile-links .qsite-world-soon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:9px 10px;
  border-radius:9px;
  color:var(--q-muted);
  font-size:.84rem;
  font-weight:700;
}
.qsite-dropdown--categories{
  width:min(340px,calc(100vw - 2rem))!important;
}

/* Footer – growing site, not garden-only */
.q-footer,
.qhome-footer{
  background:var(--q-navy);
  color:rgba(255,255,255,.76);
}
.q-footer a,
.qhome-footer a{color:rgba(255,255,255,.86)!important;text-decoration:none!important}
.q-footer a:hover,
.qhome-footer a:hover{color:#fff!important;text-decoration:underline!important}
.q-footer__grid{
  width:var(--q-shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,.7fr));
  gap:1.6rem;
  padding:2.2rem 0 1.6rem;
}
.q-footer__brand img,
.qhome-footer__logo{width:150px;height:auto;background:#fff;border-radius:10px;padding:.28rem .45rem}
.q-footer__copy{max-width:42ch;margin:.75rem 0 0;color:rgba(255,255,255,.7);font-size:.86rem;line-height:1.55}
.q-footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:.42rem}
.q-footer__col h3{margin:0 0 .2rem;color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.q-footer__bottom{
  width:var(--q-shell);
  margin:0 auto;
  padding:.9rem 0 1.2rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);
  font-size:.76rem;
}

/* Neutralize leftover garden-green as GLOBAL brand (theme pages keep accents) */
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) > .hero-section,
body.qsite-layout-v3:not([data-q-theme="garden"]) main > .categories-hero,
body.qsite-page-categories .categories-hero{
  background:
    radial-gradient(circle at 82% 20%,rgba(25,183,178,.12),transparent 31%),
    linear-gradient(135deg,#f7fafb,#eef3fb)!important;
}
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) .eyebrow,
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) [class*="kicker"],
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) [class*="eyebrow"]{
  color:var(--q-accent-dark);
}
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) a.button:not(.button-secondary),
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) button.button:not(.button-secondary){
  background:var(--q-accent);
  border-color:var(--q-accent);
}
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) a.button:not(.button-secondary):hover,
body.qsite-layout-v3:not([data-q-theme="garden"]):not(.qhome-v1) button.button:not(.button-secondary):hover{
  background:var(--q-accent-dark);
  border-color:var(--q-accent-dark);
}

.qsite-project{
  background:var(--q-accent)!important;
  box-shadow:0 8px 18px rgba(10,140,153,.18)!important;
}
.qsite-project:hover,
.qsite-project:focus-visible{background:var(--q-accent-dark)!important}
.qsite-menu__trigger:hover,
.qsite-menu__trigger:focus-visible,
.qsite-menu[data-open="true"]>.qsite-menu__trigger{
  background:var(--q-accent-soft)!important;
  color:var(--q-accent-dark)!important;
}

body.qsite-layout-v3 .site-footer{
  background:var(--q-navy)!important;
}

@media(max-width:900px){
  :root{
    --q-header-h:60px;
    --q-page-pad:1rem;
    --q-section-y:1.45rem;
    --q-card-pad:.9rem;
    --q-grid-gap:.6rem;
    --q-hero-media-h:220px;
    --q-type-h1:clamp(1.72rem,7vw,2.28rem);
    --q-type-h2:clamp(1.28rem,5.2vw,1.62rem);
    --q-type-h3:1.02rem;
    --q-type-lead:.95rem;
    --q-type-body:.94rem;
    --q-type-meta:.76rem;
    --q-type-btn:.86rem;
    --q-shell:min(100% - 1.5rem,1180px);
  }
  .q-cta{grid-template-columns:1fr}
  .q-footer__grid,
  .qhome-footer .q-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-footer__grid>:first-child,
  .qhome-footer .q-footer__grid>:first-child{grid-column:1/-1}
  .q-hero__media,
  .qhome-hero__visual,
  .qu-page-hero__media{
    --q-hero-media-max:var(--q-hero-media-h);
    max-height:var(--q-hero-media-h);
    aspect-ratio:16/9;
  }
}
@media(max-width:700px){
  :root{--q-shell:calc(100% - 1.5rem);--q-page-pad:.9rem}
  .q-btn,.qhome-btn{min-height:var(--q-touch)}
  .q-footer__grid,
  .qhome-footer .q-footer__grid{gap:.9rem;padding:1.4rem 0 1.1rem}
}
@media(max-width:430px){
  :root{
    --q-page-pad:.8rem;
    --q-section-y:1.2rem;
    --q-card-pad:.78rem;
    --q-grid-gap:.5rem;
    --q-hero-media-h:190px;
    --q-shell:calc(100% - 1.25rem);
  }
}
@media(prefers-reduced-motion:reduce){
  .q-btn,.qhome-btn,.q-progress>span{transition:none!important}
}