/* meineWunschbox.com — v2.33 — 04.10.2026
Zum Pruefen, ob ein Geraet den aktuellen Stand hat: diese Datei
direkt aufrufen, z.B.
https://meinewunschbox.com/css/mobile-fix.css
Die Version oben muss zu der in /VERSION.txt passen. */
/* ============================================================
mobile-fix.css — Handy-Optimierung fuer meineWunschbox.com
Erstellt: 2026-10-02
LADEN: als LETZTES Stylesheet, nach style-mobile.css.
ENTFERNEN: die eine -Zeile in templates/index.tpl loeschen
und templates_c/ leeren.
AUFBAU DIESER DATEI:
Teil A — echte Fehler, gelten auf allen Geraeten
(404-Bilder, ausgegrauter Text, ungueltiges CSS)
Teil B — Umbau fuers Handy, gilt NUR bis 767px Breite
(Tabellen werden Karten, Menue, Tippflaechen)
Das Desktop-LAYOUT bleibt unveraendert; dort werden nur die
Fehler aus Teil A korrigiert.
============================================================ */
/* ============================================================
TEIL A — Fehlerkorrekturen (alle Bildschirmbreiten)
============================================================ */
/* A1. Falsche Bildpfade.
style-mobile.css zeigt auf /grid_16_test/... — diesen Ordner gibt
es nicht, beide Bilder liefern 404. Sie liegen unter
/images/layout/icons/. */
.edit {
background-image: url("../images/layout/icons/pen.png");
}
.star-rating {
background-image: url("../images/layout/icons/starrating.png");
}
/* A2. justify-content: baseline ist kein gueltiger Wert, der Browser
verwirft die Zeile ersatzlos. Gemeint war vermutlich flex-start. */
.steps .content {
justify-content: flex-start;
}
/* A3. Kein Bild darf breiter werden als sein Kasten. Diese Regel
kann nichts schmaler machen, nur Ueberlauf verhindern. */
img {
max-width: 100%;
height: auto;
}
/* A4. Lesbarkeit — gilt auf ALLEN Geraeten.
style-mobile.css setzt .maincontent { opacity: 0.7 }. opacity
wirkt auf das ganze Element samt Text, der Inhalt ist also
ueberall zu 30% ausgegraut — auch auf dem Desktop.
Die Absicht war erkennbar, das Hintergrundbild durchscheinen zu
lassen. Das geht ohne den Text zu schwaechen: volle Deckkraft
fuer das Element, Transparenz nur in der Hintergrundfarbe. */
.maincontent {
opacity: 1;
}
.contenttext {
background-color: rgba(224, 255, 255, 0.78); /* war #e0ffff */
}
.myList,
.steps .content {
background-color: rgba(224, 255, 255, 0.82);
}
/* A5. Hier stand bis 02.10.2026 eine Regel, die Eingabefelder auf
allen Geraeten auf 16px gesetzt hat. Das war zu weit gegriffen:
Der Grund fuer 16px ist, dass iOS Safari bei kleinerer Schrift
beim Antippen automatisch hineinzoomt - das betrifft nur Handys.
Auf dem Desktop wurde dadurch die Schrift in allen Eingabefeldern
groesser, ohne dass es einen Nutzen gehabt haette.
Die Regel steht jetzt nur noch im Handy-Teil weiter unten. */
/* ============================================================
TEIL B — Handy (bis 767px). Desktop bleibt unberuehrt.
============================================================ */
@media (max-width: 767px) {
/* --- B1. Grundlage ---
Ohne border-box rechnen Padding und Rahmen auf die Breite
drauf, dadurch sprengen 100%-breite Elemente ihren Container. */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
max-width: 100%;
}
/* --- B2. Logo ---
Vorher greifen auf dem Handy alle vier max-width-Regeln aus
style-mobile.css gleichzeitig, die letzte gewinnt mit
width:27em (~432px) auf einem 390px-Display. */
.logo img {
width: auto;
max-width: 100%;
max-height: 90px;
}
/* --- B3. Lesbarkeit ---
.maincontent { opacity: 0.7 } graut den gesamten Inhalt aus,
inklusive Text. Volle Deckkraft, dafuer eine helle Flaeche
hinter dem Text. */
.maincontent {
background-color: rgba(255, 255, 255, 0.92);
border-radius: 6px;
padding: 12px;
}
/* ENTSCHEIDUNG, die du treffen musst:
Diese Zeile blendet das vom Nutzer gewaehlte Wunschbox-
Hintergrundbild auf dem Handy aus. Begruendung: hinter Text
auf kleinem Schirm kostet es Kontrast und Ladezeit.
Es ist aber ein Feature deiner Seite — wenn du es behalten
willst, loesche die naechsten drei Zeilen. */
.main {
background-image: none !important;
}
/* --- B4. Eingabefelder ---
Unter 16px zoomt iOS Safari beim Antippen automatisch rein.
Feste Pixelbreiten (300px, 250px) waren breiter als manche
Displays. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
font-size: 16px; /* darunter zoomt iOS Safari beim Antippen */
line-height: normal; /* ueberschreibt line-height: 12px */
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 8px 10px;
}
.inputbox,
.editbox,
.myList input[type="text"],
.register select,
.myprofile select {
width: 100%;
max-width: 100%;
}
/* Buttons.
WICHTIG: Das Aussehen wird hier NICHT mehr angefasst.
Browser rendern nativ - auf dem iPhone rund
mit blauer Schrift. Sobald man border-radius, background-color
oder appearance setzt, faellt diese native Darstellung weg und
der Button wird eckig und grau. Genau das ist in v2.07 und v2.08
passiert. Deshalb bleibt hier nur noch, was fuer die Bedienung
noetig ist: Schriftgroesse gegen den iOS-Zoom und genug Flaeche
zum Antippen. Farbe, Form und Rahmen macht der Browser. */
input[type="submit"],
button,
.submit2,
.wishSubmit {
font-size: 16px;
padding: 11px 22px;
width: auto;
max-width: 100%;
}
/* style-mobile.css setzt fuer diese beiden Faelle padding-left: 0
(Spezifitaet 0-2-0) und drueckt die Beschriftung damit an den
linken Rand - DAS war der nicht mittige Text, nicht die Hoehe.
Mit gleichem Selektoraufbau zurueckgeholt. */
.myBoxEntryBox .submit2,
.myMailsEntryBox .submit2 {
padding-left: 22px;
}
/* Checkbox mit vergroesserter Trefferflaeche.
22px sichtbar, 44px antippbar. */
input[type="checkbox"],
input[type="radio"] {
width: 22px;
height: 22px;
min-height: 0;
margin: 11px;
vertical-align: middle;
}
/* --- B5. Hauptmenue ---
Vorher padding 10px 30px, kein Umbruchverhalten, keine
Media Query. Jetzt zwei Spalten mit 44px Tipphoehe. */
/* Hauptmenue als Reihe mit Symbol ueber der Beschriftung.
Vorher: zwei Spalten mit Symbol daneben - funktionierte, war aber
unruhig, weil die Eintraege unterschiedlich breit sind. */
.topmenu {
padding: 4px 2px;
}
/* Raster statt Flexbox: bei Flexbox zieht sich ein umbrechender
letzter Eintrag ueber die ganze Breite. auto-fit passt sich der
Anzahl der Eintraege an - vier (ein- oder ausgeloggt) ergeben
vier gleiche Spalten, mehr brechen sauber in eine zweite Reihe
gleicher Breite um. */
.topmenu ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
margin: 0;
padding: 0;
/* .topmenu traegt die Klasse gbox, und swapgrid1.css macht daraus
einen Flex-Container. Die Liste ist damit ein Flex-Element und
schrumpft ohne diese zwei Zeilen auf Inhaltsbreite - 75px statt
378px. Genau daran ist die vorige Menuefassung gescheitert:
die Eintraege standen untereinander statt nebeneinander. */
flex: 1 1 100%;
width: 100%;
}
.topmenu li {
display: flex;
flex-direction: column; /* Symbol oben, Text darunter */
align-items: center;
justify-content: flex-start;
gap: 3px;
margin: 0;
padding: 8px 2px;
min-width: 0;
}
.topmenu .menuIcon {
display: block;
margin: 0;
line-height: 1;
}
.topmenu .menuIcon img {
width: 24px;
height: 24px;
display: block;
}
.topmenu li a {
display: block;
min-height: 0;
padding: 0;
font-size: 12px;
line-height: 1.25;
text-align: center;
word-break: break-word;
}
/* Trennlinien zwischen den Eintraegen statt Raender aussen */
.topmenu li + li {
border-left: 1px solid rgba(0, 255, 255, 0.55);
}
/* Ab 5 Eintraegen bricht die Reihe um - dann sollen die Zeilen
optisch getrennt sein. */
.topmenu li:nth-child(n + 5) {
border-top: 1px solid rgba(0, 255, 255, 0.55);
}
/* --- B6. Wunschliste: Tabelle wird zur Karte ---
mybox.tpl und wishbox.tpl bauen die Liste als
mit
20% / 60% / 20%. Tabellen brechen nicht um — dadurch lief das
Dokument auf 636px Breite bei 390px Viewport. */
.myList,
.wishlist,
.mymails,
.giftMailList {
display: block;
width: 100%;
}
.myList thead, .wishlist thead,
.myList th, .wishlist th {
display: none; /* Spaltenkoepfe ohne Spalten */
}
.myList tbody, .wishlist tbody, .mymails tbody {
display: block;
width: 100%;
}
.myList tr, .wishlist tr, .mymails tr {
display: block;
width: 100%;
margin: 0 0 14px 0;
padding: 12px;
border: 2px dotted #ffaa00;
border-radius: 6px;
background-color: #ffffff;
}
.myList td, .wishlist td, .mymails td {
display: block;
width: 100% !important; /* schlaegt inline style="width: 20%" */
padding: 4px 0;
text-align: left;
}
/* Das Geschenk-Icon war position:absolute ohne positionierten
Vorfahren und ist dadurch aus der Zelle gewandert. */
.myList td img,
.wishlist td img {
position: static;
float: none;
width: 48px;
height: auto;
margin: 0 0 6px 0;
}
/* Lange Wunschnamen und Links brechen um, statt die Seite
breiter zu machen. */
.wishDescription .text,
.listBox .name,
.edit .text,
.wishDescription span {
display: block;
overflow-wrap: anywhere;
word-break: break-word;
}
.edit {
margin-right: 24px;
background-size: 14px auto;
}
.editBox {
width: auto;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dotted #ffaa00;
}
/* --- B7. Seitenspalten stapeln ---
Links und rechts fehlt im Grid die -s-Klasse. */
.main > .left,
.main > .right {
width: 100%;
margin-left: 0;
margin-right: 0;
float: none;
}
.main, .topmenu {
margin-left: 6px;
margin-right: 6px;
}
/* --- Seitenleiste (im Desktop rechts, auf dem Handy unten) ---
Beim Stapeln stand sie als nackte Liste unter dem Inhalt, ohne
Abgrenzung und ohne Bezug zum Rest. Jetzt eine Karte im gleichen
Stil wie Wunschliste und Schritte: oranger Rahmen, heller Grund,
Eintraege als antippbare Zeilen mit Trennlinien. */
/* style-mobile.css setzt .maincontent { min-height: 500px }. Auf dem
Desktop haelt das den Fussbereich unten; auf dem Handy entsteht
dadurch eine leere Flaeche von einem halben Bildschirm zwischen
Inhalt und Seitenleiste. */
.maincontent {
min-height: 0;
}
.main > .right {
margin-top: 22px;
}
.usermenu {
border: 3px solid #ffaa00;
border-radius: 6px;
background-color: #ffffff;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Die zwischen den Punkten erzeugen beim Stapeln nur Leerzeilen. */
.usermenu > br {
display: none;
}
.usermenu li {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 9px 12px;
min-height: 44px;
border-bottom: 1px dotted #ffaa00;
}
.usermenu li:last-child {
border-bottom: 0;
}
/* Erster Eintrag ist die Begruessung - als Kopfzeile absetzen. */
.usermenu li:first-child {
background-color: #e0ffff;
font-weight: bold;
border-bottom: 2px solid #ffaa00;
}
.usermenu li a {
display: block;
flex: 1 1 auto;
min-height: 0;
line-height: 1.3;
font-size: 15px;
}
/* Das Icon schwimmt im Desktop-CSS nach links; im Flex-Kontext
stoert das nur. */
.usermenu .smallmenuIcon {
display: flex;
flex: 0 0 auto;
}
.usermenu .smallmenuIcon img {
float: none;
margin: 0;
width: 22px;
height: 22px;
}
/* Auswahllisten (Layout, Boxmodus) fuellen ihre Zeile. */
.usermenu form {
flex: 1 1 auto;
margin: 0;
}
.usermenu select {
width: 100%;
}
/* Der dekorative Teaser der linken Spalte landet beim Stapeln
ueber dem eigentlichen Inhalt. Klein halten, damit er den
Text nicht nach unten schiebt. */
.left .teaser img {
max-width: 160px;
margin: 0 auto;
}
/* --- B8. Einzelne zu breite Elemente --- */
.grid_8.teaser img {
width: 100%;
max-width: 100%;
}
#boxCheck .fail, #boxCheck .success,
#mailCheck .fail, #mailCheck .success {
width: auto;
max-width: 100%;
}
.steps .content {
flex-wrap: wrap;
}
.steps .text {
flex: 1 1 200px;
min-width: 0;
}
/* --- B9. Schriftgroessen, die zu klein waren --- */
.smallHint { font-size: 12px; }
.survey .text { font-size: 14px; }
.shareButtons a { font-size: 14px; }
.wishlist th,
.mybox th { font-size: 15px; }
.imprint { font-size: 14px; line-height: 1.8; }
.footernav a { font-size: 15px; }
/* Fussnavigation antippbar machen */
.footernav a {
display: inline-block;
padding: 12px 8px;
}
/* --- B10. Teilen-Buttons --- */
.shareButtons {
display: flex;
flex-wrap: wrap;
gap: 8px;
line-height: normal;
}
.shareButtons a {
display: flex;
align-items: center;
min-height: 44px;
margin-left: 0;
padding: 8px 12px;
}
/* --- B11. Admintabellen bekommen einen Scrollrahmen ---
Die baue ich nicht um; lieber ein scrollbarer Kasten als
eine Seite, die seitlich wackelt. */
.adminPanel {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
} /* Ende @media max-width: 767px */
/* ====================================================================
C. BESCHRIFTUNGEN UEBER DEN FELDERN — 04.10.2026
Gilt fuer ALLE Breiten, nicht nur fuer Handys.
WOFUER
Im ganzen Projekt stand die Beschriftung bisher HINTER dem Feld:
Am Schreibtisch sah das aus wie "[Feld] Vorname" und ging gerade so
durch. Am Handy sind die Felder 100 % breit (Abschnitt B4 weiter
oben), also rutscht die Beschriftung UNTER ihr Feld - und damit
direkt ueber das naechste. Jeder liest sie dann als Beschriftung des
FOLGENDEN Feldes. Im Registrierformular stand das erste Feld ganz
ohne Beschriftung da und darunter "Wunschboxname", was in Wahrheit
zum Feld darueber gehoerte.
Nachgesehen im Browser bei 390 px, nicht geschaetzt.
WAS JETZT GILT
Die Beschriftung steht als eigene Zeile UEBER ihrem Feld - auf jeder
Breite gleich. Das ist die Reihenfolge, die alle kennen, und sie
bleibt sichtbar, waehrend man tippt.
Nicht betroffen sind Beschriftungen von Ankreuzfeldern und
Auswahlknoepfen: dort gehoert der Text neben das Kaestchen.
==================================================================== */
form label,
.myBoxEntryBox label,
.myMailsEntryBox label,
.register label,
.myprofile label {
display: block;
margin: 14px 0 4px;
font-weight: normal;
line-height: 1.3;
cursor: pointer;
}
/* Das erste Feld soll nicht unnoetig weit unten anfangen. */
form label:first-child {
margin-top: 0;
}
/* Ankreuzfelder und Auswahlknoepfe behalten ihre Beschriftung daneben. */
form label.inline,
form input[type="checkbox"] + label,
form input[type="radio"] + label {
display: inline;
margin: 0 0 0 6px;
cursor: pointer;
}
/* ====================================================================
D. DIE SPAMFALLE MUSS UNSICHTBAR SEIN — 04.10.2026
Im Registrierformular steht ein Feld name="country" mit der Klasse
.special_move. Es ist eine Falle: Spambots fuellen jedes Feld aus,
Menschen sehen es nicht - und wer es ausfuellt, landet in
users_botchecks statt in users.
Nur: style-mobile.css gibt ihm lediglich "height: 1px". Das war am
Schreibtisch ein duenner Strich (am 04.10. im Browser gemessen:
185 x 6 Pixel, anklickbar) und am Handy ein ganz normales,
leeres Eingabefeld:
390 px Breite -> .special_move = 312 x 44 Pixel
Denn Abschnitt B4 weiter oben setzt fuer alle Textfelder
width: 100 % und min-height: 44 px - und das schlaegt die 1 Pixel.
Wer dieses Feld also am Handy ausfuellt - und es sieht aus wie ein
Pflichtfeld ohne Beschriftung -, dessen Registrierung kommt nie an.
Ohne Fehlermeldung.
Deshalb hier, bewusst mit !important, weil es die B4-Regeln
ueberstimmen muss: aus dem Sichtfeld schieben statt display:none.
Viele Bots ueberspringen display:none-Felder, und dann faengt die
Falle nichts mehr.
==================================================================== */
.special_move {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
max-width: 1px !important;
height: 1px !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
overflow: hidden;
}
/* ====================================================================
E. WINTERHINTERGRUND — 04.10.2026
Diese Werte standen bis heute als style="" direkt im
in
index.tpl, mit "background-color: #C0E1FF !important". Ein
!important IM TAG schlaegt jedes Stylesheet, auch eines mit
!important - damit liess sich der Winterhintergrund aus keiner
Design-Variante heraus abschalten.
Hier stehen dieselben Werte noch einmal, sichtbar unveraendert.
Eingeschaltet wird er wie bisher ueber $pageconfig.seasonTheme.
==================================================================== */
.seasonSnow {
background-color: #C0E1FF;
background-image: url('/images/layout/snow/snow1.png'),
url('/images/layout/snow/snow2.png'),
url('/images/layout/snow/snow3.png');
-webkit-animation: schnee 25s linear infinite;
-moz-animation: schnee 25s linear infinite;
animation: schnee 25s linear infinite;
}
/* Wer das nicht mag, egal in welcher Variante: der Browser richtet
sich danach, wenn im System "Bewegung reduzieren" gesetzt ist. */
@media (prefers-reduced-motion: reduce) {
.seasonSnow {
animation: none;
}
}
/* ====================================================================
F. BESCHRIFTUNG IM FELD — 04.10.2026
Gewuenscht: die Beschriftung soll IM Feld stehen, nicht darueber.
Nur mit placeholder="" zu arbeiten hat einen bekannten Haken: der
Text verschwindet beim ersten Zeichen. Wer dann unterbrochen wird
und spaeter zurueckkommt, sieht acht ausgefuellte Felder und weiss
bei keinem mehr, was darin stehen sollte - und muss es leeren, um
nachzusehen.
Deshalb hier die Fassung, die beides kann: solange das Feld LEER
ist, steht die Beschriftung mittig darin - genau das gewuenschte
Bild. Sobald getippt wird (oder das Feld den Fokus hat), rutscht sie
klein nach oben auf den Rahmen und bleibt sichtbar.
Ohne CSS bleibt es eine ganz normale Beschriftung neben dem Feld,
ohne JavaScript geht es ohnehin.
TECHNIK
Der Trick ist placeholder=" " (ein Leerzeichen) an jedem Feld.
Damit greift :placeholder-shown genau dann, wenn das Feld leer ist -
anders laesst sich "leer" in CSS nicht abfragen. Die Beschriftung
steht im Quelltext NACH dem Feld, damit der +-Selektor sie findet;
fuer Vorleseprogramme zaehlt das for="..." , nicht die Reihenfolge.
Auswahlfelder (