* {
font-family: 'Asap', sans-serif !important;
}

/* --- HEADER --- */

section#slider .btn.success {
color: #ffffff !important;
border: 2px solid #ffffff !important;
border-radius: 3px;
}

section#slider .btn.success:hover {
color: #f7a711 !important;
border: 2px solid #ffffff !important;
border-radius: 3px;
background-color: #ffffff !important;
}

main section#slider .textArea.cf strong, main section#slider .textArea.cf p {
color: #ffffff;
line-height: 1em;
}

main section#slider .textArea.cf strong {
font-size: 4em;
}

main section#slider .textArea.cf p {
font-size: 3em;
}

header.main #service-bar {
background-color: #000000;
}

#navbar {
box-shadow: 0px;
background-color: #ffffff;
}

section#service-bar a {
color: #ffc717 !important;
}

header.main #customer-menu a .count, header.main #customer-menu > button .count {
background-color: #e62c29;
}

/*
.menu-item-login.login_status_red::before, .menu-item-login.login_status_green::before, .menu-item-cart::before {
font-family: "Font Awesome 5 Pro" !important;
font-size: 17px !important;
}

.menu-item-login.login_status_red::before, .menu-item-login.login_status_green::before {
content: "\f007" !important;
}

.menu-item-cart::before {
content: "\f07a" !important;
}
*/

/* --- FOOTER --- */

footer.main {
background-color: #000000;
color: #ffffff !important;
border-top: 3px dashed #f7f7f7;
}

footer.main a, footer.main div, footer.main .headline {
color: #ffffff !important;
}

footer.main i::before  {
color: #ffc717 !important;
}

button#footer-product-nav_toggle {
background-color: #000000;
outline: 2px solid #ffc717;
color: #ffc717 !important;
}

button#footer-product-nav_toggle:hover {
background-color: #ffc717;
color: #ffffff !important;
border-radius: 0px;
}

a.leadprint-brand {
display: none !important;
}

/* --- Back to Top --- */

#footer-bar, #totop a::before {
background-color: #F7A711;
}

/* --- USP --- */

#usp-bar.individualUSP {
border-top: 3px dashed #1d1d1b;
}

/* Overlay */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions .flex-container .panel.selected .selectedOverlay {
background-color: #f7a711
}



/* Cards */
.trade-groups .card:hover figcaption, .product-listing .card:hover figcaption {
  background: #ffa600cf;
    bottom: 0;
    position: absolute;
    width: -webkit-fill-available;
width: -moz-available;
}

.card figcaption span.link {
background: #fff !important;
    color: #f7a711 !important;
    padding: 5px;
padding: 10px 30px 10px 30px;
width: fit-content;
margin: auto;
border-radius: 5px;
margin-top: 20px !important;
}

#page {
padding: 0;
    padding-top: 30px;

}

#payment-bar {
display:none;}

section .sidebar li a {
    border-bottom: solid 1px #f7a711;
}

.trade-groups .card, .product-listing .card {
border: solid 2px rgba(255,255,255,0);
}


/* HOMEPAGE */

section#trade-blocks {
padding: 0px;
}

section#homepage-text4 {
background-color: #1d1d1b;
}

/* Buttons */
main#address .btn, main#visual_calculation .btn, main#upload .btn.fileinput, main#cart_first .btn.success {
background-color: #f7a711;
}

main#address .btn:hover, main#visual_calculation .btn:hover, main#upload .btn.fileinput:hover, main#cart_first .btn.success:hover {
background-color: #f7a711;
}

main#cart_first .btn.back {
background-color: #c4c4c4;
border-color: #b7b7b7;
}

main#cart_first .btn.back:hover {
background-color: #ababab;
border-color: #9e9e9e;
}

/* Check Out divers */
#cart #total_price strong {
color: #1d1d1b !important;
}

.col-50 {
    width: 49%;
    display: inline-block;
}

.vorteile {
text-align:left;
}

.vorteile img, .vorteile h4 {
display: inline-block;
}

#product-detail #total_block li.containerLabelNet {
display: none;
}

.social-networks .icon-instagram:hover:before, .social-networks .icon-instagram:focus:before, .social-networks .icon-facebook:hover:before, .social-networks .icon-facebook:focus:before  {
    background: #f7a711;
}

strong {
    font-weight: 900 !important;
    font-size: inherit;
}

.card strong {
font-weight: 300 !important;
}

@media (max-width: 768px) {
.vorteile .section {
display:block;
}

.vorteile .col-50 {
width: 100%;
}

}

/* --- Footer-Leiste: Schrift schwarz, 08.09.2026 --- */
#footer-bar {
color: #000000;
}

#footer-bar a {
color: #000000 !important;
}

/* --- Google-Bewertung oben rechts in der Service-Bar, 08.09.2026 --- */
/* Kontakt und Impressum raus: beide stehen im Footer, die Impressumspflicht
   bleibt damit erfuellt, und rechts wird Platz fuer die Bewertung frei. */
#service-bar nav {
display: none;
}

/* Die Zeile war eine Float-Reihe. Ein zusaetzlicher Block rechts bricht darin
   um und landet unter der schwarzen Flaeche, wo weisse Schrift unsichtbar ist.
   Flexbox haelt beide Gruppen in einer Zeile, margin-left:auto schiebt die
   Bewertung an den rechten Rand. */
#service-bar .wrp {
display: flex;
align-items: center;
height: 30px;
}

#service-bar .wrp > span {
float: none;
margin-right: 15px;
}

#service-bar .fh-trust {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
white-space: nowrap;
}

#service-bar .fh-trust a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffffff !important;
text-decoration: none;
}

#service-bar .fh-trust a:hover {
text-decoration: underline;
}

#service-bar .fh-sterne {
color: #ffc717;
letter-spacing: 1px;
font-size: 14px;
}

#service-bar .fh-note {
font-weight: 700;
}

@media (max-width: 900px) {
#service-bar .fh-trust { display: none; }
}

/* Nachtrag 08.09.2026: Das Theme haengt jedem span in der Leiste 15px
   margin-right an, zusammen mit dem gap ergab das 23px Luecken zwischen
   Sternen, Note und Text. Und die Schriftfarbe der Leiste kommt mit
   !important, deshalb ging die Sternenfarbe unter. Beides hier korrigiert. */
#service-bar .fh-trust a {
gap: 7px;
}

#service-bar .fh-trust span {
margin: 0 !important;
padding: 0 !important;
}

#service-bar .fh-sterne {
color: #ffc717 !important;
font-size: 15px;
letter-spacing: 2px;
}

#service-bar .fh-note {
font-weight: 700;
color: #ffffff !important;
}

/* Google-Bewertung im Footer-Kontaktblock, ueber dem Trustpilot-Button.
   Groesser gesetzt als in der Kopfleiste, der Footer laeuft dort auf
   Fliesstextgroesse. */
footer .fh-google-fuss {
margin-top: 16px;
}

footer .fh-google-fuss a {
display: inline-flex;
align-items: center;
gap: 9px;
color: #ffffff !important;
text-decoration: none;
font-size: 17px;
}

footer .fh-google-fuss a:hover {
text-decoration: underline;
}

footer .fh-google-fuss .fh-sterne {
color: #ffc717 !important;
font-size: 19px;
letter-spacing: 2px;
}

footer .fh-google-fuss .fh-note {
font-weight: 700;
}

/* Nachtrag 08.09.2026: Die Spans im Footer erben die Theme-Farbe #1d1d1b,
   also fast Schwarz auf schwarzem Grund. Die Farbe muss deshalb am span
   selbst stehen, am umschliessenden a-Tag reicht sie nicht. Die
   Sterne-Regel danach ist spezifischer und behaelt Gold.
   Groessen an die Telefonzeile daneben angeglichen (dort 22px). */
footer .fh-google-fuss a span {
color: #ffffff !important;
font-size: 19px;
}

footer .fh-google-fuss .fh-sterne {
color: #ffc717 !important;
font-size: 21px;
letter-spacing: 2px;
}

/* Trustpilot-Knopf auf die Breite der Google-Zeile darueber, 08.09.2026.
   Der weisse Knopf steckt in einem iframe, ist dort 234px breit und
   waechst NICHT mit seinem Rahmen mit: ihn breiter zu setzen zentriert ihn
   nur neu. Deshalb der Rahmen exakt auf Knopfbreite und dann horizontal
   gestreckt, verankert am linken Rand. 6 Prozent sind am Logo praktisch
   nicht zu sehen und bringen beide Zeilen auf 227 bis 471.
   Die Breite ist inline vom Widget gesetzt, daher ueberall !important.
   Wenn Trustpilot sein Layout aendert, hier nachmessen. */
footer .trustpilot-widget {
width: 234px !important;
max-width: 234px !important;
margin-left: 0 !important;
transform: scaleX(1.06);
transform-origin: left center;
}

/* --- Zahlungsarten im Kontaktblock, FSC in der Fussleiste, 09.09.2026 ---
   Wettbewerbsvergleich mit flyermeyer, WIRmachenDRUCK, Onlineprinters,
   SAXOPRINT und druck.at: alle fuenf zeigen beides, flyerheld als einziger
   nicht. Die sechs Zahlungsarten standen bisher nur in den AGB.
   Zwei Fallen im Footer, beide schon beim Google-Block aufgetreten: die
   Spans erben die Theme-Schriftfarbe #1d1d1b, also fast Schwarz auf
   schwarzem Grund, und FontAwesome ersetzt die i-Tags im Browser durch svg,
   weshalb eine Regel auf "i" ins Leere laeuft. Daher beides doppelt. */
#fh-zahlung {
margin-top: 18px;
}

#fh-zahlung .fh-titel {
display: block;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #ffc717 !important;
margin-bottom: 9px;
}

/* Feste Dreierreihen, damit die Spalte ruhig bleibt: sechs Arten ergeben
   genau zwei Zeilen. */
/* Nur Symbole, keine Beschriftung (Wunsch 09.09.2026). Drei pro Zeile wie
   gewuenscht, also zwei Reihen. Die Icons sind deshalb groesser und tragen
   title und aria-label, weil Rechnung, Nachnahme und Vorkasse als Symbol
   allein nicht selbsterklaerend sind. */
#fh-zahlung .fh-raster {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
}

#fh-zahlung .fh-raster a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
color: #ffc717 !important;
text-decoration: none;
}

#fh-zahlung .fh-raster a:hover {
opacity: 0.75;
}

#fh-zahlung .fh-raster i,
#fh-zahlung .fh-raster svg {
color: #ffc717 !important;
width: 26px;
height: 26px;
font-size: 24px;
}

#fh-fussleiste {
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 26px;
padding: 16px 0 4px;
}

#fh-fussleiste .fh-art {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: #ffffff !important;
}

#fh-fussleiste svg,
#fh-fussleiste i {
color: #ffc717 !important;
width: 16px;
height: 16px;
font-size: 16px;
}

/* FontAwesome ersetzt die i-Elemente durch SVG, deren path fill="currentColor"
   traegt. Das Theme setzt in application.css aber einen Universalselektor
   * { color: #1d1d1b }, der auch auf dem path greift. Dadurch erbt der path
   die helle Schriftfarbe des Links NICHT, currentColor loest sich dunkel auf
   und die Symbole waren auf schwarzem Grund unsichtbar. color und fill
   muessen deshalb direkt am path gesetzt werden (09.09.2026). */
#fh-zahlung .fh-raster svg,
#fh-zahlung .fh-raster svg path {
color: #ffffff !important;
fill: #ffffff !important;
}

#fh-fussleiste svg,
#fh-fussleiste svg path {
color: #ffffff !important;
fill: #ffffff !important;
}

/* Hinweis beim Ueberfahren: zeigt den Namen der Zahlungsart (11.09.2026).
   Der Name steht im Attribut data-tip, das Skript im Head-Feld setzt ihn.
   Bewusst kein title-Attribut mehr, sonst erschiene nach einer Sekunde
   zusaetzlich der graue Browser-Hinweis. aria-label bleibt fuer
   Screenreader erhalten. Farben ausdruecklich gesetzt, weil der
   Universalselektor des Themes sonst durchschlaegt. */
#fh-zahlung .fh-raster a {
position: relative;
}

#fh-zahlung .fh-raster a::after {
content: attr(data-tip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #ffffff;
color: #000000 !important;
font-size: 12px;
line-height: 1.2;
padding: 5px 8px;
border-radius: 3px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 20;
}

#fh-zahlung .fh-raster a:hover::after,
#fh-zahlung .fh-raster a:focus-visible::after {
opacity: 1;
}

/* Die vorhandene Regel a:hover { opacity: 0.75 } dimmt das ganze Element
   und damit auch den Hinweis. Deshalb nur noch das Symbol abblenden. */
#fh-zahlung .fh-raster a:hover {
opacity: 1 !important;
}

#fh-zahlung .fh-raster a:hover svg {
opacity: 0.75;
}