/* Fix für WPBakery-Bug: body.vc_non_responsive aktiviert eine Regel
   `.vc_non_responsive .vc_row .vc_hidden-sm { display: none !important }`
   ohne Media-Query, die Desktop-Texte auch bei breitem Fenster versteckt.
   Hier mit höherer Spezifität überschreiben. */

@media (min-width: 992px) {
  body.vc_non_responsive .vc_row .vc_hidden-sm.vc_hidden-xs,
  body.vc_non_responsive .vc_row .vc_hidden-sm,
  body .vc_row .vc_hidden-sm.vc_hidden-xs {
    display: block !important;
  }
}

/* Startseite-Hero: genau EINE Überschrift pro Viewport.
   .start-mobil ist die Handy-Variante (nur <768px), .start-h1 die
   Desktop/Tablet-Variante (>=768px). Wegen body.vc_non_responsive griff
   WPBakerys vc_hidden-* nicht zuverlässig (Doppeltext im Tablet-Bereich
   768–991px) – daher hier breakpoint-fest erzwingen, unabhängig von vc_hidden. */
@media (min-width: 768px) {
  /* Tablet/Desktop: nur die Desktop-Überschrift (start-h1).
     Höhere Spezifität als der vc_hidden-sm-Force-Show-Fix oben (0,3,1),
     damit .start-mobil ab 992px NICHT fälschlich wieder erscheint. */
  body.vc_non_responsive .niruk-start .start-mobil.vc_hidden-sm,
  body .niruk-start .start-mobil {
    display: none !important;
  }
  body.vc_non_responsive .niruk-start .start-h1,
  body .niruk-start .start-h1 {
    display: block !important;
  }
}
@media (max-width: 767px) {
  /* Handy: nur die Mobil-Überschrift (start-mobil). Diese muss aktiv
     eingeblendet werden, weil vc_non_responsive sie über .vc_hidden-sm
     sonst versteckt → sonst bliebe der Hero komplett ohne Text. */
  body.vc_non_responsive .niruk-start .start-mobil.vc_hidden-sm,
  body .niruk-start .start-mobil {
    display: block !important;
  }
  body.vc_non_responsive .niruk-start .start-h1,
  body .niruk-start .start-h1 {
    display: none !important;
  }
}

/* Akkordeon-Header auf About-Seite: linke und rechte Spalte gleich
   ausrichten. Im Original hat nur die rechte Spalte (.accordion-mobile)
   padding-top:0, die linke aber 20px Default → 20px Versatz.
   Hier vereinheitlicht für alle Bildschirmbreiten. */
.contact-creative .toggle-wraper,
.acordians.contact-creative .toggle-wraper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Akkordeon-Header auf About-Seite in der Breitenansicht.
   Force flexbox align-items: flex-start auf der Row UND der Spalte. */
@media (min-width: 992px) {
  /* Row mit Akkordeon: beide Spalten oben bündig */
  .vc_row-flex.vc_row-o-content-top {
    align-items: flex-start !important;
  }
  /* Spalten innen: keine zusätzliche Top-Padding/Margin */
  .vc_row-o-content-top > .wpb_column,
  .vc_row-o-content-top > .wpb_column > .vc_column-inner,
  .vc_row-o-content-top > .wpb_column > .vc_column-inner > .wpb_wrapper {
    align-self: flex-start !important;
  }
  /* Beide Akkordeon-Spalten haben gleiche Top-Padding (statt der 125px Default) */
  .vc_row-o-content-top .acordians.contact-creative {
    padding-top: 0 !important;
  }
  /* Items in beiden Spalten haben einheitliche Mindesthöhe */
  .contact-creative .toggle > .togglet,
  .contact-creative .toggle > .toggleta {
    min-height: 75px;
    box-sizing: border-box;
  }

  /* "+"-Icon direkt hinter den Text statt am rechten Spaltenrand */
  .contact-creative .toggle > .togglet,
  .contact-creative .toggle > .toggleta {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .contact-creative .toggle > .togglet img.toggle-closed,
  .contact-creative .toggle > .togglet img.toggle-open,
  .contact-creative .toggle > .toggleta img.toggle-closed,
  .contact-creative .toggle > .toggleta img.toggle-open {
    position: static !important;
    right: auto !important;
    top: auto !important;
    order: 2;
  }
}

/* Akkordeon-Inhalte beim Hover ausklappen (statt Klick).
   Gilt für alle Akkordeons (.acordians, .toggle-wraper) und alle Breiten. */
.acordians .toggle > .togglec,
.toggle-wraper .toggle > .togglec {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 1.2s ease, padding 0.9s ease;
}
.acordians .toggle:hover > .togglec,
.toggle-wraper .toggle:hover > .togglec {
  max-height: 1500px;
  padding-bottom: 20px !important;
}
/* + → − beim Hover (auch wenn .toggleta noch nicht durch Klick gesetzt ist) */
.acordians .toggle:hover > .togglet img.toggle-closed,
.toggle-wraper .toggle:hover > .togglet img.toggle-closed {
  display: none !important;
}
.acordians .toggle:hover > .togglet img.toggle-open,
.toggle-wraper .toggle:hover > .togglet img.toggle-open {
  display: block !important;
}

/* Burger-Menü-Verhalten:
   - Großer Desktop (≥1001px): horizontales Menü im schwarzen Balken (Original)
   - ≤1000px: 33%-Drawer rechts, beim Laden GESCHLOSSEN. Hier umgeschaltet,
     weil sonst der erste Menüpunkt (ABOUT) hinter dem großen Logo verschwindet.
     Steuerung über die Klasse .niruk-menu-open auf .list-container.
     Schließt automatisch nach Klick auf Menüpunkt. */
@media (max-width: 1000px) {
  /* Drawer im Ruhezustand: versteckt, rechts geparkt */
  body.onehomepage nav .list-container {
    visibility: hidden !important;
    background: #000 !important;
    width: 33% !important;
    min-width: 200px;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    height: auto !important;
    max-height: 100vh;
    padding-top: 75px;
    padding-bottom: 30px;
    z-index: 998;
    transform: translateX(100%);
    transition: transform 0.4s ease, visibility 0.4s ease;
  }
  /* Wenn vom User geöffnet: sichtbar + reingeschoben */
  body.onehomepage nav .list-container.niruk-menu-open {
    visibility: visible !important;
    transform: translateX(0);
  }
  /* Menü-Liste im Drawer normal positionieren (Original hat right:-100%) */
  body.onehomepage nav .list-container ul.header-menu,
  body.onehomepage nav .list-container ul#header_ul {
    right: 0 !important;
    left: 0 !important;
    position: relative !important;
    float: none !important;
    text-align: left !important;
    padding: 0 0 0 30px !important;
    height: auto !important;
    width: 100% !important;
    background: transparent !important;
  }
  body.onehomepage nav .list-container ul.header-menu li {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 0 !important;
  }
}

/* Logo im Burger-Bereich (≤1000px) mit Abstand zum Rand ins Bild setzen –
   wie auf dem Desktop. Die mobilen Original-Regeln (u.a.
   ".onehomepage .logo img {left:0;top:0}") rücken es sonst bündig an die
   obere/linke Kante. */
@media (max-width: 1000px) {
  .top-baner .logo {
    /* fließend: ~50px bei 1000px, proportional kleiner zu schmalen Breiten,
       Untergrenze 36px (damit es schmal nicht zu nah am Rand klebt) */
    left: clamp(36px, 5vw, 50px) !important;
    top: clamp(36px, 5vw, 50px) !important;
  }
  .onehomepage .logo img,
  .top-baner .logo img {
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    margin: 0 !important;
  }
}

/* ===== About-Seite (page-id-306): EINHEITLICHE Ausrichtung aller Content-
   Blöcke (Überschriften, Lauftexte, Bilder, Akkordeon, STORY) auf 10%–90%.
   [class*="vc_custom_"] erfasst ALLE Content-Zeilen automatisch (auch STORY);
   der Hero (.niruk-start) ist ausgenommen. Hohe Spezifität schlägt die
   Inline-vc_custom-<style> im <head>. Nur page-id-306, andere Seiten frei. ===== */

/* Alle Content-Zeilen: 10% links/rechts, keine Ränder. */
.page-id-306 .vc_row[class*="vc_custom_"]:not(.niruk-start) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10% !important;
  padding-right: 10% !important;
}
/* Spalten + Spalten-Inner horizontal auf 0 → Inhalt sitzt exakt an der
   10%-Kante. Bootstrap-Spalten-Padding (15px) inklusive. Akkordeon-Zeile
   ausgenommen, damit der 2-Spalten-Abstand erhalten bleibt. */
.page-id-306 .vc_row[class*="vc_custom_"]:not(.niruk-start):not(.vc_custom_1538403149778) > .wpb_column,
.page-id-306 .vc_row[class*="vc_custom_"]:not(.niruk-start):not(.vc_custom_1538403149778) > .wpb_column > .vc_column-inner {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Wrapper-Container intern links auf 0. */
.page-id-306 .career-wall .izotope-container,
.page-id-306 .vc_row[class*="vc_custom_"]:not(.niruk-start) .wpb_wrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Bilder (career-wall) haben einen festen inneren Links-Versatz, den keine
   Container-Nullung erreicht — daher gezielt ausgleichen, damit die Bilder
   bündig mit Überschrift/Lauftext starten. 2-Spalten (>500px): ~16px.
   1-Spalte (≤500px): der Versatz ist größer (~26px). */
.page-id-306 .career-wall {
  padding-left: 0 !important;
  margin-left: -16px !important;
}
@media (max-width: 500px) {
  .page-id-306 .career-wall {
    margin-left: -26px !important;
  }
}
/* Akkordeon: erste Spalte bündig bei 10%; 2-Spalten-Abstand (margin) bleibt. */
.page-id-306 .vc_row.vc_custom_1538403149778 > .wpb_column > .vc_column-inner {
  padding-left: 0 !important;
}

/* Feinschliff Mobil: Der Mobil-Lauftext von PHILOSOPHY/CREATION (Zeile
   1534931538708) sitzt ~7px weiter rechts als die Überschrift (die wie STORY
   korrekt sitzt). Hier per margin nach links an die Überschrift angeglichen.
   STORY + Desktop bleiben unberührt. (margin wirkt hier, padding nicht.) */
@media (max-width: 767px) {
  .page-id-306 .vc_row.vc_custom_1534931538708 .we-do-detail {
    margin-left: -7px !important;
  }
}

/* Texte überall linksbündig (Original setzt .headind-block bei
   ≤768px auf text-align: center, deshalb hier inkl. Container
   und in der Media-Query überschreiben). */
.headind-block,
.range-block,
.we-do-detail,
.headind-block p,
.range-block p,
.we-do-detail p,
.we-do-detail span {
  text-align: left !important;
}
@media (max-width: 768px) {
  .headind-block,
  .range-block,
  .we-do-detail,
  .headind-block p,
  .range-block p,
  .we-do-detail p {
    text-align: left !important;
  }
}
/* Zitate (blockquote) und Buttons behalten ihr Original-Alignment */
.we-do-detail blockquote,
.we-do-detail blockquote p,
.headind-block blockquote,
.headind-block blockquote p {
  text-align: inherit !important;
}
/* Hero-Überschrift Startseite: Original hat font-size:60px ABER
   line-height:20px (style.css), sodass die zweite Zeile beim Umbruch
   über die erste läuft. Hier auf eine lesbare Zeilenhöhe setzen. */
.niruk-start .headind-block h1,
.niruk-start .headind-block h1 a {
  line-height: 1.15 !important;
}

/* Mobil-Hero-Überschrift "Diving into processes. Materialising ideas."
   immer horizontal zentrieren (überschreibt den globalen Linksbündig-Fix). */
.niruk-start .start-mobil .headind-block,
.niruk-start .start-mobil .range-block,
.niruk-start .start-mobil .we-do-detail,
.niruk-start .start-mobil .we-do-detail p,
.niruk-start .start-mobil .headind-block h1,
.niruk-start .start-mobil .headind-block h1 a {
  text-align: center !important;
}

/* Desktop-Hero-Überschrift ("Diving into the process of creation. ...")
   IMMER einzeilig: die Schrift skaliert fließend mit der Fensterbreite
   (max. 60px), sodass die Zeile in jeder Größe passt und nie umbricht.
   Zentriert unter dem Bild — dafür wird der 20%-Linkseinzug der Spalte
   aufgehoben und der Text auf center gestellt. */
.niruk-start .start-h1 .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.niruk-start .start-h1 .headind-block,
.niruk-start .start-h1 .range-block,
.niruk-start .start-h1 .we-do-detail,
.niruk-start .start-h1 .we-do-detail p,
.niruk-start .start-h1 .headind-block h1,
.niruk-start .start-h1 .headind-block h1 a {
  text-align: center !important;
}
.niruk-start .start-h1 .headind-block h1,
.niruk-start .start-h1 .headind-block h1 a {
  font-size: min(60px, 2.2vw) !important;
  white-space: nowrap !important;
}

/* Buttons (GET IN TOUCH usw.) immer horizontal mittig auf der Seite */
.we-do-detail p:has(button),
.we-do-detail p:has(.making-of),
.headind-block p:has(button),
.headind-block p:has(.making-of),
.range-block p:has(button) {
  text-align: center !important;
}

/* Bildergrids responsive: Isotope durch CSS Grid ersetzen, damit es
   bei Resize keine Sprünge gibt. Gilt für .career-wall und alle anderen
   izotope-container (außer dem Portfolio-Grid, das hat eine eigene Regel).
   - Desktop/Tablet: 4 Spalten; w_50 spannt 2, w_25 spannt 1
   - Handy (≤768px): 2 Spalten, alle Items 1 Spalte breit */
.career-wall {
  text-align: left !important;
}
/* 2-Spalten-Layout via Flexbox. Container hat zwei Spalten-Wrapper
   (.niruk-col-left, .niruk-col-right), die per JS gefüllt werden:
   ungerade Items links, gerade rechts. Beide Spalten starten oben
   bündig, Bilder behalten Originalproportionen, gleichmäßige Abstände. */
.career-wall .izotope-container,
.izotope-container:not(.portfolio-grid):not(.w_100) {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
}
.career-wall .izotope-container .grid-sizer,
.izotope-container:not(.portfolio-grid):not(.w_100) .grid-sizer {
  display: none !important;
}
.career-wall .izotope-container .niruk-col,
.izotope-container:not(.portfolio-grid):not(.w_100) .niruk-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.career-wall .izotope-container .itemm,
.career-wall .izotope-container .itemm.w_50,
.career-wall .izotope-container .itemm.w_25,
.izotope-container:not(.portfolio-grid):not(.w_100) .itemm,
.izotope-container:not(.portfolio-grid):not(.w_100) .itemm.w_50,
.izotope-container:not(.portfolio-grid):not(.w_100) .itemm.w_25 {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  float: none !important;
  clear: none !important;
}
.career-wall .izotope-container .itemm img,
.izotope-container:not(.portfolio-grid):not(.w_100) .itemm img {
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* ≤500px: einspaltig. niruk-fix.js legt die Items dann direkt (in
   Originalreihenfolge) in den Container; hier stapeln wir sie vertikal. */
@media (max-width: 500px) {
  .career-wall .izotope-container,
  .izotope-container:not(.portfolio-grid):not(.w_100) {
    flex-direction: column !important;
  }
}

/* Portfolio-Grid: Titel/Kategorie-Overlay erst beim Hover einblenden — auch
   bei schmaleren Breiten (≤990px). Das Original zeigt das Overlay dort
   dauerhaft an (Text klebt auf den Bildern). Auf Geräten MIT Maus (hover:hover)
   erzwingen wir das Hover-Verhalten in allen Breiten; echte Touch-Geräte
   (hover:none) behalten die Daueranzeige, da sie keinen Hover haben. */
@media (hover: hover) {
  .izotope-container.portfolio-grid .itemm .item-overlay {
    opacity: 0 !important;
    background: none !important;
    transition: opacity 0.4s ease-in-out, background 0.4s ease-in-out;
  }
  /* Beim Hover: Bild hellt auf (helles Overlay) + Text/Overlay faden ein —
     genau wie der Desktop-Hover (rgba(250,250,250,0.7)). */
  .izotope-container.portfolio-grid .itemm:hover .item-overlay {
    opacity: 1 !important;
    background: rgba(250, 250, 250, 0.7) !important;
  }
  /* Titel/Kategorie laufen beim Hover von links ein (margin-left 0 -> 28px),
     wie auf dem Desktop. Bei ≤992px stehen sie sonst dauerhaft auf 28px. */
  .izotope-container.portfolio-grid .itemm .item-title,
  .izotope-container.portfolio-grid .itemm .item-cat {
    margin-left: 0 !important;
    transition: margin-left 0.4s ease-in-out;
  }
  .izotope-container.portfolio-grid .itemm:hover .item-title,
  .izotope-container.portfolio-grid .itemm:hover .item-cat {
    margin-left: 28px !important;
  }
}

/* Portfolio-Grid: kein zusätzliches Padding um Kacheln/Overlays. Das Theme
   setzt bei ≤992px padding:0 15px 30px auf .itemm und .item-overlay → dadurch
   entstehen weiße Rahmen um die Bilder (beim Hover sichtbar). Edge-to-edge wie
   auf dem Desktop; der Abstand kommt allein vom grid-gap (4px). */
/* Kein per-Kachel-Padding UND keine Theme-Margin (Theme setzt auf Desktop
   margin:0 3% 80px → überlagert das Grid-Gap, macht Abstände riesig/ungleich).
   So steuert allein das Grid-Gap die Abstände. */
.izotope-container.portfolio-grid .itemm,
.izotope-container.portfolio-grid .itemm .item-overlay {
  margin: 0 !important;
  padding: 0 !important;
}
/* Abstände zwischen den Bildern + Luft oben/seitlich (zum Logo) über grid-gap
   und Container-Padding (kein per-Kachel-Padding → keine weißen Rahmen).
   EINHEITLICH (Zeile = Spalte), fließend, aber moderat gedeckelt (Desktop). */
.izotope-container.portfolio-grid {
  gap: clamp(16px, 3vw, 30px) !important;
  padding: clamp(16px, 2.5vw, 32px) clamp(10px, 1.5vw, 20px) !important;
}
/* Alle Kacheln auf EIN Seitenverhältnis (1.449, die Mehrheit der Bilder),
   damit alle Zellen exakt gleich hoch sind → vertikale = horizontale Abstände.
   Die ~9 Foto-Kacheln (1.488) werden dabei minimal seitlich beschnitten. */
.izotope-container.portfolio-grid .itemm img {
  aspect-ratio: 1.449 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Handy: Header/Hero-Bilder auf halbe Höhe — nur auf Mobil */
@media (max-width: 768px) {
  .niruk-start,
  .material-lab {
    min-height: 35vh !important;
  }
}

/* Startseite in ALLEN Größen als Flex-Spalte: Hero-Foto bildschirmfüllend,
   schwarzer Footer-Balken (Text + IMPRINT) sitzt immer unten am Bildschirmrand.
   Header oben, Hero füllt den freien Raum, Footer automatisch am unteren Rand
   — kein Scroll, Footer in jeder Version sichtbar. */
@media all {
  body.home {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  /* Wrapper-Div zwischen Header und Footer dehnt sich auf den Rest */
  body.home > .top-baner + div {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0;
  }
  /* Hero füllt den Wrapper, Foto deckt formatfüllend ab */
  body.home .niruk-start {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  /* Schwarzer Balken bleibt als letzter Block ganz unten */
  body.home .footer-sec.footer-contact {
    flex: 0 0 auto !important;
  }
}

/* Handy: engere Abstände + breitere Bilder (Originalpadding der Row reduzieren) */
@media (max-width: 768px) {
  .career-wall {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* Career-Wall-Bilderreihe: 10% padding-left auf Handy reduzieren (breitere
     Bilder). Die Überschriften-Zeile (1538564331776) NICHT mehr — sonst sitzt
     die Überschrift schmaler als der Lauftext darunter. */
  .vc_row.vc_custom_1538565359711 {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  .career-wall .izotope-container,
  .izotope-container:not(.portfolio-grid):not(.w_100) {
    gap: 1px !important;
  }
  .career-wall .izotope-container .niruk-col,
  .izotope-container:not(.portfolio-grid):not(.w_100) .niruk-col {
    gap: 1px;
  }
}

/* Press-Stories und Blog-Listen: Isotope abschalten (kein masonry),
   damit Items natürlich übereinander fließen. */
.izotope-container.w_100 {
  display: block !important;
  height: auto !important;
  position: static !important;
}
.izotope-container.w_100 .itemm {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
}
/* Abstände zwischen Posts deutlich reduzieren */
.izotope-container.w_100 .blog-full-img {
  padding-bottom: 2px !important;
}
.izotope-container.w_100 .blog_full_text {
  padding-bottom: 3px !important;
}
/* Swiper hat calculateHeight: true und macht den Container so hoch wie
   das größte Bild. Dadurch entsteht Leerraum nach kleineren Slides.
   Hier zwingen wir den Container auf die Höhe des aktuell sichtbaren
   Bildes. */
.izotope-container.w_100 .blog-full-img .swiper-container,
.izotope-container.w_100 .blog-full-img .swiper-wrapper,
.izotope-container.w_100 .blog-full-img .swiper-slide {
  height: auto !important;
}
/* Feiner Trennstrich zwischen den Stories (Breite = Postbreite) */
.izotope-container.w_100 .itemm:not(:last-child) {
  border-bottom: 1px solid #bbb;
  margin-bottom: 3px !important;
  padding-bottom: 3px !important;
}

/* Instagram-Feed "Load more"-Button braucht WordPress-AJAX und
   funktioniert auf einer statischen Seite nicht. "Follow us" bleibt. */
.sbi_load_btn,
.sbi_loader {
  display: none !important;
}

/* Portfolio-item Seiten: wenn 2-spaltige Bilderreihen auf der
   schmalen Ansicht zu einer Spalte zusammenfallen, sollen die Bilder
   - vertikalen Abstand voneinander haben
   - links/rechts bündig mit den einspaltigen Reihen sitzen
   Greift bei allen vc_col-sm-6 Spalten in vc_row-flex Rows. */
@media (max-width: 767px) {
  .vc_row-flex .wpb_column.vc_col-sm-6,
  .vc_row .wpb_column.vc_col-sm-6 {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .vc_row-flex .wpb_column.vc_col-sm-6:last-child,
  .vc_row .wpb_column.vc_col-sm-6:last-child {
    margin-bottom: 0 !important;
  }
}

/* Portfolio-Übersichtsseite (niruk-portfolio): 4px-Abstände — siehe portfolio-cols.css */

/* WOW.js / animate.css Elemente erzwungen sichtbar */
.wow,
.wow.fadeInUp,
.wow.fadeIn,
.wow.fadeInDown,
.wow.fadeInLeft,
.wow.fadeInRight {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  animation-name: none !important;
  -webkit-animation-name: none !important;
}