/* ============================================================
mv-proto-fix.css — Bruecke zwischen Prototyp-CSS (mv/style.css)
und den beibehaltenen Live-Funktions-Hooks im proto.php-Layout.
Wird NACH mv/style.css geladen.
============================================================ */
/* --- Countdown: JS baut .cd-Boxen in .award-countdown (nicht .countdown) --- */
.award-countdown{ display:inline-flex !important; gap:6px !important; vertical-align:middle; }
.award-meta{ display:inline-flex; align-items:center; }
/* --- Mobile-only Elemente auf Desktop verstecken (Live-Klassen) --- */
.sidebar-mobile-top,
.mobile-sort-bar,
.award-bar-inline,
.award-bar,
#showMenuBtnContainer,
#showMenuBtn{ display:none !important; }
/* --- Sprach-Dropdown: Optionen erst bei is-open zeigen --- */
.language-selector-dropdown-options{ display:none !important; }
.language-selector-dropdown.is-open .language-selector-dropdown-options{ display:block !important; }
/* Stephan 2026-07-13: Werbung im Preview wieder AN (vorher komplett aus).
Nur alte Presenter-/Sponsorship-Bar-Reste bleiben aus; echte Ad-Slots +
Sponsored-Rows werden angezeigt. */
/* Sponsorship-Bar sichtbar (Stephan 2026-07-14): ad-sponsorship NICHT mehr ausblenden;
nur alte Presenter-Reste bleiben aus. */
[class*="presenter"], [id*="presenter"]{ display:none !important; }
/* --- mobile Meta-Zeilen weg --- */
.mobile-meta-row,
.mobile-vote-text{ display:none !important; }
/* Vote-Zahlen sind nur Polling-Hook: off-screen statt display:none (robust
gegen JS, das display wieder aufhebt) — Werte bleiben lesbar fuers Polling */
.app-listing-app-votes-and-categories{
position:absolute !important; left:-9999px !important; top:0 !important;
width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important;
}
/* --- Mein Sortier-Dropdown (.mv-sortsel* — eigene Klasse, kein Prototyp-CSS) --- */
.mv-sortsel{ position:relative; display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
border:1px solid var(--gold-border); border-radius:999px; padding:7px 13px; background:var(--gold-soft); font-size:12.5px; color:#1a1a1a; }
/* Label+Wert einzeilig halten: auf der Startseite steckt "Sortieren: Rang" in EINEM
span (default umbrechbar) -> ohne nowrap bricht es auf schmalem Handy in zwei Zeilen. */
.mv-sortsel span{ white-space:nowrap; }
.mv-sortsel-lead{ color:var(--gold-text); font-size:15px; }
.mv-sortsel b{ font-weight:600; color:#1a1a1a; }
.mv-sortsel-chev{ color:var(--gold-text); font-size:14px; }
.mv-sortsel-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:150px; z-index:60;
background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-hover); padding:6px; }
.mv-sortsel.open .mv-sortsel-menu{ display:block; }
.mv-sortsel-opt{ display:block; padding:7px 11px; border-radius:6px; font-size:13.5px; color:var(--ink); cursor:pointer; white-space:nowrap; }
.mv-sortsel-opt:hover{ background:#f6f4ef; }
.mv-sortsel-opt.active{ background:var(--gold-soft); color:var(--gold-ink); font-weight:600; }
/* --- Spaltenkopf-Sortier-Indikatoren (Live) dezent --- */
.app-listing-header{ display:none !important; } /* alte Live-Kopfzeile, falls doppelt gerendert */
.sort-indicator{ display:none !important; }
/* ============ Vote-Pfeile: grau default, gold NUR bei eigenem Vote ============ */
/* .pos (Score>0) darf NICHT gold faerben */
.votecap.pos .vc-up{ background:#e7e2d8 !important; color:#6b6455 !important; }
/* gold nur wenn der Nutzer gevotet hat (.active am Button) */
.votecap .app-listing-vote-btn-up.active{ background-color:var(--gold-text) !important; color:#fff !important; }
.votecap .app-listing-vote-btn-down.active{ background-color:var(--gold-text) !important; color:#fff !important; }
/* Hover bleibt goldig */
@media (hover:hover){ .votecap .vc-up:hover, .votecap .vc-dn:hover{ background:var(--gold-hi) !important; color:#fff !important; } }
/* ============ Suchfeld + Autocomplete ============ */
.search-input-wrapper{ position:relative !important; }
.search-input-container{ display:flex !important; align-items:center !important; gap:8px !important;
border:1px solid var(--line) !important; border-radius:999px !important; background:#fafafa !important; padding:8px 14px !important; }
.search-input-container #searchInput{ border:none !important; background:transparent !important; outline:none !important; width:100% !important; font-size:13px !important; }
.search-input-container #searchBtn{ order:-1 !important; color:var(--hint) !important; }
/* ⚠️ RECHTS VERANKERT, NICHT LINKS (Stephan, 27.10.2026: "das Dropdown darf
nicht abgeschnitten werden, stattdessen lieber die Suchtreffer mit … abkuerzen").
Vorher stand hier left:0 + min-width:340px: Das Dropdown begann an der LINKEN
Kante des Suchfelds und wuchs nach rechts. Gemessen bei 1024px Fensterbreite:
Suchfeld endet bei 996 (also im Bild), das Dropdown reichte bis 1106 -- 82px
ueber den Rand hinaus, und genau dort sitzt die "+"-Pille. Der Nutzer sah den
Knopf nicht, mit dem er haette hinzufuegen sollen.
right:0 verankert es an der RECHTEN Kante des Suchfelds und laesst es nach
links wachsen. Da das Suchfeld selbst immer im Bild liegt, liegt damit auch
das Dropdown immer im Bild -- bei jeder Fensterbreite, ohne Medienabfrage.
Die Begrenzung auf den Viewport kommt zusaetzlich dazu, fuer den Fall, dass
das Suchfeld einmal naeher an den linken Rand rueckt.
⚠️ min-width MUSS mitgedeckelt werden: In CSS schlaegt min-width die
max-width. Ein fester Boden von 340px wuerde auf einem schmalen Geraet genau
den Ueberlauf erzeugen, den diese Regel verhindern soll.
Abgeschnitten wird stattdessen der TEXT: Titel und Anbieter tragen in beiden
Vertikalen overflow:hidden + text-overflow:ellipsis. */
#searchAutocomplete, .search-autocomplete-dropdown{
position:absolute !important; top:calc(100% + 22px) !important; left:auto !important; right:0 !important;
min-width:min(340px, calc(100vw - 16px)) !important; max-width:min(420px, calc(100vw - 16px)) !important; background:#fff !important; border:1px solid var(--line) !important;
border-radius:12px !important; box-shadow:var(--shadow-hover) !important; max-height:440px !important; overflow-y:auto !important;
z-index:300 !important; padding:6px !important; text-align:left !important; }
.autocomplete-item, .autocomplete-add-pill{ display:flex !important; align-items:center !important; gap:10px !important;
padding:8px 10px !important; border-radius:8px !important; cursor:pointer !important; }
.autocomplete-item:hover{ background:#f6f4ef !important; }
/* ============ Feinschliff (Stephan 2026-07-03) ============ */
/* Suche: nur EIN Rahmen (aeusseren Wrapper entrahmen) */
.header-action-search, .search-input-wrapper{ border:none !important; box-shadow:none !important; background:transparent !important; padding:0 !important; }
/* Filter-Optionen kompakter, damit Android-Gruppe sichtbar anschliesst */
.filter .fopt{ padding:3px 4px !important; margin:0 !important; font-size:13.5px !important; }
.filter .fopts{ gap:0 !important; }
.filter .fopt-group{ margin:7px 0 2px !important; }
/* Filter-Head: "alle"-Label vertikal mittig zum Menuenamen, Chevron rechts.
Feiner Baseline-Ausgleich: der kleinere allval-Font sitzt sonst optisch
leicht tief, translateY(-1px) hebt ihn auf optische Mitte. */
.filter .filter-head{ gap:14px !important; }
/* allval: gleich groesserer Font damit Bounding-Box zum Menuenamen matcht,
dann greift align-items:center des Parent-Flex sauber ohne Baseline-Skew. */
.filter .filter-head .allval{ display:inline-block !important; font-size:13px !important; line-height:1 !important; position:relative; top:1px; }
.filter .filter-head .fchev{ margin-left:auto; }
/* Oberer Rand: weniger Leerraum ueber dem Header */
.main{ padding-top:0 !important; }
.topbar{ padding-top:10px !important; padding-bottom:10px !important; }
.content{ padding-top:16px !important; }
/* Voting-Pfeile: keine Link-Unterstreichung bei Hover */
.votecap a, .votecap .vc-up, .votecap .vc-dn{ text-decoration:none !important; }
.votecap .vc-up:hover, .votecap .vc-dn:hover{ text-decoration:none !important; }
/* Inline- (z.B. Cookie-Namen in den Rechtstexten): Bootstrap faerbt es rosa
(#e83e8c), das passt nicht zum CI. Auf das Marken-Braun der Award-CTA-Zeile
(.award-mini .t) setzen. a>code / pre code / .variant-label code bleiben unberuehrt. */
code{ color:var(--gold-text); }
/* Erklaerende Hero-Subline vereinheitlichen: Award-Seiten (index/event/archiv)
auf den Jury-Picks-Stil (Vorbild) — 15px, muted, line-height 1.5, ruhig
zentriert, max 520px. Wunsch Stephan 2026-08-27 (Groesse/Farbe/Stil konsistent
mit /jury/picks, das schon .jury-hero .sub{15px/var(--muted)/1.5/520} nutzt). */
.award-hero .sub{ font-size:15px !important; color:var(--muted) !important; line-height:1.5 !important; max-width:520px !important; margin:10px auto 0 !important; }
/* Zeilen-Links: kein Blau/Unterstreichung; nur der gehoverte String wird gold */
.row a, .nm a, .app-listing-app-link,
.app-listing-published-by-filter, .app-listing-mainCat-link, .app-listing-price-filter{
color:inherit !important; text-decoration:none !important;
}
.nm a:hover, .app-listing-app-link:hover,
.app-listing-published-by-filter:hover, .app-listing-mainCat-link:hover, .app-listing-price-filter:hover{
color:var(--gold-text) !important; text-decoration:none !important;
}
/* ============ Feinschliff 2 (Stephan 2026-07-03) ============ */
/* Rangzahlen eine Spur kleiner */
.rank b{ font-size:19px !important; }
/* LIVE in Grossbuchstaben */
.live, #liveModeToggle, .live-badge{ text-transform:uppercase !important; }
/* OK- + Filter-loeschen-Buttons weg (Auto-Reload ersetzt sie) */
#applyFiltersBtn, #clearFiltersBtn, .sidebar-filters-actions{ display:none !important; }
/* Oberer Abstand weiter reduzieren */
.topbar{ padding-top:6px !important; padding-bottom:8px !important; }
.content{ padding-top:12px !important; }
/* Sticky Footer sicherstellen (auch bei aktivem Sponsored-Header) */
.main{ display:flex !important; flex-direction:column !important; height:100vh !important; height:100svh !important; overflow:hidden !important; }
.scroll{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; }
.scroll > .content{ flex:1 0 auto !important; }
.foot{ flex-shrink:0 !important; }
/* Stephan 2026-07-13: Ad-Label/Titel wieder AN (Werbung sichtbar). */
/* ============ Feinschliff 3 (Stephan 2026-07-03) ============ */
/* Oberer Abstand komplett killen -> Footer wird sonst unten abgeschnitten */
html, body{ margin:0 !important; padding:0 !important; }
.shell{ margin-top:0 !important; }
.topbar{ padding-top:8px !important; }
/* Vote-Pfeile SCHWARZ als Default (noch nicht geklickt); gold nur bei eigenem Vote */
.votecap .vc-up, .votecap .vc-dn{ color:#6b6455 !important; }
.votecap .app-listing-vote-btn-up.active, .votecap .app-listing-vote-btn-down.active{ color:#fff !important; }
@media (hover:hover){ .votecap .vc-up:hover, .votecap .vc-dn:hover{ color:#fff !important; } }
/* Award-Unterzeile "Stimm jetzt ab!" groesser */
.award-txt .s, .award-mini .s{ font-size:14px !important; font-weight:500 !important; }
/* Jury-Sprechblase gut sichtbar */
.jbadge i, .jbadge{ font-size:15px !important; }
/* ============ Feinschliff 4 (Stephan 2026-07-03) ============ */
/* Oberer Abstand AGGRESSIV killen */
html, body{ margin:0 !important; padding:0 !important; }
.shell{ margin:0 auto !important; }
.main{ padding-top:0 !important; margin-top:0 !important; }
.topbar{ padding-top:6px !important; margin-top:0 !important; }
/* Jury-Badge: gold auf blassem Gelb (gold-soft), nicht schwarz auf weiss */
.jbadge{ background:var(--gold-soft) !important; color:var(--gold-text) !important; border:1px solid var(--gold-border) !important; }
.jbadge i{ color:var(--gold-text) !important; }
/* ============ Feinschliff 5 (Stephan 2026-07-03) ============ */
/* Spaltenkopf RANG zentriert -> buendig ueber der zentrierten Rang-Zahl */
.colhead [data-sort="rank"]{ text-align:center !important; }
/* Trend-Platzhalter-Sparkline (flache Linie bis echte Verlaufsdaten da sind) */
.c-spark{ display:flex !important; align-items:center !important; }
.c-spark .spark{ width:88px !important; height:22px !important; opacity:.85 !important; }
/* ============ Feinschliff 6 (Stephan 2026-07-04) ============ */
/* Links KONSEQUENT ohne Unterstreichung - auch Header/Award-Zeile/"Alle Kategorien" */
.shell a, .shell a:hover, .shell a:focus{ text-decoration:none !important; }
/* Gold pulsierender LIVE-Button UEBERALL (Animation aus Live-CSS; war nur im default-Layout) */
@keyframes liveBadgePulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.2); } }
.live, #liveModeToggle{ animation:liveBadgePulse 2.4s ease-in-out infinite; }
.live.off, #liveModeToggle.off, .live-badge.off{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ .live, #liveModeToggle{ animation:none !important; } }
/* ============ Feinschliff 7: Award-Seite (Stephan 2026-07-04) ============ */
/* Award-Zeilen-votecap exakt wie Listen-votecap (nicht breiter/gestreckt) */
.vrow .votecap{ width:42px !important; flex-shrink:0 !important; align-self:center !important; }
/* ============ Feinschliff 8: Award-Voting = Listen-Voting (Stephan 2026-07-04) ============ */
/* Eigener Vote (active) auf der Award-Seite gold faerben - wie auf der Liste.
Die alten Regeln galten nur fuer .app-listing-vote-btn, nicht fuer .award-vote-*. */
.votecap .award-vote-up.active, .votecap .award-vote-down.active{ background-color:var(--gold-text) !important; color:#fff !important; }
/* ============ Feinschliff 9 (Stephan 2026-07-04) ============ */
/* LIVE-Button fett */
.live, #liveModeToggle, .live-badge{ font-weight:800 !important; }
/* ============ Feinschliff 10: Preis/Trend-Spalten vertauscht (Stephan 2026-07-04) ============ */
/* Preis (78px) jetzt vor Trend (96px) -> Grid-Breiten an Position 5+6 tauschen */
.colhead, .row{ grid-template-columns: 58px 1fr 150px 130px 78px 96px 62px !important; }
/* ============ Feinschliff 62: Zeilenraster schrumpft mit (Stephan 2026-09-03) ============ */
/* Bis 980px greift das Kartenlayout (.mobile-restructured). Dazwischen - 981px bis rund
1230px - war das Raster oben breiter als der Platz: Die sechs festen Spalten nahmen sich
ihre 574px + 84px Abstaende unveraendert, und die einzige flexible Spalte (der App-Name)
musste den gesamten Mangel allein auffangen. Bei 1000px Fensterbreite blieben ihr 21px:
Der Name verschwand ganz, und die Hersteller-Spalte schob sich ueber das App-Icon.
Jetzt schrumpfen ALLE Spalten mit - clamp(Untergrenze, mitwachsend, heutiger Wert).
Ab 1600px stehen alle Werte auf ihrem Maximum. Der Anker lag zuerst bei ~1390px;
Stephan 03.09.: zu spaet - oberhalb davon gab wieder nur der Name nach. Jetzt setzt
das Mitschrumpfen frueh genug ein, um beim Verkleinern spuerbar zu sein.
Hersteller, Kategorie und Name kuerzen bereits per text-overflow:ellipsis,
schmalere Spalten schneiden daher sauber ab statt zu ueberlaufen.
Die Regel darueber bleibt als Rueckfallebene fuer <=980px absichtlich stehen.
.app-listing-sponsored-row muss mitlaufen: Sie hat ihr eigenes Raster in
apps_index.php mit denselben sieben Spalten. Ohne sie stehen Hersteller,
Kategorie und Preis der Anzeigenzeile nicht mehr unter denen der normalen
Zeilen (bei 1440px gemessen: 57px / 40px / 26px Versatz). */
@media (min-width: 981px){
.colhead, .row, .app-listing-sponsored-row{
grid-template-columns:
clamp(40px, 3.63vw, 58px) /* Rang */
minmax(0, 1fr) /* App-Name */
clamp(88px, 9.38vw, 150px) /* Hersteller */
clamp(78px, 8.13vw, 130px) /* Kategorie */
clamp(60px, 4.88vw, 78px) /* Preis */
clamp(56px, 6vw, 96px) /* Trend */
clamp(50px, 3.88vw, 62px) /* Votes */
!important;
column-gap: clamp(10px, 0.88vw, 14px) !important;
}
}
/* ============ Feinschliff 11: LIVE-Button nur auf Live-Seiten (Stephan 2026-07-04) ============ */
#liveModeToggle.mv-nolive{ display:none !important; }
/* ============ Feinschliff 12: Sprachmenue eckiger Rahmen weg (Stephan 2026-07-04) ============ */
/* Aeusseres .language-selector-dropdown darf keinen eigenen (eckigen) Rahmen/Hintergrund haben - nur der .pill-btn ist rundlich */
.drop.language-selector-dropdown, .language-selector-dropdown{ border:none !important; background:transparent !important; box-shadow:none !important; }
/* ============ Feinschliff 13: Login/Register-Modale + Dialoge im proto-Look (Stephan 2026-07-04) ============ */
.modal-content{ border:none !important; border-radius:16px !important; box-shadow:0 20px 60px rgba(0,0,0,.22) !important; }
.modal-header{ border-bottom:1px solid var(--line) !important; }
.modal-title{ font-family:var(--display) !important; font-weight:700 !important; }
.modal-body .form-control, .modal-content .form-control{ border-radius:9px !important; border:1px solid var(--gold-border) !important; }
.modal-body .form-control:focus, .modal-content .form-control:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(184,134,11,.15) !important; }
.modal-content .btn-primary{ background:var(--gold) !important; border:none !important; border-radius:10px !important; font-weight:600 !important; }
/* 2026-09-03 (Stephan): Gold-Buttons sollen beim Hover wieder ABDUNKELN, wie es
frueher war. Bisher hellte var(--gold-hi) auf (#b8860b -> #d4a017), weiss darauf
ergab nur 2.38:1. Jetzt der alte Ton #8a6508 als Literal: 5.32:1, damit ueber der
WCAG-AA-Schwelle. Bewusst NICHT ueber --gold-hi, denn dieselbe Variable faerbt in
Zeile 67 die Vote-Buttons (.vc-up/.vc-dn:hover) -- die stehen nicht im Auftrag und
die Voting-Oberflaeche ist empfindlich. !important bleibt, sonst gewinnt Bootstrap
mit seinem Blau. */
.modal-content .btn-primary:hover{ background:#8a6508 !important; }
.modal-content a{ color:var(--gold-text) !important; }
/* mvAlert/mvConfirm rundlicher (Konsistenz) */
.mv-modal{ border-radius:16px !important; }
.mv-modal-btn{ border-radius:10px !important; }
/* ============ Feinschliff 14+16: Bootstrap-Modale zentrieren (Stephan 2026-07-04/05) ============ */
/* WURZEL: Prototyp-style.css definiert .modal als Inline-Card (position:relative; max-width:420px)
und ueberschreibt damit Bootstraps .modal (position:fixed; fullscreen-Overlay). Dadurch
klebten addAppModal/login/register im normalen Textfluss links unten. Fix: Bootstrap-Modale
(.modal.fade) auf ihr Fullscreen-Overlay-Verhalten zuruecksetzen und mittig ausrichten. */
.modal.fade{
position:fixed !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important;
width:100% !important; height:100% !important;
max-width:none !important; max-height:none !important;
margin:0 !important; padding:0 !important;
background:none !important; border-radius:0 !important; box-shadow:none !important;
overflow:hidden !important; z-index:1050;
}
.modal.fade.show{ display:flex !important; align-items:center !important; justify-content:center !important; }
.modal.fade .modal-dialog{ margin:0 auto !important; max-width:500px; width:100%; }
.modal.fade .modal-content{ max-height:90vh; overflow-y:auto; }
/* ============ Feinschliff 15: User-Menue an Live-JS (main.js) koppeln (Stephan 2026-07-05) ============ */
/* main.js toggelt .open auf .menu-item-dropdown-content (das Menue selbst), die Prototyp-CSS
zeigt aber nur .drop.open .drop-menu (open am Container). Deshalb hatte der Klick keinen
sichtbaren Effekt. Diese Regel laesst das Menue auf die von main.js gesetzte Klasse reagieren. */
.drop .drop-menu.menu-item-dropdown-content.open{ display:block; }
/* SVG/Icon im Avatar durchklickbar machen, damit e.target der bleibt -
sonst greift der Schliessen-Check in main.js (mouseup) beim ausgeloggten Nutzer nicht. */
.user-menu-btn svg,
.user-menu-btn i{ pointer-events:none; }
/* ============ Feinschliff 17: Schliessen-X in allen Modalen (Stephan 2026-07-05) ============ */
/* login/register hatten kein X; addApp schon. Einheitlich oben rechts, proto-Look. */
.modal .modal-header{ position:relative; }
.modal .modal-header .close{
position:absolute; top:12px; right:14px;
border:none; background:none; font-size:26px; line-height:1; font-weight:400;
color:#b3afa5; opacity:1; text-shadow:none; cursor:pointer; padding:2px 6px; z-index:3;
}
.modal .modal-header .close:hover{ color:#333; }
/* ============ Feinschliff 18: (zurueckgenommen, Stephan 2026-07-06) ============ */
/* Frueher: .row{padding-right:14px} + colhead 14px beidseitig. Das rueckte das votecap
14px vom rechten Kartenrand weg ("Rahmen rechts viel zu breit"). mv/style.css hat bereits
die preview-static-Geometrie (Spalten bündig, votecap am Rand) -> keine Overrides mehr. */
/* ============ Feinschliff 19: Award-Header ohne Hover-Unterstrich (Stephan 2026-07-05) ============ */
/* Der "Juli-Award"-Header (.award-mini) ist ein Link; globales a:hover unterstrich ihn. */
.award-mini, .award-mini:hover, .award-mini *, .award-mini:hover *{ text-decoration:none !important; }
/* ============ Feinschliff 20: Such-Autocomplete-Dropdown (Stephan 2026-07-05) ============ */
/* Die proto-Seite laedt die Live-style.css nicht -> .search-autocomplete-dropdown war
ungestylt (kaputt/gequetscht). Regeln aus der Live-CSS portiert, Highlight in Gold. */
.search-input-wrapper{ position:relative; }
.search-autocomplete-dropdown{
position:absolute; top:100%; left:0; right:0; margin-top:4px;
background:#fff; border:1px solid #ddd; border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,0.14); max-height:320px; overflow-y:auto; z-index:1000;
}
.autocomplete-group-label{
padding:8px 14px 4px; font-size:11px; font-weight:600; text-transform:uppercase;
color:#6f6f6f; letter-spacing:.5px; display:flex; align-items:center; gap:6px;
}
.autocomplete-group-label i{ font-size:12px; width:14px; text-align:center; }
/* Text-Items (App/Entwickler/Kategorie): einzeilig mit Ellipsis */
.autocomplete-item:not(.autocomplete-itunes-add){
padding:9px 14px; cursor:pointer; font-size:14px; color:#333;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .15s;
}
/* iTunes-Vorschlaege (Icon + Name + Plus): Flex-Layout aus dem Inline-Style
NICHT ueberschreiben/clippen — nur Hover + Cursor ergaenzen. */
.autocomplete-item.autocomplete-itunes-add{ cursor:pointer; transition:background-color .15s; }
.autocomplete-item:hover{ background-color:#f6f4ef; }
.autocomplete-item:last-child{ border-radius:0 0 10px 10px; }
.autocomplete-item strong{ color:#b8860b; font-weight:600; }
/* Stephan 2026-07-08: Bei den Text-Vorschlaegen (App/Kategorie/Fuzzy) sind Name-Text
und der Treffer- DIREKTE Kinder von .autocomplete-item (display:flex; gap:10px)
-> sie wurden zu getrennten Flex-Items mit 10px Luecke vor/hinter dem Suchbegriff
("Texte" -> "Text e"). Diese Items sind reiner Text -> block statt flex. Die
iTunes-Add-Eintraege (Icon|Name|Pill) brauchen das Flex und bleiben unberuehrt. */
.autocomplete-item:not(.autocomplete-itunes-add){ display:block !important; }
/* Jury-Badge (Link) ohne Hover-Unterstrich, damit das Prototyp-Icon sauber bleibt */
a.jbadge, a.jbadge:hover{ text-decoration:none !important; }
/* ============ Feinschliff 21: votecap nicht wegschneiden waehrend Tour-Animation (Stephan 2026-07-05) ============ */
/* Bei der FLIP-Vote-Animation schob scale(1.0x) das votecap (rechter Kartenrand) ueber den
Container-Rand; driver.js setzt overflow:hidden auf den Highlight-Container -> votecap
verschwand. overflow explizit sichtbar halten. */
.rows, .app-listing-body{ overflow: visible !important; }
.row.is-shifting, .row.is-spotlight, .app-listing-body-item.is-shifting, .app-listing-body-item.is-spotlight{ overflow: visible !important; }
/* ============ Feinschliff 22: Award-Karten = Startseiten-Layout ohne Kategorie (Stephan 2026-07-06) ============ */
/* 6-Spalten-Grid (Rang/App/Hersteller/Preis/Trend/Voting) statt der 7 der Startseite.
colhead geometrisch an .row angeglichen (wie Feinschliff 18), DEIN VOTING mittig ueber votecap. */
.award-colhead, .row.award-row{ grid-template-columns: 58px 1fr 210px 110px 130px 62px !important; }
.award-colhead{
display:grid; gap:14px; align-items:end;
padding:0 1px 8px 15px; /* exakt wie preview-static .colhead -> Spalten bündig zu .row */
font-size:11.5px; color:var(--hint); text-transform:uppercase; letter-spacing:.04em;
}
/* "Dein Voting" exakt ueber dem votecap (42px, rechtsbuendig wie .c-vote{justify-self:end}) */
.colhead .right, .award-colhead .right{ width:42px; justify-self:end; text-align:center; }
/* Award-Standings ist ein .rows-Flexcontainer -> Abstand zwischen den Karten wie Startseite */
.award-ranking-container .rows{ display:flex; flex-direction:column; gap:6px; }
/* ============ Feinschliff 23: votecap-Ecken (Stephan 2026-07-06) ============ */
/* Chrome clippt die -Kind-Buttons NICHT sauber am border-radius des votecap ->
die eckigen Ober-/Unterkanten ragten ueber den gerundeten Rahmen ("oben zu hoch").
Loesung: den Kindern selbst die passende Eckenrundung geben (10px = 11px Rahmen - 1px). */
.votecap .vc-up{ border-top-left-radius:10px; border-top-right-radius:10px; }
.votecap .vc-dn{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
.votecap .vc-sc:only-child{ border-radius:10px; }
/* ============ Feinschliff 24: Award-Toggle (.seg mit ) + Sortbar (Stephan 2026-07-06) ============ */
/* .seg ist im Prototyp fuer gestylt -> gleiche Optik fuer die -Links. */
.seg a{ font-size:12.5px; padding:6px 14px; border-radius:999px; color:#6f6f6f; cursor:pointer; text-decoration:none; }
.seg a.on{ background:var(--gold-soft); color:var(--gold-ink); font-weight:600; }
/* Stephan 2026-07-12: das aktive Oval (gold) soll den grauen Rahmen KOMPLETT fuellen
(kein 3px-Inset-Spalt). Padding raus + Segmente auf volle Hoehe strecken -> ueberall
(Desktop + Handy). Text bleibt via flex-center mittig. */
.seg{ padding:0 !important; align-items:stretch !important; }
.seg span, .seg a{ display:flex !important; align-items:center !important; }
.award-sortbar{ margin-top:4px; }
/* ============ Feinschliff 25: Bootstrap-.row-Margin auf App-Karten zuruecksetzen (Stephan 2026-07-06) ============ */
/* Bootstrap (fuers Modal geladen) definiert .row{margin:0 -15px} (Grid-Row). Die App-Karten
heissen ebenfalls .row -> die -15px bleedeten rein und verschoben das Zeilen-Grid 15px
gegenueber dem colhead (auf ALLEN Listenseiten: Start + Awards). Reset nur fuer Karten
(im .rows-Container), Bootstrap-Grid-Rows in Modalen bleiben unberuehrt. */
.rows > .row{ margin-left:0 !important; margin-right:0 !important; }
/* ============ Feinschliff 26: Voting-Gold-Aktiv + Jury (Stephan 2026-07-06) ============ */
/* Feinschliff 61 (.votecap.pos .vc-up{grau !important}) ueberschrieb die Gold-Aktiv-Regeln
OHNE !important -> auf Detail + Jury-Picks blieb der gevotete Pfeil grau. Alle
Gold-Aktiv-Varianten (voted-up / vc-up.active / app-listing / award) mit !important
gewinnen lassen -> eigener Vote ist ueberall gold. */
.votecap.voted-up .vc-up,
.votecap .vc-up.active,
.votecap .app-listing-vote-btn-up.active,
.votecap .award-vote-up.active{ background-color:var(--gold-text) !important; color:#fff !important; }
.votecap.voted-down .vc-dn,
.votecap .vc-dn.active,
.votecap .app-listing-vote-btn-down.active,
.votecap .award-vote-down.active{ background-color:var(--gold-text) !important; color:#fff !important; }
/* Jury-Empfehlungstext groesser (war 13px) */
.prec .pjq{ font-size:15px !important; line-height:1.6 !important; }
.prec .pjn{ font-size:14.5px !important; }
.prec .pjt{ font-size:12.5px !important; }
/* Jury-Symbol (.jlogo) gold unterlegt wie die Startseite (.jbadge), Groesse (76px) bleibt */
.jury-hero .jlogo{ background:var(--gold-soft) !important; border-color:var(--gold-border) !important; }
/* F27 (2026-07-06): Footer-Content-Seiten (Warum/FAQ/Impressum/Datenschutz/Entwickler)
einheitlich - SCHWARZE Ueberschriften, Gold nur noch fuer Links. Neutralisiert auch
die goldene h2-Unterlinie. */
.prose h1, .prose h2, .prose h3, .prose h4,
.dev-prose h1, .dev-prose h2, .dev-prose h3{ color:#1a1a1a !important; }
.prose h2{ border-bottom-color:#ececec !important; }
/* ============================================================
RESPONSIVE — Ranking-Liste als Handy-Karten (Stephan 2026-07-10, Seite 1a)
mobile.js (geteilt mit Live, NICHT anfassen) baut ab <=980px pro Karte:
.mobile-icon-cell (Icon links) + .mobile-meta-row (Hersteller . Preis) und
setzt .mobile-restructured. Die grosse Produktions-style.css, die diese
Elemente stylt, ist im proto nicht geladen -> hier im proto-Look nachstylen.
REIN CSS, produktionssicher. Breakpoint 980px = deckungsgleich mit mobile.js.
Layout: [Rang][Icon] Name / Geraete-Pills / Hersteller . Preis ... Voting rechts.
============================================================ */
@media (max-width: 980px){
/* Spaltenkopf raus */
.colhead{ display:none !important; }
/* Karte: Rang + Icon links (spannen), Mitte gestapelt (Name/Pills/Meta), Voting rechts.
GENERISCH ueber .mobile-restructured -> App-Liste UND Award-Liste (beide bekommen
den Marker via mv-mobile.js). Selektoren .rank/.app/.c-* haben beide Zeilentypen.
Ueberschreibt das Spalten-!important-Grid (Z.184) via hoeherer Spezifitaet. */
.row.mobile-restructured{
grid-template-columns: 40px 46px 1fr auto auto !important;
grid-template-areas: "rank icon app spark vote" !important;
column-gap: 10px !important;
align-items: center !important;
padding: 10px 16px !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
margin: 0 !important;
}
.row.mobile-restructured:hover{ box-shadow:none !important; }
.row.mobile-restructured > .rank{ grid-area:rank; align-self:center; justify-self:center; }
.row.mobile-restructured > .rank b{ font-size:15px; color:var(--muted); white-space:nowrap; }
.row.mobile-restructured > .mobile-icon-cell{ grid-area:icon; align-self:center; justify-self:center; }
.row.mobile-restructured > .mobile-icon-cell img{ width:44px; height:44px; border-radius:10px; display:block; }
/* App-Zelle enthaelt jetzt: Name + Meta-Zeile (Hersteller/Pills/Kategorie/Preis) gestapelt */
.row.mobile-restructured > .app{ grid-area:app; align-self:center; min-width:0; display:block !important; }
.row.mobile-restructured > .c-vote{ grid-area:vote; align-self:center; width:auto !important; }
/* Original-Spaltenzellen (leer/nach mobile-meta-row verschoben) + Trend weg */
.row.mobile-restructured > .c-maker,
.row.mobile-restructured > .c-cat,
.row.mobile-restructured > .c-price{ display:none !important; }
/* Trendkurve rechtsbuendig als eigene Zelle vor dem Voting -> ruhiges Bild */
.row.mobile-restructured > .c-spark{ grid-area:spark; display:flex !important; align-items:center; justify-self:end; padding:0 !important; }
.row.mobile-restructured > .c-spark .spark{ width:26px !important; height:12px !important; opacity:.9 !important; }
/* App-Zelle: nur noch der Name (Icon in .mobile-icon-cell, Pills in der Meta-Zeile) */
.row.mobile-restructured > .app .nm{
font-size:15px; line-height:1.25;
display:flex; align-items:center; gap:4px; min-width:0;
}
.row.mobile-restructured > .app .nm > .app-listing-app-link{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto;
}
.row.mobile-restructured > .app .nm > .jbadge{ flex:0 0 auto; }
/* Original-Icons neben dem Namen weg (mv-mobile.js klont sie in die Meta-Zeile) */
.row.mobile-restructured > .app .devs.hidden-on-mobile,
.row.mobile-restructured > .app .nm-devices.hidden-on-mobile{ display:none !important; }
/* Meta: zwei Zeilen — L1 Hersteller + Pills, L2 Kategorie . Preis.
!important ueberschreibt die globale Regel Z.33 (.mobile-meta-row{display:none}),
die die alte Live-Meta-Zeile auf dem Desktop wegblendet. */
.mobile-meta-row{ display:flex !important; flex-direction:column; gap:2px; min-width:0; margin-top:3px; }
.mobile-meta-row .mmr-line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); line-height:1.3; min-width:0; }
.mobile-meta-row .sep{ color:#ccc; }
.mobile-meta-row a{ color:var(--muted); }
.mobile-meta-row a:hover{ color:var(--gold-text) !important; }
/* geklonte Geraete-Pills in der Meta-Zeile */
.mobile-meta-row .mmr-devs{ display:inline-flex; align-items:center; gap:3px; color:var(--muted); font-size:14px; flex:0 0 auto; }
.mobile-meta-row .mmr-devs .android{ color:var(--android); }
/* L1 einzeilig halten: Geraete-Icons bleiben voll, der Hersteller kuerzt mit …
statt auf eine eigene Zeile umzubrechen -> keine 5. Zeile bei langen
Herstellernamen (Pandora Media, Uber Technologies, Alpha Exploration …).
Wunsch Stephan 2026-08-26: mehr Apps aufs Display. */
.mobile-meta-row .mmr-l1{ flex-wrap:nowrap !important; }
.mobile-meta-row .mmr-l1 .app-listing-published-by-filter,
.mobile-meta-row .mmr-l1 .mmr-maker{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; max-width:none; }
/* L2 einzeilig halten: Kategorie kuerzt bei Bedarf mit …, Preis bleibt ganz (kein Umbruch) */
.mobile-meta-row .mmr-l2{ flex-wrap:nowrap !important; }
.mobile-meta-row .mmr-l2 .app-listing-mainCat-link, .mobile-meta-row .mmr-l2 .mmr-cat{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
.mobile-meta-row .mmr-l2 .sep, .mobile-meta-row .mmr-l2 .app-listing-price-filter, .mobile-meta-row .mmr-l2 .mmr-price{ flex:0 0 auto; white-space:nowrap; }
/* Von mobile.js evtl. eingefuegte Vote-Zahlen ausblenden — die votecap-Pille zeigt den Score schon */
.row.mobile-restructured .mobile-vote-text{ display:none !important; }
/* Voting-Pille kompakt rechts */
.row.mobile-restructured > .c-vote .votecap{ margin:0; }
/* --- Sortier-Zeile: Allzeit/Diesen-Monat + Sortier-Dropdown, EINE Zeile --- */
/* nowrap: Toggle + Sort-Pille bleiben auf einer Zeile (kein Umbruch). Der Toggle behaelt
seine Groesse, die Sort-Pille darf schrumpfen und kuerzt bei Bedarf ihren Wert mit "…"
-> kein Rausragen, kein Umbruch. Kurze Labels (App/Rang/Preis/Name) zeigen voll. */
.sortbar{ flex-wrap:nowrap !important; gap:8px !important; align-items:center !important; }
.sortbar .seg, .sortbar .mv-sortsel{ height:40px !important; min-height:0 !important; margin:0 !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; }
.sortbar .seg{ flex:0 0 auto !important; } /* Toggle behaelt Groesse */
.sortbar .mv-sortsel{ flex:0 1 auto !important; min-width:0 !important; } /* Sort-Pille schrumpft bei Bedarf */
.mv-sortsel .mv-sortsel-lead, .mv-sortsel .mv-sortsel-chev{ flex-shrink:0; } /* Icons nie kuerzen */
.mv-sortsel span{ overflow:hidden; text-overflow:ellipsis; min-width:0; } /* nur der Wert kuerzt (…) */
/* Weniger Abstand links (Stephan): der Toggle hatte 12px Extra-Padding links -> raus,
damit er wie die Liste linksbuendig bei ~16px startet. */
.sortbar .ranking-mode-toggle{ margin:0 !important; padding-left:0 !important; }
/* Das aktive Oval fuellt auch mobil den grauen Rahmen: Segmente auf volle Toggle-Hoehe
strecken (align-items:center oben zentrierte sie -> 3px-Spalt). */
.sortbar .seg{ align-items:stretch !important; }
/* Segment-Labels einzeilig + Text mittig in der jetzt vollhohen Pille. */
.sortbar .seg span, .sortbar .seg a{ padding:6px 12px; white-space:nowrap !important; display:flex !important; align-items:center !important; }
/* --- Layout: auf dem Handy KEIN 100vh-Innenscroll. Topbar scrollt mit weg,
die App-Liste bekommt die volle Hoehe (Stephan: sticky verdeckte zu viel). --- */
.shell{ height:auto !important; overflow:visible !important; }
.main{ height:auto !important; overflow:visible !important; }
.scroll{ height:auto !important; overflow:visible !important; }
/* Flexbox-Overflow-Fix: .main ist Flex-Kind von .shell; min-width:auto (Default)
verhindert das Schrumpfen unter die Inhalts-Mindestbreite -> .main bleibt 421 statt
393 = horizontales Scrollen. min-width:0 auf die Kette laesst sie auf Shell-Breite
schrumpfen (die 388er-Kinder passen in 393). Auf der Startseite unschaedlich. */
.main, .scroll, .content, .topbar{ min-width:0 !important; }
/* --- Topbar-Anordnung (Seite 1c): Zeile1 Logo+Award, Zeile2 Suche+LIVE, Zeile3 Aktionen --- */
/* Einheitlicher horizontaler Rand (16px) wie die App-Karten -> alles auf gleicher X-Position */
.topbar{ row-gap:10px !important; align-items:center; padding-left:16px !important; padding-right:16px !important; }
.apps-index-headline, .headline-row{ padding-left:16px !important; padding-right:16px !important; }
.topbar .award-logo{ order:1; flex:0 0 auto; margin-right:16px; }
/* flex-basis:0 -> award-mini startet bei 0 Breite und fuellt den Rest der Zeile,
bleibt so IMMER neben dem Logo (auch bei laengerem Award-Text wie "App-Awards…"). */
.topbar .award-mini{ order:2; flex:1 1 0 !important; min-width:0; }
/* Innere award-mini-Kette MUSS schrumpfen: award-body/award-txt haben sonst keine
definierte Breite -> der Titel nimmt seine max-content-Breite (296px) und schiebt
die Topbar ueber den Viewport (horizontales Scrollen auf der Award-Event-Seite).
Kette auf definierte Breite ziehen + Text umbrechen lassen. */
.topbar .award-mini > .award-body{ flex:1 1 0 !important; min-width:0 !important; width:100%; }
.topbar .award-body > .award-txt{ min-width:0 !important; width:100%; align-self:stretch; }
.topbar .award-txt .t, .topbar .award-txt .s{ overflow-wrap:break-word; }
/* Umbruch-Element (per mv-mobile.js vor die Suche injiziert): erzwingt Zeile 2 */
.topbar .mv-tb-break{ flex:0 0 100% !important; width:100%; height:0; margin:0; padding:0; order:3; }
/* flex-basis:0 (nicht auto): sonst rechnet der Zeilenumbruch mit der grossen Inhalts-Basis
der Suche -> LIVE passt nicht daneben und rutscht in eine eigene Zeile. Mit Basis 0
teilen sich Suche + LIVE die Zeile (Suche waechst in den Rest). */
.topbar .search-input-wrapper.search{ order:3; flex:1 1 0 !important; min-width:0; }
.topbar #liveModeToggle{ order:4; flex:0 0 auto; margin-left:0 !important; }
.topbar .actions{ order:5; flex:1 1 100%; display:flex; align-items:center; gap:8px; }
/* Burger rechts vom Nutzersymbol */
.topbar .actions #addAppBtn{ order:1; }
.topbar .actions .lang{ order:2; }
.topbar .actions .user{ order:3; }
.topbar .actions #showMenuBtn{ order:4; display:inline-flex !important; }
/* --- Suchfeld: exakt LIVE-Button-Hoehe (34px), kein iOS-Zoom (font >=16px) --- */
.topbar .search-input-wrapper.search{ height:34px !important; }
.topbar .search-input-container{ height:34px !important; padding-top:0 !important; padding-bottom:0 !important; box-sizing:border-box !important; align-items:center !important; }
.topbar .search-input-container #searchInput{ font-size:16px !important; }
/* --- Burger gleiche Hoehe wie Nutzer-/Sprach-Symbol --- */
.topbar .actions #showMenuBtn{ height:36px; min-width:40px; justify-content:center; align-items:center; box-sizing:border-box; }
.topbar .actions .avatar{ height:36px; width:36px; box-sizing:border-box; }
/* --- Countdown oben mobil kompakter: feste 38px statt luftiger 51px --- */
.cd{ padding:0 7px !important; min-width:30px !important; height:38px !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; }
.cd b{ font-size:14px !important; line-height:1.1 !important; }
.cd span{ font-size:8px !important; line-height:1.1 !important; margin-top:1px; }
.award-countdown, .countdown{ gap:5px !important; }
/* --- Seiten-Footer auf dem Handy weg (Links stecken im Burger; Copyright wandert dorthin) --- */
.foot{ display:none !important; }
/* --- Filter-Sidebar als Bottom-Sheet: rollt von unten herein (Seite 1b) --- */
.sidebar{
display:flex !important; flex-direction:column;
position:fixed !important; left:0; right:0; bottom:0; top:auto;
width:100%; max-width:none;
max-height:82vh; max-height:82dvh; /* dvh = dynamische Viewport-Hoehe: Kopf bleibt unter der iOS-URL-Leiste sichtbar */
z-index:1000;
border-radius:18px 18px 0 0;
transform:translateY(100%); transition:transform .28s ease;
overflow:hidden !important; box-shadow:0 -8px 30px rgba(0,0,0,.2);
padding:0 !important;
}
body.filter-open .sidebar{ transform:translateY(0); }
/* Kopf bleibt fix oben, der Body scrollt -> Kopf/X immer sichtbar, kein Abschneiden */
.mv-drawer-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 18px 8px; }
/* Nur das grosse Logo im Sheet ausblenden (Descendant, weil es jetzt im .mv-drawer-body sitzt) */
.sidebar .logo{ display:none !important; }
.filter-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:999; opacity:0; visibility:hidden; transition:opacity .2s ease; }
body.filter-open .filter-backdrop{ opacity:1; visibility:visible; }
body.filter-open{ overflow:hidden; }
/* Sticky-Kopf des Sheets: Griff mittig, X rechts, bleibt beim Scrollen sichtbar */
.mv-drawer-head{ display:flex !important; flex:0 0 auto; align-items:center; justify-content:space-between; position:relative; z-index:5; background:#fff; padding:16px 16px 12px; border-radius:18px 18px 0 0; }
/* Sidebar-Werbung (nur Desktop) im Handy-Drawer ausblenden */
.mv-sidebar-ad-label, .ad-slot-filters{ display:none !important; }
.mv-drawer-grip{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:#ddd; }
.mv-drawer-title{ font-weight:700; font-size:16px; color:var(--ink); }
.mv-drawer-head .mv-drawer-close{ width:34px; height:34px; border:none; background:none; font-size:27px; line-height:1; color:#444; cursor:pointer; margin:-4px -6px -4px 0; }
/* Copyright ganz unten im Drawer */
.mv-drawer-copy{ display:block !important; padding:16px 6px 26px; margin-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); text-align:center; }
.mv-drawer-copy a{ color:var(--muted); }
}
/* --- Statische Seiten (Impressum/FAQ/Warum/Datenschutz/Entwickler): auf dem Handy
links/rechts einruecken, damit der Text auf gleicher X-Position wie die App-Liste steht --- */
@media (max-width: 600px){
/* Alle Seiten AUSSER der App-Liste (die #rows enthaelt) bekommen seitlichen Rand,
damit Text/Karten auf gleicher X-Position wie die App-Liste stehen (Jury, Impressum, FAQ ...). */
/* Statische Seiten bekommen 16px Rand. AUSNAHME: die App-Liste (#rows) UND die Award-
Ranking-Liste (.award-ranking-list) -> beide sollen full-bleed sein (Karten auf volle
Breite, Rang ganz links wie Startseite). Der #rows-Ausschluss traegt ID-Spezifitaet,
darum muss die Award-Ausnahme in DIESELBE Regel (ein separater .content-Override wuerde
spezifitaetstechnisch verlieren). Hero (zentriert)/Sortbar (eigenes Padding) bleiben ok. */
.content:not(:has(#rows)):not(:has(.award-ranking-list)){ padding-left:16px !important; padding-right:16px !important; }
/* Stephan 2026-07-12: "756 Apps" (h1) und der Toggle ("Allzeit") linksbuendig mit der
Rang-Spalte der Liste (~16px) -> gewinnt Platz rechts fuer die Sort-Pille.
- h1 hat mobil eigenes padding:0 14px ZUSAETZLICH zur .headline-row (16px) -> raus.
- Sortbar sitzt in der .headline-row (16px) + eigenes 14px-Padding + Pille 12px -> per
Negativ-Margin die Pillen-Breite negieren, damit der "Allzeit"-TEXT bei ~16px startet. */
.headline-row .h1{ padding-left:0 !important; }
.headline-row .sortbar{ padding-left:0 !important; margin-left:-12px !important; }
}
/* Drawer-Elemente nur auf dem Handy (im @media oben sichtbar gemacht) */
.mv-drawer-head, .mv-drawer-copy{ display:none; }
.filter-backdrop{ display:none; }
@media (max-width: 980px){ .filter-backdrop{ display:block; } }
/* --- Querformat / kleines Tablet (601-980px): Topbar-Elemente natuerlich fliessen
lassen statt in volle Zeilen zu stapeln (Portrait-Handy bleibt gestapelt). --- */
@media (min-width: 601px) and (max-width: 980px){
.topbar .award-mini{ flex:0 1 auto !important; }
.topbar .actions{ flex:0 1 auto !important; }
.topbar .search-input-wrapper.search{ flex:1 1 220px !important; }
/* Logo auch im Querformat/Tablet zeigen (style.css blendet .award-logo ab >600px aus) */
.topbar .award-logo{ display:block !important; flex:0 0 auto; }
.topbar .award-logo img{ height:52px; width:auto; }
/* Sparkline auf Tablet/Querformat breiter (Phone <=600px bleibt bei 26x12) */
.row.mobile-restructured > .c-spark .spark{ width:80px !important; height:18px !important; }
}
/* ============================================================
AWARD-SEITEN mobil (Stephan 2026-07-10, Task #36)
Hero verkleinern, Kategorie-Kacheln einspaltig. Die Award-LISTE wird
ueber den generischen .mobile-restructured-Karten-Block oben (mv-mobile.js
reorganisiert .award-ranking-item mit) automatisch zu Karten.
============================================================ */
@media (max-width: 980px){
.award-hero{ padding:16px 12px 6px !important; }
/* Stern mit mehr Abstand zum Titel (sass sonst zu dicht auf "Stimm ab fuer:") */
.award-hero .star{ width:52px !important; height:52px !important; margin-bottom:18px !important; }
.award-hero h1{ font-size:24px !important; line-height:1.15 !important; overflow-wrap:break-word; }
.award-hero .rule{ margin:14px auto !important; }
/* Groessere Abstaende zwischen den Bloecken: Kategorien-Link -> Sortierzeile -> Liste */
.award-all-cats{ display:block; margin:22px 0 16px !important; }
.sortbar.award-sortbar{ margin-bottom:20px !important; }
/* Award-Kategorie-Kacheln: 2-spaltig auf Tablet/Landscape */
.award-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 600px){
/* Portrait-Handy: Kategorie-Kacheln einspaltig */
.award-grid{ grid-template-columns:1fr !important; }
.award-hero h1{ font-size:22px !important; }
}
/* Stephan 2026-07-14: Votecap vertikal MITTIG + rechtsbuendig in der Zeile.
Vorher inline-flex mit vertical-align:baseline -> haengt unten, Kartenrahmen oben zu hoch. */
.row .c-vote{ display:flex; align-items:center; justify-content:flex-end; }
/* Stephan 2026-07-14: Logo 30% groesser (118 -> 153px). */
.logo img{ width:153px; }
/* Stephan 2026-07-14: Logo mobil 10% groesser. Handy (<=600px) 78->86,
Tablet (601-980px, .topbar-Spezifitaet) 52->57. */
@media (max-width:600px){ .award-logo img{ height:104px; } }
@media (min-width:601px) and (max-width:980px){ .topbar .award-logo img{ height:57px; } }
/* Querformat-Handy (flach): Logo groesser (Wunsch Stephan 2026-08-26). max-height:599
trifft nur Handy-Querformat, nicht iPad (dort bleibt 57px). Nach der 57px-Regel -> gewinnt. */
@media (min-width:601px) and (max-width:980px) and (max-height:599px){ .topbar .award-logo img{ height:80px; } }
/* Stephan 2026-07-18: Header-Bedienelemente auf einheitliche Hoehe.
Vorher unterschieden sich Suchfeld (10-14px padding) und Pill-Buttons
(7-8px padding) um bis zu 4px in der Hoehe. */
.topbar .search-input-container,
.topbar .pill-btn,
.topbar #liveModeToggle,
.topbar .avatar,
.topbar #mv-tour-burger-link,
.topbar .mv-tour-burger-link { min-height: 38px !important; box-sizing: border-box !important; }
.topbar .search-input-container { padding-top: 6px !important; padding-bottom: 6px !important; }
@media (max-width: 980px) {
.topbar .search-input-container,
.topbar .pill-btn,
.topbar #liveModeToggle,
.topbar .avatar,
.topbar .mv-tour-burger-link { min-height: 36px !important; }
}
/* 2026-08-26 (Stephan): Footer-Links im Burger-Drawer auch bei Querformat-Handys.
mv-tour.css blendet .sidebar-mobile-footer nur bei max-width:720px ein, iPhone-
Querformat ist aber 734-956px -> Footer-Links fehlten im Burger. Hier fuer die
ganze Handy-/Drawer-Ansicht (<=980) zeigen. WICHTIG: steht VOR dem Tablet-Block,
damit dessen .sidebar-mobile-footer{display:none !important} (echter Footer da)
im iPad-Fall per Quellreihenfolge gewinnt. */
/* 2026-09-07: Basis-Regel aus mv-tour.css hierher geholt. Commit 3d5338a hat die
Tour-CSS auf Nachladen-bei-Bedarf umgestellt (Perf) -- damit fiel auch
".sidebar-mobile-footer{display:none}" weg, das dort seit jeher als Basis stand.
Folge: Der Burger-Footer stand auf JEDER Desktop-Seite unter den Filtern, also
ein zweiter Footer (von Stephan gemeldet). Eine Layout-Regel fuer ein immer
gerendertes Element gehoert nicht in eine bedarfsweise geladene Tour-Datei.
Bewusst OHNE !important: die beiden Media-Query-Regeln darunter tragen
!important und gewinnen dadurch unabhaengig von der Quellreihenfolge. */
.sidebar-mobile-footer{ display:none; }
@media (max-width:980px){ .sidebar-mobile-footer{ display:block !important; } }
/* Burger-Footer-Links (Hoch- UND Querformat) wie der Desktop-Footer — inline, kleiner
(13px), mit |-Trennern. mv-tour.css stylt sie nur <=720 (dort gestapelt/gross) und gar
nicht im Querformat; hier fuer die ganze Handy-/Drawer-Ansicht (<=980) vereinheitlicht.
Wunsch Stephan 2026-08-26 (Portrait jetzt auch inline mit Trennern). */
@media (max-width:980px){
.sidebar-mobile-footer{ font-size:13px !important; line-height:1.7 !important; padding:14px 6px 20px !important; }
.sidebar-mobile-footer a{ display:inline !important; padding:0 !important; font-size:13px !important; color:var(--muted); }
/* Trenner NACHGESTELLT (::after) statt vorangestellt: so bleibt bei Umbruch der
ZeilenANFANG sauber (kein haengendes | links). Letzter Link ohne Trenner. */
.sidebar-mobile-footer a:not(:last-child)::after{ content:"|"; color:#d4d0c6; margin:0 7px; }
}
/* 2026-08-25 (Stephan): iPad-Hochkant / Tablet — Filter-Sidebar bleibt
FEST sichtbar (statt Off-Canvas-Burger). Die breiten Desktop-Spalten passen hier
nicht lesbar rein (App-Name kollabiert < ~1050px), die kompakten gestapelten
Mobil-Karten dagegen schon. Ergebnis: iPad hochkant = Filter-Sidebar links +
lesbare Liste rechts + voller Footer unten, ohne Burger-Umweg.
2026-08-26: min-height:600 ergaenzt — dieser Block LOCKT die Hoehe (100svh +
overflow:hidden) und funktioniert nur auf HOHEN Viewports (iPad). Damit greift
er NICHT auf flachen Querformat-Handys (innerH ~276): dort waere die Liste
praktisch unsichtbar (Topbar allein ~244px). Querformat-Handy bleibt bewusst
beim normalen Handy-Layout (Burger + Filter-Sheet), Wunsch Stephan 2026-08-26 —
die 248px-Sidebar frisst quer zu viel Breite. min-width:740 haelt zusaetzlich
grosse iPhones quer (innerW ~800) draussen; iPad mini 6 (744 hochkant) bleibt drin. */
@media (min-width:740px) and (max-width:980px) and (min-height:600px){
.shell{ grid-template-columns:248px 1fr !important; height:100vh !important; height:100svh !important; overflow:hidden !important; }
/* ⚠️ border-left WIEDERHERSTELLEN. style.css nimmt die Trennlinie unterhalb
von 980px weg, weil die Sidebar dort normalerweise nach oben rueckt und der
senkrechte Strich nichts mehr trennt (Stephan, 06.10.). GENAU HIER ist das
anders: Dieser Block holt das zweispaltige Layout zurueck -- iPad hochkant,
Sidebar steht wieder links. Ohne diese Zeile fehlt die Trennung zwischen
Sidebar und Inhalt (von Stephan am 06.10. am iPad gemeldet).
Wer die Regel in style.css anfasst, muss diese hier mitdenken. */
.main{ height:100vh !important; height:100svh !important; overflow:hidden !important;
border-left:1px solid var(--line) !important; }
/* Scroll-Container wie Desktop wiederherstellen (Mobil-Modus hatte ihn auf
overflow:visible -> ohne das kein Scrollen + Footer weg). */
.scroll{ flex:1 !important; min-height:0 !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; }
.sidebar{ display:block !important; position:static !important; transform:none !important;
width:auto !important; left:auto !important; right:auto !important; top:auto !important;
height:100vh !important; height:100svh !important; max-height:none !important; z-index:auto !important;
box-shadow:none !important; overflow-y:auto !important; }
.sidebar .logo{ display:block !important; } /* grosses Logo oben ueber der Sidebar (wie Desktop) */
.mv-sidebar-ad-label, .ad-slot-filters{ display:block !important; } /* Sidebar-Werbung wie Desktop */
.filter-backdrop{ display:none !important; }
.mv-drawer-head{ display:none !important; }
#showMenuBtnContainer, #showMenuBtn, .topbar .actions #showMenuBtn{ display:none !important; } /* Burger weg — Sidebar ist ja fest da (hoehere Spezifitaet als die Mobil-Show-Regel) */
/* Footer unten, aber umbrechend — sonst wird die Link-Zeile bei ~970px
abgeschnitten (nach "Kontakt"). Copyright + Links stapeln, Links wrappen. */
.foot{ display:flex !important; flex-direction:column !important; align-items:flex-start !important;
white-space:normal !important; height:auto !important; min-height:0 !important; gap:6px !important; padding:12px 28px !important; }
.foot-links{ display:flex !important; flex-wrap:wrap !important; white-space:normal !important; }
/* Copyright steht in dieser Ansicht bereits unten in der Sidebar (.mv-drawer-copy,
von mv-mobile.js immer aus dem Footer geklont) -> im Footer ausblenden, damit
die Link-Zeile allein laeuft (bei >=880px einzeilig). */
.foot .foot-copy{ display:none !important; }
.sidebar-mobile-footer{ display:none !important; }
}