/* ==========================================================================
responsive.css - Grundlage der Handy-Optimierung, angelegt 2026-07-25
==========================================================================
Wird in index.php als LETZTE Template-Datei geladen. Ihre Regeln
ueberschreiben daher position.css, layout.css, general.css und das
aktive Farbschema nature.css.
Warum eine eigene Datei: layout.css, position.css und general.css
enthalten zusammen keine einzige Media Query. Die vorhandenen stecken
in den Farbschemata und in vm-ltr-site.css. Bestehende Regeln umzubauen
waere riskant und schwer nachvollziehbar - ergaenzen ist sauberer.
Alle Werte unten sind im Browser gemessen (Chrome DevTools, 390x844,
Geraetefaktor 3), nicht geschaetzt.
========================================================================== */
/* --------------------------------------------------------------------------
Aus dem Markup hierher verschoben
--------------------------------------------------------------------------
In index.php standen feste Pixelhoehen als style="..." direkt im HTML.
Inline-Stile schlagen jede Media Query - sie waren das eigentliche
Hindernis fuer eine anpassbare Darstellung. Von den vier Hoehen wurden
drei an Elementen gesetzt, die gar nicht gerendert werden (#line und
#fontsize erscheinen nur bei aktiver Schriftgroessen-Wahl oder einem
Modul in position-0 - beides ist nicht der Fall).
-------------------------------------------------------------------------- */
#header {
height: 60px;
}
/* --------------------------------------------------------------------------
Sicherheitsnetz: nichts darf breiter werden als das Geraet
-------------------------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
Lauftext ueberlagert den Menuepunkt "Event" - betrifft nur PC/breite
Fenster, deshalb ausserhalb der Media Query
--------------------------------------------------------------------------
Ursache ist KEIN Float-Problem (erster Versuch mit Clearfix hat nicht
gewirkt) - "ul.menu" innerhalb von "#menuwrapper" ist "position:absolute;
top:0; left:0" (hide.js/nature.css, fuer die Handy-Aufklapplogik gedacht).
Absolut positionierte Elemente tragen NICHTS zur Hoehe ihres Elters bei,
"#menuwrapper" bleibt deshalb 0px hoch, und der danach folgende Lauftext
".headlineMarquee" (layout.css: margin-left:40%) beginnt an derselben
Y-Position wie das Menu, statt darunter. Gemessen bei 800px: "Event"
bei left 401-474/top 0-49, das gesamte "ul.menu" bei left 0-774 (Box-
Breite, nicht Inhaltsbreite - die 5 Menuepunkte fuellen nur ca. 474px).
Robuste Lösung waere JS-Messung der tatsaechlichen Menu-Breite; hier
pragmatisch ein fester Wert etwas ueber den gemessenen 474px - bei
Aenderungen an der Menuepunkt-Anzahl/-Laenge nachmessen und anpassen. */
.headlineMarquee {
margin-left: 500px;
}
/* --------------------------------------------------------------------------
"Kontakt"-Button: Text unsichtbar (PC und Handy)
--------------------------------------------------------------------------
Der Link steckt direkt im Modul-Inhalt mit einem Tippfehler:
style="color: ffffff" - ohne "#" ist das kein gueltiger Farbwert, der
Browser ignoriert die ganze Angabe und faellt auf die dunkle Linkfarbe
(#272d34) zurueck, die auf dem ebenfalls dunklen Knopf unsichtbar ist.
Nicht im Template behebbar (Inhalt, keine Vorlage) - deshalb hier per
CSS auf die schon verwendete helle Schriftfarbe gesetzt. */
#nav .button a {
color: #f7f5d4 !important;
}
/* --------------------------------------------------------------------------
ExtraWatch-Link: ueberall aus, nicht nur auf dem Handy
--------------------------------------------------------------------------
Tracking soll laut User weiterlaufen (Auswertung im Backend), nur die
sichtbare Verlinkung zu extrawatch.com soll verschwinden - auf JEDER
Bildschirmbreite, deshalb bewusst ausserhalb der Media Query. */
img[alt="Real time web analytics, Heat map tracking"],
a[href="http://www.extrawatch.com"] {
display: none;
}
/* --------------------------------------------------------------------------
Kategorie-Leiste (#pvmc-wrap/#pvmc-menu) ueberlagert nachfolgenden Inhalt,
wenn sie umbricht - betrifft PC UND Handy, deshalb ausserhalb der Media
Query
--------------------------------------------------------------------------
Fremdmodul mod_phoca_vm_category ist ein Flex-Menu mit "flex-wrap:wrap",
aber fest auf "height:43px" gesetzt - passend fuer GENAU EINE Zeile.
Sobald die Kategorienamen in mehr als eine Zeile umbrechen (auf dem Handy
schon bei wenigen Eintraegen, am PC gemessen bei 1280px Fensterbreite und
der vollen Kategorienliste: 5 statt 1 Zeile), bleibt die Box trotzdem
43px hoch (overflow:visible) - die zusaetzlichen Zeilen haengen sichtbar
ueber der "Zurueck zur Kategorie"-Zeile und der Artikelueberschrift der
Produktdetailseite, statt sie nach unten zu verdraengen. Urspruenglich nur
fuer das Handy behoben (Fund auf /home/100/100), User meldete den PC-Fall
am 2026-07-28 auf der Produktdetailseite.
!important noetig: das Modul registriert seine eigene style.css erst beim
Rendern der Modulposition, dadurch landet sie im HINTER
responsive.css, obwohl responsive.css als letzte Template-Datei
eingebunden wird - bei gleicher Spezifitaet (beides ID-Selektoren) gewinnt
sonst die spaeter geladene Modul-Regel. */
#pvmc-wrap,
#pvmc-menu {
height: auto !important;
}
/* --------------------------------------------------------------------------
Shopname-Text und Icon-Leiste: nur auf dem Handy sichtbar
--------------------------------------------------------------------------
Beide sind PHP/HTML-seitig immer vorhanden (fuer Suchmaschinen bzw. weil
die Icon-Leiste sonst gar nicht existieren wuerde), sollen aber laut User
nur auf dem Handy ANGEZEIGT werden - am PC sass der Shopname-Text sonst
ungestylt ueber dem Kopfbild, und die Icon-Leiste hatte keine Desktop-
Gestaltung. Standardmaessig ausgeblendet, in der Media Query weiter unten
wieder eingeschaltet. */
.logoheader .header1,
.icon-toolbar {
display: none !important;
}
/* --------------------------------------------------------------------------
Klickflaeche der Auf-/Zuklapp-Ueberschriften (Warenkorb, Aktion, ...)
--------------------------------------------------------------------------
Betrifft PC UND Handy gleichermassen, deshalb bewusst AUSSERHALB der
Media Query. layout.css (Zeile 962-966) positioniert den eigentlichen
Link "a.opencloselink" nur mit right:0/top:0 - er deckt deshalb nur das
kleine Plus/Minus-Symbol ab, nicht die ganze dunkle Balkenflaeche.
Der Text "Warenkorb"/"Aktion" selbst steht als reiner Text direkt in der
und hat gar keinen Klick-Handler - nur ein Antippen des kleinen
Symbols oeffnet das Modul. left:0/bottom:0 ergaenzt (h3 hat bereits
position:relative aus layout.css), das Symbol bleibt per Flexbox rechts
verankert, sieht optisch also unveraendert aus. */
h3.js_heading a.opencloselink {
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Handy und schmale Fenster
-------------------------------------------------------------------------- */
/* 2026-07-26 spaetabends: Schwelle von 900px auf 640px gesenkt. Bei 900px
griff das Handy-Layout (Shopname/Icon-Leiste/Menue-Reihenfolge/versteckter
ExtraWatch-Link etc.) auch in einem normalen, nicht maximierten PC-
Browserfenster - vom User am Desktop beobachtet. 640px liegt sicher ueber
allen getesteten Handy-Breiten (390px) und sicher unter ueblichen Desktop-
Fensterbreiten. */
@media screen and (max-width: 640px) {
/* WICHTIGSTE REGEL.
#header ist position:fixed und liegt ueber dem Inhalt - #all, #back
und #contentarea beginnen alle bei 0, es gibt keinen Ausgleich. Auf
dem Desktop faellt das nicht auf: der Kopf ist 60px hoch und
durchsichtig. Auf einem 390px-Bildschirm wird daraus ein 370px hoher
Deckel, der die halbe Seite verdeckt (gemessen).
!important ist hier leider noetig: nature.css setzt
#header { position: fixed !important; }
Genau daran scheitert auch die HANDY-REGEL IN NATURE.CSS SELBST -
dort steht zwei Bloecke weiter unten
@media only screen and (max-width: 480px) { #header { position: relative; } }
ohne !important, und sie hat deshalb noch nie gewirkt. Der Versuch,
dieses Template handytauglich zu machen, ist an einer einzigen Zeile
gescheitert. Sauberer waere, das !important in nature.css zu
entfernen - das aendert aber auch die Desktop-Ansicht und gehoert
geprueft, nicht nebenbei erledigt. */
#header {
position: static !important;
height: auto !important;
min-height: 0;
}
/* nature.css setzt fuer den Handy-Breakpoint "#header{padding-top:3em}"
(siehe eigener Block dort) - das war Luft ueber dem Menuepunkt, als
dieser noch das erste sichtbare Element war. Jetzt steht der Shopname
zuerst, der Abstand ist nur noch ungenutzte Leerflaeche. */
#header {
padding-top: 0;
}
/* #mobile_select h2 hat "margin-top:-17px" (nature.css) - zog den Button
frueher unauffaellig nach oben, weil ueber ihm nur der leere Abstand
von eben stand. Jetzt steht die Bildwerbung darueber, und der negative
Abstand zieht den Button 17px in das Bild hinein. */
#mobile_select h2 {
margin-top: 0;
}
/* Das aufgeklappte Menue nutzt am Desktop bereits unsere Farben (nature.css
Zeile 182-201: Text/Rahmen #272d34, bei :hover Hintergrund #272d34 mit
cremefarbenem Text #f7f5d4). Der eigene Handy-Block in nature.css
(Zeile 502-513) ueberschreibt das aber auf neutrales Hellgrau/Weiss
(#fff, #eee, #444, #ccc) - passt nicht zum uebrigen dunklen Kopfbereich.
Hier die bereits etablierten Farben zurückgeholt statt neue erfunden. */
#menuwrapper {
background: #272d34;
}
#header ul.menu li a:link,
#header ul.menu li a:visited {
background: #272d34;
color: #f7f5d4;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu li a:focus {
background: #f7f5d4;
color: #272d34;
}
/* Lauftext darf auf dem Handy links anfangen - die Navigation ist
ohnehin hinter dem Menue-Button versteckt, das margin-left:40% aus
layout.css (fuer die PC-Navigation gedacht) wird nicht gebraucht. */
.headlineMarquee {
margin-left: 0;
width: 100%;
}
/* Grüner Verlauf (#004746 -> #f6f1e5) ist die Farbe des unbenutzten
"nature"-Farbschemas von Beez3, nicht die Schop-Farben. #272d34 ist
KEINE neue Farbe - dasselbe Dunkelanthrazit tragen schon die Buttons
"Suche" und "Anmelden" (nature.css, Zeile ~218), hier nur konsequent
auch fuer Kopfbereich, Namensbox und Menu-Button verwendet. */
#header {
background: #272d34;
}
.logoheader {
background: #272d34;
}
#mobile_select h2 {
background: #272d34;
text-align: center;
}
/* Echter Fehler in nature.css (Zeile 139-142): eine Aufzaehlung von
:hover/:active/:focus-Regeln fuer Buttons vergisst ausgerechnet bei
"#mobile_select h2 a" das ":hover" - der Button zeigt deshalb DAUERHAFT
die Maus-ueber-Farbe (hsl(165,27%,27%), ein Gruenton) statt der
normalen Button-Farbe #272d34 aus Zeile 215-225. Hier zurueckgesetzt,
nature.css selbst bewusst nicht angefasst (Desktop-Wirkung ungeprueft). */
#mobile_select h2 a {
background-color: #272d34;
background-image: none;
border-color: #272d34;
}
/* Feste Breiten, die groesser sind als das Geraet: gemessen 445px
(.logoheader), 425px (#logo) und 415px (.header1) bei 390px Schirm.
Der negative Aussenabstand stammt aus nature.css
(margin: -15px 100px 0 auto). Bewusst nur max-width statt width:auto -
seit das Logo-Bild raus ist, hat .logoheader keinen eigenen Inhalt
mehr und wuerde sonst auf 20px zusammenfallen. */
.logoheader,
#logo,
.header1 {
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
/* #logo traegt eigenes Padding (position.css: "padding: 1em 20px 20px 10px"),
.header1 zusaetzlich "padding-left: 55px" (Platz fuer das entfernte Logo-
Bild). Im Content-Box-Modell (Browser-Vorgabe) wird Padding zur Breite
ADDIERT statt eingerechnet - max-width:100% allein reichte deshalb nicht,
#logo blieb bei gemessenen 410px (390 + 20px rechtes Padding). Mit
border-box zaehlt das Padding zur Breite dazu, die Box passt exakt. */
/* #wrapper2 ist die Zwei-Spalten-Aufteilung fuer Inhalt (71%) + Randspalte
(position.css). Auf 390px ergibt das keinen Sinn - beide Spalten muessen
volle Breite bekommen und untereinander stehen statt nebeneinander.
Gemessen: #wrapper2 blieb bei 385px + 20px linkem Versatz = 405px. */
#wrapper,
#wrapper2 {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
/* Das Suchformular des Filtermoduls (mod_cf_search) ist ein