/* ============================================================ OPTISCHE KALKULATION · DruckEinfach Branding (KOMPLETT v9.44 · Kategorieseite Weissraum) Stand: 22.06.2026 ------------------------------------------------------------ Diese Datei ersetzt deine bisherige Custom-CSS komplett. Im CSS-Feld alles markieren, loeschen, diesen Inhalt einfuegen. (Enthaelt deinen Navigations-Block "Zwischenebene ueberspringen".) Neu in v9.44: - Kategorieseite: mehr Weissraum zwischen den Textabschnitten. Die h2-Sektionstitel hatten margin 0/0 -> jetzt 44px oben / 14px unten. Gruppiert die Bloecke ("Passendes Papier", "Verschiedene Formate", "Druckdaten") und beruhigt den Mittelteil. Ein Eingriff. Neu in v9.43 (Kategorie-/Uebersichtsseite an Konfigurationsseite angeglichen): - Hintergrund main.category: #fbf8f5 -> #f8f3f3 (gleicher Grund wie Konfig). - Seitentitel ("Flyer drucken ..."): generisches #333 -> Bordeaux, 36px -> 30px. Nur direkter h1 im rte_container (verschachtelter .de-hero-Titel bleibt unberuehrt). - Sektionstitel (h2, "Format waehlen" etc.): #1f1f1f -> var(--de-ink). - step-label: falscher Beerenton #8a2d5d -> echtes var(--de-bordeaux). - step-title: #1f1f1f -> var(--de-ink). - Format-Kacheln (.card): dezenter Schatten ergaenzt (wie Konfig-Karten); Produktname #2f2f2f -> var(--de-ink); "Zum Produkt"-Link #ff742e (Orange) -> var(--de-bordeaux), damit Orange den Bestell-CTAs vorbehalten bleibt. - OFFEN: h3 "Einfach bezahlen" (#822e58) ist ein Theme-Element ohne klare Klasse -> separat per Live-Check anzusteuern, falls gewuenscht. Neu in v9.42: - "Datenblaetter anzeigen"-Titel: Selektor von #showTemplates auf #resellerArticle #printTemplates #showTemplates angehoben (3 IDs), weil das Theme die font-size sonst auf 14px zurueckzog. Jetzt greifen die 20px wie bei den anderen Kartentiteln. Neu in v9.41: - "Datenblaetter anzeigen" (#showTemplates) an die anderen Karten der rechten Spalte angeglichen: weisse Flaeche mit 10px Radius + gleichem Schatten, Titel von 14px auf 20px (wie Preisberechnung/Versandinfo), dezenter Hover. Bleibt zentriert (es ist ein Button, kein Inhaltstitel). War vorher randlos/flach, weil section#printTemplates aus der Karten-Regel ausgeschlossen ist und die weisse Flaeche am Link haengt. Neu in v9.40: - Sektionstitel-Regel breiter gefasst: statt nur .de-spec/.de-checklist jetzt #product_informations h2/h3 -> Bordeaux 20px. Damit wird auch "Versand & Verpackung" (hat keine de-Klasse) erfasst, das vorher schwarz blieb. Box-Titel ".de-askbox h3" bleibt die Ausnahme (neutral, 16px). Neu in v9.39 (Typo-System, Variante B): - Titel-Hierarchie ueber Groesse + Gewicht + Farbe statt "alles Bordeaux": - Produkttitel (#calculation h1): 28px/700/Bordeaux. - Karten-/Sektionstitel (Preisberechnung, Das Wichtigste): bleiben 20px/700/Bordeaux. - Gruppentitel im Konfigurator (Produkteigenschaften, Auflage, Verpackung & Versand, "Darf es..."): 18px/700, Farbe Bordeaux -> neutral var(--de-ink). Treten zurueck, gliedern nur noch. - Box-Titel "Haben Sie Fragen?" (.de-askbox h3): aus dem Sektions- Block geloest, jetzt 16px/700/neutral. - Feld-Labels (.optionName): 16px -> 14px, damit Gefaelle zum Gruppentitel (18px) sichtbar ist. Gewicht/Farbe unveraendert. - Hintergrund: Hausschrift hat nur 400/700 (kein 600) -> System nutzt bewusst nur diese beiden Gewichte. Neu in v9.38: - Linke Konfig-Karte (#calculation) an die rechten Karten angeglichen: exakt gleicher Radius (10px) und Schatten wie #total_block / #delivery. War vorher weiss, aber randlos ohne Rundung/Schatten -> wirkte als Flaeche statt als Karte. Jetzt sprechen alle Karten dieselbe Sprache. Neu in v9.37: - "Haben Sie Fragen?"-Box (.de-askbox): orangen Rahmen entfernt, ersetzt durch ruhige Beige-Flaeche (#f4efe7) + dezenten Rahmen (#e8ded0), 8px Radius, kein Schatten. Orange bleibt damit allein den Bestell-CTAs vorbehalten. Neu in v9.36: - Staffelpreis-Tabelle kompakter: Zeilenhoehe reduziert (td-Padding 10->6px, th-Padding 11->8px, line-height 1.4). Bei 19 Auflagen-Stufen deutlich kuerzere Tabelle, weiter lesbar. Neu in v9.35: - Staffelpreis-Tabelle: Selektor korrigiert. Die Tabelle ist table#priceOverview (in section#priceTable), NICHT in fieldset.priceTableText (das ist nur der Titeltext daneben). Anker jetzt ueber die ID #priceOverview -> greift sicher. Das Grau war nur der Browser-Standard fuer , kein Theme. Neu in v9.34 (enthaelt alles aus v9.33): - Staffelpreis-Tabelle ("Darf es ein wenig mehr sein?") ans Branding: Sie sitzt in
und kam komplett aus dem Theme (grauer Header #f0f0f0, keine Zeilentrenner). Neu: - Kopfzeile: Beige-Flaeche + Bordeaux-Schrift + Bordeaux-Unterlinie. - Datenzeilen: warmer Trenner var(--de-line), dunkle/warme Schrift. - Dezenter Zeilen-Hover (rosa-soft). Block steht am Dateiende. Falls der Theme-Header trotzdem grau bleibt, greift application.css mit hoeherer Spezifitaet -> dann Praefix noetig (live gegenpruefen wie bei den Feldern). Neu in v9.33: - Konfigurator nach dem Linien-/Border-System vereinheitlicht: - Auswahlboxen (Felder): Hintergrund #f6f4f1 -> #fff (weiss, wie Karten). - Zweistufiges Liniensystem: --de-line #ece4da = Trenner & Karten (heller, dezent) --de-field #d8ccc2 = Felder & Kacheln (kraeftiger, fuer Affordance) - Label-Farbe (.optionName + Info-Icon): #707070 -> #6b5d60 (waermer). - Preisberechnungs-Trenner auf var(--de-line) vereinheitlicht. - Toter Code entfernt: #delivery .showPaperWeight (Element ist versteckt). - OFFEN/Naechster Schritt: Staffelpreis-Tabelle ans Branding (braucht noch den Live-Selektor) + optionale Akzentlinie unter den Gruppentiteln. Neu in v9.32: - Radius-System Produktseite vereinheitlicht (live getestet 22.06.2026): - Karten rechts (Preisberechnung/Versand): 0 -> 10px. - Liefer-Countdown: 3px -> 8px. - Optionsfelder (Labels) und Format-Kacheln: -> 8px. WICHTIG: brauchen #visual_calculation-Praefix, sonst gewinnt application.css mit 2px (eigener Praefix-Block am Ende der Konfigurator-Sektion). - CTA "Jetzt bestellen": bleibt pillenfoermig (Theme-Wert). Die wirkungslose 3px-Regel wurde entfernt. - Toter Code entfernt (per Selektor-Check 22.06.2026 verifiziert, 0 Treffer): - #bulk / #bulk_height (Staffelpreise-Altcode) komplett. - .resellerArticle .priceGroup (Selektor existiert nicht). - Doppelte color-Zeile in .optionName .info. - Tote Eigenschaften in label.check::before (nur display:none bleibt). - Doppelte .de-hero-img-Definition (die zweite, mit object-fit, bleibt). - Hinweis: #delivery .showPaperWeight ist wirkungslos (Element versteckt), aber harmlos und bewusst noch nicht angefasst. Neu in v9.6: - Header-Fix Mobile: globale feste Header-Hoehe (260px) entfernt; greift nur noch ab 768px aufwaerts als height:auto. Mobile (<768px, fixed) bleibt unberuehrt; schliesst zugleich die Luecke bei 901–1023px. Neu in v9.5: - Hero-Slider (#slider) auf Branding gebracht: - Titel: hellrosa (var(--de-rosa)), keine Box, kraeftiger (700). - Subline: helleres Rosa (#f3d9da). - CTA: CI-Orange, pillenfoermig (24px) statt eckig. - Dot-Navigation in CI-Farben (Rosa / Bordeaux). Hintergrund kommt als textfreies Bild; Text liegt als Overlay. Neu in v9.4: - Suchfeld ruhiger (Variante C): 1px grauer Rahmen, graue Schrift. Neu in v9.3: - Suchfeld schmaler (260px) + 16px Abstand rechts zu "Anmelden". Neu in v9.2: - Suche neu integriert: Kopfzeile vertikal zentriert; Ghost-Lupe zurueck ins Feld geholt. Neu in v9.1: - Top-Banner-Hoehe 75px -> 45px; header.main 290 -> 260. Neu in v9: - Abschnitt "GLOBALE KOPFZEILE": Banner Bordeaux + Suche (Outline). Neu in v8: - Tab-Inhalte (.de-spec / .de-checklist / .de-askbox) + Artikelnummer unter dem Titel ausgeblendet. Frueher (v5): Aufklapp-Listen auf Rosa-/Bordeaux-Sprache der Kacheln. Aktiv (v2-v4, orientiert an Uldry): Feldwert dunkler, Hilfe-Icons grau, Linien entfernt, Feld-Labels grau, Pfeil grau, Preiszeilen-Fix. Rest unveraendert (Kacheln, Tooltips, rechte Spalte, Uebersicht, Hero-Beschreibung, Papier, USP). ============================================================ */ :root{ --de-bordeaux:#783457; --de-bordeaux-dark:#5d2843; --de-orange:#ff742e; --de-rosa:#ffc4c5; --de-rosa-soft:#ffe9e9; --de-beige:#ece5dd; --de-line:#ece4da; --de-field:#E7E0E6; --de-ink:#2c2330; --de-muted:#595959; } /* ---- Off-White-Seitenhintergrund Kalkulationsseite ---- */ /* v9.62: eigener, hellerer Ton (#F7F2F5) statt --de-beige – abgekoppelt vom Startseiten-Beige, da nur die Detailseite betroffen sein soll. */ main#visual_calculation{ background: #F7F2F5 !important; } /* ============================================================ GLOBALE KOPFZEILE (Top-Banner + Suche) ============================================================ */ /* ---- Top-Banner (#service-bar) ---- */ header.main #service-bar{ background:#FF4B5B !important; } header.main #service-bar, header.main #service-bar a, header.main #service-bar span{ color:#fff !important; } header.main #service-bar a:hover{ color:#fff !important; text-decoration:underline !important; } /* ---- Banner-Hoehe reduziert (war 75px) ---- */ header.main #service-bar { height:45px !important; } header.main #service-bar span { line-height:45px !important; font-size:14px !important; } header.main #service-bar a { font-size:14px !important; } /* Header-Hoehe nur ab Tablet aufwaerts (NICHT auf Mobile <768 — dort fixed 80/50px). auto schliesst zugleich die Luecke bei 901–1023px. */ @media (min-width:768px){ header.main { height:auto !important; } } /* ---- Kopfzeile vertikal ausrichten ---- */ header.main .wrp:nth-of-type(2){ align-items:center !important; } header.main #customer-menu{ align-items:center !important; justify-content:flex-end !important; /* Anmelden + Warenkorb rechts */ gap:24px !important; position:static !important; /* damit .wrp der Anker fuer die absolute Suche wird */ } /* leeren USP-Platzhalter entfernen (sass im mittleren Flex-Slot) */ header.main #header_usp{ display:none !important; } /* ---- Mehr Abstand zwischen Logo-Zeile und Navigation ---- WICHTIG: #navbar liegt AUSSERHALB von header.main -> ohne header.main davor. */ #navbar{ padding-top:24px !important; } /* ---- Suche (form.search): Variante C — ruhiger, 1px grauer Rahmen ---- */ header.main form.search{ float:none !important; position:static !important; left:auto !important; margin: 0 !important; margin-right: 40px !important; display:flex !important; align-items:center !important; width:260px !important; height:40px !important; background:#fff !important; border:1px solid var(--de-line) !important; border-radius:8px !important; overflow:hidden !important; box-sizing:border-box !important; } header.main form.search:focus-within{ border-color:var(--de-bordeaux) !important; box-shadow:0 0 0 3px rgba(120,52,87,.12) !important; } header.main form.search #search{ flex:1 !important; height:36px !important; padding:0 14px !important; border:0 !important; outline:0 !important; background:transparent !important; font-size:14px !important; font-style:normal !important; color:var(--de-muted) !important; box-shadow:none !important; font-family: regular !important; } header.main form.search #search::placeholder{ color:var(--de-muted) !important; font-family: regular !important; } header.main form.search .headerSearchSubmit{ flex:none !important; position:static !important; right:auto !important; top:auto !important; width:42px !important; height:36px !important; padding:0 !important; border:0 !important; cursor:pointer !important; text-indent:-9999px !important; overflow:hidden !important; appearance:none !important; -webkit-appearance:none !important; background:#fff url("data:image/svg+xml,") center no-repeat !important; } /* Untertitel im Produktmenü als Badge (aktuell: same-day) */ .cd-secondary-dropdown strong em { display: inline-block; margin-left: 8px; padding: 2px 8px; font-family: inherit; font-size: 10px; font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #ff742e; border-radius: 999px; vertical-align: middle; } /* ============================================================ KONFIGURATOR · LINKE SPALTE (#reseller_attributes) ============================================================ */ #calculation h1{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:32px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.01em !important; color:var(--de-bordeaux) !important; } /* Gruppentitel (Produkteigenschaften, Auflage ...): neutral statt Bordeaux. Groesse/Gewicht bleiben (18px/700) – nur die Farbe tritt zurueck, damit Bordeaux den Produkt- und Kartentiteln vorbehalten bleibt. */ #reseller_attributes .optionGroup h2{ margin:30px 0 14px 0 !important; padding:0 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:18px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--de-ink) !important; } #reseller_attributes section.optionGroup.DynamicOptionGroup > h2, #reseller_attributes #shippingInfoHeadline { border-top: 1px solid #E7E0E6 !important; padding-top: 20px !important; } /* Absicherung: erfasst auch Tabellentitel ("Darf es...") und Verpackung-Headline, falls sie nicht in .optionGroup liegen. */ #calculation #reseller_attributes h2{ color:var(--de-ink) !important; } #reseller_attributes .optionName{ display:block !important; margin:0 0 7px 0 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:13px !important; font-weight:600 !important; color:#1F1A1B !important; } #reseller_attributes .optionName .info, #reseller_attributes .optionName .info::before{ color:#6b5d60 !important; } #visual_calculation #reseller_attributes .optionGroup .optionWrapper fieldset .optionGroupCon { border: 1px solid #D1CDD0 !important; border-radius: 8px !important; margin-top: 8px !important; box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.08) !important; } #reseller_attributes .optionName .info svg{ fill:var(--de-muted) !important; } #reseller_attributes label.selectIconList, #reseller_attributes label.selectList{ border:1px solid var(--de-field) !important; border-radius:8px !important; background:#fff !important; color:#1F1A1B !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-weight:400 !important; font-size:14px !important; box-sizing:border-box !important; padding-left:10px !important; } /* Platzhalter "bitte waehlen" Text einruecken (nur dieses Feld, ohne .check) */ #reseller_attributes label.selectList:not(.check){ padding-left:30px !important; } #reseller_attributes label.selectIconList.active, #reseller_attributes label.selectList.active{ border-color:#D1CDD0 !important; } #reseller_attributes label.check::before{ display:none !important; } #reseller_attributes label.check::after{ content:"" !important; background-image:none !important; background-color:var(--de-bordeaux) !important; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain !important; mask:url("data:image/svg+xml;utf8,") no-repeat center / contain !important; width:14px !important; height:14px !important; transform:none !important; top:50% !important; margin-top:-7px !important; right:14px !important; border:0 !important; } #visual_calculation #auflage_freie_menge { background: #fff !important; } #visual_calculation .btnCalcOptical { border-radius: 8px !important; } /* ---- KACHELN (.panel.fakeOptionSelect) ---- */ #visual_calculation #reseller_attributes .optionGroup .optionWrapper fieldset.selectOptions .conOptions { border: 1px solid #D1CDD0 !important; border-radius: 8px !important; margin-top: 8px !important; box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.08) !important; } #reseller_attributes .panel.fakeOptionSelect{ border:1px solid #D1CDD0 !important; border-radius:8px !important; background:#fff !important; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } #reseller_attributes .panel.fakeOptionSelect:hover{ border-color:#D1CDD0 !important; background:#F5E8EE !important; box-shadow:0 4px 14px rgba(120,52,87,.13) !important; transform:translateY(-2px) !important; } #reseller_attributes .panel.fakeOptionSelect.selected{ border-color:#D1CDD0 !important; background:#F5E8EE !important; } #reseller_attributes .panel.fakeOptionSelect img{ display: none !important; } #reseller_attributes .panel.fakeOptionSelect p{ margin:8px 0 0 0 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:13px !important; font-weight:400 !important; line-height:1.3 !important; color:#1F1A1B !important; } #reseller_attributes .panel.fakeOptionSelect.selected p{ font-weight:500 !important; color:#783457 !important; } #reseller_attributes .panel.fakeOptionSelect .hoverOverlay{ background:transparent !important; } #reseller_attributes .panel.fakeOptionSelect .selectedOverlay{ background:none !important; background-image:none !important; } #reseller_attributes .panel.fakeOptionSelect .selectedOverlay::before, #reseller_attributes .panel.fakeOptionSelect .selectedOverlay::after{ content:none !important; background:none !important; } #reseller_attributes .panel.fakeOptionSelect.selected::after{ content:"\2713" !important; position:absolute !important; top:6px !important; right:7px !important; width:18px !important; height:18px !important; border-radius:50% !important; background:var(--de-bordeaux) !important; color:#fff !important; font-size:11px !important; line-height:18px !important; text-align:center !important; font-weight:700 !important; z-index:4 !important; display:block !important; } /* ---- RADIUS-DURCHSETZUNG: Felder & Kacheln (8px) ---- Das zweite #visual_calculation hebt die Spezifitaet ueber den Theme-Override in application.css (label ... border-radius:2px), der sonst die normalen Regeln oben aussticht. Live getestet 22.06.2026. */ #visual_calculation #reseller_attributes label.selectIconList, #visual_calculation #reseller_attributes label.selectList, #visual_calculation #reseller_attributes .panel.fakeOptionSelect{ border-radius:8px !important; } /* ============================================================ DROPDOWN-LISTEN-OPTIONEN (Format, Datencheck, Verpackung & Versand) ============================================================ */ #reseller_attributes .optionGroupCon ul li.fakeOption, #reseller_attributes ul.fakeSelect li.fakeOption{ transition:background-color .15s ease, color .15s ease !important; background: #fff !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #1F1A1B !important; } #reseller_attributes .optionGroupCon ul li.fakeOption.selected, #reseller_attributes ul.fakeSelect li.fakeOption.selected{ background: #F5E8EE !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #783457 !important; } #reseller_attributes .optionGroupCon ul li.fakeOption:hover, #reseller_attributes ul.fakeSelect li.fakeOption:hover, #reseller_attributes .optionGroupCon ul li.fakeOption.selected:hover, #reseller_attributes ul.fakeSelect li.fakeOption.selected:hover{ background: #F5E8EE !important; color: var(--de-bordeaux) !important; } /* ============================================================ RECHTE SPALTE (Artikel / Optische Kalkulation) ============================================================ */ #resellerArticle > section { box-sizing: border-box !important; } #resellerArticle > section:not(#printTemplates) { background: #fff !important; border: 1px solid #E7E0E6 !important; border-radius: 10px !important; padding: 20px !important; margin: 0 0 16px !important; box-shadow: none !important; } /* ---- LINKE KONFIG-KARTE (#calculation) an die rechten Karten angleichen ---- #calculation ist die weisse linke Spalte (Bild + Konfigurator + Tabelle). Hatte 0px Radius / keinen Schatten -> jetzt exakt gleich wie die rechten Karten (#total_block, #delivery). Padding bleibt unangetastet. */ #calculation { border: 1px solid #E7E0E6 !important; border-radius: 10px !important; box-shadow: none !important; } /* "Datenblaetter anzeigen" (#showTemplates) als Karte – analog zu den anderen Karten der rechten Spalte. Die weisse Flaeche liegt auf dem Link selbst; section#printTemplates ist nur ein transparenter Wrapper (deshalb war es per :not(#printTemplates) aussen vor). Bleibt zentriert, weil es ein Button ist, nicht ein Inhaltstitel. Hohe Spezifitaet (3 IDs), weil das Theme die font-size sonst auf 14px ueberschreibt. */ #resellerArticle #printTemplates #showTemplates { display:flex !important; align-items:center !important; justify-content:center !important; height:44px !important; background:#fff !important; border: 1px solid #783457 !important; border-radius:10px !important; box-shadow:0 1px 3px rgba(44,35,48,.05) !important; padding:0 20px !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:13px !important; font-weight:700 !important; color:var(--de-bordeaux) !important; text-align:center !important; text-decoration:none !important; } #resellerArticle #printTemplates #showTemplates:hover { box-shadow:0 2px 8px rgba(44,35,48,.10) !important; } #resellerArticle > section > h2 { margin: 0 0 14px !important; padding: 0 !important; font-size: 20px !important; font-weight: 700 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; line-height: 1.3 !important; color: var(--de-bordeaux) !important; border-bottom: none !important; } #resellerArticle > section#delivery > h2 { font-size: 14px !important; color: #000 !important; } /* ---- KARTE 1 · Preisberechnung (#total_block) ---- */ #resellerArticle > section#total_block > h2 { font-size: 20px !important; font-weight: 700 !important; } #total_block .row { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin: 0 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; } #total_block .row::before, #total_block .row::after { display: none !important; } #total_block .row > span:first-child { float: none !important; color: var(--de-muted) !important; } #total_block .row > span:last-child, #total_block .row .resellerPrice { color: var(--de-muted) !important; text-align: right !important; } #total_block #vat_in_percent { color: var(--de-muted) !important; font-size: 14px !important; } #total_block hr { border: 0 !important; border-top: 1px solid var(--de-line) !important; margin: 14px 0 !important; } #total_block .row.total { margin: 0 !important; } #total_block .row.total > span:first-child { color: var(--de-bordeaux) !important; font-weight: 700 !important; font-size: 16px !important; } #total_block .row.total > span:last-child, #total_block .row.total .resellerPrice { color: var(--de-bordeaux) !important; font-size: 16px !important; font-weight: 800 !important; } #next_step.btn.success { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 48px !important; margin: 16px 0 0 !important; padding: 0 16px !important; background: var(--de-orange) !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; box-shadow: 0px 4px 12px rgba(245, 158, 11, 0.2) !important; cursor: pointer !important; } #next_step.btn.success:hover { background: #e85f1c !important; } #next_step.btn.success::before, #next_step.btn.success::after { content: none !important; display: none !important; } #articleOffer { display: inline-block !important; margin: 0 !important; color: var(--de-bordeaux) !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: underline !important; } #recommendArticle { display: inline-block !important; margin: 0 !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: underline !important; } /* ---- KARTE 2 · Versandinformation (#delivery) ---- */ #delivery .content { overflow: hidden !important; } #delivery .content img { float: left !important; width: 40px !important; height: auto !important; margin: 2px 14px 0 0 !important; } #delivery .content h3 { margin: 0 0 2px !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: #6B6466 !important; } #delivery .content .date, #delivery #deliveryDate { display: block !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: var(--de-orange) !important; } #delivery_countdown { clear: both !important; margin: 14px 0 0 !important; padding: 10px 12px !important; background: #F7F2F5 !important; border: none !important; border-radius: 8px !important; font-size: 11px !important; line-height: 1.4 !important; color: var(--de-ink) !important; } /* ---- Button 3 · Datenblaetter (#printTemplates), ohne Karte ---- */ #printTemplates { margin: 0 !important; padding: 0 !important; } #printTemplates #showTemplates { display: block !important; box-sizing: border-box !important; width: 100% !important; padding: 12px 16px !important; background: #fff !important; border: none !important; border-radius: 0 !important; color: var(--de-bordeaux) !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; } #printTemplates #showTemplates:hover { background: var(--de-beige) !important; } /* ============================================================ INFO-TOOLTIPS (?-Icons) ============================================================ */ span.info .tooltip { font-size: 12px !important; line-height: 1.35 !important; padding: 14px 16px !important; max-width: 300px !important; color: var(--de-ink) !important; } span.info .tooltip p { font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; } span.info .tooltip strong { font-size: 13px !important; line-height: 1.25 !important; font-weight: 700 !important; } span.info .tooltip > strong:first-child { display: none !important; } span.info .tooltip br + br { display: block !important; content: "" !important; margin-top: 8px !important; } /* ============================================================ PRODUKTKACHEL-BEREICH · Startseite + Kategorie "Druckprodukte" (v9.45 — Kategorieseite an Startseite angeglichen) Startseite: section.trade-groups.sidebar Kategorie: section.trade-groups.full -> Visuelle Regeln gelten neu fuer BEIDE. Layout (.sidebar/.full) bleibt der application.css ueberlassen. Kachel: article.card > figure > picture > img + figcaption ============================================================ */ /* Section-Hintergrund */ /* Startseite: Produktkachel-Section auf Beige (v9.56) — gibt den weissen Kacheln Halt und markiert den Produktbereich als eigenen Abschnitt. Passt zum bestehenden Startseiten-Rhythmus (Produkte beige > Brandstatement weiss > USP). Die Produktuebersicht (.full) bleibt vorerst hell. */ section.trade-groups.sidebar { background: #F7F2F5 !important; margin-bottom: 0 !important; /* v9.58: 25px Theme-Margin erzeugte einen weissen Spalt zum Brandstatement */ } section.trade-groups.full { background: #F7F2F5 !important; } /* Ueberschrift auf Bordeaux */ section.trade-groups.sidebar h1, section.trade-groups.full h1 { color: var(--de-bordeaux) !important; font-size: 24px !important; } /* Kacheln: weisse Karten + weicher Schatten */ section.trade-groups.sidebar article.card, section.trade-groups.full article.card { background: #ffffff !important; border: 1px solid #E7E0E6 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } section.trade-groups.sidebar article.card figure, section.trade-groups.full article.card figure { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; } /* Icon-Farbe absichern: einen evtl. Weiss-Filter der dunklen .full-Section neutralisieren, damit das (bordeauxfarbene) Icon auf weisser Kachel sichtbar wird. Auf der Startseite wirkungslos -> unschaedlich. GREIFT NUR, wenn das Icon = bordeauxfarbene Datei + Filter ist. Bei einer eigenen WEISSEN Datei hilft nur ein Backend-Bildtausch. */ section.trade-groups.sidebar article.card figure img, section.trade-groups.full article.card figure img { filter: none !important; } /* Label-Streifen unter dem Bild */ section.trade-groups.sidebar article.card figcaption, section.trade-groups.sidebar article.card figcaption h2, section.trade-groups.full article.card figcaption, section.trade-groups.full article.card figcaption h2 { color: var(--de-bordeaux) !important; } section.trade-groups.sidebar article.card figcaption, section.trade-groups.full article.card figcaption { text-align: center !important; padding: 14px 10px !important; border-top: 0 !important; background: #ffffff !important; } /* Hover */ section.trade-groups.sidebar article.card:hover, section.trade-groups.sidebar article.card:focus-within, section.trade-groups.full article.card:hover, section.trade-groups.full article.card:focus-within { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(120,52,87,.16) !important; border-color: var(--de-bordeaux) !important; } /* "Zur Warengruppe"-Link ausblenden */ section.trade-groups.sidebar article.card figcaption .link, section.trade-groups.full article.card figcaption .link { display: none !important; } /* "Neu"-Badge entfernen */ section.trade-groups.sidebar article.card .badge, section.trade-groups.sidebar article.card .neu, section.trade-groups.sidebar article.card .label-neu, section.trade-groups.full article.card .badge, section.trade-groups.full article.card .neu, section.trade-groups.full article.card .label-neu { display: none !important; } /* ============================================================ STARTSEITE · HINTERGRUND-RHYTHMUS DER CONTENT-SEKTIONEN Reihenfolge (Variante A, Reihenfolge im Backend per Text-Tausch): Produkte(beige) > Brandstatement > USP > Bewertungen > Same-Day ============================================================ */ /* Brandstatement "Ihre Druckerei in Bern": von Rosa (#fff3f4) auf Weiss — klarer Schnitt zur beigen Produkt-Section darueber (Beige neben Rosa wirkt schmutzig). */ /* v9.58: Der Wrapper um das Brandstatement hatte weissen Hintergrund + 65px Padding oben/unten -> das erzeugte die weissen Streifen um den Bordeaux-Block. Hintergrund transparent, Padding 0: das Padding des Bordeaux-Blocks selbst (76px) reicht. Auf der Startseite existiert .cms_homepage_text nur EINMAL (live geprueft), daher keine Nebenwirkung. */ .cms_homepage_text{ background: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* USP-Block: urspruengliche Hintergrundfarbe #f9f7f5 beibehalten. Full-Bleed bleibt noetig, weil der Block nach dem Sektions-Tausch in einem auf 1150px begrenzten Wrapper sitzt. */ section.block.block-usps{ background:#f9f7f5 !important; /* Full-Bleed: Hintergrund bis an die Viewport-Raender ziehen; der innere .wrp zentriert den Inhalt weiterhin auf 1150px. */ width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } /* ============================================================ STARTSEITE · HERO-SLIDER (#slider) — Branding Hintergrund = hochgeladenes (textfreies) Bordeaux-Bild; Titel/Subline liegen als Hellrosa-Overlay darueber. ============================================================ */ /* Titel: hellrosa, keine Box */ #slider .slide figcaption strong{ background:none !important; padding:0 !important; color:var(--de-rosa) !important; /* #ffc4c5 */ font-weight:700 !important; font-size: 50px !important; line-height: 1.0 !important; text-transform: uppercase !important; } body #slider .slide figcaption em { font-family: "BentonModernTextItalic", Georgia, serif !important; font-style: normal !important; text-transform: none !important; font-size: 52px !important; font-weight: 400 !important; color: var(--de-rosa) !important; line-height: 1.00 !important; } /* Subline: etwas helleres Rosa */ #slider .slide figcaption p{ color:var(--de-rosa) !important; font-size: 16px !important; font-weight: 500 !important; margin-top: 18px !important; } /* CTA: CI-Orange, pillenfoermig wie im Vorbild */ #slider .slide .btn.success{ display:inline-flex !important; align-items:center !important; height:46px !important; padding:0 40px !important; background:var(--de-orange) !important; border-radius:24px !important; color:#fff !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:16px !important; font-weight:500 !important; text-decoration:none !important; } #slider .slide .btn.success:hover{ background:#e85f1c !important; } @media screen and (min-width: 1520px) { #slider .slide figcaption strong { font-size: 56px !important; } body #slider .slide figcaption em { font-size: 58px !important; } #slider .slide figcaption p { font-size: 21px !important; } #slider .slide .btn.success { height: 52px !important; padding: 0 38px !important; font-size: 18px !important; } } /* Dot-Navigation: CI-Farben */ #slider #controlNav a{ width:9px !important; height:9px !important; background:var(--de-rosa) !important; border:1px solid var(--de-rosa) !important; } #slider #controlNav a.current{ background:var(--de-bordeaux) !important; border-color:var(--de-bordeaux) !important; } /* ========================================================= UEBERSICHTSSEITE · FORMAT-KACHELN + FARB-HARMONISIERUNG ========================================================= */ main.category { background: #F7F2F5 !important; } main.category #usp-bar.individualUSP, main.category #usp-bar.individualUSP .wrp { background: #ffffff !important; } main.category section.product-listing.full { background: transparent !important; padding: 28px 0 20px 0 !important; } /* Seitentitel "Flyer drucken ..." auf Bordeaux + kompakter (war #333 / 36px). Nur der direkte h1 im rte_container, damit ein evtl. verschachtelter .de-hero-Titel unberuehrt bleibt. */ main.category section.description .rte_container > h1 { color: var(--de-bordeaux) !important; font-size: 30px !important; } /* Sektionstitel (h2, "Format waehlen" etc.) auf warmes Neutral statt generischem Schwarz/#1f1f1f, passend zur Konfigurationsseite. Zusaetzlich vertikaler Abstand: die h2 hatten margin 0/0, dadurch klebten die Textbloecke aneinander. Mehr Luft drueber gruppiert sie. */ main.category section.product-listing.full h2 { color: var(--de-ink) !important; margin-top: 44px !important; margin-bottom: 14px !important; } main.category section.description h2 { color: rgb(120, 52, 87) !important; font-size: 22px !important; font-weight: 700 !important; padding-top: 30px !important; margin-top: 0 !important; margin-bottom: 14px !important; } main.category > section.description.wrp:first-of-type .rte_container p:not([class*="de-"]) { color: #7a6f76 !important; } main.category section.product-listing.full .step-intro { width: 100%; max-width: 1150px; margin: 0 auto 18px auto; padding: 0; box-sizing: border-box; } main.category section.product-listing.full .step-label { margin: 0 0 6px 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--de-bordeaux); } main.category section.product-listing.full .step-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--de-ink); } main.category section.product-listing.full .card { float: none !important; background: #ffffff !important; border: 1px solid #E7E0E6 !important; border-radius: 12px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important; width: 31.5% !important; } @media screen and (max-width: 800px) { main.category section.product-listing.full .card { width: 48.5% !important; } } @media screen and (max-width: 500px) { main.category section.product-listing.full .card { width: 100% !important; } } main.category section.product-listing.full .card:only-child { width: 400px !important; } main.category section.product-listing.full .card figure { display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; width: 100% !important; } main.category section.product-listing.full .card figure picture { display: block !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; height: 260px !important; } main.category section.product-listing.full .card figure picture img { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; border-radius: 12px 12px 0 0 !important; background: transparent !important; border: 0 !important; } main.category section.product-listing.full .card figcaption { width: 100% !important; padding: 16px 16px 16px !important; text-align: left !important; border-top: 0 !important; background: transparent !important; box-sizing: border-box !important; } main.category section.product-listing.full .card figcaption strong { display: block !important; color: var(--de-bordeaux) !important; font-size: 22px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: left !important; } main.category section.product-listing.full .card figcaption .link { display: inline-block !important; margin-top: 6px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--de-bordeaux) !important; border: none !important; padding: 0 !important; } main.category section.product-listing.full .card:hover, main.category section.product-listing.full .card:focus-within { border-color: #E7E0E6 !important; border-width: 1px !important; box-shadow: 0 10px 24px rgba(120,52,87,.16) !important; transform: translateY(-3px) !important; } main.category section.product-listing.full .card:hover figure, main.category section.product-listing.full .card:hover figcaption { border-color: #f3efe9 !important; background: transparent !important; outline: none !important; } main.category section.product-listing.full .content.flex { gap: 2% !important; justify-content: center !important; } main.category section.product-listing.full .card:hover figcaption { background: transparent !important; } main.category section.product-listing.full .card:hover figcaption strong, main.category section.product-listing.full .card:hover figcaption .link { color: var(--de-bordeaux) !important; } section.trade-groups.full article.card { width: 31.5% !important; box-shadow: none !important; border: 1px solid #E7E0E6 !important; } /* Rundungsfehler-Fix (analog product-listing.full, 5.8.26): Der Flex-Container .trade-groups.full .content erbt vom Theme einen gap von 2.5% (siehe Computed-Tab). Bei 3 Kacheln x 32% + 2 x 2.5% Gap ergab das 101% -> die 3. Kachel brach in die naechste Zeile um. Gap hier explizit auf 2% setzen (wie bei product-listing.full) und Breite auf 31.5% -> 3x31.5% + 2x2% = 98.5%. */ section.trade-groups.full .content { gap: 2% !important; } @media screen and (max-width: 800px) { section.trade-groups.full article.card { width: 48.5% !important; } } @media screen and (max-width: 500px) { section.trade-groups.full article.card { width: 100% !important; } } } section.trade-groups.full article.card:only-child { width: 400px !important; } section.trade-groups.full article.card figure picture { padding: 0 !important; overflow: hidden !important; height: 260px !important; } section.trade-groups.full article.card figure picture img { border-radius: 12px 12px 0 0 !important; object-fit: cover !important; width: 100% !important; height: 100% !important; } section.trade-groups.full article.card figcaption { text-align: left !important; padding: 16px 16px 16px !important; } section.trade-groups.full article.card:hover, section.trade-groups.full article.card:focus-within { border-color: #E7E0E6 !important; border-width: 1px !important; } /* ===== DruckEinfach Hero (Beschreibung 1) ===== */ .de-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; margin: 4px 0 8px 0; } .de-hero-text { min-width: 0; } .de-hero .de-kicker { margin: 0 0 8px 0; } main.category > section.description.wrp:first-of-type .rte_container .de-kicker { color: #ff742e !important; } .de-hero h1 { margin: 0 0 16px 0 !important; font-size: 42px !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #2b2229 !important; } .de-hero-intro { margin: 0 0 24px 0; font-size: 17px; line-height: 1.6; color: #7a6f76; max-width: 48ch; } .de-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .de-btn { display: inline-block; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: 10px; padding: 13px 22px; border: none; cursor: pointer; } .de-hero-cta .de-btn-primary { background: #ff742e; color: #fff !important; } .de-hero-cta .de-btn-primary:hover { filter: brightness(0.96); } .de-hero-cta .de-btn-ghost { background: #fff; color: #783457 !important; border: 1.5px solid #783457; } .de-hero-cta .de-btn-ghost:hover { background: #ece5dd; } .de-hero-visual { position: relative; border-radius: 18px; aspect-ratio: 4 / 3; min-height: 300px; overflow: hidden; } .de-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; } .de-hcard { position: absolute; top: 50%; left: 50%; width: 50%; aspect-ratio: 3 / 2; transform: translate(-50%, -50%) rotate(-2deg); background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #783457; box-shadow: 0 8px 22px rgba(0,0,0,0.16); z-index: 2; } .de-hcap { position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: 11px; color: #783457; background: rgba(255,255,255,0.78); padding: 4px 10px; border-radius: 20px; } .de-hero-startrow { margin: 34px 0 0 0; padding-top: 24px; border-top: 1px solid #e7ddd6; scroll-margin-top: 90px; } .de-hero-startrow .de-kicker { margin: 0 0 8px 0; } .de-hero-startrow h2 { margin: 0 0 8px 0 !important; font-size: 30px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #1f1f1f !important; } .de-hero-startrow-intro { margin: 0; font-size: 17px; line-height: 1.6; color: #7a6f76; } @media (max-width: 900px) { .de-hero { grid-template-columns: 1fr; } .de-hero h1 { font-size: 34px !important; } .de-hero-visual { min-height: 240px; } } /* ===== DruckEinfach Papier-Sektion ===== */ .de-kicker { margin: 30px 0 6px 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ff742e; } .de-section-title { margin: 0 0 10px 0 !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #333 !important; } .de-section-intro { margin: 0 0 24px 0; font-size: 17px; line-height: 1.55; color: #444; max-width: 720px; } .de-musterbar { display: flex; align-items: center; gap: 18px; margin: 0 0 28px 0; padding: 16px 22px; background: linear-gradient(135deg, #ffffff 0%, #fff4ec 100%); border: 1px solid #ffd9c2; border-radius: 14px; } .de-musterbar .de-micon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #ff742e; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; line-height: 1; } .de-musterbar .de-mtxt { flex: 1; } .de-musterbar .de-mtxt b { font-size: 16px; font-weight: 700; color: #1f1f1f; } .de-musterbar .de-mtxt span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: #6a5560; } .de-musterbar .de-mbtn { flex: none; display: inline-block; background: #ff742e; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; padding: 11px 18px; border-radius: 10px; white-space: nowrap; } .de-musterbar .de-mbtn:hover { filter: brightness(0.96); } .de-papiergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 34px 0; } .de-paper { background: #fff; border: 1px solid #e7ddd6; border-radius: 14px; overflow: hidden; box-sizing: border-box; } .de-paper .de-figure { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; height: 120px; padding: 14px 16px; box-sizing: border-box; border-bottom: 1px solid #f3efe9; background-color: #f5f5f3; } .de-paper .de-figure > .de-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .de-paper .de-grm-big { display: flex; align-items: baseline; gap: 2px; font-weight: 700; line-height: 0.85; letter-spacing: -0.02em; color: #783457; font-variant-numeric: tabular-nums; } .de-paper .de-grm-big .num { font-size: 3.4rem; } .de-paper .de-grm-big small { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(120,52,87,0.55); } .de-ton-weiss .de-figure { background-color: #f6f6f4; } .de-ton-gips .de-figure { background-color: #f4f2ec; } .de-ton-weisskuehl .de-figure { background-color: #eef0ee; } .de-ton-elfenbein .de-figure { background-color: #f0e8d3; } .de-ton-naturweiss .de-figure { background-color: #f4f2e9; } .de-ton-creme .de-figure { background-color: #f1ece2; } .de-ton-grau .de-figure { background-color: #e7e8e7; } .de-ton-kraft .de-figure { background-color: #e3d2b6; } .de-struktur-linien .de-figure { background-image: repeating-linear-gradient(90deg, rgba(120,52,87,0.07) 0 1px, transparent 1px 6px); } .de-struktur-koernung .de-figure { background-image: radial-gradient(rgba(120,52,87,0.09) 0.5px, transparent 0.6px); background-size: 4px 4px; } .de-paper .de-body { padding: 14px 16px 16px 16px; } .de-paper .de-badge { display: inline-block; margin: 0 0 10px 0; padding: 4px 10px; font-size: 11px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a2d5d; background: #f7edf3; border-radius: 20px; } .de-paper h3 { margin: 0 0 6px 0 !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #2b2229 !important; } .de-paper .de-nutzen { margin: 0 0 6px 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: #7a6f76; } .de-paper .de-desc { margin: 0 0 12px 0; font-size: 14px; line-height: 1.55; color: #7a6f76; } .de-paper .de-tag { display: inline-block; margin: 0 4px 4px 0; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 20px; color: #783457; background: #ece5dd; } .de-paper .de-tag.de-write { color: #2f7d4f; background: #e8f3ec; } .de-text-title { margin: 0 0 12px 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #1f1f1f !important; } .de-text-body { margin: 0 0 30px 0; font-size: 16px; line-height: 1.6; color: #444; } .de-text-body.de-last { margin-bottom: 0; } @media (max-width: 760px) { .de-papiergrid { grid-template-columns: 1fr; } .de-musterbar { flex-wrap: wrap; } .de-musterbar .de-mbtn { width: 100%; text-align: center; } .de-paper .de-grm-big .num { font-size: 3rem; } } /* ===== DruckEinfach USP-Block ===== */ .de-usp-wrap { margin: 10px 0 8px 0; } .de-usp-kicker { margin: 0 0 6px 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ff742e; } .de-usp-title { margin: 0 0 8px 0 !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #333 !important; } .de-usp-intro { margin: 0 0 24px 0; font-size: 16px; line-height: 1.6; color: #555; max-width: 720px; } .de-usp-grid { display: flex; flex-wrap: wrap; gap: 22px; } .de-usp { flex: 1 1 280px; background: #fff; border: 1px solid #e5e5e5; border-radius: 14px; padding: 26px 24px 24px 24px; box-sizing: border-box; } .de-usp .de-usp-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f7edf3; margin: 0 0 16px 0; font-size: 22px; } .de-usp h3 { margin: 0 0 8px 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #1f1f1f !important; } .de-usp p { margin: 0; font-size: 14px; line-height: 1.6; color: #555; } @media (max-width: 760px) { .de-usp { flex: 1 1 100%; } } /* ============================================================ ARTIKEL-INFOTEXTE (Tab-Inhalte) — Styling fuer Quellcode-HTML ============================================================ */ .de-spec, .de-checklist, .de-askbox{ color:var(--de-ink); line-height:1.6; } /* Alle Sektionstitel im Info-Bereich einheitlich: 20px/700/Bordeaux. Breit ueber #product_informations gefasst, damit auch Titel ohne de-Klasse (z.B. "Versand & Verpackung") erfasst werden. */ #product_informations h2, #product_informations h3{ margin:0 0 12px !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:16px !important; font-weight:700 !important; color:var(--de-bordeaux) !important; } #product_informations p{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:13px !important; font-weight:400 !important; color:#6B6466 !important; } /* Box-Titel "Haben Sie Fragen?" – Ausnahme: kleiner und neutral. */ #product_informations .de-askbox h3{ margin:0 0 8px !important; font-size:16px !important; font-weight:700 !important; color:var(--de-ink) !important; } .de-spec .de-lead{ margin:0 0 18px; color:var(--de-muted); font-size:15px; } .de-spec-row{ display:flex; gap:20px; padding:11px 0; border-top:1px solid var(--de-line); font-size:15px; } .de-spec-row:first-of-type{ border-top:0; } .de-spec-key{ flex:0 0 150px; color:var(--de-muted); } .de-spec-val{ flex:1; color:var(--de-ink); font-weight:600; } .de-spec-more{ display:inline-block; margin-top:18px; color:var(--de-orange); font-weight:700; text-decoration:none; } .de-spec-more:hover{ text-decoration:underline; } .de-checklist ul{ margin:0; padding:0; list-style:none; } .de-checklist li{ position:relative; padding:6px 0 6px 22px; font-size:15px; } .de-checklist li::before{ content:""; position:absolute; left:2px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--de-bordeaux); } .de-askbox{ /* Variante A: ruhige Beige-Flaeche statt orangem Rahmen. Orange bleibt den Bestell-CTAs vorbehalten. Kein Schatten, da die Box in einer Karte sitzt. */ border:1px solid #e8ded0; border-radius:8px; padding:18px 20px; background:#F7F2F5; } .de-askbox p{ margin:0 0 14px; color:var(--de-muted); font-size:15px; } .de-askbox .de-ab-row{ margin:6px 0; font-size:16px; color:var(--de-ink); } .de-askbox a{ color:var(--de-bordeaux); font-weight:700; text-decoration:none; } .de-askbox a:hover{ text-decoration:underline; } #visual_calculation .contentwrapper.left .head .text .articleNumber{ display:none !important; } #visual_calculation .contentwrapper.left .head .text .articleDescription{ margin-top:12px !important; } .showPaperWeight {display: none;} /* ============================================================ ===== Same-Day-Block kompakt (v9.8) ===== Titel mit !important, da die App-CSS gleich spezifisch ist und spaeter laedt. Engere Zeilen + kleinerer Button verringern die Gesamthoehe der Section. ============================================================ */ .block-sameday .block-sameday__headline{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:46px !important; font-weight:600 !important; color:#1F1A1B !important; line-height:1 !important; margin-bottom:10px !important; } .block-sameday .block-sameday__headline em{ line-height:1.05 !important; font-style:normal; color: inherit !important; background: none !important; font-size: 44px !important; } .block-sameday .block-sameday__text{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size:15px; font-weight:400; color:#6B6466; line-height:1.55; margin-bottom:22px; max-width:30em; } .block-sameday .btn-sameday { border-radius: 8px !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 16px 0px !important; } .block-sameday .block-sameday__content-inner{ padding-top:48px; padding-bottom:48px; margin-left: 0 !important; max-width: none !important; } .block-sameday a.btn-sameday{ display:inline-block !important; width:auto !important; min-width:0 !important; white-space:nowrap; padding:12px 26px !important; font-size:15px !important; line-height:1.2 !important; height:auto !important; text-align:center !important; color:#fff !important; border-radius:24px; } .block-sameday .block-sameday__content{ background: #fff !important; } .block-sameday .block-sameday__content { order: 2; } .block-sameday .block-sameday__media { order: 1; } .block-sameday .block-sameday__media { padding: 40px; display: flex; align-items: center; justify-content: center; background: #fff !important; } .block-sameday .block-sameday__media img { width: 80% !important; height: auto !important; max-height: 380px !important; border-radius: 16px !important; object-fit: cover !important; } .block-sameday .block-sameday__content { justify-content: flex-start !important; padding-left: 0 !important; } /* ---- Logo-Grösse reduzieren ---- */ /* ---- Logo: Safari-Fix (kein flex-shrink) ---- */ header.main #brand-logo { flex-shrink: 0 !important; min-width: 220px !important; margin-top: 25px !important; margin-bottom: 25px !important; } #navbar .cd-dropdown-trigger, #navbar .topMenu, #navbar .service-menu > div { text-transform: none !important; } /* ---- Slider Mobile: Bild ausblenden, Farbfläche zeigen ---- */ @media screen and (max-width: 768px) { #slider { min-height: 220px !important; /* \uc0\u8592 NEU */ } #slider figure.slide { background-color: var(--de-bordeaux) !important; min-height: 220px !important; position: relative !important; /* \uc0\u8592 NEU */ } #slider figure.slide picture, #slider figure.slide img { display: none !important; } #slider .slide figcaption { display: block !important; top: 50% !important; transform: translateY(-50%) !important; } #slider .slide figcaption strong { font-size: 22px !important; line-height: 1.15 !important; } #slider .slide figcaption p { font-size: 10px !important; display: block !important; } } @media screen and (max-width: 480px) { #slider { min-height: 180px !important; /* \uc0\u8592 NEU */ } #slider figure.slide { min-height: 180px !important; } #slider .slide figcaption strong { font-size: 18px !important; } #slider .slide figcaption p { display: none !important; } } /* ---- Slider Arrows ausblenden ---- */ #slider .side-nav { display: none !important; } /* ---- Mobile: Abstand unter dem fixed Header kompensieren ---- */ @media screen and (max-width: 767px) { #slider { margin-top: 0px; /* Slider liegt direkt unter body padding — passt */ } #usp-bar { position: relative; z-index: 1; /* Verhindert Überlappung mit fixed Header */ } } @media screen and (max-width: 768px) { .block-sameday .block-sameday__media { padding: 0 !important; } .block-sameday .block-sameday__media img { width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; } .block-sameday .block-sameday__content { padding-left: 20px !important; } .block-sameday__content { padding: 24px 20px !important; } .block-sameday__content-inner { margin: 0 !important; padding: 24px 0 !important; max-width: 100% !important; } .block-sameday__headline { font-size: 24px !important; } .block-sameday__headline em { font-size: 30px !important; } .btn-sameday { width: 100% !important; text-align: center !important; } } /* ---- Separator zwischen Login und Warenkorb: vertikal zentrieren ---- */ header.main #customer-menu a.menu-item-login::after, header.main #customer-menu > button.menu-item-login::after { top: 50% !important; transform: translateY(-50%) !important; height: 20px !important; } /* DE-Anpassungen: graue Texte + Breadcrumbs */ #visual_calculation .contentwrapper.left .head .text .articleDescription{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 14px !important; line-height: 150% !important; color: #6B6466 !important; } nav.breadcrumb a{ color:#444444 !important; } nav.breadcrumb li:last-child a{ color:#822e58 !important; } /* DE-Anpassung: Pfeil bei "bitte waehlen" Feldern an die anderen Dropdowns angleichen (gleicher Chevron) */ #reseller_attributes label.selectList:not(.check)::after{ content:"" !important; background-color:#783457 !important; background-image:none !important; -webkit-mask-image:url("data:image/svg+xml;utf8,") !important; mask-image:url("data:image/svg+xml;utf8,") !important; -webkit-mask-size:contain !important; mask-size:contain !important; -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important; -webkit-mask-position:50% 50% !important; mask-position:50% 50% !important; width:14px !important; height:14px !important; right:14px !important; top:19px !important; left:auto !important; transform:none !important; filter:none !important; } /* ============================================================ STAFFELPREIS-TABELLE (table#priceOverview) v9.35 Korrektur: Die Tabelle ist in
-- NICHT in fieldset.priceTableText (das ist nur der Titeltext daneben). Das Grau der Kopfzeile war nur der Browser-Standard fuer
, keine Theme-Regel. Anker jetzt ueber die ID #priceOverview -> greift sicher. ============================================================ */ #priceOverview th { background: #F3E8F0 !important; color: var(--de-bordeaux) !important; font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-align: left !important; padding: 8px 14px !important; border-bottom: none !important; } #priceOverview td { padding: 6px 14px !important; line-height: 1.4 !important; color: var(--de-ink) !important; border-bottom: 1px solid #E7E0E6 !important; } #priceOverview tr:last-child td { border-bottom: none !important; } #priceOverview tr:hover td { background: #FBF7F8 !important; } #visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview th, #visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview td { border-right: none !important; } #visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview { border: none !important; } /* === Navigation: Zwischenebene "Druckprodukte" überspringen — DEAKTIVIERT (DRE, Juni 2026) === Wieder einschalten: diesen Kommentar entfernen (das /* oben und das */ unten). Gilt ab 768px (Mega-Menü); darunter Offcanvas-Menü, unberührt. @media only screen and (min-width: 768px) { #navbar .cd-dropdown.dropdown-is-active .cd-dropdown-content > li.has-children > .cd-secondary-dropdown { visibility: visible !important; left: 0 !important; } #navbar .cd-dropdown.dropdown-is-active .cd-dropdown-content > li.has-children > a { display: none !important; } #navbar .cd-dropdown.dropdown-is-active .cd-secondary-dropdown > li.go-back { display: none !important; } } */ /* ===== Warengruppen-Header · Typo-Band (hell, volle Breite) ===== */ main.category > section.description.wrp:first-of-type{ max-width:none !important; padding:0 !important; margin:0 !important; } main.category .de-band{ background:#F7F2F5; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:40px 24px; /* schmaler als vorher (war 64px) */ box-sizing:border-box; } main.category .de-band-inner{ max-width:1150px; margin:0 auto; } main.category .de-band-inner h1.de-mixtitle{ margin:0 0 12px 0 !important; font-size:40px !important; line-height:1.06 !important; } main.category .de-band .de-mix-strong{ font-weight:700 !important; text-transform:uppercase !important; color:var(--de-bordeaux) !important; letter-spacing:0 !important; } main.category .de-band .de-mix-em{ font-family:"BentonModernTextItalic", Georgia, serif !important; font-style:normal !important; text-transform:none !important; font-weight:400 !important; font-size:1.12em !important; color:var(--de-bordeaux) !important; } main.category .de-band-sub{ margin:0 !important; font-family:'Instrument Sans', Helvetica, Arial, sans-serif !important; font-weight:500 !important; font-size:18px !important; line-height:1.55 !important; color:rgb(120, 52, 87) !important; max-width:900px !important; } @media (max-width:768px){ main.category .de-band{ padding:28px 24px; } main.category .de-band-inner h1.de-mixtitle{ font-size:30px !important; } } /* ============================================================ WARENGRUPPEN-INFOSEITE · Beschreibung 2 (Papier-/Infotexte) v9.47 Gedaempfte Hinweiszeile (z.B. "Papiermuster auf Anfrage") unter den Text-Bloecken. Nutzt sonst die bestehenden .de-text-title/.de-text-body. ============================================================ */ main.category .de-muted-note{ font-size: 15px !important; color: var(--de-muted) !important; } /* ============================================================ WARENGRUPPEN-INFOSEITE · Abstand Kachel-Block -> Info-Block (v9.48) Der Zwischenraum zwischen Produktliste und dem zweiten Textfeld (Beschreibung 2) war zu gross (38px unten + 30px oben = 68px). Reduziert auf ~28px. WICHTIG: nur die ZWEITE description-Section (:last-of-type), damit der Header-Bereich (Beschreibung 1) mit dem .de-band unberuehrt bleibt. ============================================================ */ main.category > section.description.wrp:last-of-type { padding-top: 8px !important; padding-bottom: 60px !important; position: relative !important; z-index: 0 !important; } main.category > section.description.wrp:last-of-type::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%) !important; background-color: #ffffff !important; z-index: -1 !important; } /* ============================================================ SCHRIFT-MIX-TITEL im .de-hero (Bild-rechts-Layout) v9.49 Damit der Marken-Schriftmix auch im .de-hero-Header (z.B. Postkarte) korrekt bordeaux + kursiv rendert. Noetig, weil die bestehende .de-hero h1-Regel Farbe/Gewicht per !important auf Anthrazit/800 setzt und sonst die Spans ueberschreiben wuerde. Die h1-GROESSE (42px) bleibt bewusst erhalten (groesser als das schmale VK-Band). ============================================================ */ main.category .de-hero h1.de-mixtitle .de-mix-strong{ font-weight:700 !important; text-transform:uppercase !important; color:var(--de-bordeaux) !important; letter-spacing:0 !important; } main.category .de-hero h1.de-mixtitle .de-mix-em{ font-family:"BentonModernTextItalic", Georgia, serif !important; font-style:normal !important; text-transform:none !important; font-weight:400 !important; font-size:1.05em !important; color:var(--de-bordeaux) !important; } /* ============================================================ FORMAT-HINWEIS im Header ("Schritt 1 – Format wählen") v9.51 Fuer Mehr-Format-Produkte (z.B. Kuvert): steht in Beschreibung 1 am Ende, damit er im Frontend ueber den Format-Kacheln erscheint. Eigene .de-step*-Klassen (nicht die kachel-gebundenen .step-*), damit sie im Band-/Beschreibungskontext sauber greifen. Bordeaux statt des alten Beertons #8a2d5d. ============================================================ */ main.category .de-steprow{ margin: 8px 0 4px 0; } main.category .de-step-label{ margin:0 0 6px 0 !important; font-size:12px !important; line-height:1.3 !important; font-weight:700 !important; letter-spacing:0.08em !important; text-transform:uppercase !important; color:var(--de-bordeaux) !important; } main.category section.description h2.de-step-title, main.category .de-step-title{ margin:0 !important; font-size:18px !important; line-height:1.3 !important; font-weight:700 !important; color:var(--de-ink) !important; } /* ============================================================ ICON-WARENGRUPPEN-KACHELN (Typ A) · Titel + Hoehen v9.54 KORREKTUR zu v9.53: Der Flex-Umbau der .card hat figure/figcaption nebeneinander gelegt (Icon links, Text rechts) statt untereinander. Ursache: das Theme setzt im Inneren eigene Layout-Regeln, die mit display:flex auf der Karte kollidieren. Neu: KEIN Eingriff in die Kachelstruktur. Nur: (1) Titel kleiner (30px -> 20px), (2) Umbruch fuer lange Woerter, (3) gleiche Hoehen ueber eine Mindesthoehe der Caption (ohne Flex). ============================================================ */ /* Titel kleiner + lange Woerter (LEUCHTPLAKATE) duerfen umbrechen */ section.trade-groups.sidebar article.card figcaption h2, section.trade-groups.full article.card figcaption h2, section.trade-groups.sidebar article.card figcaption strong, section.trade-groups.full article.card figcaption strong { font-size: 22px !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; hyphens: auto !important; } /* Gleiche Hoehen: Caption bekommt Platz fuer 2 Zeilen, ohne die Kachelstruktur (figure ueber figcaption) zu veraendern. */ section.trade-groups.sidebar article.card figcaption, section.trade-groups.full article.card figcaption { min-height: 72px !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; } /* ============================================================ KACHEL-ANGLEICHUNG · Hover ohne Farbueberzug (Typ A) v9.55 Die Icon-Warengruppen-Kacheln bekamen aus der Theme-Basis einen halbtransparenten Bordeaux-Ueberzug auf die figcaption beim Hover (rgba(130,46,88,.65)) + weisse Schrift. Die Foto-Artikel-Kacheln haben das bereits deaktiviert (Hover B). Hier ziehen die Icon-Kacheln nach: beide Typen zeigen jetzt denselben ruhigen Hover (Lift + Bordeaux-Rand), ohne eingefaerbte Flaeche. ============================================================ */ section.trade-groups.sidebar article.card:hover figcaption, section.trade-groups.full article.card:hover figcaption, section.trade-groups.sidebar article.card:focus-within figcaption, section.trade-groups.full article.card:focus-within figcaption { background: #ffffff !important; } section.trade-groups.sidebar article.card:hover figcaption h2, section.trade-groups.full article.card:hover figcaption h2, section.trade-groups.sidebar article.card:hover figcaption strong, section.trade-groups.full article.card:hover figcaption strong, section.trade-groups.sidebar article.card:focus-within figcaption h2, section.trade-groups.full article.card:focus-within figcaption h2 { color: var(--de-bordeaux) !important; } /* ============================================================ STARTSEITE · BRANDSTATEMENT "Ihre Druckerei in Bern" v9.57 Von Weiss auf Bordeaux. Schrift in Rose (wie der Hero-Slider auf Bordeaux), damit kein neues Weiss ins Farbsystem kommt. Full-Bleed, weil der Block sonst in einem begrenzten Wrapper sitzt. HTML bleibt unveraendert (section.block.block-time). ============================================================ */ section.block.block-time{ background: var(--de-bordeaux) !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 96px 24px !important; box-sizing: border-box !important; } section.block.block-time .wrp{ max-width: 1150px !important; margin: 0 auto !important; } section.block.block-time .block-time__headline{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 46px !important; font-weight: 600 !important; font-style: normal !important; color: #fff !important; text-transform: uppercase !important; line-height: 1 !important; margin-bottom: 10px !important; } section.block.block-time .block-time__text{ font-family: "Instrument Sans", Helvetica, arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; color: #fff !important; line-height: 1.55 !important; margin-top: 0 !important; } section.block.block-time .block-time__headline em{ font-family: "BentonModernTextItalic", Georgia, serif !important; font-style: normal !important; text-transform: none !important; color: #fff !important; font-size: 44px !important; font-weight: 400 !important; line-height: 1.05 !important; } /* ============================================================ KONFIGURATOR · TEXTFELDER (Freitext) an die Dropdowns angleichen v9.60 Betrifft "Kunden-Nummer" / "Kampagnen-Nummer" (nur bei den F200-Plakaten). Die sichtbare Box ist NICHT das , sondern das umschliessende