body {
    position: relative;
    min-width: 320px;
    background: #F8F6EE;
}

body a:focus,
body a:active {
    outline: none;
    text-decoration: none;
}

body a,
body input,
body select,
body textarea,
body button {
    -webkit-transition: ease all .4s;
    transition: ease all .4s;
}

html,
body {
    height: 100%;
}

body select,
body input,
body textarea,
body .form-control {
    border-radius:0;
    box-shadow: none;
    -webkit-box-shadow:none;
    -webkit-border-radius: 0;
}

body .form-control {
    height:32px;
}

body .form-control:focus {
    border-color: #000000;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(0, 0, 0, .3);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(0, 0, 0, .3);
}

.img-fluid,
.img-responsive-nolazy {
     display: block;
     width: 100%;
     height: auto;
 }

.inline-block {
    display:inline-block;
}

.inline {
    display:inline;
}

.block {
    display:block;
}

body .small,
body small {
    font-size: 12px;
}

.alert {
    text-align: center;
}

/*
 * Meldungen von TYPO3 (Warenkorb, Formulare).
 *
 * Das Markup ist eine <ul class="typo3-messages"> mit <li class="alert ...">
 * und einem <p class="alert-message"> darin. Es geriet zwischen zwei Regeln:
 *
 *  - Typography.css gibt jeder <ul> 32 px Einzug und jedem <li> ein Blatt aus
 *    der Icomoon-Schrift mit -34 px linkem Abstand. Der Kasten stand dadurch
 *    eingerueckt, und weil das <p> ein Blockelement ist, landete das Blatt in
 *    einer eigenen Zeile *ueber* dem Text statt davor.
 *  - Dasselbe <p> erbt `margin: 1em 0 2em`. Zusammen mit dem Innenabstand des
 *    Kastens ergab das oben 33 px und unten 50 px - sichtbar schief.
 *
 * Der Kasten ist jetzt ein Flex-Container: das Blatt ist ein eigenes
 * Flex-Element und steht dadurch neben dem Text, nicht darueber. Farben und
 * Masse sind zurueckgenommen - Bootstraps Vorgabe war fuer diese Seite zu
 * wuchtig. Gesetzt werden Bootstraps eigene Variablen, damit die Zustaende
 * mitziehen; dieselbe Technik wie bei .btn-primary in BootstrapCompat.css.
 *
 * Auf Wunsch des Auftraggebers am 2026-09-25.
 */
.typo3-messages {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.typo3-messages > li.alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
}

.typo3-messages > li.alert:last-child {
    margin-bottom: 0;
}

/* Das Blatt der Aufzaehlungen, hier aber ohne den negativen Einzug. */
.typo3-messages > li.alert::before {
    content: "\e934";
    font-family: 'icomoon';
    font-size: 15px;
    line-height: 1;
    margin: 0;
    flex: 0 0 auto;
    transform: rotate(30deg);
}

.typo3-messages .alert-message {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.typo3-messages .alert-success {
    --bs-alert-bg: #f1f6f2;
    --bs-alert-border-color: #cfe3d6;
    --bs-alert-color: #3d6b52;
}

.typo3-messages .alert-danger,
.typo3-messages .alert-error {
    --bs-alert-bg: #fbf1f3;
    --bs-alert-border-color: #ecced6;
    --bs-alert-color: #a02040;
}

.typo3-messages .alert-warning {
    --bs-alert-bg: #fdf7ee;
    --bs-alert-border-color: #f0e2c6;
    --bs-alert-color: #7a5c1e;
}

.typo3-messages .alert-info,
.typo3-messages .alert-notice {
    --bs-alert-bg: #f2f4f7;
    --bs-alert-border-color: #d6dde6;
    --bs-alert-color: #4a5a6b;
}

.no-javascript-hint {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #bd001a;
    color: white;
    z-index: 30;
}

.no-javascript-hint-inner {
    width: 980px;
    margin: 0 auto;
    text-align: center;
}

.no-javascript-hint-inner p {
    color: white;
    text-transform: uppercase;
    margin: 7px 0 5px;
    font-size: 10px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin: 1em 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.light-bg {
    background:rgba(248,246,238,.85);
    position: relative;
    z-index: 20;
}

.header {
    position: relative;
    background:black;
    /*overflow:hidden;*/
}

.small-header .header {
    padding-bottom:100px;
}

.top {
    position: relative;
    padding-bottom:30px;
    max-width: 1200px;
    margin: 0 auto;
}

.top .big,
.top .small {
    margin:0;
    padding:0;
    line-height:1.5em;
    text-transform: none;
    display:block;
}

.top .big {
    font-size:12px;
    font-family: 'Laila Bold';
    font-weight: normal;
    color:#00022b;
}

.top a .big,
.top a:hover .big,
.top a:focus .big {
    color:#00022b;
}

.top a .big,
.top a:hover .big,
.top a:focus .big,
.top a .small,
.top a:hover .small,
.top a:focus .small,
.top .big a,
.top .big a:hover,
.top .big a:focus,
.top .small a,
.top .small a:hover,
.top .small a:focus {
    text-decoration: none;
}

.top .contact .small a:hover,
.top .contact .small a:focus {
    text-decoration: underline;
}

.top .small {
    font-size:10px;
    /* #666666 auf dem hellgrauen Grund der Kopfzeile war 3,76:1. #595959
       erreicht 4,58:1 -- derselbe Ton wie in der mobilen Navigation. */
    color:#595959;
    font-family: 'Arial', sans-serif;
}

.top .small a {
    color:#595959;
}

.top .big a {
    color:#00022b;
}

.top .logo {
    text-align: center;
    font-size:70px;
    line-height:1em;
    padding:20px 0;
    position: relative;
}

.top .logo a {
    text-decoration: none;
    display:inline-block;
    transition: all .2s ease-in-out;
}

.top .logo a:hover {
    transform: scale(1.05);
    transform-origin: center center;
}

.top .logo .print {
    display:none;
}

.top .contact,
.top .cart {
    position:absolute;
    width:50%;
    bottom:0;
}

.top .contact {
    left:0;
    text-align: right;
}


.top .cart {
    right:0;
}

.top .cart-inner {
    padding-left:10px;
}

.top .contact-inner {
    padding-right:5px;
}


.top .cart .icon,
.top .cart .text {
    float:left;
}

.top .contact .text,
.top .contact .icon {
    float:right;
}

.top .cart .icon,
.top .contact .icon {
    font-size: 16px;
    width:30px;
    height:30px;
    text-align: center;
    border:1px solid #666666;
    border-radius: 50%;
    position: relative;
    top:1px;
    color:#666666;
}

.top .cart a .icon {
    color:#cc2650;
}

.top .cart a:hover .icon,
.top .cart a:focus .icon,
.top .contact a:hover .icon,
.top .contact a:focus .icon {
    border:1px solid #cc2650;
    color:#cc2650;
}

.top .cart a:hover .big,
.top .cart a:focus .big {
    color:#cc2650;
}

.top .cart .icon {
    margin-right: 8px;
}

.top .contact .icon {
    margin-left: 8px;
}

.top .cart .icon span.icon-cart,
.top .contact .icon span.icon-phone {
    display:inline-block;
    margin-top:6px;
}

.top .cart .icon span.icon-cart {
    position: relative;
    left:-1px;
}

.navi-main ul li:before {
    display:none;
}

.navi-main ul li {
    margin:0;
}

.navi-main .navi-main-desktop {
    display:none;
 }

.navi-main .navi-main-mobile .slicknav_menu {
    /*background:#e4e5c9;*/
    background: rgba(228, 229, 201, .7);
    border-top:1px solid #bbbbbb;
    margin-top:15px;
    padding-bottom: 0;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_btn {
    margin: 5px 5px 4px;
    text-decoration: none;
    text-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    float:none;
    text-align: center;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_btn .slicknav_menutxt {
    display: block;
    line-height: normal;
    float: none;
    color: #2b2b2b;
    font-weight: normal;
    font-family: 'Laila Bold';
    font-size:20px;
    text-shadow: none;
}

/* Das Rot der Hausfarbe kommt auf dem hellen Gruen der Leiste nur auf 4,1:1,
   auf dem dunkleren Grund der ueberfahrenen Zeile (#d7d9ae) auf 3,6:1. #a81f42
   ist dieselbe Farbe um 15 % abgedunkelt -- die Stufe, die im Projekt schon fuer
   den gedrueckten Zustand der schwebenden Schaltflaechen benutzt wird -- und
   erreicht 5,6:1 bzw. 4,9:1. Gemessen am 2026-09-27. */
.navi-main .navi-main-mobile .slicknav_menu .slicknav_btn.slicknav_open .slicknav_menutxt {
    color:#a81f42;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_btn .slicknav_icon {
    display: none;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav {
    /* #666666 kam auf dem hellen Gruen auf 4,5:1 und auf dem Grund der
       ueberfahrenen Zeile nur auf 3,9:1. #595959 erreicht 5,5:1 bzw. 4,8:1. */
    color: #595959;
    font-size: 12px;
    max-width: 1200px;
    margin:0 auto;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav > li {
    border-top:1px solid #bbbbbb;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav > li > ul > li {
    border-top:1px solid transparent;
    border-bottom:1px solid transparent;
}

/* Die Zeile eines Elternpunktes war bei SlickNav ein <a>, in das ein zweites
   <a> geschachtelt war - ungueltiges HTML. Seit dem Frontend-Umbau ist sie ein div
   mit der Klasse slicknav_row; deshalb steht sie hier neben dem a. */
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav .slicknav_row {
    color: #595959;
    font-size:16px;
    margin:0;
    padding: 12px 15px 10px;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav .slicknav_item a {
    background:none !important;
    padding: 0;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a:hover,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a:focus,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav .slicknav_row:hover,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav .slicknav_row:focus-within {
    color: #2b2b2b;
    background:#d7d9ae;
    border-radius:0;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a.active,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a.active:hover,
.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav a.active:focus {
    font-family: 'Laila Bold';
    color: #a81f42;
}

.navi-main .navi-main-mobile .slicknav_menu .slicknav_nav .slicknav_arrow {
    float:right;
    font-size: 1em;
    margin: 0 0 0 .4em;
}

.main {
    padding: 30px 0 60px;
}

.footer {
    color:white;
    position: relative;
    overflow: hidden;
}

.footer ul,
.footer ol,
.footer p {
    font-size: 14px;
    color:white;
}

.footer .footer-top {
    background:#212121;
    padding: 20px 0 30px;
}

.footer .footer-top .footer-logo {
    font-size:70px;
}

.footer .footer-top .footer-openingtimes {
    padding-bottom:20px;
}

/* h3 und h4 seit dem 2026-09-25: im Fussbereich standen h5 und h6 direkt
   hinter einer h2, was zwei Ebenen uebersprang. Die alten Selektoren bleiben
   stehen, damit nichts umkippt, falls irgendwo noch altes Markup auftaucht. */
.footer .footer-top .footer-openingtimes h3,
.footer .footer-top .footer-openingtimes h4,
.footer .footer-top .footer-openingtimes h5,
.footer .footer-top .footer-openingtimes h6 {
    font-family: 'Laila', 'Arial', sans-serif;
    font-size: 22px;
    color:white;
    margin:6px 0;
}

.footer .footer-top .footer-openingtimes h4,
.footer .footer-top .footer-openingtimes h6,
.footer .footer-top .footer-openingtimes p {
    text-transform: none;
    font-size: 14px;
    margin:6px 0;
}

.footer .footer-top .footer-openingtimes-first {
    float:left;
    width:50%;
}

.footer .footer-top .footer-openingtimes-first .footer-openingtimes-first-inner {
    text-align: right;
    padding-right:15px;
}

.footer .footer-top .footer-openingtimes-second {
    float:right;
    width:50%;
}

.footer .footer-top .footer-openingtimes-second .footer-openingtimes-second-inner {
    padding-left:15px;
}

.footer .footer-bottom {
    background:#000000;
    padding: 10px 0;
}

/* ── Die Hausfarbe auf dem dunklen Fuss ───────────────────────────────────
   #cc2650 kommt auf Schwarz auf 3,96:1 und auf dem #212121 der oberen
   Fusszeile nur auf 3,04:1 -- beides unter den verlangten 4,5:1. Betroffen
   sind der Link im Copyright-Hinweis, der aktive Eintrag der Rechtsnavigation
   und die ueberfahrenen Zustaende von Links und Cookie-Schaltflaeche.

   #db6784 ist dieselbe Farbe mit 30 % Weiss gemischt: 6,29:1 auf Schwarz,
   4,82:1 auf #212121. Weniger Weiss traegt nicht -- bei 20 % steht #212121
   noch auf 4,05:1. Ein Ton fuer beide Gruende, damit der Fuss nicht zwei
   verschiedene Rot bekommt. Gemessen am 2026-09-27. */
.footer .footer-bottom a {
    color:#db6784;
}

.footer .navi-legal {
    max-width:290px;
    margin:0 auto;
}

.footer .navi-legal-desktop {
    display:none;
}

.footer .navi-legal a {
    color:white;
    text-decoration: none;
}

.footer .navi-legal ul,
.footer .navi-legal ul li {
    margin:0;
    padding:0;
}

.footer .navi-legal ul {
    border-bottom:1px dotted white;
    margin-top:7px;
}

.footer .navi-legal ul li {
    border-top:1px dotted white;
    position:relative;
    padding: 8px 0 8px 40px;
}

.footer .navi-legal ul li:before {
    display: none;
}

.footer .navi-legal ul li a:before {
    position: absolute;
    content: "\e934";
    left:7px;
    top:7px;
    font-size: 13px;
    display: inline-block;
    font-family: "icomoon";
    transform: rotate(30deg);
}

.footer .navi-legal ul li a:hover,
.footer .navi-legal ul li a:focus,
.footer .navi-legal ul li a.active {
    color:#db6784;
}

/* Der Eintrag "Cookies" in der Fussnavigation ist ein <button>, weil er eine
   Aktion ausloest und keine Seite aufruft. Diese Regeln geben ihm das Aussehen
   der benachbarten Links; das Blatt-Icon kommt aus derselben Icomoon-Regel. */
.footer .navi-legal ul li button {
    border: 0;
    background: none;
    padding: 0;
    color: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.footer .navi-legal ul li button:before {
    position: absolute;
    content: "\e934";
    left: 7px;
    top: 7px;
    font-size: 13px;
    display: inline-block;
    font-family: "icomoon";
    transform: rotate(30deg);
}

.footer .navi-legal ul li button:hover,
.footer .navi-legal ul li button:focus {
    color: #db6784;
}

.footer .approach {
    position: relative;
    max-width:290px;
    margin:0 auto;
}

.footer .approach .map {
    font-size: 220px;
    top:-10px;
    position: absolute;
}

.footer .approach .links {
    padding: 155px 0 30px;
    position: relative;
    text-align: right;
}

.footer .approach .links p {
    margin:0;
}

.footer .approach .links p a {
    display:inline-block;
    background:#212121;
    border:2px solid white;
    color:white;
    padding: 2px 15px;
    margin: 4px 8px 4px 0;
    text-decoration: none;
}

.footer .approach .links p a:hover,
.footer .approach .links p a:focus {
    border:2px solid #cc2650;
    color:#db6784;
}

.footer-logo a {
    text-decoration: none;
}

/* Kaestchen und Auswahlknoepfe - seit dem Frontend-Umbau ohne ezMark.
   Das Plugin legte um jedes Feld ein <div class="ez-checkbox">, blendete das
   Feld selbst auf opacity 0 aus und schaltete beim Klick eine Klasse um. Das
   kann CSS heute allein: appearance: none nimmt dem Feld sein Aussehen, der
   Rest ist dasselbe Sprite in denselben vier Zustaenden.

   Wichtig: EXT:powermail zeichnet seine Kaestchen inzwischen mit Bootstraps
   .form-check-input aus. Deren Regeln setzen Groesse, Rahmen, Radius und ein
   eigenes Hintergrundbild - das alles muss hier ausdruecklich zurueckgesetzt
   werden, sonst gewinnt mal die eine, mal die andere Seite.

   Vorteil nebenbei: das Feld bleibt ein echtes Feld, mit sichtbarem
   Tastaturfokus, den das durchsichtige Original nicht zeigen konnte.
   Die beiden Widgets bleiben aussen vor; sie bringen ihre eigene Optik mit. */
input[type="checkbox"]:not(#a11y-root *):not([id^="cc-"] *),
input[type="radio"]:not(#a11y-root *):not([id^="cc-"] *) {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: url('../../Images/ezmark.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 0;
    cursor: pointer;
    /* Bootstrap blendet background-position ueber. Bei einem Sprite sieht das
       aus, als schoebe sich das Bild durch - hier also ohne. */
    transition: none;
}

input[type="radio"]:not(#a11y-root *):not([id^="cc-"] *) {
    background-position: -20px 0;
}

input[type="checkbox"]:not(#a11y-root *):not([id^="cc-"] *):checked {
    background-image: url('../../Images/ezmark.png');
    background-position: 0 -20px;
}

input[type="radio"]:not(#a11y-root *):not([id^="cc-"] *):checked {
    background-image: url('../../Images/ezmark.png');
    background-position: -20px -20px;
}

input[type="checkbox"]:not(#a11y-root *):focus-visible,
input[type="radio"]:not(#a11y-root *):focus-visible {
    outline: 2px solid #cc2650;
    outline-offset: 2px;
}

/* "Nach oben" - seit dem Frontend-Umbau ohne jquery-goup.
 *
 * Seit dem 2026-09-25 sieht der Knopf aus wie die beiden Schaltflaechen unten
 * links (Barrierefreiheit und Cookie-Einstellungen) und steht spiegelbildlich
 * zu ihnen in der rechten Ecke: gleiche Groesse, gleicher Abstand zur Ecke,
 * gleiche Form, Farbe, Randlinie und Schattierung. Die Werte stehen bewusst
 * hier doppelt und nicht in einer gemeinsamen Datei - die beiden anderen
 * Knoepfe gehoeren eigenstaendigen Extensions, die ihre Groesse aus einem
 * Konfigurationsdatensatz beziehen (eigene Migration).
 * Wer eine Groesse aendert, aendert sie an beiden Stellen.
 *
 * Die frueheren Masse - 30 px, Radius 15, unten 15 und rechts 10 - stammten
 * aus den Inline-Stilen von jquery-goup. */
.goup-container {
    position: fixed;
    right: 60px;
    bottom: 60px;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: #cc2650;
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .2s ease,
                box-shadow .15s, background-color .15s;
}

.goup-container--visible {
    opacity: 1;
    visibility: visible;
}

.goup-container:hover,
.goup-container:focus-visible {
    background: #a81f42; /* #cc2650 um 15 % abgedunkelt, wie bei den beiden anderen */
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
    transform: scale(1.1);
}

.goup-container:focus-visible {
    outline: 3px solid #cc2650;
    outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .goup-container {
        right: 40px;
        bottom: 40px;
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 767px) {
    .goup-container {
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .goup-container {
        transition: none;
    }
    .goup-container:hover,
    .goup-container:focus-visible {
        transform: none;
    }
}

/* Der Pfeil ist ein gedrehtes Winkelstueck aus zwei Randlinien statt eines
 * gefuellten Dreiecks. Er skaliert damit mit der Schaltflaeche mit.
 *
 * Die Strichstaerke ist an die beiden anderen Knoepfe angeglichen: deren
 * Symbole sind SVG mit stroke-width 2 in einem viewBox von 24, dargestellt
 * auf 52 % der Knopfbreite - das sind 2/24 * 0,52 = 0,043em. Ein dickerer
 * Strich faellt sofort auf, wenn die drei nebeneinander stehen.
 *
 * Die Verschiebung nach unten gleicht aus, dass die optische Mitte eines
 * Winkels tiefer liegt als seine geometrische. */
.goup-arrow {
    display: block;
    width: .30em;
    height: .30em;
    border-style: solid;
    border-color: currentColor;
    border-width: .043em .043em 0 0;
    transform: translateY(.10em) rotate(-45deg);
    font-size: 72px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .goup-arrow { font-size: 60px; }
}

@media (max-width: 767px) {
    .goup-arrow { font-size: 48px; }
}

body .cc_container {
    background:#212121;
    border-top:1px solid #000000;
}

body .cc_container p.cc_message {
    color:#ffffff;
}

body .cc_container p.cc_message a {
    color:#cc2650;
    text-decoration: underline;
}

body .cc_container p.cc_message a:hover,
body .cc_container p.cc_message a:focus {
    color:#cc2650;
    text-decoration: none;
}

body .cc_container .cc_btn,
body .cc_container .cc_btn:visited {
    color: white;
    background-color: #cc2650;
    text-transform: uppercase;
}

body .cc_container .cc_btn:hover,
body .cc_container .cc_btn:focus {
    color: white;
    background-color: #000000;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

    .top {
        padding-bottom: 0;
    }

    .top .contact,
    .top .cart {
        position:static;
        width:auto;
        bottom:auto;
    }

    .top .contact,
    .top .cart,
    .top .logo {
        float:left;
        width:25%;
    }

    .top .logo {
        width:50%;
    }

    .top .logo {
        font-size:80px;
        padding-bottom:0;
    }

    .top .contact,
    .top .cart {
        padding-top:60px;
    }

    .top .big {
        font-size:14px;
    }

    .top .small {
        font-size: 12px;
    }

    .top .cart .icon, .top .contact .icon {
        font-size: 20px;
        width: 36px;
        height: 36px;
    }

    /* Der Eintrag "Cookies" in der Fussnavigation ist ein <button>, weil er eine
   Aktion ausloest und keine Seite aufruft. Diese Regeln geben ihm das Aussehen
   der benachbarten Links; das Blatt-Icon kommt aus derselben Icomoon-Regel. */
.footer .navi-legal ul li button {
    border: 0;
    background: none;
    padding: 0;
    color: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.footer .navi-legal ul li button:before {
    position: absolute;
    content: "\e934";
    left: 7px;
    top: 7px;
    font-size: 13px;
    display: inline-block;
    font-family: "icomoon";
    transform: rotate(30deg);
}

.footer .navi-legal ul li button:hover,
.footer .navi-legal ul li button:focus {
    color: #db6784;
}

.footer .approach {
        position: relative;
        max-width:290px;
        width:50%;
        margin:0;
        float:right;
    }

    .footer .navi-legal-mobile {
        float:left;
        max-width:290px;
        width:50%;
        margin:0;
    }

    .small-header .header {
        padding-bottom:175px;
    }

}

/* Lightbox start */

body .lg-outer .lg-thumb-item.active,
body .lg-outer .lg-thumb-item:hover {
    border-color: #cc2650;
}

body .lg-progress-bar .lg-progress {
    background-color: #cc2650;
}

body .lg-backdrop {
    background-color:rgba(0,0,0,.8);
}

/* Lightbox ende */

/* Large Devices, Wide Screens */
@media only screen and (min-width : 768px) {

    body .footer:before {
        content:"\e94b";
        display:block;
        font-family: "Icomoon";
        font-size: 700px;
        line-height: 550px;
        color:rgba(255,255,255,.1);
        position: absolute;
        right:0;
        bottom:0;
        z-index:0;
        text-align: right;
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
    }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

    .top .contact,
    .top .cart,
    .top .logo {
        float:left;
        width:21%;
    }

    .top .logo {
        width:58%;
    }

    .top .logo {
        font-size:100px;
    }

    .top .big {
        font-size:16px;
    }

    .top .small {
        font-size: 12px;
    }

    .top .cart .icon, .top .contact .icon {
        font-size: 22px;
        width: 38px;
        height: 38px;
    }

    .top .contact .icon {
        margin-left: 12px;
    }

    .top .cart .icon {
        margin-right: 12px;
    }

    .navi-main {
        border-top:1px solid #bbbbbb;
        border-bottom:1px solid #bbbbbb;
        margin-top:20px;
    }

    .navi-main .navi-main-mobile {
        display:none;
    }

    .navi-main .navi-main-desktop {
        display:block;
        max-width:1200px;
        margin:0 auto;
    }

    .navi-main .navi-main-desktop ul ul {
        display:none;
    }

    .navi-main .navi-main-desktop ul {
        text-align: center;
        margin:0;
        padding:0;
    }

    .navi-main .navi-main-desktop ul li {
        display:inline-block;
        list-style-type: none;
        font-family: 'Laila Bold';
        font-size: 18px;
        padding:20px 40px;
        margin:0;
    }

    .navi-main .navi-main-desktop ul li li {
        display:block;
    }

    .navi-main .navi-main-desktop ul li a {
        text-decoration: none;
        color:#222c59;
    }

    .navi-main .navi-main-desktop ul li a.active {
        text-decoration: none;
        color:#535353;
        cursor: default;
    }

    .navi-main .navi-main-desktop ul li.sfHover > a,
    .navi-main .navi-main-desktop ul li a:hover,
    .navi-main .navi-main-desktop ul li a:active,
    .navi-main .navi-main-desktop ul li a:focus,
    .navi-main .navi-main-desktop ul li a.active:hover,
    .navi-main .navi-main-desktop ul li a.active:active,
    .navi-main .navi-main-desktop ul li a.active:focus {
        text-decoration: none;
        color:#cc2650;
    }

    .navi-main .navi-main-desktop ul li a.sf-with-ul {
        padding-right:20px;
    }

    .navi-main .sf-arrows .sf-with-ul:after {
        top: 50%;
        right: 0;
        margin-top: -3px;
        border: 5px solid transparent;
        border-top-color: #222c59;
    }

    .navi-main .sf-arrows a.active.sf-with-ul:after {
        border-top-color: #535353;
    }

    .navi-main .sf-arrows li:hover .sf-with-ul:after,
    .navi-main .sf-arrows li:active .sf-with-ul:after,
    .navi-main .sf-arrows li:focus .sf-with-ul:after,
    .navi-main .sf-arrows li.sfHover .sf-with-ul:after {
        border-top-color: #cc2650;
    }

    .navi-main .sf-menu {
        float: none;
        margin-bottom: 0;
    }

    .navi-main .sf-menu li {
        background: transparent;
        float:none;
    }

    .navi-main .sf-menu a {
        border: none;
        padding: 0;
    }

    .navi-main .navi-main-desktop ul li ul {
        background:#cc2650;
        color:#ffffff;
        text-align: left;
        padding: 10px 0;
    }

    .navi-main .navi-main-desktop ul li ul li {
        padding:8px 30px;
    }

    .navi-main .navi-main-desktop ul li ul li a {
        color:rgba(255,255,255,.8);
        font-size:14px;
    }

    .navi-main .navi-main-desktop ul li ul li a.active {
        color:rgba(34,44,89,.8);
    }

    .navi-main .navi-main-desktop ul li ul li a:hover,
    .navi-main .navi-main-desktop ul li ul li a:focus,
    .navi-main .navi-main-desktop ul li ul li a.active:hover,
    .navi-main .navi-main-desktop ul li ul li a.active:focus {
        text-decoration: none;
        color:#ffffff;
    }

    .navi-main .navi-main-desktop ul li ul li a.active:hover,
    .navi-main .navi-main-desktop ul li ul li a.active:focus {
        text-decoration: none;
        color:#222c59;
    }

    .navi-main .navi-main-desktop ul li ul li a.active {
        color:black;
    }

    .navi-main .navi-main-desktop ul li ul li a:hover,
    .navi-main .navi-main-desktop ul li ul li a:active,
    .navi-main .navi-main-desktop ul li ul li a:focus,
    .navi-main .navi-main-desktop ul li ul li a.active:hover,
    .navi-main .navi-main-desktop ul li ul li a.active:active,
    .navi-main .navi-main-desktop ul li ul li a.active:focus {
        text-decoration: none;
        color:#ffffff;
    }

    .navi-main .navi-main-desktop ul li ul li a.active:hover,
    .navi-main .navi-main-desktop ul li ul li a.active:active,
    .navi-main .navi-main-desktop ul li ul li a.active:focus {
        text-decoration: none;
        color:black;
    }

    .footer .footer-top {
        padding: 60px 0 30px;
    }

    .footer .navi-legal-desktop {
        display:block;
    }

    .footer .navi-legal-mobile {
        display:none;
    }

    /* Der Eintrag "Cookies" in der Fussnavigation ist ein <button>, weil er eine
   Aktion ausloest und keine Seite aufruft. Diese Regeln geben ihm das Aussehen
   der benachbarten Links; das Blatt-Icon kommt aus derselben Icomoon-Regel. */
.footer .navi-legal ul li button {
    border: 0;
    background: none;
    padding: 0;
    color: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.footer .navi-legal ul li button:before {
    position: absolute;
    content: "\e934";
    left: 7px;
    top: 7px;
    font-size: 13px;
    display: inline-block;
    font-family: "icomoon";
    transform: rotate(30deg);
}

.footer .navi-legal ul li button:hover,
.footer .navi-legal ul li button:focus {
    color: #db6784;
}

.footer .approach {
        width:100%;
        float:none;
    }

    .footer .navi-legal-mobile {
        width:100%;
        float:none;
    }

    .footer .footer-top .footer-openingtimes {
        padding-bottom:0;
    }

    .footer .footer-top .footer-logo {
        font-size:80px;
    }

    body .footer:before {
        font-size: 600px;
        line-height: 270px;
    }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    .navi-main .navi-main-desktop ul li ul li {
        padding:10px 40px;
    }

    .navi-main .navi-main-desktop ul li ul li a {
        font-size:16px;
    }

    .top .contact .icon {
        margin-left: 18px;
    }

    .top .cart .icon {
        margin-right: 18px;
    }

    .small-header .header {
        padding-bottom:250px;
    }

}