/* ============================================================================================
   Automiq-Werbebanner (Michael 10.10.2026). Markup: inc/automiq-banner.php, Bewegung: assets/js/automiq-banner.js.
   Eigenständig: alle Klassen mit amq-, die Farben stehen hier und hängen an keinem Design der Website.
   Seit 24.10.2026 in der neuen Automiq-Marke (Automiq Brand/brand/MARKE.md und tokens.css): Grund fast schwarz
   #05090B, Schrift #EAF4F2, ein einziger Akzent Türkis #4FD8C4 (vorher einfarbig Blau mit #2563EB). Schriften der
   Marke liegen in assets/fonts/automiq/ und heißen hier „AMQ …", damit sie keiner Schrift der Website in die Quere
   kommen; sie laden erst, wenn der Banner zu sehen ist.
   Wo der Banner steht (am linken Rand oder im Fuß), regelt die jeweilige Website; hier: assets/css/main.css.
   Der Banner ist ein Link: Die Regeln an der Wurzel heißen deshalb „a.amq", damit sie gegen allgemeine Regeln einer
   Website für Links (hier „.ftr a" im Fuß: Blockanzeige, gedämpfte Farbe) bestehen. Diese Datei lädt nach main.css.
   ============================================================================================ */
@font-face{font-family:"AMQ Montserrat";src:url("../fonts/automiq/montserrat-100-900-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"AMQ Plex Mono";src:url("../fonts/automiq/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
a.amq,.amq-huelle{
  --amq-grund: #05090B;
  --amq-flaeche: #0A1215;
  --amq-linie: rgba(234, 244, 242, 0.14);
  --amq-linie-2: rgba(234, 244, 242, 0.28);
  --amq-text: #EAF4F2;
  --amq-leise: #A7B8BB;
  --amq-neben: #7F9498;
  --amq-akzent: #4FD8C4;                    /* Türkis, der einzige Akzent */
  --amq-akzent-hover: #6BE3D1;
  --amq-auf-akzent: #03201C;
  --amq-schrift: "AMQ Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --amq-mono: "AMQ Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --amq-kurve: cubic-bezier(0.16, 1, 0.3, 1);
}
a.amq{
  position:relative;display:flex;box-sizing:border-box;overflow:hidden;isolation:isolate;
  color:var(--amq-text);background:var(--amq-grund);border:1px solid var(--amq-linie);border-radius:14px;
  font-family:var(--amq-schrift);text-decoration:none;text-align:left;
  transition:border-color .3s, box-shadow .3s, transform .3s var(--amq-kurve)}
/* weicher türkiser Schein links hinter dem Bild, nicht hinter dem Text (Marke: keine Verläufe hinter Schrift) */
a.amq::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 0% 50%, rgba(79, 216, 196, 0.14), transparent 70%)}
a.amq:hover,a.amq:focus-visible{color:var(--amq-text);border-color:var(--amq-akzent);box-shadow:0 24px 60px -22px rgba(79, 216, 196, 0.45)}
a.amq:focus-visible{outline:2px solid var(--amq-akzent);outline-offset:3px}
a.amq:active{transform:scale(.985)}

.amq__tag{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--amq-mono);font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amq-leise);background:rgba(5, 9, 11, 0.72);border:1px solid var(--amq-linie);
  border-radius:999px;padding:2px 8px;pointer-events:none}
.amq__feld{display:block;position:relative;flex:0 0 auto}
.amq__feld canvas{display:block;width:100%;height:100%}
.amq__text{display:flex;flex-direction:column;min-width:0}
.amq__marke{display:block;width:auto;height:16px;align-self:flex-start}
.amq__zeile{display:block;color:var(--amq-text);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.amq__dot{color:var(--amq-akzent)}   /* das Schlusszeichen leuchtet türkis wie auf automiq.eu */

/* Die Leistungen wechseln: ein Fenster von einer Zeile, darin die Liste, die Zeile für Zeile nach oben rückt. */
.amq__dreh{display:block;height:1.5em;overflow:hidden;color:var(--amq-akzent);font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.amq__dreh > span{display:block;animation:amq-dreh 8s var(--amq-kurve) infinite}
.amq__dreh b{display:block;font-weight:inherit;white-space:nowrap}
.amq__dreh b::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--amq-akzent);vertical-align:.12em}
@keyframes amq-dreh{
  0%,26%{transform:translateY(0)}
  33%,59%{transform:translateY(-25%)}
  66%,92%{transform:translateY(-50%)}
  100%{transform:translateY(-75%)}
}

.amq__knopf{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:40px;padding:8px 14px;border-radius:999px;
  background:var(--amq-akzent);color:var(--amq-auf-akzent);font-size:14px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;
  transition:background .3s}
.amq__knopf i{font-style:normal;transition:transform .3s var(--amq-kurve)}
.amq:hover .amq__knopf,.amq:focus-visible .amq__knopf{background:var(--amq-akzent-hover)}
.amq:hover .amq__knopf i,.amq:focus-visible .amq__knopf i{transform:translateX(4px)}

/* ---- Fassung „Seite": hochkant, so groß wie der Banner von Kelag am anderen Rand (Michael 13.10.2026, Layer: „mache den
   Banner gleich wie der von der Kelag"): 160 × 600 px Fläche, mit Rahmen 162 × 602. Vorher 160 × 360. ---- */
a.amq--seite{flex-direction:column;width:162px;height:602px;padding:0}
.amq--seite .amq__feld{flex:1 1 0;min-height:0}
.amq--seite .amq__text{flex:0 0 auto;gap:9px;padding:0 14px}
.amq--seite .amq__zeile{font-size:19px;line-height:1.14}
.amq--seite .amq__knopf{margin:12px 12px 14px}

/* ---- Fassung „Fuß": liegender Streifen ---- */
a.amq--fuss{align-items:center;gap:var(--sp-4, 16px);padding:12px 16px 12px 8px}
.amq--fuss .amq__feld{width:96px;height:84px}
.amq--fuss .amq__text{flex:1 1 auto;gap:5px}
.amq--fuss .amq__zeile{font-size:clamp(17px, 1.1rem + .4vw, 22px);line-height:1.15}
.amq--fuss .amq__knopf{flex:0 0 auto;margin-right:54px} /* rechts oben steht „Anzeige" */
@media (max-width:640px){
  a.amq--fuss{flex-wrap:wrap;gap:6px 12px;padding:10px 12px 12px 6px}
  .amq--fuss .amq__feld{width:84px;height:76px}
  .amq--fuss .amq__text{flex:1 1 0;padding-right:4px}
  .amq--fuss .amq__marke{margin-top:22px}   /* unter „Anzeige“ rechts oben; die Wortmarke ist seit 24.10.2026 breiter */
  .amq--fuss .amq__knopf{flex:1 1 100%;margin:4px 0 0 6px;min-height:44px}
}

/* Ohne Bewegung (Systemeinstellung oder „Animationen aus" der Website): alle drei Leistungen stehen nebeneinander. */
@media (prefers-reduced-motion: reduce){
  .amq__dreh{height:auto}
  .amq__dreh > span{display:flex;flex-wrap:wrap;gap:0 10px;animation:none}
  .amq__dreh b:last-child{display:none}
  a.amq,.amq__knopf i{transition:none}
}
.reduce-motion .amq__dreh{height:auto}
.reduce-motion .amq__dreh > span{display:flex;flex-wrap:wrap;gap:0 10px}
.reduce-motion .amq__dreh b:last-child{display:none}
@media print{a.amq{display:none}}
/* ---- Fassung „Seite" mit Film (16.10.2026, Fassung 3 vom 18.10.2026). Wird an assets/css/automiq-banner.css angehängt.
   Der Film füllt die ganze Fläche (160 × 600). Als HTML darüber liegen: oben links die Wortmarke und oben rechts
   „Anzeige" (Absender und Werbung in jedem Bild erkennbar), unten der Knopf, rechts darüber der Pausenknopf. Den
   Hinweis „KI-generierte Bilder" wollte Michael am 19.10.2026 nicht. Der Pausenknopf liegt außerhalb des Links, deshalb
   die Hülle .amq-huelle. Nach dem letzten Durchlauf und ohne Bewegung zeigt .amq__ende das Schlussbild. ---- */
.amq-huelle{position:relative;display:block;width:max-content}
a.amq--film{justify-content:flex-end}
.amq--film .amq__film,.amq--film .amq__ende{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.amq--film .amq__film{background:var(--amq-grund)}
.amq--film .amq__ende{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.ist-ende .amq--film .amq__ende,.ist-ruhig .amq--film .amq__ende{opacity:1;visibility:visible;transition:opacity .5s}
.ist-ruhig .amq--film .amq__ende{transition:none}
/* Kopf der Fassung „Seite": „Anzeige" als Etikett, darunter die Wortmarke in Mindestbreite (96 px, MARKE.md) */
.amq--film .amq__tag{top:10px;left:11px;right:auto;padding:0;border:0;background:none;font-size:9px;line-height:1;letter-spacing:.24em}
.amq--film .amq__oben{position:absolute;z-index:2;top:24px;left:11px;display:block;width:96px;height:auto}
.amq--film .amq__knopf{position:relative;z-index:1;margin:12px 10px 14px;padding:8px 10px;gap:5px;font-size:12px;letter-spacing:0}

.amq-huelle .amq__pause{position:absolute;z-index:3;right:10px;bottom:74px;display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;padding:0;margin:0;
  border-radius:50%;border:1px solid var(--amq-linie-2);background:rgba(5, 9, 11, 0.72);
  color:var(--amq-text);cursor:pointer}
.amq-huelle .amq__pause:hover,.amq-huelle .amq__pause:focus-visible{border-color:var(--amq-akzent)}
.amq-huelle .amq__pause:focus-visible{outline:2px solid var(--amq-akzent);outline-offset:2px}
.amq-huelle .amq__pause svg{display:block;width:11px;height:11px;fill:currentColor}
.amq-huelle .amq__pause .amq__spiel{display:none}
.amq-huelle.ist-angehalten .amq__pause .amq__halt,.amq-huelle.ist-ende .amq__pause .amq__halt{display:none}
.amq-huelle.ist-angehalten .amq__pause .amq__spiel,.amq-huelle.ist-ende .amq__pause .amq__spiel{display:block}
.amq-huelle.ist-ruhig .amq__pause{display:none}
@media print{.amq-huelle{display:none}}

/* ---- Fassung „Fuß" mit Film (19.10.2026): der Streifen unten, den alle Fenster unter 1600 px zeigen. Links der
   quadratische Film, daneben Wortmarke, die Zeile des Kapitels und das Kapitel, rechts (am Handy darunter) der Knopf.
   Die Reihe steht oben bündig, damit der Pausenknopf fest über der unteren linken Ecke des Films sitzt. ---- */
.amq-huelle--fuss{width:auto}
a.amq--filmfuss{align-items:flex-start}
.amq--filmfuss .amq__feld{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;background:var(--amq-grund)}
.amq--filmfuss .amq__film,.amq--filmfuss .amq__ende{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.amq--filmfuss .amq__ende{opacity:0;visibility:hidden}
.ist-ruhig .amq--filmfuss .amq__ende{opacity:1;visibility:visible}
.amq--filmfuss .amq__text{align-self:center}
.amq--filmfuss .amq__zeile{transition:opacity .25s}
.amq--filmfuss .amq__kapitel{display:block;height:1.5em;color:var(--amq-leise);font-family:var(--amq-mono);font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap;transition:opacity .25s}
.amq--filmfuss .amq__kapitel:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--amq-akzent);vertical-align:.12em}
.amq--filmfuss .amq__knopf{align-self:center;padding:8px 14px}
.amq-huelle--fuss .amq__pause{left:13px;right:auto;top:81px;bottom:auto;width:26px;height:26px}
@media (max-width:640px){
  .amq--filmfuss .amq__feld{width:84px;height:84px}
  .amq--filmfuss .amq__zeile{min-height:2.3em}
  .amq--filmfuss .amq__knopf{align-self:stretch}
  .amq-huelle--fuss .amq__pause{left:10px;top:67px}
}
@media (prefers-reduced-motion: reduce){.amq--filmfuss .amq__zeile,.amq--filmfuss .amq__kapitel{transition:none}}