/* ========================================================================== edikte.css -- edikte.org custom overrides (AuctionWorx 3.5) Alle rein optischen Anpassungen des Betreibers. Vendor-CSS bleibt unangetastet. Wird in Views/Shared/_Layout.cshtml im nach den Vendor-Styles geladen. ========================================================================== */ :root { --edikte-blue: #066eb5; /* Header-/Marken-Blau (Site-Setting HeadingColor) */ --edikte-blue-dark: #01285a; --edikte-infobox-bg: #eef4fb; /* dezentes Info-Blau (Referenz Los 9754132) */ --edikte-infobox-border: #cdddf0; --edikte-infobox-accent: #1f4e79; /* Akzent-/Rahmenblau (Referenz Los 9754132) */ --edikte-infobox-heading: #dbe7f6; --edikte-infobox-text: #1c3a5e; /* R4: SEMANTIK-FARBFAMILIE (auf das Marken-Blau abgestimmt, siehe Abschnitt #R4) Cool-Jewel-Triade: Blau H204 / Rot H355 / Gruen H151 -- gleiche wahrgenommene "Schwere" (Weisstext-Kontrast Blau 5.38 : Rot 5.79 : Gruen 5.43), alle >= WCAG AA. */ --edikte-red: #c12836; /* EIN Rot: Sofortgebot/Kaufen + Ueberboten/Warnung */ --edikte-red-hover: #a11f2c; /* dunklerer Hover/Active-Zustand */ --edikte-red-bg: #fbe9eb; /* dezenter Alert-Hintergrund (gleiche Rot-Familie) */ --edikte-red-border: #f0c6cb; /* Alert-/Rahmenlinie */ --edikte-green: #17794a; /* EIN Gruen: Hoechstgebot/Preis + Gebot abgeben/Erfolg */ --edikte-green-hover: #12633c; /* dunklerer Hover/Active-Zustand */ --edikte-green-bg: #e7f4ec; /* dezenter Alert-Hintergrund (gleiche Gruen-Familie) */ --edikte-green-border: #bfe0cd; /* Alert-/Rahmenlinie */ /* R3-1: EIN einheitlicher Radius fuer alles (knackig-eckig statt Bootstrap ~4px) */ --edikte-radius: 2px; /* R3-2: schlanke Typo-Skala (wenige Stufen statt vieler Sondergroessen) */ --edikte-fs-body: 14px; /* Fliesstext */ --edikte-fs-sub: 13px; /* Untertitel / sekundaerer Text / Breadcrumb */ --edikte-fs-small: 12px; /* Mikro-Label (Grid-Labels, Gebotszahl) */ --edikte-fs-lead: 16px; /* betonter Titel in Listen/Zwischenstufe */ --edikte-fs-heading: 20px;/* Ueberschrift */ } /* ========================================================================== #R3-1 EINHEITLICHER RADIUS (2px) -- ueberschreibt Bootstrap-Default Panels, Buttons, Inputs, Wells, Alerts, Badges, Labels, Dropdowns, Kacheln. Kreise (.img-circle o.ae.) werden bewusst NICHT angefasst. ========================================================================== */ .panel, .btn, .form-control, .input-group-addon, .well, .alert, .badge, .label, .dropdown-menu, .list-group, .list-group-item, .thumbnail, .img-thumbnail, .modal-content, .popover, .nav-tabs > li > a, .progress, .breadcrumb, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: var(--edikte-radius) !important; } /* Panel-Innenecken buendig zum 2px-Rahmen halten */ .panel > .panel-heading:first-child, .panel-heading { border-radius: var(--edikte-radius) var(--edikte-radius) 0 0 !important; } .panel > .list-group:first-child > .list-group-item:first-child { border-top-left-radius: var(--edikte-radius); border-top-right-radius: var(--edikte-radius); } /* Zusammengesetzte Gruppen (Input-Groups, Button-Groups): Innennaht scharf */ .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; } /* ========================================================================== #R3-2 TYPO-SKALA anwenden -- Sondergroessen auf die Skala ziehen Breadcrumb == normaler Untertitel; Listen-Untertitel klar unter dem Titel. ========================================================================== */ .breadcrumb, .breadcrumb > li, .breadcrumb > li > a, .breadcrumb > li > span { font-size: var(--edikte-fs-sub) !important; } /* ========================================================================== #1 KOMPAKTE KOPFZEILE (eigenes Partial HeaderNavigation_Edikte.cshtml) Desktop: eine flache Zeile - kleineres Logo links, Menue inline daneben, Konto + Suche rechts. Mobil: Logo, dann kompakte Zeile Home + 4 Punkte. ========================================================================== */ .header--edikte > .container { padding: 6px 15px; /* R: links/rechts 15px auch <768 - AWE setzt dort "header .container { padding:0 }", was die Suche randlos machte. */ } .header--edikte .edikte-logo { display: inline-block; padding: 0; margin: 0; line-height: 0; } .header--edikte .edikte-logo img { height: 65px; /* R2-1: Logo ~30% groesser (50 -> 65) */ max-height: 65px; width: auto; } /* ----- Desktop-Leiste ----- */ .header--edikte .edikte-desktop { margin: 0; } /* ========================================================================== Kopfzeile - EIN Layout fuer ALLE Breiten: Logo | Menue (2-Spalten) | Konto nebeneinander (umbrechen erst bei echter Enge). Der EINZIGE Unterschied nach Breite: >=992px : Suche INLINE rechts in derselben Zeile. < 992px : Suche in eigener Zeile ueber die VOLLE Breite darunter. Keine separate Bootstrap-Mobilleiste mehr - dieselbe Leiste bis zur kleinsten Breite. ========================================================================== */ /* Mobilleiste komplett aus; Desktop-Leiste + Desktop-Suche immer sichtbar (auch <768). */ .header--edikte .edikte-mobilenav, .header--edikte .edikte-search-mobile { display: none !important; } .header--edikte .edikte-desktop { display: flex !important; } .header--edikte > .container > .edikte-search { display: block !important; } @media (min-width: 1px) { .header--edikte > .container { display: flex; align-items: center; flex-wrap: wrap; /* erlaubt der Suche, in eine eigene Zeile zu fallen */ column-gap: 12px; row-gap: 6px; } .header--edikte .edikte-logo { flex: 0 0 auto; } .header--edikte .edikte-desktop { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; /* bei echter Enge (Telefon) bricht Konto unter das Menue */ align-items: center; justify-content: space-between; /* Menue links am Logo, Konto ganz rechts */ column-gap: 16px; row-gap: 2px; } /* R4: Menue als kompakter 2-Spalten-Block (2-3 Zeilen) statt langer Zeile. Braucht damit ~halbe Breite und bleibt neben dem Logo, statt darunter zu rutschen oder Punkte zu verlieren. Fuellt zeilenweise: 5 Punkte -> 3 Zeilen. */ .header--edikte .edikte-menu { display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 4px; row-gap: 0; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; float: none; } .header--edikte .edikte-menu > li { float: none; position: relative; list-style: none; } .header--edikte .edikte-menu > li > a { display: block; color: #fff; padding: 3px 10px; /* R4: flacher, damit 3 Zeilen zur Logohoehe passen */ line-height: 1.5; text-decoration: none; white-space: nowrap; } .header--edikte .edikte-menu > li > a:hover, .header--edikte .edikte-menu > li.open > a { background-color: rgba(0,0,0,.12); } /* Suche: Standard = eigene volle Zeile unter Logo+Menue+Konto (gilt 768-991). Ab 992px (unten) inline ueberschrieben. */ .header--edikte > .container > .edikte-search { flex: 1 0 100%; order: 10; margin: 4px 0 0 0; } /* Suche fuellt die volle Zeile: input-group als flex, Feld waechst, Button rechts. (form-inline macht daraus sonst inline-table = nur inhaltsbreit.) */ .header--edikte .edikte-search .input-group { display: flex; width: 100%; } .header--edikte .edikte-search .input-group > .form-control { flex: 1 1 auto; width: 1%; } .header--edikte .edikte-search .input-group > .input-group-btn { flex: 0 0 auto; width: auto; } .header--edikte .edikte-account { flex: 0 0 auto; } /* R4: Konto vertikal gestapelt -> schmal, bleibt sichtbar (Registrierung/ Einloggen bzw. Hallo X / Mein Konto / Ausloggen untereinander). */ .header--edikte .edikte-account .navbar-nav { display: flex; flex-direction: column; align-items: flex-start; float: none; margin: 0; } .header--edikte .edikte-account .navbar-nav > li { float: none; } .header--edikte .edikte-account .navbar-nav > li > a, .header--edikte .edikte-account .navbar-nav > li > .navbar-text, .header--edikte .edikte-account .navbar-nav > li > p { color: #fff; padding: 3px 10px; /* R4: flacher, passend zur Logohoehe */ line-height: 1.5; margin: 0; white-space: nowrap; } /* Die mobile Konto-Sub-Navigation (Literal_SubNavigation) nie am Desktop */ .header--edikte .edikte-account .navbar-nav.visible-xs { display: none !important; } /* Konto-Block: die Stock-Mobil-Extras (visible-xs: Browse/Sell) raus - die stehen schon im Menue; sie tauchten sonst am Telefon doppelt auf. "Ausloggen" ist im Stock hidden-xs -> hier immer zeigen, damit es auf allen Breiten da ist. */ .header--edikte .edikte-account .navbar-nav > li.visible-xs { display: none !important; } .header--edikte .edikte-account .navbar-nav > li.hidden-xs { display: block !important; } } /* BREIT (>=1200, inkl. >1600): alles in EINER Zeile -> Suche INLINE rechts. Darunter (auch die "mittlere" Ansicht 992-1199) steht die Suche in eigener Zeile ueber die VOLLE Breite (Basis-Regel: flex 1 0 100% + width 100%), rechte Flucht damit bis zum Konto-Ende; Raender bleiben durch das Container-Padding. */ @media (min-width: 1200px) { .header--edikte > .container { flex-wrap: nowrap; } .header--edikte > .container > .edikte-search { flex: 0 0 auto; order: 0; margin: 0; } .header--edikte .edikte-search .input-group { display: inline-table; width: auto; } .header--edikte .edikte-search .input-group > .form-control { flex: 0 0 auto; width: 220px; } } /* MITTEL (992-1199): Logo etwas kleiner; Suche bleibt eigene volle Zeile (Basis). */ @media (min-width: 992px) and (max-width: 1199.98px) { .header--edikte .edikte-logo img { height: 56px; max-height: 56px; } } /* SCHMAL (<992, inkl. Telefon): Menue + Konto neben/unter dem Logo, Suche eigene volle Zeile (aus der Basis-Regel). Logo skaliert mit (max 52px hoch, nie breiter als der Kopf), damit es auf kleinen Breiten nicht ueberlaeuft. */ @media (max-width: 991.98px) { .header--edikte .edikte-logo img { height: auto; max-height: 52px; max-width: 100%; width: auto; } } /* Task C: Kleinste Ansicht (<768px) - Menue als EINE einzeilige Link-Zeile statt 2-Spalten-Block; Konto-Links inline mit; Suche darunter (Zeile 2). */ @media (max-width: 767.98px) { .header--edikte .edikte-menu { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; row-gap: 0; } .header--edikte .edikte-account .navbar-nav { flex-direction: row; flex-wrap: wrap; align-items: center; } } /* "Hallo {Name}"-Begruessung ausblenden - bringt nichts und erzeugt einen Menuepunkt zu viel (eingeloggt sonst 3 statt 2 Zeilen wie ausgeloggt). */ .header--edikte .edikte-account .navbar-nav > li > p.navbar-text { display: none !important; } /* Dropdown-Menues (Auktionen / Mein Konto) behalten dunkle Schrift auf Weiss */ .header--edikte .dropdown-menu > li > a { color: #333; } /* ----- Mobile Leiste ----- */ .header--edikte .edikte-mobilenav__inner { display: flex; align-items: center; flex-wrap: wrap; column-gap: 2px; padding: 4px 0 2px 0; } .header--edikte .edikte-mobilenav__inner a { color: #fff; padding: 6px 9px; font-size: 14px; text-decoration: none; white-space: nowrap; } .header--edikte .edikte-mobilenav__inner a:hover { background-color: rgba(0,0,0,.12); } .header--edikte .edikte-mobilenav__home { font-size: 18px; padding: 6px 10px 6px 2px !important; } /* Mobil-Konto-Zeile: eigene Zeile unter der Navi, Login-/Registrierungslinks rechts. */ .header--edikte .edikte-mobilenav__account { justify-content: flex-end; border-top: 1px solid rgba(255,255,255,.18); margin-top: 3px; padding-top: 3px; } .header--edikte .edikte-mobilenav__hello { color: rgba(255,255,255,.9); padding: 6px 9px; font-size: 14px; white-space: nowrap; margin-right: auto; /* Begruessung links, Links rechts */ } .header--edikte .edikte-search-mobile { padding: 2px 0 8px 0; margin: 0; } /* ----- Suchfeld + Button: gleiche Hoehe, buendig, dezent gerundet (R2-1) ----- */ .header--edikte .edikte-search .form-control, .header--edikte .edikte-search .btn, .header--edikte .edikte-search-mobile .form-control, .header--edikte .edikte-search-mobile .btn { height: 38px; line-height: 1.4; border: 1px solid #cdddf0; box-shadow: none; font-size: 14px; } .header--edikte .edikte-search .form-control, .header--edikte .edikte-search-mobile .form-control { border-right: 0; border-radius: var(--edikte-radius) 0 0 var(--edikte-radius); background: #fff; color: #333; } .header--edikte .edikte-search .btn, .header--edikte .edikte-search-mobile .btn { border-left: 0; border-radius: 0 var(--edikte-radius) var(--edikte-radius) 0; background: #fff; color: var(--edikte-blue-dark); font-weight: 600; } .header--edikte .edikte-search .btn:hover, .header--edikte .edikte-search .btn:focus, .header--edikte .edikte-search-mobile .btn:hover, .header--edikte .edikte-search-mobile .btn:focus { background: #eef4fb; color: var(--edikte-blue-dark); } .header--edikte .edikte-search-mobile .input-group { width: 100%; } /* ========================================================================== #2 VORSCHAUBILDER QUADRATISCH (1:1) -- alle Kachel-/Grid-Bilder Ueberschreibt Aspect43/16:9 & fixe Inline-Hoehen; formatfuellend beschnitten. ========================================================================== */ .galleryImage { aspect-ratio: 1 / 1 !important; height: auto !important; width: 100%; overflow: hidden; } .galleryImage img, .galleryImage.galleryImage__cropped img { position: static !important; transform: none !important; left: auto !important; top: auto !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; } /* ========================================================================== #3 FUSSZEILE MOBIL NEBENEINANDER (horizontal, umbrechend) Nur Mobil (< 630px); Desktop unveraendert. ========================================================================== */ @media (max-width: 629.98px) { .footer__links { display: flex; flex-wrap: wrap; } .footer__links a { display: inline-block; padding: 6px 14px 6px 0; } } /* ========================================================================== #4 ANZAHL-BADGE -- edikte-Blau, eckig, weisse Schrift Zahl neben Kategorie/Versteigerung in der Seitenleiste + Browse-Dropdown. ========================================================================== */ .category-badge__container .badge, .menu-list.nav-pills > li > a > .badge { background-color: var(--edikte-blue); border-radius: var(--edikte-radius); /* R3-1: von eckig (0) auf einheitliche 2px */ color: #fff; /* R2-2: feste Breite + zentriert -> alle Badges gleich breit, saubere Spalte */ display: inline-block; box-sizing: border-box; min-width: 34px; padding-left: 6px; padding-right: 6px; text-align: center; } /* ========================================================================== #A / #D EDIKTE-INFOBOX (dezentes Blau, Referenz Los 9754132) #A Bietagenten-Kasten, #D Panels "Artikelbeschreibung" + "Details". ========================================================================== */ .edikte-infobox { background-color: var(--edikte-infobox-bg); border-color: var(--edikte-infobox-border); } /* #D Panels "Artikelbeschreibung" + "Details" (R2-4, Umkehr aus Runde 1): Titelleiste blau mit weisser Schrift, Koerper wieder weiss/normal. */ .detail__description-panel, .detail__data-panel { background-color: #fff; border-color: var(--edikte-infobox-border); } .detail__description-panel > .panel-heading, .detail__data-panel > .panel-heading { /* Bootstrap-Theme legt einen grauen Verlauf per background-image ueber die Farbe -> neutralisieren */ background: var(--edikte-blue) !important; background-image: none !important; border-bottom: 1px solid var(--edikte-blue-dark); color: #fff; } .detail__description-panel > .panel-heading, .detail__description-panel > .panel-heading *, .detail__data-panel > .panel-heading, .detail__data-panel > .panel-heading * { color: #fff; } .detail__description-panel > .panel-body, .detail__data-panel > .panel-body { background-color: #fff; } /* #A Bietagenten-Kasten (dezentes Blau) -- jetzt gemeinsamer Info-Kasten mit TIPP (R2-4). Einheitliche Schriftgroesse, Referenz "Favoriten schneller wiederfinden". */ .detail__disclaimer--auction { background-color: var(--edikte-infobox-bg); border: 1px solid var(--edikte-infobox-border); border-left: 4px solid var(--edikte-infobox-accent); color: var(--edikte-infobox-text); font-size: 14px; line-height: 1.5; } .detail__disclaimer--auction div { font-size: 14px; line-height: 1.5; } /* fette Stichworte duerfen bleiben, aber alles in einer Basisgroesse */ .detail__disclaimer--auction b, .detail__disclaimer--auction strong { font-size: 14px; } .detail__disclaimer--auction .edikte-tipp { margin-top: 10px; padding: 10px 0 0 0; border-top: 1px solid var(--edikte-infobox-border); } /* ========================================================================== #TILE ANGEBOTS-KACHEL: Untertitel (einzeilig) + Gebotszahl in Info-Zeile Untere Zeile dreiteilig: [Aktuelles Gebot] - [X Gebote] - [Restzeit]. ========================================================================== */ .gallerySubtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* R3-2: auf die Untertitel-Stufe der Typo-Skala gezogen */ font-size: var(--edikte-fs-sub); font-weight: normal; color: #777; margin-top: 4px; } .galleryData--values:not(.awe-hidden) { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .galleryData--values .galleryPrice { flex: 0 0 auto; } .galleryData--values .galleryBidCount { flex: 1 1 auto; text-align: center; color: #555; font-size: 12px; white-space: nowrap; } .galleryData--values .galleryTime--active, .galleryData--values .galleryDate--ended { float: none !important; flex: 0 0 auto; margin: 0; } @media (max-width: 767px) { .galleryData--values { flex-wrap: wrap; } .galleryData--values .galleryPrice { flex: 1 0 100%; } .galleryData--values .galleryBidCount { flex: 0 0 auto; text-align: left; } .galleryData--values .galleryTime--active, .galleryData--values .galleryDate--ended { margin-left: auto; } } /* ========================================================================== #R3-4 DETAILSEITE: blauer Info-Kasten kompakter + Abstand zur Beschreibung Problem: rechte Spalte (Gebotsbox + Info-Kasten) wurde viel laenger als die linke (Bild) -> grosses Loch unter dem Bild, und die Artikelbeschreibung klebte ohne Abstand am Kasten. Loesung: Info-Kasten innen zweispaltig (Intro | TIPP) -> deutlich flacher, plus klarer Abstand nach unten und ueber der Beschreibung. ========================================================================== */ .detail__disclaimer--auction { margin-bottom: 0; padding: 12px 14px; } /* Info-Kasten wohnt jetzt in der schmalen rechten Saeule -> einspaltig gestapelt (Intro oben, TIPP darunter). Die #A-Regel liefert die Trennlinie ueber dem TIPP. */ .edikte-infogrid > .edikte-infogrid__intro { margin-bottom: 4px; } /* Artikelbeschreibung: klarer Abstand nach oben (klebt nicht mehr am oberen Bereich) */ .detail__description-panel { margin-top: 20px; } /* ========================================================================== #R3-5 LISTENANSICHT (Browse "Liste") -- 3-Zonen-Zeile, robust responsiv Struktur (per CSS-Grid, .row wird via display:contents aufgeloest): Breit : [Bild] [Titel/Untertitel] [Preis/Gebote/Restzeit/Aktion] Schmal : [Titel/Untertitel volle Breite] [Bild] [Preis/Gebote/Restzeit/Aktion] Schmalst: Bild faellt weg, Textinfos bleiben immer sichtbar. Hinweis: Browse-Daten liefern pro Angebot nur EIN Bild (Model.Media == null), daher kein Thumbnail-Streifen -- der freie Platz wird von der Mittelzone (Titel/Untertitel) gefuellt. Mehrbild-Streifen braeuchte einen Dateneingriff. ========================================================================== */ .listing, .listing.hasQuickbid { min-height: 0; padding: 10px 12px; margin-bottom: 10px; } /* Titel prominent, Untertitel klar darunter (Typo-Skala) */ .listing .title { font-size: var(--edikte-fs-lead); font-weight: 600; margin: 0 0 2px 0; padding-right: 0; } .listing .subtitle { font-size: var(--edikte-fs-sub); font-weight: normal; color: #777; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bild kompakt halten (verhindert unnoetig hohe Zeilen) */ .listing .img-container { display: flex; align-items: center; justify-content: center; } .listing .img-container img { max-height: 96px; width: auto; max-width: 100%; } /* Aktionsblock eng gestapelt, rechtsbuendig */ .listing .cta { padding: 0; } .listing .cta p { margin: 0 0 3px 0; } .listing .cta .bids .btn { min-width: 0; } /* ---- Ab 480px: 3 Zonen nebeneinander (media | main | action) - GILT bis zur kleinen Ansicht, damit ALLE Groessen gleich aussehen (kein abweichendes Klein-Layout). ---- */ @media (min-width: 480px) { .listing, .listing.hasQuickbid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "media main action"; align-items: start; /* Bild, Titel UND Aktionsblock oben-buendig (gleiche Flucht) */ column-gap: 14px; } .listing > .row { display: contents; } .listing .img-container { grid-area: media; width: auto; max-width: 130px; padding: 0; } .listing .row > *:not(.img-container) { grid-area: main; width: 100%; /* fuellt die Hauptspalte (width:auto streckte nicht) */ min-width: 0; justify-self: stretch; padding: 0; align-self: start; /* Titel/Untertitel OBEN statt vertikal zentriert */ } .listing .cta { grid-area: action; position: static; right: auto; bottom: auto; width: auto; text-align: right; white-space: nowrap; } /* Untertitel auch bei exakt 768px sichtbar (AWE blendet ihn dort aus) */ .listing .subtitle { display: block; } } /* ---- Nur sehr schmal (bis 479px): Bild spannt links, Titel oben-rechts, Aktion darunter. Der Bereich 480-767 nutzt jetzt das GLEICHE 3-Zonen-Layout wie oben. ---- */ @media (max-width: 479.98px) { .listing, .listing.hasQuickbid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "media main" "media action"; align-items: start; column-gap: 12px; row-gap: 4px; } .listing > .row { display: contents; } .listing .img-container { grid-area: media; width: auto; max-width: 120px; padding: 0; } .listing .img-container img { max-height: 110px; } .listing .row > *:not(.img-container) { grid-area: main; width: auto; padding: 0; } /* Untertitel schmal wieder einblenden (war ausgeblendet) - wichtige Info */ .listing .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .listing .title { padding-bottom: 0; } .listing .cta { grid-area: action; position: static; right: auto; bottom: auto; width: auto; text-align: right; } .listing .cta p { text-align: right; } } /* ---- Schmalst (bis 479px): Hauptbild faellt weg, Text volle Breite ---- */ @media (max-width: 479px) { .listing, .listing.hasQuickbid { grid-template-columns: 1fr; grid-template-areas: "main" "action"; } .listing .img-container { display: none !important; } } /* ========================================================================== #R3-6 SEITENLEISTEN-DROPDOWNS (schmale Ansicht): linkes Padding Versteigerungs-/Kategorie-Dropdown: Eintraege klebten am linken Rand. ========================================================================== */ .categories .dropdown-menu > li > a { padding-left: 16px; padding-right: 12px; } .categories .dropdown-menu > li > a .category-name__container, .categories .dropdown-menu > li > a .region-name__container { padding-left: 0; } /* ========================================================================== #R3-7 DETAILSEITE-LAYOUT (Vorlage-Struktur) Titel oben volle Breite | links grosses 1:1-Bild | rechts schmale Saeule (Preis prominent, Bid-Aktion, blauer Info-Kasten, Details-Tabelle). Das grosse Bild balanciert die hohe rechte Saeule -> kein Loch mehr. ========================================================================== */ /* Titel/Untertitel volle Breite (Bootstrap-Float aus AWE aufheben) */ .detail__title__wrapper--full { float: none !important; clear: both !important; width: 100%; } .detail__title__wrapper--full .detail__title { padding-right: 0; } /* Linke Spalte: grosses Bild, formatfuellend, gleiche Raender rundum */ .detail__media-col > .panel { margin-bottom: 0; } .detail__media-col #previewimg, .detail__media-col #previewimg.full { display: block; width: 100% !important; max-width: 100% !important; margin: 0; object-fit: cover; object-position: center; } /* Gestapelt (unter dem md-Umbruch bei 992px): quadratisch, formatfuellend. Die Bootstrap-col-md-Spalten liegen erst ab 992px nebeneinander. */ @media (max-width: 991px) { .detail__media-col #previewimg, .detail__media-col #previewimg.full { height: auto; aspect-ratio: 1 / 1; } } /* Ab 992px zweispaltig: beide Spalten gleich hoch -> Bild fuellt die linke Spalte und balanciert die hohe Aktionssaeule rechts (kein Loch mehr). */ @media (min-width: 992px) { .detail__main-row { display: flex; align-items: stretch; } .detail__main-row > .detail__media-col { display: flex; flex-direction: column; } .detail__media-col > .panel { flex: 1 1 auto; display: flex; flex-direction: column; } .detail__media-col #previewimg, .detail__media-col #previewimg.full { flex: 1 1 auto; min-height: 340px; height: auto; } /* Rechte Spalte: einspaltige Saeule -> interne 2-Spalten-Zeilen stapeln */ .detail__bid-col .detail__submit-wrapper .row > [class*="col-"] { width: 100%; float: none; } } /* Aktuelles Hoechstgebot prominent (wichtigste Info der Seite) */ .detail__price { font-size: var(--edikte-fs-sub); font-weight: 400; line-height: 1.35; margin-bottom: 12px; } .detail__price > strong { font-size: var(--edikte-fs-body); font-weight: 600; } .detail__price--current { display: block; padding: 3px 0 0 0; font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--edikte-green); /* R4: EIN Familien-Gruen (siehe #R4 Farbsystem) */ } /* ========================================================================== #R4 SEMANTIK-FARBSYSTEM -- EIN Rot, EIN Gruen, abgestimmt auf das Blau Problem (Betreiber): mehrere Rot- und Gruentoene, nicht aufeinander und nicht auf das Marken-Blau (#066eb5) abgestimmt -> Seite wirkte "billig". Vendor-Alt: btn-danger #d9534f vs alert-danger-Text #a94442 (zwei Rot), Preise "green" #008000 / #009933 / #1f8b24 (drei Gruen). Loesung: cool-jewel-Triade auf einer gemeinsamen Saettigungs-/Helligkeitsebene wie das Blau. Weisstext-Kontrast auf der Flaeche: Blau 5.38 : Rot 5.79 : Gruen 5.43 (alle >= WCAG AA 4.5). Farb-als-Text auf Weiss ebenso: Rot 5.79, Gruen 5.43. Semantik: ROT = Sofortgebot/Kaufen (btn-danger) + Ueberboten/Warnung (label-danger, alert-danger) -> ueberall dasselbe --edikte-red. GRUEN= aktueller Preis/Hoechstgebot + Gebot abgeben/Erfolg (btn-success, label-success, alert-success, Preis-Spans, .sold) -> ueberall dasselbe --edikte-green. Vendor-Theme legt Farbverlaeufe per background-image ueber die Buttons/Labels -> mit background-image:none neutralisieren, damit der reine Ton wirkt. ========================================================================== */ /* ----- ROT: Sofortgebot / Kaufen (btn-danger) ----- */ .btn-danger, .btn-danger:link, .btn-danger:visited { background-color: var(--edikte-red) !important; background-image: none !important; border-color: var(--edikte-red-hover) !important; color: #fff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger { background-color: var(--edikte-red-hover) !important; background-image: none !important; border-color: var(--edikte-red-hover) !important; color: #fff !important; } /* ----- GRUEN: Gebot abgeben / Kaufen-Erfolg (btn-success) ----- */ .btn-success, .btn-success:link, .btn-success:visited { background-color: var(--edikte-green) !important; background-image: none !important; border-color: var(--edikte-green-hover) !important; color: #fff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success:active:hover, .open > .dropdown-toggle.btn-success { background-color: var(--edikte-green-hover) !important; background-image: none !important; border-color: var(--edikte-green-hover) !important; color: #fff !important; } /* ----- Badges/Labels: Ueberboten (label-danger) = ROT, High-Bidder/Erfolg (label-success) = GRUEN ----- */ .label-danger, .badge-danger { background-color: var(--edikte-red) !important; background-image: none !important; color: #fff !important; } .label-success, .badge-success { background-color: var(--edikte-green) !important; background-image: none !important; color: #fff !important; } /* ----- Alert-Boxen: dezenter Tint aus DERSELBEN Familie (Text/Rahmen im Vollton) ----- */ .alert-danger { background-color: var(--edikte-red-bg) !important; background-image: none !important; border-color: var(--edikte-red-border) !important; color: var(--edikte-red) !important; } .alert-danger a, .alert-danger .alert-link { color: var(--edikte-red-hover) !important; } .alert-success { background-color: var(--edikte-green-bg) !important; background-image: none !important; border-color: var(--edikte-green-border) !important; color: var(--edikte-green) !important; } .alert-success a, .alert-success .alert-link { color: var(--edikte-green-hover) !important; } /* ----- Preise/Erfolg als Text: EIN Familien-Gruen fuer alle Preis-Spans ----- */ .galleryPrice, .listing .price, .text-success, .detail__price--current { color: var(--edikte-green) !important; } /* Beendete Angebote bleiben neutral-grau (kein "aktueller" Preis mehr) */ .listing .price.ended, .galleryPrice--ended, .galleryTime--ended { color: #555 !important; } /* ----- "Verkauft"-Marker: aus zufaelligem Grau in das Erfolgs-Gruen ueberfuehrt ----- */ .sold { background-color: var(--edikte-green) !important; color: #fff !important; } /* ----- Restzeit-Akzent: vendor "color:red" (grelles Reinrot #f00) auf das Familien-Rot ziehen, damit die Warnfarbe zum Sofortgebot-Button passt ----- */ .detail__time { color: var(--edikte-red) !important; } /* ========================================================================== #B2 FEINSCHLIFF BATCH 2 (edikte) Detailseite: Hauptbild ~30% kleiner, Galerie-Thumbnails ~30% groesser + kompakte Galerie-Raender (~5px), "Mindestgebot" linksbuendig mit Abstand. Listenansicht: "Details anzeigen"-Button entfernt (Titel + Bild sind klickbar; Meistbot + Gebotszahl fuellen die Aktionszone), Titel/Untertitel strikt einzeilig (Ellipsis), Vorschaubilder ~15% groesser, Restzeit fett aber nur so gross wie der Untertitel. Dieser Abschnitt steht am Dateiende -> gewinnt bei gleicher Spezifitaet gegenueber den obigen Regeln (spaetere Quelle). ========================================================================== */ /* --- B2-1 Detail-Hauptbild ~30% kleiner: Bildbox links auf 70% Breite (nur in der zweispaltigen Desktop-Ansicht ab 992px). Linksbuendig unter dem Titel; die Galerie-Thumbnails darunter werden dadurch relativ groesser. */ @media (min-width: 992px) { .detail__main-row { align-items: flex-start; /* Spalten nicht mehr auf gleiche Hoehe strecken */ } .detail__media-col > .panel { flex: 0 0 auto; align-self: flex-start; /* nicht auf Spaltenhoehe strecken */ width: 100%; /* B2-1 rev2: Hauptbild wieder volle Spaltenbreite bis zur rechten Spalte (Abstand = Spalten-Gutter). Wirkt jetzt nicht mehr riesig, weil die Galerie-Thumbs groesser sind. */ } .detail__media-col #previewimg, .detail__media-col #previewimg.full { width: 100%; max-width: 100%; height: auto; /* natuerliches Seitenverhaeltnis, kein erzwungenes Quadrat */ } } /* --- B2-1/B2-2 Detail-Galerie (Thumbnail-Streifen unter dem Bild): Thumbs ~30% groesser (Kachel 100->130px in den Partials gesetzt) und oben/unten nur noch ~5px Abstand statt der grossen Luft. */ #ListingImageThumbsCarousel.everslider { margin-top: 6px !important; margin-bottom: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Container + Bild fuellen die 150px-Kachel formatfuellend - kein Bootstrap- img-thumbnail-Kasten (Rahmen+Polster) mehr, der das Bild kleindrueckte und Leerraum erzeugte. Dezenter duenner Rahmen, knackig-eckiger 2px-Radius. */ #ListingImageThumbsCarousel .awe-carousel-img-container { width: 100%; height: 100%; } #ListingImageThumbsCarousel .es-slides img.img-thumbnail { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; padding: 0; margin: 0; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; background: transparent; cursor: pointer; } /* --- B2-3 "Mindestgebot"-Zeile unter dem Gebots-Eingabefeld linksbuendig und mit etwas Abstand zur Eingabebox darueber. --- */ .detail__minbid { text-align: left !important; margin-top: 6px; } /* --- B2-5 rev: Titel + Untertitel duerfen bis zu 2 Zeilen umbrechen (statt einzeilig frueh abgeschnitten) und nutzen die volle Breite der Hauptzone. --- */ .listing .title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; /* bis zu 2 Zeilen, dann "..." (fuellt jetzt korrekt, da das 105px-Padding weg ist) */ -webkit-box-orient: vertical; width: 100%; overflow: hidden; line-height: 1.25; } .listing .subtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; overflow: hidden; line-height: 1.3; } /* DAS "Riesenloch"-Fix: AWE setzt ".listing .title.inlinebidding { padding-right: 105px }" (Platzhalter fuer die frueher ABSOLUT positionierte CTA). Im edikte-Grid ist die CTA eine eigene Spalte -> die 105px sind ueberfluessig und erzeugten genau das Loch zwischen Titel und Sofortgebot. Spezifischer als die Vendor-Regel -> gewinnt. */ .listing .title.inlinebidding { padding-right: 0; } .listing .row > *:not(.img-container) { min-width: 0; /* erlaubt Umbruch/Ellipsis im Grid (Default waere min-width:auto) */ } /* --- B2-6 Vorschaubilder in der Listenzeile ~15% groesser (96->110px; Container-Breite entsprechend etwas weiter). --- */ .listing .img-container img { max-height: 110px; } @media (min-width: 768px) { .listing .img-container { max-width: 150px; } } /* --- Task A: Sofortgebot-Button FESTE Breite (nicht dynamisch je Preis). Bemessen fuer den laengsten moeglichen Betrag "Sofortgebot 999.999,00 €", Text zentriert. So sind alle Buttons gleich breit und die Aktions-Spalte konstant. --- */ @media (min-width: 768px) { .listing .cta .InlineQuickBid, .listing .cta .btn-danger { display: inline-block; width: 232px; max-width: 100%; text-align: center; white-space: nowrap; box-sizing: border-box; } } /* --- B2-7 Restzeit fett, aber nur so gross wie der Untertitel (nicht groesser). --edikte-fs-sub == Untertitelgroesse. --- */ .listing .time { font-weight: 700; font-size: var(--edikte-fs-sub); } /* --- Issue 2: Sidebar-Spalte (.categories) hat ab 768px padding-left:25px - das ist fuer die ECHTE Sidebar ab 992px gedacht. Bei 768-991 ist sie gestapelt (volle Breite), wodurch die "Versteigerung/Kategorie waehlen"-Dropdowns ~10px eingerueckt waren. Hier auf das Standard-Gutter (15px) zuruecksetzen -> gleiche Flucht wie die Content-Boxen. --- */ @media (min-width: 768px) and (max-width: 991.98px) { .categories { padding-left: 15px !important; } } /* ========================================================================== Kontextueller Bietstatus (Höchstbieter/Überboten/Gewonnen/Verloren) als schmaler Overlay-Streifen am UNTEREN Bildrand der Listenzeile -- statt oben rechts kollidierend mit Preis/Sofortgebot. Markup dazu in Views/Shared/Listing_AuctionRow_WithBidding.cshtml (Label-Spans jetzt in .img-status-wrap um das Bild). ========================================================================== */ .listing .img-container .img-status-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .listing .img-container .img-status-wrap > a { display: block; } .listing .img-container .img-status-wrap img { max-width: 100%; height: auto; } .listing .img-container .img-status-wrap > .InlineContextualStatus.status-type { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; min-width: 0; margin: 0; border-radius: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.35; padding: 3px 6px; box-sizing: border-box; text-transform: uppercase; font-weight: 700; letter-spacing: .3px; z-index: 5; } .listing .img-container .img-status-wrap > .label-success.InlineContextualStatus { background-color: rgba(60,118,61,.92); color: #fff; } .listing .img-container .img-status-wrap > .label-danger.InlineContextualStatus { background-color: rgba(169,68,66,.92); color: #fff; } .listing .img-container .img-status-wrap > .label-warning.InlineContextualStatus { background-color: rgba(90,90,90,.92); color: #fff; } .listing .img-container .img-status-wrap > .InlineContextualStatus.awe-hidden { display: none; } /* ========================================================================== #B MOBIL (<768px): Kopf-Dropdown "Auktionen" lesbar machen + Ueberbreite weg Ursache: Das Kopfmenue ist