/* Q Consulting & Services – Aufbau der bisherigen Seite auf systeme.io
   (übernommen 2026-10-01): Logo „Q“ in Cyan mittig, Navigation darunter,
   Arial, Überschriften 32/25 px, Text 18 px, Newsletter-Band #f5f5f5,
   Fußzeile mittig mit • getrennt. */
:root { --text: #000; --grau: #6e6e6e; --band: #f5f5f5; --grund: #fff; --breite: 80rem; /* 1280 px, Inhaltsbreite aller Websites (Michael, 2026-10-01) */ }
* { box-sizing: border-box; }
body { margin: 0; font: 400 1.125rem/1.6 Arial, Helvetica, sans-serif; color: var(--text); background: var(--grund); }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--grund); padding: .5rem; }
a { color: inherit; }
.kopf { text-align: center; padding: 1.25rem 1rem .5rem; }
.marke img { display: inline-block; width: 64px; height: 64px; }
nav { margin-top: .5rem; }
nav a { margin: 0 .75rem; color: var(--grau); text-decoration: none; font-size: 1rem; }
nav a[aria-current="page"], nav a:hover { color: var(--text); }
.inhalt { padding-top: 2.5rem; padding-bottom: 3rem; }
h1, h2, h3 { font-weight: 400; line-height: 1.25; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5625rem; margin-top: 2.2rem; }
h3 { font-size: 1.25rem; margin-top: 1.6rem; }
.untertitel { font-size: 1.25rem; color: var(--grau); }
.start { text-align: center; padding: 3rem 0; }
.emojis { font-size: 1.75rem; line-height: 1.6; letter-spacing: .15em; word-break: break-all; }
.newsletter { background: var(--band); text-align: center; padding: 2.5rem 0; }
.newsletter h2 { margin-top: 0; }
.fuss { text-align: center; color: var(--grau); font-size: .9375rem; padding: 1.5rem 1rem 2.5rem; }
.fuss a { color: var(--grau); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { text-decoration: underline; }
.links { max-width: 28rem; margin: 0 auto; text-align: center; }
.knopf { display: block; margin: 0 0 .9rem; padding: .7rem 1.4rem; border-radius: 999px; background: var(--text); color: var(--grund); text-decoration: none; }
@media (max-width: 600px) { h1 { font-size: 1.6rem; } }

/* Pfeil nach oben wie bei Nadi Life (Michael, 2026-10-01): erscheint nach
   etwa 500 px Scrollen, mittig am unteren Rand, klebt per sticky am
   Bildschirmrand und bleibt am Seitenende über der Fußzeile stehen. */
html { scroll-behavior: smooth; }
.nach-oben-halter { position: sticky; bottom: 1rem; z-index: 5; height: 0; display: flex; justify-content: center; pointer-events: none; }
.nach-oben { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -60px; border-radius: 50%;
  color: var(--text); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: auto; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.nach-oben:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.nach-oben:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nach-oben { transition: none; } .nach-oben:hover { transform: none; } }

/* Knöpfe: kein Unterstrich und kein Farbwechsel beim Überfahren, stattdessen
   leichtes Anheben mit Schatten wie bei Nadi Life (Michael, 2026-10-01) */
.knopf { transition: transform .15s ease, box-shadow .15s ease; }
.knopf:hover { text-decoration: none; filter: none; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }
.knopf:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover, .knopf:active { transform: none; } }