/*
┌──────────────────────────────────────────────────┐
│                                                  │
│   SUPER.SO CUSTOM STYLES 423 - VERSION 5.00      |
│   REFACTORED & CLEANED BY AI ASSISTANT           │
│   DATE: 2025-11-20                               │
│                                                  │
└──────────────────────────────────────────────────┘
*/

/* --- 1. IMPORTS & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
@import url('https://unpkg.com/open-props/easings.min.css');


/* --- 2. ROOT VARIABLES --- */
:root {
    /* -- Typography -- */
    --primary-font: Dosis, Quicksand, Quicksand-fallback, Helvetica, sans-serif !important;
    --secondary-font: Dosis, Quicksand, Quicksand-fallback, Helvetica, sans-serif !important;
    --body-font-size: 1.42rem !important;
    --body-font-letterspacing: 0.123rem !important;
    --text-weight: 240 !important;
    --heading-weight: 800 !important;
    --heading1-size: calc(var(--body-font-size) * 3.42) !important;
    /* 1.875 */
    --heading2-size: calc(var(--body-font-size) * 2) !important;
    --heading3-size: calc(var(--body-font-size) * 1.25) !important;

    /* -- Colors -- */
    /* [ASSISTANT-NOTE] HSL values are great for dynamic adjustments */
    --color-primary-dark: 165, 100%, 44%;
    --color-primary-light: 313, 100%, 44%;
    --color-secundary-dark: 60, 3%, 17%;
    --color-secundary-light: 0, 0%, 98%;

    /* -- Abstracted Colors -- */
    --color-primary-100-dark: hsl(165.4deg 100% 44.31%);
    --color-primary-100-light: hsl(313.01deg 100% 44.31%);
    --color-text-default: rgba(240, 238, 239, 1) !important;
    --color-card-bg: var(--color-bg-default) !important;
    --color-card-bg-hover: #292929 !important;
    --color-backdrop-bg: rgba(0, 0, 0, 0.439);
    --color-bg-default: rgba(46, 46, 43, 1) !important;
    --color-bg-transparent: rgba(46, 46, 43, 0.103);
    --cta-background: var(--color-primary-100-dark);
    --cta-text: rgba(0, 0, 0, 1);
    --link-text: var(--color-primary-100-dark);

    /* -- Layout & Sizing -- */
    --content-xl: 1440px;
    --content-lg: 1080px;
    --content-md: 840px;
    --content-sm: 500px;
    --column-spacing: 42px !important;
    --m423-radius: 23px !important;
    --m423-width: 1440px !important;

    /* -- Paddings -- */
    --padding-mob: 20px;
    --padding-tablet: 32px;
    --padding-desktop: 120px;
    --padding-right: calc(env(safe-area-inset-right) + var(--padding-desktop));
    --padding-left: calc(env(safe-area-inset-left) + var(--padding-desktop));
    --padding-right-tablet: calc(env(safe-area-inset-right) + var(--padding-tablet));
    --padding-left-tablet: calc(env(safe-area-inset-left) + var(--padding-tablet));

    /* -- Components -- */
    --collection-card-title-size: var(--heading3-size) !important;
    --collection-card-property-size: var(--body-font-size) !important;
    --collection-card-padding: 0px;
    --collection-card-content-padding: 23px;
    --collection-card-title-padding: 0px;

    /* -- Misc & Theming -- */
    --ilu-image: invert(1);
    --cta-icon-color: invert(0);
    --blend-mode: lighten;
    --mode-potrait-d: url('https://res.cloudinary.com/assest423/image/upload/v1723626882/potraits/matze423-dd.png');
    --mode-potrait-m: url('https://res.cloudinary.com/assest423/image/upload/v1723626893/potraits/matze423-md.png');
}

html.theme-light {
    --text-weight: 240 !important;
    --color-primary: 313, 100%, 44%;
    --color-text-default: hsl(324, 15%, 13%) !important;
    --color-bg-default: hsl(0, 0%, 98%) !important;
    --color-card-bg: var(--color-bg-default) !important;
    --color-card-bg-hover: hsl(0, 0%, 99%) !important;
    --color-backdrop-bg: hsl(0, 0%, 93%);
    --color-bg-transparent: hsla(0, 0%, 98%, 0.023);
    --cta-background: var(--color-primary-100-light);
    --cta-text: hsla(0, 0%, 100%, 1);
    --link-text: var(--color-primary-100-light);
    --ilu-image: invert(0);
    --cta-icon-color: brightness(0) invert(1);
    --blend-mode: darken;
    --mode-potrait-d: url('https://res.cloudinary.com/assest423/image/upload/v1723626882/potraits/matze423-dl.png');
    --mode-potrait-m: url('https://res.cloudinary.com/assest423/image/upload/v1723626893/potraits/matze423-ml.png');
    --pill-bg-color-default: hsla(var(--color-primary-light), 0.5);
    --pill-text-color-default: hsla(var(--color-secundary-dark), 0.9);
    --menu-trigger: hsla(var(--color-primary-light), 0.23);
}

html.theme-dark {
    --text-weight: 240 !important;
    --color-primary: 165, 100%, 44%;
    --color-text-default: hsl(90, 7%, 94%) !important;
    --color-bg-default: hsl(60, 3%, 17%) !important;
    --color-card-bg: var(--color-bg-default) !important;
    --color-card-bg-hover: hsl(60, 3%, 20%) !important;
    --color-backdrop-bg: hsla(0, 0%, 0%, 0.439);
    --color-bg-transparent: hsla(60, 3%, 17%, 0.23);
    --cta-background: var(--color-primary-100-dark);
    --cta-text: hsl(0, 0%, 0%);
    --link-text: var(--color-primary-100-dark);
    --ilu-image: invert(1);
    --cta-icon-color: brightness(0) invert(0);
    --blend-mode: lighten;
    --mode-potrait-d: url('https://res.cloudinary.com/assest423/image/upload/v1723626882/potraits/matze423-dd.png');
    --mode-potrait-m: url('https://res.cloudinary.com/assest423/image/upload/v1723626893/potraits/matze423-md.png');
    --pill-bg-color-default: hsla(var(--color-primary-dark), 0.5);
    --pill-text-color-default: hsla(var(--color-secundary-light), 0.9);
    --menu-trigger: hsla(var(--color-primary-dark), 0.23);
}

/* Fallback for Apple-specific font rendering */
@supports (font: -apple-system-body) {
    html {
        font: -apple-system-body !important;
    }
}


/* --- 3. GENERAL & BODY STYLES --- */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--primary-font) !important;
    font-size: var(--body-font-size);
    font-weight: var(--text-weight);
    letter-spacing: var(--body-font-letterspacing);
    color: var(--color-text-default);
    background: var(--color-bg-default);
    fill: currentColor;
    margin: 0;
    min-height: 100vh;
    /* width: 100vw; */
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

/* Lock body scroll when a modal is open */
body:is([modal="true"]) {
    height: 100vh;
    overflow-y: hidden;
}

/* General fade-in animation for major text elements */
h1,
h2,
h3,
p {
    animation: fadeIn 1s ease-in-out;
}

/* [ASSISTANT-NOTE] Specific animation durations can be overridden if needed, but a single class is cleaner. */
h1 {
    animation-duration: 4s;
}

h2 {
    animation-duration: 0.75s;
}

h3 {
    animation-duration: 1s;
}

p {
    animation-duration: 1.25s;
}


/* --- 4. TYPOGRAPHY --- */
/* text, text__content */

p {
    margin-bottom: 0.72rem !important;
    max-width: var(--content-max-desktop) !important;
}

.notion-text {
    min-height: 2rem;
    line-height: 142%;
}

.notion-text__content {
    margin: 0 auto;
    padding-bottom: 1rem;
}

.notion-text__content:has(+.notion-text__children) {
    padding-bottom: 1rem;
}

.notion-text__content:has(+ .notion-image) {
    min-height: 5rem;
}

.notion-semantic-string {
    /* line-height: 142% !important; */
    /* white-space: normal; */
    /* word-break: normal; */
}

.gallery .notion-collection-card__property.notion-semantic-string {
    font-size: var(--body-font-size);
    line-height: 123%;
}

.notion-text:empty {
    min-height: var(--body-font-size);
}

/* --- Headings (H1, H2, H3) --- */
.notion-heading.notion-semantic-string {
    font-family: "Dosis", var(--primary-font) !important;
    font-optical-sizing: auto;
    /* line-height: 1.23em !important; */
}

h1 {
    font-size: var(--heading1-size) !important;
    font-weight: 723 !important;
    letter-spacing: 0em !important;
    line-height: 108% !important;
    margin-bottom: 2rem !important;
}

h2 {
    font-size: calc(var(--heading2-size)*1.18) !important;
    font-weight: 700 !important;
    letter-spacing: 0.0423rem !important;
    line-height: 109% !important;
    margin-top: -.6rem !important;
    margin-bottom: 2rem !important;
}

h2.notion-heading.notion-semantic-string {
    margin-bottom: 2rem !important;
}

h3 {
    font-size: var(--heading3-size) !important;
    font-weight: 600 !important;
    letter-spacing: 0.0123em !important;
    margin-top: 1rem !important;
    margin-bottom: .6rem !important;
}

/* Headings with specific colors */

.notion-callout.bg-gray-light+span+h3 {
    text-align: center;
}



/* --- Headline Special Effects --- */

/* --- Animated Headline --- */
/* This complex selector targets the specific green, bolded H1 for the special effect. */
h1.notion-heading.color-green.notion-semantic-string strong {
    mix-blend-mode: var(--blend-mode) !important;
    color: transparent !important;
    font-size: 9rem !important;
    font-weight: 900;
    line-height: 59% !important;
    letter-spacing: -.023em !important;
    hyphens: auto;
    background: radial-gradient(circle at 50%, var(--cta-background) 10%, var(--color-bg-transparent) 42%, var(--color-bg-transparent) 60%, var(--cta-background) 100%);
    background-clip: text;
    background-size: 200% auto;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-stroke: var(--link-text) .42px;
    animation: animatedHeadline 42.3s ease-in-out infinite alternate;
}

@keyframes animatedHeadline {
    to {
        background-position: 180% center;
    }
}

/* Sub-headline styles appearing after the main H1 */
h1.notion-heading.color-green+.notion-text {
    margin-top: 2rem !important;
    color: var(--link-text);
}


/* --- Headline Companions (Sub-titles) --- */
/* Styles for paragraphs that act as subtitles for H2s and H3s */

.notion-text:has(h2)>p.notion-text__content,
.notion-text__content:has(+ .notion-heading__anchor + h2) {
    font-size: calc(var(--heading2-size) - .023rem) !important;
    line-height: 123% !important;
    padding-bottom: .6rem !important;
    color: var(--link-text);
}

/* Nicht mehr verwendet - löschen? 
.notion-text:has(h3)>p.notion-text__content,
.notion-text__content:has(+ .notion-heading__anchor + h3) {
    font-size: calc(var(--heading3-size) - .023rem) !important;
    padding-bottom: 0rem !important;
    color: var(--link-text);
}
*/

/* --- Links & Highlights --- */

.notion-semantic-string .link {
    color: var(--link-text);
    text-decoration-color: var(--link-text);
    text-decoration-thickness: 1.42px;
    text-underline-offset: 8px;
    opacity: .8;
    transition: all .2s ease-in, opacity .1s ease-in;
}

span.highlighted-color.color-green {
    color: var(--link-text);
}

span.highlighted-color.color-yellow {
    font-size: 1rem;
    color: var(--color-text-default);
    padding-left: 24px;
}

/* --- 6. Colors --- */


.notion-text.bg-red,
.notion-text.bg-green,
.notion-text.bg-blue,
.notion-text.bg-yellow,
.notion-text.bg-purple,
.notion-text.bg-gray {
    background-color: transparent;
}



/* --- 6. LAYOUT & STRUCTURE --- */

/* --- Main Content Wrappers --- */
.notion-root.max-width,
.notion-root.full-width {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    padding-bottom: 30vh;
}

.super-content {
    /* width: 80vw; */
    padding: 12vh 0 12rem 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-x: hidden;
}

.super-content.page__cases {
    max-width: 80vw;
    margin: auto
}

/* --- Content Centering --- */
/* This group ensures standard content blocks are centered and have a max-width. */

.notion-text.notion-text__content,
.notion-heading.notion-semantic-string,
.notion-text__content.notion-semantic-string,
.notion-bulleted-list,
.notion-numbered-list,
.notion-toggle,
.notion-quote,
.notion-code {
    display: block;
    width: 100%;
    max-width: var(--content-md) !important;
    padding: 0 var(--m423-radius);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Resets */
.notion-callout.color-default p {
    margin: 0;
    padding: 0;
}

.notion-text__children {

    margin-inline-start: 0;
}

/* --- Header & Footer --- */

.notion-header {
    display: none !important;
}

.super-embed:has(.next-footer)+.notion-column-list {
    width: 100%;
}

.notion-text.bg-gray .notion-column-list a.notion-link {
    display: block;
    margin: 0.68rem 0 !important;
}

/* --- Background Portrait --- */
.my_background_portrait {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: calc(100% - 80);
    width: 100vw;
    height: 100vh;
    opacity: 0.9;
    background-image: var(--mode-potrait-d);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position-x: right;
    z-index: -1;
}


/* --- 6. COMPONENTS --- */

/* --- Buttons (Notion CTA) --- */

.notion-button {
    width: var(--content-md);
    margin: 1rem auto;
    padding-left: var(--m423-radius);
}

/* Primary */

.notion-button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--m423-radius) / 2);
    border-radius: calc(var(--m423-radius) / 2);
    padding: calc(var(--m423-radius) / 2);
    font-weight: 600;
    color: var(--cta-text) !important;
    background-color: var(--cta-background);
    border: 0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    transition: background 20ms ease-in;
}

/* Secondary */

.notion-button__content.bg-gray-light {
    background-color: var(--color-text-default);
    color: var(--cta-text) !important;
}

.notion-button__content.bg-gray-light:hover {
    background-color: var(--color-text-default);
}



.notion-button__content:hover {
    background: var(--cta-background);
}

.notion-button__icon .notion-icon {
    display: block;
    width: 24px;
    height: 24px;
    filter: var(--cta-icon-color);
}

/* --- Blockquotes --- */

blockquote,
.notion-quote {
    margin: 2rem auto !important;
    padding: 0 0 0 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: calc(var(--content-md) - 3rem) !important;
    font-size: var(--heading3-size);
    font-weight: 200;
    text-align: left !important;
    color: var(--link-text);
    position: relative;
}

/* Resetting background colors on quotes */
.notion-quote.bg-gray,
.notion-quote.bg-brown,
.notion-quote.bg-orange,
.notion-quote.bg-yellow,
.notion-quote.bg-green,
.notion-quote.bg-blue,
.notion-quote.bg-purple,
.notion-quote.bg-pink,
.notion-quote.bg-red {
    border: none !important;
}

.notion-quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.6px;
    height: 100%;
    background-color: var(--link-text);
    border-radius: 0.8px;
}

.notion-quote em {
    font-size: 1.2rem;
}

/* --- Galleries (Notion Collections) --- */

.notion-collection.inline {
    display: block !important;
    width: calc(100% - var(--m423-radius) * 4) !important;
    max-width: calc(var(--content-xl) - var(--m423-radius)*4) !important;
    margin: auto;
}

.notion-text.bg-yellow {
    padding: 2rem 0;
    background-color: hsla(var(--color-primary), 0.042);
}

.notion-text.bg-yellow .notion-collection.inline {
    max-width: calc(var(--content-lg) - var(--m423-radius)*2) !important;
}

/* 

    [ASSISTANT-NOTE] This is a specific override for the inline collection
    PROJECTS Latest, Owning, Perspectives and Projects Archive.

*/


/* --- Gallery Collections --- */

.notion-collection-gallery {
    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--column-spacing) !important;
    padding: 0 !important;
    border: none !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
}

/* Gallery Sizes */
.notion-collection-gallery.small {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: min-content;
}

.notion-collection-gallery.medium {
    grid-template-columns: repeat(2, 1fr);
    width: 824px;
    margin: auto;
}

.notion-collection-gallery.large {
    grid-template-columns: repeat(2, 1fr);
}

.notion-text.bg-blue .notion-collection-gallery.large {
    grid-template-columns: repeat(3, 1fr);
}

.super-content.page__cases .notion-collection-gallery.large {
    grid-template-columns: repeat(4, 1fr);
}

/* --- Gallery Cards --- */

.notion-collection-card {
    height: fit-content;
    width: auto;
    position: relative;
    overflow: visible;
    background: transparent;
    border-radius: var(--m423-radius) !important;
    border: 0;
    box-shadow: none !important;
    transition: transform .3s ease-in-out, background .3s ease-in-out, box-shadow .3s ease-in-out !important;
    cursor: pointer;
}

.notion-collection-card:hover {
    background: transparent !important;
    transform: scale(0.92) !important;
    box-shadow: 0px 17px 23px 0px rgba(0, 0, 0, 0.05) !important;
}

.notion-collection-card a.notion-collection-card__anchor {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.notion-collection-card img {
    width: 100%;
    margin: auto;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease-in-out !important;
    z-index: 7;
}

.notion-collection-card:hover img {
    transform: scale(1.18) !important;
}

.notion-collection-card__cover.small {
    min-height: 23rem !important;
    max-height: 32rem !important;
}

.notion-collection-card__cover.medium {
    height: 23vh !important;
    max-height: 22rem !important;
}

.notion-collection-card__cover.large {
    height: 33vh !important;
    min-height: 23rem !important;
}

/* Card Content */

.notion-collection-card__content {
    position: relative;
    width: 100%;
    bottom: 0;
    margin: 0;
    border-radius: calc(var(--m423-radius));
    padding: var(--padding-mob) !important;
    background: transparent;
    z-index: 9;
}

.notion-collection-card:hover .notion-collection-card__content {
    background-color: var(--color-card-bg-hover);
}

.notion-collection-card .notion-property__title {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: var(--heading3-size) !important;
    line-height: 130% !important;
    /* other styles */
}

.notion-collection-card .notion-property__select.wrap {
    margin-top: .5rem;
}

/* --- Pills & Tags --- */
.notion-pill {
    --pill-height: 2.3rem;
    display: block;
    height: var(--pill-height) !important;
    padding: 0 calc(var(--pill-height) / 2) !important;
    border-radius: calc(var(--pill-height) / 2) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: var(--pill-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* [ASSISTANT-NOTE] Grouping all pill color resets under one rule for maintainability. */
.notion-pill.pill-default,
.notion-pill.pill-gray,
.notion-pill.pill-brown,
.notion-pill.pill-orange,
.notion-pill.pill-yellow,
.notion-pill.pill-green,
.notion-pill.pill-blue,
.notion-pill.pill-purple,
.notion-pill.pill-pink,
.notion-pill.pill-red {
    background-color: var(--pill-bg-color-default) !important;
    color: var(--pill-text-color-default) !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Collection Switch (Dropdown to Pills) --- */
/* [ASSISTANT-NOTE] This is a clever hack to restyle the dropdown filter into a horizontal pill list. */
.notion-dropdown__button {
    display: none !important;
}

.notion-collection__header-wrapper {
    align-items: start !important;
}

.notion-dropdown__menu {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    box-shadow: unset !important;
    left: auto !important;
    top: auto !important;
}

.notion-dropdown__menu-header {
    display: none !important;
}

.notion-dropdown__option-list {
    display: flex !important;
    gap: 2rem;
    margin: 2rem 0;
}

.notion-dropdown__option {
    padding: 0.42em 1em !important;
    border-radius: var(--m423-radius);
    background-color: var(--cta-background);
    color: var(--cta-text);
}

.notion-dropdown__option.active,
.notion-dropdown__option:hover {
    background-color: var(--cta-text);
    color: var(--cta-background);
}

/* --- Toggle Lists --- */

.notion-toggle__trigger_icon {
    display: none !important;
}

.notion-toggle.closed::before {
    content: "+";
}

.notion-toggle.open::before {
    content: "-";
}



.notion-toggle__content {
    padding-inline-start: 0px !important;
}

/* -- EXPANDS TOGGLE CASE SECTION (bg-blue) -- */

/* NOTION MY TOGGLES ----------------------------------------------*/

/* -- EXPANDS TOGGLE CASE SECTION (bg-blue) -- */

.notion-toggle.bg-blue {
    display: block;
    position: relative;
    min-height: 7rem;
    margin: 1rem auto 3rem auto !important;
    background-color: transparent;
    font-family: "Dosis", var(--primary-font) !important;
    font-optical-sizing: auto;
    cursor: pointer;
}

@media (max-width: 880px) {
    .notion-toggle.bg-blue {
        min-height: 7rem;
        margin: 1rem auto 3rem auto !important;
        padding: 0 20px;
        background-color: transparent;
        font-family: "Dosis", var(--primary-font) !important;
        font-optical-sizing: auto;
        cursor: pointer;
    }

}


/* NORMALIZE CONTENT */
.notion-toggle__content .notion-heading.notion-semantic-string,
.notion-toggle__content .notion-text__content.notion-semantic-string {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.notion-toggle.bg-blue.closed::before {
    content: "" !important;
}

.notion-toggle.bg-blue.open::before {
    content: "" !important;
}

.notion-toggle.closed.bg-blue .notion-toggle__summary .notion-toggle__trigger::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0rem;
    padding-bottom: 1rem;
    color: var(--cta-background);
    content: '+ read more about how we tackle the challenge';
    border-bottom: 1px var(--cta-background) solid;
}

.page__about-matze-lenz .notion-toggle.closed.bg-blue .notion-toggle__summary .notion-toggle__trigger::after {
    content: '+ read more';
}



.notion-toggle.open.bg-blue .notion-toggle__summary .notion-toggle__trigger::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0rem;
    margin: 42px auto 0 auto;
    padding-bottom: 1rem;
    color: var(--cta-background);
    content: '- Close the insights';
    border-bottom: 1px var(--cta-background) solid;
    pointer-events: none;
}

.notion-toggle .notion-toggle__summary {
    font-weight: 600 !important;
}

.notion-toggle.bg-blue .notion-toggle__summary {
    display: block;
    height: auto;
    margin: auto;
    width: 100%;
    max-width: var(--content-max-desktop);
    font-weight: 230 !important;
    padding-bottom: 4rem;
}

.page__about-matze-lenz .notion-toggle.bg-blue .notion-toggle__summary {
    padding-bottom: 0 !important;
}

.notion-toggle.bg-blue .notion-toggle__summary .notion-semantic-string strong {
    font-size: var(--heading3-size) !important;
    font-weight: 700 !important;
    line-height: 123%;

}

.notion-toggle__content {
    -webkit-padding-start: 0px !important;
    padding-inline-start: 0px !important;
}

.notion-toggle.bg-blue .notion-toggle__content {
    cursor: default;
    padding-bottom: 6rem;
}

/* Funtional Setup */

.notion-toggle.bg-blue .notion-toggle__summary .notion-toggle__trigger {
    display: block !important;
    position: absolute;
    width: auto;
}

.notion-toggle.open.bg-blue .notion-toggle__summary .notion-toggle__trigger {
    height: 100%;
    width: calc(100% - 40px);
    max-width: var(--content-max-desktop);
    margin: 0 !important;
    background: transparent;
}

.notion-toggle.closed.bg-blue .notion-toggle__summary .notion-toggle__trigger {
    width: calc(100% - 40px);
    height: 100%;
    background: linear-gradient(180deg, transparent 10%, var(--color-bg-default) 80%);
}



.notion-toggle.bg-blue .notion-toggle__summary .notion-toggle__trigger .notion-toggle__trigger_icon {
    display: none;
}

.notion-toggle__summary>span.notion-semantic-string {
    margin: 0px;
}

/* ... other complex toggle styles ... */


/* --- Callouts --- */
.notion-callout {
    width: 100%;
    margin: 0 auto 1em auto;
    padding: var(--m423-radius);
    border-radius: var(--m423-radius) !important;
    text-align: left;
}

.notion-callout__icon {
    display: none !important;
}

.notion-callout__content {
    margin-inline-start: 0px;
    padding: 12px;
}

/* Resetting background for specific callouts to allow custom styling */
.notion-callout.bg-gray-light,
.notion-callout.bg-brown-light,
.notion-callout.bg-orange-light,
.notion-callout.bg-green-light,
.notion-callout.bg-pink-light,
.notion-callout.bg-red-light {
    background-color: transparent !important;
    border: 0 !important;
}

/* Project Outline Callout 
.notion-callout.color-default {
    width: calc(100% - var(--padding-mob));
    max-width: var(--content-md) !important;
    padding: var(--m423-radius) !important;
    border: 1px solid var(--color-border-default) !important;
    font-size: 1.042rem;
}
*/

.notion-callout.color-default {
    /* width: 80%; */
    max-width: var(--content-md) !important;
    padding: 0.8rem var(--m423-radius) !important;
    border: 1px solid var(--color-border-default) !important;
    font-size: 1.042rem;
}

/* Responsiv grafix */
.notion-callout.bg-gray-light {
    width: 100%;
    max-width: var(--content-md) !important;
}

/* Disclaimer Callout */

.notion-callout.bg-yellow-light {
    max-width: calc(var(--content-md) - var(--m423-radius));
    font-size: .942rem !important;
    text-align: center;
}

/* --- Images --- */

img {
    display: block;
    margin: 0;
    padding: 0;
    animation: fadeIn 1.5s !important;
}

img:has(+ figcaption) {
    border-radius: var(--m423-radius) !important;
}

.notion-image,
.notion-image.normal {
    overflow: hidden;
    /* margin: 0; */
    position: relative;
}

.notion-image.normal {
    width: auto;
    max-width: calc(100% - var(--m423-radius)*2);
    /* margin: auto; */
}

.notion-image.page-width {
    max-width: var(--content-md);
    width: calc(100% - var(--m423-radius)*2);
    margin: 2rem auto;
}

.notion-image.algin-left {
    align-items: flex-start;
}

.notion-image.algin-right {
    align-items: flex-end;
}

.notion-image.align-center {
    align-items: center;
}

/* Hero */

/* Neu als erstest */
article>.notion-image.page-width:nth-child(1) {
    width: calc(100% - var(--m423-radius) * 4) !important;
    max-width: calc(var(--m423-width) - var(--m423-radius) * 4);
    min-width: 820px;
    margin-top: 2rem;
}

/* Alte nach Heeadline und Introtext */
article>.notion-image.page-width:nth-child(5) {
    width: calc(100% - var(--padding-desktop) * 2 - var(--m423-radius) * 2) !important;
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2);
    min-width: 820px;
    margin-top: 2rem;
}

.notion-image.page-width img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto;
}

.notion-image.normal img {
    max-width: 100%;
    border-radius: 0;
    aspect-ratio: auto;
}

.notion-image.normal img,
.notion-image.page-width img,
.notion-collection-card img {
    border-radius: var(--m423-radius) !important;
}

/* Images in columns */

.notion-column .notion-image,
.notion-column .notion-image.page-width {
    width: 100%;
    margin: 0 auto;
}

/* Images that should invert in dark/light mode */
.notion-text.bg-gray .notion-image img,
.notion-callout.bg-gray-light .notion-image img {
    filter: var(--ilu-image);
    border-radius: 0 !important;
}


/* Image / Video / Code Captions */
.notion-caption {
    width: 100%;
    padding: 6px 2px;
    color: var(--color-text-default-light);
    font-size: .875rem;
    text-align: center;
}

/* --- Videos (Embeds) --- */
/* Notion embeds are used for videos YOUTUBE*/

.super-embed:has(.iframe) {
    width: 100%;
    align-self: center;
}

/* Video Code Embeded */

.super-embed:has(> iframe) {
    width: calc(100% - var(--m423-radius) * 4);
    max-width: calc(var(--content-xl) - var(--m423-radius) * 2);
    display: flex;
    margin: 2rem auto;
    border-radius: var(--m423-radius);
    overflow: hidden;
}

iframe[title="YouTube video player"] {
    width: var(--content-xl);
    height: auto;
    aspect-ratio: 16/9;
    margin: auto;
}

/* Notion embed Video z.b. youtube */

.notion-embed {
    width: 100%;
    max-width: var(--content-lg);
    align-self: center;
}

.notion-embed__container>iframe[title="www.youtube.com"] {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: auto;
    margin: auto !important;
}

.notion-embed__content {
    display: flex;
    justify-content: center;
    border-radius: var(--m423-radius) !important;
    overflow: hidden !important;
}

.notion-embed__container__wrapper {
    padding-bottom: 56.123% !important;
    width: var(--content-lg);
    max-height: calc(var(--content-lg) / 16 * 9);
    border-radius: var(--m423-radius);
    overflow: hidden;
}

span.notion-embed__container,
span.notion-embed__container__external_object {
    display: block;
    position: absolute;
    width: 100% !important;
}



/* Responsive SVGs */

.super-embed:has(> svg.svg-embed-center) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
}

/* Mobile Video Content SUPER-EMEBED: */

.my-video-content {
    display: block;
    width: calc(100% - var(--padding-mob));
    max-width: var(--content-lg);
    margin: auto;
    border-radius: var(--m423-radius);
}

/* --- Column-List --- */
/* List, Column */



.notion-column-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--content-md);
    margin: 2rem auto;
    justify-content: space-between;
}

article>.notion-column-list:nth-child(2) {
    width: calc(100% - var(--m423-radius) * 4);
    max-width: calc(var(--m423-width) - var(--m423-radius) * 4);

}

article>.notion-column-list:nth-child(2)>.notion-column:nth-child(1) {
    width: calc((100% - var(--column-spacing) * 1) * 0.3) !important;
}

article>.notion-column-list:nth-child(2)>.notion-column:nth-child(2) {
    width: calc((100% - var(--column-spacing) * 1) * 0.7) !important;
}

.notion-column {
    padding: 0;
}

.notion-column-list>.notion-column:nth-of-type(4) {
    width: 155px !important;
}

/* columns with defined Widths */

.notion-text.bg-red {
    display: none
}

.notion-text.bg-pink {
    display: none
}

.notion-text.bg-red+.notion-column-list {
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2) !important;
}

.notion-text.bg-pink+.notion-column-list {
    max-width: calc(var(--content-lg) - var(--m423-radius) * 2) !important;
}



/* --- Lists (Bulleted & Numbered) --- */

.notion-bulleted-list {
    max-width: calc(var(--content-md) - var(--m423-radius) * 2) !important;
    margin: auto !important;
    line-height: 1.5em;
    list-style-type: disc;
}

ol.notion-numbered-list {
    list-style: none;
    width: var(--content-max-desktop);
    margin: 1rem auto !important;
    padding: 0 var(--m423-radius);
    counter-reset: item;
}

ol li {
    position: relative;
    counter-increment: item;
    padding: 0px;
    margin: 1rem 0 1rem 4rem !important;
}

ol li::before {
    --circle: 3rem;
    position: relative;
    content: counter(item) ".";
    left: calc(-4rem);
    margin-right: -3rem;
    background: var(--color-text-default);
    border-radius: 100%;
    color: var(--color-bg-default);
    width: var(--circle);
    height: var(--circle);
    text-align: center;
    line-height: 3rem;
    font-weight: 600;
    display: inline-block;
}

.notion-list-item {
    margin: 1rem 0;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* --- Divider --- */
.notion-divider {
    margin: 4rem 0 !important;
    border: 0 !important;
}

.notion-image+.notion-divider {
    margin: 3rem 0 !important;
}

/* --- Table of Contents --- */
.notion-table-of-contents {
    padding: 1rem !important;
    font-size: var(--body-font-size) !important;
    margin: 4rem auto !important;
    border-radius: var(--m423-radius) !important;
    border: 1px solid var(--color-border-default) !important;
    width: 800px;
    z-index: 19 !important;
}

.notion-table-of-contents__item:hover {
    background: none !important;
    opacity: 0.5 !important;
}


/* --- 7. NAVIGATION --- */

/* Hide original navbar */
.super-navbar {
    display: none;
}

/* Custom Navbar */
/* [ASSISTANT-NOTE] This is a custom navbar that replaces the default one */

/* --- Main Navbar Container --- */
.my-super-navbar {
    width: 100%;
    display: block;
    position: fixed;
    top: 1em;
    left: 0px;
    z-index: 423;
    margin: 1em 0 !important;
    /* padding: 0 var(--padding-left) !important; */
}

/* --- Content Wrapper: Manages width, centering, and appearance --- */
.my-super-navbar__content {
    width: calc(100% - var(--m423-radius) * 2);
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2);
    margin: auto;
    display: grid;
    /* [Logo/Spacer] [Menu Items] [Theme-Toggle/Spacer] */
    grid-template-columns: 1fr 20fr 1fr;
    align-items: center;
    border-radius: var(--m423-radius) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* --- Navbar Content --- */

/* --- Logo / Home Button --- */
.mylogo {
    display: flex;
    /* Use flex to center the icon inside */
    justify-content: center;
    align-items: center;
    padding: 0 0.75em;
    height: 100%;
    position: relative;
    /* NEW: Added for touch feedback */
    z-index: 1;
}

/* --- Navigation Links List --- */
.my-super-navbar__item-list {
    display: flex;
    align-items: center;
    justify-content: center;
    /* FIXED: Ensures items are centered in their grid area */
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.super-navbar__item {
    color: var(--color-text-default) !important;
    font-weight: 500;
    padding: 0px 20px;
    user-select: none;
    white-space: nowrap;
    opacity: .7;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s ease-in-out;
}

.super-navbar__item:hover {
    opacity: 1;
}

/* Burger menu is hidden on desktop */
.my-menuburger {
    display: none;
}

li.my-contacts {
    display: none;
}

/* --- Actions Container (Right side) --- */
.my-super-navbar__actions {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 100%;
    justify-content: end;
}

/* --- Theme Toggle Switch DARK / LIGHT MODE--- */
.theme-toggle {
    --size: 28px;
    background: none;
    border: none;
    padding: 0;
    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Prevents flash on touch */
    outline-offset: 5px;
    position: relative;
    /* NEW: Added for touch feedback */
}

svg.sun-and-moon {
    position: absolute;
    top: 2px;
    left: 2px;
}

.sun-and-moon> :is(.moon, .sun, .sun-beams) {
    transform-origin: center center;
}

.sun-and-moon> :is(.moon, .sun) {
    fill: var(--color-text-default);
}

.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon> :is(.moon, .sun) {
    fill: var(--color-text-default);
}

.sun-and-moon>.sun-beams {
    stroke: var(--color-text-default);
    stroke-width: 2px;
    stroke-linecap: round;
}

/* Dark Mode States */
html.theme-dark .sun-and-moon>.sun {
    transform: scale(1.75);
}

html.theme-dark .sun-and-moon>.sun-beams {
    opacity: 0;
}

html.theme-dark .sun-and-moon>.moon>circle {
    transform: translateX(-7px);
}

@supports (cx: 1) {
    html.theme-dark .sun-and-moon>.moon>circle {
        transform: translateX(0);
        cx: 17;
    }
}

/* Animation preferences */
@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3);
    }

    .sun-and-moon>.sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }

    .sun-and-moon .moon>circle {
        transition: transform .25s var(--ease-out-5);
    }

    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5);
        }
    }

    html.theme-dark .sun-and-moon>.sun {
        transform: scale(1.75);
        transition-timing-function: var(--ease-3);
        transition-duration: .25s;
    }

    html.theme-dark .sun-and-moon>.sun-beams {
        transform: rotateZ(-25deg);
        transition-duration: .15s;
    }

    html.theme-dark .sun-and-moon>.moon>circle {
        transition-delay: .25s;
        transition-duration: .5s;
    }
}

/* Footer Navigation */

.notion-callout.bg-brown-light.border {
    border-color: var(--color-bg-brown-light);
}


/* --- 8. PAGE-SPECIFIC OVERRIDES --- */

/* Creative Journey Page */
.page__kreativelaufbahn .notion-toggle .notion-semantic-string {
    margin: 0 0 0 32px;
}




/*
┌──────────────────────────────────────┐
│                                      │
│   RESPONSIVE STYLES (MEDIA QUERIES)  │
│                                      │
└──────────────────────────────────────┘
*/

/* 

    --- TABLET & SMALLER DESKTOPS (max-width: 880px) --- 

*/

@media screen and (max-width: 880px) {
    .super-content {
        padding-top: 2rem !important;
        padding-bottom: 4em !important;
    }

    h2 {
        font-size: var(--heading2-size) !important;
    }

    h3.notion-heading.notion-semantic-string {
        font-size: var(--heading3-size) !important;
        margin-top: 2rem !important;
    }

    .notion-collection-gallery.large {
        grid-template-columns: auto !important;
    }

    .notion-collection-card__cover.large {
        height: 42vh !important;
        min-height: unset !important;
    }

    .notion-collection-card__cover.smal {
        height: 32vh !important;
        min-height: unset !important;
    }

    /* --- Navigation for Tablet --- */
    .my-super-navbar {
        top: unset;
        bottom: 1rem;
        padding-left: 64px !important;
        padding-right: 64px !important;
    }

    /* --- Header & Footer  */
    .my_background_portrait {
        background-image: var(--mode-potrait-m);
    }

    .notion-column {
        width: 100% !important;
        -webkit-margin-start: 0 !important;
        margin-inline-start: 0 !important;
    }

    .notion-column-list {
        row-gap: 4rem;
    }

    article>.notion-image.page-width:nth-child(5) {
        width: calc(100% - var(--padding-mob)) !important;
        max-width: 100%;
        min-width: auto;
        margin-top: 0rem;
        height: 42vh !important;
    }

    notion-callout.color-default {
        width: var(--content-md);
        padding: var(--m423-radius) !important;
        border: 1px solid var(--color-border-default) !important;
    }


}


/* 

    --- MOBILE (max-width: 546px) --- 

*/

@media (max-width: 546px) {
    :root {
        --body-font-size: 1.123rem !important;
    }

    .super-content {
        padding-top: 12px !important;
    }

    /* --- Typography for Mobile --- */

    h1.notion-heading.color-green.notion-semantic-string strong {
        font-size: 3.8rem !important;
    }

    .page__index .notion-heading.color-green.notion-semantic-string strong {
        font-size: 5.8rem !important;
    }

    .notion-semantic-string .link {
        display: block;
        color: var(--link-text);
        text-decoration-color: var(--link-text);
        text-decoration-thickness: 1.42px;
        text-underline-offset: 8px;
        opacity: .8;
        transition: all .2s ease-in, opacity .1s ease-in;
        margin: 1rem 0;
    }

    /* --- Layout for Mobile --- */


    .notion-root h1.notion-heading {
        padding: 0 12px;
        font-size: 3.4rem !important;
    }



    /* List-Mobile */
    .notion-column-list {
        flex-direction: column;
        margin: 2em auto 0 auto;
        max-width: calc(100% - 46px);
        gap: 4rem;
    }

    article>.notion-column-list:nth-child(2) {
        width: calc(100% - var(--m423-radius) * 1);
        max-width: calc(var(--m423-width) - var(--m423-radius) * 4);
    }

    article>.notion-column-list:nth-child(2)>.notion-column:nth-child(1) {
        width: 100% !important;
    }

    article>.notion-column-list:nth-child(2)>.notion-column:nth-child(2) {
        width: 100% !important;
    }


    .notion-column .notion-text {
        padding: 12px !important;
    }

    .notion-column .notion-callout {
        padding: 0;
    }

    .notion-column .notion-callout .notion-text {
        padding: 0px !important;
    }



    .notion-text__content:has(+ .notion-image) {
        min-height: 2rem;
    }


    /* super embed hacks in case */
    /* Left right image normalize */
    .super-embed:has(.imgText-columns)~.notion-column-list:has(~.notion-column-list):nth-child(odd) {
        flex-direction: column-reverse;
    }

    /* Alternating column order for mobile */
    .notion-text .notion-text__children .notion-column-list:nth-of-type(even) {
        flex-direction: column-reverse;
    }


    /* --- Components for Mobile --- */

    .notion-button {
        width: 100%;
        margin: 1rem 23px;
        padding-left: 0;
    }

    blockquote,
    .notion-quote {
        max-width: calc(100% - var(--m423-radius)*2) !important;
    }



    .notion-bulleted-list {
        width: calc(100% - var(--padding-mob) * 2);
    }

    /* Callouts Mobile */
    .notion-callout.color-default {
        width: calc(100% - var(--padding-mob)) !important;
        margin: 2rem auto 8rem auto;
        padding: calc(var(--padding-mob) / 2) !important;
    }

    /* Images Mobil */

    .notion-image,
    .notion-image.normal {
        position: relative;
        padding: 0;
    }

    .notion-text__children .notion-image {
        padding: 0;
        padding: 0;
    }

    article>.notion-image.page-width:nth-child(5) {
        width: calc(100% - var(--padding-mob)) !important;
        max-width: 100%;
        min-width: auto;
        margin-top: 0rem;
        height: 42vh !important;
    }

    article>.notion-image,
    article>.notion-image.normal,
    article>.notion-image.page-width {
        width: auto;
        max-width: calc(100% - var(--padding-mob)*2);
        min-width: calc(100% - var(--padding-mob)*2);
        margin: 2rem auto;
    }

    article>.notion-image.page-width:nth-child(1) {
        width: auto;
        max-width: calc(100% - var(--padding-mob) * 1);
        min-width: calc(100% - var(--padding-mob) * 1);
        min-height: 230px;
        height: 42vh;
        margin: 0 auto;
    }


    .notion-image.normal img {
        width: 100%;
        object-fit: contain;
        border-radius: 0px;
    }

    .notion-column .notion-callout {
        padding: 0;
    }

    .notion-column {
        width: 100%;
        margin: 0 auto;
    }

    .notion-column .notion-text {
        padding: 0;
    }

    .notion-column .notion-button {
        margin: 1rem 0;

    }

    /* --- Galleries Mobile (Notion Collections) --- */


    .notion-collection.inline {
        width: 100% !important;
        max-width: var(--content-lg) !important;
        padding: 0 var(--padding-mob);
    }

    .page__index .notion-collection-gallery.large {
        grid-template-columns: auto auto;
    }

    /* Blog Page */
    .super-content.page__blog423 .notion-collection.inline {
        width: 832px;
        margin: auto;
    }

    .notion-collection-gallery.small {
        width: calc(100vw - var(--padding-mob)*2);
        grid-template-columns: calc((100vw - var(--padding-mob) * 3) / 2) calc((100vw - var(--padding-mob) * 3) / 2) !important;
        grid-template-rows: max-content;
        gap: var(--padding-mob) !important;
    }

    .notion-collection-gallery.medium,
    .notion-collection-gallery.large {
        width: 100% !important;
        grid-template-columns: auto !important;
        padding: 0 !important;
    }

    .notion-collection-gallery.large .notion-collection-card {
        height: fit-content;
        width: calc(100vw - var(--padding-mob) * 2) !important;
    }

    .notion-collection-gallery.small .notion-collection-card {
        height: 100%;
        width: 100% !important;
    }

    .notion-collection-card {
        height: 100%;
        width: auto;
        position: relative;
        overflow: visible;
        background: transparent;
        border-radius: var(--m423-radius) !important;
        border: 0;
        box-shadow: none !important;
        transition: transform .3s ease-in-out, background .3s ease-in-out, box-shadow .3s ease-in-out !important;
        cursor: pointer;
    }

    .notion-collection-card__cover.small {
        height: 36vh !important;
        min-height: 30vh !important;
        max-height: 42vh !important;
    }

    .notion-collection-gallery.small .notion-collection-card__property.notion-semantic-string {
        font-size: 1rem !important;
        letter-spacing: 0.1rem;
    }

    /* Toggle Mobile */

    .notion-toggle__content .notion-bulleted-list {
        width: 100%;
    }

    .notion-toggle__content .notion-quote {
        width: 100%;
        max-width: 100% !important;
    }

    /* Images Mobile */


    /* Video Mobile */

    .super-embed:has(> iframe) {
        width: calc(100% - var(--m423-radius) * 2);
        max-width: calc(var(--content-xl) - var(--m423-radius) * 2);
        display: flex;
        margin: 2rem auto;
        border-radius: var(--m423-radius);
        overflow: hidden;
    }

    /* --- Mobile Navigation (Burger Menu) --- */
    .my-super-navbar {
        padding: 0 56px !important;
    }

    /* Switch to flexbox for mobile layout */
    .my-super-navbar__content {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        height: 42px;
    }

    .my-super-navbar__item-list {
        display: none;
        position: absolute;
        width: 120%;
        height: auto;
        bottom: 70px;
        left: -10%;
        flex-direction: column;
        gap: 0.7em;
        padding: 1em 0;
        margin: auto;
    }

    a.notion-link.super-navbar__item {
        position: relative;
        padding: 1rem;
        font-size: 1.72rem;
        font-weight: 700;
        color: var(--color-text-default);
        opacity: 1 !important;
    }

    /* This rule shows the menu when it's open */
    [aria-label="menu-open"].my-super-navbar__item-list {
        display: flex;
    }

    /* Show burger icon */
    .my-menuburger {
        display: block;
    }

    /* Show contact links in menu */
    li.my-contacts {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
    }

    li.my-contacts a.my-contact {
        color: var(--color-text-default);
    }


    /* --- Burger Menu --- */
    .my-menuburger {
        --burger-size: 56px;
        display: block;
        /* FIXED: Make burger menu visible */
        position: relative;
        background: none;
        border: none;
        padding: 0;
        inline-size: var(--burger-size);
        block-size: var(--burger-size);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ...Burger animation styles... */
    .line--1,
    .line--3 {
        --total-length: 126.64183044433594;
    }

    .line--2 {
        --total-length: 70;
    }

    .line--1,
    .line--2,
    .line--3 {
        fill: none;
        stroke: var(--color-text-default);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        --length: 24;
        --offset: -38;
        stroke-dasharray: var(--length) var(--total-length);
        stroke-dashoffset: var(--offset);
        transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    [aria-expanded="true"] .line--1,
    [aria-expanded="true"] .line--3 {
        --offset: -93.5149185097;
    }

    [aria-expanded="true"] .line--2 {
        --offset: -50;
        --length: 0;
    }

    circle.burger-bg {
        fill: #fff3;
        opacity: 0;
    }

    button.my-menuburger:hover circle.burger-bg {
        opacity: 0;
    }

    /* --- NEW: Touch Feedback for Mobile Icons --- */
    .my-menuburger,
    .mylogo,
    .theme-toggle {
        position: relative;
        /* Prerequisite for pseudo-element positioning */
    }

    .my-menuburger::before,
    .theme-toggle::before,
    .super-navbar__logo::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 62px;
        /* A good touch-target size */
        height: 62px;
        background-color: var(--menu-trigger);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.23s ease-out;
        z-index: -1;
        /* Place it behind the icon */
    }

    /* Show the circle on touch or hover */
    .my-menuburger:active::before,
    .super-navbar__logo:active::before,
    .theme-toggle:active::before {
        opacity: 0.4;
    }

    /* Backdrop for open menu */
    .backdrop {
        position: fixed;
        inset: 0;
        z-index: 123;
        backdrop-filter: blur(42px) !important;
        -webkit-backdrop-filter: blur(42px) !important;
        background-color: var(--color-backdrop-bg);
    }

    .backdrop:is([visible="false"]) {
        display: none;
    }

    /* ... other 546px styles ... */
}


/*
┌──────────────────────────┐
│                          │
│   PRINT STYLES           │
│                          │
└──────────────────────────┘
*/
@media print {
    * {
        color: black !important;
        background: white !important;
    }

    body:has(.parent-page__bewerbungen) {
        font-size: 13px !important;
    }

    main.parent-page__bewerbungen.super-content {
        padding: 0 !important;
    }

    /* Hide non-essential elements for printing */
    .my-super-navbar,
    .my_background_portrait {
        display: none !important;
    }

    /* ... other print-specific resets and styles ... */
    div#block-1c3b6d59e38d8086b89cca5b94a969c6,
    div#block-1c3b6d59e38d8078b69dc235be790877 {
        page-break-before: always;
    }
}

@page {
    size: a4;
    margin: 2.3cm;

    @bottom-right {
        content: "Seite "counter(page);
        font-family: "Dosis", var(--primary-font);
        font-size: 11px;
    }

    @bottom-left {
        content: "Circulum Vitales - Matze Lenz 2025";
        font-family: "Dosis", var(--primary-font);
        font-size: 11px;
    }
}

@page: first {
    margin-top: 1cm;
}