/************************************************/
/* © Werbeagentur Gössler & Sailer OG           */
/* www.goesslersailer.at                        */
/************************************************/

:root {
    /* Marke */
    --farbe-violett: #723088;
    --farbe-gruen: #0c7f35;

    /* Text, Flächen und Rahmen */
    --farbe-weiss: #ffffff;
    --farbe-schwarz: #000000;
    --farbe-text: #454545;
    --farbe-dezent: #737373;
    --farbe-rahmen: #e3e3e3;
    --farbe-grau:#e5e5e5;
    --farbe-hell: #f5f5f5;


    /* Fehler, Hinweise und Information */
    --farbe-rot: #d30e00;
    --farbe-gelb: #ffc100;
    --farbe-blau: #f0f8ff;
    --farbe-hellgruen: #f8faf5;
    --farbe-mittelgruen: #e4ebdf;

    /* Schriften */
    --font-base: "Georama", system-ui, sans-serif;
    --font-ue: "Fraunces", sans-serif;

    /* Gestaltung */
    --border-radius: 16px;
    --border-radius-mini: 6px;
    --border-radius-wk: 0 0 16px 16px;
    --wave-height: 25px;

    /* Header */
    --headerH-base: 130px;
    --headerH-shrink: 66px;

    /* Navigation */
    --nav-font-mobile: 120%;
    --nav-font-mobile-sub: 105%;
    --nav-line-height-mobile: 1.4;
    --nav-top-height: 50px;
    --nav-mobile-target: 56px;

    /* Desktop-Shopmenü */
    --shop-menu-width: 690px;
    --shop-menu-sidebar: 244px;
    --shop-menu-padding: 16px;
    --shop-menu-gap: 20px;
    --shop-menu-width-2: 960px;
    --shop-menu-width-3: 1180px;
    --shop-submenu-min-column: 240px;
    --shop-submenu-column-gap: 18px;

    /* Kategorieslider */
    --kat-gap: 20px;
    --kat-item-w: 100px;
}

/* ============================================
   BODY UND TYPOGRAFIE
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    font-family: var(--font-base);
    font-size: 100%;
    line-height: 25px;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    letter-spacing: .03em;
}

h1,h2,h3,h4,h5,h6 {
    margin: 30px 0px 30px 0px;
    font-weight: 700;
    font-family: var(--font-ue);
    color: var(--farbe-violett);
    line-height: normal;
}

h1 { font-size:250%; margin:30px 0px 30px 0px; }
h2 { font-size:200%; line-height:42px; margin:3rem 0 30px 0; }
h3 { font-size:180%; line-height:35px; }
h4 { font-size:160%; line-height:35px; }
h5 { font-size:160%; line-height:35px; }
h6 { font-size:140%; line-height:35px; }

hr { border:0; border-top:1px solid var(--farbe-rahmen); margin:20px 0; }
a { text-decoration:none; color:var(--farbe-gruen); }
a:hover { color:var(--farbe-violett); }

.ue_box { text-transform:uppercase; font-weight:bold; }
.gs_inbox { height:300px; margin:auto; width:99%; }

.content-max .text-titel {
    font-size:200%;
    display:block;
    margin:10px 0 30px 0;
    line-height:60px;
    text-align:center;
    font-weight:700;
    font-family:var(--font-ue);
    color:var(--farbe-violett);
}

.content-max .text-klein {
    font-size:100%;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
}

/* ============================================
   FAQ
   ============================================ */

.faq-container {
    width:100%;
    margin:0 auto 60px auto;
}

/* Themenbereiche */

.faq-section {
    margin:0 0 55px 0;
}

.faq-section .faq-heading {
    font-family:var(--font-ue);
    color:var(--farbe-violett);
    font-size:170%;
    font-weight:700;
    line-height:1.35;
    margin:0 0 22px 0;
    padding:0 0 15px 0;
    border-bottom:2px solid var(--farbe-rahmen);
}

/* Aufklappbare Einträge */

.faq-item {
    display:block;
    margin:0 0 10px 0;
    padding:0;
    background-color:var(--farbe-weiss);
    border:1px solid var(--farbe-rahmen);
    border-radius:var(--border-radius-mini);
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.faq-item:hover {
    border-color:var(--farbe-violett);
}

.faq-item[open] {
    border-color:var(--farbe-violett);
    box-shadow:0 4px 15px rgba(0,0,0,.04);
}

/* Fragen */

.faq-question {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:60px;
    margin:0;
    padding:15px 20px;
    color:var(--farbe-text);
    background-color:var(--farbe-weiss);
    font-family:var(--font-base);
    font-size:105%;
    font-weight:600;
    line-height:1.5;
    cursor:pointer;
    list-style:none;
    transition:background-color .2s ease, color .2s ease;
}

.faq-question::-webkit-details-marker {
    display:none;
}

.faq-question::marker {
    content:"";
}

.faq-question:hover {
    color:var(--farbe-violett);
    background-color:var(--farbe-hell);
}

.faq-question:focus-visible {
    outline:2px solid var(--farbe-violett);
    outline-offset:-3px;
}

/* Nummerierung */

.faq-number {
    flex:0 0 36px;
    color:var(--farbe-gruen);
    font-size:90%;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.faq-question-text {
    flex:1 1 auto;
    min-width:0;
}

/* Plus- und Minuszeichen */

.faq-question::after {
    content:"+";
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    width:30px;
    height:30px;
    margin-left:auto;
    border-radius:50%;
    background-color:var(--farbe-hell);
    color:var(--farbe-violett);
    font-size:24px;
    font-weight:400;
    line-height:1;
    transition:background-color .2s ease, color .2s ease;
}

/* Geöffneter Zustand */

.faq-item[open] .faq-question {
    color:var(--farbe-violett);
    background-color:var(--farbe-hellgruen);
    border-bottom:1px solid var(--farbe-rahmen);
}

.faq-item[open] .faq-question::after {
    content:"−";
    background-color:var(--farbe-violett);
    color:var(--farbe-weiss);
}

/* Antwortbereich */

.faq-answer {
    padding:20px 25px 22px 68px;
    background-color:var(--farbe-weiss);
    color:var(--farbe-text);
    font-size:100%;
    line-height:1.7;
}

.faq-answer p {
    margin:0 0 12px 0;
    padding:0;
}

.faq-answer p:last-child {
    margin-bottom:0;
}

.faq-answer a {
    color:var(--farbe-gruen);
    text-decoration:underline;
    text-underline-offset:3px;
}

.faq-answer a:hover {
    color:var(--farbe-violett);
}

/* ============================================
   NEWS
   ============================================ */

.news {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    align-items:stretch;
}

.news .news-item {
    padding:0;
    background-color:var(--farbe-weiss);
    border-radius:var(--border-radius);
    display:flex;
    flex-direction:column;
    height:100%;
}

.news .inc_img {
    display:block;
    overflow:hidden;
    border-radius:var(--border-radius);
    margin-right:0px;
}

.news .cms_box { padding:10px 20px; }
.news .cms_box .titel { font-family:var(--font-ue); font-weight:700; }

.news img {
    width:100%;
    height:auto;
    aspect-ratio:7 / 4;
    object-fit:cover;
    display:block;
    transition:transform 0.8s ease-in-out;
}

.news-date { font-size:80%; text-transform:uppercase; padding:0 20px; }
.news .inc_img:hover img { transform:scale(1.1); }

/* ============================================
   BLÜTEN-CONTAINER
   ============================================ */

.blueten-container {
    margin:80px auto 0 auto;
    background-color:var(--farbe-gruen);
    border-radius:var(--border-radius);
    padding:35px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.blueten-container::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url('../img/footer/blueten-bg.png');
    background-size:contain;
    background-position:center;
    opacity:0.15;
    z-index:1;
    pointer-events:none;
    transition:transform 0.5s ease-in-out;
}

.blueten-container h2,
.blueten-container h3,
.blueten-container p,
.blueten-container .btn-v {
    position:relative;
    z-index:2;
}

.blueten-title { margin:0 0 25px 0; color:var(--farbe-weiss); font-size:350%; }
.blueten-subtitle { margin:0; color:var(--farbe-weiss); }
.blueten-text { color:var(--farbe-weiss); font-size:110%; }

@keyframes dance {
    0% { transform:scale(1) rotate(0deg) translateY(0); }
    25% { transform:scale(1.05) rotate(0deg) translateY(-5px); }
    50% { transform:scale(1) rotate(0deg) translateY(0); }
    75% { transform:scale(1.05) rotate(0deg) translateY(-3px); }
    100% { transform:scale(1) rotate(0deg) translateY(0); }
}

.blueten-container:has(.btn-v:hover)::before {
    animation:dance 2s infinite ease-in-out;
}

.newslist { margin-bottom:25px; }
.newslist:hover { background-color:var(--farbe-weiss); }

/* ============================================
   CONTENT
   ============================================ */

#content {
    max-width:3000px;
    margin-top:0px;
    background-color:var(--farbe-hell);
}

#cms > div:not(#map_canvas) img { max-width:100%; height:auto !important; }
#cms img { max-width:100%; height:auto !important; }

.content-max { max-width:1480px; margin:0px auto; }
.content-max ul { list-style-type:none; margin-left:10px; list-style-position:outside; z-index:110; }
.content-max ul li { line-height:25px; padding:5px 0px; list-style-position:outside; }

/* ============================================
   HEADER – GRUNDREGELN
   ============================================ */

body.is-logged-in {
    --headerH-base:171px;
    --headerH-shrink:123px;
}

#gs-top-ueber {
    height:var(--headerH-base);
    transition:height .3s ease, box-shadow .3s ease;
}

#gs-top-ueber.shrink { height:var(--headerH-shrink); }
#gs-top-ueber.shrink .wk-nav-2 { border-radius:0px; }

body {
    padding-top:var(--headerH-base);
}

#gs-top .bildlogo {
    height:90px;
    transition:height .3s ease, transform .3s ease, opacity .3s ease;
}

#gs-top-ueber.shrink #gs-top .bildlogo {
    height:80px;
}

#navi {
    opacity:1;
    transition:opacity .25s ease;
    margin:-15px 0 0 0;
    position:absolute;
    z-index:1;
}

#gs-top-ueber.shrink #navi {
    opacity:0;
    pointer-events:none;
}

.knd-login-info {
    overflow:hidden;
    transition:opacity .25s ease;
    opacity:0;
}

.knd-login-info.on-off {
    opacity:1;
}

/* ============================================
   FIXIERTE AKTIONSBUTTONS
   ============================================ */

.fixed-action-bar {
    position:fixed;
    right:16px;
    bottom:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:98;
    transition:opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-btn {
    width:45px;
    height:45px;
    border-radius:9999px;
    display:grid;
    place-items:center;
    background:var(--farbe-violett);
    color:var(--farbe-weiss);
    box-shadow:0 8px 24px color-mix(in srgb, var(--farbe-schwarz) 18%, transparent);
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:transform .12s ease, filter .12s ease, opacity .2s ease;
}

.fab-btn:hover { transform:translateY(-1px); background:var(--farbe-schwarz); color:var(--farbe-weiss); }
.fab-btn:active { transform:translateY(0); }
.fab-btn:focus-visible { outline:2px solid var(--farbe-blau); outline-offset:2px; }
.fab-btn i { font-size:22px; line-height:1; }

.fab-top[data-show-when-scrolled] { opacity:0; pointer-events:none; transform:scale(.9); }
.fab-top.visible { opacity:1; pointer-events:auto; transform:scale(1); }

.fixed-action-bar.is-idle {
    opacity:0;
    transform:translateY(25px);
    pointer-events:none;
    transition-delay:0.2s;
}

.fixed-action-bar:not(.is-idle) {
    transition-delay:0s;
}

.fixed-action-bar:focus-within {
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
}

/* ============================================
   SCHALTER
   ============================================ */

.switch {
    position:relative;
    display:inline-block;
    width:48px;
    height:22px;
    float:right;
    margin-right:20px;
}

.switch input { opacity:0; width:0; height:0; }
.switch-text { float:left; margin:1px 0 0 0; font-weight:bold; }
.switch-info-text { float:left; padding:10px 0 0 0; text-align:left; }

.check-slider {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--farbe-rahmen);
    -webkit-transition:.4s;
    transition:.4s;
}

.check-slider:before {
    position:absolute;
    content:"";
    height:14px;
    width:14px;
    left:4px;
    bottom:4px;
    background-color:var(--farbe-weiss);
    -webkit-transition:.4s;
    transition:.4s;
}

input:checked + .check-slider { background-color:var(--farbe-gruen); }
input:focus + .check-slider { box-shadow:0 0 1px var(--farbe-gruen); }

input:checked + .check-slider:before {
    -webkit-transform:translateX(26px);
    -ms-transform:translateX(26px);
    transform:translateX(26px);
}

.check-slider.round { border-radius:34px; }
.check-slider.round:before { border-radius:50%; }

/* ============================================
   KATEGORIESLIDER
   ============================================ */

.slider-kat__viewport { padding:20px 0; margin:0px; }
.slider-kat__item { position:relative; transition:transform .18s ease; outline:none; }
.slider-kat__thumb { position:relative; transition:box-shadow .18s ease, transform .18s ease; }

.slider-kat__thumb::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 0 transparent;
    transition:box-shadow .18s ease;
    pointer-events:none;
}

.slider-kat__thumb img { transition:transform .25s ease; }
.slider-kat__label { transition:color .18s ease, transform .18s ease; }

.slider-kat__item:hover,
.slider-kat__item:focus-visible {
    transform:translateY(-3px);
}

.slider-kat__item:hover .slider-kat__thumb,
.slider-kat__item:focus-visible .slider-kat__thumb {
    box-shadow:0 10px 22px color-mix(in srgb, var(--farbe-schwarz) 10%, transparent);
}

.slider-kat__item:hover .slider-kat__thumb::after,
.slider-kat__item:focus-visible .slider-kat__thumb::after {
    box-shadow:inset 0 0 0 2px var(--farbe-violett);
}

.slider-kat__item:hover .slider-kat__thumb img,
.slider-kat__item:focus-visible .slider-kat__thumb img {
    transform:scale(1.06);
}

.slider-kat__item:hover .slider-kat__label,
.slider-kat__item:focus-visible .slider-kat__label {
    color:var(--farbe-weiss);
    transform:translateY(1px);
}

.slider-kat {
    margin:0;
    max-width:1480px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    align-items:center;
    gap:14px;
}

.slider-kat__viewport {
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.slider-kat__viewport::-webkit-scrollbar { display:none; }
.slider-kat__track { display:flex; gap:var(--kat-gap); padding:0; margin:0; }

.slider-kat__item {
    flex:0 0 auto;
    width:var(--kat-item-w);
    scroll-snap-align:start;
    text-decoration:none;
    color:inherit;
}

.slider-kat__thumb {
    display:block;
    position:relative;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:var(--farbe-hell);
    border-radius:999px;
    transition:box-shadow .2s ease;
}

.slider-kat__thumb::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    transition:box-shadow .2s ease;
    pointer-events:none;
}

.slider-kat__thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease;
}

.slider-kat__label {
    display:block;
    margin-top:12px;
    text-align:center;
    font-size:14px;
    line-height:1.2;
    color:var(--farbe-weiss);
    transition:color .2s ease, transform .2s ease;
}

.slider-kat__nav {
    flex:0 0 42px;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--farbe-weiss);
    color:var(--farbe-violett);
    box-shadow:0 2px 8px color-mix(in srgb, var(--farbe-schwarz) 15%, transparent);
    font-size:22px;
    line-height:1;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.slider-kat__nav:hover,
.slider-kat__nav:focus-visible {
    transform:scale(1.05);
    box-shadow:0 6px 16px color-mix(in srgb, var(--farbe-schwarz) 18%, transparent);
}

.slider-kat__nav:focus-visible {
    outline:2px solid var(--farbe-violett);
    outline-offset:2px;
}

.slider-kat__nav--prev,
.slider-kat__nav--next {
    align-self:center;
}

/* ============================================
   TRENNLINIEN UND BILDER
   ============================================ */

.trennlinie { margin:20px 0px; height:1px; border-top:1px var(--farbe-rahmen) solid; }
.trennlinie-w { border-top:0px var(--farbe-weiss) solid; }
.trennlinie_dashed { margin:20px 0px; height:1px; border-top:1px var(--farbe-rahmen) dashed; }

img { border:0px; }
img.left { float:left; margin-right:15px; margin-bottom:15px; border-radius:0px; border:0px var(--farbe-weiss) solid; }
img.right { float:right; margin-left:15px; margin-bottom:15px; border-radius:0px; border:0px var(--farbe-weiss) solid; }
img.left2 { float:left; margin-right:15px; border-radius:0px; border:0px var(--farbe-weiss) solid; }
img.thumb { border:0px var(--farbe-weiss) solid; border-radius:0px; box-shadow:none; margin-right:10px; margin-bottom:7px; display:inline-block; }
img.thumb.first { margin-left:0px; }

.inc_img {
    float:left;
    margin-right:15px;
    margin-bottom:15px;
    border-radius:0px;
    border:0px var(--farbe-weiss) solid;
}

/* ============================================
   DROPDOWN / SELECT
   ============================================ */

select {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    border-radius:0;
    font-size:100%;
    border:1px solid var(--farbe-rahmen);
    border-radius:3px;
    padding:8px 28px 8px 8px;
    color:var(--farbe-violett);
    background-color:var(--farbe-weiss);
    background-image:url('../img/icons/drop_pfeil.svg');
    background-position:right;
    background-repeat:no-repeat;
    background-size:20px;
}

select:hover {
    box-shadow:0 1px 1px 0 color-mix(in srgb, var(--farbe-schwarz) 10%, transparent);
}

select::-ms-expand { display:none; }
.lt-ie10 select { background-image:none; }

/* ============================================
   LAYER
   ============================================ */

body.layer-open { overflow:hidden; }

#layer_overlay {
    position:fixed;
    inset:0;
    z-index:998;
    background:color-mix(in srgb, var(--farbe-schwarz) 48%, transparent);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}

#layer_overlay.open { opacity:1; visibility:visible; }
#layer_footer { line-height:1.1; font-size:90%; }

/* ============================================
   DIALOG
   ============================================ */

.layer {
    position:fixed;
    left:50%;
    top:50%;
    z-index:999;
    display:none;
    width:min(var(--layer-width, 900px), calc(100vw - 40px));
    height:min(var(--layer-height, 650px), calc(100dvh - 40px));
    transform:translate(-50%, -50%);
    background:var(--farbe-weiss, var(--farbe-weiss));
    border:1px solid color-mix(in srgb, var(--farbe-schwarz) 8%, transparent);
    border-radius:16px;
    box-shadow:
        0 30px 80px color-mix(in srgb, var(--farbe-schwarz) 22%, transparent),
        0 8px 24px color-mix(in srgb, var(--farbe-schwarz) 10%, transparent);
    overflow:hidden;
    animation:layerOpen .2s ease;
}

@keyframes layerOpen {
    from {
        opacity:0;
        transform:translate(-50%, -47%) scale(.98);
    }
    to {
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
    }
}

.layer_header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    height:64px;
    padding:0 20px 0 24px;
    background:var(--farbe-weiss);
    border-bottom:1px solid var(--farbe-hell);
    cursor:move;
    user-select:none;
}

.layer_header .title {
    min-width:0;
    font-size:1.15rem;
    font-weight:700;
    line-height:1.3;
    color:var(--farbe-schwarz);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.layer_header .close {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--farbe-hell);
    color:var(--farbe-text);
    font-size:18px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, transform .15s ease;
}

.layer_header .close:hover {
    background:var(--farbe-hell);
    color:var(--farbe-schwarz);
    transform:rotate(90deg);
}

.layer_frame {
    display:block;
    width:100%;
    height:calc(100% - 64px);
    margin:0;
    padding:0;
    border:0;
    background:var(--farbe-weiss);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn { margin:10px 0; padding:15px 45px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:3px; border:0px; display:block; cursor:pointer; background-color:var(--farbe-gruen); border-radius:var(--border-radius); }
.btn:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btn-small { margin:10px 0; padding:10px 15px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:3px; border:0px; display:block; cursor:pointer; background-color:var(--farbe-gruen); border-radius:var(--border-radius); }
.btn-small:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btn-shop {margin:10px 0; padding:8px 30px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; background-color:var(--farbe-gruen); }
.btn-shop:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btn-gs {text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:var(--border-radius-mini); border:0px; display:block; cursor:pointer; background-color:var(--farbe-gruen); width: calc(40% - 15px); float: right; margin: 0 0 0 15px; padding:9px 0;}
.btn-gs:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btnpay { margin:10px 0; padding:20px 50px; text-align:center; text-transform:uppercase; transition:0.5s; color:var(--farbe-weiss); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; background-color:var(--farbe-violett); }
.btnpay:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-gruen); }

.btnSave { margin:0 0 0 10px; padding:11px 30px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; background-color:var(--farbe-gruen); float:left; font-size:105%; }
.btnSave:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.button-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

@keyframes borderPulse {
    0% { box-shadow:0 0 0 0 var(--farbe-gruen); }
    70% { box-shadow:0 0 0 10px transparent; }
    100% { box-shadow:0 0 0 0 transparent; }
}

.btn-ani { animation:borderPulse 2s infinite; }

.btnBack { margin:10px 0; padding:8px 30px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-text); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; background-color:var(--farbe-weiss); }
.btnBack:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btnvor { margin:10px 0; padding:8px 100px; text-align:center; text-transform:uppercase; transition:0.5s; color:var(--farbe-weiss); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; background-color:var(--farbe-violett); }
.btnvor:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-gruen); }

.btn-slider { margin:10px auto; padding:px; text-align:center; text-transform:uppercase; transition:0.5s; background-size:200% auto; color:var(--farbe-weiss); border-radius:var(--border-radius); border:0px; display:block; cursor:pointer; max-width:250px; font-size:50%; background-color:var(--farbe-gruen); }
.btn-slider:hover { color:var(--farbe-weiss); text-decoration:none; background-color:var(--farbe-violett); }

.btn-w { background-color:var(--farbe-weiss); color:var(--farbe-violett); padding:12px; display:inline-block; border-radius:var(--border-radius); border:3px var(--farbe-violett) solid; text-align:center; cursor:pointer; font-size:100%; width:100%; text-transform:uppercase; }
.btn-w:hover { color:var(--farbe-violett); text-decoration:none; background-color:var(--farbe-violett); }

.btn-v { background-color:var(--farbe-weiss); color:var(--farbe-violett)!important; padding:12px; display:inline-block; border-radius:var(--border-radius); border:3px var(--farbe-violett) solid; text-align:center; cursor:pointer; font-size:100%; width:100%; text-transform:uppercase; }
.btn-v:hover { color:var(--farbe-weiss)!important; text-decoration:none; background-color:var(--farbe-violett); border:3px var(--farbe-weiss) solid; }

.btn-news-all { background-color:var(--farbe-gruen); color:var(--farbe-weiss); padding:18px 50px; display:inline-block; border-radius:var(--border-radius); border:none; text-align:center; cursor:pointer; font-size:100%; }
.btn-news-all:hover { background-color:var(--farbe-violett); color:var(--farbe-weiss); }

.btn-download { background-color:var(--farbe-gruen); color:var(--farbe-weiss); padding:8px 20px 8px 20px; display:inline-block; border-radius:var(--border-radius); border:none; text-align:center; cursor:pointer; font-size:100%; margin:10px 0 10px 0; }
.btn-download:hover { background-color:var(--farbe-violett); color:var(--farbe-weiss); }

/* ============================================
   WELLEN UND ABSCHNITTE
   ============================================ */

.section-top { position:relative; background-color:var(--farbe-weiss); height:25px; width:100%; }
.section-bottom { background-color:var(--farbe-gruen); height:0px; width:100%; }
.custom-shape-divider-top { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; transform:rotate(180deg); }
.custom-shape-divider-top svg { position:relative; display:block; width:calc(100% + 1.3px); height:var(--wave-height); }
.custom-shape-divider-top .shape-fill { fill:var(--farbe-gruen); }

.section-top-2 { position:relative; background-color:var(--farbe-weiss); height:25px; width:100%; }
.section-bottom-2 { background-color:var(--farbe-hell); height:0px; width:100%; }
.custom-shape-divider-top-2 { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; transform:rotate(180deg); }
.custom-shape-divider-top-2 svg { position:relative; display:block; width:calc(100% + 1.3px); height:var(--wave-height); }
.custom-shape-divider-top-2 .shape-fill { fill:var(--farbe-hell); }

.section-top-content { position:relative; background-color:var(--farbe-gruen); height:35px; width:100%; }
.section-bottom-content { background-color:var(--farbe-hell); height:50px; width:100%; }
.custom-shape-divider-content { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; transform:rotate(180deg); }
.custom-shape-divider-content svg { position:relative; display:block; width:calc(100% + 1.3px); height:var(--wave-height); }
.custom-shape-divider-content .shape-fill { fill:var(--farbe-hell); }

.section-top-bottom { position:relative; background-color:var(--farbe-hell); height:100px; width:100%; }
.section-bottom-bottom { background-color:var(--farbe-violett); height:100px; width:100%; }
.custom-shape-divider-bottom { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; transform:rotate(180deg); }
.custom-shape-divider-bottom svg { position:relative; display:block; width:calc(100% + 1.3px); height:var(--wave-height); }
.custom-shape-divider-bottom .shape-fill { fill:var(--farbe-violett); }

/* ============================================
   STARTSLIDER
   ============================================ */

.start-slider-container {
    margin:0 auto;
    overflow:hidden;
    position:relative;
    padding:0;
    width:100%;
}

.slider-track {
    display:flex;
    gap:25px;
    width:max-content;
    transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    user-select:none;
}

.slide { flex:0 0 500px; width:500px; }
.slide img { width:100%; height:auto; display:block; border-radius:12px; }
.gs-padding-small { padding:0 5px; }

/* ============================================
   CONTENT-LISTEN UND VERLAUF
   ============================================ */

#cms ul { list-style-type:none; margin-left:20px; list-style-position:outside; z-index:110; }
#cms ul li { line-height:21px; padding:5px 0px; list-style-position:outside; }

#cms ul li::before {
    font-family:"Font Awesome 6 Pro";
    font-weight:900;
    font-style:normal;
    font-size:20px;
    content:"\f058";
    background-color:var(--farbe-hell);
    color:var(--farbe-gruen);
    padding:2px;
    margin-right:10px;
    margin-left:-36px;
    border-radius:3px;
}

#verlauf { padding:30px 0 10px 0; font-size:90%; border-bottom:1px solid var(--farbe-rahmen); }
#verlauf i { margin:0 10px; }

ol.zaehler { list-style-type:decimal; margin-left:20px; list-style-position:outside; z-index:110; }
ol.zaehler li { line-height:21px; padding:5px 0px; list-style-position:outside; }

ol.zaehler li::before {
    font-style:normal;
    font-size:12px;
    content:"";
    background-color:var(--farbe-schwarz);
    color:var(--farbe-weiss);
    padding:6px;
    margin-right:10px;
    margin-left:-36px;
    border-radius:25px;
}

/* ============================================
   SEITENNAVIGATION
   ============================================ */

.seitennavi_block { text-align:center; margin:40px auto 20px auto; }
.seitennavi_info { font-size:100%; text-align:center; margin:0px auto 20px auto; }
.seitennavi_box { text-align:center; }
.seitennavi { font-size:100%; display:inline-block; }

.seitennavi a.zahlen { height:40px; line-height:40px; padding:0px 15px 0px 15px; margin:0px 0px 0px 6px; font-size:110%; text-decoration:none; background-color:var(--farbe-weiss); border:0px var(--farbe-rahmen) solid; color:var(--farbe-dezent); display:block; float:left; border-radius:var(--border-radius-mini); }
.seitennavi a.zahlen:hover { border:0px var(--farbe-gruen) solid; color:var(--farbe-weiss); background-color:var(--farbe-violett); }

.seitennavi a.active { height:40px; line-height:40px; padding:0px 15px 0px 15px; margin:0px 0px 0px 6px; font-size:110%; text-decoration:none; background-color:var(--farbe-gruen); border:0px var(--farbe-gruen) solid; display:block; float:left; color:var(--farbe-weiss); border-radius:var(--border-radius-mini); }

.seitennavi a.pfeile { height:40px; line-height:38px; width:30px; text-align:center; margin:0px 0px 0px 6px; font-size:160%; text-decoration:none; background-color:var(--farbe-weiss); border:0px var(--farbe-rahmen) solid; color:var(--farbe-dezent); display:block; float:left; border-radius:var(--border-radius-mini); }
.seitennavi a.pfeile:hover { border:0px var(--farbe-gruen) solid; color:var(--farbe-weiss); background-color:var(--farbe-violett); }

.logo-platzhalter { width:calc(100% - 260px); }

/* ============================================
   INFOBOXEN
   ============================================ */

.sicht-info-box { padding:15px; background-color:var(--farbe-hell); margin-top:25px; }
.sicht-info-box h3 { text-align:center; margin:0 0 10px 0; }
.sicht-info-symbol { font-size:180%; background-color:orange; color:var(--farbe-weiss); padding:22px; border-radius:55px; margin:-30px 0 0 0; width:75px; height:75px; text-align:center; }

.bg-tab { background-color:var(--farbe-hell); }
.tab { font-size:100%; overflow-x:auto; width:100%; }

.infobox { text-align:left; border:5px var(--farbe-hell) solid; margin:0px; background-color:var(--farbe-weiss); padding:10px; border-radius:var(--border-radius); }
.infobox:hover { background-color:var(--farbe-gruen); color:var(--farbe-weiss)!important; }
.infobox h3 { font-size:180%; color:var(--farbe-gruen); line-height:29px; margin:10px 0 0 0; }
.infobox:hover h3 { color:var(--farbe-weiss); }
.infobox:hover h4 { color:var(--farbe-weiss); }
.infobox img { border-radius:var(--border-radius-mini); }

.gs-flex-container { display:flex; flex-wrap:wrap; }
.gs-flex-content { display:flex; flex-direction:column; }
.gs-flex-content p { flex:1 0 auto; }

.datum { margin:10px 0 10px 0; font-size:85%; color:var(--farbe-text); }
.text { padding-right:3%; }
.gs-image { max-width:100%; height:auto; }

/* ============================================
   ALLGEMEINE GS-KLASSEN
   ============================================ */

.gs-top,.gs-bottom { position:fixed; z-index:2; width:100%; }
.gs-top { top:0; }
.gs-bottom { bottom:0; }

.gs-clear { clear:both; height:0px; }
.gs-clearleft { clear:left; height:0px; }
.gs-clearright { clear:right; height:0px; }

.gs-topbar { border-top:6px solid var(--farbe-rahmen)!important; }
.gs-bottombar { border-bottom:6px solid var(--farbe-rahmen)!important; }
.gs-leftbar { border-left:6px solid var(--farbe-rahmen)!important; }
.gs-rightbar { border-right:6px solid var(--farbe-rahmen)!important; }

/* ============================================
   GS-NAVIGATION
   ============================================ */

.gs-navbar { list-style-type:none; margin:0; padding:0; float:right; }
.gs-navbar li { float:left; }
.gs-navbar li a,.gs-navitem,.gs-navbar li .gs-btn,.gs-navbar li .gs-input {}
.gs-navbar li .gs-btn,.gs-navbar li .gs-input { border:none; outline:none; width:100%; }
.gs-navbar li a:hover {}

.gs-navbar .gs-dropdown-hover,
.gs-navbar .gs-dropdown-click {
    position:static;
}

.gs-navbar .gs-dropdown-hover:hover,
.gs-navbar .gs-dropdown-hover:first-child,
.gs-navbar .gs-dropdown-click:hover {
    background-color:var(--farbe-rahmen);
    color:var(--farbe-schwarz);
}

.gs-navbar a,
.gs-topnav a,
.gs-sidenav a,
.gs-dropdown-content a,
.gs-accordion-content a,
.gs-dropnav a {
    text-decoration:none!important;
}

.gs-navbar .gs-opennav.gs-right { float:right!important; }
.gs-topnav { padding:8px 8px; }

.gs-topnav a {
    padding:0 8px;
    border-bottom:3px solid transparent;
    -webkit-transition:border-bottom .25s;
    transition:border-bottom .25s;
}

.gs-topnav a:hover { border-bottom:3px solid var(--farbe-weiss); }
.gs-topnav .gs-dropdown-hover a { border-bottom:0; }
.gs-opennav,.gs-closenav { color:inherit; }
.gs-opennav:hover,.gs-closenav:hover { cursor:pointer; opacity:0.8; }

/* ============================================
   GS-BUTTONS
   ============================================ */

.gs-btn,.gs-btn-block {
    border:none;
    display:inline-block;
    outline:0;
    padding:6px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none!important;
    color:var(--farbe-weiss);
    background-color:var(--farbe-schwarz);
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}

.gs-btn:hover,
.gs-btn-block:hover,
.gs-btn-floating:hover,
.gs-btn-floating-large:hover {
    box-shadow:
        0 8px 16px 0 color-mix(in srgb, var(--farbe-schwarz) 20%, transparent),
        0 6px 20px 0 color-mix(in srgb, var(--farbe-schwarz) 19%, transparent);
}

.gs-btn,
.gs-btn-floating,
.gs-btn-floating-large,
.gs-closenav,
.gs-opennav,
.gs-btn-block {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.gs-btn-floating,.gs-btn-floating-large {
    display:inline-block;
    text-align:center;
    color:var(--farbe-weiss);
    background-color:var(--farbe-schwarz);
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:0;
    border-radius:50%;
    cursor:pointer;
    font-size:24px;
}

.gs-btn-floating { width:40px; height:40px; line-height:40px; }
.gs-btn-floating-large { width:56px; height:56px; line-height:56px; }

.gs-disabled,
.gs-btn:disabled,
.gs-btn-floating:disabled,
.gs-btn-floating-large:disabled {
    cursor:not-allowed;
    opacity:0.3;
}

.gs-btn.gs-disabled *,
.gs-btn-block.gs-disabled,
.gs-btn-floating.gs-disabled *,
.gs-btn:disabled *,
.gs-btn-floating:disabled * {
    pointer-events:none;
}

.gs-btn.gs-disabled:hover,
.gs-btn-block.gs-disabled:hover,
.gs-btn:disabled:hover,
.gs-btn-floating.gs-disabled:hover,
.gs-btn-floating:disabled:hover,
.gs-btn-floating-large.gs-disabled:hover,
.gs-btn-floating-large:disabled:hover {
    box-shadow:none;
}

.gs-btn-group .gs-btn { float:left; }
.gs-btn-block { width:100%; }
.gs-btn-bar .gs-btn { box-shadow:none; background-color:inherit; color:inherit; float:left; }
.gs-btn-bar .gs-btn:hover { background-color:var(--farbe-rahmen); }

.gs-badge,.gs-tag,.gs-sign {
    background-color:var(--farbe-schwarz);
    color:var(--farbe-weiss);
    display:inline-block;
    padding-left:8px;
    padding-right:8px;
    text-align:center;
}

.gs-badge { border-radius:50%; }

ul.gs-ul { list-style-type:none; padding:0; margin:0; }
ul.gs-ul li { padding:6px 2px 6px 16px; border-bottom:1px solid var(--farbe-rahmen); }
ul.gs-ul li:last-child { border-bottom:none; }

.gs-tooltip,.gs-display-container { position:relative; }
.gs-tooltip .gs-text { display:none; }
.gs-tooltip:hover .gs-text { display:inline-block; }

.gs-btn,
.gs-btn-floating,
.gs-dropnav a,
.gs-btn-floating-large,
.gs-btn-block,
.gs-navbar a,
.gs-sidenav a,
.gs-pagination li a,
.gs-hoverable tbody tr,
.gs-hoverable li,
.gs-accordion-content a,
.gs-dropdown-content a,
.gs-dropdown-click:hover,
.gs-dropdown-hover:hover,
.gs-opennav,
.gs-closenav,
.gs-closebtn,
*[class*="gs-hover-"] {
    -webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;
    transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s;
}

.gs-accordion-content a,
.gs-dropdown-content a,
.gs-dropdown-click:hover,
.gs-dropdown-hover:hover,
.gs-opennav,
.gs-closenav,
.gs-closebtn,
*[class*="gs-hover-"] {
    -webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;
    transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s;
}

.gs-ripple:active { opacity:0.5; }
.gs-ripple { -webkit-transition:opacity 0s; transition:opacity 0s; }

/* ============================================
   GS-MODAL UND EINGABEFELDER
   ============================================ */

.gs-modal {
    z-index:3;
    display:none;
    padding-top:100px;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:var(--farbe-schwarz);
    background-color:color-mix(in srgb, var(--farbe-schwarz) 40%, transparent);
}

.gs-modal-content {
    margin:auto;
    background-color:var(--farbe-weiss);
    position:relative;
    padding:0;
    outline:0;
    width:600px;
}

.gs-closebtn { text-decoration:none; float:right; font-size:24px; font-weight:bold; color:inherit; }
.gs-closebtn:hover,.gs-closebtn:focus { color:var(--farbe-schwarz); text-decoration:none; cursor:pointer; }

ul.gs-ul { list-style-type:none; padding:0; margin:0; }
ul.gs-ul li { padding:6px 2px 6px 16px; border-bottom:1px solid var(--farbe-rahmen); }
ul.gs-ul li:last-child { border-bottom:none; }

.gs-input-group,.gs-group { margin-top:24px; margin-bottom:24px; }
.gs-input { padding:16px; display:block; border:1px solid var(--farbe-hell); width:100%; font-size:100%; font-family:'Avenir-Book'; }
.gs-label { color:var(--farbe-blau); }
.gs-input:not(:valid)~.gs-validate { color:var(--farbe-rot); }

.gs-select { padding:9px 0; width:100%; color:var(--farbe-schwarz); border:1px solid transparent; border-bottom:1px solid var(--farbe-blau); }
.gs-select select:focus { color:var(--farbe-schwarz); border:1px solid var(--farbe-blau); }
.gs-select option[disabled] { color:var(--farbe-blau); }

.gs-dropdown-click,.gs-dropdown-hover { position:relative; display:inline-block; cursor:pointer; }
.gs-dropdown-hover:hover .gs-dropdown-content { display:block; z-index:1; }
.gs-dropdown-content { cursor:auto; color:var(--farbe-schwarz); background-color:var(--farbe-weiss); display:none; position:absolute; min-width:160px; margin:0; padding:0; }
.gs-dropdown-content a { padding:6px 16px; display:block; }
.gs-dropdown-content a:hover { background-color:var(--farbe-rahmen); }

/* ============================================
   SPALTEN – BASIS
   ============================================ */

.gs-col { float:left; width:100%; }
.gs-col.s1 { width:8.33333%; }
.gs-col.s2 { width:16.66666%; }
.gs-col.s3 { width:24.99999%; }
.gs-col.s4 { width:33.33333%; }
.gs-col.s5 { width:41.66666%; }
.gs-col.s6 { width:49.99999%; }
.gs-col.s7 { width:58.33333%; }
.gs-col.s8 { width:66.66666%; }
.gs-col.s9 { width:74.99999%; }
.gs-col.s10 { width:83.33333%; }
.gs-col.s11 { width:91.66666%; }
.gs-col.s12 { width:99.99999%; }

/* ============================================
   FLEXBOXEN UND HINWEISE
   ============================================ */

.gs-flex-box {
    display:flex;
    gap:20px;
    padding:10px;
}

.hinweis-box {
    flex:1;
    padding:20px;
    background-color:var(--farbe-weiss);
    border:0px;
    border-radius:var(--border-radius-mini);
}

.hinweis-box h1 { margin:0 0 15px 0; }
.hinweis-box h3 { margin:0 0 15px 0; }
.hinweis-box h4 { margin:0 0 15px 0; }
.hinweis-box h5 { margin:0 0 15px 0; }
.hinweis-box h56 { margin:0 0 15px 0; }

.step-box-container {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding:25px 0;
}

.step-box {
    flex:1 1 0;
    padding:20px;
    background-color:var(--farbe-weiss);
    border:0px;
    border-radius:var(--border-radius-mini);
}

.step-box:nth-child(2) { flex:2 1 0; }
.step-box h2,.step-box h3,.step-box h4,.step-box h5 { margin:0; }

.margin-r-10 { margin-right:10px; }
.infobox_content { border:5px var(--farbe-weiss) solid; }

.gs-content {
    max-width:1500px;
    margin:auto;
    position:relative;
    padding:0 20px;
}

/* ============================================
   SICHTBARKEIT UND AUSRICHTUNG
   ============================================ */

.gs-hide { display:none!important; }
.gs-show-block,.gs-show { display:block!important; }
.gs-show-inline-block { display:inline-block!important; }

.gs-left-align { text-align:left!important; }
.gs-right-align { text-align:right!important; }
.gs-left { float:left!important; }
.gs-right { float:right!important; }
.gs-justify { text-align:justify!important; }
.gs-center { text-align:center!important; }

.gs-display-topleft { position:absolute; left:0; top:0; }
.gs-display-topright { position:absolute; right:0; top:0; }
.gs-display-bottomleft { position:absolute; left:0; bottom:0; }
.gs-display-bottomright { position:absolute; right:0; bottom:0; }

.gs-display-middle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); }
.gs-display-left { position:absolute; top:50%; left:0%; transform:translate(0%,-50%); -ms-transform:translate(-0%,-50%); }
.gs-display-right { position:absolute; top:50%; right:0%; transform:translate(0%,-50%); -ms-transform:translate(0%,-50%); }
.gs-display-topmiddle { position:absolute; left:50%; top:0; transform:translate(-50%,0%); -ms-transform:translate(-50%,0%); }
.gs-display-bottommiddle { position:absolute; left:50%; bottom:0; transform:translate(-50%,0%); -ms-transform:translate(-50%,0%); }

.gs-display-container:hover .gs-display-hover { display:block; }
.gs-display-container:hover span.gs-display-hover { display:inline-block; }
.gs-display-hover { display:none; }

.gs-end {
    text-align:center;
    background-color:var(--farbe-weiss);
    padding:30px;
}

/* ============================================
   FOOTER
   ============================================ */

.bottom_bg {
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    line-height:30px;
    color:var(--farbe-weiss);
    background-color:var(--farbe-violett);
    padding:10px 0px 30px 0px;
}

.bottom_bg div.leftbox { padding:0 0 0 3%; }
.bottom_bg div.rightbox { padding:20% 3% 0 0; }
.bottom_bg a { color:var(--farbe-weiss); }

.bottom_pfeil { width:350px; height:auto; position:absolute; z-index:1; bottom:77px; right:20px; }
.bottom_pfeil img { width:100%; height:auto; }
.logo-bottom { width:50%; height:auto; }
.logo-bottom-div { margin:20px auto 0 auto; }

.k_symb { float:right; width:auto; height:55px; }
.f_symb { float:right; width:55px; height:55px; margin:0 10px 0 0; }
.f_symb_png { float:right; width:auto; height:55px; margin:0 10px 0 0; }

/* ============================================
   LOGO UND HEADER-BASIS
   ============================================ */

.bildlogo { height:auto; width:230px; }
.icontop { height:46px; width:46px; margin:0px 0px 0px 2px; }

.top-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0px 10px;
}

/* ============================================
   ARTIKELSUCHE – BESTEHENDE BASIS
   Die neue Header-Suche wird weiter unten
   gezielt mit .header-suchformular angepasst.
   ============================================ */

.suche {
    width:calc(100% - 550px);
    margin:32px 20px 0 0;
    padding:0 0 0 0;
    position:relative;
}

.suchfeld {
    float:left;
    width:calc(100% - 260px);
}

.container div.header div.aktionen div.suche {
    float:right;
    margin:47px 10px 0px 0px;
    border:1px solid var(--farbe-rahmen);
}

.container div.header div.aktionen div.suche input[type=text] {
    float:left;
    padding:0px 0px 0px 10px;
    margin:0px 0px 0px 0px;
    width:160px;
    height:40px;
    line-height:40px;
    border:0px;
    font-size:90%;
    color:var(--farbe-text);
}

.container div.header div.aktionen div.suche input[type=submit] {
    display:block;
    float:left;
    width:36px;
    height:36px;
    background:url('../img/lupe_21x21.svg');
    background-size:24px 24px;
    background-position:center center;
    background-repeat:no-repeat;
    margin:2px 0px 0px 0px;
    padding:0px;
    border:0px;
    border-left:1px var(--farbe-rahmen) solid;
    cursor:pointer;
}

.container div.header div.aktionen div.suche input[type=button] {
    display:block;
    float:left;
    width:36px;
    height:36px;
    background:url('../img/schloss_rot_21x21.svg');
    background-size:24px 24px;
    background-position:center center;
    background-repeat:no-repeat;
    margin:2px 0px 0px 0px;
    padding:0px;
    border:0px;
    border-left:1px var(--farbe-rahmen) solid;
    cursor:pointer;
}

/* ============================================
   KUNDENLOGIN UND WARENKORB
   ============================================ */

.login-link {
    display:flex;
    align-items:center;
    text-decoration:none;
    gap:8px;
    margin-right:15px;
}

.login-text {
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.login-text .on-off { font-weight:600; }
.login-text .subtext { font-size:0.85em; color:var(--farbe-dezent); }

.wk-nav {
    margin-top:0px;
    margin-right:-15px;
    font-size:90%;
    background-color:var(--farbe-weiss);
    padding:15px 18px 8px 18px;
    display:flex;
    gap:0px;
}

.wk-nav a {
    margin:0;
    text-align:left;
    color:var(--farbe-gruen);
    background-color:var(--farbe-weiss);
    padding:0 15px;
    border-radius:var(--border-radius-wk);
    transition:all 0.3s ease;
}

.wk-nav a:hover { color:var(--farbe-violett); background-color:var(--farbe-hell); }
.wk-nav a .fa-icon { font-size:180%; color:var(--farbe-gruen); }
.wk-nav a:hover .fa-icon { font-size:180%; color:var(--farbe-violett); }

.wk-nav-2 {
    margin-top:0px;
    font-size:90%;
    padding:0;
    display:flex;
    gap:20px;
}

.wk-nav-2 a {
    margin:0;
    padding:18px 15px 15px 15px;
    text-align:left;
    color:var(--farbe-gruen);
    background-color:var(--farbe-weiss);
    border-radius:0 0 10px 10px;
}

.wk-nav-2 a:hover { color:var(--farbe-violett); background-color:var(--farbe-hell); }
.wk-nav-2 a .fa-icon { font-size:180%; color:var(--farbe-gruen); }
.wk-nav-2 a:hover .fa-icon { font-size:180%; color:var(--farbe-violett); }

/* ============================================
   HEADER-ICONS UND MENÜSCHALTER
   ============================================ */

#iconsuche { background-image:url('../img/header/suche.svg'); }
#iconstandort { background-image:url('../img/header/standort.svg'); }
#icontel { background-image:url('../img/header/tel.svg'); }
#icontermin { background-image:url('../img/header/termin.svg'); }
#iconkontakt { background-image:url('../img/header/kontakt.svg'); }
#iconkraft { background-image:url('../img/header/kraft.svg'); width:62px; }

#iconsuche:hover { background-image:url('../img/header/suche_hover.svg'); }
#iconstandort:hover { background-image:url('../img/header/standort_hover.svg'); }
#icontel:hover { background-image:url('../img/header/tel_hover.svg'); }
#icontermin:hover { background-image:url('../img/header/termin_hover.svg'); }
#iconkontakt:hover { background-image:url('../img/header/kontakt_hover.svg'); }

.linkfarbe { border-bottom:1px var(--farbe-rahmen) solid; }
.linkfarbe:hover { background-color:var(--farbe-hell); }
.linkfarbe2 { border-bottom:1px var(--farbe-rahmen) solid; }
.linkfarbe2:hover { background-color:var(--farbe-hell); }

#navicon {
    display:block;
    float:right;
    margin:15px 0px 0px 0px;
    z-index:100;
    background:transparent url('../img/icons/svg/nav.svg') no-repeat center center;
    background-size:contain;
}

#navicon a {
    display:block;
    width:40px;
    height:40px;
}

#navicon.navi_pfeil {
    background:transparent url('../img/icons/pfeil.svg') no-repeat center center;
    background-size:contain;
    width:40px;
    height:40px;
}

.abdunkeln {
    display:block;
    width:100%;
    height:120%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    position:fixed;
    z-index:2;
    background:var(--farbe-schwarz);
    opacity:0.7;
}

.bblock { width:100%; height:100px; }

/* ============================================
   SLIDERTEXTE
   ============================================ */

.slidertext {
    color:var(--farbe-weiss);
    letter-spacing:2px;
    text-shadow:1px 1px 1px var(--farbe-dezent);
    position:absolute;
    font-size:300%;
    text-transform:uppercase;
    line-height:100%;
    bottom:10%;
    right:2%;
    left:2%;
    text-align:center;
}

.slidertext-titel { font-size:430%; }
.slidertext-klein { font-size:150%; }

.text-focus-in {
    -webkit-animation:text-focus-in 1s linear both;
    animation:text-focus-in 1s linear both;
    animation-delay:1s;
}

.header_background {
    width:100%;
    height:500px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}

.header_text {
    position:absolute;
    top:40%;
    left:0%;
    width:100%;
    text-align:center;
    font-size:230%;
    color:var(--farbe-weiss);
    letter-spacing:2px;
    text-shadow:1px 1px 1px var(--farbe-dezent);
    text-transform:uppercase;
    line-height:100%;
}

.gradientanimation {
    width:100%;
    height:10px;
    position:absolute;
    background-image:linear-gradient(to right, var(--farbe-gelb) 0%, var(--farbe-gelb) 50%, var(--farbe-gruen) 100%);
    bottom:0px;
    background-size:400% 400%;
    animation:gradient 10s ease infinite;
}

.gradientanimation-np {
    width:100%;
    background-image:linear-gradient(to right, var(--farbe-gelb) 0%, var(--farbe-gelb) 50%, var(--farbe-gruen) 100%);
    bottom:0px;
    background-size:400% 400%;
    animation:gradient 10s ease infinite;
}

/*
 * Generated by Animista on 2020-6-30 16:42:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 */

@-webkit-keyframes text-focus-in {
    0% { -webkit-filter:blur(12px); filter:blur(12px); opacity:0; }
    100% { -webkit-filter:blur(0); filter:blur(0); opacity:1; }
}

@keyframes text-focus-in {
    0% { -webkit-filter:blur(12px); filter:blur(12px); opacity:0; }
    100% { -webkit-filter:blur(0); filter:blur(0); opacity:1; }
}

@keyframes gradient {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* ============================================
   DOWNLOADS
   ============================================ */

.dload_container { margin:20px 0px 0px 0px; padding:0px 0px 10px 0px; border-bottom:1px var(--farbe-rahmen) solid; }
.dload_ueber { font-size:20px; color:var(--farbe-dezent); }
.dload_inhalt { display:block; margin:10px 0px 0px 0px; position:relative; }
.dload_abs { margin:5px 0px 30px 0px; padding:0 20px 0 0; min-height:280px; }
.dload_text { float:left; margin:0px 0px 0px 0px; }
.dload_text.kl { width:500px; margin:0px 0px 0px 10px; }
.dload_text.gr { width:640px; }
.dload_text a { color:var(--farbe-dezent); text-decoration:none; }
.dload_details { margin-top:10px; }
.dload_icon { float:left; width:130px; }
.dload_ok { position:absolute; right:0px; top:20px; display:none; }
.dload_link { margin:10px 0px 0px 0px; float:left; }

/* ============================================
   SUCHFELDER – BASIS
   ============================================ */

.icon-suche-button {
    cursor:pointer;
    border:0px;
    font-size:110%;
    position:absolute;
    top:0px;
    right:0px;
    z-index:3;
    background-color:transparent;
    padding:12px;
}

input.suche-button {
    border:1px solid var(--farbe-hell);
    color:var(--farbe-schwarz);
    background-color:var(--farbe-weiss);
    margin:0px 0px 0px 0px;
    padding:12px;
    height:auto;
    width:100%;
    font-size:100%;
    border-radius:25px;
}

.gs-input-search {
    padding:12px;
    display:block;
    border:none;
    width:100%;
    font-size:120%;
}

/* ============================================
   KALENDER UND SUCHERGEBNISSE
   ============================================ */

.kal_ze:hover {
    background-color:color-mix(in srgb, var(--farbe-gruen) 15%, var(--farbe-weiss));
    cursor:pointer;
}

.termin {
    background-color:color-mix(in srgb, var(--farbe-rot) 15%, var(--farbe-weiss));
}

.cms_titel { font-size:110%; margin:5px 0px 0px 0px; }
.cms_titel a { font-size:110%; text-decoration:none; font-weight:bold; }
.cms_titel a:hover { color:var(--farbe-blau); text-decoration:none; }
.suchwort { font-weight:bold; color:var(--farbe-blau); }

/* ============================================
   FOOTER-NAVIGATION
   ============================================ */

.footer_nav_button {
    background-color:var(--farbe-hell)!important;
    width:95%!important;
    color:var(--farbe-violett)!important;
    padding:20px!important;
    margin:5px auto 5px auto!important;
    text-align:center!important;
    border:0px!important;
    font-size:100%!important;
    text-transform:none!important;
}

.footer_nav_logo { text-align:center!important; }

.footer_nav {
    background-color:var(--farbe-hell)!important;
    width:95%!important;
    color:var(--farbe-violett)!important;
    padding:20px!important;
    margin:5px auto 5px auto!important;
    text-align:center!important;
    border:0px!important;
    font-size:100%!important;
    text-transform:none!important;
    cursor:pointer;
}

.footer_nav_logo {
    background-color:var(--farbe-hell)!important;
    width:95%!important;
    color:var(--farbe-violett)!important;
    padding:20px!important;
    margin:25px auto 5px auto!important;
    text-align:center!important;
    border:0px!important;
    font-size:100%!important;
    text-transform:none!important;
    cursor:pointer;
}

/* ============================================
   FORMULARE
   ============================================ */

select.menge { height:35px; font-size:120%; color:var(--farbe-violett); padding:0 10px; border:0px; font-weight:bold; }
input.button { font-size:110%; border:1px var(--farbe-rahmen) solid; padding:10px; border-radius:var(--border-radius-mini); }
select.button { font-size:110%; border:1px var(--farbe-rahmen) solid; height:44px; line-height:46px; padding:0px 0px 0px 10px; margin:0px; border-radius:var(--border-radius-mini); width:100%; color:var(--farbe-text); }
textarea.button { font-size:110%; border:1px var(--farbe-rahmen) solid; padding:12px 5px 12px 5px; margin:0px; border-radius:var(--border-radius-mini); }

input.buttonfehler { font-size:110%; border:1px var(--farbe-rot) solid; height:44px; line-height:44px; padding:0px 5px 0px 5px; border-radius:var(--border-radius-mini); }
select.buttonfehler { font-size:110%; border:1px var(--farbe-rot) solid; height:46px; line-height:46px; padding:0px 0px 0px 0px; margin:0px; border-radius:var(--border-radius-mini); }
textarea.buttonfehler { font-size:110%; border:1px var(--farbe-rot) solid; padding:12px 5px 12px 5px; border-radius:var(--border-radius-mini); }

textarea { height:411px; border-radius:var(--border-radius-mini); }
.feld { margin:0; }

/* ============================================
   SCHATTEN
   ============================================ */

.gs-shadow-2 { box-shadow:0 2px 4px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-4 { box-shadow:0 4px 8px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-8 { box-shadow:0 8px 16px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-12 { box-shadow:0 12px 16px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-16 { box-shadow:0 16px 24px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-24 { box-shadow:0 24px 24px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }
.gs-shadow-oben { box-shadow:0 0px 0px 0 color-mix(in srgb, var(--farbe-schwarz) 16%, transparent),0 2px 10px 0 color-mix(in srgb, var(--farbe-schwarz) 12%, transparent)!important; }

/* ============================================
   FARB-HILFSKLASSEN
   ============================================ */

.gs-black,.gs-hover-black:hover { color:var(--farbe-weiss)!important; background-color:var(--farbe-schwarz)!important; }
.gs-white,.gs-hover-white:hover { color:var(--farbe-text)!important; background-color:var(--farbe-weiss)!important; }
.gs-grey,.gs-hover-grey:hover { color:var(--farbe-schwarz)!important; background-color:var(--farbe-dezent)!important; }
.gs-light-grey,.gs-hover-light-grey:hover { color:var(--farbe-schwarz)!important; background-color:var(--farbe-hell)!important; }
.gs-blue,.gs-hover-blue:hover { color:var(--farbe-weiss)!important; background-color:var(--farbe-blau)!important; }
.gs-light-blue,.gs-hover-light-blue:hover { color:var(--farbe-schwarz)!important; background-color:color-mix(in srgb, var(--farbe-blau) 15%, var(--farbe-weiss))!important; }

.gs-text-white,.gs-hover-text-white:hover { color:var(--farbe-weiss)!important; }
.gs-text-black,.gs-hover-text-black:hover { color:var(--farbe-schwarz)!important; }
.gs-text-grey,.gs-hover-text-grey:hover { color:var(--farbe-dezent)!important; }
.gs-text-light-grey,.gs-hover-text-light-grey:hover { color:var(--farbe-hell)!important; }
.gs-text-dark-grey,.gs-hover-text-dark-grey:hover { color:var(--farbe-text)!important; }
.gs-text-blue,.gs-hover-text-blue:hover { color:var(--farbe-blau)!important; }
.gs-text-light-blue,.gs-hover-text-light-blue:hover { color:color-mix(in srgb, var(--farbe-blau) 15%, var(--farbe-weiss))!important; }

.gs-border-blue,.gs-hover-border-blue:hover { border-color:var(--farbe-blau)!important; }
.gs-border-light-blue,.gs-hover-border-light-blue:hover { border-color:color-mix(in srgb, var(--farbe-blau) 15%, var(--farbe-weiss))!important; }
.gs-border-white,.gs-hover-border-white:hover { border-color:var(--farbe-weiss)!important; }
.gs-border-black,.gs-hover-border-black:hover { border-color:var(--farbe-schwarz)!important; }
.gs-border-grey,.gs-hover-border-grey:hover { border-color:var(--farbe-dezent)!important; }
.gs-border-light-grey,.gs-hover-border-light-grey:hover { border-color:var(--farbe-hell)!important; }
.gs-border-dark-grey,.gs-hover-border-dark-grey:hover { border-color:var(--farbe-dezent)!important; }

.gs-flexauto { display:flex; align-items:center; }
.kartentext { font-size:120%; display:inline-block; padding:20px 50px 10px 50px; background-color:var(--farbe-weiss); text-transform:uppercase; }
.gs-padding-xlarge { padding:12px 24px!important; }
.gs-flexauto { display:block; align-items:center; }
.highlights { padding:0 2.5%; min-height:310px; text-align:center; }

/* ============================================
   CUSTOM SELECT
   ============================================ */

.gs-custom-select-lizenz {
    position:relative;
    display:block;
    border:1px solid var(--farbe-rahmen);
    z-index:1;
}

.gs-custom-select-lizenz select {
    border:none;
    outline:none;
    background:transparent;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
    margin:0;
    display:block;
    width:100%;
    padding:8px 7px 8px 7px;
    font-size:100%;
    color:var(--farbe-rahmen);
}

.gs-custom-select-lizenz:after {
    position:absolute;
    right:0;
    top:0;
    width:30px;
    height:100%;
    line-height:25px;
    content:"";
    background-image:url(../img/icons/svg/arrow.svg);
    background-position:center;
    background-repeat:no-repeat;
    text-align:center;
    border:0px solid var(--farbe-rahmen);
    z-index:-1;
}

.gs-custom-select {
    position:relative;
    display:block;
    max-width:200px;
    min-width:180px;
    border:1px solid var(--farbe-rahmen);
    z-index:1;
}

.gs-custom-select select {
    border:none;
    outline:none;
    background:transparent;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
    margin:0;
    display:block;
    width:100%;
    padding:8px 7px 8px 7px;
    font-size:100%;
    color:var(--farbe-rahmen);
}

.gs-custom-select:after {
    position:absolute;
    right:0;
    top:0;
    width:30px;
    height:100%;
    line-height:25px;
    content:"";
    background-image:url(../img/icons/svg/arrow.svg);
    background-position:center;
    background-repeat:no-repeat;
    text-align:center;
    border:0px solid var(--farbe-rahmen);
    z-index:-1;
}

/* ============================================
   NEUER HEADER MIT GRID
   Benötigt class="header-layout" am #gs-top.
   ============================================ */

#gs-top.header-layout .header-zeile {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:"logo suche konto";
    align-items:center;
    gap:clamp(60px, 1.5vw, 24px);
    min-height:80px;
    padding:0 0 5px 0;
}

#gs-top.header-layout .header-zeile > * {
    min-width:0;
}

#gs-top.header-layout #mobil-bar {
    grid-area:logo;
}

#gs-top.header-layout .header-logo {
    display:block;
    line-height:0;
}

#gs-top.header-layout .bildlogo {
    display:block;
    width:auto;
    height:70px;
    max-width:200px;
    object-fit:contain;
    margin:0;
    padding:0;
}

#gs-top-ueber.shrink #gs-top.header-layout .bildlogo {
    height:70px;
}

#gs-top.header-layout .header-suche {
    grid-area:suche;
    min-width:0;
}

#gs-top.header-layout .header-konto {
    grid-area:konto;
}

#gs-top.header-layout #navicon {
    grid-area:menue;
    float:none;
    margin:0;
    justify-self:end;
}

#gs-top.header-layout .header-konto :is(.wk-nav, .wk-nav-2) {
    float:none !important;
    margin:0;
    padding:0;
    gap:4px;
}

#gs-top.header-layout .header-konto .login-link {
    margin:-15px 0 0 0;
    padding:22px 8px 8px 8px;
    gap:6px;
}

#gs-top.header-layout .header-konto .login-text {
    margin:0;
    font-size:0.9rem;
    white-space:nowrap;
}

#gs-top.header-layout .header-zeile--checkout {
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"logo zurueck";
}

#gs-top.header-layout .header-zurueck {
    grid-area:zurueck;
    justify-self:end;
    text-align:right;
    overflow-wrap:anywhere;
}

#gs-top.header-layout #navi {
    position:relative;
    margin:0;
}

#gs-top-ueber:has(#gs-top.header-layout) {
    height:auto;
}

#gs-top-ueber.shrink #gs-top.header-layout #navi {
    display:none;
}

/* ============================================
   NEUES HEADER-SUCHFORMULAR
   Benötigt class="suche header-suchformular".
   ============================================ */

.suche.header-suchformular {
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
}

.header-suchformular form {
    display:flex;
    align-items:stretch;
    min-width:0;
    min-height:44px;
    margin:0;
    border:1px solid var(--farbe-rahmen);
    border-radius:25px;
    background:var(--farbe-weiss);
    overflow:hidden;
}

.header-suchformular form:focus-within {
    outline:2px solid var(--farbe-violett);
    outline-offset:2px;
}

.header-suchformular input.suche-button {
    flex:1 1 0;
    min-width:0;
    width:0;
    float:none;
    border:0;
    border-radius:0;
    outline:0;
    padding:10px 14px;
    font:inherit;
    font-size:16px;
    line-height:22px;
    background:transparent;
}

.header-suchformular .icon-suche-button {
    position:static;
    flex:0 0 44px;
    width:44px;
    min-height:44px;
    padding:0;
    display:grid;
    place-items:center;
    color:var(--farbe-gruen);
    background:transparent;
    border:0;
    cursor:pointer;
}

.header-suchformular .icon-suche-button:hover,
.header-suchformular .icon-suche-button:focus-visible {
    color:var(--farbe-weiss);
    background:var(--farbe-gruen);
}

.off-on{display: none}

/* ============================================
   1. DESKTOP: ÜBER 992 PX
   ============================================ */

@media only screen and (width > 992px) {

    /* Mittlere Spalten als Fallback */
    .gs-col.m1 { width:8.33333%; }
    .gs-col.m2 { width:16.66666%; }
    .gs-col.m3 { width:24.99999%; }
    .gs-col.m4 { width:33.33333%; }
    .gs-col.m5 { width:41.66666%; }
    .gs-col.m6 { width:49.99999%; }
    .gs-col.m7 { width:58.33333%; }
    .gs-col.m8 { width:66.66666%; }
    .gs-col.m9 { width:74.99999%; }
    .gs-col.m10 { width:83.33333%; }
    .gs-col.m11 { width:91.66666%; }
    .gs-col.m12 { width:99.99999%; }

    /* Große Spalten */
    .gs-col.l1 { width:8.33333%; }
    .gs-col.l1-1 { width:calc(10% - 0px); }
    .gs-col.l2 { width:16.66666%; }
    .gs-col.l2-1 { width:calc(20% - 0px); }
    .gs-col.l3 { width:24.99999%; }
    .gs-col.l4 { width:33.33333%; }
    .gs-col.l5 { width:41.66666%; }
    .gs-col.l6 { width:49.99999%; }
    .gs-col.l7 { width:58.33333%; }
    .gs-col.l8 { width:66.66666%; }
    .gs-col.l9 { width:74.99999%; }
    .gs-col.l10 { width:83.33333%; }
    .gs-col.l11 { width:91.66666%; }
    .gs-col.l12 { width:99.99999%; }

    .gs-hide-large {
        display:none!important;
    }

    .abdunkeln {
        display:none!important;
    }

    .news:hover {
        height:auto;
    }

    .cbp-spmenu-push-toleft {
        left:auto !important;
        overflow-y:auto !important;
        position:relative !important;
    }
}

/* ============================================
   2. TABLET: ÜBER 600 BIS EINSCHLIESSLICH 992 PX
   ============================================ */

@media only screen and (600px < width <= 992px) {

    /* Spalten */
    .gs-col.m1 { width:8.33333%; }
    .gs-col.m2 { width:16.66666%; }
    .gs-col.m3 { width:24.99999%; }
    .gs-col.m4 { width:33.33333%; }
    .gs-col.m5 { width:41.66666%; }
    .gs-col.m6 { width:49.99999%; }
    .gs-col.m7 { width:58.33333%; }
    .gs-col.m8 { width:66.66666%; }
    .gs-col.m9 { width:74.99999%; }
    .gs-col.m10 { width:83.33333%; }
    .gs-col.m11 { width:91.66666%; }
    .gs-col.m12 { width:99.99999%; }

    /* Suche innerhalb der mobilen Navigation */
    #navimobil #vt_suche {
        background-color:var(--farbe-blau);
        height:66px;
    }

    #navimobil #vt_suche input[type=text] {
        border:0;
        float:left;
        margin:1px 0px 0px 0px;
        font-size:110%;
        height:40px;
        width:80%;
        line-height:40px;
        padding:0px 10px 0px 10px;
    }

    #navimobil #vt_suche input.btnSave {
        border-radius:0px;
        height:40px;
        line-height:40px;
        margin-left:3%;
        float:left;
        width:30px;
        padding:0px;
        text-align:center;
        margin-top:0px;
        border:0px;
    }

    #navimobil #vt_suche_mobil {
        background-color:var(--farbe-gruen);
        height:62px;
    }

    #navimobil #vt_suche_mobil input[type=text] {
        border:0;
        float:left;
        margin:1px 0px 0px 0px;
        font-size:110%;
        height:40px;
        width:80%;
        line-height:40px;
        padding:0px 10px 0px 10px;
    }

    #navimobil #vt_suche_mobil input.btnSave {
        border-radius:0px;
        height:40px;
        line-height:40px;
        margin-left:3%;
        float:left;
        width:30px;
        padding:0px;
        text-align:center;
        background:transparent url('../img/icons/svg/suche.svg')no-repeat center center;
        margin-top:0px;
        border:0px;
    }

    #navimobil input.btnSeek {
        background:transparent url('../img/icons/svg/suche.svg') no-repeat center center;
        background-size:61%;
        float:right;
        text-align:left;
        margin:4px 1px 0 0;
        padding:6px 43px 4px 0px;
        background-color:var(--farbe-weiss);
        text-transform:uppercase;
        border:0px;
        font-size:21px;
        font-weight:600;
        cursor:pointer;
    }

    #navimobil input.btnSeek:hover {
        background-color:var(--farbe-weiss);
    }
    .on-off{display: none}
    .off-on {display: block}

    .faq-section {
        margin-bottom:40px;
    }

    .faq-section .faq-heading {
        font-size:150%;
    }

    .faq-question {
        padding:14px 16px;
        font-size:100%;
    }

    .faq-answer {
        padding:18px 22px 20px 60px;
    }


    /* Kategorieslider */
    .slider-kat {
        gap:8px;
    }

    .slider-kat__nav {
        flex:0 0 34px;
        width:34px;
        height:34px;
        font-size:18px;
    }

    .slider-kat__label {
        font-size:13px;
        margin-top:10px;
    }

    /* Dialog */
    .layer {
        width:calc(100vw - 20px);
        height:calc(100dvh - 20px);
        max-width:none;
        max-height:none;
        border-radius:12px;
    }

    .layer_header {
        height:58px;
        padding:0 12px 0 16px;
        cursor:default;
    }

    .layer_header .title {
        font-size:1.05rem;
    }

    .layer_header .close {
        flex-basis:36px;
        width:36px;
        height:36px;
    }

    .layer_frame {
        height:calc(100% - 58px);
    }

    .step-box {
        flex:1 1 100%;
    }

    /* Bestehende Headerklassen */
    #gs-top .bildlogo {
        height:50px;
        width:auto;
    }

    .logo-platzhalter {
        width:100%;
        margin:0 0 25px 0;
    }

    /* Startslider */
    .slide {
        flex:0 0 calc(100vw - 40px);
        width:calc(100vw - 40px);
    }

    .slide img {
        pointer-events:none;
    }

    /* Allgemeine Anpassungen */
    body {
        font-size:90%;
        line-height:25px;
    }

    .on-off {
        display:none;
    }

    .trennlinie-w {
        margin:20px 0px 20px 0px;
        height:1px;
        border-top:1px var(--farbe-weiss) solid;
    }

    .gs-padding-small {
        padding:0 15px;
    }

    .aus {
        display:none;
    }

    .bblock {
        display:none;
    }

    .suche {
        width:100%;
        margin:0;
        padding:0 10px 10px 10px;
    }

    .suchfeld {
        float:left;
        width:calc(100% - 90px);
    }

    #navimobil #vt_suche_mobil {
        display:none;
    }

    #cms {
        padding:0 5px;
    }

    #verlauf {
        display:none;
    }

    /* Überschriften */
    h1 {
        font-size:200%;
        margin:0px 0px 50px 0px;
        padding:25px 0 0 0;
    }

    h2 {
        font-size:170%;
    }

    h3 {
        font-size:170%;
        line-height:normal;
        font-weight:bold;
    }

    h4 {
        font-size:160%;
        line-height:normal;
    }

    h5 {
        font-size:160%;
        line-height:normal;
    }

    h6 {
        font-size:120%;
        line-height:normal;
    }

    .slidertext {
        font-size:180%;
    }

    .header_text {
        top:80%;
        font-size:180%;
    }

    .bottom_pfeil {
        display:none;
    }

    .logo-bottom-div {
        text-align:center;
    }

    .logo-bottom {
        margin:auto;
    }

    .tab {
        font-size:90%;
        overflow-x:auto;
        width:98%;
    }

    /* GS-Navigation */
    .gs-topnav a {
        display:block;
    }

    .gs-navbar li:not(.gs-opennav) {
        float:none;
        width:100%!important;
    }

    .gs-navbar {
        margin:-3px 0px 0 0;
    }

    .gs-navbar li.gs-right {
        float:none!important;
    }

    .gs-topnav .gs-dropdown-hover .gs-dropdown-content,
    .gs-navbar .gs-dropdown-click .gs-dropdown-content,
    .gs-navbar .gs-dropdown-hover .gs-dropdown-content {
        position:relative;
    }

    .gs-topnav,.gs-navbar {
        text-align:center;
    }

    .mySlides .gs-display-topleft {
        top:-52px;
        z-index:1;
    }

    .mySlides .gs-display-topleft img {
        max-width:150px;
    }

    .bildlogo {
        height:30px;
        width:auto;
        margin:12px 0px 6px 16px;
        padding:0px;
    }

    .highlights {
        padding:0 2.5%;
        min-height:320px;
        text-align:center;
    }

    .gs_inbox {
        height:auto;
        margin-top:15px;
    }

    .news:hover {
        height:auto;
    }

    .bottom_bg {
        font-size:100%;
    }

    .bottom_bg div.leftbox {
        padding:0% 2%;
        position:relative;
        bottom:0px;
        left:0px;
        text-align:center;
        margin:140px 0 15px 0;
    }

    .bottom_bg div.rightbox {
        padding:9% 32% 0 32%;
        position:relative;
        bottom:0;
        right:0;
    }

    /* Desktop-Navigation ausblenden */
    #navi {
        display:none;
    }

    #gs-top-ueber.shrink #gs-top .bildlogo {
        height:50px;
        width:auto;
    }

    .news {
        grid-template-columns:repeat(2, 1fr);
    }

    /*
     * Menüschalter und mobile Menücontainer dürfen
     * durch gs-hide-medium nicht verschwinden.
     */
    .gs-hide-medium:not(#navicon):not(#navimobil):not(.cbp-spmenu):not(:has(#navicon, #navimobil, .cbp-spmenu)) {
        display:none !important;
    }

    .icontop {
        height:36px;
        width:36px;
        margin:0 0 0 2px;
    }

    /* Neuer Header: Logo und Menü oben, Suche darunter */
    #gs-top.header-layout .header-zeile {
        grid-template-columns:minmax(0, 1fr) 44px;
        grid-template-areas:
            "logo menue"
            "suche suche";
        gap:10px 12px;
        padding:10px 0;
        min-height:0;
    }

    #gs-top.header-layout .header-konto {
        display:none;
    }

    #gs-top.header-layout .bildlogo,
    #gs-top-ueber.shrink #gs-top.header-layout .bildlogo {
        height:50px;
        max-width:100%;
    }

    #gs-top.header-layout .header-suchformular form {
        min-height:50px;
    }

    #gs-top.header-layout .header-zeile--checkout {
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:"logo zurueck";
    }
}

/* ============================================
   3. SMARTPHONE: BIS EINSCHLIESSLICH 600 PX
   ============================================ */

@media only screen and (max-width: 600px) {

    /* Suche innerhalb der mobilen Navigation */
    #navimobil #vt_suche {
        background-color:var(--farbe-blau);
        height:66px;
    }

    #navimobil #vt_suche input[type=text] {
        border:0;
        float:left;
        margin:1px 0px 0px 0px;
        font-size:110%;
        height:40px;
        width:80%;
        line-height:40px;
        padding:0px 10px 0px 10px;
    }

    #navimobil #vt_suche input.btnSave {
        border-radius:0px;
        height:40px;
        line-height:40px;
        margin-left:3%;
        float:left;
        width:30px;
        padding:0px;
        text-align:center;
        margin-top:0px;
        border:0px;
    }

    #navimobil #vt_suche_mobil {
        background-color:var(--farbe-gruen);
        height:62px;
    }

    #navimobil #vt_suche_mobil input[type=text] {
        border:0;
        float:left;
        margin:1px 0px 0px 0px;
        font-size:110%;
        height:40px;
        width:80%;
        line-height:40px;
        padding:0px 10px 0px 10px;
    }

    #navimobil #vt_suche_mobil input.btnSave {
        border-radius:0px;
        height:40px;
        line-height:40px;
        margin-left:3%;
        float:left;
        width:30px;
        padding:0px;
        text-align:center;
        background:transparent url('../img/icons/svg/suche.svg')no-repeat center center;
        margin-top:0px;
        border:0px;
    }

    #navimobil input.btnSeek {
        background:transparent url('../img/icons/svg/suche.svg') no-repeat center center;
        background-size:61%;
        float:right;
        text-align:left;
        margin:4px 1px 0 0;
        padding:6px 43px 4px 0px;
        background-color:var(--farbe-weiss);
        text-transform:uppercase;
        border:0px;
        font-size:21px;
        font-weight:600;
        cursor:pointer;
    }

    #navimobil input.btnSeek:hover {
        background-color:var(--farbe-weiss);
    }

    .faq-container {
        margin-bottom:40px;
    }

    .faq-section {
        margin-bottom:35px;
    }

    .faq-section .faq-heading {
        font-size:135%;
        line-height:1.4;
        margin-bottom:18px;
    }

    .faq-item {
        margin-bottom:8px;
    }

    .faq-question {
        min-height:56px;
        gap:8px;
        padding:12px;
        font-size:100%;
        line-height:1.45;
    }

    .faq-number {
        flex-basis:28px;
    }

    .faq-question::after {
        flex-basis:28px;
        width:28px;
        height:28px;
        font-size:22px;
    }

    .faq-answer {
        padding:16px 18px;
        font-size:100%;
        line-height:1.65;
    }

    /* Kategorieslider */
    .slider-kat {
        gap:8px;
    }

    .slider-kat__nav {
        flex:0 0 34px;
        width:34px;
        height:34px;
        font-size:18px;
    }

    .slider-kat__label {
        font-size:13px;
        margin-top:10px;
    }

    /* Dialog */
    .layer {
        width:calc(100vw - 20px);
        height:calc(100dvh - 20px);
        max-width:none;
        max-height:none;
        border-radius:12px;
    }

    .layer_header {
        height:58px;
        padding:0 12px 0 16px;
        cursor:default;
    }

    .layer_header .title {
        font-size:1.05rem;
    }

    .layer_header .close {
        flex-basis:36px;
        width:36px;
        height:36px;
    }

    .layer_frame {
        height:calc(100% - 58px);
    }

    .step-box {
        flex:1 1 100%;
    }

    /* Bestehende Headerklassen */
    #gs-top .bildlogo {
        height:50px;
        width:auto;
    }

    .logo-platzhalter {
        width:100%;
        margin:0 0 25px 0;
    }

    /* Startslider */
    .slide {
        flex:0 0 calc(100vw - 40px);
        width:calc(100vw - 40px);
    }

    .slide img {
        pointer-events:none;
    }

    /* Allgemeine Anpassungen */
    body {
        font-size:90%;
        line-height:25px;
    }

    .on-off {
        display:none;
    }

    .trennlinie-w {
        margin:20px 0px 20px 0px;
        height:1px;
        border-top:1px var(--farbe-weiss) solid;
    }

    .gs-padding-small {
        padding:0 15px;
    }

    .aus {
        display:none;
    }

    .bblock {
        display:none;
    }

    .suche {
        width:100%;
        margin:0;
        padding:0 10px 10px 10px;
    }

    .suchfeld {
        float:left;
        width:calc(100% - 90px);
    }

    #navimobil #vt_suche_mobil {
        display:none;
    }

    #cms {
        padding:0 5px;
    }

    #verlauf {
        display:none;
    }

    /* Überschriften */
    h1 {
        font-size:200%;
        margin:0px 0px 50px 0px;
        padding:25px 0 0 0;
    }

    h2 {
        font-size:170%;
    }

    h3 {
        font-size:170%;
        line-height:normal;
        font-weight:bold;
    }

    h4 {
        font-size:160%;
        line-height:normal;
    }

    h5 {
        font-size:160%;
        line-height:normal;
    }

    h6 {
        font-size:120%;
        line-height:normal;
    }

    .slidertext {
        font-size:180%;
    }

    .header_text {
        top:80%;
        font-size:180%;
    }

    .bottom_pfeil {
        display:none;
    }

    .logo-bottom-div {
        text-align:center;
    }

    .logo-bottom {
        margin:auto;
    }

    .tab {
        font-size:90%;
        overflow-x:auto;
        width:98%;
    }

    /* GS-Navigation */
    .gs-topnav a {
        display:block;
    }

    .gs-navbar li:not(.gs-opennav) {
        float:none;
        width:100%!important;
    }

    .gs-navbar {
        margin:-3px 0px 0 0;
    }

    .gs-navbar li.gs-right {
        float:none!important;
    }

    .gs-topnav .gs-dropdown-hover .gs-dropdown-content,
    .gs-navbar .gs-dropdown-click .gs-dropdown-content,
    .gs-navbar .gs-dropdown-hover .gs-dropdown-content {
        position:relative;
    }

    .gs-topnav,.gs-navbar {
        text-align:center;
    }

    .mySlides .gs-display-topleft {
        top:-52px;
        z-index:1;
    }

    .mySlides .gs-display-topleft img {
        max-width:150px;
    }

    .bildlogo {
        height:30px;
        width:auto;
        margin:12px 0px 6px 16px;
        padding:0px;
    }

    .highlights {
        padding:0 2.5%;
        min-height:320px;
        text-align:center;
    }

    .gs_inbox {
        height:auto;
        margin-top:15px;
    }

    .news:hover {
        height:auto;
    }

    .bottom_bg {
        font-size:100%;
    }

    .bottom_bg div.leftbox {
        padding:0% 2%;
        position:relative;
        bottom:0px;
        left:0px;
        text-align:center;
        margin:140px 0 15px 0;
    }

    .bottom_bg div.rightbox {
        padding:9% 32% 0 32%;
        position:relative;
        bottom:0;
        right:0;
    }

    /* Desktop-Navigation ausblenden */
    #navi {
        display:none;
    }

    #gs-top-ueber.shrink #gs-top .bildlogo {
        height:50px;
        width:auto;
    }

    /* Smartphone-spezifische Anpassungen */
    .news {
        grid-template-columns:1fr;
    }

    p {
        margin:5px 0px;
    }

    .highlights {
        padding:0 2.5%;
        min-height:inherit;
        text-align:center;
    }

    .gs-hide-small {
        display:none !important;
    }

    /* Neuer Header: Logo und Menü oben, Suche darunter */
    #gs-top.header-layout .header-zeile {
        grid-template-columns:minmax(0, 1fr) 44px;
        grid-template-areas:
            "logo menue"
            "suche suche";
        gap:10px 12px;
        padding:10px 0;
        min-height:0;
    }

    #gs-top.header-layout .header-konto {
        display:none;
    }

    #gs-top.header-layout .bildlogo,
    #gs-top-ueber.shrink #gs-top.header-layout .bildlogo {
        height:50px;
        max-width:100%;
    }

    #gs-top.header-layout .header-suchformular form {
        min-height:50px;
    }

    #gs-top.header-layout .header-zeile--checkout {
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:"logo zurueck";
    }
}