{"id":12,"date":"2026-09-06T11:25:12","date_gmt":"2026-09-06T11:25:12","guid":{"rendered":"https:\/\/project-clayo.at\/?page_id=12"},"modified":"2026-09-29T22:17:25","modified_gmt":"2026-09-29T20:17:25","slug":"ueber-uns","status":"publish","type":"page","link":"https:\/\/project-clayo.at\/en\/ueber-uns\/","title":{"rendered":"\u00dcber Uns"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Clayo - \u00dcber Uns mit Scroll-Hint<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #ff7800;\r\n --text-color: #111;\r\n --text-muted: #888; \/* Etwas weicheres Grau f\u00fcr den Hinweis *\/\r\n --bg-color: #ffffff;\r\n --card-bg: #f8f9fa;\r\n --font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Container *\/\r\n .clayo-timeline-section {\r\n padding: 5vh 2%;\r\n font-family: var(--font-family);\r\n background-color: transparent;\r\n color: var(--text-color);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Optionaler Titel \u00fcber den Profilen *\/\r\n .team-title {\r\n text-align: center;\r\n font-size: 3rem;\r\n font-weight: 900;\r\n margin-bottom: 6vh;\r\n color: #5dbce3;\r\n }\r\n\r\n .timeline-wrapper {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6vh;\r\n padding-bottom: 5vh; \/* Etwas reduziert f\u00fcr den Pfeil *\/\r\n }\r\n\r\n \/* Animation: Ausgangszustand (von links) *\/\r\n .timeline-item-container {\r\n width: 100%;\r\n opacity: 0;\r\n transform: translateX(-10vw); \r\n transition: all 0.9s cubic-bezier(0.25, 1, 0.3, 1);\r\n }\r\n\r\n \/* Animation: Ausgangszustand (von rechts) *\/\r\n .timeline-item-container.from-right {\r\n transform: translateX(10vw); \r\n }\r\n\r\n \/* Animation: Endzustand *\/\r\n .timeline-item-container.in-view {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n \/* Flex-Layout f\u00fcr die Karte *\/\r\n .timeline-card {\r\n background: var(--card-bg);\r\n border-radius: 2.5rem;\r\n padding: 4%;\r\n border: 3px solid transparent;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n \r\n display: flex;\r\n align-items: stretch;\r\n gap: 4%;\r\n }\r\n\r\n \/* Bild links, Text rechts *\/\r\n .timeline-card.reverse {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n \/* Hover Effekt *\/\r\n .timeline-item-container.in-view .timeline-card:hover {\r\n border-color: rgba(255, 120, 0, 0.2);\r\n background: #fff;\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.12);\r\n transform: scale(1.02) translateY(-8px);\r\n }\r\n\r\n \/* Text-Bereich *\/\r\n .timeline-content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n \/* Bild-Bereich *\/\r\n .timeline-img-wrap {\r\n flex: 0 0 35%;\r\n border-radius: 1.5rem;\r\n overflow: hidden;\r\n min-height: 280px;\r\n }\r\n\r\n .timeline-img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n \/* Typografie *\/\r\n .timeline-tag {\r\n color: var(--primary-color);\r\n font-size: 1.2rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n margin-bottom: 1rem;\r\n letter-spacing: 0.1rem;\r\n }\r\n\r\n .timeline-item-title {\r\n font-size: 2.4rem;\r\n font-weight: 900;\r\n margin: 0 0 1.2rem 0;\r\n line-height: 1.2;\r\n color: #5dbce3;\r\n }\r\n\r\n .timeline-description {\r\n font-size: 1.25rem;\r\n line-height: 1.6;\r\n color: #444;\r\n margin: 0;\r\n }\r\n\r\n \/* --- NEU: Scroll-Down Indikator CSS --- *\/\r\n .scroll-down-hint {\r\n text-align: center;\r\n margin-top: 4vh;\r\n margin-bottom: 4vh;\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n \/* Pfeil blendet sich nach 1.5 Sekunden ein *\/\r\n animation: fadeInScroll 1s forwards 1.5s; \r\n }\r\n\r\n .scroll-down-text {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.2rem;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .scroll-down-arrow {\r\n width: 24px;\r\n height: 24px;\r\n margin: 0 auto;\r\n border-right: 3px solid var(--primary-color);\r\n border-bottom: 3px solid var(--primary-color);\r\n transform: rotate(45deg);\r\n \/* H\u00fcpf-Animation *\/\r\n animation: bounceDown 2s infinite;\r\n }\r\n\r\n \/* Keyframes f\u00fcr den h\u00fcpfenden Pfeil *\/\r\n @keyframes bounceDown {\r\n 0%, 20%, 50%, 80%, 100% {\r\n transform: translateY(0) rotate(45deg);\r\n }\r\n 40% {\r\n transform: translateY(-12px) rotate(45deg);\r\n }\r\n 60% {\r\n transform: translateY(-6px) rotate(45deg);\r\n }\r\n }\r\n\r\n \/* Keyframes f\u00fcr das anf\u00e4ngliche Einblenden *\/\r\n @keyframes fadeInScroll {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Mobile Anpassungen *\/\r\n @media (max-width: 900px) {\r\n .timeline-card, \r\n .timeline-card.reverse {\r\n flex-direction: column-reverse;\r\n gap: 20px;\r\n padding: 6%;\r\n }\r\n .timeline-img-wrap {\r\n width: 100%;\r\n height: 250px;\r\n flex: none;\r\n }\r\n .timeline-item-title {\r\n font-size: 1.8rem;\r\n }\r\n .timeline-description {\r\n font-size: 1.15rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"clayo-timeline-section\">\r\n \r\n <h1 class=\"team-title\">Das Team hinter Clayo<\/h1>\r\n\r\n <div class=\"timeline-wrapper\" id=\"timeline\">\r\n \r\n <!-- TEAMMITGLIED 1: LAURENZ -->\r\n <div class=\"timeline-item-container\">\r\n <div class=\"timeline-card\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-tag\">ELEKTROTECHNIK & 3D-DRUCK<\/div>\r\n <h2 class=\"timeline-item-title\">Laurenz (16)<\/h2>\r\n <p class=\"timeline-description\">Laurenz wohnt in Dornbirn und besucht derzeit das 3. Jahr der HTL Bregenz im Zweig Elektrotechnik. Neben Schaltungen und Schulstoff ist in der Freizeit Action angesagt: Bouldern, Padel-Tennis und Wandern stehen ganz oben auf der Liste. Aber ganz ohne Technik geht es auch nach der Schule nicht. 3D-Druck und verschiedenstes \u201eDigitalzeug\u201c sorgen f\u00fcr viel Abwechslung. Diese technische Begeisterung flie\u00dft auch direkt in die Praxis ein: Laurenz ist ein fester Bestandteil des First Lego League Teams \u201eSYNTAX ERROR\u201c der HTL Bregenz.<\/p>\r\n <\/div>\r\n <div class=\"timeline-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092921461-eab62e97a780?q=80&w=600&auto=format&fit=crop\" alt=\"Foto von Laurenz\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TEAMMITGLIED 2: MAXIMILIAN -->\r\n <div class=\"timeline-item-container from-right\">\r\n <div class=\"timeline-card reverse\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-tag\">DRUCKTECHNIK & ORGANISATION<\/div>\r\n <h2 class=\"timeline-item-title\">Maximilian (16)<\/h2>\r\n <p class=\"timeline-description\">Maximilian kommt aus Schwarzach und absolviert aktuell das erste Lehrjahr als Drucktechniker bei der Firma \u201aSchwarzach Packaging\u2018. In der Freizeit geht es gerne sportlich zu, egal ob beim Padel-Tennis, Fahrradfahren oder auch auf der Skipiste. Abseits des Sports gibt es eine gro\u00dfe Leidenschaft f\u00fcr kreative und organisatorische Aufgaben: Das Schreiben von Texten und die Unterst\u00fctzung bei kleineren Projekten oder Initiativen im Umfeld der HTL Bregenz geh\u00f6ren fest zum Alltag. Genau wie Laurenz bringt auch Max sein Engagement in das First Lego League Team \u201eSYNTAX ERROR\u201c ein.<\/p>\r\n <\/div>\r\n <div class=\"timeline-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?q=80&w=600&auto=format&fit=crop\" alt=\"Foto von Maximilian\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NEU: SCROLL-DOWN HINWEIS -->\r\n <div class=\"scroll-down-hint\">\r\n <div class=\"scroll-down-text\">Weiter unten gibt es mehr<\/div>\r\n <div class=\"scroll-down-arrow\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const items = document.querySelectorAll('.timeline-item-container');\r\n\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px 0px -15% 0px', \r\n threshold: 0.1\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n } else {\r\n entry.target.classList.remove('in-view');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n items.forEach(item => {\r\n observer.observe(item);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Clayo – \u00dcber Uns mit Scroll-Hint Das Team hinter Clayo ELEKTROTECHNIK & 3D-DRUCK Laurenz (16) Laurenz wohnt in Dornbirn und besucht derzeit das 3. Jahr der HTL Bregenz im Zweig Elektrotechnik. Neben Schaltungen und Schulstoff ist in der Freizeit Action angesagt: Bouldern, Padel-Tennis und Wandern stehen ganz oben auf der Liste. Aber ganz ohne Technik […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/project-clayo.at\/en\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Clayo – \u00dcber Uns mit Scroll-Hint Das Team hinter Clayo ELEKTROTECHNIK & 3D-DRUCK Laurenz (16) Laurenz wohnt in Dornbirn und besucht derzeit das 3. Jahr der HTL Bregenz im Zweig Elektrotechnik. Neben Schaltungen und Schulstoff ist in der Freizeit Action angesagt: Bouldern, Padel-Tennis und Wandern stehen ganz oben auf der Liste. Aber ganz ohne Technik…","_links":{"self":[{"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":77,"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":376,"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/pages\/12\/revisions\/376"}],"wp:attachment":[{"href":"https:\/\/project-clayo.at\/en\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}