/* ============================================================
   LDmotion Design-System: Bausteine
   Header, Sheet, Kontaktbereich, Footer. Setzt basis.css voraus.
   ============================================================ */

/* ============================================================
   Header: transluzente Ebene, Inhalt scrollt darunter durch.
   Statt harter 1px-Linie eine weiche Kante an der Ueberlappung.
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 68px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 320ms var(--ease-out);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mat);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.header::after { /* Scroll-Kante: verlaeuft, statt zu schneiden */
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 22px;
  background: linear-gradient(to bottom, rgba(10, 12, 15, 0.55), transparent);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}
.header.is-stuck::before,
.header.is-stuck::after { opacity: 1; }

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}
.brand img { height: 27px; width: auto; filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.004em;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.nav a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn { padding: 10px 20px; font-size: 0.9rem; }

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  transition: transform 120ms var(--ease-out);
}
.menu-toggle:active { transform: scale(0.94); }
.menu-toggle svg { width: 20px; height: 20px; }

/* ============================================================
   Sheet (mobiles Menue)
   Kommt von unten, geht nach unten: gleicher Weg hin wie zurueck.
   Ziehbar, mit Gummiband an der Oberkante, jederzeit unterbrechbar.
   ============================================================ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(5, 7, 9, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 260ms;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  padding: 10px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgba(16, 20, 25, 0.86);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
  border-top: 1px solid var(--mat-edge);
  box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, 1);
  touch-action: none;
}
.sheet.is-open { visibility: visible; }
.sheet-grip {
  width: 40px; height: 4px;
  margin: 8px auto 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.28);
}
.sheet nav { display: grid; }
.sheet nav a {
  padding: 15px 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.012em;
  border-bottom: 1px solid var(--line);
}
.sheet nav a:last-of-type { border-bottom: none; }
.sheet .btn { margin-top: 20px; }

/* ============================================================
   Kontakt
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 4vw, 52px); }
.contact-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; align-items: center; gap: 11px; font-size: 1rem; }
.contact-list svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.channels { display: grid; gap: 12px; margin-top: 32px; }
.channel {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 260ms var(--ease-out), transform 160ms var(--ease-out);
}
.channel:hover { border-color: var(--accent-line); }
.channel:active { transform: scale(0.985); }
.channel-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--ink-2);
  flex: none;
}
.channel-ico svg { width: 20px; height: 20px; }
.channel--wa .channel-ico { background: #1ebe59; border-color: transparent; color: #fff; }
.channel small { display: block; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.channel b { font-weight: 600; font-size: 1rem; }

.form {
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); letter-spacing: 0.004em; }
.field .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bcc6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
/* Kontrast: Platzhalter und Hilfstext bleiben lesbar, nicht dekorativ blass. */
.field input::placeholder, .field textarea::placeholder { color: #98a1ac; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.field-hint { font-size: 0.84rem; color: var(--ink-2); }
.form-note { margin-top: 14px; font-size: 0.85rem; color: var(--ink-2); text-align: center; }
.form-error {
  display: none;
  margin-bottom: 16px;
  padding: 12px 15px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 122, 122, 0.4);
  background: rgba(255, 90, 90, 0.1);
  color: #ffb3b3;
  font-size: 0.92rem;
}
.form-error.is-shown { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; text-align: center; padding-block: 20px; }
.form-success.is-shown { display: block; }
.form-success .check {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-deep);
  color: #fff;
}
.form-success .check svg { width: 30px; height: 30px; }
.form-success p { margin-top: 12px; }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--line); background: var(--bg-1); padding-block: clamp(52px, 6vw, 80px) 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
.footer-brand img { height: 30px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 32ch; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: border-color 240ms var(--ease-out), color 240ms var(--ease-out), transform 140ms var(--ease-out);
}
.footer-social a:hover { border-color: var(--accent-line); color: var(--accent); }
.footer-social a:active { transform: scale(0.93); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h2 { font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: 0.95rem; color: var(--ink-2); transition: color 200ms var(--ease-out); }
.footer-col a:hover { color: var(--accent); }
.footer-contact { font-style: normal; font-size: 0.95rem; color: var(--ink-2); line-height: 1.75; }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between;
  font-size: 0.88rem; color: var(--ink-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a:hover { color: var(--accent); }

/* ============================================================
   Portfolio: asymmetrisches Raster: ein grosses Stueck, drei kleine.
   Genau vier Zellen fuer vier Projekte.
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 60px);
}
.work {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 320ms var(--ease-out);
}
.work:hover { border-color: var(--line-strong); }
.work--lead { grid-column: span 3; }
.work-img { position: relative; overflow: hidden; }
.work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.work:hover .work-img img { transform: scale(1.035); }
.work--lead .work-img { aspect-ratio: 21 / 9; }
.work-img { aspect-ratio: 16 / 10; }
.work-body { padding: 24px 24px 28px; }
.work--lead .work-body { padding: 30px clamp(28px, 3vw, 40px) 34px; max-width: 62ch; }
.work-kind { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.work h3 { margin: 12px 0 10px; }
.work--lead h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.022em; line-height: 1.14; }
.work p { font-size: 0.97rem; color: var(--ink-2); }
.work .arrow-link { margin-top: 20px; }
.work-play {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(12, 15, 19, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--mat-edge);
  color: #fff;
  transition: background-color 320ms var(--ease-out);
}
.work:hover .work-play { background: var(--accent-deep); border-color: transparent; }
.work-play svg { width: 17px; height: 17px; margin-left: 2px; }
.work-foot { margin-top: 34px; display: flex; justify-content: center; }

/* ============================================================
   Schluss-Aufruf
   ============================================================ */
.cta {
  position: relative;
  padding: clamp(52px, 7vw, 88px) clamp(28px, 5vw, 72px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%; top: -55%;
  width: 780px; height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 66%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 44ch; margin-inline: auto; }

/* Neonreklame: drei Ebenen. Kern, enge Roehre, weiter Schein.
   Zuendet mit kurzem Stottern, wie eine echte Roehre, brennt dann durch.
   Einmal beim Eintreten, nicht in Schleife.

   Das Stottern bleibt bewusst unter drei Aufhellungen pro Sekunde und
   betrifft nur zwei Woerter, nicht die Flaeche. Bei reduzierter Bewegung
   faellt es komplett weg. */
.leuchtwort {
  position: relative;
  color: var(--ink);
  white-space: nowrap;
}
.leuchtwort::before,
.leuchtwort::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
/* Der Kern ist das Hellste. Nach aussen wird es dunkler und gesaettigter,
   so wie bei einer echten Roehre: weisses Zentrum, Gasfarbe im Hof.
   Leuchtdichten: Kern 0.93, Roehre 0.48, weiter Schein 0.13. */
.leuchtwort::before { color: #58c4ea; filter: blur(8px); }   /* enge Roehre */
.leuchtwort::after  { color: var(--accent-deep); filter: blur(34px); }  /* weiter Schein */

.cta.is-lit .leuchtwort         { animation: neon-kern   2600ms var(--ease-out) 600ms forwards; }
.cta.is-lit .leuchtwort::before { animation: neon-roehre 2600ms var(--ease-out) 600ms forwards; }
.cta.is-lit .leuchtwort::after  { animation: neon-schein 2900ms var(--ease-out) 600ms forwards; }

/* Zuendvorgang: fuenf Blitzer in den ersten 420ms, dann brennt sie durch.
   Die Zahlen sind Prozent von 2600ms:
   1.5% = 39ms, 2.8% = 73ms, 4.2% = 109ms, 5.2% = 135ms, 7.2% = 187ms,
   8.8% = 229ms, 11.4% = 296ms, 13% = 338ms, 16% = 416ms. */
@keyframes neon-kern {
  0%, 1.4%  { color: var(--ink); text-shadow: none; }
  1.5%      { color: #eafaff; text-shadow: 0 0 7px color-mix(in oklab, var(--accent) 90%, transparent), 0 0 22px color-mix(in oklab, var(--accent) 60%, transparent); }
  2.8%      { color: var(--ink); text-shadow: none; }
  4.2%      { color: #eafaff; text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 95%, transparent), 0 0 24px color-mix(in oklab, var(--accent) 62%, transparent); }
  5.2%      { color: var(--ink); text-shadow: none; }
  7.2%      { color: #eafaff; text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 95%, transparent), 0 0 26px color-mix(in oklab, var(--accent) 65%, transparent); }
  8.8%      { color: color-mix(in oklab, var(--ink) 78%, var(--accent)); text-shadow: 0 0 5px color-mix(in oklab, var(--accent) 25%, transparent); }
  11.4%     { color: #eafaff; text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 95%, transparent), 0 0 28px color-mix(in oklab, var(--accent) 68%, transparent); }
  13%       { color: color-mix(in oklab, var(--ink) 72%, var(--accent)); text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent); }
  16%, 100% {
    color: #eafaff;
    /* Steiler Abfall und Farbwechsel nach aussen: nah noch das helle
       Akzentblau, weit draussen nur noch das tiefe Markenblau. */
    text-shadow:
      0 0 4px  color-mix(in oklab, var(--accent) 92%, transparent),
      0 0 12px color-mix(in oklab, var(--accent) 58%, transparent),
      0 0 30px color-mix(in oklab, var(--accent-deep) 42%, transparent),
      0 0 64px color-mix(in oklab, var(--accent-deep) 20%, transparent);
  }
}
/* Die enge Roehre stottert voll mit, sie ist die Lichtquelle. */
@keyframes neon-roehre {
  0%, 1.4% { opacity: 0; }
  1.5%     { opacity: 1; }
  2.8%     { opacity: 0.04; }
  4.2%     { opacity: 0.95; }
  5.2%     { opacity: 0.03; }
  7.2%     { opacity: 0.9; }
  8.8%     { opacity: 0.2; }
  11.4%    { opacity: 0.82; }
  13%      { opacity: 0.25; }
  16%      { opacity: 0.85; }
  100%     { opacity: 0.78; }
}
/* Der weite Schein folgt gedaempft. Er ist die grosse Flaeche, deshalb
   springt er nicht auf null zurueck, sondern pumpt nur mit. */
@keyframes neon-schein {
  0%, 1.4% { opacity: 0;    transform: scale(0.96); }
  1.5%     { opacity: 0.34; transform: scale(1); }
  2.8%     { opacity: 0.12; }
  4.2%     { opacity: 0.44; }
  5.2%     { opacity: 0.14; }
  7.2%     { opacity: 0.5;  transform: scale(1.01); }
  8.8%     { opacity: 0.26; }
  11.4%    { opacity: 0.56; }
  13%      { opacity: 0.3; }
  16%      { opacity: 0.5;  transform: scale(1.02); }
  60%      { opacity: 0.78; transform: scale(1.05); }
  100%     { opacity: 0.62; transform: scale(1.02); }
}
.cta p { margin-top: 26px; }
/* Knopfreihe. Gehoert zu den Bausteinen, nicht zur Startseite: sie kommt
   im Hero jeder Seite und im Schluss-Aufruf vor. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Die beiden Knoepfe stehen nebeneinander. In der schmalen Mittelspalte
   brachen sie sonst untereinander um. */
.cta-inner { max-width: 56ch; }
.cta .hero-actions { justify-content: center; margin-top: 30px; flex-wrap: nowrap; }
@media (max-width: 560px) { .cta .hero-actions { flex-wrap: wrap; } }

/* ============================================================
   Zugaenglichkeit und Verkleinern von Karte und Schluss-Aufruf
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .work-img img { transition: none; }
  .cta.is-lit .leuchtwort { animation: none; color: var(--accent); text-shadow: none; }
  .leuchtwort::before, .leuchtwort::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .work-play { background: #12161b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 860px) {
  .work--lead { grid-column: span 3; }
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; }
  .work--lead { grid-column: span 1; }
  .work--lead .work-img { aspect-ratio: 16 / 10; }
}
/* ============================================================
   Leistungen: angehefteter Medienrahmen.
   Der Text laeuft, das Bild bleibt stehen und wechselt mit.
   Bilder materialisieren sich (Groesse und Deckkraft zusammen),
   statt nur ein- und auszublenden.
   ============================================================ */
.svc-kicker { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.84rem;
  color: var(--ink-2);
}

.pin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}
.pin-media { position: sticky; top: 108px; }
.pin-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Kein Rahmen, siehe .gain-slides. */
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.pin-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 620ms var(--ease-out), transform 900ms var(--ease-out);
}
.pin-frame img.is-active { opacity: 1; transform: scale(1); }
.pin-caption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(12, 15, 19, 0.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--mat-edge);
  font-family: var(--display); font-weight: 600; font-size: 0.82rem;
  color: #fff;
}
.pin-step { padding-block: clamp(46px, 8vh, 92px); }
.pin-step:first-child { padding-top: 0; }
.pin-step + .pin-step { border-top: 1px solid var(--line); }
.pin-step h3 { margin: 12px 0 12px; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.16; }
.pin-step p { color: var(--ink-2); margin-bottom: 22px; }
.pin-step .svc-kicker { opacity: 0.55; transition: opacity 420ms var(--ease-out); }
.pin-step.is-current .svc-kicker { opacity: 1; }
.svc-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .pin-frame img { transition: opacity 200ms linear; transform: none; }
  .pin-frame img.is-active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pin-caption { background: #12161b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 767px) {
  .pin-grid { grid-template-columns: 1fr; gap: 22px; }
  .pin-media {
    order: -1; top: 68px;
    background: var(--bg);
    margin-inline: calc(var(--gutter) * -1);
    padding: 10px var(--gutter);
  }
  .section--tint .pin-media { background: var(--bg-1); }
  .pin-frame { aspect-ratio: 2 / 1; }
  .pin-step { padding-block: 30px; }
}

/* ============================================================
   Zitat Wort fuer Wort. Traegt ein Element data-wortweise, setzt
   basis.js jedes Wort in ein eigenes span. Kein Selbstzweck: es
   liest sich, als spraeche jemand, statt als stuende ein Block da.
   ============================================================ */
[data-wortweise] .wort {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.34em, 0);
  filter: blur(4px);
}
[data-wortweise].is-spoken .wort {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out), filter 520ms var(--ease-out);
  transition-delay: calc(var(--w) * 34ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-wortweise] .wort { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   Zugaenglichkeit und Verkleinern der Bausteine
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .menu-toggle, .channel, .footer-social a { transition: background-color 200ms linear, border-color 200ms linear, color 200ms linear; }
  .menu-toggle:active, .channel:active, .footer-social a:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .header::before { background: #0c0f13; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet { background: #10141a; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 7, 9, 0.82); }
}
@media (prefers-contrast: more) {
  .header::before { background: #0a0c0f; }
}
@media (max-width: 1000px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .nav, .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}


/* ---- Aufklapper ----
   Fragen und Antworten. Steht auf mehreren Seiten, deshalb hier. */
.aufklapp { border-top: 1px solid var(--line); }
.aufklapp:last-of-type { border-bottom: 1px solid var(--line); }
.aufklapp--breit { margin-top: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.aufklapp summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em;
  transition: color 220ms var(--ease-out);
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary:hover { color: var(--accent); }
.aufklapp .chev { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: transform 340ms var(--ease-out); }
.aufklapp[open] .chev { transform: rotate(180deg); }
.aufklapp-inhalt { padding-bottom: 26px; color: var(--ink-2); }
.aufklapp-inhalt p { max-width: 74ch; }

.aufklapp-inhalt a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.aufklapp-inhalt a:hover { color: var(--ink); }
.aufklapp[open] .aufklapp-inhalt { animation: aufklapp 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes aufklapp { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
  .aufklapp[open] .aufklapp-inhalt { animation: none; }
  .aufklapp .chev { transition: none; }

/* ---- Sterne und Logoband ----
   Beide stehen auf der Startseite und auf der Landingpage. */
.stars { display: inline-flex; gap: 3px; color: var(--accent); }
.stars svg { width: 17px; height: 17px; }

.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: clamp(38px, 5vw, 72px); width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Kein Filter. brightness() brennt die Graustufen in Wappen und Signets aus.
   Die feste Box haelt die Logos auf gleichem Gewicht, sonst reicht die
   gerenderte Breite von 43px bis 364px. */
.marquee img {
  width: 116px; height: 32px;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 260ms var(--ease-out);
}
.marquee img:hover { opacity: 1; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }