/* ══════════════════════════════════════════════════════════
   Mobile Design System — eigenständig
   375px–767px

   Regel: Diese Datei kontrolliert ALLES auf Mobile.
   Die index.html wird NICHT verändert.

   Apple-Prinzipien: 11px min. Schrift, 44px Touch-Targets,
   großzügiger Weißraum, konsistenter Rhythmus.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Tokens ── */
    :root {
        --pad: 24px;
        --section-gap: 80px;
    }

    /* ══════════════════════════
       LOADER
       ══════════════════════════ */

    .loader { padding: 0 var(--pad); }
    .loader-text { font-size: 2rem; }
    .loader-sub { font-size: 11px; letter-spacing: 0.18em; }

    /* ══════════════════════════
       GLOBAL
       ══════════════════════════ */

    body { font-size: 16px; line-height: 1.5; }

    /* Progress bar: weg */
    #progress-bar { display: none !important; }

    /* Section label lines (w-24 Striche): weg */
    h2.flex span.w-24,
    h2.tracking-executive span.w-24 { display: none !important; }
    h2.flex.tracking-executive,
    h2.flex { gap: 0 !important; }

    /* Section labels */
    h2.text-\[10px\], h2.text-\[11px\] {
        font-size: 11px !important;
        opacity: 0.5;
        margin-bottom: 20px !important;
        letter-spacing: 0.14em;
    }

    /* Hover: weg auf Touch */
    .project-card:hover,
    .philosophy-card:hover,
    .station-card:hover,
    .expertise-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Reveal: subtiler */
    .reveal { transform: translateY(12px); transition-duration: 0.5s; }

    /* ══════════════════════════
       NAV
       ══════════════════════════ */

    #navbar {
        padding: 14px var(--pad) !important;
    }
    /* backdrop-filter erzeugt einen Containing Block der fixed-Kinder
       (mobile-menu) auf die Navbar beschränkt — auf Mobile deaktivieren */
    #navbar.backdrop-blur-3xl {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #navbar.shadow-2xl {
        box-shadow: 0 0.5px 0 rgba(0,0,0,0.08) !important;
        background: rgba(245,245,244,0.98) !important;
    }
    #navbar a > span:first-child {
        font-size: 11px;
        opacity: 0.5;
    }
    #navbar a > span:last-child {
        font-size: 1.1rem;
    }

    /* ══════════════════════════
       HERO
       ══════════════════════════ */

    .min-h-screen {
        min-height: auto;
        padding: 100px var(--pad) 48px !important;
        align-items: flex-start !important;
    }
    .min-h-screen > div:first-child {
        gap: 24px !important;
    }

    /* Bild: volle Breite */
    .profile-img-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: 5 / 4;
    }
    .profile-img {
        border-radius: 16px;
        object-position: center 15%;
    }
    .profile-img-fallback {
        border-radius: 16px;
    }

    /* Tagline */
    main > section:first-child .mb-20:first-child,
    main > section:first-child .overflow-hidden:first-child {
        margin-bottom: 16px !important;
    }
    main > section:first-child .tracking-editorial {
        font-size: 11px;
        letter-spacing: 0.2em;
        padding-left: 0 !important;
        border-left: none !important;
        opacity: 0.5;
    }

    /* H1 */
    main > section:first-child h1 {
        font-size: 14vw !important;
        margin-bottom: 32px !important;
        margin-left: 0 !important;
        line-height: 0.9;
    }
    main > section:first-child h1 span {
        margin-left: 0 !important;
    }

    /* CTA: beide Buttons, volle Breite */
    main > section:first-child .flex.flex-col,
    main > section:first-child .flex.sm\:flex-row {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }
    main > section:first-child a[href="#career"] {
        padding: 16px 0;
        font-size: 11px;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        border-radius: 14px;
    }
    main > section:first-child a[href="#contact"] {
        padding: 14px 0;
        font-size: 11px;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex !important;
    }
    main > section:first-child a[href="#contact"] span {
        display: none;
    }

    /* Scroll-Indicator: weg */
    main > section:first-child > div:last-child[aria-hidden] {
        display: none !important;
    }

    /* ══════════════════════════
       PROFIL
       ══════════════════════════ */

    #profil {
        padding: var(--section-gap) var(--pad) !important;
    }
    #profil .grid {
        gap: 32px !important;
    }
    #profil h3 {
        font-size: 2rem !important;
        line-height: 1.02;
        margin-bottom: 20px !important;
        letter-spacing: -0.03em;
    }
    #profil .lg\:col-span-7 p {
        font-size: 15px;
        line-height: 1.65;
        font-weight: 400;
        color: #57534e;
    }

    /* Zitat — eigener Block */
    #profil blockquote {
        padding: 24px var(--pad) !important;
        margin: 16px calc(var(--pad) * -1) 0;
        background: #f5f5f4;
        border-left: 3px solid #1d4ed8 !important;
        border-radius: 0;
    }
    #profil blockquote p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
        color: #44403c !important;
    }
    #profil blockquote p span {
        color: #1c1917 !important;
        font-weight: 600 !important;
    }

    /* ══════════════════════════
       KARRIERE
       ══════════════════════════ */

    #career {
        padding: var(--section-gap) var(--pad) !important;
    }

    /* Container: flach, kein Radius, kein Shadow */
    #career .bg-stone-100 {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        margin: 0 calc(var(--pad) * -1);
        overflow: visible !important;
    }
    #career .grid.md\:grid-cols-3 {
        gap: 0 !important;
    }

    .station-card {
        padding: 28px var(--pad) 24px !important;
        border-top: 1px solid #e7e5e4 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        background: transparent !important;
    }
    .station-card:last-child {
        border-bottom: 1px solid #e7e5e4 !important;
    }
    /* Hansgrohe = aktuell: hervorheben */
    .station-card[data-station="hansgrohe"] {
        border-left: 3px solid #1d4ed8 !important;
        padding-left: calc(var(--pad) - 3px) !important;
        background: rgba(29,78,216,0.02) !important;
    }
    .station-card .flex.justify-between {
        margin-bottom: 10px !important;
    }
    /* Nummern 01/02/03 */
    .station-card .text-6xl {
        font-size: 1.25rem !important;
        opacity: 0.12;
    }
    .station-card h4 {
        font-size: 11px;
        margin-bottom: 8px !important;
        letter-spacing: 0.12em;
    }
    .station-card > p {
        font-size: 14px;
        line-height: 1.65;
        font-weight: 400;
        color: #78716c;
    }
    .station-card .mt-auto {
        padding-top: 16px !important;
    }
    .detail-panel > div {
        padding: 20px var(--pad) 24px !important;
        background: #fafaf9 !important;
    }
    .detail-panel .text-sm {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.6;
    }

    /* ══════════════════════════
       PHILOSOPHIE
       ══════════════════════════ */

    #career + section {
        padding: var(--section-gap) var(--pad) !important;
    }
    #career + section h3 {
        font-size: 2rem !important;
        margin-bottom: 32px !important;
    }
    #career + section .grid {
        gap: 0 !important;
    }

    .philosophy-card {
        padding: 24px 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-top: 1px solid #e7e5e4 !important;
    }
    .philosophy-card:last-child {
        border-bottom: 1px solid #e7e5e4 !important;
        padding-bottom: 0 !important;
    }
    .philosophy-card h4 {
        font-size: 11px;
        margin-bottom: 10px !important;
        opacity: 0.5;
    }
    .philosophy-card > p:nth-child(3) {
        font-size: 16px;
        line-height: 1.35;
        margin-bottom: 10px !important;
    }
    .philosophy-card > p:last-child {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400;
        color: #78716c;
    }
    .philosophy-number {
        display: none !important;
    }

    /* ══════════════════════════
       INTERNATIONALE STATIONEN
       ══════════════════════════ */

    #career + section + section {
        padding: 32px var(--pad) 40px !important;
    }
    .journey-line {
        display: none !important;
    }

    /* ══════════════════════════
       EXPERTISE
       ══════════════════════════ */

    #expertise {
        padding: var(--section-gap) var(--pad) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    #expertise h2 {
        font-size: 11px !important;
        opacity: 0.5;
        margin-bottom: 16px !important;
    }
    #expertise h3 {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }
    /* Intro-Text */
    #expertise > div > div:first-child {
        margin-bottom: 40px !important;
    }
    #expertise > div > div:first-child > p {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400;
        opacity: 0.5;
    }

    /* Cards Grid */
    #expertise .grid.md\:grid-cols-2 {
        gap: 0 !important;
        margin-bottom: 40px !important;
    }
    .expertise-card {
        padding-top: 24px !important;
        padding-bottom: 8px;
        border-top-color: rgba(255,255,255,0.06) !important;
    }
    .expertise-card .flex.items-center {
        margin-bottom: 12px !important;
    }
    .expertise-card .expertise-number {
        font-size: 1.25rem !important;
        opacity: 0.2;
    }
    .expertise-card h4 {
        font-size: 11px;
        opacity: 0.55;
    }
    .expertise-card > p {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400;
        margin-bottom: 16px !important;
    }
    .proof-point {
        opacity: 0.7;
        padding: 5px 0;
    }
    .proof-point span:last-child {
        font-size: 12px;
        font-weight: 400;
    }
    .skill-tag {
        padding: 8px 14px;
        font-size: 11px;
        letter-spacing: 0.06em;
        border-color: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.5);
    }
    .expertise-card .flex-wrap {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .expertise-card > span:last-child {
        font-size: 11px !important;
        opacity: 0.8;
    }

    /* Sprachen */
    #expertise .border-t.border-white\/5 {
        padding-top: 40px !important;
    }
    #expertise .border-t.border-white\/5 h4 {
        margin-bottom: 20px !important;
        opacity: 0.5;
        font-size: 11px !important;
    }
    /* Sprach-Grid: 2 Spalten */
    #expertise .border-t.border-white\/5 .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 16px !important;
    }
    #expertise .border-t.border-white\/5 .text-3xl {
        font-size: 1.125rem !important;
    }
    #expertise .border-t.border-white\/5 .flex-col {
        margin-bottom: 8px !important;
    }
    #expertise .border-t.border-white\/5 .text-\[10px\] {
        font-size: 11px;
        opacity: 0.4;
    }

    /* ══════════════════════════
       FAKTEN
       ══════════════════════════ */

    #impact {
        padding: var(--section-gap) var(--pad) !important;
    }
    #impact .grid {
        gap: 24px 16px !important;
        padding-top: 28px !important;
        border-top: none !important;
    }
    /* Counter-Zahlen */
    #impact .text-5xl {
        font-size: 1.75rem !important;
    }
    #impact .text-\[10px\] {
        font-size: 11px;
        opacity: 0.6;
    }
    #impact .text-\[11px\] {
        font-size: 12px;
        color: #a8a29e;
    }
    #impact .group {
        border-left-width: 0 !important;
        padding-left: 0 !important;
    }
    /* 160+ hervorheben */
    #impact .col-span-2 {
        justify-self: center;
    }
    #impact .col-span-2 .text-5xl {
        font-size: 2rem !important;
        color: #1d4ed8;
    }

    /* ══════════════════════════
       KONTAKT
       ══════════════════════════ */

    #contact {
        text-align: left !important;
        padding: var(--section-gap) var(--pad) !important;
        background: var(--bg) !important;
    }
    #contact > div > span:first-child {
        margin-bottom: 12px !important;
        opacity: 0.5;
        font-size: 11px !important;
    }
    #contact h2 {
        font-size: 1.75rem !important;
        line-height: 1.15;
        margin-bottom: 32px !important;
        text-align: left;
    }
    #contact > div > div.flex {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }
    /* Cards — linksbündig, flach, volle Breite */
    #contact .project-card {
        padding: 20px 0 !important;
        border-radius: 0 !important;
        gap: 16px !important;
        border: none !important;
        border-bottom: 1px solid #e7e5e4 !important;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    #contact .project-card:last-child {
        border-bottom: none !important;
    }
    #contact .project-card:hover {
        transform: none !important;
    }
    #contact .project-card > div:first-child {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        border-radius: 12px !important;
    }
    #contact .project-card svg {
        width: 18px;
        height: 18px;
    }
    #contact .project-card .text-\[11px\] {
        font-size: 11px;
        margin-bottom: 2px !important;
        opacity: 0.5;
    }
    #contact .project-card .text-lg {
        font-size: 15px !important;
        font-weight: 600;
        word-break: break-all;
    }

    /* ══════════════════════════
       FOOTER
       ══════════════════════════ */

    footer {
        padding: 28px var(--pad) !important;
        gap: 0 !important;
        text-align: center;
        border-top: none !important;
    }
    footer > div:first-child {
        display: none !important;
    }
    footer > div:last-child {
        gap: 28px !important;
        width: 100%;
        justify-content: center;
    }
    footer button {
        font-size: 11px;
        letter-spacing: 0.1em;
        color: #a8a29e;
    }

    /* ══════════════════════════
       MODALS
       ══════════════════════════ */

    #impressum-modal > div,
    #datenschutz-modal > div {
        padding: 24px !important;
        border-radius: 16px !important;
        margin: 12px;
    }
    #impressum-modal h3,
    #datenschutz-modal h3 {
        font-size: 1.125rem;
        margin-bottom: 12px !important;
    }
}