/* ==========================================================================
Laufschrift: TT Firs Neue Regular (normal, normal)
========================================================================== */
@font-face {
font-display: swap;
font-family: 'TT Firs Neue';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-regular.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-regular.woff') format('woff'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-regular.ttf') format('truetype');
}
/* ==========================================================================
Laufschrift: TT Firs Neue Medium (normal, normal)
========================================================================== */
@font-face {
font-display: swap;
font-family: 'TT Firs Neue';
font-style: normal;
font-weight: 500;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-medium.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-medium.woff') format('woff'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-medium.ttf') format('truetype');
}
/* ==========================================================================
Laufschrift: TT Firs Neue Demibold (normal, normal)
========================================================================== */
@font-face {
font-display: swap;
font-family: 'TT Firs Neue';
font-style: normal;
font-weight: 600;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.woff') format('woff'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'TT Firs Neue';
font-style: normal;
font-weight: 700;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.woff') format('woff'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/tt-firs-neue-demibold.ttf') format('truetype');
}
/* ==========================================================================
Titel: Archeron Pro Regular (normal, normal)
========================================================================== */
@font-face {
font-display: swap;
font-family: 'Archeron Pro';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-regular.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-regular.woff') format('woff');
}
/* ==========================================================================
Special: Archeron Pro Medium (normal, normal)
========================================================================== */
@font-face {
font-display: swap;
font-family: 'Archeron Pro';
font-style: normal;
font-weight: 500;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Archeron Pro';
font-style: normal;
font-weight: 600;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Archeron Pro';
font-style: normal;
font-weight: 700;
src: url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff2') format('woff2'),
url('/wp-content/themes/crowdcontainer-theme/assets/fonts/archeron-pro-medium.woff') format('woff');
}
/* ==========================================================================
General Settings
========================================================================== */
:root{
/* Schriften */
--cc-font-size-h1: 3.75rem;
--cc-font-size-h2: 3.125rem;
--cc-font-size-h3: 2.5rem;
--cc-font-size-h4: 1.875rem;
--cc-font-size-h5: 1.625rem;
--cc-font-size-h6: 1.375rem;
--cc-font-size-lg: 1.5rem;
--cc-font-size-md: 1.25rem;
--cc-font-size-sm: 1rem;
--cc-font-size-xs: 0.75rem;
/* Spacings */
--cc-space-0: 0;
--cc-space-1: .25rem;
--cc-space-2: .5rem;
--cc-space-3: .75rem;
--cc-space-4: 1rem;
--cc-space-5: 1.25rem;
--cc-space-6: 1.5rem;
--cc-space-7: 1.75rem;
--cc-space-8: 2rem;
--cc-space-9: 3rem;
--cc-space-10: 4rem;
/* Colors */
--cc-global-gruen-dunkel: #00411F;
--cc-global-violett-dunkel: #2D001C;
--cc-global-gruen: #BFCFC7;
--cc-global-violett: #CABFC6;
--cc-global-orange: #FF8E6A;
--cc-global-beige: #D7D2C4;
--cc-global-limoncello: #EFFE93;
--cc-global-pistazie: #DCED76;
--cc-global-mango: #FFCD7B;
--cc-global-gelb: #FFF29D;
--cc-global-schrift-hell: #ffffff;
--cc-global-schrift-dunkel: #141414;
--cc-global-grau-dunkel: #5C5C5C;
--cc-global-grau-somber: #ADADAD;
--cc-global-grau: #D6D6D6;
--cc-global-grau-hell: #E8E8E8;
--cc-global-grau-leicht: #F0F0F0;
/* Transitions */
--cc-transition-main: all 0.25s ease-in-out;
/* Content widths */
--cc-blog-width: 50rem; /* 800px */
}
:where(.row-padding) :where(.fl-row-content-wrap){
padding-bottom: 6.25rem; /* 100px */
padding-top: 6.25rem; /* 100px */
}
:where(.row-padding) :where(.fl-row-content-wrap) :where(.fl-col[data-node]) :where(.fl-col-content){
padding-left: 1.25rem; /* 40px */
padding-right: 1.25rem; /* 40px */
}
@media (max-width: 1200px) {
:where(.row-padding) :where(.fl-row-content-wrap){
padding-bottom: 5rem; /* 80px */
padding-top: 5rem; /* 80px */
}
}
@media (max-width: 992px) {
:root {
--cc-font-size-h1: 3rem;
--cc-font-size-h2: 2.5rem;
--cc-font-size-h3: 2rem;
--cc-font-size-h4: 1.625rem;
--cc-font-size-h5: 1.5rem;
--cc-font-size-h6: 1.25rem;
--cc-font-size-lg: 1.25rem;
--cc-font-size-md: 1.125rem;
--cc-font-size-sm: 1rem;
--cc-font-size-xs: 0.75rem;
}
:where(.row-padding) :where(.fl-row-content-wrap){
padding-bottom: 3.125rem; /* 50px */
padding-top: 3.125rem; /* 50px */
}
}
/* Mobile (bis 768px) */
@media (max-width: 768px) {
:root {
--cc-font-size-h1: 2.25rem;
--cc-font-size-h2: 1.875rem;
--cc-font-size-h3: 1.625rem;
--cc-font-size-h4: 1.375rem;
--cc-font-size-h5: 1.25rem;
--cc-font-size-h6: 1.125rem;
--cc-font-size-lg: 1.125rem;
--cc-font-size-md: 1.125rem;
--cc-font-size-sm: 1rem;
--cc-font-size-xs: 0.75rem;
}
:where(.row-padding) :where(.fl-row-content-wrap){
padding-bottom: 2.5rem; /* 40px */
padding-top: 2.5rem; /* 40px */
}
:where(.row-padding) :where(.fl-row-content-wrap) .fl-col[data-node] .fl-col-content{
padding-left: 1.25rem; /* 40px */
padding-right: 1.25rem; /* 40px */
}
}
/* Font Rendering on Macos */
body {
/*text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;*/
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
}
/* ==========================================================================
Typography General
========================================================================== */
body{
font-family: 'TT Firs Neue';
font-weight: 400;
}
h1,
.h1,
.page-title,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin: 0;
}
h1,
h1.fl-module,
.h1 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h1);
line-height: 1.13;
margin-bottom: var(--cc-space-5);
}
h2,
h2.fl-module,
.h2 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h2);
line-height: 1.24;
margin-bottom: var(--cc-space-5);
}
h3,
h3.fl-module,
.h3 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h3);
line-height: 1.25;
margin-bottom: var(--cc-space-4);
}
h4,
h4.fl-module,
.h4 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h4);
line-height: 1.33;
margin-bottom: var(--cc-space-4);
}
h5,
h5.fl-module,
.h5 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h5);
line-height: 1.23;
margin-bottom: var(--cc-space-3);
}
h6,
h6.fl-module,
.h6 {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var( --cc-font-size-h6);
line-height: 1.25;
margin-bottom: var(--cc-space-3);
}
p,
.cc-text-normal {
font-family: 'TT Firs Neue';
}
p,
.cc-text-normal,
.fl-page .cc-button,
.blog-post-content .wp-block-button .wp-block-button__link,
.cc-button,
.woocommerce form .form-row .woocommerce-form-login__rememberme,
.woocommerce form .form-row .woocommerce-terms-and-conditions-wrapper label,
.woocommerce form .form-row.create-account label{
font-size: var(--cc-font-size-md);
line-height:1.4;
}
/* ==========================================================================
Buttons
========================================================================== */
.fl-comments-list #cancel-comment-reply-link,
.fl-comments-list .comment .comment-reply-link .comment-reply-link,
.blog-post-content .wp-block-button .wp-block-button__link,
.cc-button{
border-radius: 0;
display: inline-block;
font-family: 'Archeron Pro';
font-weight: 400;
padding: 4px 12px 6px 12px;
position: relative;
text-decoration: none;
z-index: 1;
}
@media (min-width: 992px) {
.blog-post-content .wp-block-button .wp-block-button__link,
.cc-button{
padding: 6px 20px 8px 20px;
}
}
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link,
.fl-page .fl-builder-content .cc-button.primary,
.fl-page .fl-builder-content .cc-button.secondary{
background-color: transparent;
border: none;
}
.fl-comments-list #cancel-comment-reply-link,
.fl-comments-list .comment .comment-reply-link .comment-reply-link,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link:active,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link:focus,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link:hover,
.fl-page .fl-builder-content .cc-button.primary,
.fl-page .fl-builder-content .cc-button.primary:active,
.fl-page .fl-builder-content .cc-button.primary:focus,
.fl-page .fl-builder-content .cc-button.primary:hover{
color: #ffffff;
}
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link,
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link:active,
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link:focus,
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.fl-page .fl-builder-content .cc-button.secondary,
.fl-page .fl-builder-content .cc-button.secondary:active,
.fl-page .fl-builder-content .cc-button.secondary:focus,
.fl-page .fl-builder-content .cc-button.secondary:hover{
color: #141414;
}
/*
.cc-button:after{
content: '';
display: inline-block;
height: 2px;
left: 8%;
max-width: 0;
position: absolute;
top: 50%;
transition: max-width .3s;
width: 84%;
z-index: 3;
}
.cc-button.primary:after{
background-color: #ffffff;
color: #ffffff;
}
.cc-button.secondary:after{
background-color: #141414;
color: #141414;
}
.cc-button:hover:after{
max-width: 100%;
}
*/
.fl-comments-list #cancel-comment-reply-link:before,
.fl-comments-list .comment .comment-reply-link .comment-reply-link:before,
.blog-post-content .wp-block-button .wp-block-button__link:before,
.cc-button:before{
content: '';
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: transform 0s;
width: 100%;
z-index: -1;
}
.fl-comments-list #cancel-comment-reply-link:before,
.fl-comments-list .comment .comment-reply-link .comment-reply-link:before,
.blog-post-content .wp-block-button.is-style-fill .wp-block-button__link:before,
.cc-button.primary:before{
background-color: #141414;
}
.fl-comments-list #cancel-comment-reply-link:before,
.blog-post-content .wp-block-button.is-style-outline .wp-block-button__link:before,
.cc-button.secondary:before{
border: solid 2px #141414;
}
.fl-comments-list #cancel-comment-reply-link:active:before,
.fl-comments-list #cancel-comment-reply-link:focus:before,
.fl-comments-list #cancel-comment-reply-link:hover:before,
.fl-comments-list .comment .comment-reply-link .comment-reply-link:active:before,
.fl-comments-list .comment .comment-reply-link .comment-reply-link:focus:before,
.fl-comments-list .comment .comment-reply-link .comment-reply-link:hover:before,
.blog-post-content .wp-block-button .wp-block-button__link:active:before,
.blog-post-content .wp-block-button .wp-block-button__link:focus:before,
.blog-post-content .wp-block-button .wp-block-button__link:hover:before,
.cc-button:active:before,
.cc-button:focus:before,
.cc-button:hover:before{
transform: skewx(-11deg);
}
/* ==========================================================================
Beaver Builder - General Module Styling
========================================================================== */
/*---- General Text -----*/
body .cc-text-light,
body .cc-text-light a {
color: var(--cc-global-schrift-hell) !important;
}
body .cc-text-dark {
color: var(--cc-global-schrift-dunkel) !important;
}
.fl-module-custom-rich-text, .fl-module-custom-button, .fl-module-custom-photo, .fl-module-custom-heading {
margin-top: var(--cc-space-3);
margin-bottom: var(--cc-space-3);
}
.cc-text-large,
.cc-text-large p {
font-size: var(--cc-font-size-lg);
}
.cc-text-small,
.cc-text-small p {
font-size: var(--cc-font-size-sm);
}
.cc-text-2-col {
column-count: 2;
column-gap: 1rem;
}
@media (max-width: 768px) {
.cc-text-2-col {
column-count: 1;
column-gap: 0;
}
}
/*---- Aufzählungen -----*/
.cc-arrows ul {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 1rem;
}
.cc-arrows ul li {
position: relative;
padding-left: 32px;
margin-bottom: 10px;
line-height: 1.4;
}
.cc-arrows ul li::before {
content: "";
position: absolute;
top: 0.4rem;
left: 0;
width: 15px;
height: 15px;
background-size: 15px 15px;
background-repeat: no-repeat;
background-position: center center;
color: var(--cc-global-schrift-dunkel);
/* Beispiel-Icon: Checkmark */
background-image: url("data:image/svg+xml;utf8,");
}
.cc-arrows.cc-text-light ul li::before {
background-image: url("data:image/svg+xml;utf8,");
}
/*---- Custom-Link -----*/
.section-wrapper .cc-custom-link{
font-family: 'Archeron Pro';
font-weight: 500;
hyphens: auto;
}
.section-wrapper .cc-custom-link .icon svg > * {
fill: var(--cc-global-schrift-dunkel, #141414);
}
.section-wrapper .cc-custom-link .icon.after{
display: inline-block;
margin-left: .5rem;
}
.section-wrapper .cc-custom-link .cc-button-text {
display: inline-block;
text-decoration: underline;
text-underline-offset: .2em;
text-decoration-thickness: 0.06em;
}
@media (min-width: 600px) {
.section-wrapper .cc-custom-link .cc-button-text {
text-decoration-thickness: 0.06em;
}
.section-wrapper .cc-custom-link .icon.after{
margin-left: 1rem;
}
}
.fix-stickybar .stickybar{
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1030;
}
@media (min-width: 600px) {
.fix-stickybar.admin-bar .stickybar{
top: 46px;
}
}
@media (min-width: 782px) {
.fix-stickybar.admin-bar .stickybar{
top: 32px;
}
}
@media (max-width: 400px) {
.ccbbp-mini-cart .woocommerce-Price-amount{
display: none;
visibility: hidden;
}
}
/* ==========================================================================
WooCommerce
========================================================================== */
/*-----------------------------
----------------------------------*/
div.woocommerce h2 {
font-size: var(--cc-font-size-h2);
}
div.woocommerce h3 {
font-size: var(--cc-font-size-h3);
}
/*---------------------------------
Woocommerce Notices
------------------------------------*/
/* Generelle Infos*/
.woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message,
.woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info,
.woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error {
font-size: var(--cc-font-size-md);
background: var(--cc-global-grau-leicht);
border:none;
border-radius: 0;
color: var(--cc-global-schrift-dunkel);
font-weight: 400;
padding: var(--cc-space-3) var(--cc-space-3);
}
/*-------------------------
WooCommerce Forms
---------------------------*/
.woocommerce form.checkout_coupon,
.woocommerce-page form.checkout_coupon {
background: var(--cc-global-grau-leicht);
border: none;
border-top: 1px solid var(--cc-global-schrift-dunkel);
border-radius: 0px;
color: var(--cc-global-schrift-dunkel);
font-weight: 400;
padding: var(--cc-space-3) var(--cc-space-3);
}
/*Form Fields*/
.woocommerce form .form-row input.input-text,
.woocommerce-page form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-page form .form-row select, .woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
display: block;
width: 100%;
height: 36px;
padding: var(--cc-space-2) var(--cc-space-2);
font-size: var(--cc-font-size-md);
line-height: 1.5;
color: var(--cc-global-schrift-dunkel);
vertical-align: middle;
background-color: var(--cc-global-schrift-hell);
background-image: none;
border: 1px solid var(--cc-global-schrift-dunkel);
-moz-transition:var(--cc-transition-main);
-webkit-transition: var(--cc-transition-main);
transition: var(--cc-transition-main);
ease-in-out 0.15s;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.woocommerce form .form-row label {
line-height: 1.5;
font-size: var(--cc-font-size-sm);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row textarea:focus, .woocommerce form .form-row select:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce table.cart td.actions .coupon .input-text:focus,
.woocommerce-page table.cart td.actions .coupon .input-text:focus {
border-color: var(--cc-global-violett-dunkel);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
border-color: var(--cc-global-gruen-dunkel);
}
.select2-container .select2-dropdown,
.select2-container .select2-selection {
background-color: var(--cc-global-schrift-hell);
border: 1px solid var(--cc-global-schrift-dunkel);
border-radius: 0px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding: var(--cc-space-1) var(--cc-space-2);
}
.woocommerce table.shop_table tr,
.woocommerce table.shop_table td{
vertical-align: top;
}
/*---------------------------------
* Custom Add to Cart-Button and Quantity Input
------------------------------------*/
.cc-qty-cart-wrapper {
display: flex;
gap: 2.5rem;
justify-content: center;
align-items: center;
}
/* Qty Input */
.woocommerce .quantity.cc-qty input.qty,
.woocommerce-page .quantity.cc-qty input.qty {
background: var(--cc-global-schrift-hell);
border-color: var(--cc-global-schrift-dunkel);
color: var(--cc-global-schrift-dunkel);
height: 50px;
font-size: var(--cc-font-size-lg);
font-weight: 500;
border: 1px solid var(--cc-global-schrift-dunkel);
border-radius: 0px;
}
.cc-qty {
display:inline-flex;
align-items:center;
gap:1.5rem;
}
.cc-qty .qty {
width:4.2rem;
text-align:center;
}
/* Qty Button */
body .cc-qty__btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid #000;
border-radius: 50%;
background: transparent;
padding: 0;
cursor: pointer;
transition: var(--cc-transition-main);
}
.cc-qty__btn svg {
width: 1rem;
height: auto;
fill: #000;
margin-top:2px;
}
.cc-qty__btn:hover {
background: var(--cc-global-beige);
}
.cc-qty__btn:hover svg {
fill: #000000;
}
/* Chrome, Safari, Edge, Opera (WebKit/Blink) */
input[type="number"].qty::-webkit-outer-spin-button,
input[type="number"].qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"].qty {
-moz-appearance: textfield; /* alt */
appearance: textfield; /* neuere Browser */
}
body.woocommerce-page .button.cc-atc-icon {
color: var(--cc-global-schrift-hell);
background-color: var(--cc-global-schrift-dunkel);
border-radius: 100%;
padding:15px;
transition: var(--cc-transition-main);
}
body.woocommerce-page .button.cc-atc-icon svg {
fill: var(--cc-global-schrift-hell);
transition: var(--cc-transition-main);
}
body.woocommerce-page .button.cc-atc-icon:hover {
transition: var(--cc-transition-main);
border-radius: 100%;
transform: scale(1.2);
}
.cc-cart-icon {
fill: var(--fl-global-schrift-dunkel);
}
/* ==========================================================================
Product Single
========================================================================== */
/*--------------------------------
Allg. Produktinformationen
---------------------------------*/
.cc-product-shortdesc {
margin-bottom: var(--cc-space-7);
}
.cc-produkt-produzent {
margin-bottom: var(--cc-space-3);
}
.cc-produkt-menge {
margin-bottom: var(--cc-space-1);
}
.cc-produkt-kleinpreis {
font-size: var(--cc-font-size-sm);
line-height: 2;
}
.cc-produkt-kleinpreis .currency-symbol {
font-size: var(--cc-font-size-xs);
}
/* Price */
.woocommerce div.product p.price,
.woocommerce-page div.product p.price {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var(--cc-font-size-h3);
}
.woocommerce div.product p.price,
.woocommerce-page div.product p.price {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var(--cc-font-size-h3);
}
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce-page div.product p.price .woocommerce-Price-currencySymbol {
font-size: var(--cc-font-size-h5);
}
.cc-preis-tablink {
font-size: var(--cc-font-size-sm);
}
/*------------------------
Versandoptionen
-------------------------*/
.cccs-versandwahl {
margin-bottom: var(--cc-space-8)
}
.cccs-option {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
background: #E8EEEB;
border-radius: 5px;
margin-bottom: var(--cc-space-4);
transition: var(--cc-transition-main);
}
.cccs-option.cccs-option:not(.cccs-option--disabled) label {
cursor: pointer;
}
.cccs-option.nolabel{
align-items: baseline;
color: #434A47;
padding: 1rem 1.5rem;
}
.cccs-option label {
display: flex;
color: #434A47;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
margin-bottom: 0;
padding: 1rem 1.5rem;
position: relative;
width: 100%;
}
.cccs-option input[type="radio"]{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.cccs-option label:before{
align-self: start;
content: '';
display: flex;
left: 0;
margin-top: -4px;
position: relative;
top: 0;
}
.cccs-option label:after{
background-color: #6F7A76;
border-radius: 50%;
content: '';
display: block;
height: 1.188rem;
left: 0;
margin-left: 1.84rem;
margin-top: 1.12rem;
opacity: 0;
position: absolute;
top: 0;
transform: scale(.5);
transition: opacity .2s ease-in, transform .1s ease-in;
width: 1.188rem;
z-index: 6;
}
.cccs-option label:before{
background-color: #F2F5F4;
border: solid 1px #6F7A76;
border-radius: 50%;
height: 1.875rem;
width: 1.875rem;
}
.cccs-option input[type="radio"]:checked + label:after{
opacity: 1;
transform: scale(1);
}
.cccs-option.cccs-option--disabled label:before{
background-color: #F5F7F6;
border-color: #D0D8D5;
}
/*
.cccs-option input {
width: 20px;
height: 20px;
margin-top: 3px;
}
*/
.cccs-option-infos {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.cccs-option-name {
font-weight: 500;
margin-bottom: var(--cc-space-2);
font-size: var(--cc-font-size-md);
}
.cccs-shipping-meta span:not(.ort) {
display: block;
font-size: var(--cc-font-size-sm);
}
.cccs-shipping-meta span.lieferdatum,
.cccs-shipping-meta span.ort {
font-weight: 500;
}
.cccs-lagerbestand {
white-space: nowrap;
text-align: right;
font-size: var(--cc-font-size-sm);
}
.cccs-qty {
font-weight: 500;
}
.cccs-stock-icon svg {
fill: var(--cc-global-schrift-dunkel);
margin-left: 10px;
height: 13px;
width: 14px;
}
/* Hover and Checked-State */
.cccs-option:not(.cccs-option--disabled):is(.frische):hover {
background: var(--cc-global-gruen);
transition: var(--cc-transition-main);
}
.cccs-option:has(input[type="radio"]:checked) {
background: var(--cc-global-gruen);
transition: var(--cc-transition-main);
}
/* Disabled Shipping-Block*/
.cccs-option.cccs-option--disabled{
background: #F5F7F6;
}
.cccs-option.nolabel.cccs-option--disabled,
.cccs-option.cccs-option--disabled label,
.cccs-option.cccs-option--disabled a {
color: #8EA099;
}
.cccs-option.cccs-option--disabled .cccs-stock-icon svg {
fill: #8EA099;
}
.woocommerce div.product p.price,
.woocommerce-page div.product p.price {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var(--cc-font-size-h3);
}
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce-page div.product p.price .woocommerce-Price-currencySymbol {
font-size: var(--cc-font-size-h5);
}
@media (max-width: 768px) {
/* 1. Haupt-Container: Erlaubt das Umbrechen der Kinder */
.cccs-option.nolabel,
.cccs-option label {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: .5rem;
}
/* 2. Container "auflösen": Label UND Info-Divs verhalten sich neutral */
/*.cccs-option label,*/
.cccs-option .cccs-option-infos{
display: contents;
}
/* 3. Radio-Button: Bleibt links oben */
.cccs-option label:before {
flex: 0 0 1.8rem;
height: 1.8rem;
margin-right: .75rem;
margin-top: -2px;
order: 1;
width: auto;
}
.cccs-option label:after{
height: 1.2rem;
margin-left: 1.8rem;
margin-top: 1.19rem;
width: 1.2rem;
}
/* 4. Name: Füllt den Platz in der ersten Zeile */
.cccs-option-name {
order: 2;
flex: 1;
margin-bottom: 0;
}
/* 5. Lagerbestand: Bleibt rechts oben */
.cccs-lagerbestand {
order: 3;
flex: 0 0 auto;
text-align: right;
margin-left: auto;
}
/* 6. Meta-Infos: Erzwingen die neue Zeile (100% Breite) */
.cccs-shipping-meta {
order: 4;
flex: 0 0 100%;
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
/* Optional: Falls Spans in der Meta-Info zu lang werden, untereinander stapeln */
.cccs-shipping-meta span {
width: 100%;
}
}
@media (max-width: 440px) {
.cccs-option label:before {
flex: 0 0 1.8rem;
height: 1.8rem;
order: 1;
width: auto;
}
.cccs-option.nolabel,
.cccs-option label {
align-items: center;
gap: .6rem;
}
.cccs-shipping-meta {
margin-top: 0;
}
.cccs-lagerbestand {
order: 3;
flex: 0 0 100%;
text-align: left;
}
}
/* ==========================================================================
WooCommerce Mini-Cart & Cart (optimiert)
========================================================================== */
/* ---------- Tabellen-Basis ---------- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
background: transparent;
border: none;
border-radius: 0;
border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td,
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce-page .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td,
.woocommerce-page .cart-collaterals .cart_totals table td,
.woocommerce .cart_totals table th,
.woocommerce-page .cart_totals table th,
.woocommerce .cart_totals table td,
.woocommerce-page .cart_totals table td {
border-top: none;
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
border-color: var(--cc-global-schrift-dunkel) !important;
padding: var(--cc-space-3) var(--cc-space-3);
}
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
border-top: 1px solid var(--cc-global-schrift-dunkel);
font-weight: 400;
}
/* ---------- Cart: Item-Zeilen ---------- */
:is(.woocommerce, .woocommerce-page)
table.shop_table.cc-shop-table
.cc-cart-item
:is(th, td) {
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
}
:is(.woocommerce, .woocommerce-page)
table.shop_table.cc-shop-table
.cc-cart-item:first-child
:is(th, td) {
border-top: 1px solid var(--cc-global-schrift-dunkel);
}
:is(.woocommerce, .woocommerce-page)
table.shop_table.cc-shop-table
:is(th, td) {
border: none;
}
/* Cart Subtotal Border in Totals */
.woocommerce .cart_totals table.shop_table .cart-subtotal :is(th, td) {
border-top: 1px solid var(--cc-global-schrift-dunkel) !important;
}
/* Spaltenbreiten / Bilder */
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-remove { width: 5%; }
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-thumbnail { width: 10%; }
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-name { width: 35%; }
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-quantity { width: 20%; }
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal { width: 10%; }
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img { width: 100px; }
/* Remove-Button */
.woocommerce a.remove {
display: block;
text-align: center;
line-height: 1.1;
border-radius: 100%;
color: var(--cc-global-schrift-dunkel) !important;
text-decoration: none;
border: 1px solid var(--cc-global-schrift-dunkel);
width: 40px; height: 40px;
transition: var(--cc-transition-main);
}
.woocommerce a.remove:hover {
color: var(--cc-global-schrift-hell) !important;
background: var(--cc-global-schrift-dunkel);
}
.woocommerce a.remove svg { width: 20px; height: 20px; }
.woocommerce a.remove svg path {
fill: var(--cc-global-schrift-dunkel);
stroke: var(--cc-global-schrift-dunkel);
stroke-width: 0.2;
transition: var(--cc-transition-main);
}
.woocommerce a.remove:hover svg path {
fill: var(--cc-global-schrift-hell);
stroke: var(--cc-global-schrift-hell);
}
/* Produktname + Meta-Badges (Cart + Review) */
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-name {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var(--cc-font-size-h5);
line-height: 1.2;
}
@media (max-width: 768px) {
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-name {
font-size: 1rem;
line-height: 1.2;
}
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-name a,
.woocommerce table.shop_table.cc-checkout-review-order-table .cc-review-item .cc-review-item__name a {
text-decoration: none; transition: var(--cc-transition-main);
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-name a:hover,
.woocommerce table.shop_table.cc-checkout-review-order-table .cc-review-item .cc-review-item__name a:hover {
text-decoration: underline;
}
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table)
:is(.cc-cart-item, .cc-order-item)
td.product-name .cc-item-meta__row {
font-family: 'TT Firs Neue';
font-weight: 400;
display: inline-block;
font-size: var(--cc-font-size-sm);
line-height: 1.2;
padding: var(--cc-space-1) var(--cc-space-4);
border-radius: 1.25rem;
}
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table)
:is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row.frisch { background: var(--cc-global-gelb); }
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table)
:is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row.vorrat { background: var(--cc-global-pistazie); }
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table)
:is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row.trocken { background: var(--cc-global-pistazie); }
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table)
:is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row.gutscheine { background: var(--cc-global-violett); }
/* Preise (Cart-Zeile rechts + Totals) */
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal { text-align: right; }
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal .woocommerce-Price-amount,
.woocommerce .cart_totals table.shop_table .cart-subtotal td .woocommerce-Price-amount,
.woocommerce .cart_totals table.shop_table .order-total td :not(.includes_tax) .woocommerce-Price-amount,
.woocommerce table.shop_table .cart-subtotal td .woocommerce-Price-amount,
.woocommerce table.shop_table .order-total td :not(.includes_tax) .woocommerce-Price-amount,
.woocommerce table.shop_table.cc-checkout-review-order-table .woocommerce-Price-amount {
font-family: 'Archeron Pro';
font-weight: 400;
font-size: var(--cc-font-size-h5);
}
@media (max-width: 768px) {
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-name,
:is(.woocommerce, .woocommerce-page)
table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-total {
font-size: 1rem;
line-height: 1.2;
}
}
@media (max-width: 768px) {
.woocommerce table.shop_table.cc-checkout-review-order-table .woocommerce-Price-amount{
font-size: 1rem;
line-height: 1.2;
}
.woocommerce table.shop_table.cc-checkout-review-order-table .cart_item .cc-item-meta{
margin-top: .5rem;
}
:is(.woocommerce, .woocommerce-page) table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row{
font-size: .9rem;
}
}
@media (max-width: 400px) {
:is(.woocommerce, .woocommerce-page) table.shop_table:is(.cc-shop-table, .cc-checkout-review-order-table) :is(.cc-cart-item, .cc-order-item) td.product-name .cc-item-meta__row{
font-size: .8rem;
}
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.woocommerce .cart_totals table.shop_table .cart-subtotal td .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.woocommerce .cart_totals table.shop_table .order-total td :not(.includes_tax) .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.woocommerce table.shop_table .cart-subtotal td .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.woocommerce table.shop_table .order-total td :not(.includes_tax) .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.woocommerce table.shop_table.cc-checkout-review-order-table .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
font-size: 70%;
}
@media (max-width: 992px) {
.woocommerce table.shop_table.cc-shop-table .cc-cart-item .cc-item-meta{
margin-top: .5rem;
}
}
/* ---------- Mobile: Cart-Zeilen als Grid ---------- */
@media (max-width: 768px) {
.woocommerce table.shop_table.cc-shop-table .cc-cart-item {
display: grid;
grid-template-columns: 70px 1fr auto;
grid-auto-rows: auto;
align-items: start;
gap: var(--cc-space-2) var(--cc-space-2);
padding: var(--cc-space-2) var(--cc-space-2);
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item:first-child {
border-top: 1px solid var(--cc-global-schrift-dunkel);
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item > :is(td, th) {
display: block;
border: none !important;
width: auto;
padding: var(--cc-space-0) var(--cc-space-0);
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-thumbnail {
grid-column: 1; grid-row: 1 / span 2; align-self: start; width: auto;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-thumbnail img {
display: block; width: 70px; height: auto;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-name {
grid-column: 2; grid-row: 1; width: auto; text-align: left !important;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-name .cc-item-meta__row {
font-size: var(--cc-font-size-xs); line-height: 1.2; padding: var(--cc-space-1) var(--cc-space-4); border-radius: 1.25rem;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-quantity {
grid-column: 2; grid-row: 2; width: auto; text-align: left !important;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item .product-quantity .cc-qty {
display: inline-flex; align-items: center; gap: .5rem;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-remove {
grid-column: 3; grid-row: 2; justify-self: end; align-self: start; padding-top: 0; width: auto;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal {
grid-column: 3; grid-row: 1; justify-self: end; font-weight: 600; line-height: 1; font-size: 1rem; width: auto;
}
.woocommerce table.shop_table.cc-shop-table .cc-cart-item td.product-subtotal .woocommerce-Price-amount{
font-size: 1rem;
line-height: 1;
}
/* Woo data-title Labels entfernen */
.woocommerce table.shop_table.cc-shop-table .cc-cart-item [data-title]::before,
.woocommerce table.shop_table.cc-shop-table .cc-cart-item .product-thumbnail::before {
content: none !important;
}
}
/* ---------- Cart Totals ---------- */
.woocommerce table.shop_table .cart-discount {
font-family: 'Archeron Pro';
font-size: var(--cc-font-size-h5);
color: var(--cc-global-schrift-dunkel);
}
.woocommerce table.shop_table .cart-discount td { text-align: right; }
.woocommerce-remove-coupon {
font-family: 'TT Firs Neue';
font-size: var(--cc-font-size-sm);
color: var(--cc-global-schrift-dunkel);
}
/* Totals: Subtotal/Total-Zeilen */
.woocommerce .cart_totals table.shop_table .cart-subtotal,
.woocommerce .cart_totals table.shop_table .order-total,
.woocommerce table.shop_table .cart-subtotal,
.woocommerce table.shop_table .order-total {
font-family: 'Archeron Pro';
font-size: var(--cc-font-size-h5);
color: var(--cc-global-schrift-dunkel);
background: var(--cc-global-grau-hell);
}
.woocommerce .cart_totals table.shop_table :is(.cart-subtotal, .order-total) td,
.woocommerce table.shop_table :is(.cart-subtotal, .order-total) td { text-align: right; }
.woocommerce .cart_totals table.shop_table .order-total td .includes_tax,
.woocommerce table.shop_table .order-total td .includes_tax ,
.woocommerce table.shop_table .cc-total-order_total td .includes_tax {
font-family: 'TT Firs Neue';
font-weight: 400;
line-height: 1;
font-size: var(--cc-font-size-sm);
display: block;
color: var(--cc-global-schrift-dunkel);
}
.woocommerce table.shop_table .order-total td .includes_tax .woocommerce-Price-amount,
.woocommerce table.shop_table .cc-total-order_total td .includes_tax .woocommerce-Price-amount {
font-family: 'TT Firs Neue';
font-weight: 400;
line-height: 1;
font-size: var(--cc-font-size-sm);
color: var(--cc-global-schrift-dunkel);
}
/* Versandblock in Totals */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator {
text-align: left; width: 100%;
}
.woocommerce .cart-collaterals .cart_totals table .cccs-shipping-heading-row th,
.woocommerce-page .cart-collaterals .cart_totals table .cccs-shipping-heading-row th,
body .woocommerce table .cccs-shipping-heading-row th,
body .woocommerce-page table .cccs-shipping-heading-row th {
font-family: 'Archeron Pro';
font-size: var(--cc-font-size-h3);
padding-top: 4rem;
padding-bottom: var(--cc-space-3);
}
.cccs-shipping-row th,
.cccs-shipping-row td { vertical-align: middle; }
.woocommerce .cart-collaterals .cart_totals table .cccs-shipping-col-left,
body .woocommerce table tfoot th.cccs-shipping-col-left {
/* font-weight: 500; */
color: var(--cc-global-schrift-dunkel);
width: 70%;
}
.cccs-shipping-col-right {
font-family: 'Archeron Pro';
font-weight: 400;
color: var(--cc-global-schrift-dunkel);
text-align: right;
}
.cccs-shipping-col-right .woocommerce-Price-amount { display: block; }
.cccs-shipping-col-left .cccs-shipping-label {
display: inline-block;
font-family: 'TT Firs Neue';
padding: var(--cc-space-1) var(--cc-space-4);
border-radius: 1.25rem;
font-size: var(--cc-font-size-sm);
line-height: 1.2;
}
.cccs-shipping-col-left .cccs-shipping-label.frisch { background: var(--cc-global-gelb); }
.cccs-shipping-col-left .cccs-shipping-label.vorrat { background: var(--cc-global-pistazie); }
.cccs-shipping-col-left .cccs-shipping-label.trocken { background: var(--cc-global-pistazie); }
.cccs-shipping-col-left .cccs-shipping-label.gutscheine { background: var(--cc-global-violett); }
.cccs-shipping-detail {
font-family: 'TT Firs Neue';
font-weight: 400;
margin-top: var(--cc-space-2);
font-size: var(--cc-font-size-sm);
line-height: 1.4;
}
/* Mobile: Totals-Tabellen-Header behalten */
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background: transparent;
}
.shop_table_responsive.cc-cart-totals-table th {
display: table-cell !important;
text-align: left;
padding-right: 1rem;
}
.shop_table_responsive.cc-cart-totals-table td::before { content: none !important; }
.shop_table_responsive.cc-cart-totals-table td { display: table-cell !important; text-align: right; }
.shop_table_responsive.cc-cart-totals-table tr { display: table-row !important; }
}
/* ---------- Buttons (Cart & Checkout) ---------- */
.woocommerce-page ul.products li.product a.button,
.woocommerce-page .woocommerce-message a.button,
.woocommerce-page .woocommerce-message a.button.wc-forward,
.woocommerce-page .woocommerce a.button.wc-forward,
.woocommerce-page button.button:not(.single_add_to_cart_button),
.woocommerce-page button.button.alt:not(.single_add_to_cart_button),
.woocommerce-page a.button:not(.single_add_to_cart_button),
.woocommerce-page a.button.alt:not(.single_add_to_cart_button),
.woocommerce-page .woocommerce button[type=submit],
.woocommerce-page .woocommerce button[type=submit]#place_order {
text-transform: none;
border: none;
font-family: 'Archeron Pro';
background: var(--cc-global-limoncello);
color: var(--cc-global-schrift-dunkel);
font-size: var(--cc-font-size-lg);
line-height: 1.4;
padding: var(--cc-space-2) var(--cc-space-6);
border-radius: 0;
transition: var(--cc-transition-main);
}
.woocommerce-page ul.products li.product a.button:hover,
.woocommerce-page .woocommerce-message a.button:hover,
.woocommerce-page .woocommerce-message a.button.wc-forward:hover,
.woocommerce-page .woocommerce a.button.wc-forward:hover,
.woocommerce-page button.button:not(.single_add_to_cart_button):hover,
.woocommerce-page button.button.alt:not(.single_add_to_cart_button):hover,
.woocommerce-page a.button:not(.single_add_to_cart_button):hover,
.woocommerce-page a.button.alt:not(.single_add_to_cart_button):hover,
.woocommerce-page .woocommerce button[type=submit]:hover,
.woocommerce-page .woocommerce button[type=submit]#place_order:hover {
background: var(--cc-global-pistazie);
color: var(--cc-global-schrift-dunkel);
border: none;
border-radius: 0px;
}
.woocommerce-page button[type=submit].alt.disabled,
.woocommerce table.cart td.actions .button:disabled,
.woocommerce-page table.cart td.actions .button:disabled {
border-radius: 0;
background-color: var(--cc-global-grau-leicht);
padding: var(--cc-space-2) var(--cc-space-6);
}
@media (max-width: 768px) {
.woocommerce-page .wc-proceed-to-checkout a.button.wc-forward {
display: block; margin-left: 20px; margin-right: 20px;
}
}
.woocommerce-page .woocommerce-message .cc-button{
color: white;
margin-top: 1rem;
text-decoration: none;
}
.woocommerce-page .woocommerce-message{
align-items: start;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.woocommerce-page .woocommerce-message .cc-button{
margin-left: 2rem;
margin-top: 0;
flex-shrink: 0;
white-space: nowrap;
}
.woocommerce-page .woocommerce-message{
align-items: center;
flex-direction: row;
justify-content: space-between;
}
}
/* ---------- Checkout ---------- */
@media (max-width: 768px) {
.woocommerce-form-coupon-toggle,
.checkout_coupon.woocommerce-form-coupon,
.order_review_heading,
.woocommerce-notices-wrapper,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-account-fields,
h3#order_review_heading,
.woocommerce h3#cc-checkout-payment-heading,
.woocommerce-page #payment h3#cc-checkout-payment-heading {
padding-left: 20px; padding-right: 20px;
}
}
.woocommerce-checkout .woocommerce-shipping-fields .woocommerce-form__label-for-checkbox{
margin-bottom: 0;
}
@media (min-width: 768px) {
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
margin-top: 1rem;
}
}
/* Coupon */
.woocommerce form.checkout_coupon {
margin: 0 0 2rem 0;
display: flex; flex-direction: row; align-items: center;
}
@media (max-width: 768px) {
.woocommerce form.checkout_coupon { flex-direction: column; }
}
.woocommerce #order_review,
.woocommerce-page #order_review {
background: none; padding: 0; border-radius: 0;
}
/* Versandadresse Toggle (Mobile) */
@media (max-width: 768px) {
#ship-to-different-address {
margin-top: 20px;
background: var(--cc-global-grau-leicht);
padding: 23px;
}
}
/* ---------- Order Review (Checkout) ---------- */
:is(.woocommerce, .woocommerce-page)
table.shop_table.cc-checkout-review-order-table
.cc-cart-item :is(th, td) {
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
}
:is(.woocommerce, .woocommerce-page)
table.shop_table.cc-checkout-review-order-table
:is(.cc-cart-item, .cc-order-item):first-child :is(th, td) {
border-top: 1px solid var(--cc-global-schrift-dunkel);
}
/* Name/Qty im Review */
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name { width: 70%; }
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name .cc-review-item__name,
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name .cc-review-item__qty { display: inline-block;
vertical-align: top;
}
.woocommerce table.shop_table .order-total .includes_tax{
margin-left: -400%;
}
@media (max-width: 768px) {
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name{
width: 80%;
}
}
@media (max-width: 360px) {
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name .cc-review-item__name,
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name .cc-review-item__qty {
display: block;
}
}
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-name .cc-review-item__name { width: 80%; }
/* Product total rechts im Review */
.woocommerce table.shop_table.cc-checkout-review-order-table :is(.cc-cart-item, .cc-order-item) td.product-total { text-align: right; }
/* ---------- Payment ---------- */
.woocommerce #payment,
.woocommerce-page #payment {
background: transparent;
border: none; margin-top: 4rem;
}
.woocommerce #payment h3,
.woocommerce-page #payment h3 {
padding: 0;
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
text-align: left;
padding: var(--cc-space-3) var(--cc-space-3);
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
border-top: 1px solid var(--cc-global-schrift-dunkel);
margin: 0; list-style: none outside;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method input[type="radio"],
.woocommerce-cart #payment ul.payment_methods .wc_payment_method input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method input[type="radio"]{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method label,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label{
display: block;
padding-left: 2.8rem;
position: relative;
text-align: left;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method label:hover,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label:hover,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label:hover{
cursor: pointer;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method label:after,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label:after,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label:after,
#add_payment_method #payment ul.payment_methods .wc_payment_method label:before,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label:before,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label:before{
content: '';
display: block;
left: 0;
position: absolute;
top: 0;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method label:after,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label:after,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label:after{
background-color: var(--cc-global-schrift-dunkel, #141414);
border-radius: 50%;
height: .9rem; /* 14.4px */
margin-left: .375rem; /* 6px */
margin-top: .75rem; /* 12px */
opacity: 0;
transform: scale(.5);
transition: opacity .2s ease-in, transform .1s ease-in;
width: .9rem; /* 14.4px */
z-index: 6;
}
#add_payment_method #payment ul.payment_methods .wc_payment_method label:before,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method label:before,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method label:before{
background-color: var(--cc-global-grau-leicht, #F0F0F0);
border: solid 1px var(--cc-global-schrift-dunkel, #141414);
border-radius: 50%;
height: 1.625rem; /* 26px */
margin-top: .375rem; /* 6px */
width: 1.625rem; /* 26px */
}
#add_payment_method #payment ul.payment_methods .wc_payment_method input[type="radio"]:checked + label:after,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method input[type="radio"]:checked + label:after,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method input[type="radio"]:checked + label:after{
opacity: 1;
transform: scale(1);
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box{
background-color: var(--cc-global-grau-leicht, #F0F0F0);
margin-top: 20px;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before{
border-bottom-color: var(--cc-global-grau-leicht, #F0F0F0);
}
#add_payment_method #payment ul.payment_methods .wc_payment_method .payment_box > div,
.woocommerce-cart #payment ul.payment_methods .wc_payment_method .payment_box > div,
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method .payment_box > div{
/* padding-left: .625rem; 10px */
/* padding-right: .625rem; 10px */
padding-top: 1.875rem; /* 30 px */
}
.woocommerce form .form-row label.checkbox,
.woocommerce-page form .form-row label.checkbox,
.woocommerce-form__label.woocommerce-form__label-for-checkbox{
display: block;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox:hover{
cursor: pointer;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox input[type="checkbox"]{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox{
padding-left: 3rem;
position: relative;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox::after,
.woocommerce-form__label.woocommerce-form__label-for-checkbox::before{
content: '';
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox::before{
background-color: var(--wc-content-bg, #ffffff);
border: solid 1px var(--cc-global-schrift-dunkel, #141414);
height: 1.875rem; /* 30px */
margin-top: -1px;
width: 1.875rem; /* 30px */
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox::after{
border: solid var(--cc-global-schrift-dunkel);
border-width: 0 3px 3px 0;
content: '';
display: block;
height: 18px;
left: 0;
margin-left: 10px;
margin-top: 3px;
position: absolute;
top: 0;
transform: rotate(36deg);
transition: opacity .2s ease-in-out;
width: 10px;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox:has(input[type="checkbox"]:not(:checked))::after{
opacity: 0;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox:has(input[type="checkbox"]:checked)::after {
opacity: 1;
}
@media (max-width: 992px) {
.woocommerce-form__label.woocommerce-form__label-for-checkbox{
padding-left: 2.6rem;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox::before{
height: 1.5rem; /* 24px */
margin-top: 0;
width: 1.5rem; /* 24px */
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox::after{
border-width: 0 2px 2px 0;
height: 15px;
margin-left: 8px;
margin-top: 3px;
width: 7px;
}
}
/* ---------- Order Thankyou Page (Checkout) ---------- */
/* Order items Table */
.woocommerce table.shop_table.cc-checkout-review-order-table tfoot td {
text-align: right;
}
.woocommerce table.shop_table.cc-checkout-review-order-table tfoot {
font-family: 'Archeron Pro';
font-size: var(--cc-font-size-h5);
color: var(--cc-global-schrift-dunkel);
}
.woocommerce table.shop_table.cc-checkout-review-order-table tfoot :is(.cc-total-cart_subtotal, .cc-total-order_total) :is(th, td) {
background: var(--cc-global-grau-hell);
}
.woocommerce table.shop_table.cc-checkout-review-order-table tfoot .cc-total-shipping .shipped_via {
display:none;
}
.woocommerce .customer_details,
.woocommerce-page .customer_details,
.woocommerce .addresses address,
.woocommerce-page .addresses address {
border:none;
padding-top: var(--cc-space-2);
margin-bottom: 0;
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
border-top: 1px solid var(--cc-global-schrift-dunkel);
text-align: left;
width: 100%;
border-radius: 0px;
background:var(--cc-global-grau-leicht);
}
.woocommerce .woocommerce-customer-details :last-child {
margin-bottom: var(--cc-space-6);
}
@media (max-width: 768px) {
h3.woocommerce-order-details__title,
.woocommerce-customer-details h3,
.cc-thankyou-impact {
padding-left: 20px;
padding-right: 20px;
}
}
/* Impact Info */
.cc-thankyou-impact .cc-customer-firstname,
.cc-thankyou-impact .cc-impact-number {
color: var(--cc-global-violett-dunkel);
}
.cc-impact-message {
padding: var(--cc-space-2) 0;
font-size: var(--cc-font-size-lg);
}
/*---------------------------------
Woocommerce Customer Account
------------------------------------*/
/*----- Navigation -----*/
/*
.woocommerce .woocommerce-MyAccount-navigation ul,
.woocommerce-page .woocommerce-MyAccount-navigation ul {
}
*/
.woocommerce .woocommerce-MyAccount-navigation ul li,
.woocommerce-page .woocommerce-MyAccount-navigation ul li,
.woocommerce-page .woocommerce-MyAccount-navigation ul li:last-child {
border:none;
}
.woocommerce .woocommerce-MyAccount-navigation ul li a,
.woocommerce-page .woocommerce-MyAccount-navigation ul li a {
text-decoration: none;
padding: var(--cc-space-0) 0 var(--cc-space-2) 0;
}
.woocommerce .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-page .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-page .woocommerce-MyAccount-navigation ul li.is-active a {
text-decoration: underline;
}
/*------ Orders ------*/
.woocommerce table.shop_table.my_account_orders thead th,
.woocommerce-page table.shop_table.my_account_orders thead th {
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
border-top: 1px solid var(--cc-global-schrift-dunkel);
background: var(--cc-global-grau-leicht);
}
.woocommerce-page table.shop_table.my_account_orders .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-number {
font-weight: 500;
}
.woocommerce-page table.shop_table.my_account_orders .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-number a {
text-decoration: none;
}
.woocommerce-page table.shop_table.my_account_orders .woocommerce-orders-table__cell .button.cc-my-account-orders-button {
font-size: var(--cc-font-size-md);
}
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive.my_account_orders tbody th,
.woocommerce-page table.shop_table_responsive.my_account_orders tbody th {
display: block;
text-align: right;
background: var(--cc-global-grau-leicht);
}
.woocommerce table.shop_table_responsive.my_account_orders tr,
.woocommerce-page table.shop_table_responsive.my_account_orders tr {
margin-bottom: var(--cc-space-6);
}
.woocommerce table.shop_table_responsive.my_account_orders tr th::before,
.woocommerce-page table.shop_table_responsive.my_account_orders tr th::before {
content: attr(data-title) ": ";
font-weight: 700;
float: left;
}
}
/*------ Adresse ------*/
.woocommerce-account .addresses .title .edit,
.woocommerce-account .addresses .title h3 {
float: none;
}
.woocommerce .addresses .title a, .woocommerce-page .addresses .title a {
position: relative;
text-align: left;
float:none;
}
.cc-account-address-note {
margin-bottom: var(--cc-space-6);
}
/*------ Account ------*/
.cc-password-change-custom {
padding: var(--cc-space-3);
border-top: 1px solid var(--cc-global-schrift-dunkel);
border-bottom: 1px solid var(--cc-global-schrift-dunkel);
background: var(--cc-global-grau-leicht);
margin: var(--cc-space-8) 0;
}
/*------ Login ------*/
.woocommerce-account:has(.cc-login-wrapper) .woocommerce-notices-wrapper,
.cc-custom-login{
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.woocommerce-account:has(.cc-login-wrapper) .woocommerce-notices-wrapper{
padding-left: 0;
padding-right: 0;
}
}
.cc-login-wrapper,
.cc-registration-wrapper{
/*
padding: var(--cc-space-4);
background: var(--cc-global-grau-leicht);
margin-bottom: var(--cc-space-9);
*/
background-color: #f0f0f0;
border-radius: 5px;
padding: 2rem 2rem 2rem;
}
.woocommerce-account:has(.cc-login-wrapper) .woocommerce-notices-wrapper .woocommerce-error{
border-radius: 5px;
}
.cc-login-wrapper{
margin-bottom: 2rem;
}
@media (min-width: 992px) {
.cc-login-wrapper{
margin-bottom: 4rem;
}
}
.cc-login-wrapper{
background-color: #E8EEEB;
}
.cc-registration-wrapper{
background-color: #DBE4E0;
}
.woocommerce form.login .woocommerce-form__label.woocommerce-form__label-for-checkbox::before{
border-color: #adadad;
}
.woocommerce form.login,
.woocommerce-page form.login,
.woocommerce form.register,
.woocommerce-page form.register{
background: none;
border: none;
border-radius: 0px;
color: var(--cc-global-schrift-dunkel);
font-weight: 400;
padding: 0;
}
.woocommerce form.login,
.woocommerce form.register{
margin-bottom: 0;
}
.woocommerce form.register .cc-button,
.woocommerce form.login .cc-button{
background: transparent;
font-size: var(--cc-font-size-md);
line-height:1.4;
padding: 4px 12px 6px 12px;
}
.woocommerce form.login .form-row label:not(.woocommerce-form__label-for-checkbox),
.woocommerce form.register .form-row label{
font-size: 1.25rem;
line-height: 1.4;
color: #5C5C5C;
display: inline-block;
font-weight: 500;
margin-bottom: .4rem;
}
.woocommerce form.register .form-row input.input-text:focus,
.woocommerce-page form.register .form-row input.input-text:focus,
.woocommerce form.register .form-row textarea:focus,
.woocommerce-page form.register .form-row textarea:focus,
.woocommerce form.login .form-row input.input-text:focus,
.woocommerce-page form.login .form-row input.input-text:focus,
.woocommerce form.login .form-row textarea:focus,
.woocommerce-page form.login .form-row textarea:focus {
border-color: #5C5C5C;
color: var(--cc-global-schrift-dunkel);
}
.woocommerce form.register .form-row input.input-text,
.woocommerce-page form.register .form-row input.input-text,
.woocommerce form.register .form-row textarea,
.woocommerce-page form.register .form-row textarea,
.woocommerce form.login .form-row input.input-text,
.woocommerce-page form.login .form-row input.input-text,
.woocommerce form.login .form-row textarea,
.woocommerce-page form.login .form-row textarea{
border: solid 1px #adadad;
border-radius: 0;
color: var(--cc-global-schrift-dunkel);
font-size: var(--cc-font-size-md);
height: auto;
line-height:1.4;
padding: .6rem .8rem;
}
.woocommerce form.login .form-row,
.woocommerce form.register .form-row{
padding-left: 0;
padding-right: 0;
}
.woocommerce form.login .woocommerce-form-login__rememberme{
display: block;
margin-bottom: 2rem;
margin-top: 1rem;
}
.woocommerce form.register .woocommerce-privacy-policy-text{
display: block;
margin-bottom: 1.4rem;
margin-top: 1.4rem;
}
.woocommerce form.login .form-row .required,
.woocommerce form.register .form-row .required{
color: var(--cc-global-schrift-dunkel);
}
.woocommerce form.register .woocommerce-password-strength,
.woocommerce form.login .lost_password{
margin-top: 1rem;
}
.woocommerce form.register .woocommerce-privacy-policy-text p,
.woocommerce form.login .lost_password{
font-size: var(--cc-font-size-sm);
}