/* ============================================================================ DORADOO – STARTSEITE ---------------------------------------------------------------------------- Gesammeltes CSS fuer die Startseite, von oben nach unten gegliedert. Aufbau: pro Bereich ein Abschnitt. Innerhalb eines Abschnitts stehen zuerst die Regeln fuer alle Bildschirme, direkt darunter die @media-Bloecke fuer kleinere Geraete. So steht alles zu einem Bereich beisammen. Breakpoints des Themes: 1400px / 1360px / 1024px -> Laptop und Tablet 800px / 768px -> kleine Tablets 600px / 576px -> Handy Grundsatz: kein !important, solange es ohne geht - diese Datei laedt nach dem Theme und gewinnt dadurch ohnehin. Ziel: kann spaeter 1:1 nach /themes/doradoo/css/doradoo-adjusments.css. Bedingung: Theme doradoo. Angelegt am 26.08.2026. ============================================================================ */ /* ============================================================================ 1. HEADER – Logo, Suchleiste, Icons, Menueleiste ============================================================================ */ /* Mobile bis 576px: Logo linksbuendig mit dem Anfang der Suchleiste. Ausgangslage aus doradoo-adjusments.css: .container-header .image -> position: fixed; left: 35px; + margin-left: 25px -> Logo beginnt also 60px vom Bildschirmrand. Wichtig: ein fester Wert wie left:18px waere falsch, weil der Inhaltsbereich nicht immer an derselben Stelle beginnt - als Admin schiebt die Drupal-Toolbar die Seite um 10px nach rechts, fuer normale Besucher nicht. Mit left:auto behaelt das fixierte Logo seine natuerliche Position im Header-Container und sitzt damit automatisch auf derselben Linie wie die Suchleiste - mit Toolbar wie ohne. */ @media screen and (max-width: 576px) { header .container .container-header .image { left: auto; margin-left: 0; /* Logo etwas hoeher setzen: top 18px -> 10px. Seit die Suchleiste 5px hoeher ist und weiter oben beginnt, blieben zwischen Logo-Kasten und Suchleiste nur noch 7px. Mit top 6px und einem auf 24px verkleinerten Kasten steht das Logo mittig im gelben Balken: 20px Luft darueber, 20px darunter. Der Hamburger wird im Block weiter unten um denselben Betrag mitgezogen (translateY 28px -> 20px), damit beide auf einer Linie bleiben. */ top: 20px !important; height: 24px !important; /* Kasten war 40px hoch bei 20px Logo */ } } /* Kopfbereich kompakter machen: 232px -> 193px. Zusammensetzung vorher (bei 390px Handybreite): 20px padding-top am
108px .container-header (davon 68px padding-top + 40px Suchleiste) 10px Abstand (gap des .container, Richtung Spalte) 74px Kategorie-Kreise 20px padding-bottom am
Geaendert werden die drei Leerraeume oben, in der Mitte und unten sowie der Innenabstand ueber der Suchleiste. Die Kategorie-Reihe bleibt unberuehrt. Zum Hamburger-Menue: Es ist position: fixed OHNE top-Wert. Ein fixiertes Element ohne top bleibt dort, wo es im normalen Fluss gelandet waere - es haengt also an genau diesen Abstaenden und rutscht mit nach oben. Ein expliziter top-Wert hilft NICHT: ein Vorfahre im Header bildet fuer fixierte Elemente einen eigenen Bezugsrahmen, top:16px landete bei -144px. Deshalb wird es stattdessen per transform verschoben - das wirkt immer relativ zur eigenen Position. Die 26px sind auf die Werte unten abgestimmt: Der Wert ist so gewaehlt, dass die Mitte des Symbols (36px) genau auf der Mitte des Logos (36px) liegt. ACHTUNG: Aendert sich einer der Abstaende unten, muss auch diese Zahl nachgezogen werden. Alle Werte brauchen !important, weil das Theme sie selbst mit !important setzt (doradoo-adjusments.css, @media max-width 600px). */ @media screen and (max-width: 1239px) { header { padding-top: 5px !important; /* war 20px */ padding-bottom: 5px !important; /* war 20px */ } header .container { gap: 4px !important; /* Abstand Suchleiste -> Kreise, war 10px */ } header .container .container-header { padding-top: 62px !important; /* war 68px - Platz fuer Logo und Menue */ } /* Der gelbe Balken hinter Logo und Hamburger. Das Theme legt ihn als .container-header::before an: fixiert, top 0, 68px hoch, in der Kopfzeilen-Farbe. Er liegt UEBER allem, was darunter rutscht - deshalb war die Suchleiste oben verdeckt, sobald sie durch die Kuerzungen nach oben wanderte. Das sah aus wie abgeschnitten, war aber eine Ueberdeckung. Er muss also zusammen mit dem Rest angepasst werden: 64px lassen dem Logo (20-44px) Platz und enden vor der Suchleiste (ab 67px). */ header .container .container-header::before { height: 64px !important; } /* Suchleiste etwas hoeher: 40px -> 45px. Die Hoehe steht an zwei Stellen - am Feld-Container und am Eingabefeld selbst. Wird nur eine davon gesetzt, bleibt das Feld innen 40px hoch. */ header .container .container-header .search-field, header .container .container-header .search-field input { height: 45px !important; } /* Hamburger auf gleiche Hoehe wie das Logo. Die Verschiebung sitzt am Symbol selbst, NICHT am Container. Ein transform am Container wuerde fuer alles darin einen eigenen Bezugsrahmen bilden - die Menuekarte koennte dann nicht mehr am Bildschirm haengen. */ header .container .container-header .header-menu-dropdown { transform: none !important; /* siehe Menuekarte weiter unten */ z-index: 10000 !important; /* muss ueber dem Logo liegen (z-index 9999) */ } /* Hamburger rechts buendig mit der Suchleiste. Das Theme gibt dem Symbol margin-right: 40px. Sein Container ist fixiert mit left: 8px und right: -13px, reicht also 13px ueber den rechten Bildschirmrand hinaus. Die Suchleiste endet 8px davor. Noetiger Abstand = 13px Ueberstand + 8px Rand = 21px - unabhaengig von der Bildschirmbreite, weil beide Werte fest in Pixeln stehen. */ header .container .container-header .header-menu-dropdown i { margin-right: 21px !important; transform: translateY(20px) !important; /* auf Logo-Hoehe */ } } /* Menuekarte deckt den ganzen Bildschirm ab. Vorher lief sie von 8px bis 403px und von 18px abwaerts: links blieb ein Streifen frei, rechts stand sie 13px ueber den Bildschirm hinaus (deshalb waren das X und die Zahlen am rechten Rand angeschnitten), und oben schaute das Logo darueber hinweg. Jetzt haengt sie fest am Bildschirm und fuellt ihn ganz aus. Das geht nur, weil ihr Container kein transform mehr hat - ein transform haette fuer position: fixed einen eigenen Bezugsrahmen gebildet. Der z-index von 10000 steht auch am Container: Er bildet mit z-index 999 einen eigenen Stapelkontext, ein hoher Wert an der Karte allein waere darin gefangen geblieben und haette das Logo (z-index 9999) nicht ueberdeckt. */ @media screen and (max-width: 1239px) { header .container .container-header .header-menu-dropdown .dropdown.active { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; z-index: 10000 !important; } } /* ============================================================================ MENUEKARTE – INHALT (Hamburger-Menue, nur Handy) ---------------------------------------------------------------------------- Das Theme baut die Karte aus mehreren .box-drop-Bloecken: 1 Icon-Reihe (Profilbild, Merkliste, Nachrichten, Glocke, Warenkorb, Sprache) 2 Benutzername 3 'Angebot erstellen' + Menuepunkte inkl. 'Ausloggen' 4 Knopf 'Hauptkategorien' 5 die Kategorien Die Struktur reicht aus, um das neue Aussehen ohne Template-Aenderung umzusetzen. Aus den grauen Kaesten werden Abschnitte, aus den Menuepunkten Kacheln, aus 'Angebot erstellen' ein umrandeter Knopf. ============================================================================ */ @media screen and (max-width: 1239px) { .header-menu-dropdown .dropdown.active { padding: 14px 12px 24px !important; gap: 12px !important; /* Seitwaerts dicht machen. Die Kategorien-Ansicht parkt mit translateX(100%) rechts neben der Karte. Weil die Karte scrollbar ist, liess sie sich sonst einfach zur Seite wischen - dahinter kamen die Kategorien zum Vorschein, ohne dass man 'Alle Kategorien' angetippt hatte. Der Scrollbereich war dadurch doppelt so breit wie der Schirm. */ overflow-x: hidden !important; overscroll-behavior-x: none !important; } /* Auch die Ansichten selbst duerfen nicht seitwaerts scrollen */ .header-menu-dropdown .dropdown.active .dd-screen { overflow-x: hidden !important; } /* Die grauen Kaesten verschwinden - Gliederung machen jetzt die Kacheln */ .header-menu-dropdown .dropdown.active .box-drop { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* Benutzername als Ueberschrift statt als eigener Kasten */ .header-menu-dropdown .dropdown.active .name-user-header { font-size: 15px !important; font-weight: 700 !important; padding: 0 4px !important; } /* 'Angebot erstellen': umrandeter Knopf, die wichtigste Aktion im Menue */ .header-menu-dropdown .dropdown.active .place-ad .button { border: 1.5px solid #F8C647 !important; border-radius: 12px !important; color: #F8C647 !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px !important; justify-content: space-between !important; margin: 0 0 6px 0 !important; } /* Das Plus im Knopf: plus.svg zeichnet 'plus-circle' - eine gefuellte Scheibe, aus der das Plus ausgespart ist, und mangels fill-Angabe in Schwarz. Auf einen gelben Kreis gelegt ergab das einen dunklen Ring mit gelbem Plus darin, nicht den gelben Punkt mit schwarzem Plus aus der Vorlage. Das Bild bleibt im Markup, wird aber ausgeblendet - der Punkt wird hier gezeichnet. order: 2, weil das Bild im Theme order: 1 traegt und deshalb rechts steht; ohne die Angabe saesse das Plus zwischen Text und Bild. */ .header-menu-dropdown .dropdown.active .place-ad .button img { display: none !important; } .header-menu-dropdown .dropdown.active .place-ad .button::after { content: "+" !important; order: 2 !important; display: block !important; width: 24px !important; height: 24px !important; flex: 0 0 24px !important; border-radius: 50% !important; background: #F8C647 !important; color: #1d1d1d !important; font-size: 18px !important; font-weight: 700 !important; line-height: 24px !important; text-align: center !important; } /* Abgemeldet fehlt die Profilzeile. Ohne Ausgleich saesse der gelbe Knopf deutlich weiter oben als im angemeldeten Zustand - beim An- und Abmelden springt das Menue dann sichtbar. 86 px sind gemessen: angemeldet beginnt der Knopf bei 100 px, der Innenabstand der Karte betraegt 14 px. */ .header-menu-dropdown .dropdown.active.dd-ohne-profil > .place-ad { margin-top: 86px !important; } /* Menuepunkte als Kacheln */ .header-menu-dropdown .dropdown.active li.profile-dropdown-list-item { background: #2c2c2c !important; border-radius: 10px !important; margin: 0 0 8px 0 !important; padding: 0 !important; list-style: none !important; } .header-menu-dropdown .dropdown.active li.profile-dropdown-list-item > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* Icon und Text links, Zahl rechts */ padding: 13px 12px !important; font-size: 14.5px !important; color: #fff !important; text-decoration: none !important; } /* 'Hauptkategorien' war ein Knopf - wird zur Abschnitts-Ueberschrift */ .header-menu-dropdown .dropdown.active .categoy-name .button { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #8a8a8a !important; font-size: 10.5px !important; letter-spacing: .13em !important; font-weight: 700 !important; text-transform: uppercase !important; padding: 6px 4px 2px !important; justify-content: flex-start !important; height: auto !important; } /* Schliessen-X als runder Knopf oben rechts */ .header-menu-dropdown .dropdown.active .close-menu { top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #343434 !important; color: #ddd !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; line-height: 1 !important; z-index: 5 !important; } /* Icon-Reihe: rechts Platz fuer den X-Knopf, Kreise einheitlich 40px */ .header-menu-dropdown .dropdown.active .dd-icons { padding: 0 46px 0 0 !important; gap: 6px !important; } .header-menu-dropdown .dropdown.active .box-drop .circle { width: 40px !important; height: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; position: relative !important; } .header-menu-dropdown .dropdown.active .box-drop .circle .container-cart { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .header-menu-dropdown .dropdown.active .box-drop .circle .container-cart i { font-size: 17px !important; color: #1d1d1d !important; } .header-menu-dropdown .dropdown.active .box-drop .circle .items-number { position: absolute !important; top: -6px !important; right: -6px !important; } /* Beschriftungen unter den Icons. Ohne Text muss man raten, wofuer die Glocke steht. Die Texte kommen aus dem CSS (::after), weil im Markup kein Platz dafuer vorgesehen ist. Sie sind absolut positioniert - so bleiben die Kreise exakt 40px und die Reihe wird durch die Beschriftung nicht auseinandergezogen. Die Zuordnung kommt vom Skript: es erkennt jedes Symbol an seinem Bild bzw. Ziel und schreibt den Text nach data-etikett. Frueher hing das an der Position (:nth-child) - abgemeldet ist die Reihe aber kuerzer und ohne Warenkorb, dadurch blieb die Glocke ohne Beschriftung. */ .header-menu-dropdown .dropdown.active .dd-icons { /* Das Theme macht diesen Block ueber :first-of-type zur Reihe. Nach dem Umbau steht die Profilzeile davor, die Regel greift also nicht mehr - deshalb hier ausdruecklich. */ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-start !important; padding: 6px 46px 22px 0 !important; /* rechts Platz fuer den X-Knopf */ } .header-menu-dropdown .dropdown.active .dd-icons > a, .header-menu-dropdown .dropdown.active .dd-icons > .follow-users { position: relative !important; overflow: visible !important; } .header-menu-dropdown .dropdown.active .dd-icons > a::after, .header-menu-dropdown .dropdown.active .dd-icons > .follow-users::after { position: absolute !important; top: 46px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 9px !important; font-weight: 400 !important; color: #b9b9b9 !important; line-height: 1.1 !important; white-space: nowrap !important; } /* Ohne a davor: die Glocke ist im Theme ein DIV, kein Anker. */ .header-menu-dropdown .dropdown.active .dd-icons > [data-etikett]::after { content: attr(data-etikett) !important; } /* Abgemeldet ist das Profilbild ein schlichter Anker ohne .circle und hat seine eigene Groesse. In der Kachel-Ansicht muss es so gross sein wie die uebrigen Zeichen, sonst wird diese eine Kachel hoeher als die anderen. */ .header-menu-dropdown .dropdown.active .dd-icons > a:not(.circle):not(.button) .img-prof-drop, .header-menu-dropdown .dropdown.active .dd-icons > a:not(.circle):not(.button) .img-prof-drop img { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; } /* Profilbild auf dieselbe Groesse wie die Kreise */ .header-menu-dropdown .dropdown.active .dd-icons > a.button.white, .header-menu-dropdown .dropdown.active .dd-icons > a.button.white .profile-pic-background { width: 40px !important; height: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; padding: 0 !important; } /* Warenkorb: Das Theme benutzt hier ein Zeichen aus 'Font Awesome 6 Pro'. Diese Schrift wird auf der Seite nicht geladen - das Zeichen bleibt leer und der Kreis sah aus wie ausgestanzt. Ersetzt durch ein SVG im CSS. */ .header-menu-dropdown .dropdown.active .box-drop a.circle .container-cart i { display: none !important; } .header-menu-dropdown .dropdown.active .dd-icons > [data-etikett="Warenkorb"]::before { content: "" !important; position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e6e6e6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10h8'/%3E%3Cpath d='M14 10l7 30h27a4 4 0 0 0 3.9-3.1L56 20H18'/%3E%3Ccircle cx='26' cy='50' r='4'/%3E%3Ccircle cx='46' cy='50' r='4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; } /* ---- Schnellzugriff als Kacheln (wie in der Vorlage) ---- Das Theme liefert eine Reihe runder Kreise. Die Vorlage zeigt stattdessen vier bzw. fuenf Kacheln mit Zeichen oben, Beschriftung darunter und dem Zaehler als roter Blase oben rechts. Umgebaut wird das komplett hier - das Markup bleibt unangetastet. Steht bewusst NACH den Kreis-Regeln weiter oben, damit es gewinnt. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 9px !important; padding: 6px 0 18px !important; /* kein Platzhalter mehr fuer das X - das sitzt jetzt neben dem Schriftzug */ } .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] { flex: 1 1 0 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; background: #2c2c2c !important; border-radius: 12px !important; padding: 12px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; position: relative !important; overflow: visible !important; text-decoration: none !important; } /* Angemeldet blendet das Skript das Profilbild aus der Reihe aus (es steht schon in der Profilzeile darueber). Die Kachel-Regel oben ist staerker als .dd-weg - deshalb hier ausdruecklich wieder verstecken. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > .dd-weg { display: none !important; } /* Zeichen in der Kachel - klein, sonst wird die Kachel zu hoch */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] > img, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .img-prof-drop, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .img-prof-drop img, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .profile-pic-background { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; flex: 0 0 20px !important; object-fit: contain !important; } /* Zeichen wie in der Vorlage. Die Grafiken des Themes sind einfarbig schwarz und auf der dunklen Kachel kaum zu erkennen; ersetzt werden sie durch die Zeichen aus der Liste ZEICHEN im Skript (data-zeichen). Die Grafik bleibt im Markup stehen, wird nur nicht mehr angezeigt - so ist der Schritt jederzeit umkehrbar. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-zeichen] > img, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-zeichen] .img-prof-drop, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-zeichen] .container-cart i { display: none !important; } .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-zeichen]::before { content: attr(data-zeichen) !important; display: block !important; position: static !important; width: auto !important; height: 20px !important; flex: 0 0 auto !important; font-size: 18px !important; line-height: 20px !important; background: none !important; filter: none !important; } /* Beschriftung steht jetzt IN der Kachel statt frei darunter zu schweben */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett]::after { position: static !important; transform: none !important; display: block !important; top: auto !important; left: auto !important; margin-top: 5px !important; font-size: 9.5px !important; color: #b9b9b9 !important; line-height: 1.15 !important; } /* Warenkorb-SVG sitzt im Zeichen-Platz der Kachel, nicht mehr ueber der ganzen Flaeche - sonst laege es quer ueber der Beschriftung. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett="Warenkorb"]::before { position: static !important; display: block !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; background-size: 20px 20px !important; } .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett="Warenkorb"] .container-cart { position: static !important; } /* Blase mit 0 wird vom Skript mit .dd-null markiert und bleibt weg. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons .dd-null { display: none !important; } /* Zaehler als rote Blase oben rechts. ACHTUNG: hier bewusst kein display. Die Glocke bringt ihren Zaehler mit einem display:none direkt im Markup mit - ein display:flex !important wuerde eine Blase sichtbar machen, die es nicht geben soll. */ .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .counter_favorite_bubble, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .counter_chat_bubble, .header-menu-dropdown .dropdown.active .box-drop.dd-icons > [data-etikett] .items-number { position: absolute !important; top: 6px !important; right: 8px !important; left: auto !important; bottom: auto !important; background: #e5484d !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; text-align: center !important; border-radius: 9px !important; padding: 0 5px !important; } /* 'Ausloggen' wird vom Skript in den Fussbereich verschoben und dort mit der Klasse .dd-ausloggen versehen. Frueher stand hier :last-child - das traf nach dem Verschieben den falschen Eintrag (Rechnungen). */ .header-menu-dropdown .dropdown.active li.dd-ausloggen { background: transparent !important; margin: 0 !important; } /* ---- Teile, die das Skript 'Doradoo – Handy-Menü (JS)' erzeugt ---- */ /* Originale von Bild und Name - stecken jetzt in der Profilzeile */ .header-menu-dropdown .dropdown.active .dd-weg { display: none !important; } .header-menu-dropdown .dropdown.active .dd-user { display: flex !important; align-items: center !important; gap: 12px !important; padding: 2px 4px 6px !important; } .header-menu-dropdown .dropdown.active .dd-user-bild, .header-menu-dropdown .dropdown.active .dd-user-bild .profile-pic-background { width: 46px !important; height: 46px !important; max-width: 46px !important; flex: 0 0 46px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important; } /* Das Profilbild kommt in Originalgroesse (z. B. 192x144) und wurde von den 46 px des Kreises einfach abgeschnitten - sichtbar war nur die linke obere Ecke, meist eine leere Flaeche. Deshalb hier auf die Kreisflaeche rechnen und mittig zuschneiden. */ .header-menu-dropdown .dropdown.active .dd-user-bild img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; border-radius: 50% !important; } .header-menu-dropdown .dropdown.active .dd-user-name { font-size: 15px !important; font-weight: 700 !important; color: #fff !important; } .header-menu-dropdown .dropdown.active .dd-user-sub { font-size: 11.5px !important; color: #9a9a9a !important; margin-top: 2px !important; } /* Abschnitts-Ueberschriften */ .header-menu-dropdown .dropdown.active .dd-sec { font-size: 10.5px !important; letter-spacing: .13em !important; font-weight: 700 !important; color: #8a8a8a !important; text-transform: uppercase !important; padding: 10px 4px 8px !important; } /* Icons vor den Menuepunkten (Zeichen steht im data-ico des Links) */ .header-menu-dropdown .dropdown.active li.profile-dropdown-list-item > a[data-ico]::before { content: attr(data-ico) !important; margin-right: 10px !important; font-size: 15px !important; } /* Diese beiden Knoepfe bringen aus dem Theme ein 'gap: 10px' mit. Das kam zu den 10 px Abstand des Zeichens hinzu - der Text stand dadurch 10 px weiter rechts als bei 'Alle Kategorien' und 'Shops' darunter. Beide Listen sollen aber buendig untereinander stehen. */ .header-menu-dropdown .dropdown.active .dd-menue .register-button > a { gap: 0 !important; } /* Dasselbe fuer 'Anmelden' und 'Verifizierung' im abgemeldeten Zustand. Das Theme liefert die beiden nicht als Listeneintrag, sondern als .register-button - die Regel darueber greift dort deshalb nicht. */ .header-menu-dropdown .dropdown.active .dd-menue .register-button > a[data-ico]::before { content: attr(data-ico) !important; margin-right: 10px !important; font-size: 15px !important; } /* Text nimmt die Breite, eine Zahl dahinter rutscht an den rechten Rand */ .header-menu-dropdown .dropdown.active li.profile-dropdown-list-item > a .nav-link { flex: 1 !important; } /* Selbst erzeugte Kachel 'Alle Kategorien' */ .header-menu-dropdown .dropdown.active .dd-kachel { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #2c2c2c !important; border-radius: 10px !important; margin-bottom: 8px !important; padding: 13px 12px !important; font-size: 14.5px !important; color: #fff !important; text-decoration: none !important; } .header-menu-dropdown .dropdown.active .dd-kachel[data-ico]::before { content: attr(data-ico) !important; margin-right: 10px !important; font-size: 15px !important; } .header-menu-dropdown .dropdown.active .dd-kachel > span:first-of-type { flex: 1 !important; } .header-menu-dropdown .dropdown.active .dd-chev { color: #7a7a7a !important; } /* Rest aus dem Theme: eine Ueberschrift 'Alle Kategorien' zwischen Kopfzeile und Liste. Der Titel steht in der neuen Ansicht schon oben. */ .header-menu-dropdown .dropdown.active .dd-screen > .box-drop.categoy-name { display: none !important; } /* Erster Eintrag der Unterebene: 'Alle in ' bekommt denselben Kreis wie eine Ebene hoeher. Bild bzw. Zeichen setzt das Skript. */ .header-menu-dropdown .dropdown.active .dd-screen2 li.dd-alle > a::before { content: "" !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 50% !important; background-color: #F7E4A8 !important; background-image: var(--dd-bild, none) !important; background-size: 22px 22px !important; background-position: center !important; background-repeat: no-repeat !important; margin-right: 13px !important; } .header-menu-dropdown .dropdown.active .dd-screen2 li.dd-alle > a[data-emoji]::before { content: attr(data-emoji) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; background-image: none !important; } /* Zwischenueberschrift 'Unterkategorien' steht innerhalb der Liste */ .header-menu-dropdown .dropdown.active .dd-screen2 .dd-sec-unter { list-style: none !important; padding: 14px 4px 8px !important; } /* Kategorien-Ansicht schiebt sich von rechts herein */ .header-menu-dropdown .dropdown.active .dd-screen { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background: #242424 !important; padding: 14px 12px 24px !important; overflow-y: auto !important; z-index: 6 !important; transform: translateX(100%); transition: transform .22s ease; } /* Nur die Kategorien-Ansicht hereinschieben, NICHT die Unteransicht. Beide tragen die Klasse .dd-screen - ohne :not() wuerde die leere Unteransicht mit hereinkommen und die Kategorien zudecken. Genau das war der Grund, warum die Bilder kurz aufblitzten und verschwanden. */ .header-menu-dropdown .dropdown.active.dd-zeigt-kat .dd-screen:not(.dd-screen2) { transform: translateX(0); } .header-menu-dropdown .dropdown.active .dd-screen-kopf { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 46px 14px 0 !important; border-bottom: 1px solid #333 !important; margin-bottom: 8px !important; } .header-menu-dropdown .dropdown.active .dd-zurueck { width: 34px; height: 34px; border-radius: 50%; background: #343434; color: #ddd; border: 0; font-size: 20px; line-height: 1; flex: 0 0 34px; } .header-menu-dropdown .dropdown.active .dd-screen-titel { font-weight: 700; font-size: 16px; color: #fff; } /* Kategorie-Zeilen mit pastellgelbem Kreis (Bild kommt per --dd-bild) */ /* Kategorie-Zeile: Kreis links, Text direkt daneben. Ohne das eigene justify-content schiebt das Theme den Text an den rechten Rand. */ .header-menu-dropdown .dropdown.active .dd-kat > a { display: flex !important; align-items: center !important; gap: 13px !important; justify-content: flex-start !important; padding: 11px 4px !important; border-bottom: 1px solid #303030 !important; color: #fff !important; font-size: 14.5px !important; text-decoration: none !important; } /* Zeilen enger stellen: das Theme gibt den Listeneintraegen eigene Abstaende, die hier die doppelte Zeilenhoehe verursacht haben. */ .header-menu-dropdown .dropdown.active .dd-kat { padding: 0 !important; margin: 0 !important; list-style: none !important; } /* Kreis vor JEDER Kategorie - auch ohne Bild. Icons sind nur fuer die ersten 17 Kategorien hinterlegt (Feld field_categories_icon am Taxonomie-Begriff). Ohne Kreis wuerden die uebrigen Zeilen linksbuendig ausbrechen. Sobald ein Bild nachgetragen wird, erscheint es hier automatisch - das Skript liest die Bilder aus der Kreisreihe der Startseite. */ .header-menu-dropdown .dropdown.active .dd-kat > a::before { content: "" !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 50% !important; background-color: #F7E4A8 !important; background-image: var(--dd-bild, none) !important; background-size: 22px 22px !important; background-position: center !important; background-repeat: no-repeat !important; } /* Kategorien ohne hinterlegtes Bild bekommen ein Zeichen als Platzhalter. Das Zeichen steht im data-emoji, das Skript setzt es. Gleicher Kreis, gleiche Farbe wie bei den Kategorien mit Bild - der Unterschied faellt dadurch nicht auf. */ .header-menu-dropdown .dropdown.active .dd-kat > a[data-emoji]::before { content: attr(data-emoji) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; line-height: 1 !important; background-color: #F7E4A8 !important; background-image: none !important; } /* Weder Bild noch Zeichen: grauer Kreis, damit die Zeile ausgerichtet bleibt */ .header-menu-dropdown .dropdown.active .dd-kat:not(.dd-hat-bild):not(.dd-hat-emoji) > a::before { background-color: #3a3a3a !important; } /* ---- Abgemeldeter Zustand ---- Ohne Anmeldung liefert das Theme statt der Profil-Liste einzelne .register-button-Bloecke (Anmelden, Verifizierung). Damit sie genauso aussehen wie die Kacheln im angemeldeten Menue, hier dieselbe Optik. */ .header-menu-dropdown .dropdown.active .dd-menue .register-button { background: #2c2c2c !important; border-radius: 10px !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .header-menu-dropdown .dropdown.active .dd-menue .register-button > .button { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 13px 12px !important; margin: 0 !important; height: auto !important; font-size: 14.5px !important; color: #fff !important; background: transparent !important; border: 0 !important; text-decoration: none !important; } /* 'Angebot erstellen' bleibt auch abgemeldet der umrandete Knopf */ .header-menu-dropdown .dropdown.active .place-ad .button { background: transparent !important; } /* Zweite Ebene: Unterkategorien. Liegt ueber der Kategorien-Ansicht und schiebt sich ebenfalls von rechts herein. */ .header-menu-dropdown .dropdown.active .dd-screen2 { z-index: 7 !important; } .header-menu-dropdown .dropdown.active.dd-zeigt-unter .dd-screen2 { transform: translateX(0); } /* Nur die gerade gewaehlte Gruppe ist sichtbar - das steuert das Theme. Hier bekommen ihre Eintraege das Aussehen der Kategorie-Zeilen. */ .header-menu-dropdown .dropdown.active .dd-screen2 ul.children-categories, .header-menu-dropdown .dropdown.active .dd-screen2 ul.dropdown-menu.children { list-style: none !important; margin: 0 !important; padding: 0 !important; } .header-menu-dropdown .dropdown.active .dd-screen2 li.children { list-style: none !important; margin: 0 !important; padding: 0 !important; } .header-menu-dropdown .dropdown.active .dd-screen2 li.children > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 13px 4px !important; border-bottom: 1px solid #303030 !important; color: #fff !important; font-size: 14.5px !important; text-decoration: none !important; } /* 'Alle anzeigen' ist der erste Eintrag jeder Gruppe - abgesetzt, weil er direkt zu allen Inseraten der Hauptkategorie fuehrt. */ .header-menu-dropdown .dropdown.active .dd-screen2 li.children:first-child > a { background: #2c2c2c !important; border-radius: 10px !important; border-bottom: 0 !important; font-weight: 700 !important; padding: 13px 12px !important; margin-bottom: 10px !important; } /* Fussbereich mit Sprache und Ausloggen. Klebt am unteren Rand (sticky), wie in der Vorlage: Sprache und Ausloggen bleiben erreichbar, auch wenn die Liste darueber laenger ist als der Schirm. Die negativen Aussenabstaende heben die 12 px Innenabstand der Karte auf, damit der Balken bis an den Rand geht. */ .header-menu-dropdown .dropdown.active .dd-fuss { display: flex !important; align-items: center !important; justify-content: space-between !important; position: sticky !important; bottom: -24px !important; z-index: 5 !important; background: #1f1f1f !important; border-top: 1px solid #333 !important; margin: 10px -12px -24px !important; padding: 13px 16px 15px !important; } /* Notfaerbung gegen das weisse Aufblitzen beim Sprachwechsel. Die Seite selbst hat keinen Hintergrund gesetzt - der Browser zeichnet dann seine weisse Grundflaeche, und die sah man kurz aufblitzen, bevor die dunkle Karte wieder offen war. Das Skript setzt .dd-dunkel ganz frueh und nimmt es weg, sobald die Karte steht. Steht innerhalb der Handy-Abfrage, das genuegt: gesetzt wird die Klasse ohnehin nur nach einem Sprachwechsel im Handy-Menue. */ html.dd-dunkel, html.dd-dunkel body { background-color: #242424 !important; } /* Dunkel allein reicht nicht - der Inhalt der Seite wurde trotzdem gezeichnet und blitzte auf. Solange die Faerbung gilt, ist deshalb alles unsichtbar ausser der Menuekarte selbst. 'visibility' und nicht 'display', damit sich am Aufbau der Seite nichts verschiebt - sie ist nur fuer einen Wimpernschlag nicht zu sehen. */ /* Auch die Nachkommen ausdruecklich: irgendwo im Theme (oder im jquery-ui.css von code.jquery.com, das sich nicht auslesen laesst) steht ein 'visibility: visible' auf
. Vererben allein genuegt deshalb nicht. */ html.dd-dunkel body, html.dd-dunkel body * { visibility: hidden !important; } html.dd-dunkel .header-menu-dropdown .dropdown, html.dd-dunkel .header-menu-dropdown .dropdown * { visibility: visible !important; } /* Nach einem Sprachwechsel setzt das Skript kurz .dd-sofort. Solange laeuft kein Uebergang und keine Animation: die Karte ist einfach da, an derselben Stelle wie vorher. Ohne das saehe man die Seite kurz ohne Menue und danach das Aufblenden - genau der Sprung, der stoert. */ .header-menu-dropdown .dropdown.dd-sofort, .header-menu-dropdown .dropdown.dd-sofort * { transition: none !important; animation: none !important; } /* Sprachumschalter im Fussbereich: alle vier Sprachen nebeneinander. Das Theme zeigt nur die aktive Sprache und klappt die Liste erst beim Antippen auf. Im Fuss ist Platz fuer alle vier - das spart einen Tipp und man sieht auf einen Blick, was es gibt. Die Liste wird dauerhaft sichtbar gemacht; der Auf-/Zuklapper des Themes laeuft damit ins Leere, stoert aber nicht. */ .header-menu-dropdown .dropdown.active .dd-fuss .language-switcher-language-url > span { display: none !important; /* Ausloeser 'DE' wird nicht mehr gebraucht */ } .header-menu-dropdown .dropdown.active .dd-fuss ul.links { display: flex !important; /* WICHTIG: Das Theme setzt bei :hover 'flex-direction: column' auf diese Liste (#block-doradoo-languageswitcher:hover .links). Auf dem Handy loest schon die erste Beruehrung :hover aus - die Reihe klappte dadurch beim Antippen nach unten auf und man musste ein zweites Mal waehlen. Deshalb die Richtung hier ausdruecklich festhalten. */ flex-direction: row !important; align-items: center !important; gap: 4px !important; top: auto !important; right: auto !important; list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; min-width: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .header-menu-dropdown .dropdown.active .dd-fuss ul.links > li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Groesser als im ersten Entwurf: die Flaechen sind Tippziele auf dem Handy, 23 px Hoehe waren dafuer zu knapp. 44 px ist das Mass, das Apple fuer Tippziele empfiehlt. */ .header-menu-dropdown .dropdown.active .dd-fuss ul.links > li > a { display: block !important; font-size: 14px !important; color: #9a9a9a !important; padding: 14px 16px !important; /* ergibt 44 px Hoehe - Daumenmass */ border-radius: 8px !important; text-decoration: none !important; line-height: 16px !important; } /* Aktive Sprache gelb hinterlegt - dieselbe Farbe wie der Knopf oben. */ .header-menu-dropdown .dropdown.active .dd-fuss ul.links > li.is-active > a, .header-menu-dropdown .dropdown.active .dd-fuss ul.links > li > a.is-active { background: #F8C647 !important; color: #1d1d1d !important; font-weight: 700 !important; } .header-menu-dropdown .dropdown.active .dd-fuss .dd-ausloggen { background: transparent !important; margin: 0 !important; } .header-menu-dropdown .dropdown.active .dd-fuss .dd-ausloggen > a { color: #e5807f !important; padding: 0 !important; font-size: 13px !important; } } /* ============================================================================ 2. KATEGORIEN – Kategorie-Kreise und Kategorie-Menue ============================================================================ */ /* --- Kategorie-Kreise unter der Suchleiste (nur Handy) --- Der Container .categories-mobile-view existiert nur in der mobilen Ansicht und ist am Desktop komplett ausgeblendet. Deshalb braucht es hier keine @media-Abfrage: die Regeln greifen genau dann, wenn die Reihe da ist. Ausgangslage: Kreis 52px aussen (40px Inhalt + 2x4px padding + 2x2px weisser Rand), Bild darin nur 30px - das Motiv wirkte dadurch verloren. Neu: Kreis 58px Aussenmass (box-sizing: border-box, damit Rand und Innenabstand nicht dazukommen), Bild auf 100% der Innenflaeche. Achtung box-sizing: die 58px enthalten den 2px weissen Rand, die Flaeche innerhalb des Rands ist also 54px. Ein Bild mit fixen 58px wuerde sich auf den weissen Ring legen - bei randfuellenden Motiven (Shop, Megafon) gut sichtbar. Mit 100% bleibt das Bild immer innerhalb des Rands, auch wenn die Kreisgroesse spaeter geaendert wird. Der Kreis hat bereits overflow: visible, das Bild wird also nicht abgeschnitten. Wichtig zur Spezifitaet: Das Theme setzt die Groesse ueber 'header .owl-carousel .owl-item .item-cat-image'. Ein kuerzerer Selektor verliert dagegen, auch wenn er spaeter geladen wird. Deshalb steht hier derselbe Pfad, ergaenzt um .categories-mobile-view - damit ist er spezifischer und braucht trotzdem kein !important. */ header .owl-carousel.categories-mobile-view .owl-item .item-cat-image { box-sizing: border-box; /* 60px sind das Aussenmass inkl. Rand */ width: 58px; height: 58px; padding: 0; /* Innenabstand weg, das Bild bestimmt die Groesse */ overflow: visible; /* Ueberstand darf sichtbar bleiben */ } header .owl-carousel.categories-mobile-view .owl-item .item-cat-image img { width: 100%; /* fuellt die Flaeche INNERHALB des weissen Rands */ height: 100%; /* 58px Kreis abzueglich 2x2px Rand = 54px Bild */ max-width: none; /* hebt max-width des Themes auf */ max-height: none; /* .item-cat img hat max-height: 50px - sonst bliebe das Bild flach */ object-fit: contain; /* Motiv vollstaendig sichtbar, nicht beschnitten */ } /* HINWEIS: Ein groesserer Abstand zwischen den Kacheln wurde getestet und wieder entfernt. Der Slider berechnet seine Buehnenbreite beim Start mit 5px Abstand (2430px). Groessere Abstaende sprengen diese Breite - die hinteren Kategorien lagen dann ausserhalb der Buehne und waren nicht mehr erreichbar. Der Abstand gehoert in die Slider-Optionen (Owl: margin), also ins JavaScript, nicht ins CSS. */ /* Kategoriename: volle Kachelbreite nutzen. Die Kachelbreite kommt jetzt vom Slider selbst (siehe JS-Injector 'Doradoo – Startseite (JS)': 4.5 Kreise statt 6 auf dem Handy, rund 82px pro Kachel). Hier muss deshalb nur noch die Bremse des Themes geloest werden: .item-cat hat max-width: 65px, was die Beschriftung sonst wieder auf 65px stauchen wuerde. */ header .owl-carousel.categories-mobile-view .owl-item .item-cat, header .owl-carousel.categories-mobile-view .owl-item .item-cat > a { width: 100%; max-width: none; } /* Kreis-Optik: weicher statt hart umrandet. Der weisse 2px-Ring des Themes war gegen das gelbe Kopfband der staerkste Kontrast auf der Seite und zog mehr Aufmerksamkeit als die Motive selbst. Statt ihn zu entfernen wird er nur unsichtbar gemacht - die Breite bleibt erhalten, damit die Innenflaeche (54px) und damit die Bildgroesse gleich bleiben. Die Abgrenzung uebernimmt ein weicher Schatten. */ header .owl-carousel.categories-mobile-view .owl-item .item-cat-image { border-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); } /* Grundfarbe im Kreis: Pastellgelb, etwas heller als das Kopfband. Ausgenommen sind 'Alle', 'Shop hinzufuegen' und 'Anzeige hinzufuegen' - diese drei behalten ihre eigenen Farben aus dem Theme, weil die Farbe dort die Sonderfunktion kennzeichnet. Das :not() sorgt dafuer, dass die Theme-Regeln fuer sie unangetastet bleiben. */ header .owl-carousel.categories-mobile-view .owl-item .item-cat-image:not(.alle):not(.shop):not(.anzeige) { background-color: #F7E4A8; } /* Plus-Badge auf 'Shop hinzufuegen' und 'Anzeige hinzufuegen'. Die beiden sind keine Kategorien zum Stoebern, sondern Aktionen - das Plus zeigt das an. Schwarzer Kreis mit weissem Plus, 20px, unten rechts, leicht ueber den Kreisrand hinaus. Angesteuert ueber die Klassen .shop und .anzeige, die das Theme bereits vergibt. Die aeltere, deaktivierte Regel '+ Button Shop hinzufuegen' machte das ueber :has() und den Bilddateinamen samt URL-kodierten Umlauten - das bricht, sobald jemand ein Bild umbenennt oder austauscht. Das Symbol ist ein SVG direkt im CSS (data-URL), also keine zusaetzliche Datei und kein weiterer Ladevorgang. Bewusst ohne weissen Ring - der Badge soll sich nicht wie ein Fremdkoerper aufsetzen. pointer-events: none, damit der Badge Klicks auf den Kreis nicht abfaengt. */ header .owl-carousel.categories-mobile-view .owl-item .item-cat-image.shop, header .owl-carousel.categories-mobile-view .owl-item .item-cat-image.anzeige { position: relative; /* Bezugspunkt fuer den Badge */ } header .owl-carousel.categories-mobile-view .owl-item .item-cat-image.shop::after, header .owl-carousel.categories-mobile-view .owl-item .item-cat-image.anzeige::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23000'/%3E%3Cpath d='M50 25 v50 M25 50 h50' stroke='%23fff' stroke-width='14' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } /* ============================================================================ 3. HERO – Slider und Countdown ============================================================================ */ /* (noch keine Anpassungen) */ /* ============================================================================ 4. INSERATE – Kacheln und Shop-Badges ============================================================================ */ /* (noch keine Anpassungen) */ /* ============================================================================ 5. SHOPS ============================================================================ */ /* (noch keine Anpassungen) */ /* ============================================================================ 6. BLOG / NEWS ============================================================================ */ /* (noch keine Anpassungen) */ /* ============================================================================ 7. FOOTER ============================================================================ */ /* (noch keine Anpassungen) */ /* =========================================================================== KOPFBEREICH AB TABLET (576 bis 1239 px) --------------------------------------------------------------------------- Das Theme schaltet erst bei 600 px auf den Burger um. Zwischen 600 und 1240 px zeigte es darum den Desktop-Kopf - und der bricht dort auf drei Reihen um (gemessen: 141 px hoch bei 1240, 228 px bei 1200). Hier holen wir den Burger hoch und blenden aus, was nur auf dem Desktop Platz hat. WICHTIG - das Kindzeichen '>' in den Regeln ist kein Zufall: dieselben Klassen (.place-ad, a.circle) gibt es ein zweites Mal INNERHALB des aufgeklappten Menues. Nur die direkten Kinder von .container-header sind die des Desktop-Kopfes. Ohne '>' waere das halbe Menue leer. Gehoert zur Regel 'Doradoo - Anbieterprofil', die bei derselben Breite umbricht. Aendert sich der Wert dort, muss er hier mit. ========================================================================= */ @media screen and (min-width: 576px) and (max-width: 1239px) { /* Burger zeigen. */ header .header-menu-dropdown { display: flex !important; } /* Zweite Kopfreihe mit den Kategorien - steckt im Menue schon drin. */ header .container-footer.desktop-view { display: none !important; } /* Zeichenreihe, Profilklapper und 'Angebot erstellen' - alles im Menue. */ header .container-header > a.circle, header .container-header > .follow-users, header .container-header > .header-button, header .container-header > .place-ad { display: none !important; } /* Das Menue selbst: auf dem Handy 55 % der Breite, das waeren hier ueber 600 px. Eine feste Breite sieht auf dem Tablet nach Schublade aus. */ header .header-menu-dropdown .dropdown.active { width: 360px !important; } }