{"id":25,"date":"2026-08-25T19:01:58","date_gmt":"2026-08-25T19:01:58","guid":{"rendered":"https:\/\/competitors.mh-studio.de\/?page_id=25"},"modified":"2026-09-26T22:32:40","modified_gmt":"2026-09-26T20:32:40","slug":"startseite","status":"publish","type":"page","link":"https:\/\/competitors.mh-studio.de\/","title":{"rendered":"Startseite"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"25\" class=\"elementor elementor-25\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17a02df1 e-con-full e-flex e-con e-parent\" data-id=\"17a02df1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/competitors.mh-studio.de\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/720p_HeroVideo_GottfriedMack2026.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-42c3da9e e-con-full e-flex e-con e-child\" data-id=\"42c3da9e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4417f959 elementor-widget elementor-widget-heading\" data-id=\"4417f959\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Stuckateurbetrieb &amp; Ger\u00fcstbau seit 1987<\/p>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca7bfda elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"ca7bfda\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Handwerk, das h\u00e4lt, <br>was es verspricht<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bd30c4 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"0bd30c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7bf14704 e-con-full e-flex e-con e-child\" data-id=\"7bf14704\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bf62fc2 elementor-align-left gm-btn-24 elementor-widget elementor-widget-button\" data-id=\"1bf62fc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"\/kontakt\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Angebot anfragen<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a9b68ad elementor-align-left elementor-button-link gm-btn-24-ghost elementor-widget elementor-widget-button\" data-id=\"3a9b68ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"\/referenzen\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Referenzen ansehen<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\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-d4769e9 e-con-full e-flex e-con e-parent\" data-id=\"d4769e9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e94b83 elementor-widget elementor-widget-html\" data-id=\"7e94b83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 KUNDEN-LOGO-KARUSSELL (horizontal, endlos)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Funktionsweise:\r\n     - EIN durchgehendes Flex-Band (\"Spur\"), l\u00e4uft endlos nach links.\r\n     - JS dupliziert die einzelnen Logo-Kacheln (nicht einen ganzen\r\n       Wrapper) und h\u00e4ngt sie direkt in dieselbe Spur \u2014 dadurch bleibt\r\n       der Abstand (gap) an der Nahtstelle exakt so gro\u00df wie \u00fcberall\r\n       sonst, kein sichtbarer Sprung im Loop.\r\n     - Fade-Maske links\/rechts, Logos laufen weich rein\/raus.\r\n     - Pausiert bei Hover\/Touch.\r\n     - Auf Mobile bleibt es dieselbe eine Reihe, nur kompakter und\r\n       etwas flotter.\r\n     - prefers-reduced-motion wird respektiert (horizontales Scrollen\r\n       per Touch\/Trackpad bleibt dann trotzdem m\u00f6glich).\r\n\r\n     ANPASSEN:\r\n     - Logos unten im HTML ersetzen (src + alt)\r\n     - Geschwindigkeit: --gm-logo-dauer weiter unten in Sekunden\r\n     - Abstand: --gm-logo-gap\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-logos{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-logo-dauer:32s;      \/* Umlaufzeit, gr\u00f6\u00dfer = langsamer *\/\r\n  --gm-logo-gap:56px;       \/* Abstand zwischen den Logos *\/\r\n\r\n  position:relative;\r\n  background:var(--gm-schwarz);\r\n  padding:80px 0;\r\n  overflow:hidden;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n\/* Volle Breite, Fade-Maske links\/rechts *\/\r\n.gm-logos__fenster{\r\n  position:relative;\r\n  width:100%;\r\n  overflow-x:hidden;\r\n  overflow-y:visible;\r\n  padding:14px 0;   \/* Puffer nach oben\/unten, damit die Hover-Anhebung + Schatten nicht am Fenster-Rand kollidieren *\/\r\n  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n}\r\n\r\n\/* Periodischer Licht-Sweep, l\u00e4uft alle paar Sekunden einmal quer\r\n   \u00fcber die gesamte Logo-Reihe \u2014 das gibt den \"boom\"-Kick, ohne\r\n   dass es dauerhaft ablenkt (kurzer Puls, lange Pause dazwischen) *\/\r\n.gm-logos__fenster::after{\r\n  content:\"\";\r\n  position:absolute;inset:0;\r\n  background:linear-gradient(100deg, transparent 42%, rgba(217,7,24,.10) 50%, transparent 58%);\r\n  transform:translateX(-120%);\r\n  animation:gmLogosSweep 6s ease-in-out infinite;\r\n  pointer-events:none;\r\n  z-index:2;\r\n}\r\n@keyframes gmLogosSweep{\r\n  0%{transform:translateX(-120%)}\r\n  14%{transform:translateX(120%)}\r\n  100%{transform:translateX(120%)}\r\n}\r\n\r\n\/* Eine einzige durchgehende Spur \u2014 JS h\u00e4ngt die Duplikate direkt\r\n   als weitere Kinder hier an, dadurch bleibt der gap \u00fcberall gleich *\/\r\n.gm-logos__spur{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:var(--gm-logo-gap);\r\n  width:max-content;\r\n  animation:gmLogosLinks var(--gm-logo-dauer) linear infinite;\r\n}\r\n\r\n@keyframes gmLogosLinks{\r\n  from{transform:translateX(0)}\r\n  to{transform:translateX(-50%)}   \/* -50%, weil die Spur per JS verdoppelt wird *\/\r\n}\r\n\r\n\/* Pausieren bei Hover, damit man in Ruhe ein Logo anschauen kann *\/\r\n.gm-logos__fenster:hover .gm-logos__spur{\r\n  animation-play-state:paused;\r\n}\r\n\r\n.gm-logos__kachel{\r\n  display:flex;align-items:center;justify-content:center;\r\n  flex:none;\r\n  min-width:240px;height:148px;\r\n  padding:24px 30px;\r\n  background:#FFFFFF;\r\n  border-radius:8px;\r\n  box-shadow:0 1px 0 rgba(0,0,0,.04);\r\n  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;\r\n}\r\n.gm-logos__kachel:hover{\r\n  transform:translateY(-6px) scale(1.05);\r\n  box-shadow:0 14px 34px -8px rgba(217,7,24,.45),0 0 0 2px rgba(217,7,24,.5);\r\n}\r\n\r\n.gm-logos__kachel img{\r\n  max-width:100%;\r\n  max-height:92px;\r\n  width:auto;height:auto;\r\n  object-fit:contain;\r\n}\r\n\r\n\/* F\u00fcr Logos, die bei gleicher H\u00f6he optisch viel gr\u00f6\u00dfer wirken als\r\n   der Rest (z.B. sehr breite Wortmarken) \u2014 einzeln \u00fcber die\r\n   Zusatzklasse \"gm-logos__kachel--klein\" auf dem img-Tag kleiner\r\n   skalieren, ohne alle anderen Logos zu beeinflussen. *\/\r\n.gm-logos__kachel img.gm-logos__kachel--klein{\r\n  max-height:56px;\r\n}\r\n\r\n\/* ---------- Responsive ----------\r\n   Bleibt bewusst dieselbe Struktur (eine horizontale Reihe),\r\n   nur kompakter und etwas flotter, damit es auf schmalen\r\n   Screens nicht z\u00e4h wirkt. *\/\r\n@media (max-width:640px){\r\n  .gm-logos{padding-block:56px;--gm-logo-gap:24px;--gm-logo-dauer:20s}\r\n  .gm-logos__kachel{min-width:180px;height:116px;padding:16px 20px}\r\n  .gm-logos__kachel img{max-height:68px}\r\n  .gm-logos__kachel img.gm-logos__kachel--klein{max-height:42px}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-logos__spur{animation:none!important}\r\n  .gm-logos__fenster{overflow-x:auto}\r\n  .gm-logos__fenster::after{animation:none!important;display:none}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-logos\" aria-label=\"Unsere Kunden\" id=\"gmLogosSektion\">\r\n\r\n  <div class=\"gm-logos__fenster\" id=\"gmLogoFenster\">\r\n    <div class=\"gm-logos__spur\" id=\"gmLogoSpur\">\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Logos-01.svg\" alt=\"Kunde 1\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Logos-02.svg\" alt=\"Kunde 2\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1.svg\" alt=\"Kunde 3\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1-03-2.svg\" alt=\"Kunde 4\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1-05-5.svg\" alt=\"Kunde 5\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1-06.svg\" alt=\"Kunde 6\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1-07.svg\" alt=\"Kunde 7\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Unbenannt-1-10.svg\" alt=\"Kunde 8\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Minimax_Logo.svg_.png\" alt=\"Minimax\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" class=\"gm-logos__kachel--klein\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Kreissparkasse_Reutlingen.svg_.png\" alt=\"Kreissparkasse Reutlingen\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" class=\"gm-logos__kachel--klein\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/Volksbank.png\" alt=\"Volksbank\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/LandehauptstadtStuttgart-1.png\" alt=\"Landeshauptstadt Stuttgart\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/8cf3d11c-c6ab-4fc3-a41b-bc952c5e2d98.png\" alt=\"Outletcity Metzingen\"><\/div>\r\n      <div class=\"gm-logos__kachel\"><img decoding=\"async\" src=\"https:\/\/competitors.mh-studio.de\/wp-content\/uploads\/2026\/08\/GWG-Tuebingen.png\" alt=\"GWG T\u00fcbingen\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* Dupliziert JEDE einzelne Logo-Kachel (nicht einen Wrapper) und\r\n   h\u00e4ngt sie direkt in dieselbe Spur an. Dadurch ist der Abstand\r\n   zwischen der letzten Original-Kachel und der ersten Klon-Kachel\r\n   exakt derselbe \"gap\" wie \u00fcberall sonst \u2014 kein sichtbarer Sprung\r\n   an der Nahtstelle des Loops. L\u00e4uft nur einmal beim Laden. *\/\r\n(function(){\r\n  var spur = document.getElementById('gmLogoSpur');\r\n  if (!spur) return;\r\n  var kacheln = Array.prototype.slice.call(spur.children);\r\n  kacheln.forEach(function(kachel){\r\n    var klon = kachel.cloneNode(true);\r\n    klon.setAttribute('aria-hidden', 'true'); \/\/ Duplikat aus Screenreader-Sicht ausblenden\r\n    spur.appendChild(klon);\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9348f5b e-con-full e-flex e-con e-parent\" data-id=\"9348f5b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5651363 elementor-widget elementor-widget-html\" data-id=\"5651363\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 LEISTUNGEN (Bento-Grid mit Bild-Reveal)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Funktionsweise:\r\n     - Asymmetrisches Grid (Bento-Style): unterschiedlich gro\u00dfe\r\n       Kacheln, nicht alle gleich, das wirkt weniger \"Template\".\r\n     - Im Ruhezustand: dunkle Kachel, Nummer + Titel.\r\n     - Bei Hover: Hintergrundbild blendet ein (Kenburns-artiges\r\n       Zoom-out von leicht vergr\u00f6\u00dfert auf normal), dunkler Verlauf\r\n       dar\u00fcber f\u00fcr Textlesbarkeit, schr\u00e4ger roter Akzentstrich\r\n       erscheint (gleiche Formsprache wie der 2.4-Button), Pfeil\r\n       f\u00e4hrt rein.\r\n     - Eine Kachel ist die durchgehend rote CTA-Kachel zur\r\n       Leistungs\u00fcbersicht, hebt sich bewusst vom Rest ab.\r\n     - Mobile: Grid f\u00e4llt auf eine Spalte zur\u00fcck, alle Kacheln\r\n       gleich hoch, Spans werden aufgehoben.\r\n\r\n     ANPASSEN:\r\n     - Bild-URLs unten ersetzen (echte Projektfotos je Gewerk)\r\n     - Links (href) auf die jeweiligen Leistungsseiten anpassen\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-leistungen{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-linie:rgba(242,242,242,.10);\r\n\r\n  background:var(--gm-schwarz);\r\n  padding:90px 64px;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n.gm-leistungen__kopf{\r\n  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;\r\n  max-width:1320px;margin:0 auto 44px;\r\n}\r\n.gm-leistungen__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.5);margin:0 0 12px;\r\n}\r\n.gm-leistungen__titel{\r\n  margin:0;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;text-transform:uppercase;\r\n  max-width:14ch;\r\n}\r\n.gm-leistungen__sub{\r\n  margin:0;max-width:36ch;\r\n  color:rgba(242,242,242,.62);font-size:15px;line-height:1.6;\r\n}\r\n\r\n.gm-leistungen__grid{\r\n  max-width:1320px;margin:0 auto;\r\n  display:grid;\r\n  grid-template-columns:repeat(4, 1fr);\r\n  grid-auto-rows:180px;\r\n  gap:14px;\r\n}\r\n\r\n\/* Bento-Spans: manche Kacheln gr\u00f6\u00dfer\/breiter als andere *\/\r\n.gm-leistungen__karte:nth-child(1){grid-column:span 2;grid-row:span 2}\r\n.gm-leistungen__karte:nth-child(2){grid-column:span 2}\r\n.gm-leistungen__karte:nth-child(3){grid-column:span 1}\r\n.gm-leistungen__karte:nth-child(4){grid-column:span 1;grid-row:span 2}\r\n.gm-leistungen__karte:nth-child(5){grid-column:span 2}\r\n.gm-leistungen__karte:nth-child(6){grid-column:span 1}\r\n.gm-leistungen__karte:nth-child(7){grid-column:span 1}\r\n.gm-leistungen__karte:nth-child(8){grid-column:span 2}\r\n.gm-leistungen__karte--cta{grid-column:span 2}\r\n\r\n.gm-leistungen__karte{\r\n  position:relative;\r\n  display:flex;flex-direction:column;justify-content:flex-end;\r\n  padding:22px 24px;\r\n  background:#1a1a19;\r\n  border:1px solid var(--gm-linie);\r\n  overflow:hidden;\r\n  text-decoration:none;\r\n  isolation:isolate;\r\n}\r\n\r\n\/* Hintergrundbild-Layer, unsichtbar im Ruhezustand *\/\r\n.gm-leistungen__bild{\r\n  position:absolute;inset:0;\r\n  background-size:cover;background-position:center;\r\n  opacity:0;\r\n  transform:scale(1.12);\r\n  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);\r\n  z-index:-2;\r\n}\r\n.gm-leistungen__karte:hover .gm-leistungen__bild{\r\n  opacity:1;\r\n  transform:scale(1);\r\n}\r\n\r\n\/* Dunkler Verlauf \u00fcber dem Bild, f\u00fcr Textlesbarkeit immer da,\r\n   wird bei Hover etwas kr\u00e4ftiger *\/\r\n.gm-leistungen__schleier{\r\n  position:absolute;inset:0;\r\n  background:linear-gradient(180deg, rgba(26,26,25,.15) 0%, rgba(26,26,25,.55) 55%, rgba(26,26,25,.92) 100%);\r\n  transition:opacity .4s ease;\r\n  z-index:-1;\r\n}\r\n\r\n\/* Schr\u00e4ger roter Akzentstrich, gleiche Formsprache wie der\r\n   2.4-Button \u2014 f\u00e4hrt bei Hover von unten links rein *\/\r\n.gm-leistungen__karte::before{\r\n  content:\"\";\r\n  position:absolute;left:0;right:0;bottom:0;height:3px;\r\n  background:var(--gm-rot);\r\n  transform:scaleX(0) skewX(-18deg);\r\n  transform-origin:left;\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.gm-leistungen__karte:hover::before{\r\n  transform:scaleX(1) skewX(-18deg);\r\n}\r\n\r\n.gm-leistungen__nummer{\r\n  position:relative;z-index:1;\r\n  font-variation-settings:\"wght\" 700;\r\n  font-size:12px;letter-spacing:.14em;\r\n  color:rgba(242,242,242,.5);\r\n  margin:0 0 10px;\r\n  transition:color .3s ease;\r\n}\r\n.gm-leistungen__karte:hover .gm-leistungen__nummer{\r\n  color:rgba(242,242,242,.85);\r\n}\r\n\r\n.gm-leistungen__name{\r\n  position:relative;z-index:1;\r\n  margin:0;\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(17px,1.7vw,22px);\r\n  color:var(--gm-kalk);\r\n  letter-spacing:-0.01em;text-transform:uppercase;\r\n  line-height:1.08;\r\n  transform:translateY(4px);\r\n  transition:transform .35s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.gm-leistungen__karte:hover .gm-leistungen__name{\r\n  transform:translateY(0);\r\n}\r\n\r\n.gm-leistungen__pfeil{\r\n  position:absolute;top:20px;right:20px;z-index:1;\r\n  width:34px;height:34px;\r\n  display:flex;align-items:center;justify-content:center;\r\n  border:1px solid rgba(242,242,242,.25);\r\n  opacity:0;\r\n  transform:translate(-6px,6px);\r\n  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1),background .25s ease,border-color .25s ease;\r\n}\r\n.gm-leistungen__karte:hover .gm-leistungen__pfeil{\r\n  opacity:1;transform:translate(0,0);\r\n  background:var(--gm-rot);border-color:var(--gm-rot);\r\n}\r\n.gm-leistungen__pfeil svg{width:14px;height:14px;color:var(--gm-kalk)}\r\n\r\n\/* ---------- CTA-Kachel: durchgehend rot statt Bild-Reveal ---------- *\/\r\n.gm-leistungen__karte--cta{\r\n  background:var(--gm-rot);\r\n  justify-content:center;align-items:flex-start;\r\n}\r\n.gm-leistungen__karte--cta .gm-leistungen__name{\r\n  transform:none;font-size:clamp(19px,2vw,26px);\r\n}\r\n.gm-leistungen__karte--cta .gm-leistungen__nummer{\r\n  color:rgba(242,242,242,.75);\r\n}\r\n.gm-leistungen__karte--cta::before{display:none}\r\n.gm-leistungen__karte--cta .gm-leistungen__pfeil{\r\n  opacity:1;transform:none;\r\n  border-color:rgba(242,242,242,.4);background:transparent;\r\n}\r\n.gm-leistungen__karte--cta:hover .gm-leistungen__pfeil{\r\n  background:var(--gm-kalk);border-color:var(--gm-kalk);\r\n}\r\n.gm-leistungen__karte--cta:hover .gm-leistungen__pfeil svg{color:var(--gm-rot)}\r\n.gm-leistungen__karte--cta:hover{\r\n  background:#c00410;\r\n}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1000px){\r\n  .gm-leistungen__grid{grid-template-columns:repeat(2, 1fr);grid-auto-rows:200px}\r\n  .gm-leistungen__karte:nth-child(1){grid-column:span 2;grid-row:span 1}\r\n  .gm-leistungen__karte:nth-child(4){grid-row:span 1}\r\n}\r\n@media (max-width:640px){\r\n  .gm-leistungen{padding-block:64px}\r\n  .gm-leistungen__grid{grid-template-columns:1fr;grid-auto-rows:170px}\r\n  .gm-leistungen__karte,\r\n  .gm-leistungen__karte:nth-child(1),\r\n  .gm-leistungen__karte:nth-child(2),\r\n  .gm-leistungen__karte:nth-child(3),\r\n  .gm-leistungen__karte:nth-child(4),\r\n  .gm-leistungen__karte:nth-child(5),\r\n  .gm-leistungen__karte:nth-child(6),\r\n  .gm-leistungen__karte:nth-child(7),\r\n  .gm-leistungen__karte:nth-child(8),\r\n  .gm-leistungen__karte--cta{\r\n    grid-column:span 1;grid-row:span 1;\r\n  }\r\n  \/* Auf Mobile Bild direkt sichtbar statt nur bei Hover (kein\r\n     Hover-Ger\u00e4t), damit die Kacheln nicht leer wirken *\/\r\n  .gm-leistungen__bild{opacity:.55;transform:scale(1)}\r\n  .gm-leistungen__karte::before{transform:scaleX(1) skewX(-18deg)}\r\n  .gm-leistungen__pfeil{opacity:1;transform:none}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-leistungen__bild,.gm-leistungen__name,.gm-leistungen__pfeil,.gm-leistungen__karte::before{\r\n    transition:none!important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-leistungen\" aria-label=\"Unsere Leistungen\">\r\n  <div class=\"gm-leistungen__kopf\">\r\n    <div>\r\n      <div class=\"gm-leistungen__eyebrow\">Was wir k\u00f6nnen<\/div>\r\n      <h2 class=\"gm-leistungen__titel\">Acht Gewerke, ein Ansprechpartner<\/h2>\r\n    <\/div>\r\n    <p class=\"gm-leistungen__sub\">Von der einzelnen Fassade bis zur kompletten Sanierung. Wir koordinieren, Sie haben einen Kontakt statt sieben Baustellen im Kopf.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"gm-leistungen__grid\">\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/innen-aussenputz\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-INNEN-AUSSENPUTZ.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">01<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Innen- &amp; Au\u00dfenputz<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/vollwaermeschutz\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-VOLLWAERMESCHUTZ.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">02<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Vollw\u00e4rmeschutz<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/trockenbau-reutlingen\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-TROCKENBAU.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">03<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Trockenbau<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/geruestbau\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-GERUESTBAU.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">04<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Ger\u00fcstbau<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/altbausanierung\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-ALTBAUSANIERUNG.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">05<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Altbausanierung<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/stuckarbeiten\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-STUCKARBEITEN.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">06<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Stuckarbeiten<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/innenausbau-malerarbeiten\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-INNENAUSBAU-MALER.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">07<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Innenausbau &amp; Malerarbeiten<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte\" href=\"\/leistungen\/komplettsanierung\/\">\r\n      <div class=\"gm-leistungen__bild\" style=\"background-image:url('HIER-BILD-URL-KOMPLETTSANIERUNG.jpg')\"><\/div>\r\n      <div class=\"gm-leistungen__schleier\"><\/div>\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">08<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Komplettsanierung<\/h3>\r\n    <\/a>\r\n\r\n    <a class=\"gm-leistungen__karte gm-leistungen__karte--cta\" href=\"\/leistungen\/\">\r\n      <span class=\"gm-leistungen__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <div class=\"gm-leistungen__nummer\">\u00dcbersicht<\/div>\r\n      <h3 class=\"gm-leistungen__name\">Alle Leistungen im Detail<\/h3>\r\n    <\/a>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7c9943e e-con-full e-flex e-con e-parent\" data-id=\"7c9943e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81f4fe1 elementor-widget elementor-widget-html\" data-id=\"81f4fe1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 REFERENZEN-TEASER\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Funktionsweise:\r\n     - 6 Projekt-Kacheln in einem gleichm\u00e4\u00dfigen Grid (bewusst\r\n       ruhiger als das Leistungs-Bento, damit sich beide Sektionen\r\n       nicht optisch duplizieren).\r\n     - Jede Kachel: Bild, schr\u00e4ger Gewerk-Tag oben links (gleiche\r\n       Skew-Formsprache wie der 2.4-Button\/Leistungs-Akzentstrich),\r\n       Projektname + Ort unten.\r\n     - Hover: Bild zoomt sanft, Tag wechselt auf Rot, Pfeil poppt.\r\n     - Abschluss: zentrierter CTA-Button im bekannten 2.4-Rot\u2192Wei\u00df-Stil,\r\n       verlinkt auf die vollst\u00e4ndige Referenzen-Seite.\r\n     - Mobile: Grid f\u00e4llt auf eine Spalte.\r\n\r\n     ANPASSEN:\r\n     - Bild-URLs unten ersetzen (echte Projektfotos)\r\n     - Projektname, Ort, Gewerk-Tag je Kachel anpassen\r\n     - Link im CTA-Button pr\u00fcfen (\/referenzen\/)\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-ref{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-linie:rgba(242,242,242,.10);\r\n\r\n  background:var(--gm-schwarz);\r\n  padding:90px 64px;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n.gm-ref__kopf{\r\n  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;\r\n  max-width:1320px;margin:0 auto 44px;\r\n}\r\n.gm-ref__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.5);margin:0 0 12px;\r\n}\r\n.gm-ref__titel{\r\n  margin:0;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;text-transform:uppercase;\r\n  max-width:16ch;\r\n}\r\n.gm-ref__sub{\r\n  margin:0;max-width:36ch;\r\n  color:rgba(242,242,242,.62);font-size:15px;line-height:1.6;\r\n}\r\n\r\n.gm-ref__grid{\r\n  max-width:1320px;margin:0 auto;\r\n  display:grid;\r\n  grid-template-columns:repeat(3, 1fr);\r\n  gap:18px;\r\n}\r\n\r\n.gm-ref__karte{\r\n  position:relative;\r\n  display:block;\r\n  text-decoration:none;\r\n  overflow:hidden;\r\n  aspect-ratio:4\/5;\r\n  background:#1a1a19;\r\n  isolation:isolate;\r\n}\r\n\r\n.gm-ref__bild{\r\n  position:absolute;inset:0;\r\n  background-size:cover;background-position:center;\r\n  transform:scale(1.04);\r\n  transition:transform .6s cubic-bezier(.2,.8,.2,1);\r\n  z-index:-2;\r\n}\r\n.gm-ref__karte:hover .gm-ref__bild{\r\n  transform:scale(1.12);\r\n}\r\n\r\n.gm-ref__schleier{\r\n  position:absolute;inset:0;\r\n  background:linear-gradient(180deg, rgba(26,26,25,.05) 0%, rgba(26,26,25,.15) 45%, rgba(26,26,25,.92) 100%);\r\n  z-index:-1;\r\n}\r\n\r\n\/* Schr\u00e4ger Gewerk-Tag oben links, gleiche Skew-Formsprache wie\r\n   der 2.4-Button und die Leistungs-Kacheln *\/\r\n.gm-ref__tag{\r\n  position:absolute;top:18px;left:-6px;z-index:1;\r\n  display:inline-flex;align-items:center;\r\n  background:rgba(242,242,242,.92);color:var(--gm-schwarz);\r\n  padding:7px 18px 7px 22px;\r\n  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;\r\n  transform:skewX(-12deg);\r\n  transition:background .3s ease,color .3s ease;\r\n}\r\n.gm-ref__tag span{display:inline-block;transform:skewX(12deg)}\r\n.gm-ref__karte:hover .gm-ref__tag{\r\n  background:var(--gm-rot);color:var(--gm-kalk);\r\n}\r\n\r\n.gm-ref__inhalt{\r\n  position:absolute;left:0;right:0;bottom:0;z-index:1;\r\n  padding:22px 24px;\r\n  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;\r\n}\r\n\r\n.gm-ref__name{\r\n  margin:0 0 4px;\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:19px;letter-spacing:-0.01em;text-transform:uppercase;\r\n  color:var(--gm-kalk);\r\n  line-height:1.12;\r\n}\r\n.gm-ref__ort{\r\n  margin:0;\r\n  font-size:13px;color:rgba(242,242,242,.6);\r\n}\r\n\r\n.gm-ref__pfeil{\r\n  flex:none;\r\n  width:36px;height:36px;\r\n  display:flex;align-items:center;justify-content:center;\r\n  border:1px solid rgba(242,242,242,.3);\r\n  opacity:0;\r\n  transform:translate(-6px,6px);\r\n  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1),background .25s ease,border-color .25s ease;\r\n}\r\n.gm-ref__karte:hover .gm-ref__pfeil{\r\n  opacity:1;transform:translate(0,0);\r\n  background:var(--gm-rot);border-color:var(--gm-rot);\r\n}\r\n.gm-ref__pfeil svg{width:15px;height:15px;color:var(--gm-kalk)}\r\n\r\n\/* ---------- CTA am Fu\u00df der Sektion (2.4-Rot\u2192Wei\u00df-Stil) ---------- *\/\r\n.gm-ref__fuss{\r\n  max-width:1320px;margin:44px auto 0;\r\n  display:flex;justify-content:center;\r\n}\r\n.gm-ref__cta{\r\n  position:relative;display:inline-flex;align-items:center;\r\n  background:var(--gm-rot);color:var(--gm-kalk);text-decoration:none;\r\n  padding:17px 34px;overflow:hidden;\r\n  font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;\r\n  border:1px solid var(--gm-rot);\r\n  transition:color .3s ease;\r\n}\r\n.gm-ref__cta::before{\r\n  content:\"\";position:absolute;top:0;left:0;right:0;height:4px;\r\n  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px 8px);\r\n  transition:background-image .3s ease;z-index:1;\r\n}\r\n.gm-ref__cta::after{\r\n  content:\"\";position:absolute;left:-20px;bottom:0;top:0;width:0;\r\n  background:var(--gm-kalk);z-index:0;\r\n  transform:skewX(-18deg);\r\n  transition:width .32s ease;\r\n}\r\n.gm-ref__cta span{position:relative;z-index:1}\r\n.gm-ref__cta:hover{color:var(--gm-schwarz)}\r\n.gm-ref__cta:hover::before{background-image:repeating-linear-gradient(90deg,rgba(38,38,36,.4) 0 1px,transparent 1px 8px)}\r\n.gm-ref__cta:hover::after{width:calc(100% + 40px)}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1000px){\r\n  .gm-ref__grid{grid-template-columns:repeat(2, 1fr)}\r\n}\r\n@media (max-width:640px){\r\n  .gm-ref{padding:64px 24px}\r\n  .gm-ref__grid{grid-template-columns:1fr;gap:14px}\r\n  .gm-ref__karte{aspect-ratio:16\/11}\r\n  .gm-ref__pfeil{opacity:1;transform:none}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-ref__bild,.gm-ref__pfeil,.gm-ref__cta::after{transition:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-ref\" aria-label=\"Referenzen\">\r\n  <div class=\"gm-ref__kopf\">\r\n    <div>\r\n      <div class=\"gm-ref__eyebrow\">Ausgef\u00fchrte Projekte<\/div>\r\n      <h2 class=\"gm-ref__titel\">Referenzen aus der Region<\/h2>\r\n    <\/div>\r\n    <p class=\"gm-ref__sub\">Eine Auswahl abgeschlossener Projekte aus Stuttgart, T\u00fcbingen und der Region, vom Gewerbebau bis zur W\u00e4rmed\u00e4mmung im Bestand.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"gm-ref__grid\">\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/porsche-museum-stuttgart\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-porsche-museum-stuttgart.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>Innenausbau<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Porsche Museum<\/h3>\r\n          <p class=\"gm-ref__ort\">Stuttgart<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/maria-montessori-schule\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-maria-montessori-schule.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>WDVS<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Maria Montessori Schule<\/h3>\r\n          <p class=\"gm-ref__ort\">Region Stuttgart<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/sky-hochhaus-bietigheim\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-sky-hochhaus-bietigheim.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>Innenausbau<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Sky Hochhaus<\/h3>\r\n          <p class=\"gm-ref__ort\">Bietigheim<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/holzgrundareal-kornwestheim\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-holzgrundareal-kornwestheim.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>WDVS \/ Klinker<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Holzgrundareal<\/h3>\r\n          <p class=\"gm-ref__ort\">Kornwestheim<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/pflegeheim-hechinger-eck-tuebingen\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-pflegeheim-hechinger-eck-tuebingen.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>WDVS<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Pflegeheim Hechinger Eck<\/h3>\r\n          <p class=\"gm-ref__ort\">T\u00fcbingen<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/tvc-schnarrenberg-baseballarena\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-tvc-schnarrenberg-baseballarena.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>Holz Fassade<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">TVC Schnarrenberg Baseballarena<\/h3>\r\n          <p class=\"gm-ref__ort\">T\u00fcbingen<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/minimax-stuttgart\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-minimax-stuttgart.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>WDVS<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Minimax<\/h3>\r\n          <p class=\"gm-ref__ort\">Stuttgart<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/bosch-feuerbach\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-bosch-feuerbach.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>Innenputz<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Bosch<\/h3>\r\n          <p class=\"gm-ref__ort\">Feuerbach<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a class=\"gm-ref__karte\" href=\"\/referenzen\/stuttgart-theoderichweg\/\">\r\n      <div class=\"gm-ref__bild\" style=\"background-image:url('PLATZHALTER-stuttgart-theoderichweg.jpg')\"><\/div>\r\n      <div class=\"gm-ref__schleier\"><\/div>\r\n      <div class=\"gm-ref__tag\"><span>WDVS<\/span><\/div>\r\n      <div class=\"gm-ref__inhalt\">\r\n        <div>\r\n          <h3 class=\"gm-ref__name\">Theoderichweg<\/h3>\r\n          <p class=\"gm-ref__ort\">Stuttgart<\/p>\r\n        <\/div>\r\n        <span class=\"gm-ref__pfeil\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H8M17 7v9\"\/><\/svg><\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"gm-ref__fuss\">\r\n    <a class=\"gm-ref__cta\" href=\"\/referenzen\/\"><span>Alle Referenzen ansehen<\/span><\/a>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30c05bc e-con-full e-flex e-con e-parent\" data-id=\"30c05bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d7775f elementor-widget elementor-widget-html\" data-id=\"4d7775f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 \u00dcBER UNS (animiert)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Bausteine:\r\n     1. Kopf: Eyebrow + Headline, Wort f\u00fcr Wort per Scroll-Reveal\r\n        eingeblendet (kein einfaches Fade, echte Staffelung).\r\n     2. Bild-Block rechts mit schr\u00e4gem roten Rahmen-Akzent und\r\n        einer freischwebenden Stat-Karte, die leicht \"hineinf\u00e4llt\".\r\n     3. Vier Statistik-Zahlen, die beim Scrollen ins Sichtfeld von\r\n        0 auf ihren Zielwert hochz\u00e4hlen (echte JS-Animation, keine\r\n        reine CSS-Spielerei).\r\n\r\n     ANPASSEN:\r\n     - Zahlen unten mit echten Werten ersetzen\r\n     - Bild-URL ersetzen\r\n     - Text in \"gm-ueber__intro\" durch echten \u00dcber-uns-Text ersetzen\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-ueber{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-linie:rgba(242,242,242,.12);\r\n\r\n  position:relative;\r\n  background:var(--gm-schwarz);\r\n  padding:100px 64px;\r\n  overflow:hidden;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n\/* ---------- Kopf: Wort-f\u00fcr-Wort-Reveal ---------- *\/\r\n.gm-ueber__kopf{\r\n  max-width:1320px;margin:0 auto 72px;\r\n  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;\r\n}\r\n.gm-ueber__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.5);margin:0 0 18px;\r\n  opacity:0;transform:translateY(10px);\r\n  transition:opacity .5s ease,transform .5s ease;\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__eyebrow{opacity:1;transform:translateY(0)}\r\n\r\n.gm-ueber__headline{\r\n  margin:0;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(30px,4.4vw,54px);letter-spacing:-0.02em;text-transform:uppercase;\r\n  line-height:1.05;\r\n}\r\n\/* Jedes Wort einzeln eingepackt (siehe HTML), poppt gestaffelt ein *\/\r\n.gm-ueber__wort{\r\n  display:inline-block;\r\n  opacity:0;\r\n  transform:translateY(28px) scale(.95);\r\n  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);\r\n  transition-delay:calc(var(--gm-w,0) * 55ms);\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__wort{opacity:1;transform:translateY(0) scale(1)}\r\n.gm-ueber__headline em{font-style:normal;color:var(--gm-rot)}\r\n\r\n.gm-ueber__intro{\r\n  margin:0;max-width:44ch;\r\n  color:rgba(242,242,242,.62);font-size:15.5px;line-height:1.7;\r\n  opacity:0;transform:translateY(14px);\r\n  transition:opacity .6s ease .35s,transform .6s ease .35s;\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__intro{opacity:1;transform:translateY(0)}\r\n\r\n\/* ---------- Bild-Block mit schr\u00e4gem Rahmen-Akzent ---------- *\/\r\n.gm-ueber__bildbox{\r\n  position:relative;\r\n  aspect-ratio:4\/3;\r\n  opacity:0;transform:translateX(24px);\r\n  transition:opacity .7s ease .2s,transform .7s cubic-bezier(.2,.8,.2,1) .2s;\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__bildbox{opacity:1;transform:translateX(0)}\r\n\r\n.gm-ueber__bild{\r\n  position:absolute;inset:0;\r\n  background-size:cover;background-position:center;\r\n}\r\n.gm-ueber__rahmen{\r\n  position:absolute;top:-14px;left:-14px;right:14px;bottom:14px;\r\n  border:2px solid var(--gm-rot);\r\n  z-index:-1;\r\n}\r\n\r\n\/* Freischwebende Stat-Karte, f\u00e4llt leicht rein *\/\r\n.gm-ueber__floater{\r\n  position:absolute;left:-28px;bottom:-28px;z-index:2;\r\n  background:var(--gm-rot);color:var(--gm-kalk);\r\n  padding:22px 26px;\r\n  min-width:160px;\r\n  opacity:0;transform:translateY(20px) rotate(-2deg);\r\n  transition:opacity .6s ease .55s,transform .6s cubic-bezier(.34,1.56,.64,1) .55s;\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__floater{opacity:1;transform:translateY(0) rotate(-2deg)}\r\n.gm-ueber__floater strong{\r\n  display:block;font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:30px;letter-spacing:-0.02em;line-height:1;\r\n}\r\n.gm-ueber__floater span{\r\n  display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;color:rgba(242,242,242,.85);\r\n}\r\n\r\n\/* ---------- Statistik-Zahlen (z\u00e4hlen beim Scroll hoch) ---------- *\/\r\n.gm-ueber__stats{\r\n  max-width:1320px;margin:0 auto;\r\n  display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;\r\n  background:var(--gm-linie);\r\n  border-top:1px solid var(--gm-linie);border-bottom:1px solid var(--gm-linie);\r\n}\r\n.gm-ueber__stat{\r\n  background:var(--gm-schwarz);\r\n  padding:36px 24px;\r\n  text-align:center;\r\n  opacity:0;transform:translateY(16px);\r\n  transition:opacity .5s ease,transform .5s ease;\r\n}\r\n.gm-ueber.gm-sichtbar .gm-ueber__stat{opacity:1;transform:translateY(0)}\r\n.gm-ueber__stat:nth-child(1){transition-delay:.1s}\r\n.gm-ueber__stat:nth-child(2){transition-delay:.2s}\r\n.gm-ueber__stat:nth-child(3){transition-delay:.3s}\r\n.gm-ueber__stat:nth-child(4){transition-delay:.4s}\r\n\r\n.gm-ueber__zahl{\r\n  display:flex;align-items:baseline;justify-content:center;gap:2px;\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(34px,4vw,52px);color:var(--gm-kalk);letter-spacing:-0.02em;\r\n}\r\n.gm-ueber__zahl small{font-size:.45em;color:var(--gm-rot)}\r\n.gm-ueber__stat-label{\r\n  margin-top:10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.55);\r\n}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:1000px){\r\n  .gm-ueber__kopf{grid-template-columns:1fr;gap:36px}\r\n  .gm-ueber__bildbox{order:-1;max-width:480px}\r\n  .gm-ueber__stats{grid-template-columns:repeat(2, 1fr)}\r\n}\r\n@media (max-width:640px){\r\n  .gm-ueber{padding:64px 24px}\r\n  .gm-ueber__floater{left:14px;bottom:-20px;padding:16px 20px}\r\n  .gm-ueber__floater strong{font-size:24px}\r\n  .gm-ueber__stats{grid-template-columns:1fr 1fr;gap:1px}\r\n  .gm-ueber__stat{padding:26px 16px}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-ueber *{transition:none!important}\r\n  .gm-ueber__eyebrow,.gm-ueber__wort,.gm-ueber__intro,.gm-ueber__bildbox,\r\n  .gm-ueber__floater,.gm-ueber__stat{opacity:1!important;transform:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-ueber\" aria-label=\"\u00dcber uns\" id=\"gmUeberSektion\">\r\n\r\n  <div class=\"gm-ueber__kopf\">\r\n    <div>\r\n      <div class=\"gm-ueber__eyebrow\">Der Betrieb<\/div>\r\n      <h2 class=\"gm-ueber__headline\" id=\"gmUeberHeadline\">Handwerk mit <em>Haltung<\/em>, seit fast vier Jahrzehnten<\/h2>\r\n      <p class=\"gm-ueber__intro\" style=\"margin-top:22px\">\r\n        Gegr\u00fcndet 1987, heute ein Betrieb mit acht Gewerken unter einem Dach.\r\n        Wir stehen f\u00fcr saubere Ausf\u00fchrung, pers\u00f6nliche Betreuung und Projekte,\r\n        die auch nach Jahren noch halten, was sie am ersten Tag versprochen haben.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"gm-ueber__bildbox\">\r\n      <div class=\"gm-ueber__rahmen\"><\/div>\r\n      <div class=\"gm-ueber__bild\" style=\"background-image:url('HIER-BILD-URL-TEAM-ODER-BAUSTELLE.jpg')\"><\/div>\r\n      <div class=\"gm-ueber__floater\">\r\n        <strong>1987<\/strong>\r\n        <span>Gegr\u00fcndet in Pliezhausen<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"gm-ueber__stats\">\r\n    <div class=\"gm-ueber__stat\">\r\n      <div class=\"gm-ueber__zahl\"><span data-gm-count=\"39\">0<\/span><small>+<\/small><\/div>\r\n      <div class=\"gm-ueber__stat-label\">Jahre Erfahrung<\/div>\r\n    <\/div>\r\n    <div class=\"gm-ueber__stat\">\r\n      <div class=\"gm-ueber__zahl\"><span data-gm-count=\"8\">0<\/span><\/div>\r\n      <div class=\"gm-ueber__stat-label\">Gewerke im Haus<\/div>\r\n    <\/div>\r\n    <div class=\"gm-ueber__stat\">\r\n      <div class=\"gm-ueber__zahl\"><span data-gm-count=\"450\">0<\/span><small>+<\/small><\/div>\r\n      <div class=\"gm-ueber__stat-label\">Projekte umgesetzt<\/div>\r\n    <\/div>\r\n    <div class=\"gm-ueber__stat\">\r\n      <div class=\"gm-ueber__zahl\"><span data-gm-count=\"6\">0<\/span><\/div>\r\n      <div class=\"gm-ueber__stat-label\">Regionen betreut<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sektion = document.getElementById('gmUeberSektion');\r\n  if (!sektion) return;\r\n\r\n  \/* Headline in einzelne W\u00f6rter zerlegen, jedes Wort in ein Span mit\r\n     --gm-w (Index) verpackt, damit die CSS-transition-delay-Staffelung\r\n     greift. HTML-Tags wie <em> bleiben dabei erhalten. *\/\r\n  var headline = document.getElementById('gmUeberHeadline');\r\n  if (headline) {\r\n    var html = headline.innerHTML;\r\n    var teile = html.split(\/(<em>.*?<\\\/em>|\\s+)\/g).filter(Boolean);\r\n    var index = 0;\r\n    var neuesHTML = teile.map(function(teil){\r\n      if (\/^\\s+$\/.test(teil)) return teil;\r\n      var i = index++;\r\n      if (teil.indexOf('<em>') === 0) {\r\n        var inhalt = teil.replace(\/<\\\/?em>\/g, '');\r\n        return '<em class=\"gm-ueber__wort\" style=\"--gm-w:' + i + '\">' + inhalt + '<\/em>';\r\n      }\r\n      return '<span class=\"gm-ueber__wort\" style=\"--gm-w:' + i + '\">' + teil + '<\/span>';\r\n    }).join('');\r\n    headline.innerHTML = neuesHTML;\r\n  }\r\n\r\n  \/* Zahlen von 0 auf ihren data-gm-count-Zielwert hochz\u00e4hlen *\/\r\n  function zaehleHoch(el, ziel, dauerMs){\r\n    var start = null;\r\n    function schritt(zeitstempel){\r\n      if (!start) start = zeitstempel;\r\n      var fortschritt = Math.min((zeitstempel - start) \/ dauerMs, 1);\r\n      var geschwungen = 1 - Math.pow(1 - fortschritt, 3); \/\/ ease-out\r\n      el.textContent = Math.round(ziel * geschwungen);\r\n      if (fortschritt < 1) requestAnimationFrame(schritt);\r\n    }\r\n    requestAnimationFrame(schritt);\r\n  }\r\n\r\n  var zahlenGestartet = false;\r\n  function zahlenStarten(){\r\n    if (zahlenGestartet) return;\r\n    zahlenGestartet = true;\r\n    sektion.querySelectorAll('[data-gm-count]').forEach(function(el){\r\n      var ziel = parseInt(el.getAttribute('data-gm-count'), 10) || 0;\r\n      zaehleHoch(el, ziel, 1400);\r\n    });\r\n  }\r\n\r\n  \/* Sichtbarkeit der ganzen Sektion triggert Wort-Reveal und Stats\r\n     UND startet gleichzeitig das Hochz\u00e4hlen der Zahlen. *\/\r\n  if ('IntersectionObserver' in window) {\r\n    var beobachter = new IntersectionObserver(function(eintraege){\r\n      eintraege.forEach(function(eintrag){\r\n        if (eintrag.isIntersecting) {\r\n          sektion.classList.add('gm-sichtbar');\r\n          zahlenStarten();\r\n          beobachter.unobserve(sektion);\r\n        }\r\n      });\r\n    }, { threshold: 0.25 });\r\n    beobachter.observe(sektion);\r\n  } else {\r\n    sektion.classList.add('gm-sichtbar');\r\n    zahlenStarten();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed9594c e-con-full e-flex e-con e-parent\" data-id=\"ed9594c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-deaffd8 elementor-widget elementor-widget-html\" data-id=\"deaffd8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 ABLAUF (4 Schritte, animiert \u2014 v2)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Warum neu aufgebaut:\r\n     Die erste Version hat die Verbindungslinie \u00fcber eine einzige,\r\n     gesch\u00e4tzte Prozent-Position gelegt \u2014 das ging bei Grid-Gap nie\r\n     exakt auf. Diese Version nutzt stattdessen: einen Flex-Container\r\n     OHNE Gap (Abstand kommt \u00fcber padding-right auf den Schritten),\r\n     dadurch hat jeder Schritt exakt dieselbe Breite. Jede Verbindung\r\n     ist ein eigenes Pseudo-Element mit fixer Startposition (Kreis-\r\n     mitte = 30px, halbe Kreisbreite) und width:100% der EIGENEN\r\n     Schrittbreite \u2014 das landet mathematisch garantiert exakt auf der\r\n     Kreismitte des n\u00e4chsten Schritts, unabh\u00e4ngig von Textl\u00e4nge oder\r\n     Bildschirmbreite. Kein JS, keine Messung, keine Rundungsfehler.\r\n\r\n     Jede der 3 Verbindungen (zwischen 4 Kreisen) zieht sich einzeln\r\n     per scaleX\/scaleY auf, zeitlich an das Aufpoppen des jeweils\r\n     n\u00e4chsten Kreises gekoppelt \u2014 das wirkt wie ein durchlaufender\r\n     Fortschritt statt einer einzigen global wachsenden Linie.\r\n\r\n     ANPASSEN:\r\n     - Texte der 4 Schritte bei Bedarf sch\u00e4rfen\r\n     - Link im CTA-Button pr\u00fcfen (\/kontakt\/)\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-ablauf{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-linie:rgba(242,242,242,.14);\r\n\r\n  position:relative;\r\n  background:var(--gm-schwarz);\r\n  padding:100px 64px;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n.gm-ablauf__kopf{\r\n  max-width:1320px;margin:0 auto 64px;\r\n  text-align:center;\r\n}\r\n.gm-ablauf__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.5);margin:0 0 14px;\r\n}\r\n.gm-ablauf__titel{\r\n  margin:0 auto;max-width:20ch;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;text-transform:uppercase;\r\n}\r\n\r\n\/* ---------- Schritt-Reihe ---------- *\/\r\n.gm-ablauf__reihe{\r\n  max-width:1320px;margin:0 auto 56px;\r\n  display:flex;\r\n  \/* Kein gap! Der Abstand kommt \u00fcber padding-right auf .gm-ablauf__schritt,\r\n     damit die Breiten-Mathematik der Verbindungslinien exakt aufgeht. *\/\r\n}\r\n\r\n.gm-ablauf__schritt{\r\n  position:relative;\r\n  flex:1 1 0;\r\n  padding-right:28px;\r\n  opacity:0;transform:translateY(20px);\r\n  transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.gm-ablauf__schritt:last-child{padding-right:0}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt{opacity:1;transform:translateY(0)}\r\n.gm-ablauf__schritt:nth-child(1){transition-delay:.05s}\r\n.gm-ablauf__schritt:nth-child(2){transition-delay:.35s}\r\n.gm-ablauf__schritt:nth-child(3){transition-delay:.65s}\r\n.gm-ablauf__schritt:nth-child(4){transition-delay:.95s}\r\n\r\n\/* Verbindungslinie: sitzt auf jedem Schritt au\u00dfer dem letzten.\r\n   left:30px = exakte horizontale Mitte des 60px breiten Kreises.\r\n   width:100% = exakt die Breite des EIGENEN Schritts (inkl. seines\r\n   padding-right), landet dadurch immer exakt auf der Kreismitte\r\n   des n\u00e4chsten Schritts \u2014 unabh\u00e4ngig von der tats\u00e4chlichen Breite\r\n   in Pixeln. Grundlinie grau, Fortschritt rot obendr\u00fcber, beide\r\n   ziehen sich per scaleX von links nach rechts auf. *\/\r\n.gm-ablauf__schritt:not(:last-child)::before,\r\n.gm-ablauf__schritt:not(:last-child)::after{\r\n  content:\"\";\r\n  position:absolute;top:29px;left:30px;width:100%;height:2px;\r\n  transform-origin:left center;\r\n  transform:scaleX(0);\r\n}\r\n.gm-ablauf__schritt:not(:last-child)::before{\r\n  background:var(--gm-linie);\r\n  transition:transform .5s ease;\r\n}\r\n.gm-ablauf__schritt:not(:last-child)::after{\r\n  background:var(--gm-rot);\r\n  transition:transform .6s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:not(:last-child)::before,\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:not(:last-child)::after{\r\n  transform:scaleX(1);\r\n}\r\n\/* Jede Verbindung startet leicht verz\u00f6gert nach dem Kreis, aus dem\r\n   sie \"herausw\u00e4chst\" \u2014 Segment 1\u21922, 2\u21923, 3\u21924 *\/\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(1)::before,\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(1)::after{transition-delay:.25s}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(2)::before,\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(2)::after{transition-delay:.55s}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(3)::before,\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(3)::after{transition-delay:.85s}\r\n\r\n.gm-ablauf__kreis{\r\n  position:relative;z-index:1;\r\n  width:60px;height:60px;\r\n  display:flex;align-items:center;justify-content:center;\r\n  background:var(--gm-schwarz);\r\n  border:2px solid var(--gm-linie);\r\n  margin-bottom:24px;\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:20px;color:rgba(242,242,242,.55);\r\n  transition:border-color .4s ease,color .4s ease;\r\n}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(1) .gm-ablauf__kreis{border-color:var(--gm-rot);color:var(--gm-kalk);transition-delay:.05s}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(2) .gm-ablauf__kreis{border-color:var(--gm-rot);color:var(--gm-kalk);transition-delay:.35s}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(3) .gm-ablauf__kreis{border-color:var(--gm-rot);color:var(--gm-kalk);transition-delay:.65s}\r\n.gm-ablauf.gm-sichtbar .gm-ablauf__schritt:nth-child(4) .gm-ablauf__kreis{border-color:var(--gm-rot);color:var(--gm-kalk);transition-delay:.95s}\r\n\r\n.gm-ablauf__name{\r\n  margin:0 0 8px;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:18px;letter-spacing:-0.01em;text-transform:uppercase;\r\n}\r\n.gm-ablauf__text{\r\n  margin:0;max-width:26ch;\r\n  font-size:13.5px;line-height:1.6;color:rgba(242,242,242,.6);\r\n}\r\n\r\n\/* ---------- Abschluss-CTA ---------- *\/\r\n.gm-ablauf__fuss{\r\n  max-width:1320px;margin:0 auto;\r\n  display:flex;justify-content:center;\r\n}\r\n.gm-ablauf__cta{\r\n  position:relative;display:inline-flex;align-items:center;\r\n  background:var(--gm-rot);color:var(--gm-kalk);text-decoration:none;\r\n  padding:17px 34px;overflow:hidden;\r\n  font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;\r\n  border:1px solid var(--gm-rot);\r\n  transition:color .3s ease;\r\n}\r\n.gm-ablauf__cta::before{\r\n  content:\"\";position:absolute;top:0;left:0;right:0;height:4px;\r\n  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px 8px);\r\n  transition:background-image .3s ease;z-index:1;\r\n}\r\n.gm-ablauf__cta::after{\r\n  content:\"\";position:absolute;left:-20px;bottom:0;top:0;width:0;\r\n  background:var(--gm-kalk);z-index:0;\r\n  transform:skewX(-18deg);\r\n  transition:width .32s ease;\r\n}\r\n.gm-ablauf__cta span{position:relative;z-index:1}\r\n.gm-ablauf__cta:hover{color:var(--gm-schwarz)}\r\n.gm-ablauf__cta:hover::before{background-image:repeating-linear-gradient(90deg,rgba(38,38,36,.4) 0 1px,transparent 1px 8px)}\r\n.gm-ablauf__cta:hover::after{width:calc(100% + 40px)}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:900px){\r\n  .gm-ablauf__reihe{flex-direction:column}\r\n  .gm-ablauf__schritt{padding-right:0;padding-left:88px;padding-bottom:36px}\r\n  .gm-ablauf__schritt:last-child{padding-bottom:0}\r\n  .gm-ablauf__kreis{position:absolute;left:0;top:0;margin-bottom:0}\r\n\r\n  \/* Auf Mobile l\u00e4uft die Verbindung vertikal: gleiche Logik, nur\r\n     um 90\u00b0 gedreht \u2014 left:29px (Kreismitte), top:60px (unterhalb\r\n     des Kreises), height:100% der eigenen Schritt-Box (inkl. ihres\r\n     padding-bottom), landet exakt auf dem n\u00e4chsten Kreismittelpunkt. *\/\r\n  .gm-ablauf__schritt:not(:last-child)::before,\r\n  .gm-ablauf__schritt:not(:last-child)::after{\r\n    top:60px;left:29px;width:2px;height:100%;\r\n    transform-origin:top center;\r\n    transform:scaleY(0);\r\n  }\r\n  .gm-ablauf.gm-sichtbar .gm-ablauf__schritt:not(:last-child)::before,\r\n  .gm-ablauf.gm-sichtbar .gm-ablauf__schritt:not(:last-child)::after{\r\n    transform:scaleY(1);\r\n  }\r\n}\r\n@media (max-width:640px){\r\n  .gm-ablauf{padding:64px 24px}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-ablauf *{transition:none!important}\r\n  .gm-ablauf__schritt,.gm-ablauf__kreis{opacity:1!important;transform:none!important}\r\n  .gm-ablauf__schritt::before,.gm-ablauf__schritt::after{transform:scaleX(1)!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-ablauf\" aria-label=\"So l\u00e4uft die Zusammenarbeit ab\" id=\"gmAblaufSektion\">\r\n  <div class=\"gm-ablauf__kopf\">\r\n    <div class=\"gm-ablauf__eyebrow\">So arbeiten wir<\/div>\r\n    <h2 class=\"gm-ablauf__titel\">Von der Anfrage bis zur fertigen Wand<\/h2>\r\n  <\/div>\r\n\r\n  <div class=\"gm-ablauf__reihe\">\r\n    <div class=\"gm-ablauf__schritt\">\r\n      <div class=\"gm-ablauf__kreis\">01<\/div>\r\n      <h3 class=\"gm-ablauf__name\">Anfrage<\/h3>\r\n      <p class=\"gm-ablauf__text\">Sie schildern uns kurz, um was es geht, per Formular, Anruf oder E-Mail.<\/p>\r\n    <\/div>\r\n    <div class=\"gm-ablauf__schritt\">\r\n      <div class=\"gm-ablauf__kreis\">02<\/div>\r\n      <h3 class=\"gm-ablauf__name\">Besichtigung<\/h3>\r\n      <p class=\"gm-ablauf__text\">Wir schauen uns das Objekt vor Ort an und kl\u00e4ren offene Fragen direkt.<\/p>\r\n    <\/div>\r\n    <div class=\"gm-ablauf__schritt\">\r\n      <div class=\"gm-ablauf__kreis\">03<\/div>\r\n      <h3 class=\"gm-ablauf__name\">Angebot<\/h3>\r\n      <p class=\"gm-ablauf__text\">Sie erhalten ein transparentes Angebot, ohne versteckte Positionen.<\/p>\r\n    <\/div>\r\n    <div class=\"gm-ablauf__schritt\">\r\n      <div class=\"gm-ablauf__kreis\">04<\/div>\r\n      <h3 class=\"gm-ablauf__name\">Umsetzung<\/h3>\r\n      <p class=\"gm-ablauf__text\">Unsere Kolonne setzt das Projekt um, mit einem Ansprechpartner f\u00fcr alles.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"gm-ablauf__fuss\">\r\n    <a class=\"gm-ablauf__cta\" href=\"\/kontakt\/\"><span>Jetzt Anfrage starten<\/span><\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sektion = document.getElementById('gmAblaufSektion');\r\n  if (!sektion) return;\r\n  if ('IntersectionObserver' in window) {\r\n    var beobachter = new IntersectionObserver(function(eintraege){\r\n      eintraege.forEach(function(eintrag){\r\n        if (eintrag.isIntersecting) {\r\n          sektion.classList.add('gm-sichtbar');\r\n          beobachter.unobserve(sektion);\r\n        }\r\n      });\r\n    }, { threshold: 0.3 });\r\n    beobachter.observe(sektion);\r\n  } else {\r\n    sektion.classList.add('gm-sichtbar');\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d8e8daa e-con-full e-flex e-con e-parent\" data-id=\"d8e8daa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-608991f elementor-widget elementor-widget-html\" data-id=\"608991f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 IMAGEFILM (l\u00e4uft direkt eingebettet)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Funktionsweise:\r\n     - YouTube-Video l\u00e4uft SOFORT, automatisch, in Dauerschleife,\r\n       als Hintergrund der Sektion \u2014 kein Klick, kein Play-Button.\r\n     - Browser erlauben Autoplay nur, wenn das Video stumm startet\r\n       (gilt f\u00fcr alle Browser gleicherma\u00dfen, l\u00e4sst sich nicht\r\n       umgehen). Deshalb: Start stumm + ein kleiner Ton-Button unten\r\n       rechts, mit dem der Besucher den Ton selbst aktivieren kann.\r\n     - YouTube-Iframe wird per klassischem CSS-Trick \u00fcbergro\u00df\r\n       skaliert und zentriert, damit es die ganze Fl\u00e4che abdeckt\r\n       (YouTube liefert sonst nur exakt 16:9, das w\u00fcrde bei anderen\r\n       Seitenverh\u00e4ltnissen R\u00e4nder zeigen).\r\n     - Dunkler Verlauf + Headline\/Text liegen \u00fcber dem Video.\r\n     - YouTube-Steuerelemente, Titel-Overlay und \"Verwandte Videos\"\r\n       sind ausgeblendet (controls=0, modestbranding, rel=0), damit\r\n       es wie ein reiner Hintergrundfilm wirkt statt wie ein\r\n       eingebetteter YouTube-Player.\r\n     - Mobile: aus Datenverbrauch-\/Performance-Gr\u00fcnden wird dort\r\n       NICHT autoplay-geladen, sondern das Poster-Bild gezeigt, mit\r\n       eigenem Play-Button, der das Video dann gezielt l\u00e4dt.\r\n\r\n     ANPASSEN:\r\n     - Mobile-Poster-Bild-URL ersetzen (HIER-BILD-URL-...)\r\n     - Video-ID ist bereits gesetzt: o1y2Az77jRY\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-film{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n\r\n  position:relative;\r\n  height:82vh;\r\n  min-height:480px;\r\n  overflow:hidden;\r\n  background:var(--gm-schwarz);\r\n  display:flex;align-items:flex-end;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n\/* ---------- Video-Hintergrund (Desktop\/Tablet) ---------- *\/\r\n.gm-film__video-buehne{\r\n  position:absolute;inset:0;\r\n  overflow:hidden;\r\n}\r\n\/* Klassischer \"YouTube als Hintergrund\"-Trick: Iframe deutlich\r\n   gr\u00f6\u00dfer als der Container, zentriert, damit unabh\u00e4ngig vom\r\n   Seitenverh\u00e4ltnis des Containers nie R\u00e4nder sichtbar werden. *\/\r\n.gm-film__video-buehne iframe{\r\n  position:absolute;top:50%;left:50%;\r\n  width:177.78vh;   \/* 16:9 relativ zur H\u00f6he berechnet *\/\r\n  height:56.25vw;   \/* 16:9 relativ zur Breite berechnet *\/\r\n  min-width:100%;\r\n  min-height:100%;\r\n  transform:translate(-50%,-50%);\r\n  border:0;\r\n  pointer-events:none; \/* verhindert Klicks auf den YouTube-Player selbst *\/\r\n}\r\n\r\n.gm-film__schleier{\r\n  position:absolute;inset:0;\r\n  background:\r\n    linear-gradient(180deg, rgba(38,38,36,.45) 0%, rgba(38,38,36,.2) 35%, rgba(38,38,36,.9) 100%);\r\n  pointer-events:none;\r\n  z-index:1;\r\n}\r\n\r\n.gm-film__inhalt{\r\n  position:relative;z-index:2;\r\n  width:100%;\r\n  padding:0 clamp(20px,4vw,64px) clamp(48px,7vw,90px);\r\n  color:var(--gm-kalk);\r\n  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;\r\n}\r\n\r\n.gm-film__text{\r\n  max-width:520px;\r\n  opacity:0;transform:translateY(16px);\r\n  transition:opacity .6s ease .15s,transform .6s ease .15s;\r\n}\r\n.gm-film.gm-sichtbar .gm-film__text{opacity:1;transform:translateY(0)}\r\n\r\n.gm-film__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.65);margin:0 0 14px;\r\n}\r\n.gm-film__headline{\r\n  margin:0 0 14px;\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(26px,3.6vw,42px);letter-spacing:-0.02em;text-transform:uppercase;\r\n  line-height:1.05;\r\n}\r\n.gm-film__sub{\r\n  margin:0;font-size:14.5px;line-height:1.6;color:rgba(242,242,242,.72);\r\n}\r\n\r\n\/* ---------- Ton-Button ---------- *\/\r\n.gm-film__ton{\r\n  position:absolute;right:clamp(20px,4vw,64px);bottom:clamp(48px,7vw,90px);\r\n  z-index:2;\r\n  width:52px;height:52px;flex:none;\r\n  display:flex;align-items:center;justify-content:center;\r\n  background:rgba(38,38,36,.55);\r\n  border:1px solid rgba(242,242,242,.35);\r\n  color:var(--gm-kalk);cursor:pointer;\r\n  backdrop-filter:blur(4px);\r\n  transition:background .25s ease,border-color .25s ease;\r\n}\r\n.gm-film__ton:hover{background:var(--gm-rot);border-color:var(--gm-rot)}\r\n.gm-film__ton svg{width:20px;height:20px}\r\n.gm-film__ton .gm-film__ton-an{display:none}\r\n.gm-film__ton.gm-an .gm-film__ton-aus{display:none}\r\n.gm-film__ton.gm-an .gm-film__ton-an{display:block}\r\n\r\n\/* ---------- Mobile: Poster + eigener Play-Button statt Autoplay ---------- *\/\r\n.gm-film__mobil-poster{\r\n  display:none;\r\n  position:absolute;inset:0;\r\n  background-size:cover;background-position:center;\r\n  z-index:1;\r\n}\r\n.gm-film__mobil-play{\r\n  display:none;\r\n  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\r\n  z-index:2;\r\n  width:76px;height:76px;border-radius:50%;\r\n  background:var(--gm-rot);border:0;cursor:pointer;\r\n  align-items:center;justify-content:center;\r\n}\r\n.gm-film__mobil-play svg{width:26px;height:26px;color:var(--gm-kalk);transform:translateX(2px)}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:900px){\r\n  .gm-film{height:76vh}\r\n  .gm-film__inhalt{flex-direction:column;align-items:flex-start}\r\n}\r\n@media (max-width:640px){\r\n  .gm-film{height:64vh;min-height:420px}\r\n  \/* Autoplay-Video aus, Poster + Play-Button an \u2014 spart Daten\/Akku\r\n     auf Mobilger\u00e4ten und respektiert oft eingeschr\u00e4nkte mobile\r\n     Datenpl\u00e4ne *\/\r\n  .gm-film__video-buehne{display:none}\r\n  .gm-film__mobil-poster{display:block}\r\n  .gm-film__mobil-play{display:flex}\r\n  .gm-film.gm-video-laeuft .gm-film__mobil-poster,\r\n  .gm-film.gm-video-laeuft .gm-film__mobil-play{display:none}\r\n  .gm-film.gm-video-laeuft .gm-film__video-buehne{display:block}\r\n  .gm-film__ton{display:none}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-film__text{opacity:1!important;transform:none!important;transition:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-film\" aria-label=\"Imagefilm\" id=\"gmFilmSektion\">\r\n\r\n  <!-- Desktop\/Tablet: Video l\u00e4uft sofort automatisch -->\r\n  <div class=\"gm-film__video-buehne\" id=\"gmFilmBuehneDesktop\">\r\n    <iframe\r\n      src=\"https:\/\/www.youtube.com\/embed\/o1y2Az77jRY?autoplay=1&mute=1&loop=1&playlist=o1y2Az77jRY&controls=0&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&playsinline=1\"\r\n      title=\"Gottfried Mack Imagefilm\"\r\n      allow=\"autoplay; encrypted-media\"\r\n      loading=\"eager\"\r\n    ><\/iframe>\r\n  <\/div>\r\n\r\n  <!-- Mobile: erst Poster + Play-Button, Video l\u00e4dt erst nach Klick -->\r\n  <div class=\"gm-film__mobil-poster\" style=\"background-image:url('HIER-BILD-URL-IMAGEFILM-POSTER-MOBIL.jpg')\"><\/div>\r\n  <button class=\"gm-film__mobil-play\" id=\"gmFilmMobilPlay\" aria-label=\"Imagefilm abspielen\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n  <\/button>\r\n\r\n  <div class=\"gm-film__schleier\"><\/div>\r\n\r\n  <div class=\"gm-film__inhalt\">\r\n    <div class=\"gm-film__text\">\r\n      <div class=\"gm-film__eyebrow\">Der Betrieb im Film<\/div>\r\n      <h2 class=\"gm-film__headline\">Sehen, wie wir arbeiten<\/h2>\r\n      <p class=\"gm-film__sub\">Einblicke in Baustellen, Team und Handwerk, in gut zwei Minuten zusammengefasst.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <button class=\"gm-film__ton\" id=\"gmFilmTon\" aria-label=\"Ton einschalten\">\r\n    <svg class=\"gm-film__ton-aus\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 5L6 9H2v6h4l5 4V5z\"\/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"\/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"\/><\/svg>\r\n    <svg class=\"gm-film__ton-an\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 5L6 9H2v6h4l5 4V5z\"\/><path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"\/><\/svg>\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sektion = document.getElementById('gmFilmSektion');\r\n  var iframeDesktop = document.querySelector('#gmFilmBuehneDesktop iframe');\r\n  var tonKnopf = document.getElementById('gmFilmTon');\r\n  var mobilPlay = document.getElementById('gmFilmMobilPlay');\r\n  var buehneDesktop = document.getElementById('gmFilmBuehneDesktop');\r\n  if (!sektion) return;\r\n\r\n  \/* Scroll-Reveal f\u00fcr den Text *\/\r\n  if ('IntersectionObserver' in window) {\r\n    var beobachter = new IntersectionObserver(function(eintraege){\r\n      eintraege.forEach(function(eintrag){\r\n        if (eintrag.isIntersecting) {\r\n          sektion.classList.add('gm-sichtbar');\r\n          beobachter.unobserve(sektion);\r\n        }\r\n      });\r\n    }, { threshold: 0.25 });\r\n    beobachter.observe(sektion);\r\n  } else {\r\n    sektion.classList.add('gm-sichtbar');\r\n  }\r\n\r\n  \/* Ton per YouTube-IFrame-API umschalten. Da das Video ohne API-\r\n     Objekt eingebettet ist, wird der Ton hier \u00fcber einen Reload des\r\n     iframe-src mit mute=0\/1 gesteuert \u2014 einfacher und zuverl\u00e4ssiger\r\n     als die volle YouTube-IFrame-API nur f\u00fcr einen Mute-Knopf zu\r\n     laden. Kleiner Nebeneffekt: das Video setzt beim Umschalten kurz\r\n     neu auf, das ist f\u00fcr einen Loop-Hintergrundfilm unauff\u00e4llig. *\/\r\n  var tonAn = false;\r\n  if (tonKnopf && iframeDesktop) {\r\n    tonKnopf.addEventListener('click', function(){\r\n      tonAn = !tonAn;\r\n      var src = iframeDesktop.src.replace(\/mute=[01]\/, 'mute=' + (tonAn ? '0' : '1'));\r\n      iframeDesktop.src = src;\r\n      tonKnopf.classList.toggle('gm-an', tonAn);\r\n      tonKnopf.setAttribute('aria-label', tonAn ? 'Ton ausschalten' : 'Ton einschalten');\r\n    });\r\n  }\r\n\r\n  \/* Mobile: Video erst nach Tap laden (Daten\/Akku sparen), dann mit\r\n     Ton starten, weil ein bewusster Klick kein \"Autoplay\" im Sinne\r\n     der Browser-Richtlinien ist und daher Ton erlaubt ist. *\/\r\n  if (mobilPlay && buehneDesktop) {\r\n    mobilPlay.addEventListener('click', function(){\r\n      var iframe = buehneDesktop.querySelector('iframe');\r\n      if (iframe) {\r\n        iframe.src = iframe.src.replace('mute=1', 'mute=0');\r\n      }\r\n      sektion.classList.add('gm-video-laeuft');\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12e6ba7 e-con-full e-flex e-con e-parent\" data-id=\"12e6ba7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ce02fc elementor-widget elementor-widget-html\" data-id=\"0ce02fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     GOTTFRIED MACK \u00b7 KUNDENBEWERTUNGEN (Karussell)\r\n     Einfach in ein Elementor HTML-Widget einf\u00fcgen.\r\n\r\n     Funktionsweise:\r\n     - Eine Bewertung im Fokus zur Zeit, gro\u00dfe lesbare Karte.\r\n     - Pfeil-Buttons links\/rechts + Punkte-Navigation unten.\r\n     - Autoplay alle 6s, pausiert bei Hover\/Fokus\/Touch-Interaktion.\r\n     - Swipe auf Touch-Ger\u00e4ten (nach links\/rechts wischen).\r\n     - Tastatur: Pfeiltasten links\/rechts, wenn das Karussell\r\n       fokussiert ist.\r\n     - Karten-Design (Sterne, Skew-Akzent, Quelle-Badge) identisch\r\n       zur vorherigen Grid-Version, nur jetzt eine nach der anderen.\r\n\r\n     ANPASSEN:\r\n     - Bei Bedarf Namen\/Texte feinjustieren (siehe Hinweis im Chat\r\n       zu den zwei unsicher gelesenen Namen)\r\n     - Link im CTA-Button pr\u00fcfen\r\n     ============================================================ -->\r\n\r\n<style>\r\n.gm-bewertungen{\r\n  --gm-schwarz:#262624;\r\n  --gm-rot:#D90718;\r\n  --gm-kalk:#F2F2F2;\r\n  --gm-linie:rgba(242,242,242,.12);\r\n\r\n  background:var(--gm-schwarz);\r\n  padding:100px 64px;\r\n  font-family:\"Archivo\",system-ui,-apple-system,sans-serif;\r\n}\r\n\r\n.gm-bewertungen__kopf{\r\n  max-width:900px;margin:0 auto 48px;\r\n  text-align:center;\r\n}\r\n.gm-bewertungen__eyebrow{\r\n  font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;\r\n  color:rgba(242,242,242,.5);margin:0 0 14px;\r\n}\r\n.gm-bewertungen__titel{\r\n  margin:0 0 20px;color:var(--gm-kalk);\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;text-transform:uppercase;\r\n}\r\n.gm-bewertungen__schnitt{\r\n  display:inline-flex;align-items:center;gap:10px;\r\n}\r\n.gm-bewertungen__schnitt-zahl{\r\n  font-family:\"Archivo Black\",\"Arial Black\",sans-serif;font-weight:400;\r\n  font-size:22px;color:var(--gm-kalk);\r\n}\r\n.gm-bewertungen__schnitt-sterne{display:flex;gap:2px}\r\n.gm-bewertungen__schnitt-sterne svg{width:15px;height:15px;color:var(--gm-rot)}\r\n.gm-bewertungen__schnitt-label{font-size:12.5px;color:rgba(242,242,242,.5)}\r\n\r\n\/* ---------- Karussell ---------- *\/\r\n.gm-bewertungen__karussell{\r\n  position:relative;\r\n  max-width:820px;margin:0 auto 32px;\r\n}\r\n\r\n.gm-bewertungen__fenster{\r\n  overflow:hidden;\r\n  touch-action:pan-y;\r\n}\r\n\r\n.gm-bewertungen__spur{\r\n  display:flex;\r\n  transition:transform .5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.gm-bewertungen__karte{\r\n  position:relative;\r\n  flex:0 0 100%;\r\n  background:rgba(242,242,242,.03);\r\n  border:1px solid var(--gm-linie);\r\n  padding:40px clamp(24px,5vw,56px);\r\n  min-height:220px;\r\n  display:flex;flex-direction:column;\r\n  text-align:center;align-items:center;\r\n}\r\n\r\n\/* Schr\u00e4ger roter Akzentstrich oben *\/\r\n.gm-bewertungen__karte::before{\r\n  content:\"\";position:absolute;top:0;left:0;right:0;height:3px;\r\n  background:var(--gm-rot);\r\n}\r\n\r\n.gm-bewertungen__kopfzeile{\r\n  display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px;\r\n}\r\n.gm-bewertungen__sterne{display:flex;gap:2px}\r\n.gm-bewertungen__sterne svg{width:15px;height:15px;color:var(--gm-rot)}\r\n.gm-bewertungen__quelle{\r\n  display:inline-flex;align-items:center;\r\n  font-size:11px;letter-spacing:.04em;color:rgba(242,242,242,.45);\r\n  padding-left:14px;border-left:1px solid var(--gm-linie);\r\n}\r\n\r\n.gm-bewertungen__text{\r\n  margin:0 0 22px;\r\n  font-size:16px;line-height:1.65;color:rgba(242,242,242,.82);\r\n  max-width:56ch;\r\n}\r\n\r\n.gm-bewertungen__name{\r\n  margin:0;font-weight:600;font-size:13px;color:var(--gm-kalk);\r\n  padding-top:16px;border-top:1px solid var(--gm-linie);\r\n  width:100%;max-width:280px;\r\n}\r\n\r\n\/* Pfeil-Buttons *\/\r\n.gm-bewertungen__pfeil{\r\n  position:absolute;top:50%;transform:translateY(-50%);\r\n  width:44px;height:44px;\r\n  display:flex;align-items:center;justify-content:center;\r\n  background:var(--gm-schwarz);\r\n  border:1px solid var(--gm-linie);\r\n  color:var(--gm-kalk);cursor:pointer;\r\n  z-index:2;\r\n  transition:background .2s ease,border-color .2s ease;\r\n}\r\n.gm-bewertungen__pfeil:hover{background:var(--gm-rot);border-color:var(--gm-rot)}\r\n.gm-bewertungen__pfeil svg{width:18px;height:18px}\r\n.gm-bewertungen__pfeil--links{left:-22px}\r\n.gm-bewertungen__pfeil--rechts{right:-22px}\r\n\r\n\/* Punkte-Navigation *\/\r\n.gm-bewertungen__punkte{\r\n  display:flex;align-items:center;justify-content:center;gap:10px;\r\n  margin-top:28px;\r\n}\r\n.gm-bewertungen__punkt{\r\n  width:8px;height:8px;border-radius:50%;\r\n  background:rgba(242,242,242,.25);\r\n  border:0;padding:0;cursor:pointer;\r\n  transition:background .25s ease,transform .25s ease;\r\n}\r\n.gm-bewertungen__punkt.gm-aktiv{\r\n  background:var(--gm-rot);\r\n  transform:scale(1.3);\r\n}\r\n\r\n\/* ---------- CTA ---------- *\/\r\n.gm-bewertungen__fuss{\r\n  display:flex;justify-content:center;margin-top:36px;\r\n}\r\n.gm-bewertungen__cta{\r\n  position:relative;display:inline-flex;align-items:center;\r\n  background:transparent;color:var(--gm-kalk);text-decoration:none;\r\n  padding:16px 30px;overflow:hidden;\r\n  font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;\r\n  border:1px solid rgba(242,242,242,.3);\r\n}\r\n.gm-bewertungen__cta::before{\r\n  content:\"\";position:absolute;top:0;left:0;right:0;height:4px;\r\n  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 8px);\r\n}\r\n.gm-bewertungen__cta::after{\r\n  content:\"\";position:absolute;left:-20px;bottom:0;top:0;width:0;\r\n  background:var(--gm-rot);z-index:-1;\r\n  transform:skewX(-18deg);\r\n  transition:width .32s ease;\r\n}\r\n.gm-bewertungen__cta:hover::after{width:calc(100% + 40px)}\r\n.gm-bewertungen__cta:hover{border-color:var(--gm-rot)}\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width:640px){\r\n  .gm-bewertungen{padding:64px 24px}\r\n  .gm-bewertungen__karte{padding:32px 20px;min-height:260px}\r\n  .gm-bewertungen__pfeil{width:38px;height:38px}\r\n  .gm-bewertungen__pfeil--links{left:-6px}\r\n  .gm-bewertungen__pfeil--rechts{right:-6px}\r\n  .gm-bewertungen__text{font-size:14.5px}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .gm-bewertungen__spur{transition:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"gm-bewertungen\" aria-label=\"Kundenbewertungen\" id=\"gmBewertungenSektion\" tabindex=\"-1\">\r\n  <div class=\"gm-bewertungen__kopf\">\r\n    <div class=\"gm-bewertungen__eyebrow\">Was Kunden sagen<\/div>\r\n    <h2 class=\"gm-bewertungen__titel\">Kundenstimmen aus der Region<\/h2>\r\n    <div class=\"gm-bewertungen__schnitt\">\r\n      <span class=\"gm-bewertungen__schnitt-zahl\">5.0<\/span>\r\n      <span class=\"gm-bewertungen__schnitt-sterne\">\r\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n      <\/span>\r\n      <span class=\"gm-bewertungen__schnitt-label\">Google &amp; golocal<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"gm-bewertungen__karussell\">\r\n    <button class=\"gm-bewertungen__pfeil gm-bewertungen__pfeil--links\" id=\"gmBwPfeilLinks\" aria-label=\"Vorherige Bewertung\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"gm-bewertungen__fenster\">\r\n      <div class=\"gm-bewertungen__spur\" id=\"gmBwSpur\">\r\n\r\n        <div class=\"gm-bewertungen__karte\">\r\n          <div class=\"gm-bewertungen__kopfzeile\">\r\n            <div class=\"gm-bewertungen__sterne\">\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n            <\/div>\r\n            <span class=\"gm-bewertungen__quelle\">golocal<\/span>\r\n          <\/div>\r\n          <p class=\"gm-bewertungen__text\">\u201eHervorragende Handwerksarbeit an 2 Projekten unseres Unternehmens. Die Firma Mack hat die Ger\u00fcstbauer, Innenputz, Trockenbau und \u2026\u201c<\/p>\r\n          <p class=\"gm-bewertungen__name\">Rezension von golocal<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"gm-bewertungen__karte\">\r\n          <div class=\"gm-bewertungen__kopfzeile\">\r\n            <div class=\"gm-bewertungen__sterne\">\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n            <\/div>\r\n            <span class=\"gm-bewertungen__quelle\">Google<\/span>\r\n          <\/div>\r\n          <p class=\"gm-bewertungen__text\">\u201ePreis Leistung Top, qualifizierte Arbeit, Terminereinhaltung und Service super! Immer wieder gerne 1A+++\u201c<\/p>\r\n          <p class=\"gm-bewertungen__name\">Local Guide \u00b7 245 Rezensionen<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"gm-bewertungen__karte\">\r\n          <div class=\"gm-bewertungen__kopfzeile\">\r\n            <div class=\"gm-bewertungen__sterne\">\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n            <\/div>\r\n            <span class=\"gm-bewertungen__quelle\">Google<\/span>\r\n          <\/div>\r\n          <p class=\"gm-bewertungen__text\">\u201eAlter, erfahrenes Unternehmen mit neuem Geb\u00e4ude. Sehr freundlich.\u201c<\/p>\r\n          <p class=\"gm-bewertungen__name\">Christian Schaal<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"gm-bewertungen__karte\">\r\n          <div class=\"gm-bewertungen__kopfzeile\">\r\n            <div class=\"gm-bewertungen__sterne\">\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n            <\/div>\r\n            <span class=\"gm-bewertungen__quelle\">Google<\/span>\r\n          <\/div>\r\n          <p class=\"gm-bewertungen__text\">\u201eSuper Beratung und Umsetzung \ud83d\udc4d\u201c<\/p>\r\n          <p class=\"gm-bewertungen__name\">Georg Kandutsch<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"gm-bewertungen__karte\">\r\n          <div class=\"gm-bewertungen__kopfzeile\">\r\n            <div class=\"gm-bewertungen__sterne\">\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 1l2.6 5.6 6.2.6-4.6 4.2 1.3 6.1L10 14.8 4.5 17.5l1.3-6.1L1.2 7.2l6.2-.6z\"\/><\/svg>\r\n            <\/div>\r\n            <span class=\"gm-bewertungen__quelle\">Google<\/span>\r\n          <\/div>\r\n          <p class=\"gm-bewertungen__text\">\u201eIm Rahmen von Sanierungsma\u00dfnahmen an meinem privaten Wohnhaus habe ich die Firma Gottfried Mack mit der Ausf\u00fchrung von W\u00e4rmed\u00e4mmverbundsystem-(WDVS)-Arbeiten beauftragt. Sowohl die Bauleitung als auch die ausf\u00fchrenden Mitarbeiter vor Ort \u00fcberzeugten durch Fachkompetenz, Zuverl\u00e4ssigkeit und eine strukturierte Arbeitsweise. Die Arbeiten wurden termingerecht, sauber und in hoher handwerklicher Qualit\u00e4t abgeschlossen.\u201c<\/p>\r\n          <p class=\"gm-bewertungen__name\">A. Eckenstein<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <button class=\"gm-bewertungen__pfeil gm-bewertungen__pfeil--rechts\" id=\"gmBwPfeilRechts\" aria-label=\"N\u00e4chste Bewertung\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div class=\"gm-bewertungen__punkte\" id=\"gmBwPunkte\"><\/div>\r\n\r\n  <div class=\"gm-bewertungen__fuss\">\r\n    <a class=\"gm-bewertungen__cta\" href=\"https:\/\/www.google.com\/search?q=Gottfried+Mack+Stuckateurbetrieb+Bewertungen\" target=\"_blank\" rel=\"noopener\">Alle Bewertungen ansehen<\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sektion = document.getElementById('gmBewertungenSektion');\r\n  var spur = document.getElementById('gmBwSpur');\r\n  var karten = spur ? spur.querySelectorAll('.gm-bewertungen__karte') : [];\r\n  var pfeilLinks = document.getElementById('gmBwPfeilLinks');\r\n  var pfeilRechts = document.getElementById('gmBwPfeilRechts');\r\n  var punkteContainer = document.getElementById('gmBwPunkte');\r\n  if (!spur || !karten.length) return;\r\n\r\n  var index = 0;\r\n  var anzahl = karten.length;\r\n  var autoplayId = null;\r\n  var autoplayDauer = 6000;\r\n\r\n  \/* Punkte-Navigation dynamisch erzeugen *\/\r\n  var punkte = [];\r\n  for (var i = 0; i < anzahl; i++) {\r\n    var punkt = document.createElement('button');\r\n    punkt.className = 'gm-bewertungen__punkt';\r\n    punkt.setAttribute('aria-label', 'Bewertung ' + (i + 1) + ' von ' + anzahl);\r\n    (function(i){\r\n      punkt.addEventListener('click', function(){ gehZu(i); autoplayNeuStarten(); });\r\n    })(i);\r\n    punkteContainer.appendChild(punkt);\r\n    punkte.push(punkt);\r\n  }\r\n\r\n  function anzeigen(){\r\n    spur.style.transform = 'translateX(-' + (index * 100) + '%)';\r\n    punkte.forEach(function(p, i){ p.classList.toggle('gm-aktiv', i === index); });\r\n  }\r\n\r\n  function gehZu(neuerIndex){\r\n    index = (neuerIndex + anzahl) % anzahl;\r\n    anzeigen();\r\n  }\r\n\r\n  function weiter(){ gehZu(index + 1); }\r\n  function zurueck(){ gehZu(index - 1); }\r\n\r\n  function autoplayStarten(){\r\n    autoplayId = setInterval(weiter, autoplayDauer);\r\n  }\r\n  function autoplayStoppen(){\r\n    if (autoplayId) { clearInterval(autoplayId); autoplayId = null; }\r\n  }\r\n  function autoplayNeuStarten(){\r\n    autoplayStoppen();\r\n    autoplayStarten();\r\n  }\r\n\r\n  if (pfeilRechts) pfeilRechts.addEventListener('click', function(){ weiter(); autoplayNeuStarten(); });\r\n  if (pfeilLinks) pfeilLinks.addEventListener('click', function(){ zurueck(); autoplayNeuStarten(); });\r\n\r\n  \/* Pausiert bei Hover\/Fokus, l\u00e4uft danach automatisch weiter *\/\r\n  sektion.addEventListener('mouseenter', autoplayStoppen);\r\n  sektion.addEventListener('mouseleave', autoplayStarten);\r\n  sektion.addEventListener('focusin', autoplayStoppen);\r\n  sektion.addEventListener('focusout', autoplayStarten);\r\n\r\n  \/* Tastatur-Steuerung, wenn irgendwo im Karussell fokussiert *\/\r\n  sektion.addEventListener('keydown', function(e){\r\n    if (e.key === 'ArrowRight') { weiter(); autoplayNeuStarten(); }\r\n    if (e.key === 'ArrowLeft') { zurueck(); autoplayNeuStarten(); }\r\n  });\r\n\r\n  \/* Swipe auf Touch-Ger\u00e4ten *\/\r\n  var startX = null;\r\n  spur.addEventListener('touchstart', function(e){\r\n    startX = e.touches[0].clientX;\r\n    autoplayStoppen();\r\n  }, { passive: true });\r\n  spur.addEventListener('touchend', function(e){\r\n    if (startX === null) return;\r\n    var diff = e.changedTouches[0].clientX - startX;\r\n    if (Math.abs(diff) > 40) {\r\n      if (diff < 0) { weiter(); } else { zurueck(); }\r\n    }\r\n    startX = null;\r\n    autoplayStarten();\r\n  });\r\n\r\n  anzeigen();\r\n  autoplayStarten();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Stuckateurbetrieb &amp; Ger\u00fcstbau seit 1987 Handwerk, das h\u00e4lt, was es verspricht Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Angebot anfragen Referenzen ansehen Was wir k\u00f6nnen Acht Gewerke, ein Ansprechpartner Von der einzelnen Fassade bis zur kompletten Sanierung. Wir koordinieren, Sie haben einen Kontakt statt [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":103,"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/competitors.mh-studio.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}