/*
Theme Name:   East Side Fab
Template:     astra
Author:       Pixelarbeiter
Version:      1.0.0
Text Domain:  eastsidefab
*/


/* =========================================================================
   East Side Fab – Mobile-Korrekturen
   Child-Theme: eastsidefab
   Stand: 18.09.2026
   -------------------------------------------------------------------------
   Einbau: entweder ans Ende der style.css des Child-Themes anhängen
   oder als eigene Datei unter /assets/css/ ablegen und in der functions.php
   nach dem Parent-Stylesheet einreihen (Snippet am Dateiende).

   Breakpoints:
   921px = Astra Header-Breakpoint (ab hier greift .ast-header-break-point)
   782px = Umschaltpunkt der WP-Adminbar (32px -> 46px hoch)
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) Logo klebt fix über dem Inhalt / Menü nicht mehr erreichbar

   Ursache: im Inline-CSS steht ohne Media Query
       .site-logo-img { position: fixed; top: 0; left: 0 !important; }
   Mobil schwebt das Logo dadurch transparent über jedem Abschnitt, während
   der restliche Header inkl. Hamburger wegscrollt.

   Lösung: Logo mobil wieder in den Header, dafür die komplette Headerleiste
   fixieren – damit bleibt auch das Menü jederzeit erreichbar.
   ------------------------------------------------------------------------- */
@media (max-width: 921px) {

  .ast-header-break-point .site-logo-img {
    position: static !important;
    top: auto !important;
    left: auto !important;
  }

  .ast-header-break-point #masthead .ast-main-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08);
  }

  /* Platzhalter, damit der erste Abschnitt nicht unter den Header rutscht.
     Falls der Header transparent über dem Hero liegen soll: diese Regel
     einfach auskommentieren. */
  .ast-header-break-point #masthead {
    padding-top: 96px;
  }

  /* eingeloggte Ansicht: Adminbar berücksichtigen */
  .admin-bar.ast-header-break-point #masthead .ast-main-header-wrap {
    top: 32px;
  }
}

@media (max-width: 782px) {
  .admin-bar.ast-header-break-point #masthead .ast-main-header-wrap {
    top: 46px;
  }
}


/* -------------------------------------------------------------------------
   2) Abschnitt "East Side Fab. / Wer steckt hinter dem East Side Fab?"
      – Counter-Block und zwei Absätze liegen außerhalb des Bildschirms

   Ursache: der innere Wrapper hat flex-direction: column + flex-wrap: wrap,
   der Elternabschnitt eine min-height von 700px. Der Inhalt ist höher als
   der Container, also bricht Flexbox in eine zweite und dritte SPALTE um –
   bei x = 385px und x = 760px, also neben dem Viewport.
   Messbar: document.body.scrollWidth = 1115px statt 375px,
   dazu ca. 700px leere weiße Fläche im Abschnitt.

   Lösung: Höhenzwang mobil aufheben, Umbruch unterbinden.
   ------------------------------------------------------------------------- */
@media (max-width: 921px) {

  .wp-block-uagb-container.uagb-block-8c7a61af {
    min-height: 0 !important;
    height: auto !important;
  }

  .wp-block-uagb-container.uagb-block-8c7a61af > .uagb-container-inner-blocks-wrap {
    flex-wrap: nowrap !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Der Counter-Block selbst darf nicht breiter als der Viewport werden */
  .uagb-block-8c7a61af .wp-block-uagb-counter {
    max-width: 100% !important;
  }
}

/* Sicherheitsnetz gegen denselben Fehler in weiteren Abschnitten.
   Bei Bedarf aktivieren – hebt mobil ALLE erzwungenen Abschnittshöhen auf:

@media (max-width: 921px) {
  .wp-block-uagb-container.uagb-is-root-container {
    min-height: 0 !important;
    height: auto !important;
  }
}
*/


/* -------------------------------------------------------------------------
   3) Social-Leiste (WP Floating Menu) überlagert den Inhalt

   Sie belegt fix 90px am rechten Rand (285–375px = 24% der Bildschirm-
   breite) und liegt über Event-Titeln, Bildern und über den Buttons
   "Workshop besuchen." und "Team kennenlernen.".

   Lösung: auf dem Smartphone ausblenden – die Social-Links stehen ohnehin
   im Footer ("linkedIn. youtube. insta. facebook.").
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .wpfm-menu-nav.wpfm-position-right {
    display: none !important;
  }
}

/* Alternative, falls die Leiste sichtbar bleiben soll: verkleinern und
   an den unteren Rand rücken statt ausblenden:

@media (max-width: 782px) {
  .wpfm-menu-nav.wpfm-position-right {
    transform: scale(0.72);
    transform-origin: bottom right;
    top: auto !important;
    bottom: 12px;
  }
}
*/


/* -------------------------------------------------------------------------
   4) Seitliche CTA-Reiter schneiden Text an

   .esf-cta-outer--left ragt mit translateX(calc(-100% + 40px)) nur 40px ins
   Bild, das Label liegt außerhalb. Mobil verdeckt der gelbe Kreis z.B. das
   "E" von "East Side Fab." in der Überschrift.

   Lösung: beide Reiter mobil ausblenden. Die Hero-Buttons
   ("Member werden.", "Projekt starten.") decken dieselben Ziele ab.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .esf-cta-outer {
    display: none !important;
  }
}


/* -------------------------------------------------------------------------
   5) Kleinkram
   ------------------------------------------------------------------------- */
@media (max-width: 921px) {

  /* Event-Titel dürfen umbrechen statt auf "…" gekürzt zu werden */
  .esfsection h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Fördererlogos im Footer sauber untereinander statt in einer
     tabellenartigen Zwei-Spalten-Box */
  .site-footer figure.wp-block-table,
  .site-footer .wp-block-table table {
    width: 100% !important;
    display: block !important;
  }
  .site-footer .wp-block-table td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    text-align: center;
  }
}


/* =========================================================================
   Einbindung als eigene Datei (functions.php des Child-Themes):

   add_action( 'wp_enqueue_scripts', function () {
       wp_enqueue_style(
           'esf-mobile-fixes',
           get_stylesheet_directory_uri() . '/assets/css/esf-mobile-fixes.css',
           array( 'astra-theme-css' ),
           filemtime( get_stylesheet_directory() . '/assets/css/esf-mobile-fixes.css' )
       );
   }, 20 );

   Wichtig: Astra gibt das Customizer-CSS inline im <head> aus, also nach den
   Stylesheets. Deshalb stehen bei den Überschreibungen oben die !important-
   Flags – ohne sie greift Punkt 1 nicht.
   ========================================================================= */

.texttippen .tt-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition:
    opacity   .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter    .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.texttippen.tt-run .tt-word {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .texttippen .tt-word {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}