/* ============================================================ Doradoo - Kopfbereich Desktop Pfad: alle Seiten (Theme doradoo) Nur ab 1240px Zwei Dinge: 1. Das Logo passt in seinen Kasten. 2. Die Dienstzeile darunter wird zusammengefasst (Variante B, von Nino am 30.08. gewaehlt): Shops rueckt nach rechts zu News / Verifizierung / Preise / FAQ / Sprache. Warum nur ab 1240px: Auf dem Handy hat das Logo eigene Regeln (doradoo_startseite, Abschnitt 1: left/margin-left unter 576px), und die Dienstzeile ist unter 1240px ohnehin ausgeblendet. Verwandt: 'doradoo_suchfeld_kategorien' blendet den linken Teil derselben Zeile aus (Kategorien-Menue und sechs Kategorien). ============================================================ */ @media screen and (min-width: 1240px) { /* --------------------------------------------------------- dd-feste-kante im Kopfbereich Der Kopfbereich hatte 15 px Innenabstand (bei 1240 px sogar 20 px), der Inhalt der Startseite begann je nach Fensterbreite bei 24 bis 34 px. Logo und Slider standen deshalb nie auf einer Linie. Jetzt gilt ueberall dieselbe feste Kante von 30 px - auf allen Seiten gleich, damit der Kopfbereich beim Seitenwechsel nicht springt. Gegenstueck: die Ueberschreibung der Variablen --dd-bannerrand-links/-rechts in doradoo_startseite_neu. --------------------------------------------------------- */ header { padding-left: 30px !important; padding-right: 30px !important; } /* ---------- 1. Logo ---------- Nachgemessen: die Bilddatei ist 500x83, angezeigt wurde sie mit 241x40 - der Kasten .image ist aber nur 120px breit. Das Logo ragte damit 107px unter das Suchfeld und war abgeschnitten ("DORADO..."). Jetzt 150x25, der Kasten waechst auf 150px mit. Das Suchfeld rueckt dadurch 30px nach rechts. */ header .container-header > .image { flex: 0 0 150px !important; width: 150px !important; max-width: 150px !important; min-width: 150px !important; display: flex !important; align-items: center !important; } header .container-header > .image img { width: 150px !important; max-width: 150px !important; height: auto !important; max-height: none !important; display: block !important; } /* ---------- 2. Dienstzeile: alles nach rechts ---------- Das Theme gibt .right ein margin-left:auto - damit sass Shops allein am linken Rand. Der Zug wandert auf .button_center, .right folgt dann mit festem Abstand. */ header .container-footer.desktop-view .button_center { margin-left: auto !important; margin-right: 0 !important; } header .container-footer.desktop-view .right { margin-left: 22px !important; display: flex !important; align-items: center !important; gap: 18px !important; } header .container-footer.desktop-view .right > a.link { padding: 10px 0 !important; font-size: 12.5px !important; /* Das Theme setzt an jedem dieser Links ein border-right: 1px solid #333. Das ergab senkrechte Striche zwischen News, Verifizierung, Preise und FAQ - weg damit (Wunsch 30.08.). */ border: 0 !important; } /* Shops bleibt gruen, bekommt aber Form und Luft */ header .container-footer.desktop-view .button_center a { display: inline-flex !important; align-items: center !important; border-radius: 6px !important; /* 3 px mehr Luft rundum als zuerst gezeigt - der gruene Grund reicht damit weiter ueber die Schrift hinaus (Wunsch 30.08.). */ /* Ganz knapper Rand um die Schrift (Wunsch 30.08.) */ padding: 3px 8px !important; /* Das Theme gibt dem Anker eine feste Hoehe von 40px. Zusammen mit dem Innenabstand waere der Chip 58px hoch und wuerde aus der 35px hohen Zeile herausragen - er tat das vorher schon. Mit height:auto bestimmt der Innenabstand die Hoehe: 12.5 + 9 + 9 = rund 31px. */ height: auto !important; min-height: 0 !important; max-height: none !important; font-size: 12.5px !important; line-height: 1 !important; letter-spacing: .01em !important; } /* ---------- 3. Sprachwahl ---------- Trennstrich davor und die Anzeige als kleine Pille. WICHTIG: Die Pille sitzt auf dem INNERHALB von #block-doradoo-languageswitcher. Dieser Block ist position:relative und traegt das absolut gesetzte Klappmenue (top:-20px; right:0). Wuerde man ihn selbst umbauen, wanderte das Klappmenue mit. */ header .container-footer.desktop-view .right .language-switcher-dropdown { display: flex !important; align-items: center !important; gap: 12px !important; } header .container-footer.desktop-view .right .language-switcher-dropdown::before { content: '' !important; flex: 0 0 auto !important; width: 1px !important; height: 14px !important; background: rgba(0,0,0,.18) !important; } header .container-footer.desktop-view .right #block-doradoo-languageswitcher > span { display: inline-flex !important; align-items: center !important; border: 1px solid rgba(0,0,0,.22) !important; border-radius: 14px !important; padding: 3px 9px !important; font-size: 11.5px !important; line-height: 1 !important; font-family: 'Montserrat-SemiBold', 'Montserrat', sans-serif !important; } /* ---------- 4. Klappliste der Sprachwahl ---------- Das Theme oeffnet sie mit position:absolute; top:-20px; right:0 - also nach OBEN, ueber die Kopfzeile. Nachgemessen: sie begann bei y=79, die Pille sitzt bei y=93-113, der Header endet bei 125. Die Liste legte sich also ueber die Suchzeile und ragte unten heraus. Jetzt klappt sie nach unten auf, direkt unter der Pille, als weisse Karte. top:100% bezieht sich auf den Block, der bis y=124 reicht - dadurch entsteht von selbst ein Abstand von 11px zur Pille, OHNE Luecke im Hoverbereich. Ein Abstand per margin wuerde die Liste beim Hinuebergehen mit der Maus zuklappen lassen. */ header .container-footer.desktop-view .right #block-doradoo-languageswitcher ul.links { top: 100% !important; bottom: auto !important; right: 0 !important; left: auto !important; margin: 0 !important; padding: 6px 0 !important; min-width: 96px !important; border: 0 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 10px 28px rgba(0,0,0,.16) !important; list-style: none !important; z-index: 80 !important; } header .container-footer.desktop-view .right #block-doradoo-languageswitcher ul.links > li { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } header .container-footer.desktop-view .right #block-doradoo-languageswitcher ul.links > li > a { display: block !important; padding: 7px 14px !important; font-size: 12.5px !important; line-height: 1.2 !important; color: #2f2f34 !important; text-decoration: none !important; white-space: nowrap !important; } header .container-footer.desktop-view .right #block-doradoo-languageswitcher ul.links > li > a:hover { background: #f4f4f7 !important; } /* Die laufende Sprache ist markiert - das Theme setzt dafuer .is-active */ header .container-footer.desktop-view .right #block-doradoo-languageswitcher ul.links > li.is-active > a { background: #FDF3D8 !important; font-family: 'Montserrat-SemiBold', 'Montserrat', sans-serif !important; } } /* Ende @media min-width 1240px */