/* ============================================================
   mobile.css  –  Mobile- und Touch-Ansicht
   ------------------------------------------------------------
   Wird NACH style.css geladen und überschreibt gezielt.
   Alles hier steht in einer Media Query, die Desktop-Ansicht
   aus style.css bleibt dadurch unverändert.

   Blöcke:
     1) Touch-Grundlagen (Pointer-basiert, keine Breite)
     2) Hinweis-Dialog "Nur am PC spielbar"
     3) <= 768px: Layout
     4) Querformat auf niedrigen Displays
   ============================================================ */


/* ============================================================
   1) TOUCH-GRUNDLAGEN
   Greift auf Geräten ohne Maus – unabhängig von der Breite,
   also auch auf Tablets im Querformat.
   ============================================================ */

/* Badge auf den Spiele-Kacheln: nur auf Touch-Geräten sichtbar */
.desktop-only-hint {
    display: none;
}

/* Zweite Beschriftung der Spiele-Buttons, siehe games.partial.html */
.label-touch {
    display: none;
}

@media (pointer: coarse) and (hover: none) {

    /* Auf dem Handy sind die Spiele gesperrt – der Button darf dann nicht
       "Jetzt spielen" versprechen und auch nicht danach aussehen. */
    .label-desktop {
        display: none;
    }

    .label-touch {
        display: inline;
    }

    /* Höhere Spezifität als die .modal-button-Regel im 768px-Block weiter
       unten – die käme sonst später und würde das Blau zurückholen. */
    .modal-project .modal-button {
        background-color: #2a2a2a;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #b6b6b6;
        font-weight: 600;
    }

    .desktop-only-hint {
        display: inline-block;
        margin-block-end: 0.5rem;
        padding: 0.25rem 0.6rem;
        border: 1px solid rgba(255, 190, 90, 0.45);
        border-radius: 999px;
        background: rgba(255, 190, 90, 0.12);
        color: #ffcf87;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Hover-Effekte auf Touch abschalten – sie bleiben nach dem
       Antippen sonst "kleben" und wirken wie ein Darstellungsfehler. */
    .modal-img:hover {
        transform: none;
    }
}


/* ============================================================
   2) HINWEIS-DIALOG  (wird von js/newwindow.js erzeugt)
   Eigene Klassen – taucht in der Desktop-Ansicht nie auf.
   ============================================================ */

.gamehint {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.82);
    font-family: 'Raleway', Arial, sans-serif;
}

.gamehint__box {
    inline-size: 100%;
    max-inline-size: 420px;
    padding: 1.75rem 1.5rem;
    padding-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: #141414;
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.gamehint__icon {
    font-size: 2.25rem;
    line-height: 1;
    margin-block-end: 0.75rem;
}

.gamehint__box h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    line-height: 1.35;
    color: #fff;
}

.gamehint__box p {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #c9c9c9;
}

.gamehint__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gamehint__actions button {
    inline-size: 100%;
    min-block-size: 48px;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.gamehint__close {
    background-color: #5764ef;
    color: #fff;
}


/* ============================================================
   3) LAYOUT  <= 768px
   ============================================================ */

@media (max-width: 768px) {

    /* ---------- Grundlagen ---------- */

    html {
        /* verhindert, dass iOS Text im Querformat eigenmächtig vergrößert */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        /* kein versehentliches Seitwärts-Wackeln durch animierte Elemente */
        overflow-x: hidden;
        /* body hatte gar keine Hintergrundfarbe. Beim Überscrollen am
           Seitenende blitzte deshalb das Browser-Weiß durch – auf Android
           als weißer Balken unter dem Inhalt. */
        background-color: #131313;
    }

    img {
        max-inline-size: 100%;
        block-size: auto;
    }

    /* Sektionen dürfen mitwachsen, statt auf 100vh festgenagelt zu sein.
       svh = "small viewport height": rechnet mit sichtbarer URL-Leiste und
       verhindert damit das Springen beim Scrollen. */
    .section {
        min-block-size: 100vh;
        min-block-size: 100svh;
        block-size: auto;
        font-size: 1rem;
        padding-block-end: 2rem;
        box-sizing: border-box;
    }


    /* ---------- Navigation ---------- */

    #menu {
        inset-block-start: 0;
        justify-content: flex-end;
        /* style.css setzt inline-size:100% – ohne border-box addiert sich
           das Padding oben drauf und der Burger rutscht aus dem Bild. */
        box-sizing: border-box;
        padding: 0.4rem 0.75rem;
        padding-block-start: calc(0.4rem + env(safe-area-inset-top, 0px));
        background: rgba(12, 12, 12, 0.88);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #burger-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44px = empfohlene Mindestgröße für Tippziele */
        inline-size: 44px;
        block-size: 44px;
        border-radius: 8px;
        font-size: 1.6rem;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }

    #menu.open #burger-menu {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Dropdown über die volle Breite statt 200px-Kästchen am Rand */
    #menu-items {
        inset-block-start: 100%;
        inset-inline: 0;
        inline-size: auto;
        margin: 0;
        padding: 0.25rem 0;
        background: rgba(10, 10, 10, 0.97);
        border-block-start: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
    }

    #menu-items li {
        margin: 0;
        margin-inline-start: 0;
    }

    #menu-items a {
        display: block;
        padding: 0.95rem 1.25rem;
        font-size: 1rem;
        letter-spacing: 0.03em;
        border-block-end: 1px solid rgba(255, 255, 255, 0.06);
    }

    #menu-items li:last-child a {
        border-block-end: none;
    }

    /* Der border-top aus style.css würde beim Antippen alles verschieben */
    #menu-items a:hover,
    #menu-items a.active {
        border-block-start: none;
        padding-block-start: 0.95rem;
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
    }


    /* ---------- Start / Hero ---------- */

    /* In style.css hängen Titel, Balken und Untertitel als
       position:absolute an festen vh-Werten. Auf dem Handy verschiebt
       die ein- und ausfahrende URL-Leiste diese Werte ständig und im
       Querformat überlappen sie sich. Hier laufen sie stattdessen im
       normalen Flex-Fluss – die Animationen bleiben erhalten. */
    #start {
        justify-content: center;
        gap: 1.1rem;
        padding: 5.5rem 1.25rem 4rem;
    }

    .title,
    .subtitle,
    .gradient-bar {
        position: static;
        inset: auto;
    }

    .title {
        font-size: clamp(2.25rem, 13vw, 3.25rem);
        letter-spacing: 3px;
        line-height: 1.1;
        margin: 0;
    }

    .gradient-bar {
        block-size: 2px;
        margin: 0;
    }

    .subtitle {
        font-size: clamp(1.05rem, 5vw, 1.45rem);
        line-height: 1.45;
        max-inline-size: 20ch;
        margin: 0;
    }


    /* ---------- Über mich ---------- */

    #about .container {
        flex-direction: column;
        gap: 1.75rem;
        padding: 5.5rem 1.25rem 3rem;
    }

    /* Porträt zuerst, danach der Text – liest sich auf dem Handy besser */
    #about .image {
        order: -1;
    }

    #about .image img {
        max-inline-size: 230px;
    }

    #begruesstext {
        font-size: 1.5rem;
        text-align: center;
    }

    #about .text {
        font-size: 1rem;
        line-height: 1.7;
        /* Blocksatz reißt auf schmalen Displays hässliche Lücken */
        text-align: start;
        hyphens: none;
    }

    .signature {
        display: block;
        inline-size: 150px;
        margin-block-start: 1.5rem;
        margin-inline: auto;
    }


    /* ---------- Projekte ---------- */

    .project-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        inline-size: 100%;
        padding: 5.5rem 1.25rem 3rem;
        box-sizing: border-box;
    }

    /* style.css setzt inline-size:20% – auf dem Handy blieben davon
       62px Kachelbreite und 22px große Icons übrig. */
    .project {
        inline-size: 100%;
        max-inline-size: 100%;
        flex: 0 0 auto;
        padding: 1.5rem 1.25rem;
        /* Kachel und Sektionshintergrund sind beide #282828 – gestapelt
           braucht es eine sichtbare Kante, damit man die Tippfläche sieht */
        background-color: #1f1f1f;
        border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .project br {
        display: none;
    }

    .project-icon {
        inline-size: 84px;
        max-inline-size: 84px;
        margin-block-end: 1rem;
    }

    .project h2 {
        font-size: 1.3rem;
        margin-block-end: 0.5rem;
    }

    .project p {
        font-size: 0.9rem;
        line-height: 1.55;
    }


    /* ---------- Kontakt ---------- */

    #contact {
        padding: 5.5rem 1.25rem 3rem;
    }

    #contact h2 {
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.55;
        margin: 0 0 0.75rem;
    }

    #contact form {
        margin-block-start: 1rem;
        gap: 1rem;
        /* style.css setzt align-items:flex-start. Gestapelt (column) ist
           das die Querachse – die Spalten schrumpfen dadurch auf
           Inhaltsbreite und die Felder blieben schmaler als das Formular. */
        align-items: stretch;
    }

    .form-left,
    .form-right {
        inline-size: 100%;
    }

    #contact label {
        font-size: 0.95rem;
        margin-block-end: 0.35rem;
    }

    #contact input,
    #contact textarea {
        /* Unter 16px zoomt iOS Safari beim Fokussieren in das Feld hinein
           und die Seite bleibt danach verschoben. */
        font-size: 16px;
        padding: 0.8rem;
        box-sizing: border-box;
    }

    #contact textarea {
        block-size: 170px;
    }

    .form-bottom {
        margin-block-start: 0.5rem;
    }

    .form-bottom button {
        inline-size: 100%;
        min-block-size: 48px;
        font-size: 1rem;
    }

    #form-status {
        font-size: 0.95rem;
        line-height: 1.5;
    }


    /* ---------- Impressum ---------- */

    #impressum .container {
        padding: 5.5rem 1.25rem 3rem;
    }


    /* ---------- Footer ---------- */

    footer {
        /* fixed schnitt auf dem Handy den Seiteninhalt ab */
        position: static;
        background: #131313;
        /* style.css setzt inline-size:100% – ohne border-box kommt das
           Padding oben drauf und der Footer wird breiter als das Display.
           Genau das hat auf Android sichtbar ausgebrochen. */
        box-sizing: border-box;
        padding: 1.25rem;
        padding-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    footer p {
        /* line-height:0 aus style.css ließ die umbrechenden Zeilen
           übereinander liegen */
        margin: 0;
        font-size: 11px;
        line-height: 1.7;
    }


    /* ---------- Modal ---------- */

    /* style.css rechnet mit calc(100% - 10cm). 10cm sind 378px – bei
       375px Displaybreite wird die max-width negativ und das Modal
       damit 0px breit. Auf dem Handy war es schlicht unsichtbar.
       Ersatz: Vollbild-Sheet. */
    /* Gescrollt wird das Overlay selbst, nicht die Box darin. Mit
       overflow auf .modal-content wuerde die Box als Flex-Item auf
       Inhaltshoehe wachsen (Flex-Mindestgroesse in der Querachse) und
       unten aus dem Bild laufen, ohne scrollbar zu sein. */
    .modal {
        padding: 0;
        align-items: stretch;
        /* Die Navbar hat z-index:1000 und lag damit ueber dem Vollbild-
           Modal - genau auf dem Schliessen-Button. Ein Tipp darauf hat
           das Menue geoeffnet statt das Modal zu schliessen. */
        z-index: 1100;
    }

    .modal.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal-content {
        inline-size: 100%;
        max-inline-size: 100%;
        block-size: auto;
        min-block-size: 100%;
        max-block-size: none;
        border-radius: 0;
        overflow: visible;
        padding: 0.75rem 1.15rem;
        padding-block-start: calc(0.75rem + env(safe-area-inset-top, 0px));
        padding-block-end: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* sticky statt absolute: der Schließen-Button scrollt sonst weg */
    .modal-close {
        position: sticky;
        inset-block-start: 0;
        inset-inline-end: auto;
        z-index: 2;
        display: block;
        margin-inline-start: auto;
        margin-block-end: 0.25rem;
        inline-size: 44px;
        block-size: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        font-size: 1.6rem;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }

    /* Hintergrund nicht mitscrollen lassen, solange das Modal offen ist */
    body.modal-open {
        overflow: hidden;
    }

    .modal-projects {
        gap: 2rem;
    }

    .modal-project {
        flex: 0 0 100%;
        max-inline-size: 100%;
    }

    .modal-project h2 {
        font-size: 1.2rem;
        margin: 0.6rem 0 0.3rem;
    }

    .modal-project p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-block-end: 0.9rem;
    }

    .modal-button {
        display: block;
        min-block-size: 48px;
        padding: 0.85rem 1rem;
        background-color: #5764ef;
        font-size: 1rem;
        font-weight: 700;
    }

    /* Platzhaltertexte in den Projekt-Modals */
    #modalBody > h2 {
        font-size: 1.3rem;
        margin-block-start: 0.5rem;
    }
}


/* ============================================================
   4) QUERFORMAT auf niedrigen Displays
   Ein Handy quer hat ca. 380px Höhe – 100vh-Sektionen mit
   zentriertem Inhalt laufen dort sonst ineinander.
   ============================================================ */

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {

    .section {
        min-block-size: auto;
        padding-block: 4.5rem 2.5rem;
    }

    #start {
        min-block-size: auto;
        padding-block: 5rem 3rem;
        gap: 0.75rem;
    }

    /* Auch hier aus der absoluten vh-Positionierung lösen: #start ist in
       dieser Query nicht mehr 100vh hoch, absolut platzierte Elemente
       würden sonst in die nächste Sektion ragen. Greift zusätzlich für
       breite Querformat-Geräte über 768px. */
    .title,
    .subtitle,
    .gradient-bar {
        position: static;
        inset: auto;
        margin: 0;
    }

    .title {
        font-size: clamp(1.9rem, 7vw, 2.6rem);
        line-height: 1.1;
    }

    .subtitle {
        font-size: 1rem;
        max-inline-size: none;
    }

    #about .container,
    .project-container,
    #impressum .container,
    #contact {
        padding-block-start: 5rem;
    }

    #about .image img {
        max-inline-size: 170px;
    }
}