chore: complete update

resources/css/STRUCTURE.md

@@ -0,0 +1,42 @@
+# CSS-Framework Struktur
+
+## Layer-Hierarchie
+1. reset
+2. base
+3. layout
+4. components
+5. utilities
+6. overrides
+
+## Benennungskonventionen
+- Dateinamen: kebab-case
+- Klassen: BEM oder Utility-First? (optional notieren)
+
+
+css/
+├── styles.css                    # Haupt-Importdatei
+├── settings/
+│   ├── colors.css               # Farbdefinitionen
+│   ├── typography.css           # Schriftgrößen, Fonts
+│   ├── spacing.css              # Abstände (margin, padding)
+│   └── variables.css            # Dauer, Easing, Radius, Z-Index etc.
+├── base/
+│   ├── reset.css                # Reset/Normalize
+│   ├── global.css               # globale Stile für html, body, etc.
+│   └── typography.css           # h1, p, etc.
+├── components/
+│   ├── header.css
+│   ├── nav.css
+│   ├── footer.css
+│   └── buttons.css
+├── layout/
+│   ├── container.css            # .page-container, max-widths, etc.
+│   └── grid.css                 # evtl. eigenes Grid-System
+├── utilities/
+│   ├── animations.css           # .fade-in, .shake, usw.
+│   ├── helpers.css              # .skip-link, .hidden, .visually-hidden
+│   └── scroll.css               # scroll-behavior, scrollbar-style
+├── forms/
+│   └── inputs.css
+└── themes/
+    └── dark.css                 # Farbanpassungen für Dark-Mode (optional)

resources/css/base/focus.css

@@ -0,0 +1,31 @@
+:focus-visible {
+    --outline-size: max(2px, 0.1em);
+
+    outline:
+        var(--outline-width, var(--outline-size))
+        var(--outline-style, solid)
+        var(--outline-color, currentColor);
+
+    outline-offset: var(--outline-offset, var(--outline-size));
+
+    border-radius: 0.25em;
+}
+
+:where(:not(:active):focus-visible) {
+    outline-offset: 5px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    :where(:focus-visible) {
+        transition: outline-offset .2s ease;
+    }
+    :where(:not(:active):focus-visible) {
+        transition-duration: .25s;
+    }
+}
+
+/* Scroll margin allowance below focused elements
+  to ensure they are clearly in view */
+:focus {
+    scroll-padding-block-end: 8vh;
+}

resources/css/base/global.css

@@ -0,0 +1,147 @@
+:root {
+    --container-width: min(90vw, 2000px);
+    --content-padding: clamp(1rem, 4vw, 3rem);
+    --header-height: 80px;
+
+}
+
+html {
+    background-color: var(--bg);
+}
+
+body {
+    color: var(--text);
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+
+    --outline-color: var(--accent);
+}
+
+body>header {
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border-block-end: 1px solid var(--accent);
+
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+
+    &>div{
+        width: var(--container-width);
+        margin: 0 auto;
+        padding: 0 var(--content-padding);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+body>main {
+    flex: 1;
+    padding-top: 2rem;
+}
+
+body>footer {
+    margin-top: auto;
+}
+
+main>section {
+    width: var(--container-width);
+    margin: 0 auto;
+    padding: 4rem var(--content-padding);
+}
+
+section>.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin: 0 auto;
+    /*margin-top: 3rem;*/
+}
+
+
+
+@media(prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
+}
+
+
+/* somehow does not work! */
+@media(prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
+}
+
+a {
+    --selection-text-decoration: underline;
+    --link-color: var(--accent);
+
+    --_color: var(--link-color, rgba(255, 255, 255, 0.5));
+    --_underline-color: var(--underline-color, currentColor);
+    --_thickness: 2px;
+    --_offset: 0.05em;
+    --_hover-color: oklch(from var(--link-color) 80% c h);
+
+    color: var(--_color);
+
+    text-decoration-line: var(--selection-text-decoration);
+    text-decoration-color: var(--_underline-color);
+    text-decoration-thickness: var(--_thickness);
+    text-underline-offset: var(--_offset);
+
+    padding: max(0.25rem, 0.1em) 0;
+
+    display: inline-block;
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition:
+            color 0.15s ease-in-out,
+            text-decoration 0.15s,
+            transform 0.1s ease-in-out;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+    @media (forced-colors: active) {
+        forced-color-adjust: none;
+        color: LinkText;
+        text-decoration-color: LinkText;
+    }
+
+    &:hover,
+    &:focus-visible {
+        --_color: var(--_hover-color);
+
+        --_underline-color: rgba(255, 255, 255, 0.5);
+
+        /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+
+        transform: translateY(-1px);*/
+    }
+
+    &:active {
+        --_color: oklch(from var(--link-color) 75% c h);
+
+        /*transform: translateY(1px);*/
+    }
+}
+
+/* Inline Link */
+p > a {
+    text-decoration: underline;
+    border:none;
+
+    /*&::after {
+        content: ' ↗';
+    }*/
+}

resources/css/base/index.css

@@ -0,0 +1,4 @@
+@import "focus.css";
+@import "global.css";
+@import "media.css";
+@import "typography.css";

resources/css/base/media.css

@@ -0,0 +1,5 @@
+:where(img, video) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}

resources/css/base/reset.css

@@ -0,0 +1,34 @@
+/* alle Elemente inklusive Pseudoelemente mit border-box rechnen lassen */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+:where(html, body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol) {
+    margin: 0;
+    padding: 0;
+}
+
+:where(table) {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+:where(article, aside, footer, header, nav, section, main) {
+    display: block;
+}
+
+[popover] {
+    /* CSSWG Issue #10258 */
+    inset: auto;
+}
+
+/* @link: https://moderncss.dev/12-modern-css-one-line-upgrades/#scroll-margin-topbottom */
+:where([id]) {
+    scroll-margin-block-start: 2rem;
+}
+
+/* Vererbung für SVG-Icons */
+svg {
+    fill: currentColor;
+    stroke: none;
+}

resources/css/base/typography.css

@@ -0,0 +1,108 @@
+html {
+    font-size: 100%;
+
+    font-family: 'Roboto', sans-serif;
+
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    line-height: 1.5;
+    font-size: clamp(1.125rem, 4cqi, 1.5rem);
+}
+
+section {
+    container-type: inline-size;
+}
+
+/* trims of empty pixels above and below fonts */
+:is(h1, h2, h3, h4, h5, h6, p, button) {
+    text-box: trim-both cap alphabetic;
+}
+
+p,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+    padding-block: 1.5rem;
+
+    hyphens: auto;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: clamp(2rem, 6cqi, 6rem);
+    font-weight: 700;
+
+    line-height: 1.125;
+
+    max-inline-size: 25ch;
+
+    text-transform: uppercase;
+}
+
+h2 {
+    text-transform: uppercase;
+
+    font-size: 3.5rem;
+    font-weight: 700;
+    line-height: 1.65;
+    max-inline-size: 30ch;
+}
+
+h3 {
+    font-size: 2rem;
+    --selection-bg-color: rgba(0, 0, 255, 0.3);
+    --selection-text-color: #d8cc48;
+}
+
+h4 {
+    font-size: clamp(3rem, 4vw + 0.5rem, 4rem);
+    font-weight: 700;
+
+    max-inline-size: 25ch;
+
+}
+
+h5 {
+    font-size: 1.75rem;
+
+}
+
+h6 {
+    font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
+}
+
+
+p {
+    text-wrap: pretty;
+
+    line-height: 1.2;
+
+    font-weight: 500;
+    letter-spacing: -0.03em;
+
+    /* max 75ch */
+    max-inline-size: 65ch;
+}
+
+blockquote {
+    text-transform: uppercase;
+
+    &::before {
+        content: '\201C';
+    }
+
+    &::after {
+        content: '\201D';
+    }
+}

resources/css/components/buttons.css

@@ -0,0 +1,99 @@
+:where(button, input):where(:not(:active)):focus-visible {
+    outline-offset: 5px;
+}
+
+/* All buttons */
+:where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="file"]
+),
+/* ::file-selector-button does not work inside of :where() */
+:where(input[type="file"])::file-selector-button {
+    --_color: var(--color, var(--accent));
+
+    background-color: var(--_color);
+    color: black;
+
+    border: 2px solid var(--_color);
+
+    font: inherit;
+    letter-spacing: inherit;
+    line-height: 1.5;
+
+    border-radius: 1rem;
+    padding: 0.5em;
+
+    font-weight: 700;
+
+    object-fit: contain;
+
+    /*display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1ch;*/
+
+    cursor: pointer;
+    transition: all 0.2s ease-out;
+
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+
+    &:is(:hover, :focus-visible) {
+        --_hoverColor: oklch(from var(--color, var(--accent)) 40% c h);
+        --_color: var(--hoverColor, var(--_hoverColor));
+    }
+
+    &.secondary {
+        --color: lightgreen;
+        /*--hoverColor: lawngreen;*/
+    }
+
+    &.outline {
+        background: transparent;
+        color: var(--_color);
+    }
+}
+
+/* on hover but not active */
+:where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]):where(:not(:active):hover
+) {
+
+}
+
+:where([type="reset"]) {
+    color: red;
+}
+
+:where([type="reset"]:focus-visible) {
+    outline-color: currentColor;
+}
+
+
+:where(button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"]
+)[disabled] {
+
+    cursor: not-allowed;
+}
+
+:where(input[type="file"]) {
+    inline-size: 100%;
+    max-inline-size: max-content;
+}
+
+:where(input[type="button"]),
+:where(input[type="file"])::file-selector-button {
+    appearance: none;
+}

resources/css/components/card.css

@@ -0,0 +1,202 @@
+.card {
+    --_bg: var(--card-bg, var(--bg-alt));
+    --_border: var(--card-border, var(--border));
+    --_accent: var(--card-accent, var(--accent));
+
+    background-color: var(--_bg);
+    border: 1px solid var(--_border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    transition: all 0.2s ease;
+    container-type: inline-size;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    border-color: var(--_accent);
+}
+
+/* Strukturelle Elemente mit Selektoren */
+.card > header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.card > main {
+    flex: 1;
+    margin-bottom: var(--space-md);
+}
+
+.card > footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--space-sm);
+    border-top: 1px solid var(--_border);
+}
+
+/* Typografie mit Selektoren */
+.card h1,
+.card h2,
+.card h3 {
+    margin: 0;
+    color: var(--_accent);
+}
+
+.card h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.card p {
+    margin: 0 0 var(--space-sm) 0;
+    color: var(--text);
+}
+
+.card small {
+    color: oklch(70% 0.01 var(--h-bg));
+}
+
+/* Button-Gruppen mit Selektoren */
+.card footer > div {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.card button {
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--_accent);
+    background: transparent;
+    color: var(--_accent);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.card button:first-child {
+    background-color: var(--_accent);
+    color: var(--bg);
+}
+
+.card button:hover {
+    background-color: var(--_accent);
+    color: var(--bg);
+}
+
+
+/*
+        ======================
+        VARIANTEN MIT KLASSEN
+        ======================
+        */
+
+/* Status-Varianten */
+.card--success {
+    --card-bg: var(--success-subtle);
+    --card-border: var(--success-border);
+    --card-accent: var(--success);
+}
+
+.card--error {
+    --card-bg: var(--error-subtle);
+    --card-border: var(--error-border);
+    --card-accent: var(--error);
+}
+
+/* Größen-Varianten */
+.card--compact {
+    padding: var(--space-md);
+}
+
+.card--compact > * {
+    margin-bottom: var(--space-sm);
+}
+
+.card--spacious {
+    padding: calc(var(--space-lg) * 1.5);
+}
+
+/* Layout-Varianten */
+.card--horizontal {
+    display: flex;
+    align-items: center;
+}
+
+.card--horizontal > header,
+.card--horizontal > main {
+    margin-bottom: 0;
+    margin-right: var(--space-lg);
+}
+
+/* Media-Variante */
+.card--media img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-md);
+}
+
+
+/*
+======================
+RESPONSIVE MIT CONTAINER QUERIES
+======================
+*/
+
+/* Automatische Anpassung basierend auf Card-Größe */
+@container (max-width: 300px) {
+    .card > header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .card > footer {
+        flex-direction: column;
+        gap: var(--space-sm);
+        align-items: flex-start;
+    }
+}
+
+/* Demo-Styles */
+.demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-lg);
+}
+
+.demo-grid--wide {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+h1 {
+    /*text-align: center;*/
+    background: linear-gradient(45deg, var(--accent), var(--success));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.section {
+    margin: 3rem 0;
+}
+
+.section h2 {
+    color: var(--accent);
+    margin-bottom: var(--space-lg);
+}
+
+/* Badge mit semantischem Selector */
+.card [role="status"] {
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-md);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    background-color: var(--_accent);
+    color: var(--bg);
+}

resources/css/components/footer.css

@@ -0,0 +1,36 @@
+footer {
+    text-align: center;
+    padding-block: 1.5rem;
+
+    a {
+        --link-color: var(--muted);
+        font-size: 1.25rem;
+        font-weight: 400;
+        font-family: 'Roboto', sans-serif;
+    }
+}
+
+footer > p {
+    display: block;
+    margin-inline: auto;
+
+    letter-spacing: -0.01em;
+    font-size: 1rem;
+    color: var(--muted);
+}
+
+.footer-nav {
+    display: flex;
+    justify-content: center;
+    gap: 2rem; /* Abstand zwischen Links */
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0 0; /* leichter Abstand nach dem Text */
+}
+
+@media (max-width: 500px) {
+    .footer-nav {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}

resources/css/components/header.css

@@ -0,0 +1,50 @@
+main > .header {
+    position: fixed;
+    width: 100%;
+    z-index: 4000;
+}
+
+main > .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3rem; /* Optional: Abstand innen */
+
+    padding-inline: clamp(1.5rem, 4vw + 1rem, 3rem);
+
+    user-select: none;
+
+    a {
+        text-decoration: none;
+        color: #eee;
+        font-size: 2rem;
+        font-weight: 700;
+        font-family: 'Roboto', sans-serif;
+
+        transition: all 0.2s ease-in;
+
+        &:hover {
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        appearance: none;
+        font-size: 2rem;
+        font-weight: 700;
+
+        z-index: 9999;
+
+
+        &:hover {
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+    }
+}

resources/css/components/nav.css

@@ -0,0 +1,3 @@
+:root{
+
+}

resources/css/components/sidebar.css

@@ -0,0 +1,119 @@
+body:has(aside.show) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+}
+
+aside {
+    --sidebar-width: min(50ch, 100vw);
+
+    position: absolute;
+    z-index: 3000;
+
+    visibility: hidden;
+
+    background-color: #2c1c59;
+    color: #fff;
+    padding: 3rem;
+    border: none;
+
+    /*position: fixed;*/
+    /*position: sticky;*/
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: calc(100vw - var(--sidebar-width));
+    width: var(--sidebar-width);
+    height: 100vh;
+
+    transition: opacity 0.25s, translate 0.25s, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
+
+    opacity: 0;
+    translate: 100% 0;
+
+    &.show {
+        visibility: visible;
+
+        opacity: 1;
+        translate: 0 0;
+    }
+
+    button {
+        place-content: end;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        appearance: none;
+        font-size: 2rem;
+        font-weight: 700;
+
+        margin-inline-end: 0.5rem;
+        float: right;
+
+
+        &:hover {
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+    }
+
+}
+
+/* Backdrop */
+.backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+
+    /*cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), auto;*/
+}
+:is(aside.show) .backdrop {
+    opacity: 1;
+}
+body:has(aside.show) .backdrop {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+aside > nav > ul {
+
+    padding-block-start: 10rem;
+
+    display: flex;
+    flex-direction: column;
+
+    list-style: none;
+    gap: 3rem;
+
+    a {
+        text-decoration: none;
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 1rem;
+        /*font-size: 1.5rem;*/
+    }
+
+    @media (hover) and (prefers-reduced-motion: no-preference) {
+        & > li {
+            transition: opacity .3s ease;
+        }
+
+        &:has(:hover) > li:not(:hover) {
+            opacity: .85;
+        }
+
+        /* for keyboard support */
+        &:is(:hover, :focus-within) > li:not(:hover, :focus-within) {
+            opacity: .85;
+        }
+    }
+}
+
+.backdrop:has( ~ #sidebar a:hover,  ~ #sidebar a:focus)/*, .backdrop:has( ~ #sidebar a:focus)*/ {
+    background-color: rgba(0 0 0 / 0.1);
+}

resources/css/forms/inputs.css

@@ -0,0 +1,101 @@
+:where(button, input, optgroup, select, textarea) {
+    font: inherit;
+}
+
+textarea, select, input {
+    field-sizing: content;
+}
+
+/* defensive style - just demo values */
+textarea {
+    min-block-size: 3lh;
+    max-block-size: 80svh;
+    min-inline-size: 30ch;
+    max-inline-size: 80ch;
+    resize: vertical;
+}
+
+form {
+    display: grid;
+    gap: 1rem;
+
+    padding: 1em;
+
+    background: radial-gradient(var(--bg), var(--bg-alt)) 50%;
+
+    border-radius: 0.5em;
+    border: 1px solid var(--muted);
+}
+
+
+:where(input) {
+    font-size: inherit;
+
+    inline-size: fit-content;
+
+    min-inline-size: 25ch;
+
+    padding: 0.5rem;
+
+    border-radius: 0.25rem;
+    border: none;
+
+    color: var(--text);
+
+    &::placeholder {
+        font-style: italic;
+    }
+
+    &:required {
+
+    }
+
+    &:not(:placeholder-shown, :focus):user-invalid {
+        background-color: #300a0a;
+        color: #ffc8c8;
+    }
+}
+
+label:has(input:required)::before {
+    content: "* ";
+}
+
+label:has(input) {
+    background-color: red;
+    display: inline-flex;
+    flex-direction: column;
+    inline-size: fit-content;
+}
+
+select,
+::picker(select) {
+    appearance: base-select;
+}
+
+select {
+    padding: 0.25em;
+    inline-size: fit-content;
+
+    &::marker {
+        color: red;
+    }
+}
+
+select::picker-icon {
+    color: #999;
+    transition: 0.4s rotate;
+}
+
+select:open::picker-icon {
+    rotate: 180deg;
+}
+
+
+/* select items */
+::picker(select) {
+    appearance: base-select;
+}
+
+option:checked {
+    font-weight: bold;
+}

resources/css/layout/container.css

@@ -0,0 +1,15 @@
+.page-container {
+    /*display: flex;
+    flex: 1;
+    flex-direction: column;*/
+
+
+    padding-inline: 0; /* horizontale Abstände */
+    max-width: 100%;
+    margin-inline: auto; /* zentriert bei größerem Viewport */
+    width: 100%;
+}
+
+.page-content * {
+    padding-inline: 10rem; /* horizontale Abstände */
+}

resources/css/layout/grid.css

@@ -0,0 +1,3 @@
+* {
+
+}

resources/css/settings/colors.css

@@ -0,0 +1,101 @@
+:root {
+    /* Hue-System */
+    --h-primary: 295;    /* Ihr Violett-Rosa */
+    --h-bg: 270;         /* Ihr Hintergrund-Violett */
+    --h-success: 145;    /* Grün */
+    --h-warning: 65;     /* Orange */
+    --h-error: 25;       /* Rot */
+    --h-info: 240;       /* Blau */
+
+    /* Einheitliche Lightness-Abstufungen */
+    --l-subtle: 25%;    /* Für dezente Hintergründe */
+    --l-hover: 50%;     /* Für Hover-States */
+    --l-border: 70%;    /* Für sichtbare Rahmen */
+    --l-text: 85%;      /* Für gut lesbaren Text */
+
+    /* Chroma-System basierend auf Anwendungsfall */
+    --c-vivid: 0.18;     /* Für Hauptfarben, Buttons */
+    --c-moderate: 0.12;  /* Für UI-Elemente */
+    --c-subtle: 0.06;    /* Für Hintergründe */
+    --c-muted: 0.03;     /* Für sehr dezente Effekte */
+
+    /**
+     * 🖤 Hintergrundfarben – kein HDR nötig
+     * L: Lightness, C: Chroma, H: Hue
+     */
+    --bg: oklch(18% 0.01 270);       /* sehr dunkles Violettblau */
+    --bg-alt: oklch(26% 0.015 270);  /* leicht aufgehellt */
+
+    /**
+     * 🤍 Textfarben – hoher Kontrast
+     */
+    --text: oklch(95% 0.005 270);    /* fast weiß */
+    --muted: oklch(70% 0.01 270);    /* leichtes Grau mit Farbstich */
+
+    /**
+     * 🎨 Akzentfarbe – sichtbar, auch auf HDR
+     * oklch ist bevorzugt, da linear; P3 gibt extra Boost bei HDR-Displays
+     */
+    --accent: oklch(70% 0.2 295); /* sattes Violett-Rosa */
+    --accent-p3: color(display-p3 1 0.3 0.8); /* pink/lila – intensiver auf HDR */
+
+    /** Border */
+    --border: oklch(40% 0.02 var(--h-bg));
+
+    /**
+     * ✨ Glow-Farbe – über 100% L (= HDR-like)
+     */
+    --glow: oklch(115% 0.22 295); /* extrem helles pink, über weiß hinaus */
+
+
+    /**
+     * Semantische Farbpalette
+     */
+    --success-base: oklch(60% var(--c-vivid) var(--h-success));
+    --success: var(--success-base);
+    --success-subtle: oklch(var(--l-subtle) var(--c-muted) var(--h-success));
+    --success-hover: oklch(var(--l-hover) var(--c-vivid) var(--h-success));
+    --success-border: oklch(var(--l-border) var(--c-moderate) var(--h-success));
+    --success-text: oklch(var(--l-text) var(--c-subtle) var(--h-success));
+
+    --error-base: oklch(55% 0.18 25);
+
+
+
+
+    --warning-base: oklch(70% 0.12 65);
+
+    --info-base: oklch(60% 0.15 240);
+
+
+
+    /* Manuelle Varianten für bessere Browser-Unterstützung */
+
+    --error: var(--error-base);
+    --error-subtle: oklch(var(--l-subtle) 0.036 25);
+    --error-hover: oklch(var(--l-hover) 0.18 25);
+    --error-border: oklch(var(--l-border) 0.14 25);
+    --error-text: oklch(var(--l-text) 0.12 25);
+
+    --warning: var(--warning-base);
+    --warning-subtle: oklch(25% 0.024 65);
+    --warning-border: oklch(80% 0.096 65);
+
+    /**
+     * 🎯 Fallback für alte Browser: überschreiben P3 mit oklch automatisch
+     */
+    color-scheme: dark;
+
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+/**
+ * 🖥️ HDR-Support – bei Geräten mit Dynamic Range Support (aktuell v. a. Safari)
+ */
+/* noinspection CssInvalidMediaFeature */
+@media (dynamic-range: high) {
+    :root {
+        --accent: var(--accent-p3);
+    }
+}

resources/css/settings/variables.css

@@ -0,0 +1,9 @@
+* {
+    --color-primary: #412785;
+
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 1rem;
+}

resources/css/styles.css

@@ -1,7 +1,266 @@
-p {
-    color: red;
+@layer reset, base, layout, components, utilities, overrides;
+
+@import url('settings/colors.css') layer(settings);
+@import url('settings/variables.css') layer(settings);
+@import url('base/reset.css') layer(reset);
+@import url('base') layer(base);
+@import url('layout/container.css') layer(layout);
+@import url('components/header.css') layer(components);
+@import url('components/footer.css') layer(components);
+@import url('components/sidebar.css') layer(components);
+@import url('components/nav.css') layer(components);
+@import url('components/buttons.css') layer(components);
+@import url('components/card.css') layer(components);
+@import url('forms/inputs.css') layer(components);
+@import url('utilities/helpers.css') layer(utilities);
+@import url('utilities/animations.css') layer(utilities);
+@import url('utilities/noise.css') layer(utilities);
+@import url('utilities/scroll.css') layer(utilities);
+
+@layer overrides {
+    /* Benutzerdefinierte Styles */
+}
+
+:root {
+    overscroll-behavior: none;
+
+    accent-color: #412785;
+
+    /* thumb = brighter brand-color */
+    scrollbar-color: #5d37bc rgba(0 0 0 / 0); /* thumb + track */
+
+
+    color-scheme: dark light;
+
+    --duration-default: 0.2s;
+    --duration-medium: 0.35s;
+    --duration-slow: 0.5s;
+
+    --easing-default: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-bounce: linear(0 0%, 0 0.27%, 0.02 4,53%);
+}
+
+::selection {
+    --_selection-bg-color: var(--selection-bg-color, #ff4081);
+    --_selection-text-color: var(--selection-text-color, #fff);
+
+
+    background-color: var(--_selection-bg-color); /* Pink */
+    color: var(--_selection-text-color);
+
+    text-shadow: 0 0 0.25rem var(--_selection-text-color);
+
+    text-decoration: var(--selection-text-decoration, none);
+}
+
+::-webkit-scrollbar {
+    /*width: 0.5rem;*/
+}
+
+
+
+@media(prefers-reduced-motion: no-preference) {
+    :focus {
+        transition: outline-offset .25s ease;
+    }
+    :focus:not(:active) {
+        outline-offset: 5px;
+    }
 }
 
 html {
-    background: blue;
+    /* evtl per Mediaquery auf thin umschalten */
+    scrollbar-width: auto;
+    /*scrollbar-color: #412785 #412785;*/
+
+    /* @link: https://moderncss.dev/12-modern-css-one-line-upgrades/#scrollbar-gutter */
+    scrollbar-gutter: stable /*both-edges*/;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+
+    overflow-x: clip;
+    overscroll-behavior: contain;
+
+    /* move body back in 3d:
+    border-radius: 10px;
+    overflow: hidden;
+    scale: 95%;
+    background-color: #2c1;
+
+    * {
+        visibility: hidden;
+    }
+    */
+}
+
+
+picture {
+    user-select: none;
+}
+
+/*section,
+.page-container > * {
+    padding-inline: clamp(2.5rem, 20%, 10rem);
+}*/
+
+section.hero {
+    display: flex;
+    min-height: 100vh;
+    /*height: 100%;
+    width: 100%;*/
+    /*background-color: #412785;*/
+    background-color: var(--bg);
+    color: var(--accent);
+    padding-block-start: 10rem;
+
+    /*background-image: url("https://localhost/assets/images/hero_small.jpg");
+    background-size: cover;
+    background-position: center;*/
+
+    :where(:not(picture, img, h1)) {
+        position: relative;
+    }
+
+    flex-direction: column;
+    gap: 2ch;
+}
+
+.hero picture, .hero img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+}
+
+/* Lazy loading? */
+section {
+    content-visibility: auto;
+}
+
+
+
+h1 {
+    user-select: none;
+    padding-block-end: 3.33rem; /* front-size / 3 */
+    /*text-align: center;*/
+
+
+    text-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+
+    background: linear-gradient(
+        90deg,
+        oklch(70% 0.25 280),
+        oklch(80% 0.3 340),
+        oklch(70% 0.25 280)
+    );
+    background-size: 200% auto;
+
+    /* Für Firefox */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    background-clip: text;
+    color: transparent;
+
+    animation: shimmer 10s linear infinite;
+
+    /*animation: shimmer 4s alternate-reverse infinite;*/
+}
+
+
+
+/*@keyframes shimmer {
+    0% { opacity: 0.5; }
+    100% { opacity: 1; }
+}*/
+
+@keyframes shimmer {
+    0% { background-position: 0 center; }
+    100% { background-position: -200% center; }
+}
+
+::backdrop {
+    background-color: #412785;
+    /*opacity: 0.7;*/
+    background-color: rgba(0, 0, 0, 0.2);
+
+    filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+
+
+
+@starting-style {
+    #mypopover {
+        &:popover-open {
+            opacity: 0;
+            translate: 100% 0;
+        }
+    }
+}
+
+html:has(aside.show) {
+    /*scrollbar-width: none;*/
+}
+
+.fade-in-on-scroll {
+    opacity: 0;
+    transform: translateY(100px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+    will-change: opacity, transform;
+}
+
+.fade-in-on-scroll.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+/*body::before {
+    content: '';
+    position: fixed;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: red;
+    pointer-events: none;
+    z-index: 9999;
+}*/
+
+[aria-current="page"] {}
+
+form>div {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    border: 1px solid var(--muted);
+
+    &:has(input:user-invalid:not(:placeholder-shown, :focus)) {
+        [role="alert"] {
+            visibility: visible;
+        }
+    }
+}
+
+[role="alert"] {
+    visibility: hidden;
+    min-height: 2rem;
+    font-size: 1rem;
+
+    background-color: red;
+    border: darkred 2px solid;
+    border-radius: 0.5em;
+    padding: 0.25em;
+    color: black;
+}
+
+span[id^="hint"] {
+    color: var(--muted);
 }

resources/css/utilities/animations.css

@@ -0,0 +1,38 @@
+.fade {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.fade.entered {
+    color: #0af;
+}
+
+.fade-in    { transition: opacity 0.4s ease-out; }
+.fade-out   { transition: opacity 0.4s ease-in; }
+.zoom-in    { transition: transform 0.5s ease-out; }
+
+/* Beispielanimation */
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25%      { transform: translateX(-5px); }
+    75%      { transform: translateX(5px); }
+}
+.shake {
+    animation: shake 0.8s ease-in-out;
+}
+
+
+
+.fade-in-on-scroll,
+.zoom-in {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+    will-change: opacity, transform;
+}
+
+.visible {
+    opacity: 1;
+    transform: none;
+}

resources/css/utilities/helpers.css

@@ -0,0 +1,18 @@
+/* Set some base styles, so it is easy to see */
+.skip-link {
+    position: absolute;
+    display: inline-block;
+    padding: .375rem .75rem;
+    line-height: 1;
+    font-size: 1.25rem;
+    background-color: rebeccapurple;
+    color: white;
+    /* Ensure the Y position is set to zero and any movement on the transform property */
+    transform: translateY(0);
+    transition: transform 250ms ease-in;
+}
+
+/* When it is not focused, transform its Y position by its total height, using a negative value, so it hides above the viewport */
+.skip-link:not(:focus) {
+    transform: translateY(-2rem);
+}

resources/css/utilities/noise.css

@@ -0,0 +1,62 @@
+.noise-bg {
+    --noise-opacity: 0.15;
+
+    background-image:
+        repeating-radial-gradient(circle at 1px 1px,
+        rgba(255, 255, 255, var(--noise-opacity, 0.03)) 0,
+        rgba(0, 0, 0, var(--noise-opacity, 0.03)) 1px,
+        transparent 2px
+        );
+    background-size: 3px 3px;
+}
+
+.grain {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+
+    background-color: #000;
+    mix-blend-mode: overlay;
+    opacity: 0.5;
+
+    animation: noise 1s steps(10) infinite;
+}
+
+@keyframes noise {
+    0%  { filter: hue-rotate(0deg); }
+    100% { filter: hue-rotate(360deg); }
+}
+
+.noise-overlay {
+    --noise-intensity: 0.03;
+
+    view-transition-name: noise;
+
+
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+
+    mix-blend-mode: overlay;
+
+    background-size: cover;
+    background: url("data:image/svg+xml;utf8,\
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
+<filter id='noiseFilter'>\
+<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/>\
+</filter>\
+<rect width='100%' height='100%' filter='url(%23noiseFilter)'/>\
+</svg>") repeat, rgba(0, 0, 0, var(--noise-intensity, 0.03));
+}
+
+.noise-overlay {
+    opacity: var(--noise-opacity, 0.05);
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.noise-overlay.hidden {
+    opacity: 0;
+}

resources/css/utilities/scroll.css

@@ -0,0 +1,200 @@
+body {
+    transition: background-color 0.5s ease, color 0.5s ease;
+}
+
+/* FOR REFERENCE::
+
+body[data-active-scroll-step="1"] header {
+    opacity: 1;
+}
+
+body[data-active-scroll-step="2"] header {
+    opacity: 0.5;
+}
+
+body[data-active-scroll-step="3"] header {
+    transform: translateY(-100%);
+    transition: transform 0.3s ease;
+}*/
+
+body[data-active-scroll-step="1"] {
+    background-color: #1a1a1a;
+    color: #eee;
+}
+
+body[data-active-scroll-step="2"] {
+    background-color: #000;
+    color: #f0f0f0;
+}
+
+body[data-active-scroll-step="3"] {
+    background-color: #2c1c59;
+    color: #fff;
+}
+
+body[data-active-scroll-step="1"] {
+    /* z.B. Schriftart, Hintergrund etc. */
+    cursor: s-resize;
+}
+
+body[data-active-scroll-step="2"] {
+    background-color: #1a1a1a;
+}
+
+[data-scroll-step] {
+    opacity: 0;
+    transform: translateY(2rem);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+    will-change: opacity, transform;
+}
+
+body {
+    opacity: 1;
+}
+
+/* Aktivierte Scroll-Section */
+[data-scroll-step].active {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+[data-scroll-step].active {
+    border-left: 4px solid var(--accent-color, #6c4dff);
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+
+
+/* Basis-Stil für Sticky Steps */
+[data-sticky-step] {
+    position: sticky;
+    top: 20vh;
+    margin: 2rem 0;
+    padding: 2rem;
+    background: #1e1e1e;
+    border-radius: 0.5rem;
+    opacity: 0.4;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+[data-sticky-step].is-sticky-active {
+    opacity: 1;
+    transform: scale(1.02);
+    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.05);
+}
+
+/* Beispielhafte visuelle Steuerung per container-Datensatz */
+[data-sticky-container][data-active-sticky-step="0"] [data-sticky-step]:nth-child(1),
+[data-sticky-container][data-active-sticky-step="1"] [data-sticky-step]:nth-child(2),
+[data-sticky-container][data-active-sticky-step="2"] [data-sticky-step]:nth-child(3) {
+    border-left: 4px solid var(--accent-color, #6c4dff);
+    background: linear-gradient(to right, rgba(108, 77, 255, 0.1), transparent);
+}
+
+/* Optional: sanfte Farbübergänge */
+[data-sticky-step] {
+    transition: opacity 0.3s ease, transform 0.3s ease, background 0.4s ease;
+}
+
+/* Sticky Container zur Sicherheit sichtbar machen */
+[data-sticky-container] {
+    position: relative;
+    z-index: 0;
+
+    height: 300vh;
+    padding: 2rem;
+}
+
+
+/*
+    Scroll LOOPS
+*/
+
+.loop-container {
+    overflow: hidden;
+    position: relative;
+    height: 200px;
+}
+
+.loop-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Basisstil für scroll-loop-Elemente */
+[data-scroll-loop] {
+    will-change: transform;
+    display: inline-block;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+}
+
+/* Empfohlene Containerstruktur */
+.scroll-loop-container {
+    overflow: hidden;
+    position: relative;
+    height: 200px; /* anpassen je nach Bedarf */
+}
+
+/* Optional für automatische Verdopplung */
+.scroll-loop-container > [data-scroll-loop] {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Für Background-Loop */
+[data-scroll-type="background"] {
+    background-repeat: repeat;
+    background-size: auto 100%;
+}
+
+/* Pausieren bei Hover oder Aktivierung */
+[data-scroll-loop][data-loop-pause="true"]:hover,
+[data-scroll-loop][data-loop-pause="true"]:active {
+    animation-play-state: paused;
+}
+
+
+/*
+    SCROLL_FADE
+ */
+
+/* Optionaler Grundstil für sticky-fade Elemente */
+/* Basisstil für sticky-fade Elemente */
+[data-sticky-fade] {
+    opacity: 0;
+    transform: translateY(20px);
+    transition-property: opacity, transform;
+    transition-duration: 0.4s;
+    transition-timing-function: ease-out;
+    will-change: opacity, transform;
+    pointer-events: auto;
+}
+
+[data-sticky-fade][data-fade-distance="10"] {
+    transform: translateY(10px);
+}
+[data-sticky-fade][data-fade-distance="30"] {
+    transform: translateY(30px);
+}
+[data-sticky-fade][data-fade-distance="40"] {
+    transform: translateY(40px);
+}
+
+[data-sticky-fade][data-fade-duration="fast"] {
+    transition-duration: 0.2s;
+}
+
+[data-sticky-fade][data-fade-duration="slow"] {
+    transition-duration: 0.8s;
+}
+
+[data-sticky-fade].visible {
+    opacity: 1;
+    transform: translateY(0);
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
+    filter: brightness(1.05);
+    transition-property: opacity, transform, box-shadow;
+    transition-timing-function: ease;
+}

resources/css/utilities/transitions.css

@@ -0,0 +1,45 @@
+@view-transition {
+    navigation: auto;
+}
+
+@keyframes fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes slide-down {
+    from { transform: translateY(-2rem); opacity: 0; }
+    to   { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slide-up {
+    from { transform: translateY(2rem); opacity: 0; }
+    to   { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes blur-in {
+    from { filter: blur(10px); opacity: 0; }
+    to   { filter: blur(0); opacity: 1; }
+}
+
+/* 🎯 Transitions für benannte Bereiche */
+
+::view-transition-old(main-content),
+::view-transition-new(main-content) {
+    animation: fade 0.4s ease;
+}
+
+::view-transition-old(site-header),
+::view-transition-new(site-header) {
+    animation: slide-down 0.4s ease;
+}
+
+::view-transition-old(site-footer),
+::view-transition-new(site-footer) {
+    animation: slide-up 0.4s ease;
+}
+
+::view-transition-old(sidebar),
+::view-transition-new(sidebar) {
+    animation: blur-in 0.3s ease;
+}