/* Handy-Feinschliff (22.10.2026, Micha: „die komplette Webseite richtig gut handyoptimiert, richtig übersichtlich“). Gilt nur bis 680 px Breite, der Laptop bleibt unverändert. Wird als letzte Stildatei geladen (index.html), „html“ vor den Klassen hebt die Regeln über die älteren Handy-Regeln in styles.css, drop-reference.css usw. Ziele, gemessen im WebKit-Testbrowser auf 390 × 844: - Text, den man lesen muss, mindestens 10–11 px; reine Zierbeschriftung mindestens 8 px (vorher teils 5–7 px). - Tippflächen mindestens etwa 40 px (vorher 24–31 px oben, an den Filtern, an den Galerie-Pfeilen, in der Fußzeile). - Eingabefelder 16 px, sonst zoomt das iPhone beim Antippen in die Seite. - Fenster (Produkt, Suche, Merkliste, Größe, Kasse) mit festem Grund statt Milchglas, das Menü dunkelt die Seite ab. */ @media (max-width: 680px) { /* ---------- 1. Kopfzeile ---------- */ /* Logo links, rechts nur Symbole (04.11.2026, Michas iPhone-Screenshot: Burger abgeschnitten, oben alles gequetscht). Mit den 40-px-Tippflächen brauchte die Kopfzeile 414 px: Auf 375 px ragte der Burger 20 px aus dem Bild, die ganze Seite ließ sich seitlich schieben und der Text klebte links am Rand. Der Sprachschalter steht darum unten im Menü (store.js, menue.css); hier ist er versteckt, damit er nicht aufblitzt, bevor das Skript ihn umsetzt. Der Burger ragt mit seiner leeren Tippfläche in den Rand, so stehen seine Striche auf der Randlinie und die Kopfzeile passt auch auf 320 px. */ html .header-tools { gap: 4px; } html .header-tools > .language-switch { display: none; } html .header-icon, html .menu-toggle, html .bag-open { width: 40px; height: 40px; } html .bag-open { justify-content: center; } html .menu-toggle { margin-right: -12px; } html .menu-toggle span { left: 12px; width: 16px; } /* Die Zahlen sind kleine Schilder an der Ecke des Symbols, statt frei über dem Herz zu schweben und die Tasche zu verbreitern. Liegt nichts drin, steht auch keine Null da (data-leer setzt store.js). */ html :is(.saved-count, .bag-count) { position: absolute; top: 3px; right: 1px; display: grid; width: 16px; height: 16px; place-items: center; border: 0; border-radius: 50%; color: var(--black); background: var(--paper); font: 700 9px/1 var(--mono); letter-spacing: 0; } html :is(.saved-count, .bag-count)[data-leer] { display: none; } /* Das Menü selbst (Rolltor über den ganzen Bildschirm) steht seit 26.10.2026 in menue.css. */ /* ---------- 2. Startbereich: Zierbeschriftung mindestens 8 px, Fließtext 11 px, der Link nach unten zum Antippen ---------- */ html .alpine-deck { font-size: 11px; line-height: 1.7; } /* Nicht w-src anfassen: das ist der unsichtbare Originaltext der Überschrift, an dem store.js (kernLikeText) die Buchstabenabstände misst. Mit 8 px rutschten „KALTE LUFT.“ und „KEIN“ zu weißen Klötzen zusammen (22.10.2026). */ html :is(.alpine-index, .alpine-specimen span, .rain-study-rec, .rain-study-time, .alpine-bottomline span) { font-size: 8px; } html .alpine-bottomline a { display: inline-flex; min-height: 40px; align-items: center; font-size: 9px; } html .alpine-copy .eyebrow span, html .alpine-photo-frame figcaption span { font-size: 8.5px; } html .rain-study figcaption b { font-size: 8.5px; } html .rain-study figcaption small { font-size: 8px; } /* Das Foto ist Hochformat, der Snowboarder steht unten rechts. Vorher zeigte der Rahmen fast nur Himmel und das Regenstudie-Kärtchen lag rechts unten genau auf der Person (22.10.2026, Michas Screenshot). Jetzt Ausschnitt nach unten, Rahmen etwas niedriger, Kärtchen oben links (siehe unten). */ html .snowboard-page .alpine-photo-frame, html .alpine-photo-frame { height: min(112vw, 600px); } html .alpine-photo { object-position: 62% 80%; } /* Kärtchen oben links ins Foto (23.10.2026, Michas iPhone-Screenshot: „Video immer noch nicht richtig platziert“): dort ist nur Himmel. Das Foto endet 75 px über dem Ende des Startbereichs und ist min(112vw, 600px) hoch, das Kärtchen 232 px: so steht es auf jeder Breite 16 px unter der oberen und linken Fotokante. Sein Bezugsrahmen liegt 17 px tiefer und 40 px weiter rechts als Startbereich und Foto, daher −17 px und left −1 px (gemessen auf 360 bis 430 px Breite gleich). */ html .rain-study { top: auto; right: auto; bottom: calc(min(112vw, 600px) + 75px - 16px - 232px - 17px); left: -1px; } /* ---------- 3. Streifen „Handverlesen / Gewaschen & geprüft / Nie zweimal gleich“ ---------- */ html .signal-strip span:not(.signal-punkt) { font-size: 8.5px; } /* ---------- 4. Drop ---------- */ html .drop-deck { font-size: 11px; line-height: 1.6; } html .drop-eyebrow, html .drop-eyebrow .drop-name { font-size: 9px; } html .drop-rabatt b, html .drop-rabatt .drop-rabatt-zahl { font-size: 10px; } html .drop-rabatt > span { font-size: 9px; } html #drop :is(.drop-countdown-label, .drop-when) { font-size: 9.5px; } html .drop-flyer-head, html .drop-flyer-head :is(.drop-name, .drop-next) { font-size: 10px; } html .drop-wish legend { font-size: 10px; } html .drop-wish legend small { font-size: 9px; } html .drop-chip span { min-height: 40px; padding: 0 12px; font-size: 10.5px; } html .drop-chips { gap: 7px; } html .drop-wish-mehr { font-size: 9.5px; } html .drop-consent { font-size: 11px; line-height: 1.5; } html .drop-consent input { width: 22px; height: 22px; flex: 0 0 22px; } html .drop-submit-text { font-size: 12px; } html .drop-email { font-size: 16px; letter-spacing: .04em; } /* ---------- 5. Shop: Reiter, Filter, Karten ---------- */ html .category-tab { min-height: 40px; } html .filter-chip { padding: 11px 0; font-size: 10px; } html .filter-chip sup { font-size: 8px; } /* Safari hält native Auswahlfelder auf ihrer eigenen Höhe: darum ohne Systemaussehen, der Pfeil kommt als Bild. */ html .filter-selects { gap: 10px; } html .filter-selects > label { display: flex; flex: 1 1 0; min-width: 0; } html .filter-selects select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 26px 8px 10px; color: #cfcfcb; font: 400 16px/1.2 var(--sans); letter-spacing: 0; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8a86' stroke-width='1.6'/%3E%3C/svg%3E"), linear-gradient(145deg, rgba(245, 248, 248, .055), rgba(15, 17, 18, .58)); background-repeat: no-repeat; background-position: right 9px center, 0 0; background-size: 11px 8px, auto; } :root[data-theme="light"] .filter-selects select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8a86' stroke-width='1.6'/%3E%3C/svg%3E"), linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(230, 228, 222, .42)); background-repeat: no-repeat; background-position: right 9px center, 0 0; background-size: 11px 8px, auto; } html .product-brand { font-size: 9.5px; } html .product-size, html .product-size i { font-size: 10.5px; } html .condition-tag, html .sold-text { font-size: 9px; } html .product-price { font-size: 12.5px; } html .hot-badge b { font-size: 8.5px; } html :is(.results-count, .view-all, .section-topline) { font-size: 9px; } html .view-all { display: inline-flex; min-height: 36px; align-items: center; } html .shop-heading p { font-size: 10.5px; } /* ---------- 5b. Shop-Seite: Kopf ohne Wiederholung und ohne Lücke ---------- */ /* 28.10.2026, Michas iPhone-Screenshot: unter „NEUE FUNDE“ stand „Ausgewählte Marken / Einzelstücke“ und gleich darunter noch einmal „Ausgewählte Marken, gewaschen und geprüft. Jedes Stück gibt es nur einmal.“ (gewaschen & geprüft steht auch im Streifen darüber), danach eine große Lücke bis zu den Reitern. Der Satz fällt am Handy weg, die Lücke schrumpft. Die Filter darunter bleiben, wie sie sind (Michas „fand es davor besser“ zu Kästchen und neuen Feldern). */ html[data-seite="shop"] .shop-section .shop-heading { padding: 22px 0 18px; margin-bottom: 0; } html[data-seite="shop"] .shop-section .shop-heading > p { display: none; } /* ---------- 6. Galerie ---------- */ html .gallery-controls { gap: 8px; } html .gallery-controls button { min-width: 44px; height: 44px; font-size: 12px; } html :is(.gallery-status, .gallery-caption-text) { font-size: 9px; } html .gallery-brand-mark small { font-size: 8.5px; } html .text-link { display: inline-flex; min-height: 40px; align-items: center; } /* ---------- 7. Qualität: Prüfprotokoll ---------- */ /* Die Graffiti-Zeichenfläche ist bei 320 px breiter als der Bildschirm, die Seite ließ sich seitlich schieben (24.10.2026). */ html .about-section { overflow-x: clip; } html .q-zeilen span { font-size: 10px; } html .q-zeilen p { font-size: 10.5px; line-height: 1.55; } /* ---------- 8. Fußzeile: Links mit Platz zum Antippen ---------- */ html .fz-titel { font-size: 10px; } /* Je Link 36 px Tipphöhe, dafür ohne den alten Zeilenabstand (13 px), sonst stehen die Links zu weit auseinander. */ html .site-footer.fz .fz-links { gap: 0; margin-top: -8px; } html .site-footer.fz .fz-links a { display: inline-flex; min-height: 36px; align-items: center; } html .site-footer.fz :is(.fz-recht a, .fz-hoch) { display: inline-flex; min-height: 40px; align-items: center; font-size: 11px; } html .site-footer.fz .fz-folgen { display: inline-flex; min-height: 40px; align-items: center; } html .fz-discord { min-height: 44px; } html .fz-leiste span { font-size: 9.5px; } /* ---------- 9. Fenster: fester Grund statt Milchglas, deutliches Schließen-Kreuz ---------- */ html :is(.product-dialog, .search-dialog, .saved-dialog, .size-dialog, .checkout-dialog, .cart-drawer) { background: #111314; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-theme="light"] .filter-selects select { color: var(--paper); } :root[data-theme="light"] :is(.product-dialog, .search-dialog, .saved-dialog, .size-dialog, .checkout-dialog, .cart-drawer) { background: #f4f3ef; } /* Kreuz und „Beliebt“ bleiben beim Scrollen im Fenster oben stehen: die Leiste .dialog-oben klebt (sticky, Höhe 0), dafür ist das Fenster am Handy ein einfacher Block statt Raster (im Raster könnte sie nur in ihrer eigenen Zelle kleben). */ html .product-dialog { display: block; } html .product-dialog > .dialog-oben { position: sticky; top: 0; } html .product-dialog .dialog-hot { top: 12px; left: 12px; } html .product-dialog .dialog-close { top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #f4f3ef; background: rgba(12, 12, 12, .72); font-size: 26px; } html :is(.search-dialog, .saved-dialog, .size-dialog, .checkout-dialog) .dialog-close, html .drawer-close { width: 44px; height: 44px; font-size: 24px; } html :is(.search-dialog, .checkout-dialog, .size-dialog) :is(input, select, textarea) { font-size: 16px; } /* ---------- 10. Streifen: lange Beschriftungen brechen um statt ineinanderzulaufen ---------- */ /* Bis etwa 370 px lief „GEWASCHEN & GEPRÜFT“ in „NIE ZWEIMAL GLEICH“ hinein (24.10.2026, Größenprüfung). Die Zeichen stehen oben bündig, damit sie in einer Reihe bleiben, auch wenn eine Beschriftung zweizeilig wird. */ html .signal-strip span.signal-punkt { justify-content: flex-start; } html .signal-strip span.signal-punkt > span { white-space: normal; text-align: center; line-height: 1.45; } } /* Schmalste Handys (iPhone SE erste Generation, 320 bis 374 px), Größenprüfung 24.10.2026. */ @media (max-width: 374px) { /* „KALTE LUFT.“ ragte mit fester Größe 51 px bei 320 px 38 px über den rechten Rand. Jetzt wächst die Schrift mit der Breite: „KALTE LUFT.“ ist rund 6,1 Schriftgrößen breit, links und rechts je 23 px Rand, etwas Luft bleibt. */ html[lang] .alpine-copy h1 { font-size: min(51px, calc((100vw - 46px) / 6.35)); } /* Der Platzhalter „DEINE E-MAIL-ADRESSE“ wurde abgeschnitten. Nur der Platzhalter wird kleiner, eingetippter Text bleibt 16 px (sonst zoomt das iPhone beim Antippen in die Seite). */ html .drop-email::placeholder { font-size: 12px; letter-spacing: .04em; } }