[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"CN5nebV73kJY05e9fTEzcvwUFVHRCDMrxaaflz-2IfU":75,"Sa7NzVp7NOfDXjahLkdadlORt98-8noMTqHBu4LzCkQ":200,"_apollo:default":242},{"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":117,"postContentElements":13,"evergreen":13,"tags":142,"postWpBody":168,"wpHeaderImage":172,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":184,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":171,"wpYoastHead":193,"author":194},"NodeWpPost","760","The Gauge: Kreisbogendiagramm mit HTML/CSS",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1658296026,"UTC","+00:00","2022-07-20T05:47:06+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1655180567,"2022-06-14T04:22:47+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/the-gauge-kreisbogendiagramm-mit-html-css",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","The Gauge: Kreisbogendiagramm mit HTML/CSS | 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/the-gauge-kreisbogendiagramm-mit-html-css","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2022/05/luki_sharing.jpg?h=3ecc83bb&itok=X0t3vdt4",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":124,"processed":125,"format":126},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[143,148,152,156,160,164],{"__typename":144,"id":145,"name":146,"path":147,"weight":122},"TermTags","295","CSS","/tag/css",{"__typename":144,"id":149,"name":150,"path":151,"weight":122},"455","farbverlauf","/tag/farbverlauf",{"__typename":144,"id":153,"name":154,"path":155,"weight":122},"526","gauge","/tag/gauge",{"__typename":144,"id":157,"name":158,"path":159,"weight":122},"596","how-to","/tag/how-to-2",{"__typename":144,"id":161,"name":162,"path":163,"weight":122},"601","HTML","/tag/html",{"__typename":144,"id":165,"name":166,"path":167,"weight":122},"727","kreisbogendiagramm","/tag/kreisbogendiagramm",{"__typename":169,"processed":170,"format":126,"summary":171},"TextSummary","\n\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            \u003Cdiv class=\"blog-drop-cap\">\n                    \u003Cdiv class=\"blog-drop-cap-background\">\nE\u003C/div>\n\u003Cp class=\"has-drop-cap\">Ein Halbkreisbogen, gefüllt mit einem Farbverlauf und je nach Prozentwert des dahinterliegenden Datums opak und der Rest halbtransparent. Klingt vielleicht etwas sperrig, sieht aber eigentlich recht schön aus:\u003C/p>\n\u003C/div>        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"836064f3-d013-4541-9892-0321067a7f1a\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=i-dloBUL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=0SvcNpof 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"902\" height=\"514\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=Na462G_d 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=gZ6h69ky 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"902\" height=\"514\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=uNEnOCqm 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=T65WFG4w 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"425\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=LztrTPUL 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=G06x9fER 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"274\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=UTQ416ju 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.webp?itok=aeSkzZtR 2x\" type=\"image/webp\" width=\"902\" height=\"514\">\n                  \u003Cimg loading=\"lazy\" width=\"902\" height=\"514\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png.jpg?itok=aeSkzZtR\" alt title=\"Bildschirmfoto-2022-05-31-um-11.48.35\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Soweit so gut, wir wissen, wie es aussehen soll. Aber wie setzen wir das um? Im ersten Moment rattern ein paar mögliche Ansätze durchs Hirn: Als svg lösen? Im Canvas zeichnen? Oder eine fix-fertige JavaScript-Library verwenden? \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Die schnellste Variante wäre wohl die Library. Aber ist das auch notwendig? Svg und Canvas könnte man vermutlich irgendwie hinbekommen, aber gerade beim Canvas ist dabei sicherlich einiges an Client-Rechnerei und -Repaint nötig, was man ja eigentlich nicht braucht. Wie wär’s also mit klassischem HTML und CSS? \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>HTML und CSS sind die basalsten Werkzeuge, die uns Frontend-Devs zur Verfügung stehen. Deshalb nutze ich lieber diese, bevor ich mir eine 3rd-Party-Library reinhole, die erstens viele Sachen kann, die ich gar nicht brauche, und zweitens Client-Performance frisst, die an anderer Stelle nötiger gebraucht wird. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Ch2>HTML/CSS it is\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Gut, dann gehen wir es an. Da ich hauptberuflich nicht nur Charts und Diagramme erstelle, muss ich etwas recherchieren, wie ich das für den konkreten Fall am besten angehe. Das wohl wichtigste CSS-Property wird wohl \u003Cstrong>image-mask\u003C/strong> werden, dazu aber später mehr. Außerdem sei hier bereits erwähnt, dass wir SASS verwenden, das macht es uns dann später ein bisschen einfacher. Außerdem ist ein CSS-Preprocessor sowieso (so gut wie) immer eine fabelhafte Idee.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Ein Kreis, der von links (-90°) bis rechts (90°)  – also in der oberen Kreishälfte – den gewünschten Farbverlauf hat, bildet die Grundlage des Diagramms. Um den unteren Halbkreis – also der zwischen 90° und 270°, der derzeit einfach nur grün ist – kümmern wir uns später.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"22e9b7e8-792e-4ab4-92ce-4a22980690d3\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=EyGYEAb5 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=Qh-EWLQb 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"750\" height=\"818\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=pr02ZYNB 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=YicrNamM 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"750\" height=\"818\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=m7orvvAk 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=NQmKIbsM 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"813\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=otFCIN-p 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=vi04ugWn 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"524\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=EjSpE-Kh 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.webp?itok=81fy-WYC 2x\" type=\"image/webp\" width=\"750\" height=\"818\">\n                  \u003Cimg loading=\"lazy\" width=\"750\" height=\"818\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.33.png.jpg?itok=81fy-WYC\" alt title=\"Bildschirmfoto-2022-05-31-um-11.50.33\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Ein kleiner weißer Kreis mittig darüber sorgt schon mal für den gewünschten Kreisrand, es soll ja kein Tortendiagramm werden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"22a6864a-ee8f-4ea5-879f-3af048f14321\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=pLZbtcEP 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=DMQvNUmt 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"606\" height=\"764\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=oWHM_kPM 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=kC0VEZZI 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"606\" height=\"764\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=XYXYigQJ 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=MizQntVn 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"606\" height=\"764\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=gpwS9bH3 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=-PIjjid4 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"605\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=OlSbdA8j 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.webp?itok=LONlrgob 2x\" type=\"image/webp\" width=\"606\" height=\"764\">\n                  \u003Cimg loading=\"lazy\" width=\"606\" height=\"764\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.50.49.png.jpg?itok=LONlrgob\" alt title=\"Bildschirmfoto-2022-05-31-um-11.50.49\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Ch2>Die Maske\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Und jetzt kommt eigentlich schon der wichtigste Teil: die Maske. Diese erlaubt uns, Teile des Kreises, in unserem Fall die untere Hälfte, komplett auszublenden. Der restliche Teil kann halbtransparent bzw. opak angezeigt werden. Dazu können wir das Property mask-image verwenden, das einen conic-gradient – also einen konischen, kegelförmigen Verlauf –  als Maske erlaubt. Für einen vollen Halbkreis sieht die Maske etwa so aus:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"eec85509-d4fd-46cb-bf31-87096daeae80\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=of1YH-uo 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=zkXKiz5Q 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"890\" height=\"622\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=uXUCMCkz 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=0ZIcHF9- 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"890\" height=\"622\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=sb-zdRR- 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=SrkC1eOX 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"521\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=KoDHjX7d 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=RKieaic7 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"335\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=wHVkwVCp 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.webp?itok=7Sb6CJVz 2x\" type=\"image/webp\" width=\"890\" height=\"622\">\n                  \u003Cimg loading=\"lazy\" width=\"890\" height=\"622\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.51.08.png.jpg?itok=7Sb6CJVz\" alt title=\"Bildschirmfoto-2022-05-31-um-11.51.08\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Der obere Halbkreis, der sichtbar sein soll, ist komplett opak schwarz, der untere Halbkreis, der nicht sichtbar sein soll, ist transparent. Wird diese Maske auf den Kreis angewandt, entsteht folgender Kreisbogen:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"62d7814d-c58d-43f1-bf26-1995070ee52e\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=XHaaBK5_ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=C6oCU9Tw 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"858\" height=\"494\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=RPZOXzyq 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=P0iSXFe1 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"858\" height=\"494\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=MjvZ55Gp 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=EUO3Fj-e 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"429\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=XBE5a5IP 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=VyGqZm9V 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"276\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=An6PWjr7 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.webp?itok=jVw6bEiI 2x\" type=\"image/webp\" width=\"858\" height=\"494\">\n                  \u003Cimg loading=\"lazy\" width=\"858\" height=\"494\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.53.33.png.jpg?itok=jVw6bEiI\" alt title=\"Bildschirmfoto-2022-05-31-um-11.53.33\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Das Diagramm gibt ja Prozentwerte wieder, der volle Halbkreis stellt also 100% dar. Für 50% sähe die Maske so aus:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"46ad1ba5-4f56-4845-af21-ab83b1a3d672\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=WbZrUpge 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=DMX79M2f 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"876\" height=\"546\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=9CthXAGH 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=0fX1nBES 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"876\" height=\"546\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=5mjz1qUA 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=rPD3LPmB 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"464\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=ilN7Z_44 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=8nnnK224 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"299\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=6gUI9_3b 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.webp?itok=Wkvh2P7Y 2x\" type=\"image/webp\" width=\"876\" height=\"546\">\n                  \u003Cimg loading=\"lazy\" width=\"876\" height=\"546\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.54.23.png.jpg?itok=Wkvh2P7Y\" alt title=\"Bildschirmfoto-2022-05-31-um-11.54.23\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Im Vergleich sieht man schon, was passiert: Der konische Verlauf beginnt wieder bei -90° und ist schwarz. Doch nun spannt sich dieser schwarze Bereich nur über die folgenden 90°. Danach folgt ein halbtransparenter Kegel, der den Halbkreis abschließt. Der Halbkreis unten bleibt wie vorher transparent. Das ergibt dann einen Kreisbogen, der so aussieht:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"6cc21594-680a-4464-bfcf-6e854c348fa4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=PaziyK6D 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=iE8Ymfy8 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"900\" height=\"512\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=dpQgTmbR 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=dtMxHa3i 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"900\" height=\"512\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=Pk3RSemt 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=_INaURk0 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"424\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=5HCMkddt 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=4lw_4-s6 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"273\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=rrz9eieT 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.webp?itok=RkXsDhAE 2x\" type=\"image/webp\" width=\"900\" height=\"512\">\n                  \u003Cimg loading=\"lazy\" width=\"900\" height=\"512\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.07.png.jpg?itok=RkXsDhAE\" alt title=\"Bildschirmfoto-2022-05-31-um-11.55.07\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Ch2>Ein bisschen SASS\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Gut, jetzt wissen wir, wie wir 100% bzw. 50% darstellen. Aber wir wollen ja alle Prozentwerte anzeigen können?!\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Ganz recht, und da benutzen wir SASS, bzw. die For-Schleifen und Variablen von SASS. Wir wissen, wir haben ein 180°-Stück zur Verfügung, das wir in 100 gleichmäßige Stücke unterteilen wollen. Also entspricht 1% einem Kreissegment von 1,8°. Wir legen nun einen CSS-Eintrag für jeden Prozentwert an:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"6e2ce243-f1fe-44a8-a110-0aed04410ec2\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=iyP_g0-2 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=3diW9njf 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"926\" height=\"240\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=0We8rxdx 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=v-dsI7Dq 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"926\" height=\"240\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=fP89XAo3 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=RBxNeYB_ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"193\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=JfGuyypo 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=NaDlF0Ux 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"124\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=005cqmf3 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.webp?itok=WsG6jJdc 2x\" type=\"image/webp\" width=\"926\" height=\"240\">\n                  \u003Cimg loading=\"lazy\" width=\"926\" height=\"240\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.55.48.png.jpg?itok=WsG6jJdc\" alt title=\"Bildschirmfoto-2022-05-31-um-11.55.48\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Dadurch wird jeder Prozentwert definiert und kann per Klasse – „percent-{Wert}“, also etwa „percent-40“  – , angesprochen werden. Wenn beispielsweise das Backend, bzw das Template, den Prozentwert als Klasse ausgibt, benötigen wir für das Kreisbogendiagramm keine einzige Zeile JavaScript. Aber wir können natürlich direkt mit JavaScript Klassen hinzufügen und entfernen und so auch simpel Wertveränderungen visualisieren.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Der Pfeil in der Mitte wird ganz ähnlich erzeugt: Ein kleines <span>-Element, wird per Skew und Border-Radius zu einem abgerundeten Deltoid transformiert. Mit Hilfe der Klassen für die Prozente rotiert das Deltoid entsprechend.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Zu finden ist das Ganze im folgenden \u003Ca href=\"https://codepen.io/snookas/pen/wvpjPXp\">Codepen-Link\u003C/a>, angereichert mit einer repräsentativen Grafik, wie die Maske mit den jeweiligen Prozentklassen aussieht. Mit Hilfe eines Sliders kann der gewünschte Wert verändert werden:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\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\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"84efd137-733f-41e8-95c8-00aa7829df71\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=jq0M9POQ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=RDMXTn9h 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"902\" height=\"498\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=0myaXHof 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=fyhe2AX9 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"902\" height=\"498\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=Dy1lFacC 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=zoUty-a4 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"411\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=10Qy1Ekg 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=jKGE9QsS 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"265\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=QVMEnFK9 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.webp?itok=aHcBfy0t 2x\" type=\"image/webp\" width=\"902\" height=\"498\">\n                  \u003Cimg loading=\"lazy\" width=\"902\" height=\"498\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2022/05/Bildschirmfoto-2022-05-31-um-11.56.33.png.jpg?itok=aHcBfy0t\" alt title=\"Bildschirmfoto-2022-05-31-um-11.56.33\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>So, und damit sind wir ja schon am Ende angekommen – ich hoffe, es hat euch Spaß gemacht, die Genesis dieses kleinen Kreisbogendiagramms mitzuerleben. Hättet ihr es anders gelöst und wenn ja, wie und warum? Habt ihr Fragen oder spielt euch euch jetzt schon seit Minuten am Kreisbogendiagramm auf Codepen rum? Dann schreibt uns gern in die Kommentare! \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Ich werd mich in der Zwischenzeit ans nächste Rätsel machen. Bis dahin, macht’s gut!\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n","Warum ich es liebe, Frontend-Dev zu sein? Weil einem das Leben – sprich: die Designer:innen – immer wieder kleine Rätsel stellen, die man lösen will. Heute ganz frisch auf der Karte: ein Kreisbogendiagramm, auch bekannt unter dem Namen „Gauge-Chart“. ",{"__typename":173,"id":174,"excludeFromScreenreader":13,"mediaImage":175,"name":180,"path":183,"status":20},"MediaImage","621",{"__typename":176,"url":177,"width":178,"height":179,"alt":13,"title":180,"size":181,"mime":182},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2022/05/Luki_Titelbild-1-scaled.jpg",2560,1156,"Luki_Titelbild",429654,"image/jpeg","/media/621/edit",{"__typename":173,"id":185,"excludeFromScreenreader":13,"mediaImage":186,"name":190,"path":192,"status":20},"620",{"__typename":176,"url":187,"width":188,"height":189,"alt":13,"title":190,"size":191,"mime":182},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2022/05/luki_sharing.jpg",1204,630,"luki_sharing",474836,"/media/620/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"In diesem Artikel findet ihr eine How-to Anleitung für Entwickler, ein Kreisbogendiagramm mit HTML/CSS zu programmieren.\" />\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/the-gauge-kreisbogendiagramm-mit-html-css/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"The Gauge: Kreisbogendiagramm mit HTML/CSS - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"In diesem Artikel findet ihr eine How-to Anleitung für Entwickler, ein Kreisbogendiagramm mit HTML/CSS zu programmieren.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2022-06-14T06:22:47+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2022-07-20T07:47:06+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png\" />\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\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2022/05/Bildschirmfoto-2022-05-31-um-11.48.35.png\",\"width\":902,\"height\":514},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/\",\"name\":\"The Gauge: Kreisbogendiagramm mit HTML/CSS - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/#primaryimage\"},\"datePublished\":\"2022-06-14T06:22:47+00:00\",\"dateModified\":\"2022-07-20T07:47:06+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\"},\"description\":\"In diesem Artikel findet ihr eine How-to Anleitung f\\u00fcr Entwickler, ein Kreisbogendiagramm mit HTML/CSS zu programmieren.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/the-gauge-kreisbogendiagramm-mit-html-css/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\",\"name\":\"Lukas Kindermann\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/116fdcda3e1d9ad0d3b65dd2e1d2dd40?s=96&d=mm&r=g\",\"caption\":\"Lukas Kindermann\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":195,"id":196,"myRole":197,"name":198,"nickname":199},"User","8","Omnom-Fanboy","lukas","Lukas Kindermann",{"latestKnowhow":201},[202,217,230],{"__typename":79,"id":203,"title":204,"path":205,"wpTeaserText":206,"wpPromotedTeaserImage":13,"wpHeaderImage":207},"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":173,"id":208,"excludeFromScreenreader":13,"mediaImage":209,"name":215,"path":216,"status":20},"3364",{"__typename":176,"url":210,"width":211,"height":212,"alt":213,"title":13,"size":214,"mime":182},"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":218,"title":219,"path":220,"wpTeaserText":221,"wpPromotedTeaserImage":13,"wpHeaderImage":222},"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":173,"id":223,"excludeFromScreenreader":13,"mediaImage":224,"name":228,"path":229,"status":20},"3355",{"__typename":176,"url":225,"width":211,"height":212,"alt":226,"title":13,"size":227,"mime":182},"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":231,"title":232,"path":233,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":234},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":173,"id":235,"excludeFromScreenreader":21,"mediaImage":236,"name":240,"path":241,"status":20},"3303",{"__typename":176,"url":237,"width":211,"height":212,"alt":238,"title":13,"size":239,"mime":182},"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":243,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":244,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":248,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":251,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":254,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":257,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":260,"Menu:nuxt-main-menu":263,"ROOT_QUERY":277,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":293,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":296,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":299,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":302,"Menu:footer":305,"TermCategories:7":315,"TermTags:295":326,"TermTags:455":327,"TermTags:526":328,"TermTags:596":329,"TermTags:601":330,"TermTags:727":331,"MediaImage:621":332,"MediaImage:620":334,"User:8":336,"NodeWpPost:760":337,"MediaImage:3364":372,"NodeWpPost:1619":374,"MediaImage:3355":377,"NodeWpPost:1616":379,"MediaImage:3303":382,"NodeWpPost:1606":384},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",245,"internal",20,"expanded",21,"attributes",247],{"__ref":246},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",249,"internal",20,"expanded",21,"attributes",250],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",252,"internal",20,"expanded",21,"attributes",253],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",255,"internal",20,"expanded",21,"attributes",256],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",258,"internal",20,"expanded",21,"attributes",259],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",264],[265,267,269,271,273,275],{"__ref":266},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":268},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":270},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":272},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":274},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":276},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",278,"menu({\"name\":\"NUXT_MAIN_MENU\"})",279,"menu({\"name\":\"FOOTER\"})",281,"route({\"path\":\"/blog/the-gauge-kreisbogendiagramm-mit-html-css\"})",283,"latestKnowhow({\"excludeId\":\"760\",\"limit\":3})",286],"Query",{"__ref":280},"Menu:nuxt-main-menu",{"__ref":282},"Menu:footer",["null","__typename",77,"entity",284],{"__ref":285},"NodeWpPost:760",[287,289,291],{"__ref":288},"NodeWpPost:1619",{"__ref":290},"NodeWpPost:1616",{"__ref":292},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",294,"internal",20,"expanded",21,"attributes",295],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",297,"internal",20,"expanded",21,"attributes",298],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",300,"internal",20,"expanded",21,"attributes",301],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",303,"internal",21,"expanded",21,"attributes",304],{"__ref":246},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",306],[307,309,311,313],{"__ref":308},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":310},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":312},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":314},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",316,"langcode",317,"changed",318,"metatag",319],["null","__typename",124,"processed",125,"format",126],{"__ref":246},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[320,322,324],["null","__typename",95,"tag",96,"attributes",321],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",323],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",325],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",144,"id",145,"name",146,"path",147,"weight",122],["null","__typename",144,"id",149,"name",150,"path",151,"weight",122],["null","__typename",144,"id",153,"name",154,"path",155,"weight",122],["null","__typename",144,"id",157,"name",158,"path",159,"weight",122],["null","__typename",144,"id",161,"name",162,"path",163,"weight",122],["null","__typename",144,"id",165,"name",166,"path",167,"weight",122],["null","__typename",173,"id",174,"excludeFromScreenreader",13,"mediaImage",333,"name",180,"path",183,"status",20],["null","__typename",176,"url",177,"width",178,"height",179,"alt",13,"title",180,"size",181,"mime",182],["null","__typename",173,"id",185,"excludeFromScreenreader",13,"mediaImage",335,"name",190,"path",192,"status",20],["null","__typename",176,"url",187,"width",188,"height",189,"alt",13,"title",190,"size",191,"mime",182],["null","__typename",195,"id",196,"myRole",197,"name",198,"nickname",199],["null","__typename",79,"id",80,"title",81,"changed",338,"created",339,"langcode",340,"path",92,"promote",21,"status",20,"sticky",21,"metatag",341,"category",350,"contentElements",13,"evergreen",13,"tags",352,"wpBody",365,"wpHeaderImage",366,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",368,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",171,"wpYoastHead",193,"author",370],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":246},[342,344,346,348],["null","__typename",95,"tag",96,"attributes",343],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",345],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",347],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",349],["null","__typename",111,"property",115,"content",116],{"__ref":351},"TermCategories:7",[353,355,357,359,361,363],{"__ref":354},"TermTags:295",{"__ref":356},"TermTags:455",{"__ref":358},"TermTags:526",{"__ref":360},"TermTags:596",{"__ref":362},"TermTags:601",{"__ref":364},"TermTags:727",["null","__typename",169,"processed",170,"format",126,"summary",171],{"__ref":367},"MediaImage:621",{"__ref":369},"MediaImage:620",{"__ref":371},"User:8",["null","__typename",173,"id",208,"excludeFromScreenreader",13,"mediaImage",373,"name",215,"path",216,"status",20],["null","__typename",176,"url",210,"width",211,"height",212,"alt",213,"title",13,"size",214,"mime",182],["null","__typename",79,"id",203,"title",204,"path",205,"wpTeaserText",206,"wpPromotedTeaserImage",13,"wpHeaderImage",375],{"__ref":376},"MediaImage:3364",["null","__typename",173,"id",223,"excludeFromScreenreader",13,"mediaImage",378,"name",228,"path",229,"status",20],["null","__typename",176,"url",225,"width",211,"height",212,"alt",226,"title",13,"size",227,"mime",182],["null","__typename",79,"id",218,"title",219,"path",220,"wpTeaserText",221,"wpPromotedTeaserImage",13,"wpHeaderImage",380],{"__ref":381},"MediaImage:3355",["null","__typename",173,"id",235,"excludeFromScreenreader",21,"mediaImage",383,"name",240,"path",241,"status",20],["null","__typename",176,"url",237,"width",211,"height",212,"alt",238,"title",13,"size",239,"mime",182],["null","__typename",79,"id",231,"title",232,"path",233,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",385],{"__ref":386},"MediaImage:3303"]