@charset "UTF-8";
/********************************************************************************************************************************************************************************
ALL STYLES BY:
outline4.ch
*********************************************************************************************************************************************************************************/
:root {
/*
grid
*/
--grid-gap: 34px;
/*
page widths (+100)
*/
--site-width: 2500px;
--page-width: 1320px;
--content-width: 810px;
--page-padding: 40px;
/*
page heights
*/
--header-height: 90px;
--nav-space: 20px;
/*
colors
*/
--color-light-gray: #f8f8f8;
--color-brand: #8C0000;
--color-text: #000;
--color-title: #1A1A1A;
--color-gray: #575756;
--color-light-gray: #F6F6F6;
--color-link: var(--color-brand);
--color-link-hover: #FB9C48;
--color-body-background: #F2F0E4;
--color-darker-body-background: #E8E2CA;
--color-white: #fff;
--color-line: #4D4D4D;
--color-error: var(--color-brand);
--color-success: #187571;
--color-footer-bottom: #292E34;
--color-footer-below: #565c63;
--color-footer: #fff; /* #F0EBD7; */
/*
fonts
*/
--font-regular-family: "Medium-Book", sans-serif;
--font-title-family: "Compressed-Regular", sans-serif;
--font-bold-family: "Medium-ExtraBold", sans-serif;
/* --font-bold-family: "Medium-ExtraBold", sans-serif; */
--font-size: 19px;
--font-line-height: 25px;
--body-font-size: 19px;
--body-margin-height: 25px;
--body-margin-size: var(--body-margin-height);
--font-small-size: 16px; --font-small-line-height: 21px;
--font-tiny-size: 14px; --font-tiny-line-height: 19px;
--font-nav-size: 20px; --font-nav-line-height: 26px;
--font-sub-nav-size: 19px; --font-sub-nav-line-height: 25px;
--font-h0-size: 60px; --font-h0-line-height: 63px;
--font-h1-size: 40px; --font-h1-line-height: 42px;
--font-h2-size: 32px; --font-h2-line-height: 34px;
--font-h3-size: 26px; --font-h3-line-height: 28px;
/*
Transformation
*/
--ease-speed: 0.2s;
--transformation: 1.03;
--transition: all .3s ease-out;
--transform-slide-fade: transform 0.5s ease-out, opacity 0.5s ease-out;
/*
Forms
*/
--link-border-thickness: 1px;
--line-color: #4D4D4D;
--input-border: var(--link-border-thickness) solid var(--line-color);
--input-border-color: var(--line-color);
--input-padding: 8px 10px;
--select-padding: 8px 10px;
--input-border-radius: 35px;
--input-background-color: #fff;
/*
Animate css
*/
--animate-duration: 0.5s;
/*
Decoration
*/
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/*
Breakpoints:
1200px (xlarge)
850px (large)
600px (medium)
500px (small)
380px (xsmall)
*/
}
/* General Semantic Tags
------------------------------------------------------------------------------------------------------- */
nav h1 { display: none; } /* Being friendly to newsreaders */
/* Set to 100%
------------------------------------------------------------------------------------------------------- */
html, body { }
/* Body
------------------------------------------------------------------------------------------------------- */
body {
margin: 0;padding: 0;
font-family: var(--font-regular-family);
font-size: var(--font-size); line-height: var(--font-line-height);
color: var(--color-text);
background: var(--color-body-background);
text-rendering: optimizeLegibility;
transition: all 0.3s ease-in-out;
}
#wrapper { position: relative; width: 100%; }
/* Widths
------------------------------------------------------------------------------------------------------- */
.site_width {
position: relative; width: 100%; max-width: var(--site-width);
}
.page_width {
position: relative; width: 100%; max-width: var(--page-width); margin-left: auto; margin-right: auto;
padding-left: var(--page-padding); padding-right: var(--page-padding);
}
.page_width .page_width { padding-left: 0; padding-right: 0; }
.content_width {
position: relative; width: 100%; max-width: calc(var(--content-width) + 2 * var(--page-padding)); margin-left: auto; margin-right: auto;
padding-left: var(--page-padding); padding-right: var(--page-padding);
}
.content_width .content_width { padding-left: 0; padding-right: 0; }
@media screen and (max-width: 850px) { :root { --page-padding: 20px; } }
.content_max_width { width: 100%; max-width: calc(var(--content-width) + 2 * var(--page-padding)); margin-left: auto; margin-right: auto; }
.content_max_width .content_max_width { padding-left: 0; padding-right: 0; }
.page_max_width { max-width: var(--page-width); margin-left: auto; margin-right: auto; }
/* heights
------------------------------------------------------------------------------------------------------- */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-container { flex: 1; } /* Nimmt verbleibenden Platz zwischen Header und Footer ein */
#footer { flex-grow: 0; } /* macht das der footer immer unten angeschlagen ist */
/* Headings & Formatting
------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, .h0, .h1, .h2, .h3, .h4 { font-family: var(--font-title-family); color: var(--color-title); font-weight: normal; }
.h0 { font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); }
h1, .h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); }
h2, .h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-line-height); }
h3, .h3 { font-size: var(--font-h3-size); line-height: var(--font-h3-line-height); }
h4, .h4 { font-size: var(--font-h3-size); line-height: var(--font-h3-line-height); }
/* Links
------------------------------------------------------------------------------------------------------- */
a, .link { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover, .link:hover, a:focus, a:active { color: inherit; text-decoration: none; }
/* Image links remove the Magic border below images (another method would be to make images display as block) */
a img, a:hover img { border: none; text-decoration: none; vertical-align: bottom; }
.pointer-right {
padding-left: 40px;
background: url(/assets/images/icons/pointer-right.svg) no-repeat 0 center transparent;
background-size: 30px;
}
.brand_color { color: var(--color-brand); }
/* Bold
------------------------------------------------------------------------------------------------------- */
b, strong { font-family: var(--font-bold-family); font-weight: 400; color: inherit; }
/* Auswahl
------------------------------------------------------------------------------------------------------- */
::selection {
background: var(--color-brand);
color: #fff;
}
/* Main Format
------------------------------------------------------------------------------------------------------- */
.main_format img { display: inline-block; vertical-align: bottom; }
.main_format a {
color: var(--color-brand);
transition: all 0.3s ease-in-out;
}
.main_format a:hover { text-decoration: underline; color: var(--color-link-hover); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.main_format h1 { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
.main_format h1, .main_format h2, .main_format h3, .main_format h4, .main_format .h1, .main_format .h2, .main_format .h3 {
margin-top: calc(1.5 * var(--body-margin-height));
/* text-align: center; */
}
.main_format h1 a { color: var(--color-title); text-decoration: none; border-bottom: none; }
.main_format h1 a:hover { color: var(--color-brand); text-decoration: none; border-bottom: none; }
.main_format a h1, .main_format a h2, .main_format a h3, .main_format a p { text-decoration: none; border-bottom: none; }
.main_format p, .main_format figure, .main_format iframe, .main_format ul { /* text-align: center; */ margin-top: var(--body-margin-height); }
.main_format figcaption {
font-size: var(--font-small-size); line-height: var(--font-small-line-height); text-align: center; margin-top: calc(var(--body-margin-height)/2);
color: var(--color-text-light);
}
.main_format table { margin-top: var(--body-margin-height); }
.main_format td, .main_format th { text-align: left; padding-right: 15px; vertical-align: top;}
.main_format th { font-weight: normal; font-family: var(--font-title-family); }
.main_format td:last-child, .main_format th:last-child { padding-right: 0px; }
/*
.main_format hr {
background-color: var(--line-color); border-width:0; color: var(--line-color); height:1px; line-height:0; margin-top: var(--body-margin-height); margin-bottom: var(--body-margin-height); text-align:center; width:100%;
}
*/
.main_format hr, hr {
height: 12px;
margin: 0;
background: url(/assets/images/separation-line.svg) center no-repeat;
border: none;
}
.main_format p.small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
.main_format ul { list-style-type: none; }
.main_format ul li:before { content: '\2014'; position: absolute; margin-left: -20px; }
.main_format li { position: relative; margin-left: 21px; list-style-position: inside; }
.main_format ul.errors { margin-top: 5px; }
.main_format ul.errors li:before { content: '⚠ '; position: relative; }
/* for small Text Block */
.main_format.small {
font-size: var(--font-small-size)!important; line-height: var(--font-small-line-height)!important;
}
.content.main_format h1:first-child,
.content.main_format h2:first-child { margin-top: var(--body-margin-height); }
.main_format p.errors { margin-top: 0; }
.main_format.left,
.main_format.align_left { text-align: left; }
.main_format.left h1,
.main_format.left h2,
.main_format.left h3,
.main_format.left p,
.main_format.left ul,
.main_format .align_left h1,
.main_format .align_left h2,
.main_format .align_left h3,
.main_format .align_left p,
.main_format .align_left ul { text-align: left!important; }
.main_format details { margin-top: var(--body-margin-height); }
.main_format summary {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding: 10px 20px;
background-color: var(--color-brand);
color: white;
cursor: pointer;
list-style: none; /* Entfernt den Standard-Pfeil */
display: flex;
justify-content: space-between; /* Falls du Inhalte auf beiden Seiten haben willst */
align-items: center;
border-radius: var(--input-border-radius);
}
/* Pfeil-Icon manuell erstellen */
.main_format summary::after {
content: "▼"; /* Unicode-Pfeil */
font-size: 14px;
margin-left: auto; /* Pfeil nach rechts schieben */
transition: transform 0.3s ease;
}
/* Pfeil drehen, wenn geöffnet */
.main_format details[open] summary::after {
transform: rotate(180deg);
}
/* iOs */
.main_format summary { list-style: none; }
.main_format summary::-webkit-details-marker { display: none; }
/* inverted */
.main_format.inverted { color: var(--color-footer); }
.main_format.inverted h2,
.main_format.inverted h3 { color: var(--color-footer); }
.main_format.inverted a { color: var(--color-footer); text-decoration: underline; }
.main_format.inverted a:hover { text-decoration: none; }
/* Claim Format
------------------------------------------------------------------------------------------------------- */
.claim_format { text-align: left; }
.claim_format h1 { font-family: var(--font-title-family); font-size: var(--font-h0-size); line-height: var(--font-h0-line-height); /* text-transform: uppercase; */ /* white-space: nowrap; */ }
.claim_format h2 { color: var(--color-brand); font-family: var(--font-title-family); font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); /* text-transform: uppercase; white-space: nowrap; */ }
.claim_format h1 + h2 { margin-top: calc(var(--body-margin-height)); }
/* Forms
------------------------------------------------------------------------------------------------------- */
.forms_format .align_left { text-align: left!important; }
.forms_format .align_right { text-align: left!important; }
.forms_format h1, .forms_format .h1 { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; margin-top: 0; }
.forms_format h2, .forms_format .h2 { margin-top: calc(var(--body-margin-height)/2); }
.forms_format p { margin-top: var(--body-margin-height); }
.forms_format th { text-align: left; font-weight: normal; font-family: var(--font-bold-family); }
/* Intro Format
------------------------------------------------------------------------------------------------------- */
.intro_format { text-align: center; }
.intro_format h1 { font-family: var(--font-regular-family); font-size: var(--font-intro-size); line-height: var(--font-intro-line-height); color: var(--color-brand); }
@media only screen and (max-width: 600px) {
:root { --font-intro-size: 50px; --font-intro-line-height: 50px; }
}
.intro_format p, .intro_format figure, .intro_format iframe, .intro_format ul {
margin-top: var(--body-margin-height); text-align: center;
}
.intro_format h2 { font-family: var(--font-bold-family); color: var(--color-brand); font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); }
@media only screen and (max-width: 600px) {
.intro_format h2 { font-size: 37px; line-height: 39px; }
}
.script { font-family: var(--font-regular-family); font-size: var(--font-intro-size); line-height: var(--font-intro-line-height); }
.script.divider { font-size: 30px; line-height: 0px; }
/* Listing Format
------------------------------------------------------------------------------------------------------- */
.listing_format a { text-decoration: none; }
.listing_format img { display: block; vertical-align: bottom; }
.listing_format h2, .listing_format p { margin-top: 0; }
.listing_format figure { margin-top: var(--body-margin-height); }
.listing_format .add_to_basket { font-family: var(--font-title-family); font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
/* HR horizontal rule
------------------------------------------------------------------------------------------------------- */
/* hr { background-color: var(--color-text); border-width: 0; color: var(--color-text); height: 1px; line-height: 0; margin-bottom: 22px; text-align: center; width: 100%; } */
/* hr::after { clear: both; content: ""; display: table; } */
.slick-slide figcaption { text-align: center; }
/* Grid with fractions col-1-2 etc.
------------------------------------------------------------------------------------------------------- */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* Define 12 columns by default */
gap: var(--body-margin-height);
}
.grid.center_vertical { align-items: center; /* Vertikale Zentrierung */ }
.grid.big_spacing { gap: calc(var(--body-margin-height) * 2); }
/* Einstellungen für jede Spalte */
.column {
grid-column: span var(--span);
}
@media (max-width: 800px) {
.grid {
grid-template-columns: repeat(4, 1fr); /* Change to 4 columns at 800px */
margin-top: 0;
}
.col-1-2.image, .col-1-2.reverse_order_on_mobile {
order: -1; /* Bild wird vor Text angezeigt */
}
.column[data-span="6"] {
grid-column: span 2; /* 50% width for span 6 (spanning 2 out of 4 columns) */
}
.column[data-span="4"] {
grid-column: span 4; /* Full width for span 4 */
}
}
@media (max-width: 600px) {
.column[data-span="6"] {
margin-top: 0;
grid-column: span 4; /* 50% width for span 6 (spanning 2 out of 4 columns) */
}
}
.col-1-1 { grid-column: span 12; }
.col-1-2 { grid-column: span 6; }
.col-1-3 { grid-column: span 4; } /* thirds */
.col-2-3 { grid-column: span 8; }
.col-1-4 { grid-column: span 3; } /* quarters */
.col-2-4 { grid-column: span 6; }
.col-3-4 { grid-column: span 9; }
@media (max-width: 1000px) {
.col-1-4 { grid-column: span 6; } /* quarters */
.col-2-4 { grid-column: span 12; }
.col-3-4 { grid-column: span 9; }
}
@media (max-width: 700px) {
.col-1-1 { grid-column: span 12; }
.col-1-2 { grid-column: span 6; }
.col-1-3 { grid-column: span 6; } /* thirds */
.col-2-3 { grid-column: span 6; }
.col-1-4 { grid-column: span 3; } /* quarters */
.col-2-4 { grid-column: span 6; }
.col-3-4 { grid-column: span 9; }
}
@media (max-width: 500px) {
.col-1-1 { grid-column: span 12; }
.col-1-2 { grid-column: span 12; }
.col-1-3 { grid-column: span 12; } /* thirds */
.col-2-3 { grid-column: span 12; }
.col-1-4 { grid-column: span 6; } /* quarters */
.col-3-4 { grid-column: span 6; }
}
/* Grid with grid-item
------------------------------------------------------------------------------------------------------- */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
}
@media screen and (max-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 500px) { .grid-container { grid-template-columns: repeat(1, 1fr); } }
.grid-item {
background-color: #ddd;
width: 100%;
padding-top: 150%;
}
.grecaptcha-badge iframe { margin-top: 0; }
/* Drinks
------------------------------------------------------------------------------------------------------- */
/* Grid with fractions col-1-2 etc.
------------------------------------------------------------------------------------------------------- */
.drinks-listing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(2 * var(--body-margin-height));
margin-top: calc(2 * var(--body-margin-height) - 20px);
h3, p { margin-top: calc(var(--body-margin-height) / 4)!important; }
}
.drinks-item { position: relative; margin-left: 18%; }
.drinks-item h2 { color: var(--color-brand); }
.drinks-item p { color: var(--color-text); }
.drinks-item a:hover { text-decoration: none!important; }
.drinks-item-image {
position: relative; margin-left: -18%;
padding: calc(2 * var(--body-margin-height));
padding-bottom: var(--body-margin-height);
}
.drinks-item-image img { width: 100%; height: auto; }
@media (max-width: 1000px) { .drinks-listing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
.drinks-listing { grid-template-columns: 1fr; }
/* one column listing adjustements */
#bern-mule { margin-top: -40%; }
#moschterer { margin-top: -33%; }
#ingwerer-spritz { margin-top: -10%; }
#ingwerer-soda { margin-top: -13%; }
}
.drinks-specs {
display: flex;
justify-content: center; /* Horizontal zentrieren */
align-items: center; /* Vertikal zentrieren */
}
.drinks-definition {
display: grid;
grid-template-columns: auto 1fr; /* Erste Spalte für , zweite für */
gap: 10px 20px; /* Abstand zwischen den Elementen */
align-items: center;
}
.drinks-definition dt {
white-space: nowrap; /* Verhindert Umbruch */
font-family: var(--font-title-family); font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
color: #000;
text-align: right;
}
#drinks-detail {
display: grid;
grid-template-columns: 50% 50%;
}
@media screen and (max-width: 1000px) {
#drinks-detail { grid-template-columns: 60% 40%; }
}
@media screen and (max-width: 800px) {
#drinks-detail { grid-template-columns: 1fr; }
}
/* Header */
/* ---------------------------------------------------------------------------------------------------- */
#header {
position: sticky; top: 0;
width: 100%;
z-index: 2;
height: var(--header-height);
background-color: #fff; /* var(--color-body-background); */
/* box-shadow: var(--box-shadow); */
}
/*
:target {
scroll-margin-top: var(--header-height);
}
damit anchor links korrekt dargestellt werden
*/
#header-inner {
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 0 var(--page-padding); */
}
#logo {
width: 140px;
display: flex;
align-items: center; /* Vertikale Zentrierung im Logo */
justify-content: center; /* Horizontale Zentrierung im Logo */
padding: 10px 0px;
}
#logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
#navigation {
display: flex; /* Flexbox für die Navigation */
align-items: center; /* Vertikale Zentrierung */
justify-content: flex-end; /* Alle Elemente nach rechts schieben */
gap: 20px; /* Abstand zwischen den Elementen */
}
#navigation > * {
display: flex; /* Sicherstellen, dass die Unterelemente auch Flexbox nutzen */
align-items: center; /* Vertikale Zentrierung */
}
/* Main Navigation (desktop)
------------------------------------------------------------------------------------------------------- */
#main-nav {
position: relative;
padding-top: 8px;
font-family: var(--font-regular-family); font-size: var(--font-nav-size); line-height: var(--font-nav-line-height);
}
@media screen and (max-width: 1000px) {
#main-nav { display: none; }
}
#main-nav ul { list-style: none; }
#main-nav ul ul { display: none; }
#main-nav li.main-nav-item {
display: inline-block;
padding-left: calc(var(--body-margin-height) / 2); padding-right: calc(var(--body-margin-height) / 2);
margin-bottom: calc(var(--body-margin-height) / 3);
}
#main-nav li.main-nav-item.with_dot { padding-left: 0; padding-right: 0; }
#main-nav .main-nav-item:hover > a {
color: var(--color-brand);
}
#main-nav .main-nav-item.here > a {
font-family: var(--font-bold-family); color: var(--color-brand);
}
/* Main Navigation (mobile)
------------------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) { /* Nur für Mobile */
#main-nav {
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
height: 0;
background: var(--color-brand);
overflow: hidden;
transition: height 0.4s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0;
padding-left: var(--page-padding); padding-right: var(--page-padding);
}
#main-nav li.main-nav-item.with_dot,
.dot { display: none; }
#main-nav li.main-nav-item { width: 100%; margin-top: calc(2 * var(--body-margin-height)) }
#main-nav li.main-nav-item:first-child { margin-top: calc(2 * var(--body-margin-height)); }
#main-nav.open {
height: calc(100vh - var(--header-height));
width: 100vw;
}
#main-nav ul { width: 100%; }
#main-nav .main-nav-item { text-align: right; }
/* Menüpunkte */
#main-nav a {
font-size: var(--font-h1-size); line-height: var(--font-h1-line-height);
color: white;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
font-family: var(--font-title-family);
}
/* Menüpunkte erscheinen nacheinander */
#main-nav.open a {
opacity: 1;
transform: translateY(0);
}
#main-nav.open a:nth-child(1) { transition-delay: 0.2s; }
#main-nav.open a:nth-child(2) { transition-delay: 0.5s; }
#main-nav.open a:nth-child(3) { transition-delay: 0.8s; }
#main-nav.open a:nth-child(4) { transition-delay: 1.2s; }
#main-nav.open a:nth-child(5) { transition-delay: 1.5s; }
#main-nav .main-nav-item:hover > a,
#main-nav .main-nav-item.here > a {
color: white; text-decoration: underline;
font-family: var(--font-title-family);
}
}
/* Hamburger */
/* ---------------------------------------------------------------------------------------------------- */
#hamburger {
display: none;
margin-left: var(--nav-space);
}
@media (max-width: 1000px) { /* Breakpoint bp-nav */
#hamburger { display: block; }
}
/*
#nav_button {
cursor: pointer;
width: 32px; height: 33px;
background: url(/assets/images/icons/menu-open.svg) no-repeat 0 0 transparent;
background-size: contain;
}
*/
#nav_button {
cursor: pointer;
width: 33px; height: 33px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#nav_button::before,
#nav_button::after {
content: "";
position: absolute;
width: 33px; height: 2px;
background: black;
transition: transform 0.3s, top 0.3s, bottom 0.3s;
}
#nav_button::before { top: 10px; }
#nav_button::after { bottom: 10px; }
#nav_button.open::before { top: 50%; transform: rotate(45deg); }
#nav_button.open::after { bottom: 46%; transform: rotate(-45deg); }
/* Language Selection
------------------------------------------------------------------------------------------------------- */
#lang-selection {
margin-left: calc(var(--nav-space) - calc(var(--body-margin-height) / 2));
font-family: var(--font-regular-family);
}
#lang-selection a.here { color: var(--color-brand); font-family: var(--font-bold-family); }
@media screen and (max-width: 500px) {
#lang-selection { display: none; /* users can use the footer */ }
}
/* Mein Konto / Warenkorb
------------------------------------------------------------------------------------------------------- */
#mein-konto { margin-left: calc(var(--nav-space) - 6px); }
#header-mein-konto, #header-warenkorb {
position: relative;
display: inline-block; width: 36px; height: 34px;
}
#header-warenkorb { margin-left: 13px; }
#header-mein-konto { background: url(/assets/images/icons/account.svg) no-repeat 0 -2px transparent; }
#header-mein-konto.active { background-image: url(/assets/images/icons/account-active.svg); }
#header-warenkorb { background: url(/assets/images/icons/cart.svg) no-repeat 0 0 transparent; }
#header-warenkorb.active { background-image: url(/assets/images/icons/cart-active.svg); }
#number {
position: absolute; top: -15px; right: 17px;
font-family: var(--font-bold-family); font-size: var(--font-size); line-height: var(--font-line-height);
color: var(--color-brand);
z-index: 1;
}
#number.more_than_9 { right: 12px; }
#number.more_than_99 { right: 9px; }
#content_container {
margin-top: calc(2.5 * var(--body-margin-height));
}
/* Hero Renaissance!
/* ---------------------------------------------------------------------------------------------------- */
.hero {
aspect-ratio: 2 / 1;
/* height: auto; Don't use any height! */
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--color-darker-body-background);
position: relative; /* Wichtig für den Schatten */
z-index: 1;
overflow: hidden;
}
.parallax-element {
position: absolute;
background-size: contain;
background-position: center;
transform: translate3d(0, 0, 0); /* Hardwarebeschleunigung */
will-change: transform;
background-repeat: no-repeat;
}
#hero-renaissance {
}
#hero-renaissance #hero-ingwer {
background-image: url('/assets/images/hero/renaissance/ingwer.gif');
z-index: 0;
left: 55%;
width: 153%;
margin-left: -75%;
top: -34%;
height: 252%;
margin-top: -14%;
}
#hero-renaissance #hero-god {
background-image: url('/assets/images/hero/renaissance/god.gif');
z-index: 1;
right: -25%;
width: 133%;
top: -51%;
height: 224%;
}
#hero-renaissance #hero-adam {
background-image: url('/assets/images/hero/renaissance/adam.gif');
z-index: 1;
left: -20%;
width: 146%;
top: -60%;
height: 245%;
}
#hero-skyline {
background-image: url(/assets/images/hero/skyline/Skyline_01_bg.gif);
background-size: cover;
}
#hero-skyline #hero-knolle {
background-image: url('/assets/images/hero/skyline/Skyline_02_Knolle.gif');
z-index: 0;
left: 50%;
width: 100%;
margin-left: -51%;
top: 13%;
height: 130%;
margin-top: -16%;
}
#hero-skyline #hero-bern {
background-image: url('/assets/images/hero/skyline/Skyline_03_Bern.gif');
z-index: 1;
left: 0;
width: 100%;
bottom: -7%;
height: 150%;
}
#hero-skyline #hero-tropf {
background-image: url('/assets/images/hero/skyline/Skyline_04_Tropf.gif');
z-index: 1;
left: 0%;
width: 100%;
top: -12%;
height: 100%;
}
#hero-waitress {
background-image: url(/assets/images/hero/waitress/Servier_01_bg.gif);
background-size: cover;
}
#hero-waitress #hero-knolle {
background-image: url('/assets/images/hero/waitress/Servier_02_Knolle.gif');
z-index: 0;
left: 50%;
width: 100%;
margin-left: -50%;
top: 50%;
height: 130%;
margin-top: -30%;
}
#hero-waitress #hero-dame {
background-image: url('/assets/images/hero/waitress/Servier_03_Dame.gif');
z-index: 1;
left: 0%;
width: 100%;
bottom: -19%;
height: 126%;
}
/* different aspect ratio for smaller devices */
@media screen and (max-width: 800px) {
.hero { aspect-ratio: 2 / 1.5; }
#hero-skyline #hero-knolle { top: 13%; margin-top: -16%; }
#hero-skyline #hero-bern { left: -14%; width: 129%; bottom: -4%; height: 129%; }
#hero-skyline #hero-tropf { top: -8%; }
#hero-waitress #hero-knolle { top: 28%; }
#hero-renaissance #hero-ingwer { left: 60%; width: 204%; margin-left: -102%; top: -34%; height: 220%; margin-top: -13%; }
#hero-renaissance #hero-adam { left: -30%; width: 166%; top: -77%; height: 265%; }
#hero-renaissance #hero-god { right: -38%; width: 153%; top: -67%; height: 244%; }
}
/* Display a full background for very small devices */
@media screen and (max-width: 400px) {
.hero { aspect-ratio: 1 / 1; }
/* Display a full background */
#hero-renaissance { background: url(/assets/images/hero/renaissance/renaissance-background.gif) no-repeat calc(50% + 15px) center var(--color-darker-body-background); }
#hero-skyline { background: url(/assets/images/hero/skyline/skyline-background.gif) no-repeat center center var(--color-darker-body-background); }
#hero-waitress { background: url(/assets/images/hero/waitress/waitress-background.gif) no-repeat center center var(--color-darker-body-background); }
#hero-renaissance,
#hero-skyline,
#hero-waitress { background-size: cover; }
/* Hide elements, only display an image */
#hero-renaissance #hero-ingwer,
#hero-renaissance #hero-god,
#hero-renaissance #hero-adam,
#hero-skyline #hero-knolle,
#hero-skyline #hero-bern,
#hero-skyline #hero-tropf,
#hero-waitress #hero-knolle,
#hero-waitress #hero-dame { display: none; }
}
/* Sub Navigation (mein konto / warenkorb)
------------------------------------------------------------------------------------------------------- */
#sub-nav-container {
width: 100%;
background: #E6B44B;
padding-top: calc(0.5 * var(--body-margin-height)); padding-bottom: calc(1 * var(--body-margin-height));
}
#sub_nav {
position: relative;
font-family: var(--font-regular-family); font-size: var(--font-sub-nav-size); line-height: var(--font-sub-nav-line-height);
/* margin-bottom: calc(var(--body-margin-height) - calc(var(--body-margin-height) / 3)); */
}
#sub_nav ul { list-style: none; }
#sub_nav li { display: inline-block; }
#sub_nav .sub_nav_item {
display: inline-block;
margin-top: calc(0.5 * var(--body-margin-height));
padding-right: calc(var(--body-margin-height));
}
#sub_nav .sub_nav_item:hover a {
color: var(--color-brand);
}
#sub_nav .sub_nav_item.here a {
font-family: var(--font-bold-family); color: var(--color-brand);
}
/* Cookie Banner */
/* ---------------------------------------------------------------------------------------------------- */
.cookieNotice {
background: var(--color-light-gray);
display: none;
position: relative;
padding: 10px;
width: 100%;
text-align: center;
}
.cookieNotice p {
margin-bottom: 0;
}
/*
Shop Products
---------------------------------------------------------------------------------------------------- */
.product-container { width: 100%; background-color: transparent; }
.product-container.dark {
background-color: var(--color-darker-body-background);
}
.product-item {
display: grid;
grid-template-columns: 40% 60%;
gap: 0px;
align-items: center; /* Vertikale Ausrichtung */
margin-top: calc(1 * var(--body-margin-height));
padding-bottom: var(--body-margin-height);
}
/*
Landscape Product
*/
.product-item.landscape { grid-template-columns: 1fr; }
.product-item.landscape .product-image { aspect-ratio: 1440 / 906 ; }
.product-item.landscape .product-image figure { margin-top: 0!important; }
.product-item.landscape .product-desc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--body-margin-height);
align-items: start;
}
.product-container.dark .product-item {
padding-top: calc(1 * var(--body-margin-height));
padding-bottom: calc(2 * var(--body-margin-height));
}
.product-desc .product-title { color: var(--color-brand)!important; }
.product-variant {
display: flex; gap: 10px;
align-items: center; /* Vertikal zentriert */
cursor: pointer;
padding: 8px 0;
margin-top: var(--body-margin-height);
}
.product-variant input[type="radio"] {
width: 18px; height: 18px;
accent-color: var(--color-brand);
}
.product-variant span {
display: inline-block;
}
.store-product-price {
font-family: var(--font-title-family);
font-size: calc(var(--font-h1-size) - 3px); line-height: calc(var(--font-h1-line-height) - 3px);
color: var(--color-brand);
}
.product-remark {
display: block;
width: 100%;
color: var(--color-brand);
}
.product-image, .product-desc { position: relative; }
.product-image { aspect-ratio: 906 / 1440; }
/*
Product image sizes
*/
@media screen and (max-width: 1200px ) {
.product-item { grid-template-columns: 450px auto; }
}
@media screen and (max-width: 800px ) {
.product-item { align-items: flex-start; }
.product-image { margin-left: -10%; }
.product-desc { margin-left: -10%; }
.product-item.landscape .product-desc { margin-left: 0 }
.product-item.landscape .product-image { margin-left: 0; }
}
@media screen and (max-width: 720px ) {
.product-item { grid-template-columns: 1fr; }
.product-image { max-height: 600px; margin-left: 0; }
.product-item.landscape .product-desc { grid-template-columns: 1fr; }
.product-desc { margin-left: 0; }
/* one column listing adjustements */
#ingwerer .product-image { }
#ingwerer-12-x-4-cl .product-image { margin-top: -10%; }
#ingwerer-12-x-4-cl .product-desc { margin-top: -10%; }
#ingwerer-gin-0-5l .product-image { margin-top: -14%; margin-left: -20px; }
#ingwerer-gin-0-5l .product-desc { margin-top: -14%; }
#minz-likoer-0-7l .product-image { margin-top: -3%; }
#minz-likoer-0-7l .product-desc { margin-top: 0px; }
}
.spinner {
position: absolute;
top: 50%; left: 50%; width: 40px; height: 40px;
margin-top: -20px; margin-left: -20px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid var(--color-brand);
border-radius: 50%;
animation: spin 0.8s linear infinite;
z-index: 10;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#international-orders h2 { font-size: var(--font-h0-size); line-height: var(--font-h0-line-height); }
#international-orders h3 { font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); color: var(--color-brand); }
/* Forms Semantics */
/* ---------------------------------------------------------------------------------------------------- */
.segment { margin-top: calc(var(--body-margin-height)*1.5); } /* segment class separates elements */
.field {
text-align: left;
position: relative; margin-top: calc(var(--body-margin-height)*1);
}
.field input, .field select { margin-top: calc(var(--body-margin-height) / 4); }
.field label {
font-family: var(--font-regular-family);
font-size: var(--font-size); line-height: var(--font-line-height);
}
/* .field input { margin-left: calc(-1 * var(--input-border-radius) + 10px); } */
.instruction, .instructions {
font-size: var(--font-small-size); line-height: var(--font-small-line-height);
margin-top: calc(var(--body-margin-height) / 2);
}
/* Buttons (primary and secondary) */
/* ---------------------------------------------------------------------------------------------------- */
button, input[type="submit"], .button, a.btn, a.button, a:hover.button {
appearance: none;
display: inline-block;
box-shadow: none; text-decoration: none; border-radius: 0;
border: none;
background: var(--color-brand); color: var(--color-body-background);
font-family: var(--font-title-family); font-size: var(--font-h2-size); line-height: var(--font-h2-line-height);
text-transform: none; text-align: center;
padding: calc(var(--body-margin-height) / 1.5) calc(var(--body-margin-height) * 1.5);
padding-bottom: calc(var(--body-margin-height) / 1.5 - 6px);
border-radius: var(--input-border-radius);
}
@media screen and (max-width: 700px) {
button, input[type="submit"], .button, a.btn, a.button, a:hover.button {
font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
padding-bottom: calc(var(--body-margin-height) / 2 - 6px);
}
}
button.small {
font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
padding-bottom: calc(var(--body-margin-height) / 2 - 6px);
}
input[type="submit"].small {
font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
padding: 10px 20px;
padding-bottom: 5px;
}
a.btn.btn--inline { margin-right: var(--body-margin-height); margin-top: var(--body-margin-height); }
button.fluid, input[type="submit"].fluid, .button.fluid, a.button.fluid {
width: 100%;
}
button.secondary, input[type="submit"].secondary, .button.secondary, a.button.secondary,
button.gray, input[type="submit"].gray, .button.gray, a.button.gray {
border: var(--link-border-thickness) dotted var(--color-line);
background: var(--color-body-background); color: #000;
}
button:hover, input[type="submit"]:hover, a.btn:hover, .button:hover, a.button:hover {
background-color: var(--color-link-hover);
color: white;
text-decoration: none;
}
button.secondary:hover, input[type="submit"].secondary:hover, .button.secondary:hover, a.button.secondary:hover,
button.gray:hover, input[type="submit"].gray:hover, .button.gray:hover, a.button.gray:hover {
background-color: var(--color-body-background);
border-color: var(--color-brand); color: var(--color-brand);
}
button:active, input[type="submit"]:active, .button:active, a.button:active {
background-color: var(--color-link-hover);
}
button.secondary:active, input[type="submit"].secondary:active, .button.secondary:active, a.button.secondary:active,
button.gray:active, input[type="submit"].gray:active, .button.gray:active, a.button.gray:active {
background-color: #FFD8DA; border-color: var(--color-brand); color: var(--color-brand);
}
button.buy_ingwerer, input[type="submit"].buy_ingwerer, .button.buy_ingwerer, a.button.buy_ingwerer {
min-width: 250px;
}
/*
*
* Forms and Buttons
*
------------------------------------------------------------------------------------------------------- */
/* base styling */
/* ---------------------------------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="date"],
textarea,
select {
position: relative;
width: 100%;
appearance: none;
outline: none;
background: var(--color-body-background); color: var(--color-text);
border: 1px solid var(--color-line); border-radius: var(--input-border-radius);
padding: calc(var(--body-margin-height) / 2) var(--body-margin-height);
font-family: var(--font-regular-family); font-size: var(--font-size); line-height: var(--font-line-height);
}
.inverted input[type="text"],
.inverted input[type="email"],
.inverted input[type="number"],
.inverted input[type="tel"],
.inverted input[type="password"],
.inverted input[type="date"],
.inverted textarea,
.inverted select {
background: var(--color-body-background); color: var(--color-text);
border: 1px solid var(--color-footer);
}
.field.error input,
input[type="text"]:focus,
input[type="text"].error,
input[type="email"]:focus,
input[type="email"].error,
input[type="number"]:focus,
input[type="number"].error,
input[type="tel"]:focus,
input[type="tel"].error,
input[type="password"]:focus,
input[type="password"].error,
input[type="date"]:focus,
input[type="date"].error,
textarea:focus,
textarea.error,
select:focus,
select.error {
border-color: var(--color-brand);
}
.inverted input[type="text"]:focus,
.inverted input[type="text"].error,
.inverted input[type="email"]:focus,
.inverted input[type="email"].error,
.inverted input[type="number"]:focus,
.inverted input[type="number"].error,
.inverted input[type="tel"]:focus,
.inverted input[type="tel"].error,
.inverted input[type="password"]:focus,
.inverted input[type="password"].error,
.inverted input[type="date"]:focus,
.inverted input[type="date"].error,
.inverted textarea:focus,
.inverted textarea.error,
.inverted select:focus,
.inverted select.error {
border-color: var(--color-footer);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
/* add required asterisk automatically */
input:required,
select:required,
textarea:required {
background-image: url('/assets/images/icons/required.svg');
background-repeat: no-repeat;
background-position: calc(100% - 10px) center;
background-size: 11px;
}
.inverted input:required,
.inverted select:required,
.inverted textarea:required {
background-image: url('/assets/images/icons/required-white.svg');
}
textarea:required {
background-position-y: 10px;
}
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
overflow: hidden;
}
/* Dropdown */
/* ---------------------------------------------------------------------------------------------------- */
select {
padding-top: calc(var(--body-margin-height) / 2); padding-bottom: calc(var(--body-margin-height) / 2);
padding-right: 40px;
min-width: 110px;
background: url(/assets/images/icons/dropdown-arrow.svg) no-repeat calc(100% - 10px) center transparent;
background-size: 15px;
}
.inverted select {
background: url(/assets/images/icons/dropdown-arrow.svg) no-repeat calc(100% - 10px) center var(--color-footer);
background-size: 15px;
}
/* search */
/* ---------------------------------------------------------------------------------------------------- */
input[type="search"] {
appearance: none;
background: var(--color-body-background); color: var(--color-text);
border: 1px solid var(--color-line); border-radius: var(--input-border-radius);
padding-top: 7px; padding-bottom: 7px; padding-left: 42px;
background: url(/assets/images/icons/Search-icon.svg) no-repeat 8px center transparent;
background-size: 30px 25px;
}
/* checkbox */
/* ---------------------------------------------------------------------------------------------------- */
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
border-color: var(--color-line);
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 9px;
display: inline-block;
}
/* Custom Checkbox */
/* ---------------------------------------------------------------------------------------------------- */
input[type="checkbox"] {
appearance: none;
border: 1px solid var(--color-line);
background: var(--color-body-background);
border-radius: var(--input-border-radius);
border-collapse: collapse;
box-shadow: none;
vertical-align: middle;
width: 44px!important;
height: 44px;
position: relative;
}
input[type="checkbox"]:checked {
border-color: var(--color-line);
background: var(--color-body-background);
}
input[type="checkbox"]:disabled {
background: #f4f4f2;
}
input[type="checkbox"]:checked:after {
position: absolute;
left: 9px;
top: 15px;
width: 22px;
height: 22px;
content: url(/assets/images/icons/checkbox-check.svg);
}
/* Small Forms */
/* ---------------------------------------------------------------------------------------------------- */
.small input[type="text"],
.small input[type="email"],
.small input[type="number"],
.small input[type="tel"],
.small input[type="password"],
.small select {
padding: 0 calc(var(--body-margin-height) / 4);
}
/* File input */
/* ---------------------------------------------------------------------------------------------------- */
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
cursor: pointer;
padding-left: 38px;
background-image: url(/assets/images/icons/upload-icon.svg);
background-position: 10px center;
background-repeat: no-repeat;
background-size: 20px;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: var(--color-brand);
}
.inputfile + label * {
pointer-events: none;
}
/* honeypot field */
#ingwererTransparent { display: none; }
.input-mini, .input-midi {
display: inline-block; width: 60px!important;
text-align: center;
padding: 7px 11px!important;
margin: 0;
}
.input-midi { width: 120px!important; }
/* icon Button */
/* ---------------------------------------------------------------------------------------------------- */
.inline_form { }
.add-to-cart-number {
display: flex;
align-items: center; /* Vertikal zentrieren */
justify-content: center; /* Horizontal zentrieren */
gap: 5px; /* Abstand zwischen den Elementen */
white-space: nowrap; /* Verhindert Umbrüche */
margin-bottom: 9px;
}
.qty-btn {
width: 20px;
height: 20px;
cursor: pointer;
background-repeat: no-repeat; background-position: center center; background-size: contain; background-color: transparent;
padding: 0; margin: 0; border-radius: 0;
}
.qty-btn.plus { background-image: url(/assets/images/icons/qty-plus.svg); }
.qty-btn.minus { background-image: url(/assets/images/icons/qty-minus.svg); }
.qty-btn:hover { background-color: transparent; }
/* Cart notices
------------------------------------------------------------------------------------------------------- */
.icon_button {
appearance: none;
display: inline-block;
box-shadow: none; text-decoration: none; border-radius: 0; border: none;
background: var(--color-body-background); color: var(--color-text);
margin: 0; padding: 0;
margin-left: 5px;
}
.icon_button:hover {
background: var(--color-body-background);
}
i.icon {
display: inline-block;
width: 19px;
height: 14px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
}
.refresh.icon {
width: 18px;
height: 22px;
background-image: url(/assets/images/icons/reload.svg);
cursor: pointer;
}
.delete.icon {
width: 20px;
height: 22px;
background-image: url(/assets/images/icons/delete.svg);
cursor: pointer;
}
/* Cart payment
------------------------------------------------------------------------------------------------------- */
/* Card Element */
#card-element {
padding: calc(var(--body-margin-height) / 2) var(--body-margin-height);
border: 1px solid var(--color-line);
border-radius: var(--input-border-radius);
background: var(--color-body-background);
font-family: var(--font-regular-family); font-size: var(--font-size); line-height: var(--font-line-height);
}
#card-element:focus, #card-element.error {
border-color: var(--color-brand);
}
.form button,
.form input[type="submit"],
.form .button,
.form a.button {
margin-top: calc(var(--body-margin-height) / 2); margin-bottom: calc(var(--body-margin-height) / 2);
}
/* Warenkorb */
/* ---------------------------------------------------------------------------------------------------- */
#cart_table {
width: 100%;
margin-top: var(--body-margin-height);
}
#cart_table th {
padding-bottom: calc(var(--body-margin-height) / 2);
font-family: var(--font-regular-family);
font-size: var(--font-small-size);
line-height: var(--font-small-line-height);
font-weight: normal; font-style: normal;
}
#cart_table td {
padding-top: calc(var(--body-margin-height) / 2);
padding-bottom: calc(var(--body-margin-height) / 2);
border-top: 1px solid var(--color-line);
vertical-align: middle;
font-family: var(--font-title-family);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
/* text-transform: uppercase; */
}
/* numbers in order_table are on top vs. middle in schritt-1 */
#cart_table.order_table td { vertical-align: top; }
#cart_table tr.no_border td {
border-top: none;
}
#cart_table .cart_items td {
padding-top: calc(var(--body-margin-height) / 2);
padding-bottom: calc(var(--body-margin-height) / 2);
}
#cart_table .cart_currency td { border-top: 1px solid var(--color-brand);}
#cart_table .cart_currency p { margin-top: 0; }
/* make order table behave differently when on payment page and email */
#cart_table .cart_items td {
padding-top: 4px;
padding-bottom: 4px;
border: none !important;
}
#cart_table .no_padding_btm td {
padding-bottom: 0 !important;
}
.adjustment_row td {
padding-top: 0 !important;
}
i.required {
position: absolute;
right: 7px;
top: calc(50% - 6px);
color: var(--color-brand);
font-size: 25px;
}
.cart_info_container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.stripe-payment-form { margin-top: var(--body-margin-height); }
.cart_product_description h2.h1 {
/* display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; */
line-height: 33px!important;
}
.cart_title { margin-right: 6px; }
.cart_short-desc {
white-space: nowrap;
font-family: var(--font-regular-family); font-size: var(--font-small-size); line-height: var(--font-small-line-height);
/* display: inline-block; width: 100%; */
}
@media screen and (max-width: 670px) {
.cart_short-desc { }
}
/* Blog */
/* ---------------------------------------------------------------------------------------------------- */
.blog_listing_item {
border-bottom: 1px solid var(--color-line);
margin-bottom: calc(var(--body-margin-height) * 2);
}
/* Rechnung (print) */
/* ---------------------------------------------------------------------------------------------------- */
body#rechnung {
width: 21cm; height: 29.7cm;
font-size: 12pt; line-height: 16pt;
background: #fff;
}
#print_container {
position: relative;
width: 100%; height: 100%;
padding: 2cm;
}
#print_shop_address_container {
position: absolute; top: 2cm; left: 2cm;
color: gray;
}
#print_container h2 {
font-size: 22pt; line-height: 26pt;
font-family: var(--font-title-family);
font-style: normal; font-weight: normal; font-variant: normal;
color: #000;
}
.cart_items h2, .cart_items p { margin-top: calc(0.25 * var(--body-margin-height))!important; margin-bottom: calc(0.25 * var(--body-margin-height))!important; }
#trennlinie_horizontal {
position: absolute; top: 33%; left: 0;
width: 100%; height: 2px;
border: 1px dotted gray;
}
#trennlinie_vertikal {
position: absolute; left: 40%; top: 0;
height: 33%; width: 2px;
border: 1px dotted gray;
}
#print_shipping_address_container {
position: absolute; top: 34.5mm; right: 2cm;
width: 8cm;
}
#print_content {
position: absolute; top: 11cm; left: 2cm;
width: 19cm; padding-right: 2cm;
}
#print_content_header {
margin-bottom: 1cm;
}
#empfaenger {
position: absolute; top: 2.3cm; left: 11cm;
width: 6cm; color: gray;
}
/* List Icons */
/* ---------------------------------------------------------------------------------------------------- */
ul.icon_list {
list-style: none;
}
ul.icon_list li {
font-size: var(--font-small-size); line-height: var(--font-small-line-height);
background-position: left 2px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 20px;
padding-left: 27px;
margin-left: 0;
}
ul.icon_list li::before { content: ''; }
ul.icon_list .info { background-image: url(/assets/images/icons/info.svg); }
ul.icon_list .globe { background-image: url(/assets/images/icons/Globe.svg); }
ul.icon_list .truck { background-image: url(/assets/images/icons/car.svg); }
ul.icon_list .gift { background-image: url(/assets/images/icons/present.svg); }
ul.icon_list .payment { background-image: url(/assets/images/icons/cc.svg); }
ul.icon_list .unhide { background-image: url(/assets/images/icons/eye.svg); }
/* Visual Effects */
/* ---------------------------------------------------------------------------------------------------- */
.product_listing_item { transition: all var(--ease-speed) ease-in-out; }
.product_listing_item:hover { transform: scale(var(--transformation)); }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.highlight-button {
animation: pulse 0.8s ease-in-out;
}
/* Stripe Elements */
/* ---------------------------------------------------------------------------------------------------- */
.stripe-form { width: 100%; border: none; }
.stripe-form fieldset { border: none; }
.stripe-form legend { display: none; }
.stripe-form .card-holder::after { content: ""; display: table; clear: both; }
.stripe-form .card-holder .item { float: left; width: 50%; margin-bottom: var(--body-margin-height); }
.stripe-form .card-holder .item:first-child { padding-right: 20px; }
.stripe-form .card-holder .item:last-child { padding-left: 20px; }
.stripe-form .card-data {
background: var(--color-body-background); color: var(--color-text);
border: 1px solid var(--color-line);
border-radius: var(--input-border-radius);
padding: calc(var(--body-margin-height) / 2);
font-family: var(--font-regular-family);
font-size: var(--font-size);
line-height: var(--body-margin-height);
margin-bottom: var(--body-margin-height);
}
.stripe-form .card-errors { color: var(--color-error); margin-bottom: var(--body-margin-height); }
.stripe-form .grid { width: 100%; margin-left: 0; }
/* Tooltips */
/* ---------------------------------------------------------------------------------------------------- */
#tooltip_templates { display: none; }
.tooltip {
display: inline-block;
width: 16px; height: 16px;
cursor: pointer;
background: url(/assets/images/icons/tooltip.svg) no-repeat center bottom transparent;
background-size: 100%;
}
/* Steps */
/* ---------------------------------------------------------------------------------------------------- */
.progress {
display: flex;
flex-flow: row nowrap;
justify-content: center; /* space-around */
margin-bottom: calc(var(--body-margin-height) * 2);
margin-top: calc(var(--body-margin-height) * 2);
border-bottom: 1px solid var(--color-line);
}
@media (max-width: 500px) { /* Breakpoint bp-small */
.progress { justify-content: space-around; }
}
.step {
display: inline-block;
position: relative;
width: 75px; height: 73px;
text-align: center;
margin-left: var(--body-margin-height);
margin-right: var(--body-margin-height);
margin-bottom: calc(var(--body-margin-height) * 3);
background: url(/assets/images/icons/step.svg) no-repeat center top transparent;
background-size: contain;
}
.step .label {
position: absolute;
left: 32px; top: 24px;
font-family: var(--font-title-family);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
}
.step .title {
position: absolute;
left: 50%; bottom: -35px;
transform: translateX(-50%);
}
.step.active {
background: url(/assets/images/icons/step-active.svg) no-repeat center top transparent;
background-size: contain;
color: var(--color-brand);
}
.step.done .label,
.step.done .title {
color: var(--gray);
}
.step a { color: var(--color-text); }
@media (max-width: 500px) { /* Breakpoint bp-small */
.step { margin-left: 0; margin-right: 0; }
}
@media (max-width: 380px) { /* Breakpoint bp-xsmall */
.step .title { /* display: none; */ }
}
/* Footer */
/* ---------------------------------------------------------------------------------------------------- */
#footer {
width: 100%; position: relative;
margin-top: calc(var(--body-margin-height) * 8);
}
#footer-top {
/*
margin-top: calc(var(--body-margin-height)* 2);
padding-top: calc(var(--body-margin-height) * 3);
padding-bottom: calc(var(--body-margin-height) * 3);
background-color: var(--color-darker-body-background);
*/
}
#footer-logo {
position: absolute;
width: 100px; height: 50px;
left: 37px; /* 50%; transform: translateX(-50%); */
top: -105px;
z-index: 1;
}
#footer-logo img {
display: inline-block;
width: 100%; height: auto;
max-width: 100px;
}
#footer-bottom {
position: relative;
color: var(--color-footer);
background: var(--color-brand);
padding-top: calc(var(--body-margin-height) * 2);
padding-bottom: calc(var(--body-margin-height) * 1);
}
#footer-social { text-align: right; }
#footer-social h3 { visibility: hidden; }
.social-item { margin-top: var(--body-margin-height); display: inline-block; }
.social-icon {
display: inline-block;
margin-left: calc(var(--body-margin-height) * 0.5);
width: 52px; height: 52px;
}
@media screen and (max-width: 800px) {
#footer-social { text-align: left; }
#footer-social h3 { display: none; }
.social-icon { margin-left: 0; margin-right: calc(var(--body-margin-height) * 0.5); }
}
#footer-nav {
position: relative;
border-top: 1px solid var(--color-link-hover);
padding-top: calc(var(--body-margin-height) * 1);
padding-bottom: calc(var(--body-margin-height) * 1);
margin-top: calc(var(--body-margin-height) * 2);
}
.footer-nav-item {
display: inline-block;
padding-left: calc(var(--body-margin-height) / 2);
padding-right: calc(var(--body-margin-height) / 2);
margin-top: calc(var(--body-margin-height) / 2);
}
.footer-nav-item:first-child { padding-left: 0; }
.footer-nav-item a { color: var(--color-white); }
.footer-nav-item.here a { font-family: var(--font-bold-family); }
@media screen and (max-width: 800px) {
.footer-nav-item {
padding-left: 0;
padding-right: var(--body-margin-height);
}
}
@media screen and (max-width: 1000px) {
#footer-site-switcher { padding-right: var(--body-margin-height); }
}
@media screen and (max-width: 500px) {
#footer-site-switcher { padding-right: 0; }
}
#footer-copyright {
text-align: center;
font-size: var(--font-tiny-size);
line-height: var(--font-tiny-line-height);
}
/* Scroll to top */
/* ---------------------------------------------------------------------------------------------------- */
.back-to-top {
position: fixed;
display: inline-block;
width: 60px; height: 60px;
bottom: 30px;
right: 40px;
border-radius: calc(var(--input-border-radius) * 2);
/* background: url(/assets/images/icons/scroll-to-top.svg) no-repeat 0 0 transparent; */
}
@media (max-width: 500px) { /* Breakpoint bp-small */
.back-to-top { bottom: 20px; right: 10px; }
}
/* Bezahlen
/* ---------------------------------------------------------------------------------------------------- */
/* No JS Message */
#no-js-message {
display: block;
}
/* Hide elements */
/* ---------------------------------------------------------------------------------------------------- */
@media (max-width: 500px) { /* Breakpoint bp-small */
.hide-on-small { display: none; }
}
.hide-on-large { display: none; }
@media (max-width: 500px) { /* Breakpoint bp-small */
.hide-on-large { display: inline-block; }
}
.hide_on_desktop,
li.hide_on_desktop { display: none !important; }
@media (max-width: 500px) { /* Breakpoint bp-nav */
.hide_on_desktop,
li.hide_on_desktop { display: block; }
}
/* Popup Content */
/*
------------------------------------------------------------------------------------------------------- */
#popup-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex; align-items: center; justify-content: center;
visibility: hidden; opacity: 0; transition: opacity 0.5s;
overflow-y: auto; /* Falls das Modal größer ist als der Bildschirm */
padding: 20px;
z-index: 10;
}
#popup {
position: relative;
background: white; padding: 20px;
width: 80%; max-width: var(--content-width);
max-height: 90vh;
overflow-y: auto;
border-radius: var(--input-border-radius);
box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}
#popup-overlay.fadein {
visibility: visible; opacity: 1;
}
#close-popup {
position: sticky;
top: 0;
left: calc(100% - var(--body-margin-height));
z-index: 1;
}
/* Cookie Banner
------------------------------------------------------------------------------------------------------- */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
z-index: 11;
}
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { text-decoration: underline; }
@media (max-width: 650px) {
.cookie-banner {
flex-direction: column;
text-align: center;
padding: 20px;
}
.cookie-banner p {
flex: unset;
width: 100%;
margin-bottom: 10px;
}
.cookie-banner div {
display: flex;
flex-direction: column;
width: 100%;
gap: 5px;
}
.cookie-banner button {
width: 100%;
}
}
/* Slider
------------------------------------------------------------------------------------------------------- */
.swiper { width: 100%; height: var(--slider-height); }
.swiper-slide { width: auto; height: var(--slider-height); }
.swiper-slide img, .swiper-slide video { max-width: auto; height: 100%; }
.swiper-button-next::after, .swiper-button-prev::after { color: #000; }
@media screen and (max-width: 768px) {
:root { --slider-height: 625px; }
}
/*
//
// Blocks
//
//
------------------------------------------------------------------------------------------------------- */
/* Block Titel
------------------------------------------------------------------------------------------------------- */
.titel_block.centered { text-align: center; }
/* Block text
------------------------------------------------------------------------------------------------------- */
.text_block.centered { text-align: center; }
/* Block Timeline
------------------------------------------------------------------------------------------------------- */
.padding_timeline { padding-left: 20px; }
/* Two Column Block TwoCols
------------------------------------------------------------------------------------------------------- */
.twoCols_block {
margin-top: calc(1 * var(--body-margin-height));
padding-bottom: var(--body-margin-height);
}
.twoCols_block.dark {
background-color: var(--color-darker-body-background);
padding-top: calc(1 * var(--body-margin-height));
padding-bottom: calc(2 * var(--body-margin-height));
}
/* Block image / Bild Block
------------------------------------------------------------------------------------------------------- */
.image_full_width, .full_width_image, .img_full_width { width: 100%; height: auto; }
.image_percentage_height { height: auto; } /* the width is set within the block */
.ratio_image {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
background-position: center center;
}
/* image alignement for inline content */
img.left {display: inline-block; float: left; padding-right: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
img.right {display: inline-block; float: right; padding-left: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
img.center {display: inline-block; text-align: center;}
.image_thumbnail { display: inline-block; width: 100%; max-width: 150px; height: auto; }
/* Block Download/files */
/* ---------------------------------------------------------------------------------------------------- */
a.download.icon {
background: url(/assets/images/icons/download.svg) no-repeat left center transparent;
background-size: var(--body-margin-height) var(--body-margin-height);
padding-left: 25px;
}
/* Block Slideshow (type thumbnails)
//
// 2do neu schreiben
//
/* ---------------------------------------------------------------------------------------------------- */
ul.thumbnail_slideshow_container {
list-style: none;
font-size: 0px;
margin-left: -2%; /* should match li left margin */
}
@media (max-width: 500px) { /* Breakpoint bp-small */
ul.thumbnail_slideshow_container {
margin-left: 0;
}
}
ul.thumbnail_slideshow_container li {
display: inline-block;
padding: 1%;
margin: 0 0 1% 1%;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
width: 19%; /* this value + 2.5 should = 20% */
}
@media (max-width: 600px) { /* Breakpoint bp-medium */
ul.thumbnail_slideshow_container li { width: 32%; }
}
@media (max-width: 500px) { /* Breakpoint bp-small */
ul.thumbnail_slideshow_container li { width: 49%; }
}
ul.thumbnail_slideshow_container li img {
max-width: 100%; height: auto;
}
/* Line Block
------------------------------------------------------------------------------------------------------- */
.line { width: 100%; border-top: var(--border-white); border-left: var(--border-white); border-right: var(--border-white); }
.line.normal { }
.line.bigger { border-top-width: 5px; }
.line.grid_gap { border-top-width: var(--grid-gap); }
/* Line Space
------------------------------------------------------------------------------------------------------- */
.space { width: 100%; height: 0; background-color: var(--color-body-background); }
/* Block divider
------------------------------------------------------------------------------------------------------- */
.white_space {
margin: 0 auto; text-align: center; height: var(--body-margin-height); padding: 0px; width: 100%; max-width: 370px;
background: #fff;
}
/* Block video
------------------------------------------------------------------------------------------------------- */
.video_full_width_container {
position: relative;
aspect-ratio: 16/9;
margin-top: var(--body-margin-height);
background: var(--color-block-background);
}
.video_full_width_container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
/* Google Maps
------------------------------------------------------------------------------------------------------- */
.google_maps_item {
margin-top: calc(var(--body-margin-height) * 2);
}
.google_maps { width:100%; height:480px; position: relative; overflow:hidden; margin-top: var(--body-margin-height); }
/* Responsive Google Maps */
.google_maps_full_width {
position: relative;
aspect-ratio: 3/4;
height: 0;
}
.google_maps_full_width iframe {
position: absolute; top: 0; left: 0;
width: 100% !important; height: 100% !important;
}
/* Block imageImage
//
// 2do: rewrite
------------------------------------------------------------------------------------------------------- */
.image_left { float:left; width: 50%; padding-right: calc(var(--body-margin-height) / 2); }
@media screen and (max-width: 500px) {
.image_left { float: none; width: 100%; padding-right: 0; }
}
.image_right { float:left; width: 50%; padding-left: calc(var(--body-margin-height) / 2); }
@media screen and (max-width: 500px) {
.image_left { float: none; width: 100%; padding-left: 0; }
}
/* Block infoText - special Message */
/* ---------------------------------------------------------------------------------------------------- */
.message {
background: var(--color-light-gray);
color: var(--color-text);
padding: var(--body-margin-height);
margin-top: calc(var(--body-margin-height) * 1);
border-radius: var(--input-border-radius);
}
.message h2,
.message h3 {
margin-top: calc(var(--body-margin-height) / 2);
/* text-transform: uppercase; */
}
.message p, .message ul {
font-family: var(--font-regular-family);
font-size: var(--font-sub-nav-size);
line-height: var(--font-sub-nav-line-height);
margin-top: calc(var(--body-margin-height) / 2);
}
.message p:last-child {
margin-bottom: 0;
}
.message a {
color: var(--color-brand);
}
/* Icon message */
.message.icon {
display: table;
width: 100%;
}
.message.icon .message_icon,
.message.icon .message_content {
display: table-cell;
vertical-align: middle;
}
.message.icon .message_icon {
width: 80px;
background: url(/assets/images/icons/speaker-icon-black.svg) no-repeat left center transparent;
background-size: 70%;
}
.message.icon .message_content {
width: calc(100% - 80px);
}
@media (max-width: 500px) { /* Breakpoint bp-small */
.message.icon {
display: block;
}
.message.icon .message_icon {
display: none;
}
.message.icon .message_content {
display: block;
vertical-align: top;
width: 100%;
}
}
/* Colored Variants */
.message.red,
.message.error,
.message.success,
.message.green {
background: var(--color-brand);
color: var(--color-white);
}
.message.red h2,
.message.red a,
.message.error h2,
.message.error a,
.message.success h2,
.message.success a,
.message.green h2,
.message.green a {
color: var(--color-white);
}
.message.red a:hover,
.message.error a:hover,
.message.success a:hover,
.message.green a:hover {
text-decoration: underline;
}
.message.red.icon .message_icon,
.message.error.icon .message_icon,
.message.success.icon .message_icon,
.message.green.icon .message_icon {
background-image: url(/assets/images/icons/speaker-icon-white.svg);
}
.message .btn {
font-size: var(--font-h3-size); line-height: var(--font-h3-line-height);
padding: calc(var(--body-margin-height) / 2) calc(var(--body-margin-height) * 1);
padding-bottom: calc(var(--body-margin-height) / 2 - 6px);
}
/* Specials
----------------------------------------------------------------------------------------------------*/
/* Pagination
.pagination { display: block; margin-top: calc(3 * var(--body-margin-height)); }
.pagination .page { display: inline-block; padding: 10px 20px; border: 1px solid var(--color-brand); background: var(--color-brand); color: #fff; }
.pagination .page.active, .page:hover { background: var(--color-text); border: 1px solid var(--color-text); color: #fff; }
------------------------------------------------------------------------------------------------------- */
.pagination {
display: flex;
justify-content: space-between;
align-items: center; /* optional, für vertikale Zentrierung */
width: 100%;
margin-top: calc(3 * var(--body-margin-height));
}
.page { padding-left: 3px; padding-right: 3px; }
a.page { text-decoration: none; }
a.page:hover { font-family: var(--font-bold-family); cursor: pointer; }
.page.arrow_left, .page.arrow_right {
font-family: var(--font-bold-family);
background-repeat: no-repeat;
background-size: 12px;
background-position-y: center;
}
.page.arrow_left {
background-image: url(/assets/images/arrows/arrow-left.svg);
padding-left: 30px; background-position-x: left;
margin-right: calc(0.5 * var(--body-margin-height));
}
.page.arrow_right {
background-image: url(/assets/images/arrows/arrow-right.svg);
padding-right: 30px; background-position-x: right;
margin-left: calc(0.5 * var(--body-margin-height));
}
.pagination-pages { }
.pagination-prev-next { }
/* Hide
------------------------------------------------------------------------------------------------------- */
.hidden, .hide { display: none; }
.visible { display: block; }
.hide-text { font: 0/0 a; text-shadow: none; color: transparent; }
/* Blockquote
------------------------------------------------------------------------------------------------------- */
blockquote { appearance: none; display: block; margin-top: var(--body-margin-height); background: var(--color-block-background); padding: var(--body-margin-height); text-align: center; }
blockquote p { font-family: var(--font-title-family); font-size: var(--font-size); line-height: var(--bod); }
blockquote cite { font-style: italic; }
/* Tags
------------------------------------------------------------------------------------------------------- */
a.tag { background: #999; padding: 3px 5px; white-space: nowrap; border-radius: var(--border-radius); border-bottom: none!important; color: white; }
a:hover.tag { background: var(--color-link); }
/* Alignement
------------------------------------------------------------------------------------------------------- */
.align_right { text-align: right; }
@media (max-width: 500px) { /* Breakpoint bp-small */
.align_right { text-align: left; }
}
.align_center, .center { text-align: center; }
@media (max-width: 500px) { /* Breakpoint bp-small */
.align_center { text-align: left; }
}
.align_left { text-align: left; }
.table_right { text-align: right; white-space: nowrap; }
.padding_right { padding-right: 25px; }
/* Text Styles
------------------------------------------------------------------------------------------------------- */
.uppercase {text-transform: uppercase;}
.small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
.ident { padding-left: 15px; }
/* Margin/Padding Top Classes
------------------------------------------------------------------------------------------------------- */
.margin_top, .main_format .margin_top {margin-top: var(--body-margin-height);}
.mini_margin_top, .main_format .mini_margin_top { margin-top: calc(var(--body-margin-height) / 4); }
.tiny_margin_top, .main_format .tiny_margin_top {margin-top: calc(var(--body-margin-height) / 3);}
.small_margin_top, .main_format .small_margin_top {margin-top: calc(var(--body-margin-height) / 2);}
.big_margin_top, .main_format .big_margin_top {margin-top: calc(var(--body-margin-height) * 2);}
.very_big_margin_top, .main_format .very_big_margin_top {margin-top: calc(var(--body-margin-height) * 3);}
.medium_margin_top, .main_format .medium_margin_top {margin-top: calc(var(--body-margin-height) * 1.2);}
.huge_margin_top, .main_format .huge_margin_top {margin-top: calc(var(--body-margin-height) * 5);}
.no_margin_top, .main_format .no_margin_top {margin-top: 0px!important;}
.padding_top, .main_format .padding_top {padding-top: var(--body-margin-height);}
.tiny_padding_top, .main_format .tiny_padding_top {padding-top: calc(var(--body-margin-height) / 3);}
.small_padding_top, .main_format .small_padding_top {padding-top: calc(var(--body-margin-height) / 2);}
.big_padding_top, .main_format .big_padding_top {padding-top: calc(var(--body-margin-height) * 2);}
.very_big_padding_top, .main_format .very_big_padding_top {padding-top: calc(var(--body-margin-height) * 3);}
.medium_padding_top, .main_format .medium_padding_top {padding-top: calc(var(--body-margin-height) * 1.2);}
.huge_padding_top, .main_format .huge_padding_top {padding-top: calc(var(--body-margin-height) * 5);}
.no_padding_top, .main_format .no_padding_top {padding-top: 0px!important;}
/* Margin/Padding Bottom Classes
------------------------------------------------------------------------------------------------------- */
.margin_btm, .main_format .margin_btm {margin-bottom: var(--body-margin-height);}
.mini_margin_btm, .main_format .mini_margin_btm { margin-bottom: calc(var(--body-margin-height) / 4); }
.tiny_margin_btm, .main_format .tiny_margin_btm {margin-bottom: calc(var(--body-margin-height) / 3);}
.small_margin_btm, .main_format .small_margin_btm {margin-bottom: calc(var(--body-margin-height) / 2);}
.big_margin_btm, .main_format .big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 2);}
.very_big_margin_btm, .main_format .very_big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 3);}
.medium_margin_btm, .main_format .medium_margin_btm {margin-bottom: calc(var(--body-margin-height) * 1.2);}
.huge_margin_btm, .main_format .huge_margin_btm {margin-bottom: calc(var(--body-margin-height) * 5);}
.no_margin_btm, .main_format .no_margin_btm {margin-bottom: 0px!important;}
.padding_btm, .main_format .padding_btm {padding-bottom: var(--body-margin-height);}
.tiny_padding_btm, .main_format .tiny_padding_btm {padding-bottom: calc(var(--body-margin-height) / 3);}
.small_padding_btm, .main_format .small_padding_btm {padding-bottom: calc(var(--body-margin-height) / 2);}
.big_padding_btm, .main_format .big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 2);}
.very_big_padding_btm, .main_format .very_big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 3);}
.medium_padding_btm, .main_format .medium_padding_btm {padding-bottom: calc(var(--body-margin-height) * 1.2);}
.huge_padding_btm, .main_format .huge_padding_btm {padding-bottom: calc(var(--body-margin-height) * 5);}
.no_padding_btm, .main_format .no_padding_btm {padding-bottom: 0px!important;}
/* NO Margin/Padding Bottom Classes
------------------------------------------------------------------------------------------------------- */
.no_margin_top {margin-top: 0!important;}
.no_margin_btm {margin-bottom: 0!important;}
.no_padding_top { padding-top: 0!important; }
.no_padding_btm { padding-bottom: 0!important; }
.no_wrap { white-space: nowrap!important; }
.no_margin, .nomargin {margin-top: 0;}
/* Special Paddings/Margins
------------------------------------------------------------------------------------------------------- */
.padding_left { padding-left: var(--body-margin-height); }
.padding_right { padding-right: var(--body-margin-height); }
.big_padding_left { padding-left: calc(var(--body-margin-height) * 2); }
.big_padding_right { padding-right: calc(var(--body-margin-height) * 2); }
.inline { display: inline-block; }
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clearfix::after { clear: both; content: ""; display: table; }
/* hide / show stuff
----------------------------------------------------------------------------------------------------*/
/* Versteckt das Element auf Desktop-Bildschirmen (ab 992px) */
.hide_on_desktop { display: none; }
@media (max-width: 800px) {
/* Zeigt das Element auf kleineren Bildschirmen */
.hide_on_desktop { display: block; }
}
/* Versteckt das Element auf mobilen Bildschirmen (bis 991px) */
.hide_on_mobile {
display: block;
}
@media (max-width: 800px) {
/* Versteckt das Element auf mobilen Bildschirmen */
.hide_on_mobile { display: none; }
}
.hyphen { word-break: break-word; hyphens: auto; }
.break { word-break: break-word; }
/* Truncate Text
----------------------------------------------------------------------------------------------------*/
.ellipsis { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.no_wrap { white-space: nowrap; }
a.modalbox_edit, a.admin_link { color : #fff!important; background: #999!important; font-size: 11px; padding: 2px 6px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ -khtml-border-radius: 3px; /* for old Konqueror browsers */ text-decoration: none;}
a:hover.modalbox_edit, a:hover.admin_link { color : #fff; background: #333!important; text-decoration: none;}
.success { color: var(--color-success); }
.error, .errors { color: var(--color-error); }
.uppercase {text-transform: uppercase!important;}
/* Choice of Email client
------------------------------------------------------------------------------------------------------- */
/* Overlay background with blur effect */
.email-overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6); /* Dark background with transparency */
backdrop-filter: blur(5px); /* Blur effect */
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
}
/* Popup box */
.email-popup {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 300px;
width: 100%;
animation: fadeIn 0.3s ease-in-out;
}
.email-popup h3 {
margin-bottom: 15px;
font-size: 20px;
line-height: 28px;
display: block;
border-radius: 8px;
}
.email-icon {
display: inline-block;
margin: 10px 0;
text-decoration: none;
font-size: 18px;
transition: color 0.2s;
padding-left: 27px;
background-repeat: no-repeat; background-color: transparent;
background-position: left center;
background-size: 21px;
}
.email-icon.gmail { background-image: url(/assets/images/email-icons/gmail.svg); }
.email-icon.outlook { background-image: url(/assets/images/email-icons/outlook.svg); }
.email-icon.yahoo { background-image: url(/assets/images/email-icons/yahoo.svg); }
.email-icon.mail { background-image: url(/assets/images/email-icons/mail.svg); }
/* Simple fade-in animation for popup */
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Admin Elements */
/* ---------------------------------------------------------------------------------------------------- */
.modalbox_edit_wrapper {
margin-top: var(--body-margin-height);
padding: var(--body-margin-height);
background: url(/assets/images/system/stripe-gray.png) repeat 0 0 transparent;
text-align: center;
}
a.modalbox_edit {
color: #fff;
background: #666;
padding: 0 6px;
border-radius: 8px; /* future proofing */
text-decoration: none;
font-style: normal;
}
a:hover.modalbox_edit {
color: #fff;
background: #999;
text-decoration: none;
}
#admin_box {
position: fixed;
top: 0; left: 50px;
width: 960px;
padding-left: 10px; padding-right: 10px;
background: url(/assets/images/stripe-gray.png) repeat 0 0 transparent;
z-index: 10;
}
#admin_box p {
margin-bottom: 0;
}
#toggler {
position: fixed;
top: 0; right: 0;
padding: 5px 10px;
z-index: 11;
}
#home #toggler {
color: #fff;
}
.logged_in, tr.logged_in td {
background: url(/assets/images/stripe-gray.png) repeat 0 0 transparent;
}
.admin_background {
background: #b21f17;
}
.admin_white, .admin_white a {
color: white !important;
}
.admin_white {
padding: 5px;
}
/* Report Table
------------------------------------------------------------------------------------------------------- */
.report-table {
width: 100%;
border-collapse: collapse;
}
.report-table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
.report-table tbody tr:nth-child(even) {
}
.report-table th,
.report-table td {
padding: 0.5em;
border: 1px solid #ddd;
}
.report-table th { font-size: var(--font-h3-size); line-height: var(--font-h3-line-height); }