/* ============================================================
   HiddenQueen – Designtokens + Komponenten.
   Farben/Schriften 1:1 aus dem offiziellen Brand Guideline PDF
   (hiddenqueen_branddesign.pdf, Abschnitte "Farbpalette" + "Typografie"):
     Charcoal        #3E3C3D  (primaerer dunkler Grund + Schrift auf hell)
     Charcoal Muster #544E50  (Ornamentmuster auf dunklen Untergruenden)
     Charcoal mauve  #958789  (zurueckhaltende Details auf dunklem Grund)
     Roségold        #D39B8B  (Akzent/Signet, dunklerer Verlaufston)
     Roségold hell   #E9C2B6  (heller Verlaufston, Metallic-Verlauf)
     Roségold Muster #F7E3DB  (dezentes Ornamentmuster auf hellem Grund)
     Blush Ivory     #FAF0ED  (primaerer heller Grund + Schrift auf dunkel)
   Headline-Font laut CI-Manual "Careny Regular" (lizenziert, Salamahtype),
   Fliesstext "Shippori Mincho" (Regular/Bold) – beide lokal selbst gehostet.
   ============================================================ */

:root{
  --hq-ivory:#FAF0ED;
  --hq-beige:#F7E3DB;
  --hq-anthracite:#3E3C3D;
  --hq-anthracite-2:#544E50;
  --hq-black:#221F1E;
  --hq-white:#fff;
  --hq-ink:#3E3C3D;
  --hq-ink-soft:#655E5F;
  --hq-ink-soft-on-dark:#c8bcbb;
  --hq-rose:#D39B8B;
  --hq-rose-light:#E9C2B6;
  --hq-rose-pattern:#F7E3DB;
  --hq-rose-deep:#D39B8B;
  --hq-rose-text:#89655a; /* abgedunkelte Roségold-Variante fuer Text auf hellem Grund, WCAG AA (>=4.5:1) */
  --hq-copper:#D39B8B;
  --hq-line-light:rgba(62,60,61,.16);
  --hq-line-dark:rgba(250,240,237,.16);
  --hq-radius:2px;
  --hq-radius-lg:2px;
  --hq-gap:clamp(20px, 4vw, 48px);
  --hq-section-pad:clamp(64px, 10vw, 128px);
  --hq-max:1180px;
  --hq-font-head:'Careny', serif;
  --hq-font-body:'Shippori Mincho', serif;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Grundlagen / Barrierefreiheit ---------- */
.hq-skip-link{
  position:absolute; left:12px; top:-60px; z-index:10000;
  background:var(--hq-anthracite); color:var(--hq-white);
  padding:12px 18px; font-family:var(--hq-font-body); font-size:.85rem;
  text-decoration:none; border-radius:var(--hq-radius); transition:top .2s ease;
}
.hq-skip-link:focus{ top:12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--hq-rose); outline-offset:3px; border-radius:1px;
}

.hq-visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- Header-Kontrast auf allen Untergruenden ---------- */
.hq-header{
  background:linear-gradient(180deg, rgba(62,60,61,.66), rgba(62,60,61,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hq-logo img{ height:52px !important; width:auto; }

/* ---------- Signet-Vorlader (kurz, dezent, respektiert reduzierte Bewegung) ---------- */
.hq-preloader{
  position:fixed; inset:0; z-index:20000; background:var(--hq-anthracite);
  display:flex; align-items:center; justify-content:center; transition:opacity .6s ease;
}
.hq-preloader img{ width:min(50vw,220px); height:auto; opacity:0; animation:hqPreloaderFade 1.4s ease forwards; }
.hq-preloader.is-hidden{ opacity:0; pointer-events:none; }
@keyframes hqPreloaderFade{
  0%{ opacity:0; transform:scale(.9); }
  45%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){ .hq-preloader{ display:none; } }

/* ---------- Ornamentmuster (offizielles Damast-Motiv aus dem Brand Guide) ---------- */
.hq-pattern-band{
  position:relative; overflow:hidden;
}
.hq-pattern-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--hq-pattern-img, url('/images/pattern-damask-rose.png'));
  background-repeat:repeat; background-size:180px auto; background-position:top center;
  opacity:.14;
}
.hq-section--dark .hq-pattern-band::before, .hq-section--black .hq-pattern-band::before{
  --hq-pattern-img:url('/images/pattern-damask-charcoal.png'); opacity:.18;
}
.hq-pattern-band > *{ position:relative; }
.hq-nav{ flex-wrap:wrap; row-gap:10px; }
.hq-nav-cta{
  font-family:var(--hq-font-body) !important; font-size:.8rem !important;
  letter-spacing:.14em !important; text-transform:uppercase; color:var(--hq-anthracite) !important;
  background:linear-gradient(90deg, var(--hq-rose-light), var(--hq-rose));
  padding:11px 22px; border-radius:1px; transition:filter .2s ease;
}
.hq-nav-cta:hover{ filter:brightness(1.05); color:var(--hq-anthracite) !important; }

/* ---------- Sections ---------- */
.hq-section{ padding:var(--hq-section-pad) clamp(20px, 5vw, 60px); }
.hq-section--ivory{ background:var(--hq-ivory); color:var(--hq-ink); }
.hq-section--beige{ background:var(--hq-beige); color:var(--hq-ink); }
.hq-section--dark{ background:var(--hq-anthracite); color:var(--hq-white); }
.hq-section--black{ background:var(--hq-black); color:var(--hq-white); }
.hq-inner{ max-width:var(--hq-max); margin:0 auto; }
.hq-inner--narrow{ max-width:760px; margin:0 auto; }

/* Klarer visueller Trenner, z.B. vor der individuellen Kollektion */
.hq-divider{ height:1px; max-width:120px; margin:0 auto; background:linear-gradient(90deg, transparent, var(--hq-rose), transparent); }

.hq-eyebrow{
  display:block; font-family:var(--hq-font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--hq-rose-text); margin:0 0 18px;
}
.hq-section--dark .hq-eyebrow, .hq-section--black .hq-eyebrow{ color:var(--hq-rose); }

.hq-h1{
  font-family:var(--hq-font-head); font-weight:500; line-height:1.08;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem); margin:0 0 .5em;
}
.hq-h2{
  font-family:var(--hq-font-head); font-weight:500; line-height:1.14;
  font-size:clamp(1.7rem, 3.6vw, 2.7rem); margin:0 0 .45em;
}
.hq-sub{
  font-family:var(--hq-font-body); font-size:1.02rem; color:var(--hq-ink-soft);
  margin:0 0 28px; max-width:56ch;
}
.hq-section--dark .hq-sub, .hq-section--black .hq-sub{ color:var(--hq-ink-soft-on-dark); }
.hq-lead{ font-family:var(--hq-font-body); font-size:1.08rem; line-height:1.8; max-width:62ch; }
.hq-lead + .hq-lead{ margin-top:1.2em; }
.hq-text-center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.hq-btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--hq-font-body);
  font-size:.92rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:15px 32px; border-radius:1px; border:1px solid transparent; cursor:pointer;
  transition:filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.hq-btn--primary{
  background:linear-gradient(90deg, var(--hq-rose-light), var(--hq-rose)); color:var(--hq-anthracite);
}
.hq-btn--primary:hover{ filter:brightness(1.05); }
.hq-btn--ghost-dark{ border-color:rgba(255,255,255,.55); color:var(--hq-white); background:transparent; }
.hq-btn--ghost-dark:hover{ border-color:var(--hq-rose); color:var(--hq-rose); }
.hq-btn--ghost-light{ border-color:rgba(43,38,36,.35); color:var(--hq-ink); background:transparent; }
.hq-btn--ghost-light:hover{ border-color:var(--hq-rose-text); color:var(--hq-rose-text); }
.hq-link-arrow{
  font-family:var(--hq-font-body); font-size:.85rem; letter-spacing:.06em; text-decoration:none;
  color:inherit; border-bottom:1px solid currentColor; padding-bottom:2px; transition:opacity .2s ease;
}
.hq-link-arrow:hover{ opacity:.7; }
.hq-btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

/* ---------- Hero ---------- */
.hq-hero{
  min-height:92vh; display:flex; align-items:flex-end;
  padding:clamp(120px,20vh,220px) clamp(20px,5vw,60px) clamp(56px,8vh,90px);
  position:relative; color:var(--hq-white); background:var(--hq-anthracite);
}
.hq-hero-media{ position:absolute; inset:0; overflow:hidden; }
.hq-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 30%); }
.hq-hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.34) 68%, rgba(10,10,10,.24) 100%),
    linear-gradient(0deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.32) 46%, rgba(10,10,10,.5) 100%);
}
.hq-hero-content{ position:relative; max-width:760px; }
@media (min-width:1200px){ .hq-hero-content{ max-width:min(920px, 68vw); } }
.hq-hero .hq-h1{ font-size:clamp(2.1rem, 5.6vw, 4.6rem); }
.hq-hero-actions{ display:flex; flex-wrap:wrap; gap:20px 30px; align-items:center; margin-top:20px; }

/* ---------- Zwei-Spalten Text/Bild ---------- */
.hq-grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--hq-gap); align-items:center;
}
.hq-grid-2.hq-media-first{ grid-template-columns:1fr 1fr; }
.hq-grid-2.hq-media-first .hq-grid-2-media{ order:0; }
.hq-grid-2.hq-media-first .hq-grid-2-text{ order:1; }
@media (max-width:900px){
  .hq-grid-2{ grid-template-columns:1fr; }
  .hq-grid-2 .hq-grid-2-media, .hq-grid-2 .hq-grid-2-text{ order:initial; }
}
.hq-media-45{
  display:block; position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:var(--hq-radius-lg);
  background:var(--hq-anthracite-2);
}
.hq-media-45 img{ width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%); display:block; }

/* ---------- Materialitaet: Detailband ---------- */
.hq-detail-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media (max-width:800px){ .hq-detail-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hq-detail-row{ grid-template-columns:1fr; } }
.hq-detail-row .hq-media-45{ aspect-ratio:4/5; }

/* ---------- Startseite: asymmetrisches Kollektions-Trio (Bild traegt, Name statt Text) ---------- */
.hq-trio{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--hq-gap); align-items:stretch; }
.hq-trio-item{ position:relative; display:block; overflow:hidden; border-radius:2px; text-decoration:none; }
.hq-trio-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%); transition:transform .6s ease; }
.hq-trio-item:hover img{ transform:scale(1.03); }
.hq-trio-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,8,7,.72) 0%, rgba(10,8,7,0) 45%);
  pointer-events:none;
}
.hq-trio-name{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0;
  padding:clamp(16px,3vw,28px); font-family:var(--hq-font-head); color:var(--hq-white);
  font-size:clamp(1.1rem, 2vw, 1.6rem); letter-spacing:.02em;
}
.hq-trio-item.hq-trio-main{ aspect-ratio:4/5; }
.hq-trio-side{ display:flex; flex-direction:column; gap:var(--hq-gap); align-self:stretch; }
.hq-trio-side .hq-trio-item{ flex:1 1 0; min-height:0; }
@media (max-width:760px){
  .hq-trio{ grid-template-columns:1fr; }
  .hq-trio-side{ flex-direction:row; }
  .hq-trio-side .hq-trio-item{ aspect-ratio:4/5; flex:1 1 0; }
}

/* ---------- Startseite: Materialitaet als Collage (zwei versetzte Bilder statt Kachelreihe) ---------- */
.hq-collage{ position:relative; max-width:820px; margin:0 auto; padding-bottom:12%; }
.hq-collage-a{ display:block; position:relative; width:72%; aspect-ratio:4/5; overflow:hidden; border-radius:2px; }
.hq-collage-b{ display:block; position:absolute; right:0; bottom:0; width:44%; aspect-ratio:4/5; overflow:hidden; border-radius:2px; box-shadow:0 18px 40px rgba(20,14,10,.22); border:6px solid var(--hq-ivory); }
.hq-collage img{ width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%); display:block; }
@media (max-width:640px){
  .hq-collage{ padding-bottom:22%; }
  .hq-collage-a{ width:80%; }
  .hq-collage-b{ width:52%; }
}

/* ---------- The Queen's Library: Artikel-Typografie + Uebersichtsliste ---------- */
.hq-article{ max-width:700px; margin:0 auto; }
.hq-article-eyebrow{ display:block; margin-bottom:16px; }
.hq-article h1{ font-family:var(--hq-font-head); font-weight:500; font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.15; margin:0 0 22px; color:var(--hq-ink); }
.hq-article-dek{ font-family:var(--hq-font-head); font-size:1.2rem; line-height:1.5; color:var(--hq-ink-soft); margin:0 0 40px; }
.hq-article-body{ font-family:var(--hq-font-body); line-height:1.85; font-size:1.05rem; color:var(--hq-ink); }
.hq-article-body p{ margin:0 0 24px; }
.hq-article-meta{ font-family:var(--hq-font-body); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--hq-rose-text); margin:0 0 18px; }
.hq-article-back{ margin-top:56px; padding-top:28px; border-top:1px solid var(--hq-line-light); }

.hq-library-list{ display:flex; flex-direction:column; gap:0; max-width:820px; margin:0 auto; }
.hq-library-item{ display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid var(--hq-line-light); text-decoration:none; color:inherit; }
.hq-library-item:first-child{ padding-top:0; }
.hq-library-item .hq-media-45{ aspect-ratio:1/1; }
.hq-library-item-meta{ font-family:var(--hq-font-body); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--hq-rose-text); margin:0 0 6px; }
.hq-library-item-title{ font-family:var(--hq-font-head); font-size:1.3rem; margin:0 0 8px; color:var(--hq-ink); }
.hq-library-item-dek{ font-family:var(--hq-font-body); font-size:.94rem; line-height:1.6; color:var(--hq-ink-soft); margin:0; }
@media (max-width:600px){
  .hq-library-item{ grid-template-columns:1fr; }
  .hq-library-item .hq-media-45{ aspect-ratio:16/9; }
}

/* ---------- Kollektionen-Seite: asymmetrisches Mosaik (Bild+Name traegt, Text bleibt leise) ---------- */
.hq-mosaic{ display:grid; grid-template-columns:repeat(6, 1fr); gap:clamp(28px,4vw,44px) var(--hq-gap); }
.hq-mosaic-item{ grid-column:span 3; }
.hq-mosaic-item.hq-mosaic-md{ grid-column:span 2; }
.hq-mosaic-media{ position:relative; display:block; overflow:hidden; border-radius:2px; aspect-ratio:4/5; }
.hq-mosaic-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%); transition:transform .6s ease; }
.hq-mosaic-item:hover .hq-mosaic-media img{ transform:scale(1.03); }
.hq-mosaic-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,8,7,.7) 0%, rgba(10,8,7,0) 44%);
  pointer-events:none;
}
.hq-mosaic-name{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0;
  padding:clamp(14px,2.4vw,22px) clamp(14px,2.4vw,22px) 12px;
  font-family:var(--hq-font-head); color:var(--hq-white);
  font-size:clamp(1.05rem, 1.8vw, 1.4rem); letter-spacing:.02em; font-weight:500;
}
.hq-mosaic-claim{ font-family:var(--hq-font-body); font-size:.82rem; letter-spacing:.04em; color:var(--hq-rose-text); margin:16px 0 6px; }
.hq-mosaic-text{ font-family:var(--hq-font-body); font-size:.88rem; line-height:1.62; color:var(--hq-ink-soft); margin:0; }
@media (max-width:760px){
  .hq-mosaic{ grid-template-columns:1fr 1fr; }
  .hq-mosaic-item, .hq-mosaic-item.hq-mosaic-md{ grid-column:span 1; }
}
@media (max-width:520px){ .hq-mosaic{ grid-template-columns:1fr; } }

/* ---------- Kollektionskarten ---------- */
.hq-cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px,3vw,40px); margin-top:12px;
}
.hq-cards--seven{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .hq-cards, .hq-cards--seven{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hq-cards, .hq-cards--seven{ grid-template-columns:1fr; } }
.hq-card-collection{ display:block; text-decoration:none; color:inherit; }
.hq-card-collection .hq-media-45{ margin-bottom:18px; }
.hq-card-name{ font-family:var(--hq-font-head); font-size:1.35rem; margin:0 0 4px; color:inherit; }
.hq-card-claim{ font-family:var(--hq-font-body); font-size:.86rem; letter-spacing:.04em; color:var(--hq-rose-text); margin:0 0 10px; }
.hq-section--dark .hq-card-claim, .hq-section--black .hq-card-claim{ color:var(--hq-rose); }
.hq-card-text{ font-family:var(--hq-font-body); font-size:.95rem; line-height:1.65; color:var(--hq-ink-soft); margin:0; }
.hq-section--dark .hq-card-text, .hq-section--black .hq-card-text{ color:var(--hq-ink-soft-on-dark); }
.hq-card-shopcta{ margin-top:12px; }

/* ---------- FAQ ---------- */
.hq-faq{ max-width:820px; margin:0 auto; }
.hq-faq details{
  border-bottom:1px solid var(--hq-line-light); padding:22px 0;
}
.hq-section--dark .hq-faq details, .hq-section--black .hq-faq details{ border-color:var(--hq-line-dark); }
.hq-faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:20px; font-family:var(--hq-font-body); font-size:1.32rem; font-weight:400;
  color:var(--hq-black); letter-spacing:.008em; text-shadow:0 0 .35px currentColor;
}
.hq-faq summary::-webkit-details-marker{ display:none; }
.hq-faq summary::after{
  content:'+'; font-family:var(--hq-font-body); font-size:1.4rem; flex:none; color:var(--hq-rose-deep);
  transition:transform .25s ease;
}
.hq-section--dark .hq-faq summary::after, .hq-section--black .hq-faq summary::after{ color:var(--hq-rose); }
.hq-faq details[open] summary::after{ transform:rotate(45deg); }
.hq-faq .hq-faq-a{
  padding-top:14px; font-family:var(--hq-font-body); font-size:1.05rem; font-weight:400;
  color:var(--hq-black); letter-spacing:.006em; line-height:1.8; max-width:66ch;
  text-shadow:0 0 .35px currentColor;
}

/* ---------- Formulare (Kontakt + Private Preview) ---------- */
.hq-field{ margin-bottom:22px; text-align:left; }
.hq-field label{
  display:block; font-family:var(--hq-font-body); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px; color:var(--hq-ink-soft);
}
.hq-section--dark .hq-field label, .hq-section--black .hq-field label{ color:var(--hq-ink-soft-on-dark); }
.hq-field .hq-optional{ text-transform:none; letter-spacing:0; font-size:.72rem; opacity:.7; margin-left:6px; }
.hq-input, .hq-textarea, .hq-select{
  width:100%; box-sizing:border-box; font-family:var(--hq-font-body); font-size:1rem;
  padding:13px 16px; border:1px solid var(--hq-line-light); border-radius:var(--hq-radius);
  background:var(--hq-white); color:var(--hq-ink);
}
.hq-section--dark .hq-input, .hq-section--dark .hq-textarea, .hq-section--dark .hq-select,
.hq-section--black .hq-input, .hq-section--black .hq-textarea, .hq-section--black .hq-select{
  background:rgba(255,255,255,.06); border-color:var(--hq-line-dark); color:var(--hq-white);
}
.hq-textarea{ min-height:120px; resize:vertical; }
.hq-charcount{ font-size:.74rem; color:var(--hq-ink-soft); text-align:right; margin-top:6px; }
.hq-checkbox-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.hq-checkbox-row input[type="checkbox"]{ width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--hq-rose-deep); }
.hq-checkbox-row label{ font-size:.92rem; line-height:1.5; font-family:var(--hq-font-body); text-transform:none; letter-spacing:0; }
.hq-error-text{ color:#B5473A; font-size:.85rem; margin-top:6px; }
.hq-section--dark .hq-error-text, .hq-section--black .hq-error-text{ color:#E39A8C; }
.hq-form-status{ font-family:var(--hq-font-body); font-size:.95rem; margin-top:18px; }
.hq-form-status[data-state="error"]{ color:#B5473A; }
.hq-form-status[data-state="success"]{ color:var(--hq-rose-text); }
.hq-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Private Preview Quiz ---------- */
.hq-quiz-wrap{ max-width:640px; margin:0 auto; }
.hq-quiz-progress{
  display:flex; align-items:center; gap:14px; margin-bottom:36px;
  font-family:var(--hq-font-body); font-size:.78rem; letter-spacing:.08em; color:var(--hq-ink-soft);
}
.hq-section--dark .hq-quiz-progress, .hq-section--black .hq-quiz-progress{ color:var(--hq-ink-soft-on-dark); }
.hq-quiz-bar{ flex:1; height:2px; background:var(--hq-line-light); position:relative; border-radius:2px; overflow:hidden; }
.hq-section--dark .hq-quiz-bar, .hq-section--black .hq-quiz-bar{ background:var(--hq-line-dark); }
.hq-quiz-bar-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--hq-rose-deep); transition:width .35s ease; }
.hq-quiz-step{ display:none; }
.hq-quiz-step.is-active{ display:block; animation:hqFade .4s ease; }
@keyframes hqFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.hq-quiz-question{ font-family:var(--hq-font-body); font-weight:700; font-size:clamp(1.25rem,2.6vw,1.6rem); line-height:1.4; margin:0 0 8px; }
.hq-quiz-hint{ font-size:.86rem; color:var(--hq-ink-soft); margin:0 0 22px; }
.hq-section--dark .hq-quiz-hint, .hq-section--black .hq-quiz-hint{ color:var(--hq-ink-soft-on-dark); }
.hq-quiz-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.hq-quiz-option{
  display:block; position:relative; border:1px solid var(--hq-line-light); border-radius:var(--hq-radius);
  padding:16px 20px; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.hq-section--dark .hq-quiz-option, .hq-section--black .hq-quiz-option{ border-color:var(--hq-line-dark); }
.hq-quiz-option:hover{ border-color:var(--hq-rose-deep); }
.hq-quiz-option input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.hq-quiz-option input:checked + span{ color:var(--hq-rose-text); }
.hq-section--dark .hq-quiz-option input:checked + span, .hq-section--black .hq-quiz-option input:checked + span{ color:var(--hq-rose); }
.hq-quiz-option:has(input:checked){ border-color:var(--hq-rose-deep); background:rgba(211,155,139,.14); }
.hq-quiz-option:has(input:focus-visible){ outline:2px solid var(--hq-rose); outline-offset:2px; }
.hq-quiz-option span{ font-family:var(--hq-font-body); font-size:1rem; }
.hq-quiz-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hq-quiz-back{
  background:none; border:0; font-family:var(--hq-font-body); font-size:.85rem; letter-spacing:.06em;
  color:inherit; cursor:pointer; text-decoration:underline; padding:10px 0;
}
.hq-quiz-back:disabled{ visibility:hidden; }
.hq-quiz-next{ font-family:var(--hq-font-body); border:0; }

/* ---------- Diverses ---------- */
.hq-two-col-list{ columns:2; gap:40px; }
@media (max-width:640px){ .hq-two-col-list{ columns:1; } }
.hq-boundary-note{
  background:rgba(211,155,139,.12); border:1px solid rgba(211,155,139,.4);
  padding:14px 18px; border-radius:var(--hq-radius); font-size:.85rem; margin-top:10px;
}

/* ---------- Footer ---------- */
.hq-footer{ background:var(--hq-anthracite); color:var(--hq-white); padding:70px clamp(20px,5vw,60px) 40px; }
.hq-footer-inner{ max-width:var(--hq-max); margin:0 auto; text-align:center; }
.hq-footer-claim{ font-family:var(--hq-font-head); font-size:1.1rem; margin:0 0 28px; }
.hq-footer-links ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:22px 30px; padding:0; margin:0 0 32px; }
.hq-footer-links a{ color:var(--hq-ink-soft-on-dark); text-decoration:none; font-family:var(--hq-font-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.hq-footer-links a:hover{ color:var(--hq-rose); }
.hq-footer-social{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:0 0 18px; }
.hq-footer-social a{ color:var(--hq-ink-soft-on-dark); text-decoration:none; font-family:var(--hq-font-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.hq-footer-social a:hover{ color:var(--hq-rose); }
.hq-footer-copy{ font-family:var(--hq-font-body); font-size:.78rem; color:#8f8681; margin:0; }

/* ---------- Manufaktur / Raumkonzepte: dezente "nur auf Anfrage"-Kennzeichnung ---------- */
.hq-tag-subtle{
  display:inline-block; font-family:var(--hq-font-body); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hq-ink-soft); border:1px solid var(--hq-line-light);
  border-radius:2px; padding:6px 14px; margin-top:18px;
}
.hq-section--dark .hq-tag-subtle, .hq-section--black .hq-tag-subtle{ color:var(--hq-ink-soft-on-dark); border-color:var(--hq-line-dark); }
.hq-hero .hq-tag-subtle{ color:var(--hq-ink-soft-on-dark); border-color:rgba(255,255,255,.28); }

/* Redaktionelle Liste statt Leistungskarten (Manufaktur/Raumkonzepte Abschnitt 1) */
.hq-editorial-list{ max-width:760px; margin:48px auto 0; }
.hq-editorial-item{ padding:28px 0; border-top:1px solid var(--hq-line-light); }
.hq-editorial-item:last-child{ border-bottom:1px solid var(--hq-line-light); }
.hq-section--dark .hq-editorial-item, .hq-section--black .hq-editorial-item{ border-color:var(--hq-line-dark); }
.hq-editorial-item h3{ font-family:var(--hq-font-head); font-weight:500; font-size:1.25rem; margin:0 0 8px; }
.hq-editorial-item p{ font-family:var(--hq-font-body); font-size:.98rem; line-height:1.7; color:var(--hq-ink-soft); margin:0; }
.hq-section--dark .hq-editorial-item p, .hq-section--black .hq-editorial-item p{ color:var(--hq-ink-soft-on-dark); }

/* Begriffe als flieszender Satz statt Icon-Liste (Manufaktur Abschnitt 2) */
.hq-term-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:40px auto 0; max-width:640px; font-family:var(--hq-font-head); font-style:italic; font-size:1.15rem; color:var(--hq-rose-text); }
.hq-section--dark .hq-term-row, .hq-section--black .hq-term-row{ color:var(--hq-rose); }
.hq-term-row span:not(:last-child)::after{ content:'·'; margin:0 14px; opacity:.5; font-style:normal; }

/* Nummerierte Schritte, ruhig statt Verkaufstrichter (Prozess-Abschnitte) */
.hq-steps{ max-width:760px; margin:48px auto 0; display:flex; flex-direction:column; gap:36px; }
.hq-step{ display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start; }
.hq-step-num{ font-family:var(--hq-font-head); font-size:1.6rem; color:var(--hq-rose-text); line-height:1; }
.hq-section--dark .hq-step-num, .hq-section--black .hq-step-num{ color:var(--hq-rose); }
.hq-step h3{ font-family:var(--hq-font-head); font-weight:500; font-size:1.15rem; margin:0 0 6px; }
.hq-step p{ font-family:var(--hq-font-body); font-size:.96rem; line-height:1.7; color:var(--hq-ink-soft); margin:0; }
.hq-section--dark .hq-step p, .hq-section--black .hq-step p{ color:var(--hq-ink-soft-on-dark); }
@media (max-width:520px){ .hq-step{ grid-template-columns:40px 1fr; } .hq-step-num{ font-size:1.3rem; } }

/* Zwei ruhige Zugaenge (Startseite "Ueber die Kollektionen hinaus") */
.hq-gateways{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hq-gap); margin-top:48px; }
.hq-gateway{ position:relative; display:block; overflow:hidden; border-radius:2px; aspect-ratio:4/5; text-decoration:none; }
.hq-gateway img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%); transition:transform .6s ease; }
.hq-gateway:hover img{ transform:scale(1.03); }
.hq-gateway::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,7,.72) 0%, rgba(10,8,7,0) 50%); pointer-events:none; }
.hq-gateway-content{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(18px,3vw,30px); }
.hq-gateway-name{ font-family:var(--hq-font-head); color:var(--hq-white); font-size:clamp(1.2rem,2.2vw,1.6rem); margin:0 0 8px; }
.hq-gateway-text{ font-family:var(--hq-font-body); color:var(--hq-ink-soft-on-dark); font-size:.9rem; line-height:1.6; margin:0 0 14px; max-width:32ch; }
@media (max-width:700px){ .hq-gateways{ grid-template-columns:1fr; } }
.hq-gateways--three{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .hq-gateways--three{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hq-gateways--three{ grid-template-columns:1fr; } }

/* ---------- 404 ---------- */
.hq-404{ min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:160px 24px 100px; }

/* ---------- Queen's Library: "Fuer heute Abend"-Impulse am Artikelende ---------- */
.hq-impulses{ margin:48px 0 0; padding:32px clamp(20px,4vw,36px); background:var(--hq-beige); border:1px solid var(--hq-line-light); border-radius:2px; }
.hq-impulses-label{ font-family:var(--hq-font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hq-rose-text); margin:0 0 16px; }
.hq-impulses-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hq-impulses-list li{ font-family:var(--hq-font-head); font-size:1.05rem; line-height:1.5; color:var(--hq-ink); padding-left:24px; position:relative; }
.hq-impulses-list li::before{ content:'—'; position:absolute; left:0; color:var(--hq-rose-text); }
@media (max-width:480px){ .hq-impulses{ padding:24px 20px; } .hq-impulses-list li{ font-size:.98rem; } }