/* ═══════════════════════════════════════════════════════════════
   mobile.css — Telefonausgabe des Drucksystems
   ───────────────────────────────────────────────────────────────
   WICHTIG: Diese Datei wird in jeder Seite als LETZTES Stylesheet
   geladen, direkt vor </head>. Nur so schlaegt sie die seiteneigenen
   <style>-Bloecke, die sonst bei gleicher Spezifitaet gewinnen.

   Ebenso wichtig: Hier steht ausschliesslich Inhalt in Media-Queries.
   Damit ist die Desktopdarstellung per Konstruktion unberuehrt — es
   gibt keine Regel, die oberhalb von 860px ueberhaupt greifen kann.

   Farben kommen nur aus den Tokens von common.css. Keine neuen
   Farbwerte: applyTheme() schreibt die Tokens inline auf <html> und
   wuerde jeden festen Wert hier ueberfahren.
   ═══════════════════════════════════════════════════════════════ */


/* ══ Tablet und Telefon ═══════════════════════════════════════ */
@media (max-width: 860px) {

    /* ── 1. Sicherheitsnetz gegen waagerechten Ueberlauf ──────
       clip statt hidden: hidden erzeugt einen Scrollcontainer und
       richtet jedes position:sticky an ihm statt am Fenster aus —
       das zerlegt die eingerasteten Kapitel der Startseite. clip
       kappt genauso, erzeugt aber keinen Container. */
    body { overflow-x: clip; }

    img, svg, video, canvas, iframe, table, pre, blockquote {
        max-width: 100%;
    }

    /* Lange Titel und Links brechen um, statt die Zeile zu sprengen */
    body, p, li, td, th, h1, h2, h3, h4, h5, dd, dt {
        overflow-wrap: break-word;
    }


    /* ── 2. Kopfzeile ────────────────────────────────────────
       Logo + Schaltflaechen + Menue passen bei 390px nicht mehr
       nebeneinander. Die Galerie traegt zusaetzlich einen langen
       Knopf ("Anime hinzufuegen") und lief 78px ueber. */
    .header, .page-header { gap: 8px; padding: 0 12px; }

    /* Wenn die Kopfzeile zu eng wird, darf das Logo kuerzen — aber
       niemals das Menue aus dem Bild geschoben werden. Genau das
       passierte auf der Galerie (Menue lag 78px ausserhalb). Also:
       Logo schrumpffaehig mit Auslassungspunkten, Bedienelemente
       rechts und das Menue starr. */
    .header, .page-header { min-width: 0; }
    .header > *, .page-header > * { min-width: 0; }

    .header .logo, .header .logo-link,
    .page-header .logo, .page-header .logo-link {
        font-size: 1.06rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
    }

    /* Bewusst NICHTS in der Kopfzeile auf flex-shrink:0 setzen.
       Zweimal probiert, zweimal danebengegriffen: starr gesetzt
       schiebt sich der starre Block hinaus und presst die anderen
       auf Breite 0 (Galerie beim Menue, Synchro-Tracker bei den
       Schaltflaechen). Alles schrumpffaehig lassen und das Logo
       per Auslassungspunkten kuerzen ist die stabile Loesung. */

    /* Beschriftung weg, Symbol bleibt: font-size 0 auf dem Knopf,
       eigene Groesse auf dem Icon. */
    .header .m-btn, .page-header .m-btn {
        font-size: 0 !important;
        gap: 0;
        padding: 9px 12px !important;
    }
    .header .m-btn i, .page-header .m-btn i { font-size: 15px; }

    .header .header-right, .page-header .header-right { gap: 8px; }

    /* Der Themenschalter traegt den Ausgabenamen (SHONEN, SUMI, …)
       und behaelt seine Schriftgroesse — der Platz kommt aus dem
       kuerzbaren Logo, nicht aus kleinerer Schrift. */
    .aw-theme-btn { padding: 0 10px; }

    /* Der Synchro-Tracker setzt in seiner eigenen Mobil-Query
       .header-right { width:100% } — gemeint war der gestapelte
       .header-content, getroffen wird aber auch die echte Kopfzeile,
       und das Menue flog hinaus. Die Kindkombination (0,2,0) schlaegt
       die dortige Klassenregel (0,1,0) unabhaengig von der Reihenfolge. */
    .header > .header-right, .page-header > .header-right { width: auto; }

    /* Der Menuecontainer erbt auf einzelnen Altseiten content-box
       und rechnet dann seine Polsterung obendrauf. */
    #aw-nav-container, #aw-nav-container * { box-sizing: border-box; }


    /* ── 3. Tippziele ────────────────────────────────────────
       Die Fusszeilenlinks waren rund 19px hoch — auf jeder der
       Seiten. Rund 40px sind das Mindestmass fuer einen Finger. */
    .aw-footer .footer-links { gap: 2px 16px; }
    .aw-footer .footer-links a {
        padding: 10px 6px;
        font-size: 0.9rem;
    }

    .aw-theme-btn, #aw-menu-btn, .aw-nav-btn {
        min-height: 40px;
    }

    .genre-pill, .filter-pill, .count-pill, .tab-btn, .chip {
        min-height: 34px;
    }

    /* Studio-Karte: die Staedtepunkte sind 6–9px grosse SVG-Kreise.
       Die Trefferflaeche liesse sich nur ueber einen durchsichtigen
       breiten Rand vergroessern — der wuerde aber die schwarze
       Tuschekontur ueberschreiben, und die ist Teil der Drucksprache.
       Stattdessen waechst die Beschriftung, die zum selben klickbaren
       <g> gehoert. Der verlaessliche Weg bleiben die Staedte-Chips
       ueber der Karte; die Punkte sind die Direktauswahl. */
    .city-dot text { font-size: 14px; }
    .city-dot { cursor: pointer; }

    /* Kalenderzeilen der Startseite: 24px waren zu flach */
    .day-anime-pill { padding: 7px 0 8px; }

    /* Kartentitel auf Watchlist und Abgeschlossen fuehren seit dem
       Ausbau von details.html zum Eintrag. Als reiner Textlink waren
       sie 25px hoch. */
    .card-title a { display: inline-block; padding: 7px 0; }

    /* Folgenzaehler auf "Am Schauen": 26x26 ist fuer einen Daumen zu
       klein — und das ist die meistbenutzte Schaltflaeche der Seite. */
    .ep-minus, .ep-plus { min-width: 38px; min-height: 38px; }

    #scroll-indicator { padding: 10px 2px; }


    /* ── 4. Formulare ────────────────────────────────────────
       Unter 16px Schriftgroesse zoomt iOS Safari beim Antippen
       eines Feldes automatisch hinein und die Seite bleibt
       verschoben zurueck. 16px ist die Schwelle, kein Geschmack. */
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select, textarea {
        font-size: 16px;
        min-height: 44px;
    }
    textarea { min-height: 96px; }

    input[type="range"] { height: 34px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

    /* Dateiwahl bricht sonst aus schmalen Karten heraus */
    input[type="file"] { max-width: 100%; }

    .form-row, .form-grid { grid-template-columns: 1fr !important; }


    /* ── 5. Namentlich bekannte Ueberlaeufe ──────────────────
       Aus der Messung bei 390px, nicht geraten. */

    /* Import: content-box + fester Innenabstand ergaben 396px */
    .import-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 28px 16px;
    }

    /* Duell: die VS-Plakette ist gedreht. Ihr Umriss ist dadurch
       breiter als die gesetzten 350px — max-width allein greift
       deshalb nicht, die Breite selbst muss kleiner werden. */
    .vs-arena, .vs-badge {
        max-width: 100%;
        box-sizing: border-box;
    }
    .vs-badge { width: min(350px, 76vw); }

    /* Studio-Detailseite: der Rueckweg war ein 26px hoher Textlink */
    .details-container p a {
        display: inline-block;
        padding: 7px 0;
    }

    /* Favoriten: das Herz ist ein Block ueber die volle Breite mit
       pulsierender Animation. Skaliert wird damit der ganze Block,
       nicht das Zeichen — und der Umriss schob die Seite seitwaerts.
       Auf Inhaltsbreite setzen, dann skaliert nur noch das Herz. */
    .hero-icon, .page-hero .hero-icon {
        max-width: 100%;
        width: fit-content;
        margin-inline: auto;
    }


    /* ── 6. Mikroschrift ─────────────────────────────────────
       Die Plaketten-Beschriftungen lagen bei 8,6–10px. Als
       Drucksprache gewollt, auf dem Telefon aber nicht mehr
       lesbar. Untergrenze 10px, Laufweite etwas enger, damit
       die Zeile nicht laenger wird. */
    .fig-lbl, .stat-lbl, .cover-kicker, .ch-num,
    .feature-tag, .tier-item-title, .genre-hint, kbd,
    .side-road span, .shelf-chip {
        font-size: 10px;
        letter-spacing: .14em;
    }


    /* ── 7. Waagerechte Streifen ─────────────────────────────
       Reiter und Filterleisten scrollen seitwaerts. Ohne
       Randabstand klebt das letzte Element an der Kante und
       sieht abgeschnitten aus. */
    .tabs, .filter-row, .shelf-chips {
        scroll-padding-inline: 12px;
    }
    .tabs { padding-right: 12px; }


    /* ── 8. Modale Fenster ───────────────────────────────────
       Auf dem Telefon soll ein Dialog nicht ueber den Rand
       hinausragen und muss innen scrollen koennen. */
    .modal, .modal-content, .lightbox-inner, .qa-popup, .popup {
        max-width: calc(100vw - 24px);
        max-height: 86dvh;
        overflow-y: auto;
    }
}


/* ══ Telefon ══════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Drei Spalten ergaben rund 115px pro Karte — die Genrezeile
       darunter wurde abgeschnitten. Zwei Spalten atmen. */
    .mood-grid-big { grid-template-columns: repeat(2, 1fr) !important; }

    /* Alles, was noch drei oder mehr feste Spalten vorschreibt,
       faellt auf zwei zurueck. auto-fill-Raster bleiben unberuehrt,
       die rechnen sich selbst richtig. */
    .stats-grid, .feature-grid, .card-grid, .studio-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* Kopfzeile ganz schmal */
    .header, .page-header { padding: 0 10px; }
    .header .logo, .page-header .logo,
    .header .logo-link, .page-header .logo-link { font-size: 1rem; }

    /* Grosse Zierschrift darf die Zeile nicht sprengen */
    h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }

    .aw-footer .footer-links { gap: 0 12px; }
}
