@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap');



                                /*===============================================================================*/
                                /*                                    FÜr alle Websites                          */
                                /*===============================================================================*/


:root {
    --ink: #13293d; /* Variable */
    --ink-soft: #27445d; /* Variable */
    --surface: rgba(255, 251, 245, 0.84); /* Variable */
    --surface-strong: #fffdf9; /* Variable */
    --surface-dark: #102435; /* Variable */
    --line: rgba(19, 41, 61, 0.12); /* Variable */
    --line-strong: rgba(19, 41, 61, 0.22); /* Variable */
    --accent: #f97352; /* Variable */
    --accent-dark: #dc5d3f; /* Variable */
    --highlight: #f8c968; /* Variable */
    --mist: #d8e8f1; /* Variable */
    --shadow: 0 24px 60px rgba(19, 41, 61, 0.16); /* Variable */
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Box-Modell */
}

html {
    scroll-behavior: smooth; /* Scroll-Verhalten */
    
}

body {
    margin: 0; /* Aussenabstand */
    min-height: 100vh; /* Min-Hoehe */
    overflow-x: hidden; /* Ueberlauf horizontal */
    padding-bottom: 150px; /* Innenabstand unten */
    --parallax-soft: 0px; /* Variable */
    --parallax-soft-reverse: 0px; /* Variable */
    --hero-parallax: 0px; /* Variable */
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; /* Schriftart */
    font-size: 16px; /* Schriftgroesse */
    line-height: 1.6; /* Zeilenhoehe */
    color: var(--ink); /* Textfarbe */
    background:
        radial-gradient(circle at top left, rgba(248, 201, 104, 0.42), transparent 30%),
        radial-gradient(circle at top right, rgba(102, 168, 214, 0.18), transparent 26%),
        linear-gradient(180deg, #f5efe6 0%, #eef5f7 52%, #f8fafc 100%);
    position: relative; /* Positionierung */
    isolation: isolate; /* Isolierung */

    
}

.home-page {
    height: 100vh; /* Hoehe */
    overflow: hidden; /* Ueberlauf */
    padding-bottom: 0; /* Innenabstand unten */
}

body::before,
body::after {
    content: ""; /* Pseudo-Inhalt */
    position: fixed; /* Positionierung */
    inset: auto; /* Abstand alle Seiten */
    pointer-events: none; /* Mausereignisse */
    z-index: -1; /* Stapelreihenfolge */
    border-radius: 999px; /* Ecken rund */
    filter: blur(18px); /* Element-Filter */
    opacity: 0.72; /* Transparenz */
}

body::before {
    width: 260px; /* Breite */
    height: 260px; /* Hoehe */
    top: 110px; /* Abstand oben */
    right: -70px; /* Abstand rechts */
    background: rgba(249, 115, 82, 0.08); /* Hintergrund */
    transform: translate3d(0, var(--parallax-soft), 0); /* Transformieren */
}

body::after {
    width: 320px; /* Breite */
    height: 320px; /* Hoehe */
    bottom: 80px; /* Abstand unten */
    left: -100px; /* Abstand links */
    background: rgba(102, 168, 214, 0.1); /* Hintergrund */
    transform: translate3d(0, var(--parallax-soft-reverse), 0); /* Transformieren */
}

.background-ornaments {
    position: fixed; /* Positionierung */
    inset: 0; /* Abstand alle Seiten */
    pointer-events: none; /* Mausereignisse */
    z-index: 0; /* Stapelreihenfolge */
    overflow: hidden; /* Ueberlauf */
}

.background-ornaments span {
    position: absolute; /* Positionierung */
    display: block; /* Layouttyp */
    filter: blur(14px) saturate(0.88); /* Element-Filter */
    mix-blend-mode: screen; /* Mischmodus */
    opacity: 0.74; /* Transparenz */
}

.ornament-circle {
    border-radius: 999px; /* Ecken rund */
}

.ornament-circle-top {
    width: 180px; /* Breite */
    height: 180px; /* Hoehe */
    top: 19%; /* Abstand oben */
    left: 6%; /* Abstand links */
    background: radial-gradient(circle at 35% 35%, rgba(255, 224, 170, 0.52), rgba(249, 115, 82, 0.18) 58%, rgba(249, 115, 82, 0.06) 78%, transparent 100%); /* Hintergrund */
    transform: translate3d(0, calc(var(--parallax-soft) * 0.7), 0); /* Transformieren */
}

.ornament-circle-bottom {
    width: 220px; /* Breite */
    height: 220px; /* Hoehe */
    right: 7%; /* Abstand rechts */
    bottom: 18%; /* Abstand unten */
    background: radial-gradient(circle at 40% 40%, rgba(201, 232, 250, 0.46), rgba(102, 168, 214, 0.18) 58%, rgba(102, 168, 214, 0.06) 78%, transparent 100%); /* Hintergrund */
    transform: translate3d(0, calc(var(--parallax-soft-reverse) * 0.8), 0); /* Transformieren */
}

.ornament-triangle {
    opacity: 0.58; /* Transparenz */
}

.ornament-triangle-left {
    width: 200px; /* Breite */
    height: 200px; /* Hoehe */
    left: -18px; /* Abstand links */
    bottom: 28%; /* Abstand unten */
    background: linear-gradient(180deg, rgba(255, 226, 171, 0.38), rgba(249, 115, 82, 0.16)); /* Hintergrund */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Form zuschneiden */
    -webkit-mask:
        radial-gradient(circle at 52% 62%, transparent 0 28px, rgba(0, 0, 0, 0.92) 34px),
        linear-gradient(#000 0 0); /* Maske */
    mask:
        radial-gradient(circle at 52% 62%, transparent 0 28px, rgba(0, 0, 0, 0.92) 34px),
        linear-gradient(#000 0 0); /* Maske */
    transform: translate3d(0, calc(var(--parallax-soft-reverse) * 1.1), 0) rotate(-8deg); /* Transformieren */
}

.ornament-triangle-right {
    width: 150px; /* Breite */
    height: 150px; /* Hoehe */
    top: 24%; /* Abstand oben */
    right: 10%; /* Abstand rechts */
    background: linear-gradient(180deg, rgba(210, 236, 250, 0.36), rgba(102, 168, 214, 0.16)); /* Hintergrund */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Form zuschneiden */
    -webkit-mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle at 50% 72%, transparent 0 22px, rgba(0, 0, 0, 0.92) 28px); /* Maske */
    mask:
        linear-gradient(#000 0 0),
        radial-gradient(circle at 50% 72%, transparent 0 22px, rgba(0, 0, 0, 0.92) 28px); /* Maske */
    transform: translate3d(0, calc(var(--parallax-soft) * 0.95), 0) rotate(12deg); /* Transformieren */
}

/* ===== GEMEINSAM: LAYER, TYPOGRAFIE UND STANDARD-ELEMENTE ===== */
header,
main,
footer,
blockquote,
.projekt-modal,
.magazin-modal {
    position: relative; /* Positionierung */
    z-index: 2; /* Stapelreihenfolge */
}

h1,
h2,
.panel-text,
.home,
header button,
.get-started-btn {
    font-family: 'Space Grotesk', sans-serif; /* Schriftart */
}

a {
    color: var(--ink-soft); /* Textfarbe */
}

img,
video {
    max-width: 100%; /* Max-Breite */
}

/* ===== GEMEINSAM: HEADER, NAVIGATION UND LOGO ===== */
header {
    display: flex; /* Layouttyp */
    justify-content: space-between; /* Verteilung Hauptachse */
    align-items: center; /* Ausrichtung quer */
    gap: 18px; /* Item-Abstand */
    padding: 24px clamp(16px, 4vw, 36px); /* Innenabstand */
    margin: 0; /* Aussenabstand */
    width: 100%; /* Breite */
    position: sticky; /* Positionierung */
    top: 0; /* Abstand oben */
    z-index: 120; /* Stapelreihenfolge */
    background: rgba(16, 36, 53, 0.82); /* Hintergrund */
    border: 1px solid rgba(216, 232, 241, 0.24); /* Rahmen */
    border-radius: 0; /* Ecken rund */
    box-shadow: 0 18px 40px rgba(8, 22, 33, 0.18); /* Schatten */
    backdrop-filter: blur(14px); /* Hintergrund-Filter */
}

.home {
    order: -1; /* Reihenfolge */
}

.logo-badge {
    width: 96px; /* Breite */
    height: 96px; /* Hoehe */
    display: flex; /* Layouttyp */
    align-items: center; /* Ausrichtung quer */
    justify-content: center; /* Verteilung Hauptachse */
    padding: 10px; /* Innenabstand */
    background: radial-gradient(circle at 30% 30%, rgba(255, 253, 249, 0.98), rgba(230, 239, 244, 0.92)); /* Hintergrund */
    border: 1px solid rgba(216, 232, 241, 0.38); /* Rahmen */
    box-shadow: 0 12px 28px rgba(8, 22, 33, 0.16); /* Schatten */
    clip-path: circle(50% at 50% 50%); /*Kreis mit Clippath & Masking */
    flex: 0 0 auto; /* Flex-Kurzform */
    overflow: hidden; /* Ueberlauf */
}

.site-logo {
    display: block; /* Layouttyp */
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    object-fit: contain; /* Inhalt anpassen */
    object-position: center; /* Inhalt positionieren */
    clip-path: circle(42% at 50% 50%); /* Form zuschneiden */
    filter: saturate(1.02) contrast(1.04); /* Element-Filter */
    transform-origin: center; /* Transform-Ursprung */
    will-change: transform, opacity; /* Performance-Hinweis */
    backface-visibility: hidden; /* Rueckseite */
    animation: logo-roll-in-out 4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; /* Animation */
}

@keyframes logo-roll-in-out {
    0% {
        transform: translateY(0) scale(1) rotate(0deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    4% {
        transform: translateY(0) scale(1) rotate(180deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    6% {
        transform: translateY(0) scale(0.45) rotate(1440deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    9% {
        transform: translateY(0) scale(0.16) rotate(2160deg); /* Transformieren */
        opacity: 0.95; /* Transparenz */
    }
    11% {
        transform: translateY(0) scale(0.03) rotate(2520deg); /* Transformieren */
        opacity: 0.2; /* Transparenz */
    }
    12% {
        transform: translateY(-190px) scale(0.96) rotate(-180deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    26% {
        transform: translateY(12px) scale(1) rotate(24deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    34% {
        transform: translateY(-5px) scale(1) rotate(-14deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    42% {
        transform: translateY(0) scale(1) rotate(0deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg); /* Transformieren */
        opacity: 1; /* Transparenz */
    }
}

.divs {
    display: flex; /* Layouttyp */
    gap: 14px; /* Item-Abstand */
    align-items: center; /* Ausrichtung quer */
}

header a,
header button {
    border: 1px solid rgba(216, 232, 241, 0.2); /* Rahmen */
    background: rgba(255, 255, 255, 0.06); /* Hintergrund */
    color: #f5efe6; /* Textfarbe */
    border-radius: 999px; /* Ecken rund */
    padding: 14px 20px; /* Innenabstand */
    font-size: 0.96rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    letter-spacing: 0.03em; /* Buchstabenabstand */
    cursor: pointer; /* Mauszeiger */
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; /* Uebergang */
    position: relative; /* Positionierung */
    overflow: hidden; /* Ueberlauf */
}

header a::after,
header button::after {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    left: 16px; /* Abstand links */
    right: 16px; /* Abstand rechts */
    bottom: 7px; /* Abstand unten */
    height: 4px; /* Hoehe */
    border-radius: 999px; /* Ecken rund */
    background: linear-gradient(90deg, rgba(255, 250, 243, 0.72), rgba(255, 250, 243, 1), rgba(255, 250, 243, 0.72)); /* Hintergrund */
    box-shadow: 0 0 10px rgba(255, 250, 243, 0.45); /* Schatten */
    transform: scaleX(0); /* Transformieren */
    transform-origin: left center; /* Transform-Ursprung */
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); /* Uebergang */
    z-index: 1; /* Stapelreihenfolge */
    opacity: 0; /* Transparenz */
}

header a:hover,
header button:hover {
    transform: translateY(-2px); /* Transformieren */
    background: var(--accent); /* Hintergrund */
    border-color: var(--accent); /* Rahmenfarbe */
    box-shadow: 0 12px 24px rgba(249, 115, 82, 0.28); /* Schatten */
}

header .nav-current,
header .nav-current:hover {
    background: linear-gradient(135deg, var(--accent), #ff8d56); /* Hintergrund */
    border-color: rgba(255, 250, 243, 0.65); /* Rahmenfarbe */
    color: #fffaf3; /* Textfarbe */
    box-shadow: 0 14px 30px rgba(249, 115, 82, 0.34); /* Schatten */
    transform: translateY(-2px); /* Transformieren */
    isolation: isolate; /* Isolierung */
}

header .nav-current::after {
    opacity: 1; /* Transparenz */
    transform: scaleX(1); /* Transformieren */
    animation: nav-underline-grow 420ms cubic-bezier(0.22, 1, 0.36, 1); /* Animation */
}

@keyframes nav-underline-grow {
    0% {
        transform: scaleX(0.06); /* Transformieren */
    }
    2% {
        transform: scaleX(0.06); /* Transformieren */
    }
    100% {
        transform: scaleX(1); /* Transformieren */
    }
}

.hamburger {
    display: none; /* Layouttyp */
    font-size: 1.55rem; /* Schriftgroesse */
    padding: 10px 14px; /* Innenabstand */
    line-height: 1; /* Zeilenhoehe */
}

                                /*===============================================================================*/
                                /*                                    FÜr alle Websites                          */
                                /*===============================================================================*/
.gallery-container {
    position: relative; /* Positionierung */
    display: flex; /* Layouttyp */
    justify-content: center; /* Verteilung Hauptachse */
    width: min(1120px, calc(100vw - 48px)); /* Breite */
    margin: 20px auto 0; /* Aussenabstand */
    border-radius: 34px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
    background: #102435; /* Hintergrund */
    box-shadow: 0 26px 60px rgba(19, 41, 61, 0.22); /* Schatten */
    border: 1px solid rgba(255, 255, 255, 0.22); /* Rahmen */
}

.gallery-container::before {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    inset: 0; /* Abstand alle Seiten */
    background:
        linear-gradient(100deg, rgba(16, 36, 53, 0.78) 8%, rgba(16, 36, 53, 0.18) 45%, rgba(16, 36, 53, 0.62) 100%),
        linear-gradient(180deg, rgba(248, 201, 104, 0.12), transparent 35%);
    z-index: 4; /* Stapelreihenfolge */
    pointer-events: none; /* Mausereignisse */
}

.gallery-container::after {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    inset: 18px; /* Abstand alle Seiten */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Rahmen */
    border-radius: 24px; /* Ecken rund */
    z-index: 4; /* Stapelreihenfolge */
    pointer-events: none; /* Mausereignisse */
}

.background {
    width: 100%; /* Breite */
    display: block; /* Layouttyp */
    max-height: calc(100vh - 250px); /* Max-Hoehe */
    min-height: 420px; /* Min-Hoehe */
    object-fit: cover; /* Inhalt anpassen */
    filter: saturate(1.02) contrast(1.02) brightness(0.78); /* Element-Filter */
    transform: translate3d(0, var(--hero-parallax), 0) scale(1.06); /* Parallaxeffekt*/
    transform-origin: center top; /* Transform-Ursprung */
    will-change: transform; /* Performance-Hinweis */
}

.gallery-side-panel {
    position: absolute; /* Positionierung */
    top: 50%; /* Abstand oben */
    left: 50%; /* Abstand links */
    transform: translate(-50%, -50%); /* Transformieren */
    z-index: 15; /* Stapelreihenfolge */
    width: min(520px, 74%); /* Breite */
    padding: 34px 34px 30px; /* Innenabstand */
    border-radius: 28px; /* Ecken rund */
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.92), rgba(255, 247, 237, 0.9)); /* Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.55); /* Rahmen */
    box-shadow: 0 18px 40px rgba(16, 36, 53, 0.24); /* Schatten */
    text-align: center; /* Textausrichtung */
    backdrop-filter: blur(10px); /* Hintergrund-Filter */
}

.home-hero .background {
    max-height: calc(100vh - 285px); /* Max-Hoehe */
    min-height: 280px; /* Min-Hoehe */
}

.home-hero .gallery-side-panel {
    width: min(480px, 70%); /* Breite */
    padding: 28px 28px 24px; /* Innenabstand */
}

.home-page footer {
    position: fixed; /* Positionierung */
}

.panel-content {
    display: flex; /* Layouttyp */
    flex-direction: column; /* Flex-Richtung */
    align-items: center; /* Ausrichtung quer */
    gap: 18px; /* Item-Abstand */
}

.panel-text {
    margin: 0; /* Aussenabstand */
    font-size: clamp(1.7rem, 3vw, 3.25rem); /* Schriftgroesse */
    line-height: 1.05; /* Zeilenhoehe */
    font-weight: 700; /* Schriftstaerke */
    letter-spacing: -0.04em; /* Buchstabenabstand */
    text-transform: uppercase; /* Text-Form */
    color: var(--ink); /* Textfarbe */
}

.panel-content::before {
    content: "Persönlich. Sportlich. Kreativ."; /* Pseudo-Inhalt */
    display: inline-block; /* Layouttyp */
    padding: 8px 14px; /* Innenabstand */
    border-radius: 999px; /* Ecken rund */
    background: rgba(19, 41, 61, 0.08); /* Hintergrund */
    color: var(--ink-soft); /* Textfarbe */
    font-size: 0.82rem; /* Schriftgroesse */
    font-weight: 800; /* Schriftstaerke */
    letter-spacing: 0.08em; /* Buchstabenabstand */
    text-transform: uppercase; /* Text-Form */
}

.get-started-btn {
    border: 0; /* Rahmen */
    border-radius: 999px; /* Ecken rund */
    padding: 14px 24px; /* Innenabstand */
    background: linear-gradient(135deg, var(--accent), #ff8d56); /* Hintergrund */
    color: #fffaf3; /* Textfarbe */
    font-size: 0.95rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    letter-spacing: 0.04em; /* Buchstabenabstand */
    cursor: pointer; /* Mauszeiger */
    box-shadow: 0 16px 28px rgba(249, 115, 82, 0.28); /* Schatten */
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; /* Uebergang */
}

.get-started-btn:hover {
    transform: translateY(-2px) scale(1.01); /* Transformieren */
    box-shadow: 0 18px 34px rgba(249, 115, 82, 0.34); /* Schatten */
    filter: saturate(1.08); /* Element-Filter */
}

/* ===== GEMEINSAM: FOOTER ===== */
footer {
    position: fixed; /* Positionierung */
    left: 0; /* Abstand links */
    bottom: 0; /* Abstand unten */
    z-index: 100; /* Stapelreihenfolge */
    display: flex; /* Layouttyp */
    justify-content: center; /* Verteilung Hauptachse */
    align-items: center; /* Ausrichtung quer */
    flex-wrap: wrap; /* Flex-Umbruch */
    gap: 10px 30px; /* Item-Abstand */
    width: 100%; /* Breite */
    padding: 24px clamp(16px, 4vw, 36px); /* Innenabstand */
    background: rgba(16, 36, 53, 0.82); /* Hintergrund */
    color: #f5efe6; /* Textfarbe */
    font-size: clamp(0.96rem, 1.2vw, 1.08rem); /* Schriftgroesse */
    border: 1px solid rgba(216, 232, 241, 0.24); /* Rahmen */
    backdrop-filter: blur(12px); /* Hintergrund-Filter */
    box-shadow: 0 18px 40px rgba(8, 22, 33, 0.18); /* Schatten */
}

footer a {
    color: #f5efe6; /* Textfarbe */
    text-decoration-color: rgba(248, 201, 104, 0.6); /* Deko-Farbe */
    text-underline-offset: 0.2em; /* Unterstrich-Abstand */
}

/* ===== UEBER MICH / FREIZEIT / IMPRESSUM: GETEILTE SEITENSTRUKTUR UND KARTEN ===== */
.about-page {
    min-height: 100vh; /* Min-Hoehe */
    display: flex; /* Layouttyp */
    flex-direction: column; /* Flex-Richtung */
}

.about-main {
    width: min(1120px, 94vw); /* Breite */
    margin: 0 auto; /* Aussenabstand */
}

.about-main,
/* ===== IMPRESSUM.HTML: IMPRESSUMSBLOCK ===== */
.impressum-main {
    padding-left: 8px; /* Innenabstand links */
    padding-right: 8px; /* Innenabstand rechts */
}

.steckbrief,
.impressum-card,
.abschnitt,
.maradona-quote {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.92), rgba(255, 255, 255, 0.78)); /* Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.62); /* Rahmen */
    box-shadow: var(--shadow); /* Schatten */
    backdrop-filter: blur(10px); /* Hintergrund-Filter */
}

.steckbrief {
    width: min(760px, 100%); /* Breite */
    margin: 5vh auto 0; /* Aussenabstand */
    padding: 28px; /* Innenabstand */
    border-radius: 28px; /* Ecken rund */
    display: grid; /* Layouttyp */
    grid-template-columns: minmax(0, 1fr) 220px; /* Grid-Spalten */
    column-gap: 24px; /* Spaltenabstand */
    row-gap: 8px; /* Zeilenabstand */
    align-items: start; /* Ausrichtung quer */
    position: relative; /* Positionierung */
    overflow: hidden; /* Ueberlauf */
}

.steckbrief::before,
.impressum-card::before,
.abschnitt::before,
.maradona-quote::before {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    inset: 0 auto auto 0; /* Abstand alle Seiten */
    width: 120px; /* Breite */
    height: 120px; /* Hoehe */
    background: radial-gradient(circle, rgba(248, 201, 104, 0.18), transparent 70%); /* Hintergrund */
    pointer-events: none; /* Mausereignisse */
}

.steckbrief::after,
.impressum-card::after,
.abschnitt::after {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    top: 0; /* Abstand oben */
    left: 28px; /* Abstand links */
    width: 132px; /* Breite */
    height: 4px; /* Hoehe */
    border-radius: 999px; /* Ecken rund */
    background: linear-gradient(90deg, var(--accent), rgba(249, 115, 82, 0.2)); /* Hintergrund */
    pointer-events: none; /* Mausereignisse */
}

.steckbrief h1,
.impressum-card h1 {
    margin: 0 0 16px; /* Aussenabstand */
    color: var(--ink); /* Textfarbe */
    letter-spacing: -0.04em; /* Buchstabenabstand */
}

.steckbrief h1 {
    grid-column: 1; /* Grid-Spalte */
    font-size: clamp(2rem, 3vw, 2.7rem); /* Schriftgroesse */
}

.steckbrief p {
    margin: 0; /* Aussenabstand */
    grid-column: 1; /* Grid-Spalte */
    overflow-wrap: anywhere; /* Wortumbruch */
    font-size: 1.02rem; /* Schriftgroesse */
}

.about-table-wrap {
    grid-column: 1; /* Grid-Spalte */
    margin-top: 12px; /* Aussenabstand oben */
}

.about-table {
    width: 100%; /* Breite */
    border-collapse: separate; /* Tabellenrahmen */
    border-spacing: 0; /* Zellabstand */
    overflow: hidden; /* Ueberlauf */
    border-radius: 20px; /* Ecken rund */
    border: 1px solid rgba(19, 41, 61, 0.12); /* Rahmen */
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.95), rgba(240, 247, 250, 0.92)); /* Hintergrund */
    box-shadow: 0 12px 28px rgba(19, 41, 61, 0.1); /* Schatten */
}

.about-table td {
    padding: 14px 18px; /* Innenabstand */
    border-bottom: 1px solid rgba(19, 41, 61, 0.09); /* Rahmen unten */
    font-size: 0.98rem; /* Schriftgroesse */
}

.about-table tr:last-child td {
    border-bottom: 0; /* Rahmen unten */
}

.about-table td:first-child {
    width: 48%; /* Breite */
    font-weight: 800; /* Schriftstaerke */
    color: var(--ink); /* Textfarbe */
    background: rgba(248, 201, 104, 0.14); /* Hintergrund */
}

.about-table td:last-child {
    color: rgba(19, 41, 61, 0.84); /* Textfarbe */
}

.steckbrief strong {
    color: var(--ink); /* Textfarbe */
    position: relative; /* Positionierung */
}

.steckbrief a,
.impressum-card a {
    color: var(--accent-dark); /* Textfarbe */
    font-weight: 700; /* Schriftstaerke */
}

.steckbrief a:hover,
.impressum-card a:hover {
    color: var(--ink); /* Textfarbe */
}

.steckbrief img {
    grid-column: 2; /* Grid-Spalte */
    grid-row: 1 / span 6; /* Grid-Zeile */
    justify-self: end; /* Eigene Ausrichtung */
    align-self: center; /* Eigene Ausrichtung */
    width: 100%; /* Breite */
    max-width: 220px; /* Max-Breite */
    max-height: 240px; /* Max-Hoehe */
    object-fit: cover; /* Inhalt anpassen */
    border-radius: 22px; /* Ecken rund */
    border: 4px solid rgba(255, 255, 255, 0.72); /* Rahmen */
    box-shadow: 0 16px 36px rgba(19, 41, 61, 0.2); /* Schatten */
}

.maradona-quote {
    position: relative; /* Positionierung */
    width: min(760px, 100%); /* Breite */
    margin: 18px auto 12px; /* Aussenabstand */
    padding: 20px 24px; /* Innenabstand */
    border-radius: 22px; /* Ecken rund */
    font-weight: 700; /* Schriftstaerke */
    color: var(--ink); /* Textfarbe */
    text-align: center; /* Textausrichtung */
}

.freizeit-page .steckbrief {
    width: min(860px, 100%); /* Breite */
    margin-top: 8vh; /* Aussenabstand oben */
    margin-bottom: 40px; /* Aussenabstand unten */
    padding: 34px; /* Innenabstand */
    background: rgba(255, 255, 255, 0.92); /* Hintergrund */
    border: none; /* Rahmen */
    grid-template-columns: minmax(0, 1fr) 240px; /* Grid-Spalten */
    grid-template-areas: "content media"; /* Grid-Bereiche */
    column-gap: 30px; /* Spaltenabstand */
    row-gap: 12px; /* Zeilenabstand */
}

.freizeit-content {
    grid-area: content; /* Grid-Bereich */
    min-width: 0; /* Min-Breite */
}

.freizeit-content h1 {
    margin-bottom: 14px; /* Aussenabstand unten */
}

.freizeit-facts {
    margin: 0; /* Aussenabstand */
    padding: 0; /* Innenabstand */
    list-style: none; /* Listenstil */
    display: grid; /* Layouttyp */
    gap: 10px; /* Item-Abstand */
}

.freizeit-facts li {
    padding: 10px 12px; /* Innenabstand */
    border-radius: 12px; /* Ecken rund */
    background: transparent; /* Hintergrund */
    border: none; /* Rahmen */
    color: var(--ink); /* Textfarbe */
    line-height: 1.45; /* Zeilenhoehe */
}

.freizeit-facts span {
    font-weight: 800; /* Schriftstaerke */
    color: var(--ink); /* Textfarbe */
}

.freizeit-image-wrap {
    grid-area: media; /* Grid-Bereich */
    margin: 0; /* Aussenabstand */
    align-self: center; /* Eigene Ausrichtung */
}

.freizeit-image-wrap img {
    width: 100%; /* Breite */
    display: block; /* Layouttyp */
}

.freizeit-page .maradona-quote {
    width: min(860px, calc(94vw - 16px)); /* Breite */
    margin-top: 0; /* Aussenabstand oben */
    margin-bottom: 28px; /* Aussenabstand unten */
    padding: 24px 30px; /* Innenabstand */
    font-size: 1.04rem; /* Schriftgroesse */
    border: none; /* Rahmen */
}

.freizeit-page .steckbrief img {
    max-width: 240px; /* Max-Breite */
    max-height: 270px; /* Max-Hoehe */
    border: none; /* Rahmen */
}

.maradona-quote::after {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    left: 24px; /* Abstand links */
    top: 18px; /* Abstand oben */
    width: 110px; /* Breite */
    height: 4px; /* Hoehe */
    border-radius: 999px; /* Ecken rund */
    background: linear-gradient(90deg, var(--accent), var(--highlight)); /* Hintergrund */
}

.impressum-main {
    width: min(980px, 92vw); /* Breite */
    margin: 28px auto 0; /* Aussenabstand */
}

.impressum-card {
    position: relative; /* Positionierung */
    padding: 34px 32px; /* Innenabstand */
    border-radius: 30px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
}

.impressum-card h1 {
    font-size: clamp(2rem, 4vw, 3rem); /* Schriftgroesse */
}

.impressum-card .impressum-subtitle {
    margin-top: 30px; /* Aussenabstand oben */
}

.impressum-card h2 {
    margin: 22px 0 6px; /* Aussenabstand */
    color: var(--ink-soft); /* Textfarbe */
    font-size: 1.16rem; /* Schriftgroesse */
    letter-spacing: 0.01em; /* Buchstabenabstand */
    position: relative; /* Positionierung */
}

.impressum-card h2::before,
.abschnitt h2::before {
    content: ""; /* Pseudo-Inhalt */
    display: inline-block; /* Layouttyp */
    width: 10px; /* Breite */
    height: 10px; /* Hoehe */
    margin-right: 10px; /* Aussenabstand rechts */
    border-radius: 999px; /* Ecken rund */
    background: linear-gradient(135deg, var(--accent), #ff9a66); /* Hintergrund */
    box-shadow: 0 0 0 4px rgba(249, 115, 82, 0.12); /* Schatten */
    vertical-align: middle; /* Vertikale Ausrichtung */
}

.impressum-card p {
    margin: 0; /* Aussenabstand */
    color: rgba(19, 41, 61, 0.9); /* Textfarbe */
}

/* ===== FREIZEIT.HTML: ORDNERGALERIE UND ORDNER-MODAL ===== */
.gallerie-layout {
    padding: 0 20px; /* Innenabstand */
}

.gallerie {
    display: grid; /* Layouttyp */
    grid-template-columns: repeat(3, minmax(220px, 300px)); /* Grid-Spalten */
    grid-auto-flow: dense; /* Grid-Autoplatzierung */
    justify-content: center; /* Verteilung Hauptachse */
    gap: 22px; /* Item-Abstand */
    margin: 56px auto 110px; /* Aussenabstand */
}

.gallerie .featured {
    grid-column: 2 / 4; /* Grid-Spalte */
    grid-row: 2 / 4; /* Grid-Zeile */
    margin: 0; /* Aussenabstand */
    position: relative; /* Positionierung */
    border-radius: 26px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
    border: 4px solid rgba(255, 255, 255, 0.74); /* Rahmen */
    box-shadow: 0 20px 44px rgba(19, 41, 61, 0.22); /* Schatten */
    background: #102435; /* Hintergrund */
}

.featured-shot {
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    min-height: 440px; /* Min-Hoehe */
    object-fit: cover; /* Inhalt anpassen */
    display: block; /* Layouttyp */
}

.gallerie .featured figcaption {
    position: absolute; /* Positionierung */
    left: 12px; /* Abstand links */
    bottom: 12px; /* Abstand unten */
    padding: 6px 12px; /* Innenabstand */
    border-radius: 999px; /* Ecken rund */
    font-size: 0.8rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    letter-spacing: 0.06em; /* Buchstabenabstand */
    text-transform: uppercase; /* Text-Form */
    color: #f5efe6; /* Textfarbe */
    background: rgba(16, 36, 53, 0.72); /* Hintergrund */
    border: 1px solid rgba(216, 232, 241, 0.4); /* Rahmen */
}

.folder-card {
    border: 0; /* Rahmen */
    border-radius: 24px; /* Ecken rund */
    padding: 0; /* Innenabstand */
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(235, 244, 249, 0.9)); /* Hintergrund */
    cursor: pointer; /* Mauszeiger */
    box-shadow: 0 18px 36px rgba(19, 41, 61, 0.16); /* Schatten */
    border: 3px solid rgba(255, 255, 255, 0.7); /* Rahmen */
    overflow: hidden; /* Ueberlauf */
    text-align: left; /* Textausrichtung */
    transition: transform 180ms ease, box-shadow 180ms ease; /* Uebergang */
}

.folder-card:hover {
    transform: translateY(-6px); /* Transformieren */
    box-shadow: 0 24px 42px rgba(19, 41, 61, 0.24); /* Schatten */
}

.folder-card img {
    width: 100%; /* Breite */
    aspect-ratio: 4 / 3; /* Seitenverhaeltnis */
    object-fit: cover; /* Inhalt anpassen */
    display: block; /* Layouttyp */
}

.folder-card span {
    display: block; /* Layouttyp */
    margin: 12px 12px 0; /* Aussenabstand */
    font-family: 'Space Grotesk', sans-serif; /* Schriftart */
    font-size: 1rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    color: var(--ink); /* Textfarbe */
}

.folder-card small {
    display: block; /* Layouttyp */
    margin: 4px 12px 14px; /* Aussenabstand */
    color: rgba(19, 41, 61, 0.72); /* Textfarbe */
    font-weight: 600; /* Schriftstaerke */
}

.folder-card.nordsee {
    background: linear-gradient(160deg, rgba(228, 244, 255, 0.94), rgba(240, 252, 255, 0.92)); /* Hintergrund */
}

.folder-card.trieste {
    background: linear-gradient(160deg, rgba(255, 242, 223, 0.94), rgba(255, 249, 238, 0.92)); /* Hintergrund */
}

.folder-card.portugal {
    background: linear-gradient(160deg, rgba(255, 233, 226, 0.94), rgba(255, 245, 240, 0.92)); /* Hintergrund */
}

.folder-card.fussball {
    background: linear-gradient(160deg, rgba(228, 255, 234, 0.94), rgba(241, 255, 244, 0.92)); /* Hintergrund */
}

.folder-modal {
    position: fixed; /* Positionierung */
    inset: 0; /* Abstand alle Seiten */
    display: none; /* Layouttyp */
    align-items: center; /* Ausrichtung quer */
    justify-content: center; /* Verteilung Hauptachse */
    padding: 20px; /* Innenabstand */
    background: rgba(1, 20, 36, 0.82); /* Hintergrund */
    z-index: 350; /* Stapelreihenfolge */
}

.folder-modal.active {
    display: flex; /* Layouttyp */
}

.folder-modal-content {
    position: relative; /* Positionierung */
    width: min(1020px, 94vw); /* Breite */
    max-height: 88vh; /* Max-Hoehe */
    overflow-y: auto; /* Ueberlauf vertikal */
    border-radius: 18px; /* Ecken rund */
    padding: 54px 14px 16px; /* Innenabstand */
    background: #fffdf9; /* Hintergrund */
    border: 2px solid #c6deee; /* Rahmen */
    box-shadow: 0 20px 46px rgba(1, 40, 66, 0.36); /* Schatten */
}

.folder-modal-close {
    position: absolute; /* Positionierung */
    top: 10px; /* Abstand oben */
    right: 10px; /* Abstand rechts */
    border: 0; /* Rahmen */
    border-radius: 10px; /* Ecken rund */
    width: 34px; /* Breite */
    height: 34px; /* Hoehe */
    background: #d9ecf7; /* Hintergrund */
    color: var(--ink); /* Textfarbe */
    font-size: 1.3rem; /* Schriftgroesse */
    line-height: 1; /* Zeilenhoehe */
    cursor: pointer; /* Mauszeiger */
}

.folder-modal-content h2 {
    margin: 0 0 12px; /* Aussenabstand */
    font-family: 'Space Grotesk', sans-serif; /* Schriftart */
}

.folder-modal-grid {
    display: grid; /* Layouttyp */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* Grid-Spalten */
    gap: 12px; /* Item-Abstand */
}

.folder-modal-grid figure {
    margin: 0; /* Aussenabstand */
    position: relative; /* Positionierung */
}

.folder-modal-grid img {
    width: 100%; /* Breite */
    aspect-ratio: 3 / 4; /* Seitenverhaeltnis */
    object-fit: cover; /* Inhalt anpassen */
    border-radius: 14px; /* Ecken rund */
    border: 2px solid rgba(216, 232, 241, 0.7); /* Rahmen */
    background: #f4f9fc; /* Hintergrund */
}

.folder-modal-grid figcaption {
    position: absolute; /* Positionierung */
    left: 8px; /* Abstand links */
    bottom: 8px; /* Abstand unten */
    padding: 4px 8px; /* Innenabstand */
    border-radius: 999px; /* Ecken rund */
    font-size: 0.72rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    color: #f5efe6; /* Textfarbe */
    background: rgba(16, 36, 53, 0.74); /* Hintergrund */
    border: 1px solid rgba(216, 232, 241, 0.42); /* Rahmen */
}

/* ===== GALERIE.HTML: GEMISCHTE GALERIE ===== */
.mixed-gallery-main {
    width: min(1240px, calc(100vw - 34px)); /* Breite */
    margin: 24px auto 64px; /* Aussenabstand */
}

.mixed-gallery-section {
    padding: 16px; /* Innenabstand */
    border-radius: 24px; /* Ecken rund */
    background: rgba(255, 253, 249, 0.78); /* Hintergrund */
    border: 1px solid rgba(19, 41, 61, 0.1); /* Rahmen */
    box-shadow: 0 12px 28px rgba(19, 41, 61, 0.1); /* Schatten */
}

.mixed-gallery-section h2 {
    margin: 0 0 14px; /* Aussenabstand */
    font-size: clamp(1.08rem, 2.4vw, 1.34rem); /* Schriftgroesse */
}

.mixed-gallery-grid {
    display: grid; /* Layouttyp */
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Grid-Spalten */
    grid-auto-flow: dense; /* Grid-Autoplatzierung */
    gap: 14px; /* Item-Abstand */
}

.mixed-gallery-item {
    margin: 0; /* Aussenabstand */
    position: relative; /* Positionierung */
    border-radius: 16px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
    border: 2px solid rgba(216, 232, 241, 0.75); /* Rahmen */
    box-shadow: 0 10px 20px rgba(19, 41, 61, 0.12); /* Schatten */
    background: #ffffff; /* Hintergrund */
}

.mixed-gallery-item img,
.mixed-gallery-item video {
    width: 100%; /* Breite */
    aspect-ratio: 3 / 4; /* Seitenverhaeltnis */
    object-fit: cover; /* Inhalt anpassen */
    display: block; /* Layouttyp */
}

.mixed-gallery-item .ski-focus {
    object-position: 24% 45%; /* Inhalt positionieren */
}

.mixed-gallery-item figcaption {
    position: absolute; /* Positionierung */
    left: 8px; /* Abstand links */
    bottom: 8px; /* Abstand unten */
    margin: 0; /* Aussenabstand */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 999px; /* Ecken rund */
    font-size: 0.74rem; /* Schriftgroesse */
    font-weight: 700; /* Schriftstaerke */
    color: #f5efe6; /* Textfarbe */
    background: rgba(16, 36, 53, 0.76); /* Hintergrund */
    border: 1px solid rgba(216, 232, 241, 0.42); /* Rahmen */
}

.ich-spotlight {
    grid-column: 2 / span 2; /* Grid-Spalte */
    grid-row: span 2; /* Grid-Zeile */
    box-shadow: 0 22px 42px rgba(14, 56, 32, 0.26); /* Schatten */
    border-color: rgba(111, 181, 132, 0.55); /* Rahmenfarbe */
}

.ich-spotlight img {
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    aspect-ratio: auto; /* Seitenverhaeltnis */
    object-fit: cover; /* Inhalt anpassen */
}

.ich-spotlight figcaption {
    font-size: 0.92rem; /* Schriftgroesse */
    font-weight: 800; /* Schriftstaerke */
    color: #eaffee; /* Textfarbe */
    background: rgba(15, 111, 64, 0.84); /* Hintergrund */
}

/* ===== SCHULPROJEKTE.HTML: PROJEKTKARTEN UND VORSCHAUEN ===== */
.abschnitte-grid {
    display: grid; /* Layouttyp */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Grid-Spalten */
    gap: 28px; /* Item-Abstand */
    margin: 30px 60px 70px; /* Aussenabstand */
}

.abschnitt {
    position: relative; /* Positionierung */
    width: min(100%, 520px); /* Breite */
    justify-self: center; /* Eigene Ausrichtung */
    padding: 16px; /* Innenabstand */
    border-radius: 24px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
}

.projekt-gruppen-titel {
    grid-column: 1 / -1; /* Grid-Spalte */
    width: fit-content; /* Breite */
    margin: 10px auto -6px; /* Aussenabstand */
    padding: 12px 24px; /* Innenabstand */
    border: 1px solid rgba(216, 232, 241, 0.9); /* Rahmen */
    border-radius: 999px; /* Ecken rund */
    background:
        radial-gradient(circle at top left, rgba(248, 201, 104, 0.32), transparent 55%),
        linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(232, 243, 248, 0.92)); /* Hintergrund */
    box-shadow:
        0 16px 34px rgba(19, 41, 61, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82); /* Schatten */
    text-align: center; /* Textausrichtung */
    font-size: clamp(1.8rem, 2.4vw, 2.5rem); /* Schriftgroesse */
    color: var(--ink); /* Textfarbe */
    letter-spacing: 0.14em; /* Zeichenabstand */
    line-height: 1; /* Zeilenhoehe */
    position: relative; /* Positionierung */
    overflow: hidden; /* Ueberlauf */
}

.projekt-gruppen-titel::before,
.projekt-gruppen-titel::after {
    content: ""; /* Pseudo-Inhalt */
    position: absolute; /* Positionierung */
    top: 50%; /* Abstand oben */
    width: 14px; /* Breite */
    height: 14px; /* Hoehe */
    border-radius: 999px; /* Ecken rund */
    transform: translateY(-50%); /* Transformieren */
}

.projekt-gruppen-titel::before {
    left: 14px; /* Abstand links */
    background: linear-gradient(135deg, var(--accent), #ff9a66); /* Hintergrund */
    box-shadow: 0 0 0 5px rgba(249, 115, 82, 0.12); /* Schatten */
}

.projekt-gruppen-titel::after {
    right: 14px; /* Abstand rechts */
    background: linear-gradient(135deg, var(--highlight), #ffe2ab); /* Hintergrund */
    box-shadow: 0 0 0 5px rgba(248, 201, 104, 0.16); /* Schatten */
}

.abschnitt img {
    width: 100%; /* Breite */
    aspect-ratio: 3 / 4; /* Seitenverhaeltnis */
    object-fit: cover; /* Inhalt anpassen */
    display: block; /* Layouttyp */
    border-radius: 18px; /* Ecken rund */
    box-shadow: 0 12px 26px rgba(19, 41, 61, 0.12); /* Schatten */
}

.projekt-preview {
    width: 100%; /* Breite */
    aspect-ratio: 3 / 4; /* Seitenverhaeltnis */
    position: relative; /* Positionierung */
    border-radius: 18px; /* Ecken rund */
    overflow: hidden; /* Ueberlauf */
}

.projekt-bild-button {
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    border: 0; /* Rahmen */
    padding: 0; /* Innenabstand */
    cursor: pointer; /* Mauszeiger */
    background: transparent; /* Hintergrund */
}

.projekt-bild-vorschau {
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    display: block; /* Layouttyp */
    object-fit: cover; /* Inhalt anpassen */
    background: linear-gradient(180deg, #f4fbff 0%, #d9ecf7 100%); /* Hintergrund */
    border: 2px solid rgba(71, 135, 180, 0.28); /* Rahmen */
    box-shadow: 0 12px 26px rgba(19, 41, 61, 0.12); /* Schatten */
}

.projekt-bild-vorschau:hover {
    transform: scale(1.02); /* Transformieren */
    transition: transform 120ms ease; /* Uebergang */
}

.magazin-mini-frame {
    width: calc(100% + 16px); /* Breite */
    height: 100%; /* Hoehe */
    margin-right: -16px; /* Aussenabstand rechts */
    border: 2px solid rgba(71, 135, 180, 0.28); /* Rahmen */
    border-radius: 18px; /* Ecken rund */
    display: block; /* Layouttyp */
    background: #f4f9fc; /* Hintergrund */
    pointer-events: none; /* Mausereignisse */
    transition: transform 120ms ease; /* Uebergang */
}

.projekt-bild-button:hover .magazin-mini-frame {
    transform: scale(1.02); /* Transformieren */
}

.abschnitt h2 {
    margin: 16px 0 6px; /* Aussenabstand */
    font-size: 1.5rem; /* Schriftgroesse */
    color: var(--ink); /* Textfarbe */
}

.abschnitt p {
    margin: 0; /* Aussenabstand */
    color: rgba(19, 41, 61, 0.84); /* Textfarbe */
}

.gallerie img,
.gallerie video,
.steckbrief img,
.abschnitt img,
.projekt-preview {
    outline: 1px solid rgba(249, 115, 82, 0.14); /* Aussenlinie */
    outline-offset: -1px; /* Abstand Outline */
}

/* ===== GEMEINSAM: MODALE FENSTER FUER PROJEKTE UND MAGAZIN ===== */
.projekt-modal {
    position: fixed; /* Positionierung */
    inset: 0; /* Abstand alle Seiten */
    background: rgba(1, 20, 36, 0.78); /* Hintergrund */
    display: none; /* Layouttyp */
    align-items: center; /* Ausrichtung quer */
    justify-content: center; /* Verteilung Hauptachse */
    z-index: 300; /* Stapelreihenfolge */
    padding: 24px; /* Innenabstand */
}

.projekt-modal.active {
    display: flex; /* Layouttyp */
}

.projekt-modal-content {
    position: relative; /* Positionierung */
    width: min(1080px, 96vw); /* Breite */
    height: min(82vh, 780px); /* Hoehe */
    background: #ffffff; /* Hintergrund */
    border-radius: 16px; /* Ecken rund */
    border: 2px solid #c6deee; /* Rahmen */
    box-shadow: 0 18px 44px rgba(1, 40, 66, 0.34); /* Schatten */
    padding: 48px 14px 14px; /* Innenabstand */
}

.projekt-modal-content h3 {
    margin: 0 0 10px; /* Aussenabstand */
    color: var(--ink); /* Textfarbe */
}

.projekt-modal-close {
    position: absolute; /* Positionierung */
    top: 10px; /* Abstand oben */
    right: 10px; /* Abstand rechts */
    border: 0; /* Rahmen */
    border-radius: 10px; /* Ecken rund */
    width: 34px; /* Breite */
    height: 34px; /* Hoehe */
    background: #d9ecf7; /* Hintergrund */
    color: var(--ink); /* Textfarbe */
    font-size: 1.3rem; /* Schriftgroesse */
    line-height: 1; /* Zeilenhoehe */
    cursor: pointer; /* Mauszeiger */
}

.projekt-modal-close:hover {
    background: #c7e2f3; /* Hintergrund */
}

#projektModalImage {
    width: 100%; /* Breite */
    height: calc(100% - 44px); /* Hoehe */
    object-fit: contain; /* Inhalt anpassen */
    border-radius: 10px; /* Ecken rund */
    display: block; /* Layouttyp */
    background: #f4f9fc; /* Hintergrund */
}

.magazin-modal {
    position: fixed; /* Positionierung */
    inset: 0; /* Abstand alle Seiten */
    background: rgba(1, 20, 36, 0.84); /* Hintergrund */
    display: none; /* Layouttyp */
    align-items: center; /* Ausrichtung quer */
    justify-content: center; /* Verteilung Hauptachse */
    z-index: 320; /* Stapelreihenfolge */
    padding: 20px; /* Innenabstand */
}

.magazin-modal.active {
    display: flex; /* Layouttyp */
}

.magazin-modal-content {
    position: relative; /* Positionierung */
    width: min(860px, 88vw); /* Breite */
    height: min(84vh, 760px); /* Hoehe */
    background: #ffffff; /* Hintergrund */
    border-radius: 16px; /* Ecken rund */
    border: 2px solid #c6deee; /* Rahmen */
    box-shadow: 0 18px 44px rgba(1, 40, 66, 0.34); /* Schatten */
    padding: 56px 14px 14px; /* Innenabstand */
}

.magazin-close {
    position: absolute; /* Positionierung */
    top: 10px; /* Abstand oben */
    right: 10px; /* Abstand rechts */
    border: 0; /* Rahmen */
    border-radius: 10px; /* Ecken rund */
    width: 34px; /* Breite */
    height: 34px; /* Hoehe */
    background: #d9ecf7; /* Hintergrund */
    color: var(--ink); /* Textfarbe */
    font-size: 1.3rem; /* Schriftgroesse */
    line-height: 1; /* Zeilenhoehe */
    cursor: pointer; /* Mauszeiger */
}

#magazinViewer {
    width: 100%; /* Breite */
    height: 100%; /* Hoehe */
    overflow: auto; /* Ueberlauf */
    border: 1px solid #c6deee; /* Rahmen */
    border-radius: 10px; /* Ecken rund */
    background: #f4f9fc; /* Hintergrund */
}

.abschnitt-letzter {
    grid-column: 1 / -1; /* Grid-Spalte */
    width: min(100%, 520px); /* Breite */
}

/* ===== RESPONSIVE: TABLET UND KLEINERE LAPTOPS ===== */
@media (max-width: 1024px) {
    .gallery-container {
        width: min(100vw - 32px, 1180px); /* Breite */
    }

    .background {
        min-height: 460px; /* Min-Hoehe */
    }

    .gallery-side-panel {
        width: min(500px, 78%); /* Breite */
        top: 54%; /* Abstand oben */
    }

    .home-hero .background {
        min-height: 300px; /* Min-Hoehe */
    }

    .home-hero .gallery-side-panel {
        width: min(460px, 74%); /* Breite */
    }

    .steckbrief {
        width: min(840px, 100%); /* Breite */
        margin-top: 30px; /* Aussenabstand oben */
        grid-template-columns: minmax(0, 1fr) 200px; /* Grid-Spalten */
    }

    .impressum-main {
        width: min(980px, 94vw); /* Breite */
    }

    .abschnitte-grid {
        margin: 30px 24px 56px; /* Aussenabstand */
        gap: 22px; /* Item-Abstand */
    }

}

/* ===== RESPONSIVE: TABLETS UND HANDYS ===== */
@media (max-width: 768px) {
    body {
        padding-bottom: 150px; /* Innenabstand unten */
    }

    header {
        padding: 18px 16px; /* Innenabstand */
    }

    .hamburger {
        display: block; /* Layouttyp */
        order: 2; /* Reihenfolge */
    }

    .logo-badge {
        width: 82px; /* Breite */
        height: 82px; /* Hoehe */
        padding: 9px; /* Innenabstand */
        margin-left: auto; /* Aussenabstand links */
        margin-right: auto; /* Aussenabstand rechts */
    }

    .divs {
        display: none; /* Layouttyp */
        position: absolute; /* Positionierung */
        top: calc(100% + 10px); /* Abstand oben */
        right: 0; /* Abstand rechts */
        min-width: 220px; /* Min-Breite */
        padding: 12px; /* Innenabstand */
        border-radius: 22px; /* Ecken rund */
        background: rgba(16, 36, 53, 0.94); /* Hintergrund */
        border: 1px solid rgba(216, 232, 241, 0.2); /* Rahmen */
        box-shadow: 0 18px 36px rgba(8, 22, 33, 0.18); /* Schatten */
        flex-direction: column; /* Flex-Richtung */
        gap: 10px; /* Item-Abstand */
    }

    .divs.active {
        display: flex; /* Layouttyp */
    }

    .divs button {
        width: 100%; /* Breite */
        text-align: left; /* Textausrichtung */
        padding: 12px 16px; /* Innenabstand */
    }

    .gallery-container {
        width: min(100vw - 24px, 1180px); /* Breite */
        margin-top: 20px; /* Aussenabstand oben */
        border-radius: 24px; /* Ecken rund */
    }

    .background {
        min-height: 520px; /* Min-Hoehe */
        max-height: none; /* Max-Hoehe */
    }

    .gallery-side-panel {
        width: min(460px, 88%); /* Breite */
        top: 56%; /* Abstand oben */
        transform: translate(-50%, -50%); /* Transformieren */
        padding: 24px 20px; /* Innenabstand */
        border-radius: 22px; /* Ecken rund */
    }

    .home-hero .background {
        min-height: 320px; /* Min-Hoehe */
    }

    .home-hero .gallery-side-panel {
        width: min(420px, 84%); /* Breite */
        padding: 22px 18px; /* Innenabstand */
    }

    .panel-text {
        font-size: clamp(1.45rem, 5vw, 2.25rem); /* Schriftgroesse */
    }

    footer {
        position: fixed; /* Positionierung */
        left: 0; /* Abstand links */
        bottom: 0; /* Abstand unten */
        width: 100%; /* Breite */
        padding: 20px 16px; /* Innenabstand */
    }

    .steckbrief {
        margin-top: 24px; /* Aussenabstand oben */
        grid-template-columns: 1fr; /* Grid-Spalten */
        padding: 22px; /* Innenabstand */
        row-gap: 14px; /* Zeilenabstand */
    }

    .freizeit-page .steckbrief {
        margin-top: 30px; /* Aussenabstand oben */
        margin-bottom: 30px; /* Aussenabstand unten */
        padding: 26px; /* Innenabstand */
        grid-template-columns: 1fr; /* Grid-Spalten */
        grid-template-areas:
            "media"
            "content"; /* Grid-Bereiche */
        row-gap: 18px; /* Zeilenabstand */
    }

    .freizeit-page .maradona-quote {
        margin-bottom: 24px; /* Aussenabstand unten */
        padding: 20px 22px; /* Innenabstand */
    }

    .freizeit-image-wrap {
        justify-self: center; /* Eigene Ausrichtung */
        width: min(300px, 100%); /* Breite */
    }

    .freizeit-facts {
        gap: 8px; /* Item-Abstand */
    }

    .steckbrief img {
        grid-column: 1; /* Grid-Spalte */
        grid-row: auto; /* Grid-Zeile */
        justify-self: center; /* Eigene Ausrichtung */
        max-width: min(280px, 100%); /* Max-Breite */
        max-height: 260px; /* Max-Hoehe */
        width: min(280px, 100%); /* Breite */
    }

    .impressum-main {
        width: min(980px, 95vw); /* Breite */
        margin-top: 22px; /* Aussenabstand oben */
    }

    .about-page .about-main {
        margin-bottom: 20px; /* Aussenabstand unten */
    }

    .impressum-card {
        padding: 24px 20px; /* Innenabstand */
    }

    .impressum-card h1 {
        font-size: clamp(1.8rem, 5vw, 2.4rem); /* Schriftgroesse */
    }

    .impressum-card p {
        line-height: 1.75; /* Zeilenhoehe */
    }

    .gallerie {
        grid-template-columns: repeat(2, minmax(190px, 280px)); /* Grid-Spalten */
        gap: 14px; /* Item-Abstand */
        margin: 34px auto 56px; /* Aussenabstand */
    }

    .gallerie .featured {
        grid-column: 1 / -1; /* Grid-Spalte */
        grid-row: auto; /* Grid-Zeile */
    }

    .featured-shot {
        min-height: 320px; /* Min-Hoehe */
    }

    .folder-modal-content {
        width: min(920px, 94vw); /* Breite */
    }

    .mixed-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Grid-Spalten */
    }

    .ich-spotlight {
        grid-column: 1 / -1; /* Grid-Spalte */
        grid-row: auto; /* Grid-Zeile */
    }

    .abschnitte-grid {
        margin: 24px 16px 48px; /* Aussenabstand */
        gap: 18px; /* Item-Abstand */
    }

    .abschnitt {
        width: 100%; /* Breite */
        max-width: 560px; /* Max-Breite */
        padding: 14px; /* Innenabstand */
    }

    .projekt-modal-content {
        height: min(78vh, 700px); /* Hoehe */
    }

    .magazin-modal-content {
        width: min(840px, 92vw); /* Breite */
        height: min(82vh, 700px); /* Hoehe */
    }
}

/* ===== RESPONSIVE: KLEINE HANDYS ===== */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Schriftgroesse */
        padding-bottom: 165px; /* Innenabstand unten */
    }

    header {
        flex-wrap: wrap; /* Flex-Umbruch */
        justify-content: space-between; /* Verteilung Hauptachse */
        gap: 12px; /* Item-Abstand */
        padding: 14px 12px; /* Innenabstand */
    }

    header button {
        padding: 11px 14px; /* Innenabstand */
        font-size: 0.82rem; /* Schriftgroesse */
    }

    .home {
        order: 1; /* Reihenfolge */
    }

    .logo-badge {
        order: 2; /* Reihenfolge */
        width: 72px; /* Breite */
        height: 72px; /* Hoehe */
        padding: 8px; /* Innenabstand */
        margin: 0 auto; /* Aussenabstand */
    }

    .hamburger {
        order: 3; /* Reihenfolge */
        font-size: 1.35rem; /* Schriftgroesse */
        padding: 8px 11px; /* Innenabstand */
    }

    .divs {
        order: 4; /* Reihenfolge */
        width: 100%; /* Breite */
        position: static; /* Positionierung */
        min-width: 0; /* Min-Breite */
        margin-top: 2px; /* Aussenabstand oben */
    }

    .gallery-container {
        width: calc(100vw - 16px); /* Breite */
        border-radius: 18px; /* Ecken rund */
    }

    .gallery-container::after {
        inset: 10px; /* Abstand alle Seiten */
        border-radius: 14px; /* Ecken rund */
    }

    .background {
        min-height: 560px; /* Min-Hoehe */
    }

    .gallery-side-panel {
        width: calc(100% - 24px); /* Breite */
        top: 58%; /* Abstand oben */
        left: 50%; /* Abstand links */
        transform: translate(-50%, -50%); /* Transformieren */
        padding: 18px 14px; /* Innenabstand */
        border-radius: 18px; /* Ecken rund */
    }

    .home-hero .background {
        min-height: 280px; /* Min-Hoehe */
    }

    .home-hero .gallery-side-panel {
        width: calc(100% - 32px); /* Breite */
        top: 55%; /* Abstand oben */
    }

    .panel-content {
        gap: 14px; /* Item-Abstand */
    }

    .panel-content::before {
        font-size: 0.7rem; /* Schriftgroesse */
        padding: 7px 10px; /* Innenabstand */
    }

    .panel-text {
        font-size: 1.24rem; /* Schriftgroesse */
    }

    .get-started-btn {
        width: 100%; /* Breite */
        padding: 12px 16px; /* Innenabstand */
    }

    .about-main,
    .impressum-main {
        width: 95vw; /* Breite */
    }

    .about-page .about-main {
        margin-bottom: 20px; /* Aussenabstand unten */
    }

    .steckbrief {
        grid-template-columns: 1fr; /* Grid-Spalten */
        column-gap: 0; /* Spaltenabstand */
        row-gap: 10px; /* Zeilenabstand */
        margin-top: 16px; /* Aussenabstand oben */
        padding: 16px; /* Innenabstand */
        border-radius: 18px; /* Ecken rund */
    }

    .freizeit-page .steckbrief {
        margin-top: 22px; /* Aussenabstand oben */
        margin-bottom: 24px; /* Aussenabstand unten */
        padding: 18px; /* Innenabstand */
        row-gap: 14px; /* Zeilenabstand */
    }

    .freizeit-page .maradona-quote {
        margin-bottom: 18px; /* Aussenabstand unten */
        padding: 16px 16px; /* Innenabstand */
    }

    .freizeit-facts li {
        padding: 9px 10px; /* Innenabstand */
        font-size: 0.92rem; /* Schriftgroesse */
    }

    .freizeit-facts span {
        display: inline-block; /* Layouttyp */
        margin-right: 4px; /* Aussenabstand rechts */
    }

    .steckbrief h1 {
        font-size: 1.55rem; /* Schriftgroesse */
        margin-bottom: 10px; /* Aussenabstand unten */
    }

    .steckbrief p {
        font-size: 0.94rem; /* Schriftgroesse */
    }

    .about-table td {
        padding: 12px 14px; /* Innenabstand */
        font-size: 0.92rem; /* Schriftgroesse */
    }

    .steckbrief img {
        grid-column: 1; /* Grid-Spalte */
        justify-self: center; /* Eigene Ausrichtung */
        max-width: min(220px, 100%); /* Max-Breite */
        max-height: 220px; /* Max-Hoehe */
        width: min(220px, 100%); /* Breite */
        border-radius: 16px; /* Ecken rund */
    }

    .maradona-quote,
    .impressum-card,
    .abschnitt {
        border-radius: 18px; /* Ecken rund */
    }

    .maradona-quote {
        margin: 14px auto 8px; /* Aussenabstand */
        padding: 16px 14px; /* Innenabstand */
    }

    .impressum-card {
        padding: 18px 14px; /* Innenabstand */
    }

    .impressum-card h2 {
        font-size: 1rem; /* Schriftgroesse */
    }

    .impressum-card h2::before,
    .abschnitt h2::before {
        width: 8px; /* Breite */
        height: 8px; /* Hoehe */
        margin-right: 8px; /* Aussenabstand rechts */
    }

    .gallerie {
        grid-template-columns: 1fr; /* Grid-Spalten */
        gap: 12px; /* Item-Abstand */
        padding: 0 12px; /* Innenabstand */
        margin: 24px auto 40px; /* Aussenabstand */
    }

    .gallerie .featured {
        grid-column: span 1; /* Grid-Spalte */
        grid-row: span 1; /* Grid-Zeile */
    }

    .featured-shot {
        min-height: 260px; /* Min-Hoehe */
    }

    .folder-modal {
        padding: 10px; /* Innenabstand */
    }

    .folder-modal-content {
        width: 96vw; /* Breite */
        max-height: 84vh; /* Max-Hoehe */
        padding: 50px 10px 12px; /* Innenabstand */
    }

    .mixed-gallery-main {
        width: calc(100vw - 20px); /* Breite */
        margin: 18px auto 30px; /* Aussenabstand */
    }

    .mixed-gallery-section {
        padding: 12px; /* Innenabstand */
    }

    .mixed-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Grid-Spalten */
        gap: 10px; /* Item-Abstand */
    }

    .ich-spotlight {
        grid-column: 1 / -1; /* Grid-Spalte */
    }

    .abschnitte-grid {
        grid-template-columns: 1fr; /* Grid-Spalten */
        margin: 18px 10px 30px; /* Aussenabstand */
        gap: 14px; /* Item-Abstand */
    }

    .abschnitt-letzter {
        grid-column: span 1; /* Grid-Spalte */
        width: 100%; /* Breite */
    }

    .abschnitt h2 {
        font-size: 1.28rem; /* Schriftgroesse */
    }

    .projekt-modal {
        padding: 10px; /* Innenabstand */
    }

    .projekt-modal-content {
        width: 98vw; /* Breite */
        height: 82vh; /* Hoehe */
        padding: 44px 8px 8px; /* Innenabstand */
    }

    .magazin-modal {
        padding: 8px; /* Innenabstand */
    }

    .magazin-modal-content {
        width: 99vw; /* Breite */
        height: 86vh; /* Hoehe */
        padding: 50px 8px 8px; /* Innenabstand */
    }
}