/* ····························································· Doradoo - Angebotsseite (CSS) Pfad /artikel/* - die Seite eines einzelnen Inserats. Aufbau der Seite (bei zwei geprueften Inseraten gleich): #details-page .product Galerie + Titel + Preis + Knoepfe + Verkaeufer .general-info "Allgemeine Informationen" .description "Beschreibung" .general-info "Lieferung und Bezahlung" .map Google-Karte .sales-agent "Verkaeufer", gross .products weitere Inserate WAS DIESE REGEL NICHT MACHT: sie haengt nichts um. Das Zusammenlegen von Beschreibung und Angaben, die Chips und der klebende Fuss stehen in doradoo_angebotsseite_js - dort laesst sich nach Klasse arbeiten statt nach Reihenfolge. Farben aus dem, was schon da ist: #f8c647 Gelb des Kopfbereichs, Hauptknopf #e2e2e8 Kante wie bei den Inseratskarten #6b6b76 Nebentext ····························································· */ /* Grenze 1301 px - gemessen, nicht geraten. Das Theme hat auf dieser Seite ZWEI Umschaltpunkte: bis 1300 px Galerie ueber die volle Breite, Angaben darunter ab 1301 px Galerie schmal und mittig, Angaben darunter ab 1401 px Galerie links, Angaben rechts daneben Gemessene Galeriebreiten: 1180 px bei 1300, 565 px bei 1301. Die Handy-Gestaltung endet beim ersten Umschaltpunkt, also bei 1300 px. Zwischen 1301 und 1400 gilt schon die Desktop-Gestaltung, auch wenn die Angaben dort noch unter der Galerie stehen - das ist Sache des Themes und wird hier nicht angefasst. */ @media screen and (min-width: 1301px) { /* --- 1. Der Preis ist die wichtigste Zahl der Seite ---------- Er stand in 16 px und normaler Staerke - genauso gross wie der Titel und wie jede Zeile in den Angaben. Jetzt traegt er das Gewicht, das er verdient. "Preis" darueber wird zur Beischrift. */ #details-page .product .licitation { font-size: 13px !important; color: #6b6b76 !important; height: auto !important; padding: 0 !important; margin: 0 0 2px !important; } #details-page .product .price { font-size: 30px !important; font-weight: 800 !important; line-height: 1.15 !important; color: #1c1c22 !important; height: auto !important; margin: 0 0 20px !important; } #details-page .product .price span { font-size: inherit !important; } /* --- 2. Der Titel darf groesser sein als eine Angabenzeile --- */ #details-page .product .title { font-size: 24px !important; line-height: 1.2 !important; height: auto !important; margin: 0 0 14px !important; } /* --- 3. Rangfolge statt dreier gleicher gelber Flaechen ------ Heute sind "Jetzt kaufen", "Kontakt aufnehmen" und "Zu Favoriten hinzufuegen" drei gleich grosse gelbe Knoepfe untereinander - man sieht nicht, was gemeint ist. Neu: gefuellt = die Handlung, die das Inserat anbietet Umriss = die zweite Moeglichkeit Text = die Nebensache WICHTIG: welcher Knopf oben steht, entscheidet die Seite selbst. Bei "Sofort kaufen" gibt es .detail-page mit "Jetzt kaufen", bei "Anfrage" faellt er weg und .button.yellow (Kontakt) ist der erste Knopf. Deshalb wird nicht nach Reihenfolge gestaltet, sondern nach Klasse - und der Kontakt-Knopf bekommt seinen Umriss nur, WENN daneben ein Kaufknopf steht. Das macht das JS ueber die Klasse dd-mit-kauf am Knopfblock. ACHTUNG bei den Auswahlen: der Kaufknopf heisst im Quelltext .button.yellow.buy-now und steckt INNEN in .detail-page. Eine Auswahl ".buttons .button.yellow" trifft ihn also mit. Darum ueberall das Kind-Zeichen ">" - gemeint ist nur der Knopf, der direkt im Knopfblock steht, und das ist "Kontakt aufnehmen". */ #details-page .product .buttons { gap: 10px !important; } #details-page .product .buttons > .button.yellow, #details-page .product .buttons > .button.white, #details-page .product .buttons .detail-page .button { border-radius: 11px !important; height: 52px !important; font-size: 14.5px !important; } /* Der Kaufknopf bleibt gefuellt - er ist die Handlung. */ #details-page .product .buttons .detail-page .button { background: #f8c647 !important; border: 1px solid #e0ad2b !important; } /* Kontakt: Umriss, sobald es daneben einen Kaufknopf gibt. Ohne Kaufknopf bleibt er gefuellt - dann ist er die Handlung. */ #details-page .product .buttons.dd-mit-kauf > .button.yellow { background: #ffffff !important; border: 1.5px solid #1c1c22 !important; color: #1c1c22 !important; } /* Favoriten: kein Knopf, sondern eine Zeile. Das Theme gibt ihm einen 2 px starken gelben Rahmen - der zieht mehr Blick auf sich als der Kaufknopf. */ #details-page .product .buttons .button.white { background: none !important; border: 0 !important; color: #6b6b76 !important; height: 40px !important; font-size: 13.5px !important; } /* --- 4. Die Karte war 800 px hoch --------------------------- Sie zeigt einen Umkreis, keine Adresse - dafuer braucht es keine ganze Bildschirmhoehe. 260 px zeigen denselben Umkreis. */ #details-page .map, #details-page .map > div { height: 260px !important; } #details-page .map { margin-bottom: 36px !important; } /* --- 5. Die Angabenzeilen waren 67 px hoch ------------------- 24 px Innenabstand oben und unten je Zeile, bei vier Zeilen sind das 268 px fuer vier Werte. Mit 11 px und einer Trennlinie liest es sich besser und braucht die Haelfte. */ #details-page .general-info .info { padding: 11px 0 !important; height: auto !important; align-items: baseline !important; border-bottom: 1px solid #e2e2e8 !important; } #details-page .general-info .info.no-border, #details-page .general-info .info:last-child { border-bottom: 0 !important; } #details-page .general-info .info .title { font-size: 14px !important; color: #6b6b76 !important; } #details-page .general-info .info .detail { font-size: 14px !important; font-weight: 600 !important; } /* --- 6. Ueberschriften der Abschnitte ------------------------ 56 px Abstand nach oben und 24 nach unten an jeder Ueberschrift; zusammen mit den Abschnittsraendern entstehen Luecken von ueber 100 px zwischen zwei Zeilen Text. */ #details-page .general-info > .title, #details-page .description > .title, #details-page .sales-agent > .title { font-size: 18px !important; padding: 32px 0 12px !important; margin: 0 !important; height: auto !important; } /* --- 7. Die Beschreibung ------------------------------------ Zeilenhoehe 35 px bei 14 px Schrift - das ist zweieinhalbfacher Durchschuss und laesst den Text auseinanderfallen. */ #details-page .description .information { font-size: 14.5px !important; line-height: 1.6 !important; color: #3a3a42 !important; } /* --- 8. Beschreibung und Angaben nebeneinander --------------- Das JS haengt sie in .dd-mitte; hier werden zwei Spalten daraus. Links der Fliesstext, rechts die Werte - so steht beides im ersten Bildschirm statt untereinander auf 1000 px. align-items: start, sonst zieht die laengere Spalte die kuerzere auf ihre Hoehe und der Kasten steht halb leer da. */ #details-page .dd-mitte { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 32px !important; align-items: start !important; } /* Die Ueberschrift des ersten Blocks jeder Spalte braucht oben keinen Abstand mehr - der Abstand kommt vom Behaelter. */ #details-page .dd-mitte > div > *:first-child > .title { padding-top: 24px !important; } /* --- 9. Der Schalter unter der Beschreibung ------------------ Kein Knopf mit Flaeche - er soll wie ein Link wirken, damit er nicht mit den Handlungsknoepfen oben konkurriert. */ #details-page .dd-mehr { display: inline-block !important; margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #c9a227 !important; font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer !important; } /* Gekuerzt auf sechs Zeilen. -webkit-line-clamp wird von allen heutigen Browsern verstanden; faellt es aus, ist der Text nur ganz zu sehen - kein Schaden. */ #details-page .description .information.dd-gekuerzt { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 6 !important; overflow: hidden !important; } #details-page .description .information.dd-gekuerzt.dd-offen { display: block !important; overflow: visible !important; } /* --- 10. Ueberschrift ueber den weiteren Inseraten ----------- Dieselbe Machart wie die uebrigen Abschnittstitel, damit sie sich einfuegt. */ #details-page .products .dd-produkt-titel { font-size: 18px !important; font-weight: 700 !important; padding: 32px 0 12px !important; margin: 0 !important; } } /* ═══════════════════════════════════════════════════════════════ HANDY UND TABLET (bis 1300 px) Warum genau 1300: bei 1301 px schaltet das Theme selbst um - die Galerie geht von voller Breite (1180 px) auf schmal und mittig (565 px). Nebeneinander stehen Galerie und Angaben erst ab 1401 px. Die Grenze ist gemessen, nicht erfunden. Die vier Punkte, die auf dem Handy weh tun: 1. die vier Vorschaubilder stehen als 2x2-Block und fressen 260 px, bevor der Titel ueberhaupt kommt 2. jede Abschnittsueberschrift ist 82 px hoch 3. die Beschreibung laeuft ueber 950 px am Stueck 4. die Knoepfe stehen ganz unten - man scrollt 6000 px, um "Kontakt aufnehmen" zu finden ═══════════════════════════════════════════════════════════════ */ @media screen and (max-width: 1300px) { /* --- 1. Vorschaubilder in eine Reihe ------------------------- Aus dem 2x2-Block wird eine Reihe zum Wischen. Spart rund 180 px, ohne ein Bild wegzunehmen. */ #details-page .product .owl-thumbs { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; height: auto !important; margin: 0 !important; padding: 10px 16px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #details-page .product .owl-thumbs::-webkit-scrollbar { display: none; } #details-page .product .owl-thumbs .owl-thumb-item { flex: 0 0 68px !important; width: 68px !important; height: 68px !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; overflow: hidden !important; } #details-page .product .owl-thumbs .owl-thumb-item a, #details-page .product .owl-thumbs .owl-thumb-item img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #details-page .product .owl-thumbs .owl-thumb-item.active { outline: 2px solid #f8c647 !important; outline-offset: -2px !important; } /* --- 2. Titel und Preis ------------------------------------ Der Titel stand in 16 px - gleich gross wie jede Angabenzeile. Auf dem kleinen Bildschirm ist er das Erste, was gelesen wird. */ #details-page .product .informations { padding-top: 18px !important; } #details-page .product .title { font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; height: auto !important; margin: 0 0 10px !important; } #details-page .product .time { height: auto !important; margin: 0 0 14px !important; } #details-page .product .time .icon { width: 18px !important; height: 18px !important; font-size: 14px !important; } #details-page .product .time .date { font-size: 13px !important; color: #6b6b76 !important; } #details-page .product .licitation { font-size: 13px !important; color: #6b6b76 !important; height: auto !important; padding: 0 !important; margin: 0 0 2px !important; } #details-page .product .price { font-size: 26px !important; font-weight: 800 !important; line-height: 1.15 !important; color: #1c1c22 !important; height: auto !important; margin: 0 0 16px !important; } #details-page .product .price span { font-size: inherit !important; } /* --- 3. Abschnittsueberschriften ----------------------------- 82 px hoch bei 16 px Schrift - das ist mehr Luft als Text. Neu 18 px Schrift und rund 52 px Hoehe, mit feiner Kante. */ /* h2 gehoert dazu: ".title" allein trifft auch die linke Spalte jeder Angabenzeile - die heisst ebenfalls div.title. Ohne das h2 stand "Ort" in 18 px fett mit eigener Kante. */ #details-page .general-info > h2.title, #details-page .description > h2.title, #details-page .sales-agent > h2.title { font-size: 18px !important; font-weight: 700 !important; height: auto !important; margin: 0 !important; padding: 24px 0 10px !important; border-bottom: 1px solid #e2e2e8 !important; } /* --- 3b. Gleicher Rand fuer alle Bloecke --------------------- Das Theme gibt "Lieferung und Bezahlung" 20 px zur Seite, "Allgemeine Informationen" und der Beschreibung null. Dann laufen die Zeilen unterschiedlich weit nach aussen. */ #details-page .dd-mitte-links > .description, #details-page .dd-mitte-rechts > .general-info { padding-left: 20px !important; padding-right: 20px !important; } /* --- 4. Angabenzeilen enger --------------------------------- */ #details-page .general-info .info { height: auto !important; padding: 11px 0 !important; border-bottom: 1px solid #f0f0f4 !important; font-size: 15px !important; } #details-page .general-info .info > div { height: auto !important; } #details-page .general-info .info.no-border { border-bottom: 0 !important; } /* --- 5. Beschreibung kurz halten ----------------------------- Sechs Zeilen, dann "Mehr anzeigen". Das JS haengt die Klasse an und baut den Schalter. */ #details-page .description .information.dd-gekuerzt { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 6 !important; overflow: hidden !important; } #details-page .dd-mehr { display: inline-block !important; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px !important; font-weight: 600 !important; color: #c9a227 !important; cursor: pointer !important; } /* --- 6. Karte ------------------------------------------------ Die Hoehe der Karte auf dem Handy steht schon in der Regel doradoo_startseite (260 px, bis 1239 px). Diese Datei laedt alphabetisch davor und wuerde ohnehin verlieren - darum steht hier nichts zur Karte. Wer sie aendern will, aendert sie dort. */ /* --- 7. Die klebende Knopfleiste ----------------------------- Der wichtigste Punkt. Die Knoepfe standen am Seitenende, rund 6000 px unter dem Titel. Jetzt kleben sie unten am Rand und sind ab der ersten Sekunde erreichbar. Welche Knoepfe drin stehen, entscheidet die Seite: bei "Sofort kaufen" Kauf + Kontakt, bei "Anfrage" nur Kontakt. Das JS setzt dafuer die Klasse dd-mit-kauf. */ .dd-kaufleiste { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 8900; display: flex !important; gap: 10px !important; box-sizing: border-box !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; background: #fff !important; border-top: 1px solid #e2e2e8 !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08) !important; } .dd-kaufleiste > * { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; /* das Theme deckelt den Knopf auf 230 px - in der Leiste soll er seinen Anteil ausfuellen */ max-width: none !important; height: 48px !important; margin: 0 !important; border-radius: 10px !important; /* 14 px, sonst bricht "Kontakt aufnehmen" auf zwei Zeilen um */ font-size: 14px !important; line-height: 1.2 !important; font-weight: 700 !important; } .dd-kaufleiste .detail-page, .dd-kaufleiste .detail-page .button, .dd-kaufleiste .detail-page input, .dd-kaufleiste .detail-page button { width: 100% !important; height: 48px !important; margin: 0 !important; border-radius: 10px !important; } /* gefuellt = was das Inserat anbietet */ .dd-kaufleiste .detail-page .button, .dd-kaufleiste .detail-page input[type="submit"], .dd-kaufleiste .detail-page button { background: #f8c647 !important; border: 0 !important; color: #1c1c22 !important; } /* steht ein Kaufknopf daneben, wird Kontakt zum Umriss. Kind-Zeichen, weil der Kaufknopf selbst .button.yellow heisst. */ .dd-kaufleiste.dd-mit-kauf > .button.yellow { background: #fff !important; border: 1.5px solid #1c1c22 !important; color: #1c1c22 !important; } /* Innenleben des Kontakt-Knopfs: er besteht aus form > button > img + span. Der span steht in 16 px und bricht dann auf zwei Zeilen um - darum hier ausdruecklich 14 px und eine Reihe. */ .dd-kaufleiste > .button.yellow { display: flex !important; align-items: center !important; justify-content: center !important; } /* Der Kontakt-Knopf sieht innen auf zwei Arten aus: bei "Anfrage" a > img + div.submit-button bei "Sofort kaufen" form > button > img + span Beides wird hier zur gleichen Reihe: Symbol, Abstand, Text. */ .dd-kaufleiste > .button.yellow > a, .dd-kaufleiste > .button.yellow > form { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 !important; } .dd-kaufleiste > .button.yellow .submit-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } .dd-kaufleiste > .button.yellow, .dd-kaufleiste > .button.yellow * { font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap !important; /* der Text steckt in einem a - sonst faerbt ihn das Theme blau */ color: #1c1c22 !important; } .dd-kaufleiste > .button.yellow img { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; } /* Platz, damit die Leiste nichts verdeckt */ body.dd-leiste-da #details-page { padding-bottom: 84px !important; } /* --- 8. Was im Fluss bleibt --------------------------------- Favoriten und Melden gehoeren nicht in die Leiste - sie sind Nebensachen und stehen weiter unten bei den Knoepfen. */ #details-page .product .buttons .button.white { height: auto !important; padding: 12px 0 !important; background: none !important; border: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #1c1c22 !important; } /* --- 9. Weitere Inserate ------------------------------------ */ #details-page .products .dd-produkt-titel { font-size: 18px !important; font-weight: 700 !important; height: auto !important; padding: 24px 0 12px !important; margin: 0 !important; text-align: left !important; } }