section{
    height: 100dvh;
    width: 100%;
    padding: 5rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section-inner{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(16px, 3vw, 40px);
    height: 100%;
    min-height: 0;
}

.text-section-index{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
    font-size: var(--base);
}
.text-section-index button{
    align-self: flex-end;
}

.text-section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
}
.text-section button{
    align-self: flex-end;
}

.media-section{
    min-height: 0;
}
.media-section img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.title-section{
    color: #FFFFFF;
}
.title-section h1{
    font-size: var(--title-h1);
    position: relative;
    z-index: 10;
}

/* Canvas Styling */
#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.Portfolio-section {background-color: var(--hero1);}

.Partner-section {background-color: var(--primary); color: #FFFFFF}

.Kontakt-section {background-color: var(--primary);color: #FFFFFF}

/* ======== Buttons ======================================================== */
.button {
    position: relative;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    padding-block: clamp(8px, 0.7vw, 10px);     /* skaliert leicht */
    padding-inline: clamp(14px, 1.2vw, 20px);   /* skaliert leicht */
    background-color: rgb(0 107 179);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 10px;
    font-weight: bold;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: var(--text-button);
    cursor: pointer;
    font-family: var(--font-header);
}
.icon { width: 40px; height: 40px; transition: transform 0.3s ease-in-out; }
.button:hover { transform: scale(1.05); border-color: #fff9; }
.button:hover .icon { transform: translate(4px); }
.button::before {
    content: "";
    position: absolute;
    width: 100px; height: 100%;
    background-image: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%);
    top: 0; left: -100px; opacity: 0.6;
}
.button:hover::before { animation: shine 1.5s ease-out infinite; }
@keyframes shine { 0% {left:-100px} 60%,100% {left:100%} }

/* ===== Scroll Reveal (Section-Übergänge) ================================= */
.section-inner.reveal {
    opacity: 0;
    transform: translateX(var(--reveal-x, 0px)) translateY(14px);
    filter: blur(2px);
    transition:
            transform 650ms cubic-bezier(.2,.8,.2,1),
            opacity 650ms ease,
            filter 650ms ease;
    will-change: transform, opacity, filter;
}

.section-inner.reveal.from-left  { --reveal-x: -34px; }
.section-inner.reveal.from-right { --reveal-x:  34px; }

.section-inner.reveal.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: blur(0);
}

/* Optional: wenn du willst, dass es beim wieder-raus-scrollen nicht erneut animiert,
   dann bleibt es nach erstem Reveal sichtbar (JS setzt "once"). */

/* Mobile: statt links/rechts eher sanft von unten */
@media (max-width: 700px) {
    .section-inner.reveal.from-left,
    .section-inner.reveal.from-right {
        --reveal-x: 0px;
    }
}

/* Accessibility: weniger Bewegung wenn User das so eingestellt hat */
@media (prefers-reduced-motion: reduce) {
    .section-inner.reveal {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
    }
}