/*
Theme Name: QTS Child
Theme URI: https://qts.agency
Description: Child-Theme für GeneratePress — cineastisches, bild-getriebenes Design für QTS (Kundenservice-Outsourcing). Leistungen & Stellen im Backend pflegbar.
Author: AIOS Media
Template: generatepress
Version: 1.0.0
Text Domain: qts-child
*/

/* ============================================================
   QTS Design-Tokens
   ============================================================ */
:root {
  --qts-black: #0a0a0b;
  --qts-black-2: #101013;
  --qts-black-3: #17171b;
  --qts-cream: #efece4;
  --qts-mute: #a6a199;
  --qts-faint: #928c7f; /* ≥4.5:1 Kontrast auf Schwarz (a11y) */
  --qts-gold: #cda15e;
  --qts-gold-2: #e3c288;
  --qts-line: rgba(239, 236, 228, 0.14);
  --qts-max: 1600px;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-display: "Sora", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, sans-serif;
}

/* ============================================================
   Reset / Basis (überschreibt GeneratePress-Grundlayout)
   ============================================================ */
body.qts,
body {
  background: var(--qts-black);
  color: var(--qts-cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  margin: 0;
}
.qts * { box-sizing: border-box; }
.qts img { max-width: 100%; height: auto; display: block; }
.qts a { color: inherit; text-decoration: none; }

/* GeneratePress-Container zurücksetzen, damit wir volle Breite haben */
.qts #page,
.qts .site-content,
.qts #content { max-width: none; padding: 0; margin: 0; }
.qts .inside-article,
.qts .entry-content { margin: 0; }

.qts h1, .qts h2, .qts h3, .qts h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--qts-cream);
}
.qts p { margin: 0; }
.qts ::selection { background: var(--qts-gold); color: var(--qts-black); }
.qts :focus-visible { outline: 1px solid var(--qts-gold); outline-offset: 4px; }

.qts-wrap { max-width: var(--qts-max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 640px) { .qts-wrap { padding-left: 40px; padding-right: 40px; } }

.qts-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qts-gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.qts-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--qts-gold); }
.qts-eyebrow.no-line::before { display: none; }
.qts-gold { color: var(--qts-gold-2); }
.qts-mute { color: var(--qts-mute); }

/* Buttons / Links */
.qts-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--qts-gold); color: var(--qts-black);
  padding: 16px 32px; border-radius: 999px; font-weight: 600;
  transition: transform .3s ease, background .3s ease;
}
.qts-btn:hover { transform: translateY(-2px); background: var(--qts-gold-2); }
.qts-arrow-link { display: inline-flex; align-items: center; gap: 16px; font-size: 1.125rem; color: var(--qts-cream); }
.qts-arrow-link .circle {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid rgba(239,236,228,.3); transition: all .4s ease;
}
.qts-arrow-link:hover .circle { border-color: var(--qts-gold); background: var(--qts-gold); color: var(--qts-black); }
.qts-underline {
  background-image: linear-gradient(var(--qts-gold), var(--qts-gold));
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px;
  transition: background-size .5s cubic-bezier(.16,1,.3,1); padding-bottom: 2px;
}
.qts-arrow-link:hover .qts-underline, a:hover > .qts-underline, .qts-underline:hover { background-size: 100% 1px; }

/* Reveal-Animation (nur wenn JS aktiv ist → ohne JS bleibt Inhalt sichtbar) */
.qts-js .qts-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.qts-js .qts-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .qts-js .qts-reveal { opacity: 1; transform: none; } }

/* ============================================================
   Header / Navigation (transparent, fix, kein Glas)
   ============================================================ */
.qts-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.qts-header .bar-bg {
  position: absolute; inset: 0; background: var(--qts-black); border-bottom: 1px solid var(--qts-line);
  opacity: 0; transition: opacity .5s ease;
}
.qts-header.scrolled .bar-bg { opacity: .97; }
.qts-header-inner {
  position: relative; max-width: var(--qts-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px;
}
@media (min-width: 640px) { .qts-header-inner { padding: 24px 40px; } }
.qts-logo { display: inline-flex; align-items: baseline; gap: 10px; color: var(--qts-cream); }
.qts-logo .mark { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; }
.qts-logo .sub { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0; color: var(--qts-gold-2); position: relative; padding-left: 12px; }
.qts-logo .sub::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--qts-line); }
@media (max-width: 400px) { .qts-logo .sub { display: none; } }
.qts-nav { display: none; align-items: center; gap: 40px; }
.qts-nav a { font-size: .875rem; letter-spacing: .01em; color: rgba(239,236,228,.85); transition: color .3s; position: relative; padding-bottom: 2px; }
.qts-nav a:hover { color: var(--qts-cream); }
.qts-nav .current-menu-item > a,
.qts-nav .current_page_item > a,
.qts-nav a[aria-current] { color: var(--qts-gold); }
.qts-nav ul { list-style: none; display: flex; gap: 40px; margin: 0; padding: 0; }
.qts-header-cta { display: none; align-items: center; gap: 12px; font-size: .875rem; color: var(--qts-cream); }
.qts-header-cta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--qts-gold); }
@media (min-width: 1024px) { .qts-nav { display: flex; } .qts-burger { display: none; } .qts-header-cta { display: inline-flex; } }

.qts-burger {
  position: relative; z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; color: var(--qts-cream); cursor: pointer;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; height: 40px;
}
.qts-burger .lines { position: relative; width: 24px; height: 12px; display: inline-block; }
.qts-burger .lines span { position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: all .3s; }
.qts-burger .lines span:nth-child(1) { top: 0; }
.qts-burger .lines span:nth-child(2) { top: 12px; }
body.qts-menu-open .qts-burger .lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.qts-menu-open .qts-burger .lines span:nth-child(2) { top: 6px; transform: rotate(-45deg); }

.qts-mobile { position: fixed; inset: 0; z-index: 40; background: var(--qts-black); transform: translateY(-100%); transition: transform .7s cubic-bezier(.76,0,.24,1); }
body.qts-menu-open .qts-mobile { transform: none; }
.qts-mobile-inner { height: 100%; display: flex; flex-direction: column; padding: 112px 24px 40px; }
.qts-mobile nav ul { list-style: none; margin: 0; padding: 0; }
.qts-mobile nav li { border-top: 1px solid var(--qts-line); }
.qts-mobile nav li:last-child { border-bottom: 1px solid var(--qts-line); }
.qts-mobile nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 24px 0; font-family: var(--font-display); font-size: 2.25rem; color: var(--qts-cream); }
.qts-mobile nav a:hover { color: var(--qts-gold); }
.qts-mobile .qts-btn { margin-top: auto; justify-content: center; }

/* ============================================================
   Hero (Vollbild-Video)
   ============================================================ */
.qts-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #000; }
.qts-hero .video-wrap { position: absolute; inset: 0; overflow: hidden; background: #000; }
.qts-hero iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; border: 0; }
/* Selbstgehostetes Video (autoplay, performant) */
.qts-hero video.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Poster-Bild: Basis für Mobil (schnell); Desktop lädt Video darüber */
.qts-hero .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Facade: Poster-Bild + Play-Button, YouTube lädt erst beim Klick */
.qts-hero .facade { position: absolute; inset: 0; cursor: pointer; border: 0; padding: 0; background: #000; width: 100%; }
.qts-hero .facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qts-hero .facade .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 999px; background: rgba(10,10,11,.55); border: 1px solid rgba(239,236,228,.4); color: var(--qts-cream); font-size: 1.4rem; backdrop-filter: blur(4px); transition: background .3s, border-color .3s; }
.qts-hero .facade:hover .play { background: var(--qts-gold); border-color: var(--qts-gold); color: var(--qts-black); }
.qts-hero .scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--qts-black) 4%, rgba(10,10,11,.15) 42%, transparent 66%),
    linear-gradient(to right, rgba(10,10,11,.6), rgba(10,10,11,.1) 55%, transparent 75%);
}
.qts-hero .hero-inner { position: relative; z-index: 2; max-width: var(--qts-max); margin: 0 auto; width: 100%; padding: 0 20px 96px; }
@media (min-width: 640px) { .qts-hero .hero-inner { padding: 0 40px 112px; } }
.qts-hero h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; line-height: .98; font-size: clamp(2.8rem, 7.5vw, 7rem); max-width: 60rem; }
.qts-hero h1 .accent { font-style: italic; color: var(--qts-gold-2); display: block; }
.qts-hero .lede { margin-top: 36px; max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: rgba(239,236,228,.8); }
.qts-hero-row { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
@media (min-width: 640px) { .qts-hero-row { flex-direction: row; align-items: center; gap: 48px; } }
.qts-hero .eyebrow-row { margin-bottom: 28px; }
.qts-sound { position: absolute; bottom: 32px; right: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: rgba(239,236,228,.7); cursor: pointer; }
@media (min-width: 640px) { .qts-sound { right: 40px; } }
.qts-sound .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .28em; }
.qts-sound .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(239,236,228,.25); }

/* ============================================================
   Marquee
   ============================================================ */
.qts-marquee { overflow: hidden; border-top: 1px solid var(--qts-line); border-bottom: 1px solid var(--qts-line); padding: 20px 0; }
.qts-marquee .track { display: flex; width: max-content; animation: qts-marquee 42s linear infinite; }
.qts-marquee .item { display: inline-flex; align-items: center; gap: 32px; padding-right: 32px; font-size: .875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--qts-mute); }
.qts-marquee .item .d { width: 4px; height: 4px; border-radius: 999px; background: var(--qts-gold); }
@keyframes qts-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .qts-marquee .track { animation: none; } }

/* ============================================================
   Sektionen allgemein
   ============================================================ */
.qts-section { padding: 96px 20px; }
@media (min-width: 640px) { .qts-section { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1024px) { .qts-section { padding-top: 128px; padding-bottom: 128px; } }
.qts-section.tight { padding-top: 24px; padding-bottom: 24px; }
.qts-section-title { margin-top: 24px; font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.qts-grid-2 { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .qts-grid-2 { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* About */
.qts-about .photo { position: relative; }
.qts-about .photo .frame { overflow: hidden; border-radius: 24px; }
.qts-about .photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.2s ease; }
.qts-about .photo:hover img { transform: scale(1.05); }
.qts-about .badge { position: absolute; right: -16px; bottom: -24px; background: var(--qts-black); border: 1px solid var(--qts-line); border-radius: 16px; padding: 20px 28px; }
.qts-about .badge b { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; }
.qts-about .pillars { margin-top: 40px; }
.qts-about .pillar { display: flex; gap: 20px; border-top: 1px solid var(--qts-line); padding-top: 20px; margin-top: 20px; }
.qts-about .pillar .n { font-size: .875rem; color: var(--qts-gold); }
.qts-about .pillar h3 { font-size: 1.125rem; }
.qts-about .pillar p { margin-top: 4px; font-size: .95rem; color: var(--qts-mute); line-height: 1.6; }

/* Services (interaktiv) */
.qts-services .layout { display: grid; gap: 40px; }
@media (min-width: 1024px) { .qts-services .layout { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.qts-serv-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 24px; border: 1px solid var(--qts-line); }
.qts-serv-photo .slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .7s, transform .7s; }
.qts-serv-photo .slide img { width: 100%; height: 100%; object-fit: cover; }
.qts-serv-photo .slide.active { opacity: 1; transform: none; }
.qts-serv-photo .grad { position: absolute; inset: 0; background: linear-gradient(to top, var(--qts-black), rgba(10,10,11,.4) 45%, transparent); }
.qts-serv-photo .cap { position: absolute; inset: auto 0 0 0; padding: 28px; }
@media (min-width: 640px) { .qts-serv-photo .cap { padding: 36px; } }
.qts-serv-photo .cap .idx { font-size: .875rem; letter-spacing: .2em; color: var(--qts-gold); }
.qts-serv-photo .cap h3 { margin-top: 12px; font-size: clamp(1.8rem, 4vw, 2.25rem); }
.qts-serv-photo .cap p { margin-top: 12px; max-width: 28rem; color: var(--qts-mute); }
.qts-serv-photo .cap .tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.qts-serv-photo .cap .tags span { border: 1px solid rgba(239,236,228,.2); background: rgba(10,10,11,.4); backdrop-filter: blur(4px); border-radius: 999px; padding: 6px 12px; font-size: .75rem; color: rgba(239,236,228,.9); }
.qts-serv-list { display: flex; flex-direction: column; justify-content: center; }
.qts-serv-list button {
  display: flex; align-items: center; gap: 20px; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--qts-line); background: none; color: inherit;
  padding: 20px 0; cursor: pointer; font-family: inherit;
}
.qts-serv-list li:last-child button { border-bottom: 1px solid var(--qts-line); }
.qts-serv-list ul { list-style: none; margin: 0; padding: 0; }
.qts-serv-list .n { font-size: .875rem; color: var(--qts-faint); font-variant-numeric: tabular-nums; }
.qts-serv-list .t { flex: 1; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--qts-mute); transition: all .3s; }
@media (min-width: 640px) { .qts-serv-list .t { font-size: 1.5rem; } }
.qts-serv-list .a { color: var(--qts-faint); opacity: 0; transition: all .3s; }
.qts-serv-list button.active .n { color: var(--qts-gold); }
.qts-serv-list button.active .t { color: var(--qts-cream); transform: translateX(4px); }
.qts-serv-list button.active .a { color: var(--qts-gold); opacity: 1; }
.qts-serv-list .more { margin-top: 32px; }

/* Stats */
.qts-stats { position: relative; overflow: hidden; border-radius: 24px; }
.qts-stats .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qts-stats .ov { position: absolute; inset: 0; background: rgba(10,10,11,.8); }
.qts-stats .ov2 { position: absolute; inset: 0; background: linear-gradient(to top, var(--qts-black), transparent); }
.qts-stats .inner { position: relative; padding: 80px 24px; }
@media (min-width: 640px) { .qts-stats .inner { padding: 80px 48px; } }
.qts-stats .grid { display: grid; gap: 48px 32px; }
@media (min-width: 640px) { .qts-stats .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .qts-stats .grid { grid-template-columns: repeat(4,1fr); } }
.qts-stats .stat .v { font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.025em; }
.qts-stats .stat .l { margin-top: 20px; font-weight: 500; color: var(--qts-gold-2); }
.qts-stats .stat .note { margin-top: 4px; font-size: .875rem; color: rgba(239,236,228,.6); }
@media (min-width: 1024px) { .qts-stats .stat + .stat { border-left: 1px solid rgba(239,236,228,.15); padding-left: 32px; } }

/* Why */
.qts-why .item { display: flex; gap: 20px; border-top: 1px solid var(--qts-line); padding: 24px 0; }
.qts-why .item:last-child { border-bottom: 1px solid var(--qts-line); }
.qts-why .item .n { font-size: .875rem; color: var(--qts-gold); }
.qts-why .item h3 { font-size: 1.25rem; }
.qts-why .item p { margin-top: 8px; max-width: 28rem; color: var(--qts-mute); line-height: 1.6; }
.qts-why .media { border-radius: 24px; overflow: hidden; border: 1px solid var(--qts-line); }
.qts-why .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.qts-why .guarantees { margin-top: 24px; display: grid; gap: 12px; }
@media (min-width: 640px) { .qts-why .guarantees { grid-template-columns: repeat(3,1fr); } }
.qts-why .guarantees div { border: 1px solid var(--qts-line); border-radius: 16px; padding: 16px; font-size: .875rem; color: rgba(239,236,228,.85); }
.qts-why .guarantees .d { width: 6px; height: 6px; border-radius: 999px; background: var(--qts-gold); margin-bottom: 8px; }

/* Process */
.qts-process .grid { position: relative; display: grid; gap: 48px 48px; margin-top: 80px; }
@media (min-width: 768px) { .qts-process .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .qts-process .grid { grid-template-columns: repeat(4,1fr); gap: 32px; } }
.qts-process .line { display: none; }
@media (min-width: 1024px) { .qts-process .line { display: block; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--qts-line); } }
.qts-process .step .num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--qts-gold); background: var(--qts-black); color: var(--qts-gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.qts-process .step h3 { margin-top: 28px; font-size: 1.25rem; }
.qts-process .step p { margin-top: 12px; font-size: .95rem; color: var(--qts-mute); line-height: 1.6; }

/* CTA */
.qts-cta { position: relative; overflow: hidden; border-radius: 24px; }
.qts-cta .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qts-cta .ov { position: absolute; inset: 0; background: rgba(10,10,11,.75); }
.qts-cta .inner { position: relative; text-align: center; padding: 96px 24px; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1024px) { .qts-cta .inner { padding: 128px 48px; } }
.qts-cta h2 { margin-top: 24px; font-size: clamp(2.2rem, 5.5vw, 5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; max-width: 56rem; }
.qts-cta p { margin-top: 24px; max-width: 36rem; font-size: 1.125rem; color: rgba(239,236,228,.8); }
.qts-cta .qts-btn { margin-top: 40px; }

/* ============================================================
   Footer
   ============================================================ */
.qts-footer { border-top: 1px solid var(--qts-line); padding: 64px 20px 40px; }
@media (min-width: 640px) { .qts-footer { padding-left: 40px; padding-right: 40px; } }
.qts-footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; padding-bottom: 64px; }
@media (min-width: 768px) { .qts-footer .cols { grid-template-columns: repeat(4,1fr); } }
.qts-footer .about { grid-column: span 2; }
@media (min-width: 768px) { .qts-footer .about { grid-column: span 1; } }
.qts-footer .about p { max-width: 20rem; color: var(--qts-mute); line-height: 1.6; }
.qts-footer .about a { margin-top: 24px; display: inline-block; font-size: 1.125rem; }
.qts-footer h3 { font-family: var(--font-sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .24em; color: var(--qts-faint); font-weight: 600; }
.qts-footer ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qts-footer li a { font-size: .875rem; color: var(--qts-mute); transition: color .3s; }
.qts-footer li a:hover { color: var(--qts-gold); }
.qts-footer .bottom { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--qts-line); padding-top: 32px; font-size: .75rem; color: var(--qts-faint); }
@media (min-width: 640px) { .qts-footer .bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.qts-footer .bottom .legal { display: flex; gap: 24px; }
.qts-footer .bottom a:hover { color: var(--qts-gold); }

/* ============================================================
   Seitenkopf (Unterseiten)
   ============================================================ */
.qts-pagehead { padding: 160px 20px 64px; }
@media (min-width: 640px) { .qts-pagehead { padding: 192px 40px 64px; } }
@media (min-width: 1024px) { .qts-pagehead { padding-top: 224px; } }
.qts-pagehead .crumb { margin-bottom: 40px; font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--qts-faint); display: flex; gap: 8px; }
.qts-pagehead .crumb a:hover { color: var(--qts-gold); }
.qts-pagehead h1 { margin-top: 28px; font-size: clamp(2.8rem, 8vw, 7rem); font-weight: 600; line-height: 1.02; max-width: 64rem; }
.qts-pagehead.compact h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.qts-pagehead .intro { margin-top: 36px; max-width: 42rem; border-top: 1px solid var(--qts-line); padding-top: 36px; font-size: 1.125rem; line-height: 1.6; color: var(--qts-mute); }

/* Service-Seite Blöcke */
.qts-serviceblock { display: grid; gap: 32px; border-top: 1px solid var(--qts-line); padding: 56px 0; }
@media (min-width: 1024px) { .qts-serviceblock { grid-template-columns: 5fr 4fr 3fr; gap: 40px; padding: 80px 0; } }
.qts-serviceblock .idx { font-size: 1.125rem; color: var(--qts-gold); }
.qts-serviceblock h2 { margin-top: 16px; font-size: clamp(2.2rem,5vw,4rem); line-height: 1; }
.qts-serviceblock .desc { font-size: 1.125rem; line-height: 1.6; color: var(--qts-mute); }
.qts-serviceblock ul { list-style: none; margin: 0; padding: 0; }
.qts-serviceblock li { display: flex; gap: 12px; border-bottom: 1px solid var(--qts-line); padding: 12px 0; font-size: .95rem; color: rgba(239,236,228,.85); }
.qts-serviceblock li:first-child { border-top: 1px solid var(--qts-line); }
.qts-serviceblock li .s { color: var(--qts-gold); }

/* Karriere / Jobs */
.qts-job { display: grid; grid-template-columns: 1fr; gap: 8px; border-top: 1px solid var(--qts-line); padding: 32px 0; }
.qts-joblist li:last-child .qts-job { border-bottom: 1px solid var(--qts-line); }
.qts-joblist ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .qts-job { grid-template-columns: 7fr 4fr 1fr; align-items: baseline; gap: 16px; } }
.qts-job:hover h3 { color: var(--qts-gold-2); transform: translateX(8px); }
.qts-job h3 { font-size: clamp(1.6rem,3.5vw,2.8rem); line-height: 1; transition: all .5s; }
.qts-job .meta { margin-top: 12px; font-size: .875rem; color: var(--qts-faint); }
.qts-job .txt { font-size: .875rem; color: var(--qts-mute); }
.qts-job .go { justify-self: start; font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: var(--qts-faint); }
@media (min-width: 1024px) { .qts-job .go { justify-self: end; } }
.qts-job:hover .go { color: var(--qts-gold); }

/* Kontaktformular / Felder */
.qts-form { border-top: 1px solid var(--qts-line); padding-top: 48px; }
.qts-form .row { display: grid; gap: 40px; }
@media (min-width: 640px) { .qts-form .row { grid-template-columns: 1fr 1fr; } }
.qts-field { margin-bottom: 8px; }
.qts-field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--qts-faint); }
.qts-field input, .qts-field textarea, .qts-field select {
  margin-top: 12px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--qts-line);
  padding: 12px 0; font-size: 1.125rem; color: var(--qts-cream); font-family: inherit; outline: none; transition: border-color .3s;
}
.qts-field input:focus, .qts-field textarea:focus, .qts-field select:focus { border-color: var(--qts-gold); }
.qts-field select option { background: var(--qts-black); }
.qts-form .foot { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .qts-form .foot { flex-direction: row; align-items: center; justify-content: space-between; } }
.qts-form .foot .note { max-width: 24rem; font-size: .75rem; color: var(--qts-faint); }
.qts-form button[type=submit] { background: none; border: 0; cursor: pointer; }
.qts-contact-info { border-top: 1px solid var(--qts-line); padding-top: 48px; }
.qts-contact-info dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--qts-faint); }
.qts-contact-info dd { margin: 8px 0 0; font-size: 1.125rem; }
.qts-contact-info .rows > div { margin-bottom: 32px; }

/* Rechtstexte */
.qts-legal { max-width: 48rem; }
.qts-legal .hint { border-left: 1px solid var(--qts-gold); background: var(--qts-black-2); padding: 16px 24px; font-size: .875rem; color: rgba(239,236,228,.8); }
.qts-legal .hint b { color: var(--qts-gold); }
.qts-legal h2 { font-size: 1.5rem; margin-top: 40px; }
.qts-legal p { margin-top: 8px; color: var(--qts-mute); line-height: 1.7; }

/* Utility */
.qts-center { text-align: center; }
.qts-mt { margin-top: 40px; }
.qts-sticky { position: sticky; top: 112px; }

/* ============================================================
   Responsive-Fixes (höhere Spezifität, überschreiben Basisregeln)
   ============================================================ */
@media (min-width: 1024px) {
  .qts-header .qts-burger { display: none; }        /* Desktop: kein Burger */
  .qts-header .qts-nav { display: flex; }
  .qts-header .qts-header-cta { display: inline-flex; }
}
@media (max-width: 1023px) {
  .qts-header .qts-nav,
  .qts-header .qts-header-cta { display: none; }     /* Mobil: nur Burger */
  .qts-header .qts-burger { display: inline-flex; }
}