{"id":6434,"date":"2024-09-20T09:39:21","date_gmt":"2024-09-20T09:39:21","guid":{"rendered":"https:\/\/staging2.liquid-themes.com\/hub-elegant-business\/?page_id=6434"},"modified":"2026-09-10T21:57:53","modified_gmt":"2026-09-10T21:57:53","slug":"home-new","status":"publish","type":"page","link":"https:\/\/my-re.de\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6434\" class=\"elementor elementor-6434\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c9a6d1 e-con-full e-flex e-con e-parent\" data-id=\"2c9a6d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dff029 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"8dff029\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Fullscreen-Hero (Video-Version)\n     Stand: Farben markengetreu + Logo-Treppe \u00fcber alle Bildschirmgr\u00f6\u00dfen\n     - Kleiner Schriftzug oben links: ENTFERNT\n     - Button \"Kontakt aufnehmen\": ENTFERNT\n     - Logo-Farbfilter zur\u00fcck auf Originalfarbe (Algal fuel #11c88e)\n     - Logo-Gr\u00f6\u00dfe jetzt in 8 Stufen von 1180 px bis 340 px, mit eigener\n       Stufe f\u00fcr 5K- und Ultrawide-Monitore ab 1900 px\n     - Logo sitzt rechts angeschlagen statt mittig in seiner Spalte,\n       Abstand zum rechten Rand \u00fcber --myre-logo-rand einstellbar\n     - Logo-Deckkraft einstellbar, steht jetzt auf 66 % (vorher 85 %)\n     - Hintergrund-Video l\u00e4uft in nahtloser ENDLOSSCHLEIFE\n     - KORREKTUR Video: MP4 (H.264) steht jetzt als ERSTE Quelle, WebM nur\n       noch als Reserve dahinter. Vorher war nur das WebM aktiv \u2013 das kann\n       Safari auf iPhone und Mac nicht abspielen, deshalb war dort nur der\n       Play-Button zu sehen.\n     - Poster liegt zus\u00e4tzlich als CSS-Hintergrund hinter dem Video, und ein\n       Notfall-Schalter blendet das Video aus, falls keine Datei l\u00e4uft.\n       Dann ist ein Standbild zu sehen statt eines Play-Buttons.\n     - NEU Stromsparmodus: Im Energiesparmodus (iPhone, MacBook) verweigert\n       Safari den Autostart komplett \u2013 das ist eine Einstellung des Ger\u00e4ts,\n       kein Fehler der Seite, und kein Code kann sie \u00fcberstimmen. Neu ist\n       deshalb: sobald der Nutzer EINMAL tippt, klickt oder eine Taste\n       dr\u00fcckt, wird der Start automatisch nachgeholt. Klappt auch das nicht,\n       erscheint unten rechts ein dezenter Knopf \"Video starten\", der sich\n       selbst ausblendet, sobald das Video l\u00e4uft. Auf dem PC (Chrome) ist\n       davon nie etwas zu sehen, weil dort sofort gestartet wird.\n     WICHTIG: Die Datei myre-hero-bg-loop.mp4 muss in der Mediathek liegen,\n       Pfad wie im <source> unten (Monat 2026\/09). Fehlt sie, greift der\n       Notfall-Schalter und es bleibt beim Standbild.\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  .myre-hero{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n    \/* >>> LOGO-GR\u00d6SSE <<<\n       Die Grafik ist exakt auf das Logo zugeschnitten \u2013 die Box IST das Logo.\n       Was hier steht, ist also die echte Anzeigegr\u00f6\u00dfe.\n       Die Werte pro Bildschirmgr\u00f6\u00dfe stehen weiter unten bei den Media Queries. *\/\n    --myre-logo-max:940px;    \/* Breite am grossen Desktop *\/\n    --myre-logo-h:78vh;       \/* H\u00f6hen-Deckel \u2013 auf Laptops der Wert, der wirklich zieht *\/\n    --myre-logo-y:0px;        \/* Feinjustierung: nach unten schieben *\/\n    --myre-logo-x:0px;        \/* Feinjustierung: nach rechts schieben (px, positiv = rechts) *\/\n    --myre-logo-ar:1.1268;    \/* Seitenverh\u00e4ltnis der Logo-Datei *\/\n    \/* >>> ABSTAND ZUM RECHTEN RAND <<<\n       Das Logo sitzt jetzt rechts angeschlagen statt mittig in seiner\n       Spalte. Dieser Wert sagt, wie weit es \u00fcber die Innenkante des\n       Containers hinaus nach rechts darf \u2013 und macht dadurch gleichzeitig\n       die Logo-Spalte breiter, das Logo kann also auch gr\u00f6sser werden.\n       Richtwerte:   0px  = b\u00fcndig mit Text und Container\n                    32px  = knapp am Bildschirmrand (aktuell)\n                    48px  = sitzt genau auf der Bildschirmkante\n                    80px  = geht deutlich in den Rand hinein\n       Achtung: Die Section hat overflow:hidden. Wird der Wert gr\u00f6sser als\n       der Seitenabstand des Containers, schneidet der rechte Rand das\n       Logo an. Auf 1440 px Bildschirm ist bei etwa 48 px Schluss, auf\n       1920 px erst bei etwa 130 px. *\/\n    --myre-logo-rand:32px;\n    \/* >>> LOGO-FARBE <<<\n       Standard ist 1 \/ 1 = Originalfarbe der Datei, also exakt\n       Algal fuel #11c88e aus den Guidelines. NICHT verstellen, wenn die\n       Farbe markengetreu bleiben soll.\n       Nur falls das Logo vor dem Video mal zu dunkel wirkt, kann man hier\n       vorsichtig aufhellen: 1.06 dezent, 1.12 deutlich, ab 1.25 pastellig. *\/\n    --myre-logo-bright:1;     \/* Helligkeit des Logos (1 = Markenfarbe) *\/\n    --myre-logo-sat:1;        \/* S\u00e4ttigung des Logos  (1 = Markenfarbe) *\/\n    \/* >>> LOGO-DECKKRAFT <<<\n       1 = voll deckend (Zustand von vorher), 0 = unsichtbar.\n       Der Wert gilt f\u00fcr die ganze Logo-Box, also f\u00fcr die Animation UND\n       f\u00fcr das scharfe Standbild danach \u2013 der Wechsel am Ende bleibt\n       dadurch unsichtbar, weil beide Grafiken gleich transparent sind.\n       Richtwerte:  .92 kaum sichtbar   .85 dezent\n                    .66 deutlich (aktuell)   .55 wie ein Wasserzeichen\n       Achtung: Das Video ist an dieser Stelle unterschiedlich hell.\n       Unter etwa .6 kann das Logo auf den hellen Fassaden schwach werden \u2013\n       .66 ist bewusst knapp dar\u00fcber gew\u00e4hlt. Wenn es dir auf dem eigenen\n       Monitor zu blass wird, ist .72 der n\u00e4chste sinnvolle Schritt zur\u00fcck. *\/\n    --myre-logo-deckkraft:.66;\n    \/* >>> STANDBILD HINTER DEM VIDEO (Poster) <<<\n       Dieses Bild liegt jetzt als echter CSS-Hintergrund hinter dem Video.\n       Es ist sofort da, w\u00e4hrend das Video noch l\u00e4dt \u2013 und es bleibt sichtbar,\n       falls das Video gar nicht startet (langsames Netz, Datensparmodus,\n       iOS im Energiesparmodus). Ohne diesen Hintergrund w\u00e4re die Section in\n       diesem Fall einfach dunkelgr\u00fcn.\n       Wichtig: Es muss dieselbe Datei sein wie im poster=\"...\" am <video>,\n       sonst blitzt beim Start ein anderer Bildausschnitt auf. *\/\n    --myre-poster:url(\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/09\/myre-hero-bg-poster.jpg\");\n    position:relative;\n    width:100%;\n    min-height:100vh;\n    font-family:'Poppins',sans-serif;\n    overflow:hidden;\n    display:flex;\n    align-items:center;\n    background:var(--myre-dark);\n  }\n  .myre-hero *{box-sizing:border-box;margin:0;padding:0;}\n  \/* ---------- Hintergrund-VIDEO \u00fcber die GANZE Section ---------- *\/\n  .myre-hero__bg{\n    position:absolute;\n    inset:0;\n    z-index:0;\n    \/* Standbild als Unterlage \u2013 siehe --myre-poster oben.\n       Derselbe Bildausschnitt wie beim Video (center 30%), damit der\n       \u00dcbergang vom Standbild zum laufenden Video nicht springt. *\/\n    background-color:var(--myre-dark);\n    background-image:var(--myre-poster);\n    background-size:cover;\n    background-position:center 30%;\n    background-repeat:no-repeat;\n  }\n  .myre-hero__bg video{\n    width:100%;height:100%;\n    object-fit:cover;\n    object-position:center 30%;\n    display:block;\n    \/* Kein CSS-Zoom mehr: die Kamerafahrt steckt jetzt im Video selbst,\n       beides zusammen w\u00fcrde sich \u00fcberlagern. *\/\n  }\n  \/* >>> NOTFALL-SCHALTER: Video weg, Standbild bleibt <<<\n     Diese Klasse setzt das Skript automatisch auf die Section, wenn der\n     Browser keine der Videodateien abspielen kann. Dann wird das <video>\n     komplett ausgeblendet \u2013 und damit auch der graue Play-Button, den\n     Safari von sich aus \u00fcber ein nicht spielbares Video legt.\n     Sichtbar bleibt das Poster aus --myre-poster, der Hero sieht also\n     immer noch richtig aus statt kaputt.\n     Zum Testen kann man class=\"myre-hero myre-hero--kein-video\" auch\n     von Hand ins div schreiben. *\/\n  .myre-hero--kein-video .myre-hero__bg video{display:none;}\n  \/* >>> START-KNOPF: letzte R\u00fcckfallebene, wenn das GER\u00c4T den Autostart\n         verbietet <<<\n     Es gibt zwei Situationen, in denen kein Code der Welt ein Video von\n     allein starten kann, weil das Betriebssystem es unterbindet:\n       - Energiesparmodus auf iPhone und MacBook. Safari l\u00e4sst dann\n         Videos grunds\u00e4tzlich nicht selbst anlaufen.\n       - Strenge Autoplay-Einstellung im Browser (Safari > Einstellungen >\n         Websites > Automatische Wiedergabe: \u201eNie automatisch abspielen\").\n     In beiden F\u00e4llen erlaubt Safari das Abspielen aber sofort, wenn der\n     Nutzer EINMAL irgendwo getippt oder gescrollt hat. Genau das macht das\n     Skript automatisch. Nur falls selbst das nicht passiert, erscheint\n     dieser dezente Knopf unten rechts \u2013 damit der Besucher \u00fcberhaupt\n     merkt, dass es hier etwas zu sehen gibt.\n     Der Knopf ist sonst unsichtbar: er kommt ausschlie\u00dflich \u00fcber die\n     Klasse myre-hero--tippen, die das Skript setzt.\n     Zum Anschauen kann man die Klasse von Hand an die Section schreiben. *\/\n  .myre-hero__start{\n    position:absolute;\n    right:24px;\n    bottom:24px;\n    z-index:6;\n    display:none;\n    align-items:center;\n    gap:10px;\n    padding:11px 20px 11px 17px;\n    border:1px solid rgba(255,255,255,.45);\n    border-radius:999px;\n    background:rgba(11,48,45,.55);\n    -webkit-backdrop-filter:blur(8px);\n    backdrop-filter:blur(8px);\n    color:#ffffff;\n    font-family:'Poppins',sans-serif;\n    font-size:.82rem;\n    font-weight:500;\n    letter-spacing:.04em;\n    line-height:1;\n    cursor:pointer;\n    transition:background .3s ease,border-color .3s ease,transform .3s ease;\n  }\n  .myre-hero--tippen .myre-hero__start{display:inline-flex;}\n  \/* Wenn gar keine Videodatei abspielbar ist, hilft auch Tippen nicht \u2013\n     dann bleibt der Knopf weg und das Poster steht f\u00fcr sich. *\/\n  .myre-hero--kein-video .myre-hero__start{display:none !important;}\n  .myre-hero__start:hover{\n    background:rgba(11,48,45,.78);\n    border-color:var(--myre-green);\n    transform:translateY(-2px);\n  }\n  \/* kleines Play-Dreieck in Algal fuel, ohne zus\u00e4tzliche Grafikdatei *\/\n  .myre-hero__start::before{\n    content:\"\";\n    flex:0 0 auto;\n    width:0;height:0;\n    border-style:solid;\n    border-width:6px 0 6px 10px;\n    border-color:transparent transparent transparent var(--myre-green);\n  }\n  @media (max-width:600px){\n    .myre-hero__start{right:16px;bottom:16px;font-size:.78rem;padding:10px 16px 10px 14px;}\n  }\n  \/* Wei\u00dfer Layer NUR \u00fcber dem Textbereich (links), rechts klar *\/\n  .myre-hero__bg::after{\n    content:\"\";\n    position:absolute;inset:0;\n    background:linear-gradient(\n      to right,\n      rgba(255,255,255,.96) 0%,\n      rgba(255,255,255,.94) 34%,\n      rgba(255,255,255,.75) 48%,\n      rgba(255,255,255,.25) 62%,\n      rgba(255,255,255,0)   78%\n    );\n    pointer-events:none;\n    z-index:2;\n  }\n  \/* leichte Abdunklung unten f\u00fcr Tiefe *\/\n  .myre-hero__bg::before{\n    content:\"\";\n    position:absolute;inset:0;\n    background:linear-gradient(to top,rgba(11,48,45,.35) 0%,rgba(11,48,45,0) 30%);\n    z-index:1;\n    pointer-events:none;\n  }\n  \/* ---------- Layout ---------- *\/\n  .myre-hero__inner{\n    position:relative;\n    width:100%;\n    max-width:1440px;\n    margin:0 auto;\n    \/* War 130px oben \/ 100px unten. Etwas zur\u00fcckgenommen, weil auf\n       Laptops mit 900 px Bildschirmh\u00f6he die H\u00f6he entscheidet, wie gross\n       das Logo werden darf \u2013 36 px weniger Polsterung sind dort rund\n       40 px mehr Logo. *\/\n    padding:112px 48px 88px;\n    display:grid;\n    \/* Textspalte war 520px bei 40px Abstand. Beides etwas zur\u00fcckgenommen,\n       damit die Logo-Spalte w\u00e4chst \u2013 der Text bleibt mit 470px trotzdem\n       breiter als sein eigener Lesetext (420px), bricht also nicht um. *\/\n    grid-template-columns:minmax(0,470px) 1fr;\n    align-items:center;\n    gap:26px;\n    z-index:3;\n  }\n  \/* ---------- Textspalte ---------- *\/\n  \/* liegt \u00fcber dem gro\u00dfen Logo, falls es in die Spalte hineinragt *\/\n  .myre-hero__content{position:relative;z-index:5;}\n  .myre-hero__title{\n    font-size:clamp(2.4rem,4.6vw,4.2rem);\n    line-height:1.08;\n    font-weight:700;\n    color:var(--myre-dark);\n    letter-spacing:-.5px;\n    opacity:0;\n    transform:translateY(30px);\n    animation:myreFadeUp 1.6s cubic-bezier(.22,.8,.3,1) .5s forwards;\n  }\n  .myre-hero__title em{\n    font-style:italic;\n    font-weight:500;\n    display:block;\n  }\n  .myre-hero__title em span{\n    \/* Markenfarbe Algal fuel #11c88e, voll deckend *\/\n    color:var(--myre-green) !important;\n  }\n  .myre-hero__text{\n    margin-top:30px;\n    max-width:420px;\n    font-size:1.05rem;\n    line-height:1.65;\n    color:var(--myre-dark);\n    opacity:0;\n    transform:translateY(30px);\n    animation:myreFadeUp 1.6s cubic-bezier(.22,.8,.3,1) .85s forwards;\n  }\n  \/* ---------- Logo-B\u00fchne (rechte H\u00e4lfte, \u00fcber dem Video) ---------- *\/\n  .myre-hero__stage{\n    position:relative;\n    min-height:560px;\n    display:flex;\n    align-items:center;       \/* -> Logo sitzt auf halber H\u00f6he der Schrift *\/\n    \/* War center. Jetzt rechts angeschlagen, damit das Logo am rechten\n       Rand sitzt und nicht in der Mitte seiner Spalte schwebt. *\/\n    justify-content:flex-end;\n    \/* Der negative Aussenabstand schiebt die B\u00fchne \u00fcber die Innenkante\n       des Containers hinaus. Nebeneffekt, der hier gewollt ist: die B\u00fchne\n       wird dadurch breiter, also darf auch das Logo breiter werden. *\/\n    margin-right:calc(var(--myre-logo-rand) * -1);\n    z-index:1;                 \/* liegt hinter der Textspalte *\/\n  }\n  .myre-hero__logo{\n    position:relative;\n    \/* Breite f\u00fchrt: nie breiter als die eigene Spalte (100%), nie breiter\n       als der Deckel, und nie h\u00f6her als --myre-logo-h.\n       Dadurch kann das Logo nicht \u00fcber den Text laufen. *\/\n    width:min(100%, var(--myre-logo-max), calc(var(--myre-logo-h) * var(--myre-logo-ar)));\n    aspect-ratio:var(--myre-logo-ar);\n    \/* War margin-left. Jetzt als Verschiebung, weil das Logo rechts\n       angeschlagen ist \u2013 ein Aussenabstand links w\u00fcrde dort nichts tun. *\/\n    transform:translate(var(--myre-logo-x), var(--myre-logo-y));\n    opacity:0;\n    transition:opacity 1.1s ease .3s;\n    will-change:opacity;\n  }\n  \/* Hier \u2013 und nur hier \u2013 endet die Einblendung. Deshalb muss die\n     Transparenz genau an dieser Stelle stehen: ein zus\u00e4tzliches opacity\n     weiter oben w\u00fcrde von dieser Regel wieder \u00fcberschrieben. *\/\n  .myre-hero.is-ready .myre-hero__logo{opacity:var(--myre-logo-deckkraft);}\n  \/* Medien-Box: Animation und scharfes Standbild liegen exakt\n     deckungsgleich \u00fcbereinander -> unsichtbarer Wechsel am Ende. *\/\n  .myre-hero__logo-media{\n    position:relative;\n    width:100%;\n    height:100%;\n  }\n  .myre-hero__logo-media img{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center center;\n    display:block;\n    \/* >>> hier wirkt die Helligkeits-Stellschraube <<< *\/\n    filter:brightness(var(--myre-logo-bright)) saturate(var(--myre-logo-sat));\n  }\n  \/* Standbild liegt UNTEN und ist erst am Ende sichtbar *\/\n  .myre-hero__logo-still{\n    opacity:0;\n    transition:opacity .35s ease;\n  }\n  \/* Animation liegt OBEN *\/\n  .myre-hero__logo-anim{\n    opacity:1;\n    transition:opacity .35s ease .2s;\n  }\n  .myre-hero__logo.is-done .myre-hero__logo-still{opacity:1;}\n  .myre-hero__logo.is-done .myre-hero__logo-anim{opacity:0;}\n  \/* gr\u00fcne Aura hinter dem Logo *\/\n  .myre-hero__glow{\n    position:absolute;\n    left:50%;top:50%;\n    width:110%;aspect-ratio:1;\n    transform:translate(-50%,-50%);\n    background:radial-gradient(circle,rgba(17,200,142,.28) 0%,rgba(17,200,142,0) 60%);\n    opacity:0;\n    transition:opacity 1.4s ease;\n    pointer-events:none;\n    z-index:0;\n  }\n  .myre-hero.is-ready .myre-hero__glow{\n    opacity:1;\n    animation:myreGlowPulse 5s ease-in-out 2s infinite alternate;\n  }\n  \/* ---------- Keyframes ---------- *\/\n  @keyframes myreFadeUp{to{opacity:1;transform:translateY(0);}}\n  @keyframes myreGlowPulse{\n    from{opacity:.55;transform:translate(-50%,-50%) scale(1);}\n    to  {opacity:1;transform:translate(-50%,-50%) scale(1.12);}\n  }\n  \/* ================= RESPONSIVE \u2013 LOGO-TREPPE =================\n     Das Logo wird von Stufe zu Stufe kleiner. Drei Werte steuern es:\n       --myre-logo-max  = Breiten-Deckel in Pixeln\n       --myre-logo-h    = H\u00f6hen-Deckel in vh (greift bei flachen Fenstern)\n       --myre-logo-rand = wie weit es nach rechts \u00fcber den Container darf\n     Es gilt immer der kleinere von Breite und H\u00f6he, das Logo kann also\n     weder den Text \u00fcberlaufen noch aus dem Bildschirm ragen.\n\n     Wichtig zum Verst\u00e4ndnis: der Breiten-Deckel ist nur eine Obergrenze.\n     Was tats\u00e4chlich zieht, ist bis etwa 1900 px Bildschirmbreite fast\n     immer der H\u00f6hen-Deckel, weil die Logo-Datei nahezu quadratisch ist\n     (Verh\u00e4ltnis 1,13). Auf 1920x1080 ergeben 78vh H\u00f6he rund 974 px\n     Breite \u2013 der Deckel von 1080 px bremst dort also gar nicht.\n     Wer das Logo gr\u00f6sser will, dreht deshalb am vh-Wert, nicht am px-Wert.\n\n     Ergebnis nach dieser Einstellung, gemessen:\n       2560x1440 ... 1331 px breit,  61 px vom rechten Rand\n       1920x1080 ...  974 px breit,  50 px vom rechten Rand\n       1512x982  ...  863 px breit,  52 px vom rechten Rand\n       1440x900  ...  791 px breit,  16 px vom rechten Rand\n       1280x800  ...  703 px breit,  16 px vom rechten Rand\n\n       ab 2400px  ... 1360px Deckel, 82vh   (5K, 34-Zoll-Ultrawide)\n       1900-2399  ... 1180px Deckel, 80vh   (27 Zoll, 1920 breit und mehr)\n       1600-1899  ... 1080px Deckel, 78vh   (grosser Monitor, MacBook 16\")\n       1200-1599  ...  940px Deckel, 78vh   (Standard-Desktop)\n       1025-1199  ...  780px Deckel, 68vh   (kleiner Laptop)\n        861-1024  ...  660px Deckel, 46vh   (Tablet quer \u2013 1-spaltig)\n        601-860   ...  560px Deckel, 42vh   (Tablet hoch)\n        481-600   ...  430px Deckel, 36vh   (grosses Handy)\n        bis 480   ...  340px Deckel, 31vh   (kleines Handy)\n     ============================================================ *\/\n  \/* --- grosse Monitore ---\n     Der Container darf hier breiter werden als die 1440 px der\n     Standard-Ansicht. Sonst blieben links und rechts nur leere Fl\u00e4chen\n     und das Logo k\u00e4me trotz h\u00f6herem Deckel nicht n\u00e4her an den Rand. *\/\n  @media (min-width:1600px){\n    .myre-hero{\n      --myre-logo-max:1080px;\n      --myre-logo-h:78vh;\n      --myre-logo-rand:56px;\n    }\n    .myre-hero__inner{\n      max-width:min(1760px,94vw);\n      padding:110px 56px 90px;\n    }\n  }\n  \/* --- sehr grosse Monitore: 5K, Ultrawide ---\n     Hier f\u00e4llt der Pixel-Deckel des Containers weg: er folgt der\n     Bildschirmbreite (94vw). Sonst blieben links und rechts breite\n     Leerfl\u00e4chen und das Logo k\u00e4me nie in die N\u00e4he des Randes.\n     Nebeneffekt, der hier gewollt ist: Text steht weit links,\n     Logo weit rechts \u2013 auf einem 27-Zoll-Schirm liegt dazwischen\n     bewusst Luft. *\/\n  @media (min-width:1900px){\n    .myre-hero{\n      --myre-logo-max:1180px;\n      --myre-logo-h:80vh;\n      --myre-logo-rand:72px;\n    }\n    .myre-hero__inner{\n      max-width:94vw;\n      padding:110px 64px 90px;\n      grid-template-columns:minmax(0,520px) 1fr;\n    }\n    \/* Auf sehr breiten Schirmen wirkt die Schrift sonst verloren neben\n       dem grossen Logo \u2013 deshalb ab hier eine Stufe gr\u00f6sser. *\/\n    .myre-hero__title{font-size:4.6rem;}\n    .myre-hero__text{font-size:1.15rem;max-width:470px;}\n  }\n  \/* --- 5K und dar\u00fcber (iMac 27\", Studio Display, Ultrawide 34\") --- *\/\n  @media (min-width:2400px){\n    .myre-hero{\n      --myre-logo-max:1360px;\n      --myre-logo-h:82vh;\n      --myre-logo-rand:88px;\n    }\n    .myre-hero__inner{\n      padding:120px 72px 100px;\n      grid-template-columns:minmax(0,580px) 1fr;\n    }\n    .myre-hero__title{font-size:5.2rem;}\n    .myre-hero__text{font-size:1.22rem;max-width:520px;}\n  }\n  \/* --- kleiner Laptop: Logo etwas zur\u00fccknehmen, Text beh\u00e4lt Platz --- *\/\n  @media (max-width:1199px){\n    .myre-hero{\n      --myre-logo-max:780px;\n      --myre-logo-h:68vh;\n      --myre-logo-rand:36px;   \/* passt zum kleineren Seitenabstand unten *\/\n    }\n    .myre-hero__inner{\n      padding:120px 36px 80px;\n      grid-template-columns:minmax(0,440px) 1fr;\n    }\n  }\n  \/* --- Tablet quer und darunter: einspaltig, Logo \u00fcber den Text --- *\/\n  @media (max-width:1024px){\n    .myre-hero__inner{\n      grid-template-columns:1fr;\n      padding:110px 28px 60px;\n      gap:10px;\n    }\n    \/* Auf Mobile: wei\u00dfer Layer von unten statt von links *\/\n    .myre-hero__bg::after{\n      background:linear-gradient(\n        to top,\n        rgba(255,255,255,.96) 0%,\n        rgba(255,255,255,.92) 42%,\n        rgba(255,255,255,.55) 58%,\n        rgba(255,255,255,0)   80%\n      );\n    }\n    .myre-hero{\n      --myre-logo-max:660px;\n      --myre-logo-h:46vh;\n      --myre-logo-y:0px;\n      --myre-logo-x:0px;\n      \/* Einspaltig gibt es keine rechte Seite mehr, an die man anschlagen\n         k\u00f6nnte \u2013 das Logo steht ab hier wieder mittig \u00fcber dem Text. *\/\n      --myre-logo-rand:0px;\n    }\n    .myre-hero__stage{\n      order:-1;\n      min-height:360px;\n      justify-content:center;\n      margin-right:0;\n    }\n    .myre-hero__text{max-width:100%;}\n  }\n  \/* --- Tablet hochkant --- *\/\n  @media (max-width:860px){\n    .myre-hero{\n      --myre-logo-max:560px;\n      --myre-logo-h:42vh;\n    }\n    .myre-hero__inner{padding:100px 26px 56px;}\n    .myre-hero__stage{min-height:320px;}\n  }\n  \/* --- grosses Handy --- *\/\n  @media (max-width:600px){\n    .myre-hero{\n      --myre-logo-max:430px;\n      --myre-logo-h:36vh;\n    }\n    .myre-hero__inner{padding:90px 22px 52px;}\n    .myre-hero__title{font-size:2.2rem;}\n    .myre-hero__text{font-size:1rem;margin-top:24px;}\n    .myre-hero__stage{min-height:270px;}\n  }\n  \/* --- kleines Handy (iPhone SE & Co.) --- *\/\n  @media (max-width:480px){\n    .myre-hero{\n      --myre-logo-max:340px;\n      --myre-logo-h:31vh;\n    }\n    .myre-hero__inner{padding:80px 18px 46px;}\n    .myre-hero__title{font-size:1.95rem;}\n    .myre-hero__stage{min-height:220px;}\n  }\n  \/* --- mittelhohe Desktops (1366x768, 1280x800) ---\n     Hier ist die Bildschirmh\u00f6he knapp. Statt das Logo zu verkleinern\n     nehmen wir oben und unten Polsterung weg \u2013 dadurch bleibt die Section\n     bei 100vh und das Logo trotzdem in voller Gr\u00f6sse. *\/\n  @media (max-height:820px) and (min-width:1200px){\n    .myre-hero__inner{padding:88px 48px 68px;}\n  }\n  \/* --- flache Fenster (Notebook quer, wenig H\u00f6he): H\u00f6he f\u00fchrt --- *\/\n  @media (max-height:700px) and (min-width:1025px){\n    .myre-hero{--myre-logo-h:62vh;}\n  }\n  @media (max-height:560px){\n    .myre-hero{--myre-logo-h:56vh;}\n    .myre-hero__stage{min-height:200px;}\n  }\n  \/* ---------- Reduced Motion ---------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-hero *{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;}\n    \/* Auch ohne Animation gilt die eingestellte Deckkraft \u2013 vorher stand\n       hier ein hartes 1, damit w\u00e4re das Logo f\u00fcr diese Nutzer voll deckend.\n       Die Feinjustierung bleibt ebenfalls erhalten, vorher stand hier\n       transform:none und h\u00e4tte sie weggeworfen. *\/\n    .myre-hero__logo{\n      opacity:var(--myre-logo-deckkraft) !important;\n      transform:translate(var(--myre-logo-x),var(--myre-logo-y)) !important;\n    }\n  }\n<\/style>\n<section class=\"myre-hero\" id=\"myre-hero\">\n  <!-- ============================================================\n       HINTERGRUND-VIDEO \u2013 nahtlose Endlosschleife (24 s).\n       Erzeugt aus ICONIC3.jpeg: langsame Kamerafahrt in die Skyline\n       hinein und wieder zur\u00fcck, dadurch loopt es ohne sichtbaren Schnitt.\n       Dateien liegen in der Mediathek unter 2026\/09.\n       ============================================================ -->\n  <div class=\"myre-hero__bg\">\n    <video id=\"myreBgVideo\"\n           autoplay muted loop playsinline preload=\"auto\"\n           disablepictureinpicture\n           poster=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/09\/myre-hero-bg-poster.jpg\"\n           aria-hidden=\"true\">\n      <!-- ACHTUNG, REIHENFOLGE IST WICHTIG:\n           Der Browser nimmt die ERSTE Quelle, die er abspielen kann, und\n           schaut die zweite dann nicht mehr an. Deshalb steht das MP4 oben.\n\n           Das MP4 ist H.264 und l\u00e4uft auf allem: iPhone, iPad, Safari auf\n           dem Mac, Chrome, Firefox, Edge, Android.\n           Das WebM darunter ist VP9. Das k\u00f6nnen Chrome, Firefox und Edge \u2013\n           Safari aber nicht zuverl\u00e4ssig (auf dem iPhone erst ab iOS 17.4,\n           auf dem Mac je nach Version gar nicht). Wenn nur diese Quelle da\n           ist, findet Safari nichts Abspielbares, zeigt das Poster und legt\n           seinen eigenen Play-Button dar\u00fcber. Genau das war der Fehler.\n\n           Das WebM bleibt trotzdem drin: Chrome und Firefox nehmen es nicht,\n           weil das MP4 zuerst kommt \u2013 aber die Datei kostet nichts, solange\n           sie liegen bleibt, und ist die Reserve, falls das MP4 mal fehlt. -->\n      <source src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/09\/myre-hero-bg-loop.mp4\" type=\"video\/mp4\">\n      <source src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/09\/myre-hero-bg-loop.webm\" type=\"video\/webm\">\n    <\/video>\n  <\/div>\n  <div class=\"myre-hero__inner\">\n    <!-- Textspalte (auf wei\u00dfem Layer) -->\n    <div class=\"myre-hero__content\">\n      <h1 class=\"myre-hero__title\">\n        Nachhaltige<br>Entwicklungen.\n        <em><span>Starke Verbindungen.<\/span><\/em>\n      <\/h1>\n      <p class=\"myre-hero__text\">\n        Mit innovativen Konzepten und einem starken Netzwerk schaffen wir\n        nachhaltige und kreative L\u00f6sungen.\n      <\/p>\n    <\/div>\n    <!-- Logo-B\u00fchne: Logo-Animation startet beim Laden & beim Zur\u00fcckscrollen -->\n    <div class=\"myre-hero__stage\" id=\"myreStage\">\n      <div class=\"myre-hero__glow\"><\/div>\n      <div class=\"myre-hero__logo\" id=\"myreLogo\">\n        <div class=\"myre-hero__logo-media\">\n          <!-- 1) Scharfes Standbild (liegt unten, wird am Ende eingeblendet) -->\n          <img decoding=\"async\" class=\"myre-hero__logo-still\"\n               src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/myre_logo_still.png\"\n               alt=\"Mykorrhiza Real Estate Logo\">\n          <!-- 2) Animation (liegt oben, l\u00e4uft 1x und blendet dann weg) -->\n          <img decoding=\"async\" id=\"myreLogoImg\" class=\"myre-hero__logo-anim\"\n               src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/myre_logo_anim-1.webp\"\n               alt=\"\"\n               aria-hidden=\"true\"\n               data-src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/myre_logo_anim-1.webp\"\n               data-duration=\"3500\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  <!-- Dezenter Start-Knopf, nur sichtbar wenn das Ger\u00e4t den Autostart\n       blockiert. Steht als direktes Kind der Section, damit er \u00fcber der\n       Textspalte (z-index 3) liegt und wirklich anklickbar ist. -->\n  <button class=\"myre-hero__start\" id=\"myreBgStart\" type=\"button\">Video starten<\/button>\n<\/section>\n<script>\n(function(){\n  var hero  = document.getElementById('myre-hero');\n  var stage = document.getElementById('myreStage');\n  var bgVid = document.getElementById('myreBgVideo');\n  if(!hero || !stage) return;\n  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  \/* Sichtbar schalten (Fade-in von Logo + Glow) *\/\n  requestAnimationFrame(function(){ hero.classList.add('is-ready'); });\n  \/* ---------- Hintergrund-Video: ENDLOSSCHLEIFE ---------- *\/\n  var startKnopf = document.getElementById('myreBgStart');\n  if(bgVid){\n    \/* >>> SCHALTER: Video auch bei \u201eBewegung reduzieren\" laufen lassen <<<\n       Nicht die Ursache des Stromsparmodus-Problems, aber der zweite\n       Schalter, der ein Video stillstehen l\u00e4sst: hat jemand die\n       Systemeinstellung \u201eBewegung reduzieren\" aktiviert (iPhone:\n       Einstellungen > Bedienungshilfen > Bewegung; Mac:\n       Systemeinstellungen > Bedienungshilfen > Anzeige), pausiert das\n       Skript bewusst.\n       false = so wie bisher, dann steht dort das Standbild.\n       true  = das Hintergrundvideo l\u00e4uft auch f\u00fcr diese Nutzer. W\u00e4re\n               vertretbar, weil es eine sehr langsame Kamerafahrt ohne\n               Schnitte und ohne Ton ist. Die \u00fcbrigen Animationen\n               (Logo-Aufbau, Einblendungen) bleiben davon unber\u00fchrt und\n               weiterhin aus, das regelt das CSS weiter oben. *\/\n    var VIDEO_TROTZ_REDUZIERTER_BEWEGUNG = false;\n    var darfLaufen = !reduced || VIDEO_TROTZ_REDUZIERTER_BEWEGUNG;\n\n    bgVid.muted = true;               \/* iOS: muss vor play() gesetzt sein *\/\n    bgVid.loop  = true;               \/* l\u00e4uft dauerhaft weiter *\/\n    \/* Doppelt gesichert: playsinline steht auch im HTML, aber \u00e4ltere\n       iOS-Versionen kennen nur das webkit-Attribut. Ohne das rei\u00dft iPhone\n       das Video in den Vollbildmodus statt es im Hintergrund zu spielen. *\/\n    bgVid.playsInline = true;\n    bgVid.setAttribute('playsinline','');\n    bgVid.setAttribute('webkit-playsinline','');\n    \/* ---- Notfall: keine Videodatei abspielbar oder nicht erreichbar ----\n       Dann bekommt die Section die Klasse myre-hero--kein-video, das <video>\n       wird ausgeblendet und das Poster aus --myre-poster \u00fcbernimmt. Damit\n       verschwindet auch der Play-Button, den Safari sonst selbst dar\u00fcberlegt.\n       Zwei Wege f\u00fchren dorthin:\n       1) Das error-Ereignis am letzten <source> \u2013 kommt sofort, wenn eine\n          Datei 404 ist oder das Format nicht dekodiert werden kann.\n       2) Ein Sicherheitsnetz nach WARTE_MS: Wenn bis dahin nicht ein\n          einziges Frame da ist (readyState bleibt 0), l\u00e4uft nichts.\n          6 Sekunden sind bewusst gro\u00dfz\u00fcgig \u2013 ein langsames Handynetz soll\n          nicht f\u00e4lschlich als Fehler gelten. *\/\n    var WARTE_MS = 6000;\n    var keinVideo = function(){ hero.classList.add('myre-hero--kein-video'); };\n    var dochVideo = function(){ hero.classList.remove('myre-hero--kein-video'); };\n    bgVid.addEventListener('error', keinVideo, true);\n    var quellen = bgVid.getElementsByTagName('source');\n    for(var q = 0; q < quellen.length; q++){\n      quellen[q].addEventListener('error', function(){\n        \/* Erst wenn ALLE Quellen durchgefallen sind, ist wirklich Schluss.\n           networkState 3 = NETWORK_NO_SOURCE. *\/\n        if(bgVid.networkState === 3){ keinVideo(); }\n      });\n    }\n    bgVid.addEventListener('loadeddata', dochVideo);\n    bgVid.addEventListener('playing', dochVideo);\n\n    \/* ---- Start, mehrfach abgesichert ----\n       play() gibt ein Promise zur\u00fcck. Wird es abgelehnt, hat der Browser\n       den Autostart verweigert \u2013 das passiert im Energiesparmodus und bei\n       strenger Autoplay-Einstellung. Dann warten wir auf die erste\n       Nutzer-Aktion: EIN Tippen, Klicken, Scrollen oder Tastendruck\n       irgendwo auf der Seite reicht Safari als Erlaubnis. *\/\n    var laeuft = function(){\n      return !bgVid.paused && !bgVid.ended && bgVid.readyState > 2;\n    };\n    var zeigeKnopf = function(){\n      if(!laeuft()) hero.classList.add('myre-hero--tippen');\n    };\n    var versteckeKnopf = function(){ hero.classList.remove('myre-hero--tippen'); };\n    bgVid.addEventListener('playing', versteckeKnopf);\n\n    var versuchStart = function(){\n      if(!darfLaufen) return;\n      var p = bgVid.play();\n      if(p && p.catch){ p.catch(function(){ zeigeKnopf(); }); }\n    };\n\n    \/* Nutzer-Aktionen nachholen. Wichtig: die H\u00f6rer werden ERST entfernt,\n       wenn das Video wirklich l\u00e4uft \u2013 nicht schon nach der ersten Aktion.\n       Ein Scroll gilt n\u00e4mlich nicht als Erlaubnis im Sinne der Browser,\n       ein Tippen schon. W\u00fcrden wir nach dem ersten Ereignis abmelden,\n       h\u00e4tte ein Scroll die einzige Chance verbraucht. *\/\n    var gesten = ['pointerdown','touchstart','mousedown','keydown','scroll'];\n    var nachGeste = function(){ versuchStart(); };\n    var gestenAbmelden = function(){\n      for(var g = 0; g < gesten.length; g++){\n        document.removeEventListener(gesten[g], nachGeste, true);\n      }\n    };\n    for(var g2 = 0; g2 < gesten.length; g2++){\n      document.addEventListener(gesten[g2], nachGeste, true);\n    }\n    bgVid.addEventListener('playing', gestenAbmelden);\n\n    \/* Sobald \u00fcberhaupt Daten da sind, noch einmal versuchen: auf langsamen\n       Verbindungen kommt der erste play()-Aufruf vor den ersten Daten. *\/\n    bgVid.addEventListener('loadeddata', versuchStart);\n    bgVid.addEventListener('canplay', versuchStart);\n\n    \/* Der Knopf startet es direkt \u2013 das ist immer eine echte Nutzer-Aktion\n       und wird deshalb von keinem Browser abgelehnt. *\/\n    if(startKnopf){\n      startKnopf.addEventListener('click', function(){\n        versteckeKnopf();\n        bgVid.muted = true;\n        var p = bgVid.play();\n        if(p && p.catch){ p.catch(function(){ zeigeKnopf(); }); }\n      });\n    }\n\n    window.setTimeout(function(){\n      if(bgVid.readyState === 0 || bgVid.networkState === 3){\n        keinVideo();          \/* gar keine Daten -> Poster \u00fcbernimmt *\/\n      } else if(darfLaufen && !laeuft()){\n        zeigeKnopf();         \/* Daten da, l\u00e4uft aber nicht -> Knopf *\/\n      }\n    }, WARTE_MS);\n\n    if(darfLaufen){\n      versuchStart();\n    } else {\n      \/* Nutzer mit reduzierter Bewegung und Schalter auf false: Standbild.\n         load() erzwingt, dass das erste Frame trotzdem geholt wird \u2013\n         sonst bliebe bei pause() ohne Daten ein leeres Element stehen. *\/\n      bgVid.pause();\n      if(bgVid.readyState === 0){ bgVid.load(); }\n    }\n  }\n  \/* ================================================================\n     LOGO \u2013 animiertes WebP + scharfes Standbild\n     Die Datei hat Loop = 1 fest eingebaut, l\u00e4uft also von sich aus nur\n     EINMAL durch (ca. 3,5 s) und bleibt dann stehen. Danach wird auf das\n     hochaufl\u00f6sende Standbild \u00fcberblendet \u2013 beide Grafiken liegen\n     deckungsgleich \u00fcbereinander, der Wechsel ist nicht zu sehen.\n     Neustart erfolgt \u00fcber einen Cache-Buster (Bild frisch laden).\n     ================================================================ *\/\n  var logoBox = document.getElementById('myreLogo');\n  var logoEl  = document.getElementById('myreLogoImg');\n  if(!logoEl || !logoBox) return;\n  var logoSrc = logoEl.getAttribute('data-src') || logoEl.src;\n  var ANIM_MS = parseInt(logoEl.getAttribute('data-duration'), 10) || 3500;\n  var endTimer = null;\n  \/* Der Timer startet erst, wenn das Bild fertig geladen ist \u2013 sonst\n     w\u00fcrde bei langsamer Verbindung mitten in die Animation geschnitten. *\/\n  logoEl.addEventListener('load', function(){\n    clearTimeout(endTimer);\n    endTimer = setTimeout(function(){\n      logoBox.classList.add('is-done');\n    }, ANIM_MS);\n  });\n  function restartLogo(){\n    if(reduced){ logoBox.classList.add('is-done'); return; }\n    clearTimeout(endTimer);\n    logoBox.classList.remove('is-done');\n    \/* Cache-Buster -> Browser rendert die Animation von Frame 1 *\/\n    logoEl.src = logoSrc + (logoSrc.indexOf('?') > -1 ? '&' : '?') + 'r=' + Date.now();\n    \/* Sicherheitsnetz, falls das load-Event ausbleibt *\/\n    endTimer = setTimeout(function(){\n      logoBox.classList.add('is-done');\n    }, ANIM_MS + 4000);\n  }\n  \/* ---------- 1) Beim Laden der Seite: EINMAL ---------- *\/\n  restartLogo();\n  \/* ---------- 2) Danach nur noch, wenn man WEIT unten war\n                    und wieder ganz nach oben scrollt ----------\n     \"weit unten\"  = mehr als 1,5 Bildschirmh\u00f6hen gescrollt\n     \"wieder oben\" = weniger als 0,3 Bildschirmh\u00f6hen *\/\n  var FAR_DOWN_FACTOR = 1.5;\n  var BACK_UP_FACTOR  = 0.3;\n  var wasFarDown = false;\n  var ticking = false;\n  function onScroll(){\n    if(ticking) return;\n    ticking = true;\n    requestAnimationFrame(function(){\n      ticking = false;\n      var vh = window.innerHeight || 800;\n      var y  = window.pageYOffset || document.documentElement.scrollTop || 0;\n      if(y > vh * FAR_DOWN_FACTOR){\n        wasFarDown = true;\n      } else if(wasFarDown && y < vh * BACK_UP_FACTOR){\n        wasFarDown = false;\n        restartLogo();\n      }\n    });\n  }\n  window.addEventListener('scroll', onScroll, {passive:true});\n  \/* Tab-Wechsel: Hintergrundvideo pausieren\/fortsetzen,\n     das Logo wird dabei NICHT neu gestartet *\/\n  document.addEventListener('visibilitychange', function(){\n    if(document.hidden){\n      if(bgVid) bgVid.pause();\n    } else {\n      \/* darfLaufen statt !reduced: sonst w\u00fcrde der Schalter\n         VIDEO_TROTZ_REDUZIERTER_BEWEGUNG hier wieder ausgehebelt. *\/\n      if(bgVid && darfLaufen){\n        var b = bgVid.play();\n        if(b && b.catch){ b.catch(function(){}); }\n      }\n    }\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-058f111 elementor-widget__width-initial anchor-offset elementor-widget elementor-widget-html\" data-id=\"058f111\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"vision\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Section 2: Philosophie & Vision\n     - Dunkelgr\u00fcner Abschnitt (#0b302d) mit gro\u00dfer, klarer \u00dcberschrift\n     - Texte unver\u00e4ndert\n     - Anker: #vision\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-vision{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n\n    \/* >>> SCHRIFTFARBE <\n       EIN Wei\u00dfton f\u00fcr den gesamten Abschnitt. Wenn der Text irgendwo\n       weicher wirken soll, hier \u00e4ndern \u2013 dann bleibt es \u00fcberall gleich. *\/\n    --myre-weiss:#ffffff;\n\n    \/* >>> SCHRIFTST\u00c4RKEN <\n       --myre-fw-text gilt f\u00fcr ALLE Flie\u00dftexte inkl. der gr\u00fcnen\n       Hervorhebung und des Gr\u00fcnder-Absatzes. Ein Wert, ein Look.\n       400 ist derselbe Wert wie der Flie\u00dftext in der Expertise-\/\n       Netzwerk-Section \u2013 damit sieht der Text hier genauso aus wie\n       die \u00fcbrigen Textelemente auf der Seite. *\/\n    --myre-fw-text:400;        \/* Flie\u00dftext \u2013 wie in den anderen Sections *\/\n    --myre-fw-titel:700;       \/* Zeile 1 der \u00dcberschrift *\/\n    --myre-fw-titel-2:600;     \/* Zeile 2 \u201eNetzwerke.\" (kursiv, gr\u00fcn) \u2013\n                                  gleicher Wert wie die Team- und\n                                  Expertise-\u00dcberschriften *\/\n\n    position:relative;\n    width:100%;\n    background:var(--myre-dark);\n    font-family:'Poppins',sans-serif;\n    overflow:hidden;\n    color:var(--myre-weiss);\n  }\n  .myre-vision *{box-sizing:border-box;margin:0;padding:0;}\n\n  .myre-vision__inner{\n    position:relative;\n    width:100%;\n    margin:0 auto;\n    padding:130px 6vw 140px;\n    text-align:center;\n    z-index:2;\n  }\n\n  \/* ---------- Badge \/ Eyebrow-Pill ---------- *\/\n  .myre-vision__badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 24px;\n    border-radius:999px;\n    background:rgba(255,255,255,.06);\n    border:1px solid rgba(17,200,142,.35);\n    -webkit-backdrop-filter:blur(6px);\n    backdrop-filter:blur(6px);\n    font-size:.8rem;\n    font-weight:500;\n    letter-spacing:.16em;\n    text-transform:uppercase;\n    \/* war rgba(255,255,255,.85) -> jetzt derselbe Wei\u00dfton wie \u00fcberall *\/\n    color:var(--myre-weiss);\n  }\n  .myre-vision__badge::before{\n    content:\"\";\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 0 0 rgba(17,200,142,.5);\n    animation:myreVDot 2.4s ease-out infinite;\n  }\n\n  \/* ---------- Gro\u00dfe \u00dcberschrift ---------- *\/\n  .myre-vision__title{\n    margin-top:34px;\n    font-size:clamp(2.3rem,5.4vw,4.4rem);\n    line-height:1.1;\n    font-weight:var(--myre-fw-titel);\n    letter-spacing:-.5px;\n    color:var(--myre-weiss);\n  }\n  .myre-vision__title span{\n    display:inline-block;\n    \/* Vorher ein Verlauf von #11c88e nach #0ea577 \u2013 #0ea577 steht nicht\n       in den Guidelines und lie\u00df das Wort nach rechts hin abkippen.\n       Jetzt durchgehend Algal fuel. *\/\n    color:var(--myre-green);\n    font-style:italic;\n    font-weight:var(--myre-fw-titel-2);\n  }\n  \/* gr\u00fcne Linie unter der \u00dcberschrift, w\u00e4chst beim Einblenden *\/\n  .myre-vision__line{\n    width:110px;\n    height:3px;\n    margin:36px auto 0;\n    border-radius:3px;\n    background:linear-gradient(to right,var(--myre-green),rgba(17,200,142,.2));\n  }\n  .myre-vision.is-armed .myre-vision__line{\n    width:0;\n    transition:width 1.3s cubic-bezier(.22,.8,.3,1) .5s;\n  }\n  .myre-vision.is-armed.in-view .myre-vision__line{width:110px;}\n\n  \/* ---------- Texte ---------- *\/\n  .myre-vision__lead{\n    margin:44px auto 0;\n    max-width:860px;\n    font-size:clamp(1.05rem,1.6vw,1.3rem);\n    line-height:1.75;\n    font-weight:var(--myre-fw-text);\n    \/* war rgba(255,255,255,.88) -> jetzt voll deckend *\/\n    color:var(--myre-weiss);\n  }\n  \/* Der gr\u00fcne Einschub: war fett (600). Jetzt gleiche Strichst\u00e4rke wie\n     der Satz drumherum \u2013 die Farbe allein tr\u00e4gt die Betonung. *\/\n  .myre-vision__lead strong{\n    font-weight:var(--myre-fw-text);\n    color:var(--myre-green);\n  }\n\n  \/* Gr\u00fcnder-Absatz: war 500 (halbfett) und stach dadurch gegen den\n     oberen Absatz heraus. L\u00e4uft jetzt in derselben St\u00e4rke. *\/\n  .myre-vision__founders{\n    margin:34px auto 0;\n    max-width:700px;\n    font-size:clamp(1rem,1.4vw,1.15rem);\n    line-height:1.75;\n    font-weight:var(--myre-fw-text);\n    color:var(--myre-weiss);\n  }\n\n  \/* ---------- Scroll-Reveal (gestaffelt) ----------\n     WICHTIG: Die Elemente sind standardm\u00e4\u00dfig SICHTBAR. Erst das Skript\n     setzt .is-armed und blendet sie damit zum Animieren aus. Wenn das\n     Skript nicht l\u00e4uft \u2013 etwa weil Elementor das Widget neu einf\u00fcgt \u2013\n     bleibt der Abschnitt einfach sichtbar statt komplett wei\u00df. *\/\n  .myre-vision.is-armed .myre-v-reveal{\n    opacity:0;\n    transform:translateY(36px);\n    transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-vision.is-armed.in-view .myre-v-reveal{opacity:1;transform:translateY(0);}\n\n  \/* Staffelung: vorher \u00fcber nth-of-type gel\u00f6st, das hat nicht gegriffen,\n     weil die Elemente unterschiedliche Tags sind (div, h2, p, p) und\n     nth-of-type je Tag z\u00e4hlt. Jetzt eindeutig \u00fcber eigene Klassen. *\/\n  .myre-vision.is-armed.in-view .myre-v-d1{transition-delay:.05s;}\n  .myre-vision.is-armed.in-view .myre-v-d2{transition-delay:.20s;}\n  .myre-vision.is-armed.in-view .myre-v-d3{transition-delay:.45s;}\n  .myre-vision.is-armed.in-view .myre-v-d4{transition-delay:.65s;}\n\n  \/* ---------- Keyframes ---------- *\/\n  @keyframes myreVDot{\n    0%  {box-shadow:0 0 0 0 rgba(17,200,142,.5);}\n    70% {box-shadow:0 0 0 12px rgba(17,200,142,0);}\n    100%{box-shadow:0 0 0 0 rgba(17,200,142,0);}\n  }\n\n  \/* ---------- Responsive ---------- *\/\n  @media (max-width:1024px){\n    .myre-vision__inner{padding:90px 32px 100px;}\n  }\n  @media (max-width:600px){\n    .myre-vision__inner{padding:76px 22px 84px;}\n    .myre-vision__title{font-size:2.1rem;}\n    .myre-vision__badge{font-size:.7rem;padding:9px 18px;}\n    .myre-vision__lead{font-size:1rem;}\n  }\n\n  \/* ---------- Reduced Motion ---------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-vision .myre-v-reveal{opacity:1 !important;transform:none !important;transition:none !important;}\n    .myre-vision .myre-vision__line{width:110px !important;transition:none !important;}\n    .myre-vision__badge::before{animation:none;}\n  }\n<\/style>\n\n<section class=\"myre-vision\" id=\"vision\">\n  <div class=\"myre-vision__inner\">\n\n    <div class=\"myre-v-reveal myre-v-d1\">\n      <span class=\"myre-vision__badge\">Philosophie und Vision<\/span>\n    <\/div>\n\n    <h2 class=\"myre-vision__title myre-v-reveal myre-v-d2\">\n      Wir schaffen<br><span>Netzwerke.<\/span>\n    <\/h2>\n    <div class=\"myre-vision__line\" aria-hidden=\"true\"><\/div>\n\n    <p class=\"myre-vision__lead myre-v-reveal myre-v-d3\">\n      In der Natur repr\u00e4sentieren Mykorrhiza-Pilze die perfekte Symbiose von\n      Zusammenarbeit und Wachstum. Dieses Prinzip ist unser Leitbild:\n      <strong>Netzwerke, die starke Verbindungen und nachhaltige Ergebnisse\n      erm\u00f6glichen.<\/strong>\n    <\/p>\n\n    <p class=\"myre-vision__founders myre-v-reveal myre-v-d4\">\n      Um diese Philosophie konsequent in Ergebnisse zu transformieren, haben\n      Sven Seipp und Benedict Neuwirth Mykorrhiza Real Estate gegr\u00fcndet.\n    <\/p>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  \/* Scroll-Reveal: Section blendet gestaffelt ein, sobald sie\n     zu ~25% im Viewport ist \u2013 und bleibt danach sichtbar.\n     Robust gegen Elementor: kein document.currentScript, Mehrfachaufruf\n     durch data-myre-init abgesichert, nach 1,8 s Notfall-Sichtbarkeit. *\/\n  function init(){\n    var sections = document.querySelectorAll('.myre-vision');\n    if(!sections.length) return;\n\n    Array.prototype.forEach.call(sections, function(section){\n      if(section.getAttribute('data-myre-init') === '1') return;\n      section.setAttribute('data-myre-init','1');\n\n      var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      \/* Ohne Animation: alles bleibt einfach sichtbar, nichts zu tun. *\/\n      if(reduced || !('IntersectionObserver' in window)) return;\n\n      \/* Ab hier animieren wir \u2013 erst jetzt darf ausgeblendet werden. *\/\n      section.classList.add('is-armed');\n\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if(e.isIntersecting){\n            section.classList.add('in-view');\n            io.disconnect();\n          }\n        });\n      },{threshold:.25});\n      io.observe(section);\n\n      \/* Sicherheitsnetz *\/\n      setTimeout(function(){ section.classList.add('in-view'); }, 1800);\n    });\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  window.addEventListener('load', init);\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', init); }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5ec08f e-con-full e-flex e-con e-parent\" data-id=\"a5ec08f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8501de6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"8501de6\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"leistungen\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Section 3: Leistungs\u00fcbersicht\n     - Anker: #Leistungen\n     - Pille nur noch \u201eLeistungs\u00fcbersicht\"\n     - \u00dcberschrift darunter: \u201eund\" gr\u00fcn, \u201eSubstanz\" und \u201eMehrwert\" dunkel\n     - Der bisherige Boutique-Satz steht jetzt kleiner als Vorzeile\n     - Der Absatz darunter hat am Desktop dieselbe Schriftgr\u00f6\u00dfe wie diese\n       Vorzeile (20,8px). Auf Tablet und Handy bleibt er bei 16px.\n     - 3 Leistungs-Bl\u00f6cke untereinander, versetzt angeordnet\n     - Hover\/Tap auf das Bild: Unterpunkte poppen auf (echte Punkte)\n     - Scroll-Animationen, mobile-optimiert\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-services{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n    position:relative;\n    width:100%;\n    background:#ffffff;\n    font-family:'Poppins',sans-serif;\n    overflow:hidden;\n    color:var(--myre-dark);\n  }\n  .myre-services *{box-sizing:border-box;margin:0;padding:0;}\n\n  .myre-services__inner{\n    position:relative;\n    width:100%;\n    max-width:1300px;\n    margin:0 auto;\n    padding:120px 6vw 130px;\n  }\n\n  \/* ---------- Badge ----------\n     Enth\u00e4lt wieder NUR die Rubrik \u201eLeistungs\u00fcbersicht\". Der Zusatz\n     \u201eSubstanz und Mehrwert\" steht jetzt als \u00dcberschrift darunter.\n     Damit ist die Pille wieder kurz und einzeilig \u2013 deshalb zur\u00fcck auf\n     align-items:center und line-height:1, also exakt die gleiche Pille\n     wie in Team, Expertise und den \u00fcbrigen Abschnitten. *\/\n  .myre-services__badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 24px;\n    border-radius:999px;\n    background:rgba(11,48,45,.04);\n    border:1px solid rgba(11,48,45,.15);\n    font-size:.8rem;\n    font-weight:500;\n    letter-spacing:.16em;\n    line-height:1;\n    text-transform:uppercase;\n    color:var(--myre-dark);\n  }\n  .myre-services__badge::before{\n    content:\"\";\n    flex:0 0 auto;            \/* Punkt darf nicht schrumpfen *\/\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 0 0 rgba(17,200,142,.5);\n    animation:myreSDot 2.4s ease-out infinite;\n  }\n\n  \/* ---------- Key Message + Text ---------- *\/\n  .myre-services__title{\n    margin-top:34px;\n    max-width:900px;\n    \/* War clamp(1.7rem,3.4vw,2.9rem) und wuchs schneller als die anderen\n       \u00dcberschriften. Jetzt exakt dieselbe Formel wie in Team und\n       Expertise \u2013 fett bleibt sie. *\/\n    font-size:clamp(1.9rem,3.2vw,2.9rem);\n    line-height:1.22;\n    font-weight:700;\n    letter-spacing:-.5px;\n    color:var(--myre-dark);\n  }\n  \/* F\u00e4rbt einzelne W\u00f6rter der \u00dcberschrift gr\u00fcn. Aktuell greift die Regel\n     nur beim \u201eund\" \u2013 \u201eSubstanz\" und \u201eMehrwert\" stehen ohne <span> und\n     bleiben dadurch dunkel. *\/\n  .myre-services__title span{\n    \/* Markenfarbe Algal fuel #11c88e, voll deckend *\/\n    color:var(--myre-green) !important;\n  }\n\n  \/* ---------- Vorzeile unter der \u00dcberschrift ----------\n     Das ist der bisherige Boutique-Satz. Er steht eine Stufe kleiner als\n     die \u00dcberschrift und gibt am Desktop die Textgr\u00f6\u00dfe f\u00fcr den Absatz\n     darunter vor: beide stehen dort auf clamp(1.1rem,1.6vw,1.3rem),\n     also auf 20,8px. Die Leseabfolge Rubrik -> \u00dcberschrift -> Kernsatz ->\n     Erl\u00e4uterung entsteht jetzt \u00fcber Position und Zeilenabstand, nicht\n     mehr \u00fcber die Schriftgr\u00f6\u00dfe.\n     Wenn der Kernsatz doch wieder deutlicher herausstehen soll, ist der\n     sauberste Griff font-weight:500 statt 400 \u2013 dann bleibt die Gr\u00f6\u00dfe\n     gleich und nur das Gewicht trennt die beiden Abs\u00e4tze. *\/\n  .myre-services__lead{\n    margin-top:22px;\n    max-width:820px;\n    font-size:clamp(1.1rem,1.6vw,1.3rem);\n    line-height:1.55;\n    font-weight:400;\n    color:var(--myre-dark);\n  }\n\n  .myre-services__text{\n    \/* War 26px zur \u00dcberschrift. Jetzt sitzt die Vorzeile dazwischen,\n       deshalb hier etwas enger, damit beide Abs\u00e4tze zusammengeh\u00f6ren. *\/\n    margin-top:20px;\n    max-width:780px;\n    \/* >>> SCHRIFTGR\u00d6SSE DES ABSATZES <<<\n       War clamp(1rem,1.4vw,1.15rem), am Desktop also 18,4px. Jetzt exakt\n       dieselbe Formel wie beim Kernsatz dar\u00fcber: am Desktop 20,8px.\n       ACHTUNG: Diese Zeile gilt nur ab 1025px Breite. F\u00fcr Tablet und Handy\n       steht die alte, kleinere Formel weiter unten im Media Query\n       @media (max-width:1024px) \u2013 wer hier etwas \u00e4ndert, muss dort\n       mitziehen, sonst springt die Gr\u00f6\u00dfe an der Grenze. *\/\n    font-size:clamp(1.1rem,1.6vw,1.3rem);\n    \/* Bleibt bei 1.75 und damit luftiger als der Kernsatz (1.55). Bei\n       gleicher Schriftgr\u00f6\u00dfe ist der Zeilenabstand das, was den langen\n       Absatz noch als Flie\u00dftext lesbar h\u00e4lt. *\/\n    line-height:1.75;\n    \/* War 300 mit rgba(11,48,45,.85) \u2013 d\u00fcnn und leicht ausgegraut.\n       Jetzt wie Vision und Expertise: 400, volle Deckkraft. *\/\n    font-weight:400;\n    color:var(--myre-dark);\n  }\n\n  \/* ---------- Leistungs-Bl\u00f6cke: untereinander, versetzt ---------- *\/\n  .myre-services__list{\n    margin-top:80px;\n    display:flex;\n    flex-direction:column;\n    gap:64px;\n  }\n\n  .myre-service{\n    position:relative;\n    width:min(100%,820px);\n  }\n  \/* versetzt: 1. links, 2. rechts, 3. links *\/\n  .myre-service:nth-child(odd){align-self:flex-start;}\n  .myre-service:nth-child(even){align-self:flex-end;}\n\n  .myre-service__card{\n    position:relative;\n    height:min(52vh,460px);\n    min-height:360px;\n    border-radius:26px;\n    overflow:hidden;\n    cursor:pointer;\n    box-shadow:0 30px 70px -25px rgba(11,48,45,.35);\n    transition:transform .6s cubic-bezier(.22,.8,.3,1),box-shadow .6s ease;\n  }\n  .myre-service__card:hover{\n    transform:translateY(-6px);\n    box-shadow:0 45px 90px -25px rgba(11,48,45,.45);\n  }\n  .myre-service__card img{\n    position:absolute;inset:0;\n    width:100%;height:100%;\n    object-fit:cover;\n    transition:transform 1.4s cubic-bezier(.22,.8,.3,1),filter .8s ease;\n  }\n  .myre-service__card:hover img{transform:scale(1.07);}\n\n  \/* Grundzustand: dezenter Verlauf + Titel unten *\/\n  .myre-service__scrim{\n    position:absolute;inset:0;\n    background:linear-gradient(to top,rgba(11,48,45,.75) 0%,rgba(11,48,45,.15) 45%,rgba(11,48,45,0) 70%);\n    transition:opacity .6s ease;\n    z-index:1;\n  }\n  .myre-service__label{\n    position:absolute;\n    left:34px;bottom:30px;\n    z-index:3;\n    color:#fff;\n    transition:transform .6s cubic-bezier(.22,.8,.3,1),opacity .5s ease;\n  }\n  .myre-service__label h3{\n    font-size:clamp(1.4rem,2.4vw,2rem);\n    font-weight:600;\n    letter-spacing:-.3px;\n    color:#ffffff !important; \/* !important: \u00fcbersteuert Theme-Styles f\u00fcr \u00dcberschriften *\/\n    text-shadow:0 2px 18px rgba(11,48,45,.55);\n  }\n  .myre-service__label small{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    margin-top:8px;\n    font-size:.78rem;\n    letter-spacing:.16em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,.85) !important;\n    font-weight:400;\n    text-shadow:0 1px 10px rgba(11,48,45,.5);\n  }\n  .myre-service__label small::after{\n    content:\"+\";\n    display:flex;align-items:center;justify-content:center;\n    width:22px;height:22px;\n    border-radius:50%;\n    border:1px solid rgba(255,255,255,.5);\n    font-size:.9rem;\n    transition:transform .5s ease,background .5s ease,border-color .5s ease;\n  }\n\n  \/* Hover\/Open: dunkelgr\u00fcner Layer + Unterpunkte poppen auf *\/\n  .myre-service__overlay{\n    position:absolute;inset:0;\n    z-index:2;\n    background:linear-gradient(135deg,rgba(11,48,45,.94) 0%,rgba(11,48,45,.88) 60%,rgba(17,200,142,.30) 130%);\n    opacity:0;\n    transition:opacity .55s ease;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n    padding:44px 52px;\n  }\n  .myre-service__overlay h4{\n    color:#ffffff !important;\n    font-size:clamp(1.2rem,1.8vw,1.5rem);\n    font-weight:600;\n    margin-bottom:20px;\n  }\n  \/* \u00dcberschrift durchgehend in EINER Farbe (kein zweifarbiger Wortanfang) *\/\n  .myre-service__overlay h4 em{\n    font-style:normal;\n    color:inherit;\n  }\n  .myre-service__points{\n    list-style:none;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:10px 34px;\n  }\n  .myre-service__points li{\n    position:relative;\n    padding-left:22px;\n    color:rgba(255,255,255,.92);\n    font-size:clamp(.86rem,1.1vw,1rem);\n    font-weight:300;\n    line-height:1.5;\n    opacity:0;\n    transform:translateY(14px);\n    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.3,1);\n  }\n  \/* echte Punkte statt Striche *\/\n  .myre-service__points li::before{\n    content:\"\";\n    position:absolute;\n    left:0;top:.55em;\n    width:8px;height:8px;\n    border-radius:50%;\n    background:var(--myre-green);\n  }\n\n  \/* offen (Hover am Desktop \/ Tap am Handy via .is-open) *\/\n  .myre-service__card:hover .myre-service__overlay,\n  .myre-service.is-open .myre-service__overlay{opacity:1;}\n  .myre-service__card:hover .myre-service__points li,\n  .myre-service.is-open .myre-service__points li{opacity:1;transform:translateY(0);}\n  \/* Stagger der Punkte *\/\n  .myre-service__points li:nth-child(1){transition-delay:.10s;}\n  .myre-service__points li:nth-child(2){transition-delay:.15s;}\n  .myre-service__points li:nth-child(3){transition-delay:.20s;}\n  .myre-service__points li:nth-child(4){transition-delay:.25s;}\n  .myre-service__points li:nth-child(5){transition-delay:.30s;}\n  .myre-service__points li:nth-child(6){transition-delay:.35s;}\n  .myre-service__points li:nth-child(7){transition-delay:.40s;}\n  .myre-service__points li:nth-child(8){transition-delay:.45s;}\n  .myre-service__points li:nth-child(9){transition-delay:.50s;}\n\n  .myre-service__card:hover .myre-service__label,\n  .myre-service.is-open .myre-service__label{\n    transform:translateY(10px);\n    opacity:0;\n  }\n  .myre-service__card:hover .myre-service__scrim,\n  .myre-service.is-open .myre-service__scrim{opacity:0;}\n\n  \/* ---------- Scroll-Reveal ----------\n     Elemente sind standardm\u00e4\u00dfig SICHTBAR. Erst das Skript setzt\n     .is-armed und blendet sie zum Animieren aus. L\u00e4uft das Skript\n     nicht \u2013 etwa weil Elementor das Widget neu einf\u00fcgt \u2013 bleibt der\n     Abschnitt sichtbar statt wei\u00df. *\/\n  .myre-services.is-armed .myre-s-reveal{\n    opacity:0;\n    transform:translateY(40px);\n    transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-services.is-armed .myre-s-reveal.in-view{opacity:1;transform:translateY(0);}\n\n  \/* ---------- Keyframes ---------- *\/\n  @keyframes myreSDot{\n    0%  {box-shadow:0 0 0 0 rgba(17,200,142,.5);}\n    70% {box-shadow:0 0 0 12px rgba(17,200,142,0);}\n    100%{box-shadow:0 0 0 0 rgba(17,200,142,0);}\n  }\n\n  \/* ---------- Responsive ---------- *\/\n  @media (max-width:1024px){\n    .myre-services__inner{padding:90px 32px 100px;}\n    .myre-service{width:100%;}\n    .myre-service__overlay{padding:34px 36px;}\n\n    \/* >>> ABSATZ AUF TABLET UND HANDY <<<\n       Die Vergr\u00f6\u00dferung des Absatzes gilt bewusst NUR am Desktop. Hier\n       steht wieder die alte Formel, dadurch bleibt der Absatz auf Tablet\n       und Handy bei 16px \u2013 genau wie vor der \u00c4nderung. Der Kernsatz\n       dar\u00fcber steht dort weiterhin auf 17,6px, die alte Abstufung ist\n       auf kleinen Ger\u00e4ten also unver\u00e4ndert erhalten.\n       Wer die gr\u00f6\u00dfere Schrift auch mobil will, l\u00f6scht einfach diese\n       eine Regel. *\/\n    .myre-services__text{font-size:clamp(1rem,1.4vw,1.15rem);}\n  }\n  @media (max-width:600px){\n    .myre-services__inner{padding:76px 22px 84px;}\n    .myre-services__list{margin-top:56px;gap:36px;}\n    .myre-service__card{height:auto;min-height:420px;}\n    .myre-service__points{grid-template-columns:1fr;gap:8px;}\n    .myre-service__overlay{padding:28px 26px;justify-content:flex-end;}\n    .myre-service__label{left:24px;bottom:22px;}\n    \/* Die Sonderregel f\u00fcr die lange, zweizeilige Pille ist entfallen \u2013\n       \u201eLeistungs\u00fcbersicht\" passt auch auf dem Handy in eine Zeile. *\/\n    .myre-services__lead{margin-top:18px;}\n  }\n\n  \/* ---------- Reduced Motion ---------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-services .myre-s-reveal{opacity:1 !important;transform:none !important;transition:none !important;}\n    .myre-service__points li{transition:none;}\n    .myre-services__badge::before{animation:none;}\n  }\n<\/style>\n\n<section class=\"myre-services\" id=\"Leistungen\">\n  <div class=\"myre-services__inner\">\n\n    <div class=\"myre-s-reveal\">\n      <span class=\"myre-services__badge\">Leistungs\u00fcbersicht<\/span>\n    <\/div>\n\n    <!-- Key Message: nur das \u201eund\" ist gr\u00fcn, \u201eSubstanz\" und \u201eMehrwert\"\n         stehen dunkel. Das Gr\u00fcn kommt aus .myre-services__title span \u2013\n         wer es anders verteilen will, setzt den <span> um. -->\n    <h2 class=\"myre-services__title myre-s-reveal\">\n      Substanz <span>und<\/span> Mehrwert\n    <\/h2>\n\n    <!-- Der bisherige \u00dcberschriften-Satz, jetzt als Vorzeile darunter -->\n    <p class=\"myre-services__lead myre-s-reveal\">\n      Mykorrhiza Real Estate ist eine Development Boutique,\n      die Immobilien mit Substanz und Mehrwert entwickelt.\n    <\/p>\n\n    <p class=\"myre-services__text myre-s-reveal\">\n      Unser bewusst kleines, spezialisiertes Team verbindet Projektentwicklung\n      und Investment Management und begleitet Projekte \u00fcber die gesamte\n      Wertsch\u00f6pfungskette &ndash; vom Ankauf \u00fcber die Umsetzung bis hin zum Exit.\n      Mit Kreativit\u00e4t, Effizienz und einem starken lokalen Netzwerk meistern wir\n      selbst komplexeste Herausforderungen und schaffen nachhaltige, hochwertige\n      Immobilienl\u00f6sungen &ndash; global inspiriert und lokal umgesetzt.\n    <\/p>\n\n    <!-- 3 Bl\u00f6cke: untereinander & versetzt -->\n    <div class=\"myre-services__list\">\n\n      <!-- 1) Projektentwicklung -->\n      <div class=\"myre-service myre-s-reveal\">\n        <div class=\"myre-service__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2025\/01\/MAINTOR5.jpg\" alt=\"Projektentwicklung\">\n          <div class=\"myre-service__scrim\"><\/div>\n          <div class=\"myre-service__label\">\n            <h3>Projektentwicklung<\/h3>\n            <small>Leistungen entdecken<\/small>\n          <\/div>\n          <div class=\"myre-service__overlay\">\n            <h4>Projektentwicklung<\/h4>\n            <ul class=\"myre-service__points\">\n              <li>Konzeption &amp; Produktdefinition<\/li>\n              <li>Planung &amp; Steuerung<\/li>\n              <li>Transaction Management<\/li>\n              <li>Baurechtschaffung<\/li>\n              <li>Finanzierungsstrukturen<\/li>\n              <li>Projektrealisierung<\/li>\n              <li>Vermarktung &amp; Vertrieb<\/li>\n              <li>JV-Investments<\/li>\n              <li>Investment Management<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 2) Service Development -->\n      <div class=\"myre-service myre-s-reveal\">\n        <div class=\"myre-service__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2025\/01\/MAINTOR1.jpg\" alt=\"Service Development\">\n          <div class=\"myre-service__scrim\"><\/div>\n          <div class=\"myre-service__label\">\n            <h3>Service Development<\/h3>\n            <small>Leistungen entdecken<\/small>\n          <\/div>\n          <div class=\"myre-service__overlay\">\n            <h4>Service Development<\/h4>\n            <ul class=\"myre-service__points\">\n              <li>Projektinitiierung<\/li>\n              <li>Machbarkeitsstudien<\/li>\n              <li>Nutzungskonzepte &amp; Strategien<\/li>\n              <li>Wirtschaftlichkeitsoptimierung<\/li>\n              <li>Beh\u00f6rdenmanagement<\/li>\n              <li>Projektmanagement<\/li>\n              <li>Marketingstrategien<\/li>\n              <li>Kapitalisierung &amp; Verkauf<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 3) Interimsnutzung -->\n      <div class=\"myre-service myre-s-reveal\">\n        <div class=\"myre-service__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2025\/01\/FOUR2.jpg\" alt=\"Interimsnutzung\">\n          <div class=\"myre-service__scrim\"><\/div>\n          <div class=\"myre-service__label\">\n            <h3>Interimsnutzung<\/h3>\n            <small>Leistungen entdecken<\/small>\n          <\/div>\n          <div class=\"myre-service__overlay\">\n            <h4>Interimsnutzung<\/h4>\n            <ul class=\"myre-service__points\">\n              <li>Realisierungspr\u00fcfungen<\/li>\n              <li>Marktanalysen &amp; Marketing<\/li>\n              <li>Produktdefinition<\/li>\n              <li>Placemaking<\/li>\n              <li>Umnutzung &amp; Restrukturierung<\/li>\n              <li>Baurechtliche Konzeption<\/li>\n              <li>Politische Koordination<\/li>\n              <li>\u00d6ffentlichkeitsbeteiligungen<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\nfunction init(){\n  var section = document.getElementById('Leistungen');\n  if(!section) return;\n  if(section.getAttribute('data-myre-init') === '1') return;\n  section.setAttribute('data-myre-init','1');\n\n  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------- Scroll-Reveal: Elemente einzeln einblenden ----------\n     Ohne Animation bleibt alles einfach sichtbar (CSS-Grundzustand),\n     dann ist hier nichts zu tun. Nur wenn wir wirklich animieren,\n     wird mit .is-armed \u00fcberhaupt erst ausgeblendet. *\/\n  if(!reduced && ('IntersectionObserver' in window)){\n    section.classList.add('is-armed');\n\n    var reveals = section.querySelectorAll('.myre-s-reveal');\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(e){\n        if(e.isIntersecting){\n          e.target.classList.add('in-view');\n          io.unobserve(e.target);\n        }\n      });\n    },{threshold:.18});\n    Array.prototype.forEach.call(reveals,function(el){ io.observe(el); });\n\n    \/* Sicherheitsnetz: nach 1,8 s ist alles sichtbar, komme was wolle *\/\n    setTimeout(function(){\n      Array.prototype.forEach.call(reveals,function(el){ el.classList.add('in-view'); });\n    },1800);\n  }\n\n  \/* ---------- Mobile \/ Touch: Tap \u00f6ffnet & schlie\u00dft die Unterpunkte ---------- *\/\n  var isTouch = window.matchMedia('(hover:none)').matches;\n  var cards = section.querySelectorAll('.myre-service');\n  Array.prototype.forEach.call(cards,function(card){\n    var inner = card.querySelector('.myre-service__card');\n    if(isTouch){\n      inner.addEventListener('click', function(){\n        var wasOpen = card.classList.contains('is-open');\n        Array.prototype.forEach.call(cards,function(c){ c.classList.remove('is-open'); });\n        if(!wasOpen) card.classList.add('is-open');\n      });\n    }\n    \/* Tastatur-Bedienung (Fokus \u00f6ffnet Overlay) *\/\n    inner.addEventListener('focus', function(){ card.classList.add('is-open'); });\n    inner.addEventListener('blur',  function(){ card.classList.remove('is-open'); });\n  });\n}\n\n  \/* Robust gegen Elementor: mehrere Einstiegspunkte, Doppelaufruf ist\n     durch data-myre-init abgesichert. *\/\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  window.addEventListener('load', init);\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', init); }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-383f1ad e-con-full e-flex e-con e-parent\" data-id=\"383f1ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54e2522 elementor-widget elementor-widget-html\" data-id=\"54e2522\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Section 4: 360\u00b0-Ansatz\n     - OHNE \u00dcberschrift \u2013 die ovale 360\u00b0-Grafik steht f\u00fcr sich\n     - Logo (IMG_5315) im Zentrum vor dem \"360\u00b0\"\n     - Ovale Orbits, die langsam rotieren \u2013 KEINE Pfeile\n     - 3 Punkte um das Zentrum, Beschreibung poppt bei Hover\/Tap auf\n     - Scroll-Reveal-Effekte, mobile-optimiert\n\n     \u00c4NDERUNGEN in dieser Fassung:\n     1) Die Punkte links und rechts sitzen tiefer (60 % -> 78 %), damit\n        sich mit dem oberen Punkt ein gleichschenkliges Dreieck ergibt.\n        Der Wert steckt in --myre-node-y und ist frei verstellbar.\n     2) Die gestaffelte Einblendung der drei Punkte lief nie \u2013 Details\n        im Kommentar bei der Staffelung.\n     3) Einblendung abgesichert, damit der Abschnitt nicht leer bleibt,\n        falls das Skript in Elementor nicht anspringt.\n     4) Schrift in den drei Karten vergr\u00f6\u00dfert: Titel jetzt 20,8px am\n        Desktop \u2013 dieselbe Gr\u00f6\u00dfe wie der Kernsatz im Abschnitt Leistungen \u2013,\n        die aufklappende Beschreibung 17px statt 13,3px. Damit die Karten\n        dadurch nicht in die H\u00f6he wachsen, sind sie breiter geworden und\n        die B\u00fchne hat etwas mehr Bauh\u00f6he bekommen. Logo und die Zahl 360\u00b0\n        in der Mitte sind bewusst unver\u00e4ndert geblieben.\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-360{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n\n    \/* >>> POSITION DER DREI PUNKTE <<<\n       Gemessen von der Oberkante der B\u00fchne, jeweils die Mitte der Karte.\n       --myre-node-top   Spitze des Dreiecks (oben mittig)\n       --myre-node-y     Basis des Dreiecks (links und rechts, gleiche H\u00f6he\n                         -> daher gleichschenklig)\n       Gr\u00f6\u00dferer Wert = weiter unten = spitzeres Dreieck.\n       Ab ca. 86 % kann eine aufgeklappte Beschreibung unten ansto\u00dfen. *\/\n    --myre-node-top:0%;\n    --myre-node-y:78%;\n\n    \/* >>> SCHRIFTGR\u00d6SSEN IN DEN KARTEN <<<\n       --myre-titel steht auf exakt derselben Formel wie der Kernsatz im\n       Abschnitt Leistungen (\u201eMykorrhiza Real Estate ist eine Development\n       Boutique \u2026\"), also 20,8px am Desktop. Vorher waren es 16px.\n       --myre-text ist die Beschreibung, die beim Hover aufklappt. Sie\n       bleibt bewusst eine Stufe kleiner als der Titel, sonst verliert die\n       Karte ihre Gliederung. Vorher fix 0.83rem = 13,3px, jetzt 17px.\n       Beide Werte h\u00e4ngen aneinander: wer den Titel anhebt, sollte den\n       Text mitziehen, sonst kippt das Verh\u00e4ltnis. *\/\n    --myre-titel:clamp(1.1rem,1.6vw,1.3rem);\n    --myre-text:clamp(.95rem,1.2vw,1.0625rem);\n\n    \/* >>> BREITE DER KARTEN <<<\n       Gr\u00f6\u00dfere Schrift hei\u00dft mehr Zeilenumbr\u00fcche. Damit die Karten davon\n       nicht in die H\u00f6he wachsen, sind sie mitgewachsen: 280px -> 310px.\n       Die obere Karte bekommt mehr, weil sie den mit Abstand l\u00e4ngsten\n       Text tr\u00e4gt und oben mittig am meisten Platz frei hat. Bliebe sie\n       bei 310px, w\u00fcrde ihre aufgeklappte Beschreibung ins Logo in der\n       Mitte hineinlaufen.\n       Wer sie doch gleich breit haben will: --myre-karte-w-top auf\n       310px setzen und --myre-buehne unten auf 16\/12 stellen, dann ist\n       wieder genug Luft nach unten. *\/\n    --myre-karte-w:310px;\n    --myre-karte-w-top:400px;\n\n    \/* >>> H\u00d6HE DER B\u00dcHNE <<<\n       War 16\/10. Die gr\u00f6\u00dfere Schrift macht die aufgeklappten Karten\n       h\u00f6her, deshalb etwas mehr Bauh\u00f6he: bei 980px Breite sind das 705px\n       statt 612px. Dadurch rutscht die Mitte rund 46px nach unten, und\n       zwischen der aufgeklappten oberen Karte und dem Logo bleiben\n       nachgerechnet 25px Luft.\n       Kleinerer zweiter Wert = flacher = enger. Bei 16\/11 w\u00e4ren es nur\n       noch 10px Abstand \u2013 das ist zu knapp, sobald ein Text mal eine\n       Zeile mehr braucht. *\/\n    --myre-buehne:16\/11.5;\n\n    position:relative;\n    width:100%;\n    background:var(--myre-dark);\n    font-family:'Poppins',sans-serif;\n    overflow:hidden;\n    \/* EIN Wei\u00dfton f\u00fcr den ganzen Abschnitt \u2013 identisch zur Vision-Section *\/\n    color:#ffffff;\n  }\n  .myre-360 *{box-sizing:border-box;margin:0;padding:0;}\n\n  .myre-360__inner{\n    position:relative;\n    width:100%;\n    max-width:1300px;\n    margin:0 auto;\n    padding:110px 6vw 120px;\n    display:flex;\n    justify-content:center;\n    z-index:2;\n  }\n\n  \/* ---------- B\u00fchne mit den ovalen Orbits ---------- *\/\n  .myre-360__stage{\n    position:relative;\n    width:min(100%,980px);\n    aspect-ratio:var(--myre-buehne);\n    display:flex;\n    align-items:center;\n    justify-content:center;\n  }\n\n  \/* Orbits: zwei Ellipsen, langsam gegenl\u00e4ufig rotierend *\/\n  .myre-360__orbit{\n    position:absolute;\n    left:50%;top:50%;\n    border:1px solid rgba(17,200,142,.28);\n    border-radius:50%;\n    pointer-events:none;\n  }\n  .myre-360.is-armed .myre-360__orbit{\n    opacity:0;\n    transition:opacity 1.4s ease .3s;\n  }\n  .myre-360.is-armed.in-view .myre-360__orbit{opacity:1;}\n  .myre-360__orbit--1{\n    width:88%;height:78%;\n    transform:translate(-50%,-50%) rotate(-8deg);\n    animation:myre360Spin 60s linear infinite;\n  }\n  .myre-360__orbit--2{\n    width:70%;height:58%;\n    border-color:rgba(255,255,255,.12);\n    transform:translate(-50%,-50%) rotate(6deg);\n    animation:myre360SpinRev 80s linear infinite;\n  }\n  \/* kleiner Satellit auf dem \u00e4u\u00dferen Orbit *\/\n  .myre-360__orbit--1::after{\n    content:\"\";\n    position:absolute;\n    top:-5px;left:50%;\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 14px rgba(17,200,142,.8);\n  }\n\n  \/* ---------- Zentrum: Logo + 360\u00b0 ---------- *\/\n  .myre-360__center{\n    position:relative;\n    z-index:3;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:14px;\n    text-align:center;\n  }\n  .myre-360.is-armed .myre-360__center{\n    opacity:0;\n    transform:scale(.7);\n    transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.34,1.4,.4,1);\n  }\n  .myre-360.is-armed.in-view .myre-360__center{opacity:1;transform:scale(1);}\n\n  .myre-360__core{\n    position:relative;\n    width:clamp(120px,16vw,170px);\n    aspect-ratio:1;\n    border-radius:50%;\n    background:rgba(17,200,142,.08);\n    border:1px solid rgba(17,200,142,.4);\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    -webkit-backdrop-filter:blur(4px);\n    backdrop-filter:blur(4px);\n  }\n  \/* pulsierender Glow-Ring ums Zentrum *\/\n  .myre-360__core::before{\n    content:\"\";\n    position:absolute;inset:-1px;\n    border-radius:50%;\n    border:1px solid rgba(17,200,142,.5);\n    animation:myre360Ring 3.2s ease-out infinite;\n    pointer-events:none;\n  }\n  .myre-360__core img{\n    width:58%;\n    height:auto;\n    display:block;\n    filter:drop-shadow(0 6px 20px rgba(17,200,142,.35));\n    animation:myre360Float 6s ease-in-out infinite alternate;\n  }\n  .myre-360__degree{\n    font-size:clamp(1.3rem,2.2vw,1.8rem);\n    font-weight:700;\n    letter-spacing:.04em;\n    color:#ffffff !important;\n  }\n  .myre-360__degree em{\n    font-style:normal;\n    color:#ffffff !important;\n  }\n\n  \/* ---------- Die 3 Punkte um das Zentrum ----------\n     Grundzustand sichtbar; erst .is-armed blendet zum Animieren aus. *\/\n  .myre-360__node{\n    position:absolute;\n    z-index:4;\n    max-width:var(--myre-karte-w);\n  }\n  \/* Sonderbreite nur f\u00fcr die obere Karte, siehe --myre-karte-w-top *\/\n  .myre-360__node--top{max-width:var(--myre-karte-w-top);}\n  .myre-360.is-armed .myre-360__node{\n    opacity:0;\n    transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-360.is-armed.in-view .myre-360__node{opacity:1;}\n\n  \/* Positionen. Die Verschiebung um 24px beim Einblenden steckt jetzt\n     direkt in den Transform-Werten, damit sie sich nicht mit der\n     Zentrierung (-50%) ins Gehege kommt. *\/\n  .myre-360__node--top{\n    top:var(--myre-node-top);\n    left:50%;\n    transform:translate(-50%,0);\n  }\n  .myre-360__node--left{\n    top:var(--myre-node-y);\n    left:0;\n    transform:translate(0,-50%);\n  }\n  .myre-360__node--right{\n    top:var(--myre-node-y);\n    right:0;\n    transform:translate(0,-50%);\n  }\n  .myre-360.is-armed .myre-360__node--top  {transform:translate(-50%,24px);}\n  .myre-360.is-armed .myre-360__node--left {transform:translate(0,calc(-50% + 24px));}\n  .myre-360.is-armed .myre-360__node--right{transform:translate(0,calc(-50% + 24px));}\n  .myre-360.is-armed.in-view .myre-360__node--top  {transform:translate(-50%,0);}\n  .myre-360.is-armed.in-view .myre-360__node--left {transform:translate(0,-50%);}\n  .myre-360.is-armed.in-view .myre-360__node--right{transform:translate(0,-50%);}\n\n  \/* Staffelung: vorher \u00fcber :nth-of-type(1..4) gel\u00f6st. Das hat nie\n     gegriffen, weil in der B\u00fchne zuerst zwei Orbit-DIVs und das\n     Zentrums-DIV stehen \u2013 die Punkte sind also das 4., 5. und 6. DIV,\n     und es gibt nur drei davon, nicht vier. Jetzt eindeutig benannt. *\/\n  .myre-360.is-armed.in-view .myre-360__node--top  {transition-delay:.50s;}\n  .myre-360.is-armed.in-view .myre-360__node--left {transition-delay:.70s;}\n  .myre-360.is-armed.in-view .myre-360__node--right{transition-delay:.90s;}\n\n  \/* Node = eine Karte: Titel immer sichtbar, Beschreibung klappt\n     IN der Karte auf (liegt nicht lose \u00fcber der Grafik) *\/\n  .myre-360__card2{\n    display:block;\n    width:100%;\n    padding:18px 24px;\n    border-radius:18px;\n    background:rgba(8,36,33,.92);\n    border:1px solid rgba(17,200,142,.35);\n    -webkit-backdrop-filter:blur(8px);\n    backdrop-filter:blur(8px);\n    cursor:pointer;\n    text-align:center;\n    transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease;\n  }\n  .myre-360__node:hover .myre-360__card2,\n  .myre-360__node.is-open .myre-360__card2{\n    border-color:var(--myre-green);\n    transform:translateY(-3px);\n    box-shadow:0 18px 50px -14px rgba(17,200,142,.4);\n  }\n\n  .myre-360__pill{\n    display:block;\n    color:#ffffff !important;\n    font-size:var(--myre-titel);\n    font-weight:600;\n    line-height:1.45;\n  }\n\n  \/* Beschreibung: klappt innerhalb der Karte auf *\/\n  .myre-360__desc{\n    overflow:hidden;\n    max-height:0;\n    opacity:0;\n    margin-top:0;\n    color:#ffffff;\n    font-size:var(--myre-text);\n    font-weight:400;\n    line-height:1.6;\n    text-align:center;\n    transition:max-height .6s cubic-bezier(.22,.8,.3,1),opacity .5s ease,margin-top .5s ease;\n  }\n  .myre-360__node:hover .myre-360__desc,\n  .myre-360__node.is-open .myre-360__desc{\n    \/* War 220px und damit knapp bemessen. Mit der gr\u00f6\u00dferen Schrift\n       braucht der l\u00e4ngste Text rund 150px \u2013 360px l\u00e4sst Luft, ohne dass\n       die Aufklapp-Animation tr\u00e4ge wirkt (die Dauer h\u00e4ngt nicht an der\n       H\u00f6he, nur die Kurve wird bei sehr gro\u00dfem Wert etwas fixer). *\/\n    max-height:360px;\n    opacity:1;\n    margin-top:12px;\n  }\n\n  \/* ---------- Keyframes ---------- *\/\n  @keyframes myre360Spin{\n    from{transform:translate(-50%,-50%) rotate(-8deg);}\n    to  {transform:translate(-50%,-50%) rotate(352deg);}\n  }\n  @keyframes myre360SpinRev{\n    from{transform:translate(-50%,-50%) rotate(6deg);}\n    to  {transform:translate(-50%,-50%) rotate(-354deg);}\n  }\n  @keyframes myre360Ring{\n    0%  {transform:scale(1);opacity:.8;}\n    100%{transform:scale(1.45);opacity:0;}\n  }\n  @keyframes myre360Float{\n    from{transform:translateY(3px);}\n    to  {transform:translateY(-5px);}\n  }\n\n  \/* ---------- Responsive ---------- *\/\n  \/* Auf mittleren Breiten wird die B\u00fchne schmaler, die Karten bleiben\n     aber 280px breit \u2013 dann r\u00fccken sie dem Zentrum zu nah. Deshalb hier\n     die Basis etwas anheben und die Karten schmaler machen. *\/\n  @media (max-width:1100px){\n    .myre-360{\n      --myre-node-y:74%;\n      \/* mitgewachsen wie am Desktop: war 240px *\/\n      --myre-karte-w:265px;\n      --myre-karte-w-top:340px;\n    }\n  }\n\n  \/* ---------- mobil untereinander ---------- *\/\n  @media (max-width:820px){\n    .myre-360__inner{padding:80px 24px 90px;}\n    .myre-360__stage{\n      aspect-ratio:auto;\n      flex-direction:column;\n      gap:22px;\n    }\n    .myre-360__orbit{display:none;}\n    .myre-360__center{order:0;margin-bottom:10px;}\n    \/* Gestapelt: die Dreiecks-Positionierung greift hier nicht mehr *\/\n    .myre-360__node,\n    .myre-360__node--top,\n    .myre-360__node--left,\n    .myre-360__node--right{\n      position:static;\n      max-width:420px;\n      width:100%;\n      transform:none;\n    }\n    .myre-360.is-armed .myre-360__node--top,\n    .myre-360.is-armed .myre-360__node--left,\n    .myre-360.is-armed .myre-360__node--right{transform:translateY(24px);}\n    .myre-360.is-armed.in-view .myre-360__node--top,\n    .myre-360.is-armed.in-view .myre-360__node--left,\n    .myre-360.is-armed.in-view .myre-360__node--right{transform:translateY(0);}\n    .myre-360__node--top{order:1;}\n    .myre-360__node--left{order:2;}\n    .myre-360__node--right{order:3;}\n  }\n\n  \/* ---------- Reduced Motion ---------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-360 *{animation:none !important;}\n    .myre-360 .myre-360__orbit,\n    .myre-360 .myre-360__center,\n    .myre-360 .myre-360__node{opacity:1 !important;transition:none !important;}\n    .myre-360 .myre-360__center{transform:scale(1) !important;}\n  }\n<\/style>\n\n<section class=\"myre-360\" id=\"ansatz\">\n  <div class=\"myre-360__inner\">\n    <div class=\"myre-360__stage\">\n\n      <!-- Ovale Orbits (rotieren langsam, keine Pfeile) -->\n      <div class=\"myre-360__orbit myre-360__orbit--1\" aria-hidden=\"true\"><\/div>\n      <div class=\"myre-360__orbit myre-360__orbit--2\" aria-hidden=\"true\"><\/div>\n\n      <!-- Zentrum: Logo + 360\u00b0 -->\n      <div class=\"myre-360__center\">\n        <div class=\"myre-360__core\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/01\/IMG_5315.png\" alt=\"MY-RE Logo\">\n        <\/div>\n        <div class=\"myre-360__degree\">3<em>6<\/em>0&deg;<\/div>\n      <\/div>\n\n      <!-- Spitze des Dreiecks -->\n      <div class=\"myre-360__node myre-360__node--top\">\n        <div class=\"myre-360__card2\">\n          <span class=\"myre-360__pill\">Individuell ma\u00dfgeschneiderte Projektteams<\/span>\n          <div class=\"myre-360__desc\">\n            Projektteams, passgenau auf Anforderungen und Ziele abgestimmt &ndash;\n            mit klaren Rollen, kurzen Entscheidungswegen und hoher Umsetzungskompetenz.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Basis links -->\n      <div class=\"myre-360__node myre-360__node--left\">\n        <div class=\"myre-360__card2\">\n          <span class=\"myre-360__pill\">Nachhaltige Konzepte<\/span>\n          <div class=\"myre-360__desc\">\n            Zukunftsf\u00e4hige L\u00f6sungen, die wirtschaftliche Tragf\u00e4higkeit mit\n            \u00f6kologischer Verantwortung und langfristiger Wertstabilit\u00e4t verbinden.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Basis rechts -->\n      <div class=\"myre-360__node myre-360__node--right\">\n        <div class=\"myre-360__card2\">\n          <span class=\"myre-360__pill\">Kreativer, ergebnisorientierter Ansatz<\/span>\n          <div class=\"myre-360__desc\">\n            Individuelle Strategien mit klarem Fokus auf Ergebnisse &ndash;\n            transparent, partnerschaftlich und l\u00f6sungsorientiert.\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\nfunction init(){\n  var section = document.getElementById('ansatz');\n  if(!section) return;\n  if(section.getAttribute('data-myre-init') === '1') return;\n  section.setAttribute('data-myre-init','1');\n\n  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* Scroll-Reveal der ganzen B\u00fchne. Ohne Animation bleibt alles einfach\n     sichtbar (CSS-Grundzustand) \u2013 dann ist hier nichts zu tun. *\/\n  if(!reduced && ('IntersectionObserver' in window)){\n    section.classList.add('is-armed');\n\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(e){\n        if(e.isIntersecting){\n          section.classList.add('in-view');\n          io.disconnect();\n        }\n      });\n    },{threshold:.3});\n    io.observe(section);\n\n    \/* Sicherheitsnetz *\/\n    setTimeout(function(){ section.classList.add('in-view'); },1800);\n  }\n\n  \/* Touch\/Tap: Beschreibung auf- & zuklappen *\/\n  var isTouch = window.matchMedia('(hover:none)').matches;\n  var nodes = section.querySelectorAll('.myre-360__node');\n  Array.prototype.forEach.call(nodes,function(node){\n    var pill = node.querySelector('.myre-360__card2');\n    if(isTouch){\n      pill.addEventListener('click', function(){\n        var wasOpen = node.classList.contains('is-open');\n        Array.prototype.forEach.call(nodes,function(n){ n.classList.remove('is-open'); });\n        if(!wasOpen) node.classList.add('is-open');\n      });\n    }\n    \/* Tastatur-Bedienung *\/\n    pill.setAttribute('tabindex','0');\n    pill.addEventListener('focus', function(){ node.classList.add('is-open'); });\n    pill.addEventListener('blur',  function(){ node.classList.remove('is-open'); });\n  });\n}\n\n  \/* Robust gegen Elementor: mehrere Einstiegspunkte, Doppelaufruf ist\n     durch data-myre-init abgesichert. *\/\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  window.addEventListener('load', init);\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', init); }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc55ef8 e-con-full e-flex e-con e-parent\" data-id=\"fc55ef8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-133a85c elementor-widget elementor-widget-html\" data-id=\"133a85c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Section 5: Unser digitaler Vorsprung\n     Folie 5 (USP-Halbkreis) + Folie 6 (Impact) KOMBINIERT in einer Section\n     - Eine \u00dcberschrift: \"Unser digitaler Vorsprung\"\n     - Halbkreis-Grafik mit 4 Segmenten + Labels (Desktop) \/ Cards (Mobile)\n     - Impact-Karten f\u00fcr Partner & Investoren\n     - Abschluss-Satz unter der Section\n     - Scroll-Reveal-Animationen, mobile-optimiert\n\n     \u00c4NDERUNGEN in dieser Fassung:\n     1) Abstand \u00dcberschrift -> Diagramm von 150px auf 52px. Das sind\n        exakt die Werte des Team-Abschnitts (52 \/ 40 \/ 32 px), damit die\n        Abst\u00e4nde \u00fcber alle Sections gleich sind. Knopf: --myre-usp-abstand\n     2) min-height:640px am Diagramm entfernt. Sie h\u00e4tte die neue L\u00fccke\n        sonst einfach wieder mit Leerraum aufgef\u00fcllt \u2013 siehe Kommentar dort.\n     3) Segmentfarben aus Action green + Algal fuel abgeleitet.\n     4) Einblendung abgesichert, damit der Abschnitt nicht leer bleibt,\n        falls das Skript in Elementor nicht anspringt.\n     5) Falsches Gr\u00fcn #0ea577 in der \u00dcberschrift entfernt.\n     6) &display=swap -> &amp;display=swap im Fonts-Link.\n     7) Schrift vergr\u00f6\u00dfert: alle Karten\u00fcberschriften \u2013 die vier am\n        Halbkreis und die vier Impact-Kacheln \u2013 stehen jetzt auf 20,8px,\n        also derselben Gr\u00f6\u00dfe wie der Kernsatz im Abschnitt Leistungen.\n        Der kleine Text darunter geht von 14,7px auf 17px, der\n        Abschluss-Satz von 20px auf dieselben 20,8px.\n        Damit die Karten am Halbkreis dadurch nicht kollidieren, sind sie\n        breiter geworden (330 -> 380px), der Bogen etwas schmaler\n        (920 -> 860px) und die Diagrammfl\u00e4che hat eine Mindesth\u00f6he.\n        Alles \u00fcber Stellschrauben oben im Stylesheet.\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-usp{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n\n    \/* >>> ABST\u00c4NDE IM KOPFBEREICH <\n       --myre-usp-kopf      Luft \u00fcber dem Badge (Beginn des Abschnitts)\n       --myre-usp-abstand   \u00dcberschrift -> Oberkante der beiden oberen Karten\n\n       Beide Werte sind 1:1 aus dem Team-Abschnitt \u00fcbernommen\n       (dort: __inner padding-top 100px, __head margin-bottom 52px),\n       damit alle Sections denselben Rhythmus haben.\n       Vorher lagen hier 90px bzw. 150px \u2013 die 150px waren die L\u00fccke,\n       wegen der man \u00dcberschrift und Diagramm nicht zusammen gesehen hat. *\/\n    --myre-usp-kopf:100px;\n    --myre-usp-abstand:52px;\n\n    \/* Die Grafik als Ganzes nach oben ziehen. Im SVG liegt \u00fcber der\n       Spitze des Bogens eine leere Zone (viewBox-y 0 bis ~150). Die\n       beiden oberen Karten stehen in dieser Zone. Der negative Wert holt\n       die leere Zone aus dem Layout, ohne die viewBox anzufassen \u2013 so\n       bleibt die transform-origin der Segmente unber\u00fchrt.\n       Weniger negativ = Bogen rutscht nach unten, weg von den Karten. *\/\n    --myre-usp-svg-hoch:-50px;\n    --myre-usp-svg-hoch-m:-34px;   \/* dasselbe f\u00fcr den Mini-Bogen mobil *\/\n\n    \/* >>> SEGMENTFARBEN DES HALBKREISES <\n       Gleichm\u00e4\u00dfige Rampe von Action green #0b302d zu Algal fuel #11c88e,\n       je ein Drittel Schritt. Damit steckt keine Farbe drin, die nicht in\n       den Guidelines steht (vorher: #0a2725, #114b40, #8fb59f, #17b57b).\n\n       ACHTUNG Segment 3: das alte #8fb59f war ein helles Salbeigr\u00fcn. Falls\n       das Icon darauf DUNKEL ist, verliert es auf dem neuen, dunkleren Ton\n       Kontrast. Dann hier auf #7bc5af wechseln \u2013 das ist derselbe Ton,\n       nur mit Wei\u00df aufgehellt, und bleibt markentreu. *\/\n    --myre-seg1:#0b302d;\n    --myre-seg2:#0d634d;\n    --myre-seg3:#0f956e;\n    --myre-seg4:#11c88e;\n\n    \/* >>> SCHRIFTGR\u00d6SSEN <<<\n       --myre-titel steht auf exakt derselben Formel wie der Kernsatz im\n       Abschnitt Leistungen, also 20,8px am Desktop. Er gilt f\u00fcr die vier\n       Karten am Halbkreis (waren 17,3px), f\u00fcr die vier Impact-Kacheln\n       (waren 16,8px) und f\u00fcr den Abschluss-Satz (war 20px). Dadurch sind\n       alle diese Texte im Abschnitt gleich gro\u00df.\n       --myre-text ist der kleine Text darunter. Er bleibt bewusst eine\n       Stufe kleiner, sonst verlieren die Karten ihre Gliederung:\n       17px statt vorher 14,7px.\n       Am Handy greifen die Untergrenzen der Formeln (17,6px \/ 15,2px).\n       Die liegen so dicht an den alten Werten, dass sich dort praktisch\n       nichts \u00e4ndert \u2013 genau so gewollt. *\/\n    --myre-titel:clamp(1.1rem,1.6vw,1.3rem);\n    --myre-text:clamp(.95rem,1.2vw,1.0625rem);\n\n    \/* >>> GEOMETRIE VON KARTEN UND BOGEN <<<\n       Die gr\u00f6\u00dfere Schrift macht die vier Karten am Halbkreis h\u00f6her.\n       Nachgerechnet w\u00e4re die rechte Karte dadurch in die obere rechte\n       hineingelaufen. Deshalb drei Werte, die zusammengeh\u00f6ren:\n\n       --myre-karte-w    Kartenbreite, 330px -> 380px. Breiter hei\u00dft\n                         weniger Zeilenumbr\u00fcche, die Karten wachsen also\n                         kaum in die H\u00f6he.\n       --myre-bogen      Breite des Halbkreises, 920px -> 860px. Schafft\n                         links und rechts Platz f\u00fcr die breiteren Karten.\n       --myre-diagramm-h Mindesth\u00f6he der Diagrammfl\u00e4che. Der schmalere\n                         Bogen ist auch flacher (533px statt 570px) und\n                         w\u00fcrde die Fl\u00e4che verk\u00fcrzen \u2013 dann r\u00fcckten die\n                         obere und die seitliche Karte wieder zusammen.\n                         Mit 565px bleibt zwischen ihnen rund 50px Luft,\n                         also so viel wie vor der Vergr\u00f6\u00dferung.\n\n       WICHTIG: Das ist NICHT die alte min-height:640px, wegen der man\n       \u00dcberschrift und Diagramm nicht zusammen gesehen hat. Die lag 90px\n       \u00fcber der damaligen Eigenh\u00f6he und hat oben Leerraum erzeugt. 565px\n       liegen nur 15px \u00fcber der H\u00f6he, die die Fl\u00e4che vorher von selbst\n       hatte \u2013 es entsteht also keine neue L\u00fccke. *\/\n    --myre-karte-w:380px;\n    --myre-bogen:860px;\n    --myre-diagramm-h:565px;\n\n    position:relative;\n    width:100%;\n    background:\n      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(17,200,142,.07), transparent 70%),\n      linear-gradient(180deg, #f6fbf9 0%, #ffffff 45%, #f2f9f6 100%);\n    font-family:'Poppins',sans-serif;\n    color:var(--myre-dark);\n    overflow:hidden;\n  }\n  .myre-usp *{box-sizing:border-box;margin:0;padding:0;}\n\n  \/* ---------- Kopf: Badge + \u00dcberschrift ---------- *\/\n  .myre-usp__top{\n    padding:var(--myre-usp-kopf) 24px 0;\n    text-align:center;\n  }\n  .myre-usp__topbadge{\n    display:flex;\n    justify-content:center;\n    margin-bottom:26px;\n  }\n  .myre-usp.is-armed .myre-usp__topbadge{\n    opacity:0;\n    transform:translateY(14px);\n    transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-usp.is-armed.in-view .myre-usp__topbadge{opacity:1;transform:translateY(0);}\n\n  .myre-usp__title{\n    font-size:clamp(1.9rem,3.4vw,2.8rem);\n    font-weight:700;\n    letter-spacing:-.3px;\n    color:var(--myre-dark) !important;\n  }\n  \/* Vorher lag hier ein Farbverlauf mit #0ea577 plus background-clip:text.\n     #0ea577 steht nicht in den Guidelines, und bei zwei fast gleichen\n     Farben im Verlauf sieht man ohnehin keinen Verlauf. Jetzt eine\n     glatte Farbe \u2013 Algal fuel. *\/\n  .myre-usp__title em{\n    font-style:normal;\n    color:var(--myre-green) !important;\n  }\n  .myre-usp.is-armed .myre-usp__title{\n    opacity:0;\n    transform:translateY(16px);\n    transition:opacity 1s ease .15s,transform 1s cubic-bezier(.22,.8,.3,1) .15s;\n  }\n  .myre-usp.is-armed.in-view .myre-usp__title{opacity:1;transform:translateY(0);}\n\n  .myre-usp__wrap{\n    max-width:1240px;\n    margin:0 auto;\n    padding:var(--myre-usp-abstand) 24px 30px;\n    position:relative;\n  }\n\n  \/* ---------- Halbkreis-Diagramm ---------- *\/\n  \/* Zur Mindesth\u00f6he: die alte min-height:640px ist und bleibt drau\u00dfen \u2013\n     sie war die Ursache f\u00fcr die L\u00fccke unter der \u00dcberschrift. Der Wert in\n     --myre-diagramm-h ist ein anderer: er h\u00e4lt die Fl\u00e4che auf der H\u00f6he,\n     die sie vor der Schriftvergr\u00f6\u00dferung von selbst hatte. Ohne ihn w\u00fcrde\n     der jetzt schmalere und damit flachere Bogen die Fl\u00e4che verk\u00fcrzen und\n     die vier Karten k\u00e4men einander in die Quere. Details oben bei der\n     Variablen. *\/\n  .myre-usp__diagram{\n    position:relative;\n    display:flex;\n    justify-content:center;\n    align-items:flex-end;\n    min-height:var(--myre-diagramm-h);\n    padding:0 0 30px;\n  }\n  .myre-usp__svg{\n    width:min(var(--myre-bogen),100%);\n    height:auto;\n    display:block;\n    margin-top:var(--myre-usp-svg-hoch);\n    overflow:visible;\n    filter:drop-shadow(0 22px 40px rgba(11,48,45,.14));\n  }\n  .myre-usp__svg-mobile{display:none;}\n\n  \/* Segmente: wachsen beim Scroll-Reveal nacheinander auf *\/\n  .myre-usp__seg{\n    transform-origin:500px 470px;   \/* Mittelpunkt des Halbkreises *\/\n  }\n  .myre-usp.is-armed .myre-usp__seg{\n    opacity:0;\n    transform:scale(.84);\n    transition:opacity .9s ease,transform 1s cubic-bezier(.22,.9,.3,1.1);\n  }\n  .myre-usp.is-armed.in-view .myre-usp__seg{opacity:1;transform:scale(1);}\n  .myre-usp.is-armed.in-view .myre-usp__seg.s1{transition-delay:.1s;}\n  .myre-usp.is-armed.in-view .myre-usp__seg.s2{transition-delay:.25s;}\n  .myre-usp.is-armed.in-view .myre-usp__seg.s3{transition-delay:.4s;}\n  .myre-usp.is-armed.in-view .myre-usp__seg.s4{transition-delay:.55s;}\n\n  .myre-usp__icon{\n    transform-origin:center;\n    pointer-events:none;\n  }\n  .myre-usp.is-armed .myre-usp__icon{\n    opacity:0;\n    transform:scale(.85);\n    transition:opacity .7s ease,transform .8s cubic-bezier(.34,1.4,.4,1);\n  }\n  .myre-usp.is-armed.in-view .myre-usp__icon{opacity:1;transform:scale(1);}\n  .myre-usp.is-armed.in-view .myre-usp__icon.i1{transition-delay:.35s;}\n  .myre-usp.is-armed.in-view .myre-usp__icon.i2{transition-delay:.5s;}\n  .myre-usp.is-armed.in-view .myre-usp__icon.i3{transition-delay:.65s;}\n  .myre-usp.is-armed.in-view .myre-usp__icon.i4{transition-delay:.8s;}\n  .myre-usp.is-armed.in-view .myre-usp__icon.center{transition-delay:.95s;}\n\n  .myre-usp__sep{fill:#ffffff;}\n\n  \/* ---------- Labels um den Halbkreis ---------- *\/\n  .myre-usp__label{\n    position:absolute;\n    width:var(--myre-karte-w);\n    z-index:6;\n  }\n  .myre-usp.is-armed .myre-usp__label{\n    opacity:0;\n    transform:translateY(18px);\n    transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-usp.is-armed.in-view .myre-usp__label{opacity:1;transform:translateY(0);}\n  .myre-usp.is-armed.in-view .myre-usp__label.l1{transition-delay:.6s;}\n  .myre-usp.is-armed.in-view .myre-usp__label.l2{transition-delay:.75s;}\n  .myre-usp.is-armed.in-view .myre-usp__label.l3{transition-delay:.9s;}\n  .myre-usp.is-armed.in-view .myre-usp__label.l4{transition-delay:1.05s;}\n\n  \/* Die beiden oberen Karten standen auf 90px bzw. 100px. Da die ganze\n     Grafik um 50px hochgezogen ist und der Innenabstand des Diagramms von\n     40px auf 0 f\u00e4llt, wandern sie um dieselben 90px nach oben. Der Abstand\n     Karte -> Bogen bleibt dadurch unver\u00e4ndert bei 134px bzw. 151px.\n     Die unteren beiden h\u00e4ngen an bottom und bleiben unber\u00fchrt.\n\n     Die Werte sind auch nach der Schriftvergr\u00f6\u00dferung unver\u00e4ndert\n     geblieben. Nachgerechnet bei 1440px Bildschirm: obere Karten enden\n     bei 120px bzw. 130px, die seitlichen beginnen bei 195px bzw. 179px \u2013\n     dazwischen liegen also rund 50 bis 76px Luft. Das tr\u00e4gt die\n     Mindesth\u00f6he der Diagrammfl\u00e4che, siehe --myre-diagramm-h. *\/\n  .myre-usp__label--left {left:-30px;bottom:250px;}\n  .myre-usp__label--tl   {left:9%;top:0;}\n  .myre-usp__label--tr   {right:6%;top:10px;}\n  .myre-usp__label--right{right:-20px;bottom:240px;}\n\n  .myre-usp__card{\n    background:rgba(255,255,255,.92);\n    border:1px solid rgba(11,48,45,.12);\n    border-radius:18px;\n    padding:18px 20px;\n    box-shadow:0 18px 40px -10px rgba(11,48,45,.16);\n    -webkit-backdrop-filter:blur(10px);\n    backdrop-filter:blur(10px);\n    text-align:center;\n    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;\n  }\n  .myre-usp__card:hover{\n    transform:translateY(-4px);\n    box-shadow:0 26px 55px -12px rgba(11,48,45,.22);\n    border-color:rgba(17,200,142,.4);\n  }\n  .myre-usp__card h3{\n    font-size:var(--myre-titel);\n    \/* Ohne festen Zeilenabstand erbt die \u00dcberschrift den des Themes. Bei\n       20,8px kann das je nach Theme deutlich auseinanderziehen \u2013 1.3 h\u00e4lt\n       die Karte kompakt und ist so nachgerechnet. *\/\n    line-height:1.3;\n    font-weight:600;\n    color:var(--myre-dark) !important;\n    margin-bottom:6px;\n  }\n  .myre-usp__card p{\n    font-size:var(--myre-text);\n    font-weight:300;\n    line-height:1.55;\n    color:rgba(11,48,45,.8);\n  }\n\n  \/* ---------- Impact-Teil (ehem. Folie 6) ---------- *\/\n  .myre-usp__impactlabel{\n    display:flex;\n    justify-content:center;\n    margin:50px 0 0;\n  }\n  .myre-usp__badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 24px;\n    border-radius:999px;\n    background:rgba(11,48,45,.04);\n    border:1px solid rgba(11,48,45,.15);\n    font-size:.8rem;\n    font-weight:500;\n    letter-spacing:.16em;\n    text-transform:uppercase;\n    color:var(--myre-dark);\n  }\n  .myre-usp__badge::before{\n    content:\"\";\n    flex:0 0 auto;\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 0 0 rgba(17,200,142,.5);\n    animation:myreUDot 2.4s ease-out infinite;\n  }\n\n  .myre-usp__grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:26px;\n    margin-top:44px;\n  }\n  .myre-usp__tile{\n    background:#f4f8f7;\n    border:1px solid rgba(11,48,45,.08);\n    border-radius:22px;\n    padding:30px 24px;\n    text-align:center;\n    transition:box-shadow .35s ease,border-color .35s ease,transform .35s ease;\n  }\n  .myre-usp.is-armed .myre-usp__tile{\n    opacity:0;\n    transform:translateY(24px);\n    transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.3,1),\n               box-shadow .35s ease,border-color .35s ease;\n  }\n  .myre-usp.is-armed.in-view .myre-usp__tile{opacity:1;transform:translateY(0);}\n  .myre-usp.is-armed.in-view .myre-usp__tile:nth-child(1){transition-delay:.15s;}\n  .myre-usp.is-armed.in-view .myre-usp__tile:nth-child(2){transition-delay:.3s;}\n  .myre-usp.is-armed.in-view .myre-usp__tile:nth-child(3){transition-delay:.45s;}\n  .myre-usp.is-armed.in-view .myre-usp__tile:nth-child(4){transition-delay:.6s;}\n  .myre-usp__tile:hover{\n    box-shadow:0 28px 60px -18px rgba(11,48,45,.25);\n    border-color:rgba(17,200,142,.4);\n    transform:translateY(-6px) !important;\n  }\n  .myre-usp__tile img{\n    width:46px;height:46px;\n    object-fit:contain;\n    margin:0 auto 14px;\n    display:block;\n    transition:transform .35s ease;\n  }\n  .myre-usp__tile:hover img{transform:scale(1.12);}\n  .myre-usp__tile h3{\n    font-size:var(--myre-titel);\n    line-height:1.3;\n    font-weight:600;\n    color:var(--myre-dark) !important;\n    margin-bottom:10px;\n  }\n  .myre-usp__tile p{\n    font-size:var(--myre-text);\n    font-weight:300;\n    line-height:1.55;\n    color:rgba(11,48,45,.8);\n  }\n\n  \/* ---------- Abschluss-Satz ---------- *\/\n  .myre-usp__footer{\n    text-align:center;\n    max-width:860px;\n    margin:60px auto 0;\n    padding-bottom:90px;\n  }\n  .myre-usp.is-armed .myre-usp__footer{\n    opacity:0;\n    transform:translateY(18px);\n    transition:opacity 1s ease .3s,transform 1s cubic-bezier(.22,.8,.3,1) .3s;\n  }\n  .myre-usp.is-armed.in-view .myre-usp__footer{opacity:1;transform:translateY(0);}\n  .myre-usp__footer p{\n    \/* War clamp(1.05rem,1.6vw,1.25rem), also 20px. Jetzt dieselbe Formel\n       wie alle anderen Texte im Abschnitt: exakt 20,8px. *\/\n    font-size:var(--myre-titel);\n    line-height:1.7;\n    font-weight:300;\n    color:var(--myre-dark);\n  }\n  .myre-usp__footer strong{\n    font-weight:600;\n    color:var(--myre-green);\n  }\n  .myre-usp__footer .myre-usp__invite{\n    display:block;\n    margin-top:18px;\n    \/* zieht mit: war .95rem = 15,2px *\/\n    font-size:var(--myre-text);\n    font-weight:500;\n    letter-spacing:.04em;\n    color:rgba(11,48,45,.7);\n  }\n\n  \/* ---------- Keyframes ---------- *\/\n  @keyframes myreUDot{\n    0%  {box-shadow:0 0 0 0 rgba(17,200,142,.5);}\n    70% {box-shadow:0 0 0 12px rgba(17,200,142,0);}\n    100%{box-shadow:0 0 0 0 rgba(17,200,142,0);}\n  }\n\n  \/* ---------- Responsive ---------- *\/\n  \/* Abst\u00e4nde genau wie im Team-Abschnitt: 52 \/ 40 \/ 32 px,\n     Kopfbereich 100 \/ 80 \/ 66 px. *\/\n  @media (max-width:1024px){\n    .myre-usp{--myre-usp-kopf:80px;--myre-usp-abstand:40px;}\n  }\n\n  @media (max-width:980px){\n    .myre-usp__svg{display:none;}\n    .myre-usp__svg-mobile{\n      display:block;\n      width:100%;\n      max-width:340px;\n      margin:var(--myre-usp-svg-hoch-m) auto 8px;\n      height:auto;\n      filter:drop-shadow(0 16px 30px rgba(11,48,45,.14));\n    }\n    .myre-usp__diagram{\n      display:block;\n      \/* Die Mindesth\u00f6he MUSS hier weg. Mobil stehen die Karten\n         untereinander im Fluss \u2013 565px w\u00fcrden unter dem letzten Element\n         einfach als Leerraum stehen bleiben. *\/\n      min-height:0;\n      padding:0;\n    }\n    .myre-usp__label{\n      position:static;\n      width:100%;\n      max-width:520px;\n      margin:14px auto 0;\n    }\n    .myre-usp__grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;}\n  }\n  @media (max-width:600px){\n    .myre-usp{--myre-usp-kopf:66px;--myre-usp-abstand:32px;}\n    .myre-usp__grid{grid-template-columns:1fr;}\n    .myre-usp__wrap{padding-left:20px;padding-right:20px;}\n    .myre-usp__footer{padding-bottom:70px;}\n  }\n\n  \/* ---------- Reduced Motion ---------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-usp *{transition:none !important;animation:none !important;}\n    .myre-usp__title,.myre-usp__topbadge,.myre-usp__seg,.myre-usp__icon,\n    .myre-usp__label,.myre-usp__tile,.myre-usp__footer{\n      opacity:1 !important;transform:none !important;\n    }\n  }\n<\/style>\n\n<section class=\"myre-usp\" id=\"usp\">\n\n  <!-- Badge + \u00dcberschrift -->\n  <div class=\"myre-usp__top\">\n    <div class=\"myre-usp__topbadge\">\n      <span class=\"myre-usp__badge\">USP<\/span>\n    <\/div>\n    <h2 class=\"myre-usp__title\"><em>Digitaler<\/em> Vorsprung<\/h2>\n  <\/div>\n\n  <div class=\"myre-usp__wrap\">\n\n    <!-- ================= Halbkreis-Diagramm (Folie 5) ================= -->\n    <div class=\"myre-usp__diagram\">\n\n      <!-- Mobile: Mini-Halbkreis -->\n      <svg class=\"myre-usp__svg-mobile\" viewBox=\"0 0 1000 620\" aria-hidden=\"true\">\n        <path fill=\"var(--myre-seg1)\" d=\"M 180.00 470.00 A 320 320 0 0 1 273.73 243.73 L 390.40 360.40 A 155 155 0 0 0 345.00 470.00 Z\"\/>\n        <path fill=\"var(--myre-seg2)\" d=\"M 273.73 243.73 A 320 320 0 0 1 500.00 150.00 L 500.00 315.00 A 155 155 0 0 0 390.40 360.40 Z\"\/>\n        <path fill=\"var(--myre-seg3)\" d=\"M 500.00 150.00 A 320 320 0 0 1 726.27 243.73 L 609.60 360.40 A 155 155 0 0 0 500.00 315.00 Z\"\/>\n        <path fill=\"var(--myre-seg4)\" d=\"M 726.27 243.73 A 320 320 0 0 1 820.00 470.00 L 655.00 470.00 A 155 155 0 0 0 609.60 360.40 Z\"\/>\n        <image x=\"252\" y=\"344\" width=\"60\" height=\"60\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Automatisierte.png\"\/>\n        <image x=\"380\" y=\"232\" width=\"60\" height=\"60\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Zentrale.png\"\/>\n        <image x=\"560\" y=\"232\" width=\"60\" height=\"60\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Schnittstellen-2.png\"\/>\n        <image x=\"688\" y=\"344\" width=\"60\" height=\"60\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/KI.png\"\/>\n        <image x=\"420\" y=\"390\" width=\"160\" height=\"160\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/logo-USP.png\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 278.11 239.42 A 320 320 0 0 1 269.42 248.11 L 388.31 362.52 A 155 155 0 0 0 392.52 358.31 Z\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 506.14 150.06 A 320 320 0 0 1 493.86 150.06 L 497.02 315.03 A 155 155 0 0 0 502.98 315.03 Z\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 730.58 248.11 A 320 320 0 0 1 721.89 239.42 L 607.48 358.31 A 155 155 0 0 0 611.69 362.52 Z\"\/>\n      <\/svg>\n\n      <!-- Labels (Desktop positioniert \/ Mobile als Cards) -->\n      <div class=\"myre-usp__label l1 myre-usp__label--left\">\n        <div class=\"myre-usp__card\">\n          <h3>Automatisierte Prozesse<\/h3>\n          <p>Administration, Development und Betrieb<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"myre-usp__label l2 myre-usp__label--tl\">\n        <div class=\"myre-usp__card\">\n          <h3>Zentrale Datenplattform<\/h3>\n          <p>Eine zentrale Plattform f\u00fcr Datenmanagement und KI-Analysen in Echtzeit<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"myre-usp__label l3 myre-usp__label--tr\">\n        <div class=\"myre-usp__card\">\n          <h3>Schnittstellen-Integration<\/h3>\n          <p>Integration von APIs &amp; Schnittstellen f\u00fcr verbesserte Funktionalit\u00e4t<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"myre-usp__label l4 myre-usp__label--right\">\n        <div class=\"myre-usp__card\">\n          <h3>KI-Assistent<\/h3>\n          <p>Ein eigens programmierter &bdquo;MY-RE KI-Assistent&ldquo; zur Unterst\u00fctzung bei Planung, Analysen und Reporting<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Desktop: Halbkreis -->\n      <svg class=\"myre-usp__svg\" viewBox=\"0 0 1000 620\" aria-hidden=\"true\">\n        <path class=\"myre-usp__seg s1\" fill=\"var(--myre-seg1)\" d=\"M 180.00 470.00 A 320 320 0 0 1 273.73 243.73 L 390.40 360.40 A 155 155 0 0 0 345.00 470.00 Z\"\/>\n        <path class=\"myre-usp__seg s2\" fill=\"var(--myre-seg2)\" d=\"M 273.73 243.73 A 320 320 0 0 1 500.00 150.00 L 500.00 315.00 A 155 155 0 0 0 390.40 360.40 Z\"\/>\n        <path class=\"myre-usp__seg s3\" fill=\"var(--myre-seg3)\" d=\"M 500.00 150.00 A 320 320 0 0 1 726.27 243.73 L 609.60 360.40 A 155 155 0 0 0 500.00 315.00 Z\"\/>\n        <path class=\"myre-usp__seg s4\" fill=\"var(--myre-seg4)\" d=\"M 726.27 243.73 A 320 320 0 0 1 820.00 470.00 L 655.00 470.00 A 155 155 0 0 0 609.60 360.40 Z\"\/>\n        <image class=\"myre-usp__icon i1\" x=\"243\" y=\"342\" width=\"74\" height=\"74\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Automatisierte.png\"\/>\n        <image class=\"myre-usp__icon i2\" x=\"372\" y=\"214\" width=\"74\" height=\"74\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Zentrale.png\"\/>\n        <image class=\"myre-usp__icon i3\" x=\"554\" y=\"214\" width=\"74\" height=\"74\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Schnittstellen-2.png\"\/>\n        <image class=\"myre-usp__icon i4\" x=\"683\" y=\"342\" width=\"74\" height=\"74\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/KI.png\"\/>\n        <image class=\"myre-usp__icon center\" x=\"420\" y=\"390\" width=\"160\" height=\"160\" href=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/logo-USP.png\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 278.11 239.42 A 320 320 0 0 1 269.42 248.11 L 388.31 362.52 A 155 155 0 0 0 392.52 358.31 Z\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 506.14 150.06 A 320 320 0 0 1 493.86 150.06 L 497.02 315.03 A 155 155 0 0 0 502.98 315.03 Z\"\/>\n        <path class=\"myre-usp__sep\" d=\"M 730.58 248.11 A 320 320 0 0 1 721.89 239.42 L 607.48 358.31 A 155 155 0 0 0 611.69 362.52 Z\"\/>\n      <\/svg>\n    <\/div>\n\n    <!-- ================= Impact-Teil (Folie 6) ================= -->\n    <div class=\"myre-usp__impactlabel\">\n      <span class=\"myre-usp__badge\">Impact f\u00fcr Partner &amp; Investoren<\/span>\n    <\/div>\n\n    <div class=\"myre-usp__grid\">\n      <div class=\"myre-usp__tile\">\n        <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Transparenz.png\" alt=\"Transparenz\">\n        <h3>Transparenz<\/h3>\n        <p>Projektdaten sind jederzeit abrufbar.<\/p>\n      <\/div>\n      <div class=\"myre-usp__tile\">\n        <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Schnelligkeit-.png\" alt=\"Schnelligkeit\">\n        <h3>Schnelligkeit<\/h3>\n        <p>K\u00fcrzere Entwicklungszyklen durch Automatisierung &amp; KI<\/p>\n      <\/div>\n      <div class=\"myre-usp__tile\">\n        <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Kostenreduk-1.png\" alt=\"Kostenreduktion\">\n        <h3>Kostenreduktion<\/h3>\n        <p>Effiziente Prozesse &amp; datenbasierte Entscheidungen<\/p>\n      <\/div>\n      <div class=\"myre-usp__tile\">\n        <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/02\/Verlaesslichkeit-.png\" alt=\"Verl\u00e4sslichkeit\">\n        <h3>Verl\u00e4sslichkeit<\/h3>\n        <p>Durchg\u00e4ngige Nachvollziehbarkeit &amp; Qualit\u00e4tssicherung<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Abschluss-Satz unter der Section -->\n    <div class=\"myre-usp__footer\">\n      <p>\n        <strong>Mykorrhiza Real Estate<\/strong> steht f\u00fcr die\n        <strong>Zukunft der Projektentwicklung<\/strong> &ndash;\n        digital, datengetrieben, effizient.\n        <span class=\"myre-usp__invite\">\n          &raquo; Wir laden Partner und Investoren ein, Teil dieser Entwicklung zu werden. &laquo;\n        <\/span>\n      <\/p>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\nfunction init(){\n  var section = document.getElementById('usp');\n  if(!section) return;\n  if(section.getAttribute('data-myre-init') === '1') return;\n  section.setAttribute('data-myre-init','1');\n\n  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* Grundzustand im CSS ist SICHTBAR. Ausgeblendet wird erst durch\n     .is-armed, das hier gesetzt wird. Springt das Skript nicht an \u2013 etwa\n     weil Elementor das Widget nachl\u00e4dt \u2013 bleibt der Abschnitt sichtbar\n     statt wei\u00df. *\/\n  if(reduced || !('IntersectionObserver' in window)) return;\n\n  section.classList.add('is-armed');\n\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(e){\n      if(e.isIntersecting){\n        section.classList.add('in-view');\n        io.disconnect();\n      }\n    });\n  },{threshold:.12});\n  io.observe(section);\n\n  \/* Sicherheitsnetz *\/\n  setTimeout(function(){ section.classList.add('in-view'); },1800);\n}\n\n  \/* Robust gegen Elementor: mehrere Einstiegspunkte, Doppelaufruf ist\n     durch data-myre-init abgesichert. *\/\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  window.addEventListener('load', init);\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', init); }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-541eb5b e-con-full e-flex e-con e-parent\" data-id=\"541eb5b\" data-element_type=\"container\" data-e-type=\"container\" id=\"ueber\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aff51f5 elementor-widget elementor-widget-html\" data-id=\"aff51f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE\n     Kombinierter Abschnitt: \"Umfassende Immobilienexpertise\" + \"Starkes Netzwerk\"\n     - Beide Elementor-Sektionen in EINEM HTML-Block zusammengefasst\n     - Inhalt unver\u00e4ndert, nur Gestaltung modernisiert\n     - Wechselnder Rhythmus: Bild links \/ Text rechts, dann umgekehrt\n     - Bilder in Farbe, dezenter Zoom + gr\u00fcner Akzentrahmen beim Hover\n\n     NEU in dieser Version:\n     1) Trennstrich zwischen den Bl\u00f6cken ist ersatzlos entfernt.\n     2) Die Trennung l\u00e4uft jetzt \u00fcber den HINTERGRUND: jeder Bereich hat sein\n        eigenes, randlos \u00fcber die volle Breite laufendes Farbband.\n        Expertise = helles Off-White, Netzwerk = leichtes Grau.\n     3) Die Labels EXPERTISE \/ NETZWERK sitzen jetzt in derselben Pille\n        wie in allen anderen Abschnitten (Leistungen, Team, USP).\n     4) Das erste Foto (Gruppenfoto im Block Expertise) steht jetzt im Format\n        3\/2 statt 16\/9. Der Rahmen ist damit h\u00f6her, `object-fit:cover` schneidet\n        weniger weg und die Skyline am oberen Bildrand ist wieder zu sehen.\n        Zus\u00e4tzlich sitzt der Ausschnitt mit `--myre-fokus-1:center 44%` ein\n        St\u00fcck h\u00f6her, damit oben etwas mehr gewinnt als unten. Beide Werte\n        stehen als Stellschrauben oben im Stylesheet.\n     5) Flie\u00dftext am Desktop von 17px auf 20,8px \u2013 dieselbe Gr\u00f6\u00dfe wie in\n        Leistungen, 360\u00b0 und USP. Tablet und Handy bleiben unver\u00e4ndert.\n\n     - Mobil: gestapelt, Reihenfolge Bild -> Text (wie reverse_order_mobile im Original)\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-duo{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n\n    \/* >>> DIE ZWEI HINTERGRUND-B\u00c4NDER <<<\n       Hier l\u00e4uft die Trennung zwischen den beiden Bereichen.\n       --myre-band-b ist ein 6-%-Anteil des Markengr\u00fcns Action green in Wei\u00df,\n       dadurch ist das Grau nicht neutral-kalt, sondern hat einen ganz leichten\n       Markenstich. Wenn es kr\u00e4ftiger sein soll: #eaefed. Wenn dezenter: #f5f7f6.\n       Wenn stattdessen EXPERTISE grau sein soll, einfach die zwei Werte tauschen. *\/\n    --myre-band-a:#FCFCFB;             \/* Block Expertise  *\/\n    --myre-band-b:#f0f3f2;             \/* Block Netzwerk   *\/\n\n    \/* >>> ABST\u00c4NDE DER B\u00c4NDER <<<\n       -oben  = Luft am Anfang des Abschnitts   (war: inner padding-top 100px)\n       -unten = Luft am Ende des Abschnitts     (war: inner padding-bottom 110px)\n       -innen = Luft an der Bandkante in der Mitte. Zweimal innen = der Abstand\n                zwischen den beiden Bl\u00f6cken, also 140px bis 192px.\n                Der alte Trennstrich-Aufbau lag bei 145px bis 265px. *\/\n    --myre-band-oben:100px;\n    --myre-band-unten:110px;\n    --myre-band-innen:clamp(70px,7vw,96px);\n\n    \/* >>> STELLSCHRAUBEN <<< *\/\n    --myre-media-w:40%;                \/* Breite der Bildspalte am Desktop *\/\n\n    \/* >>> BILDFORMAT BLOCK 1 (Gruppenfoto mit Skyline) <<<\n       Wichtig zum Verst\u00e4ndnis: der Rahmen gibt das Format vor, das Foto wird\n       mit `object-fit:cover` formatf\u00fcllend hineingerechnet. Ist der Rahmen\n       flacher als das Foto, schneidet er oben UND unten etwas ab. Genau das\n       hat vorher die Skyline am oberen Bildrand gekostet.\n       16\/9  = sehr flach, viel Beschnitt oben und unten  (alter Wert)\n       3\/2   = etwas h\u00f6her, oben und unten wird mehr sichtbar  (jetzt gesetzt)\n       4\/3   = noch h\u00f6her; wenn die Skyline dann noch immer nicht ganz drauf\n               ist, ist das der n\u00e4chste Schritt\n       H\u00f6her als 4\/3 nicht gehen, sonst wird die Bildspalte h\u00f6her als die\n       Textspalte daneben und der Block kippt optisch nach links.\n\n       Nachgerechnet (Bildh\u00f6he im Rahmen, vorher 16\/9 -> jetzt 3\/2):\n         1920px Bildschirm  241px -> 285px\n         1440px Bildschirm  254px -> 301px\n         1280px Bildschirm  253px -> 300px\n       Vom Foto selbst waren bei 16\/9 rund 75 % der H\u00f6he zu sehen, jetzt\n       sind es knapp 89 %. *\/\n    --myre-ratio-1:3\/2;\n    --myre-ratio-2:4\/5;                \/* Bildformat Block 2 (hochkant) *\/\n\n    \/* >>> BILDAUSSCHNITT (senkrechter Anschnittpunkt) <<<\n       Greift nur, solange \u00fcberhaupt beschnitten wird. Der Wert sagt, welcher\n       Teil des Fotos im Rahmen stehen bleibt:\n       center 50%  = mittig, Beschnitt gleichm\u00e4\u00dfig oben und unten\n       center 44%  = Ausschnitt sitzt etwas h\u00f6her, die Skyline gewinnt ein\n                     St\u00fcck mehr als der untere Rand  (jetzt gesetzt)\n       center 30%  = deutlich weiter oben, dann geht unten wieder Bild verloren\n       Wer die Skyline komplett sehen will, \u00e4ndert besser das Format oben\n       (auf 4\/3) und l\u00e4sst diesen Wert in Ruhe. *\/\n    --myre-fokus-1:center 44%;\n    --myre-fokus-2:center;             \/* Block 2 bleibt mittig *\/\n\n    --myre-gap:clamp(40px,6vw,96px);   \/* Abstand zwischen Bild und Textspalte *\/\n    --myre-radius:18px;                \/* Eckenrundung der Bilder *\/\n\n    \/* Schriftgr\u00f6\u00dfen exakt auf Leistungen\/Team abgestimmt (beide enden bei 2.9rem) *\/\n    --myre-h1:clamp(1.9rem,3.2vw,2.9rem);   \/* erste \u00dcberschriftenzeile (Original 53px) *\/\n    --myre-h2:clamp(1.5rem,2.6vw,2.3rem);   \/* zweite Zeile, kursiv leicht (Original 42px) *\/\n    \/* >>> FLIESSTEXT <<<\n       War fix 1.0625rem = 17px. Jetzt dieselbe Formel wie der Kernsatz im\n       Abschnitt Leistungen und die Karten in 360\u00b0 und USP: 20,8px am\n       Desktop. Die Textspalte ist 560px breit, das ergibt rund 52 Zeichen\n       pro Zeile \u2013 noch gut lesbar, aber breiter geht nicht, ohne die\n       Bildspalte zu verkleinern.\n       ACHTUNG: Diese Zeile gilt nur ab 1025px Breite. Tablet und Handy\n       behalten ihre alten Werte, siehe die zwei Media Queries unten. *\/\n    --myre-body:clamp(1.1rem,1.6vw,1.3rem);\n\n    position:relative;\n    width:100%;\n    \/* Grundton, falls ein Band mal keine Farbe hat *\/\n    background:var(--myre-band-a);\n    font-family:'Poppins',sans-serif;\n    color:var(--myre-dark);\n    overflow:hidden;\n  }\n  .myre-duo *{box-sizing:border-box;margin:0;padding:0;}\n\n  \/* ---------------- Die beiden Farbb\u00e4nder ---------------- *\/\n  .myre-duo__band{\n    position:relative;\n    width:100%;\n  }\n  .myre-duo__band--a{\n    background:var(--myre-band-a);\n    padding:var(--myre-band-oben) 0 var(--myre-band-innen);\n  }\n  .myre-duo__band--b{\n    background:var(--myre-band-b);\n    padding:var(--myre-band-innen) 0 var(--myre-band-unten);\n  }\n\n  .myre-duo__inner{\n    position:relative;\n    z-index:1;\n    width:100%;\n    max-width:1300px;\n    margin:0 auto;\n    padding:0 6vw;      \/* horizontal exakt wie vorher *\/\n  }\n\n  \/* dezente Fl\u00e4chen im Hintergrund, sehr zur\u00fcckhaltend.\n     Sitzen bewusst AUF den B\u00e4ndern und nicht auf der Sektion, sonst w\u00fcrden\n     die deckenden Bandfarben sie verdecken. *\/\n  .myre-duo__band--a::before,\n  .myre-duo__band--b::after{\n    content:\"\";\n    position:absolute;\n    border-radius:50%;\n    pointer-events:none;\n    z-index:0;\n  }\n  .myre-duo__band--a::before{\n    top:-120px; right:-140px;\n    width:420px; height:420px;\n    background:radial-gradient(circle,rgba(17,200,142,.09),transparent 68%);\n  }\n  .myre-duo__band--b::after{\n    bottom:-160px; left:-160px;\n    width:480px; height:480px;\n    background:radial-gradient(circle,rgba(11,48,45,.05),transparent 68%);\n  }\n\n  \/* ---------------- Ein Block (Bild + Text) ---------------- *\/\n  .myre-duo__row{\n    position:relative;\n    z-index:1;\n    display:flex;\n    align-items:center;\n    gap:var(--myre-gap);\n  }\n\n  \/* zweiter Block: Text links, Bild rechts *\/\n  .myre-duo__row--reverse{flex-direction:row-reverse;}\n\n  \/* Bildformat und Bildausschnitt je Block *\/\n  .myre-duo__row--a{--myre-img-ratio:var(--myre-ratio-1);--myre-img-fokus:var(--myre-fokus-1);}\n  .myre-duo__row--b{--myre-img-ratio:var(--myre-ratio-2);--myre-img-fokus:var(--myre-fokus-2);}\n\n  \/* ---------------- Bildspalte ---------------- *\/\n  .myre-duo__media{\n    flex:0 0 var(--myre-media-w);\n    max-width:var(--myre-media-w);\n  }\n  .myre-duo__frame{\n    position:relative;\n    width:100%;\n    aspect-ratio:var(--myre-img-ratio);\n    border-radius:var(--myre-radius);\n    overflow:hidden;\n    background:#eef1ef;\n    box-shadow:0 22px 60px -28px rgba(11,48,45,.45);\n    transition:box-shadow .6s ease,transform .6s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-duo__frame img{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    \/* Fallback \u201ecenter\", falls ein Block mal ohne --myre-img-fokus auskommt *\/\n    object-position:var(--myre-img-fokus,center);\n    display:block;\n    transform:scale(1.01);\n    transition:transform 1.4s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-duo__frame:hover img{transform:scale(1.06);}\n  .myre-duo__frame:hover{\n    transform:translateY(-4px);\n    box-shadow:0 30px 70px -26px rgba(11,48,45,.5);\n  }\n  \/* feiner gr\u00fcner Akzentrahmen, wird beim Hover sichtbar *\/\n  .myre-duo__frame::after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    border-radius:var(--myre-radius);\n    border:1px solid rgba(17,200,142,0);\n    box-shadow:inset 0 0 0 0 rgba(17,200,142,0);\n    transition:border-color .5s ease,box-shadow .5s ease;\n    pointer-events:none;\n  }\n  .myre-duo__frame:hover::after{\n    border-color:rgba(17,200,142,.55);\n    box-shadow:inset 0 0 0 3px rgba(17,200,142,.12);\n  }\n\n  \/* kleiner gr\u00fcner Winkel als grafischer Anker hinter dem Bild *\/\n  .myre-duo__media{position:relative;}\n  .myre-duo__media::before{\n    content:\"\";\n    position:absolute;\n    width:96px;height:96px;\n    border-radius:6px;\n    border-left:2px solid rgba(17,200,142,.5);\n    border-bottom:2px solid rgba(17,200,142,.5);\n    left:-22px; bottom:-22px;\n    z-index:0;\n  }\n  .myre-duo__row--reverse .myre-duo__media::before{\n    left:auto; right:-22px;\n    border-left:0; border-bottom:2px solid rgba(17,200,142,.5);\n    border-right:2px solid rgba(17,200,142,.5);\n  }\n\n  \/* ---------------- Textspalte ---------------- *\/\n  .myre-duo__text{\n    flex:1 1 auto;\n    min-width:0;\n    max-width:560px;\n  }\n\n  \/* >>> LABEL-PILLE <<<\n     Werte 1:1 aus Leistungen \/ Team \/ USP \u00fcbernommen:\n     padding 10px 24px, radius 999px, Punkt 9px, Abstand nach unten 22px.\n     line-height:1 sorgt daf\u00fcr, dass die Pille genau so hoch ist wie ihr Text. *\/\n  .myre-duo__eyebrow{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 24px;\n    border-radius:999px;\n    background:rgba(11,48,45,.04);\n    border:1px solid rgba(11,48,45,.15);\n    font-size:.8rem;              \/* identisch zu Leistungen + Team *\/\n    font-weight:500;\n    letter-spacing:.16em;         \/* identisch zu Leistungen + Team *\/\n    line-height:1;\n    text-transform:uppercase;\n    color:var(--myre-dark);\n  }\n  .myre-duo__eyebrow::before{\n    content:\"\";\n    flex:0 0 auto;\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 0 0 rgba(17,200,142,.5);\n    animation:myreDuoDot 2.4s ease-out infinite;\n  }\n  @keyframes myreDuoDot{\n    0%{box-shadow:0 0 0 0 rgba(17,200,142,.45);}\n    70%{box-shadow:0 0 0 10px rgba(17,200,142,0);}\n    100%{box-shadow:0 0 0 0 rgba(17,200,142,0);}\n  }\n\n  .myre-duo__title{\n    \/* Abstand liegt hier oben, nicht als margin-bottom an der Pille:\n       die Pille ist inline-flex, ihr margin-bottom w\u00e4re nicht verl\u00e4sslich. *\/\n    margin:22px 0 0;\n    line-height:1.14;             \/* wie Team-Sektion *\/\n    letter-spacing:-.5px;         \/* wie Leistungen + Team *\/\n    color:var(--myre-dark) !important;\n  }\n  .myre-duo__title .l1{\n    display:block;\n    font-size:var(--myre-h1);\n    font-weight:600;\n  }\n  .myre-duo__title .l2{\n    display:block;\n    margin-top:4px;\n    font-size:var(--myre-h2);\n    font-weight:300;\n    font-style:italic;\n    letter-spacing:-.4px;\n    \/* Markenfarbe Algal fuel #11c88e, voll deckend *\/\n    color:var(--myre-green) !important;\n  }\n\n  \/* modernisierter Trenner INNERHALB der Textspalte\n     (im Original: Pattern-Divider, 1px, schwarz).\n     Das ist NICHT der Trennstrich zwischen den Bereichen, der ist entfernt. *\/\n  .myre-duo__rule{\n    position:relative;\n    height:1px;\n    width:100%;\n    max-width:340px;\n    margin:30px 0 28px;\n    background:rgba(11,48,45,.14);\n    overflow:hidden;\n  }\n  .myre-duo__rule::after{\n    content:\"\";\n    position:absolute;\n    left:0; top:0;\n    height:100%;\n    width:72px;\n    background:var(--myre-green);\n    transition:width .8s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-duo__row.is-in .myre-duo__rule::after{width:170px;}\n\n  .myre-duo__body{\n    font-size:var(--myre-body);\n    font-weight:400;              \/* etwas kr\u00e4ftiger, war 300 = wirkte ausgegraut *\/\n    line-height:1.75;\n    color:var(--myre-dark) !important;   \/* volles #0b302d, kein Grauschleier *\/\n  }\n\n  \/* ---------------- Scroll-Reveal ----------------\n     WICHTIG: Der Inhalt ist standardm\u00e4\u00dfig SICHTBAR.\n     Erst wenn das Skript l\u00e4uft, setzt es .is-armed und blendet die Bl\u00f6cke\n     zum Einblenden aus. So bleibt nichts wei\u00df, falls das JS blockiert wird. *\/\n  .myre-duo.is-armed .myre-duo__row{\n    opacity:0;\n    transform:translateY(26px);\n  }\n  .myre-duo__row{\n    transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-duo.is-armed .myre-duo__row.is-in{opacity:1;transform:none;}\n\n  \/* ---------------- Responsive ---------------- *\/\n  @media (max-width:1024px){\n    .myre-duo{\n      --myre-media-w:44%;\n      --myre-band-oben:80px;\n      --myre-band-unten:88px;\n      --myre-band-innen:clamp(56px,6vw,72px);\n      \/* Die gr\u00f6\u00dfere Schrift gilt bewusst nur am Desktop. Hier steht wieder\n         der alte Wert, damit auf dem Tablet nichts springt. Am Handy\n         greift weiter unten zus\u00e4tzlich 1rem. *\/\n      --myre-body:1.0625rem;\n    }\n    .myre-duo__inner{padding:0 32px;}\n    .myre-duo__text{max-width:none;}\n  }\n\n  \/* ab hier gestapelt: erst Bild, dann Text (wie reverse_order_mobile) *\/\n  @media (max-width:860px){\n    \/* Hochkantiges Bild von Block 2 wird quer, damit es mobil nicht die halbe\n       Seite f\u00fcllt. Block 1 beh\u00e4lt bewusst 3\/2 \u2013 dort soll die Skyline auch am\n       Handy zu sehen sein, und \u00fcber die volle Breite wird das Bild dadurch nur\n       rund 240px hoch. *\/\n    .myre-duo{--myre-ratio-2:16\/11;}\n    .myre-duo__row,\n    .myre-duo__row--reverse{\n      flex-direction:column;\n      align-items:stretch;\n      gap:32px;\n    }\n    .myre-duo__media{flex:1 1 auto;max-width:100%;order:-1;}\n    .myre-duo__media::before,\n    .myre-duo__row--reverse .myre-duo__media::before{display:none;}\n    .myre-duo__rule{max-width:100%;margin:24px 0 22px;}\n  }\n\n  @media (max-width:600px){\n    .myre-duo{\n      --myre-radius:14px;\n      --myre-body:1rem;\n      --myre-band-oben:66px;\n      --myre-band-unten:74px;\n      --myre-band-innen:48px;\n    }\n    .myre-duo__inner{padding:0 22px;}\n    .myre-duo__title{letter-spacing:-.5px;}\n    .myre-duo__body{line-height:1.7;}\n  }\n\n  @media (prefers-reduced-motion:reduce){\n    .myre-duo *,\n    .myre-duo *::before,\n    .myre-duo *::after{\n      animation:none !important;\n      transition:none !important;\n    }\n    .myre-duo.is-armed .myre-duo__row{opacity:1 !important;transform:none !important;}\n  }\n<\/style>\n\n<section class=\"myre-duo\">\n\n  <!-- ========== Band 1 \/ Expertise: Bild links \/ Text rechts ========== -->\n  <div class=\"myre-duo__band myre-duo__band--a\">\n    <div class=\"myre-duo__inner\">\n\n      <div class=\"myre-duo__row myre-duo__row--a\">\n\n        <div class=\"myre-duo__media\">\n          <div class=\"myre-duo__frame\">\n            <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2025\/10\/WhatsApp-Bild-2025-09-23-um-17.42.34_a57e9710.jpg\"\n                 alt=\"Umfassende Immobilienexpertise \u2013 MY-RE\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n        <div class=\"myre-duo__text\">\n          <span class=\"myre-duo__eyebrow\">Expertise<\/span>\n          <h2 class=\"myre-duo__title\">\n            <span class=\"l1\">Umfassende<\/span>\n            <span class=\"l2\">Immobilienexpertise<\/span>\n          <\/h2>\n          <div class=\"myre-duo__rule\"><\/div>\n          <p class=\"myre-duo__body\">\n            Kombinierte Erfahrung der Gesch\u00e4ftsf\u00fchrer von \u00fcber 50 Jahren in Projektentwicklung\n            und -management mit tiefem Verst\u00e4ndnis der technischen, finanziellen und\n            betrieblichen Aspekte komplexer Projekte, insbesondere der Assetklassen B\u00fcro,\n            Hotel, Wohnen und Einzelhandel.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- ========== Band 2 \/ Netzwerk: Text links \/ Bild rechts, leicht grau ========== -->\n  <div class=\"myre-duo__band myre-duo__band--b\">\n    <div class=\"myre-duo__inner\">\n\n      <div class=\"myre-duo__row myre-duo__row--b myre-duo__row--reverse\">\n\n        <div class=\"myre-duo__media\">\n          <div class=\"myre-duo__frame\">\n            <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2025\/01\/Myko-01.png\"\n                 alt=\"Starkes Netzwerk \u2013 MY-RE\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n        <div class=\"myre-duo__text\">\n          <span class=\"myre-duo__eyebrow\">Netzwerk<\/span>\n          <h2 class=\"myre-duo__title\">\n            <span class=\"l1\">Starkes<\/span>\n            <span class=\"l2\">Netzwerk<\/span>\n          <\/h2>\n          <div class=\"myre-duo__rule\"><\/div>\n          <p class=\"myre-duo__body\">\n            Ein gut aufgebautes Netzwerk verbindet Menschen, Ressourcen und Kompetenzen.\n            Wir nutzen unsere Beziehungen zu lokalen und internationalen Partnern, um die\n            besten Experten, Dienstleister und L\u00f6sungen f\u00fcr jedes Projekt zusammenzubringen.\n            Ein starkes Netzwerk erm\u00f6glicht es, Herausforderungen flexibel zu bew\u00e4ltigen,\n            Wissen auszutauschen und Projekte effizient voranzutreiben. So entsteht eine\n            solide Grundlage, auf der nachhaltige und zukunftsorientierte Ergebnisse\n            aufgebaut werden k\u00f6nnen.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<script>\n(function(){\n  function init(){\n    var sections = document.querySelectorAll('.myre-duo');\n    if(!sections.length) return;\n\n    Array.prototype.forEach.call(sections,function(section){\n      if(section.getAttribute('data-myre-init') === '1') return;\n      section.setAttribute('data-myre-init','1');\n\n      var items = section.querySelectorAll('.myre-duo__row');\n      function showAll(){\n        Array.prototype.forEach.call(items,function(el){ el.classList.add('is-in'); });\n      }\n\n      \/* Ohne IntersectionObserver bleibt einfach alles sichtbar. *\/\n      if(!('IntersectionObserver' in window)) return;\n\n      \/* Ab hier \u00fcbernimmt das Skript die Steuerung. *\/\n      section.classList.add('is-armed');\n\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if(e.isIntersecting){\n            e.target.classList.add('is-in');\n            io.unobserve(e.target);\n          }\n        });\n      },{threshold:.15});\n\n      Array.prototype.forEach.call(items,function(el){ io.observe(el); });\n\n      \/* Sicherheitsnetz: falls der Observer aus irgendeinem Grund nicht\n         ausl\u00f6st (z. B. im Elementor-Editor), nach 1,8 s alles zeigen. *\/\n      setTimeout(showAll,1800);\n    });\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded',init);\n  } else {\n    init();\n  }\n  \/* Elementor-Editor: Widget wird nachtr\u00e4glich neu gerendert *\/\n  window.addEventListener('load',init);\n  if(window.jQuery){\n    jQuery(window).on('elementor\/frontend\/init',init);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee685f9 elementor-widget elementor-widget-html\" data-id=\"ee685f9\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"ueber\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     MY-RE \/ MYKORRHIZA REAL ESTATE \u2013 Team-Sektion (ohne Netzwerk-Teil)\n     - 7 Teammitglieder in Zweier-Reihen, Fotos durchgehend in Farbe\n     - Hover: dunkler Lese-Layer zieht \u00fcber die Karte, Zitat klappt auf\n     - Mobil: Karte \u00f6ffnet sich beim Scrollen, wenn sie fast ganz sichtbar ist\n\n     NEU in dieser Version:\n     1) Kopfbereich mittig \u2013 Badge, \u00dcberschrift und Button stehen zentriert\n        untereinander, wie in USP, Vision und 360\u00b0. Vorher standen Badge und\n        \u00dcberschrift links und der Button rechts au\u00dfen.\n     2) Reihenfolge wird bei JEDEM Seitenaufruf zuf\u00e4llig gemischt (Fisher-Yates).\n        Die Reihenfolge im HTML unten ist die gew\u00fcnschte feste Liste\n        1 Sven, 2 Bene, 3 Julian, 4 Theresa, 5 Jonathan, 6 Paul \u2013\n        die greift, falls JavaScript blockiert wird.\n        Abschalten: am <div class=\"myre-team__grid\"> das Attribut\n        data-myre-shuffle=\"1\" auf \"0\" setzen.\n     3) LinkedIn-Icon oben rechts auf jeder Karte, erscheint beim Hover bzw.\n        beim \u00d6ffnen der Karte. Nur das Icon ist klickbar, die restliche Karte\n        bleibt f\u00fcrs Lesen des Zitats frei.\n     4) Zitate von Theresa Kling und Paul Pufe erg\u00e4nzt. Alle sechs Karten\n        haben damit ein Zitat, es fehlt keines mehr.\n     5) Payman Hodjat entfernt \u2013 das Raster zeigt jetzt sechs Personen.\n        Bei sechs Karten und zwei pro Reihe bleibt keine Karte allein\n        in der letzten Zeile stehen.\n\n     Einf\u00fcgen in: Elementor > HTML-Widget (Section: volle Breite, Padding 0)\n     ============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .myre-team{\n    --myre-dark:#0b302d;\n    --myre-green:#11c88e;\n\n    \/* >>> STELLSCHRAUBEN <<< *\/\n    --myre-cols:2;              \/* Karten pro Reihe am Desktop -> gr\u00f6\u00dfere Fotos *\/\n    --myre-gap:28px;            \/* Abstand zwischen den Karten *\/\n    --myre-card-ratio:1\/1;      \/* Bildformat (Breite\/H\u00f6he). 4\/5 = hochkantiger *\/\n    --myre-radius:20px;         \/* Eckenrundung *\/\n    --myre-focus:center 22%;    \/* Bildausschnitt: h\u00f6herer Wert = Ausschnitt rutscht nach unten *\/\n\n    \/* Abstand zwischen \u00dcberschrift und Button im Kopfbereich *\/\n    --myre-btn-abstand:34px;\n\n    position:relative;\n    width:100%;\n    background:#FCFCFB;\n    font-family:'Poppins',sans-serif;\n    color:var(--myre-dark);\n    overflow:hidden;\n  }\n  .myre-team *{box-sizing:border-box;margin:0;padding:0;}\n\n  .myre-team__inner{\n    position:relative;\n    width:100%;\n    max-width:1300px;\n    margin:0 auto;\n    padding:100px 6vw 110px;\n  }\n\n  \/* ---------------- Kopfbereich ----------------\n     Jetzt mittig: eine Spalte, alles zentriert. Vorher war das eine Zeile\n     mit justify-content:space-between \u2013 dadurch stand der Button rechts\n     au\u00dfen und der Abschnitt fiel gegen USP, Vision und 360\u00b0 auf. *\/\n  .myre-team__head{\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    text-align:center;\n    margin-bottom:52px;\n  }\n  .myre-team__badge{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 24px;\n    margin-bottom:26px;\n    border-radius:999px;\n    background:rgba(11,48,45,.04);\n    border:1px solid rgba(11,48,45,.15);\n    font-size:.8rem;\n    font-weight:500;\n    letter-spacing:.16em;\n    text-transform:uppercase;\n  }\n  .myre-team__badge::before{\n    content:\"\";\n    flex:0 0 auto;\n    width:9px;height:9px;\n    border-radius:50%;\n    background:var(--myre-green);\n    box-shadow:0 0 0 0 rgba(17,200,142,.5);\n    animation:myreTDot 2.4s ease-out infinite;\n  }\n  .myre-team__title{\n    font-size:clamp(1.9rem,3.2vw,2.9rem);\n    font-weight:600;\n    line-height:1.14;\n    letter-spacing:-.5px;\n    color:var(--myre-dark) !important;\n  }\n  .myre-team__title span{\n    \/* Markenfarbe Algal fuel #11c88e, voll deckend *\/\n    color:var(--myre-green) !important;\n  }\n  \/* \"Mehr erfahren\"-Button \u2013 sitzt jetzt mittig unter der \u00dcberschrift *\/\n  .myre-team__btn{\n    display:inline-flex;\n    align-items:center;\n    gap:12px;\n    margin-top:var(--myre-btn-abstand);\n    padding:14px 26px;\n    border-radius:999px;\n    border:1px solid var(--myre-dark);\n    background:transparent;\n    color:var(--myre-dark) !important;\n    text-decoration:none !important;\n    font-size:.86rem;\n    font-weight:500;\n    letter-spacing:.04em;\n    transition:background .35s ease,color .35s ease,transform .35s ease,border-color .35s ease;\n  }\n  .myre-team__btn::after{\n    content:\"\";\n    width:16px;height:16px;\n    border-right:1.5px solid currentColor;\n    border-top:1.5px solid currentColor;\n    transform:rotate(45deg) scale(.62);\n    transition:transform .35s ease;\n  }\n  .myre-team__btn:hover{\n    background:var(--myre-dark);\n    border-color:var(--myre-dark);\n    color:#ffffff !important;\n    transform:translateY(-2px);\n  }\n  .myre-team__btn:hover::after{transform:rotate(45deg) scale(.62) translate(3px,-3px);}\n\n  \/* ---------------- Raster ---------------- *\/\n  .myre-team__grid{\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:center;      \/* -> letzte Reihe (1 Karte) sitzt mittig *\/\n    gap:var(--myre-gap);\n  }\n  .myre-member{\n    flex:0 1 calc((100% - (var(--myre-cols) - 1) * var(--myre-gap)) \/ var(--myre-cols));\n    max-width:calc((100% - (var(--myre-cols) - 1) * var(--myre-gap)) \/ var(--myre-cols));\n  }\n\n  .myre-member__card{\n    position:relative;\n    width:100%;\n    aspect-ratio:var(--myre-card-ratio);\n    border-radius:var(--myre-radius);\n    overflow:hidden;\n    cursor:pointer;\n    background:var(--myre-dark);\n    box-shadow:0 24px 55px -28px rgba(11,48,45,.45);\n    transition:transform .6s cubic-bezier(.22,.8,.3,1),box-shadow .6s ease;\n  }\n  .myre-member__card:hover,\n  .myre-member.is-open .myre-member__card{\n    transform:translateY(-6px);\n    box-shadow:0 40px 80px -28px rgba(11,48,45,.55);\n  }\n  .myre-member__card img{\n    position:absolute;inset:0;\n    width:100%;height:100%;\n    object-fit:cover;\n    object-position:var(--myre-focus);\n    \/* Fotos sind durchgehend in Farbe *\/\n    transform:scale(1.01);\n    transition:transform 1.4s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-member__card:hover img,\n  .myre-member.is-open .myre-member__card img{transform:scale(1.05);}\n\n  \/* Grundschleier \u2013 nur so viel, dass der Name sicher lesbar ist *\/\n  .myre-member__scrim{\n    position:absolute;inset:0;\n    z-index:1;\n    background:linear-gradient(to top,rgba(11,48,45,.78) 0%,rgba(11,48,45,.22) 40%,rgba(11,48,45,0) 72%);\n    transition:opacity .6s ease;\n  }\n\n  \/* Lese-Layer: zieht beim Hover \u00fcber die ganze Karte hoch.\n     Kr\u00e4ftig genug f\u00fcr langen Text + leichte Unsch\u00e4rfe darunter,\n     damit die Schrift auf jedem Foto ruhig steht. *\/\n  .myre-member__wash{\n    position:absolute;\n    left:0;right:0;bottom:0;\n    height:100%;\n    z-index:2;\n    background:linear-gradient(to top,\n      rgba(11,48,45,.96) 0%,\n      rgba(11,48,45,.93) 45%,\n      rgba(11,48,45,.80) 80%,\n      rgba(11,48,45,.62) 100%);\n    -webkit-backdrop-filter:blur(6px) saturate(.85);\n    backdrop-filter:blur(6px) saturate(.85);\n    transform:translateY(101%);\n    transition:transform .65s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-member__card:hover .myre-member__wash,\n  .myre-member.is-open .myre-member__wash{transform:translateY(0);}\n\n  \/* ---------------- LinkedIn-Icon ----------------\n     Liegt auf z-index:5 und damit \u00fcber dem feinen Innenrahmen (z-index:4).\n     Sichtbar wird es beim Hover, beim mobilen Aufklappen und bei\n     Tastatur-Fokus. Nur dieses Icon ist klickbar \u2013 die restliche Karte\n     bleibt frei, sonst w\u00fcrde man auf dem Handy beim Lesen des Zitats\n     st\u00e4ndig versehentlich das Profil \u00f6ffnen. *\/\n  .myre-member__li{\n    position:absolute;\n    top:18px; right:18px;\n    z-index:5;\n    width:38px;height:38px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    border-radius:50%;\n    background:rgba(255,255,255,.94);\n    color:var(--myre-dark) !important;\n    text-decoration:none !important;\n    box-shadow:0 6px 18px rgba(11,48,45,.28);\n    opacity:0;\n    transform:translateY(-6px) scale(.9);\n    transition:opacity .4s ease,\n               transform .4s cubic-bezier(.22,.8,.3,1),\n               background .3s ease,\n               color .3s ease;\n  }\n  .myre-member__card:hover .myre-member__li,\n  .myre-member.is-open .myre-member__li,\n  .myre-member__li:focus{\n    opacity:1;\n    transform:translateY(0) scale(1);\n  }\n  .myre-member__li:hover,\n  .myre-member__li:focus-visible{\n    background:var(--myre-green);\n    color:#ffffff !important;\n  }\n  .myre-member__li svg{\n    width:18px;height:18px;\n    display:block;\n    fill:currentColor;\n  }\n\n  \/* Textblock unten *\/\n  .myre-member__body{\n    position:absolute;\n    left:38px;right:38px;bottom:34px;\n    z-index:3;\n    color:#ffffff;\n  }\n  .myre-member__name{\n    font-size:clamp(1.15rem,1.7vw,1.5rem);\n    font-weight:500;\n    letter-spacing:-.2px;\n    line-height:1.2;\n    color:#ffffff !important;\n    text-shadow:0 2px 18px rgba(11,48,45,.6);\n  }\n  \/* gr\u00fcne Linie, die unter dem Namen aufzieht *\/\n  .myre-member__name::after{\n    content:\"\";\n    display:block;\n    width:0;height:2px;\n    margin-top:12px;\n    border-radius:2px;\n    background:var(--myre-green);\n    transition:width .55s cubic-bezier(.22,.8,.3,1) .08s;\n  }\n  .myre-member__card:hover .myre-member__name::after,\n  .myre-member.is-open .myre-member__name::after{width:64px;}\n\n  \/* Zitat: klappt sanft auf (0fr -> 1fr, ohne feste H\u00f6he) *\/\n  .myre-member__quote{\n    display:grid;\n    grid-template-rows:0fr;\n    opacity:0;\n    transition:grid-template-rows .6s cubic-bezier(.22,.8,.3,1),\n               opacity .45s ease;\n  }\n  .myre-member__quote > p{\n    overflow:hidden;\n    margin-top:16px;\n    \/* Zeilenl\u00e4nge begrenzt -> angenehm zu lesen, auch bei breiten Karten *\/\n    max-width:46em;\n    font-size:clamp(.9rem,1.05vw,1.02rem);\n    line-height:1.7;\n    font-weight:300;\n    font-style:italic;\n    color:rgba(255,255,255,.94);\n  }\n  .myre-member__card:hover .myre-member__quote,\n  .myre-member.is-open .myre-member__quote{\n    grid-template-rows:1fr;\n    opacity:1;\n    transition-delay:0s,.15s;\n  }\n\n  \/* feiner Innenrahmen *\/\n  .myre-member__card::after{\n    content:\"\";\n    position:absolute;inset:0;\n    z-index:4;\n    border-radius:var(--myre-radius);\n    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);\n    pointer-events:none;\n  }\n\n  \/* ---------------- Scroll-Reveal ---------------- *\/\n  .myre-team .myre-t-reveal{\n    opacity:0;\n    transform:translateY(38px);\n    transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.3,1);\n  }\n  .myre-team .myre-t-reveal.in-view{opacity:1;transform:translateY(0);}\n  \/* Die Verz\u00f6gerung h\u00e4ngt an der Position, nicht an der Person \u2013 nach dem\n     Mischen laufen die Karten also weiter sauber von oben nach unten ein. *\/\n  .myre-member:nth-child(1){transition-delay:.00s;}\n  .myre-member:nth-child(2){transition-delay:.07s;}\n  .myre-member:nth-child(3){transition-delay:.14s;}\n  .myre-member:nth-child(4){transition-delay:.21s;}\n  .myre-member:nth-child(5){transition-delay:.28s;}\n  .myre-member:nth-child(6){transition-delay:.35s;}\n  .myre-member:nth-child(7){transition-delay:.42s;}\n\n  @keyframes myreTDot{\n    0%  {box-shadow:0 0 0 0 rgba(17,200,142,.5);}\n    70% {box-shadow:0 0 0 12px rgba(17,200,142,0);}\n    100%{box-shadow:0 0 0 0 rgba(17,200,142,0);}\n  }\n\n  \/* ---------------- Responsive ---------------- *\/\n  @media (max-width:1024px){\n    .myre-team{--myre-cols:2;--myre-gap:20px;}\n    .myre-team__inner{padding:80px 32px 88px;}\n    .myre-team__head{margin-bottom:40px;}\n    .myre-member__body{left:26px;right:26px;bottom:26px;}\n    .myre-member__li{top:14px;right:14px;}\n  }\n  \/* ab hier eine Karte pro Reihe \u2013 daf\u00fcr etwas hochkantiger,\n     damit auch die langen Zitate ohne Gedr\u00e4nge Platz haben *\/\n  @media (max-width:820px){\n    .myre-team{--myre-cols:1;--myre-card-ratio:4\/5;--myre-gap:20px;--myre-btn-abstand:28px;}\n    .myre-member{max-width:100%;}\n  }\n  @media (max-width:600px){\n    .myre-team{--myre-gap:18px;--myre-radius:16px;}\n    .myre-team__inner{padding:66px 22px 74px;}\n    .myre-team__head{margin-bottom:32px;}\n    .myre-member__body{left:22px;right:22px;bottom:22px;}\n    .myre-member__quote > p{font-size:.92rem;line-height:1.65;margin-top:14px;}\n    .myre-member__li{width:36px;height:36px;top:12px;right:12px;}\n  }\n\n  \/* ---------------- Reduced Motion ---------------- *\/\n  @media (prefers-reduced-motion:reduce){\n    .myre-team .myre-t-reveal{opacity:1;transform:none;transition:none;}\n    .myre-member__card,.myre-member__card img,\n    .myre-member__wash,.myre-member__quote,\n    .myre-member__li{transition:none;}\n    .myre-team__badge::before{animation:none;}\n    \/* ohne Bewegung w\u00e4re das Icon sonst gar nicht auffindbar *\/\n    .myre-member__li{opacity:1;transform:none;}\n  }\n<\/style>\n\n<section class=\"myre-team\" id=\"Team\">\n  <div class=\"myre-team__inner\">\n\n    <!-- ========== Kopf, mittig ========== -->\n    <div class=\"myre-team__head myre-t-reveal\">\n      <span class=\"myre-team__badge\">Team<\/span>\n      <h2 class=\"myre-team__title\">\n        Die Menschen hinter<br><span>Mykorrhiza Real Estate<\/span>\n      <\/h2>\n      <a class=\"myre-team__btn\" href=\"https:\/\/my-re.de\/team\">Mehr erfahren<\/a>\n    <\/div>\n\n    <!-- ========== Raster ==========\n         Die Reihenfolge hier ist die gew\u00fcnschte feste Liste 1 bis 7.\n         Das Skript mischt sie bei jedem Aufruf neu.\n         data-myre-shuffle=\"0\" schaltet das Mischen ab. -->\n    <div class=\"myre-team__grid\" data-myre-shuffle=\"1\">\n\n      <!-- 1) Sven Seipp -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/SvS_02.jpeg\" alt=\"Sven Seipp\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/sven-seipp-86201328\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Sven Seipp auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Sven Seipp<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eIch m\u00f6chte nur noch Gesch\u00e4fte mit Leuten machen, die ich mag &ndash;\n              das ist der kleinste gemeinsame Nenner f\u00fcr ein erfolgreiches Projekt.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 2) Benedict Neuwirth -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/BeN_02.jpeg\" alt=\"Benedict Neuwirth\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/benedict-neuwirth-0b5b80104\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Benedict Neuwirth auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Benedict Neuwirth<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eGanz im Sinne unserer Philosophie ist es mein Anliegen, jedes Projekt\n              und jede Aufgabe neu zu denken und individuell zu gestalten. Nachhaltige und\n              gleichzeitig wirtschaftliche Ergebnisse entstehen nur durch ma\u00dfgeschneiderte\n              Ans\u00e4tze und eine enge, partnerschaftliche Zusammenarbeit. Gemeinsam schaffen\n              wir innovative L\u00f6sungen, die nicht nur heute \u00fcberzeugen, sondern auch morgen\n              bestehen.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 3) Julian Keetman -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/JFK_04.jpeg\" alt=\"Julian Keetman\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/julian-keetman-2a56b47b\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Julian Keetman auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Julian Keetman<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eFordernde Zeiten und Projekte verlangen sowohl Verl\u00e4sslichkeit als auch\n              Innovation gleicherma\u00dfen. In dieser Balance generieren wir bleibende Werte\n              f\u00fcr ein starkes Netzwerk. Mit unserem interdisziplin\u00e4ren Team verbinden wir\n              Kompetenz mit Leidenschaft, Expertise mit Leistungsbereitschaft und schaffen\n              so die perfekte Symbiose als Grundlage f\u00fcr Wachstum und Fortschritt.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 4) Theresa Kling -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/ThK_04.jpeg\" alt=\"Theresa Kling\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/theresa-kling\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Theresa Kling auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Theresa Kling<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eGute Deals entstehen nicht am Schreibtisch, sondern durch gute Kontakte.\n              F\u00fcr mich braucht erfolgreiche Akquise immer beides: fundiertes Fachwissen und\n              ein starkes Netzwerk &ndash; genau das treibt mich im aktiven\n              Branchenaustausch an.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 5) Jonathan Biran -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/JoB_03.jpeg\" alt=\"Jonathan Biran\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/jonathan-biran\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Jonathan Biran auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Jonathan Biran<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eEin starkes Netzwerk ist f\u00fcr mich der Grundstein jedes erfolgreichen\n              Projekts. Menschen zu verbinden, ihre St\u00e4rken zu vereinen und gemeinsam\n              langfristige, nachhaltige Werte zu schaffen &ndash; das ist der Kern meiner\n              Arbeit.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 6) Paul Pufe -->\n      <div class=\"myre-member myre-t-reveal\">\n        <div class=\"myre-member__card\" tabindex=\"0\">\n          <img decoding=\"async\" src=\"https:\/\/my-re.de\/wp-content\/uploads\/2026\/08\/PaP_01.jpeg\" alt=\"Paul Pufe\" loading=\"lazy\">\n          <div class=\"myre-member__scrim\"><\/div>\n          <div class=\"myre-member__wash\"><\/div>\n          <a class=\"myre-member__li\" href=\"https:\/\/www.linkedin.com\/in\/paul-pufe-b41547274\/\"\n             target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Paul Pufe auf LinkedIn\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.98 3.5a2.5 2.5 0 1 0 .02 5 2.5 2.5 0 0 0-.02-5zM3 9.5h4v11H3v-11zm7 0h3.8v1.5h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76v5.69h-4v-5.05c0-1.2-.02-2.75-1.7-2.75-1.7 0-1.96 1.3-1.96 2.66v5.14H10v-11z\"\/><\/svg>\n          <\/a>\n          <div class=\"myre-member__body\">\n            <h3 class=\"myre-member__name\">Paul Pufe<\/h3>\n            <div class=\"myre-member__quote\">\n              <p>\u201eMich begeistert es, bei Projektentwicklungen Menschen, Ideen und\n              wirtschaftliche Interessen zusammenzubringen. Mit Kreativit\u00e4t, analytischem\n              Blick und einer ausgepr\u00e4gten L\u00f6sungsorientierung entwickle ich gemeinsam im\n              Team tragf\u00e4hige Konzepte, schaffe nachhaltigen Nutzen und \u00fcbernehme\n              Verantwortung, die \u00fcber das reine Projekt hinausgeht.\u201c<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n\n  \/* ============ 1) Reihenfolge mischen (Fisher-Yates) ============\n     L\u00e4uft absichtlich SOFORT und nicht erst bei DOMContentLoaded.\n     Dieses Skript steht direkt hinter dem Markup, das Raster ist also\n     schon geparst, aber noch nicht gezeichnet. So blitzt die\n     urspr\u00fcngliche Reihenfolge nicht kurz auf.\n     Der Marker data-myre-shuffled verhindert, dass ein zweiter\n     Skriptdurchlauf nachtr\u00e4glich umsortiert und die Karten sichtbar\n     springen. Fisher-Yates, weil ein sort() mit Math.random() keine\n     gleichverteilte Reihenfolge liefert. *\/\n  function shuffle(){\n    var grid = document.querySelector('#Team .myre-team__grid');\n    if(!grid) return;\n    if(grid.getAttribute('data-myre-shuffle') === '0') return;\n    if(grid.getAttribute('data-myre-shuffled') === '1') return;\n    grid.setAttribute('data-myre-shuffled','1');\n\n    var cards = Array.prototype.slice.call(grid.children);\n    var i, j, tmp;\n    for(i = cards.length - 1; i > 0; i--){\n      j = Math.floor(Math.random() * (i + 1));\n      tmp = cards[i]; cards[i] = cards[j]; cards[j] = tmp;\n    }\n    var frag = document.createDocumentFragment();\n    for(i = 0; i < cards.length; i++){ frag.appendChild(cards[i]); }\n    grid.appendChild(frag);\n  }\n  shuffle();\n\n  \/* ============ 2) Verhalten ============ *\/\n  function init(){\n    var section = document.getElementById('Team');\n    if(!section) return;\n    if(section.getAttribute('data-myre-init') === '1') return;\n    section.setAttribute('data-myre-init','1');\n\n    \/* greift nur, wenn Elementor das Widget frisch gerendert hat *\/\n    shuffle();\n\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var each = function(list,fn){ Array.prototype.forEach.call(list,fn); };\n\n    \/* ---------- Scroll-Reveal beim Erscheinen ---------- *\/\n    var reveals = section.querySelectorAll('.myre-t-reveal');\n    if(reduced || !('IntersectionObserver' in window)){\n      each(reveals,function(el){ el.classList.add('in-view'); });\n    } else {\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if(e.isIntersecting){\n            e.target.classList.add('in-view');\n            io.unobserve(e.target);\n          }\n        });\n      },{threshold:.15});\n      each(reveals,function(el){ io.observe(el); });\n\n      \/* Sicherheitsnetz: springt der Observer nicht an, nach 1,8 s zeigen *\/\n      setTimeout(function(){\n        each(reveals,function(el){ el.classList.add('in-view'); });\n      },1800);\n    }\n\n    \/* ---------- Mobil: Karte \u00f6ffnet sich, wenn sie fast ganz sichtbar ist,\n         und schlie\u00dft wieder, sobald sie aus dem Blick rutscht ---------- *\/\n    var members = section.querySelectorAll('.myre-member');\n    var isTouch = window.matchMedia('(hover:none)').matches;\n\n    if(isTouch && 'IntersectionObserver' in window){\n      var ioOpen = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if(e.isIntersecting && e.intersectionRatio >= .82){\n            e.target.classList.add('is-open');\n          } else {\n            e.target.classList.remove('is-open');\n          }\n        });\n      },{threshold:[0,.5,.7,.82,.9,1]});\n      each(members,function(m){ ioOpen.observe(m); });\n    }\n\n    \/* ---------- Tastatur-Bedienung ----------\n       focusin\/focusout statt focus\/blur: die beiden bubbeln, dadurch bleibt\n       die Karte auch offen, wenn der Fokus vom Foto weiter auf das\n       LinkedIn-Icon wandert. Mit focus\/blur w\u00e4re sie beim Weitertabben\n       zugeklappt und das Icon h\u00e4tte sich genau dann weggeblendet. *\/\n    each(members,function(m){\n      m.addEventListener('focusin', function(){ m.classList.add('is-open'); });\n      m.addEventListener('focusout',function(){ m.classList.remove('is-open'); });\n    });\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded',init);\n  } else {\n    init();\n  }\n  \/* Elementor-Editor: Widget wird nachtr\u00e4glich neu gerendert *\/\n  window.addEventListener('load',init);\n  if(window.jQuery){\n    jQuery(window).on('elementor\/frontend\/init',init);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section data-lqd-custom-cursor=\"true\" class=\"elementor-section elementor-top-section elementor-element elementor-element-2b20b0ee elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-boxed elementor-section-height-default\" data-id=\"2b20b0ee\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-152f0c76\" data-id=\"152f0c76\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-51a50439 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"51a50439\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-57c0bb9d\" data-id=\"57c0bb9d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5898019a elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"5898019a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6bda35\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<p class=\"ld-fh-element d-inline-block pos-rel  p\"  > \u201eNachhaltigkeit bedeutet, scheinbar widerspr\u00fcchliche Ziele in Einklang zu bringen: Wachstum und Umwelt, Innovation und Tradition, Komplexit\u00e4t und Einfachheit. Wie Angus Young (AC\/DC) sagte: \u201aDas Komplexe ist einfach, das Einfache ist komplex.\u2018 Wir lassen uns von dieser Balance inspirieren.\u201c<\/p>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section data-tooltip=\"Contact\" class=\"elementor-section elementor-top-section elementor-element elementor-element-c402a75 elementor-section-height-full elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"c402a75\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4de06c7\" data-id=\"4de06c7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3029df7 elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"3029df7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6be079\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<h6 class=\"ld-fh-element d-inline-block pos-rel  elementor-heading-title lqd-highlight-classic lqd-highlight-grow-left h6\"  > Anfrage<\/h6>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d2f76e elementor-widget__width-initial elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"0d2f76e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6be679\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<h2 class=\"ld-fh-element d-inline-block pos-rel  elementor-heading-title lqd-highlight-classic lqd-highlight-grow-left h2\"  > Wir freuen uns \u00fcber Ihr Interesse<\/h2>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48cf76e elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"48cf76e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6beb73\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<p class=\"ld-fh-element d-inline-block pos-rel  lqd-highlight-classic lqd-highlight-grow-left p\"  > Bitte f\u00fcllen Sie das Formular so detailliert wie m\u00f6glich aus, damit wir Ihr Anliegen optimal bearbeiten k\u00f6nnen.<\/p>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f078cd elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"2f078cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6bf056\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<p class=\"ld-fh-element d-inline-block pos-rel  lqd-highlight-classic lqd-highlight-grow-left p\"  > info@my-re.de<\/p>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f67e3f elementor-widget elementor-widget-hub_fancy_heading\" data-id=\"9f67e3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hub_fancy_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div id=\"ld-fancy-heading-6ae066e6bf536\" class=\"ld-fancy-heading pos-rel\">\n\t\t\t<p class=\"ld-fh-element d-inline-block pos-rel  lqd-highlight-classic lqd-highlight-grow-left p\"  > Massif Central im Bethmannhof\nBethmannstr. 7-9<br>\n60311 Frankfurt am Main<\/p>\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-723b438\" data-id=\"723b438\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cf2f140 fluentform-widget-submit-button-custom elementor-widget elementor-widget-fluent-form-widget\" data-id=\"cf2f140\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"fluent-form-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n            <div class=\"fluentform-widget-wrapper fluentform-widget-align-default\">\n\n            \n            <div class='fluentform ff-inherit-theme-style fluentform_wrapper_1'><form data-form_id=\"1\" id=\"fluentform_1\" class=\"frm-fluent-form fluent_form_1 ff-el-form-top ff_form_instance_1_1 ff-form-loading ffs_inherit_theme\" data-form_instance=\"ff_form_instance_1_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Contact Form<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='6434' \/><input type=\"hidden\" id=\"_fluentform_1_fluentformnonce\" name=\"_fluentform_1_fluentformnonce\" value=\"57d3d238f8\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/6434\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_names_first_name_' id='label_ff_1_names_first_name_'>Vorname<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_1_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"Vorname\" aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_1_names_last_name_' id='label_ff_1_names_last_name_'>Nachname<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_1_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Nachname\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_email' id='label_ff_1_email'>Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_1_email\" class=\"ff-el-form-control\" placeholder=\"Email Address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_subject' id='label_ff_1_subject'>Betreff<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"subject\" class=\"ff-el-form-control\" placeholder=\"Betreff...\" data-name=\"subject\" id=\"ff_1_subject\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_1_message' id='label_ff_1_message'>Deine Nachricht (optional)<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"false\" aria-labelledby=\"label_ff_1_message\" name=\"message\" id=\"ff_1_message\" class=\"ff-el-form-control\" placeholder=\"Deine Nachricht...\" rows=\"4\" cols=\"2\" data-name=\"message\" ><\/textarea><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_no_style\"  aria-label=\"Absenden\">Absenden<\/button><\/div><\/fieldset><\/form><div id='fluentform_1_errors' class='ff-errors-in-stack ff_form_instance_1_1 ff-form-loading_errors ff_form_instance_1_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_1_1 = {\"id\":\"1\",\"ajaxUrl\":\"https:\\\/\\\/my-re.de\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\",\"asteriskPlacement\":\"asterisk-right\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_1_1\",\"form_id_selector\":\"fluentform_1\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global\":false,\"global_message\":\"Dieses Feld muss eine g\\u00fcltige E-Mail-Adresse enthalten\"}},\"subject\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"}},\"message\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"Dieses Feld ist erforderlich\"}}},\"debounce_time\":300,\"file_upload_settings\":[]};\n                            <\/script>\n                        <\/div>\n\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NachhaltigeEntwicklungen. Starke Verbindungen. Mit innovativen Konzepten und einem starken Netzwerk schaffen wir nachhaltige und kreative L\u00f6sungen. Video starten Philosophie und Vision Wir schaffenNetzwerke. In der Natur repr\u00e4sentieren Mykorrhiza-Pilze die perfekte Symbiose von Zusammenarbeit und Wachstum. Dieses Prinzip ist unser Leitbild: Netzwerke, die starke Verbindungen und nachhaltige Ergebnisse erm\u00f6glichen. Um diese Philosophie konsequent in Ergebnisse zu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6599,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6434","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/pages\/6434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/comments?post=6434"}],"version-history":[{"count":1070,"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/pages\/6434\/revisions"}],"predecessor-version":[{"id":8793,"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/pages\/6434\/revisions\/8793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/media\/6599"}],"wp:attachment":[{"href":"https:\/\/my-re.de\/en\/wp-json\/wp\/v2\/media?parent=6434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}