[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"fAvVR4PgMYAsQIuCDwYdh_bloaClrTbNAAH6qrHn7no":75,"_YhzXhDg7cUOfeswC_raAQ5pFk8IRwnE3jaPUCrTqkc":174,"_apollo:default":216},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":113,"postContentElements":13,"evergreen":13,"tags":138,"postWpBody":152,"wpHeaderImage":13,"wpHeaderImageOld":155,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":167,"author":168},"NodeWpPost","1130","CSS3 leicht gemacht mit Sass und Compass",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1552571975,"UTC","+00:00","2019-03-14T13:59:35+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1326200462,"2012-01-10T13:01:02+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/css3-leicht-gemacht-mit-sass-und-compass",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","CSS3 leicht gemacht mit Sass und Compass | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/css3-leicht-gemacht-mit-sass-und-compass","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":114,"id":115,"name":116,"path":117,"status":20,"weight":118,"description":119,"langcode":123,"changed":124,"metatag":127},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":120,"processed":121,"format":122},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":125,"timezone":85,"offset":86,"time":126},1713772777,"2024-04-22T07:59:37+00:00",[128,131,135],{"__typename":95,"tag":96,"attributes":129},{"__typename":98,"name":99,"content":130},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":132},{"__typename":98,"name":133,"content":134},"description","Themen aus dem Bereich Design & User Experience",{"__typename":102,"tag":103,"attributes":136},{"__typename":105,"href":137,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[139,144,148],{"__typename":140,"id":141,"name":142,"path":143,"weight":118},"TermTags","252","Compass","/tag/compass",{"__typename":140,"id":145,"name":146,"path":147,"weight":118},"297","css3","/tag/css3",{"__typename":140,"id":149,"name":150,"path":151,"weight":118},"1109","Sass","/tag/sass",{"__typename":153,"processed":154,"format":122,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wahrscheinlich haben die meisten von euch Sass schon ausprobiert oder zumindest davon gehört.\u003Cbr>\n\u003Ca title=\"http://sass-lang.com/\" href=\"http://sass-lang.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass\u003C/a>(Syntactically awesome Stylesheets) ermöglicht unter anderem die Verwendung von Variablen, Funktionen und sogenannten Mixins, was das schreiben von Styles einfacher und strukturierter macht. Das CSS Framework \u003Ca title=\"http://compass-style.org\" href=\"http://compass-style.org\" target=\"_blank\" rel=\"noopener noreferrer\">Compass\u003C/a>, das mit Sass arbeitet ist auch ein sehr nützliches Tool, da uns hier viele Funktionen geboten werden, auch im Bereich CSS3.\u003Cbr>\nAber lasst uns einfach gleich starten:\u003Cbr>\nIm ersten Teil dieses Artikels werden wir kurz einen Blick auf Sass werfen und im zweiten Teil schauen wir uns an, wie Compass uns bei CSS3 enorm helfen kann. Danach hoffe ich, dass viele von euch motiviert sein werden Sass und Compass auszuprobieren und vielleicht sogar in eurem nächsten Projekt zu verwenden.\u003Cbr>\nWie ihr Sass und Compass auf euren Rechner bekommt, lest ihr am besten auf der jeweiligen Webseite (\u003Ca href=\"http://sass-lang.com/tutorial.html\" target=\"_blank\" rel=\"noopener noreferrer\">Sass Install\u003C/a>, \u003Ca href=\"http://compass-style.org/install/\" target=\"_blank\" rel=\"noopener noreferrer\">Compass Install\u003C/a>). Für die Windows User unter euch: ihr müsst wahrscheinlich noch Ruby installieren bevor ihr loslegen könnt, aber dies wird auf den eben genannten Seiten ebenfalls erwähnt.\u003C/p>\n\u003Ch3>Einblick in Sass\u003C/h3>\n\u003Cp>Nun möchte ich euch kurz ein paar Dinge vorstellen die man mit Sass tun kann und die meiner Meinung nach wirklich extrem nützlich sind (da es hier aber um CSS3 gehen soll wird dieser Einblick wirklich nur kurz)\u003C/p>\n\u003Ch5>Variablen\u003C/h5>\n\u003Cp>Mich hat es schon immer ein wenig gestört, dass es in CSS keine Variablen gibt, obwohl sie so nützlich sind! Hier zum Beispiel definiere ich eine Variable für eine Farbe und eine für eine Größe, die ich dann im gesamten Dokument nutzen kann:\u003Cbr>\nSass:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n$color: #CC6B32;\u003Cbr>\n$size: 100px;\u003Cbr>\n.box {\u003Cbr>\nbackground-color: $color;\u003Cbr>\nheight: $size * 2;\u003Cbr>\nwidth: $size;\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\ngeneriertes CSS:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\nbackground-color: #CC6B32;\u003Cbr>\nheight: 200px;\u003Cbr>\nwidth: 100px;\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003C/p>\n\u003Ch5>Verschachtelungen\u003C/h5>\n\u003Cp>Verschachtelungen helfen vor allem das Dokument übersichtlich und strukturiert zu halten. Seht euch einfach folgenden Code-Schnipsel an und ihr werdet verstehen um was es geht:\u003Cbr>\nSass:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\np {\u003Cbr>\ncolor: $color;\u003Cbr>\na {\u003Cbr>\ntext-decoration: none;\u003Cbr>\n&:hover {\u003Cbr>\ntext-decoration: underline;\u003Cbr>\n}\u003Cbr>\n}\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\ngeneriertes CSS:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\np {\u003Cbr>\ncolor: #CC6B32;\u003Cbr>\n}\u003Cbr>\np a {\u003Cbr>\ntext-decoration: none;\u003Cbr>\n}\u003Cbr>\np a:hover {\u003Cbr>\ntext-decoration: underline;\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\nWie ihr seht spart man sich durch die Verschachtelung ein wenig Schreibarbeit und die Element-Hierarchie wird sichtbar.\u003C/p>\n\u003Ch5>Mixins\u003C/h5>\n\u003Cp>Nun wird es noch um einiges interessanter, denn Mixins können auch wunderbar für CSS3 verwendet werden. Ein Mixin definiert eine Reihe von Styles die dann im gesamten Dokument, durch aufrufen des Mixins, wiederverwendet werden können – also ein wiederverwendbarer Code-Schnipsel:\u003Cbr>\nSass:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n@mixin rounded-corners($radius) {\u003Cbr>\nborder-radius: $radius;\u003Cbr>\n-moz-border-radius: $radius;\u003Cbr>\n-webkit-border-radius: $radius;\u003Cbr>\n/* … */\u003Cbr>\n}\u003Cbr>\n.box {\u003Cbr>\n@include rounded-corners(5px);\u003Cbr>\n}\u003Cbr>\n.box2 {\u003Cbr>\n@include rounded-corners(3px);\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\ngeneriertes CSS:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\nborder-radius: 5px;\u003Cbr>\n-moz-border-radius: 5px;\u003Cbr>\n-webkit-border-radius: 5px;\u003Cbr>\n/* … */\u003Cbr>\n}\u003Cbr>\n.box2 {\u003Cbr>\nborder-radius: 3px;\u003Cbr>\n-moz-border-radius: 3px;\u003Cbr>\n-webkit-border-radius: 3px;\u003Cbr>\n/* … */\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\nMit @mixin sagen wir, dass wir nun einen solchen Mixin definieren wollen, danach kommt der Name des Mixins, den wir uns natürlich selbst ausdenken. Für unser Element mit der Klasse box, rufen wir das Mixin durch @include mixin-name auf und geben in diesem Fall noch einen Radius mit.\u003Cbr>\nNatürlich kann Sass noch einiges mehr, aber wir werden nun mit dem CSS Framework Compass weitermachen.\u003C/p>\n\u003Ch3>CSS Framework Compass\u003C/h3>\n\u003Cp>Compass arbeitet wie schon gesagt mit Sass und bietet unter anderem sehr viele vordefinierte Mixins an – eben auch für CSS3 (\u003Ca href=\"http://compass-style.org/reference/compass/css3/\" target=\"_blank\" rel=\"noopener noreferrer\">Compass – CSS3\u003C/a>).\u003Cbr>\nUm bei unserem vorherigen Beispiel mit border-radius zu bleiben – hier seht ihr wie das ganze mit Compass umgesetzt werden kann:\u003Cbr>\nCompass/Sass:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\n@include border-radius(3px, 3px);\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\ngeneriertes CSS:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\n-webkit-border-radius: 3px 3px;\u003Cbr>\n-moz-border-radius: 3px / 3px;\u003Cbr>\n-o-border-radius: 3px / 3px;\u003Cbr>\n-ms-border-radius: 3px / 3px;\u003Cbr>\n-khtml-border-radius: 3px / 3px;\u003Cbr>\nborder-radius: 3px / 3px;\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\nIch denke dieses Beispiel zeigt gut, wieviel Schreibarbeit man sich durch die Verwendung von Compass ersparen kann. Natürlich muss man dazu erst einmal die Namen der verschiedenen Mixins kennen, aber die \u003Ca href=\"http://compass-style.org/reference/compass/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation/Reference von Compass\u003C/a> ist ziemlich gut und ausführlich.\u003Cbr>\nHier noch ein kurzes Beispiel zu CSS3 box-shadow:\u003Cbr>\nCompass/Sass:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\n@include box-shadow(red 2px 2px 10px);\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\ngeneriertes CSS:\u003Cbr>\n[sourcecode language=“css“]\u003Cbr>\n.box {\u003Cbr>\n-moz-box-shadow: red 2px 2px 10px;\u003Cbr>\n-webkit-box-shadow: red 2px 2px 10px;\u003Cbr>\n-o-box-shadow: red 2px 2px 10px;\u003Cbr>\nbox-shadow: red 2px 2px 10px;\u003Cbr>\n}\u003Cbr>\n[/sourcecode]\u003Cbr>\nIch könnte euch hier noch eine Reihe weiterer Beispiele zeigen, aber ich glaube ihr habt mittlerweile verstanden, warum ich so begeistert bin von Compass und Sass.\u003Cbr>\nNoch ein sehr tolles Feature von Compass das ich euch nicht vorenthalten möchte: das automatische erstellen von Sprite-Images und dazugehörigem CSS Code (\u003Ca href=\"http://compass-style.org/reference/compass/utilities/sprites/\" target=\"_blank\" rel=\"noopener noreferrer\">Referenz\u003C/a>). Wer schon einmal CSS Sprites erstellt hat, weiß was für eine anstrengende und nervende Arbeit das sein kann. Als ich dann dieses Compass Feature ausprobiert habe, und das ganze auch auf Anhieb wunderbar funktioniert hat, war ich richtig in Jubelstimmung.\u003C/p>\n\u003Ch3>Fazit\u003C/h3>\n\u003Cp>Ich denke die Verwendung von Compass und Sass zahlt sich sehr aus, obwohl man natürlich eine gewisse Zeit benötigt bis man sich eingelernt hat. Für diejenigen, die schon Erfahrung mit Skript- oder Programmiersprachen haben, sollte das Einlernen kein Problem sein. Aber auch für die HTML/CSS Coder unter euch, glaube ich kaum, dass das Erlernen von Sass irgendwelche gröberen Schwierigkeiten bereiten sollte.\u003Cbr>\nDurch die automatische Code-Generierung erspart man sich sehr viel Zeit. Auch, weil man sich in seinem Dokument viel besser und schneller zurechtfindet. Als Entwicklerin schätze ich vor allem die Verwendung von Mixins, Variablen, Verschachtelungen und so weiter, da das Dinge sind, die ich schon immer in CSS vermisst habe. Außerdem macht mir CSS schreiben wieder unheimlich viel Spaß, was selbstverständlich auch eine sehr bedeutende Rolle spielt.\u003Cbr>\nWas haltet ihr von Sass bzw Compass? Habt ihr mit diesen Tools schon Erfahrungen gemacht, oder würdet ihr sie gerne ausprobieren?\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":156,"id":157,"excludeFromScreenreader":13,"mediaImage":158,"name":163,"path":166,"status":20},"MediaImage","2082",{"__typename":159,"url":160,"width":161,"height":162,"alt":163,"title":163,"size":164,"mime":165},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2012/01/css_leicht_gemacht-1.jpg",1920,1280,"Liechtenecker Büro",135888,"image/jpeg","/media/2082/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/css3-leicht-gemacht-mit-sass-und-compass/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"CSS3 leicht gemacht mit Sass und Compass - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Wahrscheinlich haben die meisten von euch Sass schon ausprobiert oder zumindest davon gehört. Sass(Syntactically awesome Stylesheets) ermöglicht unter anderem die Verwendung von Variablen, Funktionen und sogenannten Mixins, was das schreiben von Styles einfacher und strukturierter macht. Das CSS Framework Compass, das mit Sass arbeitet ist auch ein sehr nützliches Tool, da uns hier viele Funktionen […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/css3-leicht-gemacht-mit-sass-und-compass/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2012-01-10T14:01:02+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-03-14T14:59:35+00:00\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/css3-leicht-gemacht-mit-sass-und-compass/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/css3-leicht-gemacht-mit-sass-und-compass/\",\"name\":\"CSS3 leicht gemacht mit Sass und Compass - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"datePublished\":\"2012-01-10T14:01:02+00:00\",\"dateModified\":\"2019-03-14T14:59:35+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/css3-leicht-gemacht-mit-sass-und-compass/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\",\"name\":\"Sarah\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/f370faa99da7a5e86b0afa364854663c?s=96&d=mm&r=g\",\"caption\":\"Sarah\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":169,"id":170,"myRole":171,"name":172,"nickname":173},"User","21","-","s-mischinger","Sarah",{"latestKnowhow":175},[176,191,204],{"__typename":79,"id":177,"title":178,"path":179,"wpTeaserText":180,"wpPromotedTeaserImage":13,"wpHeaderImage":181},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":156,"id":182,"excludeFromScreenreader":13,"mediaImage":183,"name":189,"path":190,"status":20},"3364",{"__typename":159,"url":184,"width":185,"height":186,"alt":187,"title":13,"size":188,"mime":165},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":192,"title":193,"path":194,"wpTeaserText":195,"wpPromotedTeaserImage":13,"wpHeaderImage":196},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":156,"id":197,"excludeFromScreenreader":13,"mediaImage":198,"name":202,"path":203,"status":20},"3355",{"__typename":159,"url":199,"width":185,"height":186,"alt":200,"title":13,"size":201,"mime":165},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":205,"title":206,"path":207,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":208},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":156,"id":209,"excludeFromScreenreader":21,"mediaImage":210,"name":214,"path":215,"status":20},"3303",{"__typename":159,"url":211,"width":185,"height":186,"alt":212,"title":13,"size":213,"mime":165},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":217,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":218,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":222,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":225,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":228,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":231,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":234,"Menu:nuxt-main-menu":237,"ROOT_QUERY":251,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":267,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":270,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":273,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":276,"Menu:footer":279,"TermCategories:8":289,"TermTags:252":300,"TermTags:297":301,"TermTags:1109":302,"MediaImage:2082":303,"User:21":305,"NodeWpPost:1130":306,"MediaImage:3364":331,"NodeWpPost:1619":333,"MediaImage:3355":336,"NodeWpPost:1616":338,"MediaImage:3303":341,"NodeWpPost:1606":343},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",219,"internal",20,"expanded",21,"attributes",221],{"__ref":220},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",223,"internal",20,"expanded",21,"attributes",224],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",226,"internal",20,"expanded",21,"attributes",227],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",229,"internal",20,"expanded",21,"attributes",230],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",232,"internal",20,"expanded",21,"attributes",233],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",235,"internal",20,"expanded",21,"attributes",236],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",238],[239,241,243,245,247,249],{"__ref":240},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":242},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":244},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":246},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":248},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":250},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",252,"menu({\"name\":\"NUXT_MAIN_MENU\"})",253,"menu({\"name\":\"FOOTER\"})",255,"route({\"path\":\"/blog/css3-leicht-gemacht-mit-sass-und-compass\"})",257,"latestKnowhow({\"excludeId\":\"1130\",\"limit\":3})",260],"Query",{"__ref":254},"Menu:nuxt-main-menu",{"__ref":256},"Menu:footer",["null","__typename",77,"entity",258],{"__ref":259},"NodeWpPost:1130",[261,263,265],{"__ref":262},"NodeWpPost:1619",{"__ref":264},"NodeWpPost:1616",{"__ref":266},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",277,"internal",21,"expanded",21,"attributes",278],{"__ref":220},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",280],[281,283,285,287],{"__ref":282},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":284},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":286},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":288},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",114,"id",115,"name",116,"path",117,"status",20,"weight",118,"description",290,"langcode",291,"changed",292,"metatag",293],["null","__typename",120,"processed",121,"format",122],{"__ref":220},["null","__typename",83,"timestamp",125,"timezone",85,"offset",86,"time",126],[294,296,298],["null","__typename",95,"tag",96,"attributes",295],["null","__typename",98,"name",99,"content",130],["null","__typename",95,"tag",96,"attributes",297],["null","__typename",98,"name",133,"content",134],["null","__typename",102,"tag",103,"attributes",299],["null","__typename",105,"href",137,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",140,"id",141,"name",142,"path",143,"weight",118],["null","__typename",140,"id",145,"name",146,"path",147,"weight",118],["null","__typename",140,"id",149,"name",150,"path",151,"weight",118],["null","__typename",156,"id",157,"excludeFromScreenreader",13,"mediaImage",304,"name",163,"path",166,"status",20],["null","__typename",159,"url",160,"width",161,"height",162,"alt",163,"title",163,"size",164,"mime",165],["null","__typename",169,"id",170,"myRole",171,"name",172,"nickname",173],["null","__typename",79,"id",80,"title",81,"changed",307,"created",308,"langcode",309,"path",92,"promote",21,"status",20,"sticky",21,"metatag",310,"category",317,"contentElements",13,"evergreen",13,"tags",319,"wpBody",326,"wpHeaderImage",13,"wpHeaderImageOld",327,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",167,"author",329],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":220},[311,313,315],["null","__typename",95,"tag",96,"attributes",312],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",314],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",316],["null","__typename",111,"property",112,"content",81],{"__ref":318},"TermCategories:8",[320,322,324],{"__ref":321},"TermTags:252",{"__ref":323},"TermTags:297",{"__ref":325},"TermTags:1109",["null","__typename",153,"processed",154,"format",122,"summary",13],{"__ref":328},"MediaImage:2082",{"__ref":330},"User:21",["null","__typename",156,"id",182,"excludeFromScreenreader",13,"mediaImage",332,"name",189,"path",190,"status",20],["null","__typename",159,"url",184,"width",185,"height",186,"alt",187,"title",13,"size",188,"mime",165],["null","__typename",79,"id",177,"title",178,"path",179,"wpTeaserText",180,"wpPromotedTeaserImage",13,"wpHeaderImage",334],{"__ref":335},"MediaImage:3364",["null","__typename",156,"id",197,"excludeFromScreenreader",13,"mediaImage",337,"name",202,"path",203,"status",20],["null","__typename",159,"url",199,"width",185,"height",186,"alt",200,"title",13,"size",201,"mime",165],["null","__typename",79,"id",192,"title",193,"path",194,"wpTeaserText",195,"wpPromotedTeaserImage",13,"wpHeaderImage",339],{"__ref":340},"MediaImage:3355",["null","__typename",156,"id",209,"excludeFromScreenreader",21,"mediaImage",342,"name",214,"path",215,"status",20],["null","__typename",159,"url",211,"width",185,"height",186,"alt",212,"title",13,"size",213,"mime",165],["null","__typename",79,"id",205,"title",206,"path",207,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",344],{"__ref":345},"MediaImage:3303"]