/* ═════════════════════════════════════════════════════════════ MANUFACTURER.CSS – Seitenspezifisches CSS Seite: /en/waste-containers-wheelie-bins-manufacturer.html Ablage: /en/css/manufacturer.css EIGENSTAENDIG. Diese Datei ist ein 1:1-Abgleich zu /css/hersteller.css (DE-Herstellerseite), aber bewusst eine eigene Datei – der EN-Ordner bindet KEIN CSS aus dem DE-Ordner ein. Unterschied zur DE-Seite: die EN-Seite laeuft auf /css/styles.css statt auf style-min.css + style.css + index-custom.css. Alles, was daraus zusaetzlich neutralisiert werden muss, steht unten im Block "EN-SPEZIFISCHE OVERRIDES" – der Rest ist deckungsgleich mit hersteller.css. Bei Aenderungen an hersteller.css: diesen Teil erneut abgleichen. ═════════════════════════════════════════════════════════════ */ /* ── SILVER STRIPE ── */ .silver-stripe { display: block; width: 100%; background: linear-gradient(to right, #c8c8c8 0%, #e8e8e8 12%, #f5f5f5 22%, #ffffff 35%, #ffffff 50%, #f5f5f5 65%, #e4e4e4 78%, #d0d0d0 88%, #c0c0c0 100%); border-top: 1px solid #b0b0b0; border-bottom: 1px solid #b8b8b8; box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 -1px 3px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 -1px 2px rgba(0,0,0,0.06); padding: 14px 32px; margin: 0; text-align: center; color: #096492; font-size: 22px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; } .silver-stripe h2, .silver-stripe h3 { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; background: none; border: none; line-height: inherit; display: inline; } /* ── HERO SECTION ── */ :root { --w1:#023D60;--w2:#095A83;--w3:#1482B4;--w4:#0B608A;--w5:#033F62; --wg:linear-gradient(135deg,#023D60 0%,#095A83 30%,#1482B4 55%,#0B608A 80%,#033F62 100%); } section.her-hero { background: var(--wg) !important; background-color: #023D60 !important; color: #fff !important; padding: 0 !important; overflow: hidden; position: relative; box-shadow: 0 8px 32px rgba(2,61,96,.28); } section.her-hero * { color: inherit; } section.her-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) !important; background-size: 26px 26px; pointer-events: none; } section.her-hero::after { content: ''; position: absolute; top: -60%; right: -8%; width: 50%; height: 220%; background: radial-gradient(ellipse,rgba(20,130,180,.18) 0%,transparent 68%) !important; pointer-events: none; } .her-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; min-height: 310px; padding: 0 28px; position: relative; z-index: 1; } .her-text { flex: 0 0 55%; padding: 52px 0 48px; z-index: 2; color: #fff !important; } .her-text h1, .her-text h1 * { background: none !important; background-image: none !important; border: none !important; border-top: none !important; border-bottom: none !important; padding: 0 !important; text-shadow: none !important; display: block !important; color: #fff !important; } .her-text > * { animation: hertxt .65s cubic-bezier(.22,1,.36,1) both; } .her-text > *:nth-child(1) { animation-delay: .05s } .her-text > *:nth-child(2) { animation-delay: .12s } .her-text > *:nth-child(3) { animation-delay: .18s } .her-text > *:nth-child(4) { animation-delay: .24s } @keyframes hertxt { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } .her-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 4px 14px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; color: #fff; } .her-lead { font-size: 15px; color: rgba(255,255,255,.8); max-width: 500px; line-height: 1.75; margin-bottom: 28px; } .her-actions { display: flex; gap: 12px; flex-wrap: wrap; } .her-btn-w { display: inline-flex; align-items: center; background: #fff !important; color: #023D60 !important; font-size: 13.5px; font-weight: 700; padding: 10px 22px; border-radius: 5px; text-decoration: none !important; transition: all .2s; border: none !important; } .her-btn-w:hover { background: #e5f2fa !important; transform: translateY(-1px); } .her-btn-o { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.38) !important; color: rgba(255,255,255,.9) !important; font-size: 13.5px; font-weight: 500; padding: 10px 20px; border-radius: 5px; text-decoration: none !important; transition: all .2s; background: transparent !important; } .her-btn-o:hover { border-color: rgba(255,255,255,.65) !important; background: rgba(255,255,255,.09) !important; } .her-right { flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 0 0 0 10px; z-index: 2; animation: herimg .8s cubic-bezier(.22,1,.36,1) .15s both; } @keyframes herimg { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .her-svg-icon { height: 290px; width: auto; opacity: .88; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.75) 22%, black 36%, black 75%, rgba(0,0,0,.3) 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.75) 22%, black 36%, black 75%, rgba(0,0,0,.3) 90%, transparent 100%); } /* ── BREADCRUMB ── */ .breadcrumb-bar { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; background-image: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 25%, rgba(0,0,0,0.00) 50%, rgba(255,255,255,0.70) 75%, rgba(255,255,255,1.00) 100%) !important; background-color: #e8e8e8 !important; border-bottom: 1px solid #ffffff !important; display: flex !important; align-items: center !important; } .breadcrumb-inner { max-width: 1200px; margin: 0 auto; padding: 6px 16px; font-size: 12px; display: flex !important; align-items: center !important; gap: 7px; color: #555; width: 100%; } .breadcrumb-inner a { color: #003354 !important; text-decoration: none !important; display: flex; align-items: center; gap: 4px; } .breadcrumb-inner a:hover { text-decoration: underline !important; } .breadcrumb-sep { margin: 0 5px; color: #666; } /* ── KÖRPER / CONTENT ── */ .her-body { max-width: 960px; margin: 0 auto; padding: 28px 32px 32px; } .her-intro p { color: #444; font-size: 15px; line-height: 1.72; margin: 0 0 16px; } .her-intro h2 { font-size: 20px; font-weight: 600; color: #023D60; margin: 28px 0 10px; padding: 0; border: none; background: none; } .her-intro h3 { font-size: 17px; font-weight: 600; color: #023D60; margin: 24px 0 8px; padding: 0; border: none; background: none; } .her-intro h4 { font-size: 15px; font-weight: 600; color: #023D60; margin: 20px 0 6px; padding: 0; border: none; background: none; } .her-intro em { font-style: italic; color: #555; } .her-intro a { color: #0B608A; } .her-intro a:hover { text-decoration: underline; } /* ── SCHNELLNAVIGATION ── */ .wb-qnav { background: #f2f7fb; border: 1px solid #d0e4ef; border-radius: 7px; padding: 14px 18px; margin-bottom: 24px; } .wb-qnav-label { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #096492; margin-bottom: 10px; } .wb-qnav-row { display: flex; flex-wrap: wrap; gap: 7px; } .wb-qnav-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #c0d8e8; border-radius: 4px; padding: 6px 12px; font-size: 12.5px; color: #023D60 !important; text-decoration: none !important; transition: all .18s; } .wb-qnav-btn svg { flex-shrink: 0; color: #1482B4; } /* ── FABRIK-BILD ── */ .her-img-wrap { margin: 24px 0; text-align: center; } .her-img-wrap img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.14); } .her-img-wrap figcaption { font-size: 12px; color: #888; margin-top: 8px; font-style: italic; } /* ── ZERTIFIKATE ── */ .her-certs { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .her-cert { display: inline-flex; align-items: center; gap: 8px; background: #f4f8fb; border: 1px solid #c0d5e6; border-radius: 4px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #023D60; } .her-cert-dot { width: 8px; height: 8px; border-radius: 50%; background: #1482B4; flex-shrink: 0; } /* ── PDF DOWNLOADS ── */ .her-pdf-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .her-pdf-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #c0d5e6; border-radius: 4px; padding: 8px 14px; font-size: 12.5px; color: #023D60 !important; text-decoration: none !important; transition: all .18s; } .her-pdf-btn svg { flex-shrink: 0; color: #cc0000; } /* ── PRODUKTGRID ── */ .her-product-grid { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; } .her-product-grid li a { display: block; background: #f4f8fb; border: 1px solid #c0d5e6; border-radius: 4px; padding: 6px 14px; font-size: 13px; color: #023D60 !important; text-decoration: none !important; transition: all .18s; } /* ── MEDIZINISCHE ABFALLBEHÄLTER ── */ .her-medical { background: #f8f0f0; border: 1px solid #e8c8c8; border-radius: 6px; padding: 16px 20px; margin: 20px 0; } .her-medical h3 { font-size: 14px; font-weight: 600; color: #8b0000; margin: 0 0 10px; padding: 0; border: none; background: none; } .her-medical ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .her-medical ul li a { display: block; background: #fff; border: 1px solid #e8c8c8; border-radius: 4px; padding: 5px 12px; font-size: 12.5px; color: #8b0000 !important; text-decoration: none !important; } /* ── SEO BODY ── */ .seo-body { max-width: 960px; margin: 0 auto; padding: 28px 32px 32px; text-align: center; } .seo-body h2 { font-size: 18px; font-weight: 700; color: #023D60; margin: 0 0 10px; padding: 0; border: none; background: none; } .seo-body h3 { font-size: 15px; font-weight: 600; color: #023D60; margin: 0 0 10px; padding: 0; border: none; background: none; } .seo-body p { color: #444; font-size: 15px; line-height: 1.72; margin: 0; } /* ── FOOTER DISCLAIMER ── */ .footer-disclaimer { background: #e8ecef; border-bottom: 1px solid #cdd4da; padding: 10px 0; text-align: center; } .footer-disclaimer-inner { max-width: 960px; margin: 0 auto; font-size: 11.5px; color: #666; padding: 0 16px; line-height: 1.6; } /* ── PAGE CONTENT WRAPPER ── */ .page-content { min-height: 320px; padding-bottom: 60px; box-sizing: border-box; } /* ── NAV FIX ── */ .nav-links li { margin: 0 !important; } /* ── MOBILE ── */ @media (max-width: 760px) { .her-inner { flex-direction: column; min-height: auto; padding: 0 20px; } .her-text { flex: none; width: 100%; padding: 28px 0 20px; } .her-right { flex-direction: row; flex-wrap: wrap; padding: 0 0 28px 0; width: 100%; } .her-body { padding: 20px 16px 24px; } .wb-qnav-row { gap: 6px; } .her-certs { gap: 7px; } .her-pdf-row { flex-direction: column; } } @media (max-width: 480px) { .her-product-grid { gap: 6px; } .her-product-grid li a { font-size: 12px; padding: 5px 10px; } } /* ═══════════════════════════════════════════════════════════════ MFR-HERO – Reserve-Klassen, identisch zu hersteller.css ═══════════════════════════════════════════════════════════════ */ .mfr-hero h1 { background:none !important; background-image:none !important; border:none !important; border-top:none !important; border-bottom:none !important; padding:0 !important; text-shadow:none !important; display:block !important; } .container__headlineh1 { display:none !important; } :root { --w1:#023D60;--w2:#095A83;--w3:#1482B4;--w4:#0B608A;--w5:#033F62; --wg:linear-gradient(135deg,#023D60 0%,#095A83 30%,#1482B4 55%,#0B608A 80%,#033F62 100%); } section.mfr-hero { background: var(--wg) !important; color:#fff; padding:0; overflow:hidden; position:relative; box-shadow: 0 8px 32px rgba(2,61,96,.28); } section.mfr-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:26px 26px; pointer-events:none; } section.mfr-hero::after { content:''; position:absolute; top:-60%; right:-8%; width:50%; height:220%; background:radial-gradient(ellipse,rgba(20,130,180,.18) 0%,transparent 68%); pointer-events:none; } .mfr-inner { max-width:1140px; margin:0 auto; display:flex; align-items:center; min-height:310px; padding:0 28px; position:relative; z-index:1; } .mfr-text { flex:0 0 55%; padding:52px 0 48px; z-index:2; } .mfr-text > * { animation:mfrtxt .65s cubic-bezier(.22,1,.36,1) both; } .mfr-text > *:nth-child(1){animation-delay:.05s} .mfr-text > *:nth-child(2){animation-delay:.12s} .mfr-text > *:nth-child(3){animation-delay:.18s} .mfr-text > *:nth-child(4){animation-delay:.24s} @keyframes mfrtxt { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } } .mfr-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:20px; padding:4px 14px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:20px; color:#fff; } .mfr-lead { font-size:15px; color:rgba(255,255,255,.8); max-width:500px; line-height:1.75; margin-bottom:28px; } .mfr-actions { display:flex; gap:12px; flex-wrap:wrap; } .mfr-btn-white { display:inline-flex; align-items:center; background:#fff !important; color:#023D60 !important; font-size:13.5px; font-weight:700; padding:10px 22px; border-radius:5px; text-decoration:none; transition:all .2s; border:none !important; } .mfr-btn-white:hover { background:#e5f2fa !important; transform:translateY(-1px); } .mfr-btn-outline { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.38) !important; color:rgba(255,255,255,.9) !important; font-size:13.5px; font-weight:500; padding:10px 20px; border-radius:5px; text-decoration:none; transition:all .2s; background:transparent !important; } .mfr-btn-outline:hover { border-color:rgba(255,255,255,.65) !important; background:rgba(255,255,255,.09) !important; } .mfr-stats { flex:1; display:flex; align-items:center; justify-content:flex-start; padding:0 0 0 10px; z-index:2; animation:mfrstats .8s cubic-bezier(.22,1,.36,1) .15s both; } @keyframes mfrstats { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } } .mfr-visual-img { height:290px; width:auto; opacity:0.88; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.75) 22%, black 36%, black 75%, rgba(0,0,0,.3) 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.75) 22%, black 36%, black 75%, rgba(0,0,0,.3) 90%, transparent 100%); animation:mfrimg .9s cubic-bezier(.22,1,.36,1) .1s both; } @keyframes mfrimg { from { opacity:0; transform:translateX(24px); } to { opacity:.88; transform:translateX(0); } } .mfr-wm { position:absolute; right:28px; top:50%; transform:translateY(-50%); font-size:320px; font-weight:900; line-height:1; color:rgba(255,255,255,.03); pointer-events:none; user-select:none; font-family:Arial,sans-serif; z-index:0; } @media(max-width:760px) { .mfr-inner { flex-direction:column; min-height:auto; padding:0 20px; } .mfr-text { flex:none; width:100%; padding:28px 0 20px; } .mfr-stats { flex-direction:row; flex-wrap:wrap; padding:0 0 28px 0; width:100%; } .mfr-wm { display:none; } } /* ═════════════════════════════════════════════════════════════ EN-SPEZIFISCHE OVERRIDES Nur noetig, weil die EN-Seite auf styles.css laeuft. Nicht in hersteller.css enthalten und dort auch nicht noetig. ═════════════════════════════════════════════════════════════ */ /* ── 1) H1 im Silver-Stripe ── hersteller.css setzt den Reset nur fuer h2/h3, weil die DE-Seite ihren H1 im Hero traegt. Die EN-Seite hat den H1 im Stripe – gleicher Reset, damit die Optik exakt dem DE-Stripe entspricht. */ .silver-stripe h1 { margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; color: inherit !important; background: none !important; background-image: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; line-height: inherit !important; display: inline !important; letter-spacing: inherit !important; text-transform: none !important; width: auto !important; max-width: none !important; } /* ── 2) Schnellnavigation ── styles.css enthaelt einen eigenen nav.wb-qnav-Block (dunkler Verlauf, durchgaengig !important), der die helle DE-Optik ueberschreibt. Hier werden die hersteller.css-Werte mit gleicher Spezifitaet zurueckgeholt; die Neutralisierer gegen das globale nav-Styling bleiben erhalten. */ nav.wb-qnav { display: block !important; position: static !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; gap: 0 !important; background: #f2f7fb !important; background-image: none !important; border: 1px solid #d0e4ef !important; border-radius: 7px !important; box-shadow: none !important; padding: 14px 18px !important; margin: 0 0 24px !important; } nav.wb-qnav .wb-qnav-label { display: block !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #096492 !important; margin-bottom: 10px !important; } nav.wb-qnav .wb-qnav-row { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; width: 100% !important; height: auto !important; } nav.wb-qnav .wb-qnav-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #fff !important; border: 1px solid #c0d8e8 !important; border-radius: 4px !important; padding: 6px 12px !important; font-size: 12.5px !important; font-weight: 400 !important; color: #023D60 !important; text-decoration: none !important; white-space: nowrap !important; height: auto !important; max-width: none !important; margin: 0 !important; transition: all .18s !important; } nav.wb-qnav .wb-qnav-btn svg { color: #1482B4 !important; opacity: 1 !important; flex-shrink: 0 !important; } /* ── 3) Hero-H1 ── Die DE-Seite setzt Groesse/Gewicht des Hero-H1 inline im HTML. Nach unserer Regel gehoert das ins CSS – exakt dieselben Werte, nur hier statt inline. !important, weil styles.css eigene h1-Regeln mitbringt. */ .her-text h1 { font-size: clamp(22px, 3.2vw, 38px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.01em !important; margin: 0 0 14px !important; max-width: 580px !important; color: #fff !important; } /* ── 4) Klinik-Block zentriert ── Bewusste Abweichung zu hersteller.css: Ueberschrift und Chips im Klinikkasten mittig statt linksbuendig. Der Kasten selbst sitzt jetzt – wie auf der DE-Seite – innerhalb von .her-body und ist dadurch bereits auf 960 px zentriert. */ .her-medical { text-align: center; } .her-medical h3 { text-align: center; } .her-medical ul { justify-content: center; } /* ── 5) Layout-Fixes aus faq.html ── Die FAQ-Seite traegt diese Regeln als Inline-