/* Zusatz-Styles nur fuer den Relaunch-Entwurf. css/style.css bleibt unberuehrt. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Header: Logo kleiner, Platz fuer den Hero ---------- */
.main-header .shine-container {
    width: max(16vh, 130px);
    height: max(16vh, 130px);
}

.main-header .header-content {
    max-width: 980px;
    gap: 1.5rem;
    z-index: 1;
}

/* Weiches, wanderndes Farbfeld hinter dem Hero */
.main-header::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 90%;
    background:
        radial-gradient(38% 45% at 22% 30%, rgba(0, 156, 221, 0.28), transparent 70%),
        radial-gradient(32% 40% at 78% 22%, rgba(0, 179, 255, 0.20), transparent 70%),
        radial-gradient(30% 36% at 55% 70%, rgba(0, 120, 200, 0.16), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: aurora 22s ease-in-out infinite alternate;
}

[data-theme="dark"] .main-header::before {
    opacity: 0.75;
}

@keyframes aurora {
    0% { transform: translate3d(-3%, 0, 0) scale(1); }
    50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, -2%, 0) scale(1.03); }
}

/* ---------- Hero ---------- */
.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.hero-headline {
    font-size: clamp(1.75rem, 4.6vw, 3.25rem);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
}

.hero-sub {
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    line-height: 1.65;
    max-width: 42rem;
    margin: 0;
    opacity: 0.82;
    text-wrap: pretty;
}

/* Gestaffelter Auftritt */
.hero-copy > *,
.header-content > .hero-essence,
.main-header .hero-capabilities {
    animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.31s; }
.header-content > .hero-essence { animation-delay: 0.4s; }
.main-header .hero-capabilities { animation-delay: 0.5s; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Rotierende Woerter ---------- */
.word-slider {
    display: inline-block;
    position: relative;
    height: 1.34em;
    line-height: 1.34em;
    overflow: hidden;
    /* Box haengt unter der Grundlinie, damit Unterlaengen Platz haben */
    vertical-align: -0.34em;
    /* feste Breite = laengstes Wort, wird im JS gesetzt */
    width: var(--word-width, 11ch);
    text-align: left;
    color: var(--primary-color);
}

.word-slider::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.22em;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), rgba(0, 156, 221, 0.15));
}

.word-slider:not(.is-ready) .word-slider-track {
    visibility: hidden;
}

.word-slider-track {
    display: block;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.word-slider-item {
    display: block;
    /* max-content, sonst erbt das Element die verengte Containerbreite
       und die Messung im JS liefert einen zu kleinen Wert */
    width: max-content;
    height: 1.34em;
    line-height: 1.34em;
    white-space: nowrap;
    /* wird im JS auf die Slotbreite gedehnt */
    transform-origin: left center;
}

/* ---------- Buttons ---------- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.hero-actions a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    border: 2px solid var(--primary-color);
    transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(var(--btn-scale, 1));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, color 0.35s ease;
}

.hero-actions a:hover {
    --btn-scale: 1.035;
}

/* Glanzstreifen: parkt links ausserhalb, faehrt beim Hover einmal weich durch. */
.hero-actions a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 255, 255, 0.5) 55%,
            transparent 100%);
    transform: skewX(-16deg) translateX(-260%);
    transition: transform 0s;
}

.hero-actions a:hover::before {
    transform: skewX(-16deg) translateX(420%);
    transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* Fester Lichtbogen oben auf dem Vollton-Button, zieht mit der Lupe an. */
.hero-actions .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.06) 40%,
            transparent 62%);
    opacity: calc(0.3 + 0.5 * var(--lens, 0));
    transition: opacity 0.35s ease;
}

[data-theme="dark"] .hero-actions .btn-primary::after {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.04) 40%,
            transparent 62%);
}

[data-theme="dark"] .hero-actions a::before {
    background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            transparent 100%);
}

.hero-actions .btn-primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 22px rgba(0, 156, 221, 0.32);
}

.hero-actions .btn-primary:hover {
    box-shadow: 0 12px 34px rgba(0, 156, 221, 0.45);
}

.hero-actions .btn-secondary {
    color: var(--text-primary);
    background: transparent;
}

/* Fuellung waechst von unten beim Hover */
.hero-actions .btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--primary-color);
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-actions .btn-secondary:hover {
    color: #fff;
}

.hero-actions .btn-secondary:hover::after {
    transform: translateY(0);
}

.hero-actions .btn-secondary svg {
    transition: transform 0.35s ease;
}

.hero-actions .btn-secondary:hover svg {
    transform: translateX(5px);
}

/* ---------- Sektionen beim Scrollen ---------- */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
    .main-header .shine-container {
        width: max(11vh, 96px);
        height: max(11vh, 96px);
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions a {
        width: 100%;
        justify-content: center;
    }


}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .main-header::before,
    .hero-copy > *,
    .header-content > .hero-essence,
    .main-header .hero-capabilities {
        animation: none !important;
    }

    .word-slider,
    .word-slider-track,
    .hero-actions a,
    .js-reveal [data-reveal] {
        transition: none !important;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* Scroll-Hinweis sass mitten in der Headline -> ans untere Ende, ueber die Laufschrift */
.main-header .scroll-down-element {
    bottom: 4.75rem;
}

@media (max-width: 768px) {
    .main-header .scroll-down-element {
        bottom: 4rem;
    }
}

@media (max-height: 700px) {
    .main-header .scroll-down-element {
        display: none;
    }
}

/* Der Header hatte links einen Versatz fuer die Seitennavigation, aber keinen
   rechts. Dadurch sass der gesamte Inhalt rund 100px zu weit rechts. Die
   Navigation liegt fixed und darf ueberlagert werden, also echte Mitte. */
.main-header {
    /* Feinjustierung: 0 = exakt Fenstermitte, 150px = alter Stand ganz rechts */
    --hero-shift: 72px;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(max(4vw, 1.5rem) + var(--hero-shift));
    padding-right: max(4vw, 1.5rem);
    padding-top: var(--nav-height);
}

@media (max-width: 1024px) {
    .main-header {
        --hero-shift: 0px;
    }
}

.main-header .header-content {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Logo an den Text heranholen ---------- */
/* margin:auto saugt im Flex-Layout den freien Platz auf und schiebt das Logo
   vom Hero weg. Es soll als eine Gruppe mit der Headline wirken. */
.main-header .shine-container {
    margin: 0 auto 0.25rem;
    width: max(19vh, 140px);
    height: max(19vh, 140px);
}

.main-header .header-content {
    gap: 0.5rem;
    justify-content: center;
}

.main-header .hero-copy {
    margin-top: 0.25rem;
}

/* Platz fuer die Laufschrift am unteren Rand */
.main-header {
    padding-bottom: 1.5rem;
}

/* ---------- Maus-Animation raus ---------- */
.main-header .scroll-down-element {
    display: none;
}

/* ---------- Scroll-Leiste am rechten Rand ---------- */
.scroll-rail {
    position: fixed;
    right: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    opacity: 0.75;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* als Button zurueckgesetzt */
    background: none;
    border: 0;
    padding: 0.5rem 0.35rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.scroll-rail:hover,
.scroll-rail:focus-visible {
    opacity: 1;
}

.scroll-rail:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 8px;
}

.scroll-rail:hover .scroll-rail-track {
    opacity: 0.45;
}

/* Der Regler waechst in die Richtung, in die der Klick fuehrt */
.scroll-rail.hover-down .scroll-rail-thumb,
.scroll-rail.hover-up .scroll-rail-thumb {
    height: 44px;
}

.scroll-rail.hover-up .scroll-rail-thumb {
    --rail-grow: -10px;
}

.scroll-rail:active {
    transform: translateY(-50%) scale(0.96);
}

/* Pfeil statt Wort: verstaendlich unabhaengig von der Sprache.
   Die Leiste hat zwei Klickzonen, obere Haelfte abwaerts, untere aufwaerts. */
.scroll-rail-arrow {
    color: var(--text-secondary);
    opacity: 0.55;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.scroll-rail:hover .scroll-rail-arrow {
    opacity: 0.9;
    color: var(--primary-color);
}

/* Der obere Pfeil wippt, solange noch nicht gescrollt wurde */
.scroll-rail:not(.is-scrolled) .scroll-rail-arrow--down {
    animation: rail-arrow 2.4s ease-in-out infinite;
}


@keyframes rail-arrow {
    0%, 100% { transform: translateY(-3px); opacity: 0.5; }
    50% { transform: translateY(3px); opacity: 1; }
}

.scroll-rail-track {
    position: relative;
    display: block;
    width: 2px;
    height: 22vh;
    min-height: 120px;
    max-height: 220px;
    border-radius: 2px;
    background: currentColor;
    color: var(--text-secondary);
    opacity: 0.25;
}

.scroll-rail-thumb {
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 34px;
    border-radius: 6px;
    background: var(--primary-color);
    transition: transform 0.15s linear, height 0.3s ease;
    transform: translateY(calc(var(--rail-pos, 0px) + var(--rail-grow, 0px)));
    box-shadow: 0 0 12px rgba(0, 156, 221, 0.55);
}

/* Sanftes Pulsieren, solange noch nicht gescrollt wurde */
.scroll-rail:not(.is-scrolled) .scroll-rail-thumb {
    animation: rail-hint 2.4s ease-in-out infinite;
}

@keyframes rail-hint {
    0%, 100% { transform: translateY(var(--rail-pos, 0px)); }
    50% { transform: translateY(calc(var(--rail-pos, 0px) + 10px)); }
}

/* Kleiner Hinweis links neben der Leiste, wechselt mit der Klickzone. */
.scroll-rail-tip {
    position: absolute;
    right: calc(100% + 0.7rem);
    top: 50%;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.32rem 0.66rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-rail.hover-down .scroll-rail-tip,
.scroll-rail.hover-up .scroll-rail-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.scroll-rail.hover-down .scroll-rail-tip { margin-top: 3.2rem; }
.scroll-rail.hover-up .scroll-rail-tip { margin-top: -3.2rem; }

[data-theme="dark"] .scroll-rail-tip {
    color: var(--text-primary);
    background: rgba(28, 28, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .scroll-rail-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-rail-tip { transition: opacity 0.15s ease; transform: translateY(-50%); }
    .scroll-rail.hover-down .scroll-rail-tip,
    .scroll-rail.hover-up .scroll-rail-tip { transform: translateY(-50%); }
}

@media (max-width: 768px) {
    .scroll-rail {
        right: 0.55rem;
        gap: 0.5rem;
    }

    .scroll-rail-arrow {
        width: 11px;
        height: 11px;
    }

    /* Klickzonen brauchen auf dem Handy genug Flaeche */
    .scroll-rail {
        padding: 0.75rem 0.6rem;
    }

    .scroll-rail-track {
        height: 16vh;
        min-height: 80px;
    }

    .scroll-rail-thumb {
        width: 4px;
        left: -1px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-rail:not(.is-scrolled) .scroll-rail-thumb,
    .scroll-rail:not(.is-scrolled) .scroll-rail-arrow--down {
        animation: none;
    }
}

/* ---------- Alter Fortschrittsbalken links raus ---------- */
/* Wird von js/main.js eingefuegt und lief als blauer Strich ueber die volle
   Fensterhoehe. Die Leiste rechts uebernimmt das. */
.scroll-progress-bar {
    display: none !important;
}

/* ---------- Kompetenzzeile im Hero ---------- */
/* Ersetzt die frueher laufende Tag-Wolke: statisch, leise, lesbar. */
.hero-capabilities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.hero-capabilities li {
    position: relative;
}

.hero-capabilities li + li::before {
    content: '';
    position: absolute;
    left: -0.78rem;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    transform: translateY(-50%);
}

.hero-capabilities a {
    color: var(--text-secondary);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.hero-capabilities a:hover,
.hero-capabilities a:focus-visible {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

@media (max-width: 600px) {
    .hero-capabilities {
        gap: 0.3rem 1.1rem;
        font-size: 0.8rem;
    }

    .hero-capabilities li + li::before {
        left: -0.6rem;
    }
}


/* ---------- Kontakt: gleiche Schrift wie in den Abschnitten ---------- */
/* Felder und Button erbten die Standardschrift des Browsers, nicht Inter. */
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form select {
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.5;
    letter-spacing: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    font-family: inherit;
    font-size: 1.05rem;
}

.contact-form button {
    font-weight: 600;
}

/* Fliesstext im Kontaktbereich auf die Groesse der Abschnitte */
.contact-section .contact-info {
    font-size: 1.2rem;
    line-height: 1.6;
}

.contact-section .contact-info p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.error-message {
    font-family: inherit;
}

/* ---------- Phase 2: Projekte und Person ---------- */
/* Liegt nach dem 400vh-Scrollbereich und schiebt sich wie der Kontaktbereich
   ueber die fest positionierten Abschnitte. Braucht daher eigenen Hintergrund. */
.proof-section {
    position: relative;
    z-index: 2;
    background: var(--background);
    margin-top: 40vh;
    margin-left: calc(4vw + var(--section-nav-width));
    padding: 5rem 2rem 1rem;
    text-align: center;
}

/* der Abstand steckt jetzt oben in .proof-section */
.contact-section {
    margin-top: 6rem;
}

.proof-inner,
.about-block {
    max-width: 1050px;
    margin: 0 auto;
}

.proof-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.proof-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 34rem;
    margin: 0 auto 3rem;
}

.proof-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.proof-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 32%, transparent);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.proof-card a:hover,
.proof-card a:focus-visible {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 156, 221, 0.18);
}

.proof-card-meta {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.proof-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.proof-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.proof-card-tags {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-top: auto;
    margin-bottom: 1rem;
}

.proof-card-more {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.proof-card-more::after {
    content: '→';
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.proof-card a:hover .proof-card-more::after {
    transform: translateX(4px);
}

/* ---------- Person ---------- */
.about-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    margin-top: 5rem;
    padding-top: 3.5rem;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    text-align: center;
}

.about-portrait {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}

.about-text h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 auto 1.1rem;
    max-width: 40rem;
}

.about-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.about-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 156, 221, 0.35);
}

@media (max-width: 900px) {
    .proof-section {
        margin-left: 0;
        padding: 4rem 1.5rem 1rem;
    }

    .about-block {
        gap: 1.5rem;
    }
}


/* ---------- Lupe: grosser Kreis folgt dem Zeiger ---------- */
/* Randbereiche (Menue links, Tags rechts, Kompetenzen unten) liegen leise da
   und hellen auf, sobald der Kreis sie streift. Die Mitte bleibt unberuehrt.
   Jedes Ziel bekommt aus relaunch.js die Naehe 0..1 als --lens. */

.lens-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--lens-size, 620px);
    height: var(--lens-size, 620px);
    margin: calc(var(--lens-size, 620px) / -2) 0 0 calc(var(--lens-size, 620px) / -2);
    border-radius: 50%;
    pointer-events: none;
    /* Ueber allem, was einen eigenen Hintergrund mitbringt: die Sektionen
       (Projekte, Ueber mich) und die eingeblendete Navigation. Sonst
       schneidet deren Balken den Kreis beim Scrollen oben ab. */
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.45s ease;
    /* Helles, ins Weisse gezogenes Blau. Weicher Verlauf ohne Ring
       und ohne Kontur, laeuft am Rand vollstaendig aus. */
    background: radial-gradient(circle closest-side,
            rgba(198, 232, 250, 0.20) 0%,
            rgba(176, 222, 248, 0.12) 46%,
            rgba(160, 215, 248, 0.05) 70%,
            rgba(160, 215, 248, 0) 100%);
    -webkit-mask: radial-gradient(circle closest-side, #000 40%, transparent 100%);
    mask: radial-gradient(circle closest-side, #000 40%, transparent 100%);
    will-change: transform;
}

[data-theme="dark"] .lens-glow {
    background: radial-gradient(circle closest-side,
            rgba(130, 204, 246, 0.24) 0%,
            rgba(150, 212, 248, 0.13) 46%,
            rgba(180, 226, 252, 0.05) 70%,
            rgba(180, 226, 252, 0) 100%);
}

/* Ueber den Sektionen so leise wie zuvor ... */
.lens-glow.is-active {
    opacity: 0.55;
}

/* ... ueber dem weissen Header voll, sonst geht er dort unter. */
.lens-glow.is-active.on-header {
    opacity: 1;
}

@media (min-width: 1025px) and (hover: hover) {

    /* Menue links */
    .section-nav {
        opacity: 1;
    }

    .section-nav .section-link:not(.active) {
        opacity: calc(0.3 + 0.7 * var(--lens, 0));
        transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Hintergrundtags rechts: Container voll, Helligkeit steuern die Teile */
    .header-background-tags {
        opacity: 1;
    }

    .header-background-tags .css-3,
    .header-background-tags .html-5,
    .header-background-tags .vue,
    .header-background-tags .type-script,
    .header-background-tags .html-root-primary-color-009-cdd,
    .header-background-tags .rectangle-2 {
        opacity: calc(0.08 + 0.5 * var(--lens, 0));
    }

    /* Kompetenzen unten */
    .hero-capabilities a {
        opacity: calc(0.42 + 0.58 * var(--lens, 0));
        transition: color 0.25s ease, border-color 0.25s ease;
    }

    .hero-capabilities a:hover,
    .hero-capabilities a:focus-visible {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lens-glow {
        display: none;
    }
}


/* ---------- Hero: klarere Gruppen durch Abstaende ---------- */
/* Drei Gruppen mit eigenem Gewicht: Logo, Aussage (Headline + Text),
   Handlung (Buttons). Die Kompetenzzeile steht als vierte fuer sich.
   Alle Abstaende haengen an der Fensterhoehe, damit der Hero auf
   flachen Bildschirmen nicht ueberlaeuft. */
.main-header .header-content {
    gap: clamp(2rem, 5.5vh, 4rem);
}

.hero-copy {
    gap: clamp(1.1rem, 2.2vh, 1.6rem);
}

/* Fliesstext etwas schmaler: bindet ihn optisch an die Headline */
.hero-sub {
    max-width: 38rem;
}

.hero-actions {
    margin-top: clamp(1rem, 2.8vh, 2rem);
}

.main-header .hero-capabilities {
    margin-top: clamp(1.75rem, 4.5vh, 3.25rem);
    padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}

@media (max-height: 760px) {
    .main-header .header-content {
        gap: 1.75rem;
    }

    .main-header .hero-capabilities {
        margin-top: 1.5rem;
        padding-bottom: 0.25rem;
    }
}

/* ---------- Proportionen im Header ---------- */
/* space-between hat den freien Platz zwischen Buttons und Kompetenzzeile
   gesammelt. Die Gruppe wird stattdessen als Ganzes zentriert. */
.main-header {
    justify-content: center;
    padding-bottom: 4rem;
}

.main-header .header-content {
    flex: 0 1 auto;
    min-height: 0;
}

/* leerer Platzhalter aus dem Original */
.main-header .featured-footer-nav {
    display: none;
}

.main-header .shine-container {
    margin-bottom: -0.75rem;
}

.hero-copy {
    gap: 1rem;
}

.hero-sub {
    max-width: 38rem;
}

.hero-capabilities {
    margin-top: 2.75rem;
}


/* ---------- Markierungen: Fortschritt aus relaunch.js statt view() ---------- */
/* --mark (0..1) kommt aus initScrollMarks. Deckt die unzuverlaessige
   scroll-driven Animation aus css/style.css ab. */
.js-reveal .highlight::before {
    animation: none;
    -webkit-mask-size: calc(var(--mark, 0) * 100%) 100%;
    mask-size: calc(var(--mark, 0) * 100%) 100%;
    -webkit-transition: -webkit-mask-size 0.25s linear;
    transition: mask-size 0.25s linear;
}


/* ---------- Vollton-Buttons ausserhalb des Hero: gleicher Glanz ---------- */
.about-cta,
.contact-form button[type="submit"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0) scale(var(--btn-scale, 1));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease, background-color 0.3s ease;
}

.about-cta:hover,
.contact-form button[type="submit"]:hover {
    --btn-scale: 1.035;
}

/* Glanzstreifen, parkt links, faehrt beim Hover einmal durch. */
.about-cta::before,
.contact-form button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 255, 255, 0.5) 55%,
            transparent 100%);
    transform: skewX(-16deg) translateX(-260%);
    transition: transform 0s;
}

.about-cta:hover::before,
.contact-form button[type="submit"]:hover::before {
    transform: skewX(-16deg) translateX(420%);
    transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* Fester Lichtbogen oben. */
.about-cta::after,
.contact-form button[type="submit"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 62%);
    opacity: 0.5;
}

[data-theme="dark"] .about-cta::after,
[data-theme="dark"] .contact-form button[type="submit"]::after {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.03) 40%,
            transparent 62%);
}

[data-theme="dark"] .about-cta::before,
[data-theme="dark"] .contact-form button[type="submit"]::before {
    background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            transparent 100%);
}

.contact-form button[type="submit"] {
    border-radius: 999px;
}


/* ---------- Portraet: gerahmt, dreht und schimmert beim Hover ---------- */
.about-portrait-frame {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: block;
    isolation: isolate;
}

/* Farbring, dreht langsam, zieht beim Hover an. */
.about-portrait-frame::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(from 0deg,
            var(--primary-color),
            #7cc9f0,
            #d3effd,
            #7cc9f0,
            var(--primary-color));
    filter: blur(1px);
    animation: portrait-spin 9s linear infinite;
}

.about-portrait-frame:hover::before {
    animation-duration: 2.6s;
}

@keyframes portrait-spin {
    to { transform: rotate(360deg); }
}

/* Diagonaler Schimmer. Das Element bleibt in Ruhe, damit border-radius den
   Verlauf sicher auf den Kreis beschneidet. Bewegt wird nur die
   background-position. */
.about-portrait-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
    background: linear-gradient(115deg,
            transparent 38%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 62%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 120% 0;
    opacity: 0;
    transition: background-position 0s, opacity 0.2s ease;
    pointer-events: none;
}

.about-portrait-frame:hover::after {
    opacity: 1;
    background-position: -60% 0;
    transition: background-position 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s ease;
}

.about-portrait {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(0.92);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.about-portrait-frame:hover .about-portrait {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .about-portrait-frame::before { animation: none; }
    .about-portrait-frame::after { display: none; }
    .about-portrait,
    .about-portrait-frame:hover .about-portrait { transition: none; }
}


/* ---------- Name im Fliesstext: sticht beim Hover heraus ---------- */
.name-pop {
    display: inline-block;
    font-weight: 600;
    color: inherit;
    position: relative;
    transition: color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        letter-spacing 0.35s ease,
        text-shadow 0.3s ease;
}

.name-pop::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-color), #7cc9f0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.name-pop:hover,
.name-pop:focus-visible,
.about-portrait-frame:hover ~ .about-text .name-pop {
    color: var(--primary-color);
    transform: scale(1.06) translateY(-1px);
    letter-spacing: 0.012em;
    text-shadow: 0 4px 16px rgba(0, 156, 221, 0.35);
    outline: none;
}

.name-pop:hover,
.name-pop:focus-visible {
    animation: name-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.name-pop:hover::after,
.name-pop:focus-visible::after,
.about-portrait-frame:hover ~ .about-text .name-pop::after {
    transform: scaleX(1);
}

@keyframes name-pop-in {
    0% { transform: scale(1); }
    55% { transform: scale(1.11) translateY(-2px); }
    100% { transform: scale(1.06) translateY(-1px); }
}

[data-theme="dark"] .name-pop:hover,
[data-theme="dark"] .name-pop:focus-visible,
[data-theme="dark"] .about-portrait-frame:hover ~ .about-text .name-pop {
    text-shadow: 0 4px 18px rgba(0, 156, 221, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .name-pop,
    .name-pop:hover,
    .name-pop:focus-visible,
    .about-portrait-frame:hover ~ .about-text .name-pop {
        transform: none;
        animation: none;
        letter-spacing: normal;
    }
}


/* ---------- Easter Egg: Dev-Notiz, tippt sich beim Hover des markierten Worts ---------- */
.dev-note {
    margin: 0.6rem 0 0;
    font-family: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--primary-color));
    min-height: 1.2em;
}

.dev-note > span {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    border-right: 2px solid transparent;
    opacity: 0.4;
    transition: max-width 0.05s linear, opacity 0.3s ease;
}

.section-content:has(.highlight:hover) .dev-note > span,
.dev-note.is-open > span {
    max-width: 46ch;
    opacity: 0.85;
    border-right-color: var(--primary-color);
    transition: max-width 1.1s steps(32, end), opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .section-content:has(.highlight:hover) .dev-note > span,
    .dev-note.is-open > span {
        transition: opacity 0.3s ease;
    }
}


/* ---------- Umsetzung: kleiner Code-Editor, schreibt und fuehrt aus ---------- */
.code-demo {
    margin: 1.5rem auto 0;
    max-width: 30rem;
    border-radius: 12px;
    overflow: hidden;
    background: #0f1115;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    text-align: left;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.code-demo.is-in {
    opacity: 1;
    transform: none;
}

.code-demo-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-demo-dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.code-demo-dot:first-child { background: #ff5f57; }
.code-demo-dot:nth-child(2) { background: #febc2e; }
.code-demo-dot:nth-child(3) { background: #28c840; }

.code-demo-dot:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* macOS-Manier: Symbol erscheint beim Hover ueber der Leiste */
.code-demo-dot::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.code-demo-bar:hover .code-demo-dot::before,
.code-demo-dot:focus-visible::before {
    opacity: 1;
}

.code-demo-dot:nth-child(1)::before { content: '\00d7'; }
.code-demo-dot:nth-child(2)::before { content: '\2013'; }
.code-demo-dot:nth-child(3)::before { content: '\25B8'; }

.code-demo.is-folded .code-demo-dot:nth-child(2)::before { content: '+'; }

.code-demo.is-folded .code-demo-body,
.code-demo.is-folded .code-demo-actions {
    display: none;
}

.code-demo-file {
    margin-left: 0.4rem;
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.code-demo-body {
    margin: 0;
    padding: 0.9rem 1rem;
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e6edf3;
    white-space: pre-wrap;
    min-height: 5.4em;
}

.code-demo-text .tok-cmd { color: #7ee0ff; }
.code-demo-text .tok-str { color: #a5d6a2; }
.code-demo-text .tok-flag { color: #ffca7a; }
.code-demo-text .tok-comment { color: rgba(255, 255, 255, 0.4); }

.code-demo-caret {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.18em;
    background: var(--primary-color);
    animation: code-caret 1s steps(1) infinite;
}

.code-demo.is-done .code-demo-caret { display: none; }

@keyframes code-caret {
    50% { opacity: 0; }
}

.code-demo-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1rem 0.95rem;
}

.code-demo-run {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.code-demo-run:disabled {
    opacity: 0.4;
    cursor: default;
}

.code-demo-run.is-ready {
    box-shadow: 0 0 0 0 rgba(0, 156, 221, 0.5);
    animation: code-run-pulse 1.8s ease-out infinite;
}

.code-demo-run:not(:disabled):hover {
    transform: translateY(-1px);
}

@keyframes code-run-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 156, 221, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(0, 156, 221, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 156, 221, 0); }
}

.code-demo-out {
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.8rem;
    color: #28c840;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.code-demo-out.is-shown {
    opacity: 1;
    transform: none;
}

/* Formatierung im Text aendert sich nach dem Ausfuehren */
#build-status {
    transition: color 0.4s ease, font-weight 0.4s ease;
}

#build-status.is-live {
    color: var(--primary-color);
    font-weight: 700;
}

#build-status.is-live::after {
    transform: scaleX(1);
}

@media (max-width: 900px) {
    .code-demo { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .code-demo,
    .code-demo.is-in { opacity: 1; transform: none; transition: none; }
    .code-demo-caret,
    .code-demo-run.is-ready { animation: none; }
}


/* ---------- Gimmick: "Nur das Wichtigste" ---------- */
.btn-essence {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.5rem 1.1rem 0.5rem 0.9rem;
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* leiser Schimmer, wandert beim Hover einmal durch */
.btn-essence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent);
    transform: skewX(-16deg) translateX(-220%);
    transition: transform 0s;
}

.btn-essence:hover,
.btn-essence:focus-visible {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 65%, transparent);
    outline: none;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.btn-essence:hover::before,
.btn-essence:focus-visible::before {
    transform: skewX(-16deg) translateX(420%);
    transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.hero-essence {
    position: relative;
    margin-top: 0.4rem;
    display: flex;
    justify-content: center;
}

/* Kurzbeschreibung, erscheint beim Hover unter dem Button */
.btn-essence-hint {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    width: max-content;
    max-width: 15rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 6%, var(--background));
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(5px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
}

.btn-essence:hover ~ .btn-essence-hint,
.btn-essence:focus-visible ~ .btn-essence-hint {
    opacity: 1;
    transform: translateX(-50%);
}

/* Beim Hover tritt der Rest des Hero leicht zurueck */
body:has(.hero-essence .btn-essence:hover) .hero-copy,
body:has(.hero-essence .btn-essence:hover) .shine-container,
body:has(.hero-essence .btn-essence:hover) .hero-capabilities,
body:has(.hero-essence .btn-essence:hover) .header-background-tags,
body:has(.hero-essence .btn-essence:hover) .scroll-down-element {
    opacity: 0.38 !important;
    filter: blur(1.5px) !important;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    body:has(.hero-essence .btn-essence:hover) .hero-copy,
    body:has(.hero-essence .btn-essence:hover) .shine-container,
    body:has(.hero-essence .btn-essence:hover) .hero-capabilities,
    body:has(.hero-essence .btn-essence:hover) .header-background-tags,
    body:has(.hero-essence .btn-essence:hover) .scroll-down-element {
        filter: none !important;
    }
}

/* Icon: drei Zeilen, die beim Hover zu einer zusammenlaufen */
.btn-essence-icon {
    position: relative;
    width: 15px;
    height: 12px;
    flex: 0 0 auto;
}

.btn-essence-icon::before,
.btn-essence-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s ease, opacity 0.3s ease;
}

.btn-essence-icon::before { top: 0; }
.btn-essence-icon::after { bottom: 0; }

/* mittlere Linie */
.btn-essence-icon {
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.btn-essence:hover .btn-essence-icon::before,
.btn-essence:focus-visible .btn-essence-icon::before { top: 5px; }

.btn-essence:hover .btn-essence-icon::after,
.btn-essence:focus-visible .btn-essence-icon::after { bottom: 5px; }

/* Die Seite bleibt als milchige Tiefe hinter der Karte stehen */
body.essence-on {
    overflow: hidden;
}

body.essence-on .main-nav,
body.essence-on .section-nav,
body.essence-on .scroll-rail,
body.essence-on #theme-toggle,
body.essence-on .lens-glow,
body.essence-on header,
body.essence-on main,
body.essence-on footer {
    opacity: 0.16;
    filter: blur(13px) saturate(0.55);
    transform: scale(0.985);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 1, 1);
    pointer-events: none;
}

.essence {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: safe center;
    padding: 1.5rem;
    overflow-y: auto;
    background: color-mix(in srgb, var(--background) 76%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.essence::before {
    content: '';
    position: absolute;
    width: min(38rem, 90vw);
    height: min(38rem, 90vw);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 24%, transparent), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
}

.essence.is-open {
    opacity: 1;
    visibility: visible;
}

.essence-card {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.5rem 1.5rem;
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 4%, var(--background));
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.essence.is-open .essence-card {
    opacity: 1;
    transform: none;
}

/* Titelleiste im Terminal-Look, klebt oben in der Karte */
.essence-term {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 -1.5rem;
    padding: 0.7rem 1rem;
    background: color-mix(in srgb, var(--text-primary) 7%, var(--background));
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 15%, transparent);
}

.essence-term-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 35%, transparent);
    flex: 0 0 auto;
}

.essence-term-dot:first-child { background: #ff5f57; }
.essence-term-dot:nth-child(2) { background: #febc2e; }
.essence-term-dot:nth-child(3) { background: #28c840; }

.essence-term-dot {
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.essence-term:hover .essence-term-dot {
    filter: brightness(1.1);
}

.essence-term-dot:hover {
    transform: scale(1.3);
}

.essence-term-dot:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Kurze Rueckfrage beim Klick auf die Punkte */
.essence-confirm {
    position: absolute;
    top: 2.7rem;
    left: 0.9rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, var(--background));
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 11px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    animation: essence-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.essence-confirm[hidden] { display: none; }

.essence-confirm button {
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease;
}

.essence-confirm-yes {
    color: #fff;
    background: var(--primary-color);
}

.essence-confirm-yes:hover { filter: brightness(1.08); }

.essence-confirm-no {
    color: var(--text-secondary);
    background: transparent;
    border-color: color-mix(in srgb, var(--text-secondary) 30%, transparent);
}

.essence-confirm-no:hover { border-color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .essence-confirm { animation: none; }
    .essence-term-dot:hover { transform: none; }
}

.essence-cmd {
    margin-left: 0.5rem;
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 0.74rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--text-secondary) 70%, var(--primary-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.essence-cmd-caret {
    display: inline-block;
    width: 5px;
    height: 0.95em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: var(--primary-color);
    animation: code-caret 1s steps(1) infinite;
}

.essence.is-run .essence-cmd-caret { display: none; }

.essence-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.essence-photo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-color), #7cc9f0);
}

.essence-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--background);
}

.essence-id { min-width: 0; }

.essence-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.essence-role {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.essence-lead {
    margin: -0.4rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.essence-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.essence-cards li {
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--primary-color) 85%, var(--text-primary));
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    opacity: 0;
    transform: translateY(10px) scale(0.96);
}

.essence-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent);
    opacity: 0;
    transform: translateY(12px);
}

.essence-form-title {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.essence-form input,
.essence-form textarea {
    font: inherit;
    font-size: 0.9rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 5%, var(--background));
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: none;
}

.essence-form input:focus,
.essence-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.essence-form input[name="extra_field"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.essence-form button {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    margin-top: 0.25rem;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 6px 20px rgba(0, 156, 221, 0.3);
}

.essence-form button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 156, 221, 0.42);
}

.essence-form button:disabled {
    opacity: 0.55;
    cursor: default;
}

.essence-form-status {
    margin: 0;
    min-height: 1.1em;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.essence-form-status.is-ok { color: #1f9d55; }
.essence-form-status.is-err { color: #d64545; }

.essence-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent);
    opacity: 0;
    transform: translateY(12px);
}

.essence-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.essence-contact-item svg {
    color: var(--primary-color);
    flex: 0 0 auto;
}

.essence-contact-item:hover {
    color: var(--primary-color);
}

.essence-restore {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, transparent);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.essence-restore svg { flex: 0 0 auto; }

.essence-restore:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.essence-restore:hover svg {
    animation: essence-rewind 0.6s ease;
}

@keyframes essence-rewind {
    to { transform: rotate(-360deg); }
}

/* Gestaffelter Auftritt der Karteninhalte */
.essence.is-run .essence-head,
.essence.is-run .essence-lead,
.essence.is-run .essence-cards li,
.essence.is-run .essence-form,
.essence.is-run .essence-contact,
.essence.is-run .essence-restore {
    animation: essence-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.essence.is-run .essence-head { animation-delay: 0.04s; }
.essence.is-run .essence-lead { animation-delay: 0.12s; }
.essence.is-run .essence-cards li { animation-delay: calc(0.2s + var(--i) * 0.06s); }
.essence.is-run .essence-form { animation-delay: 0.46s; }
.essence.is-run .essence-contact { animation-delay: 0.56s; }
.essence.is-run .essence-restore { animation-delay: 0.64s; }

@keyframes essence-in {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.essence-on .main-nav,
    body.essence-on .section-nav,
    body.essence-on .scroll-rail,
    body.essence-on #theme-toggle,
    body.essence-on .lens-glow,
    body.essence-on header,
    body.essence-on main,
    body.essence-on footer {
        filter: none;
        transform: none;
        transition: opacity 0.2s ease;
    }

    .essence-card { transition: opacity 0.2s ease; transform: none; }

    .essence.is-run .essence-head,
    .essence.is-run .essence-lead,
    .essence.is-run .essence-cards li,
    .essence.is-run .essence-form,
    .essence.is-run .essence-contact,
    .essence.is-run .essence-restore {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .essence-restore:hover svg { animation: none; }
}



/* ---------- Mobile: Querverschieben verhindern, Kontakt/Fuss aufraeumen ---------- */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Scroll-Leiste ist eine Desktop-Hilfe und schob den Viewport seitlich.
       Auf dem Handy uebernimmt die untere Abschnittsnavigation. */
    .scroll-rail {
        display: none;
    }

    /* Mehr Luft unter dem Formular, damit die Fusszeilen-Links sauber sitzen */
    .contact-section {
        padding-bottom: 5.5rem;
    }

    footer {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .footer-links {
        margin-top: 0;
        line-height: 2;
    }

    /* Untere Navigationsleiste nicht unter die Fusszeile schieben */
    .section-nav {
        bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}


/* ---------- Mobile Landscape / sehr niedrige Hoehe ---------- */
@media (orientation: landscape) and (max-height: 600px) {
    /* Der Seitenrand fuer die linke Navigation entfaellt, sie wandert nach unten */
    :root {
        --section-nav-width: 0px;
    }

    .scroll-container,
    .contact-section,
    .proof-section {
        margin-left: 0 !important;
    }

    .main-header {
        padding-left: max(4vw, 1.25rem) !important;
        padding-right: max(4vw, 1.25rem) !important;
    }

    .scroll-section {
        left: 0 !important;
    }

    /* Linke Leiste als schmale Zeile am unteren Rand */
    .section-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        transform: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 1rem;
        background: color-mix(in srgb, var(--background) 90%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid color-mix(in srgb, var(--text-secondary) 15%, transparent);
        z-index: 40;
        opacity: 1;
    }

    .section-nav .section-link {
        opacity: 1;
        transform: none;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .section-nav.hide-on-header,
    .section-nav.hide-on-contact {
        transform: translateY(150%);
        opacity: 0;
        pointer-events: none;
    }

    /* Hero kompakt, damit er in eine Bildschirmhoehe passt */
    .main-header {
        height: 100vh;
        padding-top: 3.25rem;
        padding-bottom: 3rem;
        justify-content: center;
    }

    .main-header .header-content {
        gap: 0.4rem;
        max-width: 640px;
    }

    /* Logo so gross wie die Bildhoehe zulaesst */
    .main-header .shine-container {
        width: min(30vh, 128px);
        height: min(30vh, 128px);
        margin-bottom: 0.1rem;
    }

    .hero-headline {
        font-size: 1.4rem;
        line-height: 1.15;
    }

    .hero-copy {
        gap: 0.45rem;
    }

    .hero-sub {
        font-size: 0.82rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-actions {
        margin-top: 0.5rem;
        gap: 0.5rem;
    }

    .hero-actions a {
        padding: 0.5rem 1.1rem;
        font-size: 0.85rem;
    }

    .header-content > .hero-essence {
        margin-top: 0.3rem;
    }

    .btn-essence {
        margin-top: 0;
        padding: 0.35rem 0.8rem;
        font-size: 0.72rem;
    }

    .main-header .hero-capabilities,
    .header-background-tags {
        display: none;
    }

    /* Feste Vollbild-Abschnitte scrollbar machen statt Inhalt abzuschneiden */
    .scroll-section {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 4rem;
        padding-bottom: 3.5rem;
    }

    .scroll-section .section-content {
        margin: auto 0;
    }

    .section-content h2 {
        font-size: 1.55rem;
        margin-bottom: 0.6rem;
    }

    .section-content p {
        font-size: 0.95rem;
    }

    .dev-note {
        font-size: 0.74rem;
    }

    /* Umsetzung: Editor kompakter */
    .code-demo {
        max-width: 24rem;
        margin-top: 1rem;
    }

    .code-demo-body {
        min-height: 4.2em;
        font-size: 0.78rem;
        padding: 0.7rem 0.85rem;
    }

    .code-demo-actions {
        padding: 0 0.85rem 0.7rem;
    }

    /* Reduzierte Ansicht: Karte oben andocken, scrollen lassen */
    .essence {
        padding: 1rem;
    }

    .essence-card {
        gap: 0.8rem;
        padding: 0 1.15rem 1.15rem;
    }

    .essence-photo {
        width: 46px;
        height: 46px;
    }

    .essence-lead {
        display: none;
    }

    .essence-cards {
        gap: 0.3rem;
    }

    .essence-form {
        padding-top: 0.85rem;
    }

    .essence-form textarea {
        min-height: 2.4em;
    }

    .essence-contact {
        padding-top: 0.85rem;
    }

    /* Ausgewaehlte Projekte / Person */
    .proof-section {
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }

    .contact-section {
        padding-bottom: 4.5rem;
    }

    .proof-section h2 {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }

    .proof-lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .proof-cards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }

    .proof-card a {
        padding: 1.25rem;
    }

    .about-block {
        margin-top: 3rem;
        padding-top: 2.5rem;
        gap: 1.25rem;
    }

    .about-text p {
        font-size: 1rem;
        line-height: 1.6;
    }
}


/* ---------- Logo: verlaessliche Mindestgroesse in allen Ansichten ---------- */
/* Steht am Dateiende, damit es gegen jede Regel-Reihenfolge gewinnt.
   Der Hero ist ein Spalten-Flex mit fester Hoehe: bei Platzmangel staucht
   er seine Kinder. flex-shrink:0 schuetzt das Logo, overflow-y:auto faengt
   den Rest ab, statt Inhalt zu verlieren. */
@media (max-width: 768px) {
    .main-header {
        overflow-y: auto;
    }

    .main-header .shine-container {
        flex-shrink: 0 !important;
        width: clamp(120px, 34vw, 190px) !important;
        height: clamp(120px, 34vw, 190px) !important;
    }

    .hero-sub {
        font-size: 0.95rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .main-header .header-content {
        gap: clamp(0.7rem, 2.2vh, 1.4rem);
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .main-header {
        overflow-y: auto;
    }

    .main-header .shine-container {
        flex-shrink: 0 !important;
        width: clamp(84px, 26vh, 120px) !important;
        height: clamp(84px, 26vh, 120px) !important;
    }
}


/* "Vue 3" braucht mehr Breite als das alte "Vue" */
.header-background-tags .vue {
    width: auto;
    white-space: nowrap;
}