/* ========================================================================== Testimonial-Karten der Startseite (Sektion "Clients", Widget .clients-testimonial-slider). Der Karten-Look liegt hier vollstaendig in CSS, die Elementor-Daten der Seite und der eingebetteten Slide-Vorlagen bleiben unangetastet. Der Rand-Glow und der Spotlight kommen zur Laufzeit ueber MMRB_AUTO dazu (inc/ccx-testi.php). AUFBAU EINER SLIDE (Stand 22.08.2026) .swiper-slide .elementor-testimonial <- ab hier die Karte (siehe unten) .elementor-testimonial__content .elementor-testimonial__text .elementor <- Huelle der eingebetteten Vorlage .e-con.e-parent <- Wurzel-Container der Vorlage .e-con.e-child > .e-con-inner Icon-Widget (Sterne-Grafik, 5 Sterne als eine SVG) Heading (Zitat) Heading (Herkunftshinweis, z.B. "(Translated)") Heading (Name) Heading (Ort) .elementor-testimonial__footer <- leer, wird ausgeblendet WARUM DIE KARTE AUF .elementor-testimonial SITZT Bisher trug der Wurzel-Container der Vorlage (data-id cf85ae9) Rahmen, Rundung und Hintergrund. Die sechs heutigen Vorlagen sind Kopien voneinander und teilen sich deshalb saemtliche Element-Ids. Beim naechsten Austausch der Zitate koennen aber Vorlagen mit anderen Ids dazukommen. .elementor-testimonial baut das Widget dagegen fuer JEDE Slide selbst, unabhaengig davon, was in ihr steckt. Der Karten-Look haengt daher an diesem Element, und der Vorlagen-Container gibt Rahmen, Rundung, Fuellung und Innenabstand ab, damit kein zweiter Rahmen in der Karte steht. SCOPE Auf der Startseite laufen vier Karussells desselben Widget-Typs (Services, zwei Projekt-Slider, Testimonials). .elementor-testimonial und .swiper-slide existieren also in jedem davon. Jede Regel hier beginnt deshalb mit .clients-testimonial-slider, dem einzigen Klassennamen, den ausschliesslich dieses Karussell traegt. SPEZIFITAET Die Stylesheets der Vorlagen (post-1487.css, post-1510.css, post-20001.css und so weiter) laden NACH dieser Datei. Ihre Regeln stehen auf drei bis vier Klassen. Die Regeln hier stehen deshalb auf fuenf oder mehr und kommen ohne !important aus. UNABHAENGIG VON DEN VORLAGEN-STYLESHEETS Schriftgroessen, Farben, Abstaende, die Groesse der Sterne-Grafik und die Grundwerte der Container stehen alle hier, auch dort wo die Vorlage dasselbe einstellt. Elementor haengt die Datei einer Vorlage erst beim Rendern der Slide an die Seite; am 22.08.2026 fehlten vier von sechs im ausgelieferten Seitenkopf. Die Karte sieht mit und ohne diese Dateien gleich aus und ist gleich hoch. ========================================================================== */ /* ---------- 1. Gleiche Kartenhoehe ueber alle Slides ---------- Das Widget stellt die Slides bereits auf height:auto und die Slide-Reihe auf align-items:stretch, jede Slide ist also so hoch wie die hoechste. Die Karte darin war bisher trotzdem nur so hoch wie ihr eigener Text, weil zwischen Slide und Karte drei Block-Ebenen liegen. Diese Kette macht aus allen dreien Flex-Spalten, dann reicht die Slide-Hoehe bis zur Karte durch: unterschiedlich lange Zitate ergeben trotzdem gleich hohe Karten, und beim Weiterschalten springt nichts. overflow der Slide: Die Carousel-Basis von Elementor setzt overflow:hidden auf jede Slide. Der Rand-Glow liegt als Deko-Span ueber die Kartenkante hinaus und wuerde an der Slide-Kante hart abgeschnitten, mitten zwischen den beiden sichtbaren Karten. Gleicher Fall wie bei den Service-Karten. Das Karussell selbst schneidet weiterhin ab, das muss es auch. */ .clients-testimonial-slider .swiper-slide { overflow: visible; display: flex; } .clients-testimonial-slider .swiper-slide .elementor-testimonial, .clients-testimonial-slider .swiper-slide .elementor-testimonial__content, .clients-testimonial-slider .swiper-slide .elementor-testimonial__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .clients-testimonial-slider .elementor-testimonial__text > .elementor { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } /* Die Fusszeile des Widgets bleibt leer, weil Name und Ort aus der Vorlage kommen. Sie bringt aber 25px Aussenabstand mit, die als tote Zone unter der Karte stehen und dem Inhalt genau diese 25px wegnehmen. Der Abstand faellt deshalb weg, die leere Zeile selbst ist 0 Pixel hoch und stoert nicht. :empty waere hier die falsche Wahl: zwischen den Tags der Fusszeile steht Zeilenumbruch und Einrueckung, damit gilt sie als nicht leer. :has(*) fragt dagegen nach echten Elementen darin. Fuellt jemand spaeter die Widget-eigenen Felder fuer Name und Bild, erscheint die Zeile von allein wieder. */ .clients-testimonial-slider .elementor-testimonial .elementor-testimonial__footer { margin: 0; } .clients-testimonial-slider .elementor-testimonial .elementor-testimonial__footer:not(:has(*)) { display: none; } /* ---------- 2. Die Karte ---------- Karten-Blau der Seite, 1px Rahmen in der Rahmenfarbe der uebrigen Karten, 20px Rundung, ringsum gleicher Innenabstand. Vorher: Verlauf aus 5% Weiss nach transparent, Rahmen #293042, 16px Rundung und ein Innenabstand von 70px oben gegen 15px an den Seiten, in dem eine nur 350px breite Textspalte stand. Die Textausrichtung steht hier auf links: das Widget setzt ueber .elementor-testimonial--align-center zentriert, das Zitat lief aber schon immer linksbuendig. Name und Ort standen dadurch als schmale zentrierte Kaestchen unter einem linksbuendigen Zitat. */ .clients-testimonial-slider .swiper-slide .elementor-testimonial { --gc-pad: 12px; background-color: #181f32; border: 1px solid rgb(44, 51, 76); border-radius: 20px; padding: 32px 32px 28px; text-align: left; transition: border-color .25s ease-out; } .clients-testimonial-slider .swiper-slide .elementor-testimonial:hover { border-color: rgb(60, 70, 102); } @media (prefers-reduced-motion: reduce) { .clients-testimonial-slider .swiper-slide .elementor-testimonial { transition: none; } } /* Schriftfamilie des Textblocks: die Widget-Einstellung stellt ihn auf Roboto. Sichtbar wird das nur an Text, der keine eigene Familie mitbringt, trotzdem gehoert hier die Hausschrift hin. */ .clients-testimonial-slider .swiper-slide .elementor-testimonial .elementor-testimonial__text { font-family: "Plus Jakarta Sans", sans-serif; } /* ---------- 3. Der Vorlagen-Container gibt den Rahmen ab ---------- Er behaelt seine Rolle als Textspalte, verliert aber alles, was ihn wie eine eigene Karte aussehen liess, und wird so breit wie die Karte. Die feste Breite von 479px stammte aus einer Zeit ohne dieses Karussell und war seither breiter als die Slide (419,5px auf 1440px Fensterbreite), die Karte lief also gegen ihre eigene Hoechstbreite. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con.e-parent { --width: 100%; background-image: none; background-color: transparent; border: 0; border-radius: 0; padding: 0; gap: 0; width: 100%; max-width: 100%; flex: 1 1 auto; } /* Der innere Container hatte eine feste Textbreite von 350px, mittig in der Karte. Zusammen mit dem seitlichen Innenabstand der Karte ergab das eine Textspalte, die weder am Rahmen noch in der Mitte sass. Jetzt fuellt sie die Karte, der Abstand kommt allein aus dem Innenabstand der Karte. align-items:stretch ist noetig, weil die Vorlage flex-start setzt: Name und Ort waren dadurch nur so breit wie ihr eigener Text. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con.e-child { --content-width: 100%; padding: 0; width: 100%; flex: 1 1 auto; } /* Innenabstand und Zeilenabstand stehen hier ausdruecklich auf 0, obwohl die Vorlage beides ohnehin so einstellt. Faellt ihr Stylesheet aus, greifen sonst Elementors Grundwerte fuer einen Container: 10px Innenabstand und 20px zwischen den Bausteinen. Bei fuenf Bausteinen sind das 100px, um die jede Karte waechst, und der Rhythmus der Karte kaeme dann aus zwei Quellen statt aus den Abstaenden weiter unten. Wie es dazu kommen kann, steht am Sterne-Block. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con > .e-con-inner { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; padding: 0; gap: 0; flex: 1 1 auto; } /* ---------- 4. Grundzustand aller Bausteine in der Karte ---------- Die Vorlage legt auf Hinweis, Name und Ort einen Verlauf, der auf die Buchstaben beschnitten ist (background-clip:text plus transparente Fuellfarbe). Das nimmt den Zeilen jede Farbsteuerung ab, deshalb wird es hier abgeraeumt, bevor die Rollen weiter unten ihre Farben setzen. Die Breitenangaben der Vorlage (394px am Zitat, mobil 244px) waren auf die alte 350px-Spalte gerechnet und deckelten das Zitat auf dem Telefon auf 244px innerhalb einer 292px breiten Karte. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget { width: 100%; max-width: 100%; --container-widget-width: 100%; text-align: left; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; margin: 0; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget > .elementor-widget-container { margin: 0; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-heading .elementor-heading-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; color: rgba(215, 220, 232, .5); background-image: none; -webkit-text-fill-color: currentColor; } /* ---------- 5. Sterne ---------- Eine einzige SVG mit fuenf Sternen, die Fuellfarbe steht als Attribut an jedem Pfad (#FFB30E). Eine CSS-Regel schlaegt das Attribut, der Streifen laeuft damit im Stern-Gold der Seite. Das Icon stand in einer Zeilenbox mit rund 14px Luft unter der Grafik, die zusammen mit dem Aussenabstand einen unruhigen Absatz ergab. Zeilenhoehe 0 plus Block-Darstellung machen die Box so hoch wie die Grafik, der Abstand nach unten kommt danach allein aus dem Aussenabstand. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon { margin-bottom: 18px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon .elementor-icon { display: block; line-height: 0; font-size: 17px; } /* Die Groesse steht bewusst HIER und nicht nur im Stylesheet der Vorlage. Elementor schreibt pro Vorlage eine eigene Datei und haengt sie erst beim Rendern der Slide an die Seite; faellt eine davon aus, waere der Streifen auf die Grundgroesse eines Icons (50px im Quadrat) aufgeblasen und die Karte damit ueber 80px hoeher. Am 22.08.2026 war genau das auf der Live-Seite zu sehen: von sechs Vorlagen-Stylesheets lagen nur zwei im ausgelieferten Seitenkopf. width:auto laesst die Breite dem Seitenverhaeltnis folgen, die Grafik ist 111 zu 17 gross und bleibt damit ein Streifen aus fuenf Sternen. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon .elementor-icon svg { display: block; height: 17px; width: auto; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon .elementor-icon svg path { fill: #ffb765; } /* ---------- 6. Rollen im Textblock ---------- Jede Rolle wird doppelt angesprochen: einmal ueber ihre Stellung im Stapel, einmal ueber die Element-Id der heutigen Vorlagen. Beide Wege fuehren zum selben Ergebnis und decken zusammen beide Faelle ab, in denen spaeter Slides dazukommen koennen. Ueber die Stellung, falls jemand eine neue Vorlage von Hand baut: - Zitat = die erste Ueberschrift direkt hinter der Sterne-Grafik - Name = vorletzter Baustein, aber fruehestens der dritte. Der Zusatz nth-child(n+3) verhindert, dass in einer verkuerzten Karte aus Sternen, Zitat und Name das ZITAT als vorletzter Baustein die Namens-Optik bekommt. - Ort = letzter Baustein, ebenfalls fruehestens der dritte Ueber die Id, falls die heutige Vorlage kopiert wird: Elementor behaelt beim Duplizieren die Element-Ids bei. Genau so sind alle sechs heutigen Vorlagen entstanden (1487, 1510 und 20001 bis 20004), sie tragen bis heute dieselben Ids fuer Sterne, Zitat, Hinweis, Name und Ort. */ /* Zitat: silbern, etwas kleiner als vorher (24px auf 21px) bei zugleich groesserem Zeilenabstand. Die Zeilenhoehe bleibt dadurch fast gleich (32px vorher, 31,5px jetzt), der Absatz behaelt seinen Rhythmus, die Buchstaben werden ruhiger. Bei 24px passten in die rund 355px breite Textspalte knapp 25 Zeichen pro Zeile, ein laengeres Zitat las sich dadurch wie eine Schlagzeile statt wie ein Absatz. margin-bottom:auto schiebt alles, was nach dem Zitat kommt, an den unteren Kartenrand. Dadurch stehen Hinweis, Name und Ort in allen Karten einer Reihe auf derselben Linie, egal wie lang das Zitat ist. Der Innenabstand darunter haelt den Mindestabstand, wenn eine Karte randvoll ist. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon + .elementor-widget-heading, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="045c223"] { margin-bottom: auto; padding-bottom: 20px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon + .elementor-widget-heading .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="045c223"] .elementor-heading-title { font-size: 21px; line-height: 1.5; color: #d7dce8; } /* Herkunftshinweis, heute "(Translated)" bzw. "(Translated, Pre-Sale)". Bleibt bewusst moeglich und bleibt dezent: eine Zeile unter dem Zitat, klein, zurueckgenommen. Der frueher 33px grosse Abstand darunter riss den Namen vom Hinweis los. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="a456bcc"] { margin-bottom: 12px; } /* Name: die einzige Zeile in Weiss und halbfett, damit klar ist, wer spricht. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con > .e-con-inner > .elementor-widget-heading:nth-last-child(2):nth-child(n+3) .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="d8b7857"] .elementor-heading-title { font-size: 17px; line-height: 1.35; font-weight: 600; color: #ffffff; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con > .e-con-inner > .elementor-widget-heading:nth-last-child(2):nth-child(n+3), .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="d8b7857"] { margin-bottom: 3px; } /* Ort oder Rolle: die leiseste Zeile der Karte. */ .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con > .e-con-inner > .elementor-widget-heading:last-child:nth-child(n+3) .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="1668016"] .elementor-heading-title { font-size: 13px; line-height: 1.45; color: rgba(215, 220, 232, .55); } /* ---------- 7. Tablet ---------- */ @media (max-width: 1024px) { .clients-testimonial-slider .swiper-slide .elementor-testimonial { padding: 28px 26px 24px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon + .elementor-widget-heading .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="045c223"] .elementor-heading-title { font-size: 18px; } } /* ---------- 8. Telefon ---------- Eine Karte pro Bild, 340px breit. Etwas kleinere Rundung und ein knapperer Innenabstand, damit die Textspalte nicht zu schmal wird. */ @media (max-width: 767px) { .clients-testimonial-slider .swiper-slide .elementor-testimonial { --gc-pad: 10px; border-radius: 18px; padding: 24px 22px 22px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon { margin-bottom: 14px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon + .elementor-widget-heading, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="045c223"] { padding-bottom: 16px; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget-icon + .elementor-widget-heading .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="045c223"] .elementor-heading-title { font-size: 16px; line-height: 1.55; } .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con > .e-con-inner > .elementor-widget-heading:nth-last-child(2):nth-child(n+3) .elementor-heading-title, .clients-testimonial-slider .elementor-testimonial__text .elementor .e-con .elementor-widget[data-id="d8b7857"] .elementor-heading-title { font-size: 16px; } } /* Arrow buttons of the carousel. Elementor centres them on the carousel * height; the page stylesheet moves them into the text column on the left. * With the cards now levelled at one height the centre dropped into the * headline. A fixed offset below the two line headline, wide enough for a * third line on narrower desktops. Below 1025px the page stacks the columns * and keeps its own placement. The page stylesheet sets top:42% with * !important for this carousel, so the offset carries the same weight. */ @media (min-width: 1281px) { .elementor-8073 .elementor-element-46b66ab4 .elementor-swiper-button { top: 248px !important; bottom: auto !important; } } @media (min-width: 1025px) and (max-width: 1280px) { .elementor-8073 .elementor-element-46b66ab4 .elementor-swiper-button { top: 310px !important; bottom: auto !important; } }