/* ------------------------------------------------------------------
   AAE Digital – Reparatur-Layer fuer den Wix-Export
   Wird auf jeder Seite als /aae-fix.css eingebunden.
   ------------------------------------------------------------------ */

/* 1. Wix pausiert alle Einblend-Animationen und startet sie per JS beim
      Scrollen. Ohne Wix-JS bleiben sie auf Keyframe 0% stehen -> opacity:0.
      Das ist der Grund, warum Projekte, Bilder und ganze Sections
      unsichtbar waren. */
*,
*::before,
*::after {
  animation-play-state: running !important;
}

/* 2. Sprungmarken fuer ÜBER UNS / KONTAKT ------------------------------ */
html {
  scroll-behavior: smooth;
}

.aae-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 3. Honeypot des Netlify-Formulars ----------------------------------- */
.aae-hp {
  display: none !important;
}

/* 4. Mobiles Menue ----------------------------------------------------- */
.aae-burger {
  display: none;
  position: fixed;
  top: 4px;
  right: 10px;
  z-index: 2147483000;
  width: 42px;
  height: 42px;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.aae-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
}

/* Offen: weisses X auf dunklem Menue (vorher schwarz auf schwarz) */
.aae-burger[aria-expanded="true"] span {
  background: #fff;
}
.aae-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.aae-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.aae-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.aae-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  display: flex;
  flex-direction: column;
  padding: 80px 24px 40px;
  background: #06060c;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
  font-family: poppins, sans-serif;
}

.aae-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.aae-mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.aae-mobile-nav a.is-sub {
  font-size: 16px;
  padding: 11px 0 11px 18px;
  color: rgba(255, 255, 255, .7);
}

.aae-mobile-nav a:hover,
.aae-mobile-nav a:focus-visible {
  color: #8e90ff;
}

.aae-mobile-nav__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
}

.aae-mobile-nav .aae-mobile-nav__btn {
  display: inline-block;
  padding: 14px 26px;
  border: 0;
  border-radius: 4px;
  background: #595cef;
  color: #fff;
  font-size: 16px;
}

.aae-mobile-nav .aae-mobile-nav__btn:hover,
.aae-mobile-nav .aae-mobile-nav__btn:focus-visible {
  background: #6f72ff;
  color: #fff;
}

.aae-mobile-nav .aae-mobile-nav__mail {
  border: 0;
  padding: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
}

body.aae-nav-open {
  overflow: hidden;
}

@media (max-width: 750px) {
  .aae-burger { display: flex; }
}

@media (min-width: 751px) {
  .aae-mobile-nav { display: none; }
}

/* 5. Referenzen-Slider: Pfeile sichtbar und klickbar halten ------------- */
.aae-slide-hidden {
  visibility: hidden !important;
}
.aae-slide-active {
  visibility: visible !important;
}

/* 6. Einzelfall Matchday Designs: Wix berechnet den Abstand des
      Instagram-Buttons per JS aus der gemessenen Texthoehe. Ohne Wix-JS
      ueberlappt der Button den Textblock. Beide liegen in derselben
      Grid-Zelle - hier untereinander statt uebereinander. */
.comp-moexmkg3-container {
  grid-template-rows: auto auto !important;
  align-content: start !important;
}
.comp-moexmkg3-container > * {
  grid-area: auto !important;
  align-self: start !important;
}
.comp-moexmkge {
  margin-top: 20px !important;
}

/* 7. Header-Versatz -------------------------------------------------------
      Der Export reserviert oben 30 px fuer das Werbebanner des
      Wix-Gratis-Plans (--wix-ads-height). Ohne Banner blieb dort ein Spalt,
      durch den beim Scrollen der Seiteninhalt ueber dem Header sichtbar war. */
:root,
:host {
  --wix-ads-height: 0px !important;
  --wix-ads-top-height: 0px !important;
  --sticky-offset: 0px !important;
}

/* 8. Header: Logo hatte einen negativen Rand und klebte links am Rand ---- */
header [id$="_r_comp-liu7a4zw"] {
  margin-left: 28px !important;
}

@media (max-width: 750px) {
  header [id$="_r_comp-liu7a4zw"] {
    margin-left: 16px !important;
  }
}

/* Header bleibt beim Scrollen sichtbar – bisher nur auf der Startseite.
   Auf den Unterseiten scrollte er weg, waehrend der Menue-Button (fixiert)
   dunkel auf dunklem Grund stehen blieb. */
div:not([id$="-pinned-layer"]) > header {
  position: sticky !important;
  top: 0;
  z-index: 60;
}

/* 9. Dropdown "Dienstleistungen" ----------------------------------------
      Das Untermenue war im Export leer. aae-fix.js baut es neu auf. */
.aae-dd {
  position: fixed;
  z-index: 2147482500;
  min-width: 250px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(6, 6, 12, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.aae-dd.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aae-dd a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: #111;
  font-family: poppins, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.aae-dd a:hover,
.aae-dd a:focus-visible {
  background: rgba(89, 92, 239, .1);
  color: #595cef;
}

.aae-dd-toggle svg {
  transition: transform .2s ease;
}

.aae-dd-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 10. Kontaktbereich Startseite: E-Mail brach mitten im Wort um ---------- */
.aae-mail-host {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: start !important;
}

.aae-mail {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}

.aae-mail__label {
  font-family: poppins, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.aae-mail a {
  font-family: poppins, sans-serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}

.aae-mail a:hover,
.aae-mail a:focus-visible {
  color: #8e90ff;
  border-color: #8e90ff;
}

/* "Kontaktiere uns" im Formular war auf dem Handy so gross, dass es mitten
   im Wort umbrach (Kont-aktie-re). */
form h2,
[data-hook="form-title"] h2 {
  font-size: clamp(40px, 7.4vw, 104px) !important;
  line-height: 1.05 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* 11. Projekt-Akkordeon: Inhalte, die im Export fehlten ------------------
       Text buendig mit den Titeln (40 px) und auf dem Handy lesbar gross. */
.wixui-accordion__container > div {
  padding: 2px 40px 30px !important;
  min-height: 0 !important;
  grid-template-rows: auto !important;
}

.wixui-accordion__container [data-testid="richTextElement"] {
  max-width: 900px;
}

.wixui-accordion__container .wixui-rich-text__text {
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.7 !important;
}

.aae-acc p {
  margin: 0 0 .9em;
}

.aae-acc p:last-child,
.aae-acc ul:last-child {
  margin-bottom: 0;
}

.aae-acc ul {
  margin: 0 0 .9em;
  padding: 0;
  list-style: none;
}

.aae-acc li {
  position: relative;
  padding-left: 1.3em;
  margin: 0 0 .45em;
}

.aae-acc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: #595cef;
}

.wixui-accordion__item > div > button {
  cursor: pointer;
}

@media (max-width: 750px) {
  .wixui-accordion__item > div > button {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .wixui-accordion__container > div {
    padding: 2px 20px 24px !important;
  }
}

/* 12. Footer -------------------------------------------------------------
      Der Wix-Footer brach auf dem Handy Woerter mitten durch
      ("Dienstl-eistungen") und hatte grosse Leerflaechen. Ersetzt durch
      einen eigenen, responsiven Footer – auf allen Seiten identisch. */
.aae-footer {
  /* Wix setzt auf dem Footer-Container pointer-events:none – ohne diese
     Zeile erbten alle Links das und waren nicht klickbar. */
  pointer-events: auto;
  background: #06060c;
  color: rgba(255, 255, 255, .72);
  font-family: poppins, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.aae-footer a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}

.aae-footer a:hover,
.aae-footer a:focus-visible {
  color: #fff;
}

.aae-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 32px 48px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

.aae-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
}

.aae-footer__logo svg {
  width: 44px;
  height: auto;
  fill: currentColor;
}

.aae-footer__claim {
  margin: 18px 0 6px;
  color: #fff;
}

.aae-footer__text {
  margin: 0;
  max-width: 300px;
}

.aae-footer__title {
  margin: 0 0 16px;
  font-family: poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8e90ff;
}

.aae-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aae-footer__col li {
  margin: 0 0 10px;
}

.aae-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aae-footer__social svg {
  width: 16px;
  height: 16px;
}

.aae-footer__bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 32px 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.aae-footer__bottom p {
  margin: 0;
}

.aae-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.aae-footer__bottom a {
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 960px) {
  .aae-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .aae-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .aae-footer__inner {
    grid-template-columns: 1fr;
    padding: 56px 20px 36px;
    gap: 32px;
  }
  .aae-footer__bottom {
    padding: 20px 20px 84px;
    flex-direction: column;
  }
}

/* 13. Handy: Woerter nicht mitten durchbrechen, sondern sauber trennen --- */
@media (max-width: 750px) {
  .wixui-rich-text__text {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Kennzahl-Karten der Projektseiten: Text passte nicht in die schmalen
     Spalten ("Nutzererfahrun-g") */
  .wixui-repeater__item p.font_9 {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* 14. Handy: Inhalte, die Wix mobil ausgeblendet hatte --------------------
       Seitentitel, die Marketing-Pakete samt Preistabelle und die
       Abo-Buttons der Matchday-Seite waren auf dem Handy per
       --l_display:none versteckt. Die Seiten wirkten dadurch unvollstaendig
       (z. B. "Projekte" ohne Ueberschrift, Marketing-Seite ohne Preise). */
@media (max-width: 750px) {
  /* Seitentitel der Hero-Bereiche */
  #comp-mn3d11mr4,
  #comp-mo05bhtf,
  #comp-mo06gk4x,
  #comp-mo022jab,
  #comp-mta93u9p,
  #comp-mffvs6zo,
  #comp-mn4kwxon1,
  #comp-mn4lbtmk,
  #comp-mn4lg8nk2,
  #comp-lyldxvlh,
  #comp-moeygau3,
  /* Marketing: Pakete + Preistabelle */
  #comp-mfkaiq91,
  #comp-mfkak70c,
  /* "Kostenlose Beratung buchen:" (Marketing, Webseite erstellen) */
  #comp-lyls6rb6,
  #comp-mfn3ibpz,
  /* Matchday: Abo-Buttons */
  [id^="comp-mof00j6b__"] {
    --l_display: unset !important;
  }

  /* Titel und Untertitel lagen in derselben Grid-Zelle -> untereinander */
  :has(> #comp-mn3d11mr4),
  :has(> #comp-mo05bhtf),
  :has(> #comp-mo06gk4x),
  :has(> #comp-mo022jab),
  :has(> #comp-mta93u9p),
  :has(> #comp-mffvs6zo),
  :has(> #comp-mn4kwxon1),
  :has(> #comp-mn4lbtmk),
  :has(> #comp-mn4lg8nk2),
  :has(> #comp-lyldxvlh),
  :has(> #comp-moeygau3) {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  #comp-mn3d11mr4, #comp-mo05bhtf, #comp-mo06gk4x, #comp-mo022jab,
  #comp-mta93u9p, #comp-mffvs6zo, #comp-mn4kwxon1, #comp-mn4lbtmk,
  #comp-mn4lg8nk2, #comp-lyldxvlh, #comp-moeygau3 {
    grid-area: 1 / 1 / 2 / 2 !important;
    align-self: end !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
  }

  #comp-mn3d11mr4 ~ [id^="comp-"], #comp-mo05bhtf ~ [id^="comp-"],
  #comp-mo06gk4x ~ [id^="comp-"], #comp-mo022jab ~ [id^="comp-"],
  #comp-mta93u9p ~ [id^="comp-"], #comp-mffvs6zo ~ [id^="comp-"],
  #comp-mn4kwxon1 ~ [id^="comp-"], #comp-mn4lbtmk ~ [id^="comp-"],
  #comp-mn4lg8nk2 ~ [id^="comp-"], #comp-lyldxvlh ~ [id^="comp-"],
  #comp-moeygau3 ~ [id^="comp-"] {
    grid-area: 2 / 1 / 3 / 2 !important;
    align-self: start !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  :is(#comp-mn3d11mr4, #comp-mo05bhtf, #comp-mo06gk4x, #comp-mo022jab,
      #comp-mta93u9p, #comp-mffvs6zo, #comp-mn4kwxon1, #comp-mn4lbtmk,
      #comp-mn4lg8nk2, #comp-lyldxvlh, #comp-moeygau3) ~ [id^="comp-"] [data-testid="richTextElement"] {
    margin: 0 !important;
    width: 100% !important;
  }

  :is(#comp-mn3d11mr4, #comp-mo05bhtf, #comp-mo06gk4x, #comp-mo022jab,
      #comp-mta93u9p, #comp-mffvs6zo, #comp-mn4kwxon1, #comp-mn4lbtmk,
      #comp-mn4lg8nk2, #comp-lyldxvlh, #comp-moeygau3) ~ [id^="comp-"] :is(h1, h2, h3, h4, h5, h6, p) {
    text-align: left !important;
  }

  :is(#comp-mn3d11mr4, #comp-mo05bhtf, #comp-mo06gk4x, #comp-mo022jab,
      #comp-mta93u9p, #comp-mffvs6zo, #comp-mn4kwxon1, #comp-mn4lbtmk,
      #comp-mn4lg8nk2, #comp-lyldxvlh, #comp-moeygau3) :is(h1, h2, h3, p, span) {
    font-size: clamp(32px, 9.5vw, 44px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }

  :is(#comp-mn3d11mr4, #comp-mo05bhtf, #comp-mo06gk4x, #comp-mo022jab,
      #comp-mta93u9p, #comp-mffvs6zo, #comp-mn4kwxon1, #comp-mn4lbtmk,
      #comp-mn4lg8nk2, #comp-lyldxvlh, #comp-moeygau3) [data-testid="richTextElement"] {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Startseite: "Ueber uns"-Text war mobil versteckt (Rasterzeile 0 px),
     obwohl der Menuepunkt "Ueber uns" genau dorthin springt. */
  .c1dmp-container {
    grid-template-rows: auto auto 0px auto auto auto auto !important;
  }
  #comp-lyh9q1fo {
    --l_display: unset !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #comp-lyh9qarn,
  #comp-lyh9qau2 {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #comp-lyh9qarn .comp-lyh9qarn-container {
    padding: 48px 20px 8px !important;
  }
  #comp-lyh9tstn {
    width: 100% !important;
    margin: 0 !important;
  }
  #comp-lyh9tstn :is(p, h1, h2, h3, h4, h5, h6, span) {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  /* Marketing: Pakete oben, Preistabelle darunter und seitlich scrollbar */
  :has(> #comp-mfkaiq91) {
    grid-template-rows: auto auto !important;
  }
  #comp-mfkaiq91 {
    grid-area: 1 / 1 / 2 / 2 !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  #comp-mfkaiq91 :is(p, li, span) {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  #comp-mfkak70c {
    grid-area: 2 / 1 / 3 / 2 !important;
    margin: 32px 20px 0 !important;
    width: calc(100% - 40px) !important;
    height: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #comp-mfkak70c table {
    min-width: 640px;
  }
  #comp-mfkak70c .yW043o {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Matchday: Abo-Buttons auf Kartenbreite */
  [id^="comp-mof00j6b__"] {
    width: auto !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [id^="comp-mof00j6b__"] a {
    width: 100% !important;
    box-sizing: border-box;
  }
  [id^="comp-mof00j6b__"] a * {
    font-size: 15px !important;
    white-space: nowrap;
  }

  /* Projektkacheln: Bild und Beschriftung lagen in derselben Grid-Zelle,
     der Text stand dadurch unleserlich auf dem Bild. */
  .comp-mn3d0bpl.wixui-repeater__item {
    grid-template-rows: auto auto !important;
  }
  .comp-mn3d0bpl.wixui-repeater__item > .comp-mn3d0bpn6 {
    grid-area: 1 / 1 / 2 / 2 !important;
    margin-top: 0 !important;
  }
  .comp-mn3d0bpl.wixui-repeater__item > .comp-mn3d0bpt {
    grid-area: 2 / 1 / 3 / 2 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
}

/* 15. Kontaktformular: Laendervorwahl-Auswahl im Telefonfeld ------------
       Das Auswahlmenue wurde von Wix per JS geoeffnet und war ohne Wix-JS
       funktionslos. Die Nummer kann direkt mit +41 eingegeben werden. */
form [data-hook="prefix"]:has([data-hook="country-selector-trigger"]) {
  display: none !important;
}

form input[type="tel"] {
  padding-left: 12px !important;
}

/* 16. Tablet (751-1000 px) -------------------------------------------------
       Formular-Box war um -130 px nach oben verschoben und lag ueber der
       E-Mail-Adresse; Kurztext im Hero der Projektseiten war ~11 px klein. */
@media (min-width: 751px) and (max-width: 1000px) {
  #comp-lylssphj5 {
    margin-top: 0 !important;
  }
  #SITE_CONTAINER main > section:first-child h5.font_5,
  #SITE_CONTAINER #comp-mo06gk514 p,
  #SITE_CONTAINER main > section:first-child h5.font_5 * {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}