/* ========================================================================== * MW Responsive Layer * -------------------------------------------------------------------------- * Zentrale Stelle für alle Responsive-Korrekturen (Tablet und Handy). * * WARUM DIESE DATEI EXISTIERT * Die Responsive-Logik dieser Seite lag vorher auf vier Ebenen verteilt: * plugin-eigenes style.css und util.css, rund 20 aktive Code-Snippets, * die Additional CSS im Customizer, und Elementor-Widget-Einstellungen. * Fast alles über hartcodierte Element-IDs mit !important. Neue Fixes gehören * ab jetzt HIERHER, nicht in ein weiteres Snippet. * * Wird vom Plugin mw-catalog-display als letztes Stylesheet eingebunden * (Priorität 200), gewinnt also gegen die Snippet-Styles auf 120/130. * * Breakpoints entsprechen Elementor: * <= 1024px Tablet und kleiner * <= 767px Handy * ========================================================================== */ /* -------------------------------------------------------------------------- * 1) Bilder dürfen ihren Container nicht sprengen * * Befund: Auf /wir-ueber-uns/ hatte tw-mw-computer-768x512.jpg ein * max-width: 1000px statt max-width: 100% und stand in einer 337px breiten * Spalte. Ergebnis bei 768px Viewport: die Seite war 1377px breit und * horizontal scrollbar. Auf dem Desktop passen die 1000px, deshalb ist es * nie aufgefallen. * * Das ist eine Fehlerklasse, nicht ein Einzelfall: jedes Bild mit fester * Pixelbreite oder einem max-width über der Containerbreite erzeugt denselben * Effekt. Deshalb hier global abgesichert statt pro Element geflickt. * * max-width verkleinert nur, es vergrößert nie — Icons und kleine Grafiken * bleiben unberührt. height: auto verhindert Verzerrung, wenn ein Bild * width- und height-Attribute mitbringt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { img { max-width: 100% !important; height: auto; } /* Slider-Folien sollen weiterhin exakt volle Viewportbreite haben und * werden vom Track mit overflow:hidden beschnitten — die Regel oben * begrenzt sie auf 100% ihres Containers, das ist hier korrekt und * gewollt. Kein Sonderfall nötig, nur zur Klarstellung dokumentiert. */ } /* -------------------------------------------------------------------------- * 2) width: 100vw darf die Seite nicht breiter machen als den Viewport * * Befund: In 15 Elementor-Dokumenten (deutsch UND englisch) steht im Custom * CSS eines Elements ein "width: 100vw" — immer auf * "selector .elementor-widget-container". Das erzeugt auf dem Desktop den * gewollten randlosen Bildeffekt, sitzt aber in einer halb so breiten Spalte. * Ergebnis bei 768px: die Seite wird 1145px breit und horizontal scrollbar. * * Betroffen sind 71, 111, 5381, 5398, 5760, 5843, 5890, 5898, 5902, 6199, * 6200, 6221, 6222, 6767, 7605 — also praktisch jede Elementor-Seite. Deshalb * hier zentral entschaerft statt 15 mal einzeln gepatcht. * * Wichtig: 100vw ignoriert die Scrollbar-Breite, deshalb kann es selbst auf * dem Desktop minimalen Overflow erzeugen. Wir lassen den Desktop hier aber * unberuehrt, weil dort der Effekt gewollt ist und das Layout dafuer gebaut * wurde. max-width gewinnt gegen width, damit wird aus 100vw effektiv * "so breit wie der Container erlaubt". * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-widget-container, .elementor-widget { max-width: 100% !important; } } /* -------------------------------------------------------------------------- * 3) Lange Zeichenketten in Icon-Listen (Kontaktboxen) duerfen nicht * aus der Spalte laufen * * Befund: In der Box "Sprechen Sie uns an!" ragten "info@m-w-computer.de" und * die Adresszeile 8 bis 10px aus der Seite. Alle Elternelemente endeten * korrekt bei 753px, nur die Textzeile selbst ging bis 778px. * * Ursache: Die Zeilen sind Flex-Elemente. Flex-Elemente haben von sich aus * min-width: auto und weigern sich damit, unter ihre min-content-Breite zu * schrumpfen. Eine E-Mail-Adresse ist eine einzige lange Zeichenkette ohne * Umbruchgelegenheit, ihre min-content-Breite ist also die volle Textbreite. * * Wichtig: das bereits gesetzte overflow-wrap: break-word hilft hier NICHT, * weil es die min-content-Breite unberuehrt laesst. Nötig sind min-width: 0 * (erlaubt das Schrumpfen) plus overflow-wrap: anywhere (das die * min-content-Breite tatsaechlich reduziert). * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-icon-list-item { min-width: 0; } .elementor-icon-list-text { min-width: 0; overflow-wrap: anywhere; } } /* -------------------------------------------------------------------------- * 4) Kontaktbox "Sprechen Sie uns an!" auf Tablet stapeln statt quetschen * * Befund: In Sektion 6081973 stehen zwei Spalten nebeneinander — 7190c38 * (col-66, Haupttext) und f76d9ce (col-33, Kontaktbox). Elementor stapelt * Spalten von sich aus erst unter 768px. Bei genau 768px, dem Referenz- * Viewport der Abnahme, stehen sie also noch nebeneinander: die Kontaktspalte * ist dann 251px breit, davon gehen 27px Spalten-Padding, 55px Widget-Padding * und 61px für das Icon ab — es bleiben 108px für den Text. Die E-Mail-Adresse * bricht dadurch über vier Zeilen. * * Die Sektions-ID 6081973 ist auf allen vier betroffenen Seiten identisch * (71, 5898, 6199, 6200), weil die Seiten voneinander kopiert wurden. Die * Spalten darin heissen aber NICHT überall gleich — auf 6199 ist die * Haupttextspalte 7190c38, auf 71 hat sie eine andere ID. Deshalb werden hier * die direkten Spalten-Kinder der Sektion angesprochen statt einzelne IDs; * das deckt deutsch und englisch ab, ohne dass eine Spalte übersehen wird. * * flex-wrap wird explizit gesetzt, weil zwei Spalten mit je 100% Breite sonst * nicht umbrechen, sondern sich gegenseitig stauchen. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-6081973 > .elementor-container { flex-wrap: wrap; } .elementor-element-6081973 > .elementor-container > .elementor-column { width: 100% !important; } } /* -------------------------------------------------------------------------- * 5) Filter-Auswahlfelder auf Fingergroesse bringen * * Befund: Die JetSmartFilters-Dropdowns auf den Kategorieseiten sind 34px * hoch. Fuer Touch-Bedienung gelten 44px als Mindestmass (Apple HIG und * WCAG 2.5.8 Target Size). * * Snippet 22 ("MW Launch UI Fixes v1") nagelt .mw-psu-filter-stack * .jet-select__control mit !important auf height/min-height/max-height 40px * fest. Deshalb braucht es hier ebenfalls !important UND den spezifischeren * Selektor, sonst gewinnt das Snippet trotz spaeterer Ladereihenfolge. * * Der Desktop bleibt bei den 40px aus Snippet 22 — dort wird mit der Maus * geklickt, da ist die Groesse kein Problem. * * NACHTRAG: Die 40px-Regel existiert VIERFACH — in Snippet 13, in Snippet 22, * und zweimal in der Additional CSS (Snippet 22 schreibt sich per init-Hook * dorthin). Die Additional CSS laedt NACH dieser Datei, bei gleicher * Spezifitaet und beidseitigem !important gewinnt sie also. Deshalb hier * bewusst "html body" davor: das hebt die Spezifitaet von (0,2,0) auf (0,2,2) * und schlaegt alle vier Kopien, ohne dass an der geteilten Konfiguration * gedreht werden muss. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { html body .jet-select__control, html body .mw-psu-filter-stack .jet-select__control { height: auto !important; min-height: 44px !important; max-height: none !important; line-height: normal !important; } } /* -------------------------------------------------------------------------- * 6) Wortbrueche mit Trennstrich statt mitten im Wort * * Befund: Lange deutsche Komposita brechen in schmalen Spalten ohne * Trennstrich um und werden dadurch schwer lesbar — im Audit gemeldet als * "ALLGEMEINE GESCHÄFTSBEDINGUN GEN", "DATENSCHUTZERKLÄR UNG", * "SONDERANFERTI GUNG". Nachgemessen auf /wir-ueber-uns/: das Label * "SONDERANFERTIGUNG" steht in einer 168px breiten Box und bricht auf zwei * Zeilen. * * Ursache: hyphens steht auf "manual", also trennt der Browser nur an * weichen Trennstrichen im Text — die es hier nicht gibt. Gleichzeitig sorgt * overflow-wrap: break-word dafuer, dass das Wort trotzdem bricht, nur eben * an beliebiger Stelle und ohne Trennzeichen. * * hyphens: auto nutzt das Trennmuster der Dokumentsprache. Das -Element * traegt lang="de-DE", die deutsche Silbentrennung greift also. Wo ein Wort * ohnehin passt, aendert die Regel nichts — Silbentrennung wird nur bei * echtem Platzmangel angewandt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* hyphens ist eine vererbte Eigenschaft. Einmal am body gesetzt, gilt sie * überall, wo nichts anderes explizit deklariert ist — das ist deutlich * robuster als eine Liste einzelner Selektoren, die je nach Widget-Typ * (heading, text-editor, icon-box) immer wieder Lücken hat. * * KORREKTUR nach Sichtprüfung am Gerät: ohne Grenzen trennt der Browser * auch kurze Wörter und macht aus "Computer" ein "Compu-ter", aus * "Distributor" ein "Distri-butor". Das ist schlechter lesbar als der * Umbruch, den es vermeiden soll. hyphenate-limit-chars: 12 5 4 heisst: * erst ab 12 Zeichen trennen, mindestens 5 Zeichen vor und 4 nach dem * Trennstrich. Damit bleiben normale Wörter ganz und nur echte Bandwürmer * wie "Geschäftsbedingungen" werden getrennt. */ body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 4; -webkit-hyphenate-limit-chars: 12 5 4; } h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p, .grid-title, .mini-tower { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } /* -------------------------------------------------------------------------- * 7) Icon-Feature-Reihe auf /wir-ueber-uns/ als 2x2 statt 4 nebeneinander * * Befund: Sektion 7273573 enthält vier col-25-Spalten — "25 JAHRE ERFAHRUNG", * "INTERNATIONALE PARTNER", "SONDERANFERTIGUNG", "GROSSES SERIEN-SORTIMENT". * Bei 768px sind das 188px pro Spalte. Die Überschriften brechen darin um; * im Audit gemeldet als "SONDERANFERTI GUNG". * * Durch die Anhebung der Grundschrift auf 16px (Block 8 unten bzw. die * Astra-Einstellung) wurde es an dieser Stelle enger, nicht weiter — die * Umstellung auf zwei Spalten ist damit nicht mehr optional. * * Grenze 900px wie im Umsetzungsplan vorgesehen. Unter 768px stapelt * Elementor die Spalten von sich aus auf 100%, dort bleibt es also bei einer * pro Reihe; 2x2 greift im Bereich 768 bis 900px. * ------------------------------------------------------------------------ */ /* KORREKTUR: Die Untergrenze fehlte. Ohne min-width griff die Regel bis 0px * herunter und ueberschrieb Elementors eigenes Stapeln auf dem Handy — die * vier Kacheln standen dort zweispaltig in rund 180px schmalen Spalten, der * Fliesstext darunter wurde zu "Wis-sen", "Grosshaend-ler", "Distri-butor" * zerhackt. Unter 768px muss Elementor stapeln duerfen. */ @media (min-width: 768px) and (max-width: 900px) { .elementor-element-7273573 > .elementor-container > .elementor-column { width: 50% !important; } } /* -------------------------------------------------------------------------- * 8) Header mobil verdichten und Touch-Targets vergroessern (AP2) * * Ausgangslage bei 390px: Header 295px hoch. Davon Logo 81px, Topbar 73px * (Telefonzeile und die zwei Sprach-Flaggen brechen in drei Zeilen um, weil * 323px Text + 2x16px Flaggen + Abstaende breiter sind als die 370px * Containerbreite), Suche/Wunschliste 31px, Menue-Toggle-Zeile 49px. * * Das Burger-Menue selbst ist bereits aktiv (UAE-Einstellung dropdown=tablet * am Widget fab82f2). Hier geht es nur noch um Hoehe und Fingergroesse. * * Touch-Targets: der Toggle war 25x29px, die Sprach-Flaggen 16x16px, das * Wunschlisten-Herz 26x26px — alle unter dem Mindestmass von 44px * (WCAG 2.5.8, Apple HIG). * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* -- Logo kleiner -- */ .elementor-element-ef79c1b img { max-height: 52px !important; width: auto !important; } /* -- Topbar in eine Zeile zwingen -- */ .elementor-element-a9ef226 > .e-con-inner, .elementor-element-a9ef226 { flex-wrap: nowrap !important; gap: 8px; } /* Telefonzeile darf schrumpfen, statt die Flaggen umzubrechen */ .elementor-element-07fa5ca { min-width: 0 !important; flex: 1 1 auto !important; } .elementor-element-07fa5ca .elementor-heading-title { font-size: 13px !important; line-height: 1.25 !important; } /* -- Sprachumschalter: Textlabel statt 16px-Flaggenbild -- * Die Flaggen sind als 16x16-PNG eingebunden und damit sowohl zu klein * zum Antippen als auch anfaellig fuer den haesslichen Alt-Text-Fallback * ("germany"), falls die Datei mal nicht laedt. Das bleibt erhalten, * damit der WPML-Sprachwechsel weiter funktioniert — nur die Darstellung * wird ersetzt. Rein per CSS, also jederzeit rueckgaengig zu machen. */ .elementor-element-04d5259 img, .elementor-element-8c66a80 img { display: none !important; } .elementor-element-04d5259 a, .elementor-element-8c66a80 a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none !important; } .elementor-element-04d5259 a::after { content: "DE"; } .elementor-element-8c66a80 a::after { content: "EN"; } /* -- Menue-Toggle auf Fingergroesse -- */ .uael-nav-menu__toggle { min-height: 44px !important; display: flex !important; align-items: center; } .uael-nav-menu__toggle .uael-nav-menu-icon { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* -- Wunschlisten-Herz auf Fingergroesse -- */ .mw-header-wishlist-link { width: 44px !important; height: 44px !important; } /* -- Suchfeld: 16px gegen iOS-Auto-Zoom, und antippbar -- */ .elementor-search-form__input { font-size: 16px !important; min-height: 44px !important; } /* -- Telefonnummer-Link antippbar (war 32px) -- */ .elementor-element-07fa5ca a { display: inline-flex; align-items: center; min-height: 44px; } /* -- Untermenue-Eintraege im Burger-Menue (Produkte -> Kategorien) -- * Die Panels von "Produkte" und "Sonderfertigungen" sind Elementor- * Templates (5228 bzw. 5304). Ihre Links waren nur 24 bis 26px hoch und * damit mit dem Daumen kaum zu treffen. Die Top-Level-Eintraege lagen mit * 50 bis 57px schon richtig. */ .uael-nav-menu .sub-menu a, .uael-nav-menu .uael-mega-menu-content a, nav.uael-dropdown a { min-height: 44px; display: flex; align-items: center; } /* -- Untermenue-Panels stapeln statt mehrspaltig -- * Befund bei 768px: Panel 5228 ("Produkte") rendert 5 Spalten à 151px, * davon bleiben nach Padding nur 86px fuer den Text. "Accessoires" * braucht 139px, "Corporate" 126px, "Topseller" 117px — alle vier * Eintraege waren abgeschnitten. Panel 5304 hat 4 Spalten à 188px. * * Die Panels sind eigene Elementor-Templates, gebaut fuer die Breite der * Desktop-Navigation. Im Burger-Menue werden die Eintraege gestapelt, wie * es der Umsetzungsplan unter AP2.2 als Akkordeon vorsieht — dann steht * jedem Eintrag die volle Menuebreite zur Verfuegung. * * Bewusst auf das Mobil-Menue-Widget fab82f2 begrenzt, damit die * Desktop-Navigation (Widget aebd95b) unberuehrt bleibt. */ .elementor-element-fab82f2 .elementor-container { flex-wrap: wrap; } .elementor-element-fab82f2 .elementor-column { width: 100% !important; } } /* -------------------------------------------------------------------------- * 9) Spec-Band der Produktseiten (AP4) * * Betroffen sind die Templates 12265 (Server, 56 Produkte) und 14149 * (Corporate, 59 Produkte) — zusammen 115 der 133 Produkte. Die bestehenden * Fixes in Snippet 19 und 20 sind ausschliesslich auf `.elementor-99` bzw. auf * dessen sechs Spalten-IDs gescopet und greifen hier nicht. * * Befund bei 768px auf /produkt/iw-sk34-02/ (Template 12265): * Die Box fbd2321 ist als elementor-col-50 deklariert, rendert aber nur 275px * von 753px verfuegbarer Breite — die Bildspalte daneben nimmt 478px. Die * sechs Spec-Zellen darin sind je 50% davon, also 137px. Fuenf der sechs * Zellen waren leer ("-"), die sechste enthielt 262 Zeichen Datenblatt und * wurde dadurch 786px hoch — und zog ihre leere Nachbarzelle mit. * * Drei Eingriffe greifen zusammen: * a) Box und Bildspalte stapeln auf Tablet/Handy -> Box bekommt 753px, * die Zellen damit ~376px statt 137px. * b) Leere Zellen verschwinden jetzt wirklich (Plugin-Fix: der Selektor * beruecksichtigt neben .e-con.e-child auch .elementor-column). * c) Zellen mit langem Freitext bekommen die volle Zeilenbreite * (Plugin setzt .mw-spec-cell-wide ab 120 Zeichen). * * Der Geschwister-Selektor (~) spricht die Bildspalte an, ohne ihre ID zu * kennen — die weicht zwischen den Templates ab, die Box-ID fbd2321 nicht. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-fbd2321, .elementor-element-fbd2321 ~ .elementor-column { width: 100% !important; } /* Zelle mit langem Freitext ueber die ganze Zeile. * Die 50%-Regel in style.css:233ff nutzt !important, deshalb hier auch. */ .mw-spec-cell-wide { width: 100% !important; } /* Innerhalb der breiten Zelle darf der Text normal umbrechen statt in * einer schmalen Saeule zu stapeln. */ .mw-spec-cell-wide .attr-all, .mw-spec-cell-wide .attr-all p { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } } /* -------------------------------------------------------------------------- * 10) Spec-Labels auf Template 99: nowrap auch auf Tablet aufheben * * Befund: Snippet 19 setzt in Zeile 52 `white-space: nowrap` auf die * Label-Container der sechs Spec-Spalten von Template 99 und hebt das erst in * `@media (max-width: 767px)` wieder auf. Bei genau 768px — dem Referenz- * Viewport der Abnahme — gilt nowrap also noch, und Labels werden abgeschnitten * ("DETAILINFORMAT…", "MICRO-ATX MINI-…" im Audit). * * Ein klassischer Off-by-one im Breakpoint: gemeint war offensichtlich * "Tablet und kleiner", getroffen wurde "kleiner als Tablet". * * Snippet 19 laedt auf wp_head mit Prioritaet 20, diese Datei auf * wp_enqueue_scripts mit Prioritaet 200 — sie kommt also spaeter und gewinnt * bei gleicher Spezifitaet. Die Selektoren werden hier bewusst genauso * spezifisch nachgebaut wie im Snippet. * ------------------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-99 .elementor-element-05fd4b7 .elementor-widget-text-editor .elementor-widget-container, .elementor-99 .elementor-element-086973e .elementor-widget-text-editor .elementor-widget-container, .elementor-99 .elementor-element-7150543 .elementor-widget-text-editor .elementor-widget-container, .elementor-99 .elementor-element-7435b89 .elementor-widget-text-editor .elementor-widget-container, .elementor-99 .elementor-element-82cc4ee .elementor-widget-text-editor .elementor-widget-container, .elementor-99 .elementor-element-98d623c .elementor-widget-text-editor .elementor-widget-container { white-space: normal; } } /* -------------------------------------------------------------------------- * 11) Footer auf Tablet zweispaltig statt dreispaltig (AP7.2) * * Befund bei 768px: Footer-Template 107 rendert seine drei Spalten weiterhin * nebeneinander — 262px / 221px / 267px. Die erste Spalte ("MW COMPUTER", * Fliesstext) bekommt dadurch Flatterumbrueche. * * Der Selektor greift die Top-Level-Spalten im Footer-Bereich, nicht einzelne * IDs — der Footer wird ueber die Theme-Builder-Bedingung "include/general" * global eingesetzt, und so bleibt die Regel auch nach einem Umbau des * Templates gueltig. Unter 768px stapelt Elementor von sich aus auf 100%, * das funktionierte laut Audit bereits. * ------------------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-location-footer .elementor-container { flex-wrap: wrap; } .elementor-location-footer .elementor-top-column { width: 50% !important; } } /* -------------------------------------------------------------------------- * 12) Seitenabstand auf den Textseiten (AP7.4) * * Befund bei 768px auf /impressum/ und /datenschutzerklaerung/: der Text laeuft * von x=10 bis x=743, also mit nur 10px Abstand bis an beide Raender. Der * Umsetzungsplan fordert mindestens 5% je Seite, das sind bei 768px rund 38px. * * Bewusst auf die drei Textseiten begrenzt (Impressum 5243, AGB 5251, * Datenschutzerklaerung 5256 — englische Fassungen existieren nicht). Eine * globale Regel waere hier falsch: Startseite und Kategorieseiten nutzen * absichtlich randlose Baender, die eingerueckt kaputt aussehen wuerden. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .page-id-5243 .elementor-top-column > .elementor-element-populated, .page-id-5251 .elementor-top-column > .elementor-element-populated, .page-id-5256 .elementor-top-column > .elementor-element-populated { padding-left: 5% !important; padding-right: 5% !important; } } /* -------------------------------------------------------------------------- * 13) Ueberdimensionierte Spacer auf kleinen Bildschirmen begrenzen * * Befund auf /kontakt/ bei 768px: zwischen Formularende und Footer liegen * 338px Leerfläche. Ursache sind zwei Elementor-Spacer-Widgets mit festen * Höhen — adaee46 mit 240px und 79b8cab mit 111px. Solche Werte sind für die * Desktop-Ansicht gesetzt; auf dem Handy ist senkrechter Platz das knappste * Gut und 240px Nichts sind nie richtig. * * Bewusst als generelle Regel statt als Einzelfall: der Umsetzungsplan nennt * dasselbe Muster unter AP1.3 ("leere Spacer/Sektionen mit fixen Höhen auf * mobilen Breakpoints reduzieren"), es tritt also mehrfach auf. Die Obergrenze * greift nur bei Spacern, die groesser als 64px sind — kleinere Abstaende, * die bewusst gesetzt wurden, bleiben unberuehrt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-widget-spacer .elementor-spacer-inner { max-height: 64px; } } /* -------------------------------------------------------------------------- * 14) Formularfelder: 16px gegen iOS-Auto-Zoom (AP7.5) * * Befund auf /kontakt/: vier Felder (Name, E-Mail, Telefon, Bemerkung) stehen * auf 15px. Safari auf iOS zoomt die Seite automatisch heran, sobald ein * Eingabefeld mit weniger als 16px fokussiert wird — der Nutzer landet dann in * einer vergroesserten, seitlich verschobenen Ansicht und muss manuell * zuruecknavigieren. 16px ist die Grenze, ab der das nicht passiert. * * Die Feldhoehen sind mit 44 bis 48px bereits ausreichend, die Labels stehen * schon auf 16px — hier fehlt nur die Schriftgroesse in den Feldern selbst. * ------------------------------------------------------------------------ */ /* -------------------------------------------------------------------------- * 14a) Footer-Text auf 16px (AP7.6, Restposten) * * Nach dem Anheben der Astra-Grundschrift steht der Inhaltsbereich vollstaendig * auf 16px. Im Footer blieben 9 Textblöcke bei 15px zurueck: Astra setzt die * 16px auf `body`, der Footer-Text erbt aber die Wurzelgroesse von 15px. * * !important ist hier noetig, weil Elementor pro Element eigenes CSS generiert * (`.elementor-107 .elementor-element-xxxxx .elementor-widget-container`), das * spezifischer ist als jeder Selektor, den man von aussen sinnvoll schreiben * kann. Ohne !important blieben 7 Blöcke bei 15px stehen. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-location-footer, .elementor-location-footer p, .elementor-location-footer li, .elementor-location-footer a, .elementor-location-footer span, .elementor-location-footer .elementor-widget-text-editor, .elementor-location-footer .elementor-widget-text-editor .elementor-widget-container { font-size: 16px !important; } } @media (max-width: 1024px) { .elementor-field-textual, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], textarea, select { font-size: 16px !important; } } /* -------------------------------------------------------------------------- * 15) Produktkarten: Typ-Label umbrechen statt abschneiden * * Befund auf der Startseite bei 390px: die Typ-Labels der Produktkarten sind * auf 152px Breite abgeschnitten. "Mini Tower Chassis" braucht 169px, * "4U Rackmount Chassis" sogar 208px — beide enden mit "…". * * Ursache: util.css Zeile 301ff setzt auf .mini-tower gleichzeitig * white-space: nowrap, overflow: hidden und text-overflow: ellipsis. Auf der * Desktop-Breite reicht der Platz, auf dem Handy nicht. Da es sich um die * Produktkategorie handelt (also eine Kaufentscheidungs-Information), ist * Abschneiden hier die schlechteste Option — Umbrechen kostet nur eine Zeile. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .mini-tower { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } /* -------------------------------------------------------------------------- * 16) Kartenbeschreibungen auf 16px * * Befund: die Kurzbeschreibungen auf den Produktkarten stehen auf 14px, * festgenagelt in util.css Zeile 209 und 214 mit !important. Damit lagen sie * unter der geforderten Mindestgroesse fuer Fliesstext. * * Die Zeilenbegrenzung auf zwei Zeilen (-webkit-line-clamp: 2) bleibt * erhalten, die Karten werden also nicht hoeher als noetig. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .description, .description a, .description + p, .description-box > * { font-size: 16px !important; } } /* -------------------------------------------------------------------------- * 17) Footer-Links auf Fingergroesse * * Befund auf der Startseite bei 390px: sechs Links im Footer sind nur 19 bis * 21px hoch — Telefonnummer, E-Mail-Adresse und die Kategorie-Links. Das * Mindestmass fuer Touch-Bedienung sind 44px. * * Die Icon-Listen-Eintraege werden ueber das Listenelement aufgezogen, damit * Icon und Text gemeinsam antippbar sind und die Trefferflaechen sich nicht * ueberlappen — das waere bei blossem Innenabstand der Fall gewesen. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-location-footer .elementor-icon-list-item, .elementor-location-footer .elementor-icon-list-item > a { min-height: 44px; } .elementor-location-footer .elementor-icon-list-item > a { display: flex; align-items: center; } .elementor-location-footer a { min-height: 44px; display: inline-flex; align-items: center; } } /* -------------------------------------------------------------------------- * 18) Verlinkte Icon-Listen-Eintraege auf Fingergroesse — global * * Befund: Ein tel:-Link im Seiteninhalt der Startseite (Widget 7561837) war * 30px hoch. Icon-Listen werden auf dieser Seite durchgaengig fuer Kontakt- * angaben verwendet — Telefon, E-Mail, Adresse — im Header, im Footer und * mitten im Inhalt. Die Footer-Regel aus Block 17 deckte nur einen Teil ab. * * Bewusst nur der Anker, nicht das Listenelement: so werden reine Aufzaehlungen * ohne Link nicht kuenstlich auseinandergezogen. Der 44px hohe Anker schiebt * sein Listenelement von selbst auf die noetige Hoehe. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-icon-list-item > a { min-height: 44px; display: flex; align-items: center; } } /* -------------------------------------------------------------------------- * 19) Bedienelemente im Katalog auf Fingergroesse (AP6.3 und AP6.5) * * Befund auf /shop/ bei 390px: 21 Bedienelemente unter 44px Hoehe. Drei * wiederkehrende Muster machen den Grossteil aus: * - "MEHR INFOS" auf jeder Produktkarte: 30px (.more-info hat in util.css * Zeile 143ff nur 2px senkrechten Innenabstand) * - Sortier-Auswahlfeld: 37px * - Seitenzahlen der Pagination: 40x40px * * Breadcrumb-Links ("Start / Shop") bleiben bewusst unangetastet: das sind * Fliesstext-Links in einer Zeile, fuer die WCAG 2.5.8 ausdruecklich eine * Ausnahme vorsieht. Sie auf 44px aufzublasen wuerde die Zeile zerreissen, * ohne die Bedienbarkeit zu verbessern. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .more-info { min-height: 44px; box-sizing: border-box; justify-content: center; } .woocommerce-ordering select, .orderby, select.orderby { min-height: 44px; font-size: 16px; } .woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers, .jet-filters-pagination__item, nav[class*="pagination"] a, nav[class*="pagination"] span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* -------------------------------------------------------------------------- * 20) Telefon- und E-Mail-Links immer antippbar * * Befund: Derselbe tel:-Link taucht auf verschiedenen Seiten in * unterschiedlichen Bausteinen auf — mal in einer Icon-Liste (Startseite, * 30px), mal als freistehender Link (Wunschliste, 19px). Ihn ueber die * jeweilige Umgebung zu greifen fuehrt zu einer endlosen Einzelfall-Jagd. * * Auf dem Handy ist ein tel:- oder mailto:-Link immer ein Tap-Ziel und nie * blosser Fliesstext — die WCAG-Ausnahme fuer Inline-Links greift hier also * nicht. Deshalb direkt ueber das Protokoll im href angesprochen, unabhaengig * davon, in welchem Widget der Link steckt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; } } /* -------------------------------------------------------------------------- * 21) Spec-Chips auf den Katalogkarten umbrechen statt abschneiden * * Befund auf /kategorie/server/ bei 390px: der Chip .mw-mb-form-factor__case * zeigt "2U Rackmount Chassis" auf 110px Breite an, braucht aber 113px — der * Text endet mit "…". Gleiche Ursache wie bei .mini-tower in Block 15: * white-space: nowrap plus overflow: hidden plus text-overflow: ellipsis. * * Drei Pixel Unterschied wirken harmlos, aber betroffen ist die Bauform des * Gehaeuses — genau die Angabe, nach der in diesem Katalog ausgewaehlt wird. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .mw-mb-form-factor__case, .mw-mb-form-factor { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } /* -------------------------------------------------------------------------- * 22) Elementor-Buttons auf Fingergroesse * * Befund: Die "Mehr Infos"-Buttons auf den JetEngine-Katalogkarten sind 35px * hoch (Innenabstand 10px oben und unten bei 15px Schrift). Die Klasse * .elementor-button wird auf der ganzen Seite fuer Handlungsaufrufe genutzt, * deshalb hier einmal zentral statt pro Kartentyp. * * NICHT angefasst: die Produkttitel in den Karten sind nur 24px hohe * Inline-Links. Das Kartenbild darueber ist ein 296x296px grosser Link auf * dasselbe Produkt — WCAG 2.5.8 nimmt kleine Ziele ausdruecklich aus, wenn * dieselbe Aktion an anderer Stelle ausreichend gross erreichbar ist. Die * Ueberschriften kuenstlich auf 44px aufzuziehen wuerde das Kartenlayout * verzerren, ohne die Bedienbarkeit zu verbessern. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } } /* -------------------------------------------------------------------------- * 23) Spec-Band: Schriftverkleinerung zuruecknehmen * * Befund auf /produkt/c589/ bei 390px: die Spec-Werte stehen auf 12px, die * Labels auf 11px, die Unterzeile auf 13px. * * Ursache: style.css Zeile 233ff verkleinert unter 767px alles in der Box * fbd2321, damit "title + subtitle + die 6 Felder in eine viel kuerzere * senkrechte Flaeche passen" (Originalkommentar). Diese Notmassnahme war * noetig, solange die Box in einer 137px schmalen Spalte steckte. * * Seit Block 9 ist die Box auf Tablet und Handy voll breit und die leeren * Felder sind ausgeblendet — der Platzdruck existiert nicht mehr, die * Verkleinerung kostet jetzt nur noch Lesbarkeit. Deshalb zurueckgenommen. * * Die Selektoren sind bewusst genauso spezifisch wie in style.css nachgebaut; * bei Gleichstand gewinnt die spaeter geladene Datei, und responsive.css laedt * mit Prioritaet 200 nach dem Plugin-Stylesheet. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-element-fbd2321 .elementor-widget-text-editor .elementor-widget-container, .elementor-element-fbd2321 .elementor-widget-text-editor .elementor-widget-container p { font-size: 15px !important; line-height: 1.35 !important; } .elementor-element-fbd2321 .attr-all { font-size: 16px !important; line-height: 1.4 !important; } .elementor-element-5e027c8 p { font-size: 15px !important; line-height: 1.35 !important; } } /* -------------------------------------------------------------------------- * 24) Wunschlisten-Button und Galerie-Pfeile auf Fingergroesse * * Befund auf /produkt/c589/ bei 390px: der Button "Zur Wunschliste * hinzufuegen" ist 35px hoch bei 13,5px Schrift (style.css Zeile 305ff), die * Vor- und Zurueck-Pfeile der Produktgalerie sind je 20px. * * Gerade die Galerie-Pfeile sind auf dem Handy das Hauptbedienelement der * Seite — dort werden die Produktbilder durchgeblaettert. 20px sind dafuer * deutlich zu klein. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .yith-wcwl-add-button a.add_to_wishlist, .yith-wcwl-wishlistexistsbrowse a, .elementor-element-fbd2321 .yith-wcwl-add-button a.add_to_wishlist, .elementor-element-fbd2321 .yith-wcwl-wishlistexistsbrowse a { min-height: 44px !important; font-size: 15px !important; box-sizing: border-box; } .slick-arrow, .woo-product-gallery-slider .slick-arrow, .flex-direction-nav a { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center; justify-content: center; } } /* -------------------------------------------------------------------------- * 25) Spec-Chips lesbarer: 11px -> 13px * * Befund auf /kategorie/top-produkte/ bei 390px: der innere Chip-Text * .mw-mb-form-factor__case steht auf 11px bei rund 92px Chipbreite. Die * aeussere Huelle .mw-mb-form-factor ist bereits auf 16px, sichtbar ist aber * der innere Text. * * BEWUSSTE ABWEICHUNG vom 16px-Ziel des Umsetzungsplans: bei 16px wuerde * "S.F.F Slim Chassis Ultra Small Form Factor" im 92px breiten Chip auf vier * bis fuenf Zeilen umbrechen. Die Chips stehen zu mehreren nebeneinander in * der Karte, das Kartenraster wuerde dadurch deutlich in die Laenge gezogen. * * 13px ist der Kompromiss: gut lesbar auf dem Handy, Chip bleibt einzeilig * bis zweizeilig. Wer die vollen 16px will, muss die Chip-Leiste umbauen * (etwa untereinander statt nebeneinander) — das ist eine Layout-Entscheidung. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .mw-mb-form-factor__case { font-size: 13px !important; line-height: 1.3 !important; } } /* -------------------------------------------------------------------------- * 26) Fliesstext in Text-Widgets auf 16px * * Befund auf /wir-ueber-uns/ bei 768px: acht Inhaltsabsaetze stehen auf 15px. * Ursache: Astra setzt die 16px auf `body`, die Wurzelgroesse `html` bleibt * aber bei 93,75% = 15px. Elementors Standard fuer Text-Widgets ist 1rem — * und 1rem rechnet gegen `html`, nicht gegen `body`. Absaetze ohne eigene * Typografie-Einstellung landen damit bei 15px. * * Bewusst OHNE !important: Widgets mit eigener Schriftgroesse erzeugen in * Elementor per-Element-CSS, das spezifischer ist und deshalb weiterhin * gewinnt. Absichtlich groessere Texte (etwa Einleitungsabsaetze) werden also * nicht zusammengestaucht — nur die Standardfaelle werden angehoben. * * Die Wurzelgroesse selbst bleibt unangetastet: sie auf 16px zu setzen wuerde * jeden rem-basierten Abstand auf Tablet und Handy um knapp 7% mitwachsen * lassen, also das Layout aller Seiten veraendern, um acht Absaetze zu heben. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li { font-size: 16px; } } /* -------------------------------------------------------------------------- * 27) Kategorie-Kacheln vollflaechig antippbar * * Befund auf /wir-ueber-uns/ bei 768px: die Kacheln "Cases_", "Server_", * "Netzteile_", "Accessoires_" sind 188x142px grosse Flaechen mit dunkelblauem * Hintergrund — klickbar ist davon aber nur der Text mit 82x22px. Der Nutzer * zielt auf die Kachel und trifft daneben. * * 22px liegt unter der WCAG-2.5.8-Mindestgroesse von 24px, das ist also kein * Feinschliff, sondern ein echter Mangel. Auf der Startseite messen dieselben * Kacheln 37px, die Groesse schwankt je nach Seite. * * NACHTRAG: Die deutsche und die englische Fassung sind unterschiedlich * gebaut. Auf den deutschen Seiten haengt der Link direkt im Widget-Container, * auf den englischen steckt er zusaetzlich in einem

— dort blieben die * Kacheln deshalb bei 19px. Der Selektor deckt jetzt beide Formen ab. * * Damit koennen theoretisch auch Fliesstext-Links erfasst werden. Deshalb * bewusst inline-flex statt flex: ein Link im Fliesstext bleibt dann in seiner * Zeile stehen und wird lediglich hoeher, statt einen Umbruch zu erzwingen. * Fuer die Kacheln reicht das voellig — deren Breite liegt mit 81 bis 184px * ohnehin ueber dem Mindestmass, die Hoehe war das Problem. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-widget-text-editor .elementor-widget-container > a, .elementor-widget-text-editor .elementor-widget-container > span > a, .elementor-widget-text-editor .elementor-widget-container > p > a, .elementor-widget-text-editor .elementor-widget-container > p > span > a { display: inline-flex; align-items: center; min-height: 44px; } } /* -------------------------------------------------------------------------- * 28) Inline-Schriftgroessen aus eingefuegtem Text neutralisieren * * Befund auf /oem-odm/ bei 768px: zwei Absaetze stehen auf 15px, obwohl der * umgebende

korrekt 16px hat. Keine Stylesheet-Regel ist dafuer * verantwortlich — die Groesse steht als Inline-Style direkt am : * style="font-size: 15px; font-style: normal; font-weight: 400;" * * Die Kombination aus font-size, font-style: normal und font-weight: 400 ist * der typische Rest von Text, der aus einem anderen Programm in den Editor * eingefuegt wurde. Inline-Styles schlagen jedes Stylesheet, deshalb hilft * hier nur ein gezieltes !important. * * Bewusst auf Text-Widgets begrenzt und nur auf Tablet und Handy: dort zaehlt * die Mindestgroesse. Auf dem Desktop bleibt die Formatierung wie eingefuegt. * Absichtliche Inline-Groessen sind in einem Seitenbaukasten praktisch nie zu * erwarten — wer Text groesser haben will, stellt das am Widget ein. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-widget-text-editor p [style*="font-size"], .elementor-widget-text-editor [style*="font-size"] { font-size: inherit !important; } } /* -------------------------------------------------------------------------- * 29) Header mobil weiter verdichten — was ohne Umbau geht * * Ausgangslage bei 390px nach Block 8: 264px. Aufschluesselung: * 10px Abstand oben, Logo 52px, Topbar 44px, Suche/Wunschliste 44px, * Burger-Zeile 64px, leerer Container unten 20px. * * Zwei Posten lassen sich ohne Strukturaenderung streichen: * - Container 72eee87 am unteren Rand ist voellig leer: kein Text, kein * Bild, kein Hintergrund, keine Umrandung. 20px reines Nichts. * - Die Burger-Zeile umgibt einen 44px hohen Toggle mit je 10px * Innenabstand und wird dadurch 64px hoch. 2px reichen voellig. * * Das Ziel von ~120px aus dem Umsetzungsplan ist damit NICHT erreichbar. Dafuer * muessten Zeilen zusammengelegt werden — Logo, Burger und Wunschliste in eine * Reihe, Suche als aufklappbares Icon, Telefon als Icon. Das sind Verschiebungen * von Widgets zwischen Elementor-Containern, kein Stylesheet-Thema, und das * Ergebnis muss jemand ansehen koennen. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-72eee87 { display: none !important; } .elementor-element-7366ca6 > .e-con-inner { padding-top: 2px !important; padding-bottom: 2px !important; } } /* -------------------------------------------------------------------------- * 30) Kategorie-Kacheln: Schriftgroesse und Luft (Rueckmeldung vom Geraet) * * Befund am echten Handy: das Kachel-Band "Cases_ / Server_ / Netzteile_ / * Accessoires_" wirkt gequetscht. Nachgemessen bei 390px: Schriftgroesse * 37,5px in einer Kachel von 350px Breite und nur 47px Hoehe, bei 15px * Innenabstand oben und unten. Fuer 37,5px Text bleiben damit 17px Platz — * der Text sprengt seine Kachel. * * 37,5px sind eine Desktop-Groesse. Dort steht das Band vierspaltig ueber die * ganze Bildschirmbreite, da wirkt es als Blickfang. Auf dem Handy stapeln * sich die vier Kacheln untereinander und jede ist so hoch wie eine Zeile — * dieselbe Schriftgroesse wirkt dort erdrueckt statt gross. * * 24px behalten den Charakter des Bandes, lassen der Zeile aber Luft. Der * Innenabstand waechst mit, damit die Kachel nicht am Text klebt. * * Die Kacheln sind col-25-Spalten (vier gleiche Spalten nebeneinander im * Desktop-Layout) — darueber lassen sie sich zuverlaessig greifen, ohne * Fliesstext auf anderen Seiten zu erwischen. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container span, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container p { font-size: 24px !important; line-height: 1.25 !important; } .elementor-col-25 > .elementor-element-populated { padding-top: 12px !important; padding-bottom: 12px !important; } /* Der Link muss ein Blockelement sein, sonst schiebt er die Kachel nicht * auf: als Inline-Element haengt er in einer Zeile, deren Hoehe sich nach * der Zeilenhoehe richtet — die 44px liefen unten aus der Kachel heraus. * Als Flex-Element mit voller Breite traegt er seine Hoehe an die Kachel * weiter UND macht die ganze Kachelbreite antippbar statt nur den Text. */ .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > span > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p > span > a { display: flex; width: 100%; align-items: center; min-height: 44px; } /* KERNURSACHE des gequetschten Eindrucks: das Text-Widget selbst hat eine * feste Hoehe von 14px, waehrend sein Inhalt 44px hoch ist — der Link laeuft * unten aus dem Widget heraus und die Kachel bleibt 41px flach. Die feste * Hoehe stammt aus der Desktop-Auslegung, wo die Kachel nur eine kurze * Textzeile traegt. Auf Hoehe "auto" waechst die Kachel mit ihrem Inhalt. */ .elementor-col-25 .elementor-widget-text-editor, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container { height: auto !important; min-height: 0 !important; } /* DIE EIGENTLICHE URSACHE: der Widget-Container traegt negative * Aussenabstaende von je -15px oben und unten. Dadurch rechnet das * umgebende Widget 44 - 15 - 15 = 14px und die Kachel faellt in sich * zusammen, egal welche Hoehe oder welches Padding man setzt. * * Auf dem Desktop ist das ein Kniff, um die Kachel eng an den Text zu * ziehen. Auf dem Handy, wo die Kacheln gestapelt und einzeln so hoch wie * eine Zeile sind, frisst er die Kachel auf. */ .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container { margin-top: 0 !important; margin-bottom: 0 !important; } /* Zwischen Container und Link sitzt je nach Seite ein oder ein

. * Der ist ein Inline-Element — ein Block-Element darin bricht aus dem * Textfluss aus, und der Container misst dann nur die Textzeile (14px) * statt der 44px des Links. Deshalb muss die ganze Kette Block sein, sonst * bleibt die Kachel flach, egal welche Hoehe man setzt. */ .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > span, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p > span { display: block; margin: 0; } } /* -------------------------------------------------------------------------- * 31) Spec-Box der Katalogkarten darf wachsen (Rueckmeldung vom Geraet) * * Befund am Handy: im blauen Feld der Produktkarten sind die Angaben unten * abgeschnitten — man sieht "Mid Tower Chassis", "ATX" und die oberen Haelften * der Kaestchen mit den Zahlen, dann kappt der "Mehr Infos"-Balken den Rest. * * Nachgemessen: die Box 46c1a5e hat height: 150px, max-height: 150px UND * overflow: hidden. Auf dem Desktop passt der Inhalt in diese 150px, weil die * Karte dort breiter ist und "Mid Tower Chassis" einzeilig bleibt. Auf dem * Handy bricht der Typ auf zwei Zeilen, der Inhalt braucht mehr Hoehe — und * overflow: hidden schneidet ihn wortwoertlich ab. * * Die Box gehoert zum JetEngine-Listing 12857, das alle vier Kategorie- * Templates UND die "Ähnliche Produkte" auf den Produktseiten verwenden. * Eine Regel deckt damit den ganzen Katalog ab. * * Auf dem Desktop bleibt die feste Hoehe: dort sorgt sie dafuer, dass alle * Karten einer Zeile gleich hoch sind. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .jet-listing-grid__item .elementor-element-46c1a5e { height: auto !important; max-height: none !important; overflow: visible !important; } } /* -------------------------------------------------------------------------- * 32) Harter Zeilenumbruch im Footer-Text (Rueckmeldung vom Geraet) * * Befund am Handy: "Ihr B2B Großhandel für hochwertige [grosse Luecke] PC-" * und dann "Gehäuse" allein auf der naechsten Zeile. * * Ursache ist kein Umbruchverhalten, sondern ein hart eingebautes
mitten * im Link: PC-
Gehäuse * Das wurde fuer die Desktop-Breite gesetzt, wo die Zeile an genau dieser * Stelle enden soll. Auf dem Handy zerreisst es den Satz. * * Bewusst NUR
innerhalb von Links im Footer: die Adressblock-Umbrueche * ("M.W. Computer Handels GmbH" / "Wöhlerstraße 6" / "22113 Hamburg") stehen * ausserhalb von Links und muessen erhalten bleiben. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-location-footer a br { display: none; } } /* -------------------------------------------------------------------------- * 33) Telefonzeile im Header ohne verwaiste Ziffern * * Befund am Handy: "KONTAKTIEREN SIE UNS +49 (0)40 / 730 90" auf zwei Zeilen * und dann "30" allein auf einer dritten. Nachgemessen: drei Zeilen mit * 274 / 260 / 36px Breite — die letzten 36px sind die verwaiste "30". * * text-wrap: balance verteilt den Text gleichmaessig auf die vorhandenen * Zeilen, statt jede Zeile maximal zu fuellen und den Rest fallen zu lassen. * Damit verschwinden einzelne Restwoerter am Ende. * * Zusaetzlich wird die Telefonnummer selbst zusammengehalten: eine Nummer * mitten im Block zu trennen ist immer falsch, egal wie der Umbruch faellt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-07fa5ca, .elementor-element-07fa5ca .elementor-heading-title { text-wrap: balance; hyphens: none; } .elementor-element-07fa5ca a { white-space: nowrap; } } /* -------------------------------------------------------------------------- * 34) Bannertitel auf dem Handy passend skalieren (AP7.1, Rueckmeldung) * * Befund am Handy: "TOP-PRODUKTE_" bricht in "TOP-" und "PRODUKTE_". * Nachgemessen: 42px Schrift, einzeilig braeuchte der Titel 375px, der Kasten * ist aber nur 294px breit. Der Browser bricht am echten Bindestrich. * * 42px sind fuer die Desktop-Breite gedacht. Statt den Umbruch zu bekaempfen * wird der Titel skaliert, bis er passt — das ist die Loesung, die der * Umsetzungsplan unter AP7.1 auch vorschlaegt ("kleinere Font-Size per * clamp()"). * * clamp(22px, 8vw, 34px) heisst: nie kleiner als 22px, nie groesser als 34px, * dazwischen 8% der Bildschirmbreite. Bei 390px ergibt das 31px — damit passt * "TOP-PRODUKTE_" in eine Zeile (277px von 294px verfuegbar). * * Gilt fuer alle drei Titel-Widgets von Elementor, also Kategorieseiten, * normale Seiten und Produktseiten gleichermassen. Nur unter 768px: auf dem * Tablet ist der Kasten breit genug fuer die Originalgroesse. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-widget-theme-archive-title .elementor-heading-title, .elementor-widget-theme-page-title .elementor-heading-title, .elementor-widget-theme-post-title .elementor-heading-title { font-size: clamp(22px, 8vw, 34px) !important; line-height: 1.2 !important; } } /* -------------------------------------------------------------------------- * 35) Chip-Reihe der Katalogkarten dreispaltig statt 2+1 * * Befund nach dem Fix aus Block 31: die drei Werte (Laufwerke innen, aussen, * Volumen) sind zwar wieder vollstaendig sichtbar, verteilen sich aber auf * zwei Reihen — zwei oben, einer allein darunter. * * Ursache: die Chips stehen auf 45% Breite. Bei 330px Containerbreite sind * das 148,5px pro Chip, zwei passen nebeneinander, der dritte rutscht um. * 45% stammt aus der Desktop-Auslegung, wo die Karte breiter ist. * * 31,5% ergeben rund 104px pro Chip — drei passen nebeneinander, und die * Reihe bleibt so kompakt wie auf dem Desktop gedacht. * * Die IDs stammen aus dem JetEngine-Listing 12857 und sind auf allen * Kategorieseiten und in den "Ähnliche Produkte" identisch. 7f92d95 ist * meist leer und ausgeblendet, wird aber mitgesetzt, damit die Reihe auch * bei Produkten stimmt, wo dieser Wert gefuellt ist. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-a52e315 > .elementor-element-ddbf711, .elementor-element-a52e315 > .elementor-element-cffa447, .elementor-element-a52e315 > .elementor-element-f52bde7, .elementor-element-a52e315 > .elementor-element-7f92d95 { width: 29% !important; } } /* NACHTRAG: 31,5% reichten nicht. Jede Kachel traegt zusaetzlich 10px linken * Aussenabstand — 3 x (104 + 10) = 342px passen nicht in 330px Container. * Mit 29% ergibt das 3 x (95,7 + 10) = 317px und die Reihe haelt. */ /* -------------------------------------------------------------------------- * 36) Kachel-Band vom Inhalt darueber trennen (Rueckmeldung vom Geraet) * * Befund am Handy: die Kacheln liegen auf dem Produktbild statt darunter. * Nachgemessen: die Sektion hat auf Handybreite margin-top: -7rem (= -105px) * und zieht sich damit ueber den Bereich darueber. Zusaetzlich steht * margin-bottom: 450px darunter — ein riesiger Leerraum. * * Beides kommt aus post-5381.css, ist also in Elementor am Element gesetzt. * Auf dem Desktop erzeugt der negative Abstand einen gewollten Ueberlappungs- * Effekt, wo das Band halb ins Bild ragt. Gestapelt auf dem Handy wirkt es * wie ein Fehler. * * Die 450px unten sind der Grund, warum meine Leerflaechen-Pruefung nichts * gefunden hat: Aussenabstaende sind keine Elemente und tauchen in keiner * Element-Messung auf. * * Der :has()-Selektor greift Sektionen, die vier gleiche Spalten enthalten — * also die Kachel-Baender auf allen Seiten, ohne dass jede Seiten-ID einzeln * gepflegt werden muss. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-section:has(> .elementor-container > .elementor-column.elementor-col-25) { margin-top: 24px !important; margin-bottom: 24px !important; } } /* -------------------------------------------------------------------------- * 37) Unterstrich hinter den Kachel-Namen — ERLEDIGT IM INHALT * * Hier stand urspruenglich eine CSS-Regel, die den Unterstrich ausgeblendet * hat. Sie ist entfallen, weil der Strich inzwischen aus dem Inhalt selbst * entfernt wurde — 48 Beschriftungen auf 12 Dokumenten. * * Grund fuer den Wechsel: der Strich war uneinheitlich ausgezeichnet. Auf der * Startseite steckte er in einem eigenen und liess sich per CSS * greifen, auf neun weiteren Seiten stand er als reiner Text — dort war CSS * machtlos. Das Ergebnis waere eine Seite ohne und neun Seiten mit Strich * gewesen. * * Die Aenderung im Inhalt wirkt auf allen Geraeten, also auch auf dem Desktop. * Das war die bewusste Entscheidung: einheitlich ueberall weg statt * uneinheitlich nur auf dem Handy. * * Rueckgaengig: die Dateien doc--elementor_data-vor-Unterstrich.json aus * dem Sicherungsordner zurueckschreiben. * ------------------------------------------------------------------------ */ /* -------------------------------------------------------------------------- * 38) Sektion nach dem Kachel-Band nicht mehr hochziehen * * Nachtrag zu Block 36: die Sektion direkt unter dem Kachel-Band hat * margin-top: -350px. Das war auf die 450px Abstand ausgelegt, die das Band * nach unten hatte — beides zusammen ergab die gewuenschte Position. * * Nachdem Block 36 die 450px auf 24px reduziert hat, ueberlappte die Sektion * das Band um 326px. Der negative Abstand muss also mit weg. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-section:has(> .elementor-container > .elementor-column.elementor-col-25) + .elementor-section { margin-top: 0 !important; } } /* -------------------------------------------------------------------------- * 39) Seitliche Aussenabstaende gestapelter Spalten zuruecknehmen * * Befund am Handy: der Textblock "MW Computer / ist Ihr B2B-Großhandel ..." * haengt schief — 10px Abstand links, aber 60px rechts. * * Ursache: die innere Huelle der Spalte traegt margin-right: 50px. Die Spalte * selbst ist mit 370px korrekt breit, der Inhalt darin aber nur 320px. * * Auf dem Desktop ist das der Abstand zur Nachbarspalte, die rechts daneben * steht. Auf dem Handy stehen die Spalten untereinander — es gibt keinen * Nachbarn mehr, der Abstand schiebt den Text nur noch aus der Mitte. * * Nur unter 768px, also erst wenn Elementor die Spalten ohnehin stapelt. * Senkrechte Abstaende bleiben unberuehrt, die trennen die Spalten jetzt * voneinander. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-column > .elementor-widget-wrap.elementor-element-populated { margin-left: 0 !important; margin-right: 0 !important; } } /* -------------------------------------------------------------------------- * 40) Kachel-Text braucht seitlichen Abstand * * Befund am Handy (/wir-ueber-uns/): das "C" von CASES klebt am linken * Bildschirmrand. Auf dieser Seite laeuft das Kachel-Band randlos von 0 bis * 390px, auf der Startseite hat es dagegen 20px Rand. Der Link fuellt seit * Block 30 die volle Kachelbreite — ohne eigenen Innenabstand sitzt der Text * damit direkt auf der Kante. * * 20px links und rechts geben dem Text Luft, ohne die antippbare Flaeche zu * verkleinern: der Innenabstand gehoert zum Link, die ganze Kachel bleibt * also weiterhin ein Ziel. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > span > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p > a, .elementor-col-25 .elementor-widget-text-editor .elementor-widget-container > p > span > a { padding-left: 20px; padding-right: 20px; box-sizing: border-box; } } /* -------------------------------------------------------------------------- * 41) Sprachumschalter: Abstand zur Telefonnummer, DE und EN als Paar * * Befund am Geraet: "DE" klebt direkt hinter der Telefonnummer, zwischen DE * und EN klafft dagegen eine Luecke. Gemessen waren beide Abstaende 8px — * gleich gross, aber weil DE und EN in 40px breiten Kaesten mittig sitzen, * wirkt der Abstand zwischen ihnen optisch groesser als der zur Nummer. * * DE und EN gehoeren als Paar zusammen und muessen sich deutlich von der * Telefonnummer absetzen. Also: Paar enger, Abstand zur Nummer groesser. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-a9ef226, .elementor-element-a9ef226 > .e-con-inner { gap: 4px !important; } .elementor-element-04d5259 { margin-left: 18px !important; } } /* -------------------------------------------------------------------------- * 42) Burger-Symbol in die Zeile von Herz und Suche holen * * Befund am Geraet: das Burger-Symbol steht in einer eigenen Zeile unter * Herz und Suche statt daneben. * * Ursache ist die Struktur: Herz und Suche liegen im Container 9def39b * innerhalb von f929ada, das Burger-Symbol dagegen in 7366ca6 — einer eigenen * Sektion auf oberster Ebene. Per CSS laesst sich ein Element nicht in einen * anderen Container verschieben; es aus dem Fluss zu nehmen und an die * richtige Stelle zu setzen ist der Weg, der ohne Umbau im Editor auskommt. * * Nebeneffekt: der Header wird um die Hoehe der weggefallenen Zeile kuerzer. * * Die Suchzeile bekommt rechts Platz freigeraeumt, damit das Symbol nicht auf * dem Suchfeld liegt. * * WICHTIG, aus einem Fehlversuch gelernt: der Container darf NICHT absolut * positioniert werden. Er enthaelt das aufklappbare Menue, und ein absolut * positionierter Container wird zum Bezugsrahmen fuer alles darin — das Menue * war dann nur noch 52px breit und klebte am rechten Rand. Das ist exakt das * Fehlerbild, das am Geraet gemeldet wurde. * * Stattdessen bleibt der Container im Fluss und wird nur per negativem * Abstand in die Zeile darueber gezogen. Damit bleibt der Bezugsrahmen fuer * das Menue der Header, und es kann weiterhin ueber die volle Breite * aufklappen. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-location-header { position: relative; } .elementor-element-7366ca6 { /* -54 statt -48: der Burger sass 6px tiefer als Herz und Suche * (Mitte 154 statt 148). Siehe Block 48. */ margin-top: -54px !important; margin-left: 10px !important; margin-right: auto !important; width: 44px !important; padding: 0 !important; /* NICHT auf einen kleinen Wert setzen — siehe Block 47. Der Container * bildet mit position:relative + z-index eine eigene Stapelebene, und * alles darin (auch das Menue) kann hoechstens so weit nach vorn wie * dieser Wert. */ z-index: 9999; } /* Das Symbol selbst bekommt Innenabstand, damit es nicht am Rand klebt — * der Container muss buendig sitzen, damit das Menue daran ausgerichtet * werden kann. */ .elementor-element-7366ca6 .uael-nav-menu__toggle { padding-left: 0; justify-content: center; } .elementor-element-7366ca6 > .e-con-inner { padding: 0 !important; } /* Platz fuer das Symbol am LINKEN Rand der Such-Zeile. * Die Zeile hatte den Platz vorher rechts reserviert; er wandert nur auf * die andere Seite. Dadurch bleibt die Zeile exakt gleich breit (314px) * und weder Suchfeld noch Herz schrumpfen — sie ruecken nur mit. */ .elementor-element-9def39b { /* 60 statt 56: der Burger liegt jetzt bei 10..54, das Herz beginnt * dadurch bei 70 — genau 16px Abstand. Siehe Block 48. */ padding-left: 60px !important; padding-right: 0 !important; box-sizing: border-box; } } /* -------------------------------------------------------------------------- * 43) Geoeffnetes Menue darf die Seite nicht seitlich verschiebbar machen * * Befund am Geraet: bei geoeffnetem Menue und nach unten gescrollter Seite * rutscht das Menue nach rechts, und die ganze Seite laesst sich seitlich * hin- und herschieben. * * Der Fehler tritt erst beim Scrollen auf und laesst sich in einer Browser- * Ansicht ohne echtes Scrollen nicht ausloesen — die Ursache ist deshalb * nicht gemessen, sondern nur eingegrenzt: das Menue ist absolut positioniert, * und offenbar verschiebt sich sein Bezugsrahmen beim Scrollen. * * Zwei Massnahmen, die unabhaengig von der genauen Ursache greifen: * a) Das Menue wird auf volle Viewportbreite gesetzt und am RECHTEN Rand * verankert. Rechts und nicht links, weil sein Bezugsrahmen der schmale * Burger-Container ist, der buendig am rechten Rand sitzt — von dort aus * trifft "right: 0" genau die Bildschirmkante, waehrend "left: 0" das * Menue um die Containerbreite nach rechts versetzt haette. * b) overflow-x: clip am Dokument als Sicherheitsnetz. Bewusst "clip" und * nicht "hidden": clip erzeugt keinen Scroll-Container und laesst * position: sticky weiterhin funktionieren. * * Zu (b) eine Einschraenkung fuer spaetere Pruefungen: das Netz verbirgt auch * echten Overflow. Alle Seiten messen aktuell 0px Ueberstand, es maskiert * also nichts Bestehendes — aber kuenftige Messungen von scrollWidth sind * damit nicht mehr aussagekraeftig. Overflow muss ab jetzt pro Element * geprueft werden. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-fab82f2 nav.uael-dropdown, .elementor-element-fab82f2 nav { left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; } html, body { overflow-x: clip; } } /* -------------------------------------------------------------------------- * 44) Untermenue-Eintraege einheitlich darstellen * * Befund am Geraet: im Produkte-Untermenue fallen "Server" und "Accessoires" * aus der Reihe. Nachgemessen: Topseller, Corporate und Netzteile stehen auf * 19,5px, Server und Accessoires dagegen auf 16px. Auch die Zellenhoehen * schwanken zwischen 67 und 115px. * * Ursache: die Panels sind Elementor-Templates, in denen jeder Eintrag ein * eigenes Widget mit eigener Typografie ist. Beim Anlegen wurden zwei davon * abweichend gesetzt — auf der Desktop-Breite faellt das kaum auf, im * gestapelten Burger-Menue steht es untereinander und springt ins Auge. * * Statt die beiden Ausreisser einzeln zu korrigieren wird die Darstellung im * Menue vereinheitlicht: gleiche Schriftgroesse, gleiche Mindesthoehe. Damit * sitzen auch kuenftig ergaenzte Eintraege automatisch richtig. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-fab82f2 .sub-menu a, .elementor-element-fab82f2 .sub-menu .elementor-heading-title, .elementor-element-fab82f2 .sub-menu .elementor-widget-text-editor, .elementor-element-fab82f2 .sub-menu .elementor-widget-text-editor p { font-size: 18px !important; line-height: 1.3 !important; } .elementor-element-fab82f2 .sub-menu .elementor-column, .elementor-element-fab82f2 .sub-menu .e-con { min-height: 0 !important; } .elementor-element-fab82f2 .sub-menu .elementor-column > .elementor-element-populated { padding-top: 10px !important; padding-bottom: 10px !important; } } /* -------------------------------------------------------------------------- * 45) Filter- und Sortierleiste einheitlich breit * * Befund am Geraet: der Kasten ueber der Produktliste wirkt zerfranst. * Nachgemessen bei 390px: die drei Bedienelemente stehen linksbuendig * untereinander, sind aber unterschiedlich breit — Motherboard 142px, * Casesize 150px, Sortierung 287px. Jedes endet woanders. * * Auf dem Desktop stehen sie nebeneinander in einer Reihe, dort faellt die * unterschiedliche Breite nicht auf. Gestapelt auf dem Handy schon. * * Volle Breite fuer alle drei: gleiche Kante links wie rechts, und die * Trefferflaeche wird nebenbei groesser. Gilt fuer alle Kategorieseiten, * weil die Klassen aus JetSmartFilters und WooCommerce stammen und nicht * seitenspezifisch sind. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .jet-smart-filters-select, .jet-smart-filters-select .jet-filter, .jet-select, .jet-select__control, .woocommerce-ordering, .woocommerce-ordering select, select.orderby { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Gleichmaessiger senkrechter Abstand zwischen den drei Elementen */ .jet-smart-filters-select, .woocommerce-ordering { /* 24px statt 12: dieser Abstand ist ab Block 48 die EINZIGE Quelle * fuer den senkrechten Rhythmus im Filterkasten. Alles andere * dazwischen wird dort auf 0 gesetzt. */ margin-bottom: 24px !important; } /* NACHTRAG: die Breite steckt nicht im Filterelement, sondern im WIDGET * darum. Bei "Casesize" ist es voll breit eingestellt, bei "Motherboard" * nur 142px — zwei Widgets, zwei unterschiedliche Einstellungen. Deshalb * greift die Regel eine Ebene hoeher, am Widget selbst. */ .elementor-widget[class*="jet-smart-filter"], .elementor-widget[class*="jet-filter"] { width: 100% !important; max-width: 100% !important; } /* Filterleiste untereinander statt nebeneinander, damit alle drei * Elemente dieselbe Kante haben */ .elementor-element-44bb2a8 > .e-con-inner { flex-direction: column !important; align-items: stretch !important; } /* Die drei Filter und die Sortierung liegen in zwei verschiedenen * Containern, die beide von 40px bis 350px reichen — aber unterschiedlich * eingerueckt sind: der Filterblock hat 10px Innenabstand links/rechts, * die Sortierung 16px Aussenabstand rechts plus 7.5px am Wrapper. * Dadurch stehen die Elemente um 10px versetzt untereinander. Beide * Einrueckungen raus, dann haben alle vier dieselbe Kante. */ .elementor-element-44bb2a8 { padding-left: 0 !important; padding-right: 0 !important; } .elementor-element-602aa3a { margin-right: 0 !important; } .elementor-element-602aa3a, .elementor-element-df727a6 > .elementor-widget-wrap { padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------------------------- * 46) Negative Abstaende an Bild-Widgets zuruecknehmen * * Befund am Geraet (/wir-ueber-uns/): die Kacheln liegen ueber dem Bild mit * den PC-Gehaeusen. * * Nachgemessen: das Bild reicht von 488 bis 720, seine Sektion endet aber * schon bei 589. Ursache ist margin-bottom: -165px am Bildcontainer. Dadurch * rechnet die Sektion nur 66px statt 231px Hoehe — das Bild ragt 131px heraus, * und das Kachel-Band setzt korrekt 24px unter der (zu kurz gerechneten) * Sektion an, also mitten im Bild. * * Das ist dasselbe Muster wie bei den Kacheln in Block 30: negative Abstaende * erzeugen auf dem Desktop gewollte Ueberlappungen und misslingen, sobald die * Elemente gestapelt sind. * * Zurueckgesetzt werden nur die Abstaende am Widget-CONTAINER von Bildern. * Elementor setzt regulaere Abstaende am Widget selbst, nicht am Container — * hier landen praktisch nur solche Ueberlappungs-Kniffe. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-widget-image > .elementor-widget-container { margin-top: 0 !important; margin-bottom: 0 !important; } } /* -------------------------------------------------------------------------- * 47) Geoeffnetes Menue wird von Seiteninhalten durchstossen * * Befund am Geraet: beim Aufklappen einer Produktkategorie im Burger-Menue * sieht man Teile der Seite durch das Menue hindurch, und das Menue liegt * unter dem Band mit den vier lila Kaesten. * * Es ist NICHT durchsichtig — das war die naheliegende, aber falsche * Vermutung. Gemessen: das Menue hat weissen Hintergrund (rgb 255,255,255), * das Untermenue ebenfalls, Deckkraft 1. Beides ist blickdicht. * * Ursache ist eine Stapelebene. Der Burger-Container 7366ca6 hat * position: relative und einen z-index — damit bildet er eine eigene Ebene, * und alles darin kann nur INNERHALB dieser Ebene nach vorn kommen. Das Menue * traegt zwar z-index 9999, aber dieser Wert gilt nur gegenueber seinen * Geschwistern im Container. Nach aussen zaehlt allein der Wert des * Containers. Der stand auf 5. * * Auf der Startseite liegen darueber: * - 2a3a069, z-index 10 — das Band mit den vier lila Kaesten * (Farbe rgb 160,53,109; CASES / SERVER / NETZTEILE / ACCESSOIRES) * - a5490a6, z-index 11 — Element direkt unterhalb des Headers * * Aufgeklappt reicht das Menue von y=166 bis y=876 und ueberlappt damit * beide. Da 10 und 11 groesser sind als 5, werden sie VOR dem Menue * gezeichnet und stanzen sich hindurch. Genau das ist das gemeldete Bild. * * Die Behebung steht in Block 42: der z-index des Containers geht auf 9999. * Hier stehen zusaetzlich die Sicherungen, damit der Effekt nicht ueber * einen anderen Weg zurueckkommt. * * Merksatz fuer spaeter: ein hoher z-index am Menue selbst bringt nichts, * solange der Container darum eine niedrigere Ebene aufmacht. Der Wert muss * immer an dem Element stehen, das die Stapelebene erzeugt. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* Das Menue und alle seine Ebenen blickdicht halten. Sicherung fuer den * Fall, dass ein Untermenue keinen eigenen Hintergrund erbt. */ .elementor-element-fab82f2 nav, .elementor-element-fab82f2 nav ul, .elementor-element-fab82f2 nav ul ul { background-color: #ffffff; } /* Das aufgeklappte Menue vor alle Seiteninhalte legen. Der Wert steht am * Container, weil nur er nach aussen zaehlt. */ .elementor-element-7366ca6, .elementor-element-fab82f2 { z-index: 9999 !important; } } /* -------------------------------------------------------------------------- * 48) Gleichmaessige Abstaende in Kopfzeile, Menue und Filterkasten * * Vier Befunde vom Geraet, alle mit derselben Wurzel: gemessen wurden bisher * die KAESTEN, sichtbar ist aber der INHALT darin. Beides faellt auseinander, * sobald ein Element mittig in einem groesseren Kasten sitzt. * * ---- a) DE und EN: ungleiche Abstaende ---- * Gemessen an den sichtbaren Buchstaben: * Telefon -> DE: 0.4px DE -> EN: 22.2px * In der Runde davor hatte ich die Kaesten gemessen (22px und 4px) und * Vollzug gemeldet. Das war falsch — die Kaesten stimmten, die Schrift nicht. * * Ursachen, zwei Stueck: * 1. Die Antippflaechen von DE und EN sind 44px breit, die Beschriftung nur * 21px. Die 11.5px Luft links und rechts kommen zum Kastenabstand hinzu. * 2. Der Telefontext ist mit 299px breiter als sein eigener Kasten (266px) * und laeuft 33px darueber hinaus, direkt in das DE hinein. Deshalb der * Abstand von 0.4px. * * Rechnung fuer gleiche Abstaende bei 44px-Flaechen: * sichtbar(DE->EN) = (Flaeche - Schrift) + Kastenabstand * sichtbar(Telefon->DE) = Kastenabstand + (Flaeche - Schrift) / 2 * Mit 40px Flaeche, 21px Schrift, 0px zwischen DE und EN und 10px vor DE: * DE -> EN = 40 - 21 = 19.0px * Telefon -> DE = 10 + 19 / 2 = 19.5px * Die Flaeche geht von 44 auf 40px. Das bleibt deutlich ueber den 24px, die * die Barrierefreiheits-Richtlinie als Mindestmass nennt; die Hoehe bleibt * bei 44px. * * Damit der Telefontext in den verbleibenden Platz passt, skaliert seine * Schrift mit der Fensterbreite statt fest bei 13px zu stehen. * * ---- b) Burger, Herz und Suche stehen ungleichmaessig ---- * Gemessen: Burger-Symbol 25px gross, Mitte auf Hoehe 154. Herz-Symbol 22px, * Mitte auf 148. Der Burger sass also 6px tiefer und war groesser. * Waagerecht: Symbol endet bei 42.5, Herz beginnt bei 78 — dazwischen 35.5px, * zwischen Herz und Suchfeld dagegen nur 20px. * Jetzt: beide Symbole 22px, beide Flaechen 44px hoch auf gleicher Mitte, * Kaesten bei 10..54, 70..114 und 130..380 — also durchgaengig 16px. * * ---- c) Menue: "Server" und "Accessoires" haben zu hohe Zeilen ---- * Abstaende zwischen den Eintraegen gemessen: 23, 18, 54, 18. * Ursache: bei "Server" und "Accessoires" steckt der Link in einem

mit * 31.5px Aussenabstand unten, bei den anderen dreien nicht. Dieselbe * uneinheitliche Auszeichnung wie schon bei den Kacheln — die Eintraege sind * einzeln gepflegt worden. * Dazu kommen 80px Leerflaeche ueber dem ersten und 82px unter dem letzten * Eintrag, aus 45px Innenabstand des Abschnitts plus 25px Aussenabstand. * * ---- d) Filterkasten: Loch zwischen den Filtern, Sortierung anders ---- * Zwischen "Motherboard" und "Casesize" klaffen 52px. Darin steckt ein * DRITTES Filter-Widget (Filter 12998), das gar nichts anzeigt: kein * Auswahlfeld, keine Optionen. Es ist 12px hoch und traegt zweimal 20px * Abstand bei — zusammen die 52px. * Das leere Filterfeld ist ein Datenproblem und steht auf der Weitergabe- * Liste. Hier wird es nur ausgeblendet, damit kein Loch bleibt. Die Regel * greift ueber ":has" und blendet nur aus, was wirklich leer ist — sobald der * Filter Werte bekommt, erscheint er von allein wieder. * Ausserdem war die Sortierung anders gestaltet als die beiden Filter: * durchsichtiger Hintergrund, weisse Schrift, weisser Rahmen, keine * Eckenrundung — auf dem tuerkisen Grund kaum als Bedienelement erkennbar. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* ---- a) Sprachumschalter ---- */ .elementor-element-07fa5ca, .elementor-element-07fa5ca a, .elementor-element-07fa5ca .elementor-heading-title { font-size: clamp(9px, 3vw, 13px) !important; } .elementor-element-a9ef226 > .e-con-inner { gap: 0 !important; justify-content: flex-start !important; } /* Der Textkasten der Telefonzeile war breiter als sein Inhalt (290px * Kasten, 279.5px Text). Die 10.5px Rest kamen als zusaetzliche Luecke * vor dem DE oben drauf — gemessen 30px statt der gerechneten 19.5px. * Mit max-content umschliesst der Kasten genau den Text, damit der * eingestellte Abstand auch der sichtbare ist. */ .elementor-element-07fa5ca { flex: 0 0 auto !important; width: max-content !important; max-width: 100% !important; } .elementor-element-04d5259 { margin-left: 10px !important; } .elementor-element-8c66a80 { margin-left: 0 !important; } .elementor-element-04d5259 a, .elementor-element-8c66a80 a { min-width: 40px !important; width: 40px !important; } /* ---- b) Burger, Herz und Suche ---- */ .elementor-element-fab82f2 .uael-nav-menu__toggle svg, .elementor-element-fab82f2 .uael-nav-menu__toggle i { font-size: 22px !important; width: 22px !important; height: 22px !important; } .elementor-element-9def39b > .e-con-inner { gap: 16px !important; /* Die Zeile darf nicht umbrechen. Mit erlaubtem Umbruch hat das * wachsende Suchfeld das Herz bei 360px in eine zweite Zeile * gedraengt (Herz auf Hoehe 186 statt 126, Zeile 104px statt 44px * hoch). Bei 390px ging es zufaellig gerade noch auf. */ flex-wrap: nowrap !important; } /* Das Suchfeld fuellt den Rest der Zeile, damit das Herz an der linken * Kante des Inhaltsbereichs steht und der Abstand nicht vom Zufall der * Zentrierung abhaengt. * "1 1 0" statt "1 1 auto": mit auto geht das Feld von seiner eigenen * Wunschbreite aus und waechst darueber hinaus — bei knappem Platz * verdraengt es dann das Herz. Mit 0 als Ausgangsbreite nimmt es nur, * was nach Herz und Abstand uebrig bleibt. */ .elementor-element-168d95c { flex: 1 1 0 !important; min-width: 0 !important; } /* ---- c) Menue-Eintraege ---- */ .elementor-element-fab82f2 nav p { margin: 0 !important; } .elementor-element-fab82f2 nav .elementor-widget-container, .elementor-element-fab82f2 nav .elementor-widget { margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-element-fab82f2 nav .elementor-widget-wrap.elementor-element-populated { padding-top: 0 !important; padding-bottom: 0 !important; } .elementor-element-fab82f2 nav .elementor-widget a { display: flex !important; align-items: center; min-height: 48px !important; } /* Leerflaeche ueber dem ersten und unter dem letzten Eintrag */ .elementor-element-fab82f2 nav .elementor-section { margin-top: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* ---- d) Filterkasten ---- */ /* Sortierung genauso gestalten wie die beiden Filter darueber */ .woocommerce-ordering select.orderby, .woocommerce-ordering .jet-select__control { background-color: #ffffff !important; color: #666666 !important; border: 1px solid #dddddd !important; border-radius: 3px !important; min-height: 44px !important; } } /* -------------------------------------------------------------------------- * 48b) Filterkasten — nur Handy * * Diese Regeln stapeln die Bedienelemente untereinander und richten ihren * senkrechten Abstand aus. Sie gehoeren AUSSCHLIESSLICH ans Handy: ab 768px * stehen die Filter nebeneinander in einer Reihe, und der auf 0 gesetzte * Abstand haette sie dort direkt aneinandergeklebt. * * Die Grenze 767px ist dieselbe wie in Block 45 — beide Bloecke beschreiben * dieselbe gestapelte Anordnung und muessen zusammen gelten. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* Der Abstand zwischen den Bedienelementen kam vorher aus drei Quellen: * dem Abstand des Behaelters, dem Aussenabstand der Filter und den * Innenabstaenden des Sortierungs-Blocks, der in einer eigenen Spalte * liegt. Ergebnis waren 24px zwischen den Filtern, aber 37px vor der * Sortierung. Deshalb: alle Quellen ausser einer auf 0, den Rhythmus * gibt allein der Aussenabstand der Bedienelemente vor (Block 45). */ .elementor-element-44bb2a8 > .e-con-inner { gap: 0 !important; } .elementor-element-44bb2a8, .elementor-element-44bb2a8 > .e-con-inner, .elementor-element-64b224b, .elementor-element-64b224b > .e-con-inner { padding-bottom: 0 !important; margin-bottom: 0 !important; } .elementor-element-64b224b > .e-con-inner { gap: 0 !important; } /* Letzter Rest: die Huelle um den Filterblock heisst hier * "elementor-widget-wrap" und nicht "e-con-inner" — sie wurde von den * Regeln darueber nicht getroffen und brachte 7.5px unten mit. */ .elementor-element-64b224b > .elementor-widget-wrap { padding-bottom: 0 !important; } .elementor-element-df727a6, .elementor-element-df727a6 > .elementor-widget-wrap { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Filter ohne Auswahlfeld ausblenden — nur wirklich leere */ .elementor-widget[class*="jet-smart-filter"]:not(:has(select)):not(:has(.jet-select__control)) { display: none !important; } /* Die Sortierung ist ein umflossenes (float) Formular aus WooCommerce. * Umflossene Elemente zaehlen nicht zur Hoehe ihres Elternteils: das * Widget blieb 10px hoch, obwohl das Formular 44px misst, und ragte * 34px unten aus dem Kasten heraus. Genau daher kam auch der * ungleiche Abstand — der Kasten endete vor dem Bedienelement. * Das Umfliessen aufheben, dann traegt die Sortierung ihre Hoehe * selbst und reiht sich normal unter die Filter ein. */ .woocommerce-ordering { float: none !important; width: 100% !important; } /* Der eigentliche Grund: das Sortierungs-Widget hat in Elementor eine * feste Hoehe von 10px eingestellt (post-13728.css), das Bedienelement * darin misst aber 44px. Es ragte deshalb 34px unten aus dem Kasten * heraus, und der Abstand darueber liess sich nicht geradeziehen, weil * der Kasten schon vor dem Element endete. */ .elementor-element-602aa3a { height: auto !important; min-height: 0 !important; } } /* -------------------------------------------------------------------------- * 49) Gequetschte Ueberschrift und fehlende Luecke unter der Kopfzeile * * ---- a) "PC-GEHÄUSE FÜR JEDEN EINSATZ" ist zusammengequetscht ---- * Gemessen an Widget 433b978: * Schriftgroesse 34px, Zeilenhoehe 26.4px (Verhaeltnis 0.78) * Die Zeilenhoehe ist also KLEINER als die Schrift hoch ist. Bei einer * einzeiligen Ueberschrift faellt das nicht auf — sobald der Text auf dem * Handy aber zweizeilig umbricht, ruecken die Zeilen ineinander und die * Ober- und Unterlaengen beruehren sich. Genau das ist auf dem Geraet zu * sehen. * * Auf dem Desktop passt die Ueberschrift in eine Zeile, deshalb ist der * Wert dort nie aufgefallen. Es ist also kein Fehler, den jemand gemacht * hat, sondern eine Einstellung, die erst beim Umbruch sichtbar wird. * * 1.25 statt eines festen Pixelwertes, damit die Zeilenhoehe mitwaechst, * falls die Schriftgroesse spaeter geaendert wird. * * Zusaetzlich bekommt der farbige Kasten 20px Innenabstand statt 10px — * bei einer 34px grossen Ueberschrift wirken 10px wie kein Abstand. * * Zur Kontrolle wurde die ganze Startseite nach Textstellen durchsucht, bei * denen die Zeilenhoehe kleiner als die Schriftgroesse ist. Es gibt genau * diese eine. * * ---- b) Keine Luecke zwischen Kopfzeile und erstem Kasten ---- * Der Inhaltsbereich (#content) beginnt exakt an der Unterkante der * Kopfzeile: beide bei 170px, Abstand 0. Der blaue Kasten klebt dadurch * direkt an der Zeile mit Burger, Herz und Suche. * * Der Abstand kommt an #content und nicht an den einzelnen Kasten, weil * jede Seitenart dort etwas anderes beginnt — Startseite einen tuerkisen * Kasten, Kategorieseiten das Titelband, Inhaltsseiten einen Text. So gilt * die Luecke ueberall gleich und muss nicht je Seite gepflegt werden. * ------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* ---- a) Ueberschrift im hellblauen Kasten ---- */ .elementor-element-433b978, .elementor-element-433b978 * { line-height: 1.25 !important; } .elementor-element-c9ef6ec > .elementor-widget-wrap { padding: 20px !important; } /* ---- b) Luecke unter der Kopfzeile ---- */ #content.site-content { padding-top: 16px !important; } } /* -------------------------------------------------------------------------- * 52) Grosser Freiraum zwischen Kachelband und dem Text darunter * * Befund am Geraet: Unter den pinken Kacheln klafft eine grosse Luecke, * bevor der Text beginnt. * * Gemessen bei 390px — 243px Leerraum, zusammengesetzt aus: * * 20px Innenabstand unten am Kachelband * 24px Aussenabstand unten am Kachelband * 10px Innenabstand der Huelle im folgenden Abschnitt * 148px Aussenabstand oben an der Textspalte <- der Brocken * 19.5px Aussenabstand des Ueberschriften-Widgets * 20px Innenabstand des Ueberschriften-Widgets * * Die 148px stehen in post-5381.css OHNE Medienabfrage, gelten also auf * allen Bildschirmbreiten. Auf dem Desktop haben sie einen Zweck: dort * stehen zwei Spalten nebeneinander, und der Abstand schiebt die Textspalte * so weit herunter, dass sie zur Nachbarspalte passt. Sobald die Spalten auf * dem Handy untereinander stehen, richtet er nichts mehr aus und wird zum * Loch. * * Deshalb nur bis 767px zuruecknehmen. Ab 768px bleibt alles wie bisher. * * Zusaetzlich faellt der Innenabstand von 20px ueber der Ueberschrift weg. * Der Aussenabstand von 19.5px bleibt — der ist der normale Abstand ueber * einer Ueberschrift und soll erhalten bleiben. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-element-bf51083 > .elementor-widget-wrap { margin-top: 0 !important; } .elementor-element-ac5dfd0 > .elementor-widget-container { padding-top: 0 !important; } } /* -------------------------------------------------------------------------- * 53) Blauer Kasten oben: Foto als Hintergrund (Variante C) * * Ausgangslage, gemessen bei 390px — der Kasten war 562px hoch, also 13% der * ganzen Seite, fuer ein Logo, einen Satz und ein Foto: * * Logo-Widget a5490a6 101px (Logo selbst nur ~56px, Rest leer) * Text-Widget 3eebd277 206px fuer EINEN Satz * Foto-Spalte 3caa3fdf 185px * * Der Text war der eigentliche Fehler: Zeilenabstand 60px bei 16px Schrift, * also mehr als das Dreifache. Dazu drei fest eingebaute Zeilenumbrueche * (
), die fuer die Desktop-Breite gewaehlt wurden. Auf dem Handy riss * das den Satz auseinander — genau der Eindruck "abgehackt", der schon in * der ersten Rueckmeldung stand. * * Variante C, gemeinsam ausgewaehlt: Das Foto fuellt die ganze Flaeche, * darueber liegt das Blau durchscheinend, Logo und Satz stehen darauf. * * Der Aufbau bleibt unangetastet — es wird nichts verschoben oder * geloescht. Die Foto-Spalte wird nur aus dem Fluss genommen und hinter die * Textspalte gelegt. Faellt dieses Stylesheet aus, stehen wieder alle drei * Teile untereinander wie bisher. * * Die festen Zeilenumbrueche lassen sich per CSS nicht entfernen, aber * ausblenden (br { display: none }). Der Satz umbricht dann von selbst * passend zur Bildschirmbreite. * * Nur bis 767px. Ab 768px stehen die beiden Spalten nebeneinander wie * bisher; dort bleibt alles unveraendert. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* ---- Die Buehne ---- * Der Abschnitt hat links und rechts einen 40px breiten WEISSEN RAHMEN * (border, kein Innenabstand) — das ist der weisse Rand, der den blauen * Kasten heute einfasst. * * Der Rahmen ist der Grund, warum das Foto zunaechst nur von 40 bis 350 * reichte statt von 0 bis 390: Ein absolut gesetztes Element richtet sich * am INNENBEREICH seines Bezugsrahmens aus, und der Rahmen schneidet auf * beiden Seiten 40px davon ab. Gemessen: clientWidth 310, clientLeft 40. * * In der ausgewaehlten Variante geht das Bild bis an beide Kanten, * deshalb faellt der Rahmen auf dem Handy weg. Den seitlichen Abstand * uebernimmt jetzt die Textspalte. Ab 768px bleibt der weisse Rand. */ .elementor-element-beeec2a { position: relative; overflow: hidden; } /* Der Rahmen steht in post-5381.css als * .elementor-5381 .elementor-element.elementor-element-beeec2a * also mit DREI Klassen. Eine Regel mit nur einer Klasse verliert dagegen * auch mit "!important" — nachgemessen, der Rahmen blieb bei 40px. * Deshalb hier die Kennung dreifach plus "html body": drei Klassen und * zwei Elemente schlagen drei Klassen. */ html body .elementor-element-beeec2a.elementor-element-beeec2a.elementor-element-beeec2a { border-left-width: 0 !important; border-right-width: 0 !important; } /* Auf der ENGLISCHEN Startseite hat der Container eine Mindesthoehe von * 770px — eine Elementor-Einstellung, die es auf der deutschen Seite * nicht gibt. Beide Sprachen teilen sich dieselben Element-Kennungen, * also greifen unsere Regeln dort mit; ohne diese Zeile waere der blaue * Kasten auf Englisch 770px statt 270px hoch geblieben. * Die Hoehe gibt jetzt in beiden Sprachen die Textspalte vor. */ html body .elementor-element-beeec2a.elementor-element-beeec2a > .elementor-container { min-height: 0 !important; } /* ---- Foto: aus dem Fluss nehmen und die Flaeche fuellen ---- */ .elementor-element-beeec2a > .elementor-container > .elementor-element-3caa3fdf { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 0; } .elementor-element-3caa3fdf > .elementor-widget-wrap, .elementor-element-3caa3fdf .elementor-widget-image, .elementor-element-3caa3fdf .elementor-widget-container { height: 100% !important; margin: 0 !important; padding: 0 !important; } /* "cover" statt Verzerren: das Bild fuellt die Flaeche und behaelt sein * Seitenverhaeltnis, ueberstehende Raender werden beschnitten */ .elementor-element-3caa3fdf img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } /* ---- Der blaue Schleier ueber dem Foto ---- * Oben dichter als unten, damit Logo und Text sicher lesbar bleiben und * die Gehaeuse unten trotzdem zu erkennen sind. */ .elementor-element-3caa3fdf::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( 180deg, rgba(24, 128, 163, 0.94) 0%, rgba(24, 128, 163, 0.86) 55%, rgba(24, 128, 163, 0.72) 100% ); pointer-events: none; } /* ---- Logo und Text darueber ---- */ .elementor-element-beeec2a > .elementor-container > .elementor-element-4d133a1c { position: relative; z-index: 2; width: 100% !important; max-width: 100% !important; } .elementor-element-4d133a1c > .elementor-widget-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px; min-height: 240px; padding: 28px 24px !important; } .elementor-element-a5490a6 { margin: 0 !important; width: auto !important; } .elementor-element-a5490a6 img { width: 190px !important; height: auto !important; } .elementor-element-3eebd277, .elementor-element-3eebd277 > .elementor-widget-container { margin: 0 !important; /* Die Huelle hatte links 8px Innenabstand — dadurch sass der ganze * Satz um 4px aus der Mitte. Faellt bei mittig gesetztem Text sofort * auf, weil das Logo darueber exakt mittig steht. */ padding: 0 !important; width: 100% !important; } .elementor-element-3eebd277 p { margin: 0 !important; font-size: 18px !important; /* 1.4 statt der bisherigen 60px */ line-height: 1.4 !important; font-weight: 500; text-align: center; /* verteilt die Zeilen gleichmaessig, statt eine kurze Restzeile * stehen zu lassen */ text-wrap: balance; } /* Die drei fest eingebauten Umbrueche ausblenden — sie waren fuer die * Desktop-Breite gesetzt */ .elementor-element-3eebd277 br { display: none; } } /* -------------------------------------------------------------------------- * 50) Kachelbaender: Symbol oben, Text darunter, vier nebeneinander * * Vorgabe: Symbol oben, Beschriftung darunter, kleiner, und alle vier in * einer Reihe nebeneinander. * * Gilt fuer BEIDE Kachelbaender: * 2a3a069 Startseite, pinke Flaechen * 5683bef Wir ueber uns, dunkelblaue Flaechen (rgb 10,53,96) * Die Farben bleiben jeweils wie gehabt — nur die Anordnung aendert sich. * Beide Abschnitte haben eine fest eingestellte Hoehe (190px bzw. 284px), * die auf dem Handy weichen muss, sonst bliebe unter den nur noch 81px * hohen Kacheln ein leeres Band stehen. * * ---- Warum die seitlichen Abstaende schrumpfen mussten ---- * Vier Kacheln nebeneinander sind auf dem Handy sehr schmal. Ausgerechnet: * * 390px Bildschirm, 20px Rand, 8px Abstand -> Kachel 82px * 390px Bildschirm, 10px Rand, 6px Abstand -> Kachel 88px * 360px Bildschirm, 10px Rand, 6px Abstand -> Kachel 80px * * "Accessoires" ist mit 11 Zeichen das laengste Wort und laesst sich nicht * umbrechen. Gemessen in Montserrat: * * 12px Schrift -> 71px 13px Schrift -> 77px 14px -> 82px * * Mit 10px Rand und 6px Abstand bleiben nach Abzug des Innenabstands rund * 80px (bei 390px) bzw. 72px (bei 360px) fuer das Wort. Deshalb waechst die * Schrift mit: clamp(11px, 3.3vw, 13px) ergibt 11.9px bei 360 und 12.9px bei * 390 — beides passt mit Luft. Bei 14px waere es bei 390px auf 1px genau * aufgegangen und bei 360px uebergelaufen. * * Das englische "Power supplies" ist zwar breiter, enthaelt aber ein * Leerzeichen und bricht von selbst auf zwei Zeilen um. * * ---- Die feste Hoehe von 190px ---- * Sie muss weg, sonst bliebe unter den nur noch ~78px hohen Kacheln ein * leeres Band stehen. Der Abschnitt richtet sich jetzt nach seinem Inhalt. * * ---- Zu den Symbolen ---- * Sie stehen als Zeichnung direkt in dieser Datei (SVG als Datenadresse) — * keine zusaetzlichen Bilddateien, nichts nachzuladen, und sie sind * beliebig scharf. Farbe ist Weiss wie die Beschriftung. * * ---- Zwei Auszeichnungen, ein Aussehen ---- * Auf Deutsch steckt die Beschriftung in einem Link, auf Englisch nur in * einem Absatz ohne Link (siehe Weitergabe-Liste). Deshalb wird beides * angesprochen: wo ein Link vorhanden ist, bekommt er die Kachel und ist * ganzflaechig antippbar; wo keiner ist, uebernimmt die Huelle. * * Nur bis 767px. Ab 768px bleibt alles wie bisher. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* ---- Der Abschnitt richtet sich nach dem Inhalt ---- */ html body .elementor-element-2a3a069.elementor-element-2a3a069.elementor-element-2a3a069, html body .elementor-element-5683bef.elementor-element-5683bef.elementor-element-5683bef { height: auto !important; min-height: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } /* ---- Vier nebeneinander ---- */ .elementor-element-2a3a069 > .elementor-container, .elementor-element-5683bef > .elementor-container { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 6px !important; } .elementor-element-2a3a069 > .elementor-container > .elementor-column, .elementor-element-5683bef > .elementor-container > .elementor-column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } /* ---- Die pinke Flaeche ---- */ /* Die Kennung steht dreifach, weil post-6221.css die Rundung mit VIER * Klassen auf 0 setzt (.elementor-6221 .elementor-element * .elementor-element-c386c6c > .elementor-widget-wrap). Eine Regel mit * zwei Klassen verliert dagegen — nachgemessen, die Ecken blieben eckig. * Auf der Startseite gab es diese Gegenregel nicht, dort hatte es auf * Anhieb gepasst. */ html body .elementor-element-2a3a069.elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-wrap, html body .elementor-element-5683bef.elementor-element-5683bef.elementor-element-5683bef .elementor-widget-wrap { height: 100%; padding: 0 !important; border-radius: 10px !important; overflow: hidden; display: flex !important; align-items: stretch; } .elementor-element-2a3a069 .elementor-widget, .elementor-element-5683bef .elementor-widget, .elementor-element-2a3a069 .elementor-widget-container, .elementor-element-5683bef .elementor-widget-container { width: 100%; margin: 0 !important; padding: 0 !important; } /* ---- Kachelinhalt: Symbol oben, Text darunter ---- * Zwei Faelle: mit Link (deutsch) und ohne Link (englisch). */ html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-wrap a, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-wrap a, html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-container:not(:has(a)), html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-container:not(:has(a)) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px; min-height: 78px !important; height: 100%; padding: 10px 4px !important; /* NACHGERECHNET UND KORRIGIERT: Meine erste Rechnung ging von der * Schreibweise im Quelltext aus ("Accessoires", 77px bei 13px). * Dargestellt werden die Beschriftungen aber in GROSSBUCHSTABEN, und * die sind deutlich breiter — gemessen 118px bei 12.9px Schrift, bei * 79px verfuegbarem Platz. Der Text lief also ueber und wurde * abgeschnitten. * * Um "ACCESSOIRES" in Grossbuchstaben unterzubringen, waeren rund * 8.6px Schrift noetig — unlesbar. Deshalb entfallen auf dem Handy * die Grossbuchstaben. In normaler Schreibweise braucht das Wort bei * 12px nur 71px und passt mit 8px Luft. Auf dem Tablet und Desktop * bleiben die Grossbuchstaben. */ /* "capitalize" statt "none": Auf den englischen Seiten stehen die * Beschriftungen im Quelltext uneinheitlich — "Cases" gross, aber * "server" und "accessories" klein. Solange sie in Grossbuchstaben * gesetzt waren, ist das nicht aufgefallen. Ohne Gegenmassnahme * stuenden jetzt drei verschiedene Schreibweisen nebeneinander. * Das ist ein NOTBEHELF — richtig waere, die Texte im Editor zu * korrigieren; steht auf der Weitergabe-Liste. */ text-transform: capitalize !important; /* Die Sperrung muss auch weg: 2.3px je Buchstabe machen bei den elf * Zeichen von "Accessoires" zusaetzliche 25px — gemessen 96px statt * der gerechneten 71px. Genau diese Differenz liess den Text * ueberlaufen. Ohne Sperrung passt er mit rund 4px Luft je Seite. */ letter-spacing: 0 !important; font-size: clamp(11px, 3.1vw, 12px) !important; line-height: 1.2 !important; font-weight: 500; text-align: center; text-decoration: none; overflow-wrap: break-word; } /* Das Symbol als Zeichnung vor dem Text */ html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-wrap a::before, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-wrap a::before, html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-container:not(:has(a))::before, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-container:not(:has(a))::before { content: ""; flex: 0 0 auto; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Auch die inneren Huellen duerfen die Schriftgroesse nicht ueberschreiben */ html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-wrap span, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-wrap span, html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-wrap p, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-wrap p, html body .elementor-element-2a3a069.elementor-element-2a3a069 .elementor-widget-text-editor, html body .elementor-element-5683bef.elementor-element-5683bef .elementor-widget-text-editor { font-size: clamp(11px, 3.1vw, 12px) !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin: 0 !important; text-align: center; text-transform: capitalize !important; } /* ---- Die vier Symbole ---- * Die dritte Kachel hat je Sprache eine andere Kennung: * 64330b9 auf Deutsch, 8f98615 auf Englisch. */ /* Cases — Gehaeuseturm */ .elementor-element-4d13a3e a::before, .elementor-element-4d13a3e .elementor-widget-container:not(:has(a))::before, .elementor-element-c386c6c a::before, .elementor-element-c386c6c .elementor-widget-container:not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='1.5'/%3E%3Cpath d='M9 6h6M9 9h6'/%3E%3Ccircle cx='12' cy='17' r='1.6'/%3E%3C/svg%3E"); } /* Server — Racheinschuebe */ .elementor-element-d66a5e2 a::before, .elementor-element-d66a5e2 .elementor-widget-container:not(:has(a))::before, .elementor-element-a6c610f a::before, .elementor-element-a6c610f .elementor-widget-container:not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='5' rx='1.2'/%3E%3Crect x='2.5' y='15' width='19' height='5' rx='1.2'/%3E%3Cpath d='M5.5 6.5h.01M5.5 17.5h.01'/%3E%3C/svg%3E"); } /* Netzteile / Power supplies — Netzteil mit Blitz */ .elementor-element-64330b9 a::before, .elementor-element-64330b9 .elementor-widget-container:not(:has(a))::before, .elementor-element-82b8a49 a::before, .elementor-element-82b8a49 .elementor-widget-container:not(:has(a))::before, .elementor-element-8f98615 a::before, .elementor-element-8f98615 .elementor-widget-container:not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='1.5'/%3E%3Cpath d='M13 9l-3 4h3l-1 3'/%3E%3Ccircle cx='17' cy='9.5' r='1.2'/%3E%3C/svg%3E"); } /* Accessoires — Stecker */ .elementor-element-a2ab6ca a::before, .elementor-element-a2ab6ca .elementor-widget-container:not(:has(a))::before, .elementor-element-4f73946 a::before, .elementor-element-4f73946 .elementor-widget-container:not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6.5 8h11v3a5.5 5.5 0 0 1-11 0z'/%3E%3Cpath d='M12 16.5V21'/%3E%3C/svg%3E"); } } /* -------------------------------------------------------------------------- * 54) Fussbereich auf dem Handy verdichten (Variante C) * * Ausgangslage, gemessen bei 390px: der Fussbereich war 1274px hoch — ein * DRITTEL der ganzen Seite. Aufgeteilt in: * * Firmenblock 447px Ueberschrift, langer Text, Symbole, Copyright * "Kontaktieren" 370px Firmenname, Anschrift, Telefon, Fax, Mail * "Sprechen Sie" 244px Anschrift, Mail, Telefon (Teilmenge davon) * Rechtsleiste 162px vier Links * * Am Inhalt wurde bereits geaendert (siehe Protokoll): Firmentext auf den * ersten Satz gekuerzt, die doppelte Kontaktspalte auf dem Handy * ausgeblendet, Firmenname und Fax in die Kontaktliste uebernommen. * Danach: 786px. Dieser Block holt den Rest ueber die Abstaende. * * Nur bis 767px. Auf Tablet und Desktop bleibt der Fussbereich wie er ist — * dort stehen die Spalten nebeneinander und die Hoehe ist kein Problem. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* ---- Aeussere Abstaende des Hauptblocks ---- */ .elementor-location-footer .elementor-element-02c57ff { padding-top: 26px !important; padding-bottom: 10px !important; } .elementor-location-footer .elementor-element-02c57ff > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } /* ---- Abstand zwischen den verbliebenen Bloecken ---- */ .elementor-location-footer .elementor-element-82d7a56 { margin-bottom: 20px !important; } /* ---- Ueberschriften ---- */ .elementor-location-footer .elementor-widget-heading { margin-bottom: 8px !important; } .elementor-location-footer .elementor-heading-title { font-size: 15px !important; line-height: 1.3 !important; margin: 0 !important; } /* ---- Firmentext ---- */ .elementor-location-footer .elementor-element-0c5c649, .elementor-location-footer .elementor-element-0c5c649 p { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; } /* ---- Symbole und Copyright dichter an den Text ---- */ .elementor-location-footer .elementor-element-17aff2c { margin: 12px 0 10px !important; } .elementor-location-footer .elementor-element-492f23c, .elementor-location-footer .elementor-element-492f23c p { font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 !important; opacity: .85; } /* ---- Kontaktliste ---- */ .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-item { margin-bottom: 8px !important; /* Jede Zeile hatte zusaetzlich 12px Innenabstand unten — bei drei * Zeilen 36px, die niemand sieht. */ padding-bottom: 0 !important; } /* Die Symbolspalte war 66px breit fuer ein 21px grosses Symbol. */ .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-icon { width: 26px !important; margin-right: 8px !important; } .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-text { font-size: 13.5px !important; line-height: 1.45 !important; } /* ---- Rechtsleiste: eine Zeile statt untereinander ---- * Es gibt ZWEI Menue-Widgets, eines fuer Handy und eines fuer Desktop; * sichtbar ist immer nur eines. Die Regel spricht deshalb beide an. */ .elementor-location-footer .elementor-element-c55d2a5 { padding-top: 12px !important; padding-bottom: 12px !important; } .elementor-location-footer .elementor-element-c55d2a5 .elementor-nav-menu { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2px 18px; } .elementor-location-footer .elementor-element-c55d2a5 .elementor-nav-menu li { margin: 0 !important; } /* Antippflaeche: 24px sind das Mindestmass der Barrierefreiheits- * Richtlinie. Ohne den Innenabstand waeren die Links nur 15px hoch — * im Entwurf nachgemessen. */ .elementor-location-footer .elementor-element-c55d2a5 .elementor-item { padding: 7px 0 !important; font-size: 13px !important; line-height: 1.3 !important; } } /* -------------------------------------------------------------------------- * 55) Fussbereich: eine gemeinsame linke Kante * * Befund am Geraet: "alles mittig, sieht nicht gut aus". * * Gemessen bei 390px — die sichtbaren Textzeilen begannen an DREIZEHN * verschiedenen Stellen: * * 17 25 55 93 103 105 108 110 124 132 157 164 321 * * Die Ursache ist eine Mischung: Ueberschrift, Firmentext und Copyright sind * mittig gesetzt, die Kontaktliste und die Rechtsleiste linksbuendig. Beim * mittig gesetzten Fliesstext beginnt zudem jede Zeile woanders — bei einem * mehrzeiligen Absatz wirkt das unruhig. * * Auf schmalen Geraeten liest sich linksbuendig ruhiger, weil alle Zeilen an * derselben Kante beginnen. Deshalb bekommt der ganze Fussbereich EINE Kante * bei 20px — passend zum uebrigen Seiteninhalt. * * Nur bis 767px. Auf Tablet und Desktop bleibt die bisherige Ausrichtung. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* ---- Alles linksbuendig ---- */ .elementor-location-footer .elementor-element-02c57ff, .elementor-location-footer .elementor-element-02c57ff .elementor-widget, .elementor-location-footer .elementor-element-02c57ff .elementor-widget-container, .elementor-location-footer .elementor-element-02c57ff .elementor-heading-title, .elementor-location-footer .elementor-element-02c57ff p { text-align: left !important; } /* ---- Eine gemeinsame Kante ---- * Der Innenabstand sitzt an den Spalten, nicht an den einzelnen Widgets — * sonst muesste er an jeder Stelle einzeln gepflegt werden. */ .elementor-location-footer .elementor-element-02c57ff > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 20px !important; padding-right: 20px !important; } /* Die Widgets selbst duerfen dann keinen eigenen Rand mehr haben */ .elementor-location-footer .elementor-element-02c57ff .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ---- Soziale Symbole an dieselbe Kante ---- */ .elementor-location-footer .elementor-element-17aff2c .elementor-social-icons-wrapper { display: flex !important; justify-content: flex-start !important; gap: 10px; margin-left: 0 !important; } .elementor-location-footer .elementor-element-17aff2c .elementor-grid-item { margin: 0 !important; } /* ---- Kontaktliste: Symbol an der Kante, Text daneben ---- */ .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-items { padding-left: 0 !important; margin-left: 0 !important; } .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-item { justify-content: flex-start !important; text-align: left !important; } /* Die Symbolspalte trug zusaetzlich zur Breite noch 40px Innenabstand * rechts — der Text begann dadurch erst bei 68px statt bei 54px und * sprang aus der gemeinsamen Kante. */ .elementor-location-footer .elementor-element-c7b235f .elementor-icon-list-item .elementor-icon-list-icon { width: 24px !important; padding-right: 0 !important; margin-right: 10px !important; text-align: left !important; } /* ---- Rechtsleiste ebenfalls linksbuendig ---- */ .elementor-location-footer .elementor-element-c55d2a5 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 20px !important; padding-right: 20px !important; } .elementor-location-footer .elementor-element-c55d2a5 .elementor-nav-menu { justify-content: flex-start !important; } }