chore: format code and improve readability in README, index.php, and navbar snippet

README.md

@@ -1,13 +1,15 @@
 <img src="http://getkirby.com/assets/images/github/plainkit.jpg" width="300">
 
 **Kirby: the CMS that adapts to any project, loved by developers and editors alike.**
-The Plainkit is a minimal Kirby setup with the basics you need to start a project from scratch. It is the ideal choice if you are already familiar with Kirby and want to start step-by-step.
+The Plainkit is a minimal Kirby setup with the basics you need to start a project from scratch. It is the ideal choice
+if you are already familiar with Kirby and want to start step-by-step.
 
 You can learn more about Kirby at [getkirby.com](https://getkirby.com).
 
 ### Try Kirby for free
 
-You can try Kirby and the Plainkit on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, [buy your license](https://getkirby.com/buy).
+You can try Kirby and the Plainkit on your local machine or on a test server as long as you need to make sure it is the
+right tool for your next project. … and when you’re convinced, [buy your license](https://getkirby.com/buy).
 
 ### Get going
 
@@ -21,11 +23,13 @@ If you are familiar with Git, you can clone Kirby's Plainkit repository from Git
 ## What's Kirby?
 
 - **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
--   **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started.
+- **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get
+  started.
 - **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes.
 - **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems.
 - **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it.
--   **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support.
+- **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and
+  support.
 - **[Discord](https://chat.getkirby.com)** – Hang out and meet the community.
 - **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word.
 - **[Bluesky](https://bsky.app/profile/getkirby.com)** – Spread the word.

assets/css/styles.css

@@ -50,6 +50,7 @@
         padding: 0;
         border: 0 solid;
     }
+
     html, :host {
         line-height: 1.5;
         -webkit-text-size-adjust: 100%;
@@ -59,73 +60,91 @@
         font-variation-settings: var(--default-font-variation-settings, normal);
         -webkit-tap-highlight-color: transparent;
     }
+
     hr {
         height: 0;
         color: inherit;
         border-top-width: 1px;
     }
+
     abbr:where([title]) {
         -webkit-text-decoration: underline dotted;
         text-decoration: underline dotted;
     }
+
     h1, h2, h3, h4, h5, h6 {
         font-size: inherit;
         font-weight: inherit;
     }
+
     a {
         color: inherit;
         -webkit-text-decoration: inherit;
         text-decoration: inherit;
     }
+
     b, strong {
         font-weight: bolder;
     }
+
     code, kbd, samp, pre {
         font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
         font-feature-settings: var(--default-mono-font-feature-settings, normal);
         font-variation-settings: var(--default-mono-font-variation-settings, normal);
         font-size: 1em;
     }
+
     small {
         font-size: 80%;
     }
+
     sub, sup {
         font-size: 75%;
         line-height: 0;
         position: relative;
         vertical-align: baseline;
     }
+
     sub {
         bottom: -0.25em;
     }
+
     sup {
         top: -0.5em;
     }
+
     table {
         text-indent: 0;
         border-color: inherit;
         border-collapse: collapse;
     }
+
     :-moz-focusring {
         outline: auto;
     }
+
     progress {
         vertical-align: baseline;
     }
+
     summary {
         display: list-item;
     }
+
     ol, ul, menu {
         list-style: none;
     }
+
     img, svg, video, canvas, audio, iframe, embed, object {
         display: block;
         vertical-align: middle;
     }
+
     img, video {
         max-width: 100%;
         height: auto;
     }
+
     button, input, select, optgroup, textarea, ::file-selector-button {
         font: inherit;
         font-feature-settings: inherit;
@@ -136,18 +155,23 @@
         background-color: transparent;
         opacity: 1;
     }
+
     :where(select:is([multiple], [size])) optgroup {
         font-weight: bolder;
     }
+
     :where(select:is([multiple], [size])) optgroup option {
         padding-inline-start: 20px;
     }
+
     ::file-selector-button {
         margin-inline-end: 4px;
     }
+
     ::placeholder {
         opacity: 1;
     }
+
     @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
         ::placeholder {
             color: currentcolor;
@@ -159,31 +183,40 @@
     textarea {
         resize: vertical;
     }
+
     ::-webkit-search-decoration {
         -webkit-appearance: none;
     }
+
     ::-webkit-date-and-time-value {
         min-height: 1lh;
         text-align: inherit;
     }
+
     ::-webkit-datetime-edit {
         display: inline-flex;
     }
+
     ::-webkit-datetime-edit-fields-wrapper {
         padding: 0;
     }
+
     ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
         padding-block: 0;
     }
+
     :-moz-ui-invalid {
         box-shadow: none;
     }
+
     button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
         appearance: button;
     }
+
     ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
         height: auto;
     }
+
     [hidden]:where(:not([hidden="until-found"])) {
         display: none !important;
     }
@@ -192,36 +225,47 @@
     .invisible {
         visibility: hidden;
     }
+
     .absolute {
         position: absolute;
     }
+
     .relative {
         position: relative;
     }
+
     .sticky {
         position: sticky;
     }
+
     .inset-0 {
         inset: calc(var(--spacing) * 0);
     }
+
     .top-0 {
         top: calc(var(--spacing) * 0);
     }
+
     .top-2 {
         top: calc(var(--spacing) * 2);
     }
+
     .left-0 {
         left: calc(var(--spacing) * 0);
     }
+
     .z-0 {
         z-index: 0;
     }
+
     .z-10 {
         z-index: 10;
     }
+
     .z-50 {
         z-index: 50;
     }
+
     .container {
         width: 100%;
         @media (width >= 40rem) {
@@ -240,114 +284,151 @@
             max-width: 96rem;
         }
     }
+
     .mx-auto {
         margin-inline: auto;
     }
+
     .mt-2 {
         margin-top: calc(var(--spacing) * 2);
     }
+
     .mt-4 {
         margin-top: calc(var(--spacing) * 4);
     }
+
     .mb-3 {
         margin-bottom: calc(var(--spacing) * 3);
     }
+
     .mb-6 {
         margin-bottom: calc(var(--spacing) * 6);
     }
+
     .ml-1 {
         margin-left: calc(var(--spacing) * 1);
     }
+
     .block {
         display: block;
     }
+
     .flex {
         display: flex;
     }
+
     .hidden {
         display: none;
     }
+
     .inline {
         display: inline;
     }
+
     .h-4 {
         height: calc(var(--spacing) * 4);
     }
+
     .h-6 {
         height: calc(var(--spacing) * 6);
     }
+
     .h-10 {
         height: calc(var(--spacing) * 10);
     }
+
     .h-18 {
         height: calc(var(--spacing) * 18);
     }
+
     .h-24 {
         height: calc(var(--spacing) * 24);
     }
+
     .h-auto {
         height: auto;
     }
+
     .h-full {
         height: 100%;
     }
+
     .w-3\/4 {
         width: calc(3 / 4 * 100%);
     }
+
     .w-4 {
         width: calc(var(--spacing) * 4);
     }
+
     .w-6 {
         width: calc(var(--spacing) * 6);
     }
+
     .w-10 {
         width: calc(var(--spacing) * 10);
     }
+
     .w-18 {
         width: calc(var(--spacing) * 18);
     }
+
     .w-24 {
         width: calc(var(--spacing) * 24);
     }
+
     .w-48 {
         width: calc(var(--spacing) * 48);
     }
+
     .w-full {
         width: 100%;
     }
+
     .max-w-7xl {
         max-width: var(--container-7xl);
     }
+
     .rotate-180 {
         rotate: 180deg;
     }
+
     .transform {
         transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
     }
+
     .resize {
         resize: both;
     }
+
     .flex-col {
         flex-direction: column;
     }
+
     .items-baseline {
         align-items: baseline;
     }
+
     .items-center {
         align-items: center;
     }
+
     .justify-between {
         justify-content: space-between;
     }
+
     .justify-center {
         justify-content: center;
     }
+
     .gap-6 {
         gap: calc(var(--spacing) * 6);
     }
+
     .gap-8 {
         gap: calc(var(--spacing) * 8);
     }
+
     .space-y-1 {
         :where(& > :not(:last-child)) {
             --tw-space-y-reverse: 0;
@@ -355,6 +436,7 @@
             margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
         }
     }
+
     .space-x-3 {
         :where(& > :not(:last-child)) {
             --tw-space-x-reverse: 0;
@@ -362,6 +444,7 @@
             margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
         }
     }
+
     .space-x-4 {
         :where(& > :not(:last-child)) {
             --tw-space-x-reverse: 0;
@@ -369,178 +452,229 @@
             margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
         }
     }
+
     .overflow-hidden {
         overflow: hidden;
     }
+
     .rounded-lg {
         border-radius: var(--radius-lg);
     }
+
     .rounded-md {
         border-radius: var(--radius-md);
     }
+
     .border {
         border-style: var(--tw-border-style);
         border-width: 1px;
     }
+
     .border-t {
         border-top-style: var(--tw-border-style);
         border-top-width: 1px;
     }
+
     .border-gray-700 {
         border-color: var(--color-gray-700);
     }
+
     .bg-blue-500\/40 {
         background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
             background-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
         }
     }
+
     .bg-sf_grau-50 {
         background-color: var(--color-sf_grau-50);
     }
+
     .bg-sf_grau-400 {
         background-color: var(--color-sf_grau-400);
     }
+
     .bg-white {
         background-color: var(--color-white);
     }
+
     .object-cover {
         object-fit: cover;
     }
+
     .px-2 {
         padding-inline: calc(var(--spacing) * 2);
     }
+
     .px-3 {
         padding-inline: calc(var(--spacing) * 3);
     }
+
     .px-4 {
         padding-inline: calc(var(--spacing) * 4);
     }
+
     .py-1 {
         padding-block: calc(var(--spacing) * 1);
     }
+
     .py-2 {
         padding-block: calc(var(--spacing) * 2);
     }
+
     .py-7 {
         padding-block: calc(var(--spacing) * 7);
     }
+
     .py-16 {
         padding-block: calc(var(--spacing) * 16);
     }
+
     .py-24 {
         padding-block: calc(var(--spacing) * 24);
     }
+
     .pt-2 {
         padding-top: calc(var(--spacing) * 2);
     }
+
     .pt-4 {
         padding-top: calc(var(--spacing) * 4);
     }
+
     .pb-3 {
         padding-bottom: calc(var(--spacing) * 3);
     }
+
     .pl-6 {
         padding-left: calc(var(--spacing) * 6);
     }
+
     .text-center {
         text-align: center;
     }
+
     .text-left {
         text-align: left;
     }
+
     .font-sans {
         font-family: var(--font-sans);
     }
+
     .text-4xl {
         font-size: var(--text-4xl);
         line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
+
     .text-base {
         font-size: var(--text-base);
         line-height: var(--tw-leading, var(--text-base--line-height));
     }
+
     .text-lg {
         font-size: var(--text-lg);
         line-height: var(--tw-leading, var(--text-lg--line-height));
     }
+
     .text-sm {
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
     }
+
     .font-bold {
         --tw-font-weight: var(--font-weight-bold);
         font-weight: var(--font-weight-bold);
     }
+
     .font-medium {
         --tw-font-weight: var(--font-weight-medium);
         font-weight: var(--font-weight-medium);
     }
+
     .text-gray-500 {
         color: var(--color-gray-500);
     }
+
     .text-gray-600 {
         color: var(--color-gray-600);
     }
+
     .text-gray-700 {
         color: var(--color-gray-700);
     }
+
     .text-gray-900 {
         color: var(--color-gray-900);
     }
+
     .text-sf_blau-500 {
         color: var(--color-sf_blau-500);
     }
+
     .text-sf_grau-600 {
         color: var(--color-sf_grau-600);
     }
+
     .text-sf_grau-800 {
         color: var(--color-sf_grau-800);
     }
+
     .text-white {
         color: var(--color-white);
     }
+
     .antialiased {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
+
     .opacity-0 {
         opacity: 0%;
     }
+
     .opacity-50 {
         opacity: 50%;
     }
+
     .shadow-lg {
         --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+
     .shadow-xl {
         --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+
     .transition-all {
         transition-property: all;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
         transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
+
     .transition-colors {
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
         transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
+
     .transition-transform {
         transition-property: transform, translate, scale, rotate;
         transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
         transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
+
     .duration-200 {
         --tw-duration: 200ms;
         transition-duration: 200ms;
     }
+
     .duration-500 {
         --tw-duration: 500ms;
         transition-duration: 500ms;
     }
+
     .group-hover\:visible {
         &:is(:where(.group):hover *) {
             @media (hover: hover) {
@@ -548,6 +682,7 @@
             }
         }
     }
+
     .group-hover\:rotate-180 {
         &:is(:where(.group):hover *) {
             @media (hover: hover) {
@@ -555,6 +690,7 @@
             }
         }
     }
+
     .group-hover\:opacity-100 {
         &:is(:where(.group):hover *) {
             @media (hover: hover) {
@@ -562,6 +698,7 @@
             }
         }
     }
+
     .hover\:bg-gray-100 {
         &:hover {
             @media (hover: hover) {
@@ -569,6 +706,7 @@
             }
         }
     }
+
     .hover\:text-blue-600 {
         &:hover {
             @media (hover: hover) {
@@ -576,6 +714,7 @@
             }
         }
     }
+
     .hover\:text-pink-500 {
         &:hover {
             @media (hover: hover) {
@@ -583,6 +722,7 @@
             }
         }
     }
+
     .hover\:text-sf_blau-500 {
         &:hover {
             @media (hover: hover) {
@@ -590,6 +730,7 @@
             }
         }
     }
+
     .hover\:text-sf_blau-700 {
         &:hover {
             @media (hover: hover) {
@@ -597,6 +738,7 @@
             }
         }
     }
+
     .hover\:text-sf_gelb-500 {
         &:hover {
             @media (hover: hover) {
@@ -604,211 +746,255 @@
             }
         }
     }
+
     .focus\:text-blue-600 {
         &:focus {
             color: var(--color-blue-600);
         }
     }
+
     .focus\:outline-none {
         &:focus {
             --tw-outline-style: none;
             outline-style: none;
         }
     }
+
     .sm\:flex {
         @media (width >= 40rem) {
             display: flex;
         }
     }
+
     .sm\:px-3 {
         @media (width >= 40rem) {
             padding-inline: calc(var(--spacing) * 3);
         }
     }
+
     .sm\:px-6 {
         @media (width >= 40rem) {
             padding-inline: calc(var(--spacing) * 6);
         }
     }
+
     .md\:top-6 {
         @media (width >= 48rem) {
             top: calc(var(--spacing) * 6);
         }
     }
+
     .md\:block {
         @media (width >= 48rem) {
             display: block;
         }
     }
+
     .md\:hidden {
         @media (width >= 48rem) {
             display: none;
         }
     }
+
     .md\:h-36 {
         @media (width >= 48rem) {
             height: calc(var(--spacing) * 36);
         }
     }
+
     .md\:w-1\/2 {
         @media (width >= 48rem) {
             width: calc(1 / 2 * 100%);
         }
     }
+
     .md\:w-36 {
         @media (width >= 48rem) {
             width: calc(var(--spacing) * 36);
         }
     }
+
     .md\:py-32 {
         @media (width >= 48rem) {
             padding-block: calc(var(--spacing) * 32);
         }
     }
+
     .lg\:flex {
         @media (width >= 64rem) {
             display: flex;
         }
     }
+
     .lg\:w-1\/2 {
         @media (width >= 64rem) {
             width: calc(1 / 2 * 100%);
         }
     }
+
     .lg\:flex-row {
         @media (width >= 64rem) {
             flex-direction: row;
         }
     }
+
     .lg\:gap-10 {
         @media (width >= 64rem) {
             gap: calc(var(--spacing) * 10);
         }
     }
+
     .lg\:gap-16 {
         @media (width >= 64rem) {
             gap: calc(var(--spacing) * 16);
         }
     }
+
     .lg\:px-8 {
         @media (width >= 64rem) {
             padding-inline: calc(var(--spacing) * 8);
         }
     }
+
     .xl\:gap-14 {
         @media (width >= 80rem) {
             gap: calc(var(--spacing) * 14);
         }
     }
 }
+
 @property --tw-rotate-x {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-rotate-y {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-rotate-z {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-skew-x {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-skew-y {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-space-y-reverse {
     syntax: "*";
     inherits: false;
     initial-value: 0;
 }
+
 @property --tw-space-x-reverse {
     syntax: "*";
     inherits: false;
     initial-value: 0;
 }
+
 @property --tw-border-style {
     syntax: "*";
     inherits: false;
     initial-value: solid;
 }
+
 @property --tw-font-weight {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-shadow {
     syntax: "*";
     inherits: false;
     initial-value: 0 0 #0000;
 }
+
 @property --tw-shadow-color {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-shadow-alpha {
     syntax: "<percentage>";
     inherits: false;
     initial-value: 100%;
 }
+
 @property --tw-inset-shadow {
     syntax: "*";
     inherits: false;
     initial-value: 0 0 #0000;
 }
+
 @property --tw-inset-shadow-color {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-inset-shadow-alpha {
     syntax: "<percentage>";
     inherits: false;
     initial-value: 100%;
 }
+
 @property --tw-ring-color {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-ring-shadow {
     syntax: "*";
     inherits: false;
     initial-value: 0 0 #0000;
 }
+
 @property --tw-inset-ring-color {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-inset-ring-shadow {
     syntax: "*";
     inherits: false;
     initial-value: 0 0 #0000;
 }
+
 @property --tw-ring-inset {
     syntax: "*";
     inherits: false;
 }
+
 @property --tw-ring-offset-width {
     syntax: "<length>";
     inherits: false;
     initial-value: 0px;
 }
+
 @property --tw-ring-offset-color {
     syntax: "*";
     inherits: false;
     initial-value: #fff;
 }
+
 @property --tw-ring-offset-shadow {
     syntax: "*";
     inherits: false;
     initial-value: 0 0 #0000;
 }
+
 @property --tw-duration {
     syntax: "*";
     inherits: false;
 }
+
 @layer properties {
     @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
         *, ::before, ::after, ::backdrop {

assets/svg/logo.svg

@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px"
+     y="0px"
      viewBox="0 0 338.1 345.1" enable-background="new 0 0 338.1 345.1" xml:space="preserve">
 <g>
 	<g>
 		
-			<rect x="87.8" y="138.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -105.593 183.8373)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="162.6" height="162.6"/>
+			<rect x="87.8" y="138.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -105.593 183.8373)"
+                  fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="162.6" height="162.6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M60.7,218.5L168.2,111l0.9-0.9l0.9,0.9l107.5,107.5l0.9,0.9l-0.9,0.9L170,327.8
 			l-0.9,0.9l-0.9-0.9L60.7,220.3l-0.9-0.9L60.7,218.5L60.7,218.5z M75.6,207.1l12.7,12.7L76,232.1l13.5,13.5l12.2-12.2l13.4,13.4
 			L103,259l13.5,13.5l12.3-12.3l13.4,13.4L130,286l13.5,13.5l12.2-12.3l13.4,13.4L157,313l12.2,12.2l12.3-12.3l-12.1-12.1l13.4-13.4
@@ -38,16 +40,20 @@
 			C239.9,140,259,143.2,270.9,145.3L270.9,145.3z M93.6,122.3c-9.3,6.3-18,14-26.3,23.1c11.9-2.2,31-5.3,42.9-3.3L93.6,122.3z"/>
 	</g>
     <g>
-		<path fill-rule="evenodd" clip-rule="evenodd" fill="#1C59A6" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#1C59A6" stroke="#FFFFFF" stroke-width="2"
+              stroke-miterlimit="10" d="
 			M13,276.7h31.8v27h3.6h17.1v9.3H13l18.1-18.1L13,276.7L13,276.7z M325.1,276.7h-31.8v27h-3.6h-17.1v9.3h52.5l-18.1-18.1
 			L325.1,276.7L325.1,276.7z M45.3,303.1h18.2h15.2v-27h3.6h17.1v-9.3H63.4H45.3V303.1L45.3,303.1z M292.8,303.1h-18.2h-15.2v-27
 			h-3.6h-17.1v-9.3h35.9h18.2V303.1L292.8,303.1z M79.1,313v-36.3h179.8V313H79.1z"/>
 	</g>
-	<text transform="matrix(1 0 0 1 91.0278 305.7615)" fill="#FFFFFF" font-family="'Ubuntu'" font-size="30px">Bad Steben</text>
+    <text transform="matrix(1 0 0 1 91.0278 305.7615)" fill="#FFFFFF" font-family="'Ubuntu'"
+          font-size="30px">Bad Steben</text>
 
-		<text transform="matrix(0.7071 -0.7071 0.7071 0.7071 79.1546 175.828)" fill="#FFFFFF" font-family="'YanoneKaffeesatz-Regular'" font-size="23px">19</text>
+    <text transform="matrix(0.7071 -0.7071 0.7071 0.7071 79.1546 175.828)" fill="#FFFFFF"
+          font-family="'YanoneKaffeesatz-Regular'" font-size="23px">19</text>
 
-		<text transform="matrix(0.7071 0.7071 -0.7071 0.7071 242.7391 161.5957)" fill="#FFFFFF" font-family="'YanoneKaffeesatz-Regular'" font-size="23px">82</text>
+    <text transform="matrix(0.7071 0.7071 -0.7071 0.7071 242.7391 161.5957)" fill="#FFFFFF"
+          font-family="'YanoneKaffeesatz-Regular'" font-size="23px">82</text>
     <path id="SVGID_x5F_1_x5F_" fill="none" d="M59.4,140.4c7.9-8.5,47.2-49.5,109.1-49.7c61.6-0.2,101.1,40,109.1,48.5"/>
     <text>	<textPath xlink:href="#SVGID_x5F_1_x5F_" startOffset="3.418%">
 <tspan fill="#FFFFFF" font-family="'Ubuntu'" font-size="25px">Schachfreunde</tspan>	</textPath>
@@ -113,16 +119,20 @@
 		c16.8-5.1,28.1,4.2,33.6,14.9C165.9,250.5,159.3,228.5,136,228.8z"/>
         <path fill="#1C59A6" d="M142.5,220.3c-20.7-7.8-35.3,3.2-28.5,7.6c6.8,4.4,36.4-16.4,53.3,21.4
 		C167.4,249.3,163.2,228.1,142.5,220.3z"/>
-	<path fill="#1C59A6" d="M156.7,218.6c-10.2-11-18.8-10.7-18-5.4c0.7,5.4,22.2,5.9,29,31.9C167.6,245.1,166.9,229.5,156.7,218.6z"/>
+        <path fill="#1C59A6"
+              d="M156.7,218.6c-10.2-11-18.8-10.7-18-5.4c0.7,5.4,22.2,5.9,29,31.9C167.6,245.1,166.9,229.5,156.7,218.6z"/>
         <path fill="#1C59A6" d="M191.4,238c0,0,16.5-3.2,24.3,9.7c7.8,12.9-2.4,25.5-7.4,23.5c-5-2,4.5-6.1,4.8-16.1
 		C213.5,245.1,206.1,238.1,191.4,238z"/>
         <path fill="#1C59A6" d="M172.5,250.5c5.5-10.6,16.8-20,33.6-14.9c16.8,5.1,17.5,19.7,17,25.6c-0.5,5.9,10.5,5.6,11.5-4.6
 		c1-10.2-8.8-27.5-32.1-27.8C179.1,228.5,172.5,250.5,172.5,250.5z"/>
-	<path fill="#1C59A6" d="M171,249.3c17-37.8,46.5-17.1,53.3-21.4c6.8-4.4-7.8-15.3-28.5-7.6C175.2,228.1,171,249.3,171,249.3z"/>
+        <path fill="#1C59A6"
-	<path fill="#1C59A6" d="M170.8,245.1c6.8-26,28.3-26.6,29-31.9c0.7-5.4-7.8-5.6-18,5.4C171.5,229.5,170.8,245.1,170.8,245.1z"/>
+              d="M171,249.3c17-37.8,46.5-17.1,53.3-21.4c6.8-4.4-7.8-15.3-28.5-7.6C175.2,228.1,171,249.3,171,249.3z"/>
+        <path fill="#1C59A6"
+              d="M170.8,245.1c6.8-26,28.3-26.6,29-31.9c0.7-5.4-7.8-5.6-18,5.4C171.5,229.5,170.8,245.1,170.8,245.1z"/>
         <path fill="#1C59A6" d="M173.5,211.7c-12.9-8-20.5-3.4-20.5-3.4c16.1,13.6,16.1,42.6,16.1,42.6c2-35.5,15.3-42.9,15.3-42.9
 		C178.1,207.8,173.5,211.7,173.5,211.7z"/>
-	<path fill="#1C59A6" d="M173.5,210.5c0,0,0.9-7.2,6.3-9.1c5.5-1.9,5.7,2.9,3.2,3.4C180.4,205.2,176.9,205.5,173.5,210.5z"/>
+        <path fill="#1C59A6"
+              d="M173.5,210.5c0,0,0.9-7.2,6.3-9.1c5.5-1.9,5.7,2.9,3.2,3.4C180.4,205.2,176.9,205.5,173.5,210.5z"/>
 </g>
     <path fill-rule="evenodd" clip-rule="evenodd" fill="#0D0D0D" d="M204.3,59.2c3.7-11.1,9.7-23.3,17.4-32.4
 	c-6.4,0.8-13.8,3.2-18.6,7.7c6.4,8.6-3.5,15.3-15.9,13.3c-13.3-2.1-21.7-11.1-6.5-18.2c-2.5-7.5-6.6-13.7-11.3-19.8

index.php

@@ -4,6 +4,6 @@ require 'vendor/autoload.php';
 
     echo (new Kirby([
         'roots' => [
-    'index' => __DIR__
+            'index' => __DIR__,
-  ]
+        ],
     ]))->render();

package.json

@@ -2,12 +2,10 @@
   "name": "kirby-composer",
   "version": "1.0.0",
   "description": "Kirby Composer Template",
-
   "dependencies": {
     "@tailwindcss/cli": "^4.1.10",
     "tailwindcss": "^4.1.10"
   },
-
   "scripts": {
     "watch": "npx @tailwindcss/cli -i ./src/css/input.css -o ./assets/css/styles.css --content './site/**/*.php' --watch",
     "build": "npx @tailwindcss/cli -i ./src/css/input.css -o ./assets/css/styles.css --content './site/**/*.php'"

site/snippets/hero.php

@@ -17,7 +17,8 @@
                 <div class="prose prose-invert">
                     <h2 class="text-4xl font-bold text-sf_blau-500 mb-6"><?= $page->title() ?></h2>
                     <p class="text-lg text-white">
-                        Ihr Text kommt hier. Lorem ipsum dolor sit amet, consectetur
+                        Ihr Text kommt hier. Lorem ipsum dolor sit amet,
+                        consectetur
                         adipiscing elit.
                     </p>
                 </div>

site/templates/default.php

@@ -24,8 +24,6 @@
 <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
 <?php snippet('navbar') ?>
 
-<?php snippet('hero') ?>
-
 <?= js('assets/js/navbar.js') ?>
 </body>